/* Teastia LP — 検証ブルーの製品ブランド。判定の4値だけは独立した色ルールを持つ。 */

:root{
  --ink:#0b1628; --ink-2:#14233d; --muted:#58677b; --muted-2:#7b8798;
  --blue:#2855f6; --blue-deep:#1b3fd0; --blue-soft:#eef2ff; --cyan:#4bd7e8;
  --line:#dce4ef; --line-soft:#e9eef6; --paper:#fff; --bg:#f7f9fc;
  /* 判定の4値 — ブランド色とは別系統。藍（ブランド）に合わせた、紙に刷る色（朱・山吹・緑・鈍色）
     無印＝文字の色（読める濃さ）、-vivid＝線・印・面の色（色の名前が伝わる明るさ） */
  --no:#b23f2a; --no-vivid:#d0492e; --cond:#7d5a12; --cond-vivid:#cc9a2a;
  --go:#2f6b4f; --go-vivid:#3b8c65; --unk:#5f6979; --unk-vivid:#8d96a6;
  --dark:#070f1e; --dark-2:#0b1628; --dark-line:rgba(120,160,220,.16);
  --r-panel:20px; --r-card:16px; --r-part:10px; --r-button:9px; --shadow:0 18px 50px rgba(20,44,90,.08);
  --hdr-h:84px;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr-h) + 16px)}
