@charset "UTF-8";

/*CSS変数共通-------------------------------------*/
:root {
	/* root関数：color */
	--color-pink1: #E56581;
	--color-pink2: #EC8BA0;
	--color-pink3: #F9C6D1;
	--color-pink4: #FFEAEA;
	--color-pink5: #FFEFF4;
	--color-pink6: #FFF9FB;

	--color-gold1: #5d4316;
	--color-gold2: #8B733F;
	--color-gold3: #BB9F62;
	--color-gold4: #E4D791;
	--color-gold5: #F6EEC6;
	--color-gold6: #FFFCED;

	--color-sub: #869095;

	--color-dark: #2F2F2F;
	--color-light: #fff;
	--color-link: #002d7b;
	--color-ssp: #8A814D;

	/* root関数：gradient */

	--grad-pink-bg: linear-gradient(90deg, #FFEAEA 0%, #FFF9FB 25%, #FFF9FB 75%, #FFEAEA 100%);
	--grad-pink-txt-bg: linear-gradient(90deg, #ffeaea00 0%, #FFEAEA 5%, #FFEAEA 95%, #ffeaea00 100%);


	--grad-gold-main1: linear-gradient(135deg, #BB9F62 0%, #F6EEC6 20%, #BB9F62 40%, #E4D791 60%, #F6EEC6 80%, #BB9F62 100%);
	--grad-gold-main2: linear-gradient(135deg, #BB9F62 0%, #F6EEC6 50%, #BB9F62 100%);
	--grad-gold-main3: linear-gradient(90deg, #BB9F62 0%, #F6EEC6 20%, #BB9F62 40%, #E4D791 60%, #F6EEC6 80%, #BB9F62 100%);
	--grad-gold-bg: linear-gradient(90deg, #F6EEC6 0%, #FFFCED 25%, #FFFCED 75%, #F6EEC6 100%);
	--grad-gold-txt-bg: linear-gradient(90deg, #f6eec600 0%, #F6EEC6 5%, #F6EEC6 95%, #f6eec600 100%);
	--grad-gold-ttl: linear-gradient(180deg, #72531C 0%, #E4D791 100%);



	/* root関数：fonts */
	--font-main: "Zen Old Mincho", serif;
	--font-notes: "Local Noto Sans JP", sans-serif;
	--font-gothic: "Local Noto Sans JP", sans-serif;
	--font-en: "Great Vibes", cursive;

	--length-XL: clamp(60px, 38.873px + 5.634vw, 120px);
	--length-L: clamp(50px, 32.394px + 4.695vw, 100px);
	--length-M: clamp(40px, 25.915px + 3.756vw, 80px);
	--length-S: clamp(30px, 19.437px + 2.817vw, 60px);
	--length-XS: clamp(20px, 12.958px + 1.878vw, 40px);
	--length-XXS: clamp(15px, 9.718px + 1.408vw, 30px);
	--length-XXXS: clamp(10px, 6.479px + 0.939vw, 20px);
	--length-XXXXS: clamp(5px, 3.239px + 0.469vw, 10px);


	--fs__5XL: clamp(3.4rem, 3.330rem + 0.3vw, 3.6rem);
	--fs__4XL: clamp(3.2rem, 3.130rem + 0.3vw, 3.4rem);
	--fs__3XL: clamp(3rem, 2.930rem + 0.3vw, 3.2rem);
	--fs__2XL: clamp(2.8rem, 2.730rem + 0.3vw, 3rem);
	--fs__1XL: clamp(2.6rem, 2.530rem + 0.3vw, 2.8rem);
	--fs__XXL: clamp(2.4rem, 2.330rem + 0.3vw, 2.6rem);
	--fs__XL: clamp(2.2rem, 2.130rem + 0.3vw, 2.4rem);
	--fs__LL: clamp(2rem, 1.930rem + 0.3vw, 2.2rem);
	--fs__L: clamp(1.8rem, 1.730rem + 0.3vw, 2rem);
	--fs__ML: clamp(1.7rem, 1.630rem + 0.3vw, 1.9rem);
	--fs__M: clamp(1.6rem, 1.530rem + 0.3vw, 1.8rem);
	--fs__SM: clamp(1.5rem, 1.430rem + 0.3vw, 1.7rem);
	--fs__S: clamp(1.4rem, 1.330rem + 0.3vw, 1.6rem);
	--fs__SS: clamp(1.2rem, 1.130rem + 0.3vw, 1.4rem);
}



/*共通要素*/
body {
	font-family: var(--font-main);
	font-weight: 500;
	font-style: normal;
	line-height: inherit;
	color: var(--color-dark);
	font-size: var(--fs__M);
	background: var(--color-light);
}


/*Loading ここから*/
/* Loading Block */
#loading {
	width: 100%;
	height: 100%;
	position: fixed;
	inset: 0;
	z-index: 999999;
	background-color: var(--color-dark);

	display: grid;
	place-items: center;

	opacity: 1;
	visibility: visible;
	transition: opacity 1s ease, visibility 1s ease;
}

/* Hide Loading Block */
#loading.loaded {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

/* Loading Animation */
/* ===================================
   Loading Animation
   Christmas Glow
=================================== */

.loader {
	position: relative;
	width: 12px;
	height: 12px;
	border-radius: 50%;

	background: radial-gradient(circle at 35% 30%,
			#FFFDF1 0%,
			#F6EEC6 30%,
			#E4D791 75%,
			#B89B52 100%);

	box-shadow:
		0 0 8px rgba(246, 238, 198, .6),
		0 0 18px rgba(228, 215, 145, .4);

	animation: christmas-glow 2.1s ease-in-out infinite;
}

/* 左右の光の粒 */
.loader::before,
.loader::after {
	content: "";
	position: absolute;
	top: 0;
	width: 12px;
	height: 12px;
	border-radius: 50%;

	background: inherit;
	box-shadow: inherit;

	animation: christmas-glow 2.1s ease-in-out infinite;
}

.loader::before {
	left: -28px;
	animation-delay: -.35s;
}

.loader::after {
	left: 28px;
	animation-delay: .35s;
}

/* 光が柔らかく明滅 */
@keyframes christmas-glow {

	0%,
	100% {
		opacity: .25;
		transform: scale(.75);
		filter: brightness(.8);
	}

	45% {
		opacity: 1;
		transform: scale(1.2);
		filter: brightness(1.3);
	}
}

/* 動きを減らす設定 */
@media (prefers-reduced-motion: reduce) {

	.loader,
	.loader::before,
	.loader::after {
		animation: none;
		opacity: .9;
	}
}

/*Loading ここまで*/



#container {
	margin-inline: auto;
}

.fc-pink1 {
	color: var(--color-pink1);
}

.fc-pink2 {
	color: var(--color-pink2);
}

.fc-gold1 {
	color: var(--color-gold1);
}

.fc-gold2 {
	color: var(--color-gold2);
}


.fc-hanten {
	color: var(--color-light);
}

.fc-hanten2 {
	color: var(--color-dark);
}


.ff-en {
	font-family: var(--font-en);
	text-transform: capitalize;
	font-weight: 400;
}

.ff-gothic {
	font-family: var(--font-gothic);
}


a {
	color: var(--color-link);
	text-decoration: none;
	transition: .5s;
}

a:hover {
	color: var(--color-link);
	text-decoration: underline;
}

.notes {
	text-align: justify;
	font-family: var(--font-gothic);
	width: fit-content;
	padding: 0;
	margin: 0 auto;
}

@media (min-width:834px) {
	.notes {
		box-sizing: initial;
		/*padding分を初期化*/
		margin: 30px auto 0 auto;
		max-width: 800px;
	}
}

ul.notes li {
	font-size: var(--fs__SS);
	font-weight: 400;
	margin: 0.5em auto 0 auto;
	margin-left: 1em;
	text-indent: -1em;
	line-height: 1.6;
	text-align: justify;
}

#page-top {
	position: fixed;
	width: 30px;
	bottom: calc(40px + env(safe-area-inset-bottom));
	right: 5px;
	z-index: 1000;

	opacity: 0;
	pointer-events: none;
	transition: opacity .5s ease;
}

#page-top.is-show {
	opacity: 1;
	pointer-events: auto;
}

#page-top img {
	display: block;
	width: 100%;
	height: auto;
	/* filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, .3)); */
	transition: transform .3s ease;
}

@media (min-width: 834px) {
	#page-top {
		width: 40px;
		right: 15px;
	}
}

#page-top a img:hover {
	transform: scale(1.1);
}


.img-box-shadow {
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
	margin-bottom: 8px;
}

.img-filter-shadow {
	filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.3));
}

