/* やまもと歯科・矯正歯科「様子見層」LP（片噛み編）v2
   ・配色はネイビー×シャンパンゴールド（2026-11-13 滝沢氏「茶色でじじくさい→洗練されたトンマナに」で茶・クリームから変更。旧版＝img_src/_old/theme/style_brown.css）。金は医院公式サイトの基調色ゴールドを抑えたシャンパン色として残す
   ・章ごとに色面を切り替える（クリーム → 白 → 淡いゴールド → 写真背景 → 濃い茶）
   ・見出しは明朝（Noto Serif JP）、装飾の英字・数字は Bodoni（lnum）、本文はシステムのゴシック
   ・本文16px以上（想定読者50〜60代） */

:root {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --text: #1d2633;
  --text-sub: #4a5565;
  --gold: #a5844f;
  --gold-dark: #7a5f37;
  --gold-pale: #e8ecf1;
  --gold-soft: #f1f4f8;
  --brown: #1f3350;
  --line: #dbe1e8;
  --cta: #1f4e79;
  --cta-dark: #143553;
  --line-green: #06c755;
  --tel: #2b3a4e;
  --marker: #ead9b6;
  --radius: 16px;
  --col: 720px;
  --shadow: 0 10px 30px rgba(25, 40, 62, .10);
  --font: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", "Yu Gothic", YuGothic, Meiryo, sans-serif;
  --mincho: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif;
  --bodoni: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: #e6eaf0;
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.85;
  overflow-wrap: anywhere;
  line-break: strict;
}
img { max-width: 100%; height: auto; display: block; }
main { max-width: var(--col); margin: 0 auto; background: var(--bg); overflow: hidden; box-shadow: 0 0 40px rgba(25, 40, 62, .08); }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
.nw { display: inline-block; }

.sec { padding: 64px 22px; position: relative; }

