/*
Theme Name: AZ Beauty Clinic
Theme URI: https://az-beauty-clinic.com/
Author: AZ BEAUTY CLINIC
Description: AZ BEAUTY CLINIC 公式サイト用オリジナルテーマ。オンラインショップとデザイントークンを共有します。
Version: 0.92.0
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: azbc
*/

/* ============================================================
   1. デザイントークン（/shop/ と共通）
   ============================================================ */
:root{
  --gold:#bf9c47;
  --gold-light:#c8a064;
  --gold-deep:#b69057;
  --cream:#f8f5f0;
  --beige:#f6efe5;
  --line:#e3d0b0;
  --ink:#3f3f3f;
  --ink-mute:#777;
  --mint:#6ac1b7;
  --white:#fff;
  --alert:#b4544a;

  --wrap:1180px;
  --gutter:24px;
  --rail:90px;

  --font-mincho:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --font-display:"Marcellus","Optima","Palatino Linotype",serif;
  --font-round:"Zen Maru Gothic","Hiragino Maru Gothic ProN",sans-serif;
  --font-body:游ゴシック体,"Yu Gothic",YuGothic,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN",メイリオ,Meiryo,sans-serif;
  --font-price:"Helvetica Neue",Helvetica,Arial,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN",游ゴシック体,"Yu Gothic",sans-serif;

  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ============================================================
   2. ベース
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:15px;
  line-height:2;
  letter-spacing:.06em;
}
img{max-width:100%;height:auto;vertical-align:bottom}
a{color:var(--gold-deep);text-decoration:none;transition:opacity .3s var(--ease)}
a:hover{opacity:.7}
a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:var(--white);padding:8px 14px;z-index:999}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto !important}
}
html{scroll-behavior:smooth}

/* ============================================================
   3. 見出しの型（英字ディスプレイ＋金色の和文ラベル）
   ============================================================ */
.heading{text-align:center;margin-bottom:36px}
.heading__en{
  display:block;
  font-family:var(--font-display);
  font-size:clamp(26px,3.2vw,38px);
  font-weight:400;
  letter-spacing:.12em;
  line-height:1.2;
  color:var(--ink);
}
.heading__ja{
  display:block;
  margin-top:8px;
  font-family:var(--font-round);
  font-size:12.5px;
  letter-spacing:.24em;
  color:var(--gold);
}

/* ============================================================
   4-0. ヘッダー上の告知帯
   ============================================================ */
.topbar{
  display:flex;align-items:center;justify-content:center;gap:10px;
  min-height:38px;padding:8px 24px;
  background:var(--gold);color:var(--white);
  font-family:var(--font-round);font-size:13px;letter-spacing:.06em;
  line-height:1.6;text-align:center;
}
a.topbar{transition:background .3s var(--ease)}
a.topbar:hover{background:var(--gold-deep);opacity:1;color:var(--white)}
.topbar__arrow{
  width:6px;height:6px;flex:none;
  border-top:1px solid currentColor;border-right:1px solid currentColor;
  transform:rotate(45deg);
}
@media (max-width:700px){
  .topbar{font-size:12px;padding:7px 16px;min-height:34px}
}

/* ============================================================
   4. ヘッダー
   ============================================================ */
.hdr{
  position:sticky;top:0;z-index:80;
  background:var(--cream);
  border-bottom:1px solid var(--line);
}
/* ヘッダーだけは画面幅いっぱいに使い、ロゴを左端に寄せる */
.hdr > .wrap{max-width:none;padding-inline:32px}

.hdr__top{
  display:flex;align-items:center;gap:24px;
  min-height:70px;
  padding-bottom:6px;
}
.hdr__logo{display:flex;align-items:center;gap:12px;margin-right:auto;flex:none}
.hdr__logoImg{
  width:auto;height:auto;
  max-width:216px;max-height:48px;
  display:block;
}
.hdr__logoSub{font-family:var(--font-display);font-size:12px;letter-spacing:.18em;color:var(--gold)}
.hdr__meta{text-align:right;line-height:1.5;flex:none}
.hdr__addr{font-size:11px;color:var(--ink-mute);letter-spacing:.04em}
.hdr__tel{font-family:var(--font-display);font-size:22px;color:var(--ink);letter-spacing:.04em;white-space:nowrap}
.hdr__tel small{font-size:12px;font-style:italic;margin-right:5px}


/* ナビは中央に置いて左右の重さを揃える */
.nav__list{
  display:flex;justify-content:center;align-items:flex-start;
  gap:22px;list-style:none;margin:0;padding:3px 0 10px;
}

/* スクロール時は大きさを変えず、影だけ付けて浮かせる */
.hdr{transition:box-shadow .3s var(--ease)}
.hdr.is-stuck{box-shadow:0 2px 12px rgba(63,63,63,.07)}

@media (max-width:1360px){
  .hdr__addr{display:none}
  .hdr__top{gap:20px}
}
@media (max-width:1100px){
  .hdr > .wrap{padding-inline:20px}
}
@media (max-width:900px){
  .hdr > .wrap{padding-inline:var(--gutter)}
}
@media (max-width:1240px){
  .hdr__logoImg{max-width:190px;max-height:44px}
  .hdr__tel{font-size:19px}
  .nav__list{gap:15px}
  .nav__ja{font-size:14px;letter-spacing:.04em}
  .nav__en{font-size:8.5px;letter-spacing:.08em}
}
@media (max-width:980px){
  .hdr__tel{font-size:17px}
}

.nav__link{display:block;text-align:center;color:var(--ink);padding-bottom:2px}
.nav__ja{display:block;font-family:var(--font-round);font-size:15px;letter-spacing:.08em;white-space:nowrap;line-height:1.4}
.nav__en{display:block;font-family:var(--font-display);font-size:9px;letter-spacing:.12em;color:var(--gold);margin-top:0;line-height:1.3}
.nav__link.is-active .nav__ja{color:var(--gold-deep)}
.nav__link.is-active{border-bottom:1px solid var(--gold)}

/* --- 治療から探す：メガメニュー --- */
.nav__item{position:relative}
.nav__toggle{display:none}

/* パネルは項目の真下ではなく、画面の中央に出す。
   ナビが中央寄せのため、項目の位置によって左右にずれてしまうので。 */
.mega{
  position:fixed;left:50%;
  transform:translateX(-50%) translateY(6px);
  width:min(1240px,calc(100vw - 40px));
  z-index:85;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s;
  /* ヘッダーとの隙間でマウスが外れないよう、上に透明な帯を作る */
  padding-top:18px;
}
.nav__item.has-mega:hover .mega,
.nav__item.has-mega:focus-within .mega{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
/* スクロール中は開かない（固定表示なので画面を覆い続けてしまう） */
body.mega-off .nav__item.has-mega:hover .mega,
body.mega-off .nav__item.has-mega:focus-within .mega{
  opacity:0;visibility:hidden;pointer-events:none;
}
body.mega-off .nav__item.has-mega::after{content:none}
/* ヘッダーの下端に密着させる */
.hdr{--mega-top:118px}
.mega{top:calc(var(--mega-top) - 18px)}

/* 項目からパネルへマウスが移動する間、判定を切らさない */
.nav__item.has-mega::after{
  content:"";position:absolute;left:-24px;right:-24px;top:100%;
  height:26px;
}
.mega__inner{
  background:var(--white);
  border:1px solid var(--line);
  box-shadow:0 10px 30px rgba(63,63,63,.10);
  padding:28px 30px 24px;
}
.mega__cols{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:0 22px;
}
.mega__cat{
  display:block;
  font-family:var(--font-round);font-size:13px;font-weight:500;
  letter-spacing:.1em;color:var(--gold);
  padding-bottom:9px;margin-bottom:9px;
  border-bottom:1px solid var(--line);
}
.mega__cat:hover{color:var(--gold-deep);opacity:1}
.mega__list{list-style:none;margin:0;padding:0}
.mega__list li{margin:0;border-bottom:1px solid var(--beige)}
.mega__list li:last-child{border-bottom:0}
.mega__list a{
  display:block;width:100%;
  padding:8px 0;
  font-size:12.5px;line-height:1.55;letter-spacing:0;
  color:var(--ink);
  word-break:auto-phrase;
}
.mega__list a:hover{color:var(--gold-deep);opacity:1}


.mega__all{margin:18px 0 0;text-align:center}
.mega__all a{
  font-family:var(--font-round);font-size:13px;letter-spacing:.1em;color:var(--gold-deep);
}
.mega__all a::after{content:" ›"}

@media (max-width:1320px){
  .mega__cols{gap:0 16px}
  .mega__list a{font-size:12px}
  .mega__inner{padding:24px 22px 20px}
}

/* オンラインショップは別サイト扱い。区切って、買い物カゴのしるしを付ける */
.nav__list li:has(.nav__link--shop){
  padding-left:26px;
  margin-left:6px;
  border-left:1px solid var(--line);
}
.nav__link--shop .nav__ja{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--gold-deep);
}
.nav__link--shop .nav__ja::before{
  content:"";
  width:14px;height:14px;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='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.7 13.4a2 2 0 0 0 2 1.6h9.7a2 2 0 0 0 2-1.6L23 6H6'/%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='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.7 13.4a2 2 0 0 0 2 1.6h9.7a2 2 0 0 0 2-1.6L23 6H6'/%3E%3C/svg%3E") center/contain no-repeat;
}

