/* =============================================
	 FLOYO — Award Page Styles
	 v3 — Dark / Light Dual Theme + Editorial
	 ============================================= */

/* ---- Layout Helpers ---- */
.container {
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 clamp(20px, 4vw, 48px);
}
.container-wide {
	width: 100%;
	max-width: 1520px;
	margin: 0 auto;
	padding: 0 clamp(20px, 4vw, 64px);
}
.container-fluid {
	width: 100%;
	padding: 0 clamp(20px, 4vw, 80px);
}

/* Subtle global grain */
body.floyo-base::before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 999;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1	0 0 0 0 1	0 0 0 0 1	0 0 0 0.4 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
	opacity: 0.06;
	mix-blend-mode: overlay;
}

/* ============================================================
	 REVEAL ANIMATIONS — 多方向バリエーション（v3.4 で動きを拡大）
	 ============================================================ */
.reveal {
	opacity: 0;
	transform: translateY(120px);
	transition:
		opacity 1.6s cubic-bezier(0.16, 1, 0.3, 1),
		transform 1.6s cubic-bezier(0.16, 1, 0.3, 1),
		filter 1.6s cubic-bezier(0.16, 1, 0.3, 1);
	will-change: opacity, transform, filter;
}
.reveal.is-visible {
	opacity: 1;
	transform: translateY(0) translateX(0) scale(1) rotate(0);
	filter: blur(0);
}

/* 方向バリアント — 距離を倍に拡大 */
.reveal-up		{ transform: translateY(140px); }
.reveal-down	{ transform: translateY(-100px); }
.reveal-left	{ transform: translateX(-160px) rotate(-1.5deg); }
.reveal-right { transform: translateX(160px) rotate(1.5deg); }
.reveal-scale { transform: scale(0.78); }
.reveal-zoom	{ transform: scale(1.25); }
.reveal-blur	{ transform: translateY(60px); filter: blur(24px); }
.reveal-blur.is-visible { filter: blur(0); }
.reveal-tilt	{ transform: translateY(80px) rotate(-3deg); }

/* ステップ遅延（順次表示） */
.reveal[data-delay="1"].is-visible { transition-delay: 0.1s; }
.reveal[data-delay="2"].is-visible { transition-delay: 0.2s; }
.reveal[data-delay="3"].is-visible { transition-delay: 0.3s; }
.reveal[data-delay="4"].is-visible { transition-delay: 0.4s; }
.reveal[data-delay="5"].is-visible { transition-delay: 0.5s; }
.reveal[data-delay="6"].is-visible { transition-delay: 0.6s; }

/* 子要素ステアー（親 reveal-stagger 配下の直接子を順に） — 距離拡大 */
.reveal-stagger > * {
	opacity: 0;
	transform: translateY(100px) scale(0.96);
	transition:
		opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1),
		transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-stagger.is-visible > * {
	opacity: 1;
	transform: translateY(0) scale(1);
}
.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0.08s; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 0.20s; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 0.32s; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 0.44s; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 0.56s; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 0.68s; }
.reveal-stagger.is-visible > *:nth-child(7) { transition-delay: 0.80s; }
.reveal-stagger.is-visible > *:nth-child(8) { transition-delay: 0.92s; }

