/* ══════════════════════════════════════════════════
   合成レイヤーの削減（重要・再発防止）
   --------------------------------------------------
   will-change / filter / backdrop-filter / transform は
   要素ごとに GPU 合成レイヤーを作る。HOMEは1万px超あり、
   これらが200個以上あるとブラウザが合成を諦め、
   スクロールした先が「真っ黒」になる不具合が出た。
   一覧に並ぶ要素へ will-change や drop-shadow を付けないこと。
   ══════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════
   HOME — 動画ヒーロー / 三つの入口 / スクロール演出
   読み込み順: sections.css の後、animations.css の前
   ══════════════════════════════════════════════════ */

/* ── ヒーロー：動画背景 ───────────────────────── */
.hero--video { min-height: 100svh; }

.hero-media {
  position: absolute;
  inset: -6% 0 0 0;      /* パララックスで動かすための余白 */
  height: 112%;
  z-index: var(--z-behind);
  overflow: hidden;
  will-change: transform;
}

.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 元動画そのままの明るさで見せる。
     暗くしたい場合はここに brightness() を足す(1 未満で暗くなる) */
  filter: none;
}

/* 文字の可読性を担保するスクリム。
   素材に白飛び寸前のカットがあるため、上下と周縁をしっかり落とす */
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: calc(var(--z-behind) + 1);
  pointer-events: none;
  background:
    /* ナビの後ろと、下端の黒背景への繋ぎだけ確保する */
    linear-gradient(180deg, rgba(6,5,10,0.55) 0%, rgba(6,5,10,0.00) 22%, rgba(6,5,10,0.00) 58%, rgba(6,5,10,0.72) 100%);
}

/* 下端を、ページの地の色へ溶かす(2026-09-22 オーナー指示)。
   動画の縁で地が切り替わって見えないようにする。スクリムの上、文字の下に置く */
.hero--video::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: clamp(90px, 18%, 220px);
  z-index: calc(var(--z-behind) + 2);
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(10, 6, 4, 0) 0%,
    rgba(10, 6, 4, 0.35) 40%,
    rgba(10, 6, 4, 0.78) 75%,
    var(--color-void) 100%);
}

/* スマホ: ヒーローを低くする(2026-09-22)。
   縦長の画面で全高にすると、横長の動画を4倍近く引き伸ばして切り抜くことになり、ぼやける。
   高さを6割ほどにして、その範囲だけを4Kから縦長に切り出した動画(hero-m.*)を流す。
   動画の枠は高さの112%(パララックスの余白)なので、切り出しは 2:3 にしてある。 */
@media (max-width: 700px) {
  .hero--video { min-height: 0; height: max(62svh, 440px); }
  /* 高さを整数の px にそろえる。端数(503.4px など)だと、動画の層だけ 1px 下まで描かれ、
     溶かした下端の直下に細い線が出る。round() が使えないブラウザは上の指定のまま */
  .hero--video { height: round(down, max(62svh, 440px), 1px); }

  /* 低くしたヒーローに合わせて、上に乗る文字とロゴも縮める(2026-09-22 オーナー指摘「文字が大きく見える」)。
     全高のときの大きさ(ロゴ120px・本文16px)のままだと、枠に対して重く、タグラインも2行に折れていた。
     タグラインは1行に収める(17字。320px 幅でも入る大きさにしてある)。
     responsive.css が後に読まれるので、.hero--video を付けて詳細度で勝たせる */
  .hero--video { padding-top: 2.5rem; }          /* 上のナビの分だけ、中身を少し下げて真ん中に見せる */
  .hero--video .hero-logo { width: 86px; margin-bottom: var(--space-lg); }
  .hero--video .hero-taglines { padding: var(--space-sm) var(--space-md); }
  .hero--video .hero-tagline {
    font-size: clamp(13px, 3.9vw, 15px);
    letter-spacing: 0.12em;
    white-space: nowrap;
    margin-bottom: 0.45em;
  }
  .hero--video .hero-tagline-sub {
    font-size: clamp(11px, 3.2vw, 12.5px);
    letter-spacing: 0.16em;
    margin-bottom: 0;
  }
}

/* 金の粒子は動画の上だと過剰なので薄める */
.hero--video .hero-particles { opacity: 0.35; }
.hero--video .hero-content { position: relative; z-index: 2; }

/* 背景動画の停止ボタン（動きが苦手な人向け・常設） */
.hero-motion-toggle {
  position: absolute;
  right: var(--space-lg);
  bottom: var(--space-lg);
  z-index: 5;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: rgba(6,5,10,0.55);
  color: var(--color-gold-dim);
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: all var(--transition-base);
}
.hero-motion-toggle:hover { color: var(--color-gold); border-color: var(--color-gold-dim); }

