@charset "UTF-8";
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd {
  margin: 0;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  padding: 0;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

address {
  font-style: normal;
}

:focus-visible {
  outline: 3px solid currentcolor;
  outline-offset: 2px;
}

/*
 * ⚠️ **ヘッダーだけ別のブレークポイント**（2026-09-09）。
 *    PC のヘッダーは ロゴ 403 ＋ TEL ＋ ボタン 2 つ ＋ グローバルナビ で **1394px** 必要で、
 *    1024〜1400px の画面では**横スクロールが出ていた**（1366 などのノート PC が該当）。
 *    デザインは 1920 しか無く 1024〜1440 の見え方が未定義のため、
 *    **1440px 未満はスマホと同じロゴ＋MENU（ドロワー）**にする判断（2026-09-09 田中さん確認）。
 *    他のセクションの PC レイアウトは $bp-pc（1024px）のまま。
 */
/*
 * 右向き矢印（`::after` の中身だけ）。
 *
 * Figma 実測: **長さ 13px・線 2px** の直線に矢じりの cap が付いたもの。
 * 色は `currentcolor` なので、置いた側の文字色に合わせて白にも青にもなる。
 * ⚠️ 画像を増やさないようマスクで描いている。**使うところが 2 つ以上あるので mixin にした**
 *    （`.c-button--arrow` と `.p-reserve__button`。2026-09-16）。
 */
html {
  /*
   * 固定ヘッダー分のアンカー補正（指示書 §5 / §12）。
   * ⚠️ `$header-height-*`（Figma の枠 62 / 130）ではなく**実測の高さ**を使う（2026-09-15 実測）。
   *    SP は MENU ボタン 53 ＋ 上下 15、PC は右カラム 101 ＋ 上下 16 で、枠より高い。
   *    以前は 62 / 130 を入れていて、SP ではページ内リンクの飛び先が 21px ヘッダーに潜っていた。
   * ⚠️ 切り替えは `m.pc`（1024）ではなく**ヘッダーと同じ `m.header-pc`（1440）**。
   *    1024〜1439px のヘッダーは SP の形（83px）なので、PC の値だと 50px 余計に空く。
   * ⚠️ ヘッダーの余白や MENU ボタンの大きさを変えたら、ここも測り直すこと。
   */
  scroll-padding-top: 83px;
}
@media (min-width: 1440px) {
  html {
    scroll-padding-top: 133px;
  }
}

/*
 * ⚠️ 本文の既定は **SP 16px / PC 18px**（`$fs-body-l`）。
 *    基準はお知らせ詳細の本文（Figma 実測: SP 16 / PC 18）。
 *    **先方が自由に書く場所**なので、ここをサイト全体の本文サイズとしている（2026-09-11 決定）。
 *    15 / 17（`$fs-body-m`）を使いたいところ—— CONTACT カードの説明、
 *    治療メニューのカード説明、アクセスカードの住所など —— は**部品側で明示**する。
 */
body {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.05em;
  color: #222222;
  background-color: #ffffff;
}
@media (min-width: 1024px) {
  body {
    font-size: 18px;
  }
}

body.is-drawer-open {
  overflow: hidden;
}

h1, h2, h3, h4 {
  font-weight: 500;
  line-height: 1.3;
}

a {
  transition: opacity 0.2s ease;
}
@media (hover: hover) {
  a:hover {
    text-decoration: underline;
  }
}

@media (hover: hover) {
  .l-header__logo a:hover,
  .l-footer__logo a:hover,
  .c-button:hover {
    text-decoration: none;
    opacity: 0.7;
  }
}

.l-main a {
  overflow-wrap: anywhere;
}

.skip-link {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.skip-link:focus-visible {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 1000;
  width: auto;
  height: auto;
  margin: 0;
  padding: 8px 16px;
  clip-path: none;
  color: #ffffff;
  background-color: #26304a;
  border-radius: 8px;
}

.l-container {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: 16px;
}
@media (min-width: 1024px) {
  .l-container {
    padding-inline: 40px;
  }
}

.l-main {
  display: block;
  padding-block: 40px 80px;
}
@media (min-width: 1024px) {
  .l-main {
    padding-block: 64px 120px;
  }
}
.l-main {
  /*
   * ⚠️ 下層 FV（帯）はヘッダーに**密着**させる（2026-09-08 指摘）。
   *    帯は全幅の背景を持つので、上に余白が入ると宙に浮いて見える。
   *    `:has()` が使えない環境では余白が残るだけで壊れはしない（指示書 §13 ポリシー A）。
   */
}
.l-main:has(.c-page-hero) {
  padding-top: 0;
}

.l-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: #ffffff;
}

.l-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  min-height: 62px;
  padding: 15px 19px;
}
@media (min-width: 1440px) {
  .l-header__inner {
    align-items: center;
    min-height: 130px;
    padding: 16px 40px;
  }
}

.l-header__logo {
  flex-shrink: 0;
  line-height: 1;
}
.l-header__logo img {
  width: 207px;
  height: auto;
}
@media (min-width: 1440px) {
  .l-header__logo img {
    width: 403px;
  }
}

/*
 * ⚠️ **360px 未満**（iPhone SE 第 1 世代など）はヘッダーが収まらない（2026-09-09 実測）。
 *    ロゴ 207 ＋ 電話アイコン 30 ＋ MENU 48 ＋ gap 32×2 ＋ 左右 19×2 = 387px 必要で、
 *    320px の画面では **MENU ボタンが右にはみ出して横スクロールが出ていた**。
 *    デザイン幅（375 / 390）には影響させたくないので、ここだけに絞って詰める。
 */
@media (max-width: 359px) {
  .l-header__inner {
    gap: 16px;
  }
  .l-header__logo {
    flex-shrink: 1;
    min-width: 0;
  }
  .l-header__logo img {
    width: 100%;
    max-width: 207px;
  }
}
.l-header__utility,
.l-header__row {
  display: contents;
}

@media (min-width: 1440px) {
  .l-header__utility {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 16px;
  }
  .l-header__row {
    display: flex;
    align-items: center;
    gap: 24px;
    height: 55px;
  }
}
.l-header__tel a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #222222;
}

.l-header__tel-icon {
  display: inline-flex;
  color: #222222;
}
.l-header__tel-icon svg {
  width: 30px;
  height: 30px;
}
@media (min-width: 1440px) {
  .l-header__tel-icon svg {
    width: 45px;
    height: 45px;
  }
}

.l-header__tel-num {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  white-space: nowrap;
}
@media (max-width: 1439px) {
  .l-header__tel-num {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}

.l-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
@media (max-width: 1439px) {
  .l-header__actions {
    display: none;
  }
}

.l-header__drawer-toggle {
  display: none;
}
@media (max-width: 1439px) {
  .js .l-header__drawer-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    width: 50px;
    padding: 10px;
    border-radius: 8px;
  }
}

.l-header__drawer-icon {
  position: relative;
  display: block;
  width: 27px;
  height: 16px;
  background-image: linear-gradient(#222222, #222222);
  background-repeat: no-repeat;
  background-position: 0 50%;
  background-size: 27px 2px;
}
.l-header__drawer-icon::before, .l-header__drawer-icon::after {
  position: absolute;
  inset-inline: 0;
  height: 2px;
  background-color: #222222;
  content: "";
  transition: transform 0.2s ease;
}
.l-header__drawer-icon::before {
  top: 0;
}
.l-header__drawer-icon::after {
  bottom: 0;
}
[aria-expanded=true] .l-header__drawer-icon {
  background-image: none;
}
[aria-expanded=true] .l-header__drawer-icon::before {
  transform: translateY(7px) rotate(45deg);
}
[aria-expanded=true] .l-header__drawer-icon::after {
  transform: translateY(-7px) rotate(-45deg);
}

.l-header__drawer-label {
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: 0;
}

@media (max-width: 1439px) {
  .l-gnav {
    display: none;
  }
}

.l-gnav__list {
  display: flex;
  align-items: center;
  gap: 40px;
}

.l-gnav__item {
  position: relative;
  display: flex;
  align-items: center;
}

.l-gnav__link {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
  white-space: nowrap;
  /*
   * 🔴 **リンクの当たり判定をヘッダーの下端（＝メガメニューの上端）まで伸ばす**（2026-10-01）。
   *    文字の下端からパネルまでの 16px が空いていると、マウスを下ろす途中で `:hover` が外れて
   *    パネルが消える。以前はパネル側（透明な帯／施術一覧はパネルを 20px 上へ伸ばす）で
   *    埋めていたが、施術一覧の上辺の線がずれる原因になったので、リンク側で埋める形に改めた。
   * ⚠️ `margin-bottom` で打ち消して、**ヘッダーの高さは変えない**。
   * ⚠️ 16 は**ヘッダーの内側の下の余白**（`.l-header__inner` の `$space-xs`）。リンクの下端が
   *    ヘッダーの下端（実測 133px。Figma の 130 ではない）にちょうど来る。
   *    当初 Figma の 130 に合わせて 19 にしていたら、3px はみ出して施術一覧のパネルが下線を隠した。
   * ⚠️ ここを変えるなら、下線インジケータと狭いパネルの `top` も一緒に見直す。
   */
}
@media (min-width: 1440px) {
  .l-gnav__link {
    position: relative;
    display: block;
    padding-bottom: 16px;
    margin-bottom: calc(-1 * 16px);
  }
}
.l-gnav__link {
  /*
   * ⚠️ ここは**下線を出さない**（2026-09-10 の指摘）。
   *    ホバー中は下に青いバー（下線インジケータ）が出るので、
   *    文字の下線と二重になって見た目がうるさくなる。
   *    メガメニューの中のリンクは下線のままにしてある（あちらは目印が無いため）。
   */
}
@media (hover: hover) {
  .l-gnav__link:hover {
    text-decoration: none;
  }
}

.l-gnav__mega-toggle {
  display: none;
}
.js .l-gnav__mega-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.js .l-gnav__mega-toggle:focus-visible {
  position: static;
  width: auto;
  height: auto;
  margin: 0 0 0 4px;
  clip-path: none;
  outline: 3px solid #4da7d6;
  outline-offset: 2px;
}

.l-gnav__mega-icon {
  display: none;
}
:focus-visible > .l-gnav__mega-icon {
  display: block;
  width: 8px;
  height: 8px;
  border-right: 2px solid #222222;
  border-bottom: 2px solid #222222;
  transform: translateY(-2px) rotate(45deg);
}

/*
 * 開いている項目の下線インジケータ（Figma: Vector 132）。
 *
 * Figma 実測（2026-10-01）: 幅 68・**太さ 6・両端が丸い**線で、中心がヘッダーの下端（y=130）。
 * パネルの方が手前で同じ y から始まるので、**下半分はパネルに隠れ、上半分の 3px だけ**が
 * パネルの上辺の線（2px）の上に乗って見える。それをそのまま再現する（パネルの z-index 10 が上）。
 */
.l-gnav__item--has-mega.is-open .l-gnav__link::after,
.l-gnav__item--has-mega:hover .l-gnav__link::after {
  position: absolute;
  bottom: -3px;
  left: 50%;
  width: 68px;
  height: 6px;
  background-color: #4da7d6;
  border-radius: 3px;
  transform: translateX(-50%);
  content: "";
}

.js .l-gnav__mega {
  position: absolute;
  top: calc(100% + 16px);
  left: 50%;
  z-index: 10;
  display: none;
  width: 446px;
  padding: 48px 53px;
  background-color: rgba(255, 255, 255, 0.95);
  border-top: 2px solid #4da7d6;
  border-radius: 0 0 24px 24px;
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.15);
  transform: translateX(-50%);
}
.l-gnav__mega {
  /*
   * ⚠️ **項目とパネルの間の 19px を透明な帯で埋める**（2026-09-10 の指摘）。
   *    デザインどおり隙間を空けると、マウスを下ろす途中で `:hover` が外れて
   *    パネルが消え、中の項目を押せなかった。
   *    パネル自身の擬似要素なので、開いている間だけ存在する＝
   *    閉じているときに見えない当たり判定を作ってしまうことはない。
   */
}
.js .l-gnav__mega::before {
  position: absolute;
  top: -20px;
  left: 0;
  width: 100%;
  height: 20px;
  content: "";
}
.js .l-gnav__item.is-open .l-gnav__mega {
  display: block;
}
@media (hover: hover) {
  .js .l-gnav__item--has-mega:hover .l-gnav__mega {
    display: block;
  }
}

/*
 * グループが多いメガメニュー（施術一覧）は**画面幅いっぱいの広いパネル**にする。
 *
 * Figma 実測: パネル 1636x802・ヘッダー下端（y=130）から・**画面の中央**に置く。
 *   中身 1508（左右 64 の内側）を **341px × 4 列**（列間 48 / 行間 32）で並べる。
 *
 * ⚠️ 狭いパネル（446）のまま縦に伸ばすと、施術が 29 件あるので**画面外まで伸びて
 *    下のほうが押せない**（2026-09-10 の指摘）。
 * ⚠️ 画面の中央に置きたいので、**項目ではなくヘッダーを基準**にする。
 *    そのために項目側の `position: relative` を外している（`--mega-wide`）。
 */
.js .l-gnav__item--mega-wide {
  position: static;
}

.js .l-gnav__mega--wide {
  /*
   * ⚠️ **`overflow-y: auto` は `.l-gnav__mega::before` の透明な帯を切り落とす**
   *    （2026-09-28 の指摘「施術一覧をホバーして各施術を押せない」の原因）。
   *    以前はパネルを上へ 20px 伸ばして隙間を埋めていたが、上辺の線の位置がずれるため、
   *    2026-10-01 に**リンク側（`.l-gnav__link` の padding-bottom）で埋める**形に改めた。
   *    パネルはヘッダーの下端ちょうどから始まり、上辺の線は普通の `border-top`。
   */
  top: 100%;
  width: 1636px;
  max-width: calc(100% - 80px);
  padding: 48px 64px;
  max-height: calc(100vh - 130px - 24px);
  overflow-y: auto;
}
.l-gnav__mega--wide .l-gnav__mega-inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px 48px;
}

.l-gnav__mega-inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/*
 * 見出し・項目は Figma `pc_menu_施術一覧` / `クリニック紹介` / `お悩みから探す` の実測（2026-10-01）。
 * 3 つとも同じ。違うのは**項目どうしの間隔だけ**（施術一覧 8 / ほか 16）。
 *
 *   見出し … Noto Sans JP Medium 24px・#000・行高 150%・字間 5%
 *            → 8px 空けて下線 1px #4DA7D6（グループの幅いっぱい）→ 8px 空けて項目
 *   項目   … Noto Sans JP Regular 18px・#222・行高 180%・字間 5%
 *            頭に「‣」（Zen Maru Gothic Bold 24px・#4DA7D6）、文字との間 16px
 */
.l-gnav__mega-heading {
  padding-bottom: 8px;
  margin-bottom: 8px;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: #000;
  border-bottom: 1px solid #4da7d6;
}

.l-gnav__mega-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.l-gnav__mega--wide .l-gnav__mega-list {
  gap: 8px;
}
.l-gnav__mega-list a {
  position: relative;
  display: block;
  padding-left: 28px;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.05em;
  color: #222222;
}
.l-gnav__mega-list a::before {
  position: absolute;
  top: 0;
  left: 0;
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
  color: #4da7d6;
  content: "‣";
}

.js .l-drawer {
  position: fixed;
  inset: 62px 0 0;
  z-index: 90;
  display: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  background-color: #ffffff;
}
.js .l-drawer.is-open {
  display: block;
}
@media (min-width: 1440px) {
  .l-drawer {
    display: none;
  }
}

/*
 * 🔴 **行のリズムは Figma の実測どおり**（2026-09-17 指摘「アコーディオンの下の余白が直リンクと違う」）。
 *
 * Figma（`sp_メニューコンテンツ` 1488:28744）の `Frame 1460` が正体:
 *   リスト全体 … VERTICAL・**gap 40**。アコーディオンも直リンクも**同じ並びの兄弟**
 *   1 行       … 文字 27（18px / 行送り 150%）＋ **8px** ＋ 下線　＝ 35px
 *   アコーディオン … VERTICAL・**gap 16**。［見出しの行 35］＋ 16 ＋［開いた中身］
 *   ボタンの下 … 147 → 187 ＝ **40**（リストの gap と同じ）
 *
 * ⚠️ 揃っていなかった原因は 2 つあった:
 *   ① トグルのタップ領域 44px が**アコーディオンの行だけ高くしていた**（下の `--toggle` 参照）
 *   ② 直リンクが `padding: 16px 0` で、Figma の「下に 8px ＋ 行の間 40px」と違っていた
 */
.l-drawer__inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 40px 20px 80px;
}

.l-drawer__actions {
  display: flex;
  justify-content: center;
  gap: 16px;
}

/*
 * ⚠️ 下の余白と下線は**直リンク（`.l-drawer__links a`）と同じ 8px**（Figma: 1 行 35px = 27 + 8 + 線）。
 * 🔴 下線は **`#4DA7D6`**（2026-09-17 指摘「border の色が違う」）。
 *    Figma の `Vector 133` は 7 本とも **stroke `#4DA7D6` / 1px** で実測済み。
 *    以前は `$color-border`（薄い紺 rgba(38,48,74,.15)）だった。
 */
.l-drawer__section-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid #4da7d6;
}

.l-drawer__section-link {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
}

/*
 * ⚠️ **行の高さに影響させない**（2026-09-17）。
 *    `align-items: center` の flex の子なので、タップ領域の 44px がそのまま行の高さになり、
 *    **アコーディオンの行だけ文字（27px）より 17px 高く**なって直リンクと揃わなかった
 *    （指摘の「下の余白が違う」の正体）。
 *    位置指定で浮かせれば、44px のタップ領域を保ったまま行の高さは文字だけで決まる。
 */
.l-drawer__section-toggle {
  display: none;
}
.js .l-drawer__section-toggle {
  position: absolute;
  top: 50%;
  right: -10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  translate: 0 -50%;
}

.l-drawer__section-icon {
  display: block;
  width: 10px;
  height: 10px;
  border-right: 2px solid #26304a;
  border-bottom: 2px solid #26304a;
  transform: translateY(-3px) rotate(45deg);
  transition: transform 0.2s ease;
}
[aria-expanded=true] .l-drawer__section-icon {
  transform: translateY(3px) rotate(-135deg);
}

.l-drawer__panel {
  padding-top: 16px;
}
.js .l-drawer__panel {
  display: none;
}
.js .l-drawer__section.is-open .l-drawer__panel {
  display: block;
}

/*
 * 中の小見出し（美容皮膚科 / 目もとの治療 …）。
 * 🔴 Figma 実測（`sp_メニューコンテンツ` 1488:28744。2026-09-16 指摘で直した）:
 *    **18px Medium・黒（`#000000`）**。青の 14px Bold で実装していた。
 * ⚠️ 行の間隔も Figma に合わせる。項目は 29px の行が **45px 間隔**＝間は 16px。
 *    小見出しと項目の間、項目と次の小見出しの間も同じ 16px。
 */
.l-drawer__group-heading {
  margin-bottom: 16px;
  font-size: 18px;
  font-weight: 500;
  color: #000;
}

.l-drawer__group-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.l-drawer__group-list:not(:last-child) {
  margin-bottom: 16px;
}
.l-drawer__group-list a {
  display: block;
  padding-left: 16px;
  font-size: 16px;
  position: relative;
}
.l-drawer__group-list a::before {
  position: absolute;
  left: 0;
  color: #4da7d6;
  content: "▸";
}

/*
 * 下のほうの直リンク（料金 / よくある質問 / アクセス / お知らせ）。
 * 🔴 Figma 実測（2026-09-16 指摘）: 行の**右端に 11x11 の矢印**（線 2px `#222222`）が付き、
 *    下の区切り線は **1px `#4DA7D6`**（`$color-border` の薄い紺ではない）。
 */
/*
 * ⚠️ **アコーディオンと同じ並び・同じリズム**にする（2026-09-17）。
 *    Figma ではこの 4 行もアコーディオンと同じ `Frame 1460` の**兄弟**なので、
 *    行の間は 40px・文字の下は 8px で下線。`<ul>` にまとまっているぶんだけ
 *    ここで `gap` を持つ（`.l-drawer__inner` の gap は ul の外側にしか効かないため）。
 */
.l-drawer__links {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.l-drawer__links li {
  border-bottom: 1px solid #4da7d6;
}
.l-drawer__links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 8px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
}
.l-drawer__links a::after {
  flex-shrink: 0;
  width: 11px;
  height: 11px;
  border-top: 2px solid #222222;
  border-right: 2px solid #222222;
  rotate: 45deg;
  content: "";
}

.l-footer {
  background-color: #f8fcfe;
  background-image: linear-gradient(100deg, #cfe2fb 0%, #e8eeff 55%, #f7eef3 100%);
}

.l-footer__band {
  padding-block: 40px;
  color: #ffffff;
  background-color: #4da7d6;
  border-radius: 40px 40px 0 0;
}
@media (min-width: 1024px) {
  .l-footer__band {
    padding-block: 80px 40px;
    border-radius: 70px 70px 0 0;
  }
}

.l-footer__band-inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: 20px;
}
@media (min-width: 1024px) {
  .l-footer__band-inner {
    flex-direction: row;
    justify-content: space-between;
    gap: 120px;
    padding-inline: 40px;
  }
}

.l-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.l-footer__logo img {
  width: 350px;
  height: auto;
}
@media (min-width: 1024px) {
  .l-footer__logo img {
    width: 377px;
  }
}

.l-footer__address {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 16px;
  line-height: 1.5;
}
.l-footer__address a {
  white-space: nowrap;
}

.l-footer__corp {
  font-weight: 700;
}
@media (min-width: 1024px) {
  .l-footer__corp {
    font-weight: 400;
  }
}

.l-footer__nav {
  display: flex;
  gap: 80px;
}
@media (max-width: 1023px) {
  .l-footer__nav {
    display: none;
  }
}

.l-footer__nav-heading {
  margin-bottom: 16px;
  font-size: 16px;
  font-weight: 700;
}

.l-footer__nav-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.l-footer__nav-list a {
  display: inline-block;
  font-size: 16px;
  white-space: nowrap;
}

.l-footer__copyright {
  margin-top: 40px;
  font-size: 12px;
  text-align: center;
  color: #ffffff;
}

.p-contact {
  padding: 80px 20px;
}
@media (min-width: 1024px) {
  .p-contact {
    padding: 120px 40px;
  }
}

.p-contact__head {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  max-width: 460px;
  margin-inline: auto;
  margin-bottom: 40px;
  text-align: center;
}

.p-contact__title {
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0;
  color: #26304a;
}
@media (min-width: 1024px) {
  .p-contact__title {
    font-size: 36px;
  }
}

.p-contact__lead {
  font-size: 16px;
}
@media (min-width: 1024px) {
  .p-contact__lead {
    font-size: 18px;
  }
}

.p-contact__cards {
  display: grid;
  gap: 16px;
  width: 100%;
  max-width: 403px;
  margin-inline: auto;
}
@media (min-width: 1024px) {
  .p-contact__cards {
    grid-template-columns: repeat(2, 403px);
    gap: 32px;
    max-width: none;
    justify-content: center;
  }
}

/*
 * カード。4 枚とも**カード全体が 1 つのリンク**。
 *
 * ⚠️ 余白は **<li> ではなく中の <a> 側**に持たせる（2026-09-08 指摘）。
 *    li に padding を付けると、その分だけリンクの当たり判定がカードより内側になり、
 *    「カードの端を押しても反応しない」状態になるため。
 */
.p-contact__card {
  display: flex;
  min-height: 147px;
  text-align: center;
  background-color: #ffffff;
  border-radius: 24px;
}
.p-contact__card > a {
  display: flex;
  width: 100%;
  height: 100%;
  padding: 16px 20px;
  border-radius: inherit;
  /*
   * カードはボタン扱い。foundation の `a:hover { text-decoration: underline }` だと
   * カード内の文字すべてに線が乗って読みにくいので、不透明度で反応させる
   * （`.c-button` と同じ扱い。指示書 §5 の方針）。
   */
  text-decoration: none;
}
@media (hover: hover) {
  .p-contact__card > a:hover {
    text-decoration: none;
    opacity: 0.8;
  }
}

.p-contact__card--insurance > a,
.p-contact__card--beauty > a {
  gap: 11px;
  align-items: center;
  justify-content: space-between;
  text-align: left;
}

.p-contact__card--tel > a,
.p-contact__card--mail > a {
  flex-direction: column;
  gap: 8px;
  align-items: center;
  justify-content: center;
}

.p-contact__card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.p-contact__card--insurance {
  color: #ffffff;
  background-color: #4da7d6;
}

.p-contact__card--beauty {
  color: #ffffff;
  background-color: #fa9a9a;
}

.p-contact__card-title {
  display: block;
  font-size: 18px;
  font-weight: 500;
}
@media (min-width: 1024px) {
  .p-contact__card-title {
    font-size: 24px;
  }
}

.p-contact__card-desc {
  display: block;
  font-size: 15px;
  line-height: 1.5;
}
@media (min-width: 1024px) {
  .p-contact__card-desc {
    font-size: 17px;
  }
}

.p-contact__card-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  color: #4da7d6;
  background-color: #ffffff;
  border-radius: 50%;
}

.p-contact__card-tel,
.p-contact__card-mail {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.p-contact__card-tel-icon {
  display: inline-flex;
  color: #222222;
}
.p-contact__card-tel-icon svg {
  width: 36px;
  height: 36px;
}
@media (min-width: 1024px) {
  .p-contact__card-tel-icon svg {
    width: 51px;
    height: 51px;
  }
}

.p-contact__card-tel-num {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0;
}
@media (min-width: 1024px) {
  .p-contact__card-tel-num {
    font-size: 32px;
  }
}

.p-contact__card-mail {
  font-size: 18px;
  font-weight: 500;
}
@media (min-width: 1024px) {
  .p-contact__card-mail {
    font-size: 28px;
  }
}

.p-contact__card-note {
  font-size: 14px;
}

/*
 * ⚠️ **PC では出さない**（グローバルナビとフッターの CONTACT が担当する）。
 * ⚠️ iPhone のホームバーに潜らないよう `env(safe-area-inset-bottom)` を足す。
 *
 * 🔴 **帯そのものに地色は付けない**（2026-09-17 指摘「余計な背景がついている」）。
 *    Figma の `Mask Group`（1488:31197）は `Image`（`#4DA7D6` のべた塗り）を
 *    `Mask`（塗り無しの矩形）でマスクしていて、**書き出すと完全に透明**になる
 *    （`exportAsync` のアルファが全面 0 で実測）。つまり**地は無い**のが正しい。
 *    べた塗りの `#4DA7D6` で近似していたため、**同じ色のフッターと溶け合って**
 *    下半分が青一色になり、保険診療予約のボタンも見えなくなっていた。
 *    ⚠️ 影も Figma に無い。浮かせる表現はボタンの角丸だけで作る。
 */
.l-fixed-nav-sp {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 70;
  padding: 2px 0 1px;
  padding-bottom: calc(1px + env(safe-area-inset-bottom, 0px));
}
.l-fixed-nav-sp[hidden] {
  display: none;
}
@media (min-width: 1440px) {
  .l-fixed-nav-sp {
    display: none;
  }
}

.l-fixed-nav-sp__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
}
.l-fixed-nav-sp__list a {
  display: flex;
  /*
   * ⚠️ アイコンとラベルの間は **4px**。Figma のラベルの y 座標から逆算した値
   *    （電話 y=44・保険 y=33 の両方が、この gap で中央揃えにすると合う）。
   */
  flex-direction: column;
  gap: 4px;
  align-items: center;
  justify-content: center;
  min-height: 79px;
  padding: 4px 2px;
  font-size: 14px;
  line-height: 1.45;
  text-align: center;
  text-decoration: none;
  border-radius: 10px;
}
@media (hover: hover) {
  .l-fixed-nav-sp__list a:hover {
    text-decoration: none;
    opacity: 0.85;
  }
}

.l-fixed-nav-sp__icon svg {
  display: block;
  width: 20px;
  height: 20px;
}

.l-fixed-nav-sp__item--tel > a,
.l-fixed-nav-sp__item--contact > a {
  color: #333333;
  background-color: #ffffff;
}

.l-fixed-nav-sp__item--insurance > a {
  color: #ffffff;
  background-color: #4da7d6;
}

.l-fixed-nav-sp__item--beauty > a {
  color: #ffffff;
  background-color: #fa9a9a;
}

.l-fixed-nav-sp__item--tel .l-fixed-nav-sp__icon svg {
  width: 18px;
  height: 18px;
}

/*
 * ⚠️ 出ているあいだは**フッターの下に隙間**を作る（固定メニューが最後の行に被らないように）。
 *    クラスと custom property は `main.js` の `initFixedNavSp()` が付ける。
 * ⚠️ `--tsk-fixed-nav-h` は `offsetHeight` なので **`env(safe-area-inset-bottom)` を含んでいる**。
 *    ここで足すと二重になる（以前は足していた）。
 */
body.is-fixed-nav {
  padding-bottom: var(--tsk-fixed-nav-h, 0px);
}
@media (min-width: 1440px) {
  body.is-fixed-nav {
    padding-bottom: 0;
  }
}

.c-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 137px;
  min-height: 45px;
  padding-inline: 16px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  white-space: nowrap;
  border-radius: 36px;
  transition: opacity 0.2s ease;
}
@media (min-width: 1024px) {
  .c-button {
    min-height: 55px;
    font-size: 24px;
  }
}

.c-button--primary {
  color: #ffffff;
  background-color: #4da7d6;
  border: 2px solid #4da7d6;
}

.c-button--outline {
  color: #4da7d6;
  background-color: #ffffff;
  border: 2px solid #4da7d6;
}

.c-button--dark {
  gap: 8px;
  color: #ffffff;
  background-color: #26304a;
  border: 2px solid #26304a;
}

/*
 * 右向き矢印つき（Figma: ご挨拶・お知らせ一覧のボタン）。
 * ⚠️ 矢印そのものは `m.arrow-right`（`foundation/_mixins.scss`）。ご予約の振り分けボタンと共通。
 */
.c-button--arrow {
  gap: 8px;
}
.c-button--arrow::after {
  display: inline-block;
  width: 15px;
  height: 10px;
  background-color: currentcolor;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M1 5h11M9 1.5 13 5 9 8.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-size: contain;
  content: "";
}

.c-button__icon {
  display: inline-flex;
  align-items: center;
}
.c-button__icon svg {
  width: 20px;
  height: 20px;
}

/*
 * ⚠️ SP の下部固定メニューが出ているあいだは、その高さぶん上へ逃がす
 *    （`--tsk-fixed-nav-h` は `main.js` の `initFixedNavSp()` が `<html>` に入れる）。
 */
