@charset "utf-8";
/* =========================================================================
   発信元サーチ（SearchCaller）LP
   04-design.md §4（タイポ）/ §5（カラー）/ §6（モーション）/ §9（共通部品）準拠
   ライブラリゼロ・単一ファイル
   ========================================================================= */

/* ---------------------------------------------------------------- tokens */
:root{
  --font: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN",
          "Noto Sans JP", "Yu Gothic Medium", "Meiryo", system-ui, sans-serif;

  /* タイポ（§4-2）。§4-2 の表の両端（375px = SP 値 / 1280px = PC 値）を
     厳密に通る一次式に引き直してある（設計書の clamp 例は 375px で SP 値に
     ならず、見出しが 41px になって 2 行に割れるため） */
  --t-display: clamp(34px, 1.348rem + 3.31vw, 64px);
  --t-h1:      clamp(32px, 1.275rem + 3.09vw, 60px);
  --t-h2:      clamp(28px, 1.232rem + 2.21vw, 48px);
  --t-h3:      clamp(24px, 1.086rem + 1.77vw, 40px);
  --t-h4:      clamp(22px, 1.116rem + 1.10vw, 32px);
  --t-h5:      clamp(18px, 1.073rem + 0.22vw, 20px);
  --t-lead:    clamp(16px, 0.896rem + 0.44vw, 20px);
  --t-body:    clamp(16px, 0.948rem + 0.22vw, 18px);
  --t-note:    clamp(15px, 0.886rem + 0.22vw, 17px);
  --t-caption: clamp(13px, 0.761rem + 0.22vw, 15px);
  --t-micro:   clamp(12px, 0.724rem + 0.11vw, 13px);

  /* スペーシング（§4-3・4px グリッド） */
  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:40px; --s-8:56px; --s-9:72px; --s-10:96px;
  --s-11:120px; --s-12:160px;

  --sec-pad: var(--s-9);
  --gap-card: var(--s-4);
  --pad-card: var(--s-5);

  /* 面 */
  --bg-page:      #F7F2E8;
  --bg-cream-1:   #F5EDE0;
  --bg-cream-2:   #EDE4D5;
  --bg-cream-3:   #E2E5E2;
  --bg-mist-1:    #EDF0F0;
  --bg-mist-2:    #E6EBEC;
  --bg-mist-3:    #EFEAE0;
  --panel:        #E7ECF3;
  --card:         rgba(255,255,255,.72);
  --card-solid:   #FBF8F2;
  --hairline:     rgba(39,37,34,.10);
  --blur:         16px;

  /* 文字 */
  --ink:       #272522;
  --ink-sub:   #68645E;
  --ink-faint: rgba(39,37,34,.45);

  /* アクセント */
  --accent:        #426B91;
  --accent-strong: #35597A;
  --accent-on:     #FFFDF8;
  --accent-soft:   #DCE6EF;

  /* 種別（三重符号の「色」） */
  --cat-business:   #6B8AA8;
  --cat-public:     #787DAB;
  --cat-financial:  #6B9476;
  --cat-individual: #A88A6B;
  --cat-spam:       #D14A3D;
  --cat-unknown:    #8C8578;

  /* 信頼度 */
  --conf-low:    #C76B57;
  --conf-medium: #CC9452;
  --conf-high:   #6B9476;

  /* 用途限定ティント */
  --privacy-tint: #5C8580;
  --notice-tint:  #CC9452;
  --danger-tint:  #D14A3D;   /* 詐欺警告専用。§5-4 の 2 箇所以外で使わない */
  /* 警告バナーの「面」だけ danger-tint を 1 段暗く落として使う。素の
     --danger-tint に白文字は 4.34:1 で §5-5 の 4.5:1 に届かないため
     （§5-5「満たさない色は…」に従う措置。5.1:1 になる）。
     赤のハードコードは --danger-tint / --cat-spam の 1 値のみで、
     使用箇所も §5-4 の 2 箇所（警告バナーの面／凡例の 1 個）のまま */
  --danger-face:  color-mix(in srgb, var(--danger-tint) 88%, #2A1410);
  /* --notice-tint は面・アイコン・線専用。本文サイズの文字には 2.5:1 しか
     出ないので、文字にはこの濃い値を使う（§5-5） */
  --notice-ink:   #8E5C1E;
  --danger-on:    #FFFDF8;
  /* 三重符号のラベル文字色。ライトでは種別・信頼度の色が本文サイズで
     4.5:1 に届かないため --ink に落とし、色はアイコンだけに載せる（§5-5） */
  --label-ink:    var(--ink);

  /* モーション（§6-1） */
  --d-fast: 150ms; --d-base: 260ms; --d-slow: 620ms; --d-story: 900ms;
  --e-out:   cubic-bezier(0.2, 0, 0, 1);
  --e-inout: cubic-bezier(0.4, 0, 0.2, 1);
  --e-soft:  cubic-bezier(0.34, 0.9, 0.3, 1);
  --rise: 20px; --stagger: 70ms;

  --bar-h: 64px;   /* sticky CTA バーの高さ（固定） */
}

@media (prefers-color-scheme: dark){
  :root{
    --bg-page:    #25231F;
    --bg-cream-1: #1F1C1A;
    --bg-cream-2: #171512;
    --bg-cream-3: #0A0908;
    --bg-mist-1:  #1A1B1C;
    --bg-mist-2:  #141516;
    --bg-mist-3:  #1B1815;
    --panel:      #23262B;
    --card:       rgba(255,255,255,.08);
    --card-solid: #2C2A26;
    --hairline:   rgba(245,240,231,.12);

    --ink:       #F5F0E7;
    --ink-sub:   #BBB4A9;
    --ink-faint: rgba(245,240,231,.45);

    --accent:        #9FC7EB;
    --accent-strong: #BCD9F3;
    --accent-on:     #1B2229;
    --accent-soft:   rgba(159,199,235,.16);

    --cat-business:   #93B0CB;
    --cat-public:     #A0A4CE;
    --cat-financial:  #8FBA9A;
    --cat-individual: #C9AC8D;
    --cat-spam:       #E8756A;
    --cat-unknown:    #B0A99B;

    --conf-low:    #E0907C;
    --conf-medium: #E0B378;
    --conf-high:   #8FBA9A;

    --privacy-tint: #86AEA9;
    --notice-tint:  #E0B378;
    --danger-tint:  #E8756A;
    --danger-face:  #E8756A;   /* ダークは暗色文字を載せるので 6.18:1 で足りる */
    --notice-ink:   #E0B378;   /* ダークは 7.4:1 出るのでティントのまま */
    --danger-on:    #1B1512;
    --label-ink:    var(--c);  /* ダークは色文字でも 5.9:1 以上あるので色を残す */
  }
}

/* ----------------------------------------------------------------- reset */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:80px; }
body{
  margin:0; overflow-x:clip;
  font-family:var(--font); font-size:var(--t-body); line-height:1.75;
  color:var(--ink); background:var(--bg-page);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5,p,ul,ol,figure,dl,dd{ margin:0; }
ul,ol{ padding:0; list-style:none; }
img,svg,video{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:var(--accent); }
button{ font:inherit; color:inherit; }
:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; border-radius:4px; }
sup{ font-size:.62em; vertical-align:super; line-height:0; }
.visually-hidden{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}

