/*
 * 美容診療ページ モック用スタイル
 *
 * ─────────────────────────────────────────────
 * トンマナ
 * ─────────────────────────────────────────────
 *
 * **保険診療のページと同じ見せ方をしない。**
 * 美容は自由診療で、読む人も、比べられる相手も違う。
 *
 * 参考として挙がった X CLINIC（x-clinic.jp）を分解すると、
 * 効いているのは次の4つだった。装飾でも派手さでもない。
 *
 *   1. 和文が明朝（Noto Serif JP の 300〜500）。ゴシックはほぼ使わない
 *   2. 本文が小さい（13〜16px）。代わりに欧文の見出しを大きく置いて階層を作る
 *   3. 色面が少ない。白と余白で見せ、色は文字と細い罫にしか乗せない
 *   4. 余白が大きい。セクションの間が 100px を超える
 *
 * ここでも同じ4つをやる。**色は変えない。**
 * シンカラー #00909F はそのまま使い、置き場所を
 * 「ベタ塗りの面」から「文字と細い罫」へ移しただけにしてある。
 * 色まで変えるとシン・整形外科のページに見えなくなる。
 *
 * ─────────────────────────────────────────────
 * 書体について（以前の方針からの変更）
 * ─────────────────────────────────────────────
 *
 * **当初は「フォントを指定しない（テーマの Noto Sans JP を継承する）」としていた。**
 * ヘッダー・フッターと書体が変わって浮くため、というのが理由だった。
 *
 * これを変更する。美容だけ書体を変えるのは「浮く」のではなく「区切る」ためで、
 * 自由診療の区画に入ったことが見た目で分かる方が、利用者にとっても正しい。
 * ただし**中途半端に混ぜない**こと。混在させると事故に見える。
 *
 *   見出し・施術名・リード・料金・ラベル → 明朝（Noto Serif JP）
 *   長い説明文・注意書き               → ゴシックのまま（読ませるものは可読性を優先）
 *
 * ヘッダーとフッターはテーマ共通で全ページに影響するため触っていない。
 * 書体が変わるのは <article class="beauty"> の中だけ。
 *
 * ─────────────────────────────────────────────
 * ここで定義しないもの
 * ─────────────────────────────────────────────
 *
 * カード（.card_02）・料金（.free-price）・FAQ（.faq_box）の**構造**は
 * テーマ側のものをそのまま使う。ここでは外観だけを上書きしている。
 * マークアップを増やしていないので、実装時もテーマの部品のまま組める。
 */

.beauty {
  --c: #00909F;          /* シンカラー。面ではなく文字と罫に使う */
  --c-deep: #00707C;
  --ink: #23292B;        /* 見出し・施術名 */
  --ink-soft: #5C686B;   /* 本文 */
  --ink-faint: #93A0A2;  /* 日付・注記 */
  --line: #E4E9E9;       /* 細罫 */
  --mist: #EDF5F6;
  --paper: #F7FAFA;

  --serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --serif-en: "Cormorant Garamond", "Noto Serif JP", serif;
  --sans: "Noto Sans JP", -apple-system, sans-serif;
}

.beauty,
.beauty h1,
.beauty h2,
.beauty h3 {
  font-family: var(--serif);
  color: var(--ink);
}

.beauty img { max-width: 100%; height: auto; }

/* ---------- ページ冒頭 ---------- */

/*
 * **テーマ共通のヘッダー画像を使わない。**
 * .pagetitle の背景はテーマが全ページ共通で持っている診療風景の写真で、
 * 美容のページに載せると「別の診療の写真の上に美容と書いてある」状態になる。
 * 画像を替えれば済む話ではあるが、美容の写真は用意できていない。
 *
 * 写真を敷かずに、余白と書体だけで入り口を作る。X CLINIC も下層ページは
 * 写真を大きく見せるか、置かないかのどちらかで、写真の上に見出しを重ねていない。
 *
 * 美容用の写真が用意できたら、.beauty .pagetitle に background を戻し、
 * 文字色を白へ、オーバーレイを rgba(35,41,43,.45) 程度で敷く。
 * その場合も高さは 300px のままにせず、420px 前後まで伸ばすこと。
 */
.beauty .pagetitle {
  height: auto;
  min-height: 0;
  background: none;
  color: var(--ink);
  padding: 104px 20px 0;
  /*
   * テーマは背景画像の帯の下に 52px の margin を持たせている。
   * ここでは背景を外し、下の余白はパンくずとセクション側で作っているので、
   * 残すと二重になる（見出しの下だけが極端に空く）。
   */
  margin-bottom: 0;
  display: block;
  text-align: center;
}

.beauty .pagetitle > div { display: block; }