.c-pagetop {
  position: fixed;
  right: 11px;
  bottom: calc(11px + var(--tsk-fixed-nav-h, 0px));
  z-index: 80;
}
@media (min-width: 1024px) {
  .c-pagetop {
    right: 20px;
    bottom: 20px;
  }
}
.c-pagetop a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 44px;
  height: 44px;
  color: #ffffff;
  background-color: #4da7d6;
  border-radius: 50%;
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.15);
}
@media (min-width: 1024px) {
  .c-pagetop a {
    width: 60px;
    height: 60px;
  }
}
body.is-drawer-open .c-pagetop {
  display: none;
}

.c-pagetop__arrow {
  display: block;
  width: 18px;
  height: 13px;
}
@media (min-width: 1024px) {
  .c-pagetop__arrow {
    width: 10px;
    height: 7px;
  }
}

/*
 * ⚠️ SP のデザインには文字が無いので出さない。
 * ⚠️ Figma は「Page」「空行」「Top」の 3 行 × 行送り 55% で高さ 21px を作っている。
 *    CSS で同じことをすると行が重なるので、2 行 ＋ 行送り 1.1 にしている（見た目はほぼ同じ）。
 */
.c-pagetop__label {
  display: none;
}
@media (min-width: 1024px) {
  .c-pagetop__label {
    display: block;
    font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    font-size: 13px;
    line-height: 1.1;
    text-align: center;
  }
}

.c-section-title {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 32px;
  text-align: center;
}
@media (min-width: 1024px) {
  .c-section-title {
    margin-bottom: 48px;
  }
}
.c-section-title {
  /*
   * 🔴 **左寄せになるのは PC だけ**（2026-09-16 指摘「`about-info-title` がセンターになっていない」）。
   *    Figma の SP は左寄せの見出しが 1 つも無く、診療案内も中央（`sp_クリニック紹介` 実測 x140 w112 ＝ 中心 196）。
   *    PC だけコンテナの左端（x320）から始まる。
   *    ⚠️ もう 1 か所の使い手（`front-page.php`）は `u-pc-only` が付いているので影響しない。
   */
}
@media (min-width: 1024px) {
  .c-section-title--left {
    text-align: left;
  }
}

.c-section-title__ja {
  font-size: 28px;
  font-weight: 500;
  color: #26304a;
}
@media (min-width: 1024px) {
  .c-section-title__ja {
    font-size: 36px;
  }
}

.c-section-title__en {
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
  color: #4da7d6;
}
@media (min-width: 1024px) {
  .c-section-title__en {
    font-size: 22px;
  }
}

.c-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  font-size: 14px;
  color: #222222;
}
@media (min-width: 1024px) {
  .c-breadcrumb {
    font-size: 16px;
  }
}
.c-breadcrumb li + li::before {
  margin-right: 8px;
  content: "〉";
}
@media (hover: hover) {
  .c-breadcrumb a:hover {
    text-decoration: underline;
  }
}

.c-page-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 164px;
  overflow: hidden;
  /*
   * ⚠️ 下地は**白**。帯の右側（機器写真が乗るあたり）はデザインでも白なので、
   *    ここを塗っておかないと写真の周りだけ色が変わって見える（2026-09-08 指摘）。
   * ⚠️ `cover` ではなく **`100% 100%`** で引き伸ばす。テクスチャは画像の左 2/3 にあり、
   *    `cover` だと狭い画面で左端しか出ず、デザインの割合とずれるため。
   */
  background-color: #ffffff;
  background-image: url("../img/page-hero-bg.jpg");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 100% 100%;
}
@media (min-width: 768px) {
  .c-page-hero {
    min-height: 240px;
  }
}
@media (min-width: 1024px) {
  .c-page-hero {
    min-height: 329px;
  }
}

.c-page-hero__photo {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 0;
  /*
   * ⚠️ SP カンプにも機器写真が入っている（2026-09-08 指摘）。以前は SP で非表示にしていた。
   * ⚠️ 写真は**白背景を落とした透過 PNG**なので、`height: 100%` にすると機器が大きくなりすぎる。
   *    カンプ実測の見え方（SP は帯幅の約 4 割 / PC は約 2 割）に合わせて**幅で指定**し、
   *    高さは成り行きにする。帯より高くなったぶんは overflow: hidden で上が切れる（カンプも同じ）。
   */
  display: block;
  width: 40%;
  height: auto;
}
@media (min-width: 1024px) {
  .c-page-hero__photo {
    width: 18%;
  }
}

/*
 * 帯の高さいっぱいに置くタイプ（治療メニュー一覧の人物写真）。
 *
 * ⚠️ 機器写真は「帯幅の何割」で置いているが、人物写真は **PC も SP も帯の高さぴったり**
 *    （Figma 実測: PC 516x329 / SP 195x164 で、どちらも帯の高さ 329 / 164 と同じ）。
 *    割合で書くとページごとに値が変わるので、高さで合わせて幅は成り行きにする。
 */
.c-page-hero__photo--fill-height {
  width: auto;
  height: 100%;
}

.c-page-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  /*
   * ⚠️ SP だけ **20px**（2026-09-15 指摘で 16px から直した）。
   *    帯の中身は SP カンプ 6 枚とも x=20 から始まっており、本文の `.l-container`（16px）とは違う。
   *    ここは全下層ページの FV に効く。
   */
  padding-inline: 20px;
}
@media (min-width: 1024px) {
  .c-page-hero__inner {
    padding-inline: 0;
  }
}

/*
 * ⚠️ 下層 FV のタイトルは**明朝**（2026-09-08 指摘）。
 *    Figma 実測（施術詳細 / お知らせ / クリニック紹介 / よくある質問の 4 ページで共通）:
 *      Noto Serif JP / SemiBold(600) / 40px / line-height 51px / letter-spacing 0.28px
 *    本文の Noto Sans JP とは別書体なので、`$font-serif` を明示する。
 */
.c-page-hero__title {
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.007em;
  color: #222222;
  max-width: 55%;
}
@media (min-width: 1024px) {
  .c-page-hero__title {
    max-width: 680px;
    font-size: 40px;
    line-height: 1.275;
  }
}

/*
 * 写真が無いページ（プライバシーポリシー / サイトマップ / 404 など）。
 * ⚠️ 幅の上限は**右の写真に重ねないため**だけのものなので、写真が無いなら外す。
 *    止めたままだと SP で「プライバシーポリシー」が 2 行に折れていた（2026-09-16 指摘）。
 */
.c-page-hero--no-photo .c-page-hero__title,
.c-page-hero--no-photo .c-page-hero__desc {
  max-width: none;
}

/*
 * 説明文。
 *
 * ⚠️ 幅の上限は **右の写真に重ねないため**だけのもので、改行位置は原稿の改行（`nl2br`）で決まる。
 *    Figma 実測の説明文の幅はページごとに違う:
 *      お知らせ 517 / 治療メニュー一覧・クリニック紹介・予約 553 / よくある質問 587 / 問合せ 618
 *    以前は 553px 固定で、**よくある質問と問合せでは狭すぎた**ので 620px に広げた（2026-09-09）。
 *    PC の写真は帯の右 516px ぶん（コンテナ内では左から 1084px の位置）なので、620px なら重ならない。
 * ⚠️ さらに **660px** へ広げた（2026-09-15 指摘）。お問合せの 1 行目が Figma では 618px に収まるが、
 *    こちらは `$ls-base` の字間が乗るぶん 620px を数 px 超えて、「…お願いいたしま／す。」と
 *    最後の 1 文字だけ折り返していた。写真の左側は淡いグラデーションなので 660px でも重ならない。
 * 🔴 **SP にも上限がある**（2026-09-16 指摘で追加。以前は「SP は上限なし」としていたが誤り）。
 *    SP カンプの説明文の枠は **253px**（お知らせ・ご予約・保険・美容）／お問合せだけ **264px**。
 *    上限が無いと帯の幅いっぱい（350px）まで伸びて、デザインより**行数が減る**:
 *      ご予約・保険・美容 … Figma 3 行 → 実装 2 行
 *    上限は **270px**。いちばん広いお問合せの枠（264px）＋ 6px で、内訳は下のとおり。
 *    ⚠️ Figma の枠ぴったり（264px）にすると**お問合せが 4 行に割れる**。字間 5% は Figma では
 *       文字と文字の間にしか入らないが、CSS の `letter-spacing` は**最後の 1 文字の後ろにも**入るため、
 *       21 文字の行が 264.6px になって数 px はみ出す。その分だけ広げてある。
 *    270px での行数: ご予約・保険・美容 3 行 / お問合せ 3 行 / お知らせ 2 行（いずれも Figma と同じ）。
 */
.c-page-hero__desc {
  margin-top: 16px;
  /*
   * ⚠️ 幅は**ページごと**に `template-parts/page-hero.php` から custom property で渡す
   *    （`desc_width` / `desc_width_sp`。既定は PC 660 / SP 270）。
   *    Figma の枠が「幅固定で折り返す」ページ（クリニック紹介など）は、
   *    渡さないと行数がデザインと変わる。
   */
  max-width: var(--tsk-desc-w-sp, 270px);
  font-size: 12px;
  line-height: 1.7;
  color: #222222;
}
@media (min-width: 1024px) {
  .c-page-hero__desc {
    max-width: var(--tsk-desc-w, 660px);
    font-size: 16px;
  }
}

.c-lightbox {
  width: min(92vw, 1000px);
  max-width: none;
  max-height: 92vh;
  padding: 0;
  background-color: transparent;
  border: 0;
}
.c-lightbox::backdrop {
  background-color: rgba(38, 48, 74, 0.6);
}

.c-lightbox__inner {
  position: relative;
  padding: 40px 8px 8px;
}

.c-lightbox__image {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(92vh - 80px);
  object-fit: contain;
  border-radius: 8px;
}

.c-lightbox__close {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: #222222;
  cursor: pointer;
  background-color: #ffffff;
  border-radius: 50%;
}
@media (hover: hover) {
  .c-lightbox__close:hover {
    color: #ffffff;
    background-color: #4da7d6;
  }
}

.c-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 160px;
  padding: 16px;
  font-size: 14px;
  text-align: center;
  color: rgba(38, 48, 74, 0.6);
  background-color: #f8fcfe;
  border: 2px dashed rgba(77, 167, 214, 0.2);
  border-radius: 16px;
}

/* =============================================================
 * スライダー（横スクロール＋操作 UI）
 *
 * 方針（指示書 §13 ポリシー A / プログレッシブエンハンスメント）:
 *   トラックは **素の CSS だけで横スクロール＋スナップ**する。JS が無くても
 *   指でのスワイプ・キーボード・スクロールバーで全項目に到達できる。
 *   矢印やバーは JS が付いたときだけ `hidden` を外して見せる（＝装飾扱い）。
 *
 * Figma 実測（注目の施術 / Group 270・2026-09-08）:
 *   バー   線 2px。溝 #F8FCFE（198px）／つまみ #4DA7D6（71px）
 *   矢印   線 3px・長さ 59px・#4DA7D6。バーの右側に左右 2 つ
 *   治療の流れ（SP）は同じ仕組みで、バーではなく **ドット**で位置を出す
 * ---------------------------------------------------------- */
.c-slider {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/*
 * トラック本体。列幅は使う側（.p-pickup__list など）が grid-auto-columns で決める。
 * スクロールバーは Figma に無いので隠すが、**スクロール自体は殺さない**。
 */
.c-slider__track {
  /*
   * ⚠️ `position: relative` は必須。**絶対配置の子孫は、overflow を持つ祖先が
   *    `position: static` だとクリップされない**（CSS の仕様）。
   *    そのため `.u-visually-hidden`（読み上げ用テキスト・position: absolute）が
   *    トラックの枠を突き抜け、**ページ全体に横スクロールが出ていた**
   *    （2026-09-09。SP 375px の画面で症例カードの「詳しく見る」内のものが x=562 に置かれ、
   *    ページ幅が 563px になっていた）。ここを含めればクリップされる。
   */
  position: relative;
  display: grid;
  grid-auto-flow: column;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.c-slider__track::-webkit-scrollbar {
  display: none;
}
.c-slider__track > * {
  scroll-snap-align: start;
}

.c-slider__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/*
 * 送りをトラックの**左右の外側**に重ねて置く形（Figma: 症例写真）。
 * `.c-slider--sides` 側で position: relative を持たせている。
 */
.c-slider__controls--sides {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.c-slider__progress {
  position: relative;
  flex: 1 1 auto;
  max-width: 198px;
  height: 2px;
  background-color: #f8fcfe;
}

.c-slider__progress-thumb {
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 36%;
  background-color: #4da7d6;
  transition: left 0.2s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .c-slider__progress-thumb {
    transition: none;
  }
}

.c-slider__arrows {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 16px;
}

.c-slider__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 0;
  color: #4da7d6;
  background-color: transparent;
  border: 0;
  cursor: pointer;
}
.c-slider__arrow svg {
  display: block;
  width: 40px;
  height: 12px;
}
@media (min-width: 1024px) {
  .c-slider__arrow svg {
    width: 59px;
  }
}
.c-slider__arrow:disabled {
  opacity: 0.3;
  cursor: default;
}

/*
 * 左右に置くシェブロン（Figma: 症例写真 / 26x26・線 5px）。
 * トラックの上下中央、左右の端に重ねる。
 */
.c-slider__arrow--side {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  padding: 8px;
  pointer-events: auto;
}
.c-slider__arrow--side svg {
  width: 16px;
  height: 21px;
}
@media (min-width: 1024px) {
  .c-slider__arrow--side svg {
    width: 26px;
    height: 34px;
  }
}
.c-slider__arrow--side.c-slider__arrow--prev {
  left: 0;
}
.c-slider__arrow--side.c-slider__arrow--next {
  right: 0;
}
.c-slider__arrow--side {
  /*
   * Figma はカード列の**すぐ外側**に置いているが、外へ出す余地が無い幅では
   * 画面からはみ出してしまう。コンテナ幅 ＋ 矢印 2 つぶんが収まる幅からだけ外へ出す。
   */
}
@media (min-width: 1400px) {
  .c-slider__arrow--side.c-slider__arrow--prev {
    left: -46px;
  }
  .c-slider__arrow--side.c-slider__arrow--next {
    right: -46px;
  }
}

.c-slider--sides {
  position: relative;
}

.c-slider__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}

.c-slider__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  background-color: rgba(77, 167, 214, 0.3);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.c-slider__dot.is-current {
  background-color: #4da7d6;
}

/* =============================================================
 * キャンセルポリシー（template-parts/cancel-policy.php）
 *
 * Figma: `pc_クリニック紹介`（1488:25231）/ `pc_予約ページ`（1488:23864）の 2 か所に
 *        同じものが載っている。実測は 958 幅・青いカード（角丸 16・白文字）。
 * ---------------------------------------------------------- */
/*
 * ⚠️ 幅の指定（`.p-about__inner`）はクリニック紹介側で当てている。
 *    予約ページからも同じクラスを使うので、こちらでは幅を持たせない。
 */
/*
 * ⚠️ **下の余白をここで足している**（2026-09-16 指摘）。
 *    Figma は「最後の中身 → フッター」が **SP 120 / PC 160**（予約・お問合せ・お知らせの 3 枚で同じ）。
 *    `.l-main` の下は SP 80 / PC 120 なので、足りない 40px をこの区画で持つ。
 *    ⚠️ ほかのページ（キャンペーン・プライバシーポリシー等）も 40px 足りないが、
 *       それぞれ自前の `padding-block` を持っていて一律には直せないので、ここでは触っていない。
 */
.p-cancel {
  padding-top: 80px;
  padding-bottom: 40px;
}
@media (min-width: 1024px) {
  .p-cancel {
    padding-top: 160px;
  }
}

.p-cancel__lead {
  font-size: 16px;
  line-height: 1.8;
  text-align: center;
}
@media (min-width: 1024px) {
  .p-cancel__lead {
    font-size: 18px;
  }
}
.p-cancel__lead {
  /*
   * ⚠️ 「1営業日前（前日）」だけ**目立たせるのは PC だけ**（2026-09-16 指摘）。
   *    Figma 実測: PC は 20px Bold（地の文は 18px Regular）／SP は 16px Regular で**差が無い**。
   *    SP では `<strong>` の既定の太字も出さないよう `inherit` に戻す。
   */
}
.p-cancel__lead strong {
  font-weight: inherit;
}
@media (min-width: 1024px) {
  .p-cancel__lead strong {
    font-size: 20px;
    font-weight: 700;
  }
}

/*
 * Figma 実測（2026-09-16 に色と内側を直した）:
 *   PC … 958x284・角丸 16・内側 48/46
 *   SP … 360x363・角丸 16・内側 55/36
 * 🔴 **地は `#4DA7D6` の 20%・文字は `#222222`**。
 *    以前は「べた塗りの `#4DA7D6` に白文字」で実装していて濃すぎた（美容の
 *    「キャンセルについてのお願い」やお問合せの注意カードと同じ間違い）。
 */
.p-cancel__box {
  margin-top: 32px;
  padding: 55px 36px 54px;
  color: #222222;
  background-color: rgba(77, 167, 214, 0.2);
  border-radius: 16px;
}
@media (min-width: 1024px) {
  .p-cancel__box {
    max-width: 958px;
    margin-top: 48px;
    margin-inline: auto;
    padding: 48px 46px;
  }
}

.p-cancel__box-title {
  font-size: 18px;
  font-weight: 500;
}
@media (min-width: 1024px) {
  .p-cancel__box-title {
    font-size: 24px;
  }
}

.p-cancel__items {
  margin-top: 16px;
  font-size: 16px;
  line-height: 1.8;
}
@media (min-width: 1024px) {
  .p-cancel__items {
    font-size: 18px;
  }
}
.p-cancel__items li {
  padding-left: 1em;
  text-indent: -1em;
}
.p-cancel__items li + li {
  margin-top: 8px;
}
.p-cancel__items li::before {
  content: "・";
}

/*
 * トップの本体。
 *
 * ⚠️ 以前はここに 1 本の縦グラデーションを敷いて全セクションの色味を近似していたが、
 *    デザインは**セクションごとに独立した帯**だった（2026-09-08 に実測）。
 *    ページ地は白で、色が付くのは 治療の流れ / ご挨拶＋当院の特徴 / 新着情報＋診療予定表 の 3 つだけ。
 *    実測値（Figma の書き出しから採色）:
 *      キャンペーン・美容皮膚科・注目の施術・一般皮膚科・アクセス … #FFFFFF
 *      治療の流れ       白 → #E1F4F2 → #C8EEF6 → 白 の縦グラデ
 *      ご挨拶＋当院の特徴 #F8FCFE（ほぼ単色）
 *      新着情報＋診療予定表 左が濃い青紫 #D2E0FF、右が水色 #E9F9FF の斜めグラデ
 */
/*
 * ⚠️ **SP だけ下に 60px**（2026-09-16 指摘「`l-main` のしたの余白を再確認して」）。
 *    Figma 実測: アクセスの下端 14161 → フッター 14281 ＝ **120px**。
 *    アクセスのセクション自身が 60px 持っているので、残りの 60px をここで足す。
 *    ⚠️ PC は Figma でもアクセスの下端とフッターが**接している**（10557〜11512 のすぐ下が footer_pc）。
 */
.home .l-main {
  padding-block: 0 60px;
  background-color: #ffffff;
}
@media (min-width: 1024px) {
  .home .l-main {
    padding-block: 0;
  }
}

/*
 * セクションごとの内容幅（Figma 実測）。
 *
 * ⚠️ `l-container` の 1180px は**ヘッダー・フッターの帯**（Figma 1856 / 1920 の中の内容幅）
 *    から決めた値で、トップの各セクションはそれぞれ幅が違う。
 *    共通変数を動かすとヘッダー・フッターまで動いてしまうので、
 *    **セクション側で上書き**する（2026-09-08）。
 *
 *    注目の施術   1562px   Frame 1079
 *    新着情報     1400px   Frame 1669
 *    診療予定表   1280px   Frame 1134（新着情報と同じ塊だが幅は違う）
 *    治療の流れ   1280px   Frame 1092 / Frame 1104（帯は全幅、中身は 1280）
 *    キャンペーン 1280px   Frame 1061（背景の箱は 1700px）
 *    美容皮膚科   —        見出しは直下・カード列は __bg の 1700px（l-container を使っていない）
 *    ご挨拶/特徴  1280px   Frame 1129
 *    症例写真     1280px   Frame 1104（背景のドットだけ全幅）
 *    一般皮膚科   1072px   Frame 1112
 *    アクセス     1920px   Frame 1144（全幅）
 */
/*
 * ⚠️ `.l-container` は PC で**左右 40px のパディング**を持つ。`max-width` はその外側なので、
 *    Figma の「中身の幅」に **＋80px** して指定しないと**中身が 80px 細くなる**（2026-09-09 指摘）。
 *    下のコメントの数字は Figma の中身の幅で、指定値はそれに 80 を足したもの。
 */
@media (min-width: 1024px) {
  .p-pickup > .l-container {
    max-width: 1642px;
  }
  .p-news > .l-container {
    max-width: 1480px;
  }
  .p-schedule > .l-container,
  .p-flow > .l-container,
  .p-case > .l-container,
  .p-greeting > .l-container,
  .p-features > .l-container {
    max-width: 1360px;
  }
  .p-dermatology > .l-container {
    max-width: 1152px;
  }
  /*
   * ⚠️ アクセスは**帯（白）が全幅で、中身は 1280px**（Figma: Frame 1144 は 1920 だが
   *    その中の Frame 1143 が 1280）。2026-09-08 に一度 max-width を外して
   *    幅いっぱいにしてしまったので戻した。
   */
  .p-access > .l-container {
    max-width: 1360px;
  }
}
/*
 * セクションの帯（Figma 実測。2026-09-08）。
 *
 * ⚠️ 色が付くのはこの 3 か所だけ。他は白（ページ地）。
 *    デザイン上は「ご挨拶＋当院の特徴」「新着情報＋診療予定表」がそれぞれ 1 枚の帯。
 *    前者は **`.p-front-band` という入れ物**で 1 枚にした（下記）。
 *    後者はセクションが分かれたままなので、同じ背景を両方に掛けて 1 枚に見せている。
 */
/*
 * 🔴 **背景のぼかした丸**（2026-09-16 指摘「Ellipse 102 などの円が入っていない」／
 *    2026-09-17 指摘「いくつか見つからない・z-index が変で新着情報より前に来ている」で作り直し）。
 *
 * Figma では「ご挨拶＋当院の特徴」が**1 枚のマスクされた帯**（PC `Rectangle 165` 1920x1376 /
 * SP 390x2402）で、その中に**写真を 48px ぼかした楕円が 3 つ**置かれている。
 *
 * 🔴 **外側の入れ物 `.p-front-band` を足した**（`front-page.php`）。
 *    以前は丸をご挨拶と当院の特徴に振り分けていたが、
 *      ① 帯の真ん中をまたぐ丸がセクションの境目で切れる
 *      ② はみ出したぶんが**新着情報の上に乗る**（セクションが `position: relative` なので、
 *         位置指定していない後ろのセクションより手前に描かれる）
 *    という 2 つの不具合が出た。Figma と同じく**帯ごとマスクする**のが正解。
 *
 * 位置（Figma の帯の中での `absoluteRenderBounds`。＝ 書き出した PNG の枠）:
 *
 * | | PC（帯 7639〜9015） | SP（帯 9033〜11435） |
 * |---|---|---|
 * | 丸 1 Ellipse 100 | 7678 / x214 / 364x343 | 9068 / x148 / 241x259 |
 * | 丸 2 | **Ellipse 102** 8193 / x0 / 490x570 | **Ellipse 101** 9776 / x0 / 389x408 |
 * | 丸 3 | **Ellipse 101** 8464 / x1364 / 556x552 | **Ellipse 102** 10814 / x0 / 389x395 |
 *
 * ⚠️ **PC と SP で番号の並びが違う**（帯の中の位置が違うため）。
 * ⚠️ 帯の高さは Figma 1376 / 2402 に対して実装が 1219 / 2259 と少し低いので、
 *    **丸 3 だけ下端から**測っている（PC は 39px はみ出す・SP は 226px 上）。
 * ⚠️ ぼかしの halo が 48px ぶん外に出るので、楕円そのものより一回り大きい。
 *    書き出しは**フレームで切られた状態**で出てくる（PC の Ellipse 101 は 684 ではなく 556）。
 * 🔴 **`overflow: clip` を外さないこと。** 外すと丸が新着情報の上に乗り、横スクロールも出る。
 * ⚠️ `assets/img/` は Git 管理外。サーバーへ手で上げること。
 */
.p-front-band {
  position: relative;
  overflow: clip;
  background-color: #f8fcfe;
}
.p-front-band::before, .p-front-band::after {
  position: absolute;
  z-index: 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  content: "";
}
.p-front-band::before {
  top: 743px;
  left: calc(50% - 195px);
  width: 389px;
  height: 408px;
  background-image: url("../img/top/blob-sp-2.png");
}
@media (min-width: 1024px) {
  .p-front-band::before {
    top: 554px;
    left: calc(50% - 960px);
    width: 490px;
    height: 570px;
    background-image: url("../img/top/blob-pc-3.png");
  }
}
.p-front-band::after {
  bottom: 226px;
  left: calc(50% - 195px);
  width: 389px;
  height: 395px;
  background-image: url("../img/top/blob-sp-3.png");
}
@media (min-width: 1024px) {
  .p-front-band::after {
    bottom: -39px;
    left: calc(50% + 404px);
    width: 556px;
    height: 552px;
    background-image: url("../img/top/blob-pc-2.png");
  }
}

/*
 * ⚠️ 地色は `.p-front-band` が持つので、この 2 つには**背景を付けない**
 *    （付けると帯の丸を覆い隠してしまう）。
 * ⚠️ `z-index: 1` は**丸より手前に文字を出す**ため。位置指定が無いと、
 *    位置指定された `.p-front-band::before` / `::after` の方が後から描かれて字が隠れる。
 */
.p-greeting,
.p-features {
  position: relative;
  z-index: 1;
}

/*
 * 丸 1（Ellipse 100）。帯のいちばん上で**ご挨拶の中に収まりきる**ので、
 * はみ出しの心配が無くこちらに置いている（PC 39+343=382 < 606 / SP 35+259=294 < 1100）。
 */
.p-greeting::before {
  position: absolute;
  z-index: 0;
  top: 35px;
  left: calc(50% - 47px);
  width: 241px;
  height: 259px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("../img/top/blob-sp-1.png");
  content: "";
}
@media (min-width: 1024px) {
  .p-greeting::before {
    top: 39px;
    left: calc(50% - 746px);
    width: 364px;
    height: 343px;
    background-image: url("../img/top/blob-pc-1.png");
  }
}
.p-greeting > * {
  position: relative;
  z-index: 1;
}

/*
 * ⚠️ 実測は「左上が濃い青紫 → 右下が水色」の斜めグラデで、下へ行くほど薄くなる。
 *    2 セクションに分けて掛けると縦方向の継ぎ目が出るので、
 *    **横方向のグラデ**にして継ぎ目が出ないようにしている（見た目はほぼ同じ）。
 */
.p-news,
.p-schedule {
  background-image: linear-gradient(90deg, #d8e5ff 0%, #e4f0ff 55%, #e9f9ff 100%);
}

/*
 * セクションの上下余白。
 *
 * ⚠️ **ここは「セクション間の間隔の半分」を入れる**。隣り合うセクションの
 *    下パディングと上パディングが足し合わさって間隔になるため。
 *    Figma 実測の間隔は **SP 120px / PC 160px**（sp の Frame 1694 が gap 120、
 *    pc の Frame 1452 が gap 160）なので、半分の 60 / 80 を入れる。
 *    2026-09-08 まで 80 / 120 が入っていて、実際の間隔が 160 / 240 と
 *    1.5 倍に開いていた。
 */
.p-campaign,
.p-beauty,
.p-pickup,
.p-flow,
.p-case,
.p-dermatology,
.p-greeting,
.p-features,
.p-news,
.p-schedule,
.p-access {
  padding-block: 60px;
}
@media (min-width: 1024px) {
  .p-campaign,
  .p-beauty,
  .p-pickup,
  .p-flow,
  .p-case,
  .p-dermatology,
  .p-greeting,
  .p-features,
  .p-news,
  .p-schedule,
  .p-access {
    padding-block: 80px;
  }
}

/*
 * ⚠️ PC だけ、この 2 つは直前との間隔が **120px**（他は 160px）。
 *   ご挨拶 → 当院の特徴   … Figma: Frame 1129 が gap 120
 *   新着情報 → 診療予定表 … Figma: Frame 1135 が gap 120
 * どちらもデザイン上は 1 つの塊の中に並んでいるため、上だけ 20px 詰める。
 */
@media (min-width: 1024px) {
  .p-features,
  .p-schedule {
    padding-top: 40px;
  }
}
.p-hero {
  position: relative;
  /*
   * ⚠️ `flow-root` は必須（2026-09-09）。
   *    「本日の診療状況」は `margin-bottom: -66px` で **FV の帯から下へ半分出す**のが
   *    デザインだが、ここが普通のブロックだと**最後の子の負のマージンが親を突き抜けて
   *    相殺され**、帯の高さは縮まず、代わりに**次の CAMPAIGN が 66px 上に食い込んで**いた。
   *    BFC を作ると負のマージンが親の高さを縮め、カードだけが下に出る。
   */
  display: flow-root;
  background-color: #f8fcfe;
  /*
   * 背景画像は front-page.php が `--tsk-hero-pc` / `--tsk-hero-sp` で渡す（2026-09-08）。
   * 実際に使われる方しかブラウザは取得しないので、SP で PC 用の大きい画像は読まれない。
   * SP 用が無い場合は PC 用にフォールバックする。
   *
   * どちらの画像も Figma の Mask group をそのまま書き出したもので、
   * 写真の左側が白へ抜けるグラデーションまで焼き込み済み。
   *   PC 1859x719 / SP 390x284（2 倍書き出しで 780x568）
   */
  /*
   * 🔴 **SP は写真の上に「ぼかしたテクスチャ」をもう 1 枚重ねる**
   *    （2026-09-16 指摘「FV にグラデーションがない。Mask group からサイドを落としてかきだして」）。
   *
   *    Figma の SP の FV は **Mask group が 2 つ**の重ね:
   *      ① `Mask group`（1488:30456）… 写真の帯 513x284（＝ `--tsk-hero-sp` として書き出し済み）
   *      ② `Mask group`（1488:30459）… **グラデーションのマスクを掛けたテクスチャ** 434x706
   *    ②が入っていなかったので、写真の帯の下が**真横に切れて**いた。
   *
   *    ②は `Rectangle 9`（白→透明の線形グラデ）でマスクされており、**上は透明・下へ行くほど不透明**。
   *    写真の下半分を覆って地の色へ溶かす役なので、**写真より手前**（CSS では先に書いた方が手前）。
   *    書き出しは**フレームで左右が切られた状態**で出てくる（434 ではなく 390）。田中さんの
   *    「サイドを落として」はこの状態。2 倍で書き出して 780x1412。
   *    ⚠️ 置き場所は Figma の y=99、FV の上端が y=62 なので **上から 37px**。
   */
  background-image: url("../img/top/hero-texture-sp.png"), var(--tsk-hero-sp, var(--tsk-hero-pc));
  background-position: center top 37px, center top;
  background-size: 100% auto, 100% auto;
  background-repeat: no-repeat;
}
@media (min-width: 1024px) {
  .p-hero {
    background-image: var(--tsk-hero-pc);
    background-position: right center;
    background-size: cover;
    max-width: 1859px;
    margin-inline: auto;
    overflow: visible;
    border-radius: 24px;
  }
}
.p-hero--no-image {
  background-image: linear-gradient(100deg, #f4fafd 0%, #eaf4fb 55%, #fdf2f4 100%);
}
.p-hero {
  /*
   * かぶせの白。書き出した画像にはグラデーションが入っているので本来は不要だが、
   * ACF で**左が明るくない写真**に差し替えられたときにキャッチが読めなくなるため、
   * 保険として薄いものだけ残す。強くすると Figma より白っぽくなるので上げないこと。
   */
}
.p-hero::before {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.18) 30%, rgba(255, 255, 255, 0) 58%);
  content: "";
}
@media (max-width: 1023px) {
  .p-hero::before {
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.12) 32%, rgba(255, 255, 255, 0) 55%);
  }
}

