@charset "UTF-8";
/*=========================================================*/

/* ヘッダー

/*=========================================================*/
/* headerの高さ */
:root{
	--header-height: calc(90rem/16);
	--header-height-is-change: calc(64rem/16);
	/* is clamp setting / max 240px min 160px / max-vw 1280px min-vw 320px */
	--header-logo-size: clamp(10rem, 8.333rem + 8.33vw, 15rem);
	--header-logo-size--fb: 200px;

	--logo-scale: scale(1);
	--logo-scale-is-change: scale(0.8);
}
@media(max-width:959px){
    :root{
		--header-height: calc(80rem/16);
        --header-logo-size--fb: 240px;
    }
}
@media(max-width: 559px){
	:root{
		--header-height: calc(64rem/16);
		--header-logo-size--fb: 180px;
	}
}
#header{
	width: 100%;
	height: var(--header-height);
	background-color: var(--c-white);

	display: flex;
	align-items: center;
	justify-content: flex-end;

	position: fixed;
	top: 0;
	left: 0;

	z-index: 10;
}
/* キャッチコピー */
h2.reserve__catch{
	/* position: absolute;
	top: 0;
	left: 8vw; */

	font-size: var(--txt-3xl);
	font-weight: var(--bold);
	line-height: 1.5;
	letter-spacing: 0.1em;
	color: var(--c-main);

	white-space: nowrap;
	text-shadow: 
	0 0 2px #fff,
	0 0 3px #fff,
	0 0 4px #fff,
	0 0 5px #fff, 
	0 0 10px #fff, 
	0 0 20px #fff;
}
/* 予約キャッチボックス */
.reserve__wrapper{
	position: absolute;
	top: 55%;
	left: 10vw;
	transform: translateY(-50%);

	width: calc(480rem / 16);

	display: flex;
	flex-direction: column;
	align-items: center;
}
/* キャッチリード */
h1.reserve__catch-lead{
	width: 100%;
	font-size: var(--txt-reg);
	font-weight: var(--normal);
	line-height: 1.5;
	color: var(--c-bk);
	margin-top: var(--mp-tb-xs);
	background-color: rgba(255, 255, 255, .7);

	box-sizing: border-box;

	border: solid 1px var(--c-gray-light);
	padding: 1em;
}
/* 予約の方はこちらボタン */
.reserve__wrapper a.button{
	margin-top: 0.5em;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	height: 64px;
	border-radius: 6px;
}

/* 予約ボタン直下の注意書き */
.reserve__guide{
	width: 100%;
	margin-top: var(--mp-tb-xs);
	padding-top: 0.8em;
	margin-bottom: var(--mp-tb-xs);
	padding-bottom: 0.8em;
	border-top: solid 1px var(--c-gray-light);
	border-bottom: solid 1px var(--c-gray-light);

	font-size: var(--txt-sm);
	line-height: 1.6;
	color: var(--c-gray);

	position: relative;
}
.reserve__guide > .reserve__guide-ttl{
	background-color: var(--c-white);
	padding: 0 0.3em;
	color: var(--c-gray);

	position: absolute;
	top: -0.8em;
	left: 50%;
	transform: translateX(-50%);
}
.reserve__guide .reserve__tip{
	font-size: var(--txt-reg);
	color: var(--c-gray);

	background-color: var(--c-gray-pale);
	border-radius: 999px;
	padding: 0.5em;
	width: 200px;

	display: flex;
	justify-content: center;
	align-items: center;
}
.reserve__guide span > .vacant{
	color: #38b16c;
	font-weight: 800;
	padding-right: 0.2em;
}
.reserve__guide span > .reserved{
	color: var(--c-bk);
	font-weight: 800;
	padding-right: 0.2em;
}
.reserve__guide .reserve__tip svg{
	display: block;
	width: 1em;
	height: 1em;
	fill: currentColor;
}
.reserve__guide-status{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px 20px;
	margin-top: 1em;
	margin-bottom: 4px;
	font-weight: 700;
}
.reserve__guide-lead{
	margin-top: 1em;
	text-align: center;
}
/* スマホ専用の固定予約エリア */
.reserve-fixed{
	display: none;
}
/* ファーストビューのInstagram：予約案内の下の補助リンク */