/*
 * 欧文は**ラベル**として小さく置き、h1 を主役にする。
 *
 * セクション見出し（h2）はこの逆で、欧文を大きく出している。
 * 役割が違うため揃えていない。h2 は区切りなので単語（MENU / CASE）で足りるが、
 * ページ冒頭の h1 には「眉間のシワが気になる 40代女性」のような
 * **文が入る。** ここを小さくすると、ページの主題が読めなくなる。
 */
.beauty .pagetitle .en {
  font-family: var(--serif-en);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .3em;
  line-height: 1;
  text-indent: .3em;          /* letter-spacing の分だけ中心がずれるのを戻す */
  color: var(--ink-faint);
}

.beauty .pagetitle h1 {
  max-width: 820px;
  margin: 22px auto 0;
  font-size: 30px;
  font-weight: 400;
  letter-spacing: .1em;
  line-height: 1.75;
  color: var(--ink);
}

.beauty .pagetitle .read {
  font-size: 15px;
  font-weight: 400;
  line-height: 2.3;
  letter-spacing: .06em;
  color: var(--ink-soft);
  margin-top: 20px;
}

/* パンくずはヘッダーの直下、見出しの上に細く置く（2026-10-22 院の希望で見出しの下から移した）。 */
.beauty .pankz {
  max-width: 1200px;
  margin: 20px auto 0;
  padding: 0 30px;
  font-size: 12px;
  color: var(--ink-faint);
  letter-spacing: .06em;
}

.beauty .pankz a { color: var(--ink-faint); }

.beauty .pankz + .pagetitle { padding-top: 72px; }

.beauty .pagetitle + section { padding-top: 96px; }

/* 症例ページは見出しの直下に施術タグが来るので詰める */
.beauty--case .pagetitle + section { padding-top: 16px; }
/* テーマが見出しの下に白い線（::after、上下 margin 20px）を引いている。白背景では見えず余白だけ残るので消す */
.beauty--case .pagetitle h1::after { display: none; }

/*
 * モバイルの左右余白は **20px で統一する。**
 * カード一覧・記事・症例・料金表がそれぞれ別の値を持っていると、
 * 画面が狭いぶん端の食い違いがそのまま見える。
 * 記事（.beauty-article）と コラム一覧（.beauty-arts）の 20px に他を合わせた。
 */
@media (max-width: 768px) {
  .beauty .pagetitle { padding: 48px 20px 0; }
  .beauty .pagetitle .en { font-size: 12px; }
  .beauty .pagetitle h1 { font-size: 21px; margin-top: 16px; line-height: 1.8; }
  .beauty .pagetitle .read { font-size: 14px; margin-top: 16px; }
  /* パンくず（.pankz pc）はモバイルで display:none になる。見出しの上余白はテーマの 48px のまま */
  .beauty .pankz + .pagetitle { padding-top: 48px; }

  .beauty .pagetitle + section { padding-top: 44px; }
  /* 症例ページは見出しの直下に施術タグが来る。院の希望で詰める（2026-10-22） */
  .beauty--case .pagetitle + section { padding-top: 8px; }
  /*
   * 症例の見出しは1行（改行を指定したときは1行ずつ）に収める。院の希望（2026-10-22）。
   * 18文字が左右 20px の余白の内側に入る大きさまで、画面幅に合わせて小さくする。
   */
  .beauty--case .pagetitle h1 {
    font-size: min(21px, calc((100vw - 40px) / 20));
    letter-spacing: .06em;
  }
}

/* ---------- セクション ---------- */

/*
 * 余白はテーマの 80px より広く取る。
 * 施術・症例・コラムはそれぞれ性質が違い、詰めると1つの表に見える。
 */
.beauty section { padding-bottom: 112px; }
.beauty section:last-of-type { padding-bottom: 128px; }

@media (max-width: 768px) {
  .beauty section { padding-bottom: 68px; }
  .beauty section:last-of-type { padding-bottom: 76px; }
}

/* ---------- セクション見出し ---------- */

/*
 * テーマの h2 は「32px のティール太字」＋「小さな英字」。
 * 太く大きい和文が画面の主役になり、美容では重く見える。
 * 主役を欧文へ移し、和文は小さく字間を開いて添える。
 */
.beauty .site_contents h2,
.beauty h2 {
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: .3em;
  text-indent: .3em;
  line-height: 1;
  color: var(--ink-faint);
  text-align: center;
  margin-bottom: 46px;
}

.beauty h2 .en {
  display: block;
  font-family: var(--serif-en);
  font-size: 40px;
  font-weight: 400;
  letter-spacing: .16em;
  text-indent: .16em;
  line-height: 1;
  color: var(--ink);
  margin-bottom: 16px;
}

@media (max-width: 768px) {
  .beauty h2 { font-size: 13px; margin-bottom: 30px; }
  .beauty h2 .en { font-size: 30px; margin-bottom: 12px; }
}

