@charset "utf-8";
/*common
----------------------------------------------------*/
/* 設定 */	
html {
	font-size: 62.5%;
	margin: 0;
	padding: 0;
	scroll-behavior: smooth;
}
body {
	font-size: 18px;
	font-size: 1.6rem;
	line-height: 1.8;
/*@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
body {
    font-family: 'Noto Sans JP', sans-serif;
}
①フォント設定ここまで*/
	font-family:游ゴシック, "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "ＭＳ ゴシック", sans-serif;
	font-weight:400;
	color: #000;
}
img {
	border: 0;
}
a {
	text-decoration: none;
}
ul, li {
	list-style: none;
}
h3{
	margin:0;
}
/* float */
.fLeft {
	float: left !important;
}
.fRight {
	float: right !important;
}
/* clearfix */
.cf:after {
	content: "";
	display: block;
	clear: both;
}
/* align */
.cen {
	text-align: center !important;
}
.left {
	text-align: left !important;
}
.right {
	text-align: right !important;
}
/* text-indent */
.indent {
	text-indent: 100%;
	overflow: hidden;
	white-space: nowrap;
}
/* font-size */


/* margin,padding */

/* -------------------------------------------------
layout
----------------------------------------------------*/

/* ===== header ===== */
header {
	background: #000;
	border-bottom: none !important;
	-webkit-background-size: 4px 4px;
	padding: 6px 10px 6px 10px;
	height: 30px;
	overflow: hidden !important;
}
/* ===== footer ===== */
footer {
	font-family: sans-serif;
	line-height: 1.55;
}
/* page top */
#page-top {
	position: fixed;
	right: 20px;
	bottom: 20px;
}
@media screen and (min-width: 750px) {
#page-top a {
	transition: all .3s ease-in-out;
}
#page-top a:hover {
	opacity: 0.7;
}
}
#page-top img {
	width: 50px;
	height: 50px;
}
/* sns area */
.sns-line {
	font-size: 0;
	text-align: center;
	margin-bottom: 30px;
}
.sns-line p {
	display: inline-block;
	margin: 0 20px;
}
 @media screen and (max-width:750px) {
.btn-top {
	width: 89.69%;
}
.sns-line p {
	width: 20.5%;
	margin:0 10px;
}

.sns-line p:last-child {
	width:24.5%
}
}
.bnr_area {
	background-size: 100% auto;
 padding:0 calc(40 / 750 * 100vw);
}
 @media screen and (min-width:750px) {
.bnr_area {
	padding: 0 42px;
}
}
 [data-device="pc"] {
 display:none;
}
 @media screen and (min-width:750px) {
[data-device="pc"] {
 display:block;
}
 [data-device="sp"] {
 display:none;
}
}

/* ====================================
index.html
====================================== */
.w-100 {
	display: block;
	margin: auto;
	border: 0;
	max-width: 100%;
	vertical-align: bottom !important;
}
 @media screen and (max-width:750px) {
.w-100 {
	width: 100%;
	height: auto;
}
}
 @media screen and (min-width:750px) {
	#container a {
		/*display: block;
		transition: all .3s ease-in-out;*/
	}
	#container a:hover {
		opacity: 0.7;
	}
}
#container {
	position: relative;
	z-index: 0;
	width: 100%;
	max-width: 750px;
	margin: auto;
	background-color: #fff;
}
.conts-inner {
	width: 100%;
	max-width: 750px;
	margin: auto;
}

/* ▼▼▼ */

.inner {
	width: 96%;
	max-width: 670px;
	margin: 0 auto;
	/*padding-top: 80%;/*20241105非表示*/
}
 @media screen and (min-width:750px) {
	.inner {
		/*padding: 0 40px;*/
	}
}


