@charset "utf-8";
/* ================================================================
   process.css — 7 工程の図とアニメ(トップと設備ページで共用)。site.css の後に読む
   - 図(SVG)と process.js の数字は対になっている: CX = 50 + 100*i、UP = 43、DN = 128。
     SVG の横幅 700・7 槽の経路もこれが前提。片方だけ動かすとずれる
   - 1180px が切替点(未満は縦の流れ)。site.css のメニューの切替点・process.js と揃えること
   - 固定表示の長さは .pc-live .process__runway の +280vh が決める
   - 色は下の変数。SVG に色を直書きしない
   ================================================================ */
:root{
  /* ライン図: 槽の壁・内側、治具(ハンガー)、部品、しずく、各槽の液(1〜8)。液はミント系の淡い色で控えめに */
  --tank-wall:var(--sheet);
  --tank-in:#FAFCF9;
  --jig:var(--mint-deep);
  --jig-bar:#8E9C96;
  --part:#DCE2E4;
  --drip:#5E8F7A;
  --liq-1:#C3DCCD;--liq-2:#B5D2C6;--liq-3:#C6DDD6;--liq-4:#B4CFC3;
  --liq-5:#C2DAD6;--liq-6:#ABC6BF;--liq-7:#BFD7D2;--liq-8:#A9C2C4;
}

.process{background:var(--paper-2);position:relative}
.process__head{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:16px 72px;align-items:end;padding-top:clamp(88px,8vw,120px);margin-bottom:36px}
.process__stage{padding:0 0 clamp(88px,8vw,120px)}
.process__head p{max-width:36em}
.process__head .note{font-size:14px;margin-top:6px;color:var(--ink-2)}
.line{position:relative}
.line__svg{width:100%;height:auto;overflow:visible}
.line__svg .route{fill:none;stroke:var(--navy);stroke-opacity:.42;stroke-width:1.2;stroke-dasharray:3 4}
.line__svg .route-done{fill:none;stroke:var(--navy);stroke-width:1.6;opacity:0}
.line__svg .route-arrow{fill:var(--navy);opacity:.55}
.line__svg .liq{fill-opacity:.92}
.line__svg .surf,.tank__icon .surf{stroke:var(--navy);stroke-opacity:.3;stroke-width:1}
.line__svg .tag rect{fill:var(--sheet);stroke:var(--navy);stroke-width:1}
/* 番号札は見出しと同じ明朝 */
.line__svg .tag text{font-family:var(--mincho);font-size:12px;font-weight:700;fill:var(--navy);text-anchor:middle}
.line__svg .tkf.is-active .tag rect{fill:var(--navy)}
.line__svg .tkf.is-active .tag text{fill:var(--white)}
.line__svg .tkf.is-active .liq{fill-opacity:.55}
.drips{opacity:0}
.drip{fill:var(--drip)}
/* ライン図の部品(色は :root の変数) */
.line__svg .ln-f,.tank__icon .ln-f{fill:var(--navy)}
.line__svg .ln-s,.tank__icon .ln-s{stroke:var(--navy);fill:none}
.line__svg .stop{fill:var(--navy);stroke:var(--navy);stroke-width:1}
.line__svg .wheel{fill:var(--tank-in);stroke:var(--navy);stroke-width:1.1}
.tank-in{fill:var(--tank-in)}
.tank-wall{fill:var(--tank-wall);stroke:var(--navy);stroke-width:1.3;stroke-linejoin:round}
.jig-hook{fill:var(--navy)}
.jig-arm-o{fill:none;stroke:var(--navy);stroke-width:4;stroke-linejoin:round}
.jig-arm{fill:none;stroke:var(--jig);stroke-width:2.2;stroke-linejoin:round}
.jig-tape{stroke:var(--gold);stroke-width:3;stroke-linecap:butt}
.jig-bar{fill:var(--jig-bar);stroke:var(--navy);stroke-width:1}
.jig-o{fill:none;stroke:var(--navy);stroke-width:3.6;stroke-linecap:square}
.jig-frame{fill:none;stroke:var(--jig);stroke-width:2;stroke-linecap:square}
.part-o{fill:none;stroke:var(--navy);stroke-width:2.9;stroke-linecap:round}
.part{fill:none;stroke:var(--part);stroke-width:1.4;stroke-linecap:round}
.line__steps{list-style:none;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));margin-top:10px}
.tank{position:relative;padding:14px 10px 4px 12px;border-left:1px dashed rgba(23,28,97,.28)}
.tank:first-child{border-left-color:transparent}
.tank__icon{display:none}
.tank__name{display:flex;align-items:center;gap:8px;font-size:18px;line-height:1.35;letter-spacing:.02em}
/* 7 列のときは列幅に合わせて工程名を縮め、「亜鉛めっき」「クロメート」を 1 行に保つ */
@media (min-width:1180px){.tank__name{font-size:clamp(15px,1.25vw,18px);gap:6px;white-space:nowrap}}
.tank__no{flex:none;display:inline-grid;place-items:center;width:25px;height:25px;font-family:var(--mincho);font-size:14.5px;font-weight:700;line-height:1;position:relative;z-index:0}
.tank__no::before{content:"";position:absolute;inset:0;z-index:-1;border:1px solid var(--navy);background:var(--sheet);border-radius:1px}
.tank.is-active .tank__no{color:var(--white)}
.tank.is-active .tank__no::before{background:var(--navy)}
.tank__desc{margin-top:8px;font-size:16px;line-height:1.72;letter-spacing:0;word-break:auto-phrase}
.tank__power{display:flex;align-items:center;gap:5px;margin-top:8px;font-size:13px;font-weight:700;line-height:1.4;letter-spacing:.02em}
.bolt{width:10px;height:14px;fill:var(--navy)}