/*
 * セクションの導入文は、下のカードグリッドと左右を揃える。
 * 揃えないと、文章だけがカードより外側まで広がって端が食い違う。
 * 幅と余白はテーマの .treatment-list（max-width:1200px / padding:0 30px）に合わせる。
 */
.beauty-sec-lead {
  max-width: 1200px;
  margin: 0 auto 40px;
  padding: 0 30px;
  text-align: center;
  font-size: 14px;
  line-height: 2.2;
  letter-spacing: .05em;
  color: var(--ink-soft);
}

@media (max-width: 768px) {
  .beauty-sec-lead {
    padding: 0 16px;
    margin-bottom: 26px;
    text-align: left;
    font-size: 13px;
  }
}

/* ---------- カードの並び ---------- */

/*
 * テーマのグリッドは gap: 30px 40px だが、各カードを包む .l-wrapper_02 に
 * margin: 1rem が付いており、これが gap に上乗せされる（実質 縦62px・横72px）。
 * 6枚並べると間延びするため、包み側の margin を消して gap だけで制御する。
 */
.beauty .treatment-list { gap: 56px 40px; }

.beauty .treatment-list .l-wrapper_02 {
  margin: 0;
  display: block;
  height: 100%;
  /* 枠と影を外す。カードを箱として見せず、写真と文字だけで並べる。 */
  border-radius: 0;
  box-shadow: none;
}

/* カードの高さを揃え、「詳しく見る」の位置を横一線にする。
   説明文の行数が施術ごとに違うため、これが無いとボタンがばらつく。 */
.beauty .treatment-list .l-wrapper_02 > a { display: block; height: 100%; }

.beauty .treatment-list .card_02 {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: transparent;
  text-align: left;
}

/*
 * **見出し帯をやめ、写真を先頭へ出す。**
 * テーマのカードは「ティールのベタ帯に施術名 → 写真」の順で、
 * 6枚並ぶと帯の色面が画面を占める。美容では写真が主役になるべきなので、
 * DOM は変えずに column-reverse で写真を上へ、施術名を下へ入れ替える。
 */
.beauty .treatment-list .card__header_02 {
  display: flex;
  flex-direction: column-reverse;
}

.beauty .treatment-list .card__title_02 {
  background: transparent;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: .06em;
  line-height: 1.65;
  padding: 20px 0 0;
  text-align: left;
}

/*
 * 本文を伸縮させてボタンを下端へ落とす。さらに本文の中でも料金を下端へ寄せる。
 * 説明文の行数が施術ごとに違うため、これが無いと料金の位置が隣のカードとずれる。
 */
.beauty .treatment-list .card__body_02 {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  background: transparent;
  padding: 10px 0 0;
}

/*
 * テーマの .card__text2_02 は 19px / bold。
 * 「関節の痛みや症状、交通事故外来まで対応」のような短いキャッチ用の設定で、
 * 施術の説明文を流し込むと大きすぎて粗く見える。
 * 説明文は読ませるものなので、ここだけゴシックのままにする。
 */
.beauty .treatment-list .card__text2_02 {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 400;
  line-height: 2;
  letter-spacing: .04em;
  color: var(--ink-soft);
}

/*
 * 部位（子）を持つ施術（ボトックスなど）は、カードに対応部位を並べる。
 * 札は折り返して並ぶ。料金は margin-top:auto で下端に寄るので、札の有無で隣のカードとずれない。
 * テーマのリスト装飾が当たらないよう、ul/li ではなく div/span で組んでいる。
 */
/* 下の余白が無いと、折り返した「ほか◯部位」が料金の上罫線に接する */
.beauty .treatment-list .card__parts_02 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  margin-bottom: 14px;
}

.beauty .treatment-list .card__parts_02 span {
  font-family: var(--sans);
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: .04em;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  padding: 1px 8px;
}

.beauty .treatment-list .card__parts_02 .lbl {
  border: none;
  padding: 0 2px 0 0;
  color: var(--ink-faint);
}

/* 上限を超えた部位は「ほか◯部位」にまとめる。札と見分けがつくよう枠を付けない */
.beauty .treatment-list .card__parts_02 .more {
  border: none;
  padding: 0;
  color: var(--ink-faint);
}

/*
 * 札は画面幅にかかわらず1行に収める（PC は3つ、スマホは2つ）。2行に折り返すと、
 * 札の無い隣のカードとの高さの差が広がって並びが崩れる。
 * 「ほか◯部位」の数が幅で変わるので、PC 用（.is-pc）とスマホ用（.is-sp）を両方出して切り替える
 */
.beauty .treatment-list .card__parts_02 .is-sp { display: none; }

