/* QUORAPLY CLOUD ── 2026-08-22 全面改訂(SVG アニメーション / モーショングラフィックス)

   ★出す仕掛けに opacity を使わない。隠すのは clip-path、持ち上げは translate。
     opacity:0 は公開品質の検査から要素を丸ごと消してしまう(偽の緑)。
   ★出す合図に IntersectionObserver を使わない。clip-path で隠した要素は
     画面の真ん中に在っても交差 0 と報告されるため、永久に出てこない。
     合図は site.js の scroll + requestAnimationFrame。
   ★隠す指定は html.js が付いているときだけ効く。JS が落ちたらページは素のまま全部見える。
   ★ループ(animation)と さわった時(transition)を同じプロパティに載せない。
     ループは translate / rotate / scale、さわった時は transform に分けてある。
   ★一致 0 件のセレクタを 1 本も置かない(消えた部品の指定を残さない)。 */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);overflow-x:clip}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
.demo{position:fixed;z-index:99;left:10px;bottom:10px;padding:9px 13px;border:1px solid currentColor;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px);border-radius:999px;font:600 12px/1 var(--body);letter-spacing:.08em}
.demo a{text-decoration:underline;margin-left:10px}
.skip{position:fixed;top:-80px;left:8px;z-index:110;background:#fff;color:#000;padding:10px}
.skip:focus{top:8px}
:focus-visible{outline:3px solid #65a7ff;outline-offset:4px}

/* ── 出す仕掛け ───────────────────────────────────────────────
   印(.reveal)は site.js が配る。CSS には「印が付いていたら隠す」しか書かない。
   .seen 側にも html.js を付けること(詳細度 (0,2,1) を (0,2,0) が越えられない)。 */
.reveal{clip-path:none;translate:none}
html.js .reveal{clip-path:inset(0 -26px 101% -26px);translate:0 22px;
  transition:clip-path .74s cubic-bezier(.2,.75,.25,1),translate .74s cubic-bezier(.2,.75,.25,1)}
html.js .reveal.seen{clip-path:inset(-70px);translate:none}
html.js .reveal:nth-child(2){transition-delay:.08s}
html.js .reveal:nth-child(3){transition-delay:.16s}
html.js .reveal:nth-child(4){transition-delay:.24s}

@media(max-width:720px){.demo{max-width:calc(100vw - 20px)}}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation:none!important;transition:none!important}
  .reveal{clip-path:none!important;translate:none!important}
}

