.ndx{
  --ink:#16241D; --green:#1F6B4D; --green-dk:#154E39; --tint:#EAF3EE;
  --bg:#FAFBF8; --card:#FFFFFF; --accent:#E8643C; --accent-dk:#C44A24;
  --amber:#C98A1E; --muted:#5C6B63; --line:#DCE4DE;
  --r:16px;
  width:100%; background:var(--bg); color:var(--ink);
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
  line-height:1.8; font-size:16px;
  container-type:inline-size;
  -webkit-font-smoothing:antialiased;
}
.ndx *{box-sizing:border-box; min-width:0}
.ndx p{margin:0 0 1em}
.ndx a{color:inherit}
.ndx h2,.ndx h3{line-height:1.45; margin:0; font-weight:900}
.ndx .wrap{ max-width:1040px; margin:0 auto; padding:0 32px; }
@container(max-width:680px){ .ndx .wrap{padding:0 18px} }

/* ---- PR表記（ステマ規制対応・必須） ---- */
.ndx .pr{ background:var(--ink); color:#C9D6CD; font-size:12px; letter-spacing:.04em;
  padding:9px max(32px, calc((100% - 1040px) / 2)); display:flex; align-items:center; gap:8px;}
.ndx .pr b{color:#fff; font-weight:700}

/* ---- セクション共通 ---- */
.ndx section{ padding:54px 0; }
.ndx .eyebrow{ display:inline-block; font-size:12px; font-weight:700; letter-spacing:.14em;
  color:var(--green); background:#fff; border:1px solid var(--green); padding:5px 14px; border-radius:999px;}
.ndx .sec-head{ text-align:center; margin-bottom:34px;}
.ndx .sec-head h2{ font-size:27px; margin:14px 0 8px;}
.ndx .sec-head p{ color:var(--muted); font-size:15px; margin:0;}
@container(max-width:680px){ .ndx section{padding:40px 0} .ndx .sec-head h2{font-size:22px} }

/* ---- ヒーロー＋診断クイズ ---- */
.ndx .hero{ background:linear-gradient(180deg,var(--tint) 0%,var(--bg) 70%); padding:48px 0 56px;}
.ndx .hero-in{ display:grid; grid-template-columns:1fr 1fr; gap:38px; align-items:center;}
@container(max-width:860px){ .ndx .hero-in{grid-template-columns:1fr; gap:28px} }
.ndx .hero h1{ font-size:38px; font-weight:900; line-height:1.4; margin:16px 0 16px; letter-spacing:.01em;}
.ndx .hero h1 em{ font-style:normal; color:var(--green); }
.ndx .hero .sub{ color:#33433B; font-size:16px; margin:0 0 22px;}
.ndx .hero .pts{ list-style:none; padding:0; margin:0; font-size:14px;}
.ndx .hero .pts li{ margin-bottom:8px;}
.ndx .hero .pts li::before{ content:"✓"; color:var(--green); font-weight:900; margin-right:8px;}
@container(max-width:680px){ .ndx .hero h1{font-size:28px} }

/* 診断クイズカード */
.ndx .quiz{ background:var(--card); border:1px solid var(--line); border-radius:20px;
  box-shadow:0 30px 60px -36px rgba(21,78,57,.45); overflow:hidden;}
.ndx .quiz-top{ background:var(--green); color:#fff; padding:16px 22px; display:flex;
  align-items:center; justify-content:space-between; gap:12px;}
.ndx .quiz-top .qt{ font-size:14px; font-weight:700;}
.ndx .quiz-top .qstep{ font-size:12px; color:#BFE0CF; font-variant-numeric:tabular-nums;}
.ndx .progress{ height:4px; background:#cfe3d7;}
.ndx .progress > span{ display:block; height:100%; background:var(--accent); transition:width .35s ease;}
.ndx .quiz-body{ padding:24px 22px 26px;}
.ndx .qtext{ font-size:18px; font-weight:700; margin:0 0 18px; line-height:1.5;}
.ndx .opts{ display:flex; flex-direction:column; gap:10px;}
.ndx .opt{ text-align:left; font:inherit; font-size:15px; background:var(--bg); color:var(--ink);
  border:1px solid var(--line); border-radius:12px; padding:14px 16px; cursor:pointer;
  display:flex; align-items:center; gap:12px; transition:border-color .15s, background .15s, transform .08s;}
.ndx .opt:hover{ border-color:var(--green); background:var(--tint);}
.ndx .opt:active{ transform:scale(.99);}
.ndx .opt .mk{ width:22px; height:22px; flex:none; border-radius:50%; border:2px solid var(--green);
  color:var(--green); font-weight:900; font-size:13px; display:flex; align-items:center; justify-content:center;}
.ndx .qfoot{ margin-top:18px; display:flex; align-items:center; justify-content:space-between;}
.ndx .qback{ background:none; border:0; color:var(--muted); font:inherit; font-size:13px; cursor:pointer; padding:6px;}
.ndx .qback[disabled]{ opacity:0; pointer-events:none;}
.ndx .qnote{ font-size:11.5px; color:var(--muted);}

/* 診断結果 */
.ndx .result .rlabel{ font-size:13px; color:var(--muted); margin:0 0 4px;}
.ndx .result .rname{ font-size:23px; font-weight:900; color:var(--green-dk); margin:0 0 4px;}
.ndx .result .rtag{ display:inline-block; font-size:12px; font-weight:700; background:var(--tint);
  color:var(--green-dk); padding:3px 10px; border-radius:999px; margin-bottom:14px;}
.ndx .result .rdesc{ font-size:14.5px; margin:0 0 16px;}
.ndx .rstats{ display:flex; gap:10px; margin:0 0 18px; flex-wrap:wrap;}
.ndx .rstats .st{ flex:1; min-width:120px; background:var(--bg); border:1px solid var(--line);
  border-radius:12px; padding:11px 13px;}
.ndx .rstats .st .k{ font-size:11.5px; color:var(--muted);}
.ndx .rstats .st .v{ font-size:17px; font-weight:900; font-variant-numeric:tabular-nums;}
.ndx .rcta{ display:flex; gap:10px; flex-wrap:wrap;}
.ndx .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none;
  font-weight:700; border-radius:999px; padding:13px 22px; font-size:15px; cursor:pointer; border:0; font-family:inherit;}
.ndx .btn-primary{ background:var(--accent); color:#fff; box-shadow:0 12px 22px -10px var(--accent);}
.ndx .btn-primary:hover{ transform:translateY(-1px);}
.ndx .btn-ghost{ background:#fff; color:var(--green-dk); border:1.5px solid var(--green);}
.ndx .rredo{ background:none; border:0; color:var(--muted); font:inherit; font-size:13px; cursor:pointer;
  margin-top:14px; text-decoration:underline;}
.ndx .roff{ font-size:12px; color:var(--muted); background:var(--tint); border-radius:10px; padding:10px 12px; margin:14px 0 0;}

/* ---- 目的別カード ---- */
.ndx .goals{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
@container(max-width:860px){ .ndx .goals{grid-template-columns:1fr 1fr} }
@container(max-width:480px){ .ndx .goals{grid-template-columns:1fr} }
.ndx .goal{ display:block; background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:20px; text-decoration:none; transition:border-color .15s, transform .12s;}
.ndx .goal:hover{ border-color:var(--green); transform:translateY(-3px);}
.ndx .goal .gi{ font-size:22px;}
.ndx .goal h3{ font-size:16px; margin:10px 0 6px; font-weight:700;}
.ndx .goal p{ font-size:13px; color:var(--muted); margin:0;}
.ndx .goal .ar{ color:var(--green); font-weight:700; font-size:13px; margin-top:10px; display:inline-block;}

/* ---- 商品比較 ---- */
.ndx .alt{ background:var(--tint);}
.ndx .cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
@container(max-width:860px){ .ndx .cards{grid-template-columns:1fr 1fr} }
@container(max-width:480px){ .ndx .cards{grid-template-columns:1fr} }
.ndx .pcard{ background:var(--card); border:1px solid var(--line); border-radius:16px; padding:20px; display:flex; flex-direction:column;}
.ndx .pcard .ptag{ font-size:11.5px; font-weight:700; color:var(--green-dk); background:var(--tint);
  display:inline-block; padding:3px 10px; border-radius:999px; align-self:flex-start;}
.ndx .pcard h3{ font-size:17px; margin:12px 0 4px; font-weight:900;}
.ndx .pcard .pd{ font-size:13px; color:var(--muted); margin:0 0 14px; flex:1;}
.ndx .pcard .prow{ display:flex; justify-content:space-between; font-size:13px; padding:7px 0; border-top:1px solid var(--line);}
.ndx .pcard .prow .v{ font-weight:700; font-variant-numeric:tabular-nums;}
.ndx .pcard .plink{ margin-top:14px; text-align:center; text-decoration:none; font-weight:700; font-size:14px;
  color:var(--green-dk); border:1.5px solid var(--green); border-radius:999px; padding:10px;}
.ndx .pcard .plink:hover{ background:var(--green); color:#fff;}
.ndx .pcard.muted .ptag{ background:#EFEAE0; color:#7A6A4A;}

/* ---- シミュレーターのティザー ---- */
.ndx .simteaser{ background:var(--ink); border-radius:20px; padding:38px 34px; color:#EAF1EC;
  display:grid; grid-template-columns:1.2fr 1fr; gap:30px; align-items:center;}
@container(max-width:760px){ .ndx .simteaser{grid-template-columns:1fr; padding:28px 22px} }
.ndx .simteaser h2{ color:#fff; font-size:25px; margin:0 0 12px;}
.ndx .simteaser p{ color:#B9C9BE; font-size:14.5px;}
.ndx .simnum{ background:#22332B; border-radius:14px; padding:20px; text-align:center;}
.ndx .simnum .k{ font-size:12px; color:#9FB4A6;}
.ndx .simnum .big{ font-size:40px; font-weight:900; color:var(--accent); font-variant-numeric:tabular-nums; line-height:1.2;}
.ndx .simnum .u{ font-size:14px; color:#9FB4A6; font-weight:500;}
.ndx .simnum .sub{ font-size:12px; color:#82978B; margin-top:6px;}

/* ---- 比較・ランキングへの導線 ---- */
.ndx .rankcta{ background:var(--card); border:1px solid var(--line); border-radius:16px; padding:26px 28px;
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;}
.ndx .rankcta h3{ font-size:19px; margin:0 0 4px; font-weight:900;}
.ndx .rankcta p{ font-size:13.5px; color:var(--muted); margin:0;}

/* ---- ガイド記事 ---- */
.ndx .guides{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
@container(max-width:760px){ .ndx .guides{grid-template-columns:1fr} }
.ndx .guide{ display:block; background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:20px; text-decoration:none; transition:border-color .15s;}
.ndx .guide:hover{ border-color:var(--green);}
.ndx .guide .gc{ font-size:12px; font-weight:700; color:var(--accent-dk);}
.ndx .guide h3{ font-size:16px; margin:8px 0 0; font-weight:700; line-height:1.5;}

/* ---- 信頼層 ---- */
.ndx .trust{ background:var(--tint);}
.ndx .trust-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
@container(max-width:760px){ .ndx .trust-grid{grid-template-columns:1fr} }
.ndx .tc{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:22px;}
.ndx .tc h3{ font-size:16px; font-weight:700; margin:0 0 8px; color:var(--green-dk);}
.ndx .tc p{ font-size:13.5px; color:#33433B; margin:0;}

/* ---- 健康への配慮バナー ---- */
.ndx .care{ border:1px dashed var(--green); background:var(--card); border-radius:14px; padding:18px 22px;
  font-size:13.5px; color:#33433B;}
.ndx .care b{ color:var(--green-dk);}

/* ---- フッター ---- */
.ndx .foot{ background:var(--ink); color:#A9BBB0; padding:34px max(32px, calc((100% - 1040px) / 2)); font-size:13px;}
.ndx .foot a{ color:#D4E2D9; text-decoration:none; margin-right:18px;}
.ndx .foot .disc{ font-size:11.5px; line-height:1.8; color:#7E948A; margin-top:16px;}

@media(prefers-reduced-motion:reduce){ .ndx *{transition:none!important} }

/* ベースのフォント縮小だけは画面幅基準で維持 */
@media(max-width:680px){ .ndx{font-size:15px} }