/* mt rebuild: <mt:date format="%Y.%m.%d %H:%M" /> */

@charset "utf-8";

@layer initial{
	img{
		max-width: 100%;
	}
}
@font-face{
	font-family:"Volta W01 Regular";
	src: url("../common/font/volta/84cb270c-d85b-4d27-8c17-ff5308877d15.eot?#iefix");
	src: url("../common/font/volta/84cb270c-d85b-4d27-8c17-ff5308877d15.eot?#iefix") format("eot"),
	url("../common/font/volta/fd13c272-0931-4a2b-b4c5-5f6ae56166a3.woff2") format("woff2"),
	url("../common/font/volta/64536f75-1fb4-48f0-a4e0-3b74bc0a845f.woff") format("woff"),
	url("../common/font/volta/55347e02-1eee-4a24-9747-740dea2b2701.ttf") format("truetype");
}
@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;
        
        z-index: 2;
	}
	@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); */
            --device-ratio: 0.533333;
		}
	}
}

@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; */
		line-height: 1.25;
		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;
        font-family: "Volta W01 Regular", "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", YuMincho, "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	}
	.c-ttl-page{
	}
	.c-ttl-section{
		font-size: calc(4.5em * var(--device-ratio));
	}
	.c-ttl-section:where([data-ruby]){
		font-size: calc(2em * var(--device-ratio));
	}
	.c-ttl-content{
		font-size: calc(2.25em * var(--device-ratio));
	}
	.c-ttl-content:where([data-ruby]){
		font-size: calc(1em * var(--device-ratio));
	}
	.c-ttl-sentence{
		font-size: max(1.5em * var(--device-ratio), 1.5em);
	}
	.c-ttl-sentence:where([data-ruby]){
		font-size: max(.555em * var(--device-ratio), .555em);
	}
	
	.c-ttl-underline{
		border-bottom: 1px solid;
		padding-bottom: .5em;
	}
	
	.c-ttl--hline{
		display: flex;
		align-items: center;
		gap: 1em;
	}
	.c-ttl--hline::after,
	.c-ttl--hline::before{
		content: "";
		border-bottom: 1px solid;
		flex: 1 1 0;
	}
	.c-ttl--hline-left::before,
	.c-ttl--hline-right::after{
		content: none;
	}
	
	.c-ttl--vline{
		margin-bottom: 1em;
		
		display: grid;
		justify-content: center;
		gap: .5em;
	}
	.c-ttl--vline::after{
		content: "";
		border-left: 2px solid;
		min-height: 1em;
		justify-self: center;
	}
	
	
	/* 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;
	}
	
	/* separate */
	.c-separate{
		border: 0 none;
	}
	
	/* cards */
	.c-cards{
		display: grid;
		grid-template-columns: var(--cards-columns, repeat(3, 1fr));
		gap: var(--cards-gap, .75em);
	}
}


/* Contents
______________________________________________________________________*/


