@charset "UTF-8";
/*
 * 特定LP固有のCSS (35th Anniversary LP)
 *
 * 役割: このLPだけで必要なテーマ配色・
 *       CSS変数オーバーライド・LP固有のスタイル調整
 * スコープ: このLPのみ（他LPには影響しない）
 *
 * 目次:
 *  1. :root（テーマ変数）
 *  2. ベース・共通設定（#thirty-fifth, html, スクロールマージン, 共通ヘッダーCTAなど）
 *  3. ローディング画面 (#loading)
 *  4. FV (#fv)
 *  5. イントロダクション & ページ内ナビゲーション (#term)
 *  6. アトラクション (#attraction)
 *  7. スペシャルコンテンツ (#special-contents)
 *  8. アニバーサリーフッター (#anniversary_footer)
 *  9. PC レスポンシブ最適化 (@media screen and (min-width: 1024px))
 */


/* ==========================================================================
   1. :root（テーマ変数）
   ========================================================================== */

:root {
	--color-primary: #e5ae0f;
	--color-secondary: #ae1c28;
	--color-accent: #aa7d3c;
	--color-gold: #d79016;
	--color-gold-light: #fbe38e;
	--color-gold-base: #e09e17;
	--color-gold-dark: #b87504;
	--color-brown-text: #7a5006;
	--background-color: #f0eccd;
	--text-color: #21468b;
	--border-radius: clamp(2rem, -0.286rem + 4.76vw, 4rem);


	/* PCカンプ基準幅 */
	--vw: 1440;
}


/* ==========================================================================
   2. ベース・共通設定
   ========================================================================== */

html {
	scroll-behavior: auto;
}

#attraction,
#special-contents,
.special-item {
	scroll-margin-top: clamp(60px, 8vw, 100px);
}

#thirty-fifth main {
	background: var(--background-color);
	color: var(--text-color);
	font-family: var(--font-family-Zen-Go, sans-serif);
	font-weight: 500;
	overflow-x: clip;
}

#thirty-fifth h3,
#thirty-fifth h4,
#thirty-fifth h5,
#thirty-fifth h6 {
	letter-spacing: 0;
}

#thirty-fifth main:before {
	content: "";
	background: url(../img/index/gold_sp.webp);
	background-size: cover;
	position: fixed;
	width: 100%;
	height: 100%;
	opacity: 1;
	top: 0;
}

/* ==========================================================================
   article & .section 統一余白設計
   ========================================================================== */

#thirty-fifth article {
	margin: 0;
	padding: 0;
	position: relative;
}

#thirty-fifth .section {
	margin: 0;
	padding: var(--space-section) 0;
	position: relative;
	z-index: 1;
}

/* ページトップボタン */
.htb-pagetop {
	opacity: 1;
	visibility: visible;
}

/* 共通ヘッダーCTA位置調整 */
@media screen and (max-width: 768px) {
	.h-header__cta.sp-side {
		transition: all 0.4s;
	}

	body.scroll .h-header__cta.sp-side {
		bottom: 40%;
		transition: all 0.4s;
	}

	body.upfixed .h-header__cta.sp-side {
		bottom: 35%;
	}
}

@media screen and (max-width: 1024px) {
	body.scroll .h-header__cta.sp-side {
		right: 0;
		background: transparent;
		padding: 0;
		width: 4rem;
		transform: scale(0.8);
		transform-origin: right;
		top: 30%;
	}

	body.scroll .h-header__cta.sp-side a:before {
		margin: 0 auto;
		width: 100%;
		height: 20px;
	}

	body.scroll .h-header__cta.sp-side a.cta__ticket span,
	body.scroll .h-header__cta.sp-side a.cta__hotel span {
		width: auto;
		writing-mode: vertical-rl;
		letter-spacing: 3px;
	}
}


/* ==========================================================================
   3. ローディング画面 (#loading)
   ========================================================================== */

.loading {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--background-color);
	opacity: 1;
	visibility: visible;
	transition: opacity 0.6s ease, visibility 0.6s ease;
}

.loading.is-loaded {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.loading__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2rem;
	padding: 2rem;
}

.loading__logo {
	width: clamp(140px, 32vw, 220px);
	height: auto;
	aspect-ratio: 600 / 528;
	object-fit: contain;
	display: block;
}

.loading__progress {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	width: 100%;
}

.loading__bar-wrap {
	width: clamp(160px, 36vw, 240px);
	height: 3px;
	background: rgba(122, 80, 6, 0.18);
	border-radius: 99px;
	overflow: hidden;
	position: relative;
}

.loading__bar {
	height: 100%;
	width: 0%;
	background: linear-gradient(90deg, #b8862d, #f5d77f, #b8862d);
	border-radius: 99px;
	box-shadow: 0 0 8px rgba(245, 215, 127, 0.7);
	transition: width 0.08s ease-out;
}

.loading__percent {
	font-family: var(--font-family-Zen-Go, sans-serif);
	font-size: clamp(1.2rem, 1.1rem + 0.3vw, 1.4rem);
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--color-brown-text);
}


