@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 {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 100;
	opacity: 0;
	pointer-events: none;
	transition: all 0.4s;
}

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

@media screen and (max-width: 1024px) {
  body #container.lenis-scrolling  #h-header{
    margin-top: -55px;
  }
}


/* ページ全体のスクロールを無効化 → 全スクロールを#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 */
}

#scroll-content {
	width: 100%;
	min-height: 100%;
	position: relative;
}

.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-Go);
	font-size: var(--section-font-size-title);
	position: relative;
	font-weight: 700;
	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-Go);
	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);
	}
}

/* ===== 背景画像 & 動画スライド ===== */
.h-hero__slide {
	position: relative;
	width: 100%;
	height: 100svh;
}

/* SP専用：背景固定動画 */
.h-hero__slide--video {
	display: none;
	overflow: hidden;
}

@media screen and (max-width: 768px) {
	.h-hero__slide--video {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		height: 100svh;
		z-index: 1;
		pointer-events: none;
		display: block;
	}
}

.h-hero__video-wrap {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: #000;
}

.h-hero__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* ヒーローメインスライド */
.h-hero__slide--main {
	position: relative;
	width: 100%;
	min-height: 100svh;
	overflow: visible !important;
	background: transparent !important;
}

.h-hero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

@media screen and (max-width: 768px) {
	/* SP時は動画が背景のため静止画は非表示（通常動画モード） */
	.h-hero__bg {
		display: none !important;
	}

	/* ─────────────────────────────────────────────────────────────
	   【SP静止画モード】リリース時に動画が間に合わない場合
	   body または #hero に .is-sp-static が付与された場合のスタイル
	───────────────────────────────────────────────────────────── */
	.is-sp-static .h-hero__slide--video {
		display: none !important;
	}

	.is-sp-static .h-hero__bg {
		display: block !important;
		position: fixed !important;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		height: 100svh;
		pointer-events: none;
		z-index: 1;
		opacity: 1 !important;
		visibility: visible !important;
	}
}

.h-hero__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.h-hero__overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	height: 100svh;
	background: #000;
	z-index: 2;
	pointer-events: none;
	opacity: 0; /* 最初は明るいまま */
	transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.h-hero__overlay.is-term-dimmed {
	opacity: 0.45;
}

/* PC時の固定位置化（スクロールしても固定位置のまま残り、scrubで繊細に少し暗転） */
@media screen and (min-width: 769px) {
	.h-hero__bg {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		pointer-events: none;
		will-change: opacity;
		z-index: 1;
		opacity: 1 !important;
		visibility: visible !important;
	}

	#hero,
	.h-hero__visual,
	.h-hero__slide--main {
		background: transparent !important;
	}
}


/* ===== Hero Text: 縦書きテキスト表示（シンプルにふわっとフェードイン） ===== */
.h-hero__txt {
	position: absolute;
	top: 36%;
	left: 50%;
	-webkit-transform: translate3d(-50%, -46%, 0);
	transform: translate3d(-50%, -46%, 0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	will-change: transform, opacity, filter;
	z-index: 20;
	pointer-events: none;
	opacity: 0;
	filter: blur(8px);
	writing-mode: vertical-rl;
	-webkit-writing-mode: vertical-rl;
	font-family: var(--font-family-Zen-Go);
	font-weight: 700;
	color: #ffffff;
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.8), 0 1px 4px rgba(0, 0, 0, 0.5);
	/* WebKit(iOS Safari)対応: blockフロー + 行ごとのblock分離で確実に3行縦書き */
	display: block;
	letter-spacing: 0.12em;
	line-height: 1.15;
	user-select: none;
	margin: 0;
	transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1),
	            transform 1.4s cubic-bezier(0.16, 1, 0.3, 1),
	            filter 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.h-hero__txt.is-visible {
	opacity: 1;
	filter: blur(0px);
	-webkit-transform: translate3d(-50%, -50%, 0);
	transform: translate3d(-50%, -50%, 0);
}

.h-hero__txt.is-scrolled-out {
	opacity: 0;
	filter: blur(4px);
	-webkit-transform: translate3d(-50%, -60%, 0);
	transform: translate3d(-50%, -60%, 0);
	transition: opacity 0.5s ease-out, transform 0.5s ease-out, filter 0.5s ease-out;
}