.p-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding: 64px 20px 80px;
}
@media (min-width: 1024px) {
  .p-hero__inner {
    min-height: 650px;
    padding: 120px 40px 80px;
  }
}

.p-hero__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
@media (min-width: 1024px) {
  .p-hero__body {
    max-width: 700px;
  }
}

.p-hero__catch,
.p-hero__lead {
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.275;
  letter-spacing: 0.007em;
}
@media (min-width: 1024px) {
  .p-hero__catch,
  .p-hero__lead {
    font-size: 40px;
  }
}

@media (max-width: 1023px) {
  .p-hero__catch {
    /*
     * Figma SP は縦組みで左端に置かれている。
     * ⚠️ 高さを固定すると折り返し位置が文字数まかせになるので、**高さは成り行き**にして
     *    `<br class="u-sp-only">` で折り返す位置を決める（2026-09-08 指摘）。
     *    実測の列の長さは 240px（22px × 9 文字ぶん）。
     */
    align-self: flex-start;
    writing-mode: vertical-rl;
    max-height: 240px;
    margin-bottom: 40px;
    font-size: 22px;
    line-height: 1.1;
  }
}

@media (max-width: 1023px) {
  .p-hero__lead {
    font-size: 20px;
  }
}

.p-hero__accent {
  color: #4da7d6;
}

.p-hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  justify-content: center;
  margin-top: 40px;
}
@media (min-width: 1024px) {
  .p-hero__badges {
    gap: 14px;
    justify-content: flex-start;
  }
}

.p-hero__badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 108px;
  height: 108px;
  padding: 6px;
  font-size: 11px;
  line-height: 1.5;
  text-align: center;
  background-color: #ffffff;
  border: 1px solid #4da7d6;
  border-radius: 50%;
}
@media (min-width: 1024px) {
  .p-hero__badge {
    width: 184px;
    height: 184px;
    font-size: 16px;
  }
}

/*
 * FV バッジのアイコン。SVG は front-page.php に viewBox="0 0 60 60" で直書きしてある。
 * Figma 実測: SP 30x30 / PC 60x60（2026-09-08）。
 */
.p-hero__badge-icon {
  display: inline-flex;
  color: #4da7d6;
}
.p-hero__badge-icon svg {
  width: 30px;
  height: 30px;
}
@media (min-width: 1024px) {
  .p-hero__badge-icon svg {
    width: 60px;
    height: 60px;
  }
}

.p-hero__badge-title {
  font-weight: 500;
}

.p-hero__badge-sub {
  font-size: 11px;
}
@media (min-width: 1024px) {
  .p-hero__badge-sub {
    font-size: 14px;
  }
}

@media (max-width: 1023px) {
  .p-hero__note {
    display: none;
  }
}
.p-hero__note {
  margin-top: 24px;
  font-size: 14px;
  color: rgba(38, 48, 74, 0.6);
}
@media (min-width: 1024px) {
  .p-hero__note {
    position: absolute;
    top: 64px;
    right: 40px;
    margin-top: 0;
  }
}

.p-hero__today {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: calc(100% - 30px);
  max-width: 1079px;
  margin-inline: auto;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.15);
}
@media (min-width: 1024px) {
  .p-hero__today {
    flex-direction: row;
    align-items: stretch;
    min-height: 133px;
    margin-bottom: -66px;
  }
}

.p-hero__today-label {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 24px;
  font-size: 16px;
  font-weight: 700;
  color: #26304a;
  background-color: rgba(77, 167, 214, 0.2);
}
@media (min-width: 1024px) {
  .p-hero__today-label {
    flex-shrink: 0;
    width: 227px;
    font-size: 22px;
  }
}

.p-hero__today-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  flex: 1 1 auto;
  padding: 16px 24px;
  background-color: #ffffff;
}

.p-hero__today-text {
  font-size: 16px;
}
@media (min-width: 1024px) {
  .p-hero__today-text {
    font-size: 18px;
  }
}

.p-hero__today-note {
  font-size: 14px;
  color: rgba(38, 48, 74, 0.6);
}

/*
 * ⚠️ FV と CAMPAIGN の間だけ、セクション共通の 60 / 80px では足りない（2026-09-09 実測）。
 *    Figma: **FV（本日の診療状況のカードの下端）→ CAMPAIGN の帯の上端まで 120px**
 *      PC … カード下端 915 → 帯 1035
 *      SP … カード下端 842 → 本文コンテナ 962
 *    PC は**カードが帯から 66px 下に出る**ので、その 66 を足して 186 にする。
 *    （共通の `padding-block` の上側はこの指定で上書きされる。下側は 60 / 80 のまま）
 */
.p-campaign {
  padding-top: 120px;
}
@media (min-width: 1024px) {
  .p-campaign {
    padding-top: 186px;
  }
}

.p-campaign__bg {
  max-width: 1700px;
  margin-inline: auto;
  padding-block: 49px;
  /*
   * Figma 実測（2026-09-08）:
   *   塗り  linear-gradient #ACB6E5 → #86FDE8 を**不透明度 32%** で白に重ねたもの
   *         ＝ 上 #D9FDF8 / 下 #E4E9F7 の**縦**グラデ（横方向は一定）
   *   角丸  左上 0 / 右上 150 / 右下 0 / 左下 150
   */
  background-image: linear-gradient(180deg, #d9fdf8 0%, #e4e9f7 100%);
  border-radius: 0 150px 0 150px;
}
@media (min-width: 1024px) {
  .p-campaign__bg {
    padding-block: 109px;
  }
}
@media (max-width: 1023px) {
  .p-campaign__bg {
    margin-inline: 15px;
    border-radius: 0 100px 0 100px;
  }
}

.p-campaign__inner {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 20px;
}
@media (min-width: 1024px) {
  .p-campaign__inner {
    padding-inline: 40px;
  }
}

/*
 * ⚠️ 見出しは **PC も中央**（2026-09-09 指摘・Figma 実測）。
 *    Frame 350（464x78）が 1920 の中央に置かれ、テキストの揃えも CENTER。
 *    以前は PC だけ左寄せにしていた。
 */
.p-campaign__title {
  margin-bottom: 48px;
  text-align: center;
  font-family: "Ten Mincho", "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: 36px;
  font-weight: 400;
  letter-spacing: 0;
  color: #4da7d6;
}
@media (min-width: 1024px) {
  .p-campaign__title {
    font-size: 60px;
  }
}

.p-campaign__list {
  display: grid;
  justify-items: center;
  gap: 24px;
}
@media (min-width: 1024px) {
  .p-campaign__list {
    justify-items: stretch;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
  }
}

.p-campaign__item img {
  display: block;
  width: 100%;
  aspect-ratio: 400/277;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.15);
}

.p-beauty__bg {
  max-width: 1700px;
  margin-inline: auto;
  padding: 40px 20px;
  background-color: #f8fcfe;
  background-image: url("../img/top/beauty-bg.jpg");
  background-position: center;
  background-size: cover;
  border-radius: 8px;
}
@media (min-width: 1024px) {
  .p-beauty__bg {
    padding: 64px 40px;
  }
}
@media (min-width: 1600px) {
  .p-beauty__bg {
    padding-inline: 155px;
  }
}

.p-beauty__cards {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 32px;
}

.p-beauty__card {
  display: flex;
  width: 100%;
  max-width: 302px;
  /*
   * ⚠️ カードの高さは**その行で一番高いものに合わせる**（2026-09-08 指摘）。
   *    li を flex にして a を伸ばし、a の中も縦 flex にして本文で余白を吸わせる。
   */
}
.p-beauty__card > a {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
  border-radius: 24px;
}

.p-beauty__card-body {
  flex: 1 1 auto;
}

.p-beauty__card-head {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 24px 24px 0 0;
}

.p-beauty__card-img {
  display: block;
  width: 100%;
  aspect-ratio: 302/181;
  object-fit: cover;
}

.p-beauty__card-heading {
  position: absolute;
  inset-inline: 0;
  top: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
  color: #ffffff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}

.p-beauty__card-label {
  font-size: 24px;
  font-weight: 500;
}

.p-beauty__card-en {
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0;
}

.p-beauty__card-icon {
  position: absolute;
  top: 181px;
  left: 50%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 95px;
  height: 95px;
  background-color: #ffffff;
  border-radius: 50%;
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.15);
  transform: translate(-50%, -50%);
}
.p-beauty__card-icon img {
  width: 38px;
  height: 38px;
}

.p-beauty__card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 225px;
  padding: 60px 40px 36px;
  background-color: #ffffff;
  border-radius: 0 0 24px 24px;
}

.p-beauty__card-item {
  position: relative;
  padding-left: 28px;
  font-size: 18px;
  color: #222222;
}
.p-beauty__card-item::before {
  position: absolute;
  left: 0;
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-weight: 700;
  color: #4da7d6;
  content: "▸";
}

.p-pickup__inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
@media (min-width: 1024px) {
  .p-pickup__inner {
    flex-direction: row;
    align-items: center;
    gap: 64px;
  }
}

.p-pickup__head {
  margin-bottom: 0;
}
@media (min-width: 1024px) {
  .p-pickup__head {
    flex-shrink: 0;
    width: 258px;
  }
}

/*
 * スライダーのトラック（横スクロール）。1 画面に見せる枚数は Figma 実測で
 * SP 2 枚 / PC 4 枚。枚数がその数以下なら JS 側が操作 UI を出さない。
 */
.p-pickup__list {
  gap: 16px;
  grid-auto-columns: calc((100% - 16px) / 2);
}
@media (min-width: 1024px) {
  .p-pickup__list {
    gap: 32px;
    grid-auto-columns: calc((100% - 32px * 3) / 4);
  }
}

@media (min-width: 1024px) {
  .p-pickup__slider {
    flex: 1 1 auto;
    min-width: 0;
  }
}

.p-pickup__item > a {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  text-align: center;
  color: #222222;
}

.p-pickup__visual img {
  display: block;
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 16px;
}

.p-pickup__name {
  font-size: 18px;
  font-weight: 500;
}

.p-pickup__price {
  font-size: 16px;
}

.p-flow {
  background-image: linear-gradient(180deg, #ffffff 0%, #e1f4f2 28%, #c8eef6 62%, #ffffff 100%);
}

/*
 * SP は 1 枚ずつ見せるスライダー（Figma SP 実測: カード 1 枚＋下にドット）。
 * PC はデザインどおり縦に積むだけなので、トラックの指定を打ち消す。
 */
.p-flow__list {
  gap: 24px;
  grid-auto-columns: 100%;
}
@media (min-width: 1024px) {
  .p-flow__list {
    display: flex;
    flex-direction: column;
    overflow-x: visible;
  }
}

/*
 * 1 ステップぶんの白いカード。
 *
 * ⚠️ PC の中身の並びは **左に「step＋見出し」と本文、右に写真**（Figma 実測 2026-09-09）。
 *    Frame 1085: カード 1280x218・角丸 8、内側 上 30 / 左右 27、
 *    中の行は gap 16 で 左 871 ＋ 写真 340x158。
 *    2026-09-08 に「画像と本文を上下中央」と直したとき `.p-flow__item` 自体を flex にしたため、
 *    **見出しが本文の左隣の列**になってデザインと変わってしまっていた（2026-09-09 指摘）。
 *    見出しと本文は同じ左の列に積み、写真だけ右で上下中央にする。
 */
.p-flow__item {
  padding: 24px;
  background-color: #ffffff;
  border-radius: 16px;
}
@media (min-width: 1024px) {
  .p-flow__item {
    display: grid;
    grid-template-areas: "title  visual" "text   visual";
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    column-gap: 16px;
    padding: 30px 27px;
    border-radius: 8px;
  }
}

@media (min-width: 1024px) {
  .p-flow__title {
    grid-area: title;
  }
}
.p-flow__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-bottom: 8px;
  font-size: 18px;
}
@media (min-width: 1024px) {
  .p-flow__title {
    font-size: 24px;
  }
}

.p-flow__step {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0;
  color: #ffffff;
  background-color: #4da7d6;
  border-radius: 36px;
}

.p-flow__note {
  margin-top: 8px;
  font-size: 14px;
  color: rgba(38, 48, 74, 0.6);
}

/*
 * SP は「本文 → 写真」の縦積み。PC は `display: contents` にして、
 * 中の本文と写真を `.p-flow__item` のグリッドへ直接流す。
 */
.p-flow__inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (min-width: 1024px) {
  .p-flow__inner {
    display: contents;
  }
}

.p-flow__text {
  flex: 1 1 auto;
}
@media (min-width: 1024px) {
  .p-flow__text {
    grid-area: text;
  }
}

.p-flow__visual {
  flex-shrink: 0;
}
@media (min-width: 1024px) {
  .p-flow__visual {
    grid-area: visual;
    align-self: center;
    width: 340px;
  }
}
.p-flow__visual img {
  display: block;
  width: 100%;
  aspect-ratio: 340/158;
  object-fit: cover;
  border-radius: 24px;
}

/*
 * 背景は 5px 角の薄いドットを 24px 間隔で敷いたもの（Figma 実測 #EBEBEB）。
 * Figma 上は「パターン塗り」だが、実体は等間隔の格子なので画像を増やさず
 * インライン SVG のタイルで再現する。
 */
.p-case {
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect width='5' height='5' fill='%23ebebeb'/%3E%3C/svg%3E");
  background-size: 24px 24px;
}

/*
 * スライダーのトラック。1 画面に見せる枚数は Figma 実測で SP 1 枚 / PC 3 枚。
 * カードの影が切れないよう、上下に少しだけ余白を持たせてスクロールさせる。
 */
.p-case__list {
  gap: 32px;
  grid-auto-columns: 100%;
  padding-block: 8px;
}
@media (min-width: 1024px) {
  .p-case__list {
    grid-auto-columns: calc((100% - 32px * 2) / 3);
  }
}

.p-case__item {
  display: flex;
}

.p-case__card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  padding: 43px 30px 30px;
  background-color: #ffffff;
  border-radius: 24px;
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.15);
}
@media (min-width: 1024px) {
  .p-case__card {
    padding: 29px 30px 30px;
  }
}

.p-case__category {
  font-size: 18px;
  font-weight: 700;
}
@media (min-width: 1024px) {
  .p-case__category {
    font-size: 24px;
  }
}

.p-case__photos {
  display: flex;
  flex-direction: column;
}

.p-case__photo {
  position: relative;
}
.p-case__photo img {
  display: block;
  width: 100%;
  aspect-ratio: 340/185;
  object-fit: cover;
}

.p-case__photo-label {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
@media (min-width: 1024px) {
  .p-case__photo-label {
    font-size: 22px;
  }
}

/*
 * 施術名 / 費用。Figma 実測でラベル列は 66px 固定、ラベル 16px #26304A・値 18px。
 */
.p-case__info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.p-case__info-row {
  display: grid;
  grid-template-columns: 66px 1fr;
  align-items: baseline;
  column-gap: 8px;
}
.p-case__info-row dt {
  font-size: 16px;
  font-weight: 500;
  color: #26304a;
}
.p-case__info-row dd {
  font-size: 18px;
}

/*
 * リスク・副作用。**デザインには無いが医療広告ガイドライン上は必要**なので、
 * 既定は閉じた状態で置いてカードの高さをデザインに合わせている。
 */
.p-case__risk {
  font-size: 14px;
}
.p-case__risk > summary {
  cursor: pointer;
  color: rgba(38, 48, 74, 0.6);
}
.p-case__risk > p {
  margin-top: 4px;
  color: rgba(38, 48, 74, 0.6);
}

.p-case__foot {
  margin-top: auto;
  padding-top: 8px;
  text-align: center;
}

.p-case__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 200px;
  min-height: 40px;
  padding-inline: 16px;
  font-size: 15px;
  font-weight: 500;
  color: #4da7d6;
  background-color: #ffffff;
  border: 1px solid #4da7d6;
  border-radius: 36px;
}
@media (min-width: 1024px) {
  .p-case__more {
    min-width: 235px;
    min-height: 45px;
    font-size: 17px;
  }
}

/*
 * ⚠️ 背景色は付けない。Figma の一般皮膚科まわりは**白**（2026-09-08 実測）。
 *    以前は $color-surfacebase（#F8FCFE）の帯を全幅で敷いていた。
 */
.p-dermatology__inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 24px;
}
@media (min-width: 1024px) {
  .p-dermatology__inner {
    flex-direction: row;
    align-items: flex-start;
    gap: 64px;
    margin-bottom: 40px;
  }
}

/*
 * ⚠️ SP は**写真が上・説明が下**（Figma 実測）。PC は左に説明・右に写真。
 *    マークアップは PC の順（説明 → 写真）なので、SP だけ order で入れ替える。
 */
@media (max-width: 1023px) {
  .p-dermatology__visual {
    order: -1;
  }
}

.p-dermatology__lead {
  flex: 1 1 auto;
}

.p-dermatology__visual {
  flex-shrink: 0;
}
@media (min-width: 1024px) {
  .p-dermatology__visual {
    width: 377px;
  }
}
.p-dermatology__visual img {
  display: block;
  width: 100%;
  border-radius: 16px;
}

.p-dermatology__list {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(10, auto);
  gap: 8px;
}
@media (min-width: 1024px) {
  .p-dermatology__list {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(5, auto);
    gap: 16px;
  }
}
.p-dermatology__list li {
  position: relative;
  padding-left: 24px;
  font-size: 14px;
}
.p-dermatology__list li::before {
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
}
.p-dermatology__list li::before {
  position: absolute;
  left: 0;
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-weight: 700;
  color: #4da7d6;
  content: "▸";
}
@media (min-width: 1024px) {
  .p-dermatology__list li {
    font-size: 16px;
  }
}

/*
 * 施術ページがある疾患（2026-09-29 ディレクター指示）
 *
 * 「リンクがあると分かるように色分けと下線等を」への対応。
 * 🔴 **色だけに頼らない。** 色の見分けがつきにくい人にも分かるよう**下線を必ず付ける**
 *    （色だけで情報を伝えないのはアクセシビリティの基本）。
 * ⚠️ 飛び先は先方が管理画面で選ぶ（トップページの内容 → 一般皮膚科 → 対象の疾患 → リンク先の施術）。
 *    選ばなかった疾患は文字のままで、この色も下線も付かない。
 */