/* ------------------------------------------------------------ typography */
.t-display{ font-size:var(--t-display); font-weight:500; letter-spacing:-.02em; line-height:1.15; }
.t-h1{ font-size:var(--t-h1); font-weight:500; letter-spacing:-.017em; line-height:1.13; }
.t-h2{ font-size:var(--t-h2); font-weight:500; line-height:1.17; }
.t-h3{ font-size:var(--t-h3); font-weight:500; line-height:1.20; }
.t-h4{ font-size:var(--t-h4); font-weight:500; line-height:1.25; }
.t-h5{ font-size:var(--t-h5); font-weight:500; line-height:1.30; }
.t-lead{ font-size:var(--t-lead); font-weight:400; line-height:1.75; }
.t-body{ font-size:var(--t-body); line-height:1.75; }
.t-note{ font-size:var(--t-note); line-height:1.80; }
.t-caption{ font-size:var(--t-caption); line-height:1.70; }
.t-micro{ font-size:var(--t-micro); line-height:1.70; color:var(--ink-sub); }
.sub{ color:var(--ink-sub); }
.measure{ max-width:34em; }
.measure-wide{ max-width:40em; }
.br-pc{ display:none; }

/* ---------------------------------------------------------------- layout */
.container{ width:100%; max-width:1160px; margin-inline:auto; padding-inline:20px; }
.section{
  position:relative; padding-block:var(--sec-pad);
  display:flex; flex-direction:column; justify-content:center;
}
.section > .container{ position:relative; z-index:1; }
.sec--cream{ background:linear-gradient(180deg, var(--bg-cream-1) 0%, var(--bg-cream-2) 100%); }
.sec--mist{ background:linear-gradient(180deg, var(--bg-mist-1) 0%, var(--bg-mist-2) 55%, var(--bg-mist-3) 100%); }
.sec--grain::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:url("/products/searchcaller/assets/ui/patterns/grain.png") repeat; opacity:.5;
}
.dots::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0; opacity:.10;
  background-image:radial-gradient(currentColor 1.2px, transparent 1.2px);
  background-size:24px 24px; color:var(--ink);
}
/* グローを持つ節だけを clip する。#feature_shortcut には絶対に付けない
   （.story__stage の position:sticky が祖先の overflow で死ぬため） */
.sec--clip{ overflow:clip; }
.glow{
  position:absolute; z-index:0; pointer-events:none;
  width:min(760px, 120%); aspect-ratio:1; background-size:contain;
  background-repeat:no-repeat; opacity:.9;
}
.glow--sage{ background-image:url("/products/searchcaller/assets/ui/patterns/glow-sage.svg"); left:-18%; top:2%; }
.glow--blue{ background-image:url("/products/searchcaller/assets/ui/patterns/glow-blue.svg"); right:-20%; top:12%; }

main{ position:relative; }
.depths{ position:absolute; inset:0; width:0; pointer-events:none; }
.depths > div{ position:absolute; left:0; width:1px; height:1px; }
.depths > div:nth-child(1){ top:25%; }
.depths > div:nth-child(2){ top:50%; }
.depths > div:nth-child(3){ top:75%; }
.depths > div:nth-child(4){ bottom:0; }

/* 見出し／ビジュアル／補足の 3 ブロック split（SP は縦積み、PC は 2 カラム） */
.split{ display:grid; gap:var(--s-6); }
.split__media{ margin-block:var(--s-2); }

.stack > * + *{ margin-top:var(--s-4); }
.head{ margin-bottom:var(--s-6); }
.head .t-lead,.head .t-body{ color:var(--ink-sub); margin-top:var(--s-4); }
.center{ text-align:center; }
.center .measure,.center .measure-wide{ margin-inline:auto; }

.glass{
  background:var(--card); border:1px solid var(--hairline); border-radius:22px;
  -webkit-backdrop-filter:blur(var(--blur)); backdrop-filter:blur(var(--blur));
}
.plate{ background:var(--panel); border-radius:28px; }

/* ------------------------------------------------------------------- CTA */
.ctablock{ margin-top:var(--s-6); position:relative; }
.cta{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  min-height:52px; width:100%; border-radius:100px; padding:16px 24px;
  font-size:16px; font-weight:500; line-height:1; text-decoration:none;
  background:var(--accent); color:var(--accent-on); border:0; cursor:pointer;
  transition:transform var(--d-fast) var(--e-out),
             background-color var(--d-fast) var(--e-out),
             box-shadow var(--d-fast) var(--e-out);
}
@media (hover:hover){
  .cta:hover{
    transform:translateY(-1px); background:var(--accent-strong);
    box-shadow:0 6px 18px rgba(66,107,145,.22);
  }
}
.cta:active{ transform:translateY(0) scale(.985); transition-duration:80ms; }
.cta__sub{ margin-top:var(--s-3); font-size:14px; line-height:1.6; color:var(--ink-sub); }
.cta__os{ display:none; margin-top:var(--s-2); font-size:14px; line-height:1.6; color:var(--ink-sub); }
html.is-desktop .cta__os,
html.is-android .cta__os{ display:block; }

/* ----------------------------------------------------------------- badge */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px; border-radius:100px; font-size:14px; line-height:1.4;
  background:color-mix(in srgb, var(--c, var(--ink)) 14%, transparent);
  color:var(--label-ink);
  transition:transform var(--d-fast) var(--e-out);
}
.badge .ico{ color:var(--c, var(--ink)); flex:none; }
@media (hover:hover){ .badge--hoverable:hover{ transform:translateY(-2px); } }
/* 赤② — 面を塗らず、アイコンとラベル文字だけを danger 色にする */
.badge--outline{
  background:transparent;
  border:1px solid color-mix(in srgb, var(--c, var(--ink)) 34%, transparent);
}

.chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 10px; border-radius:100px; font-size:13px; line-height:1.4;
  background:color-mix(in srgb, var(--c, var(--ink)) 14%, transparent);
  color:var(--label-ink);
}
.chip--device{ --c:var(--privacy-tint); }
.chip--send{ --c:var(--notice-tint); }
.chip--premium{ --c:var(--accent); }
.entry-chips{ display:flex; flex-wrap:wrap; gap:var(--s-2); }

.ico{ width:1.25em; height:1.25em; flex:none; }
.ico--lg{ width:28px; height:28px; }
.ico--sm{ width:16px; height:16px; }

/* ------------------------------------------------------ 結果カード .rcard */
.rcard{
  position:relative; border-radius:22px; padding:var(--pad-card);
  background:var(--card); border:1px solid var(--hairline);
  -webkit-backdrop-filter:blur(var(--blur)); backdrop-filter:blur(var(--blur));
}
.rcard__banner{
  display:flex; gap:10px; align-items:flex-start;
  background:var(--danger-face); color:var(--danger-on);
  border-radius:14px; padding:14px 16px; margin-bottom:var(--s-4);
}
.rcard__banner .ico{ width:22px; height:22px; margin-top:2px; }
.rcard__banner b{ display:block; font-weight:500; font-size:16px; line-height:1.5; }
.rcard__banner span{ display:block; font-size:14px; line-height:1.65; opacity:.94; }
.rcard__label{ font-size:14px; color:var(--ink-sub); margin-top:var(--s-3); }
.rcard__verdict{ font-size:22px; font-weight:500; line-height:1.35; margin-top:2px; }
.rcard__number{
  font-size:18px; color:var(--ink-sub); margin-top:var(--s-2);
  font-variant-numeric:tabular-nums;
}
.rcard__rule{ border:0; border-top:1px solid var(--hairline); margin:var(--s-4) 0 0; }
.rcard__reason{ font-size:16px; line-height:1.8; color:var(--ink-sub); }
.rcard__lownote{ margin-top:var(--s-2); font-size:15px; line-height:1.75; color:var(--notice-ink); }
.rcard__actions{
  display:flex; flex-wrap:wrap; gap:var(--s-2); margin-top:var(--s-4);
  padding-top:var(--s-4); border-top:1px solid var(--hairline);
}
.act{
  display:inline-flex; align-items:center; gap:6px;
  padding:10px 14px; min-height:44px; border-radius:100px;
  border:1px solid var(--hairline); background:transparent;
  font-size:14px; line-height:1.4; color:var(--ink-sub);
}
.act--danger{ color:var(--ink); }

