/* ==========================================================================
   Maison PUREJU / MENS ── 共通UI部品（第2版・UIデザイン方針 第1版を反映）
   色・書体は tokens.css の変数だけを使う。SP優先、PC は @media (min-width:768px)。
   数値の根拠は docs/spec/2026-09-14_UIデザイン方針_第1版.md
   ========================================================================== */

/* 0. 基礎 ── 本文17/18px・行間1.9・1行40字 */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:17px;line-height:1.9;overflow-wrap:anywhere;padding-bottom:76px}
[hidden]{display:none!important}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
button{font-family:var(--font-body);font-size:inherit}
h1,h2,h3{font-family:var(--font-head);font-weight:500;line-height:1.35;margin:0;word-break:keep-all;overflow-wrap:anywhere;text-wrap:balance}
.h1-a,.h1-b{display:inline-block}
.h1-x{display:inline-block;margin:0 .35em;color:var(--accent)}
p{margin:0 0 1em}
.container{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.measure{max-width:40em}

/* 1. C-01 ヘッダー ── PC追従・SPは48pxメニュー */
.site-header{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:1px solid var(--line);transition:background-color .3s,border-color .3s}
.site-header.over-fv{background:transparent;border-bottom-color:transparent}
.site-header.over-fv .menu-toggle{border-color:transparent;background:transparent}
.header-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 16px;min-height:64px;padding-top:10px;padding-bottom:10px}
.site-logo{font-family:var(--font-serif);font-size:24px;font-weight:500;line-height:1.1;text-decoration:none;color:var(--ink)}
.site-logo small{display:block;font-family:var(--font-body);font-size:12px;letter-spacing:.14em;margin-top:4px;color:var(--ink-sub)}
.menu-toggle{display:flex;flex:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:48px;height:48px;padding:0;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);color:var(--ink);cursor:pointer}
.menu-toggle span{display:block;width:22px;height:2px;background:var(--ink);transition:transform .2s,opacity .2s}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.site-nav{flex-basis:100%;border-top:1px solid var(--line);padding:8px 0 12px}
.site-nav ul{display:flex;flex-direction:column;gap:2px;list-style:none;margin:0;padding:0}
.site-nav a{display:flex;align-items:center;min-height:52px;padding:8px 12px;font-size:18px;text-decoration:none;border-radius:var(--radius)}
.site-nav a:not(.button):hover{background:var(--bg-sub)}
.site-nav .button{margin-top:8px}

/* 2. C-02 パンくず ── 14px */
.breadcrumb{padding:14px 0 0;font-size:14px;color:var(--ink-sub)}
.breadcrumb ol{display:flex;flex-wrap:wrap;gap:6px 10px;list-style:none;margin:0;padding:0}
.breadcrumb li+li::before{content:"›";margin-right:10px;color:var(--line)}
.breadcrumb a{text-underline-offset:4px}

/* 3. C-03 FV（TOP専用）── 本サイトと同じ全面動画。ヘッダー分だけ上に潜り込ませ、左下に予約ボタンだけを置く */
.fv{position:relative;width:100%;height:100svh;margin-top:calc(-1 * var(--hdr-h,65px));background:var(--brand-dark);overflow:hidden}
.fv-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* 仮枠は本サイトの動画と同じ明るめの面にする（ヘッダーの濃色文字が読める条件で確認するため） */
.fv-media.ph{aspect-ratio:auto;border-radius:0;border-color:var(--line);background:var(--bg-sub);color:var(--ink-sub)}
.fv-scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top right,var(--fv-scrim) 10%,rgba(0,0,0,.25) 40%,transparent 100%)}
.fv-overlay{position:absolute;left:var(--gutter);bottom:calc(76px + 24px + env(safe-area-inset-bottom,0px));max-width:calc(100% - var(--gutter) * 2)}
.fv-cta{display:inline-flex;align-items:center;gap:12px;min-height:48px;padding:10px 28px;border:1px solid var(--fv-line);border-radius:0;background:transparent;color:var(--fv-ink);font-family:var(--font-body);font-size:14px;font-weight:400;letter-spacing:.2em;line-height:1.4;text-decoration:none;text-shadow:0 2px 8px rgba(0,0,0,.5);transition:background-color .3s,color .3s}
.fv-cta::after{content:"→";display:inline-block;transition:transform .3s}
.fv-cta:hover{background:var(--fv-ink);color:var(--brand-dark);text-shadow:none}
.fv-cta:hover::after{transform:translateX(4px)}
.fv-cta:focus-visible{outline-color:var(--fv-ink)}
.page-heading.top{border-bottom:0;padding:0}
.page-heading.top h1{font-size:15px;font-family:var(--font-body);font-weight:500;color:var(--ink-sub);letter-spacing:.04em}
.page-heading.top+.page-body{padding-top:4px}
.page-body .draft-note{margin-bottom:28px}

/* 4. C-04 ボタン・CTA ── 高さ56px・SPは画面幅 */
.button{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:14px 28px;border:2px solid var(--accent);border-radius:var(--radius);background:var(--accent);color:var(--accent-ink);font-weight:700;font-size:17px;line-height:1.4;text-align:center;text-decoration:none;letter-spacing:.04em}
.button:hover{background:var(--bg);color:var(--accent)}
.button.ghost{background:var(--bg);color:var(--accent)}
.cta{padding:40px 0;background:var(--bg-sub);text-align:center}
.cta .button{width:100%;max-width:360px}
.cta p{margin:0 0 14px;font-size:16px;color:var(--ink-sub)}
/* SP固定バー（画面下・予約と電話） */
.sticky-bar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px var(--gutter);background:rgba(255,255,255,.96);border-top:1px solid var(--line);backdrop-filter:blur(6px)}
.sticky-bar .button{min-height:56px;padding:8px 12px;font-size:16px}

/* 5. C-05 法令注記 ── 14px */
.legal-note{padding:24px 0;font-size:14px;line-height:1.8;color:var(--ink-sub)}
.legal-note p{margin:0}

/* 6. C-06 フッター ── 15px */
.site-footer{padding:40px 0 32px;background:var(--bg-sub);border-top:1px solid var(--line);font-size:15px}
.f-top{display:grid;grid-template-columns:1fr;gap:24px}
.f-access{font-style:normal;color:var(--ink-sub)}
.f-access p{margin:0 0 6px}
.f-bottom{margin-top:24px;padding-top:16px;border-top:1px solid var(--line)}
.f-bottom a{display:inline-flex;align-items:center;min-height:44px;text-underline-offset:4px}

/* 7. C-07 更新日 ── 14px */
.updated{margin:32px 0 0;font-size:14px;color:var(--ink-sub)}

/* 8. 画像・イラストの仮枠 ── 用途を書いた点線枠（素材が来たら差し替え） */
.ph{background:var(--bg-sub);border:1.5px dashed var(--line);color:var(--ink-sub);display:grid;place-items:center;text-align:center;font-size:14px;line-height:1.5;padding:12px;aspect-ratio:16/9;border-radius:var(--radius)}
.ph.sq{aspect-ratio:1}
.ph.p43{aspect-ratio:4/3}
.ph.p45{aspect-ratio:4/5}

/* 9. 本文 ── 見出し・段落・箇条書き */
.page-main{padding-top:20px}
.page-heading{padding:8px 0 20px}
.page-heading h1{font-size:28px}
.page-body{padding-top:12px}
.page-body h2{font-size:24px;margin:0 0 18px;padding:0 0 12px;border-bottom:2px solid var(--accent)}
.page-body h3{font-size:19px;font-family:var(--font-body);font-weight:700;margin:24px 0 8px}
.page-body ul{margin:0 0 1em;padding-left:1.3em}
.page-body li{margin:6px 0}
.blk{padding:0 0 56px}
.lead+.blk,.draft-note+.blk,.operator+.blk{padding-top:28px}
.page-heading.top{margin-top:24px}
.page-heading.top h1{margin-bottom:12px}
.blk>p,.blk>ul{max-width:40em}
.blk>.photo-grid{max-width:none}
.lead{font-size:19px;line-height:1.8;margin:0 0 20px;max-width:40em}
.draft-note{margin:0 0 20px;padding:10px 14px;border:1.5px dashed var(--accent);font-size:14px;line-height:1.6;color:var(--accent);background:var(--bg-sub);border-radius:var(--radius)}

/* 10. 施術者パネル・要点パネル（施術ページ冒頭「ひと目でわかる」） */
.operator{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;padding:14px 16px;background:var(--bg-sub);border-left:4px solid var(--accent);font-size:16px;margin:0 0 24px}
.operator .lbl{font-weight:700;color:var(--accent)}
.page-body .facts{list-style:none;margin:0 0 24px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.facts li{padding:14px 12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg)}
.facts .k{display:block;font-size:13px;color:var(--ink-sub);margin-bottom:4px;letter-spacing:.04em}
.facts .v{display:block;font-size:17px;font-weight:700;line-height:1.5}
.hero{margin:0 0 16px}
.intro{margin:0 0 24px}
.page-body .jump{display:grid;grid-template-columns:1fr 1fr;gap:8px;list-style:none;margin:0 0 48px;padding:0}
.jump a{display:flex;align-items:center;justify-content:center;min-height:48px;padding:6px 10px;border:1.5px solid var(--accent);border-radius:var(--radius);color:var(--accent);font-weight:700;font-size:15px;text-decoration:none;background:var(--bg)}
.jump a:hover{background:var(--accent);color:var(--accent-ink)}

/* 11. 工程（治療内容）── 大きな番号＋1行 */
.page-body .steps{list-style:none;counter-reset:step;margin:0 0 20px;padding:0;max-width:40em}
.steps li{counter-increment:step;display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:start;padding:12px 0;border-bottom:1px solid var(--line);margin:0}
.steps li::before{content:counter(step);display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-family:var(--font-serif);font-size:22px;font-weight:500}
.steps-visual{margin:16px 0 0;max-width:40em;aspect-ratio:2/1}
img.steps-visual{width:100%;height:auto;border:1px solid var(--line);border-radius:6px;background:#fff}

/* 12. 表（料金）── 行の高さ56px・金額太字 */
.tw{overflow-x:auto;margin:0 0 1em}
.tw table{border-collapse:collapse;width:100%;font-size:16px}
.tw th,.tw td{border:1px solid var(--line);padding:14px 12px;text-align:left;vertical-align:middle;min-height:56px}
.tw th{background:var(--bg-sub);font-weight:700;font-size:15px}
.tw td:last-child{font-weight:700;white-space:nowrap}
@media (max-width:767px){.tw.wide table{min-width:560px}.tw.wide::after{content:"※ 表は横にスクロールできます";display:block;font-size:13px;color:var(--ink-sub);margin-top:6px}}

/* 13. Q&A ── Qを大きく・畳まない */
#qa h3{position:relative;padding-left:2em;font-size:18px;margin-top:28px}
#qa h3::before{content:"Q";position:absolute;left:0;top:-2px;font-family:var(--font-serif);font-size:26px;color:var(--accent)}
#qa h3+p{padding-left:2em;max-width:40em}

/* 14. カード（悩み・施術の一覧）── 画像枠＋大きな名前＋全体リンク */
.cards ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr;gap:14px;max-width:none}
.cards li{margin:0}
.card{display:grid;grid-template-columns:112px 1fr 28px;align-items:center;gap:14px;padding:12px;border:1px solid var(--line);border-radius:6px;background:var(--bg);text-decoration:none;min-height:96px}
.card:hover{border-color:var(--accent);box-shadow:0 2px 12px rgba(0,0,0,.06)}
.card .ph{aspect-ratio:4/3;padding:6px;font-size:12px}
.card .card-img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius);background:var(--bg-sub)}
.card-t{display:block;font-family:var(--font-head);font-size:20px;font-weight:500;color:var(--accent);line-height:1.3;word-break:keep-all;overflow-wrap:anywhere}
.card-d{display:block;font-size:14px;color:var(--ink-sub);margin-top:4px;line-height:1.6}
.card-arrow{font-size:24px;color:var(--accent);justify-self:end}
.card-badge{display:inline-block;font-size:13px;padding:2px 8px;border:1px solid var(--accent);border-radius:999px;color:var(--accent);margin-top:6px}

.cards.v .card{grid-template-columns:1fr;grid-template-rows:auto 1fr;padding:0 0 16px;min-height:0}
.cards.v .card .ph{aspect-ratio:2/1;border-radius:6px 6px 0 0;border-width:0 0 1.5px 0}
.cards.v .card-t{padding:14px 16px 0}
.cards.v .card-d{padding:0 16px}
.cards.v .card-badge{margin:8px 16px 0}
.cards.v .card-arrow{display:none}

/* 15. タイル（3つの要点）・医師ブロック */
.tiles ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr;gap:12px;max-width:none}
.tiles li{margin:0;padding:18px 16px 18px 68px;position:relative;border:1px solid var(--line);border-radius:6px;background:var(--bg-sub);font-size:16px;line-height:1.7}
.tiles li::before{content:"";position:absolute;left:16px;top:18px;width:40px;height:40px;border-radius:50%;border:1.5px dashed var(--line);background:var(--bg)}
.doctor-wrap{display:grid;grid-template-columns:120px 1fr;gap:16px;align-items:start}
.doctor-wrap .ph{aspect-ratio:4/5;font-size:12px;padding:6px}
.doctor-photo{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:6px;background:var(--bg-sub)}
.doctor-text p{max-width:40em}
.profile .doctor-wrap{display:block}
.profile .doctor-photo{float:left;width:150px;margin:0 16px 8px 0}
.profile .doctor-text h3{clear:both;padding-top:8px}
.profile .doctor-text p{margin:0 0 .6em}
.profile .doctor-text h3{margin:24px 0 10px}
.profile .doctor-text h3+p,.profile .doctor-text h3~p{margin-bottom:1em}
.profile .titles{list-style:none;padding:0;margin:8px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.profile .titles li{margin:0;padding:6px 12px;border:1px solid var(--accent);border-radius:999px;font-size:14px;color:var(--accent);line-height:1.4}
.career .tw td:last-child{font-weight:400;white-space:normal}
.career .tw td:first-child{white-space:nowrap;width:6em;font-family:var(--font-serif);font-size:19px}

/* 16. 節の背景帯（TOP）── 交互に淡い帯で区切る */
.band{background:var(--bg-sub);margin:0 calc(-1 * var(--gutter));padding:40px var(--gutter) 8px}

/* 17. 予約・アクセス（contact）── 所在地表・地図・写真つき道順・予約ボタン */
.info{display:grid;grid-template-columns:1fr;gap:0;margin:0 0 1em;border-top:1px solid var(--line)}
.info dt{font-size:14px;color:var(--ink-sub);letter-spacing:.04em;padding:12px 0 0}
.info dd{margin:0;padding:2px 0 12px;border-bottom:1px solid var(--line);font-size:17px;line-height:1.7}
.map-embed{position:relative;aspect-ratio:4/3;margin:0 0 16px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--bg-sub)}
.map-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.route{border:1px solid var(--line);border-radius:6px;margin:0 0 12px;background:var(--bg)}
.route summary{display:flex;align-items:center;justify-content:space-between;min-height:56px;padding:12px 16px;font-family:var(--font-head);font-size:19px;cursor:pointer;list-style:none}
.route summary::-webkit-details-marker{display:none}
.route summary::after{content:"＋";color:var(--accent);font-size:22px;font-family:var(--font-body)}
.route[open] summary{border-bottom:1px solid var(--line)}
.route[open] summary::after{content:"－"}
.route-steps{counter-reset:step;list-style:none;margin:0;padding:12px 16px 4px;display:grid;grid-template-columns:1fr;gap:16px}
.route-steps li{counter-increment:step;margin:0;position:relative;padding:0 0 4px}
.route-steps img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;border-radius:var(--radius)}
.route-steps .cap{display:grid;grid-template-columns:36px 1fr;gap:8px;align-items:start;margin-top:10px;font-size:16px;line-height:1.7}
.route-steps .cap::before{content:counter(step);display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-family:var(--font-serif);font-size:18px;margin-top:2px}
.button-list{list-style:none;padding:0;margin:0 0 1em;display:grid;grid-template-columns:1fr;gap:16px}
.button-list li{margin:0}
.button-list .button{width:100%}
.button-list .desc{display:block;margin-top:6px;font-size:14px;color:var(--ink-sub);line-height:1.6}

/* 18. 院内写真（TOP）── 16:9 のグリッド */
.photo-grid{list-style:none;padding:0;margin:8px 0 0;display:grid;grid-template-columns:1fr;gap:16px;max-width:none}
.photo-grid li{margin:0}
.photo-grid img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:6px;background:var(--bg-sub)}
.photo-grid .cap{display:block;margin-top:8px;font-size:14px;color:var(--ink-sub);letter-spacing:.04em}

/* ── PC ─────────────────────────────────────────────────────── */
@media (min-width:768px){
  body{font-size:18px;padding-bottom:0}
  .sticky-bar{display:none}
  .header-inner{flex-wrap:nowrap;gap:24px;min-height:80px}
  .site-logo{font-size:28px}
  .menu-toggle{display:none}
  .site-nav{flex-basis:auto;border-top:0;padding:0}
  .site-nav ul{flex-direction:row;align-items:center;gap:4px}
  .site-nav a{min-height:48px;padding:8px 16px;font-size:16px}
  .site-nav .button{margin:0 0 0 8px;min-height:44px;padding:6px 20px;font-size:15px;border-radius:0}
  .breadcrumb{padding-top:18px}
  .fv-overlay{left:48px;bottom:64px}
  .info{grid-template-columns:10em 1fr}
  .info dt{padding:14px 0;border-bottom:1px solid var(--line)}
  .info dd{padding:14px 0}
  .map-embed{aspect-ratio:16/9}
  .route-steps{grid-template-columns:repeat(2,1fr);gap:20px;padding:20px 20px 8px}
  .button-list{grid-template-columns:repeat(2,1fr)}   /* 2026-10-22 電話予約を外し Web・LINE の2つに（原田さん） */
  .photo-grid{grid-template-columns:repeat(3,1fr);gap:20px}
  .fv-cta{padding:12px 36px}
  .page-main{padding-top:32px}
  .page-heading{padding:8px 0 28px}
  .page-heading h1{font-size:40px}
  .page-body h2{font-size:30px;margin-bottom:24px}
  .page-body h3{font-size:20px}
  .blk{padding-bottom:88px}
  .lead{font-size:21px}
  .page-body .facts{grid-template-columns:repeat(5,1fr);gap:12px}
  .facts .v{font-size:19px}
  .page-body .jump{grid-template-columns:repeat(4,1fr);gap:12px}
  .page-body .facts{grid-template-columns:repeat(3,1fr)}
  .cta{padding:56px 0}
  .cards ul{grid-template-columns:repeat(3,1fr);gap:20px}
  .card,.cards.v .card{grid-template-columns:1fr;grid-template-rows:auto 1fr;padding:0 0 18px;min-height:0;align-items:start}
  .cards.v .card .ph{aspect-ratio:4/3}
  .cards.v .card-badge{margin:8px 18px 0}
  .card .ph{aspect-ratio:4/3;border-radius:6px 6px 0 0;border-width:0 0 1.5px 0;font-size:13px}
  .card .card-img{border-radius:6px 6px 0 0}
  .card-t{font-size:22px;padding:16px 18px 0}
  .card-d{padding:0 18px;font-size:15px}
  .card-arrow{display:none}
  .tiles ul{grid-template-columns:repeat(2,1fr);gap:20px}
  .tiles li{padding:76px 22px 22px 22px}
  .tiles li::before{left:22px;top:22px;width:44px;height:44px}
  .doctor-wrap{grid-template-columns:200px 1fr;gap:32px}
  .profile .doctor-wrap{display:grid;grid-template-columns:300px 1fr;gap:40px}
  .profile .doctor-photo{float:none;width:100%;margin:0}
  .profile .doctor-text h3{clear:none;padding-top:0}
  .band{margin:0;padding:48px 40px 8px;border-radius:8px}
  .f-top{grid-template-columns:1fr 1fr;gap:40px}
  .updated{text-align:right}
}

/* ── タブレット以上（1024px〜）：2列レイアウト ─────────────────── */
@media (min-width:1024px){
  .intro{display:grid;grid-template-columns:1.1fr 1fr;gap:28px;align-items:start;margin-bottom:32px}
  .hero{margin:0}
  .page-body .intro .facts{grid-template-columns:1fr 1fr;margin:0}
  .tiles ul{grid-template-columns:repeat(3,1fr)}
}

/* ── FV の形（本サイトと同じ：1024px 未満は画面高、以上は 16:9） ── */
@media (min-width:1024px){
  .fv{height:auto;aspect-ratio:16/9}
  .fv-overlay{left:80px;bottom:80px}
}

/* ==========================================================================
   19. TOP 節システム（2026-09-16・おその氏指摘「罫線で区切るのは古い」を受けて）
   --------------------------------------------------------------------------
   原則：罫線・枠線で区切らない。節は「余白」と「面の色の交互（白／ネイビー／ウォームグレー）」で分ける。
   見出しの手前に 32px の金のヘアラインを一本だけ置く（B案「金は線の一滴」）。
   節と節の間に左右いっぱいの写真（.slit）を挟み、スクロールで少しだけ動かす（transform のみ・軽量）。
   数値：節の上下余白 SP 80px／PC 128px。見出し SP 30px／PC 40px。カード画像は 4:3・先頭は 16:9 で大きく。
   ========================================================================== */
.is-top .site-header{border-bottom-color:transparent;box-shadow:0 1px 24px rgba(0,0,0,.06)}
.is-top .site-header.over-fv{box-shadow:none}
.is-top .site-footer{border-top:0}
.is-top .cta{display:none}                       /* 予約導線は最終節（ご予約・アクセス）に統合 */
.is-top .top-intro{padding-top:20px}
.is-top .top-intro .page-heading.top{margin-top:0}
.is-top .top-intro .draft-note{margin:0}
.is-top .page-body{padding-top:0}

.sec{padding:80px 0}
.sec--white{background:var(--bg)}
.sec--sub{background:var(--bg-sub)}
.sec--navy{background:var(--accent);color:var(--accent-ink)}
.sec--navy a{color:inherit}
.sec--navy .ph{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.35);color:rgba(255,255,255,.75)}
.top-intro+.page-body .sec:first-child{padding-top:56px}

/* 見出し：罫線なし。金のヘアライン＋大きな見出し＋リード文 */
.sec-head{margin:0 0 36px}
.sec-head::before{content:"";display:block;width:32px;height:1px;background:var(--gold);margin:0 0 22px}
.is-top .page-body .sec-head h2{font-size:30px;line-height:1.3;letter-spacing:.04em;margin:0;padding:0;border:0}
.sec-lead{margin:16px 0 0;font-size:16px;line-height:1.9;color:var(--ink-sub);max-width:40em}
.sec--navy .sec-lead{color:rgba(255,255,255,.82)}

/* 悩みカード：枠なし・画像を主役に。先頭だけ横長で大きく */
.cards ul{grid-template-columns:1fr 1fr;gap:32px 16px}
.cards li{display:grid}                  /* 中のカードを行の高さまで伸ばす（先頭カードの画像が行に追従する） */
.is-top .cards li:first-child{grid-column:1/-1}
.card{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0;min-height:0;border:0;border-radius:0;background:transparent;box-shadow:none}
.card:hover{border:0;box-shadow:none}
.card-media{display:block;position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--bg-sub)}
.is-top .cards li:first-child .card-media{aspect-ratio:16/9}
.card-media .card-img,.card-media .ph{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;border-radius:0;transition:transform .8s cubic-bezier(.2,.6,.2,1)}
.card:hover .card-img{transform:scale(1.04)}
.card>span:not(.card-media):not(.card-arrow){display:block;padding:14px 0 0}
.card-t{padding:0;font-size:20px;color:var(--ink);transition:color .3s}
.card:hover .card-t{color:var(--accent)}
.card-d{padding:0;margin-top:4px;font-size:14px}
.card .card-arrow{display:none}

/* 診察と施術について：箱なし。金の番号＋文 */
.tiles ul{grid-template-columns:1fr;gap:36px;counter-reset:tile}
.tiles li{position:static;padding:0;border:0;border-radius:0;background:transparent;font-size:17px;line-height:1.9;counter-increment:tile}
.tiles li::before{content:counter(tile,decimal-leading-zero);position:static;display:block;width:auto;height:auto;margin:0 0 12px;border:0;border-radius:0;background:none;font-family:var(--font-serif);font-size:38px;font-weight:400;line-height:1;color:var(--gold)}

/* 左右いっぱいの写真（スリット）── 節の間に挟む。画像は 130% の高さで、スクロール量に応じて上下に動く */
.slit{position:relative;height:240px;overflow:hidden;background:var(--bg-sub)}
.slit img{position:absolute;left:0;top:-15%;width:100%;height:130%;object-fit:cover;will-change:transform}
@media (prefers-reduced-motion:reduce){.slit img{top:0;height:100%;transform:none!important}}

/* 院内写真：角を立てて、余白で並べる */
.photo-grid{margin:0;gap:20px}
.photo-grid img{border-radius:0}
.photo-grid .cap{margin-top:10px}
.sec-body>p{max-width:40em}

/* 料金・流れ・リスク：大きなリンクパネル（白面・枠なし） */
.link-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr;gap:12px}
.is-top .page-body .link-list{padding:0}
.link-list li{margin:0}
.link-panel{position:relative;display:block;padding:26px 64px 26px 24px;background:var(--bg);color:var(--ink);text-decoration:none;transition:transform .3s,box-shadow .3s}
.link-panel:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(22,48,90,.10)}
.lp-t{display:block;font-family:var(--font-head);font-size:22px;line-height:1.3;color:var(--accent)}
.lp-d{display:block;margin-top:6px;font-size:14px;line-height:1.7;color:var(--ink-sub)}
.lp-arrow{position:absolute;right:24px;top:50%;transform:translateY(-50%);font-size:22px;color:var(--gold);transition:transform .3s}
.link-panel:hover .lp-arrow{transform:translate(4px,-50%)}

/* 医師紹介：写真を大きく、名前を見出し級に */
.doctor-wrap{grid-template-columns:1fr;gap:28px}
.doctor-photo{aspect-ratio:4/5;border-radius:0}
.doctor-text p:first-child{font-size:16px;color:var(--ink-sub);margin-bottom:20px}
.doctor-text p:first-child strong{display:block;font-family:var(--font-head);font-size:30px;font-weight:500;line-height:1.3;color:var(--ink);margin-bottom:8px;letter-spacing:.04em}

