/* mt rebuild: 2025.09.10 19:39 */

@charset "utf-8";

@layer project{
	.g-afternoon{
		--scale: 1.25;
		--device-ratio: 1;
		
		--pow-2: 0.64;
		--pow-1: 0.8;
		--pow0: 1;
		--pow3: 1.953125;
		--pow6: 3.814697265625;
		--pow9: 7.450580596923828;
	}
	@media (max-width: 1023px) and (min-width: 769px){
		.g-afternoon{
			/* --device-ratio: pow(var(--scale), -1); */
			--device-ratio: var(--pow-1);
			--font-size: 1.5625vw;
		}
	}
	
	@media (max-width: 768px){
		.g-afternoon{
			/* --device-ratio: pow(var(--scale), -2); */
			--device-ratio: var(--pow-2);
		}
	}
}

@layer designsystem{
	
	/* stack */
	.c-stack > *{
		/* --stack: calc(1rem * var(--device-ratio) * pow(var(--scale), 3)); */
		--stack: calc(1rem * var(--device-ratio) * var(--pow3) );
		margin-block: 0;
	}
	.c-stack > * + *{
		margin-top: var(--stack);
	}
	.c-stack--page > *{
		/* --stack: calc(1rem * var(--device-ratio) * pow(var(--scale), 9)); */
		--stack: calc(1rem * var(--device-ratio) * var(--pow9) );
	}
	.c-stack--section > *{
		/* --stack: calc(1rem * var(--device-ratio) * pow(var(--scale), 6)); */
		--stack: calc(1rem * var(--device-ratio) * var(--pow6) );
	}
	.c-stack--content > *{
		/* --stack: calc(1rem * var(--device-ratio) * pow(var(--scale), 3)); */
		--stack: calc(1rem * var(--device-ratio) * var(--pow3) );
	}
	.c-stack--sentence > *{
		--stack: calc(1rem * var(--pow0));
	}
	.c-stack--fit > *{
		--stack: 0;
	}
	.c-stack > .c-stack__exclude + *{
		--stack: 0;
	}
	
}

@layer components{
	
	/* title */
	.c-ttl{
		line-height: 1.5;
		font-size: 1em;
		font-weight: normal;
		font-feature-settings: "palt";
		color: var(--ttl-color, inherit);
	}
	.c-ttl:where([data-ruby])::before{
		content: attr(data-ruby);
		/* font-size: calc(1em * pow(var(--scale), -2)); */
		font-size: 2.25em;
		color: var(--ttl-ruby-color, inherit);
		display: block;
	}
	.c-ttl-page{
		
	}
	.c-ttl-section{
		/* font-size: 4.5em; */
		font-size: calc(4.5em * var(--device-ratio));
	}
	.c-ttl-section:where([data-ruby]){
		/* font-size: 2em; */
		font-size: calc(2em * var(--device-ratio));
	}
	.c-ttl-content{
		/* font-size: 2.25em; */
		font-size: calc(2.25em * var(--device-ratio));
	}
	.c-ttl-content:where([data-ruby]){
		/* font-size: 1em; */
		font-size: calc(1em * var(--device-ratio));
	}
	.c-ttl-sentence{
		/* font-size: 1.25em; */
		font-size: max(1.25em * var(--device-ratio), 1.25em);
	}
	.c-ttl-sentence:where([data-ruby]){
		/* font-size: .555em; */
		font-size: max(.555em * var(--device-ratio), .555em);
	}
	
	.c-ttl-underline{
		border-bottom: 1px solid;
		padding-bottom: .5em;
	}
	
	
	/* btn */
	.c-btn{
		font-size: var(--btn-font-size, inherit);
		text-align: center;
		text-decoration: none;
		
		color: var(--btn-color, inherit) !important;
		background: var(--btn-bg, none);
		border-radius: var(--btn-radius, 0);
		
		padding: var(--btn-padding, .666em 1em);
		
		
		display: grid;
		
		&:where(button){
			border: unset;
			width: 100%;
		}
		
		&:hover{
			text-decoration: none;
			opacity: .64;
		}
		
		&:where([data-icon-rear]){
			grid-template-columns: 1fr auto;
		}
	}
	
	/* box */
	.c-box{
		color: var(--box-color, inherit);
		background: var(--box-bg, none);
		border: var(--box-border, 1.25em solid var(--color-main));
		border-radius: var(--box-radius, 0);
		/* padding: var(--box-padding, calc(1em * pow(var(--scale), 6) * var(--device-ratio))); */
		padding: 3.814697265625em;
	}
	@media (max-width: 768px){
		.c-box{
			padding: 2.44140625em;
		}
	}
	
	/* list */
	.c-list{
		--marker: initial;
		margin-left: 1.25em;
		padding-left: 0;
		
		& :where(li){
			list-style: var(--marker);
		}
	}
	
	/* split */
	.c-split:where(ul, ol){
		list-style: none;
		padding-left: 0;
	}
	.c-split{
		display: flex;
		align-items: var(--split-align, unset);
		gap: var(--split-gap, 0);
	}
	.c-split > *{
		flex: 1 1 0;
	}
}