/* ==========================================================================
   4. FV (#fv)
   ========================================================================== */

#fv {
	position: relative;
	z-index: 3;
}

#thirty-fifth #fv figure {
	position: relative;
	display: block;
	margin: 0;
	padding: 0;
	line-height: 0;
}

#thirty-fifth #fv figure img {
	width: 100%;
	height: auto;
	display: block;
}


/* ==========================================================================
   5. イントロダクション & ページ内ナビゲーション (#term)
   ========================================================================== */

#term {
	position: relative;
	z-index: 2;
	overflow: hidden;
}

#term .section:before {
	content: "";
	mask-image: url(../img/35th.svg);
	-webkit-mask-image: url(../img/35th.svg);
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
	position: absolute;
	width: 100%;
	height: 100%;
	background: #ffffff;
	opacity: 0.15;
}


/* オランダ赤リボン Canvas (右側背景レイヤー) */
.term-ribbon-canvas {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 1;
	transform: translateZ(0);
	will-change: transform;
}


/* メッセージエリア */
.term-intro {
	position: relative;
	z-index: 1;
}

.term-message {
	text-align: center;
	padding: 1.2rem 1.6rem 2.2rem;
	max-width: 960px;
	margin: 0 auto;
	box-sizing: border-box;
	--message-unit: clamp(0.85px, calc(100vw / 375), 1.2px);
}

.term-message__lead {
	display: inline-block;
	color: #ffffff;
	font-size: calc(32 * var(--message-unit));
	font-weight: 700;
	margin-bottom: 2rem;
	line-height: 140%;
	/* ホワイトベースにゴールド／輝きの光沢グラデーション */
	background: linear-gradient(125deg,
			#ffffff 0%,
			#ffffff 38%,
			#ffe27d 45%,
			#ffffff 50%,
			#ffe27d 55%,
			#ffffff 62%,
			#ffffff 100%);
	background-size: 260% 100%;
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: textShine 4.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
	/* GPUレイヤー分離と軽量化されたシャドウでアニメーション時の再描画負荷を最小化 */
	transform: translateZ(0);
	will-change: background-position;
	filter: drop-shadow(0 2px 8px rgba(60, 40, 5, 0.45));
}

@keyframes textShine {
	0% {
		background-position: 100% center;
	}

	35% {
		background-position: 0% center;
	}

	100% {
		background-position: 0% center;
	}
}

.term-message__text {
	position: relative;
	display: inline-block;
	width: 100%;
	max-width: 660px;
	margin: 0 auto;
	padding: clamp(1.8rem, 2.6vw, 2.8rem) clamp(1.2rem, 3vw, 2.8rem);
	font-size: calc(15 * var(--message-unit));
	font-weight: 600;
	line-height: 2.1;
	letter-spacing: 0.05em;
	box-sizing: border-box;
	color: var(--color-brown-text);
	filter: drop-shadow(0 2px 8px rgba(255, 255, 255, 1.5));
}

/* 上下の上品なゴールドグラデーションライン */
.term-message__text::before,
.term-message__text::after {
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: clamp(240px, 88%, 560px);
	height: 1px;
	background: linear-gradient(90deg, transparent 0%, rgb(215 144 22) 12%, #795548 35%, #795548 50%, #795548 65%, rgb(215 144 22) 88%, transparent 100%);
	box-shadow: 0 0 6px rgba(229, 174, 15, 0.35);
}

.term-message__text::before {
	top: 0;
}

.term-message__text::after {
	bottom: 0;
}

/* ==========================================================================
   6. アトラクション (#attraction)
   ========================================================================== */

#attraction {
	position: relative;
	overflow: hidden;
	z-index: 1;
}

/* セクション全体を下端まで覆う赤背景レイヤー（上から下へのサテン・カーテンワイプ展開） */
.attraction-ribbon-backdrop {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #e62310;
	/* リボンの完全被覆サテン赤 */
	z-index: 0;
	pointer-events: none;
	clip-path: inset(0 0 100% 0);
	transition: clip-path 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

.attraction-ribbon-backdrop.is-active {
	clip-path: inset(0 0 0% 0);
	display: none;
}

/* アトラクション背景リボンCanvasステージ（backdropの前面に配置） */
.attraction-ribbon-stage {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 1;
	overflow: hidden;
}

.attraction-ribbon-canvas {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: contain;
	object-position: top center;
}

/* SP時: リボン演出を1.3倍に拡大し、右寄せに配置 */
@media screen and (max-width: 1023px) {
	.attraction-ribbon-canvas {
		object-position: top right;
		transform-origin: top right;
		transform: scale(1.3);
	}
}

/* アトラクションのコンテンツ（リボンCanvasおよびbackdropの手前に配置） */
#attraction .section {
	position: relative;
	z-index: 2;
}




#attraction .page__body__inner--full {
	width: 100%;
	max-width: 100%;
	padding: 0 !important;
	margin: 0 auto;
	position: relative;
	display: block;
}