/* ---------- 見出し ---------- */
.en-label {
  font-family: var(--bodoni);
  font-style: italic;
  font-weight: 500;
  font-size: 18px;
  letter-spacing: .08em;
  color: var(--gold);
  text-align: center;
  margin: 0 0 4px;
  font-feature-settings: "lnum";
}
.en-label-light { color: #d8c296; }
.sec-title {
  font-family: var(--mincho);
  font-size: 24px;
  line-height: 1.6;
  margin: 0 0 32px;
  color: var(--brown);
  font-weight: 700;
  text-align: center;
  letter-spacing: .02em;
}
.sec-title::after {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  background: var(--gold);
  margin: 16px auto 0;
}
.sec-title-light { color: #fff; }
.sec-title-light::after { background: #d8c296; }
.sec-title-sub { font-size: 18px; }
.note { font-size: 16px; color: var(--text-sub); line-height: 1.75; }
.note-light { color: #dfe6ef; }

/* ---------- 画像スロット（未配置ならプレースホルダ） ---------- */
.img-slot { position: relative; margin: 0; aspect-ratio: var(--ar, 3 / 2); background: var(--gold-pale); overflow: hidden; }
.img-slot .ph {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 16px; text-align: center; font-size: 16px; color: var(--gold-dark);
  border: 2px dashed var(--line);
}
.img-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.img-slot.is-missing img { display: none; }
.img-slot.is-loaded { background: transparent; }
.img-slot.is-loaded .ph { display: none; }

/* ---------- S1 FV ---------- */
.fv { padding: 0; background: var(--bg); }
.fv-visual { position: relative; }
.fv-img { --ar: 4 / 5; }
.fv-img img { object-position: 50% 70%; }
.fv-visual::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(246, 247, 249, .92) 0%, rgba(246, 247, 249, .70) 30%, rgba(246, 247, 249, 0) 52%, rgba(246, 247, 249, 0) 82%, var(--bg) 100%);
}
.fv-copy { position: absolute; left: 0; right: 0; top: 0; z-index: 2; padding: 28px 18px 0; }
.fv-eyebrow { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.fv-eyebrow span {
  font-size: 16px; font-weight: 700; color: var(--gold-dark);
  background: rgba(255, 255, 255, .85); border: 1px solid var(--line);
  padding: 2px 12px; border-radius: 999px; line-height: 1.6;
}
.fv-title {
  font-family: var(--mincho);
  font-size: clamp(28px, calc((100vw - 34px) / 12.2), 32px); /* 「放っておいていませんか？」12字が1行に収まる */
  line-height: 1.55;
  margin: 0;
  font-weight: 800;
  color: var(--brown);
  letter-spacing: .01em;
  text-shadow: 0 0 18px rgba(246, 247, 249, .9);
}
.mk { background: linear-gradient(transparent 62%, var(--marker) 62%, var(--marker) 92%, transparent 92%); }
.ai-label {
  position: absolute; right: 10px; bottom: 18%; z-index: 2; margin: 0;
  font-size: 12px; line-height: 1.4; color: #fff; background: rgba(20, 30, 45, .55);
  padding: 2px 8px; border-radius: 4px;
}
.fv-body { position: relative; z-index: 2; margin-top: -48px; padding: 0 18px 56px; }
.fv-sub {
  font-family: var(--mincho); font-weight: 600; font-size: 18px; line-height: 1.95;
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 22px 20px; margin-bottom: 20px; position: relative;
}
.fv-sub b { color: var(--cta-dark); font-weight: 800; }
.fv-info { margin-top: 20px; font-size: 16px; color: var(--text-sub); text-align: center; }

/* ---------- チェックリスト ---------- */
.checklist { list-style: none; margin: 0 0 24px; padding: 0; }
.checklist li + li { margin-top: 10px; }
.checklist label {
  display: flex; align-items: center; gap: 14px; min-height: 62px;
  padding: 12px 16px; background: var(--surface);
  border: 2px solid var(--line); border-radius: 14px;
  cursor: pointer; font-size: 17px; line-height: 1.6; font-weight: 600;
  transition: background-color .15s, border-color .15s, transform .15s;
}
.checklist input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  flex: 0 0 auto; width: 30px; height: 30px; margin: 0;
  border: 2px solid #6b7a8f; border-radius: 8px; background: #fff;
  display: grid; place-content: center; cursor: pointer;
}
.checklist input[type="checkbox"]::before {
  content: ""; width: 16px; height: 9px; margin-top: -4px;
  border-left: 4px solid #fff; border-bottom: 4px solid #fff;
  transform: rotate(-45deg) scale(0); transition: transform .12s;
}
.checklist input[type="checkbox"]:checked { background: var(--cta); border-color: var(--cta); }
.checklist input[type="checkbox"]:checked::before { transform: rotate(-45deg) scale(1); }
.checklist label:has(input:checked), .checklist label.is-checked { background: var(--gold-soft); border-color: var(--gold); }
.checklist label:focus-within { outline: 3px solid var(--cta); outline-offset: 2px; }

/* ---------- CTA ---------- */
.cta-block { margin-top: 28px; display: grid; gap: 14px; }
.cta-lead { text-align: center; font-weight: 800; font-size: 17px; margin: 0; color: var(--brown); }
.cta-lead span { position: relative; padding: 0 22px; }
.cta-lead span::before, .cta-lead span::after {
  content: ""; position: absolute; bottom: .35em; width: 14px; height: 2px; background: var(--brown);
}
.cta-lead span::before { left: 0; transform: rotate(55deg); }
.cta-lead span::after { right: 0; transform: rotate(-55deg); }
.btn {
  position: relative; isolation: isolate;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  min-height: 64px; width: 100%; padding: 10px 52px 10px 20px;
  border-radius: 999px; font-size: 19px; font-weight: 800; line-height: 1.35;
  text-align: center; text-decoration: none; border: 2px solid transparent;
  flex-direction: column;
}
.btn small { font-size: 16px; font-weight: 600; opacity: .95; }
.btn .arrow {
  position: absolute; right: 18px; top: 50%; width: 26px; height: 26px; margin-top: -13px;
  border-radius: 50%; background: rgba(255, 255, 255, .25);
}
.btn .arrow::before {
  content: ""; position: absolute; left: 8px; top: 9px; width: 7px; height: 7px;
  border-top: 2.5px solid currentColor; border-right: 2.5px solid currentColor; transform: rotate(45deg);
}
.btn:focus-visible { outline: 3px solid var(--gold-dark); outline-offset: 3px; }
.btn-reserve { background: var(--cta); color: #fff; box-shadow: 0 4px 0 var(--cta-dark), 0 10px 20px rgba(31, 78, 121, .25); }
.btn-reserve:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--cta-dark); }
.btn-line { background: var(--line-green); color: #fff; box-shadow: 0 4px 0 #04a045; }
.btn-tel { background: var(--tel); color: #fff; box-shadow: 0 4px 0 #151f2d; }
@media (prefers-reduced-motion: no-preference) {
  .btn-reserve::after, .btn-tel::after {
    content: ""; position: absolute; inset: -2px; border-radius: inherit; z-index: -1;
    border: 2px solid currentColor; color: var(--cta); animation: ripple 2.4s ease-out infinite;
  }
  .btn-tel::after { color: var(--tel); }
  .btn .arrow::before { animation: nudge 1.6s ease-in-out infinite; }
  .btn-reserve, .btn-tel { animation: breathe 2.4s ease-in-out infinite; }
}
@keyframes ripple { 0% { opacity: .7; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.08, 1.35); } }
@keyframes nudge { 0%, 100% { transform: translateX(0) rotate(45deg); } 50% { transform: translateX(3px) rotate(45deg); } }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); } }