/* top */
.mainvisual {
	position: relative;
}
.reserved_box {
	background: url(../img/bg_reserv.jpg) no-repeat 0 0,
		        url(../img/gold_bg.jpg) repeat 0 0;
	background-size: contain, auto;
	padding: 30px 0 0;
}
.lead_txt {
	margin: 0 20px 50px;
	padding: 10px;
	border: 3px solid #aa1308;
	background: #ffffff;
	font-size: 2.0rem;
	font-weight: bold;
	color: #aa1308;
	text-align: center;
}
.reserved_inner {
	width: 100%;
	max-width: 670px;
	margin: 0 auto;
	padding: 40px 20px;
	background: url(../img/bg_reserv02.png) no-repeat center 0;
	background-size: 100% 100%;
	box-sizing: border-box;
	position: relative;
}
.reserved_inner::before {
	display: block;
	content: "";
	position: absolute;
	top: -25px;
	left: calc( 50% - 26px );
	width: 52px;
	height: 51px;
	background: url(../img/kazari_hana.png) no-repeat 0 0;
}
.reserved_box h2 {
	font-size: 2.0rem;
	font-weight: bold;
	margin-bottom: 25px;
	color: #aa1308;
	text-align: center;
	letter-spacing: 0.15;
}
.reserved_col {
	width: 85%;
	max-width: 360px;
	margin: 0 auto;
}
 @media screen and (min-width: 750px) {
	.reserved_box {
		padding: 50px 0 0;
	}
	.lead_txt {
		font-size: 2.6rem;
	}
	.reserved_inner {
		padding: 50px 40px;
	}
	.reserved_box h2 {
		font-size: 3.0rem;
	}
	.reserved_col {
		max-width: 480px;
	}
}
.reserved_type {
	margin-bottom: 20px;
}
.reserved_type .icon {
	margin-bototm: 10px;
	font-size: 1.4rem;
}
.reserved_type[data-icon="web"] p.icon span {
	display: inline-block;
	margin-right: 10px;
	padding: 5px 10px;
	background: #8d93c8;
	font-size: 1.6rem;
	color: #ffffff;
	font-weight: bold;
}
.reserved_type[data-icon="shop"] p.icon span {
	display: inline-block;
	margin-right: 10px;
	padding: 5px 10px;
	background: #76891c;
	font-size: 1.6rem;
	color: #ffffff;
	font-weight: bold;
}
.reserved_type p.date {
	font-size: 2.8rem;
	font-weight: bold;
	letter-spacing: 0.05rem;
	font-feature-settings: "palt";
}
.reserved_type p.date small {
	font-size: 50%;
	color: #121212;
}
.reserved_type[data-icon="web"] p.date {
	color: #8d93c8;
}
.reserved_type[data-icon="shop"] p.date {
	padding-top: 15px;
	color: #76891c;
	line-height: 1.0;
}
.reserved_type p.date span.att {
	font-size: 60%;
	color: #aa1308;
}
.link_txt {
	font-size: 1.2rem;
}
.link_txt a {
	display: inline !important;
	color: #b31507;
	text-decoration: underline;
}
.link_txt a:hover {
	text-decoration: none;
}
 @media screen and (min-width: 750px) {
	.reserved_type .icon {
		font-size: 1.6rem;
	}
	.reserved_type[data-icon="shop"] p.icon span, .reserved_type[data-icon="web"] p.icon span {
		font-size: 1.8rem;
	}
	.reserved_type p.date {
		font-size: 4.0rem;
		letter-spacing: 0.2rem;
	}
	.link_txt {
		font-size: 1.5rem;
	}
}