.u-texture1{
	background: 
		url(./img/texture-circle.png) no-repeat center bottom,
		linear-gradient(transparent, #b1b7a0 30% 70%, transparent);
}


/* custom */
.sitewidth--afternoon {
    max-width: min(1100px, 80vw);
}

@media (min-width: 769px) {
    .sitewidth--afternoon {
        padding-inline: 0;
    }
}

@media (max-width: 768px) {
    .sitewidth {
        padding-left: 5.33%;
        padding-right: 5.33%;
    }
}


/* rule */
.march .for-january{
	display: none !important;
}
.january .for-march{
	display: none !important;
}
.january.march :is(.for-january, .for-march){
	display: revert !important;
}


/* components */
.c-separate--texture1{
	aspect-ratio: 1537 / 157;
	background: url(./img/texture-separate1.png) no-repeat left center / cover;
}
.c-separate--texture2{
	aspect-ratio: 1537 / 191;
	background: url(./img/texture-separate2.png) no-repeat right center / cover;
}


/* wrap */
.g-afternoon{
	font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
	color: #231815;
    background: #fff;
	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;
}

/* note */
.c-note {
    font-size: max(1.25em * var(--device-ratio), 1.25em);
}
@media (max-width: 768px){
    .c-note {
        font-size: 1em;
    }
}

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

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

.c-note--reserve{
    font-size: 1em;
}

.c-btn--reserve{
	--btn-radius: 100vmax;
	--btn-bg: #e3ebc3;
	--btn-color: black;
	--btn-font-size: 2.15em;
	--btn-padding: .666em 2em;
	
    box-sizing: border-box;
    width: 100%;
    max-width: 535px;
    line-height: 1em;
    
    margin-left: auto;
    margin-right: auto;
}
@media (max-width: 768px){
    .c-btn--reserve{
        --btn-font-size: 1.1em;
        width: fit-content;
        max-width: none;
        min-width: 162px;
        white-space: nowrap;
    }
}



/* mv */
.lp-header{
	position: relative;
	z-index: 0;
}
/*
.lp-header::after{
	content: "";
	background: linear-gradient(transparent, #95a17a);
	height: 3.75em;
	position: absolute;
	inset: auto 0 0;
}
*/
.lp-header__bg{
	--reserve: 100px;
	
	width: 100%;
	height: calc(100dvh - var(--reserve));
	object-fit: cover;
}
@media (max-width: 768px){
    .lp-header__bg{
        --reserve: 60px;
    }
}
.lp-header__title{
	position: absolute;
	top: 50%;
	left: 0;
    transform: translateY(-50%);
	text-align: right;
    height: 65%;
    min-height: 470px;
    width: 100%;
    background: rgba(255,255,255,.45);
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    box-sizing: border-box;
    padding: 0 20px;
}
@media (max-width: 768px){
	.lp-header__title{
		min-height: 200px;
	}
}
.lp-header__logo{
	max-width: 802px;
}
@media (max-width: 768px){
	.lp-header__logo{
        width: 70%;
	}
}


/*** intro ***/
.intro{	
	padding-top: calc(7.5em * var(--device-ratio));
	padding-bottom: calc(6.25em * var(--device-ratio));
	
	position: relative;
}
@media (max-width: 768px){
	.intro{
	}
}
.c-split--intro-nav{
	--split-gap: 3.75em;
}

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

/* book now */
.book-now {
	position: fixed;
	top: 50%;
	right: 30px;
	transform: translateY(-50%);
	z-index: 99999;
	/* padding-right: 30px; */
	width: fit-content;
}
/*
.book-now::before {
    position: absolute;
    right: 0;
    top: 50%;
    content:'';
    width: 30px;
    height: 1px;
    background: #231815;
}
*/
.book-now .book-now-inner {
	position: relative;
    display: block;
    width: 135px;
    aspect-ratio: 1;
	background: #fff;
	border-radius: 100vmax;
    padding: 1em;
    box-sizing: border-box;
    border: 1px solid #231815;
    text-decoration: none;
    
    background-image: url("img/book-now.jpg");
    background-size: cover;
    background-position:center bottom;
}
.book-now .book-now-inner p{
    margin: 0;
}
/*
.book-now.is-fixed {
	position: fixed;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	z-index: 99999;
	width: fit-content;
}
*/
#bookNow.is-stopped {
  position: absolute;
  top: auto;
  transform: none;
}

.book-now.is-hidden {
	display: none;
}

.close-btn {
    position: absolute;
    right: 0;
    top: 0;
	display: block;
	width: 28px;
	height: 28px;
	cursor: pointer;
    background: #231815;
    border-radius: 100vmax;
    z-index: 10;
}
.close-btn::after {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    content: '';
    width: 11px;
    height: 2px;
    background: #fff;
}
@media (max-width: 768px){
    .book-now {
        /* padding-right: 20px; */
        right: 20px;
        transform: translateY(-10%);
    }
    /*
    .book-now::before {
        width: 20px;
    }
    */
    .book-now .book-now-inner {
        width: 100px;
        padding: 2em;
    }
    .book-now p {
        font-size: .875em;
    }
    .book-now-image {
        max-width: 40px;
    }
    .close-btn {
        width: 24px;
        height: 24px;
        right: -4px;
        top: -4px;
    }
    .close-btn::after {
        width: 9px;
    }
}