@media (max-width: 768px) {
  .beauty .treatment-list .card__parts_02 { gap: 4px; margin-top: 10px; margin-bottom: 10px; }
  .beauty .treatment-list .card__parts_02 span { font-size: 10px; padding: 1px 6px; }
  /* 幅が足りないので見出しは出さない。「ほか◯部位」で部位の話だと分かる */
  .beauty .treatment-list .card__parts_02 .lbl,
  .beauty .treatment-list .card__parts_02 .is-pc { display: none; }
  .beauty .treatment-list .card__parts_02 .is-sp { display: inline-block; }
}

/* margin-top はここで指定しない。下端寄せ（margin-top:auto）を打ち消してしまう。 */
.beauty .treatment-list .card__price_02 {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--c-deep);
  line-height: 1.6;
}

/*
 * ボタンの枠を外す。
 * 6枚のカードに 2px のティール枠が並ぶと、枠だけが目に入る。
 * 文字と矢印だけにして、面積を持たせない。
 */
/*
 * **矢印を出さない。** テーマの矢印は :after の絶対配置（right 起点）で、
 * ボタンを全幅にすると矢印だけがカードの右端まで飛んでいく。
 * 位置を直せば収まるが、矢印そのものを使わない方針にしたので消す。
 * 押せることは、文字の下の細い罫とホバーで示す。
 */
.beauty .treatment-list .card__body_btn {
  display: inline-block;
  border: none;
  border-bottom: 1px solid var(--line);
  background: none;
  width: auto;
  align-self: flex-start;
  margin-top: 16px;
  padding: 0 0 7px;
  font-family: var(--serif);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .16em;
  color: var(--ink);
  text-align: left;
  transition: border-color .2s, color .2s;
}

.beauty .treatment-list .card__body_btn:after { display: none; }

.beauty .treatment-list a:hover .card__title_02 { color: var(--c-deep); }

.beauty .treatment-list a:hover .card__body_btn {
  border-bottom-color: var(--c);
  color: var(--c-deep);
}

/*
 * スマートフォン。
 *
 * テーマ側は .treatment-list にモバイル用のグリッド指定が無く、カードが
 * 縦一列・全幅で積まれる。診療内容ページはカード3枚なので成立するが、
 * 美容は6枚あり、1枚ずつ全画面で流れると一覧として機能しない。
 */
@media (max-width: 768px) {
  .beauty .treatment-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 34px 18px;
    padding: 0 20px;
  }

  /*
   * 見出し帯を廃したので、帯の高さを固定する必要は無くなった。
   * ただし施術名は1行のものと2行のものが混ざるため、行数ぶんの高さを確保して
   * その下（説明文・料金）の開始位置を揃える。
   */
  .beauty .treatment-list .card__title_02 {
    font-size: 14px;
    padding: 14px 0 0;
    line-height: 1.5;
    min-height: calc(1.5em * 2 + 14px);
  }

  /*
   * テーマはモバイルでカード本文を中央寄せにする。
   * 施術名（左寄せ）と説明文（中央寄せ）が食い違うので、左に揃え直す。
   */
  .beauty .treatment-list .card__body_02 { padding: 8px 0 0; text-align: left; }
  .beauty .treatment-list .card__text2_02 { font-size: 12px; line-height: 1.9; text-align: left; }
  .beauty .treatment-list .card__price_02 { font-size: 13px; padding-top: 10px; text-align: left; }

  .beauty .treatment-list .card__body_btn {
    margin-top: 12px;
    padding: 0 0 6px;
    font-size: 12px;
    width: auto;
  }

  /* 全幅の 4:3 は縦に伸びすぎる */
  .beauty .beauty-ph--thumb { aspect-ratio: 3 / 2; }
  .beauty .beauty-ph { font-size: 10px; }

  /*
   * 症例セクションだけ左右の余白を持つ要素が無く、画面端に接していた。
   * 施術メニューは .treatment-list、コラムは .beauty-arts、記事ページは
   * .beauty-article がそれぞれ余白を持っている。
   */
  .beauty #beauty-case {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* 症例のタイトルは画面幅いっぱいに近く、19px だと窮屈になる。 */
  .beauty-caselink__cap { font-size: 17px; margin-bottom: 18px; }
  .beauty-caselink__meta { margin-bottom: 10px; }
}

/* 目次から飛んだ見出しが固定ヘッダーの裏に隠れないようにする。 */
.beauty [id] { scroll-margin-top: 130px; }

@media (max-width: 768px) {
  .beauty [id] { scroll-margin-top: 30vw; }

}

/* ---------- 写真 ---------- */

/*
 * アスペクト比は .beauty-ph--thumb / --square 側が持っている（枠と共通）。
 * 写真と枠でレイアウトが変わらないので、差し替えても崩れない。
 */
.beauty-img {
  display: block;
  width: 100%;
  object-fit: cover;
  background: var(--paper);
}

/*
 * アスペクト比のユーティリティ。写真（.beauty-img）に併記して使う。
 * CMS 側で画像は必須なので、モックにあった「枠だけ」の表示は持たない。
 */