/* ── 三つの入口 ─────────────────────────────── */
.gateways {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--color-border);
  border-block: 1px solid var(--color-border);
  margin-top: -1px;
}

.gateway {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-xs);
  padding: clamp(2.5rem, 5vw, 4.5rem) var(--space-xl);
  background: var(--color-void);
  overflow: hidden;
  transition: background var(--transition-base);
}
.gateway::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
  transform: scaleX(0);
  transition: transform 0.5s cubic-bezier(0.4,0,0.2,1);
}
.gateway:hover { background: var(--color-deep-dark); }
.gateway:hover::after { transform: scaleX(1); }

.gateway-num {
  font-size: var(--text-xs);
  letter-spacing: 0.3em;
  color: var(--color-gold-dim);
  opacity: 0.7;
}
.gateway-icon {
  /* 主導線だけアイコンを大きくするため、箱の高さを固定して
     文字サイズが違っても見出しの位置が揃うようにする */
  height: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  line-height: 1;
  color: var(--color-gold);
  margin-block: var(--space-sm);
  transition: transform var(--transition-slow);
}
.gateway:hover .gateway-icon { transform: translateY(-4px) scale(1.08); }

.gateway-title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  color: var(--color-text-gold);
  margin: 0;
  letter-spacing: 0.08em;
}
.gateway-sub {
  font-size: var(--text-xs);
  letter-spacing: 0.28em;
  color: var(--color-gold-dim);
  margin: 0;
}
.gateway-text {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: var(--space-sm) 0 0;
  line-height: 1.8;
}
.gateway-go {
  margin-top: var(--space-md);
  color: var(--color-gold-dim);
  transition: transform var(--transition-base);
}
.gateway:hover .gateway-go { transform: translateY(4px); color: var(--color-gold); }

/* ── 各ブロック共通 ───────────────────────────── */
.home-block {
  max-width: var(--container-2xl);
  margin: 0 auto;
  padding: clamp(4rem, 10vw, 8rem) var(--space-xl);
  scroll-margin-top: 80px;
}

.home-block-head { text-align: center; margin-bottom: var(--space-3xl); }

.home-block-num {
  display: block;
  font-size: var(--text-xs);
  letter-spacing: 0.3em;
  color: var(--color-gold-dim);
  margin-bottom: var(--space-sm);
}
.home-block-title {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  color: var(--color-text-gold);
  letter-spacing: 0.1em;
  margin: 0 0 var(--space-md);
}
.home-block-lead {
  max-width: 620px;
  margin: 0 auto;
  color: var(--color-text-muted);
  line-height: 1.9;
  font-size: var(--text-sm);
}

.home-block-more {
  margin-top: var(--space-3xl);
  text-align: center;
  display: flex;
  gap: var(--space-lg);
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.link-more {
  font-size: var(--text-sm);
  color: var(--color-gold-dim);
  letter-spacing: 0.06em;
  border-bottom: 1px solid transparent;
  transition: all var(--transition-base);
}
.link-more:hover { color: var(--color-gold); border-bottom-color: var(--color-gold-dim); }


/* ── 02 観る ─────────────────────────────────── */
.watch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-lg);
}

/* ── 03 読む ─────────────────────────────────── */
/* 詳細度に注意: `.home-block--band > *` が同じ詳細度で後に来るため、
   単に `.read-list` と書くと最大幅 1400px に上書きされる。 */
.home-block--band > .read-list {
  display: grid;
  gap: var(--space-lg);
  max-width: 900px;
  margin: 0 auto;
}

.read-card {
  padding: clamp(1.8rem, 4vw, 3rem);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--glass-bg);
  text-align: center;
}

.read-card-meta {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  font-size: var(--text-xs);
  color: var(--color-gold-dim);
  letter-spacing: 0.14em;
  margin-bottom: var(--space-md);
}

/* ロゴが出ない場合の代替 */
.read-card-title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  color: var(--color-text-gold);
  margin: 0 0 var(--space-xs);
  letter-spacing: 0.05em;
}
.read-card-sub {
  font-size: var(--text-sm);
  color: var(--color-text);
  margin: 0 0 var(--space-md);
  line-height: 1.7;
}

.read-card-summary {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.9;
  margin: 0 auto var(--space-lg);
  max-width: 46em;
}