/* Contents
______________________________________________________________________*/


/* wrap */
.g-afternoon{
	font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
	color: #cdaf96;
	background: #2f1b16;
	position: relative;
	z-index: 0;
	overflow: clip;
}
@media (max-width: 768px){
	.g-afternoon{
		font-size: .64em;
	}
}

.g-afternoon :where(:any-link){
	color: inherit;
}

.g-afternoon :where(:any-link:hover){
	text-decoration: none;
}



/* reserve */
.p-reserve{
	text-align: center;
	max-width: fit-content;
	margin-left: auto;
	margin-right: auto;
}

.p-reserve > *{
	margin-block: 0;
}

.c-note--reserve{}

.c-btn--reserve{
	--btn-radius: 100vmax;
	--btn-bg: #cdaf96;
	--btn-color: #2e1b15;
	--btn-font-size: 1em;
	--btn-padding: .666em 2em;
	
	
	box-shadow: .25em .25em .5em rgb(0 0 0 / .5);
}



/* mv */
.lp-header{
	position: relative;
	z-index: 0;
}

.lp-header::after{
	content: "";
	width: 7.5em;
	height: 7.5em;
	background: url(./img/compass.png) no-repeat center / contain;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin-left: auto;
	margin-right: auto;
	translate: 0 50%;
}

.lp-header__bg{
	--reserve: 100px;
	
	width: 100%;
	height: calc(100dvh - var(--reserve));
	object-fit: cover;
}

.lp-header__title{
	position: absolute;
	top: 10%;
	left: 10%;
	right: 10%;
	text-align: right;
}
@media (max-width: 768px){
	.lp-header__title{
		left: 30%;
		right: 30%;
		text-align: center;
	}
}

.lp-header__logo{
	max-width: calc(377px * var(--device-ratio));
}
@media (max-width: 768px){
	.lp-header__logo{
		max-width: 100%;
	}
}



/* intro */
.intro{
	padding-top: calc(7.5em * var(--device-ratio));
	padding-bottom: calc(7.5em * var(--device-ratio));
	
	position: relative;
	z-index: 1;
}
.intro-bg{
	position: relative;
	z-index: 0;
}
.intro-bg::before{
	content: "";
	background: url(./img/intro-bg.png) no-repeat center / contain;
	opacity: .1;
	
	display: block;
	width: 25em;
	height: 35em;
	
	position: absolute;
	z-index: -1;
	top: 0;
	right: 0;
	translate: 64% -10%;
}
.c-split--intro-nav{
	--split-gap: 3.75em;
}

.c-ttl--intro{
	line-height: 1.5;
	font-size: 1.875em;
	text-align: center;
}

.c-note--intro-time{
	line-height: 1.5;
	font-size: 1.875em;
	text-align: center;
}

.c-note--intro-desc{
	font-size: 1.25em;
	text-align: center;
	max-width: 20em;
	margin-left: auto;
	margin-right: auto;
}







