/* ======== RESET & BASE ======== */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: auto; }
    body {
      background: #04050a;
      color: #fff;
      font-family: 'Arial Black', 'Helvetica Neue', sans-serif;
      overflow-x: hidden;
    }
    a { text-decoration: none; }

    /* ======== LOADER ======== */
    #loader {
      position: fixed; inset: 0; z-index: 9999;
      background: #04050a;
      display: flex; align-items: center; justify-content: center;
      transition: opacity 0.8s ease 0.5s;
    }
    #loader.done { opacity: 0; pointer-events: none; }
    .loader-inner { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
    .loader-logo-text {
      font-size: 1.1rem; letter-spacing: 0.5em; color: #fff;
      font-weight: 900; text-transform: uppercase;
    }
    .loader-logo-img {
      width: clamp(180px, 38vw, 280px); height: auto; display: block;
      animation: loaderLogoPulse 2s ease-in-out infinite;
      filter: drop-shadow(0 0 26px rgba(0,150,255,0.35));
    }
    @keyframes loaderLogoPulse { 0%,100% { opacity: 0.55; } 50% { opacity: 1; } }
    .loader-bar-wrap { width: 200px; height: 1px; background: rgba(255,255,255,0.1); }
    .loader-bar {
      height: 100%; background: #00b4ff;
      animation: loaderFill 1.2s ease-out forwards;
    }
    @keyframes loaderFill { from { width: 0; } to { width: 100%; } }

    /* ======== HEADER ======== */
    header {
      position: fixed; top: 0; left: 0; right: 0; z-index: 200;
      display: flex; align-items: center; justify-content: space-between;
      padding: 1.2rem 2.5rem;
      background: linear-gradient(to bottom, rgba(4,5,10,0.85), transparent);
    }
    .nav-logo { display: inline-flex; align-items: center; }
    .nav-logo img { height: 22px; width: auto; display: block; }
    .nav-links { display: flex; align-items: center; gap: 1.6rem; }
    .nav-link {
      font-size: 0.72rem; letter-spacing: 0.16em;
      color: rgba(255,255,255,0.62); text-transform: uppercase;
      font-family: Arial, sans-serif; transition: color 0.2s;
    }
    .nav-link:hover { color: #fff; }
    .nav-cta {
      font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em;
      color: #fff; text-transform: none;
      background: linear-gradient(135deg, #1f93ff, #0040e6);
      text-shadow: 0 1px 2px rgba(0,0,30,0.35);
      padding: 0.6rem 1.35rem; border-radius: 3px;
      box-shadow: 0 0 0 1px rgba(0,180,255,0.35), 0 8px 22px -8px rgba(0,150,255,0.7);
      transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
    }
    .nav-cta:hover {
      transform: translateY(-1px); filter: brightness(1.08);
      box-shadow: 0 0 0 1px rgba(0,180,255,0.7), 0 12px 30px -8px rgba(0,150,255,0.85);
    }

    /* ======== LIGHTNING OVERLAY ======== */
    #lightning-overlay {
      position: fixed; inset: 0; z-index: 500;
      pointer-events: none; opacity: 0;
      transition: opacity 0.3s;
    }
    #lightning-overlay.active { opacity: 1; pointer-events: auto; }
    #lightning-bg {
      position: absolute; inset: 0;
      background: radial-gradient(ellipse at 50% 50%, rgba(0,100,255,0.35), rgba(0,0,30,0.9) 70%);
    }
    #lightning-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

    /* ======== CINEMATIC SCROLL — 1本の連続体験 ======== */
    /*
      全体を1つのスクロールコンテナに統合。
      KV・ダイブ・CTAの断裂線なし。
    */
    .cinematic-scroll {
      position: relative;
      height: 1800vh;
    }
    .cinematic-sticky {
      position: sticky;
      top: 0;
      width: 100%;
      height: 100vh;
      overflow: hidden;
      background: #04050a;
    }

    /* --- KV背景 --- */
    .kv-bg {
      position: absolute; inset: 0; z-index: 0;
      background-image: url('/cinematic/KV-pc.png');
      background-size: cover; background-position: center top;
    }
    /* モバイル KV overrides は末尾の @media ブロックに移動済み */

    /* --- KV スマホ動画 (/cinematic/KV-sp.mp4 / モバイルのみ表示) --- */
    .kv-sp-vid {
      display: none;
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: cover;
      object-position: center top;
      pointer-events: none;
    }

    /* --- KV雲ループ (動画ループ / kv-cloud-drift.mp4) --- */
    .kv-cloud-vid {
      position: absolute; inset: 0; z-index: 1;
      width: 100%; height: 100%;
      object-fit: cover;
      opacity: 0.08;
      pointer-events: none;
      transform-origin: center center;
      will-change: opacity, transform;
      filter: brightness(1.5) saturate(0);
    }

    /* --- KVヴィネット --- */
    .kv-vignette {
      position: absolute; inset: 0; z-index: 2;
      background:
        radial-gradient(ellipse 120% 80% at 50% 50%, transparent 30%, rgba(4,5,10,0.6) 100%),
        linear-gradient(to bottom, rgba(4,5,10,0.4) 0%, transparent 20%, transparent 75%, rgba(4,5,10,0.9) 100%);
      pointer-events: none;
    }

    /* --- KVコンテンツ --- */
    .kv-content {
      position: absolute; inset: 0; z-index: 10;
      display: flex; align-items: center; justify-content: flex-end;
      padding: 2rem 5% 2rem 2rem;
    }
    .kv-text { max-width: 560px; }
    .hero-eyebrow {
      font-size: 0.65rem; letter-spacing: 0.45em;
      color: #00b4ff; text-transform: uppercase;
      font-family: Arial, sans-serif; font-weight: 400; margin-bottom: 1.2rem;
    }
    .hero-title {
      font-size: clamp(3.5rem, 7vw, 6.5rem);
      font-weight: 900; text-transform: uppercase;
      line-height: 0.88; letter-spacing: -0.02em;
      color: #fff; text-shadow: 0 4px 40px rgba(0,0,0,0.6);
    }
    .hero-title .cockpit {
      display: block;
      font-family: Georgia, 'Times New Roman', serif;
      font-style: italic; font-weight: 400; font-size: 0.85em;
      background: linear-gradient(120deg, #fff 0%, #00b4ff 60%, #0080ff 100%);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    }
    .hero-sub {
      margin-top: 1.5rem; font-size: 0.9rem; line-height: 1.7;
      color: rgba(255,255,255,0.45); font-family: Arial, sans-serif;
      font-weight: 300; letter-spacing: 0.05em;
    }

    /* --- スクロールインジケーター --- */
    .scroll-indicator {
      position: absolute; bottom: 2.5rem; left: 50%;
      transform: translateX(-50%);
      display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
      z-index: 15; cursor: default;
    }
    .scroll-indicator span {
      font-size: 0.6rem; letter-spacing: 0.4em;
      color: rgba(255,255,255,0.3); text-transform: uppercase;
    }
    .scroll-line {
      width: 1px; height: 48px;
      background: linear-gradient(to bottom, #00b4ff, transparent);
      animation: scrollAnim 2.4s ease-in-out infinite;
    }
    @keyframes scrollAnim {
      0%   { transform: scaleY(0); transform-origin: top; opacity: 0; }
      40%  { transform: scaleY(1); transform-origin: top; opacity: 1; }
      100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
    }

    /* --- ダイブ動画 --- */
    .dive-vid {
      position: absolute; inset: 0; z-index: 5;
      width: 100%; height: 100%;
      object-fit: cover;
      opacity: 0;
      pointer-events: none;
    }

    /* --- オーバーレイグラデ（動画上） --- */
    .dive-grad {
      position: absolute; inset: 0; z-index: 6;
      background:
        radial-gradient(ellipse 90% 60% at 50% 110%, rgba(4,5,10,0.8), transparent),
        linear-gradient(to bottom, rgba(4,5,10,0.4) 0%, transparent 15%, transparent 80%, rgba(4,5,10,0.95) 100%);
      pointer-events: none;
      opacity: 0;
    }

    /* --- 白フラッシュオーバーレイ（雲が覆うストーリー演出） --- */
    .flash-overlay {
      position: absolute; inset: 0; z-index: 50;
      background: #ffffff;
      opacity: 0;
      pointer-events: none;
    }

    /* --- フェーズキャプション (旧定義 — dive-cap/SKILL.md 側で上書き済み) --- */
    .cap-phase {
      font-size: 0.6rem; letter-spacing: 0.5em;
      color: #00b4ff; text-transform: uppercase;
      font-family: Arial, sans-serif; font-weight: 400;
      margin-bottom: 0.6rem;
    }
    .cap-headline {
      font-size: clamp(2.5rem, 5vw, 5rem);
      font-weight: 900; letter-spacing: -0.01em;
      line-height: 0.9; color: #fff;
      text-shadow: 0 4px 40px rgba(0,0,0,0.5);
    }
    .cap-sub {
      margin-top: 0.8rem; font-size: 0.85rem;
      color: rgba(255,255,255,0.4); letter-spacing: 0.1em;
      font-family: Arial, sans-serif; font-weight: 300;
    }

    /* --- コクピットディスプレイ パネル (dark-mode content screen) --- */
    .content-screen {
      position: absolute; inset: 0; z-index: 55;
      display: flex; align-items: center; justify-content: center;
      opacity: 0; pointer-events: none;
      background: rgba(4, 6, 18, 0.97);
    }
    /* Corner brackets — targeting reticle aesthetic */
    .content-screen::before,
    .content-screen::after {
      content: '';
      position: absolute;
      width: 44px; height: 44px;
      border-color: rgba(0,180,255,0.55);
      border-style: solid;
      pointer-events: none;
      z-index: 2;
    }
    .content-screen::before {
      top: 10vh; left: 4%;   /* ヘッダー(~60px)より下に移動 */
      border-width: 1.5px 0 0 1.5px;
    }
    .content-screen::after {
      bottom: 5vh; right: 4%;
      border-width: 0 1.5px 1.5px 0;
    }
    /* Remaining two corners (TR / BL) — 全パネル共通で全画面(inset:0)の
       inner-glow 基準に固定。outer の高さに依存しないので 4 隅が常に揃う。 */
    .content-screen-inner-glow::before {
      content: '';
      position: absolute;
      top: 10vh; right: 4%;  /* 14日無料ボタンより下に */
      width: 44px; height: 44px;
      border-top: 1.5px solid rgba(0,180,255,0.55);
      border-right: 1.5px solid rgba(0,180,255,0.55);
      pointer-events: none;
      z-index: 2;
    }
    .content-screen-inner-glow::after {
      content: '';
      position: absolute;
      bottom: 5vh; left: 4%;
      width: 44px; height: 44px;
      border-bottom: 1.5px solid rgba(0,180,255,0.55);
      border-left: 1.5px solid rgba(0,180,255,0.55);
      pointer-events: none;
      z-index: 2;
    }
    /* Scan line — sweeps down, reads like radar sweep */
    @keyframes csaScan {
      0%   { top: 0%; opacity: 0; }
      8%   { opacity: 1; }
      92%  { opacity: 1; }
      100% { top: 100%; opacity: 0; }
    }
    .cs-scan-line {
      position: absolute;
      left: 0; right: 0;
      height: 120px;
      background: linear-gradient(to bottom,
        transparent,
        rgba(0,180,255,0.055),
        transparent);
      animation: csaScan 6s ease-in-out infinite;
      pointer-events: none;
      z-index: 1;
    }
    /* Subtle inner glow at edges */
    .content-screen-inner-glow {
      position: absolute; inset: 0; pointer-events: none; z-index: 1;
      background:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(0,100,220,0.06), transparent 60%),
        radial-gradient(ellipse 80% 40% at 50% 100%, rgba(0,60,160,0.04), transparent 60%);
    }
    /* cs-a: 背景画像に合わせて内部グローを強化 */
    #cs-a .content-screen-inner-glow {
      background:
        radial-gradient(ellipse 60% 70% at 75% 50%, rgba(0,120,255,0.12), transparent 65%),
        radial-gradient(ellipse 80% 50% at 50% 100%, rgba(0,60,180,0.08), transparent 60%);
    }
    .cs-inner {
      max-width: 640px; padding: 2rem 2.5rem;
      text-align: center;
    }
    .cs-label {
      font-size: 0.6rem; letter-spacing: 0.5em; text-transform: uppercase;
      color: rgba(4,5,10,0.35); font-family: Arial, sans-serif;
      margin-bottom: 1.2rem;
    }
    .cs-headline {
      font-size: clamp(2rem, 4.5vw, 3.8rem);
      font-weight: 900; line-height: 1.05; letter-spacing: -0.02em;
      color: #ffffff; margin-bottom: 1.5rem;
    }
    .cs-body {
      font-size: 1rem; line-height: 1.85; color: rgba(4,5,10,0.6);
      font-family: Arial, sans-serif; font-weight: 300;
    }
    .cs-body strong { color: #04050a; font-weight: 700; }
    .cs-body em { font-style: normal; color: #006dff; font-weight: 700; }
    .cs-list {
      list-style: none; padding: 0; margin: 0;
      display: flex; flex-direction: column; gap: 0.9rem;
      text-align: left;
    }
    .cs-list li {
      font-size: 0.95rem; color: rgba(4,5,10,0.65);
      font-family: Arial, sans-serif; font-weight: 300;
      padding-left: 1.4rem; position: relative;
    }
    .cs-list li::before {
      content: '→'; position: absolute; left: 0;
      color: #006dff; font-weight: 700;
    }
    .cs-list li strong { color: #04050a; font-weight: 700; }
    .cs-stats {
      display: flex; gap: 2rem; justify-content: center;
      flex-wrap: wrap; margin-top: 0.5rem;
    }
    .cs-stat {
      display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
    }
    .cs-num {
      font-size: clamp(2rem, 4vw, 3rem); font-weight: 900;
      letter-spacing: -0.03em; color: #04050a; line-height: 1;
    }
    .cs-num small { font-size: 0.45em; letter-spacing: 0; font-weight: 400; }
    .cs-desc {
      font-size: 0.7rem; color: rgba(4,5,10,0.45);
      font-family: Arial, sans-serif; letter-spacing: 0.05em;
    }

    /* --- CTAオーバーレイ --- */
    .cta-overlay {
      position: absolute; inset: 0; z-index: 30;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      opacity: 0; pointer-events: none;
    }
    .cta-overlay.on { opacity: 1; pointer-events: auto; }

    /* Phase 1: ENGAGE ボタン */
    .cta-phase { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2rem; transition: opacity 0.6s ease; }
    #cta-p2 { opacity: 0; pointer-events: none; }
    #cta-p2.revealed { opacity: 1; pointer-events: auto; }
    #cta-p1.hidden { opacity: 0; pointer-events: none; }

    .cta-label {
      font-size: 0.6rem; letter-spacing: 0.5em;
      color: #00b4ff; text-transform: uppercase;
      font-family: Arial, sans-serif;
    }

    /* ENGAGEボタン */
    .engage-btn {
      width: 130px; height: 130px; border-radius: 50%; cursor: pointer;
      position: relative; display: flex; flex-direction: column;
      align-items: center; justify-content: center; gap: 0.3rem;
      border: 1px solid rgba(0,180,255,0.7);
      background: radial-gradient(ellipse at 40% 35%, rgba(0,60,140,0.6), rgba(0,5,20,0.92) 70%);
      box-shadow: 0 0 30px rgba(0,180,255,0.3), 0 0 80px rgba(0,100,255,0.15);
      transition: box-shadow 0.2s, transform 0.15s;
      user-select: none;
    }
    .engage-btn::before {
      content: ''; position: absolute; inset: -8px; border-radius: 50%;
      border: 1px solid rgba(0,180,255,0.2);
      animation: engagePulse 2.4s ease-in-out infinite;
    }
    .engage-btn::after {
      content: ''; position: absolute; inset: -18px; border-radius: 50%;
      border: 1px solid rgba(0,180,255,0.1);
      animation: engagePulse 2.4s ease-in-out 0.5s infinite;
    }
    @keyframes engagePulse {
      0%, 100% { opacity: 0.4; transform: scale(1); }
      50%       { opacity: 1; transform: scale(1.05); }
    }
    .engage-btn svg { width: 32px; height: 32px; fill: #00b4ff; filter: drop-shadow(0 0 8px #00b4ff); }
    .engage-btn span { font-size: 0.55rem; letter-spacing: 0.4em; color: #00b4ff; text-transform: uppercase; font-family: Arial, sans-serif; }
    .engage-btn:hover { box-shadow: 0 0 60px rgba(0,180,255,0.6), 0 0 120px rgba(0,100,255,0.3); }
    .engage-btn:active { transform: scale(0.96); }

    /* Phase 2: CV + CTA */
    .cv-eyebrow {
      font-size: 0.6rem; letter-spacing: 0.5em;
      color: #00b4ff; text-transform: uppercase;
      font-family: Arial, sans-serif;
    }
    .cv-headline {
      font-size: clamp(2.8rem, 5.5vw, 5rem);
      font-weight: 900; line-height: 0.92; letter-spacing: -0.02em;
      text-align: center; color: #fff;
      text-shadow: 0 0 60px rgba(0,180,255,0.4), 0 4px 40px rgba(0,0,0,0.7);
    }
    .cv-sub {
      font-size: 0.88rem; line-height: 1.7; text-align: center;
      color: rgba(255,255,255,0.5); font-family: Arial, sans-serif;
      font-weight: 300; letter-spacing: 0.05em; max-width: 480px;
    }
    .cv-cta-row { display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; justify-content: center; margin-top: 0.5rem; }
    .btn-primary {
      font-size: 0.8rem; font-weight: 800; letter-spacing: 0.05em;
      text-transform: none; color: #fff;
      background: linear-gradient(135deg, #1f93ff, #0040e6);
      text-shadow: 0 1px 2px rgba(0,0,30,0.35);
      padding: 1rem 2.6rem; border-radius: 3px;
      box-shadow: 0 0 0 1px rgba(0,180,255,0.4), 0 10px 34px -8px rgba(0,150,255,0.75);
      transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
    }
    .btn-primary:hover {
      transform: translateY(-2px); filter: brightness(1.08);
      box-shadow: 0 0 0 1px rgba(0,180,255,0.8), 0 16px 46px -8px rgba(0,150,255,0.95);
    }
    .btn-secondary {
      font-size: 0.78rem; letter-spacing: 0.08em; text-transform: none;
      color: rgba(255,255,255,0.62); border: 1px solid rgba(255,255,255,0.18);
      padding: 0.95rem 1.8rem; border-radius: 3px; transition: all 0.2s;
    }
    .btn-secondary:hover { color: #fff; border-color: rgba(0,180,255,0.6); background: rgba(0,180,255,0.06); }

    /* --- ネオン稲妻オーバーレイ --- */
    #lightning-overlay {
      position: fixed; inset: 0; z-index: 500;
      pointer-events: none; opacity: 0;
      transition: opacity 0.2s;
    }
    #lightning-overlay.active { opacity: 1; pointer-events: auto; }
    #lightning-bg {
      position: absolute; inset: 0;
      background: radial-gradient(ellipse at 50% 50%, rgba(0,80,200,0.2), transparent 70%);
    }
    #lightning-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
    #neon-whiteout {
      position: absolute; inset: 0;
      background: radial-gradient(ellipse at 50% 50%, #00b4ff 0%, #0040ff 35%, #fff 75%);
      opacity: 0; transition: opacity 0.5s ease;
    }

    /* --- プログレスバー --- */
    .dive-progress {
      position: absolute; bottom: 0; left: 0; z-index: 100;
      height: 2px; width: 0;
      background: linear-gradient(to right, rgba(0,180,255,0.3), #00b4ff);
    }

    /* ======== AXIS-PROMISE-VERTICAL-JP (cs-a) — FULL-SCREEN IMPACT ======== */
    /* cs-a stretches to fill the entire white viewport */
    #cs-a {
      align-items: stretch;
      justify-content: stretch;
      /* 参考画像に合わせてほぼソリッドダーク */
      background:
        linear-gradient(
          to right,
          rgba(3,5,20,0.97) 0%,
          rgba(3,5,20,0.95) 100%
        ),
        url('/cinematic/cs-a-bg.png') center / cover no-repeat !important;
    }
    .cs-promise {
      display: grid;
      grid-template-columns: 260px 1fr;
      width: 100%;
      height: 100%;
      gap: 0;
      padding: 0;
      align-items: stretch;
      position: relative;
    }
    .cs-promise-left {
      writing-mode: vertical-rl;
      text-orientation: mixed;
      font-size: clamp(2.8rem, 5vw, 4.5rem);
      font-weight: 900;
      color: rgba(0,180,255,0.18);
      letter-spacing: 0.2em;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(0,20,70,0.55); /* ストリップを背景画像から守る */
      border-right: 1px solid rgba(0,180,255,0.22);
      text-transform: uppercase;
      font-family: 'Arial Black', 'Helvetica Neue', sans-serif;
      user-select: none;
      flex-shrink: 0;
    }
    .cs-promise-right {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 2rem;
      padding: 0 9% 0 6%;
      border-left: 2px solid rgba(0,180,255,0.55);
      position: relative;
    }
    .cs-promise-num {
      font-size: clamp(6rem, 12vw, 10rem);
      font-weight: 900;
      color: rgba(0,180,255,0.10);
      letter-spacing: -0.05em;
      line-height: 1;
      position: absolute;
      top: 8%;
      right: 6%;
      pointer-events: none;
      user-select: none;
    }
    /* PROBLEM ラベル + 横線 + 青ドット */
    .cs-promise-label {
      font-size: 0.58rem;
      letter-spacing: 0.55em;
      text-transform: uppercase;
      color: rgba(0,180,255,0.85);
      font-family: Arial, sans-serif;
      display: flex;
      align-items: center;
    }
    .cs-promise-label::after {
      content: '';
      flex: 1;
      height: 1px;
      margin-left: 1.2rem;
      background: linear-gradient(to right,
        rgba(0,180,255,0.45) 0%,
        rgba(0,180,255,0.25) 80%,
        transparent 100%
      );
      box-shadow: inset -3px 0 0 1.5px rgba(0,180,255,0.75);
    }
    /* 見出し下の仕切り線 */
    .cs-promise-divider {
      display: flex;
      align-items: center;
      gap: 0.8rem;
      margin-top: -0.4rem;
    }
    .cs-promise-divider::before {
      content: '';
      width: 40%;
      height: 1px;
      background: rgba(0,180,255,0.22);
    }
    .cs-promise-divider-mark {
      font-size: 0.5rem;
      letter-spacing: 0.35em;
      color: rgba(0,180,255,0.3);
      font-family: Arial, sans-serif;
    }
    .cs-promise-lead {
      font-size: clamp(3.2rem, 6.5vw, 6rem);
      font-weight: 900;
      line-height: 1.0;
      letter-spacing: -0.03em;
      color: #ffffff;
    }
    .cs-promise-body {
      font-size: clamp(0.9rem, 1.5vw, 1.1rem);
      line-height: 2.2;
      color: rgba(255,255,255,0.52);
      font-family: Arial, sans-serif;
      font-weight: 300;
      max-width: 520px;
      word-break: keep-all;
      overflow-wrap: break-word;
    }
    /* デスクトップではモバイル専用要素を非表示 */
    .sp-br { display: none; }
    .pc-only { display: inline; }
    .cs-promise-body strong { color: #00b4ff; font-weight: 700; }

    /* ======== CASE-CAROUSEL (cs-b, cs-c) — FULL-SCREEN IMPACT ======== */
    #cs-b, #cs-c {
      flex-direction: column;
      justify-content: center;
    }
    .cs-carousel-outer {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 0;
      position: relative;
    }
    /* Header strip: left-border accent, full-width, big type */
    .cs-carousel-hdr {
      padding: 0 6% 0 5%;
      margin-bottom: 2.2rem;
      border-left: 2px solid rgba(0,180,255,0.55);
    }
    .cs-carousel-hdr-label {
      font-size: 0.58rem;
      letter-spacing: 0.55em;
      text-transform: uppercase;
      color: rgba(0,180,255,0.8);
      font-family: Arial, sans-serif;
      margin-bottom: 0.9rem;
    }
    .cs-carousel-hdr-title {
      font-size: clamp(2.4rem, 5vw, 4.5rem);
      font-weight: 900;
      color: #ffffff;
      letter-spacing: -0.03em;
      line-height: 1.05;
    }
    .cs-carousel-wrap {
      width: 100%;
      overflow: hidden;
    }
    .cs-carousel-track {
      display: flex;
      gap: 2px;
      animation: carouselScroll 28s linear infinite;
      width: max-content;
    }
    @keyframes carouselScroll {
      0%   { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }
    .cs-card {
      width: 380px;
      min-height: 220px;
      padding: 2.5rem 2.2rem;
      background: rgba(0,20,60,0.45);
      border-right: 1px solid rgba(0,180,255,0.12);
      border-top: 1px solid rgba(0,180,255,0.08);
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .cs-card-num {
      font-size: 0.55rem;
      letter-spacing: 0.45em;
      color: rgba(0,180,255,0.6);
      font-family: Arial, sans-serif;
      margin-bottom: 1.4rem;
    }
    .cs-card-title {
      font-size: clamp(1.3rem, 2.2vw, 1.8rem);
      font-weight: 900;
      color: #ffffff;
      line-height: 1.2;
      margin-bottom: 1rem;
      letter-spacing: -0.02em;
    }
    .cs-card-body {
      font-size: 0.88rem;
      line-height: 1.8;
      color: rgba(255,255,255,0.48);
      font-family: Arial, sans-serif;
      font-weight: 300;
    }
    .cs-card-kpi {
      font-size: clamp(3rem, 5.5vw, 5rem);
      font-weight: 900;
      letter-spacing: -0.04em;
      color: #ffffff;
      line-height: 1;
      margin-bottom: 0.8rem;
    }
    .cs-card-kpi small {
      font-size: 0.35em;
      letter-spacing: 0;
      font-weight: 400;
    }
    .cs-card-kpi-label {
      font-size: 0.78rem;
      color: rgba(255,255,255,0.38);
      font-family: Arial, sans-serif;
      letter-spacing: 0.04em;
    }

    /* ======== DIVE-CAP: minimal text overlaid on video scenes ======== */
    .dive-cap {
      position: absolute;
      bottom: 11%;
      left: 7%;
      right: 7%;
      z-index: 20;
      opacity: 0;
      pointer-events: none;
    }
    .dive-cap-phase {
      font-size: 0.56rem;
      letter-spacing: 0.5em;
      color: #00b4ff;
      text-transform: uppercase;
      font-family: Arial, sans-serif;
      font-weight: 400;
      margin-bottom: 0.45rem;
    }
    .dive-cap-title {
      font-size: clamp(1.8rem, 3.2vw, 2.8rem);
      font-weight: 900;
      color: #fff;
      line-height: 1.0;
      letter-spacing: -0.02em;
      margin-bottom: 0.35rem;
      text-shadow: 0 2px 20px rgba(0,0,0,0.45);
    }
    .dive-cap-sub {
      font-size: 0.78rem;
      color: rgba(255,255,255,0.4);
      font-family: Arial, sans-serif;
      font-weight: 300;
      letter-spacing: 0.1em;
      margin-bottom: 1.4rem;
    }
    .dive-cap-points {
      display: flex;
      gap: 2rem;
      flex-wrap: wrap;
    }
    .dive-cap-point {
      display: flex;
      flex-direction: column;
      gap: 0.18rem;
    }
    .dive-cap-point-num {
      font-size: 0.52rem;
      letter-spacing: 0.4em;
      color: #00b4ff;
      font-family: Arial, sans-serif;
    }
    .dive-cap-point-text {
      font-size: 0.8rem;
      color: rgba(255,255,255,0.72);
      font-family: Arial, sans-serif;
      font-weight: 400;
      letter-spacing: 0.02em;
    }

    /* ======== POST-SCROLL LP SECTIONS ======== */
    .lp-section {
      background: #fff;
      padding: 5.5rem 6%;
      color: #04050a;
    }
    .lp-section + .lp-section {
      border-top: 1px solid rgba(4,5,10,0.07);
    }
    .lp-section-hdr {
      margin-bottom: 2.8rem;
    }
    .lp-section-label {
      font-size: 0.58rem;
      letter-spacing: 0.5em;
      text-transform: uppercase;
      color: rgba(4,5,10,0.32);
      font-family: Arial, sans-serif;
      margin-bottom: 0.7rem;
    }
    .lp-section-title {
      font-size: clamp(1.5rem, 2.8vw, 2rem);
      font-weight: 900;
      color: #04050a;
      letter-spacing: -0.02em;
    }
    /* ---- Capabilities grid (dark section) ---- */
    .cap-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem; }
    .cap-card {
      border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; padding: 1.9rem 1.8rem;
      background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012));
      transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
    }
    .cap-card:hover { border-color: rgba(0,180,255,0.4); transform: translateY(-3px); box-shadow: 0 18px 44px -22px rgba(0,120,255,0.5); }
    .cap-icon { width: 38px; height: 38px; color: #2ecbff; margin-bottom: 1rem; }
    .cap-step { font-size: 0.58rem; letter-spacing: 0.3em; color: rgba(255,255,255,0.34); text-transform: uppercase; font-family: Arial, sans-serif; }
    .cap-title { font-size: 1.12rem; font-weight: 800; margin: 0.45rem 0 0.65rem; letter-spacing: 0.01em; color: #fff; }
    .cap-body { font-size: 0.86rem; line-height: 1.75; color: rgba(255,255,255,0.62); }
    .cap-flow { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1.1rem; }
    .cap-flow span { font-size: 0.66rem; font-weight: 700; color: #2ecbff; background: rgba(0,180,255,0.1); border-radius: 99px; padding: 0.32rem 0.72rem; }
    .cap-flow i { color: rgba(255,255,255,0.3); font-style: normal; align-self: center; font-size: 0.7rem; }
    @media (max-width: 768px) { .cap-grid { grid-template-columns: 1fr; gap: 1rem; } }
    .blog-row-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    .blog-row {
      display: grid;
      grid-template-columns: 200px 160px 1fr;
      gap: 2rem;
      align-items: center;
      padding: 1.8rem 0;
      border-bottom: 1px solid rgba(4,5,10,0.07);
      position: relative;
    }
    .blog-row:first-child { border-top: 1px solid rgba(4,5,10,0.07); }
    .blog-row-date {
      font-size: 0.7rem;
      letter-spacing: 0.06em;
      color: rgba(4,5,10,0.36);
      font-family: Arial, sans-serif;
      line-height: 1.6;
    }
    .blog-row-thumb-inner {
      width: 160px;
      height: 100px;
      background: linear-gradient(135deg, rgba(0,100,200,0.1), rgba(0,40,100,0.06));
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.55rem;
      letter-spacing: 0.35em;
      color: rgba(4,5,10,0.18);
      text-transform: uppercase;
      font-family: Arial, sans-serif;
    }
    .blog-row-content {
      display: flex;
      flex-direction: column;
      gap: 0.38rem;
      padding-right: 2.5rem;
    }
    .blog-row-category {
      font-size: 0.56rem;
      letter-spacing: 0.4em;
      text-transform: uppercase;
      color: #006dff;
      font-family: Arial, sans-serif;
    }
    .blog-row-title {
      font-size: 0.92rem;
      font-weight: 700;
      color: #04050a;
      line-height: 1.5;
    }
    .blog-row-arrow {
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%) translateX(-6px);
      opacity: 0;
      color: #006dff;
      font-size: 1rem;
      transition: opacity 0.2s ease, transform 0.2s ease;
      pointer-events: none;
    }
    .blog-row:hover .blog-row-arrow {
      opacity: 1;
      transform: translateY(-50%) translateX(0);
    }
    .voice-row-quote {
      font-size: 0.9rem;
      font-style: italic;
      color: #04050a;
      line-height: 1.6;
      font-weight: 400;
    }
    .voice-row-attr {
      font-size: 0.7rem;
      color: rgba(4,5,10,0.38);
      font-family: Arial, sans-serif;
      margin-top: 0.2rem;
    }


    /* ======================================================
       INFOGRAPHIC GRID (cs-b Solution)
       ====================================================== */
    .cs-infographic-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1px;
      width: 100%;
      background: rgba(0,180,255,0.09);
      /* flex:1 を撤去: outer が 100vh 付近に伸びた際にカードが縦に間延びし、
         縦中央寄せの全体が画面高を超えてタイトルが上端へはみ出す原因だった。
         自然高 + カードの min-height でバランスを取る。 */
    }
    .cs-grid-card {
      background: rgba(0,15,50,0.65);
      padding: 2.4rem 2rem;
      min-height: 290px;
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
      opacity: 0;
      transform: translateY(22px);
    }
    .panel-active .cs-grid-card {
      animation: cardReveal 0.65s ease var(--delay, 0s) forwards;
    }
    @keyframes cardReveal {
      from { opacity: 0; transform: translateY(22px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .cs-gc-icon { margin-bottom: 0.4rem; opacity: 0.9; }
    .cs-gc-num {
      font-size: 0.52rem;
      letter-spacing: 0.5em;
      color: rgba(0,180,255,0.65);
      font-family: Arial, sans-serif;
    }
    .cs-gc-title {
      font-size: clamp(1.05rem, 1.8vw, 1.4rem);
      font-weight: 900;
      color: #fff;
      letter-spacing: -0.02em;
      line-height: 1.2;
    }
    .cs-gc-divider {
      height: 1px;
      background: rgba(0,180,255,0.14);
    }
    .cs-gc-body {
      font-size: 0.8rem;
      line-height: 1.8;
      color: rgba(255,255,255,0.44);
      font-family: Arial, sans-serif;
      font-weight: 300;
      flex: 1;
    }
    .cs-gc-metric {
      display: flex;
      align-items: baseline;
      gap: 0.6rem;
      margin-top: 0.5rem;
    }
    .cs-gc-metric-val {
      font-size: clamp(1.8rem, 3vw, 2.6rem);
      font-weight: 900;
      color: #00b4ff;
      letter-spacing: -0.03em;
      line-height: 1;
    }
    .cs-gc-metric-val small { font-size: 0.42em; font-weight: 400; letter-spacing: 0; }
    .cs-gc-metric-label {
      font-size: 0.68rem;
      color: rgba(255,255,255,0.32);
      font-family: Arial, sans-serif;
    }
    .cs-gc-bar {
      height: 2px;
      background: rgba(0,180,255,0.1);
      overflow: hidden;
      margin-top: 0.3rem;
    }
    .cs-gc-bar-fill {
      height: 100%;
      width: 0;
      background: linear-gradient(to right, #0040ff, #00b4ff);
    }
    .panel-active .cs-gc-bar-fill {
      animation: barFill 1.1s ease calc(var(--delay, 0s) + 0.4s) forwards;
    }
    @keyframes barFill {
      from { width: 0; }
      to   { width: var(--w, 80%); }
    }

    /* ======================================================
       KPI GRID (cs-c Result)
       ====================================================== */
    .cs-kpi-grid {
      display: flex;
      align-items: stretch;
      justify-content: center;
      width: 100%;
      padding: 0 5%;
      gap: 0;
    }
    .cs-kpi-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.55rem;
      padding: 2.5rem 1.5rem;
      text-align: center;
      opacity: 0;
    }
    .panel-active .cs-kpi-item {
      animation: cardReveal 0.7s ease var(--delay, 0s) forwards;
    }
    .cs-kpi-before {
      font-size: clamp(1rem, 2vw, 1.5rem);
      color: rgba(255,255,255,0.22);
      font-weight: 900;
      letter-spacing: -0.02em;
      text-decoration: line-through;
    }
    .cs-kpi-arrow {
      font-size: 1.2rem;
      color: rgba(0,180,255,0.6);
      letter-spacing: -0.02em;
    }
    .cs-kpi-after {
      font-size: clamp(3rem, 6.5vw, 5.5rem);
      font-weight: 900;
      color: #fff;
      letter-spacing: -0.04em;
      line-height: 1;
      text-shadow: 0 0 40px rgba(0,180,255,0.25);
    }
    .cs-kpi-after small { font-size: 0.33em; font-weight: 400; letter-spacing: 0; }
    .cs-kpi-label {
      font-size: 0.72rem;
      color: rgba(255,255,255,0.35);
      font-family: Arial, sans-serif;
      letter-spacing: 0.06em;
      white-space: nowrap;
    }
    .cs-kpi-bar {
      height: 1px;
      width: 80%;
      background: rgba(0,180,255,0.08);
      overflow: hidden;
      margin: 0.2rem 0;
    }
    .cs-kpi-bar-fill {
      height: 100%;
      width: 0;
      background: linear-gradient(to right, #0040ff, #00b4ff);
    }
    .panel-active .cs-kpi-bar-fill {
      animation: barFill 1.1s ease calc(var(--delay, 0s) + 0.4s) forwards;
    }
    .cs-kpi-note {
      font-size: 0.65rem;
      color: rgba(0,180,255,0.55);
      font-family: Arial, sans-serif;
      letter-spacing: 0.06em;
    }
    .cs-kpi-divider {
      width: 1px;
      background: rgba(0,180,255,0.1);
      align-self: stretch;
      margin: 2rem 0;
    }

    /* ======================================================
       DARK LP SECTIONS (News & Voice)
       ====================================================== */
    .lp-section {
      background: #060810;
      padding: 5.5rem 6%;
      color: #fff;
    }
    .lp-section + .lp-section {
      border-top: 1px solid rgba(0,180,255,0.07);
    }
    .lp-section-label { color: rgba(0,180,255,0.75); }
    .lp-section-title { color: #fff; }
    .blog-row:first-child { border-top: 1px solid rgba(255,255,255,0.07); }
    .blog-row { border-bottom: 1px solid rgba(255,255,255,0.06); }
    .blog-row-date { color: rgba(255,255,255,0.28); }
    .blog-row-thumb-inner {
      background: linear-gradient(135deg, rgba(0,50,150,0.28), rgba(0,15,60,0.22));
      color: rgba(255,255,255,0.15);
    }
    .blog-row-title { color: rgba(255,255,255,0.88); }
    .voice-row-quote { color: rgba(255,255,255,0.85); }
    .voice-row-attr { color: rgba(255,255,255,0.28); }
    .blog-row-cover { position: absolute; inset: 0; z-index: 3; }
    .blog-row { transition: background 0.2s; }
    .blog-row:hover { background: rgba(255,255,255,0.025); }
    .blog-row:hover .blog-row-title { color: #fff; }
    .blog-row:hover .blog-row-arrow { color: rgba(0,180,255,0.9); transform: translate(2px,-2px); }
    .blog-row-arrow { transition: color 0.2s, transform 0.2s; }
    .lp-section-hdr { position: relative; }
    .lp-section-more {
      position: absolute; right: 0; bottom: 0.25rem;
      font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase;
      color: rgba(0,180,255,0.85); font-family: Arial, sans-serif; transition: color 0.2s;
    }
    .lp-section-more:hover { color: #fff; }
    @media (max-width: 768px) { .lp-section-more { position: static; display: inline-block; margin-top: 0.8rem; } }

    /* ======================================================
       CTA SECTION (standalone, after Voice)
       ====================================================== */
    .lp-cta-section {
      background: #04050a;
      position: relative;
      overflow: hidden;
      padding: 9rem 6% 8rem;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
    }
    .lp-cta-section::before {
      content: '';
      position: absolute; inset: 0;
      background-image:
        linear-gradient(rgba(0,180,255,0.035) 1px, transparent 1px),
        linear-gradient(to right, rgba(0,180,255,0.035) 1px, transparent 1px);
      background-size: 60px 60px;
      pointer-events: none;
    }
    .lp-cta-section::after {
      content: '';
      position: absolute; inset: 0;
      background: radial-gradient(ellipse 70% 65% at 50% 50%, rgba(0,50,180,0.22), transparent 72%);
      pointer-events: none;
    }
    .lp-cta-inner {
      position: relative; z-index: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1.8rem;
      max-width: 760px;
    }
    .lp-cta-eyebrow {
      font-size: 0.56rem;
      letter-spacing: 0.65em;
      text-transform: uppercase;
      color: rgba(0,180,255,0.65);
      font-family: Arial, sans-serif;
    }
    .lp-cta-headline {
      font-size: clamp(3.2rem, 7.5vw, 7rem);
      font-weight: 900;
      color: #fff;
      line-height: 0.9;
      letter-spacing: -0.035em;
      text-shadow: 0 0 100px rgba(0,100,255,0.35);
    }
    .lp-cta-sub {
      font-size: 0.92rem;
      line-height: 1.85;
      color: rgba(255,255,255,0.42);
      font-family: Arial, sans-serif;
      font-weight: 300;
      letter-spacing: 0.05em;
    }
    .lp-cta-btns {
      display: flex;
      gap: 1.2rem;
      align-items: center;
      flex-wrap: wrap;
      justify-content: center;
      margin-top: 0.8rem;
    }
    .lp-cta-corners { position: absolute; inset: 0; pointer-events: none; }
    .lp-cta-corner {
      position: absolute;
      width: 50px; height: 50px;
      border-color: rgba(0,180,255,0.38);
      border-style: solid;
    }
    .lp-cta-corner.tl { top: 5%; left: 5%; border-width: 1.5px 0 0 1.5px; }
    .lp-cta-corner.tr { top: 5%; right: 5%; border-width: 1.5px 1.5px 0 0; }
    .lp-cta-corner.bl { bottom: 5%; left: 5%; border-width: 0 0 1.5px 1.5px; }
    .lp-cta-corner.br { bottom: 5%; right: 5%; border-width: 0 1.5px 1.5px 0; }

    /* ======================================================
       FOOTER
       ====================================================== */
    .site-footer {
      background: #020307;
      border-top: 1px solid rgba(0,180,255,0.1);
      padding: 3rem 6% 2rem;
    }
    .footer-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 2rem;
      padding-bottom: 2rem;
      border-bottom: 1px solid rgba(255,255,255,0.05);
    }
    .footer-logo { display: inline-flex; align-items: center; }
    .footer-logo img { height: 20px; width: auto; display: block; opacity: 0.9; }
    .footer-nav {
      display: flex;
      gap: 2rem;
      flex-wrap: wrap;
    }
    .footer-nav a {
      font-size: 0.62rem;
      letter-spacing: 0.2em;
      color: rgba(255,255,255,0.3);
      text-transform: uppercase;
      font-family: Arial, sans-serif;
      transition: color 0.2s;
    }
    .footer-nav a:hover { color: #fff; }
    .footer-copy {
      padding-top: 1.5rem;
      text-align: center;
      font-size: 0.58rem;
      color: rgba(255,255,255,0.15);
      font-family: Arial, sans-serif;
      letter-spacing: 0.12em;
    }

    /* ======================================================
       CINEMATIC CTA OVERLAY → minimal scroll-through hint
       ====================================================== */
    .cta-scroll-hint {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.8rem;
    }
    .cta-scroll-text {
      font-size: 0.55rem;
      letter-spacing: 0.5em;
      color: rgba(0,180,255,0.4);
      font-family: Arial, sans-serif;
      text-transform: uppercase;
    }
    @keyframes hintLine {
      0%   { transform: scaleY(0); transform-origin: top; opacity: 0; }
      40%  { transform: scaleY(1); transform-origin: top; opacity: 1; }
      100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
    }
    .cta-scroll-line-hint {
      width: 1px; height: 60px;
      background: linear-gradient(to bottom, #00b4ff, transparent);
      animation: hintLine 2s ease-in-out infinite;
    }

    /* ======================================================
       MOBILE — 768px以下 (最後に書くことでカスケード優先)
       ====================================================== */
    @media (max-width: 768px) {

      /* ---- KV: PNG → 動画切替 ---- */
      .kv-bg { background-image: none !important; }
      .kv-sp-vid { display: block !important; }

      /* ---- sp-br: モバイル専用改行, pc-only: モバイルで非表示 ---- */
      .sp-br { display: block; }
      .pc-only { display: none; }

      /* ---- cs-a: 目標スクショに合わせた2カラム構成 ---- */
      .cs-promise {
        display: grid !important;
        grid-template-columns: 120px 1fr !important;
        flex-direction: unset !important;
        padding: 0 !important;
      }
      /* 問題定義ストリップ */
      .cs-promise-left {
        display: flex !important;
        font-size: 4rem !important;
        letter-spacing: 0.22em !important;
        color: rgba(0,180,255,0.18) !important;
        background: rgba(0,20,70,0.55) !important;
        border-right: 1px solid rgba(0,180,255,0.22) !important;
        writing-mode: vertical-rl !important;
      }
      /* モバイルでは01ゴースト数字を大きく・濃くして右の空間を埋める */
      .cs-promise-num {
        font-size: clamp(7rem, 28vw, 10rem) !important;
        color: rgba(0,180,255,0.22) !important;
        top: 6% !important;
        right: 3% !important;
      }
      /* 右コンテンツ */
      .cs-promise-right {
        padding: 0 5% 0 5% !important;
        gap: 1.4rem !important;
        border-left: 2px solid rgba(0,180,255,0.55) !important;
      }
      /* ヘッドライン: 右列(255px)に4行クリーンに収まるサイズ */
      .cs-promise-lead {
        font-size: clamp(2.6rem, 7.5vw, 3.2rem) !important;
        line-height: 1.1 !important;
      }
      .cs-promise-body {
        font-size: 0.82rem !important;
        line-height: 2.0 !important;
      }
      /* 背景: ソリッドに近い暗さ (画像はほぼ見えない) */
      #cs-a {
        background: rgb(3,5,20) !important;
      }

      /* ---- cs-b / cs-c: カルーセル見出しをモバイル用に縮小 ---- */
      .cs-carousel-hdr {
        padding: 0 5% !important;
        margin-bottom: 1.1rem !important;
      }
      .cs-carousel-hdr-label { margin-bottom: 0.5rem !important; }
      .cs-carousel-hdr-title {
        font-size: clamp(1.35rem, 5.6vw, 1.9rem) !important;
        line-height: 1.18 !important;
      }

      /* ---- cs-b Solution: 横3カラム → 縦1カラム・コンパクト ---- */
      .cs-infographic-grid {
        grid-template-columns: 1fr !important;
        gap: 1px !important;
      }
      .cs-grid-card {
        min-height: 0 !important;
        padding: 0.85rem 1.2rem !important;
        gap: 0.3rem !important;
      }
      .cs-gc-icon { display: none !important; }
      .cs-gc-divider { display: none !important; }
      .cs-gc-num { font-size: 0.5rem !important; }
      .cs-gc-title { font-size: 1.05rem !important; line-height: 1.15 !important; }
      .cs-gc-body {
        font-size: 0.72rem !important;
        line-height: 1.5 !important;
      }
      .cs-gc-metric { margin-top: 0.2rem !important; }
      .cs-gc-metric-val { font-size: 1.5rem !important; }
      .cs-gc-bar { display: none !important; }

      /* ---- cs-c Result: 横並び → 縦積み・はみ出し解消 ---- */
      .cs-kpi-grid {
        flex-direction: column !important;
        padding: 0 8% !important;
        gap: 0 !important;
      }
      .cs-kpi-item {
        padding: 0.8rem 0 !important;
        gap: 0.35rem !important;
      }
      .cs-kpi-after {
        font-size: clamp(2.2rem, 11vw, 3rem) !important;
        white-space: nowrap !important;
      }
      .cs-kpi-label { font-size: 0.72rem !important; white-space: normal !important; }
      .cs-kpi-bar { width: 60% !important; }
      .cs-kpi-divider {
        width: 70% !important;
        height: 1px !important;
        align-self: center !important;
        margin: 0.2rem auto !important;
      }

      /* ---- iOS の 100vh 問題対策: パネルとブラケットを可視領域(svh)基準に ----
         iOS Safari の vh はツールバー込みの大きい高さ → 下端のブラケットや
         中央寄せの内容が画面外/ツールバー裏に見切れる。svh で可視領域に収める。 */
      .cinematic-sticky { height: 100svh !important; }

      /* コーナーブラケットを「ヘッダーより下」かつ可視領域(svh)内に配置。
         上ブラケットは固定ヘッダー(~9svh)を避けて 12svh から始める。 */
      .content-screen::before            { top: 12svh !important;   left: 5% !important; }   /* TL */
      .content-screen::after             { bottom: 5svh !important; right: 5% !important; }  /* BR */
      .content-screen-inner-glow::before { top: 12svh !important;   right: 5% !important; }  /* TR */
      .content-screen-inner-glow::after  { bottom: 5svh !important; left: 5% !important; }   /* BL */

      /* パネルの内容をブラケット枠の内側で中央寄せ(タイトルが枠外に出ない)。
         上=ヘッダー+上ブラケット分、下=下ブラケット分を空ける。 */
      .content-screen { padding: 15svh 0 9svh !important; }
      .cs-promise,
      .cs-carousel-outer { padding-top: 0 !important; padding-bottom: 0 !important; }

      /* ---- cs-a Problem: 本文の右端見切れ(横はみ出し)を解消 ---- */
      .cs-promise-right { min-width: 0 !important; }
      .cs-promise-body {
        word-break: normal !important;
        overflow-wrap: anywhere !important;
        max-width: 100% !important;
        line-height: 1.9 !important;
      }

      /* ---- cs-b Solution: カードをさらに詰めて 3枚が枠内に収まるように ---- */
      .cs-grid-card { padding: 0.7rem 1.2rem !important; }
      .cs-gc-body { line-height: 1.45 !important; }
      .cs-gc-metric-val { font-size: 1.35rem !important; }

      /* ---- Header ---- */
      header { padding: 0.85rem 5%; }
      .nav-logo img { height: 18px; }
      .nav-links { gap: 0.9rem; }
      .nav-link { display: none; }
      .nav-cta { font-size: 0.66rem; padding: 0.55rem 1rem; letter-spacing: 0.02em; }

      /* ---- LP sections ---- */
      .lp-section { padding: 2.8rem 5%; }
      .lp-section-hdr { margin-bottom: 1.5rem; }
      .lp-section-title { font-size: clamp(1.3rem, 5vw, 1.6rem); }

      /* ---- Blog row: 3-col fixed grid → flex column ---- */
      .blog-row {
        display: flex !important;
        flex-direction: column;
        gap: 0.4rem;
        padding: 1.3rem 0;
        position: relative;
      }
      .blog-row-thumb-inner { display: none !important; }
      .blog-row-date {
        font-size: 0.6rem;
        letter-spacing: 0.06em;
      }
      .blog-row-content { padding-right: 1.6rem; }
      .blog-row-title { font-size: 0.88rem; line-height: 1.55; }

      /* Arrow: no hover on mobile → always show faint, static position */
      .blog-row-arrow {
        position: absolute;
        right: 0;
        top: 1.4rem;
        transform: none !important;
        opacity: 0.35 !important;
      }

      /* Voice: date col repeats info already in voice-row-attr → hide */
      #lp-voice .blog-row-date { display: none !important; }
      .voice-row-quote { font-size: 0.86rem; }
      .voice-row-attr { font-size: 0.65rem; margin-top: 0.3rem; }

      /* ---- CTA section ---- */
      .lp-cta-section { padding: 5rem 5% 4rem; }
      .lp-cta-headline {
        font-size: clamp(2.6rem, 9vw, 3.5rem);
        line-height: 1.05;
      }
      .lp-cta-sub { font-size: 0.82rem; letter-spacing: 0.03em; }
      .lp-cta-btns {
        flex-direction: column;
        align-items: stretch;
        gap: 0.8rem;
        width: 100%;
        max-width: 320px;
      }
      .lp-cta-corner { width: 32px; height: 32px; }

      /* ---- Footer ---- */
      .site-footer { padding: 2.5rem 5% 1.5rem; }
      .footer-top { flex-direction: column; align-items: flex-start; gap: 1.2rem; }
      .footer-nav { gap: 1rem; }
    }