.p-dermatology__link {
  color: #4da7d6;
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (hover: hover) {
  .p-dermatology__link:hover {
    text-decoration: none;
  }
}

.p-greeting__inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
@media (min-width: 1024px) {
  .p-greeting__inner {
    flex-direction: row;
    align-items: flex-start;
    gap: 64px;
  }
}

.p-greeting__visual {
  flex-shrink: 0;
}
@media (min-width: 1024px) {
  .p-greeting__visual {
    width: 356px;
    /*
     * ⚠️ PC は写真の上端を**右の本文（`.p-greeting__text`）の上端**にそろえる（2026-10-01 指摘）。
     *    右は見出し（ご挨拶／GREETING）の下から本文が始まるので、その高さぶん下げる。
     *      見出し 36px × 行高 1.3 ＋ 間 8 ＋ 英字 22px × 行高 1.8 ＋ 見出しの下 48 ＋ 本文との間 24
     *    🔴 `.c-section-title` の文字サイズ・余白や `.p-greeting__body` の gap を変えたら、ここも直す。
     */
    margin-top: calc(36px * 1.3 + 8px + 22px * 1.8 + 48px + 24px);
  }
}

/*
 * 院長の写真。**角丸と後ろの青い板は CSS で付ける**（2026-10-01）。
 *
 * ⚠️ 2026-09-08 〜 10-01 は角丸と板を**画像に焼き込んだ** `top-greeting.jpg` を使っていたが、
 *    先方の指摘でクリニック紹介と同じ院長写真（花入り・素の写真）に差し替えたため、
 *    クリニック紹介（`.p-about-greeting__photo`）と同じ作りにした。
 *    ⚠️ 焼き込み済みの画像を入れ直すと、板と角丸が二重になる。
 *
 * Figma 実測（Group 611 = 356x387）:
 *   写真 342x371 @(0,0)・角丸 10 ／ 板 #4DA7D6 334x363 @(22,24)・角丸 10（影ではなく板）
 *   → 板は写真より右へ 14・下へ 16 はみ出す。枠（356 幅）に対する割合で持つ。
 */
.p-greeting__photo {
  position: relative;
  padding: 0 3.93% 4.49% 0;
}
.p-greeting__photo::before {
  position: absolute;
  top: 6.2%;
  left: 6.18%;
  width: 93.8%;
  height: 93.8%;
  background-color: #4da7d6;
  border-radius: 10px;
  content: "";
}
.p-greeting__photo img {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 342/371;
  object-fit: cover;
  border-radius: 10px;
}

.p-greeting__name {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}

.p-greeting__role {
  font-size: 16px;
}

.p-greeting__person {
  font-size: 18px;
  font-weight: 500;
}
@media (min-width: 1024px) {
  .p-greeting__person {
    font-size: 24px;
  }
}

.p-greeting__body {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/*
 * Figma 実測（2026-09-08）: ボタンは **290x52（PC）/ 290x42（SP）**・角丸 36・
 * Noto Sans JP Bold・**18px（PC）/ 16px（SP）**。並びは PC 横 gap 24 / SP 縦 gap 16。
 * ヘッダーのボタン（137x55・24px）とは寸法が違うので、ここで上書きする。
 */
.p-greeting__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
@media (max-width: 1023px) {
  .p-greeting__actions {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
}
.p-greeting__actions .c-button {
  width: 290px;
  max-width: 100%;
  min-width: 0;
  min-height: 42px;
  font-size: 16px;
  font-weight: 700;
}
@media (min-width: 1024px) {
  .p-greeting__actions .c-button {
    min-height: 52px;
    font-size: 18px;
  }
}

.p-features__list {
  display: grid;
  gap: 16px;
}
@media (min-width: 1024px) {
  .p-features__list {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }
}

.p-features__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 32px 24px;
  text-align: center;
  background-color: #ffffff;
  border: 1px solid #4da7d6;
  border-radius: 16px;
}

.p-features__item-title {
  font-size: 18px;
  color: #222222;
}
@media (min-width: 1024px) {
  .p-features__item-title {
    font-size: 24px;
  }
}

/*
 * 当院の特徴のアイコン。Figma 実測はいずれも 60x60 の枠（2026-09-08）。
 */
.p-features__item-icon {
  display: flex;
  justify-content: center;
  color: #4da7d6;
}
.p-features__item-icon svg {
  width: 60px;
  height: 60px;
}

.p-features__item-body {
  text-align: left;
}

/*
 * 新着情報の「お知らせ一覧」ボタン。
 * Figma 実測: 235x45 / 角丸 36 / 白背景 / 文字 18px（2026-09-08 指摘でサイズを合わせた）。
 */
.p-news__more {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  min-width: 235px;
  min-height: 45px;
  padding-inline: 24px;
  font-size: 18px;
  background-color: #ffffff;
  border-radius: 36px;
}

.p-news__panel {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
@media (max-width: 1023px) {
  .p-news__panel .p-news__more {
    order: 3;
    align-self: center;
  }
  .p-news__panel .p-news__list {
    order: 2;
  }
}
.p-news__panel {
  padding: 40px 20px;
  background-color: #ffffff;
  border-radius: 24px;
}
@media (min-width: 1024px) {
  .p-news__panel {
    flex-direction: row;
    align-items: flex-start;
    gap: 64px;
    padding: 64px;
  }
}

.p-news__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
@media (max-width: 1023px) {
  .p-news__head {
    display: contents;
  }
}
@media (min-width: 1024px) {
  .p-news__head {
    flex-shrink: 0;
    width: 240px;
  }
}
.p-news__head .c-section-title {
  margin-bottom: 0;
}

.p-news__list {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.p-news__item {
  border-bottom: 1px solid rgba(38, 48, 74, 0.15);
}
.p-news__item > a {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding-block: 16px;
}

.p-news__date {
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-size: 14px;
  letter-spacing: 0;
  color: rgba(38, 48, 74, 0.6);
}

.p-news__cat {
  padding: 2px 8px;
  font-size: 12px;
  color: #222222;
  border: 1px solid rgba(38, 48, 74, 0.15);
  border-radius: 36px;
}

.p-news__title {
  flex: 1 1 100%;
}
@media (min-width: 1024px) {
  .p-news__title {
    flex: 1 1 auto;
  }
}

.p-schedule__hours {
  width: 100%;
  max-width: 480px;
  margin-inline: auto;
  border-collapse: collapse;
}
.p-schedule__hours th,
.p-schedule__hours td {
  padding: 8px 16px;
  text-align: left;
  border-bottom: 1px solid rgba(38, 48, 74, 0.15);
}
.p-schedule__hours th {
  width: 8em;
  font-weight: 500;
}

.p-schedule__note {
  margin-top: 8px;
  font-size: 14px;
  text-align: center;
}

.p-access__inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
@media (min-width: 1024px) {
  .p-access__inner {
    flex-direction: row;
    gap: 64px;
  }
}

/*
 * ⚠️ SP は**マップが先**（Figma 実測: 見出し → マップ → ロゴ → 所在地 → 診療時間 → ボタン）。
 *    PC は左に情報・右にマップなので、SP だけ order で入れ替える。
 */
@media (max-width: 1023px) {
  .p-access__map {
    order: -1;
  }
}

.p-access__body {
  flex: 1 1 auto;
}

/*
 * 🔴 **`aspect-ratio` を必ず持たせる**（2026-09-16）。
 *    EWWW の遅延読み込みが `src` を **1x1 の透明 GIF** に差し替えるため、`height: auto` だと
 *    **縦横比 1:1 と見なされて 300x300 の空き**になり、本物が届いた瞬間に 300x40 へ縮む。
 *    画面の下の方にあるロゴなので、スクロールで近づいたときに**ガクッと詰まる**。
 *    元画像は 403x54（`assets/img/common/logo.png`）。
 */
.p-access__logo img {
  width: 300px;
  max-width: 100%;
  height: auto;
  aspect-ratio: 403/54;
  margin-bottom: 24px;
}

/*
 * ⚠️ SP では**表組みにしない**（Figma 実測: 項目名と内容が縦に積まれている）。
 *    PC だけ「6em ＋ 残り」の 2 列にする（2026-09-08 指摘）。
 */
/*
 * 🔴 **SP の間隔を Figma に合わせ直した**（2026-09-16 指摘「`p-access__info` の余白を再確認して」）。
 *    Figma 実測（`sp` 1488:30455）:
 *      「所在地」13615〜13644 → **8** → 住所 13652〜13710
 *                              → **16** → 「アクセス」13726 → **8** → 経路 13763〜13858
 *                              → **24** → 「営業時間」13882 → **8** → 診療時間 13919〜14022
 *    実装は **見出し → 内容が 0・かたまりの間が 8** で、上下がくっついて読みづらかった。
 *    ⚠️ Figma の「かたまりの間」は 16 と 24 の 2 通りだが（別フレームに分かれているため）、
 *       **16 に揃えている**。8px の違いで、揃っている方が自然なため。
 */
.p-access__info dt {
  margin-top: 16px;
  font-weight: 700;
  color: #222222;
}
.p-access__info dt:first-of-type {
  margin-top: 0;
}
.p-access__info dd {
  margin: 0;
  margin-top: 8px;
}
@media (min-width: 1024px) {
  .p-access__info {
    display: grid;
    grid-template-columns: 6em 1fr;
    gap: 8px 16px;
  }
  .p-access__info dt,
  .p-access__info dd {
    margin-top: 0;
  }
}

.p-access__routes li {
  position: relative;
  padding-left: 1em;
}
.p-access__routes li::before {
  position: absolute;
  left: 0;
  content: "・";
}

.p-access__hours li {
  display: flex;
  gap: 16px;
}

.p-access__hours-days {
  flex-shrink: 0;
  width: 5em;
}

/*
 * アクセスの電話 / お問合せボタン。Figma 実測（2026-09-09）:
 *   PC  電話 300x60（塗り #26304A・文字 24px Medium 白・アイコン 34）
 *       お問合せ 220x60（白・**枠線 2px #26304A**・文字 18px Bold **#222222**）
 *       どちらも角丸 61。横並び gap 32
 *   SP  どちらも 290x50 を中央に、縦並び gap 16。文字は電話 18px / お問合せ 16px
 *
 * ⚠️ お問合せは `.c-button--outline` の既定（水色の枠線と文字）のままになっていて、
 *    デザインの**濃紺**と違っていた（2026-09-09 指摘）。寸法もヘッダーのボタン
 *    （137x55・24px）のままだったので、ここで上書きする。
 */
.p-access__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
}
@media (min-width: 1024px) {
  .p-access__actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 32px;
  }
}
.p-access__actions .c-button {
  width: 290px;
  max-width: 100%;
  min-width: 0;
  min-height: 50px;
  border-radius: 61px;
}
@media (min-width: 1024px) {
  .p-access__actions .c-button {
    min-height: 60px;
  }
}
.p-access__actions .c-button--dark {
  font-size: 18px;
}
@media (min-width: 1024px) {
  .p-access__actions .c-button--dark {
    width: 300px;
    font-size: 24px;
  }
}
.p-access__actions .c-button--outline {
  font-size: 16px;
  font-weight: 700;
  color: #222222;
  border-color: #26304a;
}
@media (min-width: 1024px) {
  .p-access__actions .c-button--outline {
    width: 220px;
    font-size: 18px;
  }
}
.p-access__actions svg {
  width: 34px;
  height: 34px;
}

.p-access__map {
  flex: 1 1 auto;
}
@media (min-width: 1024px) {
  .p-access__map {
    width: 50%;
  }
}
.p-access__map img {
  display: block;
  width: 100%;
  border-radius: 16px;
}

/* =============================================================
 * クリニック紹介（固定ページ /about/）
 *
 * Figma: ページ直下 `pc_クリニック紹介`（1488:24801）/ `sp_クリニック紹介`（1488:26705）
 *        実測値の一覧は `_資料/2026-06_制作/次回の再開メモ_クリニック紹介.md`
 *
 * ⚠️ 内容幅は 1280px。`.l-container` の左右パディング 40px は `max-width` の内側なので
 *    **1280 ＋ 80 = 1360px** で指定する（トップ・治療メニュー一覧と同じ考え方）。
 * ---------------------------------------------------------- */
@media (min-width: 1024px) {
  .p-about__inner {
    max-width: 1360px;
  }
}

/*
 * 見出しの左に付く青い縦棒。医師紹介と院内設備で共通（Figma 実測 9x32・角丸 8）。
 * ⚠️ 飾りなので `aria-hidden` を付けた `<span>` で出している。
 */
.p-about-bar {
  flex-shrink: 0;
  width: 7px;
  height: 24px;
  background-color: #4da7d6;
  border-radius: 8px;
}
@media (min-width: 1024px) {
  .p-about-bar {
    width: 9px;
    height: 32px;
  }
}

/*
 * 🔴 **背景の薄い丸**（Figma の Ellipse 100〜104。2026-09-16 指摘で追加）。
 *
 * 中身は**ぼかした写真**（Figma の `LAYER_BLUR`）で、ただの飾りなので CSS の背景画像として置く。
 * 置いてあるのは 診療理念に 2 つ・ご挨拶に 1 つ（PC / SP で別の画像・別の位置）。
 *
 * ⚠️ 書き出した PNG には**ぼかしのはみ出し（halo）が含まれる**ので、丸そのものより一回り大きい。
 *    大きさ・位置は Figma の `absoluteRenderBounds`（＝ PNG の枠）に合わせてある。
 * ⚠️ 位置は Figma のページ座標を**画面の中心（`50%`）からの差**に直した値。PC は 1920 / SP は 390 が基準。
 * 🔴 **`overflow-x: clip` を外さないこと。** はみ出したぶんで**ページに横スクロールが出る**。
 *    `clip` は `hidden` と違ってスクロール領域を作らないので、縦のはみ出しはそのまま見える。
 * ⚠️ 画像は 2x で書き出したものを**1x に落としてある**（ぼけているので 2x は無駄に重い）。
 * ⚠️ `assets/img/` は Git 管理外。サーバーへ手で上げること。
 */
/*
 * 🔴 **SP だけ地色が付く**（2026-09-16 指摘「`p-about-greeting` の背景色がない たぶん Rectangle 165」）。
 *    Figma の `sp_クリニック紹介` に `Rectangle 165`（390x3427・`#F8FCFE`）が
 *    **FV の直下（y226）から ご挨拶の下（y3653）まで**敷いてある。診療理念とご挨拶の 2 つにまたがる。
 *    ⚠️ PC の同じ範囲には地色が無い（代わりに `Rectangle 131` という写真が敷いてある）ので **SP 限定**。
 *
 * ⚠️ 地色を付けたので、**丸の `z-index` を `-1` から `0` へ上げた**。`-1` のままだと
 *    セクション自身の背景より後ろへ回って**丸が消える**。中身は `z-index: 1` で丸の上に出す。
 */
.p-policy,
.p-about-greeting {
  position: relative;
  overflow-x: clip;
}
@media (max-width: 1023px) {
  .p-policy,
  .p-about-greeting {
    background-color: #f8fcfe;
  }
}
.p-policy::before, .p-policy::after,
.p-about-greeting::before,
.p-about-greeting::after {
  position: absolute;
  z-index: 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  content: "";
}
.p-policy > *,
.p-about-greeting > * {
  position: relative;
  z-index: 1;
}

.p-policy {
  padding-top: 40px;
}
@media (min-width: 1024px) {
  .p-policy {
    padding-top: 104px;
  }
}
.p-policy::before {
  top: 70px;
  left: calc(50% - 45px);
  width: 241px;
  height: 328px;
  background-image: url("../img/about/blob-sp-1.png");
}
@media (min-width: 1024px) {
  .p-policy::before {
    top: 56px;
    left: calc(50% + 116px);
    width: 440px;
    height: 440px;
    background-image: url("../img/about/blob-pc-1.png");
  }
}
.p-policy {
  /*
   * 丸 2（SP: Ellipse 101 / PC: Ellipse 103）。
   * ⚠️ SP は**下からの位置**で置く。上からだと本文の量が変わったときに離れてしまうため。
   */
}
.p-policy::after {
  bottom: 281px;
  left: calc(50% - 194px);
  width: 390px;
  height: 540px;
  background-image: url("../img/about/blob-sp-2.png");
}
@media (min-width: 1024px) {
  .p-policy::after {
    top: 309px;
    bottom: auto;
    left: calc(50% - 479px);
    width: 296px;
    height: 296px;
    background-image: url("../img/about/blob-pc-2.png");
  }
}

/*
 * 🔴 **明朝**（2026-09-16 指摘）。Figma は下層 FV のタイトルと同じ **Noto Serif JP**（ここは Bold）。
 *    行間は SP・PC とも **51px 固定**（28px でも 40px でも 51）。
 */
.p-policy__catch {
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.8214285714;
  letter-spacing: 0.007em;
  text-align: center;
}
@media (min-width: 1024px) {
  .p-policy__catch {
    font-size: 40px;
    line-height: 1.275;
  }
}

.p-policy__lead {
  margin-top: 16px;
  font-size: 16px;
  line-height: 1.8;
  text-align: center;
}
@media (min-width: 1024px) {
  .p-policy__lead {
    margin-top: 32px;
    font-size: 18px;
  }
}

.p-policy__list {
  display: grid;
  gap: 24px;
  margin-top: 40px;
}
@media (min-width: 1024px) {
  .p-policy__list {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 144px;
  }
}

/*
 * 数字はカードの上端に**重ねる**（Figma 実測: 数字 y1116 / カード y1212 で 48px 重なる）。
 * カードの上に空きを作り、そこへ絶対配置する。
 */
.p-policy__item {
  position: relative;
  padding-top: 60px;
}

/*
 * ⚠️ 塗りなし・`#4DA7D6` 1px の枠線だけの数字（Figma 実測 80px Black）。
 *    `-webkit-text-stroke` は主要 4 ブラウザが対応済み（指示書 §13 ポリシー A）。
 *    未対応でも `color: transparent` のせいで消えないよう、下地の色を残しておく。
 */
.p-policy__num {
  position: absolute;
  top: 0;
  left: 24px;
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-size: 80px;
  font-weight: 900;
  line-height: 1;
  color: rgba(77, 167, 214, 0.2);
}
@supports (-webkit-text-stroke: 1px #000) {
  .p-policy__num {
    color: transparent;
    -webkit-text-stroke: 1px #4da7d6;
  }
}
@media (min-width: 1024px) {
  .p-policy__num {
    left: 54px;
  }
}

/*
 * ⚠️ SP の内側は **52px / 20px**（2026-09-16 指摘「pb が少ない」）。
 *    Figma 実測（`sp_クリニック紹介` の Frame 1124 / 340x308・角丸 24）:
 *      カード 1012〜1320 ／ 中身 1064〜1268（x 46〜346）→ 上下 52・左右 20
 *    以前は 32px / 24px で、上下が 20px ぶん足りなかった。
 */
.p-policy__card {
  height: 100%;
  padding: 52px 20px;
  background-color: rgba(77, 167, 214, 0.2);
  border-radius: 24px;
}
@media (min-width: 1024px) {
  .p-policy__card {
    padding: 46px 47px;
  }
}

.p-policy__card-title {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
}
@media (min-width: 1024px) {
  .p-policy__card-title {
    font-size: 24px;
  }
}

.p-policy__card-text {
  margin-top: 16px;
  font-size: 16px;
  line-height: 1.8;
}
@media (min-width: 1024px) {
  .p-policy__card-text {
    margin-top: 32px;
    font-size: 18px;
  }
}

.p-about-greeting {
  padding-top: 80px;
  /*
   * ⚠️ SP だけ下に 80px。上の `Rectangle 165`（地色）が**署名の 80px 下で終わる**ため
   *    （Figma: 署名の下端 3573 → 地色の下端 3653）。
   *    その下の医師紹介まで Figma は 120px なので、`.p-doctors` の SP は 40px にしてある。
   */
  padding-bottom: 80px;
}
@media (min-width: 1024px) {
  .p-about-greeting {
    padding-bottom: 0;
  }
}
.p-about-greeting::before {
  top: -25px;
  left: calc(50% - 194px);
  width: 363px;
  height: 523px;
  background-image: url("../img/about/blob-sp-3.png");
}
@media (min-width: 1024px) {
  .p-about-greeting::before {
    top: 53px;
    left: calc(50% - 838px);
    width: 440px;
    height: 440px;
    background-image: url("../img/about/blob-pc-1.png");
  }
}
@media (min-width: 1024px) {
  .p-about-greeting {
    padding-top: 120px;
  }
}

.p-about-greeting__inner {
  display: grid;
  gap: 32px;
}
@media (min-width: 1024px) {
  .p-about-greeting__inner {
    grid-template-columns: minmax(0, 860px) 356px;
    gap: 64px;
    align-items: start;
  }
}

.p-about-greeting__title {
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.8214285714;
  letter-spacing: 0.007em;
}
@media (min-width: 1024px) {
  .p-about-greeting__title {
    font-size: 40px;
    line-height: 1.275;
  }
}

.p-about-greeting__text {
  margin-top: 24px;
  font-size: 16px;
  line-height: 1.8;
}
@media (min-width: 1024px) {
  .p-about-greeting__text {
    margin-top: 32px;
    font-size: 18px;
  }
}
.p-about-greeting__text > * + * {
  margin-top: 1em;
}

/*
 * 写真の背面に青い板をずらして敷く。
 *
 * 🔴 **ずらす向きは「写真が左上・板が右下」**（2026-09-16 指摘「背景が逆位置」）。
 *    Figma 実測（PC・SP とも同じ。枠 356 幅）:
 *      写真 342x371 を (0, 0)／板 334x363 を (22, 24)
 *    以前は逆（板が左上・写真が右下）だった。
 * ⚠️ 幅が変わっても崩れないよう、ずらす量は割合で持つ（22/356 ≒ 6%）。
 */
.p-about-greeting__photo {
  position: relative;
  max-width: 356px;
  margin-inline: auto;
  /*
   * ⚠️ **板は写真より 16px 下へはみ出す**（2026-09-17 指摘「背景の下の部分が切れてる」）。
   *    Figma 実測: 写真 342x371 @(0,0) ／ 板 334x363 @(22,24) → 板の下端 387 ＝ 写真より 16 下。
   *    `inset: … 0 …`（下端＝枠いっぱい）にしていたので、はみ出しぶんが出ていなかった。
   *    枠（356幅）に対する割合で持つ: 左 22/356・上 24/371・幅 334/356・高さ 363/371。
   */
}
.p-about-greeting__photo::before {
  position: absolute;
  top: 6.5%;
  left: 6.2%;
  width: 93.8%;
  height: 97.8%;
  background-color: #4da7d6;
  border-radius: 10px;
  content: "";
}
.p-about-greeting__photo img {
  position: relative;
  display: block;
  width: 96%;
  height: auto;
  border-radius: 10px;
}

/*
 * 署名。組織名 16px → 資格 16px → 氏名 24px。
 * ⚠️ **中央揃え**（2026-09-16 指摘で右寄せから直した。Figma の 3 行とも textAlign が CENTER）。
 */
.p-about-greeting__sign {
  display: flex;
  flex-direction: column;
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}
@media (min-width: 1024px) {
  .p-about-greeting__sign {
    font-size: 16px;
  }
}

.p-about-greeting__sign-name {
  margin-top: 8px;
  font-size: 18px;
  font-weight: 500;
}
@media (min-width: 1024px) {
  .p-about-greeting__sign-name {
    font-size: 24px;
  }
}

/*
 * ⚠️ SP は **40px**。ご挨拶の下に地色（`Rectangle 165`）のぶん 80px が入るので、
 *    Figma の 120px（地色の下端 3653 → 「医師紹介」3773）に足すとちょうどになる。
 */
.p-doctors {
  padding-top: 40px;
}
@media (min-width: 1024px) {
  .p-doctors {
    padding-top: 160px;
  }
}

/*
 * 「詳しく」の 3 名。1 人目・3 人目だけ `#F8FCFE` が敷かれる。
 *
 * ⚠️ 帯の横幅は **PC と SP で違う**:
 *      PC … コンテナ幅 1280（Figma 実測 `Frame 1429` 1280x844）
 *      SP … **画面の左右いっぱい 390**（Figma 実測 `Frame 1429` 0,3871 390x1089。2026-09-16 指摘）
 *    SP はコンテナの左右の余白（16px）ぶん外へ出し、中身は同じぶん内側へ戻す。
 *    ⚠️ `100vw` は使わない（縦スクロールバーぶん広くなって横スクロールが出る）。
 */
.p-doctor {
  padding-block: 32px;
}
@media (max-width: 1023px) {
  .p-doctor {
    margin-inline: calc(-1 * 16px);
    padding-inline: 16px;
  }
}
@media (min-width: 1024px) {
  .p-doctor {
    padding: 121px 130px 120px;
  }
}
.p-doctor:nth-child(odd) {
  background-color: #f8fcfe;
}

.p-doctor__head {
  display: grid;
  gap: 24px;
}
@media (min-width: 1024px) {
  .p-doctor__head {
    grid-template-columns: 344px minmax(0, 1fr);
    gap: 49px;
    align-items: start;
  }
}
.p-doctor__head {
  /*
   * ⚠️ 顔写真が登録されていない先生は**写真の枠ごと出ない**（2026-09-17 指示）。
   *    2 列のままだと左の 344px が空いて本文が右へ寄るので、1 列に戻す。
   */
}
@media (min-width: 1024px) {
  .p-doctor__head--no-photo {
    grid-template-columns: minmax(0, 1fr);
  }
}

.p-doctor__photo {
  width: 100%;
  height: auto;
  border-radius: 16px;
}

@media (min-width: 1024px) {
  .p-doctor__photo--detail {
    aspect-ratio: 344/374;
    object-fit: cover;
  }
}

.p-doctor__name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 500;
}
@media (min-width: 1024px) {
  .p-doctor__name {
    gap: 17px;
    font-size: 24px;
  }
}

.p-doctor__bio {
  margin-top: 16px;
  font-size: 16px;
  line-height: 1.8;
}
@media (min-width: 1024px) {
  .p-doctor__bio {
    margin-top: 32px;
    font-size: 18px;
  }
}

.p-doctor__lists {
  display: grid;
  gap: 24px;
  margin-top: 24px;
}
@media (min-width: 1024px) {
  .p-doctor__lists {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-top: 24px;
  }
}

.p-doctor__list-title {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 37px;
  padding-inline: 16px;
  font-size: 18px;
  font-weight: 500;
  color: #ffffff;
  background-color: #4da7d6;
}
@media (min-width: 1024px) {
  .p-doctor__list-title {
    justify-content: flex-start;
    min-height: 49px;
    padding-inline: 35px;
    font-size: 24px;
  }
}

/*
 * 項目。⚠️ 行頭の「・」は CSS で付ける（原稿には入れない決まり。`tsk_about_lines_list()` が
 * 入力に混ざっていた「・」を落としている）。
 */
.p-doctor__list-items {
  margin-top: 16px;
  font-size: 16px;
  line-height: 2;
}
@media (min-width: 1024px) {
  .p-doctor__list-items {
    font-size: 18px;
  }
}
.p-doctor__list-items li {
  padding-left: 1em;
  text-indent: -1em;
}
.p-doctor__list-items li::before {
  content: "・";
}

/*
 * 「コンパクト」の 5 名。
 * ⚠️ デザインは 1 段目 2 枚 ＋ 2 段目 3 枚だが、人数が増減する前提なので
 *    中央寄せの折り返し（＝ 3 枚＋2 枚）にしている（確認事項 G-25）。
 */
/*
 * コンパクトなカードの並び。
 * ⚠️ **SP は `space-between`**（2026-09-16 指摘）。2 列で、余りの 1 枚は左に残る（Figma 実測 2+2+1）。
 * ⚠️ **PC は 1 段目 2 枚 / 2 段目 3 枚**（Figma 実測。5 名のとき）。
 *    flex は枚数で勝手に割ってくれないので、2 枚目の後ろに `--row-break` を挟んでいる
 *    （`page-about.php`。5 名ちょうどのときだけ出す）。
 */
.p-doctors__cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 24px;
  margin-top: 80px;
}
@media (min-width: 1024px) {
  .p-doctors__cards {
    justify-content: center;
    gap: 120px 80px;
    margin-top: 120px;
  }
}

.p-doctors__row-break {
  display: none;
}
@media (min-width: 1024px) {
  .p-doctors__row-break {
    display: block;
    width: 100%;
    height: 0;
  }
}

.p-doctor-card {
  width: calc(50% - 24px / 2);
}
@media (min-width: 1024px) {
  .p-doctor-card {
    width: 350px;
  }
}

.p-doctor__photo--compact {
  aspect-ratio: 344/374;
  object-fit: cover;
}

.p-doctor-card__name {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 18px;
  font-weight: 500;
}
@media (min-width: 1024px) {
  .p-doctor-card__name {
    gap: 17px;
    margin-top: 24px;
    font-size: 24px;
  }
}

.p-doctor-card__more {
  margin-top: 8px;
}
@media (min-width: 1024px) {
  .p-doctor-card__more {
    margin-top: 24px;
  }
}

/*
 * 開閉のつまみ。Figma 実測: 350x47・白・角丸 8・16px `#4DA7D6` ＋ 右に ＋ のアイコン。
 * ⚠️ `<summary>` の既定の三角は消す。開くと ＋ が − になる。
 */
.p-doctor-card__more-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 35px;
  padding-inline: 8px;
  font-size: 14px;
  color: #4da7d6;
  cursor: pointer;
  list-style: none;
  background-color: #ffffff;
  border: 1px solid rgba(77, 167, 214, 0.2);
  border-radius: 8px;
}
.p-doctor-card__more-summary::-webkit-details-marker {
  display: none;
}
@media (min-width: 1024px) {
  .p-doctor-card__more-summary {
    min-height: 47px;
    font-size: 16px;
  }
}
.p-doctor-card__more-summary::after {
  position: relative;
  width: 15px;
  height: 15px;
  background-color: currentcolor;
  content: "";
  clip-path: polygon(43% 0, 57% 0, 57% 43%, 100% 43%, 100% 57%, 57% 57%, 57% 100%, 43% 100%, 43% 57%, 0 57%, 0 43%, 43% 43%);
}
@media (hover: hover) {
  .p-doctor-card__more-summary:hover {
    opacity: 0.8;
  }
}

[open] > .p-doctor-card__more-summary::after {
  clip-path: polygon(0 43%, 100% 43%, 100% 57%, 0 57%);
}

/*
 * 🔴 開いた中身の見た目は Figma に**別フレームで描かれている**（2026-09-16 指摘
 *    「`p-doctor-card__more-body` の見た目と中身が違う」で見つけた）。
 *    `Frame 1784`（1488:25457 / 伊藤）・`Frame 1785`（豊原）・`Frame 1809`（諏訪）・
 *    `Frame 1810`（内山）が**カードを開いた状態**で、ページのフレームの外に置かれている。
 *
 * 実測（SP。カード幅 172）:
 *   つまみ 172x35 → 16 → 「略歴」の帯 172x35 → 16 → 項目 → 16 → 「資格・所属」の帯 → 16 → 項目
 *   帯   … `#4DA7D6` べた塗り・**白文字 18px Medium・中央**（左寄せの青文字ではない）
 *   項目 … 14px Regular・行送り 24px・項目どうし 4px・行頭「・」で 2 行目は字下げ
 *
 * ⚠️ **PC の開いた状態はデザインに無い。** 帯の高さだけ、閉じているときのつまみ（47px）に
 *    合わせてある。文字はつまみと同じ SP 14 → PC 16 の上げ方に揃えた。
 */
.p-doctor-card__more-body {
  margin-top: 16px;
}

.p-doctor-card__more-title {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 35px;
  padding: 4px 8px;
  font-size: 18px;
  font-weight: 500;
  color: #ffffff;
  text-align: center;
  background-color: #4da7d6;
}
@media (min-width: 1024px) {
  .p-doctor-card__more-title {
    min-height: 47px;
  }
}

.p-doctor-card__more-items {
  display: grid;
  gap: 4px;
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.7142857143;
}
.p-doctor-card__more-items + .p-doctor-card__more-title {
  margin-top: 16px;
}
@media (min-width: 1024px) {
  .p-doctor-card__more-items {
    font-size: 16px;
    line-height: 1.8;
  }
}
.p-doctor-card__more-items li {
  padding-left: 1em;
  text-indent: -1em;
}
.p-doctor-card__more-items li::before {
  content: "・";
}

.p-about-band {
  margin-top: 80px;
  padding-block: 80px;
  background-color: #f8fcfe;
}
@media (min-width: 1024px) {
  .p-about-band {
    margin-top: 160px;
    padding-block: 148px 120px;
  }
}

.p-facilities__list {
  display: grid;
  gap: 32px;
}
@media (min-width: 1024px) {
  .p-facilities__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 64px 40px;
  }
}

.p-facilities__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 500;
}
@media (min-width: 1024px) {
  .p-facilities__title {
    gap: 17px;
    font-size: 24px;
  }
}

.p-facilities__photo {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 8px;
  border-radius: 8px;
}

.p-facilities__text {
  margin-top: 16px;
  font-size: 16px;
  line-height: 1.8;
}
@media (min-width: 1024px) {
  .p-facilities__text {
    font-size: 18px;
  }
}

.p-clinic-info {
  padding-top: 80px;
}
@media (min-width: 1024px) {
  .p-clinic-info {
    padding-top: 148px;
  }
}

.p-clinic-info__inner {
  display: grid;
  gap: 32px;
}
@media (min-width: 1024px) {
  .p-clinic-info__inner {
    grid-template-columns: minmax(0, 615px) minmax(0, 1fr);
    gap: 48px;
    align-items: start;
  }
}

/*
 * 🔴 **SP は縦積み・ラベルは太字**（2026-09-16 指摘）。
 *    Figma 実測（`sp_クリニック紹介`）:
 *      「営業時間」 x16 / y10798 / **16px Bold** → 8px → 「月曜～木曜」 x16 / y10835 / 16px Regular
 *    ＝ ラベルが上、表が下。PC は横並びのまま（x321 のラベル → 40px → x436 の表・どちらも 18px Regular）。
 */
.p-clinic-info__hours {
  display: grid;
  gap: 8px;
  font-size: 16px;
}
.p-clinic-info__hours dt {
  font-weight: 700;
}
@media (min-width: 1024px) {
  .p-clinic-info__hours {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 40px;
    font-size: 18px;
  }
  .p-clinic-info__hours dt {
    font-weight: 400;
  }
}

.p-clinic-info__hours-list {
  display: grid;
  gap: 8px;
  /*
   * ⚠️ 曜日の列は**内容に合わせる**。固定幅にすると「月曜日〜木曜日」で折り返す
   *    （`tsk_clinic_hours_label()` が略記を開くため、Figma の「月曜～木曜」より長い）。
   */
}
.p-clinic-info__hours-list li {
  display: grid;
  grid-template-columns: minmax(max-content, auto) minmax(0, 1fr);
  gap: 8px;
}
@media (min-width: 1024px) {
  .p-clinic-info__hours-list {
    gap: 4px;
    /*
     * ⚠️ Figma の曜日は「月曜～木曜」（94px）だが、実装は `tsk_clinic_hours_label()` が
     *    「月曜日〜木曜日」まで開く（診療予定表のカードと表記を揃えるため）。
     *    123px だと折り返すので、内容に合わせて確保する。
     */
  }
  .p-clinic-info__hours-list li {
    grid-template-columns: minmax(max-content, auto) minmax(0, 1fr);
    gap: 24px;
  }
}

/*
 * ⚠️ 診療予定表のカードは**中に診療時間表を持っている**（2026-09-09 の決定。
 *    PC / SP で内容が変わらないようカード内へ統一した）。このページは左に同じ表を
 *    出しているので、**カード内のぶんだけ隠す**。同じ表が 1 画面に 2 つ出てしまうため。
 *    Figma でもカレンダーの中に時間表は無く、左に置かれている。
 */
.p-clinic-info__calendar .p-clinic-calendar__hours {
  display: none;
}

.p-clinic-info__notes {
  margin-top: 24px;
  font-size: 14px;
  line-height: 1.8;
}
@media (min-width: 1024px) {
  .p-clinic-info__notes {
    margin-top: 40px;
    font-size: 18px;
  }
}
.p-clinic-info__notes li {
  padding-left: 1em;
  text-indent: -1em;
}
.p-clinic-info__notes li::before {
  content: "・";
}

.p-clinic-info__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 24px;
}
@media (min-width: 1024px) {
  .p-clinic-info__actions {
    gap: 32px;
    margin-top: 40px;
  }
}

.p-about-access {
  padding-top: 80px;
}
@media (min-width: 1024px) {
  .p-about-access {
    padding-top: 160px;
  }
}

/*
 * ⚠️ **SP は地図が先・入口の写真が後**（Figma 実測 SP: 地図 y12184 → 写真 y12568。2026-09-16 指摘）。
 *    PC は左が写真・右が地図なので、HTML は PC の並び（写真 → 地図）のままにして、
 *    SP だけ `order` で入れ替える。
 */
/*
 * 🔴 **診療案内のカレンダーは一回り小さい**（2026-09-16 指摘「セル内の padding を調整して」）。
 *
 * カレンダーの部品（`project/_clinic-calendar.scss`）の寸法は**トップページの Figma**が基準で、
 * 曜日 25px / 日付 24px / セルの高さ 97px。トップは横幅 1280 あるので釣り合うが、
 * クリニック紹介は**右カラムの 616px**（Figma 実測）なのでセルが大きすぎた。
 *
 * Figma（`pc_クリニック紹介` の Group 429）の実測:
 *   カード 617 幅 ／ 曜日の行 38 高・20px ／ 日付の行 61 高・16px ／ 下の注記 96 高
 *
 * ⚠️ ここは**このページの中だけ**の上書き。トップページのカレンダーは触らない。
 * ⚠️ `height` は表のセルなので**最低の高さ**として効く。担当が 2 行入る日は自然に伸びる。
 */
@media (min-width: 1024px) {
  .p-clinic-info__calendar .p-clinic-calendar__table thead th {
    height: 38px;
    padding: 4px;
    font-size: 20px;
  }
  .p-clinic-info__calendar .p-clinic-calendar__table td {
    height: 61px;
    padding: 4px;
    font-size: 16px;
  }
  .p-clinic-info__calendar .p-clinic-calendar__day {
    font-size: 16px;
  }
}

.p-about-access__maps {
  display: grid;
  gap: 16px;
}
.p-about-access__maps .p-about-access__map--embed {
  order: -1;
}
@media (min-width: 1024px) {
  .p-about-access__maps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }
  .p-about-access__maps .p-about-access__map--embed {
    order: 0;
  }
}

.p-about-access__map {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1;
  border-radius: 8px;
}
.p-about-access__map img,
.p-about-access__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

.p-about-access__card {
  position: absolute;
  top: 8px;
  left: 8px;
  max-width: calc(100% - 16px);
  padding: 8px;
  font-size: 14px;
  line-height: 1.5;
  background-color: #ffffff;
  border-radius: 8px;
}
@media (min-width: 1024px) {
  .p-about-access__card {
    top: 16px;
    left: 13px;
    padding: 13px 16px;
    font-size: 16px;
  }
}

@media (min-width: 1024px) {
  .p-about-access__card-address {
    font-size: 17px;
  }
}

.p-route {
  padding-top: 80px;
}
@media (min-width: 1024px) {
  .p-route {
    padding-top: 80px;
  }
}

.p-route__lead {
  font-size: 18px;
  line-height: 1.8;
  text-align: center;
}
@media (min-width: 1024px) {
  .p-route__lead {
    font-size: 18px;
  }
}

.p-route__list {
  display: grid;
  gap: 32px;
  margin-top: 32px;
}
@media (min-width: 1024px) {
  .p-route__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 64px 40px;
    margin-top: 48px;
  }
}

.p-route__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 500;
}
@media (min-width: 1024px) {
  .p-route__title {
    font-size: 18px;
  }
}

.p-route__step {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 76px;
  min-height: 30px;
  padding-inline: 8px;
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  background-color: #4da7d6;
  border-radius: 36px;
}
@media (min-width: 1024px) {
  .p-route__step {
    min-width: 87px;
    min-height: 35px;
    font-size: 18px;
  }
}

.p-route__photo {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 8px;
  border-radius: 8px;
}

/*
 * 写真がまだ入っていないステップ（2026-09-28）
 *
 * ⚠️ 空のままにすると**その行だけ写真が無くなって高さが揃わず**崩れて見えるので、
 *    同じ大きさの枠に「準備中」と出す。
 * ⭕ **管理画面で写真を入れれば自動で写真に戻る**（準備中の画像を用意する必要はない）。
 *    画像を入れてしまうと「入っている」状態になり、**差し替え忘れに気づきにくい**ため
 *    あえてファイルを持たせていない。
 * ⚠️ `aspect-ratio` は写真の 400x351 に合わせる。揃っていないと行ごとに高さがずれる。
 */
.p-route__photo--pending {
  display: grid;
  place-items: center;
  aspect-ratio: 400/351;
  background-color: #f8fcfe;
  border: 1px dashed rgba(38, 48, 74, 0.15);
  color: rgba(38, 48, 74, 0.6);
  font-size: 14px;
}
@media (min-width: 1024px) {
  .p-route__photo--pending {
    font-size: 16px;
  }
}

