@charset "utf-8";
/*------------------------------------------------------------
	yakubarai
------------------------------------------------------------*/


.flame{
	width: 100%;
	overflow: hidden;
}


/*------------------------------------------------
開閉
------------------------------------------------*/


.faq_body {
	width: 100%;
	background-color: #fbfaf9;
	overflow: hidden;
}

.faq_body .inner{
	width: 530px;
	margin: 70px auto;
	border: 1px solid r_ed;
}



.qbox{
	margin-bottom: 22px;
}



.js-summary {
	position: relative;
	display: block; /* 矢印を消す */
	padding: 22px 3px 20px 62px; /* アイコンの余白を開ける */
	cursor: pointer; /* カーソルをポインターに */
	transition: 0.2s;
	font-size: 105%;
	font-weight: normal;
	border-radius: 10px;
	border: 1px solid #bdb7a1;
	transition: .9s;

}


.js-summary:hover {
	color: #d1b237;
}

.js-click:before,
.js-summary:before {
	content: "";
	position: absolute;
	top: 33px;
	left: 30px;
	width: 30px;
	height: 30px;
	border-top: 1px solid #C69B4D;
	transform: translateX(-50%);
}
.js-click:before,
.js-summary:after {
	content: '';
	position: absolute;
	top: 18px;
	left: 30px;
	border-bottom: 1px solid #C69B4D;
	width: 30px;
	height: 30px;
	transform: rotate(90deg);
	transition: .6s;
}



.js-click.open:before,
.js-summary.open:before {
	content: ""
}

.js-click.open:before,
.js-summary.open:after {
	content: '';
	position: absolute;
	top: 18px;
	left: 30px;
	border-bottom: 1px solid #C69B4D;
	width: 0px;
	height: 0px;
	transform: rotate(90deg);
	opacity: 0;
}


.js-container {
	display: none;
}

.js-container{
	width: 310px;
	margin: 20px 35px 40px 0px;
	padding: 1.3em;
	line-height: 1.7;
	background-color: #f1ead8;
	color: #6b5e3d;
}

.js-container a{
	color: #d1b237;
	text-decoration: underline;
	transition: .6s;
}
.js-container a:hover{
	color: #e9c433;
}




#main .closingbox {
	width: 510px;
	margin: 40px auto 0;
	border-top: 1px solid #E1DAC8;
}

#main .closingbox .txt{
	width: 370px;
	margin: 40px auto 0;
	line-height: 1.8;
}

#main .closingbox .tel{
	width: 415px;
	margin: 30px auto;
	background-color: #EEE7D5;
	border-radius: 8px;
	text-align: center;
	padding: 20px 0;
	color: #827C6C;
	font-size: 90%;
}
#main .closingbox .tel span{
	font-size: 180%;
	color: #614d18;
	letter-spacing: 1px;
}




@media all and (max-width: 750px) {
	
	.qbox{
		margin-bottom: 24px;
	}
	
	
	
	.js-summary {
		position: relative;
		display: block; /* 矢印を消す */
		padding: 22px 3px 20px 62px; /* アイコンの余白を開ける */
		cursor: pointer; /* カーソルをポインターに */
		transition: 0.2s;
		font-size: 110%;
		font-weight: normal;
		border-radius: 10px;
		border: 1px solid #bdb7a1;
		transition: .9s;
	
	}
	
	
	.js-summary:hover {
		color: #d1b237;
	}
	
	.js-click:before,
	.js-summary:before {
		content: "";
		position: absolute;
		top: 30px;
		left: 30px;
		width: 30px;
		height: 30px;
		border-top: 1px solid #C69B4D;
		transform: translateX(-50%);
	}
	.js-click:before,
	.js-summary:after {
		content: '';
		position: absolute;
		top: 15px;
		left: 30px;
		border-bottom: 1px solid #C69B4D;
		width: 30px;
		height: 30px;
		transform: rotate(90deg);
		transition: .6s;
	}
	
	
	
	.js-click.open:before,
	.js-summary.open:before {
		content: ""
	}
	
	.js-click.open:before,
	.js-summary.open:after {
		content: '';
		position: absolute;
		top: 18px;
		left: 30px;
		border-bottom: 1px solid #C69B4D;
		width: 0px;
		height: 0px;
		transform: rotate(90deg);
		opacity: 0;
	}
	
	
	.js-container {
		display: none;
	}
	
	.js-container{
		border: 1px solid b_lue;
		width:87%;
		margin: 20px 35px 40px 0px;
		line-height: 1.7;
		padding: 250px auto;
		font-size: 105%;
	}
	
	.js-container a{
		color: #d1b237;
		text-decoration: underline;
		transition: .6s;
	}
	.js-container a:hover{
		color: #e9c433;
	}
	
	
	
	
	#main .closingbox {
		width: 100%;
		margin: 40px auto 0;
		border-top: 1px solid #E1DAC8;
	}
	
	#main .closingbox .txt{
		width: 90%;
		margin: 40px auto 0;
		line-height: 1.8;
	}
	
	#main .closingbox .tel{
		width: 90%;
		margin: 30px auto;
		background-color: #EEE7D5;
		border-radius: 8px;
		text-align: center;
		padding: 20px 0;
		color: #827C6C;
		font-size: 90%;
	}
	#main .closingbox .tel span{
		font-size: 180%;
		color: #614d18;
		letter-spacing: 1px;
	}
	
	
	
}