.beauty-ph--thumb { aspect-ratio: 4 / 3; }
.beauty-ph--square { aspect-ratio: 1 / 1; }

/* ---------- 症例の一覧 ---------- */

/*
 * 1件が「写真 → 必須表示」で1組になる。3件並べば必須表示も3回出る。
 * 組の切れ目が分かるよう、間隔はセクション内で最も大きく取る。
 */
.beauty-cases {
  display: flex;
  flex-direction: column;
  gap: 88px;
}

@media (max-width: 768px) {
  .beauty-cases { gap: 56px; }
}

/* ---------- ビフォーアフター（テーマに無い） ---------- */

/*
 * 幅は同じ症例の必須表示（720px）に合わせる。写真だけ狭いと、端が食い違って見える。
 * 症例ページでは本文の幅いっぱい（下の .beauty-article 側）。写真がそのページの主役なので小さくしない。
 */
.beauty-ba {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  max-width: 720px;
  margin: 0 auto;
}

.beauty-article .beauty-ba,
.beauty-article .beauty-ba__angle { max-width: none; }

/*
 * モニター価格の案内。料金表の下に、期間限定の話だと分かる見た目で置く。
 * 実施していない間は出力そのものが無い（管理画面の項目を空にする）。
 */
.beauty-monitor {
  margin: 14px 0 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 14px;
  line-height: 1.9;
  color: var(--ink);
}

.beauty-ba__item { background: #fff; }

/*
 * 同じ方を複数の角度で載せるときの、組の見出し（正面・横から・斜めから）。
 * 見出しが無い組（1組だけの症例）では出ない。
 */
/*
 * 写真2枚をまとめる見出しなので、注記（12〜13px）より一段上に置く。
 * BEFORE / AFTER は写真そのもののラベルなので 13px のまま。
 */
.beauty-ba__angle {
  max-width: 720px;
  margin: 34px auto 10px;
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .1em;
  text-align: center;
  color: var(--ink);
}

.beauty-ba + .beauty-ba { margin-top: 16px; }

.beauty-ba__label {
  font-family: var(--serif-en);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .24em;
  text-indent: .24em;
  padding: 10px 10px 0;
  text-align: center;
  color: var(--ink-soft);
}

/* AFTER は塗らずに、文字色だけで差をつける。 */
.beauty-ba__label.after { background: none; color: var(--c-deep); }

a.beauty-caselink { display: block; text-decoration: none; color: inherit; max-width: 720px; margin: 0 auto; }
/* 矢印を外したぶん、押せることはホバーの下線で示す。 */
a.beauty-caselink:hover .beauty-caselink__cap {
  color: var(--c-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 7px;
}

/*
 * タイトルは写真より先に置く。
 * 後ろに置くと「何の症例か分からないまま写真を見る」順序になる。
 */
.beauty-caselink__meta {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-faint);
  margin-bottom: 12px;
}

.beauty-caselink__cap {
  text-align: center;
  /* 「…30代女 / 性」のような割れ方を避ける。 */
  text-wrap: balance;
  margin-bottom: 24px;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--ink);
  line-height: 1.7;
  transition: color .2s;
}

/* リンクであることは、写真とホバーの色変化で示す。矢印は付けない。 */

/* ---------- 必須表示ブロック（テーマに無い） ---------- */

/*
 * ここは**読ませるための枠**であって、飾りではない。
 * 医療広告ガイドラインの限定解除要件を満たすための表示なので、
 * トンマナに寄せて薄くしすぎない。中身はゴシックのままにしてある。
 */
.beauty-disc {
  margin: 40px auto 0;
  max-width: 720px;
  border-top: 1px solid var(--c);
  border-bottom: 1px solid var(--line);
  background: #fff;
  text-align: left;
}

.beauty-disc__h {
  padding: 14px 4px;
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .1em;
  color: var(--c-deep);
  border-bottom: 1px solid var(--line);
}

.beauty-disc dl { margin: 0; }

.beauty-disc__row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 14px;
  padding: 14px 4px;
  font-family: var(--sans);
  font-size: 13px;
  border-bottom: 1px solid var(--line);
  line-height: 1.95;
}

.beauty-disc__row:last-child { border-bottom: none; }
.beauty-disc__row dt { color: var(--ink-faint); font-weight: 700; font-size: 12px; letter-spacing: .06em; }
.beauty-disc__row dd { margin: 0; color: var(--ink-soft); }

/*
 * 記事（施術・症例・コラムの各ページ）の中では、本文の幅に合わせる。
 * 上の 720px はトップの症例カード用で、記事の中（820px）に置くと左右が内側へずれ、
 * 直前の見出しの下線と端が食い違う。
 */
.beauty-article .beauty-disc { max-width: none; }

