:root {
  /* 引き締めパレット：アイボリー地・白カード・黒見出し・赤集中・ゴールド少量 */
  --red:#D8332A; --red-dark:#A8231C; --red-bg:#FBEDEB;
  --ivory:#FCFAF5; --ivory-deep:#F4EFE5; --card:#FFFFFF;
  --ink:#16130F; --ink2:#4A443C; --grey:#8C8478; --grey-mid:#E6E0D4;
  --gold:#B8924E; --amazon:#D77900;
  --max:680px;
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html{ scroll-behavior:smooth; }
body{
  margin:0; font-family:"Yu Gothic","Hiragino Sans",system-ui,sans-serif;
  background:var(--ivory); color:var(--ink); line-height:1.8; font-feature-settings:"palt";
}
h1,h2,h3,p{ margin:0 0 14px; }
strong{ color:var(--red); font-weight:700; }
em{ font-style:normal; color:var(--red); font-weight:700; }

/* ===== Hero ===== */
.hero{ background:var(--ivory); padding:20px 18px 26px; text-align:center; border-bottom:1px solid var(--grey-mid); }
.hero-inner{ max-width:var(--max); margin:0 auto; }
.hero-label{ display:inline-block; color:var(--red); border:1px solid var(--red); padding:3px 13px; border-radius:13px; font-size:11px; font-weight:700; margin-bottom:14px; }
.hero-cover{ max-width:128px; margin:4px auto 16px; }
.hero-cover img{ width:100%; display:block; box-shadow:0 8px 22px rgba(22,19,15,.22); border-radius:2px; }
.hero h1{ line-height:1.32; margin:0 0 14px; }
.h1-main{ display:block; font-size:25px; font-weight:900; color:var(--ink); letter-spacing:.01em; }
.h1-sub{ display:block; font-size:14px; font-weight:700; color:var(--red); margin-top:8px; }
.hero-lead{ color:var(--ink2); font-size:13px; margin-bottom:20px; }
.hero-meta{ color:var(--grey); font-size:11px; margin-top:11px; }
@media(min-width:660px){
  .hero-inner{ display:grid; grid-template-columns:150px 1fr; gap:24px; align-items:center; text-align:left; }
  .hero-label{ grid-column:1/-1; justify-self:center; }
  .hero-cover{ margin:0; max-width:150px; grid-row:2/span 4; }
  .hero h1,.hero-lead{ text-align:left; } .h1-main{ font-size:28px; }
  .cta-primary{ justify-self:start; } .hero-meta{ text-align:left; }
}

/* ===== CTA ===== */
.cta{ display:inline-block; padding:14px 26px; border-radius:7px; border:none; font-weight:800; font-size:15px; cursor:pointer; text-decoration:none; transition:transform .12s,background .12s; }
.cta:active{ transform:scale(.98); }
.cta-primary{ background:var(--red); color:#fff; box-shadow:0 5px 16px rgba(216,51,42,.32); font-size:16px; padding:15px 30px; }
.cta-primary:hover{ background:var(--red-dark); }
.cta-secondary{ background:var(--ink); color:#fff; }
.cta-amazon{ background:var(--amazon); color:#fff; }
.cta-share{ background:var(--ink); color:#fff; }
.cta-report{ background:var(--red); color:#fff; box-shadow:0 5px 16px rgba(216,51,42,.3); }

/* ===== Stepbar ===== */
.stepbar{ position:sticky; top:0; z-index:10; background:var(--ivory); border-bottom:1px solid var(--grey-mid); display:flex; justify-content:center; gap:4px; padding:0 6px; }
.step{ padding:12px 16px; font-size:12px; color:var(--grey); border-bottom:3px solid transparent; font-weight:700; }
.step.active{ color:var(--red); border-bottom-color:var(--red); }

/* ===== Section ===== */
.sec{ padding:40px 18px; }
.sec-inner{ max-width:var(--max); margin:0 auto; }
.sec-ivory{ background:var(--ivory-deep); }
.sec h2{ font-size:21px; font-weight:900; color:var(--ink); border-left:5px solid var(--red); padding:2px 0 6px 12px; margin-bottom:16px; }
.sec .emoji{ margin-right:5px; }
.note{ background:#FFF; border:1px solid var(--gold); border-left:4px solid var(--gold); padding:12px 15px; font-size:13px; margin-bottom:18px; border-radius:0 5px 5px 0; color:var(--ink2); }

/* ===== ステップ式 診断 ===== */
.progress-wrap{ margin-bottom:18px; }
.progress-meta{ display:flex; justify-content:space-between; font-size:12px; color:var(--ink2); font-weight:700; margin-bottom:7px; }
.progress-meta .cur{ color:var(--red); }
.progress-bar{ height:7px; background:var(--grey-mid); border-radius:4px; overflow:hidden; }
.progress-fill{ height:100%; background:var(--red); border-radius:4px; transition:width .3s; }

.step-card{ background:var(--card); border:1px solid var(--grey-mid); border-radius:12px; padding:20px 18px; box-shadow:0 4px 16px rgba(22,19,15,.06); }
.step-card.hide{ display:none; }
.sc-head{ margin-bottom:6px; }
.sc-idx{ display:inline-block; background:var(--red); color:#fff; font-size:12px; font-weight:800; padding:2px 11px; border-radius:11px; margin-bottom:8px; }
.sc-title{ font-size:19px; font-weight:900; color:var(--ink); }
.sc-sub{ font-size:12px; color:var(--grey); margin-top:2px; }

.qrow{ padding:15px 0; border-top:1px solid var(--grey-mid); }
.qrow:first-of-type{ border-top:none; }
.qtext{ font-size:14.5px; color:var(--ink); margin-bottom:10px; line-height:1.6; }
.qbtns{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.qbtn{ height:46px; border:2px solid var(--grey-mid); background:#fff; border-radius:8px; font-size:14px; font-weight:800; cursor:pointer; color:var(--grey); transition:all .12s; }
.qbtn:hover{ border-color:var(--ink2); }
.qbtn.yes.on{ background:var(--red); color:#fff; border-color:var(--red); }
.qbtn.no.on{ background:var(--ink); color:#fff; border-color:var(--ink); }

.stepnav{ display:flex; justify-content:space-between; align-items:center; margin-top:18px; gap:10px; }
.stepnav .prev{ background:none; border:1px solid var(--grey-mid); color:var(--ink2); padding:12px 18px; border-radius:7px; font-size:14px; font-weight:700; cursor:pointer; }
.stepnav .prev:disabled{ opacity:.35; cursor:default; }
.stepnav .next{ flex:1; background:var(--red); color:#fff; border:none; padding:14px; border-radius:7px; font-size:15px; font-weight:800; cursor:pointer; }
.stepnav .next:disabled{ background:var(--grey-mid); color:#fff; cursor:default; }

/* ===== 結果 ===== */
.result-hero{ background:var(--ink); color:#fff; border-radius:14px; padding:26px 22px; text-align:center; margin-bottom:22px; box-shadow:0 8px 26px rgba(22,19,15,.18); }
.result-hero .rh-lab{ font-size:12px; letter-spacing:.1em; color:#C9BFA9; font-weight:700; }
.result-hero .rh-score{ font-size:64px; font-weight:900; line-height:1.05; margin:4px 0; }
.result-hero .rh-score span{ font-size:24px; color:#9C9080; }
.result-hero .rh-line{ font-size:16px; font-weight:800; color:#fff; margin:10px 0 16px; }
.result-hero .rh-line em{ color:#FF8A7E; }
.rh-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.rh-cell{ background:rgba(255,255,255,.08); border-radius:8px; padding:10px; }
.rh-cell .l{ font-size:10.5px; color:#C9BFA9; }
.rh-cell .v{ font-size:15px; font-weight:800; color:#fff; margin-top:2px; }
.rh-cell.strong .v{ color:#9FE0A0; } .rh-cell.weak .v{ color:#FF8A7E; }

.radar-wrap{ background:var(--card); border:1px solid var(--grey-mid); border-radius:12px; padding:14px 8px 8px; margin:0 auto 20px; max-width:420px; text-align:center; box-shadow:0 4px 14px rgba(22,19,15,.05); }
.radar-wrap svg{ width:100%; height:auto; }
.radar-grid{ fill:none; stroke:var(--grey-mid); stroke-width:.8; }
.radar-grid.outer{ stroke:var(--grey); stroke-width:1.1; }
.radar-axis-line{ stroke:var(--grey-mid); stroke-width:1; }
.radar-gridlabel{ fill:var(--grey); font-size:9px; }
.radar-label{ fill:var(--ink); font-size:12px; font-weight:700; }
.radar-label-score{ fill:var(--red); font-size:11px; font-weight:700; }
.radar-polygon{ fill:rgba(216,51,42,.2); stroke:var(--red); stroke-width:2.5; stroke-linejoin:round; }
.radar-point{ fill:var(--red); stroke:#fff; stroke-width:2; }

/* 今月の1点 主役 */
.one-main{ background:var(--card); border:1px solid var(--grey-mid); border-top:4px solid var(--red); border-radius:10px; padding:20px 20px 22px; box-shadow:0 5px 18px rgba(22,19,15,.07); margin-bottom:8px; }
.one-h{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.one-h .ico{ width:38px; height:38px; flex:0 0 38px; background:var(--red); color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:800; }
.one-h .ttl{ font-size:13px; font-weight:800; color:var(--red); letter-spacing:.04em; }
.one-action{ font-size:18px; font-weight:900; color:var(--ink); line-height:1.5; margin-bottom:10px; }
.one-why{ font-size:13.5px; color:var(--ink2); line-height:1.8; }
.one-why b{ color:var(--ink); }

.result-reportbtn{ text-align:center; margin-top:22px; }
.result-reportbtn .cta{ width:100%; max-width:420px; padding:16px; font-size:16px; }
.result-reportbtn .sub{ font-size:11px; color:var(--grey); margin-top:8px; }

.score-reset{ text-align:center; margin-top:14px; }
.score-reset a{ display:inline-block; padding:6px 14px; border:1px solid var(--grey-mid); border-radius:16px; color:var(--grey); font-size:12px; text-decoration:none; }

/* ===== 書籍 ===== */
.bridge{ background:var(--card); border:1px solid var(--grey-mid); border-radius:12px; padding:22px; text-align:center; }
.bridge .cover{ max-width:128px; margin:4px auto 16px; }
.bridge .cover img{ width:100%; box-shadow:0 6px 18px rgba(22,19,15,.2); border-radius:2px; }
.bridge p{ font-size:14px; color:var(--ink2); max-width:440px; margin:8px auto; line-height:1.85; }
.bridge .lead{ font-size:16px; font-weight:800; color:var(--ink); }
.cta-grid{ display:grid; gap:10px; margin:18px auto 0; max-width:420px; }
.cta-grid .cta{ text-align:center; padding:15px; }
.amazon-note{ font-size:11.5px; color:var(--grey); margin:6px 4px 0; line-height:1.7; }
.amazon-note strong{ color:var(--amazon); }
.quote{ background:var(--ivory); border-top:1px solid var(--gold); border-bottom:1px solid var(--gold); padding:20px 16px; text-align:center; font-size:13.5px; font-style:italic; color:var(--ink2); margin:26px 0; }
.sign{ text-align:right; font-weight:800; color:var(--ink); }
.sign-meta{ display:block; font-size:11px; color:var(--grey); font-weight:400; margin-top:3px; }

/* ===== Footer ===== */
.footer{ background:var(--ink); color:#9C9080; padding:22px 20px; text-align:center; font-size:11px; }
.footer a{ color:#C9BFA9; }
.footer .copyright{ margin-top:8px; color:#7A7064; font-size:10px; letter-spacing:.06em; }