/* ワード単位ステアー — 上がる量・回転を強化 */
.word-stagger .word {
	display: inline-block;
	opacity: 0;
	transform: translateY(110%) rotate(6deg) skewY(4deg);
	transition:
		opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
		transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
.word-stagger.is-visible .word {
	opacity: 1;
	transform: translateY(0) rotate(0) skewY(0);
}
/* 各単語に順次遅延 */
.word-stagger.is-visible .word:nth-child(1)	{ transition-delay: 0.04s; }
.word-stagger.is-visible .word:nth-child(2)	{ transition-delay: 0.10s; }
.word-stagger.is-visible .word:nth-child(3)	{ transition-delay: 0.16s; }
.word-stagger.is-visible .word:nth-child(4)	{ transition-delay: 0.22s; }
.word-stagger.is-visible .word:nth-child(5)	{ transition-delay: 0.28s; }
.word-stagger.is-visible .word:nth-child(6)	{ transition-delay: 0.34s; }
.word-stagger.is-visible .word:nth-child(7)	{ transition-delay: 0.40s; }
.word-stagger.is-visible .word:nth-child(8)	{ transition-delay: 0.46s; }
.word-stagger.is-visible .word:nth-child(9)	{ transition-delay: 0.52s; }
.word-stagger.is-visible .word:nth-child(10) { transition-delay: 0.58s; }

/* ============================================================
	 PARALLAX HELPERS
	 ============================================================ */
[data-parallax] {
	will-change: transform;
	transition: transform 0.08s linear;
}
/* パララックスで画像が動いた時に黒帯が出ないよう、対象画像はオーバースケール */
.visual-block img[data-parallax],
.cta-banner-img[data-parallax],
.about-visual img[data-parallax] {
	transform-origin: center center;
	width: 130%;
	height: 130%;
	left: -15%;
	top: -15%;
	inset: auto;
	position: absolute;
}

/* ============================================================
	 CURSOR TRAIL — Purple ring + dot
	 ============================================================ */
.cursor-dot,
.cursor-ring {
	position: fixed;
	top: 0; left: 0;
	pointer-events: none;
	z-index: 9999;
	border-radius: 50%;
	transform: translate3d(-50%, -50%, 0);
	/* 固定色を維持するため、背景と合成しない（ライトテーマで目立たなくなるのを防ぐ） */
	mix-blend-mode: normal;
	will-change: transform, opacity, width, height;
}
.cursor-dot {
	width: 10px; height: 10px;
	background: radial-gradient(circle, #ffffff 0%, #e9d5ff 40%, #c4b5fd 80%, transparent 100%);
	box-shadow:
		0 0 16px rgba(196,181,253,1),
		0 0 32px rgba(167,139,250,0.6);
	transition: width 0.18s var(--ease-out), height 0.18s var(--ease-out), opacity 0.3s, background 0.25s;
}
.cursor-ring {
	width: 56px; height: 56px;
	border: 1.8px solid rgba(167,139,250,0.9);
	background:
		radial-gradient(circle, rgba(167,139,250,0.12) 0%, transparent 70%),
		radial-gradient(circle at 30% 30%, rgba(255,255,255,0.08) 0%, transparent 50%);
	box-shadow:
		0 0 36px rgba(167,139,250,0.55),
		0 0 60px rgba(139,92,246,0.3),
		inset 0 0 22px rgba(167,139,250,0.22);
	transition: width 0.28s var(--ease-out), height 0.28s var(--ease-out), border-color 0.25s, opacity 0.3s, background 0.3s;
}

/* インタラクティブ要素ホバー時：大きく＆色も変化 */
.cursor-ring.is-hover {
	width: 110px; height: 110px;
	border-color: rgba(216,180,254,1);
	background:
		radial-gradient(circle, rgba(192,132,252,0.22) 0%, transparent 70%),
		radial-gradient(circle at 30% 30%, rgba(255,255,255,0.12) 0%, transparent 50%);
	box-shadow:
		0 0 60px rgba(192,132,252,0.9),
		0 0 90px rgba(167,139,250,0.5),
		inset 0 0 28px rgba(216,180,254,0.3);
	mix-blend-mode: normal;
}
.cursor-dot.is-hover {
	width: 5px; height: 5px;
}

/* テキスト上ではテキストカーソル風に */
.cursor-ring.is-text {
	width: 4px; height: 32px;
	border-radius: 2px;
	border-color: rgba(167,139,250,0.95);
	background: rgba(167,139,250,0.4);
}
.cursor-dot.is-text {
	opacity: 0;
}

/* トレイル（残像）の円たち */
.cursor-trail {
	position: fixed;
	top: 0; left: 0;
	width: 12px; height: 12px;
	border-radius: 50%;
	pointer-events: none;
	z-index: 9998;
	transform: translate3d(-50%, -50%, 0);
	background: radial-gradient(circle, rgba(167,139,250,0.7) 0%, rgba(167,139,250,0) 70%);
	mix-blend-mode: screen;
	will-change: transform, opacity;
}

/* タッチデバイス・モーション軽減ではカーソルを完全に隠す */
@media screen and (hover: none), (pointer: coarse) {
	.cursor-dot, .cursor-ring, .cursor-trail { display: none !important; }
}
@media screen and (prefers-reduced-motion: reduce) {
	.cursor-dot, .cursor-ring, .cursor-trail { display: none !important; }
	.reveal, .reveal-stagger > *, .word-stagger .word {
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
		transition: none !important;
	}
	[data-parallax] { transform: none !important; }
}

/* ============================================================
	 THEME TOGGLE
	 ============================================================ */
/* 右下フローティングボタン群（縦並び） */
.floating-actions {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 200;
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: center;
}

.theme-toggle,
.back-to-top {
	width: 48px; height: 48px;
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,0.18);
	background: rgba(0,0,0,0.7);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.3s var(--ease-out);
	font-size: 16px;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
[data-theme="light"] .theme-toggle,
[data-theme="light"] .back-to-top {
	background: rgba(255,255,255,0.9);
	color: #111;
	border-color: rgba(0,0,0,0.12);
	box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}
.theme-toggle:hover,
.back-to-top:hover {
	border-color: var(--c-purple-lite);
	color: var(--c-purple-lite);
	transform: translateY(-2px) scale(1.05);
	box-shadow: 0 0 28px rgba(167,139,250,0.5);
}

/* トップへ戻るボタン：紫グラデ + 一定スクロール後にフェードイン */
.back-to-top {
	background: linear-gradient(135deg, var(--c-purple-mid) 0%, var(--c-accent-2) 100%);
	color: #fff;
	border-color: rgba(255,255,255,0.2);
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	pointer-events: none;
	box-shadow: 0 8px 24px rgba(139,92,246,0.4);
}
.back-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
}
.back-to-top:hover {
	background: linear-gradient(135deg, var(--c-accent-2) 0%, var(--c-purple-mid) 100%);
	color: #fff;
	box-shadow: 0 0 32px rgba(192,132,252,0.7);
}
[data-theme="light"] .back-to-top {
	/* ライトテーマでもパープルグラデを維持 */
	background: linear-gradient(135deg, var(--c-purple-mid) 0%, var(--c-accent-2) 100%);
	color: #fff;
	border-color: rgba(255,255,255,0.3);
}

/* ============================================================
	 NAV
	 ============================================================ */
.nav {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 clamp(20px, 4vw, 56px);
	height: var(--nav-h);
	/* 常時うっすら黒下地（ヒーロー動画上でも視認性確保） */
	background: linear-gradient(180deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.55) 60%, rgba(0,0,0,0.32) 100%);
	backdrop-filter: blur(14px) saturate(140%);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	border-bottom: 1px solid rgba(255,255,255,0.08);
	transition: background 0.4s var(--ease-out), border-color 0.4s var(--ease-out), backdrop-filter 0.4s;
}
.nav.is-scrolled {
	background: rgba(0,0,0,0.88);
	backdrop-filter: blur(20px) saturate(160%);
	-webkit-backdrop-filter: blur(20px) saturate(160%);
	border-bottom-color: rgba(255,255,255,0.12);
}
/* ヒーロー上はテキスト色を白系で固定（下地が黒なので） */
.nav .nav-brand-mark,
.nav .nav-menu a {
	color: rgba(255,255,255,0.92);
}
.nav .nav-brand-mark img {
	width: 100px;
	margin-bottom: 5px;
}
.nav .nav-brand-sub {
	color: rgba(255,255,255,0.55);
	border-left-color: rgba(255,255,255,0.18);
}
.nav .nav-menu a:hover { color: #fff; }

/* ライトテーマでもヘッダー上は黒下地を維持（コントラスト最優先） */
[data-theme="light"] .nav {
	background: linear-gradient(180deg, rgba(15,15,20,0.85) 0%, rgba(15,15,20,0.65) 60%, rgba(15,15,20,0.4) 100%);
	border-bottom-color: rgba(255,255,255,0.08);
}
[data-theme="light"] .nav.is-scrolled {
	background: rgba(15,15,20,0.92);
}
[data-theme="light"] .nav .nav-brand-mark,
[data-theme="light"] .nav .nav-menu a { color: rgba(255,255,255,0.92); }
[data-theme="light"] .nav .nav-brand-sub { color: rgba(255,255,255,0.55); border-left-color: rgba(255,255,255,0.18); }
[data-theme="light"] .nav .nav-menu a:hover { color: #fff; }
[data-theme="light"] .nav .btn-outline { color: #fff; border-color: rgba(255,255,255,0.4); }
[data-theme="light"] .nav .btn-outline:hover { color: var(--c-purple-lite); border-color: var(--c-purple-lite); }
[data-theme="light"] .nav-toggle span,
[data-theme="light"] .nav-toggle span::before,
[data-theme="light"] .nav-toggle span::after { background: #fff; }

/* FLOYO クリック領域を明示 */
.nav-brand {
	cursor: pointer;
	text-decoration: none;
	padding: 6px 0;
	transition: opacity 0.3s var(--ease-out);
}
.nav-brand:hover { opacity: 0.75; }

.nav-brand {
	display: flex;
	align-items: center;
	gap: 14px;
}
.nav-brand-mark {
	font-family: var(--f-sans);
	font-weight: 900;
	font-size: 22px;
	letter-spacing: -0.03em;
	color: var(--c-text);
	text-transform: uppercase;
}
.nav-brand-sub {
	font-family: var(--f-mono);
	font-size: 10px;
	letter-spacing: 0.25em;
	color: var(--c-text-3);
	text-transform: uppercase;
	padding-left: 14px;
	border-left: 1px solid var(--c-border-2);
}

.nav-menu {
	display: flex;
	align-items: center;
	gap: 30px;
	list-style: none;
}
.nav-menu a {
	font-family: var(--f-jp);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.08em;
	color: var(--c-text-2);
	transition: color 0.3s var(--ease-out);
	position: relative;
	padding: 4px 0;
}
.nav-menu a::after {
	content: "";
	position: absolute;
	left: 0; bottom: -2px;
	width: 0; height: 1px;
	background: var(--c-purple-lite);
	transition: width 0.4s var(--ease-out);
}
.nav-menu a:hover { color: var(--c-text); }
.nav-menu a:hover::after { width: 100%; }

.nav-ctas { display: flex; align-items: center; gap: 10px; }

/* 言語切替ボタン */
.lang-switch { display: flex; gap: 8px; align-items: center; margin-right: 6px; }
.btn-lang {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 6px 10px;
	border-radius: 999px;
	font-family: var(--f-jp);
	font-size: 12px;
	font-weight: 600;
	color: var(--c-text-2);
	background: transparent;
	border: 1px solid transparent;
	transition: all 0.24s var(--ease-out);
}
.btn-lang:hover { color: var(--c-purple-lite); border-color: rgba(255,255,255,0.06); }
.btn-lang.active { background: rgba(255,255,255,0.04); color: var(--c-white); border-color: rgba(255,255,255,0.08); }


.btn-outline {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 20px;
	background: transparent;
	color: var(--c-text);
	border: 1px solid var(--c-border-2);
	border-radius: 999px;
	font-family: var(--f-jp);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.04em;
	transition: all 0.3s var(--ease-out);
}
.btn-outline:hover {
	border-color: var(--c-purple-lite);
	color: var(--c-purple-lite);
}

.nav-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 20px;
	background: var(--c-purple-mid);
	color: var(--c-white);
	border-radius: 999px;
	font-family: var(--f-jp);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
	transition: all 0.3s var(--ease-out);
	box-shadow: 0 0 24px rgba(139, 92, 246, 0.4);
}
.nav-cta:hover {
	background: var(--c-accent-2);
	transform: translateY(-2px);
	box-shadow: 0 0 36px rgba(192, 132, 252, 0.7);
}

.nav-toggle {
	display: none;
	width: 44px; height: 44px;
	align-items: center; justify-content: center;
}
.nav-toggle span {
	width: 22px; height: 1.5px;
	background: var(--c-text);
	position: relative;
}
.nav-toggle span::before,
.nav-toggle span::after {
	content: ""; position: absolute; left: 0;
	width: 100%; height: 1.5px; background: var(--c-text);
}
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after	{ top: 7px; }

/* Categories details layout (added for 5th category) */
.categories-details .cat-details-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(18px, 2.5vw, 36px);
	margin-top: 20px;
}
.categories-details .cat-detail {
	background: rgba(255,255,255,0.02);
	padding: 18px;
	border-radius: 8px;
}
.categories-details .cat-detail h3 {
	margin-top: 0;
}
@media (max-width: 900px) {
	.categories-details .cat-details-grid { grid-template-columns: 1fr; }
}

/* ============================================================
	HERO — Cinematic Full Screen
	============================================================ */

/* 動的なビューポート高さ補正用のカスタムプロパティ
	JS で `--vh` を設定すると、モバイルのアドレスバー伸縮に対応できます。 */
:root { --vh: 1vh; }
:root { --hero-available-h: 720px; }
.hero {
	position: relative;
	width: 100%;
	/* 可能なら動的 --vh を使い、フォールバックは 100vh */
	min-height: calc(var(--vh) * 100);
	overflow: hidden;
	background: var(--c-black);
	display: flex;
	flex-direction: column;
}

/* v3.2: ヒーローを 100vh に厳密に収める固定モード */
.hero.hero-fixed {
	/* 固定モードはビューポート高さに厳密に合わせる（min-height を外す） */
	height: calc(var(--vh) * 100);
	min-height: 0;
	max-height: calc(var(--vh) * 100);
}

/* Background slideshow */
.hero-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.hero-bg-img {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	opacity: 0;
	animation: heroFade 18s linear infinite;
}
.hero-bg-img:nth-child(1) { animation-delay: 0s; }
.hero-bg-img:nth-child(2) { animation-delay: 6s; }
.hero-bg-img:nth-child(3) { animation-delay: 12s; }
@keyframes heroFade {
	0%, 28% { opacity: 1; transform: scale(1.05); }
	33%, 95% { opacity: 0; }
	100% { opacity: 0; transform: scale(1.12); }
}

.hero-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 1;
	opacity: 0;
	transition: opacity 1s ease;
}
.hero-video.is-loaded { opacity: 1; }

/* スマホ・タブレット: ヒーロー動画を画面幅にフィットさせる */
@media screen and (max-width: 1024px) {
	.hero-video{
		width: 100%;
		height: 50%;
		object-position: center center;
	}
}

@media screen and (min-width: 1025px) {
	.hero-video {
		top: -100px;
	}
}

/* Canvas particles */
.hero-canvas {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	z-index: 2;
	pointer-events: none;
	mix-blend-mode: screen;
}

/* Movie cover: repeating semi-transparent white dots overlay (no image needed) */
#movie-cover {
	position: absolute;
	inset: 0;
	z-index: 3; /* sits above canvas but below hero-overlay (overlay has z-index:3 and comes later in DOM) */
	pointer-events: none;
	/* small white dots using radial-gradient repeated via background-size */
	background-image: radial-gradient(circle, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.3) 35%, transparent 36%);
	background-size: 12px 12px; /* dot spacing and size */
	opacity: 0.7; /* overall intensity (increased) */
	mix-blend-mode: overlay;
}

@media screen and (max-width: 600px) {
	#movie-cover { background-size: 10px 10px; opacity: 0.3; }
}

/* Overlays */
.hero-overlay {
	position: absolute;
	inset: 0;
	z-index: 3;
	background:
		radial-gradient(ellipse at 50% 50%, transparent 0%, rgba(0,0,0,0.5) 75%, rgba(0,0,0,0.9) 100%),
		linear-gradient(180deg, rgba(0,0,0,0.5) 0%, transparent 25%, transparent 55%, rgba(0,0,0,0.9) 100%),
		radial-gradient(ellipse at 80% 20%, rgba(139, 92, 246, 0.18) 0%, transparent 50%);
}

/* Cinema bars */
.hero-bar {
	position: absolute;
	left: 0; right: 0;
	height: var(--cinema-bar);
	background: #000;
	z-index: 6;
}
.hero-bar.top		{ top: 0; }
.hero-bar.bottom { bottom: 0; }

