@charset "UTF-8";
@import url("layout.css");
@import url("component.css");

:root {
	--current-header-h: 0px;
	/* JSで上書きされるまでのフォールバック */
	--font-family-Zen-Go: YakuHanJP, "Zen Kaku Gothic New", sans-serif;
	--font-family-Zen-Maru-Go: YakuHanJP, "Zen Maru Gothic", sans-serif;
	--font-family-Zen-Mi: YakuHanMP, "Zen Old Mincho", serif;
	--font-family-Jost: YakuHanJP, "Jost", sans-serif;
	--font-family-Noto-Sans: YakuHanJP, "Noto Sans JP", sans-serif;
	--font-family-Noto-Serif: YakuHanMP, "Noto Serif JP", serif;


	--font-size-xl: clamp(2.4rem, 1.943rem + 0.95vw, 2.8rem);
	--font-size-lg: clamp(2rem, 1.114rem + 1.43vw, 2.4rem);
	--font-size-md: clamp(1.6rem, 1.143rem + 0.95vw, 2rem);
	--font-size-base: clamp(1.4rem, 1.171rem + 0.48vw, 1.6rem);
	--font-size-sm: clamp(1.3rem, 1.186rem + 0.24vw, 1.4rem);
	--font-size-xs: ;
	--font-size-xxs: ;

	--color-orange: #FF5611;
	--color-green: #2EB6AA;
	--color-sand: #FFFCEB;
	--color-beige: #F0ECCD;
	--color-navy: #0B2E5E;
	--color-miffy: #FFC80B;
	--color-white: #fff;
	--color-black: #000;
	--color-dialog-menu-btn: #fff;
	--color-dialog-menu-bg: #fff;
	--color-dialog-menu-link: #fff;

	--color-htb-ticket: #ff5611;
	--color-htb-enjoy: #42ab6a;
	--color-htb-event: #3399cc;
	--color-htb-gourmet: ;
	--color-htb-shopping: ;
	--color-htb-hotels: #2eb6aa;
	--color-htb-background: #fbf9ef;

	/*--align--*/
	--align-center: center;
	--align-center-sp: center;
	--align-left: left;
	--align-left-sp: left;

	--layout-space-section: 6rem;
	/*section縦の余白*/
	--layout-space-base-horizontal: 2.4rem;
	/*横の余白*/
	--layout-space-base-vrtical: 4.8rem;
	/*縦の余白*/
	--layout-space: 1.2rem;
}

@media screen and (min-width: 1025px) {
	:root {
		--layout-space: 2.4rem;
		--layout-space-base-horizontal: 4.8rem;
	}
}


/******************
l-  Layout
c-  Component
p-  Project
u-  Utility
******************/

/* ===== Header: 初期非表示 → スクロールで表示 ===== */
#h-header {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.4s ease;
}

#h-header.is-visible {
	opacity: 1;
	pointer-events: auto;
}

/* ヘッダー: hero時は非表示、term到達で表示 */
#h-header {
	opacity: 0;
	transition: opacity 0.4s ease;
	pointer-events: none;
}

body.show-header #h-header {
	opacity: 1;
	pointer-events: auto;
}

/* ページ全体のスクロールを無効化 → 全スクロールを#containerに集中 */
html,
body {
	margin: 0;
	overflow: hidden;
	height: 100%;
}

#container {
	margin-top: 0 !important;
	/* JSフルページスクロールのコンテナ */
	height: 100svh;
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	/* スクロールバー非表示 */
	scrollbar-width: none;
	/* Firefox */
	-ms-overflow-style: none;
	/* IE/Edge */
}

#container::-webkit-scrollbar {
	display: none;
	/* Chrome/Safari */
}

.l-wrapper {
	position: relative;
	--section-color-primary: #000;
	--section-color-secondary: #D9D9D9;
	--section-color-accent: #c0c0c0;
	color: var(--section-color-primary);
	background: transparent;
	/*
	overflow-x: hidden;
	*/
}