.searchArea {
	width: 100%;
	background: url(../img/cat_bg.jpg) repeat-y 0 0;
	background-size: 100% auto;
	padding: 40px 0;
}
.searchArea h2 {
	width: 60%;
	margin: 0 auto 40px;
	text-align: center;
}
.cat_list {
	margin: 0 15px 30px;
	padding-bottom: 30px;
	border-bottom: 1px solid #d9d3b9;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-box-align: stretch;
	-ms-flex-align: stretch;
	align-items: stretch;
}
.cat_list li {
	width: 100%;
	margin-bottom: 10px;
}
.cat_list li a {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	background: #ffffff;
	border-bottom: 2px solid #d9d3c3;
	position: relative;
}
.cat_list li a:hover {
	background: #b49750;
}
.cat_list li a span {
	display: block;
	padding: 20px 10px 20px 70px;
	transition: all .3s ease-in-out;
}
.cat_list li a:hover span {
	color: #ffffff;
}
.cat01 a span {
	background: url(../img/cat01_icon.png) no-repeat 20px center;
}
.cat01 a:hover span {
	background: url(../img/cat01_icon_hover.png) no-repeat 20px center;
}
.cat02 a span {
	background: url(../img/cat02_icon.png) no-repeat 15px center;
}
.cat02 a:hover span {
	background: url(../img/cat02_icon_hover.png) no-repeat 15px center;
}
.cat03 a span {
	background: url(../img/cat03_icon.png) no-repeat 20px center;
}
.cat03 a:hover span {
	background: url(../img/cat03_icon_hover.png) no-repeat 20px center;
}
.cat04 a span {
	background: url(../img/cat04_icon.png) no-repeat 22px center;
}
.cat04 a:hover span {
	background: url(../img/cat04_icon_hover.png) no-repeat 22px center;
}
.cat05 a span {
	background: url(../img/cat05_icon.png) no-repeat 15px center;
}
.cat05 a:hover span {
	background: url(../img/cat05_icon_hover.png) no-repeat 15px center;
}
.cat06 a span {
	background: url(../img/cat06_icon.png) no-repeat 15px center;
}
.cat06 a:hover span {
	background: url(../img/cat06_icon_hover.png) no-repeat 15px center;
}
.cat07 a span {
	background: url(../img/cat07_icon.png) no-repeat 15px center;
}
.cat07 a:hover span {
	background: url(../img/cat07_icon_hover.png) no-repeat 15px center;
}
.cat08 a span {
	background: url(../img/cat08_icon.png) no-repeat 15px center;
}
.cat08 a:hover span {
	background: url(../img/cat08_icon_hover.png) no-repeat 15px center;
}
.cat09 a span {
	background: url(../img/cat09_icon.png) no-repeat 15px center;
}
.cat09 a:hover span {
	background: url(../img/cat09_icon_hover.png) no-repeat 15px center;
}
.search_btn {
	width: 85%;
	max-width: 560px;
	margin: 0 auto;
}
.search_btn p {
	margin-bottom: 15px;
	text-align: center;
}
@media screen and (min-width: 460px) {
	.searchArea {
		padding: 80px 0;
	}
	.cat_list {
		margin: 0 25px 50px;
		padding-bottom: 50px;
	}
	.cat_list li {
		width: calc( 50% - 5px );
	}
}


.infoArea {
	width: 100%;
	margin-bottom: 80px;
	padding: 80px 0 50px;
	background: url(../img/dot_bg.png) repeat-x 0 0,
		        url(../img/bottom_bg.png) repeat-x 0 bottom,
		        url(../img/gray_bg.jpg) repeat 0 0;
}
.info_col {
	width: 100%;
	margin-bottom: 50px;
}
.info_col h3 {
	margin-bottom: 20px;
	padding: 15px 0 10px 15px;
	font-size: 2.2rem;
	font-weight: bold;
	position: relative;
}
.info_col h3::before,
.info_col h3::after {
	display: block;
	content: "";
	position: absolute;
	width: 1px;
	height: 40px;
	background: #aa1308;
}
.info_col h3::before {
	top: 5px;
	left: 0;
}
.info_col h3::after {
	top: 10px;
	left: 4px;
}
.info_txt01 {
	display: inline-block;
	margin-bottom: 15px;
	padding: 2px;
	font-size: 1.6rem;
	font-weight: bold;
	color: #ffffff;
}
.info_txt01 span {
	display: block;
	padding: 10px;
	border: 1px solid #ffffff;
}
.info_web {
	background: #8d93c8;
}
.info_shop {
	background: #76891c;
}
.info_txt02 {
	margin-bottom: 5px;
	font-size: 1.6rem;
	font-weight: bold;
}
.info_txt03 {
	font-size: 2.0rem;
	text-decoration: underline;
}
.info_txt04 {
	margin-bottom: 20px;
}
.info_txt05 {
	margin: -20px 0 40px;
	position: relative;
}
#container .info_txt05 a {
	display: inline;
	text-decoration: underline;
}
#container .info_txt05 a:hover {
	text-decoration: none;
}
.info_list {
	margin-bottom: 40px;
}
.info_list li {
	margin-bottom: 5px;
	padding-left: 25px;
	background: url(../img/icon_sq_gl.png) no-repeat 0 4px;
	font-size: 1.4rem;
}
@media screen and (min-width: 640px) {
	.info_col h3 {
		margin-bottom: 30px;
		font-size: 2.8rem;
	}
	.info_col h3::before,
	.info_col h3::after {
		height: 60px;
	}
	.info_txt02 {
		font-size: 1.8rem;
	}
	.info_txt03 {
		font-size: 2.4rem;
	}
	.info_txt04 {
		margin-bottom: 30px;
	}
	.info_list li {
		font-size: 1.6rem;
	}
}
.brand_list_inner p {
	fotn-size: 1.6rem;
	font-weight: bold;
	color: #a27c1f;
}
.brand_nav {
	position: relative;
	margin-bottom: 40px;
	padding: 5px 0;
}
.brand_nav::before {
	display: block;
	content: "";
	position: absolute;
	top: 0;
	left: 5px;
	width: 1px;
	height: 100%;
	background: #bebebe;
}
.brand_nav li {
	padding: 3px 0 3px 30px;
	font-size: 1.5rem;
	position: relative;
}
.brand_nav li::before {
	display: block;
	content: "";
	position: absolute;
	top: 15px;
	left: 5px;
	width: 15px;
	height: 1px;
	background: #bebebe;
}
@media screen and (min-width: 640px) {
	.brand_list {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
	}
	.brand_list_inner:first-child {
		width: 400px;
	}
	.brand_list_inner:last-child {
		width: 235px;
	}
}




