/* =========================================================
   デザイン提案 A — 暗いヘアライン鋼板の上で工場が上映される
   色＝建物の外壁の実測（色相214°・彩度12〜20%）を8段のグレーに。赤は CTA と細い線だけ（DESIGN-TOKENS-ABC §2 A列）
   ========================================================= */
:root{
  --g1:#161a20; /* 地（canvas） */
  --g2:#2b333d; /* 面（surface）＝R3 で +5.8 上げた。g1→g2 の段差 12.7→18.6／1.18:1→1.28:1（UPLIFT §1-3） */
  --g3:#363f4b; /* 第2面 */
  --g4:#424b57; /* 罫線 */
  --g5:#5b6675; /* 強い罫線・非活性 */
  --g6:#949da8; /* 補足文字 */
  --g7:#c3cad3; /* 本文 */
  --g8:#e6eaf0; /* 見出し */
  --bg:var(--g1);
  --panel:var(--g2);
  --panel-2:var(--g3);
  --lb:var(--g1);
  --line:var(--g4);
  --line-strong:var(--g5);
  --ink:var(--g8);
  --ink-2:var(--g7);
  --note:var(--g6);
  --red:#d5232b;
  --red-glow:var(--red);
  --red-deep:#9c161c;
  --ff-jp:"IBM Plex Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif; /* 2026-10-13 Zen Kaku Gothic New から変更（あきと「フォントのAI感」）。和文と数字を同じ IBM Plex 一家族に */
  --ff-en:"IBM Plex Sans Condensed","IBM Plex Sans JP","Arial Narrow","Helvetica Neue",Arial,sans-serif; /* 同日 Barlow Condensed から変更 */
  --w:1280px;
  --pad:clamp(24px,5vw,72px);
  --gap:96px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --lb-h:max(4vh,40px);
  /* 写真のトーンは1種だけ。静止写真9枚は a/img/ に M1 を焼き込み済み＝フィルタを掛けない。
     ここを参照するのは焼き込んでいない製品写真（assets/product/**）だけ（UPLIFT §1-1）。
     🔴 値は UPLIFT §1-1 の .92 ではなく A の従来値 .82 のまま。§1-1 の値は「M1 を焼いた画像の上に
     さらに掛けない」前提で選ばれており、A では焼いていない製品写真だけに当たるため、.92 にすると
     13-IMAGE §5-1 が問題にしている「ページで一番明るい面＝製品写真」をさらに明るくしてしまう
     （実測でも白い紙面が地の 4〜5倍に浮いた）。種類は1つのままで、明るさは先方が見た版を保つ */
  --photo:grayscale(.85) contrast(1.12) brightness(.82);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
*,*::before,*::after{box-sizing:border-box;}
html{background:var(--bg);-webkit-text-size-adjust:100%;}
body{margin:0;font-family:var(--ff-jp);color:var(--ink);background:var(--bg);line-height:1.7;font-size:16px;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
/* ヘアライン鋼板：縦筋＋粒状（PCのみ） */
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0 1px,rgba(255,255,255,.025) 1px 2px);}
/* 全面固定の粒（body::after）は R1 で削除。スクロールしても動かず写真にも文字にも同じ粒が乗る＝
   「上からノイズ画像を重ねた」質感だった。粒は写真側に焼き込んである（13-IMAGE §3） */
@media (max-width:760px){body::before{display:none;}}
main,header,footer{position:relative;z-index:1;}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;}
h1,h2,h3,h4{margin:0;font-weight:700;}
p,ul,ol,dl{margin:0;}
ul,ol{padding:0;list-style:none;}
b,strong{font-weight:700;}
.wrap{max-width:var(--w);margin:0 auto;padding:0 var(--pad);}
/* 字間は3値だけ＝和文 0／Barlow 40px未満 .04em／Barlow 40px以上 −.01em（UPLIFT §1-4 F8）。
   uppercase＋.08em の組（frontend-design が名指す「AIの既定値」の署名）は R1 で全廃した */
.en{font-family:var(--ff-en);font-weight:500;letter-spacing:.04em;}
.num-en{font-family:var(--ff-en);font-weight:700;font-variant-numeric:tabular-nums;}
.hdr-tel b,.cta-pill a+a,.sp-bar a b,.sec-cta a.tel,.tel-big,.stat-line b,.site .yr,.tl .y,.hist td.yr,.cd .pct,.news .d,table,.num .n,.field .fn,.plate b,.rail a,.fp .cap span,.pol li b,.job .tag,.tour-sub .en{font-variant-numeric:tabular-nums;}
/* .photo は M1 焼き込み済み（a/img/）＝CSS では何も掛けない。掛けると二重になる（UPLIFT §1-1） */
.skip{position:absolute;left:-9999px;top:0;}
.no-js #footprints{display:none;}
.skip:focus{left:16px;top:16px;z-index:100;background:var(--bg);color:var(--ink);padding:8px 12px;}

/* ---- reveal：面が沈む→浮く（opacity + 16px） ---- */
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease),transform .5s var(--ease);}
.js .reveal.is-in{opacity:1;transform:none;}
.js .reveal.d1{transition-delay:.08s;} .js .reveal.d2{transition-delay:.16s;} .js .reveal.d3{transition-delay:.24s;} .js .reveal.d4{transition-delay:.32s;}
.qa .reveal,.qa .num{opacity:1!important;transform:none!important;transition:none!important;}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none;}}

/* ---- 見出し：左の24px赤ビームは静止。走査線と clip の同期は末尾「第5ラウンド」に ---- */
.sec-head{position:relative;margin-bottom:clamp(40px,6vw,72px);}
.eyebrow{font-family:var(--ff-jp);font-weight:400;font-size:13px;letter-spacing:0;color:var(--note);margin-bottom:16px;}
/* h2 48px/1.3（統括決定）。h1 64 は据え置きなので「開いた瞬間」は変わらない。
   1.05 は漢字が接触する欧文の値だった。左の赤ダッシュ（11節すべて）と padding-left:44px は R1 で削除＝
   見出しと本文の左端が揃い、左の基準線が3本→1本になる（UPLIFT §1-5・§2-A5） */
.h2{position:relative;font-size:48px;line-height:1.3;letter-spacing:0;color:var(--ink);font-feature-settings:"palt";}
.h2 .u{display:inline-block;}
.h2 .t{display:inline-block;}
.lead{font-size:16px;line-height:1.7;color:var(--ink-2);max-width:46ch;}
.lead+.lead{margin-top:1em;}
.h3{font-size:clamp(20px,2.2vw,24px);line-height:1.4;letter-spacing:0;color:var(--ink);font-feature-settings:"palt";}
.note{font-size:14px;color:var(--note);line-height:1.7;}
.sec{position:relative;padding:var(--gap) 0;}
.sec.panel{background:var(--panel);}
.sec.panel2{background:var(--panel-2);}
.sec.lb{background:var(--lb);}
/* R3 ②段差：面が変わる所だけ、上辺に 1px の罫と 32px の光を置く。四辺を囲まない（囲むと「箱」に戻る）。
   rgba(230,234,240,…) は g8 そのもの＝新しい有彩色は1つも増えない（UPLIFT §1-3） */
.sec.panel,.sec.panel2{border-top:1px solid var(--line-strong);
  background-image:linear-gradient(180deg,rgba(230,234,240,.025) 0,rgba(230,234,240,0) 32px);
  background-repeat:no-repeat;}
.two{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,80px);align-items:start;}
.two.rev{grid-template-columns:minmax(0,7fr) minmax(0,5fr);}
@media (max-width:860px){.two,.two.rev{grid-template-columns:1fr;}}
/* 🔴 グリッドの子は既定が min-width:auto なので、中の表の min-content が列幅を押し広げる。
   品質管理の「測定機一覧」を最初から開いた（R3・右列の空白を埋める）ことで SP 390px の横スクロールが
   実際に出た＝実測 scrollWidth 467。min-width:0 を入れて .tbl の overflow-x:auto に横スクロールを任せる。
   .eq-grid にも同じ穴があった（設備一覧を開くと同じことが起きる）ので併せて塞ぐ */
.two>*,.eq-grid>*{min-width:0;}

/* ---- details（畳む） ---- */
details.fold{margin-top:28px;background:rgba(255,255,255,.02);border:1px solid var(--line);border-radius:4px;}
details.fold summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 24px;font-size:16px;font-weight:700;color:var(--ink);}
details.fold summary::-webkit-details-marker{display:none;}
details.fold summary::after{content:"+";font-family:var(--ff-en);font-size:24px;font-weight:500;color:var(--note);line-height:1;}
details.fold[open] summary::after{content:"–";}
details.fold summary:hover{color:#fff;}
details.fold .fold-body{padding:4px 24px 24px;}
.tbl{overflow-x:auto;-webkit-overflow-scrolling:touch;}
table{border-collapse:collapse;width:100%;font-size:14px;line-height:1.6;}
th,td{text-align:left;padding:12px 12px;border-bottom:1px solid var(--line);vertical-align:top;}
th{color:var(--note);font-weight:400;white-space:nowrap;}
thead th{font-family:var(--ff-en);font-weight:500;letter-spacing:.04em;font-size:13px;}
td.r,th.r{text-align:right;font-family:var(--ff-en);font-weight:500;font-size:16px;white-space:nowrap;}
.kv th{width:9em;}
.kv td .en{display:block;color:var(--note);}
.kv td br+span{display:block;}

/* ---- ヘッダー：透明→ガラス ---- */
#site-header{position:fixed;top:0;left:0;right:0;z-index:70;transition:background .35s,backdrop-filter .35s,border-color .35s;border-bottom:1px solid transparent;}
#site-header.scrolled{background:rgba(22,26,32,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-color:rgba(255,255,255,.06);box-shadow:inset 0 1px 0 rgba(230,234,240,.07);}
.hdr{max-width:none;padding:0 clamp(20px,3vw,40px);height:68px;display:flex;align-items:center;justify-content:space-between;gap:20px;}
.brand{display:flex;flex-direction:column;line-height:1.1;text-decoration:none;color:var(--ink);}
.brand b{font-size:16px;letter-spacing:0;}
.brand span{font-family:var(--ff-en);font-weight:500;font-size:12px;letter-spacing:.04em;color:var(--note);margin-top:3px;}
.hdr-right{display:flex;align-items:center;gap:24px;}
.hdr-tel{display:inline-flex;align-items:baseline;gap:8px;text-decoration:none;color:var(--ink);}
.hdr-tel small{font-size:12px;letter-spacing:.04em;color:var(--note);}
.hdr-tel b{font-family:var(--ff-en);font-weight:700;font-size:24px;letter-spacing:.04em;}
@media (max-width:760px){.hdr{height:60px;} .brand b{font-size:14px;} .brand span{font-size:12px;letter-spacing:.04em;} .hdr-tel b{font-size:20px;} .hdr-tel small{display:none;}}

/* ---- 右端の縦インデックス（PC） ---- */
.rail{position:fixed;right:24px;top:50%;transform:translateY(-50%);z-index:60;transition:opacity .3s;}
.rail ol{display:flex;flex-direction:column;gap:8px;}
/* レールの 01〜12 は順序でない連番なので HTML から削除（INVARIANTS W5「番号を外す」側を採った）。
   🔴 ラベルを常時表示にすると帯写真の上に和文の列が焼き付き、実測で固定UIのコントラスト FAIL が
   13件増えたので、ラベルは現在地＋hover だけに戻した（点は常時・現在地は赤ではなく g8） */
.rail a{display:flex;align-items:center;justify-content:flex-end;gap:8px;text-decoration:none;color:var(--note);font-family:var(--ff-jp);font-size:12px;letter-spacing:0;line-height:1;}
.rail a .lbl{font-family:var(--ff-jp);font-size:12px;letter-spacing:0;opacity:0;transform:translateX(6px);transition:opacity .25s,transform .25s;white-space:nowrap;}
.rail a:hover .lbl,.rail a.on .lbl{opacity:1;transform:none;}
.rail a::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--line-strong);transition:background .25s;}
.rail a.on{color:var(--ink);}
.rail a.on::after{background:var(--ink);}
body.in-hero .rail{opacity:0;pointer-events:none;}
@media (max-width:1100px){.rail{display:none;}}

