@charset "utf-8";
/* ------------------------------------------------------------ reservation */
#reservation{ padding: 100px 0 125px; }
#reservation h2{ padding: 0 0 90px; text-align: left!important; }

#reservation .sec{ display: flex; padding: 35px 0; border-top: 1px solid #DDDDDD; width: 100%; }
#reservation .sec h3{ width: 400px; font-size: 19px; font-family: 'Noto-Sans-JP-Medium'; }
#reservation .sec h3 span{ padding: 0 10px 0 0; font-size: 31px; font-family: neue-haas-grotesk-display, sans-serif; font-weight: 600; font-style: normal; }

#reservation .sec .box{ width: 800px; padding: 0 0 0 70px; }
#reservation .sec .box p{ padding: 10px 0 0; font-size: 18px; font-family: 'Noto-Sans-JP-Medium'; }
#reservation .sec .box dl dt{ font-size: 49px; font-family: 'Noto-Sans-JP-Medium'; }
#reservation .sec .box dl dt small{ padding: 0; font-size: 16px; font-family: 'Noto-Sans-JP-Regular'; }
#reservation .sec .box dl dd{ font-size: 14px; padding: 10px 0 0; font-family: 'Noto-Sans-JP-Regular'; }
#reservation .sec .box ul li{ padding: 0 0 22px; font-size: 14px; font-family: 'Noto-Sans-JP-Regular'; }
#reservation .terms .terms-box { height: 300px; overflow: scroll; border: 1px solid #ccc; padding: 20px; line-height: 100%; border-radius: 10px; }
#reservation .sec .box p.payment { text-align: center; }

#reservation .terms .box dl dd,
#reservation .terms .box ul li,
#reservation .terms .box p { font-size: 13px; line-height: 150%; text-align: left; padding: 0 0 5px; font-family: 'Noto-Sans-JP-Regular';  }
#reservation .terms .box dl dt { font-family: font-family: 'Noto-Sans-JP-Medium' !important; font-size: 16px; padding: 10px 0 10px;  }
#reservation .terms .box ul li { list-style-type: initial; list-style-position: inside; padding: 0; }

/* redio */
#reservation .sec .box .radio{ display: none; }
#reservation .sec .box .radio+label{ display: block; width: 371px; height: 265px; padding: 10px; border: 1px solid #C6C6C6; border-radius: 10px; }
#reservation .sec .box .radio+label:before{ content: ""; display: inline-block; background-size: contain; width: 350px; height: 197px; }
#reservation .sec .box .radioA+label:before{ background: url(../images/reservation/pic_01.jpg) center/cover no-repeat; }
#reservation .sec .box .radioB+label:before{ background: url(../images/reservation/pic_02.jpg) center/cover no-repeat; }
#reservation .sec .box .radioC+label:before{ background: url(../images/reservation/pic_03.jpg) center/cover no-repeat; }
#reservation .sec .box .radioD+label:before{ background: url(../images/reservation/pic_03.jpg) center/cover no-repeat; }
#reservation .sec .box .radio:checked+label{ background: #FFE8E8; }

#reservation .sec .studio_box{ display: flex; justify-content: flex-end; }
#reservation .sec .studio_box label:first-of-type{ margin: 0 10px 0 0; }

#reservation .sec.type h3 { width: 400px; font-size: 19px; font-family: 'Noto-Sans-JP-Medium'; padding: 0 0 20px; }
#reservation .sec.type { display: block; }
#reservation .sec.type .box{ width: 100%; }
#reservation .sec.type .box p{ padding: 10px 0 0; font-size: 15px; font-family: 'Noto-Sans-JP-Medium'; text-align: center; }
#reservation .sec.type .box .radio+label{ display: block; width: 30%; height: inherit; padding: 10px 10px 17px; border: 1px solid #C6C6C6; border-radius: 10px; }
#reservation .sec.type .studio_box{ display: flex; justify-content: space-around; }