.txt-shadow {
	text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
}

.img-radius {
	border-radius: clamp(20px, 12.958px + 1.878vw, 40px);
}

.wide-fit {
	width: fit-content;
	margin-inline: auto;
}

.wide-max250,
.wide-max300,
.wide-max400,
.wide-max500,
.wide-max600,
.wide-max700,
.wide-max800,
.wide-max900,
.wide-max1000 {
	margin-inline: auto;
}

.wide-max250 {
	max-width: 250px;
}

.wide-max300 {
	max-width: 300px;
}

.wide-max400 {
	max-width: 400px;
}

.wide-max500 {
	max-width: 500px;
}

.wide-max600 {
	max-width: 600px;
}

.wide-max700 {
	max-width: 700px;
}

.wide-max800 {
	max-width: 800px;
}

.wide-max900 {
	max-width: 900px;
}

.wide-max1000 {
	max-width: 1000px;
}

.no-wrap span {
	white-space: nowrap;
}

.line-marker {
	background: linear-gradient(transparent 65%, rgba(255, 255, 0, 0.8));
}

/* 商品説明汎用テキスト */
.item-name {
	font-weight: 700;
	font-size: clamp(1.8rem, 1.730rem + 0.3vw, 2rem);
	line-height: 1.4;
	margin-block: .5em .25em;
}