.p-route__text {
  margin-top: 16px;
  font-size: 16px;
  line-height: 1.8;
}
@media (min-width: 1024px) {
  .p-route__text {
    font-size: 18px;
  }
}

.p-clinic-calendar {
  margin-top: 32px;
  scroll-margin-top: 150px;
}
@media (max-width: 767px) {
  .p-clinic-calendar {
    scroll-margin-top: 80px;
  }
}

.p-clinic-calendar__card {
  overflow: hidden;
  background-color: #fff;
  border: 1px solid #26304a;
  border-radius: 24px;
}

.p-clinic-calendar__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 88px;
  padding-inline: 111px;
  background-color: #26304a;
}
@media (max-width: 767px) {
  .p-clinic-calendar__head {
    min-height: 60px;
    padding-inline: 16px;
  }
}

.p-clinic-calendar__month {
  flex: 1 1 auto;
  margin: 0;
  color: #fff;
  font-size: 30px;
  font-weight: 700;
  text-align: center;
}
@media (max-width: 767px) {
  .p-clinic-calendar__month {
    font-size: 18px;
  }
}

.p-clinic-calendar__arrow {
  position: relative;
  flex: 0 0 auto;
  width: 49px;
  height: 24px;
}
.p-clinic-calendar__arrow::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #fff;
  content: "";
}
.p-clinic-calendar__arrow::after {
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  content: "";
}
.p-clinic-calendar__arrow.is-prev::after {
  left: 0;
  transform: translateY(-50%) rotate(-135deg);
}
.p-clinic-calendar__arrow.is-next::after {
  right: 0;
  transform: translateY(-50%) rotate(45deg);
}
.p-clinic-calendar__arrow.is-disabled {
  opacity: 0.3;
}
@media (hover: hover) {
  .p-clinic-calendar__arrow:hover {
    opacity: 0.7;
  }
}
@media (max-width: 767px) {
  .p-clinic-calendar__arrow {
    width: 24px;
  }
  .p-clinic-calendar__arrow::after {
    width: 9px;
    height: 9px;
  }
}

.p-clinic-calendar__table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}
.p-clinic-calendar__table th,
.p-clinic-calendar__table td {
  border: 1px solid #26304a;
  text-align: center;
  vertical-align: top;
}
.p-clinic-calendar__table tr > :first-child {
  border-left: 0;
}
.p-clinic-calendar__table tr > :last-child {
  border-right: 0;
}
.p-clinic-calendar__table thead th {
  height: 61px;
  padding: 8px 4px;
  font-size: 25px;
  font-weight: 400;
  color: #222222;
  border-top: 0;
}
@media (max-width: 767px) {
  .p-clinic-calendar__table thead th {
    height: 40px;
    font-size: 16px;
  }
}
.p-clinic-calendar__table td {
  height: 97px;
  padding: 8px 4px;
  font-size: 15px;
  color: #222222;
}
@media (max-width: 767px) {
  .p-clinic-calendar__table td {
    height: 64px;
    padding: 4px 2px;
    font-size: 11px;
  }
}
.p-clinic-calendar__table tbody tr:last-child > * {
  border-bottom: 0;
}
.p-clinic-calendar__table .is-sun,
.p-clinic-calendar__table .is-holiday {
  color: #e53e3e;
}
.p-clinic-calendar__table .is-sat {
  color: #3b82f6;
}
.p-clinic-calendar__table thead th,
.p-clinic-calendar__table tbody td {
  background-color: #fff;
}
.p-clinic-calendar__table tbody td.is-sun {
  background-color: #fff5f5;
}

.p-clinic-calendar__day {
  display: block;
  font-size: 24px;
  color: #222222;
}
@media (max-width: 767px) {
  .p-clinic-calendar__day {
    font-size: 14px;
  }
}

.p-clinic-calendar__table .is-sun .p-clinic-calendar__day,
.p-clinic-calendar__table .is-holiday .p-clinic-calendar__day {
  color: #e53e3e;
}

.p-clinic-calendar__table .is-sat .p-clinic-calendar__day {
  color: #3b82f6;
}

.p-clinic-calendar__closed {
  display: block;
  margin-top: 2px;
  color: #e53e3e;
}

.p-clinic-calendar__normal {
  display: block;
  margin-top: 2px;
  color: #222222;
}

.p-clinic-calendar__staff {
  display: block;
  margin-top: 2px;
  color: #222222;
}

.p-clinic-calendar__mark {
  margin-left: 0.2em;
  color: #e07800;
  font-weight: 700;
}

.p-clinic-calendar__time {
  display: block;
  font-size: 0.8em;
  line-height: 1.3;
}

.p-clinic-calendar__note {
  display: block;
  font-size: 0.8em;
  color: #e07800;
}

.p-clinic-calendar__foot {
  padding: 24px 32px;
  border-top: 1px solid #26304a;
  font-size: 16px;
}
@media (max-width: 767px) {
  .p-clinic-calendar__foot {
    padding: 16px;
    font-size: 13px;
  }
}

.p-clinic-calendar__footnote {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 32px;
  margin: 0;
}

.p-clinic-calendar__remark {
  margin: 8px 0 0;
  line-height: 1.8;
}

.p-clinic-calendar__hours {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(38, 48, 74, 0.25);
}

.p-clinic-calendar__hours-title {
  margin: 0 0 8px;
  font-size: 1em;
}

.p-clinic-calendar__hours-table {
  border-collapse: collapse;
}
.p-clinic-calendar__hours-table th,
.p-clinic-calendar__hours-table td {
  padding: 2px 0;
  font-weight: 400;
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
}
.p-clinic-calendar__hours-table th {
  padding-right: 32px;
  color: #26304a;
}
@media (max-width: 767px) {
  .p-clinic-calendar__hours-table th {
    padding-right: 16px;
  }
}

.p-clinic-calendar__hours-note {
  margin: 8px 0 0;
  font-size: 0.9em;
}

.p-treatment__inner {
  width: 100%;
  max-width: 988px;
  margin-inline: auto;
  padding-inline: 15px;
}
.p-treatment__inner--wide {
  max-width: 1310px;
}
.p-treatment__inner--price {
  max-width: 1065px;
}

.p-treatment__section {
  margin-top: 120px;
}
@media (min-width: 1024px) {
  .p-treatment__section {
    margin-top: 160px;
  }
}

/*
 * 🔴 **画像を持つセクションの下だけ 30px 足す**（2026-09-17 指示）。
 *
 * 「効果のしくみの画像 → 施術の流れ」が詰まって見える、という指摘。
 * ⚠️ 実測すると **Figma とは一致している**（PC 160 / SP 120）。
 *    写真の下端は横一直線のはっきりした境目なので、本文で終わるセクションと同じ 160px でも
 *    詰まって見える、という話。**デザインより広げる**のは承知のうえ（田中さんの指示）。
 *
 * ⚠️ セクション間の `margin-top` は**全部のセクション**に効くので触らない。
 *    代わりに「画像を持つセクション」の下にだけ `padding-bottom` を足す。
 *    このページで効くのは 導入 / こんな肌悩みに / 効果のしくみ の 3 つ
 *    （＝ 画像の下だけ 160 → 190 / 120 → 150 になる）。
 * ⚠️ `:has()` は指示書 §13 のポリシー A で採用可（主要 4 ブラウザ対応済み）。
 *    効かないブラウザでも Figma どおりの間隔になるだけなので実害は無い。
 */
.p-treatment__section:has(.p-treatment__figures) {
  padding-bottom: 30px;
}

/*
 * 🔴 **SP はパンくずの下を大きく空ける**（2026-09-16 指摘「パンくずリストとタイトルの距離が近い」）。
 *    Figma 実測（`sp_施術一覧_しみ・美白`）:
 *      帯の下端 226 → パンくず 226〜274 → キャッチ **354**
 *      ＝ パンくずの下に **80px**。実装は下の余白が 24px しかなく、キャッチがすぐ下に来ていた。
 * ⚠️ PC は Figma だと帯の直後（上の余白 0）だが、実装は 40px 空けたまま**触っていない**
 *    （田中さんの指摘は SP だけ。PC はパンくず → キャッチが 104px で Figma の 108px とほぼ同じ）。
 */
.p-treatment__breadcrumb {
  padding-block: 24px 80px;
}
@media (min-width: 1024px) {
  .p-treatment__breadcrumb {
    padding-block: 40px 0;
  }
}

/*
 * ⚠️ SP と PC で**並び順が違う**（Figma 実測）。
 *   PC: 左に［キャッチ → リード → スペック］、右に写真（2 カラム・上下中央）
 *   SP: キャッチ → **写真** → リード → スペック（1 カラム）
 * DOM は PC の構造（body の中にキャッチ / リード / スペック）のままにして、
 * SP では `display: contents` で body を透過させ、`order` で写真を 2 番目に差し込む。
 */