#attraction .page__body__inner--full .attraction-stack-wrap {
	width: 100%;
	position: relative;
	z-index: 1;
}

/* セクション共通ヘッダー */
.section-header {
	text-align: center;
	margin-bottom: 3rem;
}

.section-header__title {
	position: relative;
	color: #ffffff;
	font-size: calc(clamp(2.4rem, 1.8rem + 1.8vw, 3.6rem) * 1.2);
	font-weight: 700;
	display: inline-block;
	margin-bottom: 1.6rem;
	width: 100%;
	filter: drop-shadow(0 2px 6px rgba(80, 45, 0, 0.65)) drop-shadow(0 1px 2px rgba(60, 30, 0, 0.75));
	/* ホワイト主軸（80%以上）＋繊細なゴールド光彩による高視認性プレミアムグラデーション */
	background: linear-gradient(125deg,
			#ffffff 0%,
			#ffffff 38%,
			#ffe89c 48%,
			#ffffff 52%,
			#ffe89c 56%,
			#ffffff 65%,
			#ffffff 100%);
	background-size: 200% auto;
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.section-header__lead {
	color: #ffffff;
	font-size: calc(clamp(1.3rem, 1.1rem + 0.4vw, 1.5rem) * 1.2);
	font-weight: 500;
	line-height: 200%;
	max-width: 640px;
	margin: 0 auto;
}

/* アトラクション カードリスト */
.attraction-stack-wrap {
	position: relative;
	width: 100%;
	max-width: 680px;
	margin: 2rem auto 0;
	padding: 0 1.5rem;
	box-sizing: border-box;
}

/* カードコンテナ */
.attraction-cards-stage {
	position: relative;
	width: 100%;
	margin: 0 auto;
}

/* メインアトラクションカード（SP: シンプルな縦並びレイアウト） */
.attraction-main-card {
	position: relative;
	background: #000;
	border-radius: clamp(14px, 2.4vw, 22px);
	overflow: hidden;
	-webkit-mask-image: -webkit-radial-gradient(white, black);
	isolation: isolate;
	width: 100%;
	max-width: 680px;
	margin: 0 auto clamp(24px, 5vw, 40px);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
}

/* パノラマコースターカードのみ専用HTBネイビー背景 */
.attraction-main-card[data-card="1"],
.attraction-main-card--coaster {
	background: var(--color-htbnavy);
}

/* ミッフィーカードのみ専用オレンジ背景 */
.attraction-main-card[data-card="4"],
.attraction-main-card--miffy {
	background: #ea5413;
}

.attraction-main-card:last-child {
	margin-bottom: clamp(40px, 8vw, 64px);
}

.attraction-main-card__visual {
	position: relative;
	width: 100%;
	aspect-ratio: 1200 / 848;
	height: auto;
	background: var(--color-secondary);
	overflow: hidden;
	border-top-left-radius: clamp(14px, 2.4vw, 22px);
	border-top-right-radius: clamp(14px, 2.4vw, 22px);
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.attraction-main-card__visual img {
	width: 100%;
	height: 100%;
	aspect-ratio: 1200 / 848;
	object-fit: contain;
	object-position: center;
	border-top-left-radius: clamp(14px, 2.4vw, 22px);
	border-top-right-radius: clamp(14px, 2.4vw, 22px);
	display: block;
	transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}


.attraction-main-card__body {
	padding: 2.4rem 2rem 3rem;
	text-align: center;
	color: #ffffff;
	--card-unit: clamp(0.85px, calc(100vw / 375), 1.2px);
}

/* New arrival バッジ（アイコン風 & キラッとシャイン演出） */
.attraction-main-card__badge {
	display: inline-flex;
	align-items: center;
	margin-bottom: calc(14 * var(--card-unit));
	justify-content: center;
}

.c-badge-new {
	position: relative;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0.55rem 1.45rem 0.5rem 1.15rem;
	background: linear-gradient(135deg, #ffffff 0%, #fff9e6 45%, #fbe38e 100%);
	border-radius: 9999px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28), 0 0 0 1.5px rgba(255, 255, 255, 0.85);
	transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s ease;
	z-index: 1;
}

/* キラッと左から右へ光が走るシャインアニメーション */
.c-badge-new::after {
	content: "";
	position: absolute;
	top: -50%;
	left: -130%;
	width: 70%;
	height: 200%;
	background: linear-gradient(115deg,
			rgba(255, 255, 255, 0) 0%,
			rgba(255, 255, 255, 0.15) 20%,
			rgba(255, 255, 255, 0.95) 50%,
			rgba(255, 255, 255, 0.15) 80%,
			rgba(255, 255, 255, 0) 100%);
	transform: rotate(25deg);
	pointer-events: none;
	animation: badgeShine 3.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
	z-index: 2;
}

@keyframes badgeShine {

	0%,
	20% {
		left: -130%;
	}

	45%,
	100% {
		left: 170%;
	}
}

.c-badge-new__icon {
	width: clamp(14px, 3.8vw, 17px);
	height: clamp(14px, 3.8vw, 17px);
	flex-shrink: 0;
	color: #d79016;
	filter: drop-shadow(0 1px 2px rgba(215, 144, 22, 0.4));
	animation: badgeStarTwinkle 3.5s ease-in-out infinite;
	transform-origin: center center;
	position: relative;
	z-index: 3;
}

@keyframes badgeStarTwinkle {

	0%,
	20% {
		transform: scale(1) rotate(0deg);
		filter: drop-shadow(0 1px 2px rgba(215, 144, 22, 0.4));
	}

	32% {
		transform: scale(1.3) rotate(18deg);
		filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 10px rgba(229, 174, 15, 0.85));
	}

	44%,
	100% {
		transform: scale(1) rotate(0deg);
		filter: drop-shadow(0 1px 2px rgba(215, 144, 22, 0.4));
	}
}

.c-badge-new__label {
	color: #916e04;
	font-family: var(--font-family-Jost, "Jost", sans-serif);
	font-size: calc(14.5 * var(--card-unit));
	font-weight: 700;
	letter-spacing: 0.07em;
	line-height: 1;
	position: relative;
	top: 0.5px;
	z-index: 3;
}

.attraction-main-card:hover .c-badge-new {
	transform: translateY(-2px) scale(1.03);
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.32), 0 0 0 2px rgba(255, 255, 255, 0.95), 0 0 14px rgba(251, 227, 142, 0.6);
}

.attraction-main-card__name {
	font-size: calc(24 * var(--card-unit));
	font-weight: 700;
	line-height: 1.35;
	margin-bottom: calc(14 * var(--card-unit));
	text-align: center;
}

.attraction-main-card__name--logo {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: clamp(52px, 13vw, 72px);
	margin-bottom: calc(14 * var(--card-unit));
}

.attraction-main-card__name--logo img {
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
	max-width: 70%;
}


.attraction-main-card__text {
	font-size: calc(13 * var(--card-unit));
	line-height: 1.8;
	max-width: 520px;
	margin: 0 auto calc(22 * var(--card-unit));
	opacity: 0.95;
	text-align: center;
}

.attraction-main-card__link {
	display: flex;
	justify-content: center;
}

/* 共通コンポーネント (.btn) のデフォルト矢印SVGを無効化 */
a.btn.btn-detail>span:first-child:after,
button.btn.btn-detail>span:first-child:after,
.btn-detail>span:first-child:after {
	content: none !important;
	display: none !important;
	mask-image: none !important;
	-webkit-mask-image: none !important;
}

/* 共通コンポーネント (.btn) のホバー不透明度低下を無効化 */
a.btn.btn-detail:hover {
	opacity: 1;
}

.btn-detail {
	display: inline-flex;
	justify-content: space-between;
	align-items: center;
	width: clamp(190px, calc(200 * var(--card-unit, 1px)), 220px);
	max-width: 100%;
	height: clamp(44px, calc(48 * var(--card-unit, 1px)), 52px);
	padding: 0 clamp(20px, calc(24 * var(--card-unit, 1px)), 28px);
	border-radius: 9999px;
	background: var(--text-color);
	color: #fff;
	font-size: clamp(1.3rem, calc(14 * var(--card-unit, 1px)), 1.5rem);
	font-weight: 700;
	text-decoration: none;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
	cursor: pointer;
	position: relative;
	z-index: 5;
	pointer-events: auto;
	box-sizing: border-box;
	transition: width 0.3s cubic-bezier(0.25, 1, 0.5, 1), transform 0.2s, box-shadow 0.2s;
}

.btn-detail:hover {
	width: clamp(210px, calc(220 * var(--card-unit, 1px)), 240px);
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
	color: #fff;
}

.btn-detail>span:first-child {
	display: inline-block;
	line-height: 1;
}

/* 右端の矢印 (最初から矢印として常時表示) */
.btn-detail .btn-detail__dot {
	display: block;
	position: relative;
	width: 14px;
	height: 2px;
	border-radius: 1px;
	background: #ffffff;
	transition: width 0.3s cubic-bezier(0.25, 1, 0.5, 1), transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
	flex-shrink: 0;
	margin: 0;
}

/* 矢印の先端（「>」部分: 最初から常時表示） */
a.btn.btn-detail .btn-detail__dot:after,
.btn-detail .btn-detail__dot:after {
	content: "" !important;
	display: block !important;
	position: absolute;
	top: 50%;
	right: 0;
	width: 6px;
	height: 6px;
	background: none !important;
	background-color: transparent !important;
	mask-image: none !important;
	-webkit-mask-image: none !important;
	border-top: 2px solid #ffffff;
	border-right: 2px solid #ffffff;
	border-bottom: none;
	border-left: none;
	transform: translateY(-50%) rotate(45deg);
	opacity: 1 !important;
	transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

/* ホバー時: 矢印が20pxに伸長し、右へ4pxスライド */
a.btn.btn-detail:hover .btn-detail__dot,
.btn-detail:hover .btn-detail__dot {
	width: 20px !important;
	height: 2px !important;
	border-radius: 1px !important;
	background: #ffffff !important;
	transform: translateX(4px);
}

a.btn.btn-detail:hover .btn-detail__dot:after,
.btn-detail:hover .btn-detail__dot:after {
	opacity: 1 !important;
}

/* ==========================================================================
   6-1. 35周年ロゴ＆コンセプト（パララックス外・通常フロー）
   ========================================================================== */

.attraction-concept {
	position: relative;
	z-index: 2;
	width: 100%;
	margin-top: clamp(4rem, 6vw, 8rem);
	text-align: center;
}

.attraction-concept__inner {
	max-width: 800px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
}

.attraction-concept__logo {
	width: clamp(100%, 45vw, 340px);
	margin: 0 auto clamp(2.4rem, 4vw, 4rem);
	perspective: 1000px;
}

.attraction-concept__logo img {
	width: 100%;
	height: auto;
	display: block;
	transform-origin: center center;
	transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* PC時のホバーインタラクション：弾むようなバウンスフィードバック */
@media (hover: hover) and (pointer: fine) {
	.attraction-concept__logo:hover img {
		transform: scale(1.05) rotate(-1.5deg);
	}
}



.attraction-concept__body {
	width: 100%;
	padding: 0 clamp(2rem, 5vw, 3.2rem);
	box-sizing: border-box;
}

.attraction-concept__title {
	color: var(--text-color);
	font-size: clamp(2.0rem, 3.6vw, 3.0rem);
	font-weight: 700;
	line-height: 1.45;
	margin-bottom: clamp(1.6rem, 2.5vw, 2.4rem);
	text-align: center;
	letter-spacing: 0.05em;
}

.attraction-concept__text {
	color: var(--text-color);
	font-size: clamp(1.4rem, 2vw, 1.7rem);
	line-height: 2;
	text-align: center;
	max-width: 680px;
	margin: 0 auto;
	font-weight: 600;
	color: var(--color-brown-text);
	filter: drop-shadow(0 2px 8px rgba(255, 255, 255, 1.5));
}


/* ==========================================================================
   7. スペシャルコンテンツ (#special-contents)
   ========================================================================== */

#special-contents {
	position: relative;
	z-index: 2;
	overflow: hidden;
}

#special-contents:before {
	content: "";
	background: var(--text-color);
	position: absolute;
	left: 0;
	width: 100%;
	height: 30%;
	top: 5rem;
	transform: scaleX(0);
	opacity: 0;
	transform-origin: center center;
	transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s ease-out;
	will-change: transform, opacity;
}

#special-contents.is-active:before {
	transform: scaleX(1);
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	#special-contents:before {
		transform: none !important;
		opacity: 1 !important;
		transition: none !important;
	}
}


