/* =========================================================
   Sky Dental Clinic「根管治療(歯の神経・根の治療)」LP(/endo/)
   dentures.css(入れ歯ページの型)を共用し、このページ固有の
   スタイルだけをここに追加する。dentures.css は変更しないこと。
   ========================================================= */

/* ---------- ヘッダータブ(7項目・折り返し防止) ---------- */
@media (min-width: 768px) {
  .header__nav { gap: var(--space-2); }
  .header__nav a { white-space: nowrap; font-size: 13px; }
}

/* ---------- 初画面: 装置名の帯(掲載ルール21・治療の識別) ---------- */
.device-tag {
  display: inline-block;
  background: var(--color-primary);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  border-radius: 4px;
  padding: 4px 10px;
  margin-bottom: var(--space-1);
  letter-spacing: .02em;
}

/* ---------- リード内バッジ(3つの強み) ---------- */
.lead__badges {
  list-style: none;
  padding: 0;
  margin-top: var(--space-2);
  display: grid;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
}
.lead__badges li::before {
  content: "✓";
  color: var(--color-primary);
  font-weight: 700;
  margin-right: 8px;
}

/* ---------- 対象別アンカー(掲載ルール21・常時見えるページ内リンク) ---------- */
.target-links {
  list-style: none;
  padding: 0;
  margin-top: var(--space-2);
  display: grid;
  gap: 8px;
}
.target-links a {
  display: block;
  background: #fff;
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-card);
  padding: 10px 14px;
  text-decoration: none;
  color: var(--color-primary);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}
.target-links a:hover { background: var(--color-primary); color: #fff; }
.target-links a span {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--color-sub);
}
.target-links a:hover span { color: #fff; }

/* ---------- 対象別アンカー帯(スマホ専用・ヘッダー直下に固定。掲載ルール21) ---------- */
.target-bar {
  position: sticky;
  top: 60px;
  z-index: 80;
  display: flex;
  gap: 6px;
  padding: 6px var(--space-2);
  background: var(--color-accent-bg);
  border-bottom: 1px solid #d5e6f3;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.target-bar a {
  flex: 1 0 auto;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-primary);
  background: #fff;
  border: 1px solid var(--color-primary);
  border-radius: 14px;
  padding: 4px 10px;
  text-decoration: none;
  text-align: center;
}
@media (min-width: 768px) {
  /* PCでも常時見える対象別アンカー(掲載ルール21・監査指摘の反映)。ヘッダー(約72px)の直下に固定 */
  .target-bar { justify-content: center; } /* top は共通の60px(ヘッダー高と一致) */
  .target-bar a { flex: 0 0 auto; font-size: 13px; padding: 5px 16px; }
}
@media (max-width: 767px) {
  html { scroll-padding-top: 110px; } /* ヘッダー60px+アンカー帯の分 */
}