.p-treatment__intro {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
@media (min-width: 1024px) {
  .p-treatment__intro {
    display: block;
    margin-top: 104px;
  }
}
.p-treatment__intro {
  /*
   * 写真がある場合だけ 2 カラム。
   * ⚠️ Figma 実測: 左 756px ＋ gap 24px ＋ 右 385px = **1165px** を、外枠 1280px の中で
   *    中央に置いている（左右 57.5px ずつ空く）。`justify-content: space-between` にすると
   *    両端まで広がって間隔が 139px になってしまう（2026-09-08 の不具合）。
   */
}
@media (min-width: 1024px) {
  .p-treatment__intro.is-with-image {
    display: grid;
    grid-template-columns: 756px 385px;
    gap: 24px;
    align-items: center;
    max-width: 1165px;
    margin-inline: auto;
  }
}

.p-treatment__intro-body {
  display: contents;
}
@media (min-width: 1024px) {
  .p-treatment__intro-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
}

.p-treatment__intro-image {
  order: 2;
  text-align: center;
}
@media (min-width: 1024px) {
  .p-treatment__intro-image {
    order: 0;
    text-align: left;
  }
}
.p-treatment__intro-image img {
  display: inline-block;
  width: auto;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}
@media (min-width: 1024px) {
  .p-treatment__intro-image img {
    display: block;
    width: 100%;
  }
}

@media (min-width: 1024px) {
  .p-treatment__catch,
  .p-treatment__lead {
    max-width: 679px;
  }
}

.p-treatment__catch {
  order: 1;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
  color: #26304a;
}
@media (min-width: 1024px) {
  .p-treatment__catch {
    font-size: 28px;
  }
}

.p-treatment__lead {
  order: 3;
  font-size: 16px;
  line-height: 1.8;
}
@media (min-width: 1024px) {
  .p-treatment__lead {
    font-size: 18px;
  }
}

.p-treatment__spec {
  order: 4;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 0;
}
@media (min-width: 1024px) {
  .p-treatment__spec {
    grid-template-columns: repeat(4, minmax(0, 183px));
    margin-top: 40px;
  }
}

/*
 * Figma 実測: カード（PC 183x120 / SP 161x120）の中で、ラベルと値のかたまりが
 * **上下左右とも中央**。ただし文字そのものは左寄せで左端が揃う。
 * `place-content: center` で箱ごと中央に置き、`justify-items: start` で左端を揃える。
 */
.p-treatment__spec-item {
  display: grid;
  place-content: center;
  justify-items: start;
  gap: 8px;
  min-height: 120px;
  padding: 8px;
  text-align: left;
  background-color: #ffffff;
  border: 1px solid #daeef8;
  border-radius: 8px;
}

.p-treatment__spec-label {
  font-size: 15px;
  color: #222222;
}
@media (min-width: 1024px) {
  .p-treatment__spec-label {
    font-size: 17px;
  }
}

.p-treatment__spec-value {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  color: #222222;
}
@media (min-width: 1024px) {
  .p-treatment__spec-value {
    font-size: 20px;
  }
}
.p-treatment__spec-value {
  /*
   * 補足（「/1回」「(軽い赤み程度)」など）。
   * 既定は値に続けて 1 行。ACF の値に改行が入っていれば `is-break` が付いて 2 行になる。
   * Figma は「約20分/1回」だけ 1 行、他は 2 行（2026-09-08 指摘）。
   */
}
.p-treatment__spec-value small {
  font-size: 14px;
  font-weight: 400;
}
.p-treatment__spec-value small.is-break {
  display: block;
}

/*
 * 🔴 **導入との間隔**（2026-09-16 指摘「`p-treatment__toc` とその前の距離が近い」）。
 *    Figma 実測:
 *      SP … 導入の下端 1195 → 目次 1315 ＝ **120px**（実装は 40px だった）
 *      PC … 導入の下端  914 → 目次  995 ＝ **80px**（実装は 64px だった）
 */
.p-treatment__toc {
  margin-top: 120px;
  padding: 24px;
  background-color: #f8fcfe;
  border: 1px solid #4da7d6;
  border-radius: 8px;
}
@media (min-width: 1024px) {
  .p-treatment__toc {
    margin-top: 80px;
    padding: 40px 16px;
  }
}
.p-treatment__toc ul {
  display: grid;
  gap: 16px 24px;
  max-width: 981px;
  margin-inline: auto;
}
@media (min-width: 768px) {
  .p-treatment__toc ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .p-treatment__toc ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.p-treatment__toc a {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 18px;
  /*
   * ⚠️ foundation の `a:hover { text-decoration: underline }` を打ち消す。
   *    a に下線が掛かると、擬似要素で出しているマーカーにも線が乗ってしまう
   *    （text-decoration は子孫に伝播し、子孫側では消せない。2026-09-08 指摘）。
   */
  text-decoration: none;
}
@media (min-width: 1024px) {
  .p-treatment__toc a {
    font-size: 18px;
  }
}
.p-treatment__toc a::before {
  flex-shrink: 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  color: #4da7d6;
  content: "‣";
}
.p-treatment__toc a {
  /*
   * 下線は**文字だけ**に付ける（2026-09-08 指摘）。
   * a に text-decoration を掛けると擬似要素のマーカーにも線が乗ってしまう。
   */
}
@media (hover: hover) {
  .p-treatment__toc a:hover {
    color: #4da7d6;
    text-decoration: none;
  }
  .p-treatment__toc a:hover span {
    text-decoration: underline;
  }
}

/*
 * セクションの中身を積む入れ物。
 * ⚠️ 中身（本文 / 小見出しブロック / 画像）は**順番が自由**なので、
 *    要素ごとの margin-top ではなく、この入れ物の gap で間隔を取る。
 *    Figma 実測: 中身どうしの間隔は SP 32px / PC 48px。
 */
.p-treatment__section-contents {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
@media (min-width: 1024px) {
  .p-treatment__section-contents {
    gap: 48px;
  }
}

.p-treatment__prose {
  max-width: 958px;
  margin-inline: auto;
  font-size: 16px;
  line-height: 1.8;
}
@media (min-width: 1024px) {
  .p-treatment__prose {
    font-size: 18px;
  }
}
.p-treatment__prose > * + * {
  margin-top: 16px;
}
.p-treatment__prose {
  /*
   * Figma「このような方におすすめです」= 中央寄せの 28px。
   * 実測では見出しの**上下とも 48px** 空く（本文 → 見出し → リストがそれぞれ 48px）。
   * `> * + *` の 16px と二重にならないよう、直後の要素の margin-top は打ち消す。
   */
}
.p-treatment__prose h3 {
  margin-top: 32px;
  margin-bottom: 32px;
  font-size: 20px;
  font-weight: 500;
  text-align: center;
}
@media (min-width: 1024px) {
  .p-treatment__prose h3 {
    margin-top: 48px;
    margin-bottom: 48px;
    font-size: 28px;
  }
}
.p-treatment__prose h3 + * {
  margin-top: 0;
}
.p-treatment__prose h4 {
  margin-top: 32px;
  font-size: 18px;
  font-weight: 700;
}
@media (min-width: 1024px) {
  .p-treatment__prose h4 {
    font-size: 24px;
  }
}
.p-treatment__prose {
  /*
   * ⚠️ `.u-imglist`（写真を並べるリスト）は除く。
   *    ここは詳細度が `.u-imglist` より高いので、除外しないと
   *    **横並びにならず幅も 648px に縛られ、写真にも「・」が付く**（2026-09-29）。
   */
}
.p-treatment__prose ul:not(.u-imglist) {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 648px;
  margin-inline: auto;
}
.p-treatment__prose ul:not(.u-imglist) li {
  padding-left: 1em;
  text-indent: -1em;
}
.p-treatment__prose ul:not(.u-imglist) li::before {
  content: "・";
}
.p-treatment__prose a {
  color: #4da7d6;
  text-decoration: underline;
}

/*
 * 見出しの寄せ方（ACF「見出しの寄せ方」。2026-09-24 の先方要望）
 *
 * 🔴 **既定は「セクション見出し＝中央／小見出し＝左」** なので、
 *    ここでは**既定と違うほうだけ**を上書きしている。
 *    ・`--align-left`   … セクション見出しを左へ（小見出しは元から左なので触らない）
 *    ・`--align-center` … 小見出しを中央へ（セクション見出しは元から中央なので触らない）
 *
 * ⚠️ **本文は寄せない。** 長い文章の中央寄せは読みにくいため、意図的に対象外。
 * ⚠️ 小見出しは青いバー付きの flex なので、`text-align` では動かない。`justify-content` で寄せる。
 */
.p-treatment__section--align-left .c-section-title {
  text-align: left;
}

.p-treatment__section--align-center .p-treatment__block-title {
  justify-content: center;
}

.p-treatment__blocks {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
@media (min-width: 1024px) {
  .p-treatment__blocks {
    gap: 48px;
  }
}

.p-treatment__block-title {
  display: flex;
  gap: 16px;
  align-items: center;
  font-size: 18px;
  font-weight: 500;
  color: #222222;
}
@media (min-width: 1024px) {
  .p-treatment__block-title {
    font-size: 24px;
  }
}
.p-treatment__block-title::before {
  flex-shrink: 0;
  width: 6px;
  height: 1.5em;
  background-color: #4da7d6;
  border-radius: 999px;
  content: "";
}
@media (min-width: 1024px) {
  .p-treatment__block-title::before {
    width: 11px;
  }
}

.p-treatment__block-body {
  margin-top: 24px;
  font-size: 16px;
  line-height: 1.8;
}
@media (min-width: 1024px) {
  .p-treatment__block-body {
    font-size: 18px;
  }
}
.p-treatment__block-body {
  /*
   * ⚠️ リッチエディターの欄なので中身は `<p>` の集まり（2026-09-28）。
   *    リセットで `p { margin: 0 }` にしてあるため、**ここで段落の間隔を作らないと
   *    文章が 1 塊に詰まって見える**（`.p-treatment__prose` と同じ扱い）。
   */
}
.p-treatment__block-body > * + * {
  margin-top: 16px;
}

.p-treatment__figures {
  display: grid;
  gap: 16px;
}
@media (min-width: 1024px) {
  .p-treatment__figures {
    gap: 24px;
  }
}
.p-treatment__figures {
  /*
   * 1 枚のときは引き伸ばさない（2026-09-08 指摘）。
   * 元画像より大きく表示すると粗くなるので `width: 100%` ではなく `max-width: 100%` にし、
   * 列より狭い画像は中央に置く（Figma 実測でも 958px の列に 867px の画像が中央で入っている）。
   */
}
.p-treatment__figures--1 {
  justify-items: center;
}
.p-treatment__figures--1 .p-treatment__figure img {
  width: auto;
  max-width: 100%;
}
.p-treatment__figures {
  /*
   * ⚠️ 2 枚・3 枚並びは**正方形に切り抜いて表示**する（2026-09-08 指摘）。
   *    先方がどんな縦横比の画像を入れるか分からないため、枠を 1:1 に固定し
   *    `object-fit: cover` ＋ `object-position: center` で中央を見せる。
   *    Figma 実測も 300x300 / 297x300 とほぼ正方形。
   *    ACF 側の説明文にも推奨サイズを書いてある。
   */
}
.p-treatment__figures--2 .p-treatment__figure img, .p-treatment__figures--3 .p-treatment__figure img {
  aspect-ratio: 1/1;
  object-fit: cover;
  object-position: center;
}
.p-treatment__figures--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
@media (min-width: 1024px) {
  .p-treatment__figures--2 {
    max-width: 648px;
    margin-inline: auto;
    gap: 48px;
  }
}
.p-treatment__figures {
  /*
   * ⚠️ 3 枚は **SP では縦に積む**（Figma 実測: 297x300 を 1 列 / gap 24 / 中央）。
   *    2 列に折り返すと 1 枚余って収まりが悪くなる。
   */
}
.p-treatment__figures--3 {
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  max-width: 297px;
  margin-inline: auto;
}
@media (min-width: 1024px) {
  .p-treatment__figures--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: none;
  }
}

.p-treatment__figure {
  position: relative;
}
.p-treatment__figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.p-treatment__figure-label {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 4px 12px;
  font-size: 18px;
  color: #ffffff;
  background-color: #4da7d6;
  border-radius: 8px;
}
@media (min-width: 1024px) {
  .p-treatment__figure-label {
    top: 11px;
    left: 11px;
    padding: 6px 16px;
    font-size: 18px;
  }
}

.p-treatment__flow {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
@media (min-width: 1024px) {
  .p-treatment__flow {
    gap: 48px;
  }
}

.p-treatment__flow-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.p-treatment__flow-num {
  flex-shrink: 0;
  padding: 6px 16px;
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  color: #ffffff;
  background-color: #4da7d6;
  border-radius: 999px;
}
@media (min-width: 1024px) {
  .p-treatment__flow-num {
    font-size: 18px;
  }
}

.p-treatment__flow-title {
  font-size: 18px;
  font-weight: 500;
  color: #222222;
}
@media (min-width: 1024px) {
  .p-treatment__flow-title {
    font-size: 24px;
  }
}

.p-treatment__flow-body {
  margin-top: 16px;
  font-size: 16px;
  line-height: 1.8;
}
@media (min-width: 1024px) {
  .p-treatment__flow-body {
    font-size: 18px;
  }
}
.p-treatment__flow-body {
  /*
   * ⚠️ リッチエディターの欄なので中身は `<p>` の集まり（2026-09-28）。
   *    リセットで `p { margin: 0 }` にしてあるため、**ここで段落の間隔を作らないと
   *    文章が 1 塊に詰まって見える**（`.p-treatment__prose` と同じ扱い）。
   */
}
.p-treatment__flow-body > * + * {
  margin-top: 16px;
}

/*
 * Figma 実測（帯の地は `#F8FCFE`）:
 *   SP … 施術の流れの下端 6271 → 帯 6391〜7537 → 見出し 6441（＝ 上に 120 / 帯の内側 50）
 *   PC … 施術の流れの下端 5445 → 帯 5605〜7058 → 見出し 5735（＝ 上に 160 / 帯の内側 130）
 * ⚠️ 2026-09-16 に内側を 48 → 50 / 120 → 130 へ合わせ直した。
 */
.p-treatment__cases {
  margin-top: 120px;
  padding-block: 50px;
  background-color: #f8fcfe;
}
@media (min-width: 1024px) {
  .p-treatment__cases {
    margin-top: 160px;
    padding-block: 130px;
  }
}

.p-treatment__case {
  /*
   * ⚠️ SP は白カードが**画面幅いっぱい**（Figma 実測: 帯 390 に対してカードも 390）。
   *    コンテナの左右 15px を打ち消して端まで伸ばす。
   */
  margin-inline: -15px;
  padding: 42px 15px;
  background-color: #ffffff;
}
@media (min-width: 1024px) {
  .p-treatment__case {
    margin-inline: 0;
    padding: 48px 107px;
    border-radius: 8px;
  }
}
.p-treatment__case + .p-treatment__case {
  margin-top: 32px;
}

/*
 * ⚠️ **`grid` ではなく `flex`**（2026-09-16）。3 列固定（`1fr auto 1fr`）だと
 *    before だけ／after だけの症例のときに**片側が空のまま半分の幅**になる。
 *    `flex` なら 1 枚なら目いっぱい、2 枚なら半分ずつになる。
 */
.p-treatment__case-photos {
  display: flex;
  gap: 8px;
  align-items: center;
}
@media (min-width: 1024px) {
  .p-treatment__case-photos {
    gap: 32px;
  }
}

.p-treatment__case-photo {
  flex: 1 1 0;
  min-width: 0;
}
.p-treatment__case-photo figcaption {
  margin-bottom: 8px;
  font-size: 16px;
  font-weight: 700;
  color: #4da7d6;
}
@media (min-width: 1024px) {
  .p-treatment__case-photo figcaption {
    font-size: 22px;
  }
}
.p-treatment__case-photo {
  /*
   * 🔴 **枠の形を CSS で決め切る**（2026-09-16 指摘「画像の大きさが変な時がある。再読み込みすればなおった」）。
   *    EWWW の遅延読み込みが `src` を base64 の仮画像に差し替えるため、`height: auto` だと
   *    **本物が届くまでの縦幅が仮画像まかせ**になり、先方の写真の比率が違うと読み込み後に跳ねる。
   *    Figma の枠は **361x300**（`pc_施術_フォトフェイシャル` の Group 773 / 774）なので、
   *    その比率で箱を固定して `cover` で流し込む。医師紹介の写真と同じやり方。
   * ⚠️ **はみ出しは切られる**ので、先方へは 361:300（約 6:5）に近い写真をお願いすること。
   */
}
.p-treatment__case-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 361/300;
  object-fit: cover;
}

.p-treatment__case-arrow {
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 18px solid #4da7d6;
}
@media (min-width: 1024px) {
  .p-treatment__case-arrow {
    border-top-width: 25px;
    border-bottom-width: 25px;
    border-left-width: 37px;
  }
}

/*
 * ⚠️ ここに `img` の指定を書かないこと。`.p-treatment__case-photo img` と**重みが同じ**で、
 *    後ろにあるこちらが勝ってしまい、上で入れた `aspect-ratio` が効かなくなる（2026-09-16）。
 */
.p-treatment__case-zoom {
  position: relative;
  display: block;
}
@media (hover: hover) {
  .p-treatment__case-zoom:hover .p-treatment__case-zoom-icon {
    color: #ffffff;
    background-color: #4da7d6;
  }
}

.p-treatment__case-zoom-icon {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 33px;
  height: 33px;
  color: #4da7d6;
  background-color: #ffffff;
  border-radius: 50%;
  transition: background-color 0.2s, color 0.2s;
}

.p-treatment__case-detail {
  margin-top: 24px;
}
@media (min-width: 1024px) {
  .p-treatment__case-detail {
    margin-top: 32px;
  }
}

.p-treatment__case-label {
  min-width: 207px;
  margin-top: 32px;
  padding: 4px 16px;
  font-size: 16px;
  font-weight: 400;
  color: #ffffff;
  text-align: center;
  background-color: #4da7d6;
}
@media (min-width: 1024px) {
  .p-treatment__case-label {
    padding: 8px 16px;
    font-size: 18px;
  }
}
.p-treatment__case-label:first-child {
  margin-top: 0;
}

.p-treatment__case-label,
.p-treatment__case-text {
  display: block;
  width: fit-content;
  max-width: 100%;
}

.p-treatment__case-text {
  margin-top: 16px;
  font-size: 16px;
  line-height: 1.8;
}
@media (min-width: 1024px) {
  .p-treatment__case-text {
    font-size: 18px;
  }
}
.p-treatment__case-text {
  /*
   * ⚠️ 症例解説だけリッチエディターなので中身が `<p>` の集まりになる（2026-09-28）。
   *    リセットで `p { margin: 0 }` にしてあるため、ここで段落の間隔を作る。
   *    ⚠️ 費用・リスクは今までどおりただのテキスト（`<p>` 1 つ）なので影響しない。
   */
}
.p-treatment__case-text > * + * {
  margin-top: 16px;
}

.p-treatment__case-more {
  margin-top: 32px;
}
.p-treatment__case-more summary {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  width: 290px;
  max-width: 100%;
  height: 42px;
  margin-inline: auto;
  font-size: 16px;
  font-weight: 700;
  color: #4da7d6;
  cursor: pointer;
  background-color: #ffffff;
  border: 1px solid #4da7d6;
  border-radius: 999px;
  list-style: none;
}
.p-treatment__case-more summary::-webkit-details-marker {
  display: none;
}
.p-treatment__case-more summary::after {
  font-weight: 700;
  content: "＋";
}
@media (hover: hover) {
  .p-treatment__case-more summary:hover {
    color: #ffffff;
    background-color: #4da7d6;
  }
}
.p-treatment__case-more[open] summary::after {
  content: "−";
}
.p-treatment__case-more .p-treatment__case-more-close {
  display: none;
}
.p-treatment__case-more[open] .p-treatment__case-more-open {
  display: none;
}
.p-treatment__case-more[open] .p-treatment__case-more-close {
  display: inline;
}

/*
 * ⚠️ 閉じた `<details>` の中身は `body` の既定（SP 15 / PC 17）を継いでしまう。
 *    Figma の症例解説・リスクの本文は **SP 16 / PC 18** なので明示する。
 */
.p-treatment__case-more-body {
  margin-top: 32px;
  font-size: 16px;
  line-height: 1.8;
}
@media (min-width: 1024px) {
  .p-treatment__case-more-body {
    font-size: 18px;
  }
}

.p-treatment__price-title {
  margin-bottom: 16px;
  font-size: 20px;
  font-weight: 500;
  color: #222222;
}
@media (min-width: 1024px) {
  .p-treatment__price-title {
    margin-bottom: 24px;
    font-size: 28px;
  }
}

.p-treatment__price {
  border: 1px solid #daeef8;
  border-radius: 4px;
  overflow: hidden;
}

/*
 * グループ見出し（青ベタ）。
 * ⚠️ Figma 実測で SP と PC の**寄せが違う**: SP は中央 18px（帯 37px）、PC は左寄せ 24px（帯 57px）。
 */
.p-treatment__price-group-head {
  padding: 5px 16px;
  font-size: 18px;
  font-weight: 500;
  color: #ffffff;
  text-align: center;
  background-color: #4da7d6;
}
@media (min-width: 1024px) {
  .p-treatment__price-group-head {
    padding: 11px 40px;
    font-size: 24px;
    text-align: left;
  }
}

.p-treatment__price-row {
  display: grid;
  /*
   * Figma 実測: 左（区分）350px ／ 右（金額）685px ＝ 1035px。
   * 左を固定幅にして、右を「残り全部」にする（2026-09-08 指摘）。
   */
  grid-template-columns: 120px minmax(0, 1fr);
  align-items: center;
}
@media (min-width: 1024px) {
  .p-treatment__price-row {
    grid-template-columns: 350px minmax(0, 1fr);
  }
}
.p-treatment__price-row {
  border-top: 1px solid #ffffff;
}
.p-treatment__price-row:first-child {
  border-top: 0;
}
.p-treatment__price-row dt,
.p-treatment__price-row dd {
  padding: 16px 8px;
  font-size: 16px;
  text-align: center;
}
@media (min-width: 1024px) {
  .p-treatment__price-row dt,
  .p-treatment__price-row dd {
    padding: 16px;
    font-size: 18px;
  }
}
.p-treatment__price-row dt {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #daeef8;
}
.p-treatment__price-row {
  /*
   * ⚠️ **右列にも区切り線を入れる**（2026-09-29 田中さん指摘
   *    「次の dd との区切りがわからない」）。
   * 🔴 上の `border-top` は **`$color-base` ＝ 白** で、淡い水色の `dt` を
   *    区切るための線だった。**白背景の `dd` 側ではまったく見えていなかった。**
   */
}
.p-treatment__price-row dd {
  border-bottom: 1px solid rgba(38, 48, 74, 0.15);
}
.p-treatment__price-row:last-child dd {
  border-bottom: 0;
}

.p-treatment__price-note {
  margin-top: 32px;
  font-size: 15px;
  line-height: 1.8;
}
@media (min-width: 1024px) {
  .p-treatment__price-note {
    font-size: 17px;
  }
}
.p-treatment__price-note p + p {
  margin-top: 8px;
}

.p-treatment__pdf {
  margin-top: 40px;
}
@media (min-width: 1024px) {
  .p-treatment__pdf {
    margin-top: 64px;
    padding-inline: 66px;
  }
}
.p-treatment__pdf a {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  padding: 25px 24px;
  background-color: #ffffff;
  border: 1px solid #4da7d6;
  border-radius: 16px;
}
@media (min-width: 1024px) {
  .p-treatment__pdf a {
    flex-direction: row;
    gap: 48px;
    align-items: center;
    padding: 24px 52px;
  }
}
.p-treatment__pdf a {
  /*
   * ⚠️ 下線はテキストにだけ付ける（2026-09-08 指摘）。
   *    a 全体に掛けると PDF のアイコンの文字にも線が乗る。
   */
  /*
   * ⚠️ foundation の `a:hover` の下線を打ち消してから、テキストにだけ付け直す。
   *    a に下線が残ると PDF アイコンの文字にも線が乗る（2026-09-08 指摘）。
   */
  text-decoration: none;
}
@media (hover: hover) {
  .p-treatment__pdf a:hover {
    background-color: #f8fcfe;
    text-decoration: none;
  }
  .p-treatment__pdf a:hover .p-treatment__pdf-label {
    text-decoration: underline;
  }
}

/*
 * PDF のアイコン。Figma 実測 58x73 で、中の「PDF」は**水平中央・上から 6px**
 * （上下中央ではない。2026-09-08 指摘）。
 */
.p-treatment__pdf-tag {
  display: flex;
  flex-shrink: 0;
  align-items: flex-start;
  justify-content: center;
  width: 58px;
  height: 73px;
  padding-top: 6px;
  font-size: 17px;
  color: #222222;
  text-decoration: none;
  background-color: #f8fcfe;
}

.p-treatment__pdf-label {
  display: block;
  font-size: 17px;
}

.p-treatment__pdf-note {
  display: block;
  font-size: 16px;
  color: #222222;
}

.p-treatment__risk-lead {
  font-size: 16px;
  line-height: 1.8;
}
@media (min-width: 1024px) {
  .p-treatment__risk-lead {
    font-size: 18px;
  }
}

.p-treatment__risk-box {
  margin-top: 24px;
  padding: 32px 15px;
  font-size: 16px;
  line-height: 1.8;
  background-color: #daeef8;
  border: 1px solid #4da7d6;
  border-radius: 16px;
}
@media (min-width: 1024px) {
  .p-treatment__risk-box {
    margin-top: 48px;
    padding: 46px;
    font-size: 18px;
  }
}
.p-treatment__risk-box ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.p-treatment__risk-box li {
  padding-left: 1em;
  text-indent: -1em;
}
.p-treatment__risk-box li::before {
  content: "・";
}
.p-treatment__risk-box p + p,
.p-treatment__risk-box p + ul,
.p-treatment__risk-box ul + p {
  margin-top: 16px;
}

.p-treatment__subtitle {
  margin-bottom: 16px;
  font-size: 20px;
  font-weight: 500;
  color: #26304a;
}
@media (min-width: 1024px) {
  .p-treatment__subtitle {
    font-size: 28px;
  }
}

/*
 * 未承認医薬品等の 5 項目。
 * デザインには無いセクションなので、**料金表と同じ見た目**に揃えている
 * （左に淡い水色の見出し列、右に本文。2026-09-08 指摘）。
 */
.p-treatment__unapproved dl {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
  font-size: 16px;
  line-height: 1.8;
  border: 1px solid #daeef8;
  border-radius: 4px;
}
@media (min-width: 1024px) {
  .p-treatment__unapproved dl {
    grid-template-columns: 320px minmax(0, 1fr);
    font-size: 18px;
  }
}
.p-treatment__unapproved dt {
  padding: 8px 16px;
  font-weight: 700;
  color: #26304a;
  background-color: #daeef8;
  border-top: 1px solid #ffffff;
}
@media (min-width: 1024px) {
  .p-treatment__unapproved dt {
    display: flex;
    align-items: center;
    padding: 16px;
  }
}
.p-treatment__unapproved dd {
  margin: 0;
  padding: 16px;
  border-top: 1px solid #daeef8;
}
@media (min-width: 1024px) {
  .p-treatment__unapproved dd {
    border-top: 1px solid #ffffff;
  }
}
.p-treatment__unapproved dt:first-of-type,
.p-treatment__unapproved dt:first-of-type + dd {
  border-top: 0;
}

/*
 * 🔴 **見た目はよくある質問ページの `.p-faq__*` を借りている**（2026-09-16 指摘）。
 *    ここには**このページだけの事情**しか書かない。カードの形・Q/A の丸・シェブロンは
 *    `project/_faq.scss` にある（直すならそちら）。
 *    ⚠️ 以前あった `.p-treatment__faq-item` / `.p-treatment__faq-answer` は**使っていない**
 *       （枠線 1px だけの独自デザインだった）ので消した。
 */
.p-treatment__faq {
  list-style: none;
}

/*
 * 本文の中の `<h5>`（2026-09-29）
 *
 * 現行サイトから移した施術の本文に `<h5>` が入っている
 * （医療脱毛の「注意事項」の中の「脱毛前の注意点」「脱毛前日の準備」など）。
 * リセットで見出しのサイズを潰しているため、**本文と見分けが付かなかった**
 * （田中さん指摘「h5 もう少しフォントサイズを大きく」）。
 *
 * ⚠️ `<h4>` はセクションの小見出し（`blocks` レイアウト）に昇格させているので、
 *    本文に残るのは `<h5>` 以下だけ。
 * ⚠️ PC の 20px に対応する変数が無いのでリテラルで書いている。
 *    本文（SP 16 / PC 18）より 1 段大きく、小見出し（PC 24）より小さい位置。
 */
.p-treatment__prose h5,
.p-treatment__prose h6,
.p-treatment__block-body h5,
.p-treatment__block-body h6,
.p-treatment__flow-body h5,
.p-treatment__flow-body h6,
.p-treatment__case-text h5,
.p-treatment__case-text h6 {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}
@media (min-width: 1024px) {
  .p-treatment__prose h5,
  .p-treatment__prose h6,
  .p-treatment__block-body h5,
  .p-treatment__block-body h6,
  .p-treatment__flow-body h5,
  .p-treatment__flow-body h6,
  .p-treatment__case-text h5,
  .p-treatment__case-text h6 {
    font-size: 20px;
  }
}

/*
 * 写真を並べるリスト（2026-09-29）
 *
 * 現行サイトから移した施術の本文で、写真にキャプションを付けて並べている箇所に使う
 * （眼瞼下垂の「症例」の《眼瞼下垂》《皮膚弛緩症》）。
 *
 * 🔴 **マーカー（「・」）を消す。** 写真のリストなので中黒が付くと邪魔になる
 *    （田中さん指摘「li の・を消して」）。
 * ⚠️ スマホは縦並び。
 */
.u-imglist {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
@media (min-width: 1024px) {
  .u-imglist {
    flex-direction: row;
  }
}
.u-imglist > li {
  /*
   * 🔴 **行頭の「・」を消す。** このテーマは中黒を `list-style` ではなく
   *    **`li::before` の擬似要素**で出している（`.p-treatment__prose ul li::before`）。
   *    親の `<ul>` に `list-style: none` を当てても消えない
   *    （2026-09-29 田中さん指摘「u-imglist>li:before をオフにして」）。
   */
  list-style: none;
}
.u-imglist > li::before {
  content: none;
}
@media (min-width: 1024px) {
  .u-imglist > li {
    flex: 1 1 0;
    min-width: 0;
  }
}
.u-imglist img {
  width: 100%;
  height: auto;
}

/*
 * 本文の箇条書き（2026-09-29）
 *
 * 🔴 リセットが `ul, ol { list-style: none }` で、**サイト全体でマーカーが出ない**。
 *    そのため現行サイトから移した本文のリストが「ただ改行しているだけ」に見えていた
 *    （田中さん指摘「医療機器の比較はリスト化して。・が出ない場合は
 *    「・」をテキストで追加してもいい」）。
 *    → **本文の中だけマーカーを戻す。** テキストで「・」を打つ案は採らない。
 *      先方が編集画面で消しそびれたり二重に打ったりするため、見た目は CSS で出す。
 *
 * ⚠️ `.u-imglist`（写真を並べるリスト）は**対象外**。写真に中黒が付くと邪魔になる
 *    （眼瞼下垂の「症例」。田中さん指摘「li の・を消して」）。
 * ⚠️ `.u-figures` は `<p>` なので元から掛からない。
 */
.p-treatment__prose ul:not(.u-imglist) > li,
.p-treatment__block-body ul:not(.u-imglist) > li,
.p-treatment__flow-body ul:not(.u-imglist) > li,
.p-treatment__case-text ul:not(.u-imglist) > li {
  padding-left: 1em;
  text-indent: -1em;
}
.p-treatment__prose ul:not(.u-imglist) > li::before,
.p-treatment__block-body ul:not(.u-imglist) > li::before,
.p-treatment__flow-body ul:not(.u-imglist) > li::before,
.p-treatment__case-text ul:not(.u-imglist) > li::before {
  content: "・";
}
.p-treatment__prose ol:not(.u-imglist),
.p-treatment__block-body ol:not(.u-imglist),
.p-treatment__flow-body ol:not(.u-imglist),
.p-treatment__case-text ol:not(.u-imglist) {
  padding-left: 1.25em;
  list-style: decimal;
}
.p-treatment__prose ol:not(.u-imglist) > li,
.p-treatment__block-body ol:not(.u-imglist) > li,
.p-treatment__flow-body ol:not(.u-imglist) > li,
.p-treatment__case-text ol:not(.u-imglist) > li {
  list-style: inherit;
}
.p-treatment__prose :not(.u-imglist) > li + li,
.p-treatment__block-body :not(.u-imglist) > li + li,
.p-treatment__flow-body :not(.u-imglist) > li + li,
.p-treatment__case-text :not(.u-imglist) > li + li {
  margin-top: 4px;
}

/* =============================================================
 * 治療メニュー一覧（施術のアーカイブ / お悩みのターム アーカイブ）
 *
 * Figma: ページ直下 `pc_治療メニュー一覧_しみ・美白`（1488:25574）
 *        / `sp_治療メニュー一覧_しみ・美白`（1488:26106）
 * ---------------------------------------------------------- */
/*
 * ⚠️ このページの内容幅は **1280px**（Figma の Frame 1577 / Frame 1691）。
 *    サイト共通の `.l-container`（$container-max = 1180px）より広く、
 *    そのままだと**下層 FV のタイトルと左端が 90px ずれる**（2026-09-09 指摘）。
 *    FV は `max-width: 1280px` ＋ 余白なしで、左端が 1920 のうち x=320。
 *    ここは `1280 + 左右 40` の 1360px にして、**広い画面では左端が FV と揃い**、
 *    狭い画面では 40px の余白が残るようにしている。
 */
.p-treatment-archive {
  display: flex;
  flex-direction: column;
  gap: 80px;
  padding-block: 60px;
}
@media (min-width: 1024px) {
  .p-treatment-archive {
    max-width: 1360px;
    padding-top: 104px;
    padding-bottom: 80px;
    gap: 160px;
  }
}

/*
 * ⚠️ カテゴリーどうしの間隔は**デザインに無い**（Figma は 1 カテゴリーしか置いていない）。
 *    上の 160px より少し詰めた 120px にしている。実物を見て詰めすぎ・空きすぎなら調整すること。
 */
.p-treatment-archive__blocks {
  display: flex;
  flex-direction: column;
  gap: 80px;
}
@media (min-width: 1024px) {
  .p-treatment-archive__blocks {
    gap: 120px;
  }
}

.p-treatment-archive__empty {
  text-align: center;
  color: rgba(38, 48, 74, 0.6);
}

.p-concern-nav {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
@media (min-width: 1024px) {
  .p-concern-nav {
    gap: 48px;
  }
}
.p-concern-nav {
  /*
   * ⚠️ `.c-section-title` は既定で下に余白を持っている（SP 32 / PC 48）。
   *    ここは gap で間隔を作っているので、そのままだと**二重になって PC で 96px** 空いていた
   *    （2026-09-09 指摘）。見出しの余白を殺して gap だけに任せる。
   */
}
.p-concern-nav .c-section-title {
  margin-bottom: 0;
}

/*
 * Figma 実測: PC 301x150 の 4 列（gap 24）/ SP 150x150 の 2 列（gap 16）。
 * タイルの数はタームの数で変わるので、列数だけ決めて自動で折り返す。
 */
.p-concern-tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (min-width: 1024px) {
  .p-concern-tiles {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }
}

.p-concern-tiles__item {
  display: flex;
}

/*
 * タイル 1 枚。
 *
 * 背景画像は `template-parts/concern-tiles.php` が `--tsk-tile-pc` / `--tsk-tile-sp` で渡す。
 * **PC と SP で縦横比が違う**（2:1 と 1:1）ため、使う方しか読み込まれないよう
 * メディアクエリで切り替える。SP 用が無ければ PC 用にフォールバックする。
 */
.p-concern-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  padding: 8px;
  overflow: hidden;
  text-align: center;
  color: #ffffff;
  background-color: rgba(77, 167, 214, 0.2);
  background-image: var(--tsk-tile-sp, var(--tsk-tile-pc));
  background-position: center;
  background-size: cover;
  border-radius: 24px;
  aspect-ratio: 1/1;
}
@media (min-width: 1024px) {
  .p-concern-tile {
    background-image: var(--tsk-tile-pc);
    aspect-ratio: 301/150;
  }
}
.p-concern-tile {
  /*
   * 濃紺のかぶせ。Figma は画像フィルの上に **#16223A を 50%** で重ねている。
   * ⚠️ **ホバー・フォーカス・押している間・現在地では外す**（2026-09-09 の指示。デザインでも
   *    現在のターム「しみ・美白」だけかぶせが外れている）。
   */
}
.p-concern-tile::before {
  position: absolute;
  inset: 0;
  background-color: rgba(22, 34, 58, 0.5);
  transition: opacity 0.2s ease;
  content: "";
}
.p-concern-tile:hover::before, .p-concern-tile:focus-visible::before, .p-concern-tile:active::before, .p-concern-tile[aria-current]::before {
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .p-concern-tile::before {
    transition: none;
  }
}
.p-concern-tile {
  /*
   * 写真が未設定のターム。かぶせだけ重ねると真っ暗になるので外し、
   * 代わりに**濃紺の下地**にして白い文字が読める状態を保つ。
   */
}
.p-concern-tile--no-image {
  background-color: #26304a;
}
.p-concern-tile--no-image::before {
  display: none;
}
.p-concern-tile {
  /*
   * 「すべての施術」だけ写真を持たず、淡いグラデーション＋黒文字（Figma 実測）。
   */
}
.p-concern-tile--all {
  color: #222222;
  background-image: linear-gradient(135deg, #fdfbf3 0%, #e4f4fb 55%, #cdeef8 100%);
}
.p-concern-tile--all::before {
  display: none;
}
@media (min-width: 1024px) {
  .p-concern-tile--all {
    background-image: linear-gradient(135deg, #fdfbf3 0%, #e4f4fb 55%, #cdeef8 100%);
  }
}

.p-concern-tile__ja,
.p-concern-tile__en {
  position: relative;
  z-index: 1;
}

.p-concern-tile__ja {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.35;
}
@media (min-width: 1024px) {
  .p-concern-tile__ja {
    font-size: 24px;
  }
}

/*
 * ⚠️ SP は中黒のところで改行する（Figma 実測。PC「しみ・美白」/ SP「しみ」＋改行＋「美白」）。
 *    区切りの中黒は SP では隠し、PC では文字として見せる。
 */
@media (max-width: 1023px) {
  .p-concern-tile__seg {
    display: block;
  }
}

@media (max-width: 1023px) {
  .p-concern-tile__sep {
    display: none;
  }
}

.p-concern-tile__en {
  font-size: 16px;
  font-weight: 700;
}
@media (min-width: 1024px) {
  .p-concern-tile__en {
    font-size: 18px;
  }
}

.p-concern-block {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/*
 * ⚠️ カテゴリーの見出しは、ページ全体の見出し（`.c-section-title` の既定 = SP 28/16・PC 36/22）より
 *    **1 段小さい**（Figma 実測: SP 20/16・PC 28/18）。共通コンポーネントを使い回しているので、
 *    ここだけサイズを上書きする。
 */
.p-concern-block__head {
  margin-bottom: 0;
}
.p-concern-block__head .c-section-title__ja {
  font-size: 20px;
}
@media (min-width: 1024px) {
  .p-concern-block__head .c-section-title__ja {
    font-size: 28px;
  }
}
@media (min-width: 1024px) {
  .p-concern-block__head .c-section-title__en {
    font-size: 18px;
  }
}

/*
 * 見出し下の帯。Figma 実測: 1280x57・`#4DA7D6` 20%・角丸なし・24px 中央。
 * 中身は子タームを「／」でつないだもの（ターム側で上書きもできる）。
 *
 * ⚠️ **保険診療だけ 2 行になる**（対象疾患 19 件を並べるため。2026-09-09 の指示で 2 行まで可）。
 *    デザインの高さ 57px は 1 行のときの値なので、`min-height` にして伸びられるようにしてある。
 */
.p-concern-block__band {
  padding: 8px 16px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  background-color: rgba(77, 167, 214, 0.2);
}
@media (min-width: 1024px) {
  .p-concern-block__band {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 57px;
    font-size: 24px;
  }
}

.p-concern-block__list {
  display: grid;
  gap: 16px;
}
@media (min-width: 1024px) {
  .p-concern-block__list {
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
  }
}

/*
 * 施術カード。
 *   PC  400x781・角丸 8・枠線 1px #4DA7D6。縦積み（施術名 → 説明 → タグ → 画像 → ボタン）
 *   SP  360x212・角丸 8。画像とテキストを**横並び**にし、**説明文は出さない**（Figma 実測）
 */
.p-concern-card {
  display: grid;
  gap: 16px 8px;
  padding: 24px 15px;
  background-color: #ffffff;
  border: 1px solid #4da7d6;
  border-radius: 8px;
  grid-template-areas: "visual body" "foot   foot";
  grid-template-columns: 150px 1fr;
  /*
   * ⚠️ PC は **写真とボタンをカードの下端に寄せる**（2026-09-09 指摘）。
   *    Figma のカードは高さ 781px 固定で、写真＋ボタン（Frame 1174）が下端から
   *    40px の位置に置かれている。M22 のカードではタグと写真の間が **110px** 空いており、
   *    これは「説明文の長さで余るぶん」＝下寄せの結果。gap を固定にすると
   *    写真が本文にくっついてしまい、行内で写真とボタンの高さも揃わない。
   *    grid だと余りを配れないので、PC だけ縦 flex にして `margin-top: auto` で送る。
   */
}
@media (min-width: 1024px) {
  .p-concern-card {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 37px 44px 40px;
  }
}

.p-concern-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  grid-area: body;
}
@media (min-width: 1024px) {
  .p-concern-card__body {
    gap: 24px;
  }
}

.p-concern-card__title {
  font-size: 18px;
  font-weight: 500;
}
@media (min-width: 1024px) {
  .p-concern-card__title {
    font-size: 28px;
  }
}

.p-concern-card__lead {
  display: none;
}
@media (min-width: 1024px) {
  .p-concern-card__lead {
    display: block;
    font-size: 17px;
  }
}

/*
 * タグ＝子タームの名前。Figma 実測: 角丸 8・`#26304A`・白 16px。
 * PC は 2 列のグリッド、SP は折り返す。
 */
.p-concern-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
@media (min-width: 1024px) {
  .p-concern-card__tags {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}

.p-concern-card__tag {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  font-size: 11px;
  line-height: 1.5;
  color: #ffffff;
  background-color: #26304a;
  border-radius: 8px;
}
@media (min-width: 1024px) {
  .p-concern-card__tag {
    min-height: 27px;
    font-size: 16px;
  }
}

/*
 * 写真の枠。高さだけデザインに合わせ（SP 150x111 / PC 276x203 の比率）、
 * 中の画像は **高さ 100%・幅は成り行き**で中央に置く（2026-09-09 指示）。
 *
 * ⚠️ `object-fit: cover` をやめた理由: 機器の写真は縦長ぎみのものが多く、
 *    cover だと**上下が切れて機器が欠ける**（M22 の透過 PNG で発生）。
 *    高さ基準なら**縦は絶対に切れない**。横に広い写真だけ左右が切れる。
 */
.p-concern-card__visual {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  grid-area: visual;
  aspect-ratio: 150/111;
}
@media (min-width: 1024px) {
  .p-concern-card__visual {
    width: 276px;
    margin-top: auto;
    margin-inline: auto;
    aspect-ratio: 276/203;
  }
}
.p-concern-card__visual img {
  display: block;
  width: auto;
  height: 100%;
}

/*
 * ⚠️ ここには `margin-top: auto` を付けない。写真側で余りを吸っているので、
 *    両方に付けると余白が上下に分かれて写真が浮く。
 */
.p-concern-card__foot {
  grid-area: foot;
  text-align: center;
}

/*
 * 「詳しく見る」。Figma 実測: SP は**全幅・角丸 8・16px**、PC は **152x40・角丸 36・18px**。
 * どちらも `#4DA7D6` 塗りの白文字。
 */
.p-concern-card__more {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 37px;
  padding-inline: 16px;
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  background-color: #4da7d6;
  border-radius: 8px;
}
@media (min-width: 1024px) {
  .p-concern-card__more {
    display: inline-flex;
    min-width: 152px;
    min-height: 40px;
    font-size: 18px;
    border-radius: 36px;
  }
}

/* =============================================================
 * お知らせ（一覧 / カテゴリー絞り込み / 詳細）
 *
 * Figma: ページ直下 `pc_お知らせ_一覧`（1488:23642）・`pc_お知らせ_詳細`（1488:24767）
 *        / `sp_お知らせ一覧`（1488:27350）・`sp_お知らせ詳細`（1488:27505）
 *
 * ⚠️ 内容幅は 1280px。`.l-container` の左右パディング 40px は `max-width` の内側なので
 *    **1280 ＋ 80 = 1360px** で指定する（トップや治療メニュー一覧と同じ考え方）。
 * ---------------------------------------------------------- */
.p-news-archive,
.p-news-single {
  padding-block: 60px;
}
@media (max-width: 1023px) {
  .p-news-archive,
  .p-news-single {
    padding-top: 48px;
  }
}
@media (min-width: 1024px) {
  .p-news-archive,
  .p-news-single {
    max-width: 1360px;
    padding-top: 104px;
    padding-bottom: 80px;
  }
}

.p-news-archive {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
@media (min-width: 1024px) {
  .p-news-archive {
    gap: 48px;
  }
}

/*
 * カテゴリーのタブ。Figma 実測: 高さ PC 57 / SP 45・角丸 36・文字 PC 17px / SP 15px、gap 24。
 * 下に 1px `#4DA7D6` の区切り線が入る。
 * ⚠️ 枠線と現在地の塗りは **`#4DA7D6` の 20%**（2026-09-15 に直した。以前は 100% で濃すぎた）。
 */
.p-news-archive__tabs {
  padding-bottom: 32px;
  border-bottom: 1px solid #4da7d6;
}

/*
 * ⚠️ SP は **2 列のグリッド**（Figma 実測: タブの中心が 111.5 / 280 で 2 列 × 2 行）。
 *    折り返しに任せると 3＋1 のように割れて不揃いになる。
 */
.p-news-archive__tab-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 144px));
  justify-content: center;
  gap: 24px;
}
@media (min-width: 1024px) {
  .p-news-archive__tab-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 24px;
  }
}

.p-news-archive__tab {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 45px;
  padding-inline: 16px;
  font-size: 15px;
  color: #222222;
  background-color: #ffffff;
  border: 2px solid rgba(77, 167, 214, 0.2);
  border-radius: 36px;
}
@media (min-width: 1024px) {
  .p-news-archive__tab {
    min-width: 120px;
    min-height: 57px;
    padding-inline: 24px;
    font-size: 17px;
  }
}
.p-news-archive__tab {
  /*
   * ⚠️ 現在地は**塗り `#4DA7D6` 20%・枠線なし・文字は `#222222`**（Figma 実測）。
   */
}
.p-news-archive__tab[aria-current] {
  background-color: rgba(77, 167, 214, 0.2);
  border-color: transparent;
}

.p-news-archive__list {
  display: flex;
  flex-direction: column;
}

.p-news-archive__item {
  border-bottom: 1px solid #4da7d6;
}

.p-news-archive__link {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  color: #222222;
  text-decoration: none;
}
@media (min-width: 1024px) {
  .p-news-archive__link {
    flex-direction: row;
    align-items: center;
    gap: 48px;
    min-height: 90px;
    padding-inline: 16px;
  }
}
@media (hover: hover) {
  .p-news-archive__link:hover {
    text-decoration: none;
    opacity: 0.7;
  }
}

/*
 * 日付 ＋ カテゴリー。Figma 実測: gap 8。
 * ⚠️ 幅を 214px に固定していたら、PC で**日付が 2 行に折れていた**（2026-09-15 指摘）。
 *    Figma の 214 は「日付 88 ＋ 8 ＋ タグ 118」の成り行きなので、固定せず中身に任せる。
 */
.p-news-archive__meta {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
}

.p-news-archive__date {
  font-size: 14px;
  color: rgba(38, 48, 74, 0.6);
  white-space: nowrap;
}
@media (min-width: 1024px) {
  .p-news-archive__date {
    font-size: 16px;
  }
}

/*
 * Figma 実測: PC 118x32 / SP 103x24・角丸 16・白・枠線 1px `#26304A` の 60%・PC 16px / SP 14px
 * ⚠️ 詳細ページの SP のカテゴリーもこの形（`.p-news-single__cat`）。
 */
.p-news-archive__cat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 118px;
  min-height: 32px;
  padding-inline: 8px;
  font-size: 14px;
  line-height: 1.2;
  color: #222222;
  background-color: #ffffff;
  border: 1px solid rgba(38, 48, 74, 0.6);
  border-radius: 16px;
}
@media (max-width: 1023px) {
  .p-news-archive__cat {
    min-width: 103px;
    min-height: 24px;
  }
}
@media (min-width: 1024px) {
  .p-news-archive__cat {
    font-size: 16px;
  }
}

.p-news-archive__title {
  font-size: 16px;
}
@media (min-width: 1024px) {
  .p-news-archive__title {
    font-size: 18px;
  }
}

.p-news-archive__empty {
  color: rgba(38, 48, 74, 0.6);
}

/*
 * ページ送り。Figma 実測: 30x40・角丸 8。現在地は `#4DA7D6`、他は `#D9D9D9`。文字 16px。
 * ⚠️ `the_posts_pagination()` に `class` を渡すと**既定の `pagination` が置き換わる**ので、
 *    当て先は `.p-news-archive__pagination`（外側は `navigation` も付く）。
 */
/*
 * ⚠️ 一覧の最後の線 → ページ送りは **PC 160 / SP 120**（Figma 実測。2026-09-15 に 48 / 32 から直した）。
 *    `.p-news-archive` の gap（PC 48 / SP 32）に上乗せする分を margin で持つ。
 */
.p-news-archive__pagination {
  display: flex;
  justify-content: center;
  margin-top: 88px;
}
@media (min-width: 1024px) {
  .p-news-archive__pagination {
    margin-top: 112px;
  }
}

.p-news-archive .nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
}

.p-news-archive .page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 40px;
  font-size: 16px;
  color: #222222;
  text-decoration: none;
  background-color: #d9d9d9;
  border-radius: 8px;
}
.p-news-archive .page-numbers.current {
  background-color: #4da7d6;
}
.p-news-archive .page-numbers.dots {
  width: auto;
  background-color: transparent;
}
@media (hover: hover) {
  .p-news-archive .page-numbers:hover {
    text-decoration: none;
    opacity: 0.8;
  }
}

.p-news-single {
  display: flex;
  flex-direction: column;
  gap: 50px;
}
@media (max-width: 1023px) {
  .p-news-single {
    padding-top: 12px;
  }
}
@media (min-width: 1024px) {
  .p-news-single {
    gap: 48px;
  }
}

.p-news-single__body {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
@media (min-width: 1024px) {
  .p-news-single__body {
    gap: 48px;
  }
}

.p-news-single__head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 35px;
  border-bottom: 1px solid #4da7d6;
}
@media (min-width: 1024px) {
  .p-news-single__head {
    gap: 24px;
    padding-bottom: 48px;
  }
}

.p-news-single__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
@media (min-width: 1024px) {
  .p-news-single__meta {
    gap: 24px;
  }
}

/*
 * ⚠️ 詳細のカテゴリーは **PC だけ**一覧のタグとは別の形（Figma 実測）。
 *    一覧     … 118x32・角丸 16・枠線 1px `#26304A` 60%
 *    詳細 PC  … 144x57・角丸 36・枠線 2px `#4DA7D6` **20%**（タブと同じ形）
 *    詳細 SP  … 一覧のタグと同じ 103x24・枠線 1px `#26304A` 60%
 */
.p-news-single__cat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: 16px;
  font-size: 14px;
  line-height: 1.2;
  color: #222222;
  background-color: #ffffff;
  text-decoration: none;
  min-width: 103px;
  min-height: 24px;
  border: 1px solid rgba(38, 48, 74, 0.6);
  border-radius: 16px;
}
@media (min-width: 1024px) {
  .p-news-single__cat {
    min-width: 144px;
    min-height: 57px;
    font-size: 17px;
    border: 2px solid rgba(77, 167, 214, 0.2);
    border-radius: 36px;
  }
}
@media (hover: hover) {
  .p-news-single__cat:hover {
    text-decoration: none;
    opacity: 0.8;
  }
}