/* Corner marks */
.hero-corner {
	position: absolute;
	width: 24px; height: 24px;
	border: 1px solid rgba(255,255,255,0.55);
	z-index: 7;
}
.hero-corner.tl { top: calc(var(--cinema-bar) + 18px); left: 18px; border-right: none; border-bottom: none; }
.hero-corner.tr { top: calc(var(--cinema-bar) + 18px); right: 18px; border-left: none; border-bottom: none; }
.hero-corner.bl { bottom: calc(var(--cinema-bar) + 18px); left: 18px; border-right: none; border-top: none; }
.hero-corner.br { bottom: calc(var(--cinema-bar) + 18px); right: 18px; border-left: none; border-top: none; }

.hero-inner {
	position: relative;
	z-index: 10;
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	color: #fff;
	padding: calc(var(--cinema-bar) + var(--nav-h) + 16px) 24px 24px;
	/* flex でつぶせるよう最小高さは指定しない（JS 側で max-height を制御） */
	/* min-height を指定すると下部ストリップが収まらないため削除 */
	box-sizing: border-box;
	/* 下部ストリップの高さを差し引いた最大高さ（JS で --hero-strips-h を設定） */
	--hero-strips-h: 160px; /* フォールバック */
	max-height: calc((var(--vh) * 100) - var(--hero-strips-h));
	overflow: hidden;
}

/* Ensure English page reserves top space under the fixed nav (fixes first-view alignment) */
html[lang="en"] .hero-inner {
    padding-top: calc(var(--cinema-bar) + var(--nav-h) + 20px) !important;
}

/* hero-fixed の場合は上下に最低限の余白で締めて、strips を下に確保 */
.hero.hero-fixed .hero-inner {
	padding: calc(var(--cinema-bar) + var(--nav-h) + 8px) 24px 8px;
}
.hero.hero-fixed .hero-title {
	font-size: clamp(64px, calc(var(--hero-available-h) * 0.28), 200px);
	line-height: 0.85;
}
.hero.hero-fixed .hero-long {
	font-size: clamp(16px, 2.4vw, 36px);
	margin-bottom: 8px;
}
.hero.hero-fixed .hero-eyebrow {
	/* 🔒 添付承認バランス: ENTRY OPEN を WFAIA(hero-long)に近づける */
	margin-bottom: 4px;
}
.hero.hero-fixed .hero-sub {
	margin-top: 20px;
}

.hero-eyebrow {
	margin-bottom: 24px;
	display: flex;
	align-items: center;
	gap: 14px;
	font-family: var(--f-mono);
	font-size: 11px;
	letter-spacing: 0.4em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.85);
}
.hero-eyebrow .dot {
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--c-purple-lite);
	box-shadow: 0 0 12px var(--c-purple-lite);
	animation: dotPulse 2s ease-in-out infinite;
}
@keyframes dotPulse {
	0%,100% { opacity: 1; }
	50% { opacity: 0.3; }
}

/* タイトル群グループ — WORLD FLOYO.AI / WFAIA / TOKYO 2026 を一体化してパララックス */
.hero-title-group {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	/* will-change を効かせて GPU 合成、子要素の重なり回避 */
	will-change: transform;
	transition: opacity 0.28s ease;
}
.hero-title-group .hero-long,
.hero-title-group .hero-title,
.hero-title-group .hero-sub {
	/* グループ内では個別 parallax なし。マージンで間隔を厳密に確保 */
	object-position: 50% center;
	margin: 0;
}
.hero-title-group .hero-long {
	/* 🔒 確定値（クライアント承認済み 2026-05-30）
		 WORLD FLOYO.AI CREATIVE AWARD と WFAIA を密着配置。
		 負マージンで WFAIA の上部余白に食い込ませる。 */
	margin-bottom: clamp(-12px, -0.6vw, -4px);
}
.hero-title-group .hero-title {
	/* 🔒 添付承認バランス（2026-05-30 再調整）
		 TOKYO · 2026 を WFAIA に近づける。負マージンで WFAIA 下部の余白に食い込ませ、
		 descender 衝突は padding-bottom で吸収。 */
	margin-bottom: clamp(-18px, -1vw, -8px);
	padding-bottom: 0.04em;
}

/* Long English title above WFAIA */
.hero-long {
	font-family: var(--f-sans);
	font-weight: 900;
	font-size: clamp(20px, 3.4vw, 48px);
	letter-spacing: -0.02em;
	line-height: 1;
	color: rgba(255, 255, 255, 0.96);
	margin-bottom: 14px;
	text-transform: uppercase;
}

.hero-title {
	font-family: var(--f-sans);
	font-weight: 900;
	font-size: clamp(80px, 19vw, 320px);
	letter-spacing: -0.06em;
	line-height: 0.85;
	color: var(--c-white);
	text-shadow: 0 0 100px rgba(167, 139, 250, 0.35);
	text-transform: uppercase;
}

.hero-sub {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-top: 28px;
	font-family: var(--f-mono);
	font-size: clamp(11px, 1vw, 14px);
	letter-spacing: 0.5em;
	color: rgba(255,255,255,0.92);
	text-transform: uppercase;
}
.hero-sub::before,
.hero-sub::after {
	content: "";
	width: clamp(40px, 10vw, 100px);
	height: 1px;
	background: rgba(255,255,255,0.45);
}

.hero-tagline {
	margin-top: 28px;
	max-width: 780px;
	font-family: var(--f-display);
	font-weight: 500;
	font-size: clamp(18px, 2vw, 26px);
	line-height: 1.7;
	color: #fff;
	letter-spacing: 0.04em;
}