/* ---- 固定CTA：PC右下のガラスのピル（下辺エッジライトは見学後に点灯） ---- */
/* R3 ③縁：浮いている物だけに、上辺が明るく下辺が暗い二重の inset（＝金属板の縁）。影ではない */
.cta-pill{position:fixed;right:28px;bottom:28px;z-index:65;display:flex;align-items:stretch;background:rgba(22,26,32,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:4px;overflow:hidden;box-shadow:inset 0 1px 0 rgba(230,234,240,.07),inset 0 -1px 0 rgba(22,26,32,.55);}
.cta-pill a{display:flex;align-items:center;gap:8px;padding:16px 24px;text-decoration:none;color:var(--ink);font-size:14px;font-weight:700;letter-spacing:0;white-space:nowrap;}
.cta-pill a+a{border-left:1px solid var(--line);font-family:var(--ff-en);font-weight:700;font-size:20px;letter-spacing:.04em;}
.cta-pill a:hover{background:rgba(255,255,255,.05);}
.cta-pill::after{content:"";position:absolute;left:14%;right:14%;bottom:0;height:1px;background:var(--red-glow);opacity:0;transition:opacity .2s;}
body.tour-done:not(.in-tour) .cta-pill::after{opacity:1;}
.cta-pill:hover::after{box-shadow:0 0 18px 1px var(--red-glow);}
.cta-pill a:active{background:var(--panel-2);}
.qa .cta-pill::after,.still .cta-pill::after{opacity:1;transform:none;transition:none!important;}
@media (max-width:760px){.cta-pill{display:none;}}
/* SP：下部バー */
.sp-bar{display:none;}
@media (max-width:760px){
  .sp-bar{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:65;height:calc(56px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:rgba(22,26,32,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--line);box-shadow:inset 0 1px 0 rgba(230,234,240,.07);}
  .sp-bar a{display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;color:var(--ink);font-size:14px;font-weight:700;letter-spacing:0;}
  .sp-bar a+a{border-left:1px solid var(--line);}
  .sp-bar a b{font-family:var(--ff-en);font-size:20px;letter-spacing:.04em;}
  body{padding-bottom:calc(56px + env(safe-area-inset-bottom));}
  :root{--gap:64px;}
}

/* ---- ヒーロー：外観1枚・赤帯だけ点灯 ---- */
#hero{position:relative;height:100svh;min-height:560px;overflow:hidden;background:var(--bg);display:flex;align-items:flex-end;}
.hero-fig{position:absolute;inset:0;margin:0;}
.hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;clip-path:inset(0 0 0 0);animation:drop .6s var(--ease) both;}
@keyframes drop{from{clip-path:inset(0 0 100% 0);}to{clip-path:inset(0 0 0 0);}}
.hero-band{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;clip-path:inset(0 0 0 0);animation:light .5s var(--ease) .8s both;}
@keyframes light{from{clip-path:inset(0 100% 0 0);}to{clip-path:inset(0 0 0 0);}}
.hero-band .glow{fill:var(--red-glow);opacity:.55;filter:url(#bandblur);}
.hero-band .solid{fill:var(--red);}
.hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,26,32,.55) 0%,rgba(22,26,32,0) 30%,rgba(22,26,32,0) 55%,rgba(22,26,32,.86) 100%);}
.hero-copy{position:relative;z-index:2;width:100%;max-width:var(--w);margin:0 auto;padding:0 var(--pad) clamp(40px,7vh,72px);animation:rise .5s var(--ease) 1s both;}
@keyframes rise{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
.hero-h1 .u{display:inline-block;}
.hero-h1{font-family:var(--ff-jp);font-weight:700;font-size:clamp(40px,5.5vw,64px);line-height:1.3;letter-spacing:0;color:var(--ink);text-wrap:balance;font-feature-settings:"palt";}
.hero-kicker{font-family:var(--ff-jp);font-size:14px;letter-spacing:0;color:rgba(255,255,255,.78);margin-bottom:12px;}
.hero-sub{font-family:var(--ff-jp);font-size:16px;line-height:1.7;letter-spacing:0;color:rgba(255,255,255,.86);margin-top:16px;max-width:46ch;}
.hero-cue{margin-top:8px;display:inline-flex;align-items:center;min-height:44px;padding:8px 0;font-size:13px;line-height:1.6;letter-spacing:0;color:rgba(255,255,255,.72);text-decoration:none;}
.hero-cue i{display:block;width:1px;height:28px;background:rgba(255,255,255,.55);animation:cue 1.8s ease-in-out infinite;}
@keyframes cue{0%{transform:scaleY(.3);transform-origin:top;opacity:.3;}50%{transform:scaleY(1);transform-origin:top;opacity:1;}100%{transform:scaleY(.3);transform-origin:bottom;opacity:.3;}}
/* .hero-meta は要素が存在しない死にCSS（INVARIANTS W14）＝R1 で削除 */
@media (max-width:760px){.h2{font-size:24px;line-height:1.35;} .hero-h1{font-size:32px;} .hero-copy{padding-bottom:calc(40px + 56px);}}
.qa .hero-photo,.qa .hero-band,.qa .hero-copy,.qa .hero-cue i{animation-duration:0s!important;animation-delay:0s!important;}
@media (prefers-reduced-motion:reduce){.hero-photo,.hero-band,.hero-copy{animation-duration:0s!important;animation-delay:0s!important;} .hero-cue i{animation:none;}}

/* ---- 見学：全画面上映（sticky 100vh・親700vh） ---- */
.tour{position:relative;height:700vh;background:var(--lb);}
.tour-stick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--lb);}
.tour-stick canvas,.tour-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.tour-poster{z-index:0;}
.tour-stick canvas{z-index:1;}
.tour-lb{position:absolute;left:0;right:0;height:var(--lb-h);background:var(--lb);z-index:3;}
.tour-lb.top{top:0;} .tour-lb.bot{bottom:0;}
.tour-vig{position:absolute;left:0;right:0;height:14vh;z-index:2;pointer-events:none;}
.tour-vig.top{top:0;height:20vh;background:linear-gradient(180deg,rgba(22,26,32,.9),rgba(22,26,32,0));}
.tour-vig.bot{bottom:0;height:22vh;background:linear-gradient(to top,rgba(22,26,32,.85),transparent);}
.tour-grain{position:absolute;inset:0;z-index:2;pointer-events:none;background:var(--grain);opacity:.05;}
@media (max-width:760px){.tour{height:400vh;} .tour-grain{display:none;}}
.tour-sub{position:absolute;left:var(--pad);bottom:calc(var(--lb-h) + 32px);z-index:4;max-width:56ch;}
.tour-sub.swap{animation:subin .3s ease-out;}
@keyframes subin{from{opacity:0;}to{opacity:1;}}
.tour-sub .en{display:block;font-family:var(--ff-en);font-weight:500;font-size:12px;letter-spacing:.04em;color:rgba(255,255,255,.62);margin-bottom:8px;}
.tour-sub .jp{display:block;font-size:16px;line-height:1.7;letter-spacing:0;color:var(--ink);text-shadow:0 1px 8px rgba(0,0,0,.6);}
.tour-sub .jp b{display:block;color:var(--ink);margin-bottom:2px;}
.tour-band-ui{position:absolute;left:0;right:0;bottom:0;height:var(--lb-h);z-index:4;display:flex;align-items:center;justify-content:center;gap:24px;}
.tour-dots{display:flex;flex-direction:row;gap:12px;align-items:center;}
.tour-dots i{display:block;width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.22);transition:background .3s,box-shadow .3s;}
.tour-dots i.on{background:var(--ink);}
.tour-skip{display:inline-flex;align-items:center;padding:8px 16px;border-radius:4px;background:rgba(22,26,32,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--line);font-size:13px;line-height:1;letter-spacing:0;color:var(--ink);text-decoration:none;white-space:nowrap;}
.tour-skip:hover{color:#fff;border-color:var(--line-strong);}
.tour-title{position:absolute;left:var(--pad);top:calc(68px + 24px);z-index:4;max-width:52ch;}
.tour-title b{display:block;font-weight:700;font-size:14px;letter-spacing:0;color:var(--ink);text-shadow:0 1px 8px rgba(0,0,0,.6);}
.tour-lead{margin-top:8px;font-size:13px;line-height:1.7;color:rgba(255,255,255,.72);text-shadow:0 1px 8px rgba(0,0,0,.6);}
@media (max-width:760px){
  .tour-dots{display:none;}
  .tour-sub{bottom:calc(var(--lb-h) + 56px + 60px);max-width:calc(100vw - var(--pad) * 2);}
  .tour-band-ui{bottom:calc(var(--lb-h) + 56px + 12px);height:auto;justify-content:flex-start;padding-left:var(--pad);}
  .tour-skip{min-height:44px;font-size:13px;}
  .tour-title{top:calc(60px + 16px);max-width:calc(100vw - var(--pad) * 2);}
}

/* ---- 足跡：見学直後の9コマ ---- */
#footprints{background:var(--lb);padding:28px 0 40px;}
.fp-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 16px;margin-bottom:16px;}
.fp-head .eyebrow{white-space:nowrap;}
.fp-head .eyebrow{margin:0;}
.fp-head .note{font-size:14px;}
.fp{display:grid;grid-template-columns:repeat(9,1fr);gap:8px;}
.fp button{appearance:none;background:none;border:0;padding:0;cursor:pointer;color:var(--note);text-align:left;font-family:inherit;}
.fp canvas{width:100%;aspect-ratio:16/9;display:block;background:var(--panel-2);border:1px solid var(--line);transition:border-color .25s;}
.fp button:hover canvas,.fp button:focus-visible canvas{border-color:var(--ink);}
.fp .cap{display:block;margin-top:8px;font-size:12px;line-height:1.4;letter-spacing:0;}
.fp .cap span{font-family:var(--ff-en);font-weight:500;letter-spacing:.04em;margin-right:8px;color:var(--note);}
.fp .cap b{font-weight:400;color:var(--ink-2);font-size:12px;}
@media (max-width:860px){.fp{display:flex;overflow-x:auto;gap:12px;padding-bottom:8px;scroll-snap-type:x mandatory;} .fp button{flex:0 0 140px;scroll-snap-align:start;}}