.p-news-single__date {
  font-size: 14px;
  color: rgba(38, 48, 74, 0.6);
}
@media (min-width: 1024px) {
  .p-news-single__date {
    font-size: 17px;
    color: #222222;
  }
}

.p-news-single__title {
  font-size: 28px;
  font-weight: 700;
}
@media (min-width: 1024px) {
  .p-news-single__title {
    font-size: 36px;
  }
}

.p-news-single__content {
  font-size: 16px;
  line-height: 1.8;
}
@media (min-width: 1024px) {
  .p-news-single__content {
    font-size: 18px;
  }
}
.p-news-single__content > * + * {
  margin-top: 1.5em;
}
.p-news-single__content img {
  height: auto;
}

/*
 * 本文 → ボタン。Figma は PC 80（SP はカンプにボタンが無い）。
 * ⚠️ 2026-09-15 の指摘で **Figma より広げている**: PC 120 / SP 80（gap に上乗せ）。
 */
.p-news-single__back {
  margin-top: 30px;
  text-align: center;
}
@media (min-width: 1024px) {
  .p-news-single__back {
    margin-top: 72px;
  }
}

.p-news-single__back-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 290px;
  max-width: 100%;
  min-height: 50px;
  padding-inline: 16px;
  font-size: 16px;
  font-weight: 500;
  color: #ffffff;
  background-color: #4da7d6;
  border-radius: 36px;
  text-decoration: none;
}
@media (min-width: 1024px) {
  .p-news-single__back-link {
    min-height: 60px;
    font-size: 18px;
  }
}
@media (hover: hover) {
  .p-news-single__back-link:hover {
    text-decoration: none;
    opacity: 0.8;
  }
}

/* =============================================================
 * よくある質問（固定ページ /faq/）
 *
 * Figma: ページ直下 `pc_よくある質問`（1488:29124）/ `sp_よくある質問`（1488:29368）
 *
 * ⚠️ 内容幅は 1280px。`.l-container` の左右パディング 40px は `max-width` の内側なので
 *    **1280 ＋ 80 = 1360px** で指定する。
 * ---------------------------------------------------------- */
/*
 * 🔴 **帯には地色が付く**（2026-09-16 指摘）: `#F8FCFE`（ごく薄い水色）。
 *    Figma 実測の帯の高さは **SP 55（13 + 中身 29 + 13）/ PC 100（30 + 40 + 30）**。
 * ⚠️ 地色は `__bar` に置く。`__list` は PC で `max-width: 1360px` なので、
 *    そちらに置くと**画面の端まで塗られない**。
 * ⚠️ 注記「※横スクロールが出来ます」は Figma では**帯の外**（SP: 帯 226〜281 / 注記 289〜）。
 */
/*
 * ⚠️ **下だけ半分にして、減らしたぶんを `__list` の `padding-bottom` へ回している**（2026-09-16 指示）。
 *    帯の高さ（SP 13 + 中身 + 13 / PC 30 + 中身 + 30）は変わらないが、
 *    横スクロールバーが**`__list` の下端**に出るので、その上の余白が広がって文字から離れる。
 */
.p-faq-nav__bar {
  padding-top: 13px;
  padding-bottom: 6.5px;
  background-color: #f8fcfe;
}
@media (min-width: 1024px) {
  .p-faq-nav__bar {
    padding-top: 30px;
    padding-bottom: 15px;
  }
}

.p-faq-nav__note {
  margin-top: 2px;
  font-size: 12px;
  color: rgba(38, 48, 74, 0.6);
}

.p-faq-nav__list {
  display: flex;
  align-items: center;
  gap: 8px 16px;
  max-width: 1360px;
  /*
   * ⚠️ SP は**折り返さず 1 行で横に流す**（Figma 実測: 6 項目が x=794 まで伸びる）。
   *    はみ出したぶんはこの中だけで横スクロールさせ、ページ全体には伝えない。
   * ⚠️ `overflow` を持つ要素は `position: relative` にしておくこと。
   *    絶対配置の子孫（`.u-visually-hidden` など）が
   *    static な祖先だとクリップされずページを押し広げる（2026-09-09 に踏んだ）。
   */
  position: relative;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /*
   * ⚠️ 横スクロールバーはこの箱の**下端**に出る。文字に貼り付かないよう下だけ空ける。
   *    内訳（2026-09-16 の指示 2 回ぶん）:
   *      2px   … `__note` の `margin-top`（4 → 2）から回したぶん
   *      6.5px … `__bar` の `padding-bottom`（13 → 6.5）から回したぶん（PC は 15px）
   */
  padding-bottom: 8.5px;
}
.p-faq-nav__list li {
  flex-shrink: 0;
}
@media (min-width: 1024px) {
  .p-faq-nav__list {
    flex-wrap: wrap;
    justify-content: center;
    overflow-x: visible;
    gap: 64px;
    padding-bottom: 17px;
  }
}
.p-faq-nav__list li {
  display: flex;
  align-items: center;
}
.p-faq-nav__list li + li::before {
  display: block;
  width: 1px;
  height: 24px;
  margin-right: 8px;
  background-color: rgba(38, 48, 74, 0.15);
  content: "";
}
@media (min-width: 1024px) {
  .p-faq-nav__list li + li::before {
    height: 40px;
    margin-right: 64px;
  }
}
.p-faq-nav__list a {
  font-size: 16px;
  color: #222222;
}
@media (min-width: 1024px) {
  .p-faq-nav__list a {
    font-size: 18px;
  }
}

/*
 * ⚠️ **アンカーと「よくある質問」の見出しの間が空く**（2026-09-16 指摘）。
 *    Figma 実測の「帯の下端 → 見出し」は **SP 135 / PC 204**。アンカーのぶんを引いた残りを
 *    ここの `padding-top` で持つ。
 */
.p-faq {
  padding-top: 52px;
  padding-bottom: 60px;
}
@media (min-width: 1024px) {
  .p-faq {
    max-width: 1360px;
    padding-top: 104px;
    padding-bottom: 80px;
  }
}

.p-faq__groups {
  display: flex;
  flex-direction: column;
  gap: 48px;
}
@media (min-width: 1024px) {
  .p-faq__groups {
    gap: 80px;
  }
}

.p-faq__group {
  display: flex;
  flex-direction: column;
  gap: 32px;
  scroll-margin-top: 100px;
}
@media (min-width: 1024px) {
  .p-faq__group {
    gap: 48px;
    scroll-margin-top: 150px;
  }
}

/*
 * カテゴリーの見出し。Figma 実測: 日本語 28px `#26304A` ＋ 英語 22px `#4DA7D6` を
 * gap 16 で横に並べ、その 16px 下に 1px `#4DA7D6` の線。
 */
.p-faq__group-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #4da7d6;
}

.p-faq__group-ja {
  font-size: 20px;
  font-weight: 500;
  color: #26304a;
}
@media (min-width: 1024px) {
  .p-faq__group-ja {
    font-size: 28px;
  }
}

.p-faq__group-en {
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #4da7d6;
}
@media (min-width: 1024px) {
  .p-faq__group-en {
    font-size: 22px;
  }
}

.p-faq__list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/*
 * Figma 実測: 白カード・角丸 8・内側 19/17。
 * ⚠️ **ページ地も白**なので、影が無いとカードの輪郭が消える。
 *    Figma の影は `0 1px 10px rgba(0,0,0,0.15)`（トップのキャンペーンバナー、
 *    予約ページのカードと同じ。2026-09-10 に付け忘れていたので追加）。
 */
.p-faq__item {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.15);
}

.p-faq__details {
  padding: 16px;
}
@media (min-width: 1024px) {
  .p-faq__details {
    padding: 17px 19px;
  }
}

/*
 * 質問（開閉のつまみ）。
 * ⚠️ `<summary>` の既定の三角は消して、右端に自前のシェブロンを置く
 *    （Figma 実測: 26x13 の線 1px `#4DA7D6`）。開くと上向きになる。
 */
.p-faq__question {
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  list-style: none;
}
.p-faq__question::-webkit-details-marker {
  display: none;
}
.p-faq__question::after {
  flex-shrink: 0;
  width: 13px;
  height: 13px;
  margin-left: auto;
  border-right: 1px solid #4da7d6;
  border-bottom: 1px solid #4da7d6;
  rotate: 45deg;
  translate: 0 -25%;
  transition: rotate 0.2s ease;
  content: "";
}
@media (min-width: 1024px) {
  .p-faq__question::after {
    width: 18px;
    height: 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .p-faq__question::after {
    transition: none;
  }
}

[open] > .p-faq__question::after {
  rotate: -135deg;
  translate: 0 25%;
}

/*
 * 「Q」「A」の印。
 * 🔴 Figma 実測（2026-09-16 に直した）: **34x34 の丸を塗って、文字は白抜き**。
 *    Q は `#4DA7D6` / A は `#FA9A9A`。SP も PC も同じ 34x34・文字 21px。
 *    以前は「塗りなしの色文字」で実装していた。
 */
.p-faq__mark {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-size: 21px;
  font-weight: 700;
  line-height: 1;
  color: #ffffff;
  background-color: #4da7d6;
  border-radius: 50%;
}
.p-faq__mark--answer {
  background-color: #fa9a9a;
}

.p-faq__question-text {
  font-size: 16px;
  font-weight: 500;
}
@media (min-width: 1024px) {
  .p-faq__question-text {
    font-size: 18px;
  }
}

.p-faq__answer {
  display: flex;
  gap: 16px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(38, 48, 74, 0.15);
}

.p-faq__answer-body {
  font-size: 16px;
  line-height: 1.8;
}
@media (min-width: 1024px) {
  .p-faq__answer-body {
    font-size: 18px;
  }
}
.p-faq__answer-body > * + * {
  margin-top: 1em;
}

.p-faq__empty {
  color: rgba(38, 48, 74, 0.6);
}

.p-faq__contact {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-top: 80px;
}
@media (min-width: 1024px) {
  .p-faq__contact {
    gap: 48px;
    margin-top: 120px;
  }
}

.p-faq__contact-cards {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/*
 * ⚠️ **ページ地も白**なので、影が無いとカードの輪郭が消える（2026-09-16 指摘で追加）。
 *    Figma の影は `0 1px 10px rgba(0,0,0,0.15)`（Q&A カード・予約ページのカードと同じ）。
 * ⚠️ **SP も左寄せ**（Figma 実測: 中身が card の内側 36px = x52 から始まる）。
 *    以前は SP だけ中央寄せにしていた。
 */
.p-faq__contact-card {
  display: flex;
  flex-direction: column;
  /*
   * ⚠️ SP は Figma 実測 **360x250・内側 26/36**。中身が少ないぶん上下が余るので、
   *    **高さを決めて上下中央**に置く（2026-09-16 指摘「高さを広げて上下センター、でも左揃え」）。
   *    左右は `text-align` を触らないので左揃えのまま。
   */
  justify-content: center;
  gap: 24px;
  min-height: 250px;
  padding: 26px 36px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.15);
}
@media (min-width: 1024px) {
  .p-faq__contact-card {
    justify-content: flex-start;
    min-height: 250px;
    padding: 44px 50px;
  }
}

.p-faq__contact-lead {
  font-size: 16px;
}
@media (min-width: 1024px) {
  .p-faq__contact-lead {
    font-size: 18px;
  }
}

/*
 * Figma 実測: 電話番号・「お問合せフォーム」ともに SP 28px / PC 32px。
 * ⚠️ **左にアイコンが付く**（2026-09-16 指摘で追加）。Figma は 51x51 の枠に
 *    電話 38x38 / メール 43x34 の図形、文字との間 8px。
 */
.p-faq__contact-value {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
}
@media (min-width: 1024px) {
  .p-faq__contact-value {
    font-size: 32px;
  }
}
.p-faq__contact-value a {
  color: #222222;
}

.p-faq__contact-icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  color: #222222;
}
.p-faq__contact-icon svg {
  width: 38px;
  height: 38px;
}

/*
 * 診療時間。
 * ⚠️ **SP は 1 行ずつ縦に積む**（2026-09-16 指摘。Figma の SP も 3 行が縦並び）。
 *    PC は Figma どおり横に並べる（gap 32）。
 */
.p-faq__contact-hours {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  font-size: 16px;
}
.p-faq__contact-hours li {
  width: 100%;
}
@media (min-width: 1024px) {
  .p-faq__contact-hours {
    font-size: 18px;
  }
  .p-faq__contact-hours li {
    width: auto;
  }
}

.p-faq__contact-note {
  font-size: 16px;
}
@media (min-width: 1024px) {
  .p-faq__contact-note {
    font-size: 18px;
  }
}

/* =============================================================
 * ご予約（固定ページ /reserve/）と、予約の進み具合
 *
 * Figma: ページ直下 `pc_予約ページ`（1488:23779）/ `sp_予約ページ`（1488:27585）
 *
 * ⚠️ `project/_reservation.scss` とは**別物**。あちらは施術詳細やよくある質問の
 *    下に出る「予約 CTA」（`template-parts/reservation.php`）のスタイル。
 * ⚠️ 幅は `.p-about__inner`（1360px）を使い回している。
 * ---------------------------------------------------------- */
.p-reserve-steps {
  padding-top: 40px;
}
@media (min-width: 1024px) {
  .p-reserve-steps {
    padding-top: 104px;
  }
}

/*
 * 丸の中心を 1px の線で結ぶ。線は丸の**背面**に敷き、丸は不透明な塗りで隠す。
 * ⚠️ 線の位置は丸の半径ぶん（PC 26.5px / SP 20px）下げる。
 */
.p-reserve-steps__list {
  position: relative;
  display: flex;
  justify-content: space-between;
}
.p-reserve-steps__list::before {
  position: absolute;
  top: 20px;
  right: 16px;
  left: 16px;
  height: 1px;
  background-color: #4da7d6;
  content: "";
}
@media (min-width: 1024px) {
  .p-reserve-steps__list::before {
    top: 26px;
    right: 40px;
    left: 40px;
  }
}

.p-reserve-steps__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.p-reserve-steps__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-size: 18px;
  color: #4da7d6;
  background-color: #ffffff;
  border: 1px solid #4da7d6;
  border-radius: 50%;
}
@media (min-width: 1024px) {
  .p-reserve-steps__num {
    width: 53px;
    height: 53px;
    font-size: 18px;
  }
}
.is-current > .p-reserve-steps__num {
  color: #ffffff;
  background-color: #4da7d6;
}
.p-reserve-steps__num {
  /*
   * 済んだ手順は薄い塗りにして「通ってきた」ことが分かるようにする。
   * ⚠️ `$color-alpha-20` は**半透明**なので `background-color` に置くと
   *    丸の背面を通る線が透けて見える（2026-09-15 指摘）。白の上に重ねて不透明にする。
   */
}
.is-done > .p-reserve-steps__num {
  background-image: linear-gradient(rgba(77, 167, 214, 0.2), rgba(77, 167, 214, 0.2));
}

.p-reserve-steps__label {
  margin-top: 4px;
  font-size: 16px;
  color: #222222;
}
@media (min-width: 1024px) {
  .p-reserve-steps__label {
    font-size: 18px;
  }
}

.p-reserve {
  padding-top: 80px;
}
@media (min-width: 1024px) {
  .p-reserve {
    padding-top: 120px;
  }
}

.p-reserve__lead {
  font-size: 16px;
  line-height: 1.8;
  text-align: center;
}
@media (min-width: 1024px) {
  .p-reserve__lead {
    font-size: 18px;
  }
}

/*
 * ⚠️ カードの並びは 1240px（1280 の中でさらに 20px 内側）。Figma 実測。
 *    影がはみ出すぶんの余白と考えると自然。
 */
.p-reserve__cards,
.p-reserve__contacts {
  max-width: 1240px;
  margin-inline: auto;
}

.p-reserve__cards {
  display: grid;
  gap: 24px;
  margin-top: 80px;
}
@media (min-width: 1024px) {
  .p-reserve__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
    margin-top: 120px;
  }
}

/*
 * ⚠️ 白いカードを**白いページ地**に置くので、影が無いと輪郭が消える。
 *    Figma 実測の影は `0 1px 10px rgba(0,0,0,0.15)`（トップのキャンペーンバナー、
 *    よくある質問の Q&A カードと同じ）。
 */
.p-reserve__card,
.p-reserve__contact {
  padding: 32px 24px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.15);
}
@media (min-width: 1024px) {
  .p-reserve__card,
  .p-reserve__contact {
    padding: 55px 50px;
  }
}

.p-reserve__card {
  display: flex;
  flex-direction: column;
}

.p-reserve__card-title {
  font-size: 20px;
  font-weight: 500;
}
@media (min-width: 1024px) {
  .p-reserve__card-title {
    font-size: 28px;
  }
}

.p-reserve__card-text {
  margin-top: 16px;
  font-size: 16px;
  line-height: 1.8;
}
@media (min-width: 1024px) {
  .p-reserve__card-text {
    font-size: 18px;
  }
}

/*
 * Figma 実測: 501x60・角丸 8・18px 白。保険は `#4DA7D6` / 美容は `#FA9A9A`。
 * ⚠️ **文字の右に白い矢印が付く**（Figma の Arrow 1・文字との間 8px。2026-09-16 指摘で追加）。
 *    ご挨拶やお知らせ一覧のボタンと同じ形なので `m.arrow-right` を使う。
 */
.p-reserve__button {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  /*
   * ⚠️ 説明文との間は **24px**（Figma 実測。PC・SP とも）。
   *    以前は `margin-top: auto`（カードの高さを揃えるため）にしていたが、SP はカードが
   *    1 枚ずつ縦に並ぶので `auto` が 0 になり、**説明文とボタンがくっついていた**（2026-09-16 指摘）。
   *    PC の 2 枚はどちらも説明文 2 行で高さが揃うので、固定値で問題ない。
   */
  margin-top: 24px;
  padding: 8px 16px;
  min-height: 50px;
  font-size: 16px;
  font-weight: 500;
  color: #ffffff;
  text-align: center;
  text-decoration: none;
  border-radius: 8px;
}
@media (min-width: 1024px) {
  .p-reserve__button {
    min-height: 60px;
    font-size: 18px;
  }
}
.p-reserve__button--insurance {
  background-color: #4da7d6;
}
.p-reserve__button--beauty {
  background-color: #fa9a9a;
}
.p-reserve__button::after {
  display: inline-block;
  width: 15px;
  height: 10px;
  background-color: currentcolor;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M1 5h11M9 1.5 13 5 9 8.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-size: contain;
  content: "";
}
@media (hover: hover) {
  .p-reserve__button:hover {
    color: #ffffff;
    text-decoration: none;
    opacity: 0.8;
  }
}

.p-reserve__contacts {
  display: grid;
  gap: 24px;
  margin-top: 24px;
}
@media (min-width: 1024px) {
  .p-reserve__contacts {
    gap: 48px;
    margin-top: 48px;
  }
}

.p-reserve__contact-lead {
  font-size: 16px;
}
@media (min-width: 1024px) {
  .p-reserve__contact-lead {
    font-size: 18px;
  }
}

.p-reserve__contact-value {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
}
@media (min-width: 1024px) {
  .p-reserve__contact-value {
    margin-top: 24px;
    font-size: 32px;
  }
}
.p-reserve__contact-value a {
  color: #222222;
}

/*
 * 🔴 **アイコンは CSS で描く**（2026-09-17）。
 *
 * このカードは**固定ページの本文**に移したが、本文に `<svg>` を書くと
 * **kses に消される**（`unfiltered_html` を持たない権限で保存した瞬間に落ちる。
 * 管理者以外の編集はもちろん、wp-cli からの投入でも消えた）。
 * なので本文には**空の `<span>` だけ**を置き、絵は `mask-image` で出す。
 *   <span class="p-reserve__contact-icon p-reserve__contact-icon--tel" aria-hidden="true"></span>
 * ⚠️ `mask` なので色は `background-color`（＝ `currentColor`）で決まる。形は `template-parts/icon.php`
 *    と同じパス。**片方だけ直すとずれる**ので、変えるときは両方直すこと。
 * ⚠️ 修飾子が無い（＝中に `<svg>` がある）古い書き方も、他ページのために残してある。
 */
.p-reserve__contact-icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  color: #26304a;
}
.p-reserve__contact-icon--tel, .p-reserve__contact-icon--mail {
  width: 28px;
  height: 28px;
  background-color: currentcolor;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}
@media (min-width: 1024px) {
  .p-reserve__contact-icon--tel, .p-reserve__contact-icon--mail {
    width: 40px;
    height: 40px;
  }
}
.p-reserve__contact-icon--tel {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.2.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .8-.2 1l-2.3 2.2Z'/%3E%3C/svg%3E");
}
.p-reserve__contact-icon--mail {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4a2 2 0 0 1-2-2V6c0-1.1.9-2 2-2Zm8 7L4.4 6.6a.5.5 0 0 0-.4.5v.3l8 4.6 8-4.6v-.3a.5.5 0 0 0-.4-.5L12 11Z'/%3E%3C/svg%3E");
}
.p-reserve__contact-icon svg {
  width: 28px;
  height: 28px;
}
@media (min-width: 1024px) {
  .p-reserve__contact-icon svg {
    width: 40px;
    height: 40px;
  }
}

.p-reserve__contact-hours {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  margin-top: 16px;
  font-size: 16px;
}
@media (min-width: 1024px) {
  .p-reserve__contact-hours {
    margin-top: 24px;
    font-size: 18px;
  }
}
.p-reserve__contact-hours li {
  display: flex;
  gap: 8px;
}

.p-reserve__contact-note {
  margin-top: 16px;
  font-size: 16px;
}
@media (min-width: 1024px) {
  .p-reserve__contact-note {
    margin-top: 24px;
    font-size: 18px;
  }
}

/* =============================================================
 * お問合せ（固定ページ /contact/）とフォームの見た目
 *
 * Figma: `pc_問合せフォーム`（1488:24594）/ `sp_お問合せフォーム`（1488:28528）
 *
 * ⚠️ フォームの中身は **Contact Form 7 が出す HTML**。CF7 はこちらが書いた
 *    フォーム定義をそのまま出すので、クラス名は `inc/contact-form.php` と揃える。
 *    CF7 が自動で足す `.wpcf7-list-item` 等にも当てておく。
 *
 * 🔴 **お問合せページのブロック名は `p-inquiry`**（2026-09-15 に `p-contact` から変えた）。
 *    `layout/_footer.scss` の CONTACT 誘導セクションが `.p-contact` を使っていて名前がぶつかり、
 *    そちらの `padding: 80px 20px`（PC `120px 40px`）を**このページが拾って**いた。
 *    ⚠️ `.p-contact__card-*` は**フッター側**のもの。混ぜないこと。
 * ---------------------------------------------------------- */
.p-inquiry {
  padding-top: 40px;
}
@media (min-width: 1024px) {
  .p-inquiry {
    padding-top: 104px;
  }
}

/*
 * Figma 実測（2026-09-15 に色を直した）:
 *   PC … 地 `#4DA7D6` 20%・文字 `#222222`・角丸 8・内側 30 / 50・見出し→本文 16
 *   SP … 同じ色・角丸 16・内側 36
 * ⚠️ 以前は「青地に白文字」で実装していた（Figma は薄い青地に黒文字）。
 */
.p-inquiry__notice {
  max-width: 1240px;
  margin-inline: auto;
  padding: 36px;
  color: #222222;
  background-color: rgba(77, 167, 214, 0.2);
  border-radius: 16px;
}
@media (min-width: 1024px) {
  .p-inquiry__notice {
    padding: 30px 50px;
    border-radius: 8px;
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.15);
  }
}
.p-inquiry__notice a {
  color: inherit;
  text-decoration: underline;
}

.p-inquiry__notice-title {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.8;
}
@media (min-width: 1024px) {
  .p-inquiry__notice-title {
    font-size: 18px;
    font-weight: 400;
  }
}

.p-inquiry__notice-items {
  margin-top: 16px;
  font-size: 16px;
  line-height: 1.8;
}
@media (min-width: 1024px) {
  .p-inquiry__notice-items {
    font-size: 18px;
  }
}
.p-inquiry__notice-items li {
  padding-left: 1em;
  text-indent: -1em;
}
.p-inquiry__notice-items li::before {
  content: "・";
}

.p-inquiry__form {
  max-width: 915px;
  margin-top: 80px;
  margin-inline: auto;
}
@media (min-width: 1024px) {
  .p-inquiry__form {
    margin-top: 160px;
  }
}

/*
 * ⚠️ 見た目確認用の表示だと分かる案内。**編集権限のある人にだけ**出る
 *    （`tsk_render_contact_form()` の中で出し分けている）。
 */
.c-form__preview-notice {
  margin-bottom: 24px;
  padding: 16px;
  font-size: 14px;
  color: #222222;
  background-color: #fff6d6;
  border: 1px solid #e0c14a;
  border-radius: 8px;
}

/*
 * 1 項目。グループの先頭に 1px `#26304A` の区切り線が入る（Figma 実測）。
 * ⚠️ 最後のグループの**下**にも線があるので、いちばん外側にも下線を足している。
 */
.c-form__row {
  padding-block: 24px;
}
@media (min-width: 1024px) {
  .c-form__row {
    padding-block: 32px;
  }
}
.c-form__row--group-start {
  border-top: 1px solid #26304a;
}
.c-form__row {
  /*
   * ⚠️ **いちばん上の区切り線は出さない**（2026-09-15 指摘）。
   *    Figma の最初の線は「チェック項目」の**下**（1488:23881 の Vector 146 / y=1192）にあり、
   *    見出しの上には無い。
   */
}
.c-form__row--group-start:first-child {
  border-top: 0;
}
.c-form__row:not(.c-form__row--group-start) {
  padding-top: 0;
}

/*
 * 見出しの**上**に出す一文（美容の「下記①か②…」）。
 * Figma 実測: 16px・`#E53E3E`（必須バッジと同じ赤）・その 8px 下に見出し。
 */
.c-form__lead {
  margin-bottom: 8px;
  font-size: 14px;
  color: #e53e3e;
}
@media (min-width: 1024px) {
  .c-form__lead {
    font-size: 16px;
  }
}

.c-form__head {
  display: flex;
  align-items: center;
  gap: 26px;
}

.c-form__label {
  font-size: 16px;
}
@media (min-width: 1024px) {
  .c-form__label {
    font-size: 18px;
  }
}

.c-form__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 45px;
  min-height: 22px;
  padding-inline: 6px;
  font-size: 14px;
  line-height: 1;
  color: #ffffff;
  background-color: #e53e3e;
  border-radius: 8px;
}

.c-form__note {
  margin-top: 4px;
  font-size: 14px;
  color: #222222;
}
@media (min-width: 1024px) {
  .c-form__note {
    font-size: 16px;
  }
}

.c-form__control {
  margin-top: 8px;
}
.c-form__control--short {
  max-width: 250px;
}
.c-form__control {
  /*
   * ⚠️ チェックボックスだけ**手前との間が広い**（Figma 実測 32px）。
   *    「診療内容（保険適用）」は注意書きの下 32px、「①治療法から選択」は見出しの下 32px。
   *    入力欄・ラジオは 8px のままでよい（2026-09-15 指摘）。
   */
}
.c-form__control--checkbox {
  margin-top: 32px;
}

/*
 * 手前の項目と同じ行に入る入力（来院歴の下の ID番号）。
 * Figma 実測: ラジオの下 8px に「ID番号　※再診で…」を 1 行（SP 14px / PC 16px）、その下に入力欄。
 * ⚠️ 項目名と注意書きを**同じ行**に並べる。狭い画面では注意書きだけ次の行へ回る。
 */
.c-form__sub {
  margin-top: 8px;
}

.c-form__sub-head {
  display: flex;
  flex-wrap: wrap;
  column-gap: 1em;
  font-size: 14px;
}
@media (min-width: 1024px) {
  .c-form__sub-head {
    font-size: 16px;
  }
}

/*
 * ご希望日（ラベル＋日付＋時間帯 × 3）。
 * Figma 実測:
 *   PC … 横並び gap 8・行間 8。ラベル 179x40（紺・角丸 8・白 16px）/ 日付 520x45 / 時間帯 179x33（角丸なし・1px `#222222`）
 *   SP … 縦積み gap 4・枠の間 16。ラベル 179x35（白 14px）/ 日付・時間帯とも 179x33
 */
.c-form__slots {
  display: grid;
  gap: 16px;
  margin-top: 16px;
}
@media (min-width: 1024px) {
  .c-form__slots {
    gap: 8px;
  }
}

.c-form__slot {
  display: grid;
  grid-template-columns: minmax(0, 179px);
  gap: 4px;
}
@media (min-width: 1024px) {
  .c-form__slot {
    grid-template-columns: 179px minmax(0, 520px) 179px;
    align-items: center;
    gap: 8px;
  }
}

.c-form__slot-label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 35px;
  font-size: 14px;
  color: #ffffff;
  background-color: #26304a;
  border-radius: 8px;
}
@media (min-width: 1024px) {
  .c-form__slot-label {
    min-height: 40px;
    font-size: 16px;
  }
}

.c-form__slot-date .c-form__input {
  min-height: 45px;
}

.c-form__slot-time .c-form__select {
  min-height: 45px;
  padding-inline: 10px;
  border-color: #222222;
  border-radius: 0;
}
@media (min-width: 1024px) {
  .c-form__slot-time .c-form__select {
    min-height: 33px;
    padding-block: 4px;
  }
}

/*
 * 入力欄。Figma 実測: 高さ 45・白・1px `#333333`・角丸 4。
 *   文字の左の余白 … PC 26px / SP 10px（入力例の文字位置から。2026-09-15 に 8px から直した）
 * ⚠️ CF7 は `<input>` を `<span class="wpcf7-form-control-wrap">` で包むので、
 *    幅の指定はその中の要素に効くよう `width: 100%` で書く。
 */