/* drink */
.drink{
	margin-top: 5.625em;
	margin-bottom: 5.625em;
}
.c-box--drink{
	--box-radius: 0 0 12em;
	
	border: 3px solid;
	outline: 1px solid;
	outline-offset: -.5em;
}
@media (max-width: 768px){
	.c-box--drink{
		--box-radius: 0 0 6em;
	}
}

.menu-drink{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16em, 1fr));
	gap: 1.875rem;
}

.menu-drink__category{}

.menu-drink__category > *{
	margin-block: 0;
}

.menu-drink__category > * + *{
	margin-top: 1rem;
}

.menu-drink__list{
	padding-left: 1.25em;
}

.c-ttl--drink{
	text-align: center;
}

.c-ttl--drink-category{}



/* welcome dessert */
.dessert{
	background: linear-gradient(transparent, #1f0d09) no-repeat bottom / auto 40%;
}
.welcome-dessert-grid{
	display: grid;
	grid-template-columns: 40% 1fr;
	gap: min(3.75em, 5.33%);
	
	& .welcome-dessert-grid__body{
		align-self: center;
		margin-right: min(3.75em, 5.33% * 2);
	}
}

.welcome-dessert-grid__image{
	position: relative;
	z-index: 0;
}
.welcome-dessert-grid__image::before{
	content: "";
	position: absolute;
	top: calc(15em * var(--device-ratio));
	right: 0;
	translate: 50% 0;
	
	width: calc(6.5em * var(--device-ratio));
	height: calc(6.5em * var(--device-ratio));
	background: url(./img/compass.png) no-repeat center / contain;
}
.welcome-dessert__img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* border-radius: 0 calc(25em * var(--device-ratio)) 0 0; */
	border-top-right-radius: 25em;
}
@media (max-width: 768px){
	.welcome-dessert__img{
		border-top-right-radius: 9em;
	}
}

.c-ttl--welcome-dessert.c-ttl-content{
	font-size: 1.5em;
	font-weight: bold;
}
.c-ttl--welcome-dessert.c-ttl-content > small{
	font-size: .666em;
}


/* chocolate tasting */
.voyage{
	background: #1d0906;
}
.tasting-grid{
	display: grid;
}

.tasting-grid > *{
	grid-area: 1 / 1;
	width: 100%;
}

.tasting-grid__bg{
	/* z-index: -1; */
	aspect-ratio: 16 / 9;
	clip-path: polygon(0 17%, 45% 0, 100% 0, 100% 100%, 0 100%);
}

.voyage-inner-grid{
	z-index: 1;
	max-width: min(990px, 89.34%);
	margin-left: auto;
	margin-right: auto;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding-bottom: 3.75em;
}
@media (max-width: 768px){
	.voyage-inner-grid{
		padding-bottom: 0;
	}
}

.voyage-inner-grid > *{
	margin-top: 0;
	margin-bottom: 0;
}

.c-ttl--tasting{
	margin-left: auto;
	text-align: right;
	max-width: none;
}

.c-note--tasting{
	max-width: 60%;
}



