/* =========================================================================
   Next Dental Partners ─ 集客ファネル（診断ツール＋LP＋LINE導線）
   デザインシステム（self-contained / BUILD-SPEC §4 準拠）
   方針：明朝のみ・角丸なし・影なし・ネイビー＋白＋グレー・実写×暗グラデ×白抜き
   絵文字／イラスト／アイコン素材なし。装飾は写真・罫線・数字・余白のみ。
   モバイル最優先（〜768px を基準に設計し、PC に広げる）。
   ========================================================================= */

/* ---- 1. デザイントークン ------------------------------------------------ */
:root{
  --navy:#1a2742;
  --navy-deep:#111b30;
  --ink:#1f2733;
  --muted:#5a6473;
  --line:#d8dde6;
  --line-strong:#b9c0cc;
  --bg:#ffffff;
  --bg-alt:#f5f7fa;
  --white:#ffffff;

  /* レイアウト */
  --maxw:680px;          /* 本文の最大幅 */
  --maxw-wide:1080px;    /* フルワイド要素の上限 */
  --pad:24px;            /* 画面左右の余白（モバイル） */
  --gutter:clamp(20px, 5vw, 40px);

  /* タイポのスケール（モバイル基準・clampでPCへ拡張） */
  --fs-hero:clamp(28px, 7.4vw, 46px);
  --fs-h2:clamp(23px, 5.6vw, 34px);
  --fs-q:clamp(21px, 5vw, 30px);
  --fs-lead:clamp(15.5px, 4vw, 18px);
  --fs-body:clamp(15px, 3.8vw, 16.5px);
  --fs-small:clamp(12.5px, 3.2vw, 13.5px);
  --fs-en:clamp(11px, 3vw, 13px);

  --speed:.5s;
}

/* ---- 2. リセット／土台 --------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:"Noto Serif JP", serif;
  font-weight:400;
  color:var(--ink);
  line-height:1.9;
  background:var(--bg);
  font-size:var(--fs-body);
  letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
button{ font-family:inherit; }
a{ color:inherit; }

h1,h2,h3,.heading{
  font-family:"Shippori Mincho","Noto Serif JP",serif;
  font-weight:600;
  letter-spacing:.04em;
  line-height:1.45;
  margin:0;
}
.en{
  font-family:"Cormorant Garamond",serif;
  letter-spacing:.12em;
  font-weight:500;
}

/* 画面外読み上げ用 */
.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---- 3. 画面状態の切替（LP / 診断 / 結果） ------------------------------ */
/* body[data-state] で 3 画面を出し分け。表示中以外は display:none。 */
.screen{ display:none; }
body[data-state="intro"]  #screen-intro,
body[data-state="quiz"]   #screen-quiz,
body[data-state="result"] #screen-result{ display:block; }

/* 切替時の控えめなフェード（reduced-motion で無効化） */
.screen.is-entering{ animation:fade var(--speed) ease both; }
@keyframes fade{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

/* ---- 4. 共通レイアウト要素 ---------------------------------------------- */
.wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--pad);
}
.section{ padding-block:clamp(44px, 11vw, 80px); }
.section--alt{ background:var(--bg-alt); }
.copy-line{ display:block; }

.brandbar{
  width:100%;
  padding:18px var(--pad);
  border-bottom:1px solid var(--line);
  text-align:center;
  background:var(--bg);
}
.brandbar .en{
  font-size:var(--fs-en);
  letter-spacing:.34em;
  color:var(--navy);
  text-transform:uppercase;
  white-space:nowrap;
}

/* 細い見出しの上に置くラベル（番号・章タイトル等） */
.eyebrow{
  font-family:"Cormorant Garamond",serif;
  letter-spacing:.32em;
  text-transform:uppercase;
  font-size:var(--fs-en);
  color:var(--muted);
  display:block;
  margin-bottom:18px;
}
.media .eyebrow{ color:rgba(255,255,255,.72); }

.rule{ border:0; border-top:1px solid var(--line); margin:0; }
.rule--center{ width:48px; border-top:1px solid var(--line-strong); margin:28px auto; }

