@charset "UTF-8";
/* ============================================================
   JOA形成外科 日本語LP ─ スタイルシート
   ------------------------------------------------------------
   色・フォントは仕様書4章の実測値です。変更しないでください。
   構成
     01 変数
     02 リセット・基本
     03 部品（ボタン・見出し）
     04 ヘッダー
     05 ヒーロー
     06 診療方針
     07 対応している傷あと
     08 比較
     09 治療法
     10 手術のタイミング
     11 渡韓プラン／抜糸
     12 相談の流れ
     13 医師紹介
     14 症例
     15 よくある質問
     16 アクセス・診療時間
     17 フッター
     18 追従CTA・モーダル
     19 アニメーション
   ============================================================ */

/* ---------- 01 変数 ---------- */
:root {
  /* ブランドネイビー（ロゴSVGから抽出） */
  --joa-navy:        #133F6C;

  /* テキスト */
  --text-primary:    #191919;
  --text-secondary:  #4A4A4A;
  --text-tertiary:   #717171;

  /* 面 */
  --bg:              #FFFFFF;
  --surface:         #F2F4F8;
  --border:          #E6E7E8;

  /* ネイビー派生 */
  --navy-tint-05:    #F3F6F9;
  --navy-tint-10:    #E7EDF2;
  --navy-tint-20:    #D0DCE6;

  --font-sans: "Pretendard Variable", Pretendard, -apple-system,
               BlinkMacSystemFont, "Hiragino Kaku Gothic ProN",
               "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
  --font-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho",
                "YuMincho", "MS PMincho", serif;

  --radius: 6px;
  --gutter: 20px;
  --maxw: 1080px;
}

/* ---------- 02 リセット・基本 ---------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: 0.01em;
  font-feature-settings: "palt" 1;
  /* 追従CTAが本文の末尾を隠さないための余白 */
  padding-bottom: 84px;
}

img, svg { max-width: 100%; height: auto; display: block; }
picture { display: block; }
a { color: var(--joa-navy); text-decoration-thickness: 1px; text-underline-offset: 3px; }
p { margin: 0 0 1.4em; }
p:last-child { margin-bottom: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }

:focus-visible {
  outline: 2px solid var(--joa-navy);
  outline-offset: 3px;
}

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.nowrap { white-space: nowrap; }

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

/* キーボード操作で本文へ飛ぶためのリンク。
   Tabキーを押したときだけ画面左上に現れます。 */
.skip-link {
  position: absolute;
  left: 12px; top: -60px;
  z-index: 100;
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 18px;
  border-radius: var(--radius);
  background: var(--joa-navy); color: #FFFFFF;
  font-size: 15px; font-weight: 600; text-decoration: none;
  transition: top .15s ease;
}
.skip-link:focus { top: 12px; }

/* ------------------------------------------------------------
   コントラスト対応（アクセシビリティ AA）
   ------------------------------------------------------------
   補助色 #717171 は白の上では 4.88:1 で AA を満たしますが、
   面（--surface #F2F4F8 / --navy-tint-05 #F3F6F9）の上では
   4.43:1 となり AA（4.5:1）に届きません。
   そのため、面の上だけ補助色を本文副色（#4A4A4A）に切り替えます。
   パレットの値そのものは変更していません。
   ------------------------------------------------------------ */
.section--surface,
.section--tint,
.risk-box,
.cmp-col.is-primary,
.plan-card.is-primary,
.night-note,
.flow-emph,
.case-reveal {
  --text-tertiary: var(--text-secondary);
}

/* ---------- 03 部品 ---------- */
.section { padding-block: 64px; }
.section--surface { background: var(--surface); }
.section--tint { background: var(--navy-tint-05); }

.sec-label {
  display: block;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.14em;
  color: var(--joa-navy);
  margin-bottom: 14px;
}

.sec-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 23px;
  line-height: 1.6;
  letter-spacing: 0.01em;
  margin: 0 0 20px;
}

.sec-title--sub {
  font-size: 20px;
  margin-bottom: 14px;
}
.sub-after-list { margin-top: 38px; }

.sec-lead {
  color: var(--text-secondary);
  margin-bottom: 32px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 54px;
  padding: 0 28px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--joa-navy);
  color: #FFFFFF;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: opacity .2s ease;
}
.btn:hover { opacity: .88; }

.btn--full { width: 100%; }

.btn--ghost {
  background: transparent;
  color: var(--joa-navy);
  border-color: var(--navy-tint-20);
}

.btn-note {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-tertiary);
}

/* ---------- 04 ヘッダー ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--border);
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 58px;
}
.header__logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
/* ロゴは円形のマーク。院名は画像に埋め込まずHTMLテキストで書く
   （画像内の文字は読み上げ・検索・拡大に対応できないため） */
.header__logo img { width: 38px; height: 38px; }
.header__brand { display: grid; line-height: 1.25; }
.header__brand-name {
  font-family: var(--font-serif);
  font-size: 17px; font-weight: 600; letter-spacing: .02em;
  color: var(--joa-navy);
}
.header__name {
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-secondary);
  letter-spacing: .04em;
}
/* 2行目は「ジョア形成外科（読み）｜傷あと治療」。
   幅が足りない画面では「傷あと治療」だけを省き、読みは残す */
.header__tag::before { content: "｜"; margin: 0 .3em; color: var(--navy-tint-20); }
@media (max-width: 479px) { .header__tag { display: none; } }
.header__tel {
  margin-left: auto;   /* 電話とメニューを右に寄せる */
  font-size: 14px;
  color: var(--joa-navy);
  text-decoration: none;
  white-space: nowrap;
}
.header__tel span { display: block; font-size: 14px; color: var(--text-tertiary); letter-spacing: .08em; }

/* ---------- 04b ページ内メニュー ---------- */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--navy-tint-20);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--joa-navy);
  font-family: var(--font-sans);
  font-size: 14px;
  cursor: pointer;
  flex: none;
}
.nav-toggle:hover { background: var(--navy-tint-05); }
.nav-toggle .ico { width: 20px; height: 20px; }

.nav {
  position: fixed;
  /* ヘッダー（z-index:50）の下に全面で開く */
  inset: 0;
  z-index: 49;
  background: var(--bg);
  overflow-y: auto;
  padding: 82px 0 48px;
}
.nav__label {
  font-size: 14px;
  letter-spacing: .14em;
  color: var(--text-tertiary);
  margin: 0 0 6px;
}
.nav__list li { border-bottom: 1px solid var(--border); }
.nav__list a {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 15px 2px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-primary);
  text-decoration: none;
}
.nav__desc { grid-column: 1; }
.nav__list a::after {
  grid-column: 2; grid-row: 1 / span 2; align-self: center;
  content: "";
  width: 9px; height: 9px;
  border-right: 1.5px solid var(--joa-navy);
  border-bottom: 1.5px solid var(--joa-navy);
  transform: rotate(-45deg);
}
.nav__list a:hover { color: var(--joa-navy); }
.nav__contact {
  margin-top: 28px;
  display: grid;
  gap: 14px;
  justify-items: center;
}
.nav__tel {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--joa-navy);
  font-size: 15px;
  text-decoration: none;
}

