/* =====================================================================
   このサイトの見た目（B-4 で選んだ案A「見本に近い」を全章に広げたもの。2026-10-17）
   見本：大阪つつい歯科（院長の笑顔の写真に、悩みに寄り添う大見出し・金のキーワード・チェックの強み）
         すが歯科（1画面目に治療名を大きく）。色と品はスター歯科のインプラントLPの試作（生成り・金・濃い茶）
   base.css → page.css → この順で読む。:root の変数を上書きしてから使う（生の色・大きさは :root に足す）
   元の案は site/proposals/a.html・proposal-a.css に残してある（ほかの案に替えたいと言われたとき用）
   ===================================================================== */
:root{
  /* ---------- 色（スター歯科：生成りの地・金・濃い茶） ---------- */
  --c-main:#3b3229;                 /* 見出し・濃い地（濃い茶） */
  --c-accent:#b08d57;               /* 金（線・数字・飾り） */
  --c-accent-soft:#d9c6a3;          /* 淡い金（細い線・枠） */
  --c-accent-deep:#7d5f30;          /* 小さい字に使う金（生成りの地で 4.5:1 以上） */
  --c-gold-text:#97753f;            /* 大きい字の金（大見出しのキーワード。生成りの地で 3:1 以上） */
  --c-gold-1:#c3a26b;               /* 金のグラデーション（主ボタン・帯）の明るい側 */
  --c-gold-2:#9a7843;               /* 同じく中ほど（白い字が読める濃さ） */
  --c-gold-3:#836537;               /* 同じく濃い側 */
  --c-ink:#3a332b;                  /* 本文（黒ではなく茶に寄せる） */
  --c-mute:#74695c;                 /* 注記 */
  --c-bg:#fdfbf7;                   /* 生成り（いちばん明るい地） */
  --c-bg-soft:#f6f0e6;              /* 生成りの交互の地 */
  --c-bg-deep:#ece2d1;              /* 写真の後ろの淡い面 */
  --c-card:#ffffff;                 /* 白いカード */
  --c-line:#e6dccb;                 /* 区切りの線 */
  --c-on-main:#fdfbf7;              /* 濃い地の上の字 */
  --c-on-gold:#ffffff;              /* 金の地の上の字 */
  --c-hd-bg:rgba(253,251,247,.96);  /* ヘッダーの地 */
  --c-fv-card:rgba(253,251,247,.92);/* PC の1画面目：写真の上の文字の面 */
  --c-fv-tone:rgba(240,214,170,.55);/* 1画面目の写真に重ねる温かい色（soft-light） */

  --g-gold:linear-gradient(160deg,var(--c-gold-1) 0%,var(--c-gold-2) 48%,var(--c-gold-3) 100%);
  --g-fv-fade:linear-gradient(to bottom,rgba(253,251,247,0) 48%,rgba(253,251,247,.85) 82%,var(--c-bg) 100%);
  --g-fv-fade-pc:linear-gradient(to right,var(--c-bg) 0,rgba(253,251,247,.6) 14%,rgba(253,251,247,0) 32%);

  --shadow:0 10px 30px rgba(59,50,41,.10);
  --shadow-btn:0 6px 16px rgba(131,101,55,.28);
  --shadow-drop:drop-shadow(0 12px 22px rgba(59,50,41,.10));
  --text-shadow-gold:0 1px 1px rgba(60,40,10,.30);

  /* ---------- 書体 ---------- */
  --f-ja:"Noto Sans JP",system-ui,-apple-system,"Hiragino Sans",sans-serif;
  --f-mincho:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --f-en:"Cormorant Garamond","Times New Roman",serif;
  --f-num:"Cormorant Garamond",var(--f-mincho);
  --fw-head:500;                    /* 見出しの太さ */
  --fw-h1:600;                      /* 大見出しの太さ */

  /* ---------- 文字の段（スマホ基準。768px・1080px で大きく） ---------- */
  --fs-xs:12px; --fs-s:14px; --fs-m:16px; --fs-l:18px; --fs-xl:21px; --fs-2xl:26px; --fs-3xl:32px; --fs-num:44px;
  --fs-h1:clamp(26px,7.7vw,30px);   /* 1画面目の大見出し：360px でも「「下がった歯ぐきは、」が1行に収まる（4行になっても予約ボタンを 390×664 に入れる） */
  --fs-en:18px;                     /* 章の英字ラベル */
  --fs-reason-num:44px;             /* 9章の 01〜04 */
  --lh:1.9; --lh-head:1.5; --lh-h1:1.42; --ls:.05em; --ls-head:.08em;

  /* ---------- 余白の刻み ---------- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:72px; --s9:112px;
  --gut:20px; --max:1080px; --max-text:680px;
  --hd:60px; --bar:64px; --r:4px;
  --s-tight:6px;                    /* 治療名の帯と前の語のすき間（390px で1行に収める） */
  --line:1px; --line-icon:1.5px;    /* 細い線・チェックの線 */
  --btn-h:56px; --btn-h-pc:54px;    /* 1画面目のボタンの高さ */
  --logo-pad:26px;                  /* ヘッダーのロゴの上下の余白（合計） */
  --rule:40px;                      /* 見出しの下の金の短い線 */

  /* ---------- 1画面目の寸法 ---------- */
  --fv-ph-ratio:390/208;            /* スマホの写真の縦横（看板と院長の顔が入り、予約ボタンが 390×664 の中に入る高さ。v2.1 で費用の目安を足したので 228→208） */
  --fv-overlap:52px;                /* 写真の下端に大見出しを重ねる量 */
  --fv-min:680px;                   /* PC の1画面目の高さの下限（低い画面でも看板と文字の面が重ならない） */
  --fv-max:860px;                   /* PC の1画面目の高さの上限 */
  --fv-card-w:640px;                /* PC の文字の面の幅（予約と電話のボタンが横に並ぶ幅） */
  --reason-slant:0px;               /* 9章のカードの斜めの辺（スマホは無し） */
}
@media (min-width:768px){
  :root{ --fs-l:19px; --fs-xl:24px; --fs-2xl:32px; --fs-3xl:40px; --fs-num:56px; --fs-h1:44px; --fs-en:20px; --fs-reason-num:56px;
         --gut:40px; --hd:72px; --fv-overlap:72px; --reason-slant:40px; }
}
@media (min-width:1080px){
  :root{ --fs-2xl:34px; --fs-h1:42px; --lh-h1:1.38; }
}
@media (min-width:1280px) and (min-height:820px){
  :root{ --fs-h1:50px; }
}

/* ---------- 地・書体の調子 ---------- */
body{background:var(--c-bg);color:var(--c-ink)}
h1,h2,h3{color:var(--c-main)}

/* ---------- ヘッダー ---------- */
.hd{background:var(--c-hd-bg);border-bottom:1px solid var(--c-line)}
.hd-logo img{height:calc(var(--hd) - var(--logo-pad))}
.hd-tel{display:none;padding:var(--s1) var(--s5) var(--s1) var(--s4);border:1px solid var(--c-accent-soft);border-radius:999px;font-size:var(--fs-xl);line-height:1.15;color:var(--c-main);font-variant-numeric:lining-nums}
.hd-tel small{font-size:var(--fs-xs);color:var(--c-mute);letter-spacing:.06em}
@media (min-width:768px){ .hd-tel{display:block} }

/* ---------- ボタン（主＝金のグラデーション・電話＝濃い茶） ---------- */
.btn{border-radius:var(--r);font-weight:700;letter-spacing:.06em;font-feature-settings:"palt"}
.btn-p{background:var(--g-gold);color:var(--c-on-gold);box-shadow:var(--shadow-btn);text-shadow:var(--text-shadow-gold)}
.btn-tel{background:var(--c-main);color:var(--c-on-main)}
.btn-p:not(.btn-sm)::after{content:"";width:.5em;height:.5em;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);margin-left:.1em;flex:none}
.fixbar .rsv{background:var(--g-gold);text-shadow:var(--text-shadow-gold)}
.fixbar .tel{background:var(--c-main)}

/* ---------- 章の見出し（英字の金のラベル → 明朝の見出し → 金の短い線） ---------- */
.sec{padding:var(--s8) 0}
@media (min-width:768px){ .sec{padding:var(--s9) 0} }
.sec-hd{margin-bottom:var(--s7)}
@media (min-width:768px){ .sec-hd{margin-bottom:var(--s8)} }
.sec-hd .en{font-size:var(--fs-en);color:var(--c-accent);letter-spacing:.12em;margin-bottom:var(--s1)}
.sec-hd h2{font-weight:var(--fw-head);color:var(--c-main)}
.sec-hd h2::after{content:"";display:block;width:var(--rule);height:1px;margin:var(--s4) auto 0;background:var(--c-accent)}

/* =====================================================================
   1 1画面目
   スマホ：上に院長の写真（看板と笑顔）→ 写真の下端に大見出しを重ねる → 治療名の金の帯 → 強み3つ → 予約
   PC：右に院長の写真（看板が切れないよう、写真を縦いっぱい・横は 3:2 のまま見せる）、左下に生成りの面を重ねて文字を置く
   ===================================================================== */
.fv{display:block;min-height:0;padding-top:var(--hd);background:var(--c-bg);overflow:hidden}
.fv-ph{position:relative;inset:auto;aspect-ratio:var(--fv-ph-ratio)}
.fv-ph::before{content:"";position:absolute;inset:0;background:var(--c-fv-tone);mix-blend-mode:soft-light;pointer-events:none} /* 灰色の大理石を生成り寄りに温める */
.fv-ph::after{content:"";position:absolute;inset:0;background:var(--g-fv-fade);pointer-events:none}
.fv-ph img{object-position:50% 20%}
.fv-in{position:relative;margin-top:calc(var(--fv-overlap) * -1);padding:0 0 var(--s6)}
.fv-card{position:relative}

.fv h1{font-size:var(--fs-h1);font-weight:var(--fw-h1);line-height:var(--lh-h1);letter-spacing:.04em;color:var(--c-main);font-feature-settings:"palt"}
.fv h1 .fv-key{display:block;color:var(--c-gold-text)}

.fv .kicker{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1) var(--s-tight);margin-top:var(--s3);letter-spacing:0}
.kicker-sub{font-size:var(--fs-s);color:var(--c-mute)}
.kicker-name{padding:.15em .5em;background:var(--g-gold);color:var(--c-on-gold);font-family:var(--f-mincho);font-weight:600;font-size:var(--fs-m);letter-spacing:.03em;line-height:1.5;text-shadow:var(--text-shadow-gold);font-feature-settings:"palt"}

.fv .lead{margin-top:var(--s3);line-height:1.75}

/* 強み3つ：見本（つつい歯科）の金の丸のチェック */
.fv .badges{display:grid;gap:var(--s1);margin-top:var(--s3)}
.fv .badge{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 .6em;min-width:0;padding:0 0 0 calc(1.25em + var(--s3));position:relative;background:none;border:0;text-align:left;font-size:var(--fs-s);color:var(--c-mute);line-height:1.55}
.fv .badge::before{content:"";position:absolute;left:0;top:.2em;width:1.25em;height:1.25em;border:var(--line-icon) solid var(--c-accent);border-radius:50%}
.fv .badge::after{content:"";position:absolute;left:.42em;top:.48em;width:.45em;height:.26em;border-left:var(--line-icon) solid var(--c-accent-deep);border-bottom:var(--line-icon) solid var(--c-accent-deep);transform:rotate(-45deg)}
.fv .badge b{display:inline;font-family:var(--f-mincho);font-weight:600;font-size:var(--fs-l);color:var(--c-main);letter-spacing:.06em}

.fv .btns{display:grid;justify-content:stretch;gap:var(--s3);margin-top:var(--s4)}
.fv .btns .btn{width:100%;min-height:var(--btn-h);padding-inline:var(--s3)}
.fv-access{display:flex;flex-wrap:wrap;gap:0 var(--s4);margin-top:var(--s3);font-size:var(--fs-s);color:var(--c-mute)}
.fv-access a{color:var(--c-accent-deep);text-underline-offset:.25em}
@media (max-width:379px){ .fv .btn-p::after{display:none} } /* 360px でも予約ボタンの字を1行に */

@media (min-width:768px){
  .fv .badges{grid-template-columns:repeat(3,auto);justify-content:start;gap:var(--s2) var(--s5)}
  .fv .btns{grid-template-columns:auto auto;justify-content:start}
  .fv .btns .btn{width:auto;padding-inline:var(--s5)}
}
@media (min-width:1080px){
  .fv{--fv-h:clamp(var(--fv-min),var(--h-vp),var(--fv-max));display:grid;align-items:end;min-height:var(--fv-h)}
  .fv-ph{position:absolute;top:0;right:0;bottom:auto;left:auto;height:var(--fv-h);aspect-ratio:auto;width:min(100%,calc(var(--fv-h) * 1.5))}
  .fv-ph::after{background:var(--g-fv-fade-pc)}
  .fv-ph img{object-position:50% 0}
  /* 高い画面では文字の面を少し持ち上げ、低い画面では下に寄せる（看板＝写真の上から 13〜20% と重ねない） */
  .fv-in{margin-top:0;padding:0 0 clamp(var(--s6),calc((var(--fv-h) - var(--fv-min)) * .3 + var(--s6)),var(--s9))}
  .fv-card{width:var(--fv-card-w);max-width:100%;padding:var(--s5) var(--s6) var(--s5) var(--s6);background:var(--c-fv-card);box-shadow:var(--shadow);backdrop-filter:blur(4px)}
  .fv-card::before{content:"";position:absolute;inset:var(--s2);border:var(--line) solid var(--c-accent-soft);pointer-events:none}
  .fv .badges{grid-template-columns:1fr;gap:0}
  .fv .kicker{margin-top:var(--s4)}
  .kicker-name{font-size:var(--fs-l)}
  .fv .btns{margin-top:var(--s4)}
  .fv .btns .btn{min-height:var(--btn-h-pc)}
}

/* =====================================================================
   9 選ばれる理由：写真と白いカードを左右に互い違いに重ねる（見本：つつい歯科の「当院で行う治療方法」）
   奇数（01・03）は写真が右、偶数（02・04）は写真が左。01 と 03 は院長が左を向いているので、写真を右に置いて文字の方を向かせる
   04 は院長ではない歯科医師（静脈内鎮静の管理）。写真は丸ごと見せ、顔の大きさがほかの3枚とそろうことを確かめた
   ===================================================================== */
.reasons{display:grid;grid-template-columns:1fr;gap:var(--s8)}
.reason{position:relative;background:none;border:0}
.reason::before{content:"";position:absolute;top:calc(var(--s4) * -1);left:calc(var(--gut) * -1);width:72%;aspect-ratio:3/2;background:var(--c-bg-deep);z-index:0}
.reason img{position:relative;z-index:1;width:calc(100% - var(--s5));aspect-ratio:3/2;object-fit:cover;object-position:var(--pos,50% 50%)}
.reason img.warm{filter:sepia(.18) saturate(.9) brightness(1.03)} /* 青い術衣の写真をほかの写真の温かさに寄せる */
.reason .tx{position:relative;z-index:2;margin:calc(var(--s6) * -1) 0 0 var(--s5);padding:var(--s5) var(--s5) var(--s6);filter:var(--shadow-drop)}
.reason .tx::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--c-card);clip-path:polygon(var(--reason-slant) 0,100% 0,100% 100%,0 100%)}
.reason:nth-child(odd)::before{left:auto;right:calc(var(--gut) * -1)}
.reason:nth-child(odd) img{margin-left:auto}
.reason:nth-child(odd) .tx{margin:calc(var(--s6) * -1) var(--s5) 0 0}
.reason:nth-child(odd) .tx::before{clip-path:polygon(0 0,100% 0,calc(100% - var(--reason-slant)) 100%,0 100%)}

.reason .num{display:flex;align-items:center;gap:var(--s3);font-family:var(--f-en);font-style:italic;font-size:var(--fs-reason-num);line-height:1;color:var(--c-accent);letter-spacing:.02em}
.reason .num::after{content:"";width:var(--rule);height:1px;background:var(--c-accent)}
.reason h3{margin:var(--s3) 0 var(--s3);padding-bottom:var(--s3);border-bottom:1px solid var(--c-line);font-family:var(--f-mincho);font-weight:var(--fw-head);font-size:var(--fs-xl);line-height:var(--lh-head);letter-spacing:.06em;color:var(--c-main)}
.reason p{font-size:var(--fs-m);line-height:1.9}

@media (min-width:768px){
  .reasons{gap:var(--s9)}
  .reason{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:center}
  .reason::before{top:calc(var(--s6) * -1);left:calc(var(--gut) * -1);width:58%;aspect-ratio:3/2}
  .reason:nth-child(odd)::before{left:auto;right:calc(var(--gut) * -1)}
  .reason img{grid-column:1 / 8;grid-row:1;width:100%;aspect-ratio:3/2}
  .reason .tx{grid-column:7 / 13;grid-row:1;margin:var(--s8) 0 0;padding:var(--s6) var(--s6) var(--s6) calc(var(--reason-slant) + var(--s5))}
  .reason:nth-child(odd) img{grid-column:6 / 13;margin:0}
  .reason:nth-child(odd) .tx{grid-column:1 / 7;margin:var(--s8) 0 0;padding:var(--s6) calc(var(--reason-slant) + var(--s5)) var(--s6) var(--s6)}
}


/* ---------- フッター ---------- */
.ft{background:var(--c-main);color:var(--c-on-main)}

/* =====================================================================
   ここから下は案Aの土台の変数で、ほかの章を整えたもの（2026-10-17）
   ===================================================================== */
:root{
  /* 説明の図（7 根面被覆とは）の色 */
  --c-fg-tooth:#ffffff;
  --c-fg-root:#efe2c4;
  --c-fg-gum:#e7b9b0;
  --c-fg-palate:#f2d6cf;
  --c-fg-line:var(--c-main);
  --c-hl-col:#fbf6ec;               /* 比較表の根面被覆の列 */
  --fs-q:19px;                      /* 4つのことの問い */
  --face:88px;                      /* 院長のひと言の丸い顔写真 */
}
@media (min-width:768px){ :root{ --face:112px; --fs-q:20px; } }

/* ---------- 本文の小物 ---------- */
.h3{font-family:var(--f-mincho);font-weight:var(--fw-head);font-size:var(--fs-xl);line-height:var(--lh-head);color:var(--c-main);margin-bottom:var(--s3)}
.dots{display:grid;gap:var(--s2)}
.dots li{position:relative;padding-left:1.2em}
.dots li::before{content:"";position:absolute;left:.2em;top:.8em;width:.42em;height:.42em;border-radius:50%;background:var(--c-accent)}
br.sp{display:inline}
@media (min-width:768px){ br.sp{display:none} }
.cta-box{background:var(--c-bg-soft);border:1px solid var(--c-line);padding:var(--s6) var(--s5)}
.cta-box .lead{font-family:var(--f-mincho);font-size:var(--fs-l);color:var(--c-main)}

/* ---------- 1 1画面目：院長の名札（案Bの「院長のひと言」から） ---------- */
.fv-name{position:absolute;left:var(--s3);bottom:calc(var(--fv-overlap) + var(--s2));z-index:2;max-width:62%;margin:0;padding:var(--s1) var(--s3);background:var(--c-fv-card);box-shadow:var(--shadow);border-left:2px solid var(--c-accent);line-height:1.4} /* スマホは看板の側（左下）に置いて院長の顔にかけない */
.fv-name blockquote{display:none;margin:0}
.fv-name figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .5em;color:var(--c-main)}
.fv-name .role{font-size:var(--fs-xs);color:var(--c-mute)}
.fv-name .nm{font-family:var(--f-mincho);font-weight:600;font-size:var(--fs-m);letter-spacing:.08em}
.fv-name small{display:block;flex-basis:100%;font-size:var(--fs-xs);color:var(--c-accent-deep);letter-spacing:.02em}
.fv-name small > span{display:block} /* 肩書は1行に1つ（2026-10-18 先生が選んだ2つ） */
@media (min-width:1080px){
  .fv-name{left:auto;right:var(--s6);bottom:var(--s7);max-width:300px;padding:var(--s4) var(--s5)}
  .fv-name blockquote{display:block;margin-bottom:var(--s2);font-family:var(--f-mincho);font-size:var(--fs-l);color:var(--c-main);letter-spacing:.04em}
  .fv-name .nm{font-size:var(--fs-l)}
}