/* ---------- KV(治療4工程の図・白背景の図なので枠線で締める) ---------- */
.img-slot--kv img { background: #F4F8FB; }
.img-slot--kv { border: 1px solid #d5e6f3; }

/* ---------- 症状リスト(一般説明) ---------- */
.symptom-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 8px;
  margin-top: var(--space-1);
}
.symptom-list li {
  background: #f7fafc;
  border-radius: 6px;
  padding: 8px 12px 8px 36px;
  position: relative;
  font-size: 15px;
}
.symptom-list li::before {
  content: "●";
  position: absolute;
  left: 14px;
  color: var(--color-primary);
  font-size: 10px;
  top: 14px;
}
@media (min-width: 768px) {
  .symptom-list { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- 器具と材料4点(番号付きカード・画像つき) ---------- */
.tools { display: grid; gap: var(--space-3); margin-top: var(--space-2); }
.tool-card {
  border: 1px solid #e0e0e0;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: #fff;
}
.tool-card img { width: 100%; height: auto; display: block; }
.tool-card__body { padding: var(--space-2) var(--space-3) var(--space-3); }
.tool-card h3 {
  color: var(--color-primary);
  font-size: 17px;
}
.tool-card h3 .tool-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-size: 14px;
  margin-right: 8px;
  vertical-align: middle;
}
.tool-card p { font-size: 15px; }
.tool-card .tool-card__vs {
  margin-top: var(--space-1);
  font-size: 14px;
  background: var(--color-accent-bg);
  border-radius: 6px;
  padding: 8px 12px;
}
@media (min-width: 768px) {
  .tools { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- 対象別ブロック(初めて/再治療/抜歯と言われた) ---------- */
.target-block {
  border: 1px solid #e0e0e0;
  border-left: 6px solid var(--color-primary);
  border-radius: var(--radius-card);
  padding: var(--space-3);
  margin-top: var(--space-2);
}
.target-block h3 {
  color: var(--color-primary);
  font-size: 18px;
}
.target-block .target-block__who {
  background: var(--color-accent-bg);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 14px;
  margin: var(--space-1) 0 var(--space-2);
}
.target-block ul, .target-block ol { padding-left: 1.4em; display: grid; gap: 4px; font-size: 15px; }
.target-block .price-line {
  margin-top: var(--space-2);
  font-weight: 700;
}
.target-block .price-line strong {
  font-size: 20px;
  color: var(--color-primary);
}

/* ---------- 料金表(金額セル) ---------- */
.table-scroll td.price {
  font-weight: 700;
  white-space: nowrap;
}
.table-scroll td.price small {
  display: block;
  font-weight: 400;
  font-size: 11px;
  color: var(--color-sub);
}

/* ---------- 治療の流れ(来院回数バッジ) ---------- */
.visit-badge {
  display: inline-block;
  margin-left: 8px;
  background: var(--color-accent-bg);
  color: var(--color-primary);
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 10px;
  vertical-align: middle;
  white-space: nowrap;
}

/* ---------- 医院案内(定義リスト) ---------- */
.clinic-info dl { display: grid; gap: var(--space-2); }
.clinic-info dt {
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 4px;
}
.clinic-info dd { margin: 0; font-size: 15px; }
.clinic-info .img-slot { margin-bottom: var(--space-3); }

@media (min-width: 768px) {
  .clinic-info dl > div {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: var(--space-2);
    align-items: start;
  }
  .clinic-info dt { margin-bottom: 0; }
  .treatment__list--2 { grid-template-columns: repeat(2, 1fr); }
  .features__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- 固定フッターCTA(TEL未確定の間は電話ボタン非表示・予約全幅) ---------- */
.fixed-cta__tel[aria-disabled="true"] { display: none; }
.fixed-cta__reserve { flex: 1 1 auto; }

/* =========================================================
   スタイリッシュ・テーマ(2026-09-08 発注者指示「スタイリッシュ」)
   文章・構成は変えず、初画面の紺色バンド・見出し・カードの装飾のみ追加。
   dentures.css は変更しない。
   ========================================================= */
:root {
  --endo-navy: #0F2233;
  --endo-navy2: #18344E;
  --endo-gold: #C9A86A;
}

/* ---------- 初画面: 全幅の紺色バンド ---------- */
.page-head {
  position: relative;
  margin-top: 0;
  padding: var(--space-4) 0 var(--space-6);
  color: #fff;
}
.page-head::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: linear-gradient(160deg, var(--endo-navy) 0%, var(--endo-navy2) 100%);
  z-index: -1;
}
.page-head h1 { color: #fff; letter-spacing: .02em; }
.page-head .device-tag {
  background: transparent;
  border: 1px solid var(--endo-gold);
  color: var(--endo-gold);
  border-radius: 999px;
  padding: 5px 14px;
  letter-spacing: .08em;
}
.page-head .img-slot--kv { border: none; box-shadow: 0 16px 40px rgba(0,0,0,.35); }
.page-head .img-slot--kv img { background: var(--endo-navy); }
.page-head .img-slot figcaption { color: #AABECD; }
.page-head .lead {
  background: #fff;
  color: var(--color-text);
  box-shadow: 0 16px 40px rgba(0,0,0,.25);
}
.breadcrumb { margin-bottom: var(--space-2); }

/* ---------- 見出し: 左罫線をやめ、英字ラベル+細い罫線に ---------- */
main h2 {
  border-left: none;
  padding-left: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid #d5dde5;
  color: var(--endo-navy);
  letter-spacing: .03em;
  position: relative;
}
main h2[data-en]::before {
  content: attr(data-en);
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--endo-gold);
  margin-bottom: 6px;
}
main h2::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: 48px; height: 2px;
  background: var(--endo-gold);
}
.cta h2 { border-bottom: none; }
.cta h2::after { left: 50%; transform: translateX(-50%); }

/* ---------- 器具と材料: 黒背景バナー+番号を金色の英数字に ---------- */
.tools-banner {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: #000;
  margin: var(--space-2) 0 var(--space-3);
}
.tools-banner img { width: 100%; height: auto; display: block; opacity: .92; }
.tools-banner figcaption {
  position: absolute;
  left: var(--space-3); bottom: var(--space-2);
  color: #fff;
  font-size: 13px;
  letter-spacing: .06em;
  text-shadow: 0 1px 6px rgba(0,0,0,.6);
}
.tool-card { border: none; box-shadow: 0 6px 24px rgba(15,34,51,.10); }
.tool-card h3 .tool-no {
  background: transparent;
  color: var(--endo-gold);
  border: 1px solid var(--endo-gold);
  font-size: 12px;
  letter-spacing: .05em;
  width: 32px; height: 32px;
}
.tool-card .tool-card__vs {
  background: #F4F6F9;
  border-left: 3px solid var(--endo-gold);
  border-radius: 0 6px 6px 0;
}

/* ---------- 対象別ブロック・特長カード・流れ ---------- */
.target-block {
  border: none;
  border-left: 4px solid var(--endo-gold);
  background: #fff;
  box-shadow: 0 6px 24px rgba(15,34,51,.08);
}
.target-block h3 { color: var(--endo-navy); }
.target-block .price-line strong { color: var(--endo-navy); }
.feature-card {
  background: #fff;
  border: 1px solid #e3e8ee;
  border-top: 3px solid var(--endo-navy);
}
.feature-card h3 { color: var(--endo-navy); font-size: 16px; }
.flow__steps li { border: 1px solid #e3e8ee; box-shadow: 0 4px 16px rgba(15,34,51,.06); }
.flow__steps li::before { background: var(--endo-navy); }
.visit-badge { background: var(--endo-navy); color: #fff; }
.lab-note { background: #F4F6F9; border-left: 3px solid var(--endo-gold); border-radius: 0 var(--radius-card) var(--radius-card) 0; }

/* ---------- 表: ヘッダーを紺に ---------- */
.table-scroll thead th { background: var(--endo-navy); }
.table-scroll td.price { color: var(--endo-navy); }

/* ---------- 対象別アンカー(初画面内)・帯 ---------- */
.target-links a { border-color: var(--endo-navy); color: var(--endo-navy); }
.target-links a:hover { background: var(--endo-navy); }
.target-bar { background: #fff; border-bottom: 1px solid #e3e8ee; }
.target-bar a { border-color: var(--endo-navy); color: var(--endo-navy); }

/* ---------- 予約ボタン・CTA・フッター ---------- */
.btn--reserve { background: var(--endo-navy); }
.cta { background: linear-gradient(160deg, var(--endo-navy) 0%, var(--endo-navy2) 100%); color: #fff; }
.cta h2 { color: #fff; }
.cta .btn--reserve { background: var(--endo-gold); color: var(--endo-navy); }
.cta .note { color: #AABECD; }
.fixed-cta__reserve { background: var(--endo-navy); }
.footer { background: #F4F6F9; }
.risks .risk-band { background: #FFF8E1; border-left: 4px solid #C9A86A; }

@media (min-width: 768px) {
  .page-head { padding: var(--space-6) 0; }
  .page-head h1 { font-size: 32px; }
}

/* 全幅バンド(100vw)によるPCの横スクロール防止(スクロールバー幅分のはみ出しを切る) */
html, body { overflow-x: clip; }

/* =========================================================
   初画面リデザイン(2026-09-12 発注者指示「デザインだけをスタイリッシュに」)
   色(紺・ゴールド)・イラスト(endo-kv.jpg)・文章は一切変更せず、
   初画面の“見せ方”だけを刷新する。dentures.css は変更しない。
   ========================================================= */

/* ---------- ヘッダー下に金のヘアライン(帯への導入) ---------- */
.header { border-bottom: 1px solid #e3e8ee; box-shadow: 0 1px 0 rgba(201,168,106,.35); }

/* ---------- 対象別アンカー帯: 明るいアイボリー+細いチップ ---------- */
.target-bar {
  background: #FAF8F4;
  border-bottom: 1px solid rgba(201,168,106,.4);
  padding: 8px var(--space-2);
}
.target-bar a {
  background: #fff;
  border: 1px solid rgba(15,34,51,.22);
  color: var(--endo-navy);
  border-radius: 2px;
  letter-spacing: .04em;
  transition: background .2s, border-color .2s, color .2s;
}
.target-bar a:hover {
  background: var(--endo-navy);
  border-color: var(--endo-navy);
  color: #fff;
}

/* ---------- 紺色バンド: 金の淡い光+下端の金ヘアライン ---------- */
.page-head { padding: var(--space-4) 0 var(--space-6); }
.page-head::before {
  background:
    radial-gradient(115% 85% at 88% 4%, rgba(201,168,106,.22) 0%, rgba(201,168,106,0) 58%),
    radial-gradient(90% 70% at 2% 96%, rgba(201,168,106,.10) 0%, rgba(201,168,106,0) 60%),
    linear-gradient(158deg, #0F2233 0%, #1B3A56 58%, #0C1C2B 100%);
}
.page-head::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 0;
  width: 100vw; height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, rgba(201,168,106,0) 0%, rgba(201,168,106,.6) 20%, rgba(201,168,106,.6) 80%, rgba(201,168,106,0) 100%);
  z-index: -1;
}

/* ---------- 装置名タグ: 金の点+細い枠のピル ---------- */
.page-head .device-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(201,168,106,.10);
  border: 1px solid rgba(201,168,106,.55);
  color: #E3CE9E;
  font-size: 12px;
  letter-spacing: .1em;
  padding: 6px 16px;
  margin-bottom: var(--space-2);
}
.page-head .device-tag::before {
  content: "";
  flex: none;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--endo-gold);
}

/* ---------- h1: ゆったり大きく ---------- */
.page-head h1 {
  font-size: 27px;
  line-height: 1.5;
  letter-spacing: .015em;
  margin-bottom: var(--space-3);
}

/* ---------- KV: ゴールドの額縁(枠を少し離して置く)+キャプションを表示 ---------- */
.page-head .img-slot--kv {
  aspect-ratio: auto;
  overflow: visible;
  border: none;
  box-shadow: none;
  margin: 10px 0 0;
}
.page-head .img-slot--kv img {
  aspect-ratio: 16 / 9;
  height: auto;
  border-radius: 2px;
  box-shadow: 0 26px 56px rgba(0,0,0,.45);
  outline: 1px solid rgba(201,168,106,.42);
  outline-offset: 9px;
}
.page-head .img-slot--kv figcaption {
  margin-top: 22px;
  padding: 2px 0 2px 12px;
  border-left: 2px solid rgba(201,168,106,.55);
  font-size: 12px;
  line-height: 1.75;
  color: #A9BDCE;
}

/* ---------- リード: 白い箱をやめ、紺になじむガラス調パネルに ---------- */
.page-head .lead {
  background: rgba(255,255,255,.055);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.14);
  border-top: 2px solid var(--endo-gold);
  border-radius: 2px;
  box-shadow: 0 24px 56px rgba(0,0,0,.3);
  color: #DCE6EE;
  padding: var(--space-3);
}
.page-head .lead p { color: #D3DFE9; }
.page-head .lead p strong { color: #fff; }

/* バッジ(3つの強み): 金のチェック+細い区切り線 */
.page-head .lead__badges {
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid rgba(255,255,255,.13);
  gap: 8px;
  color: #E4EBF1;
}
.page-head .lead__badges li::before { color: var(--endo-gold); }

/* 対象別アンカー: 金の左罫線+右端に細い矢印 */
.page-head .target-links { margin-top: var(--space-3); gap: 7px; }
.page-head .target-links a {
  position: relative;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.16);
  border-left: 3px solid rgba(201,168,106,.75);
  border-radius: 2px;
  color: #fff;
  padding: 11px 36px 11px 14px;
  transition: background .2s, border-color .2s;
}
.page-head .target-links a::after {
  content: "";
  position: absolute;
  right: 16px; top: 50%;
  width: 7px; height: 7px;
  border-right: 1.5px solid var(--endo-gold);
  border-bottom: 1.5px solid var(--endo-gold);
  transform: translateY(-70%) rotate(-45deg);
}
.page-head .target-links a span { color: #A9BDCE; margin-top: 3px; }
.page-head .target-links a:hover {
  background: rgba(201,168,106,.14);
  border-color: rgba(201,168,106,.55);
  border-left-color: var(--endo-gold);
  color: #fff;
}
.page-head .target-links a:hover span { color: #E3CE9E; }

/* 予約ボタン: 紺の上ではゴールド(下部CTAと同じ考え方) */
.page-head .btn--reserve {
  background: var(--endo-gold);
  color: var(--endo-navy);
  letter-spacing: .06em;
  box-shadow: 0 12px 28px rgba(201,168,106,.26);
  width: 100%;
}

@media (min-width: 768px) {
  .page-head { padding: 64px 0 68px; }
  .page-head h1 { font-size: 38px; line-height: 1.4; }
  .page-head__grid { gap: var(--space-6); align-items: center; }
  .page-head .img-slot--kv img { outline-offset: 12px; }
  .page-head .img-slot--kv figcaption { margin-top: 26px; }
  .page-head .lead { padding: var(--space-4); }
  .page-head .btn--reserve { width: auto; min-width: 280px; }
}

/* =========================================================
   初画面のリード(文章部分)を白背景に戻す(2026-09-12 発注者指示)
   紺のバンドとの明暗差で「メリハリ」を出す。文章・構成は変更なし。
   ========================================================= */
.page-head .lead {
  background: #fff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: none;
  border-top: 3px solid var(--endo-gold);
  border-radius: 2px;
  box-shadow: 0 26px 60px rgba(0,0,0,.42);
  color: var(--color-text);
}
.page-head .lead p { color: var(--color-text); }
.page-head .lead p strong {
  display: inline-block;
  color: var(--endo-navy);
  font-size: 17px;
  line-height: 1.6;
  margin-bottom: 4px;
}

/* 3つの強み: 金のチェック+薄いグレーの区切り線 */
.page-head .lead__badges {
  border-top: 1px solid #e6eaef;
  color: var(--endo-navy);
  font-weight: 700;
}
.page-head .lead__badges li::before { color: var(--endo-gold); }

/* 対象別アンカー: 白地+金の左罫線+金の矢印(ホバーで紺に反転) */
.page-head .target-links a {
  background: #FBFAF7;
  border: 1px solid #e6eaef;
  border-left: 3px solid var(--endo-gold);
  color: var(--endo-navy);
}
.page-head .target-links a span { color: var(--color-sub); }
.page-head .target-links a::after {
  border-right-color: var(--endo-gold);
  border-bottom-color: var(--endo-gold);
}
.page-head .target-links a:hover {
  background: var(--endo-navy);
  border-color: var(--endo-navy);
  border-left-color: var(--endo-gold);
  color: #fff;
}
.page-head .target-links a:hover span { color: #C7D6E2; }
.page-head .target-links a:hover::after {
  border-right-color: var(--endo-gold);
  border-bottom-color: var(--endo-gold);
}

/* =========================================================
   紺バンドの装飾(2026-09-12 発注者指示「紺の部分にデザインを加えて」)
   金の二重リング・細かいドットの地紋・上下の金ヘアライン・周辺の陰影。
   文章・イラスト・配色(紺/金)は変更しない。
   ========================================================= */
.page-head::before {
  background-color: var(--endo-navy);
  background-image:
    /* 金の細い二重リング(右上・一部を裁ち落とす) */
    radial-gradient(circle at 88% -2%, rgba(201,168,106,0) 0 152px, rgba(201,168,106,.30) 152px 153px, rgba(201,168,106,0) 153px),
    radial-gradient(circle at 88% -2%, rgba(201,168,106,0) 0 104px, rgba(201,168,106,.16) 104px 105px, rgba(201,168,106,0) 105px),
    /* 金のごく淡い光 */
    radial-gradient(115% 85% at 88% 2%, rgba(201,168,106,.20) 0%, rgba(201,168,106,0) 58%),
    radial-gradient(90% 70% at 0% 100%, rgba(201,168,106,.10) 0%, rgba(201,168,106,0) 60%),
    /* 細かいドットの地紋(質感) */
    radial-gradient(rgba(255,255,255,.07) 1px, rgba(255,255,255,0) 1.3px),
    /* 周辺をわずかに落として中央を立たせる */
    radial-gradient(125% 105% at 50% 38%, rgba(0,0,0,0) 42%, rgba(0,0,0,.30) 100%),
    /* ベースの紺グラデーション */
    linear-gradient(158deg, #0F2233 0%, #1B3A56 58%, #0C1C2B 100%);
  background-size: auto, auto, auto, auto, 18px 18px, auto, auto;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat, no-repeat, no-repeat;
}

/* 帯の上下に金のヘアライン(帯を1枚の面として締める) */
.page-head::after {
  top: 0;
  bottom: 0;
  height: auto;
  background:
    linear-gradient(90deg, rgba(201,168,106,0) 0%, rgba(201,168,106,.45) 18%, rgba(201,168,106,.45) 82%, rgba(201,168,106,0) 100%) left top / 100% 1px no-repeat,
    linear-gradient(90deg, rgba(201,168,106,0) 0%, rgba(201,168,106,.6) 18%, rgba(201,168,106,.6) 82%, rgba(201,168,106,0) 100%) left bottom / 100% 1px no-repeat;
}

/* 見出しの上に細い金の縦罫(エディトリアルなアクセント) */
.page-head {
  background: linear-gradient(rgba(201,168,106,.9), rgba(201,168,106,0)) no-repeat left top / 1px 22px;
}

@media (min-width: 768px) {
  .page-head { background-size: 1px 44px; }
  .page-head::before {
    background-image:
      radial-gradient(circle at 86% -4%, rgba(201,168,106,0) 0 286px, rgba(201,168,106,.28) 286px 287px, rgba(201,168,106,0) 287px),
      radial-gradient(circle at 86% -4%, rgba(201,168,106,0) 0 198px, rgba(201,168,106,.15) 198px 199px, rgba(201,168,106,0) 199px),
      radial-gradient(115% 85% at 88% 2%, rgba(201,168,106,.20) 0%, rgba(201,168,106,0) 58%),
      radial-gradient(90% 70% at 0% 100%, rgba(201,168,106,.10) 0%, rgba(201,168,106,0) 60%),
      radial-gradient(rgba(255,255,255,.07) 1px, rgba(255,255,255,0) 1.3px),
      radial-gradient(125% 105% at 50% 38%, rgba(0,0,0,0) 42%, rgba(0,0,0,.30) 100%),
      linear-gradient(158deg, #0F2233 0%, #1B3A56 58%, #0C1C2B 100%);
    background-size: auto, auto, auto, auto, 22px 22px, auto, auto;
  }
}

/* =========================================================
   紺バンドの装飾を差し替え(2026-09-12 発注者指示)
   ・ドットの地紋は廃止
   ・右上の金のリング → 左上に「歯(根管)」の白い線画
   金のヘアライン・淡い光・陰影はそのまま。文章・イラストは変更なし。
   ========================================================= */
.page-head::before {
  background-color: var(--endo-navy);
  background-image:
    /* 歯と根管の線画(白の縁・左上に配置。一部を裁ち落とす) */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 120'%3E%3Cg fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'%3E%3Cpath d='M50 6C26 6 10 20 10 42c0 13 4 23 8 34 4 14 5 30 11 37 5 6 12 4 14-6 2-12 3-23 7-23s5 11 7 23c2 10 9 12 14 6 6-7 7-23 11-37 4-11 8-21 8-34C90 20 74 6 50 6Z' stroke-width='1.5' opacity='.34' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M23 39c11 9 43 9 54 0' stroke-width='1.1' opacity='.3' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M46 47c-2 20-6 40-11 57' stroke-width='1.1' opacity='.3' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M54 47c2 20 6 40 11 57' stroke-width='1.1' opacity='.3' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M46 47c1-4 7-4 8 0' stroke-width='1.1' opacity='.3' vector-effect='non-scaling-stroke'/%3E%3C/g%3E%3C/svg%3E"),
    /* 金のごく淡い光(右上・左上) */
    radial-gradient(115% 85% at 93% 4%, rgba(201,168,106,.20) 0%, rgba(201,168,106,0) 58%),
    radial-gradient(80% 70% at 4% 6%, rgba(201,168,106,.13) 0%, rgba(201,168,106,0) 62%),
    /* 周辺をわずかに落として中央を立たせる */
    radial-gradient(125% 105% at 50% 38%, rgba(0,0,0,0) 42%, rgba(0,0,0,.30) 100%),
    /* ベースの紺グラデーション */
    linear-gradient(158deg, #0F2233 0%, #1B3A56 58%, #0C1C2B 100%);
  background-repeat: no-repeat;
  background-position: -22px -8px, 0 0, 0 0, 0 0, 0 0;
  background-size: 172px 206px, auto, auto, auto, auto;
}

@media (min-width: 768px) {
  .page-head::before {
    background-position: -40px -14px, 0 0, 0 0, 0 0, 0 0;
    background-size: 320px 384px, auto, auto, auto, auto;
  }
}

/* 歯の線画を置いたので、見出し上の金の縦罫は外す(左上を整理・2026-09-12) */
.page-head { background: none; }

/* =========================================================
   明朝体へ変更 + 歯の線画を縮小(2026-09-12 発注者指示)
   ========================================================= */

/* ---------- 全体を明朝体に(Noto Serif JP。端末内の明朝へフォールバック) ---------- */
body,
button, input, select, textarea {
  font-family: "Noto Serif JP", "Yu Mincho", YuMincho, "Hiragino Mincho ProN",
               "Hiragino Mincho Pro", "MS PMincho", "Noto Serif", serif;
}
/* 明朝は線が細いので、太字と小さい文字を少し補正して読みやすさを保つ */
h1, h2, h3, .btn, .device-tag, .lead p strong, .lead__badges, .target-links a, .target-bar a {
  font-weight: 700;
}
.page-head h1 { letter-spacing: .04em; }
main h2[data-en]::before { letter-spacing: .2em; }
.note, .small, .img-slot figcaption, .target-links a span { letter-spacing: .01em; }

/* ---------- 左上の歯の線画を小さく ---------- */
.page-head::before {
  background-position: -18px -6px, 0 0, 0 0, 0 0, 0 0;
  background-size: 118px 142px, auto, auto, auto, auto;
}
@media (min-width: 768px) {
  .page-head::before {
    background-position: -30px -12px, 0 0, 0 0, 0 0, 0 0;
    background-size: 216px 259px, auto, auto, auto, auto;
  }
}

/* =========================================================
   「根管治療(歯の神経・根の治療)とは」(#about)を
   初画面のデザイン(紺・ゴールド・明朝・細い罫線)に合わせる
   (2026-09-12 発注者指示)。文章・構成は変更しない。
   ========================================================= */

/* セクション全体を淡いアイボリーの全幅バンドに(紺バンドからの続きを作る) */
#about {
  position: relative;
  margin-top: 0;
  padding: var(--space-6) 0;
}
#about::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: #FAF8F4;
  border-bottom: 1px solid rgba(201,168,106,.3);
  z-index: -1;
}
#about h2 { margin-bottom: var(--space-3); }

/* 導入文: 金の縦罫を添えて少し大きく */
#about > p:first-of-type {
  padding-left: 18px;
  border-left: 2px solid rgba(201,168,106,.65);
  font-size: 17px;
  line-height: 2;
  color: #2B3A45;
}

/* 「次のような状態のときに…」を小見出しの扱いに */
#about p strong {
  display: block;
  margin-top: var(--space-3);
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(201,168,106,.45);
  color: var(--endo-navy);
  font-size: 17px;
  letter-spacing: .04em;
}

/* 症状リスト: 白いカード+金のダイヤ形マーカー */
#about .symptom-list { gap: 10px; margin-top: var(--space-2); }
#about .symptom-list li {
  background: #fff;
  border: 1px solid #ECE6DB;
  border-left: 2px solid var(--endo-gold);
  border-radius: 2px;
  padding: 12px 14px 12px 38px;
  font-size: 15px;
  color: var(--endo-navy);
  box-shadow: 0 2px 10px rgba(15,34,51,.04);
}
#about .symptom-list li::before {
  content: "";
  font-size: 0;
  left: 18px;
  top: 50%;
  width: 6px;
  height: 6px;
  background: var(--endo-gold);
  transform: translateY(-50%) rotate(45deg);
}

/* 小見出し: 金の菱形を添える */
#about h3 {
  position: relative;
  padding-left: 16px;
  color: var(--endo-navy);
  font-size: 18px;
  letter-spacing: .04em;
}
#about h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 7px;
  height: 7px;
  background: var(--endo-gold);
  transform: rotate(45deg);
}

/* 治療の工程: 紺のパネル+ゴールドの通し番号(01〜05) */
#about ol.target-block {
  list-style: none;
  border: none;
  border-radius: 2px;
  background: linear-gradient(158deg, #0F2233 0%, #1B3A56 100%);
  box-shadow: 0 18px 44px rgba(15,34,51,.24);
  padding: var(--space-3);
  counter-reset: about-step;
}
#about ol.target-block li {
  counter-increment: about-step;
  position: relative;
  padding: 14px 0 14px 48px;
  border-top: 1px solid rgba(255,255,255,.10);
  color: #FFFFFF;
  font-size: 15px;
  line-height: 1.95;
}
#about ol.target-block li:first-child { border-top: none; padding-top: 2px; }
#about ol.target-block li::before {
  content: counter(about-step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 18px;
  width: 30px;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(201,168,106,.55);
  color: var(--endo-gold);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
}
#about ol.target-block li:first-child::before { top: 6px; }

/* 注意書き: 白地+金の左罫線 */
#about .note {
  margin-top: var(--space-2);
  padding: 12px 14px;
  background: #fff;
  border-left: 3px solid var(--endo-gold);
  border-radius: 0 2px 2px 0;
  font-size: 13px;
  line-height: 1.9;
  color: #55606B;
}

@media (min-width: 768px) {
  #about { padding: 64px 0 68px; }
  #about > p:first-of-type { font-size: 18px; }
  #about ol.target-block { padding: var(--space-4); }
}

/* =========================================================
   装飾を足して密度を上げる(2026-09-12 発注者指示「シンプル過ぎる」)
   配色(紺・ゴールド)・文章・構成は変更しない。
   ========================================================= */

/* ---------- 見出しの英字ラベルを金縁のピルに(初画面の装置タグと揃える) ---------- */
main h2[data-en]::before {
  display: table;
  margin-bottom: 10px;
  padding: 4px 13px;
  border: 1px solid rgba(154,123,58,.45);
  border-radius: 999px;
  background: rgba(201,168,106,.10);
  color: #8E6F32;
  font-size: 10px;
  letter-spacing: .2em;
}
.cta h2[data-en]::before {
  border-color: rgba(201,168,106,.55);
  background: rgba(201,168,106,.12);
  color: #E3CE9E;
}
/* 見出し下は二重罫(細い金の帯+金の点) */
main h2::after {
  width: 92px;
  height: 9px;
  bottom: -5px;
  background:
    linear-gradient(90deg, var(--endo-gold) 0%, rgba(201,168,106,.35) 100%) 0 4px / 60px 2px no-repeat,
    radial-gradient(circle, var(--endo-gold) 0 3px, rgba(201,168,106,0) 3.5px) 68px 0 / 9px 9px no-repeat;
}
.cta h2::after { background-position: 0 4px, 68px 0; }

/* ---------- #about: 地の質感と歯の透かし ---------- */
#about::before {
  background-color: #FAF8F4;
  background-image:
    /* 右下に歯の線画をごく薄く(初画面の左上と呼応) */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 120'%3E%3Cg fill='none' stroke='%23c9a86a' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M50 6C26 6 10 20 10 42c0 13 4 23 8 34 4 14 5 30 11 37 5 6 12 4 14-6 2-12 3-23 7-23s5 11 7 23c2 10 9 12 14 6 6-7 7-23 11-37 4-11 8-21 8-34C90 20 74 6 50 6Z' stroke-width='1.4' opacity='.45' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M23 39c11 9 43 9 54 0' stroke-width='1' opacity='.3' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M46 47c-2 20-6 40-11 57' stroke-width='1' opacity='.3' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M54 47c2 20 6 40 11 57' stroke-width='1' opacity='.3' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M46 47c1-4 7-4 8 0' stroke-width='1' opacity='.3' vector-effect='non-scaling-stroke'/%3E%3C/g%3E%3C/svg%3E"),
    /* 縦のグラデーション */
    linear-gradient(180deg, #FBF9F5 0%, #F5F1E8 100%);
  background-repeat: no-repeat, no-repeat;
  background-position: right -30px bottom -24px, 0 0;
  background-size: 150px 180px, auto;
}
/* 区切りに金のひし形の飾り */
#about::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 11px;
  height: 11px;
  transform: translateX(-50%) rotate(45deg);
  background: #F5F1E8;
  border: 1px solid rgba(201,168,106,.7);
}

/* ---------- 導入文を白いカードに ---------- */
#about > p:first-of-type {
  background: #fff;
  border: 1px solid #EEE7D9;
  border-left: 3px solid var(--endo-gold);
  border-radius: 2px;
  padding: var(--space-3);
  box-shadow: 0 8px 26px rgba(15,34,51,.06);
}

/* ---------- 症状カード: 金の角飾り+ホバーで浮かせる ---------- */
#about .symptom-list li {
  background:
    linear-gradient(rgba(201,168,106,.85), rgba(201,168,106,.85)) top right / 15px 1px no-repeat,
    linear-gradient(rgba(201,168,106,.85), rgba(201,168,106,.85)) top right / 1px 15px no-repeat,
    #fff;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
#about .symptom-list li:hover {
  transform: translateY(-2px);
  border-color: rgba(201,168,106,.55);
  box-shadow: 0 12px 26px rgba(15,34,51,.10);
}

/* ---------- 治療の工程(紺パネル): 金の角括弧+右上の淡い光 ---------- */
#about ol.target-block {
  position: relative;
  background:
    radial-gradient(90% 120% at 88% 0%, rgba(201,168,106,.16) 0%, rgba(201,168,106,0) 62%),
    linear-gradient(158deg, #0F2233 0%, #1B3A56 100%);
}
#about ol.target-block::before,
#about ol.target-block::after {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(201,168,106,.7);
}
#about ol.target-block::before { top: 9px; left: 9px; border-width: 1px 0 0 1px; }
#about ol.target-block::after { right: 9px; bottom: 9px; border-width: 0 1px 1px 0; }

/* ---------- 注意書きに「※」の金の飾り枠 ---------- */
#about .note {
  border: 1px solid #EEE7D9;
  border-left: 3px solid var(--endo-gold);
  box-shadow: 0 4px 16px rgba(15,34,51,.04);
}

/* =========================================================
   ★ 水色×白テーマ(2026-09-12 発注者指示)
   紺色×ゴールド → さわやかな水色×白 に全体を差し替える。
   透かしの歯は「案6(3重の重ね線)」に変更。
   ※ このブロックを削除すれば、紺×ゴールドの状態に戻ります。
   ========================================================= */
:root {
  --sky-deep:  #0F6C8C;  /* 濃い水色: 見出し・本文・ボタン(白地で5.9:1) */
  --sky:       #2691B8;  /* 主役の水色: 帯・パネル */
  --sky-light: #6FC4E2;  /* 明るい水色: 罫線・マーカー */
  --sky-pale:  #E9F6FB;
  --sky-paler: #F6FCFE;
  /* 旧テーマの変数を上書き(参照箇所をまとめて水色化) */
  --endo-navy:  #0F6C8C;
  --endo-navy2: #1E86AE;
  --endo-gold:  #2691B8;
}

/* ---------- ヘッダー / 対象別アンカー帯 ---------- */
.header { box-shadow: 0 1px 0 rgba(38,145,184,.45); }
.target-bar { background: var(--sky-paler); border-bottom: 1px solid rgba(38,145,184,.35); }
.target-bar a { background: #fff; border-color: rgba(15,108,140,.3); color: var(--sky-deep); }
.target-bar a:hover { background: var(--sky-deep); border-color: var(--sky-deep); color: #fff; }

/* ---------- 初画面: 水色の帯 + 白い線と白いパネル ---------- */
.page-head::before {
  background-color: var(--sky);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 120'%3E%3Cg fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M50 6C26 6 10 20 10 42c0 13 4 23 8 34 4 14 5 30 11 37 5 6 12 4 14-6 2-12 3-23 7-23s5 11 7 23c2 10 9 12 14 6 6-7 7-23 11-37 4-11 8-21 8-34C90 20 74 6 50 6Z' stroke-width='1.6' opacity='.55' vector-effect='non-scaling-stroke'/%3E%3Cg transform='translate(50,62) scale(.84) translate(-50,-62)'%3E%3Cpath d='M50 6C26 6 10 20 10 42c0 13 4 23 8 34 4 14 5 30 11 37 5 6 12 4 14-6 2-12 3-23 7-23s5 11 7 23c2 10 9 12 14 6 6-7 7-23 11-37 4-11 8-21 8-34C90 20 74 6 50 6Z' stroke-width='.9' opacity='.35' vector-effect='non-scaling-stroke'/%3E%3C/g%3E%3Cg transform='translate(50,62) scale(.68) translate(-50,-62)'%3E%3Cpath d='M50 6C26 6 10 20 10 42c0 13 4 23 8 34 4 14 5 30 11 37 5 6 12 4 14-6 2-12 3-23 7-23s5 11 7 23c2 10 9 12 14 6 6-7 7-23 11-37 4-11 8-21 8-34C90 20 74 6 50 6Z' stroke-width='.8' opacity='.2' vector-effect='non-scaling-stroke'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(115% 85% at 93% 4%, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 58%),
    radial-gradient(80% 70% at 4% 6%, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 62%),
    radial-gradient(125% 105% at 50% 38%, rgba(10,70,92,0) 42%, rgba(10,70,92,.22) 100%),
    linear-gradient(158deg, #17789B 0%, #2691B8 58%, #135E7C 100%);
}
.page-head::after {
  background:
    linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.6) 18%, rgba(255,255,255,.6) 82%, rgba(255,255,255,0) 100%) left top / 100% 1px no-repeat,
    linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.75) 18%, rgba(255,255,255,.75) 82%, rgba(255,255,255,0) 100%) left bottom / 100% 1px no-repeat;
}
.page-head h1 { color: #fff; text-shadow: 0 1px 2px rgba(10,70,92,.25); }
.page-head .device-tag {
  background: #fff;
  border: 1px solid #fff;
  color: var(--sky-deep);
}
.page-head .device-tag::before { background: var(--sky); }
.page-head .img-slot--kv img {
  outline-color: rgba(255,255,255,.75);
  box-shadow: 0 26px 56px rgba(10,70,92,.35);
}
.page-head .img-slot--kv figcaption {
  border-left-color: rgba(255,255,255,.85);
  color: #EAF7FC;
}
.page-head .lead {
  background: #fff;
  border-top: 3px solid #fff;
  box-shadow: 0 26px 60px rgba(10,70,92,.3);
}
.page-head .lead p strong { color: var(--sky-deep); }
.page-head .lead__badges { border-top-color: #E2EFF5; color: var(--sky-deep); }
.page-head .lead__badges li::before { color: var(--sky); }
.page-head .target-links a {
  background: var(--sky-paler);
  border: 1px solid #DCEAF1;
  border-left: 3px solid var(--sky);
  color: var(--sky-deep);
}
.page-head .target-links a::after { border-right-color: var(--sky); border-bottom-color: var(--sky); }
.page-head .target-links a:hover { background: var(--sky-deep); border-color: var(--sky-deep); border-left-color: #fff; color: #fff; }
.page-head .target-links a:hover span { color: #CFE8F2; }
.page-head .target-links a:hover::after { border-right-color: #fff; border-bottom-color: #fff; }
.page-head .btn--reserve {
  background: var(--sky-deep);
  color: #fff;
  box-shadow: 0 12px 28px rgba(10,70,92,.28);
}

/* ---------- 見出し(全セクション共通) ---------- */
main h2 { color: var(--sky-deep); border-bottom-color: #DCEAF1; }
main h2[data-en]::before {
  border-color: rgba(15,108,140,.4);
  background: rgba(38,145,184,.09);
  color: var(--sky-deep);
}
main h2::after {
  background:
    linear-gradient(90deg, var(--sky) 0%, rgba(38,145,184,.35) 100%) 0 4px / 60px 2px no-repeat,
    radial-gradient(circle, var(--sky) 0 3px, rgba(38,145,184,0) 3.5px) 68px 0 / 9px 9px no-repeat;
}
.cta h2[data-en]::before { border-color: rgba(255,255,255,.6); background: rgba(255,255,255,.14); color: #fff; }
.cta h2::after {
  background:
    linear-gradient(90deg, #fff 0%, rgba(255,255,255,.4) 100%) 0 4px / 60px 2px no-repeat,
    radial-gradient(circle, #fff 0 3px, rgba(255,255,255,0) 3.5px) 68px 0 / 9px 9px no-repeat;
}

/* ---------- 「根管治療とは」(#about) ---------- */
#about::before {
  background-color: var(--sky-pale);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 120'%3E%3Cg fill='none' stroke='%236fc4e2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M50 6C26 6 10 20 10 42c0 13 4 23 8 34 4 14 5 30 11 37 5 6 12 4 14-6 2-12 3-23 7-23s5 11 7 23c2 10 9 12 14 6 6-7 7-23 11-37 4-11 8-21 8-34C90 20 74 6 50 6Z' stroke-width='1.6' opacity='.65' vector-effect='non-scaling-stroke'/%3E%3Cg transform='translate(50,62) scale(.84) translate(-50,-62)'%3E%3Cpath d='M50 6C26 6 10 20 10 42c0 13 4 23 8 34 4 14 5 30 11 37 5 6 12 4 14-6 2-12 3-23 7-23s5 11 7 23c2 10 9 12 14 6 6-7 7-23 11-37 4-11 8-21 8-34C90 20 74 6 50 6Z' stroke-width='.9' opacity='.45' vector-effect='non-scaling-stroke'/%3E%3C/g%3E%3Cg transform='translate(50,62) scale(.68) translate(-50,-62)'%3E%3Cpath d='M50 6C26 6 10 20 10 42c0 13 4 23 8 34 4 14 5 30 11 37 5 6 12 4 14-6 2-12 3-23 7-23s5 11 7 23c2 10 9 12 14 6 6-7 7-23 11-37 4-11 8-21 8-34C90 20 74 6 50 6Z' stroke-width='.8' opacity='.28' vector-effect='non-scaling-stroke'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(180deg, #F6FCFE 0%, #E4F3FA 100%);
  border-bottom: 1px solid rgba(38,145,184,.35);
}
#about::after { background: #E4F3FA; border-color: rgba(38,145,184,.6); }
#about > p:first-of-type { border-color: #DCEAF1; border-left-color: var(--sky); }
#about p strong { border-bottom-color: rgba(38,145,184,.45); color: var(--sky-deep); }
#about .symptom-list li {
  border-color: #DCEAF1;
  border-left-color: var(--sky);
  color: var(--sky-deep);
  background:
    linear-gradient(var(--sky-light), var(--sky-light)) top right / 15px 1px no-repeat,
    linear-gradient(var(--sky-light), var(--sky-light)) top right / 1px 15px no-repeat,
    #fff;
}
#about .symptom-list li:hover { border-color: rgba(38,145,184,.6); box-shadow: 0 12px 26px rgba(10,70,92,.12); }
#about .symptom-list li::before { background: var(--sky); }
#about h3 { color: var(--sky-deep); }
#about h3::before { background: var(--sky); }
#about ol.target-block {
  background:
    radial-gradient(90% 120% at 88% 0%, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 62%),
    linear-gradient(158deg, #0F6C8C 0%, #1E86AE 100%);
  box-shadow: 0 18px 44px rgba(10,70,92,.26);
}
#about ol.target-block::before,
#about ol.target-block::after { border-color: rgba(255,255,255,.8); }
#about ol.target-block li::before { color: #fff; border-bottom-color: rgba(255,255,255,.6); }
#about .note { border-color: #DCEAF1; border-left-color: var(--sky); }

/* ---------- 他セクションの共通パーツ ---------- */
.target-block { border-left-color: var(--sky); }
.target-block h3, .target-block .price-line strong { color: var(--sky-deep); }
.feature-card { border: 1px solid #DCEAF1; border-top: 3px solid var(--sky-deep); }
.feature-card h3 { color: var(--sky-deep); }
.flow__steps li { border-color: #DCEAF1; }
.flow__steps li::before { background: var(--sky-deep); }
.visit-badge { background: var(--sky-deep); }
.lab-note { background: var(--sky-paler); border-left-color: var(--sky); }
.tool-card { box-shadow: 0 6px 24px rgba(10,70,92,.10); }
.tool-card h3 .tool-no { color: var(--sky-deep); border-color: var(--sky-deep); }
.tool-card .tool-card__vs { background: var(--sky-paler); border-left-color: var(--sky); }
.table-scroll thead th { background: var(--sky-deep); }
.table-scroll td.price { color: var(--sky-deep); }
.target-links a { border-color: var(--sky-deep); color: var(--sky-deep); }
.target-links a:hover { background: var(--sky-deep); }
.risks .risk-band { background: var(--sky-pale); border-left: 4px solid var(--sky); }

/* ---------- ボタン・CTA・固定フッター ---------- */
.btn--reserve { background: var(--sky-deep); }
.cta { background: linear-gradient(160deg, #0F6C8C 0%, #1E86AE 100%); }
.cta .btn--reserve { background: #fff; color: var(--sky-deep); }
.cta .note { color: #D3EBF4; }
.fixed-cta__reserve { background: var(--sky-deep); }

/* =========================================================
   ★ 指定色 #82DCFD を主役にする(2026-09-12 発注者指示)
   帯・面は #82DCFD 系、その上の文字は濃い青(#06465E)で可読性を確保。
   白は文字を載せるパネル・タグ・罫線に使う。
   ========================================================= */
:root {
  --sky-bright: #82DCFD;  /* ★ご指定の色。帯・面の主役 */
  --sky-soft:   #C7EEFE;
  --sky-pale:   #EAF8FE;
  --sky-paler:  #F5FCFF;
  --sky:        #35B4E4;  /* 白地の上の罫線・マーカー(薄すぎない水色) */
  --sky-light:  #5FC8EE;
  --sky-deep:   #0A6A8E;  /* 見出し・ボタン・濃いパネル(白地で5.8:1) */
  --ink:        #06465E;  /* #82DCFD の上に載せる文字(6.2:1) */
  --endo-navy:  #0A6A8E;
  --endo-navy2: #1690B8;
  --endo-gold:  #35B4E4;
}

/* ---------- ヘッダー / 対象別アンカー帯 ---------- */
.header { box-shadow: 0 1px 0 rgba(53,180,228,.55); }
.target-bar { background: var(--sky-paler); border-bottom: 1px solid rgba(53,180,228,.45); }
.target-bar a { background: #fff; border-color: rgba(10,106,142,.32); color: var(--sky-deep); }
.target-bar a:hover { background: var(--sky-deep); border-color: var(--sky-deep); color: #fff; }

/* ---------- 初画面: #82DCFD の帯 ---------- */
.page-head::before {
  background-color: var(--sky-bright);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 120'%3E%3Cg fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M50 6C26 6 10 20 10 42c0 13 4 23 8 34 4 14 5 30 11 37 5 6 12 4 14-6 2-12 3-23 7-23s5 11 7 23c2 10 9 12 14 6 6-7 7-23 11-37 4-11 8-21 8-34C90 20 74 6 50 6Z' stroke-width='1.8' opacity='.85' vector-effect='non-scaling-stroke'/%3E%3Cg transform='translate(50,62) scale(.84) translate(-50,-62)'%3E%3Cpath d='M50 6C26 6 10 20 10 42c0 13 4 23 8 34 4 14 5 30 11 37 5 6 12 4 14-6 2-12 3-23 7-23s5 11 7 23c2 10 9 12 14 6 6-7 7-23 11-37 4-11 8-21 8-34C90 20 74 6 50 6Z' stroke-width='1' opacity='.6' vector-effect='non-scaling-stroke'/%3E%3C/g%3E%3Cg transform='translate(50,62) scale(.68) translate(-50,-62)'%3E%3Cpath d='M50 6C26 6 10 20 10 42c0 13 4 23 8 34 4 14 5 30 11 37 5 6 12 4 14-6 2-12 3-23 7-23s5 11 7 23c2 10 9 12 14 6 6-7 7-23 11-37 4-11 8-21 8-34C90 20 74 6 50 6Z' stroke-width='.9' opacity='.38' vector-effect='non-scaling-stroke'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(115% 85% at 93% 4%, rgba(255,255,255,.45) 0%, rgba(255,255,255,0) 58%),
    radial-gradient(80% 70% at 4% 6%, rgba(255,255,255,.3) 0%, rgba(255,255,255,0) 62%),
    radial-gradient(125% 105% at 50% 38%, rgba(10,106,142,0) 46%, rgba(10,106,142,.14) 100%),
    linear-gradient(158deg, #9BE6FE 0%, #82DCFD 55%, #63D0F9 100%);
}
.page-head::after {
  background:
    linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.95) 18%, rgba(255,255,255,.95) 82%, rgba(255,255,255,0) 100%) left top / 100% 1px no-repeat,
    linear-gradient(90deg, rgba(10,106,142,0) 0%, rgba(10,106,142,.4) 18%, rgba(10,106,142,.4) 82%, rgba(10,106,142,0) 100%) left bottom / 100% 1px no-repeat;
}
.page-head h1 { color: var(--ink); text-shadow: none; }
.page-head .device-tag { background: #fff; border: 1px solid #fff; color: var(--sky-deep); }
.page-head .device-tag::before { background: var(--sky); }
.page-head .img-slot--kv img {
  outline-color: rgba(255,255,255,.95);
  box-shadow: 0 26px 56px rgba(10,106,142,.3);
}
.page-head .img-slot--kv figcaption {
  border-left-color: var(--sky-deep);
  color: #0E5A76;
}
.page-head .lead {
  background: #fff;
  border: 1px solid rgba(10,106,142,.14);
  border-top: 3px solid var(--sky-deep);
  box-shadow: 0 24px 54px rgba(10,106,142,.22);
}
.page-head .lead p strong { color: var(--sky-deep); }
.page-head .lead__badges { border-top-color: #E0F1F8; color: var(--sky-deep); }
.page-head .lead__badges li::before { color: var(--sky); }
.page-head .target-links a {
  background: var(--sky-paler);
  border: 1px solid #D7EEF7;
  border-left: 3px solid var(--sky);
  color: var(--sky-deep);
}
.page-head .target-links a::after { border-right-color: var(--sky); border-bottom-color: var(--sky); }
.page-head .target-links a:hover { background: var(--sky-deep); border-color: var(--sky-deep); border-left-color: var(--sky-bright); color: #fff; }
.page-head .target-links a:hover span { color: #C7EEFE; }
.page-head .target-links a:hover::after { border-right-color: var(--sky-bright); border-bottom-color: var(--sky-bright); }
.page-head .btn--reserve { background: var(--sky-deep); color: #fff; box-shadow: 0 12px 28px rgba(10,106,142,.3); }

/* ---------- 見出し ---------- */
main h2 { color: var(--sky-deep); border-bottom-color: #D7EEF7; }
main h2[data-en]::before { border-color: rgba(10,106,142,.4); background: rgba(53,180,228,.12); color: var(--sky-deep); }
main h2::after {
  background:
    linear-gradient(90deg, var(--sky) 0%, rgba(53,180,228,.35) 100%) 0 4px / 60px 2px no-repeat,
    radial-gradient(circle, var(--sky) 0 3px, rgba(53,180,228,0) 3.5px) 68px 0 / 9px 9px no-repeat;
}

/* ---------- 「根管治療とは」(#about) ---------- */
#about::before {
  background-color: var(--sky-pale);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 120'%3E%3Cg fill='none' stroke='%2335b4e4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M50 6C26 6 10 20 10 42c0 13 4 23 8 34 4 14 5 30 11 37 5 6 12 4 14-6 2-12 3-23 7-23s5 11 7 23c2 10 9 12 14 6 6-7 7-23 11-37 4-11 8-21 8-34C90 20 74 6 50 6Z' stroke-width='1.6' opacity='.6' vector-effect='non-scaling-stroke'/%3E%3Cg transform='translate(50,62) scale(.84) translate(-50,-62)'%3E%3Cpath d='M50 6C26 6 10 20 10 42c0 13 4 23 8 34 4 14 5 30 11 37 5 6 12 4 14-6 2-12 3-23 7-23s5 11 7 23c2 10 9 12 14 6 6-7 7-23 11-37 4-11 8-21 8-34C90 20 74 6 50 6Z' stroke-width='.9' opacity='.42' vector-effect='non-scaling-stroke'/%3E%3C/g%3E%3Cg transform='translate(50,62) scale(.68) translate(-50,-62)'%3E%3Cpath d='M50 6C26 6 10 20 10 42c0 13 4 23 8 34 4 14 5 30 11 37 5 6 12 4 14-6 2-12 3-23 7-23s5 11 7 23c2 10 9 12 14 6 6-7 7-23 11-37 4-11 8-21 8-34C90 20 74 6 50 6Z' stroke-width='.8' opacity='.26' vector-effect='non-scaling-stroke'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(180deg, #F5FCFF 0%, #D6F2FE 100%);
  border-bottom: 1px solid rgba(53,180,228,.5);
}
#about::after { background: #D6F2FE; border-color: rgba(53,180,228,.75); }
#about > p:first-of-type { border-color: #D7EEF7; border-left-color: var(--sky); }
#about p strong { border-bottom-color: rgba(53,180,228,.5); color: var(--sky-deep); }
#about .symptom-list li {
  border-color: #D7EEF7;
  border-left-color: var(--sky);
  color: var(--sky-deep);
  background:
    linear-gradient(var(--sky-light), var(--sky-light)) top right / 15px 1px no-repeat,
    linear-gradient(var(--sky-light), var(--sky-light)) top right / 1px 15px no-repeat,
    #fff;
}
#about .symptom-list li:hover { border-color: rgba(53,180,228,.7); box-shadow: 0 12px 26px rgba(10,106,142,.14); }
#about .symptom-list li::before { background: var(--sky); }
#about h3 { color: var(--sky-deep); }
#about h3::before { background: var(--sky); }
#about ol.target-block {
  background:
    radial-gradient(90% 120% at 88% 0%, rgba(130,220,253,.3) 0%, rgba(130,220,253,0) 62%),
    linear-gradient(158deg, #0A6A8E 0%, #1690B8 100%);
  box-shadow: 0 18px 44px rgba(10,106,142,.28);
}
#about ol.target-block::before,
#about ol.target-block::after { border-color: rgba(130,220,253,.9); }
#about ol.target-block li::before { color: var(--sky-bright); border-bottom-color: rgba(130,220,253,.7); }
#about .note { border-color: #D7EEF7; border-left-color: var(--sky); }

/* ---------- 他セクションの共通パーツ ---------- */
.target-block { border-left-color: var(--sky); }
.feature-card { border: 1px solid #D7EEF7; border-top: 3px solid var(--sky-deep); }
.flow__steps li { border-color: #D7EEF7; }
.lab-note { background: var(--sky-paler); border-left-color: var(--sky); }
.tool-card { box-shadow: 0 6px 24px rgba(10,106,142,.12); }
.tool-card .tool-card__vs { background: var(--sky-paler); border-left-color: var(--sky); }
.risks .risk-band { background: var(--sky-pale); border-left: 4px solid var(--sky); }

/* ---------- ボタン・CTA ---------- */
.cta { background: linear-gradient(160deg, #0A6A8E 0%, #1690B8 100%); }
.cta h2[data-en]::before { border-color: rgba(130,220,253,.8); background: rgba(130,220,253,.16); color: var(--sky-bright); }
.cta h2::after {
  background:
    linear-gradient(90deg, var(--sky-bright) 0%, rgba(130,220,253,.4) 100%) 0 4px / 60px 2px no-repeat,
    radial-gradient(circle, var(--sky-bright) 0 3px, rgba(130,220,253,0) 3.5px) 68px 0 / 9px 9px no-repeat;
}
.cta .btn--reserve { background: var(--sky-bright); color: #04384C; }
.cta .note { color: #C7EEFE; }

/* =========================================================
   ★ 文字色を濃い紺色に(2026-09-12 発注者指示)
   面の色(#82DCFD ほか)はそのまま。文字だけを紺系に統一する。
   ========================================================= */
:root {
  --navy-text:  #0B2E4F;  /* 見出し・強調(白地12:1 / #82DCFD 上8.5:1) */
  --navy-body:  #1B3A57;  /* 本文(白地9.5:1) */
  --navy-sub:   #4A6480;  /* 注記・補足(白地6.3:1) */
  --ink:        #0B2E4F;
}

/* ---------- 本文・注記 ---------- */
body { color: var(--navy-body); }
.note, .small { color: var(--navy-sub); }

/* ---------- 初画面 ---------- */
.page-head h1 { color: var(--navy-text); }
.page-head .device-tag { color: var(--navy-text); }
.page-head .img-slot--kv figcaption { color: #16405F; border-left-color: var(--navy-text); }
.page-head .lead { border-top-color: var(--navy-text); }
.page-head .lead p { color: var(--navy-body); }
.page-head .lead p strong { color: var(--navy-text); }
.page-head .lead__badges { color: var(--navy-text); }
.page-head .target-links a { color: var(--navy-text); }
.page-head .target-links a span { color: var(--navy-sub); }
.page-head .target-links a:hover { background: var(--navy-text); border-color: var(--navy-text); }
.page-head .btn--reserve { background: var(--navy-text); box-shadow: 0 12px 28px rgba(11,46,79,.3); }

/* ---------- 見出し(全セクション共通) ---------- */
main h2 { color: var(--navy-text); }
main h2[data-en]::before { color: var(--navy-text); border-color: rgba(11,46,79,.35); }

/* ---------- 「根管治療とは」 ---------- */
#about > p:first-of-type { color: var(--navy-body); }
#about p strong { color: var(--navy-text); }
#about .symptom-list li { color: var(--navy-text); }
#about h3 { color: var(--navy-text); }
#about .note { color: var(--navy-sub); }
#about ol.target-block {
  background:
    radial-gradient(90% 120% at 88% 0%, rgba(130,220,253,.3) 0%, rgba(130,220,253,0) 62%),
    linear-gradient(158deg, #0B2E4F 0%, #1B5480 100%);
}

/* ---------- 他セクション ---------- */
.target-block h3, .target-block .price-line strong { color: var(--navy-text); }
.feature-card h3 { color: var(--navy-text); }
.feature-card { border-top-color: var(--navy-text); }
.tool-card h3 .tool-no { color: var(--navy-text); border-color: var(--navy-text); }
.flow__steps li::before { background: var(--navy-text); }
.visit-badge { background: var(--navy-text); }
.table-scroll thead th { background: var(--navy-text); }
.table-scroll td.price { color: var(--navy-text); }
.target-links a { border-color: var(--navy-text); color: var(--navy-text); }
.target-links a:hover { background: var(--navy-text); color: #fff; }
.target-bar a { color: var(--navy-text); border-color: rgba(11,46,79,.3); }
.target-bar a:hover { background: var(--navy-text); border-color: var(--navy-text); color: #fff; }

/* ---------- ボタン・CTA ---------- */
.btn--reserve { background: var(--navy-text); }
.fixed-cta__reserve { background: var(--navy-text); }
.cta { background: linear-gradient(160deg, #0B2E4F 0%, #1B5480 100%); }
.cta .btn--reserve { background: var(--sky-bright); color: var(--navy-text); }

/* =========================================================
   「器具と材料」(#tools)を初画面・#about と同じデザインに
   (2026-09-12 発注者指示)。文章・構成・画像は変更しない。
   ========================================================= */
#tools { position: relative; padding-top: var(--space-4); }

/* 導入文: 水色の縦罫を添えて少し大きく */
#tools > p:first-of-type {
  padding-left: 18px;
  border-left: 3px solid var(--sky-bright);
  font-size: 17px;
  line-height: 2;
  color: var(--navy-body);
}

/* ---------- 3DCGバナー: 紺のグラデーション+水色の額縁 ---------- */
#tools .tools-banner {
  border-radius: 2px;
  margin: 26px 9px 36px;
  box-shadow: 0 18px 44px rgba(11,46,79,.22);
  outline: 1px solid rgba(130,220,253,.55);
  outline-offset: 9px;
}
#tools .tools-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(11,46,79,.6) 0%, rgba(11,46,79,.1) 42%, rgba(11,46,79,0) 70%);
  pointer-events: none;
}
#tools .tools-banner img { opacity: 1; }
#tools .tools-banner figcaption {
  z-index: 2;
  left: var(--space-2);
  bottom: var(--space-2);
  padding: 6px 13px;
  background: rgba(11,46,79,.8);
  border-left: 2px solid var(--sky-bright);
  border-radius: 0 2px 2px 0;
  font-size: 12px;
  letter-spacing: .1em;
  text-shadow: none;
}

/* ---------- 4つのカード ---------- */
#tools .tools { gap: var(--space-3); margin-top: 0; }
#tools .tool-card {
  position: relative;
  background: #fff;
  border: 1px solid #D7EEF7;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(11,46,79,.07);
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
#tools .tool-card:hover {
  transform: translateY(-3px);
  border-color: rgba(53,180,228,.65);
  box-shadow: 0 20px 42px rgba(11,46,79,.15);
}
/* 写真の下に水色の帯 */
#tools .tool-card img { border-bottom: 3px solid var(--sky-bright); }
/* 右上に水色の角飾り */
#tools .tool-card::after {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 34px; height: 34px;
  border-top: 1px solid rgba(53,180,228,.85);
  border-right: 1px solid rgba(53,180,228,.85);
  pointer-events: none;
  z-index: 2;
}

#tools .tool-card__body { padding: var(--space-3); }
#tools .tool-card h3 {
  display: flex;
  align-items: center;
  color: var(--navy-text);
  font-size: 17px;
  letter-spacing: .02em;
  line-height: 1.55;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid #E4F2F9;
}
/* 番号: 紺の丸+水色の光輪 */
#tools .tool-card h3 .tool-no {
  flex: none;
  width: 34px;
  height: 34px;
  margin-right: 14px;
  border: none;
  border-radius: 50%;
  background: var(--navy-text);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  box-shadow: 0 0 0 4px rgba(130,220,253,.4);
}
#tools .tool-card p { font-size: 15px; line-height: 1.95; color: var(--navy-body); }

/* 保険/自費の違い: うすい水色の枠 */
#tools .tool-card .tool-card__vs {
  margin-top: 14px;
  padding: 11px 13px;
  background: var(--sky-paler);
  border: 1px solid #E4F2F9;
  border-left: 3px solid var(--sky-bright);
  border-radius: 0 2px 2px 0;
  font-size: 13px;
  line-height: 1.85;
  color: var(--navy-sub);
}

/* ---------- 補足文(ラバーダム・根管長測定器)を囲みに ---------- */
#tools > p:last-of-type {
  padding: 15px 17px;
  background: var(--sky-pale);
  border: 1px solid #D7EEF7;
  border-left: 3px solid var(--navy-text);
  border-radius: 0 2px 2px 0;
  font-size: 14.5px;
  line-height: 1.95;
  color: var(--navy-body);
}
#tools > p:last-of-type strong { color: var(--navy-text); }

@media (min-width: 768px) {
  #tools > p:first-of-type { font-size: 18px; }
  #tools .tools-banner { margin: 30px 10px 42px; outline-offset: 12px; }
  #tools .tools-banner figcaption { left: var(--space-3); }
}

/* 4つのカードの枠を紺色に(2026-09-12 発注者指示) */
#tools .tool-card { border: 1px solid var(--navy-text); box-shadow: 0 8px 26px rgba(11,46,79,.10); }
#tools .tool-card:hover { border-color: var(--navy-text); box-shadow: 0 20px 44px rgba(11,46,79,.22); }

/* バナー左側の暗いグラデーションを解除し、左右を同じ明るさに(2026-09-12 発注者指示)
   キャプションは自前の紺ラベル背景があるので、覆いがなくても読める */
#tools .tools-banner::after { background: none; }

/* 4つのカードの地色を、使用中の水色(#82DCFD)より薄い水色に(2026-09-12 発注者指示) */
#tools .tool-card { background: #C7EEFE; }
#tools .tool-card h3 { border-bottom-color: rgba(11,46,79,.14); }
/* 保険/自費の囲みは、地色と区別するため白に */
#tools .tool-card .tool-card__vs {
  background: #fff;
  border-color: #CBE9F8;
  border-left-color: var(--sky-bright);
}

/* =========================================================
   「器具と材料」4カードのデザイン強化(2026-09-12 発注者指示)
   水色の台紙に写真を額装し、白いパネルに文章。
   境目に紺の丸い番号バッジを重ねる。色は変更しない。
   ========================================================= */
#tools .tools { gap: var(--space-4); }

#tools .tool-card {
  display: flex;
  flex-direction: column;
  padding: 12px;
  background: #C7EEFE;
  border: 1px solid var(--navy-text);
  border-radius: 3px;
  overflow: visible;
  box-shadow: 0 10px 30px rgba(11,46,79,.12);
  transition: transform .25s, box-shadow .25s;
}
#tools .tool-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 50px rgba(11,46,79,.24);
}
/* 以前の角飾りは廃止(台紙の額装で十分なため) */
#tools .tool-card::after { content: none; }

/* 写真: 台紙の中に額装する */
#tools .tool-card img {
  border: 1px solid rgba(11,46,79,.3);
  border-bottom: 1px solid rgba(11,46,79,.3);
  border-radius: 2px;
  box-shadow: 0 6px 16px rgba(11,46,79,.18);
}

/* 文章は白いパネルに。台紙の水色が細い縁として残る */
#tools .tool-card__body {
  position: relative;
  flex: 1;
  margin-top: 12px;
  padding: 36px 20px 20px;
  background: #fff;
  border: 1px solid rgba(11,46,79,.16);
  border-radius: 2px;
}

/* 番号: 写真と白パネルの境目に重ねた紺の丸バッジ */
#tools .tool-card h3 .tool-no {
  position: absolute;
  top: -25px;
  left: 18px;
  width: 50px;
  height: 50px;
  margin: 0;
  border: 4px solid #C7EEFE;
  border-radius: 50%;
  background: var(--navy-text);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0;
  box-shadow: 0 6px 16px rgba(11,46,79,.3);
}

#tools .tool-card h3 {
  display: block;
  position: static;
  margin: 0 0 14px;
  padding: 0 0 12px;
  border-bottom: 1px solid rgba(11,46,79,.14);
  color: var(--navy-text);
  font-size: 17px;
  line-height: 1.55;
  letter-spacing: .02em;
}
/* 見出しの下の罫線に、短い水色の線を重ねる */
#tools .tool-card h3 {
  background: linear-gradient(var(--sky-bright), var(--sky-bright)) left bottom / 46px 2px no-repeat;
}
#tools .tool-card h3::after { content: none; }

#tools .tool-card p { font-size: 15px; line-height: 1.95; color: var(--navy-body); }

/* 保険/自費の違い: うすい水色の囲みに戻す(白パネルの中なので) */
#tools .tool-card .tool-card__vs {
  margin-top: 16px;
  padding: 12px 14px;
  background: #EEF9FE;
  border: 1px solid #D3ECF9;
  border-left: 3px solid var(--sky-bright);
  border-radius: 0 2px 2px 0;
  font-size: 13px;
  line-height: 1.85;
  color: var(--navy-sub);
}

@media (min-width: 768px) {
  #tools .tool-card { padding: 14px; }
  #tools .tool-card__body { padding: 40px 24px 24px; }
}

/* =========================================================
   「当院の根管治療」(#treatment)のデザイン刷新
   (2026-09-12 発注者指示)。色・文章・構成は変更しない。
   ========================================================= */
#treatment { position: relative; margin-top: 0; padding: var(--space-6) 0; }
#treatment::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #F6FCFE 0%, #E4F3FA 100%);
  border-top: 1px solid rgba(53,180,228,.35);
  border-bottom: 1px solid rgba(53,180,228,.35);
  z-index: -1;
}

/* 導入文 */
#treatment .lab-note {
  padding: var(--space-3);
  background: #fff;
  border: 1px solid rgba(11,46,79,.14);
  border-left: 4px solid var(--sky-bright);
  border-radius: 0 2px 2px 0;
  box-shadow: 0 8px 24px rgba(11,46,79,.06);
  font-size: 16px;
  line-height: 2;
  color: var(--navy-body);
}

/* セクション内の小見出し(保険と自費の違い) */
#treatment > h3 {
  position: relative;
  margin-top: var(--space-4);
  padding-left: 16px;
  color: var(--navy-text);
  font-size: 18px;
  letter-spacing: .04em;
}
#treatment > h3::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 7px; height: 7px;
  background: var(--sky-bright);
  transform: rotate(45deg);
}

/* ---------- 保険/自費の比較表 ---------- */
#treatment .table-scroll--compare {
  background: #fff;
  border: 1px solid rgba(11,46,79,.2);
  border-radius: 2px;
  box-shadow: 0 10px 30px rgba(11,46,79,.09);
}
#treatment .table-scroll th,
#treatment .table-scroll td {
  border-color: #DCEAF1;
  padding: 12px 14px;
}
#treatment .table-scroll thead th {
  background: var(--navy-text);
  color: #fff;
  letter-spacing: .04em;
  border-color: rgba(255,255,255,.25);
}
/* 自費の列を水色で強調 */
#treatment .table-scroll thead th:nth-child(3) {
  background: var(--sky-bright);
  color: var(--navy-text);
}
#treatment .table-scroll tbody th[scope="row"] {
  background: #E7F6FD;
  color: var(--navy-text);
  font-weight: 700;
}
#treatment .table-scroll tbody td:nth-child(3) { background: #F4FBFE; }
#treatment .table-scroll tbody td { color: var(--navy-body); }

/* 表の下の注意書き */
#treatment > .note {
  margin-top: var(--space-2);
  padding: 13px 15px;
  background: #fff;
  border: 1px solid rgba(11,46,79,.12);
  border-left: 3px solid var(--navy-text);
  border-radius: 0 2px 2px 0;
  font-size: 13px;
  line-height: 1.9;
  color: var(--navy-sub);
}

/* ---------- 対象別ブロック3つ: 紺のヘッダー帯つきカード ---------- */
#treatment .target-block {
  position: relative;
  margin-top: var(--space-4);
  padding: var(--space-3);
  background: #fff;
  border: 1px solid var(--navy-text);
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(11,46,79,.1);
}
#treatment .target-block > h3 {
  margin: calc(var(--space-3) * -1) calc(var(--space-3) * -1) var(--space-2);
  padding: 15px var(--space-3);
  background: var(--navy-text);
  border-bottom: 3px solid var(--sky-bright);
  color: #fff;
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: .04em;
}
#treatment .target-block .target-block__who {
  margin: 0 0 var(--space-2);
  padding: 10px 13px;
  background: #E7F6FD;
  border-left: 3px solid var(--sky-bright);
  border-radius: 0 2px 2px 0;
  font-size: 14px;
  color: var(--navy-text);
}
#treatment .target-block p { font-size: 15px; line-height: 1.95; }
#treatment .target-block ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 9px;
  margin-top: 10px;
}
#treatment .target-block ul li {
  position: relative;
  padding-left: 20px;
  font-size: 15px;
  line-height: 1.9;
}
#treatment .target-block ul li::before {
  content: "";
  position: absolute;
  left: 2px; top: .72em;
  width: 7px; height: 7px;
  background: var(--sky-bright);
  transform: rotate(45deg);
}
#treatment .target-block ul li strong,
#treatment .target-block p strong { color: var(--navy-text); }
#treatment .target-block .price-line {
  margin-top: var(--space-3);
  padding: 14px 16px;
  background: #F4FBFE;
  border: 1px solid #D3ECF9;
  border-left: 4px solid var(--navy-text);
  border-radius: 0 2px 2px 0;
  font-size: 14px;
  color: var(--navy-text);
}
#treatment .target-block .price-line strong {
  font-size: 22px;
  color: var(--navy-text);
  letter-spacing: .02em;
}
#treatment .target-block .price-line .small {
  display: block;
  margin-top: 2px;
  font-weight: 400;
  color: var(--navy-sub);
}

