:root{--navy:#0b1f3a;--ink:#13243d;--muted:#5d6b7d;--gold:#b79551;--pale:#f4f6f8;--line:#dce2e9;--white:#fff}
*{box-sizing:border-box}
body{margin:0;background:var(--pale);color:var(--ink);font-family:"Noto Sans JP",sans-serif;font-size:17px;line-height:1.85;letter-spacing:.01em}
button,input{font:inherit}
button{cursor:pointer}
header{min-height:76px;padding:20px max(22px,calc((100% - 860px)/2));display:flex;justify-content:space-between;align-items:center;background:var(--navy);color:#fff}
header a{text-decoration:none}
.brand{font-family:"Noto Serif JP",serif;font-size:15px}
.back-link{color:#d8c18b;font-size:13px;border-bottom:1px solid rgba(216,193,139,.5)}
main{width:min(860px,calc(100% - 40px));margin:54px auto 80px}
.start-screen,.question-screen,.result-screen{background:#fff;padding:58px 64px;border:1px solid var(--line)}
.eyebrow{margin:0 0 18px;color:var(--gold);font-size:12px;font-weight:600;letter-spacing:.2em}
h1,h2,h3{font-family:"Noto Serif JP",serif;font-weight:600}
h1{margin:0 0 24px;font-size:clamp(38px,6vw,58px);line-height:1.45;letter-spacing:.03em}
.lead{max-width:640px;margin-bottom:28px;color:var(--muted)}
.start-screen ul{margin:0 0 34px;padding:22px 24px 22px 46px;background:var(--pale);color:var(--muted)}
.primary{display:flex;width:100%;min-height:62px;padding:12px 24px;align-items:center;justify-content:center;border:0;background:var(--gold);color:#fff;font-weight:600}
.start-screen>small,.consultation-form>small{display:block;margin-top:10px;color:var(--muted);text-align:center}
.progress-row{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:13px}
.reset,.previous,.retry{padding:4px 0;border:0;border-bottom:1px solid currentColor;background:transparent;color:var(--muted)}
.progress{height:3px;margin:12px 0 46px;background:#e6eaf0}
.progress span{display:block;height:100%;width:12.5%;background:var(--gold);transition:width .25s ease}
.question-number{margin:0 0 14px;color:var(--gold);font-size:12px;font-weight:600;letter-spacing:.16em}
.question-card h2{margin:0 0 8px;font-size:clamp(25px,4vw,34px);line-height:1.55}
.question-help{margin:0 0 28px;color:var(--muted);font-size:15px}
.options{display:grid;gap:12px}
.option{width:100%;padding:17px 20px;border:1px solid var(--line);background:#fff;color:var(--ink);text-align:left;transition:.15s ease}
.option:hover,.option:focus-visible{border-color:var(--gold);background:#fdfbf7;outline:0}
.previous{margin-top:34px}
.result-box{margin:28px 0;padding:30px;background:var(--navy);color:#fff;border-top:3px solid var(--gold)}
.result-label{margin:0 0 8px;color:#d8c18b;font-size:13px}
.result-box h2{margin:0 0 14px;font-size:28px}
.result-box p:last-child{margin:0;color:#d5dce6}
.summary{margin:38px 0}
.summary h3{font-size:21px}
.summary dl{margin:0;border-top:1px solid var(--line)}
.summary dl div{display:grid;grid-template-columns:180px 1fr;gap:18px;padding:13px 0;border-bottom:1px solid var(--line)}
.summary dt{color:var(--muted);font-size:13px}
.summary dd{margin:0}
.consultation-form{margin-top:42px;padding:34px;background:var(--pale)}
.form-label{margin:0 0 8px;color:var(--gold);font-size:12px;font-weight:600;letter-spacing:.14em}
.consultation-form h2{margin:0 0 16px;font-size:27px;line-height:1.6}
.consultation-form>p:not(.form-label):not(.error){color:var(--muted)}
.consultation-form label{display:block;margin:24px 0 6px;font-size:14px;font-weight:600}
.consultation-form input{width:100%;min-height:56px;padding:12px 15px;border:1px solid #bcc6d2;background:#fff;color:var(--ink);font-size:16px}
.consultation-form input:focus{border-color:var(--gold);outline:2px solid rgba(183,149,81,.18)}
.consultation-form .primary{margin-top:16px}
.error{min-height:24px;margin:4px 0 0;color:#a33333;font-size:13px}
.retry{display:block;margin:34px auto 0}
footer{padding:28px;text-align:center;background:#071426;color:#aeb9c8;font-size:12px}
[hidden]{display:none!important}
@media(min-width:641px){
  .question-screen{overflow-anchor:none}
  .question-card h2{min-height:3.1em}
  .question-screen .previous[hidden]{display:inline-block!important;visibility:hidden}
}
@media(max-width:640px){
  body{font-size:16px}
  header{min-height:68px;padding:18px 20px}
  .brand{font-size:13px}.back-link{font-size:11px}
  main{width:calc(100% - 28px);margin:28px auto 50px}
  .start-screen,.question-screen,.result-screen{padding:38px 22px}
  h1{font-size:36px}
  .start-screen ul{padding:19px 18px 19px 39px;font-size:14px}
  .progress{margin-bottom:36px}
  .question-card h2{font-size:25px}
  .option{padding:16px}
  .summary dl div{grid-template-columns:1fr;gap:2px}
  .consultation-form{padding:26px 20px}
  .consultation-form h2{font-size:23px}
}

#sendScreen .primary{text-decoration:none;margin-top:28px}
#sendScreen .retry{width:fit-content;text-decoration:none}
.contact-email{color:var(--navy);overflow-wrap:anywhere}
#sendTitle{font-size:clamp(27px,5vw,40px)}

.experience-input{width:100%;min-height:160px;padding:16px;border:1px solid var(--line);background:#fff;color:var(--ink);font:inherit;font-size:16px;resize:vertical}
.experience-input:focus{outline:2px solid rgba(183,149,81,.18);border-color:var(--gold)}
.summary dd{white-space:pre-wrap;overflow-wrap:anywhere}

.consultation-form textarea:not([hidden]),.consultation-form select{width:100%;padding:12px 15px;border:1px solid #bcc6d2;background:#fff;color:var(--ink);font:inherit;font-size:16px;min-height:56px}
.consultation-form textarea{resize:vertical}

.personal-advice section{margin:28px 0;padding:0 0 24px;border-bottom:1px solid var(--line)}
.personal-advice h3{margin:0 0 12px;font-size:21px;line-height:1.6}
.personal-advice p{margin:0;color:var(--muted);overflow-wrap:anywhere}
.advice-note{font-size:13px;color:var(--muted)}

/* 話題ごとに段落の間を空ける */
.personal-advice p + p{margin-top:24px}
#consultationCopy p{margin:0 0 22px;color:var(--muted)}
#consultationCopy p:last-child{margin-bottom:0}