/* メニューが開いている間は、背景のスクロールと追従CTAを止める */
html.nav-open { overflow: hidden; }
html.nav-open .sticky-cta { display: none; }

/* 追従ヘッダーに隠れないよう、ジャンプ先の位置を下げる */
main [id], footer [id] { scroll-margin-top: 74px; }

/* ---------- 05 ヒーロー ---------- */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  /* 院長の顔が本文と重ならないだけの高さを確保しています。
     これより低くすると、顔の上に文字が乗ります */
  min-height: 780px;
  padding-block: 56px 44px;
  color: #FFFFFF;
  overflow: hidden;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__media picture, .hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
}
/* 画像は無加工。暗さはこのオーバーレイで作る
   ------------------------------------------------------------
   ⚠️ 白文字が乗る範囲では、透過率（α）を 0.62 より下げないこと。
   下地の写真が最も明るい画素だった場合、白文字のコントラストは
   α=0.59 で 4.5:1（AA）に達します。0.62 なら 5.11:1 です。
   α=0.42 では 2.73:1 で AA を満たしません。

   スマホでは院長の顔が上部（枠内 7〜42%）に来る切り抜きを使い、
   本文は 52% 以降から始まります。顔のある上部には文字が乗らない
   ため、そこだけ薄くして顔を見やすくしています。
   本文が始まる 52% 以降は 0.70 以上を保っています。
   ------------------------------------------------------------ */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(9,22,38,.30) 0%,
    rgba(9,22,38,.38) 40%,
    rgba(9,22,38,.70) 52%,
    rgba(9,22,38,.92) 100%
  );
}
.hero__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 31px;
  line-height: 1.62;
  letter-spacing: .015em;
  margin: 0 0 20px;
  text-shadow: 0 1px 24px rgba(0,0,0,.35);
}
.hero__lead {
  font-size: 16px;
  line-height: 1.9;
  color: rgba(255,255,255,.93);
  max-width: 30em;
  margin-bottom: 28px;
}
.hero__actions { display: flex; gap: 10px; }
.hero__actions .btn { flex: 1; min-width: 0; padding-inline: 12px; font-size: 15px; }
.hero__actions .btn .ico { width: 20px; height: 20px; }
.hero .btn--ghost {
  background: rgba(255,255,255,.06);
  color: #FFFFFF;
  border-color: rgba(255,255,255,.5);
}
.hero__meta {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.24);
  font-size: 14px;
  line-height: 1.85;
  color: rgba(255,255,255,.84);
}

/* ---------- 06 診療方針 ---------- */
.creed {
  font-family: var(--font-serif);
  font-size: 20px;
  line-height: 1.85;
  margin: 0 0 8px;
}
.creed--muted { color: var(--text-secondary); font-size: 17px; }

.policy-list {
  display: grid;
  gap: 2px;
  margin-top: 34px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.policy-item { background: var(--bg); padding: 26px 22px; }
.policy-item__num {
  display: block;
  font-family: var(--font-serif);
  font-size: 14px;
  letter-spacing: .1em;
  color: var(--joa-navy);
  margin-bottom: 10px;
}
.policy-item__title {
  font-family: var(--font-serif);
  font-size: 18.5px;
  line-height: 1.6;
  margin: 0 0 10px;
}
.policy-item__body {
  font-size: 15.5px;
  color: var(--text-secondary);
  margin: 0;
}

/* ---------- 07 対応している傷あと ---------- */
.scar-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.scar-item {
  display: flex;
  align-items: center;
  min-height: 62px;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 15px;
  line-height: 1.6;
}
.section--surface .scar-item { background: var(--bg); }

/* ---------- 08 比較 ---------- */
.cmp { display: grid; gap: 16px; }
.cmp-col {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 20px;
}
.cmp-col.is-primary {
  border-color: var(--navy-tint-20);
  background: var(--navy-tint-05);
}
.cmp-col__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.cmp-col__title {
  font-family: var(--font-serif);
  font-size: 19px;
  margin: 0;
}
.tag {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 3px;
  background: var(--joa-navy);
  color: #FFFFFF;
  font-size: 14px;
  line-height: 1.7;
  letter-spacing: .04em;
}
.tag--quiet { background: var(--navy-tint-10); color: var(--joa-navy); }

.spec { display: grid; gap: 14px; }
.spec > div { display: grid; gap: 3px; }
.spec dt {
  font-size: 14px;
  letter-spacing: .06em;
  color: var(--text-tertiary);
}
.spec dd {
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--text-primary);
}
.spec dd strong { color: var(--joa-navy); font-weight: 600; }

/* ---------- 09 治療法 ---------- */
.tx-list { display: grid; gap: 20px; }
.tx-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 20px;
}
.tx-card.is-primary { border-color: var(--joa-navy); }
.tx-card__head { margin-bottom: 18px; }
.tx-card__name {
  font-family: var(--font-serif);
  font-size: 22px;
  line-height: 1.5;
  margin: 0 0 8px;
}
.tx-card__lead { font-size: 14.5px; color: var(--joa-navy); margin: 0; }
.tx-card__desc { font-size: 15.5px; color: var(--text-secondary); }

/* ------------------------------------------------------------
   ⚠️ 以下の文字サイズを小さくしないでください
   ------------------------------------------------------------
   医療広告等ガイドライン 第3−3 2 は、限定解除の要件について
   「利点や長所に関する情報と比べて極端に小さな文字で掲載したり
   といった形式を採用しないこと」と定めています。
   同じ要件が未承認医薬品等の記載（ⅰ〜ⅴ）にもかかります。

   このLPで利点・長所を述べている本文は 15.5〜16px です。
   リスク・副作用および未承認の記載は、それを下回らないように
   しています（フッターの注記も同様）。
   ------------------------------------------------------------ */
.risk-box {
  margin-top: 18px;
  padding: 16px 16px;
  background: var(--surface);
  border-radius: 4px;
}
.tx-card.is-primary .risk-box,
.section--surface .risk-box { background: var(--navy-tint-05); }
.risk-box__title {
  font-size: 14px;
  letter-spacing: .06em;
  color: var(--text-primary);
  font-weight: 600;
  margin: 0 0 6px;
}
.risk-box__body {
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--text-secondary);
  margin: 0;
}

.unapproved {
  margin-top: 18px;
  border: 1px solid var(--navy-tint-20);
  border-radius: 4px;
  padding: 18px 16px;
  background: var(--bg);
}
.unapproved__title {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.7;
  margin: 0 0 12px;
}
/* 開示5項目は <ul><li>。⚠️ 利点の説明より小さい文字にしないこと（本文と同じ15.5px） */
.unapproved__list { display: grid; gap: 12px; padding-left: 1.3em; }
.unapproved__list li {
  list-style: disc;
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--text-secondary);
}

/* 層別縫合の図 */
.layer-fig {
  display: grid;
  gap: 22px;
  margin-top: 12px;
}
.layer-fig__svg {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
}
.tech-list { display: grid; gap: 14px; }
.tech-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  font-size: 15.5px;
  line-height: 1.8;
}
.tech-list b { font-weight: 600; }
.tech-list__mark {
  width: 22px; height: 22px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--navy-tint-10);
  color: var(--joa-navy);
  font-size: 14px;
  font-weight: 600;
  display: grid;
  place-items: center;
}
.tech-list__desc {
  display: block;
  font-size: 14.5px;
  color: var(--text-secondary);
  line-height: 1.8;
}