.c-form__input,
.c-form__select,
.c-form__textarea {
  width: 100%;
  min-height: 45px;
  padding: 8px 10px;
}
@media (min-width: 1024px) {
  .c-form__input,
  .c-form__select,
  .c-form__textarea {
    padding-inline: 26px;
  }
}
.c-form__input,
.c-form__select,
.c-form__textarea {
  font-family: inherit;
  font-size: 16px;
  color: #222222;
  background-color: #ffffff;
  border: 1px solid #333;
  border-radius: 4px;
}
@media (min-width: 1024px) {
  .c-form__input,
  .c-form__select,
  .c-form__textarea {
    font-size: 18px;
  }
}
.c-form__input:focus-visible,
.c-form__select:focus-visible,
.c-form__textarea:focus-visible {
  outline: 2px solid #4da7d6;
  outline-offset: 1px;
}
.c-form__input:disabled,
.c-form__select:disabled,
.c-form__textarea:disabled {
  color: #222222;
  background-color: #ffffff;
  opacity: 1;
}

.c-form__textarea {
  min-height: 160px;
}
@media (min-width: 1024px) {
  .c-form__textarea {
    min-height: 236px;
  }
}

.wpcf7-form-control-wrap {
  display: block;
}

.c-form__with-suffix {
  display: flex;
  align-items: center;
  gap: 8px;
}

.c-form__suffix {
  flex-shrink: 0;
  font-size: 18px;
}
@media (min-width: 1024px) {
  .c-form__suffix {
    font-size: 18px;
  }
}

/*
 * ラジオ。Figma 実測: 23px の丸（1px `#222222`）＋ ラベル、横並び gap 60。
 * ⚠️ CF7 は `.wpcf7-list-item` で 1 つずつ包む。
 */
.c-form__choices {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
}
.c-form__choices .wpcf7-list-item {
  margin: 0;
}
.c-form__choices label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.c-form__choices input {
  width: 23px;
  height: 23px;
  accent-color: #4da7d6;
}

.c-form__agree {
  padding-block: 24px;
  text-align: center;
}
@media (min-width: 1024px) {
  .c-form__agree {
    padding-block: 40px;
    font-size: 18px;
  }
}
.c-form__agree label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.c-form__agree input {
  width: 16px;
  height: 16px;
  accent-color: #4da7d6;
}

/*
 * ⚠️ CF7 は送信ボタンの後ろに `.wpcf7-spinner`（24px ＋ 左右の余白）を足す。
 *    流れの中に置いたままだとボタンが**左へずれて**中央に来ない（2026-09-15 に発見）ので、浮かせる。
 */
.c-form__submit {
  position: relative;
  text-align: center;
}
.c-form__submit .wpcf7-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0;
  transform: translate(-50%, -50%);
}

.c-form__submit-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 290px;
  max-width: 100%;
  min-height: 50px;
  padding-inline: 16px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  cursor: pointer;
  background-color: #4da7d6;
  border: 0;
  border-radius: 36px;
}
@media (min-width: 1024px) {
  .c-form__submit-button {
    min-height: 60px;
    font-size: 18px;
  }
}
@media (hover: hover) {
  .c-form__submit-button:hover {
    opacity: 0.8;
  }
}
.c-form__submit-button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.p-inquiry__tel {
  max-width: 915px;
  margin-top: 80px;
  margin-inline: auto;
  padding: 32px 24px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.15);
}
@media (min-width: 1024px) {
  .p-inquiry__tel {
    margin-top: 120px;
    padding: 44px 50px;
  }
}

/*
 * 選択肢が多いチェックボックス（診療内容・治療法・症状）。
 *
 * Figma 実測（2026-09-15 に並べ方を直した）:
 *   PC … 列を揃えず**文章のように左から流し込む**。横の間隔 24・行の間隔 16・□ 15px ＋ 8px ＋ 文言
 *   SP … 1 列・行の間隔 24
 * ⚠️ 以前は 3 列のグリッドにしていたが、文言の長さがまちまちで列の間が空きすぎていた。
 *    `flex-wrap` で流し込むと Figma と同じ詰まり方になる（inline-block と同じ並びで、行間を gap で持てる）。
 */
.c-form__control[data-columns] .c-form__choices {
  flex-direction: column;
  gap: 24px;
}
@media (min-width: 1024px) {
  .c-form__control[data-columns] .c-form__choices {
    flex-direction: row;
    gap: 16px 24px;
  }
}
.c-form__control[data-columns] .c-form__choices label {
  align-items: flex-start;
}
.c-form__control[data-columns] .c-form__choices input {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  margin-top: calc((1.8em - 15px) / 2);
}
.c-form__control[data-columns] .c-form__choices .wpcf7-list-item-label {
  min-width: 0;
}

.p-reserve-form {
  padding-top: 40px;
}
@media (min-width: 1024px) {
  .p-reserve-form {
    padding-top: 80px;
  }
}

/*
 * 美容側だけ先頭に出るキャンセル料の案内。
 * Figma 実測（2026-09-15 に作り直した）:
 *   PC … 1240 幅・地 `#4DA7D6` 20%・枠線なし・角丸 8・内側 42 / 50・段落の間 24・本文 18px・行間 180%
 *        見出し 18px Bold `#222222`
 *   SP … 内側 36・本文 16px
 *   案内 → フォームの先頭（チェック項目）… PC 160px
 */
.p-reserve-form__notice {
  max-width: 1240px;
  margin-inline: auto;
  padding: 36px;
  font-size: 16px;
  line-height: 1.8;
  color: #222222;
  background-color: rgba(77, 167, 214, 0.2);
  border-radius: 8px;
}
@media (min-width: 1024px) {
  .p-reserve-form__notice {
    padding: 42px 50px;
    font-size: 18px;
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.15);
  }
}
.p-reserve-form__notice > * + * {
  margin-top: 16px;
}
@media (min-width: 1024px) {
  .p-reserve-form__notice > * + * {
    margin-top: 24px;
  }
}

.p-reserve-form__notice-title {
  font-size: 18px;
  font-weight: 700;
}

.p-reserve-form__notice > p + .p-reserve-form__notice-list {
  margin-top: 0;
}

.p-reserve-form__body {
  max-width: 915px;
  margin-top: 80px;
  margin-inline: auto;
}
@media (min-width: 1024px) {
  .p-reserve-form__body {
    margin-top: 120px;
  }
}
@media (min-width: 1024px) {
  .p-reserve-form__notice + .p-reserve-form__body {
    margin-top: 128px;
  }
}

.c-form__confirm-lead {
  padding: 16px;
  font-size: 16px;
  text-align: center;
  background-color: #f8fcfe;
  border-radius: 8px;
}
@media (min-width: 1024px) {
  .c-form__confirm-lead {
    font-size: 18px;
  }
}

.c-form__confirm-list {
  margin-top: 32px;
}

.c-form__confirm-row {
  display: grid;
  gap: 4px;
  padding-block: 16px;
  border-top: 1px solid #26304a;
}
@media (min-width: 1024px) {
  .c-form__confirm-row {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 24px;
    padding-block: 24px;
  }
}
.c-form__confirm-row:last-child {
  border-bottom: 1px solid #26304a;
}
.c-form__confirm-row dt {
  font-size: 14px;
  font-weight: 500;
  color: #26304a;
}
@media (min-width: 1024px) {
  .c-form__confirm-row dt {
    font-size: 18px;
  }
}
.c-form__confirm-row dd {
  font-size: 16px;
  line-height: 1.8;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
@media (min-width: 1024px) {
  .c-form__confirm-row dd {
    font-size: 18px;
  }
}
.c-form__confirm-row dd.is-empty {
  color: rgba(38, 48, 74, 0.6);
}

/*
 * 送信完了のあとは、同意欄・Turnstile・ボタンの欄を JS が `hidden` で隠す（2026-10-01）。
 * ⚠️ `display: flex` などを持つ要素は `hidden` 属性だけでは消えないので、ここで明示する。
 */
.c-form__agree[hidden],
.c-form__turnstile[hidden],
.c-form__submit[hidden] {
  display: none;
}

/*
 * 「入力内容を確認する」「入力に戻る」。
 * ⚠️ `hidden` は JS が付け外しする。JS が動かなければ
 *    「確認する」は隠れたまま、「送信する」が最初から押せる。
 */
.c-form__submit--confirm {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
@media (min-width: 1024px) {
  .c-form__submit--confirm {
    flex-direction: row;
    justify-content: center;
    gap: 24px;
  }
}

.c-form__check-button,
.c-form__back-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 290px;
  max-width: 100%;
  min-height: 50px;
  padding-inline: 16px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  border-radius: 36px;
}
@media (min-width: 1024px) {
  .c-form__check-button,
  .c-form__back-button {
    min-height: 60px;
    font-size: 18px;
  }
}
@media (hover: hover) {
  .c-form__check-button:hover,
  .c-form__back-button:hover {
    opacity: 0.8;
  }
}
.c-form__check-button[hidden],
.c-form__back-button[hidden] {
  display: none;
}

.c-form__check-button {
  color: #ffffff;
  background-color: #4da7d6;
  border: 0;
}

.c-form__back-button {
  color: #222222;
  background-color: #ffffff;
  border: 2px solid rgba(77, 167, 214, 0.2);
}

.c-form__submit-button[hidden] {
  display: none;
}

/*
 * 確認へ進む前の必須チェックのメッセージ（`main.js` が差し込む）。
 * ⚠️ CF7 の `.wpcf7-not-valid-tip` とは別物。あちらは送信時のサーバー側の判定で出る。
 */
.tsk-form-error {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 500;
  color: #e53e3e;
}

/*
 * Cloudflare Turnstile（Contact Form 7 の標準機能。別セッションが設定）。
 *
 * ⚠️ ウィジェットの中身は **300px 固定の iframe** なので、320px の画面だと
 *    はみ出して横スクロールが出る（2026-09-10 に実測 sw=336）。
 *    枠側で受け止めて、はみ出しをページ全体に伝えない。
 * ⚠️ 置き場所は `inc/form.php` の `[turnstile]`（ボタンのすぐ上・中央）。
 *    タグが無いと CF7 がフォームの先頭へ勝手に差し込む。
 */
.c-form__turnstile {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}

.wpcf7-turnstile {
  max-width: 100%;
  overflow-x: auto;
}

/* =============================================================
 * 読み物系の固定ページ（プライバシーポリシー 等）と
 * サイトマップ
 *
 * ⚠️ どちらも **Figma にデザインが無い**（2026-09-10 時点）。
 *    サイト内の他ページと同じ部品・同じ寸法感で組んでいる。
 * ---------------------------------------------------------- */
.p-legal {
  padding-block: 40px 80px;
}
@media (min-width: 1024px) {
  .p-legal {
    padding-block: 104px 120px;
  }
}

/*
 * ⚠️ 幅は他ページの 1280px ではなく **880px**。
 *    法務文書のような長い本文は、1 行が長すぎると読みにくい
 *    （1 行 40〜45 文字が目安）。
 */
.p-legal__inner {
  max-width: 880px;
  font-size: 16px;
  line-height: 1.8;
}
@media (min-width: 1024px) {
  .p-legal__inner {
    font-size: 18px;
  }
}
.p-legal__inner {
  /*
   * ⚠️ 本文は `<article class="privacy-policy">` のような**入れ子**で来ることがあるので、
   *    `> * + *` では中身に効かない（2026-09-10 に踏んだ）。
   *    子孫セレクタで直接まとめて当てる。
   */
}
.p-legal__inner p,
.p-legal__inner ul,
.p-legal__inner ol,
.p-legal__inner table {
  margin-top: 1em;
}
.p-legal__inner {
  /*
   * 🔴 **本文中のリンクは最初から下線**（2026-09-17 指示「規約のリンクに text-underline を
   *    デフォルトで入れて」）。
   *    サイト全体の `a` は「ホバーで下線」だが、規約・ポリシーの類は**長い文章の中に
   *    リンクが混ざる**ので、下線が無いとどこがリンクか分からない。
   *    ⚠️ ここは本文だけ。ヘッダー・フッター・ボタンには効かない。
   */
}
.p-legal__inner a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.p-legal__inner h2 {
  margin-top: 2em;
  padding-bottom: 8px;
  font-size: 18px;
  font-weight: 500;
  color: #26304a;
  border-bottom: 1px solid #4da7d6;
}
@media (min-width: 1024px) {
  .p-legal__inner h2 {
    font-size: 24px;
  }
}
.p-legal__inner h2:first-child {
  margin-top: 0;
}
.p-legal__inner h3 {
  margin-top: 1.6em;
  font-size: 16px;
  font-weight: 500;
}
@media (min-width: 1024px) {
  .p-legal__inner h3 {
    font-size: 18px;
  }
}
.p-legal__inner h2 + *,
.p-legal__inner h3 + * {
  margin-top: 0.6em;
}
.p-legal__inner > *:first-child,
.p-legal__inner article > *:first-child {
  margin-top: 0;
}
.p-legal__inner ul {
  padding-left: 1em;
}
.p-legal__inner ul li {
  text-indent: -1em;
}
.p-legal__inner ul li::before {
  content: "・";
}
.p-legal__inner ul li + li {
  margin-top: 0.4em;
}
.p-legal__inner {
  /*
   * ⚠️ 長い URL がそのまま貼られていると、狭い画面で横スクロールが出る
   *    （指示書 §5「リンク（<a>）の改行」）。どこでも折り返せるようにしておく。
   * ⚠️ **下線は既定で出す**（2026-09-16 指摘）。規約の本文は色の違いだけだとリンクだと気づきにくく、
   *    色覚の差がある人にも伝わらない。サイト共通のリンクは「ホバーで下線」だが、ここは例外。
   */
}
.p-legal__inner a {
  overflow-wrap: anywhere;
  text-decoration: underline;
}

.p-sitemap {
  padding-block: 40px 80px;
}
@media (min-width: 1024px) {
  .p-sitemap {
    padding-block: 104px 120px;
  }
}

.p-sitemap__groups {
  display: grid;
  gap: 32px;
}
@media (min-width: 1024px) {
  .p-sitemap__groups {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 64px 40px;
  }
}

@media (min-width: 1024px) {
  .p-sitemap__group--wide {
    grid-column: 1/-1;
  }
}

.p-sitemap__heading {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #26304a;
}
@media (min-width: 1024px) {
  .p-sitemap__heading {
    gap: 17px;
    font-size: 24px;
  }
}

.p-sitemap__list {
  margin-top: 16px;
  font-size: 16px;
  line-height: 1.8;
}
@media (min-width: 1024px) {
  .p-sitemap__list {
    margin-top: 24px;
    font-size: 18px;
  }
}
.p-sitemap__list li + li {
  margin-top: 8px;
}
.p-sitemap__list a {
  color: #222222;
}
@media (hover: hover) {
  .p-sitemap__list a:hover {
    color: #4da7d6;
  }
}

@media (min-width: 1024px) {
  .p-sitemap__list--columns {
    columns: 3;
    column-gap: 40px;
  }
  .p-sitemap__list--columns li {
    break-inside: avoid;
  }
}

.p-notfound {
  padding-block: 40px 80px;
}
@media (min-width: 1024px) {
  .p-notfound {
    padding-block: 104px 120px;
  }
}

.p-notfound__lead {
  font-size: 16px;
  line-height: 1.8;
  text-align: center;
}
@media (min-width: 1024px) {
  .p-notfound__lead {
    font-size: 18px;
  }
}

.p-notfound__links {
  display: grid;
  gap: 16px;
  margin-top: 32px;
}
@media (min-width: 1024px) {
  .p-notfound__links {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-top: 48px;
  }
}

/*
 * よく使う入口のカード。
 * ⚠️ ページ地も白なので影で輪郭を出す（サイト内の他のカードと同じ影）。
 */
.p-notfound__item {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.15);
}

.p-notfound__link {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 100%;
  padding: 16px;
  color: #222222;
  text-decoration: none;
}
@media (min-width: 1024px) {
  .p-notfound__link {
    gap: 17px;
    padding: 24px;
  }
}
@media (hover: hover) {
  .p-notfound__link:hover {
    text-decoration: none;
    opacity: 0.8;
  }
}

.p-notfound__link-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.p-notfound__link-label {
  font-size: 16px;
  font-weight: 500;
}
@media (min-width: 1024px) {
  .p-notfound__link-label {
    font-size: 18px;
  }
}

.p-notfound__link-note {
  font-size: 14px;
  color: rgba(38, 48, 74, 0.6);
}

.p-notfound__tel {
  max-width: 915px;
  margin-top: 80px;
  margin-inline: auto;
  padding: 32px 24px;
  text-align: center;
  background-color: #f8fcfe;
  border-radius: 8px;
}
@media (min-width: 1024px) {
  .p-notfound__tel {
    margin-top: 120px;
    padding: 44px 50px;
  }
}
.p-notfound__tel .p-reserve__contact-value,
.p-notfound__tel .p-reserve__contact-hours {
  justify-content: center;
}

.p-notfound__sitemap {
  margin-top: 32px;
  font-size: 14px;
  text-align: center;
}
@media (min-width: 1024px) {
  .p-notfound__sitemap {
    margin-top: 48px;
    font-size: 16px;
  }
}

/* =============================================================
 * キャンペーン（一覧 / 個別 / 施術ページの右下バナー）
 *
 * ⚠️ **デザイン未確定**（Figma に一覧・個別のフレームが無い）。
 *    サイト内の他ページと同じ部品・寸法感で組んでいる。
 * ⚠️ `.p-campaign` は**トップページのセクション**が使っている（`_front.scss`）。
 *    ここでは `.p-campaign-archive` / `.p-campaign-single` / `.c-campaign-float` を使う。
 * ---------------------------------------------------------- */
.p-campaign-archive {
  padding-block: 40px 80px;
}
@media (min-width: 1024px) {
  .p-campaign-archive {
    padding-block: 104px 120px;
  }
}

.p-campaign-archive__group + .p-campaign-archive__group {
  margin-top: 80px;
}
@media (min-width: 1024px) {
  .p-campaign-archive__group + .p-campaign-archive__group {
    margin-top: 120px;
  }
}

.p-campaign-archive__heading {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 500;
  color: #26304a;
}
@media (min-width: 1024px) {
  .p-campaign-archive__heading {
    gap: 17px;
    font-size: 24px;
  }
}

.p-campaign-archive__empty {
  color: rgba(38, 48, 74, 0.6);
}

.p-campaign-list {
  display: grid;
  gap: 24px;
  margin-top: 32px;
}
@media (min-width: 1024px) {
  .p-campaign-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px;
    margin-top: 48px;
  }
}

.p-campaign-list__item {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.15);
}

.p-campaign-list__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: #222222;
  text-decoration: none;
}
@media (hover: hover) {
  .p-campaign-list__link:hover {
    text-decoration: none;
    opacity: 0.85;
  }
}

.p-campaign-list__thumb {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 8px 8px 0 0;
}
.p-campaign-list__thumb img {
  display: block;
  width: 100%;
  height: auto;
}
.p-campaign-list__thumb .c-placeholder {
  border: 0;
  border-radius: 0;
}

/*
 * 終了したキャンペーンは写真を落ち着かせて、上に「終了しました」を重ねる。
 * ⚠️ 色を薄くするだけだと「まだ使える」と読まれかねないので、必ず文字も出す。
 */
.p-campaign-list__item.is-past .p-campaign-list__thumb img {
  filter: grayscale(1);
  opacity: 0.5;
}

.p-campaign-list__badge {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 4px 8px;
  font-size: 14px;
  color: #ffffff;
  background-color: rgba(38, 48, 74, 0.6);
  border-radius: 8px;
}

.p-campaign-list__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
}

.p-campaign-list__title {
  font-size: 16px;
  font-weight: 500;
}
@media (min-width: 1024px) {
  .p-campaign-list__title {
    font-size: 18px;
  }
}

.p-campaign-list__period {
  font-size: 14px;
  color: rgba(38, 48, 74, 0.6);
}

.p-campaign-single {
  padding-block: 40px 80px;
}
@media (min-width: 1024px) {
  .p-campaign-single {
    padding-block: 104px 120px;
  }
}

.p-campaign-single__inner {
  max-width: 880px;
}

/*
 * 期間外のお知らせ。⚠️ 文言は自動で出る（終了日を過ぎれば先方が何もしなくても出る）。
 */
.p-campaign-single__notice {
  padding: 16px;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  border-radius: 8px;
}
@media (min-width: 1024px) {
  .p-campaign-single__notice {
    padding: 24px;
    font-size: 18px;
  }
}
.p-campaign-single__notice--ended {
  color: #7a2f22;
  background-color: #fff2ee;
  border: 1px solid #f1c5bd;
}
.p-campaign-single__notice--before {
  color: #26304a;
  background-color: #f8fcfe;
  border: 1px solid rgba(77, 167, 214, 0.2);
}

.p-campaign-single__notice-sub {
  font-size: 14px;
  font-weight: 400;
}

.p-campaign-single__head {
  margin-top: 32px;
}
@media (min-width: 1024px) {
  .p-campaign-single__head {
    margin-top: 48px;
  }
}

.p-campaign-single__title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
}
@media (min-width: 1024px) {
  .p-campaign-single__title {
    font-size: 36px;
  }
}

.p-campaign-single__period {
  margin-top: 8px;
  font-size: 14px;
  color: rgba(38, 48, 74, 0.6);
}
@media (min-width: 1024px) {
  .p-campaign-single__period {
    font-size: 16px;
  }
}

.p-campaign-single__banner {
  margin-top: 32px;
}
.p-campaign-single__banner img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.p-campaign-single__body {
  margin-top: 32px;
}
@media (min-width: 1024px) {
  .p-campaign-single__body {
    margin-top: 48px;
  }
}

.p-campaign-single__back {
  margin-top: 80px;
  text-align: center;
}

.c-campaign-float {
  position: fixed;
  /*
   * ⚠️ **ページトップのボタンと重ねない**。
   *    ページトップは SP 右 11 / 下 11 の 44px ＋ ラベル、PC 右 20 / 下 20 の 60px ＋ ラベル。
   *    SP は横に逃がす余地が無いので**上に積み**、PC は**左隣**に置く。
   * ⚠️ 閉じるボタンが 12px はみ出すので、右の余白はそれより大きく取る。
   */
  right: 20px;
  bottom: calc(84px + var(--tsk-fixed-nav-h, 0px));
  z-index: 40;
  width: min(240px, 100vw - 40px);
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.25);
}
@media (min-width: 1024px) {
  .c-campaign-float {
    right: 96px;
    bottom: 20px;
    width: 300px;
  }
}
.c-campaign-float[hidden] {
  display: none;
}

.c-campaign-float__link {
  display: block;
  overflow: hidden;
  border-radius: 8px;
  text-decoration: none;
}
@media (hover: hover) {
  .c-campaign-float__link:hover {
    text-decoration: none;
    opacity: 0.9;
  }
}

.c-campaign-float__image {
  display: block;
  width: 100%;
  height: auto;
}

.c-campaign-float__text {
  display: block;
  padding: 16px;
  font-size: 14px;
  font-weight: 500;
  color: #222222;
}

/*
 * 閉じるボタン。⚠️ 指で押せる大きさ（44px）を確保しつつ、
 * バナーの角に少しはみ出させて中身を隠さないようにする。
 */
.c-campaign-float__close {
  position: absolute;
  top: -12px;
  right: -12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  font-size: 18px;
  line-height: 1;
  color: #ffffff;
  cursor: pointer;
  background-color: #26304a;
  border: 2px solid #ffffff;
  border-radius: 50%;
}
@media (hover: hover) {
  .c-campaign-float__close:hover {
    opacity: 0.85;
  }
}
.c-campaign-float__close:focus-visible {
  outline: 2px solid #4da7d6;
  outline-offset: 2px;
}

@media print {
  .c-campaign-float {
    display: none;
  }
}
.p-reservation {
  margin-top: 120px;
  margin-bottom: 80px;
  text-align: center;
}
@media (min-width: 1024px) {
  .p-reservation {
    margin-top: 160px;
    margin-bottom: 120px;
  }
}

.p-reservation__inner {
  width: 100%;
  max-width: 873px;
  margin-inline: auto;
  padding-inline: 16px;
}

.p-reservation__title {
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0;
  color: #26304a;
}
@media (min-width: 1024px) {
  .p-reservation__title {
    font-size: 36px;
  }
}

.p-reservation__text {
  margin-top: 24px;
  font-size: 16px;
  line-height: 1.8;
}
@media (min-width: 1024px) {
  .p-reservation__text {
    font-size: 18px;
  }
}

.p-reservation__actions {
  display: grid;
  grid-template-columns: minmax(0, 350px);
  gap: 24px;
  justify-content: center;
  margin-top: 40px;
}
@media (min-width: 1024px) {
  .p-reservation__actions {
    grid-template-columns: repeat(2, 403px);
    gap: 32px;
    margin-top: 41px;
  }
}

.p-reservation__web {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  min-height: 147px;
  padding: 16px 24px;
  color: #ffffff;
  text-align: left;
  background-color: #fa9a9a;
  border-radius: 24px;
}
@media (min-width: 1024px) {
  .p-reservation__web {
    padding-inline: 27px;
  }
}
@media (hover: hover) {
  .p-reservation__web:hover {
    opacity: 0.85;
  }
}

.p-reservation__web-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.p-reservation__web-label {
  font-size: 20px;
  font-weight: 700;
}
@media (min-width: 1024px) {
  .p-reservation__web-label {
    font-size: 24px;
  }
}

.p-reservation__web-note {
  font-size: 14px;
}
@media (min-width: 1024px) {
  .p-reservation__web-note {
    font-size: 16px;
  }
}

.p-reservation__web-arrow {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: #fa9a9a;
  background-color: #ffffff;
  border-radius: 50%;
}

.p-reservation__tel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  justify-content: center;
  min-height: 147px;
  padding: 16px 24px;
  background-color: #ffffff;
  border-radius: 24px;
  box-shadow: 0 2px 12px rgba(38, 48, 74, 0.12);
}

.p-reservation__tel-note {
  font-size: 14px;
}
@media (min-width: 1024px) {
  .p-reservation__tel-note {
    font-size: 16px;
  }
}

.p-reservation__tel-num a {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 700;
  color: #222222;
  text-decoration: none;
}
@media (min-width: 1024px) {
  .p-reservation__tel-num a {
    font-size: 32px;
  }
}

.p-reservation__tel-icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  color: #222222;
}
.p-reservation__tel-icon svg {
  width: 32px;
  height: 32px;
}
@media (min-width: 1024px) {
  .p-reservation__tel-icon svg {
    width: 45px;
    height: 45px;
  }
}

.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 1023px) {
  .u-pc-only {
    display: none !important;
  }
}

@media (min-width: 1024px) {
  .u-sp-only {
    display: none !important;
  }
}

/*
 * 本文の中の強調（2026-09-28）
 *
 * 現行サイトから移した施術の本文に、赤字で書かれた注意書きがあった
 * （「当クリニックの◯◯治療は…を使用しています」など）。
 * 意味のある強調なので色を残すが、🔴 **自由な色ではなくテーマの色に固定する**。
 * 医療広告ガイドライン上、赤字の乱発は誇大表現に見えるため色は 1 つに絞る。
 *
 * ⚠️ リッチエディターの本文に入るので、`wp_kses_post()` を通っても消えない
 *    `class` で当てている（`style` 属性だと環境によって落ちる）。
 */
.u-text-accent {
  color: #fa9a9a;
}

/*
 * 並べて見せる画像（2026-09-29）
 *
 * 現行サイトから移した施術の本文に、工程を 3 枚並べて見せている箇所があった
 * （フォトフェイシャルの「照射前 → 照射中 → 治療後」）。
 * 旧テーマは `flex_3` というクラスで組んでいたが、そのクラスは移行時に落としている。
 *
 * ⚠️ **`<p>` に当てている。** 本文の `<div>` と `<figure>` は移行時に落とすため、
 *    落とされない `<p>` に移し替えてこのクラスを付けている
 *    （`_tsk-seed/import-old-treatments.php` の `tsk_import_clean()`）。
 * ⚠️ スマホは縦並び。旧サイトの説明文も「左から（スマートフォンは上から）」と書いている。
 */
.u-figures {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (min-width: 1024px) {
  .u-figures {
    flex-direction: row;
  }
}
.u-figures img {
  width: 100%;
  height: auto;
}
@media (min-width: 1024px) {
  .u-figures img {
    flex: 1 1 0;
    min-width: 0;
  }
}

/*
 * 「名前 ＋ 説明」の並び（2026-09-29）
 *
 * 現行サイトから移した施術の本文で、施術の種類を並べている箇所に使う
 * （ダーマペンの「当クリニックのダーマペン治療」）。
 * 素の箇条書きだと名前と説明が地続きで、どこで切れるのか読み取れなかった。
 */
.u-deflist dt {
  font-weight: 700;
}
.u-deflist dt + dd {
  margin-top: 4px;
}
.u-deflist dd + dt {
  margin-top: 16px;
}

/*
 * 見出しの文字色・装飾（2026-09-29 の先方要望）
 *
 * 「書体、文字色、太文字、斜体等を選べるように」という要望への答え。
 * 施術の編集画面で**文字色はラジオ・装飾はチェックボックス**から選ぶと、
 * ここのクラスが付く（`inc/treatment.php` の `tsk_text_deco_class()`）。
 *
 * 🔴 **色コードを直接入力させない。** 先方が自由に色を書けると、サイトの配色から
 *    外れた色や、白地で読めない色が入る。選べるのはここに用意した色だけにする。
 * ⚠️ **書体（font-family）は用意していない。** ページごとに印象がばらつき、
 *    サイト全体の統一が崩れるため（2026-09-29 の判断）。要望が出たらここに足す。
 * ⚠️ `u-text-accent` は**別物**。あちらは現行サイトから移した本文の赤字用。
 */
.u-tc-primary {
  color: #4da7d6;
}

.u-tc-accent {
  color: #fa9a9a;
}

/*
 * 一般的な色。⚠️ **白地で読める濃さに寄せてある**（コントラスト比 4.5:1 以上）。
 *    見た目の名前どおりの明るい色にすると、本文としては薄くて読めない。
 */
.u-tc-gray {
  color: #6b7280;
}

.u-tc-red {
  color: #c62828;
}

.u-tc-blue {
  color: #1e5eb8;
}

.u-tc-green {
  color: #1f7a44;
}

.u-tc-orange {
  color: #b35309;
}

.u-tc-purple {
  color: #6b3fa0;
}

.u-tc-brown {
  color: #7a4a2b;
}

.u-deco-bold {
  font-weight: 700;
}

.u-deco-italic {
  font-style: italic;
}

.u-deco-underline {
  text-decoration: underline;
}

@media print {
  .u-no-print,
  .l-header,
  .l-footer {
    display: none !important;
  }
  .p-clinic-calendar {
    margin: 0;
    page-break-inside: avoid;
  }
  .p-clinic-calendar__table {
    font-size: 10pt;
  }
  .p-clinic-calendar__table td {
    height: auto;
    min-height: 60px;
  }
  @page {
    size: A4 portrait;
    margin: 10mm;
  }
}