.h-hero__txt-line {
	display: block;
	white-space: nowrap;
	font-size: clamp(2.2rem, 1.4rem + 1.8vw, 4.4rem);
	margin-left: clamp(1.4rem, 1rem + 1.2vw, 3rem);
}

.h-hero__txt-line:last-child {
	margin-left: 0;
}

@media screen and (min-width: 769px) {
	.h-hero__txt {
		top: 36%;
		letter-spacing: 0.14em;
	}

	.h-hero__txt-line {
		font-size: clamp(3rem, 2rem + 1.2vw, 4.6rem);
		margin-left: clamp(2rem, 1.2rem + 1vw, 3.2rem);
	}

	.h-hero__txt-line:last-child {
		margin-left: 0;
	}
}

@media screen and (max-width: 768px) {
	/* SP時：キャッチコピーとワクワクは完全に同期した単一ユニットとして動作 */
	.h-hero__txt,
	.h-hero__wakuwaku {
		position: fixed !important;
		left: 50% !important;
		z-index: 10 !important;
		pointer-events: none !important;
		opacity: 0 !important;
		filter: blur(8px) !important;
		will-change: opacity, filter !important;
		transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
		            filter 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
		transition-delay: 0s !important;
	}

	.h-hero__txt {
		top: 36% !important;
		-webkit-transform: translate3d(-50%, -50%, 0) !important;
		transform: translate3d(-50%, -50%, 0) !important;
		letter-spacing: 0.1em;
	}

	.h-hero__txt-line {
		font-size: clamp(2.2rem, 1.8rem + 1.4vw, 2.8rem);
		margin-left: 1.2rem;
	}

	.h-hero__txt-line:last-child {
		margin-left: 0;
	}

	.h-hero__wakuwaku {
		top: 66% !important;
		bottom: auto !important;
		-webkit-transform: translate3d(-50%, 0, 0) !important;
		transform: translate3d(-50%, 0, 0) !important;
		width: 36% !important;
		max-width: 170px !important;
	}

	/* 表示時：完全に同じタイミング・同じイージングでふわっとフェードイン */
	.h-hero__txt.is-visible,
	.h-hero__wakuwaku.is-visible {
		opacity: 1 !important;
		filter: blur(0px) !important;
	}

	/* 非表示時：完全に同じタイミングでふわっと消散 */
	.h-hero__txt.is-hidden,
	.h-hero__wakuwaku.is-hidden {
		opacity: 0 !important;
		filter: blur(6px) !important;
		transition: opacity 0.5s ease-out, filter 0.5s ease-out !important;
		transition-delay: 0s !important;
	}
}

/* ===== PC専用：Wakuwaku（ヒーロー下端からスルッと出現） ===== */
@media screen and (min-width: 769px) {
	.h-hero__wakuwaku {
		position: absolute;
		bottom: 6%;
		left: 50%;
		transform: translate(-50%, 30px);
		width: min(18%, 300px);
		z-index: 20;
		opacity: 0;
		filter: blur(4px);
		will-change: transform, opacity, filter;
		transition: opacity 1.0s cubic-bezier(0.16, 1, 0.3, 1) 0.3s,
		            transform 1.0s cubic-bezier(0.16, 1, 0.3, 1) 0.3s,
		            filter 1.0s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;
	}

	.h-hero__wakuwaku.is-visible {
		opacity: 1;
		transform: translate(-50%, 0);
		filter: blur(0px);
	}

	.h-hero__wakuwaku.is-scrolled-out {
		opacity: 0;
		transform: translate(-50%, -20px);
		filter: blur(4px);
		transition: opacity 0.4s ease-out, transform 0.4s ease-out, filter 0.4s ease-out;
	}
}

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




/* テキストコンテンツ：下部中央 */
.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-Go);
	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-Go);
	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;
	z-index: 5;
	background: transparent;
	color: #fff;
}

#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>* {
	will-change: transform, opacity;
}

#term .p-sns-share__link {
	will-change: transform, opacity;
}


#term .term-read {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2.4rem;
	text-align: center;
}

#term p {
	font-family: var(--font-family-Zen-Go);
	font-size: clamp(14px, 1.1rem + 0.8vw, 22px);
	line-height: 2.3;
	letter-spacing: 0.12em;
	width: 100%;
	margin: 0;
	color: #fff;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
}

#term p:first-child {
	font-size: clamp(16px, 1.3rem + 1.2vw, 28px);
	font-weight: 600;
	line-height: 2.2;
}