/* アトラクション末尾・Special Contents導入リード文 */
.attraction-teaser__lead {
	position: relative;
	z-index: 2;
	color: #ffffff;
	font-size: calc(clamp(2rem, 1.5rem + 1.2vw, 2.6rem) * 1.2);
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.03em;
	text-align: center;
	margin-bottom: clamp(2.4rem, 4vw, 4rem);
	filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
	padding-top: 5rem;
}

.special-list-body {
	position: relative;
}

/* Special Contents 見出し（ゴシック体） */
#special-contents .section-header__title {
	font-family: var(--font-family-Zen-Go, sans-serif);
	font-weight: 700;
	letter-spacing: 0.04em;
	margin-bottom: 0;
}

/* コンテンツリスト（左右交互配置） */
.special-list {
	max-width: 680px;
	margin: 0 auto;
	padding: 0 3.2rem;
}

.special-item {
	display: flex;
	align-items: center;
	gap: 2rem;
	padding: 2rem;
	background: radial-gradient(circle, rgb(255 213 100) 0%, rgb(255 246 228) 50%);
	border-radius: 1.6rem;
	box-shadow: 0 2px 20px rgba(0, 0, 0, 0.45);
	margin-bottom: 2rem;
}

.special-item:last-child {
	margin-bottom: 0;
}

