/* 石垣商店 モーション「電気の通り道」 igm-flow v1 (2026-09-28)
   既存テーマ ishigaki-social-v23 の色(--navy/--blue/--ink/--line/--ice)に合わせる。すべて .igm- で閉じる */
.igm-flow{
  --igm-navy:#0B455C; --igm-blue:#0067A3; --igm-ink:#173A49; --igm-muted:#536671;
  --igm-line:#c9d5da; --igm-ice:#edf1f2; --igm-copper:#C8753A; --igm-copper-hi:#EFA66A;
  --igm-light:#F4B860;
  --igm-dur-quick:160ms; --igm-dur-base:280ms; --igm-dur-scene:480ms;
  --igm-ease-out:cubic-bezier(.2,.7,.2,1); --igm-ease-inout:cubic-bezier(.65,0,.35,1);
  position:relative; color:var(--igm-ink); font-family:inherit;
}
.igm-flow *{box-sizing:border-box}

/* 既定(JSなし・動き停止)= 完成した図と4つの説明を縦に並べる */
.igm-flow__stage{padding:48px 0}
.igm-flow__head{max-width:1120px;margin:0 auto 24px;padding:0 24px}
.igm-flow__kicker{display:flex;align-items:center;gap:12px;margin:0 0 12px;font-size:14px;font-weight:700;letter-spacing:.08em;color:var(--igm-blue)}
.igm-flow__kicker::before{content:"";width:40px;height:2px;background:var(--igm-copper)}
.igm-flow__title{margin:0;font-size:clamp(24px,3.2vw,36px);line-height:1.4;font-weight:700;letter-spacing:.02em;color:var(--igm-ink);text-wrap:balance;word-break:auto-phrase}
.igm-flow__figure{max-width:1120px;margin:0 auto;padding:0 24px}
.igm-flow__title .igm-ph{display:inline-block}
.igm-flow__svg{display:block;width:100%;height:auto}
.igm-flow__svg--wide{aspect-ratio:1200/470}
.igm-flow__svg--tall{aspect-ratio:390/740}
.igm-flow__head,.igm-flow__figure,.igm-flow__note,.igm-flow__steps,.igm-flow__bar{width:100%}
.igm-flow__svg--tall{display:none}
.igm-flow__note{max-width:1120px;margin:8px auto 0;padding:0 24px;font-size:12px;color:var(--igm-muted)}
.igm-flow__steps{list-style:none;max-width:1120px;margin:24px auto 0;padding:0 24px;display:flex;flex-wrap:wrap;gap:24px}
.igm-flow__step{flex:1 1 220px;border-top:1px solid var(--igm-line);padding-top:16px}
.igm-flow__num{display:block;font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--igm-blue);margin-bottom:6px}
.igm-flow__step h3{margin:0 0 8px;font-size:18px;line-height:1.5;font-weight:700}
.igm-flow__step p{margin:0;font-size:15px;line-height:1.9;color:var(--igm-muted)}
.igm-flow__bar{display:none}

