/* CSS Document */

section.page_mainpic{}
section.page_mainpic *{width:100%; aspect-ratio:1620 / 400;}
@media screen and (min-width: 871px){
	section.page_mainpic *{max-height: 300px;}
}
@media screen and (max-width: 870px){
	section.page_mainpic *{aspect-ratio:1170 / 780;}
}
section.pan{
	font-size: 12px;
	padding: 0.75em 2em 1em;
	gap: 0 0.5em; display: flex; flex-wrap: wrap; align-items: baseline;
}
h2.page_title{
	text-align: center;
	font-size: var(--font-32-28);
	margin-bottom: 1em;
	display: flex; flex-direction: column; align-items: center;
}
h2.page_title .deco{font-size: 9px; margin-top: 0.5em; gap: 0.5em; display: flex; justify-content: center; align-items: center;}
h2.page_title .deco img{width: auto; height: 1em; background-position: center center; background-repeat: no-repeat; background-size: contain;}
h2.page_title .deco::before,
h2.page_title .deco::after{content:''; width:4em; max-width: 100%; border-bottom: solid 1px var(--color-R);}
h2.page_title .flex{gap: 0.5em; display: flex; flex-wrap: wrap; align-items: center;}
h2.page_title .flex font{font-size: 0.75em;}
main{padding-bottom: min(150px,max(100px,calc(1vw * 100 / 3.75)));}
main .catch{
	text-align: center;
	font-size: var(--font-18-16);
	white-space: pre-wrap;
	padding: 0 1em;
}
main .catch.caution{font-size: var(--font-16-14)}
main .catch + .caution{margin-top: 0.5em;}
main .catch.yell{
	color:var(--color-R); font-size: var(--font-30-16);
	gap: 0 0.25em; display: flex; justify-content: center; align-items: baseline;
}
main .catch.yell::before,
main .catch.yell::after{
	content: ''; display: block; width:1em; min-width:1em; height:1em;
	background-image: url("../../images/2025/yoyaku/deco-yell.svg");
	background-position: center bottom;
	background-repeat: no-repeat;
	background-size: contain;
}
main .catch.yell::after{transform:scaleX(-1);}

section.page_inner{
	width:var(--size-inner-W975);
	margin-left: auto;
	margin-right: auto;
}


/* 浜木綿で特別な集い */
.tsudoi_list{
	width:var(--size-inner-W);
	margin-top: min(40px,max(30px,calc(1vw * 30 / 3.75)));
	margin-left: auto;
	margin-right: auto;
	gap:20px 0; display: flex; flex-wrap: wrap; justify-content: space-between;
}
.tsudoi_list dl,
.tsudoi_list dd[t],
.tsudoi_list dd[t] *[b]{display: flex; flex-direction: column;}
.tsudoi_list dl{
	width: calc(1% * 402 / 8.25);
	background-color: var(--color-gray-F);
	border-radius:var(--radius-10);
	padding: min(20px,var(--font-limit16)) min(20px,var(--font-limit16)) min(30px,var(--font-limit16));
}
.tsudoi_list.type2 dl{width:100%; padding: min(40px,var(--font-limit16)) min(30px,var(--font-limit16)) min(20px,var(--font-limit16));}
.tsudoi_list.type2 dd[p]{width:min(600px,100%); margin:0 auto; border-radius: 0;}
.tsudoi_list dd[p]{border-radius:var(--radius-10); overflow: hidden; display: flex;}
.tsudoi_list dd[p] *{flex-grow:1; width: 1px; aspect-ratio: 362 / 228;}
.tsudoi_list.type2 dd[p] *{width:100%; height:auto; aspect-ratio: 600 / 338;}
.tsudoi_list dd[t]{flex-grow:1;}
.tsudoi_list dd[t] h3{margin:0.75em auto 1em; font-size:var(--font-24-20);
gap:0.5em; display:flex; flex-direction:column; align-items:center;}
.tsudoi_list dd[t] h3::after{
	content:'';
	width:3em; display: block; margin: 0 auto;
	border-bottom:solid 1px var(--color-R);
}
.tsudoi_list.type2 dd[t] h3,
.tsudoi_list.type2 dd[t] h3::after{width:100%;}
.tsudoi_list.type2 dd[t] h3::after{border-color:var(--color-dark30);}
.tsudoi_list.type2 dd[t]:first-child h3{margin-top: 0;}
.tsudoi_list dd[t] *[t]{text-align: justify; margin-bottom: auto;}
.tsudoi_list dd[t] *[b]{margin-top: 1.25em; gap:1em;}
.tsudoi_list dd[t] *[b] .ovalbtn_box a{
	width: min(22em,100%);
	font-size: var(--font-16-14);
	padding: 0.25em calc(var(--ovalbtn-arrow) * 2);
}
@media screen and (max-width: 870px){
	.tsudoi_list{flex-direction: column;}
	.tsudoi_list dl{width:100%;}
}