/* live (JS + motion OK + wide + tall): sticky stage, scroll moves the jig */
.pc-live .tank.is-active{background:var(--sheet);box-shadow:inset 0 2px 0 var(--navy)}
.pc-live .tank.is-active+.tank{border-left-color:transparent}
.pc-live .process__head{margin-bottom:0}
.pc-live .process__runway{height:calc(100vh - var(--header-h) + 280vh)}
.pc-live .process__stage{position:sticky;top:var(--header-h);height:calc(100vh - var(--header-h));display:flex;flex-direction:column;justify-content:center;padding:0}
.pc-live .line__svg .route-done{opacity:1}
.pc-live .line__svg.is-dripping .drips{opacity:1}
.pc-live .drip{animation:drip .62s linear infinite}
.pc-live .drip--1{animation-delay:-.2s}.pc-live .drip--2{animation-delay:-.41s}.pc-live .drip--3{animation-delay:-.1s}.pc-live .drip--4{animation-delay:-.31s}
@keyframes drip{from{transform:translateY(0);opacity:1}to{transform:translateY(24px);opacity:0}}

/* 1180 未満: 工程図は縦の流れ(process.js の SP_Q と対。値を揃えること) */
@media (max-width:1179.98px){
  .line__svg{display:none}
  .line__steps{display:block;position:relative;margin-top:8px;max-width:680px;--fill:0}
  .line__steps::before,.line__steps::after{content:"";position:absolute;left:35px;width:2px;top:40px;bottom:40px}
  .line__steps::before{background:repeating-linear-gradient(to bottom,var(--navy) 0 4px,transparent 4px 9px);opacity:.45}
  .line__steps::after{background:var(--navy);width:3px;left:34.5px;transform-origin:top;transform:scaleY(var(--fill));opacity:0}
  .sp-live .line__steps::after{opacity:1}
  .tank{display:grid;grid-template-columns:72px minmax(0,1fr);column-gap:20px;padding:0 0 36px;border:0}
  .tank:last-child{padding-bottom:0}
  .tank__icon{display:block;grid-row:span 3;width:72px;height:64px;overflow:visible;position:relative;z-index:1}
  .tank__name{padding-top:4px}
  .tank__desc{max-width:34em;letter-spacing:.02em}
  .sp-jig{opacity:0;transform:translate(36px,-12px);transition:transform .55s cubic-bezier(.4,0,.2,1),opacity .3s}
  .sp-live .tank.is-active .sp-jig{opacity:1;transform:translate(36px,26px)}
  .tank__icon .liq{fill-opacity:.92}
  .sp-live .tank.is-active .tank__icon .liq{fill-opacity:.5}
}

@media (max-width:960px){
  .process__stage{padding:0 0 76px}
  .process__head{grid-template-columns:1fr;margin-bottom:28px;padding-top:76px}
}

@media (max-width:374.98px){
  .tank{grid-template-columns:56px minmax(0,1fr);column-gap:14px}
  .tank__icon{width:56px;height:50px}
  .line__steps::before{left:27px}
  .line__steps::after{left:26.5px}
}