/*-----------------------------*/
/* ナビアニメーション headerの高さ */
@media(min-width: 960px){
	#header.is-change{
		height: var(--header-height-is-change);
		position: fixed;
		top: 0;
		left: 0;

		animation-duration: 1s;
		animation-timing-function: var(--easeOutSine);
		animation-fill-mode: forwards;
		z-index: 10;
	}
	#header.is-change[data-is-change="true"]{
		animation-name: header-shrink;
	}
	#header.is-change[data-is-change="false"]{
		animation-name: header-expand;
	}
	@keyframes header-shrink{
		from{
			height: var(--header-height);
			
		}
		to{
			height: var(--header-height-is-change);
		}
	}
	@keyframes header-expand{
		from{
			height: var(--header-height-is-change);
		}
		to{
			height: var(--header-height);
		}
	}
	#header.is-change #header-logo{
		animation-duration: 1s;
		animation-timing-function: var(--easeOutSine);
		animation-fill-mode: forwards;
		z-index: 10;
	}
	#header.is-change[data-is-change="true"] #header-logo{
		animation-name: logo-shrink;
	}
	#header.is-change[data-is-change="false"] #header-logo{
		animation-name: logo-expand;
	}
	@keyframes logo-shrink{
		from{
			transform: var(--logo-scale);
		}
		to{
			transform: var(--logo-scale-is-change);
		}
	}
	@keyframes logo-expand{
		from{
			transform: var(--logo-scale-is-change);
		}
		to{
			transform: var(--logo-scale);
		}
	}

	/* SNSエリア */
	#header.is-change .header-tel.-sns{
		position: absolute;
		right: 0;
		bottom: calc(-100vh + var(--header-height));

		animation-duration: 1s;
		animation-timing-function: var(--easeOutSine);
		animation-fill-mode: forwards;
		z-index: 10;
	}
	#header.is-change[data-is-change="true"] .header-tel.-sns{
		animation-name: header-sns-shrink;
	}
	#header.is-change[data-is-change="false"] .header-tel.-sns{
		animation-name: header-sns-expand;
	}
	@keyframes header-sns-shrink{
		from{
			bottom: calc(-100vh + var(--header-height));
			opacity: 1;
			visibility: visible;
		}
		to{
			bottom: -100vh;
			opacity: 0;
			visibility: hidden;
		}
	}
	@keyframes header-sns-expand{
		from{
			bottom: -100vh;
			opacity: 0;
			visibility: hidden;
		}
		to{
			bottom: calc(-100vh + var(--header-height));
			opacity: 1;
			visibility: visible;
		}
	}

	/* 電話番号 */
	#header.is-change .header-tel.-telephone{
		position: absolute;
		right: 0;
		top: var(--header-height);

		animation-duration: 1s;
		animation-timing-function: var(--easeOutSine);
		animation-fill-mode: forwards;
		z-index: 10;
	}
	#header.is-change[data-is-change="true"] .header-tel.-telephone{
		animation-name: header-tel-shrink;
	}
	#header.is-change[data-is-change="false"] .header-tel.-telephone{
		animation-name: header-tel-expand;
	}
	@keyframes header-tel-shrink{
		from{
			height: var(--header-height);
			top: var(--header-height);
		}
		to{
			height: var(--header-height-is-change);
			top: var(--header-height-is-change);
		}
	}
	@keyframes header-tel-expand{
		from{
			height: var(--header-height-is-change);
			top: var(--header-height-is-change);
		}
		to{
			height: var(--header-height);
			top: var(--header-height);
		}
	}
}
/* アンカーページ遷移時のヘッダーずれ対策 */
:target{
	scroll-margin-top: calc(var(--header-height) + 24px);
}
/* ロゴ */
#header-logo{
	width: calc(var(--header-logo-size--fb) + calc(2 * var(--mp-lr-reg)));
	width: calc(var(--header-logo-size) + calc(2 * var(--mp-lr-reg)));
	height: 100%;
	display: flex;
	align-items: center;
	margin-right: auto;
}
#header-logo > a{
	width: 100%;
	height: 100%;
	padding: 0 var(--mp-lr-reg);
	display: flex;
	align-items: center;
	transition: opacity .4s var(--easeOutSine);
}
#header-logo > a > img{
	width: 100%;
	height: auto;
}
/* hover設定 */
@media(any-hover:hover){
	#header-logo > a:hover,
	#header-logo > a:focus{
		opacity: 0.5;
	}
}



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