/*********************************/







/*--------  header  ---------------------------*/


.mainbox{
	border: 3px solid p_urple;
}


.head{
	border: 3px solid r_ed;
	width: 100%;
	margin: 0 auto 70px;
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
	position: relative;
	z-index: 1;
	background-color: #ededed;
}
.head img{
	height: 34px;
	margin: 30px auto;
	opacity: .8;
}

.mainimgbox{
	border: 3px solid b_lue;
	width: 100%;
	margin: 0px auto 0;
	position: relative;
	z-index: 10;
	text-align: center;
}
.mainimgbox .h1box{
	border: 1px solid r_ed;
	width: 100%;
	margin: 0px auto 0;
	position: relative;
	z-index: 10;
	text-align: center;
}
.mainimgbox h1{
	width: 210px;
	border: 3px solid r_ed;
	margin: 50px auto 0;
}

.mainimgbox .mainimg1{
	position: absolute;
	z-index: 10;
	top: -30px;
	left: -70px;
	width: calc(48vw - 40px);
}
.mainimgbox .mainimg2{
	position: absolute;
	z-index: 2;
	top: 80px;
	right: -30px;
	width: calc(48vw - 70px);
}

.mainimgbox .dateimg{
	width: 250px;
	margin: 40px auto 40px;
	position: relative;
	z-index: 10;
}
.mainimgbox .wave{
	width: 100vw;
	position: absolute;
	bottom: 0;
	left: 0;right: 0;
	opacity: .4;
	z-index: 1;
}







@media all and (max-width: 750px) {


	.mainbox{
		border: 3px solid p_urple;
	}
		
	.head{
		border: 3px solid r_ed;
		width: 100%;
		margin: 0 auto;
		display: flex;
		flex-direction: row-reverse;
		justify-content: space-between;
		position: relative;
		z-index: 1;
		background-color: #ededed;
	}
	.head img{
		height: 33px;
		margin: 22px auto;
	}

	.mainimgbox{
		border: 3px solid b_lue;
		width: 100%;
		margin: 0px auto 0;
		position: relative;
		z-index: 10;
		text-align: center;
	}
	.mainimgbox .h1box{
		border: 1px solid r_ed;
		width: 100%;
		margin: 0px auto 0;
		position: relative;
		z-index: 10;
		text-align: center;
	}
	.mainimgbox h1{
		width: 40vw;
		border: 3px solid r_ed;
		margin: 50px auto 0;
		position: relative;
		z-index: 20;
	}

	.mainimgbox .mainimg1{
		position: absolute;
		z-index: 10;
		top: -80px;
		left: -70px;
		width: calc(59vw - 0px);
	}
	.mainimgbox .mainimg2{
		position: absolute;
		z-index: 2;
		top: 50vw;
		right: -30px;
		width: calc(48vw - 10px);
	}

	.mainimgbox .dateimg{
		width: 55vw;
		margin: 40px auto 40px;
		position: relative;
		z-index: 10;
	}
	.mainimgbox .wave{
		width: 110vw;
		position: absolute;
		bottom: 0;
		left: 0;right: 0;
		opacity: .4;
		z-index: 1;
	}

}





/*------------------------------------*/

.lead{
	background-color: #39456a;
	position: relative;
	top: 0px;
	margin-bottom: 0px;
	z-index: 0;
	padding-top: 110px;
	padding-bottom: 80px;
}



.lead .inner01{
	width: 450px;
	margin: 0 auto;
	position: relative;
	z-index: 2;
}

.lead .inner01 p{
	margin-bottom: 1.5em;
	color: #fcfcfc;
	font-size: 115%;
	text-align: center;
}
.lead .mark{
	width: 70px;
	margin: 50px auto 0;
	display: block;
	position: relative;
	z-index: 2;
}