@media (max-width:1180px){
  .nav__list{gap:18px}
  .nav__ja{font-size:13px}
  .nav__list li:has(.nav__link--shop){padding-left:18px}
}

.hdr__burger{display:none;background:none;border:0;padding:8px;cursor:pointer}
.hdr__burger span{display:block;width:24px;height:1px;background:var(--ink);margin:6px 0}

@media (max-width:900px){
  .hdr__meta{display:none}
  .hdr__burger{display:block}
  .hdr__top{min-height:62px;gap:14px}
  .hdr__logoImg{max-width:190px;max-height:44px}

  /* ドロワー。下の固定バーより手前に出し、最後の項目が隠れないよう余白を確保する */
  .nav{
    position:fixed;inset:62px 0 auto;z-index:90;
    background:var(--cream);
    border-bottom:1px solid var(--line);
    display:none;
    max-height:calc(100dvh - 62px);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  .nav.is-open{display:block}
  .nav__list{
    flex-direction:column;gap:0;
    align-items:stretch;      /* PC用の flex-start が残ると文字幅までしか伸びない */
    justify-content:flex-start;
    padding:8px 24px calc(24px + 64px);
  }
  .nav__list li{width:100%}

  /* 区切り線は li に引く。a に引くと文字幅ぶんしか伸びない */
  .nav__list li{border-bottom:1px solid var(--line)}
  .nav__list li:last-child{border-bottom:0}
  .nav__link{
    display:block;width:100%;
    text-align:left;padding:13px 2px;
    border-bottom:0;
  }
  .nav__link.is-active{border-bottom:0}
  .nav__ja{display:inline-flex;align-items:center;gap:8px}
  .nav__en{margin-top:2px}

  .nav__list li:has(.nav__link--shop){
    margin-left:0;padding-left:0;border-left:0;
    margin-top:10px;padding-top:6px;
    border-top:1px solid var(--line);
  }

  /* --- メガメニューはスマホでは開閉式にする --- */
  .nav__item.has-mega{position:relative}
  .nav__item.has-mega .nav__link{padding-right:44px}
  .nav__toggle{
    display:block;position:absolute;right:0;top:0;
    width:44px;height:52px;
    background:transparent;border:0;padding:0;cursor:pointer;
  }
  .nav__toggle::before,
  .nav__toggle::after{
    content:"";position:absolute;left:50%;top:50%;
    width:11px;height:1px;background:var(--gold);
    transform:translate(-50%,-50%);
    transition:transform .3s var(--ease);
  }
  .nav__toggle::after{transform:translate(-50%,-50%) rotate(90deg)}
  .nav__toggle[aria-expanded="true"]::after{transform:translate(-50%,-50%) rotate(0deg)}

  .mega{
    position:static;top:auto;transform:none;width:auto;
    opacity:1;visibility:visible;pointer-events:auto;
    display:none;padding-top:0;
  }
  .nav__item.has-mega::after{content:none}
  .nav__item.has-mega:hover .mega,
  .nav__item.has-mega:focus-within .mega{transform:none}
  .mega.is-open{display:block}
  .mega__inner{
    border:0;box-shadow:none;background:transparent;
    padding:0 0 14px;
  }
  .mega__cols{grid-template-columns:1fr;gap:0}
  .mega__col{padding:10px 0 4px;border-top:1px solid var(--beige)}
  .mega__col:first-child{border-top:0}
  .mega__cat{
    padding-bottom:6px;margin-bottom:4px;border-bottom:0;
    font-size:12px;
  }
  .mega__list{padding-left:12px}
  .mega__list a{padding:7px 0;font-size:13.5px}
  .mega__all{text-align:left;margin-top:12px}
}

/* ============================================================
   5. 下層ページのタイトル帯
   ============================================================ */
.pagehead{
  position:relative;
  background:var(--beige);
  min-height:126px;
  padding:34px var(--gutter);
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  text-align:center;
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.pagehead__bg{
  position:absolute;inset:0;z-index:0;line-height:0;
}
.pagehead__bg img{
  width:100%;height:100%;object-fit:cover;display:block;
}
/* 背景の上でも文字が読めるよう、うっすら白を重ねる */
.pagehead.has-bg::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:rgba(255,255,255,.62);
}
.pagehead.has-bg{border-bottom:0}
.pagehead__label,
.pagehead__title{position:relative;z-index:2}
.pagehead__label{
  font-family:var(--font-display);
  font-size:11.5px;letter-spacing:.24em;color:var(--gold-deep);
  display:block;margin-bottom:8px;
}
.pagehead__title{
  margin:0;
  font-family:var(--font-mincho);
  font-weight:400;
  font-size:clamp(21px,2.8vw,29px);
  letter-spacing:.16em;
  line-height:1.6;
  color:var(--ink);
  text-shadow:0 1px 10px rgba(255,255,255,.7);
}
@media (max-width:700px){
  .pagehead{min-height:96px;padding:26px var(--gutter)}
  .pagehead__title{letter-spacing:.1em}
}

/* --- 診療案内のメインビジュアル ---
   元画像は 1920x960。全体を出すと縦に長すぎるので、
   帯状に切り抜いて高さを抑える。 */
.menumv{width:100%;line-height:0;background:var(--beige);overflow:hidden}
.menumv img{
  width:100%;display:block;
  aspect-ratio:1920/440;
  object-fit:cover;object-position:center 42%;
}
@media (max-width:900px){
  .menumv img{aspect-ratio:1920/520}
}
@media (max-width:640px){
  .menumv img{aspect-ratio:16/9}
}

/* パンくず */
/* padding の一括指定は .wrap の左右余白を消してしまうので、上下だけ指定する */
.crumbs{font-size:12px;color:var(--ink-mute);padding-block:16px;letter-spacing:.04em}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.crumbs li+li::before{content:"›";margin-right:8px;color:var(--line)}
.crumbs a{color:var(--ink-mute)}

/* ============================================================
   6. 本文レイアウト
   ============================================================ */
.single{padding:0 0 96px}
/* 診療案内はサイドバーを持たず、本文を幅いっぱいに使う（旧サイトと同じ） */
.single__grid{display:block}

/* 目次 */
.toc{
  background:var(--white);
  border:1px solid var(--line);
  padding:26px 28px;
  margin:0 0 48px;
}
.toc__title{
  font-family:var(--font-round);
  font-size:13px;letter-spacing:.2em;color:var(--gold);
  margin:0 0 14px;text-align:center;
}
.toc__list{list-style:none;margin:0;padding:0;counter-reset:toc}
.toc__list li{counter-increment:toc;border-top:1px solid var(--beige);padding:9px 0}
.toc__list li:first-child{border-top:0}
.toc__list a{display:flex;gap:12px;color:var(--ink);font-size:14px;line-height:1.7}
.toc__list a::before{
  content:counter(toc,decimal-leading-zero);
  font-family:var(--font-display);color:var(--gold);flex:none;
}

/* 項目が多いとき（料金表など）は多列にする */
.toc--wide .toc__list{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0 28px;
}
.toc--wide .toc__list li{border-top:1px solid var(--beige)}
.toc--wide .toc__list li:nth-child(-n+3){border-top:0}
@media (max-width:860px){
  .toc--wide .toc__list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .toc--wide .toc__list li:nth-child(3){border-top:1px solid var(--beige)}
}
@media (max-width:520px){
  .toc--wide .toc__list{grid-template-columns:1fr}
  .toc--wide .toc__list li:nth-child(2),
  .toc--wide .toc__list li:nth-child(3){border-top:1px solid var(--beige)}
}

/* ============================================================
   7. 本文タイポグラフィ（.prose）
   ============================================================ */
.prose{font-size:15px;line-height:2.1}
.prose > *:first-child{margin-top:0}
.prose p{margin:0 0 1.6em}
.prose strong,.prose b{font-weight:600}

.prose h2{
  font-family:var(--font-mincho);
  font-weight:400;
  font-size:clamp(20px,2.6vw,26px);
  letter-spacing:.1em;
  line-height:1.6;
  margin:64px 0 24px;
  padding-bottom:14px;
  border-bottom:1px solid var(--line);
  position:relative;
  clear:both;
}
.prose h2::after{
  content:"";position:absolute;left:0;bottom:-1px;
  width:64px;height:2px;background:var(--gold);
}
.prose h3{
  font-family:var(--font-round);
  font-weight:500;
  font-size:18px;letter-spacing:.08em;
  margin:44px 0 16px;
  padding-left:14px;
  border-left:3px solid var(--gold-light);
  scroll-margin-top:110px;
}
.prose h2{scroll-margin-top:110px}
.prose h4{
  font-family:var(--font-round);
  font-weight:500;font-size:16px;letter-spacing:.06em;
  color:var(--gold-deep);
  margin:34px 0 12px;
}
.prose h5{font-size:15px;font-weight:600;margin:24px 0 10px}

.prose ul,.prose ol{margin:0 0 1.6em;padding-left:1.4em}
.prose li{margin-bottom:.5em}
.prose ul{list-style:none;padding-left:0}
.prose ul li{position:relative;padding-left:20px}
.prose ul li::before{
  content:"";position:absolute;left:4px;top:.85em;
  width:6px;height:6px;border-radius:50%;background:var(--gold-light);
}
/* 本文側に「・」が書かれている項目は丸ポチを出さない（二重防止） */
.prose ul li.has-nakaguro{padding-left:0}
.prose ul li.has-nakaguro::before{content:none}

.prose ol li::marker{color:var(--gold);font-family:var(--font-display)}

.prose img{margin:12px 0;display:block}
.prose .alignnone{margin-inline:0}
.prose .aligncenter{margin-inline:auto}

/* 旧サイト由来の空段落を詰める */
.prose p.is-empty{display:none}
.prose p:empty{display:none}

/* ------------------------------------------------------------
   表：3つの型がある
   1) 比較表   … 4列・見出し行も td   → 1行目を見出し扱い
   2) 施術概要 … 2列・左が項目名      → 左列を見出し扱い
   3) 料金表   … th あり             → 右列を数字書体
   ------------------------------------------------------------ */
.prose table{
  width:100%;border-collapse:collapse;
  margin:0 0 2em;background:var(--white);
  font-size:14px;
}
.prose th,.prose td{
  border:1px solid var(--line);
  padding:14px 16px;
  text-align:left;vertical-align:top;line-height:1.9;
}
.prose th{
  background:var(--beige);
  font-family:var(--font-round);font-weight:500;
  letter-spacing:.08em;
}

/* 1) 見出し行が td の表：先頭行を見出しに見せる */
.prose table.is-headrow tr:first-child td{
  background:var(--beige);
  font-family:var(--font-round);font-weight:500;letter-spacing:.08em;
}

/* 2) 2列の定義表：左列を見出しに見せる */
.prose table.is-deflist td:first-child{
  background:var(--beige);
  font-family:var(--font-round);font-weight:500;letter-spacing:.06em;
  width:30%;min-width:7em;
}

/* 2-b) 経歴・沿革の表（旧実測: 年月282px : 内容846px ＝ 25% : 75%、罫線と地色なし） */
.prose table.is-history{
  table-layout:fixed;
  background:transparent;
}
.prose table.is-history th,
.prose table.is-history td{
  border:0;
  border-bottom:1px solid var(--beige);
  background:transparent;
  padding:14px 8px;
  vertical-align:top;
}
.prose table.is-history th{
  width:25%;
  font-family:var(--font-round);font-weight:500;
  color:var(--gold-deep);letter-spacing:.04em;
  white-space:nowrap;
}
.prose table.is-history td{width:75%;font-family:var(--font-body)}
@media (max-width:640px){
  .prose table.is-history,
  .prose table.is-history thead,
  .prose table.is-history tbody,
  .prose table.is-history tr,
  .prose table.is-history th,
  .prose table.is-history td{display:block;width:auto}
  .prose table.is-history th{padding:12px 0 2px;border-bottom:0}
  .prose table.is-history td{padding:0 0 12px;border-bottom:1px solid var(--beige)}
}

/* 3) 料金表：右列だけ数字書体・右寄せ */
.prose table.is-price td:last-child{
  font-family:var(--font-price);
  letter-spacing:.02em;
  text-align:right;
  white-space:nowrap;
}
.prose table.is-price th:last-child{text-align:right}

/* 料金表は全表で列幅を固定する。
   幅を指定しないとブラウザが文字数から決めてしまい、
   表ごとに 1列目:2列目 の比率がバラバラになる。 */
.prose table.is-price,
.prose table.price_table{
  table-layout:fixed;
}
.prose table.is-price th:first-child,
.prose table.is-price td:first-child,
.prose table.price_table th:first-child,
.prose table.price_table td:first-child{
  width:75%;
}
.prose table.is-price th:last-child,
.prose table.is-price td:last-child,
.prose table.price_table th:last-child,
.prose table.price_table td:last-child{
  width:25%;
}
/* 3列以上の料金表は自動幅に戻す */
.prose table.is-price tr:first-child > *:nth-child(3) ~ *,
.prose table.price_table tr:first-child > *:nth-child(3) ~ *{width:auto}

/* 長い項目名を折り返す（table-layout:fixed のため） */
.prose table.price_table td:first-child,
.prose table.is-price td:first-child{
  word-break:break-word;
  overflow-wrap:anywhere;
}

/* 横スクロール（狭い画面で表が潰れないように） */
.table-scroll{overflow-x:auto;margin:0 0 2em;-webkit-overflow-scrolling:touch}
.table-scroll table{margin:0;min-width:520px}

@media (max-width:600px){
  .prose th,.prose td{padding:10px 12px;font-size:13px}
  .prose table.is-deflist td:first-child{width:34%;min-width:5.5em}
}

/* ============================================================
   7-2. 旧サイトのマークアップを支えるレイアウト
   移行した本文には旧テーマのクラス名が残っている。
   旧CSSは使えないので、実際の表示（幅・並び）を採寸して
   同じ効果を新規に書き起こしたもの。
   ============================================================ */

/* --- 施術の流れ（旧実測: 背景#f8f5f0 / padding32 / 円60px金地・白文字28px / 右余白45px） --- */
.prose .layout10{margin:0 0 32px}
.prose .flow_box{
  display:flex;
  align-items:flex-start;
  background:var(--cream);
  padding:32px;
  margin:0 0 16px;
}
.prose .flow_box > .number{
  flex:0 0 60px;
  width:60px;height:60px;
  margin:0 45px 0 0;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:var(--gold);
  color:var(--white);
  font-family:var(--font-display);
  font-size:28px;line-height:1;
}
.prose .flow_box > .layout10_box{flex:1 1 auto;min-width:0}
.prose .flow_box > .layout10_box > *:first-child{margin-top:0}
.prose .flow_box > .layout10_box > *:last-child{margin-bottom:0}
.prose .flow_box h5{margin:0 0 6px;font-size:16px;color:var(--gold-deep)}
@media (max-width:640px){
  .prose .flow_box{padding:20px;flex-direction:column}
  .prose .flow_box > .number{margin:0 0 14px;width:48px;height:48px;flex-basis:48px;font-size:22px}
}

/* --- 項目+内容の2カラム（旧実測: 360px + 840px） --- */
.prose .layout01_box{display:flex;align-items:stretch;margin:5px 0}
.prose .layout01_title{
  flex:0 0 300px;
  display:flex;align-items:center;
  background:var(--cream);
  padding:16px 20px;
  font-family:var(--font-round);
  font-size:16px;font-weight:500;
  color:var(--gold-deep);letter-spacing:.04em;
}
.prose .layout01_text{flex:1 1 auto;min-width:0;padding:16px 22px;line-height:1.9}
.prose .layout01_text > *:first-child{margin-top:0}
.prose .layout01_text > *:last-child{margin-bottom:0}
@media (max-width:700px){
  .prose .layout01_box{flex-direction:column}
  .prose .layout01_title{flex:none;padding:12px 16px}
  .prose .layout01_text{padding:14px 16px}
}

/* --- ベージュ地のボックス（旧実測: bg #f8f5f0 / padding20 / mb15） --- */
.prose .box_style01,.prose .list08{
  background:var(--cream);padding:20px 24px;margin:0 0 16px;
}
.prose .list08{display:block}
.prose .list08 li{margin-bottom:.4em}
.prose .box_style01 > *:first-child,.prose .list08 > *:first-child{margin-top:0}
.prose .box_style01 > *:last-child,.prose .list08 > *:last-child{margin-bottom:0}

/* --- 段落まとまり --- */
.prose .body_wrap{margin:0 0 32px}
.prose .body_wrap > *:last-child{margin-bottom:0}
.prose .text{margin:0 0 40px}
.prose .text > *:last-child{margin-bottom:0}
.prose .cmn_editor > *:first-child{margin-top:0}

/* --- ブログ本文のサムネイル --- */
.prose .blog_single_thum{margin:0 0 30px}
.prose .blog_single_thum img{width:100%;margin:0}

/* --- 旧目次が本文に残っている場合の体裁 --- */
.prose .toc_title_center,.prose .no_bullets{
  background:var(--cream);padding:25px 30px;margin:0 0 50px;
}
.prose .toc_title{
  font-family:var(--font-round);font-size:16px;font-weight:600;
  padding-bottom:10px;margin:0 0 18px;
  border-bottom:1px solid var(--line);text-align:center;
}
.prose .toc_list{list-style:none;padding-left:0;margin:0;font-size:14px}
.prose .toc_list li{padding-left:0}
.prose .toc_list li::before{content:none}
.prose .no_bullets{list-style:none;padding-left:30px}
.prose .no_bullets li{padding-left:0}
.prose .no_bullets li::before{content:none}

/* --- 症例の付随要素 --- */
.prose .case_category_tit{
  font-family:var(--font-mincho);font-size:22px;font-weight:400;letter-spacing:.08em;
  padding-bottom:8px;margin:0 0 16px;border-bottom:1px solid var(--line);
}
.prose .case_search{max-width:500px;margin:0 0 24px}
.prose .case_search_input{
  width:100%;height:50px;padding:0 16px;
  border:1px solid var(--line);background:var(--white);font-size:14px;
}
.prose .case_comparison_attention_tit{
  font-family:var(--font-round);font-size:13px;color:var(--gold-deep);margin:0 0 6px;
}

/* --- 細かいユーティリティ --- */
.prose .bold{font-weight:700}
.prose .mb00{margin-bottom:0}
.prose .pt10{padding-top:10px}
.prose .w-fit{width:fit-content}
.prose .list03{margin:0 0 1.4em}
.prose .fas,.prose .fa-search{display:none}

/* --- 医師紹介：写真右・本文左の2カラム --- */
.prose .doctor_greeting_flex{
  display:flex;
  flex-direction:row-reverse;
  gap:40px;
  align-items:flex-start;
}
.prose .doctor_img{flex:0 0 340px}
.prose .doctor_img img{width:100%;margin:0}
.prose .doctor_greeting_flex > .text{flex:1 1 auto;min-width:0;margin-bottom:0}
@media (max-width:820px){
  .prose .doctor_greeting_flex{flex-direction:column;gap:24px}
  .prose .doctor_img{flex:none;max-width:300px;margin-inline:auto}
}

/* --- 症例：ビフォーアフターの横並び --- */
.prose .case_comparison_list{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
}
.prose .case_comparison_item{margin:0}
.prose .case_comparison_item p{margin:0}
.prose .case_comparison_img{display:block}
.prose .case_comparison_img img{width:100%;margin:0}
.prose .case_comparison_attention{
  margin-top:16px;font-size:13px;color:var(--ink-mute);line-height:1.9;
}
.prose .case_comparison_attentionBtn{
  margin-top:10px;padding:8px 18px;
  background:transparent;border:1px solid var(--line);
  font-family:var(--font-round);font-size:12px;letter-spacing:.1em;
  color:var(--ink);cursor:pointer;
}
@media (max-width:640px){
  .prose .case_comparison_list{grid-template-columns:1fr}
}

/* --- 症例の詳細：項目 + 内容の定義リスト --- */
.prose .case_detail{
  display:grid;
  grid-template-columns:200px minmax(0,1fr);
  gap:0;
  margin:24px 0;
  border-top:1px solid var(--line);
}
.prose .case_detail dt,
.prose .case_detail dd{
  margin:0;
  padding:13px 16px;
  border-bottom:1px solid var(--line);
  line-height:1.9;
}
.prose .case_detail dt{
  background:var(--beige);
  font-family:var(--font-round);font-weight:500;letter-spacing:.06em;
}
@media (max-width:640px){
  .prose .case_detail{grid-template-columns:1fr}
  .prose .case_detail dt{border-bottom:0}
}

/* --- 院内紹介・設備紹介：3列のギャラリー --- */
.prose .clinic_facilities_wrap{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:32px 2%;
  margin:0 0 40px;
}
.prose .clinic_facilities_wrap > *{margin:0}
.prose .facilities_item{margin:0}
.prose .facilities_item dt,
.prose .facilities_item dd{margin:0}
.prose .facilities_item img,
.prose .clinic_facilities_wrap img{
  width:100%;
  aspect-ratio:3/2;
  object-fit:cover;
  margin:0 0 10px;
  display:block;
}
.prose .facilities_item dt{
  font-family:var(--font-round);
  font-size:14px;letter-spacing:.06em;
  color:var(--ink);
  margin-bottom:4px;
}
.prose .facilities_item dd{
  font-size:13px;line-height:1.9;color:var(--ink-mute);
}
@media (max-width:900px){
  .prose .clinic_facilities_wrap{grid-template-columns:repeat(2,1fr);gap:24px 3%}
}
@media (max-width:560px){
  .prose .clinic_facilities_wrap{grid-template-columns:1fr;gap:20px}
}

/* --- 本文中の画像回り込み（旧サイトの実測値 300px） --- */
.prose .img_fr{float:right;margin:4px 0 20px 32px;width:300px;max-width:40%}
.prose .img_fl{float:left;margin:4px 32px 20px 0;width:300px;max-width:40%}
.prose .img_fr img,.prose .img_fl img{width:100%;margin:0}
.prose .body_wrap_float::after,
.prose .body_wrap::after,
.prose .layout10::after{content:"";display:block;clear:both}
@media (max-width:640px){
  .prose .img_fr,.prose .img_fl{float:none;width:auto;max-width:100%;margin:16px 0}
}

/* --- 1カラム画像 --- */
.prose .medical_img_1column img{width:100%;margin:12px 0}

/* --- 小見出し（旧実測: 18px / bold / #bf9c47 / mb18） --- */
.prose .layout_tit{
  font-family:var(--font-round);
  font-size:18px;font-weight:600;
  color:var(--gold);
  letter-spacing:.04em;
  margin:0 0 18px;
}

/* --- 旧サイトのボタン --- */
.prose .btn01 a,.prose a.btn01{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:220px;padding:14px 28px;
  border:1px solid var(--gold);color:var(--ink);
  font-family:var(--font-round);font-size:14px;letter-spacing:.12em;
  transition:background .3s var(--ease),color .3s var(--ease);
}
.prose .btn01 a:hover,.prose a.btn01:hover{background:var(--gold);color:var(--white);opacity:1}

/* --- 画像の最大幅：本文内で暴れないように --- */
.prose img{max-width:100%;height:auto}
.prose p > img:only-child{margin-inline:auto}

/* --- 症例画像の年齢確認クッション --- */
.prose .agegate{margin:0 0 28px}
.prose .agegate__notice{
  border:1px solid var(--line);
  background:var(--beige);
  padding:32px 28px;
  text-align:center;
}
.prose .agegate__title{
  font-family:var(--font-round);
  font-size:14px;letter-spacing:.16em;color:var(--gold-deep);
  margin:0 0 14px;
}
.prose .agegate__notice p{
  margin:0 0 6px;font-size:14px;line-height:1.9;color:var(--ink);
}
.prose .agegate__btn{
  margin-top:20px;
  min-width:240px;padding:14px 28px;
  background:var(--white);
  border:1px solid var(--gold);
  color:var(--ink);
  font-family:var(--font-round);font-size:14px;letter-spacing:.12em;
  cursor:pointer;
  transition:background .3s var(--ease),color .3s var(--ease);
}
.prose .agegate__btn:hover{background:var(--gold);color:var(--white)}
.prose .agegate.is-open .agegate__notice{
  padding:16px 20px;text-align:left;
}
.prose .agegate.is-open .agegate__notice p:not(.agegate__title){display:none}
.prose .agegate.is-open .agegate__btn{display:none}
.prose .agegate__media{margin-top:20px}
.agegate__media[hidden]{display:none}
.prose .agegate__media:focus{outline:none}

/* ============================================================
   8. 予約導線
   ============================================================ */
.cta{
  margin-top:72px;
  background:var(--beige);
  border:1px solid var(--line);
  padding:40px 32px;
  text-align:center;
}
.cta__lead{font-family:var(--font-mincho);font-size:19px;letter-spacing:.1em;margin:0 0 8px}
.cta__note{font-size:13px;color:var(--ink-mute);margin:0 0 24px}
.cta__actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:220px;padding:15px 28px;
  border:1px solid var(--gold);
  background:transparent;color:var(--ink);
  font-family:var(--font-round);font-size:14px;letter-spacing:.14em;
  transition:background .3s var(--ease),color .3s var(--ease);
}
.btn:hover{background:var(--gold);color:var(--white);opacity:1}
.btn--solid{background:var(--gold);color:var(--white)}
.btn--solid:hover{background:var(--gold-deep)}