/* ---------- 6つの特長カード ---------- */
/* 共通スタイルの2段組み(本文+画像用)が効いて左半分に寄っていたのを解除 */
#treatment .features__body { display: block; }
#treatment .features__grid { display: grid; gap: var(--space-2); }
#treatment .feature-card {
  padding: var(--space-3);
  background: #fff;
  border: 1px solid rgba(11,46,79,.16);
  border-top: 3px solid var(--sky-bright);
  border-radius: 2px;
  box-shadow: 0 8px 24px rgba(11,46,79,.07);
  transition: transform .22s, box-shadow .22s, border-color .22s;
}
#treatment .feature-card:hover {
  transform: translateY(-3px);
  border-color: rgba(11,46,79,.35);
  box-shadow: 0 18px 38px rgba(11,46,79,.15);
}
#treatment .feature-card h3 {
  position: relative;
  margin-bottom: 10px;
  padding-left: 18px;
  color: var(--navy-text);
  font-size: 16px;
  line-height: 1.55;
}
#treatment .feature-card h3::before {
  content: "";
  position: absolute;
  left: 0; top: .55em;
  width: 7px; height: 7px;
  background: var(--sky-bright);
  transform: rotate(45deg);
}
#treatment .feature-card p { font-size: 14.5px; line-height: 1.9; color: var(--navy-body); }