.item-name span {
	white-space: nowrap;
}

.item-period {
	font-weight: 700;
	font-size: clamp(1.6rem, 1.530rem + 0.3vw, 1.8rem);
	line-height: 1;
	padding-block: .4em .6em;
}

.item-price {
	font-weight: 700;
	font-size: clamp(1.8rem, 1.730rem + 0.3vw, 2rem);
	line-height: 1.4;
}

.item-caption {
	font-size: clamp(1.4rem, 1.330rem + 0.3vw, 1.6rem);
	line-height: 1.4;
}

.item-ingredients,
.item-ingredients-add {
	font-size: clamp(1.2rem, 1.130rem + 0.3vw, 1.4rem);
	line-height: 1.3;
	font-weight: 400;
	margin-top: .5em;
	word-break: normal;
	overflow-wrap: normal;
	font-family: var(--font-gothic);
}

.item-ingredients span,
.item-ingredients-add span {
	white-space: nowrap;
}

.item-ingredients::before {
	content: "［使用材料］";
	display: block;
	margin-bottom: .2em;
}

.item-ingredients-add::before {
	content: "［別添え］";
	display: block;
	margin-bottom: .2em;
}

.item-size {
	font-size: clamp(1.2rem, 1.165rem + 0.15vw, 1.3rem);
	font-weight: 400;
	line-height: 1.2;
	margin-top: .5em;
	font-family: var(--font-gothic);
	font-feature-settings: normal;
}

.item-size::before {
	content: "［サイズ］";
}

.item-material {
	font-size: clamp(1.2rem, 1.165rem + 0.15vw, 1.3rem);
	font-weight: 400;
	line-height: 1.2;
	margin-top: .5em;
	font-family: var(--font-gothic);
}

.item-material::before {
	content: "［材質］";
}



/*sec共通-------------------------------------*/
.sec-container {
	margin-block: 0;
	margin-inline: auto;
	max-width: 1000px;
	padding: var(--length-L) var(--length-XS);
	text-align: center;
	position: relative;
}


.ttl__category {
	padding: var(--length-XXXS) 0 var(--length-XS);
}

.ttl__category h2 {
	color: var(--color-gold3);
	font-size: clamp(2rem, 1.667rem + 1.481vw, 3rem);
}

.ttl__category h3 {
	font-family: var(--font-en);
	color: var(--color-gold3);
	font-size: clamp(4rem, 2.333rem + 7.407vw, 9rem);
	text-transform: capitalize;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
	line-height: 1.1;
}

.ttl__category h3::before {
	content: "";
	display: block;
	width: clamp(200px, 146.667px + 14.815vw, 360px);
	aspect-ratio: 10 / 3;
	margin: 0 auto .2em;
	background: url(../img/ttl_deco.webp) center / contain no-repeat;
}

.catch__category {
	font-size: clamp(1.4rem, 1.000rem + 1.778vw, 2.6rem);
	color: var(--color-gold3);
	margin-bottom: 1em;
}