body{margin:0;background:var(--paper);color:var(--ink);font-size:16px;line-height:1.75;overflow-x:hidden;
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  -webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,ul,ol,figure,blockquote{margin-top:0}
ul,ol{padding:0;list-style:none}
em{font-style:normal;color:var(--blue)}
img{max-width:100%}
.container{width:min(1280px,calc(100% - 80px));margin-inline:auto}
.skip-link{position:absolute;left:16px;top:-100px;background:var(--blue);color:#fff;padding:10px 18px;z-index:40;border-radius:var(--r-button)}
.skip-link:focus{top:12px}
/* 読み上げだけに伝える補足（見た目には出さない） */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
a:focus-visible,summary:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:4px}
.i{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ── header ─────────────────────────────────────────── */
/* 最初は透過。ページが動いたら濃くする */
.hdr-sentinel{position:absolute;top:0;left:0;width:1px;height:1px;pointer-events:none}
.site-header{position:sticky;top:0;z-index:30;background:transparent;border-bottom:1px solid transparent;
  transition:background-color .28s ease,border-color .28s ease,backdrop-filter .28s ease}
.site-header.is-stuck{background:rgba(6,13,27,.88);backdrop-filter:blur(16px);border-bottom-color:var(--dark-line)}
.header-inner{height:var(--hdr-h);display:flex;align-items:center;gap:14px;color:#fff}
.brand{display:inline-flex;align-items:center;gap:10px;font-size:1.32rem;font-weight:700;letter-spacing:-.035em}
.brand-logo{display:block;width:auto;height:32px}
.site-footer .brand-logo{height:28px}
.brand-owner{font-size:.8rem;color:#8ea3c0;margin-right:auto}
/* 文字リンク（ヘッダー・フッター）：ホバーで下線が左から右へ伸び、離すと右へ抜ける */
.brand-owner a,.desktop-nav a,.footer-links a{position:relative}
.brand-owner a::after,.desktop-nav a::after,.footer-links a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right center;transition:transform .32s cubic-bezier(.22,.8,.2,1)}
.brand-owner a:hover::after,.desktop-nav a:hover::after,.footer-links a:hover::after,
.brand-owner a:focus-visible::after,.desktop-nav a:focus-visible::after,.footer-links a:focus-visible::after{transform:scaleX(1);transform-origin:left center}
@media (prefers-reduced-motion:reduce){.brand-owner a::after,.desktop-nav a::after,.footer-links a::after{transition:none}}
.desktop-nav{display:flex;gap:36px;font-size:.92rem;color:#cdd8ea}
.desktop-nav a:hover{color:#fff}
.header-cta{margin-left:34px;background:var(--blue);color:#fff;padding:12px 22px;border:1px solid rgba(111,205,255,.72);border-radius:var(--r-button);font-size:.9rem;font-weight:600;white-space:nowrap;transition:background .2s ease,box-shadow .25s ease}
.header-cta:hover{background:var(--blue-deep);box-shadow:0 0 0 1px rgba(75,215,232,.48),0 20px 54px rgba(15,56,194,.48),0 0 40px rgba(40,85,246,.42),inset 0 0 20px rgba(75,215,232,.12)}

/* ── buttons ────────────────────────────────────────── */
.button{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;border-radius:var(--r-button);font-size:.96rem;font-weight:600;white-space:nowrap;transition:background .2s,border-color .2s,color .2s}
.button-primary{background:var(--blue);color:#fff}
.button-primary:hover{background:var(--blue-deep)}
.button-outline{background:#fff;color:var(--ink);border:1px solid var(--line);padding:13px 22px}
.button-outline:hover{border-color:var(--blue);color:var(--blue)}

/* ── shared type ────────────────────────────────────── */
.eyebrow{font-size:.76rem;font-weight:700;letter-spacing:.2em;color:var(--blue);margin:0 0 20px;display:flex;align-items:center;gap:16px}
.eyebrow::after{content:"";height:1px;width:56px;background:currentColor;opacity:.45}
.eyebrow-plain{color:#8ea8cc;letter-spacing:.24em}
.eyebrow-plain::after{display:none}
.eyebrow-cyan{color:var(--cyan)}
.eyebrow-center{justify-content:center}
.eyebrow-center::before{content:"";height:1px;width:56px;background:currentColor;opacity:.45}
.section{padding:120px 0;background:var(--bg);position:relative}
.section-title{font-size:clamp(2rem,3.5vw,3.05rem);line-height:1.34;font-weight:700;letter-spacing:-.01em;margin:0 0 22px}
.section-title.center{text-align:center}
.section-lead{color:var(--muted);font-size:1rem;margin:0}
.section-lead.center{text-align:center;margin-inline:auto}
.section-lead.right{text-align:right;align-self:end}
.split-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:56px;flex-wrap:wrap}

/* ── code window ────────────────────────────────────── */
.code-window{background:#0f1c2f;border-radius:var(--r-part);overflow:hidden;box-shadow:0 12px 30px rgba(11,22,40,.18)}
.code-bar{display:flex;align-items:center;gap:8px;padding:9px 14px;background:#16253c;color:#8fa4c2;font:600 .74rem/1 var(--mono)}
.code-bar .dot{width:8px;height:8px;border-radius:50%;background:#48607f;box-shadow:12px 0 0 #48607f,24px 0 0 #48607f;margin-right:18px}
.code-body{margin:0;padding:16px 16px 18px;color:#cfe0f5;font:400 .78rem/1.85 var(--mono);white-space:pre;overflow-x:auto}
.code-body .ln{display:inline-block;width:2.4em;color:#46597a;user-select:none}
.code-body .kw{color:#7fb0ff}
.code-body .str{color:#8ad9b0}
.code-body mark{background:transparent;padding:1px 5px;border-radius:4px;color:inherit}
.mark-red{border:1px solid #f0685e;background:rgba(217,45,32,.14)!important;color:#ffc7c1!important}
/* 例示カードの検出箇所。カードの色（--q-hit：暗い画面で読める明るさ）で、下線と淡い面で示す。行番号も同じ色に */
.mark-hit{background:color-mix(in srgb,var(--q-hit) 17%,transparent)!important;box-shadow:inset 0 -1px 0 var(--q-hit);border-radius:3px 3px 0 0!important;color:color-mix(in srgb,var(--q-hit) 32%,#fff)!important}
.code-body .ln.hit{color:var(--q-hit)}
.code-window.small .code-body{font-size:.74rem;padding:13px 14px 15px}
.code-window.tiny .code-body{font-size:.68rem;padding:12px}

/* ── 01 MV ──────────────────────────────────────────── */
.hero{background:var(--dark);color:#fff;position:relative;overflow:hidden;padding-bottom:0;margin-top:calc(var(--hdr-h) * -1)}
.hero::before{content:"";position:absolute;inset:0;background:
  radial-gradient(900px 520px at 72% 34%,rgba(40,85,246,.24),transparent 62%),
  radial-gradient(620px 420px at 88% 60%,rgba(75,215,232,.12),transparent 66%)}
.hero-atmosphere{position:absolute;inset:-5%;pointer-events:none;background-image:url("./img/hero-atmosphere-v2.png");background-image:image-set(url("./img/hero-atmosphere-v2.webp") type("image/webp"),url("./img/hero-atmosphere-v2.png") type("image/png"));background-position:center;background-size:cover;background-repeat:no-repeat;opacity:.78;filter:saturate(.92) contrast(1.04);transform:scale(1.035)}
.hero-atmosphere::before{content:"";position:absolute;inset:0;z-index:1;background:
  linear-gradient(90deg,rgba(7,15,30,.18) 0%,rgba(7,15,30,.34) 38%,rgba(7,15,30,.08) 76%,rgba(7,15,30,.18) 100%),
  linear-gradient(180deg,rgba(7,15,30,.18) 0%,transparent 28%,rgba(7,15,30,.22) 70%,rgba(7,15,30,.68) 100%)}
/* 背景の波を動かす WebGL の絵（MV と BEFORE YOU CONNECT。JS が差し込む）。MV の暗くする重ね（::before）はその上に置く */
.bg-wave{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%;opacity:0;transition:opacity .9s ease}
.bg-wave.is-on{opacity:1}
.hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);gap:48px;align-items:center;padding:calc(96px + var(--hdr-h)) 0 84px}
.hero h1{font-size:clamp(2.3rem,4.2vw,3.9rem);line-height:1.24;font-weight:700;letter-spacing:-.02em;margin:0 0 26px;white-space:nowrap}
.hero h1 em{background:linear-gradient(100deg,#58ddff 0%,#5387ff 36%,#2855f6 88%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 24px rgba(40,85,246,.27)}
.hero-index{display:flex;align-items:center;gap:12px;height:16px;margin-bottom:25px;color:#7fa2d4;font:700 .68rem/1 var(--mono);letter-spacing:.18em}
.hero-rule{display:block;width:56px;height:2px;background:linear-gradient(90deg,var(--cyan),#5782d6)}
.hero-index i{display:block;width:34px;height:1px;background:#43679c;position:relative}.hero-index i::after{content:"";position:absolute;right:-2px;top:-2px;border-left:4px solid #6e9ee1;border-top:2px solid transparent;border-bottom:2px solid transparent}
.hero-index b{font-weight:700;color:#93bcf2}
.hero-lead{color:#b8c7de;font-size:1.03rem;margin:0 0 38px}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap}
.hero-actions .button-primary{border:1px solid rgba(111,205,255,.72);box-shadow:0 0 0 1px rgba(40,85,246,.35),0 0 24px rgba(40,85,246,.36),inset 0 0 20px rgba(75,215,232,.08);padding-inline:28px}.hero-actions .button-primary:hover{box-shadow:0 0 0 1px rgba(75,215,232,.48),0 0 34px rgba(40,85,246,.48),inset 0 0 20px rgba(75,215,232,.12)}

.hero-visual{position:relative;filter:drop-shadow(0 32px 45px rgba(0,0,0,.25))}
.hero-hud-label{position:absolute;right:1%;top:-21px;color:#3e9ce8;font:700 .62rem/1 var(--mono);letter-spacing:.14em;opacity:.72}
.scan-frame{position:relative;padding:14px 0}
.scan-frame .code-window{border:1px solid rgba(86,177,229,.28);transform:perspective(1400px) rotateY(-8deg) rotateX(2deg);box-shadow:0 40px 90px rgba(0,0,0,.5),0 0 42px rgba(40,85,246,.13)}
.hero-scan-status{position:absolute;left:4%;bottom:-7px;color:#4389d6;font:700 .6rem/1 var(--mono);letter-spacing:.16em}

/* ── 読み取りヘッド（scanfx）──────────────────────────────
   グラフィックから独立した自己完結レイヤー。差し替え時は
   .scanfx-layer ごと新しい絵に移し、休止位置の2変数を合わせるだけ。
   JSが無い／モーション低減の場合、この既定値がそのまま最終状態になる。 */
.scanfx{--scanfx-rest-y:52%;--scanfx-rest-x:46%}
.scanfx-layer{position:absolute;inset:0;z-index:2;pointer-events:none}
.scanfx-veil{position:absolute;inset:0;z-index:1;background:var(--dark);opacity:0;pointer-events:none}
.scan-frame .chip{z-index:3}

.scanfx-frame span{position:absolute;width:22px;height:22px;border:1px solid var(--cyan);opacity:.7;filter:drop-shadow(0 0 4px rgba(75,215,232,.45))}
.scanfx-frame span:nth-child(1){left:-10px;top:-4px;border-right:0;border-bottom:0}
.scanfx-frame span:nth-child(2){right:-10px;top:-4px;border-left:0;border-bottom:0}
.scanfx-frame span:nth-child(3){left:-10px;bottom:-4px;border-right:0;border-top:0}
.scanfx-frame span:nth-child(4){right:-10px;bottom:-4px;border-left:0;border-top:0}

.scanfx-h,.scanfx-v{position:absolute;inset:0}
.scanfx-h{transform:translateY(var(--scanfx-rest-y))}
.scanfx-v{transform:translateX(var(--scanfx-rest-x))}
.scanfx-h .line{position:absolute;left:-4%;right:-4%;top:0;height:2px;opacity:.75;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent)}
.scanfx-v .line{position:absolute;top:-6%;bottom:-6%;left:0;width:2px;opacity:.75;
  background:linear-gradient(180deg,transparent,var(--cyan),transparent)}
.scanfx-h .wash{position:absolute;left:-4%;right:-4%;top:-64px;height:64px;opacity:0;
  background:linear-gradient(180deg,transparent,rgba(75,215,232,.14))}

/* 待機状態（JSがモーション可と判断したときだけ） */
.scanfx-ready .scanfx-frame span{opacity:0;transform:scale(1.035)}
.scanfx-ready .scanfx-h{transform:translateY(-4%);opacity:0}
.scanfx-ready .scanfx-v{transform:translateX(-8%);opacity:0}
.scanfx-ready .scanfx-veil{opacity:.48}
.scanfx-ready [data-scanfx-find]{opacity:0;transform:translate3d(10px,5px,0) scale(.972)}
.scanfx-ready [data-scanfx-mark]{opacity:0}

/* 再生 — 1ファイルを上から一度だけ読み通し、休止位置に落ち着く */
.scanfx-ready .is-run .scanfx-h{will-change:transform;animation:scanfx-head 11s .32s infinite both}
.scanfx-ready .is-run .scanfx-h .wash{animation:scanfx-wash 11s .32s infinite both}
.scanfx-ready .is-run .scanfx-v{will-change:transform;animation:scanfx-cross 11s 1.5s infinite both}
.scanfx-ready .is-run .scanfx-frame span{animation:scanfx-bracket 11s .18s infinite both}
.scanfx-ready .is-run .scanfx-veil{animation:scanfx-veil 11s .2s infinite both}
.scanfx-ready .is-run [data-scanfx-find]{animation:scanfx-find 11s var(--d,0s) infinite both}
.scanfx-ready .is-run [data-scanfx-mark]{animation:scanfx-mark 11s var(--d,0s) infinite both}
/* 画面から出ている間は止める */
.scanfx.is-away .scanfx-h,.scanfx.is-away .scanfx-h .wash,.scanfx.is-away .scanfx-v,
.scanfx.is-away .scanfx-frame span,.scanfx.is-away .scanfx-veil,
.scanfx.is-away [data-scanfx-find],.scanfx.is-away [data-scanfx-mark]{animation-play-state:paused}

@keyframes scanfx-head{
  0%{transform:translateY(-4%);opacity:0;animation-timing-function:cubic-bezier(.3,0,.5,1)}
  0.68%{opacity:1;animation-timing-function:linear}
  10.45%{transform:translateY(106%);opacity:1;animation-timing-function:linear}
  11.73%{transform:translateY(106%);opacity:1;animation-timing-function:cubic-bezier(.26,.88,.24,1)}
  16.91%,84%{transform:translateY(var(--scanfx-rest-y));opacity:1}
  91%,100%{transform:translateY(var(--scanfx-rest-y));opacity:0}
}
@keyframes scanfx-wash{0%,0.68%{opacity:0}1.52%,10.45%{opacity:1}13.19%,100%{opacity:0}}
@keyframes scanfx-cross{
  0%{opacity:0;transform:translateX(-8%);animation-timing-function:cubic-bezier(.24,.86,.24,1)}
  1.8%{opacity:1}
  6%,84%{opacity:1;transform:translateX(var(--scanfx-rest-x))}
  91%,100%{opacity:0;transform:translateX(var(--scanfx-rest-x))}
}
@keyframes scanfx-bracket{
  0%{opacity:0;transform:scale(1.035);animation-timing-function:cubic-bezier(.22,.7,.3,1)}
  3.05%{opacity:.32;transform:none}
  18.11%{opacity:.32}
  21.82%,84%{opacity:.55;transform:none}
  91%,100%{opacity:0;transform:none}
}
@keyframes scanfx-veil{0%{opacity:.48}5.27%,84%{opacity:0}91%,100%{opacity:.48}}
@keyframes scanfx-find{
  0%{opacity:0;transform:translate3d(10px,5px,0) scale(.972);animation-timing-function:cubic-bezier(.2,.75,.3,1)}
  3.64%,84%{opacity:1;transform:none}
  90%,100%{opacity:0;transform:none}
}
@keyframes scanfx-mark{0%{opacity:0}3.09%,84%{opacity:1}90%,100%{opacity:0}}
.chip{position:absolute;display:flex;align-items:flex-start;gap:10px;background:rgba(12,24,44,.92);border:1px solid rgba(120,160,220,.24);border-radius:var(--r-part);padding:11px 15px;backdrop-filter:blur(8px);max-width:230px;box-shadow:0 14px 34px rgba(0,0,0,.36)}
.chip b{display:block;font-size:.82rem;color:#fff;margin-bottom:2px}
.chip span:last-child{font-size:.72rem;line-height:1.5;color:#9db0cc}
.chip-ico{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;font-size:.72rem;flex:none}
.chip-red{right:6%;top:42%;border-color:rgba(240,104,94,.42)}
.chip-red .chip-ico{background:rgba(217,45,32,.2);color:#ff9d93}
.chip-amber{right:-2%;top:8%;border-color:rgba(233,162,59,.4)}
.chip-amber .chip-ico{background:rgba(220,104,3,.2);color:#ffc879}
.chip-blue{right:-4%;top:72%;border-color:rgba(90,140,255,.4)}
.chip-blue .chip-ico{background:rgba(40,85,246,.24);color:#9ab8ff}

.hero-bottom{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 32px minmax(0,1fr) 32px minmax(0,1fr);gap:12px;align-items:stretch;border-top:1px solid var(--dark-line);padding:22px 0 34px}
.hero-point{position:relative;min-width:0;border:1px solid var(--dark-line);border-radius:var(--r-part);padding:17px 20px 19px;background:rgba(255,255,255,.018)}
.point-meta{display:flex;align-items:center;gap:10px;color:#8094b2;font:700 .68rem/1 var(--mono);letter-spacing:.12em}
.point-num{display:grid;place-items:center;width:27px;height:22px;border-radius:6px;background:rgba(40,85,246,.16);color:#82a3ff;letter-spacing:0}
.point-main{display:flex;align-items:center;gap:12px;margin-top:13px;color:#e5ecf6}
.point-main .i{font-size:1.28rem;stroke:#6f96ff}
.point-main strong{font-size:.91rem;line-height:1.55;font-weight:650}
.hero-flow-arrow{display:grid;place-items:center;color:#5277df;font:400 1.35rem/1 var(--mono)}
.hero-point.is-result{border-color:rgba(75,215,232,.66);background:linear-gradient(135deg,rgba(40,85,246,.24),rgba(75,215,232,.09));box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 0 26px rgba(40,85,246,.14)}
.hero-point.is-result .point-num{background:var(--blue);color:#fff}.hero-point.is-result .point-main .i{stroke:var(--cyan)}

/* 右の11秒スキャンと同じ時計で、検出→根拠→判定をステータス表示する。
   カードは動かさず、枠・番号・アイコン・矢印だけを発光させる。 */
.hero-point::after{content:"";position:absolute;inset:-1px;border:1px solid var(--stage-color,#6f96ff);border-radius:var(--r-part);opacity:0;pointer-events:none;box-shadow:inset 0 0 22px var(--stage-wash,rgba(40,85,246,.12)),0 0 20px var(--stage-glow,rgba(40,85,246,.20))}
.hero-point:nth-child(1){--stage-color:#6f96ff;--stage-wash:rgba(40,85,246,.12);--stage-glow:rgba(40,85,246,.22)}
.hero-point:nth-child(3){--stage-color:#77a9ff;--stage-wash:rgba(69,119,246,.13);--stage-glow:rgba(69,119,246,.23)}
.hero-point:nth-child(5){--stage-color:var(--cyan);--stage-wash:rgba(75,215,232,.13);--stage-glow:rgba(75,215,232,.28)}
/* 動かせる環境では03の常時点灯を解除し、シーケンスの最後で点灯させる */
.scanfx-ready .hero .hero-point.is-result{border-color:var(--dark-line);background:rgba(255,255,255,.018);box-shadow:none}
.scanfx-ready .hero .hero-point.is-result .point-num{background:rgba(40,85,246,.16);color:#82a3ff}
.scanfx-ready .hero .hero-point.is-result .point-main .i{stroke:#6f96ff}
.scanfx-ready .hero .hero-point::after,.scanfx-ready .hero .hero-point .point-num,.scanfx-ready .hero .hero-point .point-main .i,.scanfx-ready .hero .hero-flow-arrow{animation-duration:11s;animation-timing-function:linear;animation-iteration-count:infinite;animation-fill-mode:both;animation-play-state:paused}
.scanfx-ready .hero.is-live .hero-point::after,.scanfx-ready .hero.is-live .hero-point .point-num,.scanfx-ready .hero.is-live .hero-point .point-main .i,.scanfx-ready .hero.is-live .hero-flow-arrow{animation-play-state:running}
.scanfx-ready .hero .hero-point:nth-child(1)::after{animation-name:hero-stage-01}
.scanfx-ready .hero .hero-point:nth-child(3)::after{animation-name:hero-stage-02}
.scanfx-ready .hero .hero-point:nth-child(5)::after{animation-name:hero-stage-03}
.scanfx-ready .hero .hero-point:nth-child(1) .point-num{animation-name:hero-num-01}
.scanfx-ready .hero .hero-point:nth-child(3) .point-num{animation-name:hero-num-02}
.scanfx-ready .hero .hero-point:nth-child(5) .point-num{animation-name:hero-num-03}
.scanfx-ready .hero .hero-point:nth-child(1) .point-main .i{animation-name:hero-icon-01}
.scanfx-ready .hero .hero-point:nth-child(3) .point-main .i{animation-name:hero-icon-02}
.scanfx-ready .hero .hero-point:nth-child(5) .point-main .i{animation-name:hero-icon-03}
.scanfx-ready .hero .hero-flow-arrow:nth-child(2){animation-name:hero-arrow-01}
.scanfx-ready .hero .hero-flow-arrow:nth-child(4){animation-name:hero-arrow-02}
@keyframes hero-stage-01{
  0%,3%,21%,100%{opacity:0;filter:none}
  6%,16%{opacity:1;filter:brightness(1.45) drop-shadow(0 0 6px rgba(87,139,255,.72))}
}
@keyframes hero-stage-02{
  0%,18%,40%,100%{opacity:0;filter:none}
  23%,35%{opacity:1;filter:brightness(1.48) drop-shadow(0 0 6px rgba(104,158,255,.75))}
}
@keyframes hero-stage-03{
  0%,37%,91%,100%{opacity:0;filter:none}
  43%,83%{opacity:1;filter:brightness(1.55) drop-shadow(0 0 7px rgba(75,215,232,.82))}
}
@keyframes hero-num-01{0%,3%,21%,100%{background:rgba(40,85,246,.16);color:#82a3ff;box-shadow:none}6%,16%{background:var(--blue);color:#fff;box-shadow:0 0 14px rgba(40,85,246,.7)}}
@keyframes hero-num-02{0%,18%,40%,100%{background:rgba(40,85,246,.16);color:#82a3ff;box-shadow:none}23%,35%{background:#3568f8;color:#fff;box-shadow:0 0 14px rgba(69,119,246,.72)}}
@keyframes hero-num-03{0%,37%,91%,100%{background:rgba(40,85,246,.16);color:#82a3ff;box-shadow:none}43%,83%{background:var(--blue);color:#fff;box-shadow:0 0 16px rgba(75,215,232,.72)}}
@keyframes hero-icon-01{0%,3%,21%,100%{stroke:#6f96ff;filter:none}6%,16%{stroke:#a9c5ff;filter:drop-shadow(0 0 5px rgba(87,139,255,.9))}}
@keyframes hero-icon-02{0%,18%,40%,100%{stroke:#6f96ff;filter:none}23%,35%{stroke:#b4ceff;filter:drop-shadow(0 0 5px rgba(104,158,255,.92))}}
@keyframes hero-icon-03{0%,37%,91%,100%{stroke:#6f96ff;filter:none}43%,83%{stroke:var(--cyan);filter:drop-shadow(0 0 6px rgba(75,215,232,.95))}}
@keyframes hero-arrow-01{0%,14%,24%,100%{color:#5277df;text-shadow:none}17%,21%{color:#9bddff;text-shadow:0 0 12px rgba(75,215,232,.9)}}
@keyframes hero-arrow-02{0%,33%,43%,100%{color:#5277df;text-shadow:none}36%,40%{color:#9bddff;text-shadow:0 0 12px rgba(75,215,232,.9)}}

/* ── 02 THE QUESTION ────────────────────────────────── */
.question-section{overflow:hidden;background:
  radial-gradient(720px 540px at 8% 5%,rgba(40,85,246,.11),transparent 64%),
  radial-gradient(640px 480px at 98% 72%,rgba(75,215,232,.10),transparent 62%),
  linear-gradient(165deg,#f9fbff 0%,#f4f8fd 52%,#eef4fb 100%)}
.question-section::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(40,85,246,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(40,85,246,.035) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:linear-gradient(135deg,#000,transparent 58%);mask-image:linear-gradient(135deg,#000,transparent 58%)}
.question-section>.container{position:relative;z-index:1}
.question-heading{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(300px,.7fr);gap:clamp(40px,5vw,72px);align-items:end;margin-bottom:48px}
.question-heading .section-title{margin-bottom:0}
.q-keep{display:inline-block}               /* 狭い画面で「か。」だけが次の行に落ちないように */
.question-heading .section-lead{max-width:440px;margin:0 0 8px;line-height:1.9}

/* 3D：左＝AIが触れるもの／右の壁（境界）の外＝送る先／経路に立つ Teastia の門が、本番の前で止める */
.reach{position:relative;height:540px;margin:0 0 76px;border:1px solid rgba(91,163,226,.3);border-radius:var(--r-card);overflow:hidden;isolation:isolate;color:#cfe0f5;
  background:#061427;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 28px 64px rgba(14,39,80,.22)}
.reach-caption{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.reach-stage{position:absolute;inset:0;background:#061427 url(./img/reach-bg.jpg) center/cover no-repeat;
  background-image:image-set(url(./img/reach-bg.webp) type("image/webp"),url(./img/reach-bg.jpg) type("image/jpeg"))}
.reach-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.reach-stage>[data-anchor]{position:absolute;left:0;top:0;z-index:2;white-space:nowrap;pointer-events:none;transition:opacity .4s ease,color .35s ease,border-color .35s ease,background-color .35s ease,filter .4s ease}
.reach:not(.is-ready) [data-anchor]{opacity:0}
.reach-core{margin-top:-6px;padding:5px 11px;border:1px solid rgba(150,185,255,.55);border-radius:999px;background:rgba(40,85,246,.92);color:#fff;font-size:.74rem;font-weight:700;line-height:1.2;letter-spacing:.02em;box-shadow:0 6px 18px rgba(10,30,90,.45)}
/* 門の上の Teastia の印。止める場面で灯る */
.reach-emblem{width:26px;height:28px;margin-top:-4px;opacity:.5}
.reach-emblem.is-on{opacity:1;filter:drop-shadow(0 0 8px rgba(75,215,232,.85))}
.reach-pin{display:none;align-items:center;justify-content:center;width:24px;height:24px;margin-top:-4px;border:1px solid rgba(120,170,230,.42);border-radius:50%;background:rgba(5,16,33,.84);color:#a9bfdc;font:700 .6rem/1 var(--mono)}
.reach-pin.is-on{border-color:var(--cyan);background:rgba(7,32,58,.92);color:#fff}
/* 3つの札：広い画面では物のそばに浮かべ、狭い画面では図の下に並べる */
.reach-areas{position:absolute;inset:0;z-index:3;margin:0;pointer-events:none}
.reach-area{--p:0;position:absolute;left:0;top:0;width:max-content;max-width:300px;display:grid;grid-template-columns:28px minmax(0,1fr);align-items:center;overflow:hidden;padding:11px 14px 12px 13px;border:1px solid rgba(110,160,225,.24);border-radius:var(--r-part);background:rgba(5,16,33,.78);backdrop-filter:blur(8px);pointer-events:auto;cursor:default;transition:border-color .35s ease,background-color .35s ease,box-shadow .35s ease}
.reach-area[data-area="touch"]{margin-top:-10px}
.reach-area[data-area="send"],.reach-area[data-area="stop"]{margin-top:12px}
.reach-area::after{content:"";position:absolute;left:0;bottom:0;width:calc(var(--p) * 100%);height:2px;background:var(--cyan);opacity:0;transition:opacity .3s ease}
.reach-area i{grid-row:1 / span 2;font:700 .72rem/1 var(--mono);font-style:normal;color:#6b8fbf;transition:color .35s ease}
.reach-area b{font-size:.95rem;line-height:1.35;color:#eef4fb}
.reach-area small{margin-top:2px;font-size:.74rem;line-height:1.4;color:#93a9c6}
.reach-area.is-on{border-color:rgba(75,215,232,.58);background:rgba(7,30,56,.9);box-shadow:0 14px 34px rgba(0,0,0,.3),0 0 0 3px rgba(75,215,232,.07)}
.reach-area.is-on i{color:var(--cyan)}
.reach-area.is-on::after{opacity:1}
.question-grid-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin:0 0 18px;padding-top:4px}
.question-grid-head>p{display:flex;flex-direction:column;gap:4px;margin:0}.question-grid-head>p span{color:var(--blue);font:700 .58rem/1 var(--mono);letter-spacing:.15em}.question-grid-head>p strong{font-size:1rem;color:#253650}
.question-grid-head>div{display:flex;align-items:center;gap:9px;color:#7e90a8}.question-grid-head>div::before{content:"";width:72px;height:1px;background:linear-gradient(90deg,rgba(40,85,246,.12),rgba(40,85,246,.48))}.question-grid-head>div b{font:700 1.45rem/1 var(--mono);color:var(--blue)}.question-grid-head>div span{font:700 .48rem/1.25 var(--mono);letter-spacing:.08em}
.question-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
/* 3枚は一度だけ、01 から順に下から立ち上がる（WHAT YOU RECEIVE と同じ動き） */
.question-grid .q-card{transition:transform .5s cubic-bezier(.22,.8,.2,1),opacity .5s ease}
.scanfx-ready .question-grid .q-card{opacity:0;transform:translateY(22px)}
.scanfx-ready .question-grid.is-in .q-card{opacity:1;transform:none}
.scanfx-ready .question-grid.is-in .q-card:nth-child(1){transition-delay:.12s}.scanfx-ready .question-grid.is-in .q-card:nth-child(2){transition-delay:.26s}.scanfx-ready .question-grid.is-in .q-card:nth-child(3){transition-delay:.40s}
.q-card{--q-accent:var(--blue);--q-text:var(--ink);position:relative;overflow:hidden;background:rgba(255,255,255,.92);border:1px solid #dce5f1;border-radius:var(--r-card);padding:30px 28px 28px;box-shadow:0 20px 48px rgba(20,44,90,.09),inset 0 1px 0 #fff}
.q-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--q-accent),transparent 72%)}
.q-card::after{content:attr(data-q);position:absolute;right:18px;top:4px;color:var(--q-accent);opacity:.2;font:800 5.8rem/1 var(--mono);pointer-events:none}   /* カードの番号は、この大きな数字だけで示す */
.q-card-no{--q-accent:var(--no-vivid);--q-text:var(--no);--q-hit:#f0907a}.q-card-cond{--q-accent:var(--cond-vivid);--q-text:var(--cond);--q-hit:#e2b65a}
.q-head{display:flex;align-items:center;gap:12px;margin-bottom:22px}
.q-label{font-size:.71rem;font-weight:700;letter-spacing:.14em;color:var(--muted-2)}
.q-card h3{font-size:1.24rem;line-height:1.5;font-weight:700;margin:0 0 12px}
.q-card>p{color:var(--muted);font-size:.9rem;margin:0 0 22px}
.detect{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:start;border:1px solid color-mix(in srgb,var(--q-accent) 24%,#e1e8f2);border-radius:var(--r-part);background:#f6f8fc;color:var(--muted);padding:14px 16px;margin:16px 0 0;font-size:.78rem;line-height:1.6}
.detect b{grid-column:2;font-size:.85rem;color:var(--q-text)}
.detect .detect-ico{grid-row:span 2}
.detect-ico{width:8px;height:8px;margin-top:7px;border-radius:2px;background:var(--q-accent)}
.detect-blue{background:var(--blue-soft);border-color:#dfe6fb;color:#33466f}
/* 「〇〇で止まる」の名前をロゴで見せる。ロゴの文字の下端（高さの85%）を本文の下端にそろえる */
.name-logo{display:inline-block;width:auto;height:1.2em;margin-right:.16em;vertical-align:-.18em}
/* カード03：判定書の抜粋。紙色と黒で描き、色は判定の値にだけ使う */
.q-verdict{overflow:hidden;border:1px solid #e7e1cf;border-radius:var(--r-part);background:#fbf8ee;box-shadow:0 12px 30px rgba(11,22,40,.1)}
.q-verdict-bar{margin:0;padding:9px 14px;border-bottom:1px solid #ebe4d1;color:#857d68;font:600 .74rem/1 var(--mono)}
.q-verdict ul{margin:0;padding:4px 14px}
.q-verdict li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px dashed #e4dcc6;color:#26231c;font-size:.8rem}
.q-verdict li:last-child{border-bottom:0}
.q-verdict-total{display:flex;align-items:center;justify-content:space-between;margin:0;padding:10px 14px 11px;border-top:1px solid #e4dcc6;color:#4b463a;font-size:.78rem}
.q-verdict-total strong{color:var(--no);font-size:.9rem;letter-spacing:.08em;line-height:1.5;padding:0 .5em;border:1.5px solid var(--no);border-radius:3px}

/* ── 03 WHAT YOU RECEIVE ────────────────────────────── */
.deliver-section{position:relative;overflow:hidden;color:#fff;background:
  radial-gradient(900px 720px at -4% 22%,rgba(40,85,246,.24),transparent 61%),
  radial-gradient(760px 620px at 105% 62%,rgba(75,215,232,.13),transparent 64%),
  linear-gradient(148deg,#081a31 0%,#061426 48%,#040d1a 100%)}
/* 納品物を置く暗い展示面。設計図のグリッドと、右側に集まる発光点を重ねる */
.deliver-section::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(106,160,226,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(106,160,226,.055) 1px,transparent 1px);background-size:58px 58px;-webkit-mask-image:linear-gradient(118deg,#000,transparent 62%);mask-image:linear-gradient(118deg,#000,transparent 62%)}
/* 右上の発光点。光の帯が左から右へ通り抜け、通ったところは点が明るく、面もうっすら光る（帯の外も薄く見えている）。
   マスクは「楕円の形」×（「動く帯」＋「薄い下地」） */
.deliver-section::after{content:"";position:absolute;right:-8%;top:-10%;width:58%;height:70%;pointer-events:none;background:radial-gradient(circle,rgba(130,236,248,.9) 1px,transparent 1.3px),linear-gradient(rgba(75,215,232,.15),rgba(75,215,232,.15));background-size:20px 20px,100% 100%;
  -webkit-mask-image:radial-gradient(ellipse at center,#000,transparent 70%),linear-gradient(90deg,transparent,#000 50%,transparent),linear-gradient(rgba(0,0,0,.14),rgba(0,0,0,.14));
  mask-image:radial-gradient(ellipse at center,#000,transparent 70%),linear-gradient(90deg,transparent,#000 50%,transparent),linear-gradient(rgba(0,0,0,.14),rgba(0,0,0,.14));
  -webkit-mask-size:100% 100%,34% 100%,100% 100%;mask-size:100% 100%,34% 100%,100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center,50% 0,center;mask-position:center,50% 0,center;
  -webkit-mask-composite:source-in,source-over;mask-composite:intersect,add}
.scanfx-ready .deliver-section.is-live::after{animation:deliver-dots 7s linear infinite}
@keyframes deliver-dots{
  from{-webkit-mask-position:center,-90% 0,center;mask-position:center,-90% 0,center}
  to{-webkit-mask-position:center,190% 0,center;mask-position:center,190% 0,center}}
.deliver-section>.container{position:relative;z-index:1}
.deliver-section .eyebrow{color:var(--cyan)}
.deliver-section .section-title{color:#fff}.deliver-section .section-title em{color:#74e8ef}
.deliver-head-meta{display:flex;align-items:flex-end;gap:34px}
.deliver-section .section-lead{color:#afc0d7}
.deliver-count{display:flex;align-items:center;gap:12px;border-left:1px solid rgba(119,164,222,.25);padding-left:22px;min-width:160px}
.deliver-count strong{font:700 2.5rem/1 var(--mono);color:var(--cyan)}
.deliver-count span{font:700 .58rem/1.55 var(--mono);letter-spacing:.12em;color:#718bab}

/* 4つの成果物を、一連の診断出力としてつなぐレール */
.deliver-pipeline{display:grid;grid-template-columns:auto minmax(240px,1fr) auto;align-items:center;gap:22px;margin:-14px 0 28px;color:#6683a6;font:700 .58rem/1 var(--mono);letter-spacing:.16em}
.deliver-track{position:relative;display:flex;align-items:center;justify-content:space-between;height:28px}
.deliver-track::before,.deliver-track::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;transform:translateY(-50%)}
.deliver-track::before{background:rgba(112,156,213,.18)}
.deliver-track::after{right:auto;width:100%;transform:translateY(-50%) scaleX(0);transform-origin:left;background:linear-gradient(90deg,var(--blue),var(--cyan));box-shadow:0 0 14px rgba(75,215,232,.45)}
.deliver-track i{position:relative;z-index:1;width:28px;height:28px;border:1px solid rgba(112,156,213,.28);border-radius:50%;display:grid;place-items:center;background:#07172a;color:#7991b1;font-style:normal}
.deliver-track i::after{content:"";position:absolute;inset:-5px;border:1px solid rgba(75,215,232,.35);border-radius:50%;opacity:0}
.deliver-track b{font:700 .56rem var(--mono)}
.scanfx-ready .deliver-section.is-in .deliver-track::after{animation:deliver-line 1.25s cubic-bezier(.22,.8,.2,1) .1s both}
.scanfx-ready .deliver-section.is-in .deliver-track i{animation:deliver-node .42s ease-out calc(.22s + var(--n) * .25s) both}
.scanfx-ready .deliver-section.is-in .deliver-track i::after{animation:deliver-pulse .8s ease-out calc(.24s + var(--n) * .25s) both}

.deliver-grid{display:grid;grid-template-columns:1.06fr .97fr .97fr;gap:24px}
.d-card{position:relative;overflow:hidden;background:rgba(9,24,44,.84);border:1px solid rgba(112,156,213,.18);border-radius:var(--r-card);padding:26px 26px 28px;box-shadow:0 20px 50px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.025);display:flex;flex-direction:column;backdrop-filter:blur(8px);transition:border-color .28s ease,box-shadow .28s ease,transform .35s cubic-bezier(.22,.8,.2,1),opacity .45s ease}
.d-card::before{content:"";position:absolute;left:0;top:0;width:42%;height:2px;background:linear-gradient(90deg,var(--blue),transparent)}
.d-card>*{position:relative;z-index:1}
.scanfx-ready .deliver-section .d-card{opacity:0;transform:translateY(22px)}
/* 上へスクロールして入ってきたときは、出現の動きを見せずに最後の状態で出す（THE QUESTION・WHAT YOU RECEIVE・EIGHT CHECKS・HOW IT WORKS・BUILT FOR TRUST 共通） */
.scanfx-ready .is-instant .deliver-track::after,.scanfx-ready .is-instant .deliver-track i,.scanfx-ready .is-instant .deliver-track i::after,.scanfx-ready .is-instant .timeline::after,.scanfx-ready .is-instant .tl-node b{animation-duration:0s!important;animation-delay:0s!important}
.scanfx-ready .is-snap .q-card,.scanfx-ready .is-snap .d-card,.scanfx-ready .is-snap .p-step,.scanfx-ready .is-snap .trust-list li,.scanfx-ready .is-snap .checks-list li>*{transition:none!important}
.scanfx-ready .deliver-section.is-in .d-card{opacity:1;transform:none}
.scanfx-ready .deliver-section.is-in .d-card:nth-child(1){transition-delay:.18s}
.scanfx-ready .deliver-section.is-in .d-card:nth-child(2){transition-delay:.32s}
.scanfx-ready .deliver-section.is-in .d-card:nth-child(3){transition-delay:.46s}
.scanfx-ready .deliver-section.is-in .d-card:nth-child(4){transition-delay:.60s}
.d-card.featured{grid-column:1;grid-row:1 / span 2}
.d-card.featured{border-color:rgba(75,215,232,.30);background:linear-gradient(155deg,rgba(18,43,75,.94),rgba(7,22,41,.9));box-shadow:0 26px 70px rgba(0,0,0,.30),0 0 42px rgba(40,85,246,.08),inset 0 1px 0 rgba(255,255,255,.035)}
.d-card.featured::after{content:"";position:absolute;z-index:0;width:420px;height:420px;border-radius:50%;left:-170px;top:90px;background:radial-gradient(circle,rgba(40,85,246,.18),transparent 66%);pointer-events:none}
.d-card.wide{grid-column:2 / span 2}
.d-label{font-size:.72rem;font-weight:700;letter-spacing:.13em;color:#7188a8;margin:0 0 20px}
.d-label span{color:var(--cyan)}
.d-card h3{color:#fff;font-size:1.16rem;font-weight:700;margin:0 0 10px}
.d-card>p{color:#9fb1c9;font-size:.88rem;margin:0}
.d-card .button{margin-top:22px;align-self:flex-start}
.deliver-section .button-outline{background:rgba(255,255,255,.04);border-color:rgba(75,215,232,.42);color:#fff}.deliver-section .button-outline:hover{background:var(--blue);border-color:var(--blue);color:#fff}

/* 判定書のモック — 重ねた紙の上に、わずかに起こした1枚 */
.paper-stage{position:relative;flex:1;display:flex;align-items:center;justify-content:center;
  padding:22px 2px 26px 22px;margin-bottom:22px}
.paper-stage::before,.paper-stage::after{content:"";position:absolute;
  border-radius:var(--r-part);background:#fff;border:1px solid #e7edf7}
.paper-stage::before{left:0;top:16%;bottom:16%;width:42%;transform:rotate(-5.2deg);opacity:.5;z-index:0}
.paper-stage::after{left:13px;top:10%;bottom:10%;width:42%;transform:rotate(-2.6deg);opacity:.9;z-index:1}
.paper-scan{position:absolute;z-index:4;left:22px;right:2px;top:22px;height:2px;opacity:0;pointer-events:none;background:linear-gradient(90deg,transparent 0,var(--cyan) 18%,#fff 50%,var(--cyan) 82%,transparent 100%);box-shadow:0 0 12px rgba(75,215,232,.9),0 8px 30px rgba(75,215,232,.22)}
.scanfx-ready .deliver-section.is-live .paper-scan{animation:paper-read 4.8s cubic-bezier(.35,0,.2,1) 1.2s infinite}
.paper-mock{position:relative;z-index:2;width:100%;background:#fff;color:var(--ink);border:1px solid #e7ecf5;border-radius:var(--r-part);
  padding:20px 22px 22px;box-shadow:0 26px 56px rgba(24,44,86,.16),0 3px 10px rgba(24,44,86,.06);
  transform:perspective(1500px) rotateY(4deg) rotate(-1.4deg)}
.paper-head{display:flex;align-items:center;gap:8px;margin-bottom:15px}
.paper-mark{display:block;flex:none;width:19px;height:21px}
.paper-brand{font-weight:700;font-size:.95rem}
.paper-kicker{margin-left:auto;font-size:.5rem;letter-spacing:.13em;color:#b3bccd}
.paper-title{font-size:1.1rem;font-weight:700;margin:0 0 5px}
.paper-meta{font-size:.66rem;color:var(--muted-2);margin:0 0 14px;padding-bottom:13px;border-bottom:1px solid #edf0f6}
.paper-verdict{display:flex;align-items:center;justify-content:space-between;gap:12px;
  border:1px solid #e8ecf3;background:#fafbfd;border-radius:var(--r-part);padding:13px 16px;margin-bottom:16px}
.paper-verdict-label{display:block;font-size:.62rem;color:var(--muted);margin-bottom:6px}
.paper-verdict strong{display:inline-block;font-size:1.12rem;line-height:1.45;color:var(--no);letter-spacing:.08em;padding:0 .45em;border:2px solid var(--no);border-radius:4px}
.paper-gauge{position:relative;width:70px;height:70px;display:grid;place-items:center;flex:none}
.paper-gauge::before{content:"";position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,var(--no-vivid) 0 62%,color-mix(in srgb,var(--no-vivid) 14%,transparent) 62% 100%);
  -webkit-mask:radial-gradient(closest-side,transparent 0 84%,#000 86%);
  mask:radial-gradient(closest-side,transparent 0 84%,#000 86%)}
.paper-gauge b{font-size:.56rem;font-weight:700;color:var(--no)}
.paper-sub{font-size:.7rem;font-weight:700;color:#3d4757;margin:0 0 9px}
.paper-risks{display:flex;flex-direction:column;gap:8px}
.paper-risks li{display:flex;align-items:center;gap:9px;font-size:.68rem;color:#5a6577}
.risk-ico{width:7px;height:7px;border-radius:1px;flex:none;background:var(--no-vivid)}

/* 直し方の紙 */
.d-visual{background:rgba(255,255,255,.035);border:1px solid rgba(125,164,213,.13);border-radius:var(--r-part);padding:20px;margin-bottom:22px;flex:1;
  display:flex;align-items:center;gap:16px}
.fix-ico{width:58px;height:58px;border-radius:var(--r-part);background:var(--blue-soft);color:var(--blue);display:grid;place-items:center;flex:none}
.fix-ico .i{font-size:1.6rem}
.fix-code{flex:1;min-width:0;border-radius:var(--r-part);overflow:hidden;background:#fff;border:1px solid #e9eef7}
.fix-code pre{margin:0;padding:12px 14px;font:400 .72rem/1.95 var(--mono);color:#26344c;white-space:pre;overflow-x:auto}
.fix-code .ln{display:inline-block;width:2.6em;color:#adb8cc;user-select:none}
.fix-code .str{color:#0f8a5f}
.fix-note{display:flex;align-items:center;gap:8px;margin:0;padding:9px 14px;border-top:1px solid #edf0f5;background:#fafbfd;color:var(--no);font-size:.67rem;font-weight:600}

/* AIに何をさせているかの絵 */
.map-visual{justify-content:center;gap:0;padding:18px 14px}
.map-wires{width:64px;height:136px;flex:none;color:#c4cfe2;fill:none;stroke:currentColor;stroke-width:1.3}
.map-node{display:inline-flex;align-items:center;gap:8px;background:#fff;color:#334159;border:1px solid var(--line-soft);
  border-radius:var(--r-part);padding:9px 13px;font-size:.78rem;font-weight:600;box-shadow:0 3px 10px rgba(20,44,90,.05)}
.map-node .i{font-size:1.05rem;color:var(--blue)}
.map-root{flex-direction:column;gap:5px;padding:13px 17px;background:var(--blue-soft);border-color:#d5ddff;color:var(--blue-deep)}
.map-root .i{font-size:1.5rem}
.map-leaves{display:flex;flex-direction:column;gap:10px}
/* カードの中身の幅が 330px 以下のとき（画面の幅ではなくカードの幅で決める。スマホ・タブレット・1300px 前後の3列）は、縦の木にする。
   横の図が折り返さずに収まるのは、中身の幅がおよそ 320px から。
   上に AIアプリ、その左下から幹を下ろし、3つへ枝分かれ */
.map-card{container-type:inline-size}
@container (max-width:330px){
  .map-visual{flex-direction:column;align-items:stretch;padding:18px 18px 20px}
  .map-root{flex-direction:row;align-self:flex-start;gap:8px;padding:10px 14px}
  .map-root .i{font-size:1.2rem}
  .map-wires{display:none}
  .map-leaves{margin-left:24px;padding:10px 0 0 26px}
  .map-leaves .map-node{position:relative}
  /* 幹と枝は各行が描く：上の隙間から自分の下端までの幹と、真ん中の枝。最後の行だけ、幹を真ん中で止める（行の高さが変わってもずれない） */
  .map-leaves .map-node::before{content:"";position:absolute;left:-27px;top:-11px;bottom:-1px;width:22px;
    background:linear-gradient(#c4cfe2,#c4cfe2) 0 0/1.3px 100% no-repeat,linear-gradient(#c4cfe2,#c4cfe2) 0 calc(50% + 5px)/100% 1.3px no-repeat}
  .map-leaves .map-node:last-child::before{background-size:1.3px calc(50% + 5px),100% 1.3px}
  .map-leaves .map-node::after{content:"";position:absolute;left:-11px;top:50%;width:6px;height:6px;border-top:1.3px solid #c4cfe2;border-right:1.3px solid #c4cfe2;transform:translateY(-50%) rotate(45deg)}
}

/* 質問票 — 10個の箱ではなく、一次判定を最終判定へ更新する役割を見せる */
.clarify-card{display:grid;grid-template-columns:minmax(220px,.68fr) minmax(0,1.32fr);gap:28px;align-items:stretch}
.clarify-copy{display:flex;flex-direction:column;min-width:0}
.clarify-copy .d-label{margin-bottom:28px}
.clarify-copy h3{font-size:1.28rem;margin-bottom:11px}
.clarify-copy>p:not(.d-label){color:#9fb1c9;font-size:.88rem;margin:0 0 22px}
.clarify-audience{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;margin-top:auto;padding-top:16px;border-top:1px solid rgba(112,156,213,.16);font-size:.72rem}
.clarify-audience span{color:#7188a8}.clarify-audience b{color:#dce7f5}.clarify-audience em{border:1px solid rgba(75,215,232,.28);border-radius:999px;padding:3px 9px;color:var(--cyan);font:700 .62rem var(--mono)}
.clarify-panel{overflow:hidden;border:1px solid rgba(112,156,213,.20);border-radius:var(--r-part);background:linear-gradient(145deg,rgba(4,15,29,.82),rgba(13,34,59,.78));box-shadow:inset 0 1px 0 rgba(255,255,255,.025)}
.clarify-panel-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid rgba(112,156,213,.16);background:linear-gradient(90deg,rgba(40,85,246,.12),transparent);color:#7188a8;font:700 .55rem/1 var(--mono);letter-spacing:.13em}
.clarify-panel-head span{display:flex;align-items:center;gap:8px}.clarify-panel-head span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 9px rgba(75,215,232,.6)}
.clarify-panel-head b{color:var(--cyan);font:inherit}
.clarify-flow{display:grid;grid-template-columns:minmax(106px,1fr) auto minmax(82px,.7fr) auto minmax(106px,1fr);gap:10px;align-items:center;padding:17px 16px 14px}
.clarify-state,.clarify-form{min-height:58px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:var(--r-part);text-align:center}
.clarify-state{border:1px solid rgba(125,164,213,.18);background:rgba(255,255,255,.025)}
.clarify-state small,.clarify-form small{font-size:.58rem;line-height:1.4;color:#7188a8}.clarify-state strong{font-size:.76rem;color:#dce7f5}
.clarify-state.is-unknown{border-color:rgba(141,153,172,.28)}.clarify-state.is-unknown strong{color:#b7c2d2}
.clarify-state.is-final{border-color:rgba(75,215,232,.42);background:linear-gradient(135deg,rgba(40,85,246,.18),rgba(75,215,232,.07));box-shadow:0 0 20px rgba(40,85,246,.10)}
.clarify-state.is-final strong{color:var(--cyan)}
.clarify-form{border:1px solid rgba(100,139,255,.36);background:rgba(40,85,246,.14)}.clarify-form b{font:700 .78rem var(--mono);color:#a9beff}
.clarify-arrow{color:#5277df;font:700 .9rem var(--mono)}
.clarify-examples{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid rgba(112,156,213,.14)}
.clarify-examples li{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center;padding:13px 16px}.clarify-examples li+li{border-left:1px solid rgba(112,156,213,.14)}
.clarify-examples>li>span{font:700 .58rem var(--mono);color:#7188a8}.clarify-examples p{margin:0}.clarify-examples b{display:block;font-size:.7rem;color:#dce7f5}.clarify-examples small{display:block;margin-top:2px;font-size:.6rem;color:#7f95b2}

/* 判定書で辿れること */
.trace-strip{margin-top:28px;background:rgba(9,24,44,.72);border:1px solid rgba(112,156,213,.18);border-radius:var(--r-card);padding:24px 30px 6px;box-shadow:0 18px 48px rgba(0,0,0,.20);backdrop-filter:blur(8px)}
.trace-title{display:flex;align-items:center;gap:22px;font-size:.95rem;font-weight:700;margin:0 0 6px}
.trace-title::after{content:"";flex:1;height:1px;background:rgba(112,156,213,.18)}
.trace-list{display:grid;grid-template-columns:repeat(3,1fr)}
.trace-list li{display:flex;align-items:center;gap:13px;font-size:.9rem;font-weight:600;
  color:#d7e1ef;padding:16px 0 16px 26px;border-left:1px solid rgba(112,156,213,.15);border-bottom:1px solid rgba(112,156,213,.15)}
.trace-list li:nth-child(3n+1){border-left:0;padding-left:0}
.trace-list li:nth-child(n+4){border-bottom:0}
.trace-list span{font:700 .78rem var(--mono);color:#7188a8}
/* アイコンは icons/trace/ の SVG をそのまま読む（暗い面向けの色はファイルの中。ファイルを直せばここも変わる）。枠は img に付ける */
.trace-list .trace-ico{display:block;width:34px;height:34px;flex:none;padding:6px;border:1px solid rgba(111,157,230,.24);border-radius:8px;background:linear-gradient(145deg,rgba(40,85,246,.20),rgba(75,215,232,.07));box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 8px 18px rgba(0,0,0,.18);filter:drop-shadow(0 0 7px rgba(40,85,246,.16))}

@keyframes deliver-line{to{transform:translateY(-50%) scaleX(1)}}
@keyframes deliver-node{0%{background:#07172a;color:#7991b1;border-color:rgba(112,156,213,.28)}50%,100%{background:var(--blue);color:#fff;border-color:#6f91ff;box-shadow:0 0 18px rgba(40,85,246,.5)}}
@keyframes deliver-pulse{0%{opacity:0;transform:scale(.65)}35%{opacity:.75}100%{opacity:0;transform:scale(1.75)}}
@keyframes paper-read{0%,12%{top:22px;opacity:0}17%{opacity:.85}62%{top:calc(100% - 29px);opacity:.85}70%,100%{top:calc(100% - 29px);opacity:0}}

/* ── 04 EIGHT CHECKS ────────────────────────────────── */
.checks-section{position:relative;overflow:hidden;background:
  radial-gradient(860px 700px at -6% 86%,rgba(40,85,246,.11),transparent 60%),
  radial-gradient(720px 540px at 105% 20%,rgba(40,85,246,.07),transparent 62%),
  linear-gradient(174deg,#fcfdff 0%,#f5f8fd 52%,#edf2fb 100%)}
.checks-section::after{content:"";position:absolute;right:0;top:0;bottom:0;width:26%;pointer-events:none;
  background:radial-gradient(circle,rgba(40,85,246,.15) .9px,transparent 1px);background-size:20px 20px;
  -webkit-mask-image:linear-gradient(270deg,#000,transparent 72%);mask-image:linear-gradient(270deg,#000,transparent 72%)}
.checks-section>.container{position:relative;z-index:1}
.checks-layout{display:grid;grid-template-columns:minmax(0,.76fr) minmax(0,1.24fr);gap:64px;align-items:start}
.checks-intro .section-lead{margin-bottom:26px}
/* 判定の4値。判定書と同じ意味でしか使わない */
.v{--vc:var(--unk);--vv:var(--unk-vivid);display:inline-flex;align-items:center;gap:7px;border:1px solid color-mix(in srgb,var(--vv) 50%,transparent);border-radius:4px;background:color-mix(in srgb,var(--vv) 8%,transparent);color:var(--vc);padding:2px 9px;font-size:.7rem;font-weight:700;letter-spacing:.04em;white-space:nowrap}
.v::before{content:"";width:7px;height:7px;border-radius:1px;background:var(--vv);flex:none}
.v-no{--vc:var(--no);--vv:var(--no-vivid)}
.v-cond{--vc:var(--cond);--vv:var(--cond-vivid)}
.v-go{--vc:var(--go);--vv:var(--go-vivid)}
.v-unk{--vc:var(--unk);--vv:var(--unk-vivid)}
.verdict-legend{display:flex;flex-wrap:wrap;gap:10px}
.verdict-legend li{padding:7px 15px;font-size:.8rem}

/* 左下のグラフィック（支給画像）。左へ少し逃がして紙面から抜けさせる */
.checks-art{position:relative;margin:44px 0 0 -9%;width:118%;max-width:640px}
.checks-art img,.checks-art picture{display:block;width:100%;height:auto}

/* 8項目をばらさず、一枚の診断ボードとして見せる */
.checks-board{position:relative;overflow:hidden;border:1px solid rgba(65,100,160,.18);border-radius:var(--r-panel);background:rgba(255,255,255,.82);box-shadow:0 30px 80px rgba(34,66,124,.13),inset 0 1px 0 #fff;backdrop-filter:blur(12px)}
.checks-board::before{content:"";position:absolute;z-index:0;left:-8%;right:-8%;top:-120px;height:250px;background:radial-gradient(ellipse at center,rgba(40,85,246,.14),transparent 65%);pointer-events:none}
.checks-board::after{content:"";position:absolute;z-index:3;left:22px;right:22px;top:0;height:1px;opacity:0;background:linear-gradient(90deg,transparent,var(--cyan) 20%,#fff 50%,var(--cyan) 80%,transparent);box-shadow:0 0 13px rgba(75,215,232,.8),0 12px 36px rgba(40,85,246,.14);pointer-events:none}
.checks-board>*{position:relative;z-index:1}
.checks-board-head{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:25px 28px 22px;border-bottom:1px solid #dfe7f2;background:linear-gradient(110deg,rgba(40,85,246,.07),rgba(75,215,232,.035) 64%,transparent)}
.checks-board-head>div:first-child{display:flex;flex-direction:column;gap:6px}
.checks-board-head span{font:700 .6rem/1.4 var(--mono);letter-spacing:.14em;color:#758aa7}
.checks-board-head strong{font-size:1.08rem;letter-spacing:.02em}
.checks-total{display:flex;align-items:center;gap:10px;padding-left:20px;border-left:1px solid #d7e1ef}
.checks-total b{font:700 2.2rem/1 var(--mono);color:var(--blue)}
.checks-total span{font-size:.55rem;line-height:1.45}
.checks-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:0 28px}
.checks-list li{position:relative;display:grid;grid-template-columns:auto 1fr;align-items:start;gap:15px;min-height:148px;padding:24px 22px 22px 0;border-bottom:1px solid #e0e7f1}
.checks-list li:nth-child(odd){border-right:1px solid #e0e7f1}
.checks-list li:nth-child(even){padding-left:22px}
.checks-list li:nth-child(n+7){border-bottom:0}
.c-num{position:absolute;right:22px;top:22px;font:700 .7rem var(--mono);color:#9aabc0}
.checks-list li:nth-child(even) .c-num{right:0}
/* 8項目は一度だけ、01 から順に立ち上がる。罫線（ボードの枠組み）は動かさず、各マスの中身だけを出す */
.checks-list li>*{transition:opacity .5s ease,transform .5s cubic-bezier(.22,.8,.2,1)}
.scanfx-ready .checks-board .checks-list li>*{opacity:0;transform:translateY(14px)}
.scanfx-ready .checks-board.is-in .checks-list li>*{opacity:1;transform:none}
.scanfx-ready .checks-board.is-in .checks-list li:nth-child(1)>*{transition-delay:.10s}.scanfx-ready .checks-board.is-in .checks-list li:nth-child(2)>*{transition-delay:.17s}
.scanfx-ready .checks-board.is-in .checks-list li:nth-child(3)>*{transition-delay:.24s}.scanfx-ready .checks-board.is-in .checks-list li:nth-child(4)>*{transition-delay:.31s}
.scanfx-ready .checks-board.is-in .checks-list li:nth-child(5)>*{transition-delay:.38s}.scanfx-ready .checks-board.is-in .checks-list li:nth-child(6)>*{transition-delay:.45s}
.scanfx-ready .checks-board.is-in .checks-list li:nth-child(7)>*{transition-delay:.52s}.scanfx-ready .checks-board.is-in .checks-list li:nth-child(8)>*{transition-delay:.59s}
.c-ico{position:relative;width:46px;height:46px;overflow:hidden;border-radius:var(--r-part);background:linear-gradient(145deg,#f4f7ff 0%,#e7f2ff 52%,#e1f9fc 100%);border:1px solid #ceddf2;color:var(--blue);display:grid;place-items:center;box-shadow:0 8px 20px rgba(40,85,246,.11),inset 0 1px 0 rgba(255,255,255,.9)}
.c-ico::before{content:"";position:absolute;inset:4px;border:1px solid rgba(40,85,246,.08);border-radius:7px;pointer-events:none}
/* アイコンは icons/checks/ の SVG をそのまま読む（色・線幅はファイルの中で決まっている。ファイルを直せばここも変わる） */
.c-ico img{position:relative;z-index:1;display:block;width:24px;height:24px;filter:drop-shadow(0 3px 5px rgba(40,85,246,.12))}
.c-body b{display:block;padding-right:24px;font-size:.91rem;line-height:1.55;font-weight:700;margin-bottom:5px;color:#17243a}
.c-body{font-size:.76rem;line-height:1.65;color:var(--muted)}
.scanfx-ready .checks-board::after{animation:checks-scan 6.8s cubic-bezier(.35,0,.2,1) .4s infinite both;animation-play-state:paused}
.scanfx-ready .checks-board.is-live::after{animation-play-state:running}
@keyframes checks-scan{0%,8%{top:0;opacity:0}12%{opacity:.8}60%{top:100%;opacity:.8}67%,100%{top:100%;opacity:0}}

/* ── 05 HOW IT WORKS ────────────────────────────────── */
.process-section{position:relative;overflow:hidden;background:
  radial-gradient(900px 640px at -6% 12%,rgba(40,85,246,.09),transparent 62%),
  radial-gradient(760px 560px at 104% 88%,rgba(75,215,232,.08),transparent 62%),
  linear-gradient(180deg,#fcfdff 0%,#f5f8fd 58%,#eef3fb 100%)}
.process-section::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(82,120,178,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(82,120,178,.045) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:linear-gradient(90deg,#000,transparent 38%,transparent 62%,#000);mask-image:linear-gradient(90deg,#000,transparent 38%,transparent 62%,#000)}
.process-section::after{content:"";position:absolute;right:3%;top:9%;width:180px;height:150px;pointer-events:none;background:radial-gradient(circle,rgba(40,85,246,.18) 1px,transparent 1.5px);background-size:20px 20px;-webkit-mask-image:radial-gradient(circle,#000,transparent 72%);mask-image:radial-gradient(circle,#000,transparent 72%)}
.process-section>.container{position:relative;z-index:1}

.process-shell{position:relative;overflow:hidden;border:1px solid rgba(64,99,155,.18);border-radius:var(--r-panel);background:rgba(255,255,255,.82);box-shadow:0 30px 90px rgba(28,60,117,.13),inset 0 1px 0 #fff;backdrop-filter:blur(14px)}
.process-shell::before{content:"";position:absolute;left:12%;right:12%;top:-150px;height:300px;background:radial-gradient(ellipse at center,rgba(40,85,246,.13),transparent 68%);pointer-events:none}
.process-shell-head{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:28px;padding:17px 28px;border-bottom:1px solid #dfe7f2;background:linear-gradient(90deg,rgba(40,85,246,.055),rgba(75,215,232,.025),transparent)}
.process-status,.process-route{display:flex;align-items:center;font:700 .58rem/1.4 var(--mono);letter-spacing:.12em;color:#7287a4}
.process-status{gap:9px}.process-status i{width:7px;height:7px;border-radius:50%;background:var(--go-vivid);box-shadow:0 0 0 5px color-mix(in srgb,var(--go-vivid) 14%,transparent)}
.process-route{gap:10px}.process-route span{color:var(--blue)}.process-route b{font:700 .58rem var(--mono);color:#32445f}.process-route i{font-style:normal;color:#9aacbf}

.timeline{display:grid;grid-template-columns:repeat(3,1fr);position:relative;padding:22px 0 6px}
.timeline::before,.timeline::after{content:"";position:absolute;left:16.6%;right:16.6%;top:47px;height:1px}
.timeline::before{background:#d9e3ef}
.timeline::after{right:auto;width:66.8%;background:linear-gradient(90deg,var(--blue),var(--cyan));box-shadow:0 0 12px rgba(40,85,246,.28);transform:scaleX(0);transform-origin:left}
.tl-node{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;position:relative;z-index:1}
.tl-node i{font:700 .72rem var(--mono);color:#8aa0bc;font-style:normal;line-height:1}
.tl-node b{width:13px;height:13px;border-radius:50%;background:#fff;border:1.5px solid #bfcde0}
.tl-node small{font:700 .54rem var(--mono);letter-spacing:.14em;color:#8ca0b9;line-height:1}
.scanfx-ready .process-shell.is-in .timeline::after{animation:process-line 1.5s cubic-bezier(.22,.8,.2,1) .12s both}
.scanfx-ready .process-shell.is-in .tl-node b{animation:process-node .45s ease-out calc(.22s + var(--p,0) * .55s) both}
.tl-node:nth-child(1){--p:0}.tl-node:nth-child(2){--p:1}.tl-node:nth-child(3){--p:2}

.process-grid{display:grid;grid-template-columns:repeat(3,1fr);padding:12px 26px 30px}
.p-step{position:relative;padding:20px 28px 8px;border-left:1px solid #e1e8f2;transition:opacity .5s ease,transform .5s cubic-bezier(.22,.8,.2,1)}
.p-step:first-child{border-left:0}
.scanfx-ready .process-shell .p-step{opacity:0;transform:translateY(18px)}
.scanfx-ready .process-shell.is-in .p-step{opacity:1;transform:none}
.scanfx-ready .process-shell.is-in .p-step:nth-child(1){transition-delay:.28s}.scanfx-ready .process-shell.is-in .p-step:nth-child(2){transition-delay:.48s}.scanfx-ready .process-shell.is-in .p-step:nth-child(3){transition-delay:.68s}
.p-visual{position:relative;margin:0 0 25px;height:clamp(190px,15.5vw,236px);border:1px solid #e1e8f2;border-radius:var(--r-card);overflow:hidden;background:linear-gradient(145deg,#f7f9fd,#eef4fc);box-shadow:inset 0 1px 0 #fff,0 12px 30px rgba(31,65,121,.07)}
.p-visual picture{display:block;height:100%}
.p-visual img{display:block;width:100%;height:100%;object-fit:contain}
.p-visual figcaption{position:absolute;left:12px;bottom:12px;display:flex;align-items:center;gap:7px;padding:7px 10px;border:1px solid rgba(79,113,170,.17);border-radius:var(--r-part);background:rgba(255,255,255,.88);box-shadow:0 5px 16px rgba(30,60,110,.10);backdrop-filter:blur(7px);font:700 .55rem var(--mono);letter-spacing:.1em;color:#7186a2}
.p-visual figcaption span{color:var(--blue)}
.p-step h3{font-size:1.22rem;font-weight:700;margin:0 0 10px}
.p-step p{color:var(--muted);font-size:.86rem;margin:0}
@keyframes process-line{to{transform:scaleX(1)}}
@keyframes process-node{0%{background:#fff;border-color:#bfcde0;box-shadow:none}55%,100%{background:var(--blue);border-color:var(--blue);box-shadow:0 0 0 6px rgba(40,85,246,.12),0 0 18px rgba(40,85,246,.32)}}

/* ── 06 BUILT FOR TRUST ─────────────────────────────── */
.trust-section{color:#fff;overflow:hidden;background:
  radial-gradient(980px 700px at 2% -8%,rgba(75,215,232,.22),transparent 58%),
  radial-gradient(1150px 940px at -8% 40%,rgba(40,85,246,.21),transparent 62%),
  radial-gradient(940px 720px at 30% 108%,rgba(40,85,246,.15),transparent 60%),
  radial-gradient(760px 560px at 99% 6%,rgba(40,85,246,.10),transparent 62%),
  linear-gradient(150deg,#08192f 0%,#061426 46%,#040d1a 100%)}
/* 左下から立ち上がる同心円 */
.trust-section::before{content:"";position:absolute;left:-1615px;top:50%;width:2592px;height:2592px;
  border-radius:50%;pointer-events:none;
  background:repeating-radial-gradient(circle at center,transparent 0 75px,rgba(124,188,246,.34) 75px 76px);
  -webkit-mask-image:radial-gradient(circle at center,transparent 0 62%,#000 73%,#000 100%);
  mask-image:radial-gradient(circle at center,transparent 0 62%,#000 73%,#000 100%)}
/* ドットグリッドと、左上を斜めに走る光。どちらも左へ寄せて右の可読性を落とさない */
.trust-section::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    repeating-linear-gradient(34deg,transparent 0 62px,rgba(150,205,255,.05) 62px 64px,transparent 64px 128px),
    radial-gradient(circle,rgba(155,205,255,.23) .9px,transparent 1px);
  background-size:auto,22px 22px;
  -webkit-mask-image:linear-gradient(101deg,#000 0%,rgba(0,0,0,.5) 33%,transparent 57%);
  mask-image:linear-gradient(101deg,#000 0%,rgba(0,0,0,.5) 33%,transparent 57%)}
.trust-layout{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:70px}
.trust-layout::before{content:"";position:absolute;left:44%;top:-8px;bottom:-8px;width:9px;pointer-events:none;
  background:linear-gradient(180deg,rgba(120,175,235,.34),rgba(120,175,235,.11) 62%,rgba(120,175,235,.03)) 4px 0/1px 100% no-repeat}
.trust-layout::after{content:"";position:absolute;z-index:2;left:44%;top:-8px;bottom:-8px;width:9px;pointer-events:none;opacity:0;transform:translateY(-100%);
  background:radial-gradient(circle at 50% 100%,#e9feff 0 2px,#4bd7e8 2.5px 4px,rgba(75,215,232,.18) 4.5px 8px,transparent 8.5px)}
.scanfx-ready .trust-layout::after{will-change:transform;animation:trust-divider-drop 7.5s cubic-bezier(.32,.05,.28,1) .35s infinite both;animation-play-state:paused}
.scanfx-ready .trust-layout.is-live::after{animation-play-state:running}
@keyframes trust-divider-drop{0%{transform:translateY(-100%);opacity:0}3%{opacity:1}58%{transform:translateY(0);opacity:1}64%,100%{transform:translateY(0);opacity:0}}
.trust-section .section-title{color:#fff}
.trust-section .section-title em{color:var(--cyan)}
.trust-section .section-lead{color:#adbdd4}
.pull-quote{margin:70px 0 0;position:relative;padding-left:34px}
.pull-quote::before{content:"“";position:absolute;left:0;top:-14px;font-size:3.4rem;color:var(--cyan);opacity:.55;line-height:1}
.pull-quote::after{content:"DECISION RULE";position:absolute;left:34px;top:-28px;font:700 .56rem/1 var(--mono);letter-spacing:.16em;color:#617c9f}
.pull-quote p{font-size:clamp(1.5rem,2.3vw,2rem);line-height:1.5;font-weight:700;margin:0}
.pull-quote p::first-line{color:var(--cyan)}
.trust-panel{position:relative;overflow:hidden;border:1px solid rgba(122,171,229,.17);border-radius:var(--r-panel);background:linear-gradient(145deg,rgba(13,35,62,.80),rgba(5,18,35,.72));box-shadow:0 30px 80px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.025);backdrop-filter:blur(12px)}
.trust-panel::before{content:"";position:absolute;right:-100px;top:-180px;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle,rgba(75,215,232,.10),transparent 67%);pointer-events:none}
.trust-panel-head{position:relative;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:17px 24px;border-bottom:1px solid rgba(122,171,229,.16);background:linear-gradient(90deg,rgba(75,215,232,.055),transparent);font:700 .56rem/1 var(--mono);letter-spacing:.14em;color:#7890af}
.trust-panel-head span{display:flex;align-items:center;gap:9px}.trust-panel-head i{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 5px rgba(75,215,232,.09),0 0 12px rgba(75,215,232,.5)}
.trust-panel-head b{font:700 .56rem var(--mono);color:var(--cyan)}
.trust-list{position:relative;padding:0 24px}
.trust-list li{display:grid;grid-template-columns:auto 48px 1fr;align-items:start;gap:18px;padding:24px 0;border-bottom:1px solid rgba(122,171,229,.14);transition:opacity .48s ease,transform .48s cubic-bezier(.22,.8,.2,1)}
.trust-list li:last-child{border-bottom:0}
.t-num{font:700 .78rem var(--mono);color:var(--cyan);position:relative;padding-right:28px;margin-top:13px}
.t-num::after{content:"";position:absolute;right:0;top:.62em;width:17px;height:1px;background:var(--cyan);opacity:.55}
.t-ico{position:relative;width:48px;height:48px;overflow:hidden;border:1px solid rgba(112,178,234,.30);border-radius:var(--r-part);background:linear-gradient(145deg,rgba(40,85,246,.26),rgba(75,215,232,.08));color:#93aaff;display:grid;place-items:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 10px 24px rgba(0,0,0,.18),0 0 18px rgba(40,85,246,.08)}
.t-ico::before{content:"";position:absolute;inset:4px;border:1px solid rgba(117,202,238,.10);border-radius:7px;pointer-events:none}
/* アイコンは icons/trust/ の SVG をそのまま読む（暗い面向けの色はファイルの中。ファイルを直せばここも変わる） */
.t-ico img{position:relative;z-index:1;display:block;width:1.55rem;height:1.55rem;filter:drop-shadow(0 0 6px rgba(75,215,232,.16))}
.trust-list b{display:block;font-size:1.02rem;margin:2px 0 7px}
.trust-list p{color:#91a6c2;font-size:.84rem;margin:0}
.scanfx-ready .trust-layout .trust-list li{opacity:.18;transform:translateX(18px)}
.scanfx-ready .trust-layout.is-in .trust-list li{opacity:1;transform:none}
.scanfx-ready .trust-layout.is-in .trust-list li:nth-child(1){transition-delay:.16s}.scanfx-ready .trust-layout.is-in .trust-list li:nth-child(2){transition-delay:.30s}.scanfx-ready .trust-layout.is-in .trust-list li:nth-child(3){transition-delay:.44s}.scanfx-ready .trust-layout.is-in .trust-list li:nth-child(4){transition-delay:.58s}

/* ── 07 SCOPE & BASIS ───────────────────────────────── */
.scope-section{position:relative;overflow:hidden;background:
  radial-gradient(1240px 880px at -8% 112%,rgba(40,85,246,.15),transparent 64%),
  radial-gradient(1020px 720px at 108% 78%,rgba(40,85,246,.11),transparent 62%),
  radial-gradient(900px 600px at 96% -10%,rgba(75,215,232,.07),transparent 62%),
  linear-gradient(168deg,#fff 0%,#f8fbfe 40%,#ebf2fb 100%)}
/* 左下を通る大きな弧。左端の 62% 付近から入り、下辺の 4 割ほどで抜ける曲率 */
.scope-section::before{content:"";position:absolute;left:-1131px;top:62%;
  width:2026px;height:2026px;border-radius:50%;pointer-events:none;
  border:1px solid rgba(40,85,246,.16);
  background:radial-gradient(circle closest-side at center,
    transparent 0 calc(100% - 96px),
    rgba(40,85,246,.10) calc(100% - 96px) calc(100% - 95px),
    transparent calc(100% - 95px))}
/* 左下の弧（SCOPE & BASIS と FAQ）：弧が見えてきたら、光が弧をなぞって描く（一度だけ）。そのあとは見えている間、ときどき光が弧の上を流れる。
   見えている弧は、中心から見て 0〜50deg ほど（弧を出すのは 1181px 以上の幅だけ）。入ってすぐ速く、下へ向かってゆっくりに */
@property --arc-sweep{syntax:'<angle>';inherits:false;initial-value:62deg}
@keyframes arc-draw{from{--arc-sweep:0deg}to{--arc-sweep:62deg}}
@keyframes arc-run{0%{transform:rotate(0deg);opacity:0}3%,30%{opacity:1}36%,100%{transform:rotate(62deg);opacity:0}}
.scope-section::before,.faq-section::before{
  -webkit-mask-image:conic-gradient(#000 calc(var(--arc-sweep) - 3deg),transparent var(--arc-sweep));
  mask-image:conic-gradient(#000 calc(var(--arc-sweep) - 3deg),transparent var(--arc-sweep))}
.scanfx-ready .scope-section::before,.scanfx-ready .faq-section::before{--arc-sweep:0deg}
.scanfx-ready .scope-section.is-in::before,.scanfx-ready .faq-section.is-in::before{animation:arc-draw 3.6s cubic-bezier(.25,.55,.3,1) .2s both}
.scanfx-ready .scope-section.is-instant::before,.scanfx-ready .faq-section.is-instant::before{animation:none;--arc-sweep:62deg}
/* 弧の上を流れる光。弧の中心のまわりを回して、弧に沿わせる（小さな要素の回転だけなので軽い）。
   置き場所は、回転 0 のとき光の先が円の真上に来る位置（中心から半径ぶん上） */
.arc-light{position:absolute;z-index:0;inset:0;overflow:hidden;pointer-events:none}
.arc-light::before{content:"";position:absolute;width:120px;height:2px;border-radius:2px;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(75,215,232,.75) 70%,#fff);box-shadow:0 0 12px 1px rgba(75,215,232,.5)}
.scanfx-ready .is-in>.arc-light::before{animation:arc-run 10s cubic-bezier(.25,.55,.3,1) .2s infinite both;animation-play-state:paused}
.scanfx-ready .is-in.is-live>.arc-light::before{animation-play-state:running}
/* 弧が見えてきたかを測る場所（見えている弧のあたり） */
.arc-spot{position:absolute;left:0;bottom:0;width:600px;height:280px}
/* 左の軸線とノード（右の時間軸と対になる） */
.scope-section::after{content:"";position:absolute;inset:0;pointer-events:none;background-repeat:no-repeat;
  background-image:
    radial-gradient(circle at 5% 88.5%,var(--blue) 0 5px,transparent 5.5px),
    linear-gradient(90deg,rgba(40,85,246,.24) 0 7%,rgba(40,85,246,.13) 24%,transparent 40%),
    linear-gradient(180deg,rgba(40,85,246,.09),rgba(40,85,246,.09));
  background-size:100% 100%,100% 1px,1px 100%;
  background-position:0 0,0 88.5%,5% 0}
.scope-field::before{left:-238px;top:calc(62% - 1px);transform-origin:120px 1014px}   /* 弧の中心 (-118px, 62%+1013px) */
.scope-field .arc-spot{top:62%;width:640px;height:auto}
.scope-field::after{content:"";position:absolute;right:-3%;top:8%;width:52%;height:76%;background:radial-gradient(circle,rgba(40,85,246,.18) .8px,transparent 1.2px);background-size:22px 22px;-webkit-mask-image:radial-gradient(ellipse at center,#000,transparent 70%);mask-image:radial-gradient(ellipse at center,#000,transparent 70%)}
.scope-field span{position:absolute;border:1px solid rgba(40,85,246,.09);border-radius:50%;transform:translate(-50%,-50%)}
.scope-field span:nth-child(1){left:78%;top:48%;width:520px;height:520px}
.scope-field span:nth-child(2){left:78%;top:48%;width:700px;height:700px;border-color:rgba(40,85,246,.07)}
.scope-field span:nth-child(3){left:78%;top:48%;width:880px;height:880px;border-color:rgba(75,215,232,.06)}
.scope-layout{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:74px;align-items:center}
.scope-intro .section-lead{max-width:460px}
.scope-deco{position:relative;margin:70px 0 0;font-size:1.05rem;font-weight:700;letter-spacing:.2em;line-height:1.9;color:#c8d4e6}
.scope-panel{position:relative;overflow:hidden;border:1px solid rgba(62,101,163,.18);border-radius:var(--r-panel);background:rgba(255,255,255,.72);box-shadow:0 28px 80px rgba(37,68,123,.12),inset 0 1px 0 #fff;backdrop-filter:blur(14px)}
.scope-panel-head{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 28px;border-bottom:1px solid #dce5f1;background:linear-gradient(90deg,rgba(40,85,246,.065),rgba(75,215,232,.025),transparent);font:700 .58rem/1.4 var(--mono);letter-spacing:.13em;color:#7287a4}
.scope-panel-head b{font:700 .58rem var(--mono);color:var(--blue)}
.scope-list{position:relative;padding:34px 30px 32px 66px}
.scope-list::before{content:"";position:absolute;left:27px;top:-58px;bottom:-58px;width:1px;background:var(--line)}
.scope-list li{padding:0 34px 34px 0;margin-bottom:34px;border-bottom:1px solid var(--line-soft);position:relative}
.scope-list li:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.scope-list li::before{content:"";position:absolute;left:-44px;top:6px;width:11px;height:11px;border-radius:50%;background:#fff;border:1px solid var(--blue)}
.scope-list li:first-child::before{background:var(--blue)}
.scope-list li:first-child{border-top:2px solid var(--blue);padding-top:26px}
.scope-no{position:absolute;right:0;top:1px;font:700 .66rem var(--mono);color:#9aabc0}.scope-list li:first-child .scope-no{top:30px}

/* ── レーダー走査 ──────────────────────────────────────────
   縦軸と同じ長さの帯が、先端を下にして上から降りていく。
   先端の背後に青い尾を引き、通過した節のノードが脈打つ。
   何もしなければ opacity:0 なので、JS なし／モーション低減では従来の静止デザインのまま。 */
.scope-list::after{content:"";position:absolute;left:22px;top:-58px;bottom:-58px;width:11px;pointer-events:none;
  opacity:0;transform:translateY(-100%);
  background:
    linear-gradient(180deg,transparent 86%,rgba(40,85,246,.85) 99%,#2855f6 100%) 50% 0/2px 100% no-repeat,
    linear-gradient(180deg,transparent 80%,rgba(40,85,246,.13) 100%) 0 0/100% 100% no-repeat}
.scope-list li::after{content:"";position:absolute;left:-44px;top:6px;width:11px;height:11px;border-radius:50%;
  background:var(--blue);pointer-events:none;opacity:0}
/* 先頭項目の太い線を、光が左から右へ走る。縦の先端が線の高さを通る瞬間に合わせる */
.scope-rule{position:absolute;left:0;right:0;top:-2px;height:2px;overflow:hidden;pointer-events:none}
.scope-rule::before{content:"";position:absolute;top:0;bottom:0;left:0;width:30%;opacity:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(75,215,232,.55) 62%,#4bd7e8 100%)}

.scanfx-ready .scope-list::after{will-change:transform;animation:radar-head 8s linear .4s infinite both}
.scanfx-ready .scope-list li::after{animation:radar-ping 8s ease-out calc(.4s + var(--p,0) * 2.4s) infinite both}
.scanfx-ready .scope-rule::before{will-change:transform;animation:radar-rule 8s cubic-bezier(.3,.1,.3,1) calc(.4s + var(--p,0) * 2.4s) infinite both}
/* 節が画面に入っている間だけ走らせる。一括指定より後に書かないと play-state を上書きされる */
.scanfx-ready .scope-list::after,.scanfx-ready .scope-list li::after,.scanfx-ready .scope-rule::before{animation-play-state:paused}
.scanfx-ready .scope-list.is-live::after,.scanfx-ready .scope-list.is-live li::after,.scanfx-ready .scope-list.is-live .scope-rule::before{animation-play-state:running}

@keyframes radar-head{
  0%{transform:translateY(-100%);opacity:0}
  2%{opacity:1}
  30%{transform:translateY(0);opacity:1}
  34%,100%{transform:translateY(0);opacity:0}
}
@keyframes radar-rule{
  0%{transform:translateX(-100%);opacity:0}
  1.5%{opacity:1}
  13%{transform:translateX(334%);opacity:1}
  14.5%,100%{transform:translateX(334%);opacity:0}
}
@keyframes radar-ping{
  0%{opacity:0;transform:scale(.7)}
  1.5%{opacity:.9;transform:scale(1.25)}
  11%{opacity:0;transform:scale(3.4)}
  100%{opacity:0;transform:scale(3.4)}
}
.s-label{font-size:.8rem;font-weight:700;color:var(--blue);margin:0 0 8px}
.s-value{font-size:1.4rem;font-weight:700;margin:0 0 10px}
.s-note{color:var(--muted);font-size:.88rem;margin:0}

/* ── 08 FAQ ─────────────────────────────────────────── */
.faq-section{position:relative;overflow:hidden;background:
  radial-gradient(900px 700px at -6% 96%,rgba(40,85,246,.10),transparent 60%),
  radial-gradient(760px 560px at 104% 6%,rgba(40,85,246,.06),transparent 62%),
  linear-gradient(172deg,#fdfeff 0%,#f7fafd 52%,#eff4fb 100%)}
/* 左下の弧。SCOPE & BASIS と同じモチーフだが、行の開閉で節が動かないよう下端に錨を打つ */
.faq-section::before{content:"";position:absolute;left:-853px;bottom:-1380px;
  width:1660px;height:1660px;border-radius:50%;pointer-events:none;
  border:1px solid rgba(40,85,246,.15);
  background:radial-gradient(circle closest-side at center,
    transparent 0 calc(100% - 96px),
    rgba(40,85,246,.09) calc(100% - 96px) calc(100% - 95px),
    transparent calc(100% - 95px))}
.faq-light::before{left:-143px;bottom:279px;transform-origin:120px 831px}   /* 弧の中心 (-23px, 下端の 550px 下) */
/* 左の軸とノード。SCOPE & BASIS と同じ 5% に置いて、隣り合う2つの節が続いて見えるようにする */
.faq-section::after{content:"";position:absolute;inset:0;pointer-events:none;background-repeat:no-repeat;
  background-image:
    radial-gradient(circle at 5% 58%,var(--blue) 0 5px,transparent 5.5px),
    linear-gradient(90deg,rgba(40,85,246,.22) 0 7%,rgba(40,85,246,.12) 24%,transparent 40%),
    linear-gradient(180deg,rgba(40,85,246,.09),rgba(40,85,246,.09));
  background-size:100% 100%,100% 1px,1px 100%;
  background-position:0 0,0 92%,5% 0}
.faq-layout{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1fr);gap:76px;align-items:start}
.faq-intro .section-lead{margin-top:6px}
/* 見出しの上に浮かせるドットの塊。右のカードに重ならない幅に抑える */
.faq-intro{position:relative}
.faq-intro::before{content:"";position:absolute;right:6%;top:-58px;width:132px;height:104px;pointer-events:none;
  background:radial-gradient(circle,rgba(40,85,246,.20) 1.1px,transparent 1.6px);background-size:22px 22px}

.faq-card{position:relative;overflow:hidden;color:#fff;background:linear-gradient(148deg,rgba(10,29,52,.98),rgba(4,15,29,.98));border:1px solid rgba(112,156,213,.20);border-radius:var(--r-panel);padding:0 28px 6px;box-shadow:0 28px 80px rgba(20,44,90,.20),inset 0 1px 0 rgba(255,255,255,.025)}
.faq-card::before{content:"";position:absolute;right:-120px;top:-200px;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(40,85,246,.18),rgba(75,215,232,.04) 42%,transparent 68%);pointer-events:none}
.faq-panel-head{position:relative;display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 -28px;padding:17px 28px;border-bottom:1px solid rgba(112,156,213,.18);background:linear-gradient(90deg,rgba(40,85,246,.12),rgba(75,215,232,.035),transparent);font:700 .56rem/1 var(--mono);letter-spacing:.14em;color:#7890af}
.faq-panel-head span{display:flex;align-items:center;gap:9px}.faq-panel-head i{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 5px rgba(75,215,232,.08),0 0 12px rgba(75,215,232,.45)}
.faq-panel-head b{font:700 .56rem var(--mono);color:var(--cyan)}
.faq-item{position:relative}.faq-item + .faq-item{border-top:1px solid rgba(112,156,213,.16)}
.faq-item::before{content:"";position:absolute;z-index:2;left:-28px;top:14px;bottom:14px;width:2px;background:linear-gradient(var(--blue),var(--cyan));opacity:0;transform:scaleY(.35);transition:opacity .25s ease,transform .3s ease}
.faq-item[open]:not(.is-closing)::before{opacity:1;transform:scaleY(1)}
.faq-q{position:relative;z-index:0;cursor:pointer;list-style:none;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;padding:21px 4px;transition:color .25s ease}
.faq-q::-webkit-details-marker{display:none}
.faq-no{font:700 .67rem/1 var(--mono);color:#6f86a6;transition:color .25s ease}
.faq-qt{font-size:.96rem;font-weight:700;line-height:1.6;color:#e8eff8}
.faq-q:hover .faq-qt,.faq-q:hover .faq-no{color:var(--cyan)}
/* 開いた行の淡い塗り。幅や余白を動かさず、透明度だけで出し入れする */
.faq-q::before{content:"";position:absolute;inset:5px -12px;z-index:-1;border-radius:var(--r-part);background:linear-gradient(90deg,rgba(40,85,246,.16),rgba(75,215,232,.045));
  opacity:0;transform:scale(.985);transition:opacity .28s ease,transform .32s cubic-bezier(.22,.8,.2,1)}
.faq-item[open]:not(.is-closing) > .faq-q .faq-qt,.faq-item[open]:not(.is-closing) > .faq-q .faq-no{color:var(--cyan)}
.faq-item[open]:not(.is-closing) > .faq-q::before{opacity:1;transform:none}

.faq-mark{position:relative;width:32px;height:32px;border-radius:var(--r-button);flex:none;color:#78a0ff;
  transition:background-color .28s ease}
.faq-mark::before,.faq-mark::after{content:"";position:absolute;top:50%;left:50%;background:currentColor;border-radius:1px}
.faq-mark::before{width:13px;height:1.6px;transform:translate(-50%,-50%)}
.faq-mark::after{width:1.6px;height:13px;transform:translate(-50%,-50%);transition:transform .3s cubic-bezier(.22,.8,.2,1),opacity .24s ease}
.faq-item[open]:not(.is-closing) .faq-mark{background:rgba(75,215,232,.10);color:var(--cyan)}
.faq-item[open]:not(.is-closing) .faq-mark::after{transform:translate(-50%,-50%) rotate(90deg) scaleX(0);opacity:0}

/* 答え。JS が動くときは高さの動きが主役で、中身はそれに少し遅れて現れる／先に引く。
   JS が無いときは、開く側だけキーフレームで出す（開いた瞬間は未描画からなので transition は走らない） */
.faq-a{padding:0 54px 24px 40px}
.faq-item[open]:not(.is-closing) .faq-a{animation:faq-in .32s cubic-bezier(.22,.8,.2,1) .05s both}
.faq-item.is-closing .faq-a{opacity:0;transform:translateY(-4px);transition:opacity .16s ease,transform .2s ease}
.faq-a p{color:#9eb0c8;font-size:.88rem;margin:0}
@keyframes faq-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ── 09 CLOSING ─────────────────────────────────────── */
.closing-section{position:relative;isolation:isolate;overflow:hidden;min-height:620px;display:grid;place-items:center;
  color:#fff;padding:145px 0 135px;background:#030b18}
/* MVの大気と地平線を別トリミングで再利用し、冒頭と同じ検査空間でページを閉じる */
.closing-atmosphere{position:absolute;z-index:0;inset:-5%;pointer-events:none;
  background-image:url("./img/hero-atmosphere-v2.png");
  background-image:image-set(url("./img/hero-atmosphere-v2.webp") type("image/webp"),url("./img/hero-atmosphere-v2.png") type("image/png"));
  background-position:center 68%;background-size:cover;background-repeat:no-repeat;opacity:.72;filter:saturate(.98) contrast(1.08);transform:scale(1.04)}
.closing-section::before{content:"";position:absolute;z-index:1;inset:0;pointer-events:none;background:
  linear-gradient(180deg,rgba(3,10,22,.66) 0%,rgba(3,10,22,.18) 44%,rgba(3,10,22,.72) 100%),
  radial-gradient(660px 430px at 50% 50%,rgba(40,85,246,.10),transparent 70%)}
.closing-section::after{content:"";position:absolute;z-index:1;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(82,142,211,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(82,142,211,.10) 1px,transparent 1px);
  background-size:80px 80px;-webkit-mask-image:radial-gradient(ellipse 70% 78% at 50% 52%,#000 5%,transparent 76%);mask-image:radial-gradient(ellipse 70% 78% at 50% 52%,#000 5%,transparent 76%)}

/* 最後のCTAを「本番接続前のゲート」として囲う。4隅と同心円はMVの読み取りフレームの引用 */
.closing-gate{position:absolute;z-index:2;left:50%;top:50%;width:min(860px,calc(100% - 80px));height:430px;transform:translate(-50%,-50%);pointer-events:none}
.closing-gate i{position:absolute;width:42px;height:42px;border-color:rgba(75,215,232,.66);border-style:solid;filter:drop-shadow(0 0 5px rgba(75,215,232,.34))}
.closing-gate i:nth-child(1){left:0;top:0;border-width:1px 0 0 1px}
.closing-gate i:nth-child(2){right:0;top:0;border-width:1px 1px 0 0}
.closing-gate i:nth-child(3){left:0;bottom:0;border-width:0 0 1px 1px}
.closing-gate i:nth-child(4){right:0;bottom:0;border-width:0 1px 1px 0}
.closing-gate::before{content:"";position:absolute;left:50%;top:50%;width:340px;height:340px;border-radius:50%;transform:translate(-50%,-50%);
  border:1px solid rgba(86,151,228,.19);box-shadow:0 0 0 72px rgba(58,119,201,.055),0 0 0 144px rgba(58,119,201,.035),0 0 70px rgba(40,85,246,.16)}
.closing-gate::after{content:"";position:absolute;left:8%;right:8%;top:4%;height:1px;opacity:.28;
  background:linear-gradient(90deg,transparent,var(--cyan) 22%,#d8fbff 50%,var(--cyan) 78%,transparent);
  box-shadow:0 0 14px rgba(75,215,232,.85),0 18px 46px rgba(40,85,246,.22)}
.closing-inner{position:relative;z-index:3;text-align:center;max-width:760px}
.closing-inner .eyebrow{justify-content:center;text-shadow:0 0 16px rgba(75,215,232,.45)}
.closing-inner .eyebrow::before{content:"";height:1px;width:56px;background:currentColor;opacity:.45}
.closing-inner h2{font-size:clamp(2.1rem,3.7vw,3.2rem);line-height:1.34;font-weight:700;letter-spacing:.01em;margin:0 0 20px;text-shadow:0 8px 34px rgba(0,0,0,.48)}
.closing-inner h2 em{background:linear-gradient(100deg,#64e2f1 0%,#6b9aff 54%,#4168ff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none}
.closing-lead{color:#c0cee1;max-width:680px;margin:0 auto 38px;text-shadow:0 3px 18px rgba(0,0,0,.65)}
.closing-inner .button-primary{min-width:224px;justify-content:center;border:1px solid rgba(111,205,255,.72);
  box-shadow:0 0 0 1px rgba(40,85,246,.32),0 18px 48px rgba(15,56,194,.38),0 0 30px rgba(40,85,246,.30),inset 0 0 20px rgba(75,215,232,.08)}
.closing-inner .button-primary:hover{box-shadow:0 0 0 1px rgba(75,215,232,.48),0 20px 54px rgba(15,56,194,.48),0 0 40px rgba(40,85,246,.42),inset 0 0 20px rgba(75,215,232,.12)}
.scanfx-ready .closing-section.is-live .closing-gate::before{animation:closing-pulse 6s ease-in-out infinite}
.scanfx-ready .closing-section.is-live .closing-gate::after{will-change:top,opacity;animation:closing-scan 7s cubic-bezier(.35,0,.2,1) .4s infinite both}
@keyframes closing-pulse{0%,100%{opacity:.68;transform:translate(-50%,-50%) scale(.985)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.015)}}
@keyframes closing-scan{0%,9%{top:4%;opacity:0}14%{opacity:.82}64%{top:96%;opacity:.82}72%,100%{top:96%;opacity:0}}

/* ── footer ─────────────────────────────────────────── */
.site-footer{background:#050c18;color:#8fa1bb;padding:52px 0;border-top:1px solid var(--dark-line)}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap}
.site-footer .brand{color:#fff;font-size:1.15rem}
.footer-tag{font-size:.8rem;margin:10px 0 0}
.footer-links{display:flex;gap:26px;font-size:.86rem;flex-wrap:wrap}
.footer-links a:hover{color:#fff}
.copyright{font-size:.78rem;margin:0}

/* ── responsive ─────────────────────────────────────── */
@media(max-width:1180px){
  .container{width:calc(100% - 56px)}
  .hero-grid{grid-template-columns:1fr;gap:56px;padding:calc(76px + var(--hdr-h)) 0 60px}
  .hero-visual{max-width:640px}
  .hero h1{white-space:normal}
  .checks-layout,.trust-layout,.scope-layout,.faq-layout{grid-template-columns:1fr;gap:52px}
  .faq-section::before,.faq-section::after,.faq-intro::before{display:none}
  .trust-layout::before,.trust-layout::after{display:none}
  .trust-section::before{opacity:.5}
  .checks-art{margin:40px auto 0;width:100%;max-width:520px}
  .deliver-grid{grid-template-columns:1fr 1fr}
  .d-card.featured{grid-column:1 / span 2;grid-row:auto}
  .d-card.wide{grid-column:1 / span 2}
  .trace-list{grid-template-columns:1fr 1fr}
  .trace-list li:nth-child(n){border-left:1px solid rgba(112,156,213,.15);padding-left:26px;border-bottom:1px solid rgba(112,156,213,.15)}
  .trace-list li:nth-child(odd){border-left:0;padding-left:0}
  .trace-list li:nth-child(n+5){border-bottom:0}
  .scope-deco{display:none}
  .scope-section::before,.scope-section::after,.arc-light::before{display:none}
}
@media(max-width:900px){
  .desktop-nav{display:none}
  .question-heading{grid-template-columns:1fr;gap:18px;margin-bottom:36px}
  /* 3領域の説明は図の下へ。図の中の札と番号で対応させる */
  .reach{height:auto;margin-bottom:56px}
  .reach-stage{position:relative;inset:auto;height:clamp(320px,58vw,460px)}
  .reach-areas{position:relative;inset:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:0 14px 14px}
  .reach-area[data-area]{position:relative;width:auto;max-width:none;margin-top:0}
  .reach-pin{display:flex}
  .question-grid{grid-template-columns:1fr;gap:26px}
  .process-grid{grid-template-columns:1fr;gap:0;padding:10px 28px 24px}
  .p-step,.p-step:first-child{border-left:0;border-top:1px solid #e1e8f2;padding:28px 0}.p-step:first-child{border-top:0}
  .p-visual{height:clamp(230px,50vw,330px)}
  .section{padding:84px 0}
  .split-head{margin-bottom:40px}
  .section-lead.right{text-align:left}
}
@media(max-width:760px){
  .hero-bottom{grid-template-columns:1fr;gap:10px;padding:22px 0 32px}
  .hero-flow-arrow{height:18px;transform:rotate(90deg)}
}
@media(max-width:620px){
  .container{width:calc(100% - 36px)}
  :root{--hdr-h:68px}
  .header-inner{gap:10px}
  .brand-owner{display:none}
  .header-cta{margin-left:auto;padding:10px 16px;font-size:.82rem}
  .hero-grid{padding:calc(56px + var(--hdr-h)) 0 46px}
  .hero-atmosphere{background-position:42% center;opacity:.62}
  .hero-actions .button{width:100%;justify-content:center}
  .question-grid-head{align-items:center}.question-grid-head>div::before{display:none}
  /* 狭い画面：3つの札は1列に */
  .reach-stage{height:300px}
  .reach-areas{grid-template-columns:1fr;gap:7px;padding:0 12px 12px}
  .reach-emblem{width:20px;height:22px}
  .brand-logo{height:26px}
  /* モバイルでは chat.ts の枠自体を診断結果まで延ばし、3件をパネル内の行として収める */
  .scan-frame{padding:0;background:#0f1c2f;border:1px solid rgba(86,177,229,.28);border-radius:var(--r-part);overflow:hidden;box-shadow:0 28px 60px rgba(0,0,0,.38),0 0 34px rgba(40,85,246,.12)}
  .scan-frame .code-window{transform:none;border:0;border-radius:0;box-shadow:none;background:transparent}
  .scan-frame .code-body{border-bottom:1px solid rgba(120,160,220,.16)}
  .chip,.chip-amber,.chip-red,.chip-blue{position:relative;inset:auto;width:calc(100% - 24px);max-width:none;margin:10px 12px 0;padding:10px 12px;box-shadow:none;backdrop-filter:none}
  .chip-amber{margin-top:12px}.chip-blue{margin-bottom:12px}
  .scanfx-layer,.scanfx-veil{display:none}
  .hero-scan-status{display:none}
  .process-shell-head{padding:16px 20px}.process-route{display:none}
  .timeline{padding-left:6px;padding-right:6px}.timeline::before,.timeline::after{left:17%;right:17%}.timeline::after{right:auto;width:66%}
  .process-grid{padding:8px 20px 20px}.p-visual{height:230px}
  .deliver-head-meta{flex-direction:column;align-items:stretch;gap:20px}
  .deliver-count{align-self:flex-end;border-left:0;border-top:1px solid rgba(119,164,222,.25);padding:14px 0 0;min-width:160px}
  .deliver-pipeline{grid-template-columns:1fr;margin-top:-4px;gap:0}.deliver-pipeline>span{display:none}
  .deliver-grid{grid-template-columns:1fr}
  .d-card.featured,.d-card.wide{grid-column:1}
  .clarify-card{grid-template-columns:1fr;gap:22px}
  .clarify-copy .d-label{margin-bottom:18px}
  .clarify-flow{grid-template-columns:1fr;gap:7px;padding:16px}
  .clarify-state,.clarify-form{min-height:52px}
  .clarify-arrow{justify-self:center;transform:rotate(90deg)}
  .clarify-examples{grid-template-columns:1fr}
  .clarify-examples li+li{border-left:0;border-top:1px solid rgba(112,156,213,.14)}
  .trace-list{grid-template-columns:1fr}
  .q-card::after{right:12px;font-size:4.2rem}
  .trace-list li:nth-child(n){border-left:0;padding-left:0;border-bottom:1px solid rgba(112,156,213,.15)}
  .trace-list li:last-child{border-bottom:0}
  .checks-board-head{padding:22px 20px 19px;gap:12px}.checks-board-head strong{font-size:.94rem;white-space:nowrap}.checks-total{padding-left:12px}.checks-total b{font-size:1.75rem}
  .checks-list{grid-template-columns:1fr;padding:0 20px}
  .checks-list li,.checks-list li:nth-child(even){min-height:0;padding:20px 0;border-right:0;border-bottom:1px solid #e0e7f1}
  .c-body b{padding-right:36px}
  .checks-list li:nth-child(n+7){border-bottom:1px solid #e0e7f1}.checks-list li:last-child{border-bottom:0}
  .checks-list li:nth-child(even) .c-num{right:0}
  .trust-panel-head{padding:16px 18px}.trust-list{padding:0 18px}
  .trust-list li{grid-template-columns:auto 40px 1fr;gap:12px;padding:21px 0}
  .t-num{padding-right:0;margin-top:12px}.t-num::after{display:none}
  .t-ico{width:40px;height:40px}
  .scope-panel-head{padding:16px 20px}.scope-panel-head b{font-size:.54rem}
  .scope-list{padding:28px 20px 28px 48px}
  .scope-list::before{left:18px}.scope-list::after{left:13px}
  .scope-list li{padding-right:30px;margin-bottom:28px;padding-bottom:28px}
  .scope-list li::before,.scope-list li::after{left:-35px}
  .scope-field{opacity:.72}
  .faq-card{padding:0 18px 6px}.faq-panel-head{margin:0 -18px;padding:16px 18px}
  .faq-item::before{left:-18px}.faq-q{gap:12px;padding:19px 0}.faq-qt{font-size:.9rem}
  .faq-a{padding:0 42px 22px 28px}.faq-a p{font-size:.84rem}
  .closing-section{min-height:580px;padding:110px 0 104px}
  .closing-atmosphere{background-position:38% 68%;opacity:.64}
  .closing-gate{width:calc(100% - 36px);height:410px}
  .closing-gate i{width:30px;height:30px}
  .closing-gate::before{width:270px;height:270px;box-shadow:0 0 0 56px rgba(58,119,201,.05),0 0 0 112px rgba(58,119,201,.03),0 0 54px rgba(40,85,246,.14)}
  .closing-inner .eyebrow{gap:10px;letter-spacing:.16em}.closing-inner .eyebrow::before,.closing-inner .eyebrow::after{width:32px}
  .closing-lead{font-size:.9rem;margin-bottom:32px}
  .closing-inner .button-primary{width:100%;max-width:280px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important}
  .faq-item[open]:not(.is-closing) .faq-a{animation:none}
  .faq-q::before{transition:none}
  .scanfx-ready .scope-list::after,.scanfx-ready .scope-list li::after,.scanfx-ready .scope-rule::before{animation:none!important;opacity:0}
  .scanfx-ready .scope-section::before,.scanfx-ready .faq-section::before{animation:none!important;--arc-sweep:62deg}
  .scanfx-ready .arc-light::before{animation:none!important;opacity:0}
  .scanfx-ready .trust-layout::after{animation:none!important;opacity:0}
  .scanfx-ready .trust-layout .trust-list li{opacity:1;transform:none}
  .scanfx-ready .closing-section.is-live .closing-gate::before,.scanfx-ready .closing-section.is-live .closing-gate::after{animation:none!important}
  .scanfx-ready .closing-section .closing-gate::after{opacity:.34;top:52%}
  .scanfx-ready .checks-board::after{animation:none!important;opacity:0}
  .scanfx-ready .process-shell .p-step{opacity:1;transform:none}
  .scanfx-ready .checks-board .checks-list li>*{opacity:1;transform:none}
  .scanfx-ready .process-shell.is-in .timeline::after,.scanfx-ready .process-shell.is-in .tl-node b{animation:none!important}
  .scanfx-ready .process-shell .timeline::after{transform:scaleX(1)}
  .scanfx-ready .process-shell .tl-node b{background:var(--blue);border-color:var(--blue)}
  .scanfx-ready .deliver-section .d-card{opacity:1;transform:none}
  .scanfx-ready .question-grid .q-card{opacity:1;transform:none}
  .scanfx-ready .deliver-section.is-in .deliver-track::after,.scanfx-ready .deliver-section.is-in .deliver-track i,.scanfx-ready .deliver-section.is-in .deliver-track i::after,.scanfx-ready .deliver-section.is-live .paper-scan{animation:none!important}
  .scanfx-ready .deliver-section .deliver-track::after{transform:translateY(-50%) scaleX(1)}
  .scanfx-ready .deliver-section .deliver-track i{background:var(--blue);color:#fff;border-color:#6f91ff}
  .scanfx-ready .scanfx-h,.scanfx-ready .scanfx-v,.scanfx-ready .scanfx-frame span,
  .scanfx-ready .scanfx-veil,.scanfx-ready [data-scanfx-find],.scanfx-ready [data-scanfx-mark]{animation:none!important}
  .scanfx-ready .scanfx-frame span{opacity:.55;transform:none}
  .scanfx-ready .scanfx-h{transform:translateY(var(--scanfx-rest-y));opacity:1}
  .scanfx-ready .scanfx-v{transform:translateX(var(--scanfx-rest-x));opacity:1}
  .scanfx-ready .scanfx-veil{opacity:0}
  .scanfx-ready [data-scanfx-find]{opacity:1;transform:none}
  .scanfx-ready [data-scanfx-mark]{opacity:1}
}