*{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}button{font:inherit;color:inherit}.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}.eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase}.reveal{opacity:0;transform:translateY(25px);transition:.8s}.reveal.seen{opacity:1;transform:none}:focus-visible{outline:3px solid #65a7ff;outline-offset:4px}@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{opacity:1;transform:none}}:root{--bg:#050606;--ink:#f1f3ef;--body:"IBM Plex Mono",monospace;--display:Orbitron,sans-serif;--green:#aaff00}.orbit-head{position:fixed;z-index:30;inset:24px 28px auto;display:flex;justify-content:space-between}.orbit-head a{font:700 22px var(--display)}.void-hero{height:100svh;min-height:700px;position:relative}.void-hero img{filter:grayscale(1) contrast(1.2)}.void-hero:after{content:"";position:absolute;inset:0;background:#0005}.mark{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);font:700 clamp(60px,9vw,128px) var(--display);letter-spacing:.1em;text-shadow:0 0 30px #000}.mark span{display:block;text-align:right;color:var(--green);font-size:.18em}.void-hero p{position:absolute;z-index:2;left:50%;bottom:8vh;transform:translateX(-50%);font-size:12px}.scan{position:absolute;z-index:3;left:0;right:0;top:20%;height:1px;background:var(--green);box-shadow:0 0 14px var(--green);animation:scan 4s linear infinite}@keyframes scan{50%{top:80%}}.orbit-index{padding:14vh 5vw}.orbit-index header{display:grid;grid-template-columns:1fr 2fr}.orbit-index h1,.machine-stage h2,.orbit-contact h2{font:500 clamp(58px,8vw,110px)/1 var(--display);letter-spacing:-.04em}.orbit-index>a{display:grid;grid-template-columns:80px 1fr auto;padding:28px 0;border-top:1px solid}.orbit-index>a span{font:500 clamp(28px,5vw,68px) var(--display)}.machine-stage{display:grid;grid-template-columns:1fr 1fr;min-height:900px;background:#eceeea;color:#090a09}.machine-stage>div{padding:9vw 5vw}.machine-stage p{line-height:1.8}.machine-stage dl{display:grid;grid-template-columns:repeat(3,1fr);margin-top:70px}.machine-stage dd{margin:8px 0;font-size:22px}.machine-stage figure{margin:0;aspect-ratio:2/3;overflow:hidden}.grid-shot{grid-column:1/-1;justify-self:center;width:100%;max-width:1100px;margin:0 0 clamp(20px,3vw,40px);aspect-ratio:3/2;overflow:hidden}.factory-grid{display:grid;grid-template-columns:1fr 1fr}.factory-grid article{min-height:480px;padding:5vw;border:1px solid #ffffff33;display:flex;flex-direction:column;justify-content:space-between}.factory-grid h3{font:500 clamp(34px,5vw,65px)/1.15 var(--display)}.orbit-contact{padding:15vh 5vw;background:var(--green);color:#050606}.orbit-contact a{display:inline-block;border:1px solid;padding:16px 23px}footer{padding:28px;display:grid;grid-template-columns:1fr 1fr auto;font-size:12px}@media(max-width:720px){.mark{font-size:50px}.orbit-index header{grid-template-columns:1fr}.orbit-index h1{font-size:56px}.orbit-index>a{grid-template-columns:45px 1fr}.orbit-index>a em{grid-column:2}.machine-stage{grid-template-columns:1fr;min-height:auto}.machine-stage figure{height:auto}.factory-grid{grid-template-columns:1fr}.orbit-contact h2{font-size:54px}footer{grid-template-columns:1fr;gap:8px}}
/*HEADING-LEADING-20260811 ── 見出しの行間の是正(オーナー指示 2026-08-11「標準的な行間に。空けすぎないこと」)。
対象 = **実測で 2 行以上に折り返し、行間が 1.06 未満、かつ日本語を含む**見出しだけ。
日本語は文字が全角の枠いっぱいなので 1.00 = 行と行が接する。1.00〜1.05 は実質接している。
1.06 以上は既に隙間が見えており標準域なので触らない(= 空けすぎない)。
欧文だけの見出しも触らない(枠いっぱいという理屈が当てはまらず、実測で他の部品と重なった)。
セレクタは実際に描画された要素から機械で取った全長パス。共有 shared-quality.css が
site.css の**後**に読まれて `!important` で勝つため、短いセレクタでは当たらない。
生成 = apply_heading_leading_20260811.py / 確認 = scan_all_headings_20260811.cjs --tag after
1.00 → 1.25 / 3行 / 動きから工場を変える
1.00 → 1.25 / 3行 / 狭いラインに広い可動域
1.00 → 1.25 / 2行 / 実物を持ち込んで一日で検証
*/
html body div#main main section.orbit-index header h1{line-height:1.25!important}
html body div#main main section#pick.machine-stage div h2{line-height:1.25!important}
html body div#main main section#demo.orbit-contact h2{line-height:1.25!important}
/*/HEADING-LEADING-20260811*/
/* ══ MOTION-20260820 ═══════════════════════════════════════════════════════
動的演出の追加(オーナー指示 2026-08-20「デザイナーが自律的にブラッシュアップして。
マシンが動いているクールな演出は必須。モーショングラフィックスも多用すること。
セクションも足りない。」)。
★守っている制約 4 つ。緩めないこと(制作例04 で確立した型)。
(1) スクロール演出で opacity を 0 にしない。
公開品質ゲートの visible() は祖先を遡って opacity<=0 の要素を検査から丸ごと外す。
ゲートはスクロールしないので、.reveal に opacity:0 を入れると折り返しから下が
未検査のまま critical 0 になる。持ち上げ = transform / 覆い = clip-path。
(2) 触ったときだけ動く演出は @media(hover:hover) で囲む(スマホで :hover が居座る)。
(3) 連続アニメーションは translate / scale / rotate / stroke だけを使い、
transform は「入場」と「ロボットの関節」専用にする。
(4) 同じ塊の中の兄弟をずらして動かさない(spacing 検査が本当に赤くなる)。
══════════════════════════════════════════════════════════════════════════ */
/* ── 共通 ─────────────────────────────────────────────────────────────── */
.reveal{opacity:1;transform:translateY(30px);
transition:transform .95s cubic-bezier(.22,.68,.24,1) var(--d,0s),clip-path .95s cubic-bezier(.22,.68,.24,1) var(--d,0s)}
.reveal.seen{transform:none}
.reveal-wipe{clip-path:inset(-20px -20px 100% -20px)}
.reveal-wipe.seen{clip-path:inset(-20px)}
video{display:block;width:100%;height:100%;object-fit:cover}
.orbit-index>a:nth-of-type(2){--d:.08s}
.orbit-index>a:nth-of-type(3){--d:.16s}
.factory-grid article:nth-of-type(2){--d:.07s}
.factory-grid article:nth-of-type(3){--d:.14s}
.factory-grid article:nth-of-type(4){--d:.21s}
.num-grid article:nth-child(2){--d:.09s}
.num-grid article:nth-child(3){--d:.18s}
.num-grid article:nth-child(4){--d:.27s}
.flow-steps li:nth-child(2){--d:.09s}
.flow-steps li:nth-child(3){--d:.18s}
.flow-steps li:nth-child(4){--d:.27s}
/* ヘッダー下の読み進み具合(擬似要素 = DOM 検査には出てこない) */
.orbit-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
background:linear-gradient(90deg,var(--green),transparent);
transform:scaleX(var(--sp,0));transform-origin:left;transition:transform .14s linear}
/* ── ヒーロー: 実機が動いている映像 + 計器の枠 ────────────────────────── */
/* ★ヒーローは 100svh あるが、上に固定のクレジット帯(44px)と追従ヘッダー(約68px)が
乗っているため、下端に置いた文字は**どの画面でも折り返しの下**に落ちる(実測:
1440x900 / 1440x760 / 390x844 の 3 通りすべてで説明文と CYCLE が画面外だった)。
映像は 100svh のまま流し、**読ませる物だけ**その分だけ上へ寄せる。 */
.void-hero{overflow:hidden;--chrome:112px}
.void-hero video{position:absolute;inset:0;filter:contrast(1.06)}
.mark{top:calc(50% - var(--chrome) / 2)}
.void-hero>p{bottom:calc(var(--chrome) + 4vh)}
.void-hero::after{background:radial-gradient(120% 80% at 50% 45%,#0000 0%,#00000066 82%),
linear-gradient(180deg,#050606cc 0,#0000 22%,#0000 62%,#050606 100%)}
.mark{animation:markIn 1.5s cubic-bezier(.2,.75,.2,1) both}
@keyframes markIn{from{letter-spacing:.34em;translate:0 14px}to{letter-spacing:.1em;translate:0 0}}
.scan{animation:scan 5.5s linear infinite;opacity:.85}
.hud{position:absolute;inset:0;z-index:4;pointer-events:none;
font:600 11px/1 var(--body);letter-spacing:.18em;color:var(--green)}
.hud .c{position:absolute;width:26px;height:26px;border:1px solid var(--green);opacity:.75}
.hud .tl{left:24px;top:96px;border-right:0;border-bottom:0}
.hud .tr{right:24px;top:96px;border-left:0;border-bottom:0}
.hud .bl{left:24px;bottom:calc(var(--chrome) + 22px);border-right:0;border-top:0}
.hud .br{right:24px;bottom:calc(var(--chrome) + 22px);border-left:0;border-top:0}
.hud b{position:absolute;font-size:11px;letter-spacing:.18em}
.hud-live{left:60px;top:100px}
.hud-live::before{content:"";display:inline-block;width:7px;height:7px;margin-right:8px;
border-radius:50%;background:#ff4a2e;vertical-align:1px;animation:blink 1.5s steps(1) infinite}
@keyframes blink{50%{opacity:.15}}
.hud-axis{right:60px;top:100px}
.hud-dot{display:inline-block;width:6px;height:6px;margin:0 6px;border-radius:50%;
background:var(--green);animation:blink 1.1s steps(1) infinite}
.hud-cyc{left:60px;bottom:calc(var(--chrome) + 28px)}
.tick{font-variant-numeric:tabular-nums;letter-spacing:.1em}
/* ── APPLICATION INDEX: 読んでいる行が伸びる ──────────────────────────── */
.orbit-index>a{position:relative;align-items:baseline;
transition:padding-left .5s cubic-bezier(.22,.68,.24,1)}
.orbit-index>a::before{content:"";position:absolute;left:0;top:-1px;height:1px;width:0;
background:var(--green);transition:width .8s cubic-bezier(.22,.68,.24,1)}
.orbit-index>a.on::before{width:100%}
.orbit-index>a b{transition:color .5s ease}
.orbit-index>a.on b{color:var(--green)}
.orbit-index>a em{transition:opacity .5s ease;opacity:.55}
.orbit-index>a.on em{opacity:1}
/* ── 稼働の帯(新設): 実機が部品をつかんで置く ────────────────────────── */
.line-band{position:relative;height:min(78svh,720px);min-height:440px;overflow:hidden;
background:#0a0c0a;border-block:1px solid #ffffff1f}
.line-band video{position:absolute;inset:0;filter:contrast(1.05)}
.line-band::after{content:"";position:absolute;inset:0;
background:linear-gradient(90deg,#050606d6 0,#0506068c 44%,#0000 76%)}
.band-copy{position:absolute;z-index:2;left:5vw;top:50%;translate:0 -50%;max-width:min(46ch,42vw)}
.band-copy h2{font:500 clamp(38px,5.2vw,74px)/1.22 var(--display);letter-spacing:-.03em;margin:18px 0 0}
.band-copy p{margin:20px 0 0;line-height:2;color:#f1f3efc4;max-width:34ch}
.band-meter{position:absolute;z-index:2;right:5vw;bottom:7vh;display:flex;align-items:flex-end;gap:7px;height:64px}
.band-meter i{width:6px;background:var(--green);opacity:.85;
animation:meter 1.25s ease-in-out infinite alternate}
.band-meter i:nth-child(1){height:22%;animation-delay:-.1s}
.band-meter i:nth-child(2){height:56%;animation-delay:-.35s}
.band-meter i:nth-child(3){height:34%;animation-delay:-.6s}
.band-meter i:nth-child(4){height:78%;animation-delay:-.2s}
.band-meter i:nth-child(5){height:44%;animation-delay:-.75s}
.band-meter i:nth-child(6){height:66%;animation-delay:-.45s}
.band-meter i:nth-child(7){height:28%;animation-delay:-.9s}
.band-meter i:nth-child(8){height:52%;animation-delay:-.3s}
@keyframes meter{from{scale:1 .35}to{scale:1 1}}
/* ── 機体の諸元: 数値が伸びる棒 + 方眼 ────────────────────────────────── */
.machine-stage{position:relative;overflow:hidden}
.machine-stage>div{position:relative;z-index:1}
.machine-stage::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
background-image:linear-gradient(#090a0910 1px,#0000 1px),linear-gradient(90deg,#090a0910 1px,#0000 1px);
background-size:34px 34px;animation:gridPan 34s linear infinite}
@keyframes gridPan{to{background-position:34px 34px}}
.machine-stage dl>div{position:relative;padding-bottom:16px}
.machine-stage .bar{display:block;position:absolute;left:0;right:14px;bottom:0;height:3px;background:#090a0922}
.machine-stage .bar::after{content:"";position:absolute;inset:0 auto 0 0;width:0;background:#090a09;
transition:width 1.5s cubic-bezier(.22,.68,.24,1) .25s}
.machine-stage .stage-copy.seen .bar::after{width:var(--fill,60%)}
.stage-shot{overflow:hidden}
.stage-shot img{animation:stagePush 24s ease-in-out infinite alternate}
@keyframes stagePush{from{scale:1}to{scale:1.1}}
/* ── 六軸(新設): 動くロボットの図 ────────────────────────────────────── */
.axes{padding:15vh 5vw;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
gap:clamp(30px,5vw,80px);align-items:center;border-top:1px solid #ffffff1f}
.axes h2{font:500 clamp(38px,5vw,72px)/1.22 var(--display);letter-spacing:-.03em;margin:18px 0 0}
.axes-copy>p{margin:22px 0 0;line-height:2;color:#f1f3efc4;max-width:38ch}
.axis-list{list-style:none;margin:38px 0 0;padding:0;display:grid;gap:0}
.axis-list li{display:grid;grid-template-columns:52px 1fr auto;gap:14px;align-items:center;
padding:13px 0;border-top:1px solid #ffffff26;font-size:13px}
.axis-list b{font:600 13px var(--body);color:var(--green);letter-spacing:.12em}
.axis-list em{font-style:normal;opacity:.6;letter-spacing:.06em}
.axes-rig{margin:0;border:1px solid #ffffff26;background:#080a08;transition:border-color .5s ease}
.axes-rig svg{display:block;width:100%;height:auto}
/* ── 黒い金属の質感 ──────────────────────────────────────────────────
艶 = ハイライト。既存写真の実測(明部>200 が 0.29〜0.67% / 上位0.1% が 219〜250)を
狙って、金属のグラデーションに明るいストップを置き、さらに白い帯を腕の上に走らせる。
ただ暗くしただけの絵には明部が 0.00% しか無く、それが「艶が消えた」の正体だった。 */
.rig-belt{stroke:#6d7773;stroke-opacity:.5;stroke-width:2}
.rig-floor{opacity:.9}
.wp{fill:url(#mWp);stroke:#8e9994;stroke-opacity:.35;stroke-width:1}
.jring{fill:none;stroke:var(--green);stroke-width:1.6;opacity:.85}
.fin{stroke:#98a29d;stroke-opacity:.35;stroke-width:1}
.payload{stroke:var(--green);stroke-width:1.5;opacity:0}
.rig-path{stroke:var(--green);stroke-width:1.6;stroke-dasharray:7 9;opacity:.75;
animation:rigPath 2.6s linear infinite}
@keyframes rigPath{to{stroke-dashoffset:-32}}
/* 金属の上を走る光。これがあるかないかで「黒い金属」か「暗い灰色」かが決まる */
.sheen{animation:sheenRun 3.6s cubic-bezier(.6,0,.4,1) infinite}
.sh2{animation-duration:4.4s;animation-delay:-1.4s}
@keyframes sheenRun{
0%{translate:0 -46px;opacity:0}
12%{opacity:1}
70%{translate:0 152px;opacity:1}
86%{translate:0 152px;opacity:0}
100%{translate:0 152px;opacity:0}
}
.belt-run{animation:belt 4.6s linear infinite}
@keyframes belt{to{translate:-160px 0}}
.j1,.j2,.j3,.f-l,.f-r,.payload{transform-origin:0 0}
.j1{animation:j1 7.2s cubic-bezier(.45,0,.35,1) infinite}
.j2{animation:j2 7.2s cubic-bezier(.45,0,.35,1) infinite}
.j3{animation:j3 7.2s cubic-bezier(.45,0,.35,1) infinite}
.f-l{animation:fingerL 7.2s steps(1) infinite}
.f-r{animation:fingerR 7.2s steps(1) infinite}
.payload{animation:payload 7.2s steps(1) infinite}
@keyframes j1{
0%,8% {transform:translate(140px,330px) rotate(14deg)}
26%,34% {transform:translate(140px,330px) rotate(40deg)}
48% {transform:translate(140px,330px) rotate(6deg)}
66%,76% {transform:translate(140px,330px) rotate(-26deg)}
92%,100%{transform:translate(140px,330px) rotate(14deg)}
}
@keyframes j2{
0%,8% {transform:translate(0,-130px) rotate(66deg)}
26%,34% {transform:translate(0,-130px) rotate(95deg)}
48% {transform:translate(0,-130px) rotate(58deg)}
66%,76% {transform:translate(0,-130px) rotate(88deg)}
92%,100%{transform:translate(0,-130px) rotate(66deg)}
}
@keyframes j3{
0%,8% {transform:translate(0,-105px) rotate(-20deg)}
26%,34% {transform:translate(0,-105px) rotate(-45deg)}
48% {transform:translate(0,-105px) rotate(-24deg)}
66%,76% {transform:translate(0,-105px) rotate(-32deg)}
92%,100%{transform:translate(0,-105px) rotate(-20deg)}
}
@keyframes fingerL{0%,28%{transform:translate(0,0)}30%,72%{transform:translate(8px,0)}74%,100%{transform:translate(0,0)}}
@keyframes fingerR{0%,28%{transform:translate(0,0)}30%,72%{transform:translate(-8px,0)}74%,100%{transform:translate(0,0)}}
@keyframes payload{0%,29%{opacity:0}31%,71%{opacity:1}73%,100%{opacity:0}}
/* ── 用途の 4 面: 自作のモーショングラフィックスで埋める(2026-08-20)────────
写真は使わない(オーナー方針)。#axes の SVG ロボットアームと同じ作り方 =
SVG + CSS keyframes だけで、4 面それぞれに動く絵を置く。
★見出しが乗る帯には何も置かない。
実測(1440 幅): セル 712x480 / 内寸 568 / h3 = 65px・行送り 1.15。
「形が違ってもつかむ」は 9 文字 = 585px > 568 なので 2 行 = 149.5px。
下パディング 72px を引くと本文の天は セル y=258.5 → viewBox y=162。
よって **動く物は viewBox y<158 に収める**。下半分は地と質感だけ。
★SVG は aria-hidden の飾り。公開品質ゲートの isReadable() は
aria-hidden の子孫を全部外すので、極小の図形・線が min-font / overlap /
clipping に化けることはない(= ゲートを騙してもいないし、汚してもいない)。
★画面外では止める。--play は .factory-grid.live のときだけ running。
連続アニメーションを 4 面ぶん常時回すと、見ていない間ずっと CPU を焼く。 */
.factory-grid{--play:paused}
.factory-grid.live{--play:running}
/* 上に絵の帯 / 下に文字。重ねない。
実測(1440 幅)= h3 の下マージンが 1em = 65px あるため、見出しの天は セル y=188.5 まで
上がってくる。タイルの高さ 480 の 39% で、絵と文字は必ず食い合う。重ねて逃げるのではなく
段を分けた。帯の縦横比は viewBox と同値(440:160)にしてあるので、
どの画面幅でも letterbox も切り落としも出ない(= 構図が幅で崩れない)。 */
.factory-grid article{position:relative;overflow:hidden;padding:0;
justify-content:flex-start;min-height:clamp(300px,34vw,480px)}
.cell-art{position:relative;flex:none;width:100%;aspect-ratio:440/160;overflow:hidden;
border-bottom:1px solid #ffffff14}
.factory-grid article>span{margin-top:auto;padding:0 5vw}
.factory-grid article>h3{margin:16px 0 5vw;padding:0 5vw}
.factory-grid article::after{content:"";position:absolute;left:5vw;right:5vw;bottom:5vw;z-index:1;
height:1px;background:var(--green);transform:scaleX(0);transform-origin:left;
transition:transform .8s cubic-bezier(.22,.68,.24,1)}
.cell-art::before{content:"";position:absolute;inset:0;
background-image:linear-gradient(#f1f3ef0d 1px,#0000 1px),linear-gradient(90deg,#f1f3ef0d 1px,#0000 1px);
background-size:38px 38px;animation:cellGrid 32s linear infinite;animation-play-state:var(--play)}
@keyframes cellGrid{to{background-position:38px 38px}}
.cell-art::after{content:"";position:absolute;inset:0;pointer-events:none;transition:opacity .7s ease;
background:radial-gradient(120% 132% at 62% 34%,#0000 0%,#05060633 78%,#05060699 100%),
linear-gradient(0deg,#05060680 0%,#0000 8%)}
.cell-art svg{position:absolute;inset:0;width:100%;height:100%}
/* 4 面で共通の部品 */
.cell-rail{stroke:#6d7773;stroke-opacity:.45;stroke-width:2}
/* 黒い金属の「艶」= ハイライト。引き継ぎ §2 の物差し(既存写真 = 上位0.1% 215〜250 /
明部>200 が 0.24〜0.67%)に対し、面のグラデーションだけでは 135〜205 / 0.00〜0.16% しか
出なかった。頂点が足りないのではなく **明るい画素の面積** が足りない。
実物の黒い金属と同じく、縁に硬い一本のハイライトを入れて面積を作る。 */
.cell-spec{stroke:#eef3f0;stroke-opacity:.92;stroke-width:1.1}
.cell-roller circle{fill:none;stroke:#6d7773;stroke-opacity:.26;stroke-width:1.4}
/* ① FOOD ── やわらかい爪が、形の違う物を包む
品物は間隔 120 で A(丸)B(長)C(しずく)の繰り返し。掴む位置は x=340。
translate 0 / -120 / -240 でそれぞれ C / A / B が来て、-360 で最初と同じ絵に戻る。
爪の閉じ量は品物の幅から決めている(C=36→33px / A=52→25px / B=78→12px)。 */
.f-hanger rect{fill:url(#fFin)}
.f-wk{fill:url(#fWork);stroke:#8e9994;stroke-opacity:.22;stroke-width:1}
.f-finger{fill:none;stroke:url(#fFin);stroke-width:11;stroke-linecap:round}
.f-dot{fill:#aaff00;opacity:0;animation:fDot 18s linear infinite}
.f-led{fill:#aaff00;animation:blink 2.4s steps(1) infinite}
.f-vis{stroke-opacity:.3;animation:fVis 3.4s ease-in-out infinite alternate}
.f-vis path{fill:none;stroke:#aaff00;stroke-width:1.4;stroke-linejoin:round}
.f-tr{fill:none;stroke:#aaff00;stroke-width:1.6;stroke-dasharray:300;stroke-dashoffset:300;
opacity:0;animation:fTrace 18s linear infinite}
.f-run{animation:fRun 18s cubic-bezier(.5,0,.3,1) infinite}
.f-head{animation:fHead 18s cubic-bezier(.4,0,.3,1) infinite}
.f-fl{animation:fFingerL 18s cubic-bezier(.4,0,.3,1) infinite}
.f-fr{animation:fFingerR 18s cubic-bezier(.4,0,.3,1) infinite}
@keyframes fRun{0%,25%{translate:0 0}33%,58%{translate:-120px 0}66%,91%{translate:-240px 0}100%{translate:-360px 0}}
@keyframes fHead{0%,4%{translate:0 0}10%,21%{translate:0 30px}27%,37%{translate:0 0}
43%,54%{translate:0 30px}60%,70%{translate:0 0}76%,87%{translate:0 30px}93%,100%{translate:0 0}}
@keyframes fFingerL{0%,11%{translate:0 0}14%,18%{translate:33px 0}21%,44%{translate:0 0}
47%,51%{translate:25px 0}54%,77%{translate:0 0}80%,84%{translate:12px 0}87%,100%{translate:0 0}}
@keyframes fFingerR{0%,11%{translate:0 0}14%,18%{translate:-33px 0}21%,44%{translate:0 0}
47%,51%{translate:-25px 0}54%,77%{translate:0 0}80%,84%{translate:-12px 0}87%,100%{translate:0 0}}
@keyframes fDot{0%,13%{opacity:0}15%,18%{opacity:1}20%,46%{opacity:0}48%,51%{opacity:1}
53%,79%{opacity:0}81%,84%{opacity:1}86%,100%{opacity:0}}
@keyframes fVis{from{stroke-opacity:.26}to{stroke-opacity:.72}}
@keyframes fTrace{0%,9%{stroke-dashoffset:300;opacity:0}10%{stroke-dashoffset:300;opacity:1}
17%,22%{stroke-dashoffset:0;opacity:1}26%,100%{stroke-dashoffset:0;opacity:0}}
/* ② METAL ── 溶接の火花のそばで、機体は止まらない
板が左へ流れ、トーチは止まっている(カメラがトーチに付いている)。
鋲の間隔 60 / 罫の間隔 40 なので translate -120 で同じ絵に戻る。
火花は発射点を中心に回した枠の中で +x へ飛ばす。下向きは短く、
上向きは長くして、見出しが乗る帯(y>158)に落ちないようにしてある。 */
.m-run{animation:mRun 4.6s linear infinite}
@keyframes mRun{to{translate:-120px 0}}
.m-rivet circle{fill:#0b100e;stroke:#98a29d;stroke-opacity:.3;stroke-width:1.1}
.m-scribe path{stroke:#f1f3ef;stroke-opacity:.05;stroke-width:1}
.m-ripple{fill:none;stroke:#c8d0cb;stroke-opacity:.3;stroke-width:1.3}
.m-fm{transform-box:fill-box;transform-origin:center}
.m-fm.f1{animation:mFume1 3.4s linear infinite}
.m-fm.f2{animation:mFume2 4.2s linear 1.4s infinite}
.m-fm.f3{animation:mFume3 3.8s linear 2.6s infinite}
@keyframes mFume1{0%{translate:0 0;scale:.5;opacity:0}26%{opacity:.9}
100%{translate:-46px -62px;scale:1.5;opacity:0}}
@keyframes mFume2{0%{translate:0 0;scale:.45;opacity:0}26%{opacity:.75}
100%{translate:-72px -74px;scale:1.6;opacity:0}}
@keyframes mFume3{0%{translate:0 0;scale:.55;opacity:0}26%{opacity:.8}
100%{translate:-24px -70px;scale:1.4;opacity:0}}
.m-cable{fill:none;stroke:#151b19;stroke-width:8;stroke-linecap:round}
.m-torch{animation:mJit .17s steps(2,end) infinite}
@keyframes mJit{from{translate:0 0}to{translate:.7px -.5px}}
.m-arc{transform-box:fill-box;transform-origin:center;animation:mFlick .2s steps(3,end) infinite}
@keyframes mFlick{0%{opacity:.72;scale:1}33%{opacity:1;scale:1.13}66%{opacity:.58;scale:.93}}
.m-core{fill:#fffdf4;transform-box:fill-box;transform-origin:center;
animation:mCore .13s steps(2,end) infinite}
@keyframes mCore{from{scale:1;opacity:.9}to{scale:1.5;opacity:1}}
.m-ray{stroke:#ffdca4;stroke-width:1.8;stroke-linecap:round;
animation:mRay var(--t,1.1s) linear var(--dl,0s) infinite}
.m-ray.lime{stroke:#e8ffbe}
@keyframes mRay{0%{translate:0 0;opacity:0}10%{opacity:1}70%{opacity:.85}
100%{translate:var(--r,90px) 0;opacity:0}}
.m-em{fill:#ffc978;transform-box:fill-box;transform-origin:center}
.m-em.e1{animation:mEm1 var(--t) cubic-bezier(.25,.5,.55,1) var(--dl) infinite}
.m-em.e2{animation:mEm2 var(--t) cubic-bezier(.25,.5,.55,1) var(--dl) infinite}
.m-em.e3{animation:mEm3 var(--t) cubic-bezier(.25,.5,.55,1) var(--dl) infinite}
.m-em.e4{animation:mEm4 var(--t) cubic-bezier(.25,.5,.55,1) var(--dl) infinite}
.m-em.e5{animation:mEm5 var(--t) cubic-bezier(.25,.5,.55,1) var(--dl) infinite}
@keyframes mEm1{0%{translate:0 0;scale:1;opacity:0}10%{opacity:1}
46%{translate:-70px -30px}100%{translate:-138px 42px;scale:.45;opacity:0}}
@keyframes mEm2{0%{translate:0 0;scale:1;opacity:0}10%{opacity:1}
46%{translate:-44px -40px}100%{translate:-92px 30px;scale:.45;opacity:0}}
@keyframes mEm3{0%{translate:0 0;scale:1;opacity:0}10%{opacity:1}
46%{translate:-96px -14px}100%{translate:-176px 50px;scale:.4;opacity:0}}
@keyframes mEm4{0%{translate:0 0;scale:1;opacity:0}10%{opacity:1}
46%{translate:-30px -46px}100%{translate:-58px 38px;scale:.5;opacity:0}}
@keyframes mEm5{0%{translate:0 0;scale:1;opacity:0}10%{opacity:1}
46%{translate:-120px -34px}100%{translate:-204px 38px;scale:.4;opacity:0}}
.m-hr{fill:none;stroke:#ffcf92;stroke-width:1.4;stroke-linecap:round;opacity:0;
animation:mHeatRise var(--t,2.2s) linear var(--dl,0s) infinite}
@keyframes mHeatRise{0%{translate:var(--x) 0;opacity:0}22%{opacity:.42}
100%{translate:var(--x) -46px;opacity:0}}
/* ③ MEDICAL ── 走査して、履歴を書き残してから運ぶ
トレイは間隔 220 で右から左へ流れ続ける(止まらない = 全数検査のライン)。
7 秒の周期で、真ん中に来た 42-58% に走査、52% からバーコード、
64% から記録行が書かれ、末尾で薄れて次の記録に席を譲る。 */
.d-run{animation:dRun 7s linear infinite}
@keyframes dRun{to{translate:-220px 0}}
.d-dash{stroke:#aaff00;stroke-opacity:.3;stroke-width:2;stroke-dasharray:12 10;
animation:dDash 1.1s linear infinite}
@keyframes dDash{to{stroke-dashoffset:-22}}
.d-cone{fill:url(#dCone);animation:dCone 2.6s ease-in-out infinite alternate}
@keyframes dCone{from{opacity:.55}to{opacity:1}}
.d-led{fill:#aaff00;animation:blink 1.3s steps(1) infinite}
.d-live{fill:#ff4a2e;animation:blink 1.7s steps(1) infinite}
.d-scan{opacity:0;animation:dScan 7s linear infinite}
@keyframes dScan{0%,42%{translate:184px 0;opacity:0}45%{opacity:1}
56%{translate:262px 0;opacity:1}59%,100%{translate:262px 0;opacity:0}}
.d-rule{stroke:#6d7773;stroke-opacity:.3;stroke-width:1}
.d-bars rect{fill:#aeb8b3;transform-box:fill-box;transform-origin:bottom;scale:1 1;
animation:dBar 7s steps(1,end) infinite;animation-delay:calc(var(--i) * .026s)}
@keyframes dBar{0%,50%{scale:1 0}56%,86%{scale:1 1}92%,100%{scale:1 0}}
.d-rows rect{fill:#aaff00}
.d-row{transform-box:fill-box;transform-origin:left;scale:1 1;
animation:dRow 7s ease-out infinite;animation-delay:calc(var(--i) * .11s)}
@keyframes dRow{0%,58%{scale:0 1;opacity:.9}66%,86%{scale:1 1;opacity:.9}
100%{scale:1 1;opacity:0}}
.d-row rect+rect{fill:#8f9a94}
/* ④ LOGISTICS ── 灯りの落ちた棚のあいだを、無人搬送車が走る
棚は間隔 140 で、点いている照明は 1 つおき = 周期 280。
だから translate -280 でぴたりと同じ絵に戻る(継ぎ目が出ない)。
車体は止めて背景を流す = カメラが車体に付いている。 */
.l-back{animation:lBack 13s linear infinite}
@keyframes lBack{to{translate:-280px 0}}
.l-wire{stroke:#39423d;stroke-opacity:.45;stroke-width:1.2}
.l-pal{fill:#0f1513;stroke:#f1f3ef;stroke-opacity:.055;stroke-width:1}
.l-guide{fill:none;stroke:#aaff00;stroke-opacity:.42;stroke-width:1.6;stroke-dasharray:14 12;
animation:lGuide 1s linear infinite}
@keyframes lGuide{to{stroke-dashoffset:26}}
.l-head{fill:url(#lBeam)}
.l-tape{fill:none;stroke:#aaff00;stroke-opacity:.3;stroke-width:2}
.l-beacon{fill:#aaff00;animation:blink 1.15s steps(1) infinite}
.l-bob{animation:lBob 1.7s ease-in-out infinite alternate}
@keyframes lBob{from{translate:0 0}to{translate:0 -1.6px}}
.l-wheel{transform-box:fill-box;transform-origin:center;animation:lSpin 1.05s linear infinite}
.l-wheel circle{stroke:#8e9994;stroke-opacity:.35;stroke-width:1.2}
.l-wheel path{stroke:#8e9994;stroke-opacity:.28;stroke-width:1.2}
@keyframes lSpin{to{rotate:360deg}}
.l-target path{fill:none;stroke:#aaff00;stroke-opacity:.6;stroke-width:1.6}
.l-pulse{fill:#aaff00;transform-box:fill-box;transform-origin:center;
animation:lPulse 1.9s ease-out infinite}
@keyframes lPulse{0%{scale:.4;opacity:.9}70%{scale:2.4;opacity:0}100%{scale:2.4;opacity:0}}
/* ── 画面外では止める(この 2 行は必ずブロックの最後)──────────────────
各部品の `animation:` 一括指定は animation-play-state を running に戻してしまう。
同じ強さの規則は後勝ちなので、先頭に書くと素通りする。さらに .d-bars rect や
.m-em.e1 は より強いので、後ろに置くだけでも 24 本が素通りしていた。
id を 1 つ足して確実に勝たせている(どちらも実測で気づいた)。 */
#applications .cell-art *{animation-play-state:var(--play)}
#applications .cell-art::before{animation-play-state:var(--play)}
/* ── 数字(新設): 数え上がる + 波形が流れる ──────────────────────────── */
.numbers{position:relative;overflow:hidden;padding:15vh 5vw 0;border-top:1px solid #ffffff1f}
.num-back{position:absolute;inset:0;z-index:0;opacity:.5;filter:grayscale(1)}
.numbers>*{position:relative;z-index:1}
.numbers h2{font:500 clamp(34px,4.6vw,64px)/1.24 var(--display);letter-spacing:-.03em;margin:18px 0 0}
.num-grid{margin-top:clamp(44px,6vw,80px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
gap:clamp(18px,2.4vw,34px)}
.num-grid article{display:flex;flex-direction:column;gap:12px;padding:26px 0 0;border-top:1px solid #ffffff2e}
.num-grid .cnt{font:500 clamp(30px,3.4vw,50px)/1.1 var(--display);color:var(--green);
letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.num-grid span{font-size:15px;letter-spacing:.06em}
.num-grid em{font-style:normal;font-size:12px;opacity:.55;line-height:1.7}
.wave{display:block;width:100%;height:clamp(70px,9vw,120px);margin-top:clamp(40px,5vw,70px);overflow:hidden}
.wave path{fill:none;stroke:var(--green);stroke-width:2;stroke-opacity:.55}
.wave-run{animation:waveRun 6s linear infinite}
@keyframes waveRun{from{translate:0}to{translate:-300px}}
/* ── 導入の流れ(新設)────────────────────────────────────────────────── */
.flow{position:relative;overflow:hidden;padding:15vh 5vw;border-top:1px solid #ffffff1f}
.flow-back{position:absolute;inset:0;z-index:0;opacity:.4;filter:grayscale(1)}
.flow>*{position:relative;z-index:1}
.flow h2{font:500 clamp(34px,4.6vw,64px)/1.24 var(--display);letter-spacing:-.03em;margin:18px 0 0}
.flow-steps{list-style:none;margin:clamp(44px,6vw,80px) 0 0;padding:0;display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.4vw,34px)}
.flow-steps li{position:relative;display:flex;flex-direction:column;gap:14px;padding:28px 0 0}
.flow-steps li::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:#ffffff2e}
.flow-steps li::after{content:"";position:absolute;left:0;top:0;height:1px;width:0;background:var(--green);
transition:width 1.1s cubic-bezier(.22,.68,.24,1) var(--d,0s)}
.flow-steps li.seen::after{width:100%}
.flow-steps b{font:600 12px var(--body);letter-spacing:.2em;color:var(--green)}
.flow-steps h3{margin:0;font:500 clamp(19px,2.1vw,26px)/1.45 var(--display);letter-spacing:-.01em}
.flow-steps p{margin:0;font-size:13px;line-height:1.95;opacity:.66}
/* ── CTA ─────────────────────────────────────────────────────────────── */
.orbit-contact{position:relative;overflow:hidden}
.orbit-contact::before{content:"";position:absolute;inset:-40%;z-index:0;opacity:.16;
background:repeating-linear-gradient(-45deg,#050606 0 10px,#0000 10px 30px);
animation:stripes 9s linear infinite}
@keyframes stripes{to{translate:42.43px 0}}
.orbit-contact>*{position:relative;z-index:1}
.orbit-contact h2{margin:14px 0 30px} /* ★下マージンを 0 にすると見出しとボタンの隙間が 0px になり、
spacing 検査が 5 幅すべてで赤になる(実測でこの手で 5 件出した)。
上マージンは shared-quality.css の .eyebrow + h2 が !important で 22px に握っている。 */
.orbit-contact a{background:linear-gradient(#050606,#050606) no-repeat left center/0 100%;
transition:background-size .55s cubic-bezier(.22,.68,.24,1),color .45s ease}
/* ── 触ったときだけの演出(スマホで居座らせない)───────────────────── */
@media(hover:hover){
.orbit-index>a:hover{padding-left:18px}
.factory-grid article:hover .cell-art::after{opacity:.4}
.factory-grid article:hover::after{transform:scaleX(1)}
.orbit-contact a:hover{background-size:100% 100%;color:var(--green)}
.axes-rig:hover{border-color:#aaff0080}
}
@media(max-width:1100px){
.num-grid,.flow-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,3vw,30px)}
}
@media(max-width:900px){
.axes{grid-template-columns:1fr;gap:38px}
.band-copy{max-width:none;right:5vw}
.line-band::after{background:linear-gradient(180deg,#050606cc 0,#05060699 45%,#050606e6 100%)}
}
@media(max-width:720px){
.void-hero{--chrome:120px}
.hud .tl,.hud .tr{top:80px}
.hud-live{left:56px;top:84px}
.hud-axis{right:56px;top:84px}
.hud-cyc{left:56px}
.line-band{height:auto;min-height:0;padding:78px 0 0}
.line-band video{position:relative;height:46vh;min-height:260px}
.line-band::after{inset:auto 0 0 0;height:0}
.band-copy{position:relative;top:auto;translate:none;left:auto;margin:0;padding:32px 20px 84px;max-width:none}
.band-meter{right:20px;bottom:26px;height:44px}
.axes{padding:80px 20px}
.axis-list li{grid-template-columns:44px 1fr auto;font-size:12px}
.numbers,.flow{padding-left:20px;padding-right:20px}
.numbers{padding-top:80px}
.flow{padding-block:80px}
.num-grid,.flow-steps{grid-template-columns:1fr}
}
@media(max-width:480px){
.hud .c{width:18px;height:18px}
.hud b{font-size:11px;letter-spacing:.12em}
.hud-live{left:48px}
.hud-axis{right:48px}
.hud-cyc{left:48px}
}
/* 幅 320px では上段の 2 つの計器表示が 7px 重なることを実測したので、
右側を下段へ落とす。aria-hidden の飾りなのでゲートは見ていない = 目で測るしかない箇所。 */
@media(max-width:380px){
.hud-axis{top:auto;bottom:calc(var(--chrome) + 28px);right:20px}
.hud-cyc{left:20px}
.hud .bl,.hud .br{bottom:calc(var(--chrome) + 18px)}
.hud .bl{left:20px}
.hud .br{right:20px}
}
/*/MOTION-20260820*/