.wrapper__pink {
	border: 2px solid transparent;
	border-image: var(--grad-gold-main1);
	border-image-slice: 1;
	box-shadow: 0 0 16px rgba(0, 0, 0, 0.2);
	background-color: var(--color-light);
	background-image: linear-gradient(to bottom,
			#FFEAEA 3%,
			#FFFFFF 100%);
	background-size: 100% 250px;
	background-repeat: no-repeat;
	margin: var(--length-S) auto;
	padding: var(--length-XS) clamp(20px, 6.667px + 3.704vw, 60px);
	width: 100%;
	z-index: 100;
}
@media (min-width:1024px) {
	.wrapper__pink {
	border: 4px solid transparent;
		border-image: var(--grad-gold-main1);
	border-image-slice: 1;
}
}



.ttl_plan_pink {
	border-bottom: 1px solid var(--color-pink2);
	color: var(--color-pink1);
	padding-bottom: 1em;
	margin-bottom: 1em;
}


.ttl_plan_gold {
	border-bottom: 1px solid var(--color-gold2);
	color: var(--color-gold2);
	padding-bottom: .5em;
	margin-bottom: 1em;
}

.ttl_plan_pink h3,
.ttl_plan_gold h3 {
	font-family: var(--font-en);
	text-transform: capitalize;
	font-size: clamp(3rem, 2.067rem + 4.148vw, 5.8rem);
	line-height: 1.3;
}

.ttl_plan_pink h3::before,
.ttl_plan_gold h3::before {
	content: "";
	display: block;
	width: clamp(40px, 33.333px + 1.852vw, 60px);
	aspect-ratio: 1;
	margin: 0 auto .2em;
	background: url(../img/deco_snowflake.svg) center / contain no-repeat;
}

.ttl_plan_pink h2,
.ttl_plan_gold h2 {
	font-size: clamp(1.6rem, 1.400rem + 0.889vw, 2.2rem);
	line-height: 1.6;
}

.plan_condition {
	font-size: clamp(1.4rem, 1.333rem + 0.296vw, 1.6rem);
	text-align: center;
}

.label_price {
	margin: .5em auto 1em;
}

.price_member,
.price_ippan {
	font-weight: 800;
	font-size: clamp(1.6rem, 1.333rem + 1.185vw, 2.4rem);
	vertical-align: middle;
}


.price_member::before,
.price_ippan::before {
	width: 8em;
	font-size: clamp(1.2rem, 1.133rem + 0.296vw, 1.4rem);
	margin-right: .5em;
	font-family: var(--font-gothic);
	display: inline-block;
	font-weight: 400;
	padding: .1em 0;
}

.price_member::before {
	content: '会員さま';
	background: var(--color-ssp);
	color: var(--color-light);
}

.price_ippan::before {
	content: '一般のお客さま';
	background: var(--color-pink3);
	color: var(--color-dark);
}

.plan_discription {
	font-size: var(--fs__SM);
	text-align: left;
}

.wrapper__pink .plan_period,
.wrapper_restaurant_menu .plan_period {
	padding: .2em 1em;
	font-size: clamp(1.4rem, 1.267rem + 0.593vw, 1.8rem);
	font-weight: 700;
	margin-block: var(--length-XXS);
}

.wrapper__pink .plan_period {
	background: var(--grad-pink-txt-bg);
	color: var(--color-pink1);
}

.wrapper_restaurant_menu .plan_period {
	background: var(--grad-gold-txt-bg);
	color: var(--color-gold1);
}

.plan_period p {
	text-align: center;
	width: fit-content;
	margin-inline: auto;
}


@media (min-width:768px) {

	.wrapper__pink .plan_period,
	.wrapper_restaurant_menu .plan_period {
		padding: .2em 2em;
	}

	.plan_period p {
		text-align: left;
		width: fit-content;
		margin-inline: auto;
	}
}


.wrapper__btn {
	margin: 1em auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 20px;
}

@media (min-width:768px) {
	.wrapper__btn {
		flex-direction: row;
		gap: 40px;
	}
}

.wrapper__btn img {
	width: 60vw;
	max-width: 280px;
}


.inner_plan {
	display: flex;
	flex-direction: column;
	width: 100%;
	gap: 10px;
	max-width: 600px;
	margin: var(--length-XXS) auto;
}

.inner_plan_r,
.inner_plan_l {
	display: flex;
	flex-direction: column;
	gap: 10px;
	justify-content: center;
	align-items: flex-start;
	align-content: flex-start;
	margin: var(--length-XS) auto var(--length-S);
	width: 100%;
}

@media (min-width:768px) {
	.inner_plan {
		gap: 20px;

	}

	.inner_plan_r {
		flex-direction: row-reverse;
		gap: 20px;
		margin: var(--length-S) auto;
	}

	.inner_plan_l {
		flex-direction: row;
		gap: 20px;
		margin: var(--length-S) auto;
	}

	.inner_plan_r>figure,
	.inner_plan_l>figure {
		flex: 0 0 52%;
	}

	/* テキストエリア */
	.inner_plan_r>p,
	.inner_plan_l>p {
		flex: 1;
		min-width: 0;
	}

	.inner_plan_r img,
	.inner_plan_l img {
		display: block;
		width: 100%;
		height: auto;
	}
}

.option_notice {
	/* font-family: var(--font-gothic); */
	font-size: clamp(1.4rem, 1.330rem + 0.3vw, 1.6rem);
	text-align: left;
	margin: .5em auto;
	/* font-weight: 600; */
	/* color: var(--color-pink1); */
}

@media (min-width:768px) {
	.option_notice {
		text-align: center;
	}
}



/*sec-kv-------------------------------------*/
#sec-kv {
	background-image: url(../img/ornament.webp), url("../img/head_snow.webp"), linear-gradient(-180deg, #E4D791 20%, #F6EEC6 70%, #F6EEC6 100%);
	background-repeat: repeat-x, no-repeat, repeat-x;
	background-size: 150%, 180%, 100%;
	background-position: center top, center bottom, left bottom;
	min-height: 100svh;
}

@media (min-width:834px) {
	#sec-kv {
		background-size: 100%, contain, 100%;
		padding-bottom: var(--length-XL);
	}
}