/* ---- 数字：暗い面に大数字5つ・1本の光が通った桁から点く（末尾「第5ラウンド」） ---- */
.nums{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(28px,4vw,56px) clamp(16px,2.5vw,32px);}
.num{grid-column:span 2;min-width:0;}
.num.wide,.num.half{grid-column:span 3;}
.num{position:relative;padding-top:16px;border-top:1px solid var(--line);}
.num .n{white-space:nowrap;}
.num .n{display:block;font-family:var(--ff-en);font-weight:700;font-size:clamp(48px,5.5vw,64px);line-height:.95;letter-spacing:-.01em;color:var(--ink);}
.num .n small{font-family:var(--ff-jp);font-weight:700;font-size:.34em;letter-spacing:0;margin:0 .1em;vertical-align:baseline;}
.num .n .iso{font-size:.62em;letter-spacing:.04em;}
.num .c{display:block;margin-top:16px;font-size:16px;font-weight:700;color:var(--ink);letter-spacing:0;}
.num .c small{display:block;font-size:13px;font-weight:400;color:var(--note);letter-spacing:0;margin-top:4px;word-break:keep-all;overflow-wrap:normal;}
.nw{white-space:nowrap;}
.num .note{margin-top:12px;font-size:14px;}
.num .note b{color:var(--ink-2);font-weight:400;}
@media (max-width:760px){.nums{grid-template-columns:1fr 1fr;gap:28px 16px;} .num,.num.half{grid-column:span 1;} .num.wide{grid-column:span 2;} .num .n{font-size:clamp(48px,15vw,64px);}}

.nums-clients-h{margin-top:clamp(48px,7vw,80px);font-size:20px;}
.nums-clients{display:grid;grid-template-columns:repeat(4,1fr);gap:0 24px;margin-top:12px;border-top:1px solid var(--line);}
.nums-clients li{font-size:14px;color:var(--ink-2);padding:12px 0;border-bottom:1px solid var(--line);letter-spacing:0;}
@media (max-width:1000px){.nums-clients{grid-template-columns:repeat(3,1fr);}}
@media (max-width:760px){.nums-clients{grid-template-columns:1fr 1fr;gap:0 16px;} .nums-clients li{font-size:13px;}}
/* ---- 帯写真（幅100%・高さ62〜100vh） ---- */
.band{position:relative;margin:0;background:var(--lb);overflow:hidden;border-block:1px solid var(--line);}
.band img{width:100%;height:clamp(420px,72vh,820px);object-fit:cover;}
.band figcaption{position:absolute;left:var(--pad);bottom:24px;z-index:2;font-size:14px;letter-spacing:0;color:var(--ink);text-shadow:0 1px 8px rgba(0,0,0,.7);}
.band figcaption span{font-family:var(--ff-en);font-weight:500;font-size:12px;letter-spacing:.04em;color:rgba(255,255,255,.62);margin-right:12px;}
.band::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;background:linear-gradient(0deg,rgba(22,26,32,.85),rgba(22,26,32,0));pointer-events:none;}
/* R3 下半分の写真：新しい写真は足さず、いまある帯を大きく使う（UPLIFT-DECISIONS §2） */
.band.short img{height:clamp(360px,62vh,680px);}
.band.wrapped{max-width:var(--w);margin:0 auto;}
.band.rhythm{background:var(--bg);}
.band.rhythm img{height:clamp(360px,62vh,680px);}
/* 帯写真の切り出し：既定の中央だと縦の37〜42%しか見えず、しかも必ず一番平凡な中央が選ばれる（13-IMAGE §4） */
.band.op-mech img{object-position:50% 62%;}
.band.op-aerial img{object-position:50% 42%;}
.band.op-pine img{object-position:50% 58%;}
.band.op-star img{object-position:18% 100%;} /* 正立に直した機械の写真：ロゴと「稼動中」の札が必ず入る位置 */

/* ---- 設備 ---- */
.eq-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,80px);align-items:start;margin-top:clamp(48px,7vw,96px);}
.eq-grid figure{margin:0;}
.eq-grid figure img{width:100%;aspect-ratio:3/2;object-fit:cover;border:1px solid var(--line);background:var(--panel-2);}
.eq-grid figcaption{margin-top:12px;font-size:14px;color:var(--note);letter-spacing:0;}
.eq-grid figcaption span{font-family:var(--ff-en);font-weight:500;font-size:12px;letter-spacing:.04em;margin-right:12px;}
.lineage{display:grid;grid-template-columns:200px 1fr;gap:20px;align-items:center;margin-top:36px;padding-top:28px;border-top:1px solid var(--line);}
.lineage figure{margin:0;}
.lineage img{width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--line);background:var(--panel-2);}
.lineage p{font-size:14px;color:var(--note);}
.lineage p b{display:block;color:var(--ink);font-size:16px;margin-bottom:4px;}
.stat-line{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:24px;font-size:14px;color:var(--note);}
.stat-line b{font-family:var(--ff-en);font-weight:700;font-size:24px;color:var(--ink);letter-spacing:.04em;margin-right:8px;vertical-align:-2px;}
@media (max-width:860px){.eq-grid{grid-template-columns:1fr;} .lineage{grid-template-columns:120px 1fr;}}

/* ---- 事業と製品 ---- */
.fields{display:grid;grid-template-columns:1fr;border-top:1px solid var(--line);margin-top:clamp(36px,5vw,64px);}
/* 製品 01〜05 は分類であって順序ではないので、連番（.fn）を HTML ごと削除し列も外した（UPLIFT §1-5・F8） */
.field{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px clamp(16px,3vw,40px);align-items:center;padding:clamp(24px,3.4vw,40px) 0;border-bottom:1px solid var(--line);}
.field h3{font-size:clamp(24px,2.6vw,32px);line-height:1.3;letter-spacing:0;}
.field h3 small{display:block;font-family:var(--ff-en);font-weight:500;font-size:12px;letter-spacing:.04em;color:var(--note);margin-top:8px;}
.pv{display:flex;gap:12px;align-items:flex-start;justify-content:flex-end;}
/* 偽ビネット（.big::after／.pf::after の radial-gradient＝CSS で描いた作り物の陰）は R1 で削除。
   代償＝部品が地に沈むので、地を g3・縁を 1px g4 にして輪郭を立てる（UPLIFT §1-1）。
   .big は 389px 表示に原本 500px＝DPR2 で 64% 相当＝眠かった。250px にすると 2倍でちょうど 500 と一致し、
   同時に製品節が縮んでページ最大の谷が浅くなる（UPLIFT §2-A2） */
.big{margin:0;position:relative;width:clamp(200px,20vw,250px);aspect-ratio:1;background:var(--panel-2);border:1px solid var(--line);overflow:hidden;}
.big img,.pf img{width:100%;height:100%;object-fit:cover;filter:var(--photo);}
.thumbs{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;width:clamp(104px,11vw,152px);}
.pf{position:relative;display:block;aspect-ratio:1;background:var(--panel-2);border:1px solid var(--line);overflow:hidden;}
.field .pf-note{grid-column:1/-1;font-size:14px;color:var(--note);}
.items{display:flex;flex-wrap:wrap;gap:8px 12px;margin-top:24px;}
.items li{font-size:14px;letter-spacing:0;color:var(--ink-2);padding:8px 12px;border:1px solid var(--line);border-radius:4px;}
@media (max-width:1000px){.field{grid-template-columns:minmax(0,1fr);} .pv{grid-column:1/-1;justify-content:flex-start;}}
@media (max-width:760px){.field{grid-template-columns:1fr;} .pv{flex-direction:column;} .big{width:100%;max-width:250px;} .thumbs{display:flex;width:auto;} .thumbs .pf{width:76px;flex:0 0 76px;} .field .pf-note{grid-column:1/-1;}}