/* 連載告知バナー。これ自体がカクヨムへの入り口 */
.read-banner {
  display: block;
  margin-top: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--space-lg);
  transition: border-color var(--transition-base), transform var(--transition-base);
}
.read-banner img { display: block; width: 100%; height: auto; }
.read-banner:hover {
  border-color: var(--color-gold-dim);
  transform: translateY(-3px);
}

/* バナーは横長で、狭い画面だと文字が潰れる。
   確実に押せる入り口を必ず1つ用意しておく。 */
.read-card-go {
  display: inline-block;
  padding: 0.8em 2.2em;
  border: 1px solid var(--color-gold-dim);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--color-gold);
  letter-spacing: 0.08em;
  transition: background var(--transition-base), color var(--transition-base);
}
.read-card-go:hover {
  background: var(--color-gold);
  color: var(--color-void);
}

/* ── スクロール演出 ─────────────────────────────
   重要: 初期状態で opacity:0 にするのは JS が動く前提。
   .fx-ready が付いて初めて隠す。JSが動かなければ全部見えたまま。 */
.fx-ready [data-fx="rise"],
.fx-ready [data-fx="fade"],
.fx-ready [data-fx="slide"] {
  opacity: 0;
  transition: opacity 0.9s cubic-bezier(0.4,0,0.2,1),
              transform 0.9s cubic-bezier(0.4,0,0.2,1);
}
.fx-ready [data-fx="rise"]  { transform: translateY(38px); }
.fx-ready [data-fx="slide"] { transform: translateY(18px); }
.fx-ready [data-fx].fx-in   { opacity: 1; transform: none; }

@media (max-width: 860px) {
  /* 縦積みにすると「表示が壊れている」と誤解されるため、
     狭い画面でも3列を維持し、文字と余白だけを詰める */
  .gateway { padding: var(--space-xl) var(--space-sm); }
  .gateway-icon { height: 1.9rem; font-size: 1.4rem; margin-block: var(--space-xs); }
  .gateway--main .gateway-icon { font-size: 1.7rem; }
  .gateway-title { font-size: var(--text-base); letter-spacing: 0.04em; }
  .gateway-sub { font-size: 9px; letter-spacing: 0.18em; }
  .gateway-text { display: none; }      /* 3列だと読めないので省く */
  .gateway-num { font-size: 9px; letter-spacing: 0.2em; }
  .gateway-go { margin-top: var(--space-sm); font-size: var(--text-sm); }
  .home-block-more { flex-direction: column; gap: var(--space-md); }
}

@media (max-width: 420px) {
  .gateway { padding: var(--space-lg) 4px; }
  .gateway-title {
    font-size: var(--text-sm);
    letter-spacing: 0;
    writing-mode: horizontal-tb;
  }
  .gateway-sub { font-size: 8px; letter-spacing: 0.1em; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }   /* 動きを止める。ポスター画像が残る */
  .hero-media { background: center / cover no-repeat url("../assets/video/hero-poster.jpg"); }
  .fx-ready [data-fx] { opacity: 1 !important; transform: none !important; transition: none; }
}


/* ── 映像の上で文字とロゴを浮かせる ──────────────
   ロゴは透過PNG(logo-mark.png)なので、drop-shadow は
   長方形ではなく「線の形」に沿って落ちる。
   ぼかしを小さくして輪郭に密着させること。
   ぼかしを広げると一気に安っぽくなる。 */
.hero--video .hero-logo {
  filter:
    drop-shadow(0 1px 1px rgba(0,0,0,0.55))
    drop-shadow(0 2px 5px rgba(0,0,0,0.40));
}


.hero--video .hero-tagline,
.hero--video .hero-tagline-sub {
  text-shadow: 0 1px 2px rgba(0,0,0,0.85);
}

.hero--video .hero-scroll-indicator {
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

/* ── スクロール後半の暗転幕 ───────────────────
   ヒーローを半分ほど送った時点から、下に向かって暗くなる。
   opacity は JS(ScrollFX)が 0 → 1 で動かす。 */
.hero-fade {
  position: absolute;
  inset: 0;
  z-index: calc(var(--z-behind) + 2);
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    180deg,
    rgba(6,5,10,0.00) 0%,
    rgba(6,5,10,0.25) 38%,
    rgba(6,5,10,0.70) 70%,
    var(--color-void) 100%
  );
}


/* ══════════════════════════════════════════════
   タグライン：横から光が走り、キラキラと共に現れる
   ══════════════════════════════════════════════ */
.hero-taglines {
  position: relative;
  display: inline-block;
  padding: var(--space-md) clamp(1.5rem, 5vw, 3.5rem);
}

/* 文字の後ろを箱で暗くしない。
   暗がりは text-shadow で「文字の輪郭に沿って」作る(下の .hero-tagline を参照)。 */

