/* トップページ（/ と /en/）の本文区画規則。2026-08-18 に landing.html のインライン <style> を
   そのまま抽出したもの（日英で同じ見た目を保証するための共有正本）。
   並び順に意味がある: karuzip-type → site-shell → hero-sequence → social-links → consent → これ。
   改変するときは両頁の <link> の版数（?v=）を同時に上げること。 */
  :root{
    --blue:#2B6FD6; --blue-d:#225BB0; --blue-l:#4A90E2; --ink:#1D2632; --ink2:#4a5564;
    --mute:#8893A3; --line:#E6EBF1; --bg:#FAFBFC; --tint:#F2F7FE;
    /* 罫線と状態色。ヒーローの操作デモで繰り返し使うので、都度ハードコードせずここに置く。 */
    --line-strong:#cdd6e2; --line-tint:#cfe0f7; --line-hover:#a9bdd8; --green:#138A62; --amber:#A56316;
    /* 文字化け表示（デモの化けた名前）。hero-sequence.css が参照する。 */
    --name-bad-bg:#fff9ef; --name-bad-line:#ead7b7; --name-bad-fg:#895d26;

    /* 書体トークン（--font-* / --fw-*）は /karuzip-type.css が持つ。 */

    /* 版面。360 / 390 / 430 は 3 つのレイアウトではなく 1 本の曲線上の 3 点として扱う。 */
    --fs-fluid-h2:clamp(21px,calc(2.2vw + 13px),32px);
    --fs-fluid-lead:clamp(14.5px,calc(.55vw + 12.5px),16px);
    --fs-fluid-body:clamp(13.5px,calc(.4vw + 12px),15.5px);
    --wrap-pad-fluid:clamp(16px,4vw,24px);
    --section-py-fluid:clamp(40px,6.4vw,72px);
    --nav-h:64px; --nav-h-mobile:56px; --bottombar-h:46px; --hit-target:44px;
  }
  * { margin:0; padding:0; box-sizing:border-box; }
  html { scroll-behavior:smooth; scroll-padding-top:78px; }
  body { font-family:var(--font-body); color:var(--ink); background:#fff; line-height:1.75; }
  svg { display:block; }
  a { color:inherit; text-decoration:none; }
  .wrap { max-width:1080px; margin:0 auto; padding:0 var(--wrap-pad-fluid); }

  /* header */
  header { position:sticky; top:0; z-index:50; background:rgba(255,255,255,.97); border-bottom:1px solid var(--line); transition:box-shadow .2s ease; }
  header.is-scrolled { box-shadow:0 8px 24px rgba(29,38,50,.07); }
  .nav { position:relative; display:flex; align-items:center; height:64px; gap:28px; }
  .brand { display:flex; align-items:center; gap:9px; }
  .brand .logo { width:30px; height:30px; }
  /* 字標は 700。900 は小さい字号で潰れるので使わない（h1 だけが 900）。 */
  .brand b { font-family:var(--font-brand); font-size:19px; font-weight:var(--fw-wordmark); letter-spacing:-.4px; }
  .brand b .zip { color:var(--blue); }
  .nav .links { display:flex; align-items:center; gap:26px; margin-left:18px; font-size:14px; color:var(--ink2); }
  .nav .links > a { min-height:44px; display:inline-flex; align-items:center; position:relative; }
  .nav .links > a:hover { color:var(--blue); }
  .nav .links > a::after { content:''; position:absolute; left:0; right:0; bottom:4px; height:2px; border-radius:2px; background:var(--blue); transform:scaleX(0); transition:transform .18s ease; }
  .nav .links > a[aria-current="page"] { color:var(--blue-d); font-weight:700; }
  .nav .links > a[aria-current="page"]::after { transform:scaleX(1); }
  .nav .cta { margin-left:auto; }
  .mobile-nav { display:none; }
  .btn { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-display); font-weight:var(--fw-bold); cursor:pointer; border:none; border-radius:9px; transition:.15s; }
  .btn-primary { background:var(--blue); color:#fff; padding:11px 22px; font-size:14.5px; box-shadow:0 6px 16px rgba(43,111,214,.28); }
  .btn-primary:hover { background:var(--blue-d); transform:translateY(-1px); }
  .btn-secondary { background:#fff; color:var(--blue-d); padding:10px 21px; font-size:14.5px; border:1px solid #b9cdea; box-shadow:0 5px 14px rgba(20,40,80,.08); }
  .btn-secondary:hover { color:var(--blue); border-color:var(--blue); transform:translateY(-1px); }
  .btn-lg { padding:15px 32px; font-size:16px; border-radius:11px; }
  .btn svg { width:18px; height:18px; }
  .mobile-only { display:none; }
  a:focus-visible, summary:focus-visible { outline:3px solid rgba(43,111,214,.34); outline-offset:3px; border-radius:8px; }
  .nav-progress { position:absolute; z-index:2; left:0; bottom:-1px; width:100%; height:2px; background:linear-gradient(90deg,var(--blue),var(--blue-l)); transform:scaleX(0); transform-origin:left center; will-change:transform; }

  /* hero */
  .hero { background:linear-gradient(180deg,#fff, var(--tint)); padding:clamp(38px,5vw,70px) 0 clamp(40px,5vw,64px); border-bottom:1px solid var(--line); }
  .hero .row { display:grid; grid-template-columns:1.06fr 1fr; gap:0 48px; align-items:center; }
  /* h1 は桁（このカラム）に対して測る。880〜1080px はビューポートが広いのに桁は狭いままなので、
     vw ベースの clamp だと桁が足りる前に上限へ達して 4 行に折れる。cqw なら桁そのものが基準になる。
     文案を変えたら必ず測り直すこと（1080px 設計時の桁幅 506px に対し 42px で 485px）。 */
  .hero-copy { grid-column:1; container-type:inline-size; }
  .badge { display:inline-flex; align-items:center; gap:8px; background:var(--tint); border:1px solid var(--line-tint); color:var(--blue); font-size:12.5px; font-weight:600; padding:6px 13px; border-radius:999px; margin-bottom:18px; }
  .badge b { font-weight:700; }
  h1 { font-family:var(--font-brand); font-size:clamp(25px,8.5cqw,42px); line-height:1.3; font-weight:var(--fw-heavy); letter-spacing:-.5px; margin-bottom:18px; }
  .hero-accent { color:var(--blue); }
  .lead { font-size:var(--fs-fluid-lead); line-height:1.9; color:var(--ink2); max-width:30em; margin-bottom:28px; }
  /* リードの 2 文目以降はモバイルで畳む（デモを 1 画面に収めるため）。開閉は下の script。 */
  .lead-more { display:none; align-items:center; min-height:var(--hit-target); margin:-20px 0 8px; padding:0; background:none; border:0; font-family:inherit; font-size:13px; font-weight:700; color:var(--blue-d); cursor:pointer; }
  .lead-more::after { content:'＋'; margin-left:6px; font-weight:400; }
  .lead-more[hidden] { display:none; }
  .hero-cta { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
  .hero-cta .sub { font-size:12.5px; color:var(--mute); }
  /* ヒーローの CTA だけ大きめ・影なし。#download 側の同名ボタンには影響させない。 */
  .hero-cta .btn { padding:14px 24px; font-size:15px; box-shadow:none; transition:background .18s ease,border-color .18s ease,color .18s ease; }
  .hero-cta .btn:hover { transform:none; }
  .hero-cta .btn svg { width:15px; height:15px; }
  .hero-cta .btn-secondary { color:var(--ink); border-color:var(--line-strong); }
  .hero-cta .btn-secondary:hover { color:var(--ink); border-color:var(--line-hover); }
  .download-choice-btn { gap:8px; padding:11px 17px; border-radius:9px; font-size:14px; }
  .download-choice-btn svg { width:21px; height:21px; flex:none; }
  .download-compat { flex-basis:100%; margin-top:10px; font-size:12.5px; color:var(--mute); line-height:1.5; }

  /* ヒーローの操作デモの見た目は /hero-sequence.css が持つ。
     このページはグリッド上の置き場所だけを決める。 */
  .mobile-pc-note { display:none; }
  .mobile-download-title { display:none; }
  .trust { grid-column:1; display:flex; gap:20px; margin-top:26px; padding-top:22px; border-top:1px solid var(--line); flex-wrap:wrap; }
  .trust .ti { display:flex; align-items:center; gap:7px; font-size:13px; color:var(--ink2); font-weight:500; }
  .trust .ti svg { width:17px; height:17px; color:var(--blue); }
  /* 第三者の根拠へ飛べることが要点なので、リンクだと分かる下線色にする（--line では背景に溶けて見えない）。
     下線は内側の span に付け、タップ領域拡大（モバイル min-height:44px）で下線が文字から離れないようにする。 */
  .trust a.ti { text-decoration:none; transition:.15s; }
  .trust a.ti span { border-bottom:1px dashed #b9cdea; padding-bottom:2px; transition:.15s; }
  .trust a.ti:hover { color:var(--blue); }
  .trust a.ti:hover span { border-bottom-color:var(--blue); }

  /* 操作デモ本体（ステージ・カーソル・メニュー・進捗窓・文字化けの修復・字幕）は
     /hero-sequence.css が正本。ここはヒーローのグリッド上の置き場所だけ。 */
  .hero-stage { grid-column:2; grid-row:1 / span 2; min-width:0; }

  section { padding:var(--section-py-fluid) 0; }
  /* 視口外セクションは描画を遅延（初回描画の Style&Layout 削減。見た目の変化なし） */
  section:not(.hero):not(#about-karuzip) { content-visibility:auto; contain-intrinsic-size:auto 700px; }
  footer { content-visibility:auto; contain-intrinsic-size:auto 420px; }
  #about-karuzip { padding:36px 0 40px; border-bottom:1px solid var(--line); background:var(--tint); }
  section[id] { scroll-margin-top:78px; }
  .sec-alt { background:var(--bg); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .sec-line { border-bottom:1px solid var(--line); }
  .sec-head { text-align:center; max-width:640px; margin:0 auto 48px; }
  .sec-head .k { font-family:var(--font-display); font-size:13px; font-weight:var(--fw-bold); color:var(--blue); letter-spacing:.04em; margin-bottom:10px; }
  .sec-head h2 { font-family:var(--font-display); font-size:clamp(21px,calc(2.2vw + 13px),31px); font-weight:var(--fw-bold); line-height:1.35; letter-spacing:-.4px; margin-bottom:12px; }
  .sec-head p { font-size:15px; color:var(--ink2); }

  /* steps */
  .steps { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
  .step { text-align:center; padding:0 12px; position:relative; }
  .step .n { width:48px; height:48px; border-radius:50%; background:var(--blue); color:#fff; font-family:var(--font-display); font-weight:var(--fw-bold); font-size:20px; display:flex; align-items:center; justify-content:center; margin:0 auto 16px; box-shadow:0 6px 16px rgba(43,111,214,.3); }
  .step h3 { font-family:var(--font-display); font-size:17px; font-weight:var(--fw-bold); margin-bottom:8px; }
  .step p { font-size:13.5px; color:var(--ink2); }

  /* formats */
  .formats { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; max-width:900px; margin:0 auto; }
  .fmt { font-family:var(--font-display); font-size:13px; font-weight:var(--fw-medium); color:var(--ink2); background:#fff; border:1px solid var(--line); padding:9px 16px; border-radius:8px; }
  .fmt.main { background:var(--blue); color:#fff; border-color:var(--blue); }
  .formats-more { max-width:900px; margin:24px auto 0; text-align:center; font-size:13.5px; }
  .formats-more a { font-weight:700; color:var(--blue-d); text-decoration:underline; text-underline-offset:3px; }
  .next-note { max-width:760px; margin:24px auto 0; padding:18px 20px; border:1px solid #cfe0f7; border-radius:12px; background:var(--tint); color:var(--ink2); font-size:13.5px; }
  .next-note b { display:block; margin-bottom:6px; color:var(--blue-d); }
  .next-note p + p { margin-top:8px; }
  .next-note a { color:var(--blue-d); font-weight:700; text-decoration:underline; text-underline-offset:3px; }

  /* safety */
  .safety { background:linear-gradient(135deg,#1d2632,#26344a); color:#fff; border-radius:20px; padding:48px 44px; display:grid; grid-template-columns:1.2fr 1fr; gap:40px; align-items:center; }
  .safety h2 { font-family:var(--font-display); font-size:clamp(20px,calc(2.2vw + 13px),27px); font-weight:var(--fw-bold); line-height:1.35; margin-bottom:14px; letter-spacing:-.3px; }
  .safety p { font-size:14.5px; color:#c2cad6; }
  .safety .list { display:flex; flex-direction:column; gap:14px; }
  .safety .si { display:flex; align-items:flex-start; gap:12px; }
  .safety .si .c { width:26px; height:26px; flex:none; border-radius:7px; background:rgba(74,144,226,.25); display:flex; align-items:center; justify-content:center; color:#7db4f5; }
  .safety .si .c svg { width:16px; height:16px; }
  .safety .si b { font-size:14.5px; font-weight:700; }
  .safety .si span { font-size:12.5px; color:#aab4c2; display:block; }

  /* faq */
  .faq { max-width:760px; margin:0 auto; }
  .qa { border-bottom:1px solid var(--line); padding:20px 0; }
  .qa h3 { font-family:var(--font-display); font-size:15.5px; font-weight:var(--fw-bold); display:flex; gap:10px; margin-bottom:8px; }
  .qa h3::before { content:'Q'; font-family:var(--font-display); color:var(--blue); }
  .qa p { font-size:13.5px; color:var(--ink2); padding-left:24px; }
  .qa p a { color:var(--blue-d); font-weight:700; text-decoration:underline; text-underline-offset:3px; }

  /* final cta */
  .final { text-align:center; background:linear-gradient(180deg,var(--tint),#fff); border-top:1px solid var(--line); }
  .final h2 { font-family:var(--font-display); font-size:var(--fs-fluid-h2); font-weight:var(--fw-bold); line-height:1.35; margin-bottom:12px; letter-spacing:-.4px; }
  .final p { font-size:15px; color:var(--ink2); margin-bottom:28px; }
  .final .sub { font-size:12.5px; color:var(--mute); margin-top:14px; }
  .download-actions { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }
  .download-route { margin-top:14px; font-size:12.5px; color:var(--mute); line-height:1.8; }

  /* footer */
  footer { background:var(--ink); color:#aab4c2; padding:48px 0 32px; font-size:13px; }
  footer .frow { display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; margin-bottom:28px; }
  footer .brand b { color:#fff; }
  footer .fcol h5 { font-family:var(--font-display); color:#fff; font-size:13px; font-weight:var(--fw-bold); margin-bottom:12px; }
  footer .fcol a { display:block; color:#aab4c2; margin-bottom:8px; }
  footer .fcol a:hover { color:#fff; }
  footer .copy { border-top:1px solid #2c3848; padding-top:20px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:12px; color:#7a8696; }

  /* ===== v1.5 改版で足したセクション（S-02 数字 / S-11 比較 / S-04 お困りごと /
     S-05 特長の主＋副 / S-06 文字化け / S-07 実測 / S-10 検証カード）=====
     既存の版面規則に合わせる: 桁は .wrap（最大 1080px）、見出しは --font-display、
     本文色は --ink2、罫線は --line。新しい色は足さず既存トークンだけで組む。 */

  /* S-02 数字（ヒーローと同じ面の下端に置く） */
  .stats { max-width:1080px; margin:clamp(30px,4vw,52px) auto 0; padding-top:clamp(24px,3vw,36px); border-top:1px solid var(--line); }
  .stats-grid { display:grid; grid-template-columns:repeat(4,1fr); }
  .stat { display:flex; flex-direction:column; gap:7px; padding:2px 24px 2px 0; }
  .stat + .stat { border-left:1px solid var(--line); padding-left:28px; }
  .stat .v { display:flex; align-items:baseline; gap:5px; font-family:var(--font-display); color:var(--blue-d); }
  .stat .v b { font-size:clamp(24px,2.6vw,31px); font-weight:var(--fw-bold); letter-spacing:-.03em; font-variant-numeric:tabular-nums; line-height:1; }
  .stat .v i { font-size:13px; font-weight:var(--fw-bold); font-style:normal; }
  .stat .k { font-size:13px; font-weight:700; color:var(--ink); }
  .stat .n { font-size:12px; color:var(--mute); line-height:1.75; }
  .stat a { display:flex; flex-direction:column; gap:7px; }
  .stat a:hover .k { color:var(--blue-d); text-decoration:underline; text-underline-offset:3px; }
  .stats-note { margin-top:20px; font-size:11.5px; color:var(--mute); }

  /* 表（S-11 比較・S-07 実測で共用）。横が足りない端末では表だけを横スクロールさせる。 */
  .tbl-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .tbl { width:100%; border-collapse:collapse; font-size:13.5px; background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
  .tbl th, .tbl td { padding:13px 14px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top; line-height:1.7; }
  .tbl thead th { background:var(--tint); font-family:var(--font-display); font-size:12.5px; font-weight:var(--fw-bold); color:var(--ink); white-space:nowrap; }
  .tbl tbody tr:last-child th, .tbl tbody tr:last-child td { border-bottom:0; }
  .tbl tbody th { font-weight:700; color:var(--ink); white-space:nowrap; }
  .tbl td { color:var(--ink2); }
  .tbl .own { background:rgba(43,111,214,.045); color:var(--ink); font-weight:600; }
  .tbl-cap { margin-top:12px; font-size:12px; color:var(--mute); line-height:1.8; }
  .tbl-links { display:flex; gap:14px 24px; flex-wrap:wrap; margin-top:24px; justify-content:center; }
  .tbl-links a { font-size:13.5px; font-weight:700; color:var(--blue-d); border-bottom:1px solid var(--blue); padding-bottom:3px; }
  .tbl-links a:hover { color:var(--blue); }

  /* S-04 お困りごと */
  .problems { display:grid; grid-template-columns:1fr 1fr; gap:0 48px; border-top:1px solid var(--line); }
  .problem { display:grid; grid-template-columns:1fr auto; align-items:center; gap:20px; padding:22px 4px; border-bottom:1px solid var(--line); transition:background .15s ease; }
  .problem:hover { background:var(--tint); }
  .problem h3 { font-family:var(--font-display); font-size:15.5px; font-weight:var(--fw-bold); color:var(--ink); line-height:1.55; }
  .problem span.d { display:block; font-size:12.5px; color:var(--ink2); line-height:1.8; margin-top:5px; }
  .problem .chev { font-size:19px; color:var(--blue); transition:transform .2s cubic-bezier(.22,.8,.28,1); }
  .problem:hover .chev { transform:translateX(4px); }

  /* S-05 特長（主 1 ＋ 副 3） */
  .feat-split { display:grid; grid-template-columns:5fr 7fr; gap:28px; align-items:start; }
  .feat-main { border:1px solid var(--line-tint); border-radius:15px; background:var(--tint); padding:32px 30px 30px; }
  .feat-main .tag { display:inline-flex; align-items:center; gap:8px; padding:5px 11px; border-radius:999px; background:#fff; border:1px solid var(--line-tint); font-size:11.5px; font-weight:700; color:var(--blue-d); }
  .feat-main .fi { width:52px; height:52px; border-radius:13px; background:#fff; border:1px solid var(--line-tint); display:flex; align-items:center; justify-content:center; color:var(--blue); margin:22px 0 18px; }
  .feat-main .fi svg { width:26px; height:26px; }
  .feat-main h3 { font-family:var(--font-display); font-size:clamp(19px,1.8vw,22px); font-weight:var(--fw-bold); line-height:1.5; letter-spacing:-.01em; }
  .feat-main p { font-size:14.5px; color:var(--ink2); line-height:1.95; margin-top:14px; }
  .feat-main a.more { display:inline-block; margin-top:20px; font-size:13.5px; font-weight:700; color:var(--blue-d); border-bottom:1px solid var(--blue); padding-bottom:3px; }
  .feat-rest { display:grid; }
  .feat-row { display:grid; grid-template-columns:44px minmax(0,1fr); gap:18px 20px; padding:26px 4px; border-bottom:1px solid var(--line); }
  .feat-row .fi { width:44px; height:44px; border-radius:11px; background:#fff; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--blue); }
  .feat-row .fi svg { width:22px; height:22px; }
  .feat-row .hd { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
  .feat-row h3 { font-family:var(--font-display); font-size:17px; font-weight:var(--fw-bold); color:var(--ink); line-height:1.45; }
  .feat-row .proof { display:inline-flex; align-items:center; padding:4px 10px; border-radius:999px; background:var(--tint); border:1px solid var(--line-tint); font-size:11.5px; font-weight:700; color:var(--blue-d); white-space:nowrap; }
  .feat-row p { font-size:13.5px; color:var(--ink2); line-height:1.9; margin-top:8px; }

  /* S-06 文字化け */
  .moji { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,460px); gap:56px; align-items:center; }
  .moji .kicker { font-family:var(--font-display); font-size:13px; font-weight:var(--fw-bold); color:var(--blue); letter-spacing:.04em; margin-bottom:12px; }
  .moji h2 { font-family:var(--font-display); font-size:var(--fs-fluid-h2); font-weight:var(--fw-bold); letter-spacing:-.02em; line-height:1.42; }
  .moji .rule { display:block; width:44px; height:3px; background:var(--blue); margin:20px 0; }
  .moji p { font-size:14.5px; color:var(--ink2); line-height:1.95; }
  .moji .links { display:flex; gap:22px; margin-top:22px; flex-wrap:wrap; }
  .moji .links a { font-size:13.5px; font-weight:700; color:var(--blue-d); border-bottom:1px solid var(--blue); padding-bottom:3px; }
  .moji-fig { display:flex; flex-direction:column; gap:18px; }
  .moji-fig .cap { font-size:11.5px; font-weight:700; color:var(--mute); margin-bottom:9px; }
  .moji-win { border:1px solid #d3ddec; border-radius:9px; background:#fff; overflow:hidden; }
  .moji-win .bar { display:flex; align-items:center; gap:9px; height:34px; padding:0 12px; background:#f3f3f3; border-bottom:1px solid #dcdcdc; font-size:11.5px; color:#5a5a5a; }
  .moji-win .row { display:grid; grid-template-columns:18px minmax(0,1fr) 70px; align-items:center; gap:10px; height:34px; padding:0 12px; border-top:1px solid #ececec; font-size:12.5px; color:#3a3a3a; }
  .moji-win .row .nm { font-family:var(--font-mono); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .moji-win .row .sz { color:#8a8a8a; font-size:11.5px; text-align:right; }
  .moji-win .ico { width:18px; height:18px; color:#9aa6b6; }
  .moji-win.is-good { border-color:#cfdef2; box-shadow:0 16px 40px rgba(20,40,80,.14); }
  .moji-win.is-good .bar { background:linear-gradient(180deg,#fdfdfe,#f4f7fb); border-bottom-color:var(--line); color:var(--ink2); font-weight:700; }
  .moji-win.is-good .row .nm { color:var(--ink); }
  .moji-win.is-good .ico { color:var(--blue); }
  .moji-mid { display:flex; align-items:center; gap:10px; font-size:12px; font-weight:700; color:var(--blue); }
  .moji-mid span.ln { flex:1; height:1px; background:var(--line); }
  .moji-bad .nm { color:#895d26; background:var(--name-bad-bg); border:1px solid var(--name-bad-line); border-radius:4px; padding:1px 5px; }

  /* S-07 実測の注意書き */
  .caution { margin-top:22px; border-left:4px solid var(--amber); border-radius:0 12px 12px 0; background:#fff8ed; padding:17px 19px; font-size:13.5px; color:var(--ink2); line-height:1.9; }
  .caution b { display:block; color:var(--amber); margin-bottom:5px; }
  .caution a { font-weight:700; color:var(--blue-d); text-decoration:underline; text-underline-offset:3px; }

  /* S-10 検証カード（安心パネルの下） */
  .verify-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:22px; align-items:stretch; }
  .verify-card { border:1px solid var(--line); border-radius:15px; background:#fff; padding:22px; }
  .verify-card h3 { font-family:var(--font-display); font-size:14px; font-weight:var(--fw-bold); color:var(--ink); margin-bottom:10px; }
  .verify-card p { font-size:13.5px; color:var(--ink2); line-height:1.9; }
  .verify-facts { display:grid; gap:10px; margin-bottom:12px; }
  .verify-facts div { display:grid; grid-template-columns:82px minmax(0,1fr); gap:12px; align-items:baseline; }
  .verify-facts dt { color:var(--mute); font-size:12.5px; }
  .verify-facts dd { color:var(--ink); font-family:var(--font-mono); font-size:12.5px; word-break:break-all; line-height:1.7; }
  .verify-card .note { font-size:12.5px; color:var(--mute); line-height:1.8; }
  .verify-card .links { display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:16px; padding-top:14px; border-top:1px solid var(--line); }
  .verify-card .links a { font-size:13px; font-weight:700; color:var(--blue-d); border-bottom:1px solid var(--blue); padding-bottom:3px; }

  @media(max-width:880px){
    .hero .row,.safety{ grid-template-columns:1fr; }
    .hero .row{ gap:26px; }
    /* 1 カラムでは DOM の順（h1 → リード → 字幕＋デモ → PC 案内 → 信頼リンク）に任せる。
       行番号を振ると、非表示の PC 案内が空行と gap を残す。 */
    .hero-copy,.hero-stage,.mobile-pc-note,.trust{ grid-column:1; grid-row:auto; }
    .trust{ margin-top:-4px; }
    .steps{ grid-template-columns:1fr; }
    .nav{ gap:10px; }
    .nav .links{ display:none; }
    .mobile-nav{ display:block; margin-left:auto; }
    .mobile-nav > summary{ list-style:none; min-height:44px; display:flex; align-items:center; gap:7px; padding:8px 10px; color:var(--ink2); font-size:14px; font-weight:700; cursor:pointer; }
    .mobile-nav > summary::-webkit-details-marker{ display:none; }
    .mobile-nav > summary::after{ content:'開く'; color:var(--blue); font-size:10.5px; font-weight:700; line-height:1; }
    .mobile-nav[open] > summary{ color:var(--blue-d); }
    .mobile-nav[open] > summary::after{ content:'閉じる'; }
    .mobile-panel{ position:absolute; top:100%; left:0; right:0; max-height:calc(100vh - 56px); overflow:auto; overscroll-behavior:contain; background:#fff; border-bottom:1px solid var(--line); box-shadow:0 18px 40px rgba(20,40,80,.15); padding:18px max(20px,calc((100vw - 1080px)/2 + 24px)) 24px; }
    .mobile-panel .menu-label{ color:var(--mute); font-size:11px; font-weight:700; letter-spacing:.09em; margin:12px 0 5px; }
    .mobile-panel .menu-label:first-child{ margin-top:0; }
    .mobile-panel .menu-grid{ display:grid; grid-template-columns:1fr 1fr; gap:6px 12px; }
    .mobile-panel a{ min-height:44px; display:flex; align-items:center; padding:8px 10px; border-radius:8px; color:var(--ink2); font-size:14px; }
    .mobile-panel a:hover, .mobile-panel a:focus-visible{ background:var(--tint); color:var(--blue-d); }
    .mobile-panel .menu-primary{ margin-top:14px; justify-content:center; background:var(--blue); color:#fff; font-weight:700; }
    .mobile-panel .menu-primary:hover, .mobile-panel .menu-primary:focus-visible{ background:var(--blue-d); color:#fff; }
    .nav .cta{ margin-left:0; }
    .nav .cta .btn{ white-space:nowrap; }
    /* h1 の字号はここで刻まない。桁（.hero-copy）を基準にした cqw の 1 本の曲線で決まる。 */
    /* hero の信頼リンクは指で押す前提の高さにする（min-height で 44px を直接保証） */
    .trust{ gap:4px 20px; }
    .trust a.ti{ min-height:44px; }
    /* 1 カラムに落ちたら、ステージが上のコピーに詰まらないよう間を空ける。 */
    .hero-stage{ width:100%; max-width:570px; margin-top:14px; justify-self:center; }

    /* 改版セクションの 1 カラム化 */
    .stats-grid{ grid-template-columns:1fr 1fr; gap:22px 0; }
    .stat{ padding-right:16px; }
    .stat:nth-child(3){ border-left:0; padding-left:0; }
    .problems{ grid-template-columns:1fr; gap:0; }
    .feat-split{ grid-template-columns:1fr; }
    .moji{ grid-template-columns:1fr; gap:34px; }
    .verify-grid{ grid-template-columns:1fr; }
  }
  /* 下部常駐帯（≤720px）。ボタンもバッジも閉じるボタンも置かない。持たせるのは同じ一文だけ。 */
  .mobile-cta-bar{ display:none; position:fixed; left:0; right:0; bottom:0; z-index:45;
    min-height:var(--bottombar-h); padding-bottom:env(safe-area-inset-bottom);
    align-items:center; justify-content:center; gap:9px;
    background:rgba(255,255,255,.97); border-top:1px solid var(--line);
    box-shadow:0 -6px 20px rgba(20,40,80,.06); font-size:12.5px; color:var(--ink2); }
  .mobile-cta-bar svg{ width:15px; height:15px; flex:none; color:var(--blue); }

  /* ここが PC の境目。Karuzip は Windows 専用ソフトで、スマートフォンには押しても
     意味のあるボタンが存在しない。だからダウンロード導線は「小さくする」のではなく
     全部撤去し、一文と下部の常駐帯に置き換える。 */
  @media(max-width:720px){
    html{ scroll-padding-top:calc(var(--nav-h-mobile) + 14px); }
    body{ padding-bottom:var(--bottombar-h); }
    .nav .cta{ display:none; }
    .mobile-panel .menu-primary{ display:none; }
    .hero-cta,.download-actions,.download-route,.download-verification,.desktop-download-copy,.download-legacy-note{ display:none; }
    /* フッターの「ダウンロード」も導線。飛んだ先にボタンが無いので出さない。 */
    footer .fcol a[href="#download"]{ display:none; }
    .desktop-download-title{ display:none; }
    .mobile-download-title{ display:inline; }
    .mobile-pc-note{ display:flex; align-items:flex-start; gap:10px; margin-top:22px; padding:12px 0 12px 13px; border-left:3px solid var(--blue); color:var(--ink2); text-align:left; }
    .mobile-pc-note svg{ width:20px; height:20px; flex:none; margin-top:1px; color:var(--blue); }
    .mobile-pc-note b{ display:block; font-size:13px; margin-bottom:2px; color:var(--ink); }
    .mobile-pc-note span{ display:block; color:var(--mute); font-size:12px; line-height:1.6; }
    /* デモを 1 画面に収めるため、バッジを落としてリードは 1 文目だけにする。 */
    .badge{ display:none; }
    .lead{ margin-bottom:20px; }
    .lead-rest{ display:none; }
    .lead-more{ display:inline-flex; }
    .lead.is-open .lead-rest{ display:inline; }
    .final{ padding-top:54px; padding-bottom:54px; }
    .final > .wrap > p{ margin-bottom:0; }
    .mobile-cta-bar{ display:flex; }
  }
  @media(max-width:559px){
    .stats-grid{ grid-template-columns:1fr; }
    .stat, .stat+.stat{ border-left:0; padding-left:0; padding-bottom:16px; border-bottom:1px solid var(--line); }
    .stats-grid .stat:last-child{ border-bottom:0; padding-bottom:0; }
    .tbl th, .tbl td{ padding:11px 12px; font-size:12.5px; }
  }
  @media(max-width:430px){
    /* 幅がいちばん厳しい端末でも「ロゴ＋案内」を静かに 1 行で収める。 */
    header .wrap{ padding-left:14px; padding-right:14px; }
    .nav{ gap:6px; }
    .brand .logo{ width:28px; height:28px; }
    .brand b{ font-size:17px; }
    .mobile-nav > summary{ padding-left:7px; padding-right:7px; font-size:13.5px; }
    .mobile-panel .menu-grid{ grid-template-columns:1fr; gap:2px; }
    /* SHA-256 とその確認手順は実際に読ませる文章。12px を下回らせない。 */
    .dl-hash, .dl-hash-note{ font-size:12.5px; }
    .brand{ min-height:44px; }
  }
  @media(max-width:520px){
    .hero .row{ gap:22px; }
    /* デモが「種類」列を落としてメニューを寄せるのは /hero-sequence.css 側。 */
  }
  /* 指で操作する端末では、押せるものを 44px 未満にしない。 */
  @media (pointer:coarse){
    .nav .links > a,.mobile-panel a,.trust a.ti,footer .fcol a,.mobile-nav > summary{ min-height:var(--hit-target); display:flex; align-items:center; }
  }
  @media(max-width:880px){
    /* フッターのリンクは指で押す前提の高さにする（実測 23px）。
       padding だけだと font-size と line-height 次第で 44px に届かないので、
       min-height で下限を直接決める。 */
    footer .fcol a{ display:flex; align-items:center; min-height:44px; margin-bottom:0; }
  }
  @media (prefers-reduced-motion:no-preference){
    .hero-copy{ animation:hero-copy-in .48s cubic-bezier(.22,.8,.28,1) both; }
    .hero-stage{ animation:hero-stage-in .56s .08s cubic-bezier(.22,.8,.28,1) both; }
    /* opacity:0 から始めない。Chrome は opacity:0 で描かれた要素を LCP 候補から永久に除外するので、
       h1 が候補になれず、後から現れた小さな要素が LCP になって 4.6 秒まで伸びていた。 */
    @keyframes hero-copy-in{ from{ transform:translateY(10px); } to{ transform:none; } }
    @keyframes hero-stage-in{ from{ opacity:0; transform:translateY(12px) scale(.99); } to{ opacity:1; transform:none; } }
  }
  @media (prefers-reduced-motion:reduce){
    html{ scroll-behavior:auto; }
    .nav-progress{ display:none; }
    .hero-copy,.hero-stage{ animation:none; }
    /* 操作デモはここでも止めない。製品の動きを見せる唯一の場所なので、静止させると
       「何も起きない画面」になる（リプレイ手段も置かない方針）。詳細は /hero-sequence.js の冒頭。 */
  }