/* 信頼度メーター */
.conf{ margin-top:var(--s-4); }
.conf__head{
  display:flex; align-items:center; gap:8px; font-size:15px; line-height:1.5;
  color:var(--label-ink);
}
.conf__head .ico{ color:var(--c); }
.conf__pct{ margin-left:auto; color:var(--ink-sub); font-variant-numeric:tabular-nums; }
.conf__track{
  display:block; margin-top:8px; height:6px; border-radius:100px;
  background:color-mix(in srgb, var(--ink) 10%, transparent); overflow:hidden;
}
.conf__bar{
  display:block; height:100%; border-radius:100px; background:var(--c);
  transform:scaleX(var(--fill,1)); transform-origin:left;
}
.js .conf__bar{ transform:scaleX(0); transition:transform var(--d-story) var(--e-out); }
.js [data-reveal].is-in .conf__bar,
.js [data-reveal].is-in .conf__bar{ transform:scaleX(var(--fill,1)); }

/* 出典 */
.sources{ margin-top:var(--s-4); display:grid; gap:var(--s-3); }
.sources li{ display:flex; gap:10px; align-items:flex-start; }
.sources .ico{ margin-top:3px; color:var(--ink-faint); }
.sources a{ font-size:15px; line-height:1.6; text-decoration:none; }
.sources a .ico{ display:inline-block; vertical-align:-3px; margin-left:2px; color:inherit; }
@media (hover:hover){ .sources a:hover{ text-decoration:underline; } }
.sources .src__host{ display:block; font-size:13px; color:var(--ink-sub); }
.js .sources li{ opacity:0; transform:translateY(var(--rise)); }
.js [data-reveal].is-in .sources li{
  opacity:1; transform:none;
  transition:opacity var(--d-slow) var(--e-out), transform var(--d-slow) var(--e-out);
  transition-delay:calc(var(--i,0) * var(--stagger));
}

/* ------------------------------------------------------------- disclosure */
.disclosure{ margin-top:var(--s-3); }
.disclosure > summary{
  display:flex; align-items:center; gap:var(--s-3); justify-content:space-between;
  min-height:44px; padding:12px 0; cursor:pointer; list-style:none;
  font-size:16px; font-weight:500; line-height:1.5;
}
.disclosure > summary::-webkit-details-marker{ display:none; }
.disclosure > summary:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }
.disclosure__mark{
  flex:none; width:22px; height:22px; color:var(--ink-sub);
  transition:transform var(--d-base) var(--e-inout);
}
.disclosure[open] .disclosure__mark{ transform:rotate(180deg); }
.disclosure__body{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows var(--d-base) var(--e-inout);
}
.disclosure[open] > .disclosure__body{ grid-template-rows:1fr; }
.disclosure__body > div{ overflow:hidden; }

/* --------------------------------------------------------------- reveal */
.js [data-reveal]{ opacity:0; transform:translateY(var(--rise)); }
.js [data-reveal].is-in{
  opacity:1; transform:none;
  transition:opacity var(--d-slow) var(--e-out), transform var(--d-slow) var(--e-out);
  transition-delay:calc(var(--i,0) * var(--stagger));
}

/* ------------------------------------------------------------ anchor nav */
.anchornav{
  display:none; position:sticky; top:12px; z-index:40;
  padding-top:12px; margin-bottom:-60px;
}
.anchornav ul{
  display:flex; gap:4px; width:fit-content; margin-inline:auto; padding:4px;
  border-radius:100px; background:var(--card); border:1px solid var(--hairline);
  -webkit-backdrop-filter:blur(var(--blur)); backdrop-filter:blur(var(--blur));
}
.anchornav a{
  display:inline-flex; align-items:center; min-height:40px; padding:0 16px;
  border-radius:100px; font-size:14px; text-decoration:none; color:var(--ink);
  transition:background-color var(--d-base) var(--e-inout);
}
.anchornav a[aria-current="true"]{ background:var(--accent-soft); }
@media (hover:hover){ .anchornav a:hover{ background:color-mix(in srgb, var(--ink) 6%, transparent); } }
/* ピル左端のブランド（アイコン＋アプリ名）。リンク群とはヘアラインで区切る */
.anchornav__brand-item{ display:flex; align-items:center; padding-right:6px; margin-right:2px; border-right:1px solid var(--hairline); }
.anchornav__brand{ gap:8px; padding:0 12px 0 6px; font-weight:500; }
.anchornav__brand img{ display:block; width:28px; height:28px; border-radius:7px; }

/* ------------------------------------------------------------------ hero */
.hero{
  position:relative; min-height:100svh; display:flex; flex-direction:column;
  justify-content:center; padding-block:96px 56px; overflow:hidden;
}
.hero__media{ position:absolute; inset:0; z-index:0; }
.hero__poster,.hero__video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.hero__video{ opacity:0; transition:opacity 400ms var(--e-inout); }
.hero__video.is-playing{ opacity:1; }
/* SP は縦グラデ。58–68% に動画が素で見える窓を残しつつ、
   下端では地色へ戻して脚注と重ね置きカードの可読性を確保する */
.hero__scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg,
      color-mix(in srgb, var(--bg-page) 94%, transparent) 0%,
      color-mix(in srgb, var(--bg-page) 80%, transparent) 34%,
      color-mix(in srgb, var(--bg-page) 0%, transparent) 58%,
      color-mix(in srgb, var(--bg-page) 0%, transparent) 68%,
      color-mix(in srgb, var(--bg-page) 88%, transparent) 90%,
      var(--bg-page) 100%);
}
.hero__inner{ position:relative; z-index:2; }
/* アプリ名＋アイコンのブランドロックアップ（見出しの上のアイブロー） */
.hero__brand{
  display:flex; align-items:center; gap:12px;
  margin-bottom:var(--s-6); font-size:16px; font-weight:500; letter-spacing:.01em;
}
.hero__brand img{
  display:block; width:40px; height:40px; border-radius:10px;
  box-shadow:0 2px 8px rgba(39,37,34,.12);
}
.hero__title{ margin-bottom:var(--s-4); }
.hero__line{ display:block; overflow:hidden; }
.hero__line > span{ display:block; }
.js .hero__line > span{ transform:translateY(110%); opacity:0; }
.js .hero.is-ready .hero__line > span{
  transform:translateY(0); opacity:1;
  transition:transform var(--d-slow) var(--e-out), opacity var(--d-slow) var(--e-out);
  transition-delay:calc(var(--i,0) * var(--stagger));
}
.js .hero__rise{ opacity:0; transform:translateY(var(--rise)); }
.js .hero.is-ready .hero__rise{
  opacity:1; transform:none;
  transition:opacity var(--d-slow) var(--e-out), transform var(--d-slow) var(--e-out);
  transition-delay:calc(var(--i,0) * var(--stagger));
}
.hero__lead{ color:var(--ink-sub); max-width:30em; }
.hero__value{ margin-top:var(--s-4); }
/* 注釈は SP でスクリムの透過帯（58–68%）に落ちて動画の暗部と重なるため、
   行ごとに地色を敷いて §5-5 の 4.5:1 を確保する。--ink-sub on --bg-page は
   5.06:1 で、94% 不透明なら背後が真っ黒でも 4.62:1 を下回らない */