/* 賞金+CTAをワンラインで横並び（コンパクト版） */
.hero-actions-row {
	/* 🔒 添付承認バランス: タイトル群（TOKYO · 2026）と被らないよう十分な呼吸空間を確保 */
	margin-top: clamp(56px, 8vh, 110px);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(20px, 4vw, 48px);
	flex-wrap: wrap;
	padding: 18px clamp(20px, 3vw, 36px);
	background: rgba(0,0,0,0.35);
	backdrop-filter: blur(12px);
	border: 1px solid rgba(255,255,255,0.12);
	border-radius: 999px;
}
.hero-prize.compact {
	margin-top: 0;
	gap: 14px;
	align-items: center;
}
.hero-prize.compact .label {
	font-family: var(--f-mono);
	font-size: 10px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--c-purple-lite);
	white-space: nowrap;
}
.hero-prize.compact .amount {
	font-family: var(--f-condensed);
	font-weight: 800;
	font-size: clamp(36px, 5.4vw, 76px);
	letter-spacing: -0.02em;
	line-height: 0.9;
	background: linear-gradient(180deg, #ffffff 0%, #a78bfa 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum";
	/* center amount only */
	display: block;
	margin: 0 auto;
	text-align: center;
	min-width: 0;
}
.hero-prize.compact .amount [data-countup] {
	background: inherit;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}
.hero-prize.compact .amount .yen {
	font-size: 0.55em;
	color: #fff;
	-webkit-text-fill-color: #fff;
	margin-right: 0.05em;
}

/* Big Prize callout (旧バージョン保持・未使用) */
.hero-prize {
	margin-top: 40px;
	display: flex;
	align-items: center;
	gap: clamp(16px, 3vw, 36px);
}
.hero-prize .label {
	font-family: var(--f-mono);
	font-size: 11px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--c-purple-lite);
	white-space: nowrap;
}
.hero-prize .amount {
	font-family: var(--f-condensed);
	font-weight: 800;
	font-size: clamp(56px, 9vw, 140px);
	letter-spacing: -0.02em;
	line-height: 0.9;
	background: linear-gradient(180deg, #ffffff 0%, #a78bfa 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-feature-settings: "tnum";
}
.hero-prize .amount .yen { font-size: 0.6em; color: #fff; -webkit-text-fill-color: #fff; margin-right: 0.05em; }
.hero-prize .amount .unit { font-size: 0.4em; color: rgba(255,255,255,0.9); -webkit-text-fill-color: rgba(255,255,255,0.9); }

/* Bottom info bar — countdown + dates */
.hero-bottom {
	position: absolute;
	left: 0; right: 0;
	bottom: var(--cinema-bar);
	z-index: 10;
	padding: 0 clamp(20px, 4vw, 64px) 24px;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
}

.countdown {
	display: flex;
	gap: clamp(14px, 2vw, 32px);
	align-items: flex-end;
}
.countdown-cell {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 50px;
}
.countdown-num {
	font-family: var(--f-sans);
	font-weight: 200;
	font-size: clamp(32px, 4vw, 56px);
	letter-spacing: -0.04em;
	color: #fff;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}
.countdown-label {
	margin-top: 8px;
	font-family: var(--f-mono);
	font-size: 10px;
	letter-spacing: 0.32em;
	color: rgba(255,255,255,0.6);
	text-transform: uppercase;
}

.hero-dates {
	display: flex;
	gap: clamp(20px, 3vw, 40px);
	align-items: flex-end;
}
.hero-dates .d {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	border-left: 1px solid rgba(255,255,255,0.22);
	padding-left: clamp(14px, 1.6vw, 24px);
}
.hero-dates .d-v {
	font-family: var(--f-condensed);
	font-weight: 700;
	font-size: clamp(20px, 1.8vw, 28px);
	color: #fff;
	letter-spacing: 0;
	line-height: 1;
}
.hero-dates .d-l {
	font-family: var(--f-mono);
	font-size: 10px;
	letter-spacing: 0.28em;
	color: rgba(255,255,255,0.6);
	text-transform: uppercase;
	margin-top: 6px;
}

/* CTA Buttons in hero */
.hero-actions {
	margin-top: 36px;
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	justify-content: center;
}
.hero-actions-row .hero-actions { margin-top: 0; }
.hero-actions-row .btn-primary-hero,
.hero-actions-row .btn-secondary-hero { padding: 12px 22px; font-size: 13px; }
.btn-primary-hero {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 16px 32px;
	background: var(--c-purple-mid);
	color: #fff;
	border-radius: 999px;
	font-family: var(--f-jp);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.05em;
	box-shadow: 0 0 40px rgba(139, 92, 246, 0.6);
	transition: all 0.3s var(--ease-out);
}
.btn-primary-hero:hover {
	background: var(--c-accent-2);
	transform: translateY(-2px);
	box-shadow: 0 0 60px rgba(192, 132, 252, 0.85);
}
.btn-secondary-hero {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 16px 32px;
	background: transparent;
	color: #fff;
	border: 1px solid rgba(255,255,255,0.35);
	border-radius: 999px;
	font-family: var(--f-jp);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.05em;
	transition: all 0.3s var(--ease-out);
}
.btn-secondary-hero:hover {
	border-color: #fff;
	background: rgba(255,255,255,0.06);
}

/* Sponsor strip on hero bottom (separate band) */
.hero-sponsors {
	position: relative;
	z-index: 10;
	background: rgba(0, 0, 0, 0.65);
	backdrop-filter: blur(14px);
	border-top: 1px solid var(--c-border);
	display: grid;
	grid-template-columns: 200px 1fr;
	align-items: center;
}
.hero-sponsors .sp-label {
	font-family: var(--f-mono);
	font-size: 10px;
	letter-spacing: 0.3em;
	color: rgba(255,255,255,0.7);
	text-transform: uppercase;
	padding: 16px 20px;
	border-right: 1px solid var(--c-border);
}
.hero-sponsors .sp-logos {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}
.hero-sponsors .sp-logo {
	position: relative;
	padding: 22px 14px 16px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	border-right: 1px solid var(--c-border);
	font-family: var(--f-jp);
	font-weight: 700;
	font-size: clamp(11px, 0.9vw, 14px);
	color: rgba(255,255,255,0.85);
	letter-spacing: 0.02em;
	line-height: 1.4;
	min-height: 76px;
	transition: color 0.3s var(--ease-out), background 0.3s var(--ease-out);
}
.hero-sponsors .sp-logo[data-role]::before {
	content: attr(data-role);
	position: absolute;
	top: 6px;
	left: 50%;
	transform: translateX(-50%);
	font-family: var(--f-mono);
	font-size: 9px;
	letter-spacing: 0.28em;
	color: var(--c-purple-lite);
	text-transform: uppercase;
	opacity: 0.85;
}
.hero-sponsors .sp-logo:last-child { border-right: none; }
.hero-sponsors .sp-logo:hover {
	color: #fff;
	background: rgba(255,255,255,0.04);
}
.hero-sponsors .sp-logo.sp-logo-placeholder {
	color: rgba(255,255,255,0.4);
	font-family: var(--f-mono);
	font-weight: 500;
	letter-spacing: 0.22em;
	font-size: 11px;
}
.hero-sponsors .sp-logo img {
	max-height: 32px;
	width: auto;
}

/* ============================================================
	 MARQUEE
	 ============================================================ */
.marquee {
	background: var(--c-bg);
	border-top: 1px solid var(--c-border);
	border-bottom: 1px solid var(--c-border);
	padding: 22px 0;
	overflow: hidden;
	position: relative;
}
.marquee-track {
	display: flex;
	gap: 60px;
	width: max-content;
	animation: marquee 35s linear infinite;
}
.marquee span {
	font-family: var(--f-sans);
	font-weight: 800;
	font-size: clamp(16px, 1.8vw, 22px);
	letter-spacing: -0.01em;
	color: var(--c-text);
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: 60px;
	text-transform: uppercase;
}
.marquee span::after {
	content: "✦";
	color: var(--c-purple-lite);
	font-size: 14px;
}
@keyframes marquee {
	to { transform: translateX(-50%); }
}

/* ============================================================
	 SECTION shared
	 ============================================================ */
.section {
	position: relative;
	padding: clamp(80px, 14vh, 180px) 0;
	background: var(--c-bg);
}
.section.alt { background: var(--c-bg-1); }

.section-header {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-bottom: clamp(48px, 7vw, 96px);
}
.section-header.center { align-items: center; text-align: center; }

.section-num {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: var(--f-mono);
	font-size: 14px;
	letter-spacing: 0.3em;
	color: var(--c-text-3);
	text-transform: uppercase;
}
.section-num::before {
	content: "";
	width: 36px; height: 1px;
	background: var(--c-purple-lite);
}

/* ============================================================
	 VISUAL BLOCK — Ciclope-style large image bands
	 ============================================================ */
.visual-block {
	position: relative;
	width: 100%;
	height: clamp(360px, 60vh, 720px);
	overflow: hidden;
	background: var(--c-black);
}
.visual-block .vb-img {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	z-index: 0;
	transform: scale(1.02);
	transition: transform 1.4s var(--ease-out);
}
.visual-block:hover .vb-img { transform: scale(1.08); }
.visual-block::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, transparent 30%, transparent 60%, rgba(0,0,0,0.7) 100%);
}
.visual-block .vb-inner {
	position: relative;
	z-index: 2;
	height: 100%;
	display: flex;
	align-items: flex-end;
	padding: clamp(28px, 5vw, 80px);
	color: #fff;
}
.visual-block .vb-meta {
	font-family: var(--f-mono);
	font-size: 11px;
	letter-spacing: 0.3em;
	color: rgba(255,255,255,0.7);
	text-transform: uppercase;
	margin-bottom: 14px;
}
.visual-block .vb-title {
	font-family: var(--f-sans);
	font-weight: 900;
	font-size: clamp(36px, 6vw, 84px);
	letter-spacing: -0.04em;
	line-height: 1;
	text-transform: uppercase;
}
.visual-block .vb-corners span {
	position: absolute;
	width: 22px; height: 22px;
	border: 1px solid rgba(255,255,255,0.7);
	z-index: 3;
}
.visual-block .vb-corners .tl { top: 20px; left: 20px; border-right:none; border-bottom:none; }
.visual-block .vb-corners .tr { top: 20px; right: 20px; border-left:none; border-bottom:none; }
.visual-block .vb-corners .bl { bottom: 20px; left: 20px; border-right:none; border-top:none; }
.visual-block .vb-corners .br { bottom: 20px; right: 20px; border-left:none; border-top:none; }

/* Two-column visual band */
.visual-block.split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	height: clamp(420px, 70vh, 800px);
}
.visual-block.split .vb-side {
	position: relative;
	overflow: hidden;
}
.visual-block.split .vb-side img {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
}
.visual-block.split .vb-side.text {
	background: var(--c-bg);
	display: flex;
	align-items: center;
	padding: clamp(40px, 5vw, 80px);
}
[data-theme="light"] .visual-block.split .vb-side.text { background: var(--c-surface); }

/* ============================================================
	 ABOUT
	 ============================================================ */
.about-grid {
	display: grid;
	grid-template-columns: 1fr 1.05fr;
	gap: clamp(40px, 8vw, 120px);
	align-items: center;
}
.about-visual {
	position: relative;
	aspect-ratio: 3/4;
	background: var(--c-bg-2);
	overflow: hidden;
}
.about-visual img {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
}
.about-visual::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.5) 100%);
}
.about-visual .corner-mark {
	position: absolute;
	width: 16px; height: 16px;
	border: 1px solid rgba(255,255,255,0.7);
	z-index: 3;
}
.about-visual .corner-mark.tl { top: 16px; left: 16px; border-right:none; border-bottom:none; }
.about-visual .corner-mark.br { bottom: 16px; right: 16px; border-left:none; border-top:none; }

.about-text .quote {
	font-family: var(--f-display);
	font-weight: 500;
	font-size: clamp(20px, 2vw, 26px);
	line-height: 1.6;
	color: var(--c-text);
	margin-bottom: 28px;
	padding-left: 22px;
	border-left: 2px solid var(--c-purple-lite);
}

.stat-cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1px;
	margin-top: 44px;
	background: var(--c-border);
	border: 1px solid var(--c-border);
}
.stat-cards .sc {
	padding: 24px;
	background: var(--c-bg);
}
.stat-cards .sc .v {
	font-family: var(--f-sans);
	font-weight: 700;
	font-size: 30px;
	color: var(--c-text);
	letter-spacing: -0.02em;
}
.stat-cards .sc .l {
	margin-top: 8px;
	font-family: var(--f-mono);
	font-size: 14px;
	letter-spacing: 0.22em;
	color: var(--c-text-3);
	text-transform: uppercase;
}
.about-note .t-body {
	 font-size:18px;
}

.about-note .t-body a {
	text-decoration: underline;
}

.about-note .t-body a:hover {
	text-decoration: none;
}

/* ============================================================
	 CATEGORIES — horizontal scroll
	 ============================================================ */
.categories {
	padding-bottom: clamp(80px, 12vh, 160px);
	overflow: hidden;
}
.categories .cat-header {
	display: flex;
	align-items: flex-start;
	flex-direction: column;
	justify-content: space-between;
	gap: 40px;
	margin-bottom: 48px;
}
.cat-scroll-hint {
	font-family: var(--f-mono);
	font-size: 14px;
	letter-spacing: 0.28em;
	color: var(--c-text-3);
	text-transform: uppercase;
	white-space: nowrap;
}
.cat-scroll-hint::before {
	content: "→ ";
	font-size: 16px;
	color: var(--c-purple-lite);
}

.cat-track {
	display: flex;
	gap: clamp(16px, 2vw, 28px);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding: 0 clamp(20px, 4vw, 64px) 24px;
	scrollbar-width: thin;
}

/* Cat-track specific scrollbar styling (theme-aware) */
.cat-track {
	-webkit-overflow-scrolling: touch;
	scrollbar-color: var(--c-gray-700) transparent; /* Firefox */
	scrollbar-width: thin;
}
.cat-track::-webkit-scrollbar { height: 8px; }
.cat-track::-webkit-scrollbar-track { background: transparent; }
.cat-track::-webkit-scrollbar-thumb {
	background: rgba(255,255,255,0.08);
	border-radius: 999px;
}
/* Light theme adjustments */
[data-theme="light"] .cat-track::-webkit-scrollbar-thumb {
	background: rgba(0,0,0,0.12);
}

