@charset "UTF-8";

/*root関数-------------------------------------*/
:root {
	/* root関数：color */
	--color-main1: #F8E0D8;
	--color-main2: #85473D;
	--color-main3: #d5d2c6;
	--color-main4: #D1E2E2;
	--color-main5: #588787;
	--color-dark: #433D2F;
	--color-light: #FFFFFF;
	--color-link: #C74B21;
	--color-prince: #8E8248;

	--gradient-gold: linear-gradient(90deg, rgba(210, 192, 114, 1), rgba(240, 234, 208, 1) 50%, rgba(210, 192, 114, 1));
	--gradient-white: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.6) 98%, rgba(255, 255, 255, 0));

	/* root関数：fonts */
	--font-main: "Shippori Mincho", serif;
	--font-gothic: "Local Noto Sans JP", "Noto Sans JP", sans-serif;
	--font-en: "Dancing Script", 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(10px, 6.479px + 0.939vw, 20px);

	--fs-SS: clamp(1.2rem, 1.059rem + 0.601vw, 1.6rem);
	--fs-S: clamp(1.4rem, 1.259rem + 0.601vw, 1.8rem);
	--fs-M: clamp(1.6rem, 1.459rem + 0.601vw, 2rem);
	--fs-L: clamp(1.8rem, 1.518rem + 1.202vw, 2.6rem);
	--fs-LL: clamp(2rem, 1.648rem + 1.502vw, 3rem);
}


/*共通要素*/
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: 100vw;
	height: 100vh;
	transition: all 1s;
	background-color: var(--color-dark);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999999;
	display: grid;
	place-content: center;
	place-items: center;
}

/* Hide Loading Block  */
.loaded {
	opacity: 0;
	visibility: hidden;
}

/* loading anime  クラスはloaderで*/
.loader {
  width: 45px;
  aspect-ratio: 1;
  --c: no-repeat linear-gradient(#85473D 0 0);
  background: 
    var(--c) 0%   50%,
    var(--c) 50%  50%,
    var(--c) 100% 50%;
  background-size: 20% 100%;
  animation: l1 1s infinite linear;
}
@keyframes l1 {
  0%  {background-size: 20% 100%,20% 100%,20% 100%}
  33% {background-size: 20% 10% ,20% 100%,20% 100%}
  50% {background-size: 20% 100%,20% 10% ,20% 100%}
  66% {background-size: 20% 100%,20% 100%,20% 10% }
  100%{background-size: 20% 100%,20% 100%,20% 100%}
}
/*Loading ここまで*/




#container {
	margin-inline: auto;
}


.fc-key1 {
	color: var(--color-main2);
}

.fc-key2 {
	color: var(--color-main5);
}

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

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

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

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

a:hover {
	color: var(--color-link);
	text-decoration: underline;
	/* opacity: .7; */
}

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

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

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 img {
	position: fixed;
	width: 25px;
	bottom: calc(40px + env(safe-area-inset-bottom));
	right: 10px;
	z-index: 99999;
	transition: .3s;
}

@media (min-width:834px) {
	#page-top img {
		width: 30px;
		/* bottom: calc(0px + env(safe-area-inset-bottom)); */
		right: 20px;
	}
}

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



/*sec共通-------------------------------------*/
.sec-container {
	margin: 0 auto;
	max-width: 1000px;
	padding: 0;
	text-align: center;
	position: relative;
}

@media (min-width:834px) {
	.sec-container {
		padding: 0;
	}
}

.ttl-category {
	font-family: var(--font-en);
	font-size: clamp(5rem, 8vw, 9rem);
	text-transform: capitalize;
	text-shadow: 2px 2px rgba(133, 71, 61, .6);
	color: var(--color-light);
	-webkit-text-stroke: 4px var(--color-dark);
	text-stroke: 1px var(--color-dark);
	paint-order: stroke;
}

/* sec-kv-------------------------------------*/
#sec-kv {
	background: var(--color-main1);
	height: 100svh;
}

#sec-kv h2 {
	writing-mode: vertical-rl;
	text-align: left;
	font-size: clamp(2.4rem, 1.977rem + 1.803vw, 3.6rem);
	font-weight: 600;
	position: absolute;
	top: 1em;
	left: calc(100vw / 16);
	line-height: 1.2;
	z-index: 5;
}