.special-item--reverse {
	flex-direction: row-reverse;
}

.special-item__icon {
	flex: 0 0 clamp(110px, 30vw, 160px);
	max-width: 160px;
}

.special-item__icon img {
	width: 100%;
	height: auto;
	display: block;
	filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.12));
}

/* キーフレーム設計：スクワッシュ＆ストレッチでおもちゃ箱の弾力を再現 */

/* グルメ：ことこと揺れてポンッとホップ */
@keyframes toyBoxGourmet {

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

	6% {
		transform: translateY(0) rotate(-6deg) scale(1, 1);
	}

	12% {
		transform: translateY(0) rotate(5deg) scale(1, 1);
	}

	18% {
		transform: translateY(0) rotate(-3deg) scale(1, 1);
	}

	24% {
		transform: translateY(2px) rotate(0deg) scale(1.05, 0.95);
		/* ため（Squash） */
	}

	32% {
		transform: translateY(-16px) rotate(3deg) scale(0.95, 1.06);
		/* 跳躍（Stretch） */
	}

	38% {
		transform: translateY(0) rotate(-1deg) scale(1.04, 0.96);
		/* 着地（Squash） */
	}

	44% {
		transform: translateY(-4px) rotate(0deg) scale(0.98, 1.02);
		/* 小リバウンド */
	}

	50%,
	90% {
		transform: translateY(0) rotate(0deg) scale(1, 1);
		/* 落ち着く休憩時間 */
	}
}