/* ---- 5. ボタン ---------------------------------------------------------- */
/* 枠線・字間広め・「→」。角丸なし・影なし。ホバーで反転。 */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.85em;
  padding:17px 34px;
  border:1px solid var(--navy);
  background:transparent;
  color:var(--navy);
  font-family:"Shippori Mincho","Noto Serif JP",serif;
  font-weight:600;
  font-size:var(--fs-body);
  letter-spacing:.12em;
  line-height:1.4;
  text-decoration:none;
  cursor:pointer;
  transition:background var(--speed) ease, color var(--speed) ease, border-color var(--speed) ease;
  -webkit-appearance:none;
  appearance:none;
}
.btn .arrow{ font-weight:400; transition:transform var(--speed) ease; }
.btn:hover,.btn:focus-visible{ background:var(--navy); color:var(--white); }
.btn:hover .arrow,.btn:focus-visible .arrow{ transform:translateX(4px); }

/* 暗い背景の上（白枠） */
.btn--on-dark{ border-color:var(--white); color:var(--white); }
.btn--on-dark:hover,.btn--on-dark:focus-visible{ background:var(--white); color:var(--navy); }

/* 大きめ */
.btn--lg{ padding:20px 40px; font-size:clamp(15.5px,4.2vw,18px); }

/* 全幅（モバイルで親指が届く） */
.btn--block{ display:flex; width:100%; }

/* 文章リンク調の地味なボタン（やり直し等） */
.btn-text{
  display:inline-flex; align-items:center; gap:.6em;
  background:none; border:0; padding:6px 2px; cursor:pointer;
  color:var(--muted); font-family:"Noto Serif JP",serif;
  font-size:var(--fs-small); letter-spacing:.08em;
  border-bottom:1px solid var(--line-strong);
  transition:color var(--speed) ease, border-color var(--speed) ease;
}
.btn-text:hover,.btn-text:focus-visible{ color:var(--navy); border-color:var(--navy); }

/* ---- 6. .media（実写＋ネイビー方向性グラデ＋白抜き文字） ---------------- */
/* 写真が無くてもネイビーの上質なグラデで“意図した”見た目になる（オフライン可）。
   背景画像は data-bg / style で後から差し込む。文字側は常に暗くして可読性確保。 */
