/* 375px幅で横スクロールを出さない（NFR-05） */
:root{ --navy:#1f3a63; --accent:#4a90d9; --ink:#2d3746; --gray:#7b8698;
       --line:#dfe4ec; --bg:#f4f6fa; --now:#2e7d55; --soon:#b7791f; --keep:#9e4b4b; }
*{ box-sizing:border-box; margin:0; padding:0; }
body{ font-family:-apple-system,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
      background:var(--bg); color:var(--ink); line-height:1.75; -webkit-text-size-adjust:100%; }
.wrap{ max-width:640px; margin:0 auto; padding:20px 16px 64px; }
.card{ background:#fff; border-radius:16px; padding:28px 22px; box-shadow:0 2px 14px rgba(31,58,99,.07); }
.hidden{ display:none !important; }

h1{ font-size:26px; line-height:1.4; color:var(--navy); margin:8px 0 14px; }
h1 .big{ font-size:32px; }
h2{ font-size:21px; line-height:1.55; color:var(--navy); margin:6px 0 18px; }
h3{ font-size:17px; color:var(--navy); margin:0 0 4px; }
.eyebrow{ display:inline-block; font-size:13px; font-weight:700; color:var(--accent);
          border:1px solid var(--accent); border-radius:99px; padding:2px 12px; }
.lead{ font-size:15px; color:var(--ink); margin:10px 0 16px; }
.note{ font-size:13px; color:var(--gray); margin-top:12px; }

.three{ list-style:none; background:var(--bg); border-radius:12px; padding:14px 16px; margin:14px 0; }
.three li{ font-size:15px; padding:5px 0; }
.three b{ color:var(--accent); margin-right:6px; }

button{ font-family:inherit; font-size:16px; cursor:pointer; border:none; }
.primary{ width:100%; background:var(--navy); color:#fff; border-radius:12px;
          padding:15px; font-weight:700; margin-top:10px; }
.primary:active{ opacity:.85; }
.ghost{ background:#fff; color:var(--gray); border:1px solid var(--line);
        border-radius:12px; padding:13px 20px; }
.ghost:disabled{ opacity:.4; cursor:default; }
.ghost.small{ display:block; width:100%; margin-top:22px; font-size:14px; }

/* 設問 */
.bar{ height:5px; background:var(--line); border-radius:99px; overflow:hidden; }
#bar-fill{ height:100%; background:var(--accent); width:5%; transition:width .25s; }
.progress{ font-size:13px; color:var(--gray); margin:8px 0 2px; }
.section-tag{ display:inline-block; font-size:12px; color:var(--gray);
              background:var(--bg); border-radius:6px; padding:1px 9px; }
.options{ display:flex; flex-direction:column; gap:9px; }
.opt{ text-align:left; background:#fff; border:1.5px solid var(--line); border-radius:12px;
      padding:14px 16px; font-size:15px; line-height:1.6; color:var(--ink); }
.opt:active{ background:var(--bg); }
.opt.on{ border-color:var(--navy); background:#eef3fa; font-weight:700; }
.warn{ color:#b3261e; font-size:14px; margin-top:12px; }
.nav{ display:flex; gap:10px; margin-top:20px; align-items:center; }
.nav .ghost{ flex:0 0 96px; }
.nav .primary{ flex:1; margin-top:0; }

/* 結果 */
.bucket{ border-radius:14px; padding:16px 16px 8px; margin:16px 0; border-left:5px solid; }
.b-now{ border-color:var(--now); background:#f1f8f4; }
.b-soon{ border-color:var(--soon); background:#fdf7ec; }
.b-keep{ border-color:var(--keep); background:#fbf2f2; }
.b-skip{ border-color:var(--line); background:#f7f8fa; }
.b-note{ font-size:13px; color:var(--gray); margin-bottom:10px; }
.job{ background:#fff; border-radius:10px; padding:12px 14px; margin-bottom:8px; }
.job-name{ font-weight:700; font-size:15px; color:var(--navy); }
.job-step{ font-size:14px; color:var(--ink); margin-top:4px; }
.closing{ font-size:15px; background:var(--bg); border-radius:12px; padding:14px 16px; margin-top:18px; }

.cta{ margin-top:24px; padding-top:22px; border-top:1px solid var(--line); }
.cta-lead{ font-size:16px; font-weight:700; color:var(--navy); }