/* ---- 品質 ---- */
.plates{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:8px;}
/* 左の赤い縦線は R1 で削除（赤は「押させる場所」に予約）。角丸も 12px→4px の1系統へ */
.plate{padding:24px;background:var(--panel);border:1px solid var(--line);border-radius:4px;position:relative;overflow:hidden;}
.plate b{display:block;font-family:var(--ff-en);font-weight:700;font-size:clamp(24px,2.6vw,32px);line-height:1;letter-spacing:.04em;color:var(--ink);white-space:nowrap;}
.plate b .jp{font-family:var(--ff-jp);font-size:.6em;letter-spacing:0;}
.plate span{display:block;margin-top:12px;font-size:14px;color:var(--note);letter-spacing:0;}
.pol{margin-top:4px;}
.pol li{display:grid;grid-template-columns:34px 1fr;gap:12px;padding:12px 0;font-size:16px;line-height:1.7;color:var(--ink-2);}
.pol li b{font-family:var(--ff-en);font-weight:700;font-size:20px;color:var(--note);line-height:1.3;}
/* 設備の 01〜03 は種類であって順序ではないので番号を外した列（品質方針の「条」の番号は残す＝F8） */
.pol.plain li{grid-template-columns:1fr;}
@media (max-width:600px){.plates{grid-template-columns:1fr;}}

/* ---- 地図：光る地球儀 ---- */
.globe-sec{padding-top:clamp(64px,8vw,112px);}
.globe-sec .sec-head{margin-bottom:24px;}
.map-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,5vw,72px);align-items:start;}
.globe-wrap{margin:0;position:relative;}
.globe-wrap svg{width:min(100%,600px);height:auto;display:block;overflow:visible;}
.globe-wrap .lead{stroke:rgba(255,255,255,.5);stroke-width:.6;fill:none;}
.globe-wrap .sphere{fill:var(--panel-2);}
.globe-wrap .rim{fill:none;stroke:var(--line);stroke-width:1;}
.globe-wrap .graticule path{fill:none;stroke:var(--line);stroke-width:.7;}
.globe-wrap .land path{fill:var(--line);stroke:var(--line-strong);stroke-width:.35;stroke-linejoin:round;}
/* 航路と3拠点のピンから赤を外し、赤は本社ピン1点だけに（UPLIFT §1-5） */
.globe-wrap .links line{stroke:var(--line-strong);stroke-width:.7;fill:none;opacity:.9;}
.globe-wrap .links line.lk2{stroke-width:2.4;opacity:.25;}
.globe-wrap .pin circle{fill:var(--note);r:4;}
.globe-wrap .pin-jp circle{fill:var(--red-glow);filter:url(#pinglow);}
.globe-wrap .pin-jp circle{animation:breathe 2s ease-in-out .35s infinite;}
@keyframes breathe{0%,100%{opacity:1;r:4;}50%{opacity:.7;r:5.5;}}
.globe-wrap .pin .lbl{fill:var(--ink);font-family:var(--ff-jp);font-weight:700;font-size:12px;letter-spacing:0;paint-order:stroke;stroke:var(--panel-2);stroke-width:4px;stroke-linejoin:round;}
.globe-wrap .pin .sub{fill:var(--ink-2);font-family:var(--ff-jp);font-size:12px;letter-spacing:0;paint-order:stroke;stroke:var(--panel-2);stroke-width:4px;stroke-linejoin:round;}
.sites{display:flex;flex-direction:column;}
.site{display:grid;grid-template-columns:96px 1fr;gap:16px;padding:20px 0;border-top:1px solid var(--line);align-items:baseline;}
.site:last-child{border-bottom:1px solid var(--line);}
.site .yr{font-family:var(--ff-en);font-weight:700;font-size:clamp(32px,3.4vw,48px);line-height:1;color:var(--ink);letter-spacing:-.01em;}
.site .yr small{display:block;font-family:var(--ff-jp);font-size:12px;font-weight:400;letter-spacing:0;color:var(--note);margin-top:8px;}
.site h3{font-size:16px;letter-spacing:0;overflow-wrap:anywhere;}
.site p{font-size:14px;color:var(--note);margin-top:2px;}
.site p .en{display:block;font-family:var(--ff-jp);font-size:14px;letter-spacing:0;color:var(--ink-2);}
.map-note{margin-top:16px;font-size:14px;}
@media (max-width:860px){.map-grid{grid-template-columns:1fr;} .globe-wrap{max-width:560px;margin:0 auto;} .site{grid-template-columns:80px 1fr;}}
@media (max-width:760px){.globe-wrap .pin .lbl{font-size:16px;} .globe-wrap .pin .sub{display:none;} .globe-wrap .pin circle{r:5;}}
@media (prefers-reduced-motion:reduce){.globe-wrap .pin-jp circle{animation:none;}}

/* ---- コスト合理化5件 ---- */
.cd{display:grid;grid-template-columns:1fr;border-top:1px solid var(--line);margin-top:clamp(36px,5vw,64px);}
.cd li{display:grid;grid-template-columns:minmax(150px,1fr) minmax(0,3fr) auto;gap:16px clamp(20px,4vw,56px);align-items:center;padding:clamp(20px,3vw,32px) 0;border-bottom:1px solid var(--line);}
.cd .pct{font-family:var(--ff-en);font-weight:700;font-size:clamp(48px,5.5vw,64px);line-height:.9;letter-spacing:-.01em;color:var(--ink);white-space:nowrap;}
.cd .pct small{font-size:.4em;letter-spacing:.04em;color:var(--note);margin-left:8px;font-weight:500;}
.cd p{font-size:16px;line-height:1.7;color:var(--ink-2);}
.cd .who{font-family:var(--ff-en);font-weight:500;font-size:13px;letter-spacing:.04em;color:var(--note);white-space:nowrap;}
.cd .who b{font-family:var(--ff-jp);font-weight:400;letter-spacing:0;font-size:13px;}
@media (max-width:760px){.cd li{grid-template-columns:1fr;gap:8px;} .cd .who{white-space:normal;}}

/* ---- 会社概要と沿革 ---- */
.co-photo{margin:0;}
.co-photo img{width:100%;aspect-ratio:3/2;object-fit:cover;border:1px solid var(--line);background:var(--panel-2);}
.co-photo figcaption{margin-top:12px;font-size:14px;color:var(--note);letter-spacing:0;}
.co-photo figcaption span{font-family:var(--ff-en);font-weight:500;font-size:12px;letter-spacing:.04em;margin-right:12px;}
.tl{margin-top:24px;border-left:1px solid var(--line);}
.tl li{position:relative;display:grid;grid-template-columns:84px 1fr;gap:16px;padding:8px 0 8px 20px;align-items:baseline;}
.tl li::before{content:"";position:absolute;left:-3px;top:16px;width:5px;height:5px;border-radius:50%;background:var(--line-strong);}
.tl .y{font-family:var(--ff-en);font-weight:700;font-size:24px;line-height:1;color:var(--ink);letter-spacing:.04em;}
.tl .y small{display:block;font-family:var(--ff-jp);font-weight:400;font-size:12px;color:var(--note);letter-spacing:0;margin-top:4px;}
.tl p{font-size:14px;line-height:1.7;color:var(--ink-2);}
.hist td.yr{font-family:var(--ff-en);font-weight:700;font-size:20px;letter-spacing:.04em;white-space:nowrap;color:var(--ink);width:5.2em;}
.hist td.yr small{display:block;font-family:var(--ff-jp);font-weight:400;font-size:13px;color:var(--note);letter-spacing:0;}
.hist td{font-size:14px;color:var(--ink-2);}
.clients{display:grid;grid-template-columns:repeat(2,1fr);gap:0 24px;}
.clients li{font-size:14px;color:var(--ink-2);padding:8px 0;border-bottom:1px solid var(--line);}

/* ---- 方針・CSR ---- */
.pol-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px);margin-top:8px;}
.pol-card{padding:24px;background:var(--panel);border:1px solid var(--line);border-radius:4px;}
.pol-card .eyebrow{margin-bottom:12px;font-size:12px;}
.pol-card h3{font-size:20px;letter-spacing:0;margin-bottom:12px;}
.pol-card p,.pol-card li{font-size:14px;line-height:1.7;color:var(--ink-2);}
.pol-card ol{counter-reset:p;}
.pol-card ol li{display:grid;grid-template-columns:22px 1fr;gap:8px;padding:4px 0;}
.pol-card ol li::before{counter-increment:p;content:counter(p);font-family:var(--ff-en);font-weight:700;color:var(--note);font-size:16px;line-height:1.5;}
.fold-body h4{font-size:16px;margin:24px 0 8px;letter-spacing:0;color:var(--ink);}
.fold-body h4:first-child{margin-top:8px;}
.fold-body p,.fold-body li{font-size:14px;line-height:1.7;color:var(--ink-2);}
.fold-body ol.n{counter-reset:q;}
.fold-body ol.n li{display:grid;grid-template-columns:22px 1fr;gap:8px;padding:3px 0;}
.fold-body ol.n li::before{counter-increment:q;content:counter(q);font-family:var(--ff-en);font-weight:700;color:var(--note);font-size:16px;line-height:1.5;}
.fold-body ul.b li{padding:3px 0 3px 16px;position:relative;}
.fold-body ul.b li::before{content:"";position:absolute;left:0;top:.85em;width:6px;height:1px;background:var(--note);}
.fold-body dl.cs{display:grid;grid-template-columns:1fr;gap:8px;}
.fold-body dl.cs dt{font-size:14px;color:var(--ink);margin-top:12px;}
.fold-body dl.cs dd{margin:0;font-size:14px;color:var(--note);}
@media (max-width:860px){.pol-grid{grid-template-columns:1fr;}}