#sec-kv h2 span {
	display: inline-flex;
	background: var(--color-light);
	padding: .3em .1em .2em 0;
	margin: .2em;
	letter-spacing: .3rem;
}

#sec-kv .sec-container {
	position: relative;
	height: 100svh;
}

.kv-frame {
	position: relative;
	height: 100svh;
	overflow: hidden;
	margin: 0 calc(50% - 50vw);

}

.kv-01,
.kv-02,
.kv-03,
.kv-04 {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	opacity: 0;
	will-change: opacity, transform;
}

.kv-01, .kv-02, .kv-03,.kv-04  {
	animation: slide-animation 24s linear infinite 0s;
}

.kv-01 {
	background-image: url('../img/img_kv1.webp');
}

.kv-02 {
	background-image: url('../img/img_kv2.webp');
	animation-delay: 6s;
}

.kv-03 {
	background-image: url('../img/img_kv3.webp');
	animation-delay: 12s;
}

.kv-04 {
	background-image: url('../img/img_kv4.webp');
	animation-delay: 18s;
}


@keyframes slide-animation {
    0% {
        opacity: 0;
        animation-timing-function: ease-in;
    }

    8% {
        opacity: 1;
        animation-timing-function: ease-out;
    }

    20% {
        opacity: 1;
        transform: scale(1.1);
    }

    40%,
    100% {
        opacity: 0;
        transform: scale(1.2);
    }
}

/* sec-intro-------------------------------------*/
#sec-intro {
	background: var(--color-main1);
	background-image: url("../img/bg_grunge.webp");
	background-blend-mode: color-burn;
	background-repeat: repeat;
}

#sec-intro .sec-container {
	padding: var(--length-XL) var(--length-XXS);
}

.ttl-intro {
	display: grid;
	grid-template-columns: clamp(60px, 38.873px + 5.634vw, 120px) 1fr clamp(60px, 38.873px + 5.634vw, 120px);
	/* justify-content: stretch; */
	align-items: center;
	max-width: 1000px;
	gap: var(--length-XXS);
	width: fit-content;
	margin-inline: auto;
}

.ttl-intro div:first-of-type {
	transform: scale(-1, 1);
}

#sec-intro h2 {
	font-size: var(--fs-LL);
	line-height: 1.4;
	letter-spacing: 0.2rem;
}

@media (min-width:834px) {
	#sec-intro h2 {
		letter-spacing: 0.5rem;
	}
}

/* sec-scene-------------------------------------*/
#sec-scene {
	background: var(--color-main1);
}

.scene-container {
	display: grid;
	gap: 14px;
	margin: 0 calc(50% - 50vw);
}

@media (min-width:834px){
	.scene-container {
	gap: 10px;
}
}

.scene-inner {
	background: var(--color-main4);
	display: grid;
}

.scene-img {
	height: 100%;
}

.scene-img img {
	height: 100%;
	object-fit: cover;
	/* display: block; */
}

.scene-description {
	padding: 1em 1.5em;
	text-align: left;
}

.scene-num {
	font-family: var(--font-en);
	font-size: clamp(3.6rem, 3.037rem + 2.404vw, 5.2rem);
	text-align: left;
	text-transform: capitalize;
	line-height: 1.1;
	font-weight: 400;
}

.scene-name {
	font-size: var(--fs-L);
	font-weight: 700;
	text-indent: -.5em;
	margin-bottom: .25em;
}

.scene-recommend {
	display: flex;
	flex-flow: column wrap;
	gap: .5em;
	margin: 1em 0;
}

.ttl-scene-recommend {
	position: relative;
	display: flex;
	align-items: center;
	height: 30px;
	line-height: 1;
	padding: 0 1rem;
	background-color: var(--color-main5);
	color: var(--color-light);
	font-size: 13px;
	text-align: center;
	width: fit-content;
	font-family: var(--font-gothic);
	letter-spacing: .2rem;
}

.ttl-scene-recommend::after {
	position: absolute;
	top: 0;
	width: 0px;
	height: 0px;
	border-color: var(--color-main5) transparent;
	border-style: solid;
	content: '';
}