#reservation .sec.type .box .radio+label:before{ content: ""; display: inline-block; background-size: contain; width: 100%; height: auto; aspect-ratio: 16 / 9; }
#reservation .sec.type .studio_box label { margin: 0 ; }
#reservation .sec.type .studio_box label:first-of-type{ margin: 0; }


/* select */
#reservation .sec .select_box{ position: relative; }
#reservation .sec .select_box:after{ pointer-events: none; position: absolute; content: ""; top: 28px; left: calc(50% - 10px); width: 15px; height: 15px; transform: rotate(45deg); border-bottom: 1px solid #707070; border-right: 1px solid #707070; }
#reservation .sec .box .select{ appearance: none; -webkit-appearance: none; width: 370px; height: 80px; border: 1px solid #C6C6C6; border-radius: 13px; font-size: 20px; font-family: 'Noto-Sans-JP-Medium'; background: #fff; color: #000; text-align: center; text-align-last: center;}

#reservation .sec .textbox { width: 800px; }
#reservation .sec .textbox textarea { -webkit-appearance: none; border: 1px solid #C6C6C6; border-radius: 5px; width: 100%; height: 300px; } 

#reservation .sec_r .box{ text-align: right;}
#reservation .sec_r .select_box:after{ left: initial; right: 30px; }
#reservation .sec_r .select_box .select{ width: 300px; padding-left: 105px; }



/* calendar */
#reservation .calendar table{ display: table; width: 1450px;; margin: 0 0 35px; border-collapse: separate; }
#reservation .calendar table tbody{ width: 100%; }
#reservation .calendar table tr{ width: 100%; }
#reservation .calendar table th{ width: 136px; border-right: 1px solid #C7C7C7; border-bottom: 1px solid #C7C7C7; padding: 16px 0 18px; text-align: center; font-size: 16px; font-family: 'Noto-Sans-JP-Medium'; background: #404040; color: #fff; }
#reservation .calendar table td{ position: relative; border-right: 1px solid #C7C7C7; border-bottom: 1px solid #C7C7C7; }

/* #reservation .calendar table tr:first-of-type .time{ border-top: 1px solid #C7C7C7; } */
#reservation .calendar table .time{ border-bottom: none; position: sticky; z-index: 10; top: 0; left: 0; width: 95px; background: #fff; color: #000; text-align: left; font-size: 19px; font-family: 'Noto-Sans-JP-Regular'; }
#reservation .calendar table .sat{ background: #1984AC; }
#reservation .calendar table .sun{ background: #CE3939; }

#reservation .calendar table td:before{ position: absolute; content: ""; width: 30px; height: 30px; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 1; pointer-events: none; background: url(../images/common/icn_circle.svg) center/22px no-repeat; }
#reservation .calendar table td.cross:before{ background: url(../images/common/icn_cross.svg) center/22px no-repeat; }

#reservation .calendar .datetime+label:before{ content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
#reservation .calendar .datetime:checked+label::before{ background: #FFE8E8; }
#reservation .calendar .datetime{ display: none; }


#reservation .calendar .box { display: flex; justify-content: space-between; margin: 0 0 20px; }
#reservation .calendar .box:last-child { margin: 0; }
#reservation .calendar .days .date { width: 370px; height: 80px; border: 1px solid #C6C6C6; border-radius: 13px; font-size: 20px; font-family: 'Noto-Sans-JP-Medium'; background: #fff; color: #000; text-align: center; text-align-last: center; }
#reservation .calendar .time { margin: 0 0 0 10px; }





/* personal */

#reservation .sec .text_box { text-align: left;}
#reservation .sec .text_box dl { margin-bottom: 10px;}
#reservation .sec .text_box dl:last-child { margin-bottom: 0;}
#reservation .sec .text_box dt p { text-align: left;}
#reservation .sec .text_box dd { }
#reservation .sec .text_box dd p { text-align: left; margin-bottom: 10px;}
#reservation .sec .text_box dd input[type="text"] { font-size: 18px; padding: 10px; width: 100%; border-radius: 5px; border: 1px solid #C6C6C6;}
#reservation .sec .text_box .adress p input[type="text"] { width: 40%;}