/* ---- 新着 ---- */
/* 一覧は面（g2）より一段沈めた面に置く＝節の地とのあいだに段差を作る（UPLIFT §1 面の段差） */
.news{margin-top:8px;background:var(--g1);border:1px solid var(--line);border-radius:4px;padding:0 clamp(16px,2vw,24px);box-shadow:inset 0 1px 0 rgba(22,26,32,.55);}
.news li{display:grid;grid-template-columns:150px 1fr;gap:12px 28px;padding:16px 0;border-bottom:1px solid var(--line);align-items:baseline;}
.news li:last-child{border-bottom:0;}
.news .d{font-family:var(--ff-en);font-weight:500;font-size:16px;letter-spacing:.04em;color:var(--note);}
.news h3{font-size:16px;letter-spacing:0;}
.news p{font-size:14px;color:var(--note);margin-top:4px;line-height:1.7;}
.news a{color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line);}
.news a:hover{color:#fff;}
@media (max-width:600px){.news li{grid-template-columns:1fr;gap:4px;}}

/* ---- 求人 ---- */
.jobs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:8px;}
.job{padding:24px;background:var(--panel);border:1px solid var(--line);border-radius:4px;}
.job h3{font-size:16px;letter-spacing:0;margin-bottom:8px;}
.job p{font-size:14px;line-height:1.7;color:var(--note);}
/* .job .tag（職種 01〜06）は順序でない連番なので HTML ごと削除（UPLIFT §1-5・F8） */
.rc-note{margin-top:24px;font-size:14px;color:var(--note);}
.rc-note b{color:var(--ink);font-weight:400;}
.rc-note .num-en{color:var(--ink);font-size:20px;letter-spacing:.04em;}
@media (max-width:860px){.jobs{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.jobs{grid-template-columns:1fr;}}

/* ---- 章末CTA ---- */
.sec-cta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 28px;margin-top:clamp(36px,5vw,56px);}
.sec-cta a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;color:var(--ink);font-size:14px;letter-spacing:0;}
.sec-cta a.go:hover{color:#fff;}
.sec-cta a.tel{position:relative;font-family:var(--ff-en);font-weight:700;font-size:20px;letter-spacing:.04em;color:var(--ink);padding-bottom:4px;}
.sec-cta a.tel::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:1px;background:var(--red-glow);}
#footprints .sec-cta{margin-top:16px;}
.fp-after{margin-top:24px;font-size:16px;color:var(--ink);}
.fp-note{margin-top:8px;font-size:14px;}
.sec-cta .who{font-size:14px;color:var(--note);letter-spacing:0;}
/* ---- お問い合わせ：TEL 96px・赤い下線＝線の終点 ---- */
#contact{padding-bottom:64px;}
.tel-big{display:inline-block;text-decoration:none;color:var(--ink);font-family:var(--ff-en);font-weight:700;font-size:clamp(48px,5.5vw,64px);line-height:1;letter-spacing:-.01em;position:relative;padding-bottom:12px;margin-top:28px;}
.tel-big::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--red-glow);transform-origin:0 50%;transition:transform .4s linear .3s;}
.tel-big small{display:block;font-family:var(--ff-jp);font-weight:400;font-size:14px;letter-spacing:0;color:var(--note);margin-bottom:12px;}
.contact-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,80px);align-items:start;}
.addr{margin-top:28px;font-size:16px;line-height:1.7;color:var(--ink-2);}
.addr b{color:var(--ink);font-weight:400;}
.addr .num-en{font-size:20px;letter-spacing:.04em;color:var(--ink);}
.addr p+p{margin-top:8px;}
.faq details{border-top:1px solid var(--line);}
.faq details:last-child{border-bottom:1px solid var(--line);}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;padding:16px 0;font-size:16px;font-weight:700;color:var(--ink);}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";font-family:var(--ff-en);font-size:24px;font-weight:500;color:var(--note);line-height:1;}
.faq details[open] summary::after{content:"–";}
.faq p{padding:0 0 16px;font-size:14px;line-height:1.7;color:var(--ink-2);}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr;}}

/* ---- フッター ---- */
footer{background:var(--lb);color:var(--note);padding:48px 0 40px;font-size:13px;}
.ft-nav{display:flex;flex-wrap:wrap;gap:0 16px;margin-bottom:24px;}
.ft-nav a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 4px;text-decoration:none;color:var(--ink-2);font-size:13px;letter-spacing:0;}
.ft-nav a:hover{color:#fff;}
.ft-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;padding-top:24px;border-top:1px solid var(--line);}
.ft-row .en{letter-spacing:.04em;font-size:13px;}
.demo-note{margin-top:24px;font-size:13px;line-height:1.7;color:var(--note);max-width:80ch;}

/* =========================================================
   第5ラウンド（2026-09-05）：動き＝「光が左→右に走る」＋フォーム2つ
   初期（隠す）状態は html.js:not(.qa):not(.still) の配下だけに書く
   ＝ JS無効・?qa=1・prefers-reduced-motion は最初から最終状態。
   赤い光は 見出しの縦走査線／数字の1本／TEL下線／固定CTAのエッジライト の4種だけ。本文の行は暗くしない。
   ========================================================= */
.no-tr,.no-tr *,.no-tr::before,.no-tr::after{transition:none!important;animation:none!important;}

/* 見出し：赤い走査線（.h2::after）と、それに同期した clip-path の拭き出しは R1 で削除。
   文字は動かさない＝見出しは節が入ったところで静かに在る（UPLIFT §1-5「文字は動かさない」） */

/* 数字（.nums.rv-expose）：色だけで点く（g5→g8・0.1s・遅延＝桁の順）。赤い走査線は R1 で削除 */
.nums{position:relative;}
.num .n{transition:color .1s linear var(--d,0s),opacity .1s linear var(--d,0s);}
.js:not(.qa):not(.still) .rv-expose:not(.is-in) .num .n{color:var(--line-strong);opacity:.6;transition:none;}
.num:nth-child(2){--d:.17s;} .num:nth-child(3){--d:.33s;} .num:nth-child(5){--d:.25s;}
@media (max-width:760px){.num:nth-child(2){--d:.25s;} .num:nth-child(3){--d:0s;} .num:nth-child(4){--d:.25s;} .num:nth-child(5){--d:0s;}}
/* コスト低減の %CD・拠点の設立年・TEL：露光＝色だけ（線は出さない） */
.cd .pct{transition:color .1s linear var(--d,0s),opacity .1s linear var(--d,0s);}
.js:not(.qa):not(.still) .cd.rv-expose:not(.is-in) .pct{color:var(--line-strong);opacity:.6;transition:none;}
.cd li:nth-child(2){--d:.08s;} .cd li:nth-child(3){--d:.16s;} .cd li:nth-child(4){--d:.24s;} .cd li:nth-child(5){--d:.32s;}
.site .yr{transition:color .2s linear var(--d,.3s);}
.js:not(.qa):not(.still) .sites.rv-expose:not(.is-in) .site .yr{color:var(--line-strong);transition:none;}
.sites .site:nth-of-type(2){--d:.38s;} .sites .site:nth-of-type(3){--d:.46s;} .sites .site:nth-of-type(4){--d:.54s;}
.tel-big{transition:color .2s linear .1s;}
.js:not(.qa):not(.still) .reveal:not(.is-in) .tel-big{color:var(--line-strong);transition:none;}
.js:not(.qa):not(.still) .reveal:not(.is-in) .tel-big::after{transform:scaleX(0);transition:none;}

/* 写真（.rv-shut）：鋼板のシャッターが中央から上下へ開く（clip-path inset(50% 0)→0・0.5s）。写真自体は動かさない */
.band.rv-shut img,figure.rv-shut img,.field.rv-shut .big img{clip-path:inset(0);transition:clip-path .5s var(--ease);}
.field.rv-shut .big img{transition-duration:.4s;}
.js:not(.qa):not(.still) .band.rv-shut:not(.is-in) img,.js:not(.qa):not(.still) figure.rv-shut:not(.is-in) img,.js:not(.qa):not(.still) .field.rv-shut:not(.is-in) .big img{clip-path:inset(50% 0 50% 0);transition:none;}
.pf{transition:opacity .4s ease-out var(--d,.3s),border-color .4s ease-out var(--d,.3s),box-shadow .25s;}
.thumbs .pf:nth-child(2){--d:.36s;} .thumbs .pf:nth-child(3){--d:.42s;} .thumbs .pf:nth-child(4){--d:.48s;}
.js:not(.qa):not(.still) .field.rv-shut:not(.is-in) .pf{opacity:.3;border-color:var(--line);transition:none;}
.pf:hover,.pf:focus-visible{border-color:var(--ink);}
.rv-lit img{transition:opacity .4s ease-out;}
.js:not(.qa):not(.still) .rv-lit:not(.is-in) img{opacity:.4;transition:none;}
@media (max-width:760px){.thumbs .pf{--d:.3s;}}

/* 表・リスト（.rv-rule）：上罫線（g5）が左→右に引かれる（0.4s）。行は最初から最終色・動かない */
.rv-rule,.faq details.rv-rule{position:relative;border-top-color:transparent;}
.rv-rule::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--line-strong);transform-origin:0 50%;transition:transform .4s linear var(--rd,0s);pointer-events:none;}
.js:not(.qa):not(.still) .rv-rule:not(.is-in)::before{transform:scaleX(0);transition:none;}
.fields.rv-rule{--rd:.15s;} .site.rv-rule{--rd:.3s;} .faq details.rv-rule{--rd:.3s;}
/* details：開くときだけ中身がシャッターで開く（能動操作なので何度でも） */
@keyframes shut-open{from{clip-path:inset(50% 0 50% 0);opacity:.4;}to{clip-path:inset(0);opacity:1;}}
.js:not(.qa):not(.still) details.fold[open] .fold-body,.js:not(.qa):not(.still) .faq details[open]>p{animation:shut-open .3s var(--ease);}

/* 地球儀（.globe-wrap.rv）：本社ピン点灯(0.2s)→航路が opacity で出る(0.4s〜0.7s)→3拠点のピンとラベル点灯(0.7s〜0.9s)。線は描かない・球は動かない */
.globe-wrap .links line{transition:opacity .3s linear .4s;}
.globe-wrap .pin circle,.globe-wrap .pin text,.globe-wrap .pin .lead{transition:opacity .2s linear .7s;}
.globe-wrap .pin circle{transition-duration:.15s;}
.globe-wrap .pin-jp circle,.globe-wrap .pin-jp text{transition-delay:.2s;}
.js:not(.qa):not(.still) .globe-wrap:not(.is-in) .links line,.js:not(.qa):not(.still) .globe-wrap:not(.is-in) .pin circle,.js:not(.qa):not(.still) .globe-wrap:not(.is-in) .pin text,.js:not(.qa):not(.still) .globe-wrap:not(.is-in) .pin .lead{opacity:0;transition:none;}
.js:not(.qa):not(.still) .globe-wrap:not(.is-in) .pin-jp circle{animation:none;}
@media (max-width:760px){.globe-wrap .pin circle{filter:none;} .globe-wrap .pin-jp circle{animation:none;}}

