:root{
    /* ==== D案: SBI証券型 ブルー×レッド ====
       SBIのブランド思想 = 青は「冷静で的確な判断＝理性」/ 赤は「金融の情熱」
       赤はメインにせず、面積5%以下のアクセントに絞る                        */
    --color-primary:#0B3D91;        /* SBIブルー(主役) */
    --color-primary-light:#2E6FD0;
    --color-primary-dark:#072A66;
    --color-navy:#071C42;
    --color-text:#111C2E;
    --color-text-secondary:#4F5D73;
    --color-bg:#FFFFFF;
    --color-bg-light:#F4F7FC;
    --color-bg-blue:#EAF1FB;
    --color-border:#D9E3F2;
    --color-border-strong:#A9C0E4;
    --color-success:#1E8A5F;

    /* アクセント=レッド(強調のみ・面積を絞る) */
    --acc:#D6001C;
    --acc-deep:#A80016;
    --acc-light:#FBD9DD;
    --acc-bg:#FFF5F6;

    /* ==== CTA=オレンジ(青の補色) ====
       SBIのLPはページ全体が青系の中、ボタンだけオレンジ。
       白背景でも濃紺背景でも同じ強さで「押す場所」が判別できる。 */
    --cta:#F08300;
    --cta-deep:#D46E00;
    --cta-grad:linear-gradient(180deg, #FBA02E 0%, #F08300 50%, #D46E00 100%);
    --sh-ctaBtn:0 2px 4px rgba(180,95,0,.24), 0 10px 22px rgba(180,95,0,.30);
    --sh-ctaBtn-hover:0 4px 8px rgba(180,95,0,.28), 0 16px 32px rgba(180,95,0,.38);

    /* ==== LINE=ブランド指定色(スマホのCTA用) ====
       LINEボタンと一目で分かる必要があるため、ブランドカラーを使う。
       既存パレット外だが「LINE用」に用途を限定し、他では使わない。 */
    --line:#06C755;
    --line-deep:#05A648;
    --line-grad:linear-gradient(180deg, #2ADB77 0%, #06C755 50%, #05A648 100%);
    --sh-lineBtn:0 2px 4px rgba(4,120,54,.24), 0 10px 22px rgba(4,120,54,.30);
    --sh-lineBtn-hover:0 4px 8px rgba(4,120,54,.28), 0 16px 32px rgba(4,120,54,.38);

    /* 濃紺セクション用 */
    --navy-deep:#051227;
    --navy-mid:#0A2E66;
    --on-navy:#E4EDFB;
    --on-navy-dim:#93A9CA;

    --blue-grad:linear-gradient(90deg, #0F4CB0 0%, #0B3D91 100%);
    --acc-grad:linear-gradient(90deg, #E5122E 0%, #D6001C 100%);
    --sh-acc:0 2px 4px rgba(168,0,22,.18), 0 10px 24px rgba(168,0,22,.22);
    --shadow-soft:0 8px 30px rgba(11,61,145,0.08);
    --shadow-card:0 8px 28px rgba(11,61,145,0.08);

    /* ==== v4: SaaS系LPの質感トークン ==== */
    /* 影は「近距離の締まった影 + 遠距離のふわっとした影」の重ね掛け */
    --sh-sm:0 1px 2px rgba(7,28,66,.05), 0 2px 8px rgba(7,28,66,.06);
    --sh-md:0 1px 3px rgba(7,28,66,.06), 0 8px 20px rgba(7,28,66,.07);
    --sh-lg:0 2px 4px rgba(7,28,66,.05), 0 16px 40px rgba(7,28,66,.10);
    --sh-cta:0 2px 4px rgba(11,61,145,.20), 0 10px 24px rgba(11,61,145,.26);
    --sh-cta-hover:0 4px 8px rgba(11,61,145,.24), 0 16px 34px rgba(11,61,145,.32);
    /* 角丸: 硬派(証券会社の実直さ)。ボタンのみピル型で押しやすさを確保 */
    --r-sm:4px; --r-md:6px; --r-lg:8px; --r-full:999px;
    /* イージング */
    --ease:cubic-bezier(.16,1,.3,1);

    /* ==== v6: タイプスケール ====
       中間サイズを作らず「落差」で階層を見せるのが日本のSaaS系LPの作法。
       60代ターゲットのため下限は15px、本文は16pxを基準にする。          */
    --fs-hero:clamp(38px, 3.9vw, 50px);   /* FVキャッチ(最大) */
    --fs-h2:clamp(26px, 3.0vw, 38px);     /* セクション見出し */
    --fs-h3:20px;                          /* カード見出し・小見出し */
    --fs-lead:17.5px;
    /* v25: 説明リード文(一回り大きく・行間は詰める) */
    --fs-lead-lg:19px;
    --lh-lead:1.62;                        /* リード文・強調本文 */
    --fs-body:18px;                          /* 本文(基準) */
    --fs-sm:14px;                          /* 補助・注記 */
    --fs-xs:12.5px;                        /* 最小(ラベル・打消し) */
    --fs-num-xl:clamp(44px, 5vw, 60px);   /* 実績の数字(本文の約3.5倍) */
    --fs-num-md:30px;                      /* 中位の数字 */
    /* 行間 */
    --lh-tight:1.35;   /* 見出し */
    --lh-normal:1.7;   /* 短い本文 */
    --lh-loose:2.0;    /* 長い本文(60代の可読性) */

    /* 法務タグバッジ(デザインシステムに馴染ませたトーン) */
    --badge-kari-bg:#FFF4D6;
    --badge-kari-fg:#8A6D00;
    --badge-law-bg:#FDECEC;
    --badge-law-fg:#8A1913;
    --badge-law-border:#D98A85;
    --badge-client-bg:#E7EEF9;
    --badge-client-fg:#1E3A66;
    --badge-client-border:#8FB2E0;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}

  body{
    margin:0;
    background:var(--color-bg);
    color:var(--color-text);
    /* SBI証券と同一のフォントスタック。
       前半の欧文フォントは和文グリフを持たないため素通りし、
       日本語には「游ゴシック Medium」が当たる(Mac/Windows共通)。
       Medium を明示するのは、Windows Chromeで游ゴシックRegularが
       かすれて薄く見える問題への対策。 */
    font-family:-apple-system, BlinkMacSystemFont, Roboto, "Segoe UI",
      "Helvetica Neue", HelveticaNeue,
      "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic,
      Verdana, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    font-size:var(--fs-body);
    line-height:var(--lh-loose);
    letter-spacing:.02em;
    /* 游ゴシックは字面が小さく線が細いため、本文は500で密度を確保 */
    font-weight:500;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }

  h1,h2,h3{
    margin:0 0 0.5em; line-height:var(--lh-tight);
    letter-spacing:-.01em;
    /* 游ゴシックは約物のアキが広いので詰める */
    font-feature-settings:"palt" 1;
  }
  p{ margin:0 0 1.4em; }
  p:last-child{ margin-bottom:0; }

  a{ color:inherit; }

  .wrap{
    max-width:900px;
    margin:0 auto;
    padding:0 32px;
  }
  .wrap-wide{
    max-width:1180px;
    margin:0 auto;
    padding:0 32px;
  }

  .num{ font-variant-numeric:tabular-nums; }

  /* ===== badges ===== */
  .badge{
    display:inline-block;
    font-size:var(--fs-xs);
    font-weight:700;
    padding:2px 9px;
    border-radius:6px;
    vertical-align:middle;
    letter-spacing:0.02em;
    white-space:nowrap;
    margin:0 2px;
    line-height:1.6;
  }
  .badge-kari{ background:var(--badge-kari-bg); color:var(--badge-kari-fg); }
  .badge-law{
    background:var(--badge-law-bg); color:var(--badge-law-fg);
    border:1px solid var(--badge-law-border);
    cursor:pointer; text-decoration:none;
  }
  .badge-law:hover{ text-decoration:underline; }
  .badge-client{
    background:var(--badge-client-bg); color:var(--badge-client-fg);
    border:1px solid var(--badge-client-border);
  }

  /* ===== section rhythm: 白→淡ブルー→白→淡ブルー ===== */
  section{ padding:72px 0; position:relative; }
  section.tint{ background:var(--color-bg-light); }
  @media (max-width:768px){ section{ padding:48px 0; } }

  .section-head{ margin-bottom:40px; }
  .section-accent{
    display:flex; align-items:center; gap:10px;
    margin-bottom:14px;
  }
  .section-accent .dot{
    width:7px; height:7px; border-radius:50%;
    background:var(--color-primary);
  }
  .section-accent .line{
    width:34px; height:3px; border-radius:2px;
    background:var(--blue-grad);
  }
  /* v4: 英字ラベル(SaaS系LPの定番) */
  .eyebrow-en{
    display:block;
    font-family:"IBM Plex Sans","Noto Sans JP",sans-serif;
    font-size:var(--fs-xs); font-weight:800; letter-spacing:.18em;
    color:var(--color-primary); text-transform:uppercase;
    margin-bottom:10px;
  }
  .section-head h2{
    font-size:var(--fs-h2);
    font-weight:800; color:var(--color-navy);
    line-height:1.4;
  }
  .section-head .lead{
    color:var(--color-text-secondary);
    max-width:760px; margin:16px 0 0;
    font-size:var(--fs-lead-lg);
    line-height:var(--lh-lead);
  }
  /* 見出しを中央寄せ */
  .section-head.is-center{ text-align:center; }
  .section-head.is-center .section-accent{ justify-content:center; }
  .section-head.is-center .lead{ margin-left:auto; margin-right:auto; }

  /* 注記など、小さいままにしたいリード */
  .section-head .lead.note-sm{
    font-size:var(--fs-sm);
    line-height:1.8;
  }
  @media (max-width:768px){ .section-head{ margin-bottom:32px; } .section-head h2{ font-size:23px; } }

  .wrap, .wrap-wide{ position:relative; z-index:1; }

  /* ================= FV ================= */
  .fv{
    --fv-background:url("assets/img/fv-hero.jpg");
    padding-top:36px; padding-bottom:28px; overflow:hidden;
    background-image:
      linear-gradient(90deg, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.82) 42%, rgba(255,255,255,0.35) 62%, rgba(255,255,255,0) 78%),
      var(--fv-background);
    background-repeat:no-repeat;
    background-position:right center;
    background-size:cover;
  }
  .fv-grid{
    display:grid;
    grid-template-columns:60% 40%;
    align-items:center;
    gap:20px;
    min-height:clamp(540px, calc(100svh - 145px), 620px);
  }

  /* FV直下・独立フォーム帯(初期表示に収める) */
  .fv-cta{
    padding-top:0;
    padding-bottom:44px;
    background:var(--color-bg);
  }
  .fv-cta-inner{
    background:#fff;
    border:1px solid var(--color-border);
    border-radius:var(--r-lg);
    box-shadow:var(--sh-lg);
    padding:36px 44px;
    max-width:900px;
    margin:0 auto;
  }
  .fv-cta-form-col{ min-width:0; }

  /* ==================================================================
     v26: オファー見出し(セクション見出しとトーンを変える)
     左右を▼で囲み、「無料体験」を赤で大きく見せる。
     ================================================================== */
  .offer-head{
    display:flex; align-items:center; justify-content:center;
    gap:18px;
    text-align:center;
    font-size:clamp(19px, 2.5vw, 27px);
    font-weight:800;
    color:var(--color-navy);
    line-height:1.5;
    letter-spacing:-.01em;
    margin:0;
    font-feature-settings:"palt" 1;
  }
  /* 左右のハの字(FVと完全に同一:形・サイズ・色) */
  .offer-head::before,
  .offer-head::after{
    content:"";
    flex:0 0 auto;
    width:.5em;
    height:1.45em;
    background:var(--color-primary);
    clip-path:polygon(0 0, 100% 0, 50% 100%);
  }
  .offer-head::before{ transform:rotate(-28deg); }
  .offer-head::after{ transform:rotate(28deg); }
  .offer-head .t{ display:inline; }
  .offer-head .hl{
    color:var(--acc);
    font-size:1.36em;
    line-height:1;
  }
  @media (max-width:600px){
    .offer-head{ gap:10px; }
    .offer-head::before, .offer-head::after{ width:.45em; height:1.3em; }
  }

  /* ==================================================================
     v18: 斜線で挟む見出し(参考: SBI証券LPの「銀行ではなく、SBI証券を選ぶ理由！」)
     左右に「ハの字」の斜線を置いて、呼びかけを強調する。
     画像にせずCSSで作ることで、文字拡大・読み上げにも対応できる。
     ================================================================== */
  .fv-cta-hint{
    display:flex; align-items:center; justify-content:center;
    gap:16px;
    text-align:center;
    font-size:clamp(18px, 2.4vw, 25px);
    font-weight:800;
    color:var(--color-navy);
    margin:0 0 22px;
    letter-spacing:-.01em;
    line-height:1.5;
    font-feature-settings:"palt" 1;
  }
  .fv-cta-hint .t{ display:inline; }
  /* 左右の斜線(ハの字)
     等幅の棒ではなく「先が細くなる三角形」にすることで軽く見せる。
     色は強調語(無料)と揃える。 */
  .fv-cta-hint::before,
  .fv-cta-hint::after{
    content:"";
    flex:0 0 auto;
    width:.5em;
    height:1.45em;
    background:var(--color-primary);
  }
  /* 細長い二等辺三角形を傾けて配置する。
     左「\」: 上の辺が底、右下へ向かって尖る
     右「/」: 上の辺が底、左下へ向かって尖る
     どちらも尖った先が内側(文字側)の下を向く。 */
  .fv-cta-hint::before,
  .fv-cta-hint::after{
    /* 上辺を底、下端中央を頂点とする二等辺三角形 */
    clip-path:polygon(0 0, 100% 0, 50% 100%);
  }
  /* 左「\」: 先が右下(内側)を向くよう傾ける */
  .fv-cta-hint::before{ transform:rotate(-28deg); }
  /* 右「/」: 先が左下(内側)を向くよう傾ける */
  .fv-cta-hint::after{ transform:rotate(28deg); }
  /* 強調語: 大きく・青字。前後の字間は本文と揃える */
  .fv-cta-hint .hl{
    color:var(--color-primary);
    font-size:1.34em;
    line-height:1;
    margin:0;
    padding:0;
  }
  @media (max-width:600px){
    .fv-cta-hint{ gap:10px; }
    .fv-cta-hint::before, .fv-cta-hint::after{ width:.45em; height:1.3em; }
  }
  .fv-cta-inner .cta-submit{ width:100%; }

  .logo-area{ display:flex; align-items:center; gap:12px; margin-bottom:34px; }
  .logo-icon{
    width:46px; height:46px; border-radius:10px;
    background:var(--color-bg-blue);
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
  }
  .logo-text .logo-sub{
    font-size:var(--fs-xs); font-weight:700; color:var(--color-text-secondary);
    letter-spacing:0.02em; display:block; line-height:1.4;
  }
  .logo-text .logo-name{
    font-size:28px; font-weight:800; color:var(--color-navy);
    letter-spacing:0.01em; line-height:1.1;
  }
  .logo-text .logo-name .ai{ color:var(--color-primary); }

  .fv h1{
    font-size:var(--fs-hero);
    font-weight:800;
    line-height:1.2;
    letter-spacing:-.03em;
    color:var(--color-navy);
    margin-bottom:24px;
  }
  .fv h1 .ai{ color:var(--color-primary); }

  .fv h1.fv-copy-art{
    width:min(100%,600px);
    margin:0 0 26px;
    line-height:0;
  }
  .fv-copy-art img{
    display:block;
    width:100%;
    height:auto;
  }

  .fv-sub{
    font-size:var(--fs-h2);
    color:var(--color-navy);
    margin:0 0 36px;
    line-height:1.5;
    font-weight:800;
    letter-spacing:-.01em;
  }
  .fv-sub .hl{ color:var(--color-primary); font-weight:800; }

  /* stats cards */
  /* ==================================================================
     v28: FVの実績サークル
     ・円形カード。赤い上辺ラインは廃止
     ・ピクトグラムはパステル調(問題提起のアイコンと同系統)
     ・円に対して文字を大きく取り、余白を詰める
     ================================================================== */
  .stats-row{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
    margin-bottom:32px;
    justify-items:center;
  }
  .hero-proof-row{ gap:14px; align-items:center; }
  .hero-proof-card{
    width:100%; margin:0; overflow:visible;
    border:0;
    border-radius:0;
    background:transparent;
    filter:drop-shadow(0 7px 12px rgba(12,35,74,.18));
    transition:transform .3s var(--ease), filter .3s var(--ease);
  }
  .hero-proof-card:hover{ transform:translateY(-4px); filter:drop-shadow(0 10px 16px rgba(12,35,74,.25)); }
  .hero-proof-card img{
    display:block; width:100%; height:auto;
    aspect-ratio:1 / 1;
    object-fit:contain;
  }
  .stat-card{
    width:100%;
    max-width:190px;
    aspect-ratio:1 / 1;
    background:#fff;
    border:2px solid var(--color-border);
    border-radius:50%;
    box-shadow:var(--sh-md);
    padding:14px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    gap:2px;
    transition:transform .3s var(--ease), box-shadow .3s var(--ease);
  }
  .stat-card:hover{ transform:translateY(-4px); box-shadow:var(--sh-lg); }
  .stat-card.is-strong{
    border-color:var(--acc);
    border-width:3px;
    box-shadow:0 4px 10px rgba(168,0,22,.12), 0 16px 34px rgba(168,0,22,.16);
  }
  .stat-icon{
    width:40px; height:40px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    margin-bottom:2px;
  }
  .stat-icon svg{ width:100%; height:100%; display:block; }
  .stat-body{ min-width:0; width:100%; }
  .stat-label{
    font-size:13.5px; color:var(--color-navy);
    font-weight:800; line-height:1.35; margin-bottom:2px;
  }
  .stat-figure{
    display:flex; align-items:baseline; justify-content:center; gap:1px;
  }
  .stat-num{
    font-size:44px; font-weight:800; color:var(--color-primary);
    line-height:1; letter-spacing:-.04em;
  }
  .stat-card.is-strong .stat-num{ font-size:52px; color:var(--acc-deep); }
  .stat-unit{ font-size:18px; font-weight:800; color:var(--color-primary); }
  .stat-card.is-strong .stat-unit{ font-size:22px; color:var(--acc-deep); }
  .stat-kari{
    font-size:10.5px; color:var(--badge-kari-fg);
    background:var(--badge-kari-bg);
    padding:1px 8px; border-radius:5px; font-weight:700;
    display:inline-block; margin-top:3px;
  }
  @media (max-width:1024px){
    .stat-card{ max-width:165px; }
    .stat-num{ font-size:38px; }
    .stat-card.is-strong .stat-num{ font-size:44px; }
  }
  @media (max-width:600px){
    .stats-row{ gap:10px; }
    .hero-proof-row{ grid-template-columns:repeat(2,1fr); gap:8px; }
    .hero-proof-row .hero-proof-card:last-child{
      grid-column:1 / -1;
      width:calc(50% - 4px);
    }
    .stat-card{ max-width:none; padding:8px; border-width:1.5px; }
    .stat-icon{ width:30px; height:30px; }
    .stat-label{ font-size:11px; }
    .stat-num{ font-size:29px; }
    .stat-card.is-strong .stat-num{ font-size:33px; }
    .stat-unit{ font-size:13px; }
    .stat-card.is-strong .stat-unit{ font-size:15px; }
    .stat-kari{ display:none; }
  }

  /* signup panel */
  .fv-form-panel{
    background:#fff;
    border:1px solid var(--color-border);
    border-radius:var(--r-lg);
    box-shadow:var(--sh-lg);
    padding:26px 28px 24px;
  }
  .fv-form-title{
    display:flex; align-items:center; justify-content:center; gap:12px;
    color:var(--color-navy); font-weight:800; font-size:var(--fs-lead);
    margin-bottom:20px;
  }
  .fv-form-title::before, .fv-form-title::after{
    content:""; height:1px; flex:1; max-width:60px;
    background:var(--color-border-strong);
  }
  .fv-form-title svg{ width:22px; height:22px; }

  .cta-form input[type="email"]{
    width:100%;
    height:64px;
    border-radius:var(--r-sm);
    border:1.5px solid #C9D6E8;
    font-size:var(--fs-lead);
    padding:0 20px;
    font-family:inherit;
    color:var(--color-text);
    margin-bottom:16px;
    background:#fff;
    transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
    box-shadow:inset 0 1px 2px rgba(16,34,71,.04);
  }
  .cta-form input[type="email"]::placeholder{ color:#A8B6C8; font-size:var(--fs-body); }
  .cta-form input[type="email"]:hover{ border-color:#A9C0DE; }
  .cta-form input[type="email"]:focus{
    outline:none;
    border-color:var(--color-primary);
    box-shadow:0 0 0 4px rgba(6,103,232,.12);
  }
  .cta-form.has-error input[type="email"]{ border-color:#D64545; box-shadow:0 0 0 4px rgba(214,69,69,.10); }
  .cta-form-error{
    display:none; color:#C0392B; font-size:var(--fs-sm); font-weight:700;
    margin:-8px 0 14px;
  }
  .cta-form.has-error .cta-form-error{ display:block; }

  .cta-submit{
    flex:1;
    height:72px;
    border-radius:var(--r-full);
    border:none;
    background:var(--cta-grad);
    color:#fff;
    font-size:var(--fs-h3);
    font-weight:800;
    font-family:inherit;
    letter-spacing:.02em;
    cursor:pointer;
    display:flex; align-items:center; justify-content:center; gap:12px;
  }
  .cta-submit svg{ width:22px; height:22px; transition:transform .25s var(--ease); }
  .cta-submit:hover svg{ transform:translateX(4px); }

  /* ===== CTAボタン: 押せる板の質感(共通・.cta-submit / .sticky-cta a に適用) =====
     4層構成: ①縦グラデーション(既存--cta-gradで対応) ②上面ツヤ(::before)
     ③縁のハイライト/影による厚み(inset box-shadow) ④押下時の沈み込み        */
  .cta-btn-3d{
    position:relative;
    overflow:hidden;
    transition:transform .25s var(--ease), box-shadow .25s var(--ease), filter .25s var(--ease);
    box-shadow:
      var(--sh-ctaBtn),
      inset 0 1px 0 rgba(255,255,255,.35),
      inset 0 -2px 3px rgba(0,0,0,.18);
  }
  .cta-btn-3d::before{
    content:"";
    position:absolute;
    top:0; left:0; right:0;
    height:50%;
    border-radius:inherit;
    background:linear-gradient(180deg, rgba(255,255,255,.25) 0%, rgba(255,255,255,0) 100%);
    pointer-events:none;
    z-index:-1;
  }
  .cta-btn-3d:hover{
    transform:translateY(-4px);
    filter:brightness(1.05);
    box-shadow:
      var(--sh-ctaBtn-hover),
      inset 0 1px 0 rgba(255,255,255,.4),
      inset 0 -2px 3px rgba(0,0,0,.2);
  }
  .cta-btn-3d:active{
    transform:translateY(1px);
    box-shadow:
      0 1px 2px rgba(180,95,0,.22),
      inset 0 2px 4px rgba(0,0,0,.28),
      inset 0 -1px 0 rgba(255,255,255,.15);
  }
  /* モバイル固定バーは高さが低いため、ツヤの範囲を控えめにする */
  .sticky-cta .cta-btn-3d::before{
    height:42%;
    background:linear-gradient(180deg, rgba(255,255,255,.2) 0%, rgba(255,255,255,0) 100%);
  }

  /* ===== LINEボタン(スマホのCTA) =====
     形・サイズ・立体感はオレンジのCTAボタンと完全に共通。色だけ差し替える。 */
  .line-btn{
    background:var(--line-grad);
    text-decoration:none;
  }
  .sticky-cta .line-btn{ background:var(--line-grad); }
  .line-btn.cta-btn-3d{
    box-shadow:
      var(--sh-lineBtn),
      inset 0 1px 0 rgba(255,255,255,.35),
      inset 0 -2px 3px rgba(0,0,0,.18);
  }
  .line-btn.cta-btn-3d:hover{
    box-shadow:
      var(--sh-lineBtn-hover),
      inset 0 1px 0 rgba(255,255,255,.4),
      inset 0 -2px 3px rgba(0,0,0,.2);
  }
  .line-btn.cta-btn-3d:active{
    box-shadow:
      0 1px 2px rgba(4,120,54,.22),
      inset 0 2px 4px rgba(0,0,0,.28),
      inset 0 -1px 0 rgba(255,255,255,.15);
  }
  .line-btn svg{ width:24px; height:24px; }

  /* ===== メール/LINE の出し分け =====
     PC(769px以上)=メールフォーム / スマホ(768px以下)=LINE登録 */
  .line-cta{ display:none; }
  .sticky-cta .sticky-line{ display:none; }
  @media (max-width:768px){
    .mail-cta{ display:none; }
    .line-cta{ display:block; }
    .sticky-cta .sticky-mail{ display:none; }
    .sticky-cta .sticky-line{ display:flex; }
  }

  .cta-form-success{
    display:none;
    text-align:center;
    padding:18px;
    background:var(--color-bg-blue);
    border:1px solid var(--color-border);
    border-radius:var(--r-sm);
  }
  .cta-form-success .check{
    width:40px;height:40px;margin:0 auto 8px;
    border-radius:50%;background:var(--color-primary);color:#fff;
    display:flex;align-items:center;justify-content:center;font-size:var(--fs-h3);
  }
  .cta-form-success p{ margin:0; }
  .cta-form.is-submitted .cta-form-body{ display:none; }
  .cta-form.is-submitted .cta-form-success{ display:block; }

  .demo-note{
    text-align:center; font-size:var(--fs-xs);
    color:var(--color-text-secondary); margin-top:14px;
  }

  /* FV visual (right) */
  /* FVの右カラム: セクション背景に敷いた画像を見せるための領域 */
  .fv-visual{
    position:relative;
    min-height:520px;
  }
  .fv-visual-spacer{ min-height:1px; }

  /* ===== Problem ===== */
  .problem-list{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
  .problem-item{
    background:#fff; border:1px solid var(--color-border);
    border-radius:var(--r-md); padding:28px 26px; box-shadow:var(--sh-md);
  }
  .problem-item .p-icon{
    width:48px;height:48px;border-radius:var(--r-sm);background:var(--color-bg-blue);
    display:flex;align-items:center;justify-content:center;margin-bottom:16px;
  }
  .problem-item .p-icon svg{ width:26px;height:26px; }
  .problem-item .p-lead{ font-weight:700; font-size:1.1rem; color:var(--color-navy); margin:0 0 8px; }
  .problem-item .p-body{ margin:0; color:var(--color-text-secondary); font-size:0.95rem; }
  @media (max-width:768px){ .problem-list{ grid-template-columns:1fr; } }

  /* ===== Affinity ===== */
  .affinity-lead{
    font-size:22px; font-weight:800; color:var(--color-navy);
    line-height:1.6; margin:0 0 28px;
  }
  .affinity-lead .hl{ color:var(--color-primary); }
  .affinity-body p{ margin:0 0 1.3em; }
  .affinity-body p:last-child{ margin-bottom:0; }
  /* 締めの問いかけ: カードにせず、見出しと同じ大きさで問う。
     次セクションの答え「その道具が、株ナビゲートです。」と対になる。 */
  .affinity-turn{
    margin:48px 0 0;
    text-align:center;
    font-size:var(--fs-h2);
    font-weight:800;
    line-height:1.45;
    color:var(--color-navy);
    letter-spacing:-.01em;
    font-feature-settings:"palt" 1;
  }
  @media (max-width:768px){
    .affinity-turn{ margin-top:32px; }
  }

  /* ==================================================================
     v13: 矢印型のセクション接続
     上のセクションの背景色が下辺で三角に突き出し、次のセクションへ
     食い込む。話が次へ流れる感覚を作る(参考: SBI証券LP)。
     使い方: 突き出させたい側の <section> に class="arrow-down" を付ける。
     色は --arrow-color で上書きできる(既定は淡青)。
     ================================================================== */
  section.arrow-down{ position:relative; }
  section.arrow-down::after{
    content:"";
    position:absolute;
    left:50%; bottom:0;
    transform:translate(-50%, 100%);
    width:0; height:0;
    border-left:64px solid transparent;
    border-right:64px solid transparent;
    border-top:44px solid var(--arrow-color, var(--color-bg-light));
    z-index:3;
    pointer-events:none;
  }
  /* 背景色ごとの矢印色 */
  section.tint.arrow-down{ --arrow-color:var(--color-bg-light); }
  section.disclose.arrow-down{ --arrow-color:#F4F7FC; }
  section.sbi.arrow-down{ --arrow-color:#E3ECF5; }
  section.dark.arrow-down{ --arrow-color:var(--navy-mid); }
  section.arrow-down.on-white{ --arrow-color:#FFFFFF; }

  @media (max-width:768px){
    section.arrow-down::after{
      border-left-width:44px; border-right-width:44px; border-top-width:30px;
    }
  }
  /* 矢印の直後のセクションは、矢印にコンテンツが重ならないよう上余白を足す */
  section.arrow-down + section{ padding-top:104px; }
  section.arrow-down + section.sbi{ padding-top:0; }
  section.arrow-down + section.sbi .sbi-bar{ padding-top:52px; }
  section.arrow-down + section.dark{ padding-top:0; }
  section.arrow-down + section.dark .sec-bar-head{ padding-top:52px; }
  @media (max-width:768px){
    section.arrow-down + section{ padding-top:72px; }
    section.arrow-down + section.sbi .sbi-bar{ padding-top:38px; }
    section.arrow-down + section.dark .sec-bar-head{ padding-top:38px; }
  }

  /* ===== About / Solution ===== */
  /* ==================================================================
     v15: 問いかけの吹き出しは画像1枚で配置
     CSSで吹き出しを組むとレスポンシブで崩れやすいため、
     吹き出し・人物・文字をまとめた1枚画像を中央に置くだけにする。
     ================================================================== */
  .quote-image{
    max-width:820px;
    margin:0 auto 36px;
  }
  .quote-image img{
    width:100%; height:auto; display:block;
  }
  .quote-image .img-slot{ min-height:210px; }
  @media (max-width:768px){
    .quote-image{ margin-bottom:26px; }
    .quote-image .img-slot{ min-height:160px; }
  }

  .about-body p{ margin:0 0 1.3em; }
  .about-body p:last-child{ margin:0; }

  /* mechanism */
  .mech-head{
    font-size:var(--fs-h2); font-weight:800; color:var(--color-navy);
    line-height:1.4; margin-bottom:28px;
  }
  .mech-head .num{ color:var(--acc-deep); }
  .mech-body p{ margin:0 0 1.2em; }
  .capability-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:36px; }
  .capability-col{
    border-radius:var(--r-md); padding:28px 26px; border:1px solid var(--color-border);
    background:#fff; box-shadow:var(--sh-md);
  }
  .capability-col h3{ font-size:var(--fs-h3); display:flex; align-items:center; gap:10px; }
  .capability-col.do h3{ color:var(--color-navy); }
  .capability-col.dont h3{ color:var(--color-text-secondary); }
  .capability-col ul{ margin:12px 0 0; padding-left:1.2em; }
  .capability-col li{ margin-bottom:10px; }
  @media (max-width:768px){ .capability-grid{ grid-template-columns:1fr; } }

  /* ===== verification / bars ===== */
  .cond-box{
    background:#fff; border:1px solid var(--color-border);
    border-radius:var(--r-md); padding:26px 30px; margin-bottom:36px; box-shadow:var(--sh-md);
  }
  .cond-box dl{ display:grid; grid-template-columns:auto 1fr; gap:12px 24px; margin:0; font-size:var(--fs-sm); }
  .cond-box dt{ color:var(--color-text-secondary); white-space:nowrap; font-weight:700; }
  .cond-box dd{ margin:0; }

  .bar-row{ margin-bottom:22px; }
  .bar-row-label{ display:flex; justify-content:space-between; font-size:var(--fs-sm); margin-bottom:8px; font-weight:700; }
  .bar-track{ background:#E3EEFB; height:16px; border-radius:8px; overflow:hidden; }
  .bar-fill{ height:100%; border-radius:8px; }
  .bar-fill.primary{ background:var(--blue-grad); }
  .bar-fill.muted{ background:#9FB6D4; }

  /* ===== disclosure table ===== */


  /* ===== voices ===== */
  .voice-note{ color:var(--color-text-secondary); font-size:var(--fs-sm); margin-bottom:32px; }
  .voice-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
  .voice{
    background:#fff; border:1px solid var(--color-border); border-radius:var(--r-md);
    padding:30px 32px; box-shadow:var(--sh-sm);
    transition:transform .3s var(--ease), box-shadow .3s var(--ease);
  }
  .voice:hover{ transform:translateY(-3px); box-shadow:var(--sh-md); }
  .voice-attr{ font-weight:800; color:var(--color-navy); margin-bottom:12px; font-size:var(--fs-sm); display:flex; align-items:center; gap:10px; }
  .voice-attr .av{ width:32px;height:32px;border-radius:50%;background:var(--color-bg-blue);display:flex;align-items:center;justify-content:center; }
  .voice-attr .av svg{ width:18px;height:18px; }
  .voice p{ margin:0; font-size:var(--fs-body); line-height:1.9; }
  @media (max-width:768px){ .voice-grid{ grid-template-columns:1fr; } }

  /* ===== narrow down ===== */
  .narrow-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
  .narrow-col{ border-radius:var(--r-md); padding:30px 28px; border:1px solid var(--color-border); background:#fff; box-shadow:var(--sh-md); }
  .narrow-col.fit{ border-top:4px solid var(--color-primary); }
  .narrow-col.unfit{ border-top:4px solid #9FB6D4; }
  .narrow-col h3{ font-size:var(--fs-h3); }
  .narrow-col.fit h3{ color:var(--color-primary); }
  .narrow-col.unfit h3{ color:var(--color-text-secondary); }
  .narrow-col ul{ margin:14px 0 0; padding-left:1.3em; }
  .narrow-col li{ margin-bottom:12px; }
  @media (max-width:768px){ .narrow-grid{ grid-template-columns:1fr; } }

  /* ===== pricing ===== */
  table.price-table{ width:100%; border-collapse:separate; border-spacing:0; margin-bottom:24px; border-radius:var(--r-md); overflow:hidden; box-shadow:var(--sh-md); }
  table.price-table th, table.price-table td{ border-bottom:1px solid var(--color-border); padding:16px 18px; text-align:left; font-size:0.95rem; background:#fff; }
  table.price-table thead th{ background:var(--color-navy); color:#fff; font-weight:700; }
  table.price-table tbody tr td:first-child{ font-weight:700; color:var(--color-navy); background:var(--color-bg-light); }
  .price-disclaimer{ font-size:0.85em; color:var(--color-text-secondary); background:var(--color-bg-light); border:1px solid var(--color-border); border-radius:var(--r-sm); padding:18px 22px; margin-bottom:36px; }
  .price-cta{ max-width:560px; margin:0 auto; }
  .consent-note{ font-size:var(--fs-xs); color:var(--color-text-secondary); text-align:center; margin:16px auto 0; max-width:520px; line-height:1.8; }
  .consent-note a{ text-decoration:underline; }

  /* ===== FAQ ===== */
  details.faq-item{ background:#fff; border:1px solid var(--color-border); border-radius:var(--r-md); padding:22px 28px; margin-bottom:12px; box-shadow:var(--sh-sm); transition:box-shadow .3s var(--ease), border-color .3s var(--ease); }
  details.faq-item:hover{ box-shadow:var(--sh-md); border-color:var(--color-border-strong); }
  details.faq-item[open]{ box-shadow:var(--sh-md); }
  details.faq-item summary{ cursor:pointer; font-weight:700; color:var(--color-navy); list-style:none; position:relative; padding-right:36px; font-size:var(--fs-lead); line-height:1.6; }
  details.faq-item summary::-webkit-details-marker{ display:none; }
  details.faq-item summary::after{ content:"+"; position:absolute; right:0; top:-2px; font-size:24px; color:var(--color-primary); font-weight:400; }
  details.faq-item[open] summary::after{ content:"−"; }
  details.faq-item p{ margin:16px 0 0; color:var(--color-text-secondary); font-size:var(--fs-body); }

  /* ===== company ===== */
  .company-info{ font-size:var(--fs-sm); color:var(--color-text-secondary); line-height:2.1; }
  .company-links{ margin-top:18px; }
  .company-links a{ margin-right:20px; text-decoration:underline; color:var(--color-primary); }

  /* ===== closing ===== */
  .closing{ text-align:center; }
  .closing h2{ font-size:32px; color:var(--color-navy); max-width:760px; margin:0 auto 0.6em; }
  .closing p{ max-width:640px; margin:0 auto 36px; color:var(--color-text-secondary); }

  /* ===== internal review ===== */
  .internal{ background:#F0F3F8; border-top:4px double var(--color-border-strong); }
  .internal-flag{ background:var(--badge-law-bg); border:1px solid var(--badge-law-border); color:var(--badge-law-fg); padding:12px 18px; border-radius:10px; font-size:0.85rem; font-weight:700; margin-bottom:28px; }
  table.review-table{ width:100%; border-collapse:collapse; font-size:0.88rem; background:#fff; border-radius:10px; overflow:hidden; }
  table.review-table th, table.review-table td{ border:1px solid var(--color-border); padding:10px 12px; text-align:left; vertical-align:top; }
  table.review-table thead th{ background:var(--color-bg-blue); color:var(--color-navy); }
  .review-anchor-target{ scroll-margin-top:20px; }

  /* ===== 追従CTAバー(PC・スマホ共通) =====
     背景は optin-bg.png の上に主役色の濃紺を重ねる。
     画像が読めない場合は background-color の濃紺にフォールバックする。 */
  .sticky-cta{
    position:fixed; left:0; right:0; bottom:0;
    display:flex; align-items:center; justify-content:center; gap:12px;
    padding:13px 16px; z-index:50;
    background-color:var(--color-primary);
    background-image:
      linear-gradient(
        color-mix(in srgb, var(--color-primary) 86%, transparent),
        color-mix(in srgb, var(--color-primary) 86%, transparent)),
      url("assets/img/optin-bg.png");
    background-repeat:no-repeat;
    /* バーは高さが低いため cover だと画像の「何もない中央帯」だけが映る。
       幅に合わせて上端を見せ、四隅の絵柄が透けるようにする。 */
    background-position:center top;
    background-size:100% auto;
    border-top:1px solid var(--color-primary-dark);
    box-shadow:0 -2px 4px rgba(16,34,71,.10), 0 -8px 24px rgba(16,34,71,.22);
    /* 最初のCTAを通り過ぎるまでは隠す(JSで .is-visible を付ける) */
    opacity:0; transform:translateY(100%); pointer-events:none;
    transition:opacity .3s var(--ease), transform .3s var(--ease);
  }
  .sticky-cta.is-visible{ opacity:1; transform:translateY(0); pointer-events:auto; }
  /* ボタンの意匠はスマホ版と完全に同一。PCでは最大幅と高さだけ調整する */
  .sticky-cta a{
    flex:1; max-width:520px;
    text-align:center; height:58px; border-radius:var(--r-full);
    background:var(--cta-grad); color:#fff; font-weight:800; font-size:var(--fs-body);
    display:flex; align-items:center; justify-content:center; text-decoration:none;
    letter-spacing:.01em;
  }
  /* バーの高さ分だけ本文の下に余白を確保し、フッターが隠れないようにする */
  body{ padding-bottom:84px; }
  @media (max-width:768px){
    .sticky-cta a{ max-width:none; }
    body{ padding-bottom:76px; }
  }

  /* focus */
  a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible{
    outline:3px solid var(--color-primary-light); outline-offset:2px;
  }
  @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } .cta-btn-3d, .sticky-cta{ transition:none; } }

  /* ===== responsive FV ===== */
  @media (max-width:768px){
    /* 60代ターゲットのため、モバイルでも本文は16pxを維持(下げない) */
    body{ font-size:var(--fs-body); line-height:1.95; }
    .fv{
      padding:0 0 26px;
      background-image:none;
    }
    .fv > .wrap-wide{ max-width:none; padding:0; }
    .fv-grid{
      display:grid;
      grid-template-columns:1fr;
      grid-template-areas:"logo" "visual" "badges";
      gap:0;
      min-height:auto;
    }
    .fv-info{ display:contents; }
    .fv-info .logo-area{
      grid-area:logo;
      width:100%;
      margin:0;
      padding:20px 24px 16px;
      background:#fff;
    }
    .fv h1.fv-copy-art{
      grid-area:visual;
      z-index:2;
      align-self:center;
      justify-self:center;
      width:min(calc(100% - 48px),520px);
      margin:0;
    }
    .fv-visual{
      grid-area:visual;
      width:100%;
      min-height:0;
      aspect-ratio:3 / 2;
      background-image:url("assets/img/cta-bg-mobile.png");
      background-repeat:no-repeat;
      background-size:cover;
      background-position:center;
    }
    .fv .hero-proof-row{
      grid-area:badges;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:4px;
      width:100%;
      margin:0;
      padding:12px 10px 0;
    }
    .fv .hero-proof-row .hero-proof-card,
    .fv .hero-proof-row .hero-proof-card:last-child{
      grid-column:auto;
      width:100%;
    }
    .cta-submit{ width:100%; font-size:var(--fs-lead); height:66px; }
    .cta-form input[type="email"]{ height:60px; }
    .fv-cta-inner{ padding:26px 22px; }
    .problem-row{ padding:18px 20px; gap:16px; }
    .voice{ padding:24px 22px; }
    details.faq-item{ padding:18px 20px; }
    .cta-block .cb-eyebrow{ font-size:19px; }
    .cta-block .cb-name{ font-size:22px; }
  }

  /* print */
  @media print{
    .sticky-cta{ display:none !important; }
    .cta-submit{ background:#fff; color:var(--color-navy); border:1px solid var(--color-navy); box-shadow:none; }
    .cta-btn-3d::before{ display:none; }
    section{ padding:32px 0; }
    .fv{ background-image:none; }
  }

  /* ===== v3追加: 画像プレースホルダー ===== */
  .img-slot{
    background:linear-gradient(135deg,#EAF2FD 0%,#F5FAFF 100%);
    border:2px dashed var(--color-border-strong);
    border-radius:var(--r-md);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    color:var(--color-primary-dark); text-align:center; gap:6px;
    padding:24px; min-height:160px; font-size:0.9rem;
  }
  .img-slot .ic{ font-size:28px; opacity:.7; }
  .img-slot .cap{ font-weight:700; }
  .img-slot .sub{ font-size:0.78rem; color:var(--color-text-secondary); font-weight:400; }

  /* ===== v3追加: 問題提起 縦並び ===== */
  .problem-stack{ display:flex; flex-direction:column; gap:14px; }
  .problem-row{
    position:relative;
    display:flex; align-items:center; gap:20px;
    background:#fff; border:1px solid var(--color-border);
    border-radius:var(--r-md); padding:16px 28px; box-shadow:var(--sh-sm);
    transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
  }
  .problem-row:hover{ transform:translateX(4px); box-shadow:var(--sh-md); border-color:var(--color-border-strong); }
  /* アイコンがカード高を決めるため、余白と併せて縮める(スマホ実績のある52px) */
  .problem-row .p-icon{
    width:52px; height:52px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
  }
  .problem-row .p-icon svg{ width:100%; height:100%; display:block; }
  .problem-row .p-text{ font-size:var(--fs-lead-lg); font-weight:700; color:var(--color-navy); line-height:1.6; }
  @media (max-width:640px){
    .problem-row{ padding:16px 18px; gap:14px; }
    .problem-row .p-icon{ width:52px; height:52px; }
    .problem-row .p-text{ font-size:1rem; }
  }

  /* ===== v3追加: 使い方3ステップ ===== */
  /* ==================================================================
     v17: 使い方ステップ(参考: SBI証券LPの口座開設4ステップ)
     ・番号とタイトルを横並びで上部に置き、視線を横一直線に保つ
     ・カード上辺に濃紺ライン、角丸ほぼゼロ、影は最小限で軽く
     ・カード間を青い三角矢印でつなぐ
     ================================================================== */
  .howto-steps{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:44px;
    margin-top:20px;
    position:relative;
  }
  .howto-step{
    position:relative;
    background:#fff;
    border:1px solid #E3E9F2;
    border-top:3px solid var(--color-primary);
    border-radius:2px;
    padding:20px 20px 24px;
    box-shadow:0 1px 3px rgba(7,28,66,.05);
  }
  /* カード間の青い矢印 */
  .howto-step:not(:last-child)::after{
    content:"";
    position:absolute;
    top:50%; right:-30px;
    transform:translateY(-50%);
    width:0; height:0;
    border-top:13px solid transparent;
    border-bottom:13px solid transparent;
    border-left:17px solid #2E6FD0;
  }
  /* 番号＋タイトルを横並びに */
  .howto-step .step-head{
    display:flex; align-items:center; gap:12px;
    margin-bottom:16px;
  }
  .howto-step .step-badge{
    width:34px; height:34px; flex-shrink:0;
    border-radius:50%;
    background:var(--color-primary);
    color:#fff; font-weight:800; font-size:16px;
    display:flex; align-items:center; justify-content:center;
    box-shadow:none;
  }
  .howto-step .step-title{
    font-weight:800; color:var(--color-navy);
    font-size:15.5px; line-height:1.45; text-align:left;
  }
  /* イラスト領域を主役に */
  .howto-step .step-img{
    background:#fff;
    border:1px dashed #C7D5E8;
    border-radius:2px;
    min-height:132px;
    display:flex; align-items:center; justify-content:center;
    color:#8FA6C4; font-size:var(--fs-xs);
    margin:0;
  }
  img.step-img{
    width:100%; height:auto; object-fit:cover;
    display:block;
  }
  @media (max-width:820px){
    .howto-steps{ grid-template-columns:1fr; gap:34px; }
    .howto-step:not(:last-child)::after{
      top:auto; right:auto;
      left:50%; bottom:-26px;
      transform:translateX(-50%);
      border-top:17px solid #2E6FD0;
      border-bottom:0;
      border-left:13px solid transparent;
      border-right:13px solid transparent;
    }
  }

  /* ===== v3追加: 単一カラムの「向いている方」 ===== */
  /* ==================================================================
     v16: 「向いている方」リスト(参考: SBI証券LP)
     ・白いカードの中に、濃紺のピル型見出しバー
     ・チェックボックスは四角・黒の太枠・赤いチェック
     ・重要語だけ青文字＋黄色マーカーで強調
     ================================================================== */
  .fit-single{
    max-width:820px; margin:0 auto;
    background:#fff;
    border:1px solid var(--color-border);
    border-radius:var(--r-md);
    padding:28px 32px 32px;
    box-shadow:var(--sh-md);
  }
  /* 濃紺のピル型見出しバー */
  .fit-single h3{
    background:var(--color-primary);
    color:#fff;
    font-size:clamp(17px, 2.2vw, 22px);
    font-weight:800;
    text-align:center;
    letter-spacing:.02em;
    border-radius:var(--r-full);
    padding:13px 24px;
    margin:0 0 24px;
    line-height:1.4;
  }
  .fit-single ul{ margin:0; padding:0; list-style:none; }
  .fit-single li{
    display:flex; align-items:flex-start; gap:14px;
    padding:9px 0;
    font-size:17px;
    line-height:1.7;
    color:var(--color-text);
    font-weight:700;
  }
  /* 四角いチェックボックス(黒の太枠＋赤いチェック) */
  .fit-single li .chk{
    width:26px; height:26px; flex-shrink:0;
    border:2.5px solid #1A1A1A;
    border-radius:3px;
    background:#fff;
    position:relative;
    margin-top:4px;
  }
  .fit-single li .chk::after{
    content:"";
    position:absolute;
    left:6px; top:1px;
    width:9px; height:16px;
    border:solid #D6001C;
    border-width:0 3.5px 3.5px 0;
    transform:rotate(42deg);
  }
  /* 重要語の強調: 青文字＋黄色マーカー */
  .fit-single .mk{
    color:var(--color-primary);
    font-weight:800;
    background:linear-gradient(transparent 62%, #FCEB9B 62%);
    padding:0 2px;
  }
  @media (max-width:768px){
    .fit-single{ padding:22px 18px 24px; }
    .fit-single h3{ padding:12px 16px; margin-bottom:18px; }
    .fit-single li{ font-size:15.5px; gap:11px; padding:8px 0; }
    .fit-single li .chk{ width:23px; height:23px; }
    .fit-single li .chk::after{ left:5px; top:1px; width:8px; height:14px; border-width:0 3px 3px 0; }
  }

  /* ===== v3追加: 提案(今試す理由) ===== */
  /* カードにせず、テキストのみで見せる */
  .try-now{
    background:none; border:none; padding:0;
    text-align:center;
  }
  .try-now .tn-lead{
    font-size:var(--fs-lead-lg);
    color:var(--color-text);
    line-height:var(--lh-lead);
    font-weight:500;
  }

  /* ===== v5: 濃紺セクション(スクロールの締め) ===== */
  section.dark{
    background:linear-gradient(160deg, var(--navy-deep) 0%, var(--navy-mid) 100%);
    color:var(--on-navy);
  }
  section.dark .section-head h2{ color:#fff; }
  section.dark .section-head .lead{ color:var(--on-navy-dim); }

  /* --- 濃紺の上の白カード(SBI流の高コントラスト表現) --- */
  section.dark .stat-card,
  section.dark .capability-col,
  section.dark .cond-box,
  section.dark .voice,
  section.dark .fit-single,
  section.dark .fv-cta-inner,
  section.dark details.faq-item,
  section.dark .howto-step{
    background:#fff;
    border-color:rgba(255,255,255,.16);
    box-shadow:0 4px 10px rgba(0,0,0,.18), 0 18px 44px rgba(0,0,0,.24);
  }
  section.dark .mech-head{ color:#fff; }
  section.dark .mech-body{ color:var(--on-navy); }
  section.dark .mech-body p{ color:var(--on-navy); }
  section.dark .footer-note{ color:var(--on-navy-dim); }
  section.dark .capability-col h3{ color:var(--color-primary); }
  section.dark .capability-col li{ color:var(--color-text); }
  section.dark .capability-col.dont h3{ color:var(--color-text-secondary); }
  section.dark .cond-box dt{ color:var(--color-text-secondary); }
  section.dark .cond-box dd{ color:var(--color-text); }
  section.dark .try-now .tn-lead{ color:var(--on-navy); }
  section.dark .cta-block .cb-eyebrow,
  section.dark .cta-block .cb-name{ color:#fff; }
  section.dark .cta-block .cb-sub,
  section.dark .cta-block .cb-arrow{ color:var(--on-navy-dim); }
  section.dark .demo-note{ color:var(--on-navy-dim); }
  section.dark .fv-cta-hint{ color:var(--color-navy); }

  /* 濃紺上のラベル・数字の見え方調整 */
  section.dark .eyebrow-en{ color:#F0A44E; }
  section.dark .section-accent .dot{ background:var(--cta); }
  section.dark .section-accent .line{ background:var(--cta-grad); }
  section.dark .stat-num{ color:var(--acc); }
  section.dark .mech-head .num{ color:#FF9B45; }
  section.dark .badge-law{ background:#FDECEC; }
  section.dark .badge-client{ background:#E7EEF9; }
  section.dark .badge-kari{ background:#FFF4D6; color:#8A6D00; }

  .cta-block{ text-align:center; }
  .cta-block .cb-eyebrow{ font-weight:800; color:var(--color-navy); font-size:22px; margin-bottom:6px; letter-spacing:-.01em; }
  .cta-block .cb-sub{ color:var(--color-text-secondary); font-size:15px; margin-bottom:2px; }
  .cta-block .cb-name{ font-size:26px; font-weight:800; color:var(--color-navy); margin-bottom:12px; }
  .cta-block .cb-name .ai{ color:var(--color-primary); }
  .cta-block .cb-free{
    display:inline-block;
    background:var(--acc-grad); color:#fff;
    font-weight:800; padding:8px 28px; border-radius:var(--r-full);
    font-size:17px; margin-bottom:16px; letter-spacing:.03em;
    box-shadow:var(--sh-acc);
  }
  .cta-block .cb-arrow{ color:var(--color-text-secondary); font-size:15px; margin-bottom:14px; font-weight:700; }

  /* ===== CTAエリア: 背景ビジュアル(オファー・クロージング共通) =====
     どちらも明るい背景に統一し、白ベールで可読性を確保する。
     ベールは上を薄く(製品ビジュアルを見せる)・下を濃く(フォームの可読性優先)。 */
  .cta-photo{
    position:relative;
    /* 画像が読めない場合は濃紺のフォールバック */
    background-color:var(--color-primary);
    /* 追従バーと同じ重ね方: 濃紺の半透明を optin-bg.png の上に重ねる */
    background-image:
      linear-gradient(
        color-mix(in srgb, var(--color-primary) 86%, transparent),
        color-mix(in srgb, var(--color-primary) 86%, transparent)),
      url("assets/img/optin-bg.png");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
  }
  .cta-photo > .wrap{ position:relative; z-index:1; }

  /* ===== CTAエリア上部: 背景＋FV共通コピー＋実績バッジ＋AIロボ ===== */
  .cta-hero{
    position:relative;
    z-index:1;
    isolation:isolate;
    min-height:clamp(580px,55vw,720px);
    margin:0 auto 18px;
    overflow:hidden;
    background-color:#EDF5FF;
    background-image:url("assets/img/cta-bg-desktop.png");
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;
  }
  .cta-hero-inner{
    position:relative;
    width:min(100%,1280px);
    min-height:inherit;
    margin:0 auto;
    padding:28px 32px 22px;
  }
  .cta-hero-message{
    position:relative;
    z-index:2;
    width:min(58%,620px);
    margin-bottom:8px;
  }
  .cta-hero-text{
    display:block;
    width:min(100%,560px);
    height:auto;
    margin:0 auto;
  }
  .cta-hero-badges{
    position:relative;
    z-index:3;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    align-items:center;
    gap:10px;
    width:min(58%,590px);
  }
  .cta-hero-badge{
    margin:0;
    filter:drop-shadow(0 7px 12px rgba(12,35,74,.18));
  }
  .cta-hero-badge img{
    display:block;
    width:100%;
    height:auto;
    aspect-ratio:1 / 1;
    object-fit:contain;
  }
  .cta-hero-robot{
    position:absolute;
    z-index:2;
    right:0;
    bottom:-1px;
    display:block;
    width:auto;
    height:clamp(430px,52vw,690px);
    filter:drop-shadow(-12px 14px 24px rgba(19,64,121,.22));
  }
  @media (max-width:768px){
    .cta-hero{
      min-height:clamp(620px,160vw,760px);
      margin-bottom:12px;
      background-image:
        url("assets/img/cta-bg-mobile.png"),
        linear-gradient(180deg,#FFFFFF 0%,#F1F7FF 52%,#DDEEFF 100%);
      background-repeat:no-repeat,no-repeat;
      background-size:100% auto,100% 100%;
      background-position:center top,center;
    }
    .cta-hero-inner{
      display:block;
      min-height:inherit;
      padding:16px 16px 0;
    }
    .cta-hero-message{
      width:min(calc(100% - 32px),520px);
      margin:0 auto;
    }
    .cta-hero-text{ width:100%; max-width:520px; }
    .cta-hero-robot{
      position:absolute;
      z-index:2;
      left:50%;
      right:auto;
      bottom:0;
      width:min(76%,270px);
      height:auto;
      margin:0;
      transform:translateX(-50%);
    }
    .cta-hero-badges{
      position:absolute;
      z-index:3;
      left:50%;
      bottom:6px;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:4px;
      width:calc(100% - 12px);
      max-width:420px;
      margin:0;
      padding:0;
      transform:translateX(-50%);
    }
    .cta-hero-badge:last-child{
      grid-column:auto;
      width:100%;
    }
  }

  .cta-product-visual{ max-width:620px; margin:0 auto 20px; }
  .cta-product-visual img{ width:100%; height:auto; display:block; }
  .cta-product-visual.is-compact{ max-width:520px; }
  @media (max-width:768px){
    .cta-product-visual, .cta-product-visual.is-compact{ max-width:none; margin:0 auto 12px; }
  }

  /* ===== CTAエリア: FVと同じ「左テキスト・右ビジュアル」の並び =====
     モバイルはビジュアルが上・テキストが下(従来どおり)。
     900px以上でFVと同じ2カラムに切り替える。                        */
  .cta-grid{
    display:grid;
    grid-template-columns:1fr;
    grid-template-areas:"visual" "info";
    align-items:center;
    gap:20px;
  }
  .cta-grid .cta-info{ grid-area:info; }
  .cta-grid .cta-product-visual{ grid-area:visual; }
  /* 画像とフォームが1つの塊に見えるよう、間の余白は詰める */
  .cta-block .fv-cta-inner{ margin-top:16px; }
  @media (min-width:901px){
    /* 左右の端に散らないよう、グリッド自体を中央に寄せ、
       テキストは右端・ビジュアルは左端に寄せて中央でバランスさせる。 */
    .cta-grid{
      grid-template-columns:auto auto;
      grid-template-areas:"info visual";
      justify-content:center;
      gap:48px;
      max-width:1040px;
      margin:0 auto;
    }
    .cta-grid .cta-info{ text-align:left; }
    .cta-grid .cta-product-visual{ margin:0; width:480px; max-width:100%; }
    .cta-grid .cta-product-visual.is-compact{ width:430px; }
  }

  /* ===== v9: 濃紺セクションの見出しバー(SBI流) =====
     濃紺より一段明るい青の帯を全幅に走らせ、セクションの開始を明示する。 */
  section.dark{ padding-top:0; padding-bottom:72px; }
  section.dark.no-bar{ padding-top:72px; }
  @media (max-width:768px){ section.dark{ padding-bottom:48px; } section.dark.no-bar{ padding-top:48px; } }
  .sec-bar-head{
    background:linear-gradient(90deg, #12489F 0%, #0F3E8C 100%);
    border-bottom:1px solid rgba(255,255,255,.12);
    padding:26px 20px;
    margin-bottom:48px;
    text-align:center;
  }
  .sec-bar-head .sbh-inner{
    display:inline-flex; align-items:center; gap:14px;
    color:#fff; font-weight:800;
    font-size:var(--fs-h2);
    line-height:1.4;
    letter-spacing:-.01em;
  }
  .sec-bar-head .sbh-ic{
    width:38px; height:38px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
  }
  .sec-bar-head .sbh-ic svg{ width:36px; height:36px; }
  .sec-bar-head .sbh-image-title{
    display:block;
    margin:0;
    line-height:0;
  }
  .sec-bar-head .sbh-title-image{
    display:block;
    width:auto;
    height:clamp(52px, 6vw, 84px);
    max-width:100%;
    margin:0 auto;
    object-fit:contain;
  }
  @media (max-width:768px){
    .sec-bar-head{ padding:14px 16px; margin-bottom:36px; }
  }

  /* ===== FV直下: 個別銘柄の実績ギャラリー ===== */
  .case-results-head{
    position:relative;
    z-index:1;
    margin-bottom:70px;
    padding:28px 20px;
    text-align:center;
    background:linear-gradient(90deg, #12489F 0%, #0F3E8C 100%);
    border-bottom:1px solid rgba(255,255,255,.12);
  }
  .case-results-head::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:-38px;
    width:96px;
    height:38px;
    background:#0F3E8C;
    clip-path:polygon(0 0,100% 0,50% 100%);
    transform:translateX(-50%);
  }
  .case-results-title{
    margin:0;
    color:#fff;
    font-size:var(--fs-h2);
    font-weight:800;
    line-height:0;
  }
  .case-results-title-image{
    display:block;
    width:min(100%, 1033px);
    height:auto;
    margin:0 auto;
  }
  .case-results-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:24px;
  }
  .case-result-card{
    margin:0;
    padding:4px;
    overflow:hidden;
    background:#030303;
    border:1px solid rgba(217,169,57,.72);
    border-radius:8px;
    box-shadow:0 14px 34px rgba(0,0,0,.3);
  }
  .case-result-card img{
    display:block;
    width:100%;
    height:auto;
    border-radius:5px;
  }
  @media (max-width:768px){
    .case-results-head{
      margin-bottom:50px;
      padding:20px 18px;
    }
    .case-results-head::after{
      bottom:-30px;
      width:72px;
      height:30px;
    }
    .case-results-grid{
      grid-template-columns:1fr;
      gap:16px;
    }
    .case-result-card{ padding:3px; border-radius:6px; }
  }


  /* ===== v10: 游ゴシック環境での数字の見え方調整 =====
     游ゴシックの数字は細く見えるため、重要な数字は欧文フォントを
     優先させて太さと視認性を確保する。 */
  .num, .stat-num, .mech-head .num, table.stock-table .num{
    font-family:"Helvetica Neue", Arial, "Segoe UI", Roboto,
      "游ゴシック Medium", "Yu Gothic Medium", sans-serif;
    font-variant-numeric:tabular-nums;
  }
  .stat-num{ font-weight:700; }

  /* ==================================================================
     v11: SBI型セクション
     参考: SBI証券LPの「手数料ゼロ革命」ブロック
     ・濃紺の見出しバー(白丸アイコン + 小ラベル/大見出しの2段組み)
     ・淡い青の面に、角丸ほぼゼロの白カードを幅広く置く
     ・カード左上にはみ出す大型の円マーカー(2段組み)
     ・見出しの中で数字だけ極端に大きい
     ================================================================== */
  section.sbi{ padding:0 0 64px; background:#E3ECF5; }
  @media (max-width:768px){ section.sbi{ padding-bottom:44px; } }

  /* --- 濃紺バー(2段組み) --- */
  .sbi-bar{
    background:#0B3D91;
    padding:18px 20px;
    margin-bottom:40px;
    text-align:center;
  }
  .sbi-bar-inner{
    display:inline-flex; align-items:center; gap:16px;
    text-align:left;
  }
  .sbi-bar-ic{
    width:52px; height:52px; flex-shrink:0;
    border-radius:50%; background:#fff;
    display:flex; align-items:center; justify-content:center;
  }
  .sbi-bar-ic svg{ width:30px; height:30px; }
  .sbi-bar-txt .sbi-bar-label{
    display:block; color:#fff; font-size:13px; font-weight:700;
    letter-spacing:.08em; line-height:1.4; margin-bottom:2px;
  }
  /* ラベルなしの場合はタイトルを中央に */
  .sbi-bar-txt:not(:has(.sbi-bar-label)) .sbi-bar-title{ line-height:1.2; }
  .sbi-bar-txt .sbi-bar-title{
    display:block; color:#fff;
    font-size:clamp(19px, 2.4vw, 27px); font-weight:800;
    letter-spacing:.01em; line-height:1.3;
  }
  @media (max-width:768px){
    .sbi-bar{ padding:14px 16px; margin-bottom:28px; }
    .sbi-bar-ic{ width:42px; height:42px; }
    .sbi-bar-ic svg{ width:24px; height:24px; }
  }

  /* --- 白カード(角丸ほぼゼロ・幅広) --- */
  .sbi-wrap{ max-width:1000px; margin:0 auto; padding:0 24px; }
  .sbi-card{
    position:relative;
    background:#fff;
    border-radius:2px;
    padding:44px 56px 40px;
    margin-bottom:34px;
  }
  .sbi-card:last-child{ margin-bottom:0; }
  @media (max-width:768px){
    .sbi-wrap{ padding:0 14px; }
    .sbi-card{ padding:34px 20px 26px; margin-bottom:26px; }
  }

  /* --- 左上の大型円マーカー(2段組み・カードからはみ出す) --- */
  .sbi-mark{
    position:absolute; top:-26px; left:-18px;
    width:84px; height:84px; border-radius:50%;
    background:#E8175D; color:#fff;
    display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    box-shadow:0 4px 12px rgba(180,10,70,.28);
    z-index:2; line-height:1.1;
  }
  .sbi-mark .mk-label{ font-size:14px; font-weight:800; letter-spacing:.04em; }
  .sbi-mark .mk-num{ font-size:30px; font-weight:800; margin-top:1px; }
  @media (max-width:768px){
    .sbi-mark{ width:62px; height:62px; top:-18px; left:-8px; }
    .sbi-mark .mk-label{ font-size:11px; }
    .sbi-mark .mk-num{ font-size:22px; }
  }

  /* --- 見出し(数字だけ極端に大きい) --- */
  .sbi-headline{
    text-align:center;
    color:#0B2E6B;
    font-size:clamp(24px, 3.6vw, 40px);
    font-weight:800;
    line-height:1.35;
    letter-spacing:-.01em;
    margin:0 0 24px;
    font-feature-settings:"palt" 1;
  }
  .sbi-headline .big{
    font-size:1.9em;
    color:var(--color-primary);
    font-weight:800;
    line-height:.9;
    vertical-align:-.06em;
    margin:0 .02em;
    font-family:"Helvetica Neue", Arial, sans-serif;
  }
  .sbi-headline .unit{ font-size:1em; }
  /* 強調語以外は黒で締める */
  .sbi-headline .plain{ color:var(--color-text); }
  @media (max-width:768px){
    .sbi-headline{ margin-bottom:18px; }
    .sbi-headline .big{ font-size:1.7em; }
  }

  /* --- カード内の本文・箇条書き・注記 --- */
  .sbi-body{ font-size:var(--fs-body); line-height:1.9; color:var(--color-text); margin:0 0 16px; }
  .sbi-body b{ font-weight:800; }
  .sbi-list{ margin:0 0 16px; padding:0; list-style:none; }
  .sbi-list li{ font-size:var(--fs-body); line-height:1.9; color:var(--color-text); }
  .sbi-list li::before{ content:"・"; }
  .sbi-notes{ margin:0; padding:0; list-style:none; }
  .sbi-notes li{
    font-size:12.5px; line-height:1.8; color:#6B7686;
  }
  .sbi-notes a{ color:var(--color-primary); text-decoration:underline; }
  /* モバイルでも本文は縮めない(60代ターゲットのため16px以上を維持) */

  /* ==================================================================
     v12: 全銘柄開示セクション(可読性最優先)
     ・データ表は明るい背景に置く(濃紺だと数字が読みにくいため)
     ・サマリーは「78.7%が上昇」を主役にして、何がポジティブかを明示
     ・騰落率の根拠が追えるよう「抽出時株価」列を復活
     ================================================================== */
  section.disclose{ background:#F4F7FC; }




  /* --- 表: 明るい背景で可読性を確保 --- */
  .dc-tablewrap{
    background:#fff; border:1px solid var(--color-border);
    border-radius:var(--r-md); overflow:hidden;
  }
  .dc-tablehead{
    display:flex; align-items:center; justify-content:space-between;
    gap:12px; flex-wrap:wrap;
    padding:16px 20px; border-bottom:1px solid var(--color-border);
    background:var(--color-bg-light);
  }
  .dc-tablehead .t-ttl{ font-weight:800; color:var(--color-navy); font-size:15.5px; }
  .dc-scroll{ overflow:auto; max-height:520px; }
  table.dc-table{
    width:100%; border-collapse:collapse; min-width:720px;
    font-size:14.5px;
  }
  table.dc-table th, table.dc-table td{
    padding:12px 14px; border-bottom:1px solid #E8EEF7; white-space:nowrap;
  }
  table.dc-table thead th{
    position:sticky; top:0; z-index:1;
    background:#0B3D91; color:#fff; font-weight:700; font-size:13.5px;
    text-align:right; letter-spacing:.02em;
  }
  table.dc-table thead th:nth-child(1),
  table.dc-table thead th:nth-child(2),
  table.dc-table thead th:nth-child(3){ text-align:left; }
  table.dc-table td{ text-align:right; color:var(--color-text); }
  table.dc-table td:nth-child(1),
  table.dc-table td:nth-child(2),
  table.dc-table td:nth-child(3){ text-align:left; }
  table.dc-table tbody tr:nth-child(even){ background:#F8FAFD; }
  table.dc-table tbody tr:hover{ background:#EAF1FB; }
  table.dc-table .t-code{ color:var(--color-text-secondary); font-size:13.5px; }
  table.dc-table .t-rate{ font-weight:800; }
  table.dc-table .t-rate.up{ color:#0B6E4F; }
  table.dc-table .t-rate.down{ color:#6B7686; }
  table.dc-table .t-dbl{
    display:inline-block; margin-left:6px;
    background:var(--acc); color:#fff; font-size:10.5px; font-weight:800;
    padding:1px 6px; border-radius:3px; vertical-align:1px;
  }
  .dc-foot{
    padding:14px 20px; border-top:1px solid var(--color-border);
    background:var(--color-bg-light);
    font-size:12.5px; color:var(--color-text-secondary); line-height:1.8;
  }
  @media (max-width:768px){
    table.dc-table{ font-size:13.5px; }
    table.dc-table th, table.dc-table td{ padding:10px 12px; }
    .dc-scroll{ max-height:420px; }
  }

  /* v34: 実績セクションの円(FVより一回り大きく) */
  .perf-row{ gap:28px; margin-bottom:0; }
  .perf-row .stat-card{ max-width:230px; padding:18px; }
  .perf-row .stat-icon{ width:52px; height:52px; margin-bottom:4px; }
  .perf-row .stat-label{ font-size:15px; margin-bottom:3px; }
  .perf-row .stat-num{ font-size:54px; }
  .perf-row.stats-row .stat-card.is-strong .stat-num{ font-size:60px; }
  .perf-row .stat-unit{ font-size:20px; }
  .perf-row.stats-row .stat-card.is-strong .stat-unit{ font-size:22px; }
  @media (max-width:1024px){
    .perf-row .stat-card{ max-width:190px; }
    .perf-row .stat-num{ font-size:44px; }
    .perf-row.stats-row .stat-card.is-strong .stat-num{ font-size:50px; }
  }
  @media (max-width:600px){
    .perf-row{ gap:10px; }
    .perf-row .stat-card{ max-width:none; padding:8px; }
    .perf-row .stat-icon{ width:32px; height:32px; }
    .perf-row .stat-label{ font-size:11px; }
    .perf-row .stat-num{ font-size:30px; }
    .perf-row.stats-row .stat-card.is-strong .stat-num{ font-size:34px; }
    .perf-row .stat-unit{ font-size:13px; }
  }

  /* ===== v9: カード左肩の赤丸番号バッジ ===== */
  .num-badge{
    position:absolute; top:-12px; left:-12px;
    width:38px; height:38px; border-radius:50%;
    background:var(--acc); color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-weight:800; font-size:15px;
    box-shadow:0 2px 6px rgba(168,0,22,.35);
    z-index:2;
  }
  @media (max-width:768px){
    .num-badge{ width:32px; height:32px; font-size:13px; top:-8px; left:-8px; }
  }

  /* ===== v9: フッターはニュートラルグレー(本文の青系と切り離す) ===== */
  section.footer-gray{
    background:#EDEFF2;
    border-top:1px solid #DDE1E6;
  }
  section.footer-gray .company-info{ color:#5A6270; }
  section.footer-gray .company-links a{ color:#3A4759; }
  section.footer-gray .reg-no{ background:#fff; border-color:#DDE1E6; }

  /* ===== v3追加: 登録番号フッター ===== */
  .reg-no{ background:var(--color-bg-light); border:1px solid var(--color-border); border-radius:var(--r-sm); padding:16px 20px; font-size:var(--fs-sm); color:var(--color-text-secondary); margin-top:18px; }
  .reg-no .rn-box{ display:inline-block; background:#fff; border:1px dashed var(--color-border-strong); border-radius:6px; padding:2px 10px; color:var(--color-primary-dark); font-weight:700; }
  .footer-note{ font-size:var(--fs-xs); color:var(--color-text-secondary); line-height:1.9; margin-top:14px; }

  /* ===== 離脱対策ポップアップ ===== */
  body.exit-popup-open{ overflow:hidden; }
  .exit-popup{
    position:fixed;
    inset:0;
    z-index:10000;
    display:grid;
    place-items:center;
    padding:18px;
    background:rgba(2,13,36,.82);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .2s ease, visibility .2s ease;
  }
  .exit-popup.is-open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }
  .exit-popup-dialog{
    position:relative;
    width:min(92vw, 51.8vh, 500px);
    width:min(92vw, 51.8dvh, 500px);
    max-height:92vh;
    max-height:92dvh;
    aspect-ratio:941 / 1672;
    transform:translateY(12px) scale(.98);
    transition:transform .2s ease;
    filter:drop-shadow(0 22px 54px rgba(0,0,0,.45));
  }
  .exit-popup.is-open .exit-popup-dialog{ transform:none; }
  .exit-popup-image{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    border-radius:14px;
  }
  .exit-popup-close{
    position:absolute;
    top:-14px;
    right:-14px;
    z-index:2;
    width:44px;
    height:44px;
    border:2px solid #fff;
    border-radius:50%;
    background:#071f54;
    color:#fff;
    font:700 28px/1 Arial, sans-serif;
    cursor:pointer;
    box-shadow:0 6px 18px rgba(0,0,0,.35);
  }
  .exit-popup-close:hover{ background:#b30712; }
  .exit-popup-close:focus-visible,
  .exit-popup-cta:focus-visible{
    outline:4px solid #ffd45a;
    outline-offset:3px;
  }
  .exit-popup-cta{
    position:absolute;
    left:3.2%;
    right:3.2%;
    bottom:2.2%;
    height:13.5%;
    border-radius:13%;
  }
  @media (max-width:600px){
    .exit-popup{ padding:12px; }
    .exit-popup-dialog{ width:min(94vw, 52.9dvh); }
    .exit-popup-close{ top:-8px; right:-8px; width:40px; height:40px; font-size:25px; }
  }
  @media (prefers-reduced-motion:reduce){
    .exit-popup, .exit-popup-dialog{ transition:none; }
  }