:root{
  --teal-ink:#123B4E;      /* 見出し・濃 */
  --teal:#246B8E;          /* 主要 */
  --teal-lt:#3A8EAE;       /* 明 */
  --teal-pale:#EAF5F8;     /* 淡い面 */
  --sand:#B98A4B;          /* 差し色（錨・アクティブ）控えめに */
  --bg:#F6FAFB;            /* 背景（AI定番のクリームは避けた寒色寄り白）*/
  --card:#FFFFFF;
  --ink:#2A3B42;           /* 本文 */
  --muted:#657A83;         /* 補助 */
  --line:#DEE9ED;          /* 罫線 */
  --error:#C0392B;
  --ok:#1E7A5E;
  --radius:16px;
  --shadow:0 10px 40px -18px rgba(18,59,78,.35);
  --maxw:880px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:"Zen Kaku Gothic New",system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:"Shippori Mincho","Hiragino Mincho ProN",serif;font-weight:600;color:var(--teal-ink);letter-spacing:.01em;line-height:1.35}
a{color:var(--teal)}
:focus-visible{outline:3px solid var(--teal-lt);outline-offset:2px;border-radius:6px}

/* ---- ヘッダー ---- */
.site-header{
  position:sticky;top:0;z-index:40;background:rgba(246,250,251,.82);
  backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--line);
}
.site-header .inner{max-width:var(--maxw);margin:0 auto;padding:12px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:10px;font-family:"Shippori Mincho",serif;font-weight:600;color:var(--teal-ink);font-size:18px;letter-spacing:.06em}
.brand .glyph{width:26px;height:26px;color:var(--teal)}
.brand small{display:block;font-family:"Zen Kaku Gothic New",sans-serif;font-weight:500;font-size:11px;letter-spacing:.14em;color:var(--muted)}

/* ---- ヒーロー ---- */
.hero{max-width:var(--maxw);margin:0 auto;padding:56px 20px 28px;position:relative}
.hero .eyebrow{font-size:12.5px;letter-spacing:.22em;color:var(--sand);font-weight:700;text-transform:none;margin:0 0 14px}
.hero h1{font-size:clamp(28px,6vw,44px);margin:0 0 18px}
.hero h1 .thin{color:var(--teal)}
.hero p.lead{font-size:16.5px;color:var(--ink);max-width:60ch;margin:0 0 10px}
.hero .sub{color:var(--muted);font-size:14.5px;max-width:60ch;margin:6px 0 28px}
.hero .meta{display:flex;flex-wrap:wrap;gap:10px 22px;margin:0 0 30px;padding:0;list-style:none}
.hero .meta li{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--teal-ink)}
.hero .meta svg{width:18px;height:18px;color:var(--teal-lt);flex:0 0 auto}
.cta{
  display:inline-flex;align-items:center;gap:10px;background:var(--teal);color:#fff;
  border:none;border-radius:999px;padding:15px 30px;font-size:16px;font-weight:700;
  font-family:inherit;cursor:pointer;text-decoration:none;box-shadow:var(--shadow);
  transition:transform .15s ease,background .15s ease;
}
.cta:hover{background:var(--teal-ink);transform:translateY(-1px)}
.cta svg{width:18px;height:18px}
.hero .note{margin-top:14px;font-size:12.5px;color:var(--muted)}

/* 錨のスパイン（背景の縦線＋錨） */
.spine-bg{position:absolute;left:calc(50% - var(--maxw)/2 + 20px);top:0;bottom:-20px;width:1px;background:linear-gradient(var(--line),transparent);opacity:.7;pointer-events:none}
@media(max-width:920px){.spine-bg{display:none}}

/* ---- フォーム全体 ---- */
.form-wrap{max-width:var(--maxw);margin:0 auto;padding:8px 20px 80px}
.a-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}

