/* ===== セコサポ 積算の流れ ===== */
.sfl{margin:0 0 10px;border-radius:14px;background:linear-gradient(180deg,#ffffff 0%,#f3f8fd 100%);box-shadow:0 6px 18px rgba(15,35,64,.10),0 0 0 1px #d7e2ee;overflow:hidden;font-size:13px;color:#12314d}
.sfl *{box-sizing:border-box}
.sfl-top{display:flex;align-items:center;gap:6px 10px;flex-wrap:wrap;padding:8px 10px}
.sfl-ttl{white-space:nowrap;flex:0 0 auto;font-weight:900;font-size:12px;letter-spacing:.06em;color:#fff;background:linear-gradient(135deg,#0e8a7d,#0b6b61);padding:4px 10px;border-radius:999px;box-shadow:inset 0 -2px 0 rgba(0,0,0,.18)}
.sfl-steps,.sfl-side{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.sfl-ar{color:#9fb3c8;font-weight:900;font-size:15px;margin:0 1px}
.sfl-st{display:inline-flex;align-items:center;gap:5px;padding:4px 10px 4px 5px;border-radius:999px;border:1px solid #cfdbe8;background:#fff;color:#12314d!important;text-decoration:none!important;font-weight:800;font-size:12.5px;line-height:1.2;white-space:nowrap;transition:transform .12s,box-shadow .12s}
.sfl-st:hover{transform:translateY(-1px);box-shadow:0 4px 10px rgba(15,35,64,.14)}
.sfl-st i{font-style:normal;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:#e3ecf6;color:#16507a;font-size:11px;font-weight:900}
.sfl-st.cur{background:linear-gradient(135deg,#0e2b4d,#1b5fb4);border-color:#0e2b4d;color:#fff!important;box-shadow:0 4px 12px rgba(27,95,180,.35)}
.sfl-st.cur i{background:#fff;color:#0e2b4d}
.sfl-st.done:not(.cur) i{background:#13865a;color:#fff}
.sfl-st.done:not(.cur) i::after{content:""}
.sfl-side .sfl-st{padding:4px 10px;font-weight:700;background:#f6f9fc}
.sfl-side .sfl-st.cur{background:linear-gradient(135deg,#0e2b4d,#1b5fb4)}
.sfl-sidel{white-space:nowrap;margin-left:auto;font-size:11px;font-weight:800;color:#64748b}
.sfl-act{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 10px;border-top:1px solid #e1e9f2;background:#f7fafd}
.sfl-act.end{color:#475569}
.sfl-msg{font-weight:700;color:#475569}
.sfl-go{white-space:nowrap;display:inline-flex;align-items:center;gap:4px;padding:7px 16px;border-radius:999px;background:linear-gradient(135deg,#ea580c,#c2410c);color:#fff!important;text-decoration:none!important;font-weight:900;font-size:13.5px;box-shadow:0 4px 12px rgba(234,88,12,.35),inset 0 1px 0 rgba(255,255,255,.25)}
.sfl-go:hover{filter:brightness(1.06)}
.sfl-more{position:relative}
.sfl-mb{font:inherit;font-size:12.5px;font-weight:800;padding:6px 12px;border-radius:999px;border:1px solid #c9d5e3;background:#fff;color:#12314d;cursor:pointer}
.sfl-pop{display:none;position:absolute;left:0;top:calc(100% + 6px);z-index:60;min-width:240px;background:#fff;border-radius:12px;box-shadow:0 16px 40px rgba(4,16,36,.28),0 0 0 1px #dbe5f0;padding:6px}
.sfl-more.open .sfl-pop{display:block}
.sfl-pop a{display:block;padding:8px 10px;border-radius:8px;color:#12314d!important;text-decoration:none!important;font-weight:700}
.sfl-pop a:hover{background:#eef6ff}
.sfl-in{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:9px 12px;border-top:1px solid #f2c24c;background:linear-gradient(90deg,#fff8e1,#fff2c7)}
.sfl-in[hidden]{display:none}
.sfl-in.done{background:linear-gradient(90deg,#e8f8ef,#d6f2e2);border-top-color:#8fd3ad}
.sfl-ic{font-size:18px}
.sfl-ok{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#13865a;color:#fff;font-weight:900}
.sfl-t{flex:1;min-width:200px;line-height:1.5}
.sfl-t small{margin-left:4px;color:#8a6d1a;font-size:11px}
.sfl-take{font:inherit;font-weight:900;font-size:13px;padding:7px 14px;border-radius:999px;border:0;background:linear-gradient(135deg,#13865a,#0f6e4a);color:#fff;cursor:pointer;box-shadow:0 3px 8px rgba(19,134,90,.35)}
.sfl-skip{font:inherit;font-size:12px;font-weight:700;padding:6px 10px;border-radius:999px;border:1px solid #d9c37a;background:transparent;color:#6b5414;cursor:pointer}
.sfl-toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%) translateY(10px);z-index:2147483001;background:#0e2b4d;color:#fff;font-size:13px;font-weight:700;padding:9px 16px;border-radius:999px;box-shadow:0 8px 20px rgba(0,0,0,.25);opacity:0;pointer-events:none;transition:.2s}
.sfl-toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
@media (max-width:640px){
  .sfl-top{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .sfl-top::-webkit-scrollbar{display:none}
  .sfl-steps,.sfl-side{flex-wrap:nowrap}
  .sfl-sidel{margin-left:6px}
  .sfl-go{flex:1;justify-content:center}
}