/* ---------- 2 院長と資格の要約 ---------- */
.summary{display:grid;gap:var(--s5)}
.summary-ph{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:60% 30%}
@media (min-width:768px){ .summary{grid-template-columns:5fr 7fr;align-items:center;gap:var(--s7)} }
.stats{gap:var(--s3)}
.stat{background:var(--c-card);border:1px solid var(--c-line);border-top:2px solid var(--c-accent);padding:var(--s4) var(--s3)}
.stat .k{display:block;font-size:var(--fs-s);color:var(--c-mute);line-height:1.5}
.stat .v{font-family:var(--f-mincho);font-size:var(--fs-2xl);font-weight:600;color:var(--c-main);margin:var(--s1) 0}
.stat .when{display:block;font-size:var(--fs-xs)}
.stats-one{max-width:var(--max-text);margin-inline:auto}

/* ---------- 3 院内写真 ---------- */
.gallery{gap:var(--s3)}
.gallery-cap figure{margin:0}
.gallery-cap figcaption{font-size:var(--fs-xs);color:var(--c-mute);margin-top:var(--s1);text-align:center;letter-spacing:.06em}

/* ---------- 4 認定証 ---------- */
.certs figure{background:var(--c-card);border:1px solid var(--c-accent-soft);padding:var(--s3);box-shadow:var(--shadow)}
.certs img{aspect-ratio:3/4;object-fit:contain;width:100%;background:var(--c-bg)}
.certs figcaption{font-size:var(--fs-s);line-height:1.5;color:var(--c-main);margin-top:var(--s3)}

/* ---------- 5 院長紹介 ---------- */
.doctor img{width:100%;aspect-ratio:4/3;object-fit:cover}
.doctor .role{color:var(--c-mute)}
.doctor .name{font-weight:var(--fw-head);color:var(--c-main);letter-spacing:.1em;margin-top:var(--s1)}
.doctor .name small{display:block;font-family:var(--f-ja);font-size:var(--fs-xs);color:var(--c-mute);letter-spacing:.12em}
.doctor dl{border-top:1px solid var(--c-line);padding-top:var(--s4);font-size:var(--fs-s)}
.doctor dt{color:var(--c-accent-deep)}

/* ---------- 6 チェックリスト（金の丸のチェック）・受ける前に気になる4つのこと ---------- */
.check li{background:var(--c-card);border:1px solid var(--c-line);padding-left:calc(var(--s4) + 1.9em)}
.check li::before{left:var(--s4);top:calc(var(--s3) + .2em);width:1.3em;height:1.3em;border:var(--line-icon) solid var(--c-accent);border-radius:50%;transform:none}
.check li::after{content:"";position:absolute;left:calc(var(--s4) + .44em);top:calc(var(--s3) + .52em);width:.45em;height:.26em;border-left:var(--line-icon) solid var(--c-accent-deep);border-bottom:var(--line-icon) solid var(--c-accent-deep);transform:rotate(-45deg)}
.check-end{font-family:var(--f-mincho);color:var(--c-main);font-size:var(--fs-l);line-height:1.7}
.qa4-wrap{margin-top:var(--s8)}
.qa4-hd{text-align:center;font-family:var(--f-mincho);font-size:var(--fs-xl);color:var(--c-main);margin-bottom:var(--s5)}
.qa4-hd::after{content:"";display:block;width:var(--rule);height:1px;margin:var(--s3) auto 0;background:var(--c-accent)}
.qa4{display:grid;gap:var(--s3)}
@media (min-width:768px){ .qa4{grid-template-columns:repeat(2,1fr);gap:var(--s4)} }
@media (min-width:1080px){ .qa4{grid-template-columns:repeat(4,1fr)} }
.qa4 li{display:flex;flex-direction:column;background:var(--c-card);border:1px solid var(--c-line);padding:var(--s4) var(--s4) var(--s3)}
.qa4 .q{display:flex;align-items:baseline;gap:var(--s2);font-family:var(--f-mincho);font-weight:600;font-size:var(--fs-q);color:var(--c-main)}
.qa4 .qn{font-family:var(--f-en);font-style:italic;font-weight:500;color:var(--c-accent);font-size:1.15em}
.qa4 .a{margin-top:var(--s2);line-height:1.8}
.qa4 .more{margin-top:auto;padding-top:var(--s2);align-self:flex-end;font-size:var(--fs-s);color:var(--c-accent-deep);text-underline-offset:.25em}

/* ---------- 7 説明の図（術前術後のイラストにはしない：仕組みと場所だけ） ---------- */
.figs{display:grid;gap:var(--s5);margin-top:var(--s6)}
@media (min-width:768px){ .figs{grid-template-columns:1fr 1fr} }
.fig{background:var(--c-card);border:1px solid var(--c-line);padding:var(--s4)}
.fig svg{display:block;width:100%;height:auto;max-width:360px;margin-inline:auto}
.fig figcaption{margin-top:var(--s3);font-size:var(--fs-s);line-height:1.7}
.fg-tooth{fill:var(--c-fg-tooth);stroke:var(--c-fg-line);stroke-width:2}
.fg-root{fill:var(--c-fg-root);stroke:var(--c-fg-line);stroke-width:2}
.fg-gum{fill:var(--c-fg-gum)}
.fg-palate{fill:var(--c-fg-palate);stroke:var(--c-fg-line);stroke-width:1.5}
.fg-graft{stroke:var(--c-accent-deep);stroke-width:2;stroke-dasharray:6 4}
.fg-hatch-bg{fill:color-mix(in srgb,var(--c-accent) 18%,transparent)}
.fg-hatch{stroke:var(--c-accent-deep);stroke-width:2}
.fg-dash{fill:none;stroke:var(--c-fg-line);stroke-width:1.5;stroke-dasharray:5 5}
.fg-t{fill:var(--c-main);font-family:var(--f-ja);font-size:20px;font-weight:500;letter-spacing:0}
.fg-s{font-size:17px}
.canlist{display:grid;gap:var(--s4);max-width:var(--max-text);margin:var(--s5) auto 0}
@media (min-width:768px){ .canlist{grid-template-columns:1fr 1fr;max-width:none} }
.can{background:var(--c-card);border-top:2px solid var(--c-accent);padding:var(--s4) var(--s5)}
.can h4{font-family:var(--f-mincho);font-weight:600;font-size:var(--fs-l);color:var(--c-main);margin:0 0 var(--s2)}
.can.cannot{border-top-color:var(--c-main)}
.can.cannot .dots li::before{background:var(--c-main)}

/* ---------- 8 比較表 ---------- */
.tbl{background:var(--c-card)}
.tbl thead th{background:var(--c-main);color:var(--c-on-main);font-family:var(--f-mincho);font-weight:500;letter-spacing:.06em}
.tbl thead th.hl{background:var(--g-gold);color:var(--c-on-gold);text-shadow:var(--text-shadow-gold)}
.tbl td.hl{background:var(--c-hl-col);color:var(--c-main);font-weight:500}
.tbl tbody th{color:var(--c-main)}
.tbl small{font-size:var(--fs-xs);opacity:.9}

/* ---------- 9 選ばれる理由：03 の分かれ道（案Cから）・章の締めの院長のひと言（案Bから） ---------- */
.branch{display:grid;grid-template-columns:1fr;gap:var(--s2);margin-top:var(--s4)}
@media (min-width:1080px){ .branch{grid-template-columns:1fr 1fr} } /* スマホはカードが狭いので縦に積む */
.br{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:0 var(--s3);padding:var(--s3);background:var(--c-bg-soft);border-top:2px solid var(--c-accent);line-height:1.5}
.br-tag{font-size:var(--fs-s);color:var(--c-mute)}
.br b{font-family:var(--f-mincho);font-weight:600;font-size:var(--fs-l);color:var(--c-main)}
.br-s{grid-column:1/-1;font-size:var(--fs-s);color:var(--c-ink)}
@media (min-width:1080px){ .br{grid-template-columns:1fr} }
.dr-quote{display:grid;grid-template-columns:var(--face) 1fr;align-items:center;gap:var(--s4);max-width:var(--max-text);margin:var(--s8) auto 0;padding:var(--s5);background:var(--c-card);border:1px solid var(--c-accent-soft);box-shadow:var(--shadow)}
.dr-quote img{width:var(--face);height:var(--face);border-radius:50%;object-fit:cover}
.dr-quote blockquote{margin:0;font-family:var(--f-mincho);font-size:var(--fs-l);line-height:1.6;color:var(--c-main)}
.dr-quote figcaption{margin-top:var(--s2);font-size:var(--fs-s);color:var(--c-mute)}
.dr-quote figcaption .role{margin-right:.5em;color:var(--c-accent-deep)}

/* ---------- 11 症例 ---------- */
.case{border:1px solid var(--c-line);border-top:2px solid var(--c-accent)}
.case h3{font-family:var(--f-mincho);color:var(--c-main)}
.case-ad dt{color:var(--c-accent-deep)}

/* ---------- 13 費用・リスク ---------- */
.ad-box{background:var(--c-card);border:1px solid var(--c-line);border-left:3px solid var(--c-main);padding:var(--s4) var(--s5)}
.ad-box h3{font-family:var(--f-mincho);color:var(--c-main)}
.ad-box .dots{font-size:var(--fs-s)}

/* ---------- 14 流れ ---------- */
.flow li{background:var(--c-card);border:1px solid var(--c-line)}
.flow li::before{font-style:italic;font-size:var(--fs-l);color:var(--c-accent)}
.flow h3{font-family:var(--f-mincho);font-size:var(--fs-l);color:var(--c-main)}
@media (min-width:768px){ .flow.flow-6{grid-template-columns:repeat(3,1fr)} }

/* ---------- 15 よくあるご質問 ---------- */
.faq details{background:var(--c-card);border:1px solid var(--c-line)}
.faq summary{color:var(--c-main)}
.faq summary::before{font-style:italic;font-size:1.15em}

/* ---------- 16 最後の案内 ---------- */
.last-ph{width:100%;max-width:880px;margin-inline:auto;aspect-ratio:16/9;object-fit:cover}

/* ---------- 18 アクセス ---------- */
.hours{background:var(--c-card)}
.hours th{color:var(--c-main);font-weight:500}
.hours td:first-child{white-space:nowrap;font-variant-numeric:lining-nums}
.access dt{color:var(--c-accent-deep)}

/* ---------- フッター ---------- */
.ft a{color:inherit}

/* ---------- スマホの章の中のボタン：1画面目と同じく全幅で縦に並べる（狭い枠で予約の字が2行に割れないように） ---------- */
@media (max-width:767px){
  main .btns{display:grid;justify-content:stretch;gap:var(--s3)}
  main .btns .btn{width:100%;min-height:var(--btn-h);padding-inline:var(--s3);letter-spacing:.03em}
  .cta-box{padding:var(--s6) var(--s4)}
}
@media (max-width:379px){ main .btn-p::after{display:none} }

/* =====================================================================
   モックの確認 1周目の直し（2026-10-17。審査3人の指摘）
   ===================================================================== */
/* 1画面目の名札：見出しとの間を少しあける。肩書の2行はスマホにも出す（2026-10-18 生野先生「スマホにも出す」） */
@media (max-width:1079px){ .fv-name{bottom:calc(var(--fv-overlap) + var(--s4))} }

/* 2 要約：資格のカード2枚と、研修・略歴の行 */
.summary .stats{grid-template-columns:1fr 1fr}
.summary-list{display:grid;grid-template-columns:auto 1fr;gap:var(--s2) var(--s4);margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--c-line);font-size:var(--fs-s)}
.summary-list dt{color:var(--c-accent-deep);font-weight:500}
.summary-list dd{margin:0}

/* 3 院内写真の小さな見出し */
.sec-hd-sm{margin-bottom:var(--s5)}
.sec-hd-sm h2{font-size:var(--fs-xl)}

/* 4 認定証（2枚）：画像は元の縦横のまま、余白を足さない */
.certs-2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:720px;margin-inline:auto}
.certs img{aspect-ratio:auto;object-fit:initial;background:none}

/* 7 図の引き出し線 */
.fg-lead{fill:none;stroke:var(--c-main);stroke-width:1.2}

/* 8 比較表：スマホでは横に動かせることを示す（右端の影と一言） */
.tbl-hint{display:none;font-size:var(--fs-xs);color:var(--c-mute);text-align:right;margin-bottom:var(--s1)}
.tbl-hint::after{content:" →"}
@media (max-width:767px){
  .tbl-hint{display:block}
  .tbl-wrap{background:linear-gradient(to left,rgba(59,50,41,.14),rgba(59,50,41,0) 18px) right/18px 100% no-repeat;background-attachment:local,scroll}
  .tbl tbody th{position:sticky;left:0;z-index:1}
}

/* 11 症例の4点：スマホは見出しを上・中身を下に積む（細い柱にしない） */
@media (max-width:767px){
  .case-ad{grid-template-columns:1fr;gap:0}
  .case-ad dt{margin-top:var(--s3)}
  .case-ad dt:first-child{margin-top:0}
}

/* 13 費用のカード：現金価格がいちばん大きい。ローンの行は同じ大きさで同じ枠に（月額だけを目立たせない） */
.pcard-rows .main{min-height:76px}
.pcard-rows .main .pcard-num{font-size:var(--fs-2xl)}
.pcard-taxin{display:block;margin-top:2px;font-size:var(--fs-m);font-weight:600;line-height:1.4;color:var(--c-ink)}  /* 大きい数字は税抜、すぐ下に現金価格（税込）。2026-10-22 税抜表記に統一 */
.pcard-taxin-lbl{margin-right:.3em;font-size:var(--fs-xs);font-weight:500;color:var(--c-mute)}
.pcard-loan-hd{margin-top:var(--s4);font-size:var(--fs-s);font-weight:700;color:var(--c-main)}
.pcard-loan-rows{display:grid;gap:0;margin-top:var(--s2);border-top:1px solid var(--c-line)}
.pcard-loan-rows>div{display:grid;grid-template-columns:44% 1fr;align-items:center;gap:var(--s3);padding:var(--s2) 0;border-bottom:1px solid var(--c-line);font-size:var(--fs-s)}
.pcard-loan-rows dt{color:var(--c-main);font-weight:500}
.pcard-loan-rows dd{margin:0;text-align:right;font-variant-numeric:lining-nums}
.pcard-loan{text-align:left}
.ad-list{display:grid;gap:var(--s2);margin-top:var(--s5);padding:var(--s4) var(--s5);background:var(--c-card);border:1px solid var(--c-line);font-size:var(--fs-s);line-height:1.8}
.ad-list li{position:relative;padding-left:1.1em}
.ad-list li::before{content:"・";position:absolute;left:0;color:var(--c-accent-deep)}
@media (min-width:768px){ .ad-list{font-size:var(--fs-m)} }

/* 14 標準的な期間・回数（限定解除の1点なので本文の大きさで） */
.ad-box-c{text-align:center;font-size:var(--fs-m);border-left:0;border-top:2px solid var(--c-accent)}

/* =====================================================================
   構成案 v2.1 の章（2026-10-17。すが歯科・つつい歯科の LP の中身を取り込んだ章）
   ===================================================================== */
/* 1 1画面目の費用の目安（すが歯科の型）。金額は太字だけで、前面に押し出さない（QA Q2-5） */
.fv-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s1) var(--s4);margin-top:var(--s3);padding:var(--s2) var(--s3);background:var(--c-card);border:1px solid var(--c-accent-soft);font-size:var(--fs-s);color:var(--c-ink);line-height:1.6}
.fv-price b{font-weight:700;color:var(--c-main);font-variant-numeric:lining-nums}
.fv-price a{color:var(--c-accent-deep);text-underline-offset:.25em}
.fv-access{margin-top:var(--s2)}

/* 3・7 図と説明を並べる */
.rec-intro{display:grid;gap:var(--s5);align-items:center;max-width:920px;margin-inline:auto}
@media (min-width:768px){ .rec-intro{grid-template-columns:2fr 3fr;gap:var(--s7)} }
.fig-sm svg{max-width:280px}

/* 3 原因5つ（番号のアイコン） */
.causes{display:grid;gap:var(--s3);margin-top:var(--s7)}
@media (min-width:768px){ .causes{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1080px){ .causes{grid-template-columns:repeat(5,1fr)} }
.causes li{position:relative;background:var(--c-card);border:1px solid var(--c-line);padding:var(--s4) var(--s4) var(--s4) calc(var(--s4) + 44px)}
@media (min-width:1080px){ .causes li{padding:calc(var(--s4) + 52px) var(--s4) var(--s4)} }
.causes .cn{position:absolute;left:var(--s4);top:var(--s4);display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--g-gold);color:var(--c-on-gold);font-family:var(--f-en);font-style:italic;font-size:var(--fs-l);text-shadow:var(--text-shadow-gold)}
.causes h3{font-family:var(--f-mincho);font-weight:600;font-size:var(--fs-l);line-height:1.5;color:var(--c-main)}
.causes p{margin-top:var(--s1);font-size:var(--fs-s);line-height:1.8}

/* 4 放置のリスク */
.risks4{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3)}
@media (min-width:1080px){ .risks4{grid-template-columns:repeat(4,1fr);gap:var(--s4)} }
.risks4 li{background:var(--c-card);border:1px solid var(--c-line);border-top:2px solid var(--c-main);padding:var(--s4)}
.risks4 h3{font-family:var(--f-mincho);font-weight:600;font-size:var(--fs-l);color:var(--c-main)}
.risks4 p{margin-top:var(--s1);font-size:var(--fs-s);line-height:1.8}
.risk-end{margin-top:var(--s6);text-align:center;font-family:var(--f-mincho);font-size:var(--fs-l);color:var(--c-main)}

/* 5・6 お悩み別（つつい歯科の型） */
.worry .sec-hd .en{font-style:italic}
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);max-width:var(--max-text);margin:var(--s5) auto 0;counter-reset:st}
.steps3 li{position:relative;display:grid;gap:2px;justify-items:center;text-align:center;padding:var(--s3) var(--s2);background:var(--c-card);border:1px solid var(--c-accent-soft);counter-increment:st;line-height:1.5}
.steps3 li::before{content:counter(st);font-family:var(--f-en);font-style:italic;font-size:var(--fs-l);color:var(--c-accent)}
.steps3 b{font-family:var(--f-mincho);font-weight:600;font-size:var(--fs-s);color:var(--c-main)}
.steps3 span{font-size:var(--fs-xs);color:var(--c-mute)}
@media (min-width:768px){ .steps3 b{font-size:var(--fs-m)} .steps3 span{font-size:var(--fs-s)} }
.cases-1{max-width:880px;margin:var(--s6) auto 0}
.branch-wide{max-width:var(--max-text);margin:var(--s5) auto 0}
@media (min-width:768px){ .branch-wide{grid-template-columns:1fr 1fr} .branch-wide .br{grid-template-columns:1fr} }
.ortho-dr{display:grid;gap:var(--s4);max-width:880px;margin:var(--s6) auto 0;padding:var(--s4);background:var(--c-card);border:1px solid var(--c-accent-soft);box-shadow:var(--shadow)}
@media (min-width:768px){ .ortho-dr{grid-template-columns:2fr 3fr;align-items:center;padding:var(--s5)} }
.ortho-dr img{width:100%;aspect-ratio:3/2;object-fit:cover}
.ortho-dr-hd{font-family:var(--f-mincho);font-weight:600;font-size:var(--fs-l);color:var(--c-main);margin-bottom:var(--s2)}