.hero__notes{ margin-top:var(--s-6); display:grid; gap:4px; justify-items:start; }
.hero__notes > span{
  padding:3px 8px; margin-inline-start:-8px; border-radius:8px;
  background:color-mix(in srgb, var(--bg-page) 94%, transparent);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.hero__visual{ margin-top:var(--s-8); }
/* 実機フレーム付きキャプチャ（device/*.png。角丸・縁・影は画像に焼き込み済み） */
.hero__device{ display:block; width:100%; height:auto; }
/* SP: 実機を下端でトリムし、結論部（種別・発信先・番号・信頼度・操作）までを見せる。
   幅 250px → 全高約 464px のうち 400px を表示（タブバー相当のみ切れる） */
.hero__device-crop{
  width:min(64vw,250px); max-height:400px; overflow:hidden;
  margin-inline:auto; border-radius:0 0 24px 24px;
}
.hero__scroll-cue{
  position:absolute; left:50%; bottom:18px; z-index:2; translate:-50% 0;
  width:2px; height:28px; border-radius:2px; overflow:hidden;
  background:color-mix(in srgb, var(--ink) 14%, transparent);
  opacity:0; transition:opacity 200ms linear;
}
.hero.is-ready .hero__scroll-cue{ opacity:1; transition-delay:1s; }
.hero__scroll-cue.is-gone{ opacity:0 !important; transition-delay:0s; }
.hero__scroll-cue::after{
  content:""; position:absolute; left:0; width:2px; height:12px; border-radius:2px;
  background:var(--ink-sub); animation:cue 2s var(--e-inout) infinite;
}
@keyframes cue{
  0%{ transform:translateY(-14px); opacity:0 }
  25%{ opacity:1 }
  75%{ opacity:1 }
  100%{ transform:translateY(28px); opacity:0 }
}
.shot-note{ margin-top:var(--s-3); }
/* HERO の実機キャプチャ: SP は下端トリム（hero__device-crop）、PC はフレーム全体 */
.hero__visual--pc{ display:none; }
.hero__visual--pc picture{ display:block; width:min(100%,330px); margin-inline:auto; }
.hero__visual--pc figcaption,
.hero__visual--sp figcaption{
  display:table; margin-inline:auto; max-width:24em;
  text-wrap:balance; text-align:center;
}
/* スクリムの外（動画の上）に載るキャプションの可読性を確保する */
.hero__visual figcaption{
  display:inline-block; padding:4px 10px; border-radius:10px;
  background:color-mix(in srgb, var(--bg-page) 78%, transparent);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
/* SP で省略する副ビジュアル（04-design §3-4 / §3-6） */
.ocr__side,.feat__shot{ display:none; }

/* --------------------------------------------------------------- problem */
.scenes{ display:grid; gap:var(--gap-card); margin-top:var(--s-6); }
.scene{ padding:var(--pad-card); }
.scene .ico{ color:var(--ink-sub); }
.scene h3{ margin-top:var(--s-3); }
.scene p{ margin-top:var(--s-2); color:var(--ink-sub); font-size:var(--t-note); line-height:1.8; }
.problem__card{ margin-top:var(--s-8); max-width:640px; margin-inline:auto; }
.problem__turn{ margin-top:var(--s-10); }

/* ----------------------------------------------------------------- story */
.story-layout{ position:relative; }
.story-layout__text{ position:relative; }
.story{ position:relative; height:200vh; margin-top:var(--s-6); }
.story__stage{
  position:sticky; top:8svh; height:84svh;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  gap:var(--s-4);
}
.story__track{ position:absolute; inset:0; pointer-events:none; }
.story__step{ height:33.333%; }
.story__caps{ display:grid; gap:10px; width:100%; max-width:420px; }
/* キャプション義務（§8-3）。ピン留め中も 3 ステップの直下に見えるようにする */
.story__note{ margin-top:0; width:100%; max-width:460px; }
.story__cap{
  display:flex; gap:10px; align-items:flex-start;
  font-size:var(--t-caption); line-height:1.6; color:var(--ink-sub);
  transition:color var(--d-base) var(--e-inout);
}
.story__cap .dot{
  flex:none; width:10px; height:10px; margin-top:6px; border-radius:50%;
  border:1.5px solid currentColor; background:transparent;
  transition:background-color var(--d-base) var(--e-inout);
}
.story-layout[data-step="0"] .story__cap[data-i="0"],
.story-layout[data-step="1"] .story__cap[data-i="1"],
.story-layout[data-step="2"] .story__cap[data-i="2"]{ color:var(--ink); }
.story-layout[data-step="0"] .story__cap[data-i="0"] .dot,
.story-layout[data-step="1"] .story__cap[data-i="1"] .dot,
.story-layout[data-step="2"] .story__cap[data-i="2"] .dot{ background:currentColor; }

/* iPhone（DOM） */
.phone-wrap{ position:relative; display:flex; justify-content:center; width:100%; }
.phone-wrap__ripple{
  position:absolute; top:50%; left:50%; translate:-50% -50%;
  width:min(120%,460px); aspect-ratio:1; color:var(--ink); opacity:.5; pointer-events:none;
}
.phone{
  position:relative; width:min(60vw,214px); aspect-ratio:214/440;
  border-radius:34px; padding:8px;
  background:linear-gradient(160deg, color-mix(in srgb, var(--ink) 82%, transparent),
                                     color-mix(in srgb, var(--ink) 62%, transparent));
  box-shadow:0 18px 40px rgba(39,37,34,.18);
}
.phone__btn{
  position:absolute; right:-3px; top:26%; width:3px; height:34px; border-radius:2px;
  background:color-mix(in srgb, var(--ink) 55%, transparent);
  transition:background-color var(--d-base) var(--e-inout), box-shadow var(--d-base) var(--e-inout);
}
.story-layout[data-step="1"] .phone__btn,
.story-layout[data-step="2"] .phone__btn{
  background:var(--accent);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 26%, transparent);
}
.phone__screen{
  position:relative; height:100%; border-radius:28px; overflow:hidden;
  background:linear-gradient(180deg,#3A3733,#211F1C); color:#F5F0E7;
  display:flex; flex-direction:column; align-items:center;
  padding:46px 14px 18px;
}
.phone__caller{ font-size:13px; opacity:.72; }
.phone__number{ font-size:19px; font-weight:500; margin-top:4px; font-variant-numeric:tabular-nums; }
.phone__sub{ font-size:12px; opacity:.6; margin-top:2px; }
.phone__keys{ display:flex; gap:22px; margin-top:auto; }
.phone__key{
  width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  font-size:11px; color:#fff;
}
.phone__key--decline{ background:#C2453A; }
.phone__key--accept{ background:#3E9B5B; }
.phone__banner{
  position:absolute; left:10px; right:10px; top:10px; z-index:2;
  display:flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:12px; font-size:11px; line-height:1.4;
  background:rgba(245,240,231,.92); color:#272522;
  opacity:0; transform:translateY(-8px);
  transition:opacity var(--d-base) var(--e-out), transform var(--d-base) var(--e-out);
}
.story-layout[data-step="1"] .phone__banner,
.story-layout[data-step="2"] .phone__banner{ opacity:1; transform:none; }
.phone__snippet{
  position:absolute; left:8px; right:8px; bottom:8px; z-index:3;
  opacity:0; transform:translateY(24px);
  transition:opacity var(--d-story) var(--e-soft), transform var(--d-story) var(--e-soft);
}
.phone__snippet img{ width:100%; border-radius:14px; }
.story-layout[data-step="2"] .phone__snippet{ opacity:1; transform:none; }
.phone__premium{
  position:absolute; left:50%; bottom:-16px; translate:-50% 0; z-index:4;
  opacity:0; transform:translateY(8px); white-space:nowrap;
  background:var(--bg-cream-1);
  transition:opacity var(--d-story) var(--e-soft), transform var(--d-story) var(--e-soft);
}
.story-layout[data-step="2"] .phone__premium{ opacity:1; transform:none; }

.premium-block{
  margin-top:var(--s-6); padding:var(--pad-card);
  border-radius:22px; border:1px solid var(--hairline); background:var(--card);
}
.premium-block h3{ display:flex; align-items:center; gap:8px; color:var(--accent); }
.premium-block p{ margin-top:var(--s-3); font-size:var(--t-note); line-height:1.8; color:var(--ink-sub); }
.premium-block a{ display:inline-block; margin-top:var(--s-3); font-size:var(--t-note); }
.story__after{ margin-top:var(--s-9); }
.story__after .measure{ color:var(--ink-sub); }

/* ------------------------------------------------------------------- OCR */
.scan{
  position:relative; overflow:hidden; border-radius:22px; padding:var(--pad-card);
  background:var(--card-solid); border:1px solid var(--hairline);
}
.scan__chip{ margin-bottom:var(--s-4); }
.scan__lines{ display:grid; gap:6px; }
.scan__lines li{ font-size:15px; line-height:1.7; color:var(--ink-sub); }
.scan__hit{
  display:inline-block; padding:2px 8px; border-radius:8px;
  font-size:17px; color:var(--ink); font-variant-numeric:tabular-nums;
  background:color-mix(in srgb, var(--privacy-tint) 18%, transparent);
  outline:1.5px solid color-mix(in srgb, var(--privacy-tint) 55%, transparent);
}
.js .scan__hit{ opacity:0; transform:scale(1.12); transform-origin:left center; }
.js .scan.is-in .scan__hit{
  opacity:1; transform:none;
  transition:opacity 500ms var(--e-soft) 1s, transform 500ms var(--e-soft) 1s;
}
.scan__beam{
  position:absolute; left:0; right:0; top:0; height:22%; pointer-events:none;
  background:linear-gradient(180deg, transparent 0%,
      color-mix(in srgb, var(--privacy-tint) 42%, transparent) 55%,
      color-mix(in srgb, var(--privacy-tint) 70%, transparent) 78%, transparent 100%);
  mix-blend-mode:screen; opacity:0; transform:translateY(-8%);
}
.js .scan.is-in .scan__beam{ animation:beam 1.2s var(--e-inout) forwards; }
@keyframes beam{
  0%{ transform:translateY(-8%); opacity:0 }
  12%{ opacity:.85 }
  88%{ opacity:.85 }
  100%{ transform:translateY(430%); opacity:0 }
}
/* 全幅で縦積み（.scan → 下向きシェブロン → .rcard）。split のビジュアル列は
   1440px でも 500px 前後しかなく、横 3 分割するとカードが 200px 台まで潰れて
   発信先・信頼度ラベルが語中で折り返す。§2-5 の設計どおり縦積みで統一する */
.ocr__flow{ display:grid; gap:var(--s-5); }
.ocr__arrow{ display:grid; place-items:center; color:var(--ink-faint); }
.ocr__intent{ margin-top:var(--s-8); }

/* -------------------------------------------------------------- 解剖図 */
.anatomy{ display:grid; gap:var(--s-6); margin-top:var(--s-6); }
.anatomy__labels{ display:grid; gap:var(--s-4); counter-reset:anat; }
.anatomy__labels li{
  display:flex; gap:10px; font-size:var(--t-caption); line-height:1.7; color:var(--ink-sub);
}
.marker{
  flex:none; display:grid; place-items:center; width:22px; height:22px; border-radius:50%;
  font-size:12px; line-height:1; font-weight:500;
  background:color-mix(in srgb, var(--accent) 16%, transparent); color:var(--accent);
}
.rcard .marker{ position:absolute; left:-11px; }
.rcard--anat{ margin-left:11px; }
.legend{ margin-top:var(--s-8); padding:var(--pad-card); }
.legend dt{ font-size:var(--t-caption); color:var(--ink-sub); margin-bottom:var(--s-3); }
.legend dd{ display:flex; flex-wrap:wrap; gap:var(--s-2); }
.legend dl + dl{ margin-top:var(--s-5); }
.result__pair{ display:grid; gap:var(--gap-card); margin-top:var(--s-6); }
.result__real{ display:none; }

/* -------------------------------------------------------------- blocking */
.notebox{
  display:flex; gap:10px; align-items:flex-start; margin-top:var(--s-5);
  padding:16px 18px; border-radius:14px;
  border:1px solid var(--hairline); background:color-mix(in srgb, var(--notice-tint) 8%, transparent);
  font-size:var(--t-caption); line-height:1.75; color:var(--ink-sub);
}
.notebox .ico{ color:var(--notice-tint); margin-top:2px; }
.device-figure{ margin-top:var(--s-6); }
.device-figure img{ margin-inline:auto; }
.device-figure--framed{ position:relative; }
/* 実写（910×1689）の「この番号から着信したとき」カード（x 150–760 / y 1111–1429）の
   1% ほど外側を囲む静止枠。picture を基準にすると画像幅が変わっても座標がぶれない（04-design §2-7） */
.device-figure--framed picture{
  position:relative; display:block; width:min(100%,420px); margin-inline:auto;
}
.device-figure__frame{
  position:absolute; inset:64.8% 15.4% 14.4% 15.4%; pointer-events:none;
  border:1px solid color-mix(in srgb, var(--ink) 18%, transparent); border-radius:14px;
}

/* ブロック間の余白（B1 → B2 → B3 ／ B3 の小ブロック間） */
.cbsec{ margin-top:var(--s-9); }
.cbblock + .cbblock{ margin-top:var(--s-8); }

/* B2 — 3 択のインタラクティブデモ。状態は radio が持ち、一般兄弟結合子で見た目を切り替える */
.cbdemo{
  position:relative;                          /* radio の絶対配置の基準 */
  display:grid; gap:var(--s-6);
  grid-template-areas:"stage" "control";
  margin-top:var(--s-6); padding:var(--pad-card); border-radius:28px;
}
.cbdemo__stage{ grid-area:stage; display:grid; place-items:center; }
.cbdemo__control{ grid-area:control; min-width:0; }
/* radio は隠すがフォーカス可能に残す（display:none にするとキーボード操作が死ぬ） */
.cbdemo__radio{
  position:absolute; top:0; left:0; width:1px; height:1px; opacity:0; pointer-events:none;
}
.cbdemo__legend{ font-size:var(--t-caption); color:var(--ink-sub); margin-bottom:var(--s-3); }
.cbdemo__seg{
  display:grid; grid-template-columns:repeat(3,1fr); gap:4px;
  padding:4px; border-radius:14px;
  background:color-mix(in srgb, var(--ink) 6%, transparent);
  border:1px solid var(--hairline);
}
.cbdemo__opt{
  min-height:48px; display:grid; place-items:center; text-align:center;
  padding:8px 6px; border-radius:11px; cursor:pointer;
  /* 文言は短縮しない。SP で 2 行になるときに 1 文字だけの行を作らない */
  font-size:13px; line-height:1.25; text-wrap:balance; color:var(--ink-sub);
  transition:background-color var(--d-base) var(--e-inout), color var(--d-base) var(--e-inout);
}
#cb-none:checked  ~ .cbdemo__control .cbdemo__opt[for="cb-none"],
#cb-id:checked    ~ .cbdemo__control .cbdemo__opt[for="cb-id"],
#cb-block:checked ~ .cbdemo__control .cbdemo__opt[for="cb-block"]{
  background:var(--card-solid); color:var(--ink); box-shadow:0 1px 3px rgba(39,37,34,.10);
}
/* フォーカスリングは 1px の radio ではなく label に描く */
#cb-none:focus-visible  ~ .cbdemo__control .cbdemo__opt[for="cb-none"],
#cb-id:focus-visible    ~ .cbdemo__control .cbdemo__opt[for="cb-id"],
#cb-block:focus-visible ~ .cbdemo__control .cbdemo__opt[for="cb-block"]{
  outline:3px solid var(--accent); outline-offset:2px;
}
/* 説明文は 3 文を重ねて排他表示。min-height で高さを固定し、切替で下を跳ねさせない */
.cbdemo__descs{ display:grid; margin-top:var(--s-4); min-height:5.4em; }
.cbdemo__desc{
  grid-area:1/1; margin:0; font-size:var(--t-note); line-height:1.8; color:var(--ink-sub);
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity var(--d-base) var(--e-inout), transform var(--d-base) var(--e-inout),
             visibility 0s linear var(--d-base);
}
#cb-none:checked  ~ .cbdemo__control .cbdemo__desc[data-i="0"],
#cb-id:checked    ~ .cbdemo__control .cbdemo__desc[data-i="1"],
#cb-block:checked ~ .cbdemo__control .cbdemo__desc[data-i="2"]{
  opacity:1; visibility:visible; transform:none; transition-delay:0s;
}
/* 着信画面モック（既存 .phone を再利用） */
.cbdemo__stage .phone{ width:min(64vw,214px); }
.cb-ripple{ transition:opacity var(--d-base) var(--e-inout); }
.cb-id{ display:grid; min-height:40px; align-content:start; width:100%; text-align:center; }
.cb-id__unknown,.cb-id__name{
  grid-area:1/1; margin:0;
  transition:opacity var(--d-base) var(--e-inout), transform var(--d-base) var(--e-inout);
}
.cb-id__unknown{ font-size:13px; opacity:.72; }
.cb-id__name{
  font-size:15px; font-weight:500; line-height:1.3;
  display:flex; align-items:center; justify-content:center; gap:5px;
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity var(--d-base) var(--e-inout), transform var(--d-base) var(--e-inout),
             visibility 0s linear var(--d-base);
}
/* 画面が狭く 2 行になるので、語の途中ではなく事業者名と窓口名の間で割る */
.cb-id__name span{ min-width:0; word-break:keep-all; }
.cbdemo__stage .phone__number,
.cbdemo__stage .phone__keys{ transition:opacity var(--d-base) var(--e-inout); }
.cb-missed{
  position:absolute; left:12px; right:12px; bottom:24px; margin:0;
  font-size:11px; line-height:1.5; text-align:center; opacity:0; visibility:hidden;
  transition:opacity var(--d-base) var(--e-inout), visibility 0s linear var(--d-base);
}
/* 主従の入れ替えは opacity だけで表す（font-size を動かすと高さが跳ねる） */
#cb-id:checked ~ .cbdemo__stage .cb-id__name{ opacity:1; visibility:visible; transform:none; transition-delay:0s; }
#cb-id:checked ~ .cbdemo__stage .cb-id__unknown{ opacity:0; }
#cb-id:checked ~ .cbdemo__stage .phone__number{ opacity:.72; }
/* 「鳴らない」は引き算で示す（同心円とボタンを消し、地を 1 段暗く。赤で塗らない） */
#cb-block:checked ~ .cbdemo__stage .cb-ripple{ opacity:0; }
#cb-block:checked ~ .cbdemo__stage .phone__keys{ opacity:0; visibility:hidden; }
#cb-block:checked ~ .cbdemo__stage .phone__screen{ background:linear-gradient(180deg,#2A2825,#161513); }
#cb-block:checked ~ .cbdemo__stage .cb-missed{ opacity:1; visibility:visible; transition-delay:0s; }
.cbdemo__scope{ margin-top:var(--s-4); max-width:34em; }

/* B3-2 — 端末内照合の図。#privacy の「番号が端末の外へ出る」線と対の語彙 */
.inbox{
  margin-top:var(--s-6);
  border:1px solid color-mix(in srgb, var(--privacy-tint) 42%, transparent);
  border-radius:20px; padding:var(--s-6);
  background:color-mix(in srgb, var(--privacy-tint) 5%, transparent);
}
/* ラベルは枠線を切らずに枠内へ置く。.sec--mist はグラデーションのため、
   枠線を切って地の色を敷くと図の垂直位置によって色がずれる */
.inbox__label{ font-size:var(--t-micro); color:var(--privacy-tint); margin-bottom:var(--s-4); }
.inbox__row{ display:grid; gap:var(--s-4); align-items:center; }
.inbox__node{
  display:flex; align-items:center; gap:8px; justify-content:center;
  padding:12px 16px; border-radius:14px;
  background:var(--card-solid); border:1px solid var(--hairline);
  font-size:var(--t-caption); line-height:1.4; color:var(--ink);
}
.inbox__node .ico{ color:var(--ink-sub); }
.inbox__wire{
  width:2px; height:24px; justify-self:center;
  background:color-mix(in srgb, var(--ink) 22%, transparent);
  transform:scaleY(0); transform-origin:top;
}
.js .inbox.is-in .inbox__wire{
  animation:inboxWireV 320ms var(--e-out) forwards;
  animation-delay:calc(var(--i,0) * var(--stagger));
}
/* JS 無効時は .is-in が付かないので、線を最初から引かれた状態にする */
html:not(.js) .inbox__wire{ transform:none; }
@keyframes inboxWire { to{ transform:scaleX(1); } }
@keyframes inboxWireV{ to{ transform:scaleY(1); } }

/* B3-3 — 登録リスト。ガラスにしない（このセクションのガラス面は .cbdemo の 1 面だけ） */
.cblist{
  margin-top:var(--s-6); max-width:680px; padding:var(--pad-card); border-radius:22px;
  background:var(--card-solid); border:1px solid var(--hairline);
}
.cblist__head{ font-size:var(--t-caption); color:var(--ink-sub); margin-bottom:var(--s-3); }
.cblist__row{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:var(--s-2) var(--s-4); padding:var(--s-3) 0;
}
.cblist__row + .cblist__row{ border-top:1px solid var(--hairline); }
.cblist__body{ display:grid; gap:2px; }
.cblist__body b{ font-weight:500; font-size:var(--t-note); }
.cblist__num{ font-size:var(--t-micro); color:var(--ink-sub); font-variant-numeric:tabular-nums; }
/* アプリ本体は「着信拒否」を赤で出すが、LP の赤は 2 箇所に固定するため中立色に落とす（意図的な差分） */
.cblist__act{
  display:inline-flex; align-items:center; gap:6px;
  font-size:var(--t-caption); color:var(--c,var(--ink-sub));
}

/* B3-4 — 手順。#privacy の .stepper は流用しない（点灯演出の希少性を保つため静的リスト） */
/* 幅は本文の行長上限（§4-2）に合わせる。全幅だと 1 行 60 字を超えて読めない */
.cbsteps{ margin-top:var(--s-6); max-width:680px; }
.cbsteps__phase{
  font-size:var(--t-micro); line-height:1.70; color:var(--ink-sub);
  border-top:1px solid var(--hairline); padding-top:var(--s-3); margin-top:var(--s-4);
}
.cbsteps__phase:first-child{ margin-top:0; }
.cbsteps__item{
  display:grid; grid-template-columns:auto 1fr; gap:var(--s-3); align-items:start;
  padding:14px 0;
}
.cbsteps__ico{
  width:36px; height:36px; border-radius:12px; display:grid; place-items:center;
  background:color-mix(in srgb, var(--ink) 7%, transparent); color:var(--ink-sub);
}
.cbsteps__item b{ display:block; font-weight:500; font-size:var(--t-note); }
.cbsteps__item span.d{
  display:block; margin-top:2px;
  font-size:var(--t-caption); line-height:1.75; color:var(--ink-sub);
}
.cbnotes{ margin-top:var(--s-5); max-width:680px; }
.cbnotes .notebox{ margin-top:0; }
.cbnotes .t-micro{ margin-top:var(--s-3); }

/* --------------------------------------------------------------- privacy */
.stepper{ display:grid; gap:0; margin-top:var(--s-6); }
.stepper__row{
  position:relative; display:grid; grid-template-columns:auto 1fr auto;
  gap:var(--s-3); align-items:start; padding:14px 0;
}
.stepper__ico{
  width:36px; height:36px; border-radius:12px; display:grid; place-items:center;
  background:color-mix(in srgb, var(--ink) 7%, transparent); color:var(--ink-sub);
}
.stepper__row b{ display:block; font-weight:500; font-size:var(--t-note); }
.stepper__row span.d{ display:block; font-size:var(--t-caption); color:var(--ink-sub); }
.js .stepper__row{ opacity:0; transform:translateY(var(--rise)); }
.js .stepper.is-in .stepper__row{
  opacity:1; transform:none;
  transition:opacity var(--d-slow) var(--e-out), transform var(--d-slow) var(--e-out);
  transition-delay:calc(var(--i,0) * 220ms);
}
.stepper__wire{
  position:absolute; left:17px; top:52px; bottom:-6px; width:2px; overflow:hidden;
  background:color-mix(in srgb, var(--ink) 10%, transparent);
}
.stepper__wire::after{
  content:""; position:absolute; inset:0; background:var(--notice-tint);
  transform:scaleY(0); transform-origin:top;
}
.js .stepper.is-in .stepper__wire::after{
  transform:scaleY(1); transition:transform var(--d-story) var(--e-out) 880ms;
}
.privacy__grid{ display:grid; gap:var(--s-6); margin-top:var(--s-6); }
.privacy__grid .device-figure{ margin-top:0; }
.privacy__points{ display:grid; gap:var(--gap-card); margin-top:var(--s-8); }
.point{ padding:var(--pad-card); }
.point .ico{ color:var(--c,var(--ink-sub)); }
.point h3{ margin-top:var(--s-3); font-size:var(--t-h5); font-weight:500; }
.point p{ margin-top:var(--s-2); font-size:var(--t-caption); line-height:1.75; color:var(--ink-sub); }

/* ----------------------------------------------------------- feature_more */
.feats{ display:grid; gap:var(--gap-card); margin-top:var(--s-6); }
.feat{ padding:var(--pad-card); display:flex; flex-direction:column; }
.feat__top{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.feat__top .ico{ color:var(--ink-sub); }
.feat h3{ margin-top:var(--s-3); font-size:var(--t-h5); font-weight:500; }
.feat p{ margin-top:var(--s-2); font-size:var(--t-caption); line-height:1.75; color:var(--ink-sub); }
.feat img{ margin-top:auto; padding-top:var(--s-4); }

/* --------------------------------------------------------------- pricing */
.plan-free{
  position:relative; margin-top:var(--s-8); padding:32px 24px; border-radius:24px;
  background:var(--card); border:1px solid var(--hairline);
  -webkit-backdrop-filter:blur(var(--blur)); backdrop-filter:blur(var(--blur));
  max-width:760px; margin-inline:auto;
}
.plan-free__name{ font-size:24px; font-weight:500; }
.plan-free__price{ font-size:48px; font-weight:500; letter-spacing:-.02em; line-height:1.1; margin-top:4px; }
.plan-free__note{ font-size:16px; color:var(--ink-sub); margin-top:var(--s-2); }
.plan-list{ display:grid; gap:var(--s-3); margin-top:var(--s-6); }
.plan-list li{ display:flex; gap:10px; align-items:flex-start; font-size:16px; line-height:1.7; }
.plan-list .ico{ color:var(--conf-high); margin-top:4px; }
/* 利点ではなく制約（無料版の広告）を並べる行。緑チェックだと利点に読めるため中立色にする */
.plan-list li.is-note .ico{ color:var(--ink-sub); }
.plan-premium{
  max-width:560px; margin:var(--s-6) auto 0; border-radius:18px;
  border:1px solid var(--hairline); background:color-mix(in srgb, var(--ink) 3%, transparent);
}
.plan-premium > summary{ padding:20px 24px; font-size:var(--t-note); }
.plan-premium .disclosure__body > div > div{ padding:0 24px 24px; }
.plan-premium h3{ font-size:20px; font-weight:500; }
.plan-premium .price{ font-size:28px; font-weight:500; margin-top:4px; }
.plan-premium .plan-list .ico{ color:var(--ink-sub); }
.must{ font-weight:600; }
.plan-premium figure{ margin-top:var(--s-6); }
.plan-premium figure img{ margin-inline:auto; }

/* ------------------------------------------------------------------- FAQ */
.faq{ margin-top:var(--s-6); max-width:760px; }
.faq details{ border-bottom:1px solid var(--hairline); }
.faq summary{
  display:flex; gap:var(--s-3); align-items:center; justify-content:space-between;
  min-height:44px; padding:20px 0; cursor:pointer; list-style:none;
  font-size:17px; font-weight:500; line-height:1.5;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq .disclosure__body > div > p{
  font-size:15px; line-height:1.85; color:var(--ink-sub); padding-bottom:24px;
}

/* --------------------------------------------------------- closing/footer */
.closing{ min-height:88svh; text-align:center; }
.closing img{ margin-inline:auto; }
.closing .ctablock{ max-width:420px; margin-inline:auto; }
.site-footer{
  background:var(--bg-cream-2); padding-block:56px 72px;
  padding-bottom:calc(72px + var(--bar-h) + env(safe-area-inset-bottom));
}
.site-footer .disclaimer{ font-size:var(--t-caption); line-height:1.85; color:var(--ink-sub); }
.footer__row{
  margin-top:var(--s-6); padding-top:var(--s-6); border-top:1px solid var(--hairline);
  display:grid; gap:var(--s-5);
}
.footer__brand{ display:flex; align-items:center; gap:10px; font-size:var(--t-note); }
.footer__links{ display:grid; gap:2px; }
.footer__links a{
  display:inline-flex; align-items:center; gap:6px; min-height:44px;
  font-size:var(--t-caption); text-decoration:none;
}
@media (hover:hover){ .footer__links a:hover{ text-decoration:underline; } }
.footer__legal{ margin-top:var(--s-6); display:grid; gap:4px; }

/* ------------------------------------------------------- sticky CTA バー */
.stickybar{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  height:var(--bar-h); padding-bottom:env(safe-area-inset-bottom);
  background:var(--card); border-top:1px solid var(--hairline);
  -webkit-backdrop-filter:blur(var(--blur)); backdrop-filter:blur(var(--blur));
  transform:translateY(100%); opacity:0; pointer-events:none;
  transition:transform var(--d-base) var(--e-out), opacity var(--d-base) var(--e-out);
}
.stickybar.is-shown{ transform:none; opacity:1; pointer-events:auto; }
.stickybar__inner{
  height:var(--bar-h); max-width:1160px; margin-inline:auto; padding-inline:20px;
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-4);
}
.stickybar__lead{ display:flex; align-items:center; gap:10px; min-width:0; }
.stickybar__lead img{ display:block; width:32px; height:32px; border-radius:8px; }
.stickybar__text{ font-size:14px; line-height:1.35; min-width:0; }
.stickybar__text b{ display:block; font-weight:500; }
.stickybar__text span{ display:block; color:var(--ink-sub); font-size:13px; }
.stickybar .cta{ width:auto; min-height:44px; padding:12px 20px; flex:none; }
html:not(.js) .stickybar{ transform:none; opacity:1; pointer-events:auto; }

/* ========================================================== breakpoints */
/* SP は .br-pc を効かせず自然折り返しにする方針（§2「SP で <br> を効かせない」）。
   34px の見出しだと最終行が 1 文字になるため、行数を変えない balance で均す */
@media (max-width:767px){
  .t-display,.t-h1,.t-h2{ text-wrap:balance; }
}

@media (min-width:768px){
  :root{ --sec-pad:var(--s-10); --gap-card:var(--s-5); --pad-card:var(--s-6); }
  .container{ padding-inline:32px; }
  .br-pc{ display:inline; }
  .cta{ width:auto; min-height:44px; }
  .ctablock{ display:block; }

  .scenes{ grid-template-columns:repeat(3,1fr); }
  .privacy__points{ grid-template-columns:repeat(3,1fr); }
  .result__pair{ grid-template-columns:repeat(2,1fr); }
  .feats{ grid-template-columns:repeat(2,1fr); }

  .hero{ padding-block:120px 72px; }
  .hero__scrim{
    background:linear-gradient(105deg,
      color-mix(in srgb, var(--bg-page) 92%, transparent) 0%,
      color-mix(in srgb, var(--bg-page) 72%, transparent) 38%,
      color-mix(in srgb, var(--bg-page) 0%, transparent) 62%);
  }
  .hero__visual{ margin-top:0; }

  .hero__visual--pc{ display:block; }
  .hero__visual--sp{ display:none; }
  .ocr__side{ display:block; }

  /* split: ビジュアル左 / テキスト右（見出し・補足は同一カラムに積む） */
  .split{
    grid-template-columns:minmax(0,6fr) minmax(0,5fr);
    grid-template-areas:"media head" "media tail";
    align-content:start; column-gap:var(--s-8); row-gap:var(--s-5);
  }
  .split__head{ grid-area:head; margin-bottom:0; }
  .split__media{ grid-area:media; margin-block:0; }
  .split__tail{ grid-area:tail; }

  .anatomy{ grid-template-columns:minmax(0,4fr) minmax(0,6fr); align-items:start; gap:var(--s-8); }
  .anatomy__labels-wrap{ grid-column:1; grid-row:1; }
  .anatomy__card{ grid-column:2; grid-row:1; }

  .privacy__grid{ grid-template-columns:minmax(0,7fr) minmax(0,4fr); align-items:start; gap:var(--s-8); }

  /* .cbdemo の 2 カラム化はここでは行わない。768–1023px は stage 側が 300px 前後に
     なり .phone と同心円がはみ出すため、2 カラムは 1024px から（§4-1） */
  .cbdemo__opt{ font-size:15px; }
  .cbdemo__descs{ min-height:3.6em; }
  .cbnotes{ margin-top:var(--s-6); }
  /* 端末内照合の図は横 1 本に。ノードが 2 行に折れても中央で揃う */
  .inbox__row{ grid-template-columns:auto 1fr auto 1fr auto; gap:var(--s-5); }
  .inbox__wire{ width:auto; height:2px; justify-self:stretch; transform:scaleX(0); transform-origin:left; }
  .js .inbox.is-in .inbox__wire{ animation-name:inboxWire; }

  .stickybar__inner{ padding-inline:32px; }
  .plan-free{ padding:56px 64px; }
  .footer__row{ grid-template-columns:auto 1fr; align-items:start; }
  .footer__links{ justify-items:end; grid-auto-flow:row; }
}

/* 768–1023px は split の見出し列が 288–315px しかなく、.t-h1（44–46px）だと
   <br class="br-pc"> で分けた行がさらに再折り返しして 2 文字の孤立行が出る。
   この帯だけ 1 段下のスケール（--t-h2 = 36.7–42.3px）へ落として 2 行に収める。
   ブレークポイントは既存の 768 / 1024 のみを使い、中間 bp は増やさない（§4-1） */
@media (min-width:768px) and (max-width:1023px){
  .split__head .t-h1{ font-size:var(--t-h2); }
}

@media (min-width:1024px){
  :root{ --sec-pad:var(--s-11); }
  .container{ padding-inline:40px; }
  .anchornav{ display:block; }
  .feats{ grid-template-columns:repeat(3,1fr); }
  /* 見出し「根拠のある答えを。」を 1 行に収めるため 7:5（2 カラム化は 1024 から） */
  .hero__inner{
    display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr);
    gap:var(--s-7); align-items:center;
  }
  .hero__visual{ margin-top:0; }
  .story-layout{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:var(--s-8); align-items:start; }
  .story-layout__text{ position:sticky; top:0; min-height:100svh; display:flex; flex-direction:column; justify-content:center; }
  .story{ height:260vh; margin-top:0; }
  .story__stage{ top:0; height:100svh; justify-content:center; }
  .phone{ width:min(28vw,254px); }
  /* B2 のみ 2 カラム。操作（右）と結果（左）が同時に視野へ入ることが条件 */
  .cbsec{ margin-top:var(--s-10); }
  .cbblock + .cbblock{ margin-top:var(--s-9); }
  .cbdemo{
    grid-template-columns:minmax(0,5fr) minmax(0,6fr);
    grid-template-areas:"stage control";
    column-gap:var(--s-8); align-items:center; padding:var(--s-7);
  }
  .cbdemo__stage .phone{ width:min(24vw,236px); }
  .result__real{ display:block; margin-top:var(--s-8); }
  .feat__shot{ display:block; }
  .stickybar__inner{ padding-inline:40px; }
}

/* -------------------------------------------------- 低い縦幅（ピン解除） */
@media (max-height:560px){
  .story{ height:auto; }
  .story__stage{ position:static; height:auto; }
  .story__track{ display:none; }
  .phone__banner,.phone__snippet,.phone__premium{ opacity:1 !important; transform:none !important; }
  .story__cap{ color:var(--ink) !important; }
  .story__cap .dot{ background:currentColor !important; }
  .cbdemo__stage .phone{ width:min(40vw,168px); }
}

/* ------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  html{ scroll-behavior:auto; }
  .js [data-reveal]{ opacity:1 !important; transform:none !important; }
  .js .hero__line > span,.js .hero__rise{ opacity:1 !important; transform:none !important; }
  .js .sources li{ opacity:1 !important; transform:none !important; }
  .js .stepper__row{ opacity:1 !important; transform:none !important; }
  .js .scan__hit{ opacity:1 !important; transform:none !important; }
  .js .conf__bar{ transform:scaleX(var(--fill,1)) !important; }
  .js .stepper__wire::after{ transform:scaleY(1) !important; }
  /* animation が .01ms でも確実に「引かれた状態」で残す（!important は animation に優先する） */
  .js .inbox__wire{ transform:none !important; }
  .scan__beam{ display:none; }
  .story{ height:auto; }
  .story__stage{ position:static; height:auto; }
  .story__track{ display:none; }
  .phone__banner,.phone__snippet,.phone__premium{ opacity:1 !important; transform:none !important; }
  .story__cap{ color:var(--ink) !important; }
  .story__cap .dot{ background:currentColor !important; }
  .hero__scroll-cue{ display:none; }
}

/* ------------------------------------------------ reduced transparency */
@media (prefers-reduced-transparency:reduce){
  .glass,.rcard,.stickybar,.anchornav ul,.plan-free,.premium-block,.hero__notes > span{
    -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
    background:var(--card-solid) !important;
  }
  .glow,.sec--grain::after{ display:none; }
}