.l-section {
	position: relative;
	font-family: var(--font-family-Zen-Go);
	--section-padding: clamp(1rem, -0.143rem + 2.38vw, 2rem);
	--section-font-size-hedding: clamp(2.4rem, 0.343rem + 4.29vw, 4.2rem);
	--section-font-size-title: clamp(2.4rem, 1.029rem + 2.86vw, 3.6rem);
	--section-font-size-name: clamp(2rem, 1.086rem + 1.9vw, 2.8rem);
	--section-font-size-p: clamp(1.3rem, 0.957rem + 0.71vw, 1.6rem);
	--section-font-size-notice: clamp(1rem, 0.771rem + 0.48vw, 1.2rem);
	--section-font-size-btn: clamp(1.4rem, 0.943rem + 0.95vw, 1.8rem);

}

.c-section-body {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	flex-direction: column;
	padding: 0 0 calc(var(--section-padding) * 6);
	gap: calc(var(--section-padding) * 4);
}

.c-section-inner {
	width: 100%;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	padding: 0 calc(var(--section-padding) * 2);
}

.c-header {
	width: 100%;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: calc(var(--section-padding) * 1.5);
}

.l-section h2 {
	font-family: var(--font-family-Zen-Mi);
	font-size: var(--section-font-size-title);
	position: relative;
	font-weight: 500;
	text-align: center;
}

.l-section h2 em {
	font-size: 140%;
}

.l-section h2 small {
	font-size: 70%;
}

.l-section h3 {
	font-family: var(--font-family-Zen-Mi);
	position: relative;
	text-wrap: pretty;
	word-break: auto-phrase;

	@supports not (word-break: auto-phrase) {
		word-break: keep-all;
		overflow-wrap: anywhere;
	}
}

.l-section p {
	font-size: var(--section-font-size-p);
	font-weight: 500;
}

.l-section figcaption {
	font-size: var(--section-font-size-notice);
	font-weight: 500;
	text-align: right;
}

.l-section .notice {
	font-size: var(--section-font-size-notice);
	font-weight: 500;
}

.l-section .c-btn {
	background-color: var(--section-color-primary);
	border-color: var(--section-color-primary);
	color: #fff;
	padding: 1.6rem 2rem 1.6rem 2.4rem;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
	max-width: 70%;
	min-width: 280px;
	margin: 0 auto;
	font-size: var(--section-font-size-btn);
}

.l-section .c-btn.c-btn-text {
	background: none;
	border: none;
	color: var(--color-black);
	padding: 0.5rem 0rem;
	box-shadow: unset;
	max-width: unset;
	margin: 0 auto;
	border-bottom: 1px solid;
	border-radius: 0;
	font-size: calc(var(--section-font-size-btn) * 0.9);
	max-width: none;
	min-width: auto;
}

.l-section .c-btn span {
	justify-content: center;
	gap: 10px;
	font-weight: 600;
	letter-spacing: 0.08em;
}


.pretty-text {
	text-wrap: pretty;
	word-break: auto-phrase;

	@supports not (word-break: auto-phrase) {
		word-break: keep-all;
		overflow-wrap: anywhere;
	}
}

.p-card-wrapper {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: calc(var(--section-padding) * 4);
	column-gap: calc(var(--section-padding) * 2);
	align-items: flex-start;
}

.p-card {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	gap: calc(var(--section-padding) * 1.6);
}

.p-card figure {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	width: 100%;
}

.p-card figure picture {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	width: 100%;
}

.p-card figure picture img {
	height: 100%;
}

.p-card-header {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	gap: calc(var(--section-padding) * 1);
}

.p-card-header h3 {
	font-size: var(--section-font-size-name);
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
	color: var(--privilege-color);
	text-wrap: pretty;
	word-break: auto-phrase;
}

.p-card-header sup,
.p-card-header small {
	font-size: 60%;
}

.p-card-header p {
	font-size: var(--section-font-size-p);
	line-height: 1.6;
	font-weight: 500;
}


@media screen and (min-width: 1025px) {
	.l-section {
		max-width: 100%;
		margin: 0 auto;
	}
}



/*---------------
#hero{}
---------------*/

#hero {
	position: relative;
	max-width: 100%;
}

#hero .c-section-body {
	justify-content: center;
	flex-direction: column;
	padding: 0;
}

/* ===== Hero Visual: フルスクリーン表示 ===== */
.h-hero__visual {
	position: relative;
	width: 100%;
	height: var(--hero-h, 100svh);
	overflow: visible;
	background: #000;
}