.ttl-scene-recommend::after {
	right: -12px;
	border-width: 16px 13px 15px 0px;
}


a.link-stay,
a.link-food {
	display: flex;
	font-size: var(--fs-M);
	transition: .3s ease;
	width: fit-content;
	padding-top: .5em;
	color: var(--color-main2);
	font-weight: 700;
	text-decoration: none;
}

a.link-stay::before,
a.link-food::before {
	font-size: var(--fs-M);
	font-family: "Material Icons Outlined";
	margin: 0 .3em 0 0;
	font-weight: 400;
	text-decoration: none;
}

a.link-stay::before {
	content: "\ea45";

}

a.link-food::before {
	content: "\e56c";

}

a.link-stay:hover,
a.link-food:hover {
	text-decoration: none;
	transform: translateX(5px);
}


@media (min-width:834px) {
	.scene-inner {
		grid-template-columns: repeat(2, 1fr);
		align-items: center;
		overflow: hidden;
	}

	/* 偶数番目左右を入れ替え */
	.scene-inner:nth-of-type(even) .scene-img {
		order: 2;
	}

	.scene-inner:nth-of-type(even) .scene-description {
		order: 1;
	}

	.scene-description {
		padding: 1em 2em;
	}
}

/* sec-stay-------------------------------------*/
#sec-stay {
	background: var(--color-main1);
	background-image: url("../img/bg_grunge.webp");
	background-blend-mode: color-burn;
	background-repeat: repeat;
	border-top: 8px solid transparent;
	border-image: var(--gradient-gold);
	border-image-slice: 1;
	/* ← これが必須 */
}

#sec-stay .sec-container {
	padding: var(--length-XL) var(--length-XS);
}

.txt-lead {
	text-align: justify;
}

@media screen and (min-width:640px) {
	.txt-lead {
		text-align: center;
	}
}

.ico-category img {
	width: min(40vw, 140px);
	height: auto;
	margin-bottom: 1em;
}


.ph-grid {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	gap: 1em;
	margin: 2em 0;
}

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

.btn-container {
	display: flex;
	flex-flow: column wrap;
}

@media (min-width:834px) {
	.btn-container {
		flex-flow: row wrap;
	}
}

.plan-period {
	font-weight: 700;
	text-align: center;
	margin: 1em 0;
}

.plan-period span {
	display: block;
}

.plan-description {
	font-size: var(--fs-S);
	text-align: justify;
	max-width: 640px;
	margin: 0 auto;
	width: fit-content;
}

.plan-price {
	font-size: var(--fs-LL);
	font-weight: 800;
	text-align: center;
	line-height: 1.4;
	margin: 1em auto;
}

.plan-price span {
	font-size: var(--fs-SS);
	font-weight: 500;
	display: block;
}

.plan-features-ttl {
	display: block;
	background: var(--color-dark);
	font-size: var(--fs-S);
	font-weight: 700;
	padding: .2em 2em;
	border-radius: 8px;
	margin: 1em 0 .5em;
	color: var(--color-light);
}

@media (min-width:640px) {
	.plan-features-ttl {
		display: inline-block;
	}
}

.menu-features-ttl {
	display: block;
	background: var(--color-dark);
	font-size: var(--fs-S);
	font-weight: 700;
	padding: .2em 2em;
	border-radius: 9999px;
	margin: 1em 0 .5em;
	color: var(--color-light);
}

@media (min-width:640px) {
	.menu-features-ttl {
		display: inline-block;
	}
}

.plan-features {
	max-width: 800px;
	width: fit-content;
	margin: 0 auto 2em;
}

.plan-features li {
	margin: .75em auto 0 auto;
	margin-left: 1em;
	text-indent: -1em;
	line-height: 1.6;
	text-align: justify;
	list-style-type: disc;
	list-style-position: inside;
}

/* 共通ボタン */
.btn-stayplan,
.btn-foodplan {
	background: var(--color-main5);
	color: var(--color-light);
	border-radius: 9999px;
	display: flex;
	align-items: center;
	gap: clamp(10px, 2.5vw, 16px);
	width: min(82vw, 420px);
	padding: clamp(14px, 3vw, 20px) clamp(22px, 5vw, 32px);
	font-size: var(--fs-S);
	font-weight: 700;
	line-height: 1.2;
	position: relative;
	cursor: pointer;
	text-decoration: none;
	margin-block: 2em 1em;
	margin-inline: auto;
	text-align: left;
}