/* 初期状態は JS が付ける .tinker-ready が有効な時だけ隠す。
   JSが動かなければ普通に見えたままにする(白画面対策) */
.tinker-ready .hero-tagline,
.tinker-ready .hero-tagline-sub {
  opacity: 0;
  animation: none;                 /* sections.css の heroTextReveal を止める */
}

.tinker-ready .hero-tagline.tinker-in,
.tinker-ready .hero-tagline-sub.tinker-in {
  animation: tinkerIn 1.15s cubic-bezier(0.16, 0.84, 0.34, 1) forwards;
}

/* 横(左)から、光の帯に運ばれて現れる */
@keyframes tinkerIn {
  0% {
    opacity: 0;
    transform: translateX(-38px);
    clip-path: inset(0 100% 0 0);
    filter: blur(6px) brightness(2.2);
  }
  55% {
    opacity: 1;
    filter: blur(0) brightness(1.5);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
    clip-path: inset(0 0 0 0);
    filter: blur(0) brightness(1);
  }
}

.hero--video .hero-tagline {
  color: var(--color-text);
  /* text-shadow は必ずグリフの形に沿う。箱を敷かずにこれだけで可読性を出す。
     近距離=輪郭の締め / 中距離=にじみ / 遠距離=映像との分離 */
  text-shadow:
    0 1px 1px rgba(0,0,0,0.95),
    0 0 3px  rgba(0,0,0,0.90),
    0 0 8px  rgba(0,0,0,0.75),
    0 0 18px rgba(0,0,0,0.50);
}
.hero--video .hero-tagline-sub {
  color: var(--color-text-secondary);
  text-shadow:
    0 1px 1px rgba(0,0,0,0.95),
    0 0 3px  rgba(0,0,0,0.85),
    0 0 7px  rgba(0,0,0,0.70),
    0 0 16px rgba(0,0,0,0.45);
}

/* ── 妖精の粉 ── */
.sparkles {
  position: absolute;
  inset: -18px -40px;
  pointer-events: none;
  overflow: visible;
  z-index: 3;
}

.sparkle {
  position: absolute;
  width: var(--sp-size, 10px);
  height: var(--sp-size, 10px);
  background: radial-gradient(circle, #fff 0%, var(--color-gold-bright) 45%, rgba(212,168,83,0) 72%);
  clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
  opacity: 0;
  /* will-change は付けない(カードが多数あり描画が破綻するため) */
  animation: sparkleTwinkle var(--sp-dur, 1.6s) ease-out var(--sp-delay, 0s) forwards;
}

@keyframes sparkleTwinkle {
  0%   { opacity: 0;   transform: translate(0,0) scale(0.2) rotate(0deg); }
  25%  { opacity: 1;   transform: translate(calc(var(--sp-dx) * 0.3), calc(var(--sp-dy) * 0.3)) scale(1.15) rotate(60deg); }
  60%  { opacity: 0.9; transform: translate(calc(var(--sp-dx) * 0.7), calc(var(--sp-dy) * 0.7)) scale(0.85) rotate(150deg); }
  100% { opacity: 0;   transform: translate(var(--sp-dx), var(--sp-dy)) scale(0.15) rotate(240deg); }
}

/* 光の帯が左から右へ抜ける */
.sparkle-wand {
  position: absolute;
  top: 0; bottom: 0;
  width: 130px;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,241,204,0.28) 45%,
    rgba(255,255,255,0.55) 55%,
    rgba(255,241,204,0.20) 70%,
    rgba(255,255,255,0) 100%);
  filter: blur(9px);
  opacity: 0;
  animation: wandSweep 1.25s cubic-bezier(0.3, 0.7, 0.3, 1) forwards;
}

@keyframes wandSweep {
  0%   { opacity: 0;   left: -14%; }
  15%  { opacity: 1; }
  85%  { opacity: 0.9; }
  100% { opacity: 0;   left: 104%; }
}

/* ══════════════════════════════════════════════
   ロゴの二重表示を避ける
   トップでヒーローのロゴが出ている間は、ナビのロゴを出さない
   ══════════════════════════════════════════════ */
.nav-logo {
  transition: opacity 0.55s ease, transform 0.55s ease;
}
body.hero-logo-visible .nav-logo {
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .tinker-ready .hero-tagline,
  .tinker-ready .hero-tagline-sub { opacity: 1 !important; animation: none !important; }
  .sparkles, .sparkle-wand { display: none; }
  body.hero-logo-visible .nav-logo { opacity: 1; transform: none; pointer-events: auto; }
}


