/* Flow: generated hover + responsive vars */
.page-flow{--rv-lineLeft:192px;--rv-tlCols:160px 64px minmax(0,1fr)}
@media (max-width:1099.98px){.page-flow{--rv-lineLeft:18px;--rv-tlCols:0px 36px minmax(0,1fr)}}
@media (hover:hover){
  .hv-flow-1:hover{color:var(--gold-light) !important}
  .hv-flow-2:hover{background-position:0% 0 !important;color:#0B1026 !important}
  .hv-flow-3:hover{background:rgba(201,169,110,0.12) !important;color:var(--gold-light) !important}
}
.hv-flow-1:focus-visible{color:var(--gold-light) !important}
.hv-flow-2:focus-visible{background-position:0% 0 !important;color:#0B1026 !important}
.hv-flow-3:focus-visible{background:rgba(201,169,110,0.12) !important;color:var(--gold-light) !important}

/* ---------- 縦タイムライン（flow.js が --p と .is-lit を制御） ----------
   既定（JSなし・動きを減らす設定）は全ステップ点灯・線は最後まで。
   演出時（html.js-anim）は未到達のステップの「番号・ドットだけ」を薄くする（F-1）。 */
.flow-tl{--p:1}
.js-anim .flow-tl{--p:0}

.flow-num{transition:opacity 0.6s ease-out}
.js-anim .flow-tl [data-step]:not(.is-lit) .flow-num{opacity:0.4}

.flow-dot{
  position:absolute;left:50%;top:6px;width:13px;height:13px;margin-left:-6.5px;border-radius:50%;
  border:1px solid #E8D5A8;background:#C9A96E;
  box-shadow:0 0 0 5px #F7F5F0, 0 0 16px 6px rgba(201,169,110,0.55);
  transition:background 0.5s, box-shadow 0.5s, border-color 0.5s;
}
.js-anim .flow-tl [data-step]:not(.is-lit) .flow-dot{
  border-color:rgba(126,99,52,0.5);background:var(--paper);box-shadow:none;
}