/* ====================================================
       ROOT VARIABLES
       ==================================================== */
    :root {
      --bg:        #08080d;
      --panel:     #13131b;
      --text:      #f7f7f3;
      --muted:     #a0a0b0;
      --line:      rgba(255, 255, 255, 0.12);
      --hot:       #ff4d7d;
      --cyan:      #78efff;
      --yellow:    #ffe96b;
      --violet:    #8f72ff;
      --green:     #3dffa0;
      --orange:    #ff8c42;
      --paper:     #f1ebe2;
      --ink:       #171411;
      --ink-muted: #7a746d;
    }

    /* ====================================================
       RESET & BASE
       ==================================================== */
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      background: #030305;
      color: var(--text);
      font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Hiragino Kaku Gothic ProN",
        "Yu Gothic",
        sans-serif;
      -webkit-font-smoothing: antialiased;
    }

    button,
    a {
      font: inherit;
      cursor: pointer;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    /* ====================================================
       SHELL — 430px コンテナ
       ==================================================== */
    .shell {
      width: 100%;
      max-width: 430px;
      margin: 0 auto;
      overflow: hidden;
      background: var(--bg);
    }

    @media (min-width: 431px) {
      body {
        padding: 24px 0;
      }

      .shell {
        border-radius: 32px;
        box-shadow: 0 0 140px rgba(0, 0, 0, 0.85);
      }
    }

    /* ====================================================
       UTILITIES
       ==================================================== */
    .eyebrow {
      font-size: 10px;
      font-weight: 900;
      letter-spacing: 0.26em;
      text-transform: uppercase;
    }

    .section-title {
      font-size: 34px;
      line-height: 1.04;
      letter-spacing: -0.045em;
      margin: 10px 0 14px;
    }

    .section-lead {
      font-size: 13px;
      line-height: 1.85;
      color: rgba(255,255,255,0.82);
    }

    /* スクロール入場アニメーション */
    .reveal {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity 0.7s ease, transform 0.7s ease;
    }

    .reveal.visible {
      opacity: 1;
      transform: none;
    }

    /* ====================================================
       HEADER（ヒーロー上に絶対配置）
       ==================================================== */
    /* ====================================================
       HEADER
       ==================================================== */
    .site-header {
      position: fixed;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 100%;
      max-width: 430px;
      z-index: 1003;
      padding: 8px 18px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: rgba(7, 7, 12, 0.92);
      -webkit-
      border-bottom: 1px solid rgba(255, 255, 255, 0.07);
      transition: background 0.3s;
    }

    .brand-logo {
      height: 26px;
      width: auto;
      display: block;
      filter: drop-shadow(0 0 8px rgba(255, 77, 125, 0.35));
    }

    /* ── ハンバーガーボタン ── */
    .menu-btn {
      width: 42px;
      height: 42px;
      border-radius: 12px;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      background: linear-gradient(135deg,
        rgba(255, 77, 125, 0.22),
        rgba(143, 114, 255, 0.22));
      -webkit-
      box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.13),
        0 0 18px rgba(255,  77, 125, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);
      transition: box-shadow 0.25s;
    }

    .menu-btn:active {
      box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.20),
        0 0 30px rgba(255,  77, 125, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    }

    .burger-icon {
      display: flex;
      flex-direction: column;
      gap: 5px;
      width: 22px;
    }

    .burger-icon span {
      display: block;
      height: 2px;
      border-radius: 2px;
      background: #fff;
      transition: transform 0.3s, opacity 0.3s, width 0.3s;
    }

    .burger-icon span:nth-child(2) {
      width: 15px;  /* 中段を短くして「動き」を示す */
    }

    /* メニューopen時 → ✕ 形に変形 */
    .menu-open .burger-icon span:nth-child(1) {
      transform: translateY(7px) rotate(45deg);
    }
    .menu-open .burger-icon span:nth-child(2) {
      opacity: 0;
      width: 0;
    }
    .menu-open .burger-icon span:nth-child(3) {
      transform: translateY(-7px) rotate(-45deg);
    }

    /* ====================================================
       NAV DRAWER
       ==================================================== */
    .nav-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.72);
      -webkit-backdrop-filter: blur(2px);
      backdrop-filter: blur(2px);
      z-index: 1001;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.35s ease;
    }

    .nav-overlay.open {
      opacity: 1;
      pointer-events: auto;
    }

    .nav-drawer {
      position: fixed;
      top: 0;
      right: 0;
      width: min(290px, 80vw);
      height: 100dvh;
      z-index: 1002;
      background: #08080f;
      border-left: 1px solid rgba(255, 255, 255, 0.08);
      transform: translateX(100%);
      transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .nav-drawer.open {
      transform: translateX(0);
    }

    /* .nav-links は下の定義に統合 */

    .drawer-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 18px 20px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    }

    .drawer-logo {
      height: 28px;
      width: auto;
      filter: drop-shadow(0 0 6px rgba(255, 77, 125, 0.30));
    }

    .drawer-close {
      width: 38px;
      height: 38px;
      border-radius: 10px;
      border: 1px solid rgba(255, 255, 255, 0.12);
      background: rgba(255, 255, 255, 0.05);
      color: #fff;
      font-size: 18px;
      line-height: 1;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .nav-links {
      list-style: none;
      padding: 12px 0;
      flex: 1;
      overflow-y: auto;
    }

    .nav-links li a {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 16px 24px;
      color: #fff;
      font-size: 14px;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-decoration: none;
      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
      transition: color 0.2s, background 0.2s;
    }

    .nav-links li a:active {
      background: rgba(255, 77, 125, 0.08);
      color: #fff;
    }

    .nav-links li a .nav-icon {
      font-size: 18px;
      width: 24px;
      text-align: center;
      flex-shrink: 0;
      opacity: 0.75;
    }

    .nav-footer {
      padding: 20px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      border-top: 1px solid rgba(255, 255, 255, 0.07);
    }

    .nav-login {
      display: block;
      padding: 14px;
      border-radius: 12px;
      border: 1px solid rgba(255, 255, 255, 0.14);
      background: transparent;
      color: #fff;
      font-size: 14px;
      font-weight: 700;
      text-align: center;
      text-decoration: none;
    }

    .nav-register {
      display: block;
      padding: 14px;
      border-radius: 12px;
      background: linear-gradient(90deg, var(--hot), var(--violet));
      color: #fff;
      font-size: 14px;
      font-weight: 700;
      text-align: center;
      text-decoration: none;
      box-shadow: 0 0 18px rgba(255, 77, 125, 0.35);
    }

    /* ====================================================
       01. HERO
       ==================================================== */
    .hero {
      position: relative;
      height: 690px;
      isolation: isolate;
      overflow: hidden;
    }

    /* ログイン済み：ボタンがない分だけ縦幅を縮小 */
    .hero.hero--member {
      height: 420px;
    }

    /* ログイン済み：固定ヘッダー分だけコンテンツをオフセット */
    .hero--member .hero-stage {
      top: 52px;
    }

    .hero--member .hero-h1 {
      top: 52%;
    }

    /* 背景画像 + オーバーレイ */
    .hero-bg {
      position: absolute;
      inset: 0;
      z-index: -2;
      background-image: url("/images/hmbg.jpg");
      background-size: cover;
      background-position: center top;
      background-repeat: no-repeat;
    }

    /* 下半分を暗くして文字を読みやすく */
    .hero-bg::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(
          to bottom,
          rgba(6,  6, 16, 0.28) 0%,
          rgba(6,  6, 16, 0.18) 30%,
          rgba(6,  6, 16, 0.55) 62%,
          rgba(6,  6, 16, 0.92) 85%,
          rgba(6,  6, 16, 1.00) 100%
        );
    }

    /* ====================================================
       Layer 3: パーティクル（光・星・小さな輝き）
       ==================================================== */
    .hero-particles {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      overflow: hidden;
    }

    .p {
      position: absolute;
      border-radius: 50%;
      opacity: 0;
      animation: p-rise linear infinite;
      will-change: transform, opacity;
    }

    .p-c { background: var(--cyan);              box-shadow: 0 0 8px var(--cyan); }
    .p-v { background: var(--violet);            box-shadow: 0 0 8px var(--violet); }
    .p-y { background: var(--yellow);            box-shadow: 0 0 8px var(--yellow); }
    .p-h { background: var(--hot);               box-shadow: 0 0 8px var(--hot); }
    .p-w { background: rgba(255, 255, 255, 0.85); }

    @keyframes p-rise {
      0%   { transform: translateY(0)      scale(1);   opacity: 0; }
      8%   { opacity: 1; }
      85%  { opacity: 0.5; }
      100% { transform: translateY(-170px) scale(0.1); opacity: 0; }
    }

    .p1  { width: 3px; height: 3px; left: 11%; top: 64%; animation-duration: 5.5s; animation-delay:  0.0s; }
    .p2  { width: 2px; height: 2px; left: 23%; top: 59%; animation-duration: 6.8s; animation-delay:  0.7s; }
    .p3  { width: 4px; height: 4px; left: 47%; top: 61%; animation-duration: 7.2s; animation-delay:  1.3s; }
    .p4  { width: 3px; height: 3px; left: 67%; top: 58%; animation-duration: 5.8s; animation-delay:  0.4s; }
    .p5  { width: 2px; height: 2px; left: 81%; top: 64%; animation-duration: 8.0s; animation-delay:  1.9s; }
    .p6  { width: 5px; height: 5px; left: 34%; top: 57%; animation-duration: 6.2s; animation-delay:  2.5s; }
    .p7  { width: 2px; height: 2px; left: 56%; top: 65%; animation-duration: 7.5s; animation-delay:  1.1s; }
    .p8  { width: 3px; height: 3px; left: 75%; top: 56%; animation-duration: 5.2s; animation-delay:  3.0s; }
    .p9  { width: 4px; height: 4px; left: 19%; top: 66%; animation-duration: 9.0s; animation-delay:  0.3s; }
    .p10 { width: 2px; height: 2px; left: 88%; top: 61%; animation-duration: 6.5s; animation-delay:  2.2s; }
    .p11 { width: 3px; height: 3px; left: 61%; top: 63%; animation-duration: 7.8s; animation-delay:  1.7s; }
    .p12 { width: 2px; height: 2px; left: 41%; top: 67%; animation-duration: 5.0s; animation-delay:  3.5s; }

    /* ====================================================
       Layer 4+5: 浮かんで回るレコード＋じんわり発光
       ==================================================== */
    .hero-stage {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 62%;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1;
    }

    /* レコード全体のシーン */
    .record-scene {
      position: relative;
      width: 310px;
      height: 310px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* ─────────────────────────────
       外側：大きな光のハロー
       ───────────────────────────── */
    .record-halo {
      position: absolute;
      width: 300px;
      height: 300px;
      border-radius: 50%;
      background: radial-gradient(
        circle,
        rgba(255, 77, 125, 0.12)  0%,
        rgba(143, 114, 255, 0.08) 40%,
        transparent               72%
      );
      animation: halo-breathe 5s ease-in-out infinite;
      pointer-events: none;
    }

    @keyframes halo-breathe {
      0%, 100% { transform: scale(1);    opacity: 0.65; }
      50%       { transform: scale(1.14); opacity: 1.00; }
    }

    /* 外側の薄い光の輪 */
    .record-ring {
      position: absolute;
      width: 256px;
      height: 256px;
      border-radius: 50%;
      border: 1px solid rgba(255, 77, 125, 0.18);
      box-shadow:
        0 0 24px rgba(255, 77, 125, 0.12),
        inset 0 0 24px rgba(255, 77, 125, 0.06);
      animation: ring-slow-spin 24s linear infinite;
      pointer-events: none;
    }

    @keyframes ring-slow-spin {
      to { transform: rotate(360deg); }
    }

    /* ─────────────────────────────
       レコード本体（スピニング）
       ───────────────────────────── */
    .vinyl-record {
      will-change: transform;
      position: relative;
      width: 224px;
      height: 224px;
      border-radius: 50%;
      background:
        radial-gradient(
          circle at center,
          #0e0e1a   0%  5.5%,
          #d63d66   6%  8.5%,   /* ラベル縁のリング：鮮やか */
          #180e2c   9%  12%,
          #05050c  13%  21%,
          #16162a  22%  24%,   /* 溝の山：わずかに明るい */
          #05050c  25%  100%
        );
      animation: record-spin 9s linear infinite;
      box-shadow:
        0 0  28px rgba(255, 77, 125, 0.65),
        0 0  70px rgba(255, 77, 125, 0.30),
        0 0 140px rgba(143, 114, 255, 0.22),
        inset 0 0  60px rgba(0, 0, 0, 0.85),
        inset 0 0   8px rgba(255, 255, 255, 0.05),
        0 28px 72px rgba(0, 0, 0, 0.65);
      z-index: 2;
    }

    @keyframes record-spin {
      to { transform: rotate(360deg); }
    }

    /* レコードの溝 */
    .vinyl-record::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background: repeating-radial-gradient(
        circle,
        transparent 0 7px,
        rgba(255, 230, 242, 0.10) 8px 9px
      );
    }

    /* センターラベル（スペキュラーハイライト付き） */
    .vinyl-record::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 60px;
      height: 60px;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      background:
        radial-gradient(ellipse 22px 14px at 40% 34%, rgba(255,255,255,0.22), transparent),
        radial-gradient(circle at 42% 38%, #3d1e6b, #12101e);
      border: 1px solid rgba(255, 255, 255, 0.12);
      box-shadow:
        inset 0 2px 6px rgba(0, 0, 0, 0.7),
        0 0 20px rgba(143, 114, 255, 0.50),
        0 0  8px rgba(143, 114, 255, 0.60);
    }

    /* スピンドル（メタリック） */
    .record-spindle {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 9px;
      height: 9px;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      background: radial-gradient(circle at 35% 30%, #f5f5f5, #aaaaaa 40%, #444444);
      box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.9),
        0 0  5px rgba(255, 255, 255, 0.30);
      z-index: 3;
    }

    /* ─────────────────────────────
       シマー（高速で回る光の帯）
       ───────────────────────────── */
    .record-shimmer {
      position: absolute;
      width: 224px;
      height: 224px;
      border-radius: 50%;
      background: conic-gradient(
        transparent                    0deg,
        rgba(255, 255, 255, 0.00)     38deg,
        rgba(255, 255, 255, 0.28)     56deg,   /* 強い白ハイライト */
        rgba(255, 255, 255, 0.06)     80deg,
        transparent                  120deg,
        rgba(255,  77, 125, 0.16)    198deg,   /* ピンク反射 */
        transparent                  264deg,
        rgba(143, 114, 255, 0.13)    332deg,   /* 紫反射 */
        transparent                  360deg
      );
      mix-blend-mode: screen;
      animation: shimmer-spin 7s linear infinite;
      pointer-events: none;
      z-index: 3;
    }

    @keyframes shimmer-spin {
      to { transform: rotate(360deg); }
    }

    /* ─────────────────────────────
       光沢レイヤー（回転しない固定ハイライト）
       3箇所の光源で多面的な質感を演出
       ───────────────────────────── */
    .record-gloss {
      position: absolute;
      width: 224px;
      height: 224px;
      border-radius: 50%;
      background:
        /* ① 左上：メイン光沢（白・強め） */
        radial-gradient(
          ellipse 88px 58px at 33% 24%,
          rgba(255, 255, 255, 0.22),
          transparent 100%
        ),
        /* ② 右中：ピンク寄りの照り返し（中程度） */
        radial-gradient(
          ellipse 54px 46px at 76% 43%,
          rgba(255, 200, 228, 0.15),
          transparent 100%
        ),
        /* ③ 左下：クール系の淡い反射（控えめ） */
        radial-gradient(
          ellipse 44px 32px at 23% 71%,
          rgba(190, 210, 255, 0.10),
          transparent 100%
        );
      animation: gloss-breathe 5s ease-in-out infinite;
      pointer-events: none;
      z-index: 4;
    }

    @keyframes gloss-breathe {
      0%, 100% { opacity: 1.00; }
      50%       { opacity: 0.72; }
    }

    /* ─────────────────────────────
       ロゴ（レコード面の上に浮かぶ・固定）
       ───────────────────────────── */
    .record-logo {
      position: absolute;
      top: 108px;
      left: 50%;
      width: 250px;
      height: auto;
      object-fit: contain;
      pointer-events: none;
      z-index: 5;
      filter:
        drop-shadow(0 0 10px rgba(255, 255, 255, 0.60))
        drop-shadow(0 0 26px rgba(255,  77, 125, 0.50))
        drop-shadow(0 3px  8px rgba(0, 0, 0, 0.75));
      animation: logo-float 6s ease-in-out infinite;
    }

    @keyframes logo-float {
      0%, 100% { transform: translateX(-50%) translateY(  0px); }
      50%       { transform: translateX(-50%) translateY(-8px); }
    }

    /* ─────────────────────────────
       床面へのグロー（光の落下）
       ───────────────────────────── */
    .record-floor-glow {
      position: absolute;
      bottom: -18px;
      left: 50%;
      width: 210px;
      height: 38px;
      transform: translateX(-50%);
      background: radial-gradient(ellipse, rgba(255, 77, 125, 0.26), transparent 70%);
      border-radius: 50%;
      filter: blur(10px);
      pointer-events: none;
      animation: floor-pulse 4s ease-in-out infinite;
    }

    @keyframes floor-pulse {
      0%, 100% { opacity: 0.70; transform: translateX(-50%) scaleX(1.00); }
      50%       { opacity: 1.00; transform: translateX(-50%) scaleX(1.12); }
    }

    /* ============================================================
       Layer 6: フローティングジャケット画像（12枚・全体散りばめ）

       クラス設計：役割ごとに分離して管理しやすくする
         .jacket-float   共通ベース
         .jf-*           位置・サイズのみ
         .glow-*         グロー色のみ
         .float-*        浮遊アニメーションのパターンのみ
         style="animation-delay:Xs"  タイミングずらし（HTML側）
       ============================================================ */

    /* ── 共通ベース ── */
    .jacket-float {
      will-change: transform;
      position: absolute;
      border-radius: 13px;
      overflow: hidden;
      z-index: 3;
    }

    .jacket-float img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    /* ── グロー色 ─────────────────────────────
       HTML側: class="jacket-float jf-1 glow-hot float-a"
       ──────────────────────────────────────── */
    .glow-hot {
      box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(255, 255, 255, 0.09),
        0 0 22px rgba(255,  77, 125, 0.42);
    }

    .glow-cyan {
      box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(255, 255, 255, 0.09),
        0 0 22px rgba(120, 239, 255, 0.38);
    }

    .glow-violet {
      box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(255, 255, 255, 0.09),
        0 0 22px rgba(143, 114, 255, 0.40);
    }

    .glow-yellow {
      box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(255, 255, 255, 0.09),
        0 0 18px rgba(255, 233, 107, 0.34);
    }

    .glow-orange {
      box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(255, 255, 255, 0.09),
        0 0 18px rgba(255, 140,  66, 0.32);
    }

    /* ── 浮遊アニメーション 4パターン ─────────────────
       float-a: 左傾き・浮上13px・やや速め
       float-b: 右傾き・浮上11px・ゆっくり
       float-c: わずか左傾き・浮上16px（一番高く浮く）
       float-d: わずか右傾き・浮上9px（控えめ）
       ────────────────────────────────────────────── */
    .float-a { animation: jf-float-a  7.2s ease-in-out infinite; }
    .float-b { animation: jf-float-b  8.8s ease-in-out infinite; }
    .float-c { animation: jf-float-c  6.4s ease-in-out infinite; }
    .float-d { animation: jf-float-d  9.6s ease-in-out infinite; }
    .float-e { animation: jf-float-e  5.9s ease-in-out infinite; }
    .float-f { animation: jf-float-f 11.0s ease-in-out infinite; }

    /* X・Y両方向にドリフト＋回転も途中で変わる不規則パターン */
    @keyframes jf-float-a {
      0%   { transform: translateX(  0px) translateY(  0px) rotate(-6deg); }
      30%  { transform: translateX( -6px) translateY(-10px) rotate(-9deg); }
      65%  { transform: translateX(  4px) translateY(-15px) rotate(-3deg); }
      100% { transform: translateX(  0px) translateY(  0px) rotate(-6deg); }
    }

    @keyframes jf-float-b {
      0%   { transform: translateX( 0px) translateY(  0px) rotate( 5deg); }
      25%  { transform: translateX( 7px) translateY( -7px) rotate( 9deg); }
      58%  { transform: translateX(-3px) translateY(-13px) rotate( 2deg); }
      80%  { transform: translateX( 5px) translateY( -6px) rotate( 8deg); }
      100% { transform: translateX( 0px) translateY(  0px) rotate( 5deg); }
    }

    @keyframes jf-float-c {
      0%   { transform: translateX(  0px) translateY(  0px) rotate(-2deg); }
      42%  { transform: translateX( -7px) translateY(-17px) rotate(-6deg); }
      72%  { transform: translateX(  5px) translateY(-10px) rotate( 3deg); }
      100% { transform: translateX(  0px) translateY(  0px) rotate(-2deg); }
    }

    @keyframes jf-float-d {
      0%   { transform: translateX( 0px) translateY( 0px) rotate( 3deg); }
      38%  { transform: translateX( 6px) translateY(-6px) rotate( 7deg); }
      68%  { transform: translateX(-5px) translateY(-9px) rotate(-1deg); }
      100% { transform: translateX( 0px) translateY( 0px) rotate( 3deg); }
    }

    /* float-e：素早くブレながら浮く（小さめジャケット向き） */
    @keyframes jf-float-e {
      0%   { transform: translateX(  0px) translateY(  0px) rotate(-8deg); }
      22%  { transform: translateX( -9px) translateY( -5px) rotate(-12deg); }
      52%  { transform: translateX(  4px) translateY(-11px) rotate( -5deg); }
      78%  { transform: translateX( -5px) translateY( -3px) rotate(-11deg); }
      100% { transform: translateX(  0px) translateY(  0px) rotate( -8deg); }
    }

    /* float-f：ゆっくり大きく揺れる（大きめジャケット向き） */
    @keyframes jf-float-f {
      0%   { transform: translateX( 0px) translateY(  0px) rotate( 4deg); }
      48%  { transform: translateX( 9px) translateY(-16px) rotate( 1deg); }
      78%  { transform: translateX(-6px) translateY( -9px) rotate( 8deg); }
      100% { transform: translateX( 0px) translateY(  0px) rotate( 4deg); }
    }

    /* ── 位置・サイズ（jf-* はここだけ） ──────────── */
    .jf-1  { width: 76px; height: 76px; top: 14%; left:  4%; }
    .jf-2  { width: 70px; height: 70px; top: 12%; right: 5%; }
    .jf-3  { width: 54px; height: 54px; top: 17%; left: 36%; }
    .jf-4  { width: 46px; height: 46px; top: 19%; right:33%; opacity: 0.80; }
    .jf-5  { width: 60px; height: 60px; top: 28%; left:  2%; }
    .jf-6  { width: 58px; height: 58px; top: 26%; right: 2%; }
    .jf-7  { width: 62px; height: 62px; top: 46%; left:  3%; }
    .jf-8  { width: 60px; height: 60px; top: 48%; right: 3%; }
    .jf-9  { width: 56px; height: 56px; top: 68%; left:  4%; opacity: 0.80; }
    .jf-10 { width: 58px; height: 58px; top: 70%; right: 4%; opacity: 0.80; }
    .jf-11 { width: 44px; height: 44px; top: 74%; left: 28%; opacity: 0.70; }
    .jf-12 { width: 46px; height: 46px; top: 76%; right:27%; opacity: 0.70; }

    /* ヒーローコピー */
    .hero-content {
      position: absolute;
      bottom: 52px;
      left: 22px;
      right: 22px;
      z-index: 2;
    }

    .hero-h1 {
      position: absolute;
      left: 22px;
      right: 22px;
      top: 46%;
      z-index: 3;
      margin: 0;
      /* 背景に溶け込まないよう薄いグラデーション背景 */
      background: linear-gradient(
        to bottom,
        transparent,
        rgba(7, 7, 14, 0.30) 40%,
        rgba(7, 7, 14, 0.55)
      );
      padding: 14px 0 18px;
      border-radius: 0 0 12px 12px;
    }

    /* 小さいラベル */
    .hero-h1::before {
      content: "MUSIC DISCOVERY";
      display: block;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.30em;
      background: linear-gradient(90deg, var(--hot), var(--violet));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      margin-bottom: 8px;
    }

    /* サブテキスト：白・読みやすく */
    .hero-h1 .line-sub {
      display: block;
      font-size: 17px;
      font-weight: 700;
      letter-spacing: 0.04em;
      color: #fff;
      text-shadow: 0 1px 12px rgba(0, 0, 0, 0.70);
      margin-bottom: 2px;
      line-height: 1.4;
    }

    /* メインテキスト：サイズダウン＋シマー維持 */
    .hero-h1 .line-main {
      display: block;
      font-size: 50px;
      font-weight: 900;
      line-height: 1.0;
      letter-spacing: -0.03em;
      background: linear-gradient(
        100deg,
        var(--hot)    0%,
        #ffffff       38%,
        var(--violet) 68%,
        var(--hot)   100%
      );
      background-size: 220% 100%;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      filter: drop-shadow(0 0 18px rgba(255, 77, 125, 0.50));
      animation: text-shimmer 5s ease-in-out infinite;
    }

    @keyframes text-shimmer {
      0%   { background-position: 100% 50%; }
      50%  { background-position:   0% 50%; }
      100% { background-position: 100% 50%; }
    }

    .hero-actions {
      display: grid;
      gap: 10px;
      margin-bottom: 16px;
    }

    /* ヒーローサブノート */
    .btn-main-label {
      display: block;
      line-height: 1.2;
    }
    .btn-sub-label {
      display: block;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.08em;
      opacity: 1;
      margin-top: 5px;
      line-height: 1;
    }

    /* 登録ボタン：縦幅を太く */
    .hero-reg-btn {
      padding: 24px !important;
      font-size: 20px !important;
      letter-spacing: 0.06em !important;
    }

    /* ── ネオングロー CTA ボタン ──────────────────── */
    .btn-neon {
      position: relative;
      display: block;
      width: 100%;
      padding: 18px 24px;
      border: none;
      border-radius: 14px;
      background: linear-gradient(45deg, #0ce39a, #69007f, #fc0987);
      color: #fff;
      font-size: 15px;
      font-weight: 900;
      text-align: center;
      cursor: pointer;
      text-decoration: none;
      letter-spacing: 0.03em;
      /* 外側グロー：box-shadowでボタン外にも光を放つ */
      animation: btn-outer-glow 5s ease-in-out infinite;
    }

    .btn-neon > span:not(.btn-eq) {
      position: relative;
      z-index: 2;
    }

    /* 内側の暗い背景（グラデ枠 1.5px 残す） */
    .btn-neon::before {
      content: "";
      position: absolute;
      inset: 1.5px;
      background: #0e0e1a;
      border-radius: 12.5px;
      z-index: 0;
      animation: btn-bg-pulse 5s ease-in-out infinite;
    }

    /* ── 音波ストライプパターン（常時スクロール） ── */
    .btn-eq {
      position: absolute;
      inset: 1.5px;
      border-radius: 12.5px;
      overflow: hidden;
      pointer-events: none;
      z-index: 1;
      /* 縦ラインが左から右へ流れ続ける */
      background-image: repeating-linear-gradient(
        90deg,
        transparent                   0px,
        transparent                   8px,
        rgba(255, 255, 255, 0.05)     8px,
        rgba(255, 255, 255, 0.05)     9px
      );
      background-size: 18px 100%;
      animation: eq-scroll 2s linear infinite;
    }

    @keyframes eq-scroll {
      from { background-position: 0 0; }
      to   { background-position: 18px 0; }
    }

    /* 内側ブラーグロー（ボタン面上で滲む） */
    .btn-neon::after {
      content: "";
      position: absolute;
      inset: -4px;          /* 外側にはみ出させる */
      background: linear-gradient(45deg, #0ce39a, #69007f, #fc0987);
      border-radius: 18px;
      filter: blur(24px);
      opacity: 0;
      z-index: -1;           /* ボタン背面へ */
      animation: btn-glow-pulse 5s ease-in-out infinite;
    }

    /* 2枚目のボタンを2.5秒ずらす */
    .btn-neon:nth-child(2),
    .btn-neon:nth-child(2)::before,
    .btn-neon:nth-child(2)::after {
      animation-delay: 2.5s;
    }

    /* 通常 → 発光のメリハリを強く */
    @keyframes btn-bg-pulse {
      0%,  48%, 100% { opacity: 1.00; }   /* 通常：暗い内側でグラデ枠のみ */
      60%,  82%      { opacity: 0.10; }   /* 発光：ほぼ消えてグラデが全面に */
    }

    @keyframes btn-glow-pulse {
      0%,  48%, 100% { opacity: 0;    }
      60%,  82%      { opacity: 1.00; }   /* ブラーグローを最大に */
    }

    /* 外側のbox-shadowグロー */
    @keyframes btn-outer-glow {
      0%,  48%, 100% {
        box-shadow:
          0 0  0px  0px rgba( 12, 227, 154, 0.00),
          0 0  0px  0px rgba(252,   9, 135, 0.00);
      }
      60%,  82% {
        box-shadow:
          0 0 28px 10px rgba( 12, 227, 154, 0.45),
          0 0 40px 16px rgba(252,   9, 135, 0.35),
          0 0 60px 20px rgba(105,   0, 127, 0.25);
      }
    }

    /* セカンダリボタン（紫ピンク系） */
    .btn-neon.btn-secondary {
      background: linear-gradient(45deg, #4c00a0, #8a006e, #e0007a);
    }
    .btn-neon.btn-secondary::after {
      background: linear-gradient(45deg, #4c00a0, #8a006e, #e0007a);
    }
    .btn-neon.btn-secondary {
      animation-name: btn-outer-glow-secondary;
    }

    @keyframes btn-outer-glow-secondary {
      0%,  48%, 100% {
        box-shadow:
          0 0  0px  0px rgba( 76,   0, 160, 0.00),
          0 0  0px  0px rgba(224,   0, 122, 0.00);
      }
      60%,  82% {
        box-shadow:
          0 0 28px 10px rgba( 76,   0, 160, 0.50),
          0 0 40px 16px rgba(224,   0, 122, 0.38),
          0 0 60px 20px rgba(138,   0, 110, 0.28);
      }
    }

    .hero-note {
      text-align: center;
      font-size: 11px;
      color: #fff;
      letter-spacing: 0.12em;
      text-shadow: 0 1px 8px rgba(0,0,0,0.9);
    }

    /* スクロール誘導 */
    .scroll-hint {
      position: absolute;
      bottom: 22px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      font-size: 8px;
      letter-spacing: 0.22em;
      color: rgba(255,255,255,0.7);
      animation: scroll-bounce 2.2s ease-in-out infinite;
    }

    .scroll-hint::after {
      content: "";
      width: 1px;
      height: 34px;
      background: linear-gradient(to bottom, rgba(255,255,255,0.25), transparent);
    }

    @keyframes scroll-bounce {
      0%, 100% { transform: translateX(-50%) translateY(0); }
      55%       { transform: translateX(-50%) translateY(8px); }
    }

    /* ====================================================
       STATS STRIP（ヒーロー直下）
       ==================================================== */
    .stats-strip-REMOVED {
      /* 削除済み */
      display: none;
      color: #606070;
    }

    /* ====================================================
       02. HOW TO START（ペーパー背景・コントラスト）
       ==================================================== */
    /* ====================================================
       02. HOW TO FIND — リデザイン
       ==================================================== */
    .how-section {
      background: #08080f;
      color: #fff;
      padding: 0 0 52px;
      overflow: hidden;
    }

    /* 上部の雰囲気画像 */
    .how-visual {
      position: relative;
      width: 100%;
      height: 210px;
      overflow: hidden;
    }

    .how-visual img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 30%;
      display: block;
    }

    /* 画像から背景色へのグラデーションフェード */
    .how-visual::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(
        to bottom,
        rgba(8, 8, 15, 0.20) 0%,
        rgba(8, 8, 15, 0.55) 55%,
        rgba(8, 8, 15, 1.00) 100%
      );
    }

    /* セクションヘッダー（画像に重ねる） */
    .how-header {
      position: relative;
      z-index: 1;
      margin-top: -52px;
      padding: 0 20px 20px;
    }

    .how-section .eyebrow      { color: var(--hot); }
    .how-section .section-title { color: #fff; font-size: 30px; margin-top: 6px; }
    .how-section .section-lead  { color: rgba(255,255,255,0.75); }

    /* ── エントリーカード（ビビッドグラデーション全塗り）── */
    .how-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin: 0 20px;
    }

    .entry-card {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      gap: 8px;
      padding: 18px 16px;
      height: 140px;
      border-radius: 22px;
      text-decoration: none;
      color: #fff;
      position: relative;
      overflow: hidden;
      transition: transform 0.18s ease;
      border: none;
      text-align: left;
      cursor: pointer;
    }

    .entry-card:active { transform: scale(0.95); }

    /* ビビッドグラデーション全塗り */
    .entry-card.mood-card {
      background: linear-gradient(145deg, #ff0844 0%, #c4006c 100%);
      height: 140px;
      padding: 18px 16px;
      align-items: flex-start;
      justify-content: flex-start;
      border-radius: 20px;
      border: none;
      text-align: left;
    }
    .entry-card.time-card {
      background: linear-gradient(145deg, #1a6dff 0%, #00c5ff 100%);
      display: flex;
      height: 140px;
      max-width: none;
      width: 100%;
    }
    .entry-card.scene-card {
      background: linear-gradient(145deg, #00b09b 0%, #96e600 100%);
      height: 140px;
      min-width: 0;
      padding: 18px 16px;
      justify-content: flex-start;
      flex-shrink: 1;
    }
    .entry-card.random-card { background: linear-gradient(145deg, #f7971e 0%, #ffd200 100%); }
    .entry-card.game-card   {
      grid-column: 1 / -1;
      height: auto;
      min-height: 100px;
      flex-direction: row;
      align-items: center;
      gap: 16px;
      background: linear-gradient(135deg, #6e00ff 0%, #a855f7 50%, #ff0099 100%);
    }

    /* 下部の暗グラデ（テキスト読みやすく） */
    .entry-card::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(to bottom, rgba(0,0,0,0) 30%, rgba(0,0,0,0.35) 100%);
      pointer-events: none;
    }
    .entry-card.game-card::before  { background: none; }

    /* entry-card内の番号を time-card / scene-card でも強制表示 */
    .entry-card.scene-card::after,
    .entry-card.time-card::after {
      content: attr(data-num) !important;
      display: block !important;
      position: absolute !important;
      top: 14px !important;
      right: 16px !important;
      font-size: 11px !important;
      font-weight: 900 !important;
      letter-spacing: 0.12em !important;
      color: rgba(255,255,255,0.75) !important;
      background: none !important;
      pointer-events: none !important;
      width: auto !important; height: auto !important;
      inset: auto !important;
    }

    /* 右上の薄い番号 */
    .entry-card::after {
      content: attr(data-num);
      position: absolute;
      top: 14px;
      right: 16px;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.12em;
      color: rgba(255,255,255,0.75);
      pointer-events: none;
    }

    /* アイコン */
    .entry-icon {
      font-size: 34px;
      line-height: 1;
      display: block;
      margin: 0;
      position: relative;
      z-index: 1;
    }

    /* テキストグループ */
    .entry-body {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      gap: 3px;
    }

    .entry-card.game-card .entry-body { flex: 1; }

    .entry-card strong {
      font-size: 17px;
      font-weight: 900;
      color: #fff;
      letter-spacing: -0.02em;
      display: block;
      line-height: 1.1;
      text-shadow: 0 1px 6px rgba(0,0,0,0.25);
    }

    .entry-card p {
      font-size: 11px;
      color: rgba(255, 255, 255, 0.80);
      line-height: 1.4;
      margin: 0;
    }

    /* 矢印 */
    .entry-arrow {
      position: absolute;
      bottom: 14px;
      right: 14px;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: rgba(255,255,255,0.25);
      font-size: 13px;
      color: #fff;
    }

    .entry-card.game-card .entry-arrow {
      align-self: center;
      width: 40px;
      height: 40px;
      font-size: 18px;
    }

    /* ====================================================
       03. SPECIAL GAME（ゲームセンター筐体）
       ==================================================== */
    /* ====================================================
       03. SPECIAL GAME（ゲームコーナー）
       ==================================================== */

    @keyframes neon-flicker {
      0%,19%,21%,55%,57%,100% {
        opacity: 1;
        text-shadow: 0 0 6px #fff, 0 0 16px #ff4d7d, 0 0 40px #ff4d7d, 0 0 80px rgba(255,77,125,0.5);
        box-shadow: 0 0 20px rgba(255,77,125,0.6), inset 0 0 20px rgba(255,77,125,0.12);
      }
      20%, 56% {
        opacity: 0.7;
        text-shadow: none;
        box-shadow: none;
      }
    }

    @keyframes cabinet-pulse {
      0%,100% { box-shadow: 0 0 40px rgba(255,77,125,0.45), 0 0 80px rgba(143,114,255,0.2), 0 0 0 3px rgba(255,77,125,0.6); }
      50%      { box-shadow: 0 0 70px rgba(255,77,125,0.7), 0 0 140px rgba(143,114,255,0.35), 0 0 0 3px rgba(255,77,125,0.9); }
    }

    @keyframes scanline {
      0%   { transform: translateY(-80px); }
      100% { transform: translateY(480px); }
    }

    @keyframes disc-glow-a {
      0%,100% { box-shadow: 0 0 16px rgba(255,77,125,0.5),  0 4px 14px rgba(0,0,0,0.6); }
      50%      { box-shadow: 0 0 34px rgba(255,77,125,0.9),  0 4px 14px rgba(0,0,0,0.6); }
    }
    @keyframes disc-glow-b {
      0%,100% { box-shadow: 0 0 16px rgba(120,239,255,0.5), 0 4px 14px rgba(0,0,0,0.6); }
      50%      { box-shadow: 0 0 34px rgba(120,239,255,0.9), 0 4px 14px rgba(0,0,0,0.6); }
    }
    @keyframes disc-glow-c {
      0%,100% { box-shadow: 0 0 16px rgba(255,233,107,0.5), 0 4px 14px rgba(0,0,0,0.6); }
      50%      { box-shadow: 0 0 34px rgba(255,233,107,0.9), 0 4px 14px rgba(0,0,0,0.6); }
    }
    @keyframes disc-glow-d {
      0%,100% { box-shadow: 0 0 16px rgba(143,114,255,0.5), 0 4px 14px rgba(0,0,0,0.6); }
      50%      { box-shadow: 0 0 34px rgba(143,114,255,0.9), 0 4px 14px rgba(0,0,0,0.6); }
    }

    .special-section {
      background: #030308;
      padding: 0 0 68px;
      position: relative;
      overflow: hidden;
    }

    /* 背景の淡いライト（画像エリア外） */
    .special-section::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse at 15% 70%, rgba(255,77,125,0.12), transparent 45%),
        radial-gradient(ellipse at 85% 60%, rgba(143,114,255,0.14), transparent 45%);
      pointer-events: none;
      z-index: 0;
    }

    /* ビジュアルバナー */
    .special-visual {
      position: relative;
      height: 220px;
      overflow: hidden;
    }

    .special-visual img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 30%;
    }

    /* 画像→背景色へのグラデーション */
    .special-visual::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(to bottom,
          rgba(3,3,8,0.25) 0%,
          rgba(3,3,8,0.55) 55%,
          rgba(3,3,8,1.00) 100%),
        linear-gradient(to right,
          rgba(3,3,8,0.4) 0%,
          transparent 25%,
          transparent 75%,
          rgba(3,3,8,0.4) 100%);
    }

    /* タイトル・リード（画像にオーバーラップ） */
    .special-header {
      position: relative;
      z-index: 1;
      margin-top: -72px;
      padding: 0 20px 0;
      text-align: center;
    }

    /* セクションタイトル */
    .special-title {
      text-align: center;
      margin: 0 0 12px;
    }

    .special-title-en {
      display: block;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: 0.36em;
      color: rgba(255,77,125,0.9);
      text-shadow: 0 0 12px rgba(255,77,125,0.7);
      margin-bottom: 6px;
    }

    /* メインキャッチ — でかく、グラデーション、グロー */
    .special-title-catch {
      display: block;
      font-size: 64px;
      font-weight: 900;
      letter-spacing: -0.04em;
      line-height: 1;
      background: linear-gradient(140deg, #ffffff 0%, #ffb3d5 45%, #cc66ff 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      filter:
        drop-shadow(0 0 18px rgba(255,77,125,0.85))
        drop-shadow(0 0 48px rgba(204,102,255,0.55));
      margin-bottom: 10px;
    }

    /* サブライン */
    .special-title-sub {
      display: block;
      font-size: 12px;
      font-weight: 600;
      color: rgba(255,255,255,0.60);
      letter-spacing: 0.06em;
    }

    /* リード文 */
    .special-lead {
      display: block;
      text-align: left;
      font-size: 12px;
      font-weight: 600;
      color: rgba(255,255,255,0.90);
      line-height: 1.6;
      margin: 0 0 22px;
      padding: 7px 16px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 30px;
    }

    /* ネオンサイン */
    .neon-sign-wrap {
      display: flex;
      justify-content: center;
      margin: 18px 0 18px;
    }

    .neon-sign {
      font-size: 17px;
      font-weight: 900;
      letter-spacing: 0.14em;
      color: #fff;
      padding: 9px 20px;
      border: 2px solid rgba(255,77,125,0.9);
      border-radius: 4px;
      animation: neon-flicker 5s infinite;
    }

    /* 筐体上部バー */
    .cabinet-header {
      background: linear-gradient(180deg, #22082e, #14061e);
      padding: 10px 16px 11px;
      text-align: center;
      border-bottom: 2px solid #ff4d7d;
      position: relative;
      overflow: hidden;
    }

    .cabinet-header::before {
      content: "✦  MUSIC GAME CORNER  ✦";
      display: block;
      font-size: 8px;
      font-weight: 900;
      letter-spacing: 0.32em;
      color: #ffe96b;
      text-shadow: 0 0 10px rgba(255,233,107,0.9);
      margin-bottom: 3px;
    }

    .cabinet-header::after {
      content: "";
      position: absolute;
      inset: 0;
      background: repeating-linear-gradient(90deg, transparent 0 18px, rgba(255,77,125,0.05) 18px 20px);
      pointer-events: none;
    }

    .cabinet-name {
      font-size: 18px;
      font-weight: 900;
      letter-spacing: 0.18em;
      color: #ff4d7d;
      text-shadow: 0 0 10px #ff4d7d, 0 0 30px rgba(255,77,125,0.6);
    }

    /* プレイフィールド */
    .playfield {
      position: relative;
      height: 370px;
      background:
        radial-gradient(ellipse at 50% 5%,  rgba(120,239,255,0.14), transparent 35%),
        radial-gradient(ellipse at 18% 75%, rgba(255,77,125,0.09),  transparent 35%),
        radial-gradient(ellipse at 82% 70%, rgba(143,114,255,0.09), transparent 35%),
        linear-gradient(180deg, #130f28, #07060f);
      overflow: hidden;
    }

    /* スキャンライン */
    .playfield::before {
      content: "";
      position: absolute;
      inset: 0;
      background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,0.10) 3px 4px);
      pointer-events: none;
      z-index: 1;
    }

    .playfield::after {
      content: "";
      position: absolute;
      left: 0; right: 0;
      height: 70px;
      background: linear-gradient(to bottom, transparent, rgba(120,239,255,0.05), transparent);
      animation: scanline 4s linear infinite;
      pointer-events: none;
      z-index: 2;
    }

    /* ガラス枠＋反射 */
    .playfield-border {
      position: absolute;
      top: 26px; left: 10px; right: 10px; bottom: 6px;
      border: 1px solid rgba(120,239,255,0.18);
      border-top: 2px solid rgba(255,255,255,0.18);
      border-radius: 7px;
      pointer-events: none;
      z-index: 3;
      box-shadow:
        inset 0 2px 10px rgba(255,255,255,0.04),
        0 0 0 1px rgba(120,239,255,0.05);
    }

    /* ガラス上部のハイライト反射 */
    .playfield-border::before {
      content: "";
      position: absolute;
      top: 0; left: 4%; right: 4%;
      height: 50px;
      background: linear-gradient(to bottom,
        rgba(255,255,255,0.06) 0%,
        transparent 100%);
      border-radius: 7px 7px 0 0;
      pointer-events: none;
    }

    /* ======== レール（金属感あり） ======== */
    .claw-rail {
      position: absolute;
      left: 10px; right: 10px; top: 16px;
      height: 11px;
      background: linear-gradient(180deg,
        #909098 0%, #d8d8e0 18%, #f8f8ff 36%,
        #d0d0d8 55%, #909098 80%, #585860 100%);
      border-radius: 6px;
      box-shadow:
        0 4px 14px rgba(0,0,0,0.85),
        inset 0 1px 0 rgba(255,255,255,0.5),
        0 0 18px rgba(120,239,255,0.15);
      z-index: 5;
    }

    /* レール端のエンドキャップ */
    .claw-rail::before,
    .claw-rail::after {
      content: "";
      position: absolute;
      top: -4px; bottom: -4px;
      width: 14px;
      background: linear-gradient(180deg, #bbb, #e8e8e8, #bbb);
      border-radius: 5px;
      box-shadow: 0 3px 8px rgba(0,0,0,0.7);
    }
    .claw-rail::before { left: -4px; }
    .claw-rail::after  { right: -4px; }

    /* ======== クロー本体 ======== */
    .claw-crane {
      position: absolute;
      left: 168px;
      top: 27px;
      width: 60px;
      transition: left 0.55s cubic-bezier(0.25,0.46,0.45,0.94), top 0.65s ease;
      z-index: 6;
    }

    /* スポットライト（クロー直下の光錐） */
    .claw-spotlight {
      position: absolute;
      left: 50%;
      top: 14px;
      transform: translateX(-50%);
      width: 130px;
      height: 320px;
      background: linear-gradient(to bottom,
        rgba(255,255,200,0.07) 0%,
        rgba(255,255,200,0.02) 55%,
        transparent 100%);
      clip-path: polygon(34% 0%, 66% 0%, 100% 100%, 0% 100%);
      pointer-events: none;
      z-index: 0;
    }

    /* 台車（レール上を走るブロック） */
    .claw-carriage {
      position: relative;
      height: 14px;
      background: linear-gradient(180deg,
        #d8d8e4 0%, #a0a0b4 50%, #606072 100%);
      border-radius: 4px;
      box-shadow:
        0 3px 8px rgba(0,0,0,0.7),
        inset 0 1px 0 rgba(255,255,255,0.4),
        inset 0 -1px 0 rgba(0,0,0,0.4);
      z-index: 2;
    }

    /* 台車のボルト */
    .claw-carriage::before,
    .claw-carriage::after {
      content: "";
      position: absolute;
      top: 50%; transform: translateY(-50%);
      width: 6px; height: 6px;
      border-radius: 50%;
      background: radial-gradient(circle at 35% 30%, #e8e8e8, #888);
      box-shadow: 0 1px 3px rgba(0,0,0,0.6);
    }
    .claw-carriage::before { left: 6px; }
    .claw-carriage::after  { right: 6px; }

    /* ケーブル（より金属らしく） */
    .claw-cable {
      width: 4px;
      height: 68px;
      background: linear-gradient(to right,
        #777 0%, #bbb 25%, #f0f0f0 45%, #bbb 65%, #777 100%);
      margin: 0 auto;
      box-shadow: 1px 0 3px rgba(0,0,0,0.5);
    }

    /* クロー本体のハウジング */
    .claw-head {
      position: relative;
      width: 60px;
      height: 58px;
    }

    /* 中心ハブ（モーター） */
    .claw-hub {
      position: absolute;
      left: 50%;
      top: 0;
      transform: translateX(-50%);
      width: 28px; height: 28px;
      border-radius: 50%;
      background: radial-gradient(circle at 36% 30%,
        #f4f4f4 0%, #b8b8c8 45%, #585868 100%);
      box-shadow:
        0 4px 12px rgba(0,0,0,0.8),
        inset 0 1px 0 rgba(255,255,255,0.6),
        0 0 10px rgba(120,239,255,0.25);
      z-index: 3;
    }

    /* ハブのLEDリング */
    .claw-hub::before {
      content: "";
      position: absolute;
      inset: 4px;
      border-radius: 50%;
      border: 1.5px solid rgba(120,239,255,0.5);
      box-shadow:
        inset 0 0 5px rgba(120,239,255,0.4),
        0 0 6px rgba(120,239,255,0.3);
    }

    /* ハブの中心スクリュー */
    .claw-hub::after {
      content: "";
      position: absolute;
      inset: 10px;
      border-radius: 50%;
      background: radial-gradient(circle at 35% 30%, #ddd, #777);
      box-shadow: 0 1px 3px rgba(0,0,0,0.7);
    }

    /* アーム（共通） */
    .claw-arm {
      position: absolute;
      top: 10px;
      width: 8px;
      height: 42px;
      border-radius: 2px 2px 0 0;
      background: linear-gradient(to right,
        #b0b0be 0%, #dcdce8 40%, #f0f0f8 55%, #c8c8d4 80%, #909098 100%);
      box-shadow:
        2px 3px 6px rgba(0,0,0,0.7),
        inset 1px 0 0 rgba(255,255,255,0.3);
      transform-origin: top center;
      transition: transform 0.42s cubic-bezier(0.34,1.2,0.64,1);
    }

    /* アームの縦溝 */
    .claw-arm::before {
      content: "";
      position: absolute;
      top: 4px; bottom: 4px; left: 3px; right: 3px;
      background: linear-gradient(to bottom,
        rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.05) 100%);
      border-radius: 1px;
    }

    /* 先端の爪 */
    .claw-tip {
      position: absolute;
      bottom: -12px;
      left: 50%;
      transform: translateX(-50%);
      width: 14px; height: 14px;
      background: linear-gradient(to bottom,
        #c8c8d8 0%, #a0a0b0 40%, #686878 100%);
      border-radius: 0 0 10px 10px;
      box-shadow:
        0 4px 8px rgba(0,0,0,0.7),
        inset 0 1px 0 rgba(255,255,255,0.25);
    }

    .claw-arm-l {
      left: 4px;
      transform: rotate(-34deg);
    }

    .claw-arm-r {
      right: 4px;
      transform: rotate(34deg);
    }

    /* ======== クロー アニメーション ======== */
    .claw-crane.claw-descending {
      top: 258px !important;
      transition: left 0.55s ease, top 1.1s cubic-bezier(0.4,0,0.8,0.6) !important;
    }

    .claw-crane.claw-ascending {
      top: 27px !important;
      transition: left 0.55s ease, top 0.85s cubic-bezier(0.2,0.8,0.4,1) !important;
    }

    /* 掴み状態：アームを閉じる */
    .claw-crane.claw-caught .claw-arm-l { transform: rotate(-5deg); }
    .claw-crane.claw-caught .claw-arm-r { transform: rotate(5deg); }

    @keyframes claw-fail-shake {
      0%   { transform: translateX(0)    rotate(0deg); }
      15%  { transform: translateX(-9px) rotate(-5deg); }
      30%  { transform: translateX(9px)  rotate(5deg); }
      50%  { transform: translateX(-6px) rotate(-2deg); }
      70%  { transform: translateX(6px)  rotate(2deg); }
      85%  { transform: translateX(-2px) rotate(-1deg); }
      100% { transform: translateX(0)    rotate(0deg); }
    }

    .claw-crane.claw-fail { animation: claw-fail-shake 0.55s ease-in-out; }

    /* 失敗：途中まで上がってから滑り落とす */
    .claw-crane.claw-ascending-mid {
      top: 120px !important;
      transition: left 0.55s ease, top 0.65s cubic-bezier(0.2,0.8,0.4,1) !important;
    }

    @keyframes claw-slip-wobble {
      0%   { transform: translateX(0)    rotate(0deg); }
      20%  { transform: translateX(-7px) rotate(-4deg); }
      45%  { transform: translateX(7px)  rotate(4deg); }
      65%  { transform: translateX(-4px) rotate(-2deg); }
      85%  { transform: translateX(4px)  rotate(2deg); }
      100% { transform: translateX(0)    rotate(0deg); }
    }
    .claw-crane.claw-slip { animation: claw-slip-wobble 0.45s ease-in-out; }

    /* 落下するレコード */
    @keyframes disc-drop {
      0%   { opacity: 1;   transform: translateY(0)     rotate(0deg)   scale(1.0); }
      15%  { opacity: 1;   transform: translateY(18px)  rotate(-12deg) scale(1.0); }
      55%  { opacity: 0.9; transform: translateY(100px) rotate(-38deg) scale(0.92); }
      80%  { opacity: 0.5; transform: translateY(170px) rotate(-58deg) scale(0.85); }
      100% { opacity: 0;   transform: translateY(220px) rotate(-72deg) scale(0.8);  }
    }

    .dropping-disc {
      position: absolute;
      width: 36px; height: 36px;
      border-radius: 50%;
      background:
        radial-gradient(circle, #050508 0% 5%, transparent 6%),
        radial-gradient(circle, #0d0d14 0% 11%, #ff4d7d 12% 22%, #1a0a2e 23% 100%);
      box-shadow: 0 0 16px rgba(255,77,125,0.7);
      z-index: 8;
      pointer-events: none;
      animation: disc-drop 0.95s cubic-bezier(0.4,0,1,1) forwards;
    }

    /* 掴んだレコード */
    .claw-grabbed-disc {
      width: 36px; height: 36px;
      border-radius: 50%;
      background:
        radial-gradient(circle, #050508 0% 5%, transparent 6%),
        radial-gradient(circle, #0d0d14 0% 11%, #ff4d7d 12% 22%, #1a0a2e 23% 100%);
      box-shadow:
        0 0 18px rgba(255,77,125,0.9),
        0 0 40px rgba(255,77,125,0.4),
        0 4px 12px rgba(0,0,0,0.6);
      margin: 2px auto 0;
      opacity: 0; transform: scale(0.4);
      transition: opacity 0.3s ease, transform 0.3s ease;
    }
    .claw-crane.claw-caught .claw-grabbed-disc { opacity: 1; transform: scale(1); }

    /* コントロール無効 */
    .cabinet-controls.ctrl-disabled .ctrl-side,
    .cabinet-controls.ctrl-disabled .ctrl-stop { opacity: 0.32; pointer-events: none; }

    /* ======== 散らかったレコード ======== */
    .records-pile {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 4;
    }

    .s-disc {
      position: absolute;
      border-radius: 50%;
    }

    /* グルーヴ（溝） */
    .s-disc::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background:
        repeating-radial-gradient(circle,
          transparent 0,
          transparent 3.5px,
          rgba(0,0,0,0.18) 4px,
          rgba(255,255,255,0.05) 4.5px,
          transparent 5px
        );
      z-index: 1;
    }

    /* センターラベル＋スピンドル穴 */
    .s-disc::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background:
        /* スピンドル穴 */
        radial-gradient(circle, #030306 0% 4.5%, transparent 5%),
        /* ラベルリング */
        radial-gradient(circle,
          transparent 0% 20%,
          rgba(255,255,255,0.06) 20.5% 23%,
          transparent 23.5%
        ),
        /* ラベル面（少し明るめ） */
        radial-gradient(circle,
          rgba(255,255,255,0.06) 0% 19.5%,
          transparent 20%
        );
      z-index: 2;
      pointer-events: none;
    }

    .s-disc:nth-child(1) {
      width:82px; height:82px; bottom:16px; left:-10px; transform:rotate(-22deg);
      background: radial-gradient(circle, #0d0d14 0% 10%, #ff4d7d 11% 21%, #1e0820 22% 100%);
      animation: disc-glow-a 2.1s ease-in-out infinite;
    }
    .s-disc:nth-child(2) {
      width:68px; height:68px; bottom:48px; left:36px; transform:rotate(14deg);
      background: radial-gradient(circle, #0d0d14 0% 10%, #78efff 11% 21%, #081e20 22% 100%);
      animation: disc-glow-b 2.7s ease-in-out infinite 0.4s;
    }
    .s-disc:nth-child(3) {
      width:78px; height:78px; bottom:10px; left:82px; transform:rotate(-10deg);
      background: radial-gradient(circle, #0d0d14 0% 10%, #ffe96b 11% 21%, #201c08 22% 100%);
      animation: disc-glow-c 1.9s ease-in-out infinite 0.9s;
    }
    .s-disc:nth-child(4) {
      width:72px; height:72px; bottom:42px; left:130px; transform:rotate(28deg);
      background: radial-gradient(circle, #0d0d14 0% 10%, #8f72ff 11% 21%, #14082e 22% 100%);
      animation: disc-glow-d 2.4s ease-in-out infinite 0.2s;
    }
    .s-disc:nth-child(5) {
      width:76px; height:76px; bottom:12px; left:168px; transform:rotate(-16deg);
      background: radial-gradient(circle, #0d0d14 0% 10%, #ff4d7d 11% 21%, #1e0820 22% 100%);
      animation: disc-glow-a 2.2s ease-in-out infinite 1.1s;
    }
    .s-disc:nth-child(6) {
      width:66px; height:66px; bottom:46px; left:216px; transform:rotate(10deg);
      background: radial-gradient(circle, #0d0d14 0% 10%, #78efff 11% 21%, #081e20 22% 100%);
      animation: disc-glow-b 2.6s ease-in-out infinite 0.6s;
    }
    .s-disc:nth-child(7) {
      width:80px; height:80px; bottom:8px;  left:254px; transform:rotate(-24deg);
      background: radial-gradient(circle, #0d0d14 0% 10%, #ffe96b 11% 21%, #201c08 22% 100%);
      animation: disc-glow-c 2.0s ease-in-out infinite 1.3s;
    }
    .s-disc:nth-child(8) {
      width:74px; height:74px; bottom:30px; right:-12px; transform:rotate(18deg);
      background: radial-gradient(circle, #0d0d14 0% 10%, #8f72ff 11% 21%, #14082e 22% 100%);
      animation: disc-glow-d 2.3s ease-in-out infinite 0.7s;
    }

    /* ======== 筐体ラッパー（奥行き演出） ======== */

    .cabinet-wrap {
      position: relative;
      /* 奥行きのある影 — 左右＋下に「壁」を出す */
      filter:
        drop-shadow(-10px 10px 0px #3a0018)
        drop-shadow(10px 10px 0px #3a0018)
        drop-shadow(0px 20px 0px #22000e)
        drop-shadow(0 0 40px rgba(255,77,125,0.4))
        drop-shadow(0 0 80px rgba(143,114,255,0.2));
    }

    /* 筐体本体のハイライト強化 */
    .arcade-cabinet {
      border-radius: 18px 18px 12px 12px;
      overflow: hidden;
      border: 3px solid rgba(255,77,125,0.85);
      animation: cabinet-pulse 2.5s ease-in-out infinite;
      background: #080814;
      position: relative;
    }

    /* コントロールパネル（操作台）*/
    .cabinet-controls {
      display: grid;
      grid-template-columns: 1fr 1.6fr 1fr;
      gap: 10px;
      padding: 16px 16px 18px;
      background:
        linear-gradient(175deg,
          #1a1030 0%,
          #120a24 40%,
          #0c0618 100%);
      border-top: 3px solid rgba(255,77,125,0.7);
      position: relative;
      overflow: hidden;
    }

    /* パネル表面の質感グリッド */
    .cabinet-controls::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        repeating-linear-gradient(90deg,  transparent 0 19px, rgba(255,255,255,0.02) 19px 20px),
        repeating-linear-gradient(0deg,   transparent 0 19px, rgba(255,255,255,0.02) 19px 20px);
      pointer-events: none;
    }

    /* パネル縁のLED照明演出 */
    .cabinet-controls::after {
      content: "";
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 3px;
      background: linear-gradient(90deg, transparent 5%, #ff003c 30%, #cc00ff 70%, transparent 95%);
      opacity: 0.7;
      filter: blur(1px);
    }

    .ctrl-side {
      position: relative;
      padding: 22px 0;
      border-radius: 14px;
      background: linear-gradient(160deg, #24224a 0%, #14122e 60%, #0e0c24 100%);
      color: #78efff;
      font-size: 22px;
      font-weight: 900;
      border: 1px solid rgba(120,239,255,0.4);
      box-shadow:
        0 0 18px rgba(120,239,255,0.25),
        inset 0 2px 0 rgba(255,255,255,0.12),
        inset 0 -2px 0 rgba(0,0,0,0.4);
      cursor: pointer;
      z-index: 1;
    }

    .ctrl-side:active {
      transform: translateY(2px);
      box-shadow: 0 0 8px rgba(120,239,255,0.2), inset 0 2px 0 rgba(0,0,0,0.3);
    }

    .ctrl-stop {
      position: relative;
      padding: 22px 0;
      border-radius: 14px;
      border: none;
      background: linear-gradient(160deg, #ff2060 0%, #c400ff 100%);
      color: #fff;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: 0.12em;
      box-shadow:
        0 0 36px rgba(255,0,60,0.65),
        0 0 70px rgba(204,0,255,0.35),
        inset 0 2px 0 rgba(255,255,255,0.25),
        inset 0 -2px 0 rgba(0,0,0,0.3);
      cursor: pointer;
      z-index: 1;
    }

    .ctrl-stop:active {
      transform: translateY(2px);
      box-shadow: 0 0 14px rgba(255,0,60,0.4), inset 0 2px 0 rgba(0,0,0,0.3);
    }

    /* ======== ゲーム結果（プレイフィールドオーバーレイ） ======== */

    .game-result {
      position: absolute;
      inset: 0;
      z-index: 20;
      display: none;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 20px;
      background: rgba(4, 2, 14, 0.93);
    }
    .game-result.result-visible { display: flex; }

    @keyframes result-pop {
      from { opacity: 0; transform: scale(0.84); }
      to   { opacity: 1; transform: scale(1); }
    }

    .result-inner {
      width: 100%;
      animation: result-pop 0.5s cubic-bezier(0.34,1.56,0.64,1);
    }

    /* --- 成功 --- */
    .result-success { display: none; }
    .result-success.result-show { display: block; }

    .result-eyebrow {
      font-size: 10px;
      font-weight: 900;
      letter-spacing: 0.28em;
      color: #ffe96b;
      text-align: center;
      margin-bottom: 14px;
      text-shadow: 0 0 14px rgba(255,233,107,0.9);
    }

    .result-card {
      display: grid;
      grid-template-columns: 88px 1fr;
      gap: 14px;
      align-items: center;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,77,125,0.4);
      border-radius: 16px;
      padding: 12px;
      box-shadow: 0 0 28px rgba(255,77,125,0.2);
    }

    .result-jacket {
      width: 88px; height: 88px;
      border-radius: 10px;
      background: linear-gradient(145deg, var(--hot), var(--violet));
      box-shadow: 0 0 28px rgba(255,77,125,0.7), 0 6px 20px rgba(0,0,0,0.5);
      overflow: hidden; flex-shrink: 0;
    }
    .result-jacket img { width: 100%; height: 100%; object-fit: cover; }

    .result-info small {
      display: block;
      font-size: 8px; font-weight: 900; letter-spacing: 0.18em;
      color: #78efff;
      margin-bottom: 4px;
      text-shadow: 0 0 8px rgba(120,239,255,0.7);
    }
    .result-info h3 {
      font-size: 20px; font-weight: 900; letter-spacing: -0.02em;
      color: #fff; margin: 0 0 3px; line-height: 1.2;
    }
    .result-info p { font-size: 12px; color: rgba(255,255,255,0.82); margin: 0; }

    .result-actions { display: flex; flex-direction: column; gap: 9px; margin-top: 14px; }

    .result-listen-btn {
      display: block; padding: 16px;
      border-radius: 12px;
      background: linear-gradient(135deg, #ff003c, #cc00ff);
      color: #fff; font-size: 15px; font-weight: 900;
      text-align: center; text-decoration: none; letter-spacing: 0.04em;
      box-shadow: 0 0 36px rgba(255,0,60,0.55), 0 0 70px rgba(204,0,255,0.3);
    }

    .result-retry-btn {
      display: block; width: 100%; box-sizing: border-box;
      padding: 13px; border-radius: 10px;
      border: 1px solid rgba(120,239,255,0.35);
      background: rgba(120,239,255,0.06);
      color: rgba(120,239,255,0.9);
      font-size: 13px; font-weight: 700;
      text-align: center; cursor: pointer; letter-spacing: 0.06em;
    }

    /* --- 失敗 --- */
    .result-fail { display: none; text-align: center; }
    .result-fail.result-show { display: block; }

    .result-fail-icon {
      font-size: 56px; display: block; margin-bottom: 8px;
      filter: drop-shadow(0 0 14px rgba(255,77,125,0.5));
    }
    .result-fail-msg { font-size: 18px; font-weight: 900; color: #fff; margin-bottom: 4px; }
    .result-fail-sub { font-size: 12px; color: rgba(255,255,255,0.82); margin-bottom: 22px; }


    /* ====================================================
       05. TIME TREE（深夜ブルー・木のタイムライン）
       ==================================================== */
    /* オーロラ回転 */
    @keyframes aurora-rotate {
      from { transform: translate(-50%, -50%) rotate(0deg); }
      to   { transform: translate(-50%, -50%) rotate(360deg); }
    }

    /* 星の瞬き */
    @keyframes star-twinkle {
      0%,100% { opacity: 0;   transform: scale(0.4); }
      50%     { opacity: 0.7; transform: scale(1);   }
    }

    .time-section {
      background: linear-gradient(180deg, #06060f, #030309);
      padding: 0 0 84px;
      overflow: hidden;
      position: relative;
    }

    /* オーロラ 第1層（時計回り） */
    .time-section::before {
      content: "";
      position: absolute;
      left: 50%; top: 42%;
      width: 220%; aspect-ratio: 1;
      transform: translate(-50%, -50%) rotate(0deg);
      background: conic-gradient(from 0deg,
        transparent       0%,
        rgba(255,165,0,.12) 4%,
        transparent      14%,
        rgba(255,77,125,.10) 26%,
        transparent      36%,
        rgba(123,47,247,.12) 52%,
        transparent      62%,
        rgba(0,82,212,.10) 76%,
        transparent      86%,
        rgba(0,239,255,.08) 93%,
        transparent      100%
      );
      filter: blur(64px);
      animation: aurora-rotate 22s linear infinite;
      pointer-events: none;
    }

    /* オーロラ 第2層（反時計回り） */
    .time-section::after {
      content: "";
      position: absolute;
      left: 50%; top: 65%;
      width: 160%; aspect-ratio: 1;
      transform: translate(-50%, -50%) rotate(180deg);
      background: conic-gradient(from 60deg,
        transparent      0%,
        rgba(0,239,255,.09) 8%,
        transparent      18%,
        rgba(123,47,247,.11) 36%,
        transparent      46%,
        rgba(255,77,125,.09) 62%,
        transparent      72%
      );
      filter: blur(56px);
      animation: aurora-rotate 32s linear infinite reverse;
      pointer-events: none;
    }

    /* 星の流れ（横スライド） */
    @keyframes star-drift {
      0%   { opacity: 0;   transform: translateX(0) scale(0.4); }
      20%  { opacity: 0.9; }
      80%  { opacity: 0.7; }
      100% { opacity: 0;   transform: translateX(60px) scale(0.8); }
    }

    /* 大きい十字キラキラ */
    @keyframes sparkle-spin {
      0%   { opacity: 0; transform: scale(0.2) rotate(0deg); }
      30%  { opacity: 1; transform: scale(1)   rotate(45deg); }
      70%  { opacity: 0.8; transform: scale(1.1) rotate(90deg); }
      100% { opacity: 0; transform: scale(0.3) rotate(135deg); }
    }

    /* 小さい丸い星 */
    .time-star {
      position: absolute;
      border-radius: 50%;
      opacity: 0;
      pointer-events: none;
      z-index: 0;
      animation: star-twinkle ease-in-out infinite;
    }

    /* 流れ星 */
    .time-star.drift {
      animation-name: star-drift;
      animation-timing-function: ease-out;
      border-radius: 50%;
    }

    /* 十字キラキラ */
    .time-star.sparkle {
      border-radius: 0;
      background: transparent !important;
      animation-name: sparkle-spin;
    }
    .time-star.sparkle::before,
    .time-star.sparkle::after {
      content: "";
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      border-radius: 99px;
      background: inherit;
      filter: inherit;
    }
    .time-star.sparkle::before { width: 100%; height: 28%; }
    .time-star.sparkle::after  { width: 28%; height: 100%; }

    .time-section .eyebrow {
      color: var(--yellow);
      position: relative;
    }

    /* ビジュアルバナー */
    .time-visual {
      position: relative;
      height: 230px;
      overflow: hidden;
    }
    .time-visual img {
      width: 100%; height: 100%;
      object-fit: cover;
      object-position: center 35%;
      filter: brightness(0.9) saturate(1.2);
    }
    .time-visual::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(to bottom,
        rgba(6, 6, 15, 0.1) 0%,
        rgba(6, 6, 15, 0.55) 55%,
        rgba(6, 6, 15, 1.0) 100%);
    }

    .time-intro {
      padding: 0 22px;
      margin-top: -60px;
      position: relative;
      z-index: 1;
    }

    /* ドットのパルスアニメーション */
    @keyframes dot-pulse {
      0%,100% { box-shadow: 0 0 0 0 rgba(var(--dc), 0.7), 0 0 14px rgba(var(--dc), 0.5); }
      60%     { box-shadow: 0 0 0 10px rgba(var(--dc), 0), 0 0 22px rgba(var(--dc), 0.8); }
    }

    /* ツリーコンテナ */
    .tree-container {
      position: relative;
      margin-top: 36px;
      padding: 0 22px 10px;
    }

    /* ツリー背景グロー */
    .tree-container::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 80% 40% at 50% 20%, rgba(255,180,0,0.06) 0%, transparent 60%),
        radial-gradient(ellipse 70% 30% at 50% 75%, rgba(0,82,212,0.08) 0%, transparent 60%);
      pointer-events: none;
      z-index: 0;
    }

    /* 中央の幹ライン */
    .tree-container::before {
      content: "";
      position: absolute;
      left: 50%;
      top: 12px; bottom: 12px;
      width: 4px;
      transform: translateX(-50%);
      background: linear-gradient(to bottom,
        #ffd200, #ff8c00, #ff4e50, #7b2ff7, #00efff);
      border-radius: 99px;
      box-shadow:
        0 0 16px rgba(255,180,0,0.4),
        0 0 40px rgba(255,77,125,0.25),
        0 0 70px rgba(143,114,255,0.2);
    }

    /* 各タイムノード */
    .time-node {
      position: relative;
      margin-bottom: 40px;
      display: flex;
      align-items: flex-start;
      z-index: 1;
    }

    /* 奇数：左 */
    .time-node:nth-child(odd) {
      justify-content: flex-start;
      padding-right: calc(50% + 22px);
    }

    /* 偶数：右 */
    .time-node:nth-child(even) {
      justify-content: flex-end;
      padding-left: calc(50% + 22px);
    }

    /* 横のブランチライン */
    .time-node-dot::before {
      content: "";
      position: absolute;
      top: 50%; height: 2px;
      transform: translateY(-50%);
      opacity: 0.5;
    }
    .time-node:nth-child(odd)  .time-node-dot::before { right: 100%;  width: 18px; background: inherit; }
    .time-node:nth-child(even) .time-node-dot::before { left: 100%; width: 18px; background: inherit; }

    /* 幹のドット */
    .time-node-dot {
      position: absolute;
      left: 50%;
      top: 18px;
      width: 22px; height: 22px;
      border-radius: 50%;
      transform: translateX(-50%);
      border: 3px solid #040410;
      z-index: 2;
    }

    .time-node:nth-child(1) .time-node-dot { --dc:255,210,0;  background:#ffd200; animation: dot-pulse 2.0s ease-in-out infinite; }
    .time-node:nth-child(2) .time-node-dot { --dc:255,140,0;  background:#ff8c00; animation: dot-pulse 2.3s ease-in-out infinite 0.3s; }
    .time-node:nth-child(3) .time-node-dot { --dc:255,78,80;  background:#ff4e50; animation: dot-pulse 1.9s ease-in-out infinite 0.6s; }
    .time-node:nth-child(4) .time-node-dot { --dc:143,114,255;background:#7b2ff7; animation: dot-pulse 2.2s ease-in-out infinite 0.9s; }
    .time-node:nth-child(5) .time-node-dot { --dc:0,239,255;  background:#00efff; animation: dot-pulse 2.1s ease-in-out infinite 1.2s; }

    /* タイムカード */
    .time-card {
      position: relative;
      border-radius: 22px;
      padding: 18px 16px 16px;
      width: 100%;
      max-width: 158px;
      display: block;
      text-align: left;
      color: #fff;
      cursor: pointer;
      border: none;
      overflow: hidden;
      transition: transform 0.18s ease, filter 0.18s ease;
    }

    /* カード内の光沢オーバーレイ */
    .time-card::before {
      content: "";
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 50%;
      background: linear-gradient(to bottom, rgba(255,255,255,0.14), transparent);
      border-radius: 22px 22px 0 0;
      pointer-events: none;
    }

    /* カード内のパターン */
    .time-card::after {
      content: "";
      position: absolute;
      inset: 0;
      background: repeating-linear-gradient(
        45deg,
        transparent 0, transparent 12px,
        rgba(255,255,255,0.03) 12px, rgba(255,255,255,0.03) 13px
      );
      pointer-events: none;
    }

    /* 時間帯ごとの背景 */
    .time-node:nth-child(1) .time-card {
      background: linear-gradient(145deg, #f7971e 0%, #ffd200 100%);
      box-shadow: 0 8px 28px rgba(255,165,0,0.45), 0 0 0 1px rgba(255,220,0,0.3);
    }
    .time-node:nth-child(2) .time-card {
      background: linear-gradient(145deg, #0099f7 0%, #00efff 100%);
      box-shadow: 0 8px 28px rgba(0,153,247,0.4), 0 0 0 1px rgba(0,239,255,0.3);
    }
    .time-node:nth-child(3) .time-card {
      background: linear-gradient(145deg, #f64f59 0%, #f7971e 100%);
      box-shadow: 0 8px 28px rgba(246,79,89,0.4), 0 0 0 1px rgba(247,151,30,0.3);
    }
    .time-node:nth-child(4) .time-card {
      background: linear-gradient(145deg, #7b2ff7 0%, #f107a3 100%);
      box-shadow: 0 8px 28px rgba(123,47,247,0.45), 0 0 0 1px rgba(241,7,163,0.3);
    }
    .time-node:nth-child(5) .time-card {
      background: linear-gradient(145deg, #0052d4 0%, #00efff 100%);
      box-shadow: 0 8px 28px rgba(0,82,212,0.45), 0 0 0 1px rgba(0,239,255,0.3);
    }

    .time-card:active { transform: scale(0.94); }

    .time-card.time-card-active {
      filter: brightness(1.15);
      transform: scale(1.03);
    }

    .time-emoji {
      font-size: 36px;
      display: block;
      margin-bottom: 8px;
      filter: drop-shadow(0 2px 6px rgba(0,0,0,0.3));
    }
    .time-label {
      font-size: 17px; font-weight: 900; letter-spacing: -0.02em;
      display: block;
      text-shadow: 0 1px 4px rgba(0,0,0,0.3);
    }
    .time-desc {
      font-size: 13px; line-height: 1.6;
      color: rgba(255,255,255,0.9);
      margin-top: 6px;
      text-shadow: 0 1px 4px rgba(0,0,0,0.3);
    }
    .time-cta {
      display: inline-block; margin-top: 12px;
      font-size: 11px; font-weight: 900; letter-spacing: 0.1em;
      color: #fff; opacity: 1;
      padding: 5px 12px;
      border: 1px solid rgba(255,255,255,0.6);
      border-radius: 20px;
    }

    /* ======== TIME TREE モーダル（ワクワク版） ======== */

    @keyframes modal-pop-in {
      0%   { opacity: 0; transform: scale(0.6) rotate(-4deg); }
      65%  { transform: scale(1.05) rotate(1deg); }
      85%  { transform: scale(0.98) rotate(-0.5deg); }
      100% { opacity: 1; transform: scale(1) rotate(0deg); }
    }

    @keyframes overlay-fade-in {
      from { opacity: 0; }
      to   { opacity: 1; }
    }

    @keyframes jacket-glow-spin {
      from { transform: rotate(0deg); }
      to   { transform: rotate(360deg); }
    }

    @keyframes badge-bounce {
      0%,100% { transform: translateY(0) scale(1); }
      40%     { transform: translateY(-6px) scale(1.08); }
    }

    @keyframes star-float {
      0%,100% { opacity: 0.6; transform: translateY(0)   scale(1);    }
      50%     { opacity: 1;   transform: translateY(-8px) scale(1.15); }
    }

    .time-modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.80);
      -webkit-backdrop-filter: blur(3px);
      backdrop-filter: blur(3px);
      z-index: 2000;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }
    .time-modal-overlay.time-modal-open {
      display: flex;
      animation: overlay-fade-in 0.2s ease;
    }

    .time-modal {
      position: relative;
      width: 100%;
      max-width: 340px;
      background: linear-gradient(160deg, #12082e 0%, #08061a 60%, #120828 100%);
      border: 2px solid rgba(255, 233, 107, 0.35);
      border-radius: 28px;
      overflow: visible;
      text-align: center;
      padding: 44px 24px 28px;
      box-shadow:
        0 0 0 1px rgba(255,233,107,0.12),
        0 0 60px rgba(143,114,255,0.3),
        0 0 120px rgba(255,77,125,0.15),
        0 30px 60px rgba(0,0,0,0.7);
      animation: modal-pop-in 0.55s cubic-bezier(0.34, 1.2, 0.64, 1);
    }

    /* 閉じるボタン */
    .time-modal-close {
      position: absolute;
      top: -14px; right: -14px;
      width: 36px; height: 36px;
      border-radius: 50%;
      background: linear-gradient(135deg, #1e1e3a, #2a1a4a);
      border: 2px solid rgba(255,255,255,0.2);
      color: rgba(255,255,255,0.85);
      font-size: 14px;
      cursor: pointer;
      z-index: 10;
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 4px 14px rgba(0,0,0,0.5);
    }

    /* 角の星デコ */
    .time-modal::before {
      content: "✦";
      position: absolute;
      top: -12px; left: 22px;
      font-size: 20px;
      color: var(--yellow);
      text-shadow: 0 0 12px rgba(255,233,107,0.9);
      animation: star-float 2.2s ease-in-out infinite;
    }
    .time-modal::after {
      content: "✦";
      position: absolute;
      top: -10px; right: 22px;
      font-size: 14px;
      color: var(--violet);
      text-shadow: 0 0 10px rgba(143,114,255,0.9);
      animation: star-float 1.8s ease-in-out infinite 0.5s;
    }

    /* ラベル */
    .time-modal-label-wrap { margin-bottom: 20px; }
    .time-modal-label {
      display: inline-block;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: 0.26em;
      color: var(--yellow);
      text-shadow: 0 0 12px rgba(255,233,107,0.8);
      padding: 5px 14px;
      border: 1px solid rgba(255,233,107,0.3);
      border-radius: 20px;
      background: rgba(255,233,107,0.06);
      animation: badge-bounce 2.4s ease-in-out infinite;
    }

    /* ジャケット（回転グロー付き） */
    .time-modal-jacket-wrap {
      position: relative;
      width: 140px; height: 140px;
      margin: 0 auto 20px;
    }

    /* 回転するグローリング */
    .time-modal-jacket-wrap::before {
      content: "";
      position: absolute;
      inset: -8px;
      border-radius: 50%;
      background: conic-gradient(
        var(--yellow), var(--hot), var(--violet), var(--cyan), var(--yellow)
      );

      filter: blur(4px);
      opacity: 0.75;
    }

    .time-modal-jacket {
      position: relative;
      width: 140px; height: 140px;
      border-radius: 20px;
      overflow: hidden;
      background: linear-gradient(145deg, var(--hot), var(--violet));
      box-shadow: 0 0 30px rgba(255,77,125,0.6), 0 12px 30px rgba(0,0,0,0.6);
      z-index: 1;
    }
    .time-modal-jacket img { width: 100%; height: 100%; object-fit: cover; }

    /* 曲情報 */
    .time-modal-info {
      margin-bottom: 20px;
    }
    .time-modal-info small {
      display: block;
      font-size: 8px; font-weight: 900; letter-spacing: 0.2em;
      color: rgba(255,255,255,0.75);
      margin-bottom: 6px;
    }
    .time-modal-info h3 {
      font-size: 26px; font-weight: 900; letter-spacing: -0.02em;
      background: linear-gradient(135deg, #fff 0%, #e0b0ff 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      margin: 0 0 4px; line-height: 1.15;
    }
    .time-modal-info p { font-size: 13px; color: rgba(255,255,255,0.82); margin: 0; }

    .time-modal-listen {
      display: block;
      padding: 16px;
      border-radius: 14px;
      background: linear-gradient(135deg, #ff003c, #cc00ff);
      color: #fff; font-size: 15px; font-weight: 900;
      text-align: center; text-decoration: none; letter-spacing: 0.04em;
      box-shadow: 0 0 30px rgba(255,0,60,0.5), 0 0 60px rgba(204,0,255,0.3);
    }

    /* モーダル内のvisual画像（不使用に） */
    .time-modal-visual { display: none; }

    /* ====================================================
       06. SCENE（横スクロール・映画カード）
       ==================================================== */
    .scene-section {
      background: #0c0a08;
      padding: 72px 0 84px;
    }

    .scene-section .eyebrow { color: var(--orange); }

    .scene-intro {
      padding: 0 22px;
    }

    .scene-scroll {
      display: flex;
      gap: 14px;
      overflow-x: auto;
      padding: 30px 22px 8px;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }

    .scene-scroll::-webkit-scrollbar { display: none; }

    .scene-card {
      min-width: 224px;
      height: 300px;
      border-radius: 26px;
      padding: 22px;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      color: #fff;
      position: relative;
      overflow: hidden;
      flex-shrink: 0;
      transition: transform 0.18s ease;
    }

    .scene-card:active { transform: scale(0.97); }

    .scene-card::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(0,0,0,0.88), rgba(0,0,0,0.08) 55%, transparent);
    }

    .scene-content {
      position: relative;
      z-index: 2;
    }

    .scene-icon  { display: none; }
    .scene-title { font-size: 22px; font-weight: 900; letter-spacing: -0.02em; display: block; }
    .scene-desc  { font-size: 11px; color: rgba(255,255,255,0.88); margin-top: 6px; line-height: 1.5; display: block; text-shadow: 0 1px 6px rgba(0,0,0,0.8); }

    /* シーン背景 */
    .sc-commute  { background: linear-gradient(145deg, #1a3a5a, #08182a); }
    .sc-afterwork{ background: linear-gradient(145deg, #6a3a28, #2a1015); }
    .sc-rain     { background: linear-gradient(145deg, #283a5a, #0c1425); }
    .sc-night    { background: linear-gradient(145deg, #181828, #080812); }
    .sc-drive    { background: linear-gradient(145deg, #2a1835, #100815); }
    .sc-morning  { background: linear-gradient(145deg, #4a3018, #22140a); }

    /* ======== SCENE PICK モーダル ======== */

    .scene-modal-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.80);
      -webkit-backdrop-filter: blur(3px);
      backdrop-filter: blur(3px);
      z-index: 2000;
      align-items: center;
      justify-content: center;
      animation: overlay-fade-in 0.25s ease forwards;
    }

    .scene-modal-overlay.scene-modal-open {
      display: flex;
    }

    .scene-modal {
      position: relative;
      width: min(340px, 90vw);
      background: linear-gradient(160deg, #1a0e04 0%, #0c0a08 50%, #1a1004 100%);
      border: 1px solid rgba(255,140,0,0.35);
      border-radius: 28px;
      padding: 36px 28px 32px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
      box-shadow:
        0 0 0 1px rgba(255,165,0,0.1),
        0 0 40px rgba(255,120,0,0.25),
        0 0 80px rgba(255,80,50,0.12),
        0 32px 64px rgba(0,0,0,0.7);
      animation: modal-pop-in 0.5s cubic-bezier(0.34,1.56,0.64,1) forwards;
      overflow: hidden;
    }

    /* 装飾スター */
    .scene-modal::before {
      content: "✦";
      position: absolute;
      top: 14px; left: 20px;
      font-size: 11px;
      color: rgba(255,165,0,0.5);
      animation: star-float 3s ease-in-out infinite;
    }
    .scene-modal::after {
      content: "✦";
      position: absolute;
      bottom: 18px; right: 22px;
      font-size: 9px;
      color: rgba(255,100,50,0.45);
      animation: star-float 4s ease-in-out infinite reverse;
    }

    .scene-modal-close {
      position: absolute;
      top: 12px; right: 14px;
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.15);
      color: #fff;
      border-radius: 50%;
      width: 30px; height: 30px;
      display: flex; align-items: center; justify-content: center;
      font-size: 12px;
      cursor: pointer;
      z-index: 2;
    }

    .scene-modal-label {
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.1em;
      color: #fff;
      background: linear-gradient(90deg, rgba(255,140,0,0.7), rgba(255,80,50,0.7));
      border: 1px solid rgba(255,165,0,0.4);
      border-radius: 99px;
      padding: 5px 16px;
      animation: badge-bounce 2.2s ease-in-out infinite;
    }

    .scene-modal-jacket-wrap {
      position: relative;
      width: 130px; height: 130px;
      display: flex; align-items: center; justify-content: center;
    }

    .scene-modal-jacket-wrap::before {
      content: "";
      position: absolute;
      inset: -8px;
      border-radius: 50%;
      background: conic-gradient(
        #ff8c00, #ff4e50, #ffd200, #ff8c00
      );

      filter: blur(6px);
      opacity: 0.75;
    }

    .scene-modal-jacket {
      width: 130px; height: 130px;
      border-radius: 18px;
      overflow: hidden;
      position: relative;
      z-index: 1;
      box-shadow: 0 8px 24px rgba(0,0,0,0.6);
    }

    .scene-modal-jacket img {
      width: 100%; height: 100%;
      object-fit: cover;
    }

    .scene-modal-info {
      text-align: center;
    }

    .scene-modal-scene {
      font-size: 10px;
      letter-spacing: 0.12em;
      color: rgba(255,165,0,0.7);
      margin-bottom: 4px;
    }

    .scene-modal-info h3 {
      font-size: 20px;
      font-weight: 900;
      letter-spacing: -0.02em;
      background: linear-gradient(90deg, #ff8c00, #ffd200, #ff4e50);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      line-height: 1.2;
    }

    .scene-modal-artist {
      font-size: 12px;
      color: rgba(255,255,255,0.82);
      margin-top: 4px;
    }

    .scene-modal-listen {
      display: block;
      width: 100%;
      padding: 14px;
      text-align: center;
      background: linear-gradient(90deg, #ff8c00, #ff4e50);
      border-radius: 14px;
      color: #fff;
      font-weight: 900;
      font-size: 14px;
      letter-spacing: 0.05em;
      box-shadow: 0 0 24px rgba(255,120,0,0.5), 0 4px 16px rgba(0,0,0,0.4);
      text-decoration: none;
      transition: filter 0.2s ease;
    }

    .scene-modal-listen:active { filter: brightness(1.2); }

    /* ====================================================
       07. MOOD PICK（全面刷新）
       ==================================================== */

    @keyframes mood-glow-pulse {
      0%,100% { opacity: 0.45; transform: translateX(-50%) scale(1);   }
      50%     { opacity: 0.75; transform: translateX(-50%) scale(1.15); }
    }

    .mood-section {
      background: #06060e;
      padding: 0 0 84px;
      overflow: hidden;
      position: relative;
    }

    /* 挿絵バナー */
    .mood-visual {
      position: relative;
      height: 240px;
      overflow: hidden;
    }
    .mood-visual img {
      width: 100%; height: 100%;
      object-fit: cover;
      object-position: center 40%;
      filter: brightness(1.0) saturate(1.1);
    }
    .mood-visual::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(to bottom,
        rgba(6,6,14,0.0)  0%,
        rgba(6,6,14,0.3) 50%,
        rgba(6,6,14,1.0)  100%);
    }

    .mood-intro {
      padding: 0 22px;
      margin-top: -64px;
      position: relative;
      z-index: 1;
    }

    .mood-section .eyebrow { color: var(--hot); }

    /* 2カラムグリッド */
    .mood-grid {
      margin-top: 28px;
      padding: 0 16px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }

    /* カード共通（ボタン型） */
    .mood-card {
      position: relative;
      border-radius: 16px;
      padding: 0 16px;
      height: 72px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      overflow: hidden;
      transition: transform 0.13s ease, box-shadow 0.13s ease;
      color: #fff;
      text-align: center;
      border: none;
    }

    /* 上部グロスハイライト（エントリーカードには適用しない） */
    .mood-grid .mood-card::before {
      content: "";
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 50%;
      background: linear-gradient(to bottom, rgba(255,255,255,0.18), rgba(255,255,255,0));
      border-radius: 16px 16px 0 0;
      pointer-events: none;
      z-index: 2;
    }

    /* 底面シャドウ（奥行き感） */
    .mood-grid .mood-card::after {
      content: "";
      position: absolute;
      bottom: 0; left: 4px; right: 4px;
      height: 4px;
      border-radius: 0 0 16px 16px;
      background: rgba(0,0,0,0.35);
      filter: blur(4px);
      pointer-events: none;
      z-index: 0;
    }

    .mood-card:active {
      transform: scale(0.95) translateY(2px);
      filter: brightness(0.92);
    }

    /* ムードごとのカラー */
    .mc-happy {
      background: linear-gradient(160deg, #ffd200, #ff8c00);
      box-shadow: 0 6px 0 #a05800, 0 10px 20px rgba(255,165,0,0.45);
      color: #2a1600;
    }
    .mc-calm {
      background: linear-gradient(160deg, #00c6fb, #0083b0);
      box-shadow: 0 6px 0 #004f70, 0 10px 20px rgba(0,150,220,0.45);
    }
    .mc-sad {
      background: linear-gradient(160deg, #8e54e9, #4776e6);
      box-shadow: 0 6px 0 #2a3a90, 0 10px 20px rgba(100,80,220,0.45);
    }
    .mc-hype {
      background: linear-gradient(160deg, #f107a3, #ff4e50);
      box-shadow: 0 6px 0 #900060, 0 10px 20px rgba(220,0,100,0.45);
    }
    .mc-blank {
      background: linear-gradient(160deg, #718096, #4a5568);
      box-shadow: 0 6px 0 #2d3748, 0 10px 20px rgba(80,100,120,0.4);
    }
    .mc-deep {
      background: linear-gradient(160deg, #7b2ff7, #360033);
      box-shadow: 0 6px 0 #3a006a, 0 10px 20px rgba(100,0,200,0.45);
    }

    .mc-happy:active { box-shadow: 0 2px 0 #a05800, 0 4px 10px rgba(255,165,0,0.3); }
    .mc-calm:active  { box-shadow: 0 2px 0 #004f70, 0 4px 10px rgba(0,150,220,0.3); }
    .mc-sad:active   { box-shadow: 0 2px 0 #2a3a90, 0 4px 10px rgba(100,80,220,0.3); }
    .mc-hype:active  { box-shadow: 0 2px 0 #900060, 0 4px 10px rgba(220,0,100,0.3); }
    .mc-blank:active { box-shadow: 0 2px 0 #2d3748, 0 4px 10px rgba(80,100,120,0.3); }
    .mc-deep:active  { box-shadow: 0 2px 0 #3a006a, 0 4px 10px rgba(100,0,200,0.3); }

    /* 絵文字は非表示 */
    .mood-card-emoji { display: none; }

    .mood-card-label {
      font-size: 14px;
      font-weight: 900;
      letter-spacing: 0.01em;
      line-height: 1.3;
      position: relative;
      z-index: 1;
      text-shadow: 0 1px 4px rgba(0,0,0,0.25);
    }

    .mc-happy .mood-card-label { text-shadow: 0 1px 4px rgba(255,200,0,0.2); }

    /* ======== MOOD モーダル ======== */
    .mood-modal-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.82);
      -webkit-backdrop-filter: blur(3px);
      backdrop-filter: blur(3px);
      z-index: 2000;
      align-items: center;
      justify-content: center;
      animation: overlay-fade-in 0.25s ease forwards;
    }

    .mood-modal-overlay.mood-modal-open { display: flex; }

    .mood-modal {
      position: relative;
      width: min(340px, 90vw);
      background: linear-gradient(160deg, #0d0818 0%, #080810 50%, #100814 100%);
      border: 1px solid rgba(241,7,163,0.3);
      border-radius: 28px;
      padding: 36px 28px 32px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
      box-shadow:
        0 0 0 1px rgba(143,114,255,0.1),
        0 0 40px rgba(241,7,163,0.2),
        0 0 80px rgba(123,47,247,0.12),
        0 32px 64px rgba(0,0,0,0.7);
      animation: modal-pop-in 0.5s cubic-bezier(0.34,1.56,0.64,1) forwards;
      overflow: hidden;
    }

    .mood-modal::before {
      content: "✦";
      position: absolute;
      top: 14px; left: 20px;
      font-size: 11px;
      color: rgba(241,7,163,0.5);
      animation: star-float 3s ease-in-out infinite;
    }
    .mood-modal::after {
      content: "✦";
      position: absolute;
      bottom: 18px; right: 22px;
      font-size: 9px;
      color: rgba(143,114,255,0.45);
      animation: star-float 4s ease-in-out infinite reverse;
    }

    .mood-modal-close {
      position: absolute;
      top: 12px; right: 14px;
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.15);
      color: #fff;
      border-radius: 50%;
      width: 30px; height: 30px;
      display: flex; align-items: center; justify-content: center;
      font-size: 12px;
      cursor: pointer;
      z-index: 2;
    }

    .mood-modal-label {
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.1em;
      color: #fff;
      background: linear-gradient(90deg, rgba(123,47,247,0.7), rgba(241,7,163,0.7));
      border: 1px solid rgba(143,114,255,0.4);
      border-radius: 99px;
      padding: 5px 16px;
      animation: badge-bounce 2.2s ease-in-out infinite;
    }

    .mood-modal-jacket-wrap {
      position: relative;
      width: 130px; height: 130px;
      display: flex; align-items: center; justify-content: center;
    }

    .mood-modal-jacket-wrap::before {
      content: "";
      position: absolute;
      inset: -8px;
      border-radius: 50%;
      background: conic-gradient(#f107a3, #7b2ff7, #00efff, #f107a3);

      filter: blur(6px);
      opacity: 0.75;
    }

    .mood-modal-jacket {
      width: 130px; height: 130px;
      border-radius: 18px;
      overflow: hidden;
      position: relative;
      z-index: 1;
      box-shadow: 0 8px 24px rgba(0,0,0,0.6);
    }

    .mood-modal-jacket img {
      width: 100%; height: 100%;
      object-fit: cover;
    }

    .mood-modal-info { text-align: center; }

    .mood-modal-mood {
      font-size: 10px;
      letter-spacing: 0.12em;
      color: rgba(241,7,163,0.75);
      margin-bottom: 4px;
    }

    .mood-modal-info h3 {
      font-size: 20px;
      font-weight: 900;
      letter-spacing: -0.02em;
      background: linear-gradient(90deg, #f107a3, #b97fff, #00efff);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      line-height: 1.2;
    }

    .mood-modal-artist {
      font-size: 12px;
      color: rgba(255,255,255,0.82);
      margin-top: 4px;
    }

    .mood-modal-listen {
      display: block;
      width: 100%;
      padding: 14px;
      text-align: center;
      background: linear-gradient(90deg, #7b2ff7, #f107a3);
      border-radius: 14px;
      color: #fff;
      font-weight: 900;
      font-size: 14px;
      letter-spacing: 0.05em;
      box-shadow: 0 0 24px rgba(241,7,163,0.45), 0 4px 16px rgba(0,0,0,0.4);
      text-decoration: none;
      transition: filter 0.2s ease;
    }

    .mood-modal-listen:active { filter: brightness(1.2); }


    /* ====================================================
       09. RANKING（リニューアル版）
       ==================================================== */

    @keyframes rank-hero-glow {
      0%,100% { box-shadow: 0 0 40px rgba(255,77,125,0.3), 0 0 80px rgba(143,114,255,0.15), 0 24px 48px rgba(0,0,0,0.6); }
      50%     { box-shadow: 0 0 60px rgba(255,77,125,0.5), 0 0 120px rgba(143,114,255,0.25), 0 24px 48px rgba(0,0,0,0.6); }
    }

    @keyframes rank-no-shimmer {
      0%   { -webkit-text-stroke-color: rgba(255,255,255,0.06); }
      50%  { -webkit-text-stroke-color: rgba(255,255,255,0.14); }
      100% { -webkit-text-stroke-color: rgba(255,255,255,0.06); }
    }

    .ranking-section {
      background: linear-gradient(180deg, #08060f, #04030a);
      padding: 72px 22px 84px;
      position: relative;
      overflow: hidden;
    }

    /* 背景グロー */
    .ranking-section::before {
      content: "";
      position: absolute;
      left: 50%; top: 30%;
      transform: translate(-50%, -50%);
      width: 160%; aspect-ratio: 1;
      background: radial-gradient(ellipse, rgba(255,77,125,0.08) 0%, rgba(143,114,255,0.05) 40%, transparent 70%);
      pointer-events: none;
    }

    .ranking-section .eyebrow { color: var(--hot); }

    /* #1 ヒーローカード */
    .rank-hero-card {
      border-radius: 28px;
      padding: 28px 28px 28px 28px;
      min-height: 220px;
      position: relative;
      overflow: hidden;
      background: linear-gradient(145deg, #2a0a40 0%, #1a0530 40%, #0a0318 100%);
      border: 1px solid rgba(255,77,125,0.3);
      color: #fff;
      margin-top: 28px;
      margin-bottom: 14px;
      animation: rank-hero-glow 4s ease-in-out infinite;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
    }

    /* 背景ライトビーム */
    .rank-hero-card::before {
      content: "";
      position: absolute;
      top: -40px; right: 80px;
      width: 180px; height: 300px;
      background: conic-gradient(from 200deg at 50% 0%, transparent 0%, rgba(255,77,125,0.12) 15%, transparent 30%);
      pointer-events: none;
    }

    /* 上部ハイライト */
    .rank-hero-card::after {
      content: "";
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255,77,125,0.6), rgba(143,114,255,0.4), transparent);
    }

    .rank-no {
      position: absolute;
      top: -10px; left: 20px;
      font-size: 130px;
      font-weight: 900;
      line-height: 1;
      letter-spacing: -0.06em;
      color: transparent;
      -webkit-text-stroke: 1px rgba(255,255,255,0.08);
      animation: rank-no-shimmer 4s ease-in-out infinite;
      pointer-events: none;
      user-select: none;
    }

    .rank-hero-jacket {
      position: absolute;
      top: 22px; right: 22px;
      width: 110px; height: 110px;
      border-radius: 18px;
      overflow: hidden;
      box-shadow:
        0 0 0 2px rgba(255,77,125,0.4),
        0 0 20px rgba(255,77,125,0.3),
        0 12px 32px rgba(0,0,0,0.6);
    }

    .rank-category-badge {
      display: inline-block;
      padding: 5px 14px;
      border-radius: 999px;
      background: linear-gradient(90deg, rgba(255,77,125,0.8), rgba(143,114,255,0.8));
      font-size: 9px;
      font-weight: 900;
      letter-spacing: 0.13em;
      margin-bottom: 10px;
      position: relative; z-index: 1;
    }

    .rank-hero-card h3 {
      font-size: 36px;
      letter-spacing: -0.04em;
      margin: 2px 0 4px;
      background: linear-gradient(90deg, #fff, rgba(255,255,255,0.7));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      position: relative; z-index: 1;
    }

    .rank-hero-card > p {
      font-size: 12px;
      color: rgba(255,255,255,0.82);
      position: relative; z-index: 1;
    }

    /* 2〜5位リスト */
    .rank-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .rank-item {
      display: grid;
      grid-template-columns: 44px 60px 1fr auto;
      gap: 14px;
      align-items: center;
      padding: 14px 16px;
      border-radius: 20px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.07);
      transition: background 0.2s ease;
    }

    .rank-item:active { background: rgba(255,255,255,0.08); }

    .rank-num {
      font-size: 22px;
      font-weight: 900;
      letter-spacing: -0.04em;
      text-align: center;
    }

    /* 順位ごとに色を変える */
    .rank-item:nth-child(1) .rank-num { color: #00efff; text-shadow: 0 0 10px rgba(0,239,255,0.5); }
    .rank-item:nth-child(2) .rank-num { color: #b97fff; text-shadow: 0 0 10px rgba(185,127,255,0.5); }
    .rank-item:nth-child(3) .rank-num { color: #ff8c00; text-shadow: 0 0 10px rgba(255,140,0,0.5); }
    .rank-item:nth-child(4) .rank-num { color: #ff4e50; text-shadow: 0 0 10px rgba(255,78,80,0.5); }

    .rank-cover {
      width: 60px; height: 60px;
      border-radius: 14px;
      overflow: hidden;
      flex-shrink: 0;
      box-shadow: 0 4px 16px rgba(0,0,0,0.5);
    }

    .rc-1 { background: linear-gradient(145deg, var(--cyan), #1a4060); }
    .rc-2 { background: linear-gradient(145deg, var(--violet), #1a1040); }
    .rc-3 { background: linear-gradient(145deg, var(--orange), #602010); }
    .rc-4 { background: linear-gradient(145deg, var(--hot), #601030); }

    .rank-meta strong { display: block; font-size: 14px; font-weight: 900; letter-spacing: -0.02em; color: #fff; }
    .rank-meta span   { font-size: 11px; color: rgba(255,255,255,0.78); margin-top: 2px; display: block; }

    .rank-label {
      font-size: 9px;
      font-weight: 900;
      color: rgba(255,255,255,0.72);
      letter-spacing: 0.06em;
      text-align: right;
      white-space: nowrap;
    }

    /* ゲスト向けロック表示 */
    .rank-locked {
      margin-top: 20px;
      padding: 20px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 16px;
      text-align: center;
    }

    .rank-locked p {
      font-size: 12px;
      color: rgba(255,255,255,0.65);
      margin-bottom: 14px;
      letter-spacing: 0.03em;
    }

    .rank-locked-btn {
      display: inline-block;
      padding: 11px 24px;
      background: linear-gradient(90deg, var(--hot), var(--violet));
      border-radius: 100px;
      color: #fff;
      font-size: 13px;
      font-weight: 700;
      text-decoration: none;
      letter-spacing: 0.04em;
      box-shadow: 0 0 16px rgba(255,77,125,0.35);
    }

    /* ====================================================
       10. FRESH DROPS（新着・サムネイル最適化）
       ==================================================== */
    .fresh-section {
      background: #060609;
      padding: 72px 22px 84px;
    }

    .fresh-section .eyebrow { color: var(--green); }

    /* 特集メイン：横並びで画像を固定サイズ表示 */
    .fresh-featured {
      margin-top: 28px;
      border-radius: 24px;
      padding: 22px;
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 20px;
      color: #fff;
      position: relative;
      overflow: hidden;
      background: linear-gradient(135deg, #0d1f10, #060c08);
      border: 1px solid rgba(39,200,80,0.2);
      box-shadow: 0 0 40px rgba(39,200,80,0.08), 0 16px 40px rgba(0,0,0,0.5);
      margin-bottom: 14px;
      text-decoration: none;
    }

    /* 左上のグロースポット */
    .fresh-featured::before {
      content: "";
      position: absolute;
      top: -40px; left: -20px;
      width: 160px; height: 160px;
      background: radial-gradient(circle, rgba(39,200,80,0.15), transparent 70%);
      pointer-events: none;
    }

    /* 上部ハイライトライン */
    .fresh-featured::after {
      content: "";
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 1px;
      background: linear-gradient(90deg, rgba(39,200,80,0.6), transparent 60%);
    }

    /* ジャケット：固定サイズで荒れない */
    .fresh-featured-jacket {
      width: 110px;
      height: 110px;
      border-radius: 16px;
      overflow: hidden;
      flex-shrink: 0;
      background: linear-gradient(145deg, #1a3a20, #0a1a10);
      box-shadow:
        0 0 0 1px rgba(39,200,80,0.25),
        0 8px 24px rgba(0,0,0,0.6);
    }

    .fresh-featured-jacket img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .fresh-featured-info {
      flex: 1;
      position: relative;
      z-index: 1;
    }

    .fresh-new-badge {
      display: inline-block;
      padding: 4px 12px;
      border-radius: 999px;
      background: var(--green);
      color: #000;
      font-size: 9px;
      font-weight: 900;
      letter-spacing: 0.16em;
      margin-bottom: 10px;
    }

    .fresh-featured h3 {
      font-size: 24px;
      font-weight: 900;
      letter-spacing: -0.03em;
      line-height: 1.2;
    }

    .fresh-featured p {
      font-size: 11px;
      color: rgba(255,255,255,0.82);
      margin-top: 6px;
      line-height: 1.5;
    }

    /* 新着：1カラム縦積み */
    .fresh-stack {
      display: flex;
      flex-direction: column;
    }

    .fresh-stack .fresh-featured {
      margin-top: 0;
      margin-bottom: 0;
    }
    .fresh-list {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .fresh-list-item {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 14px 16px;
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.10);
      border-radius: 16px;
      text-decoration: none;
      color: #fff;
      transition: background 0.2s;
    }

    .fresh-list-item:active {
      background: rgba(255,255,255,0.10);
    }

    .fresh-list-jacket {
      width: 72px;
      height: 72px;
      border-radius: 12px;
      overflow: hidden;
      flex-shrink: 0;
      background: #111;
    }

    .fresh-list-jacket img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .fresh-list-info {
      flex: 1;
      min-width: 0;
    }

    .fresh-list-title {
      display: block;
      font-size: 14px;
      font-weight: 900;
      letter-spacing: -0.01em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-top: 4px;
    }

    .fresh-list-artist {
      display: block;
      font-size: 11px;
      color: rgba(255,255,255,0.65);
      margin-top: 4px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .fresh-list-arrow {
      font-size: 16px;
      color: rgba(255,255,255,0.4);
      flex-shrink: 0;
    }

    /* ジャケットグラデーション（サムネなし時） */
    .fc-1 { background: linear-gradient(145deg, var(--hot), #601030); }
    .fc-2 { background: linear-gradient(145deg, var(--cyan), #184060); }
    .fc-3 { background: linear-gradient(145deg, var(--yellow), #804020); }

    /* ====================================================
       ジャケット画像共通（img タグ）
       PHP実装時は <img src="/pcs.php?w=140&p=..#{$item['thumbnail']}"> に差し替え
       ==================================================== */
    .result-jacket img,
    .random-jacket img,
    .rank-hero-jacket img,
    .rank-cover img,
    .fresh-cover img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    /* ====================================================
       11. GENRE（シンプルグリッド）
       ==================================================== */
    /* ====================================================
       11. GENRE（刷新版）
       ==================================================== */
    @keyframes genre-card-glow {
      0%,100% { opacity: 0.5; }
      50%     { opacity: 0.85; }
    }

    .genre-section {
      background: #060609;
      padding: 72px 22px 84px;
      position: relative;
      overflow: hidden;
    }

    /* 背景グロー */
    .genre-section::before {
      content: "";
      position: absolute;
      left: -20%; top: 20%;
      width: 140%; height: 60%;
      background: radial-gradient(ellipse at 30% 50%, rgba(255,78,80,0.06), transparent 55%),
                  radial-gradient(ellipse at 70% 50%, rgba(0,239,255,0.05), transparent 55%);
      pointer-events: none;
    }

    .genre-section .eyebrow { color: var(--cyan); }

    .genre-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-top: 28px;
    }

    /* 1番目（HIP HOP）と最後（CLASSIC）を全幅 */
    .genre-card:nth-child(1),
    .genre-card:nth-child(8) {
      grid-column: 1 / -1;
    }

    /* カード共通 */
    .genre-card {
      position: relative;
      border-radius: 20px;
      padding: 22px 20px 18px;
      min-height: 100px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      cursor: pointer;
      text-decoration: none;
      transition: transform 0.16s ease, filter 0.16s ease;
    }

    .genre-card:active { transform: scale(0.96); filter: brightness(1.1); }

    /* 上部ハイライト */
    .genre-card::before {
      content: "";
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 40%;
      background: linear-gradient(to bottom, rgba(255,255,255,0.1), transparent);
      border-radius: 20px 20px 0 0;
      pointer-events: none;
    }

    /* 背景ストライプパターン */
    .genre-card::after {
      content: "";
      position: absolute;
      inset: 0;
      background: repeating-linear-gradient(
        -55deg,
        transparent 0, transparent 18px,
        rgba(255,255,255,0.025) 18px, rgba(255,255,255,0.025) 19px
      );
      pointer-events: none;
    }

    /* ジャンル名 */
    .genre-name {
      font-size: 16px;
      font-weight: 900;
      letter-spacing: 0.06em;
      color: #fff;
      position: relative;
      z-index: 1;
      text-shadow: 0 2px 8px rgba(0,0,0,0.4);
    }

    /* 全幅カードは文字を大きく */
    .genre-card:nth-child(1) .genre-name,
    .genre-card:nth-child(8) .genre-name {
      font-size: 22px;
    }

    /* 矢印 */
    .genre-arrow {
      position: absolute;
      top: 18px; right: 18px;
      font-size: 13px;
      color: rgba(255,255,255,0.82);
      z-index: 1;
      transition: transform 0.2s ease;
    }

    .genre-card:active .genre-arrow { transform: translateX(4px); }

    /* ジャンル番号（装飾） */
    .genre-num {
      position: absolute;
      bottom: -6px; right: 12px;
      font-size: 64px;
      font-weight: 900;
      color: transparent;
      -webkit-text-stroke: 1px rgba(255,255,255,0.08);
      letter-spacing: -0.05em;
      line-height: 1;
      z-index: 0;
      user-select: none;
    }

    /* ジャンルごとの背景色 */
    .gc-hiphop     { background: linear-gradient(145deg, #c73a1c, #6a1a08);
                     box-shadow: 0 8px 28px rgba(199,58,28,0.4); }
    .gc-electronica{ background: linear-gradient(145deg, #005bea, #001a60);
                     box-shadow: 0 8px 28px rgba(0,91,234,0.4); }
    .gc-techno     { background: linear-gradient(145deg, #3a0070, #0d0020);
                     box-shadow: 0 8px 28px rgba(58,0,112,0.45); }
    .gc-house      { background: linear-gradient(145deg, #c0006a, #5a0030);
                     box-shadow: 0 8px 28px rgba(192,0,106,0.4); }
    .gc-rock       { background: linear-gradient(145deg, #8a2020, #2a0808);
                     box-shadow: 0 8px 28px rgba(138,32,32,0.45); }
    .gc-ambient    { background: linear-gradient(145deg, #0b6b5a, #022a22);
                     box-shadow: 0 8px 28px rgba(11,107,90,0.4); }
    .gc-easy       { background: linear-gradient(145deg, #b07a00, #5a3a00);
                     box-shadow: 0 8px 28px rgba(176,122,0,0.4); }
    .gc-classic    { background: linear-gradient(145deg, #1a3a8a, #080e2a);
                     box-shadow: 0 8px 28px rgba(26,58,138,0.4); }
    .gc-trance     { background: linear-gradient(145deg, #4b008a, #1a0040);
                     box-shadow: 0 8px 28px rgba(75,0,138,0.45); }
    .gc-blues      { background: linear-gradient(145deg, #0a3060, #020e20);
                     box-shadow: 0 8px 28px rgba(10,48,96,0.45); }

    /* ====================================================
       12. CTA（カード浮き上がり型）
       ==================================================== */

    @keyframes cta-btn-glow {
      0%,100% { box-shadow: 0 0 0 0 rgba(255,77,125,0.4), 0 10px 30px rgba(255,77,125,0.35); }
      50%     { box-shadow: 0 0 0 8px rgba(255,77,125,0), 0 10px 40px rgba(255,77,125,0.55); }
    }

    @keyframes cta-note-rise {
      0%   { transform: translateY(0) rotate(0deg);   opacity: 0; }
      12%  { opacity: 0.75; }
      88%  { opacity: 0.5; }
      100% { transform: translateY(-200px) rotate(20deg); opacity: 0; }
    }

    .cta-note {
      position: absolute;
      pointer-events: none;
      z-index: 10;
      opacity: 0;
      animation: cta-note-rise linear infinite;
    }

    .cta-section {
      background: #0c0a18;
      overflow: hidden;
      position: relative;
    }

    /* 上部：画像エリア */
    .cta-visual {
      position: relative;
      height: 260px;
      overflow: hidden;
    }

    .cta-visual img {
      width: 100%; height: 100%;
      object-fit: cover;
      object-position: center 30%;
      filter: brightness(0.95) saturate(1.1);
    }

    /* 下側だけフェード */
    .cta-visual::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(to bottom,
        transparent 40%,
        rgba(12,10,24,0.7) 80%,
        rgba(12,10,24,1.0) 100%);
    }

    /* 浮き上がりカード */
    .cta-card {
      position: relative;
      z-index: 2;
      margin-top: -36px;
      background: #0c0a18;
      border-radius: 28px 28px 0 0;
      padding: 36px 26px 72px;
    }

    /* カード上部アクセントライン */
    .cta-card::before {
      content: "";
      position: absolute;
      top: 0; left: 50%;
      transform: translateX(-50%);
      width: 48px; height: 4px;
      background: linear-gradient(90deg, #ff4d7d, #b97fff);
      border-radius: 0 0 4px 4px;
    }

    .cta-kicker {
      font-size: 9px;
      font-weight: 900;
      letter-spacing: 0.3em;
      color: rgba(255,255,255,0.82);
      margin-bottom: 16px;
      text-align: center;
    }

    .cta-headline {
      font-size: 36px;
      line-height: 1.15;
      letter-spacing: -0.03em;
      color: #fff;
      margin-bottom: 16px;
      text-align: center;
    }

    .cta-headline em {
      display: block;
      font-style: normal;
      background: linear-gradient(90deg, #ff6b9d, #c084fc);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .cta-desc {
      font-size: 13px;
      color: rgba(255,255,255,0.72);
      line-height: 1.9;
      margin-bottom: 32px;
      text-align: left;
    }

    /* 区切り */
    .cta-divider {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 28px;
    }
    .cta-divider::before,
    .cta-divider::after {
      content: "";
      flex: 1;
      height: 1px;
      background: rgba(255,255,255,0.1);
    }
    .cta-divider span {
      font-size: 10px;
      color: rgba(255,255,255,0.72);
      letter-spacing: 0.15em;
      white-space: nowrap;
    }

    /* メインCTAボタン */
    .cta-btn-wrap { margin-bottom: 16px; }

    .cta-main-btn {
      padding: 24px !important;
      font-size: 17px !important;
      border-radius: 18px !important;
      letter-spacing: 0.06em !important;
    }

    .cta-main-btn::before {
      border-radius: 16.5px !important;
    }

    .cta-main-btn .btn-eq {
      border-radius: 16.5px !important;
    }

    .cta-login-link {
      display: block;
      font-size: 12px;
      color: rgba(255,255,255,0.78);
      margin-bottom: 20px;
      text-decoration: none;
      text-align: center;
    }

    .cta-login-link span {
      color: #fff;
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    .cta-sub-note {
      font-size: 10px;
      color: rgba(255,255,255,0.72);
      letter-spacing: 0.08em;
      text-align: center;
      display: block;
    }

    /* ====================================================
       RANDOM MODAL
       ==================================================== */
    .random-modal-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.75);
      -webkit-backdrop-filter: blur(3px);
      backdrop-filter: blur(3px);
      z-index: 2000;
      align-items: center;
      justify-content: center;
    }
    .random-modal-overlay.random-modal-open {
      display: flex;
      animation: overlay-fade-in 0.22s ease forwards;
    }
    .random-modal-box {
      position: relative;
      width: calc(100% - 40px);
      max-width: 360px;
      background: linear-gradient(160deg, #1a0a2e 0%, #0d1a2e 100%);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 28px;
      padding: 36px 24px 28px;
      text-align: center;
      animation: modal-pop-in 0.38s cubic-bezier(0.34,1.56,0.64,1) forwards;
    }
    .random-modal-close {
      position: absolute;
      top: 14px; right: 14px;
      background: rgba(255,255,255,0.08);
      border: none;
      color: #fff;
      width: 30px; height: 30px;
      border-radius: 50%;
      cursor: pointer;
      font-size: 12px;
    }
    .random-modal-label {
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.15em;
      color: var(--yellow);
      margin-bottom: 20px;
    }
    .random-modal-jacket-wrap {
      width: 130px; height: 130px;
      margin: 0 auto 20px;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 0 30px rgba(255,233,107,0.3);

    }
    .random-modal-jacket {
      width: 100%; height: 100%;
      object-fit: cover;
    }
    .random-modal-info small {
      display: block;
      font-size: 8px; font-weight: 900; letter-spacing: 0.2em;
      color: rgba(255,255,255,0.75);
      margin-bottom: 6px;
    }
    .random-modal-info h3 {
      font-size: 22px; font-weight: 900; letter-spacing: -0.02em;
      color: #fff; margin: 0 0 4px;
    }
    .random-modal-info p {
      font-size: 13px;
      color: rgba(255,255,255,0.82);
      margin: 0 0 20px;
    }
    .random-modal-listen {
      display: block;
      padding: 13px 20px;
      background: linear-gradient(90deg, var(--hot), var(--violet));
      border-radius: 100px;
      color: #fff;
      font-size: 14px;
      font-weight: 900;
      text-decoration: none;
      letter-spacing: 0.04em;
      margin-bottom: 12px;
      box-shadow: 0 0 20px rgba(255,77,125,0.4);
    }
    .random-modal-retry {
      display: block;
      width: 100%;
      padding: 11px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.15);
      border-radius: 100px;
      color: rgba(255,255,255,0.8);
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      letter-spacing: 0.04em;
    }

    /* ====================================================
       FOOTER
       ==================================================== */
    .site-footer {
      position: relative;
      background: linear-gradient(180deg, #0d0820 0%, #08080d 100%);
      overflow: hidden;
    }

    .site-footer::before {
      content: "";
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--hot), var(--violet), var(--cyan), transparent);
    }

    .site-footer-inner {
      padding: 56px 20px 48px;
      text-align: center;
      box-sizing: border-box;
      width: 100%;
    }

    /* ブランドロゴ */
    .site-footer-brand {
      margin-bottom: 12px;
    }
    .site-footer-brand img {
      height: 36px;
      width: auto;
      object-fit: contain;
      filter: brightness(1.1);
    }

    /* タグライン */
    .site-footer-tagline {
      font-size: 12px;
      color: rgba(255,255,255,0.6);
      line-height: 1.8;
      margin-bottom: 36px;
      letter-spacing: 0.04em;
    }

    /* ナビリンクリスト */
    .site-footer-links {
      list-style: none;
      padding: 0;
      margin: 0 0 36px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      width: 100%;
      box-sizing: border-box;
    }

    .site-footer-links li {
      display: flex;
    }

    .site-footer-links a {
      display: flex;
      align-items: center;
      width: 100%;
      padding: 12px 14px;
      font-size: 12px;
      font-weight: 700;
      color: #fff;
      text-decoration: none;
      letter-spacing: 0.03em;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,0.12);
      background: rgba(255,255,255,0.05);
      transition: background 0.18s, border-color 0.18s, box-shadow 0.18s;
    }

    /* 差し色：3パターンをループ */
    .site-footer-links li:nth-child(3n+1) a {
      border-color: rgba(255,77,125,0.45);
      background: rgba(255,77,125,0.08);
      box-shadow: 0 0 10px rgba(255,77,125,0.12);
    }
    .site-footer-links li:nth-child(3n+2) a {
      border-color: rgba(143,114,255,0.45);
      background: rgba(143,114,255,0.08);
      box-shadow: 0 0 10px rgba(143,114,255,0.12);
    }
    .site-footer-links li:nth-child(3n+3) a {
      border-color: rgba(120,239,255,0.45);
      background: rgba(120,239,255,0.07);
      box-shadow: 0 0 10px rgba(120,239,255,0.10);
    }

    .site-footer-links li:nth-child(3n+1) a:active {
      background: rgba(255,77,125,0.25);
      box-shadow: 0 0 18px rgba(255,77,125,0.35);
    }
    .site-footer-links li:nth-child(3n+2) a:active {
      background: rgba(143,114,255,0.25);
      box-shadow: 0 0 18px rgba(143,114,255,0.35);
    }
    .site-footer-links li:nth-child(3n+3) a:active {
      background: rgba(120,239,255,0.22);
      box-shadow: 0 0 18px rgba(120,239,255,0.30);
    }

    /* 区切り線 */
    .site-footer-divider {
      width: 40px;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
      margin: 0 auto 24px;
    }

    /* メタ情報 */
    .site-footer-meta {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
    }

    .site-footer-copy {
      font-size: 9px;
      color: rgba(255,255,255,0.3);
      letter-spacing: 0.12em;
    }

    .site-footer-licence {
      font-size: 9px;
      line-height: 1.9;
      color: rgba(255,255,255,0.25);
      letter-spacing: 0.06em;
    }

    /* ====================================================
       STICKY CTA BUTTON
       ==================================================== */
    .sticky-cta {
      position: fixed;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%) translateY(calc(100% + 32px));
      z-index: 900;
      width: calc(100% - 24px);
      max-width: 430px;
      pointer-events: none;
      transition: transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1),
                  opacity  0.28s ease;
      opacity: 0;
    }

    .sticky-cta.is-visible {
      transform: translateX(-50%) translateY(0);
      opacity: 1;
      pointer-events: auto;
    }

    /* btn-neon を継承しつつ幅いっぱい */
    .sticky-cta .btn-neon {
      width: 100%;
      justify-content: center;
      padding: 18px 24px !important;
      font-size: 17px !important;
      letter-spacing: 0.06em !important;
      border-radius: 18px !important;
      box-shadow:
        0 0 0 1px rgba(255,255,255,0.18),
        0 0 24px rgba(255,77,125,0.55),
        0 8px 32px rgba(0,0,0,0.55) !important;
    }

    .sticky-cta .btn-neon::before,
    .sticky-cta .btn-neon .btn-eq {
      border-radius: 16.5px !important;
    }

    .sticky-cta .btn-main-label { display: block; line-height: 1.2; }
    .sticky-cta .btn-sub-label  {
      display: block;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.08em;
      opacity: 1;
      margin-top: 5px;
      line-height: 1;
    }


/* ============================================
   FREE TRIAL APPEAL SECTION
   ============================================ */
.trial-appeal-section {
  background: #0a0a0f;
  padding: 80px 0 72px;
  position: relative;
  overflow: hidden;
}

.trial-appeal-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 20% 50%, rgba(255,60,100,.08) 0%, transparent 70%),
    radial-gradient(ellipse 50% 50% at 80% 50%, rgba(0,210,255,.07) 0%, transparent 70%);
  pointer-events: none;
}

.trial-appeal-inner {
  max-width: 480px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
  z-index: 1;
}

.trial-appeal-head {
  text-align: center;
  margin-bottom: 40px;
}

.trial-feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 48px;
}

.trial-feature-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 22px 16px 20px;
  text-align: center;
  transition: background .2s, border-color .2s;
}

.trial-feature-card:hover {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,60,100,.25);
}

.trial-feature-icon {
  font-size: 2rem;
  margin-bottom: 10px;
  line-height: 1;
}

.trial-feature-card h3 {
  font-size: .82rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 8px;
  line-height: 1.4;
  letter-spacing: .02em;
}

.trial-feature-card p {
  font-size: .72rem;
  color: rgba(255,255,255,.55);
  line-height: 1.6;
  margin: 0;
}

.trial-appeal-cta {
  text-align: center;
}

.trial-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 36px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .06em;
}

.trial-appeal-note {
  margin-top: 14px;
  font-size: .72rem;
  color: rgba(255,255,255,.4);
  letter-spacing: .04em;
}