/* ---------- 10 手術のタイミング ---------- */
.timing {
  position: relative;
  color: #FFFFFF;
  isolation: isolate;
  overflow: hidden;
  padding-block: 72px;
}
.timing__media { position: absolute; inset: 0; z-index: -2; }
.timing__media picture { width: 100%; height: 100%; }
.timing__media img { width: 100%; height: 100%; object-fit: cover; }
.timing__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(9,22,38,.86), rgba(9,22,38,.92));
}
.timing .sec-label { color: var(--navy-tint-20); }
.timing .sec-title { color: #FFFFFF; }
.timing .sec-lead { color: rgba(255,255,255,.86); }

.phase-list {
  display: grid;
  gap: 12px;
  margin-bottom: 28px;
}
.phase-item {
  border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--radius);
  padding: 18px 18px;
  background: rgba(255,255,255,.04);
}
.phase-item__name {
  font-family: var(--font-serif);
  font-size: 17px;
  margin: 0 0 6px;
}
.phase-item__body {
  font-size: 14.5px;
  line-height: 1.85;
  color: rgba(255,255,255,.84);
  margin: 0;
}
.callout {
  border-left: 2px solid #FFFFFF;
  padding: 4px 0 4px 18px;
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.85;
}

/* ---------- 11 渡韓プラン／抜糸 ---------- */
.plan-grid { display: grid; gap: 16px; }
.plan-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 20px;
}
.plan-card.is-primary { border-color: var(--navy-tint-20); background: var(--navy-tint-05); }

.stitch {
  border: 1px solid var(--navy-tint-20);
  border-radius: var(--radius);
  background: var(--bg);
  padding: 28px 20px;
}
.stitch__q {
  font-family: var(--font-serif);
  font-size: 21px;
  line-height: 1.6;
  margin: 0 0 16px;
}
.stitch__a { color: var(--text-secondary); }
.stitch__cta { margin-top: 22px; }

/* ---------- 12 相談の流れ ---------- */
.flow-list {
  display: grid;
  gap: 0;
  counter-reset: flow;
  border-left: 1px solid var(--navy-tint-20);
  margin-left: 13px;
}
.flow-item {
  counter-increment: flow;
  position: relative;
  padding: 0 0 26px 30px;
}
.flow-item:last-child { padding-bottom: 0; }
.flow-item::before {
  content: counter(flow);
  position: absolute;
  left: -13px;
  top: 2px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--joa-navy);
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 600;
  display: grid;
  place-items: center;
}
.flow-item__title {
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.7;
  margin: 0 0 4px;
}
.flow-item__body {
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--text-secondary);
  margin: 0;
}
.flow-emph {
  margin-top: 30px;
  padding: 22px 20px;
  background: var(--navy-tint-05);
  border-radius: var(--radius);
  font-family: var(--font-serif);
  font-size: 19px;
  line-height: 1.75;
  text-align: center;
}

/* ---------- 13 医師紹介 ---------- */
.doctor { display: grid; gap: 26px; }
.doctor__photo {
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  max-width: 340px;
}
.doctor__name {
  font-family: var(--font-serif);
  font-size: 25px;
  line-height: 1.5;
  margin: 0 0 4px;
}
.doctor__name span { display: block; font-size: 14px; color: var(--text-tertiary); letter-spacing: .04em; margin-top: 6px; }
.doctor__role { font-size: 14.5px; color: var(--joa-navy); margin: 0 0 20px; }

.cred-group { margin-top: 22px; }
.cred-group__title {
  font-size: 14px;
  letter-spacing: .08em;
  color: var(--text-tertiary);
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.cred-list { display: grid; gap: 8px; }
.cred-list li {
  font-size: 15px;
  line-height: 1.8;
  padding-left: 15px;
  position: relative;
  color: var(--text-secondary);
}
.cred-list li::before {
  content: "";
  position: absolute;
  left: 0; top: .78em;
  width: 5px; height: 1px;
  background: var(--navy-tint-20);
}
.cred-list li strong { color: var(--text-primary); font-weight: 600; }
.paper-list li { font-size: 14.5px; }
.paper-list em { color: var(--text-tertiary); font-style: italic; }

/* ---------- 14 症例 ---------- */
.cases-list { display: grid; gap: 22px; max-width: 720px; }
.case-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  overflow: hidden;
}
.case-card__head {
  padding: 20px 20px 0;
}
.case-card__title {
  font-family: var(--font-serif);
  font-size: 19px;
  line-height: 1.55;
  margin: 0;
}
.case-reveal {
  margin: 16px 20px 0;
  border: 1px dashed var(--navy-tint-20);
  border-radius: 4px;
  background: var(--navy-tint-05);
  padding: 30px 18px;
  text-align: center;
  width: calc(100% - 40px);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.8;
  color: var(--joa-navy);
  cursor: pointer;
}
.case-reveal__note {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  color: var(--text-tertiary);
}
.ba {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  margin: 16px 0 0;
  background: var(--border);
}
.ba figure { margin: 0; background: var(--bg); }
.ba picture { line-height: 0; }
.ba img { width: 100%; aspect-ratio: 157 / 100; object-fit: cover; }
.ba figcaption {
  padding: 8px 10px;
  font-size: 14px;
  letter-spacing: .08em;
  color: var(--text-tertiary);
  text-align: center;
}
.case-card__spec { padding: 20px; }
.case-card .spec { gap: 12px; }
.cases-note {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  padding: 26px 20px;
  color: var(--text-secondary);
}