.bnr {
	margin-bottom: 65px;
}
.bnr p {
	text-align: center;
}
.contact_bnr {
	margin-bottom: 50px;
}
.bnr p img {
	max-width: 100%;
}
 @media screen and (min-width:750px) {
	.bnr {
		padding: 0 50px;
	}
}










.bnr02 {
	margin: 0 auto;
	padding-top: 20px;
	text-align: center;
}
.bnr02 a img {
	max-width: 100%;
}





/*---- header ----*/
#header {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 90px;
}


@media screen and (max-width:749px) {
	#header .conts-inner {
		transition: all .3s ease-in-out;
	}	
}

/*---- menu ----*/
.nav-btn {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	width: 60px;
	height: 60px;
	padding: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	border-radius: 30px;
	cursor: pointer;
	background:#000;
}
@media screen and (min-width:750px) {
	.nav-btn {
		top: 20px;
		transition: all .3s ease-in-out;
	}
}
.nav-btn span {
	position: absolute;
	display: inline-block;
	height: 1px;
	background: #fff;
	transition: all .3s ease-in-out;
}
.nav-btn span:nth-of-type(1) {
	top: 25px;
	left: 15px;
	width: 30px;	
}
.nav-btn span:nth-of-type(2) {
	top: 35px;
	left: 15px;
	width: 30px;	
}

.nav-btn.active span:nth-of-type(1) {
	transform: translateY(5px) rotate(405deg);
}
.nav-btn.active span:nth-of-type(2) {
	transform: translateY(-6px) rotate(-405deg);
}
@media screen and (min-width:750px) {
	.nav-btn.active span:nth-of-type(1) {
		transform: translateY(18px) rotate(405deg);
		top:12px;
	}
	.nav-btn.active span:nth-of-type(2) {
		transform: translateY(-22px) rotate(-405deg);
		top:52px;
	}
}
#gnav {
	display: none;
}
#gnav {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 100vh;
	background: url(../img/gold_bg.jpg) repeat 0 0;
	box-sizing:border-box;
}


.gnav-in {
	padding: 50px calc(40 / 750 * 100vw) 0;
}

.gnav-in p.gnav-in_ttl {
	margin: 0 auto 30px;
	padding-bottom: 10px;
	border-bottom: 1px solid #aa1308;
	font-size: 3.0rem;
	font-weight: bold;
	text-align: center;
}
.gnav-in ul {
	margin: 0 0 30px;
	padding-bottom: 0;
	border-bottom: none;
}
.order_list {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}
.order_list li {
	width: 48%;
	margin: 0 1%;
}
.order_list li a {
	display: block;
	padding: 20px;
	box-sizing: border-box;
	font-weight: bold;
	color: #ffffff;
	position: relative;
}
.order_web {
	background: #8d93c8;
}
.order_shop {
	background: #76891c;
}
.order_list li a::before {
	display: block;
	content: "";
	width: 6px;
	height: 6px;
	border: 0px;
	border-top: solid 2px #ffffff;
	border-right: solid 2px #ffffff;
	-ms-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	position: absolute;
	top: 50%;
	left: 90%;
	margin-top: -4px;
}
@media screen and (min-width:750px) {
	.gnav-in {
		padding: 50px 40px 0;
	}
}

 .gnav05 {
	 margin:50px 0;
	 text-align:center;
 }