@media (min-width: 768px) {
  #treatment { padding: 64px 0 68px; }
  #treatment .features__grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
  #treatment .target-block { padding: var(--space-4); }
  #treatment .target-block > h3 {
    margin: calc(var(--space-4) * -1) calc(var(--space-4) * -1) var(--space-3);
    padding: 17px var(--space-4);
    font-size: 18px;
  }
}

/* =========================================================
   「当院の根管治療」水色を増やしてインパクトを付ける
   (2026-09-12 発注者指示)。色そのもの・文章・構成は変更しない。
   ========================================================= */

/* 上部に斜めに切った水色のバンドを敷く */
#treatment::before {
  background-color: #F7FCFE;
  background-image:
    linear-gradient(176deg, #82DCFD 0%, #82DCFD 62%, rgba(130,220,253,0) 62.3%),
    linear-gradient(180deg, #EFF9FE 0%, #F7FCFE 100%);
  background-repeat: no-repeat, no-repeat;
  background-position: top, top;
  background-size: 100% 520px, 100% 100%;
  border-top: 1px solid rgba(53,180,228,.45);
  border-bottom: 1px solid rgba(53,180,228,.45);
}

/* 見出しは水色バンドの上。英字ラベルは白ピルにして抜く */
#treatment h2[data-en]::before {
  background: #fff;
  border-color: #fff;
  color: var(--navy-text);
}
#treatment h2 { border-bottom-color: rgba(11,46,79,.25); }
#treatment h2::after {
  background:
    linear-gradient(90deg, var(--navy-text) 0%, rgba(11,46,79,.35) 100%) 0 4px / 76px 3px no-repeat,
    radial-gradient(circle, var(--navy-text) 0 3px, rgba(11,46,79,0) 3.5px) 84px 0 / 9px 9px no-repeat;
}

/* 導入文: 水色の上に白いカードで抜く */
#treatment .lab-note {
  border: none;
  border-left: 6px solid var(--navy-text);
  box-shadow: 0 14px 34px rgba(11,46,79,.16);
}

/* ---------- 比較表: 上に太い水色の帯、自費列をさらに強調 ---------- */
#treatment .table-scroll--compare {
  border: 1px solid var(--navy-text);
  border-top: 5px solid var(--sky-bright);
  box-shadow: 0 14px 36px rgba(11,46,79,.14);
}
#treatment .table-scroll tbody th[scope="row"] { background: #C7EEFE; }
#treatment .table-scroll tbody td:nth-child(3) { background: #EAF8FE; }
#treatment .table-scroll thead th:nth-child(3) {
  background: var(--sky-bright);
  color: var(--navy-text);
  border-color: var(--sky-bright);
}

/* ---------- 対象別3ブロック: ヘッダー帯を水色に ---------- */
#treatment .target-block {
  border: 1px solid var(--navy-text);
  border-left: 7px solid var(--navy-text);
  box-shadow: 0 16px 40px rgba(11,46,79,.16);
}
#treatment .target-block > h3 {
  background: var(--sky-bright);
  border-bottom: 1px solid var(--navy-text);
  color: var(--navy-text);
  font-size: 18px;
}
#treatment .target-block .target-block__who {
  background: #EAF8FE;
  border: 1px solid #CDEAF7;
  border-left: 3px solid var(--navy-text);
}
#treatment .target-block .price-line {
  background: #C7EEFE;
  border: 1px solid rgba(11,46,79,.25);
  border-left: 6px solid var(--navy-text);
}
#treatment .target-block ul li::before { background: var(--navy-text); }