.btn-general1 {
	background: var(--color-main2);
	color: var(--color-light);
	border-radius: 9999px;
	display: flex;
	align-items: center;
	gap: clamp(10px, 2.5vw, 16px);
	width: min(82vw, 420px);
	padding: clamp(14px, 3vw, 20px) clamp(22px, 5vw, 32px);
	font-size: var(--fs-S);
	font-weight: 700;
	line-height: 1.2;
	position: relative;
	cursor: pointer;
	text-decoration: none;
	margin-block: 2em 1em;
	margin-inline: auto;
	text-align: left;
}

.btn-general2,
.btn-general3 {
	background: var(--color-light);
	border-radius: 9999px;
	display: flex;
	align-items: center;
	gap: clamp(10px, 2.5vw, 16px);
	width: min(82vw, 420px);
	padding: clamp(14px, 3vw, 20px) clamp(22px, 5vw, 32px);
	font-size: var(--fs-S);
	font-weight: 700;
	line-height: 1.2;
	position: relative;
	cursor: pointer;
	text-decoration: none;
	margin-block: 2em 1em;
	margin-inline: auto;
	text-align: left;
}

.btn-general2 {
	color: var(--color-dark);
	border: 1px solid var(--color-dark);
}

.btn-general3 {
	color: var(--color-link);
	border: 1px solid var(--color-link);
}


/* 左アイコン */
.btn-stayplan::before,
.btn-foodplan::before {
	content: "";
	width: clamp(30px, 6vw, 48px);
	height: clamp(30px, 6vw, 48px);
	flex-shrink: 0;
}

/* 右矢印 */
.btn-stayplan::after,
.btn-foodplan::after,
.btn-general1::after {
	content: "";
	width: clamp(30px, 6vw, 48px);
	height: clamp(30px, 6vw, 48px);
	background: url("../img/btn_arrow_wh.svg") no-repeat center/contain;
	flex-shrink: 0;
	margin-left: auto;
}

.btn-stayplan:hover,
.btn-foodplan:hover,
.btn-general1:hover {
	text-decoration: none;
	color: var(--color-light);
	transform: scale(1.02);
}

.btn-general2::after,
.btn-general3::after {
	content: "";
	width: clamp(30px, 6vw, 48px);
	height: clamp(30px, 6vw, 48px);
	flex-shrink: 0;
	margin-left: auto;
}

.btn-general2::after {
	background: url("../img/btn_arrow_dark.svg") no-repeat center/contain;
}

.btn-general3::after {
	background: url("../img/btn_arrow_red.svg") no-repeat center/contain;
}


.btn-general2:hover,
.btn-general3:hover {
	text-decoration: none;
	transform: scale(1.02);
}

.btn-general2:hover {
	color: var(--color-dark);
}

.btn-general3:hover {
	color: var(--color-link);
}


/*左アイコン*/
.btn-stayplan::before {
	background: url("../img/btn_ico_bed.svg") no-repeat center/contain;
}

.btn-foodplan::before {
	background: url("../img/btn_ico_dinner.svg") no-repeat center/contain;
}

/* sec-options-------------------------------------*/
#sec-options {
	background: var(--color-main1);
	background-image: url("../img/bg_grunge.webp");
	background-blend-mode: color-burn;
	background-repeat: repeat;
	border-top: 8px solid transparent;
	border-image: var(--gradient-gold);
	border-image-slice: 1;
	/* ← これが必須 */
}

#sec-options .sec-container {
	padding: var(--length-XL) var(--length-XS);
}


/* sec-restaurant-------------------------------------*/
#sec-restaurant {
	background-color: var(--color-main3);
	background-image: url("../img/bg_tile.webp");
	background-repeat: repeat;
	background-size: 30px;
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	border-image: var(--gradient-gold);
	border-image-slice: 1;
	/* ← これが必須 */
}

@media (min-width:640px) {
	#sec-restaurant {
		background-size: 40px;
	}
}

#sec-restaurant .sec-container {
	padding: var(--length-XL) 0;
}