/* ご予約・アクセス（ネイビー面）：表の罫線なし。ラベルは薄く、値は大きく */
.info{border:0;gap:0}
.info dt{padding:0;font-size:13px;letter-spacing:.08em;color:var(--ink-sub)}
.sec--navy .info dt{color:rgba(255,255,255,.65)}
.info dd{padding:4px 0 22px;border:0;font-size:17px;line-height:1.8}
.info dd:last-child{padding-bottom:0}
.sec-cta{margin:32px 0 0}
.sec--navy .button{width:100%;max-width:360px;background:#fff;color:var(--accent);border-color:#fff}
.sec--navy .button:hover{background:transparent;color:#fff}

/* 出現アニメーション（JSが .rv を付けたものだけ。JS無効時は何もしない） */
.rv{opacity:0;transform:translateY(20px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.6,.2,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

@media (min-width:768px){
  .sec{padding:128px 0}
  .top-intro+.page-body .sec:first-child{padding-top:88px}
  .sec-head{margin-bottom:56px}
  .is-top .page-body .sec-head h2{font-size:40px}
  .sec-lead{margin:0;font-size:17px}
  .cards ul{grid-template-columns:repeat(3,1fr);gap:44px 28px}
  .is-top .cards li:first-child{grid-column:span 2}
  .is-top .cards li:first-child .card-media{aspect-ratio:auto;flex:1;min-height:0}
  .card,.cards.v .card{grid-template-columns:none;grid-template-rows:none;padding:0;min-height:0}
  .card-t{font-size:22px}
  .card-d{font-size:15px}
  .tiles ul{grid-template-columns:repeat(3,1fr);gap:56px}
  .tiles li{padding:0;font-size:17px}
  .tiles li::before{font-size:44px;margin-bottom:18px}
  .slit{height:min(46vh,520px)}
  .photo-grid{grid-template-columns:repeat(3,1fr);gap:24px}
  .link-list{grid-template-columns:repeat(3,1fr);gap:20px}
  .link-panel{padding:36px 32px 64px}
  .lp-t{font-size:24px}
  .lp-arrow{right:32px;top:auto;bottom:28px;transform:none}
  .link-panel:hover .lp-arrow{transform:translateX(6px)}
  .doctor-wrap{grid-template-columns:5fr 7fr;gap:72px;align-items:center}
  .doctor-text p:first-child strong{font-size:36px}
  .is-top .sec.dl .container{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:0 64px}
  .is-top .sec.dl .sec-head{margin-bottom:0}
  .is-top .sec.dl .sec-head::before{margin-bottom:22px}
  .is-top .sec.dl .sec-lead{margin-top:20px}
  .is-top .sec.dl .sec-body{padding-top:32px}
  .info{grid-template-columns:1fr}
  .info dt{padding:0;border:0}
  .info dd{padding:4px 0 22px}
  .sec-cta{margin-top:40px}
  .sec--navy .button{width:auto;min-width:300px}
}

/* 見出しとリード文の2列は 1024px 以上だけ（それ未満は見出しが語の途中で折れる） */
@media (min-width:1024px){
  .sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 64px;align-items:end}
  .sec-head::before{grid-column:1/-1;margin-bottom:0}
  .sec-head:not(:has(.sec-lead)) h2{grid-column:1/-1}   /* リード文がない節は見出しを1行で通す */
  .is-top .sec.dl .sec-head{display:block}
  .is-top .sec.dl .sec-head::before{margin-bottom:22px}
}

/* ── TOP は見出し系もゴシック（2026-09-16 おその氏指示「明朝が最適でない気がする」）──
   書体：Zen Kaku Gothic New。ウエイトは 500（太すぎると品位が落ちる）。字間 .06em で余裕を出し、
   ゴシックは同じ px でも大きく見えるので見出しを 1 段落とす（SP 28／PC 36px）。ロゴ（Cormorant）はブランド書体のため据え置き */
html[data-theme]{--font-head:var(--font-jp)}   /* 全ページ：見出し系はゴシック（2026-09-16 下層へ展開） */
.is-top .page-body .sec-head h2{font-weight:500;letter-spacing:.06em;font-size:28px}
.card-t{font-weight:500;letter-spacing:.03em;font-size:19px}
.lp-t{font-weight:500;letter-spacing:.03em;font-size:20px}
.doctor-text p:first-child strong{font-weight:500;letter-spacing:.06em;font-size:28px}
.tiles li::before{font-family:var(--font-jp);font-weight:400;font-size:30px;letter-spacing:.06em}
@media (min-width:768px){
  .is-top .page-body .sec-head h2{font-size:36px}
  .card-t{font-size:21px}
  .lp-t{font-size:22px}
  .doctor-text p:first-child strong{font-size:32px}
  .tiles li::before{font-size:34px}
}

/* ── TOP はセンタリング（2026-09-16 おその氏指示「スマホで見るユーザーが多い。スマホファーストで中央揃えに」）──
   見出し（金のヘアライン＋見出し＋リード文）・カード名・番号・リンクパネル・院内写真の説明・予約節を中央に。
   PC も同じ骨格（1024px 以上の「見出し左・リード右」の2列をやめる）。医師紹介の本文だけは写真横の文章なので左のまま */
.is-top .top-intro{text-align:center}
.is-top .top-intro .draft-note{text-align:left}
.is-top .sec-head{text-align:center}
.is-top .sec-head::before{margin-left:auto;margin-right:auto}
.is-top .sec-lead{margin-left:auto;margin-right:auto}
.sec-body>p{margin-left:auto;margin-right:auto;text-align:center}
.card>span:not(.card-media):not(.card-arrow){text-align:center}
.tiles li{text-align:center}
.tiles li::before{text-align:center}
.photo-grid .cap{text-align:center}
.link-panel{text-align:center;padding:26px 24px 60px}
.lp-arrow{right:auto;left:50%;top:auto;bottom:22px;transform:translateX(-50%)}
.link-panel:hover .lp-arrow{transform:translate(-50%,4px)}
.doctor-wrap{text-align:center}
.doctor-text p{margin-left:auto;margin-right:auto}
.is-top .sec.dl .sec-body{text-align:center}
.info{max-width:36em;margin-left:auto;margin-right:auto}
.info dd{margin:0}
.is-top .sec-cta{text-align:center}
@media (min-width:768px){
  .is-top .cards li:first-child{grid-column:1/-1}                /* PC も先頭は全幅（中央揃えの骨格に合わせる） */
  .is-top .cards li:first-child .card-media{aspect-ratio:21/9;flex:none}
  .tiles li{text-align:center}
  .link-panel{padding:36px 28px 72px}
  .lp-arrow{left:50%;right:auto;bottom:26px;transform:translateX(-50%)}
  .link-panel:hover .lp-arrow{transform:translate(-50%,6px)}
  .doctor-wrap{text-align:left}
  .doctor-text p{margin-left:0}
  .is-top .sec.dl .container{display:block}
  .is-top .sec.dl .sec-head{margin-bottom:56px}
  .is-top .sec.dl .sec-body{padding-top:0}
  .info{grid-template-columns:1fr}
}
@media (min-width:1024px){
  .sec-head{display:block}
  .sec-head::before{margin-bottom:22px}
  .is-top .sec-lead{margin-top:16px}
}


/* ==========================================================================
   20. 下層ページを TOP と同じ設計に（2026-09-16・おその氏指示「他のページも TOP と同じように」）
   --------------------------------------------------------------------------
   罫線・枠線で区切らない／余白と面の交互（白／ウォームグレー）で節を分ける／見出しは金のヘアライン＋ゴシック 500・中央揃え／
   本文の段落・箇条書きは読みやすさのため左揃えのまま、40字幅の列を中央に置く／表は横罫線だけ／要点パネル・工程・道順は面で見せる
   ========================================================================== */
body{overflow-x:hidden}                                  /* 節の背景を画面幅いっぱいに出すため（calc(50% - 50vw)） */
h1,h2,h3{font-weight:500;letter-spacing:.04em}
.site-header{border-bottom-color:transparent;box-shadow:0 1px 24px rgba(0,0,0,.06)}
.site-header.over-fv{box-shadow:none}
.site-footer{border-top:0}
.f-bottom{border-top:0;padding-top:0}
.sticky-bar{border-top:0;box-shadow:0 -8px 24px rgba(0,0,0,.06)}
.breadcrumb li+li::before{color:var(--ink-sub)}

/* ページ見出し（H1）：中央・金のヘアライン */
.page-main{padding-top:16px}
.page-heading{padding:28px 0 12px;text-align:center}
.page-heading::before{content:"";display:block;width:32px;height:1px;background:var(--gold);margin:0 auto 18px}
.page-heading h1{font-size:28px;line-height:1.35}
.page-heading.top{padding:0}
.page-heading.top::before{display:none}
.page-body{padding-top:8px}
.page-body .draft-note{max-width:40em;margin-left:auto;margin-right:auto}
.lead{margin:0 auto 12px;text-align:center}

/* 節（.blk）：罫線見出しをやめ、余白と面の交互で分ける。背景は画面幅いっぱい */
.blk{margin:0 calc(50% - 50vw);padding:56px calc(50vw - 50%) 64px}
.lead+.blk,.draft-note+.blk,.operator+.blk{padding-top:56px}
.page-body>.blk:nth-of-type(even){background:var(--bg-sub)}
.page-body h2{border:0;padding:0;margin:0 0 28px;text-align:center;font-size:26px}
.page-body h2::before{content:"";display:block;width:32px;height:1px;background:var(--gold);margin:0 auto 18px}
.page-body h3{font-weight:500;font-size:19px}
.blk>p,.blk>ul,.blk>ol,.blk>h3,.page-body .steps,.steps-visual{margin-left:auto;margin-right:auto}
.blk>ul,.blk>ol{max-width:40em}
.blk>p>.button{display:inline-flex}
.blk>p:has(>.button){text-align:center;max-width:none}

/* 施術ページ冒頭：施術者パネル・要点パネル・ジャンプ（枠なし・面で） */
.operator{border-left:0;justify-content:center;text-align:center;padding:14px 18px;max-width:40em;margin:0 auto 24px}
.facts li{border:0;background:var(--bg-sub)}
.jump a{border:0;background:var(--bg-sub);color:var(--accent)}
.jump a:hover{background:var(--accent);color:var(--accent-ink)}
.hero .ph{border-radius:0}

/* 工程：横罫線をやめ、番号と余白で */
.steps li{border-bottom:0;padding:14px 0}
img.steps-visual{border:0;border-radius:0}

/* 表：縦罫線をなくし横罫線だけ。見出し行は薄い面 */
.tw th,.tw td{border:0;border-bottom:1px solid var(--line)}
.tw th{background:rgba(22,48,90,.06)}
.blk:nth-of-type(even) .tw th{background:rgba(22,48,90,.08)}
.career .tw td:first-child{font-family:var(--font-jp);font-weight:500;font-size:17px}

/* Q&A：Q を中央に置かず、40字の列を中央へ */
#qa h3{max-width:40em;margin-left:auto;margin-right:auto}
#qa h3+p{margin-left:auto;margin-right:auto}

/* 悩み・施術カード（concerns／施術一覧）：TOP と同じ。バッジは面で */
.cards ul{grid-template-columns:1fr 1fr;gap:28px 16px}
.cards.v ul{grid-template-columns:1fr}
.card-badge{border:0;background:var(--bg-sub);padding:4px 12px}
.cards.v .card .ph{border-radius:0;border-width:0}
.cards.v .card-t,.cards.v .card-d{padding-left:0;padding-right:0}
.cards.v .card-badge{margin:8px auto 0}
.card>span:not(.card-media):not(.card-arrow){text-align:center}

/* 医師紹介ページ：SP も写真を大きく（回り込みをやめる） */
.profile .doctor-wrap{display:grid;grid-template-columns:1fr;gap:28px;text-align:center}
.profile .doctor-photo{float:none;width:100%;max-width:360px;margin:0 auto;border-radius:0}
.profile .doctor-text h3{clear:none;padding-top:0}
.profile .titles{justify-content:center}
.profile .titles li{border:0;background:var(--bg-sub);color:var(--accent)}
.blk:nth-of-type(even) .profile .titles li,.blk:nth-of-type(even) .card-badge,.blk:nth-of-type(even) .facts li,.blk:nth-of-type(even) .jump a{background:var(--bg)}

/* 予約・アクセス：地図・道順・ボタン一覧の枠をなくす */
.map-embed{border:0;border-radius:0}
.route{border:0;border-radius:0;background:var(--bg-sub)}
.route[open] summary{border-bottom:0}
.route-steps img{border-radius:0}
.blk:nth-of-type(even) .route{background:var(--bg)}
.button-list .desc{text-align:center}

/* 共通 CTA 帯：TOP の最終節と同じネイビー面 */
.cta{background:var(--accent);color:var(--accent-ink);padding:64px 0}
.cta p{color:rgba(255,255,255,.82)}
.cta .button{background:#fff;color:var(--accent);border-color:#fff}
.cta .button:hover{background:transparent;color:#fff}
.updated{text-align:center}

@media (min-width:768px){
  .page-main{padding-top:24px}
  .page-heading{padding:40px 0 16px}
  .page-heading h1{font-size:36px}
  .page-body h2{font-size:32px;margin-bottom:36px}
  .blk{padding:88px calc(50vw - 50%) 96px}
  .lead+.blk,.draft-note+.blk,.operator+.blk{padding-top:88px}
  .cards ul{grid-template-columns:repeat(3,1fr);gap:44px 28px}
  .cards.v ul{grid-template-columns:repeat(3,1fr)}
  .profile .doctor-wrap{grid-template-columns:300px 1fr;gap:48px;text-align:left}
  .profile .doctor-photo{max-width:none}
  .profile .titles{justify-content:flex-start}
  .cta{padding:96px 0}
  .updated{text-align:center}
}

/* カード・写真・リンクの一覧は 40字幅の制限を受けない（§20 の .blk>ul より後に置く） */
.cards>ul,.blk>.photo-grid,.blk>.link-list,.page-body .jump,.page-body .facts{max-width:none}
/* 旧 PC 規則の align-items:start に負けないようにする（画像枠の幅が 0 になる） */
.cards .card,.cards.v .card{align-items:stretch}
/* ウォームグレー面の上の仮枠は白にする（同色で消えないように。素材が来れば不要） */
.blk:nth-of-type(even) .ph{background:var(--bg)}

/* Q&A：飾りの Q をゴシックに揃える（本文側の「Q. 」は生成器で外す） */
#qa h3::before{font-family:var(--font-jp);font-weight:500;font-size:22px;top:0;color:var(--accent)}
/* 全長点検（2026-09-16）で出た3点 */
.profile .doctor-wrap{align-items:start}                 /* 医師紹介：写真を文章の先頭に揃える（中央揃えだと途中に下がる） */
.blk>h3{max-width:40em}                                  /* 小見出しも本文と同じ 40字幅の列に置く */
@media (min-width:768px) and (max-width:1023px){
  .hero{max-width:40em;margin-left:auto;margin-right:auto}
  .hero .ph,.hero img{aspect-ratio:3/2}                  /* タブレット幅：冒頭の画像が縦に伸びすぎない */
}
.is-top .page-body h2::before{display:none}              /* TOP は .sec-head::before の一本だけ（§20 の h2::before と二重にしない） */

/* §21 悩みページの比較表（2026-09-16・施術の違い）。.wide の横スクロールに加え、最終列を料金列扱いにしない・見出し列は折らない */
.tw.cmp td:last-child{font-weight:400;white-space:normal}
.tw.cmp th:first-child,.tw.cmp td:first-child{white-space:nowrap;font-weight:700}
.tw.cmp th{white-space:nowrap}
@media (max-width:767px){.tw.cmp table{min-width:760px}}
.tw.fee td:first-child{white-space:nowrap}

/* §22 金額の書き分け（2026-09-16）：数字は大きく 500、単位「円」は小さく 400・サブ色。表の料金列と要点ボックスで使う */
.amt{white-space:nowrap}
.amt .n{font-size:1.45em;font-weight:500;letter-spacing:.01em;font-variant-numeric:tabular-nums;line-height:1}
.amt .u{font-size:.8em;font-weight:400;color:var(--ink-sub);margin-left:.12em}
.facts .v .amt .n{font-size:1.5em}
.tw.fee td:last-child{white-space:normal}   /* 料金の目安：範囲表記（〜）は金額単位で折り返す。.amt 自体は nowrap */

/* §23 読みやすさの調整（2026-09-16 おその氏指摘）
   1) 複数行になる文章は「塊は中央に置き、中の文字は左揃え」。見出し・ボタン・1行のラベルは中央のまま
   2) カード・要点ボックスは個数が 1〜2 でも中央に揃える（3列グリッドで左に寄って右が空くのをやめる） */
.lead,.operator,.doctor-wrap,.profile .doctor-wrap,.button-list .desc,.link-panel .lp-d,.sec-body>p,.sec-lead,.is-top .top-intro p{text-align:left}
.lead,.sec-lead,.sec-body>p,.is-top .top-intro p{max-width:40em;margin-left:auto;margin-right:auto}
.operator{justify-content:flex-start}
.is-top .top-intro .sec-head,.is-top .top-intro h1{text-align:center}
.tiles li{text-align:left}
.tiles li::before{text-align:center}
body:not(.is-top) .card>span:not(.card-media):not(.card-arrow){text-align:left}
body:not(.is-top) .cards.v .card-badge{margin-left:0;margin-right:auto}
/* 一覧：グリッドをやめて折り返しフレックス＋中央寄せ。幅は従来の 2列（SP）／3列（PC）と同じ */
body:not(.is-top) .cards ul{display:flex;flex-wrap:wrap;justify-content:center;gap:28px 16px}
body:not(.is-top) .cards li{flex:0 0 calc((100% - 16px)/2);display:grid}
.page-body .facts{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.page-body .facts li{flex:0 0 calc(50% - 5px)}
@media (min-width:768px){
  body:not(.is-top) .cards ul{gap:44px 28px}
  body:not(.is-top) .cards li{flex-basis:calc((100% - 56px)/3)}
  .page-body .facts{gap:12px}
  .page-body .facts li{flex-basis:calc((100% - 24px)/3)}
}
@media (min-width:1024px){
  .page-body .intro .facts li{flex-basis:calc(50% - 6px)}
}

/* §24 太さと黒の設計（2026-09-16 おその氏指摘「太すぎ・黒が強い・箱に対して文字が大きい・洗練感がない」）
   方針：太字（700）を強調に使わない。強調は 500 と色（ネイビー）で。本文の黒は #1b1b1b → #242424。要点ボックスはラベル小・値は中太・余白広め */
:root{--ink:#242424}
.facts li{padding:18px 18px 20px}
.facts .k{font-size:12px;font-weight:400;letter-spacing:.08em;margin-bottom:8px}
.facts .v{font-size:16px;font-weight:500;line-height:1.6}
.facts .v .amt .n{font-size:1.6em;font-weight:500}
.operator{font-weight:400}
.operator .lbl{font-weight:500}
.tw th{font-weight:500;color:var(--ink-sub)}
.tw td:last-child,.tw.cmp th:first-child,.tw.cmp td:first-child{font-weight:500}
.jump a{font-weight:500}
.button{font-weight:500;letter-spacing:.06em}
.card-badge{font-weight:400}
.page-body strong,.tiles li strong,.sec-body strong{font-weight:500;color:var(--accent)}
.steps li::before{font-weight:500}
@media (min-width:768px){
  .facts .v{font-size:17px}
  .facts li{padding:20px 20px 22px}
}

/* ==========================================================================
   §25 下層ページの再設計（2026-09-24 おその氏指摘「殺風景・デザイン性が皆無・見出しが太くて野暮ったい・余白が窮屈」）
   --------------------------------------------------------------------------
   1) 上部にタイトル枠（英字ラベル＋H1＋パンくず）と左右いっぱいのイメージ画像（素材が揃うまでグレーの仮枠）
   2) 英字のあしらい：タイトル枠の英字・背景の大きな英字・節見出しの「番号＋英字」・CTA の英字（Cormorant Garamond イタリック）
   3) 見出しは左揃え。見出し・本文・表・カードの左端を 1 本の列（--col）に揃える。文章は 40 字幅で左から
   4) 和文見出しは細く（300）・字間広め。太字の印象を消す
   5) 余白：節の上下 SP 96／PC 152px、見出し下 SP 44／PC 64px。1 画面に載る情報を減らす
   TOP（.is-top）には効かせない
   ========================================================================== */
:root{--col:960px}
body:not(.is-top) .page-main{padding-top:0}
body:not(.is-top) .page-body{padding-top:0;counter-reset:blk}

/* 1) タイトル枠 */
.page-hero{position:relative;overflow:hidden;background:var(--bg)}
.ph-head{position:relative;z-index:1;max-width:calc(var(--col) + var(--gutter) * 2);padding-top:56px;padding-bottom:44px}
.ph-en{display:flex;align-items:center;gap:14px;margin:0 0 14px;font-family:var(--font-serif);font-style:italic;font-weight:400;font-size:20px;line-height:1;letter-spacing:.04em;color:var(--gold)}
.ph-en::after{content:"";width:40px;height:1px;background:var(--gold)}
.page-hero h1{font-family:var(--font-jp);font-weight:300;font-size:28px;line-height:1.5;letter-spacing:.08em;color:var(--ink);text-align:left}
.page-hero h1 .h1-x{color:var(--gold);font-weight:300}
.page-hero .breadcrumb{padding:0;margin-top:28px;font-size:12px;letter-spacing:.06em}
.ph-mark{position:absolute;z-index:0;right:-.06em;top:24px;font-family:var(--font-serif);font-style:italic;font-weight:400;font-size:88px;line-height:1;white-space:nowrap;color:rgba(22,48,90,.045);pointer-events:none;user-select:none}
.ph-visual{position:relative;height:210px;overflow:hidden}
.ph-visual img{width:100%;height:100%;object-fit:cover}
.ph-visual.is-empty{display:grid;place-items:center;background:linear-gradient(120deg,#cfcfcf,#dcdcdc 60%,#d4d4d4)}
.ph-visual.is-empty span{font-family:var(--font-serif);font-style:italic;font-size:15px;letter-spacing:.3em;color:rgba(255,255,255,.95)}

/* 3) 列：見出し・本文・表・カードの左端を揃える */
.blk-in{max-width:var(--col);margin:0 auto}
.blk-in>p,.blk-in>ul,.blk-in>ol,.blk-in>h3,.blk-in>.steps,.blk-in>.steps-visual,.blk-in>.doctor-wrap .doctor-text p{max-width:40em;margin-left:0;margin-right:0}
.blk-in>p{line-height:2;margin-bottom:1.4em}
.blk-in>p:has(>.button){text-align:left;max-width:none;margin-top:2.4em}
.blk-in>ul>li,.blk-in>ol>li{margin:10px 0}
.page-body>.lead,.page-body>.operator,.page-body>.intro,.page-body>.jump,.page-body>.draft-note,body:not(.is-top) .updated{margin-left:max(0px,calc((100% - var(--col)) / 2));margin-right:auto}
.page-body>.intro,.page-body>.jump{max-width:var(--col)}
body:not(.is-top) .updated{text-align:left;max-width:var(--col)}

/* 2) 節の見出し：番号＋英字（飾り）→ 和文（細字・左揃え） */
.blk-head{counter-increment:blk;margin:0 0 44px}
.eyebrow{display:flex;align-items:center;gap:14px;margin:0 0 14px;font-family:var(--font-serif);font-weight:400;line-height:1;color:var(--gold)}
.eyebrow::before{content:counter(blk,decimal-leading-zero);font-size:15px;letter-spacing:.12em}
.eyebrow .en{display:inline-flex;align-items:center;gap:14px;font-style:italic;font-size:19px;letter-spacing:.04em;color:var(--accent)}
.eyebrow .en::before{content:"";width:28px;height:1px;background:var(--gold)}
body:not(.is-top) .page-body h2{text-align:left;font-weight:300;font-size:24px;line-height:1.55;letter-spacing:.08em;margin:0}
body:not(.is-top) .page-body h2::before{display:none}
body:not(.is-top) .page-body h3{font-weight:400;letter-spacing:.06em;margin:56px 0 14px}
body:not(.is-top) .blk-head+h3{margin-top:0}

/* 4) 太さ：細身の見出しに揃える（強調は §24 のとおり 500＋ネイビー） */
body:not(.is-top) .card-t,body:not(.is-top) .lp-t,.route summary{font-weight:400;letter-spacing:.05em}
body:not(.is-top) .doctor-text p:first-child strong{font-weight:300;letter-spacing:.08em}
body:not(.is-top) .h1-x{font-weight:300}

/* 5) 余白 */
.blk{padding-top:96px;padding-bottom:104px}
.lead+.blk,.draft-note+.blk,.operator+.blk,.jump+.blk{padding-top:96px}
.page-body>.lead{margin-top:64px;margin-bottom:48px;line-height:2}
.page-body>.lead+.blk{margin-top:0}
.page-body>.operator{margin-bottom:40px}
.page-body>.intro{margin-bottom:48px}
.page-body .jump{margin-bottom:72px}
body:not(.is-top) .tw th,body:not(.is-top) .tw td{padding:18px 14px}
.tw{margin-bottom:2em}
#qa h3,#qa h3+p{margin-left:0;margin-right:0}
#qa h3{margin-top:48px}
#qa .blk-head+h3{margin-top:0}
body:not(.is-top) .cards ul{justify-content:flex-start}

/* CTA 帯：英字を添える */
.cta-en{margin:0 0 10px!important;font-family:var(--font-serif);font-style:italic;font-size:30px;line-height:1.1;letter-spacing:.04em;color:var(--gold)!important}
.cta{padding:96px 0}

@media (min-width:768px){
  .ph-head{padding-top:88px;padding-bottom:64px}
  .ph-en{font-size:24px;margin-bottom:18px}
  .page-hero h1{font-size:40px;letter-spacing:.1em}
  .page-hero .breadcrumb{margin-top:36px}
  .ph-mark{font-size:200px;top:40px}
  .ph-visual{height:clamp(300px,30vw,440px)}
  .blk{padding-top:152px;padding-bottom:160px}
  .lead+.blk,.draft-note+.blk,.operator+.blk,.jump+.blk{padding-top:152px}
  .page-body>.lead{margin-top:104px;margin-bottom:64px}
  .page-body>.intro{margin-bottom:64px}
  .page-body .jump{margin-bottom:104px}
  .blk-head{margin-bottom:64px}
  .eyebrow{margin-bottom:18px}
  .eyebrow .en{font-size:22px}
  body:not(.is-top) .page-body h2{font-size:32px}
  body:not(.is-top) .cards ul{gap:64px 28px}
  .cta{padding:140px 0}
  .cta-en{font-size:44px}
}
@media (min-width:768px) and (max-width:1023px){
  .page-body>.intro .hero{margin-left:0}
}
/* §25 目視での調整（2026-09-24） */
.eyebrow::before,.steps li::before,.route-steps .cap::before,.ph-en{font-variant-numeric:lining-nums}
.eyebrow::before{font-size:16px}
body:not(.is-top) .page-body .facts{justify-content:flex-start}
@media (max-width:767px){
  .ph-mark{display:none}
  .page-hero h1{font-size:25px}
  .page-hero .h1-a{display:block}
  .page-hero .h1-b{display:inline}
  .page-hero .h1-x{margin:0 .4em 0 0}
}
.blk-in>.cards+ul,.blk-in>.cards+p{margin-top:56px}
@media (max-width:767px){body:not(.is-top) .tw th,body:not(.is-top) .tw td{padding:16px 8px}}

/* §26 TOP 最下部とフッターの役割分担（2026-09-24 おその氏指摘「情報が重複」）
   TOP 最下部＝行動（予約手段 3 つ）。フッター＝全ページ共通の基本情報（住所・最寄駅・電話・診療時間）＋サイト内リンク */
.sec--navy .button-list{margin:0}
.sec--navy .button-list .desc{color:rgba(255,255,255,.72);text-align:center}
.sec--navy .sec-body>p:last-child{margin-top:40px;font-size:15px;color:rgba(255,255,255,.82)}
.sec--navy .sec-body>p a{text-underline-offset:4px}
.f-brand .site-logo{margin-bottom:20px}
.f-access p{margin:0 0 4px;font-size:14px;line-height:1.9}
.f-tel a{font-size:17px;letter-spacing:.04em}
.f-nav ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.f-nav a{display:flex;align-items:center;min-height:44px;font-size:14px;letter-spacing:.04em;text-decoration:none;color:var(--ink)}
.f-nav a:hover{color:var(--accent);text-decoration:underline;text-underline-offset:4px}
.f-bottom{margin-top:32px;font-size:13px}
@media (min-width:768px){
  .f-top{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start}
  .f-nav ul{grid-template-columns:repeat(2,minmax(0,12em));justify-content:end}
  .is-top .sec--navy .sec-body{max-width:var(--col);margin:0 auto}
}
.button-list .desc{text-wrap:balance;word-break:keep-all;overflow-wrap:anywhere}
.page-body .button-list{padding-left:0}
.legal-note{padding-left:var(--gutter);padding-right:var(--gutter)}   /* 左右余白が 0 になっていた（padding:24px 0 が .container の左右を上書き） */

/* §27 TOP も左揃え＋英字の補足（2026-09-24 おその氏指示「ご予約の見出し・リードを左揃えに。他の要素も同じく。見出しに英文の補足デザイン」）
   §19 の中央揃え（9/16）を TOP でも解除し、下層（§25）と同じ「番号＋英字 → 和文見出し → リード」の左揃えにそろえる */
.is-top .page-body{counter-reset:blk}
.is-top .sec-head{counter-increment:blk;text-align:left}
.is-top .sec-head::before{display:none}                 /* 金のヘアラインは英字の前の線に置き換え */
.is-top .sec-lead,.is-top .sec-body>p{margin-left:0;margin-right:0;text-align:left}
.sec--navy .eyebrow .en{color:#fff}
.is-top .tiles li,.is-top .photo-grid .cap,.is-top .card>span:not(.card-media):not(.card-arrow),.is-top .sec-cta,
.is-top .sec--navy .button-list .desc,.is-top .doctor-wrap,.is-top .link-panel{text-align:left}
.is-top .doctor-text p{margin-left:0}
.is-top .link-panel{padding:28px 64px 28px 24px}
.is-top .lp-arrow{left:auto;right:24px;top:50%;bottom:auto;transform:translateY(-50%)}
.is-top .link-panel:hover .lp-arrow{transform:translate(4px,-50%)}
.is-top .sec--navy .sec-body{margin-left:0}
@media (min-width:768px){
  .is-top .link-panel{padding:36px 32px 72px}
  .is-top .lp-arrow{left:auto;right:32px;top:auto;bottom:28px;transform:none}
  .is-top .link-panel:hover .lp-arrow{transform:translateX(6px)}
}
.is-top .page-body h2{text-align:left}
.is-top .tiles li::before{text-align:left}
.is-top .page-body .photo-grid,.is-top .page-body .cards ul,.is-top .page-body .tiles ul{padding-left:0}
.is-top .top-intro,.is-top .top-intro h1,.is-top .top-intro .sec-head{text-align:left}
/* §28 ご予約：ボタンごとの説明をやめ、ボタン下に補足としてまとめる（2026-09-24 おその氏指摘） */
.button-list .desc:empty{display:none}
.is-top .sec--navy .button-list+p{margin:32px 0 0;font-size:14px;line-height:2;color:rgba(255,255,255,.72);max-width:40em}
.is-top .sec--navy .button-list+p+p{margin-top:12px}
.is-top .sec--navy .button-list+p+p{margin-top:12px;font-size:14px;line-height:2;color:rgba(255,255,255,.82)}
.blk-in>.button-list+p,.blk-in>.button-list+p+p{margin:32px 0 0;font-size:15px;line-height:2;color:var(--ink-sub)}
.blk-in>.button-list+p+p{margin-top:12px}
.blk-in>.info{margin-left:0;margin-right:0}   /* §19 の中央寄せ（max-width:36em＋auto）を下層で解除 */

/* §29 英字あしらいの簡素化（2026-09-24 おその氏指摘「06 ― Reservation の長い横線は不要・英文の斜体は不要」）
   番号と英字の間の線、タイトル枠の英字の後ろの線を削除。英字はすべて立体（italic をやめる） */
.eyebrow .en::before,.ph-en::after{display:none}
.eyebrow,.eyebrow .en{gap:12px}
.eyebrow .en,.ph-en,.ph-mark,.cta-en,.ph-visual.is-empty span{font-style:normal}
.eyebrow .en{letter-spacing:.08em}
.ph-en{letter-spacing:.08em}

/* §30 英字の色と大文字（2026-09-24 おその氏指示「数字と英文は同系色に」「英文はすべて大文字」）
   番号・英字とも金。英字は大文字＋字間 .16em（大文字は大きく見えるので 1 段小さく） */
.eyebrow,.eyebrow .en,.sec--navy .eyebrow .en{color:var(--gold)}
.eyebrow .en,.ph-en,.ph-mark,.cta-en,.ph-visual.is-empty span{text-transform:uppercase}
.eyebrow::before{font-size:15px;letter-spacing:.14em}
.eyebrow .en{font-size:15px;letter-spacing:.16em}
.ph-en{font-size:16px;letter-spacing:.16em}
.cta-en{font-size:22px;letter-spacing:.16em}
@media (min-width:768px){
  .eyebrow::before,.eyebrow .en{font-size:16px}
  .ph-en{font-size:18px}
  .cta-en{font-size:28px}
  .ph-mark{font-size:150px}
}

/* ==========================================================================
   §31 余白と文字幅の規則（2026-09-24 おその氏指摘「外回りが狭く内側が広い・文字幅に規則性がない」）
   --------------------------------------------------------------------------
   ① 外側（画面端→中身）--gutter：SP 24／タブレット 40／PC 56px。中身の最大幅 --col 1080px は全ページ・ヘッダー・フッター共通
   ② 内側（列の間）--gap：SP 16／タブレット 24／PC 40px。必ず ① より狭い。縦に並ぶ行の間は ② × 1.5
      部品の中の小さな集まり（要点ボックス・ジャンプ・ボタン等）は --gap-s 12px
   ③ 文章の幅 --measure：720px（本文 18px で 1 行 40 字）。リード文も同じ右端で折り返す。見出し・カード・表・写真は列の幅に従う
   ========================================================================== */
:root{--gutter:24px;--gap:16px;--gap-s:12px;--col:1080px;--measure:40em}
@media (min-width:768px){:root{--gutter:40px;--gap:24px}}
@media (min-width:1024px){:root{--gutter:56px;--gap:40px}}

/* ① 外側：どのページも同じ左端 */
.container,.ph-head{max-width:calc(var(--col) + var(--gutter) * 2);padding-left:var(--gutter);padding-right:var(--gutter)}
.blk-in{max-width:var(--col)}
.page-body>.lead,.page-body>.operator,.page-body>.intro,.page-body>.jump,.page-body>.draft-note,body:not(.is-top) .updated{margin-left:max(0px,calc((100% - var(--col)) / 2))}
.fv-overlay{left:max(var(--gutter),calc((100% - var(--col)) / 2))}
@media (min-width:768px){.fv-overlay{left:max(var(--gutter),calc((100% - var(--col)) / 2))}}
@media (min-width:1024px){.fv-overlay{left:max(var(--gutter),calc((100% - var(--col)) / 2))}}

/* ② 内側：列の間は --gap、行の間は --gap × 1.5 */
.cards ul,.is-top .cards ul{gap:calc(var(--gap) * 1.5) var(--gap)}
body:not(.is-top) .cards ul{gap:calc(var(--gap) * 1.5) var(--gap)}
body:not(.is-top) .cards li{flex-basis:calc((100% - var(--gap)) / 2)}
.tiles ul{gap:calc(var(--gap) * 1.5) var(--gap)}
.photo-grid,.is-top .photo-grid{gap:calc(var(--gap) * 1.5) var(--gap)}
.link-list{gap:var(--gap-s)}
.button-list{gap:var(--gap-s)}
.doctor-wrap,.profile .doctor-wrap{gap:calc(var(--gap) * 1.5) var(--gap)}
.intro{gap:var(--gap)}
.f-top{gap:calc(var(--gap) * 1.5) var(--gap)}
.page-body .facts,.page-body .jump{gap:var(--gap-s)}
.page-body .facts li{flex-basis:calc((100% - var(--gap-s)) / 2)}
.route-steps{gap:var(--gap)}
@media (min-width:768px){
  body:not(.is-top) .cards li{flex-basis:calc((100% - var(--gap) * 2) / 3)}
  .page-body .facts li{flex-basis:calc((100% - var(--gap-s) * 2) / 3)}
  .link-list{gap:var(--gap)}
  .button-list{gap:var(--gap-s) var(--gap)}
  .doctor-wrap{grid-template-columns:5fr 7fr;gap:var(--gap)}
  .profile .doctor-wrap{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--gap)}
  .f-nav ul{gap:0 var(--gap)}
}
@media (min-width:1024px){
  .page-body .intro .facts li{flex-basis:calc((100% - var(--gap-s)) / 2)}
}

/* ③ 文章の幅：1 行 40 字に統一（36 字・制限なしの箇所をなくす） */
.lead,.sec-lead,.sec-body>p,.blk-in>p,.blk-in>ul,.blk-in>ol,.blk-in>h3,.blk-in>.steps,.doctor-text p,#qa h3,#qa h3+p,
.operator,.info,.is-top .top-intro p,.is-top .sec--navy .button-list+p,.blk-in>.button-list+p,.blk-in>.button-list+p+p,.tw.cmp+p{max-width:var(--measure)}
.info{margin-left:0;margin-right:0}
.is-top .info{margin-left:0}
.sec--navy .button-list .button{min-width:0;width:100%}
@media (min-width:768px){.button-list{grid-template-columns:repeat(2,minmax(0,1fr))}}   /* 2026-10-22 3→2（電話予約を外した） */
.is-top .sec-lead{margin-top:16px}
/* ③ 補正：文章の幅は字数でなく実寸で揃える（字の大きいリード文だけ右端が伸びていた）。本文 18px×40字＝720px */
:root{--measure:720px}
.operator{max-width:var(--measure)}

/* ==========================================================================
   §32 ヘッダー（2026-09-24 おその氏指示「口元専門サイトの構成・レイアウトをベースに。本サイトへのリンクはつける」）
   --------------------------------------------------------------------------
   ロゴ 2 段（上：Maison PUREJU 小さく字間広め／下：MENS 大きく）。PC（1100px〜）はナビ横並び＋一覧パネル（悩み 7＋施術から選ぶ）＋本サイト＋予約。
   1100px 未満はハンバーガー → 全画面メニュー（中央揃え・悩みは開閉式・下に予約と本サイト）。色・線・角は男性サイトの方針（罫線なし・角丸なし）
   ========================================================================== */
.site-header{background:rgba(255,255,255,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.header-inner{flex-wrap:nowrap;min-height:64px;padding-top:12px;padding-bottom:12px;gap:24px}
.site-header .site-logo{display:block;font-family:var(--font-serif);font-size:12px;font-weight:500;letter-spacing:.2em;line-height:1.1;color:var(--ink)}
.site-header .site-logo small{display:block;margin-top:4px;font-family:var(--font-serif);font-size:22px;font-weight:500;letter-spacing:.28em;color:var(--ink)}
.gnav{display:none}
.hamburger{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;width:44px;height:44px;padding:0;margin-right:-10px;border:0;background:none;cursor:pointer}
.hamburger span{display:block;width:24px;height:1.5px;background:var(--ink)}
.site-header.over-fv{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}

/* PC ナビ */
@media (min-width:1100px){
  .header-inner{min-height:80px}
  .site-header .site-logo{font-size:13px}
  .site-header .site-logo small{font-size:24px}
  .hamburger{display:none}
  .gnav{display:flex;align-items:center;gap:28px}
  .gnav>a,.mega-trigger{display:inline-flex;align-items:center;min-height:44px;padding:0;border:0;background:none;font-family:var(--font-body);font-size:13.5px;font-weight:400;letter-spacing:.08em;color:var(--ink);text-decoration:none;cursor:pointer;transition:color .3s}
  .gnav>a:hover,.mega-trigger:hover,.mega-trigger[aria-expanded="true"]{color:var(--accent)}
  .mega-trigger::after{content:"";width:6px;height:6px;margin-left:9px;border-right:1.3px solid currentColor;border-bottom:1.3px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .3s}
  .mega-trigger[aria-expanded="true"]::after{transform:translateY(1px) rotate(-135deg)}
  .gnav .gnav-main{color:var(--ink-sub);font-size:12.5px}
  .gnav .gnav-main::after{content:"→";margin-left:6px;color:var(--gold)}
  .gnav .h-cta{min-height:44px;padding:0 24px;border:1px solid var(--accent);color:var(--accent);font-size:13px;letter-spacing:.1em;transition:background-color .3s,color .3s}
  .gnav .h-cta:hover{background:var(--accent);color:var(--accent-ink)}
}

/* 一覧パネル（PC） */
.mega{display:none}
@media (min-width:1100px){
  .mega{display:block;position:absolute;left:0;right:0;top:100%;background:rgba(255,255,255,.98);box-shadow:0 24px 40px -24px rgba(0,0,0,.18);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .3s,transform .3s,visibility .3s}
  .site-header.mega-open{background:rgba(255,255,255,.98)}
  .site-header.mega-open .mega{opacity:1;visibility:visible;transform:none}
  .mega-inner{padding-top:32px;padding-bottom:40px}
  .mega-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap-s) var(--gap)}
  .mega-card{display:block;padding:16px 0;text-decoration:none;color:var(--ink)}
  .mega-jp{display:block;font-size:16px;font-weight:400;letter-spacing:.06em;transition:color .3s}
  .mega-en{display:block;margin-top:6px;font-family:var(--font-serif);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
  .mega-card:hover .mega-jp{color:var(--accent)}
  .mega-all .mega-jp::after{content:"→";margin-left:8px;color:var(--gold)}
}

/* 全画面メニュー（1100px 未満） */
#sp-menu{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow-y:auto;padding:72px var(--gutter) 40px;background:rgba(255,255,255,.98);opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
#sp-menu.open{opacity:1;visibility:visible}
html.menu-open{overflow:hidden}
#sp-menu nav{width:100%;max-width:360px;text-align:center}
#sp-menu ul{list-style:none;margin:0;padding:0}
#sp-menu li>a,#sp-menu summary{display:flex;align-items:center;justify-content:center;min-height:52px;font-size:17px;letter-spacing:.1em;color:var(--ink);text-decoration:none;cursor:pointer;list-style:none}
#sp-menu summary::-webkit-details-marker{display:none}
#sp-menu summary::after{content:"";width:6px;height:6px;margin-left:10px;border-right:1.3px solid currentColor;border-bottom:1.3px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .3s}
#sp-menu details[open] summary::after{transform:translateY(1px) rotate(-135deg)}
.sp-acc-body{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--gap);padding:4px 0 12px}
.sp-acc-body a{display:flex;align-items:center;justify-content:center;min-height:44px;font-size:14px;letter-spacing:.06em;color:var(--ink-sub);text-decoration:none}
#sp-menu .sp-cta{display:flex;align-items:center;justify-content:center;min-height:56px;margin-top:28px;background:var(--accent);color:var(--accent-ink);font-size:15px;letter-spacing:.1em;text-decoration:none}
#sp-menu .sp-main{display:inline-flex;align-items:center;min-height:44px;margin-top:20px;font-size:13px;letter-spacing:.06em;color:var(--ink-sub);text-underline-offset:4px}
#sp-menu .sp-main::after{content:"→";margin-left:6px;color:var(--gold)}
.sp-close{position:absolute;top:12px;right:calc(var(--gutter) - 10px);width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer}
.sp-close::before,.sp-close::after{content:"";position:absolute;top:50%;left:50%;width:24px;height:1.5px;background:var(--ink)}
.sp-close::before{transform:translate(-50%,-50%) rotate(45deg)}
.sp-close::after{transform:translate(-50%,-50%) rotate(-45deg)}
@media (prefers-reduced-motion:reduce){#sp-menu,.mega,.mega-trigger::after{transition:none}}
#sp-menu,.site-header.mega-open,.mega{background:#fff}

/* §33 フッター（2026-09-24 おその氏指示「口元専門サイトを参考に情報・レイアウトを調整」）
   濃色の面／ロゴ（2段）とアクセス（住所・Google Maps・診療時間・TEL）の2列／下段に本サイト・©／規約リンク4つ。サイト内リンク一覧は置かない */
.site-footer{background:var(--brand-dark);color:rgba(255,255,255,.72);padding:64px 0 40px;font-size:13px;line-height:1.95;border:0}
.site-footer a{color:#fff;text-decoration:none}
.site-footer .f-top{display:grid;grid-template-columns:1fr;gap:calc(var(--gap) * 1.5);margin-bottom:40px}
.f-logo{font-family:var(--font-serif);font-size:13px;font-weight:500;letter-spacing:.2em;line-height:1.1;color:#fff}
.f-logo small{display:block;margin-top:6px;font-size:24px;letter-spacing:.28em}
.site-footer .f-access{font-style:normal;color:rgba(255,255,255,.78)}
.site-footer .f-access p{margin:0}
.site-footer .f-addr{margin:0 0 10px;font-size:13px;line-height:1.95}
.f-map{display:inline-flex;align-items:center;min-height:44px;font-family:var(--font-serif);font-size:14px;letter-spacing:.14em;text-transform:uppercase;border-bottom:1px solid rgba(255,255,255,.35)}
.f-map:hover{border-color:#fff}
.f-hours{margin-top:12px!important;font-size:12.5px;color:rgba(255,255,255,.72)}
.site-footer .f-tel{margin-top:4px!important;font-size:13px}
.site-footer .f-tel a{display:inline-flex;align-items:center;min-height:44px;font-size:16px;letter-spacing:.06em}
.site-footer .f-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px var(--gap);margin:0;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);font-size:12px;color:rgba(255,255,255,.5)}
.site-footer .f-bottom a{display:inline-flex;align-items:center;min-height:44px;color:rgba(255,255,255,.85);letter-spacing:.04em}
.site-footer .f-bottom a::after{content:"→";margin-left:6px;color:var(--gold)}
.site-footer .f-bottom a:hover{color:#fff}
.f-legal{display:flex;flex-wrap:wrap;gap:0 22px;margin-top:8px;font-size:12px;letter-spacing:.04em}
.site-footer .f-legal a{display:inline-flex;align-items:center;min-height:44px;color:rgba(255,255,255,.6)}
.site-footer .f-legal a:hover{color:#fff}
.is-top .site-footer{border:0}
@media (min-width:768px){
  .site-footer{padding:88px 0 48px}
  .site-footer .f-top{grid-template-columns:auto 1fr;gap:var(--gap) calc(var(--gap) * 2);align-items:start}
  .f-logo small{font-size:26px}
}

/* §34 ページ上部の再構成（2026-09-24 おその氏指示「上の帯はパンくずだけ。英字とページ名は画像エリアの上に乗せる。背景の大きな英字は不要」）
   パンくず帯 → 画像エリア（グレーの仮枠）。英字ラベル＋H1 は画像の左下に白で重ね、左下に向けて暗くするグラデーションで読みやすさを確保 */
.page-hero .breadcrumb{padding-top:18px;padding-bottom:18px;margin:0}
.ph-mark{display:none}
.ph-visual{position:relative;display:flex;align-items:flex-end;height:260px;overflow:hidden}
.ph-visual>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph-visual.is-empty{display:flex;place-items:initial;background:linear-gradient(120deg,#c9c9c9,#d8d8d8 60%,#cfcfcf)}
.ph-ph{position:absolute;right:var(--gutter);top:16px;font-family:var(--font-serif);font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.9)}
.ph-scrim{position:absolute;inset:0;background:linear-gradient(to top right,rgba(0,0,0,.55) 0%,rgba(0,0,0,.18) 45%,rgba(0,0,0,0) 75%);pointer-events:none}
.page-hero .ph-head{position:relative;z-index:1;width:100%;padding-top:32px;padding-bottom:32px}
.page-hero .ph-en{color:var(--gold);margin-bottom:12px}
.page-hero h1{color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.25)}
.page-hero h1 .h1-x{color:var(--gold)}
@media (min-width:768px){
  .page-hero .breadcrumb{padding-top:22px;padding-bottom:22px}
  .ph-visual{height:clamp(340px,34vw,480px)}
  .page-hero .ph-head{padding-top:48px;padding-bottom:56px}
}
/* §34 補正：下寄せ（place-items:initial が align-items を打ち消していた）／旧「IMAGE」用の span 指定が見出しに効いていたのを解除／パンくずの左右余白 */
.ph-visual,.ph-visual.is-empty{align-items:flex-end}
.ph-visual.is-empty .ph-head span{font-family:inherit;font-size:inherit;font-style:normal;letter-spacing:inherit;text-transform:none;color:inherit}
.ph-visual.is-empty .ph-head .h1-x{color:var(--gold)}
.page-hero .breadcrumb{padding-left:var(--gutter);padding-right:var(--gutter)}
.page-hero .breadcrumb{margin-left:auto;margin-right:auto}
.page-hero .ph-head{min-width:0;margin-left:auto;margin-right:auto}
.page-hero h1{overflow-wrap:anywhere}
.ph-scrim{background:linear-gradient(to top,rgba(0,0,0,.58) 0%,rgba(0,0,0,.32) 55%,rgba(0,0,0,.06) 100%)}
/* §34 補正②（2026-09-24 おその氏指示「画像の上の文字は下部配置ではなく中央配置」）：上下中央・左揃えは維持。暗がりは全体に均一＋左側をやや濃く */
.ph-visual,.ph-visual.is-empty{align-items:center}
.page-hero .ph-head{padding-top:24px;padding-bottom:24px}
.ph-scrim{background:linear-gradient(to right,rgba(0,0,0,.42) 0%,rgba(0,0,0,.28) 55%,rgba(0,0,0,.18) 100%)}

/* §35 見出しは明朝（2026-09-24 おその氏指示「ゴシックだと品や格がない」）
   対象：H1・H2・H3・カード名・リンクパネル名・医師名・道順の見出し。本文・ナビ・ボタン・英字はそのまま
   書体 Zen Old Mincho（本サイト・口元専門サイトと同じ）。太さ 500（明朝は細いとかすれる）・字間 .08em */
html[data-theme]{--font-head:var(--font-mincho)}
h1,h2,h3,.page-hero h1,body:not(.is-top) .page-body h2,.is-top .page-body .sec-head h2,.page-body h3,
.card-t,.lp-t,.doctor-text p:first-child strong,body:not(.is-top) .doctor-text p:first-child strong,.route summary,.is-top .top-intro h1{
  font-family:var(--font-mincho);font-weight:500;letter-spacing:.08em}
.page-hero h1{font-weight:500}
body:not(.is-top) .card-t,body:not(.is-top) .lp-t{font-weight:500}
@media (max-width:767px){.card-t{letter-spacing:.03em}}
@media (max-width:767px){.card-t{font-size:17px}}

/* §36（2026-09-24 おその氏指摘）
   1) 冒頭の文章（.lead）は本文と同じ大きさ（大きくする意味が薄い）
   2) 冒頭のジャンプボタン列は文章と同じ幅（--measure 720px）にそろえる
   3) 画像の上の見出しは影なし・太さ 400（野暮ったさを抑える）。可読性は暗がりで確保 */
.lead,.page-body>.lead{font-size:17px;line-height:2}
.page-body .jump,.page-body>.jump{max-width:var(--measure)}
.page-hero h1,.page-hero .ph-head h1{font-weight:400;text-shadow:none}
.ph-scrim{background:linear-gradient(to right,rgba(0,0,0,.48) 0%,rgba(0,0,0,.32) 55%,rgba(0,0,0,.2) 100%)}
@media (min-width:768px){.lead,.page-body>.lead{font-size:18px}}
.page-body>.intro+.jump{max-width:var(--col)}   /* ボタン列は直上の要素の幅に合わせる（施術ページ＝画像＋要点の 1080px） */
/* §37 ページ内の移動ボタンをページ名画像の直下へ（2026-09-24 おその氏指示）。幅は列（1080px）、画像との間は ② 行の間と同じ */
.page-body>.jump:first-child{max-width:var(--col);margin-top:calc(var(--gap) * 1.5);margin-bottom:0}
.page-body>.jump:first-child+.lead{margin-top:64px}
@media (min-width:768px){.page-body>.jump:first-child+.lead{margin-top:88px}}
.page-body .jump,.page-body>.jump:first-child{gap:var(--gap-s)}

/* §38 道順カルーセル（2026-09-24 おその氏指示「元の参考＝カルーセル方式で見やすい。仕様は変えない」）
   仕様は本サイト・口元専門サイト C-10 と同じ（駅タブ／進み具合バー／前後ボタン／写真 3:4／枚数／説明／電話の案内）。色・角だけ男性サイトの方針 */
.ag{max-width:560px}
.ag-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.ag-tab{min-height:44px;padding:10px 18px;border:1px solid var(--line);background:transparent;color:var(--ink-sub);font-family:var(--font-body);font-size:13px;letter-spacing:.04em;cursor:pointer;transition:background-color .25s,color .25s,border-color .25s}
.ag-tab:hover{border-color:var(--accent)}
.ag-tab.is-on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.ag-bar{display:flex;gap:6px;margin-bottom:18px}
.ag-bar button{flex:1;height:3px;min-height:0;padding:0;border:0;background:var(--line);cursor:pointer;transition:background-color .3s}
.ag-bar button.is-done{background:var(--accent)}
.ag-row{display:flex;align-items:center;gap:12px}
.ag-fig{flex:1;min-width:0;margin:0;aspect-ratio:3/4;overflow:hidden;background:var(--bg-sub)}
.ag-fig img{width:100%;height:100%;object-fit:cover;display:block}
.ag-nav{flex:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;background:var(--accent);color:var(--accent-ink);cursor:pointer;transition:opacity .25s}
.ag-nav:disabled{opacity:.25;cursor:not-allowed}
.ag-nav svg{width:14px;height:14px}
.ag-count{margin:16px 0 0;text-align:center;font-size:13px;color:var(--ink-sub)}
.ag-count b{font-size:18px;font-weight:500;color:var(--ink)}
.ag-count span{margin:0 7px;opacity:.45}
.blk-in .ag-cap{max-width:none;margin:12px 0 0;min-height:3.9em;text-align:center;font-size:15px;line-height:1.95;color:var(--ink-sub)}
.blk-in .ag-tel{max-width:none;margin:20px 0 0;text-align:center;font-size:13px;line-height:1.9;color:var(--ink-sub)}
.ag-tel a{color:var(--accent);border-bottom:1px solid currentColor;text-decoration:none}
.blk:nth-of-type(even) .ag-tab:not(.is-on){background:var(--bg)}
@media (max-width:767px){.ag-tab{padding:10px 14px;font-size:12px}.ag-row{gap:8px}.ag-nav{width:40px;height:40px}}
.blk-in .ag-tel,.blk-in .ag-cap{text-wrap:balance;word-break:keep-all;overflow-wrap:anywhere}

/* §39 アクセス（2026-09-24 おその氏指示「所在地・診療時間と地図を分ける意味がない。口元専門サイトのアクセスと同じレイアウトに」）
   左＝地図（4:3）／右＝表（住所・診療時間・休診日・TEL・最寄り駅）。表は口元と同じくラベル列＋値列、行の間に細い線 */
.access{display:grid;grid-template-columns:1fr;gap:calc(var(--gap) * 1.5)}
.access .map-embed{margin:0;aspect-ratio:4/3}
.blk-in .access .info{display:grid;grid-template-columns:6.5em 1fr;max-width:none;margin:0;border:0}
.access .info dt,.access .info dd{padding:16px 0;border-bottom:1px solid var(--line);font-size:15px;line-height:1.8}
.access .info dt{font-weight:500;letter-spacing:.06em;color:var(--ink)}
.access .info dd{margin:0;color:var(--ink-sub)}
.access .info dd:last-child{padding-bottom:16px}
.access .info a{color:inherit;text-underline-offset:4px}
@media (min-width:1024px){
  .access{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gap);align-items:center}
  .access .info dt,.access .info dd{font-size:16px}
}

/* ==========================================================================
   §40 ページ内の要素は「塊を中央・中は左揃え」（2026-09-24 おその氏指示「右側に変な空きができる」）
   --------------------------------------------------------------------------
   文章系の塊（見出し・文章・箇条書き・表・ボタン・道順）＝ 720px の列を画面中央に置く。中の文字は左揃え
   一覧系の塊（カード・写真・要点・アクセス2列・医師紹介・比較表）＝ 1080px の列いっぱい（中央）
   ページ上部のページ名（.page-hero）は対象外。以前の margin-left:0 指定を打ち消すため、この節だけ !important を使う
   ========================================================================== */
.blk-in>.blk-head,.blk-in>p,.blk-in>ul,.blk-in>ol,.blk-in>h3,.blk-in>.steps,.blk-in>.steps-visual,.blk-in>.tw:not(.wide),
.blk-in>.info,.blk-in>.button-list,.blk-in>.ag,#qa .blk-in>h3,#qa .blk-in>h3+p,.blk-in>.button-list+p,.blk-in>.button-list+p+p,
.page-body>.lead,.page-body>.operator,.page-body>.draft-note,body:not(.is-top) .updated{
  max-width:var(--measure)!important;margin-left:auto!important;margin-right:auto!important}
.blk-in>p:has(>.button){max-width:var(--measure)!important}
.page-body>.intro,.page-body>.jump:first-child,.page-body>.intro+.jump{margin-left:auto!important;margin-right:auto!important}
.blk-in>.ag{width:100%}
/* TOP：見出し＋リード文・本文・予約ボタンと補足も同じ 720px の列を中央に */
.is-top .sec-head,.is-top .sec-body>p,.is-top .sec-body>.button-list,.is-top .sec--navy .button-list+p,.is-top .sec--navy .button-list+p+p{
  max-width:var(--measure)!important;margin-left:auto!important;margin-right:auto!important}
.is-top .sec-lead{max-width:none!important}
body:not(.is-top) .cards ul,body:not(.is-top) .page-body .facts{justify-content:center}   /* §40：一覧の最後の段も中央（右だけ空かない） */

/* §41 各エリアの見出しは中央揃え（2026-09-24 おその氏指示）。対象＝英字の小見出し（番号＋英字）と和文見出し。説明文・本文・ページ上部のページ名は対象外 */
.blk-head,.blk-head h2,body:not(.is-top) .page-body .blk-head h2,.is-top .sec-head h2,.is-top .page-body .sec-head h2{text-align:center}
.blk-head .eyebrow,.is-top .sec-head .eyebrow{justify-content:center}

/* §42 TOP「ご来院の前に」のリンクボックス（2026-09-24 おその氏指摘「天地が揃っていない・タイトルは中央」）
   3つの高さを揃える（行の高さまで伸ばす）。タイトル・説明・矢印を中央に */
.link-list li{display:flex}
.is-top .link-panel{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:36px 24px 64px}
.is-top .lp-d{text-align:center!important;text-wrap:balance}
.is-top .lp-arrow,.is-top .link-panel .lp-arrow{left:50%;right:auto;top:auto;bottom:24px;transform:translateX(-50%)}
.is-top .link-panel:hover .lp-arrow{transform:translate(calc(-50% + 4px),0)}
@media (min-width:768px){
  .is-top .link-panel{padding:40px 28px 72px}
  .is-top .lp-arrow,.is-top .link-panel .lp-arrow{bottom:28px;transform:translateX(-50%)}
  .is-top .link-panel:hover .lp-arrow{transform:translate(calc(-50% + 6px),0)}
}
.is-top .lp-d{word-break:keep-all;overflow-wrap:anywhere}

/* §43 ページ末尾の案内の節を予約の帯に統合（2026-09-24 おその氏指摘「同じ遷移が2つ」）。帯＝英字 → 見出し（明朝）→ 文章 → ボタン1つ */
.cta .cta-h{margin:0 0 20px;font-family:var(--font-mincho);font-weight:500;font-size:24px;letter-spacing:.08em;color:#fff}
.cta .container>p:not(.cta-en){max-width:var(--measure);margin:0 auto 32px;text-align:left;line-height:2}
.cta .container>p:not(.cta-en):only-of-type{text-align:center}
@media (min-width:768px){.cta .cta-h{font-size:30px}}

/* §44 SP 固定バー（2026-09-28 おその氏指示）。「予約・相談する」1つを画面幅で（FV の CTA と同じ文言）。TOP の FV 上とスクロール中は .is-hidden で下へ隠す（JS）。
   出し入れは transform＋opacity。隠している間は visibility:hidden でタップ・フォーカスを受けない */
.sticky-bar{grid-template-columns:1fr;transition:transform .3s ease,opacity .3s ease,visibility 0s}
.sticky-bar.is-hidden{transform:translateY(100%);opacity:0;visibility:hidden;transition:transform .3s ease,opacity .3s ease,visibility 0s .3s}
@media (prefers-reduced-motion:reduce){.sticky-bar,.sticky-bar.is-hidden{transition:none}}

/* §45 予約ページ「ご予約の方法」のボタン配置（SP・2026-09-28 おその氏指示「予約ボタンを押したら予約方法がパッと見える状態に」）。
   Web予約｜LINE を横並び、その下に電話を全幅。PC（768px〜）は従来どおり3つ横並び。.blk.buttons は予約ページだけが使う */
@media (max-width:767px){
  .blk.buttons .button-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .blk.buttons .button-list li{display:flex;margin:0}     /* li の行の高さ・上下マージン（.page-body li）で段の間が開くのを防ぐ */
  /* 2026-10-22 電話予約を外したため「最後を全幅」は削除（Web予約｜LINE の2つ横並び） */
  .blk.buttons .button-list .button{padding-left:4px;padding-right:4px;font-size:16px;letter-spacing:.02em;white-space:nowrap}
}

/* §46 悩みカードをアイコンの一覧に（2026-09-28 おその氏指示「写真ではなくアイコンを並べる」・A案＝SP 2列／PC 4列）。
   .icon-grid は生成器がアイコンを使うときだけ付ける。端数の段は中央寄せ（flex）。TOP の先頭横長（§19）は使わない。
   アイコンは淡い面（--bg-sub）の正方形に余白 12% で置く。文字は一覧なので中央寄せ（UI方針 §7） */
.cards ul.icon-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:32px 16px}
.cards ul.icon-grid>li{flex:0 0 calc((100% - 16px) / 2);max-width:calc((100% - 16px) / 2);display:block}
.is-top .cards ul.icon-grid>li:first-child{grid-column:auto}
.icon-grid .card{height:100%;text-align:center}
.icon-grid .card-media.is-icon,.is-top .icon-grid li:first-child .card-media.is-icon{aspect-ratio:1/1;background:var(--bg-sub)}
.icon-grid .card-media .card-icon{position:absolute;inset:12%;width:76%;height:76%;object-fit:contain;transition:transform .8s cubic-bezier(.2,.6,.2,1)}
.icon-grid .card:hover .card-icon{transform:scale(1.04)}
.icon-grid .card-t{font-size:18px;word-break:keep-all;overflow-wrap:anywhere}
.icon-grid .card-d{font-size:14px;line-height:1.7}
.icon-grid .card-d .nw{white-space:nowrap}
body .cards ul.icon-grid .card>span:not(.card-media):not(.card-arrow){text-align:center}   /* §23 の下層ページ左揃え（633行）より優先 */
@media (min-width:768px){
  .cards ul.icon-grid{gap:48px 24px}
  .cards ul.icon-grid>li{flex-basis:calc((100% - 72px) / 4);max-width:calc((100% - 72px) / 4)}
  .icon-grid .card-t{font-size:20px}
  .icon-grid .card-d{font-size:14px}
}
/* §46 の続き：下層（悩み一覧）ではリストを文章幅（720px）ではなく列の幅（1080px）に。背景がグレーの節（偶数）ではタイルを白に */
.page-body .blk.cards .blk-in>ul.icon-grid{max-width:var(--col)!important}   /* 1123行の文章幅（!important）を打ち消す。同節の方針「カードは1080px」に合わせる */
.page-body>.blk:nth-of-type(even) .icon-grid .card-media.is-icon{background:var(--bg)}
.page-body .blk.cards .blk-in>ul.icon-grid{column-gap:16px}   /* 下層の .cards ul の横間隔（40px）が効くと列の幅計算（§46）とずれて折り返すため固定 */
@media (min-width:768px){.page-body .blk.cards .blk-in>ul.icon-grid{column-gap:24px}}

/* §47 TOP 医師紹介：写真を枠ではなくエリアに立たせる（2026-09-28 おその氏指示・参考 lianclinic.net/lian-reserve/about/ の Message 節）。
   節の背景＝白（当初は写真の背景色 #d6dce0 → 同日 白に変更）。写真は節の下端に接地（節の下余白 0）。写真は背景を切り抜いた透過PNG（hirose.png・おその氏支給）を使うため、縁のぼかしは不要。
   SP は文章 → 写真の順（写真を下端に接地させるため）。PC は写真 5：文章 7 のまま、写真を下端・文章を中央に */
.is-top .sec.has-doctor{background:var(--bg);padding-bottom:0}   /* 背景は白（2026-09-28 おその氏指示で青みグレーから変更） */
.is-top .has-doctor .doctor-wrap{align-items:end}
.is-top .has-doctor .doctor-photo{order:2;display:block;width:100%;max-width:420px;margin:0 auto;aspect-ratio:1/1;object-fit:cover;object-position:50% 0;border-radius:0;background:transparent;}   /* 画像は 4:5（2026-10-29）。SP は上を基準に正方形で切る＝従来の見え方 */
.is-top .has-doctor .doctor-text{order:1}
@media (min-width:768px){
  .is-top .has-doctor .doctor-photo{order:0;max-width:none;margin:0;aspect-ratio:4/5}   /* PC は縦長で上の空きを埋め、下半身まで見せる（2026-10-29 おその氏指示） */
  .is-top .has-doctor .doctor-text{align-self:center;padding-bottom:80px}
}

/* §48 TOP 医師紹介の名前と資格（2026-09-28 おその氏指示「院長は少し小さく」「権威性は括弧にせず、大きくなくていいからちゃんと見せる」）。
   名前＝明朝 500。「院長」は名前の約 55% の大きさで添える。資格＝1資格1枚の淡い面のプレート（罫線なし）。左に学会名、右に「専門医」（強調＝500＋ネイビー）。
   同名学会の区別（JSAPS）は括弧ではなく白地の小さなタグ。1200px 未満は縦積み、1200px〜は2枚横並び */
.is-top .doctor-text .doc-name{margin:0 0 20px;font-family:var(--font-head);font-weight:500;font-size:30px;line-height:1.3;letter-spacing:.08em;color:var(--ink)}
.is-top .doctor-text .doc-role{margin-left:.6em;font-size:16px;font-weight:400;letter-spacing:.12em;color:var(--ink-sub)}
.is-top .doctor-text .doc-creds{list-style:none;padding:0;margin:0 0 28px;display:grid;grid-template-columns:1fr;gap:8px;max-width:none}
.is-top .doctor-text .doc-creds li{margin:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;background:var(--bg-sub);font-size:15px;line-height:1.5}
.is-top .doctor-text .cred-org{color:var(--ink);letter-spacing:.04em}
.is-top .doctor-text .cred-abbr{display:inline-block;margin-left:8px;padding:1px 7px;background:var(--bg);font-size:14px;letter-spacing:.08em;color:var(--accent);vertical-align:1px}
.is-top .doctor-text .cred-t{flex:none;font-weight:500;letter-spacing:.1em;color:var(--accent)}
@media (min-width:768px){
  .is-top .doctor-text .doc-name{font-size:36px}
  .is-top .doctor-text .doc-role{font-size:18px}
}
/* 1200px〜の2枚横並びは、資格が3枚（MBA追加・同日）になり1枚余るため廃止＝全幅で縦積み */   /* 2枚並べると 820px で学会名が語の途中で、1024px で JSAPS が2行目に折れるため 1200px から */
.is-top .doctor-text .cred-org{word-break:keep-all}

/* §49 TOP 医師紹介の名前を中央揃え・「詳しく見る」ボタン（2026-09-28 おその氏指示）。ボタンは中央（UI方針 §7「ボタンは中央」） */
.is-top .doctor-text .doc-name{text-align:center}
.is-top .doctor-text .doc-more{margin:32px 0 0;text-align:center;max-width:none}
.is-top .doctor-text .doc-more a{font-size:16px;letter-spacing:.06em;color:var(--accent);text-underline-offset:6px}   /* ボタンからテキストリンクに変更（同日） */

/* §50 TOP「ご予約」のボタン配置を予約ページ（§45）と揃える（2026-09-28 おその氏指示）。SP＝Web予約｜LINE を横並び、その下に電話を全幅。PC は3つ横並び（従来どおり） */
@media (max-width:767px){
  .is-top .sec.buttons .button-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .is-top .sec.buttons .button-list li{display:flex;margin:0}
  /* 2026-10-22 電話予約を外したため「最後を全幅」は削除 */
  .is-top .sec.buttons .button-list .button{width:100%;padding-left:4px;padding-right:4px;font-size:16px;letter-spacing:.02em;white-space:nowrap}
}

/* §51 注記（「※」で始まる段落・生成器が .note を付ける）（2026-09-28 おその氏指示「注釈が本文と同じ大きさ」）。
   UI方針 §1 の下限 14px・サブ色。本文（17/18px）との差で注記と分かるようにする */
p.note,.blk-in>p.note{font-size:14px;line-height:1.8;color:var(--ink-sub);letter-spacing:.02em}

/* §52 医師紹介「経歴」の表（2026-09-28 おその氏指摘「年・経歴の見出しのグレーが目立つ」）。
   見出し行は画面から消す（年と経歴の並びで自明）。読み上げ用に残すため display:none ではなく視覚的に隠す。
   代わりに年を節番号と同じ金・英字書体にして年表らしく見せる。他の表（料金など）の見出しは変えない */
.career .tw tr:first-child th{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.career .tw td:first-child{width:5.5em;font-family:var(--font-serif);font-size:19px;font-weight:400;letter-spacing:.06em;color:var(--gold);white-space:nowrap}
@media (max-width:767px){.career .tw td:first-child{width:3.6em;padding-right:4px}}   /* SP は年の列を詰めて経歴の文の折れを減らす */

/* §53 医師紹介ページ：上部のグレー枠に切り抜きの院長（hirose.png）を立たせる／プロフィールの見出しを消す（2026-09-28 おその氏指示）。
   人物は枠の右下に接地（列の右端に揃える）。ページ名は左のまま。見出し（01 PROFILE／プロフィール）は display:none＝番号のカウンタも進まず、次の節が 01 になる */
.ph-visual.has-person>img.ph-person{inset:auto max(0px,calc(50% - var(--col) / 2)) 0 auto;width:auto;height:94%;max-width:62%;object-fit:contain;object-position:right bottom;z-index:0}
.ph-visual.has-person .ph-scrim{display:none}
.ph-visual.has-person .ph-head{z-index:1}
.profile .blk-head{display:none}
.profile .doctor-wrap.no-photo{display:block}
/* §53 の続き（同日 おその氏指示「もっと濃い紺のうっすらグラデーション」「医師はもっと大きく・下部は見切れてよい」）。
   人物は枠の上から 10% に頭を置き、枠の高さの 140%（SP 125%）で下を見切る */
/* 背景の紺グラデーションは同日おその氏判断で取りやめ＝従来のグレー（§32 .ph-visual.is-empty）のまま */
.ph-visual.has-person>img.ph-person{inset:10% max(0px,calc(50% - var(--col) / 2)) auto auto;height:140%;max-width:none}
@media (max-width:767px){.ph-visual.has-person>img.ph-person{top:12%;right:-14%;height:125%}}
/* §53 の続き（同日 おその氏指示「左側をもう少し暗めに、先生側（右側）は今の感じ」）。
   左＝文字側を暗いグレー、右＝院長側は従来のグレー（#cfcfcf 前後）。白文字のコントラストを文字の範囲で 3:1 以上に */
.ph-visual.is-empty.has-person{background:linear-gradient(90deg,#6b7076 0%,#80858b 30%,#b3b5b8 55%,#cfcfcf 72%,#d6d6d6 100%)}

/* §54 医師紹介ページのプロフィール（2026-09-28 おその氏指示）。「Maison PUREJU 院長」を名前の上へ（原稿の順は変えず表示順だけ入れ替え＝名前の strong を order:1）。
   メッセージの見出し文（h3）は明朝500で大きく。資格の丸ラベルは削除（下の「資格・所属学会」と重複） */
.profile .doctor-text>p:first-child{display:flex;flex-direction:column;gap:6px;font-size:15px;letter-spacing:.08em;color:var(--ink-sub)}
.profile .doctor-text>p:first-child strong{order:1;margin:0}
.profile .doctor-text h3{margin:48px 0 20px;font-family:var(--font-head);font-weight:500;font-size:24px;line-height:1.5;letter-spacing:.08em;color:var(--ink)}
@media (min-width:768px){.profile .doctor-text h3{margin-top:56px;font-size:28px}}

/* §55 医師紹介ページ：見出し文を名前の上へ・色をネイビーに／院長の発信カード（YouTube・Instagram）（2026-09-28 おその氏指示）。
   並び＝見出し文 → 院長（役職の上に小さく）→ 名前 → メッセージ本文 → 発信カード。原稿の順は変えず flex の order で並べる。
   カードは口元専門サイト doctor.html の .sns-cards と同じ構成。男性サイトの規則に合わせて枠線なし・淡い面・文字14px以上 */
.profile .doctor-text{display:flex;flex-direction:column}
.profile .doctor-text h3{order:-1;margin:0 0 32px;color:var(--accent)}
.profile .doctor-text>p:first-child{margin:0 0 28px}
.sns-cards{display:grid;grid-template-columns:1fr;gap:12px;margin-top:40px}
.sns-card{display:flex;align-items:flex-start;gap:16px;padding:20px;background:var(--bg-sub);color:var(--ink);text-decoration:none;transition:background .3s,transform .3s}
.blk:nth-of-type(even) .sns-card{background:var(--bg)}
.sns-card:hover{transform:translateY(-2px)}
.sns-ic{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--bg);color:var(--accent)}
.sns-ic svg{width:20px;height:20px}
.sns-tx{flex:1 1 auto;min-width:0}
.sns-nm{display:block;margin-bottom:8px;font-size:16px;font-weight:500;letter-spacing:.05em;color:var(--ink)}
.sns-id{display:block;margin-top:2px;font-size:14px;font-weight:400;letter-spacing:.04em;color:var(--ink-sub)}
.sns-ds{display:block;font-size:14px;line-height:1.8;color:var(--ink-sub)}
.sns-ar{flex:none;align-self:center;width:20px;height:20px;color:var(--accent);transition:transform .3s}
.sns-card:hover .sns-ar{transform:translateX(3px)}
@media (min-width:768px){.sns-cards{grid-template-columns:1fr 1fr;gap:16px;margin-top:48px}}
/* §55 の続き：見出し文を先頭に移したので上余白を 0（§54 の margin-top 48/56px が節の上余白に足されて空きが出ていた・同日おその氏指摘） */
.profile .doctor-text h3,body .profile .doctor-text h3{margin-top:0}
@media (min-width:768px){body .profile .doctor-text h3{margin-top:0}}

/* §56 矢印を「＞」形（線2本のシェブロン）に統一（2026-09-28 おその氏指示「→ の矢印デザインがイマイチ」）。
   文字の「→」をやめ、CSS の線で描く＝どの書体でも同じ形・太さ。対象＝FV ボタン／ヘッダーのナビ・一覧パネル／全画面メニュー／フッター下段／リンクパネル。
   発信カードは SVG をシェブロンに差し替え（生成器 _ARROW）。パンくずの「›」は区切り記号なので対象外 */
.fv-cta::after,.gnav .gnav-main::after,.mega-all .mega-jp::after,#sp-menu .sp-main::after,.site-footer .f-bottom a::after,.lp-arrow::before{
  content:"";display:inline-block;width:.42em;height:.42em;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg);vertical-align:.14em;box-sizing:border-box}
.fv-cta::after{margin-left:.7em}
.fv-cta:hover::after{transform:translateX(4px) rotate(45deg)}
.lp-arrow{font-size:18px;line-height:1}
.lp-arrow::before{margin-right:.15em}

/* §57 ヘッダーのロゴ下段を「男性専門サイト」に（2026-09-28 おその氏指示・MENS から変更）。日本語なので明朝・字間を詰める */
.site-header .site-logo small{font-family:var(--font-head);font-size:15px;letter-spacing:.2em}
@media (min-width:768px){.site-header .site-logo small{font-size:16px}}

/* §58 TOP の追従ボタンの飛び先（#reserve＝ご予約の節）。ヘッダーの下に隠れないよう上に余白 */
#reserve{scroll-margin-top:var(--hdr-h,72px)}

/* §59 FV の「予約・相談する」を左右中央へ（2026-09-28 おその氏指示。9/15 の左下＝本サイト同型から変更）。高さ（下からの位置）は従来どおり。
   ボタンを読みやすくする影も、左下起点から「下から上へ薄く」に変更（中央下のボタンに掛かるように） */
.fv-overlay,.fv .fv-overlay{left:0;right:0;max-width:none;display:flex;justify-content:center;padding:0 var(--gutter)}
.fv-scrim{background:linear-gradient(to top,var(--fv-scrim) 0%,rgba(0,0,0,.25) 35%,transparent 70%)}

/* §60 TOP のページ見出し（H1「男性専門サイト｜Maison PUREJU（銀座）」）を画面から隠す（2026-09-28 おその氏指示「この文字は不要」）。
   H1 は検索・ChatGPT がページの主題を読む手がかり（情報設計 第2版 §1）なので HTML には残し、視覚的にだけ隠す。
   その下の最初の節は H1 がある前提で上余白を詰めていた（56/88px）ので、他の節と同じ 80/128px にそろえる */
.is-top .top-intro{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.top-intro+.page-body .sec:first-child{padding-top:80px}
@media (min-width:768px){.top-intro+.page-body .sec:first-child{padding-top:128px}}

/* §61 TOP の FV 直下のページ内リンク（2026-09-28 おその氏指示）。部品は施術ページと同じ .jump。SP 2列×2段／PC 4列で列の幅（1080px）いっぱい。
   下の余白は 0（次の節の上余白 80/128px だけにする）。飛び先の節はヘッダーに隠れないよう scroll-margin を取る */
.top-jump{padding-top:24px;padding-bottom:0}
.top-jump .jump,.page-body .top-jump .jump{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-width:var(--col);margin:0 auto;padding:0;list-style:none}
.top-jump .jump li{margin:0}
@media (min-width:768px){.top-jump{padding-top:40px}.top-jump .jump,.page-body .top-jump .jump{grid-template-columns:repeat(4,1fr);gap:12px}}
#interior,#before-visit,#doctor,#qa{scroll-margin-top:var(--hdr-h,72px)}

/* §62 TOP「よくある質問」＝施術ページの Q&A と同じ見せ方（Q 印）。TOP は .sec-body の中なので幅と左端を列に合わせる */
.is-top #qa .sec-body>h3,.is-top #qa .sec-body>h3+p{max-width:var(--measure);margin-left:auto;margin-right:auto;text-align:left}
.is-top #qa .sec-body>h3:first-child{margin-top:0}

/* §63 SP 追従バーを「紺の帯そのものがボタン」に（2026-09-28 おその氏指示「白背景に紺枠のボタンがちまちましている・余白が中途半端」）。
   白い面・左右の余白・ボタンの角と枠をやめ、画面幅いっぱいの紺の帯（高さ 60px）全体をリンクにする。iPhone の下端の操作領域（safe-area）は帯の中に含める。
   ページ下の余白も帯の高さに合わせる（従来 76px＝白い帯の高さ） */
.sticky-bar{padding:0;gap:0;background:var(--accent);box-shadow:0 -6px 20px rgba(0,0,0,.12)}
.sticky-bar .button{display:flex;align-items:center;justify-content:center;width:100%;min-height:calc(60px + env(safe-area-inset-bottom,0px));padding:0 16px env(safe-area-inset-bottom,0px);border:0;border-radius:0;background:transparent;color:#fff;font-size:16px;letter-spacing:.16em}
.sticky-bar .button:hover,.sticky-bar .button:active{background:rgba(255,255,255,.08);color:#fff}
@media (max-width:767px){body{padding-bottom:calc(60px + env(safe-area-inset-bottom,0px))}}

/* §64 TOP の FV 直下のブランドメッセージ（2026-09-28 おその氏指示・参考 LIAN RESERVE の Brand Statement）。🔴 同日取りやめ（ブランド訴求は FV 動画が担う）＝現在どのページも .statement を使っていない。復活時のために残す
   節番号は振らない（次の「悩みから選ぶ」を 01 のままに）。英字は横組み（縦書き NG の方針）。
   見出し＝明朝 500 大きめ・中央。本文 4 段落は同じ書式で、文章幅 720px の列に左揃え（UI方針 §8「塊は中央・文字は左」） */
.is-top .statement .sec-head{counter-increment:none}
.is-top .statement .eyebrow::before{content:none;display:none}
.is-top .statement h2{font-family:var(--font-head);font-weight:500;font-size:24px;line-height:1.6;letter-spacing:.08em}
.is-top .statement .sec-lead,.is-top .statement .sec-body>p{max-width:var(--measure);margin:0 auto 1.4em;font-size:16px;line-height:2.1;letter-spacing:.04em;text-align:left;color:var(--ink)}
.is-top .statement .sec-body>p:last-child{margin-bottom:0}
.is-top .statement .sec-head{margin-bottom:0}
@media (min-width:768px){.is-top .statement h2{font-size:32px}.is-top .statement .sec-lead,.is-top .statement .sec-body>p{font-size:17px}}
/* §64 の続き：SP で見出しが語の途中で折れないよう 21px に／見出しと本文の間を広げる／結びの「銀座、Maison PUREJU。」を明朝の独立行に */
.is-top .statement h2{font-size:21px;margin-bottom:36px}
.is-top .statement .sec-body>p:last-child{margin-top:2.2em;font-family:var(--font-head);font-size:18px;letter-spacing:.12em}
@media (min-width:768px){.is-top .statement h2{font-size:32px;margin-bottom:48px}.is-top .statement .sec-body>p:last-child{font-size:20px}}
/* §64 の続き：見出しは .is-top .page-body .sec-head h2（28/36px・margin 0）が優先されていたため、同じ系統でより具体的に指定し直す */
.is-top .page-body .statement .sec-head h2{font-size:21px;line-height:1.6;letter-spacing:.08em;margin:0 0 36px}
@media (min-width:768px){.is-top .page-body .statement .sec-head h2{font-size:32px;margin-bottom:48px}}
.is-top .statement .sec-lead,.is-top .statement .sec-body>p{text-wrap:pretty}   /* 段落末の1〜2字だけの行を減らす（対応ブラウザのみ・非対応でも崩れない） */

/* §65 TOP の FV 直下のページ内リンクを「FV に接地した帯」に（2026-09-28 おその氏指示「FV と接地する設計」「ボタン間を詰め、グリッドラインで分けるソリッドなデザイン」）。
   画面幅いっぱい（FV と同じ幅）・上の余白 0。ボタン間は隙間 1px にして下地の色を線として見せる（グリッドライン）。角丸なし。
   🔴 罫線なし方針（UI方針 §5）の例外＝この帯だけ（おその氏の明示指示） */
.top-jump,.page-body .top-jump{max-width:none;margin:0;padding:0}
.top-jump .jump,.page-body .top-jump .jump{max-width:none;gap:1px;background:rgba(22,48,90,.14);border-bottom:1px solid rgba(22,48,90,.14)}
.top-jump .jump a{min-height:60px;border:0;border-radius:0;background:var(--bg-sub);font-size:15px;letter-spacing:.08em}
.top-jump .jump a:hover{background:var(--accent);color:var(--accent-ink)}
@media (min-width:768px){.top-jump,.page-body .top-jump{padding:0}.top-jump .jump,.page-body .top-jump .jump{gap:1px}.top-jump .jump a{min-height:72px;font-size:16px}}
.is-top .page-main{padding-top:0}   /* §65 の続き：H1 を隠した後も main の上余白 16px が残り、FV と帯の間に隙間が出ていた */

/* §66 下層ページの「上部の画像枠直下のページ内リンク」も TOP（§65）と同じ帯に（2026-09-28 おその氏指示）。対象＝悩みページ・施術ページ（.page-body の先頭の .jump）。
   ページ本体は列幅に制限されているため、帯だけ画面幅いっぱいに広げる（100vw・中央基準）。画像枠との間の余白 0（ページ本体の上余白もこのときだけ 0）。
   🔴 罫線なし方針の例外＝この帯だけ */
.page-main:has(>.page-body>.jump:first-child){padding-top:0}
.page-body>.jump:first-child,.page-body>.jump:first-child.jump{width:100vw;max-width:none;margin:0 0 72px calc(50% - 50vw);padding:0;gap:1px;background:rgba(22,48,90,.14);border-bottom:1px solid rgba(22,48,90,.14)}
.page-body>.jump:first-child li{margin:0}
.page-body>.jump:first-child a{min-height:60px;border:0;border-radius:0;background:var(--bg-sub);font-size:15px;letter-spacing:.08em}
.page-body>.jump:first-child a:hover{background:var(--accent);color:var(--accent-ink)}
@media (min-width:768px){.page-body>.jump:first-child a{min-height:72px;font-size:16px}}
.page-body [id]{scroll-margin-top:var(--hdr-h,72px)}   /* ページ内リンクで飛んだ先の見出しがヘッダーに隠れないように */
.page-body>.jump:first-child{margin-left:calc(50% - 50vw)!important;margin-right:0!important}   /* §66 の続き：§31 の margin-left/right:auto!important が帯を列の左端に留め、右へはみ出していたため */

/* §67 長い文章のポイント（原稿の **〜** ＝ strong）に淡いマーカー（2026-09-28 おその氏指示「文面が多いので、ポイントは文字色を変える・薄いベタを敷くなど、品が崩れない程度に」）。
   全ページ共通。文字＝500＋ネイビー（§24 の強調と同じ）＋文字の下 38% に淡いネイビーの帯。強調は1段落1〜2か所・事実だけ（効果の表現は強調しない）。
   除外＝医師紹介の名前（見出し扱いの strong）・ネイビーの面の上（白地の帯に替える） */
.page-main p strong{font-weight:500;color:var(--accent);background:linear-gradient(transparent 62%,rgba(22,48,90,.10) 62%);padding:0 .08em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.page-main .doctor-text>p:first-child strong{background:none;padding:0}
.page-main .sec--navy p strong,.page-main .cta p strong{color:inherit;background:linear-gradient(transparent 62%,rgba(255,255,255,.18) 62%)}
.page-body>.lead+.lead{margin-top:1em}   /* §67 の続き：冒頭の要約文が2段落のとき（毛穴・ニキビ跡ほか）の段落間 */
.page-body>.lead:has(+.lead){margin-bottom:0}
.page-body>.lead+.lead{margin-top:1.1em}

/* §68 強調を2つの処理に分ける（2026-09-28 おその氏指示「マーカーと太字カラーは分けて、レベル感で使い分け」）。§67 の strong のマーカーはここで外す。
   ① 太字カラー（原稿 **〜** → strong）＝要点・結論（誰が診るか・何が対象か・当院の考え方）。500＋ネイビー、背景なし
   ② マーカー（原稿 ==〜== → mark.mk）＝注意点・条件（回数・麻酔・相談だけでもよい・性別でなく肌で決める）。文字は本文の黒のまま、下 40% に淡い金の帯
   1段落に①②合わせて1〜2か所まで。効果の表現には使わない */
.page-main p strong,.page-main .sec--navy p strong,.page-main .cta p strong{background:none;padding:0}
.page-main p strong{font-weight:500;color:var(--accent)}
.page-main .sec--navy p strong,.page-main .cta p strong{color:inherit}
mark.mk{background:linear-gradient(transparent 60%,rgba(201,169,110,.34) 60%);color:inherit;padding:0 .06em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.sec--navy mark.mk,.cta mark.mk{background:linear-gradient(transparent 60%,rgba(201,169,110,.45) 60%)}

/* §69 悩みページ「治療の違い」の比較表（2026-09-28 おその氏指示「横スライドは不採用。スライドせずに読みやすく比較しやすい表に」）。
   1024px〜＝通常の表（横スクロールなし・5列が列幅に収まる）。
   1024px 未満＝表を「項目ごとに4治療を2×2」に組み替える（見出し行は隠し、項目名を帯に、各セルに治療名＝data-label を小見出しで出す）。
   区切りは細いグリッドライン（§65 の帯と同じソリッドな見せ方）。表は1つのまま＝内容を二重にしない */
.tw.cmp{overflow:visible}
.tw.cmp table{min-width:0;width:100%;table-layout:fixed;border-collapse:collapse}
.tw.cmp th,.tw.cmp td{white-space:normal;font-weight:400;vertical-align:top;font-size:15px;line-height:1.7}
.tw.cmp th{font-weight:500;color:var(--accent);background:var(--bg-sub)}
.tw.cmp td.cmp-item{font-weight:500;color:var(--ink);white-space:nowrap;width:8.5em}
@media (max-width:1023px){
  .tw.cmp table,.tw.cmp tbody{display:block;width:100%}
  .tw.cmp tr:first-child{display:none}
  .tw.cmp tr{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:0 0 20px;background:rgba(22,48,90,.14);border:1px solid rgba(22,48,90,.14)}
  .tw.cmp td{display:block;border:0;padding:14px 14px 16px;background:var(--bg);font-size:15px;line-height:1.7}
  .tw.cmp td.cmp-item{grid-column:1/-1;width:auto;padding:10px 14px;background:var(--accent);color:#fff;font-size:15px;letter-spacing:.08em}
  .tw.cmp td[data-label]::before{content:attr(data-label);display:block;margin-bottom:6px;font-size:14px;font-weight:500;letter-spacing:.04em;color:var(--accent)}
}
/* §69 の続き：PC は §31 の「表は文章幅 720px（!important）」が当たって窮屈だったため、列の幅 1080px に広げる。見出し行は SP の項目帯とそろえてネイビー地に白 */
.blk-in>.tw.cmp{max-width:var(--col)!important}
@media (min-width:1024px){
  .tw.cmp th{background:var(--accent);color:#fff;letter-spacing:.06em}
  .tw.cmp th,.tw.cmp td{padding:16px 18px;font-size:15px}
  .tw.cmp td.cmp-item{width:9em}
}

/* §70 挿絵の3枚並び（原稿「!figs パス|名称, …」→ ul.illust-grid）（2026-09-28 おその氏支給の毛穴3種・ニキビ跡3種）。
   SP も3列（名称は HTML で下に添える＝絵の中の文字は SP で小さくなるため）。幅は一覧扱い＝PC は列の幅 1080px（UI方針 §8）。枠線なし・角なし */
.blk-in>ul.illust-grid,.page-body ul.illust-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-width:var(--col)!important;margin:28px auto 36px!important;padding:0;list-style:none}
.illust-grid li{margin:0}
.illust-grid figure{margin:0}
.illust-grid img{display:block;width:100%;height:auto;background:#fff}
.illust-grid figcaption{margin-top:8px;font-size:14px;line-height:1.5;text-align:center;color:var(--ink);letter-spacing:.04em}
@media (min-width:768px){.blk-in>ul.illust-grid,.page-body ul.illust-grid{gap:24px;margin:36px auto 48px!important}.illust-grid figcaption{font-size:15px;margin-top:12px}}
/* §69 の続き：見出し行のネイビーが .blk:nth-of-type(even) .tw th（淡いネイビー）に負けて「淡い地に白文字」になっていたため、同じ系統で強く指定 */
@media (min-width:1024px){.page-body .blk .tw.cmp th,.page-body .blk:nth-of-type(even) .tw.cmp th{background:var(--accent);color:#fff}}

/* §69 の続き（2026-09-28）：早見表（旧§71）は同日おその氏の判断で不採用・撤去し、2×2 に戻した。
   SP の項目名の帯は、旧指定の min-height で文字が上に寄っていたため上下中央に */
@media (max-width:1023px){
  .tw.cmp td.cmp-item{display:flex;align-items:center;min-height:0;height:auto;padding:12px 14px}
}
/* §69 の続き（2026-09-28 おその氏指示「治療名はボックス内でセンタリング・薄い背景」）。SP の 2×2 の各マスの治療名＝マス幅いっぱいの淡い帯に中央揃え。説明文は左揃えのまま */
@media (max-width:1023px){
  .tw.cmp td[data-label]{padding:0 14px 16px}
  .tw.cmp td[data-label]::before{display:block;margin:0 -14px 12px;padding:8px 6px;background:var(--bg-sub);text-align:center;font-size:14px;font-weight:500;color:var(--accent)}
}
/* §69 の続き（同日 おその氏指示「薄い背景は背景色と被るのでなくす。治療名と本文の間に罫線、端まで伸ばさず少し空ける」）。
   帯の背景をやめ、治療名の下に細い線。線はマスの内側の余白（左右 14px）の中に収め、端まで伸ばさない */
@media (max-width:1023px){
  .tw.cmp td[data-label]::before{margin:0 0 12px;padding:12px 0 8px;background:none;border-bottom:1px solid rgba(22,48,90,.18)}
}
/* §69 の続き（同日 おその氏指示「ボックスの見出しもセンタリング・ボックス内の文字もセンタリング」）。SP の項目名の帯（ネイビー）と各マスの本文を中央揃えに */
@media (max-width:1023px){
  .tw.cmp td.cmp-item{justify-content:center;text-align:center}
  .tw.cmp td[data-label]{text-align:center}
}

/* §72 悩みページ「料金の目安」の表（.tw.fee）の列の間に縦線（2026-09-28 おその氏指示「治療・内容・料金の間に罫線」）。
   線は既存の行の区切り線と同じ色。表の外側（左右の端）には引かない */
.tw.fee th+th,.tw.fee td+td{border-left:1px solid var(--line)}
@media (max-width:767px){   /* §72 の続き：縦線で「内容」列が狭まり語の途中で折れていたため、左右の余白を詰め、語の切れ目で折る */
  .page-body .tw.fee th,.page-body .tw.fee td{padding-left:8px;padding-right:8px}
  .tw.fee td:nth-child(2){word-break:keep-all;overflow-wrap:anywhere}
}
@media (max-width:767px){   /* §72 の続き：料金列が幅を取りすぎて「内容」が細くなっていたため、SP は列幅を固定の割合に */
  .tw.fee table{table-layout:fixed;width:100%;min-width:0}
  .tw.fee th:nth-child(1),.tw.fee td:nth-child(1){width:32%}
  .tw.fee th:nth-child(2),.tw.fee td:nth-child(2){width:36%}
  .tw.fee th:nth-child(3),.tw.fee td:nth-child(3){width:32%}
}
@media (max-width:767px){   /* §72 の続き：料金の「〜」が次の行に落ちていたため 30／34／36% に */
  .tw.fee th:nth-child(1),.tw.fee td:nth-child(1){width:30%}
  .tw.fee th:nth-child(2),.tw.fee td:nth-child(2){width:34%}
  .tw.fee th:nth-child(3),.tw.fee td:nth-child(3){width:36%}
}
@media (max-width:767px){   /* §72 の続き：360px で「ブレッシング」「麻酔クリーム」が1列目からはみ出したため、1列目の字間・余白を詰めて 32／32／36% に */
  .tw.fee th:nth-child(1),.tw.fee td:nth-child(1){width:32%;padding-left:6px;padding-right:6px;letter-spacing:0}
  .tw.fee th:nth-child(2),.tw.fee td:nth-child(2){width:32%}
  .tw.fee th:nth-child(3),.tw.fee td:nth-child(3){width:36%}
}

/* §73 当日の流れ＝ステップ（2026-09-28 おその氏指示「4段階のステップとしてデザイン処理」）。原稿「- 手順名：説明」→ ol.flow。
   1枚＝STEP 番号（英字・金・大文字）＋手順名（明朝）＋説明（左揃え）。SP＝縦に並べ間に下向きの ∨、PC（1024px〜）＝横に4枚並べ間に右向きの ＞。
   面は淡い地（背景が淡い節では白）。枠線なし。幅は PC で列の幅 1080px（§31 の文章幅を上書き） */
.blk-in>ol.flow,.page-body ol.flow{max-width:var(--col)!important;margin:8px auto 0!important;padding:0;list-style:none;display:grid;grid-template-columns:1fr;gap:36px;counter-reset:none}
.flow li{position:relative;margin:0;padding:24px 22px 26px;background:var(--bg-sub);display:flex;flex-direction:column;gap:8px}
.blk:nth-of-type(even) .flow li{background:var(--bg)}
.flow-no{font-family:var(--font-serif);font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);text-align:center}
.flow-t{font-family:var(--font-head);font-size:20px;font-weight:500;letter-spacing:.08em;color:var(--ink);text-align:center;padding-bottom:12px;margin-bottom:4px;border-bottom:1px solid rgba(22,48,90,.14)}
.flow-d{font-size:15px;line-height:1.85;color:var(--ink);text-align:left}
.flow li:not(:last-child)::after{content:"";position:absolute;left:50%;bottom:-24px;width:12px;height:12px;margin-left:-6px;border-right:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);transform:rotate(45deg)}
@media (min-width:1024px){
  .blk-in>ol.flow,.page-body ol.flow{grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
  .flow li{padding:28px 22px 30px}
  .flow li:not(:last-child)::after{left:auto;right:-22px;top:50%;bottom:auto;margin:-6px 0 0;border-bottom:0;border-top:1.5px solid var(--gold);transform:rotate(45deg)}
}

/* §74 悩みページ「主な治療法」のカード（2026-09-28 おその氏指摘「SP で2カラムにしなくてよい・文字ばかりなのでデザイン処理を」）。
   SP 1列／PC 2列。カード＝画像枠（16:9・実機写真待ち）→ 治療の種類（小ラベル）→ 治療名（明朝）→ 向く症状（札）→ 説明 → 施術者（ラベル付き1行）→「詳しく見る ＞」。
   枠線なし・面で区切る（背景が淡い節では白） */
.opt-list ul,.blk-in>.opt-list ul{list-style:none;margin:0 auto;padding:0;display:grid;grid-template-columns:1fr;gap:24px;max-width:var(--col)}
.blk-in>.opt-list{max-width:var(--col);margin:0 auto}
.opt-list li{margin:0}
.opt{display:flex;flex-direction:column;height:100%;background:var(--bg-sub);color:var(--ink);text-decoration:none;transition:transform .3s}
.blk:nth-of-type(even) .opt{background:var(--bg)}
.opt:hover{transform:translateY(-2px)}
.opt-media .ph{aspect-ratio:16/9;border:0;border-radius:0;font-size:13px}
.opt-body{display:flex;flex-direction:column;gap:10px;padding:20px 20px 22px;flex:1}
.opt-kind{font-size:14px;letter-spacing:.06em;color:var(--gold)}
.opt-name{font-family:var(--font-head);font-size:22px;font-weight:500;letter-spacing:.08em;line-height:1.4;color:var(--ink)}
.opt-tags{display:flex;flex-wrap:wrap;gap:6px}
.opt-tag{display:inline-block;padding:3px 10px;background:var(--bg);font-size:14px;line-height:1.6;color:var(--accent)}
.blk:nth-of-type(even) .opt-tag{background:var(--bg-sub)}
.opt-desc{font-size:15px;line-height:1.85;color:var(--ink)}
.opt-op{display:flex;align-items:baseline;gap:12px;padding-top:12px;border-top:1px solid rgba(22,48,90,.14);font-size:14px;color:var(--ink)}
.opt-op-l{flex:none;font-weight:500;color:var(--accent)}
.opt-more{margin-top:auto;align-self:flex-end;font-size:14px;letter-spacing:.08em;color:var(--accent)}
.opt-more::after{content:"";display:inline-block;width:.42em;height:.42em;margin-left:.5em;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg);vertical-align:.14em}
@media (min-width:768px){.opt-list ul,.blk-in>.opt-list ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}.opt-body{padding:24px 26px 26px}.opt-name{font-size:24px}}
/* §74 の続き：画像枠が .ph.p43（4:3）の指定に負けていたため 16:9 を強く指定。枠の色をカードの地より少し濃くして区別。カードの下に余白 */
.opt-media .ph.p43,.opt-media .ph{aspect-ratio:16/9;background:#e8e4dc;color:var(--ink-sub)}
.blk:nth-of-type(even) .opt-media .ph{background:#ecebe8}
.blk-in>.opt-list{margin-bottom:32px}

/* §75 Q&A の問いの文言をネイビーに（2026-09-28 おその氏指示「Q が紺色なので問いの文言も紺色に」）。全ページの #qa（TOP の「よくある質問」を含む） */
#qa h3,.is-top #qa .sec-body>h3,#qa .blk-in>h3{color:var(--accent)}
/* §70 の続き（2026-09-28 おその氏指摘「SP でイラストがやや小さい」）。SP＝1列で「絵（左 56%）＋名称と原因（右）」の横並び＝絵の幅 約105px→約190px。
   PC＝3列のまま、名称の下に原因を小さく。名称＝明朝・原因＝補足色 14px */
.illust-grid .ig-t{display:block;font-family:var(--font-head);font-weight:500;color:var(--ink)}
.illust-grid .ig-d{display:block;margin-top:4px;font-size:14px;line-height:1.7;color:var(--ink-sub)}
@media (max-width:767px){
  .blk-in>ul.illust-grid,.page-body ul.illust-grid{grid-template-columns:1fr;gap:16px}
  .illust-grid figure{display:grid;grid-template-columns:56% 1fr;gap:14px;align-items:center}
  .illust-grid figcaption{margin:0;text-align:left}
  .illust-grid .ig-t{font-size:17px;letter-spacing:.06em}
}
@media (min-width:768px){.illust-grid .ig-t{font-size:16px}.illust-grid .ig-d{text-align:center}}
/* §69 の続き（2026-09-29 おその氏指示「（麻酔含む）は SP で改行」）。比較表のセル内の括弧の補足＝SP では次の行に1まとまりで。PC は同じ行 */
.cmp-note{white-space:nowrap}
@media (max-width:1023px){.tw.cmp .cmp-note{display:block}}

/* §76 治療の写真（2026-09-29 おその氏支給・site/assets/img/treatment/photo/）。悩みページ「主な治療法」のカード上部（16:9）と治療ページ冒頭（4:3）の仮枠を差し替え。
   元画像は 13:10 のため枠に合わせて切り抜く（中央基準） */
.opt-media .tphoto{display:block;width:100%;aspect-ratio:16/9;height:auto;object-fit:cover;object-position:center}
.intro .hero .tphoto{display:block;width:100%;aspect-ratio:4/3;height:auto;object-fit:cover;object-position:center}
/* §76 の続き：写真が入ったカードは 4:3（元画像 13:10 に近く、機器の上下が切れにくい）。仮枠は 16:9 のまま */
.opt-media .tphoto{aspect-ratio:4/3}

/* §77 治療ページ冒頭の要点ボックス（2026-09-29 おその氏指示）。見出し（施術者・回数の目安など）は中央揃え、見出しと本文の間に細い線（ボックスの内側の余白に収め、端まで伸ばさない）。
   料金以外の数字も大きく（span.num＝料金の数字 .amt .n と同じ 1.45em・500）。単位や言葉は今の大きさのまま */
.facts .k{display:block;text-align:center;padding-bottom:10px;margin-bottom:12px;border-bottom:1px solid rgba(22,48,90,.18)}
.facts .v .num{font-size:1.45em;font-weight:500;line-height:1.2;letter-spacing:.01em;margin:0 .04em}
/* §77 の続き（2026-09-29 おその氏指示「SP は括弧を次の行に揃える」）。要点ボックスの括弧の補足＝SP では次の行に1まとまりで。PC は同じ行。
   括弧の中に数字があっても（「毛穴 1回」）括弧ごと1まとまり */
.facts .pnote{white-space:nowrap}
@media (max-width:767px){.facts .pnote{display:block}}
.facts .pnote{white-space:normal}   /* §77 の続き：「（ニキビ跡・毛穴 1回）」は SP のボックス幅より長いため、次の行に回したうえで行内では折り返す */
@media (max-width:767px){.facts .pnote{font-size:14px;line-height:1.7;letter-spacing:0}}   /* §77 の続き：SP の括弧の補足は 14px（UI方針の注記の下限）で1行に収まりやすく */
@media (max-width:767px){.facts .pnote{word-break:keep-all;overflow-wrap:anywhere}}   /* 括弧の中は語の切れ目（空白）で折る＝「（ニキビ跡・毛穴／1回）」 */
/* §77 の続き（2026-09-29 おその氏指示「文字自体は左揃えでよいが、ボックス内でセンタリング」）。値のまとまりを中身の幅にしてボックス中央へ・行頭は左揃え（UI方針 §8「塊は中央・文字は左」） */
.facts .v{display:block;width:fit-content;max-width:100%;margin-left:auto;margin-right:auto;text-align:left}
/* §77 の続き（2026-09-29 おその氏指示「文字数の少ない本文の下の余りが気になる。天地もセンタリング」）。見出しは上のまま、本文はボックスの残りの高さの上下中央に */
.facts li{display:flex;flex-direction:column}
.facts .v{margin-top:auto;margin-bottom:auto}

/* §73 の続き（2026-09-29 おその氏指示「同じような流れのあるページは当日の流れと合わせる」）。治療ページ「治療の流れ」・はじめての方へ「当日の流れ」も ol.flow に。
   PC の列数＝手順が 4 の倍数か 4 未満なら 4 列、3 の倍数なら 3 列（はじめての方へ 9 手順＝3×3）。各段の端では右向きの矢印を出さない。
   「所要時間の目安」は手順ではないため流れの下の補足（.flow-note）。工程のイラストは流れの下 */
@media (min-width:1024px){
  .blk-in>ol.flow.cols-3,.page-body ol.flow.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .flow.cols-3 li:nth-child(3n)::after,.flow.cols-4 li:nth-child(4n)::after{display:none}
}
.flow-note,.blk-in>.flow-note{max-width:var(--measure);margin:28px auto 0;font-size:15px;color:var(--ink-sub);text-align:center}
.blk-in>ol.flow+.steps-visual,.blk-in>.flow-note+.steps-visual{margin-top:36px}

/* §78 所要時間の枠（2026-09-29 おその氏指示「所要時間がデザイン処理されていない。時計アイコンと組み合わせて所要時間枠に」）。治療の流れの下に置く。
   淡い面の横長の枠（背景が淡い節では白）＝左に白い丸＋ネイビーの時計、右にラベル（14px）と値（数字 1.45 倍・500・ネイビー／括弧の補足 14px） */
.blk-in>.flow-time,.flow-time{display:flex;align-items:center;gap:16px;width:fit-content;max-width:100%;margin:32px auto 0;padding:18px 28px 18px 18px;background:var(--bg-sub)}
.blk:nth-of-type(even) .flow-time{background:var(--bg)}
.ft-ic{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--bg);color:var(--accent)}
.blk:nth-of-type(even) .ft-ic{background:var(--bg-sub)}
.ft-ic svg{width:28px;height:28px}
.ft-body{display:flex;flex-direction:column;gap:2px}
.ft-l{font-size:14px;letter-spacing:.06em;color:var(--ink-sub)}
.ft-v{font-size:17px;color:var(--ink);line-height:1.5}
.ft-v .num{font-size:1.45em;font-weight:500;color:var(--accent);margin:0 .04em}
.ft-sub{margin-left:.3em;font-size:14px;color:var(--ink-sub)}
@media (max-width:767px){.ft-sub{display:block;margin-left:0}.blk-in>.flow-time,.flow-time{padding:16px 20px 16px 16px}}
/* §78 の続き（2026-09-29 おその氏指示「左右幅は上のステップと合わせる」「ステップと同じ見た目なので色を変える」）。
   幅＝ステップの列と同じ（PC 1080px・SP は列いっぱい）。色＝ネイビーの面・白字（ステップのカードと役割を分ける）。時計は白い線、数字は金 */
.blk-in>.flow-time,.flow-time,.blk:nth-of-type(even) .flow-time{width:100%;max-width:var(--col);box-sizing:border-box;justify-content:center;background:var(--accent);color:#fff;padding:20px 24px}
.ft-ic,.blk:nth-of-type(even) .ft-ic{background:rgba(255,255,255,.12);color:#fff}
.ft-l{color:rgba(255,255,255,.78)}
.ft-v{color:#fff}
.ft-v .num{color:var(--gold)}
.ft-sub{color:rgba(255,255,255,.78)}

/* §79 所要時間の枠を作り直し（2026-09-29 おその氏指摘「AI で作った感・時計の薄い丸が微妙」）。§78 の面・丸・金の数字をやめる。
   面を塗らず上下の細い罫線だけで区切る。時計は丸なしの細線でラベルの頭に。PC は「時計 所要時間の目安 ｜ 60分程度（…）」を1行・中央、SP は2段。
   数字はステップ番号と同じ英字の書体（--font-serif）・ネイビー。幅はステップの列と同じ */
.blk-in>.flow-time,.flow-time,.blk:nth-of-type(even) .flow-time{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;max-width:var(--col);box-sizing:border-box;margin:36px auto 0;padding:18px 16px 20px;background:none;color:var(--ink);border-top:1px solid rgba(22,48,90,.22);border-bottom:1px solid rgba(22,48,90,.22)}
.ft-ic,.blk:nth-of-type(even) .ft-ic{display:none}
.ft-body{display:flex;flex-direction:column;align-items:center;gap:4px}
.ft-l{display:inline-flex;align-items:center;gap:8px;font-size:14px;letter-spacing:.14em;color:var(--ink-sub)}
.ft-l::before{content:"";width:17px;height:17px;flex:none;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center/contain no-repeat;color:var(--accent)}
.ft-v{font-size:16px;color:var(--ink);letter-spacing:.06em;text-align:center}
.ft-v .num{font-family:var(--font-serif);font-size:2.1em;font-weight:400;line-height:1;color:var(--accent);margin:0 .08em 0 0;vertical-align:-.08em}
.ft-sub{display:block;margin:4px 0 0;font-size:14px;letter-spacing:.04em;color:var(--ink-sub)}
@media (min-width:768px){
  .ft-body{flex-direction:row;align-items:center;gap:0}
  .ft-l{padding-right:24px;margin-right:24px;border-right:1px solid rgba(22,48,90,.22);line-height:2.2}
  .ft-sub{display:inline;margin-left:.6em}
}
/* §79 の続き（2026-09-29 おその氏指示「60 の形が特徴的すぎる。一般的な明朝の細いフォントに」）。英字書体（Cormorant の飾り数字）をやめ、見出しと同じ明朝（Zen Old Mincho 400）・高さのそろった数字に */
.ft-v .num{font-family:var(--font-mincho);font-weight:400;font-variant-numeric:lining-nums;font-size:1.9em;letter-spacing:.02em;vertical-align:-.06em}
/* §77 の続き（2026-09-29 おその氏指示「SP では廣瀬院長の後ろのスラッシュは不要」）。要点ボックスの「／」＝SP では改行に置き換え（記号は出さない）。PC は「／」のまま */
@media (max-width:767px){.facts .fsep{display:block;height:0;overflow:hidden;font-size:0;line-height:0}}

/* §80 治療ページ冒頭の写真を SP では画面の左右いっぱいに（2026-09-29 おその氏指示・SP のみ）。列の左右の余白を打ち消して 100vw に */
@media (max-width:767px){
  .intro .hero:has(.tphoto){width:100vw;max-width:none;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
  .intro .hero .tphoto{border-radius:0}
}

/* §81 治療ページの「院長の公式KOL」の枠（2026-09-29 おその氏指示。対象＝ブレッシング・ソフウェーブ＝生成器の KOL 一覧）。要点ボックスの直後。
   所要時間の枠（§79）と同じく、面を塗らず上下の細い罫線で区切る。英字（金・大文字）→ 一文（明朝）→ 医師紹介への案内（14px）。未承認の案内を添える */
.page-body>.kol{max-width:var(--col);margin:40px auto 0;padding:24px 16px 26px;text-align:center;border-top:1px solid rgba(22,48,90,.22);border-bottom:1px solid rgba(22,48,90,.22)}
.kol-en{display:block;margin-bottom:10px;font-family:var(--font-serif);font-size:14px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.kol-t{margin:0 auto;max-width:var(--measure);font-family:var(--font-head);font-weight:500;font-size:18px;line-height:1.7;letter-spacing:.06em;color:var(--ink)}
.kol-d{margin:10px auto 0;max-width:var(--measure);font-size:14px;line-height:1.8;color:var(--ink-sub)}
.kol-note{display:block;margin-top:6px}
@media (min-width:768px){.kol-t{font-size:21px}.page-body>.kol{padding:28px 24px 30px}}
.kol-t{word-break:keep-all;overflow-wrap:anywhere}   /* §81 の続き：見出しの一文は語の切れ目（wbr）でだけ折る */

/* §82 TOP「症例」の横スクロール帯（2026-09-30 おその氏指示。口元専門サイト TOP の .tcases と同じ構成＝写真・施術名・見出し・費用／経過／リスク・詳しく見る）。
   男性の症例のみ。罫線は使わず、面（ウォームグレー）の上に白いカードを並べる。帯は画面の左右いっぱいに流し、先頭は本文の左端にそろえる */
.is-top .has-cases .tc-scroll{margin:0 calc(50% - 50vw);padding:4px max(var(--gutter),calc((100vw - var(--col)) / 2)) 16px;overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;scrollbar-width:thin}
.is-top .has-cases .tc-track{display:flex;gap:16px;list-style:none;margin:0;padding:0;width:max-content}
.is-top .has-cases .tc-card{flex:0 0 clamp(264px,74vw,320px);margin:0;scroll-snap-align:start;background:var(--bg)}
.is-top .has-cases .tc-card>a{display:flex;flex-direction:column;height:100%;color:inherit;text-decoration:none}
.is-top .has-cases .tc-photo img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.is-top .has-cases .tc-body{display:flex;flex-direction:column;gap:8px;padding:18px 18px 16px;text-align:left}
.is-top .has-cases .tc-cat{font-size:14px;line-height:1.6;letter-spacing:.06em;color:var(--accent)}
.is-top .has-cases .tc-h{font-family:var(--font-head);font-weight:500;font-size:17px;line-height:1.6;letter-spacing:.04em;color:var(--ink)}
.is-top .has-cases .tc-gl{display:grid;gap:6px;margin:6px 0 0;padding:12px 0 0;background:none}
.is-top .has-cases .tc-gl div{display:flex;gap:10px;font-size:14px;line-height:1.65}
.is-top .has-cases .tc-gl dt{flex:0 0 6.5em;color:var(--ink-sub);font-weight:400}
.is-top .has-cases .tc-gl dd{margin:0;color:var(--ink)}
.is-top .has-cases .tc-go{margin-top:auto;display:block;padding:14px 10px;text-align:center;background:var(--accent);color:var(--accent-ink);font-size:14px;letter-spacing:.14em;font-weight:500;transition:opacity .25s}
@media (hover:hover){.is-top .has-cases .tc-card>a:hover .tc-go{opacity:.85}}
.is-top .has-cases .tc-hint{margin:8px 0 0;text-align:center;font-size:14px;letter-spacing:.06em;color:var(--ink-sub)}
.is-top .has-cases .tc-note{max-width:var(--measure);margin:24px auto 0;font-size:14px;line-height:1.8;color:var(--ink-sub);text-align:left}
@media (min-width:768px){.is-top .has-cases .tc-track{gap:24px}.is-top .has-cases .tc-hint{display:none}}

/* §83 TOP「廣瀬院長について」の権威性ラインナップ（2026-09-30 おその氏指示：説明文より先に、資格・学会・KOL を端的に並べる入口）。
   大きい語（明朝500・ネイビー）＋補足（14px）のタイルを 2列で。数字は明朝で大きく（§79 と同じ数字の扱い）。罫線なし・面で区切る */
.is-top .doctor-text .doc-lineup{list-style:none;padding:0;margin:0 0 28px;display:grid;grid-template-columns:1fr 1fr;gap:8px;max-width:none}
.is-top .doctor-text .doc-lineup li{margin:0;display:flex;flex-direction:column;justify-content:center;gap:6px;min-height:104px;padding:16px 14px;background:var(--bg-sub);text-align:left}
.is-top .doctor-text .lu-b{font-family:var(--font-head);font-weight:500;font-size:17px;line-height:1.4;letter-spacing:.04em;color:var(--accent);word-break:keep-all;overflow-wrap:anywhere}
.is-top .doctor-text .lu-n{margin-left:.2em;font-family:var(--font-mincho);font-weight:400;font-variant-numeric:lining-nums;font-size:1.7em;line-height:1;vertical-align:-.08em}
.is-top .doctor-text .lu-u{font-size:.9em}
.is-top .doctor-text .lu-s{font-size:14px;line-height:1.6;letter-spacing:.02em;color:var(--ink-sub)}
.is-top .doctor-text .doc-lineup~p{text-align:left}
@media (min-width:768px){.is-top .doctor-text .lu-b{font-size:19px}.is-top .doctor-text .doc-lineup li{padding:18px 18px}}

/* §84 FV 直下のページ内リンクが3つの場合（2026-09-30 おその氏指示で「院内のご案内」を外し「廣瀬院長について」を先頭に）。
   SP＝先頭（廣瀬院長について）を横いっぱい・残り2つを2列。PC＝3列 */
.top-jump.n3 .jump li:first-child{grid-column:1 / -1}
@media (min-width:768px){.top-jump.n3 .jump,.page-body .top-jump.n3 .jump{grid-template-columns:repeat(3,1fr)}.top-jump.n3 .jump li:first-child{grid-column:auto}}
/* §82 の続き：吸着（scroll-snap）の基準を左右の余白の内側に。これがないと先頭カードが画面の左端に吸い付き、余白が消える */
.is-top .has-cases .tc-scroll{scroll-padding-inline:max(var(--gutter),calc((100vw - var(--col)) / 2))}

/* §85 症例をカルーセルに（2026-09-30 おその氏指示「カルーセル仕様になっていない」。§82 の横スクロール帯を置き換え）。
   本文の幅の中に収め、SP＝1枚（次のカードの端を少し見せてスワイプできると分かるように）／PC＝3枚。スクロールバーは出さず、
   下に 前へ・進み具合バー・枚数・次へ（予約ページの道順カルーセル §38 と同じ部品の見た目＝ネイビーの四角ボタン・3px のバー） */
.is-top .has-cases .tc-carousel{max-width:var(--col);margin:0 auto}
.is-top .has-cases .tc-scroll{margin:0;padding:0;scroll-padding-inline:0;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.is-top .has-cases .tc-scroll::-webkit-scrollbar{display:none}
.is-top .has-cases .tc-track{width:auto;gap:16px}
.is-top .has-cases .tc-card{flex:0 0 86%;scroll-snap-align:start}
.is-top .has-cases .tc-photo img{object-position:center top}
.tc-ctrl{display:flex;align-items:center;gap:14px;margin-top:24px}
.tc-bar{flex:1;display:flex;gap:6px}
.tc-bar button{flex:1;height:3px;min-height:0;padding:0;border:0;background:rgba(22,48,90,.18);cursor:pointer;transition:background-color .3s}
.tc-bar button.is-done{background:var(--accent)}
.tc-count{flex:none;margin:0;font-size:13px;color:var(--ink-sub);font-variant-numeric:lining-nums}
.tc-count b{font-size:18px;font-weight:500;color:var(--ink)}
.tc-count span{margin:0 6px;opacity:.45}
.tc-carousel.is-static .tc-ctrl{display:none}
@media (min-width:768px){
  .is-top .has-cases .tc-track{gap:24px}
  .is-top .has-cases .tc-card{flex-basis:calc((100% - 48px) / 3)}
  .tc-ctrl{max-width:560px;margin:32px auto 0}
}
/* §85 の続き：タブレット幅（768〜1099px）は 2枚。3枚だと費用・リスクの列が細くなり1行が数文字で折れる */
@media (min-width:768px) and (max-width:1099px){.is-top .has-cases .tc-card{flex-basis:calc((100% - 24px) / 2)}}

/* §86 症例カードを本サイトの症例カルーセル（CaseCarousel.tsx）と同じ情報量に（2026-09-30 おその氏指示・スクショ参照）。
   写真＝正方形・中央で切り抜き（§85 の上寄せは下が切れて見えるためやめる）／施術名・お悩み・経過を各1行（はみ出しは…）／枠線のボタン「この症例を詳しく見る」。
   カードは情報が少なく低いので、SP は 72%（次のカードを大きめに見せる）、768px 以上は 3枚 */
.is-top .has-cases .tc-photo img{object-position:center center}
.is-top .has-cases .tc-body{gap:8px;padding:16px 16px 14px}
.is-top .has-cases .tc-row{display:flex;align-items:baseline;gap:10px;min-width:0}
.is-top .has-cases .tc-l{flex:none;font-size:13px;letter-spacing:.12em;color:var(--gold)}
.is-top .has-cases .tc-v{flex:1;min-width:0;font-size:15px;line-height:1.6;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.is-top .has-cases .tc-go{margin:0 16px 16px;padding:12px 10px;background:transparent;color:var(--ink);border:1px solid var(--ink);font-size:14px;letter-spacing:.14em;font-weight:400;transition:background-color .25s,color .25s}
@media (hover:hover){.is-top .has-cases .tc-card>a:hover .tc-go{opacity:1;background:var(--ink);color:#fff}}
.is-top .has-cases .tc-card{flex-basis:72%}
@media (min-width:768px){.is-top .has-cases .tc-card{flex-basis:calc((100% - 48px) / 3)}}
/* §86 の続き：1行省略（nowrap）の文字でカードが文字の長さまで広がるのを防ぐ（flex の子の最小幅を 0 に） */
.is-top .has-cases .tc-card,.is-top .has-cases .tc-card>a,.is-top .has-cases .tc-body{min-width:0}
.is-top .has-cases .tc-card>a{overflow:hidden}

/* §87 症例一覧ページ（case.html・2026-09-30 おその氏指示で男性サイト専用に制作）。カードは TOP（§82・§85・§86）と同じ見た目で、
   カルーセルではなく格子状に全件（SP 1列／768px〜 2列／1100px〜 3列）。面（ウォームグレー）の上に白いカード。 */
body:not(.is-top) .has-cases .tc-carousel{max-width:var(--col);margin:0 auto}
body:not(.is-top) .has-cases .tc-track{display:grid;grid-template-columns:1fr;gap:24px;list-style:none;margin:0;padding:0}
body:not(.is-top) .has-cases .tc-card{margin:0;min-width:0;background:var(--bg-sub)}
body:not(.is-top) .has-cases .tc-card>a{display:flex;flex-direction:column;height:100%;min-width:0;overflow:hidden;color:inherit;text-decoration:none}
body:not(.is-top) .has-cases .tc-photo img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;object-position:center center;border-radius:0}
body:not(.is-top) .has-cases .tc-body{display:flex;flex-direction:column;gap:8px;min-width:0;padding:16px 16px 14px;text-align:left}
body:not(.is-top) .has-cases .tc-row{display:flex;align-items:baseline;gap:10px;min-width:0}
body:not(.is-top) .has-cases .tc-l{flex:none;font-size:13px;letter-spacing:.12em;color:var(--gold)}
body:not(.is-top) .has-cases .tc-v{flex:1;min-width:0;font-size:15px;line-height:1.6;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body:not(.is-top) .has-cases .tc-go{margin:auto 16px 16px;display:block;padding:12px 10px;text-align:center;border:1px solid var(--ink);color:var(--ink);font-size:14px;letter-spacing:.14em;transition:background-color .25s,color .25s}
@media (hover:hover){body:not(.is-top) .has-cases .tc-card>a:hover .tc-go{background:var(--ink);color:#fff}}
body:not(.is-top) .has-cases .tc-note{max-width:var(--measure);margin:32px auto 0;font-size:14px;line-height:1.8;color:var(--ink-sub)}
@media (min-width:768px){body:not(.is-top) .has-cases .tc-track{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){body:not(.is-top) .has-cases .tc-track{grid-template-columns:repeat(3,1fr)}}

/* §88 症例詳細ページ（case/*.html・2026-09-30）。
   1) 治療前後の写真は切り抜かずに全体を見せる（共通の写真グリッドは 16:9 に切り抜くため、症例の写真だけ元の比率に）。SP 1列／768px〜 2列
   2) 治療の内容の表（{spec}）＝項目名を上・内容を下に積む。見出し行（項目｜内容）は出さない。太字にしない */
.photo-grid img[src*="img/case/"]{aspect-ratio:auto;object-fit:contain;background:none}
@media (min-width:768px){.blk.gallery .photo-grid:has(img[src*="img/case/"]){grid-template-columns:repeat(2,1fr)}}
.spec .tw{overflow:visible}
.spec .tw table,.spec .tw tbody,.spec .tw tr,.spec .tw td{display:block;width:100%}
.spec .tw tr:first-child{display:none}
.spec .tw tr{padding:16px 0;border-bottom:1px solid var(--line)}
.spec .tw td{border:0;padding:0;min-height:0;white-space:normal!important;font-weight:400!important;background:none}
.spec .tw td:first-child{margin-bottom:6px;font-size:14px;letter-spacing:.08em;color:var(--ink-sub)}
.spec .tw td:last-child{font-size:16px;line-height:1.8;color:var(--ink)}
@media (min-width:768px){
  .spec .tw tr{display:grid;grid-template-columns:9em 1fr;gap:16px;align-items:baseline}
  .spec .tw td:first-child{margin:0}
}
/* §88 の続き：共通の表のセル余白（16px 8px）が勝って項目名と内容の間が空くため、症例の表では打ち消す。
   写真が1枚の症例は PC で左に寄るので、写真の列を中央に寄せる（1枚の幅は 2枚のときと同じ） */
.blk.spec .tw td{padding:0!important}
@media (min-width:768px){.blk.gallery .photo-grid:has(img[src*="img/case/"]){grid-template-columns:repeat(auto-fit,minmax(0,calc((100% - 24px) / 2)));justify-content:center}}

/* §89 TOP「廣瀬院長について」の調整（2026-09-30 おその氏指示）
   1) 本文は見出しと名前の間（写真と名前のブロックの前）。文章幅（--measure）で中央に置き、文字は左揃え
   2) 権威性のボックスは要点だけ（専門医2つのみ認定団体を小さく添える）。文字は中央揃え */
.is-top .has-doctor .doc-lead{max-width:var(--measure);margin:0 auto 48px}
.is-top .has-doctor .doc-lead p{margin:0 0 1.2em;font-size:17px;line-height:2;text-align:left;color:var(--ink)}
.is-top .has-doctor .doc-lead p:last-child{margin-bottom:0}
@media (min-width:768px){.is-top .has-doctor .doc-lead{margin-bottom:64px}.is-top .has-doctor .doc-lead p{font-size:18px}}
.is-top .doctor-text .doc-lineup li{align-items:center;justify-content:center;min-height:88px;text-align:center}
.is-top .doctor-text .lu-b{text-align:center}
.is-top .doctor-text .lu-s{text-align:center;font-size:13px}
.is-top .doctor-text .lu-s:empty{display:none}

/* §90 TOP の並び替え（2026-09-30 おその氏指示：症例→廣瀬院長について→悩みから選ぶ）で「悩みから選ぶ」の面がウォームグレーになったため、
   アイコンの四角は白に（面と同じ色だとカードの形が消える。下層の偶数節 §1197 と同じ扱い） */
.is-top .sec--sub .icon-grid .card-media.is-icon,.is-top .sec--sub .icon-grid li:first-child .card-media.is-icon{background:var(--bg)}
/* §90 の続き：「ご来院の前に」の面が白になったため（並び替えで白とウォームグレーを交互にした結果）、案内パネル（白）をウォームグレーに。
   面と同じ白だと3つのパネルの形が消える（2026-09-30 おその氏指摘） */
.is-top .sec--white .link-panel{background:var(--bg-sub)}

/* §91 TOP「廣瀬院長について」の本文の横に手術中の写真（2026-09-30 おその氏支給 assets/img/clinic/doctor-surgery.jpg・680×469）。
   SP＝写真（左右いっぱい）→本文。PC＝左に写真・右に本文（写真は元の幅 680px を超えて引き伸ばさない） */
.is-top .has-doctor .doc-intro{display:grid;grid-template-columns:1fr;gap:28px;margin:0 auto 48px;max-width:var(--col)}
.is-top .has-doctor .doc-intro .doc-lead{margin:0;max-width:none}
.is-top .has-doctor .doc-fig{margin:0 calc(-1 * var(--gutter))}
.is-top .has-doctor .doc-fig img{display:block;width:100%;height:auto;aspect-ratio:680/469;object-fit:cover}
@media (min-width:768px){
  .is-top .has-doctor .doc-intro{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center;margin-bottom:72px}
  .is-top .has-doctor .doc-fig{margin:0;max-width:680px}
}
.is-top .doctor-text .lu-nu{white-space:nowrap}   /* §91 の続き：数字と単位（5院・2機種）を離さない */

/* §92 治療ページの症例（2026-09-30 おその氏指示）。ページ内リンクの直下。TOP の症例カルーセル（§85・§86）と同じ要素・動き。
   症例がまだない治療は front matter「cases_demo: yes」でアタリ（灰色の写真枠＋〇〇）。一覧ページの格子（§87）より優先させる */
.page-body .t-cases.has-cases{max-width:var(--col);margin:48px auto 0;padding:0}
.t-cases .t-cases-en{margin:0 0 10px;text-align:center;font-family:var(--font-serif);font-size:14px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.page-body .t-cases h2{margin:0 0 28px;text-align:center;font-family:var(--font-head);font-weight:500;font-size:22px;letter-spacing:.06em}
.page-body .t-cases h2::before{display:none}
.page-body .t-cases.has-cases .tc-scroll{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.page-body .t-cases.has-cases .tc-scroll::-webkit-scrollbar{display:none}
.page-body .t-cases.has-cases .tc-track{display:flex;gap:16px;width:auto}
.page-body .t-cases.has-cases .tc-card{flex:0 0 72%;scroll-snap-align:start;background:var(--bg-sub)}
.page-body .t-cases.has-cases .tc-card>a[aria-disabled]{cursor:default}
.t-cases .tc-ph{display:grid;place-items:center;width:100%;aspect-ratio:1/1;background:#d9d6cf;color:rgba(36,36,36,.55);font-size:14px;letter-spacing:.14em}
.page-body .t-cases.has-cases .tc-go{margin-top:auto}
.page-body .t-cases .tc-note{max-width:var(--measure);margin:16px auto 0;font-size:14px;line-height:1.8;color:var(--ink-sub);text-align:left}
@media (min-width:768px){
  .page-body .t-cases.has-cases{margin-top:64px}
  .page-body .t-cases h2{font-size:26px}
  .page-body .t-cases.has-cases .tc-track{gap:24px}
  .page-body .t-cases.has-cases .tc-card{flex-basis:calc((100% - 48px) / 3)}
}
.page-body section.t-cases h2{text-align:center!important;margin:0 auto 32px!important}   /* §92 の続き：下層の見出しの左揃えに負けないように（他の節の見出しと同じ中央） */

/* §93 悩みページ冒頭の説明文の書き出し（「毛穴とニキビ跡は、」など＝最初の文の最初の「、」まで）を見出しの始まりとして大きく1行に（2026-09-30 おその氏指示・悩みページ共通） */
.lead .lead-h{display:block;margin:0 0 10px;font-family:var(--font-head);font-weight:500;font-size:21px;line-height:1.6;letter-spacing:.06em;color:var(--ink)}
@media (min-width:768px){.lead .lead-h{font-size:24px;margin-bottom:12px}}

/* §94 悩みページ「どんな症状か」（#c2）の箇条書きを、点ではなく文字を囲むボックスに（2026-09-30 おその氏指示・悩みページ共通）。
   罫線は使わず面（ウォームグレー）で囲む。節の面がウォームグレーのときは白に。SP 1列／PC は幅いっぱいの1列のまま（文が長いため） */
#c2 .blk-in>ul:not([class]){list-style:none;padding:0;margin:0 auto 24px;display:grid;gap:10px}
#c2 .blk-in>ul:not([class])>li{margin:0;padding:16px 20px;background:var(--bg-sub);font-size:16px;line-height:1.8;color:var(--ink)}
#c2 .blk-in>ul:not([class])>li::before{display:none;content:none}
.page-body>.blk:nth-of-type(even)#c2 .blk-in>ul:not([class])>li{background:var(--bg)}
@media (min-width:768px){#c2 .blk-in>ul:not([class])>li{padding:18px 24px;font-size:17px}}
#c2 .blk-in>ul:not([class])>li{word-break:keep-all;overflow-wrap:anywhere}   /* §94 の続き：語の途中で折らず「、」で改行する */
#c2 .blk-in>ul:not([class])>li{text-align:center}   /* §94 の続き：ボックス内の文字は中央揃え（2026-09-30 おその氏指示） */
.lead .lead-h{text-align:center}   /* §93 の続き：冒頭の書き出し（「〇〇は、」）は中央揃え（2026-09-30 おその氏指示・悩みページ／治療ページ共通）。続く本文は左揃えのまま */

/* §95 治療ページ「治療後の過ごし方」（#b3a・2026-09-30 おその氏指示）。項目名（左・14px）と目安（右）の2列。SP は項目名を上・目安を下に積む（§88 の症例の表と同じ形） */
#b3a .tw{overflow:visible}
#b3a .tw table,#b3a .tw tbody,#b3a .tw tr,#b3a .tw td{display:block;width:100%}
#b3a .tw tr:first-child{display:none}
#b3a .tw tr{padding:16px 0;border-bottom:1px solid var(--line)}
#b3a .tw td{border:0;padding:0!important;min-height:0;white-space:normal!important;font-weight:400!important;background:none}
#b3a .tw td:first-child{margin-bottom:6px;font-size:14px;letter-spacing:.08em;color:var(--ink-sub)}
#b3a .tw td:last-child{font-size:16px;line-height:1.8;color:var(--ink)}
@media (min-width:768px){
  #b3a .tw tr{display:grid;grid-template-columns:11em 1fr;gap:16px;align-items:baseline}
  #b3a .tw td:first-child{margin:0}
}

/* §96 治療ページの要点ボックス（2026-09-30 おその氏指示）：料金は最後に置き、ボックス2個分の横幅に。すぐ下に「標準的な費用」の節（生成器で要点の直後へ移動） */
.page-body .facts li.f-price,.page-body .intro .facts li.f-price{flex-basis:100%}
/* §95 の続き：「治療後の過ごし方」の項目名は小さい文字のため、500＋ネイビー（UI方針：太字700は使わず強調は500＋ネイビー） */
#b3a .tw td:first-child{font-weight:500!important;color:var(--accent)}
#bk h2{word-break:keep-all;overflow-wrap:normal}   /* §97 治療ページ「Maison PUREJUのこだわり」の見出しは「の」の後でだけ折る（2026-09-30） */
/* §97 の続き：こだわりの節の下部に写真（2026-09-30 おその氏指示・仮置き）。本文と同じ幅（720px）に収め、元の幅 680px を超えて引き伸ばさない */
.bk-fig{max-width:680px;margin:32px auto 0}
.bk-fig img{display:block;width:100%;height:auto;aspect-ratio:680/469;object-fit:cover}

/* §98 治療ページ「料金について」（#b5）の表（2026-09-30 おその氏指示）：表の中は白・列の間に縦の罫線（区分｜内容｜料金）。見出し行は薄いグレーのまま */
#b5 .tw td{background:var(--bg)}
#b5 .tw th+th,#b5 .tw td+td{border-left:1px solid var(--line)}
#b5 .tw td,#b5 .tw th{word-break:keep-all;overflow-wrap:anywhere}   /* §98 の続き：「ニキビ跡・毛／穴」のように語の途中で折らない（「・」で折る） */
/* §97 の続き：SP ではこだわりの写真を画面の左右いっぱい・節の下端まで（左右の余白と下の余白をなくす。2026-09-30 おその氏指示）。
   下は節の下余白（.blk の padding-bottom 104px）と同じだけ引き上げて、次の節に写真が接するようにする */
@media (max-width:767px){
  .bk-fig{max-width:none;width:100vw;margin:32px calc(50% - 50vw) -104px}
}

/* §99 挿絵・写真の仮枠（原稿の「!ph 文言」・2026-09-30）。毛穴・ニキビ跡「男性の場合」の説明図の場所。本文の幅に収め、挿絵と同じ 4:3 */
.blk-in>.illust-ph{max-width:680px;margin:32px auto 0;border-radius:0}
.blk-in>.illust-ph,.page-body .blk .blk-in>.illust-ph{background:#d9d6cf!important;border:0;color:rgba(36,36,36,.6)}   /* §99 の続き：面の色に関係なくグレー（症例のアタリ §92 と同じ灰色）で「挿絵の場所」と分かるように */

/* §100 TOP「ご来院の前に」の料金一覧／リスク・副作用をアコーディオンに（2026-09-30 おその氏指示）。生成器 render_link_acc・原稿の行末 {acc b5}。
   開くと治療一覧の悩み別7グループ＝各治療ページの #b5（料金について）／#b6（主なリスク・副作用）へ。details で開閉（JS なし）。
   PC は4つを2列×2段に（3列だと4つ目が1つだけ残る）。開いた箱だけ伸びるよう上揃え。矢印は下向き＝開くと上向き */
#before-visit .link-list{align-items:start}
.link-list li.has-acc{display:block}
.link-acc{background:var(--bg-sub)}
.link-acc>summary{list-style:none;cursor:pointer}
.link-acc>summary::-webkit-details-marker{display:none}
.is-top .link-acc>summary.link-panel,.is-top .link-acc>summary.link-panel:hover{transform:none;box-shadow:none}
.is-top .has-acc .lp-arrow,.is-top .has-acc .link-panel:hover .lp-arrow{transform:translateX(-50%)}
.has-acc .lp-arrow::before{transform:rotate(135deg);vertical-align:.3em}
.link-acc[open] .lp-arrow::before{transform:rotate(-45deg);vertical-align:0}
.acc-body{padding:0 16px 24px}
.acc-note{margin:0 0 16px;font-size:14px;line-height:1.7;color:var(--ink-sub);text-align:left}
.acc-grid{display:grid;grid-template-columns:1fr;gap:20px}
.acc-gt{margin:0 0 8px;font-size:14px;letter-spacing:.05em;color:var(--gold);text-align:left}
.acc-g ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.acc-g li{margin:0;display:block;width:100%}
.acc-g a{position:relative;display:flex;width:100%;box-sizing:border-box;align-items:center;min-height:48px;padding:10px 40px 10px 16px;background:var(--bg);color:var(--accent);text-decoration:none;font-size:16px;line-height:1.5}
.acc-g a::after{content:"";position:absolute;right:18px;top:50%;width:.42em;height:.42em;border-top:1.5px solid var(--gold);border-right:1.5px solid var(--gold);transform:translateY(-50%) rotate(45deg)}
.acc-more{display:block;margin-top:24px;text-align:center;color:var(--accent);font-size:15px}
@media (min-width:768px){
  #before-visit .link-list{grid-template-columns:repeat(2,1fr)}
  .acc-body{padding:0 32px 32px}
  .acc-grid{grid-template-columns:repeat(2,1fr);gap:24px}
}

/* §101 TOP「ご予約」にアクセスの案内を1段落追加（2026-09-30 おその氏指示）。3つ目の段落も2つ目と同じ間隔・文字（§785 の last-child 40px を打ち消す） */
.is-top .sec--navy .button-list+p+p+p{margin-top:12px;font-size:14px;line-height:2;color:rgba(255,255,255,.82)}

/* §102 はじめての方へ（2026-09-30 おその氏指示）。body.pg-first-visit は生成器が付ける
   ①所要時間の目安（#s5）の表＝治療ページの料金表（§98）と同じ：表の中は白・列の間に縦の罫線
   ②初診の費用とお支払い方法（#s6）＝枠がなく見づらい → 表と同じ枠に納める（項目名は見出し行と同じグレー・内容は白）。
     SP は項目名の帯の下に内容、PC は左に項目名・右に内容（間に縦の罫線） */
.pg-first-visit #s5 .tw td{background:var(--bg)}
.pg-first-visit #s5 .tw th+th,.pg-first-visit #s5 .tw td+td{border-left:1px solid var(--line)}
.pg-first-visit #s6 .info{display:grid;grid-template-columns:1fr;gap:0;max-width:none;margin:0 0 1em;border:1px solid var(--line);border-bottom:0}
.pg-first-visit #s6 .info dt{padding:12px 16px;background:var(--bg-sub);border-bottom:1px solid var(--line);font-size:14px;font-weight:500;color:var(--ink)}
.pg-first-visit #s6 .info dd{margin:0;padding:14px 16px;background:var(--bg);border-bottom:1px solid var(--line);font-size:16px;line-height:1.8}
@media (min-width:768px){
  .pg-first-visit #s6 .info{grid-template-columns:11em 1fr}
  .pg-first-visit #s6 .info dt{display:flex;align-items:center;padding:16px 20px;border-right:1px solid var(--line)}
  .pg-first-visit #s6 .info dd{padding:16px 20px}
}
/* §102 の続き：末尾の「ご予約・アクセス」はリンク1つ（悩みから選ぶ・医師紹介は同日おその氏指示で削除）→ 3列の1マスだと細く縦長になるため、本文と同じ幅の1枚に */
.pg-first-visit #s9 .link-list{grid-template-columns:1fr;max-width:720px;margin-left:auto;margin-right:auto;padding:0}
@media (min-width:768px){.pg-first-visit #s9 .link-list{grid-template-columns:1fr}}
.pg-first-visit #s9 .blk-in>.link-list{max-width:none;width:100%}
.pg-first-visit #s9 .lp-t{word-break:keep-all;overflow-wrap:anywhere}   /* 「アクセ／ス」と語の途中で折らない（「・」で折る） */
.pg-first-visit #s9 .link-panel{flex:1}
@media (min-width:768px){.pg-first-visit #s9 .link-panel .lp-d{text-align:center}}   /* PC は1行に収まる＝見出しと揃えて中央。SP は2行＝左揃えのまま */

/* §103 専門用語の補足（2026-09-30 おその氏指示）。辞書＝build/glossary.md・生成器 add_glossary。
   本文：最初に出てくる1か所にグレーの点線（通常のリンクの実線と区別・同日おその氏指示で金→グレー）→ 押すと末尾「用語の解説」の該当項目へ移動して開く。
   用語欄：用語名だけの行を並べ、押すと2〜3行の説明が開く（details）。本文から来たときだけ「本文に戻る」を出す。
   行の面は節の面と逆の色（白の節ではグレー・グレーの節では白）。罫線なし */
.gl-term{color:inherit;text-decoration:underline dotted;text-decoration-color:rgba(36,36,36,.4);text-decoration-thickness:2px;text-underline-offset:.3em}
.gl-term:hover{color:var(--accent)}
.gl-note{margin:0 0 16px;font-size:14px;line-height:1.7;color:var(--ink-sub)}
.gl-list{display:grid;gap:6px}
.gl-item{background:var(--bg-sub)}
.page-body>.blk:nth-of-type(even) .gl-item{background:var(--bg)}
.gl-item>summary{position:relative;display:flex;align-items:center;min-height:52px;padding:12px 48px 12px 16px;list-style:none;cursor:pointer;font-size:16px;line-height:1.5;color:var(--accent)}
.gl-item>summary::-webkit-details-marker{display:none}
.gl-item>summary::after{content:"";position:absolute;right:20px;top:50%;width:.45em;height:.45em;border-right:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.gl-item[open]>summary::after{transform:translateY(-30%) rotate(-135deg)}
.gl-body{padding:0 16px 16px}
.gl-body p{margin:0 0 .6em;font-size:15px;line-height:1.8}
.gl-back{display:inline-block;margin-top:4px;font-size:14px;color:var(--accent)}
.gl-back::before{content:"↑ "}
@media (min-width:768px){
  .gl-list{grid-template-columns:repeat(2,1fr);align-items:start;gap:8px}
  .gl-item>summary{padding-left:20px}
  .gl-body{padding:0 20px 18px}
}
/* §103 の続き：案内文は div（段落の 720px 列の強制指定 §1123 を受けず、用語の一覧 1080px と左端が揃う） */

/* §104 ページトップボタン（2026-09-30 おその氏承認）。全ページ・画面2枚分より下で表示（テンプレートの JS が .is-shown を付ける）。
   直径48px の丸・白地に影・ネイビーの上向き「＞」（§56 と同じ線の矢印）。罫線なし。
   SP：予約バー（60px＋端末の下の余白）の上に固定＝バーはスクロール中に出入りするが、ボタンは動かさない。PC：右下24px。メニューを開いている間は隠す */
.to-top{position:fixed;right:16px;bottom:calc(60px + env(safe-area-inset-bottom,0px) + 16px);z-index:31;display:grid;place-items:center;width:48px;height:48px;padding:0;border:0;border-radius:50%;
  background:#fff;color:var(--accent);box-shadow:0 4px 16px rgba(0,0,0,.14);cursor:pointer;
  opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .3s,transform .3s,visibility 0s .3s}
.to-top::before{content:"";width:10px;height:10px;border-top:1.5px solid currentColor;border-left:1.5px solid currentColor;transform:translateY(2px) rotate(45deg);box-sizing:border-box}
.to-top.is-shown{opacity:1;visibility:visible;transform:none;transition:opacity .3s,transform .3s,visibility 0s}
.to-top:hover{box-shadow:0 6px 20px rgba(0,0,0,.2)}
.to-top:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.menu-open .to-top{opacity:0;visibility:hidden}
@media (min-width:768px){.to-top{right:24px;bottom:24px}}
@media (prefers-reduced-motion:reduce){.to-top,.to-top.is-shown{transition:none}}

/* §105 「治療後の過ごし方」（#b3a）の項目名（2026-09-30 おその氏指示）：色をサイトのゴールドに。
   SP（項目名が上に積まれる形）は中央揃え。PC は左に項目名・右に内容の2列のため、項目名は左揃えのまま（列の中で中央に寄せると内容と離れる） */
#b3a .tw td:first-child{color:var(--gold)}
/* SP の中央揃えは 2026-10-21 おその氏指示「センタリングで見づらい」で取りやめ＝左揃え（下の内容の文と左端をそろえる） */

/* §106 ボックス内の文字サイズの整理（2026-09-30 おその氏承認）。本文 17／18px に対し、ボックス内の項目名が 12〜14px と小さすぎた（要点ボックス 12px＝本文の0.67倍）。
   4段階に整理：本文 17／18（据え置き）／ボックス内の値 17／18／ボックス内の項目名 15／16・太さ500（本文の0.88倍）／注記・写真の説明 14（最小・据え置き）。
   対象＝要点ボックス（.facts）・症例カード（.tc-l/.tc-v）・症例詳細の表（.spec）・所要時間の帯（.ft-l/.ft-v）・治療後の過ごし方（#b3a）・
   はじめての方への費用表（#s6 .info）・料金一覧のアコーディオンのグループ名（.acc-gt）・治療カードの施術者（.opt-op）・院長の資格タイルの学会名（.lu-s＝補足なので最小の14px） */
:root{--fs-lbl:15px;--fs-val:17px}
@media (min-width:768px){:root{--fs-lbl:16px;--fs-val:18px}}
.facts .k,.has-cases .tc-l,body:not(.is-top) .has-cases .tc-l,.is-top .has-cases .tc-l,.spec .tw td:first-child,.ft-l,#b3a .tw td:first-child,
.pg-first-visit #s6 .info dt,.acc-gt,.opt-op-l{font-size:var(--fs-lbl);font-weight:500}
.facts .v,.has-cases .tc-v,body:not(.is-top) .has-cases .tc-v,.is-top .has-cases .tc-v,.spec .tw td:last-child,.ft-v,#b3a .tw td:last-child,
.pg-first-visit #s6 .info dd{font-size:var(--fs-val)}
.opt-op{font-size:var(--fs-lbl)}
.is-top .doctor-text .lu-s{font-size:14px}
.spec .tw td:first-child{font-weight:500!important}   /* §106 の続き：症例詳細の表は td の太さ400の強制指定（§88）があるため */
/* §106 の続き：要点ボックスは文字が大きくなった分、SP の2列が窮屈（375px で箱の幅157px・文字幅121px）。
   SP は箱の左右の余白を 18→12px に。360px 未満（320px 等）は1列にする。項目名は語の途中で折らない（「ダウンタイ／ム」を防ぐ） */
.facts .k{word-break:keep-all;overflow-wrap:anywhere}
@media (max-width:767px){.page-body .intro .facts li,.facts li{padding-left:12px;padding-right:12px}}
@media (max-width:359px){.page-body .intro .facts li{flex-basis:100%}}

/* §107 TOP「動画で知る」＝院長の YouTube エリア（2026-09-30 おその氏指示・口元専門サイト TOP の .tmovie と同じ構成）。今は枠だけ（動画は選定中）。
   大きなプレーヤー（16:9・最大880px・中央）＋動画タイトル → 一覧（SP は横スクロール・PC は4列）→ 注記 → チャンネルへのリンク。罫線なし・仮枠はグレーの面 */
.has-movie .mv-main{max-width:880px;margin:0 auto 32px}
.has-movie .mv-player{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden}
.has-movie .mv-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.has-movie .mv-ph{display:grid;place-items:center;width:100%;height:100%;background:#d9d5cc;color:var(--ink-sub);font-size:14px;letter-spacing:.06em}
.has-movie .mv-main-t{margin:14px 0 0;font-size:var(--fs-val);line-height:1.6;color:var(--ink);text-align:left}
.has-movie .mv-main-t:empty{display:none}
.has-movie .mv-scroll{overflow-x:auto;margin:0 -24px;padding:0 24px 8px;scroll-padding:0 24px;scroll-snap-type:x mandatory;scrollbar-width:none}   /* 左右は画面端まで流し、始まりは本文の左端（24px）に揃える */
.has-movie .mv-scroll::-webkit-scrollbar{display:none}
.has-movie .mv-track{list-style:none;margin:0;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:240px;gap:16px}
.has-movie .mv-track li{margin:0;scroll-snap-align:start}
.has-movie .mv-item{display:block;width:100%;padding:0;border:0;background:none;text-align:left;cursor:pointer;color:inherit;font:inherit}
.has-movie .mv-thumb{display:block;aspect-ratio:16/9;overflow:hidden;background:#d9d5cc}
.has-movie .mv-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.has-movie .mv-thumb .mv-ph{font-size:13px}
.has-movie .mv-item.is-active .mv-thumb{outline:2px solid var(--accent);outline-offset:-2px}
.has-movie .mv-cat{display:block;margin-top:10px;font-size:var(--fs-lbl);font-weight:500;letter-spacing:.06em;color:var(--gold)}
.has-movie .mv-t{display:block;margin-top:4px;font-size:15px;line-height:1.6;color:var(--ink)}
.has-movie .mv-note{margin:24px auto 0;max-width:var(--measure);font-size:14px;line-height:1.8;color:var(--ink-sub)}
.has-movie .mv-more{margin:28px 0 0;text-align:center}
.has-movie .mv-more a{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 32px;border:1px solid var(--accent);color:var(--accent);text-decoration:none;font-size:16px;letter-spacing:.06em}
.has-movie .mv-more a:hover{background:var(--accent);color:#fff}
@media (min-width:1024px){
  .has-movie .mv-scroll{overflow:visible;margin:0;padding:0}
  .has-movie .mv-track{grid-auto-flow:row;grid-template-columns:repeat(4,1fr);grid-auto-columns:auto;gap:24px}
  .has-movie .mv-t{font-size:16px}
}


/* ───────── §108 表の左2列は語の途中で折らない ─────────
   2026-10-13 SP の料金表で「院長による照/射」「上記に追/加」と語の途中で折れていたため。
   折る位置は原稿の <wbr>・空白・句読点。収まらない語だけ overflow-wrap で最後に折る（従来と同じ逃げ道） */
.tw td:nth-child(-n+2),.tw th:nth-child(-n+2){word-break:keep-all;overflow-wrap:anywhere}
/* 最終更新日：予約の帯に詰まって見えるため下に余白 */
.updated{margin-bottom:40px}
/* 2026-10-13 下層の写真グリッドはリストの既定の左余白を消す（症例詳細で写真が右にずれていた。TOP は §… で既に 0） */
.page-body .photo-grid{padding-left:0}
/* 2026-10-13 TOP 動画一覧は5本。PC の4列だと1本だけ2段目に残るため、1024px 以上は5列に */
@media (min-width:1024px){.has-movie .mv-track{grid-template-columns:repeat(5,1fr);gap:20px}}
/* 2026-10-13 要点ボックスの値は語の切れ目（・／（ ）で折る。PC で「赤み数/日」「看護師（院長の指名も/可）」と折れていたため */
.facts .v{word-break:keep-all;overflow-wrap:anywhere;line-break:strict}
.facts .num{white-space:nowrap}   /* 「1〜3」を途中で折らない */
/* 2026-10-13 症例詳細の写真：PC は2枚を横に並べて大きく見せる。
   §1759 の auto-fit は隙間24px前提で列数を計算しており、実際の隙間（--gap×1.5）では1列に落ちていた。優先度を上げて2列を固定する */
@media (min-width:1024px){body:not(.is-top) .blk.gallery .photo-grid:has(img[src*="img/case/"]){grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 32px;max-width:1080px;margin-left:auto;margin-right:auto}}
.icon-grid .card-t .nw{white-space:nowrap}   /* 2026-10-13 悩み名の括弧を折らない（施術名は非表示にした） */
.is-top .doctor-text .lu-nu{display:block}.is-top .doctor-text .lu-n{margin-left:0}   /* 2026-10-13 おその氏指示：数字のタイルは「語／数字＋単位」の2段に揃える（所属学会／5学会・公式KOL／2機種） */

/* §108 院長写真の差し替え（2026-10-14 おその氏承認＝2026-10-05 撮り直し素材）。
   ①医師紹介「症状ではなく、原因から診る。」の横に横顔（h196・背景のグレーを生かして切り抜かない）。SP は見出しの直後に全幅 4:3（顔を上寄せ）、PC は本文の右に 4:5 で回り込ませる。顔は左＝本文側を向く
   ②医師紹介の上部の帯：SP（〜767px）で人物がほぼ画面外に出ていた（§53 の right:-14%）のを、帯の右半分に顔が入る位置へ */
.profile .doc-side{margin:20px 0 28px}
.profile .doc-side img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 22%}
.profile .sns-cards{clear:both}
@media (min-width:768px){   /* 本文は縦並びのフレックス（見出しを名前の上へ移すため・1280行）で回り込みが効かない＝PC は2列のグリッド。写真は右の列で見出しから本文まで */
  .profile .doctor-text{display:grid;grid-template-columns:minmax(0,1fr) min(38%,320px);column-gap:56px;align-items:start}
  .profile .doctor-text>*{grid-column:1}
  .profile .doctor-text>.doc-side{grid-column:2;grid-row:1/span 6;margin:0}
  .profile .doctor-text>.sns-cards{grid-column:1/-1}
  .profile .doc-side img{aspect-ratio:4/5;object-position:50% 50%}
}
/* ②の改訂（同日 おその氏指摘「右端で中央が空く」「TOPと差がない＝腕組みでもっと大きく」）：写真を腕組み h080（頭〜腕の正方形）に替え、帯の下端に接地。
   腕まで見せて大きくするため、医師紹介の帯だけ高くする（SP 260→360px／PC 約1.25倍）。SP は人物を中央寄りに置き、文字との間の空きを埋める */
.ph-visual.is-empty.has-person{height:360px}
@media (min-width:768px){.ph-visual.is-empty.has-person{height:clamp(420px,42vw,580px)}}
.ph-visual.has-person>img.ph-person{inset:auto max(0px,calc(50% - var(--col) / 2)) 0 auto;height:100%;max-width:none}
@media (max-width:767px){.ph-visual.has-person>img.ph-person{right:-16%;height:94%}}

/* §108 の続き（同日 おその氏指摘「左側のグラデの濃い箇所が濃すぎる」）：§53 の続き（1268行）の帯のグラデーションの左側を淡く。白のページ名が読める濃さは残す */
.ph-visual.is-empty.has-person{background:linear-gradient(90deg,#8d9197 0%,#999da2 30%,#bcbec1 55%,#cfcfcf 72%,#d6d6d6 100%)}

/* §109 医師紹介「形成外科の専門医とは」（2026-10-14 おその氏指示）：ステップのカードの直後に続く本文が詰まらないよう上余白（当日の流れはカードで節が終わるため従来は不要だった） */
.has-flow ol.flow+p{margin-top:28px}

/* §110 医師紹介「形成外科の専門医とは」のステップを小さく（2026-10-14 おその氏指示「スクロールが長い・ステップを短く」）。
   この節だけ（原稿 {ps_compact}）。SP は 2×2 のマス・矢印なし、PC は 4 列のまま。各マス＝番号・見出し・数字（数字はネイビーで大きく）。当日の流れ等の §73 は変えない */
.ps_compact ol.flow{gap:12px!important;grid-template-columns:repeat(2,minmax(0,1fr))}
.ps_compact .flow li{padding:16px 10px 18px;gap:4px;justify-content:flex-start}
.ps_compact .flow li::after{display:none}
.ps_compact .flow-no{font-size:12px}
.ps_compact .flow-t{font-size:16px;padding-bottom:0;margin-bottom:2px;border-bottom:0}
.ps_compact .flow-d{font-family:var(--font-head);font-size:18px;font-weight:500;line-height:1.4;color:var(--accent);text-align:center}
.ps_compact .flow-d br+*,.ps_compact .flow-d small{font-size:13px}
.ps_compact ol.flow+p{margin-top:20px}
.ps_compact .blk-in>h3{margin-top:40px}
@media (min-width:768px){.ps_compact ol.flow{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* §110 の続き：SP で最後の1文字が折れる（「以上」「口頭」）→数字を 16px、補足の行（small）は 12px。上下の間隔は §73 の gap（後続の節の指定）に負けていたため詳細度を上げて 12px に */
.page-body .ps_compact ol.flow{row-gap:12px!important;column-gap:12px!important}
.ps_compact .flow-d{font-size:16px}
.ps_compact .flow-d small{display:block;font-size:12px;letter-spacing:0;color:var(--ink-sub)}
@media (min-width:768px){.ps_compact .flow-d{font-size:18px}.ps_compact .flow-d small{font-size:13px}}
.page-body .ps_compact ol.flow>li{margin:0}   /* 箇条書き共通の上下 10px が効いて、マスの間隔が 12px＋20px になっていた */

/* §111 医師紹介「形成外科の専門医とは」SP のステップを逆コの字の流れに（2026-10-14 おその氏指示）。
   並び＝ 1 → 2（上段・右へ）／ 2 ↓ 3（右列・下へ）／ 4 ← 3（下段・左へ）。矢印は §73 と同じ金の山形（12px の辺を 45° 回転）。
   矢印を置くため上下・左右の間隔を 28px に。STEP の番号は明朝の飾り数字（高さが不ぞろい）が読みにくい＝本文のゴシック・数字の高さをそろえる（PC も同じ） */
.ps_compact .flow-no{font-family:var(--font-body);font-size:12px;font-weight:500;letter-spacing:.14em;font-variant-numeric:lining-nums tabular-nums}
@media (max-width:767px){
  .page-body .ps_compact ol.flow{row-gap:28px!important;column-gap:28px!important}
  .ps_compact .flow li:nth-child(3){grid-column:2;grid-row:2}
  .ps_compact .flow li:nth-child(4){grid-column:1;grid-row:2}
  .ps_compact .flow li:nth-child(-n+3)::after{display:block;content:"";position:absolute;width:10px;height:10px;border:0;border-top:1.5px solid var(--gold);border-right:1.5px solid var(--gold);margin:0}
  .ps_compact .flow li:nth-child(1)::after{left:auto;right:-20px;top:50%;bottom:auto;margin-top:-5px;transform:rotate(45deg)}     /* → */
  .ps_compact .flow li:nth-child(2)::after{left:50%;top:auto;bottom:-20px;margin-left:-5px;transform:rotate(135deg)}            /* ↓ */
  .ps_compact .flow li:nth-child(3)::after{left:-20px;right:auto;top:50%;bottom:auto;margin-top:-5px;transform:rotate(-135deg)}  /* ← */
}

/* §112 ページ内の別の節へ誘導するボックス（原稿「!jump 文言｜#節ID」・2026-10-14 おその氏指示：医師紹介の本文「形成外科専門医として…」の下に「形成外科医とは？」→ 節 #plastic）。
   罫線なし＝淡い面＋金の下向き矢印。押せる大きさ（高さ 52px 以上・UI方針 §1 タップ 44px 以上） */
.jump-box{margin:4px 0 28px}
.jump-box a{display:inline-flex;align-items:center;gap:14px;min-height:52px;padding:12px 20px;background:var(--bg-sub);color:var(--accent);font-size:16px;font-weight:500;letter-spacing:.06em;text-decoration:none}
.blk:nth-of-type(even) .jump-box a{background:var(--bg)}
.jump-box .jb-arrow{width:14px;height:14px;flex:none;color:var(--gold)}
.jump-box a:hover .jb-t{text-decoration:underline;text-underline-offset:5px}
@media (max-width:767px){.jump-box a{display:flex;width:100%;box-sizing:border-box;justify-content:space-between}}   /* §112 の続き：SP は幅いっぱい・矢印は右端（2026-10-14 おその氏指摘） */

/* §113 医師紹介「学会・院外での活動」（2026-10-14 おその氏指示：登壇・実技演習の写真で院外の取り組みを見せる。写真は院長ブログから）。
   写真は 4:3。SP は1枚目（講義）を全幅、2・3枚目を2列で縦を詰める。PC は3列。キャプションは注記サイズ */
.act .photo-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px;max-width:var(--col);margin:24px auto 0}
.act .photo-grid li:first-child{grid-column:1/-1}
.act .photo-grid img{aspect-ratio:4/3;object-fit:cover}
.act .photo-grid .cap{font-size:13px;line-height:1.6}
@media (min-width:768px){.act .photo-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.act .photo-grid li:first-child{grid-column:auto}}
/* §113 の続き：PC は文章幅（720px）ではなく一覧の幅（1080px）に（§46 の続きと同じ打ち消し）。キャプションは複数行になり得るため左揃え（UI方針：複数行は左揃え） */
.page-body .act .blk-in>ul.photo-grid{max-width:var(--col)!important}
.act .photo-grid .cap{text-align:left}

/* §114 悩みカードの名前は2行の長さをそろえて折る（2026-10-15「目元（まぶた・目の下・クマ）」で PC の2行目が「クマ）」だけになったため。折る位置は生成器が括弧の前と「・」の後に限定） */
.card-t{text-wrap:balance}

/* §115 TOP の症例を2段に（2026-10-16 クライアント要望：上＝照射・レーザー、下＝注入・手術。すぐに症例を見て、そこから治療を選んでもらう意図）。
   段の見出し（.tc-group）は節の見出しより一段小さい明朝 500＋ネイビー。2段目は上の段との間を空けて、別の帯と分かるようにする。見出しは中央揃え（2026-10-16 おその氏指示） */
.is-top .has-cases .tc-group{max-width:var(--col);margin:0 auto 16px;font-family:var(--font-head);font-weight:500;font-size:18px;line-height:1.5;color:var(--accent);text-align:center}
.is-top .has-cases .tc-carousel+.tc-group{margin-top:56px}
@media (min-width:1024px){.is-top .has-cases .tc-group{font-size:20px}.is-top .has-cases .tc-carousel+.tc-group{margin-top:72px}}

/* §116 医師紹介にも資格タイル（2026-10-16 ペルソナ評価 #5。§83 の TOP の見た目をそのまま医師紹介のプロフィールへ） */
.has-doctor .no-photo .doc-lineup{list-style:none;padding:0;margin:20px 0 32px;display:grid;grid-template-columns:1fr 1fr;gap:8px;max-width:none}
.has-doctor .no-photo .doc-lineup li{margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:88px;padding:16px 14px;background:var(--bg-sub);text-align:center}
.has-doctor .no-photo .lu-b{font-family:var(--font-head);font-weight:500;font-size:17px;line-height:1.4;letter-spacing:.04em;color:var(--accent);word-break:keep-all;overflow-wrap:anywhere;text-align:center}
.has-doctor .no-photo .lu-n{margin-left:.2em;font-family:var(--font-mincho);font-weight:400;font-variant-numeric:lining-nums;font-size:1.7em;line-height:1;vertical-align:-.08em}
.has-doctor .no-photo .lu-u{font-size:.9em}
.has-doctor .no-photo .lu-s{font-size:13px;line-height:1.6;letter-spacing:.02em;color:var(--ink-sub);text-align:center}
@media (min-width:768px){.has-doctor .no-photo .doc-lineup{grid-template-columns:repeat(4,1fr)}.has-doctor .no-photo .lu-b{font-size:19px}}

/* §117 治療カードの「詳しく見る」をボタンの見た目に（2026-10-16 ペルソナ評価 #9：カード全体はもともとリンクだが、小さな文字だけでは押せると気づきにくい）。
   高さ44px（タップの目安・UI方針）・枠線ネイビー・右寄せのまま */
.opt-more{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;border:1px solid var(--accent);font-size:14px}
.opt:hover .opt-more,.opt:focus-visible .opt-more{background:var(--accent);color:#fff}

/* §118 予約方法のボタンに役割の説明を添えたとき（2026-10-16 ペルソナ評価 #10）。SP の2列＋横並び（§ 1169〜1172）では説明が細い列に押し込まれるため、
   説明があるリストは1列にして、ボタンの下に説明を置く。PC（768px〜）は3列のまま各ボタンの下に説明 */
.blk.buttons .button-list:has(.desc:not(:empty)){grid-template-columns:1fr;gap:20px}
.blk.buttons .button-list:has(.desc:not(:empty)) li{display:block;grid-column:auto}
.blk.buttons .button-list:has(.desc:not(:empty)) .desc{text-align:left;margin-top:8px}
@media (min-width:768px){.blk.buttons .button-list:has(.desc:not(:empty)){grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}}
/* ボタン下の段落が3つになったため、3つ目も同じ大きさ・色に（§ 831 は2つ目まで） */
.blk-in>.button-list+p+p+p{margin:12px 0 0;font-size:15px;line-height:2;color:var(--ink-sub);max-width:var(--measure)}
/* §118 の続き：説明文は通常の日本語の折り返しに（keep-all だと PC の3列で「。」が行頭に来るため） */
.blk.buttons .button-list:has(.desc:not(:empty)) .desc{word-break:normal;line-break:strict;text-wrap:pretty}


/* §120 はじめての方への「当日の流れ」を縦タイムラインに（2026-10-16 ペルソナ評価 #7：9枚のカードで約2.5画面あり全体像がつかめないため）。
   左に番号の丸（32px・ネイビー）と縦線、右に手順名（明朝500）＋説明（15px）。罫線ではなく縦線1本で順序だけを示す */
.tl{list-style:none;counter-reset:tl;margin:0 auto;padding:0;max-width:var(--measure)}
.tl li{counter-increment:tl;position:relative;margin:0;padding:0 0 22px 48px}
.tl li::before{content:counter(tl);position:absolute;left:0;top:0;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-family:var(--font-serif);font-size:15px;font-variant-numeric:lining-nums}
.tl li::after{content:"";position:absolute;left:15.5px;top:36px;bottom:4px;width:1px;background:var(--gold)}
.tl li:last-child{padding-bottom:0}
.tl li:last-child::after{display:none}
.tl .tl-t{display:block;font-family:var(--font-head);font-weight:500;font-size:17px;line-height:32px;color:var(--ink)}
.tl .tl-d{display:block;margin-top:2px;font-size:15px;line-height:1.8;color:var(--ink-sub)}

/* §121 症例一覧の絞り込みボタン（2026-10-16 ペルソナ評価 #8：悩みの区分で症例を探せるように）。
   横に折り返すチップ（高さ44px）・選択中はネイビー塗り。区分の名前は悩みページと同じ */
.tc-filter{display:flex;flex-wrap:wrap;gap:8px;max-width:var(--col);margin:0 auto 24px}
.tc-filter button{min-height:44px;padding:0 16px;border:1px solid var(--accent);background:var(--bg);color:var(--accent);font:inherit;font-size:14px;letter-spacing:.04em;cursor:pointer}
.tc-filter button.is-on{background:var(--accent);color:var(--accent-ink)}
.tc-card[hidden]{display:none!important}

/* §122 医師紹介の資格タイルを「目次」として使う（2026-10-16 おその氏指示：各タイルから該当の節へ飛ぶ・TOP とはデザインを変える。§116 の見た目を上書き）。
   TOP＝中央揃えの「肩書きの見本」／医師紹介＝左揃えの「ページ内の入口」。補足（金・13px）を上、大きい語を下、右下に下向きの矢印。
   押すとネイビー地に反転。タップ範囲はタイル全体（高さ96px以上） */
.has-doctor .no-photo .doc-lineup li{display:block;min-height:0;padding:0;background:none;text-align:left}
.has-doctor .no-photo .lu-a{position:relative;display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:4px;height:100%;min-height:96px;padding:14px 14px 30px;background:var(--bg-sub);color:inherit;text-decoration:none;transition:background .2s}
.has-doctor .no-photo .lu-a::after{content:"";position:absolute;right:14px;bottom:14px;width:7px;height:7px;border-right:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);transform:rotate(45deg)}
.has-doctor .no-photo .lu-a .lu-b{text-align:left;font-size:16px}
.has-doctor .no-photo .lu-a .lu-s{text-align:left;font-size:12px;letter-spacing:.06em;color:var(--gold)}
.has-doctor .no-photo .lu-a:hover,.has-doctor .no-photo .lu-a:focus-visible{background:var(--accent)}
.has-doctor .no-photo .lu-a:hover .lu-b,.has-doctor .no-photo .lu-a:focus-visible .lu-b,.has-doctor .no-photo .lu-a:hover .lu-s,.has-doctor .no-photo .lu-a:focus-visible .lu-s{color:#fff}
.has-doctor .no-photo .lu-a:hover::after,.has-doctor .no-photo .lu-a:focus-visible::after{border-color:#fff}
@media (min-width:768px){.has-doctor .no-photo .lu-a .lu-b{font-size:18px}}
/* 飛んだ先の見出しが固定ヘッダーに隠れないように */
#plastic,#career,#activities,#credentials,#kol{scroll-margin-top:72px}
/* §122 の続き：数字と単位（5院）を折らない。PC は写真の横の狭い列に入るため4列ではなく2列 */
.has-doctor .no-photo .lu-nu{white-space:nowrap}
@media (min-width:768px){.has-doctor .no-photo .doc-lineup{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* §122 の続き：タイル内の文字は中央揃え（2026-10-16 おその氏指示「センタリングにしないとバランスが悪い」）。矢印は下の中央へ */
.has-doctor .no-photo .lu-a{align-items:center;justify-content:center;text-align:center;padding:14px 12px 30px}
.has-doctor .no-photo .lu-a .lu-b,.has-doctor .no-photo .lu-a .lu-s{text-align:center}
.has-doctor .no-photo .lu-a::after{right:auto;left:50%;bottom:13px;margin-left:-3.5px}
/* §122 の続き：補足の文字を金から本文の補足色へ（2026-10-16 おその氏指示「ゴールドの文字が見づらい」。金 #c9a96e は背景 #f4f2ee に対しコントラスト比が約2で読みにくい）。13px に上げる。矢印は金のまま */
.has-doctor .no-photo .lu-a .lu-s{color:var(--ink-sub);font-size:13px;letter-spacing:.04em}
/* §122 の続き：タイルの内側に細い囲い線（2026-10-16 おその氏指示「シンプルすぎる。内側に細い囲い線など」）。
   面の内側 5px に金の細線（1px・やや透過）。押したとき（ネイビー地）は白の細線に */
.has-doctor .no-photo .lu-a::before{content:"";position:absolute;inset:5px;border:1px solid rgba(201,169,110,.6);pointer-events:none;transition:border-color .2s}
.has-doctor .no-photo .lu-a:hover::before,.has-doctor .no-photo .lu-a:focus-visible::before{border-color:rgba(255,255,255,.55)}
.has-doctor .no-photo .lu-a{padding-bottom:34px}
.has-doctor .no-photo .lu-a::after{bottom:16px}
/* 内側の囲い線を外枠に寄せる（2026-10-16 おその氏指示「隙間が広い」）：5px → 3px */
.has-doctor .no-photo .lu-a::before{inset:3px}

/* §123 医師紹介のプロフィール：SP は見出しと名前を中央揃え（2026-10-16 おその氏指示。中央に並ぶ資格タイルと軸をそろえる）。PC は写真の横の列なので左揃えのまま */
@media (max-width:767px){
  .profile .doctor-text h3{text-align:center}
  .profile .doctor-text>p:first-child{align-items:center;text-align:center}
}

/* §124 小見出しだけを罫線の枠で囲み中央揃え（2026-10-16 おその氏指示：医師紹介「KOLとしての主な活動」「当院の照射に生かしていること」。本文・リストは通常どおり左揃え）。
   枠＝金の細線1px・上下12px 左右20px の余白。見出しの下に余白をとって本文と分ける */
.blk-in>h3.hbox-h,h3.hbox-h{max-width:var(--measure);margin:40px auto 20px!important;padding:12px 20px;border:1px solid var(--gold);text-align:center;color:var(--accent)}
/* 公式KOLの小見出しの枠をネイビーに（2026-10-16 おその氏指示）。資格タイルの内側の線は金のまま（指示範囲外・おその氏「勝手に変えない」） */
h3.hbox-h,.blk-in>h3.hbox-h{border-color:var(--accent)}

/* §125 症例一覧の絞り込みボタンを格子に（2026-10-16 おその氏指示「左に偏っている。押しやすいボタンUIに」。§121 の見た目を置き換え）。
   同じ幅のボタンを SP 2列・PC 3列で並べ、左右の端をそろえる。高さ48px・文字は中央・件数を右に小さく。選択中はネイビー塗り */
.tc-filter{display:block;max-width:var(--col);margin:0 auto 28px}
.tc-filter .tf-h{margin:0 0 12px;text-align:center;font-family:var(--font-head);font-weight:500;font-size:16px;letter-spacing:.06em;color:var(--accent)}
.tc-filter .tf-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.tc-filter button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 8px;border:1px solid var(--accent);background:var(--bg);color:var(--accent);font:inherit;font-size:14px;letter-spacing:.02em;cursor:pointer}
.tc-filter .tf-n{font-family:var(--font-mincho);font-size:13px;font-variant-numeric:lining-nums;opacity:.7}
.tc-filter button.is-on{background:var(--accent);color:var(--accent-ink)}
.tc-filter button.is-on .tf-n{opacity:.85}
@media (min-width:768px){.tc-filter .tf-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}}
/* §125 の続き：ボタン感を出す（2026-10-16 おその氏指示「角アールなど、押せる感を」）。角丸24px（ピル形）・薄い影・押した瞬間に沈む。件数は外した */
.tc-filter button{border-radius:24px;box-shadow:0 2px 6px rgba(22,48,90,.12);transition:background .2s,color .2s,box-shadow .2s,transform .1s}
.tc-filter button:hover{box-shadow:0 4px 10px rgba(22,48,90,.18)}
.tc-filter button:active{transform:translateY(1px);box-shadow:0 1px 3px rgba(22,48,90,.15)}
.tc-filter button.is-on{box-shadow:none}

/* §126 押せるものは角丸に統一（2026-10-16 おその氏指示「押せる・クリックできるものは角アールに統一」・範囲＝ボタン類＋カード類）。
   ボタン類＝丸い形 24px（絞り込みボタン §125 と同じ）／カード類＝控えめな 8px（大きな面を丸くしすぎず、落ち着いた印象を保つ）。
   押せないもの（表・注記・見出しの枠・写真）と、画面下に固定の予約バー（.sp-cta＝画面幅いっぱいの帯）は角なしのまま。
   既存の各部品の指定（border-radius:0 など）より確実に効かせるため、角の形だけ !important で上書きする */
.button,.fv-cta,.h-cta,.opt-more,.tc-go,.ag-nav,.ag-tab,.jump a,.acc-more,.to-top,.mv-more,.tc-filter button{border-radius:24px!important}
.card,.opt,.tc-card,.tc-card>a,.lu-a,.link-panel,.sns-card,.mega-card,.gl-item,.gl-item>summary,.mv-item{border-radius:8px!important}
.card,.opt,.tc-card,.link-panel,.sns-card,.mega-card,.gl-item{overflow:hidden}   /* カード内の写真の角も丸く切る */
.has-doctor .no-photo .lu-a::before{border-radius:6px}   /* 資格タイルの内側の細線もカードの角に沿わせる（線の色は変えない） */
/* ページ内リンクは隙間なく並んだ格子のため、角丸にすると角が欠けて見える → 項目の間に隙間をあける */
.jump{gap:6px!important;border:0!important;background:none!important}
/* §126 の続き：ページ冒頭のページ内リンク（§66 の画面幅いっぱいの帯）も角丸のボタンに合わせ、左右に本文と同じ余白をとって隙間をあけて並べる（帯の面・区切り線は外す） */
.page-body>.jump:first-child,.page-body>.jump:first-child.jump{padding:20px max(var(--gutter),calc((100vw - var(--col)) / 2)) 0!important;gap:8px!important;background:none!important;border-bottom:0!important}
.page-body>.jump:first-child a{min-height:52px}
@media (min-width:768px){.page-body>.jump:first-child a{min-height:56px}}
/* §126 の続き：TOP の FV 直下のページ内移動（.top-jump）も同じく、余白をとって隙間をあけた角丸ボタンに */
.top-jump .jump,.is-top .top-jump .jump{width:auto!important;max-width:var(--col)!important;margin:0 auto!important;padding:20px var(--gutter) 0!important;gap:8px!important;background:none!important;border:0!important}
.top-jump .jump li{margin:0}
.top-jump .jump,.is-top .top-jump .jump{padding-bottom:24px!important}
/* §126 の続き：ボタン類は高さに関係なく両端を半円に（2026-10-16 おその氏指示「中途半端。やるならちゃんと半円に」。24px 固定では高さ 56px 前後のボタンで半円にならなかった） */
.button,.fv-cta,.h-cta,.opt-more,.tc-go,.ag-nav,.ag-tab,.jump a,.acc-more,.to-top,.mv-more,.tc-filter button{border-radius:999px!important}


/* §128 悩みページ「男性の◯◯の特徴」（#c2m）の小見出しを、医師紹介と同じ囲み（§124：ネイビーの細線・中央揃え）に（2026-10-16 おその氏指示：肌の傾向／治療の考え方／生活との両立） */
#c2m .blk-in>h3{max-width:var(--measure);margin:40px auto 20px!important;padding:12px 20px;border:1px solid var(--accent);text-align:center;color:var(--accent)}
#c2m .blk-in>h3:first-of-type{margin-top:8px!important}
/* §117 の続き：SP は「詳しく見る」をカードの横幅いっぱいに（2026-10-16 おその氏指示。片手で押しやすく）。PC（768px〜）は右寄せのまま */
@media (max-width:767px){.opt-more{align-self:stretch;width:100%;min-height:48px}}

/* §129 FV動画（制作途中のアタリ・2026-10-16）を SP のみに。1024px 以上は差し替え枠（.fv-pc）を出す */
.fv .fv-pc{display:none}
@media (min-width:1024px){.fv .fv-sp{display:none}.fv .fv-pc{display:grid}}
/* §129 の続き：SP の FV 動画は切らずに全体を見せる（2026-10-16 おその氏指示「左右が切れている」）。
   画面が動画（9:16）より縦長のため cover だと左右が切れ、動画内の文字が端にかかる → contain にして、余った上下は FV の濃い背景で埋める */
.fv .fv-sp{object-fit:contain;background:var(--brand-dark)}
/* 余白を濃い色にするとヘッダーの濃い文字が読めなくなるため、サイトの地に近い明るい色に */
.fv:has(.fv-sp){background:var(--bg-sub)}
.fv .fv-sp{background:var(--bg-sub)}
/* 余白を出さない形に変更：SP で動画がある FV は、ヘッダーの下から動画と同じ比率（9:16）の高さに。動画は切れず、上下の余白も出ない */
@media (max-width:1023px){.fv:has(.fv-sp){height:auto;aspect-ratio:9/16;margin-top:0}}
/* §129 の続き：SP で FV に動画がある場合、FV の予約ボタンと、ボタンを読ませるための影（scrim）は出さない。予約は画面下の固定バーで（2026-10-16 おその氏指示「追従の際に出してもいい」）。固定バーの出し方は _template.html */
@media (max-width:1023px){.fv:has(.fv-sp) .fv-overlay,.fv:has(.fv-sp) .fv-scrim{display:none}}
/* §129 の続き：SP で FV 動画をヘッダーの下から始める形にしたため、ヘッダーは FV に重ならない。
   FV 表示中の「透過・影なし」（over-fv）をやめ、他のページと同じ白い背景＋影にする（2026-10-16 おその氏指摘「ヘッダーの白い部分が文字の直下で切れて見える」） */
@media (max-width:1023px){
  body:has(.fv-sp) .site-header.over-fv{background:rgba(255,255,255,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 1px 24px rgba(0,0,0,.06)}
}

/* §130 TOP 症例の段の見出しを「まとまりの始まり」と分かる形に（2026-10-16 おその氏指示「処理が雑・見出しの役割が分かる処理を」）。
   上に金の英字（ほかの節の英字あしらいと同じ）、和文はネイビーの細い枠で囲む（医師紹介・悩みページの小見出し §124／§128 と同じ約束）。枠は文字幅に合わせる */
.is-top .has-cases .tc-group{display:flex;flex-direction:column;align-items:center;gap:8px}
.is-top .has-cases .tc-group-en{font-family:var(--font-serif);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.is-top .has-cases .tc-group-jp{display:inline-block;padding:10px 28px;border:1px solid var(--accent);color:var(--accent)}
/* §130 の続き：英字は外した（2026-10-16 おその氏指示「英字不要」）。下線も試したが「やはり囲み罫線がいい」で枠に戻した */
/* §130 の続き：SP は段見出しの枠を画面幅（本文の幅）いっぱいに（2026-10-16 おその氏指示）。PC は文字幅のまま */
@media (max-width:767px){.is-top .has-cases .tc-group{align-items:stretch}.is-top .has-cases .tc-group-jp{display:block;text-align:center}}
/* §131 症例詳細の写真が1枚だけのときは中央に置く（2026-10-19 おその氏指示）。
   PC は2列固定（2026-10-13 の指定）のため1枚だと左の列に寄っていた。幅は2枚のときの1枚分のまま */
@media (min-width:768px){body:not(.is-top) .blk.gallery .photo-grid:has(img[src*="img/case/"]) > li:only-child{grid-column:1 / -1;justify-self:center;width:calc(50% - 16px)}}

/* §132 はじめての方への「当日の流れ」の項目に院内写真（2026-10-19 おその氏指示・ご来院＝個室／身支度＝パウダールーム）。
   説明文の下に置く。押せないものなので角なし（10/16 の約束）。幅は SP で本文幅いっぱい・PC は 360px まで */
.tl .tl-img{display:block;width:100%;max-width:360px;height:auto;aspect-ratio:3/2;object-fit:cover;margin-top:12px;border-radius:0;background:var(--bg-sub)}

/* §133 TOP「当院のご案内」の院内写真（5枚・2026-10-19 おその氏：エントランスの写真を外して5枚）。
   3列のとき下の段の2枚を中央に寄せる＝6列にして1枚2列分、下の段の1枚目を2列目から始める */
@media (min-width:768px){
  .photo-grid:has(img[src*="img/clinic/clinic-"]){grid-template-columns:repeat(6,1fr)}
  .photo-grid:has(img[src*="img/clinic/clinic-"]) > li{grid-column:span 2}
  .photo-grid:has(img[src*="img/clinic/clinic-"]) > li:nth-child(3n+1):nth-last-child(2){grid-column:2 / span 2}
}

/* §134 挿絵の並び（§70）が2枚・1枚のとき（2026-10-19 悩みページの挿絵）。PC で3列のまま右が空かないよう、
   2枚＝2列（幅 720px＝文章幅）・1枚＝1列（幅 480px）で中央に。SP は §70 のまま（1列・絵＋名称の横並び） */
@media (min-width:768px){
  .blk-in>ul.illust-grid:has(>li:nth-child(2):last-child),.page-body ul.illust-grid:has(>li:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr));max-width:720px!important}
  .blk-in>ul.illust-grid:has(>li:only-child),.page-body ul.illust-grid:has(>li:only-child){grid-template-columns:minmax(0,1fr);max-width:480px!important}
}

/* §135 パンくずの区切り「›」を前の項目の後ろに付ける（2026-10-19 UI/UX評価：長い名前で折り返すと、2行目の先頭が「›」になっていた＝目元ページ） */
.breadcrumb li+li::before{content:none}
.breadcrumb li:not(:last-child)::after{content:"›";margin-left:10px;color:var(--ink-sub)}

/* ═══════════════════════════════════════════════════════════════
   §137 部品の基本設定：リンクボックス（.quick）
   使っているページ＝悩みページ7本（たるみ・シミ・しわ・ハリ・ほくろ・目元・毛穴）の「症状から見る治療の目安」。HTMLは build_site.py が出力。
   🔴 この部品の見た目は、この §137 だけで決める。デザインを変えるときは、下の「調整する値」を変える（全ページに反映）。
      ほかの節に .quick の指定を足さない（2026-10-20 に §119・§126・§127・§136 の4か所に散らばっていたものを、ここに集約した）。
   経緯：§119 早見表の新設（10/16 ペルソナ評価 #6）→ §127 SPで2段に（10/16 おその氏）→ 10/20 おその氏指示で
         見出しを帯に（中央・20px・帯の天地を詰める）、帯の色は紺→金→彩度を下げたグレージュ、項目は白い箱をやめて罫線で区切る
         （デザイン方針の「罫線なし」の例外。リンクは治療名の紺と「＞」で示す）。
   ═══════════════════════════════════════════════════════════════ */
.quick{
  /* ── 調整する値（ここだけ変える） ── */
  --lb-bg:var(--bg-sub);        /* 枠の面の色（ベージュ） */
  --lb-pad:20px;                /* 枠の左右・下の余白 */
  --lb-head-bg:#9a9284;         /* 見出しの帯の色。白文字とのコントラスト約3.1:1＝大きな文字の目安3:1ぎりぎり。これ以上明るくするなら文字色も変える */
  --lb-head-ink:#fff;           /* 見出しの文字色 */
  --lb-head-size:20px;          /* 見出しの文字の大きさ */
  --lb-head-pad:8px;            /* 見出しの帯の天地の余白 */
  --lb-head-align:center;       /* 見出しの揃え */
  --lb-line:var(--line);        /* 項目の間の罫線の色（#d9d5cc） */
  --lb-item-pad:14px;           /* 項目の上下の余白 */
  --lb-label-size:15px;         /* 症状の文字の大きさ */
  --lb-label-ink:var(--ink);    /* 症状の文字色 */
  --lb-link-size:17px;          /* 治療名（リンク）の文字の大きさ */
  --lb-link-ink:var(--accent);  /* 治療名（リンク）の文字色＝紺 */
  --lb-note-size:13px;          /* 下の注記の文字の大きさ */
  --lb-after:64px;              /* 枠の下の余白。0 だと直後のベージュの節と枠がつながって見える（10/28 おその氏指摘） */
  /* ── 組み方（通常は触らない） ── */
  max-width:var(--measure);margin:28px auto var(--lb-after);padding:0 var(--lb-pad) var(--lb-pad);background:var(--lb-bg);overflow:hidden
}
.quick .qk-h{margin:0 calc(var(--lb-pad)*-1) 4px;padding:var(--lb-head-pad) var(--lb-pad);background:var(--lb-head-bg);color:var(--lb-head-ink);text-align:var(--lb-head-align);font-family:var(--font-head);font-weight:500;font-size:var(--lb-head-size);line-height:1.5}
.quick ul{list-style:none;margin:0;padding:0;display:grid;gap:0}
.quick li{margin:0}
.quick a{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;min-height:56px;padding:var(--lb-item-pad) 4px;background:transparent;border-radius:0;color:var(--lb-label-ink);text-decoration:none}
.quick li+li a{border-top:1px solid var(--lb-line)}
.quick .qk-s{font-size:var(--lb-label-size);line-height:1.6;color:var(--lb-label-ink);word-break:keep-all;overflow-wrap:anywhere}   /* 語の途中で折らない＝生成器が「・」の後と括弧の前にだけ折れ目を入れる */
.quick .qk-t{flex:none;font-size:var(--lb-link-size);font-weight:500;line-height:1.4;color:var(--lb-link-ink);white-space:nowrap}
.quick .qk-t::after{content:"";display:inline-block;width:.42em;height:.42em;margin-left:.5em;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg);vertical-align:.14em}
.quick .qk-n{margin:8px 0 0;font-size:var(--lb-note-size);line-height:1.7;color:var(--ink-sub)}

/* ═══════════════════════════════════════════════════════════════
   §138 部品の基本設定：ページ内移動ボタン（.jump a）
   使っているページ＝28ページ（TOP・悩みページ・治療ページ ほか）。HTMLは build_site.py が出力。
   🔴 このボタンの「見た目」（面・線・文字・矢印・押したとき）は、この §138 だけで決める。デザインを変えるときは下の「調整する値」を変える。
      配置（列数・ボタンの高さ・余白）は従来どおり §15・§61・§66・§126 ほかが決める（今回は触っていない）。
   2026-10-20 おその氏指摘「ボタンとしての視認性が悪い。40代以降の老眼が始まる人には囲い込みが見えない。野暮ったくせず洗練をキープ」
   → ベージュの面（白地とのコントラスト約1.1:1＝囲いが見えない）をやめ、白の面＋紺の細線（白地で3.9:1・ベージュ地で3.7:1＝
     線などの部品の見分けの目安3:1以上）。文字の右に「↓」を付け、ページ内の移動と分かるようにした。押したときは紺のベタ。
   ※ 旧い見た目の指定が何層もあるため、セレクタに :not(#_) を付けて必ずこちらが勝つようにしている（#_ という id は存在しない）
   ═══════════════════════════════════════════════════════════════ */
.jump:not(#_){
  /* ── 調整する値（ここだけ変える） ── */
  --jb-bg:var(--bg);                    /* ボタンの面の色＝白 */
  --jb-line:rgba(22,48,90,.6);          /* 囲みの線の色＝紺の60%（白地で3.9:1）。薄くするなら .55（3.4:1）が下限 */
  --jb-line-w:1px;                      /* 囲みの線の太さ */
  --jb-ink:var(--accent);               /* 文字の色＝紺 */
  --jb-size:15px;                       /* 文字の大きさ（SP） */
  --jb-size-pc:16px;                    /* 文字の大きさ（PC・768px以上） */
  --jb-weight:500;                      /* 文字の太さ（太字700は使わない） */
  --jb-tracking:.04em;                  /* 字間（SP）。入りきらない幅では2行に分かれる（上下の長さを揃えて折る＝text-wrap:balance） */
  --jb-tracking-pc:.08em;               /* 字間（PC） */
  --jb-pad:12px;                        /* 左右の余白（SP） */
  --jb-pad-pc:16px;                     /* 左右の余白（PC） */
  --jb-arrow:var(--accent);             /* 「↓」の色＝文字と同じ紺（金は白地で約2.2:1と薄く、老眼の方に見えにくいため使わない） */
  --jb-hover-bg:var(--accent);          /* 押したとき・指を乗せたときの面 */
  --jb-hover-ink:var(--accent-ink);     /* 押したときの文字 */
}
.jump:not(#_) a{gap:8px;padding-left:var(--jb-pad);padding-right:var(--jb-pad);text-align:center;line-height:1.35;text-wrap:balance;background:var(--jb-bg);border:var(--jb-line-w) solid var(--jb-line);color:var(--jb-ink);font-size:var(--jb-size);font-weight:var(--jb-weight);letter-spacing:var(--jb-tracking);text-decoration:none;transition:background-color .2s,color .2s,border-color .2s}
.jump:not(#_) a::after{content:"";flex:none;width:.4em;height:.4em;margin-top:-.25em;border-right:1.5px solid var(--jb-arrow);border-bottom:1.5px solid var(--jb-arrow);transform:rotate(45deg);transition:border-color .2s}
.jump:not(#_) a:hover,.jump:not(#_) a:focus-visible{background:var(--jb-hover-bg);border-color:var(--jb-hover-bg);color:var(--jb-hover-ink)}
.jump:not(#_) a:hover::after,.jump:not(#_) a:focus-visible::after{border-color:currentColor}
@media (max-width:359px){.jump:not(#_) a{gap:6px;padding-left:8px;padding-right:8px;letter-spacing:0}}   /* 320px 幅（初代 iPhone SE 相当）で「よくあ／る質問」と語の途中で折れるのを防ぐ */
@media (min-width:768px){.jump:not(#_) a{gap:10px;padding-left:var(--jb-pad-pc);padding-right:var(--jb-pad-pc);font-size:var(--jb-size-pc);letter-spacing:var(--jb-tracking-pc)}}

/* ═══════════════════════════════════════════════════════════════
   §139 部品の基本設定：見出しの区切り線（英字あしらい .eyebrow と見出しの間の短い水平線）
   使っているページ＝英字あしらいの直後に見出しがある全箇所（48ページ・354か所。TOP の各節・下層の各節）。
   🔴 この線の見た目は、この §139 だけで決める。デザインを変えるときは下の「調整する値」を変える。
   2026-10-20 おその氏指示「英文飾りと見出しの間に短い水平ラインをセンタリングで。ディテールを上げる」。
   ※ 9/24 の「英字あしらいは線なし」の例外（線は英字に付けず、英字と見出しの間に独立して置く）。
   ※ 旧い h2::before を消す指定（§20・§33 ほか）に勝つよう、:not(#_) を付けている（#_ という id は存在しない）
   ═══════════════════════════════════════════════════════════════ */
:root{
  /* ── 調整する値（ここだけ変える） ── */
  --hl-w:24px;               /* 線の長さ */
  --hl-h:1px;                /* 線の太さ */
  --hl-color:var(--gold);    /* 線の色＝英字あしらいと同じ金 */
  --hl-gap-top:2px;          /* 英字との間（英字の下の余白 14px／PC 18px に足す分） */
  --hl-gap:16px;             /* 見出しとの間（SP） */
  --hl-gap-pc:20px;          /* 見出しとの間（PC） */
}
.eyebrow:not(#_)+:is(h2,h3)::before{content:"";display:block;width:var(--hl-w);height:var(--hl-h);margin:var(--hl-gap-top) auto var(--hl-gap);background:var(--hl-color)}
@media (min-width:768px){.eyebrow:not(#_)+:is(h2,h3)::before{margin-bottom:var(--hl-gap-pc)}}

/* ═══════════════════════════════════════════════════════════════
   §140 部品の基本設定：見出しアイコン（英字あしらいの上。英字と見出しの間は §139 の短い線）
   対象＝生成器 build_site.py の HEAD_ICON に載っている見出し（どんな症状か／〜の考え方（For Men）／主な治療法／治療の違い／
         料金の目安／当日の流れ／続け方の目安／用語の解説／よくある質問）。生成器が .blk-head・.sec-head に data-ic="名前" を付ける。
   絵＝site/assets/img/icon/<セット>/<名前>.png（ChatGPT 生成シートから docs/spec/scripts/make_heading_icons.py で切り出し）。
       形だけを使い、色は CSS で塗る（mask-image）。
   🔴 アイコンの見た目は、この §140 だけで決める。色・大きさは下の「調整する値」を変える。
      セット（線のタッチ）を替えるときは、下の30行の url のフォルダ名（engrave ／ pen など）を書き換える。
   2026-10-20 おその氏指示「高級ホテルやラウンジのパンフレットのような、見出しとアイコンの組み合わせ。アイコンは小さくアクセント」。
   いまのセット＝engrave（銅版画風・6案目。2026-10-20 おその氏決定・10/20 のうちに大きさを 36/40px に変更）。比較用に pen／bold／hatch／fill も残している
   ═══════════════════════════════════════════════════════════════ */
:root{
  /* ── 調整する値（ここだけ変える） ── */
  --ic-size:52px;            /* アイコンの大きさ（SP）。10/20 おその氏「今よりも大きく」28→36 →「もう少し大きく」44 →「もう少し大きく」52 */
  --ic-size-pc:56px;         /* アイコンの大きさ（PC）。32→40→48→56 */
  --ic-color:#a08c64;        /* アイコンの色（生成時に指定したシャンパンゴールド。英字の金 #c9a96e より少し濃い＝小さくても見えるように） */
  --ic-gap:12px;             /* 英字との間（SP） */
  --ic-gap-pc:14px;          /* 英字との間（PC） */
}
[data-ic="symptoms"]{--ic-img:url(/mens/assets/img/icon/engrave/symptoms.png)}
[data-ic="approach"]{--ic-img:url(/mens/assets/img/icon/engrave/approach.png)}
[data-ic="options"]{--ic-img:url(/mens/assets/img/icon/engrave/options.png)}
[data-ic="comparison"]{--ic-img:url(/mens/assets/img/icon/engrave/comparison.png)}
[data-ic="price"]{--ic-img:url(/mens/assets/img/icon/engrave/price.png)}
[data-ic="flow"]{--ic-img:url(/mens/assets/img/icon/engrave/flow.png)}
[data-ic="plan"]{--ic-img:url(/mens/assets/img/icon/engrave/plan.png)}
[data-ic="glossary"]{--ic-img:url(/mens/assets/img/icon/engrave/glossary.png)}
[data-ic="qa"]{--ic-img:url(/mens/assets/img/icon/engrave/qa.png)}   /* ↓ 2026-10-20 第2弾（12個） */
[data-ic="aftercare"]{--ic-img:url(/mens/assets/img/icon/engrave/aftercare.png)}
[data-ic="risks"]{--ic-img:url(/mens/assets/img/icon/engrave/risks.png)}
[data-ic="caution"]{--ic-img:url(/mens/assets/img/icon/engrave/caution.png)}
[data-ic="notice"]{--ic-img:url(/mens/assets/img/icon/engrave/notice.png)}
[data-ic="photos"]{--ic-img:url(/mens/assets/img/icon/engrave/photos.png)}
[data-ic="case"]{--ic-img:url(/mens/assets/img/icon/engrave/case.png)}
[data-ic="related"]{--ic-img:url(/mens/assets/img/icon/engrave/related.png)}
[data-ic="movie"]{--ic-img:url(/mens/assets/img/icon/engrave/movie.png)}
[data-ic="clinic"]{--ic-img:url(/mens/assets/img/icon/engrave/clinic.png)}
[data-ic="reservation"]{--ic-img:url(/mens/assets/img/icon/engrave/reservation.png)}
[data-ic="doctor"]{--ic-img:url(/mens/assets/img/icon/engrave/doctor.png)}
[data-ic="visit"]{--ic-img:url(/mens/assets/img/icon/engrave/visit.png)}   /* ↓ 第3弾（医師紹介） */
[data-ic="specialist"]{--ic-img:url(/mens/assets/img/icon/engrave/specialist.png)}
[data-ic="activities"]{--ic-img:url(/mens/assets/img/icon/engrave/activities.png)}
[data-ic="career"]{--ic-img:url(/mens/assets/img/icon/engrave/career.png)}
[data-ic="credentials"]{--ic-img:url(/mens/assets/img/icon/engrave/credentials.png)}
[data-ic="kol"]{--ic-img:url(/mens/assets/img/icon/engrave/kol.png)}   /* ↓ 第5弾（英字ごとに絵をそろえる・10/20） */
[data-ic="time"]{--ic-img:url(/mens/assets/img/icon/engrave/time.png)}
[data-ic="about"]{--ic-img:url(/mens/assets/img/icon/engrave/about.png)}
[data-ic="access"]{--ic-img:url(/mens/assets/img/icon/engrave/access.png)}
[data-ic="route"]{--ic-img:url(/mens/assets/img/icon/engrave/route.png)}
/* 置き場所＝見出し枠（.blk-head／.sec-head）の先頭＝英字の上。英字と見出しの間は §139 の短い線のまま（10/20 おその氏「アイコンは英文の上に」「センターラインを戻す」） */
[data-ic]:not(#_)::before{content:"";display:block;width:var(--ic-size);height:var(--ic-size);margin:0 auto var(--ic-gap);background:var(--ic-color);
  -webkit-mask:var(--ic-img) center/contain no-repeat;mask:var(--ic-img) center/contain no-repeat}
@media (min-width:768px){[data-ic]:not(#_)::before{width:var(--ic-size-pc);height:var(--ic-size-pc);margin-bottom:var(--ic-gap-pc)}}

/* §141 英字あしらいの番号（01・02 …）をなくす（2026-10-20 おその氏「英文の数字はなくしていい」）。TOP・下層の全ページ。
   番号は §20 の .eyebrow::before（counter）で出していた。戻すときはこの節を消す */
.eyebrow:not(#_)::before{content:none;display:none}

/* §142 本文中の単独のボタン（段落にボタンが1つだけ）は SP で本文の幅いっぱい（2026-10-20 おその氏「SPで1つしかボタンがなく、中途半端に半分」→ 幅いっぱいを選択）。
   対象は .blk-in 直下の <p> にボタンだけが入っている形（現在は「はじめての方」の「悩みから選ぶ」1か所）。PC は従来の大きさ */
@media (max-width:767px){.blk-in>p>a.button:only-child{display:flex;width:100%;box-sizing:border-box;justify-content:center;text-align:center}}

/* §143 医師紹介「専門医になるまで」のカード（.ps_compact）は、説明の数字（2年・4年以上・300例）を文字より少し大きく（2026-10-20 おその氏）。
   数字は render_flow が <span class="num"> で囲む。補足の小さい行（うち執刀80例以上）は大きくしない */
.ps_compact .flow-d .num{font-size:1.3em;line-height:1;letter-spacing:.02em;margin:0 .04em;font-variant-numeric:lining-nums}
.ps_compact .flow-d small .num{font-size:1em;margin:0}

/* §144 本文の強調に下線を足す（.em-ul）＋中の数字を少し大きく（2026-10-20 おその氏「最短でも6年の6を少し大きく・アンダーラインで強調」）。
   原稿に <strong class="em-ul">…<span class="num">6</span>…</strong> と書く。線は文字の下に少し離して、金の2pxの線 */
.em-ul:not(#_){text-decoration:none;padding:0;background:linear-gradient(var(--gold),var(--gold)) left bottom/100% 2px no-repeat}   /* 線は背景で引く＝中の数字（大きさ違い）で線が途切れない。:not(#_)＝.page-main p strong{background:none} に消されないため */
.em-ul .num{font-size:1.3em;line-height:1;margin:0 .04em;font-variant-numeric:lining-nums}

/* §145 症例ページ（case/*）の上部＝背景の写真なしの短い帯（2026-10-20 おその氏「背景の写真は不要・天地を短く。症例画像がすぐ確認できない」）。
   生成器が .ph-visual に is-plain を付け、写真と暗幕を出さない。面は淡いウォームグレー、文字は通常の黒。高さは文字の量で決まる */
.ph-visual.is-plain:not(#_){height:auto;min-height:0;background:var(--bg-sub)}
.ph-visual.is-plain:not(#_) .ph-head{padding-top:24px;padding-bottom:24px}
.ph-visual.is-plain:not(#_) h1{color:var(--ink);text-shadow:none;font-size:22px}
@media (min-width:768px){
  .ph-visual.is-plain:not(#_) .ph-head{padding-top:36px;padding-bottom:36px}
  .ph-visual.is-plain:not(#_) h1{font-size:30px}
}

/* §146 症例ページ「治療の内容」の項目名（施術名・施術部位・経過・費用（税込）・リスク・副作用）を濃いゴールドベージュに（2026-10-20 おその氏「パッと見出しとしてわかりやすい」）。
   見出しアイコンの色（#a08c64）は白地で 3.3:1 と文字には薄いため、同じ色味で濃くした #86714c（白地で 4.7:1＝WCAG AA）を使う */
:root{--spec-lbl:#86714c}
.spec .tw td:first-child:not(#_){color:var(--spec-lbl)}

/* §147 症例ページ（body.pg-case）の節の余白を詰める（2026-10-20 おその氏「症例ページの余白も詰めて」＝症例の写真をすぐ見せる）。
   共通は SP 96/104・PC 152/160px（§25）。症例ページは各節を約2/3に、最初の節（治療前後の写真）の上はさらに詰める */
.pg-case .page-body>.blk:not(#_){padding-top:64px;padding-bottom:72px}
.pg-case .page-body>.blk:first-child:not(#_){padding-top:40px}
@media (min-width:768px){
  .pg-case .page-body>.blk:not(#_){padding-top:96px;padding-bottom:104px}
  .pg-case .page-body>.blk:first-child:not(#_){padding-top:64px}
}

/* §148 悩みページの上部＝銅版画風の半顔イラスト（.ph-visual.is-illust・2026-10-20 おその氏「手描きのアナログイラスト・半顔・大人の図鑑」）。
   絵は明るい紙（#f4f2ee 前後）なので、暗幕を消して文字を黒に。顔は絵の右側にあるため、右に寄せて切り取る（左＝無地の紙に題名）。
   元画像は materials/illust/2026-10-20_hero/（1536×1024）→ site/assets/img/hero/concerns-<slug>.jpg（1600×1067） */
.ph-visual.is-illust:not(#_){background:#f3eee3}   /* 8枚の絵の左端の平均色（#f1eade〜#f5f0e7）の中間 */
.ph-visual.is-illust:not(#_)>img{object-fit:cover;object-position:right 42%}
.ph-visual.is-illust:not(#_) .ph-scrim{display:none}
.ph-visual.is-illust:not(#_) h1{color:var(--ink);text-shadow:none}
.ph-visual.is-illust:not(#_) .ph-en{color:#86714c}
/* 絵は帯いっぱいの背景（右寄せで切り取り）にし、題名は絵に重ねる。題名の下には紙の色の薄い層を敷いて読みやすくする
   （10/20 おその氏「イラストと見出し文字が重なってもよい。背景にうっすらレイヤーを重ねて視認性を確保」）。
   経緯：SP で右上に小さく置く案＝四角い境目が見える／題名を避けて絵を置く案（SP 下に避ける・PC 絵を縮めて右寄せ）＝「ちがう」 */
.ph-visual.is-illust:not(#_)>img{object-fit:cover;object-position:right 45%}
.ph-visual.is-illust:not(#_) .ph-scrim{display:block;position:absolute;inset:0;z-index:0;
  background:linear-gradient(90deg,rgba(243,238,227,.86) 0%,rgba(243,238,227,.72) 55%,rgba(243,238,227,.25) 100%)}
@media (min-width:768px){
  .ph-visual.is-illust:not(#_) .ph-scrim{background:linear-gradient(90deg,rgba(243,238,227,.9) 0%,rgba(243,238,227,.78) 38%,rgba(243,238,227,.35) 62%,rgba(243,238,227,0) 85%)}
}

/* §149「悩みから選ぶ」（body.pg-concerns）の冒頭の文（#-lead）の白い節の天地を詰める（2026-10-20 おその氏「天地が広すぎて下の情報が見えづらい」）。
   共通は SP 96/104・PC 152/160px。文が2〜3行だけなので SP 40/48・PC 64/72 にする */
.pg-concerns .page-body>#-lead.blk:not(#_){padding-top:40px;padding-bottom:48px}
@media (min-width:768px){.pg-concerns .page-body>#-lead.blk:not(#_){padding-top:64px;padding-bottom:72px}}

/* §150 治療ページの上部＝ページ内の機器の写真（.ph-visual.is-product・2026-10-20 おその氏「製品画像と共通。文字が乗るのでレイヤーを足して見やすく」）。
   対象＝assets/img/treatment/photo/web/<slug>.jpg がある治療（ポテンツァ・ブレッシング・ピーリング・メソナJ）。
   同日の修正（おその氏「もっと大きくトリミングしていい」「白すぎて上部の境界があいまい」）：
   写真は拡大して右寄せに切り取る／層は白ではなく淡いウォームグレー（本文の白と分かれる色）にする */
.ph-visual.is-product:not(#_){background:#e9e6e0}
.ph-visual.is-product:not(#_)>img{left:auto;right:0;width:100%;max-width:none;height:100%;object-fit:cover;object-position:right 38%}   /* 上部用の写真はロゴを落として機器の部分だけ（assets/img/hero/product-<slug>.jpg） */
.ph-visual.is-product:not(#_) .ph-scrim{display:block;position:absolute;inset:0;z-index:0;
  background:linear-gradient(90deg,rgba(233,229,222,.92) 0%,rgba(233,229,222,.82) 60%,rgba(233,229,222,.35) 100%)}
.ph-visual.is-product:not(#_) h1{color:var(--ink);text-shadow:none}
.ph-visual.is-product:not(#_) .ph-en{color:#86714c}
@media (min-width:768px){
  .ph-visual.is-product:not(#_)>img{width:62%;object-position:right 38%}
  .ph-visual.is-product.is-wide:not(#_)>img{object-position:center}   /* 横長に切り出した上部用の写真（compose_device_photos.py）は全体を見せる */
  .ph-visual.is-product:not(#_) .ph-scrim{background:linear-gradient(90deg,rgba(233,229,222,1) 0%,rgba(233,229,222,.97) 44%,rgba(233,229,222,.82) 56%,rgba(233,229,222,.3) 70%,rgba(233,229,222,0) 84%)}   /* 写真の中のロゴ（POTENZA 等）が題名の後ろに透けないよう、題名の範囲（〜56%）は濃く */
}

/* §151 SP の TOP：FV 動画が見えている間はヘッダー（男性専門サイトのロゴ・メニュー）を隠し、動画を画面の一番上から全面で見せる（2026-10-20 おその氏「FV上ではヘッダーの情報は見えない形がいい」）。
   FV を過ぎるとヘッダーが上から現れる（over-fv の付け外しは _template.html の IntersectionObserver）。§129 の「ヘッダーの下から始める」を置き換える */
@media (max-width:1023px){
  body:has(.fv-sp) .fv:has(.fv-sp){margin-top:calc(-1 * var(--hdr-h,65px))}
  body:has(.fv-sp) .site-header{transition:transform .35s ease,opacity .35s ease,background-color .3s}
  body:has(.fv-sp) .site-header.over-fv:not(.mega-open){transform:translateY(-100%);opacity:0;pointer-events:none}
}

/* §152 Q&A の「Q」と問いの文の天地をそろえる（2026-10-20 おその氏「Q と文字の天地があっていない」）。
   Q（22px・行の高さ 29.7px）が問い（18px・行の高さ 24.3px）より行が高く、上端そろえのため約3px下にずれていた → Q の行の高さを問いの1行と同じにする */
#qa h3:not(#_)::before{top:0;line-height:calc(24.3 / 22)}

/* §153 スクロールの演出（2026-10-20 おその氏「スクロールアクションにもう少し感動を」→ 提案 A＋B を採用）
   A＝見出しの順番の出現：アイコン → 英字 → 見出し（短い線が中央から左右に伸びる）を時間差で。対象＝.blk-head／.sec-head（全ページ）
   B＝写真がベールを外すように現れる：上から下へ覆いを外し、1.05倍→等倍に。対象＝上部の背景（.ph-visual）・治療の写真（.tphoto）・写真の並び（.photo-grid）・院長の写真
   クラス .hd-rv／.ph-rv は JS（_template.html）が付ける＝JS が動かない環境では何もしない。動きを減らす設定の端末は対象外（JS で付けない）
   1つの動きは 0.6〜0.9 秒。透明度・移動・切り抜きだけで作り、レイアウトは動かさない */
:root{--mo-ease:cubic-bezier(.2,.65,.2,1)}
.hd-rv[data-ic]::before,.hd-rv .eyebrow,.hd-rv>:is(h2,h3){opacity:0;transform:translateY(14px);transition:opacity .7s var(--mo-ease),transform .8s var(--mo-ease)}
.hd-rv .eyebrow{transition-delay:.12s}
.hd-rv>:is(h2,h3){transition-delay:.22s}
.hd-rv .eyebrow:not(#_)+:is(h2,h3)::before{transform:scaleX(0);transition:transform .7s var(--mo-ease) .42s}
.hd-rv.in[data-ic]::before,.hd-rv.in .eyebrow,.hd-rv.in>:is(h2,h3){opacity:1;transform:none}
.hd-rv.in .eyebrow:not(#_)+:is(h2,h3)::before{transform:scaleX(1)}
/* B（写真のベール）は同日おその氏「表現イマイチ」で取りやめ（JS も削除） */

/* §154 治療ページと医師紹介の上部＝古紙の背景（.ph-visual.is-paper・2026-10-21 おその氏「製品画像をうっすら入れるのは見た目が悪い。歴史ある辞書の紙のような古紙。
   銅版画のアイコン・イラストと質感を揃えて高級感を出す」「ドクターページのグレーの単調なグラデも同じ背景に」）。§150（機器の写真）と §53/§108 のグレーのグラデーションを置き換える。
   同日の改訂（おその氏「ここだけ紙の質感があると唐突で他と調和しない。サイト内で使っているこのカラーでいい」＝#f4f2ee）：紙の画像をやめ、面の色 --bg-sub（#f4f2ee）の無地にする。
   文字は §148 と同じく黒・英字は金 */
.ph-visual.is-paper:not(#_){background:var(--bg-sub)}
.ph-visual.is-paper:not(#_) .ph-scrim{display:none}
.ph-visual.is-paper:not(#_) h1{color:var(--ink);text-shadow:none}
.ph-visual.is-paper:not(#_) .ph-en{color:#86714c}

/* §155 数字の範囲を行の途中で折らない（2026-10-21 おその氏「読みやすさを重視して調整」＝SP で「2〜／3週間」と折れていた）。
   生成器 nobr_ranges() が本文の「数字〜数字＋単位」を .nw-r で囲む（金額は対象外） */
.nw-r{white-space:nowrap}

/* §156 フッター（2026-10-21 おその氏「情報が古い＝MENS → 男性専門サイトに」「ここだけブラックなのが唐突。カラーリングを検討」）。
   ロゴはヘッダーと同じ「Maison PUREJU／男性専門サイト」（明朝・小見出しの大きさ＝§ヘッダー 1311行と同じ）。
   色は面の色 --bg-sub（#f4f2ee）に黒の文字・金のあしらい。直前の予約の帯（.cta＝紺 --accent）と区切れ、サイト全体の明るい調子とそろう（紺にすると帯とつながるため不採用） */
.site-footer:not(#_){background:var(--bg-sub);color:var(--ink-sub)}
.site-footer:not(#_) a{color:var(--ink)}
.site-footer:not(#_) .f-logo{color:var(--ink)}
.site-footer:not(#_) .f-logo small{font-family:var(--font-head);font-size:15px;letter-spacing:.2em}
@media (min-width:768px){.site-footer:not(#_) .f-logo small{font-size:16px}}
.site-footer:not(#_) .f-access,.site-footer:not(#_) .f-hours{color:var(--ink-sub)}
.site-footer:not(#_) .f-map{border-bottom-color:var(--gold)}
.site-footer:not(#_) .f-map:hover{border-color:var(--ink)}
.site-footer:not(#_) .f-bottom{border-top-color:var(--line);color:var(--ink-sub)}
.site-footer:not(#_) .f-bottom a{color:var(--ink)}
.site-footer:not(#_) .f-legal a{color:var(--ink-sub)}
.site-footer:not(#_) :is(.f-bottom,.f-legal) a:hover{color:var(--accent)}

/* §157 下層ページの予約の帯（.cta）にも TOP の「ご予約」と同じアイコンと短い線（2026-10-21 おその氏「アイコンがないのはわざと？」→ 付け漏れ・そろえる）。
   アイコン＝帯の英字（.cta-en）に data-ic="reservation"（§140 の ::before がそのまま効く）。短い線＝§139 の変数で見出し（.cta-h）の上に。英字の下の余白も見出し枠と同じ 14px／PC 18px */
.cta .cta-en:not(#_){margin-bottom:14px!important}
.cta .cta-h::before{content:"";display:block;width:var(--hl-w);height:var(--hl-h);margin:var(--hl-gap-top) auto var(--hl-gap);background:var(--hl-color)}
@media (min-width:768px){.cta .cta-en:not(#_){margin-bottom:18px!important}.cta .cta-h::before{margin-bottom:var(--hl-gap-pc)}}

/* §158 治療ページの症例（.t-cases）が少ないときは中央に寄せる（2026-10-21 治療ページに本物の症例を出したところ、1件の XERF などで左に寄り右が空いた。§131 の症例写真1枚＝中央と同じ考え方）。
   SP は1件のとき、PC（3件並ぶ幅）は2件以下のとき。カルーセルの動き（横スクロール）は件数が多いときだけ使われる */
.t-cases .tc-track:has(>li:only-child){justify-content:center}
@media (min-width:768px){.t-cases .tc-track:not(:has(>li:nth-child(3))){justify-content:center}}

/* §159 FV の読み込み中の見せ方「静かな幕開け」（2026-10-21 おその氏「電波が悪いと TOP の動画が白いまましばらくかかる」）。SP（動画を出す幅）だけ。
   層＝①.fv-stage＝地の色（--fv-bg＝ポスターの四辺の色・生成器が測る）と、中央の金の細い線（§139 の見出しの線と同じ金・太さ）が中央から左右へ伸びて消える、を繰り返す
   ②.fv-poster＝ポスター（届いたら 0.4秒で表示＝線が消え、最初のコピーが浮かび上がる）③video.fv-sp＝動画（再生が始まったら 0.8秒で切り替え）。
   クラス（.poster-in／.is-playing／.is-still）は _template.html の JS が .fv に付ける。灰色の箱・回転するマーク・ぼかし版（白地に文字のポスターでは汚れに見えた）は使わない */
.fv-stage{position:absolute;inset:0;overflow:hidden;background:var(--fv-bg,var(--bg-sub))}
.fv-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .4s ease}
.fv.poster-in .fv-poster{opacity:1}
.fv .fv-sp:not(#_){background:transparent;opacity:0;transition:opacity .8s ease}
.fv.is-playing .fv-sp:not(#_){opacity:1}
.fv-load{position:absolute;left:50%;top:50%;z-index:2;width:72px;height:var(--hl-h,1px);margin-left:-36px;background:var(--gold);transform:scaleX(0);animation:fv-load 1.8s cubic-bezier(.4,0,.2,1) infinite;transition:opacity .3s ease}
@keyframes fv-load{0%{transform:scaleX(0);opacity:0}25%{opacity:1}60%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
.fv.poster-in .fv-load,.fv.is-playing .fv-load,.fv.is-still .fv-load{opacity:0;animation:none}
@media (prefers-reduced-motion:reduce){.fv-load{display:none}.fv-poster,.fv .fv-sp:not(#_){transition:none}}
@media (min-width:1024px){.fv-sp-only{display:none}}

/* §160 画像のふわっと表示（2026-10-21 おその氏「表示までのアニメーション」→ 当方の提案「静かな幕開け」の②）。
   まだ読み込めていない画像に JS（_template.html）が .fade-in を付け、読み込めたら .is-in で 0.4秒かけて表示する。待っている間は、画像の枠（.card-media・.tc-photo 等）の面の色（--bg-sub）が見える。
   灰色の箱や回転するマークは使わない。動きを減らす設定の端末は切り替えだけ */
img.fade-in{opacity:0;transition:opacity .4s ease}
img.fade-in.is-in{opacity:1}
@media (prefers-reduced-motion:reduce){img.fade-in{transition:none}}

/* §161 料金一覧（body.pg-price）の表に列の境界線（2026-10-21 おその氏「区分・内容・料金の項目に境界線がなく分かりづらい」）。治療ページの料金表（#b5・§98 の続き）と同じ線 */
.pg-price .tw th+th,.pg-price .tw td+td{border-left:1px solid var(--line)}

/* §162 比較表（.tw.cmp）の SP で、治療名（td::before）が1行と2行に分かれると、下の線と説明の始まりがそろわない（2026-10-21 おその氏「カスタマイズレーザーと IPL の天地をそろえたい」）。
   横に並んだマスの治療名の高さを _template.html の JS が実測し、高いほうを --cmp-h に入れる。治療名はその高さの中で上下中央。
   🔴「何文字なら2行」と決め打ちする方法は同日に試して不採用（375px で見た目2行・計算上3行になるなど、端末とフォントで変わる） */
@media (max-width:1023px){
  .tw.cmp td[data-label]::before{display:flex;align-items:center;justify-content:center;min-height:var(--cmp-h,0px)}
}

/* §163 比較表で、全部の治療が同じ値の行は1マスにまとめる（2026-10-21 おその氏「同じなら1つにまとめたい」）。生成器が td.cmp-same（colspan・見出し「すべて共通」）にする。
   PC＝表の横いっぱいの1マス・中央揃え／SP＝2×2 の代わりに横いっぱいの1マス */
.tw.cmp td.cmp-same{text-align:center}
@media (max-width:1023px){.tw.cmp td.cmp-same{grid-column:1/-1}}

/* §164 AI で作成した写真の注記「※写真はイメージです」（2026-10-21 おその氏決定）。治療写真（.intro .hero）と診察写真（.bk-fig）の右下に小さく重ねる。
   写真の下に置くと、PC で写真を節の端まで伸ばす診察写真の配置（§97 の続き）が崩れるため重ねる */
.intro .hero,.bk-fig{position:relative}
.img-note{position:absolute;right:8px;bottom:8px;z-index:1;padding:2px 8px;border-radius:999px;background:rgba(0,0,0,.45);color:#fff;font-size:11px;line-height:1.6;letter-spacing:.04em;pointer-events:none}

/* §165 キャンペーン（2026-10-23 確認シート②-2 OK・男性版バナー）。TOP の「キャンペーン」節（ul.cp-list）だけ（治療ページには出さない＝2026-10-23 おその氏）。
   バナーは 16:9 の画像。SP は1枚ずつ横にめくる（次の1枚を少し見せる）、PC は3枚を横に並べる。画像の中の文字が主役なので枠や影は付けない */
.cp-list{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.cp-list li{margin:0;padding:0}
.cp-list li::before{content:none}
.cp-list img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:4px}
.cp-list a{display:block;transition:opacity .2s}
.cp-list a:hover{opacity:.85}
@media (max-width:767px){
  .sec .cp-list{grid-auto-flow:column;grid-auto-columns:86%;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:8px;scrollbar-width:none}
  .sec .cp-list::-webkit-scrollbar{display:none}
  .sec .cp-list li{scroll-snap-align:start}
}
@media (min-width:768px){ .sec .cp-list{grid-template-columns:repeat(3,1fr);gap:24px} }
.cp-note{margin:8px 0 0;font-size:12px;color:var(--ink-sub)}

/* §166 PC版の FV 動画（2026-10-27 横長 1920×1080 を受領）。1024px 以上で .fv-pc を動画にする。§129・§151・§159 の SP の見せ方を PC にもそろえる。
   ①動画は切らずに全体を見せる＝ヘッダーの下から 16:9 の高さ（動画の左端・上端に文字があり、cover だと画面比によって切れる）
   ②ヘッダーは白い背景＋影（動画に白い場面と黒い場面があり、透過だとどちらかでロゴ・メニューが読めない）
   ③動画の上に予約ボタンと影（scrim）を重ねない＝白い場面で白いボタンが読めず、影は白地を濁らせる。予約はヘッダーの「予約・相談」から（SP と同じ扱い）
   ④読み込み中は SP と同じ「静かな幕開け」（地の色＝PC の静止画の四辺の色 --fv-bg-pc） */
@media (min-width:1024px){
  .fv:has(video.fv-pc){height:auto;aspect-ratio:16/9;margin-top:0;background:var(--bg-sub)}
  .fv video.fv-pc{display:block;object-fit:contain;background:transparent}
  .fv:has(video.fv-pc) .fv-stage{background:var(--fv-bg-pc,var(--fv-bg,var(--bg-sub)))}
  .fv:has(video.fv-pc) .fv-overlay,.fv:has(video.fv-pc) .fv-scrim{display:none}
  body:has(video.fv-pc) .site-header.over-fv{background:rgba(255,255,255,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 1px 24px rgba(0,0,0,.06)}
}
.fv .fv-pc:is(video):not(#_){opacity:0;transition:opacity .8s ease}
.fv.is-playing .fv-pc:is(video):not(#_){opacity:1}
@media (prefers-reduced-motion:reduce){.fv .fv-pc:is(video):not(#_){transition:none}}

/* §167 FV の上のヘッダー＝帯（白い背景・影）を消し、ロゴ・メニュー・ボタンだけを出す。SP・PC 共通（2026-10-27 おその氏指示）。
   §151 の「SP は FV の上でヘッダーを隠す」と §166② の「PC は白い帯」を置き換える。動画を過ぎたら従来の白い帯（over-fv の付け外しは _template.html）
   動画に白い場面と黒い場面がある → 文字と線を白にして mix-blend-mode:difference＝白地では黒、黒地では白に見える（どちらの場面でも読める）
   PC も動画を画面の一番上から＝ヘッダーを動画に重ねる（§166① の「ヘッダーの下から」を置き換え。動画の上端 約10% に文字はない） */
body:has(video.fv-media) .site-header.over-fv:not(.mega-open):not(#_){transform:none;opacity:1;pointer-events:auto;background:transparent;border-bottom-color:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;mix-blend-mode:difference}
body:has(video.fv-media) .site-header.over-fv:not(.mega-open) :is(.site-logo,.site-logo small,.gnav>a,.mega-trigger):not(#_){color:#fff}
body:has(video.fv-media) .site-header.over-fv:not(.mega-open) .hamburger span:not(#_){background:#fff}
body:has(video.fv-media) .site-header.over-fv:not(.mega-open) .gnav .h-cta:not(#_){border-color:#fff;background:transparent;color:#fff}
@media (min-width:1024px){
  body:has(video.fv-pc) .fv:has(video.fv-pc):not(#_){margin-top:calc(-1 * var(--hdr-h,80px))}
}

/* §176 症例ページなどの「関連する治療」（.link-list .link-panel）の調整（2026-10-29 おその氏指摘）
   ①箱が見えない：節は白とグレーが交互（§512 .page-body>.blk:nth-of-type(even)＝グレー）。カードは白固定だったため白の節で背景に溶けた
     → 白の節（奇数）ではカードをグレー（--bg-sub）にする。TOP は §1778 で別に指定済み
   ②幅がそろわない：§1142 で li を flex にしたため、カードが中身の幅に縮んでいた（TOP・はじめての方へは個別に flex:1 を指定済み）
     → どのページでもカードを li の幅いっぱいに
   ③見出しが語の途中で折れる（「…ク／マ）」）→ 語の途中では折らず、「・」などで折る（はじめての方へ §1913 と同じ指定） */
.page-body>.blk:nth-of-type(odd) .link-panel{background:var(--bg-sub)}
.link-list li>.link-panel{flex:1;min-width:0}
.lp-t{word-break:keep-all;overflow-wrap:anywhere}
/* §176 の続き ④PC で幅がそろわない：一覧（ul）に文章の幅（.blk-in>ul＝40em・左寄せ）がかかり、3列の細いカードが左に寄っていた
   → 症例ページは文章と同じ 720px の中央に置き、カードの枚数に合わせて横いっぱいに並べる（1枚なら720px・2枚なら2列） */
@media (min-width:768px){
  .pg-case .blk-in>.link-list{max-width:720px;margin-left:auto;margin-right:auto;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
}
/* §176 の続き ⑤左の空きが右より広い（2026-10-29 おその氏指摘）：本文の箇条書き用 .page-body ul{padding-left:1.3em} が一覧にもかかり、
   .link-list{padding:0} より強かった（TOP・はじめての方へは個別に打ち消し済み）→ どのページでも一覧の字下げを 0 に */
.page-body .link-list{padding:0}

/* §177 FV：静止画が出たあと動画が届くまでの「進み具合の線」（2026-10-29 おその氏「初回アクセスで動画がしばらく静止画のまま＝スルーされる」）。
   §159 の中央の線は静止画が届いた時点で消えるため、肝心の「動画を待つ時間」に何も動いていなかった → FV の下端に金の細い線を出し、読み込めた量に合わせて左から伸ばす。
   伸び方＝最初の6秒分が届いたら満ちる（再生を始められる目安。JS が --fv-p に 0〜1 を入れる）。再生が始まったら（.is-playing）・自動再生できない端末（.is-still）ではすぐ消す。
   全画面のローディング・回転するマーク・灰色の箱は使わない（§159 と同じ方針） */
.fv-prog{position:absolute;left:0;right:0;bottom:0;z-index:3;height:2px;opacity:0;pointer-events:none;transition:opacity .4s ease}
.fv-prog i{display:block;height:100%;background:var(--gold);transform-origin:left center;transform:scaleX(var(--fv-p,.04));transition:transform .5s ease}
.fv.is-waiting.poster-in:not(.is-playing):not(.is-still) .fv-prog{opacity:1}
@media (prefers-reduced-motion:reduce){.fv-prog i{transition:none}}
/* §177 の続き：遅い回線で再生の途中に止まったとき（JS が .is-buffering）も線を出す。再生が戻ったら消える */
.fv.is-buffering .fv-prog{opacity:1}