:root{--bg:#071123;--ink:#eaf7f4;--mint:#7effbd;--violet:#7254e8;--violet-deep:#5b3fd0;--mist:#e8eee9;--paper:#eff3ee;
  --night:#0a1930;--deep:#0d1730;--alert:#ff6b7a;--alert-ink:#c31f2d;--body:"Noto Sans JP",sans-serif;--mono:"IBM Plex Mono",monospace}

/* 明るい節の上でもロゴが消えないように、帯そのものに地を敷く
   (白い文字を明るい地の上に置くと、どの検査も色の衝突を測らないので黙って消える)。 */
.halo-head{position:fixed;z-index:30;inset:22px 26px auto;display:flex;align-items:center;
  padding:9px 12px 9px 20px;border-radius:999px;border:1px solid #7effbd33;
  background:#071123d6;backdrop-filter:blur(14px)}
.halo-head>a:first-child{font:600 20px var(--mono)}
.halo-head>a span{color:var(--mint)}
.halo-head nav{margin:auto;display:flex;gap:25px;font-size:12px}
.halo-head>a:last-child{background:var(--mint);color:#071123;padding:12px 18px;border-radius:999px}

/* ══ 1. ヒーロー ══════════════════════════════════════════════ */
.fixed-world{height:100svh;min-height:700px;position:sticky;top:0;overflow:hidden}
.fixed-world>img{filter:brightness(.62) saturate(.8)}
.fixed-world:after{content:"";position:absolute;z-index:3;inset:0;pointer-events:none;
  background:linear-gradient(90deg,#071123cc,transparent)}

/* 背景の土台そのものの演出。格子・粒・オーロラ・走る光・走査線の 5 枚。 */
.world-base{position:absolute;z-index:2;inset:0;pointer-events:none}
.wb-grid{position:absolute;inset:-110px;
  background-image:linear-gradient(#7effbd1c 1px,transparent 1px),linear-gradient(90deg,#7effbd17 1px,transparent 1px);
  background-size:74px 74px;
  -webkit-mask-image:radial-gradient(118% 92% at 64% 50%,#000 0,#0009 44%,transparent 74%);
  mask-image:radial-gradient(118% 92% at 64% 50%,#000 0,#0009 44%,transparent 74%);
  animation:qGridDrift 9s linear infinite}
.wb-motes{position:absolute;inset:-80px;
  background-image:radial-gradient(#a58cff33 1.4px,transparent 1.6px);
  background-size:56px 56px;
  animation:qMotes 14s linear infinite}
.wb-aurora{position:absolute;display:block;width:58vw;height:58vw;min-width:430px;min-height:430px;
  border-radius:50%;filter:blur(64px)}
.wb-aurora.a{left:30%;top:-20%;background:radial-gradient(circle,#7effbd4d,#7effbd00 62%);
  animation:qAuroraA 19s ease-in-out infinite alternate}
.wb-aurora.b{right:-12%;bottom:-24%;background:radial-gradient(circle,#7254e866,#7254e800 64%);
  animation:qAuroraB 23s ease-in-out infinite alternate}
.wb-beam{position:absolute;display:block;top:-12%;bottom:-12%;left:0;width:36%;
  background:linear-gradient(102deg,#7effbd00,#7effbd24 44%,#d9fff21f 53%,#7effbd00);
  filter:blur(7px);animation:qBeam 12s linear infinite}
.wb-scan{position:absolute;display:block;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,#7effbd00,#7effbd8c,#7effbd00);animation:qScan 8s linear infinite}

.world-flow{position:absolute;z-index:4;inset:0;width:100%;height:100%}
.wf-ring-far,.wf-ring-mid{fill:none;transform-box:fill-box;transform-origin:center}
.wf-ring-far{stroke:#7effbd24;stroke-width:1.4;stroke-dasharray:6 22;animation:qSpin 52s linear infinite}
.wf-ring-mid{stroke:#a58cff33;stroke-width:1.4;stroke-dasharray:3 16;animation:qSpinBack 38s linear infinite}
.wf-chip{fill:#eaf7f41c;stroke:#7effbd63;stroke-width:1.2;transform-box:fill-box;transform-origin:center;
  animation:qDrift 6.4s ease-in-out infinite alternate}
.wf-chip:nth-child(2){animation-duration:7.6s;animation-delay:-1.2s}
.wf-chip:nth-child(3){animation-duration:5.8s;animation-delay:-2.4s}
.wf-chip:nth-child(4){animation-duration:8.2s;animation-delay:-.7s}
.wf-chip:nth-child(5){animation-duration:6.9s;animation-delay:-3.1s}
.wf-chip:nth-child(6){animation-duration:7.1s;animation-delay:-1.8s}
.wf-chip:nth-child(7){animation-duration:5.4s;animation-delay:-2.9s}
.wf-chip:nth-child(8){animation-duration:8.8s;animation-delay:-.4s}
.wf-chip:nth-child(9){animation-duration:6.2s;animation-delay:-3.6s}
.wf-chip:nth-child(10){animation-duration:7.9s;animation-delay:-2.1s}
.wf-chip:nth-child(11){animation-duration:6.6s;animation-delay:-4.2s}
.wf-chip:nth-child(12){animation-duration:7.3s;animation-delay:-5.1s}
.wf-line{fill:none;stroke:#7effbd2b;stroke-width:1.4}
.wf-run{fill:none;stroke:var(--mint);stroke-width:2.6;stroke-linecap:round;stroke-dasharray:14 472;
  animation:qDash 3.6s linear infinite}
.wf-run:nth-child(8){animation-delay:-.6s}
.wf-run:nth-child(9){animation-delay:-1.2s}
.wf-run:nth-child(10){animation-delay:-1.8s}
.wf-run:nth-child(11){animation-delay:-2.4s}
.wf-run:nth-child(12){animation-delay:-3s}
.wf-glow{fill:url(#q-core);opacity:.42;transform-box:fill-box;transform-origin:center;
  animation:qGlowBreath 4s ease-in-out infinite alternate}
.wf-pulse{fill:none;stroke:var(--mint);stroke-width:2;transform-box:fill-box;transform-origin:center;
  animation:qPulseRing 2.7s ease-out infinite}
.wf-node{fill:#f2fffa}
.wf-trunk{fill:none;stroke:#7effbd38;stroke-width:6;stroke-linecap:round}
.wf-trunk.b{stroke:#a58cff3d}
.wf-trunk-run{fill:none;stroke:url(#q-trunk);stroke-width:6;stroke-linecap:round;stroke-dasharray:12 128;
  animation:qDashS 1.9s linear infinite}
.wf-trunk-run.b{stroke-dasharray:8 72;animation-name:qDashXS;animation-duration:1.2s}
.wf-hex{fill:#07112359;stroke:url(#q-trunk);stroke-width:3;transform-box:fill-box;transform-origin:center;
  animation:qSpin 26s linear infinite}
.wf-hex-in{fill:none;stroke:#7effbd7a;stroke-width:1.6;stroke-dasharray:10 8;
  transform-box:fill-box;transform-origin:center;animation:qSpinBack 17s linear infinite}
.wf-bolt{fill:var(--mint);animation:qBoltFlash 2.2s ease-in-out infinite}
.wf-orbit{transform-box:view-box;transform-origin:830px 350px;animation:qSpin 9s linear infinite}
.wf-orbit-dot{fill:#a58cff}
.wf-branch{fill:none;stroke-width:3;stroke-linecap:round}
.wf-branch.up{stroke:#7effbd33}
.wf-branch.down{stroke:#a58cff33}
.wf-branch-run{fill:none;stroke-width:3.4;stroke-linecap:round;stroke-dasharray:14 246;
  animation:qDashM 2.9s linear infinite}
.wf-branch-run.up{stroke:var(--mint)}
.wf-branch-run.down{stroke:#a58cff;animation-delay:-1.4s}
.wf-human-ring{fill:#07112359;stroke:var(--mint);stroke-width:2.4}
.wf-human-pulse{fill:none;stroke:var(--mint);stroke-width:2;transform-box:fill-box;transform-origin:center;
  animation:qPulseRing 3.2s ease-out infinite}
.wf-check{fill:none;stroke:var(--mint);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:56;animation:qDraw 3.4s ease-in-out infinite}
.wf-done-ring{fill:#07112359;stroke:#a58cff;stroke-width:2.2}
.wf-done-bar{fill:none;stroke:#a58cff;stroke-width:3.4;stroke-linecap:round;stroke-dasharray:32;
  animation:qTick 3.4s ease-in-out infinite}
.wf-done-bar:nth-child(3){animation-delay:.25s}
.wf-done-bar:nth-child(4){animation-delay:.5s}

.halo-copy{position:absolute;z-index:5;left:5vw;top:22vh;padding:26px 34px 30px;margin-left:-34px}
.halo-copy span{display:block;font:12px var(--mono);letter-spacing:.14em}
.halo-copy h1{font-size:clamp(58px,8vw,115px);line-height:1.25;letter-spacing:-.06em}
.world-hint{position:absolute;z-index:5;left:5vw;bottom:6vh;margin:0;display:flex;align-items:center;gap:13px;
  font:13px var(--mono);letter-spacing:.16em;color:#bfe9dd}
.world-hint i{display:block;width:2px;height:36px;transform-origin:top;
  background:linear-gradient(#7effbd,#7effbd00);animation:qHint 2.4s ease-in-out infinite}

/* ══ 2. 物語のレール ══════════════════════════════════════════ */
.rail{position:relative;z-index:5;margin-top:0}
.rail article{min-height:100vh;padding:18vh 8vw 12vh 54vw;background:#0a1a33e8;backdrop-filter:blur(5px);
  display:flex;flex-direction:column;justify-content:center}
.rail article:nth-child(2){background:#122044ea}
.rail article:nth-child(3){background:#163138ec}
.rail article>span{font:12px var(--mono);letter-spacing:.14em;color:var(--mint)}
.rail h2{font-size:clamp(44px,5.6vw,80px);line-height:1.25;letter-spacing:-.04em;margin:14px 0}
.rail p{line-height:2;margin:0}
.rail-mark{display:block;width:clamp(112px,11vw,150px);height:auto;margin-bottom:clamp(18px,2.4vw,32px)}
.rm-line{fill:none;stroke:#eaf7f43d;stroke-width:2;stroke-linecap:round}
.rm-run{fill:none;stroke:var(--mint);stroke-width:3;stroke-linecap:round;stroke-dasharray:10 70;
  animation:qDashXS 1.5s linear infinite}
.rm-run:nth-child(5){animation-delay:-.75s}
.rm-dot{fill:var(--mint)}
.rm-gear{fill:none;stroke:#7effbd8c;stroke-width:3;stroke-dasharray:12 9;
  transform-box:fill-box;transform-origin:center;animation:qSpin 11s linear infinite}
.rm-gear.in{stroke:#a58cffb3;stroke-dasharray:6 7;animation:qSpinBack 7s linear infinite}
.rm-orbit{transform-box:view-box;transform-origin:37px 37px;animation:qSpin 7s linear infinite}
.rm-ring{fill:none;stroke:#eaf7f44d;stroke-width:2}
.rm-ping{fill:none;stroke:var(--mint);stroke-width:2;transform-box:fill-box;transform-origin:center;
  animation:qPulseRing 2.9s ease-out infinite}
.rm-check{fill:none;stroke:var(--mint);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:56;animation:qDraw 3.2s ease-in-out infinite}

/* ══ 3. パイプライン図(明るい面) ═══════════════════════════════ */
.stream{position:relative;z-index:5;background:var(--paper);color:#071123;padding:13vh 5vw}
.stream>header{display:grid;gap:clamp(14px,1.7vw,22px);max-width:1180px;margin:0 auto clamp(30px,4vw,54px)}
.stream>header p:first-child{margin:0;font:12px var(--mono);letter-spacing:.16em;color:#2b6a51}
.stream h2{margin:0;font-size:clamp(40px,5vw,72px);line-height:1.25;letter-spacing:-.04em}
.stream>header p:last-child{margin:0;max-width:56ch;line-height:2;font-size:15px;color:#2c3a35}
.stream-map{max-width:1180px;margin:0 auto}
.stream-map svg{display:block;width:100%;height:auto}
.sm-feed{fill:none;stroke:#0711231f;stroke-width:2}
.sm-feed-run{fill:none;stroke:#1f9c6b;stroke-width:3;stroke-linecap:round;stroke-dasharray:14 246;
  animation:qDashM 3.1s linear infinite}
.sm-feed-run:nth-child(6){animation-delay:-.8s}
.sm-feed-run:nth-child(7){animation-delay:-1.6s}
.sm-feed-run:nth-child(8){animation-delay:-2.3s}
.sm-rail{fill:none;stroke:#07112326;stroke-width:7;stroke-linecap:round}
.sm-rail-run{fill:none;stroke:#1f9c6b;stroke-width:7;stroke-linecap:round;stroke-dasharray:16 284;
  animation:qDashL 2.6s linear infinite}
.sm-out{fill:none;stroke:#07112326;stroke-width:4;stroke-linecap:round}
.sm-out-run{fill:none;stroke:var(--violet);stroke-width:4;stroke-linecap:round;stroke-dasharray:14 246;
  animation:qDashM 3s linear infinite}
.sm-stations circle{fill:#eff3ee;stroke:#071123;stroke-width:3}
.sm-caps circle{fill:none;stroke:#1f9c6b;stroke-width:2.4;transform-box:fill-box;transform-origin:center;
  animation:qStationPing 3s ease-out infinite}
.sm-caps circle:nth-child(2){animation-delay:.5s}
.sm-caps circle:nth-child(3){animation-delay:1s}
.sm-caps circle:nth-child(4){animation-delay:1.5s}
.sm-end{fill:#ffffffb3;stroke-width:2}
.sm-end.up{stroke:#1f9c6b;animation:qEndGlow 3s ease-in-out infinite}
.sm-end.down{stroke:var(--violet);animation:qEndGlow 3s ease-in-out infinite;animation-delay:-1.5s}
.sm-endmark{fill:none;stroke:#1f9c6b;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:56;animation:qDraw 3.6s ease-in-out infinite}
.sm-endbars path{fill:none;stroke:var(--violet);stroke-width:3;stroke-linecap:round;stroke-dasharray:48;
  animation:qTickL 3.6s ease-in-out infinite}
.sm-endbars path:nth-child(2){animation-delay:.24s}
.sm-endbars path:nth-child(3){animation-delay:.48s}
.stream-stations{list-style:none;margin:clamp(26px,3.2vw,44px) auto 0;padding:0;max-width:1180px;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,26px)}
.stream-stations li{display:grid;gap:9px;padding-top:16px;border-top:2px solid #07112324}
/* ★2026-08-22 是正。明るい面に乗る小さな文字の緑は #1f9c6b(図の線の色)ではなく
   #2b6a51(文字の色)。この節の見出し脇のラベルが既に使っている色にそろえてある。
   理由 = 描画された画素で測ると #1f9c6b は 12〜13px で床(4.5:1)を割っていた。
     #eff3ee の上 3.11 / #f0f4f1(人の札の地)の上 3.14。#2b6a51 なら 5.70 / 5.75。
   ★色みは動かしていない(どちらも色相 156 度の緑)。明るさだけを落としてある。
   ★#1f9c6b は **線と図形の色として残す**(.sm-* / .pm-* / .steps-line:before)。
     線は太いので沈まない。面の文字と図の線を 1 つの色で兼ねると、片方を直すと
     もう片方が壊れる(--violet と --violet-deep を分けたのと同じ理由)。 */
.stream-stations li b:first-child{font:600 13px var(--mono);letter-spacing:.12em;color:#2b6a51}
.stream-stations li b:nth-child(2){font-size:21px;letter-spacing:-.01em}
.stream-stations li span{font-size:14px;line-height:1.9;color:#33423c}

/* ══ 4. 裏側で動き続ける(暗い面) ═════════════════════════════ */
.machine{position:relative;z-index:5;background:var(--night);padding:13vh 5vw;
  display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(30px,4vw,64px);align-items:center}
.machine-copy{display:grid;gap:clamp(14px,1.8vw,24px);align-content:center}
.machine-copy p:first-child{margin:0;font:12px var(--mono);letter-spacing:.16em;color:var(--mint)}
.machine-copy h2{margin:0;font-size:clamp(38px,4.4vw,64px);line-height:1.25;letter-spacing:-.04em}
.machine-copy>p:nth-child(3){margin:0;line-height:2;font-size:15px;color:#bed3d1;max-width:46ch}
.machine-jobs{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.machine-jobs li{display:grid;grid-template-columns:10px 1fr auto;align-items:center;gap:15px;
  padding:14px 17px;border:1px solid #7effbd38;background:#0d223fb3}
.machine-jobs i{display:block;width:10px;height:10px;border-radius:50%;background:var(--mint);
  animation:qBlink 2.4s ease-in-out infinite}
.machine-jobs li:nth-child(2) i{animation-delay:-.6s}
.machine-jobs li:nth-child(3) i{animation-delay:-1.2s}
.machine-jobs li:nth-child(4) i{animation-delay:-1.8s}
.machine-jobs b{font-size:15px;font-weight:400}
.machine-jobs span{font:13px var(--mono);color:#8ab5ac}
.machine-shot{position:relative;aspect-ratio:3/2;border-radius:18px;overflow:hidden}
.machine-scan{position:absolute;inset:0;width:100%;height:100%}
.ms-sweep{fill:none;stroke:#7effbd66;stroke-width:2;animation:qSweep 6.5s linear infinite}
.ms-plate{fill:#071123b3}
.ms-bars rect{fill:#7effbdcc;transform-box:fill-box;transform-origin:bottom;
  animation:qBars 1.5s ease-in-out infinite alternate}
.ms-bars rect:nth-child(2){animation-delay:-.3s}
.ms-bars rect:nth-child(3){animation-delay:-.6s}
.ms-bars rect:nth-child(4){animation-delay:-.9s}
.ms-bars rect:nth-child(5){animation-delay:-1.2s}

/* ══ 5. 働く人(明るい面) ═════════════════════════════════════ */
.people{position:relative;z-index:5;padding:14vh 5vw;background:var(--mist);color:#071123}
figure{margin:0}
.halo-shot{max-width:1180px;margin:0 auto clamp(34px,5vw,64px);aspect-ratio:3/2;border-radius:18px;overflow:hidden}
.people>header{display:grid;gap:clamp(12px,1.5vw,20px);max-width:1180px;margin:0 auto clamp(28px,3.4vw,48px)}
.people>header p{margin:0;font:12px var(--mono);letter-spacing:.16em;color:#2b6a51}
.people h2{margin:0;font-size:clamp(44px,5.6vw,80px);line-height:1.25;letter-spacing:-.04em}
.people-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:1180px;margin:0 auto}
/* ★position/z-index は「さわった時の幕(:before)」を自分の中に閉じ込めるため。
   これが無いと幕が .people の階層へ抜けて、札の地の下へ潜る。 */
.people-grid article{position:relative;z-index:0;display:grid;align-content:start;gap:13px;
  padding:clamp(24px,3vw,40px);border:1px solid #07112333;min-height:278px;background:#ffffff5c}
/* さわった時の地は擬似要素へ逃がす(.stack-chip と同じ手)。
   html.js .reveal (0,2,1) が transition を clip-path/translate で丸ごと持っているため、
   .people-grid article (0,1,1) 側に transition:background を書いても届かない
   (実測 = transitionProperty が "clip-path, translate" のままだった)。
   擬似要素は .reveal を持たないので、自前の transition が素直に効く。
   z-index:-1 は「自分の地の上・自分の文字の下」に塗る位置。 */
.people-grid article:before{content:"";position:absolute;z-index:-1;inset:0;
  pointer-events:none;background:#ffffff00}
/* 明るい面の小さな文字 = #2b6a51(理由は .stream-stations li b:first-child の上に書いた)。
   この札の地は #ffffff5c が --mist に重なった rgb(240,244,241) で、対比は 5.75。 */
.people-grid article>span{font:12px var(--mono);letter-spacing:.14em;color:#2b6a51}
.people-grid h3{margin:0;font-size:30px;line-height:1.25;letter-spacing:-.02em}
.people-grid p{margin:0;line-height:1.9;font-size:14px;color:#33423c}
.people-mark{display:block;width:120px;height:auto;margin-bottom:6px}
.pm-line{fill:none;stroke:#07112333;stroke-width:2;stroke-linecap:round}
.pm-bar{fill:#1f9c6bcc;transform-box:fill-box;transform-origin:bottom;
  animation:qBars 1.8s ease-in-out infinite alternate}
.pm-bar:nth-child(3){animation-delay:-.35s}
.pm-bar:nth-child(4){animation-delay:-.7s}
.pm-bar:nth-child(5){animation-delay:-1.05s}
.pm-ring{fill:none;stroke:#07112366;stroke-width:2.4}
.pm-run{fill:none;stroke:#1f9c6b;stroke-width:3;stroke-linecap:round;stroke-dasharray:8 40;
  animation:qDashT 1.3s linear infinite}
.pm-curve{fill:none;stroke:#07112326;stroke-width:2.4}
.pm-curve-run{fill:none;stroke:var(--violet);stroke-width:3;stroke-linecap:round;stroke-dasharray:10 130;
  animation:qDashS 2.4s linear infinite}

/* ══ 6. 数字(暗い面) ═════════════════════════════════════════ */
.numbers{position:relative;z-index:5;background:var(--deep);padding:13vh 5vw;
  display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(30px,4vw,60px);align-items:center}
.numbers-copy{display:grid;gap:clamp(14px,1.8vw,24px)}
.numbers-copy p:first-child{margin:0;font:12px var(--mono);letter-spacing:.16em;color:var(--mint)}
.numbers-copy h2{margin:0;font-size:clamp(38px,4.4vw,64px);line-height:1.25;letter-spacing:-.04em}
.numbers-copy>p:nth-child(3){margin:0;line-height:2;font-size:15px;color:#b9c9dd;max-width:44ch}
.stat-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,1.8vw,22px)}
.stat-list li{display:grid;grid-template-columns:92px minmax(0,1fr);grid-template-rows:auto auto;
  column-gap:15px;row-gap:5px;align-items:center;padding:16px;border:1px solid #ffffff26;background:#0a132bcc}
.stat-dial{position:relative;display:block;width:92px;height:92px;grid-row:1/3;grid-column:1}
.stat-dial svg{display:block;width:100%;height:100%}
.stat-track{fill:none;stroke:#ffffff1f;stroke-width:7}
.stat-arc{fill:none;stroke:url(#q-trunk);stroke-width:7;stroke-linecap:round;stroke-dasharray:295;
  stroke-dashoffset:var(--rest,80);transform:rotate(-90deg);transform-box:fill-box;transform-origin:center}
html.js .stat-arc{stroke-dashoffset:295;transition:stroke-dashoffset 1.3s cubic-bezier(.2,.7,.25,1)}
html.js .reveal.seen .stat-arc{stroke-dashoffset:var(--rest,80)}
.stat-dial b{position:absolute;inset:0;display:grid;place-items:center;
  font:800 22px/1 var(--body);letter-spacing:-.03em;color:#f2fffa}
.stat-list li>b{grid-row:1;grid-column:2;align-self:end;font:600 15px var(--mono);color:var(--mint)}
.stat-name{display:block;grid-row:2;grid-column:2;align-self:start;font-size:13px;line-height:1.6;color:#a7bacd}
.numbers-shot{aspect-ratio:1717/916;border-radius:18px;overflow:hidden;border:1px solid #ffffff26}

/* ══ 7. つながる先(道具の一覧) ═════════════════════════════════
   ★2026-08-22 に **流れる帯(marquee)をやめた**。
     帯は「窓(overflow:hidden)の外に品物が在る」ことが成立条件なので、
     「窓の外へ文字が出ていたら切れている」と測る公開品質の検査に対して
     **構造的に必ず赤**になる(実測 178 件 / 5 幅すべて。他の 24 ページは 0 件)。
     16 個の道具名はこの節の主張(いま使っている道具の隣に置ける)の中身そのもので、
     読み上げから外す飾りにはできない。だから隠さず、切れない形(格子)へ作り替えた。
   ★この節には overflow:hidden を 1 つも置かない。
     置くと .reveal の translate(下へ 22px)で最後の札が器の下辺を越えた瞬間に、
     同じ検査が赤へ戻る(そのとき切れているのは文字ではなく器の側)。
   ★動きは 4 つ = 地の粒の流れ / 母線の光 / 母線を走る点 / 札の接続ランプ。
     どれも文字を器の外へ出さない。出るときの時間差は --i(1〜12)で札ごとに付ける。
   ★2026-08-22 是正。札の内訳は **受け取り口 4 + 台帳と書類 12 = 16**。
     旧版は受け取り口に 8 枚(表計算 / 見積書 / 請求書 / 問い合わせ を含む)を並べていたが、
     前の 3 つは「入ってくる口」ではなく記録の側、「問い合わせ」はフォームとほぼ同義だった。
     .stream 節の本文「入口が四つあっても」と 01 受け取るの 4 つ、
     この節の「標準でつながる先は16種類です」の 3 つが、これで同時に合う。 */
/* ★2026-08-22 是正。地は --violet(#7254e8)ではなく --violet-deep(#5b3fd0)。
   理由 = 描画された画素で測ったら、この面の小さい文字が 4.5:1 を割っていた。
     #7254e8 の上 … CONNECT(#e2d9ff)=3.76 / 本文と札(#efeaff)=4.31 / 札の名前(--ink)=3.93。
     ★4 つ目(札の名前 3.93)は 2 名のレビューのどちらにも挙がっていない。地が
       #ffffff17 で持ち上がるぶん、指定色から手で計算すると見落とす。
   文字の側を白へ寄せると 4 つとも同じ色になって濃淡の段が消えるので、**地を沈めた**。
   #5b3fd0 の上 … CONNECT=5.09 / 本文と札=5.83 / 札の名前=5.17。濃淡の段はそのまま残る。
   ★数字はすべて 1440px で撮った画面の**画素**から出したもの(地 = 箱の中の最頻色 /
     文字 = 地から一番遠い画素)。指定色からの手計算ではない。
   ★--violet は「明るい面に引く線の色」として残す(.sm-out-run / .pm-curve-run / .sm-endbars)。
     面の地と線の色を 1 つの変数で兼ねると、どちらかを直すともう一方が壊れる。 */
.stack{position:relative;z-index:5;background:var(--violet-deep);padding:11vh 5vw}
.stack:before{content:"";position:absolute;z-index:0;inset:0;pointer-events:none;
  background-image:radial-gradient(#0711234a 1.2px,transparent 1.4px);background-size:34px 34px;
  animation:qStackDrift 11s linear infinite}
.stack>header{position:relative;z-index:1;display:grid;gap:13px;max-width:1180px;
  margin:0 auto clamp(26px,3.2vw,42px)}
.stack>header p:first-child{margin:0;font:12px var(--mono);letter-spacing:.16em;color:#e2d9ff}
.stack h2{margin:0;font-size:clamp(30px,3.4vw,50px);line-height:1.25;letter-spacing:-.03em}
.stack>header p:last-child{margin:0;max-width:54ch;line-height:2;font-size:15px;color:#efeaff}
.stack-sets{position:relative;z-index:1;display:grid;gap:clamp(24px,3.4vw,44px);
  max-width:1180px;margin:0 auto}
.stack-set{display:grid;gap:14px}
.set-label{margin:0;display:flex;align-items:center;gap:13px;font-size:15px;letter-spacing:.01em}
.set-label b{flex:0 0 auto;padding:6px 11px;border:1px solid #ffffff5c;border-radius:999px;
  font:600 12px var(--mono);letter-spacing:.16em;color:#efeaff}
.set-bus{position:relative;height:2px;background:linear-gradient(90deg,#ffffff1a,#ffffff9c,#ffffff1a);
  background-size:220% 100%;animation:qShimmer 5s linear infinite}
.set-bus i{position:absolute;left:0;top:-4px;display:block;width:10px;height:10px;border-radius:50%;
  background:#f7fffb;box-shadow:0 0 13px #f7fffbcc;animation:qBusRun 7.4s linear infinite}
.stack-set:nth-child(2) .set-bus i{animation-duration:9.2s;animation-delay:-3.6s}
.stack-grid{list-style:none;margin:0;padding:0;display:grid;gap:10px;
  grid-template-columns:repeat(4,minmax(0,1fr))}
.stack-chip{position:relative;z-index:1;display:grid;grid-template-columns:20px minmax(0,1fr) 8px;
  align-items:center;gap:12px;padding:14px 16px;border:1px solid #ffffff42;background:#ffffff17}
.stack-chip>svg{display:block;width:20px;height:20px}
.stack-chip>b{min-width:0;font-size:15px;font-weight:400;line-height:1.5;letter-spacing:.01em}
.stack-chip>i{display:block;width:8px;height:8px;border-radius:50%;background:var(--mint);
  animation:qLink 2.9s ease-in-out infinite}
.stack-chip:nth-child(2)>i{animation-delay:-.36s}
.stack-chip:nth-child(3)>i{animation-delay:-.72s}
.stack-chip:nth-child(4)>i{animation-delay:-1.08s}
.stack-chip:nth-child(5)>i{animation-delay:-1.44s}
.stack-chip:nth-child(6)>i{animation-delay:-1.8s}
.stack-chip:nth-child(7)>i{animation-delay:-2.16s}
.stack-chip:nth-child(8)>i{animation-delay:-2.52s}
.stack-chip:nth-child(9)>i{animation-delay:-2.88s}
.stack-chip:nth-child(10)>i{animation-delay:-3.24s}
.stack-chip:nth-child(11)>i{animation-delay:-3.6s}
.stack-chip:nth-child(12)>i{animation-delay:-3.96s}
.stack-set:nth-child(2) .stack-chip>i{animation-duration:3.6s}
.sg{fill:none;stroke:#ffffffd6;stroke-width:1.6;stroke-linejoin:round}
.sg.l{stroke-linecap:round}
/* 出るときの時間差。上の html.js .reveal:nth-child(2〜4) と重さが同じ (0,3,1) なので、
   後に書いて勝たせる(前に書くと 2〜4 枚目だけ別の遅れになる)。 */
html.js .reveal.stack-chip{transition-delay:calc(var(--i,0)*.045s)}

/* ══ 8. 権限と記録(ミント面) ═════════════════════════════════ */
.security{position:relative;z-index:5;background:var(--mint);color:#071123;padding:11vh 5vw;
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,50px);align-items:center}
.security-copy{display:grid;gap:clamp(14px,1.8vw,22px)}
.security-copy p{margin:0;font:12px var(--mono);letter-spacing:.16em;color:#0c4a33}
.security h2{margin:0;font-size:clamp(34px,3.9vw,58px);line-height:1.25;letter-spacing:-.04em}
.security-badges{display:grid;gap:10px}
.security b{display:flex;align-items:center;gap:13px;padding:15px 18px;border:1px solid #07112333;
  background:#ffffff66;font:600 13px var(--mono);letter-spacing:.07em}
.security b svg{display:block;width:22px;height:24px;flex:0 0 auto}
.sb-shield{fill:none;stroke:#071123;stroke-width:1.6;stroke-linejoin:round}
.sb-mark{fill:none;stroke:#0c4a33;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:14;animation:qDrawS 3.6s ease-in-out infinite}
.sb-log{fill:none;stroke:#0c4a33;stroke-width:1.8;stroke-linecap:round;stroke-dasharray:6 10;
  animation:qDashT 2.4s linear infinite}
.security-shot{position:relative;aspect-ratio:3/2;border-radius:18px;overflow:hidden}
.security-scan{position:absolute;inset:0;width:100%;height:100%}
.ss-line{fill:none;stroke:#7effbdcc;stroke-width:2.4;animation:qScanLine 5.5s linear infinite}
.ss-frame{fill:none;stroke:#7effbd6b;stroke-width:1.6;stroke-dasharray:20 20;
  animation:qDashXS 4.5s linear infinite}

/* ══ 9. はじめるまで(明るい面) ═══════════════════════════════ */
.steps{position:relative;z-index:5;background:var(--paper);color:#071123;padding:13vh 5vw}
.steps>header{display:grid;gap:clamp(12px,1.5vw,20px);max-width:1180px;margin:0 auto clamp(28px,3.4vw,48px)}
.steps>header p:first-child{margin:0;font:12px var(--mono);letter-spacing:.16em;color:#2b6a51}
.steps h2{margin:0;font-size:clamp(38px,4.6vw,68px);line-height:1.25;letter-spacing:-.04em}
.steps>header p:last-child{margin:0;line-height:2;font-size:15px;max-width:52ch;color:#2c3a35}
.steps-shots{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,28px);max-width:1180px;margin:0 auto}
.steps-shots figure{display:grid;gap:13px}
/* ★比は img ではなく器に置く(他の 4 枠 = .machine-shot / .halo-shot / .numbers-shot /
   .security-shot と同じ流儀)。img 側に aspect-ratio を書いても、素の img{height:100%} が
   grid で伸ばされた親の高さに解決して打ち消す。figure 自体には置けない
   (figure は絵 + 説明文の 2 段なので、比が説明文まで含んでしまう)ため枠を 1 枚挟む。 */
.steps-frame{aspect-ratio:3/2;border-radius:16px;overflow:hidden}
.steps-shots figcaption{font:13px var(--mono);letter-spacing:.03em;color:#33423c}
.steps-line{list-style:none;margin:clamp(30px,4vw,56px) auto 0;padding:0;max-width:1180px;position:relative;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,24px)}
.steps-line:before{content:"";position:absolute;left:6px;right:6px;top:5px;height:2px;
  background:linear-gradient(90deg,#7effbd00,#1f9c6b,#7254e8,#7254e800);background-size:220% 100%;
  animation:qShimmer 5s linear infinite}
.steps-line li{position:relative;display:grid;gap:9px;padding-top:24px}
.steps-line li:before{content:"";position:absolute;left:0;top:0;width:12px;height:12px;border-radius:50%;
  background:#071123;box-shadow:0 0 0 4px var(--paper)}
/* 明るい面の小さな文字 = #2b6a51(理由は .stream-stations li b:first-child の上に書いた)。
   すぐ上の帯(.steps-line:before)の #1f9c6b は線なので触っていない。 */
.steps-line li b:first-child{font:600 13px var(--mono);letter-spacing:.12em;color:#2b6a51}
.steps-line li b:nth-child(2){font-size:21px;letter-spacing:-.01em}
.steps-line li span{font-size:14px;line-height:1.9;color:#33423c}

/* ══ 10. 導入の入口(紫面) ════════════════════════════════════ */
.entry{position:relative;z-index:5;padding:15vh 6vw;background:var(--violet-deep);overflow:hidden;
  display:grid;justify-items:start;gap:clamp(16px,2vw,26px)}
.entry-fx{position:absolute;z-index:0;inset:0;width:100%;height:100%;pointer-events:none}
.ef-wave{fill:none;stroke:#ffffff5c;stroke-width:2;transform-box:fill-box;transform-origin:center;
  animation:qWave 4.6s ease-out infinite}
.ef-wave:nth-child(2){animation-delay:-1.5s}
.ef-wave:nth-child(3){animation-delay:-3s}
.ef-rail{fill:none;stroke:#ffffff3d;stroke-width:3;stroke-linecap:round}
.ef-run{fill:none;stroke:#f2fffa;stroke-width:3.4;stroke-linecap:round;stroke-dasharray:16 470;
  animation:qDash 3.2s linear infinite}
.ef-arrow{fill:none;stroke:#f2fffa;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;
  animation:qArrow 2.4s ease-in-out infinite}
.entry>span{position:relative;z-index:1;font:12px var(--mono);letter-spacing:.16em}
.entry h2{position:relative;z-index:1;margin:0;font-size:clamp(48px,6vw,84px);line-height:1.25;letter-spacing:-.05em}
.entry a{position:relative;z-index:1;display:inline-block;border:1px solid;padding:17px 24px}
/* ボタンも同じ理由(.reveal が transition を持っていく)で 2 つに割る。
   地 = 擬似要素 / 文字の色 = 中の span。どちらも .reveal が付かない別の要素。
   ★span は箱として使うので display を宣言する。 */
.entry a:before{content:"";position:absolute;z-index:-1;inset:-1px;background:#f2fffa00}
.entry a>span{display:inline-block}

footer{position:relative;z-index:5;padding:28px;display:grid;grid-template-columns:1fr 1fr auto;
  background:var(--bg);font:12px var(--mono)}

/* ══ さわった時(指で触る画面では出さない) ═══════════════════ */
@media(hover:hover){
  .machine-shot:hover img,.security-shot:hover img,.numbers-shot:hover img{transform:scale(1.05)}
  .machine-shot img,.security-shot img,.numbers-shot img,.steps-shots img{transition:transform .6s cubic-bezier(.2,.7,.3,1)}
  .steps-shots figure:hover img{transform:scale(1.04)}
  .people-grid article:before{transition:background .4s}
  .people-grid article:hover:before{background:#ffffff75}
  .entry a:before{transition:background .3s}
  .entry a>span{transition:color .3s}
  .entry a:hover:before{background:#f2fffa}
  .entry a:hover>span{color:var(--violet-deep)}
  /* 札のさわった時は **札そのものに transition を書かない**。
     html.js .reveal (0,2,0) が transition を clip-path,translate で丸ごと持っていて、
     media 問い合わせは重さを足さないので、.stack-chip (0,1,0) の transition は届かない
     (実測 = transitionProperty が "clip-path, translate" のままだった)。
     だから **擬似要素(自前の transition を持てる)** と ランプの影 に逃がす。
     擬似要素は position:absolute なので格子の 4 個目の升にはならない。 */
  .stack-chip:before{content:"";position:absolute;z-index:-1;inset:-1px;pointer-events:none;
    background:#ffffff00;box-shadow:inset 0 0 0 1px #ffffff00;transition:background .32s,box-shadow .32s}
  .stack-chip:hover:before{background:#ffffff24;box-shadow:inset 0 0 0 1px #ffffff9e}
  .stack-chip>i{transition:box-shadow .32s}
  .stack-chip:hover>i{box-shadow:0 0 13px var(--mint)}
}

/* ══ 折り返し ════════════════════════════════════════════════ */
@media(max-width:960px){
  .rail article{padding:16vh 6vw 12vh 40vw}
  .machine,.numbers,.security{grid-template-columns:1fr}
  .numbers-shot{order:-1}
  .stream-stations,.steps-line{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps-line:before{display:none}
  .people-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:720px){
  .halo-head nav{display:none}
  .halo-copy{left:20px;top:126px}
  .halo-copy h1{font-size:54px}
  /* ★2026-08-22 是正。旧版は inset:auto -14% 84px auto / width:128% だった。
     共有の shared-quality.css が site.css の **後** に読まれて svg{max-width:100%} を掛けるため、
     **128% は一度も効いていない**(実測 = 390px 幅で図の外枠は 390x227.5、128% なら 499 のはず)。
     効いていたのは right:-14% だけ = 図を右へ 14% ずらし、その 14% を器の overflow:hidden が
     切り落としていた。切られていたのは **人の確認(赤い印)と 完了 の 2 つ** =
     この図の落ち。実測 = 720px 以下の全幅で .wf-human-badge が画面の外(720px で左端 764.4)。
     右のずらしをやめて幅いっぱいに戻す。図の大きさ(= 幅と同じ)は 1 バイトも変えていないので、
     散らばる 12 枚から人の確認までが同じ縮尺のまま 1 画面に収まる。
     ★721px 以上には触れない(この規則は max-width:720px の中だけ)。 */
  .world-flow{inset:auto 0 84px auto;width:100%;height:auto;aspect-ratio:12/7}
  .world-hint{left:20px;bottom:4vh}
  .rail article{padding:120px 22px;background:#0a1a33f2}
  .stream,.machine,.numbers,.steps,.stack{padding:9vh 22px}
  .security{padding:9vh 22px}
  .stream-stations,.steps-line,.steps-shots,.people-grid,.stat-list{grid-template-columns:minmax(0,1fr)}
  .entry{padding:12vh 22px}
  .entry h2{font-size:55px}
  footer{grid-template-columns:1fr;gap:8px}
}

/* 札の列数。1 群は 4 枚と 12 枚。どちらも 4 で割り切れるので 4 → 2 → 1 と半分ずつ折る
   (3 列にすると 4 枚の群の最後の行が 1 枚だけになって欠けて見える)。
   ★境目は折れる実測値から遠ざけてある(検査の下限と設計値を同値にしない)。
     札 1 枚の最小 = 余白 32 + 枠 2 + 絵 20 + すきま 24 + ランプ 8 + 最長名「カレンダー」76 = 162px。
     4 列が要る幅 = 162x4 + すきま 30 = 678px。左右の余白 5vw を足すと **753px** で折れる → 境目は 901px。
     2 列が要る幅 = 162x2 + 10 = 334px。左右 22px を足すと **378px** で折れる → 境目は 421px。 */
@media(max-width:900px){.stack-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:420px){.stack-grid{grid-template-columns:minmax(0,1fr)}}

/*HEADFIX-20260811*/
.halo-head{justify-content:space-between;gap:16px}
.halo-head>*{min-width:0}
.halo-head>a:last-child{flex:0 0 auto;white-space:nowrap}
@media(max-width:720px){.halo-head{inset:22px 16px auto}.halo-head>a:first-child{min-width:0}}
/*/HEADFIX-20260811*/

/*HERO13-SCRIM-20260811 ── 2026-08-22 更新。
  821px 以上 = 左から右への幕(見出しの側だけ暗くし、SVG の側は写真を見せる)。
  820px 以下 = 上下への幕。上は見出しとヘッダー、下は SVG の絵を読ませるために暗くし、
  真ん中だけ写真を見せる(1 巡目は左右の幕のままで、下の SVG が写真に埋もれていた)。 */
@media(min-width:821px){
  .fixed-world>img{filter:brightness(.9) saturate(.88)}
  .fixed-world:after{background:linear-gradient(90deg,#071123fa 0%,#071123f2 30%,#07112373 48%,#07112300 62%)}
}
@media(max-width:820px){
  .fixed-world>img{object-position:38% center}
  .fixed-world:after{background:linear-gradient(180deg,#071123f5 0%,#071123e0 26%,#07112380 50%,#071123bf 72%,#071123f2 100%)}
}
/*/HERO13-SCRIM-20260811*/

/*HERO13-COPYSCRIM-20260811 ── 2026-08-22 更新。
  旧版は .halo-copy 本体に 165% の radial を敷いていたが、透明になる位置が箱の外だったため
  **箱の縁がそのまま四角い段差として見えていた**(769px の実測画像で確認)。
  幕を擬似要素へ移し、横は線形で右へ抜き、縦は mask で上下へ抜く。文字には mask を掛けない。 */
.halo-copy:before{content:"";position:absolute;z-index:-1;inset:-40px -66px -46px -44px;
  background:linear-gradient(90deg,#071123f2 0%,#071123e6 40%,#07112300 100%);
  -webkit-mask-image:linear-gradient(180deg,#0000 0,#000 22%,#000 78%,#0000 100%);
  mask-image:linear-gradient(180deg,#0000 0,#000 22%,#000 78%,#0000 100%)}
/*/HERO13-COPYSCRIM-20260811*/

/*HERO13-LINEHEIGHT-20260811 ── オーナー指摘「見出しの行間が狭い」の是正。
  350px 以下だけの追加。理由 = 「仕事を減らし」は 54px だと 320px 幅に物理的に入らない
  (余白 0 でも 305px 必要 / 入るのは 300px)ため 3 行に折れる。
  360px 以上は 2 行に収まっているので**文字サイズは触らない**。
  ★閾値 358 は**折り返しの境目を実測して**決めた(359px で 2 行に戻る)。
  当初 350 と置いたのは推測で、351〜358px の 8 幅が壊れていた。境目は推測せず二分探索で求めること。 */
@media(max-width:358px){.halo-copy{padding:18px 20px 22px;margin-left:-20px}.halo-copy h1{font-size:46px}}
/*/HERO13-LINEHEIGHT-20260811*/

/*HEADING-LEADING-20260811 ── 見出しの行間の是正(オーナー指示 2026-08-11「標準的な行間に。空けすぎないこと」)。
  対象 = **実測で 2 行以上に折り返し、行間が 1.06 未満、かつ日本語を含む**見出しだけ。
  日本語は文字が全角の枠いっぱいなので 1.00 = 行と行が接する。1.06 以上は既に隙間が見えており標準域。
  ★2026-08-22 に節構成を 5 → 10 へ組み替えたので**セレクタを数え直した**。
    旧版に在った 3 本の重複(section#flow.rail article h2 を 3 回)を 1 本に畳み、
    新しく増えた見出し(stream / machine / numbers / stack / security / steps)を足した。
    どのセレクタも querySelectorAll で 1 件以上当たることを実測している。
  ★このファイルの本体側でも同じ 1.25 を書いているが、ここは共有 shared-quality.css が
    site.css の**後**に読まれて !important で勝つ場合の保険。短いセレクタでは当たらないため全長パスで書く。 */
html body div#main main section#flow.rail article h2{line-height:1.25!important}
html body div#main main section.stream header h2{line-height:1.25!important}
html body div#main main section.machine div.machine-copy h2{line-height:1.25!important}
html body div#main main section#people.people header h2{line-height:1.25!important}
html body div#main main section.numbers div.numbers-copy h2{line-height:1.25!important}
html body div#main main section.stack header h2{line-height:1.25!important}
html body div#main main section.security div.security-copy h2{line-height:1.25!important}
html body div#main main section.steps header h2{line-height:1.25!important}
html body div#main main section#entry.entry h2{line-height:1.25!important}
/*/HEADING-LEADING-20260811*/

/* ══ 赤の差し色(2026-08-22 オーナー要望) ═══════════════════════
   要所にだけ赤を差す。差す先は 2 か所 = ヒーローの図 と パイプライン図。
   意味は 1 つ「人が見るべき 1 件 / 止まっている 1 件」。飾りでは置かない。
   ★ミント(流れている)と紫(そのまま終わる)の役割は動かさない。置き換えない。
   ★面ごとに赤の明るさを変える。同じ赤を両方に流用すると、どちらかで沈むか浮きすぎる。
     濃紺 #071123 の上 = --alert(対比 6.86)/ 明るい面 #eff3ee の上 = --alert-ink(対比 5.27)。
   ★色だけで意味を運ばせない(色覚の差で赤が見えなくても同じことが伝わる)。
     ヒーロー = 12 枚のうち 1 枚だけ**破線**の札(他の 11 枚は実線)。
     パイプライン図 = **ひし形に二本線** という図の中で唯一の角のある形 +
     その 1 件だけが**動かない**(他の流れは動き続ける)。
   ★点滅は @media(prefers-reduced-motion:reduce) の一括指定で全部止まる(先頭に既出)。
   ★さわった時の演出は 1 つも足していない(足すなら @media(hover:hover) の中)。 */

/* ヒーロー ①: 入口に届く 12 件のうち、1 件だけが例外。 */
.wf-chip.alert{fill:#ff6b7a24;stroke:var(--alert);stroke-width:1.6;stroke-dasharray:4 3}
/* ヒーロー ②: その 1 件が下ってくる車線。ミントの流れの合間に、ときどき赤が走る。
   模様の合計(10+590)と qDashAlert の送り量(600)を同じにして、継ぎ目を消す。 */
.wf-alert-run{fill:none;stroke:var(--alert);stroke-width:3;stroke-linecap:round;
  stroke-dasharray:10 590;animation:qDashAlert 5.6s linear infinite}
/* ヒーロー ③: 人の節に付く「1 件あります」の印。
   後ろが写真なので濃紺の縁を回して、明るい所でも暗い所でも縁が立つようにする。 */
.wf-human-badge{fill:var(--alert);stroke:#071123;stroke-width:2.4;
  transform-box:fill-box;transform-origin:center;animation:qBadge 2.8s ease-in-out infinite}
/* 720px 以下は図そのものが 0.325 倍まで縮む(実測 = 390px 幅で図の外枠 390x227.5)。
   線の太さも印の大きさも図と一緒に縮むので、赤は**実測 20 画素**しか残らなかった。
   狭い画面でだけ赤の 3 つを大きくする。**赤の点の数は増やさない**(ピンポイントは維持)。
   ★大きくするのに transform を使う。ループ側が translate / rotate / scale を持っているので、
     同じ property に 2 つ載せない(載せると後から書いた方に上書きされて片方が消える)。
   ★人の印は 2.1 倍にすると確認のチェックの先を覆うので、輪の外へ (12,-12) だけ逃がす。
     実測 = 印の中心 (1114,174) → (1126,162) / 輪の中心 (1092,196) との距離 48.1 /
     印の外径 (7+1.2)x2.1 = 17.2 / 輪の半径 32 → 48.1-17.2 = 30.9 で輪にちょうど接する。
     チェックの先 (1108,173) までは 21.1 = 外径より遠いので、もう覆わない。
   ★流れる赤の切れ端は 10 → 26 に伸ばす。模様の合計は 600 のまま
     (qDashAlert の送り量と同じ = 継ぎ目が出ない条件)。 */
@media(max-width:720px){
  .wf-chip.alert{stroke-width:3.4;stroke-dasharray:5 4;transform:scale(1.45)}
  .wf-alert-run{stroke-width:4.6;stroke-dasharray:26 574}
  .wf-human-badge{transform:translate(12px,-12px) scale(2.1)}
}

/* パイプライン図: 03「流す」で 1 件だけ止まっている。
   本文の「止まった案件だけが色を変えて残ります」と、図の意味をそろえてある。 */
/* 赤い輪は 03 の駅と同じ中心・同じ半径だが、**合図の緑の輪より後に描く**。
   同じ半径のものが後から塗られると先のものは消えるため、置く場所で決まる
   (実測: 先に置いた版は、動きを控える設定で緑に覆われて輪が濁った)。 */
.sm-hold-ring{fill:none;stroke:var(--alert-ink);stroke-width:4}
/* 点と札をつなぐ破線。模様の合計 5+6=11 に対して送り量 22 = ちょうど 2 巡なので継ぎ目が出ない。
   点から札へ上る向きに流れる = 「この 1 件が札の理由です」を線で言う。 */
.sm-hold-stem{fill:none;stroke:var(--alert-ink);stroke-width:2;stroke-linecap:round;stroke-dasharray:5 6;
  animation:qStemMarch 1.6s linear infinite}
.sm-hold-plate{fill:#fff;stroke:var(--alert-ink);stroke-width:2.6;stroke-linejoin:round}
.sm-hold-bar{fill:none;stroke:var(--alert-ink);stroke-width:3;stroke-linecap:round}
.sm-hold-tag{animation:qHold 3.2s ease-in-out infinite}
/* 止まっている 1 件。**動かさない・消さない**。
   ★2026-08-22 是正。旧版は 9 秒周期で 01 から 03 へ滑ってから消えて出直していた。
     実測(viewBox 座標 / 駅 01:300 02:500 03:700 04:900):
       t=0ms x=300 不透明度0 → t=1000ms x=514(駅02「そろえる」の真上を真っ赤なまま通過)
       → t=2500ms x=696 → t=3000〜8000ms x=700 静止 → t=9000ms 不透明度0 で 01 へ戻る。
     真下の本文は「止まった案件だけが色を変えて**残ります**」。残らずに消えていた。
     しかも札(.sm-hold-tag)は 3.2 秒の別ループで不透明度を持たない = 決して消えないので、
     赤が消えている間は**札だけが空の駅を指していた**。
   ★いまは 03 の駅の上に居続け、脈を打つだけ。移動 0 / 消失 0。
     周期は札と同じ 3.2 秒・同じ位相(どちらも 50% が山)なので、
     札が一番高く上がる瞬間に点が一番大きくなる。
   ★動きを控える設定では animation が全部止まり、点は 03 の駅の上に赤いまま残る。
   ★脈は scale。translate は札が、rotate は誰も使っていないので取り合いにならない。 */
.sm-stall{fill:var(--alert-ink);transform-box:fill-box;transform-origin:center;
  animation:qStallHold 3.2s ease-in-out infinite}

/* ══ 動きの定義(まとめて末尾に置く) ═════════════════════════ */
@keyframes qGridDrift{from{translate:0 0}to{translate:74px 74px}}
@keyframes qMotes{from{translate:0 0}to{translate:-56px 56px}}
@keyframes qAuroraA{from{translate:0 0;scale:1}to{translate:7vw 5vh;scale:1.16}}
@keyframes qAuroraB{from{translate:0 0;scale:1.1}to{translate:-6vw -4vh;scale:.92}}
@keyframes qBeam{from{translate:-70% 0}to{translate:320% 0}}
@keyframes qScan{from{top:-4px}to{top:100%}}
@keyframes qDash{to{stroke-dashoffset:-486}}
@keyframes qDashS{to{stroke-dashoffset:-140}}
@keyframes qDashM{to{stroke-dashoffset:-260}}
@keyframes qDashL{to{stroke-dashoffset:-300}}
@keyframes qDashXS{to{stroke-dashoffset:-80}}
@keyframes qDashT{to{stroke-dashoffset:-48}}
@keyframes qDrift{from{translate:0 0;rotate:-2deg}to{translate:9px -13px;rotate:3deg}}
@keyframes qPulseRing{0%{scale:1;opacity:.85}100%{scale:3.3;opacity:0}}
@keyframes qGlowBreath{from{scale:.86;opacity:.28}to{scale:1.14;opacity:.5}}
@keyframes qSpin{to{rotate:360deg}}
@keyframes qSpinBack{to{rotate:-360deg}}
@keyframes qBoltFlash{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes qDraw{0%{stroke-dashoffset:56}42%{stroke-dashoffset:0}84%{stroke-dashoffset:0}100%{stroke-dashoffset:56}}
@keyframes qDrawS{0%{stroke-dashoffset:14}42%{stroke-dashoffset:0}84%{stroke-dashoffset:0}100%{stroke-dashoffset:14}}
@keyframes qTick{0%{stroke-dashoffset:32}36%{stroke-dashoffset:0}86%{stroke-dashoffset:0}100%{stroke-dashoffset:32}}
@keyframes qTickL{0%{stroke-dashoffset:48}36%{stroke-dashoffset:0}86%{stroke-dashoffset:0}100%{stroke-dashoffset:48}}
@keyframes qHint{0%,100%{scale:1 .25;opacity:.4}50%{scale:1 1;opacity:1}}
@keyframes qStationPing{0%{scale:1;opacity:.9}100%{scale:2.6;opacity:0}}
@keyframes qEndGlow{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes qSweep{from{translate:0 0}to{translate:400px 0}}
@keyframes qBars{from{scale:1 .45}to{scale:1 1}}
@keyframes qStackDrift{from{background-position:0 0}to{background-position:34px 34px}}
@keyframes qBusRun{0%{left:0;opacity:0}9%{opacity:1}91%{opacity:1}100%{left:100%;opacity:0}}
@keyframes qLink{0%,100%{scale:.62;opacity:.25}50%{scale:1;opacity:1}}
@keyframes qBlink{0%,100%{opacity:.3}50%{opacity:1}}
@keyframes qScanLine{from{translate:0 0}to{translate:0 260px}}
@keyframes qWave{0%{scale:.42;opacity:.5}100%{scale:1.5;opacity:0}}
@keyframes qArrow{0%,100%{translate:0 0}50%{translate:13px 0}}
@keyframes qShimmer{from{background-position:-110% 0}to{background-position:110% 0}}
@keyframes qDashAlert{to{stroke-dashoffset:-600}}
@keyframes qBadge{0%,100%{scale:1;opacity:.86}50%{scale:1.18;opacity:1}}
@keyframes qHold{0%,100%{translate:0 0}50%{translate:0 -6px}}
@keyframes qStallHold{0%,100%{scale:1}50%{scale:1.34}}
@keyframes qStemMarch{to{stroke-dashoffset:-22}}

/*HEAD13-NARROW-20260822 ── 320px でロゴの「D」が START の緑の丸に 5.3px 食われていた是正。
  実測(ヘッダーを 3 倍で撮った PNG の画素を列ごとに走査した値):
    320px = ロゴのインク右端 214.0px / START の箱の左端 207.8px → すきま −6.2px。
    実際に塗られていた右端は 207.7px しかなく、安全な幅(≥327px)での 213.0px に対して
    **5.3px ぶんの D が緑の丸に上塗りされて消えていた**(DOM の矩形では見えない欠け)。
  ★直すのはロゴの文字サイズだけ。START の丸には触らない。
    理由 = 丸は 83x48px で、≤820px の共有 CSS が min-height:44px!important を押し付けている。
    横の余白を詰めると高さの計算まで動かしかねないので、押しやすさの床から遠ざける。
  ★境目を 344px に置いた理由(地雷16 = 検査の下限と設計値を同値にするな):
    素のままのすきま = 幅 − 326.2px なので、下限 2px を割るのは 328px 以下。
    境目をその実際の折れ目に置くと、1px の測り誤差で緑と赤を行き来する。344px に置くと
      直した側の最小 = 320px の 19.2px / 直さない側の最小 = 345px の 18.8px
    となり、320px から上の**全幅を通しての最悪値が 18.8px = 下限 2px の 9 倍**になる。
  ★文字サイズだけにしたのは、字間や余白をいじるとロゴの見え方が 345px 以上まで動くため。
    345px 以上は 1 バイトも変わらない(20px のまま)。 */
@media(max-width:344px){.halo-head>a:first-child{font-size:17px}}
/*/HEAD13-NARROW-20260822*/