/* Optional: add class `hide-scrollbar` to `.cat-track` to hide the scrollbar visually */
.cat-track.hide-scrollbar {
	-ms-overflow-style: none; /* IE, Edge */
	scrollbar-width: none; /* Firefox */
}
.cat-track.hide-scrollbar::-webkit-scrollbar { height: 0; }
.cat-card {
	flex: 0 0 clamp(280px, 30vw, 400px);
	aspect-ratio: 3/4;
	scroll-snap-align: start;
	position: relative;
	background: var(--c-bg-2);
	border: 1px solid var(--c-border);
	overflow: hidden;
	transition: transform 0.5s var(--ease-out), border-color 0.5s var(--ease-out);
	cursor: pointer;
}
.cat-card .bg {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 30% 20%, rgba(167,139,250,0.20), transparent 60%),
		radial-gradient(circle at 70% 80%, rgba(255,255,255,0.04), transparent 60%),
		var(--c-bg-2);
	transition: transform 0.8s var(--ease-out);
}
.cat-card:hover { transform: translateY(-8px); border-color: var(--c-border-3); }
.cat-card:hover .bg { transform: scale(1.08); }
.cat-card .num {
	position: absolute; top: 20px; left: 20px;
	font-family: var(--f-mono);
	font-size: 11px;
	letter-spacing: 0.3em;
	color: #fff;
	z-index: 2;
}
.cat-card .num-big {
	position: absolute;
	bottom: 30%;
	left: 24px;
	font-family: var(--f-condensed);
	font-weight: 800;
	font-size: clamp(72px, 7vw, 120px);
	letter-spacing: -0.02em;
	line-height: 1;
	color: #fff;
	opacity: 0.95;
	z-index: 2;
	text-transform: uppercase;
}
.cat-card .meta {
	position: absolute;
	bottom: 0; left: 0; right: 0;
	padding: 22px 24px 24px;
	z-index: 2;
	background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.85) 100%);
	color: #fff;
}
.cat-card .meta h3 {
	font-family: var(--f-jp);
	font-weight: 700;
	font-size: clamp(20px, 1.6vw, 24px);
	letter-spacing: -0.01em;
	margin-bottom: 8px;
}
.cat-card .meta p {
	font-family: var(--f-jp);
	font-size: 12.5px;
	line-height: 1.65;
	color: rgba(255,255,255,0.85);
}

.cat-card .meta .meta-block p,
.cat-card .meta .meta-block .judging-criteria { color: #111; }
.cat-card .meta .meta-block .judging-criteria li {
	font-size: 14px;
	line-height: 1.65;
}

.cat-card .ph-tag {
	position: absolute;
	top: 20px; right: 20px;
	font-family: var(--f-mono);
	font-size: 9px;
	letter-spacing: 0.25em;
	color: rgba(255,255,255,0.7);
	text-transform: uppercase;
	border: 1px solid rgba(255,255,255,0.4);
	padding: 4px 8px;
	z-index: 2;
}

/* ============================================================
	 VALUE — Why apply
	 ============================================================ */
.value-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	border: 1px solid var(--c-border);
	background: var(--c-border);
	row-gap: 1px;
	column-gap: 1px;
}
.value-card {
	padding: clamp(30px, 2.4vw, 48px) clamp(24px, 2vw, 36px);
	background: var(--c-bg);
	position: relative;
	min-height: 320px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	transition: background 0.4s var(--ease-out);
}
.value-card:hover { background: var(--c-surface-2); }
.value-card .icon {
	width: 44px; height: 44px;
	display: flex; align-items: center; justify-content: center;
	border: 1px solid var(--c-border-2);
	color: var(--c-text);
	font-size: 18px;
	margin-bottom: 28px;
	transition: all 0.4s var(--ease-out);
}
.value-card:hover .icon {
	border-color: var(--c-purple-lite);
	color: var(--c-purple-lite);
}
.value-card h3 {
	font-family: var(--f-jp);
	font-weight: 700;
	font-size: 19px;
	margin-bottom: 12px;
	letter-spacing: -0.01em;
	color: var(--c-text);
}
.value-card p {
	font-size: 13.5px;
	color: var(--c-text-2);
	line-height: 1.75;
}
.value-card .v-num {
	position: absolute;
	top: 22px; right: 26px;
	font-family: var(--f-mono);
	font-size: 11px;
	letter-spacing: 0.28em;
	color: var(--c-text-3);
}
.value-cta .t-body {
	font-size:18px;
}

.value-cta .t-body a {
	text-decoration: underline;
}

.value-cta .t-body a:hover {
	text-decoration: none;
}

/* ============================================================
	 STEPS
	 ============================================================ */
.step {
	display: grid;
	grid-template-columns: 300px 1fr;
	align-items: center;
	gap: clamp(20px, 4vw, 60px);
	padding: clamp(40px, 6vw, 80px) 0;
	border-top: 1px solid var(--c-border);
}
.step:last-child { border-bottom: 1px solid var(--c-border); }
.step .big-num {
	font-family: var(--f-condensed);
	font-weight: 800;
	font-size: clamp(96px, 13vw, 220px);
	letter-spacing: -0.04em;
	line-height: 0.9;
	color: var(--c-text);
}
.step .big-num span {
	color: var(--c-purple-lite);
}
.step h3 {
	font-family: var(--f-jp);
	font-weight: 700;
	font-size: clamp(22px, 2.2vw, 32px);
	margin-bottom: 16px;
	letter-spacing: -0.015em;
	color: var(--c-text);
}
.step p {
	font-size: 15px;
	line-height: 1.9;
	color: var(--c-text-2);
	max-width: 640px;
}

/* ============================================================
	 TIMELINE
	 ============================================================ */
.tl-track {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px;
	padding-top: 60px;
}
.tl-track::before {
	content: "";
	position: absolute;
	top: 80px;
	left: 6%;
	right: 6%;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--c-border-2) 20%, var(--c-border-2) 80%, transparent);
}
.tl-item {
	position: relative;
	display: flex;
	flex-direction: column;
	padding-top: 56px;
}
.tl-dot {
	position: absolute;
	top: 14px; left: 0;
	width: 12px; height: 12px;
	border-radius: 50%;
	background: var(--c-bg);
	border: 2px solid var(--c-text);
}
.tl-item.is-active .tl-dot {
	border-color: var(--c-purple-lite);
	box-shadow: 0 0 18px rgba(167, 139, 250, 0.5);
}
.tl-item .date {
	font-family: var(--f-mono);
	font-size: 14px;
	letter-spacing: 0.25em;
	color: var(--c-purple-lite);
	text-transform: uppercase;
	margin-bottom: 10px;
}
.tl-item h4 {
	font-family: var(--f-jp);
	font-weight: 700;
	font-size: 18px;
	margin-bottom: 10px;
	color: var(--c-text);
}
.tl-item p {
	font-size: 13px;
	color: var(--c-text-3);
	line-height: 1.7;
}

/* ============================================================
	 JURY
	 ============================================================ */
.jury-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(220px, 1fr));
	gap: clamp(16px, 2vw, 24px);
	justify-items: stretch;
}
.jury-card {
	position: relative;
	aspect-ratio: auto;
	cursor: pointer;
	background: var(--c-bg-2);
	width: 100%;
}
.jury-card .face {
	position: relative;
	width: 100%;
	height: 300px;
	background:
		radial-gradient(circle at 50% 30%, rgba(255,255,255,0.10), transparent 55%),
		var(--c-bg-2);
	overflow: hidden;
	filter: grayscale(1) brightness(0.85);
	transition: filter 0.6s var(--ease-out), transform 0.8s var(--ease-out);
}

.jury-card .face img {
	text-align: center;
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: center center;
}

/* Mobile: avoid cropping important parts of jury images by fitting them inside the face box */
@media (max-width: 768px) {
	.jury-card .face {
		height: auto;
	}
	.jury-card .face img {
		object-fit: contain;
		object-position: center top;
		background-color: var(--c-bg-2);
	}
}

.jury-card:hover .face {
	filter: grayscale(0) brightness(1);
	transform: scale(1.05);
}

/* Mobile: stack jury cards vertically for better readability */
@media (max-width: 768px) {
	.jury-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	.jury-card {
		aspect-ratio: auto;
		display: block;
		background: var(--c-bg-2);
	}
	.jury-card .face {
		position: relative;
		width: 100%;
		height: auto;
		overflow: hidden;
	}
	.jury-card .face img {
		width: 100%;
		height: auto;
		object-fit: cover;
		object-position: center top;
	}
	.jury-card .info {
		position: static;
		background: none;
		color: var(--c-text);
		min-height: auto;
		padding: 16px;
	}
	.jury-card .ph-mark {
		position: relative;
		inset: auto;
		margin: 12px 0 0 12px;
	}
}

.jury-card .ph-mark {
	position: absolute;
	inset: 16px;
	border: 1px solid var(--c-border-2);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--c-text-3);
	font-family: var(--f-mono);
	font-size: 10px;
	letter-spacing: 0.25em;
	text-transform: uppercase;
}
.jury-card .info {
	position: static;
	padding: 22px 22px 26px;
	background: none;
	z-index: 2;
	color: var(--c-text-2);
	min-height: auto;
}
.jury-card .info .name {
	font-family: var(--f-jp);
	font-weight: 700;
	font-size: 18px;
	letter-spacing: -0.01em;
}
.jury-card .info .role {
	font-family: var(--f-mono);
	font-size: 10px;
	letter-spacing: 0.22em;
	color: var(--c-purple-lite);
	text-transform: uppercase;
	margin-top: 6px;
}

.jury-card .info .bio {
	margin-top: 10px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--c-text-2);
}

/* ============================================================
	 PROGRAM
	 ============================================================ */
.program-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(20px, 2.4vw, 32px);
}
.prog-card {
	display: flex;
	flex-direction: column;
}
.prog-card .thumb {
	aspect-ratio: 4/5;
	background: var(--c-bg-2);
	position: relative;
	overflow: hidden;
	margin-bottom: 22px;
}
.prog-card .thumb::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 30% 30%, rgba(167,139,250,0.22), transparent 55%),
		radial-gradient(circle at 70% 70%, rgba(255,255,255,0.04), transparent 55%);
	transition: transform 0.8s var(--ease-out);
}
.prog-card:hover .thumb::after { transform: scale(1.08); }
.prog-card .thumb .ph-label {
	position: absolute;
	inset: 14px;
	border: 1px solid var(--c-border-2);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 14px;
	font-family: var(--f-mono);
	font-size: 10px;
	letter-spacing: 0.22em;
	color: var(--c-text-3);
	text-transform: uppercase;
	z-index: 1;
}
.prog-card .tag {
	font-family: var(--f-mono);
	font-size: 10px;
	letter-spacing: 0.28em;
	color: var(--c-purple-lite);
	text-transform: uppercase;
	margin-bottom: 10px;
}
.prog-card h3 {
	font-family: var(--f-jp);
	font-weight: 700;
	font-size: 22px;
	margin-bottom: 10px;
	letter-spacing: -0.01em;
	color: var(--c-text);
}
.prog-card p {
	font-size: 13.5px;
	color: var(--c-text-2);
	line-height: 1.75;
}

