/* =====================================================================
   歯科LP・HP の土台（dental-homepage-builder の雛形）
   - 色・書体・文字の段・余白の刻みは :root の変数だけで決める（ページの中で生の値を書かない）
   - 3案（B-4）で見た目を作るときは、この変数と各章のクラスを上書きする。土台の仕組み（固定バー・空欄の目印・症例の枠）は消さない
   - スマホが先。768px と 1080px で広げる
   ===================================================================== */
:root{
  /* 色の役割（scaffold が医院の登録の brand から入れる） */
  --c-main:#3b3229;        /* 見出し・濃い地 */
  --c-accent:#b08d57;    /* 主ボタン・線・数字 */
  --c-accent-soft:color-mix(in srgb,var(--c-accent) 45%,#fff);
  --c-accent-deep:color-mix(in srgb,var(--c-accent) 80%,#000);
  --c-gold-1:color-mix(in srgb,var(--c-accent) 85%,#fff);   /* 費用のカードの帯（金の光沢） */
  --c-gold-2:var(--c-accent);
  --c-gold-3:color-mix(in srgb,var(--c-accent) 45%,#fff3d0);
  --c-ink:#222428;                /* 本文 */
  --c-mute:#6b6f76;               /* 注記 */
  --c-bg:#ffffff;
  --c-bg-soft:#f7f4ee;            /* 交互の地 */
  --c-line:#e3ddd2;
  --c-on-main:#ffffff;
  --c-todo:#fff3c4;               /* 空欄の目印（公開前に消える） */
  --c-todo-line:#e0a800;

  /* 書体 */
  --f-ja:"Noto Sans JP",system-ui,-apple-system,"Hiragino Sans",sans-serif;
  --f-mincho:"Shippori Mincho","Hiragino Mincho ProN",serif;
  --f-en:"Cormorant Garamond","Times New Roman",serif;
  --f-num:"Cormorant Garamond",var(--f-mincho);   /* 数字は lining-nums で使う（上下にずれる数字にしない） */

  /* 文字の段（スマホ基準。768px 以上で少し大きく） */
  --fs-xs:12px; --fs-s:14px; --fs-m:16px; --fs-l:19px; --fs-xl:24px; --fs-2xl:30px; --fs-3xl:38px; --fs-num:44px;
  --lh:1.85; --lh-head:1.45; --ls:.04em; --ls-head:.08em;

  /* 余白の刻み */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px;
  --gut:20px; --max:1080px; --max-text:680px;
  --hd:60px; --bar:64px;
  --r:4px; --shadow:0 6px 24px rgba(0,0,0,.08);

  /* 1画面目の高さ（<head> のスクリプトが読み込み時の高さを入れる。LINE のアプリ内ブラウザで伸び縮みしないため） */
  --h-vp:100svh;
}
@media (min-width:768px){
  :root{ --fs-l:20px; --fs-xl:28px; --fs-2xl:36px; --fs-3xl:48px; --fs-num:56px; --gut:40px; --hd:72px; }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--hd)}
body{margin:0;font-family:var(--f-ja);font-size:var(--fs-m);line-height:var(--lh);letter-spacing:var(--ls);color:var(--c-ink);background:var(--c-bg)}
/* 固定バーの高さ分はフッターの中に足す（body に足すと、バーが隠れたときにフッターの下に地の色の帯が出るため。2026-10-17） */
@media (max-width:1079px){ .ft{padding-bottom:calc(var(--s6) + var(--bar) + env(safe-area-inset-bottom,0px))} }
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,p,ul,ol,dl,figure{margin:0}
ul,ol{padding:0;list-style:none}
table{border-collapse:collapse;width:100%}
.wrap{width:min(100% - var(--gut)*2, var(--max));margin-inline:auto}
.text{max-width:var(--max-text)}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mute{color:var(--c-mute)}
.note{font-size:var(--fs-xs);color:var(--c-mute);line-height:1.7}
.nb{display:inline-block} /* 改行させたくない語のかたまり（iPhone で語の途中で折れないように） */

/* ---------- 空欄の目印（【要確認】【下書き】）。validate が数える。公開前には残らない ---------- */
.todo,[data-todo]{background:var(--c-todo);outline:1px dashed var(--c-todo-line);outline-offset:2px;color:inherit}
mark.todo{padding:0 .15em}
.ph-box{display:grid;place-items:center;aspect-ratio:4/3;background:repeating-linear-gradient(45deg,#ececec 0 10px,#e4e4e4 10px 20px);color:#777;font-size:var(--fs-s);text-align:center;padding:var(--s3)}

/* ---------- ヘッダー ---------- */
.hd{position:fixed;inset:0 0 auto;z-index:50;height:var(--hd);background:rgba(255,255,255,.96);border-bottom:1px solid var(--c-line);backdrop-filter:blur(6px)}
.hd-in{height:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--s3);width:min(100% - 24px, 1280px);margin-inline:auto}
.hd-logo img{height:calc(var(--hd) - 24px);width:auto}
.hd-cta{display:flex;align-items:center;gap:var(--s3)}
.hd-tel{display:none;text-decoration:none;font-family:var(--f-num);font-size:var(--fs-l);letter-spacing:.06em}
.hd-tel small{display:block;font-family:var(--f-ja);font-size:var(--fs-xs);color:var(--c-mute);letter-spacing:var(--ls)}
@media (min-width:768px){ .hd-tel{display:block} }

/* ---------- ボタン（主・副・電話の3種類だけ） ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:52px;padding:.7em 1.6em;border-radius:var(--r);font-weight:500;text-decoration:none;letter-spacing:.06em;line-height:1.4;text-align:center}
.btn-p{background:var(--c-accent);color:#fff;box-shadow:var(--shadow)}
.btn-s{background:transparent;color:var(--c-main);border:1px solid currentColor}
.btn-tel{background:var(--c-main);color:var(--c-on-main)}
.btn-sm{min-height:44px;padding:.4em 1em;font-size:var(--fs-s)}
.btns{display:flex;flex-wrap:wrap;gap:var(--s3);justify-content:center}
.cta-box{padding:var(--s6) var(--gut);text-align:center;background:var(--c-bg-soft)}
.cta-box .lead{margin-bottom:var(--s4);font-weight:500}

/* ---------- スマホの固定バー（電話・WEB予約）。ページ内の主ボタンが見えている間は隠す（site.js） ---------- */
.fixbar{position:fixed;inset:auto 0 0;z-index:60;min-height:var(--bar);display:grid;grid-template-columns:1fr 1.4fr;transform:translateY(0);transition:transform .25s} /* 高さは固定にしない：iPhone のホームインジケーター分（safe-area-inset-bottom）を各ボタンの下の余白に足す（2026-10-19 生野先生「下の予約のところ切れてる」） */
.fixbar.off{transform:translateY(100%)}
.fixbar a{display:flex;align-items:center;justify-content:center;gap:.5em;min-height:var(--bar);padding-bottom:env(safe-area-inset-bottom,0px);text-decoration:none;font-weight:500;font-size:var(--fs-s);line-height:1.3;text-align:center}
.fixbar .tel{background:var(--c-main);color:var(--c-on-main)}
.fixbar .rsv{background:var(--c-accent);color:#fff}
.fixbar .line{background:#06c755;color:#fff}
.fixbar a[hidden]{display:none} /* LINE が無いとき。display:flex が hidden に勝って2段に割れるため（2026-10-17） */
.fixbar.has-line{grid-template-columns:1fr 1fr 1.3fr}
@media (min-width:1080px){ .fixbar{display:none} }

/* ---------- 章 ---------- */
.sec{padding:var(--s8) 0}
.sec.soft{background:var(--c-bg-soft)}
.sec.dark{background:var(--c-main);color:var(--c-on-main)}
@media (min-width:768px){ .sec{padding:var(--s9) 0} }
.sec-hd{text-align:center;margin-bottom:var(--s6)}
.sec-hd .en{display:block;font-family:var(--f-en);font-size:var(--fs-l);font-style:italic;color:var(--c-accent);letter-spacing:.08em}
.sec-hd h2{font-family:var(--f-mincho);font-weight:500;font-size:var(--fs-2xl);line-height:var(--lh-head);letter-spacing:var(--ls-head)}
.sec-hd p{margin-top:var(--s3);color:var(--c-mute)}

/* ---------- 1画面目 ---------- */
.fv{position:relative;min-height:min(var(--h-vp),860px);padding-top:var(--hd);display:grid;align-items:end;overflow:hidden;background:var(--c-bg-soft)}
.fv-ph{position:absolute;inset:var(--hd) 0 0;}
.fv-ph img,.fv-ph .ph-box{width:100%;height:100%;object-fit:cover;aspect-ratio:auto}
.fv-in{position:relative;padding:var(--s7) 0 var(--s6)}
.fv h1{font-family:var(--f-mincho);font-weight:500;font-size:var(--fs-3xl);line-height:1.3;letter-spacing:var(--ls-head)}
.fv .kicker{font-size:var(--fs-s);letter-spacing:.1em}
.fv .lead{margin-top:var(--s3)}
.badges{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s5)}
.badge{flex:1 1 30%;min-width:96px;padding:var(--s3);text-align:center;background:#fff;border:1px solid var(--c-accent);line-height:1.4}
.badge b{display:block;font-family:var(--f-num);font-size:var(--fs-xl);color:var(--c-accent);font-weight:500}
.fv .btns{margin-top:var(--s5);justify-content:flex-start}

/* ---------- 数字（実績・月額） ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s4)}
.stat{padding:var(--s5) var(--s3);text-align:center;background:#fff;border:1px solid var(--c-line)}
.stat .k{font-size:var(--fs-s)}
.stat .v{display:block;font-variant-numeric:lining-nums;font-family:var(--f-num);font-size:var(--fs-num);line-height:1.15;color:var(--c-accent)}
.stat .v small{font-size:.45em;font-family:var(--f-ja)}
.stat .when{font-size:var(--fs-xs);color:var(--c-mute)}

/* ---------- 写真の並び ---------- */
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s2)}
@media (min-width:768px){ .gallery{grid-template-columns:repeat(4,1fr)} }
.gallery img,.gallery .ph-box{aspect-ratio:4/3;object-fit:cover;width:100%}

/* ---------- 認定証・院長 ---------- */
.certs{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--s4)}
.certs figure{background:#fff;padding:var(--s3);border:1px solid var(--c-line)}
.certs figcaption{font-size:var(--fs-xs);margin-top:var(--s2);text-align:center}
.doctor{display:grid;gap:var(--s5)}
@media (min-width:768px){ .doctor{grid-template-columns:5fr 7fr;align-items:start} }
.doctor .role{font-size:var(--fs-s);color:var(--c-mute)}
.doctor .name{font-family:var(--f-mincho);font-size:var(--fs-2xl);font-weight:500}
.doctor dl{display:grid;grid-template-columns:auto 1fr;gap:var(--s2) var(--s4);margin-top:var(--s4);font-size:var(--fs-s)}
.doctor dt{color:var(--c-accent);font-weight:500}

/* ---------- チェックリスト ---------- */
.check{display:grid;gap:var(--s2);max-width:var(--max-text);margin-inline:auto}
.check li{position:relative;padding:var(--s3) var(--s4) var(--s3) calc(var(--s4) + 1.6em);background:#fff;border:1px solid var(--c-line)}
.check li::before{content:"";position:absolute;left:var(--s4);top:1.15em;width:1em;height:.55em;border-left:2px solid var(--c-accent);border-bottom:2px solid var(--c-accent);transform:rotate(-45deg)}
.check-end{margin-top:var(--s5);text-align:center;font-family:var(--f-mincho);font-size:var(--fs-xl)}

/* ---------- 比較表・料金表 ---------- */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tbl{min-width:560px;background:#fff;font-size:var(--fs-s)}
.tbl th,.tbl td{border:1px solid var(--c-line);padding:var(--s3);text-align:center;vertical-align:middle}
.tbl thead th{background:var(--c-main);color:var(--c-on-main);font-weight:500}
.tbl tbody th{background:var(--c-bg-soft);font-weight:500;white-space:nowrap}
.tbl .hl{background:#fffaf0}
.price{font-family:var(--f-num);font-size:var(--fs-xl);color:var(--c-accent)}

/* ---------- 選ばれる理由 ---------- */
.reasons{display:grid;gap:var(--s5)}
@media (min-width:768px){ .reasons{grid-template-columns:repeat(3,1fr)} }
.reason{background:#fff;border:1px solid var(--c-line)}
.reason .num{font-variant-numeric:lining-nums;font-family:var(--f-num);font-size:var(--fs-2xl);color:var(--c-accent);line-height:1}
.reason .tx{padding:var(--s4)}
.reason h3{font-size:var(--fs-l);font-weight:500;line-height:var(--lh-head);margin:var(--s2) 0}

/* ---------- 症例の枠（既定3つ。4点は写真のすぐ横） ---------- */
.cases{display:grid;gap:var(--s6)}
.case{background:#fff;border:1px solid var(--c-line);padding:var(--s4)}
.case h3{font-size:var(--fs-l);font-weight:500;margin-bottom:var(--s3)}
.case-ph{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
.case-ph figcaption{font-size:var(--fs-xs);text-align:center;margin-top:var(--s1)}
.case-ad{display:grid;grid-template-columns:auto 1fr;gap:var(--s2) var(--s3);margin-top:var(--s4);font-size:var(--fs-s)}
.case-ad dt{font-weight:500;color:var(--c-main);white-space:nowrap}
@media (min-width:1080px){ .case{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)} .case h3{grid-column:1/-1;margin:0} .case-ad{margin-top:0;align-content:start} }

/* ---------- 流れ・FAQ ---------- */
.flow{display:grid;gap:var(--s4);counter-reset:f}
@media (min-width:768px){ .flow{grid-template-columns:repeat(4,1fr)} }
.flow li{background:#fff;border:1px solid var(--c-line);padding:var(--s4);counter-increment:f}
.flow li::before{content:"STEP " counter(f,decimal-leading-zero);display:block;font-family:var(--f-en);font-variant-numeric:lining-nums;color:var(--c-accent);letter-spacing:.08em}
.flow h3{font-size:var(--fs-m);font-weight:500;margin:var(--s2) 0}
.faq{max-width:var(--max-text);margin-inline:auto;display:grid;gap:var(--s2)}
.faq details{background:#fff;border:1px solid var(--c-line)}
.faq summary{cursor:pointer;list-style:none;padding:var(--s4) calc(var(--s4) + 1.5em) var(--s4) var(--s4);position:relative;font-weight:500}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"Q.";color:var(--c-accent);font-family:var(--f-en);margin-right:.5em}
.faq summary::after{content:"+";position:absolute;right:var(--s4);top:50%;transform:translateY(-50%);color:var(--c-accent);font-size:1.3em}
.faq details[open] summary::after{content:"−"}
.faq .a{padding:0 var(--s4) var(--s4)}

/* ---------- 限定解除の塊（治療内容・費用・期間と回数・リスク） ---------- */
.ad-box{margin-top:var(--s5);padding:var(--s4);border:1px solid var(--c-line);background:#fff;font-size:var(--fs-s)}
.ad-box h3{font-size:var(--fs-m);font-weight:500;margin-bottom:var(--s2)}
/* 費用のカード（2026-10-17 生野先生の見本：金の帯・生成りの行・数字は明朝系で大きく、月額は金） */
.pcards{display:grid;gap:var(--s5)}
@media (min-width:1080px){ .pcards{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))} }
.pcard{background:#fff;border:1px solid var(--c-accent-soft);border-radius:12px;padding:var(--s4);box-shadow:0 8px 24px rgba(120,90,40,.10)}
.pcard-hd{display:grid;gap:2px;justify-items:center;padding:var(--s4) var(--s3);border-radius:8px;color:#fff;text-align:center;
  background:linear-gradient(110deg,var(--c-gold-1) 0%,var(--c-gold-2) 38%,var(--c-gold-3) 62%,var(--c-gold-2) 100%)}
.pcard-name{font-family:var(--f-mincho);font-weight:500;font-size:var(--fs-xl);letter-spacing:.12em;line-height:1.3}
.pcard-sub{font-size:var(--fs-s);letter-spacing:.1em;opacity:.95}
.pcard-rows{display:grid;gap:var(--s3);margin-top:var(--s3)}
.pcard-rows>div{display:grid;grid-template-columns:40% 1fr;align-items:center;min-height:68px;padding:0 var(--s4);background:var(--c-bg-soft);border:1px solid var(--c-line);border-radius:8px}
.pcard-rows dt{font-weight:700;font-size:var(--fs-s);color:var(--c-main)}
.pcard-rows dd{margin:0;text-align:center;color:var(--c-ink)}
.pcard-num{font-family:var(--f-num);font-weight:500;font-size:var(--fs-2xl);letter-spacing:.02em;line-height:1;font-variant-numeric:lining-nums proportional-nums}
.pcard-rows small{font-size:var(--fs-s);font-weight:700;margin-left:.15em}
.pcard-rows .hl dd{color:var(--c-accent-deep)}
.pcard-loan{margin-top:var(--s3);font-size:var(--fs-xs);color:var(--c-mute);text-align:center}

/* ---------- アクセス ---------- */
.access{display:grid;gap:var(--s5)}
@media (min-width:768px){ .access{grid-template-columns:1fr 1fr} }
.hours th,.hours td{border-bottom:1px solid var(--c-line);padding:var(--s2);text-align:center;font-size:var(--fs-s)}
.access dl{display:grid;grid-template-columns:auto 1fr;gap:var(--s2) var(--s4);font-size:var(--fs-s)}
.access dt{font-weight:500}

/* ---------- フッター ---------- */
.ft{padding:var(--s7) 0 var(--s6);background:var(--c-main);color:var(--c-on-main);font-size:var(--fs-s)}
.ft a{text-decoration:none}
.ft .links{display:flex;flex-wrap:wrap;gap:var(--s4);margin:var(--s4) 0}
.ft small{display:block;font-size:var(--fs-xs);opacity:.7;margin-top:var(--s4)}

/* ---------- 控えめなフェード（動きを減らす設定・撮影時は出さない） ---------- */
.js .rv{opacity:0;transform:translateY(16px);transition:opacity .7s,transform .7s}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){ .js .rv{opacity:1;transform:none;transition:none} html{scroll-behavior:auto} }