/*h1タイトルここから------------------------------------*/
/* ===================================
   メインタイトル：SP・タブレット
=================================== */

h1#ttl__main {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	justify-items: center;
	align-items: center;
	row-gap: 0;
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
	padding: var(--length-XS) var(--length-XXS);
	overflow: visible;
}

/* SVG共通 */
#ttl__main .ttl-word {
	display: block;
	position: relative;
	min-width: 0;
	overflow: visible;
}

#ttl__main .ttl-word img {
	display: block;
	width: 100%;
	height: auto;
	filter:
		drop-shadow(0 0 2px rgba(255, 255, 255, 1)) drop-shadow(0 0 6px rgba(255, 255, 255, .9)) drop-shadow(0 0 8px rgba(255, 255, 255, .7));
}


/* Heartfelt */
#ttl__main .ttl-heartfelt {
	width: 90%;
	max-width: 620px;
	margin-right: 8%;
}

/* Christmas */
#ttl__main .ttl-christmas {
	width: 81%;
	max-width: 558px;
	margin-left: 8%;
}

/* SVG画像 */
#ttl__main .ttl-word img {
	display: block;
	width: 100%;
	height: auto;

	/* 左から右へ柔らかく表示するマスク */
	-webkit-mask-image: linear-gradient(to right,
			#000 0%,
			#000 40%,
			transparent 60%,
			transparent 100%);
	mask-image: linear-gradient(to right,
			#000 0%,
			#000 40%,
			transparent 60%,
			transparent 100%);

	-webkit-mask-size: 250% 100%;
	mask-size: 250% 100%;

	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;

	-webkit-mask-position: 100% 0;
	mask-position: 100% 0;

	opacity: 0;
}

/* ===================================
   アニメーション
=================================== */

/* Heartfelt：0.3秒後に開始 */
#ttl__main .ttl-heartfelt.is-visible img {
	animation: ttl-mask-reveal 1.8s linear 0s both;
}

/* Christmas：Heartfelt終了直後に開始 */
#ttl__main .ttl-christmas.is-visible img {
	animation: ttl-mask-reveal 1.8s linear 1.2s both;
}

/* 左から右へ柔らかく表示 */
@keyframes ttl-mask-reveal {
	0% {
		-webkit-mask-position: 100% 0;
		mask-position: 100% 0;
		opacity: 0;
	}

	15% {
		opacity: 1;
	}

	100% {
		-webkit-mask-position: 0% 0;
		mask-position: 0% 0;
		opacity: 1;
	}
}

/* タブレット：640px〜1099px */
@media (min-width: 640px) and (max-width: 1099px) {
	#ttl__main .ttl-heartfelt {
		width: 60%;
	}

	#ttl__main .ttl-christmas {
		width: 54%;
	}
}


/* ===================================
   PC：1100px以上
=================================== */

@media (min-width: 1100px) {
	h1#ttl__main {
		grid-template-columns: minmax(0, 440fr) minmax(0, 396fr);
		column-gap: 0;
		width: 100%;
		max-width: 1000px;
	}

	#ttl__main .ttl-heartfelt,
	#ttl__main .ttl-christmas {
		width: 100%;
		max-width: none;
		margin: 0;
	}
}

/* ===================================
   動きを減らす設定
=================================== */