/*
 * トップの症例。**必須表示は省けない**（術前術後の写真と同じ画面に要る）ので、
 * 減らすのではなく詰める。1行＝ラベル＋値。スマホでも縦積みにしない。
 * 症例ページ側は読ませる場所なので、ここでは変えない。
 */
.beauty-case--compact .beauty-disc { margin-top: 24px; }
.beauty-case--compact .beauty-disc__h { padding: 10px 4px; font-size: 13px; }

.beauty-case--compact .beauty-disc__row {
  grid-template-columns: 8.5em 1fr;
  gap: 10px;
  padding: 7px 4px;
  font-size: 12px;
  line-height: 1.75;
}

.beauty-case--compact .beauty-disc__row dt { font-size: 11px; }

@media (max-width: 768px) {
  .beauty-case--compact .beauty-disc__row { grid-template-columns: 6.5em 1fr; gap: 8px; }
}

/* ---------- 記事パーツ（テーマに無い） ---------- */

.beauty-article { max-width: 860px; margin: 0 auto; padding: 0 20px; }

.beauty-lead {
  font-size: 17px;
  font-weight: 400;
  line-height: 2.2;
  letter-spacing: .05em;
  color: var(--ink);
  margin: 0 0 44px;
}

/*
 * 見出し帯の色面をやめる。
 * ミスト地に太い左罫だと、記事の中でそのブロックだけが浮く。
 * 明朝の見出しと細い下罫だけにして、余白で段落を切る。
 */
.beauty-band {
  background: none;
  border: none;
  border-bottom: 1px solid var(--line);
  padding: 0 0 14px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: .08em;
  line-height: 1.6;
  color: var(--ink);
  margin: 64px 0 26px;
}

.beauty-toc {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 22px 4px;
  margin: 0 0 40px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 15px;
}

/* 「目次」は和文なので、欧文ラベル用の書体は当てない。 */
.beauty-toc .lbl {
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: .24em;
  text-indent: .24em;
  font-weight: 500;
  color: var(--ink-faint);
  margin-bottom: 6px;
}

.beauty-toc a { color: var(--ink-soft); text-decoration: none; letter-spacing: .04em; }
.beauty-toc a:hover { color: var(--c-deep); }
.beauty-toc .no {
  font-family: var(--serif-en);
  font-size: 14px;
  color: var(--c);
  font-weight: 500;
  padding-right: 10px;
}

/* 記事の中の画像。4:3 だと本文幅いっぱいで縦に伸びすぎ、写真だけの画面になる。 */
.beauty-article .beauty-ph--thumb { aspect-ratio: 16 / 9; }

/* ---------- テーマの部品を記事に馴染ませる ---------- */

/*
 * 料金表（.free-price）と FAQ（.faq_box）はテーマの部品をそのまま使っている。
 * 書体は .beauty の指定を継承して明朝になるが、**寸法はテーマのまま**で、
 * どちらも 18px・幅 900px と、記事本文（820px）より大きく・広い。
 * 記事の中に置くとそこだけ張り出して見えるので、寸法だけ合わせる。
 */
.beauty .free-price {
  max-width: 820px;
  font-size: 16px;
  border-bottom-color: var(--line);
}

.beauty .free-price .ttl {
  background: var(--paper);
  font-size: 15px;
  letter-spacing: .04em;
}

.beauty .free-price .info { font-size: 15px; letter-spacing: .04em; }

/* ---------- 料金表（施術ページ・テーマに無い） ---------- */

/*
 * テーマの .free-price（左に灰色の見出し・右に中央揃えの金額）は、部位ごとに区分が並ぶと
 * 金額の位置が揃わず、上下で見比べにくい。施術ページは「部位・内容・料金」の表にする。
 * 金額は右揃え・等幅数字。部位名は部位のページへのリンク（矢印は付けない）。
 * 部位を持たない施術と部位のページは「内容・料金」だけ（--flat）。
 * スマホは部位を見出しにして、その下に内容と料金を並べる。
 */
.beauty-prices { border-top: 1px solid var(--c); }

.beauty-prices__group {
  display: grid;
  grid-template-columns: 11em 1fr;
  gap: 0 28px;
  padding: 16px 4px;
  border-bottom: 1px solid var(--line);
}

.beauty-prices--flat .beauty-prices__group { grid-template-columns: 1fr; padding: 0; }

/*
 * 部位の無い表は、内容と料金が本文幅の両端に離れる。行ごとに罫を引き、罫をたどって横に読めるようにする
 */
.beauty-prices--flat .beauty-prices__row {
  padding: 12px 4px;
  border-bottom: 1px solid var(--line);
}

.beauty-prices--flat .beauty-prices__row:last-child { border-bottom: none; }

.beauty-prices--flat .beauty-prices__row + .beauty-prices__row { margin-top: 0; }

.beauty-prices__part {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .06em;
  line-height: 1.8;
  color: var(--ink);
}

.beauty-prices__rows { margin: 0; }

