.flow-head { margin-bottom: clamp(48px, 6vw, 88px); }
.flow-track { position: relative; }
.flow-line { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--gold); opacity: 0.7; }
.flow-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(16px, 2.5vw, 40px); }
.flow-step { position: relative; padding-top: 36px; }
.flow-dot { position: absolute; left: 0; top: -4px; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); }
.flow-num { display: block; font-style: italic; }
.flow-title { font-size: 1.125rem; margin-top: 14px; }
.flow-text { margin-top: 10px; font-size: var(--fs-small); color: var(--muted); line-height: 1.8; }
@media (max-width: 860px) {
  .flow-line { left: 4px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .flow-steps { grid-template-columns: 1fr; gap: 36px; }
  .flow-step { padding: 0 0 0 40px; }
  .flow-dot { left: 0; top: 14px; }
  .flow-num { font-size: 2.25rem; }
  .flow-title { margin-top: 8px; }
}
/* 粒子が動くとき（.stage-motion）は、粒の金の線と5つの点が波打ちながら重なるので、HTML の線と点はごく薄くして二重に見せない
   （js/particles/engine.js が .flow-line と .flow-dot の位置に粒を合わせる） */
.stage-motion .flow-line { opacity: 0.12; }
.stage-motion .flow-dot { opacity: 0.2; }