@media (prefers-reduced-motion: reduce) {
	#ttl__main .ttl-word img {
		-webkit-mask-image: none;
		mask-image: none;
		opacity: 1;
		animation: none !important;
	}
}

/*h1タイトルここまで------------------------------------*/



.ttl__kv {
	font-weight: 500;
	color: var(--color-gold2);
	letter-spacing: .2rem;
	font-size: clamp(2.4rem, 2.067rem + 1.481vw, 3.4rem);
	line-height: 1.6;
	text-shadow: 0 0 8px rgba(255, 255, 255, .7);
}

/*sec-index------------------------------------*/
#sec-index {
	background: var(--color-light);
}


#sec-index .sec-container {
	padding: var(--length-XXS) var(--length-XS);
}

.nav__index {
	display: flex;
	flex-direction: column;
	font-family: var(--font-en);
	font-size: clamp(2.8rem, 2.600rem + 0.889vw, 3.4rem);
	text-transform: capitalize;
}


#sec-index a {
	text-decoration: none;
	background: var(--grad-gold-ttl);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	border-top: 1px solid var(--color-gold3);
	line-height: 1;
	padding: .5em 0;
	transition: .3s;
}

#sec-index a:last-child {
	border-bottom: 1px solid var(--color-gold3);
}

@media (min-width:640px) {
	.nav__index {
		flex-direction: row;
		justify-content: center;
	}

	#sec-index a {
		border-top: none;
		border-left: 1px solid var(--color-gold3);
		padding: .2em 0;
		min-width: 220px;
	}

	#sec-index a:last-child {
		border-bottom: none;
		border-right: 1px solid var(--color-gold3);
	}
}


#sec-index a:hover {
	text-decoration: none;
	opacity: 0.7;
}

/*sec-stay-------------------------------------*/
#sec-stay,
#sec-decoration {
	background: linear-gradient(-180deg, #FFFFFF 0%, #FFF9FB 10%, #FFEAEA 60%);
}

.inner_main_plan {
	padding: 0 clamp(0px, -40.000px + 11.111vw, 120px);
	margin: 0 auto;
	z-index: 100;
}

.inner_specials {
	border: 2px solid transparent;
	border-image: var(--grad-gold-main1);
	border-image-slice: 1;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
	background-color: var(--color-light);
	margin: var(--length-L) auto var(--length-S);
	padding: var(--length-S) clamp(15px, 0.000px + 4.167vw, 60px) var(--length-XS);
	position: relative;

}

#special1::before,
#special2::before {
	content: "";
	display: block;
	width: clamp(260px, 226.667px + 9.259vw, 360px);
	aspect-ratio: 10 / 3;
	margin: 0 auto .2em;
	position: absolute;
	top: 0px;
	left: 50%;
	transform: translate(-50%, -50%);
}

#special1::before {
	background: url(../img/heart_num01.svg) center / contain no-repeat;
}

#special2::before {
	background: url(../img/heart_num02.svg) center / contain no-repeat;
}

/*sec-restaurant-------------------------------------*/
#sec-restaurant {
	background: var(--grad-gold-bg);
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	border-image: var(--grad-gold-main1);
	border-image-slice: 1;
}

.wrapper__restaurant {
	margin: var(--length-M) auto 0;
	box-shadow: 0 0 16px rgba(0, 0, 0, 0.2);
	border: 2px solid transparent;
	border-image: var(--grad-gold-main1);
	border-image-slice: 1;
}
@media (min-width:1024px) {
.wrapper__restaurant {
	border: 4px solid transparent;
		border-image: var(--grad-gold-main1);
	border-image-slice: 1;
}
}



.header__restaurant {
	background-image:
		linear-gradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, .7)),
		var(--bg-image);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-blend-mode: multiply;
	min-height: 300px;
	padding: var(--length-M) var(--length-XXS);
	vertical-align: middle;
}

#bsx {
	--bg-image: url(../img/header_beauxsejours.webp);
}

#biona {
	--bg-image: url(../img/header_biona.webp);
}

#portnio {
	--bg-image: url(../img/header_portnio.webp);
}

.header__restaurant img {
	width: 60vw;
	max-width: 420px;
}

.name_restaurant {
	font-size: clamp(2rem, 1.930rem + 0.3vw, 2.2rem);
	font-weight: 700;
	color: var(--color-light);
	line-height: 1.4;
	margin-block: 1em;
}

.name_restaurant span {
	display: block;
	font-size: 70%;
}