.restaurant-container {
	background: var(--gradient-white);
	padding: var(--length-XL) 1em var(--length-XS);
	border-radius: 50vw 50vw 0 0;
	margin: 2em calc(50% - 50vw) 0;
}

.restaurant-inner {
	width: 100%;
	max-width: 1000px;
	margin-inline: auto;
}

.ttl-restaurant-inner {
	padding: var(--length-M) 0;
}

.restaurant-sub {
	font-size: clamp(1.6rem, 1.459rem + 0.601vw, 2rem);
	font-weight: 700;
	margin-bottom: .25em;
}

.restaurant-sub-name,.restaurant-name {
	color: var(--color-main2);
	font-weight: 800;
	font-size: clamp(2.2rem, 1.848rem + 1.502vw, 3.2rem);
	line-height: 1.6;
	display: block;
}
@media (min-width:834px){
	.restaurant-sub-name,.restaurant-name  {
		margin-inline: .2em;
	display: inline-block;
}
}


.restaurant-description {
	text-align: justify;
}

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

.ttl-restaurant-logo {
	width: 70vw;
	max-width: 360px;
	margin: .75em auto;
}

.restaurant-ph-rail {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	gap: 8px;
	margin: 2em auto;
}

@media (min-width:640px) {
	.restaurant-ph-rail {
		grid-template-columns: repeat(3, 1fr);
		gap: 16px;
	}
}

.restaurant-ph-rail img {
	object-fit: cover;
	aspect-ratio: 3 / 2;
}



.recommend-arrow {
	background: var(--color-main2);
	color: var(--color-light);
	font-weight: 700;
	position: relative;
	padding: .5em 1em;
	border-radius: .5em;
	margin-bottom: 1em;
	line-height: 1.3;
	margin-inline: auto;
	width: 100%;
}

.recommend-arrow::after {
	position: absolute;
	content: '';
	top: 100%;
	left: calc(50% - 15px);
	border: 15px solid transparent;
	border-top: 15px solid var(--color-main2);
	width: 0;
	height: 0;
}

@media (min-width:834px) {
	.recommend-arrow {
		width: fit-content;
		padding: .5em 2em;
		min-width: 600px;
	}
}

.plan-detail-container {
	background: var(--color-light);
	box-shadow: 0 0 12px rgba(0, 0, 0, 0.3);
	padding: 2em 1em;
	margin: var(--length-S) auto;
	/* border-radius: var(--length-XXS); */
}

@media (min-width:834px) {
	.plan-detail-container {
		padding: 3em 1em;
	}
}

.plan-detail-container h2 {
	position: relative;
	display: inline-block;
	padding: 0.5em 1em;
	/* カッコ分の余白 */
	text-align: center;
	line-height: 1.3;
	font-weight: 800;
	font-size: var(--fs-LL);
	color: var(--color-main2);
	margin-bottom: 1em;
}

.plan-detail-container h2::before,
.plan-detail-container h2::after {
	content: "";
	position: absolute;
	top: 0;
	width: 14px;
	height: 100%;
	border-top: 1px solid var(--color-main2);
	border-bottom: 1px solid var(--color-main2);
}

.plan-detail-container h2::before {
	left: 0;
	border-left: 1px solid var(--color-main2);
}

.plan-detail-container h2::after {
	right: 0;
	border-right: 1px solid var(--color-main2);
}

.plan-detail-container h3 {
	font-size: var(--fs-S);
}

.restaurant-plan-description {
	text-align: justify;
}

.plan-photo img {
	width: min(100%, 640px);
	margin: 1em auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}


/* ===== photo-railここから ：未使用===== */
.rail-wrap {
	position: relative;
	margin-block: 1.5em 1em;
}

.rail {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;

	padding: 0 0 1em;

	scrollbar-width: none;
	-ms-overflow-style: none;
}

.rail::-webkit-scrollbar {
	display: none;
}

/* ===== card（写真のみ） ===== */
/* スマホ：1枚メイン＋見切れ */
.card {
	flex: 0 0 92%;
	max-width: 720px;

	scroll-snap-align: start;

	background: transparent;
	border: none;
	overflow: hidden;
}

.card-media {
	margin: 0;
	aspect-ratio: 3 / 2;
	overflow: hidden;
}