/* ---------- 特長6カード: 水色で塗る ---------- */
#treatment .feature-card {
  background: #C7EEFE;
  border: 1px solid var(--navy-text);
  border-top: 5px solid var(--navy-text);
  box-shadow: 0 10px 28px rgba(11,46,79,.12);
}
#treatment .feature-card:hover {
  border-color: var(--navy-text);
  box-shadow: 0 22px 46px rgba(11,46,79,.24);
}
#treatment .feature-card h3 { border-bottom: 1px solid rgba(11,46,79,.16); padding-bottom: 9px; }
#treatment .feature-card h3::before { background: var(--navy-text); }

@media (min-width: 768px) {
  #treatment::before { background-size: 100% 620px, 100% 100%; }
  #treatment .target-block > h3 { font-size: 19px; }
}

/* 水色バンドの上に乗る小見出しの菱形は紺に(水色同士で見えなくなるため) */
#treatment > h3::before { background: var(--navy-text); }

/* =========================================================
   ページトップ(ヘッダー+対象別メニュー帯)を参考デザインに合わせる
   (2026-09-14 発注者指示)。文章・リンク先・配色は変更しない。
   ========================================================= */

/* ---------- ヘッダー全体 ---------- */
.header {
  background: #fff;
  border-bottom: 1px solid #E6EEF3;
  box-shadow: 0 1px 0 rgba(53,180,228,.35);
}
.header__inner { padding-top: 14px; padding-bottom: 14px; }

/* ロゴ: 明朝のスモールキャップス+字間を広げる */
.header__logo-main {
  font-variant-caps: small-caps;
  font-feature-settings: "smcp" 1;
  letter-spacing: .07em;
  font-size: 21px;
  font-weight: 700;
  color: var(--navy-text);
  line-height: 1.2;
}
.header__logo-sub {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--navy-sub);
}

/* メニュー: プレーンなテキストで間隔を広げる */
@media (min-width: 768px) {
  .header__nav { gap: 20px; }
  .header__nav a {
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: .03em;
    color: var(--navy-body);
    position: relative;
    padding-bottom: 3px;
  }
  .header__nav a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: var(--sky-bright);
    transform: scaleX(0);
    transition: transform .22s;
  }
  .header__nav a:hover { color: var(--navy-text); }
  .header__nav a:hover::after { transform: scaleX(1); }
}

/* 予約ボタン: カレンダーのアイコンを添えた丸いボタン */
.header__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: 999px;
  font-size: 14px;
  letter-spacing: .04em;
  background: var(--navy-text);
  color: #fff;
  box-shadow: 0 6px 18px rgba(11,46,79,.28);
}
.header__cta::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2.5'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---------- 対象別メニュー帯: アイコン付きの白い丸いピル ---------- */
.target-bar {
  gap: 10px;
  padding: 10px var(--space-2);
  background: linear-gradient(180deg, #FBFDFF 0%, #F2FAFE 100%);
  border-bottom: 1px solid rgba(53,180,228,.4);
}
.target-bar a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px 8px 14px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #DCE7EE;
  box-shadow: 0 3px 10px rgba(11,46,79,.1);
  color: var(--navy-text);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  transition: transform .2s, box-shadow .2s, border-color .2s, background .2s, color .2s;
}
.target-bar a::before {
  content: "";
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: #EAF8FE;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 15px 15px;
}
/* 1: 初めて根の治療をする方 — 歯 */
.target-bar a:nth-child(1)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 120' fill='none' stroke='%230B2E4F' stroke-width='7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M50 6C26 6 10 20 10 42c0 13 4 23 8 34 4 14 5 30 11 37 5 6 12 4 14-6 2-12 3-23 7-23s5 11 7 23c2 10 9 12 14 6 6-7 7-23 11-37 4-11 8-21 8-34C90 20 74 6 50 6Z'/%3E%3C/svg%3E");
}
/* 2: 治療した歯がまた痛む方 — 歯+痛みの線 */
.target-bar a:nth-child(2)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 120' fill='none' stroke='%230B2E4F' stroke-width='7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M50 6C26 6 10 20 10 42c0 13 4 23 8 34 4 14 5 30 11 37 5 6 12 4 14-6 2-12 3-23 7-23s5 11 7 23c2 10 9 12 14 6 6-7 7-23 11-37 4-11 8-21 8-34C90 20 74 6 50 6Z'/%3E%3Cpath d='M102 16h18M100 34l16-9M104 52h16'/%3E%3C/svg%3E");
}
/* 3: 抜歯と言われた歯を残したい方 — 歯+チェック */
.target-bar a:nth-child(3)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 130' fill='none' stroke='%230B2E4F' stroke-width='7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M50 6C26 6 10 20 10 42c0 13 4 23 8 34 4 14 5 30 11 37 5 6 12 4 14-6 2-12 3-23 7-23s5 11 7 23c2 10 9 12 14 6 6-7 7-23 11-37 4-11 8-21 8-34C90 20 74 6 50 6Z'/%3E%3Cpath d='M86 96l14 14 26-30'/%3E%3C/svg%3E");
}
.target-bar a:hover {
  transform: translateY(-1px);
  background: var(--navy-text);
  border-color: var(--navy-text);
  color: #fff;
  box-shadow: 0 8px 20px rgba(11,46,79,.26);
}
.target-bar a:hover::before { background-color: #fff; }

@media (min-width: 768px) {
  .target-bar { gap: 14px; padding: 12px var(--space-2); }
  .target-bar a { font-size: 13.5px; padding: 9px 20px 9px 15px; }
  .header__logo-main { font-size: 23px; }
}

/* ロゴが折り返さないようにする(2026-09-14) */
.header__logo { flex: 0 0 auto; white-space: nowrap; }
.header__logo-main, .header__logo-sub { white-space: nowrap; }
@media (min-width: 768px) and (max-width: 1023px) {
  .header__logo-main { font-size: 19px; }
  .header__logo-sub { font-size: 10px; }
  .header__nav { gap: 13px; }
  .header__nav a { font-size: 12.5px; }
  .header__cta { padding: 10px 16px; font-size: 13px; }
}

/* スマホ: ロゴと予約ボタンが収まるように縮める(2026-09-14) */
@media (max-width: 767px) {
  .header__logo-main { font-size: 16.5px; letter-spacing: .04em; }
  .header__logo-sub { font-size: 9.5px; letter-spacing: .04em; }
  .header__cta { padding: 9px 14px; font-size: 12.5px; gap: 6px; }
  .header__cta::before { width: 14px; height: 14px; }
  .target-bar a { font-size: 12px; padding: 7px 15px 7px 11px; gap: 7px; }
  .target-bar a::before { width: 19px; height: 19px; background-size: 13px 13px; }
}

/* ロゴを明朝体に明示指定(2026-09-14 発注者指示) */
.header__logo-main,
.header__logo-sub {
  font-family: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro",
               "Noto Serif JP", "MS PMincho", serif;
}

/* =========================================================
   対象別ピルのアイコンを、参考画像と同じ「カラーのイラスト」に
   (2026-09-14 発注者指示)。白い歯+ピンクの歯ぐき+器具。
   画像ファイルではなくCSS内のSVGなので、拡大してもぼやけない。
   ========================================================= */
.target-bar a::before {
  width: 25px;
  height: 25px;
  background-color: #F2FAFE;
  background-size: 21px 21px;
  border: 1px solid #DCEAF1;
}
/* 1: 初めて根の治療をする方 — 歯+根管治療の器具(ファイル) */
.target-bar a:nth-child(1)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M0 21.4c4.2 1.9 9.4 2.9 16 2.9s11.8-1 16-2.9V32H0z' fill='%23F3B0AA'/%3E%3Cpath d='M16 5C10.5 5 7 7.6 7 12.2c0 2.7 1 4.8 1.7 7.1.8 2.9 1 6 2.3 7.4 1.1 1.2 2.5.8 2.9-1.2.4-2.5.6-4.8 2.1-4.8s1.7 2.3 2.1 4.8c.4 2 1.8 2.4 2.9 1.2 1.3-1.4 1.5-4.5 2.3-7.4.7-2.3 1.7-4.4 1.7-7.1C25 7.6 21.5 5 16 5Z' fill='%23FFFFFF' stroke='%237E93A3' stroke-width='1.3' stroke-linejoin='round'/%3E%3Cpath d='M20.6 5.4 17.2 14' stroke='%238FA0AD' stroke-width='1.7' stroke-linecap='round'/%3E%3Ccircle cx='21.4' cy='3.6' r='2.1' fill='%232691B8'/%3E%3C/svg%3E");
}
/* 2: 治療した歯がまた痛む方 — 歯+むし歯の黒い点+痛みの線 */
.target-bar a:nth-child(2)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M0 21.4c4.2 1.9 9.4 2.9 16 2.9s11.8-1 16-2.9V32H0z' fill='%23F3B0AA'/%3E%3Cpath d='M15 5C9.5 5 6 7.6 6 12.2c0 2.7 1 4.8 1.7 7.1.8 2.9 1 6 2.3 7.4 1.1 1.2 2.5.8 2.9-1.2.4-2.5.6-4.8 2.1-4.8s1.7 2.3 2.1 4.8c.4 2 1.8 2.4 2.9 1.2 1.3-1.4 1.5-4.5 2.3-7.4.7-2.3 1.7-4.4 1.7-7.1C24 7.6 20.5 5 15 5Z' fill='%23FFFFFF' stroke='%237E93A3' stroke-width='1.3' stroke-linejoin='round'/%3E%3Cellipse cx='12' cy='16.6' rx='2.7' ry='2.3' fill='%236B4A39'/%3E%3Cpath d='M26.4 7.2h4M25.6 11.4l3.8-1.8M26 3.6l2.6-2.2' stroke='%23E2685E' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* 3: 抜歯と言われた歯を残したい方 — 歯+残せるチェック */
.target-bar a:nth-child(3)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M0 20.6c3.9 1.8 8.8 2.7 15 2.7s11.1-.9 15-2.7V32H0z' fill='%23F3B0AA'/%3E%3Cpath d='M14.2 4C9 4 5.6 6.5 5.6 10.9c0 2.6 1 4.6 1.6 6.8.8 2.8 1 5.7 2.2 7 1.1 1.2 2.4.8 2.8-1.1.4-2.4.6-4.6 2-4.6s1.6 2.2 2 4.6c.4 1.9 1.7 2.3 2.8 1.1 1.2-1.3 1.4-4.2 2.2-7 .6-2.2 1.6-4.2 1.6-6.8C22.8 6.5 19.4 4 14.2 4Z' fill='%23FFFFFF' stroke='%237E93A3' stroke-width='1.3' stroke-linejoin='round'/%3E%3Ccircle cx='24' cy='23' r='7' fill='%230B2E4F'/%3E%3Cpath d='M20.9 23.2l2.2 2.2 4-4.6' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
}
/* ホバー時も丸の中は白のままにしてイラストを見せる */
.target-bar a:hover::before { background-color: #fff; border-color: #fff; }

@media (max-width: 767px) {
  .target-bar a::before { width: 22px; height: 22px; background-size: 18px 18px; }
}

/* =========================================================
   対象別ピルのアイコンをよりリアルな「歯の断面図」に
   (2026-09-14 発注者指示)。エナメル質(白のグラデーション)・
   象牙質(クリーム)・歯髄と根管(赤)・歯ぐき(ピンク)を描き分ける。
   KVの根管治療イラストと同じ描き方。画像ではなくCSS内SVG。
   ========================================================= */
.target-bar a::before {
  width: 28px;
  height: 28px;
  background-size: 26px 26px;
  background-color: #F4FBFE;
  border: 1px solid #DCEAF1;
}

/* 1: 初めて根の治療をする方 — 断面図+根管にファイルを入れている */
.target-bar a:nth-child(1)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='e' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='1' stop-color='%23DFE8EE'/%3E%3C/linearGradient%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23F3B2AC'/%3E%3Cstop offset='1' stop-color='%23E0938C'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 20.4c4.2 2 9.4 3 16 3s11.8-1 16-3V32H0z' fill='url(%23g)'/%3E%3Cpath d='M16 4.5C10.3 4.5 6.6 7.2 6.6 12c0 2.8 1 5 1.8 7.4.8 3 1 6.2 2.4 7.6 1.1 1.2 2.6.8 3-1.2.4-2.6.6-5 2.2-5s1.8 2.4 2.2 5c.4 2 1.9 2.4 3 1.2 1.4-1.4 1.6-4.6 2.4-7.6.8-2.4 1.8-4.6 1.8-7.4 0-4.8-3.7-7.5-9.4-7.5Z' fill='url(%23e)' stroke='%238B9EAC' stroke-width='1.1' stroke-linejoin='round'/%3E%3Cpath d='M16 6.6c-4.6 0-7.6 2.1-7.6 5.6 0 2.4.9 4.3 1.6 6.5.7 2.7.9 5.7 2 6.9.8.9 1.9.6 2.2-1 .4-2.3.5-4.6 1.8-4.6s1.4 2.3 1.8 4.6c.3 1.6 1.4 1.9 2.2 1 1.1-1.2 1.3-4.2 2-6.9.7-2.2 1.6-4.1 1.6-6.5 0-3.5-3-5.6-7.6-5.6Z' fill='%23EDDCBB'/%3E%3Cpath d='M12.6 13.4c0-1.9 6.8-1.9 6.8 0 0 1.6-1 2.3-1.4 3.5h-4c-.4-1.2-1.4-1.9-1.4-3.5Z' fill='%23C9524E'/%3E%3Cpath d='M14.6 17.2c-.3 2.6-.6 5.4-1 7.3M17.4 17.2c.3 2.6.6 5.4 1 7.3' stroke='%23C9524E' stroke-width='1.1' stroke-linecap='round' fill='none'/%3E%3Cpath d='M21.7 2.6 18.1 15.6' stroke='%238FA3B1' stroke-width='1.6' stroke-linecap='round'/%3E%3Ccircle cx='22.1' cy='1.6' r='2.2' fill='%232691B8'/%3E%3C/svg%3E");
}

/* 2: 治療した歯がまた痛む方 — 断面図+むし歯の穴+根の先の病変+痛みの線 */
.target-bar a:nth-child(2)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='e2' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='1' stop-color='%23DFE8EE'/%3E%3C/linearGradient%3E%3ClinearGradient id='g2' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23F3B2AC'/%3E%3Cstop offset='1' stop-color='%23E0938C'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 20.4c4.2 2 9.4 3 16 3s11.8-1 16-3V32H0z' fill='url(%23g2)'/%3E%3Cpath d='M15 4.5C9.3 4.5 5.6 7.2 5.6 12c0 2.8 1 5 1.8 7.4.8 3 1 6.2 2.4 7.6 1.1 1.2 2.6.8 3-1.2.4-2.6.6-5 2.2-5s1.8 2.4 2.2 5c.4 2 1.9 2.4 3 1.2 1.4-1.4 1.6-4.6 2.4-7.6.8-2.4 1.8-4.6 1.8-7.4 0-4.8-3.7-7.5-9.4-7.5Z' fill='url(%23e2)' stroke='%238B9EAC' stroke-width='1.1' stroke-linejoin='round'/%3E%3Cpath d='M15 6.6c-4.6 0-7.6 2.1-7.6 5.6 0 2.4.9 4.3 1.6 6.5.7 2.7.9 5.7 2 6.9.8.9 1.9.6 2.2-1 .4-2.3.5-4.6 1.8-4.6s1.4 2.3 1.8 4.6c.3 1.6 1.4 1.9 2.2 1 1.1-1.2 1.3-4.2 2-6.9.7-2.2 1.6-4.1 1.6-6.5 0-3.5-3-5.6-7.6-5.6Z' fill='%23EDDCBB'/%3E%3Cpath d='M11.6 13.4c0-1.9 6.8-1.9 6.8 0 0 1.6-1 2.3-1.4 3.5h-4c-.4-1.2-1.4-1.9-1.4-3.5Z' fill='%23C9524E'/%3E%3Cpath d='M13.6 17.2c-.3 2.6-.6 5.4-1 7.3M16.4 17.2c.3 2.6.6 5.4 1 7.3' stroke='%23C9524E' stroke-width='1.1' stroke-linecap='round' fill='none'/%3E%3Cpath d='M9 9.6c1.6-1.3 3.8-1 3.4.9-.3 1.6-2.6 1.8-3.6.6z' fill='%235E4030'/%3E%3Ccircle cx='12.4' cy='26.2' r='2.3' fill='%23B8443F' opacity='.85'/%3E%3Cpath d='M26.6 6.4h4.2M25.8 10.8l3.9-1.9M26.2 2.6l2.7-2.3' stroke='%23E2685E' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* 3: 抜歯と言われた歯を残したい方 — 断面図(薬剤で密封済み)+チェック */
.target-bar a:nth-child(3)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='e3' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='1' stop-color='%23DFE8EE'/%3E%3C/linearGradient%3E%3ClinearGradient id='g3' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23F3B2AC'/%3E%3Cstop offset='1' stop-color='%23E0938C'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 19.6c3.9 1.9 8.8 2.9 15 2.9s11.1-1 15-2.9V32H0z' fill='url(%23g3)'/%3E%3Cpath d='M14.2 3.8C8.8 3.8 5.3 6.4 5.3 11c0 2.7.9 4.8 1.7 7 .8 2.9 1 5.9 2.3 7.3 1 1.1 2.5.8 2.8-1.2.4-2.5.6-4.8 2.1-4.8s1.7 2.3 2.1 4.8c.3 2 1.8 2.3 2.8 1.2 1.3-1.4 1.5-4.4 2.3-7.3.8-2.2 1.7-4.3 1.7-7 0-4.6-3.5-7.2-8.9-7.2Z' fill='url(%23e3)' stroke='%238B9EAC' stroke-width='1.1' stroke-linejoin='round'/%3E%3Cpath d='M14.2 5.8c-4.4 0-7.2 2-7.2 5.3 0 2.3.8 4.1 1.5 6.2.7 2.6.9 5.5 1.9 6.6.7.8 1.8.5 2.1-1 .4-2.2.5-4.4 1.7-4.4s1.3 2.2 1.7 4.4c.3 1.5 1.4 1.8 2.1 1 1-1.1 1.2-4 1.9-6.6.7-2.1 1.5-3.9 1.5-6.2 0-3.3-2.8-5.3-7.2-5.3Z' fill='%23EDDCBB'/%3E%3Cpath d='M10.9 12.6c0-1.8 6.6-1.8 6.6 0 0 1.5-1 2.2-1.4 3.4h-3.8c-.4-1.2-1.4-1.9-1.4-3.4Z' fill='%23D9A441'/%3E%3Cpath d='M12.9 16.4c-.3 2.5-.6 5.2-1 7M15.5 16.4c.3 2.5.6 5.2 1 7' stroke='%23D9A441' stroke-width='1.2' stroke-linecap='round' fill='none'/%3E%3Ccircle cx='24' cy='23' r='7.4' fill='%230B2E4F'/%3E%3Cpath d='M20.8 23.2l2.3 2.3 4.1-4.8' stroke='%23FFFFFF' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
}

@media (max-width: 767px) {
  .target-bar a::before { width: 25px; height: 25px; background-size: 23px 23px; }
}