/* ══════════════════════════════════════════════════
   映画公式サイトを参考にした再構成
   - 縦書きの見出しラベル
   - 全幅の黒帯セクションと通常セクションの交互
   - 中央フォーカス型カルーセル
   - スクロール後に現れる固定メニュー
   ══════════════════════════════════════════════════ */

.home-block { position: relative; }

/* ── 全幅の黒帯 ── */
.home-block--band {
  max-width: none;
  background:
    linear-gradient(180deg, var(--color-void) 0%, var(--color-deep-dark) 50%, var(--color-void) 100%);
  border-block: 1px solid var(--color-border);
}
.home-block--band > * {
  max-width: var(--container-2xl);
  margin-inline: auto;
}

.home-block--wide { max-width: none; padding-inline: 0; }
.home-block--wide > .home-block-head,
.home-block--wide > .home-block-more {
  max-width: var(--container-2xl);
  margin-inline: auto;
  padding-inline: var(--space-xl);
}

/* ── 中央フォーカス型カルーセル ── */
.carousel { position: relative; }

.carousel-track {
  display: flex;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: var(--space-xl) 0 var(--space-2xl);
  /* 左端から順に並べる。中央寄せはしない */
  scroll-padding-inline: 0;
  scrollbar-width: none;
}
.carousel-track::-webkit-scrollbar { display: none; }

/* 中央フォーカス型(旧 .video-card)の指定はここから撤去した。
   トップのカルーセルは .series-card、MUSIC は .music-card になり、
   .video-card はカルーセル内に1枚も存在しない。
   にもかかわらず ::before/::after の空白(画面幅の半分弱)だけが残っており、
   1枚目が 467px も右にずれて『左が大きく空く』原因になっていた。 */

.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: rgba(6,5,10,0.72);
  color: var(--color-gold-dim);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: all var(--transition-base);
}
.carousel-arrow:hover {
  color: var(--color-gold);
  border-color: var(--color-gold-dim);
  background: rgba(6,5,10,0.9);
}
/* 中央寄せをやめて左端から並べるようにしたので、矢印が1枚目に
   重なるようになった。器の内側余白(--space-xl)のぶん外へ逃がす。 */
.carousel-arrow--prev { left: calc(var(--space-xl) * -1); }
.carousel-arrow--next { right: calc(var(--space-xl) * -1); }


@media (max-width: 860px) {
  .carousel-arrow { display: none; }   /* 指でスワイプできるので不要 */
}

@media (prefers-reduced-motion: reduce) {
  .carousel-track { scroll-behavior: auto; }
  .carousel-track > .video-card { transform: none; opacity: 1; }
}


/* ══════════════════════════════════════════════════
   物語を観る — メインコンテンツ
   最新作を大きく、それ以前はカルーセル
   ══════════════════════════════════════════════════ */
.watch-featured {
  max-width: min(1080px, 92vw);
  margin: 0 auto var(--space-4xl);
  padding-inline: var(--space-xl);
}

.feature-card {
  display: block;
  cursor: pointer;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--glass-bg);
  transition: border-color var(--transition-base), box-shadow var(--transition-base),
              transform var(--transition-base);
}
.feature-card:hover {
  border-color: var(--color-gold-dim);
  box-shadow: var(--shadow-glow);
  transform: translateY(-3px);
}

.feature-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
}
.feature-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.4,0,0.2,1);
}
.feature-card:hover .feature-thumb img { transform: scale(1.04); }

.feature-play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, rgba(0,0,0,0.10), rgba(0,0,0,0.45));
  transition: background var(--transition-base);
}
.feature-card:hover .feature-play { background: linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.35)); }
.feature-play svg {
  width: clamp(56px, 7vw, 84px);
  height: clamp(56px, 7vw, 84px);
  fill: var(--color-gold);
  filter: drop-shadow(0 2px 12px rgba(0,0,0,0.8));
  transition: transform var(--transition-base);
}
.feature-card:hover .feature-play svg { transform: scale(1.08); }

.feature-badge {
  position: absolute;
  top: var(--space-md);
  left: var(--space-md);
  padding: 4px 12px;
  border-radius: var(--radius-full);
  background: rgba(6,5,10,0.78);
  border: 1px solid var(--color-gold-dim);
  color: var(--color-gold);
  font-size: 10px;
  letter-spacing: 0.24em;
  backdrop-filter: blur(6px);
}

.feature-info { padding: var(--space-lg) clamp(1.2rem, 3vw, 2rem) var(--space-xl); }