/* ===== Loader: プリロード中のローディングアニメーション ===== */
.h-hero__loader {
	position: absolute;
	inset: 0;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #000;
	/* デフォルト非表示: 高速ロード時にチラつかない */
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* 300ms以上かかる場合のみ表示 */
.h-hero__loader.show-loader {
	opacity: 1;
	visibility: visible;
}

/* ロード完了後にフェードアウト */
.h-hero__visual.is-loaded .h-hero__loader {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.6s ease, visibility 0.6s ease;
}

.h-hero__loader-inner {
	position: relative;
}

.h-hero__loader-text {
	font-family: 'Jost', sans-serif;
	font-size: clamp(10px, 2.5vw, 14px);
	font-weight: 600;
	letter-spacing: 0.25em;
	color: rgba(255, 255, 255, 0.7);
	margin: 0;
	display: flex;
	align-items: flex-end;
}

.h-hero__loader-text span {
	display: inline-block;
	animation: coaster-ride 2.4s ease-in-out infinite;
	animation-delay: calc(var(--i) * 0.12s);
	will-change: transform;
}

.h-hero__loader-space {
	width: 0.4em;
}

/* ジェットコースターの丘越え：ゆっくり登って → 急降下 → 小さな丘 */
@keyframes coaster-ride {

	0%,
	100% {
		transform: translateY(0) rotate(0deg);
	}

	18% {
		transform: translateY(-18px) rotate(-8deg);
	}

	30% {
		transform: translateY(4px) rotate(4deg);
	}

	42% {
		transform: translateY(-6px) rotate(-3deg);
	}

	55% {
		transform: translateY(1px) rotate(1deg);
	}

	68% {
		transform: translateY(0) rotate(0deg);
	}
}

/* ===== 背景画像: picture要素対応 ===== */
.h-hero__static-bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100svh;
}

.h-hero__static-bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ===== Hero Text: 中央フェードイン（プリロード後に発火） ===== */
.h-hero__txt {
	position: absolute;
	top: 35%;
	left: 50%;
	transform: translate(-50%, -50%);
	max-height: 60%;
	width: auto;
	max-width: 35%;
	z-index: 2;
	opacity: 0;
	object-fit: contain;
}

@media screen and (min-width: 769px) {
	.h-hero__txt {
		max-height: 65%;
		max-width: min(15%, 270px);
		top: 35%;
	}
}

.h-hero__visual.is-loaded .h-hero__txt {
	animation: hero-txt-fadein 2s ease-out 0.5s forwards;
}

@keyframes hero-txt-fadein {
	0% {
		opacity: 0;
		transform: translate(-50%, -45%);
	}

	100% {
		opacity: 1;
		transform: translate(-50%, -50%);
	}
}

/* ===== Wakuwaku: ヒーロー下端からスルッと出現（プリロード後に発火） ===== */
.h-hero__wakuwaku {
	position: absolute;
	bottom: 4%;
	left: 50%;
	transform: translate(-50%, 150%);
	width: 35%;
	z-index: 3;
	opacity: 0;
}

.h-hero__visual.is-loaded .h-hero__wakuwaku {
	animation: wakuwaku-slide 1s cubic-bezier(0.22, 1, 0.36, 1) 1.2s forwards;
}

.h-hero__wakuwaku-img {
	display: block;
	width: 100%;
	height: auto;
}

@media screen and (min-width: 769px) {
	.h-hero__wakuwaku {
		width: min(18%, 300px);
		bottom: 6%;
	}
}

@keyframes wakuwaku-slide {
	0% {
		opacity: 0;
		transform: translate(-50%, 150%);
	}

	100% {
		opacity: 1;
		transform: translate(-50%, 0);
	}
}

/* テキストコンテンツ：下部中央 */
.h-hero__content {
	padding: calc(var(--section-padding) * 3) calc(var(--section-padding) * 2) calc(var(--section-padding) * 3);
	text-align: center;
	color: var(--color-black);
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: calc(var(--section-padding) * 1.5);
}

.h-hero__content>div {
	display: flex;
	flex-wrap: wrap;
	gap: calc(var(--section-padding) * 1.5);
	justify-content: center;
	align-items: center;
}

.h-hero__content h1 {
	font-family: var(--font-family-Zen-Mi);
	font-size: calc(var(--section-font-size-hedding) * 1.2);
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 1.4;
	margin: 0 0 12px;
	text-wrap: pretty;
	word-break: auto-phrase;
	color: var(--privilege-color);
}

.h-hero__content .date {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: calc(var(--section-padding) * 1);
}