/*---- 追従header ----*/
#header .conts-inner.is-fixed {
	position: fixed;
	top: -1px;
	z-index: 100;
	width: 100%;
}
#header conts-inner.is-fixed .conts-inner {
	padding: 0;
}
.is-fixed .nav-btn {
	top: 20px;
}
.is-fixed #gnav {
	height: 100vh;
	background: url(../img/gold_bg.jpg) repeat 0 0;
	overflow:auto;
}








/* detail */
.content {
	width: 100%;
	margin-bottom: 50px;
	padding-bottom: 30px;
	background: url(../img/baige_bg.jpg) repeat 0 0;
}

.page_ttl {
	margin-top: -15px;
	margin-bottom: 50px;
	position: relative;
}
@media screen and (min-width:750px) {
	.page_ttl {
		margin-top: -30px;
	}
}

.categoryList {
	margin: 0 auto 30px;
	padding-bottom: 40px;
	border-bottom: double #d0ccbb;
}
.category_list {
	width: 100%;
	padding-bottom: 10px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}
.category_list li {
	margin: 0 5px 10px;
	width: 100px;
}
.category_list li a {
	display: block;
	width: 100px;
	height: 100px;
	padding: 2px;
	box-sizing: border-box;
	background: #ffffff;
	position: relative;
}
.category_list li a:hover {
	opacity: 1 !important;
	background: #aa1308;
}
.category_list li a::before,
.category_list li a::after {
	display: block;
	content: "";
	position: absolute;
	width: 10px;
	height: 10px;
	background: #aa1308;
}
.category_list li a::before {
	top: 0;
	left: 0;
}
.category_list li a::after {
	bottom: 0;
	right: 0;
}
.category_list li a span {
	display: block;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	border: 1px solid #b64742;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	font-weight: bold;
	color: #aa1308;
	text-align: center;
	font-feature-settings: "palt";
	line-height: 1.4;
}
.category_list li a:hover span {
	color: #ffffff;
}
.txt_m {
	font-size: 1.6rem;
}
.txt_s {
	font-size: 1.5rem;
}
.categoryList p {
	font-size: 1.4rem;
}