.feature-series {
  display: block;
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  color: var(--color-gold-dim);
  margin-bottom: var(--space-xs);
}
.feature-title {
  font-family: var(--font-heading);
  font-size: clamp(1.2rem, 2.6vw, 1.9rem);
  color: var(--color-text-gold);
  margin: 0;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

/* ── 「これまでの作品」の見出し ── */
.watch-past-head {
  max-width: var(--container-2xl);
  margin: 0 auto;
  padding-inline: var(--space-xl);
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}
.watch-past-head::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--color-border), transparent);
}
.watch-past-label {
  font-size: var(--text-xs);
  letter-spacing: 0.3em;
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* 主導線であることを示す */
.gateway--main .gateway-icon { font-size: 2.2rem; }

@media (max-width: 860px) {
  .watch-featured { margin-bottom: var(--space-3xl); padding-inline: var(--space-md); }
  .feature-badge { top: var(--space-sm); left: var(--space-sm); }
}


/* ══════════════════════════════════════════════════
   物語を観る — 最新動画ラベル / シリーズ別カルーセル
   ══════════════════════════════════════════════════ */

/* 「最新動画」は見出しの下に置く。サムネの上には重ねない */
.feature-label {
  max-width: var(--container-2xl);
  margin: 0 auto var(--space-lg);
  padding-inline: var(--space-xl);
  text-align: center;
  font-family: var(--font-heading);
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  letter-spacing: 0.3em;
  color: var(--color-gold);
}
.feature-label::before,
.feature-label::after {
  content: "—";
  color: var(--color-gold-dim);
  opacity: 0.6;
  margin-inline: 0.8em;
  letter-spacing: 0;
}

/* ── シリーズごとのカルーセル ── */
.series-carousels {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xl);
}

.series-carousel-head {
  max-width: var(--container-2xl);
  margin: 0 auto;
  padding-inline: var(--space-xl);
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
}
.series-carousel-head::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--color-border), transparent);
}

.series-carousel-title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  color: var(--color-text-gold);
  letter-spacing: 0.1em;
  margin: 0;
  white-space: nowrap;
}
.series-carousel-title.is-unsorted { color: var(--color-gold-dim); }

/* シリーズの概要文。見出しの下に置く */
.series-carousel-desc {
  max-width: min(760px, 92vw);
  margin: var(--space-sm) auto 0;
  padding-inline: var(--space-xl);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.9;
}

/* シリーズ内は本数が少ないので、上下の余白を詰める */
.series-carousel .carousel-track {
  padding: var(--space-md) 0 var(--space-lg);
}

@media (max-width: 860px) {
  .series-carousels { gap: var(--space-2xl); }
  .feature-label { letter-spacing: 0.2em; }
}


/* ══════════════════════════════════════════════════
   04 つながる — 公式LINE(特別枠) / SNS / グッズ
   URLが未設定の項目は JS 側で描画されない(空のまま出さない)
   ══════════════════════════════════════════════════ */

/* ── 公式LINE：他と並べず、単独の大きな枠にする ── */
.line-slot:empty { display: none; }
.line-slot { max-width: min(760px, 92vw); margin: 0 auto var(--space-3xl); }

.line-card {
  --line-green: #06c755;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2rem);
  padding: clamp(1.4rem, 3.5vw, 2.2rem) clamp(1.4rem, 4vw, 2.6rem);
  border: 1px solid color-mix(in srgb, var(--line-green) 45%, transparent);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--line-green) 12%, transparent),
      rgba(6,5,10,0.4) 60%);
  transition: all var(--transition-base);
}
.line-card:hover {
  border-color: var(--line-green);
  box-shadow: 0 0 32px color-mix(in srgb, var(--line-green) 22%, transparent);
  transform: translateY(-3px);
}

.line-card-icon {
  flex: 0 0 auto;
  width: clamp(42px, 8vw, 56px);
  height: clamp(42px, 8vw, 56px);
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: var(--line-green);
  color: #fff;
}
.line-card-icon svg { width: 76%; height: 76%; }

.line-card-body { flex: 1; min-width: 0; }
.line-card-label {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 2.6vw, 1.4rem);
  color: var(--color-text-gold);
  letter-spacing: 0.1em;
}
.line-card-note {
  display: block;
  margin-top: 0.35em;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.8;
}
.line-card-go {
  flex: 0 0 auto;
  font-size: var(--text-sm);
  color: var(--line-green);
  letter-spacing: 0.06em;
  white-space: nowrap;
}

/* ── SNS ── */
.sns-row:empty, .sns-row.is-empty { display: none; }
.sns-row {
  display: flex;
  justify-content: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
  margin-bottom: var(--space-3xl);
}