#term p:nth-child(2) {
	font-size: clamp(12px, 0.85rem + 0.4vw, 15px);
	letter-spacing: 0.2em;
	color: rgba(255, 255, 255, 0.7);
	margin-top: 1rem;
}

.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);
	}
}

/* ==========================================================================
   スクロール連動モード (Scroll-driven Zoomout) & モード切替UI
   ========================================================================== */

/* ---- スクロールガイド（右隅縦配置のスタイリッシュインジケーター） ---- */
.h-hero__scroll-guide {
	position: fixed;
	bottom: 44px;
	right: 36px;
	z-index: 100;
	display: none;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.h-hero__scroll-guide {
	display: flex;
	opacity: 1;
}

.h-hero__scroll-guide-text {
	font-family: var(--font-family-Jost);
	font-size: 11px;
	letter-spacing: 0.32em;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.95);
	writing-mode: vertical-rl;
	text-orientation: mixed;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8), 0 0 20px rgba(255, 86, 17, 0.4);
	user-select: none;
}

.h-hero__scroll-guide-line {
	width: 1.5px;
	height: 48px;
	background: rgba(255, 255, 255, 0.2);
	position: relative;
	overflow: hidden;
	border-radius: 2px;
}

.h-hero__scroll-guide-line::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to bottom, transparent 0%, #ff5611 50%, #ffffff 100%);
	animation: scroll-line-drop 2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes scroll-line-drop {
	0% {
		transform: translateY(-100%);
	}

	50%,
	100% {
		transform: translateY(100%);
	}
}

@media screen and (max-width: 768px) {
	.h-hero__scroll-guide {
		bottom: 24px;
		right: 18px;
		gap: 8px;
	}

	.h-hero__scroll-guide-text {
		font-size: 10px;
		letter-spacing: 0.26em;
	}

	.h-hero__scroll-guide-line {
		height: 36px;
	}
}

/* ---- ネイティブSticky固定解除 ＆ 独立セクション構成 ---- */
body,
#container {
	background: #000;
}

#hero {
	position: relative;
	width: 100%;
	height: 100svh;
}

@media screen and (max-width: 768px) {
	#hero {
		height: auto;
	}
}

#hero .c-section-body {
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
}

.h-hero__visual {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: visible;
}

@media screen and (max-width: 768px) {
	.h-hero__visual {
		height: auto;
	}
}

/* ---- #term: PC fixedステージング ＆ SP縦スナップ ---- */
@media screen and (min-width: 769px) {
	#term {
		position: relative;
		height: 180vh;
		background: transparent !important;
		z-index: 5;
		display: block !important;
	}

	#term .c-section-body {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		pointer-events: none;
		z-index: 5;
	}

	#term .c-section-inner {
		max-width: 900px;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	#term .term-read {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 2.8rem;
		text-align: center;
		pointer-events: auto;
	}

	#term .term-read p {
		opacity: 0;
		transform: translateY(30px);
		filter: blur(8px);
		will-change: transform, opacity, filter;
	}
}

/* ---- #term: SP fixedステージング（PC同様のシネマティック体験） ---- */
@media screen and (max-width: 768px) {
	#hero {
		position: relative;
		height: 160vh;
		background: transparent !important;
	}

	#term {
		position: relative;
		height: 160vh;
		background: transparent !important;
		z-index: 5;
		display: block !important;
	}

	#term .c-section-body {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		height: 100svh;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 20px;
		pointer-events: none;
		z-index: 8;
		opacity: 0; /* is-visibleがないときは完全に透明（thirty-fifthなど他セクションへの残留防止） */
		transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
	}

	#term.is-visible .c-section-body {
		opacity: 1;
	}

	#term .c-section-inner {
		max-width: 100%;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	#term .term-read {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 2.2rem;
		text-align: center;
		pointer-events: none;
	}

	#term .term-read p {
		opacity: 0;
		transform: translateY(25px);
		filter: blur(8px);
		will-change: transform, opacity, filter;
		transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
		            transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
		            filter 0.9s cubic-bezier(0.16, 1, 0.3, 1);
	}

	#term.is-visible .term-read p {
		opacity: 1;
		transform: translateY(0);
		filter: blur(0px);
	}

	#term.is-visible .term-read p:nth-child(2) {
		transition-delay: 0.15s;
	}
}