.card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ===== ＜ ＞ ボタン ===== */
.rail-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 38px;
	height: 38px;
	border: 1px solid rgba(255, 255, 255, 1);
	background: rgba(0, 0, 0, .8);
	backdrop-filter: blur(8px);
	color: var(--color-light);
	font-size: 16px;
	line-height: 1;
	display: grid;
	place-items: center;
	cursor: pointer;
	border-radius: 9999px;
	font-family: var(--font-gothic);
	font-weight: 700;
}

.rail-prev {
	left: 6px;
}

.rail-next {
	right: 6px;
}

.rail-nav.is-disabled {
	opacity: .4;
	cursor: not-allowed;
	pointer-events: none;
}

/* ===== タブレット：2枚寄り ===== */
@media (min-width: 768px) {
	.card {
		flex-basis: 52%;
		max-width: none;
	}
}

/* ===== PC：2つ半（2.5枚） ===== */
@media (min-width: 1024px) {
	.card {
		flex-basis: 40%;
		max-width: none;
	}
}

/* ===== photo-railここまで ===== */


.options-plus {
	position: relative;
	padding: 2em 1.5em 1em;
	margin-block: 3em 1em;
	margin-inline: auto;
	max-width: 600px;
	background: rgba(255, 225, 215, 0.4);
	border: 1px solid var(--color-main2);
	font-size: var(--fs-S);
	box-shadow: 4px 6px 0 var(--color-main2);
}

.options-plus > h4 {
	position: absolute;
	display: inline-block;
	top: -.25em;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: var(--fs-SS);
	font-family: var(--font-gothic);
	background: var(--color-main2);
	color: var(--color-light);
	padding: .5em 1em .6em;
	border-radius: 999px;
	line-height: 1.4;
	width: min(60vw,380px);
}

.options-plus p {
	text-align: justify;
}

.options-plus img {
	max-width: 400px;
	margin-block: 1em;
}


/* sec-outro-------------------------------------*/
#sec-outro {
	background: url(../img/img_landscape.webp);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

#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-access-------------------------------------*/
#sec-access {
	background: var(--color-main4);
}

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

.access-container {
	display: flex;
	flex-direction: column;
	width: fit-content;
	margin-inline: auto;

}

@media (min-width:640px) {
	.access-container {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		align-items: center;
		margin-bottom: 2em;
	}

	.access-container div {
		text-align: left;
	}
}

.ttl-access {
	text-transform: capitalize;
	font-size: clamp(4rem, 3.296rem + 3.005vw, 6rem);
	font-family: var(--font-en);
	line-height: 1;
	font-weight: 400;
}

#sec-access iframe {
	margin: var(--length-M) calc(50% - 50vw) 0;
	width: 100vw;
}

/* sec-links-------------------------------------*/
#sec-links {
	background-color: var(--color-light);
	border-top: 8px solid transparent;
	border-image: var(--gradient-gold);
	border-image-slice: 1;
	/* ← これが必須 */
}

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

.links-container {
	padding: 1em 2em;
	display: flex;
	gap: 1.5em;
	flex-direction: column;
}

.links-inner {
	width: fit-content;
	display: flex;
	gap: 0;
	flex-direction: column;
}

@media (min-width:640px) {
	.links-inner {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		align-items: center;
	}
}

.copyright {
	text-align: center;
	font-size: var(--fs-SS);
	margin-top: 2em;
}

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

/* =========================
   ハンバーガーボタン本体
========================= */
.menu {
	position: fixed;
	top: 15px;
	right: clamp(12px, 3vw, 32px);
	width: 48px;
	/* ボタン全体の直径*/
	height: 48px;
	/* ボタン全体の直径*/
	z-index: 1001;
	cursor: pointer;
	display: inline-block;
	border-radius: 50%;
	border: 1px solid var(--color-light);
	background: rgba(0, 0, 0, 0.65);
	box-sizing: border-box;
}



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

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

	background: var(--color-light);
	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: rgba(0, 0, 0, 0.8);

	/* 開閉 */
	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;
	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 #CCC;
}

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

.gnav__menu__item a:hover {
	opacity: .6;
	color: var(--color-main4);
}

/* サブ*/
.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;
}