.category_ttl {
	margin-bottom: 25px;
	padding-top: 20px;
	padding-left: 45px;
	background: url(../img/detail/ttl_bg.png) no-repeat 0 20px;
	font-size: 2.5rem;
	font-weight: bold;
	color: #aa1308;
	line-height: 1.4;
}
.category_ttl span {
	font-size: 1.8rem;
}
.detail_col {
	margin: 0 15px 25px;
	padding: 20px;
	background: #f6f6f6;
	box-sizing: border-box;
}
.detail_col h4 {
	margin-bottom: 15px;
	font-size: 2.2rem;
	font-weight: bold;
}
.detail_col h4 span {
	font-size: 1.3rem;
}
.detail_inner {
	padding: 25px 0 15px;
	border-top: 1px solid #d8d4c6;
}
.detail_img {
	margin-bottom: 15px;
}
.detail_img .right{
	margin-top: 5px;
	font-size: 1.4rem;
}
.label {
	margin-bottom: 10px;
}
.label span {
	display: inline-block;
	padding: 3px 5px;
	font-size: 1.4rem;
	font-weight: bold;
	color: #ffffff;
}
.web { background: #8d93c8; }
.shop { background: #76891c; }
.detail_name {
	margin-bottom: 10px;
	line-height: 1.5;
}
.bold {
	font-weight: bold;
}
.price {
	font-size: 2.0rem;
}
.detail_inner dt,
.detail_inner dd {
	font-size: 1.3rem;
}
.detail_inner dd {
	margin-bottom: 10px;
}
.detail_btn {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: end;
	-ms-flex-pack: end;
	justify-content: flex-end;
}
.detail_btn a {
	width: 80%;
	max-width: 250px;
	padding: 10px 15px;
	background: url(../img/detail/arr_p.png) no-repeat 90% center;
	background-size: 5px auto;
	box-sizing: border-box;
	border: 1px solid #8d93c8;
	color: #8d93c8;
	font-weight: bold;
}
.detail_btn a:hover {
	background: url(../img/detail/arr_w.png) no-repeat 95% center #8d93c8;
	background-size: 5px auto;
	color: #ffffff;
}
.detail_txt {
	margin-top: 5px;
	font-size: 1.2rem;
}
@media screen and (min-width:640px) {
	.category_ttl {
		background: url(../img/detail/ttl_bg.png) no-repeat 0 35px;
		font-size: 4.5rem;
	}
	.category_ttl span {
		font-size: 2.5rem;
	}
	.detail_col {
		margin: 0 15px 40px;
		padding: 40px;
	}
	.detail_col h4 {
		font-size: 3.0rem;
	}
	.detail_col h4 span {
		font-size: 1.6rem;
	}
	.detail_inner {
		padding-top: 30px;
	}
	.detail_img {
		margin-bottom: 25px;
	}
	.detail_img .right{
		font-size: 1.5rem;
	}
	.label span {
		padding: 7px 10px;
	}
	.detail_name {
		margin-bottom: 15px;
	}
	.price {
		font-size: 2.4rem;
	}
	.detail_inner dt,
	.detail_inner dd {
		font-size: 1.5rem;
	}
	.detail_txt {
		font-size: 1.3rem;
	}
}

.limit_txt {
  border: 5px solid #aa1308;
  padding: 20px;
  margin: 0 10px 20px;
}
.limit_txt .ttl{
  font-size: 1.8rem;
  color: #aa1308;
  font-weight: 700;
}
.limit_txt .txt{
  font-size: 1.3rem;
  color: #aa1308;
}
@media screen and (min-width:640px) {
  .limit_txt .ttl{
    font-size: 2.0rem;
  }
  .limit_txt .txt{
    font-size: 1.4rem;
  }
}
.note_txt {
  padding-top: 10px;
  font-size: 1.4rem;
}
@media screen and (min-width:640px) {
  .note_txt {
    font-size: 1.5rem;
  }
}
.mv .video {
	position: relative;
	padding-top: 100%;
	width: 100%;
	aspect-ratio: 1;
	order: 0;
}
.mv .video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
/*==================================================
アコーディオンのためのcss
===================================*/

/*アコーディオン全体*/
.accordion-area{
    list-style: none;
    /*width: 96%;
    max-width: 900px;*/
    margin:0 auto;
}

.accordion-area li{
    margin: 10px 0;
}

.accordion-area section {
	/*border: 1px solid #ccc;*/
}

/*アコーディオンタイトル*/
.title {
    position: relative;
    cursor: pointer;
    font-size: 2.0rem;
    font-weight: normal;
    padding: 2% 15% 2% 3%;
    transition: all .5s ease;
    background: #EE4B55;
    color: #FFF;
    font-weight: bold;
}

/*アイコンの＋と×*/
.title::before,
.title::after{
    position: absolute;
    content: '';
    width: 15px;
    height: 2px;
    background-color: #FFF;
    
}
.title::before{
    top:48%;
    right: 15px;
    transform: rotate(0deg);
    
}
.title::after{    
    top:48%;
    right: 15px;
    transform: rotate(90deg);

}
/*　closeというクラスがついたら形状変化　*/
.title.close::before{
	transform: rotate(45deg);
}

.title.close::after{
	transform: rotate(-45deg);
}

/*アコーディオンで現れるエリア*/
.box {
    display: none;
    /* background: #f3f3f3; */
    /* margin: 0 3% 3% 3%; */
    /* padding: 3%; */
}
.map{
	    padding: 8px 24px;
    /* border: 1px solid #333; */
    border-radius: 15px;
    margin: 1.5em 0 2em 0;
    background: #00A48E;
    color: #FFF;
}
@media screen and (max-width:640px){
	.title {
    position: relative;
    cursor: pointer;
    font-size: 1.8rem;
    font-weight: normal;
    padding: 2% 15% 2% 3%;
    transition: all .5s ease;
    background: #EE4B55;
    color: #FFF;
    font-weight: bold;
}

}
/*コピー*/
.copy{
	font-size:clamp(0.75rem, 0.0058rem + 3.7209vw, 1.75rem);
	margin:30px 0;
	padding:0 1.5%;
}
.copy2{
	font-size:1.0em;
	margin:20px 0;
	text-align:center;
}

@media screen and (max-width:640px)
{
	.copy{
	font-size:clamp(0.6875rem, -0.225rem + 4.0625vw, 1.5rem);
		margin:30px 0;
		line-height:1.5em;
		padding:0 1.5%;
}
.copy2{
	font-size:0.9em;
	margin:10px 0;
	text-align:center;
}
}
/*イベント情報のためのcss*/
#event{
	margin:0 0 100px 0;
}
.image{
	    width: 33%;
    float: left;
    /* padding: 10px; */
    /* background: #ccc; */
	}
	.spec{
	     width: 63.5%;
    float: right;
    padding: 0 5px;
    /* background: #ccc; */
	}
	.spec p{
	font-size:1em;
		line-height:1.5;
	margin:0 0 10px 0;
	}
	.event-link:hover {
    background-color: #d15555; 
}
	
.event-name {
        color: #333;
    font-size: 1.5em;
    margin: 0 0 8px 0;
    line-height: 1.3;
}
	.event-link {
           display: inline-block;
    /* margin-top: 10px; */
    width: 100%;
    /* max-width: 600px; */
    padding: 10px 0;
    background-color: #e16767;
    color: white;
    border-radius: 5px;
    text-decoration: none;
    text-align: center;
}
@media screen and (max-width:640px)	
{
.spec p{
	font-size:0.9em;
	}
.event-name {
            /* color: #e16767; */
    font-size: 1.2em;
    margin: 1px 0 8px 0;
    line-height: 1.15;

}
.event-link {
           display: inline-block;
    /* margin-top: 10px; */
    width: 100%;
    max-width: 450px;
    /* padding: 8px 24px; */
    background-color: #e16767;
    color: white;
    border-radius: 5px;
    text-decoration: none;
    font-size: 0.85em;
}
	}
.event-container {
        display: flex;
    background-color: white;
    /* border-radius: 10px; */
    /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */
    /* padding: 20px; */
    margin: 6% 0;
    width: 100%;
    max-width: 750px;
    padding-bottom: 20px;
    border-bottom: 1px dotted;}

.event-image {
        /* border-radius: 10px; */
    /* margin-right: 20px; */
    width: 100%;
    /* height: auto; */
    /* padding: 10px; */
    /* background: #333; */
}

.event-details {
    flex: 1; 
}

.event-title {
    text-align: center; 
    font-weight: bold; 
    color: #333; 
}

.event-content p {
    color: #555; 
    line-height: 1.5; 
}
.banner2 {
    width: 750px; /* 基準となるバナーの幅 */
    max-width: 100%; /* 親要素の幅を超えないようにし、画面幅に応じて縮小 */
    
    /* 幅に対する高さの比率を維持 (750:200) */
    /* これにより、幅が変更されたときに高さも自動的に調整されます */
    aspect-ratio: 750 / 120; 
    
    /* height: 200px; */ /* aspect-ratioを使用する場合、heightの固定指定は不要です */
    border-radius:20px;
    background-color: #FFCA4D; /* バナーの背景色（例：青） */
    box-sizing: border-box; /* paddingとborderをwidth/heightに含める */
    overflow: hidden; /* 内容がはみ出した場合に隠す */

    /* テキストを中央に配置するためのFlexbox設定 */
    display: flex;
    align-items: center; /* 上下中央揃え */
    justify-content: center; /* 左右中央揃え */
}

.banner2-text {
    margin: 0; /* pタグのデフォルトマージンをリセット */
    /*padding: 10px 20px; /* テキスト周りの余白（上下10px、左右20px） */
    text-align: center; /* テキストを中央揃え */
    /*color: #ffffff; /* テキストの色（例：白） */
	margin:20px 0;
    /* フォントサイズのレスポンシブ対応 */
    /* clamp(最小フォントサイズ, 推奨フォントサイズ, 最大フォントサイズ) */
    /* vwはビューポート幅の1%を意味します */
    font-size:clamp(1.3rem, calc(0.5vw + 1.45rem), 3.0rem);
	font-weight:bold;
    /* 例：
       - 最小でも12pxのフォントサイズを確保します。
       - ビューポート幅の2.8%を基準にフォントサイズを調整します。
         (例: 画面幅が750pxの場合、2.8vwは約21px)
       - ただし、フォントサイズが22pxを超えることはありません。
    */
    /* もし固定のフォントサイズが良い場合は、以下のように指定できます。 */
    /* font-size: 18px; */
}
.banner1 {
    width: 750px; /* 基準となるバナーの幅 */
    max-width: 100%; /* 親要素の幅を超えないようにし、画面幅に応じて縮小 */
    
    /* 幅に対する高さの比率を維持 (750:200) */
    /* これにより、幅が変更されたときに高さも自動的に調整されます */
    aspect-ratio: 750 / 120; 
    
    /* height: 200px; */ /* aspect-ratioを使用する場合、heightの固定指定は不要です */
    border-radius:20px;
    background-color: #C5D3BB; /* バナーの背景色（例：青） */
    box-sizing: border-box; /* paddingとborderをwidth/heightに含める */
    overflow: hidden; /* 内容がはみ出した場合に隠す */

    /* テキストを中央に配置するためのFlexbox設定 */
    display: flex;
    align-items: center; /* 上下中央揃え */
    justify-content: center; /* 左右中央揃え */
}

.banner1-text {
    margin: 0; /* pタグのデフォルトマージンをリセット */
    /*padding: 10px 20px; /* テキスト周りの余白（上下10px、左右20px） */
    text-align: center; /* テキストを中央揃え */
    /*color: #ffffff; /* テキストの色（例：白） */
	margin:20px 0;
    /* フォントサイズのレスポンシブ対応 */
    /* clamp(最小フォントサイズ, 推奨フォントサイズ, 最大フォントサイズ) */
    /* vwはビューポート幅の1%を意味します */
    font-size:clamp(1.3rem, calc(0.5vw + 1.45rem), 3.0rem);
	font-weight:bold;
    /* 例：
       - 最小でも12pxのフォントサイズを確保します。
       - ビューポート幅の2.8%を基準にフォントサイズを調整します。
         (例: 画面幅が750pxの場合、2.8vwは約21px)
       - ただし、フォントサイズが22pxを超えることはありません。
    */
    /* もし固定のフォントサイズが良い場合は、以下のように指定できます。 */
    /* font-size: 18px; */
}
.banner3 {
    width: 750px; /* 基準となるバナーの幅 */
    max-width: 100%; /* 親要素の幅を超えないようにし、画面幅に応じて縮小 */
    
    /* 幅に対する高さの比率を維持 (750:200) */
    /* これにより、幅が変更されたときに高さも自動的に調整されます */
    aspect-ratio: 750/100%; 
    text-align: center !important;
    /* height: 200px; */ /* aspect-ratioを使用する場合、heightの固定指定は不要です */
    border-radius:20px;
    background-color: #ED6361; /* バナーの背景色（例：青） */
    box-sizing: border-box; /* paddingとborderをwidth/heightに含める */
    overflow: hidden; /* 内容がはみ出した場合に隠す */
    /* テキストを中央に配置するためのFlexbox設定 */
    /*display: flex;*/
    align-items: center; /* 上下中央揃え */
    justify-content: center; /* 左右中央揃え */
}

.banner3-text {
        margin: 0;
    padding: 7% 4%;/*7% 3%;*/
    text-align: center !important;
    color: #ffffff;
    margin: 20px 0 40px 0;
    font-size: clamp(14px, 2.8vw, 18px);
    font-weight: bold;
    /* font-size: 18px; */
}

/*
.banner2{
	text-align:center;
	width:100%;
	height:200px;
	margin:auto;
	border:1px solid #333;
	border-radius: 20px;
	margin-bottom: 20px;
}
*/
#clear{
	    font-size: clamp(1.5rem, calc(0.6vw + 2.2rem), 3.0rem);
    line-height: 1.3;
    text-align: center;
    font-weight: bold;
    margin: 15% 0 5% 0;
	color:#DF007E;
}
#events{
	    font-size: clamp(1.5rem, calc(0.6vw + 2.2rem), 3.0rem);
    line-height: 1.3;
    text-align: center;
    font-weight: bold;
    margin: 15% 0 5% 0;
	color:#DF007E;
}
.br-sp {
    display: none;
}

@media (max-width: 600px) {
    .br-sp {
        display: block;
    }
}
.br-pc {
    display: block;
}

@media (max-width: 600px) {
    .br-pc {
        display: none;
    }
}
</style>