.intro_restaurant {
	color: var(--color-light);
	font-size: clamp(1.6rem, 1.530rem + 0.3vw, 1.8rem);
	text-align: left;
}

.intro_restaurant span {
	display: block;
	text-align: center;
}


@media (min-width:640px) {
	.intro_restaurant {
		text-align: center;
	}
}



.wrapper_restaurant_menu {
	padding: var(--length-S) clamp(20px, 6.667px + 3.704vw, 60px);
	border-top: 3px solid transparent;
	border-image: var(--grad-gold-main3);
	border-image-slice: 1;
	background: rgba(255, 255, 255, .9);
	z-index: 100;
}
@media (min-width:768px) {
	.wrapper_restaurant_menu {
	border-top: 4px solid transparent;
	border-image: var(--grad-gold-main3);
	border-image-slice: 1;
}
}

/* アウトロ */
#sec-outro {
	background: linear-gradient(180deg, #BB9F62 0%, #E4D791 100%);
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	border-image: var(--grad-gold-main1);
	border-image-slice: 1;
	color: var(--color-light);
}

#sec-outro .sec-container {
	padding: var(--length-L) 0;
}

.hotel-logo img {
	width: min(65vw, 380px);
	margin: 1em 0;
}

.sns-container {
	display: flex;
	justify-content: center;
	gap: 30px;
}

.sns-container img {
	width: min(10vw, 55px);
}

/* sec-spgr-------------------------------------*/
#sec-spgr {
	background-color: var(--color-light);
	font-family: var(--font-gothic);
	font-weight: 400;
	font-feature-settings: normal;
}

#sec-spgr .sec-container {
	padding: var(--length-L) var(--length-XXS);
}

#sec-spgr h2 {
	font-size: var(--fs__L);
	border-bottom: 1px solid var(--color-dark);
	padding-bottom: var(--length-XXXS);
	margin-bottom: var(--length-XXXS);
}

.inner_spgr_info {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(20px, 13.333px + 1.852vw, 40px);
	margin: var(--length-XXS) auto;
}

.inner_spgr_info p {
	text-align: left;
}

.inner_spgr_info p>span {
	margin-bottom: 1.5em;
	display: block;
	margin-left: 1em;
	text-indent: -1em;
}


@media (min-width:768px) {
	.inner_spgr_info {
		grid-template-columns: repeat(2, 1fr);
	}

	.inner_spgr_info img {
		max-width: 500px;
	}
}

a.btn__spgr {
	background: var(--color-light);
	display: flex;
	align-items: center;
	gap: clamp(10px, 2.5vw, 16px);
	width: min(80vw, 360px);
	padding: clamp(15px, 10.000px + 1.389vw, 30px) clamp(10px, 6.667px + 0.926vw, 20px);
	font-size: var(--fs__S);
	line-height: 1.2;
	position: relative;
	cursor: pointer;
	text-decoration: none;
	margin-block: 2em 1em;
	margin-inline: auto;
	text-align: left;
}

a.btn__spgr {
	color: var(--color-dark);
	border: 1px solid var(--color-dark);
}


a:hover.btn__spgr {
	text-decoration: none;
	color: var(--color-light);
	background: var(--color-dark);
}


/* 右矢印 */
a.btn__spgr::after,
a:hover.btn__spgr::after {
	content: "";
	width: clamp(15px, 10.000px + 1.389vw, 30px);
	;
	height: clamp(15px, 10.000px + 1.389vw, 30px);
	;
	flex-shrink: 0;
	margin-left: auto;
}

a.btn__spgr::after {
	background: url("../img/ico_external_link_bk.svg") no-repeat center/contain;
}

a:hover.btn__spgr::after {
	background: url("../img/ico_external_link_wh.svg") no-repeat center/contain;
}


.copyright {
	text-align: center;
	font-size: var(--fs__SS);
	margin-top: 3em;
}


/* ナビ-------------------------------------*/
.navmenu {
	position: relative;
}

/* =========================
   ハンバーガーボタン本体
========================= */
.menu {
	position: fixed;
	top: 0;
	right: 0;
	width: 48px;
	/* ボタン全体の直径*/
	height: 48px;
	/* ボタン全体の直径*/
	z-index: 1001;
	cursor: pointer;
	display: inline-block;
	border-left: 1px solid var(--color-gold3);
	border-bottom: 1px solid var(--color-gold3);
	background: #ffffffbe;
	box-sizing: border-box;
}