/* =========================================================
   対象別ピルのアイコンを「実物写真の丸い切り抜き」に
   (2026-09-14 発注者指示「イラスト感をなくす」)。
   素材アーカイブ(15.画像・素材/02_ストック素材)から選定・加工。
   ① 透明歯モデルの歯髄  ② 頬をおさえて痛がる女性  ③ 抜去歯と根管ファイル
   ========================================================= */
.target-bar a {
  padding: 6px 18px 6px 7px;
  gap: 9px;
}
.target-bar a::before {
  width: 36px;
  height: 36px;
  border: 1px solid #DCE7EE;
  background-color: #fff;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.target-bar a:nth-child(1)::before { background-image: url("../images/endo-anchor-1.jpg"); }
.target-bar a:nth-child(2)::before { background-image: url("../images/endo-anchor-2.jpg"); }
.target-bar a:nth-child(3)::before { background-image: url("../images/endo-anchor-3.jpg"); }
.target-bar a:hover::before { border-color: rgba(255,255,255,.7); }

@media (max-width: 767px) {
  .target-bar a { padding: 5px 15px 5px 6px; gap: 8px; }
  .target-bar a::before { width: 32px; height: 32px; background-size: cover; }
}
@media (min-width: 768px) {
  .target-bar a { padding: 6px 20px 6px 7px; }
}

/* =========================================================
   対象別ピルのアイコン: 写真をやめ、断面図イラストをより精密に
   (2026-09-14 発注者指示)。咬頭(かみ合わせの山)・エナメル質の
   ツヤ・象牙質のグラデーション・先細りの根管・歯ぐきの陰影を追加。
   写真(endo-anchor-*.jpg)は使用しない。
   ========================================================= */
.target-bar a { padding: 6px 18px 6px 7px; gap: 9px; }
.target-bar a::before {
  width: 34px;
  height: 34px;
  border: 1px solid #DCE7EE;
  background-color: #F7FCFE;
  background-size: 32px 32px;
  background-position: center;
  background-repeat: no-repeat;
}
.target-bar a:hover::before { background-color: #fff; border-color: #fff; }

/* 1: 初めて根の治療をする方 — 根管にファイル(器具)を入れている */
.target-bar a:nth-child(1)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='a1' x1='.25' y1='0' x2='.75' y2='1'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='.55' stop-color='%23F4F8FB'/%3E%3Cstop offset='1' stop-color='%23D3DEE6'/%3E%3C/linearGradient%3E%3ClinearGradient id='b1' x1='.3' y1='0' x2='.7' y2='1'%3E%3Cstop offset='0' stop-color='%23F7EAD1'/%3E%3Cstop offset='1' stop-color='%23D9BE8F'/%3E%3C/linearGradient%3E%3ClinearGradient id='c1' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23F9C3BC'/%3E%3Cstop offset='.35' stop-color='%23EFA79F'/%3E%3Cstop offset='1' stop-color='%23D2837B'/%3E%3C/linearGradient%3E%3ClinearGradient id='m1' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23C3CED6'/%3E%3Cstop offset='.45' stop-color='%23F2F6F8'/%3E%3Cstop offset='1' stop-color='%238FA0AD'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 21.8c4.4 2.1 9.8 3.2 16 3.2s11.6-1.1 16-3.2V32H0z' fill='url(%23c1)'/%3E%3Cpath d='M0 21.8c4.4 2.1 9.8 3.2 16 3.2s11.6-1.1 16-3.2v1.1c-4.4 2-9.8 3.1-16 3.1S4.4 25.9 0 23.9z' fill='%23ffffff' opacity='.3'/%3E%3Cellipse cx='16' cy='26.8' rx='6.6' ry='1.5' fill='%23A9635C' opacity='.3'/%3E%3Cpath d='M6.6 12c0-3.8 2.4-6.4 5.7-7 1.3-.2 2.2 1.4 3.7 1.4s2.4-1.6 3.7-1.4c3.3.6 5.7 3.2 5.7 7 0 2.8-1 5-1.8 7.4-.8 3-1 6.2-2.4 7.6-1.1 1.2-2.6.8-3-1.2-.4-2.6-.6-5-2.2-5s-1.8 2.4-2.2 5c-.4 2-1.9 2.4-3 1.2-1.4-1.4-1.6-4.6-2.4-7.6C7.6 17 6.6 14.8 6.6 12Z' fill='url(%23a1)' stroke='%237E93A3' stroke-width='.9' stroke-linejoin='round'/%3E%3Cpath d='M8.7 12.3c0-2.9 1.9-4.9 4.5-5.4 1-.2 1.7 1.1 2.8 1.1s1.8-1.3 2.8-1.1c2.6.5 4.5 2.5 4.5 5.4 0 2.3-.9 4.3-1.6 6.4-.7 2.6-.9 5.5-1.9 6.7-.8.9-1.9.6-2.2-1-.4-2.3-.5-4.5-1.6-4.5s-1.2 2.2-1.6 4.5c-.3 1.6-1.4 1.9-2.2 1-1-1.2-1.2-4.1-1.9-6.7-.7-2.1-1.6-4.1-1.6-6.4Z' fill='url(%23b1)'/%3E%3Cpath d='M12.4 13.2c0-1.7 1.6-2.6 3.6-2.6s3.6.9 3.6 2.6c0 1.3-.7 2-1.2 3l-.5 1h-3.8l-.5-1c-.5-1-1.2-1.7-1.2-3Z' fill='%23BE4A46'/%3E%3Cpath d='M13.8 17.2h1.6l-.6 6.6c-.06.7-.62.7-.68 0zM18.2 17.2h-1.6l.6 6.6c.06.7.62.7.68 0z' fill='%23BE4A46'/%3E%3Cpath d='M10.4 8.6c.9-1.3 2.3-2 3.4-1.9.5.1.2 1-.7 1.6-1.1.8-2 1.3-2.4 1.2-.4-.1-.5-.5-.3-.9Z' fill='%23ffffff' opacity='.75'/%3E%3Cpath d='M21.8 2.2 17.4 14.4' stroke='url(%23m1)' stroke-width='1.7' stroke-linecap='round'/%3E%3Cpath d='M21.4 3.4 18 13' stroke='%23ffffff' stroke-width='.4' stroke-linecap='round' opacity='.8'/%3E%3Ccircle cx='22.2' cy='1.7' r='2.1' fill='%232691B8'/%3E%3Ccircle cx='21.6' cy='1.1' r='.7' fill='%23ffffff' opacity='.6'/%3E%3C/svg%3E");
}

/* 2: 治療した歯がまた痛む方 — むし歯の穴+根の先の病変+痛み */
.target-bar a:nth-child(2)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='a2' x1='.25' y1='0' x2='.75' y2='1'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='.55' stop-color='%23F4F8FB'/%3E%3Cstop offset='1' stop-color='%23D3DEE6'/%3E%3C/linearGradient%3E%3ClinearGradient id='b2' x1='.3' y1='0' x2='.7' y2='1'%3E%3Cstop offset='0' stop-color='%23F7EAD1'/%3E%3Cstop offset='1' stop-color='%23D9BE8F'/%3E%3C/linearGradient%3E%3ClinearGradient id='c2' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23F9C3BC'/%3E%3Cstop offset='.35' stop-color='%23EFA79F'/%3E%3Cstop offset='1' stop-color='%23D2837B'/%3E%3C/linearGradient%3E%3CradialGradient id='l2'%3E%3Cstop offset='0' stop-color='%23C0433D'/%3E%3Cstop offset='1' stop-color='%23C0433D' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M0 21.8c4.4 2.1 9.8 3.2 16 3.2s11.6-1.1 16-3.2V32H0z' fill='url(%23c2)'/%3E%3Cpath d='M0 21.8c4.4 2.1 9.8 3.2 16 3.2s11.6-1.1 16-3.2v1.1c-4.4 2-9.8 3.1-16 3.1S4.4 25.9 0 23.9z' fill='%23ffffff' opacity='.3'/%3E%3Ccircle cx='12.4' cy='26.6' r='3.6' fill='url(%23l2)'/%3E%3Cpath d='M5.6 12c0-3.8 2.4-6.4 5.7-7 1.3-.2 2.2 1.4 3.7 1.4s2.4-1.6 3.7-1.4c3.3.6 5.7 3.2 5.7 7 0 2.8-1 5-1.8 7.4-.8 3-1 6.2-2.4 7.6-1.1 1.2-2.6.8-3-1.2-.4-2.6-.6-5-2.2-5s-1.8 2.4-2.2 5c-.4 2-1.9 2.4-3 1.2-1.4-1.4-1.6-4.6-2.4-7.6C6.6 17 5.6 14.8 5.6 12Z' fill='url(%23a2)' stroke='%237E93A3' stroke-width='.9' stroke-linejoin='round'/%3E%3Cpath d='M7.7 12.3c0-2.9 1.9-4.9 4.5-5.4 1-.2 1.7 1.1 2.8 1.1s1.8-1.3 2.8-1.1c2.6.5 4.5 2.5 4.5 5.4 0 2.3-.9 4.3-1.6 6.4-.7 2.6-.9 5.5-1.9 6.7-.8.9-1.9.6-2.2-1-.4-2.3-.5-4.5-1.6-4.5s-1.2 2.2-1.6 4.5c-.3 1.6-1.4 1.9-2.2 1-1-1.2-1.2-4.1-1.9-6.7-.7-2.1-1.6-4.1-1.6-6.4Z' fill='url(%23b2)'/%3E%3Cpath d='M11.4 13.2c0-1.7 1.6-2.6 3.6-2.6s3.6.9 3.6 2.6c0 1.3-.7 2-1.2 3l-.5 1h-3.8l-.5-1c-.5-1-1.2-1.7-1.2-3Z' fill='%23BE4A46'/%3E%3Cpath d='M12.8 17.2h1.6l-.6 6.6c-.06.7-.62.7-.68 0zM17.2 17.2h-1.6l.6 6.6c.06.7.62.7.68 0z' fill='%23BE4A46'/%3E%3Cpath d='M6.4 9.4c1.7-1.6 4.3-1.4 4.1.8-.2 1.9-2.6 2.6-4 1.5-.6-.5-.7-1.7-.1-2.3Z' fill='%235A3B2B'/%3E%3Cpath d='M7.3 9.9c.9-.8 2.3-.7 2.2.4-.1 1-1.4 1.4-2.1.8-.3-.3-.4-.9-.1-1.2Z' fill='%23331F14'/%3E%3Cpath d='M26.8 6.2h4.1M25.9 10.6l3.9-1.9M26.3 2.5l2.7-2.2' stroke='%23E05A50' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* 3: 抜歯と言われた歯を残したい方 — 根管を薬剤で密封して残せた */
.target-bar a:nth-child(3)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='a3' x1='.25' y1='0' x2='.75' y2='1'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='.55' stop-color='%23F4F8FB'/%3E%3Cstop offset='1' stop-color='%23D3DEE6'/%3E%3C/linearGradient%3E%3ClinearGradient id='b3' x1='.3' y1='0' x2='.7' y2='1'%3E%3Cstop offset='0' stop-color='%23F7EAD1'/%3E%3Cstop offset='1' stop-color='%23D9BE8F'/%3E%3C/linearGradient%3E%3ClinearGradient id='c3' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23F9C3BC'/%3E%3Cstop offset='.35' stop-color='%23EFA79F'/%3E%3Cstop offset='1' stop-color='%23D2837B'/%3E%3C/linearGradient%3E%3ClinearGradient id='g3' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23F0C979'/%3E%3Cstop offset='1' stop-color='%23C08E31'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 21c4.2 2 9.4 3 15 3s10.8-1 15-3v11H0z' fill='url(%23c3)'/%3E%3Cpath d='M0 21c4.2 2 9.4 3 15 3s10.8-1 15-3v1.1c-4.2 1.9-9.4 2.9-15 2.9S4.2 24 0 22.1z' fill='%23ffffff' opacity='.3'/%3E%3Cellipse cx='15' cy='25.9' rx='6.2' ry='1.4' fill='%23A9635C' opacity='.28'/%3E%3Cpath d='M5.9 11.4c0-3.6 2.3-6.1 5.4-6.7 1.2-.2 2.1 1.3 3.5 1.3s2.3-1.5 3.5-1.3c3.1.6 5.4 3.1 5.4 6.7 0 2.7-.9 4.8-1.7 7-.8 2.9-1 5.9-2.3 7.2-1 1.1-2.5.8-2.8-1.1-.4-2.5-.6-4.8-2.1-4.8s-1.7 2.3-2.1 4.8c-.3 1.9-1.8 2.2-2.8 1.1-1.3-1.3-1.5-4.3-2.3-7.2-.8-2.2-1.7-4.3-1.7-7Z' fill='url(%23a3)' stroke='%237E93A3' stroke-width='.9' stroke-linejoin='round'/%3E%3Cpath d='M7.9 11.7c0-2.8 1.8-4.7 4.3-5.1.9-.2 1.6 1 2.7 1s1.7-1.2 2.7-1c2.5.4 4.3 2.3 4.3 5.1 0 2.2-.9 4.1-1.5 6.1-.7 2.5-.9 5.2-1.8 6.4-.8.9-1.9.6-2.1-.9-.4-2.2-.5-4.3-1.5-4.3s-1.2 2.1-1.5 4.3c-.3 1.5-1.4 1.8-2.1.9-.9-1.2-1.2-3.9-1.8-6.4-.7-2-1.5-3.9-1.5-6.1Z' fill='url(%23b3)'/%3E%3Cpath d='M11.5 12.5c0-1.6 1.5-2.5 3.5-2.5s3.5.9 3.5 2.5c0 1.2-.7 1.9-1.2 2.9l-.5.9h-3.6l-.5-.9c-.5-1-1.2-1.7-1.2-2.9Z' fill='url(%23g3)'/%3E%3Cpath d='M12.9 16.4h1.5l-.55 6.3c-.06.7-.6.7-.66 0zM17.1 16.4h-1.5l.55 6.3c.06.7.6.7.66 0z' fill='url(%23g3)'/%3E%3Cpath d='M9.6 8.1c.9-1.2 2.2-1.9 3.2-1.8.5.1.2 1-.7 1.5-1 .8-1.9 1.2-2.3 1.1-.3-.1-.4-.5-.2-.8Z' fill='%23ffffff' opacity='.75'/%3E%3Ccircle cx='24.4' cy='23.4' r='7.2' fill='%230B2E4F'/%3E%3Ccircle cx='24.4' cy='23.4' r='7.2' fill='none' stroke='%23ffffff' stroke-width='.9' opacity='.85'/%3E%3Cpath d='M21.3 23.6l2.2 2.2 4-4.7' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
}

@media (max-width: 767px) {
  .target-bar a { padding: 5px 15px 5px 6px; gap: 8px; }
  .target-bar a::before { width: 31px; height: 31px; background-size: 29px 29px; }
}

/* =========================================================
   1つ目のアイコンの「ファイル(根管治療の器具)」を実物に近づける
   (2026-09-14 発注者指示)。金属のグリップ(すべり止めの溝)・
   先細りのシャフト・らせん状の刃・水色のラバーストッパーを描写。
   ========================================================= */
.target-bar a:nth-child(1)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='a1' x1='.25' y1='0' x2='.75' y2='1'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='.55' stop-color='%23F4F8FB'/%3E%3Cstop offset='1' stop-color='%23D3DEE6'/%3E%3C/linearGradient%3E%3ClinearGradient id='b1' x1='.3' y1='0' x2='.7' y2='1'%3E%3Cstop offset='0' stop-color='%23F7EAD1'/%3E%3Cstop offset='1' stop-color='%23D9BE8F'/%3E%3C/linearGradient%3E%3ClinearGradient id='c1' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23F9C3BC'/%3E%3Cstop offset='.35' stop-color='%23EFA79F'/%3E%3Cstop offset='1' stop-color='%23D2837B'/%3E%3C/linearGradient%3E%3ClinearGradient id='sh' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%238D9EAA'/%3E%3Cstop offset='.35' stop-color='%23EDF2F5'/%3E%3Cstop offset='.7' stop-color='%23A8B7C1'/%3E%3Cstop offset='1' stop-color='%236E7F8B'/%3E%3C/linearGradient%3E%3ClinearGradient id='hd' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%236E7F8B'/%3E%3Cstop offset='.3' stop-color='%23E6ECF0'/%3E%3Cstop offset='.62' stop-color='%23A3B2BC'/%3E%3Cstop offset='1' stop-color='%2362717C'/%3E%3C/linearGradient%3E%3ClinearGradient id='st' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%2349B4DE'/%3E%3Cstop offset='.4' stop-color='%239BDCF2'/%3E%3Cstop offset='1' stop-color='%232E96BE'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 21.8c4.4 2.1 9.8 3.2 16 3.2s11.6-1.1 16-3.2V32H0z' fill='url(%23c1)'/%3E%3Cpath d='M0 21.8c4.4 2.1 9.8 3.2 16 3.2s11.6-1.1 16-3.2v1.1c-4.4 2-9.8 3.1-16 3.1S4.4 25.9 0 23.9z' fill='%23ffffff' opacity='.3'/%3E%3Cellipse cx='16' cy='26.8' rx='6.6' ry='1.5' fill='%23A9635C' opacity='.3'/%3E%3Cpath d='M6.6 12c0-3.8 2.4-6.4 5.7-7 1.3-.2 2.2 1.4 3.7 1.4s2.4-1.6 3.7-1.4c3.3.6 5.7 3.2 5.7 7 0 2.8-1 5-1.8 7.4-.8 3-1 6.2-2.4 7.6-1.1 1.2-2.6.8-3-1.2-.4-2.6-.6-5-2.2-5s-1.8 2.4-2.2 5c-.4 2-1.9 2.4-3 1.2-1.4-1.4-1.6-4.6-2.4-7.6C7.6 17 6.6 14.8 6.6 12Z' fill='url(%23a1)' stroke='%237E93A3' stroke-width='.9' stroke-linejoin='round'/%3E%3Cpath d='M8.7 12.3c0-2.9 1.9-4.9 4.5-5.4 1-.2 1.7 1.1 2.8 1.1s1.8-1.3 2.8-1.1c2.6.5 4.5 2.5 4.5 5.4 0 2.3-.9 4.3-1.6 6.4-.7 2.6-.9 5.5-1.9 6.7-.8.9-1.9.6-2.2-1-.4-2.3-.5-4.5-1.6-4.5s-1.2 2.2-1.6 4.5c-.3 1.6-1.4 1.9-2.2 1-1-1.2-1.2-4.1-1.9-6.7-.7-2.1-1.6-4.1-1.6-6.4Z' fill='url(%23b1)'/%3E%3Cpath d='M12.4 13.2c0-1.7 1.6-2.6 3.6-2.6s3.6.9 3.6 2.6c0 1.3-.7 2-1.2 3l-.5 1h-3.8l-.5-1c-.5-1-1.2-1.7-1.2-3Z' fill='%23BE4A46'/%3E%3Cpath d='M13.8 17.2h1.6l-.6 6.6c-.06.7-.62.7-.68 0zM18.2 17.2h-1.6l.6 6.6c.06.7.62.7.68 0z' fill='%23BE4A46'/%3E%3Cpath d='M10.4 8.6c.9-1.3 2.3-2 3.4-1.9.5.1.2 1-.7 1.6-1.1.8-2 1.3-2.4 1.2-.4-.1-.5-.5-.3-.9Z' fill='%23ffffff' opacity='.75'/%3E%3Cg transform='rotate(24 21.9 2.6)'%3E%3Cpath d='M20.95 5.4h1.9l-.62 14.3c-.02.42-.62.42-.65 0z' fill='url(%23sh)'/%3E%3Cpath d='M21.25 11.6l1.25-1.05M21.3 12.9l1.2-1.05M21.35 14.2l1.15-1.05M21.4 15.5l1.05-1.05M21.45 16.8l1-1.05' stroke='%23ffffff' stroke-width='.3' opacity='.9'/%3E%3Cpath d='M20.2 1.1h3.4a.55.55 0 0 1 .55.55v3.3a.55.55 0 0 1-.55.55h-3.4a.55.55 0 0 1-.55-.55v-3.3a.55.55 0 0 1 .55-.55z' fill='url(%23hd)'/%3E%3Cpath d='M20 2.1h3.8M20 3.05h3.8M20 4h3.8' stroke='%2344515B' stroke-width='.26' opacity='.55'/%3E%3Cellipse cx='21.9' cy='7.5' rx='2.45' ry='.95' fill='url(%23st)'/%3E%3Cellipse cx='21.9' cy='7.15' rx='2.45' ry='.95' fill='%2384D3EE'/%3E%3Cellipse cx='21.4' cy='6.95' rx='1' ry='.35' fill='%23ffffff' opacity='.6'/%3E%3C/g%3E%3C/svg%3E");
}

