.flow-steps { max-width:840px; margin:0 auto; }
.flow-step { display:grid; grid-template-columns:80px 1fr; gap:0 36px; position:relative; padding-bottom:56px; }
.flow-step:last-child { padding-bottom:0; }
.flow-step::before { content:""; position:absolute; left:39px; top:80px; bottom:0; width:1px; background:var(--line); }
.flow-step:last-child::before { display:none; }
.step-num { display:grid; place-items:normal; }
.step-circle { width:80px; height:80px; border-radius:50%; background:var(--paper); border:1.5px solid var(--accent); display:grid; place-items:center; flex-shrink:0; }
.step-circle .n { font-family: var(--latin); font-weight: 600; font-size:22px; letter-spacing:.04em; color:var(--accent); }
.step-body { padding-top:16px; padding-bottom:0; }
.step-body .tag { font-family: var(--latin); font-weight: 600; font-size:12px; letter-spacing:.18em; color:var(--accent); margin-bottom:10px; }
.step-body h3 { font-family:var(--serif); font-size:22px; font-weight:500; margin:0 0 12px; }
.step-body p { font-size:14px; line-height:2; color:var(--ink-soft); margin:0 0 12px; }
.step-body .note { background:color-mix(in oklab,var(--accent) 7%,transparent); border-left:3px solid var(--accent); padding:12px 16px; font-size:13px; color:var(--accent); line-height:1.8; margin-top:14px; }
.step-img { margin-top:18px; aspect-ratio:16/7; position:relative; overflow:hidden; max-width:540px; }
.step-img .ph { position:absolute; inset:0; }

.period-band { background:var(--bg-soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:64px 0; }
.period-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
@media(max-width:800px){ .period-grid{grid-template-columns:repeat(2,1fr)} }
.period-cell { padding:22px 20px; border-left:1px solid var(--line); }
.period-cell:first-child { border-left:none; }
@media(max-width:800px){ .period-cell:nth-child(3){border-left:none} }
.period-cell .lab { font-family: var(--latin); font-weight: 600; font-size:12px; letter-spacing:.14em; color:var(--accent); margin-bottom:10px; }
.period-cell .val { font-family:var(--serif); font-size:32px; font-weight:500; line-height:1.1; }
.period-cell .val small { font-size:14px; margin-left:4px; color:var(--ink-soft); }
.period-cell .jp { font-size:12px; color:var(--ink-soft); margin-top:8px; line-height:1.7; }