/* ナビゲーション */

/*-----------------------*/
/* コンテナ */
#nav__wrapper,
#nav__inner{
	height: 100%;
	display: flex;
	align-items: center;
}
/* ナビアイテム */
#header .nav__item{
	height: 100%;
}
#header .nav__item > a{
	height: 100%;
	padding: 0 1.5em;

	font-size: var(--txt-sm);
	letter-spacing: 0.2em;
	color: var(--c-bk);

	display: flex;
	align-items: center;
	justify-content: center;

	transition: color .3s var(--easeOutSine);

	position: relative;
}
#header .nav__item.-contact{
	display: flex;
	align-items: center;
}
#header .nav__item.-contact > a{
	border: solid 1px var(--c-gray);
	height: 56px;

	font-size: var(--txt-reg);

	border: solid 1px var(--c-gray-light);
	border-radius: 6px;

	display: flex;
	align-items: center;
	justify-content: center;

	transition: background-color .3s var(--easeOutSine),
	color .3s var(--easeOutSine),
	opacity .3s var(--easeOutSine);
}
#header .nav__item.-contact > a::before{
	content: none;
}
/* メニュー線 */
#header .nav__item > a::before{
	content: "";
	display: block;
	width: 100%;
	height: 1px;
	background-color: var(--c-main);
	position: absolute;
	bottom: 1em;
	left: 0;

	transform: scaleX(0);
	transform-origin: bottom right;
	transition: transform .3s var(--easeOutSine);
}
/* WEB予約ぺージへボタン */
#header .nav__item:last-of-type{
	height: 100%;
	display: flex;
	align-items: center;
}
#header .nav__item:last-of-type > a{
	margin-left: 1em;
	height: 56px;
	width: 240px;
	margin-right: var(--mp-lr-reg);
	font-size: var(--txt-reg);
	color: var(--c-white);
	background-color: var(--c-main);
	border: solid 1px var(--c-main);
	border-radius: 6px;

	display: flex;
	align-items: center;
	justify-content: center;

	transition: background-color .3s var(--easeOutSine),
	color .3s var(--easeOutSine),
	opacity .3s var(--easeOutSine);
}
#header .nav__item:last-of-type > a > svg{
	width: 16px;
	height: auto;
	fill: var(--c-white);
	margin-left: 0.5em;
	transition:
	fill .3s var(--easeOutSine),
	opacity .3s var(--easeOutSine);
}
#header .nav__item:last-of-type > a::before{
	content: none;
}
/* 区切り線 */
/* #header .nav__item{
	position: relative;
}
#header .nav__item::before{
	content: "";
	display: block;
	width: 1px;
	height: 40%;
	background-color: var(--c-main);

	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
}
#header .nav__item:last-of-type:before{
	content: none;
} */
/* hover設定 */
@media(any-hover:hover){
	#header .nav__item > a:hover,
	#header .nav__item > a:focus{
		color: var(--c-gray);
	}
	#header .nav__item > a:hover::before,
	#header .nav__item > a:focus::before{
		transform: scaleX(1);
		transform-origin: bottom left;
	}
	#header .nav__item:last-of-type > a:hover,
	#header .nav__item:last-of-type > a:focus{
		opacity: 1;
		color: var(--c-main);
		background-color: var(--c-white);
	}
	#header .nav__item.-contact > a:hover,
	#header .nav__item.-contact > a:focus{
		opacity: 1;
		color: var(--c-white);
		background-color: var(--c-gray-light);
	}
	#header .nav__item:last-of-type > a:hover > svg,
	#header .nav__item:last-of-type > a:focus > svg{
		opacity: 1;
		fill: var(--c-main);
	}
}
/* -------------------- */
/* バーガーボタン */
/*----------------------*/
/* オープンボタン */
#nav-open-button{
	width: 64px;
	height: auto;
	align-self: stretch;
	display: none;

	justify-content: center;
	flex-direction: column;
	align-items: center;
	gap: 7px 0;

	transform-origin: center center;
}
#nav-open-button .nav-open-button__line{
	display: block;
	width: 48%;
	height: 2px;
	background-color: var(--c-main);
	transition: transform .3s var(--easeOutSine);
}
/* クローズボタン */
#nav-close-button{
	width: 64px;
	height: 64px;
	display: none;

	justify-content: center;
	flex-direction: column;
	align-items: center;

	transition: opacity .3s var(--easeOutSine);
	transform-origin: center center;
}
.nav-close-button__inner{
	width: 100%;
	height: 100%;
	background-color:  transparent;

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	position: relative;
}
.nav-close-button__line{
	width: 40%;
	height: 2px;
	border-radius: 1px;
	background-color: var(--c-main);

	position: absolute;
	top: 50%;
	left: 50%;
}
.nav-close-button__line.-top{
	transform: translate(-50%,-50%);
}
.nav-close-button__line.-bottom{
	transform: translate(-50%,-50%);
}
/* SNSエリア */
.header-tel.-sns{
	background-color: rgba(255, 255, 255, .8);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);

	border-top-left-radius: 30px;
	padding: 1em 1.5em;
	font-size: var(--txt-sm);

	position: absolute;
	right: 0;
	bottom: calc(-100vh + var(--header-height));
}
/* 電話番号 */
.header-tel.-telephone{
	height: var(--header-height);
	background-color: rgba(255, 255, 255, .8);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);

	border-bottom-left-radius: 30px;
	padding: 1em 2em;
	font-size: var(--txt-sm);
	
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1.5em;

	position: absolute;
	right: 0;
	top: var(--header-height);
}
/* 受付時間 */
.header-tel.-telephone .header-tel__lead-inner > p{
	font-size: var(--txt-sm);
	line-height: 1.4;
}
/* 電話番号 */
.header-tel.-telephone .header-tel__num-inner{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.header-tel.-telephone .header-tel_number{
	font-family: var(--baseFonts);

	font-size: var(--txt-xl);
	font-weight: 700;
	font-style: normal;
	color: var(--c-main) !important;
	line-height: 1;
}
.header-tel.-telephone .header-tel_number > span{
	font-size: var(--txt-md);
}
.header-tel.-telephone .header-tel_time{
	font-feature-settings: "palt";
	font-size: var(--txt-reg);
	letter-spacing: 0.07em;
	line-height: 1;
}
/* SNSエリア */
.header-tel.-sns ul{
	width: 100%;
	display: flex;
}
.header-tel.-sns ul li{
	min-width: 0;
	margin: 0;
}
.header-tel.-sns ul li + li{
	border-left: solid 1px var(--c-gray-light);
	padding-left: 20px;
	margin-left: 20px;
}
.header-tel.-sns ul li > a{
	transition: opacity .3s var(--easeOutSine);
}
.sns-head{
	color: var(--c-main);
	font-size: var(--txt-reg);
	font-weight: 700;

	line-height: 1.5;
	margin: 0;
}
.reserve__sns-inner{
	display: flex;
	flex-direction: column;
	min-width: 0;
	text-align: left;
}
/* QRコードサイズ */
.startup-qr{
	width: 80px;
	height: auto;
	object-fit: contain;
}
/* 画像と文章を別の列に置き、両SNSの文字位置を統一する */
.reserve__sns-link{
	display: grid;
	grid-template-columns: 32px minmax(0, 1fr) 80px;
	align-items: center;
	gap: 12px;
	height: 100%;
}
.reserve__sns-link.-insta{
	grid-template-columns: 32px minmax(0, 1fr);
}
.reserve__sns-icon{
	width: 32px;
	height: 32px;
	object-fit: contain;
}
.reserve__sns-icon--line{
	display: grid;
	place-items: center;
	border-radius: 6px;
	background: #06c755;
	color: #fff;
	font-family: Arial, sans-serif;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
}
.reserve__sns-text{
	display: grid;
	grid-template-columns: minmax(0, 1fr) 12px;
	align-items: center;
	gap: 6px;
	font-size: var(--txt-sm);
	line-height: 1.5;
	color: var(--c-bk);
}
.reserve__sns-text > svg{
	width: 12px;
	height: 12px;
}
/* ホバー設定 */
@media (any-hover: hover) {
	#header .header-tel.-sns ul li > a:hover,
	#header .header-tel.-sns ul li > a:focus{
		opacity: 0.7;
	}
}
/*-------------------------------*/