/* ============================================================
   9. 関連メニュー
   ============================================================ */
.related{margin-top:88px}
.related__grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:20px;list-style:none;margin:0;padding:0;
}
.card{
  display:block;background:var(--white);
  border:1px solid var(--line);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.card:hover{transform:translateY(-3px);box-shadow:0 8px 22px rgba(182,144,87,.14);opacity:1}
.card__media{aspect-ratio:4/3;overflow:hidden;background:var(--beige)}
.card__media img{width:100%;height:100%;object-fit:cover}
.card__body{padding:16px 18px 20px}
.card__cat{font-family:var(--font-display);font-size:10px;letter-spacing:.16em;color:var(--gold)}
.card__name{
  font-family:var(--font-mincho);font-size:16px;letter-spacing:.06em;
  line-height:1.6;margin:6px 0 0;color:var(--ink);font-weight:400;
}

/* ============================================================
   10. サイドバー
   ============================================================ */
.side{position:sticky;top:110px}
.side__block+.side__block{margin-top:32px}
.side__title{
  font-family:var(--font-round);font-size:12px;letter-spacing:.2em;
  color:var(--gold);margin:0 0 12px;padding-bottom:10px;
  border-bottom:1px solid var(--line);
}
.side__list{list-style:none;margin:0;padding:0}
.side__list li{border-bottom:1px solid var(--beige)}
.side__list a{display:block;padding:11px 0;font-size:14px;color:var(--ink);line-height:1.6}
.side__list a:hover{color:var(--gold-deep)}
@media (max-width:1000px){.side{position:static}}

/* ============================================================
   11. 右側固定バー
   ============================================================ */
.rail{
  position:fixed;right:0;top:50%;transform:translateY(-50%);
  z-index:60;display:flex;flex-direction:column;gap:8px;
}
.rail__item{
  width:var(--rail);padding:16px 8px;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  font-family:var(--font-round);font-size:11px;letter-spacing:.14em;
  writing-mode:vertical-rl;text-orientation:upright;
  border:1px solid var(--line);border-right:0;
  background:var(--white);color:var(--ink);
}
.rail__item--book{background:var(--gold);color:var(--white);border-color:var(--gold)}
.rail__item svg{writing-mode:horizontal-tb;width:20px;height:20px}
@media (max-width:900px){
  /* 画面下の固定バー。3つを均等に並べる */
  .rail{
    top:auto;bottom:0;left:0;right:0;transform:none;
    display:grid;grid-template-columns:repeat(3,1fr);gap:0;
    background:var(--white);
    border-top:1px solid var(--line);
    box-shadow:0 -2px 10px rgba(63,63,63,.06);
    padding-bottom:env(safe-area-inset-bottom);
  }
  /* メニューを開いている間は隠す（最後の項目と重なるため） */
  body.nav-open .rail{display:none}
  body.nav-open .pagetop{display:none}

  .rail__item{
    width:auto;
    writing-mode:horizontal-tb;
    flex-direction:column;justify-content:center;gap:5px;
    padding:10px 4px;
    border:0;
    font-size:10.5px;letter-spacing:.04em;line-height:1;
    background:transparent;color:var(--ink);
  }
  .rail__item + .rail__item{border-left:1px solid var(--beige)}
  .rail__item svg{width:19px;height:19px}

  .rail__item--book{
    background:transparent;color:var(--gold-deep);
    border-color:var(--line);
  }
  .rail__item--book svg{color:var(--gold)}

  body{padding-bottom:calc(60px + env(safe-area-inset-bottom))}
}

/* ============================================================
   13. トップページ
   旧サイトの実測に基づく構成
   ============================================================ */
.section{padding:68px 0}
.section--trouble{padding-top:0}
.section__more{text-align:center;margin:36px 0 0}

.subheading{text-align:center;margin:0 0 26px}
.subheading__en{
  display:block;font-family:var(--font-display);
  font-size:14px;letter-spacing:.18em;color:var(--gold);
}
.subheading__ja{
  display:block;margin-top:4px;
  font-family:var(--font-mincho);font-size:20px;letter-spacing:.14em;
}

@media (max-width:700px){
  :root{--gutter:20px}
  .section{padding:52px 0}
  .heading{margin-bottom:28px}
  .subheading{margin-bottom:20px}
  .subheading__ja{font-size:18px}
}

/* --- メインビジュアル（旧実測: 1920x900 フルワイド3枚・フェード切替） --- */
.hero{width:100%;background:var(--beige)}
/* ヘッダーぶんを引いて1画面に収まるようにする。
   横長の画像なので、切り抜きは中央基準。 */
.hero__track{
  position:relative;width:100%;
  aspect-ratio:1920/900;
  max-height:calc(100dvh - 190px);
  overflow:hidden;
}
.hero__slide{
  position:absolute;inset:0;
  opacity:0;transition:opacity 1.2s var(--ease);
  pointer-events:none;
}
.hero__slide.is-current{opacity:1;pointer-events:auto}
.hero__slide img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.hero__dots{
  position:absolute;left:0;right:0;bottom:20px;z-index:2;
  display:flex;justify-content:center;gap:12px;
}
.hero__dot{
  width:9px;height:9px;padding:0;border-radius:50%;
  border:1px solid var(--white);background:rgba(255,255,255,.35);cursor:pointer;
  box-shadow:0 0 4px rgba(0,0,0,.2);
}
.hero__dot.is-current{background:var(--white)}

/* メインビジュアルに重ねるキャッチ（旧サイト：ロゴ金・文字は白） */
.hero__catch{
  position:absolute;left:50%;top:48%;
  transform:translate(-50%,-50%);
  z-index:2;text-align:center;width:min(820px,88%);
  pointer-events:none;
}
.hero__catchText{
  margin:0;
  font-family:var(--font-mincho);font-weight:400;
  font-size:clamp(20px,3vw,42px);letter-spacing:.16em;line-height:1.6;
  color:var(--white);
  /* 明るい背景でも沈まないよう、近い影で輪郭を締め、遠い影で全体を落とす */
  text-shadow:
    0 1px 2px rgba(63,63,63,.45),
    0 3px 10px rgba(63,63,63,.38),
    0 8px 28px rgba(63,63,63,.24);
}
.hero__catchEn{
  margin:16px 0 0;
  font-family:var(--font-display);
  font-size:clamp(12px,1.25vw,17px);letter-spacing:.14em;
  color:var(--white);
  text-shadow:
    0 1px 2px rgba(63,63,63,.42),
    0 3px 10px rgba(63,63,63,.32);
}
@media (max-width:640px){
  .hero__catch{width:90%;top:44%}
  .hero__catchText{font-size:19px;letter-spacing:.1em}
  .hero__catchEn{font-size:11px;margin-top:10px}
}

/* メインビジュアルに重ねるバッジ（画像ではなく自前で描く） */
.hero__badges{
  position:absolute;right:calc(var(--rail) + 24px);bottom:26px;
  z-index:3;
  display:flex;gap:14px;align-items:center;
}
.badge{
  width:clamp(96px,10vw,132px);
  aspect-ratio:1/1;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;padding:10px;text-align:center;
  box-shadow:0 3px 14px rgba(0,0,0,.16);
  border:3px solid rgba(255,255,255,.78);
  transition:transform .3s var(--ease);
}
a.badge:hover{transform:scale(1.05);opacity:1}
.badge__icon{width:26px;height:26px;margin-bottom:2px}
.badge__text{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0}
.badge__main{
  font-family:var(--font-round);font-weight:500;
  font-size:clamp(13px,1.15vw,16px);letter-spacing:.04em;line-height:1.35;
}
.badge__sub{
  font-family:var(--font-round);
  font-size:clamp(9.5px,.8vw,11.5px);letter-spacing:0;line-height:1.35;
  opacity:.92;
  word-break:keep-all;
}
/* 背景写真がうっすら透けるようにして、画面になじませる */
.badge--doctor{
  background:linear-gradient(150deg,rgba(232,117,156,.88) 0%,rgba(221,92,134,.88) 100%);
  color:var(--white);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}
.badge--reserve{
  background:linear-gradient(150deg,rgba(74,74,74,.86) 0%,rgba(47,47,47,.86) 100%);
  color:var(--gold-light);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}
.badge--reserve .badge__sub{color:rgba(255,255,255,.85)}

@media (max-width:900px){
  .hero__badges{right:12px;gap:10px}
  .badge{width:92px;padding:8px 6px}
  .badge__icon{width:18px;height:18px;margin-bottom:0}
  .badge__main{font-size:12px}
  .badge__sub{font-size:9.5px;letter-spacing:0}
}
@media (max-width:640px){
  .hero__track{aspect-ratio:1/1;max-height:none}
  .hero__dots{bottom:14px}

  /* スマホでも円のまま画像の中に置く。円を小さくし、文字を詰めて収める */
  .hero__badges{
    position:absolute;right:10px;bottom:44px;left:auto;
    display:flex;flex-direction:column;gap:8px;align-items:flex-end;
    padding:0;background:transparent;
  }
  .badge{
    width:74px;aspect-ratio:1/1;border-radius:50%;
    flex-direction:column;justify-content:center;
    gap:1px;padding:6px 4px;border-width:2px;
    box-shadow:0 2px 10px rgba(0,0,0,.18);
  }
  .badge__icon{width:15px;height:15px;margin-bottom:1px}
  .badge__text{align-items:center;gap:0}
  .badge__main{font-size:11px;letter-spacing:0;line-height:1.25}
  .badge__sub{font-size:8.5px;letter-spacing:0;line-height:1.2}
}
@media (max-width:380px){
  .badge{width:66px}
  .badge__main{font-size:10px}
  .badge__sub{font-size:8px}
}

/* --- ページの先頭へ戻る --- */
.pagetop{
  position:fixed;right:calc(var(--rail) + 16px);bottom:24px;z-index:75;
  width:52px;height:52px;
  display:flex;align-items:center;justify-content:center;
  background:var(--white);border:1px solid var(--gold);color:var(--gold-deep);
  border-radius:50%;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s,background .3s var(--ease),color .3s var(--ease);
}
.pagetop.is-visible{opacity:1;visibility:visible;transform:none}
.pagetop:hover{background:var(--gold);color:var(--white);opacity:1}
.pagetop svg{width:20px;height:20px}
@media (max-width:900px){
  .pagetop{
    right:14px;
    bottom:calc(74px + env(safe-area-inset-bottom));
    width:44px;height:44px;
  }
  .pagetop svg{width:17px;height:17px}
}

/* --- 下部のバナー枠：縦長画像が並んでも場所を取りすぎないよう高さを抑える --- */
.bannerrow{background:var(--cream);padding:48px 0}
.bannerrow__grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:center;
  gap:28px;
  max-width:1068px;
  margin-inline:auto;
  padding-inline:var(--gutter);
  list-style:none;
}
.bannerrow__grid li{
  min-width:0;
  display:flex;align-items:center;justify-content:center;
}
.bannerrow__grid li > *{width:100%}
.bannerrow__grid img{
  display:block;
  width:100%;
  height:auto;
}
.bannerrow__grid a{display:block;transition:opacity .3s var(--ease)}
.bannerrow__grid a:hover{opacity:.75}
.bannerrow__dots{display:none}