/* ============================================================
	 PARTNERS
	 ============================================================ */
.partners-tier { margin-bottom: 80px; }
.partners-tier:last-child { margin-bottom: 0; }

.tier-head {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-bottom: 32px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--c-border);
}
.tier-head h3 {
	font-family: var(--f-jp);
	font-weight: 700;
	font-size: 18px;
	letter-spacing: 0.04em;
	color: var(--c-text);
}
.tier-head .en {
	font-family: var(--f-mono);
	font-size: 11px;
	letter-spacing: 0.28em;
	color: var(--c-text-3);
	text-transform: uppercase;
}

.logo-grid {
	display: grid;
	gap: 1px;
	background: var(--c-border);
	border: 1px solid var(--c-border);
}
.logo-grid.cols-1 { grid-template-columns: 1fr; }
.logo-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.logo-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.logo-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.logo-grid.cols-5 { grid-template-columns: repeat(5, 1fr); }
.logo-grid.cols-6 { grid-template-columns: repeat(6, 1fr); }

.logo-cell {
	background: var(--c-bg);
	aspect-ratio: 16/9;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--f-sans);
	font-weight: 700;
	font-size: clamp(13px, 1.1vw, 16px);
	color: var(--c-text-3);
	letter-spacing: 0.04em;
	transition: background 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
.logo-cell:hover {
	background: var(--c-surface-2);
	color: var(--c-text);
}
.logo-cell img { max-height: 60%; width: auto; }
.logo-cell.google img { max-height: 50%; }

/* 単独・大型ロゴセル（主催・賛同企業用） */
.logo-cell.logo-cell-lg {
	aspect-ratio: auto;
	padding: clamp(36px, 5vw, 72px) clamp(24px, 4vw, 64px);
	font-family: var(--f-jp);
	font-weight: 700;
	font-size: clamp(18px, 2.2vw, 28px);
	letter-spacing: 0.06em;
	color: var(--c-text);
	text-align: center;
	line-height: 1.4;
	background: var(--c-bg);
	position: relative;
}
.logo-cell.logo-cell-lg::before,
.logo-cell.logo-cell-lg::after {
	content: "";
	position: absolute;
	width: 18px; height: 18px;
	border: 1px solid var(--c-purple-lite);
	opacity: 0.5;
}
.logo-cell.logo-cell-lg::before {
	top: 14px; left: 14px;
	border-right: none; border-bottom: none;
}
.logo-cell.logo-cell-lg::after {
	bottom: 14px; right: 14px;
	border-left: none; border-top: none;
}

.logo-cell.logo-cell-lg.ca_logo {
	flex-direction: column;
}

.logo-cell.logo-cell-lg.ca_logo img{
	max-height: 40%;
}

.logo-cell.logo-cell-lg.ca_logo .tier-note {
	font-size: 14px;
}


.ca-logo .logo-grid.cols-4 {
	background: none;
	border: none;
}

.ca-logo .logo-cell.logo-cell-lg {
  grid-column: 1 / -1;
  justify-self: center;
  width: 50%;
  text-align: center;
}

@media screen and (max-width: 768px) {
	.ca-logo .logo-cell.logo-cell-lg {
		width: 100%;
	}
}

.ca-logo .logo-cell.logo-cell-lg img {
  display: block;
  margin: 0 auto 12px;
}

/* tier 補足テキスト */
.tier-note {
	margin-top: 20px;
	font-family: var(--f-mono);
	font-size: 11px;
	letter-spacing: 0.18em;
	color: var(--c-text-3);
	text-transform: none;
}

.committee-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: var(--c-border);
	border: 1px solid var(--c-border);
}
.committee-cell {
	background: var(--c-bg);
	padding: 24px;
}
.committee-cell .role {
	font-family: var(--f-mono);
	font-size: 10px;
	letter-spacing: 0.28em;
	color: var(--c-purple-lite);
	text-transform: uppercase;
	margin-bottom: 10px;
}
.committee-cell .name {
	font-family: var(--f-jp);
	font-weight: 700;
	font-size: 17px;
	color: var(--c-text);
	margin-bottom: 4px;
}
.committee-cell .affil {
	font-family: var(--f-jp);
	font-size: 12px;
	color: var(--c-text-3);
	line-height: 1.65;
}

/* ============================================================
	 CTA Banner — Full bleed cinematic
	 ============================================================ */
.cta-banner {
	position: relative;
	width: 100%;
	min-height: 65vh;
	padding: clamp(80px, 14vh, 180px) 24px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background: var(--c-black);
}
.cta-banner-img {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	z-index: 0;
	opacity: 0.6;
}
.cta-banner::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse at 50% 50%, rgba(124, 58, 237, 0.30) 0%, transparent 60%),
		linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.85));
	z-index: 1;
}
.cta-banner-inner {
	position: relative;
	z-index: 2;
	max-width: 900px;
	color: #fff;
}
.cta-banner .eyebrow {
	display: inline-block;
	margin-bottom: 22px;
	font-family: var(--f-mono);
	font-size: 11px;
	letter-spacing: 0.4em;
	color: var(--c-purple-lite);
	text-transform: uppercase;
}
.cta-banner h2 {
	font-family: var(--f-jp);
	font-weight: 800;
	font-size: clamp(40px, 6vw, 88px);
	letter-spacing: -0.025em;
	line-height: 1.15;
	margin-bottom: 40px;
	color: #fff;
}
.cta-banner .btn-primary {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	padding: 18px 40px;
	background: #fff;
	color: #0a0a0a;
	font-family: var(--f-jp);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.1em;
	border-radius: 999px;
	transition: all 0.3s var(--ease-out);
}
.cta-banner .btn-primary:hover {
	background: var(--c-purple-mid);
	color: #fff;
	transform: translateY(-3px);
}

/* ============================================================
	 FAQ
	 ============================================================ */
.faq-list {
	max-width: 980px;
	margin: 0 auto;
}
.faq-item {
	border-top: 1px solid var(--c-border);
}
.faq-item:last-child { border-bottom: 1px solid var(--c-border); }
.faq-q {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 30px 8px;
	font-family: var(--f-jp);
	font-weight: 500;
	font-size: clamp(15px, 1.2vw, 18px);
	color: var(--c-text);
	text-align: left;
	letter-spacing: -0.005em;
	transition: color 0.3s var(--ease-out);
	gap: 24px;
}
.faq-q .q-mark {
	font-family: var(--f-mono);
	color: var(--c-purple-lite);
	font-size: 12px;
	margin-right: 16px;
	letter-spacing: 0.2em;
}
.faq-q:hover { color: var(--c-purple-lite); }
.faq-q .ico {
	width: 28px; height: 28px;
	position: relative;
	flex-shrink: 0;
}
.faq-q .ico::before,
.faq-q .ico::after {
	content: "";
	position: absolute;
	top: 50%; left: 50%;
	background: var(--c-text);
	transition: transform 0.4s var(--ease-out), background 0.4s var(--ease-out);
}
.faq-q .ico::before { width: 14px; height: 1px; transform: translate(-50%, -50%); }
.faq-q .ico::after	{ width: 1px; height: 14px; transform: translate(-50%, -50%); }
.faq-item.is-open .faq-q { color: var(--c-purple-lite); }
.faq-item.is-open .ico::after { transform: translate(-50%, -50%) scaleY(0); }
.faq-item.is-open .ico::before { background: var(--c-purple-lite); }

.faq-a {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.5s var(--ease-out);
}
.faq-a-inner {
	padding: 0 8px 30px 56px;
	font-size: 14.5px;
	line-height: 1.9;
	color: var(--c-text-2);
	max-width: 800px;
}

/* ============================================================
	 FINAL CTA
	 ============================================================ */
.final {
	background: var(--c-black);
	padding: clamp(120px, 20vh, 220px) 24px;
	text-align: center;
	position: relative;
	overflow: hidden;
	color: #fff;
}
.final::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at 50% 50%, rgba(167, 139, 250, 0.18) 0%, transparent 50%);
}
.final h2 {
	position: relative;
	font-family: var(--f-display);
	font-weight: 500;
	font-size: clamp(36px, 6vw, 92px);
	line-height: 1.25;
	letter-spacing: 0.01em;
	color: #fff;
	margin-bottom: 56px;
	max-width: 1100px;
	margin-left: auto;
	margin-right: auto;
}
.final h2 .ac {
	font-style: italic;
	color: var(--c-purple-lite);
}
.final .btn-ghost {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 16px;
	padding: 16px 0;
	font-family: var(--f-mono);
	font-size: 12px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: #fff;
	border-bottom: 1px solid #fff;
	transition: all 0.3s var(--ease-out);
}
.final .btn-ghost:hover {
	color: var(--c-purple-lite);
	border-color: var(--c-purple-lite);
	gap: 24px;
}

/* ============================================================
	 FOOTER
	 ============================================================ */
.footer {
	background: var(--c-black);
	padding: 80px 0 32px;
	border-top: 1px solid rgba(255,255,255,0.1);
	color: #fff;
}
.footer-top {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: clamp(28px, 4vw, 64px);
	margin-bottom: 60px;
}
.footer-brand .ft-logo {
	font-family: var(--f-sans);
	font-weight: 900;
	font-size: 28px;
	letter-spacing: -0.03em;
	margin-bottom: 16px;
	color: #fff;
	text-transform: uppercase;
}

.footer-brand .ft-logo img {
	width: 120px;
}