/* Tablet iPad Pro */

/*------------------------------*/
@media (min-device-width: 1024px) and (max-device-width: 1366px) and (orientation: portrait),
       (min-device-width: 1024px) and (max-device-width: 1366px) and (orientation: landscape) {
	/* 予約ぺージへボタン */
	#header .nav__item:last-of-type > a{
		width: 220px;
	}
	#header .nav__item > a{
		padding: 0 1em;
	}
}
/* @media (min-device-width: 1024px) and (max-device-width: 1366px) and (orientation: portrait){
	h2.reserve__catch{
		top: 50%;
	}
} */



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

/* 中間幅のヘッダーナビ：先頭4項目は2列×2段、右側の2ボタンは上下2段分を使用 */
@media (min-width: 960px) and (max-width: 1360px) {
    #nav__inner {
        display: grid;
        grid-template-columns: repeat(4, max-content);
        grid-template-rows: repeat(2, minmax(0, 1fr));
        align-items: stretch;
    }

    /* 基本ナビ：左上からHTML順に並べ、文言自体は1行で表示する */
    #nav__inner > .nav__item--section > a {
        padding-inline: 12px;
        white-space: nowrap;
    }

    #nav__inner > .nav__item--section > a::before {
        bottom: 4px;
    }

    /* 右側のボタン：先頭4項目の折り返しに巻き込まない */
    #nav__inner > .nav__item.-contact {
        grid-column: 3;
        grid-row: 1 / -1;
    }

    #nav__inner > .nav__item:last-of-type {
        grid-column: 4;
        grid-row: 1 / -1;
    }
}