/* btn */
.btn{ display: block; margin: 35px auto 0; padding: 5px 0;  width: 335px; border-radius: 40px; background: #C11A2D; color: #fff; font-size: 20px; font-weight: 600; font-style: normal; }


/* ------------------------------------------------------------ error */
#error { }
#error h3 { font-size: 32px; text-align: center; margin: 0 0 40px; padding: 0 0 30px; }
#error .caution { font-size: 16px; text-align: center; margin: 0 0 40px;}
#error .alert { margin: 0 0 50px;}
#error .alert span { display: block; text-align: center; margin: 0 0 20px;}
.back.btn{ background: #959595; color: #fff; text-align: center; padding: 27px 0;}


/* ------------------------------------------------------------ confirm */
#confirm { }
#confirm h3 { font-size: 32px; text-align: center; margin: 0 0 40px; font-family: 'Noto-Sans-JP-Bold'; }
#confirm .caution { font-size: 16px; text-align: center; margin: 0 0 40px;}
#confirm table { width: 100%; margin: 0 0 50px; font-size: 20px; }
#confirm table tr {	border-bottom: solid 1px #e5e5e5;}
#confirm table tr:first-of-type { border-top: solid 1px #e5e5e5;}
#confirm table tr th { width: 180px; line-height: 1.5; text-align: left; padding: 30px 0; font-family: 'Noto-Sans-JP-Bold'; }
#confirm table tr td { line-height: 1.5; padding: 30px 0; }
#confirm .btns { display: flex; justify-content: center;}
#confirm .btns .btn { margin: 0;}
#confirm .btns .back.btn { margin-right: 30px;}

/* ------------------------------------------------------------ thanks */
#thanks { margin: 50px 0 100px; }
#thanks h2 { font-size: 32px; text-align: center; margin: 0 0 40px; padding: 0 0 30px; font-family: 'Noto-Sans-JP-Bold'; }
#thanks .caution { font-size: 18px; text-align: center; line-height: 1.7; margin: 0 0 30px; }
#thanks small { display: block; font-size: 14px; text-align: center; line-height: 2; margin: 0 0 40px; }
#thanks .more { color: #000;}


/* ------------------------------------------------------------
	mobile 
------------------------------------------------------------ */
@media only screen and (max-width: 640px) {




#reservation{ padding: 40px 0 50px; }
#reservation h2{ padding: 0 0 50px; }

#reservation .sec{ padding: 22px 0; flex-direction: column;  }
#reservation .sec h3{ width: 100%; padding: 0 0 18px; font-size: 16px; }
#reservation .sec h3 span{ font-size: 24px; }

#reservation .sec .box{ width: 100%; padding: inherit; }
/* #reservation .sec .box p{ font-size: 14px; } */

#reservation .sec .box dl dt{  }
#reservation .sec .box dl dt small{padding: 0 0 0 5px; }
/* #reservation .sec .box dl dd{ font-size: 12px; padding: 15px 0 0 1rem; line-height: 150%; text-indent: -1rem; text-align: left; } */

#reservation .sec .box ul li{ padding: 0; font-size: 12px; line-height: 190%; }


#reservation .sec .studio_box{ width: 100%; }


/* redio */
#reservation .sec .box .radio+label{ width: 49%; height: 145px; padding: 5px; border-radius: 5px; }
#reservation .sec .studio_box label:first-of-type{ margin: 0 5px 0 0; }
#reservation .sec .box .radio+label:before{ width: 100%; height: 92px; }


/* select */
#reservation .sec .select_box{ margin: 0 auto; }
#reservation .sec .select_box:after { left: calc(100% - 50px); top: 40px; }

#reservation .sec .box .select{ width: 100%; height: 60px; }
#reservation .sec .select_box:after{ border-bottom: 2px solid #707070; border-right: 2px solid #707070; }





#reservation .sec.type h3 { width: 100%; padding: 0 0 18px; font-size: 16px; }
#reservation .sec.type { display: block; }
#reservation .sec.type .box{ width: 100%; }
#reservation .sec.type .box p{ padding: 10px 0 0; font-size: 13px; font-family: 'Noto-Sans-JP-Medium'; text-align: center; line-height: 140%;}
#reservation .sec.type .box .radio+label{ display: block; width: 100%; height: inherit; padding: 10px; border: 1px solid #C6C6C6; border-radius: 10px; }
#reservation .sec.type .studio_box{ flex-wrap: wrap; }

#reservation .sec.type .box .radio+label:before{ content: ""; display: inline-block; background-size: contain; width: 100%; height: auto; aspect-ratio: 16 / 3; }
#reservation .sec.type .studio_box label { margin: 0 0 2%; }
#reservation .sec.type .studio_box label:first-of-type{ margin: 0 0 2%; }


/* calendar */
#reservation .calendar .box{ padding: 0;  }

#reservation .calendar table{ width: 900px; margin: 0 0 20px; }
#reservation .calendar table th{ width: 95px; font-size: 11px; padding: 16px 0 14px;  }

#reservation .calendar table td.circle,
#reservation .calendar table td.cross{ background-size: 15px; }
#reservation .calendar table .time{ width: 66px; font-size: 12px; }

#reservation .calendar .box { display: block; margin: 0 0 40px; }
#reservation .calendar .select_box .select_box { width: 100%; }
#reservation .calendar .days { margin-bottom: 15px; }
#reservation .calendar .days label { display: inline-block; width: 100%; height: 60px; border: 1px solid #C6C6C6; border-radius: 13px;}
#reservation .calendar .days .date { width: 100%; height: 58px; border: 0px;}
#reservation .calendar .time { margin: 0; }


/* btn */
.btn{ width: 80%; }

/* personal */

#reservation .sec .text_box { }
#reservation .sec .text_box dl { }
#reservation .sec .text_box dt p { }
#reservation .sec .text_box dd { }
#reservation .sec .text_box dd p { margin-bottom: 10px;}
#reservation .sec .text_box dd input[type="text"] { display: block; font-size: 14px; height: 60px; }
#reservation .sec .text_box .adress p input[type="text"] { display: inline-block; width: 99%; margin-left: 1%;}


/* ------------------------------------------------------------ error */
	#error h3 { font-size: 22px; margin: 0 0 25px; padding: 0 0 20px; }
	#error .caution { font-size: 14px; line-height: 1.7; margin: 0 0 40px; }
	#error .alert { margin: 0 0 50px; }
	#error .alert span { font-size: 14px; margin: 0 0 20px; }

/* ------------------------------------------------------------ confirm */
	#confirm h3 { font-size: 22px; margin: 0 0 25px; padding: 0 0 20px; }
	#confirm .caution { font-size: 14px; line-height: 1.7; margin: 0 0 40px; }
	#confirm table { display: block; width: 100%; margin: 0 0 50px; }
	#confirm table tbody { display: block; }
	#confirm table tr { display: block; }
	#confirm table tr th { display: block; width: 100%; font-size: 18px; padding: 15px 0 5px; }
	#confirm table tr td { display: block; font-size: 18px; line-height: 1.5; padding: 0 0 15px; }
	#confirm .btns .submit_btn { margin: 15px 0 0; }
	#confirm .btns .back.btn { margin-right: 10px;}


/* ------------------------------------------------------------ thanks */
	#thanks { margin: 30px 0 70px; }
	#thanks h2 { font-size: 22px; margin: 0 0 25px; padding: 0 0 20px; }
	#thanks .caution { font-size: 14px; line-height: 1.7; margin: 0 0 20px; }
	#thanks small { font-size: 12px; line-height: 2; text-align: left; margin: 0 0 30px; }
	

}