.footer-brand p {
	font-size: 13px;
	color: rgba(255,255,255,0.5);
	line-height: 1.75;
	max-width: 320px;
}
.footer h5 {
	font-family: var(--f-mono);
	font-size: 11px;
	letter-spacing: 0.28em;
	color: rgba(255,255,255,0.5);
	text-transform: uppercase;
	margin-bottom: 22px;
}
.footer ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.footer ul a {
	font-size: 13.5px;
	color: rgba(255,255,255,0.8);
	transition: color 0.3s var(--ease-out);
}
.footer ul a:hover { color: var(--c-purple-lite); }
.footer-bottom {
	padding-top: 28px;
	border-top: 1px solid rgba(255,255,255,0.1);
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-family: var(--f-mono);
	font-size: 11px;
	letter-spacing: 0.15em;
	color: rgba(255,255,255,0.5);
}
.footer-social { display: flex; gap: 16px;}
.footer-social a {
	width: 38px; height: 38px;
	border: 1px solid rgba(255,255,255,0.22);
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	color: rgba(255,255,255,0.8);
	transition: all 0.3s var(--ease-out);
}
.footer-social a:hover {
	border-color: var(--c-purple-lite);
	color: var(--c-purple-lite);
	transform: translateY(-2px);
}

/* Desktop-only: add right margin so footer social isn't too close to floating actions */
@media screen and (min-width: 1024px) {
	.footer-social {
		margin-right: 80px;
	}
}

/* Make X (formerly Twitter) icon white in footer */
.footer-social a[aria-label="X"] i.fa-x-twitter,
.footer-social a[aria-label="X"] i.fa-x {
	color: #ffffff !important;
}

/* ============================================================
	 HERO STRIPS (v3.2) — 100vh fixed bottom 3-band layout
	 ① Countdown + Dates / ② Sponsor Marquee / ③ Organizer+Supporter
	 ============================================================ */
.hero-strips {
	position: relative;
	z-index: 10;
	display: flex;
	flex-direction: column;
	border-top: 1px solid rgba(255,255,255,0.08);
	background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.85) 100%);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	margin-bottom: var(--cinema-bar); /* シネマバーと干渉しない */
	flex-shrink: 0;
}
.hero-strip {
	border-bottom: 1px solid rgba(255,255,255,0.08);
}
.hero-strip:last-child { border-bottom: none; }

/* === ① カウントダウン + 日程 === */
.strip-countdown {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 0;
	align-items: stretch;
}
.strip-countdown .strip-left {
	padding: 18px clamp(20px, 3vw, 36px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 10px;
	border-right: 1px solid rgba(255,255,255,0.08);
}
.strip-countdown .strip-right {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

/* ① カウントダウン右側の3つめの info-cell を広げる（3列目をやや広めに） */
.strip-countdown .strip-right {
	grid-template-columns: 1fr 1fr 2fr; /* third column increased */
}

/* 小画面では既存のレスポンシブルールが優先されるため上書きしない */

.strip-kicker {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--f-mono);
	font-size: 10px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--c-purple-lite);
}
.strip-kicker .kicker-dot {
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--c-purple-lite);
	box-shadow: 0 0 14px var(--c-purple-lite);
	animation: dotPulse 1.6s ease-in-out infinite;
}

.countdown.big {
	display: flex;
	align-items: center;
	gap: clamp(8px, 1.2vw, 18px);
}
.countdown.big .countdown-cell {
	align-items: center;
	min-width: 64px;
}
.countdown.big .countdown-num {
	font-family: var(--f-condensed);
	font-weight: 800;
	font-size: clamp(40px, 5.6vw, 78px);
	letter-spacing: -0.02em;
	color: #fff;
	background: linear-gradient(180deg, #ffffff 0%, #c4b5fd 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.countdown.big .countdown-label {
	margin-top: 6px;
	font-family: var(--f-mono);
	font-size: 9px;
	letter-spacing: 0.24em;
	color: rgba(255,255,255,0.55);
	text-transform: uppercase;
}
.cd-sep {
	font-family: var(--f-condensed);
	font-weight: 300;
	font-size: clamp(32px, 4vw, 56px);
	color: rgba(255,255,255,0.25);
	line-height: 1;
	align-self: flex-start;
	margin-top: 4px;
}

.info-cell {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px clamp(14px, 2vw, 24px);
	border-right: 1px solid rgba(255,255,255,0.08);
}
.info-cell:last-child { border-right: none; }
.info-cell .ic-num {
	font-family: var(--f-condensed);
	font-weight: 800;
	font-size: clamp(28px, 3.2vw, 44px);
	letter-spacing: -0.01em;
	color: var(--c-purple-lite);
	line-height: 1;
	white-space: nowrap;
}
.info-cell .ic-body {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.info-cell .ic-title {
	font-family: var(--f-jp);
	font-weight: 700;
	font-size: clamp(12px, 1vw, 14px);
	color: #fff;
	letter-spacing: 0.04em;
}
.info-cell .ic-desc {
	font-family: var(--f-jp);
	font-size: clamp(10px, 0.85vw, 12px);
	color: rgba(255,255,255,0.6);
	letter-spacing: 0.02em;
	line-height: 1.4;
}

/* Compact variant: カウントダウンストリップを小さくする（高さを約3分の1に）
	 主にパディングとフォントサイズを縮小して、ファーストビュー内に収めやすくします */
.hero.hero-fixed .strip-countdown,
.strip-countdown.compact {
	/* グリッド自体は維持して幅配分のみ */
	grid-template-columns: 1fr 0.9fr;
}
.hero.hero-fixed .strip-countdown .strip-left,
.strip-countdown.compact .strip-left {
	padding: 6px clamp(12px, 2.6vw, 18px);
	gap: 6px;
}
.hero.hero-fixed .strip-countdown .strip-right,
.strip-countdown.compact .strip-right {
	gap: 4px;
}
.hero.hero-fixed .countdown.big,
.strip-countdown.compact .countdown.big {
	gap: clamp(6px, 1vw, 10px);
}
.hero.hero-fixed .countdown.big .countdown-num,
.strip-countdown.compact .countdown.big .countdown-num {
	font-weight: 800;
	font-size: clamp(24px, 3.6vw, 48px);
}
.hero.hero-fixed .countdown.big .countdown-label,
.strip-countdown.compact .countdown.big .countdown-label {
	font-size: 8px;
}
.hero.hero-fixed .cd-sep,
.strip-countdown.compact .cd-sep {
	font-size: clamp(18px, 3vw, 34px);
	margin-top: 2px;
}
.hero.hero-fixed .info-cell,
.strip-countdown.compact .info-cell {
	padding: 8px 12px;
}
.hero.hero-fixed .info-cell .ic-num,
.strip-countdown.compact .info-cell .ic-num {
	font-size: clamp(16px, 2.6vw, 28px);
}
.hero.hero-fixed .info-cell .ic-title,
.strip-countdown.compact .info-cell .ic-desc {
	font-size: clamp(10px, 0.9vw, 11px);
}

/* 小画面向けにも控えめに効くように上書き（タブレット/モバイルは既存のレスポンシブでさらに縮む） */
@media screen and (max-width: 1280px) {
	.strip-countdown.compact .strip-left { padding: 6px 12px; }
	.strip-countdown.compact .info-cell { padding: 8px 12px; }
}

/* === ② スポンサー横流れマーキー === */
.strip-sponsor-marquee {
	display: grid;
	grid-template-columns: 140px 1fr;
	align-items: stretch;
	background: rgba(0,0,0,0.45);
}
.strip-sponsor-marquee .sm-label {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-family: var(--f-mono);
	font-size: 10px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--c-purple-lite);
	line-height: 1.5;
	padding: 10px 12px;
	border-right: 1px solid rgba(255,255,255,0.1);
	white-space: nowrap;
}
.sm-track-wrap {
	position: relative;
	overflow: hidden;
}
.sm-track-wrap::before,
.sm-track-wrap::after {
	content: "";
	position: absolute;
	top: 0;
	width: 60px;
	height: 100%;
	z-index: 2;
	pointer-events: none;
}
.sm-track-wrap::before {
	left: 0;
	background: linear-gradient(90deg, rgba(0,0,0,0.9) 0%, transparent 100%);
}
.sm-track-wrap::after {
	right: 0;
	background: linear-gradient(270deg, rgba(0,0,0,0.9) 0%, transparent 100%);
}
.sm-track {
	display: inline-flex;
	align-items: center;
	gap: 28px;
	padding: 16px 0;
	width: max-content;
	animation: smMarquee 40s linear infinite;
}
.sm-item {
	font-family: var(--f-sans);
	font-weight: 800;
	font-size: clamp(13px, 1.2vw, 18px);
	letter-spacing: 0.06em;
	color: rgba(255,255,255,0.85);
	text-transform: uppercase;
	white-space: nowrap;
}
.sm-sep {
	color: var(--c-purple-lite);
	font-size: 12px;
	opacity: 0.7;
}
@keyframes smMarquee {
	from { transform: translateX(0); }
	to	 { transform: translateX(-50%); }
}

/* === ③ 主催 / 賛同企業 === */
.strip-orgs {
	display: grid;
	grid-template-columns: 1fr 1px 1fr 1px 1fr;
	align-items: stretch;
	background: rgba(0,0,0,0.55);
}
.strip-orgs .org-cell {
	padding: 14px clamp(16px, 2.4vw, 32px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
}
.strip-orgs .org-role {
	font-family: var(--f-mono);
	font-size: 9px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--c-purple-lite);
}
.strip-orgs .org-name {
	font-family: var(--f-jp);
	font-weight: 700;
	font-size: clamp(13px, 1.3vw, 18px);
	letter-spacing: 0.04em;
	color: #fff;
	line-height: 1.4;
	margin-top: 5px;
}
.strip-orgs .org-name.ca img{
	width: 50%;
}

@media screen and (max-width: 1024px) {
	.org-cell.ca-logo-header .head-calogo-and-txt {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}
}

.org-cell.ca-logo-header .tier-note{
	margin-top: 0;
	color: #fff;
}

.strip-orgs .org-divider {
	background: rgba(255,255,255,0.1);
	width: 1px;
	align-self: stretch;
}

/* Compact variant for orgs strip: 高さを約2/3に縮小（パディングとロゴサイズを削減） */
@media screen and (min-width: 1025px) {
	.hero.hero-fixed .strip-orgs .org-cell,
	.strip-orgs.compact .org-cell {
		padding: 6px 10px 6px 20px; /* 小さくして高さを抑える */
		gap: 2px;
	}
}
.hero.hero-fixed .strip-orgs .org-role,
.strip-orgs.compact .org-role {
	font-size: 8px;
}
.hero.hero-fixed .strip-orgs .org-name,
.strip-orgs.compact .org-name {
	font-size: clamp(11px, 1.1vw, 14px);
}
.hero.hero-fixed .strip-orgs .org-name img,
.strip-orgs.compact .org-name img {
	max-height: 26px; /* ロゴを小さくする */
	width: auto;
}
.hero.hero-fixed .strip-orgs .org-divider,
.strip-orgs.compact .org-divider {
	background: rgba(255,255,255,0.06);
	width: 1px;
}

@media screen and (max-width: 1023px) {
	.strip-orgs.compact .org-cell { padding: 8px 12px; }
	.strip-orgs.compact .org-name img { max-height: 32px; }
}

/* Desktop-only: increase vertical padding for .org-cell */
@media screen and (min-width: 1024px) {
	.hero.hero-fixed .strip-orgs .org-cell {
		padding: 20px 10px 0 20px;
	}
}

/* ============================================================
	 RESPONSIVE
	 ============================================================ */
@media screen and (max-width: 1280px) {
	.hero-sponsors { grid-template-columns: 160px 1fr; }
}

@media screen and (max-width: 1024px) {
	:root { --cinema-bar: 22px; }
	.nav-menu { display: none; }
	.nav-toggle { display: flex; }
	.nav-brand-sub { display: none; }
	.nav-ctas .btn-outline { display: none; }

	.hero-bottom { flex-direction: column; align-items: flex-start; gap: 16px; }
	.hero-dates { width: 100%; justify-content: flex-start; }

	/* hero-fixed: タブレットでは strips 縦並びを維持しつつコンパクト化 */
	.hero.hero-fixed { height: auto; min-height: 100vh; max-height: none; }
	.strip-countdown { grid-template-columns: 1fr; }
	.strip-countdown .strip-left { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08); }
	.strip-countdown .strip-right { grid-template-columns: repeat(3, 1fr); }
	.countdown.big .countdown-num { font-size: clamp(32px, 5vw, 56px); }
	.info-cell .ic-num { font-size: clamp(22px, 3vw, 32px); }
	.strip-sponsor-marquee { grid-template-columns: 110px 1fr; }
	.strip-orgs { grid-template-columns: 1fr; }
	.strip-orgs .org-divider { display: none; }
	.strip-orgs .org-cell { border-bottom: 1px solid rgba(255,255,255,0.08); }
	.strip-orgs .org-cell:last-child { border-bottom: none; }
	.hero-actions-row { flex-direction: column; gap: 14px; padding: 14px 22px; border-radius: 24px; }

	/* mobile nav open styles */
	.nav.is-open .nav-menu {
		display: flex;
		position: absolute;
		top: calc(var(--nav-h));
		left: 0;
		right: 0;
		background: linear-gradient(180deg, rgba(0,0,0,0.96), rgba(0,0,0,0.98));
		flex-direction: column;
		gap: 0;
		padding: 12px 20px 20px;
		z-index: 120;
		align-items: stretch;
	}
	.nav.is-open .nav-menu a {
		padding: 12px 8px;
		border-bottom: 1px solid rgba(255,255,255,0.06);
		display: block;
	}
	.nav.is-open .nav-menu a:last-child { border-bottom: none; }

	.about-grid { grid-template-columns: 1fr; }
	.value-grid { grid-template-columns: repeat(2, 1fr); }
	.jury-grid { grid-template-columns: repeat(2, 1fr); }
	.program-grid { grid-template-columns: 1fr; }
	.tl-track { grid-template-columns: repeat(2, 1fr); gap: 40px 32px; }
	.tl-track::before { display: none; }
	.committee-grid { grid-template-columns: repeat(2, 1fr); }
	.logo-grid.cols-5, .logo-grid.cols-6 { grid-template-columns: repeat(3, 1fr); }
	.footer-top { grid-template-columns: 1fr 1fr; }

	.hero-sponsors { grid-template-columns: 1fr; }
	.hero-sponsors .sp-label { border-right: none; border-bottom: 1px solid var(--c-border); }
	.hero-sponsors .sp-logos { grid-template-columns: repeat(4, 1fr); }
	.visual-block.split { grid-template-columns: 1fr; height: auto; }
	.visual-block.split .vb-side { min-height: 300px; }
}