/* Tablet 959px */

/*------------------------------*/
@media(max-width: 959px){
	/* -------------------- */
	/* バーガーボタン */
	#nav-open-button,
	#nav-close-button{
		display: flex;
	}
	#nav-close-button{
		position: absolute;
		top: 0;
		right: 0;
		z-index: 2;
	}
	/* ナビゲーション コンテナ */
	/* ナビアイテム */
	#nav__wrapper,
	#nav__inner{
		display: none;
		padding: 104px 0;
		width: calc(400rem / 16);
		max-width: calc(100% - 20vw);
		border-top-left-radius: 80px;

		position: fixed;
		top: 0;
		right: 0;
		z-index: 1;
	}
	#nav__inner{
		overflow: auto;
		background-color: var(--c-white);
	}
	#nav__inner .nav__item{
		width: 100%;
		height: auto;
	}
	#nav__inner .nav__item > a{
		width: 100%;
		padding: calc(20rem/16) min(4vw, calc(64rem/16));
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}
	/* お問い合わせボタン */
	#nav__inner .nav__item.-contact > a{
		width: calc(100% - calc(min(4vw, calc(64rem/16))*2));
		height: 40px;
		margin: 0 auto;
		margin-top: 1em;
	}
	/* 予約ぺージボタン */
	#nav__inner .nav__item:last-of-type{
		width: calc(100% - calc(min(4vw, calc(64rem/16))*2));
		height: auto;
		margin: 0 auto;
		margin-top: 1em;
	}
	#nav__inner .nav__item:last-of-type > a{
		width: 100%;
		padding: 2em min(4vw, calc(64rem/16));
		margin: 0;

		display: flex;
		align-items: center;
		justify-content: center;
	}
	/* 区切り線 削除 */
	#header .nav__item::before{
		content: none;
	}
	/* カバー */
	#nav__wrapper.is-open #nav__cover{
		width: 100%;
		height: 100vh;
		min-height: 100vh;
		min-height: var(--height-100vh);
		background-color: rgba(0, 0, 0, .2);
		backdrop-filter: blur(6px) saturate(110%);
		-webkit-backdrop-filter: blur(6px) saturate(110%);

		position: fixed;
		top: 0;
		left: 0;
		z-index: -9;
		cursor: pointer;
	}
	/* SNSエリア */
	.header-tel.-sns{
		padding: calc(24rem / 16) min(4vw, calc(64rem / 16));
	}
	.header-tel.-sns ul{
		display: block;
	}
	.header-tel.-sns ul li + li{
		border-left: 0;
		border-top: solid 1px var(--c-gray-light);
		padding: 16px 0 0;
		margin: 16px 0 0;
	}
	.reserve__sns-link{
		grid-template-columns: 32px minmax(0, 1fr);
		height: auto;
	}
	.startup-qr{
		display: none;
	}
	/* オープン/クローズアニメーション */
	/*------------------*/
	/* オープン */
	/*------------------*/
	body.nav-open{
		overflow: hidden;
	}
	#nav__wrapper.is-open,
	#nav__wrapper.is-open #nav__inner{
		display: block;
	}
	/* ボタン アニメーション */
	body.nav-open #nav-open-button .nav-line-icon.-top{
		transform: rotate(-45deg);
	}
	body.nav-open #nav-open-button .nav-line-icon.-bottom{
		transform: rotate(45deg);
	}
	body.nav-open #nav-open-button .nav-line-icon.-center{
		opacity: 0;
	}
	#nav__wrapper.is-open[aria-hidden="false"] .nav-close-button__line.-top{
		animation-name: nav-close-icon-top;
		animation-duration: .3s;
		animation-timing-function: var(--easeOutSine);
		animation-fill-mode: forwards;
	}
	#nav__wrapper.is-open[aria-hidden="false"] .nav-close-button__line.-bottom{
		animation-name: nav-close-icon-bottom;
		animation-duration: .3s;
		animation-timing-function: var(--easeOutSine);
		animation-fill-mode: forwards;
	}
	@keyframes nav-close-icon-top {
		from{
			transform: translate(-50%,-50%) rotate(0);
			opacity: 0;
		}
		to{
			transform: translate(-50%,-50%) rotate(-45deg);
			opacity: 1;
		}
	}
	@keyframes nav-close-icon-bottom {
		from{
			transform: translate(-50%,-50%) rotate(0);
			opacity: 0;
		}
		to{
			transform: translate(-50%,-50%) rotate(45deg);
			opacity: 1;
		}
	}
	/* ナビ アニメーション */
	#nav__wrapper.is-open[aria-hidden="false"] #nav__inner{
		animation-name: navOpen;
		animation-duration: .3s;
		animation-timing-function: var(--easeOutSine);
		animation-fill-mode: forwards;
	}
	@keyframes navOpen{
		from{
			opacity: 0;
			transform: translateX(120px);
		}
		to{
			opacity: 1;
			transform: translateX(0);
		}
	}
	#nav__wrapper.is-open[aria-hidden="false"] #nav__cover{
		animation-name: coverOpen;
		animation-duration: .3s;
		animation-timing-function: var(--easeOutSine);
		animation-fill-mode: forwards;
	}
	@keyframes coverOpen{
		from{
			background-color: rgba(0, 0, 0, 0);
			backdrop-filter: blur(0px) saturate(100%);
			-webkit-backdrop-filter: blur(0px) saturate(100%);
		}
		to{
			background-color: rgba(0, 0, 0, .2);
			backdrop-filter: blur(6px) saturate(110%);
			-webkit-backdrop-filter: blur(6px) saturate(110%);
		}
	}
	/* ナビゲーションリストのアニメーション */
	#nav__wrapper.is-open[aria-hidden="false"] .nav__item{
		animation-name: navItemSlide;
		animation-duration: .3s;
		animation-delay: .4s;
		animation-timing-function: var(--easeOutSine);
		animation-fill-mode: both;
	}
	#nav__wrapper.is-open[aria-hidden="false"] .header-tel.-sns{
		animation-name: navItemSlide;
		animation-duration: .3s;
		animation-delay: .4s;
		animation-timing-function: var(--easeOutSine);
		animation-fill-mode: both;
	}
	#nav__wrapper.is-open[aria-hidden="false"] .header-tel.-telephone{
		animation-name: navItemFade;
		animation-duration: .8s;
		animation-delay: .85s;
		animation-timing-function: var(--easeOutSine);
		animation-fill-mode: both;
	}
	#nav__wrapper.is-open[aria-hidden="false"] .nav__item:nth-child(2){
		animation-delay: .45s;
	}
	#nav__wrapper.is-open[aria-hidden="false"] .nav__item:nth-child(3){
		animation-delay: .5s;
	}
	#nav__wrapper.is-open[aria-hidden="false"] .nav__item:nth-child(4){
		animation-delay: .55s;
	}
	#nav__wrapper.is-open[aria-hidden="false"] .nav__item:nth-child(5){
		animation-delay: .6s;
	}
	#nav__wrapper.is-open[aria-hidden="false"] .nav__item:nth-child(6){
		animation-delay: .65s;
	}
	#nav__wrapper.is-open[aria-hidden="false"] .header-tel.-sns{
		animation-delay: .7s;
	}
	#nav__wrapper.is-open[aria-hidden="false"] .header-tel.-telephone{
		animation-delay: .85s;
	}
	@keyframes navItemSlide{
		from{
			opacity: 0;
			transform: translateX(60px);
		}
		to{
			opacity: 1;
			transform: translateX(0);
		}
	}
	@keyframes navItemFade{
		from{
			opacity: 0;
		}
		to{
			opacity: 1;
		}
	}
	/*------------------*/
	/* クローズ */
	/*------------------*/
	/* ボタン アニメーション */
	#nav__wrapper[aria-hidden="true"] .nav-close-button__line.-top{
		animation-name: nav-close-icon-top-is-close;
		animation-duration: .3s;
		animation-timing-function: var(--easeOutSine);
		animation-fill-mode: forwards;
	}
	#nav__wrapper[aria-hidden="true"] .nav-close-button__line.-bottom{
		animation-name: nav-close-icon-bottom-is-close;
		animation-duration: .3s;
		animation-timing-function: var(--easeOutSine);
		animation-fill-mode: forwards;
	}
	#nav__wrapper[aria-hidden="true"] #nav-close-button{
		opacity: 0;
	}
	@keyframes nav-close-icon-top-is-close {
		from{
			transform: translate(-50%,-50%) rotate(-45deg);
		}
		to{
			transform: translate(-50%,-50%) rotate(0);
			opacity: 0;
		}
	}
	@keyframes nav-close-icon-bottom-is-close {
		from{
			transform: translate(-50%,-50%) rotate(45deg);
		}
		to{
			transform: translate(-50%,-50%) rotate(0);
			opacity: 0;
		}
	}
	/* ナビ アニメーション */
	#nav__wrapper[aria-hidden="true"] #nav__inner{
		animation-name: navClose;
		animation-duration: .3s;
		animation-timing-function: var(--easeOutSine);
		animation-fill-mode: forwards;
	}
	@keyframes navClose{
		from{
			opacity: 1;
			transform: translateX(0);
		}
		to{
			opacity: 0;
			transform: translateX(120px);
		}
	}
	#nav__wrapper[aria-hidden="true"] #nav__cover{
		animation-name: coverClose;
		animation-duration: .3s;
		animation-timing-function: var(--easeOutSine);
		animation-fill-mode: forwards;
	}
	@keyframes coverClose{
		from{
			background-color: rgba(0, 0, 0, .2);
			backdrop-filter: blur(6px) saturate(110%);
			-webkit-backdrop-filter: blur(6px) saturate(110%);
		}
		to{
			background-color: rgba(0, 0, 0, 0);
			backdrop-filter: blur(0px) saturate(100%);
			-webkit-backdrop-filter: blur(0px) saturate(100%);
		}
	}
	/* 電話番号・受付時間 */
	.header-tel.-sns{
		position: static;
		margin: 0 auto;
		margin-top: 1em;
		height: auto;
	}
	.header-tel.-telephone{
		border-top: solid 1px var(--c-gray-light);
		position: static;
		margin: 0 auto;
		height: auto;
		gap: 1em;

		flex-direction: column;
		align-items: flex-start;
        padding: calc(24rem / 16) min(4vw, calc(64rem / 16));
	}
	.header-tel__num-inner{
		align-items: flex-start;
	}
	/* キャッチコピーコピー */
	/* h2.reserve__catch{
		top: 42%;
    	left: 52%;
		transform: translate(-50%, -50%);
		white-space: nowrap;
	} */
	/* 予約ボックス */
	.reserve__wrapper{
		top: auto;
		bottom: 28px;
		left: 50%;
		transform: translateX(-50%);

		width: 460px;
	}

}
/*-------------------------------*/