/* CTA：章末は下線を最初から表示（hover で glow だけ）。固定ピルは見学後に下辺のエッジライトが左→右へ1回走る（既存ルールを改修） */
.sec-cta a.go{position:relative;}
.sec-cta a.go::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:1px;background:var(--line-strong);transform:scaleX(0);transform-origin:0 50%;transition:transform .25s linear;}
.sec-cta a.go:hover::after,.sec-cta a.go:focus-visible::after{transform:scaleX(1);}
/* TEL の下線は残す赤の1つ。にじみ（box-shadow）は R1 で削除＝線だけ */
/* SP の下部バー：上辺の赤線走査は置かない。押下感だけ */
@media (max-width:760px){.sp-bar a:active{background:var(--panel-2);}}

/* ---- フォーム（試作）：暗い面 g2＋g4 の1px枠・下辺 g5。focus で下辺に赤い光（opacity 0.2s）。入力欄は動かない ---- */
.form-block{margin-top:64px;max-width:880px;}
.form-block .note{margin-top:8px;margin-bottom:24px;}
.form{display:grid;grid-template-columns:1fr 1fr;gap:20px 24px;color-scheme:dark;}
.fi{display:flex;flex-direction:column;gap:8px;min-width:0;}
.fi.full,.form-foot{grid-column:1/-1;}
.fi label{font-size:13px;line-height:1.4;letter-spacing:0;color:var(--note);}
.fi label .req{color:var(--ink-2);margin-left:4px;}
.fi-in{position:relative;}
/* フォーカスの赤い下線は R1 で削除し、輪郭（g8 2px）に置き換えた。誤りの下線だけ残す */
.fi.is-err .fi-in::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--red-deep);pointer-events:none;}
/* 入力欄は面（g2）より一段沈める＝押せる物（btn・CTA）と沈む物（入力）で奥行きを作る（UPLIFT §1 面の段差） */
.fi input,.fi select,.fi textarea{display:block;width:100%;min-height:44px;padding:12px 12px;margin:0;font:inherit;font-size:16px;line-height:1.5;letter-spacing:0;color:var(--ink);background:var(--g1);border:1px solid var(--line);border-bottom-color:var(--line-strong);border-radius:4px;box-shadow:inset 0 1px 0 rgba(22,26,32,.55),inset 0 -1px 0 rgba(230,234,240,.05);outline:none;-webkit-appearance:none;appearance:none;}
.fi input:focus-visible,.fi select:focus-visible,.fi textarea:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-color:var(--line-strong);}
.fi textarea{resize:vertical;}
.fi select{padding-right:40px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23949da8' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;}
.fi-msg{font-size:14px;line-height:1.6;color:var(--ink-2);letter-spacing:0;}
.form-foot{display:flex;flex-direction:column;align-items:flex-start;gap:16px;margin-top:8px;}
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 32px;margin:0;font:inherit;font-size:16px;font-weight:700;letter-spacing:0;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:4px;cursor:pointer;overflow:hidden;transition:background .2s;}
/* 送信ボタン下辺の赤い線は R1 で削除（固定CTA と TEL 以外に赤を置かない） */
.btn:hover{background:rgba(255,255,255,.05);}
.btn:active{background:var(--panel-2);}
.btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
.fi-hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;}   /* 機械よけの見えない欄（2026-11-03）。人は入力しない */
.form-note{padding:16px 20px;background:var(--panel-2);border-left:2px solid var(--line-strong);font-size:14px;line-height:1.7;color:var(--ink-2);max-width:60ch;transition:opacity .4s ease-out;}
.js .form-note{opacity:0;}
.js .form-note.on{opacity:1;}
.fold-body .form{margin-top:4px;}
@media (max-width:640px){.form{grid-template-columns:1fr;gap:16px;}}

/* =========================================================
   TYPE-DECISION.md（2026-09-16）の実装。🔴 書体は替えない
   （Zen Kaku Gothic New 400/700 ＋ Barlow Condensed 500/700・stylesheet 1本・t3 の Barlow 600 は採らない）。
   既存行は書き換えず、ここで上書きする＝差し戻しはこのブロックを削るだけで済む。
   ========================================================= */

/* ---- §5① 表の見出し行：和文なのに欧文書体＋ラテン用の字間が当たっていた。和文へ戻す ---- */
thead th{font-family:var(--ff-jp);font-weight:700;font-size:13px;letter-spacing:0;}
th.r{font-family:var(--ff-jp);font-weight:700;font-size:13px;letter-spacing:0;}
td.r{font-family:var(--ff-en);font-weight:500;letter-spacing:.01em;}

/* ---- §5② 「（営業管理課）」も和文へ戻す。NTA/NSI はラテンなので欧文のまま ---- */
.cd .who,.cd .who b{font-family:var(--ff-jp);font-weight:400;font-size:13px;letter-spacing:0;}

/* ---- §5③ 和文の最小を13pxに統一＝12px以下を作らない
   （.brand span・figcaption span・.tour-sub .en はラテンなので §5③ の対象外＝12pxのまま） ---- */
.hdr-tel small,.fp .cap b,.site .yr small,.tl .y small,
.pol-card .eyebrow,.rail a,.rail a .lbl,
.globe-wrap .pin .lbl,.globe-wrap .pin .sub{font-size:13px;}

/* ---- §7(B) ISO9001／エコステージ2：1語を1書体1サイズで組む（6案とも未修正だった箇所）
   直す前：ISO＝Barlow 32px ＋ 9001＝和文 19.2px で1語が2書体2サイズに割れ、
           隣の「エコステージ 2」は和文が小さく数字が大きく、2枚で大小が反転していた。
   直した後：ISO9001＝全部 Barlow（ラテンだから欧文ロール）、
             エコステージ 2＝全部 和文（和文だから和文ロール）。どちらも1語の中では1書体1サイズ。
   和文は同じpxだと字面が広いので、2枚が同じ高さに見えるpxを当てる（32 と 20）。 ---- */
.plate b.jpw{font-family:var(--ff-jp);font-weight:700;font-size:clamp(18px,1.45vw,20px);letter-spacing:0;}
/* 数字タイルの ISO9001 も同じ欠陥（ISO だけ .62em＝39.7px／9001 は 64px）。1サイズに揃える */
.num .n.n-iso{font-size:clamp(30px,4.6vw,64px);letter-spacing:0;}

/* ---- 中間段：見出し48px→本文16px が3倍で直結していたところを埋める
   🔴 見出しの上に同じ語の小ラベル（.eyebrow）は復活させない＝文字は1字も足さない。
      段は「内容のある要素」だけで作る＝小見出し h3・リード・表の見出し。
   和文の段：48 / 32 / 24 / 20 / 18 / 16 / 14 / 13 ---- */
.h3,.nums-clients-h{font-size:clamp(20px,1.7vw,24px);line-height:1.4;text-wrap:balance;}
.pol-card h3,.site h3,.job h3,.news h3{font-size:20px;line-height:1.45;}
/* SPでは .field h3 が .h2 と同じ24pxになって段が潰れていた。SPだけ20pxへ落とす（PCは32pxのまま） */
.field h3{font-size:clamp(20px,2.6vw,32px);}

/* ---- リードの行長：max-width:46ch は和文では23字/行だった
   （ch＝「0」の字幅＝Zen Kaku では約0.5em なので、46ch は46字ではなく23字）。
   em に替えて34〜40字に収める。孤立行は text-wrap:balance で潰す
   （和文は行のどこでも折れるので、最終行の1語を繰り上げる pretty はほぼ効かない＝実測で孤立行3件のまま。
    2〜3行の短い段落は balance＝全行を均す方が効く）。
   🔴 .hero-sub は先方が9/9に見た「開いた瞬間」なので触らない ---- */
.lead{font-size:18px;line-height:1.7;color:var(--ink-2);max-width:36em;text-wrap:pretty;}
.note,.pf-note,.form-note{max-width:34em;text-wrap:pretty;}
/* 孤立行（最終行が最長行の15%未満）が実測で出た段落だけ balance にする。
   .lead/.note 全体を balance にすると孤立行は0になるが、balance は行を均すために
   使う幅そのものを縮めるので行長が 36字→24字（SPでは14字）に落ちる＝行長の要求を壊す。
   実測で割れた4段落だけに当てて、両方を満たす。文字は1字も足していない（クラスだけ）。 */
.tw-b{text-wrap:balance;}
.field p,.fold-body p,.pol-card p{text-wrap:pretty;}

/* =========================================================
   複数ページ版の追加（2026-09-21）。上は1枚版（shin-abc/a）の CSS をそのまま。
   ここから下だけが新しい部品＝ヘッダーのメニュー／下層ページの頭／パンくず／各ページのご案内／前後のページ。
   決まりは1枚版と同じ：文字は 12・13・14・16・20・24・32・48 の段だけ／余白は4の倍数／グレー8段＋赤1色／
   赤は「押させる場所」だけ（いま居るページの印は赤にしない）／影は使わない／英字の飾りラベルは置かない。
   ========================================================= */