/* SVGの部品 */
.igm-ghost{fill:none;stroke:var(--igm-line);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.igm-wire{fill:none;stroke:var(--igm-navy);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.igm-bus{fill:none;stroke-width:24;stroke-linecap:round;stroke-linejoin:round}
.igm-bus-ghost{fill:none;stroke:var(--igm-ice);stroke-width:24;stroke-linecap:round;stroke-linejoin:round}
.igm-hole{fill:#fff;stroke:#9c5a2a;stroke-width:1}
.igm-icon{fill:#fff;stroke:var(--igm-navy);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.igm-coil{fill:none;stroke:var(--igm-navy);stroke-width:2.5;stroke-linecap:round}
.igm-lamp,.igm-win{fill:var(--igm-ice);stroke:none}
.igm-label{font-size:15px;font-weight:700;fill:var(--igm-ink);letter-spacing:.04em}
.igm-spark{fill:#fff}
.igm-spark--wire{fill:var(--igm-blue)}
.igm-glow{opacity:0}
.igm-flow .is-lit .igm-coil{stroke:var(--igm-copper)}
.igm-flow .is-lit .igm-lamp{fill:var(--igm-blue)}
.igm-flow .is-lit .igm-win{fill:var(--igm-light)}
.igm-flow .is-lit .igm-glow{opacity:1}

/* ===== 動きあり(JSが .is-motion を付けたときだけ) ===== */
.igm-flow.is-motion{height:340vh}
.igm-flow.is-motion .igm-flow__stage{position:sticky;top:0;height:100vh;height:100svh;padding:clamp(72px,10vh,112px) 0 24px;display:flex;flex-direction:column;justify-content:safe center;overflow:hidden}
.igm-flow.is-motion .igm-flow__figure{flex:0 1 auto;min-height:0}
.igm-flow.is-motion .igm-flow__svg{max-height:52vh;max-height:52svh;margin:0 auto}
.igm-flow.is-motion .igm-flow__steps{position:relative;display:block;min-height:128px}
.igm-flow.is-motion .igm-flow__step{position:absolute;left:24px;right:24px;top:0;max-width:640px;border-top:0;padding-top:0;
  opacity:0;transform:translateY(12px);transition:opacity var(--igm-dur-scene) var(--igm-ease-out),transform var(--igm-dur-scene) var(--igm-ease-out)}
.igm-flow.is-motion .igm-flow__step.is-current{opacity:1;transform:none}
.igm-flow.is-motion .igm-flow__bar{display:flex;gap:6px;max-width:1120px;margin:16px auto 0;padding:0 24px}
.igm-flow__bar span{flex:1;height:2px;background:var(--igm-line);position:relative;overflow:hidden;max-width:64px}
.igm-flow__bar i{position:absolute;inset:0;background:var(--igm-navy);transform-origin:left;transform:scaleX(0)}
.igm-flow.is-motion .igm-icon,.igm-flow.is-motion .igm-coil{transition:stroke var(--igm-dur-scene) var(--igm-ease-out)}
.igm-flow.is-motion .igm-lamp,.igm-flow.is-motion .igm-win{transition:fill var(--igm-dur-scene) var(--igm-ease-out)}
.igm-flow.is-motion .igm-glow{transition:opacity 800ms var(--igm-ease-out)}
.igm-flow.is-motion .igm-node{opacity:.35;transition:opacity var(--igm-dur-scene) var(--igm-ease-out)}
.igm-flow.is-motion .igm-node.is-on{opacity:1}
.igm-flow.is-motion .igm-hole{transform-box:fill-box;transform-origin:center;transform:scale(0);transition:transform var(--igm-dur-base) var(--igm-ease-out)}
.igm-flow.is-motion .igm-hole.is-on{transform:scale(1)}

/* スマホ: 縦の図に切り替え */
@media screen and (max-width:767px){
  .igm-flow__svg--wide{display:none}
  .igm-flow__svg--tall{display:block}
  .igm-flow.is-motion{height:380vh}
  .igm-flow.is-motion .igm-flow__stage{padding-top:72px}
  .igm-flow.is-motion .igm-flow__svg{max-height:56vh;max-height:56svh;width:auto;max-width:100%}
  .igm-flow.is-motion .igm-flow__steps{min-height:150px}
  .igm-flow.is-motion .igm-flow__bar{margin-top:24px}
  .igm-flow__head{margin-bottom:12px}
  .igm-flow__step h3{font-size:17px}
  .igm-flow__step p{font-size:14px;line-height:1.8}
}
@media (prefers-reduced-motion:reduce){
  .igm-flow *{transition:none!important;animation:none!important}
}

/* Integration: fit the supplied diagram within the available sticky viewport. */
.igm-flow.is-motion .igm-flow__head,.igm-flow.is-motion .igm-flow__bar,.igm-flow.is-motion .igm-flow__steps,.igm-flow.is-motion .igm-flow__note{flex-shrink:0}
.igm-flow.is-motion .igm-flow__figure{flex:1 1 0;min-height:0}
.igm-flow.is-motion .igm-flow__svg{height:100%;width:100%;max-height:100%;object-fit:contain}