/* フッターは固定背景の上に被さるように白背景で不透明化 */
#h-footer,
.l-footer,
footer {
	position: relative;
	z-index: 10;
	background: #ffffff;
}

/* ==========================================================================
   Features Showcase (Positive.co.jp Commitment スタイル背景スライド連動)
   ========================================================================== */
.p-features {
	position: relative;
	z-index: 25;
	/* 固定されたheroやterm(z-index: 8)の手前に確実に覆い被さる */
	background: #0b1118;
	color: #fff;
	width: 100%;
	height: 320svh;
	/* スクロール連動に必要なストローク長 */
}

@media screen and (max-width: 768px) {
	.p-features {
		height: 280svh;
		/* SP実機で指のストロークに最適なスクロール量 */
	}
}

/* アンカーリンク位置 */
.p-features__anchor {
	position: absolute;
	left: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
	opacity: 0;
}

#view {
	top: 0;
}

#speed {
	top: 33.33%;
}

#illumination {
	top: 66.66%;
}

/* 全画面ピン留めコンテナ (CSS StickyによりGPUコンポジタで完全静止固定・小刻みな揺れを100%根絶) */
.p-features__inner {
	position: sticky;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	height: 100svh;
	overflow: hidden;
}

/* 1. Positive.co.jp Commitment 準拠の画像スタックコンテナ */
.p-features__img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: 1;
}

.p-features__img-item {
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.p-features__img1 {
	position: relative;
	z-index: 1;
	will-change: transform;
}

.p-features__img2 {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	will-change: transform;
}

.p-features__img3 {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 3;
	will-change: transform;
}

.p-features__img .img-inner {
	width: 100%;
	height: 100%;
	transform-origin: 50% 50%;
	will-change: transform;
}

.p-features__img .img-inner picture,
.p-features__bg-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
	display: block;
}

/* 背景オーバーレイ (半透明グラデーション) */
.p-features__overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(180deg, rgb(255 255 255 / 80%) 0%, rgba(0, 0, 0, 0.3) 25%, rgba(0, 0, 0, 0.3) 70%, rgba(0, 0, 0, 0.85) 100%);
	z-index: 2;
	pointer-events: none;
}

/* 2. 枠外の装飾レイヤー */
.p-features__deco {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 3;
	overflow: hidden;
}

/* ナンバリング（縁取り完全廃止・上質で端正な透かし彫りデザイン） */
.p-features__deco-nums {
	position: absolute;
	top: 6%;
	right: 6%;
	width: auto;
	height: auto;
	pointer-events: none;
	display: flex;
	justify-content: flex-end;
}

.p-features__deco-num {
	position: absolute;
	top: 0;
	right: 0;
	font-family: var(--font-family-Jost);
	font-size: clamp(80px, 12vw, 160px);
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	color: rgba(255, 255, 255, 0.12);
	-webkit-text-stroke: none;
	text-shadow: none;
	user-select: none;
	letter-spacing: 0.04em;
	opacity: 0;
	will-change: transform, opacity;
}

.p-features__deco-num[data-index="0"] {
	color: rgba(255, 235, 170, 0.5);
}

.p-features__deco-num[data-index="1"] {
	color: rgba(255, 235, 170, 0.5);
}

.p-features__deco-num[data-index="2"] {
	color: rgba(255, 235, 170, 0.5);
}

/* 枠外英文タイポグラフィ（上部配置・ハイブランドの上質な佇まい） */
.p-features__deco-ens {
	position: absolute;
	top: clamp(92px, 12.5vh, 130px);
	left: 4%;
	width: calc(100% - 8%);
	height: clamp(40px, 6vw, 80px);
	pointer-events: none;
}

.p-features__deco-en {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	font-family: var(--font-family-Jost);
	font-size: clamp(24px, 4.5vw, 68px);
	font-weight: 500;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	white-space: nowrap;
	line-height: 1;
	user-select: none;
	color: rgba(255, 255, 255, 0.18);
	-webkit-text-stroke: none;
	text-shadow: none;
	opacity: 0;
	will-change: transform, opacity;
}

.p-features__deco-en[data-index="0"] {
	color: rgba(255, 210, 170, 0.22);
	color: rgba(255, 240, 180, 0.22);
}

.p-features__deco-en[data-index="1"] {
	color: rgba(190, 245, 255, 0.22);
	color: rgba(255, 240, 180, 0.22);
}

.p-features__deco-en[data-index="2"] {
	color: rgba(255, 240, 180, 0.22);
}