/* ---- ヘッダー：主なページへのメニューと、相談ボタン ---- */
.hdr{gap:24px;}
.gnav{display:flex;align-items:center;gap:4px;margin-left:auto;}
.gnav a{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 12px;text-decoration:none;color:var(--ink-2);font-size:14px;letter-spacing:0;white-space:nowrap;transition:color .2s;}
.gnav a:hover{color:#fff;}
.gnav a::after{content:"";position:absolute;left:12px;right:12px;bottom:8px;height:1px;background:var(--line-strong);transform:scaleX(0);transform-origin:0 50%;transition:transform .25s linear;}
.gnav a:hover::after,.gnav a:focus-visible::after{transform:scaleX(1);}
.gnav a[aria-current="page"]{color:var(--ink);}
.gnav a[aria-current="page"]::after{transform:scaleX(1);background:var(--g8);}
.hdr-right{flex:none;gap:20px;}
.hdr-cta{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border:1px solid var(--line);border-radius:4px;background:rgba(22,26,32,.6);text-decoration:none;color:var(--ink);font-size:14px;font-weight:700;letter-spacing:0;white-space:nowrap;}
.hdr-cta::after{content:"";position:absolute;left:14%;right:14%;bottom:-1px;height:1px;background:var(--red-glow);}
.hdr-cta:hover{background:rgba(255,255,255,.05);}
.hdr-cta:hover::after{box-shadow:0 0 18px 1px var(--red-glow);}
.hdr-cta:active{background:var(--panel-2);}
.hdr-cta[aria-current="page"]{border-color:var(--line-strong);}
.menu-btn{display:none;align-items:center;gap:12px;min-height:44px;padding:0 16px;border:1px solid var(--line);border-radius:4px;background:rgba(22,26,32,.6);color:var(--ink);font:700 14px/1 var(--ff-jp);letter-spacing:0;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.menu-btn:hover{background:rgba(255,255,255,.05);}
.menu-btn .bars{position:relative;display:block;width:20px;height:8px;}
.menu-btn .bars i{position:absolute;left:0;right:0;height:1px;background:var(--ink);transition:transform .25s var(--ease),top .25s var(--ease);}
.menu-btn .bars i:first-child{top:0;} .menu-btn .bars i:last-child{top:7px;}
.menu-btn[aria-expanded="true"] .bars i:first-child{top:4px;transform:rotate(45deg);}
.menu-btn[aria-expanded="true"] .bars i:last-child{top:4px;transform:rotate(-45deg);}
/* 相談ボタンがヘッダーに入ったので、右下に浮く札（本文や表に重なっていた）は使わない */
.cta-pill{display:none!important;}
/* 幅が足りなくなったら、メニューはボタン1つに畳む */
@media (max-width:1279px){.gnav{display:none;} .menu-btn{display:inline-flex;}}
@media (max-width:900px){.hdr-cta{display:none;}}
@media (max-width:760px){.hdr-tel{display:none;} .menu-btn{padding:0 12px;gap:8px;}}
.no-js .menu-btn{display:none;}

/* ---- 畳んだメニューを開いた面（ヘッダーの下いっぱい） ---- */
.menu{position:fixed;left:0;right:0;top:68px;bottom:0;z-index:69;background:var(--g1);border-top:1px solid var(--line);overflow-y:auto;-webkit-overflow-scrolling:touch;opacity:0;transform:translateY(-8px);transition:opacity .25s var(--ease),transform .25s var(--ease);}
.menu[hidden]{display:none;}
.menu.on{opacity:1;transform:none;}
.menu-in{max-width:var(--w);margin:0 auto;padding:32px var(--pad) 96px;}
.menu-list{display:grid;grid-template-columns:1fr 1fr;gap:0 48px;border-top:1px solid var(--line-strong);}
.menu-list a{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:8px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);font-size:20px;font-weight:700;letter-spacing:0;}
.menu-list a i{font-style:normal;font-size:16px;font-weight:400;color:var(--note);transition:transform .2s var(--ease),color .2s;}
.menu-list a:hover i{transform:translateX(4px);color:var(--ink);}
.menu-list a[aria-current="page"]{color:var(--note);}
.menu-list a[aria-current="page"] i{visibility:hidden;}
.menu-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 28px;margin-top:40px;}
body.menu-open{overflow:hidden;}
body.menu-open #site-header{background:var(--g1);border-color:var(--line);backdrop-filter:none;-webkit-backdrop-filter:none;}
@media (max-width:760px){.menu{top:60px;} .menu-in{padding:16px var(--pad) 120px;} .menu-list{grid-template-columns:1fr;} .menu-list a{min-height:56px;font-size:16px;}}
@media (prefers-reduced-motion:reduce){.menu{transition:none;transform:none;}}

/* ---- 下層ページ：ヘッダーは最初から地の色。本文はヘッダーの下から始める ---- */
body.sub #site-header{background:rgba(22,26,32,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-color:rgba(255,255,255,.06);box-shadow:inset 0 1px 0 rgba(230,234,240,.07);}
body.sub main{padding-top:68px;}
body.sub main>.sec:first-child{border-top:0;}
@media (max-width:760px){body.sub main{padding-top:60px;}}
/* 下層ページの頭はどのページも同じ順＝題（＋リード）→ 帯写真 → 本文。帯のあとの本文は、生産設備の節と同じ間を空ける */
.page-body{padding-top:clamp(48px,7vw,96px);}
/* パンくず（いま居る場所） */
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;margin:-32px 0 32px;font-size:13px;line-height:1.7;color:var(--note);}
.crumb a{display:inline-flex;align-items:center;min-height:44px;color:var(--note);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-strong);}
.crumb a:hover{color:var(--ink);}
.crumb [aria-current]{color:var(--ink-2);}
@media (max-width:760px){.crumb{margin:-24px 0 16px;}}

/* ---- トップ：写真の上に載るヘッダーは、上から薄く地の色を敷いて文字を読めるようにする ---- */
body.top #site-header:not(.scrolled){background:linear-gradient(180deg,rgba(22,26,32,.72),rgba(22,26,32,0));}
body.top #site-header:not(.scrolled) .gnav a{color:var(--ink);}

/* ---- トップ：各ページのご案内（写真に頼らない索引。罫線と文字だけ） ---- */
.guide{display:grid;grid-template-columns:1fr 1fr;gap:0 64px;border-top:1px solid var(--line-strong);}
.guide li{border-bottom:1px solid var(--line);}
.guide a{display:grid;grid-template-columns:minmax(0,1fr) 24px;align-items:start;gap:4px 16px;padding:24px 0;text-decoration:none;color:var(--ink);}
.guide a b{grid-column:1;font-size:24px;line-height:1.4;letter-spacing:0;font-feature-settings:"palt";}
.guide a span{grid-column:1;font-size:14px;line-height:1.7;color:var(--note);max-width:34em;text-wrap:pretty;}
.guide a i{grid-column:2;grid-row:1;align-self:center;font-style:normal;font-size:16px;color:var(--note);transition:transform .2s var(--ease),color .2s;}
.guide a:hover b{color:#fff;} .guide a:hover i{transform:translateX(4px);color:var(--ink);}
.guide a:active{background:var(--panel);}
@media (max-width:860px){.guide{grid-template-columns:1fr;} .guide a{padding:20px 0;} .guide a b{font-size:20px;}}
.more{margin-top:24px;}
.more a{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--ink);font-size:14px;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--line-strong);}
.more a:hover{color:#fff;text-decoration-color:var(--ink);}

/* ---- 下層ページの末尾：前後のページ ---- */
.pager{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line-strong);background:var(--g1);}
.pager a{display:flex;flex-direction:column;justify-content:center;gap:4px;min-height:120px;padding:24px var(--pad);text-decoration:none;color:var(--ink);transition:background .2s;}
.pager a:hover{background:var(--panel);}
.pager a+a{border-left:1px solid var(--line);}
.pager a.next{align-items:flex-end;text-align:right;}
.pager small{font-size:13px;color:var(--note);letter-spacing:0;}
.pager b{font-size:20px;line-height:1.4;letter-spacing:0;font-feature-settings:"palt";}
.pager .none{visibility:hidden;}
@media (max-width:760px){.pager a{min-height:96px;padding:16px var(--pad);} .pager b{font-size:16px;}}
/* フッターの一覧は、いま居るページを薄くする */
.ft-nav a[aria-current="page"]{color:var(--note);}

/* ---- スマホ：4列の一覧（設備一覧・測定機一覧）は、横へ送らなくても台数まで読める形に組み替える ----
   1枚版は表をそのまま横スクロールに任せていて、右端の「台数」の列が画面の外に隠れていた（2026-09-21 指摘）。
   1行を2段に：上段＝種別と台数／下段＝メーカー名と機種名。見出し行は読み上げ用に残して画面からは外す。 */
@media (max-width:760px){
  .tbl{overflow-x:visible;}
  table.list4,table.list4 tbody{display:block;}
  table.list4 thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
  table.list4 tr{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 12px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--line);}
  table.list4 th,table.list4 td{display:block;padding:0;border:0;}
  table.list4 tbody th{grid-column:1/3;grid-row:1;white-space:normal;color:var(--ink-2);}
  table.list4 td.r{grid-column:3;grid-row:1;}
  table.list4 td:nth-of-type(1){grid-column:1;grid-row:2;color:var(--note);}
  table.list4 td:nth-of-type(2){grid-column:2/4;grid-row:2;color:var(--ink);}
  table.list4 tfoot tr{border-bottom:0;}
  table.list4 tfoot th{grid-column:1/3;}
  details.fold .fold-body{padding:4px 16px 16px;}
  details.fold summary{padding:16px;}
}
/* 海外拠点：1枚版では見出しのすぐ下に地図が続くので間を 24px に詰めていた。下層ページでは見出しの下に帯写真が入るので、
   ほかのページと同じ間に戻す（上の余白もほかのページと同じ 96px に） */
body.sub .globe-sec{padding-top:var(--gap);}
body.sub .globe-sec .sec-head{margin-bottom:clamp(40px,6vw,72px);}

/* ---- 全ページ共通（2026-09-21 ページ別設計の要望をまとめた分） ---- */
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
[id]{scroll-margin-top:92px;}
@media (max-width:760px){[id]{scroll-margin-top:84px;}}

/* =========================================================
   面の段（2026-09-21・のっぺり対策）
   下層ページは1節＝1色になりがちで、同じ暗い1色が1画面の8〜9割を占めると平らに見える（実測：80%超が22画面）。
   色は足さない。A案が元から持っている3つの床（g1／g2／g3）を、本文の塊ごとに替える＝1枚版が節ごとにやっていたのと同じこと。
     .floor  … その塊の床を全幅で替える（箱を置くのではなく、床の色が替わる）。既定は g2、.f1＝g1、.f3＝g3。
               box-shadow はぼかし0の「塗り足し」で、影としては使っていない。
     .zebra  … 台帳の偶数行にうすい面。行を目で追いやすくし、表の中に階調を作る。
   ========================================================= */
.floor{--floor:var(--g2);position:relative;background:var(--floor);box-shadow:0 0 0 100vmax var(--floor),0 -1px 0 100vmax var(--g4);clip-path:inset(-1px -100vmax 0);}
.floor.f1{--floor:var(--g1);}
.floor.f3{--floor:var(--g3);}
/* 上端の1pxの線は2つ目の塗り足し（1px上へずらした g4）で引く。疑似要素を画面の外まで伸ばすと横方向のはみ出しになるので使わない */
.floor.to-end{padding-bottom:var(--gap);margin-bottom:calc(var(--gap) * -1);}   /* 節の終わりまで床を伸ばす */
.zebra>li:nth-child(even),.zebra>div:nth-child(even),table.zebra tbody tr:nth-child(even)>*{background:rgba(22,26,32,.35);}  /* 縞は床より暗い側へ＝縞の上の補足（g6）が 4.5:1 を割らない */