/* ---------- S2 漫画 ---------- */
.manga { background: var(--surface); padding-left: 0; padding-right: 0; }
.manga-head { padding: 0 22px; margin-bottom: 28px; }
.manga-intro {
  font-family: var(--mincho); font-size: 20px; font-weight: 700; text-align: center; line-height: 1.7; color: var(--brown);
}
.manga-list { display: grid; gap: 14px; padding: 0 12px; }
.manga-slot { --ar: 3 / 2; border: 3px solid var(--brown); border-radius: 4px; box-shadow: 4px 4px 0 var(--gold-pale); }
.manga-slot img { object-fit: contain; background: #fff; }
.manga-note { padding: 0 22px; margin-top: 16px; text-align: center; }
.scroll-cue { display: flex; justify-content: center; margin: 24px 0 0; }
.scroll-cue span { width: 18px; height: 18px; border-right: 3px solid var(--gold); border-bottom: 3px solid var(--gold); transform: rotate(45deg); }

/* ---------- S3 約束 ---------- */
.promise { background: var(--gold-pale); }
.promise-list { display: grid; gap: 22px; }
.promise-item { background: var(--surface); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.promise-img { --ar: 16 / 9; }
.promise-body { position: relative; padding: 30px 22px 24px; }
.promise-no {
  position: absolute; top: -34px; left: 18px; margin: 0;
  font-family: var(--bodoni); font-weight: 600; font-size: 52px; line-height: 1;
  color: var(--gold); font-feature-settings: "lnum";
  text-shadow: 0 2px 0 #fff, 2px 0 0 #fff, -2px 0 0 #fff, 0 -2px 0 #fff;
}
.promise-lead { display: block; font-family: var(--mincho); font-size: 21px; line-height: 1.55; color: var(--brown); margin-bottom: 6px; }
.promise-lead + br { display: none; }

/* ---------- 写真背景の章（S4） ---------- */
.bg-photo { background: var(--bg) var(--bg-img) center / cover no-repeat; padding: 56px 14px; }
.bg-photo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(246, 247, 249, .55), rgba(246, 247, 249, .85)); }
.card-glass {
  position: relative; background: rgba(255, 255, 255, .93); border-radius: 20px;
  padding: 40px 18px 32px; box-shadow: var(--shadow);
}
.check-result {
  display: flex; align-items: center; gap: 16px;
  background: var(--brown); color: #fff; border-radius: var(--radius); padding: 18px 18px;
  margin-bottom: 12px;
}
.check-count {
  flex: 0 0 auto; width: 82px; height: 82px; margin: 0; border-radius: 50%;
  background: #fff; color: var(--cta); display: flex; align-items: baseline; justify-content: center; padding-top: 14px;
  font-family: var(--bodoni); font-weight: 600; font-size: 42px; line-height: 1; font-feature-settings: "lnum";
}
.check-count small { font-size: 18px; color: var(--text-sub); margin-left: 2px; }
#check-result-text { font-weight: 700; font-size: 17px; line-height: 1.7; }

/* ---------- S5 選択肢（濃い色面＋写真） ---------- */
.choice { background: var(--brown); color: #e6ecf3; padding: 0 0 64px; }
.choice-img { --ar: 16 / 10; }
.choice-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(25, 40, 62, 0) 45%, var(--brown) 100%); }
.choice-body { padding: 0 22px; margin-top: -40px; position: relative; }
.choice-key {
  font-family: var(--mincho); font-size: 19px; font-weight: 700; line-height: 1.8; color: #fff;
  border-left: 3px solid #d8c296; padding: 4px 0 4px 16px; margin: 1.4em 0;
}