/* Smartphone 559px */

/*------------------------------*/
@media(max-width:559px){
	:root{
		/* 上下余白 + 案内2行 + 間隔 + ボタン + 上罫線 */
		--reserve-fixed-height: calc(6.625rem + 1px + env(safe-area-inset-bottom, 0px));
	}
	body#index{
		padding-bottom: var(--reserve-fixed-height);
	}
	html:has(.reserve-fixed){
		scroll-padding-bottom: calc(var(--reserve-fixed-height) + 1rem);
	}
	.reserve__wrapper .reserve__link,
	.reserve__wrapper .reserve__guide{
		display: none;
	}
	/* コピーの下端位置は文字サイズに連動させない（通常時の余白 + セーフエリア） */
	#mainImg .reserve__wrapper{
		top: auto;
		bottom: calc(135px + env(safe-area-inset-bottom, 0px));
	}
	.reserve-fixed{
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 9;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0.375rem;
		padding: 0.5rem max(1rem, env(safe-area-inset-right, 0px)) calc(0.5rem + env(safe-area-inset-bottom, 0px)) max(1rem, env(safe-area-inset-left, 0px));
		box-sizing: border-box;
		border-top: 1px solid var(--c-gray-pale);
		background-color: var(--c-white);
		box-shadow: 0 -3px 16px rgba(15, 77, 63, 0.08);
		color: var(--c-gray);
	}
	.reserve-fixed__status{
		display: flex;
		flex-direction: column;
		align-items: center;

		width: 100%;
		margin: 0;
		text-align: center;
		font-size: var(--txt-sm);
	}
	.reserve-fixed__inner{
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 1rem;
	}
	.reserve-fixed__inner > span{
		display: inline-flex;
		gap: 6px;
		white-space: nowrap;
	}
	.reserve-fixed__note{
		margin: 0;
	}
	.reserve__tip{
		font-size: var(--txt-sm);
	}
	.reserve-fixed__vacant,
	.reserve-fixed__reserved{
		font-size: var(--txt-xl);
		font-weight: 700;
		line-height: 0;
		margin-bottom: 0.25em;
		vertical-align: middle;
	}
	.reserve-fixed__vacant{
		fill: #38b16c;
		width: 12px;
	}
	.reserve-fixed__reserved{
		fill: var(--c-bk);
		width: 12px;
	}
	.reserve-fixed a.reserve-fixed__link{
		width: 100%;
		max-width: none;
		height: 3rem;
		padding: 0 2.75rem;
		box-sizing: border-box;
		font-size: 0.9375rem;
		font-weight: 700;
	}
	.reserve-fixed__link:focus-visible{
		outline: 2px solid var(--c-main);
		outline-offset: 3px;
	}
	/* キャッチコピー */
	h1.reserve__catch-lead{
		margin-top: 0.5em;
	}
	h2.reserve__catch{
		line-height: 1.4em;
	}
	/* 予約カレンダー */
	.reserve__guide{
		padding-top: 0.5em;
		padding-bottom: 0.5em;
		margin-bottom: 0;
	}
	.reserve__guide .reserve__tip{
		width: 160px;
		font-size: var(--txt-sm);
	}
	.reserve__guide-lead{
		text-align: justify;
	}
	/* バーガーボタン */
	#nav-open-button{
		width: 48px;
		gap: 5px 0;
	}
	#nav-close-button{
		width: 48px;
		height: 48px;
	}
	/* ナビゲーション コンテナ */
	/* ナビアイテム */
	#nav__wrapper,
	#nav__inner{
		padding: 80px 0;
	}

	/* 予約キャッチボックス */
	.reserve__wrapper{
		width: var(--fx-width);
	}
}

/* タブレットの低い画面では予約案内を上寄せ。スマホは下寄せを維持する */
@media(min-width: 560px) and (max-width: 959px) and (max-height: 640px){
	#mainImg .reserve__wrapper{
		top: calc(var(--header-height) + 24px);
		bottom: auto;
	}
}