/* 7 根面被覆とは：短い説明＋方法（中心の結合組織移植を大きく、ほかの3つを小さく）。
   2026-10-18 夜 生野先生「どこまで覆えるか・組み合わせる治療は要らない。説明はサクッと」→ 11院の型（見出し＋1〜2文） */
.about-lead{max-width:var(--max-text);margin-inline:auto}
.about-lead .ln,.mth .ln,.care2 .ln{display:block} /* 1文ごとに行を替える（2026-10-22 生野先生「一つの文がダーッと続くと長い」） */
.mth{display:grid;gap:var(--s3);max-width:var(--max);margin:var(--s6) auto 0}
.mth li{background:var(--c-card);border:1px solid var(--c-line);padding:var(--s4) var(--s5);line-height:1.75}
.mth h3{font-family:var(--f-mincho);font-weight:600;font-size:var(--fs-l);line-height:var(--lh-head);color:var(--c-main);margin-bottom:var(--s2)}
.mth h3 small{display:block;margin-top:2px;font-family:var(--f-ja);font-weight:400;font-size:var(--fs-xs);letter-spacing:.04em;color:var(--c-mute)}
.mth p{font-size:var(--fs-s)}
.mth-main{border-color:var(--c-accent-soft);box-shadow:var(--shadow)}
.mth-main h3{font-size:var(--fs-xl)}
.mth-tag{display:inline-block;margin-bottom:var(--s2);padding:2px var(--s3);border-radius:999px;background:var(--g-gold);color:var(--c-on-gold);text-shadow:var(--text-shadow-gold);font-size:var(--fs-xs);font-weight:500;letter-spacing:.08em}
@media (min-width:768px){
  .mth{grid-template-columns:repeat(3,1fr);gap:var(--s4)}
  .mth-main{grid-column:1/-1;display:grid;grid-template-columns:220px 1fr;grid-template-rows:auto auto;column-gap:var(--s6);align-items:center;padding:var(--s5) var(--s6)}
  .mth-main .mth-tag{grid-area:1/1;justify-self:start;align-self:end}
  .mth-main h3{grid-area:2/1;align-self:start;margin:0}
  .mth-main p{grid-area:1/2/3/3;font-size:var(--fs-m)}
}

/* 8 ほかの方法との違い：章ごと消した（2026-10-20 生野先生）。CSS（.alt3）も外した。元は git 33b84fc */

/* 10 院長紹介：肩書の札・年表 */
.dr-tags{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3)}
.dr-tags li{padding:.2em .7em;border:1px solid var(--c-accent);color:var(--c-accent-deep);font-size:var(--fs-s);line-height:1.6}
.timeline{display:grid;grid-template-columns:auto 1fr;gap:var(--s2) var(--s4);margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--c-line);font-size:var(--fs-s)}
.timeline dt{font-family:var(--f-en);font-style:italic;font-size:var(--fs-m);color:var(--c-accent-deep);font-variant-numeric:lining-nums}
.timeline dd{margin:0}
.dr-cred{display:grid;grid-template-columns:auto 1fr;gap:var(--s2) var(--s4);margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--c-line);font-size:var(--fs-s)}
.dr-cred dt{color:var(--c-accent-deep);font-weight:500}
.dr-cred dd{margin:0}

/* 11 費用の表 */
.tbl-wrap-price{max-width:var(--max-text);margin-inline:auto}
.ptbl{min-width:0}
.ptbl tbody th{text-align:left;white-space:normal}
.ptbl td{font-variant-numeric:lining-nums;color:var(--c-main);font-weight:500}
.pcards{max-width:var(--max-text);margin-inline:auto}

/* =====================================================================
   v2.1 の確認 1周目の直し（2026-10-17。審査3人の指摘）
   ===================================================================== */
/* dd の既定の左余白を消す（症例・アクセス） */
.case-ad dd,.access dd,.summary-list dd,.timeline dd,.dr-cred dd{margin:0}
/* 症例：PC は写真2枚を上に大きく、4点を下に横幅いっぱい */
@media (min-width:1080px){
  .case{display:block}
  .case h3{margin-bottom:var(--s3)}
  .case-ad{grid-template-columns:auto 1fr;margin-top:var(--s4)}
}
/* 1画面目：費用の目安の注記・PC ではカードを低く（強み3つを1行に） */
.fv-price-note{flex-basis:100%;font-size:var(--fs-xs);color:var(--c-mute)}
@media (min-width:1080px){
  /* PC の文字の面が高くなって看板を隠さないよう、強み・費用の目安を詰める */
  .fv .badges{grid-template-columns:1fr;gap:0}
  .fv .badge{line-height:1.45}
  .fv-card{padding:var(--s4) var(--s5)}
  .fv .lead{margin-top:var(--s2);line-height:1.7}
  .fv-price{margin-top:var(--s3);padding:var(--s1) var(--s3);gap:0 var(--s3)}
  .fv-price-note{flex-basis:auto}
}
@media (min-width:1280px) and (min-height:820px){ :root{ --fs-h1:46px; } }
/* 5 お悩み別①の3段：スマホは横長の行を縦に3段 */
@media (max-width:767px){
  .steps3{grid-template-columns:1fr;gap:var(--s2)}
  .steps3 li{grid-template-columns:2em auto 1fr;justify-items:start;align-items:baseline;text-align:left;gap:var(--s2);padding:var(--s3) var(--s4)}
  .steps3 b{font-size:var(--fs-m)}
  .steps3 span{font-size:var(--fs-s)}
}
/* 4 放置のリスク：スマホは1列 */
@media (max-width:767px){ .risks4{grid-template-columns:1fr} }
/* 3 原因：PC は3列（5つは3＋2） */
@media (min-width:1080px){ .causes{grid-template-columns:repeat(3,1fr)} .causes li{padding:var(--s4) var(--s4) var(--s4) calc(var(--s4) + 44px)} }
/* 10 認定証：スマホは1列（字が語の途中で折れないように） */
@media (max-width:767px){ .certs-2{grid-template-columns:1fr;max-width:300px} }
/* 11 費用：幅をそろえる・表の列は 55:45・カードの角は四角 */
#price [data-ad="fee"],#price .ad-box{max-width:var(--max-text);margin-inline:auto}
.ptbl th{width:55%}
.ptbl td small{font-size:var(--fs-xs);color:var(--c-mute);font-weight:400}
.pcard{border-radius:var(--r)}
.pcard-hd{border-radius:0}
.ad-sub{margin:var(--s4) 0 var(--s2);font-family:var(--f-mincho);font-size:var(--fs-m);color:var(--c-main)}
/* 7 図：置く場所と採る場所を並べる */
.fig-cap{margin-top:var(--s1);text-align:center;font-size:var(--fs-s);font-weight:500;color:var(--c-main)}
/* 12 流れ：写真つきの6段 */
.flow-ph li{padding:0 0 var(--s4)}
.flow-ph li::before{padding:var(--s3) var(--s4) 0}
.flow-ph img{width:100%;aspect-ratio:3/2;object-fit:cover;order:-1}
.flow-ph li{display:flex;flex-direction:column}
.flow-ph h3,.flow-ph p{padding-inline:var(--s4)}
/* 9 院長のひと言（9章の締め） */
.dr-quote blockquote{font-size:var(--fs-l)}
.fig-cap b{display:block;font-size:var(--fs-xs);color:var(--c-accent-deep);letter-spacing:.1em}

/* =====================================================================
   v2.1 の確認 2周目の直し（2026-10-17）
   ===================================================================== */
/* 文の終わりに1〜2字だけの行を残さない */
p,li,dd,td,figcaption{text-wrap:pretty}
/* 住所などは語の途中で折らない（はみ出しはしない） */
.access dd,.ft p{word-break:keep-all;overflow-wrap:anywhere}
/* 1画面目の費用の注記は本文と同じ色で（打消し表示を小さく薄くしない） */
.fv-price-note{font-size:var(--fs-s);color:var(--c-ink)}
/* 5 3段：スマホは「番号＋見出し」の下に説明 */
@media (max-width:767px){
  .steps3 li{grid-template-columns:2em 1fr;row-gap:0}
  .steps3 li::before{grid-row:1/3}
  .steps3 span{grid-column:2}
}
/* 3 原因：PC は5枚を 3＋2 で、2段目を中央に寄せる */
@media (min-width:1080px){
  .causes{grid-template-columns:repeat(6,1fr)}
  .causes li{grid-column:span 2}
  .causes li:nth-child(4){grid-column:2/4}
  .causes li:nth-child(5){grid-column:4/6}
}
/* 10 院長紹介：PC は写真の下に認定証（左の列の空きを埋める） */
.doctor-side{display:grid;gap:var(--s4);align-content:start}
.doctor-side .certs-2{margin:0;max-width:none}
@media (max-width:767px){ .doctor-side .certs-2{max-width:300px;margin-inline:auto} }
/* 12 流れ：スマホは写真を低く（16:9） */
@media (max-width:767px){ .flow-ph img{aspect-ratio:16/9} }

/* =====================================================================
   v2.1 の確認 3周目の直し（2026-10-17）
   ===================================================================== */
/* 数字の高さをそろえる（Cormorant の数字は上下にずれるため。base.css の決まり） */
.reason .num,.causes .cn,.steps3 li::before,.flow li::before,.sec-hd .en,.timeline dt,.qa4 .qn{font-variant-numeric:lining-nums}
/* 1画面目の医院名と駅：スマホは2行に積んで区切りを出さない */
@media (max-width:767px){ .fv-access .sep{display:none} .fv-access [data-clinic]{display:block} }
/* スマホの導入文の左揃えはやめた（2026-10-20 6つの目線の審査：見出しの下の短い文がスマホだけ左に寄って見えた） */

/* =====================================================================
   1画面目に歯肉退縮のイメージ（2026-10-18 生野先生「トップを文字詰めすぎ。歯肉退縮は患者からみてわかりにくいから、画像をいれたほうがいい」）
   導入文を1文にし、費用の注記を短くして、画像で「どんな状態か」を見せる
   スマホ：大見出し → 画像 → 治療名と一文 → 予約 → 強み3つ → 費用の目安 → 駅（予約ボタンを 390×664 に入れる）
   768px〜：大見出し → [画像｜治療名・一文・強み3つ] → 予約 → 費用の目安 → 駅
   ===================================================================== */
:root{
  --fv-rec-ratio:2/1;               /* スマホの画像の縦横（歯ぐきの縁と下がった根が入る高さ） */
  --fv-rec-ratio-pc:3/2;            /* 768px〜の画像の縦横 */
  --fv-rec-pos:50% 42%;             /* 切り抜くときの中心（歯ぐきの縁に寄せる） */
  --pin-x:63%; --pin-y:38%;         /* 「見えてきた根」の印の位置（画像の中の %。画像を替えたら合わせる。いまは画像右の中切歯） */
  --pin-w:32px; --pin-h:44px;       /* 印の楕円（根は縦長なので縦の楕円） */
  --c-pin:#ffffff;                  /* 印の線 */
  --c-pin-label:rgba(255,255,255,.94);
  --shadow-pin:0 0 0 1px rgba(59,50,41,.35),0 2px 6px rgba(0,0,0,.25);
}
.fv-rec{position:relative;margin:var(--s4) 0 0;overflow:hidden;border-radius:var(--r);box-shadow:var(--shadow);background:var(--c-bg-deep)}
.fv-rec img{display:block;width:100%;height:auto;aspect-ratio:var(--fv-rec-ratio);object-fit:cover;object-position:var(--fv-rec-pos)}
.fv-rec-tag{position:absolute;left:0;top:0;padding:var(--s1) var(--s3);background:var(--c-main);color:var(--c-on-main);font-family:var(--f-mincho);font-size:var(--fs-s);font-weight:600;letter-spacing:.08em;line-height:1.5}
.fv-rec-tag small{font-family:var(--f-ja);font-weight:400;font-size:var(--fs-xs);letter-spacing:0}
.fv-rec-pin{position:absolute;left:var(--pin-x);top:var(--pin-y);width:0;height:0}
.fv-rec-pin i{position:absolute;left:calc(var(--pin-w) / -2);top:calc(var(--pin-h) / -2);width:var(--pin-w);height:var(--pin-h);border:2px solid var(--c-pin);border-radius:50%;box-shadow:var(--shadow-pin)}
.fv-rec-pin b{position:absolute;left:calc(var(--pin-w) / 2 + var(--s1));top:0;transform:translateY(-50%);white-space:nowrap;padding:1px var(--s2);background:var(--c-pin-label);color:var(--c-main);font-size:var(--fs-xs);font-weight:700;line-height:1.6;border-radius:2px;box-shadow:var(--shadow-pin)}
.fv-txt .kicker{margin-top:var(--s4)}
.fv-txt .lead{margin-top:var(--s1);line-height:1.7}
@media (max-width:767px){
  .fv-card{display:flex;flex-direction:column}
  .fv-body,.fv-txt{display:contents}
  .fv h1{order:1} .fv-rec{order:2} .fv .kicker{order:3} .fv .lead{order:4} .fv .btns{order:5} .fv .badges{order:6} .fv-price{order:7} .fv-access{order:8}
  .fv .btns{margin-top:var(--s3)}
  .fv .badges{margin-top:var(--s4)}
}
@media (min-width:768px){
  .fv-body{display:grid;grid-template-columns:minmax(0,46%) 1fr;gap:var(--s5);align-items:center;margin-top:var(--s4)}
  .fv-rec{margin:0}
  .fv-rec img{aspect-ratio:var(--fv-rec-ratio-pc)}
  .fv-txt .kicker{margin-top:0}
  .fv .badges{grid-template-columns:1fr;gap:0;margin-top:var(--s3)}
}
@media (min-width:1080px){
  /* PC の文字の面は幅が狭いので、印の札は輪の上に（右に出すと画像の端で切れる）。「歯肉退縮」の札は左下に */
  .fv-rec-pin b{left:0;top:calc(var(--pin-h) / -2 - var(--s1));transform:translate(-50%,-100%)}
  .fv-rec-tag{top:auto;bottom:0}
  .fv-txt .badge b{font-size:var(--fs-m)}
}

/* 1画面目の画像：先生の見本（犬歯1本の近接に黄色の◯）に合わせ、印を◯にした（2026-10-18 午後「下がってるところ◯して」）
   位置は画像の幅に対する %（3:2 で見たとき）。スマホは 2:1 に切り抜くので縦の位置を --ring-y-sp で別に持つ（≒ 4/3×y − 0.14） */
:root{
  --ring-x:39.5%; --ring-y:38%; --ring-y-sp:39%; --ring-w:24%; --ring-ratio:1/.9;  /* recession_before-2 の犬歯 */
  --c-ring:#f4d23c;                 /* 見本と同じ黄色（写真の上でいちばん目に入る色） */
  --shadow-ring:drop-shadow(0 1px 2px rgba(0,0,0,.4));
}
.fv-rec-pin{display:none}
.fv-rec-ring{position:absolute;left:var(--ring-x);top:var(--ring-y);width:var(--ring-w);aspect-ratio:var(--ring-ratio);transform:translate(-50%,-50%);border:3px solid var(--c-ring);border-radius:50%;filter:var(--shadow-ring)}
.fv-rec-ring b{position:absolute;left:calc(100% + var(--s1));top:50%;transform:translateY(-50%);white-space:nowrap;padding:1px var(--s2);background:var(--c-ring);color:var(--c-main);font-size:var(--fs-xs);font-weight:700;line-height:1.6;border-radius:2px}
@media (max-width:767px){ .fv-rec-ring{top:var(--ring-y-sp)} }
.fv-rec-tag{top:0;bottom:auto;left:auto;right:0}  /* 「歯肉退縮（イメージ）」は右上（◯と札に重ねない） */

/* 1画面目：治療前と治療後のイメージを並べる（2026-10-18 午後 生野先生「before after でつくって」→「AI の after も並べる」）
   2枚を横に並べ、犬歯に寄せて切り抜く。◯の位置は切り抜きに合わせて持ち直す（画像の 3:2 での位置 x=39.5%・y=38%・幅24% から計算）
   スマホ：4:3（左寄せ）→ x=44.4%・幅27%／768px〜：1:1（左から20%）→ x=49%・幅36% */