/* グッズ：左右に体を振りながら楽しそうにピョンピョン跳ねる */
@keyframes toyBoxGoods {

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

	6% {
		transform: translateY(0) rotate(7deg) scale(1, 1);
	}

	12% {
		transform: translateY(0) rotate(-6deg) scale(1, 1);
	}

	18% {
		transform: translateY(0) rotate(4deg) scale(1, 1);
	}

	24% {
		transform: translateY(2px) rotate(0deg) scale(1.06, 0.94);
	}

	31% {
		transform: translateY(-14px) rotate(-4deg) scale(0.96, 1.05);
	}

	36% {
		transform: translateY(1px) scale(1.03, 0.97);
	}

	42% {
		transform: translateY(-8px) rotate(2deg) scale(0.97, 1.03);
		/* 2回目のちょこん跳ね */
	}

	48% {
		transform: translateY(0) rotate(0deg) scale(1.02, 0.98);
	}

	54%,
	90% {
		transform: translateY(0) rotate(0deg) scale(1, 1);
	}
}

/* 宿泊プラン：ゆったり揺れてふわっとゴージャスにホップ */
@keyframes toyBoxPlan {

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

	8% {
		transform: translateY(0) rotate(-5deg) scale(1, 1);
	}

	16% {
		transform: translateY(0) rotate(5deg) scale(1, 1);
	}

	24% {
		transform: translateY(2px) rotate(0deg) scale(1.05, 0.95);
	}

	34% {
		transform: translateY(-18px) rotate(-2deg) scale(0.94, 1.07);
	}

	42% {
		transform: translateY(0) rotate(1deg) scale(1.04, 0.96);
	}

	48% {
		transform: translateY(-5px) rotate(0deg) scale(0.98, 1.02);
	}

	54%,
	90% {
		transform: translateY(0) rotate(0deg) scale(1, 1);
	}
}

.special-item__body {
	flex: 1 1 auto;
	color: #ffffff;
}

.special-item__title {
	font-size: calc(clamp(2.2rem, 1.6rem + 1.4vw, 3rem) * 1.2);
	font-weight: 700;
	margin-bottom: 1rem;
	display: inline-block;
	color: #ffffff;
	/* ホワイトを主軸（80%以上）とし、繊細なゴールド光彩を走らせた高視認性グラデーション */
	background: linear-gradient(125deg,
			#ffffff 0%,
			#ffffff 40%,
			#ffe89c 48%,
			#ffffff 52%,
			#ffe89c 56%,
			#ffffff 64%,
			#ffffff 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	/* 黄色背景から文字をくっきり際立たせるコントラストシャドウ */
	filter: drop-shadow(0 2px 6px rgba(80, 45, 0, 0.65)) drop-shadow(0 1px 2px rgba(60, 30, 0, 0.8));
}

.special-item__text {
	font-size: clamp(1.25rem, 1.1rem + 0.3vw, 1.45rem);
	line-height: 1.85;
	font-weight: 500;
	color: #825f08;
}

/* ==========================================================================
   8. アニバーサリーフッター (#anniversary_footer)
   ========================================================================== */

#anniversary_footer {
	position: relative;
	z-index: 2;
}

.special-closing__body {
	text-align: center;
}

.special-closing__message {
	position: relative;
	overflow: hidden;
	font-size: calc(clamp(1.8rem, 1.3rem + 1vw, 2.4rem) * 0.9);
	font-weight: 700;
	line-height: 1.6;
	margin-bottom: 1.4rem;
	padding: 2rem;
	color: var(--color-brown-text);
	box-shadow: 0 5px 20px rgb(255 255 255 / 45%);
	filter: drop-shadow(0 2px 8px rgba(255, 255, 255, 1.5));
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.22) 100%);
}