/* ---------- 15 よくある質問 ---------- */
.faq-list {
  border-top: 1px solid var(--border);
}
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item summary {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: start;
  padding: 20px 2px;
  cursor: pointer;
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.7;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "";
  width: 11px; height: 11px;
  margin-top: 8px;
  border-right: 1.5px solid var(--joa-navy);
  border-bottom: 1.5px solid var(--joa-navy);
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.faq-item[open] summary::after { transform: rotate(225deg); margin-top: 11px; }
.faq-item__body {
  padding: 0 2px 24px;
  font-size: 15.5px;
  color: var(--text-secondary);
}

/* ---------- 16 アクセス・診療時間 ---------- */
.access-grid { display: grid; gap: 30px; }
.hours { border-top: 1px solid var(--border); }
.hours__row {
  display: grid;
  grid-template-columns: 6.6em 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 13px 2px;
  border-bottom: 1px solid var(--border);
  font-size: 15.5px;
}
.hours__day { color: var(--text-secondary); }
.hours__time { font-variant-numeric: tabular-nums; }
.hours__row.is-closed .hours__time { color: var(--text-tertiary); }
.hours__note {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 3px;
  background: var(--navy-tint-10);
  color: var(--joa-navy);
  font-size: 14px;
  letter-spacing: .04em;
}
.hours__break { margin-top: 14px; font-size: 14px; color: var(--text-tertiary); }

.night-note {
  margin-top: 22px;
  padding: 20px;
  background: var(--navy-tint-05);
  border-radius: var(--radius);
}
.night-note p { font-size: 15.5px; }
.night-note strong { color: var(--joa-navy); }

.info-list { display: grid; gap: 16px; }
.info-list > div { display: grid; grid-template-columns: 5.6em 1fr; gap: 12px; }
.info-list dt { font-size: 14px; color: var(--text-tertiary); padding-top: 2px; }
.info-list dd { font-size: 15.5px; line-height: 1.8; }

/* ---------- 17 フッター ---------- */
.footer {
  background: var(--joa-navy);
  color: rgba(255,255,255,.82);
  padding-block: 52px 40px;
  font-size: 14px;
  line-height: 1.9;
}
.footer a { color: #FFFFFF; }
.footer__logo { width: 76px; height: 76px; margin-bottom: 20px; }
.footer__block { margin-bottom: 34px; }
.footer__title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .06em;
  color: #FFFFFF;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,.24);
}
.footer__list { display: grid; gap: 10px; }
.footer__list dt { font-size: 14px; color: var(--navy-tint-20); }
.footer__list dd { font-size: 14px; line-height: 1.85; }
/* 電話・メール・LINEのリンクは、指で押せる大きさ（24px以上）を確保する */
.footer__list dd > a,
.footer__nav a,
.crumb a {
  display: inline-flex; align-items: center; min-height: 26px;
}
.footer__small { font-size: 15px; line-height: 1.9; color: rgba(255,255,255,.68); }
.footer__bottom {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.2);
  font-size: 14px;
  color: rgba(255,255,255,.62);
}
.support {
  border: 1px solid rgba(255,255,255,.26);
  border-radius: var(--radius);
  padding: 20px 18px;
}
.support__title { font-size: 14px; font-weight: 600; color: #FFFFFF; margin: 0 0 8px; }
.support p { font-size: 14px; }

/* ---------- 18 追従CTA・モーダル ---------- */
.sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--border);
  transform: translateY(120%);
  transition: transform .28s ease;
}
.sticky-cta.is-visible { transform: translateY(0); }
.sticky-cta__inner {
  max-width: 520px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}
.sticky-cta .btn { min-height: 50px; padding-inline: 20px; }
.sticky-cta__tel {
  display: grid;
  place-items: center;
  min-height: 50px;
  padding-inline: 16px;
  border: 1px solid var(--navy-tint-20);
  border-radius: var(--radius);
  color: var(--joa-navy);
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
}

.dialog {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: var(--gutter);
  background: rgba(9,22,38,.5);
}
.dialog[hidden] { display: none; }
.dialog__panel > .btn { margin-top: 18px; }
.dialog__panel {
  background: var(--bg);
  border-radius: var(--radius);
  padding: 28px 22px 22px;
  max-width: 420px;
  width: 100%;
}
.dialog__title {
  font-family: var(--font-serif);
  font-size: 19px;
  line-height: 1.6;
  margin: 0 0 12px;
}
.dialog__body { font-size: 15px; color: var(--text-secondary); }
.dialog__tel {
  display: block;
  margin: 18px 0 20px;
  font-size: 22px;
  font-weight: 600;
  color: var(--joa-navy);
  text-decoration: none;
  letter-spacing: .02em;
}
.dialog__tel small { display: block; font-size: 14px; font-weight: 400; color: var(--text-tertiary); letter-spacing: .04em; margin-top: 4px; }

/* ---------- 19 アニメーション ---------- */
.fade {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s ease, transform .7s ease;
}
.fade.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fade { opacity: 1; transform: none; transition: none; }
  .sticky-cta { transition: none; }
}

/* ------------------------------------------------------------
   360px未満（iPhone SE など）
   文字が折り返して本文が縦に伸びるため、院長の顔に文字がかからない
   よう、文字を少し詰めてヒーローを高くしています
   ------------------------------------------------------------ */
@media (max-width: 479px) {
  /* 幅が足りないため、ヘッダーの電話表記は隠す
     （電話は画面下の追従ボタンとメニュー内にあります） */
  .header__tel { display: none; }
  .nav-toggle { margin-left: auto; }
}

@media (max-width: 359px) {
  /* 画面が非常に狭いときはマークを少し小さくする（読みは残す） */
  .header__logo img { width: 34px; height: 34px; }
  .header__brand-name { font-size: 16px; }

  .hero { min-height: 830px; }
  .hero__title { font-size: 27px; }
  .hero__lead { font-size: 15px; }
  .hero__points li { font-size: 14px; }
  .hero__actions .btn { font-size: 14px; padding-inline: 8px; }
}

/* ============================================================
   タブレット以上（768px）
   ============================================================ */
@media (min-width: 768px) {
  .nav { padding-top: 96px; }
  .nav__list { max-width: 560px; }
  .nav__contact { justify-items: start; max-width: 560px; }
  .nav__contact .btn--full { width: auto; min-width: 300px; }

  :root { --gutter: 32px; }
  body { padding-bottom: 0; }

  .section { padding-block: 92px; }
  .sec-title { font-size: 31px; }
  .sec-title--sub { font-size: 23px; }

  .hero { min-height: 640px; padding-block: 80px 64px; }
  /* 横長の切り抜きでは本文の位置が変わるため、全域 0.62 以上に戻す */
  .hero__media::after {
    background: linear-gradient(
      180deg,
      rgba(9,22,38,.70) 0%,
      rgba(9,22,38,.64) 34%,
      rgba(9,22,38,.90) 100%
    );
  }
  /* 横長の切り抜きでは院長が右側（枠内 58〜84%）にいるので、
     本文の幅を制限して顔と重ならないようにする。
     この値を広げると、見出しが院長の顔にかかります */
  .hero__title, .hero__lead { max-width: 480px; }
  .hero__points { max-width: 700px; }
  .hero__media picture, .hero__media img { object-position: 32% 45%; }
  .hero__title { font-size: 44px; }
  .hero__lead { font-size: 17px; }
  .hero__actions { max-width: 620px; }
  .hero__actions .btn { flex: none; min-width: 240px; font-size: 16px; padding-inline: 28px; }

  .creed { font-size: 24px; }
  .policy-list { grid-template-columns: 1fr 1fr; }
  .policy-item { padding: 30px 26px; }

  .scar-grid { grid-template-columns: repeat(3, 1fr); }

  .tx-card { padding: 34px 30px; }
  .tx-card__name { font-size: 25px; }
  .stitch { padding: 40px 34px; }
  .stitch__q { font-size: 25px; }
  .stitch__cta .btn { min-width: 280px; }

  .doctor { grid-template-columns: 300px 1fr; gap: 40px; align-items: start; }
  .doctor__photo { max-width: none; }

  .case-card__spec { padding: 22px 24px; }

  .faq-item summary { font-size: 17px; padding-block: 24px; }

  .access-grid { grid-template-columns: 1fr 1fr; gap: 48px; }

  .footer { padding-block: 64px 44px; }
  .footer__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; }

  .sticky-cta {
    left: auto; right: 24px; bottom: 24px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 10px 40px rgba(9,22,38,.14);
  }
  .sticky-cta__inner { max-width: none; }
}

/* ============================================================
   デスクトップ（1024px）
   ============================================================ */
