@charset "utf-8";


/* ===== 基本設定 ===== */
html{ font-size: 0.875rem; }
body{ background: #f3f3f3; font-family: 'Noto Sans JP', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; letter-spacing: .03em; }



#form_wrapper{ width: 1000px; margin: 0 auto; padding: 50px; background: #fff; }


/* ===== heading ===== */
.h3_style{ margin: 30px 0; padding: 10px 0; border-top: 3px solid; border-bottom: 3px solid; border-image: linear-gradient(135deg, #d79be8, #56daff) 1; font-size: 20px; font-weight: bold; text-align: center; }
.h4_style{ margin-bottom: 30px; padding-bottom: 12px; font-size: 20px; font-weight: bold; text-align: center; position: relative; }
.h4_style::after{ content: ""; width: 15%; height: 3px; background: linear-gradient(135deg, #d79be8, #56daff); border-radius: 2px; transform: translateX(-50%); position: absolute; left: 50%; bottom: 0; }


/* ===== 重要事項 ===== */
.important{ margin: 0 auto 30px; padding: 30px 30px; background-color: var(--main_pnk_lt); }
.important .ttl { margin-bottom: 20px; color: #ff2e2e; font-size: 17px; text-align: center; }
.important ol{ counter-reset: my-counter; }

.important ol li{ margin-bottom: 20px; padding: 4px 0 0 50px; line-height: 1.8; position: relative; }
.important.maker-true ol li:before{ content: counter(my-counter); counter-increment: my-counter; display: flex; justify-content: center; align-items: center;  width: 30px; height: 30px; background: #d79be8; border-radius: 50%; color: #ffffff; line-height: 30px; position: absolute; top: 0; left: 0; }

.important ol li p{ margin-top: 10px; line-height: 1; }
.important ol li span{ color: #ff2f2f; }
.important ol li p span{ color:inherit; }
.important ol li .info-l{ padding: 4px 14px; color: #fff; vertical-align: 5px; }
.important ol li .bg-color02{ background: #d79be8; }

.important ol li .info-c{ margin: 0 10px; font-size: 28px; }
.important ol li .info-c a{ display: inline; border: none; margin-bottom: 0; color: #272727; }
.important ol li a{ display: inline-block; margin-bottom: 4px; border-bottom: 1px solid #272727; color: #ff2f2f; }


/* ===== 予約状況 ===== */
#reservation_status{ margin-bottom: 30px; text-align: center; }
#reservation_status #btn_calender{ display: inline-block; width: 40%; margin-bottom: 20px; padding: 17px 0; background: #c9b497; border: none; border-radius: 3px; color: #fff; font-weight: unset; position: relative; cursor: pointer; }
#reservation_status #btn_calender::after{ content: ''; width: 8px; height: 8px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: translateY(-70%) rotate(45deg); position: absolute;right: 20px; top: 50%; }
#reservation_status div{ height: 0; overflow: hidden; transition: 0.2s; }
#reservation_status div p{ margin-bottom: 10px; }

/* calender open */
#reservation_status.is_open #btn_calender::after{ transform: translateY(-30%) rotate(225deg); }
#reservation_status.is_open div{ height: 600px; }


/* ===== button ===== */
.btn_reserve{ display: inline-block; padding: 0.5rem 2rem; border: none; border-radius: 3px; color: #fff !important; font-size: 1rem; text-decoration: none !important; transition: all 0.2s ease; }
.btn_reserve:hover{ opacity: 0.8; transform: translateY(2px); }
.btn_send{ background: var(--main_pnk); }
.btn_back{ background: #777; }


/* ===== 入力フォーム ===== */
.tx_attention{ margin-top: 0.25rem; color: var(--ui_red); font-size: 0.875rem; }

.fm_detail{}
.fm_detail{ display: grid; grid-template-columns: max-content 1fr; row-gap: 0.25rem; }
.fm_detail label{ display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; gap: 1rem; }

	#yoyakubi:read-only{ background: none; }/* commonからの設定解除 */

.tbl_child{}
.tbl_child th{ background: var(--gry1); }
.tbl_child th, .tbl_child td{ padding: 0.25rem; }

#last_notice_box{ width: fit-content; margin: 0 auto; padding: 1rem 2rem; background: var(--main_pnk_bg); border: 1px solid var(--main_pnk); }
#last_notice_box p{ margin-bottom: 0.375rem; text-align: center; }
#last_notice_box label{ display: block; }


/* hori */
.ul_hori{ display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1rem; }
.ul_hori li{ border: 1px solid var(--gry4); border-radius: 8px; background: #fff; overflow: hidden; }
.ul_hori li label{ display: flex; align-items: center; padding: 0.5rem 1rem; white-space: normal; cursor: pointer; }
.ul_hori li label .hori_info{ width: 65%; min-width: 0; padding-right: 1.25rem; }
	.hori_price{ margin: 1rem 0; padding: 0.5rem 0.75rem; background: var(--main_pnk_lt); border-radius: 5px; font-weight: bold; }
	.hori_text{ color: #666; font-size: 0.9rem; line-height: 1.7; }
.ul_hori li label .hori_img{ width: 35%; min-width: 0; }


/* ===== 確認画面 ===== */
#conf_err_box{ width: fit-content; margin: 2rem auto 0; padding: 1rem 2rem; border: 1px solid var(--ui_red); }


#conf_btn_box{ display: flex; justify-content: center; align-items: center; gap: 30px; margin: 20px auto 20px; }
#conf_btn_box a{ color: #fff; }



/* ===== サンクス画面 ===== */
#reserve_step{ margin-bottom: 50px; }
	#step_parent{ width: 85%; margin: 0 auto; display: flex; gap: 15px; }
		#reserve_notice{ margin-bottom: 10px; text-align: center; font-size: 17px; color: #ff2e2e; }
		#reserve_step dl{ flex: 1; margin: 0; border: 2px solid #d79be8; }
		#reserve_step dl dt{ padding: 15px 0; background-color: #d79be8; color: #fff; font-weight: bold; text-align: center; }
		#reserve_step dl dt span{ display: block; }
		#reserve_step dl dd{ padding: 10px; font-size: 13px; }





@media (max-width: 999px) {
	#form_wrapper{ width: 100%; padding: 3% 3% 3rem; }
}



@media (max-width: 768px) {
	#form_wrapper{}

	/*#conf_btn_box{ flex-direction: column; gap: 15px; margin-top: 30px; }*/
	/*#conf_btn_box a{width: 100%; max-width: 320px; height: 50px; }*/

	/* hori */

    #step_parent{ width:100%; display:block; }
    #reserve_step dl{ margin-bottom:15px; }
    #reserve_step dl dt span{ display: inline; margin-left: 20px; }
}



@media (max-width: 480px) {
	.important{ padding: 10px; }
	.important ol li .info-c a{ display: block; }

	#reservation_status #btn_calender{ width: 60%; padding: 10px 0; }
}