/* 手順の見やすさ強化：大きな手順バナー、進行バー、完了→次へ、図番号バッジ */
.sf-bar{display:flex;align-items:stretch;gap:0;margin:1.4rem 0 .6rem;padding:0;list-style:none;counter-reset:sfb}
.sf-bar li{flex:1;min-width:0;position:relative}
.sf-bar a{display:flex;align-items:center;gap:10px;height:100%;padding:12px 16px 12px 22px;color:inherit;text-decoration:none;background:rgba(255,196,0,.1);border:1px solid rgba(255,196,0,.45);font-weight:700;line-height:1.35;clip-path:polygon(0 0,calc(100% - 16px) 0,100% 50%,calc(100% - 16px) 100%,0 100%,16px 50%)}
.sf-bar li:first-child a{clip-path:polygon(0 0,calc(100% - 16px) 0,100% 50%,calc(100% - 16px) 100%,0 100%);border-radius:12px 0 0 12px}
.sf-bar li:last-child a{clip-path:polygon(0 0,100% 0,100% 100%,0 100%,16px 50%);border-radius:0 12px 12px 0}
.sf-bar li:only-child a{clip-path:none;border-radius:12px}
.sf-bar li+li{margin-left:-6px}
.sf-bar b{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--accent,#ffc400);color:#111;font-size:1.05rem;font-weight:900}
.sf-bar a:hover{background:rgba(255,196,0,.22)}
.sf-bar small{display:block;font-weight:600;opacity:.75;font-size:.78rem}
.sf-head{display:flex;align-items:center;gap:16px;margin:3rem 0 1rem!important;padding:16px 20px;border-radius:18px;background:linear-gradient(120deg,rgba(255,196,0,.22),rgba(255,196,0,.04));border:2px solid var(--accent,#ffc400);border-left-width:10px;scroll-margin-top:84px;line-height:1.3}
.sf-num{flex:none;display:grid;place-items:center;min-width:76px;padding:6px 10px;border-radius:14px;background:var(--accent,#ffc400);color:#111;text-align:center;font-weight:900;line-height:1}
.sf-num small{display:block;font-size:.72rem;letter-spacing:.14em;margin-bottom:2px}
.sf-num span{font-size:2.3rem}
.sf-ttl{font-size:clamp(1.15rem,3.6vw,1.6rem);font-weight:800}
.sf-ttl small{display:block;font-size:.8rem;font-weight:600;opacity:.75;margin-bottom:3px}
.sf-next{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:2rem 0 0;padding:16px 20px;border-radius:16px;border:2px dashed var(--accent,#ffc400);background:rgba(255,196,0,.07)}
.sf-next .ok{font-weight:800}
.sf-next .ok::before{content:"✔ ";color:#2fbf71}
.sf-next a{margin-left:auto;display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border-radius:99px;background:var(--accent,#ffc400);color:#111;font-weight:800;text-decoration:none}
.sf-next a::after{content:"▼"}
.sf-chip{display:inline-block;margin-right:.5em;padding:.05em .7em;border-radius:99px;background:var(--accent,#ffc400);color:#111;font-weight:900;font-size:.95em}
figcaption{font-size:.95rem}
.steps>li{padding-left:56px!important;margin:1.3rem 0!important;font-size:1.04em}
.steps>li::before{width:40px!important;height:40px!important;font-size:1.25rem!important;box-shadow:0 0 0 4px rgba(255,196,0,.25)}
.steps>li strong{font-size:1.06em}
@media (max-width:620px){.sf-bar{flex-direction:column;gap:6px}.sf-bar li+li{margin-left:0}.sf-bar a,.sf-bar li:first-child a,.sf-bar li:last-child a{clip-path:none;border-radius:12px}.sf-head{gap:12px;padding:12px}.sf-num{min-width:62px}.sf-num span{font-size:1.9rem}.sf-next a{margin-left:0;width:100%;justify-content:center}}