/* 3. 前面コンテンツステージ */
.p-features__stage {
	position: absolute;
	inset: 0;
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(90px, 12vh, 120px) clamp(2rem, 4vw, 6rem) clamp(40px, 5vh, 60px);
	pointer-events: none;
	box-sizing: border-box;
}

.p-features__content-inner {
	max-width: 1100px;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: flex-start;
	/* 左寄り配置で右側の絶景・タワーを抜かす */
	pointer-events: auto;
}

.p-features__cards {
	position: relative;
	width: 100%;
	max-width: 680px;
	height: 100%;
	display: flex;
	align-items: flex-start;
}

/* グラスモーフィズムカード（ミニマル極上UI・動的スクロール対応） */
.p-features__card {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	backdrop-filter: blur(24px);
	-webkit-backdrop-filter: blur(24px);
	padding: clamp(2.4rem, 2.2rem + 2vw, 4.8rem) clamp(2rem, 2rem + 2.5vw, 5.2rem);
	opacity: 0;
	pointer-events: none;
	will-change: transform, opacity;
}

.p-features__card[data-index="1"] {
	box-shadow: 0 24px 60px rgba(0, 15, 30, 0.55), inset 0 1px 0 rgba(0, 212, 255, 0.25);
}

.p-features__card[data-index="2"] {
	box-shadow: 0 24px 60px rgba(20, 15, 5, 0.55), inset 0 1px 0 rgba(255, 215, 0, 0.25);
}

/* 見出し */
.p-features__title {
	font-family: var(--font-family-Zen-Go);
	color: #ffffff;
	margin: 0 0 2.4rem;
	display: block;
	text-align: left;
}

.p-features__title-sub {
	display: block;
	margin-bottom: 0.6rem;
	font-size: clamp(1.6rem, 1.2rem + 1vw, 2.4rem);
	font-weight: 500;
	letter-spacing: 0.12em;
	color: rgba(255, 255, 255, 0.9);
	line-height: 1.3;
}