.databox1{
	width: 530px;
	border: 2px solid r_ed;
	margin: 70px auto 0;
	position: relative;
	right: 15px;
}
.databox2{
	width: 400px;
	border: 2px solid r_ed;
	margin: 30px auto 0;
}





@media all and (max-width: 750px) {

	.lead{
		background-color: #39456a;
		position: relative;
		top: 0px;
		margin-bottom: 0px;
		z-index: 0;
		padding-top: 70px;
		padding-bottom: 60px;
	}


	.lead .inner01{
		width: 100%;
		margin: 0 auto;
		position: relative;
		z-index: 2;
	}

	.lead .inner01 p{
		margin-bottom: 1.5em;
		color: #fcfcfc;
		font-size: 115%;
		text-align: center;
	}
	.lead .mark{
		width: 70px;
		margin: 50px auto 0;
		display: block;
		position: relative;
		z-index: 2;
	}


	.databox1{
		width: 100vw;
		border: 2px solid r_ed;
		margin: 70px auto 0;
		position: relative;
		right: 15px;
	}
	.databox2{
		width: 78vw;
		border: 2px solid r_ed;
		margin: 30px auto 0;
	}

	
}

/*------------------------------------*/



.outline{
	background-color: #Fff;
	position: relative;
	top: -15px;
	z-index: 1;
	border: 3px solid r_ed;
	margin-bottom: 50px;
}

.outline .h4box{
	border-bottom: 1px solid #817147;
	font-size: 165%;
	width: 3.4em;
	text-align: center;
	margin: 80px auto 0;
}


.reserve_p{
	width: 350px;
	margin: 20px auto 0;
	font-size: 110%;
	letter-spacing: 2px;
	line-height: 2.5;
	color: #887e64;
}
.reserve_p span{
	text-decoration: underline;
}

.attention{
	background-color: #ede6de;
	width: 350px;
	margin: 10px auto 0;
	color: #B48E33;
	padding: 20px;
}