.beauty-prices__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  line-height: 1.8;
}

.beauty-prices__row + .beauty-prices__row { margin-top: 6px; }

.beauty-prices__row dt {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 400;
  color: var(--ink-soft);
}

.beauty-prices__row dd {
  margin: 0;
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--c-deep);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.beauty-prices__notes {
  margin: 12px 0 0;
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.9;
  color: var(--ink-faint);
}

@media (max-width: 768px) {
  .beauty-prices__group { grid-template-columns: 1fr; gap: 6px; padding: 14px 0; }
  .beauty-prices__part { font-size: 14px; }
  .beauty-prices__row dt { font-size: 13px; }
  .beauty-prices__row dd { font-size: 14px; }
}

.beauty .nintei-no {
  max-width: 820px;
  margin: 10px auto 0;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-faint);
}

/*
 * テーマの料金表はモバイルで左右の余白を持たず、画面端に接する。
 * 記事本文が 20px 空いているので、料金表と注記だけが外側へ張り出して見える。
 */
@media (max-width: 768px) {
  .beauty .free-price,
  .beauty .nintei-no {
    width: auto;
    margin-left: 20px;
    margin-right: 20px;
  }
  /* 記事の中（写真の注記など）は .beauty-article が 20px を持つので、二重に空けない */
  .beauty .beauty-article .nintei-no {
    margin-left: 0;
    margin-right: 0;
  }
}

/*
 * トップの施術欄では、カードの下の注記と案内をカードの列と端で揃える。
 * 列はテーマの .treatment-list.col3（max-width:1000px / padding:0 30px）。
 * 既定の .nintei-no（820px）と .beauty-article（860px）のままだと、カードより内側に寄って食い違う。
 */
.beauty #beauty-menu .nintei-no,
.beauty #beauty-menu .beauty-article {
  box-sizing: border-box;
  max-width: 1000px;
  padding-left: 30px;
  padding-right: 30px;
}

.beauty #beauty-menu .beauty-article { margin-top: 20px; }

@media (max-width: 768px) {
  .beauty #beauty-menu .nintei-no,
  .beauty #beauty-menu .beauty-article {
    margin-left: 0;
    margin-right: 0;
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* FAQ はテーマ既存の .faq_box を使う（独自に持たない）。
   記事の中に置くと上下の余白が足りないため、そこだけ足す。 */
.beauty .faq { margin-bottom: 40px; }

.beauty .faq_box { border-bottom-color: var(--line); }

.beauty .faq_box .question {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .04em;
}

.beauty .faq_box .answer {
  background: var(--paper);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 2;
  color: var(--ink-soft);
}

.beauty-p {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 2.1;
  letter-spacing: .04em;
  color: var(--ink-soft);
  margin: 0 0 20px;
}

.beauty-p a { color: var(--c-deep); }

/* ---------- 次へ進む導線（一覧へ／戻る） ---------- */

/*
 * **矢印の文字（← →）は使わない。**
 *
 * リンクの前後に置く矢印は、テキストの中に記号が混ざるぶん行が乱れ、
 * 書体を明朝に寄せた画面では特に浮く。同じ役割は、枠と字間で足りる。
 * 方向（戻る／進む）はパンくずと文言が示していて、記号で補う必要がない。
 */
.beauty-more {
  margin: 56px 0 0;
  text-align: center;
}

.beauty-more a {
  display: inline-block;
  min-width: 300px;
  padding: 17px 40px;
  border: 1px solid var(--line);
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: .18em;
  text-indent: .18em;   /* letter-spacing の分だけ中心がずれるのを戻す */
  color: var(--ink);
  text-decoration: none;
  transition: border-color .2s, color .2s;
}

.beauty-more a:hover {
  border-color: var(--c);
  color: var(--c-deep);
}

@media (max-width: 768px) {
  .beauty-more { margin-top: 40px; }

  .beauty-more a {
    display: block;
    min-width: 0;
    padding: 15px 20px;
    font-size: 13px;
  }
}

/* 未入力の項目。実装時は入力必須になり、空のままでは公開できない。 */
.beauty-empty {
  font-family: var(--sans);
  color: var(--ink-faint);
  font-size: 14px;
  background: var(--paper);
  border: 1px dashed var(--line);
  padding: 16px 18px;
  margin: 0 0 20px;
}

/* ---------- コラム一覧（テーマに無い） ---------- */

.beauty-arts { max-width: 860px; margin: 0 auto; padding: 0 20px; }

.beauty-art {
  display: flex;
  gap: 24px;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
  align-items: center;
}

.beauty-art:first-child { border-top: 1px solid var(--line); }

/* 枠（.beauty-ph）と写真（.beauty-img）で同じ幅にする。差し替えても列がずれない。 */
.beauty-art .beauty-ph,
.beauty-art .beauty-img { width: 132px; flex: none; }
.beauty-art__body { display: flex; flex-direction: column; gap: 10px; min-width: 0; text-align: left; }

.beauty-art__meta {
  display: flex;
  gap: 12px;
  align-items: center;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-faint);
}

