/* FLOW: 丸を線でつなぐステッパー（web-design-parts diagrams.md「流れ・フローのデザイン」）。PCは横、スマホは縦タイムライン */
.j-flow{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0;counter-reset:none}
.j-flow__item{position:relative;padding:0 14px;text-align:center}
.j-flow__item::before{content:"";position:absolute;top:35px;left:calc(50% + 44px);width:calc(100% - 88px);border-top:3px dashed #314395;opacity:.55}
.j-flow__item::after{content:"";position:absolute;top:29px;left:calc(150% - 52px);width:12px;height:12px;border-top:3px solid #314395;border-right:3px solid #314395;transform:rotate(45deg)}
.j-flow__item:last-child::before,.j-flow__item:last-child::after{display:none}
.j-flow__num{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:70px;height:70px;margin:0 auto 16px;border-radius:50%;background:#314395;color:#fff;font-family:var(--f-teko,Teko,sans-serif);font-size:40px;line-height:1;font-weight:700;box-shadow:0 0 0 6px #fff}
.j-flow__item:last-child .j-flow__num{background:#fccc00;color:#111111}
.j-flow__title{margin:0 0 6px;font-size:18px;line-height:1.4;font-weight:700;color:#1e2a5c}
.j-flow__text{margin:0;font-size:14px;line-height:1.7;color:#1e2a5c}
@media(max-width:767px){
.j-flow{grid-template-columns:1fr;max-width:420px;margin:4px auto 0;padding:0 12px}
.j-flow__item{display:grid;grid-template-columns:56px 1fr;column-gap:16px;align-items:start;padding:0 0 28px;text-align:left}
.j-flow__item:last-child{padding-bottom:0}
.j-flow__item::before{top:56px;bottom:0;left:27px;width:0;height:auto;border-top:0;border-left:3px dashed #314395}
.j-flow__item::after{display:none}
.j-flow__item:last-child::before{display:none}
.j-flow__num{grid-row:1/3;width:56px;height:56px;margin:0;font-size:32px;box-shadow:0 0 0 5px #fff}
.j-flow__title{margin:6px 0 2px;font-size:17px}
}