@media (min-width: 1200px) {
  /* 画面が広いと院長がさらに右へ寄るので、本文の幅を戻せる */
  .hero__title, .hero__lead { max-width: 560px; }
  .hero__media picture, .hero__media img { object-position: 40% 45%; }
  /* 本文は左半分に収まるので、右側（院長）は薄くできる */
  .hero__media::after {
    background:
      linear-gradient(90deg, rgba(9,22,38,.80) 0%, rgba(9,22,38,.76) 55%, rgba(9,22,38,.42) 100%),
      linear-gradient(180deg, rgba(9,22,38,.10) 0%, rgba(9,22,38,0) 40%, rgba(9,22,38,.35) 100%);
  }
}

@media (min-width: 1024px) {
  .hero { min-height: 700px; }
  .hero__title { font-size: 50px; }
  .header__logo img { width: 42px; height: 42px; }
  .header__brand-name { font-size: 18px; }
}

/* ============================================================
   20 アイコンと視覚パーツ（あとから追加した部分）
   ------------------------------------------------------------
   アイコンは index.html 冒頭の <svg class="sprite"> に入れた
   線画を <use> で呼び出しています。色は文字色に追従します。
   ============================================================ */

/* スプライト本体は表示しない */
.sprite { display: none; }

/* アイコン共通 */
.ico {
  width: 24px; height: 24px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* 表示サイズを変えても線の太さが同じに見えるよう調整（1.8px相当で揃える） */
.ico--xs { display: inline-block; width: 15px; height: 15px; stroke-width: 2.9; vertical-align: -2px; margin-left: 4px; }
.ico--sm { width: 18px; height: 18px; stroke-width: 2.4; }
.ico--lg { width: 28px; height: 28px; stroke-width: 1.55; }

/* 角丸タイル型のアイコン（参考サイトの見せ方） */
.ico-tile {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 8px;
  background: var(--navy-tint-10);
  color: var(--joa-navy);
  flex: none;
}
.ico-tile--plain { background: transparent; border: 1px solid var(--navy-tint-20); }

/* セクション見出しの上に置く小さなラベル（罫線つき） */
.sec-label {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sec-label::before {
  content: "";
  width: 26px; height: 1px;
  background: var(--navy-tint-20);
  flex: none;
}

/* チェックリスト（段落を箇条書きに置き換えるためのもの） */
.checks { display: grid; gap: 10px; }
.checks li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  font-size: 15.5px;
  line-height: 1.8;
}
.checks .ico { color: var(--joa-navy); margin-top: 5px; }

/* ヒーロー内のチェックリスト */
.hero__points {
  display: grid;
  gap: 8px;
  margin: 0 0 26px;
}
.hero__points li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 9px;
  align-items: start;
  font-size: 14.5px;
  line-height: 1.7;
  color: rgba(255,255,255,.94);
}
.hero__points .ico { color: #FFFFFF; margin-top: 3px; }
.hero .btn .ico { color: currentColor; }

/* 小さなチップ（適応・所属学会などの列挙） */
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-secondary);
}
.chip--navy {
  border-color: var(--navy-tint-20);
  background: var(--navy-tint-05);
  color: var(--joa-navy);
}
.chip .ico { color: var(--joa-navy); }

/* ③ 対応している傷あと：アイコンを上、文字を下に積む
   （狭い画面で文字が不自然に折り返さないようにするため） */
.scar-item {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 10px;
  min-height: 108px;
  padding: 16px 10px;
  text-align: center;
  font-size: 14.5px;
  line-height: 1.6;
}
.scar-item .ico-tile { width: 40px; height: 40px; }
.scar-item .ico { color: var(--joa-navy); }

/* ② 診療方針：番号の代わりにアイコンタイル */
.policy-item__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.policy-item__num {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 14px;
  letter-spacing: .1em;
  color: var(--text-tertiary);
}

/* ⑤ 技術：イラスト3枚 */
.tech-grid { display: grid; gap: 16px; margin-top: 8px; }
.tech-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.tech-card__fig { margin: 0; background: #FBFBFC; border-bottom: 1px solid var(--border); }
.tech-card__fig img { width: 100%; }
.tech-card__fig svg { width: 100%; height: auto; display: block; }
.tech-card__fig picture { line-height: 0; }
.tech-card__body { padding: 18px 18px 20px; }
.tech-card__title {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.6;
  margin: 0 0 8px;
}
.tech-card__title .ico { color: var(--joa-navy); }
.tech-card__text {
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--text-secondary);
  margin: 0;
}

/* ④ 比較・⑦プラン：見出しにアイコン */
.cmp-col__title, .plan-card .cmp-col__title {
  display: flex;
  align-items: center;
  gap: 9px;
}
.cmp-col__title .ico { color: var(--joa-navy); }

/* ⑤ 治療カード：見出しにアイコン */
.tx-card__name { display: flex; align-items: center; gap: 10px; }
.tx-card__name .ico { color: var(--joa-navy); }

/* ⑥ 手術のタイミング：図 */
.timeline {
  margin: 8px 0 30px;
  padding: 20px 16px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--radius);
  background: rgba(255,255,255,.04);
  overflow-x: auto;
}
.timeline svg { width: 100%; min-width: 300px; height: auto; }

/* ⑨ 相談の流れ：番号をアイコンに */
.flow-item::before { content: none; }
.flow-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  padding: 0 0 24px 0;
}
.flow-list { border-left: 0; margin-left: 0; }
.flow-item__icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 8px;
  background: var(--navy-tint-05);
  border: 1px solid var(--navy-tint-20);
  color: var(--joa-navy);
}
.flow-item__step {
  position: absolute;
  top: -6px; left: -6px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--joa-navy);
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 600;
  display: grid;
  place-items: center;
  line-height: 1;
}
/* ステップをつなぐ縦線 */
.flow-item:not(:last-child) .flow-item__icon::after {
  content: "";
  position: absolute;
  top: 46px; left: 50%;
  width: 1px; height: calc(100% + 4px);
  background: var(--navy-tint-20);
}
.flow-item__wrap { padding-top: 8px; }

/* ⑩ 医師紹介：主要経歴のハイライト */
.cred-highlight {
  display: grid;
  gap: 10px;
  margin: 18px 0 4px;
}
.cred-highlight li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 11px;
  align-items: start;
  padding: 14px 15px;
  border: 1px solid var(--navy-tint-20);
  border-radius: var(--radius);
  background: var(--bg);
  font-size: 15px;
  line-height: 1.7;
  font-weight: 600;
}
.cred-highlight .ico { color: var(--joa-navy); margin-top: 3px; }
.cred-highlight span { display: block; font-size: 14px; font-weight: 400; color: var(--text-tertiary); margin-top: 3px; }

/* ⑬ アクセス：経路図 */
.map {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  padding: 14px;
  margin-bottom: 22px;
  overflow-x: auto;
}
.map > svg { width: 100%; min-width: 288px; height: auto; display: block; }
.map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 14px;
  color: var(--text-secondary);
}
.map-legend span { display: inline-flex; align-items: center; gap: 7px; }
.map-legend i {
  width: 18px; height: 0;
  border-top: 2px solid var(--joa-navy);
  display: inline-block;
}
.map-legend i.is-dash { border-top-style: dashed; border-color: var(--text-tertiary); }

/* ⑬ クリニック情報：項目にアイコン */
.info-list > div { grid-template-columns: auto 4.6em 1fr; align-items: start; }
.info-list .ico { color: var(--joa-navy); margin-top: 2px; }