/* ---- 面の段差を広げた分の帳尻（2026-09-28）：g3 の床（.panel2／.f3）の上では g6 の補足が 3.9:1 で読みにくいので、一段上げる ---- */
.panel2,.floor.f3{--note:var(--g7);}

/* =========================================================
   動きの部品（2026-10-02）：面の起き上がり [data-tilt]／奥行きの視差 [data-depth]／
   スクロールで映像を進める [data-scrub]／画面内だけのループ video[data-auto]／AI素材の札 figure[data-ai]
   動く状態は html.js:not(.qa):not(.still):not(.sx-off) の配下だけに書く＝JS無効・?qa=1・動きを止める設定・データ節約では
   最初から最終状態（平ら・正位置・ポスター）。影・発光・時間で進む拡大は使わない。
   差し戻しはこのブロックと site.js の同名ブロックを消すだけ。
   ========================================================= */

/* 1) 面の起き上がり：奥へ寝た面が、送るほど正面へ起きる（送りに比例・時間では動かない）。
      既定＝下辺を軸に前後（rotateX）。data-tilt="l"／"r"＝外側の縦辺を軸に左右（rotateY・PCだけ。2枚並びの左右に）。
      🔴 .reveal と同じ要素に付けない（どちらも transform を使う）。.rv／.rv-shut とは併用できる */
[data-tilt]{--tilt:8deg;--tp:1;}
.js:not(.qa):not(.still):not(.sx-off) [data-tilt]{transform:perspective(var(--persp,1400px)) rotateX(calc(var(--tilt) * (1 - var(--tp))));transform-origin:50% 100%;}
.js:not(.qa):not(.still):not(.sx-off) [data-tilt="l"]{transform:perspective(var(--persp,1400px)) rotateY(calc(var(--tilt) * (1 - var(--tp))));transform-origin:0 50%;}
.js:not(.qa):not(.still):not(.sx-off) [data-tilt="r"]{transform:perspective(var(--persp,1400px)) rotateY(calc(var(--tilt) * -1 * (1 - var(--tp))));transform-origin:100% 50%;}
.band[data-tilt]{--tilt:6deg;}                       /* 全幅の帯は控えめ */
.sx-live[data-tilt]{will-change:transform;}
@media (max-width:760px){
  [data-tilt],.band[data-tilt]{--tilt:4deg;--persp:900px;}
  .js:not(.qa):not(.still):not(.sx-off) [data-tilt="l"],.js:not(.qa):not(.still):not(.sx-off) [data-tilt="r"]{transform:perspective(var(--persp)) rotateX(calc(var(--tilt) * (1 - var(--tp))));transform-origin:50% 100%;}
}

/* 2) 奥行きの視差：枠（[data-depth]）は動かず、中の .sx-layer（img・canvas・video）だけが送りより遅く動く。
      振れ幅 --dd と、はみ出しを埋める倍率 --ds は JS が枠の高さから計って入れる（倍率は最大1.08・一度決めたら変えない）。
      --oy＝写真の基準点の縦位置（object-position の y と同じ値。下端合わせの帯は 1） */
[data-depth]{--depth:24px;--dd:0px;--dp:.5;--ds:1;--oy:.5;overflow:hidden;}
.js:not(.qa):not(.still):not(.sx-off) [data-depth] .sx-layer{translate:calc(var(--mx,0) * var(--mpx,0px)) calc(var(--dd) * 2 * (var(--dp) - 1 + var(--oy)) + var(--my,0) * var(--mpy,0px));scale:var(--ds);transform-origin:50% calc(var(--oy) * 100%);}
.sx-live[data-depth] .sx-layer{will-change:translate;}
@media (max-width:760px){[data-depth]{--depth:12px;}}

/* 3)・4) 映像の枠 .sx-frame（全幅の帯ならその .band）。大きさは img が決め、canvas（3）／video（4）は上に重ねる。
      canvas は最初のコマを描くまで透明＝黒い一瞬を出さない。video は止めた時・再生できない時に隠れて img が見える */
.sx-frame{position:relative;overflow:hidden;background:var(--g1);}
.sx-frame:not(.band){aspect-ratio:var(--ar,16/9);}
.sx-frame:not(.band)>img{display:block;width:100%;height:100%;object-fit:cover;}
.sx-frame>canvas,.sx-frame>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.sx-frame>canvas{opacity:0;}
.sx-frame.is-drawn>canvas{opacity:1;}
.sx-frame>video.is-off{display:none;}
html:not(.js) .sx-frame>video,html:not(.js) video[data-auto]{display:none;}   /* JS 無効の Chrome は video に操作盤を出してポスター（下の img）を隠す */
/* シャッター（.rv-shut）は img だけに掛かっている＝上に重ねた canvas・video にも同じシャッターを掛ける（掛けないと開く前に映像が見える） */
.rv-shut .sx-frame>canvas,.rv-shut.sx-frame>canvas,.rv-shut .sx-frame>video,.rv-shut.sx-frame>video{clip-path:inset(0);transition:clip-path .5s var(--ease),opacity .2s linear;}
.js:not(.qa):not(.still) .rv-shut:not(.is-in) .sx-frame>canvas,.js:not(.qa):not(.still) .rv-shut.sx-frame:not(.is-in)>canvas,
.js:not(.qa):not(.still) .rv-shut:not(.is-in) .sx-frame>video,.js:not(.qa):not(.still) .rv-shut.sx-frame:not(.is-in)>video{clip-path:inset(50% 0 50% 0);transition:none;}

/* 5) AI素材の札（右上）と説明（figcaption の2行目）。赤は使わない・和文13px（§5③）。札はシャッターが開いてから出る */
figure[data-ai]{position:relative;}
.ai-tag{position:absolute;top:12px;right:12px;z-index:3;padding:4px 8px;font-size:13px;line-height:1.4;letter-spacing:0;color:var(--g8);background:rgba(22,26,32,.78);border:1px solid var(--g5);border-radius:2px;pointer-events:none;transition:opacity .2s linear .35s;}
.js:not(.qa):not(.still) .rv-shut:not(.is-in) .ai-tag{opacity:0;transition:none;}
/* 既存の .band／.eq-grid／.co-photo の「figcaption span」（欧文12px・字間.04em）に負けないよう、figure[data-ai] から書く */
figure[data-ai] figcaption .ai-note{display:block;margin:4px 0 0;font-family:var(--ff-jp);font-weight:400;font-size:13px;line-height:1.6;letter-spacing:0;color:var(--note);}
figure[data-ai].band figcaption .ai-note{color:rgba(255,255,255,.72);}
figure[data-ai] figcaption .ai-note{word-break:auto-phrase;}   /* 説明の末尾「ます。」だけが次の行に残らないよう文節で折る（対応ブラウザのみ） */
@media (max-width:760px){.ai-tag{top:8px;right:8px;padding:2px 6px;}}

/* AI の札の出し方：生成（gen）は常に出す。実写に動きを付けた物（move）は、生成の層が実際に見えている時だけ（止めれば実写に戻るため） */
figure[data-ai="move"] .ai-tag,figure[data-ai="move"] figcaption .ai-note{display:none;}
.js:not(.qa):not(.still):not(.sx-off) figure[data-ai="move"].ai-on .ai-tag,
.js:not(.qa):not(.still):not(.sx-off) figure[data-ai="move"].ai-on figcaption .ai-note{display:block;}
@media (max-width:860px){.sx-pc[data-tilt]{transform:none!important;}}   /* PC だけ傾ける */
@media print{[data-tilt],[data-depth] .sx-layer{transform:none!important;translate:none!important;scale:none!important;}.ai-tag{position:static;display:inline-block;}}

/* 実写に動きを付けた物（move）は、再生が始まってから0.3秒で重ねる（実写→動画の切り替わりで揺れる枝などの輪郭が跳ばないように） */
.js:not(.qa):not(.still):not(.sx-off) figure[data-ai="move"] .sx-frame>video,
.js:not(.qa):not(.still):not(.sx-off) figure[data-ai="move"].sx-frame>video{opacity:0;transition:clip-path .5s var(--ease),opacity .3s linear;}
.js:not(.qa):not(.still):not(.sx-off) figure[data-ai="move"].ai-on .sx-frame>video,
.js:not(.qa):not(.still):not(.sx-off) figure[data-ai="move"].ai-on.sx-frame>video{opacity:1;}
/* マウスの動きに合わせて、写真がわずかに奥行きをもって動く（2026-10-02）。マウスを使う PC だけ。動く幅は横8px・縦5px（枠からはみ出さない範囲） */
@media (hover:hover) and (pointer:fine){
  .js:not(.qa):not(.still):not(.sx-off) [data-depth]{--mpx:8px;--mpy:5px;}
}

/* ============================================================
   2026-11-06 スマホの見え方の最適化（あきと「iPhoneやスマホでの見え方を最適化」）
   iPhone SE（375×667）・iPhone 14（390×844）・iPhone 14 Pro Max（430×932）を Safari と同じ WebKit で実測（qa/mobile_check.py）
============================================================ */
@media (max-width:760px){
  /* 最後の行に1〜2字だけ残さない：見出しは行の長さをそろえ、文は最後の行が短くなりすぎないよう組む（効かない古い端末は今までどおり） */
  main h1,main h2,main h3,main h4,main dt,main .show-kind,main .sheet-h{text-wrap:balance;}
  main p,main li,main dd,main figcaption,main td,main .ln{text-wrap:pretty;}
  /* 左上の社名のリンクを指で押しやすく（高さ32→44px） */
  .brand{min-height:44px;justify-content:center;}
  /* 工程の帯の番号（01〜04）12→13px */
  .ix-flow-cap .en{font-size:13px;}
}
/* 2026-11-06 iPhone SE（幅375px）で下の電話の帯が2行に割れていた（「お電/話」「0266-53-/3400」）→ 折らない・幅の狭い画面では字を少し小さく */
@media (max-width:760px){ .sp-bar a{white-space:nowrap;} }
@media (max-width:400px){ .sp-bar a{gap:6px;font-size:13px;} .sp-bar a b{font-size:18px;letter-spacing:.02em;} }