/* =========================
   3本線
========================= */
.menu__line {
	position: absolute;
	left: 50%;

	width: 24px;
	/* 線の長さ */
	height: 3px;
	/* 線の太さ */

	background: var(--color-gold3);
	transform: translateX(-50%);
	transition: transform .3s ease, opacity .3s ease, top .3s ease;
}

/* =========================
   線の位置（間隔）
========================= */
.menu__line--top {
	top: 13px;
	/* 上の線の位置（ボタンサイズ変えたら要調整） */
}

.menu__line--center {
	top: 21px;
	/* 中央の線の位置（ボタンサイズ変えたら要調整） */
}

.menu__line--bottom {
	top: 29px;
	/* 下の線の位置（ボタンサイズ変えたら要調整） */
}

/* =========================
   × 変形時
========================= */
.is-open .menu__line--top {
	top: 21px;
	/* 中央位置に揃える（centerと同じ値にする） */
	transform: translateX(-50%) rotate(45deg);
}

.is-open .menu__line--center {
	opacity: 0;
}

.is-open .menu__line--bottom {
	top: 21px;
	/* 中央位置に揃える（centerと同じ値にする） */
	transform: translateX(-50%) rotate(-45deg);
}



/* ==============
  overlay nav
============== */
.gnav {
	position: fixed;
	inset: 0;
	z-index: 1000;
	background: #000000c8;

	/* 開閉 */
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .2s ease, visibility 0s linear .2s;

	/* スクロールが必要なとき */
	overflow: auto;
}

.gnav.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity .3s ease;
}

/* 中身（クリックで閉じない領域） */
.gnav__wrap {
	min-height: 100%;
	padding: 80px 24px 40px;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
}

.gnav__menu {
	width: min(90vw, 640px);
	list-style: none;
	padding: 0;
	margin: 0;
}

.gnav__menu__item {
	margin: 0;
}

/* リンク見た目 */
.gnav__menu__item a {
	display: block;
	padding: 10px;
	background: linear-gradient(-180deg, #F6EEC6 50%, #FFF 80%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	/* color: var(--color-light); */
	text-decoration: none;
	font-size: clamp(2.8rem, 2.448rem + 1.502vw, 3.8rem);
	line-height: 1.3;
	border-bottom: 1px solid var(--color-gold6);
}

.gnav__menu__item.menu__en a {
	text-transform: capitalize;
	font-family: var(--font-en);
	font-weight: 400;
}

.gnav__menu__item a:hover {
	opacity: .6;
}

/* サブ*/
.gnav__menu__item.menu__sub a {
	padding-left: 1.5em;
	font-size: clamp(1.6rem, 1.459rem + 0.601vw, 2rem);
}


/* ==============
  上から順にふわっと出す
============== */
.gnav__menu__item {
	opacity: 0;
	transform: translateY(-10px);
}

.gnav.is-open .gnav__menu__item {
	animation: gnavItem .1s ease forwards;
}

@keyframes gnavItem {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* 開いたとき順番に出すアニメーション */
.gnav.is-open .gnav__menu__item:nth-child(1) {
	animation-delay: .04s;
}

.gnav.is-open .gnav__menu__item:nth-child(2) {
	animation-delay: .08s;
}

.gnav.is-open .gnav__menu__item:nth-child(3) {
	animation-delay: .12s;
}

.gnav.is-open .gnav__menu__item:nth-child(4) {
	animation-delay: .16s;
}

.gnav.is-open .gnav__menu__item:nth-child(5) {
	animation-delay: .20s;
}

.gnav.is-open .gnav__menu__item:nth-child(6) {
	animation-delay: .24s;
}

.gnav.is-open .gnav__menu__item:nth-child(7) {
	animation-delay: .28s;
}

.gnav.is-open .gnav__menu__item:nth-child(8) {
	animation-delay: .32s;
}

.gnav.is-open .gnav__menu__item:nth-child(9) {
	animation-delay: .36s;
}

.gnav.is-open .gnav__menu__item:nth-child(10) {
	animation-delay: .38s;
}

/* ==============
  body lock (open時スクロールさせない)
============== */
body.is-menu-open {
	overflow: hidden;
}

/* 空エリアクリックを拾う透明レイヤー */
.gnav__bg {
	position: absolute;
	inset: 0;
}


/*空エリアクリックで遷移しないようの保険*/
html.is-no-smooth {
	scroll-behavior: auto !important;
}

/* 雪降らせる */
#particles {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	/* 背景扱いにしたいなら低めに調整 */
	pointer-events: none;
	/* クリック操作を邪魔しない */
}