.media{
  position:relative;
  background-color:var(--navy-deep);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  color:var(--white);
  overflow:hidden;
  isolation:isolate;
}
/* 写真の上に重ねる方向性グラデ（左→暗 / 下→暗）。写真が無い時も成立。 */
.media::before{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(90deg, rgba(17,27,48,.92) 0%, rgba(17,27,48,.66) 42%, rgba(17,27,48,.34) 100%),
    linear-gradient(0deg,  rgba(17,27,48,.86) 0%, rgba(17,27,48,.18) 56%);
}
/* 写真が未設定（プレースホルダ）のときの上質なベース＋ごく薄い質感 */
.media:not([style*="background-image"]):not([data-has-img])::after{
  content:"";
  position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(120% 90% at 78% 8%, rgba(70,90,130,.40) 0%, rgba(70,90,130,0) 55%),
    linear-gradient(160deg, #20304f 0%, var(--navy-deep) 60%, #0d1626 100%);
}
.media .media-inner{ position:relative; z-index:1; }
.media .muted{ color:rgba(255,255,255,.78); }

/* ---- 7. LP（イントロ） -------------------------------------------------- */
.hero{
  min-height:clamp(560px, 92svh, 760px);
  display:flex;
  align-items:flex-end;
}
.hero .media-inner{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding:var(--pad);
  padding-bottom:clamp(48px, 12vw, 88px);
  padding-top:clamp(80px, 20vw, 120px);
}
.hero h1{
  font-size:var(--fs-hero);
  font-weight:600;
  margin-bottom:24px;
}
.hero .lead{
  font-size:var(--fs-lead);
  max-width:34em;
  margin:0 0 16px;
  color:rgba(255,255,255,.9);
}
.hero .sub{
  font-size:var(--fs-body);
  max-width:34em;
  margin:0 0 36px;
  color:rgba(255,255,255,.74);
}
.hero .btn{ margin-bottom:18px; }
.hero .note{
  font-size:var(--fs-small);
  color:rgba(255,255,255,.7);
  letter-spacing:.06em;
}
.hero .note .sep{ margin:0 .7em; color:rgba(255,255,255,.4); }

/* LP 下段：信頼の補足（罫線と数字のみ・誇大表現なし） */
.intro-points{
  list-style:none; margin:0; padding:0;
  display:grid; gap:12px;
}
.intro-points li{
  padding:22px;
  background:var(--bg-alt);
}
.intro-points .num{
  font-family:"Cormorant Garamond",serif;
  font-size:clamp(20px,5vw,26px);
  letter-spacing:.1em;
  color:var(--navy);
  margin-right:16px;
}
.intro-points .label{ font-weight:500; }
.intro-points p{ margin:8px 0 0; color:var(--muted); font-size:var(--fs-small); }

/* ---- 8. 診断（質問） ---------------------------------------------------- */
.quiz{
  min-height:100svh;
  display:flex;
  flex-direction:column;
}
.quiz-head{
  padding:22px var(--pad) 0;
  width:100%; max-width:var(--maxw); margin-inline:auto;
}
.quiz-body{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  width:100%; max-width:var(--maxw); margin-inline:auto;
  padding:24px var(--pad) 40px;
}
.quiz-foot{
  width:100%; max-width:var(--maxw); margin-inline:auto;
  padding:0 var(--pad) 28px;
  display:flex; align-items:center; gap:18px;
}

/* 進捗（細い罫線バー＋「3 / 7」）。CSS の罫線・塗りのみ。 */
.progress{ display:flex; align-items:center; gap:14px; }
.progress .count{
  font-family:"Cormorant Garamond",serif;
  letter-spacing:.14em;
  font-size:var(--fs-small);
  color:var(--muted);
  white-space:nowrap;
}
.progress .count b{ color:var(--navy); font-weight:600; }
.progress-track{
  flex:1; height:1px; background:var(--line); position:relative;
}
.progress-bar{
  position:absolute; inset:0 auto 0 0; height:1px; width:0;
  background:var(--navy);
  transition:width var(--speed) ease;
}

.question{
  font-size:var(--fs-q);
  font-weight:600;
  margin:0 0 28px;
}
.question .qno{
  display:block;
  font-family:"Cormorant Garamond",serif;
  font-size:var(--fs-en);
  letter-spacing:.28em;
  color:var(--muted);
  margin-bottom:14px;
  text-transform:uppercase;
}

/* 選択肢：罫線で区切ったタップしやすいボタン（ラジオ）。塗り・罫線のみ。 */
.choices{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.choice{
  display:flex;
  align-items:flex-start;
  gap:16px;
  width:100%;
  text-align:left;
  min-height:60px;
  padding:18px 20px;
  background:var(--bg);
  border:1px solid var(--line-strong);
  color:var(--ink);
  font-family:"Noto Serif JP",serif;
  font-size:var(--fs-body);
  line-height:1.7;
  letter-spacing:.02em;
  cursor:pointer;
  transition:border-color var(--speed) ease, background var(--speed) ease, color var(--speed) ease;
}
/* ラジオの印：CSS の罫線・塗りのみ（円・四角でなく直線基調の小四角） */
.choice .marker{
  flex:none;
  width:16px; height:16px;
  margin-top:.28em;
  border:1px solid var(--line-strong);
  background:transparent;
  position:relative;
  transition:border-color var(--speed) ease;
}
.choice .marker::after{
  content:"";
  position:absolute; inset:3px;
  background:var(--navy);
  opacity:0;
  transition:opacity var(--speed) ease;
}
.choice:hover,.choice:focus-visible{
  border-color:var(--navy);
  background:var(--bg-alt);
}
.choice:hover .marker,.choice:focus-visible .marker{ border-color:var(--navy); }
/* 選択済み（戻ったときに前の回答を示す） */
.choice[aria-pressed="true"]{
  background:var(--navy);
  border-color:var(--navy);
  color:var(--white);
}
.choice[aria-pressed="true"] .marker{ border-color:var(--white); }
.choice[aria-pressed="true"] .marker::after{ background:var(--white); opacity:1; }

/* ---- 9. 結果 ------------------------------------------------------------ */
.result-hero{ padding-top:clamp(40px,10vw,72px); }
.result-hero .eyebrow{ color:var(--muted); }
.result-type{
  font-size:var(--fs-hero);
  font-weight:700;
  margin:0 0 4px;
}
.result-type .small{
  display:block;
  font-size:var(--fs-body);
  font-weight:500;
  color:var(--muted);
  letter-spacing:.06em;
  margin-bottom:14px;
}
.result-summary{
  font-size:var(--fs-lead);
  margin:24px 0 0;
}

/* 結果ブロック（推奨トラック・変わる像） */
.block{ margin-top:clamp(36px,9vw,56px); }
.block .label{
  font-family:"Cormorant Garamond",serif;
  letter-spacing:.26em;
  text-transform:uppercase;
  font-size:var(--fs-en);
  color:var(--muted);
  display:block;
  margin-bottom:14px;
}
.block h2{ font-size:var(--fs-h2); margin-bottom:14px; }
.block .track-name{ font-size:var(--fs-h2); color:var(--navy); margin-bottom:10px; }
.block .track-desc{ color:var(--muted); }

.change-list{ list-style:none; margin:18px 0 0; padding:0; display:grid; gap:12px; }
.change-list li{
  padding:18px;
  background:var(--bg-alt);
  display:flex; gap:16px; align-items:flex-start;
}
.change-list .n{
  font-family:"Cormorant Garamond",serif;
  font-size:clamp(17px,4.4vw,21px);
  letter-spacing:.08em;
  color:var(--navy);
  flex:none; min-width:1.6em;
}

.closing-note{
  margin-top:clamp(32px,8vw,48px);
  padding:26px 24px;
  background:var(--bg-alt);
  color:var(--ink);
  font-size:var(--fs-body);
}

/* 結果の CTA（写真＋暗グラデ＋白文字） */
.cta{ margin-top:0; }
.cta .media-inner{
  width:100%; max-width:var(--maxw); margin-inline:auto;
  padding:clamp(48px,12vw,84px) var(--pad);
}
.cta h2{ font-size:var(--fs-h2); margin-bottom:18px; }
.cta .cta-lead{ color:rgba(255,255,255,.86); margin:0 0 22px; }
.cta-gifts{ list-style:none; margin:0 0 34px; padding:0; display:grid; gap:10px; }
.cta-gifts li{
  padding:20px;
  background:rgba(255,255,255,.08);
  display:flex; gap:16px; align-items:flex-start;
}
.cta-gifts .n{
  font-family:"Cormorant Garamond",serif;
  font-size:clamp(17px,4.4vw,21px);
  letter-spacing:.08em;
  color:rgba(255,255,255,.92);
  flex:none; min-width:1.6em;
}
.cta-gifts .g-title{ display:block; font-weight:500; }
.cta-gifts .g-sub{ display:block; color:rgba(255,255,255,.66); font-size:var(--fs-small); margin-top:4px; }
.cta .cta-note{
  margin-top:20px;
  font-size:var(--fs-small);
  color:rgba(255,255,255,.66);
  letter-spacing:.04em;
}
.cta .cta-note a{ color:rgba(255,255,255,.86); text-underline-offset:3px; }

/* 予約（温度の高い人向けに小さく）／会社紹介／やり直し */
.result-tail{ text-align:left; }
.company-note{
  margin-top:clamp(36px,9vw,52px);
  padding:clamp(28px,7vw,40px);
  background:var(--bg-alt);
  color:var(--muted);
  font-size:var(--fs-body);
}
.company-note .en{ display:block; font-size:var(--fs-en); color:var(--navy); letter-spacing:.3em; text-transform:uppercase; margin-bottom:12px; }
.restart{ margin-top:clamp(30px,7vw,44px); }

/* ---- 10. フッター ------------------------------------------------------- */
.foot{
  border-top:1px solid var(--line);
  padding:30px var(--pad);
  text-align:center;
  color:var(--muted);
  font-size:var(--fs-small);
}
.foot .en{ display:block; letter-spacing:.3em; text-transform:uppercase; color:var(--navy); margin-bottom:8px; }
.foot a{ color:var(--muted); text-underline-offset:3px; }

/* ---- 11. フォーカスリング（キーボード操作） ---------------------------- */
:focus-visible{ outline:2px solid var(--navy); outline-offset:2px; }
.media :focus-visible,.btn--on-dark:focus-visible{ outline-color:var(--white); }
/* 設問見出しは“管理フォーカス”の対象（操作要素ではない）＝可視リングは出さない */
#quiz-question:focus,#quiz-question:focus-visible{ outline:none; }

/* ---- 12. PC への拡張（768px〜） ---------------------------------------- */
@media (min-width:768px){
  :root{ --pad:32px; }
  .hero .media-inner{ max-width:var(--maxw-wide); }
  .cta .media-inner{ max-width:var(--maxw); }
  .change-list li,.cta-gifts li{ gap:22px; }
}
@media (min-width:1024px){
  .hero h1{ max-width:14em; }
}

/* ---- 13. reduced-motion 尊重 ------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .btn .arrow{ transition:none; }
}

/* ---- 14. 印刷（結果の保存用・最小限） --------------------------------- */
@media print{
  .hero,.cta,.foot,.restart,.brandbar{ display:none !important; }
  body{ font-size:12pt; }
}

/* 日本語の自然な折り返しと簡易診断の注記 */
:where(h1,h2,h3,p,li,.lead,.sub,.question,.result-summary,.track-desc,.cta-lead){
  line-break:strict; overflow-wrap:normal; word-break:auto-phrase; text-wrap:pretty;
}
:where(h1,h2,h3){text-wrap:balance}
.brandbar a{text-decoration:none}
.result-disclaimer{margin:18px 0 0;color:var(--muted);font-size:var(--fs-small)}
@supports not (word-break:auto-phrase){:where(h1,h2,h3,p,li,.lead){word-break:normal}}

/* 資料受取と診断結果：語句のまとまりを保ち、狭い画面でも自然に折り返す */
h1,h2,h3,p,.choice-label{word-break:normal;overflow-wrap:break-word;line-break:strict;text-wrap:pretty;}
.hero h1{font-size:clamp(25px,3.6vw,44px);letter-spacing:.03em;}
.copy-line{display:block;}
.result-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 32px;}
.result-detail-grid .label{display:block;margin-bottom:12px;font-size:17px;}
.result-detail-grid p{margin-top:12px;}
.paper-teaser{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center;}
.paper-teaser h2{font-size:clamp(24px,3vw,34px);line-height:1.7;margin-bottom:20px;}
.paper-teaser img{width:100%;height:auto;box-shadow:0 12px 40px #111b3020;}
.paper-teaser ul{padding-left:1.4em;margin:20px 0 28px;}
.result-actions{display:flex;gap:24px;flex-wrap:wrap;align-items:center;}
@media(max-width:640px){.result-detail-grid,.paper-teaser{grid-template-columns:1fr}.paper-teaser .btn{padding:18px 20px;font-size:15px;letter-spacing:.02em}.result-actions{flex-direction:column;align-items:stretch}.hero h1 .copy-line{max-width:100%}}

.diagnosis-brand{display:inline-flex;align-items:center;gap:14px;text-decoration:none;letter-spacing:.05em;font-size:20px}.diagnosis-brand img{width:52px;height:28px}.foot .diagnosis-brand{font-size:16px}@media(max-width:400px){.diagnosis-brand{font-size:17px;gap:10px}}

.phrase{display:inline-block}.foot{display:flex;flex-direction:column;gap:12px;align-items:center}.foot>span{display:block}

.paper-teaser{max-width:var(--maxw-wide)}.paper-teaser .btn{font-size:16px;padding-inline:24px;letter-spacing:.03em}.result-type{font-size:clamp(26px,5vw,40px);letter-spacing:.04em}