/* intro logo */
.intro-logo{
	display: grid;
	justify-items: center;
	gap: 1.875em;
}
.intro-logo__img{
	/* width: 44%; */
	max-width: min(156px, 20%);
}

/* intro link */
.intro-link {
    display: flex;
}
.intro-link__item {
    flex: 1;
    margin: 0;
}
.intro-link-title{
    color: #231815;
    text-align: center;
}

.intro-link__img {
    position: relative;
    display: flex;
    aspect-ratio: 281 / 315;
    background-size: cover;
    background-position: center;
}
.intro-link__item:not(.now) .intro-link__img::before {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    content: '';
    background: rgba(0,0,0,.65);
    z-index: 1;
}
.intro-link__img.melon {
    background-image: url("img/season-melon.jpg");
}
.intro-link__img.peach {
    background-image: url("img/season-peach.jpg");
}
.intro-link__img.muscat {
    background-image: url("img/season-muscat.jpg");
}
.intro-link__img.apple {
    background-image: url("img/season-apple.jpg");
}
.intro-link__img p{
    width: 100%;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    color: #fff;
    font-size: 17px;
    z-index: 2;
}
.intro-link__item.now .intro-link__img p{
    text-shadow: 3px 3px 3px rgba(0, 0, 0, 1);
}
@media (max-width: 768px){
    .sitewidth.switch--afternoon-season{
        padding-left: 0;
        padding-right: 0;
    }
    .intro-link__img p{
        font-size: 8px;
    }
}
/* tab */
.balloon-tab{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    
    width: 100%;
    max-width: 150px;
    height: 45px;
    margin-top: 1.5em;
    background-color: #fff;
    text-align: center;
    
    margin-left: auto;
    margin-right: auto;
    font-size: 1.5em;
}
@media (max-width: 768px){
    .balloon-tab{
        max-width: 50px;
        height: 20px;
    }
}
.balloon-tab{
	border: 1px solid #231815;
}
.intro-link__item.next .balloon-tab{
    border: dashed 1px #231815;
}
.balloon-tab::before{
    content: "";
    position: absolute;
    top: -8px;
    left: 50%;
    width: 14px;
    height: 14px;
    box-sizing: border-box;
    background-color: #fff;
    transform: translateX(-50%) rotate(45deg);
    border-top: solid 1px #231815;
    border-left: solid 1px #231815;
}
.balloon-tab::after{
    content: "";
    position: absolute;
    top: -7px;
    left: 50%;
    width: 12px;
    height: 12px;
    box-sizing: border-box;
    transform: translateX(-50%) rotate(45deg);
}
@media (max-width: 768px){
    .balloon-tab::before{
        top: -4px;
        width: 7px;
        height: 7px;
    }
    .balloon-tab::after{
        top: -3px;
        width: 6px;
        height: 6px;
    }
}

.intro-link__item:not(.now) .intro-link__img{
    cursor: default;
    pointer-events: none;
}
/* Now */
.balloon-tab{
	border-style: solid;
}

/* Next Close */
.next .balloon-tab,
.close .balloon-tab{
    border-style: dashed;
}
.next .balloon-tab::before,
.close .balloon-tab::before{
	border-top-style: dashed;
    border-left-style: dashed;
}

/* Soon */
.soon .balloon-tab{
    visibility: hidden;
}

/* separate */
.ornament{
	max-width: min(220px, 33.3%);
}


/*** season ***/
.season .sitewidth{
	padding-top: calc(7.5em * var(--device-ratio));
}
@media (max-width: 768px){
	.season .sitewidth{
	}
}
.c-ttl--season{
    margin-left: auto;
    margin-right: auto;
    max-width: 694px;
}
.c-ttl--season-days{
    font-size: 2.8em;
    text-align: center;
}
@media (max-width: 768px){
	.c-ttl--season{
        width: 64%;
		min-width: 250px;
	}
}
.c-ttl-sentence-season{
    text-align: center;
    margin-bottom: calc(1.5em * var(--device-ratio));
}
.c-note-season{
    max-width: 60%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    margin-bottom: 2em;
}

