/* ============================================================
       1. Design Tokens
       ============================================================ */
    :root {
      /* Color */
      --c-primary: #FFFFFF;
      --c-surface: #F9F9F8;
      --c-aurora-lav: #C7B8E8;
      --c-aurora-pink: #E9C7D8;
      --c-aurora-peach: #F4D4C5;
      --c-aurora-mint: #B8DCD9;
      --c-navy-dark: #0B0E26;
      --c-navy-main: #1A1F4A;
      --c-navy-soft: #5D6185;
      --c-glass-border: rgba(255, 255, 255, 0.4);
      --c-glass-border-strong: rgba(255, 255, 255, 0.5);

      /* Typography */
      --f-display: 'Hina Mincho', serif;
      --f-number: 'Hina Mincho', serif;
      --f-serif-jp: 'Hina Mincho', serif;
      --f-body: 'Zen Kaku Gothic New', sans-serif;
      --f-caption: 'Jost', sans-serif;

      /* Spacing (8px base) */
      --s-1: 8px;
      --s-2: 16px;
      --s-3: 24px;
      --s-4: 32px;
      --s-6: 48px;
      --s-8: 64px;
      --s-12: 96px;
      --s-16: 128px;
      --s-24: 192px;

      /* Motion */
      --ease: cubic-bezier(0.25, 1, 0.5, 1);
      --d-fast: 200ms;
      --d-base: 400ms;
      --d-slow: 800ms;

      /* ========== ロゴ調整用 変数(★ここで一括変更可) ==========
         実ロゴファイル差し替え時は、HTML側の .hero-emblem 要素を
         <img src="./assets/logo-stellar.svg" class="hero-emblem" /> のように
         置き換えて、下記の size だけ調整すればOK
      */
      --hero-logo-size-desktop: 440px;  /* デスクトップ時のロゴサイズ(ワンサイズ大きめ) */
      --hero-logo-size-mobile: 260px;   /* モバイル時のロゴサイズ */
      --hero-logo-max: 36vw;            /* 画面幅に応じた上限 */

      /* ロゴの実ブランドカラー(紫→ティールグラデーション) */
      --logo-purple: #5b3a8e;
      --logo-purple-deep: #4b2a7d;
      --logo-teal: #4fa7a4;
      --logo-teal-bright: #6bc7c4;
      --logo-burst-white: #ffffff;
    }

    /* ============================================================
       2. Reset & Base
       ============================================================ */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      font-family: var(--f-body);
      background: var(--c-surface);
      color: var(--c-navy-main);
      line-height: 2.0;
      letter-spacing: 0.04em;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
      /* === 日本語の改行最適化(全ページ共通ルール) ===
         line-break: strict で句読点・記号での不自然な行分かれを抑止。
         禁則は hanging-punctuation で行末の句点を半角分外へ逃がす。 */
      line-break: strict;
      word-break: normal;
      hanging-punctuation: allow-end;
    }
    /* 見出しは「いい感じの折り返し」を有効化(対応ブラウザのみ) */
    h1, h2, h3,
    .heading-en, .heading-jp,
    .hero-catch-ph, .hero-jp,
    .bento-title, .member-name-ph,
    .cta-heading, .razz-cta-title {
      text-wrap: pretty;
      text-wrap: balance;
    }
    /* 改行制御ヘルパー:途中改行させたくない語に `<span class="nowrap">` */
    .nowrap, .keep-together { display: inline-block; white-space: nowrap; }
    /* モバイル:本文を句単位で折り返す(Chrome 119+ / 非対応はフォールバック) */
    @media (max-width: 639px) {
      p, li,
      .hero-catch-ph, .hero-sub-ph,
      .activity-desc, .bento-desc,
      .news-title, .member-bio-ph,
      .razz-cta-desc, .razz-body,
      .archive-note, .scarcity-note {
        word-break: auto-phrase;
      }
      /* モバイル見出しは pretty に揃える(balance は短い行で過剰) */
      h1, h2, h3,
      .heading-en, .heading-jp { text-wrap: pretty; }
    }
    a { color: inherit; text-decoration: none; }
    button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }

    /* ============================================================
       3. Aurora Background(全体固定)
       ============================================================ */
    .aurora-stage {
      position: fixed; inset: 0; z-index: -2;
      background: var(--c-primary);
      overflow: hidden;
    }
    .aurora-blob {
      position: absolute;
      width: 60vmax; height: 60vmax;
      border-radius: 50%;
      filter: blur(80px);
      opacity: 0.55;
      mix-blend-mode: normal;
      will-change: transform;
    }
    .aurora-blob.b1 { background: var(--c-aurora-lav); top: -10%; left: -10%; animation: drift1 25s ease-in-out infinite alternate; }
    .aurora-blob.b2 { background: var(--c-aurora-pink); top: -15%; right: -15%; animation: drift2 22s ease-in-out infinite alternate; }
    .aurora-blob.b3 { background: var(--c-aurora-peach); bottom: -20%; left: 10%; animation: drift3 28s ease-in-out infinite alternate; }
    .aurora-blob.b4 { background: var(--c-aurora-mint); bottom: -10%; right: -5%; animation: drift4 20s ease-in-out infinite alternate; }

    @keyframes drift1 { from { transform: translate(0,0) scale(1); } to { transform: translate(15vw, 10vh) scale(1.15); } }
    @keyframes drift2 { from { transform: translate(0,0) scale(1); } to { transform: translate(-10vw, 15vh) scale(1.1); } }
    @keyframes drift3 { from { transform: translate(0,0) scale(1); } to { transform: translate(10vw, -8vh) scale(1.2); } }
    @keyframes drift4 { from { transform: translate(0,0) scale(1); } to { transform: translate(-8vw, -12vh) scale(1.1); } }

    /* Holographic light sheen */
    .aurora-stage::after {
      content: "";
      position: absolute; inset: 0;
      background:
        linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.35) 45%, transparent 50%),
        linear-gradient(75deg, transparent 55%, rgba(255,255,255,0.25) 65%, transparent 70%);
      mix-blend-mode: overlay;
      pointer-events: none;
    }

    /* ============================================================
       4. Layout & Common
       ============================================================ */
    .container { max-width: 1440px; margin: 0 auto; padding: 0 40px; }
    section { padding: var(--s-16) 0; position: relative; }

    .eyebrow {
      display: inline-flex; align-items: center; gap: 0.75rem;
      font-family: var(--f-caption);
      font-size: 0.75rem; font-weight: 500;
      letter-spacing: 0.25em; text-transform: uppercase;
      color: var(--c-navy-soft);
      margin-bottom: var(--s-3);
    }
    .eyebrow::before, .eyebrow::after {
      content: ""; width: 24px; height: 1px;
      background: var(--c-navy-soft); opacity: 0.5;
    }
    .heading-en {
      font-family: var(--f-display);
      font-weight: 400;
      font-size: clamp(2.5rem, 5vw, 4rem);
      letter-spacing: 0.1em;
      color: var(--c-navy-dark);
      line-height: 1.15;
    }
    .heading-jp {
      font-family: var(--f-serif-jp);
      font-weight: 300;
      font-size: clamp(1.5rem, 3vw, 2.25rem);
      letter-spacing: 0.15em;
      color: var(--c-navy-main);
      margin-top: var(--s-2);
    }
    .sub {
      font-family: var(--f-serif-jp);
      font-size: 1rem;
      color: var(--c-navy-soft);
      letter-spacing: 0.08em;
      margin-top: var(--s-3);
    }
    .placeholder {
      display: inline-block;
      padding: 2px 10px;
      background: rgba(255, 255, 255, 0.45);
      border: 1px dashed var(--c-navy-soft);
      border-radius: 2px;
      color: var(--c-navy-soft);
      font-family: monospace;
      font-size: 0.82rem;
      font-weight: 400;
      letter-spacing: 0;
    }

    /* Glass Levels */
    .glass-1 {
      background: rgba(255, 255, 255, 0.4);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border: 1px solid rgba(255, 255, 255, 0.3);
    }
    .glass-2 {
      background: rgba(255, 255, 255, 0.65);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      border: 1px solid var(--c-glass-border-strong);
      box-shadow: 0 16px 48px rgba(11, 14, 38, 0.03);
    }
    @supports not (backdrop-filter: blur(1px)) {
      .glass-1 { background: rgba(255, 255, 255, 0.85); }
      .glass-2 { background: rgba(255, 255, 255, 0.92); }
    }

    /* ============================================================
       5. Header
       ------------------------------------------------------------
       v5.9 から Constellation Rail デザインに刷新。
       スタイル定義は vm-base.css に一本化(全ページ共通)。
       過去のオーバーライド (.header / .nav / .cta-header*) は削除済み。
       ============================================================ */

    /* ============================================================
       6. Hero
       ============================================================ */
    .hero {
      /* v5.14(FB #10 / scroll-indicator が STELLAR と被る対策):
         - 100vh → 100svh で「mobile URL バー込みの実視野」基準に
         - 縦中央寄せは維持しつつ、scroll-indicator のためのフッタ領域を gap で確保 */
      min-height: 100svh;
      min-height: 100vh; /* svh 非対応ブラウザ用フォールバック */
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      text-align: center;
      padding: calc(var(--s-16) + 80px) 2rem calc(var(--s-16) + 80px); /* 下も上と同じに増やして scroll-indicator 領域確保 */
      position: relative;
      overflow: hidden;
    }
    /* v5.14:短い viewport(ラップトップ・スマホ landscape 等)で
       Hero 中身と scroll-indicator が重なるのを避ける。
       閾値 700px 未満:emblem を圧縮 + 上下 padding 圧縮 + ワードマーク縮小 */
    @media (max-height: 700px) {
      .hero {
        padding-top: calc(var(--s-8) + 60px);
        padding-bottom: calc(var(--s-8) + 60px);
      }
      .hero-emblem { width: 140px; height: 140px; margin-bottom: var(--s-2); }
      .hero-wordmark { font-size: clamp(1.8rem, 5vw, 3rem); }
      .scroll-indicator .scroll-trail { height: 36px; }
    }
    /* v5.14:更に短い viewport (550px 未満) では scroll-indicator 自体を非表示
       (どう詰めても収まらない領域では、ユーザーは既にスクロール可能と分かる) */
    @media (max-height: 550px) {
      .scroll-indicator { display: none; }
    }
    /* v5.6:Hero 上部メタ(ユーザー FB #8「拡げらんないかな」反映)
       - 横幅を画面ほぼ一杯まで展開(max-width 1400px)
       - 文字を 1 行で表示(<br> はメディアクエリで制御)
       - 左右にもう一段マージン → ロゴ群と被らない範囲で広く配置 */
    .hero-meta-top {
      display: flex; justify-content: space-between; width: 100%;
      max-width: 1400px;
      font-family: var(--f-caption);
      font-size: clamp(0.7rem, 0.95vw, 0.85rem);
      font-weight: 500;
      letter-spacing: 0.3em; text-transform: uppercase;
      color: var(--c-navy-soft);
      margin-bottom: var(--s-6);
      padding: 0 clamp(0.5rem, 2vw, 2.5rem);
    }
    .hero-meta-top span {
      max-width: 360px;
      line-height: 1.6;
      white-space: nowrap;
    }
    .hero-meta-top span:first-child { text-align: left; }
    .hero-meta-top span:last-child { text-align: right; }
    /* デスクトップでは 1 行表示にする(<br> を無効化) */
    @media (min-width: 1024px) {
      .hero-meta-top br { display: none; }
    }

    /* 公式ロゴ画像(Hero) — サイズは :root の変数で調整 */
    .hero-emblem {
      width: clamp(var(--hero-logo-size-mobile), var(--hero-logo-max), var(--hero-logo-size-desktop));
      height: clamp(var(--hero-logo-size-mobile), var(--hero-logo-max), var(--hero-logo-size-desktop));
      margin: 0 auto var(--s-3);
      display: flex; align-items: center; justify-content: center;
      position: relative;
    }
    .hero-emblem-img {
      max-width: 100%; max-height: 100%;
      object-fit: contain;
    }
    .hero-emblem-fallback {
      width: 100%; height: 100%;
      background: repeating-linear-gradient(45deg, rgba(199,184,232,0.15), rgba(199,184,232,0.15) 10px, rgba(184,220,217,0.15) 10px, rgba(184,220,217,0.15) 20px);
      border: 2px dashed var(--c-navy-soft);
      flex-direction: column; align-items: center; justify-content: center;
      color: var(--c-navy-soft); font-family: var(--f-caption); font-size: 0.85rem;
      text-align: center; padding: 1rem;
    }
    .hero-emblem-fallback small { margin-top: 8px; opacity: 0.7; font-size: 0.7rem; }
    /* will-change:ブラウザにtransform最適化を事前通知、ジャギ防止 */
    .hero-emblem-inner {
      animation: pulseScale 4000ms ease-in-out infinite;
      transform-origin: center;
      will-change: transform;
    }
    .hero-emblem-core {
      animation: pulseGlow 4000ms ease-in-out infinite;
      transform-origin: center;
      will-change: opacity;
    }
    @keyframes pulseScale {
      0%, 100% { transform: scale(0.98); }
      50% { transform: scale(1.02); }
    }
    @keyframes pulseGlow {
      0%, 100% { opacity: 0.7; }
      50% { opacity: 1; }
    }

    .hero-wordmark {
      font-family: var(--f-display);
      font-weight: 400;
      /* v5.3: 横幅オーバーフロー修正(narrow viewport で letter-spacing が広すぎて溢れる対策) */
      font-size: clamp(2.4rem, 7vw, 5.5rem);
      letter-spacing: clamp(0.12em, 1.5vw, 0.25em);
      color: var(--c-navy-dark);
      text-transform: uppercase;
      line-height: 1.1;
      margin-top: var(--s-3);
      max-width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: clip;
    }
    /* ============================================================
       Hero v5(5名立ち絵レイアウト)— v5.3 で 廃止 / 将来用に保持
       ★ 立ち絵が確定して横並びレイアウトを採用する場合のみ復活
       ============================================================ */
    /* v5.3: 5名ラインアップ表示要素を完全に隠す(コードは保持) */
    .hero-lineup,
    .hero-announce.hero-announce-floating { display: none !important; }

    /* (以下は将来復活時の参考設定。HTML 側を復活させたとき自動的に効く) */
    .hero-wordmark.hero-wordmark-bg {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      font-size: clamp(6rem, 20vw, 22rem);
      letter-spacing: 0.08em;
      color: var(--c-navy-dark);
      opacity: 0.06;
      white-space: nowrap;
      pointer-events: none;
      z-index: 0;
      margin: 0;
      mix-blend-mode: normal;
    }
    /* 5名立ち絵ラインナップ */
    .hero-lineup {
      position: relative;
      z-index: 2;
      display: flex;
      justify-content: center;
      align-items: flex-end;
      width: 100%;
      max-width: 1600px;
      margin: var(--s-3) auto 0;
      gap: clamp(-40px, -1.5vw, 0px);   /* わずかに重ねる */
      flex: 1;
    }
    .hero-lineup-item {
      flex: 1 1 0;
      min-width: 0;
      display: flex;
      justify-content: center;
      align-items: flex-end;
      position: relative;
      transition: transform var(--d-base) var(--ease);
    }
    /* アシンメトリーで高さに変化(VSPO 風のリズム) */
    .hero-lineup-item[data-i="1"] { transform: translateY(8px); }
    .hero-lineup-item[data-i="2"] { transform: translateY(-24px); }
    .hero-lineup-item[data-i="3"] { transform: translateY(0); }     /* センター = 最も背高 */
    .hero-lineup-item[data-i="4"] { transform: translateY(-16px); }
    .hero-lineup-item[data-i="5"] { transform: translateY(12px); }
    /* ホバー時 = わずかに前へ */
    .hero-lineup-item:hover {
      transform: translateY(-32px) !important;
      z-index: 3;
    }
    .hero-lineup-item img {
      max-width: 100%;
      max-height: 72vh;
      width: auto;
      object-fit: contain;
      object-position: bottom center;
      filter: drop-shadow(0 16px 32px rgba(11, 14, 38, 0.12));
      pointer-events: none;
      user-select: none;
    }
    /* 立ち絵差し替え時のプレースホルダーラベル(画像が無いとき) */
    .hero-lineup-item img[alt]:empty::after {
      content: "[立ち絵 " attr(data-i) "]";
      font-family: var(--f-caption);
      color: var(--c-navy-soft);
    }

    /* カウントダウンウィジェット(フローティング = 左下) */
    .hero-announce-floating {
      position: absolute !important;
      left: var(--s-4); bottom: var(--s-6);
      z-index: 4;
      display: flex !important;
      flex-direction: column !important;
      align-items: flex-start !important;
      gap: 8px !important;
      padding: 16px 22px !important;
      background: rgba(255, 255, 255, 0.7) !important;
      border: 1px solid var(--c-glass-border) !important;
      backdrop-filter: blur(16px) !important;
      -webkit-backdrop-filter: blur(16px) !important;
      border-radius: 4px;
      box-shadow: 0 12px 40px rgba(11, 14, 38, 0.08);
    }
    .hero-announce-floating .hero-announce-label {
      font-family: var(--f-caption);
      font-size: 0.66rem;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: var(--c-navy-soft);
    }
    .hero-announce-floating .hero-countdown {
      align-self: stretch;
      justify-content: space-between;
    }
    .hero-announce-floating .hero-countdown .days {
      font-family: var(--f-number); font-style: italic;
      font-size: 1.8rem;
      color: var(--c-navy-dark);
    }
    .hero-announce-floating .hero-announce-date {
      font-family: var(--f-display);
      font-size: 0.95rem;
      letter-spacing: 0.08em;
      color: var(--c-navy-dark);
    }
    .hero-announce-floating .hero-announce-date strong {
      font-weight: 500;
    }

    /* hero-jp と hero-tagline は前面、立ち絵の上に小さく配置 */
    .hero-jp { position: relative; z-index: 2; }
    .hero-tagline { position: relative; z-index: 2; }
    .hero-jp {
      font-family: var(--f-serif-jp);
      font-weight: 300;
      font-size: clamp(0.85rem, 1.4vw, 1rem);
      letter-spacing: 0.5em;
      color: var(--c-navy-soft);
      margin-top: var(--s-2);
      padding-right: 0;
    }

    /* "A new star to be born" 誕生演出 */
    .hero-tagline {
      display: block;
      font-family: var(--f-display); font-style: italic;
      font-size: clamp(0.95rem, 1.5vw, 1.2rem);
      color: var(--c-navy-main);
      margin-top: var(--s-6);
      animation: birthStar 1200ms var(--ease) forwards;
      animation-delay: 300ms;
      opacity: 0;
      letter-spacing: 0.5em;
      filter: blur(4px);
    }
    @keyframes birthStar {
      from { opacity: 0; filter: blur(4px); letter-spacing: 0.5em; }
      to { opacity: 1; filter: blur(0); letter-spacing: 0.25em; }
    }

    /* v5.6:Hero 縦詰め(ユーザー FB #7 反映)
       - キャッチコピー上下の余白を縮め、画面内に Reveal 行まで収まるよう微調整 */
    .hero-catch-ph {
      margin: var(--s-6) auto var(--s-2);
      max-width: 640px;
      min-height: 2.5rem;
    }
    .hero-sub-ph {
      margin: var(--s-2) auto var(--s-4);
      max-width: 520px;
    }

    .hero-announce {
      display: inline-flex; align-items: center; gap: 1rem;
      margin-top: var(--s-3);
      padding: 14px 28px;
      background: rgba(255, 255, 255, 0.55);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid var(--c-glass-border);
      font-family: var(--f-caption);
      font-size: 0.78rem;
      letter-spacing: 0.18em; text-transform: uppercase;
      color: var(--c-navy-dark);
      position: relative;
    }
    .hero-announce strong {
      font-family: var(--f-display); font-weight: 500;
      font-size: 1.1rem; letter-spacing: 0.1em;
      text-transform: none;
    }
    /* v5.7:hero-announce--compact は markup ごと撤去(ユーザー FB「いらない」)。
       元バリアントの CSS も削除し、Hero の縦余白をさらに自然に。 */
    .hero-scarcity .sep {
      width: 32px; height: 1px;
      background: linear-gradient(90deg, transparent, var(--c-navy-soft), transparent);
      display: inline-block;
    }
    /* カウントダウンピル(Hero announce 内) */
    .hero-countdown {
      display: inline-flex; align-items: center; gap: 0.55rem;
      padding: 6px 14px 6px 10px;
      background: linear-gradient(135deg, rgba(199,184,232,0.35), rgba(184,220,217,0.35));
      border: 1px solid rgba(255,255,255,0.55);
      border-radius: 100px;
      font-family: var(--f-caption);
      font-size: 0.68rem;
      letter-spacing: 0.22em;
      color: var(--c-navy-dark);
      position: relative;
    }
    .hero-countdown::before {
      content: ""; width: 6px; height: 6px; border-radius: 50%;
      background: var(--c-navy-dark);
      box-shadow: 0 0 0 0 rgba(26,31,74,0.55);
      animation: pulseDot 2.4s ease-out infinite;
    }
    @keyframes pulseDot {
      0%   { box-shadow: 0 0 0 0 rgba(26,31,74,0.55); }
      70%  { box-shadow: 0 0 0 10px rgba(26,31,74,0); }
      100% { box-shadow: 0 0 0 0 rgba(26,31,74,0); }
    }
    .hero-countdown .days {
      font-family: var(--f-number); font-style: italic;
      font-size: 1.1rem; letter-spacing: 0.02em;
      color: var(--c-navy-dark);
    }

    /* ============================================================
       Hero scroll indicator(v5.8:ユーザー FB「印象的に / でもさりげなく」反映)
       ------------------------------------------------------------
       前バージョン(v5.7)では「線を伸ばした」が、ユーザーはまだ「小さい」と感じている。
       かといって「でかすぎないように」「さりげなさはほしい」とのこと。
       → サイズは据え置き、代わりに密度/コントラスト/印象で押し上げる:
         a) マウス本体の枠を 1.4px → 1.6px、border-radius を 16 → 18
         b) マウス背面に Aurora 系の薄ハロー(ラベンダー→ミントの放射状)を敷く
            → 「ただの線画」から「光をまとった器」へ格上げ
         c) Trail ライン:1px → 2px、不透明度 0.55 → 0.78、長さ 56 → 64
         d) Trail 上の走るドットを 1px → 1.5px、長さ 18 → 22
         e) 全体に 5.5s の超スロー pulse(scale 1.0 ⇌ 1.04)で生命感
       ============================================================ */
    .scroll-indicator {
      position: absolute; bottom: 1.6rem; left: 50%; transform: translateX(-50%);
      font-family: var(--f-caption); font-size: 0.72rem;
      letter-spacing: 0.34em; text-transform: uppercase;
      color: var(--c-navy-soft);
      display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
      animation: scrollPulse 5.5s ease-in-out infinite;
    }
    @keyframes scrollPulse {
      0%, 100% { transform: translateX(-50%) scale(1); opacity: 0.85; }
      50%      { transform: translateX(-50%) scale(1.04); opacity: 1; }
    }

    .scroll-indicator .scroll-mouse {
      width: 26px; height: 46px;
      border: 1.6px solid currentColor;
      border-radius: 18px;
      position: relative;
      /* v5.8:背面に Aurora ハロー — マウスが「光を纏う」印象に */
      box-shadow:
        0 0 0 4px rgba(255, 255, 255, 0.35),
        0 0 16px 2px rgba(199, 184, 232, 0.45),   /* Lavender glow */
        0 0 28px 4px rgba(184, 220, 217, 0.30);   /* Mint glow */
    }
    .scroll-indicator .scroll-mouse::after {
      content: "";
      position: absolute;
      top: 8px; left: 50%; transform: translateX(-50%);
      width: 3px; height: 9px; border-radius: 3px;
      background: currentColor;
      animation: scrollWheelDot 1.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
    }
    @keyframes scrollWheelDot {
      0%   { opacity: 0; transform: translate(-50%, 0); }
      30%  { opacity: 1; }
      80%  { opacity: 0; transform: translate(-50%, 20px); }
      100% { opacity: 0; transform: translate(-50%, 20px); }
    }

    /* v5.8:Trail ライン — 線そのものを「ちょい印象的」に。
       太さ/不透明度/長さを微増、コントラストを底上げ。 */
    .scroll-indicator .scroll-trail {
      position: relative;
      width: 2px; height: 64px;
      background: linear-gradient(180deg,
        currentColor 0%,
        color-mix(in srgb, currentColor 50%, transparent) 65%,
        transparent 100%);
      opacity: 0.78;
      border-radius: 2px;
    }
    .scroll-indicator .scroll-trail::after {
      content: "";
      position: absolute;
      left: 50%; top: 0;
      width: 1.5px; height: 22px;
      transform: translateX(-50%);
      background: currentColor;
      border-radius: 2px;
      animation: scrollTrailDot 2.2s cubic-bezier(0.55, 0, 0.45, 1) infinite;
      animation-delay: 0.2s;
    }
    @keyframes scrollTrailDot {
      0%   { opacity: 0; transform: translate(-50%, -10px); }
      20%  { opacity: 1; }
      80%  { opacity: 0; transform: translate(-50%, 60px); }
      100% { opacity: 0; transform: translate(-50%, 60px); }
    }

    @media (prefers-reduced-motion: reduce) {
      .scroll-indicator { animation: none; opacity: 0.9; }
      .scroll-indicator .scroll-mouse::after { animation: none; opacity: 0.7; }
      .scroll-indicator .scroll-trail::after { animation: none; opacity: 0.7; }
    }
    @media (max-width: 639px) {
      /* モバイルではトレイルを少し短く(viewport 圧迫回避) */
      .scroll-indicator .scroll-trail { height: 44px; }
      @keyframes scrollTrailDot {
        0%   { opacity: 0; transform: translate(-50%, -10px); }
        20%  { opacity: 1; }
        80%  { opacity: 0; transform: translate(-50%, 40px); }
        100% { opacity: 0; transform: translate(-50%, 40px); }
      }
    }

    /* ============================================================
       7. About
       ============================================================ */
    .about { text-align: center; }

    /* Scarcity Infographic — "600+ → 5" Editorial Panel */
    .scarcity-panel {
      margin: var(--s-8) auto 0;
      max-width: 920px;
      padding: var(--s-8) var(--s-6);
      background: rgba(255,255,255,0.55);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid var(--c-glass-border);
      border-radius: 2px;
      position: relative;
      overflow: hidden;
    }
    .scarcity-panel::before {
      content: "";
      position: absolute; inset: 0;
      background: radial-gradient(
        ellipse at 50% 0%,
        rgba(199,184,232,0.22) 0%,
        rgba(184,220,217,0.12) 45%,
        transparent 75%
      );
      pointer-events: none;
    }
    .scarcity-grid {
      position: relative; z-index: 1;
      display: grid; grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: var(--s-4);
    }
    .scarcity-block { text-align: center; }
    .scarcity-block .num {
      font-family: var(--f-number); font-style: italic;
      font-weight: 400;
      font-size: clamp(3.5rem, 7vw, 5.5rem);
      line-height: 1;
      color: var(--c-navy-main);
      display: block; margin-bottom: var(--s-1);
      letter-spacing: 0.02em;
    }
    .scarcity-block.highlight .num {
      background: linear-gradient(135deg, #5b3a8e 0%, #4fa7a4 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      position: relative;
    }
    .scarcity-block .caption {
      font-family: var(--f-serif-jp);
      font-size: 0.82rem;
      color: var(--c-navy-soft);
      margin-top: var(--s-1);
      letter-spacing: 0.1em;
    }
    .scarcity-arrow {
      font-family: var(--f-display);
      font-size: 2rem;
      color: var(--c-navy-soft);
      opacity: 0.55;
      display: flex; align-items: center; justify-content: center;
      min-width: 48px;
      position: relative;
    }
    .scarcity-arrow::before {
      content: ""; position: absolute; inset: 0;
      background: radial-gradient(circle at center, rgba(199,184,232,0.35) 0%, transparent 60%);
      pointer-events: none;
    }
    @media (max-width: 639px) {
      .scarcity-panel { padding: var(--s-6) var(--s-3); }
      .scarcity-grid { grid-template-columns: 1fr; gap: var(--s-3); }
      .scarcity-arrow { transform: rotate(90deg); min-width: 0; font-size: 1.5rem; }
    }
    /* v5.17(FB #3):和文に伊体 Bodoni は違和感 → 明朝(serif-jp)でトンマナ統一 */
    .about-lead {
      font-family: var(--f-body); font-weight: 500;
      font-size: clamp(1.15rem, 1.9vw, 1.5rem);
      letter-spacing: 0.08em;
      color: var(--c-navy-dark);
      margin: var(--s-4) auto var(--s-3);
      max-width: 760px;
      min-height: 2rem;
      text-align: center;
    }
    /* v5.17(FB #4):幅を広げ文の途中で折返さない(文末 <br> でのみ改行) */
    .about-body {
      max-width: 780px; margin: 0 auto var(--s-12);
      font-family: var(--f-serif-jp);
      font-weight: 400;
      font-size: 1rem;
      line-height: 2.2;
      text-align: center;
    }
    .about-body p { margin-bottom: var(--s-3); min-height: 1.8rem; }

    .values {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3);
      margin: var(--s-12) 0 var(--s-8);
    }
    .value-card {
      padding: var(--s-6) var(--s-4);
      text-align: center;
      transition: all var(--d-base) var(--ease);
    }
    .value-card:hover {
      background: rgba(255, 255, 255, 0.75);
      transform: translateY(-8px);
      box-shadow: 0 24px 64px rgba(11, 14, 38, 0.08);
    }
    .value-number {
      font-family: var(--f-number); font-style: italic;
      font-size: 1.75rem; color: var(--c-navy-soft);
      margin-bottom: var(--s-2);
      letter-spacing: 0.05em;
    }
    .value-title {
      font-family: var(--f-serif-jp); font-weight: 500;
      font-size: 1.1rem; color: var(--c-navy-dark);
      margin-bottom: var(--s-2);
      letter-spacing: 0.1em;
    }
    .value-desc {
      font-family: var(--f-serif-jp);
      font-size: 0.9rem; color: var(--c-navy-main);
      line-height: 2; min-height: 3rem;
    }

    /* About → Members 誘導リンク(小さく、控えめに) */
    .about-to-members {
      margin-top: var(--s-8); text-align: center;
    }
    .about-to-members a {
      font-family: var(--f-display); font-style: italic;
      font-size: 1rem;
      color: var(--c-navy-soft);
      letter-spacing: 0.15em;
      border-bottom: 1px solid currentColor;
      padding-bottom: 2px;
      transition: color var(--d-fast) var(--ease);
    }
    .about-to-members a:hover { color: var(--c-navy-dark); }

    /* Spec Table */
    .spec-table {
      max-width: 720px; margin: var(--s-8) auto 0;
      padding: var(--s-3) var(--s-6);
    }
    .spec-row {
      display: grid; grid-template-columns: 180px 1fr;
      gap: var(--s-3); padding: var(--s-3) 0;
      border-bottom: 1px solid rgba(26, 31, 74, 0.08);
    }
    .spec-row:last-child { border-bottom: none; }
    .spec-label {
      font-family: var(--f-caption); font-size: 0.72rem;
      font-weight: 500; letter-spacing: 0.25em;
      text-transform: uppercase; color: var(--c-navy-soft);
    }
    .spec-value {
      font-family: var(--f-serif-jp); font-weight: 500;
      color: var(--c-navy-dark);
    }

    /* ============================================================
       8. Members ★ LPの山場(主役扱い)
       ------------------------------------------------------------
       ライバー5名の存在感を最大化:
       - 見出しを大きく
       - セクション全体にゆったりとした縦余白
       - カードの立ち絵エリアを拡大(aspect 2:3)
       - カードの視覚ウェイトを底上げ
       ============================================================ */
    .members-section {
      text-align: center;
      position: relative;
      /* ライバーを目立たせるため、上下余白を特別に拡大 */
      padding-top: calc(var(--s-16) + var(--s-8));
      padding-bottom: calc(var(--s-16) + var(--s-8));
    }
    /* Members見出しだけ特別大きく */
    .members-section .heading-en {
      font-size: clamp(3rem, 6vw, 5rem);
      letter-spacing: 0.12em;
    }
    .members-section .heading-jp {
      font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    }
    .members-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: var(--s-3);
      margin-top: var(--s-16);
      padding: 0 var(--s-2);
    }
    /* アシンメトリー:1,3,5 = mt-0、 2,4 = mt-12(96px) */
    .member-card:nth-child(1),
    .member-card:nth-child(3),
    .member-card:nth-child(5) { margin-top: 0; }
    .member-card:nth-child(2),
    .member-card:nth-child(4) { margin-top: var(--s-12); }

    .member-card {
      position: relative;
      padding: var(--s-3) var(--s-3) var(--s-4);
      display: flex; flex-direction: column;
      transition: transform var(--d-base) var(--ease), box-shadow var(--d-base) var(--ease);
      overflow: visible;
    }
    .member-card:hover {
      /* 重厚感:浮上量は抑え、代わりに影を深く落とす */
      transform: translateY(-8px);
      box-shadow: 0 32px 64px rgba(11, 14, 38, 0.12);
    }
    /* ホバー時の光の波紋 */
    .member-card::after {
      content: "";
      position: absolute; inset: 0;
      background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.7), transparent 60%);
      opacity: 0; pointer-events: none;
      transition: opacity 600ms var(--ease);
      z-index: 2;
    }
    .member-card:hover::after { opacity: 1; }

    /* 巨大Playfair Italic 数字(背景) */
    .member-card-bignum {
      position: absolute;
      top: -24px; left: -20px;
      font-family: var(--f-number); font-style: italic;
      font-weight: 500;
      font-size: 7rem;
      line-height: 1;
      color: var(--c-navy-dark);
      opacity: 0.12;
      z-index: 0;
      pointer-events: none;
      letter-spacing: 0.02em;
    }

    .member-visual {
      /* ★ バストアップ表示用:4:5(わずかに縦長)、顔〜胸元が主役になる比率 */
      aspect-ratio: 4 / 5;
      margin-bottom: var(--s-3);
      background: linear-gradient(180deg, rgba(199, 184, 232, 0.18), rgba(184, 220, 217, 0.18));
      border: none;
      position: relative; overflow: hidden;
      z-index: 1;
      /* 頭部が切れないよう、上部に少し余白を確保(立ち絵がどんなサイズでも安全) */
      padding-top: 6%;
    }
    .member-visual-label {
      position: absolute; top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      font-family: monospace; font-size: 0.8rem;
      color: var(--c-navy-soft); opacity: 0.6;
    }
    /* パララックス対応:立ち絵は別レイヤー */
    .member-visual-layer {
      position: absolute; inset: 0;
      display: flex; align-items: flex-end; justify-content: center;
      will-change: transform;
      transition: transform var(--d-slow) var(--ease);
    }
    /*
      立ち絵画像(assets/members/member-NN.png)
      ★ バストアップ表示(堅牢版):
        - object-fit: cover … 枠いっぱい
        - object-position: center top … 頭部から表示、親の padding-top で余白確保
        - transform: scale(1.12) … わずかに拡大、顔まわりの存在感を増す
      どんな解像度・縦横比のPNGでも頭が切れないよう、
      親 .member-visual の padding-top と併用する設計
    */
    .member-portrait {
      width: 100%; height: 100%;
      object-fit: cover;
      object-position: center top;
      transform: scale(1.12);
      transform-origin: center top;
      display: block;
    }

    .member-body { position: relative; z-index: 1; }
    /* 名前:大きく、セリフで存在感 */
    .member-name-ph {
      min-height: 1.8rem; margin-bottom: 6px;
      font-family: var(--f-serif-jp); font-weight: 600;
      font-size: 1.15rem; color: var(--c-navy-dark);
      letter-spacing: 0.05em;
    }
    .member-attr {
      font-family: var(--f-caption);
      font-size: 0.68rem; color: var(--c-navy-soft);
      letter-spacing: 0.18em; text-transform: uppercase;
      margin-bottom: var(--s-2);
    }
    /* シネマティックな "catch" 引用 — メンバーの個性を一言で演出 */
    .member-tag-ph {
      position: relative;
      min-height: 1.6rem;
      margin: var(--s-1) 0 var(--s-3);
      padding: 0 1.2em;
      font-family: var(--f-display); font-style: italic;
      font-size: 0.95rem;
      color: var(--c-navy-main);
      line-height: 1.55;
      letter-spacing: 0.04em;
    }
    .member-tag-ph::before,
    .member-tag-ph::after {
      position: absolute;
      font-family: var(--f-number); font-style: italic;
      font-size: 1.8rem; line-height: 1;
      color: var(--c-aurora-lav);
      opacity: 0.7;
    }
    .member-tag-ph::before { content: "“"; left: 0; top: -0.2em; }
    .member-tag-ph::after  { content: "”"; right: 0; bottom: -0.5em; }
    .member-bio-ph { min-height: 3rem; margin-bottom: var(--s-3); text-align: left; }

    .member-sns {
      display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
      padding-top: var(--s-2);
      border-top: 1px solid rgba(26, 31, 74, 0.1);
      position: relative; z-index: 1;
    }
    .sns-icon {
      width: 100%; min-width: 0; height: 36px;
      display: flex; align-items: center; justify-content: center;
      border: 1px solid rgba(26, 31, 74, 0.15);
      background: rgba(255, 255, 255, 0.5);
      font-family: var(--f-caption); font-size: 0.6rem; font-weight: 500;
      color: var(--c-navy-dark); letter-spacing: 0.12em;
      border-radius: 2px;
      transition: all var(--d-fast) var(--ease);
    }
    .sns-icon svg { width: 15px; height: 15px; display: block; }
    .sns-icon:hover {
      background: var(--c-navy-dark); color: var(--c-primary);
      border-color: var(--c-navy-dark);
      transform: translateY(-1px);
    }
    /* 4点スパークル装飾(Hero / Members 背景上に浮遊) */
    .floating-sparkles {
      position: absolute; inset: 0; pointer-events: none; overflow: hidden;
      z-index: 0;
    }
    .floating-sparkles svg {
      position: absolute;
      color: rgba(199, 184, 232, 0.65);
      filter: drop-shadow(0 0 8px rgba(233, 199, 216, 0.4));
      animation: sparkleDrift var(--dur, 9s) ease-in-out infinite;
      opacity: 0;
    }
    .floating-sparkles svg.s1 { top: 18%;  left: 12%; width: 10px; height: 10px; --dur: 7s;  animation-delay: 0s; }
    .floating-sparkles svg.s2 { top: 68%;  left: 8%;  width: 8px;  height: 8px;  --dur: 9s;  animation-delay: 1.2s; }
    .floating-sparkles svg.s3 { top: 32%;  left: 88%; width: 12px; height: 12px; --dur: 8s;  animation-delay: 2.4s; color: rgba(244, 212, 197, 0.7); }
    .floating-sparkles svg.s4 { top: 80%;  left: 78%; width: 9px;  height: 9px;  --dur: 11s; animation-delay: 0.6s; }
    .floating-sparkles svg.s5 { top: 46%;  left: 54%; width: 14px; height: 14px; --dur: 12s; animation-delay: 3.0s; color: rgba(184, 220, 217, 0.7); }
    .floating-sparkles svg.s6 { top: 12%;  left: 68%; width: 7px;  height: 7px;  --dur: 10s; animation-delay: 4.2s; }
    @keyframes sparkleDrift {
      0%   { opacity: 0; transform: translateY(0) scale(0.8); }
      40%  { opacity: 0.85; transform: translateY(-12px) scale(1); }
      60%  { opacity: 0.85; transform: translateY(-18px) scale(1.05); }
      100% { opacity: 0; transform: translateY(-36px) scale(0.85); }
    }
    @media (prefers-reduced-motion: reduce) {
      .floating-sparkles svg { animation: none; opacity: 0.5; }
    }
    .member-detail-link {
      display: block; margin-top: var(--s-1);
      padding: 10px;
      text-align: center;
      font-family: var(--f-caption); font-size: 0.7rem; font-weight: 500;
      color: var(--c-navy-soft); letter-spacing: 0.18em;
      border-top: 1px solid rgba(26, 31, 74, 0.08);
      transition: color var(--d-fast) var(--ease);
      position: relative; z-index: 1;
    }
    .member-detail-link:hover { color: var(--c-navy-dark); }

    .members-note {
      font-family: var(--f-caption); font-size: 0.72rem;
      color: var(--c-navy-soft); margin-top: var(--s-8);
      letter-spacing: 0.15em;
    }

    /* ============================================================
       9. Term(就任期間)
       ============================================================ */
    .term-section { text-align: center; }
    /* v5.14(FB #4):term-box の白い枠線・点線・✦装飾を撤去
       → 周囲の Aurora 背景にそのまま溶け込む構造へ */
    .term-box {
      max-width: 720px; margin: var(--s-4) auto;
      padding: 48px 48px;
      position: relative;
      /* border / glass-1 系の背景は撤去 — 中央テキストのみで自然に */
      background: transparent;
      border: 0;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      /* v5.14(FB #5):内部テキストを中央寄せに固定 */
      text-align: center;
    }
    .term-box::before,
    .term-box::after { content: none; }
    .term-gen-label {
      font-family: var(--f-display); font-style: italic;
      font-size: 0.9rem; color: var(--c-navy-soft);
      letter-spacing: 0.22em; margin-bottom: var(--s-4);
    }
    .term-dates {
      font-family: var(--f-display);
      font-weight: 500;
      font-size: clamp(1.75rem, 4vw, 2.75rem);
      letter-spacing: 0.05em;
      color: var(--c-navy-dark);
      margin-bottom: var(--s-2);
      line-height: 1.2;
    }
    .term-duration {
      font-family: var(--f-serif-jp);
      color: var(--c-navy-main);
      margin-bottom: var(--s-4);
      letter-spacing: 0.1em;
      /* v5.12(FB #16):"6 months / 半年サイクル" を term-box の中央に配置 */
      text-align: center;
      width: 100%;
      display: block;
    }
    .term-note {
      font-family: var(--f-serif-jp);
      font-size: 0.88rem; color: var(--c-navy-soft);
      line-height: 2.1;
      max-width: 480px; margin: 0 auto;
      /* v5.14(FB #5):box 中央に文章配置(親 .term-box は text-align:center だが
         max-width 480px で寄ってしまうため明示) */
      text-align: center;
    }

    /* ============================================================
       10. Journey(選考プロセス) — 600→60→5のファネル演出
       ============================================================
       4ステップ構造:
         01 デビュー(600名) →
         02 ROYAL(60名) →
         03 STELLAR選考(5名) →
         04 STELLAR就任
       各ステップに大きな数字を配置し、絞り込みを視覚化
       ------------------------------------------------------------ */
    .process-section { text-align: center; }
    .journey-funnel {
      display: grid;
      grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
      /* v5.12(FB #11, #12):横軸高さを揃えるため、各行を明示的に grid-row 化
         stepno → number → title → title-en → desc の 5 行を共有し、
         全ステップが同じ高さで並ぶようにする(.journey-step に subgrid 適用) */
      grid-template-rows: auto auto auto auto auto;
      align-items: stretch;
      gap: var(--s-2);
      margin: var(--s-6) auto var(--s-4);
      max-width: 1200px;
    }
    .journey-step {
      /* subgrid で親の 5 行に乗せる:各ステップで stepno / number / title / title-en / desc が
         同じ行高で並ぶ */
      display: grid;
      grid-row: 1 / span 5;
      grid-template-rows: subgrid;
      justify-items: center;
      text-align: center;
      padding: var(--s-3) var(--s-2);
      position: relative;
      gap: 0;
    }
    /* 各セル内で子要素を上揃え(center 寄せだとミスアラインに見える) */
    .journey-step > .journey-stepno   { align-self: start; }
    .journey-step > .journey-number   { align-self: end; }   /* v5.20.1(FB):600/60/5 の下端を同一ラインに揃える */
    .journey-step > .journey-title    { align-self: end; }
    .journey-step > .journey-title-en { align-self: start; }
    .journey-step > .journey-desc     { align-self: start; }
    /* subgrid 非対応ブラウザ(古い Safari 等)のフォールバック:flex 列に戻す */
    @supports not (grid-template-rows: subgrid) {
      .journey-funnel { grid-template-rows: none; }
      .journey-step {
        display: flex; flex-direction: column; align-items: center;
        grid-row: auto;
      }
    }
    .journey-stepno {
      font-family: var(--f-caption);
      font-size: 0.72rem; font-weight: 500;
      letter-spacing: 0.25em; text-transform: uppercase;
      color: var(--c-navy-soft);
      margin-bottom: var(--s-2);
    }
    .journey-number {
      font-family: var(--f-number); font-style: italic;
      font-weight: 500;
      line-height: 1;
      color: var(--c-navy-dark);
      margin-bottom: var(--s-2);
      background: linear-gradient(180deg, #5b3a8e 0%, #4fa7a4 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    /* 数字サイズ:絞り込みを強調(600→60→5→STELLARで徐々に大きく見せる) */
    .journey-step[data-n="600"] .journey-number { font-size: clamp(3rem, 7vw, 5rem); }
    .journey-step[data-n="60"]  .journey-number { font-size: clamp(3.5rem, 8vw, 6rem); }
    .journey-step[data-n="5"]   .journey-number { font-size: clamp(4rem, 10vw, 7rem); }
    /* Step 04:数字→アイコンのジャンプ率緩和 + 発光エフェクトで頂点到達のカタルシス */
    .journey-step[data-n="star"] .journey-number {
      font-size: clamp(3rem, 7vw, 4.5rem);
      filter: drop-shadow(0 0 12px rgba(91, 58, 142, 0.5));
    }
    /* Journey Step 04:実ロゴを star 位置に */
    .journey-step[data-n="star"] .journey-number img,
    .journey-step[data-n="star"] .journey-number svg {
      width: 1em; height: 1em; vertical-align: middle;
      object-fit: contain;
    }
    .journey-star-logo {
      display: inline-block;
    }
    .journey-title {
      font-family: var(--f-serif-jp); font-weight: 600;
      font-size: 1rem; color: var(--c-navy-dark);
      letter-spacing: 0.1em;
      margin-bottom: 4px;
    }
    .journey-title-en {
      font-family: var(--f-display);
      font-style: italic;
      font-size: 0.78rem;
      color: var(--c-navy-soft);
      letter-spacing: 0.08em;
      margin-bottom: var(--s-2);
    }
    .journey-desc {
      font-family: var(--f-serif-jp);
      font-size: 0.82rem; color: var(--c-navy-main);
      line-height: 1.8;
      max-width: 220px;
    }
    /* 矢印(区切り) — Grid align-self で中央揃え、堅牢レイアウト */
    .journey-arrow {
      font-family: var(--f-display);
      font-size: 1.75rem;
      color: var(--c-navy-soft);
      opacity: 0.4;
      line-height: 1;
      /* v5.12:subgrid 化に伴い、矢印は number 行(2行目)に縦中央配置 */
      grid-row: 2;
      align-self: center;
    }
    .journey-arrow::before { content: "→"; }

    .audition-cta-box {
      max-width: 640px; margin: var(--s-8) auto 0;
      padding: var(--s-6);
      background: rgba(11, 14, 38, 0.04);
      border: 1px solid var(--c-navy-dark);
      text-align: center;
    }
    .audition-cta-title {
      font-family: var(--f-serif-jp); font-weight: 500;
      font-size: 1.1rem; color: var(--c-navy-dark);
      margin-bottom: var(--s-2); letter-spacing: 0.1em;
    }
    .audition-cta-desc {
      font-family: var(--f-serif-jp);
      font-size: 0.9rem; color: var(--c-navy-main);
      margin-bottom: var(--s-4); line-height: 2;
    }
    .audition-cta-btn {
      display: inline-block;
      padding: 16px 40px;
      background: var(--c-navy-dark); color: var(--c-primary);
      font-family: var(--f-body); font-size: 0.78rem; font-weight: 500;
      letter-spacing: 0.25em; text-transform: uppercase;
      transition: all var(--d-fast) var(--ease);
      border: 1px solid var(--c-navy-dark);
    }
    .audition-cta-btn:hover {
      background: transparent; color: var(--c-navy-dark);
    }

    /* ============================================================
       11. Benefits(特別な体験 + 限定サポート)
       ============================================================ */
    .activities-section { text-align: center; }
    .benefits-block { margin-top: var(--s-8); }
    .benefits-block-heading {
      font-family: var(--f-serif-jp);
      font-weight: 500;
      font-size: 1.15rem;
      color: var(--c-navy-dark);
      letter-spacing: 0.15em;
      margin-bottom: var(--s-1);
    }
    .benefits-block-heading .benefit-symbol {
      display: inline-block; margin-right: 10px;
      color: var(--c-navy-soft);
      font-family: var(--f-display);
      font-style: italic;
    }
    .benefits-block-sub {
      font-family: var(--f-serif-jp);
      font-size: 0.85rem;
      color: var(--c-navy-soft);
      letter-spacing: 0.1em;
      margin-bottom: var(--s-6);
    }
    .benefits-divider {
      max-width: 320px; margin: var(--s-12) auto;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(26, 31, 74, 0.2), transparent);
      position: relative;
    }
    .benefits-divider::after {
      content: "✦";
      position: absolute; top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      background: var(--c-surface);
      padding: 0 16px;
      font-size: 0.8rem; color: var(--c-navy-soft);
    }
    .activities-grid {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3);
      margin-top: 0;
    }
    .activity-card {
      padding: var(--s-6) var(--s-4);
      text-align: left;
      transition: all var(--d-base) var(--ease);
    }
    .activity-card:hover {
      background: rgba(255, 255, 255, 0.8);
      transform: translateY(-4px);
      box-shadow: 0 24px 64px rgba(11, 14, 38, 0.08);
    }
    /* Activity icon:公式ロゴマークの縮小版を使用(画像未配置時はインラインSVG fallback) */
    .activity-icon {
      width: 44px; height: 44px;
      margin-bottom: var(--s-3);
      display: flex; align-items: center; justify-content: center;
      color: var(--c-navy-dark);
    }
    .activity-icon img {
      width: 100%; height: 100%; object-fit: contain;
    }
    .activity-icon svg { width: 100%; height: 100%; }
    .activity-title {
      font-family: var(--f-serif-jp); font-weight: 500;
      font-size: 1.05rem; color: var(--c-navy-dark);
      margin-bottom: var(--s-1); letter-spacing: 0.08em;
      min-height: 1.4rem;
    }
    .activity-desc {
      font-family: var(--f-serif-jp);
      font-size: 0.88rem; color: var(--c-navy-main);
      line-height: 2; min-height: 3rem;
    }

    /* ============================================================
       12.5 News(お知らせ)
       ============================================================
       エンジニア更新ポイント:
       - 各ニュース項目は .news-item を1単位として追加
       - data-cat="event|exposure|collab|info" でカテゴリ指定(色分け自動)
       - 日付は <time datetime="2026-06-01">2026.06.01</time>
       - 新しい項目は上に追加(新着順)
       - 5件以上になったら .news-list に scroll 付与または CMS化検討
       ------------------------------------------------------------ */
    .news-section { text-align: left; }
    /* v5.8:News → Footer 間の余白を抹消(ユーザー FB #1「ヘッダーの下に空白が余ってる」🔴 重要反映)。
       原因:section の bottom padding(128px)が aurora 透けて見える band を作っていた。
       対策:
         a) news-section の padding-bottom を 0 にして section 自体を footer に密着
         b) news-all-wrap (View All ボタン)も margin を最小化
         c) footer 直上に幅広グラデオーバーレイを敷き、白〜ネイビーへ滑らかに繋ぐ
            → aurora blob が透ける band を視覚的に塗りつぶす */
    .news-section { padding-bottom: 0; }
    .news-section .news-all-wrap { margin-top: var(--s-4); margin-bottom: var(--s-6); }
    /* footer 直前のグラデブリッジ:本サイトの off-white から footer の #06081a へ自然に遷移 */
    .news-section::after {
      content: "";
      display: block;
      height: var(--s-6);
      margin-top: var(--s-4);
      background: linear-gradient(180deg,
        transparent 0%,
        rgba(11, 14, 38, 0.05) 50%,
        rgba(11, 14, 38, 0.15) 100%);
      pointer-events: none;
    }
    .news-section .eyebrow,
    .news-section .heading-en,
    .news-section .heading-jp,
    .news-section .sub { text-align: center; display: block; }
    .news-section .eyebrow { display: inline-flex; }
    .news-list {
      max-width: 880px; margin: var(--s-8) auto 0;
      display: flex; flex-direction: column; gap: 0;
    }
    .news-item {
      display: grid;
      grid-template-columns: 110px 110px 1fr auto;
      gap: var(--s-3);
      align-items: center;
      padding: var(--s-3) var(--s-2);
      border-bottom: 1px solid rgba(26, 31, 74, 0.1);
      transition: background var(--d-fast) var(--ease);
    }
    .news-item:first-child { border-top: 1px solid rgba(26, 31, 74, 0.1); }
    .news-item:hover { background: rgba(255, 255, 255, 0.5); }
    .news-date {
      font-family: var(--f-display);
      font-size: 0.85rem; color: var(--c-navy-soft);
      letter-spacing: 0.05em;
    }
    .news-cat {
      display: inline-block;
      font-family: var(--f-caption);
      font-size: 0.65rem; font-weight: 500;
      letter-spacing: 0.2em; text-transform: uppercase;
      padding: 4px 10px;
      border: 1px solid currentColor;
      text-align: center;
      justify-self: start;
    }
    /* カテゴリ別カラー */
    .news-item[data-cat="event"]    .news-cat { color: #5b3a8e; }
    .news-item[data-cat="exposure"] .news-cat { color: #4fa7a4; }
    .news-item[data-cat="collab"]   .news-cat { color: #c48a5e; }
    .news-item[data-cat="info"]     .news-cat { color: var(--c-navy-soft); }
    .news-title {
      font-family: var(--f-serif-jp); font-weight: 500;
      font-size: 0.95rem; color: var(--c-navy-dark);
      letter-spacing: 0.04em;
    }
    .news-title a {
      color: inherit;
      display: inline-block;
      transform-origin: left center;
      transition: transform var(--d-fast) var(--ease);
    }
    .news-title a:hover { transform: scale(1.035); }
    .news-arrow {
      color: var(--c-navy-soft); font-size: 1rem;
      opacity: 0.5; transition: transform var(--d-fast);
    }
    .news-item:hover .news-arrow { transform: translateX(4px); opacity: 1; }
    .news-all {
      display: inline-block; margin: var(--s-6) auto 0;
      font-family: var(--f-caption); font-size: 0.78rem; font-weight: 500;
      letter-spacing: 0.22em; text-transform: uppercase;
      padding: 12px 32px;
      border: 1px solid var(--c-navy-main);
      color: var(--c-navy-main);
      transition: all var(--d-fast) var(--ease);
    }
    .news-all:hover { background: var(--c-navy-main); color: var(--c-primary); }
    .news-all-wrap { text-align: center; }

    /* ============================================================
       12. Archive
       ============================================================ */
    .archive-section { text-align: center; }
    .archive-current {
      max-width: 800px; margin: var(--s-4) auto;
      padding: var(--s-6) var(--s-8);
    }
    .archive-current.upcoming {
      border-style: dashed;
      background: rgba(255, 255, 255, 0.3);
      opacity: 0.7;
    }
    .archive-term-badge {
      display: inline-block;
      padding: 6px 16px;
      background: var(--c-navy-dark);
      color: var(--c-primary);
      font-family: var(--f-caption); font-size: 0.7rem; font-weight: 500;
      letter-spacing: 0.22em; text-transform: uppercase;
      margin-bottom: var(--s-3);
    }
    .archive-term-badge.upcoming { background: var(--c-navy-soft); }
    .archive-gen-title {
      font-family: var(--f-display);
      font-weight: 500;
      font-size: 1.6rem;
      letter-spacing: 0.12em;
      color: var(--c-navy-dark);
      margin-bottom: var(--s-4);
    }
    .archive-members-mini {
      display: flex; justify-content: center; gap: 10px;
      margin: var(--s-3) 0;
      flex-wrap: wrap;
    }
    .archive-mini-card {
      width: 64px; aspect-ratio: 3/4;
      background: linear-gradient(180deg, rgba(199, 184, 232, 0.3), rgba(184, 220, 217, 0.3));
      border: 1px solid rgba(26, 31, 74, 0.1);
      display: flex; align-items: center; justify-content: center;
      font-family: var(--f-number); font-style: italic;
      font-size: 0.9rem; color: var(--c-navy-soft);
      position: relative;
      overflow: hidden;
    }
    /* upcoming(未来の世代)カード:ぼかし+シマーで"未だ見ぬ"感を表現 */
    .archive-mini-card.is-upcoming {
      color: rgba(26, 31, 74, 0.25);
    }
    .archive-mini-card.is-upcoming::before {
      content: "";
      position: absolute; inset: 0;
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      background: linear-gradient(180deg, rgba(255,255,255,0.45), rgba(255,255,255,0.15));
    }
    .archive-mini-card.is-upcoming::after {
      content: "";
      position: absolute; top: 0; left: -50%;
      width: 50%; height: 100%;
      background: linear-gradient(120deg,
        transparent 0%,
        rgba(255, 255, 255, 0.7) 50%,
        transparent 100%);
      animation: upcomingShimmer 3.6s ease-in-out infinite;
    }
    .archive-mini-card.is-upcoming > * { position: relative; z-index: 1; }
    @keyframes upcomingShimmer {
      0%   { left: -60%; }
      50%  { left: 120%; }
      100% { left: 120%; }
    }
    @media (prefers-reduced-motion: reduce) {
      .archive-mini-card.is-upcoming::after { animation: none; opacity: 0; }
    }
    .archive-link-hint {
      font-family: var(--f-caption); font-size: 0.72rem;
      color: var(--c-navy-soft);
      letter-spacing: 0.2em; margin-top: var(--s-2);
      text-transform: uppercase;
    }
    .archive-note {
      max-width: 640px; margin: var(--s-6) auto 0;
      font-family: var(--f-serif-jp); font-size: 0.88rem;
      color: var(--c-navy-main); line-height: 2.1;
    }

    /* ============================================================
       13. Razz
       ============================================================ */
    .razz-section { text-align: center; }
    .razz-body {
      max-width: 600px; margin: var(--s-4) auto var(--s-8);
      font-family: var(--f-serif-jp);
      font-size: 1rem; line-height: 2.2;
      min-height: 3rem;
    }
    .razz-stats {
      display: flex; justify-content: center; gap: var(--s-12);
      margin: var(--s-8) 0;
      flex-wrap: wrap;
    }
    .stat-item { text-align: center; }
    .stat-num {
      font-family: var(--f-display); font-weight: 500;
      font-size: 2.5rem; color: var(--c-navy-dark);
      letter-spacing: 0.02em; display: block;
    }
    .stat-label {
      font-family: var(--f-caption); font-size: 0.7rem;
      color: var(--c-navy-soft);
      letter-spacing: 0.25em; text-transform: uppercase;
      margin-top: var(--s-1);
    }
    .razz-link {
      display: inline-block;
      font-family: var(--f-caption); font-size: 0.78rem; font-weight: 500;
      letter-spacing: 0.25em; text-transform: uppercase;
      padding: 16px 40px;
      border: 1px solid var(--c-navy-dark);
      color: var(--c-navy-dark);
      transition: all var(--d-fast) var(--ease);
    }
    .razz-link:hover { background: var(--c-navy-dark); color: var(--c-primary); }

    /* Razzプロダクション内の応募CTAボックス(紹介文の下) */
    .razz-cta-box {
      max-width: 640px; margin: var(--s-6) auto 0;
      padding: var(--s-6) var(--s-4);
      text-align: center;
    }
    .razz-cta-title {
      font-family: var(--f-serif-jp); font-weight: 500;
      font-size: 1.1rem; color: var(--c-navy-dark);
      margin-bottom: var(--s-2); letter-spacing: 0.1em;
    }
    .razz-cta-desc {
      font-family: var(--f-serif-jp);
      font-size: 0.9rem; color: var(--c-navy-main);
      margin-bottom: var(--s-4); line-height: 2;
    }
    .razz-cta-btn {
      display: inline-block;
      padding: 14px 36px;
      background: var(--c-navy-dark); color: var(--c-primary);
      font-family: var(--f-caption); font-size: 0.8rem; font-weight: 500;
      letter-spacing: 0.22em; text-transform: uppercase;
      border: 1px solid var(--c-navy-dark);
      transition: all var(--d-fast) var(--ease);
    }
    .razz-cta-btn:hover {
      background: transparent; color: var(--c-navy-dark);
    }

    /* ============================================================
       14. Final CTA(Navy Dark ハイコントラスト反転)
       ============================================================ */
    .cta-section {
      text-align: center;
      padding: var(--s-24) 0;
      background: var(--c-navy-dark);
      color: var(--c-primary);
      position: relative;
      margin-top: var(--s-16);
    }
    /* 反転セクションでも微かにオーロラの残照 */
    .cta-section::before {
      content: "";
      position: absolute; inset: 0;
      background:
        radial-gradient(ellipse 60% 40% at 50% 0%, rgba(199, 184, 232, 0.18), transparent 60%);
      pointer-events: none;
    }
    .cta-inner { position: relative; z-index: 1; }
    .cta-heading {
      font-family: var(--f-serif-jp); font-weight: 400;
      font-size: clamp(1.5rem, 3vw, 2.25rem);
      line-height: 1.6; margin-bottom: var(--s-2);
      letter-spacing: 0.1em;
      color: var(--c-primary);
      min-height: 2rem;
    }
    .cta-sub {
      font-family: var(--f-display); font-style: italic;
      color: var(--c-aurora-mint); margin-bottom: var(--s-8);
      font-size: 1rem;
      letter-spacing: 0.15em;
    }
    .cta-tracks {
      display: grid;
      /* Priority I を視覚的に最優先として2倍の面積を与える */
      grid-template-columns: 2fr 1fr 1fr;
      gap: var(--s-3);
      max-width: 1080px; margin: 0 auto;
    }
    .cta-track {
      padding: var(--s-8) var(--s-4);
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.12);
      display: flex; flex-direction: column; align-items: center;
      text-align: center;
      transition: all var(--d-base) var(--ease);
    }
    .cta-track:hover { background: rgba(255, 255, 255, 0.08); }
    /* Priority I 差別化 — オーロラハロー + シマー光帯で「主役」を明示 */
    .cta-track.primary {
      border: 1px solid transparent;
      background:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(199,184,232,0.22), transparent 75%),
        radial-gradient(ellipse 60% 50% at 50% 100%, rgba(184,220,217,0.14), transparent 75%),
        rgba(255, 255, 255, 0.05);
      position: relative;
      box-shadow:
        0 0 0 1px rgba(232,220,247,0.22) inset,
        0 30px 80px -40px rgba(199,184,232,0.45);
    }
    /* 内側のオーロラリング(常時) */
    .cta-track.primary::before {
      content: "";
      position: absolute; inset: 6px;
      border: 1px solid rgba(232, 220, 247, 0.22);
      pointer-events: none;
    }
    /* 上縁を走る微かな光帯(シマー) */
    .cta-track.primary::after {
      content: "";
      position: absolute; top: -1px; left: 0; right: 0; height: 1px;
      background: linear-gradient(90deg,
        transparent 0%,
        rgba(199,184,232,0) 20%,
        rgba(255,255,255,0.9) 50%,
        rgba(184,220,217,0) 80%,
        transparent 100%);
      background-size: 200% 100%;
      animation: primaryShimmer 4.2s ease-in-out infinite;
      pointer-events: none;
    }
    @keyframes primaryShimmer {
      0%   { background-position: 200% 0%; opacity: 0; }
      20%  { opacity: 1; }
      80%  { opacity: 1; }
      100% { background-position: -200% 0%; opacity: 0; }
    }
    @media (prefers-reduced-motion: reduce) {
      .cta-track.primary::after { animation: none; opacity: 0.5; background-position: center; }
    }
    .cta-track-rank {
      font-family: var(--f-display); font-style: italic;
      font-size: 0.85rem;
      color: var(--c-aurora-mint);
      letter-spacing: 0.2em; text-transform: uppercase;
      margin-bottom: var(--s-2);
    }
    .cta-track-title {
      font-family: var(--f-serif-jp); font-weight: 500;
      font-size: 1.15rem;
      color: var(--c-primary);
      margin-bottom: var(--s-3); letter-spacing: 0.1em;
    }
    .cta-track-desc {
      font-family: var(--f-serif-jp);
      font-size: 0.88rem; color: rgba(255, 255, 255, 0.7);
      margin-bottom: var(--s-4); line-height: 2;
      flex-grow: 1;
    }
    .cta-track-btn {
      display: inline-block;
      padding: 14px 32px;
      font-family: var(--f-caption); font-size: 0.78rem; font-weight: 500;
      letter-spacing: 0.22em; text-transform: uppercase;
      border: 1px solid var(--c-primary);
      color: var(--c-primary);
      transition: all var(--d-fast) ease-out;
    }
    .cta-track-btn:hover {
      background: var(--c-primary); color: var(--c-navy-dark);
    }
    /* Priority I のSNSアイコン:ホバー時オーロラ色へ */
    .cta-members-sns {
      display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;
      width: 100%; margin-top: var(--s-2);
    }
    .cta-track.primary .sns-icon {
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.25);
      color: var(--c-primary);
      height: 44px;
    }
    .cta-track.primary .sns-icon:hover {
      background: linear-gradient(135deg, var(--c-aurora-lav), var(--c-aurora-pink));
      color: var(--c-navy-dark);
      border-color: transparent;
    }

    /* ============================================================
       15. Footer
       ============================================================ */
    .footer {
      background: #06081a;
      color: rgba(255, 255, 255, 0.8);
      padding: var(--s-8) 0 var(--s-3);
    }
    .footer-inner {
      display: grid; grid-template-columns: 2fr 2fr 1fr; gap: var(--s-6);
      margin-bottom: var(--s-6);
    }
    .footer-logo {
      font-family: var(--f-display); font-weight: 500;
      font-size: 1.15rem; letter-spacing: 0.3em;
      color: var(--c-primary);
      margin-bottom: var(--s-1);
    }
    .footer-desc {
      font-family: var(--f-serif-jp);
      font-size: 0.85rem; color: rgba(255, 255, 255, 0.55);
      line-height: 2;
    }
    .footer-links {
      display: flex; flex-direction: column; gap: 10px;
      font-family: var(--f-caption); font-size: 0.82rem;
    }
    .footer-links a {
      color: rgba(255, 255, 255, 0.7); letter-spacing: 0.1em;
      transition: color var(--d-fast) var(--ease);
    }
    .footer-links a:hover { color: var(--c-primary); }
    .footer-sns {
      display: flex; gap: 10px; justify-content: flex-end;
    }
    .footer-sns .sns-icon {
      width: 40px; height: 40px; font-size: 0.72rem;
      background: rgba(255,255,255,0.06);
      border-color: rgba(255,255,255,0.18);
      color: var(--c-primary);
    }
    .footer-bottom {
      border-top: 1px solid rgba(255, 255, 255, 0.08);
      padding-top: var(--s-3);
      text-align: center;
      font-family: var(--f-caption); font-size: 0.68rem;
      color: rgba(255, 255, 255, 0.5); letter-spacing: 0.25em;
    }

    /* ============================================================
       16. Skip link + Reveal
       ============================================================ */
    .skip-link {
      position: absolute; left: -9999px; top: 0;
      padding: 10px 20px; background: var(--c-navy-dark); color: var(--c-primary);
      font-family: var(--f-caption); font-size: 0.85rem; font-weight: 500;
      letter-spacing: 0.1em;
      z-index: 200;
    }
    /* フォーカス時:影付きで背景から浮き立たせる(視認性向上) */
    .skip-link:focus {
      left: 16px; top: 16px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
      outline: 2px solid var(--c-primary); outline-offset: 2px;
    }

    /* Reveal 仕様:threshold 0.15, y 40→0, opacity 0→1, 800ms, stagger 100ms */
    [data-reveal] {
      opacity: 0;
      transform: translateY(40px);
      transition: opacity var(--d-slow) var(--ease), transform var(--d-slow) var(--ease);
    }
    [data-reveal].is-visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* ============================================================
       17. Reduced motion
       ============================================================ */
    @media (prefers-reduced-motion: reduce) {
      .aurora-blob { animation: none; }
      .hero-emblem-inner { animation: none; }
      .hero-emblem-core { animation: none; opacity: 1; }
      .hero-tagline { animation: none; opacity: 1; filter: none; letter-spacing: 0.25em; }
      .scroll-indicator::after { animation: none; }
      [data-reveal] { opacity: 1; transform: none; transition: opacity var(--d-fast) linear; }
    }

    /* ============================================================
       18. Responsive
       ============================================================ */
    @media (max-width: 1023px) {
      .container { padding: 0 var(--s-3); }
      .header-inner { padding: 0 var(--s-3); }
      section { padding: var(--s-12) 0; }

      /* ──────────────── ナビゲーション(ハンバーガー) ────────────────
         v5.9 から vm-base.css に集約(Constellation Rail mobile drawer)。
         ここのオーバーライドは削除。 */

      .values { grid-template-columns: 1fr; gap: var(--s-2); }
      /* Members: 2列 + 5枚目中央 */
      .members-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-3); }
      .member-card:nth-child(odd),
      .member-card:nth-child(even) { margin-top: 0 !important; }
      .member-card:nth-child(5) { grid-column: 1 / -1; max-width: 50%; margin: 0 auto; }
      /* v5.14:Journey はタブレット/モバイルとも縦 1 列に統一
         (「600→60→5→★」の絞り込みナラティブを保つため、
          2x2 だと読み順が Z 字になり物語が崩れる)。
         subgrid は desktop 専用 — ここで明示的に解除しないと leak する。 */
      .journey-funnel {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        gap: var(--s-3);
        max-width: 480px;
      }
      .journey-step {
        display: flex; flex-direction: column; align-items: center;
        grid-row: auto;
        grid-template-rows: none;
      }
      /* タブレット/モバイル時の矢印は ↓ に変更し中央配置 */
      .journey-arrow {
        display: block;
        font-size: 1.5rem;
        grid-row: auto;
        align-self: center;
        margin: 0 auto;
      }
      .journey-arrow::before { content: "↓"; }
      /* Process(旧) */
      .process-timeline { grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }
      .process-timeline::before { display: none; }
      .activities-grid { grid-template-columns: repeat(2, 1fr); }
      .footer-inner { grid-template-columns: 1fr; gap: var(--s-4); }
      .footer-sns { justify-content: flex-start; }
      /* Final CTA タブレット:1列に */
      .cta-tracks { grid-template-columns: 1fr; }
      .term-box { padding: 64px 32px; }
    }
    @media (max-width: 639px) {
      .container { padding: 0 20px; }
      .header-inner { padding: 0 20px; }
      section { padding: 64px 0; }
      /* .cta-header / .header-credit のモバイル非表示は vm-base.css に集約 */
      .hero { padding-top: calc(64px + 32px); min-height: 100vh; padding-bottom: var(--s-6); }
      .hero-emblem { width: 200px; height: 200px; }
      /* v5.3: モバイルでも溢れない安全な値 */
      .hero-wordmark {
        font-size: clamp(2rem, 9vw, 2.6rem);
        letter-spacing: clamp(0.08em, 2vw, 0.18em);
      }
      .hero-wordmark.hero-wordmark-bg { font-size: 5.5rem; letter-spacing: 0.05em; opacity: 0.05; }
      .heading-jp { font-size: 1.25rem; }
      .hero-meta-top { flex-direction: row; gap: 1rem; align-items: center; margin-bottom: var(--s-2); font-size: 0.6rem; }
      .hero-meta-top span { text-align: center !important; max-width: none; }
      /* モバイル時のラインナップ:横スクロールで5名を流す + ピーク表示 */
      .hero-lineup {
        gap: 0;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 0 30%;            /* 左右に余白 = 中央集中で表示 */
        justify-content: flex-start;
        margin-top: var(--s-2);
      }
      .hero-lineup::-webkit-scrollbar { display: none; }
      .hero-lineup-item {
        flex: 0 0 60%;             /* 1枚あたり画面60% = ピーク表示 */
        scroll-snap-align: center;
        transform: translateY(0) !important;
      }
      .hero-lineup-item img { max-height: 56vh; }
      /* カウントダウン:左下フローティング → モバイルでは縮小 */
      .hero-announce-floating {
        left: 12px !important; right: 12px;
        bottom: var(--s-4) !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 10px 16px !important;
      }
      .hero-announce-floating .hero-countdown { align-self: auto; }
      .hero-announce-floating .hero-countdown .days { font-size: 1.4rem; }
      .members-grid { grid-template-columns: 1fr; }
      .member-card:nth-child(5) { max-width: 100%; }
      /* モバイル時の巨大数字:カードを抱き込むエレガントな配置に */
      .member-card-bignum {
        font-size: 4.5rem;
        top: -16px; left: -4px;
        opacity: 0.08;
      }
      /* v5.14:Journey の縦 1 列ルールは @media (max-width: 1023px) に集約済。
         モバイル(<640px)では gap だけ更に詰める */
      .journey-funnel { gap: var(--s-2); max-width: 100%; }
      .activities-grid { grid-template-columns: 1fr; }
      .razz-stats { gap: var(--s-4); }
      .archive-members-mini { flex-wrap: wrap; }
      .cta-section { padding: 96px 0; }
      /* タップ領域確保 min-height 44px */
      .sns-icon { min-height: 40px; }
      .cta-track-btn, .audition-cta-btn, .razz-cta-btn, .razz-link { min-height: 44px; }
    }

    /* ============================================================
       ★ v5 Members Spotlight(2026-05-12)
       Featured + PREV/NEXT/Thumbs Switcher
       ★ VSPO 方式の --member-color システム導入(2026-05-12)
       ============================================================ */
    .members-section.v5 {
      padding: var(--s-16) 0 var(--s-12);
      /* デフォルト色(JS が data-member-id 上書きする) */
      --member-color: #C7B8E8;
      --member-color-2: #5b3a8e;
      transition: --member-color 600ms var(--ease);
    }
    /* セクション内の主要装飾を --member-color で連動させる */
    .members-section.v5 .eyebrow { color: var(--member-color-2); }
    .members-section.v5 .members-portrait-img {
      filter: drop-shadow(0 20px 40px color-mix(in srgb, var(--member-color-2) 30%, transparent));
    }
    .members-section.v5 .members-info-num {
      color: var(--member-color-2);
    }
    .members-section.v5 .members-stage-bg-img {
      mix-blend-mode: multiply;
    }
    /* タグライン引用符をメンバー色に */
    .members-section.v5 .members-info-tag::before {
      color: var(--member-color);
    }
    /* アクセントライン:情報カラムと立ち絵の間のサブテラリ的な縦バー */
    .members-section.v5 .members-stage-inner::before {
      content: "";
      position: absolute;
      left: calc(50% - 2px); top: 12%; bottom: 12%;
      width: 1px;
      background: linear-gradient(180deg,
        transparent 0%,
        var(--member-color) 50%,
        transparent 100%);
      opacity: 0.4;
      transition: background 600ms var(--ease);
      pointer-events: none;
    }
    @media (max-width: 1023px) {
      .members-section.v5 .members-stage-inner::before { display: none; }
    }
    .members-section.v5 .members-grid { display: none; } /* 旧グリッド完全停止 */
    .members-section.v5 .container { max-width: 1440px; }

    /* ============================================================
       v5.16 alt(index-alt.html 専用)— Members 5 カード並列
       ・ ウマ娘 character ページ参考
       ・ 各カード:Liver カラー基準の 3 色グラデ背景 + 立ち絵フル + 名前帯
       ・ Hover でリフトアップ + シャドウ強化(クリック誘導を明示)
       ・ クリック → member.html?id=member-X へ遷移
       ・ Editorial × Aurora トーン維持(キャラ前面だが余白と serif を保つ)
       ============================================================ */
    .members-cards {
      list-style: none;
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: var(--s-2);
      max-width: 1440px;
      margin: var(--s-8) auto 0;
      padding: 0;
    }
    .members-card {
      position: relative;
      aspect-ratio: 3 / 5;
      overflow: hidden;
      border-radius: 4px;
      border: 1px solid color-mix(in srgb, var(--mc, #C7B8E8) 50%, transparent);
      background:
        linear-gradient(180deg,
          color-mix(in srgb, var(--mc, #C7B8E8) 35%, #FAF8FF) 0%,
          #FAF8FF 55%,
          color-mix(in srgb, var(--mc2, #5A98B5) 25%, #FAF8FF) 100%);
      transition: transform var(--d-base) var(--ease),
                  box-shadow var(--d-base) var(--ease),
                  border-color var(--d-fast) var(--ease);
      box-shadow: 0 6px 18px rgba(11, 14, 38, 0.06);
    }
    /* color-mix 非対応ブラウザ用フォールバック */
    @supports not (background: color-mix(in srgb, red, blue)) {
      .members-card { background: linear-gradient(180deg, var(--mc, #C7B8E8) 0%, #FAF8FF 50%, var(--mc2, #5A98B5) 100%); opacity: 0.95; }
    }
    .members-card-link {
      display: block;
      position: absolute; inset: 0;
      text-decoration: none;
      color: inherit;
      z-index: 2;
    }
    .members-card-link:focus-visible {
      outline: 2px solid var(--mc2, #0B0E26);
      outline-offset: -4px;
    }
    .members-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 24px 56px color-mix(in srgb, var(--mc2, #5A98B5) 35%, rgba(11,14,38,0.18));
      border-color: var(--mc2, #5A98B5);
    }
    .members-card__portrait {
      position: absolute;
      left: 0; right: 0; bottom: 32%;  /* 名前帯ぶん上げ */
      top: 4%;
      width: 100%;
      object-fit: contain;
      object-position: bottom center;
      filter: drop-shadow(0 12px 24px color-mix(in srgb, var(--mc2, #5A98B5) 30%, rgba(11,14,38,0.10)));
      transition: transform var(--d-base) var(--ease);
      pointer-events: none;
    }
    .members-card:hover .members-card__portrait { transform: scale(1.04); }
    .members-card__shine {
      position: absolute; inset: 0;
      pointer-events: none;
      background: radial-gradient(ellipse 70% 50% at 50% 30%, color-mix(in srgb, var(--mc, #C7B8E8) 25%, transparent) 0%, transparent 70%);
      mix-blend-mode: screen;
      opacity: 0.6;
    }
    .members-card__band {
      position: absolute; left: 0; right: 0; bottom: 0;
      padding: var(--s-3) var(--s-2) var(--s-3);
      background: linear-gradient(180deg,
        transparent 0%,
        color-mix(in srgb, var(--mc2, #5A98B5) 78%, rgba(11,14,38,0.0)) 35%,
        color-mix(in srgb, var(--mc2, #5A98B5) 92%, #000) 100%);
      backdrop-filter: blur(2px);
      -webkit-backdrop-filter: blur(2px);
      text-align: center;
      z-index: 1;
    }
    .members-card__no {
      display: block;
      font-family: var(--f-number); font-style: italic;
      font-size: 0.78rem; letter-spacing: 0.22em;
      color: rgba(255,255,255,0.75);
      margin-bottom: 4px;
    }
    .members-card__name {
      display: block;
      font-family: var(--f-serif-jp); font-weight: 600;
      font-size: clamp(1rem, 1.4vw, 1.25rem);
      letter-spacing: 0.08em;
      color: #fff;
      text-shadow: 0 1px 2px rgba(11,14,38,0.35);
      line-height: 1.3;
    }
    .members-card__name-en {
      display: block;
      font-family: var(--f-display); font-style: italic;
      font-size: 0.74rem;
      color: rgba(255,255,255,0.75);
      letter-spacing: 0.08em;
      margin-top: 4px;
    }
    .members-card__more {
      position: absolute;
      top: 12px; right: 12px;
      padding: 4px 10px;
      background: rgba(255,255,255,0.85);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border: 1px solid color-mix(in srgb, var(--mc2, #5A98B5) 30%, rgba(255,255,255,0.6));
      border-radius: 999px;
      font-family: var(--f-caption); font-size: 0.65rem;
      letter-spacing: 0.18em; text-transform: uppercase;
      color: var(--mc2, #0B0E26);
      opacity: 0;
      transform: translateY(-4px);
      transition: opacity var(--d-fast) var(--ease), transform var(--d-fast) var(--ease);
      pointer-events: none;
      z-index: 1;
    }
    .members-card:hover .members-card__more,
    .members-card-link:focus-visible ~ .members-card__more {
      opacity: 1; transform: translateY(0);
    }
    @media (hover: none) {
      .members-card__more { opacity: 0.85; transform: translateY(0); }
    }
    /* タブレット:3 列 → モバイル:2 列 */
    @media (max-width: 1199px) {
      .members-cards { grid-template-columns: repeat(3, 1fr); }
    }
    @media (max-width: 767px) {
      .members-cards { grid-template-columns: repeat(2, 1fr); gap: var(--s-1); }
      .members-card__name { font-size: 0.95rem; }
      .members-card__name-en { font-size: 0.66rem; }
      .members-card__more { display: none; } /* tap で遷移するので不要 */
    }
    @media (max-width: 480px) {
      .members-cards { grid-template-columns: 1fr; max-width: 360px; }
    }

    /* ヘッダー(タイトル + PREV/NEXT) */
    .members-header {
      display: flex; align-items: flex-end; justify-content: space-between;
      flex-wrap: wrap; gap: var(--s-4);
      margin-bottom: var(--s-8);
    }

    /* PREV/NEXT ナビ(参考画像のピル風) */
    .members-nav {
      display: flex; align-items: stretch;
      background: rgba(255, 255, 255, 0.5);
      border: 1px solid rgba(26, 31, 74, 0.18);
      border-radius: 100px;
      overflow: hidden;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }
    /* v5.12:members-nav-btn(PREV/NEXT)関連 CSS は markup 撤去済(v5.11)につき削除 */

    /* ステージ(featured spotlight 本体) */
    .members-stage {
      position: relative;
      width: 100%;
      min-height: 620px;
      padding: var(--s-6) 0;
      overflow: hidden;
      margin: 0 auto;
    }
    /* 大型背景クローズアップ(右側にフェード配置) */
    .members-stage-bg {
      position: absolute;
      top: 0; right: -8%; bottom: 0; width: 50%;
      pointer-events: none;
      mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.6) 30%, rgba(0,0,0,0.4) 100%);
      -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.6) 30%, rgba(0,0,0,0.4) 100%);
    }
    .members-stage-bg-img {
      width: 100%; height: 100%;
      object-fit: cover;
      /* v5.10.1:頭/顔の見切れ修正(ユーザー FB 反映)
         - object-position: center top で画像の上端(=頭頂)をコンテナ上端に固定
         - transform-origin も top に揃え、scale で zoom しても頭が下に押し下げられない
         - scale を 1.3 → 1.12 に圧縮し、過剰ズームを抑制
         - opacity 0.5 → 0.42 で主役の立ち絵を更に前面に */
      object-position: center top;
      transform: scale(1.12);
      transform-origin: center top;
      opacity: 0.42;
      filter: blur(2px);
      transition: opacity var(--d-slow) var(--ease), transform var(--d-slow) var(--ease);
    }
    /* インナー:左情報 + 右立ち絵 */
    .members-stage-inner {
      position: relative; z-index: 2;
      display: grid;
      grid-template-columns: minmax(280px, 1fr) minmax(380px, 1.2fr);
      gap: var(--s-8);
      max-width: 1440px;
      margin: 0 auto;
      padding: 0 var(--s-3);
      align-items: center;
      min-height: 620px;
    }
    /* 切替時のフェード(v5.5 で 600 → 900ms に「緩やか」化) */
    .members-stage.is-switching .members-stage-bg-img,
    .members-stage.is-switching .members-portrait-img {
      animation: memberFadeIn 900ms var(--ease) both;
    }
    @keyframes memberFadeIn {
      0%   { opacity: 0; transform: scale(1.04) translateY(6px); }
      100% { opacity: 1; transform: scale(1) translateY(0); }
    }
    .members-stage.is-switching .members-stage-bg-img {
      animation-name: memberBgFadeIn;
    }
    @keyframes memberBgFadeIn {
      0%   { opacity: 0; transform: scale(1.35); }
      100% { opacity: 0.5; transform: scale(1.3); }
    }

    /* 情報カラム(左) */
    .members-info { display: flex; flex-direction: column; gap: var(--s-2); }
    .members-info-eyebrow {
      font-family: var(--f-caption);
      font-size: 0.74rem; letter-spacing: 0.28em;
      text-transform: uppercase;
      color: var(--c-navy-soft);
      margin-bottom: var(--s-2);
    }
    .members-info-eyebrow .members-info-num {
      font-family: var(--f-number); font-style: italic;
      font-size: 1.15rem;
      color: var(--c-navy-dark);
      letter-spacing: 0.02em;
      margin: 0 4px;
    }
    .members-info-name-jp {
      font-family: var(--f-serif-jp);
      font-weight: 600;
      font-size: clamp(2.5rem, 5vw, 3.8rem);
      line-height: 1.15;
      letter-spacing: 0.06em;
      color: var(--c-navy-dark);
      margin-bottom: 4px;
    }
    .members-info-name-en {
      font-family: var(--f-display); font-style: italic;
      font-size: 1rem;
      color: var(--c-navy-soft);
      letter-spacing: 0.18em;
    }
    .members-info-attr {
      font-family: var(--f-caption);
      font-size: 0.72rem; letter-spacing: 0.25em;
      text-transform: uppercase;
      color: var(--c-navy-soft);
      padding-bottom: var(--s-3);
      border-bottom: 1px solid rgba(26, 31, 74, 0.12);
      margin-bottom: var(--s-3);
    }
    .members-info-tag {
      font-family: var(--f-display); font-style: italic;
      font-size: 1.1rem;
      color: var(--c-navy-main);
      line-height: 1.5;
      letter-spacing: 0.04em;
    }
    .members-info-bio {
      font-family: var(--f-serif-jp);
      font-size: 0.95rem; line-height: 2;
      color: var(--c-navy-main);
      letter-spacing: 0.03em;
      margin-top: var(--s-2);
    }
    .members-info-sns {
      display: flex; gap: 8px;
      margin-top: var(--s-3);
    }
    .members-info-sns .sns-icon { width: 44px; height: 44px; }
    .members-info-detail {
      display: inline-block;
      margin-top: var(--s-3);
      padding: 12px 28px;
      font-family: var(--f-caption); font-size: 0.74rem; font-weight: 500;
      letter-spacing: 0.22em; text-transform: uppercase;
      border: 1px solid var(--c-navy-dark);
      color: var(--c-navy-dark);
      align-self: flex-start;
      transition: all var(--d-fast) var(--ease);
    }
    .members-info-detail:hover { background: var(--c-navy-dark); color: var(--c-primary); }

    /* 立ち絵(右) */
    .members-portrait {
      display: flex; justify-content: center; align-items: flex-end;
      position: relative;
      min-height: 540px;
    }
    .members-portrait-img {
      max-width: 100%;
      max-height: 600px;
      width: auto;
      object-fit: contain;
      object-position: bottom center;
      filter: drop-shadow(0 20px 40px rgba(11, 14, 38, 0.14));
      transition: filter var(--d-base) var(--ease), transform var(--d-base) var(--ease);
    }
    /* v5.6:立ち絵クリック → プロフィールページ遷移(ユーザー FB #3 反映)
       - block な <a> でラップし、子要素 (img) を撫でるとリフトアップ
       - 「View Profile →」を hover/focus でフェードインさせクリック可能と気づかせる */
    .members-portrait-link {
      display: block;
      text-decoration: none;
      color: inherit;
      position: relative;
      border-radius: 12px;
      transition: transform var(--d-base) var(--ease);
    }
    .members-portrait-link:hover .members-portrait-img,
    .members-portrait-link:focus-visible .members-portrait-img {
      transform: translateY(-6px);
      filter: drop-shadow(0 28px 48px color-mix(in srgb, var(--member-color, #1a1f4a) 35%, rgba(11, 14, 38, 0.18)));
    }
    .members-portrait-link:focus-visible {
      outline: 2px solid color-mix(in srgb, var(--member-color, #5b3a8e) 70%, transparent);
      outline-offset: 6px;
    }
    .members-portrait-cue {
      position: absolute;
      left: 50%; bottom: 18px;
      transform: translate(-50%, 8px);
      padding: 8px 18px;
      font-family: var(--f-caption);
      font-size: 0.7rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--c-navy-dark);
      background: rgba(255,255,255,0.85);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border: 1px solid color-mix(in srgb, var(--member-color, #5b3a8e) 30%, rgba(255,255,255,0.6));
      border-radius: 999px;
      box-shadow: 0 6px 18px rgba(11,14,38,0.08);
      opacity: 0;
      pointer-events: none;
      transition: opacity var(--d-fast) var(--ease), transform var(--d-fast) var(--ease);
      white-space: nowrap;
    }
    .members-portrait-link:hover .members-portrait-cue,
    .members-portrait-link:focus-visible .members-portrait-cue {
      opacity: 1;
      transform: translate(-50%, 0);
    }
    @media (hover: none) {
      /* タッチ端末では常時表示(ヒントが必要) */
      .members-portrait-cue { opacity: 0.85; transform: translate(-50%, 0); }
    }

    /* ============================================================
       v5.6:サムネイル再デザイン(ユーザー FB #4 反映)
       ------------------------------------------------------------
       「名前だけでもっとリッチに / 縦スペース節約 / クリックしたくなる仕掛け」
       新スペック:
         - 横長カード:番号(No.01) + 名前 + 矢印 を 1 行に
         - 立ち絵画像は撤去(下に派手な肌色ブロックが続くと縦が膨らむ)
         - hover:左から細いラインがスライドイン + 矢印が右へ → クリック誘導
         - active:メンバー色のグラデを底辺にライン状で敷く(浮かない・落ち着き)
         - mobile:番号 + 名前のみ(矢印は非表示にしてさらに省スペース)
       ============================================================ */
    .members-thumbs {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: var(--s-1);
      max-width: 1440px;
      margin: var(--s-6) auto 0;
    }
    .members-thumb {
      position: relative;
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 10px;
      padding: 12px 14px;
      background: rgba(255, 255, 255, 0.55);
      border: 1px solid rgba(26, 31, 74, 0.10);
      border-radius: 4px;
      cursor: pointer;
      overflow: hidden;
      transition: background var(--d-fast) var(--ease),
                  border-color var(--d-fast) var(--ease),
                  color var(--d-fast) var(--ease);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }
    /* 左端:hover で出てくるカラー縦バー(クリック誘導の主役) */
    .members-thumb::before {
      content: "";
      position: absolute;
      left: 0; top: 0; bottom: 0;
      width: 3px;
      background: var(--thumb-color, #5b3a8e);
      transform: scaleY(0);
      transform-origin: center;
      transition: transform var(--d-fast) var(--ease);
    }
    .members-thumb:hover::before { transform: scaleY(1); }
    .members-thumb:hover {
      background: rgba(255, 255, 255, 0.85);
      border-color: color-mix(in srgb, var(--thumb-color, #C7B8E8) 45%, transparent);
    }
    .members-thumb.is-active {
      background: color-mix(in srgb, var(--thumb-color, #C7B8E8) 14%, rgba(255,255,255,0.7));
      border-color: var(--c-navy-dark);
    }
    .members-thumb.is-active::before {
      transform: scaleY(1);
      background: linear-gradient(180deg, var(--thumb-color, #5b3a8e), var(--c-navy-dark));
    }
    /* 下端:アクティブ時にメンバー色の薄いグラデを差して浮かせない */
    .members-thumb.is-active::after {
      content: "";
      position: absolute;
      left: 12px; right: 12px; bottom: 6px;
      height: 1px;
      background: linear-gradient(90deg,
        transparent,
        color-mix(in srgb, var(--thumb-color, #5b3a8e) 60%, transparent),
        transparent);
    }
    /* フォールバック */
    @supports not (background: color-mix(in srgb, red, blue)) {
      .members-thumb:hover { border-color: rgba(91, 58, 142, 0.4); }
      .members-thumb.is-active {
        background: rgba(199, 184, 232, 0.16);
      }
    }
    .members-thumb-num {
      font-family: var(--f-number); font-style: italic;
      font-size: 0.95rem;
      color: var(--c-navy-soft);
      opacity: 0.7;
      letter-spacing: 0.02em;
      transition: color var(--d-fast) var(--ease), opacity var(--d-fast) var(--ease);
    }
    .members-thumb:hover .members-thumb-num,
    .members-thumb.is-active .members-thumb-num {
      opacity: 1;
      color: var(--c-navy-dark);
    }
    /* 立ち絵画像は新デザインでは非表示にして縦スペース節約。
       data 階層は残してあるので、将来 small 表示で復活させたい場合は
       下の display:none を外すか、別 class に差し替えれば OK。 */
    .members-thumb-img { display: none; }
    .members-thumb-name {
      font-family: var(--f-serif-jp);
      font-size: 0.92rem;
      letter-spacing: 0.08em;
      color: var(--c-navy-main);
      text-align: left;
      line-height: 1.2;
      /* 1 行に収まらないキャラ名は省略 */
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .members-thumb.is-active .members-thumb-name {
      color: var(--c-navy-dark);
      font-weight: 500;
    }
    /* 矢印:hover/active で右に滑り出てクリック可能感を出す */
    .members-thumb-arrow {
      font-family: var(--f-display);
      font-size: 0.95rem;
      color: var(--c-navy-soft);
      opacity: 0;
      transform: translateX(-4px);
      transition: opacity var(--d-fast) var(--ease), transform var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
    }
    .members-thumb:hover .members-thumb-arrow,
    .members-thumb.is-active .members-thumb-arrow {
      opacity: 1;
      transform: translateX(0);
      color: var(--c-navy-dark);
    }

    .members-note {
      max-width: 800px; margin: var(--s-6) auto 0;
      text-align: center;
      font-family: var(--f-caption); font-size: 0.74rem;
      letter-spacing: 0.18em;
      color: var(--c-navy-soft);
    }

    @media (max-width: 1023px) {
      /* v5.10:モバイル/タブレットでは razz.jp 方式 = 立ち絵が先頭、テキストはその下に。
         DOM は info → portrait の順番なので、grid の order で portrait を 1 番目に。 */
      .members-stage-inner { grid-template-columns: 1fr; gap: var(--s-4); min-height: 0; }
      .members-stage-inner > .members-portrait-link { order: -1; }
      /* v5.11:スマホで背景クローズアップ立ち絵が大きすぎる問題対応(FB #17 鶴岡)
         旧 width: 80%; right: -10% → width: 55%; right: -8% に縮小、
         opacity も更に薄く(0.42 → 0.30)して主役の立ち絵を圧迫しない */
      .members-stage-bg { width: 55%; right: -8%; }
      .members-stage-bg-img { opacity: 0.30; transform: scale(1.05); }
      .members-portrait { min-height: 400px; }
      .members-portrait-img { max-height: 480px; }
      /* 立ち絵が先頭になるので情報カラム側を中央寄せに */
      .members-info { text-align: center; align-items: center; }
      .members-info-eyebrow,
      .members-info-sns { justify-content: center; }
    }
    @media (max-width: 639px) {
      .members-header { flex-direction: column; align-items: stretch; }
      .members-nav { align-self: flex-start; }
      .members-nav-btn { padding: 10px 20px; font-size: 0.7rem; }
      /* v5.6:狭幅では 2 列に折り返して縦をさらに節約 */
      .members-thumbs { grid-template-columns: repeat(2, 1fr); gap: 6px; }
      .members-thumb { padding: 10px 12px; gap: 8px; }
      .members-thumb-num { font-size: 0.85rem; }
      .members-thumb-name { font-size: 0.82rem; }
      .members-thumb-arrow { display: none; }
      .members-stage { min-height: 0; }
      .members-portrait-img { max-height: 380px; }
    }
    @media (max-width: 1023px) and (min-width: 640px) {
      /* タブレット:3 列にして 1 行分の縦圧縮 */
      .members-thumbs { grid-template-columns: repeat(3, 1fr); }
    }

    /* ============================================================
       ★ v4 構造再編(2026-04-25)— 5セクション構成
       ★ 既存スタイル尊重で、新規クラスのみ追加
       ============================================================ */

    /* ===== §Introduction:サブブロック区切り線 =====
       v5.10:Members の後ろに移動した上で、占有スペースを圧縮(ユーザー FB 反映)。
       padding と divider の上下マージンを大きく削って、ライバー紹介後の余韻を保ちつつ
       制度説明の分量感を下げる。 */
    .introduction-section { padding: var(--s-8) 0; }  /* 旧:section { padding: 128px } → 64px */
    .introduction-section .intro-sub {
      max-width: 1440px; margin: 0 auto;
      padding: var(--s-6) var(--s-3) 0;  /* 旧:96px → 48px */
    }
    .intro-divider {
      max-width: 600px;
      margin: var(--s-6) auto var(--s-3);  /* 旧:96px / 48px → 48px / 24px */
      border: 0; height: 1px;
      background: linear-gradient(90deg,
        transparent 0%,
        rgba(26, 31, 74, 0.12) 50%,
        transparent 100%);
      position: relative;
    }
    .intro-divider::after {
      content: "✦";
      position: absolute; top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      font-family: var(--f-number); font-style: italic;
      font-size: 0.85rem;
      color: var(--c-aurora-lav);
      background: var(--c-surface);
      padding: 0 12px;
      letter-spacing: 0;
    }

    /* ===== §4 News:Featured(Vフェス枠)強調 ===== */
    .news-item.news-featured {
      background: linear-gradient(135deg,
        rgba(199, 184, 232, 0.22),
        rgba(184, 220, 217, 0.18));
      border: 1px solid var(--c-glass-border);
      padding: var(--s-3) var(--s-4);
      margin-bottom: var(--s-3);
      position: relative;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }
    .news-item.news-featured::before {
      content: "";
      position: absolute; top: -1px; left: 0; right: 0; height: 1px;
      background: linear-gradient(90deg,
        transparent 0%,
        rgba(199, 184, 232, 0) 20%,
        rgba(255, 255, 255, 0.9) 50%,
        rgba(184, 220, 217, 0) 80%,
        transparent 100%);
      background-size: 200% 100%;
      animation: primaryShimmer 5s ease-in-out infinite;
    }
    .news-item.news-featured .news-cat {
      background: var(--c-navy-dark);
      color: var(--c-primary);
      border-color: var(--c-navy-dark);
    }
    .news-item.news-featured .news-title {
      font-size: 1.1rem;
      font-weight: 400;
    }

    /* ============================================================
       §5 Recruitment(v5.10.3 新設)
       ------------------------------------------------------------
       Footer 直前に置くライバー募集 CTA。
         - 全幅、控えめなオーロラグラデのバンド背景
         - 左:eyebrow + heading + 短いコピー
         - 右:Apply ボタン + 次回オーディション予定
         - モバイルでは縦積み(stack)
         - Aurora ヘアラインで section の頭・尻に光帯
       ============================================================ */
    .recruitment-section {
      position: relative;
      padding: var(--s-12) 0;
      background:
        linear-gradient(180deg,
          rgba(199, 184, 232, 0.10) 0%,
          rgba(184, 220, 217, 0.08) 50%,
          rgba(244, 212, 197, 0.10) 100%);
      overflow: hidden;
    }
    /* 上端・下端にアクセントの hairline(Aurora の屈折光) */
    .recruitment-section::before,
    .recruitment-section::after {
      content: "";
      position: absolute; left: 0; right: 0;
      height: 1px;
      background: linear-gradient(90deg,
        transparent 0%,
        rgba(199,184,232,0.55) 25%,
        rgba(184,220,217,0.55) 50%,
        rgba(244,212,197,0.55) 75%,
        transparent 100%);
      opacity: 0.6;
      pointer-events: none;
    }
    .recruitment-section::before { top: 0; }
    .recruitment-section::after  { bottom: 0; }

    .recruitment-inner {
      max-width: 1180px; margin: 0 auto;
      padding: 0 var(--s-3);
      display: grid;
      grid-template-columns: 1.3fr auto;
      gap: var(--s-8);
      align-items: center;
    }
    .recruitment-text { text-align: left; }
    .recruitment-eyebrow {
      display: inline-block;
      font-family: var(--f-caption);
      font-size: 0.72rem; letter-spacing: 0.3em;
      text-transform: uppercase;
      color: var(--c-navy-soft);
      margin-bottom: var(--s-2);
    }
    .recruitment-eyebrow::before {
      content: "✦"; margin-right: 0.6em;
      color: var(--c-aurora-lav);
      font-size: 0.85em;
    }
    .recruitment-heading-en {
      font-family: var(--f-display); font-weight: 400;
      font-size: clamp(1.8rem, 3.5vw, 2.6rem);
      letter-spacing: 0.06em;
      color: var(--c-navy-dark);
      line-height: 1.15;
      margin-bottom: var(--s-1);
    }
    .recruitment-heading-jp {
      font-family: var(--f-serif-jp); font-weight: 400;
      font-size: clamp(0.95rem, 1.6vw, 1.15rem);
      letter-spacing: 0.18em;
      color: var(--c-navy-main);
      margin-bottom: var(--s-6);   /* v5.19(FB#13):下余白を拡大 */
    }
    .recruitment-copy {
      font-family: var(--f-serif-jp);
      font-size: 0.92rem; line-height: 2;
      color: var(--c-navy-main);
      letter-spacing: 0.04em;
      max-width: 560px;
    }
    .recruitment-copy strong {
      font-family: var(--f-display); font-weight: 500;
      font-style: italic;
      color: var(--c-navy-dark);
      letter-spacing: 0.04em;
    }

    .recruitment-cta-col {
      display: flex; flex-direction: column;
      gap: var(--s-2);
      align-items: flex-end;
    }
    .recruitment-cta-btn {
      display: inline-flex; align-items: center; gap: 0.8em;
      padding: 18px 36px;
      background: var(--c-navy-dark); color: var(--c-primary);
      font-family: var(--f-caption); font-size: 0.78rem; font-weight: 500;
      letter-spacing: 0.28em; text-transform: uppercase;
      border: 1px solid var(--c-navy-dark);
      transition: background var(--d-fast) var(--ease), color var(--d-fast) var(--ease), transform var(--d-fast) var(--ease);
      white-space: nowrap;
    }
    .recruitment-cta-btn:hover {
      background: transparent;
      color: var(--c-navy-dark);
      transform: translateY(-2px);
    }
    .recruitment-cta-btn .arrow {
      font-style: normal;
      transition: transform var(--d-fast) var(--ease);
    }
    .recruitment-cta-btn:hover .arrow { transform: translateX(4px); }

    .recruitment-meta {
      font-family: var(--f-caption);
      font-size: 0.7rem; letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--c-navy-soft);
      text-align: right;
    }
    .recruitment-meta strong {
      font-family: var(--f-display); font-style: italic;
      font-weight: 500;
      color: var(--c-navy-dark);
      letter-spacing: 0.05em;
      margin-right: 0.3em;
      text-transform: none;
    }

    @media (max-width: 1023px) {
      .recruitment-section { padding: var(--s-8) 0; }
      .recruitment-inner { grid-template-columns: 1fr; gap: var(--s-4); }
      .recruitment-text { text-align: center; }
      .recruitment-copy { max-width: 100%; }
      .recruitment-cta-col { align-items: center; }
      .recruitment-meta { text-align: center; }
    }
    @media (max-width: 639px) {
      .recruitment-cta-btn { padding: 14px 28px; font-size: 0.72rem; letter-spacing: 0.22em; }
    }

    /* ===== Footer:v4 で 4 リンク主導 + 法務小さく ===== */
    .footer-links-primary {
      display: flex; flex-direction: column;
      gap: var(--s-2);
    }
    .footer-links-primary a {
      font-family: var(--f-serif-jp); font-weight: 500;
      font-size: 0.95rem;
      color: rgba(255, 255, 255, 0.92);
      transition: color var(--d-fast) var(--ease);
      letter-spacing: 0.05em;
    }
    .footer-links-primary a:hover {
      color: var(--c-aurora-lav);
    }
    .footer-links-legal {
      display: flex; flex-direction: column; gap: 6px;
      font-size: 0.78rem;
      color: rgba(255, 255, 255, 0.55);
    }
    .footer-links-legal a {
      color: rgba(255, 255, 255, 0.55);
      letter-spacing: 0.06em;
      transition: color var(--d-fast) var(--ease);
    }
    .footer-links-legal a:hover { color: rgba(255, 255, 255, 0.92); }
    .footer-operator {
      margin-top: var(--s-1);
      letter-spacing: 0.05em;
      color: rgba(255, 255, 255, 0.4);
      font-size: 0.7rem;
    }
    /* v4 では footer-sns は廃止(主要外部リンクに統合) */
    .footer-inner .footer-sns { display: none; }

    /* ============================================================
       ★ Modern UI 2026 拡張(後置きで既存スタイル尊重)
       ============================================================ */

    /* ---------- (0a) Brand Selection Color ---------- */
    ::selection { background: #c7b8e8; color: #0B0E26; text-shadow: none; }
    ::-moz-selection { background: #c7b8e8; color: #0B0E26; }

    /* ---------- (0b) Focus Ring(キーボード操作時のみ) ---------- */
    :focus { outline: none; }
    :focus-visible { outline: 2px solid #5b3a8e; outline-offset: 3px; border-radius: 2px; }
    .sns-icon:focus-visible,
    .cta-track-btn:focus-visible,
    .razz-cta-btn:focus-visible,
    .btn-magnetic:focus-visible {
      outline-color: #4fa7a4; outline-offset: 4px;
    }

    /* ---------- (0c) Scroll Progress Bar(ページ上端) ---------- */
    .scroll-progress {
      position: fixed; top: 0; left: 0;
      width: 0%; height: 2px;
      background: linear-gradient(90deg, #5b3a8e 0%, #c7b8e8 50%, #4fa7a4 100%);
      z-index: 1000;
      pointer-events: none;
      will-change: width;
      box-shadow: 0 1px 8px rgba(199, 184, 232, 0.55);
    }

    /* ---------- (0d) Aurora Section Divider ---------- */
    .aurora-divider {
      position: relative; border: 0; height: 1px;
      margin: var(--s-8) auto; max-width: 880px;
      background: linear-gradient(90deg,
        transparent 0%,
        rgba(199, 184, 232, 0.4) 25%,
        rgba(184, 220, 217, 0.6) 50%,
        rgba(199, 184, 232, 0.4) 75%,
        transparent 100%);
      overflow: visible;
    }
    .aurora-divider::before {
      content: ""; position: absolute;
      top: -2px; left: 50%; transform: translateX(-50%);
      width: 5px; height: 5px; border-radius: 50%;
      background: #fff;
      box-shadow:
        0 0 12px rgba(199, 184, 232, 0.9),
        0 0 24px rgba(184, 220, 217, 0.6);
    }

    /* ---------- (1) Film Grain Overlay — アナログ高級感 ---------- */
    .film-grain {
      position: fixed; inset: 0;
      pointer-events: none;
      z-index: 999;
      mix-blend-mode: overlay;
      opacity: 0.18;
    }
    /* SVG フラクタルノイズで純粋CSSグレイン(画像不要) */
    .film-grain::before {
      content: "";
      position: absolute; inset: -50%;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
      animation: grainShift 6s steps(8) infinite;
    }
    @keyframes grainShift {
      0%   { transform: translate(0, 0); }
      10%  { transform: translate(-3%, -2%); }
      20%  { transform: translate(2%, 3%); }
      30%  { transform: translate(-2%, 4%); }
      40%  { transform: translate(3%, -3%); }
      50%  { transform: translate(-3%, 2%); }
      60%  { transform: translate(2%, -2%); }
      70%  { transform: translate(-3%, 3%); }
      80%  { transform: translate(3%, 1%); }
      90%  { transform: translate(-1%, -3%); }
      100% { transform: translate(0, 0); }
    }
    @media (prefers-reduced-motion: reduce) {
      .film-grain::before { animation: none; }
    }

    /* ---------- (2) 3D Card Tilt — メンバーカード雑誌表紙効果 ---------- */
    .members-grid { perspective: 1400px; }
    .member-card {
      transform-style: preserve-3d;
      will-change: transform;
      transition: transform var(--d-base) var(--ease), box-shadow var(--d-base) var(--ease);
    }
    .member-card.tilt-active {
      transition: transform 80ms ease-out, box-shadow var(--d-base) var(--ease);
    }
    /* 立ち絵の前面浮き効果(parent の rotate に従って Z 軸でわずかに前へ) */
    .member-card .member-visual { transform: translateZ(28px); transform-style: preserve-3d; }
    .member-card .member-card-bignum { transform: translateZ(8px); }
    .member-card .member-body { transform: translateZ(14px); }

    /* ---------- (3) Scroll-Driven Animation — Hero ロゴは消さず縮むだけ ---------- */
    @supports (animation-timeline: scroll()) {
      .hero-emblem-inner {
        animation: heroShrink linear both;
        animation-timeline: scroll(root);
        animation-range: 0vh 80vh;
      }
      .hero-wordmark {
        animation: heroFade linear both;
        animation-timeline: scroll(root);
        animation-range: 0vh 60vh;
      }
      @keyframes heroShrink {
        /* スクロール量に応じてわずかに縮むだけ。透明にはしない */
        0%   { transform: scale(1)    translateY(0);   opacity: 1; }
        100% { transform: scale(0.82) translateY(-24px); opacity: 1; }
      }
      @keyframes heroFade {
        /* 文字間隔だけ広がる。透明にはしない(消えない) */
        0%   { letter-spacing: 0.25em; opacity: 1; }
        100% { letter-spacing: 0.4em;  opacity: 1; }
      }
    }


    /* ---------- (5) Mix-blend-mode Hero Wordmark ---------- */
    .hero-wordmark {
      mix-blend-mode: difference;
      color: rgba(255, 255, 255, 0.92);
    }
    /* 保険:差分混合非対応ブラウザは標準色 */
    @supports not (mix-blend-mode: difference) {
      .hero-wordmark { mix-blend-mode: normal; color: var(--c-navy-dark); }
    }

    /* ---------- (6) Bento Grid — Activities セクション ---------- */
    .bento-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      grid-auto-rows: minmax(120px, auto);   /* v5.10:140→120 で縦圧縮 */
      gap: var(--s-2);                        /* v5.10:24→16 でセル間圧縮 */
      max-width: 1200px;
      margin: var(--s-4) auto 0;              /* v5.10:64→32 で上余白圧縮 */
    }
    .bento-cell {
      padding: var(--s-4);
      background: rgba(255, 255, 255, 0.55);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid var(--c-glass-border);
      border-radius: 2px;
      display: flex; flex-direction: column; justify-content: space-between;
      position: relative;
      overflow: hidden;
      transition: transform var(--d-base) var(--ease), box-shadow var(--d-base) var(--ease);
    }
    .bento-cell:hover {
      transform: translateY(-4px);
      box-shadow: 0 24px 64px rgba(11, 14, 38, 0.08);
    }
    /* Bento のサイズバリアント */
    .bento-cell.size-lg { grid-column: span 4; grid-row: span 2; }
    .bento-cell.size-md { grid-column: span 3; }
    .bento-cell.size-sm { grid-column: span 2; }
    .bento-cell.size-tall { grid-column: span 2; grid-row: span 2; }
    .bento-cell.size-wide { grid-column: span 6; }
    /* v5.11:6セル並び替え(FB #22)用の新サイズ。1行で 4 cols 占有 */
    .bento-cell.size-4col { grid-column: span 4; grid-row: span 1; }
    /* v5.13(FB #8):共通衣装タイトルを上揃えに(他セルとの上端ラインを揃える) */
    .bento-cell--top-align { justify-content: flex-start; gap: var(--s-2); }
    /* 装飾:Bento 大セルにオーロラ */
    .bento-cell.size-lg::before {
      content: "";
      position: absolute; inset: 0;
      background: radial-gradient(ellipse 80% 60% at 100% 0%, rgba(199,184,232,0.20), transparent 65%);
      pointer-events: none;
    }
    .bento-cell.size-tall::before {
      content: "";
      position: absolute; inset: 0;
      background: radial-gradient(ellipse 100% 60% at 0% 100%, rgba(184,220,217,0.20), transparent 65%);
      pointer-events: none;
    }
    .bento-cell > * { position: relative; z-index: 1; }
    .bento-eyebrow {
      font-family: var(--f-caption);
      font-size: 0.66rem; letter-spacing: 0.28em; text-transform: uppercase;
      color: var(--c-navy-soft);
    }
    .bento-num {
      font-family: var(--f-number); font-style: italic;
      font-size: 2.6rem; line-height: 1;
      color: var(--c-navy-main);
      opacity: 0.45;
    }
    .bento-title {
      font-family: var(--f-serif-jp); font-weight: 500;
      font-size: 1.15rem;
      color: var(--c-navy-dark);
      letter-spacing: 0.08em;
      margin-top: var(--s-2);
    }
    .bento-cell.size-lg .bento-title { font-size: 1.6rem; line-height: 1.5; }
    .bento-desc {
      font-family: var(--f-serif-jp); font-size: 0.88rem;
      color: var(--c-navy-main); line-height: 2;
      margin-top: var(--s-2);
    }
    @media (max-width: 1023px) {
      .bento-grid { grid-template-columns: repeat(4, 1fr); }
      .bento-cell.size-lg { grid-column: span 4; grid-row: span 1; }
      .bento-cell.size-md { grid-column: span 2; }
      .bento-cell.size-sm { grid-column: span 2; }
      .bento-cell.size-tall { grid-column: span 2; grid-row: span 1; }
      .bento-cell.size-wide { grid-column: span 4; }
      .bento-cell.size-4col { grid-column: span 2; grid-row: span 1; }  /* v5.11 タブレット時:2 cols に */
    }
    @media (max-width: 639px) {
      .bento-grid { grid-template-columns: 1fr; gap: var(--s-2); }
      .bento-cell { grid-column: span 1 !important; grid-row: span 1 !important; }
    }

    /* ---------- (7) Magnetic Cursor — Primary CTAs ---------- */
    .btn-magnetic {
      position: relative;
      display: inline-block;
      will-change: transform;
      transition: transform 220ms var(--ease);
    }
    /* マウスフォロー効果は JS で transform を設定。CSS はトランジションだけ */

    /* ---------- (8) View Transitions API ---------- */
    @supports (view-transition-name: foo) {
      ::view-transition-old(root),
      ::view-transition-new(root) {
        animation-duration: 600ms;
        animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
      }
      ::view-transition-old(root) {
        animation-name: vtFadeOut;
      }
      ::view-transition-new(root) {
        animation-name: vtFadeIn;
      }
      @keyframes vtFadeOut {
        to { opacity: 0; filter: blur(4px); transform: scale(0.98); }
      }
      @keyframes vtFadeIn {
        from { opacity: 0; filter: blur(4px); transform: scale(1.02); }
      }
    }

/* ===== v5.17 Header(リファ準拠:星マーク + 細身英字ナビ)===== */
  .logo-wordmark { display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--f-display); font-weight: 600; font-size: 1.02rem;
    letter-spacing: 0.34em; color: var(--c-navy-dark); }
  .logo-wordmark sup { display: none; }
  .logo-mark { width: 26px; height: 26px; color: var(--logo-purple, #5b3a8e); flex: 0 0 auto; }
  .nav-sep { display: none !important; }
  .nav a { font-family: var(--f-caption); font-size: 0.8rem; font-weight: 500;
    letter-spacing: 0.12em; color: var(--c-navy-main); }
  .nav a.is-active { text-decoration: none; }
  .header-credit { display: none !important; }

  /* ===== v5.17 FV(5 パネル・ライバーショーケース)===== */
  .hero--fv {
    position: relative;
    min-height: 100svh;
    display: flex; flex-direction: column; justify-content: flex-start;
    padding: 0 0 0;
    overflow: hidden;
    background: url("../top/top-bg-herobg.png") center center / cover no-repeat, #F5F1FF;
  }
  .fv-meta {
    position: absolute; top: calc(54px + clamp(22px, 3.2vh, 34px)); z-index: 6;
    font-family: var(--f-caption); font-size: 0.78rem; letter-spacing: 0.1em;
    color: var(--c-navy-main); line-height: 1.7;
    opacity: 0;
    transition: opacity .72s cubic-bezier(.19,1,.22,1), transform .72s cubic-bezier(.19,1,.22,1);
  }
  .fv-meta--l { left: clamp(20px, 3.5vw, 56px); text-align: left; transform: translateX(-34px);}
  .fv-meta--r { right: clamp(20px, 3.5vw, 56px); text-align: right; transform: translateX(34px); }
  .fv-scroll--l {
    position: absolute; left: clamp(18px, 3vw, 48px); bottom: 14%;
    top: 18%;
    z-index: 6;
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    font-family: var(--f-caption); font-size: 0.72rem; letter-spacing: 0.22em;
    color: var(--c-navy-main);
    opacity: 0;
    transform: translateX(-34px);
    transition: opacity .72s cubic-bezier(.19,1,.22,1), transform .72s cubic-bezier(.19,1,.22,1);
  }
  .fv-scroll--l span { writing-mode: vertical-rl; }
  .fv-scroll--l::before { content: ""; width: 1px; flex: 1; background: var(--c-navy-main); opacity: 0.5; }
  .fv-scroll--l::after { content: ""; width: 1px; height: 34px; background: var(--c-navy-main); opacity: 0.5; }

  .fv-scroll--r {
    position: absolute; right: clamp(18px, 3vw, 48px); bottom: 14%;
    top: 18%;
    z-index: 6;
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    font-family: var(--f-caption); font-size: 0.72rem; letter-spacing: 0.22em;
    color: var(--c-navy-main);
    opacity: 0;
    transform: translateX(34px);
    transition: opacity .72s cubic-bezier(.19,1,.22,1), transform .72s cubic-bezier(.19,1,.22,1);
  }
  .fv-scroll--r::before { content: ""; width: 1px; flex: 1; background: var(--c-navy-main); opacity: 0.5; }

  .fv-inner {
    position: relative;
    max-width: 1920px;
    margin: 0 auto;
    width: 100%;
    flex: 1;
  }
  .fv-stage {
    position: relative;
    width: min(80.6vw, 1548px);
    margin: 0 auto;
    padding-top: 125px;
    container-type: inline-size;
    z-index: 3;
  }
  .fv-panels {
    width: 100%;
    margin: 0;
    padding-top: 0;
    display: grid; grid-template-columns: repeat(5, 1fr);
    gap: clamp(8px, 1vw, 14px);
    position: relative; z-index: 3;
  }
  .fv-panel {
    position: relative; display: block; overflow: hidden;
    aspect-ratio: 591 / 1521;
    clip-path: polygon(18px 0, 100% 0, 100% 100%, 0 100%, 0 18px);
    -webkit-clip-path: polygon(18px 0, 100% 0, 100% 100%, 0 100%, 0 18px);
    background: color-mix(in srgb, var(--mc) 34%, #fff);
    transition: transform .5s cubic-bezier(.19,1,.22,1), filter .5s cubic-bezier(.19,1,.22,1);
  }
  .fv-panel::before,
  .fv-panel::after {
    content: "";
    position: absolute;
    pointer-events: none;
  }
  .fv-panel::after {
    inset: -1px;
    z-index: 5;
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--mc) 42%, #fff) 0%, color-mix(in srgb, var(--mc) 64%, #fff) 46%, color-mix(in srgb, var(--mc2, var(--mc)) 76%, #fff) 100%);
    transform: translateY(0);
    transition: transform .95s cubic-bezier(.77,0,.175,1);
  }
  .fv-panel::before {
    left: 50%;
    bottom: 8%;
    z-index: 6;
    width: clamp(56px, 6.2vw, 118px);
    aspect-ratio: 1;
    background: url("../stellar-star-mono.png") center / contain no-repeat;
    opacity: 0;
    filter: drop-shadow(0 0 12px rgba(255,255,255,.58));
    transform: translate(-50%, 42px) scale(.76) rotate(-10deg);
  }
  .hero--fv.is-fv-ready .fv-panel::after {
    transform: translateY(-104%);
  }
  .hero--fv.is-fv-ready .fv-panel::before {
    animation: fvPanelStarRise 1.18s cubic-bezier(.19,1,.22,1) both;
  }
  .hero--fv.is-fv-ready .fv-panel:nth-child(1)::after,
  .hero--fv.is-fv-ready .fv-panel:nth-child(1)::before { transition-delay: .12s; animation-delay: .2s; }
  .hero--fv.is-fv-ready .fv-panel:nth-child(2)::after,
  .hero--fv.is-fv-ready .fv-panel:nth-child(2)::before { transition-delay: .2s; animation-delay: .28s; }
  .hero--fv.is-fv-ready .fv-panel:nth-child(3)::after,
  .hero--fv.is-fv-ready .fv-panel:nth-child(3)::before { transition-delay: .28s; animation-delay: .36s; }
  .hero--fv.is-fv-ready .fv-panel:nth-child(4)::after,
  .hero--fv.is-fv-ready .fv-panel:nth-child(4)::before { transition-delay: .36s; animation-delay: .44s; }
  .hero--fv.is-fv-ready .fv-panel:nth-child(5)::after,
  .hero--fv.is-fv-ready .fv-panel:nth-child(5)::before { transition-delay: .44s; animation-delay: .52s; }
  .hero--fv.is-fv-ready .fv-meta,
  .hero--fv.is-fv-ready .fv-scroll--l,
  .hero--fv.is-fv-ready .fv-scroll--r {
    opacity: 1;
    transform: translateX(0);
    transition-delay: .36s;
  }
  @keyframes fvPanelStarRise {
    0% {
      opacity: 0;
      transform: translate(-50%, 58px) scale(.68) rotate(-12deg);
    }
    24% {
      opacity: .48;
    }
    62% {
      opacity: .22;
    }
    100% {
      opacity: 0;
      transform: translate(-50%, calc(-38cqw)) scale(1.04) rotate(12deg);
    }
  }
  @supports not (background: color-mix(in srgb, red, blue)) {
    .fv-panel { background: linear-gradient(172deg, var(--mc), #fff); }
  }
  .fv-panel:hover { transform: translateY(-6px); filter: brightness(1.04); }
  .fv-panel:focus-visible { outline: 3px solid var(--c-navy-dark); outline-offset: 3px; }
  /* 背景に薄く巨大な顔(同画像の拡大・リファの watermark 表現) */
  .fv-panel__ghost {
    position: absolute; inset: 0;
    width: 100%; height: 100%; max-width: none;
    object-fit: cover;
    opacity: 1;
    pointer-events: none;
    z-index: 0;
  }
  .fv-panel__art {
    position: absolute; inset: 0;
    width: 100%; height: 100%; max-width: none;
    object-fit: cover;
    filter: drop-shadow(0 10px 20px rgba(11,14,38,0.14));
    pointer-events: none;
    user-select: none;
    transition: transform .6s cubic-bezier(.19,1,.22,1), filter .6s cubic-bezier(.19,1,.22,1);
    z-index: 1;
  }
  .fv-panel:hover .fv-panel__art { transform: scale(1.025); filter: drop-shadow(0 14px 24px rgba(11,14,38,0.18)); }
  .fv-catch {
    position: absolute; left: clamp(42px, 5.2cqw, 84px); bottom: clamp(42px, 8cqw, 116px);
    z-index: 5;
    display: flex; flex-direction: column; align-items: flex-start; gap: clamp(8px, 1.1cqw, 14px);
    pointer-events: none;
  }
  .fv-catch__jp, .fv-catch__en {
    display: inline-block;
    background: rgba(255,255,255,0.92);
    /* clip-path: polygon(0 0, 100% 0, calc(100% - 24px) 100%, 0 100%);
    -webkit-clip-path: polygon(0 0, 100% 0, calc(100% - 24px) 100%, 0 100%); */
    position: relative;
    overflow: hidden;
  }
  .fv-catch__jp {
    font-family: var(--f-body); font-weight: 100;
    font-size: clamp(28px, 3.6vw, 72px);
    font-size: clamp(28px, 4.4cqw, 72px);
    letter-spacing: 0.14em; line-height: 1.2;
    color: var(--c-navy-dark);
    padding: 0px 0px 0px 5px;
     margin: 0;
  }
  .fv-catch__en {
    font-family: var(--f-body); font-weight: 400;
    font-size: clamp(13px, 1.4vw, 52px);
    font-size: clamp(13px, 1.45cqw, 28px);
    letter-spacing: 0.14em;
    color: var(--c-navy-main);
    padding: 0px 0px 0px 5px;
  }
  /* ===== fv-catch カバースライドリビール ===== */
  .fv-catch__jp::before,
  .fv-catch__en::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #C7B8E8 0%, #E9C7D8 100%);
    z-index: 1;
    animation: fvCoverOut 0.75s cubic-bezier(0.77, 0, 0.175, 1) both;
  }
  .fv-catch__jp::before { animation-delay: 0.35s; }
  .fv-catch__en::before { animation-delay: 0.35s; }
  @keyframes fvCoverOut {
    from { transform: translateX(0); }
    to   { transform: translateX(102%); }
  }
  @media (prefers-reduced-motion: reduce) {
    .fv-catch__jp::before, .fv-catch__en::before,
    .fv-panel::before, .fv-panel::after { display: none; }
    .fv-meta, .fv-scroll--l, .fv-scroll--r {
      opacity: 1;
      transform: none;
      transition: none;
    }
  }

  .fv-band {
    width: 100%; overflow: hidden;
    margin-top: auto;
    padding: 0 0 2px;
    position: relative; z-index: 4;
    contain: layout paint;
    isolation: isolate;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }
  .fv-band__track {
    display: flex; align-items: center; width: max-content;
    animation: fvBand 56s linear infinite;
    will-change: transform;
    transform: translate3d(0,0,0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }
  .fv-band__track img {
    height: clamp(48px, 5.4vw, 88px);
    width: auto;
    display: block;
    margin-right: 27px;
    user-select: none;
    pointer-events: none;
    flex-shrink: 0;
  }
  @keyframes fvBand { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
  @media (prefers-reduced-motion: reduce) { .fv-band__track { animation: none; } }

  /* FV performance stabilization: keep legacy decorative layers from repainting over the moving STELLAR band. */
  .aurora-blob {
    animation: none !important;
    will-change: auto;
  }
  .film-grain {
    display: none;
  }
  /* v5.19(FB#3):モバイル FV はスワイプをやめ「全体が縮小」— 5人全員が常に見える */
  @media (max-width: 1023px) {
    .hero--fv {
      min-height: 0;
      padding-top: calc(56px + clamp(18px, 5vw, 36px));
      padding-bottom: clamp(86px, 20vw, 112px);
    }
    .fv-inner {
      position: static;
      flex: 0 0 auto;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      gap: clamp(18px, 5vw, 32px);
    }
    .fv-meta, .fv-scroll--r  { display: none; }
    .fv-scroll--l {
      left: 50%;
      right: auto;
      top: auto;
      bottom: 16px;
      height: 72px;
      min-height: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 7px;
      padding: 0;
      color: var(--c-navy-main);
      text-shadow: 0 0 14px rgba(255,255,255,.9);
      filter: drop-shadow(0 10px 18px rgba(26,31,74,.14));
      transform: translate(-50%, 12px);
    }
    .fv-scroll--l::before,
    .fv-scroll--l::after,
    .fv-scroll--l span::after {
      content: "";
      display: block;
    }
    .hero--fv.is-fv-ready .fv-scroll--l {
      transform: translate(-50%, 0);
    }
    .fv-scroll--l span {
      order: 1;
      writing-mode: horizontal-tb;
      font-size: 9px;
      line-height: 1;
      letter-spacing: .22em;
    }
    .fv-scroll--l::before {
      order: 2;
      width: 1px;
      height: 34px;
      flex: 0 0 34px;
      background: linear-gradient(180deg, rgba(26,31,74,.12), var(--c-navy-main), rgba(26,31,74,.12));
      background-size: 100% 260%;
      box-shadow: 0 0 12px rgba(26,31,74,.25);
      animation: fvScrollFlow 1.35s ease-in-out infinite;
    }
    .fv-scroll--l::after {
      order: 3;
      width: 10px;
      height: 10px;
      border-right: 1px solid currentColor;
      border-bottom: 1px solid currentColor;
      background: transparent;
      transform: rotate(45deg);
      animation: fvScrollChevronMobile 1.35s ease-in-out infinite;
    }
    .fv-scroll--l span::after {
      content: none !important;
      display: none !important;
      animation: none !important;
    }
    .fv-scroll--r::after { content: none !important; display: none !important; }
    .fv-stage {
      width: calc(100% - 24px);
      padding-top: 0;
    }
    .fv-panels {
      display: grid; grid-template-columns: repeat(5, 1fr);
      width: 100%; max-height: none; height: auto;
      gap: 5px; padding: 0;
    }
    .fv-panel {
      aspect-ratio: 414 / 1521;
      clip-path: polygon(7px 0, 100% 0, 100% 100%, 0 100%, 0 7px);
      -webkit-clip-path: polygon(7px 0, 100% 0, 100% 100%, 0 100%, 0 7px);
    }
    .fv-catch {
      position: relative;
      left: auto;
      bottom: auto;
      width: calc(100% - 36px);
      margin: 0 auto;
      gap: 8px;
    }
    .fv-catch__jp { font-size: clamp(20px, 5.8vw, 32px); padding: 9px 30px 9px 14px; }
    .fv-catch__en { font-size: 10.5px; padding: 6px 22px 6px 14px; }
    .fv-band__track img { height: clamp(40px, 10vw, 60px); margin-right: 20px; }
  }
  /* ===== v5.17 News ===== */
  .news-item--tba { opacity: 0.75; }
  .news-item--tba .news-tba {
    font-family: var(--f-serif-jp); font-size: 0.95rem; letter-spacing: 0.06em;
    color: var(--c-navy-soft);
  }

/* ===== v5.17.4:Recruitment を「夜空の扉」に反転(FB #3)=====
     全編パステルの中で唯一のディープネイビー帯 = 別ページ導線の差別化。
     hairline 区切りは廃止し、色の反転そのものを区切りにする */
  .recruitment-section {
    background:
      radial-gradient(circle at 16% 18%, rgba(199,184,232,0.20) 0%, transparent 46%),
      radial-gradient(circle at 86% 82%, rgba(79,167,164,0.18) 0%, transparent 46%),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 420'%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='37' cy='61' r='1.2' opacity='.55'/%3E%3Ccircle cx='118' cy='23' r='.7' opacity='.3'/%3E%3Ccircle cx='201' cy='94' r='.9' opacity='.4'/%3E%3Ccircle cx='304' cy='41' r='1.4' opacity='.6'/%3E%3Ccircle cx='389' cy='128' r='.6' opacity='.28'/%3E%3Ccircle cx='73' cy='176' r='.8' opacity='.35'/%3E%3Ccircle cx='256' cy='203' r='1.1' opacity='.5'/%3E%3Ccircle cx='341' cy='262' r='.7' opacity='.3'/%3E%3Ccircle cx='29' cy='299' r='1' opacity='.45'/%3E%3Ccircle cx='154' cy='337' r='.6' opacity='.26'/%3E%3Ccircle cx='228' cy='389' r='1.3' opacity='.55'/%3E%3Ccircle cx='393' cy='371' r='.8' opacity='.35'/%3E%3Ccircle cx='102' cy='258' r='.5' opacity='.22'/%3E%3Ccircle cx='322' cy='173' r='.5' opacity='.24'/%3E%3Cpath opacity='.5' d='M177 142 C177.35 145.5 177.35 145.5 180.5 145.85 C177.35 146.2 177.35 146.2 177 149.7 C176.65 146.2 176.65 146.2 173.5 145.85 C176.65 145.5 176.65 145.5 177 142Z'/%3E%3Cpath opacity='.35' d='M58 388 C58.2 390.4 58.2 390.4 60.4 390.6 C58.2 390.8 58.2 390.8 58 393.2 C57.8 390.8 57.8 390.8 55.6 390.6 C57.8 390.4 57.8 390.4 58 388Z'/%3E%3C/g%3E%3C/svg%3E") repeat,
      linear-gradient(168deg, #161A3E 0%, #1A1F4A 55%, #222A56 100%);
    background-size: auto, auto, 420px 420px, auto;
  }
  .recruitment-section::before, .recruitment-section::after { display: none; }
  /* v5.17.6(FB #3):上余白を圧縮 */
  .recruitment-section { padding: 80px 0 var(--s-12); }
  /* v5.17.6(FB #1):CTA を和文に — 書体を本文フォントへ */
  .recruitment-cta-btn { font-family: var(--f-body); font-weight: 500; letter-spacing: 0.1em; text-transform: none; font-size: 1.08rem; }
  /* v5.17.8(FB #2):「約600名」「約60名」「5名」を途中で折り返さない */
  .recruitment-copy strong { white-space: nowrap; }
  /* ===== 一等星×5(v5.17.8)===== */
  .recruit-stars { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
  .r-star { position: absolute; display: block; }
  .r-star svg { width: 100%; height: 100%; display: block; }
  /* 中心のにじみ(グロウ)— blur 不使用の radial で軽量 */
  .r-star::before {
    content: ""; position: absolute; inset: -65%;
    background: radial-gradient(circle, rgba(255,255,255,0.55) 0%, rgba(199,184,232,0.25) 32%, transparent 62%);
    border-radius: 50%;
  }
  .r-star { animation: rStar ease-in-out infinite; }
  @keyframes rStar {
    0%, 100% { opacity: 0.65; transform: scale(0.92); }
    50%      { opacity: 1;    transform: scale(1.04); }
  }
  /* v5.20.2(FB#2):文字と被らないよう、中央のコンテンツ域(1180px)を避けて外周に配置 */
  .r-star.r1 { width: 30px; height: 30px; top: 10%;  left: 4.5%; animation-duration: 5.2s; }
  .r-star.r2 { width: 20px; height: 20px; top: 80%;  left: 3.5%; animation-duration: 6.8s; animation-delay: -2.1s; }
  .r-star.r3 { width: 34px; height: 34px; top: 7%;   left: 60%;  animation-duration: 5.9s; animation-delay: -3.4s; }
  .r-star.r4 { width: 18px; height: 18px; top: 87%;  left: 88%;  animation-duration: 7.4s; animation-delay: -1.2s; }
  .r-star.r5 { width: 26px; height: 26px; top: 32%;  left: 94%;  animation-duration: 6.2s; animation-delay: -4.6s; }
  /* 画面が狭いと外周が本文に接近するため非表示 */
  @media (max-width: 1100px) { .recruit-stars { display: none; } }
  @media (prefers-reduced-motion: reduce) { .r-star { animation: none; opacity: 0.85; } }
  .recruitment-eyebrow { color: rgba(255,255,255,0.68); }
  .recruitment-eyebrow::before { color: #C7B8E8; }
  .recruitment-heading-en { color: #fff; }
  .recruitment-heading-jp { color: rgba(255,255,255,0.9); }
  .recruitment-copy { color: rgba(255,255,255,0.78); }
  .recruitment-copy strong { color: #fff; }
  .recruitment-cta-btn {
    background: #fff; color: var(--c-navy-dark); border-color: transparent;
    box-shadow: 0 12px 34px rgba(0,0,0,0.3);
  }
  .recruitment-cta-btn:hover {
    background: #fff; color: var(--c-navy-dark);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.45), 0 16px 44px rgba(199,184,232,0.4);
    transform: translateY(-2px);
  }

html, body { overflow-x: hidden; }
  /* ===== v5.19:スマホ崩れ修正(太田FB)===== */
  .recruitment-copy + .recruitment-copy { margin-top: 1.1em; }
  /* Journey の flex 化(≤1023px)と同じ範囲で align-self の化けを打ち消す(タブレット帯も含む) */
  @media (max-width: 1023px) {
    .journey-funnel .journey-step > * { align-self: center !important; }
    .journey-funnel .journey-step { text-align: center; }
    .journey-funnel .journey-step .journey-desc { text-align: center; }
  }
  .br-sp { display: none; }   /* SP 専用改行(media 内で解放) */
  /* About:旧FVのSTELLARマークを見出し間に(さみしさ対策) */
  /* 旧FVエンブレムの「ちょい小さい」サイズ感(旧 440px → 320px 基準) */
  .about-emblem { display: block; width: clamp(180px, 24vw, 320px); height: auto; margin: 64px auto 0; opacity: 0.96; }   /* v5.20.3:上64px / 下は詰める */
  @media (max-width: 767px) { .about-emblem { width: 160px; } }
  /* #6:Journey の大数字(5 等)が斜体で見切れる → 余白を確保 */
  .journey-number { display: inline-block; padding: 0.02em 0.14em; line-height: 1.08; }   /* v5.20.3:伊体の食み出し保険を強化 */
  /* #10:News 見出し下の余白を拡大 */
  .news-section .heading-en { margin-bottom: var(--s-6); }
  @media (max-width: 767px) {
    /* #7:サブタイトル(和文見出し)を一段小さく */
    .heading-jp { font-size: clamp(1.15rem, 4.6vw, 1.5rem); }
    /* #9 + 第2弾#1-3:STEP を flex 化して完全中央揃え(subgrid の揃え指定を無効化) */
    .journey-funnel .journey-step {
      display: flex; flex-direction: column; align-items: center;
      text-align: center; grid-row: auto;
    }
    /* subgrid 用の縦揃え(start/end)が flex では横揃えに化けるため全打ち消し(スクショの中心ズレの正体) */
    .journey-funnel .journey-step > * { align-self: center !important; }
    .journey-funnel .journey-step .journey-desc { text-align: center; }
    /* #8:Only for STELLAR(Bento)の背景が白く沈む → PC と同じ淡トーンを明示 */
    #intro-incentive {
      background: linear-gradient(180deg, rgba(199,184,232,0.14) 0%, rgba(184,220,217,0.12) 100%);
      border-radius: 20px;
      padding-top: var(--s-4); padding-bottom: var(--s-4);
    }
    /* #3(第3弾):The First Six Months を1行に収める */
    .term-gen-label { white-space: nowrap; font-size: 0.76rem; letter-spacing: 0.16em; }
    /* #3(第4弾):term-note は nowrap 4行構成。確実に収まるよう微縮小 */
    .term-note { font-size: 0.86rem; line-height: 2; }
    /* #5(第2弾):ニュース行をスマホで2段組みに(全然収まらない問題) */
    .news-item { grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 4px 14px; padding: 14px 6px; }
    .news-date { grid-column: 1; grid-row: 1; font-size: 0.78rem; }
    .news-cat  { grid-column: 2; grid-row: 1; justify-self: start; }
    .news-title { grid-column: 1 / -1; grid-row: 2; font-size: 0.95rem; line-height: 1.7; }
    .news-arrow { display: none; }
    /* #6(第2弾):Recruitment 本文の行間を確保 */
    .recruitment-copy { line-height: 2.05; }
    /* #4/#9:Recruitment 本文 — 指定の改行(br-sp)でセンター揃え */
    .recruitment-copy { font-size: 0.95rem; text-align: center; }
    .recruitment-copy strong { white-space: normal; }
    .br-pc { display: none; }
    .br-sp { display: inline; }
  }

:root{ --oval-cream:#EFEAF4; --oval-cream-hover:#E4DCEF; --stellar-line:#5b3a8e; --en-color:#9C93B8;
    /* ==== スポットライト調整ノブ(v5.17.3)ここだけ触れば OK ==== */
    --spot-dim: 1;             /* 非中央の明るさ(1=等倍 / 下げるほど暗い) */
    --spot-desat: 1;           /* 非中央の彩度(1=等倍 / 下げるほど色あせ) */
    --spot-bright: 1.07;       /* 中央の明るさ(上げるほど照らされる) */
    --spot-beam: 0.34;         /* 中央の「上からの光」の濃さ(0で無効)— 白飛び対策で減光 */
    --spot-glow: 46px;         /* 中央グロウの広がり */
  }
  .member_slide{ margin-top:48px; }
  .member_slide .heading-jp{font-size:clamp(1rem,2.2vw,1.35rem);}
  /* v5.20.1(FB):表示幅を5名分以下に制限+端をフェード — 同じライバーが二度見えない */
  .member_slide__viewport{overflow:hidden;padding:92px 0 8px;touch-action:pan-y;max-width:1920px;margin:0 auto;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);}
  .member_slide__track{display:flex;gap:44px;position:relative;will-change:transform;align-items:flex-start;}
  .member_slide__item{flex:0 0 clamp(175px,15vw,230px);position:relative;text-decoration:none;color:inherit;}
  /* 円形ポートレート(v5.16.19:楕円→正円。惑星リングが綺麗に回るため)*/
  .member_slide__item .thumb-wrap{display:block;position:relative;width:100%;aspect-ratio:1/1;transform:scale(.9);
    filter:brightness(var(--spot-dim)) saturate(var(--spot-desat));
    transition:transform .65s cubic-bezier(.19,1,.22,1), filter .6s cubic-bezier(.19,1,.22,1);}
  .member_slide__item.is-center .thumb-wrap{transform:scale(1.06);filter:brightness(var(--spot-bright)) saturate(1.02);}
  /* カーソルを当てた子も「照らす」(中央ほどではない) */
  .member_slide__item:hover .thumb-wrap{filter:brightness(1) saturate(1);}
  .member_slide__item.is-center:hover .thumb-wrap{filter:brightness(var(--spot-bright)) saturate(1.02);}
  .member_slide__item:hover .name_en,.member_slide__item:hover .name_jp{opacity:1;}
  .member_slide__item .name_en,.member_slide__item .name_jp{transition:opacity .45s cubic-bezier(.19,1,.22,1);opacity:.5;}
  .member_slide__item.is-center .name_en,.member_slide__item.is-center .name_jp{opacity:1;}
  /* 中央の子をハイライト:member 色のソフトグロウ */
  .member_slide__item .thumb{transition:box-shadow .6s cubic-bezier(.19,1,.22,1);}
  .member_slide__item.is-center .thumb{box-shadow:0 14px 34px rgba(26,31,74,.14),0 0 var(--spot-glow) color-mix(in srgb,var(--mc) 62%,transparent);}
  @supports not (background:color-mix(in srgb,red,blue)){ .member_slide__item.is-center .thumb{box-shadow:0 14px 34px rgba(26,31,74,.2);} }
  /* 中央の子:上からの光(スポットライトの当たり) */
  /* v5.20.4:光は全方向で透明に収束(縁の硬い切り替わりを根絶)。上方=文字側へも自然に溶ける */
  .member_slide__item .thumb-beam{position:absolute;left:50%;top:-58%;transform:translateX(-50%);
    width:170%;height:135%;border-radius:50%;
    background:radial-gradient(ellipse at 50% 50%, rgba(255,255,255,.72) 0%, rgba(255,255,255,0) 58%);
    filter:blur(10px);opacity:0;pointer-events:none;z-index:3;
    transition:opacity .7s cubic-bezier(.19,1,.22,1);}
  .member_slide__item.is-center .thumb-beam{opacity:var(--spot-beam);}
  /* 中央の子だけ星がきらめく */
  .member_slide__item .thumb-sparkles{position:absolute;inset:-18px;pointer-events:none;opacity:0;transition:opacity .5s cubic-bezier(.19,1,.22,1);}
  .member_slide__item.is-center .thumb-sparkles{opacity:1;}
  .member_slide__item .thumb-sparkles svg{position:absolute;color:color-mix(in srgb,var(--mc) 72%,#5b3a8e);filter:drop-shadow(0 0 5px color-mix(in srgb,var(--mc) 80%,transparent));animation:msTwinkle 2.3s ease-in-out infinite;}
  @supports not (color:color-mix(in srgb,red,blue)){ .member_slide__item .thumb-sparkles svg{color:#8E7DB8;} }
  .member_slide__item .thumb-sparkles .sp1{width:18px;height:18px;top:-4px;right:8%;}
  .member_slide__item .thumb-sparkles .sp2{width:11px;height:11px;left:-6px;top:32%;animation-delay:.75s;}
  .member_slide__item .thumb-sparkles .sp3{width:14px;height:14px;bottom:6%;right:-7px;animation-delay:1.45s;}
  @keyframes msTwinkle{0%,100%{opacity:.15;transform:scale(.6) rotate(0deg);}50%{opacity:1;transform:scale(1.1) rotate(22deg);}}
  @media (prefers-reduced-motion: reduce){ .member_slide__item .thumb-sparkles svg{animation:none;opacity:.7;} }
  @supports not (aspect-ratio:1/1){ .member_slide__item .thumb-wrap{height:0;padding-bottom:100%;} }
  .member_slide__item .thumb{position:absolute;inset:0;border-radius:50%;overflow:hidden;
    /* v5.17.1:円の内側を「小さな夜空」に — 上:白ハイライト / 星屑 / 下:member色の深み */
    background:
      radial-gradient(circle at 50% 26%, rgba(255,255,255,.5) 0%, transparent 52%),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='24' cy='30' r='1.3' opacity='.75'/%3E%3Ccircle cx='88' cy='18' r='1' opacity='.6'/%3E%3Ccircle cx='66' cy='74' r='1.2' opacity='.65'/%3E%3Ccircle cx='30' cy='96' r='1' opacity='.55'/%3E%3Ccircle cx='104' cy='58' r='.9' opacity='.5'/%3E%3Cpath opacity='.7' d='M96 84 C96.3 87 96.3 87 99 87.3 C96.3 87.6 96.3 87.6 96 90.6 C95.7 87.6 95.7 87.6 93 87.3 C95.7 87 95.7 87 96 84Z'/%3E%3Cpath opacity='.55' d='M48 8 C48.25 10.4 48.25 10.4 50.4 10.6 C48.25 10.8 48.25 10.8 48 13.2 C47.75 10.8 47.75 10.8 45.6 10.6 C47.75 10.4 47.75 10.4 48 8Z'/%3E%3Cpath opacity='.5' d='M14 60 C14.2 62 14.2 62 16 62.2 C14.2 62.4 14.2 62.4 14 64.4 C13.8 62.4 13.8 62.4 12 62.2 C13.8 62 13.8 62 14 60Z'/%3E%3C/g%3E%3C/svg%3E") repeat,
      radial-gradient(circle at 50% 115%, color-mix(in srgb,var(--mc) 58%,#fff) 0%, color-mix(in srgb,var(--mc) 26%,var(--oval-cream)) 52%, var(--oval-cream) 100%);
    background-size: auto, 120px 120px, auto;
    box-shadow:0 14px 34px rgba(26,31,74,.12);transition:transform .35s cubic-bezier(0,.55,.45,1);}
  /* 内側の細いヘアラインリング(ジュエリー感) */
  .member_slide__item .thumb::after{content:"";position:absolute;inset:7px;border-radius:50%;border:1px solid rgba(255,255,255,.6);z-index:2;pointer-events:none;}
  @supports not (background:color-mix(in srgb,red,blue)){ .member_slide__item .thumb{background:var(--oval-cream);} }
  .member_slide__item .thumb img{position:absolute;left:var(--ix,50%);top:var(--iy,0%);transform:translateX(-50%);width:var(--iw,150%);max-width:none;height:auto;transform-origin:center center;transition:transform .4s cubic-bezier(0,.55,.45,1);pointer-events:none;user-select:none;}
  /* 惑星オービット:細い2重リング(外=実線/内=点線)+周回オーブ。正円なので回転してもブレない */
  .member_slide__item .thumb-orbit{position:absolute;inset:-13px;border-radius:50%;pointer-events:none;animation:ms-orbit 56s linear infinite;}
  .member_slide__item .thumb-orbit::before{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid color-mix(in srgb,var(--mc) 55%,transparent);}
  .member_slide__item .thumb-orbit::after{content:"";position:absolute;inset:7px;border-radius:50%;border:1px dotted color-mix(in srgb,var(--mc) 36%,transparent);}
  .member_slide__item .thumb-orbit i{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--mc);box-shadow:0 0 7px color-mix(in srgb,var(--mc) 80%,transparent);}
  .member_slide__item .thumb-orbit i:nth-child(1){top:-3px;left:50%;margin-left:-3px;}
  .member_slide__item .thumb-orbit i:nth-child(2){bottom:7%;right:3%;width:4px;height:4px;}
  .member_slide__item .thumb-orbit i:nth-child(3){top:20%;left:-3px;width:4px;height:4px;opacity:.7;}
  @keyframes ms-orbit{to{transform:rotate(360deg);}}
  @media (prefers-reduced-motion: reduce){ .member_slide__item .thumb-orbit{animation:none;} }
  .member_slide__item:hover .thumb{transform:scale(.97);}
  .member_slide__item:hover .thumb img{transform:translateX(-50%) scale(1.06);}
  /* ホバーでは回転に一切触れない(duration変更はカクつくため)*/
  .member_slide__item:focus-visible{outline:3px solid var(--c-navy-dark);outline-offset:8px;border-radius:24px;}
  .member_slide__item .name_en{display:block;text-align:center;margin-top:1.5rem;font-family:var(--f-caption);font-weight:500;font-size:.72rem;letter-spacing:.16em;color:var(--en-color);transition:color .5s cubic-bezier(.19,1,.22,1);}
  /* v5.20.5:センターの名前を「演出で」立たせる(拡大+字間+光のヘアライン) */
  .member_slide__item .name_jp{display:block;text-align:center;margin-top:.35rem;font-family:var(--f-serif-jp);font-weight:500;font-size:1.15rem;letter-spacing:.06em;color:var(--c-navy-dark);
    transform-origin:50% 0;
    transition:transform .55s cubic-bezier(.19,1,.22,1),letter-spacing .55s cubic-bezier(.19,1,.22,1);}
  .member_slide__item .name_jp::after{content:"";display:block;height:1px;width:62%;margin:8px auto 0;
    background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--mc) 75%,#5b3a8e),transparent);
    transform:scaleX(0);transition:transform .65s cubic-bezier(.19,1,.22,1);}
  @supports not (background:color-mix(in srgb,red,blue)){ .member_slide__item .name_jp::after{background:linear-gradient(90deg,transparent,#8E7DB8,transparent);} }
  .member_slide__item.is-center .name_jp{transform:scale(1.18);letter-spacing:.13em;font-weight:400;}
  .member_slide__item.is-center .name_jp::after{transform:scaleX(1);}
  .member_slide__item.is-center .name_en{color:color-mix(in srgb,var(--mc) 72%,#5b3a8e);}
  .member_slide__nav_wrap{display:flex;gap:2.5rem;justify-content:center;align-items:center;margin-top:2.75rem;}
  .member_slide__btn{width:5rem;aspect-ratio:80/64;border-radius:5rem;border:1px solid var(--stellar-line);background:transparent;color:var(--stellar-line);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s cubic-bezier(0,.55,.45,1);}
  .member_slide__btn:hover{background:#F5F3FC;scale:.9;}
  .member_slide__btn svg{width:36%;height:36%;}
  @media(max-width:860px){ .member_slide__track{gap:28px;} .member_slide__item{flex-basis:185px;} .member_slide__btn{width:4.2rem;} }

.hero--fv .fv-meta,
.hero--fv .fv-catch__jp,
.hero--fv .fv-catch__en,
.about-body,
.journey-stepno,
.journey-title,
.journey-desc,
.bento-eyebrow,
.bento-title,
.bento-desc,
.news-date,
.news-cat,
.news-title,
.recruitment-copy,
.recruitment-heading-jp,
.member_slide__item .name_en,
.member_slide__item .name_jp {
  font-family: var(--f-body);
}

.introduction-section .container > .heading-en,
.introduction-section .container > .heading-jp,
.introduction-section .about-lead,
.introduction-section .about-body {
  text-align: center;
}

.about-emblem {
  width: clamp(252px, 30vw, 396px);
  margin: 32px auto 28px;
}

.about-lead {
  font-family: var(--f-body);
  font-weight: 500;
}

.fv-scroll--l::before,
.fv-scroll--r::before {
  background: linear-gradient(180deg, rgba(26,31,74,0.08), var(--c-navy-main), rgba(26,31,74,0.08));
  background-size: 100% 260%;
  box-shadow: 0 0 12px rgba(26,31,74,.22);
  animation: fvScrollFlow 1.35s ease-in-out infinite;
  position: relative;
}

.fv-scroll--l::after {
  width: 14px;
  height: 14px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  background: transparent;
  opacity: 0.82;
  transform: rotate(45deg);
  animation: fvScrollChevron 1.25s ease-in-out infinite;
}

.fv-scroll--l span::after {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  margin: 12px auto 0;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 12px rgba(26,31,74,0.36);
  animation: fvScrollDot 1.25s cubic-bezier(.4,0,.2,1) infinite;
}

.fv-scroll--r::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 12px rgba(26,31,74,0.36);
  animation: fvScrollDot 1.25s cubic-bezier(.4,0,.2,1) infinite;
}

@keyframes fvScrollFlow {
  0% { background-position: 0 100%; opacity: 0.42; }
  50% { opacity: 0.95; }
  100% { background-position: 0 0; opacity: 0.42; }
}

@keyframes fvScrollChevron {
  0% { transform: translateY(-12px) rotate(45deg); opacity: 0; }
  36% { opacity: 0.9; }
  100% { transform: translateY(16px) rotate(45deg); opacity: 0; }
}

@keyframes fvScrollDot {
  0% { transform: translateY(-16px) scale(0.68); opacity: 0; }
  28% { opacity: 0.9; }
  100% { transform: translateY(26px) scale(1); opacity: 0; }
}

@keyframes fvScrollDotMobile {
  0% { transform: translate(-50%, -8px) scale(.7); opacity: 0; }
  30% { opacity: .9; }
  100% { transform: translate(-50%, 30px) scale(1); opacity: 0; }
}

@keyframes fvScrollChevronMobile {
  0% { transform: translateY(-7px) rotate(45deg); opacity: 0; }
  38% { opacity: .82; }
  100% { transform: translateY(9px) rotate(45deg); opacity: 0; }
}

.journey-step[data-n="600"] .journey-number,
.journey-step[data-n="60"] .journey-number,
.journey-step[data-n="5"] .journey-number {
  font-size: clamp(4rem, 8vw, 6rem);
}

.journey-step[data-n="star"] .journey-number {
  font-size: clamp(6rem, 14vw, 9rem);
  filter: drop-shadow(0 0 14px rgba(91, 58, 142, 0.32));
}

.journey-star-logo {
  width: 1em;
  height: 1em;
  transform: translateY(0.02em);
}

@media (min-width: 1024px) {
  .journey-step > .journey-number {
    align-self: center;
  }

  .journey-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: clamp(6rem, 14vw, 9rem);
  }

  .journey-arrow {
    align-self: center;
    transform: translateY(0);
  }
}

.member_slide__viewport {
  position: relative;
  max-width: min(100%, 1326px);
  padding-left: 24px;
  padding-right: 24px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.18) 4%, #000 12%, #000 88%, rgba(0,0,0,.18) 96%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.18) 4%, #000 12%, #000 88%, rgba(0,0,0,.18) 96%, transparent 100%);
}

.member_slide__track {
  justify-content: flex-start;
  width: max-content;
}

.member_slide__track.is-moving .member_slide__item {
  transition: opacity .22s cubic-bezier(.19,1,.22,1), filter .42s cubic-bezier(.19,1,.22,1);
}

.member_slide__item {
  transition: opacity .2s cubic-bezier(.19,1,.22,1);
}

.member_slide__item.is-edge-buffer {
  opacity: 1;
  pointer-events: none;
}

.member_slide__track.is-moving .member_slide__item.is-edge-buffer {
  opacity: 1;
}

.member_slide__item.is-center-out .thumb-wrap {
  transform: scale(.9);
  filter: brightness(1) saturate(1);
}

.member_slide__item.is-center-out .thumb {
  box-shadow: 0 10px 26px rgba(26,31,74,.12);
}

.member_slide__item.is-center-out .thumb-beam,
.member_slide__item.is-center-out .thumb-sparkles {
  opacity: 0;
}

.member_slide__item.is-center-out .name_en,
.member_slide__item.is-center-out .name_jp {
  opacity: .5;
}

.member_slide__item.is-center-out .name_en {
  color: var(--en-color);
}

.member_slide__item.is-center-out .name_jp {
  transform: scale(1);
  letter-spacing: .06em;
  /* font-weight: 500; */
}

.member_slide__item.is-center-out .name_jp::after {
  transform: scaleX(0);
}

.member_slide__item.is-center-in .thumb-wrap {
  transform: scale(1.015);
  filter: brightness(var(--spot-bright)) saturate(1.02);
}

.member_slide__item.is-center-in .thumb {
  box-shadow: 0 14px 34px rgba(26,31,74,.14), 0 0 calc(var(--spot-glow) * .72) color-mix(in srgb,var(--mc) 54%,transparent);
}

.member_slide__item.is-center-in .thumb-beam {
  opacity: calc(var(--spot-beam) * .82);
}

.member_slide__item.is-center-in .thumb-sparkles,
.member_slide__item.is-center-in .name_en,
.member_slide__item.is-center-in .name_jp {
  opacity: 1;
}

.member_slide__item .name_en,
.member_slide__item .name_jp {
  /* font-weight: 500; */
}

@media (prefers-reduced-motion: reduce) {
  .fv-scroll--l::before,
  .fv-scroll--r::before,
  .fv-scroll--l::after,
  .fv-scroll--l span::after,
  .fv-scroll--r::after {
    animation: none;
  }
}