.p-features__title-main {
	display: inline;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	font-size: clamp(2.4rem, 1.8rem + 1.8vw, 4rem);
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.3;
	background: linear-gradient(180deg, #ffffff 25%, rgb(242 251 161) 100%);
	background: linear-gradient(180deg, #ffffff 25%, #c0a900 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.6));
}

.p-features__card[data-index="1"] .p-features__title-main {
	background: linear-gradient(180deg, #ffffff 25%, #53d6e2 100%);
	background: linear-gradient(180deg, #ffffff 25%, #c0a900 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.p-features__card[data-index="2"] .p-features__title-main {
	background: linear-gradient(180deg, #ffffff 25%, #c0a900 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* リード文 */
.p-features__lead {
	font-family: var(--font-family-Zen-Go, sans-serif);
	display: flex;
	flex-direction: column;
	gap: 1.4rem;
	text-align: left;
}

.p-features__lead p {
	font-size: clamp(14px, 1rem + 0.4vw, 17px);
	line-height: 2.1;
	letter-spacing: 0.06em;
	color: rgba(255, 255, 255, 0.88);
	margin: 0;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

@media screen and (max-width: 768px) {
	/* 1. コンテンツステージ：カード上部余白を大幅に拡大し、窮屈感を完全解消 */
	.p-features__stage {
		padding: clamp(140px, 18vh, 160px) 1.6rem clamp(24px, 3vh, 32px);
	}

	.p-features__content-inner {
		justify-content: center;
		padding-left: 24px; /* 左端の縦書き英文との干渉防止クリアランス */
	}

	.p-features__card {
		padding: 2.4rem 1.8rem;
		border-radius: 20px;
	}

	/* 2. ナンバリング：右上に大胆なサイズ感で配置（カード右上角に少し当たる） */
	.p-features__deco-nums {
		top: clamp(55px, 7.5vh, 70px);
		right: 4%;
		width: auto;
	}

	.p-features__deco-num {
		font-size: clamp(80px, 21vw, 105px);
		letter-spacing: 0.02em;
	}

	/* 3. 英語装飾：左端に洗練された縦書きタイポグラフィ（高コントラスト・文字拡大） */
	.p-features__deco-ens {
		top: 50%;
		bottom: auto;
		left: 12px;
		width: 32px;
		height: 340px;
		transform: translateY(-50%);
		pointer-events: none;
		    opacity: 0.5;
	}

	.p-features__deco-en {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		writing-mode: vertical-rl;
		text-orientation: mixed;
		font-family: var(--font-family-Jost);
		font-size: clamp(13px, 3.4vw, 15px);
		font-weight: 700;
		letter-spacing: 0.30em;
		text-transform: uppercase;
		white-space: nowrap;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #ffffff !important;
		opacity: 0;
	}
}

.u-nowrap {
	white-space: nowrap;
}

/* ==========================================================================
   #message: 締めくくりのひとことセクション
   ========================================================================== */
#message {
	position: relative;
	background: #000000;
	color: #ffffff;
	z-index: 5;
}

#message .c-section-body {
	padding: clamp(80px, 12vh, 160px) 0;
	gap: 0;
}

.p-message__content {
	max-width: 860px;
	width: 100%;
	margin: 0 auto;
	text-align: center;
}

#message .p-message__text {
	font-family: var(--font-family-Zen-Go);
	font-size: clamp(26px, 1.8rem + 1.2vw, 40px) !important;
	font-weight: 700 !important;
	line-height: 2.1;
	letter-spacing: 0.12em;
	color: #ffffff;
	margin: 0;
	text-shadow: 0 2px 20px rgba(0, 0, 0, 0.85);
}

.p-message__line {
	display: block;
	will-change: transform, opacity, filter;
}

@media screen and (max-width: 768px) {
	#message .c-section-body {
		padding: clamp(60px, 10vh, 100px) 0;
	}

	#message .p-message__text {
		font-size: clamp(22px, 1.4rem + 1.8vw, 28px) !important;
		line-height: 2.0;
		letter-spacing: 0.08em;
	}
}

/* ==========================================================================
   #product: プロダクト詳細・スペック画像セクション（通常表示）
   ========================================================================== */
#product {
	position: relative;
	background: #000000;
	z-index: 5;
	width: 100%;
	padding: clamp(60px, 8vh, 120px) 24px;
	box-sizing: border-box;
}

.p-product__container {
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	box-sizing: border-box;
}

.p-product__header {
	width: 100%;
	text-align: center;
	margin-bottom: clamp(24px, 4vw, 48px);
}

#product .p-product__lead-en {
	font-family: var(--font-family-Jost);
	font-size: clamp(28px, 2.4rem + 2.4vw, 56px) !important;
	font-weight: 700 !important;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	line-height: 1.15;
	margin: 0;
	color: #ffffff;
	background: linear-gradient(135deg, #ffffff 30%, #e2e8f0 70%, #94a3b8 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	text-shadow: 0 4px 24px rgba(0, 0, 0, 0.7);
}

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

.p-product__picture {
	width: 100%;
	display: block;
}

.p-product__img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 16px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.8), 0 0 40px rgba(255, 86, 17, 0.12);
}

@media screen and (max-width: 768px) {
	#product {
		padding: clamp(40px, 6vh, 80px) 16px;
	}

	.p-product__header {
		margin-bottom: clamp(16px, 3.5vw, 28px);
	}

	#product .p-product__lead-en {
		font-size: clamp(22px, 1.2rem + 3.8vw, 32px) !important;
		letter-spacing: 0.10em;
	}

	.p-product__img {
		border-radius: 12px;
	}
}

/* ==========================================================================
   #thirty-fifth: 35周年ロゴリンクセクション
   ========================================================================== */
#thirty-fifth {
	position: relative;
	background: rgb(0 0 0 / 60%);
	z-index: 5;
}

#thirty-fifth .c-section-body {
	padding: clamp(20px, 3vh, 40px) 0;
	gap: 0;
}

.p-thirty-fifth__banner {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.p-thirty-fifth__link {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
  flex-direction: column;
  color: #fff;
  text-decoration: underline;
}

.p-thirty-fifth__link:hover {
  transform: translateY(-4px) scale(1.02);
  opacity: 0.85;
}

.p-thirty-fifth__link p {
  margin-top: 12px;
}

.p-thirty-fifth__logo {
  width: clamp(200px, 22vw, 300px);
  height: auto;
  display: block;
  filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.6));
}

@media screen and (max-width: 768px) {
  #thirty-fifth .c-section-body {
    padding: clamp(16px, 2.5vh, 32px) 0;
  }

  .p-thirty-fifth__logo {
    width: clamp(160px, 45vw, 220px);
  }
}