/* chocolate bg */
.chocolate-bg{
	--bg-size: 80%;
	background: url(./img/bg.jpg) no-repeat right center / auto var(--bg-size), linear-gradient(#1f0d09, transparent) no-repeat top / auto 40%;
}
@media (max-width: 768px){
	.chocolate-bg{
		--bg-size: 33.3%;
	}
}



/* stand sweet */
.standsweet{
	position: relative;
	z-index: 0;
}
.standsweet-grid{
	display: grid;
	grid-template-columns: 37% 1fr;
	grid-template-rows: repeat(3, auto);
	grid-template-areas: "ph hd" "ph ." "ph nt";
	
	&, & > *{
		/* border: 1px solid red; */
	}
	& > .c-ttl--standsweet{
		grid-area: hd;
		z-index: 1;
	}
	& > .standsweet-grid__body{
		grid-area: nt;
		z-index: 1;
	}
	& > .standsweet-grid__ph1{
		grid-area: ph;
	}
	& > .standsweet-grid__ph2{
		grid-area: 1/2/-1/-1;
		align-self: end;
	}
	/* & img{
		width: 100%;
		height: 100%;
	} */
}
@media (max-width: 768px){
	.standsweet-grid{
		grid-template-columns: 1fr 30%;
		grid-template-rows: repeat(2, auto);
		grid-template-areas: ". hd" "nt ph";
		
		& > .standsweet-grid__ph1{
			grid-area: ph;
		}
		& > .standsweet-grid__ph2{
			grid-area: 1/1/-1/1;
		}
	}
}

.standsweet-grid__body{
	background: rgba(0 0 0 / .64);
	width: 64%;
	padding: 1.5em;
	align-self: end;
}
.standsweet-grid__body > *{
	margin-block: 0;
}
.standsweet-grid__body > * + *{
	margin-top: 1rem;
}

.standsweet__img1{
	object-fit: contain;
	height: 100%;
}
.standsweet__img2{
	align-self: center;
	margin-top: -3.75em;
}

.c-ttl--standsweet{
	text-align: right;
	margin-right: 1em;
}
@media (max-width: 768px){
	.c-ttl--standsweet{
		writing-mode: vertical-lr;
		display: flex;
		align-items: center;
		gap: 1em;
		
		
		margin: 0;
	}
	.c-ttl--standsweet::before{
		content: "";
		width: 1px;
		aspect-ratio: 1 / 110;
		background: url(./img/standsweet--line-8.png) no-repeat bottom / contain;
	}
}



/* savory */
.savory{
	margin-top: 5.625em;
	margin-bottom: 5.625em;
}
.c-split--savory{
	--split-gap: 0 calc(3.75em * var(--device-ratio));
	--savory-overflow: 2em;
	
	/* border-image: linear-gradient(rgb(0 0 0 / .2) 0 0) 1 fill / 1 / 0 100vw; */
	position: relative;
	z-index: 0;
	margin-block: var(--savory-overflow);
}
.c-split--savory::before{
	content: "";
	border-image: linear-gradient(rgb(0 0 0 / .5) 0 0) 1 fill / 1 / 0 100vw;
	
	display: block;
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	right: 0;
	height: 17.5em;
}
@media (max-width: 768px){
	.c-split--savory{
		flex-direction: row-reverse;
	}
	.c-split--savory::before{
		height: 10em;
	}
}

.c-split--savory :where(.c-split__image){
	margin-block: calc(var(--savory-overflow) * -1);
	/* align-self: center; */
	flex-basis: 60%;
}

.c-split--savory :where(.c-split__body){
	/* padding-block: 1.875em; */
	position: relative;
	z-index: 0;
	flex-basis: 40%;
}

.c-split__body::after{
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	translate: 50% -50%;
	
	width: 6.5em;
	height: 6.5em;
	background: url(./img/compass.png) no-repeat center / contain;
}

.c-ttl--savory{
	
}

.c-note--savory{
	
}

.savory-image{
	outline: 1px dashed;
	outline-offset: calc((.5em + 3px) * -1);
	border: 2px solid;
	border-radius: 100%;
	
	box-sizing: border-box;
	width: 100%;
	/* height: 100%; */
	object-fit: cover;
	/* aspect-ratio: 16 / 9; */
	
	padding: 1em;
}




.night-plan{
	--offset: 8.5em;
	background: linear-gradient(transparent, #1d0906 var(--offset), #1c1312 0), url(./img/night-texture-8.png) no-repeat 0% 3.75em;
	border-bottom: 1px solid transparent;
}
.night-plan::after{
	content: "";
	display: block;
	margin-block: 3.75em;
	
	color: inherit;
	border-style: solid;
	border-width: 1px 0 2px;
	height: .75em;
}
@media (max-width: 768px){
	.night-plan{
		--offset: 0;
	}
}

.night-desc-grid{
	display: grid;
	/* grid-template-columns: repeat(2, 1fr); */
	/* grid-template-columns: 32% 1fr; */
	grid-template-columns: 1fr 68%;
	grid-template-rows: repeat(2, auto);
	grid-template-areas: "hd ph" "nt bk";
	gap: 1.5em;
}
@media (max-width: 768px){
	.night-desc-grid{
		grid-template-columns: 60% 1fr;
		grid-template-rows: repeat(3, auto);
		grid-template-areas: "hd ." "ph ph" "nt bk";
	}
}
.c-ttl--night-desc-grid{
	grid-area: hd;
	align-self: end;
	
	margin-top: 0;
	margin-bottom: 0;
}
.c-note--night-desc-grid{
	grid-area: nt;
	
	margin-top: 0;
	margin-bottom: 0;
}
.night-desc-grid__bg{
	grid-area: ph;
}
@media (max-width: 768px){
	.night-desc-grid__bg{
		border-top-left-radius: 7.5em;
	}
}
.night-desc-grid__reserve{
	grid-area: bk;
}
.night-desc-grid :where(img){
	/* width: 100%; */
	max-width: 100%;
	
	
	
	/* overflow: clip; */
	max-width: 100%;
}

.night-plan__img1{
	border-top-left-radius: 15em;
}
@media (min-width: 769px){
	.night-plan__img1{
		max-width: min(65vw, 770px);
	}
}



.night-logo{
	width: 90%;
}
@media (max-width: 768px){
	.c-ttl--night-desc-grid{
		position: relative;
		z-index: 0;
	}
	.night-logo{
		position: absolute;
		top: 0;
		left: 0;
		
		width: 60%;
		translate: -15% -15%;
	}
}

.night-reserve{
	display: flex;
	align-items: center;
}
@media (max-width: 768px){
	.night-reserve{
		flex-direction: column-reverse;
		align-items: stretch;
	}
}
.night-reserve > *{
	/* flex: 1 1 0; */
}

.c-note--night-reserve{
	font-size: calc(1.25em * var(--device-ratio));
	text-align: center;
	border-bottom: 1px solid;
}
@media (min-width: 769px){
	.c-note--night-reserve{
		margin-left: auto;
		padding-right: 1.5em;
		padding-left: .5em;
		border-image: linear-gradient(currentcolor 0 0) 1 / 1 / 0 3em 0 0;
	}
}

.night-reserve__button{
	flex: 0 1 40%;
	margin-top: calc(-7.5em * var(--device-ratio));
}



/* night menu */
.night-menu-list:where(ul, ol){
	list-style: none;
	padding-left: 0;
}

.night-menu-list{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 3.75em;
}
@media (max-width: 768px){
	.night-menu-list{
		grid-template-columns: repeat(2, 1fr);
	}
	.night-menu-list > :first-child{
		grid-column: span 2;
	}
}

.night-menu{
	
}
@media (max-width: 768px){
	.night-menu{
		display: grid;
		gap: 1em 3.75em;
	}
	.night-menu:where(.night-menu-list > :first-child *){
		grid-template-columns: repeat(2, 1fr);
	}
}

.night-menu__body > *{
	margin-block: 0;
}

.night-menu__body > * + *{
	margin-top: 1rem;
}

.c-ttl--night-menu{
	border-bottom: 1px solid;
	padding-bottom: .5em;
}

.c-note--night-menu{
	
}



/* restaurant */
.restaurant{
	padding-top: 3.75em;
	padding-bottom: 3.75em;
}
.restaurant-header{
	text-align: center;
}

.restaurant-header__img{
	max-width: 27.5%;
}

.c-ttl--restaurant{
	max-width: fit-content;
	margin-left: auto;
	margin-right: auto;
	padding-left: .5em;
	padding-right: .5em;
}

.c-tbl--restaurant{
	margin-left: auto;
	margin-right: auto;
}

.c-tbl--restaurant :where(tbody){
	display: grid;
	grid-template-columns: repeat(2, auto);
	gap: 1em;
}

.c-tbl--restaurant :where(tr){
	display: inherit;
	grid-template-columns: subgrid;
	grid-column: span 2;
}

.c-tbl--restaurant :where(tr > *){
	align-content: center;
}

.c-tbl--restaurant :where(th){
	border: 1px solid;
	padding: .5em 1em;
}


.c-list--notice{
	--marker: "※";
	
	font-size: .75em;
	max-width: fit-content;
	margin-left: auto;
	margin-right: auto;
}