/* campaign */
.campaign {
    position: relative;
    margin-top: calc(8.25em * var(--device-ratio));
    border: 1px solid #231815;
    border-radius: 23px;
    padding: 120px 4% 50px 4%;
    box-sizing: border-box;
}
.campaign-title {
    position: absolute;
    left: 50%;
    top: -60px;
    transform: translateX(-50%);
    width: 100%;
    max-width: 560px;
    aspect-ratio: 560 / 120;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.campaign-title::after {
    position: absolute;
    left: 50%;
    top:calc(100% + 10px);
    content: '';
    width: 1px;
    height: 55px;
    background: #231815;
}
@media (max-width: 768px){
    .campaign {
        padding: 40px 4% 20px 4%;
    }
    .campaign-title {
        top: -5%;
        width: 60%;
    }
    .campaign-title::after {
        height: 16px;
        top:calc(100% + 5px);
    }
}

.campaign-message{
    text-align: center;
    font-size: 1.25em;
}
.campaign-message span{
    position: relative;
    font-size: 1.5em;
}
.campaign-message span.num{
    margin-left: .5em;
    margin-right: .5em;
}
.campaign-message span.num::before{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    content: '';
    width: 1.5em;
    height: 1.5em;
    background: #efefef;
    z-index: -1;
    border-radius: 100vmax;
}
.campaign-period {
    font-size: 1.25em;
    text-align: center;
    max-width: 565px;
    background: #efefef;
    border-radius: 6px;
    margin-left: auto;
    margin-right: auto;
}
.campaign-image {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-top: calc(3.125em * var(--device-ratio));
    margin-bottom: calc(3.5em * var(--device-ratio));
}
@media (max-width: 768px){
    .campaign-message{
        font-size: 1em;
    }
}

/* Line */
.campaign-btn {
    width: 100%;
    max-width: 323px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: calc(3em * var(--device-ratio));
}
.campaign-btn a{
    display: block;
    width: 100%;
    border:2px solid #c9caca;
    border-radius: 100vmax;
    text-align: center;
    text-decoration: none;
    font-size: 1.25em;
}
.campaign-btn a span{
    position: relative;
    padding-right: 1em;
}
.campaign-btn a span::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 9px;
  height: 9px;
  margin: auto;
  border-top: 2px solid #c9caca;
  border-right: 2px solid #c9caca;
  transform: rotate(45deg);
  box-sizing: border-box;
}
.campaign-caution {
    font-size: .75em;
    text-align: center;
}
@media (max-width: 768px){
    .campaign-btn {
        max-width: 120px;
    }
    .campaign-btn a{
        font-size: 1em;
    }
    .campaign-btn a span::after {
        width: 5px;
        height: 5px;
    }
}

/*** welcome ***/
.welcome {
    overflow: hidden;
    --welcome-base-width: min(1100px, 80vw);
    --welcome-overhang: max(0px, (100vw - var(--welcome-base-width)) / 2);
    margin-top: 10em;
	margin-bottom: 10em;
}
@media (max-width: 768px){
    .welcome{
        margin-top: 4.28em;
	    margin-bottom: 4.28em;
    }
}