/* ⑧ 抜糸・⑨ CTA のボタン内アイコン */
.btn .ico { color: currentColor; }

/* 追従CTAのアイコン */
.sticky-cta__tel { display: inline-flex; align-items: center; gap: 6px; }
.sticky-cta__tel .ico { color: var(--joa-navy); }
/* 電話は韓国語のみの対応。ボタンの中で言語を明示する */
.sticky-cta__tel span { display: grid; line-height: 1.25; text-align: left; }
.sticky-cta__tel small { font-size: 14px; font-weight: 400; color: var(--text-secondary); }

@media (min-width: 768px) {
  .tech-grid { grid-template-columns: repeat(3, 1fr); }
  .hero__points { grid-template-columns: repeat(3, 1fr); gap: 8px 20px; }
  .checks--2col { grid-template-columns: 1fr 1fr; gap: 10px 28px; }
  .cred-highlight { grid-template-columns: 1fr 1fr; }
  .timeline { padding: 26px 24px; }
  .map { padding: 22px; }
}

/* 治療カード内の「適応となる傷あと」ラベルとチップ */
.spec-standalone-dt {
  display: block;
  font-size: 14px;
  letter-spacing: .06em;
  color: var(--text-tertiary);
  margin: 18px 0 8px;
}
.tx-card .chips { margin-bottom: 4px; }
.tx-card .spec { margin-top: 18px; }

/* セクション冒頭の写真 */
.lead-fig {
  margin: 0 0 30px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--border);
}
.lead-fig img { width: 100%; }
.lead-fig picture { line-height: 0; }
.lead-fig figcaption {
  padding: 14px 16px;
  font-size: 15px;
  line-height: 1.85;
  color: var(--text-secondary);
  border-top: 1px solid var(--border);
}

/* 治療カード上部の画像 */
.tx-card__fig {
  margin: -26px -20px 20px;
  border-bottom: 1px solid var(--border);
}
.tx-card__fig img { width: 100%; }
.tx-card__fig picture { line-height: 0; }
@media (min-width: 768px) {
  .tx-card__fig { margin: -34px -30px 24px; }
}

/* ============================================================
   21 費用・ケロイド・木曜休診（メニュー確定にあわせて追加）
   ============================================================ */

/* 費用が変動する旨の注記 */
.tx-card__note {
  margin: 14px 0 0;
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--text-secondary);
}

/* ⚠️ ケロイドの保険適用に関する注記。
   これを書かずにケロイド治療で渡航を誘引しない方針です。
   文字サイズは利点の記述（15.5px）を下回らないようにしています */
.tx-card__insurance {
  margin-top: 18px;
  padding: 18px 16px;
  border: 1px solid var(--navy-tint-20);
  border-left: 3px solid var(--joa-navy);
  border-radius: 4px;
  background: var(--navy-tint-05);
}
.tx-card__insurance-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.7;
  color: var(--joa-navy);
  margin: 0 0 8px;
}
.tx-card__insurance-body {
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--text-primary);
  margin: 0;
}

/* 木曜休診の強調 */
.closed-note {
  margin-top: 18px;
  padding: 16px 18px;
  border: 1px solid var(--navy-tint-20);
  border-radius: var(--radius);
  background: var(--navy-tint-05);
}
.closed-note__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--joa-navy);
  margin: 0 0 6px;
}
.closed-note__body {
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--text-secondary);
  margin: 0;
}

/* 院内写真・院長写真のギャラリー */
.photo-grid { display: grid; gap: 14px; }
.photo-grid figure {
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg);
}
.photo-grid img { width: 100%; display: block; }
.photo-grid figcaption {
  padding: 11px 14px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--text-secondary);
  border-top: 1px solid var(--border);
}
/* 画像が入るまでの枠（差し替え後は自動で消えます） */
.photo-placeholder {
  display: grid;
  place-items: center;
  min-height: 200px;
  padding: 26px 20px;
  border: 1px dashed var(--navy-tint-20);
  border-radius: var(--radius);
  background: var(--surface);
  text-align: center;
  font-size: 14px;
  line-height: 1.9;
  color: var(--text-tertiary);
}
.photo-placeholder code {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--joa-navy);
  background: var(--navy-tint-10);
  padding: 1px 6px;
  border-radius: 3px;
}

@media (min-width: 768px) {
  .photo-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .photo-grid--3 { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   22 複数ページ構成のための追加
   ============================================================ */

/* パンくず */
.crumb {
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  color: var(--text-tertiary);
}
.crumb .container { display: flex; gap: 9px; align-items: center; padding-block: 11px; }
.crumb a { color: var(--joa-navy); text-decoration: none; }
.crumb a:hover { text-decoration: underline; }
.crumb [aria-current] { color: var(--text-secondary); }

/* 各ページの見出し部 */
.page-head {
  padding-block: 46px 34px;
  border-bottom: 1px solid var(--border);
  background: var(--navy-tint-05);
}
.page-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 28px;
  line-height: 1.55;
  letter-spacing: .01em;
  margin: 0 0 16px;
  text-wrap: balance;
}
.page-title__sub {
  display: block;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  color: var(--text-tertiary);
  letter-spacing: .04em;
  margin-top: 8px;
}
.page-lead { font-size: 16px; color: var(--text-secondary); margin: 0; max-width: 40em; }

/* メニュー：ページ名の下に説明を出す */
.nav__desc {
  display: block;
  font-size: 14px;
  color: var(--text-tertiary);
  line-height: 1.6;
  margin-top: 2px;
}
.nav__list a[aria-current="page"] { color: var(--joa-navy); font-weight: 600; }
.nav__list a[aria-current="page"]::after {
  border-color: var(--joa-navy);
}

/* 入口カード */
.entry-grid { display: grid; gap: 12px; }
.entry {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  padding: 18px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  text-decoration: none;
  color: inherit;
}
.entry:hover { border-color: var(--joa-navy); background: var(--navy-tint-05); }
.entry__body { display: grid; gap: 6px; }
.entry__title { font-size: 16.5px; font-weight: 700; line-height: 1.6; }
.entry__desc { font-size: 14.5px; line-height: 1.8; color: var(--text-secondary); }
.entry__to {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; color: var(--joa-navy); margin-top: 2px;
}

/* 次に読むページへの導線 */
.next-links {
  display: grid; gap: 10px;
  margin-top: 34px; padding-top: 26px;
  border-top: 1px solid var(--border);
}
.next-link {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 52px; padding: 0 18px;
  border: 1px solid var(--navy-tint-20);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--joa-navy);
  font-size: 15px; text-decoration: none;
}
.next-link:hover { background: var(--navy-tint-05); }
.next-link .ico { color: var(--joa-navy); }

/* 注意書きの枠 */
.note-box {
  padding: 20px 18px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--joa-navy);
  border-radius: 4px;
  background: var(--surface);
}
.note-box__title {
  font-size: 16px; font-weight: 700; line-height: 1.7;
  color: var(--text-primary); margin: 0 0 8px;
}
.note-box__body {
  font-size: 15.5px; line-height: 1.85; color: var(--text-secondary); margin: 0;
}
.note-box__body + .note-box__body { margin-top: 10px; }
.note-box__body strong { color: var(--text-primary); }