/* カテゴリはベタ塗りにしない。細罫の小さなラベルにする。 */
.beauty-art__cat {
  background: none;
  border: 1px solid var(--line);
  color: var(--c-deep);
  font-weight: 400;
  letter-spacing: .08em;
  padding: 3px 10px;
}

.beauty-art__title {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: .05em;
  color: var(--ink);
}

.beauty-art__lead { font-family: var(--sans); font-size: 13px; color: var(--ink-faint); line-height: 1.9; }

a.beauty-art { text-decoration: none; color: inherit; transition: opacity .2s; }
a.beauty-art:hover { background: none; opacity: .62; }

/* カテゴリ絞り込み。実装時は taxonomy のアーカイブリンクになる。 */
.beauty-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 34px;
}

.beauty-cats a,
.beauty-cats span {
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: .08em;
  padding: 7px 18px;
  border: 1px solid var(--line);
  border-radius: 0;
  color: var(--ink-soft);
  text-decoration: none;
  transition: border-color .2s, color .2s;
}

.beauty-cats a:hover { border-color: var(--c); color: var(--c-deep); }

.beauty-cats .on {
  background: none;
  border-color: var(--c);
  color: var(--c-deep);
  font-weight: 500;
}

/* 記事末尾の関連施術 */
a.beauty-related {
  display: flex;
  gap: 20px;
  align-items: center;
  border: none;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 20px 4px;
  text-decoration: none;
  color: inherit;
  transition: opacity .2s;
}

a.beauty-related:hover { opacity: .62; }
.beauty-related .beauty-ph,
.beauty-related .beauty-img { width: 132px; flex: none; }
.beauty-related__body { display: flex; flex-direction: column; gap: 8px; }
.beauty-related__title {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: .05em;
}
.beauty-related__price {
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 500;
  color: var(--c-deep);
  letter-spacing: .04em;
}

@media (max-width: 768px) {
  .beauty-disc__row { grid-template-columns: 1fr; gap: 3px; }
  /*
   * サムネを縦中央に置くと、タイトルとリードで3行以上になったとき
   * サムネだけが宙に浮いて見える。上端で揃える。
   */
  .beauty-art { gap: 16px; padding: 20px 0; align-items: flex-start; }

  /* サムネを小さくして、タイトルの折り返しを1行ぶん減らす。 */
  .beauty-art .beauty-ph,
  .beauty-art .beauty-img { width: 84px; }

  /*
   * リード文は2行で打ち切る。
   * 幅 250px しか残らないため、そのままだと4行になってタイトルが埋もれる。
   */
  .beauty-art__lead {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .beauty-art__title { font-size: 15px; }
  .beauty-band { font-size: 18px; margin: 46px 0 20px; }
  .beauty-lead { font-size: 15px; margin-bottom: 32px; }
  .beauty-related .beauty-ph,
  .beauty-related .beauty-img { width: 96px; }
}

/* ---------- コラム本文（ブロックエディタ） ---------- */

/*
 * 書き手は管理画面で見出し（h2）と段落を置くだけ。
 * ここで記事パーツ（見出し帯・本文・リスト）の見た目に揃える。
 * クラスを書かせない代わりに、要素へ直接当てる。
 */
.beauty-body h2 {
  background: none;
  border: none;
  border-bottom: 1px solid var(--line);
  padding: 0 0 14px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: .08em;
  line-height: 1.6;
  color: var(--ink);
  margin: 64px 0 26px;
  text-align: left;
}

.beauty-body h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: .06em;
  color: var(--ink);
  margin: 36px 0 14px;
}

.beauty-body p {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 2.1;
  letter-spacing: .04em;
  color: var(--ink-soft);
  margin: 0 0 20px;
}

.beauty-body a { color: var(--c-deep); }

.beauty-body ul,
.beauty-body ol {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 2.1;
  color: var(--ink-soft);
  margin: 0 0 20px;
  padding-left: 1.6em;
}

.beauty-body img { max-width: 100%; height: auto; }

@media (max-width: 768px) {
  .beauty-body h2 { font-size: 18px; margin: 46px 0 20px; }
  .beauty-body h3 { font-size: 16px; }
}

/* ---------- ページ送り（テーマにスタイルが無い） ---------- */

.beauty .pagination {
  margin-top: 48px;
  text-align: center;
  font-family: var(--serif);
  font-size: 14px;
}

.beauty .pagination .page-numbers {
  display: inline-block;
  min-width: 38px;
  padding: 8px 6px;
  margin: 0 3px;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  text-decoration: none;
}

.beauty .pagination .page-numbers.current {
  border-color: var(--c);
  color: var(--c-deep);
}