/*共通CSS依存*/
label.c-submit.button-gray{background-color:#999;border-color:#999;}
label.c-submit.button-gray:hover{color:#999;}

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

html{scroll-behavior: smooth;}
button{touch-action: manipulation;}

.font-bold,h1,h2,h3,h4{font-weight:700 !important;}
h1,main h2,main h3,main h4{font-weight:700;line-height:1.5;margin-bottom:min(4vw,1em);}
.container.font-base-1{font-size:1em}
.container.font-base-2{font-size:1.3em}

.font-2s{font-size:0.85em;--max-font-size:0.85em;}
.font-s{font-size:0.933em;--max-font-size:0.933em;}
.font-m{font-size:1em;--max-font-size:1em;}/*通常*/
.font-l{font-size:1.1em;--max-font-size:1.1em;}/*強調*/
.font-2l{font-size:1.3em;--max-font-size:1.3em;}/*小見出し h4*/
.font-3l{font-size:1.5em;--max-font-size:1.5em;}/*見出し h3*/
.font-4l{font-size:2em;--max-font-size:2em;}/*大見出し h2*/
.title-over h1{font-size:calc( 2.8rem + 6 * (100vw - 400px) / 240 );letter-spacing:-0.05em;text-shadow:1px 1px 10px rgba(0 0 0 / .6), -1px -1px 40px rgba(0 0 0 / .25);color:#FFFFFF;--max-font-size:calc(100vw/14.5);padding:1em 0;}

.normal h1 > span{display:block;}
.normal h1{font-size:min(calc( 3.467rem + 8 * (100vw - 960px) / 340 ), 4rem);}
.fcolor-red{color:#FF0000;}

.article_sps .container .txt-indent{text-indent: -1.5em;padding-left:1.5em;}
em{background:linear-gradient(transparent 70%, #F6E15D 80%);padding-bottom:0em;font-weight:400;font-style: normal;}
span.place{border-bottom:2px solid #262626;}

.komidashi{letter-spacing:-0.025em;line-height:1.5;font-weight:500;}
.sps{padding:.5em 0;}
.sps2{padding:2em 0;}

hr{border:none;border-bottom:1px solid #DEE1EA;margin:4em 5vw 2em;}
.link-button-maru{border: 2px solid #262626;border-radius: 3em;padding: .4em 1em;margin: .5em 0;font-weight: 700;display:inline-block;}

.date span{font-size:2.5em;}/*日付は大きく*/
header.page-top,article > section{margin:0 auto;text-align:center;}
.honbun{text-align:left;}
main dl,main ul,main ol{text-align:left;background-color:#FFFFFF;}

.container{margin:0 auto;}
.container .hosoku{margin:0 0 2em; padding:1em;border:4px solid #DEE1EA;background-color:#FFFFFF;}
main ul{list-style-type: disc;padding-left:1em;}
main li{padding:.25em 0;}
.container p{padding:.25em 0;}
.title-over{position:absolute;top:5vw;left:6vw;z-index:10;text-align:left;}
.title-over.title-over2{background-color:rgba(0 0 0 / .4);top:auto;bottom:.5em;left:0;z-index:10;transform:none;line-height:1.2;color:#FFFFFF;}
.title-over2.container, .title-over2.container p{margin:0 auto;padding:.5em 0;text-align:center;letter-spacing:-0.025em}

article.article_sps{padding:1.5em 0 0;}
.article_sps.back-gray{margin-top:3em;padding-bottom:3em;}

.back-gray{background-color:#F4F7F7;}
figure, .container-wide{position:relative;width:100%}
header .container-wide img{min-height:350px;object-fit:cover;width:100%,height:100%;}

dl.event-data{display:flex;flex-wrap: wrap;vertical-align:center;padding:0.5em 1em;border:1px solid #DEE1EA;}
dl.event-data > div{padding:1em 0;width:100%;border-bottom:1px solid #DEE1EA;display:table;min-height:3em;}
dl.event-data > div:last-child{border:none;}
.event-data dt, .event-data dd{width:4em;display:table-cell;vertical-align:middle;}
.event-data dt{font-weight:700;}
.event-data dt > span{display:block;}
.event-data dd{width:calc(100% - 4em);}

.link-button{margin-top:2em;}
.balloon{position:relative;display:inline-block;margin:1em 2em .5em;padding: 2px;min-width: 120px;max-width:400px;background:#F6921D;}
.balloon-bottom:before {content:"";position:absolute;top:100%;left:50%;margin-left:-10px; border:10px solid transparent;border-top:10px solid #F6921D;}

/********カレンダー部分*********/
.calendar-month{padding-top:2em;}
.calendar-month span{border-bottom:2px solid #262626;margin-bottom:.5em;padding:0 1em;}
table#calendar{border-collapse:separate;text-align:center;font-weight:700;border-spacing:6px 10px;margin:0 auto;}
table#calendar span{display:block;}
table#calendar th:first-child{color:#FF5555;}
table#calendar th:last-child{color:#5555FF;}
table#calendar .no_reserve span::after{content:"ー";}
table#calendar .on_reserve span::after{content:"〇";}
table#calendar .on_reserve.konzatsu span::after{content:"△";}
table#calendar .no_reserve.manryou span::after{content:"満了";letter-spacing:-0.1em;font-size:80%;}
table#calendar .on_reserve{color:#FFFFFF;background-color:#F6921D;border:#F6921D 1px solid;border-radius:3px;}
table#calendar td.date-cell:hover{cursor:pointer;}
table#calendar td{padding:.5em .25em;}
/********選択動作*********/
table#calendar td.selected{background-color:#FFFFFF;color:#262626;}

/********時間選択部分*********/
#time-slot-box{position:relative;z-index:2;}
#time-slot-box ul{background-color:transparent;padding-left:0;list-style:none;display:grid;grid-template-columns: repeat(auto-fit, minmax(8em, 1fr));gap:1em;}
#time-slot-box ul *{font-size:medium;}
#time-slot-box li{font-weight:700;border:#DEE1EA 1px solid;background-color:#F4F7F7;text-align:center;border-radius:3px;vertical-align:middle;color:#C1C7D7;padding:0;}
#time-slot-box li.reserve_ok{border:#F6921D 1px solid; background-color:#F6921D;font-color:#FFFFFF;}
#time-slot-box li button[type="submit"], #time-slot-box li > span{width:100%;height:3.5em;display:block;line-height:50px;}
#time-slot-box li button[type="submit"]{color:#FFFFFF;font-weight:700;}
#time-slot-box li button[type="submit"]:hover{cursor:pointer;}
#time-slot-box .text.container{padding:1em;}
/********選択動作*********/
.time-slot{display: none;/*初期状態*/}
.time-slot.selected{display: block;/*選択状態*/}

/*********モーダル**********/
body.no-scroll{overflow: hidden !important;}
#modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.7);z-index:5000;}
#availability-list-b{position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);background-color:white;border-radius:8px;z-index:5001;width:90%;max-height:90%;overflow-y:auto;}
#modal-overlay.hidden, #availability-list-b.hidden{display:none !important;}/*非表示用*/
#close-button{position:relative;padding:.5em 0;}
#close-button img{position:absolute; right:0; display:inline;width:auto;height:2.4em;}

/********情報入力画面*********/
/********プログレスバー部分*********/
.progressbar {position: relative;display: flex;flex-wrap: wrap;justify-content: space-between;max-width:600px;margin:0 auto;}
.progressbar li {position: relative;list-style-type: none;text-align: center;text-transform: uppercase;width: 33.333%;color: #999999;font-weight: 700;}
.progressbar li:before {display: block;width: 20px;height: 20px;margin: 6px auto 15px auto;content: '';text-align: center;border-radius: 50%;background-color: #DEE1EA;}
.progressbar li:after {position: absolute;z-index: -1;top: 15px;left: -50%;width: 100%;height: 2px;content: '';background-color: #DEE1EA;}
.progressbar li:first-child:after {content: none;}
.progressbar li.step_on{color: #F6921D;}
.progressbar li.step_on:before {background-color: #F6921D;}
.progressbar li.step_on:after {background-color: #F6921D;}

/********フォーム部分*********/
.form{max-width:840px;margin:0 auto;}
.form input:focus, #form textarea:focus{border:2px solid #F6921D;}
.form dl > div {padding:1em 0;width:100%;border-bottom: 1px solid #DEE1EA;}
.form dl > div:last-child{border:none;margin-bottom:3em;}
.form dl > div:first-child{padding-top:0;}
.form dl dt{font-weight:700;font-size:0.933em;padding:0 .5em .5em;display:table-cell;width:14em;}
.form dl dd{display:table-cell;}
.form form p{font-size:0.85em;margin:.5em 1em 0;}
.form h3{letter-spacing:-0.03em;line-height:1.8;}
.form input[name="お名前"], .form input[name="フリガナ"]{max-width:20em;}
.form input[name="電話番号"]{max-width:15em;}
.form .c-submit input[type="button"]{background: transparent;border: none;color:#FFFFFF;font-weight:700;}
.form .c-submit input[type="button"]:hover{color:#999;font-weight:700;}
.form .c-submit{width:17em;}
.form ol{list-style-type: auto;padding-left:1.5em;}
h2 + p.sps{margin-bottom:1em;}

/********メディアクエリー*********/
@media screen and (max-width: 420px) {/*一番長いテキスト１行*/
	.container .font-max-strings{font-size:calc(100vw / 21);}
	table#calendar td{padding:.5em 0;}
	table#calendar{max-width:100%;}
	#reserve .hosoku{padding:1em .5em;}
	.container.no-padding-smp{padding-left:.5em;padding-right:.5em;}
}

@media screen and (max-width: 640px) {/*スマホ*/
	span.br-smp{display:block;}
	.article_sps.no-margin-smp{margin-top:-0.5em;}
	.container{font-size: 0.933rem;padding:4.5vw 7vw 0;}/*container:横幅定義*/
	.container.container-wide{padding-left:0;padding-right:0;}/*横幅100%*/
	.container.no-padding-smp{padding-left:1em;padding-right:1em;}

	header.page-top .text.container{padding-top:calc(60px + 4vw);}
	.title-over{top:50%;left:0;width:100%;transform: translate(0, -50%);text-align:center;}
	.normal h1 > span{font-size: 0.733rem;}

	main h2{font-size:calc( 1.267rem + 6 * (100vw - 400px) / 240 );line-height:1.8;}
	.form dl dt{width:100%;display:block;}
	table#calendar{width:100%;}
	#reserve .hosoku{padding:1em .5em;}
	#reserve .hosoku p{padding:.5em 1em 0;}

	/* 改行させない */
	p.responsive-txt{margin-left:-1.5vw;margin-right:-1.5vw;white-space:nowrap;font-size:clamp(calc(100vw/26), 5vw, var(--max-font-size, 1.5em));overflow:hidden;}/*１行の最大文字列サイズは30文字*/
	p.responsive-txt-l{font-size:clamp(calc(100vw/26), 6vw, var(--max-font-size, 1.5em))}/*少しだけ大きい*/
	.title-over h1.responsive-txt{white-space:nowrap;font-size:clamp(calc(100vw/20), 10vw, var(--max-font-size, 1.5em));overflow:hidden;}/*１行の最大文字列サイズは30文字*/

	
	#time-slot-box ul{grid-template-columns: repeat(auto-fit, minmax(33vw, 1fr));gap:.5em;}

}
@media screen and (min-width: 641px) {/*タブ*/
	.article_sps.no-margin-tab{margin-top:-0.5em;}
	span.br-tab{display:block;}
	.container{font-size: 1rem;padding:4.5vw 7vw 0;}/*container:横幅定義*/
	.container.container-wide{padding-left:0;padding-right:0;}/*横幅100%*/

	header.page-top .text.container{padding-top:calc(50px + 4vw);}
	.title-over{top:50%;left:0;width:100%;transform: translate(0, -50%);text-align:center;}
	.normal h1 > span{font-size: 0.867rem;}
	main h2{font-size:calc( 1.667rem + 5 * (100vw - 640px) / 320 );}
	.event-data dt > span{display:inline;}
	.event-data dt{width:20%;}
	.container .hosoku{padding:2em;}

	.title-over2.container p{font-size:1.5em;letter-spacing:0;}
	table#calendar{width:100%;max-width:640px;}
}

@media screen and (min-width: 961px) {/*PC*/
	.article_sps.no-margin-tab{margin-top:3em;}
	.container, .container.container-wide{font-size: 1.067rem;padding:4.5vw 13vw 0;max-width:1980px;}/*container:横幅定義*/
	main h2{font-size:calc( 1.867rem + 6 * (100vw - 960px) / 340 );}
	.normal h1 > span{font-size:0.933rem;}
}