.c-split--welcome {
    display: flex;
    align-items: stretch;
    position: relative;
}
.c-split--welcome .c-stack--sentence {
    padding-top: 1em;
    padding-bottom: 1em;
}
@media (max-width: 768px){
    .c-split--welcome .c-stack--sentence {
        padding-top: .5em;
        padding-bottom: .5em;
    }
}
.c-split--welcome > .c-split__image {
    flex: 0 0 calc(48% + var(--welcome-overhang));
    margin-left: calc(-1 * var(--welcome-overhang));
    overflow: hidden;
    transform: none;

    background-image: url("img/welocome-image-pc.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right center;
}
@media (max-width: 768px){
    .c-split--welcome > .c-split__image {
        background-image: url("img/welocome-image-sp.jpg");
        background-position: center;
    }
}

.c-split--welcome > .c-split__image img {
    display: none;
}

.c-split--welcome > .c-stack--sentence {
    flex: 0 0 48%;
    margin-left: 4%;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}
.c-img--welcome{
}
.c-ttl--welcome1,
.c-ttl--welcome2{
    margin: 0;
    
}
.c-ttl--welcome2{
    text-align: end;
}
.contents-box{
    margin-top: calc(5.6em * var(--device-ratio));
}
.contents-box .c-ttl-content{
    margin: 0;
}
.contents-box .c-ttl-sentence{
    margin: .5em 0;
}
.contents-box .c-ttl-sentence {
    font-size: max(1.25em * var(--device-ratio), 1.25em);
}
@media (max-width: 768px){
    .contents-box .c-ttl-content{
        line-height: 1em;
    }
    .contents-box .c-ttl-sentence {
        font-size: 1em;
    }
}

/*** stand sweet ***/
.standsweet{
	/* color: #004213; */
	margin-top: 10em;
	margin-bottom: 10em;
}
@media (max-width: 768px){
    .standsweet{
	    margin-top: 4.28em;
	    margin-bottom: 4.28em;
    }
}

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

.c-cards--standsweet-ph{
	
}
.c-cards--standsweet-ph > *{
	
}

.js-slider .slick-slide{
	margin-inline: 1em;
}


/* standsweet > slick */
.js-slider .slick-track{
	display: flex !important;
}

.c-img--stand{
    position: relative;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 100vmax;
	
	max-width: 350px;
    border: 4px solid #e3ebc3;
    box-sizing: border-box;
}

/*** viennoiserie ***/
.viennoiserie {
    overflow: hidden;
    --viennoiserie-base-width: min(1100px, 80vw);
    --viennoiserie-overhang: max(0px, (100vw - var(--viennoiserie-base-width)) / 2);
    margin-top: 10em;
	margin-bottom: 10em;
}
@media (max-width: 768px){
    .viennoiserie{
	    margin-top: 4.28em;
	    margin-bottom: 4.28em;
    }
}

.c-split--viennoiserie {
    display: flex;
    align-items: stretch;
    position: relative;
}

.c-split--viennoiserie .c-stack--sentence {
    padding-top: 1em;
    padding-bottom: 1em;
}

@media (max-width: 768px){
    .c-split--viennoiserie .c-stack--sentence {
        padding-top: .5em;
        padding-bottom: .5em;
    }
}

.c-split--viennoiserie > .c-stack--sentence {
    flex: 0 0 48%;
    margin-right: 4%;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

.c-split--viennoiserie > .c-split__image {
    flex: 0 0 calc(48% + var(--viennoiserie-overhang));
    margin-right: calc(-1 * var(--viennoiserie-overhang));
    overflow: hidden;
    transform: none;

    background-image: url("img/viennoiserie-image-pc.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: left center;
}
@media (max-width: 768px){
    .c-split--viennoiserie > .c-split__image {
        background-position: center center;
        background-image: url("img/viennoiserie-image-sp.jpg");
    }
}

.c-split--viennoiserie > .c-split__image img {
    display: none;
}
.c-ttl--viennoiserie{
    margin: 0;
    
}

/*** savory ***/
.savory{
	/* color: #004213; */
	margin-top: 10em;
	margin-bottom: 10em;
}
@media (max-width: 768px){
    .savory{
	    margin-top: 4.28em;
	    margin-bottom: 4.28em;
    }
}

.c-ttl--savory{
	text-align: center;
}
.c-stack.c-stack-savory {
    display: flex;
    justify-content: center;
    
    margin-top: calc(5em * var(--device-ratio)); 
    margin-bottom: calc(5em * var(--device-ratio)); 
}
.c-note.c-note-savory{
    text-align: center;
}
@media (max-width: 768px){
    .c-stack.c-stack-savory {
        margin-top: calc(1.42em * var(--device-ratio)); 
        margin-bottom: calc(1.42em * var(--device-ratio)); 
    }
}

/*** option ***/
.option{
	/* color: #004213; */
	margin-top: 10em;
	margin-bottom: 10em;
}
@media (max-width: 768px){
    .option{
	    margin-top: 4.28em;
	    margin-bottom: 4.28em;
    }
    .option .sitewidth {
        padding-left: 1%;
        padding-right: 1%;
    }
    .option .sitewidth--afternoon {
        max-width: none;
    }
}
.option .campaign {
    position: relative;
    margin-top: calc(8.25em * var(--device-ratio));
    border: 1px solid #231815;
    border-radius: 23px;
    padding: 50px 4% 50px 4%;
    box-sizing: border-box;
}
.option .campaign-title {
    top: -50px;
    max-width: 184.5px;
    aspect-ratio: 184.5 / 72.5;
}
.option .campaign-title::after {
    display: none;
}
@media (max-width: 768px){
    .option .campaign {
        padding: 
            20px 4% 20px 4%;
    }
    .option .campaign-title {
        top: -7%;
        width: 30%;
    }
}

.option-box {
    display: grid;
    grid-template-columns: 30.1% 65.05%;
    column-gap: 4.85%;
}
.c-ttl--option-value{
    margin-top: calc(1.75em * var(--device-ratio));
    margin-bottom: calc(.25em * var(--device-ratio));
    font-size: calc(2.8em * var(--device-ratio));
    text-align: right;
    color: #cfd6a2;
    padding-right: calc(.5em * var(--device-ratio));
}
.option-upgrade-message {
    position: relative;
    margin-top: 0;
    margin-left: 5%;
    padding-left: 1em;
    padding-right: 4%;
    padding-top: 1em;
}
.option-upgrade-message::before {
    position: absolute;
    content: '';
    top: -5px;
    left: 0;
    width: 5px;
    height: calc(100% + 5px);
    background: #e3ebc3;
}
.option-upgrade-message::after {
    position: absolute;
    left: 0;
    bottom: 0;
    content: '';
    width: 96%;
    border-bottom: 3px dotted #e3ebc3;
}
.option-upgrade-message .option-upgrade-message-main{
    margin-top: 0;
    font-size: calc(1.18em * var(--device-ratio));
}
.option-upgrade-message .option-upgrade-link {
    display: flex;
    align-items: center;
}
.option-upgrade-message .option-upgrade-link-message {
    position: relative;
    display: inline-block;
    font-size: calc(1.25em * var(--device-ratio));
    font-weight: bolder;
    padding-right: calc(1.3em * var(--device-ratio));
    margin-right: .3em;
}
.option-upgrade-message .option-upgrade-link-message::after {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    content: '';
    width: calc(1.5em * var(--device-ratio));
    aspect-ratio: 3 / 2;
    background-image: url("img/option-link-arrow.svg");
    background-size: cover;
}
.c-btn--option{
	--btn-radius: 100vmax;
	--btn-bg: #e3ebc3;
	--btn-color: black;
	--btn-font-size: calc(.875em * var(--device-ratio));
	--btn-padding: .75em .5em;
	
    box-sizing: border-box;
    line-height: 1em;
    text-align: center;
    width: 100%;
    max-width: 170px;
}
@media (max-width: 768px){
    .c-btn--option{
        max-width: 70px;
    }
    
}
.option .campaign-caution{
    text-align: end;
    width: calc(65.05% - 2em);
    margin-left: auto;
    padding-right: 4%;
}

/*** drink ***/
.drink{
	margin-top: 10em;
	margin-bottom: 10em;
}
@media (max-width: 768px){
    .drink{
	    margin-top: 4.28em;
	    margin-bottom: 4.28em;
    }
}
.c-ttl--savory {
    margin-bottom: calc(1em * var(--device-ratio)); 
}

.c-box.c-box--drink{
    padding: 0;
    border: none;
}
.c-box--drink{
	--box-border: 1.875em solid rgb(255 255 255 / .5);
	--box-bg: white;
	position: relative;
	z-index: 0;
}
.c-box--drink::after,
.c-box--drink::before{
	content: "";
	position: absolute;
	border-top: 1px solid #004213;
	width: 10em;
	rotate: -45deg;
    z-index: 1;
}
.c-box--drink::before{
	inset: 3em auto auto 3em;
	
	translate: -50% 0;
}
.c-box--drink::after{
	inset: auto 3em 3em auto;
	translate: 50% 0;
}
/*
@media (max-width: 768px){
    .c-box--drink::before{
        inset: 2em auto auto 2em;
    }
    .c-box--drink::after{
        inset: auto 2em 2em auto;
    }
}
*/
.c-box--drink-inner{
    position: relative;
    display: block;
    isolation: isolate;
    padding: 3.75em;
}
.c-box--drink-inner::before,
.c-box--drink-inner::after{
    position: absolute;
    content: '';
    width: calc(100% - 3em);
    height: calc(100% - 3em);
    background: rgba(220,221,221,.4);
    
}
.c-box--drink-inner::before{
    left: 0;
    top: 0;
    z-index: -1;
}
.c-box--drink-inner::after{
    left: 3em;
    top: 3em;
    z-index: 0;
}
/*
@media (max-width: 768px){
    .c-box--drink-inner::before,
    .c-box--drink-inner::after{
        width: calc(100% - 2em);
        height: calc(100% - 2em);
    }
    .c-box--drink-inner::after{
        left: 2em;
        top: 2em;
    }
}
*/

.menu-drink{
    position: relative;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16em, 1fr));
	gap: 1.875rem;
    
    min-height: 500px;
    z-index: 1;
}

.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;
	/* color: #004213; */
}