.h-hero__content .date p {
	font-size: var(--section-font-size-p);
	display: table;
	margin: 0 auto;
	background: #000;
	border-radius: 9999px;
	color: #fff;
	padding: 1rem 1.5rem;
	line-height: 1;
}

.h-hero__content .date dl {
	font-family: var(--font-family-Zen-Mi);
	font-size: calc(var(--section-font-size-p) * 1.3);
	gap: calc(var(--section-padding) * 1);
	align-items: center;
	line-height: 1;
	display: grid;
	grid-template-columns: 70px max-content;
	width: fit-content;
	align-self: flex-start;
}

.h-hero__content .date dl dt {
	background: var(--section-color-primary);
	font-size: calc(var(--section-font-size-p) * 0.9);
	color: #fff;
	line-height: 1;
	padding: 0.5rem;
}

.h-hero__content .date dl dd {
	margin: 0;
	text-align: left;
}

.h-hero__content .date dl dd em {
	font-size: 150%;
}



@media screen and (min-width: 1025px) {
	.h-hero__content {
		display: grid;
		grid-template-columns: 1.8fr 1fr;
		gap: calc(var(--section-padding) * 4);
		padding: calc(var(--section-padding) * 3) calc(var(--section-padding) * 0) calc(var(--section-padding) * 3);
	}
}


/*---------------
#term{}
---------------*/

#term {
	/*height: 100svh;*/
	min-height: 100svh;
	position: relative;
	background: rgb(0 0 0 / 0%);
	color: #fff;
	transition: background 1.2s ease;
}

#term.is-visible {
	background: rgb(0 0 0 / 60%);
}

#term .c-section-body {
	min-height: 100%;
	justify-content: flex-start;
	padding: calc(var(--section-padding) * 12) calc(var(--section-padding) * 2) calc(var(--section-padding) * 2);
	gap: calc(var(--section-padding) * 2);
}

#term .c-section-inner {
	max-width: 800px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: calc(var(--section-padding) * 2.5);
	padding: 0 calc(var(--section-padding) * 1.5);
}


/* ---- term内スタガーアニメーション ---- */
#term .c-section-inner>* {
	opacity: 0;
	transition: opacity 0.6s ease;
}

/* term-read: 0.3s遅延 */
#term.is-visible .c-section-inner>.term-read {
	opacity: 1;
	transition-delay: 0.3s;
}

/* ボタン: 0.6s遅延 */
#term.is-visible .c-section-inner>.c-btn {
	opacity: 1;
	transition-delay: 0.6s;
}

/* SNSシェア: 0.9s遅延 */
#term.is-visible .c-section-inner>.p-sns-share {
	opacity: 1;
	transition-delay: 0.9s;
}

/* SNS各アイコンも個別にスタガー */
#term .p-sns-share__link {
	opacity: 0;
	transition: opacity 0.4s ease;
}

#term.is-visible .p-sns-share__link:nth-child(1) {
	opacity: 1;
	transition-delay: 1.0s;
}

#term.is-visible .p-sns-share__link:nth-child(2) {
	opacity: 1;
	transition-delay: 1.15s;
}

#term.is-visible .p-sns-share__link:nth-child(3) {
	opacity: 1;
	transition-delay: 1.3s;
}


#term .term-read {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: calc(var(--section-padding) * 1.6);
}


#term p {
	font-size: clamp(10px, calc(3.64vw - 1.64px), 18px);
	line-height: 1.7;
	width: 100%;
	font-family: 'Zen Old Mincho', serif;
}
#term p:first-child {
	font-size: clamp(13px, calc(5.45vw - 4.45px), 24px);
}

#term .p-term__btn {
	max-width: 300px;
	width: 100%;
	font-size: 13px;
}

.p-sns-share {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: calc(var(--section-padding) * 1.5);
	width: 100%;
}

.p-sns-share__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.6);
	background: transparent;
	color: #fff;
	text-decoration: none;
	transition: opacity 0.3s ease;
}

.p-sns-share__link:hover {
	opacity: 0.7;
}

.p-sns-share__link svg {
	width: 24px;
	height: 24px;
}


@media screen and (min-width: 1025px) {
	#term .c-section-body {
		padding: calc(var(--section-padding) * 8) calc(var(--section-padding) * 2) calc(var(--section-padding) * 2);
	}
}