@media (max-width:760px){
  .bannerrow{padding:26px 0}
  /* 縦に積まず、横スワイプで切り替える */
  .bannerrow__grid{
    display:flex;grid-template-columns:none;
    gap:0;max-width:none;padding-inline:0;
    overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .bannerrow__grid::-webkit-scrollbar{display:none}
  .bannerrow__grid li{
    flex:0 0 100%;scroll-snap-align:center;
    padding-inline:var(--gutter);
    align-items:center;
  }
  .bannerrow__dots{
    display:flex;justify-content:center;gap:9px;margin-top:14px;
  }
  .bannerrow__dot{
    width:7px;height:7px;padding:0;border-radius:50%;
    border:1px solid var(--gold);background:transparent;cursor:pointer;
  }
  .bannerrow__dot.is-current{background:var(--gold)}
}

/* --- お知らせ --- */
.newslist{
  list-style:none;margin:0;padding:0;
  background:var(--white);
  border:1px solid var(--line);
}
.newslist__item + .newslist__item{border-top:1px solid var(--beige)}
.newslist__link{
  display:grid;
  grid-template-columns:112px 140px minmax(0,1fr) 20px;
  align-items:center;gap:18px;
  padding:22px 26px;color:var(--ink);
  transition:background .3s var(--ease);
}
.newslist__link:hover{background:var(--cream);opacity:1}
.newslist__link::after{
  content:"";width:7px;height:7px;justify-self:end;
  border-top:1px solid var(--gold);border-right:1px solid var(--gold);
  transform:rotate(45deg);
  transition:transform .3s var(--ease);
}
.newslist__link:hover::after{transform:rotate(45deg) translate(2px,-2px)}
.newslist__date{
  font-family:var(--font-display);font-size:15px;
  color:var(--gold-deep);letter-spacing:.06em;
}
.newslist__cat{
  justify-self:start;
  padding:5px 14px;background:var(--beige);
  font-family:var(--font-round);font-size:11px;letter-spacing:.08em;color:var(--gold-deep);
  white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;
}
.newslist__title{
  font-size:15px;line-height:1.8;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.newslist__link:hover .newslist__title{color:var(--gold-deep)}
@media (max-width:760px){
  .newslist__link{
    grid-template-columns:auto 1fr;gap:8px 12px;padding:18px 18px;
  }
  .newslist__link::after{display:none}
  .newslist__title{grid-column:1/-1}
}

/* お知らせ一覧ページで使うとき（件数が多いので少し詰める） */
.newslist--page .newslist__link{padding:20px 26px}
.newslist--page .newslist__title{-webkit-line-clamp:1}
@media (max-width:760px){
  .newslist--page .newslist__link{padding:16px 16px}
  .newslist--page .newslist__title{-webkit-line-clamp:2}
}

/* --- アクセス（最下部：診療時間 と マップ を横並びのブロックに） --- */
.section--access{padding-bottom:96px}
.access2{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:32px;
  align-items:start;   /* 高さを揃えると中身の少ない側に空白ができる */
}
.access2__box{
  border:1px solid var(--line);
  background:var(--white);
  padding:28px;
}
.access2__title{
  font-family:var(--font-round);font-size:13px;letter-spacing:.2em;color:var(--gold);
  text-align:center;margin:0 0 18px;padding-bottom:12px;border-bottom:1px solid var(--line);
}
.access2__body{font-size:14px;line-height:2}
.access2__body table{width:100%;border-collapse:collapse;font-size:13px}
.access2__body th,.access2__body td{border:1px solid var(--line);padding:8px;text-align:center}
.access2__body th{background:var(--beige);font-weight:500}
.access2__embed{margin-top:16px;line-height:0}
.access2__embed iframe{width:100%;max-width:100%;border:0;display:block}
.access2__embed--map iframe{height:280px}
.access2__addr{margin:0 0 12px;text-align:center;line-height:2}
.access2__tel{margin:0;text-align:center}
.access2__tel a{
  font-family:var(--font-display);font-size:26px;letter-spacing:.04em;color:var(--ink);
}
.access2__tel small{font-size:13px;font-style:italic;margin-right:5px}
.access2__more{margin:18px 0 0;text-align:center}
.access2__more .btn{min-width:0;width:100%}

/* アクセスページ内で使うときは上に余白を置き、地図を大きめに */
.access2--page{margin-top:8px}
.access2--page .access2__embed--map iframe{height:340px}

@media (max-width:860px){
  .access2{grid-template-columns:1fr;gap:24px}
  .section--access{padding-bottom:64px}
}

/* --- 当院について --- */
.about{display:grid;grid-template-columns:552px minmax(0,1fr);gap:48px;align-items:center}
.about__media img{width:100%;display:block}
.about__lead{
  font-family:var(--font-mincho);font-size:22px;line-height:2;
  letter-spacing:.1em;margin:0 0 20px;
}
.about__text{font-size:15px;line-height:2.1}
@media (max-width:960px){.about{grid-template-columns:1fr;gap:28px}}

/* --- 当院の特徴（左右交互） --- */
.features{display:flex;flex-direction:column;gap:64px}
.feature{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:48px;align-items:center;
}
.feature:nth-child(even){direction:rtl}
.feature:nth-child(even) > *{direction:ltr}
.feature__media img{width:100%;display:block}
.feature__num{
  display:block;font-family:var(--font-display);
  font-size:44px;line-height:1;color:var(--gold-light);letter-spacing:.06em;
}
.feature__title{
  font-family:var(--font-mincho);font-weight:400;
  font-size:24px;letter-spacing:.1em;line-height:1.7;
  margin:14px 0 16px;
}
.feature__text{font-size:15px;line-height:2.1}
.feature__text p{margin:0 0 1.2em}
.feature__text p:last-child{margin-bottom:0}
@media (max-width:860px){
  .feature{grid-template-columns:1fr;gap:20px}
  .feature:nth-child(even){direction:ltr}
}

/* --- 診療案内（金背景） --- */
.section--medical{position:relative;background:var(--gold-light);color:var(--white)}
.section--medical .heading__en{color:var(--white)}
.section--medical .heading__ja,
.section--medical .subheading__en{color:var(--white)}
.section--medical .subheading__ja{color:var(--white)}
.section--medical .btn{border-color:var(--white);color:var(--white)}
.section--medical .btn:hover{background:var(--white);color:var(--gold-deep)}
.section--medical .btn--solid{background:var(--white);color:var(--gold-deep)}
.section--medical .btn--solid:hover{background:var(--cream)}

.cardgrid{
  display:grid;gap:50px 40px;list-style:none;margin:0;padding:0;
}
.cardgrid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cardgrid .card__desc{font-size:13px;line-height:1.9;color:var(--ink-mute);margin:8px 0 0}
@media (max-width:900px){.cardgrid--3{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 20px}}
@media (max-width:560px){.cardgrid--3{grid-template-columns:1fr}}

/* --- お悩みで探す（4列） --- */
.troublegrid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:30px 44px;list-style:none;margin:0;padding:0;
}
.trouble{
  display:flex;align-items:center;justify-content:center;
  min-height:92px;padding:18px 16px;
  background:var(--white);border:1px solid var(--line);
  color:var(--ink);text-align:center;
  font-family:var(--font-round);font-size:15px;letter-spacing:.04em;line-height:1.6;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.trouble:hover{background:var(--gold);border-color:var(--gold);color:var(--white);opacity:1}
@media (max-width:900px){
  .troublegrid{grid-template-columns:repeat(2,1fr);gap:14px}
  .trouble{min-height:76px;font-size:14px;padding:14px 12px}
}
@media (max-width:480px){
  .trouble{min-height:64px;font-size:13.5px}
}

/* --- ご挨拶 --- */
.greeting{display:grid;grid-template-columns:360px minmax(0,1fr);gap:48px;align-items:start}
.greeting__media img{width:100%;display:block}
.greeting__body{font-size:15px;line-height:2.1}
.greeting__name{
  font-family:var(--font-mincho);font-size:19px;letter-spacing:.1em;
  text-align:right;margin:24px 0 20px;
}
@media (max-width:860px){
  .greeting{grid-template-columns:1fr;gap:24px}
  .greeting__media{max-width:320px;margin-inline:auto}
}

/* ============================================================
   13-2. 一覧ページ
   ============================================================ */

/* --- 施術検索フォーム --- */
.menusearch{
  display:flex;gap:0;max-width:560px;margin:0 auto 48px;
}
.menusearch input[type="search"]{
  flex:1 1 auto;min-width:0;
  height:52px;padding:0 18px;
  border:1px solid var(--line);border-right:0;
  background:var(--white);
  font-family:var(--font-body);font-size:14px;color:var(--ink);
  border-radius:0;-webkit-appearance:none;
}
.menusearch input[type="search"]::placeholder{color:#aaa}
.menusearch input[type="search"]:focus{outline:none;border-color:var(--gold)}
.menusearch button{
  flex:none;height:52px;padding:0 26px;
  border:1px solid var(--gold);background:var(--gold);color:var(--white);
  font-family:var(--font-round);font-size:14px;letter-spacing:.12em;cursor:pointer;
  transition:background .3s var(--ease);
}
.menusearch button:hover{background:var(--gold-deep)}

.searchempty{font-size:15px;line-height:2;margin:0 0 8px}
.searchempty__hint{font-size:14px;color:var(--ink-mute)}

/* --- 診療案内の一覧：カテゴリごとの見出し --- */
.menugroup{margin:0 0 72px}
.menugroup__title{
  font-family:var(--font-mincho);font-weight:400;
  font-size:clamp(20px,2.6vw,26px);letter-spacing:.1em;
  margin:0 0 8px;padding-bottom:14px;
  border-bottom:1px solid var(--line);position:relative;
}
.menugroup__title::after{
  content:"";position:absolute;left:0;bottom:-1px;width:64px;height:2px;background:var(--gold);
}
.menugroup__desc{font-size:14px;color:var(--ink-mute);line-height:1.9;margin:14px 0 28px}

/* --- 診療案内のリスト（旧サイトに画像は無いのでテキストで組む） --- */
.menulist{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0 32px;
  list-style:none;margin:28px 0 0;padding:0;
}
.menulist li{border-bottom:1px solid var(--line)}
.menulist__link{
  display:flex;align-items:center;gap:10px;
  padding:16px 4px;
  color:var(--ink);font-size:15px;line-height:1.7;letter-spacing:.04em;
  transition:color .3s var(--ease);
}
.menulist__link::before{
  content:"";flex:none;
  width:6px;height:6px;
  border-top:1px solid var(--gold);
  border-right:1px solid var(--gold);
  transform:rotate(45deg);
}
.menulist__link:hover{color:var(--gold-deep);opacity:1}
@media (max-width:860px){.menulist{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px}}
/* スマホでも2列。1列だと縦に長くなりすぎる */
@media (max-width:560px){
  .menulist{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px}
  .menulist__link{padding:13px 2px;font-size:13px;gap:7px;line-height:1.5}
  .menulist__link::before{width:5px;height:5px}
}

/* 金色の背景の上に置くとき */
.menulist--onDark li{border-bottom-color:rgba(255,255,255,.4)}
.menulist--onDark .menulist__link{color:var(--white)}
.menulist--onDark .menulist__link::before{border-color:var(--white)}
.menulist--onDark .menulist__link:hover{color:var(--cream);opacity:.8}

/* --- 投稿一覧：本文 + サイドバー --- */
.postlist__layout{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:56px;align-items:start}
.postlist__side{position:sticky;top:110px}
@media (max-width:1000px){
  .postlist__layout{grid-template-columns:1fr;gap:48px}
  .postlist__side{position:static}
}

/* --- 投稿カード（旧実測: 白カード 260px / padding 20 15 25 / サムネ230x150 /
       タイトル 22px bold 金 行間30.8px / ボタン h50 枠線のみ） --- */
.postlist{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:30px 18px;list-style:none;margin:0;padding:0;
}
.postcard{
  display:flex;flex-direction:column;
  background:var(--white);
  padding:20px 15px 25px;
  transition:box-shadow .4s var(--ease),transform .4s var(--ease);
}
.postcard:hover{transform:translateY(-3px);box-shadow:0 8px 22px rgba(182,144,87,.16)}
.postcard__link{display:block;color:var(--ink)}
.postcard__media{
  aspect-ratio:230/150;overflow:hidden;background:var(--beige);margin-bottom:15px;
}
.postcard__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease)}
.postcard__link:hover .postcard__media img{transform:scale(1.05)}
.postcard__noimg{display:block;width:100%;height:100%;background:var(--beige)}
.postcard__title{
  font-family:var(--font-round);font-weight:700;
  font-size:20px;line-height:1.45;letter-spacing:.02em;
  color:var(--gold);margin:0 0 18px;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
}
.postcard__meta{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:13px;color:var(--ink-mute);margin:auto 0 20px;
}
.postcard__meta time{
  font-family:var(--font-display);letter-spacing:.04em;
  display:flex;align-items:center;gap:5px;
}
.postcard__meta time::before{
  content:"";width:12px;height:12px;flex:none;background:var(--gold);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%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='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center/contain no-repeat;
}
.postcard__cat{
  display:flex;align-items:center;gap:5px;
  color:var(--ink);font-size:13px;
}
.postcard__cat::before{
  content:"";width:12px;height:12px;flex:none;background:var(--gold);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M3 7h6l2 3h10v9H3z'/%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='%23000' stroke-width='2'%3E%3Cpath d='M3 7h6l2 3h10v9H3z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.postcard__more{margin:0}
.postcard__more .btn{
  min-width:0;width:100%;height:50px;padding:0;
  border-color:var(--gold-light);color:var(--gold-light);
  font-size:15px;letter-spacing:.1em;
}
.postcard__more .btn:hover{background:var(--gold-light);color:var(--white)}
@media (max-width:820px){.postlist{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.postlist{grid-template-columns:1fr;gap:20px}}

/* --- 症例のカテゴリ選択（旧サイトの「治療内容別・症例写真」） --- */
/* 症例一覧はパンくずのすぐ下から始めたいので、上余白を詰める */
.section--case{padding-top:28px}
.casecat{margin:0 0 24px}
.casecat__title{
  font-family:var(--font-mincho);font-weight:400;
  font-size:clamp(18px,2.2vw,22px);letter-spacing:.1em;
  text-align:center;margin:0 0 18px;
}
.casecat__title--list{margin:40px 0 20px;scroll-margin-top:100px}
.casecat__list{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;list-style:none;margin:0;padding:0;
}
.casecat__btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;min-height:52px;padding:10px 14px;
  border:1px solid var(--line);background:var(--white);
  color:var(--ink);text-align:center;cursor:pointer;
  font-family:var(--font-round);font-size:13px;line-height:1.5;letter-spacing:.02em;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.caselist__empty{padding:40px 0;text-align:center;color:var(--ink-mute)}
.casecat__btn:hover,
.casecat__btn.is-current{
  background:var(--gold);border-color:var(--gold);color:var(--white);opacity:1;
}
.casesearch{max-width:500px;margin:0 auto}
@media (max-width:900px){
  .casecat__list{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .casecat__btn{font-size:12.5px;min-height:48px;padding:9px 10px}
}
@media (max-width:480px){
  .casecat__list{grid-template-columns:1fr}
}

/* --- 症例一覧：左に画像・右に説明の横並び --- */
.caselist{list-style:none;margin:0;padding:0}
.caselist__item{
  display:grid;grid-template-columns:320px minmax(0,1fr);
  gap:30px;align-items:start;
  padding:32px 0;border-bottom:1px solid var(--line);
}
/* display 指定が hidden 属性に勝ってしまうので、明示的に打ち消す */
.caselist__item[hidden]{display:none}
.caselist__item:first-child{border-top:1px solid var(--line)}
.caselist__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--beige)}
.caselist__media img{width:100%;height:100%;object-fit:cover;display:block}

/* ビフォーアフターを横に並べる */
.caselist__media.is-pair{
  display:grid;grid-template-columns:1fr 1fr;gap:4px;
  background:transparent;overflow:visible;
}
.caselist__shot{position:relative;display:block;overflow:hidden;background:var(--beige)}
.caselist__media.is-pair .caselist__shot img{aspect-ratio:3/4;height:auto}
.caselist__badge{
  position:absolute;left:0;bottom:0;
  padding:3px 9px;
  background:rgba(63,63,63,.72);color:var(--white);
  font-family:var(--font-display);font-size:10px;letter-spacing:.08em;
}
.caselist__cat{
  display:inline-block;padding:4px 12px;border:1px solid var(--line);
  font-family:var(--font-round);font-size:11px;letter-spacing:.1em;color:var(--gold-deep);
  margin-bottom:10px;
}
.caselist__title{
  font-family:var(--font-mincho);font-weight:400;font-size:21px;
  letter-spacing:.08em;line-height:1.7;margin:0 0 12px;
}
.caselist__title a{color:var(--ink)}
.caselist__title a:hover{color:var(--gold-deep)}
.caselist__excerpt{font-size:14px;line-height:2;color:var(--ink-mute);margin:0 0 18px}
.caselist__more{margin:0}
@media (max-width:760px){
  .caselist__item{grid-template-columns:1fr;gap:16px}
}

/* --- 症例一覧：配慮が必要なものはサムネイルを出さず、文字の板にする --- */
.caselist__cover{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;padding:16px;
  background:var(--beige);
  border:1px solid var(--line);
  text-align:center;color:var(--ink-mute);
  transition:background .3s var(--ease);
}
.caselist__cover:hover{background:var(--cream);opacity:1}
.caselist__coverIcon{
  width:26px;height:26px;background:var(--gold-light);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19'/%3E%3Cpath d='M1 1l22 22'/%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='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19'/%3E%3Cpath d='M1 1l22 22'/%3E%3C/svg%3E") center/contain no-repeat;
}
.caselist__coverText{
  font-family:var(--font-round);font-size:13px;letter-spacing:.08em;color:var(--gold-deep);
}
.caselist__coverNote{font-size:11px;line-height:1.8;letter-spacing:.04em}


/* --- ページ送り --- */
.pagination{margin-top:56px}
.pagination .nav-links{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.pagination .page-numbers{
  display:flex;align-items:center;justify-content:center;
  min-width:42px;height:42px;padding:0 12px;
  border:1px solid var(--line);background:var(--white);
  font-family:var(--font-display);font-size:14px;color:var(--ink);
  transition:background .3s var(--ease),color .3s var(--ease);
}
.pagination .page-numbers:hover{background:var(--beige);opacity:1}
.pagination .page-numbers.current{background:var(--gold);border-color:var(--gold);color:var(--white)}
.pagination .page-numbers.dots{border:0;background:transparent}
.screen-reader-text{position:absolute;left:-9999px}

/* ============================================================
   12. フッター
   ============================================================ */
.ftr{background:var(--beige);border-top:1px solid var(--line);margin-top:auto;padding:64px 0 0}
.ftr__inner{display:grid;grid-template-columns:260px minmax(0,1fr);gap:56px;align-items:start}
.ftr__brand{flex:none}
.ftr__logo{height:38px;width:auto}
.ftr__addr{font-size:13px;color:var(--ink-mute);line-height:2;margin-top:14px}

/* サイトマップ型のフッターナビ（旧サイトと同じ構成） */
.ftr__sitemap{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:32px 26px;
}
.ftr__col{min-width:0}
.ftr__colTitle{
  display:block;
  font-family:var(--font-round);font-size:12.5px;font-weight:500;
  letter-spacing:.1em;color:var(--gold-deep);
  padding-bottom:8px;margin-bottom:8px;
  border-bottom:1px solid var(--line);
}
a.ftr__colTitle:hover{color:var(--gold);opacity:1}
.ftr__list{list-style:none;margin:0;padding:0}
.ftr__list li{margin:0}
.ftr__list a{
  display:block;padding:4px 0;
  font-size:12px;line-height:1.6;color:var(--ink-mute);
  word-break:auto-phrase;
}
.ftr__list a:hover{color:var(--gold-deep);opacity:1}

@media (max-width:1100px){
  .ftr__inner{grid-template-columns:1fr;gap:36px}
  .ftr__sitemap{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:760px){
  .ftr{padding-top:44px}
  .ftr__sitemap{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 18px}
  .ftr__list a{font-size:11.5px}
}
.ftr__copy{
  margin-top:48px;padding:18px 0;border-top:1px solid var(--line);
  text-align:center;font-family:var(--font-display);font-size:11px;
  letter-spacing:.14em;color:var(--ink-mute);
}