/* モバイル向け: 主催 / 運営協力 / 賛同企業の縦並びでの表示崩れを防ぐ */
@media screen and (max-width: 768px) {
	.strip-orgs {
		display: flex;
		flex-direction: column;
		gap: 0;
		background: rgba(0,0,0,0.55);
	}
	.strip-orgs .org-divider { display: none !important; }
	.strip-orgs .org-cell {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 10px 16px;
		gap: 12px;
		border-bottom: 1px solid rgba(255,255,255,0.08);
	}
	.strip-orgs .org-cell:last-child { border-bottom: none; }
	.strip-orgs .org-role {
		font-size: 11px;
		flex: 1 1 auto;
		white-space: normal;
		margin-right: 12px;
	}
	.strip-orgs .org-name {
		flex: 0 0 auto;
		text-align: right;
		font-size: 14px;
		margin-top: 0;
	}
	.strip-orgs .org-name img { max-height: 36px; width: auto; display: inline-block; }
}

/* Prevent accidental horizontal page scrolling on narrow viewports */
@media screen and (max-width: 768px) {
	html, body {
		overflow-x: hidden;
	}
}

@media screen and (max-width: 768px) {
	.strip-orgs .org-cell {
		padding: 8px 12px;
		gap: 8px;
	}
	.strip-orgs .org-role { font-size: 10px; }
	.strip-orgs .org-name { font-size: 13px; }
	.strip-orgs .org-name img { max-height: 30px; }
	/* 主催のみ上下 padding を +10px する（スマホ向け） */
	.strip-orgs .org-cell:first-child {
		padding-top: 10px !important;
		padding-bottom: 10px !important;
	}
}

@media screen and (max-width: 768px) {
	:root { --cinema-bar: 14px; --nav-h: 60px; }
	.nav-cta { padding: 8px 14px; font-size: 12px; }

	.hero { min-height: 100vh; }
	.hero-corner { display: none; }
	.hero-long { font-size: 18px; }
	.hero-prize .label { display: none; }
	.hero-actions .btn-secondary-hero { display: none; }
	.countdown { gap: 12px; }
	.countdown-num { font-size: 28px; }
	.hero-dates .d-v { font-size: 18px; }

	/* hero-fixed @ mobile */
	.hero.hero-fixed .hero-title { font-size: clamp(54px, 18vw, 100px); }
	.strip-countdown .strip-right { grid-template-columns: 1fr; }
	.info-cell { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08); }
	.info-cell:last-child { border-bottom: none; }
	.countdown.big .countdown-num { font-size: clamp(28px, 8vw, 44px); }
	.cd-sep { font-size: clamp(20px, 5vw, 30px); }
	.strip-sponsor-marquee { grid-template-columns: 1fr; }
	.strip-sponsor-marquee .sm-label { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.1); flex-direction: row; gap: 8px; padding: 6px 12px; }

	.step { grid-template-columns: 1fr; gap: 8px; padding: clamp(40px, 8vw, 60px) 0; }
	.step .big-num { font-size: 96px; }

	.value-grid { grid-template-columns: 1fr; }
	.jury-grid { grid-template-columns: repeat(2, 1fr); }
	.tl-track { grid-template-columns: 1fr; }
	.committee-grid { grid-template-columns: 1fr; }
	.logo-grid.cols-5, .logo-grid.cols-6, .logo-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }

	.hero-sponsors .sp-logos { grid-template-columns: repeat(2, 1fr); }
	.hero-sponsors .sp-logo { border-bottom: 1px solid var(--c-border); }

	.visual-block .vb-title { font-size: 36px; }

	.faq-q { font-size: 15px; padding: 22px 4px; gap: 14px; }
	.faq-a-inner { padding-left: 32px; }

	.footer-top { grid-template-columns: 1fr; gap: 36px; }
	.footer-bottom { flex-direction: column; gap: 20px; }
}

@media screen and (max-width: 480px) {
	.hero-tagline { font-size: 16px; margin-top: 22px; }
	.cat-card { flex: 0 0 80vw; }
	.jury-grid { grid-template-columns: 1fr 1fr; }
}

/* モバイルでカウントダウンの下に部門／応募締切等を確実に表示するための上書き */
@media screen and (max-width: 768px) {
	.strip-countdown {
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}
	.strip-countdown .strip-left,
	.strip-countdown .strip-right {
		width: 100%;
		border-right: none;
	}
	.strip-countdown .strip-right {
		margin-top: 8px;
		display: grid;
		grid-template-columns: 1fr;
		gap: 0;
	}
	.strip-countdown .strip-right .info-cell {
		border-right: none;
		border-bottom: 1px solid rgba(255,255,255,0.08);
	}
	.strip-countdown .strip-right .info-cell:last-child {
		border-bottom: none;
	}
}

.t-body.attention {
	font-size: clamp(14px, 1.6vw, 24px);
}

/***
全部門共通規定
***/

.regulations .container .prose .rules-list {
	margin: 0 0 30px 30px;
}


.floyo-base .section.floyo_about .container-wide .t-body{
	 font-size:18px;
}

.floyo-base .section.floyo_about .container-wide .t-body a {
	text-decoration: underline;
}

.floyo-base .section.floyo_about .container-wide .t-body a:hover {
	text-decoration: none;
}

/* Spacing for per-category detail blocks */
.cat-details .cd-item {
    margin: 30px 0;
}

.cat-details .container-wide .cd-item .cd-criteria {
	margin: 20px 0 0 20px;
}

/* .cat-details .container-wide .cd-item .cd-criteria li{
	color: #ffffff;
} */

/* Ensure judging criteria text is white inside the added regulations section */
.regulations .judging-criteria,
.regulations .judging-criteria li {
	color: #ffffff !important;
}


/* 応募条件内 リンク装飾 */
.section.rules .container-wide .t-body.reveal a {
	text-decoration: underline;
}
.section.rules .container-wide .t-body.reveal a:hover {
	text-decoration: none;
}