/* 段に分けた申し込み（css/stepform.js）。どの事業ページでも同じ見た目・同じ手ざわりに */
form.sf-on{--sf-pink:var(--pink,#e9528e);--sf-lime:var(--lime,#8ec420);--sf-ink:var(--ink,#332e29);--sf-ink3:var(--ink-3,#8a8278);--sf-line:#e6ded2;--sf-white:#fdfbf8;--sf-err:#c4372c;position:relative}
form.sf-on fieldset.sf-step{border:0;margin:0;padding:0;min-width:0;display:grid;gap:12px}
form.sf-on fieldset.sf-step[hidden]{display:none}
form.sf-on fieldset.sf-step.sf-cur{animation:sf-in .3s ease}
@keyframes sf-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
form.sf-on legend{font:700 clamp(20px,5.2vw,24px)/1.4 var(--serif,inherit);color:var(--sf-ink);padding:0;margin:4px 0 2px;text-wrap:balance}
form.sf-on legend:focus{outline:none}
form.sf-on .sf-lead{margin:-4px 0 4px;font-size:13.5px;color:var(--ink-2,#655e55)}
.sf-top{display:grid;gap:10px;margin-bottom:4px}
.sf-prog{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px}
.sf-prog span{font:700 11px/1.2 var(--sans,inherit);color:var(--sf-ink3);letter-spacing:.04em}
.sf-prog span::before{content:"";display:block;height:5px;border-radius:9px;margin-bottom:6px;background:linear-gradient(90deg,var(--sf-pink) var(--p,0%),var(--sf-line) var(--p,0%));transition:background .3s}
.sf-prog span.on{color:var(--sf-ink)}
.sf-prog span.done::before{background:var(--sf-lime)}
.sf-trail{display:flex;flex-wrap:wrap;gap:6px}
.sf-trail:empty{display:none}
.sf-trail span{font:700 12px/1 var(--sans,inherit);background:var(--sf-white);border:1px solid var(--sf-line);border-radius:99px;padding:7px 10px;color:var(--ink-2,#655e55)}
.sf-resume{margin:0;font:700 12px/1.4 var(--sans,inherit);background:#e4f4fb;border-radius:10px;padding:6px 6px 6px 12px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.sf-resume button{border:0;background:var(--sf-white);border-radius:99px;font:700 12px/1 var(--sans,inherit);padding:0 12px;min-height:34px;cursor:pointer;color:var(--sf-ink)}
/* 選ぶボタン */
form.sf-on .sf-hidesel{position:absolute!important;width:1px!important;height:1px!important;opacity:0;pointer-events:none;padding:0!important}
form.sf-on .sf-chiplab{position:relative}
.sf-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.sf-chip{appearance:none;border:2px solid var(--sf-line);background:var(--sf-white);color:var(--sf-ink);font:700 15px/1.3 var(--sans,inherit);border-radius:14px;min-height:50px;padding:10px 16px;cursor:pointer;text-align:left;transition:border-color .15s,background .15s,transform .1s;position:relative}
.sf-chip:active{transform:scale(.97)}
.sf-chip[aria-pressed="true"]{border-color:var(--sf-pink);background:#fbe9ef;color:#b02660}
.sf-chip[aria-pressed="true"]::after{content:"";position:absolute;top:-7px;right:-7px;width:20px;height:20px;border-radius:50%;background:var(--sf-pink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5l3.5 3.5L17.5 8.5' stroke='white' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.sf-chip:focus-visible{outline:3px solid var(--cyan,#02afe2);outline-offset:2px}
/* 入力のよしあし */
form.sf-on label.sf-ok>input,form.sf-on label.sf-ok>textarea{box-shadow:inset 0 0 0 2px var(--sf-lime);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%238ec420'/%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' stroke='white' stroke-width='2.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center/20px;padding-right:42px}
form.sf-on label.sf-ok>textarea{background-position:right 12px top 12px}
form.sf-on label.sf-bad>input,form.sf-on label.sf-bad>textarea{box-shadow:inset 0 0 0 2px var(--sf-err)}
.sf-err{display:block;color:var(--sf-err);font:700 12.5px/1.5 var(--sans,inherit)}
.sf-err:empty{display:none}
/* 下の帯（親指の届くところ） */
.sf-bar{position:sticky;bottom:0;z-index:5;margin-top:14px;padding:14px 0 calc(8px + env(safe-area-inset-bottom,0px));background:linear-gradient(to top,var(--sf-bg,#f8f4ee) 70%,rgba(248,244,238,0))}
.sf-bar-in{display:flex;gap:10px;align-items:center}
.sf-bar .sf-back{appearance:none;border:2px solid var(--sf-line);background:var(--sf-white);color:var(--ink-2,#655e55);border-radius:99px;min-height:56px;min-width:64px;padding:0 16px;font:700 15px/1 var(--sans,inherit);cursor:pointer}
.sf-bar .sf-next,.sf-bar .sf-send{flex:1;min-height:58px;border-radius:99px;font-size:17px!important;justify-content:center}
.sf-bar .sf-next{appearance:none;border:0;background:var(--sf-pink);color:#fff;font:900 17px/1 var(--sans,inherit);cursor:pointer;box-shadow:0 6px 18px rgba(233,82,142,.28);transition:background .2s,box-shadow .2s}
.sf-bar .sf-next.sf-wait{background:var(--sf-line);color:var(--sf-ink3);box-shadow:none}
.sf-bar .sf-next[hidden],.sf-bar .sf-send[hidden],.sf-bar .sf-back[hidden]{display:none}
.sf-note{margin:6px 0 0;text-align:center;font-size:11px;color:var(--sf-ink3)}
.sf-note:empty{display:none}
.sf-bar .micro{text-align:center;margin-top:6px}
@media (max-width:860px){form.sf-on .sf-bar{bottom:calc(84px + env(safe-area-inset-bottom,0px))}html:has(.mbar.away) form.sf-on .sf-bar,html:not(:has(.mbar)) form.sf-on .sf-bar,body.mbar-off form.sf-on .sf-bar{bottom:0}}
@media (prefers-reduced-motion:reduce){form.sf-on fieldset.sf-step.sf-cur{animation:none}}
.sf-multi-wrap{display:grid;gap:6px}
.sf-q{font-size:13px;color:var(--ink-2,#655e55)}
/* 各ページの小さな「✓」（ラベルの右上）は、段の申し込みでは緑の丸と重なるので出さない */
form.sf-on label::after{content:none!important}