/* ---------- S6 費用 ---------- */
.price { background: var(--surface); }
.price .sec-title { margin-bottom: 12px; }
.price-tax { text-align: center; font-size: 16px; color: var(--text-sub); margin-bottom: 24px; }
.price-table { width: 100%; border-collapse: collapse; font-size: 16px; margin-bottom: 18px; }
.price-table th, .price-table td { border: 1px solid var(--line); padding: 14px; text-align: left; vertical-align: top; }
.price-table thead th { background: var(--brown); color: #fff; font-weight: 700; }
.price-table tbody th { font-family: var(--mincho); font-weight: 700; font-size: 18px; color: var(--brown); }
.price-table tr[hidden] { display: none; }
.yen { font-family: var(--mincho); font-weight: 700; white-space: nowrap; }
.row-implant .price-cell { background: var(--gold-soft); }
.price-big { display: block; font-family: var(--mincho); font-weight: 700; font-size: 18px; color: var(--cta-dark); }
.price-big .yen { font-size: 22px; white-space: normal; }
.price-photo { --ar: 21 / 9; border-radius: var(--radius); margin-bottom: 16px; }

@media (max-width: 600px) {
  .price-table, .price-table tbody, .price-table tr, .price-table th, .price-table td { display: block; width: 100%; }
  .price-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .price-table tbody tr { border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 14px; overflow: hidden; background: var(--surface); }
  .price-table tbody tr[hidden] { display: none; }
  .price-table th, .price-table td { border: 0; padding: 10px 16px 0; }
  .price-table tbody th { background: var(--brown); color: #fff; padding: 12px 16px; }
  .price-table td:last-child { padding-bottom: 16px; margin-top: 10px; padding-top: 12px; }
  .price-table td::before { content: attr(data-label); display: block; font-size: 16px; color: var(--text-sub); font-weight: 700; }
  .row-implant .price-cell { border-top: 1px dashed var(--line); }
}

/* ---------- S7 流れ ---------- */
.flow { background: var(--bg); }
.flow-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.flow-list li {
  display: grid; grid-template-columns: 112px 1fr; gap: 16px; align-items: center;
  background: var(--surface); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow);
  position: relative;
}
.flow-list li + li { margin-top: 30px; }
.flow-list li + li::before {
  content: ""; position: absolute; top: -24px; left: 60px; width: 0; height: 0;
  border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 14px solid var(--gold);
}
.flow-img { --ar: 1 / 1; border-radius: 50%; outline: 2px dashed var(--gold); outline-offset: 3px; }
.flow-no { display: block; font-family: var(--bodoni); font-style: italic; font-size: 17px; color: var(--gold); font-feature-settings: "lnum"; line-height: 1.4; }
.flow-list strong { color: var(--brown); }
.flow-last { background: var(--brown) !important; color: #fff; }
.flow-last strong { color: #d8c296; }
.flow-last .flow-no { color: #d8c296; }

/* ---------- S8 院長 ---------- */
.director { background: var(--surface); }
.director-img { --ar: 3 / 2; border-radius: var(--radius); margin-bottom: -40px; }
.director-img img { object-position: 78% 30%; }
.director-message {
  position: relative; margin: 0 10px 24px; background: var(--surface); border-radius: var(--radius);
  padding: 30px 22px 24px; box-shadow: var(--shadow); border-top: 4px solid var(--gold);
  font-family: var(--mincho); font-weight: 600; font-size: 18px; line-height: 2;
}
.director-message::before {
  content: "\201C"; position: absolute; top: -34px; left: 14px;
  font-family: var(--bodoni); font-size: 80px; line-height: 1; color: var(--gold);
}
.director-profile { padding: 0 6px; }
.director-name { font-family: var(--mincho); font-size: 24px; font-weight: 800; color: var(--brown); margin-bottom: 8px; }
.director-name small { font-size: 16px; margin-right: 6px; color: var(--text-sub); }
.director-gakkai { font-size: 16px; color: var(--text-sub); }

/* ---------- S9 最終CTA ---------- */
.final { padding: 0 0 56px; background: var(--gold-pale); }
.final-hero {
  position: relative; padding: 96px 22px 40px;
  background: var(--brown) var(--bg-img) center 30% / cover no-repeat;
}
.final-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(25, 40, 62, .35), rgba(25, 40, 62, .88)); }
.final-hero .sec-title { position: relative; margin-bottom: 0; font-size: 25px; }
.final-body { padding: 32px 22px 0; }
.final-body > p { font-weight: 600; }
.clinic-info { margin-top: 36px; background: var(--surface); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.clinic-img { --ar: 16 / 9; }
.clinic-info dl { margin: 0; padding: 18px 20px 22px; font-size: 16px; display: grid; grid-template-columns: 1fr; }
.clinic-info dt { font-weight: 800; color: var(--gold-dark); margin-top: 14px; font-size: 16px; }
.clinic-info dt:first-child { margin-top: 0; }
.clinic-info dd { margin: 2px 0 0; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.clinic-info dd:last-child { border-bottom: 0; padding-bottom: 0; }
.tel-link { color: var(--cta-dark); font-weight: 800; font-size: 20px; }

/* ---------- フッター ---------- */
.site-footer { max-width: var(--col); margin: 0 auto; padding: 28px 20px 36px; text-align: center; font-size: 16px; color: #d5dde8; background: var(--brown); }
.noscript-tel { text-align: center; padding: 16px; }

/* ---------- 固定CTAバー（スマートフォンのみ） ---------- */
.sticky-cta { display: none; }
@media (max-width: 767px) {
  .sticky-cta {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .96); border-top: 1px solid var(--line);
    box-shadow: 0 -4px 14px rgba(0, 0, 0, .10);
    transform: translateY(110%); visibility: hidden; transition: transform .25s ease, visibility .25s;
  }
  .sticky-cta.is-single { grid-template-columns: 1fr; }
  .sticky-cta.is-visible { transform: translateY(0); visibility: visible; }
  .sticky-cta .btn { min-height: 56px; font-size: 16px; padding: 6px 30px 6px 10px; animation: none; }
  .sticky-cta .btn::after { display: none; }
  .sticky-cta .btn .arrow { right: 8px; width: 20px; height: 20px; margin-top: -10px; }
  .sticky-cta .btn .arrow::before { left: 5px; top: 6px; }
  body.has-sticky { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) { .sticky-cta { transition: none; } }

/* ---------- PC（中央カラム） ---------- */
@media (min-width: 768px) {
  .sec { padding: 80px 48px; }
  .fv-copy { padding: 44px 40px 0; }
  .fv-body { padding: 0 40px 64px; }
  .manga { padding-left: 0; padding-right: 0; }
  .manga-list { padding: 0 40px; }
  .bg-photo { padding: 72px 40px; }
  .choice { padding: 0 0 80px; }
  .choice-body { padding: 0 48px; }
  .final { padding: 0 0 72px; }
  .final-body { padding: 40px 48px 0; }
  .flow-list li { grid-template-columns: 150px 1fr; }
}

/* ---------- v2 追記：読み上げ専用・インプラントの説明欄・要確認表示 ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.manga-intro { margin: 0; }
.ai-label { font-size: 14px; }
.implant-info { border: 2px solid var(--brown); border-radius: var(--radius); margin: 0 0 18px; overflow: hidden; }
.implant-info-title { margin: 0; background: var(--brown); color: #fff; font-family: var(--mincho); font-size: 18px; padding: 10px 16px; }
.implant-info dl { margin: 0; padding: 6px 16px 16px; font-size: 16px; }
.implant-info dt { font-weight: 800; color: var(--brown); margin-top: 12px; }
.implant-info dd { margin: 2px 0 0; }
.implant-info ul { margin: 4px 0 0; padding-left: 1.2em; }
.implant-info li + li { margin-top: 4px; }
.todo { background: #fff3a8; color: #8a2a00; font-weight: 800; padding: 0 4px; }
/* 文節でだけ改行（<wbr> は tools/phrase_wrap.cjs で挿入）。1文節が行より長い時だけ非常手段で折る */
.kp { word-break: keep-all; overflow-wrap: anywhere; }
.tel-num { white-space: nowrap; display: inline-block; }

/* v3：創作の注記（漫画の冒頭）・追加費用の注記（価格表の直後） */
.manga-fiction { text-align: center; margin: 12px 0 0; }
.price-note { margin-bottom: 20px; padding: 12px 14px; background: var(--gold-soft); border-radius: 10px; color: var(--text); }
/* LINEボタンは公式色 #06C755（ブランド指定）。白文字の判読性を上げるため太字・やや大きめ */
.btn-line { font-weight: 800; text-shadow: 0 1px 0 rgba(0, 0, 0, .18); }

/* v4：初診の行・自由診療の説明（インプラント／自費の入れ歯） */
.row-first .price-cell { background: #eef3f8; }
.first-fee { font-weight: 700; }
.info-sub { margin: 0; padding: 12px 16px 0; font-family: var(--mincho); font-size: 18px; color: var(--cta-dark); border-top: 1px dashed var(--line); }
.implant-info-title + .info-sub { border-top: 0; }

/* v4：漫画は画面の端まで広げる（吹き出しの文字を少しでも大きく）＋タップ拡大 */
.manga-list { padding: 0; gap: 8px; }
.manga-slot { border: 0; border-top: 2px solid var(--brown); border-bottom: 2px solid var(--brown); border-radius: 0; box-shadow: none; cursor: zoom-in; }
.manga-slot:focus-visible { outline: 3px solid var(--cta); outline-offset: -3px; }
.zoom-hint { text-align: center; font-size: 16px; color: var(--text-sub); margin: 0 0 12px; }
.zoom-hint::before { content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 6px; vertical-align: -1px; border: 2px solid currentColor; border-radius: 50%; box-shadow: 5px 5px 0 -3px currentColor; }
.zoom { position: fixed; inset: 0; z-index: 100; background: rgba(10, 16, 26, .92); display: flex; align-items: center; }
.zoom[hidden] { display: none; }
.zoom-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.zoom-scroll img { width: 190vw; max-width: 1536px; height: auto; display: block; margin: 0 auto; background: #fff; }
.zoom-close { position: fixed; top: calc(12px + env(safe-area-inset-top)); right: 12px; min-height: 48px; padding: 0 20px; border: 0; border-radius: 999px; background: #fff; color: var(--brown); font-size: 17px; font-weight: 800; font-family: var(--font); }
html.zoom-open, html.zoom-open body { overflow: hidden; }
@media (min-width: 768px) { .manga-list { padding: 0 40px; } .zoom-scroll img { width: min(1536px, 96vw); } }

/* ---------- v5：費用の章（1回目の費用を先頭に／3つの方法の比較図／内訳） ---------- */
.price-table { display: none; }
.first-visit {
  background: var(--brown); color: #fff; border-radius: var(--radius); padding: 22px 20px; text-align: center; margin-bottom: 16px;
}
.first-visit-label { display: inline-block; background: #d8c296; color: var(--brown); font-weight: 800; border-radius: 999px; padding: 2px 16px; margin-bottom: 10px; }
.first-visit-price { font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.first-visit-num { display: inline-block; font-family: var(--mincho); font-size: 30px; font-weight: 800; color: #e8d3a4; line-height: 1.4; }
.first-visit-num.todo { font-size: 18px; color: #8a2a00; }
.first-visit-desc { font-size: 16px; color: #dfe6ef; margin: 0; }
.keep-card { background: #eef3f8; border: 2px solid #c6d4e3; border-radius: var(--radius); padding: 16px 18px; margin-bottom: 36px; }
.keep-head { font-weight: 800; color: #1f4e79; margin-bottom: 4px; }
.cmp-title { font-family: var(--mincho); font-size: 22px; text-align: center; color: var(--brown); margin: 0 0 16px; line-height: 1.5; }
.cmp { border: 2px solid var(--brown); border-radius: var(--radius); overflow: hidden; background: #fff; }
.cmp-head { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--gold-soft); border-bottom: 2px solid var(--brown); }
.cmp-head figure { margin: 0; padding: 10px 4px 12px; text-align: center; }
.cmp-head figure + figure { border-left: 1px solid var(--line); }
.cmp-ill { width: 100%; max-width: 120px; height: auto; aspect-ratio: 6 / 5; object-fit: contain; margin: 0 auto 4px; display: block; }
.cmp-head figcaption b { display: block; font-family: var(--mincho); font-size: 18px; color: var(--brown); line-height: 1.4; }
.cmp-head figcaption span { display: block; font-size: 16px; line-height: 1.5; color: var(--text-sub); padding: 0 2px; }
.cmp-row { border-top: 1px solid var(--line); }
.cmp-head + .cmp-row { border-top: 0; }
.cmp-label { margin: 0; background: var(--brown); color: #fff; font-weight: 800; font-size: 16px; padding: 4px 12px; }
.cmp-cells { display: grid; grid-template-columns: repeat(3, 1fr); }
.cmp-cells p { margin: 0; padding: 10px 6px; font-size: 16px; line-height: 1.55; text-align: center; font-weight: 600; }
.cmp-cells p + p { border-left: 1px solid var(--line); }
.cmp-cells p:last-child { background: #f5f7fa; }
.cmp-cells small { display: block; font-size: 16px; font-weight: 500; color: var(--text-sub); }
.cmp-cells .is-jihi { color: var(--cta-dark); }
.cmp-cells .yen { white-space: nowrap; }
.cmp-note { margin-top: 10px; }
.price-detail { margin: 28px 0 12px; border-top: 2px solid var(--brown); }
.price-detail-title { font-family: var(--mincho); font-size: 19px; color: var(--brown); margin: 14px 0 6px; }
.price-detail dl { margin: 0; font-size: 16px; }
.price-detail dt { font-weight: 800; color: var(--gold-dark); margin-top: 12px; }
.price-detail dd { margin: 2px 0 0; padding-bottom: 12px; border-bottom: 1px dashed var(--line); }
@media (max-width: 360px) { .cmp-cells p { padding: 10px 3px; } .cmp-head figcaption b { font-size: 16px; } }
.cmp-head figcaption b { font-size: 17px; white-space: nowrap; letter-spacing: -0.03em; }
@media (max-width: 374px) { .cmp-head figcaption b { font-size: 16px; letter-spacing: -0.06em; } }

/* ---------- v7：FV（夫婦の写真）---------- */
.fv-badge { display: none; }
/* A：写真を主役。写真の下半分を濃くして、見出しを白抜きで大きく */
.fv--a .fv-img { --ar: 1 / 1; }
.fv--a .fv-img img { object-position: 50% 50%; }
.fv--a .fv-visual::after { background: linear-gradient(180deg, rgba(14, 24, 40, .35) 0%, rgba(14, 24, 40, 0) 18%, rgba(14, 24, 40, 0) 38%, rgba(14, 24, 40, .62) 64%, rgba(14, 24, 40, .92) 100%); }
.fv--a .fv-copy { top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 14px 18px 22px; }
.fv--a .fv-eyebrow span { color: #fff; background: rgba(14, 24, 40, .45); border-color: rgba(255, 255, 255, .55); }
.fv--a .fv-title { color: #fff; text-shadow: 0 2px 14px rgba(0, 0, 0, .45); font-size: clamp(29px, calc((100vw - 30px) / 12), 36px); }
.fv--a .mk { background: none; color: #e8d3a4; }
.fv--a .ai-label { top: 14px; bottom: auto; right: 10px; }
.fv--a .fv-body { margin-top: 0; padding-top: 22px; }
/* B：見出しを先に大きく。写真は角丸で浮かせ、丸バッジで「検査とお話だけでも大丈夫」 */
.fv--b { background: radial-gradient(circle at 85% 8%, #e1e8f1 0, rgba(225, 232, 241, 0) 45%), var(--bg); }
.fv--b .fv-visual { padding: 26px 16px 0; }
.fv--b .fv-visual::after { display: none; }
.fv--b .fv-copy { position: static; padding: 0 2px 18px; }
.fv--b .fv-title { font-size: clamp(30px, calc((100vw - 34px) / 11.6), 38px); text-shadow: none; line-height: 1.5; }
.fv--b .fv-img { --ar: 3 / 2; border-radius: 22px; box-shadow: 0 16px 34px rgba(25, 40, 62, .22); }
.fv--b .fv-badge {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  position: absolute; right: 8px; bottom: -44px; z-index: 3; margin: 0;
  width: 126px; height: 126px; border-radius: 50%;
  background: var(--cta); color: #fff; font-family: var(--mincho); font-weight: 700;
  box-shadow: 0 0 0 4px var(--bg), 0 0 0 6px var(--cta), 0 10px 22px rgba(25, 40, 62, .25);
  font-size: 16px; line-height: 1.35;
}
.fv--b .fv-badge b { font-size: 23px; color: #e8d3a4; margin-top: 2px; }
.fv--b .ai-label { top: auto; bottom: 10px; left: 26px; right: auto; }
.fv--b .fv-body { margin-top: 0; padding-top: 28px; }
.fv--b .fv-sub { margin-right: 0; }
@media (min-width: 768px) {
  .fv--a .fv-copy { padding: 24px 40px 32px; }
  .fv--b .fv-visual { padding: 44px 40px 0; }
  .fv--b .fv-badge { right: 24px; }
}

/* v7：見出しは3段（「まだ大丈夫」を一番大きく）。kp の自動改行を使わず段ごとに1行 */
.fv-title > span { display: block; white-space: nowrap; }
.fv-title .t1 { font-size: .78em; line-height: 1.4; }
.fv-title .t2 { font-size: clamp(30px, calc((100vw - 36px) / 8.6), 52px); line-height: 1.3; letter-spacing: -.02em; margin-left: -.35em; }
.fv-title .t3 { font-size: clamp(22px, calc((100vw - 38px) / 12.3), 38px); line-height: 1.5; }
.fv--a .fv-title, .fv--b .fv-title { font-size: 28px; }
.fv--a .fv-copy { padding-bottom: 36px; }
.fv--a .ai-label { top: auto; bottom: 8px; right: 10px; }
.fv--b .fv-visual { display: flex; flex-direction: column; }
.fv--b .fv-copy { order: -1; }
.fv--b .ai-label { bottom: 10px; left: 26px; }
@media (min-width: 768px) {
  .fv-title .t2 { font-size: 56px; }
  .fv-title .t3 { font-size: 40px; }
  .fv--a .fv-title, .fv--b .fv-title { font-size: 32px; }
}
.fv--b .fv-title .t2 { margin-left: -.2em; }
.fv--b .fv-title .t2 .mk { background: linear-gradient(transparent 62%, var(--marker) 62%, var(--marker) 92%, transparent 92%) no-repeat; background-size: calc(100% - .3em) 100%; background-position: right 0; }

/* theme navy */
.fv-title,.sec-title,.promise-lead,.director-name,.cmp-title{font-weight:600;letter-spacing:.04em}

/* v8：FVの「こんなこと、ありませんか？」＝読むだけの一覧（押せる見た目にしない＝枠・影・四角いチェック欄を付けない） */
.fv-signs { margin: 0 0 22px; padding: 4px 4px 0; }
.fv-signs-q { margin: 0 0 10px; font-family: var(--mincho); font-weight: 600; font-size: 19px; color: var(--brown); text-align: center; letter-spacing: .04em; }
.fv-signs ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.fv-signs li { position: relative; padding: 11px 4px 11px 34px; font-size: 17px; font-weight: 700; line-height: 1.55; border-bottom: 1px solid var(--line); }
.fv-signs li::before {
  content: ""; position: absolute; left: 6px; top: 50%; width: 14px; height: 8px; margin-top: -7px;
  border-left: 3px solid var(--gold); border-bottom: 3px solid var(--gold); transform: rotate(-45deg);
}

/* v8：押せそうに見える飾りをやめる（丸い札＝ボタンに見える／影付きの丸＝ボタンに見える） */
.fv-eyebrow { gap: 0; }
.fv-eyebrow span { background: none; border: 0; padding: 0; border-radius: 0; color: var(--gold-dark); font-size: 16px; letter-spacing: .06em; }
.fv-eyebrow span + span::before { content: ""; display: inline-block; width: 1px; height: .9em; margin: 0 .8em; vertical-align: -.1em; background: var(--gold); }
.fv--b .fv-badge { box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px var(--gold); }
.first-visit-label { background: none; color: #e8d3a4; padding: 0; border-radius: 0; display: flex; align-items: center; justify-content: center; gap: .6em; }
.first-visit-label::before, .first-visit-label::after { content: ""; width: 28px; height: 1px; background: #d8c296; }

/* ---------- 試作：受診の目安チェック（FV・1問ずつ） ---------- */
.quiz { margin: 4px 0 18px; }
.quiz-head { display: flex; align-items: baseline; justify-content: center; gap: .7em; margin: 0 0 10px; }
.quiz-head-main { font-family: var(--mincho); font-weight: 600; font-size: 20px; color: var(--brown); letter-spacing: .04em; }
.quiz-head-sub { font-size: 16px; color: var(--text-sub); }
.quiz-items { margin: 0 0 12px; padding-left: 1.4em; font-size: 17px; line-height: 1.8; }
.quiz-card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 16px 14px; }
.quiz-progress { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.quiz-step { margin: 0; font-family: var(--bodoni); font-feature-settings: "lnum"; font-size: 18px; color: var(--gold-dark); white-space: nowrap; }
.quiz-bar { flex: 1; height: 6px; border-radius: 3px; background: var(--gold-pale); overflow: hidden; }
.quiz-bar span { display: block; height: 100%; width: 0; background: var(--gold); transition: width .25s ease; }
.quiz-q { margin: 0 0 16px; min-height: 3.1em; display: flex; align-items: center; justify-content: center; text-align: center;
  font-family: var(--mincho); font-weight: 700; font-size: 22px; line-height: 1.45; color: var(--brown); }
.quiz-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.quiz-btn { min-height: 64px; border-radius: 14px; font: inherit; font-size: 21px; font-weight: 800; cursor: pointer; letter-spacing: .1em; }
.quiz-yes { background: var(--cta); color: #fff; border: 2px solid var(--cta); box-shadow: 0 4px 0 var(--cta-dark); }
.quiz-no { background: #fff; color: var(--cta); border: 2px solid var(--cta); box-shadow: 0 4px 0 var(--line); }
.quiz-btn:active { transform: translateY(3px); box-shadow: none; }
.quiz-btn:focus-visible, .quiz-back:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.quiz-back { display: block; margin: 12px auto 0; min-height: 44px; padding: 0 12px; background: none; border: 0; font: inherit; font-size: 16px; color: var(--text-sub); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.quiz-back[hidden] { display: none; }
.quiz-result { text-align: center; }
.quiz-result-count { margin: 0; font-family: var(--bodoni); font-feature-settings: "lnum"; font-size: 64px; line-height: 1; color: var(--cta); }
.quiz-result-count small { font-size: 24px; color: var(--text-sub); margin-left: 4px; }
.quiz-result-text { margin: 10px 0 6px; font-weight: 700; font-size: 18px; line-height: 1.7; outline: none; }
.quiz-result .cta-block { margin-top: 14px; }
.quiz-skip { margin: 12px 0 0; text-align: center; }
.btn.btn-text { display: inline; min-height: 0; padding: 6px 4px; background: none; box-shadow: none; color: var(--cta); font-size: 17px; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; width: auto; }
.btn.btn-text .arrow { display: none; }
.fv-sub-after { margin-top: 22px; }
/* 試作：チェックの「はい／いいえ」を最初の画面に入れる（写真を横長に・バッジは写真の右上へ小さく） */
.fv--quiz .fv-visual { padding-top: 18px; }
.fv--quiz .fv-copy { padding-bottom: 12px; }
.fv--quiz .fv-img { --ar: 2 / 1; }
.fv--quiz .fv-img img { object-position: 50% 45%; }
.fv--quiz .fv-badge { width: 96px; height: 96px; bottom: 10px; right: 26px; font-size: 16px; line-height: 1.25; }
.fv--quiz .fv-badge b { font-size: 19px; }
.fv--quiz .fv-body { padding-top: 16px; }
.fv--quiz .quiz-head { margin-bottom: 8px; }
.fv--quiz .quiz-card { padding: 14px 14px 12px; }
.fv--quiz .quiz-progress { margin-bottom: 8px; }
.fv--quiz .quiz-q { min-height: 2.9em; margin-bottom: 12px; }
/* 試作の修正：文字リンクに波紋を付けない／結果の中のリード文は斜線なし・折り返し可 */
.btn.btn-text::before, .btn.btn-text::after { display: none !important; animation: none !important; }
.quiz-result .cta-lead span { padding: 0; }
.quiz-result .cta-lead span::before, .quiz-result .cta-lead span::after { display: none; }
.quiz-result-text { word-break: keep-all; overflow-wrap: anywhere; }
.btn.btn-text { animation: none !important; background: none !important; box-shadow: none !important; }
.quiz-btn, .quiz-back, .btn { -webkit-tap-highlight-color: transparent; }
.quiz-q { word-break: keep-all; overflow-wrap: anywhere; }

/* v10：漫画の見出し（「怒られるかと思った」を1行で）・アクセスの地図 */
.manga-intro-quote { display: block; white-space: nowrap; font-size: clamp(20px, 6.4vw, 28px); line-height: 1.5; }
.manga-intro-sub { display: block; margin-top: 4px; }
.clinic-map { margin: 0 20px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); aspect-ratio: 4 / 3; }
.clinic-map iframe { display: block; width: 100%; height: 100%; border: 0; }
.clinic-map-link { margin: 12px 20px 22px; text-align: center; font-size: 17px; font-weight: 700; }
.clinic-map-link a { color: var(--cta); text-decoration: underline; text-underline-offset: 4px; }

/* v11（2026-11-14 滝沢氏「その歯 文字が小さい」）：1行目を3行目より少し大きく（旧 .78em＝約22px） */
.fv-title .t1 { font-size: clamp(26px, calc((100vw - 36px) / 11), 42px); line-height: 1.35; }
@media (min-width: 768px) { .fv-title .t1 { font-size: 44px; } }
/* v11：見出し1行目を大きくした分、幅400px以上（大きいiPhone）は写真を少し横長にして「はい／いいえ」を最初の画面に収める */
@media (min-width: 400px) and (max-width: 767px) { .fv--quiz .fv-img { --ar: 2.3 / 1; } }

/* v12：1回目の費用の下「お支払いは現金のみです」 */
.first-visit-pay { margin: 10px 0 0; font-size: 16px; font-weight: 700; color: var(--brown); }
.first-visit .first-visit-pay { color: #fff; display: inline-block; margin-top: 12px; padding: 4px 14px; border: 1px solid rgba(255,255,255,.55); border-radius: 4px; }

/* v13：フッターの計測の案内 */
.footer-privacy { margin: 14px auto 0; max-width: 34em; font-size: 16px; line-height: 1.7; text-align: left; opacity: .85; }
.footer-privacy a { color: inherit; text-decoration: underline; }