.sns-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  width: clamp(94px, 22vw, 128px);
  padding: var(--space-lg) var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--glass-bg);
  color: var(--color-gold);
  transition: all var(--transition-base);
}
.sns-btn:hover {
  border-color: var(--color-gold-dim);
  background: var(--color-deep-dark);
  transform: translateY(-3px);
}
.sns-btn-icon { width: 26px; height: 26px; display: grid; place-items: center; }
.sns-btn-icon svg { width: 100%; height: 100%; }
.sns-btn-name {
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  color: var(--color-text-muted);
}
.sns-btn:hover .sns-btn-name { color: var(--color-text-gold); }

/* ── グッズ ── */
.shop-slot:empty { display: none; }
.shop-slot { max-width: min(680px, 92vw); margin: 0 auto; }

.shop-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  text-align: center;
  padding: var(--space-xl) clamp(1.5rem, 5vw, 3rem);
  border: 1px solid var(--color-gold-dim);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(212,168,83,0.10), rgba(212,168,83,0.02));
  transition: all var(--transition-base);
}
.shop-card:hover {
  background: linear-gradient(180deg, rgba(212,168,83,0.18), rgba(212,168,83,0.05));
  box-shadow: var(--shadow-glow);
  transform: translateY(-2px);
}
.shop-card-label {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  color: var(--color-text-gold);
  letter-spacing: 0.1em;
}
.shop-card-note { font-size: var(--text-xs); color: var(--color-text-muted); }
.shop-card-go { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-gold); }

@media (max-width: 560px) {
  .line-card { flex-wrap: wrap; text-align: center; justify-content: center; }
  .line-card-body { flex-basis: 100%; }

  /* 3つが2+1に折り返すと壊れて見えるので、必ず横一列に収める */
  .sns-row { gap: 10px; flex-wrap: nowrap; }
  .sns-btn {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
    padding: var(--space-md) 4px;
  }
  .sns-btn-name { font-size: 10px; letter-spacing: 0.08em; }
}


/* ══════════════════════════════════════════════════
   02 聴く — 楽曲ごとに配信サービスへ飛ばす
   ══════════════════════════════════════════════════ */
.listen-services:empty { display: none; }
.listen-services { text-align: center; margin-bottom: var(--space-3xl); }

.listen-services-label {
  font-size: var(--text-xs);
  letter-spacing: 0.3em;
  color: var(--color-gold-dim);
  margin: 0 0 var(--space-md);
}
.listen-services-row {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-sm);
}

/* サービスへのボタン */
.svc-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  white-space: nowrap;
  transition: all var(--transition-base);
}
.svc-chip:hover {
  border-color: var(--color-gold);
  color: var(--color-gold);
  background: rgba(212,168,83,0.10);
}
.svc-chip--yt { border-style: dashed; }

/* 楽曲リスト */
/* 旧: 楽曲カードを並べるグリッドだった。いまはシリーズのカルーセルを
   1つ入れるだけなので grid をやめる。grid のままだと項目の
   min-width:auto でカルーセルが横に伸び、ページごと横スクロールした。 */
.listen-songs { display: block; }

.listen-song {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--glass-bg);
  transition: border-color var(--transition-base);
}
.listen-song:hover { border-color: var(--color-gold-dim); }

.listen-song-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  flex-wrap: wrap;
}
.listen-song-title {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  color: var(--color-text-gold);
  margin: 0;
  line-height: 1.5;
}
.listen-song-series {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--color-gold-dim);
  white-space: nowrap;
}
.listen-song-links { display: flex; flex-wrap: wrap; gap: var(--space-xs); }

@media (max-width: 560px) {
  .listen-songs { grid-template-columns: 1fr; }
}


/* ── 聴く：楽曲カードにサムネイルを付ける ── */
.listen-song {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-md);
}

.listen-song-thumb {
  flex: 0 0 auto;
  width: 84px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--color-dark-wood);
}

/* 動画が無い曲の代替 */
.listen-song-thumb--none {
  display: grid;
  place-items: center;
  color: var(--color-gold-dim);
  font-size: 1.1rem;
}

.listen-song-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

@media (max-width: 560px) {
  .listen-song-thumb { width: 68px; }
}


/* ── 読む: バナーとロゴの出し分け ──
   既定(広い画面)はバナー。ロゴ側は隠しておく。
   狭い画面での入れ替えは responsive.css 側で行う(読み込み順の都合)。 */
.read-card-art { display: none; margin-bottom: var(--space-lg); }
.read-card-logo {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  margin: 0 auto;
}