:root{ --ba-ratio:4/3; --ba-pos:0% 50%; --ba-ring-x:44.4%; --ba-ring-w:27%; }
@media (min-width:768px){ :root{ --ba-ratio:1/1; --ba-pos:20% 50%; --ba-ring-x:49%; --ba-ring-w:36%; } }
.fv-ba{overflow:visible;box-shadow:none;background:none;border-radius:0}
.ba{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
.ba-i{position:relative;overflow:hidden;border-radius:var(--r);box-shadow:var(--shadow)}
.fv-ba .ba-i img{aspect-ratio:var(--ba-ratio);object-fit:cover;object-position:var(--ba-pos)}
.ba-tag{position:absolute;left:0;top:0;padding:1px var(--s2);background:var(--c-main);color:var(--c-on-main);font-size:var(--fs-xs);font-weight:700;line-height:1.6;letter-spacing:.04em}
.ba-tag small{font-weight:400;font-size:var(--fs-xs)}
.ba-tag.ba-after{background:var(--g-gold);color:var(--c-on-gold)}
.fv-ba .fv-rec-ring{left:var(--ba-ring-x);top:var(--ring-y);width:var(--ba-ring-w)}
/* 2枚のあいだの「→」 */
.ba::after{content:"";position:absolute;left:50%;top:50%;width:26px;height:26px;transform:translate(-50%,-50%);border-radius:50%;background:var(--c-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l6 6-6 6' fill='none' stroke='%237d5f30' stroke-width='2.5'/%3E%3C/svg%3E") center/16px no-repeat;box-shadow:var(--shadow)}
.fv-ba figcaption{margin-top:var(--s1);font-size:var(--fs-xs);color:var(--c-ink);line-height:1.6}
@media (min-width:768px){ .fv-body{grid-template-columns:minmax(0,50%) 1fr} }
/* PC（1280px〜）：治療前・治療後の2枚が小さくならないよう、文字の面を広げる（院長の顔にかからない幅） */
@media (min-width:1280px){ :root{ --fv-card-w:720px; } }
/* 治療前・治療後の2枚を小さく（2026-10-18 生野先生「画像が大きすぎてバランスが良くない」）
   スマホ：3:2（切り抜かない）／768px〜：列を 40% にして 4:3（左寄せ） */
:root{ --ba-ratio:3/2; --ba-pos:50% 50%; --ba-ring-x:39.5%; --ba-ring-w:24%; }
@media (min-width:768px){
  :root{ --ba-ratio:4/3; --ba-pos:0% 50%; --ba-ring-x:44.4%; --ba-ring-w:27%; }
  .fv-body{grid-template-columns:minmax(0,40%) 1fr}
}

/* スマホ：院長の写真を高く・顔を大きく（2026-10-18 生野先生「スマホ版、顔写真がかなり見えにくくなった」）
   治療前・治療後の画像を小さくして空いた分（約50px）を写真に回す。予約ボタンは 390×664 の中のまま。
   白いぼかしは顔にかからないよう下の方だけに */
@media (max-width:767px){
  :root{
    --fv-ph-ratio:390/262;          /* 208→262 */
    --fv-ph-zoom:1.1;               /* 顔を大きく（1.18 では看板の S が切れた） */
    --fv-ph-origin:60% 26%;         /* 拡大の中心（看板の左端が残り、顔が大きくなる位置） */
    --g-fv-fade:linear-gradient(to bottom,rgba(253,251,247,0) 64%,rgba(253,251,247,.85) 88%,var(--c-bg) 100%);
  }
  .fv-ph{overflow:hidden}
  .fv-ph img{transform:scale(var(--fv-ph-zoom));transform-origin:var(--fv-ph-origin)}
}
/* PC：治療前・治療後をもう一度大きく（2026-10-18 生野先生「PCは逆に症例写真が小さいかも」）。列 40%→52%、高さは 4:3 のまま */
@media (min-width:768px){ .fv-body{grid-template-columns:minmax(0,52%) 1fr} }

/* =====================================================================
   1画面目の院長：切り抜いた「マイクロスコープをのぞく院長」に（2026-10-18 生野先生「僕の写真は canva で切り抜く形でマイクロスコープを覗いてる写真にして」）
   切り抜き（1980×1100・横縦比 1.8）を生成りの地と金の丸の上に置く。院長の目は切り抜きの左から 57%（--cut-eye）
   スマホ：帯の高さいっぱい・目を帯の 60% に／PC：1画面目の高さの 90%・目を画面の 73% に（文字の面にかからない）
   ===================================================================== */
:root{
  --cut-ratio:1.8;                  /* 切り抜きの横÷縦 */
  --cut-eye:.57;                    /* 切り抜きの中の院長の目の位置（左から） */
  --g-fv-cut:radial-gradient(circle at var(--cut-glow-x,66%) 44%,rgba(217,198,163,.55) 0 var(--cut-glow-r,30%),rgba(217,198,163,0) calc(var(--cut-glow-r,30%) + .5%)),
             linear-gradient(160deg,var(--c-bg) 0%,var(--c-bg-soft) 55%,var(--c-bg-deep) 100%);
}
.fv-ph{background:var(--g-fv-cut);overflow:hidden}
.fv-ph::before{display:none}                     /* 大理石を温める色は切り抜きには要らない */
.fv-ph img.fv-cut{position:absolute;bottom:0;top:auto;width:auto;max-width:none;height:100%;object-fit:contain;transform:none;
  left:calc(var(--cut-eye-x) - var(--cut-h) * var(--cut-ratio) * var(--cut-eye))}
@media (max-width:1079px){
  :root{ --fv-ph-ratio:390/262; --g-fv-fade:linear-gradient(to bottom,rgba(253,251,247,0) 70%,rgba(253,251,247,.85) 90%,var(--c-bg) 100%); --cut-glow-x:64%; --cut-glow-r:34%; }
  .fv-ph{container-type:inline-size}
  .fv-ph img.fv-cut{--cut-eye-x:60cqw;--cut-h:calc(100cqw * 262 / 390)}   /* 帯の高さ＝幅×262/390（--fv-ph-ratio と同じ） */
  .fv-name{top:var(--s3);bottom:auto}           /* 左上（マイクロスコープの本体にかけない） */
}
@media (min-width:1080px){
  :root{ --cut-glow-x:80%; --cut-glow-r:24%; }
  .fv-ph{width:100%;left:0;right:0}
  /* 高さ 78%・目を画面の 79% に：のぞく姿（接眼の筒と目）が文字の面の右に出て、本体とアームは文字の面の後ろに入る */
  .fv-ph img.fv-cut{height:78%;--cut-h:calc(var(--fv-h) * .78);--cut-eye-x:79%}
  /* 文字の面の上からアームがのぞかないよう、切り抜きの左（アームと本体）を消す。接眼の筒（32%〜）は残す */
  .fv-ph img.fv-cut{-webkit-mask-image:linear-gradient(to right,transparent 0 20%,#000 32%);mask-image:linear-gradient(to right,transparent 0 20%,#000 32%)}
}

/* =====================================================================
   1画面目を Mouth Peace 矯正歯科（見本帳 #5）の配置に（2026-10-18 生野先生「バランス悪い　マウスピース矯正歯科のサイトみたいな配置感で」）
   箱を使わず、生成りの地に 大見出し（1行目に淡い金の帯）→ 治療名と一文 → 治療前・治療後 を左に、院長の切り抜きを右に重ねる
   スマホ：治療前・治療後を左に縦に積み（幅 56%）、院長を右に（高さ＝2枚の高さ）／PC：2枚を横に並べ、院長は画面の右に大きく
   ===================================================================== */
:root{
  --c-fv-key-bg:#f1e6d3;            /* 大見出し1行目の帯（見本の「」の帯） */
  --c-fv-glow:rgba(217,198,163,.5); /* 院長の後ろの金の丸 */
  --g-fv-mp:linear-gradient(160deg,var(--c-bg) 0%,var(--c-bg-soft) 60%,var(--c-bg-deep) 100%);
  --ba-ratio:3/2; --ba-pos:50% 50%; --ba-ring-x:39.5%; --ba-ring-w:24%;   /* 2枚とも 3:2（切り抜かない） */
  --dr-eye:74cqw;                   /* スマホ：院長の目の位置（行の幅に対して） */
}
@media (min-width:768px){ :root{ --ba-ratio:3/2; --ba-pos:50% 50%; --ba-ring-x:39.5%; --ba-ring-w:24%; } }
.fv-mp{position:relative;padding-top:var(--hd);background:var(--g-fv-mp);overflow:hidden}
.fv-mp .fv-in{margin-top:0;padding:var(--s5) 0 var(--s6)}
.fv-mp .fv-card{position:static;display:flex;flex-direction:column}
.fv-mp h1{order:1}
/* 「言われた言葉」は行ごとに淡い金の帯、「そう言われてしまったあなたへ」は一段小さく（2026-10-18 生野先生の大見出し） */
.fv-mp h1 .fv-key{display:inline;padding:0 .2em;margin-left:-.2em;background:var(--c-fv-key-bg);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.fv-mp h1 .fv-h1-sub{display:block;margin-top:var(--s1);font-size:var(--fs-xl);line-height:1.5;letter-spacing:.08em}
.fv-mp .kicker{order:2;margin-top:var(--s3)}
.fv-mp .lead{order:3;margin-top:var(--s1);line-height:1.7}
.fv-mp .fv-vis{order:4;position:relative;margin-top:var(--s4);container-type:inline-size;--rec-w:56cqw;--dr-h:calc(var(--rec-w) * 2 / 1.5 + var(--s4))}
.fv-mp .btns{order:5;margin-top:var(--s4)}
.fv-mp .badges{order:6;margin-top:var(--s4)}
.fv-mp .fv-price{order:7}
.fv-mp .fv-access{order:8}
/* 治療前・治療後：スマホは縦に積んで「↓」 */
.fv-mp .fv-rec{position:relative;z-index:2;width:var(--rec-w);margin:0}
.fv-mp .ba{grid-template-columns:1fr;gap:var(--s4)}
.fv-mp .ba::after{transform:translate(-50%,-50%) rotate(90deg)}
/* 院長の切り抜き：行の右に、2枚と同じ高さで。左（マイクロスコープの本体）は2枚の後ろに入る。下はぼかして予約ボタンへつなぐ */
.fv-mp .fv-dr{position:absolute;z-index:1;bottom:0;height:var(--dr-h);width:calc(var(--dr-h) * var(--cut-ratio));left:calc(var(--dr-eye) - var(--dr-h) * var(--cut-ratio) * var(--cut-eye));isolation:isolate}
.fv-mp .fv-dr::before{content:"";position:absolute;z-index:-1;left:44%;top:4%;width:44%;aspect-ratio:1;border-radius:50%;background:var(--c-fv-glow)}
.fv-mp .fv-dr .fv-cut{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:contain;transform:none;
  -webkit-mask-image:linear-gradient(to bottom,#000 78%,transparent 100%);mask-image:linear-gradient(to bottom,#000 78%,transparent 100%)}
.fv-mp .fv-name{left:57%;right:auto;top:auto;bottom:12%;max-width:none;white-space:nowrap;z-index:2}
@media (min-width:768px) and (max-width:1079px){ .fv-mp .fv-vis{--rec-w:46cqw} }
@media (min-width:1080px){
  .fv-mp{--fv-h:clamp(var(--fv-min),var(--h-vp),var(--fv-max));display:grid;align-items:center;min-height:var(--fv-h)}
  .fv-mp .fv-in{position:static;padding:var(--s6) 0}
  .fv-mp .fv-card{width:min(620px,58%);padding:0;background:none;box-shadow:none;backdrop-filter:none}
  .fv-mp .fv-card::before{display:none}
  .fv-mp .fv-vis{position:static;container-type:normal;margin-top:var(--s5)}
  .fv-mp .fv-rec{width:100%}
  .fv-mp .ba{grid-template-columns:1fr 1fr;gap:var(--s5)}
  .fv-mp .ba::after{transform:translate(-50%,-50%)}
  .fv-mp .badges{order:5;grid-template-columns:repeat(3,auto);gap:var(--s1) var(--s5);margin-top:var(--s4)}
  .fv-mp .btns{order:6}
  /* 院長：画面の右に、高さ 72%。目を画面の 79% に。左（アームと本体）は文字の後ろに入るので消す */
  .fv-mp .fv-dr{--dr-h:calc(var(--fv-h) * .72);left:calc(79% - var(--dr-h) * var(--cut-ratio) * var(--cut-eye))}
  .fv-mp .fv-dr .fv-cut{-webkit-mask-image:linear-gradient(to right,transparent 0 20%,#000 32%);mask-image:linear-gradient(to right,transparent 0 20%,#000 32%)}
  .fv-mp .fv-name{bottom:8%;left:56%}
  .fv-mp .fv-name small{display:block}
}
/* 大見出しが「言われた言葉」2行＋「そう言われてしまったあなたへ」で1行増えた分を詰める（2026-10-18）
   スマホ：予約ボタンを 390×664 に入れる／PC：1280×800 で駅の行まで1画面目に入れる */
@media (max-width:767px){
  .fv-mp .fv-in{padding-top:var(--s4)}
  .fv-mp h1{line-height:1.36}
  .fv-mp h1 .fv-h1-sub{margin-top:2px;line-height:1.45}
  .fv-mp .fv-vis{margin-top:var(--s3)}
}
@media (min-width:1080px){
  .fv-mp .fv-in{padding:var(--s5) 0}
  .fv-mp h1{line-height:1.26}
  .fv-mp h1 .fv-h1-sub{margin-top:var(--s2);line-height:1.4}
  .fv-mp .fv-vis{margin-top:var(--s4)}
}
/* 治療名と一文の右に「全国から来院多数」の丸い札（2026-10-18 生野先生「全国から来院多数もいれて」。見本 Mouth Peace の札） */
:root{ --badge-d:84px; --badge-d-pc:150px; }
.fv-mp .fv-sub{order:2;position:relative;padding-right:calc(var(--badge-d) + var(--s3))}
.fv-mp .fv-sub .kicker{margin-top:var(--s3)}
.fv-badge{position:absolute;right:0;top:50%;transform:translateY(-50%);display:grid;place-content:center;gap:0;width:var(--badge-d);aspect-ratio:1;margin:0;border-radius:50%;
  background:var(--c-card);border:var(--line-icon) solid var(--c-accent);box-shadow:0 0 0 4px var(--c-bg),0 0 0 5px var(--c-accent-soft),var(--shadow);text-align:center;line-height:1.3;color:var(--c-main)}
.fv-badge span{font-size:var(--fs-xs);color:var(--c-accent-deep);letter-spacing:.06em}
.fv-badge b{font-family:var(--f-mincho);font-weight:600;font-size:16px;letter-spacing:.04em}
/* 院長の名札：スマホは行の右下（切り抜きの外に出さない） */
.fv-mp .fv-vis .fv-name{left:auto;right:0;top:auto;bottom:var(--s3)}
@media (max-width:1079px){ .fv-mp .fv-vis .fv-name{max-width:calc(100% - var(--rec-w) - var(--s2));padding-inline:var(--s2)} .fv-mp .fv-vis .fv-name small{white-space:normal} } /* 肩書は .nb の切れ目で折り、治療後の画像にかけない */
@media (max-width:767px){ .fv-mp .fv-vis .fv-name small{display:none} } /* スマホは「院長 生野 智也」だけ。肩書2つ（受賞・若手の指導）は出さない（2026-10-22 生野先生「スマホ版はちょっと邪魔だから消しましょう」）。768px〜はそのまま */
/* スマホ：マイクロスコープのアームが治療前の画像の左にのぞかないよう、切り抜きの左も消す */
.fv-mp .fv-dr .fv-cut{-webkit-mask-image:linear-gradient(to right,transparent 0 18%,#000 30%),linear-gradient(to bottom,#000 78%,transparent 100%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent 0 18%,#000 30%),linear-gradient(to bottom,#000 78%,transparent 100%);mask-composite:intersect}
@media (min-width:1080px){
  .fv-mp .fv-sub{position:static;padding-right:0}
  .fv-badge{top:calc(var(--hd) + var(--s7));right:auto;transform:none;left:calc(max(var(--gut), (100% - var(--max)) / 2) + 680px);width:var(--badge-d-pc)}
  .fv-badge span{font-size:var(--fs-m)}
  .fv-badge b{font-size:26px}
  .fv-mp .fv-vis .fv-name{right:var(--s6);bottom:var(--s7)}
}
/* スマホ：札は一文の右下に小さく（治療名の行を折らず、予約ボタンを 390×664 に入れる） */
@media (max-width:1079px){
  :root{ --badge-d:72px; }
  .fv-mp .fv-sub{padding-right:0}
  .fv-mp .fv-sub .lead{padding-right:calc(var(--badge-d) + var(--s3))}
  .fv-badge{top:auto;bottom:0;transform:none}
  .fv-badge b{font-size:15px}
}
@media (max-width:379px){
  :root{ --badge-d:64px; }
  .fv-badge{bottom:-14px}           /* 360px：治療名の札にかからないよう、下の余白へ少し出す */
  .fv-badge span{font-size:var(--fs-xs)}
  .fv-badge b{font-size:14px}
}
/* 院長の後ろの金の丸はやめる（2026-10-18 生野先生「背景の◯がへん」） */
.fv-mp .fv-dr::before{display:none}
/* 札の右上に日本の点の地図（2026-10-18 生野先生「マウスピース矯正歯科みたいに地図マークいれて」） */
:root{ --c-map:#b08d57; }
.fv-badge{overflow:visible}
.fv-badge span,.fv-badge b{position:relative;z-index:1}
.fv-badge-map{position:absolute;z-index:0;width:78%;height:auto;aspect-ratio:1;right:-34%;top:-22%;pointer-events:none}
.fv-badge-map pattern circle{fill:var(--c-map)}
.fv-badge-map path{fill:url(#jpdot);opacity:.75}
@media (max-width:1079px){ .fv-badge-map{right:-22%;top:-26%;width:70%} }
/* 地図を濃く大きく（薄くて見えなかった） */
:root{ --c-map:#9a7843; }
.fv-badge-map{width:96%;right:-50%;top:-34%}
.fv-badge-map path{opacity:.9}
.fv-badge span,.fv-badge b{text-shadow:0 0 3px var(--c-card),0 0 6px var(--c-card)}
@media (max-width:1079px){ .fv-badge-map{width:84%;right:-26%;top:-36%} }

/* =====================================================================
   審査（全体のバランス係・2026-10-18）の直し：札を軽く、PC の文字を一段大きく、名札の白い余りをなくす
   ===================================================================== */
/* 大見出し1行目：帯の上は濃い字に（金の字＋淡い帯は 3.4:1 で弱い） */
.fv-mp h1 .fv-key{color:var(--c-main)}
/* 「全国から来院多数」の札：塗りと影をやめ、右上を開けた細い弧の線だけに。地図は淡く、文字の後ろ・右上の外へ */
:root{ --c-map:#d9c6a3; }
.fv-badge{background:none;border:0;box-shadow:none}
.fv-badge::before{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid var(--c-accent);border-top-color:transparent;transform:rotate(45deg)}
.fv-badge span,.fv-badge b{text-shadow:none}
.fv-badge-map{width:72%;right:-45%;top:-42%}
.fv-badge-map path{opacity:.7}
@media (max-width:1079px){
  :root{ --badge-d:66px; }
  .fv-badge-map{width:66%;right:-30%;top:-40%}
}
@media (max-width:379px){ .fv-badge-map{right:-12%;top:-30%;width:60%} }
/* 名札：中身の幅に合わせる（flex-wrap のせいで右に白い余りが出ていた） */
.fv-mp .fv-name figcaption{display:block}
.fv-mp .fv-name .role{margin-right:.5em}
@media (min-width:1080px){
  /* 治療名と一文を一段大きく、札はその右（治療後の写真の右上の角に少しかかる位置）へ */
  .fv-mp .kicker-name{font-size:var(--fs-xl)}
  .fv-mp .lead{font-size:var(--fs-l)}
  .fv-mp .ba-tag{font-size:var(--fs-s)}
  .fv-mp .fv-sub{position:relative}
  .fv-badge{left:auto;right:0;top:50%;transform:translateY(-28%)}
}
@media (max-width:1079px){ :root{ --badge-d:74px; } .fv-badge b{font-size:14px;letter-spacing:0} }
@media (max-width:379px){ :root{ --badge-d:68px; } .fv-badge b{font-size:13px} }

/* =====================================================================
   院長を縦長の立ち姿の切り抜きに（2026-10-18 生野先生が写真選び係の候補から「ロゴ前の笑顔（0H9A8733）」を選んだ）
   切り抜き 1066×2400（横÷縦 .444）。頭の上端＝上から 4%、顔の中心＝左から 52%（--st-*）
   スマホ：2枚の右の列に、高さ＝2枚の高さ（--dr-h）。頭を治療前の写真の上端にそろえ、腰（切り抜きの 76%）で切る
   PC：画面の右に、頭をヘッダーの下 40px、1画面目の下端で切る（切り抜きの 90%＝ももの上）。顔の中心を画面の 78% に
   ===================================================================== */
:root{ --st-ratio:.444; --st-top:.04; --st-face:.52; }
.fv-mp .fv-dr{overflow:hidden;--st-h:calc(var(--dr-h) / .72);
  top:0;bottom:auto;height:var(--dr-h);width:calc(var(--st-h) * var(--st-ratio));left:calc(76cqw - var(--st-h) * var(--st-ratio) * var(--st-face));
  -webkit-mask-image:linear-gradient(to bottom,#000 80%,transparent 100%);mask-image:linear-gradient(to bottom,#000 80%,transparent 100%)}
.fv-mp .fv-dr .fv-cut{position:absolute;inset:auto;left:0;top:calc(4px - var(--st-h) * var(--st-top));width:100%;height:var(--st-h);object-fit:contain;
  -webkit-mask-image:none;mask-image:none}
.fv-mp .fv-vis .fv-name{bottom:0}
@media (min-width:1080px){
  .fv-mp .fv-dr{--st-h:calc((var(--fv-h) - var(--hd) - 40px) / .86);
    top:calc(var(--hd) + 40px - var(--st-h) * var(--st-top));bottom:auto;height:var(--st-h);width:calc(var(--st-h) * var(--st-ratio));
    left:calc(78% - var(--st-h) * var(--st-ratio) * var(--st-face));-webkit-mask-image:none;mask-image:none}
  .fv-mp .fv-dr .fv-cut{top:0}
  .fv-mp .fv-vis .fv-name{right:auto;left:calc(78% - 300px);bottom:12%}
}

/* 院長を元の1画面目の写真（生野プロフ.jpg）の切り抜きに戻す（2026-10-18 生野先生「元のこの画像の切り抜きに戻して」）
   切り抜き 2033×2400（横÷縦 .847・胸から上）。頭の上端＝上から 4.6%、顔の中心＝左から 47%
   スマホ：2枚の右に、切り抜きの 90% まで（左の肩は2枚の後ろ）／PC：高さ＝1画面目の 72%、下端を1画面目の下にそろえ、顔の中心を画面の 80% に */
:root{ --st-ratio:.847; --st-top:.046; --st-face:.47; }
.fv-mp .fv-dr{--st-h:calc(var(--dr-h) / .9)}
@media (min-width:1080px){
  .fv-mp .fv-dr{--st-h:calc(var(--fv-h) * .72);top:auto;bottom:0;height:var(--st-h);left:calc(80% - var(--st-h) * var(--st-ratio) * var(--st-face))}
}

/* =====================================================================
   案B「要素を減らす」（2026-10-18 生野先生「1画面目の左側がつまりすぎててなんか苦しい感じ」）
   見本 Mouth Peace のように、1画面目（.fv-hero）は主役だけ：大見出し → 治療名と一文（右に札）→ 治療前・治療後 → 予約（主ボタン1つ）、右に院長
   強み3つ・費用の目安・電話・医院名と駅は、すぐ下の帯（.fv-band）へ。帯の先頭に費用の目安（限定解除の要件。費用・期間・リスクへの案内も残す）
   帯：スマホは 費用の目安 → 強み3つ → 電話 → 医院名と駅 の縦積み／768px〜：上の段に費用の目安、下の段に強みと電話／1080px〜：3つを横に並べる
   ===================================================================== */
:root{
  --fv-col-w:620px;                 /* PC の左の列の幅（これまでと同じ） */
  --fv-col-max:58%;                 /* 同じく、.wrap に対する上限 */
  --fv-gap-sub:var(--s4);           /* PC：大見出し → 治療名と一文 */
  --fv-gap-vis:var(--s5);           /* PC：治療名と一文 → 治療前・治療後 */
  --fv-gap-btn:var(--s6);           /* PC：治療前・治療後 → 予約 */
  --fv-btn-h-solo:60px;             /* PC：1画面目の予約ボタン（1つだけになったので一段大きく） */
  --c-band-bg:var(--c-card);        /* 帯の地（白。1画面目の生成りと分ける） */
  --c-band-price-bg:var(--c-bg);    /* 費用の目安の面（生成り） */
  --band-price-top:3px;             /* 費用の目安の上の金の線（帯の中でいちばん目立たせる） */
  --band-pad:var(--s5);             /* 帯の上下の余白（スマホ） */
  --band-pad-pc:var(--s6);          /* 帯の上下の余白（768px〜） */
}
@media (min-width:1280px){
  :root{
    --fv-col-w:660px;               /* 1280px〜：空いた分で治療前・治療後を少し大きく（院長の顔にはかからない幅） */
    --fv-col-max:62%;
    --fv-max:900px;                 /* 1画面目の高さの上限 860→900（1440×900 で帯の端だけがのぞかないように） */
  }
}
@media (min-width:1280px) and (min-height:820px){ :root{ --fs-h1:50px; } }  /* 列が空いたので大見出しを 46→50px に戻す */
/* 1画面目：地のグラデーションは .fv-hero だけに。院長の切り抜き（PC）は .fv-hero の下端にそろえる */
.fv-mp{background:var(--c-bg)}
.fv-hero{position:relative;background:var(--g-fv-mp);overflow:hidden}

/* 帯 */
.fv-band{background:var(--c-band-bg);border-top:var(--line) solid var(--c-line);border-bottom:var(--line) solid var(--c-line);padding:var(--band-pad) 0 calc(var(--band-pad) + var(--s2))}
.fv-band-in{display:grid;gap:var(--s5)}
.fv-band .fv-price{order:1;margin:0;padding:var(--s3) var(--s4) var(--s4);gap:var(--s1) var(--s4);background:var(--c-band-price-bg);border:var(--line) solid var(--c-accent-soft);border-top:var(--band-price-top) solid var(--c-accent);font-size:var(--fs-s);line-height:1.7}
.fv-band .fv-price-note{flex-basis:100%;font-size:var(--fs-s)}
.fv-band .fv-price a{font-weight:500}
.fv-band .badges{order:2;margin:0;grid-template-columns:1fr;gap:var(--s1)}
.fv-band-cta{order:3;display:grid;gap:var(--s2)}
.fv-band .btns{margin:0;grid-template-columns:1fr;justify-content:stretch}
.fv-band .btns .btn{width:100%}
.fv-band .fv-access{display:grid;gap:0;margin:0;justify-items:center;text-align:center}
.fv-band .fv-access .sep{display:none}
@media (min-width:768px){
  .fv-band{padding:var(--band-pad-pc) 0}
  .fv-band-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s5) var(--s6);align-items:center}
  .fv-band .fv-price{grid-column:1 / -1;font-size:var(--fs-m)}
  .fv-band .fv-price-note{font-size:var(--fs-m)}
  .fv-band .btns{grid-template-columns:1fr}
}
@media (min-width:1080px){
  /* 1画面目は .fv-hero が画面の高さを持つ（帯はその下） */
  .fv-mp{display:block;min-height:0}
  .fv-hero{display:grid;align-items:center;min-height:calc(var(--fv-h) - var(--hd))}
  .fv-mp .fv-in{padding:var(--s6) 0}
  .fv-mp .fv-card{width:min(var(--fv-col-w),var(--fv-col-max))}
  .fv-mp .fv-sub .kicker{margin-top:var(--fv-gap-sub)}
  .fv-mp .fv-vis{margin-top:var(--fv-gap-vis)}
  .fv-hero .btns{margin-top:var(--fv-gap-btn)}
  .fv-hero .btns .btn{min-height:var(--fv-btn-h-solo);padding-inline:var(--s6);font-size:var(--fs-l)}
  /* 院長の名札：左の列（2枚・予約）から離す */
  .fv-mp .fv-vis .fv-name{left:max(calc(78% - 300px),calc(max(var(--gut),(100% - var(--max)) / 2) + var(--fv-col-w) + var(--s6)))}
  /* 帯：費用の目安（左・いちばん広い）｜強み3つ｜電話と医院名・駅 を横に。あいだは細い線 */
  .fv-band-in{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) auto;gap:0;align-items:center}
  .fv-band .fv-price{grid-column:auto;padding:var(--s4) var(--s5)}
  .fv-band .badges{padding-inline:var(--s6);gap:var(--s2)}
  .fv-band .badge{flex-direction:column;align-items:flex-start;line-height:1.5}  /* 3つとも「小さい字の上の行＋明朝の下の行」にそろえる（1つだけ1行になっていた） */
  .fv-band-cta{padding-left:var(--s6);border-left:var(--line) solid var(--c-line)}
  .fv-band .btns .btn{min-height:var(--btn-h-pc);padding-inline:var(--s5)}
}

/* =====================================================================
   案B に案A の札の位置を合わせる（2026-10-18 生野先生が「案B＋案A の札の位置」を選んだ）
   スマホ：大見出しを一段小さくして右に空きを作り、「全国から来院多数」の札を大見出しの右下（「もう戻らない」」と「あなたへ」の右）へ。一文は1行に
   PC：札は治療名と一文の右に（治療後の写真にかけない）
   ===================================================================== */
:root{
  --a-gap-sp:22px;                         /* スマホ：まとまりの間 */
  --a-fs-h1-sp:clamp(24px,6.6vw,26px);     /* スマホ：大見出し（390px で 26px。1行目の帯の右に 60px 残る） */
  --a-fs-h1-sub-sp:clamp(15px,4.4vw,17px); /* スマホ：「そう言われてしまったあなたへ」 */
  --a-badge-pc:140px;                      /* PC：札の直径 */
}
@media (max-width:767px){
  :root{ --fs-h1:var(--a-fs-h1-sp); }
  .fv-mp .fv-in{padding-top:var(--s5)}
  .fv-mp h1{line-height:1.4}
  .fv-mp h1 .fv-h1-sub{margin-top:var(--s1);font-size:var(--a-fs-h1-sub-sp);letter-spacing:.06em;line-height:1.55}
  .fv-mp .fv-sub .kicker{margin-top:var(--a-gap-sp)}
  .fv-mp .fv-sub .lead{margin-top:var(--s2);padding-right:0;letter-spacing:.02em}
  .fv-badge{top:auto;bottom:calc(100% - var(--s3));right:0}
  .fv-badge-map{right:-18%;top:-38%}
  .fv-mp .fv-vis{margin-top:var(--a-gap-sp)}
  .fv-hero .btns{margin-top:var(--a-gap-sp)}
}
@media (min-width:1080px){
  .fv-badge{top:auto;bottom:calc(var(--s2) * -1);right:calc(var(--s4) * -1);transform:none;width:var(--a-badge-pc)}
  .fv-badge span{font-size:var(--fs-s)}
  .fv-badge b{font-size:var(--fs-xl)}
}

/* =====================================================================
   3 歯肉退縮とは：手描きの図を、健康な歯ぐきと歯肉退縮の2枚組のイラストに（2026-10-18 生野先生「画像生成してるところがかなり微妙」「ここも修正」）
   画像は create-dental-picture で作った（tools/imggen/harness.json の illust_healthy・illust_recession）。◯はページの側で重ねる
   ===================================================================== */
#recession .rec-intro{grid-template-columns:1fr;max-width:720px}
#recession .rec-intro .text{margin-inline:auto}
.fig-gum2{padding:var(--s3)}
.gum2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
.gum2 img{display:block;width:100%;height:auto;aspect-ratio:4/3}
.gum2-ph{position:relative}
.gum2-ring{position:absolute;left:50.3%;top:77%;width:28%;aspect-ratio:1/.85;transform:translate(-50%,-50%);border:3px solid var(--c-ring);border-radius:50%;filter:var(--shadow-ring)}
@media (max-width:767px){ .gum2-ring{border-width:2px} }
.fig-gum2 figcaption{text-align:center}

/* =====================================================================
   参考：スター歯科のインプラントLP の流れに組み替え（2026-10-18 夜 生野先生）
   ヘッダーの医院名・固定バー・認定証と修了証・院長紹介・そのままにすると・症例紹介・セカンドオピニオン・お支払いの例2つ
   ===================================================================== */
/* ヘッダー：左上は星のマーク＋医院名の文字。右上の電話は PC だけ（スマホ・タブレットは WEB予約だけ） */
.hd-logo-tx{display:flex;align-items:center;gap:var(--s2);text-decoration:none;color:var(--c-main);min-width:0}
.hd-logo-tx img{height:34px;width:34px;flex:none}
.hd-name{display:grid;line-height:1.25;min-width:0}
.hd-name small{font-size:10px;color:var(--c-mute);letter-spacing:.04em;white-space:nowrap}
.hd-name b{font-family:var(--f-mincho);font-weight:600;font-size:16px;letter-spacing:.06em;white-space:nowrap}
@media (min-width:768px){ .hd-logo-tx img{height:40px;width:40px} .hd-name small{font-size:11px} .hd-name b{font-size:19px} }
@media (max-width:1079px){ .hd-tel{display:none} }
@media (max-width:359px){ .hd-name b{font-size:14px;letter-spacing:.02em} .hd-logo-tx img{height:28px;width:28px} }

/* 固定バー：2行（小さい字＋大きい字）と丸いアイコン。スクロールしてもずっと出しておく */
.fixbar.off{transform:none}
.fixbar a{justify-content:center;gap:var(--s2);padding:0 var(--s2) env(safe-area-inset-bottom,0px)} /* 下は iPhone の safe area 分（base.css と同じ。2026-10-19） */
.fb-ic{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;flex:none;font-size:15px;line-height:1}
.fixbar .tel .fb-ic{background:var(--c-on-main);color:var(--c-main)}
.fixbar .rsv .fb-ic{background:rgba(255,255,255,.92)}
.fb-ic-play::before{content:"";margin-left:3px;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent var(--c-gold-3)}
.fb-tx{display:grid;text-align:left;line-height:1.25}
.fb-tx small{font-size:10px;font-weight:500;letter-spacing:.04em;opacity:.92}
.fb-tx b{font-family:var(--f-mincho);font-weight:600;font-size:16px;letter-spacing:.04em;font-variant-numeric:lining-nums}
@media (max-width:359px){ .fb-tx b{font-size:14px} .fb-ic{width:24px;height:24px} }

/* 認定証・修了証：上に根面被覆に関わる2つ、下に全部をタイルで並べる */
.cert-feat{display:grid;gap:var(--s3);max-width:880px;margin-inline:auto}
@media (min-width:768px){ .cert-feat{grid-template-columns:1fr 1fr;gap:var(--s4)} }
.cert-org{display:grid;grid-template-columns:auto 1fr;gap:var(--s3);align-items:center;padding:var(--s4);background:var(--c-card);border:1px solid var(--c-accent-soft);box-shadow:var(--shadow)}
.cert-org-mark{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--g-gold);color:#fff;font-family:var(--f-en);font-size:15px;letter-spacing:.06em;text-shadow:var(--text-shadow-gold)}
.cert-org h3{font-family:var(--f-mincho);font-weight:600;font-size:var(--fs-l);line-height:1.45}
.cert-org h3 small{display:block;font-family:var(--f-en);font-weight:500;font-size:var(--fs-xs);color:var(--c-accent-deep);letter-spacing:.04em}
.cert-org p:not(.cert-org-mark){margin-top:var(--s1);font-size:var(--fs-s);line-height:1.7}
.cert-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3);max-width:880px;margin:var(--s5) auto 0}
@media (min-width:768px){ .cert-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4)} }
.cert-grid li{display:grid;gap:var(--s1);align-content:start}
.cert-grid img,.cert-grid .ph-box{width:100%;aspect-ratio:1/1;object-fit:contain;padding:var(--s2);background:var(--c-card);border:1px solid var(--c-line);box-shadow:var(--shadow)}
.cert-grid .ph-box{display:grid;place-items:center;font-size:var(--fs-xs);line-height:1.5;text-align:center}
.cert-grid span{font-size:var(--fs-xs);text-align:center;color:var(--c-main);line-height:1.5}

/* 院長紹介：写真と名前・ひと言・メッセージ → 資格・受賞・指導・社会貢献の4つの箱 → 略歴 */
.dr2{display:grid;gap:var(--s5);max-width:960px;margin-inline:auto}
@media (min-width:768px){ .dr2{grid-template-columns:5fr 7fr;align-items:center;gap:var(--s6)} }
.dr2-ph img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:72% 40%;box-shadow:var(--shadow)}
@media (max-width:767px){ .dr2-ph img{aspect-ratio:4/3;object-position:70% 30%} }
.dr2-body .role{font-size:var(--fs-s);color:var(--c-accent-deep);font-weight:500}
.dr2-body .name{font-family:var(--f-mincho);font-weight:600;font-size:var(--fs-2xl);color:var(--c-main);letter-spacing:.12em;line-height:1.3}
.dr2-body .name small{display:block;font-family:var(--f-en);font-weight:500;font-size:var(--fs-s);color:var(--c-mute);letter-spacing:.1em}
.dr2-catch{margin:var(--s4) 0 var(--s3);padding-left:var(--s3);border-left:3px solid var(--c-accent);font-family:var(--f-mincho);font-weight:600;font-size:var(--fs-xl);line-height:1.5;color:var(--c-main)}
.dr2-lists{display:grid;gap:var(--s3);max-width:960px;margin:var(--s6) auto 0}
@media (min-width:768px){ .dr2-lists{grid-template-columns:1fr 1fr;gap:var(--s4)} }
.dr2-box{background:var(--c-card);border:1px solid var(--c-line);padding:0 0 var(--s4)}
.dr2-box h3{padding:var(--s2) var(--s4);background:var(--c-main);color:var(--c-on-main);font-family:var(--f-mincho);font-weight:600;font-size:var(--fs-m);letter-spacing:.08em}
.dr2-box>ul,.dr2-box>dl,.dr2-box>p,.dr2-intl-in{margin:var(--s3) var(--s4) 0}
.dr2-li li{position:relative;padding-left:1.3em;font-size:var(--fs-s);line-height:1.7}
.dr2-li li+li{margin-top:var(--s2)}
.dr2-li li::before{content:"";position:absolute;left:.15em;top:.62em;width:.55em;height:.55em;background:var(--c-accent);transform:rotate(45deg)}
.dr2-dl{display:grid;grid-template-columns:auto 1fr;gap:var(--s2) var(--s3);font-size:var(--fs-s);line-height:1.7}
.dr2-dl dt{font-family:var(--f-en);font-size:var(--fs-m);color:var(--c-accent-deep);font-variant-numeric:lining-nums;line-height:1.5}
.dr2-dl dd{margin:0}
.dr2-intl-in{display:grid;gap:var(--s3);font-size:var(--fs-s);line-height:1.7}
.dr2-intl-in .ph-box{aspect-ratio:3/2;font-size:var(--fs-xs)}
.dr2-hist{max-width:960px;margin:var(--s4) auto 0}
.dr2-hist .timeline{margin:var(--s3) var(--s4) 0;border-top:0;padding-top:0}
.dr2-count{font-size:var(--fs-s);margin-top:var(--s3)!important}

/* そのままにすると起こりうること：イラストつきの5枚（スマホは絵と文を横に、PC は 3＋2） */
.risks5{display:grid;gap:var(--s3);counter-reset:rk}
.risks5 li{display:grid;grid-template-columns:38% 1fr;gap:var(--s3);align-items:center;background:var(--c-card);border:1px solid var(--c-line);border-top:2px solid var(--c-main);padding:var(--s3)}
.risks5 img{width:100%;aspect-ratio:4/3;object-fit:cover}
.risks5 h3{font-family:var(--f-mincho);font-weight:600;font-size:var(--fs-l);color:var(--c-main);line-height:1.4}
.risks5 p{margin-top:var(--s1);font-size:var(--fs-s);line-height:1.75}
@media (min-width:768px){ .risks5{grid-template-columns:repeat(2,1fr);gap:var(--s4)} .risks5 li{grid-template-columns:1fr;align-items:start;padding:var(--s4)} }
@media (min-width:1080px){
  .risks5{grid-template-columns:repeat(6,1fr)}
  .risks5 li{grid-column:span 2}
  .risks5 li:nth-child(4){grid-column:2/4}
  .risks5 li:nth-child(5){grid-column:4/6}
}

/* 症例紹介：CASE 01・02・03 を縦に並べる */
.cases-list{max-width:880px;margin-inline:auto}
/* 症例の写真は歯列の正面の横長（約2.6:1）。スマホで2枚並べると細くなるので、治療前の下に治療後を積む（2026-10-22） */
@media (max-width:767px){ .cases-list .case-ph{grid-template-columns:1fr;gap:var(--s3)} }
/* 症例の4点：小さな札の列（2026-10-22 生野先生の見本＝インプラントの症例の「年齢｜性別｜治療期間｜治療回数｜治療費」。灰と水色の札を、このサイトの淡い金と生成りに）。
   スマホは4つを1行・治療費は下の段に横いっぱい、768px〜は5つを1行。治療内容とリスクは札の下に小さな字で */
.case-sum{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:var(--s3);text-align:center}
.case-sum>div{display:grid;grid-template-rows:auto 1fr;gap:4px}
.case-sum-fee{grid-column:1/-1}
.case-sum dt{padding:2px 4px;border-radius:6px;background:var(--c-accent-soft);color:var(--c-main);font-size:var(--fs-xs);font-weight:700;line-height:1.6;letter-spacing:.04em}
.case-sum dd{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;align-content:center;margin:0;padding:4px;border-radius:6px;background:var(--c-bg-soft);color:var(--c-main);font-size:var(--fs-s);font-weight:700;line-height:1.4;font-variant-numeric:lining-nums;overflow-wrap:anywhere}
.case-sum-tax{font-size:var(--fs-xs)}
.case-sum dd small{flex-basis:100%;font-size:var(--fs-xs);font-weight:500;color:var(--c-mute)}
.case-note{margin-top:var(--s2);font-size:var(--fs-xs);line-height:1.7;color:var(--c-mute)}
.case-sum+.case-note{margin-top:var(--s3)}
@media (min-width:768px){ .case-sum{grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,1.7fr)} .case-sum-fee{grid-column:auto} }
.case h3 .case-no{display:block;font-family:var(--f-en);font-weight:500;font-size:var(--fs-s);color:var(--c-accent-deep);letter-spacing:.14em;font-variant-numeric:lining-nums}
/* 症例の章は見出しを出さない（2026-10-22 生野先生「見たら症例とわかる。少ないスクロールでここまで」）。1画面目の帯から近く見えるよう、上下の余白も詰める */
#case.sec{padding:var(--s6) 0}
@media (min-width:768px){ #case.sec{padding:var(--s7) 0} }

/* セカンドオピニオン：濃い地の帯 */
.so{padding:var(--s7) 0;background:var(--c-main);color:var(--c-on-main);text-align:center}
.so-en{font-family:var(--f-en);font-style:italic;font-size:var(--fs-l);color:var(--c-gold-2);letter-spacing:.08em}
.so-hd{margin-top:var(--s2);font-family:var(--f-mincho);font-weight:600;font-size:var(--fs-xl);line-height:1.6;color:var(--c-on-main)}
.so .btns{justify-content:center;margin-top:var(--s5)}
.so .btn-tel{background:transparent;border:1px solid var(--c-on-main)}

/* お支払いの例：2枚を並べる */
.pcards-2{max-width:880px}
@media (min-width:768px){ .pcards-2{grid-template-columns:1fr 1fr} }
.pcard-loan-rows dd small{display:block;font-size:var(--fs-xs);color:var(--c-mute)}
.pcard-calc{margin-top:var(--s3);font-size:var(--fs-xs);line-height:1.6;color:var(--c-ink)}
#price .pcard-loan{max-width:880px;margin:var(--s3) auto 0;font-size:var(--fs-s);color:var(--c-ink)}
/* 院長紹介の箱：中の長い語で列が広がらないように（スマホで横にはみ出した。2026-10-18） */
.dr2,.dr2-lists{grid-template-columns:minmax(0,1fr)}
@media (min-width:768px){ .dr2{grid-template-columns:minmax(0,5fr) minmax(0,7fr)} .dr2-lists{grid-template-columns:repeat(2,minmax(0,1fr))} }
.dr2-box,.dr2-intl-in>*{min-width:0}
.dr2-box .ph-box{overflow-wrap:anywhere}
/* 固定バー：電話番号を1行に（2026-10-18。1fr 1.4fr だと番号が折れた） */
.fixbar{grid-template-columns:1fr 1fr}
.fb-tx b{white-space:nowrap}
@media (max-width:389px){ .fb-tx b{font-size:15px;letter-spacing:.02em} .fixbar a{gap:6px} }
/* 認定証の2枚：スマホは丸を小さく */
@media (max-width:767px){ .cert-org{gap:var(--s3);padding:var(--s3)} .cert-org-mark{width:52px;height:52px;font-size:13px} .cert-org h3{font-size:var(--fs-m)} }
/* 小さい行も 12px 以上に（validate の決まり） */
.hd-name small{font-size:12px;letter-spacing:0}
.fb-tx small{font-size:12px;letter-spacing:0}
@media (max-width:359px){ .hd-name small{font-size:12px;letter-spacing:-.02em} }
/* PC：そのままにすると…のカードは絵と文を上にそろえる（行の高さに合わせて間が開かないように） */
.risks5 li{align-content:start}
/* PC：院長紹介の「指導」と「社会貢献」は横いっぱいに（隣の箱の写真の枠で空白ができたため）。社会貢献は文と写真を横に */
@media (min-width:768px){
  .dr2-lists>.dr2-box:nth-child(3),.dr2-intl{grid-column:1/-1}
  .dr2-intl-in{grid-template-columns:minmax(0,1fr) minmax(0,360px);align-items:center;gap:var(--s5)}
}

/* そのままにすると起こりうること：1枚の絵のまわりに5つ（2026-10-18 夜 先生「1個ずつ画像はいらない。一つの絵からバランスよく」）
   スマホ：絵 → 5つを番号つきで積む／タブレット：絵 → 2列／PC：左に2つ・中央に絵・右に2つ・絵の下に1つ */
.risk-map{display:grid;gap:var(--s4);max-width:1000px;margin-inline:auto;counter-reset:rk}
.risk-map-ph img{display:block;width:100%;max-width:520px;margin-inline:auto;aspect-ratio:4/3;object-fit:cover;background:var(--c-card);border:1px solid var(--c-line);box-shadow:var(--shadow)}
.risk-map-li{display:grid;gap:var(--s2)}
.risk-map-li li{position:relative;counter-increment:rk;padding:var(--s3) var(--s4) var(--s3) calc(var(--s4) + 2.2em);background:var(--c-card);border:1px solid var(--c-line)}
.risk-map-li li::before{content:counter(rk);position:absolute;left:var(--s3);top:var(--s3);display:grid;place-items:center;width:1.8em;height:1.8em;border-radius:50%;background:var(--g-gold);color:#fff;font-family:var(--f-en);font-size:var(--fs-m);line-height:1;font-variant-numeric:lining-nums;text-shadow:var(--text-shadow-gold)}
.risk-map-li h3{font-family:var(--f-mincho);font-weight:600;font-size:var(--fs-l);color:var(--c-main);line-height:1.5}
.risk-map-li p{margin-top:2px;font-size:var(--fs-s);line-height:1.75}
@media (min-width:768px) and (max-width:1079px){ .risk-map-li{grid-template-columns:1fr 1fr} .risk-map-li .rk5{grid-column:1/-1} }
@media (min-width:1080px){
  .risk-map{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) minmax(0,1fr);grid-template-areas:"r1 ph r3" "r2 ph r4" ". r5 .";gap:var(--s4) var(--s5);align-items:center}
  .risk-map-li{display:contents}
  .risk-map-ph{grid-area:ph}
  .risk-map-li .rk1{grid-area:r1}.risk-map-li .rk2{grid-area:r2}.risk-map-li .rk3{grid-area:r3}.risk-map-li .rk4{grid-area:r4}.risk-map-li .rk5{grid-area:r5}
  .risk-map-ph img{max-width:none}
}
/* 審査（2026-10-18 夜：全体のバランス係・患者目線の中身係）の直し */
/* 認定証のタイル：スマホは横に流す1列（章を短く）。PC は 4＋3 で2段目を中央に */
.cert-grid li span small{display:block;color:var(--c-mute)}
@media (max-width:767px){
  .cert-grid{display:flex;gap:var(--s3);overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--gut) * -1);padding:0 var(--gut) var(--s2);-webkit-overflow-scrolling:touch}
  .cert-grid li{flex:0 0 42%;scroll-snap-align:start}
}
@media (min-width:768px){
  .cert-grid{display:flex;flex-wrap:wrap;justify-content:center}
  .cert-grid li{flex:0 0 calc((100% - var(--s4) * 3) / 4)}
}
.cert-hint{margin-top:var(--s1);font-size:var(--fs-xs);color:var(--c-accent-deep);text-align:right}
@media (min-width:768px){ .cert-hint{display:none} }
/* 院長紹介：指導・海外・略歴はスマホでは開いて読む（PC は開いたまま。site.js が data-open-pc を開く） */
.dr2-more{max-width:960px;margin:var(--s3) auto 0}
.dr2-more>summary{display:flex;align-items:center;justify-content:center;gap:var(--s2);padding:var(--s3);border:1px solid var(--c-accent);color:var(--c-accent-deep);font-weight:700;font-size:var(--fs-s);cursor:pointer;list-style:none;background:var(--c-card)}
.dr2-more>summary::-webkit-details-marker{display:none}
.dr2-more>summary::after{content:"";width:.5em;height:.5em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px)}
.dr2-more[open]>summary::after{transform:rotate(-135deg) translateY(-2px)}
@media (min-width:900px){ .dr2-more>summary{display:none} .dr2-more{margin-top:0} }
.dr2-lists-more{margin-top:var(--s3)}
@media (min-width:900px){ .dr2-lists-more{margin-top:var(--s4)} }
/* そのままにすると → 根面被覆へのつなぎの一文 */
.risk-next{margin-top:var(--s2);text-align:center;font-size:var(--fs-s);color:var(--c-ink)}
/* お支払いの例：「現金価格」は小さく添える（「費用（税込）」を1語に） */
.pcard-cash{display:block;font-size:var(--fs-xs);font-weight:500;color:var(--c-mute)}
/* 固定バー：右も左もゴシックの太字（明朝で字の間が広く右端が詰まっていた） */
.fb-tx b{font-family:var(--f-ja);font-weight:700;letter-spacing:.02em}
/* 認定証の横の列：タイルの高さをそろえ、最初のタイルを余白の内側から始める */
@media (max-width:767px){
  .cert-grid{align-items:start;scroll-padding-inline:var(--gut)}
  .cert-grid li{min-width:0}
  .cert-grid .ph-box{overflow-wrap:anywhere;padding:var(--s3)}
}

/* =====================================================================
   先生の直し（2026-10-18 夜・3）：地図を大きく／PC の追従の箱／認定証をアップで羅列／院長紹介を3つの箱に／
   5章（歯肉退縮と原因）と6章（そのままにすると）の見た目を分ける／根面被覆とはに術後の2枚／セカンドオピニオンをインプラントLPの型に／流れの写真
   ===================================================================== */
/* 1画面目の札の地図をひとまわり大きく・少し濃く（生野先生「地図の絵が小さすぎて見にくい」） */
:root{ --c-map:#c9ae82; }
.fv-badge-map{width:92%;right:-56%;top:-52%}
.fv-badge-map path{opacity:.85}
@media (max-width:1079px){ .fv-badge-map{width:88%;right:-40%;top:-52%} }
@media (max-width:379px){ .fv-badge-map{width:78%;right:-20%;top:-40%} }

/* PC の追従の箱（インプラントLPの .follow と同じ位置・大きさ。1080px 未満は固定バーがあるので出さない） */
.follow{display:none}
@media (min-width:1080px){
  .follow{display:grid;position:fixed;right:20px;bottom:24px;z-index:60;width:240px;gap:var(--s2);padding:var(--s4);text-align:center;
    background:var(--c-bg);border:1px solid var(--c-accent);outline:1px solid var(--c-accent-soft);outline-offset:-6px;box-shadow:0 14px 32px rgba(46,36,28,.25);
    opacity:0;transform:translateY(20px);pointer-events:none;transition:opacity .35s,transform .35s}
  .follow.show{opacity:1;transform:none;pointer-events:auto}
  .follow-ttl{font-family:var(--f-mincho);font-weight:600;font-size:15px;letter-spacing:.06em;color:var(--c-accent-deep)}
  .follow-sub{font-size:var(--fs-xs);line-height:1.6;color:var(--c-mute)}
  .follow-web{display:block;padding:12px 8px;border-radius:var(--r);background:var(--g-gold);color:var(--c-on-gold);font-weight:700;font-size:var(--fs-m);letter-spacing:.06em;text-shadow:var(--text-shadow-gold);box-shadow:var(--shadow-btn);text-decoration:none}
  .follow-tel{display:block;padding:6px;border:1px solid var(--c-main);border-radius:var(--r);font-family:var(--f-ja);font-weight:700;font-size:19px;line-height:1.3;color:var(--c-main);text-decoration:none;font-variant-numeric:lining-nums}
  .follow-tel small{display:block;font-weight:500;font-size:var(--fs-xs);color:var(--c-mute)}
}
@media (prefers-reduced-motion:reduce){ .follow{transition:none} }

/* 認定証のタイル：名前を消し、賞状そのものを大きく。白い台紙＋金の細枠。縦長（.tall）は2段分（見本：インプラントLP） */
.cert-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:dense;gap:var(--s3);max-width:960px;margin:var(--s6) auto 0;padding:0;overflow:visible;scroll-snap-type:none}
.cert-grid2 li{display:block;flex:none;min-width:0;padding:var(--s2);background:var(--c-card);border:1px solid var(--c-accent-soft);box-shadow:var(--shadow)}
.cert-grid2 li:not(.tall){aspect-ratio:7/5}
.cert-grid2 li.tall{grid-row:span 2}
.cert-grid2 img,.cert-grid2 .ph-box{display:block;width:100%;height:100%;aspect-ratio:auto;object-fit:contain;padding:0;border:0;box-shadow:none;background:none}
.cert-grid2 .ph-box{display:grid;place-items:center;padding:var(--s3);background:var(--c-bg-soft);font-size:var(--fs-xs);line-height:1.5;text-align:center;overflow-wrap:anywhere}
@media (min-width:768px){ .cert-grid2{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4);justify-content:normal} .cert-grid2 li{padding:var(--s3)} }

/* 院長紹介：箱は3つ（所属・資格／若手の指導／海外での技術支援）。PC は横に3つ、海外の写真は文の下 */
.dr2-lists.dr2-lists-3{margin-top:var(--s6)}
.dr2-lists.dr2-lists-3>.dr2-box,.dr2-lists.dr2-lists-3 .dr2-intl{grid-column:auto}
.dr2-lists.dr2-lists-3 .dr2-intl-in{grid-template-columns:1fr;align-items:start;gap:var(--s3)}
@media (min-width:768px){ .dr2-lists.dr2-lists-3{grid-template-columns:repeat(2,minmax(0,1fr))} .dr2-lists.dr2-lists-3 .dr2-intl{grid-column:1/-1} .dr2-lists.dr2-lists-3 .dr2-intl-in{grid-template-columns:minmax(0,1fr) minmax(0,360px);align-items:center;gap:var(--s5)} }
@media (min-width:1080px){ .dr2-lists.dr2-lists-3{grid-template-columns:repeat(3,minmax(0,1fr))} .dr2-lists.dr2-lists-3 .dr2-intl{grid-column:auto} .dr2-lists.dr2-lists-3 .dr2-intl-in{grid-template-columns:1fr;align-items:start;gap:var(--s3)} }

/* 5章：2枚のイラストを1枚の白い台紙に（英字の小見出し・金の◯・あいだに→） */
.gum-plate{position:relative;max-width:760px;margin:0 auto;padding:var(--s4);background:var(--c-card);border:1px solid var(--c-accent-soft);box-shadow:var(--shadow)}
.gum-plate::before{content:"";position:absolute;inset:5px;border:1px solid var(--c-line);pointer-events:none}
.gum-plate-in{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.gum-plate-in::after{content:"";position:absolute;left:50%;top:58%;width:26px;height:26px;transform:translate(-50%,-50%);border-radius:50%;background:var(--c-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l6 6-6 6' fill='none' stroke='%237d5f30' stroke-width='2.5'/%3E%3C/svg%3E") center/16px no-repeat;box-shadow:var(--shadow)}
.gum-lbl{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 var(--s2);margin-bottom:var(--s2);font-family:var(--f-mincho);font-weight:600;font-size:var(--fs-s);line-height:1.4;color:var(--c-main)}
.gum-lbl .en{font-family:var(--f-en);font-style:italic;font-weight:500;font-size:var(--fs-s);letter-spacing:.08em;color:var(--c-accent-deep)}
.gum-ph{position:relative;overflow:hidden}
.gum-ph img{display:block;width:100%;height:auto;aspect-ratio:4/3}
.gum-ring{position:absolute;left:50.3%;top:77%;width:28%;aspect-ratio:1/.85;transform:translate(-50%,-50%);border:2px solid var(--c-accent);border-radius:50%;box-shadow:0 0 0 2px rgba(255,255,255,.8),inset 0 0 0 2px rgba(255,255,255,.8)}
.gum-plate figcaption{margin-top:var(--s3);text-align:center;font-size:var(--fs-s);line-height:1.7}
.rec-text{max-width:var(--max-text);margin:var(--s6) auto 0}
@media (min-width:768px){ .gum-plate{padding:var(--s5)} .gum-plate-in{gap:var(--s5)} .gum-lbl{font-size:var(--fs-m)} }
/* 5章：原因5つは箱をやめ、金のイタリックの番号と細い線だけ（スマホ：縦の一覧／PC：5列） */
.causes2{display:grid;margin-top:var(--s7);border-top:1px solid var(--c-line)}
.causes2 li{display:grid;grid-template-columns:auto 1fr;column-gap:var(--s4);align-items:start;padding:var(--s4) 0;border-bottom:1px solid var(--c-line)}
.causes2 .cn{padding-top:3px;font-family:var(--f-en);font-style:italic;font-size:32px;line-height:1;letter-spacing:.02em;color:var(--c-accent);font-variant-numeric:lining-nums}
.causes2 h3{font-family:var(--f-mincho);font-weight:600;font-size:var(--fs-l);line-height:1.5;color:var(--c-main)}
.causes2 p{grid-column:2;margin-top:var(--s1);font-size:var(--fs-s);line-height:1.8}
@media (min-width:1080px){
  .causes2{grid-template-columns:repeat(5,minmax(0,1fr));border-bottom:1px solid var(--c-line)}
  .causes2 li{display:block;padding:var(--s5) var(--s4);border-bottom:0;border-left:1px solid var(--c-line)}
  .causes2 li:first-child{border-left:0;padding-left:0}
  .causes2 li:last-child{padding-right:0}
  .causes2 .cn{display:block;padding:0;font-size:44px}
  .causes2 .cn::after{content:"";display:block;width:24px;height:1px;margin:var(--s3) 0;background:var(--c-accent)}
  .causes2 h3{min-height:calc(var(--fs-l) * 1.5 * 2)}
  .causes2 p{margin-top:var(--s2)}
}

/* 6章：濃い茶の地。絵は金の輪の丸い窓、5つは金のイタリックの番号（PC は絵の左右に2つずつ・下に1つ） */
.risk-dark{background:var(--c-main) radial-gradient(ellipse at 50% 40%,rgba(176,141,87,.22),rgba(176,141,87,0) 58%);color:var(--c-on-main)}
.risk-dark .sec-hd h2{color:var(--c-on-main)}
.risk-dark .sec-hd .en{color:var(--c-gold-1)}
.risk-hub{display:grid;gap:var(--s5);max-width:1000px;margin-inline:auto}
.risk-hub-ph{margin:0;text-align:center}
.risk-hub-ph img{display:block;width:min(64vw,280px);height:auto;aspect-ratio:1;object-fit:cover;object-position:50% 56%;margin-inline:auto;border-radius:50%;box-shadow:0 0 0 6px var(--c-main),0 0 0 7px var(--c-accent),0 18px 40px rgba(0,0,0,.35)}
.risk-hub-ph figcaption{margin-top:var(--s4);font-size:var(--fs-xs);letter-spacing:.08em;color:var(--c-accent-soft)}
.risk-hub-li{display:grid;border-top:1px solid rgba(253,251,247,.16)}
.risk-hub-li li{display:grid;grid-template-columns:auto 1fr;column-gap:var(--s4);align-items:start;padding:var(--s4) 0;border-bottom:1px solid rgba(253,251,247,.16)}
.risk-hub-li .rn{padding-top:3px;font-family:var(--f-en);font-style:italic;font-size:30px;line-height:1;letter-spacing:.02em;color:var(--c-gold-1);font-variant-numeric:lining-nums}
.risk-hub-li h3{font-family:var(--f-mincho);font-weight:600;font-size:var(--fs-l);line-height:1.5;color:var(--c-on-main)}
.risk-hub-li p{grid-column:2;margin-top:var(--s1);font-size:var(--fs-s);line-height:1.8;color:rgba(253,251,247,.84)}
.risk-dark .risk-end{color:var(--c-on-main)}
.risk-dark .risk-next{font-family:var(--f-mincho);font-size:var(--fs-m);color:var(--c-gold-1)}
@media (min-width:768px) and (max-width:1079px){
  .risk-hub-li{grid-template-columns:1fr 1fr;column-gap:var(--s6)}
  .risk-hub-li .rk5{grid-column:1/-1}
}
@media (min-width:1080px){
  .risk-hub{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-areas:"r1 ph r3" "r2 ph r4" ". r5 .";column-gap:var(--s7);row-gap:var(--s6);align-items:center}
  .risk-hub-li{display:contents}
  .risk-hub-ph{grid-area:ph}
  .risk-hub-ph img{width:320px}
  .risk-hub-li li{display:block;padding:0;border:0}
  .risk-hub-li .rk1{grid-area:r1}.risk-hub-li .rk2{grid-area:r2}.risk-hub-li .rk3{grid-area:r3}.risk-hub-li .rk4{grid-area:r4}.risk-hub-li .rk5{grid-area:r5}
  .risk-hub-li .rn{display:block;padding:0;margin-bottom:var(--s2);font-size:40px}
  .risk-hub-li .rk1,.risk-hub-li .rk2{text-align:right}
  .risk-hub-li .rk5{max-width:560px;margin-inline:auto;text-align:center}
  .risk-hub-li li::after{content:"";display:block;width:40px;height:1px;margin-top:var(--s3);background:var(--c-accent)}
  .risk-hub-li .rk1::after,.risk-hub-li .rk2::after{margin-left:auto}
  .risk-hub-li .rk5::after{margin-inline:auto}
  .risk-dark .risk-end{margin-top:var(--s8)}
}

/* 7章：結合組織移植の1枚（札なし）＋術後の2枚（シーネ・衛生士のケア） */
.mth-1 .mth-main h3{margin-top:0}
@media (min-width:768px){ .mth-1 .mth-main{grid-template-rows:auto} .mth-1 .mth-main h3{grid-area:1/1} .mth-1 .mth-main p{grid-area:1/2} }
.care2{display:grid;gap:var(--s3);max-width:var(--max);margin:var(--s4) auto 0}
.care2 li{padding:var(--s4) var(--s5);background:var(--c-card);border:1px solid var(--c-line);border-top:2px solid var(--c-accent)}
.care2 h3{margin-bottom:var(--s2);font-family:var(--f-mincho);font-weight:600;font-size:var(--fs-l);line-height:var(--lh-head);color:var(--c-main)}
.care2 p{font-size:var(--fs-s);line-height:1.75}
@media (min-width:768px){ .care2{grid-template-columns:1fr 1fr;gap:var(--s4)} }
/* 痛みに配慮した施術：結論の1文のあとに4つの点（2026-10-22 生野先生「文が長くてスマホで読みにくい」）。点は .about-facts と同じ金の丸 */
.care-pts{display:grid;gap:var(--s1);margin-top:var(--s2);font-size:var(--fs-s);line-height:1.75}
.care2 .care-pts li{position:relative;padding:0 0 0 1.2em;background:none;border:0}
.care-pts li::before{content:"";position:absolute;left:.2em;top:.75em;width:.42em;height:.42em;border-radius:50%;background:var(--c-accent)}

/* 11章：セカンドオピニオン（インプラントLPの型：生成りの地に 写真＋文 の1枚、下に予約と電話） */
.so2{padding:var(--s8) 0;background:var(--c-bg-soft);color:var(--c-ink)}
.so2-in{display:grid;max-width:960px;margin-inline:auto;background:var(--c-card);border:1px solid var(--c-accent-soft);box-shadow:var(--shadow);overflow:hidden}
.so2-ph{margin:0}
.so2-ph img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:50% 40%}
.so2-body{padding:var(--s5) var(--s4)}
.so2 .so-en{color:var(--c-accent-deep)}
.so2 .so-hd{color:var(--c-main)}
.so2 .btns{max-width:960px;margin:var(--s5) auto 0}
.so2 .btn-tel{background:var(--c-main);border:0}
@media (min-width:768px){
  .so2{padding:var(--s9) 0}
  .so2-in{grid-template-columns:1.1fr 1fr;align-items:stretch}
  .so2-ph img{height:100%;aspect-ratio:auto;min-height:320px}
  .so2-body{display:grid;align-content:center;padding:var(--s6) var(--s5)}
}

/* 13章：流れの写真の位置。マイクロスコープの写真は、機器の型式の字が入らないよう切り抜いたファイル（treatment-1-crop.webp）を使う
   （2026-10-20 生野先生「ステップが消えて画像のサイズもおかしい」：transform:scale で拡大すると、はみ出た分が段の番号と見出しにかぶっていた。拡大はせず、ファイルを切り抜く） */
.flow-ph li{overflow:hidden}
.flow-ph img{object-position:var(--pos,50% 50%)}

/* =====================================================================
   1画面目：費用の枠（2026-10-20 生野先生「こういう雰囲気で、費用もトップに入れといた方がいい」）
   見本（他院の LP）は金の二重枠に「1本の治療 ——— 96,800円〜 税込」。当院は治療前・治療後のすぐ下、予約ボタンの上に置く
   スマホ：中央ぞろえで「根面被覆 1歯の治療」の下に大きな金額／PC：1行に「根面被覆 1歯の治療 ——— 132,000円 税込 自由診療」
   ===================================================================== */
.fv-mp .fv-pbox{order:4;position:relative;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:0 var(--s3);margin:var(--a-gap-sp) 0 0;padding:var(--s3) var(--s4) var(--s3);background:var(--c-card);border:1px solid var(--c-accent);box-shadow:var(--shadow);text-align:center}
.fv-mp .fv-pbox::before{content:"";position:absolute;inset:3px;border:1px solid var(--c-accent-soft);pointer-events:none}
.fv-pbox-lbl{flex-basis:100%;font-family:var(--f-mincho);font-weight:600;font-size:var(--fs-s);letter-spacing:.12em;color:var(--c-main)}
.fv-pbox-num{font-family:var(--f-num);font-weight:600;font-size:40px;line-height:1.1;letter-spacing:.02em;color:var(--c-accent-deep);font-variant-numeric:lining-nums}
.fv-pbox-num small{font-family:var(--f-mincho);font-size:var(--fs-l);margin-left:.1em}
.fv-pbox-tax{display:inline-block;margin-left:.45em;font-family:var(--f-ja);font-size:var(--fs-xs);font-weight:500;letter-spacing:.06em;color:var(--c-main);vertical-align:.35em}
.fv-pbox-note{font-size:var(--fs-xs);color:var(--c-mute);letter-spacing:.06em}
.fv-pbox-taxin{margin-right:.5em;color:var(--c-main);font-weight:600}  /* 税抜の横の税込（総額表示。2026-10-22）。スマホの狭い箱では「自由診療」が次の行へ */
@media (min-width:1080px){
  .fv-mp .fv-pbox{justify-content:flex-start;gap:0 var(--s4);margin-top:var(--s5);padding:var(--s3) var(--s5);text-align:left}
  .fv-pbox-lbl{flex:1 1 auto;flex-basis:auto;display:flex;align-items:center;gap:var(--s3);font-size:var(--fs-m);white-space:nowrap}
  .fv-pbox-lbl::after{content:"";flex:1 1 24px;height:1px;background:var(--c-accent)}
  .fv-pbox-num{font-size:46px}
  .fv-hero .btns{margin-top:var(--s5)}
}

/* =====================================================================
   6つの目線の審査（2026-10-20 午後）の直し。先生「全部ok」。中身と順番は 直しのプラン_2026-10-20.md
   ボタンの文言（2行）・相談の中身・章へ飛ぶリンク・認定証を後ろへ小さく・院長紹介の箱の開閉・流れのスマホを横組み・
   押しやすさの不具合（固定バーの safe area・フッター・320幅・PC の追従の箱）・見た目の細部・最後の帯
   ===================================================================== */
:root{
  --cert-h:104px;                   /* 認定証のタイルの高さ（スマホ） */
  --cert-h-pc:124px;                /* 同じく PC（7枚を1列） */
  --flow-thumb:96px;                /* スマホの流れの写真（正方形） */
  --tab-w:56px; --tab-h:148px;      /* PC の追従の縦のタブ（1080〜1639px） */
  --c-on-main-soft:rgba(253,251,247,.82);
}
/* 本文の電話・予約のつづき（.tab の幅で本文と重ならないよう、1080〜1199px は左右の余白を広く） */
@media (min-width:1080px) and (max-width:1199px){ :root{ --gut:60px; } }

/* ---------- ボタン：予約は2行（歯ぐき下がりのご相談／WEB予約・24時間受付）。電話は PC だけ番号 ---------- */
.btn-tx{display:grid;justify-items:center;gap:2px;line-height:1.3}
.btn .btn-sub{display:block;font-size:max(12px,.72em);font-weight:400;letter-spacing:.04em;opacity:.92}
.pc-only{display:none}
@media (min-width:1080px){ .sp-only{display:none} .pc-only{display:inline} }
.sec-cta{margin-top:var(--s6)}
/* 相談の中身（ボタンの下の小さい2行）・電話の受付時間・ボタンの上の一言 */
.cta-note{margin-top:var(--s2);font-size:var(--fs-xs);color:var(--c-mute);text-align:center;line-height:1.7}
.tel-hours{margin-top:var(--s1);font-size:var(--fs-xs);color:var(--c-mute);text-align:center;line-height:1.6}
.cta-lead{margin:var(--s6) 0 var(--s3);text-align:center;font-family:var(--f-mincho);font-size:var(--fs-l);line-height:1.6;color:var(--c-main)}
/* スマホ：本文の電話ボタンは線だけ（主役は金の WEB予約。固定バーの電話はそのまま） */
@media (max-width:767px){
  main .btns .btn-tel{min-height:48px;background:transparent;color:var(--c-main);border:1px solid var(--c-main)}
  .so .btns{justify-content:stretch}  /* セカンドオピニオンのボタンもほかと同じ幅に */
}

/* ---------- 1画面目のすぐ下の帯：費用の目安 → 強み → 電話・相談の中身・受付時間 → 章へ飛ぶリンク ---------- */
.fv-price-main{font-weight:500}
.fv-band .fv-price-note + .fv-price-note{margin-top:calc(var(--s1) * -1)}
.fv-band-cta .cta-note,.fv-band-cta .tel-hours{margin-top:0}
.fv-nav{order:9;grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2)}
.fv-nav a{display:flex;align-items:center;justify-content:center;gap:.5em;min-height:44px;padding:var(--s1) var(--s2);background:var(--c-bg);border:var(--line) solid var(--c-accent-soft);color:var(--c-main);font-size:var(--fs-s);font-weight:500;line-height:1.3;text-align:center;text-decoration:none}
.fv-nav a::after{content:"";flex:none;width:.42em;height:.42em;border-right:1.5px solid var(--c-accent-deep);border-bottom:1.5px solid var(--c-accent-deep);transform:translateY(-2px) rotate(45deg)}
@media (min-width:480px){ .fv-nav{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (min-width:1080px){
  /* PC：上の段に 費用の目安｜強み、下の段に 電話｜相談の中身と受付時間｜医院名と駅 */
  .fv-band-in{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);row-gap:var(--s4)}
  .fv-band-cta{grid-column:1/-1;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"btn note acc" "btn hours acc";column-gap:var(--s6);row-gap:2px;align-items:center;padding:var(--s4) 0 0;border-left:0;border-top:var(--line) solid var(--c-line)}
  .fv-band-cta .btns{grid-area:btn}
  .fv-band-cta .cta-note{grid-area:note;align-self:end;text-align:left}
  .fv-band-cta .tel-hours{grid-area:hours;align-self:start;text-align:left}
  .fv-band-cta .fv-access{grid-area:acc;justify-items:end;text-align:right}
  .fv-band .badges{padding-right:0}
}
/* 帯の強み3つを大きく（2026-10-22 生野先生：費用の箱の鎮静・ローンの行を消し、その代わり右の3つを大きく） */
.fv-band .badges{gap:var(--s2)}
.fv-band .badge{flex-direction:column;align-items:flex-start;font-size:var(--fs-m);line-height:1.45}  /* スマホも3つとも「小さい字の上の行＋明朝の下の行」に（大きくして1つだけ1行になった） */
.fv-band .badge b{font-size:22px}
@media (min-width:768px){
  .fv-band .badge{font-size:var(--fs-l)}
  .fv-band .badge b{font-size:var(--fs-xl)}
}
@media (min-width:1080px){
  .fv-band .badges{gap:var(--s3)}
  .fv-band .badge b{font-size:28px}
  .fv-band .fv-price-main{font-size:var(--fs-l)}  /* 1文だけになった費用の箱が、大きくした3つの横で細くなりすぎないように */
}

/* ---------- 院長紹介：3つの箱はスマホでは開いて読む（900px 以上は site.js が開く。開いたまま閉じられないように） ---------- */
.dr2-box>summary{position:relative;display:block;list-style:none;cursor:pointer}
.dr2-box>summary::-webkit-details-marker{display:none}
.dr2-box>summary h3{display:flex;align-items:center;min-height:48px;padding-right:calc(var(--s4) + 1.5em)}
.dr2-box>summary::after{content:"+";position:absolute;right:var(--s4);top:50%;transform:translateY(-50%);color:var(--c-on-main);font-size:1.3em;line-height:1}
.dr2-box[open]>summary::after{content:"−"}
.dr2-box:not([open]){padding-bottom:0}
@media (min-width:900px){
  .dr2-box>summary{pointer-events:none;cursor:default}
  .dr2-box>summary::after{display:none}
  .dr2-box>summary h3{min-height:0;padding-right:var(--s4)}
}
/* 院長の写真：看板「STAR DENTAL CLINIC」が切れないよう 3:2 のまま（元の写真が 3:2）。PC は写真の列を少し広く */
.dr2-ph img,.dr2-ph img[src]{aspect-ratio:3/2;object-position:50% 50%}
@media (min-width:768px){ .dr2{grid-template-columns:minmax(0,6fr) minmax(0,6fr)} }

/* ---------- そのままにすると：締めを大きく・根面被覆とはへの案内 ---------- */
.risk-more{margin-top:var(--s3);text-align:center}
.risk-more a{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s3);color:var(--c-gold-1);font-size:var(--fs-s);text-underline-offset:.25em}
@media (min-width:1080px){
  /* 左の 01・02 は番号と見出しだけ右ぞろえ、本文は左ぞろえ（右ぞろえの本文は読みにくい） */
  .risk-hub-li .rk1,.risk-hub-li .rk2{text-align:left}
  .risk-hub-li .rk1 .rn,.risk-hub-li .rk2 .rn,.risk-hub-li .rk1 h3,.risk-hub-li .rk2 h3{text-align:right}
  .risk-dark .risk-end{font-size:var(--fs-2xl)}
  .risk-dark .risk-next{font-size:var(--fs-l)}
}

/* ---------- 根面被覆とは：主なリスクへの案内 ---------- */
.about-risk{max-width:var(--max-text);margin:var(--s4) auto 0;font-size:var(--fs-s);color:var(--c-mute);text-align:center}
.about-risk a{color:var(--c-accent-deep);text-underline-offset:.25em}

/* ---------- 認定証・修了証：賞状は小さな絵を1列（スマホは横に流す）。2026-10-22 から院長紹介の写真とメッセージの下に置く ---------- */
.cert-strip{display:flex;gap:var(--s2);margin:var(--s4) calc(var(--gut) * -1) 0;padding:0 var(--gut) var(--s2);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);-webkit-overflow-scrolling:touch}
.cert-strip li{flex:0 0 28%;height:var(--cert-h);padding:var(--s1);background:var(--c-card);border:var(--line) solid var(--c-line);scroll-snap-align:start}
.cert-strip img{display:block;width:100%;height:100%;object-fit:contain}
.cert-strip .ph-box{width:100%;height:100%;aspect-ratio:auto;padding:var(--s1);font-size:var(--fs-xs);line-height:1.4;overflow-wrap:anywhere}
@media (min-width:768px){
  .cert-strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);max-width:var(--max);margin:var(--s5) auto 0;padding:0;overflow:visible}
  .cert-strip li{height:var(--cert-h-pc)}
}

/* ---------- 費用：2歯目の条件は小さい字で・スマホは表の左の列を広く ---------- */
.ptbl-sub{display:block;margin-top:2px;font-size:var(--fs-xs);font-weight:400;line-height:1.5;color:var(--c-mute)}
.ptbl td .ptbl-taxin{display:block;margin-top:2px;font-size:var(--fs-s);font-weight:400;line-height:1.4;color:var(--c-ink)}  /* 税抜の下の税込（2026-10-22） */
@media (max-width:767px){ .ptbl th{width:66%} .ptbl td{white-space:nowrap} }

/* ---------- 初診からの流れ：スマホは横組み（左に正方形の写真、右に STEP・見出し・本文）。段のあいだに金の細い線 ---------- */
@media (max-width:767px){
  .flow-ph{gap:var(--s3)}
  .flow-ph li{position:relative;overflow:visible;display:grid;grid-template-columns:var(--flow-thumb) minmax(0,1fr);grid-template-areas:"ph step" "ph hd" "ph tx";grid-template-rows:auto auto 1fr;column-gap:var(--s3);align-items:start;padding:var(--s3)}
  .flow-ph li::before{grid-area:step;padding:0;line-height:1.3}
  .flow-ph img{grid-area:ph;width:var(--flow-thumb);aspect-ratio:1/1}
  .flow-ph h3{grid-area:hd;margin:2px 0 var(--s1);padding:0;line-height:1.45}
  .flow-ph p{grid-area:tx;padding:0;font-size:var(--fs-s);line-height:1.75}
  .flow-ph li:not(:last-child)::after{content:"";position:absolute;left:calc(var(--s3) + var(--flow-thumb) / 2);top:100%;width:1px;height:calc(var(--s3) + 1px);background:var(--c-accent)}
}
.flow-ph p a{color:var(--c-accent-deep);text-underline-offset:.25em}

/* ---------- FAQ：問いの2行目が「Q.」の下にもぐらないように ---------- */
.faq summary{padding-left:calc(var(--s4) + 1.6em)}
.faq summary::before{position:absolute;left:var(--s4)}
.faq .a a{color:var(--c-accent-deep);text-underline-offset:.25em}

/* ---------- 最後の章：濃い茶の帯に（締めの場所だと分かるように） ---------- */
.last-band{max-width:880px;margin:0 auto;padding:var(--s6) var(--s4);background:var(--c-main);color:var(--c-on-main)}
.last-band .sec-hd{margin-bottom:var(--s4)}
.last-band .sec-hd h2{color:var(--c-on-main)}
.last-band .sec-hd h2::after{background:var(--c-gold-1)}
.last-band .text{margin-inline:auto}
.last-band .btns{margin-top:var(--s5)}
.last-band .btns .btn-tel{background:transparent;color:var(--c-on-main);border:1px solid var(--c-on-main)}
.last-band .cta-note,.last-band .tel-hours{color:var(--c-on-main-soft)}
@media (min-width:768px){ .last-band{padding:var(--s7) var(--s6)} }

/* ---------- 押しやすさの不具合 ---------- */
/* 固定バー：iPhone のホームバーの分だけ高く（min-height 64px の中に safe area が食い込み、字の帯が 35px になっていた） */
.fixbar a{min-height:calc(var(--bar) + env(safe-area-inset-bottom,0px))}
/* フッター：固定バーに隠れないよう下に余白（base.css の同じ規則は、あとの .ft{padding} に上書きされて効いていなかった） */
@media (max-width:1079px){ .ft{padding-bottom:calc(var(--s6) + var(--bar) + env(safe-area-inset-bottom,0px))} }
.ft .links a{text-decoration:underline;text-underline-offset:.25em}
/* 320幅：診療時間の表がはみ出さないように */
@media (max-width:359px){ .hours th,.hours td{padding:4px 2px} .hours td:first-child{white-space:normal} }
/* 治療前と治療後のあいだの丸：押せそうに見えないよう、地と影を外して矢印だけに */
.ba::after{background-color:transparent;box-shadow:none}
/* PC の追従：1640px 未満は右端の真ん中に縦のタブ2つ（上 WEB予約・下 お電話）。1640px 以上は今の箱 */
.follow-tab{display:none}
@media (min-width:1080px) and (max-width:1639px){
  .follow{top:50%;right:0;bottom:auto;width:var(--tab-w);gap:var(--s1);padding:0;background:none;border:0;outline:0;box-shadow:none;transform:translate(12px,-50%)}
  .follow.show{transform:translateY(-50%)}
  .follow-ttl,.follow-sub,.follow-x,.follow-tel small,.follow-num{display:none}
  .follow-web,.follow-tel{display:flex;align-items:center;justify-content:center;width:var(--tab-w);min-height:var(--tab-h);padding:var(--s3) 0;border:0;border-radius:var(--r) 0 0 var(--r);writing-mode:vertical-rl;text-orientation:upright;font-size:var(--fs-m);font-weight:700;letter-spacing:.14em;line-height:1;box-shadow:0 8px 20px rgba(46,36,28,.22)}
  .follow-tel{background:var(--c-main);color:var(--c-on-main)}
  .follow-tab{display:inline}
}

/* ---------- PC の字の大きさ：小さい本文を一段大きく ---------- */
@media (min-width:1080px){
  .causes2 p,.risk-hub-li p,.care2 p,.care-pts,.mth p,.case-ad,.dr2-li li,.pcard-loan-rows>div{font-size:var(--fs-m)}
  .risk-hub-li p{color:rgba(253,251,247,.92)}
}

/* ---------- 1画面目：費用の枠と予約のまとまり ---------- */
.fv-mp .fv-act{order:5}
/* 予約ボタンを1画面目に入れる（2026-10-20 手順6：390×664 で下端 600px 以内・360×740 で 676px 以内・PC は 1366×657 と 1280×690 でも見える）
   費用の枠の右に予約ボタンを並べる（縦に積むより約110px 低い）。治療前・治療後の列は 56→48% に少しだけ細く（院長の顔をなるべく小さくしない）。
   スマホ：費用の枠は3段（治療名／金額と税込／自由診療）、予約は2行のボタン。320幅は縦に積む */
@media (max-width:767px){
  :root{ --a-gap-sp:14px; }
  .fv-mp .fv-in{padding-top:var(--s3)}
  .fv-mp .fv-vis{--rec-w:48cqw;--dr-h:calc(var(--rec-w) * 2 / 1.5 + var(--s3))}
  .fv-mp .ba{gap:var(--s3)}
  /* 費用の箱：1.25fr → 1.1fr（2026-10-22 税込を添えて、「税込 99,000円 自由診療」を1行に収める。2行だと 390×664 で予約が固定バーにかかる） */
  .fv-mp .fv-act{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:var(--s2);margin-top:var(--a-gap-sp)}
  .fv-mp .fv-act .fv-pbox{margin:0;padding:var(--s2);gap:0;align-content:center;line-height:1.3}
  .fv-act .fv-pbox-lbl{font-size:var(--fs-xs);letter-spacing:.04em}
  .fv-act .fv-pbox-num{font-size:26px}
  .fv-act .fv-pbox-num small{font-size:var(--fs-s)}
  .fv-act .fv-pbox-tax{margin-left:.3em}
  .fv-act .fv-pbox-note{flex-basis:100%;letter-spacing:0}
  .fv-mp .fv-act .btns{display:flex;margin:0}
  .fv-mp .fv-act .btn{flex:1;min-height:0;padding:var(--s2);font-size:15px;letter-spacing:.02em}
}
@media (max-width:359px){ .fv-mp .fv-act{grid-template-columns:1fr} .fv-mp .fv-act .btn{min-height:var(--btn-h)} }
@media (min-width:1080px){
  .fv-mp .fv-act{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s4);margin-top:var(--fv-gap-vis)}
  .fv-mp .fv-act .fv-pbox{margin:0;padding:var(--s3) var(--s5);row-gap:2px;align-content:center}
  .fv-act .fv-pbox-lbl{flex-basis:100%}
  .fv-act .fv-pbox-num{font-size:40px}
  .fv-act .fv-pbox-note{font-size:var(--fs-s)}  /* 税込を読める大きさに（2026-10-22） */
  .fv-mp .fv-act .btns{display:flex;margin:0}
  .fv-mp .fv-act .btn{flex:1;min-height:0;padding-inline:var(--s5)}
}
/* ノートPC の低い画面（高さ 760px 以下）：上下の余白と治療前・治療後を少し詰める */
@media (min-width:1080px) and (max-height:760px){
  .fv-mp .fv-in{padding:var(--s5) 0}
  .fv-mp h1 .fv-h1-sub{margin-top:var(--s1)}
  .fv-mp .fv-vis{margin-top:var(--s4)}
  .fv-mp .fv-rec{width:88%}
  .fv-mp .fv-act{margin-top:var(--s4)}
}
/* 見直し（2026-10-20 撮った画面を見て）：帯の電話ボタンを相談の中身より上に（.fv-mp .btns の order が効いていた）／
   チェックリストの見出しはスマホで2行に収める（「か？」だけが3行目に落ちた）／受付時間・文中のリンクは句の途中で折らない */
.fv-band-cta .btns{order:1} .fv-band-cta .cta-note{order:2} .fv-band-cta .tel-hours{order:3} .fv-band-cta .fv-access{order:4}
@media (max-width:767px){ #check .sec-hd h2{font-size:clamp(20px,6vw,26px);letter-spacing:.04em} }
.tel-hours{word-break:keep-all;overflow-wrap:anywhere}
.flow-ph p a{white-space:nowrap}

/* =====================================================================
   6つの目線の審査 2周目（2026-10-20 夜。shots/r1021 を見た6人の指摘）の直し
   ===================================================================== */
/* 相談の中身は押す直前の大事な文なので、12px → スマホ 13px・768px〜 14px */
.cta-note{font-size:13px}
@media (min-width:768px){ .cta-note{font-size:var(--fs-s)} }
/* 院長の診療日の行（.dr-days）は 2026-10-22 生野先生の直しで帯と最後から消した。PC の帯は元の2段（note／hours）に戻る */

/* 帯（スマホ・タブレット）：電話・相談の中身・受付時間・駅を1枚のカードにまとめる（部品がばらばらに見えた） */
@media (max-width:1079px){
  .fv-band-cta{padding:var(--s4);background:var(--c-bg);border:var(--line) solid var(--c-line)}
}

/* 1画面目の費用の枠は、費用の章へのリンク（押せそうに見えて押せなかった） */
a.fv-pbox{color:inherit;text-decoration:none}
/* 帯の「詳しい料金はこちら」・フッターのリンク・アクセスの電話番号：押せる高さを 44px に */
.fv-price-more,.ft .links a{display:inline-flex;align-items:center;min-height:44px}
.access dd a[data-cta-href="tel"]{display:inline-block;padding:var(--s2) 0}

/* タブレット（768〜1079px）：1画面目の費用の枠の右に予約（予約ボタンが画面の下に出ていた） */
@media (min-width:768px) and (max-width:1079px){
  .fv-mp .fv-act{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s4);margin-top:var(--s5)}
  .fv-mp .fv-act .fv-pbox{margin:0}
  .fv-mp .fv-act .btns{display:flex;margin:0}
  .fv-mp .fv-act .btn{flex:1;min-height:0}
}

/* ヘッダーの WEB予約：374px 以下で「WEB予／約」に折れ、320px では医院名にかぶった */
.hd .btn-sm{white-space:nowrap;padding-inline:.8em}
@media (max-width:374px){ .hd-name b{font-size:15px;letter-spacing:.02em} }
@media (max-width:339px){ .hd-name small{display:none} }

/* 濃い地の章の上で、固定バーの電話と PC の「お電話」のタブの形が消えた：淡い線で縁どる */
.fixbar .tel{box-shadow:inset 0 1px 0 rgba(253,251,247,.35),inset -1px 0 0 rgba(253,251,247,.2)}
@media (min-width:1080px) and (max-width:1639px){ .follow-tel{box-shadow:inset 0 0 0 1px rgba(253,251,247,.4),0 8px 20px rgba(46,36,28,.22)} .follow-hours{display:none} }
/* 追従の箱（1640px〜）に電話の受付時間 */
.follow-hours{font-size:var(--fs-xs);line-height:1.5;color:var(--c-mute)}
@media (max-width:1079px){ .follow-hours{display:none} }
/* 最後の濃い帯とフッターのあいだの生成りのすき間を詰める（事故のように見えた） */
#last{padding-bottom:var(--s5)}

/* 5章の2枚のあいだの丸：1画面目と同じく、地と影を外して矢印だけに */
.gum-plate-in::after{background-color:transparent;box-shadow:none}

/* 6章（PC）：05 が真ん中の列を 560px に広げ、左右が 172px の細い柱になっていた。05 は3列またぎ、真ん中の列は絵の幅だけに */
@media (min-width:1080px){
  .risk-hub{grid-template-areas:"r1 ph r3" "r2 ph r4" "r5 r5 r5"}
}
.risk-calm{max-width:var(--max-text);margin:var(--s4) auto 0;font-size:var(--fs-s);line-height:1.8;color:var(--c-on-main-soft);text-align:center}

/* 7章：説明は3段落・手術の時間と仕事・リスクへの案内 */
.about-lead p+p{margin-top:var(--s3)}
.about-facts{max-width:var(--max-text);margin:var(--s5) auto 0;display:grid;gap:var(--s2);font-size:var(--fs-s);line-height:1.75;color:var(--c-ink)}
.about-facts li{position:relative;padding-left:1.2em}
.about-facts li::before{content:"";position:absolute;left:.2em;top:.75em;width:.42em;height:.42em;border-radius:50%;background:var(--c-accent)}
.about-facts a{color:var(--c-accent-deep);text-underline-offset:.25em}

/* 院長紹介の3つの箱（PC）：同じ高さに伸びて下に空きができていた → 中身の高さに。資格の列は少し広く */
@media (min-width:1080px){
  .dr2-lists.dr2-lists-3{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);align-items:start}
}

/* 院長のひと言（スマホ）：文の列が狭く、かたまりの途中で折れた → 顔を上、言葉を下に中央ぞろえ */
@media (max-width:767px){
  .dr-quote{grid-template-columns:1fr;justify-items:center;text-align:center}
}

/* 流れ（スマホ）：本文は写真の下から横いっぱいに（長い段で 96px の写真の下に L 字の空きが残った） */
@media (max-width:767px){
  .flow-ph li{grid-template-areas:"ph step" "ph hd" "tx tx";grid-template-rows:auto 1fr auto}
  .flow-ph p{margin-top:var(--s2)}
}
/* 流れ STEP01 の「WEB予約」「お電話」：押せる高さを広げる（上下の間が 5px で、指1本分に2つ入っていた） */
.flow-ph p a{display:inline-block;padding:var(--s2) 2px;margin-block:calc(var(--s2) * -1 + 2px)}

/* 症例のリスク：手術と被せ物の見出し */
.case-risk-k{font-weight:700;color:var(--c-main)}
/* スマホ：本文の入口の間隔を6画面以内に（チェックリストのあと → 根面被覆とはのあと が 6.3画面になった）。中身は減らさず、章の上下と一覧の余白を詰める */
@media (max-width:767px){
  .sec{padding:56px 0}
  .causes2 li,.risk-hub-li li{padding:var(--s3) 0}
  .risk-hub-ph img{width:min(56vw,220px)}
  .about-lead p+p{margin-top:var(--s2)}
}
/* 院長紹介「海外での技術支援」の写真（2026-10-22 生野先生。元の縦横のまま、切らない） */
.dr2-intl-ph{display:block;width:100%;height:auto;box-shadow:var(--shadow)}

/* 賞状の列は枚数ぶんの列で1行（.cert-strip の grid-auto-flow:column。2026-10-22 IPRT の枠を外して6枚）
   院長紹介（2026-10-22 生野先生）：写真とメッセージの下に賞状の列、箱は4つ（資格／指導／海外／受賞）
   PC：資格を左に2段分、右に 指導｜海外、その下に受賞（空いていた所）。タブレット：資格｜指導、海外、受賞 */
.dr2-certs{max-width:960px}
@media (min-width:768px){ .dr2-certs{margin:var(--s6) auto 0} }
@media (min-width:768px) and (max-width:1079px){
  .dr2-lists.dr2-lists-3{grid-template-areas:"qual guide" "intl intl" "award award"}
}
@media (min-width:1080px){
  .dr2-lists.dr2-lists-3{grid-template-areas:"qual guide intl" "qual award award"}
}
@media (min-width:768px){
  .dr2-lists.dr2-lists-3 .dr2-qual{grid-area:qual} .dr2-lists.dr2-lists-3 .dr2-guide{grid-area:guide}
  .dr2-lists.dr2-lists-3 .dr2-intl{grid-area:intl} .dr2-lists.dr2-lists-3 .dr2-award{grid-area:award}
}

/* =====================================================================
   全体の余白を詰める（2026-10-22 生野先生「全体にスペースがちょっと広い。スクロールが長すぎると患者さんが下まで行かない」）
   中身・字の大きさ・写真はそのまま。章の上下・見出しの下・章の中のまとまりの間だけを詰める
   直す前：390×844 で 22,384px（26.5画面）・1366×768 で 19,246px（25.1画面）
   ===================================================================== */
:root{
  --sec-pad:40px;                   /* スマホの章の上下（56→40。地の色が交互なので章の切れ目は分かる） */
  --sec-pad-pc:72px;                /* 768px〜の章の上下（112→72） */
  --sec-hd-gap:var(--s5);           /* スマホの見出しの下（48→24。金の短い線が区切りになる） */
  --sec-hd-gap-pc:var(--s7);        /* 768px〜の見出しの下（72→48） */
  --block-gap:var(--s5);            /* 章の中のまとまりの間（32〜48→24）。ボタン・締めの一文・図の下の文 */
}
.sec,.so2{padding:var(--sec-pad) 0}
.sec-hd{margin-bottom:var(--sec-hd-gap)}
.sec-cta{margin-top:var(--block-gap)}
.cta-lead{margin-top:var(--block-gap)}
.rec-text,.mth,.dr2-lists.dr2-lists-3{margin-top:var(--block-gap)}
.causes2{margin-top:var(--s6)}
.risk-end{margin-top:var(--block-gap)}
.reasons{gap:var(--s7)}            /* 特長の5枚のあいだ（72→48） */
.dr-quote{margin-top:var(--s6)}    /* 特長の締めの院長のひと言（72→32） */
@media (min-width:768px){
  .sec,.so2{padding:var(--sec-pad-pc) 0}
  .sec-hd{margin-bottom:var(--sec-hd-gap-pc)}
  .reasons{gap:var(--s8)}          /* 112→72 */
  .dr-quote{margin-top:var(--s7)}
  .dr2-certs{margin-top:var(--s5)}
}
@media (min-width:1080px){ .risk-dark .risk-end{margin-top:var(--s7)} }

/* =====================================================================
   1画面目：駅直結と梅田・三宮からの時間（2026-10-22 生野先生「阪急西宮北口駅直結をアピールで。梅田・三宮から電車で何分かも。比較的上の方の目立つところに」）
   大見出しの上に1列。先頭の「阪急 西宮北口駅 直結」だけ濃い地で目を引き、時間は費用の枠と同じ金の数字
   スマホ：3つのます（小さい字の上の行＋大きい下の行）／768px〜：1行に横並び（PC は見出しの上の空きに入る高さ）
   スマホだけ、費用の枠と予約ボタンの下に置く（2026-10-22 生野先生「スマホだけ、駅の列を費用の枠と予約ボタンの下に移して、最初の画面に費用の枠を残して」。
   大見出しの上だと 390×664 で費用の枠と予約が固定バーの後ろに入った）
   ===================================================================== */
.fv-mp .fv-acc{order:0;display:grid;grid-template-columns:1.15fr 1fr 1fr;margin:0 0 var(--s4);padding:0;list-style:none;background:var(--c-card);border:1px solid var(--c-accent-soft)}
.fv-acc li{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6px var(--s1);text-align:center;line-height:1.3}
.fv-acc li+li{border-left:1px solid var(--c-accent-soft)}
.fv-acc span{font-size:var(--fs-xs);color:var(--c-mute);white-space:nowrap}
.fv-acc b{font-family:var(--f-mincho);font-weight:600;font-size:var(--fs-s);color:var(--c-accent-deep);white-space:nowrap}
.fv-acc b i{margin:0 .08em;font-style:normal;font-family:var(--f-num);font-size:26px;line-height:1;font-variant-numeric:lining-nums}
.fv-acc .fv-acc-st{background:var(--c-main)}
.fv-acc .fv-acc-st span{color:rgba(253,251,247,.82)}
.fv-acc .fv-acc-st b{font-size:var(--fs-xl);line-height:1.15;letter-spacing:.12em;color:var(--c-on-main)}
@media (max-width:767px){
  .fv-mp .fv-acc{order:9;margin:var(--a-gap-sp) 0 0}
}
@media (max-width:359px){ .fv-acc span{white-space:normal} }  /* 320px：「梅田から特急で」がますからはみ出すので2行に */
@media (min-width:768px){
  .fv-mp .fv-acc{display:inline-flex;align-self:flex-start;margin-bottom:var(--s4)}
  .fv-acc li{flex-direction:row;align-items:baseline;gap:var(--s2);padding:6px var(--s4)}
  .fv-acc span{font-size:var(--fs-s);color:var(--c-ink)}
  .fv-acc b{font-size:var(--fs-m)}
  .fv-acc .fv-acc-st b{font-size:var(--fs-xl)}
  .fv-acc b i{font-size:34px}
}
/* ノートPC の低い画面（1080px〜・高さ 820px 以下）：1画面目の列を出すと予約ボタンが画面の下に出る（1280×800 で 810px）ので、同じ中身をヘッダーの真ん中に出す（スクロールしても見える） */
.hd-acc{display:none}
@media (min-width:1080px) and (max-height:820px){
  .fv-mp .fv-acc{display:none}
  .hd-acc{display:flex;align-items:baseline;gap:var(--s4);margin:0;font-size:13px;line-height:1.3;color:var(--c-ink);white-space:nowrap}
  .hd-acc b{padding:3px var(--s2);background:var(--c-main);color:var(--c-on-main);font-family:var(--f-mincho);font-weight:600;font-size:var(--fs-s);letter-spacing:.06em}
  .hd-acc i{margin:0 .06em;font-style:normal;font-family:var(--f-num);font-weight:600;font-size:24px;line-height:1;color:var(--c-accent-deep);font-variant-numeric:lining-nums}
  .hd-acc small{font-size:inherit}
  .hd-cta{flex:none}
}
/* 1080〜1279px はヘッダーが狭い（電話番号が2行に折れた）：「特急で」を外して間を詰める */
@media (min-width:1080px) and (max-width:1279px) and (max-height:820px){
  .hd-acc{gap:var(--s3)}
  .hd-acc small{display:none}
}