.c-ttl--drink-category{}


/*** Next season ***/
.next-season{
	margin-top: 10em;
    margin-bottom: 10em;
    padding-top: 6.25em;
	padding-bottom: 6.25em;
    
    background-color: #999;
    background-blend-mode: multiply;
    
    background-image: url("img/next-season-image.jpg");
    background-position: center;
    background-size: cover;
    text-align: center;
    color: #fff;
}
@media (max-width: 768px){
    .next-season{
	    margin-top: 4.28em;
	    margin-bottom: 4.28em;
        padding-top: 3.5em;
	    padding-bottom: 3.5em;
    }
}
.c-ttl-content.c-ttl--next-season{
    font-size: calc(2.8em * var(--device-ratio));
    margin: 0;
}
.c-ttl-section.c-ttl--next-season{
    font-size: calc(5.6em * var(--device-ratio));
    font-family: "Volta W01 Regular", "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", YuMincho, "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    
    margin-top: .6em;
    margin-bottom: .6em;
}
.c-note.c-note-next-season{
    font-size: calc(2em * var(--device-ratio));
}
@media (max-width: 768px){
    .c-note.c-note-next-season{
        font-size: 1em;
    }
}

/*** restaurant ***/
.restaurant{
	margin-top: 10em;
	padding-bottom: 10em;
}
@media (max-width: 768px){
    .restaurant{
	    margin-top: 4.28em;
	    padding-bottom: 4.28em;
    }
}
.restaurant-image{
    margin-bottom: calc(6.25em * var(--device-ratio)); 
}
.c-ttl-section.c-ttl--restaurant{
    text-align: center;
    margin-bottom: calc(1.35em * var(--device-ratio));
}
.c-ttl--restaurant{
	border-color: white;
	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;
    font-size: calc(1.25em * var(--device-ratio));
}

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

.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){
	padding: 1em 2em;
    background: #dcdddd;
}


.c-list--notice{
    width: 100%;
    max-width: calc(700px - 1.5em);
    box-sizing: border-box;
	--marker: "※";
	
	font-size: .75em;
	margin-left: auto;
	margin-right: auto;
}
@media (max-width: 768px){
    .c-tbl--restaurant,
    .c-list--notice{
        width: 80%;
    }
}