/* =========================================================
   2つ目のアイコンの「根尖病変(根の先の膿の袋)」をはっきり描く
   (2026-09-14 発注者指示)。歯より手前に重ね、輪郭・濃淡・
   まわりのにじみを付けて、根の先にできた病変だと分かるようにする。
   ========================================================= */
.target-bar a:nth-child(2)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='a2' x1='.25' y1='0' x2='.75' y2='1'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='.55' stop-color='%23F4F8FB'/%3E%3Cstop offset='1' stop-color='%23D3DEE6'/%3E%3C/linearGradient%3E%3ClinearGradient id='b2' x1='.3' y1='0' x2='.7' y2='1'%3E%3Cstop offset='0' stop-color='%23F7EAD1'/%3E%3Cstop offset='1' stop-color='%23D9BE8F'/%3E%3C/linearGradient%3E%3ClinearGradient id='c2' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23F9C3BC'/%3E%3Cstop offset='.35' stop-color='%23EFA79F'/%3E%3Cstop offset='1' stop-color='%23D2837B'/%3E%3C/linearGradient%3E%3CradialGradient id='hz' cx='.5' cy='.5' r='.5'%3E%3Cstop offset='.45' stop-color='%23B02F2A' stop-opacity='.55'/%3E%3Cstop offset='1' stop-color='%23B02F2A' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='ls' cx='.38' cy='.34' r='.72'%3E%3Cstop offset='0' stop-color='%23E27A72'/%3E%3Cstop offset='.45' stop-color='%23C4453F'/%3E%3Cstop offset='1' stop-color='%238C2420'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M0 21.8c4.4 2.1 9.8 3.2 16 3.2s11.6-1.1 16-3.2V32H0z' fill='url(%23c2)'/%3E%3Cpath d='M0 21.8c4.4 2.1 9.8 3.2 16 3.2s11.6-1.1 16-3.2v1.1c-4.4 2-9.8 3.1-16 3.1S4.4 25.9 0 23.9z' fill='%23ffffff' opacity='.3'/%3E%3Cpath d='M5.6 12c0-3.8 2.4-6.4 5.7-7 1.3-.2 2.2 1.4 3.7 1.4s2.4-1.6 3.7-1.4c3.3.6 5.7 3.2 5.7 7 0 2.8-1 5-1.8 7.4-.8 3-1 6.2-2.4 7.6-1.1 1.2-2.6.8-3-1.2-.4-2.6-.6-5-2.2-5s-1.8 2.4-2.2 5c-.4 2-1.9 2.4-3 1.2-1.4-1.4-1.6-4.6-2.4-7.6C6.6 17 5.6 14.8 5.6 12Z' fill='url(%23a2)' stroke='%237E93A3' stroke-width='.9' stroke-linejoin='round'/%3E%3Cpath d='M7.7 12.3c0-2.9 1.9-4.9 4.5-5.4 1-.2 1.7 1.1 2.8 1.1s1.8-1.3 2.8-1.1c2.6.5 4.5 2.5 4.5 5.4 0 2.3-.9 4.3-1.6 6.4-.7 2.6-.9 5.5-1.9 6.7-.8.9-1.9.6-2.2-1-.4-2.3-.5-4.5-1.6-4.5s-1.2 2.2-1.6 4.5c-.3 1.6-1.4 1.9-2.2 1-1-1.2-1.2-4.1-1.9-6.7-.7-2.1-1.6-4.1-1.6-6.4Z' fill='url(%23b2)'/%3E%3Cpath d='M11.4 13.2c0-1.7 1.6-2.6 3.6-2.6s3.6.9 3.6 2.6c0 1.3-.7 2-1.2 3l-.5 1h-3.8l-.5-1c-.5-1-1.2-1.7-1.2-3Z' fill='%23BE4A46'/%3E%3Cpath d='M12.8 17.2h1.6l-.6 6.6c-.06.7-.62.7-.68 0zM17.2 17.2h-1.6l.6 6.6c.06.7.62.7.68 0z' fill='%23BE4A46'/%3E%3Cpath d='M6.4 9.4c1.7-1.6 4.3-1.4 4.1.8-.2 1.9-2.6 2.6-4 1.5-.6-.5-.7-1.7-.1-2.3Z' fill='%235A3B2B'/%3E%3Cpath d='M7.3 9.9c.9-.8 2.3-.7 2.2.4-.1 1-1.4 1.4-2.1.8-.3-.3-.4-.9-.1-1.2Z' fill='%23331F14'/%3E%3Ccircle cx='13.3' cy='26.1' r='6' fill='url(%23hz)'/%3E%3Cellipse cx='13.3' cy='26.1' rx='3.5' ry='3.2' fill='url(%23ls)' stroke='%237B1E1A' stroke-width='.55'/%3E%3Cellipse cx='13.3' cy='26.1' rx='3.5' ry='3.2' fill='none' stroke='%23ffffff' stroke-width='.4' opacity='.35'/%3E%3Cellipse cx='12.2' cy='24.9' rx='1.1' ry='.75' fill='%23ffffff' opacity='.3'/%3E%3Cpath d='M26.8 6.2h4.1M25.9 10.6l3.9-1.9M26.3 2.5l2.7-2.2' stroke='%23E05A50' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* =========================================================
   初画面のKVを「根の中のファイル(3DCG)」に差し替えたのに合わせ、
   画像の縦横比を元のまま表示する(2026-09-15 発注者指示)
   ========================================================= */
.page-head .img-slot--kv img { aspect-ratio: auto; height: auto; }
/* 「器具と材料」のバナーは流れ図(16:9)になったので、覆いは無しのまま */
#tools .tools-banner figcaption { position: static; margin-top: 10px; background: none; color: var(--navy-sub); border-left: 3px solid var(--sky-bright); padding: 2px 0 2px 10px; letter-spacing: .02em; }
#tools .tools-banner { background: transparent; }

