:root{
  --bg:#f7f5f2; --card:#fff; --ink:#1c1c1e; --sub:#8a8a8f; --sep:#e6e2dc;
  --theme:#e5851c; --themeSoft:#fdeee0; --theme2:#f3ab5f;
  --good:#34c759; --shadow:0 1px 3px rgba(0,0,0,.06);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{margin:0; padding:0}
body{
  background:var(--bg); color:var(--ink); font-size:16px; line-height:1.7;
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  padding-bottom:120px;
}
.wrap{max-width:600px; margin:0 auto; padding:0 16px}

header{background:var(--card); border-bottom:1px solid var(--sep); padding:14px 0 12px; position:sticky; top:0; z-index:20}
header h1{margin:0; font-size:16px; font-weight:700; letter-spacing:.02em}
header .sub{color:var(--sub); font-size:12px; margin-top:2px}
.bar{height:4px; background:var(--sep); border-radius:2px; margin-top:10px; overflow:hidden}
.bar i{display:block; height:100%; background:var(--theme); border-radius:2px; transition:width .3s}
.stepname{font-size:11px; color:var(--sub); margin-top:6px; display:flex; justify-content:space-between}

section{display:none}
section.on{display:block}
.card{background:var(--card); border-radius:14px; padding:16px; margin:14px 0; box-shadow:var(--shadow)}
h2{font-size:19px; margin:22px 0 4px; line-height:1.5}
.lead{color:var(--sub); font-size:13.5px; margin:0 0 4px; line-height:1.75}
.note{background:var(--themeSoft); border-radius:12px; padding:13px 15px; font-size:13.5px; margin:14px 0; line-height:1.8}

label.f{display:block; font-size:13px; font-weight:600; margin:0 0 7px}
.req{color:var(--theme); font-size:11px; margin-left:5px; font-weight:600}
input[type=text],textarea,select{
  width:100%; font-size:16px; font-family:inherit; padding:12px 13px; border:1px solid var(--sep);
  border-radius:10px; background:#fff; color:var(--ink); appearance:none
}
textarea{min-height:76px; resize:vertical; line-height:1.7}
input:focus,textarea:focus,select:focus{outline:none; border-color:var(--theme2)}
.hint{color:var(--sub); font-size:12px; margin-top:5px; line-height:1.6}

.opts{display:flex; flex-direction:column; gap:8px}
.opt{
  display:flex; align-items:flex-start; gap:10px; padding:12px 14px; border:1.5px solid var(--sep);
  border-radius:11px; cursor:pointer; background:#fff; font-size:14.5px; line-height:1.65; transition:.12s
}
.opt:active{transform:scale(.995)}
.opt.sel{border-color:var(--theme); background:var(--themeSoft)}
.opt .mk{
  flex:0 0 20px; width:20px; height:20px; border:1.5px solid #cfcbc4; border-radius:50%;
  margin-top:2px; display:grid; place-items:center; font-size:11px; color:#fff; font-weight:700
}
.opt.sel .mk{border-color:var(--theme); background:var(--theme)}
.opt.sel .mk::after{content:"✓"}

.words{display:flex; flex-wrap:wrap; gap:8px}
.w{
  padding:9px 13px; border:1.5px solid var(--sep); border-radius:999px; background:#fff;
  font-size:14px; cursor:pointer; line-height:1.4; transition:.12s
}
.w.sel{border-color:var(--theme); background:var(--themeSoft); font-weight:600}
.w.top{border-color:var(--theme); background:var(--theme); color:#fff; font-weight:600}
.cnt{font-size:13px; color:var(--sub); margin:10px 0 2px}

.qn{font-size:11px; color:var(--theme); font-weight:700; letter-spacing:.06em; margin-bottom:5px}
.qt{font-size:15px; font-weight:600; margin-bottom:11px; line-height:1.6}

footer.nav{
  position:fixed; left:0; right:0; bottom:0; background:rgba(255,255,255,.96);
  backdrop-filter:blur(10px); border-top:1px solid var(--sep); padding:11px 16px calc(11px + env(safe-area-inset-bottom)); z-index:30
}
.navin{max-width:600px; margin:0 auto; display:flex; gap:10px}
button{font-family:inherit; font-size:15.5px; font-weight:700; border:0; border-radius:11px; padding:14px; cursor:pointer}
.pri{flex:1; background:var(--theme); color:#fff}
.pri:disabled{background:#dcd8d2; color:#a5a09a; cursor:not-allowed}
.sec{background:#efece7; color:#5f5a54; padding:14px 20px}
.err{color:#c0392b; font-size:13px; margin-top:9px; text-align:center; line-height:1.6}

.done{text-align:center; padding:56px 0 10px}
.done h2{font-size:22px; margin:16px 0 8px}
.linebtn{display:block; background:#06c755; color:#fff; text-align:center; padding:15px; border-radius:11px;
  font-weight:700; text-decoration:none; margin:20px 0 8px; font-size:15.5px}
.legal{color:var(--sub); font-size:11.5px; line-height:1.75; margin:26px 0 10px}
input[type=date],input[type=tel]{
  width:100%; font-size:16px; font-family:inherit; padding:12px 13px; border:1px solid var(--sep);
  border-radius:10px; background:#fff; color:var(--ink); appearance:none
}
input[type=date]{min-height:48px}