/* 特別料理 */
:root{
--special-photo-W:450;
--special-photo-H:310;
}
:root{
--special-photo-Wpx:calc(1px * var(--special-photo-W));
}
.special_list{
	counter-reset: number 0;
	margin-top: min(35px,max(30px,calc(1vw * 30 / 3.75)));
	gap:min(70px,max(60px,calc(1vw * 60 / 3.75))); display: flex; flex-direction: column;
}
.special_list dl{display: flex; justify-content: space-between;}
.special_list dd{position: relative;}
.special_list dd[p]{z-index:2; border-radius:var(--radius-10); overflow: hidden; display: flex;}
.special_list dd[p] img{flex-grow:1; width: 1px;}
.special_list dd[p][col] img{aspect-ratio: calc(var(--special-photo-W) / attr(col number)) / var(--special-photo-H);}
.special_list dd[p][col="1"] img{aspect-ratio: var(--special-photo-W) / var(--special-photo-H);}
.special_list dd[p][col="2"] img{aspect-ratio: calc(var(--special-photo-W) / 2) / var(--special-photo-H);}
.special_list dd[p][col="3"] img{aspect-ratio: calc(var(--special-photo-W) / 3) / var(--special-photo-H);}
.special_list dd[t]{
	background-color: var(--color-gray-F);
	border-radius:var(--radius-10);
	padding-bottom: 50px;
	display: flex; flex-direction: column; align-items: flex-start;
}
.special_list dd[t] *[n]{
	color:var(--color-R);
	display: flex; flex-direction: column; align-items: center;
}
.special_list dd[t] *[n]::before,
.special_list dd[t] *[n]::after{line-height:1em;}
.special_list dd[t] *[n]::before{content:'特別料理'; font-size: var(--font-15-10);}
.special_list dd[t] *[n]::after{
	font-size: min(82px,max(56px, calc(1vw * 56 / 3.75)));
	counter-increment: number 1;
	content: counter(number);
	/* content: counter(number, decimal-leading-zero); */
}
.special_list dd[t] h3{font-size: var(--font-32-20); margin-bottom: 0.25em;}
.special_list dd[t] *[t]{font-size: 16px; text-align: justify; white-space: pre-wrap;}
@media screen and (min-width: 871px){
	:root{
	--special-mgnT:70;
	--special-mgnL:35;
	}
	:root{
	--special-mgnTpx:calc(1px * var(--special-mgnT));
	--special-mgnLpx:calc(1px * var(--special-mgnL));
	}
	.special_list dl:nth-of-type(2n+1){flex-direction: row-reverse;}
	.special_list dd[p]{width:var(--special-photo-Wpx); min-width:min(var(--special-photo-Wpx),calc(1% * var(--special-photo-W) / 9.75)); margin-bottom:35px;}
	.special_list dd[t]{width:560px; margin-top:var(--special-mgnTpx);}
	.special_list dl:nth-of-type(2n+1) dd[t]{
		padding-left: min(var(--special-mgnTpx),max(var(--special-mgnLpx),calc(1% * var(--special-mgnT) / 9.75)));
		padding-right: var(--special-mgnTpx);
		margin-right: calc(var(--special-mgnLpx) * -1);
	}
	.special_list dl:nth-of-type(2n) dd[t]{
		padding-right: var(--special-mgnLpx);
		padding-left: var(--special-mgnTpx);
		margin-left: calc(var(--special-mgnLpx) * -1);
	}
	.special_list dd[t] *[n]{margin-top: calc(var(--special-mgnTpx) * -1);}
}
@media screen and (max-width: 870px){
	:root{
	--special-photo-W:288;
	--special-photo-H:198;
	}
	.special_list dl{flex-direction: column;}
	.special_list dd[p]{width:calc(1% * var(--special-photo-W) / 3.2); margin: 0 auto;}
	.special_list dd[t]{
		margin-top: calc(-1% * 15 / 3.2); padding: calc(1% * 30 / 3.2) calc(1% * 15 / 3.2);
		gap:0 8px; flex-direction: row; flex-wrap: wrap; align-items: center;
	}
	.special_list dd[t] h3{max-width: calc(100% - 8px - var(--font-15-10) * 4); margin: calc(var(--font-15-10) / 2) 0 0;}
	.special_list dd[t] *[t]{margin-top: 0.5em;}
}

/* 予約コンシェルジュ */
.yoyaku_main{
	width:var(--size-inner-W);
	margin-left: auto;
	margin-right: auto;
}
.yoyaku_main .caution{
	font-size: var(--font-18-16);
	display: flex; justify-content: center; align-items: center;
}
.yoyaku_main .caution ul{text-align: justify;}
/*
.yoyaku_main .caution ul li{
	text-indent: -1em; padding-left: 1em;
}
*/
.catch.yell + .yoyaku_main{margin-top:min(20px,calc(1% * 5 / 3.75));}
.special_list + .yoyaku_main{margin-top:min(150px,max(55px,calc(1vw * 55 / 3.75)));}
.set_concie{
	background-color: var(--color-gray-F);
	border-radius: var(--radius-10);
	padding: calc(1% * 35 / 8.25);
	display: flex; flex-direction: column; align-items: center;
}
.set_concie h3,
.set_concie img{width:100%;}
.set_concie h3 + *{margin: 1em auto min(2em,var(--font-limit16)); text-align: center; font-size: var(--font-24-16); color:var(--color-R);}
.set_concie a[href*="tel:"]{width:min(615px,100%);}
.set_concie img[src*="-time."]{width:min(280px,50%);margin-top:14px;}
.set_concie + .caution{margin-top:min(2em,var(--font-limit20));}