/* 2026-09-15: ヘッダー・対象別案内のデザイン調整 */
:root { --endo-header-height: 80px; }
html { scroll-padding-top: 185px; }
.header { background: #fff; border-bottom: 1px solid #e3e9ed; box-shadow: none; }
.header__inner { max-width: 1440px; min-height: var(--endo-header-height); gap: 20px; padding: 14px 24px; }
.header__logo-main { font-family: Georgia, serif; font-size: 24px; font-weight: 500; letter-spacing: .025em; font-variant-caps: normal; }
.header__logo-sub { font-family: 'Noto Sans JP', sans-serif; font-size: 10px; letter-spacing: .1em; margin-top: 6px; color: #586e7d; }
.header__nav { gap: 16px; }
.header__nav a { font-family: 'Noto Sans JP', sans-serif; font-size: 12px; font-weight: 500; padding: 12px 0; }
.header__nav a::after { height: 1px; background: #247d94; }
.header__cta { flex: none; font-family: 'Noto Sans JP', sans-serif; font-size: 12px; font-weight: 500; padding: 14px 20px; border-radius: 6px; background: #12374a; box-shadow: none; }
.header__cta:hover { background: #20586c; }
.target-bar { top: var(--endo-header-height); gap: 12px; padding: 12px 24px; background: #f3f7f8; border-bottom: 1px solid #dde6e9; }
.target-bar a { flex: 0 1 340px; min-width: 0; justify-content: flex-start; min-height: 54px; padding: 9px 16px; border: 1px solid #dce5e9; border-radius: 7px; box-shadow: 0 2px 5px #17374705; font-family: 'Noto Sans JP', sans-serif; font-size: 13px; font-weight: 500; color: #183b4e; gap: 12px; }
.target-bar a::after { content: ''; width: 6px; height: 6px; flex: none; margin-left: auto; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); }
.target-bar a:hover { background: #eaf3f5; color: #12374a; border-color: #7fabb8; box-shadow: none; transform: none; }
.header a:focus-visible, .target-bar a:focus-visible { outline: 3px solid #26809a; outline-offset: 3px; }
@media (min-width: 768px) and (max-width: 1199px) {
  :root { --endo-header-height: 120px; }
  html { scroll-padding-top: 225px; }
  .header__inner { display: grid; grid-template-columns: 1fr auto; gap: 4px 20px; padding: 10px 24px; }
  .header__nav { display: flex; grid-column: 1 / -1; grid-row: 2; justify-content: center; gap: 24px; }
  .header__cta { grid-column: 2; grid-row: 1; }
  .header__logo-main { font-size: 22px; }
  .target-bar a { white-space: normal; font-size: 12px; padding: 8px 12px; }
}
@media (max-width: 767px) {
  :root { --endo-header-height: 70px; }
  html { scroll-padding-top: 195px; }
  .header__inner { padding: 10px 14px; gap: 8px; }
  .header__logo-main { font-size: 18px; letter-spacing: 0; }
  .header__logo-sub { font-size: 9px; letter-spacing: .025em; margin-top: 4px; }
  .header__cta { font-size: 11px; padding: 11px 10px; gap: 5px; }
  .header__cta::before { width: 13px; height: 13px; }
  .target-bar { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; padding: 8px; overflow: visible; }
  .target-bar a { flex-direction: column; justify-content: flex-start; gap: 5px; padding: 7px 4px; font-size: 10px; line-height: 1.5; white-space: normal; letter-spacing: 0; text-align: center; }
  .target-bar a::before { width: 28px; height: 28px; background-size: 26px 26px; }
  .target-bar a::after { display: none; }
}
@media (prefers-reduced-motion: reduce) { .header a, .header a::after, .target-bar a { transition: none; } }


/* 2026-09-15: 元の配色を活かした滑らかな歯の断面アイコン */
.target-bar a::before { width: 38px; height: 38px; border: 0; border-radius: 0; box-shadow: none; background-color: transparent; background-size: 38px 38px; }
.target-bar a:hover::before { background-color: transparent; }
.target-bar a:nth-child(1)::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22e%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%22.7%22%3E%3Cstop%20stop-color%3D%22%23c8d7e1%22%2F%3E%3Cstop%20offset%3D%22.25%22%20stop-color%3D%22%23fff%22%2F%3E%3Cstop%20offset%3D%22.55%22%20stop-color%3D%22%23f7fafc%22%2F%3E%3Cstop%20offset%3D%22.82%22%20stop-color%3D%22%23dce6ed%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23aebfcb%22%2F%3E%3C%2FlinearGradient%3E%3CradialGradient%20id%3D%22d%22%20cx%3D%22.42%22%20cy%3D%22.28%22%20r%3D%22.8%22%3E%3Cstop%20stop-color%3D%22%23fff4df%22%2F%3E%3Cstop%20offset%3D%22.55%22%20stop-color%3D%22%23efdcbb%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23c5a679%22%2F%3E%3C%2FradialGradient%3E%3ClinearGradient%20id%3D%22g%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23f9d4ce%22%2F%3E%3Cstop%20offset%3D%22.3%22%20stop-color%3D%22%23efb1aa%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23c8807b%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22m%22%3E%3Cstop%20stop-color%3D%22%23718796%22%2F%3E%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22%23edf3f6%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%237e919e%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Ccircle%20cx%3D%2224%22%20cy%3D%2224%22%20r%3D%2222%22%20fill%3D%22%23f2f7fa%22%2F%3E%3Cpath%20d%3D%22M5%2029q19-6%2038%200v8q-19%2011-38%200Z%22%20fill%3D%22url%28%23g%29%22%2F%3E%3Cpath%20d%3D%22M5%2029q19-6%2038%200%22%20fill%3D%22none%22%20stroke%3D%22%23fbe0db%22%20stroke-width%3D%221.8%22%2F%3E%3Cpath%20d%3D%22M13%2010c-5%202-5%208-3%2013%202%205%202%2012%205%2015%202%202%204%200%204-3l2-9q3-5%206%200l2%209c0%203%202%205%204%203%203-3%203-10%205-15%202-5%202-11-3-13-4-2-7%201-11%201s-7-3-11-1Z%22%20fill%3D%22url%28%23e%29%22%20stroke%3D%22%239bafbc%22%20stroke-width%3D%221.1%22%2F%3E%3Cpath%20d%3D%22M15%2013c-3%201-3%206-1%2010%202%204%202%2010%203%2012l2-10q5-8%2010%200l2%2010c1-2%201-8%203-12%202-4%202-9-1-10-3-1-6%202-9%202s-6-3-9-2Z%22%20fill%3D%22url%28%23d%29%22%2F%3E%3Cpath%20d%3D%22M13%2014q-2%203-1%206%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M11%2023c2%205%202%2011%205%2014M36%2023c-2%205-2%2011-5%2014%22%20fill%3D%22none%22%20stroke%3D%22%23849cab%22%20stroke-width%3D%221.1%22%20opacity%3D%22.42%22%2F%3E%3Cpath%20d%3D%22M14%2011c3-1%205%201%207%201m5%200c3%200%205-2%208-1%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M16%2015q2-1%204%201m7%200q2-2%205-1%22%20fill%3D%22none%22%20stroke%3D%22%23c5a77f%22%20stroke-width%3D%22.8%22%20opacity%3D%22.7%22%2F%3E%3Cpath%20d%3D%22M16%2025l1%207m15-7-1%207%22%20stroke%3D%22%23fff5df%22%20stroke-width%3D%221%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.85%22%2F%3E%3Cpath%20d%3D%22M19%2019q5-5%2010%200l-3%205%204%2010-6-10-6%2010%204-10Z%22%20fill%3D%22%23bc5c57%22%2F%3E%3Cg%20transform%3D%22rotate%2819%2028%208%29%22%3E%3Cpath%20d%3D%22M27%209h2l-1%2017Z%22%20fill%3D%22url%28%23m%29%22%2F%3E%3Crect%20x%3D%2225%22%20y%3D%222%22%20width%3D%226%22%20height%3D%228%22%20rx%3D%221.5%22%20fill%3D%22url%28%23m%29%22%20stroke%3D%22%237e919e%22%20stroke-width%3D%22.5%22%2F%3E%3Cpath%20d%3D%22M26%204h4m-4%202h4m-4%202h4%22%20stroke%3D%22%23677d8b%22%20stroke-width%3D%22.7%22%2F%3E%3Cpath%20d%3D%22m27%2017%201.5-1m-1.5%203%201.3-1m-1.2%203%201-1m-.9%203%20.7-1%22%20stroke%3D%22%23627e8e%22%20stroke-width%3D%22.5%22%2F%3E%3Crect%20x%3D%2225%22%20y%3D%2212%22%20width%3D%226%22%20height%3D%222%22%20rx%3D%221%22%20fill%3D%22%2368b6d2%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
.target-bar a:nth-child(2)::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22e%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%22.7%22%3E%3Cstop%20stop-color%3D%22%23c8d7e1%22%2F%3E%3Cstop%20offset%3D%22.25%22%20stop-color%3D%22%23fff%22%2F%3E%3Cstop%20offset%3D%22.55%22%20stop-color%3D%22%23f7fafc%22%2F%3E%3Cstop%20offset%3D%22.82%22%20stop-color%3D%22%23dce6ed%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23aebfcb%22%2F%3E%3C%2FlinearGradient%3E%3CradialGradient%20id%3D%22d%22%20cx%3D%22.42%22%20cy%3D%22.28%22%20r%3D%22.8%22%3E%3Cstop%20stop-color%3D%22%23fff4df%22%2F%3E%3Cstop%20offset%3D%22.55%22%20stop-color%3D%22%23efdcbb%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23c5a679%22%2F%3E%3C%2FradialGradient%3E%3ClinearGradient%20id%3D%22g%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23f9d4ce%22%2F%3E%3Cstop%20offset%3D%22.3%22%20stop-color%3D%22%23efb1aa%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23c8807b%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22m%22%3E%3Cstop%20stop-color%3D%22%23718796%22%2F%3E%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22%23edf3f6%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%237e919e%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Ccircle%20cx%3D%2224%22%20cy%3D%2224%22%20r%3D%2222%22%20fill%3D%22%23f2f7fa%22%2F%3E%3Cpath%20d%3D%22M5%2029q19-6%2038%200v8q-19%2011-38%200Z%22%20fill%3D%22url%28%23g%29%22%2F%3E%3Cpath%20d%3D%22M5%2029q19-6%2038%200%22%20fill%3D%22none%22%20stroke%3D%22%23fbe0db%22%20stroke-width%3D%221.8%22%2F%3E%3Cpath%20d%3D%22M13%2010c-5%202-5%208-3%2013%202%205%202%2012%205%2015%202%202%204%200%204-3l2-9q3-5%206%200l2%209c0%203%202%205%204%203%203-3%203-10%205-15%202-5%202-11-3-13-4-2-7%201-11%201s-7-3-11-1Z%22%20fill%3D%22url%28%23e%29%22%20stroke%3D%22%239bafbc%22%20stroke-width%3D%221.1%22%2F%3E%3Cpath%20d%3D%22M15%2013c-3%201-3%206-1%2010%202%204%202%2010%203%2012l2-10q5-8%2010%200l2%2010c1-2%201-8%203-12%202-4%202-9-1-10-3-1-6%202-9%202s-6-3-9-2Z%22%20fill%3D%22url%28%23d%29%22%2F%3E%3Cpath%20d%3D%22M13%2014q-2%203-1%206%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M11%2023c2%205%202%2011%205%2014M36%2023c-2%205-2%2011-5%2014%22%20fill%3D%22none%22%20stroke%3D%22%23849cab%22%20stroke-width%3D%221.1%22%20opacity%3D%22.42%22%2F%3E%3Cpath%20d%3D%22M14%2011c3-1%205%201%207%201m5%200c3%200%205-2%208-1%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M16%2015q2-1%204%201m7%200q2-2%205-1%22%20fill%3D%22none%22%20stroke%3D%22%23c5a77f%22%20stroke-width%3D%22.8%22%20opacity%3D%22.7%22%2F%3E%3Cpath%20d%3D%22M16%2025l1%207m15-7-1%207%22%20stroke%3D%22%23fff5df%22%20stroke-width%3D%221%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.85%22%2F%3E%3Cpath%20d%3D%22M19%2019q5-5%2010%200l-3%205%204%2010-6-10-6%2010%204-10Z%22%20fill%3D%22%23bc5c57%22%2F%3E%3Cpath%20d%3D%22m17%2012%204%201-1%205-4-2Z%22%20fill%3D%22%23856354%22%2F%3E%3Cellipse%20cx%3D%2217%22%20cy%3D%2236%22%20rx%3D%224%22%20ry%3D%223.5%22%20fill%3D%22%23d77f77%22%20stroke%3D%22%23b75b56%22%20stroke-width%3D%221%22%2F%3E%3Cpath%20d%3D%22M15%2035q2-2%204%200%22%20fill%3D%22none%22%20stroke%3D%22%23efb1a8%22%20stroke-width%3D%221%22%2F%3E%3Cpath%20d%3D%22m38%2012%203-2m-2%207h4m-5%205%203%202%22%20stroke%3D%22%23ca8279%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E"); }
.target-bar a:nth-child(3)::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22e%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%22.7%22%3E%3Cstop%20stop-color%3D%22%23c8d7e1%22%2F%3E%3Cstop%20offset%3D%22.25%22%20stop-color%3D%22%23fff%22%2F%3E%3Cstop%20offset%3D%22.55%22%20stop-color%3D%22%23f7fafc%22%2F%3E%3Cstop%20offset%3D%22.82%22%20stop-color%3D%22%23dce6ed%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23aebfcb%22%2F%3E%3C%2FlinearGradient%3E%3CradialGradient%20id%3D%22d%22%20cx%3D%22.42%22%20cy%3D%22.28%22%20r%3D%22.8%22%3E%3Cstop%20stop-color%3D%22%23fff4df%22%2F%3E%3Cstop%20offset%3D%22.55%22%20stop-color%3D%22%23efdcbb%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23c5a679%22%2F%3E%3C%2FradialGradient%3E%3ClinearGradient%20id%3D%22g%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23f9d4ce%22%2F%3E%3Cstop%20offset%3D%22.3%22%20stop-color%3D%22%23efb1aa%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23c8807b%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22m%22%3E%3Cstop%20stop-color%3D%22%23718796%22%2F%3E%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22%23edf3f6%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%237e919e%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Ccircle%20cx%3D%2224%22%20cy%3D%2224%22%20r%3D%2222%22%20fill%3D%22%23f2f7fa%22%2F%3E%3Cpath%20d%3D%22M5%2029q19-6%2038%200v8q-19%2011-38%200Z%22%20fill%3D%22url%28%23g%29%22%2F%3E%3Cpath%20d%3D%22M5%2029q19-6%2038%200%22%20fill%3D%22none%22%20stroke%3D%22%23fbe0db%22%20stroke-width%3D%221.8%22%2F%3E%3Cpath%20d%3D%22M13%2010c-5%202-5%208-3%2013%202%205%202%2012%205%2015%202%202%204%200%204-3l2-9q3-5%206%200l2%209c0%203%202%205%204%203%203-3%203-10%205-15%202-5%202-11-3-13-4-2-7%201-11%201s-7-3-11-1Z%22%20fill%3D%22url%28%23e%29%22%20stroke%3D%22%239bafbc%22%20stroke-width%3D%221.1%22%2F%3E%3Cpath%20d%3D%22M15%2013c-3%201-3%206-1%2010%202%204%202%2010%203%2012l2-10q5-8%2010%200l2%2010c1-2%201-8%203-12%202-4%202-9-1-10-3-1-6%202-9%202s-6-3-9-2Z%22%20fill%3D%22url%28%23d%29%22%2F%3E%3Cpath%20d%3D%22M13%2014q-2%203-1%206%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M11%2023c2%205%202%2011%205%2014M36%2023c-2%205-2%2011-5%2014%22%20fill%3D%22none%22%20stroke%3D%22%23849cab%22%20stroke-width%3D%221.1%22%20opacity%3D%22.42%22%2F%3E%3Cpath%20d%3D%22M14%2011c3-1%205%201%207%201m5%200c3%200%205-2%208-1%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M16%2015q2-1%204%201m7%200q2-2%205-1%22%20fill%3D%22none%22%20stroke%3D%22%23c5a77f%22%20stroke-width%3D%22.8%22%20opacity%3D%22.7%22%2F%3E%3Cpath%20d%3D%22M16%2025l1%207m15-7-1%207%22%20stroke%3D%22%23fff5df%22%20stroke-width%3D%221%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.85%22%2F%3E%3Cpath%20d%3D%22M19%2019q5-5%2010%200l-3%205%204%2010-6-10-6%2010%204-10Z%22%20fill%3D%22%23c8a458%22%2F%3E%3Cpath%20d%3D%22M23%2018v4m-1%204-2%205m6-5%202%205%22%20stroke%3D%22%23ffe7a5%22%20stroke-width%3D%221%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2236%22%20cy%3D%2235%22%20r%3D%227%22%20fill%3D%22%23264e6e%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.5%22%2F%3E%3Cpath%20d%3D%22m32.5%2035%202.3%202.3%204.2-4.8%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E"); }
@media (max-width: 767px) { .target-bar a::before { width: 32px; height: 32px; background-size: 32px 32px; } }

/* 2026-09-15: 色付きの歯アイコンを少し縦長に調整 */
.target-bar a::before { width: 36px; height: 46px; background-size: 38px 38px; transform: scale(.92, 1.18); }
@media (max-width: 767px) { .target-bar a::before { width: 30px; height: 38px; background-size: 32px 32px; } }


/* 2026-09-15: 対象別案内をアクセント付きカードに調整 */
.target-bar { gap: 14px; padding: 14px 24px; background: #eef4f6; }
.target-bar a {
  position: relative;
  min-height: 70px;
  padding: 10px 14px 10px 16px;
  border: 1px solid #d5e2e8;
  border-left: 3px solid #709dad;
  border-radius: 10px;
  background: linear-gradient(115deg, #fff 45%, #f0f7f9 100%);
  box-shadow: 0 3px 9px rgba(26,61,80,.06), inset 0 1px 0 #fff;
  gap: 13px;
  font-weight: 500;
  line-height: 1.7;
  text-align: left;
}
.target-bar a::after {
  content: '';
  width: 25px;
  height: 25px;
  margin-left: auto;
  border: 1px solid #d5e4e9;
  border-radius: 50%;
  transform: none;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233d6a7e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6v12m-5-5 5 5 5-5'/%3E%3C/svg%3E") center/14px 14px no-repeat;
  box-shadow: 0 2px 4px rgba(26,61,80,.04);
}
.target-bar a:hover, .target-bar a:focus-visible {
  border-color: #7ea8b8;
  border-left-color: #28566d;
  background: linear-gradient(115deg, #fff 20%, #e4f1f5 100%);
  box-shadow: 0 5px 14px rgba(26,61,80,.12);
  color: #12374a;
}
@media (max-width: 767px) {
  html { scroll-padding-top: 210px; }
  .target-bar { gap: 7px; padding: 9px 8px; }
  .target-bar a { min-height: 94px; padding: 7px 5px; gap: 5px; border-left-width: 1px; border-top: 2px solid #709dad; border-radius: 8px; font-size: 10px; line-height: 1.5; text-align: center; }
  .target-bar a::after { display: block; position: absolute; top: 7px; right: 5px; width: 15px; height: 15px; background-size: 10px 10px; box-shadow: none; }
}

/* 2026-09-15: 初画面の相談・説明カード */
.page-head .lead { padding: 28px; border: 1px solid #dbe7ec; border-top: 3px solid #709dad; border-radius: 14px; background: linear-gradient(145deg,#fff 60%,#f4f9fa); box-shadow: 0 12px 30px rgba(25,66,86,.13); }
.page-head .lead .lead__eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font: 500 11px/1.5 'Noto Sans JP',sans-serif; color: #527887; letter-spacing: .12em; }
.page-head .lead .lead__eyebrow::before { content: ''; width: 24px; height: 1px; background: #709dad; }
.page-head .lead .lead__intro { font-family: 'Noto Sans JP',sans-serif; font-size: 14px; line-height: 1.95; color: #465e6c; }
.page-head .lead .lead__intro strong { display: block; margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid #dfebef; font-family: 'Noto Serif JP',serif; font-size: clamp(18px,1.5vw,22px); font-weight: 600; line-height: 1.85; letter-spacing: .035em; color: #183e53; }
.page-head .lead .lead__intro strong span { display: block; }
.page-head .lead__badges { margin-top: 20px; padding: 15px; border: 1px solid #dfebef; border-radius: 8px; background: #f2f7f9; font: 500 12px/1.8 'Noto Sans JP',sans-serif; gap: 8px; }
.page-head .lead__badges li::before { color: #578b9c; }
.page-head .lead .target-links { margin-top: 20px; gap: 10px; }
.page-head .lead .target-links a { border: 1px solid #dce7eb; border-left: 3px solid #709dad; border-radius: 8px; background: #fff; padding: 13px 30px 13px 14px; box-shadow: 0 2px 6px #17374705; font-family: 'Noto Sans JP',sans-serif; font-size: 13px; font-weight: 500; line-height: 1.7; }
.page-head .lead .target-links a span { font-size: 11px; margin-top: 4px; line-height: 1.7; }
.page-head .lead .target-links a:hover { background: #eaf3f6; color: #183e53; }
.page-head .lead .target-links a:hover span { color: #465e6c; }
.page-head .lead > .btn { width: 100%; border-radius: 8px; box-shadow: none; background: #183e53; font: 500 14px/1.6 'Noto Sans JP',sans-serif; padding: 15px 20px; }
.page-head .lead > .btn:hover { background: #285c70; }
@media (max-width:767px) { .page-head .lead { padding: 22px 18px; } .page-head .lead .lead__intro strong { font-size: 18px; } }

/* 2026-09-15: KVの横長比率を活かし、説明との高さの差を解消 */
.page-head__grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 22px; align-items: start; }
.page-head .img-slot--kv { margin: 0; overflow: hidden; border: 1px solid #d7e4e9; border-radius: 14px; background: #fff; box-shadow: 0 8px 24px rgba(25,66,86,.1); }
.page-head .img-slot--kv img { display: block; width: 100%; height: auto; aspect-ratio: auto; border-radius: 0; box-shadow: none; outline: none; }
.page-head .img-slot--kv figcaption { margin: 0; padding: 14px 20px; border: 0; background: #f5f9fa; color: #486371; font: 400 12px/1.8 'Noto Sans JP',sans-serif; }
@media (min-width: 900px) {
  .page-head .lead { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); column-gap: 32px; align-items: start; }
  .page-head .lead .lead__eyebrow { grid-column: 1; grid-row: 1; }
  .page-head .lead .lead__intro { grid-column: 1; grid-row: 2 / 4; }
  .page-head .lead .lead__badges { grid-column: 1; grid-row: 4; margin-top: 18px; }
  .page-head .lead .target-links { grid-column: 2; grid-row: 1 / 4; margin-top: 0; }
  .page-head .lead > .btn { grid-column: 2; grid-row: 4; align-self: end; }
}
@media (max-width: 767px) { .page-head__grid { gap: 16px; } .page-head .img-slot--kv figcaption { padding: 12px 14px; font-size: 11px; } }

/* 2026-09-15: 入れ歯サイトの書体・フレーム・丸みを水色のまま反映 */
.page-head h1 { font-family: 'Noto Serif JP',serif; font-weight: 500; font-size: clamp(24px,3vw,38px); line-height: 1.7; letter-spacing: .055em; margin: 20px 0 28px; text-wrap: pretty; }
.page-head .device-tag { border: 1px solid rgba(11,46,79,.25); border-radius: 5px; padding: 9px 16px; background: rgba(255,255,255,.66); box-shadow: inset 0 0 0 3px rgba(255,255,255,.25); font: 500 12px/1.7 'Noto Sans JP',sans-serif; letter-spacing: .06em; }
.page-head .img-slot--kv { border: 2px solid rgba(11,46,79,.28); border-radius: 24px; padding: 5px; background: rgba(255,255,255,.55); box-shadow: 0 12px 28px rgba(11,46,79,.14); }
.page-head .img-slot--kv img { border-radius: 17px 17px 0 0; }
.page-head .img-slot--kv figcaption { border-radius: 0 0 17px 17px; padding: 15px 20px; background: rgba(255,255,255,.85); }
.page-head .lead { border-radius: 18px; border-top-width: 1px; border-color: rgba(11,46,79,.18); box-shadow: 0 10px 30px rgba(11,46,79,.1); padding: 32px; }
.page-head .lead .lead__eyebrow { letter-spacing: .16em; }
.page-head .lead .lead__intro strong { font-weight: 500; letter-spacing: .055em; }
.page-head .lead > .btn, .header__cta { border-radius: 999px; }
.page-head .lead > .btn { min-height: 52px; box-shadow: 0 5px 14px rgba(11,46,79,.14); }
.section > h2[data-en] { font-family: 'Noto Serif JP',serif; font-weight: 500; letter-spacing: .055em; line-height: 1.6; }
.section > h2[data-en]::before { font-family: 'Noto Sans JP',sans-serif; font-size: 11px; font-weight: 500; letter-spacing: .17em; }
.tool-card, .feature-card { border-radius: 16px; box-shadow: 0 7px 22px rgba(11,46,79,.09); }
.target-bar a { border-radius: 12px; }
@media (max-width:767px) {
  .page-head h1 { font-size: 24px; letter-spacing: .025em; line-height: 1.65; margin: 16px 0 22px; }
  .page-head .device-tag { font-size: 10px; padding: 7px 10px; }
  .page-head .img-slot--kv { border-radius: 17px; padding: 4px; }
  .page-head .img-slot--kv img { border-radius: 11px 11px 0 0; }
  .page-head .img-slot--kv figcaption { border-radius: 0 0 11px 11px; padding: 12px; }
  .page-head .lead { padding: 22px 18px; }
}

/* =========================================================
   残りのセクション(院長・治療の流れ・リスク・よくある質問・医院案内)を
   紺 × #82DCFD × 白 のデザインに揃え、項目を見やすくする
   (2026-09-15 発注者指示)。文章は変更しない。
   ========================================================= */

/* ---------- 院長・歯科技工士 ---------- */
#staff > p {
  padding-left: 18px;
  border-left: 3px solid var(--sky-bright);
  font-size: 16px;
  line-height: 2;
  color: var(--navy-body);
}
#staff .treatment-card {
  position: relative;
  padding: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--navy-text);
  border-radius: 3px;
  box-shadow: 0 10px 30px rgba(11,46,79,.1);
}
#staff .treatment-card h3 {
  margin: 0;
  padding: 15px 20px;
  background: var(--sky-bright);
  border-bottom: 1px solid var(--navy-text);
  color: var(--navy-text);
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: .03em;
}
#staff .treatment-card > p {
  padding: 0 20px;
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.95;
  color: var(--navy-body);
}
#staff .treatment-card > p:last-child { padding-bottom: 20px; }
#staff .treatment-card .staff-photo { display: block; width: 100%; height: auto; }

/* ---------- 治療の流れ ---------- */
#flow > p { font-size: 16px; line-height: 2; }
#flow > p strong { color: var(--navy-text); }
#flow .flow__steps { gap: var(--space-2); counter-reset: flow; }
#flow .flow__steps li {
  padding: 16px 18px 16px 62px;
  background: #fff;
  border: 1px solid #D7EEF7;
  border-left: 4px solid var(--sky-bright);
  border-radius: 2px;
  box-shadow: 0 6px 20px rgba(11,46,79,.07);
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.7;
  color: var(--navy-text);
  transition: box-shadow .22s, border-color .22s;
}
#flow .flow__steps li:hover { border-color: rgba(38,145,184,.6); box-shadow: 0 14px 30px rgba(11,46,79,.12); }
#flow .flow__steps li::before {
  content: counter(flow, decimal-leading-zero);
  left: 16px;
  top: 19px;
  transform: none;
  width: 32px;
  height: auto;
  border-radius: 0;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--sky-bright);
  background: none;
  color: var(--navy-text);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
}
#flow .flow__steps li .small {
  display: block;
  margin-top: 8px;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.95;
  color: var(--navy-body);
}
#flow .visit-badge {
  margin-left: 10px;
  padding: 3px 11px;
  border-radius: 999px;
  background: var(--navy-text);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  vertical-align: 2px;
}

/* ---------- リスク・副作用 ---------- */
#risks .risk-band {
  padding: var(--space-3);
  background: var(--sky-pale);
  border: 1px solid rgba(38,145,184,.35);
  border-left: 5px solid var(--navy-text);
  border-radius: 0 3px 3px 0;
}
#risks .risk-band ul { list-style: none; padding: 0; display: grid; gap: 12px; }
#risks .risk-band li {
  position: relative;
  padding-left: 22px;
  font-size: 14.5px;
  line-height: 1.95;
  color: var(--navy-body);
}
#risks .risk-band li + li { padding-top: 12px; border-top: 1px solid rgba(11,46,79,.1); }
#risks .risk-band li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .78em;
  width: 7px;
  height: 7px;
  background: var(--navy-text);
  transform: rotate(45deg);
}
#risks .risk-band li + li::before { top: calc(.78em + 12px); }

/* ---------- よくあるご質問 ---------- */
#faq .faq__list { display: grid; gap: 12px; }
#faq .faq__item {
  background: #fff;
  border: 1px solid #D7EEF7;
  border-radius: 2px;
  box-shadow: 0 6px 20px rgba(11,46,79,.06);
  transition: border-color .2s, box-shadow .2s;
}
#faq .faq__item[open] { border-color: var(--navy-text); box-shadow: 0 12px 30px rgba(11,46,79,.13); }
#faq .faq__item summary {
  padding: 16px 52px 16px 18px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--navy-text);
}
#faq .faq__item summary::before {
  content: "Q";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  margin-right: 11px;
  border-radius: 50%;
  background: var(--navy-text);
  color: #fff;
  font-size: 12px;
  vertical-align: -5px;
}
#faq .faq__item summary::after {
  right: 18px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--sky-bright);
  color: var(--navy-text);
  font-size: 15px;
  line-height: 20px;
  text-align: center;
  font-weight: 700;
}
#faq .faq__item[open] summary { border-bottom: 1px solid #E4F2F9; }
#faq .faq__answer { padding: 16px 18px 18px; }
#faq .faq__answer p { font-size: 14.5px; line-height: 2; color: var(--navy-body); }

/* ---------- 医院のご案内 ---------- */
#clinic .clinic-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: var(--space-2) 0 var(--space-3);
}
#clinic .clinic-gallery figure {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--navy-text);
  border-radius: 3px;
  box-shadow: 0 8px 24px rgba(11,46,79,.1);
}
#clinic .clinic-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; }
#clinic .clinic-gallery figcaption {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 5px 12px;
  background: rgba(11,46,79,.82);
  border-left: 2px solid var(--sky-bright);
  border-radius: 0 2px 0 0;
  color: #fff;
  font-size: 11.5px;
  letter-spacing: .08em;
}
#clinic .clinic-gallery__main { grid-column: 1 / -1; }

#clinic dl { display: grid; gap: 0; border-top: 1px solid var(--navy-text); }
#clinic dl > div {
  display: grid;
  border-bottom: 1px solid #D7EEF7;
}
#clinic dt {
  padding: 13px 14px;
  background: var(--sky-pale);
  color: var(--navy-text);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
}
#clinic dd {
  padding: 13px 14px;
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--navy-body);
}

@media (min-width: 768px) {
  #clinic .clinic-gallery { grid-template-columns: repeat(4, 1fr); gap: 12px; }
  #clinic .clinic-gallery__main { grid-column: span 4; }
  #clinic dl > div { grid-template-columns: 180px 1fr; }
  #clinic dt { border-right: 1px solid #D7EEF7; }
  #staff .treatment-card h3 { font-size: 18px; }
}