/* 年末調整の流れの図（templates/_nencho_flow.html）。2 面で共有。色・余白・字は bc の値（--bc-*）だけ。ds の部品（migration.json の state ds） */
.bc .nf-flow { margin: 0; }
.bc .nf-flow__row { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: var(--bc-space-2); align-items: stretch; }
.bc .nf-flow__step { display: flex; flex-direction: column; gap: var(--bc-space-1); padding: var(--bc-space-3); background: var(--bc-surface); border: var(--bc-line) solid var(--bc-border); border-radius: var(--bc-radius-card); min-width: 0; }
.bc .nf-flow__no { align-self: flex-start; min-width: 1.75rem; padding: var(--bc-space-1) var(--bc-space-2); border-radius: var(--bc-radius-chip); background: var(--bc-brand-strong); color: var(--bc-bg); font-size: var(--bc-text-body); line-height: var(--bc-leading-table); text-align: center; font-weight: 700; }
.bc .nf-flow__label { font-size: var(--bc-text-body); line-height: var(--bc-leading-table); color: var(--bc-text); overflow-wrap: anywhere; }
.bc .nf-flow__when { font-size: var(--bc-text-body); line-height: var(--bc-leading-table); font-weight: 700; color: var(--bc-brand-strong); overflow-wrap: anywhere; }
.bc .nf-flow__note { font-size: var(--bc-text-body); line-height: var(--bc-leading); color: var(--bc-muted); overflow-wrap: anywhere; }
.bc .nf-flow__arrow { display: grid; place-items: center; color: var(--bc-muted); }
.bc .nf-flow__arrow svg { display: block; width: 1.5rem; height: 1.5rem; }
.bc .nf-flow figcaption { margin-top: var(--bc-space-2); font-size: var(--bc-text-body); line-height: var(--bc-leading); color: var(--bc-muted); max-width: 43rem; }
@media (max-width: 719px) {
  .bc .nf-flow__row { grid-template-columns: 1fr; }
  .bc .nf-flow__arrow svg { transform: rotate(90deg); }
}