/* 進捗（錨のスパイン） */
.progress{display:grid;grid-template-columns:repeat(5,1fr);gap:0;padding:18px 18px 6px;border-bottom:1px solid var(--line);background:linear-gradient(var(--teal-pale),transparent)}
.progress .node{position:relative;text-align:center;font-size:11.5px;color:var(--muted);padding-top:26px}
.progress .node::before{content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid var(--line);z-index:2}
.progress .node::after{content:"";position:absolute;top:13px;left:-50%;width:100%;height:2px;background:var(--line);z-index:1}
.progress .node:first-child::after{display:none}
.progress .node.done::before{background:var(--teal);border-color:var(--teal)}
.progress .node.done::after{background:var(--teal)}
.progress .node.active::before{background:var(--sand);border-color:var(--sand);box-shadow:0 0 0 4px rgba(185,138,75,.18)}
.progress .node.active{color:var(--teal-ink);font-weight:700}
.progress .num{display:block;font-family:"Shippori Mincho",serif;font-size:12px}

.step{padding:26px 22px 8px;display:none}
.step.current{display:block;animation:fade .35s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.step h2{font-size:20px;margin:0 0 4px}
.step .step-desc{color:var(--muted);font-size:13.5px;margin:0 0 20px}

/* フィールド */
.field{margin-bottom:20px}
.field > label.q, .field > .q{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--teal-ink);font-size:14.5px;margin-bottom:8px}
.badge{font-size:11px;font-weight:700;border-radius:5px;padding:2px 7px;line-height:1.4}
.badge.req{background:#FCE9E7;color:var(--error)}
.badge.opt{background:#EEF3F5;color:var(--muted)}
.hint{font-size:12.5px;color:var(--muted);margin:-2px 0 8px}
.a-input,.a-textarea,select.a-input{
  width:100%;min-height:52px;border:1.5px solid var(--line);border-radius:12px;
  background:#fff;padding:12px 14px;font-size:16px;font-family:inherit;color:var(--ink);
  transition:border-color .15s ease,box-shadow .15s ease;
}
.a-textarea{min-height:96px;resize:vertical;line-height:1.7}
.a-input:focus,.a-textarea:focus{border-color:var(--teal);box-shadow:0 0 0 4px rgba(36,107,142,.12);outline:none}
.err-text{display:none;color:var(--error);font-size:12.5px;margin-top:6px}
.field.invalid .err-text{display:block}
.field.invalid .a-input,.field.invalid .a-textarea{border-color:var(--error)}

/* 選択肢（チェック/ラジオ） */
.choices{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.choices.wide{grid-template-columns:1fr}
.choice{position:relative;display:flex;align-items:center;gap:10px;border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;cursor:pointer;background:#fff;font-size:14.5px;transition:.12s}
.choice:hover{border-color:var(--teal-lt)}
.choice input{position:absolute;opacity:0;width:0;height:0}
.choice .box{width:20px;height:20px;border:2px solid var(--line);border-radius:6px;flex:0 0 auto;display:grid;place-items:center;transition:.12s}
.choice.radio .box{border-radius:50%}
.choice input:checked ~ .box{background:var(--teal);border-color:var(--teal)}
.choice input:checked ~ .box::after{content:"";width:10px;height:10px;border-radius:3px;background:#fff}
.choice.radio input:checked ~ .box::after{border-radius:50%}
.choice input:checked ~ span.lbl{color:var(--teal-ink);font-weight:600}
.choice:has(input:checked){border-color:var(--teal);background:var(--teal-pale)}
.choice input:focus-visible ~ .box{outline:3px solid var(--teal-lt);outline-offset:2px}

/* はい/いいえ */
.yesno{display:flex;gap:8px;max-width:280px}
.yesno .choice{flex:1;justify-content:center}
.subfields{margin-top:12px;padding:14px;border-left:3px solid var(--teal-pale);background:#FAFDFE;border-radius:0 10px 10px 0}
.subfields[hidden]{display:none}

/* 痛みスライダー */
.slider-wrap{display:flex;align-items:center;gap:14px}
.slider-wrap input[type=range]{flex:1;accent-color:var(--teal);height:6px}
.slider-val{font-family:"Shippori Mincho",serif;font-size:22px;color:var(--teal);min-width:2.2ch;text-align:center}
.slider-scale{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-top:2px}

/* アコーディオン（同意事項） */
.acc{border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:10px}
.acc summary{list-style:none;cursor:pointer;padding:14px 16px;font-weight:700;color:var(--teal-ink);font-size:14.5px;display:flex;justify-content:space-between;align-items:center;background:#fff}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"＋";color:var(--teal);font-weight:700}
.acc[open] summary::after{content:"－"}
.acc .acc-body{padding:2px 16px 16px;font-size:13.5px;color:var(--ink)}
.acc .acc-body p{margin:8px 0}
.privacy-box{background:var(--teal-pale);border-radius:12px;padding:16px;font-size:13.5px;margin:6px 0 18px}
.privacy-box ul{margin:8px 0 0;padding-left:1.1em}

/* 確認画面 */
.review-sec{border:1px solid var(--line);border-radius:12px;margin-bottom:12px;overflow:hidden}
.review-sec > .rh{display:flex;justify-content:space-between;align-items:center;background:var(--teal-pale);padding:10px 14px}
.review-sec > .rh h3{font-size:14px;margin:0;color:var(--teal-ink)}
.review-sec .edit{font-size:12.5px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:5px 12px;cursor:pointer;color:var(--teal);font-family:inherit}
.review-row{display:grid;grid-template-columns:38% 62%;gap:10px;padding:9px 14px;border-top:1px solid var(--line);font-size:13.5px}
.review-row dt{color:var(--muted)}
.review-row dd{margin:0;white-space:pre-wrap;word-break:break-word}

/* 署名 */
.sig-pad-wrap{border:1.5px dashed var(--teal-lt);border-radius:12px;background:#fff;position:relative;touch-action:none}
.sig-pad-wrap canvas{display:block;width:100%;height:180px;border-radius:12px}
.sig-placeholder{position:absolute;inset:0;display:grid;place-items:center;color:#B7C7CD;font-size:14px;pointer-events:none}
.sig-clear{margin-top:8px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:7px 14px;font-size:12.5px;cursor:pointer;color:var(--muted);font-family:inherit}

.warn-inline{display:flex;gap:10px;background:#FFF7E8;border:1px solid #F0D9A8;color:#8A6516;border-radius:10px;padding:10px 12px;font-size:13px;margin-top:8px}

/* ナビ */
.nav{position:sticky;bottom:0;background:linear-gradient(transparent,var(--card) 24%);padding:16px 22px 20px;display:flex;gap:12px;justify-content:space-between;border-top:1px solid var(--line)}
.btn{border:none;border-radius:999px;padding:14px 26px;font-size:15px;font-weight:700;font-family:inherit;cursor:pointer;transition:.15s}
.btn-primary{background:var(--teal);color:#fff}
.btn-primary:hover{background:var(--teal-ink)}
.btn-primary:disabled{opacity:.6;cursor:not-allowed}
.btn-ghost{background:#fff;color:var(--teal-ink);border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--teal-lt)}
.btn-ghost[hidden]{display:none}

/* フッター */
.site-footer{border-top:1px solid var(--line);background:#fff}
.site-footer .inner{max-width:var(--maxw);margin:0 auto;padding:26px 20px;font-size:12.5px;color:var(--muted);display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between}
.site-footer a{color:var(--teal)}

/* 未成年ブロック */
#guardianBlock[hidden]{display:none}
#guardianBlock{margin-top:18px;padding-top:18px;border-top:1px dashed var(--line)}

@media (max-width:560px){
  .progress .node{font-size:0}
  .progress .node .num{font-size:13px}
  .review-row{grid-template-columns:1fr}
  .nav{padding:14px 16px 18px}
  .btn{padding:13px 20px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .step.current{animation:none}
}