/* ── 読む: 紙の本(Codex)への導線 ──
   詳細は書籍モーダル(BOOKSと共通)で見せるので、ここは表紙と値段だけ。
   ※ 幅は .home-block--band > * (1400px) に負けないよう子セレクタで指定する。 */
/* 紙の本が先、カクヨムが後(2026-09-22)。間の余白はカクヨムの見出し側で取る */
.home-block--band > .home-books {
  max-width: 900px;
  margin: 0 auto;
}
.home-block--band > .read-head {
  max-width: 900px;
  margin: var(--space-4xl) auto var(--space-2xl);
}

.home-books-head { text-align: center; margin-bottom: var(--space-2xl); }
.home-books-title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-sm);
  letter-spacing: 0.06em;
}
.home-books-lead {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.9;
  margin: 0;
  word-break: auto-phrase;
}

.home-books-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
}

.home-book {
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: var(--space-md);
  align-items: center;
  padding: var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--glass-bg);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--transition-base), transform var(--transition-base);
}
.home-book:hover,
.home-book:focus-visible {
  border-color: var(--color-gold-dim);
  transform: translateY(-3px);
  outline: none;
}

.home-book-cover {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-void);
}
.home-book-cover img { display: block; width: 100%; height: auto; }

.home-book-label {
  font-size: var(--text-xs);
  letter-spacing: 0.24em;
  color: var(--color-gold-dim);
}
.home-book-title {
  font-size: var(--text-base);
  color: var(--color-text-primary);
  margin: 0.2em 0 0.15em;
  line-height: 1.5;
}
.home-book-sub {
  font-size: var(--text-xs);
  color: var(--color-text-gold);
  letter-spacing: 0.06em;
  margin: 0 0 var(--space-sm);
}
.home-book-price {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.06em;
  margin: 0;
}


/* ── トップの「観る」「聴く」: シリーズだけを並べる ──
   曲の一覧は VIDEOS / MUSIC が持つ。トップは入口に徹する。 */
.series-card {
  flex: 0 0 auto;
  width: 300px;
  display: block;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--glass-bg);
  scroll-snap-align: start;
  transition: border-color var(--transition-base), transform var(--transition-base);
}
.series-card:hover,
.series-card.is-active { border-color: var(--color-gold-dim); }
.series-card:hover { transform: translateY(-4px); }

.series-card-thumb {
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--color-dark-wood);
  overflow: hidden;
}
.series-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.series-card-body { display: block; padding: var(--space-lg); }
.series-card-title {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  color: var(--color-text-primary);
  letter-spacing: 0.04em;
}
.series-card-desc {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.8;
  margin-top: var(--space-sm);
  word-break: auto-phrase;
}


/* ── 聴く: 最新配信曲(配信サービスの下) ── */
.home-block--band > .listen-newest {
  max-width: 720px;
  margin: var(--space-2xl) auto 0;
}
.listen-newest-label {
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  color: var(--color-gold-dim);
  text-align: center;
  margin: 0 0 var(--space-md);
}
.listen-newest-card {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: var(--space-lg);
  align-items: center;
  padding: var(--space-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--glass-bg);
}
.listen-newest-thumb {
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--color-border);
  transition: border-color var(--transition-base);
}
.listen-newest-thumb:hover { border-color: var(--color-gold-dim); }
.listen-newest-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.listen-newest-series { font-size: var(--text-xs); letter-spacing: 0.14em; color: var(--color-gold-dim); }
.listen-newest-title {
  font-size: var(--text-lg);
  color: var(--color-text-primary);
  margin: 0.2em 0 var(--space-md);
}
.listen-newest-svc { display: flex; flex-wrap: wrap; gap: 6px; }

/* シリーズカードの巻数 */
.series-card-vol {
  display: block;
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  color: var(--color-gold-dim);
  margin-bottom: 0.3em;
}


/* ── トップのカルーセルの器を観る/聴くで揃える ──
   観るは --wide(全幅)、聴くは --band(内寄せ)の中にあり、
   実測で 1270px と 1206px と幅が違っていた。同じ見え方にする。 */
.home-block > .series-carousels,
.home-block > .listen-songs {
  max-width: 1200px;
  margin-inline: auto;
}
/* 親(--wide / --band)で余白が違うが、max-width と auto マージンで
   外側の箱は同じ位置・同じ幅に落ち着く。あとは中身の余白を揃えるだけ。
   片方だけ padding を持たせると、実測で 1136px と 1200px の差になる。 */
.home-block > .series-carousels,
.home-block > .listen-songs { padding-inline: 0; }