.special-closing__message > * {
	position: relative;
	z-index: 1;
}

/* 背景を斜めにキラッと走り抜ける光の筋（GPU加速・完全シームレスループ） */
.special-closing__message::before {
	content: "";
	position: absolute;
	top: -100%;
	left: 0;
	width: 50%;
	height: 300%;
	background: linear-gradient(
		90deg,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0.25) 25%,
		rgba(255, 255, 255, 0.95) 50%,
		rgba(255, 255, 255, 0.25) 75%,
		rgba(255, 255, 255, 0) 100%
	);
	transform: translate3d(-300%, 0, 0) rotate(25deg);
	pointer-events: none;
	z-index: 0;
	will-change: transform;
	animation: messageShine 4.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes messageShine {
	0% {
		transform: translate3d(-300%, 0, 0) rotate(25deg);
	}

	35%,
	100% {
		transform: translate3d(400%, 0, 0) rotate(25deg);
	}
}


/* ==========================================================================
   9. PC レスポンシブ最適化 (@media screen and (min-width: 1024px))
   ========================================================================== */

@media screen and (min-width: 1024px) {

	#thirty-fifth main:before {
		background-image: url(../img/index/gold_pc.webp);
	}


	/* #fv (PC) - 16:9領域に設定し、画像のアスペクト比を完全保持したまま高さ100%に合わせて中央配置 */
	#thirty-fifth #fv {
		width: 100%;
		background: var(--text-color);
		overflow: hidden;
		position: relative;
		z-index: 3;
	}

	#thirty-fifth #fv section {
		width: 100%;
		height: 100%;
	}

	#thirty-fifth #fv figure {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
	}

	#thirty-fifth #fv figure picture {
		height: 100%;
		display: flex;
		justify-content: center;
	}

	#thirty-fifth #fv figure img {
		width: auto;
		height: 100%;
		max-height: 100%;
		/* 画像本来の自然な比率を厳密に固定（横伸びを完全排除） */
		object-fit: contain;
		margin: 0 auto;
		display: block;
	}




	.term-message {
		--message-unit: clamp(0.75px, calc(100vw / 1440), 1.15px);
	}

	.term-message__lead {
		font-size: calc(42 * var(--message-unit));
		margin-bottom: calc(40 * var(--message-unit));
	}

	.term-message__text {
		font-size: calc(18 * var(--message-unit));
		line-height: 2.15;
		max-width: 780px;
		padding: clamp(2.4rem, 2.5vw, 3.6rem) clamp(2rem, 3vw, 4rem);
	}

	.term-message__text::before,
	.term-message__text::after {
		width: clamp(400px, 80%, 720px);
	}


	/* アトラクションカードラッパー (PC: 最大1200px・中央揃え・自然な縦並び) */
	.attraction-stack-wrap {
		width: 100%;
		max-width: 90%;
		margin: clamp(3rem, 5vw, 5rem) auto 0;
		padding: 0 2rem;
		box-sizing: border-box;
	}

	.attraction-cards-stage {
		width: 100%;
		max-width: 100%;
		margin: 0 auto;
		position: relative;
		display: flex;
		flex-direction: column;
		gap: clamp(40px, 5vw, 64px);
	}

	.attraction-main-card {
		position: relative;
		width: 100%;
		max-width: 100%;
		margin: 0 auto;
		flex-direction: row;
		align-items: stretch;
		border-radius: 24px;
		box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
		transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.35s ease;
	}

	.attraction-main-card:hover {
		transform: translateY(-4px);
		box-shadow: 0 24px 50px rgba(0, 0, 0, 0.45);
	}

	/* 偶数番目のカードは画像とテキストを左右反転 */
	.attraction-main-card:nth-child(even) {
		flex-direction: row-reverse;
	}

	.attraction-main-card__visual {
		flex: 0 0 58%;
		max-width: 58%;
		width: 58%;
		aspect-ratio: 1200 / 848;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.attraction-main-card__visual img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
	}

	.attraction-main-card:hover .attraction-main-card__visual img {
		transform: scale(1.03);
	}

	.attraction-main-card__body {
		flex: 1 1 42%;
		padding: clamp(2.5rem, 3.5vw, 4.5rem) clamp(2rem, 3vw, 4rem);
		text-align: left;
		display: flex;
		flex-direction: column;
		justify-content: center;
		box-sizing: border-box;
		--card-unit: clamp(0.75px, calc(100vw / 1440), 1.15px);
	}

	.attraction-main-card__badge {
		margin-bottom: calc(18 * var(--card-unit));
	}

	.c-badge-new {
		padding: 0.65rem 1.8rem 0.6rem 1.35rem;
		gap: 0.75rem;
	}

	.c-badge-new__icon {
		width: clamp(16px, 1.3vw, 19px);
		height: clamp(16px, 1.3vw, 19px);
	}

	.c-badge-new__label {
		font-size: calc(16 * var(--card-unit));
	}

	.attraction-main-card__name {
		font-size: calc(30 * var(--card-unit));
		line-height: 1.3;
		margin-bottom: calc(18 * var(--card-unit));
	}

	.attraction-main-card__name--logo {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		min-height: clamp(60px, 6vw, 88px);
		margin-bottom: calc(18 * var(--card-unit));
	}

	.attraction-main-card__name--logo img {
		width: auto;
		height: auto;
		object-fit: contain;
		display: block;
		max-width: 70%;
	}


	.attraction-main-card__text {
		font-size: calc(16 * var(--card-unit));
		line-height: 1.85;
		max-width: 100%;
		margin: 0 0 calc(28 * var(--card-unit));
		opacity: 0.95;
	}

	.attraction-main-card__link {
		display: flex;
	}

	/* 35周年ロゴ＆コンセプト (PC) - 左にロゴ（最大600px）、右にテキスト */
	.attraction-concept {
		margin-top: 0;
		padding: 0 4rem;
	}

	.attraction-concept__inner {
		max-width: 1240px;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		gap: 0;
	}

	.attraction-concept__logo {
		flex: 0 1 600px;
		max-width: 600px;
		width: 100%;
		margin: 0;
	}

	.attraction-concept__body {
		flex: 1 1 0;
		text-align: left;
		padding: 0;
	}

	.attraction-concept__title {
		text-align: left;
		font-size: clamp(2.4rem, 2.2vw, 3.4rem);
		margin-bottom: 2rem;
	}

	.attraction-concept__text {
		text-align: left;
		max-width: none;
		margin: 0;
		font-size: calc(clamp(1.5rem, 1.2vw, 1.8rem) * 1.2);
		line-height: 2.1;
	}

	/* #special-contents (PC) - 各アイテムを横並び（3カラム）にし、内部は画像+テキストの縦並びに配置 */
	#special-contents:before {
		height: 50%;
		top: 10%;
	}

	.special-list {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: clamp(2.4rem, 3vw, 4.8rem);
		max-width: 1120px;
		padding: 0 4rem;
		margin: 0 auto;
		align-items: stretch;
	}

	.special-item,
	.special-item--reverse {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 0;
		padding: 2.4rem 2rem;
		border-bottom: none;
		height: 100%;
		margin-bottom: 0;
		justify-content: flex-start;
		align-self: stretch;
	}

	.special-item__icon {
		flex: 0 0 auto;
		width: clamp(140px, 14vw, 180px);
		max-width: 180px;
		height: 180px;
		/* アイコン表示枠の高さを完全に統一 */
		display: flex;
		align-items: flex-end;
		/* おもちゃ箱の底面ラインを綺麗に整列 */
		justify-content: center;
		margin: 0 auto 2rem;
	}

	.special-item__icon img {
		width: 100%;
		height: auto;
		max-height: 100%;
		object-fit: contain;
	}

	.special-item__body {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		flex: 1 1 auto;
	}

	.special-item__title {
		font-size: clamp(2.2rem, 1.8vw, 2.6rem);
		font-weight: 700;
		margin-bottom: 1.4rem;
		text-align: center;
		line-height: 1.3;
		min-height: 2em;
		/* タイトル枠の高さを統一し、行数のブレや文字数の差があっても横並び水平ラインを100%保証 */
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
	}

	.special-item__text {
		font-size: clamp(1.3rem, 1.1vw, 1.45rem);
		line-height: 1.85;
		font-weight: 500;
		text-align: left;
		width: 100%;
		/* 文字数の違い（グルメ3行、グッズ4行、プラン4行）によるガタつきを解消しカード高さを揃える */
		min-height: 7.5em;
	}


	/* CSS Grid Subgrid 対応ブラウザ：完全ピクセルパーフェクト整列 */
	@supports (grid-template-rows: subgrid) {
		.special-list {
			grid-template-rows: auto auto 1fr;
			align-items: stretch;
		}

		.special-item,
		.special-item--reverse {
			display: grid;
			grid-row: span 3;
			grid-template-rows: subgrid;
			row-gap: 0;
			height: 100%;
			align-self: stretch;
		}

		.special-item__body {
			display: contents;
			/* bodyをパススルーし、titleとtextをグリッド直下の行セルとして配置 */
		}

		.special-item__icon {
			grid-row: 1;
			margin-bottom: 2rem;
		}

		.special-item__title {
			grid-row: 2;
			margin-bottom: 1.4rem;
			min-height: auto;
		}

		.special-item__text {
			grid-row: 3;
			min-height: auto;
		}
	}

}