.reservebtn p{
	text-align: center;
	position: relative;
	top: 3em;
	color: #B48E33;
	font-weight: bold;
}
.reservebtn a{
	width: 400px;
	height: 70px;
	display: block;
	border-radius: 12px;
	margin: 50px auto 80px;
	background:-moz-linear-gradient(top left, #E5CB81, #DEBB53);
	background:-webkit-linear-gradient(top left, #E5CB81, #DEBB53);
	background:linear-gradient(to bottom right, #E5CB81, #DEBB53);
	text-align: center;
	font-size: 170%;
	color: #fff;
	padding-top: 35px;
	filter: drop-shadow(0px 8px 6px rgba(160,158,154,0.6)) drop-shadow(0px 6px 13px rgba(222,217,212,0.4));
	transition: .6s;
	border: #E3C672 1px solid ;
	position: relative;
	z-index: 10;
}
.muryou{
	font-size: 60%;
	opacity: .7;
	display: inline-block;
	position: relative;
	top: -0.6em;
}

.tyu{
	width: 65%;
	margin: -50px auto 0;
	display: block;
}
.reservebtn a::before { /* 背景の表示設定 */
	content: "";
	position: absolute;
	margin: auto;
	top: 0;
	bottom: 0;
	right: 23px;
	width: 26px; /* 横幅 */
	height: 26px; /* 高さ */
	border-radius: 50%; /* 角の丸み */
	background: #fff;
}

.reservebtn a::after { /* くの字の表示設定 */
	content: "";
	position: absolute;
	margin: auto;
	top: 0;
	bottom: 0;
	right: 32px;
	width: 10px;
	height: 10px;
	border-top: 2px solid #d1b237;
	border-right: 2px solid #d1b237;
	transform: rotate(45deg);
}

.reservebtn a:hover{
	filter: drop-shadow(0px 12px 8px rgba(160,158,154,0.6)) drop-shadow(0px 6px 13px rgba(222,217,212,0.4));
	background:-moz-linear-gradient(top left, #fff, #fff);
	background:-webkit-linear-gradient(top left, #fff, #fff);
	background:linear-gradient(to bottom right, #fff, #fff);
	border: #C69B4D 1px solid ;
	color: #C69B4D;
}




@media all and (max-width: 750px) {

	.outline{
		position: relative;
		top: -15px;
		z-index: 1;
	}
	
	.outline .h4box{
		border-bottom: 1px solid #817147;
		font-size: 165%;
		width: 3.7em;
		text-align: center;
		margin: 80px auto 0;
	}
	
	
	.outline h4{
		font-weight: normal;
		width: auto;
		text-align: center;
		letter-spacing: 3px;
		color: #817147;
	}
	
	.hatuho{
		font-size: 145%;
		text-align: center;
		margin-top: 20px;
		color: #887e64;
	}
	.hatuho span{
		font-size: 80%;
	}
	
	.reserve_p{
		width: 70%;
		margin: 20px auto 0;
		font-size: 110%;
		letter-spacing: 2px;
		line-height: 2.5;
		color: #887e64;
	}
	.reserve_p span{
		text-decoration: underline;
	}
	
	.attention{
		background-color: #ede6de;
		width: 70%;
		margin: 10px auto 0;
		font-size: 105%;
		color: #B48E33;
		padding: 20px;
	}
	
	
	.reservebtn a{
		width: 100%;
		height: 70px;
		display: block;
		border-radius: 12px;
		margin: 50px auto 80px;
		background:-moz-linear-gradient(top left, #E5CB81, #DEBB53);
		background:-webkit-linear-gradient(top left, #E5CB81, #DEBB53);
		background:linear-gradient(to bottom right, #E5CB81, #DEBB53);
		text-align: center;
		font-size: 170%;
		color: #fff;
		padding-top: 35px;
		filter: drop-shadow(0px 8px 6px rgba(160,158,154,0.6)) drop-shadow(0px 6px 13px rgba(222,217,212,0.4));
		transition: .6s;
		border: #E3C672 1px solid ;
		position: relative;
		z-index: 10;
	}
	.reservebtn a::before { /* 背景の表示設定 */
		content: "";
		position: absolute;
		margin: auto;
		top: 0;
		bottom: 0;
		right: 13px;
		width: 26px; /* 横幅 */
		height: 26px; /* 高さ */
		border-radius: 50%; /* 角の丸み */
		background: #fff;
	}	
	.reservebtn a::after { /* くの字の表示設定 */
		content: "";
		position: absolute;
		margin: auto;
		top: 0;
		bottom: 0;
		right: 22px;
		width: 10px;
		height: 10px;
		border-top: 2px solid #d1b237;
		border-right: 2px solid #d1b237;
		transform: rotate(45deg);
	}
}

/***************************/




footer{
	background-color: #F8F8F6;
	border: 1px solid #F8F8F6;
}

footer .inner{
	width: 600px;
	border: 1px solid r_ed;
	margin: 70px auto 15px;
	position: relative;
	text-align: center;
}

footer .inner{
	color: #bcb7aa;
	font-size: 90%;
}





@media all and (max-width: 750px) {


	.access{
		background-color: #F8F8F6;
		position: relative;
		z-index: 1;
		border: 1px solid #F8F8F6;
	}
	
	
	.access .h3box{
		border-bottom: 1px solid #817147;
		font-size: 165%;
		width: 5em;
		text-align: center;
		margin: 140px auto 0;
	}
	
	
	.access h3{
		font-weight: normal;
		width: auto;
		text-align: center;
		letter-spacing: 6px;
		color: #817147;
	}
	
	.access .mapbox{
		border: 5px solid #156da4;
		margin: 50px auto 0;
		width: 280px;
		height: 200px;
	}
	.access .add{
		margin: 20px auto 0;
		text-align: center;
		font-size: 90%;
	}
	
	.access .metro{
		margin: 20px auto 0;
		text-align: center;
		font-size: 170%;
		color: #7D6E42;
		letter-spacing: 2px;
	}
	.access .metro .line{
		font-size: 60%;
	}
	.access .metro .station{
		text-decoration: underline;
	}
	.access .metro .little{
		font-size: 80%;
		display: inline-block;
		margin: 0 .3em;
	}
	.access .around{
		font-size: 130%;
		width: 90%;
		letter-spacing: 3px;
		text-align: center;
		margin: 15px auto 0;
		padding-top: 15px;
		border-top: 1px solid #E1DAC8;
		color: #7D6E42;
	}
	
	
	footer{
		background-color: #F8F8F6;
		border: 1px solid #F8F8F6;
	}
	
	footer .inner{
		width: 100%;
		border: 1px solid r_ed;
		margin: 0px auto 5px;
		position: relative;
		color: #bcb7aa;
		font-size: 90%;
		padding-left: 15px;
	}
	footer .inner img{
		width: 40vw;
		position: relative;
		top: 0;
		left: 52vw;
	}
	
	
}