/* ⚠️ 強調が必要な注意（保険・休診など）。文字を小さくしないこと */
.section--alert { padding-block: 30px; }
.alert-box {
  padding: 22px 20px;
  border: 1px solid var(--navy-tint-20);
  border-radius: var(--radius);
  background: var(--navy-tint-05);
}
.alert-box__title {
  display: flex; align-items: center; gap: 9px;
  font-size: 17px; font-weight: 700; line-height: 1.6;
  color: var(--joa-navy); margin: 0 0 10px;
}
.alert-box__body {
  font-size: 15.5px; line-height: 1.9; color: var(--text-primary); margin: 0;
}
.alert-box__body + .alert-box__body { margin-top: 10px; }
.alert-box--navy { border-color: var(--joa-navy); }

/* 図解 */
.diagram { margin: 0; }
.diagram > svg {
  width: 100%; height: auto; display: block;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  box-sizing: border-box;
}
.diagram figcaption {
  margin-top: 12px;
  font-size: 15px; line-height: 1.85; color: var(--text-secondary);
}
.diagram figcaption strong { color: var(--text-primary); }
.diagram-pair { display: grid; gap: 26px; }
/* 横長の図は、狭い画面では横スクロールにする */
.diagram--wide { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.diagram--wide > svg { min-width: 688px; }
.scroll-hint {
  display: flex; align-items: center; gap: 7px;
  margin-top: 10px; font-size: 14px; color: var(--text-secondary);
}
.scroll-hint .ico { color: var(--text-secondary); }
@media (min-width: 768px) { .scroll-hint { display: none; } }

/* 部位別の縫合 */
.part-list { display: grid; gap: 2px; background: var(--border);
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.part { background: var(--bg); padding: 18px 18px; }
.part__name {
  display: flex; align-items: center; gap: 9px;
  font-size: 16px; font-weight: 700; line-height: 1.6; margin: 0 0 7px;
}
.part__name .ico { color: var(--joa-navy); }
.part__body { font-size: 15.5px; line-height: 1.85; color: var(--text-secondary); margin: 0; }

/* 応急処置ガイド */
.first-aid { display: grid; gap: 16px; }
.aid {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg); overflow: hidden;
}
.aid__name {
  display: flex; align-items: center; gap: 9px;
  margin: 0; padding: 15px 18px;
  font-size: 16.5px; font-weight: 700;
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.aid__name .ico { color: var(--joa-navy); }
.aid__cols { display: grid; gap: 1px; background: var(--border); }
.aid__col { background: var(--bg); padding: 16px 18px; }
.aid__label {
  font-size: 14px; font-weight: 700; letter-spacing: .06em;
  margin: 0 0 9px;
}
.aid__col--do .aid__label { color: #1F5F46; }
.aid__col--dont .aid__label { color: var(--warn, #97292B); }
.aid__col ul { display: grid; gap: 7px; }
.aid__col li {
  position: relative; padding-left: 16px;
  font-size: 15px; line-height: 1.8; color: var(--text-secondary);
}
.aid__col li::before {
  content: ""; position: absolute; left: 0; top: .8em;
  width: 7px; height: 1px; background: var(--text-tertiary);
}

/* 応急のご相談 */
.emergency-call {
  margin-top: 26px; padding: 24px 20px;
  border: 1px solid var(--joa-navy); border-radius: var(--radius);
  background: var(--bg);
}
.emergency-call__title {
  display: flex; align-items: center; gap: 9px;
  font-size: 15px; font-weight: 700; color: var(--joa-navy); margin: 0 0 10px;
}
.emergency-call__tel {
  display: block; font-size: 27px; font-weight: 700;
  color: var(--joa-navy); text-decoration: none; letter-spacing: .02em;
  line-height: 1.4;
}
.emergency-call__tel small {
  display: block; font-size: 14px; font-weight: 400;
  color: var(--text-tertiary); letter-spacing: .03em; margin-top: 5px;
}
.emergency-call__note {
  margin: 14px 0 0; font-size: 14.5px; line-height: 1.85; color: var(--text-secondary);
}

/* 経過の時点カード */
.phase-cards { display: grid; gap: 12px; margin-top: 28px; }
.phase-card {
  padding: 18px 18px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg);
}
.phase-card__when {
  font-family: var(--font-serif); font-size: 16px; font-weight: 600;
  color: var(--joa-navy); margin: 0 0 8px;
}
.phase-card__what {
  font-size: 15.5px; line-height: 1.85; color: var(--text-secondary); margin: 0;
}
.phase-card--warn { border-color: #E0BFBF; background: #FCF6F6; }
.phase-card--warn .phase-card__when { color: #97292B; }

/* 流れ（ページ版は説明が長いので余白を広げる） */
.flow-list--page .flow-item { padding-bottom: 34px; }
.flow-detail {
  margin-top: 14px; padding: 16px 16px;
  background: var(--surface); border-radius: 4px;
}
.flow-detail__title {
  font-size: 14.5px; font-weight: 700; margin: 0 0 10px; color: var(--text-primary);
}
.flow-detail__note {
  margin: 12px 0 0; font-size: 14.5px; line-height: 1.85; color: var(--text-secondary);
}
/* ⚠️ 「揃っていなくても相談できます」の一文。
   持ち物リストの中で、ハードルを下げる側の情報だと分かるように
   白地＋左罫線で置いています。文字を小さくしないこと。 */
.flow-detail__ok {
  margin-top: 14px; padding: 14px 14px;
  background: var(--bg);
  border-left: 3px solid var(--joa-navy);
  border-radius: 4px;
}
.flow-detail__ok p {
  margin: 0; font-size: 15px; line-height: 1.85; color: var(--text-secondary);
}
.flow-detail__ok p + p { margin-top: 8px; }
.flow-detail__ok strong { color: var(--text-primary); }

/* 論文カード */
.paper-cards { display: grid; gap: 12px; counter-reset: paper; }
.paper {
  counter-increment: paper;
  position: relative;
  padding: 18px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg);
}
/* 通し番号は図版のないカードだけに出す。
   図版のあるカードは、狭い画面で本文の幅を確保するため番号を省く */
.paper::before {
  content: counter(paper, decimal-leading-zero) "　";
  font-size: 14px; color: var(--text-tertiary);
}
.paper--fig::before { grid-column: 2; grid-row: 1; }
.paper--fig .paper__thumb { grid-column: 1; grid-row: 1 / span 2; }
.paper--fig .paper__body { grid-column: 2; grid-row: 2; }
.paper__title { font-size: 15px; font-weight: 600; line-height: 1.7; margin: 0 0 6px; }
.paper__ja { font-size: 14.5px; line-height: 1.8; color: var(--text-secondary); margin: 0 0 6px; }
.paper__meta { font-size: 14px; color: var(--text-tertiary); margin: 0; }

/* 論文の初出ページを添えたカード。図版は装飾なので alt="" にしてある
   （書誌情報はすぐ隣にテキストで書いてあるため） */
.paper--fig { display: grid; grid-template-columns: 78px 1fr; gap: 14px; align-items: start; }
.paper__thumb { display: block; }
.paper__thumb img {
  display: block; width: 78px; height: auto;
  border: 1px solid var(--border); border-radius: 3px;
  background: var(--bg);
}
/* 韓国語サイトの医療イラストを置くための枠。
   ⚠️ 図の説明（figcaption）は本文と同じ大きさを保つこと。
      利点の説明より小さい文字にしてはいけません（医療広告ガイドライン） */
.med-fig {
  margin: 0 0 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg);
}
.med-fig img { display: block; width: 100%; height: auto; }
.med-fig figcaption {
  padding: 14px 16px;
  font-size: 15px; line-height: 1.85; color: var(--text-secondary);
  border-top: 1px solid var(--border);
}
.med-fig-pair { display: grid; gap: 14px; margin-top: 20px; }
@media (min-width: 768px) {
  .med-fig-pair { grid-template-columns: 1fr 1fr; gap: 20px; }
}
/* 相談の流れの中に置く写真は、少し小さくする */
.flow-item__wrap .med-fig { margin-top: 14px; max-width: 480px; }

.paper-note {
  margin: 16px 0 0; font-size: 14px; line-height: 1.85; color: var(--text-secondary);
}
@media (min-width: 768px) {
  .paper--fig { grid-template-columns: 120px 1fr; gap: 20px; }
  .paper__thumb img { width: 120px; }
}
.paper__meta em { font-style: italic; }

/* フッターのページ一覧 */
.footer__nav { display: grid; gap: 9px; }
.footer__nav a { font-size: 14px; color: rgba(255,255,255,.88); text-decoration: none; }
.footer__nav a:hover { color: #FFFFFF; text-decoration: underline; }

@media (min-width: 768px) {
  .page-head { padding-block: 64px 44px; }
  .page-title { font-size: 38px; }
  .page-lead { font-size: 17px; }

  .entry-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .entry-grid--2 { grid-template-columns: 1fr 1fr; }
  .entry { padding: 22px 22px; }

  .next-links { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  .next-links--grid { grid-template-columns: repeat(3, 1fr); }

  .note-box, .alert-box { padding: 26px 26px; }
  .diagram-pair { grid-template-columns: 1fr 1fr; gap: 30px; }
  .aid__cols { grid-template-columns: 1fr 1fr; }
  .first-aid { gap: 20px; }
  .phase-cards { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .part { padding: 22px 24px; }
  .paper-cards { gap: 14px; }
  .emergency-call { padding: 30px 28px; }
  .emergency-call__tel { font-size: 32px; }
}

@media (min-width: 1024px) {
  .phase-cards { grid-template-columns: repeat(4, 1fr); }
}

/* ============================================================
   23 プライバシーポリシー（/privacy）
   規約の文章は本文と同じ大きさ。表は横にはみ出さないよう折り返す。
   ============================================================ */
.legal p, .legal li { font-size: 15.5px; line-height: 1.9; color: var(--text-secondary); }
.legal p { margin: 0 0 1.2em; }
.legal ul { list-style: disc; padding-left: 1.5em; margin: 0 0 1.2em; }
.legal li { list-style: disc; margin-bottom: .35em; }
.legal .sec-title--sub { margin-top: 44px; }
.legal .sec-title--sub:first-child { margin-top: 0; }
.legal-h3 { font-size: 16px; font-weight: 700; margin: 22px 0 8px; color: var(--text-primary); }
.legal-table { width: 100%; border-collapse: collapse; margin: 0 0 1.4em; font-size: 15px; line-height: 1.7; }
.legal-table th, .legal-table td { border: 1px solid var(--border); padding: 10px 12px; text-align: left; vertical-align: top; }
.legal-table th { background: var(--surface); font-weight: 600; color: var(--text-primary); white-space: nowrap; }
.legal-table td { color: var(--text-secondary); }
.legal .next-links { margin-top: 44px; }

/* ============================================================
   24 チームレビュー（2026-09-10）で直したもの
   ============================================================ */

/* 図のPCでの拡大を止める（SVGの文字がviewBox比で大きくなりすぎるため） */
.diagram > svg { max-width: 460px; margin-inline: auto; }
.diagram--wide > svg { max-width: none; }
.map > svg { min-width: 420px; max-width: 560px; margin-inline: auto; }
.map { max-width: 640px; }

/* 導線だけのセクションは上の余白を詰める */
.section--next { padding-block: 0 64px; }
.section--next .next-links { margin-top: 0; padding-top: 0; border-top: 0; }
@media (min-width: 768px) { .section--next { padding-block: 0 92px; } }

/* 本文の1行が長くなりすぎないようにする（約42文字） */
.sec-lead, .note-box__body, .alert-box__body, .tx-card__desc, .faq-item__body p,
.flow-item__body, .tech-card__text, .part__body, .paper-note { max-width: 42em; }

/* 診療方針：奇数個のとき最後の項目を横いっぱいにして空セルを出さない */
.policy-item:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* 応急のご相談：ボタンと電話番号の間隔 */
.emergency-call .btn { display: flex; max-width: 340px; margin: 0 auto 18px; }

/* フッターのページ一覧をPCで3列に */
@media (min-width: 768px) { .footer__nav { grid-template-columns: repeat(3, 1fr); gap: 0 24px; } }

/* 見出しの折り返しを整える */
/* 見出しの折り返しは、日本語では balance が語の途中で切れるため使わず、
   文節ごとの <span class="ib"> で制御する */
.ib { display: inline-block; }

/* 暗い面のフォーカスリングは白 */
.footer :focus-visible, .hero :focus-visible, .sticky-cta :focus-visible { outline-color: #FFFFFF; }

/* 押せる領域を44px以上に（見た目の行間は保つ） */
.footer__nav { gap: 0; }
.footer__nav a, .footer__list dd > a { min-height: 44px; }
.crumb a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 4px; margin-block: -8px; }
.header__logo { min-height: 44px; }
.nav__tel { min-height: 44px; padding-inline: 8px; }

/* イラストは幅を絞って面積を落とす。リストの直後は間隔を空ける */
.med-fig, .lead-fig { max-width: 720px; }
.med-fig-pair .med-fig { max-width: none; }
.checks + .med-fig, .sec-lead + .med-fig, .checks + .sec-title--sub { margin-top: 26px; }

/* フッターの補足文（旧インラインstyle） */
.footer__sub { display: block; font-size: 14px; color: rgba(255,255,255,.62); }
.footer__sub--inline { display: inline; }

/* LINEボタン末尾の「新しいタブ」アイコン（ボタン内では白・少し小さめ） */
.btn .ico--newtab { color: currentColor; opacity: .85; margin-left: 2px; }

/* 経路図（min-width 420＋余白）は 488px 以上で横スクロールしないため、案内も隠す */
@media (min-width: 488px) { .map .scroll-hint { display: none; } }

/* クリニック情報：アイコンは dt の中（dl の直下に svg を置かない） */
.info-list > div { grid-template-columns: 7.2em 1fr; }
.info-list dt { display: flex; align-items: flex-start; gap: 8px; }
.info-list dt .ico { margin-top: 3px; }

/* ヒーローと追従CTAのボタン：新しいタブのアイコンを足しても文字を折らない */
.hero__actions { flex-wrap: wrap; }
.hero__actions .btn, .sticky-cta .btn { white-space: nowrap; }
.btn .ico--newtab { margin-left: 0; }