@charset "utf-8";
/* ============================================================
RIVETMESH FREIGHT / 制作例09
地 #d8dadd ・ 文字 #111418 ・ 差し色 #dfff32(ライム)・ 暗い節 #111418
見出し Bebas Neue / 本文 IBM Plex Mono / 写真はモノクロ統一
------------------------------------------------------------
設計の約束
1. 出現演出に opacity を使わない。持ち上げは translate、覆いは clip-path。
2. ループの動きは translate / rotate / scale / stroke-* に載せる。
触ったときの動きは transform に載せる。同じ property に重ねない。
3. 触る演出は全て @media(hover:hover) の中に置く。
4. ライムは暗い地の上でだけ使う。明るい地の上では黒か濃いグレーにする。
5. 見出しは
で宣言した位置でしか折らない。
大きさは min(上限, 12vw, 92cqi / 行の最大文字数) で決める。
6. ★隠す指定は必ず html.js の中に置く。JS が落ちた画面では
「隠したまま出す係(site.js)」が居ないので、本文が永久に消える。
============================================================ */
*{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}
svg line{fill:none}
.demo{position:fixed;z-index:99;left:12px;bottom:12px;display:flex;gap:12px;align-items:center;padding:9px 13px;border:1px solid currentColor;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px);font:600 12px/1 var(--body);letter-spacing:.08em;border-radius:999px}
.demo a{text-decoration:underline}
.skip{position:fixed;left:8px;top:-80px;z-index:120;background:#fff;color:#000;padding:10px}
.skip:focus{top:8px}
:focus-visible{outline:3px solid #4f8cff;outline-offset:4px}
.eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;margin:0}
/* 飛び先の天が固定ヘッダー(56px + 62px)の下に潜らないようにする。
節ごとに書いていたので .elements と .network-index に指定が無く、
TRACK A LOAD で飛んだ先の見出しがヘッダーに隠れていた。 */
#main main>section{scroll-margin-top:132px}
/* 作者が宣言した改行。狭い画面でだけ効かせる(下の @media(max-width:380px))。
ブラウザに折らせると「26 JUL」「CONTROL DESK」が語の途中で割れる(320px 実測)。 */
.hd-br{display:none}
:root{
--bg:#d8dadd;
--panel:#e6e8ea;
--ink:#111418;
--night:#111418;
--deep:#0e1116;
--paper:#e8eaed;
--lime:#dfff32;
--dim:#98a1ab;
--dim-ink:#4d545c;
--edge:#2a3038;
--body:"IBM Plex Mono",monospace;
--display:"Bebas Neue","Arial Narrow",sans-serif;
}
/* ------------------------------------------------------------
出現演出。opacity は使わない(IntersectionObserver を盲目にするため)。
IntersectionObserver も使わない(clip-path を持つ要素は永久に見えない)。
合図は site.js の scroll + requestAnimationFrame。
★隠す側だけを :where(html.js) で包む。site.js が落ちたときは
隠す指定ごと消えて全文が読める(2026-08-26 実測: 包む前は JS 無効で
大見出しもバッジも消えて灰色の空白になっていた)。
★包みに :where() を使うのは詳細度を 0 に保つため。
html.js .rise と書くと (0,2,1) になり .rise.seen (0,2,0) に勝ってしまい、
今度は「JS が動いていても永久に出てこない」に化ける。
------------------------------------------------------------ */
:where(html.js) .rise{translate:0 24px;clip-path:inset(0 0 100% 0)}
.rise.seen{translate:none;clip-path:inset(0)}
html.anim .rise.seen{transition:translate .8s cubic-bezier(.16,.7,.24,1) var(--d,0s),clip-path .95s cubic-bezier(.16,.7,.24,1) var(--d,0s)}
.rise.done{clip-path:none}
/* 上下に並ぶ文字どうし(見出しの上の小見出し・見出しの下のリード)は
持ち上げない。ずらして持ち上げると、下から上へ戻したときに
上の行だけ遅れて沈み、行間が 22px から 8px まで縮む(実測)。
文字の並びは覆いを開けるだけにして、隙間を 1px も動かさない。 */
:where(html.js) .rise-wipe{clip-path:inset(0 0 100% 0)}
.rise-wipe.seen{clip-path:inset(0)}
html.anim .rise-wipe.seen{transition:clip-path .95s cubic-bezier(.16,.7,.24,1) var(--d,0s)}
.rise-wipe.done{clip-path:none}
/* ------------------------------------------------------------
固定ヘッダー。地は不透明(半透明だと後ろの巨大な文字が透けて汚れる)。
下端の細い線がスクロールの進み具合 = 運行の進捗を表す。
------------------------------------------------------------ */
.relay-head{height:62px;position:fixed;z-index:20;inset:0 0 auto;background:var(--bg);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 25px;border-bottom:1px solid var(--ink);font-size:12px}
.relay-head>*{min-width:0}
.relay-head>a{flex:0 1 auto;letter-spacing:.06em}
.relay-head .live{display:inline-flex;align-items:center;gap:8px;margin:auto;color:#245544;letter-spacing:.08em}
.relay-head .live i{display:block;width:8px;height:8px;background:#245544;border-radius:50%;animation:blip 2.2s ease-in-out infinite}
.relay-head button{background:var(--lime);border:0;padding:12px 18px;letter-spacing:.06em;cursor:pointer}
.relay-head button,.relay-head>a{flex:0 0 auto;white-space:nowrap}
.relay-head::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:3px;background:var(--ink);transform:scaleX(var(--p,0));transform-origin:left}
/* ============================================================
1. ヒーロー / AWARD INTRO 地 #d8dadd
============================================================ */
.award-intro{padding:150px 4vw 74px;background:var(--bg)}
.badge{display:inline-block;border:1px solid;border-radius:999px;padding:10px 16px;margin:0}
.award-intro h1{font:clamp(130px,19vw,262px)/.8 var(--display);letter-spacing:-.03em;margin:.22em 0 .18em}
.meta{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,72px)}
.meta dl{display:grid;grid-template-columns:repeat(3,1fr);margin:0;align-content:start}
.meta dl div{border-left:1px solid;padding-left:16px}
.meta dt{font-size:12px;letter-spacing:.1em}
.meta dd{font:70px var(--display);margin:10px 0 0}
.meta-copy p{line-height:1.9;margin:0}
.scope{margin:clamp(18px,2.2vw,28px) 0 0;background:var(--night);padding:14px 14px 11px;border:1px solid var(--ink)}
.hero-scope{width:100%;height:auto;display:block;aspect-ratio:480/170}
.sc-grid line{stroke:#6e757c;stroke-width:1}
.sc-line{fill:none;stroke:var(--lime);stroke-width:4;stroke-linejoin:round;stroke-dasharray:520;--dash:520;animation:draw 7s ease-out infinite}
.sc-now line{stroke:var(--paper);stroke-width:2}
.sc-now rect{fill:var(--lime)}
.sc-now{--x0:0px;--x1:480px;animation:slidex 7s linear infinite}
.scope figcaption{color:var(--dim);font-size:12px;letter-spacing:.1em;margin-top:9px}
/* ============================================================
2. ルートポスター / ROUTE POSTER 地 #0e1116
写真の上を、線と一緒に荷物(四角)が走る。
============================================================ */
.route-poster{background:var(--deep);padding:0 0 clamp(30px,4vw,60px)}
.poster-frame{position:relative;height:920px;max-width:1220px;margin:0 auto clamp(26px,3vw,44px);overflow:hidden;background:var(--deep)}
.poster-frame>img{filter:grayscale(1) contrast(1.2);opacity:.82}
.poster-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#1e374077,transparent);pointer-events:none}
.route-map{position:absolute;inset:0;width:100%;height:100%;z-index:2}
.rt-line{fill:none;stroke:var(--lime);stroke-width:5;stroke-dasharray:1400;stroke-dashoffset:1400;animation:route 5s linear infinite}
.rt-hubs .dot{fill:var(--lime)}
.rt-hubs .ring{fill:none;stroke:var(--lime);stroke-width:5;transform-box:fill-box;transform-origin:center;animation:beacon 2.6s ease-out infinite;animation-delay:var(--i,0s)}
.rt-crate{fill:var(--lime);offset-path:path("M40 460 C180 100 340 550 520 230 S780 110 960 360");offset-rotate:0deg;animation:haul 5s linear infinite}
.poster-code{position:absolute;z-index:3;left:20px;top:20px;background:var(--lime);padding:10px 12px;color:var(--ink);margin:0;letter-spacing:.08em}
.poster-slip{position:absolute;z-index:3;right:20px;bottom:20px;width:min(320px,calc(100% - 40px));background:#0e1116e6;border:1px solid var(--lime);padding:16px 18px}
.ps-head{margin:0 0 12px;color:var(--lime);font:24px var(--display);letter-spacing:.1em}
.poster-slip dl{display:grid;grid-template-columns:auto 1fr;gap:7px 14px;margin:0;font-size:12px}
.poster-slip dl div{display:contents}
.poster-slip dt{color:var(--dim);letter-spacing:.06em}
.poster-slip dd{margin:0;color:var(--paper);text-align:right;letter-spacing:.04em}
.poster-legend{max-width:78ch;margin:0 auto;padding:0 4vw;color:var(--paper);line-height:2}
/* ============================================================
3. 幹線ネットワーク / TRUNK NETWORK 地 #e6e8ea
図は暗い盤(= 管制画面)の中に置く。ライムはここでだけ成立する。
============================================================ */
.net{padding:12vh 4vw;background:var(--panel)}
.net-head{max-width:1320px;margin:0 auto clamp(30px,4vw,58px);display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(22px,4vw,64px);align-items:end}
.nh-title{container-type:inline-size}
.net h2{font-family:var(--display);line-height:1.1;letter-spacing:.01em;margin:18px 0 0}
.nh-lead{line-height:2;margin:0;max-width:56ch}
.net-figure{max-width:1320px;margin:0 auto;background:var(--night);border:1px solid var(--ink);padding:clamp(16px,2.2vw,32px)}
.nm{width:100%;height:auto;display:block}
.nm-wide{aspect-ratio:1000/420}
.nm-tall{display:none;aspect-ratio:340/620}
.nm-grid line{stroke:#6e757c;stroke-width:1}
.nm-drift line{stroke:#6e757c;stroke-width:1}
.nm-drift{--x0:0px;--x1:-60px;animation:slidex 6s linear infinite}
.nm-branch path{fill:none;stroke:#7d848b;stroke-width:3}
/* 幹線は「ずっと描き直す」のではなく、節が出てきたときに 1 回だけ引く。
無限に引き直すと、時間の半分は線が途中までしか無く、図が壊れて見える。
★引く前の状態(線が無い)も html.js の中に置く。JS が落ちた画面では
引く係が居ないため、幹線が永久に消えたままになる。 */
.nm-trunk{fill:none;stroke:var(--paper);stroke-width:7;stroke-linecap:round;stroke-dasharray:870;--dash:870}
.nm-trunk-v{stroke-dasharray:510;--dash:510}
:where(html.js) .nm-trunk{stroke-dashoffset:var(--dash)}
.net-figure.seen .nm-trunk{stroke-dashoffset:0;transition:stroke-dashoffset 1.7s cubic-bezier(.2,.7,.2,1) .25s}
.nm-sub circle{fill:#7d848b}
.nm-hub .core{fill:var(--lime)}
.nm-hub .ring{fill:none;stroke:var(--lime);stroke-width:5;transform-box:fill-box;transform-origin:center;animation:beacon 2.8s ease-out infinite;animation-delay:var(--i,0s)}
.nm-crate{fill:var(--lime)}
.nm-crate.go{--x0:70px;--x1:930px;animation:slidex 11s linear infinite}
.nm-crate.back{fill:var(--paper);--x0:930px;--x1:70px;animation:slidex 14s linear infinite;animation-delay:-4s}
.nm-crate-v{fill:var(--lime);--y0:60px;--y1:560px;animation:slidey 11s linear infinite}
.nm-scan{stroke:var(--lime);stroke-width:2;--x0:0px;--x1:1000px;animation:slidex 9s linear infinite}
.net-figure figcaption{color:var(--dim);font-size:12px;line-height:1.8;margin-top:14px}
.net-hubs{list-style:none;margin:clamp(22px,3vw,42px) 0 0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--ink);border:1px solid var(--ink)}
.net-hubs li{background:var(--panel);padding:clamp(15px,1.8vw,24px)}
.net-hubs b{display:block;font:34px var(--display);letter-spacing:.05em}
.net-hubs span{display:block;margin-top:3px;font-size:14px}
.net-hubs em{display:block;margin-top:10px;font-style:normal;font-size:12px;color:var(--dim-ink);letter-spacing:.04em}
.net-spec{display:grid;grid-template-columns:repeat(4,1fr);margin:clamp(18px,2.4vw,30px) 0 0;border-top:1px solid var(--ink)}
.net-spec div{padding:22px 16px;border-right:1px solid #11141826}
.net-spec div:last-child{border-right:0}
.net-spec dt{font-size:12px;letter-spacing:.1em;color:var(--dim-ink)}
.net-spec dd{margin:8px 0 0;font:26px var(--display)}
/* ============================================================
4. コントロール要素 / CONTROL ELEMENTS 地 #111418
============================================================ */
.elements{padding:12vh 4vw;background:var(--night);color:var(--paper)}
figure{margin:0}
.elements .shot,.network-index .shot{max-width:1220px;margin:0 auto clamp(34px,5vw,64px);aspect-ratio:3/2;overflow:hidden}
.shot img{filter:grayscale(1) contrast(1.2)}
.el-head{container-type:inline-size;max-width:1220px;margin:0 auto clamp(36px,5vw,72px)}
.elements h2,.relay-cta h2{font-family:var(--display);line-height:1.16;margin:0}
.el-lead{max-width:54ch;line-height:1.95;margin:clamp(18px,2.4vw,30px) 0 0;color:#c3c9d0}
.element-list{max-width:1220px;margin:0 auto}
.element-list article{display:grid;grid-template-columns:76px 62px 1fr 1.15fr;align-items:center;gap:0 clamp(14px,1.6vw,26px);padding:26px 0;border-top:1px solid #ffffff33;cursor:crosshair}
/* 一覧の行はキーボードでも選べる(tabindex + Enter / Space。site.js)。
選んでいる行が分かるように、輪郭は内側へ引く(外へ出すと隣の行と触れる)。 */
.element-list article:focus-visible{outline:3px solid var(--lime);outline-offset:-3px}
.element-list b{font:22px var(--display);letter-spacing:.08em;color:var(--dim)}
.element-list .ic{width:52px}
.element-list .ic svg{width:100%;height:auto;display:block}
.element-list h3{font:56px var(--display);margin:0;letter-spacing:.02em}
.element-list p{margin:0;line-height:1.85;font-size:14px;color:#c3c9d0}
.ic-lane line{stroke:#7d848b;stroke-width:3}
.ic-run{fill:var(--lime);--x0:0px;--x1:35px;animation:slidex 3.2s linear infinite}
.ic-bar rect{fill:#c3c9d0}
.ic-scan{stroke:var(--lime);stroke-width:3;--x0:0px;--x1:40px;animation:slidex 2.6s linear infinite}
.ic-tri{fill:none;stroke:#c3c9d0;stroke-width:3;stroke-linejoin:round}
.ic-ex{stroke:var(--lime);stroke-width:4;transform-box:fill-box;transform-origin:center;animation:blip 1.6s ease-in-out infinite}
.ic-ex-dot{fill:var(--lime)}
/* ページで一番目立つ色面。待機文だけを出しておくのは投資の空振りなので、
初めから 01 の中身を出しておき、行を選ぶと切り替わる。
高さは 5 行ぶんで固定(切り替えのたびに下の余白が跳ねないように)。 */
.log{background:var(--lime);color:var(--ink);padding:25px;min-height:170px;font:13px/1.8 var(--body);white-space:pre-wrap;max-width:1220px;margin:clamp(28px,3.4vw,48px) auto 0}
/* ============================================================
5. つなぎ方 / INTEGRATION 地 #e6e8ea
============================================================ */
.integration{padding:12vh 4vw;background:var(--panel)}
.integration>header{max-width:1320px;margin:0 auto clamp(34px,5vw,68px);display:grid;grid-template-columns:1fr 1.55fr;gap:clamp(22px,4vw,64px);align-items:end}
.ig-title{container-type:inline-size}
.integration h2{font-family:var(--display);line-height:1.14;margin:12px 0 0}
.ig-lead{line-height:2;max-width:62ch;margin:0}
.ig-steps{list-style:none;margin:0 auto;padding:0;max-width:1320px;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,22px)}
.ig-steps li{background:var(--night);color:var(--paper);padding:clamp(24px,2.6vw,38px);display:flex;flex-direction:column;gap:12px;container-type:inline-size}
.ig-steps b{font:44px var(--display);color:var(--lime);line-height:1}
.ig-steps .ic{width:48px}
.ig-steps .ic svg{width:100%;height:auto;display:block}
.ig-steps h3{font:28px var(--display);margin:0;letter-spacing:.02em}
.ig-steps p{line-height:1.95;margin:0;font-size:15px}
.ig-steps em{margin:auto 0 0;padding-top:14px;border-top:1px solid #ffffff2e;font-style:normal;font-size:13px;color:var(--lime)}
.ic-plug rect{fill:none;stroke:#c3c9d0;stroke-width:3}
.ic-wire{stroke:var(--lime);stroke-width:4;stroke-dasharray:5 5;animation:flow 1.6s linear infinite}
.ic-stack rect,.ic-stack2 rect{fill:#c3c9d0}
.ic-stack2 rect{fill:var(--lime)}
.ic-stack2{--y0:5px;--y1:0px;animation:slidey 2.8s ease-in-out infinite alternate}
.ic-screen{fill:none;stroke:#c3c9d0;stroke-width:3}
.ic-sweep{stroke:var(--lime);stroke-width:3;--x0:0px;--x1:30px;animation:slidex 2.4s linear infinite}
.ic-alert{fill:var(--lime);transform-box:fill-box;transform-origin:center;animation:blip 1.8s ease-in-out infinite}
.ig-spec{display:grid;grid-template-columns:repeat(4,1fr);margin:clamp(20px,2.4vw,32px) auto 0;max-width:1320px;border-top:1px solid var(--ink)}
.ig-spec div{padding:24px 16px;border-right:1px solid #11141826}
.ig-spec div:last-child{border-right:0}
.ig-spec dt{font-size:12px;letter-spacing:.1em;color:var(--dim-ink)}
.ig-spec dd{margin:8px 0 0;font:26px var(--display)}
/* ============================================================
6. 車両と設備 / FLEET 地 #14181d
絵は上の帯、文字は下の帯。見出しの下マージンで絵が押し上がらないようにする。
============================================================ */
.fleet{padding:12vh 4vw;background:#14181d;color:var(--paper)}
.fleet-head{max-width:1320px;margin:0 auto clamp(30px,4vw,58px);display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(22px,4vw,64px);align-items:end}
.fh-title{container-type:inline-size}
.fleet h2{font-family:var(--display);line-height:1.1;margin:18px 0 0}
.fh-lead{line-height:2;margin:0;max-width:56ch;color:#c3c9d0}
.fleet-grid{max-width:1320px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,24px)}
.fleet-card{background:var(--deep);border:1px solid var(--edge);display:flex;flex-direction:column}
.truck{background:var(--deep);padding:clamp(16px,1.8vw,24px) clamp(12px,1.4vw,20px) 4px}
.truck svg{width:100%;height:auto;display:block}
.fc-copy{padding:clamp(18px,2vw,28px);display:flex;flex-direction:column;gap:12px;flex:1;container-type:inline-size;border-top:1px solid var(--edge)}
.fc-copy h3{font:30px var(--display);margin:0;letter-spacing:.02em}
.fc-copy p{margin:0;line-height:1.95;font-size:14px;color:#c3c9d0}
.fc-copy dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:auto 0 0;padding-top:14px;border-top:1px solid var(--edge);font-size:12px}
.fc-copy dl div{display:contents}
.fc-copy dt{color:var(--dim);letter-spacing:.06em}
.fc-copy dd{margin:0;text-align:right;color:var(--lime);letter-spacing:.04em}
.tk-road{stroke:#6e757c;stroke-width:2;stroke-dasharray:14 10;animation:flow 2.4s linear infinite}
.tk-cab{fill:none;stroke:var(--paper);stroke-width:4;stroke-linejoin:round}
.tk-win{stroke:#7d848b;stroke-width:3}
.tk-deck,.tk-box{fill:none;stroke:var(--paper);stroke-width:4;stroke-linejoin:round}
.tk-gate{fill:none;stroke:#7d848b;stroke-width:3}
.tk-seam{stroke:#6e757c;stroke-width:2}
.tk-load rect{fill:var(--lime)}
.tk-load{--y0:0px;--y1:-3px;animation:slidey 2.2s ease-in-out infinite alternate}
.tk-pallet rect{fill:#7d848b}
.tk-wing{fill:#6a7279;stroke:var(--lime);stroke-width:4;transform-box:fill-box;transform-origin:top left;animation:wing 5.5s ease-in-out infinite}
.tk-cool line{stroke:var(--lime);stroke-width:3}
.tt-tube{fill:none;stroke:var(--paper);stroke-width:3}
.tt-fill{fill:var(--lime);transform-box:fill-box;transform-origin:bottom;animation:temp 4.4s ease-in-out infinite}
.tk-wheel circle{fill:none;stroke:var(--paper);stroke-width:4}
.tk-wheel line{stroke:#7d848b;stroke-width:3}
.tk-wheel{transform-box:fill-box;transform-origin:center;animation:wheel 1.9s linear infinite;animation-delay:var(--i,0s)}
.fleet-spec{max-width:1320px;display:grid;grid-template-columns:repeat(4,1fr);margin:clamp(20px,2.4vw,32px) auto 0;border-top:1px solid var(--edge)}
.fleet-spec div{padding:24px 16px;border-right:1px solid var(--edge)}
.fleet-spec div:last-child{border-right:0}
.fleet-spec dt{font-size:12px;letter-spacing:.1em;color:var(--dim)}
.fleet-spec dd{margin:8px 0 0;font:26px var(--display);color:var(--lime)}
/* ============================================================
7. 安全と品質 / SAFETY DESK 地 #d8dadd
24 時間の帯は暗い盤の中。ライムの印が 24 秒かけて 1 日ぶん進む。
============================================================ */
.safety{padding:12vh 4vw;background:var(--bg)}
.safety-head{max-width:1320px;margin:0 auto clamp(30px,4vw,58px);display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(22px,4vw,64px);align-items:end}
.sh-title{container-type:inline-size}
.safety h2{font-family:var(--display);line-height:1.1;margin:18px 0 0}
.sh-lead{line-height:2;margin:0;max-width:56ch}
.tl{max-width:1320px;margin:0 auto;background:var(--night);border:1px solid var(--ink);padding:clamp(16px,2.2vw,30px)}
.tl-svg{width:100%;height:auto;display:block;aspect-ratio:1000/96}
.tl-axis{stroke:var(--paper);stroke-width:3}
.tl-tick line{stroke:#7d848b;stroke-width:2}
.tl-ev line{stroke:#7d848b;stroke-width:2}
.tl-ev circle{fill:var(--paper)}
.tl-now line{stroke:var(--lime);stroke-width:3}
.tl-now rect{fill:var(--lime)}
.tl-now{--x0:0px;--x1:920px;animation:slidex 24s linear infinite}
/* 時刻のラベルは目盛りの真上に置く。両端揃えでは 08 が 1/3 の位置に来て、
図の 8 時の目盛りと 3% ずれる(= 図と数字が食い違う)。 */
.tl-hours{position:relative;height:16px;color:var(--dim);font-size:12px;letter-spacing:.16em;margin-top:11px}
.tl-hours span{display:block;position:absolute;top:0;left:var(--l,0);transform:translateX(-50%)}
.safe-steps{list-style:none;max-width:1320px;margin:clamp(24px,3vw,44px) auto 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(13px,1.6vw,22px)}
.safe-steps li{background:var(--panel);border-top:3px solid var(--ink);padding:clamp(17px,2vw,26px);container-type:inline-size}
.safe-steps b{display:inline-block;background:var(--ink);color:var(--lime);font:22px var(--display);letter-spacing:.08em;padding:6px 11px}
.safe-steps h3{font:26px var(--display);margin:13px 0 0;letter-spacing:.02em}
.safe-steps p{font-size:14px;line-height:1.95;margin:10px 0 0}
.safe-count{max-width:1320px;display:grid;grid-template-columns:repeat(3,1fr);margin:clamp(20px,2.4vw,32px) auto 0;border-top:1px solid var(--ink)}
.safe-count div{padding:24px 16px;border-right:1px solid #11141826}
.safe-count div:last-child{border-right:0}
.safe-count dt{font-size:12px;letter-spacing:.1em;color:var(--dim-ink)}
.safe-count dd{margin:8px 0 0;font:44px var(--display)}
/* ============================================================
8. 本日の便 / LANE INDEX 地 #111418
============================================================ */
.network-index{padding:12vh 4vw;background:var(--night);color:var(--paper)}
.ni-eyebrow{max-width:1320px;margin:0 auto;font-size:12px;letter-spacing:.16em;color:var(--dim)}
.network-index ol{list-style:none;padding:0;max-width:1320px;margin:14px auto 0}
.network-index li{display:grid;grid-template-columns:1fr 140px 190px 190px;align-items:center;gap:0 clamp(12px,1.6vw,24px);padding:22px 0;border-top:1px solid var(--edge);font-size:19px}
.network-index li>span:first-child{letter-spacing:.06em}
.network-index b{font:45px var(--display);letter-spacing:.03em}
.lane-bar{display:block;height:6px;background:var(--edge);overflow:hidden}
/* 素の状態は「伸びきった帯」。伸ばす前の状態(幅 0)は html.js の中だけ。
JS が落ちた画面では伸ばす係が居ないので、外に置くと帯が永久に消える。 */
.lane-bar i{display:block;height:100%;background:var(--lime);clip-path:inset(0 calc(100% - var(--v,0%)) 0 0)}
:where(html.js) .lane-bar i{clip-path:inset(0 100% 0 0)}
.network-index li.seen .lane-bar i{clip-path:inset(0 calc(100% - var(--v,0%)) 0 0);transition:clip-path 1.3s cubic-bezier(.2,.7,.2,1) .3s}
.network-index em{text-align:right;font-style:normal;font-size:12px;letter-spacing:.12em;color:var(--lime)}
.network-index em.load{color:var(--paper)}
.network-index em.watch{color:var(--dim)}
.ni-note{max-width:1320px;margin:clamp(24px,3vw,40px) auto 0;line-height:2;color:#c3c9d0;font-size:14px}
/* ============================================================
9. 導入の効果 / IMPACT 地 #e6e8ea
帯は出現に合わせて伸びる(clip-path。幅 0 の箱は作らない)。
============================================================ */
.impact{padding:12vh 4vw;background:var(--panel)}
.impact-head{max-width:1320px;margin:0 auto clamp(30px,4vw,58px);display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(22px,4vw,64px);align-items:end}
.ih-title{container-type:inline-size}
.impact h2{font-family:var(--display);line-height:1.1;margin:18px 0 0}
.ih-lead{line-height:2;margin:0;max-width:58ch}
.impact-list{list-style:none;max-width:1320px;margin:0 auto;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,24px)}
.impact-list li{background:var(--bg);border:1px solid #11141826;padding:clamp(20px,2.2vw,32px);display:flex;flex-direction:column;gap:13px;container-type:inline-size}
.tr-ic{width:36px}
.tr-ic svg{width:100%;height:auto;display:block}
.tri-up{fill:var(--ink);--y0:0px;--y1:-4px;animation:slidey 2.4s ease-in-out infinite alternate}
.tri-down{fill:var(--ink);--y0:0px;--y1:4px;animation:slidey 2.4s ease-in-out infinite alternate}
.impact-list b{align-self:flex-start;background:var(--ink);color:var(--lime);font:56px/1 var(--display);padding:9px 15px;letter-spacing:.02em}
.impact-list b small{font-size:19px;margin-left:5px}
.impact-list h3{font:26px var(--display);margin:0;letter-spacing:.02em}
.bar{display:block;height:8px;background:#c6cace;overflow:hidden}
.bar i{display:block;height:100%;background:var(--ink);clip-path:inset(0 calc(100% - var(--v,0%)) 0 0)}
:where(html.js) .bar i{clip-path:inset(0 100% 0 0)}
.impact-list li.seen .bar i{clip-path:inset(0 calc(100% - var(--v,0%)) 0 0);transition:clip-path 1.3s cubic-bezier(.2,.7,.2,1) .3s}
.impact-list p{margin:0;line-height:1.95;font-size:14px}
.impact-note{max-width:1320px;margin:clamp(20px,2.6vw,36px) auto 0;font-size:13px;line-height:1.95;color:var(--dim-ink)}
/* ============================================================
10. 相談へ / CTA 地 #dfff32
導線は 2 本。主 = 輸送の相談(この会社の本業)、副 = 管制画面の説明。
============================================================ */
.relay-cta{padding:14vh 4vw;background:var(--lime);display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,80px);align-items:center}
.cta-copy{container-type:inline-size}
.relay-cta p{line-height:2;margin:clamp(18px,2.2vw,30px) 0 0;max-width:44ch}
.cta-go{margin-top:clamp(22px,2.6vw,38px);display:flex;flex-wrap:wrap;align-items:center;gap:14px clamp(18px,2vw,28px)}
.relay-cta a{display:inline-block;background:var(--ink);color:#fff;padding:18px 24px;letter-spacing:.04em;transition:transform .28s ease,background-color .28s ease}
/* 副の導線。地がライムなので、塗りではなく文字と下線だけにして主より弱くする。
★下線は border ではなく text-decoration で引く。
820px 以下では shared-quality.css が全てのリンクへ min-height:44px!important を
当てるため、border だと文字の 23px 下に線だけが浮く(2026-08-26 実測)。 */
.relay-cta a.sub{background:none;color:var(--ink);padding:4px 0;font-size:13px;letter-spacing:.06em;display:inline-flex;align-items:center;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;transition:transform .28s ease,color .28s ease}
.ticket svg{width:100%;height:auto;display:block;max-width:440px;margin-inline:auto}
.tk-card{fill:var(--ink);stroke:var(--ink);stroke-width:4;stroke-linejoin:round}
.tk-perf{stroke:var(--lime);stroke-width:3;stroke-dasharray:7 7;animation:flow 2.2s linear infinite}
.tk-rows line{stroke:#e8eaed;stroke-width:5}
.tk-stamp{fill:none;stroke:var(--lime);stroke-width:4;transform-box:fill-box;transform-origin:center;animation:stamp 4.2s ease-in-out infinite}
.tk-arrow{fill:none;stroke:var(--lime);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;--x0:0px;--x1:12px;animation:slidex 1.9s ease-in-out infinite alternate}
.ticket figcaption{text-align:center;font-size:12px;letter-spacing:.14em;margin-top:12px}
footer{padding:30px 4vw;display:grid;grid-template-columns:1fr 1fr auto;gap:10px;font-size:12px;background:var(--bg);border-top:1px solid var(--ink)}
/* ============================================================
見出しの大きさ。作者が
で宣言した位置でしか折らせない。
--ch = 宣言した行のうち、いちばん長い行の文字数。
92cqi = 器の 92%(残り 8% は書体の詰めのぶれしろ)。
============================================================ */
h2.fit{font-size:min(var(--cap,110px),12vw,calc(92cqi / var(--ch,6)))}
/* ============================================================
触る演出。全て @media(hover:hover) の中。
指で触る画面では :hover が居座って外れないため。
触ったときの動きは transform(ループは translate / rotate / scale)。
============================================================ */
@media(hover:hover){
.relay-head button{transition:transform .25s ease,background-color .25s ease}
.relay-head button:hover{transform:translateY(-2px);background:#eaff6b}
.element-list article h3,.element-list article .ic svg{transition:color .3s ease,transform .3s ease}
.element-list article:hover h3{color:var(--lime)}
.element-list article:hover .ic svg{transform:translateX(5px)}
.ig-steps li h3,.ig-steps li .ic{transition:color .3s ease,transform .3s ease}
.ig-steps li:hover h3{color:var(--lime)}
.ig-steps li:hover .ic{transform:translateY(-5px)}
.fleet-card .truck,.fleet-card h3{transition:transform .34s ease,color .34s ease}
.fleet-card:hover .truck{transform:translateX(7px)}
.fleet-card:hover h3{color:var(--lime)}
.safe-steps li b{transition:transform .28s ease}
.safe-steps li:hover b{transform:translateY(-3px)}
.net-hubs li b{transition:transform .28s ease}
.net-hubs li:hover b{transform:translateX(5px)}
.network-index li>span:first-child,.network-index li b{transition:color .3s ease}
.network-index li:hover>span:first-child,.network-index li:hover b{color:var(--lime)}
.impact-list li b{transition:transform .28s ease}
.impact-list li:hover b{transform:translateY(-3px)}
.relay-cta a:hover{transform:translateY(-3px);background:#2a3038}
/* 副の導線は塗らない。ここを塗ると濃い地に濃い文字が乗って読めなくなる。 */
.relay-cta a.sub:hover{background:none;color:#3d4650}
}
/* ============================================================
動き。ループは translate / rotate / scale / stroke-* に載せる。
touch で触ったときの transform とは property を分けてある。
============================================================ */
@keyframes route{60%,100%{stroke-dashoffset:0}}
@keyframes haul{0%{offset-distance:0%}60%,100%{offset-distance:100%}}
@keyframes slidex{from{translate:var(--x0,0px) 0}to{translate:var(--x1,0px) 0}}
@keyframes slidey{from{translate:0 var(--y0,0px)}to{translate:0 var(--y1,0px)}}
@keyframes draw{0%{stroke-dashoffset:var(--dash,900)}55%,100%{stroke-dashoffset:0}}
@keyframes beacon{0%{scale:.7;stroke-width:6}70%,100%{scale:2.4;stroke-width:0}}
@keyframes wheel{to{rotate:360deg}}
@keyframes wing{0%,52%{rotate:0deg}70%,86%{rotate:-15deg}100%{rotate:0deg}}
@keyframes temp{0%,100%{scale:1 .55}50%{scale:1 1}}
@keyframes flow{to{stroke-dashoffset:-24}}
@keyframes blip{0%,100%{scale:1}50%{scale:1.55}}
@keyframes stamp{0%,78%{scale:1}85%{scale:.9}92%{scale:1.06}100%{scale:1}}
/* ============================================================
折り返し。★広い方から狭い方へ並べる。
狭い規則を先に書くと、あとで広い側に同じ property を足したときに
狭い側の是正が黙って死ぬ(2026-08-26 に順序を入れ替えた)。
============================================================ */
/* 諸元の列は 4 本だと 1 マスが 110〜220px しかなく、
「2,400パ / レット」「そのまま / 継続」のように語の途中で折り返す(実測)。
字を小さくするのではなく、マスを広くして 1 行に収める。 */
@media(max-width:1200px){
.net-spec,.ig-spec,.fleet-spec{grid-template-columns:1fr 1fr}
.net-spec div:nth-child(2),.ig-spec div:nth-child(2),.fleet-spec div:nth-child(2){border-right:0}
.net-spec div:nth-child(-n+2),.ig-spec div:nth-child(-n+2),.fleet-spec div:nth-child(-n+2){border-bottom:1px solid #11141826}
.fleet-spec div:nth-child(-n+2){border-bottom-color:var(--edge)}
}
@media(max-width:1100px){
.net-head,.fleet-head,.safety-head,.impact-head{grid-template-columns:1fr;gap:18px;align-items:start}
.integration>header{grid-template-columns:1fr;gap:16px}
.safe-steps{grid-template-columns:repeat(2,1fr)}
.element-list article{grid-template-columns:64px 54px 1fr}
.element-list p{grid-column:2/-1;margin-top:10px}
.element-list h3{font-size:44px}
}
@media(max-width:900px){
.meta{grid-template-columns:1fr}
.fleet-grid,.ig-steps,.impact-list{grid-template-columns:1fr}
.net-hubs{grid-template-columns:repeat(2,1fr)}
.relay-cta{grid-template-columns:1fr}
.network-index li{grid-template-columns:1fr 110px 150px;row-gap:12px}
.network-index em{grid-column:1/-1;text-align:left}
}
@media(max-width:820px){
.nm-wide{display:none}
.nm-tall{display:block}
}
@media(max-width:720px){
.relay-head{padding:0 14px}
.relay-head .live{display:none}
.award-intro{padding:132px 18px 54px}
.award-intro h1{font-size:min(100px,20vw)}
.meta dd{font-size:45px}
.poster-frame{height:520px;margin:0 12px clamp(20px,4vw,30px)}
.poster-slip{right:12px;left:12px;bottom:12px;width:auto}
.poster-legend{padding:0 18px}
.net,.elements,.integration,.fleet,.safety,.network-index,.impact{padding-inline:18px}
.net,.elements,.integration,.fleet,.safety,.network-index,.impact{padding-block:82px}
.relay-cta{padding:96px 18px}
.element-list article{grid-template-columns:48px 44px 1fr}
.element-list h3{font-size:38px}
.element-list .ic{width:40px}
.safe-count{grid-template-columns:1fr}
.safe-count div{border-right:0;border-bottom:1px solid #11141826}
.safe-count div:last-child{border-bottom:0}
.network-index li{grid-template-columns:1fr 100px}
.network-index .lane-bar{grid-column:1/-1}
footer{grid-template-columns:1fr;gap:8px;padding:26px 18px}
}
@media(max-width:560px){
.net-spec,.ig-spec,.fleet-spec{grid-template-columns:1fr}
.net-spec div,.ig-spec div{border-right:0;border-bottom:1px solid #11141826}
.fleet-spec div{border-right:0;border-bottom:1px solid var(--edge)}
.net-spec div:last-child,.ig-spec div:last-child,.fleet-spec div:last-child{border-bottom:0}
.safe-steps{grid-template-columns:1fr}
.net-hubs{grid-template-columns:1fr}
.element-list article{grid-template-columns:44px 1fr;row-gap:10px}
.element-list .ic{grid-row:1;grid-column:2;width:36px;justify-self:end}
.element-list h3{grid-column:1/-1}
.element-list p{grid-column:1/-1}
.poster-slip dl{gap:6px 10px}
}
/* 320px では「RIVETMESH / CONTROL DESK」と「TRACK A LOAD」が横に並びきらず、
ボタンの文字が画面の右へ 11px 出ていた(実測)。
body{overflow-x:clip} が隠すので横あふれの定規には映らない = 目で見つけた。
帯の文字は折り返してよい。ボタンは折り返さない。
要素どうしの隙間は 14px(ヘッダー隣接の床 12px より 2px 広い)。
ヒーローの 3 つの数字は 3 列だと 1 マス 79px しかなく、
「ACTIVE LANES」(101px)が 2 行に折れて 046 だけ 14px 下がる(実測)。2 列にする。 */
@media(max-width:400px){
.relay-head{padding:0 12px;gap:14px}
.relay-head>a{flex:1 1 auto;min-width:0;white-space:normal;line-height:1.25;letter-spacing:.02em}
.relay-head button{padding:12px 12px;letter-spacing:.02em}
}
/* ★ヒーローの 3 数字を 2 列にする境目は 385px。
実測(metafit.cjs)= 3 列を強制すると『ACTIVE LANES』が折れるのは 380px 以下まで。
390px 以上は 3 列で収まるので 2 列にすると『HUBS』だけが 2 行目に取り残される。
385 は実測の 380 と 390 のちょうど間 = どちらの検査幅からも 5px 離す。 */
@media(max-width:385px){.meta dl{grid-template-columns:repeat(2,1fr);row-gap:18px}}
/* 語の途中で割れる 2 か所を、作者が宣言した位置で折る。
・ヘッダー「RIVETMESH / CONTROL DESK」… 1 行に必要な幅は 330px から
・バッジ「NETWORK OF THE DAY · 26 JUL」… 同 330px から
どちらも 359px では 1 行に収まるので、境目は 380px に置く
(検査する幅 359 / 390 のどちらからも 20px 以上離す = 緑と赤を行き来させない)。 */
@media(max-width:380px){
.hd-br{display:inline}
}
/* 幅 480 以下は shared-quality.css が .elements h2 / .relay-cta h2 を
32px!important で押さえてくる(実物は shared-quality.css の
@media(max-width:480px) の中。720 ではない)。
320px では 10 文字が入りきらず作者が宣言していない位置で 3 行に割れるため、
id を含む長いセレクタ + !important で勝つ。
★この塊だけは順序ではなく詳細度で勝たせているので、位置は末尾のままでよい。 */
@media(max-width:720px){
#main main h2.fit{
font-size:min(var(--cap-s,56px),12vw,calc(92cqi / var(--ch,6)))!important;
line-height:1.16!important;
}
}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation:none!important;transition:none!important}
.rise,.rise-wipe{translate:none!important;clip-path:none!important}
.lane-bar i,.bar i{clip-path:inset(0 calc(100% - var(--v,0%)) 0 0)!important}
.nm-trunk{stroke-dashoffset:0!important}
}