/* =========================================================
   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; }
}

/* =========================================================
   ★ 初画面を新しいKV画像(endo-kv2.jpg)に合わせて再構成
   (2026-09-17 発注者指示)。PCでは画像を全幅の背景に敷き、
   空いている左側に文字を置く。スマホでは画像を上、文字を下に。
   ========================================================= */

/* ---------- 帯の地色を画像の背景となじませる ---------- */
.page-head::before {
  background-color: #E4EFF9;
  background-image:
    linear-gradient(180deg, rgba(228,239,249,.55) 0%, rgba(228,239,249,0) 30%),
    linear-gradient(180deg, #EEF5FB 0%, #DCEAF6 100%);
  background-size: auto, auto;
  background-position: top, top;
  background-repeat: no-repeat, no-repeat;
  border-top: 1px solid rgba(38,145,184,.3);
  border-bottom: 1px solid rgba(38,145,184,.45);
}
.page-head::after {
  background:
    linear-gradient(90deg, rgba(38,145,184,0) 0%, rgba(38,145,184,.35) 18%, rgba(38,145,184,.35) 82%, rgba(38,145,184,0) 100%) left top / 100% 1px no-repeat,
    linear-gradient(90deg, rgba(38,145,184,0) 0%, rgba(38,145,184,.5) 18%, rgba(38,145,184,.5) 82%, rgba(38,145,184,0) 100%) left bottom / 100% 1px no-repeat;
}

/* ---------- 文字まわり(共通) ---------- */
.page-head .device-tag {
  background: #fff;
  border: 1px solid rgba(11,46,79,.18);
  color: var(--navy-text);
  box-shadow: 0 3px 10px rgba(11,46,79,.08);
}
.page-head h1 { color: var(--navy-text); text-shadow: none; }
.page-head .lead {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
}
.page-head .lead .lead__eyebrow { color: var(--sky-deep); }
.page-head .lead .lead__intro { color: var(--navy-body); }
.page-head .lead .lead__intro strong { color: var(--navy-text); }
.page-head .lead__badges {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid rgba(11,46,79,.14);
  color: var(--navy-text);
}
.page-head .target-links a {
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(11,46,79,.12);
  border-left: 3px solid var(--sky-bright);
  box-shadow: 0 4px 14px rgba(11,46,79,.07);
  color: var(--navy-text);
}
.page-head .target-links a:hover { background: var(--navy-text); color: #fff; }
.page-head .btn--reserve {
  background: var(--navy-text);
  color: #fff;
  box-shadow: 0 10px 24px rgba(11,46,79,.26);
}

/* ---------- KV画像の枠を外して背景になじませる ---------- */
.page-head .img-slot--kv {
  border: none;
  padding: 0;
  background: none;
  box-shadow: none;
  border-radius: 3px;
}
.page-head .img-slot--kv img {
  aspect-ratio: auto;
  height: auto;
  border-radius: 3px;
  outline: none;
  box-shadow: 0 14px 34px rgba(11,46,79,.14);
}
.page-head .img-slot--kv figcaption {
  position: static;
  margin-top: 10px;
  padding: 2px 0 2px 11px;
  background: none;
  border: none;
  border-left: 3px solid var(--sky-bright);
  border-radius: 0;
  color: var(--navy-sub);
  font-size: 12px;
  line-height: 1.8;
}

/* ---------- PC: 画像を全幅の背景に敷き、左に文字 ---------- */
@media (min-width: 900px) {
  .page-head { padding: 72px 0 76px; }
  .page-head::before {
    background-image:
      linear-gradient(95deg, #E9F3FB 0%, #E9F3FB 34%, rgba(233,243,251,.86) 46%, rgba(233,243,251,.25) 58%, rgba(233,243,251,0) 68%),
      url("../images/endo-kv2.jpg");
    background-size: auto, cover;
    background-position: center, right center;
    background-repeat: no-repeat, no-repeat;
  }
  /* 背景で見せるので、図としての画像はPCでは非表示(スマホでは表示) */
  .page-head .img-slot--kv { display: none; }
  .page-head__grid { display: block; }
  .page-head .lead { max-width: 560px; }
  .page-head h1 { max-width: 620px; font-size: clamp(28px, 2.9vw, 40px); }
  .page-head .lead__badges { max-width: 520px; }
  .page-head .target-links { max-width: 540px; }
  .page-head .btn--reserve { width: auto; min-width: 300px; }
}

/* ---------- スマホ・タブレット: 画像を上、文字を下 ---------- */
@media (max-width: 899px) {
  .page-head__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
  .page-head .img-slot--kv { order: -1; margin: 0; }
}

/* =========================================================
   初画面レイアウトの調整(2026-09-17): 左=文章 / 右=KV画像 の2列。
   画像の左端を背景へフェードさせて、四角い枠が見えないようにする。
   ========================================================= */
.page-head .lead { display: block; }

@media (min-width: 900px) {
  /* 背景画像はやめ、淡い水色の地に戻す */
  .page-head::before {
    background-image: linear-gradient(180deg, #EFF6FC 0%, #DCEAF6 100%);
    background-size: auto;
    background-position: top;
  }
  .page-head { padding: 64px 0 68px; }
  .page-head__grid {
    display: grid;
    grid-template-columns: 1.02fr .98fr;
    gap: var(--space-6);
    align-items: center;
  }
  .page-head .lead { order: 1; max-width: none; }
  .page-head .img-slot--kv { display: block; order: 2; margin: 0; }
  .page-head h1 { max-width: none; font-size: clamp(27px, 2.5vw, 36px); }
  .page-head .lead__badges, .page-head .target-links { max-width: none; }
  .page-head .btn--reserve { width: 100%; min-width: 0; }
}

/* 画像: 枠なし・左端と下端を背景へフェード */
.page-head .img-slot--kv img {
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, #000 16%, #000 100%);
          mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, #000 16%, #000 100%);
  box-shadow: none;
  border-radius: 0;
}
@media (max-width: 899px) {
  .page-head .img-slot--kv img {
    -webkit-mask-image: none;
            mask-image: none;
    border-radius: 3px;
    box-shadow: 0 12px 30px rgba(11,46,79,.13);
  }
}

/* =========================================================
   初画面 最終形(2026-09-17): PCはKV画像を全幅の背景に敷き、
   左の空きスペースに文章を重ねる。画像の左側だけ淡くぼかして
   文字を読みやすくする。スマホは画像を上・文章を下。
   ========================================================= */
@media (min-width: 900px) {
  .page-head { padding: 76px 0 80px; }
  .page-head::before {
    background-color: #E9F3FB;
    background-image:
      linear-gradient(92deg, #EAF4FB 0%, #EAF4FB 36%, rgba(234,244,251,.72) 46%, rgba(234,244,251,.18) 54%, rgba(234,244,251,0) 62%),
      url("../images/endo-kv2.jpg");
    background-size: auto, cover;
    background-position: center, right center;
    background-repeat: no-repeat, no-repeat;
  }
  .page-head__grid { display: block; }
  .page-head .img-slot--kv { display: none; }
  .page-head .device-tag { margin-bottom: var(--space-2); }
  .page-head h1 { max-width: 560px; font-size: clamp(27px, 2.5vw, 36px); }
  .page-head .lead { max-width: 500px; }
  .page-head .lead .lead__intro { font-size: 15px; }
  .page-head .lead__badges, .page-head .target-links { max-width: 500px; }
  .page-head .target-links a { background: rgba(255,255,255,.94); }
  .page-head .btn--reserve { width: 100%; min-width: 0; }
}

/* =========================================================
   初画面 仕上げ(2026-09-17): PCは 左=文章 / 右=KV画像 の2列。
   画像はCSSで縦長(4:5)に切り出し、歯が大きく見えるようにする。
   左端は背景へフェードさせて枠が見えないようにする。
   ========================================================= */
@media (min-width: 900px) {
  .page-head { padding: 64px 0 70px; }
  .page-head::before {
    background-color: #E9F3FB;
    background-image: linear-gradient(180deg, #F0F7FC 0%, #DCEAF6 100%);
    background-size: auto;
    background-position: top;
  }
  .page-head__grid {
    display: grid;
    grid-template-columns: 1.06fr .94fr;
    gap: var(--space-6);
    align-items: center;
  }
  .page-head .lead { order: 1; max-width: none; }
  .page-head .img-slot--kv { display: block; order: 2; margin: 0; }
  .page-head .img-slot--kv img {
    aspect-ratio: 4 / 5;
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: 74% center;
  }
  .page-head h1 { max-width: none; font-size: clamp(27px, 2.5vw, 36px); }
  .page-head .lead__badges, .page-head .target-links { max-width: none; }
  .page-head .btn--reserve { width: 100%; min-width: 0; }
  /* 画像キャプションは画像の下に小さく */
  .page-head .img-slot--kv figcaption { max-width: 92%; }
}


/* =========================================================
   KV画像を「歯+ファイル」中心に切り出した新しい画像に差し替え
   (2026-09-17 発注者指示)。CSSでの再トリミングはやめ、
   画像をそのままの縦横比(852x941)で表示する。
   ========================================================= */
.page-head .img-slot--kv img {
  aspect-ratio: auto;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
}
@media (min-width: 900px) {
  .page-head .img-slot--kv img {
    aspect-ratio: auto;
    object-fit: contain;
    object-position: center;
  }
  /* 画像が縦長になったぶん、左右の列幅を調整 */
  .page-head__grid { grid-template-columns: 1.12fr .88fr; align-items: center; }
}

/* =========================================================
   初画面の背景をデスクトップ「水色画像.png」の色 #A0D8EF に
   (2026-09-17 発注者指示)。文字は紺のまま(#A0D8EF 上で8.4:1)。
   KV画像は周囲をふんわりフェードさせて水色になじませる。
   ========================================================= */
.page-head::before {
  background-color: #A0D8EF;
  background-image:
    radial-gradient(110% 80% at 88% 4%, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(180deg, #A9DDF2 0%, #A0D8EF 50%, #96D2EB 100%);
  background-size: auto, auto;
  background-position: top, top;
  background-repeat: no-repeat, no-repeat;
  border-top: 1px solid rgba(11,46,79,.14);
  border-bottom: 1px solid rgba(11,46,79,.2);
}
.page-head::after {
  background:
    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 top / 100% 1px no-repeat,
    linear-gradient(90deg, rgba(11,46,79,0) 0%, rgba(11,46,79,.25) 18%, rgba(11,46,79,.25) 82%, rgba(11,46,79,0) 100%) left bottom / 100% 1px no-repeat;
}

/* 文字・部品を水色の地に合わせる */
.page-head .lead .lead__eyebrow { color: var(--navy-text); }
.page-head .lead .lead__intro { color: var(--navy-body); }
.page-head .device-tag {
  background: #fff;
  border: 1px solid rgba(11,46,79,.2);
  color: var(--navy-text);
  box-shadow: 0 3px 10px rgba(11,46,79,.12);
}
.page-head .page-head__grid .lead .lead__badges {
  background: transparent;
  border: none;
  border-top: 1px solid rgba(11,46,79,.2);
  box-shadow: none;
  border-radius: 0;
  padding: var(--space-2) 0 0;
  color: var(--navy-text);
}
.page-head .page-head__grid .lead .lead__badges li { color: var(--navy-text); }
.page-head .page-head__grid .lead .lead__badges li::before { color: var(--sky-deep); }
.page-head .page-head__grid .lead .target-links a {
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(11,46,79,.12);
  border-left: 3px solid var(--navy-text);
  box-shadow: 0 5px 16px rgba(11,46,79,.12);
  color: var(--navy-text);
}
.page-head .page-head__grid .lead .target-links a span { color: var(--navy-sub); }
.page-head .page-head__grid .lead .target-links a:hover {
  background: var(--navy-text);
  border-color: var(--navy-text);
  color: #fff;
}
.page-head .page-head__grid .lead .target-links a:hover span { color: #C7EEFE; }
.page-head .page-head__grid .lead > .btn--reserve {
  background: var(--navy-text);
  color: #fff;
  box-shadow: 0 12px 28px rgba(11,46,79,.3);
}

/* KV画像: 周囲をやわらかくフェードして水色になじませる */
.page-head .img-slot--kv { background: none; border: none; padding: 0; box-shadow: none; }
.page-head .img-slot--kv img {
  -webkit-mask-image: radial-gradient(128% 112% at 58% 48%, #000 62%, rgba(0,0,0,0) 96%);
          mask-image: radial-gradient(128% 112% at 58% 48%, #000 62%, rgba(0,0,0,0) 96%);
  box-shadow: none;
  border-radius: 0;
}
.page-head .img-slot--kv figcaption {
  margin-top: 6px;
  padding: 2px 0 2px 11px;
  background: none;
  border: none;
  border-left: 3px solid var(--navy-text);
  border-radius: 0;
  color: #1F4763;
  font-size: 12px;
}

/* =========================================================
   対象別メニューのアイコンを、発注者提供の3カード画像
   (デスクトップ「根管治療２.png」)から切り出した歯のイラストに差し替え
   (2026-09-17 発注者指示)。CSS内SVGのイラストは使用しない。
   ========================================================= */
.target-bar a { padding: 6px 18px 6px 6px; gap: 9px; }
.target-bar a::before {
  width: 38px;
  height: 38px;
  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,.75); background-color: #fff; }

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

/* =========================================================
   ロゴのスモールキャップスをやめ、S・D・C以外は小文字に
   (2026-09-17 発注者指示)。明朝体・字間はそのまま。
   ========================================================= */
.header__logo-main {
  font-variant-caps: normal;
  font-feature-settings: normal;
  text-transform: none;
  font-size: 24px;
  letter-spacing: .05em;
}
@media (min-width: 768px) and (max-width: 1023px) {
  .header__logo-main { font-size: 21px; }
}
@media (max-width: 767px) {
  .header__logo-main { font-size: 18px; letter-spacing: .03em; }
}

/* =========================================================
   上部の対象別メニュー3項目を、歯を大きくしてカード風に
   (2026-09-17 発注者指示)。常時表示のバーなので高さは抑える。
   ========================================================= */
.target-bar {
  gap: 12px;
  padding: 12px var(--space-2);
  background: linear-gradient(180deg, #FBFDFF 0%, #EDF7FD 100%);
  border-bottom: 1px solid rgba(11,46,79,.18);
  box-shadow: 0 4px 14px rgba(11,46,79,.07);
}
.target-bar a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 13px;
  min-height: 74px;
  padding: 8px 46px 8px 8px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid rgba(11,46,79,.16);
  border-left: 4px solid var(--sky-bright);
  box-shadow: 0 5px 16px rgba(11,46,79,.1);
  color: var(--navy-text);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .02em;
  text-align: left;
  white-space: normal;
  transition: transform .2s, box-shadow .2s, border-color .2s, background .2s, color .2s;
}

/* 歯の画像を大きく(角丸の四角) */
.target-bar a::before {
  flex: none;
  width: 58px;
  height: 58px;
  border-radius: 8px;
  border: 1px solid rgba(11,46,79,.12);
  background-color: #fff;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 3px 10px rgba(11,46,79,.12);
}

/* 右端の矢印バッジ */
.target-bar a::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 24px;
  height: 24px;
  margin-top: -12px;
  border-radius: 50%;
  background: var(--sky-bright)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B2E4F' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E")
    center / 13px 13px no-repeat;
  transition: background-color .2s, transform .2s;
}

.target-bar a:hover {
  transform: translateY(-2px);
  background: var(--navy-text);
  border-color: var(--navy-text);
  border-left-color: var(--sky-bright);
  color: #fff;
  box-shadow: 0 12px 26px rgba(11,46,79,.26);
}
.target-bar a:hover::before { border-color: rgba(255,255,255,.5); }
.target-bar a:hover::after { transform: translateX(3px); }

@media (min-width: 768px) {
  .target-bar { gap: 16px; padding: 13px var(--space-2); }
  .target-bar a {
    flex: 0 1 300px;
    min-height: 78px;
    padding: 9px 48px 9px 9px;
    font-size: 14.5px;
  }
  .target-bar a::before { width: 62px; height: 62px; }
}
@media (max-width: 767px) {
  .target-bar { gap: 10px; padding: 10px var(--space-2); }
  .target-bar a {
    flex: 0 0 auto;
    max-width: 258px;
    min-height: 66px;
    padding: 7px 40px 7px 7px;
    font-size: 13px;
    gap: 10px;
  }
  .target-bar a::before { width: 50px; height: 50px; border-radius: 7px; }
  .target-bar a::after { right: 10px; width: 21px; height: 21px; margin-top: -10.5px; background-size: 11px 11px; }
  html { scroll-padding-top: 150px; }
}

/* 見出しが2行に折り返さないよう、カード幅と余白を微調整(2026-09-17) */
@media (min-width: 768px) {
  .target-bar a { flex: 0 1 344px; padding: 9px 44px 9px 9px; }
}
@media (min-width: 1100px) {
  .target-bar a { flex: 0 1 368px; font-size: 15px; }
  .target-bar a::before { width: 66px; height: 66px; }
  .target-bar a { min-height: 82px; }
}

/* スマホ: カード幅を固定して「画像=左 / 文字=右」の横並びにし、バーは横スクロール(2026-09-17) */
@media (max-width: 767px) {
  .target-bar { justify-content: flex-start; }
  .target-bar a {
    flex: 0 0 246px;
    width: 246px;
    max-width: none;
    min-height: 68px;
    font-size: 13px;
    line-height: 1.45;
  }
  .target-bar a::before { width: 52px; height: 52px; }
}

/* 他ブロックで縦積み(flex-direction:column)になっていたのを横並びに戻す(2026-09-17) */
.target-bar a { flex-direction: row; align-items: center; justify-content: flex-start; text-align: left; }
@media (max-width: 767px) {
  .target-bar a { flex-direction: row; align-items: center; text-align: left; }
}

/* =========================================================
   歯の画像を横長フレームに切り直したのに合わせ、
   画像枠を低くしてカード全体の高さを下げる(2026-09-17 発注者指示)
   ========================================================= */
.target-bar a { min-height: 0; padding: 8px 44px 8px 8px; }
.target-bar a::before { width: 70px; height: 58px; border-radius: 8px; }

@media (min-width: 768px) {
  .target-bar a { min-height: 0; padding: 8px 44px 8px 8px; }
  .target-bar a::before { width: 72px; height: 60px; }
}
@media (min-width: 1100px) {
  .target-bar a { min-height: 0; }
  .target-bar a::before { width: 76px; height: 63px; }
}
@media (max-width: 767px) {
  .target-bar a { min-height: 0; padding: 7px 38px 7px 7px; }
  .target-bar a::before { width: 58px; height: 48px; border-radius: 7px; }
  html { scroll-padding-top: 138px; }
}

/* さらに低く: 歯を切らずに横長の枠へ収める(contain)(2026-09-17 発注者指示) */
.target-bar a { padding: 7px 42px 7px 7px; }
.target-bar a::before {
  width: 84px;
  height: 56px;
  border-radius: 8px;
  background-color: #F3F9FD;
  background-size: contain;
  background-position: center;
}
@media (min-width: 768px) {
  .target-bar a { padding: 7px 42px 7px 7px; }
  .target-bar a::before { width: 86px; height: 57px; }
}
@media (min-width: 1100px) {
  .target-bar a::before { width: 90px; height: 60px; }
}
@media (max-width: 767px) {
  .target-bar a { padding: 6px 36px 6px 6px; }
  .target-bar a::before { width: 70px; height: 47px; border-radius: 7px; }
  html { scroll-padding-top: 128px; }
}

/* =========================================================
   ★ フォントを明朝体に統一(2026-09-17 発注者指示)
   別作業で一部が 'Noto Sans JP'(ゴシック)になっていたのを、
   ページ全体まとめて明朝体に戻す。
   ========================================================= */
:root {
  --mincho: "Noto Serif JP", "Yu Mincho", YuMincho, "Hiragino Mincho ProN",
            "Hiragino Mincho Pro", "MS PMincho", "Noto Serif", serif;
}
body,
button, input, select, textarea,
.header__logo-main,
.header__logo-sub,
.header__nav a,
.header__cta,
.target-bar a,
.breadcrumb,
main, main h1, main h2, main h3, main p, main li, main dt, main dd,
main th, main td, main summary, main figcaption, main strong, main span,
.page-head .lead .lead__eyebrow,
.page-head .lead .lead__intro,
.page-head .lead__badges,
.page-head .lead .target-links a,
.page-head .lead > .btn,
.page-head .img-slot--kv figcaption,
.page-head .device-tag,
.section > h2[data-en]::before,
main h2[data-en]::before,
.btn, .note, .small, .visit-badge, .footer, .fixed-cta, .fixed-cta a {
  font-family: var(--mincho);
}

/* 3つ目の見出しが2行にならないよう微調整(2026-09-17) */
@media (min-width: 1100px) {
  .target-bar a { font-size: 14.5px; padding: 7px 38px 7px 7px; gap: 12px; }
  .target-bar a::before { width: 82px; height: 55px; }
}
@media (min-width: 768px) and (max-width: 1099px) {
  .target-bar a { font-size: 13.5px; padding: 7px 36px 7px 7px; gap: 11px; }
  .target-bar a::before { width: 76px; height: 51px; }
}

/* =========================================================
   歯は根の先まで全部見せたまま、表示サイズを下げて
   カード全体を短くする(2026-09-17 発注者指示の修正)
   ========================================================= */
.target-bar a { padding: 7px 40px 7px 7px; }
.target-bar a::before {
  width: 80px;
  height: 48px;
  border-radius: 7px;
  background-size: contain;
  background-position: center;
  background-color: #F3F9FD;
}
@media (min-width: 1100px) {
  .target-bar a { padding: 7px 38px 7px 7px; }
  .target-bar a::before { width: 82px; height: 48px; }
}
@media (min-width: 768px) and (max-width: 1099px) {
  .target-bar a { padding: 7px 36px 7px 7px; }
  .target-bar a::before { width: 76px; height: 45px; }
}
@media (max-width: 767px) {
  .target-bar a { padding: 6px 34px 6px 6px; }
  .target-bar a::before { width: 68px; height: 40px; border-radius: 6px; }
  html { scroll-padding-top: 122px; }
}

/* =========================================================
   アイコン案C(2026-09-17 発注者選択): 歯を横に1.4倍のばし、
   枠を横長・低く(104x44px)して幅広で短い見え方にする。
   画像側で横にのばしてあるので、CSSは contain のまま。
   ========================================================= */
.target-bar a { padding: 7px 40px 7px 7px; gap: 12px; }
.target-bar a::before {
  width: 104px;
  height: 44px;
  border-radius: 7px;
  background-size: contain;
  background-position: center;
  background-color: #F3F9FD;
}
@media (min-width: 1100px) {
  .target-bar a { flex: 0 1 386px; padding: 7px 38px 7px 7px; font-size: 14.5px; }
  .target-bar a::before { width: 106px; height: 45px; }
}
@media (min-width: 768px) and (max-width: 1099px) {
  .target-bar a { flex: 0 1 352px; padding: 7px 34px 7px 7px; font-size: 13.5px; gap: 10px; }
  .target-bar a::before { width: 96px; height: 41px; }
}
@media (max-width: 767px) {
  .target-bar a { flex: 0 0 256px; width: 256px; padding: 6px 32px 6px 6px; gap: 9px; }
  .target-bar a::before { width: 84px; height: 36px; border-radius: 6px; }
  html { scroll-padding-top: 118px; }
}

/* 3つ目の見出しを1行に収める微調整(2026-09-17) */
@media (min-width: 1100px) {
  .target-bar a { flex: 0 1 374px; font-size: 14px; padding: 7px 36px 7px 7px; gap: 11px; }
  .target-bar a::before { width: 100px; height: 42px; }
}
@media (min-width: 768px) and (max-width: 1099px) {
  .target-bar a { flex: 0 1 340px; font-size: 13px; padding: 7px 32px 7px 6px; gap: 9px; }
  .target-bar a::before { width: 92px; height: 39px; }
}

/* =========================================================
   イラストの枠幅を詰め、横の文字を必ず1行に収める
   (2026-09-17 発注者指示)。カード幅は文字量に合わせた自然幅。
   ========================================================= */
.target-bar a {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  white-space: nowrap;
  padding: 7px 36px 7px 7px;
  gap: 11px;
}
.target-bar a::before { width: 88px; height: 37px; }

@media (min-width: 1100px) {
  .target-bar a { flex: 0 0 auto; font-size: 14px; padding: 7px 36px 7px 7px; gap: 11px; }
  .target-bar a::before { width: 90px; height: 38px; }
}
@media (min-width: 768px) and (max-width: 1099px) {
  .target-bar a { flex: 0 0 auto; font-size: 13px; padding: 6px 32px 6px 6px; gap: 9px; }
  .target-bar a::before { width: 82px; height: 35px; }
}
@media (max-width: 767px) {
  .target-bar a { flex: 0 0 auto; width: auto; font-size: 12.5px; padding: 6px 30px 6px 6px; gap: 8px; }
  .target-bar a::before { width: 74px; height: 31px; border-radius: 6px; }
  html { scroll-padding-top: 112px; }
}

/* スマホで .target-bar が grid(3等分)になっていて文字が入らなかったのを、
   横スクロールできる flex に戻す(2026-09-17) */
.target-bar {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.target-bar::-webkit-scrollbar { display: none; }
@media (max-width: 767px) {
  .target-bar { display: flex; justify-content: flex-start; }
  .target-bar a { flex: 0 0 auto; width: auto; min-width: 0; }
}
@media (min-width: 768px) {
  .target-bar { display: flex; justify-content: center; }
}

/* =========================================================
   カードの文字が右端の矢印ボタンに重なっていたのを修正
   (2026-09-18 発注者指摘)。矢印の幅+余白ぶん右の余白を確保する。
   矢印: right:12px・幅24px → 文字は右から48px以上あける。
   ========================================================= */
.target-bar a { padding-right: 48px; }
@media (min-width: 1100px) { .target-bar a { padding-right: 48px; } }
@media (min-width: 768px) and (max-width: 1099px) { .target-bar a { padding-right: 46px; } }
@media (max-width: 767px) {
  .target-bar a { padding-right: 42px; }
  .target-bar a::after { right: 10px; width: 22px; height: 22px; margin-top: -11px; background-size: 12px 12px; }
}

/* =========================================================
   本文中の説明図(発注者提供イラスト)の共通スタイル
   (2026-09-18 発注者指示で6枚を各セクションに配置)
   ========================================================= */
.lp-figure {
  margin: var(--space-3) 0;
  border: 1px solid rgba(11,46,79,.16);
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 28px rgba(11,46,79,.1);
}
.lp-figure img {
  display: block;
  width: 100%;
  height: auto;
}
.lp-figure figcaption {
  padding: 11px 14px;
  border-top: 1px solid #E4F2F9;
  background: var(--sky-paler, #F6FCFE);
  border-left: 3px solid var(--sky-bright, #82DCFD);
  color: var(--navy-sub, #4A6480);
  font-size: 12.5px;
  line-height: 1.85;
}
/* 対象別ブロックの中に置く図は少し小さく */
.lp-figure--in-block { margin: var(--space-2) 0 var(--space-3); }

@media (min-width: 768px) {
  .lp-figure { margin: var(--space-4) 0; }
  .lp-figure--in-block { margin: var(--space-2) 0 var(--space-3); max-width: 620px; }
  .lp-figure figcaption { font-size: 13px; padding: 12px 16px; }
}

/* =========================================================
   院長の写真(2026-09-18 発注者提供)。スマホは上に大きく、
   PCは左に写真・右に文章の2段組み。
   ========================================================= */
#staff .treatment-card .staff-photo {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}
@media (min-width: 768px) {
  #staff .treatment-card:has(.staff-photo) {
    display: grid;
    grid-template-columns: 200px 1fr;
    grid-template-rows: auto 1fr;
    align-items: start;
  }
  #staff .treatment-card:has(.staff-photo) > h3 { grid-column: 1 / -1; }
  #staff .treatment-card .staff-photo {
    grid-row: 2 / span 2;
    height: 100%;
    object-fit: cover;
    object-position: center 22%;
  }
  #staff .treatment-card:has(.staff-photo) > p { grid-column: 2; }
  #staff .treatment-card:has(.staff-photo) > p:first-of-type { margin-top: 18px; }
}
/* :has() が使えないブラウザ向けの保険(縦積みで表示される) */
@supports not selector(:has(*)) {
  #staff .treatment-card .staff-photo { max-width: 260px; margin: 16px auto 0; }
}

/* 院長カードは写真と文章が窮屈だったので、PCでも横いっぱいに(2026-09-18) */
@media (min-width: 768px) {
  #staff .treatment__list { grid-template-columns: 1fr; gap: var(--space-3); }
  #staff .treatment-card:has(.staff-photo) { grid-template-columns: 220px 1fr; }
  #staff .treatment-card:has(.staff-photo) > p { padding-right: var(--space-4); }
  #staff .treatment-card .staff-photo { object-position: center 20%; }
}
@media (min-width: 1000px) {
  #staff .treatment-card:has(.staff-photo) { grid-template-columns: 260px 1fr; }
}

/* 院長カード: 段落の間が空いていたので行の高さを内容ぴったりに(2026-09-18) */
@media (min-width: 768px) {
  #staff .treatment-card:has(.staff-photo) {
    grid-template-rows: auto;
    grid-auto-rows: min-content;
    align-content: start;
  }
  #staff .treatment-card .staff-photo {
    grid-row: 2 / -1;
    height: 100%;
    min-height: 250px;
    object-fit: cover;
    object-position: center 18%;
  }
  #staff .treatment-card:has(.staff-photo) > p:last-of-type { padding-bottom: 20px; }
}

/* 院長カード: グリッドをやめ、写真を左に回り込ませる(段落の間が空く問題を解消・2026-09-18) */
@media (min-width: 768px) {
  #staff .treatment-card:has(.staff-photo) {
    display: block;
    grid-template-columns: none;
    grid-template-rows: none;
  }
  #staff .treatment-card .staff-photo {
    float: left;
    width: 230px;
    height: auto;
    min-height: 0;
    margin: 18px 20px 12px 20px;
    border-radius: 3px;
    object-fit: cover;
    object-position: center 18%;
    aspect-ratio: 4 / 5;
  }
  #staff .treatment-card:has(.staff-photo) > p { padding-right: 20px; }
  #staff .treatment-card:has(.staff-photo)::after { content: ""; display: block; clear: both; height: 20px; }
}
@media (min-width: 1000px) {
  #staff .treatment-card .staff-photo { width: 250px; }
}
@media (max-width: 767px) {
  #staff .treatment-card .staff-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 20%; }
}

/* =========================================================
   歯科技工士カードの写真2枚(2026-09-18 発注者指示・氏名は掲載しない)
   ========================================================= */
#staff .staff-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 16px 20px 0;
}
#staff .staff-photos img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid rgba(11,46,79,.14);
  border-radius: 3px;
}
@media (min-width: 768px) {
  #staff .staff-photos { gap: 12px; padding: 18px 20px 0; max-width: 620px; }
}

/* =========================================================
   ニッケルチタンファイルのカード: 提供画像をそのまま1枚で表示
   (2026-09-18 発注者指示)。同じ文章は画面上は隠し、
   検索エンジン・読み上げ用には残す(sr-only)。
   ========================================================= */
#tools .tool-card--image {
  grid-column: 1 / -1;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}
#tools .tool-card--image:hover { transform: none; box-shadow: none; }
#tools .tool-card--image img {
  display: block;
  width: 100%;
  max-width: 520px;
  height: auto;
  margin: 0 auto;
  border: 1px solid var(--navy-text);
  border-bottom: 1px solid var(--navy-text);
  border-radius: 4px;
  box-shadow: 0 14px 34px rgba(11,46,79,.14);
}
/* 画像内と同じ文章は視覚的に隠す(読み上げ・検索用には残す) */
#tools .tool-card--image .tool-card__body {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ニッケルチタンファイルのカード: 枠は他のカードと同じ状態に戻す(2026-09-18 発注者指示) */
#tools .tool-card--image {
  grid-column: auto;
  display: flex;
  flex-direction: column;
  padding: 12px;
  background: #C7EEFE;
  border: 1px solid var(--navy-text);
  border-radius: 3px;
  box-shadow: 0 10px 30px rgba(11,46,79,.12);
  transition: transform .25s, box-shadow .25s;
}
#tools .tool-card--image:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 50px rgba(11,46,79,.24);
}
#tools .tool-card--image img {
  max-width: none;
  margin: 0;
  border: 1px solid rgba(11,46,79,.3);
  border-radius: 2px;
  box-shadow: 0 6px 16px rgba(11,46,79,.18);
}
@media (min-width: 768px) {
  #tools .tool-card--image { padding: 14px; }
}

/* 画像を台紙いっぱいに均等配置(上下左右の余白をそろえる)(2026-09-18 発注者指示) */
#tools .tool-card--image {
  align-self: start;
  justify-content: flex-start;
}
#tools .tool-card--image img {
  width: 100%;
  height: auto;
  margin: 0;
  display: block;
}

/* ニッケルチタンファイルのカードを②と同じ高さにそろえる(2026-09-18 発注者指示)
   画像は変えず、台紙の中で天地中央に置く */
#tools .tool-card--image {
  align-self: stretch;
  justify-content: center;
}
#tools .tool-card--image img { margin: auto 0; }

/* =========================================================
   器具と材料カードの「保険診療 / 自費診療」を行で分けて見やすく
   (2026-09-18 発注者指示)。4枚とも保険→自費の順に統一。
   ========================================================= */
#tools .tool-card .tool-card__vs {
  display: grid;
  gap: 8px;
  padding: 12px 13px;
  font-size: 12.5px;
  line-height: 1.7;
}
#tools .tool-card .tool-card__vs > span {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 9px;
  align-items: start;
  color: var(--navy-body);
}
#tools .tool-card .tool-card__vs > span + span {
  padding-top: 8px;
  border-top: 1px solid rgba(11,46,79,.12);
}
#tools .tool-card .tool-card__vs b {
  display: block;
  padding: 3px 0;
  border-radius: 3px;
  background: rgba(11,46,79,.08);
  color: var(--navy-text);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-align: center;
  white-space: nowrap;
}
/* 自費診療のラベルは水色で区別 */
#tools .tool-card .tool-card__vs > span:last-child b {
  background: var(--sky-bright);
  color: var(--navy-text);
}
@media (min-width: 768px) {
  #tools .tool-card .tool-card__vs { font-size: 13px; padding: 13px 14px; }
  #tools .tool-card .tool-card__vs > span { grid-template-columns: 78px 1fr; }
}

/* =========================================================
   根管治療の流れ ― 4つの工程(文字はHTMLの明朝体テキスト)
   (2026-09-18 発注者指示。画像内の文字をやめ、拡大してもぼやけず
    検索・読み上げにも対応できる形にした)
   ========================================================= */
.steps4 {
  margin: var(--space-3) 0 var(--space-4);
  padding: 22px 18px 18px;
  background: linear-gradient(180deg, #F3FAFE 0%, #DFF0FA 100%);
  border: 1px solid rgba(11,46,79,.18);
  border-radius: 4px;
  box-shadow: 0 10px 30px rgba(11,46,79,.1);
}
.steps4__en {
  margin: 0 0 4px;
  color: var(--sky-deep, #0F6C8C);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .22em;
}
.steps4__title {
  margin: 0 0 18px;
  color: var(--navy-text);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .04em;
}
.steps4__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.steps4__list li {
  position: relative;
  padding: 8px 8px 12px;
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(11,46,79,.12);
  border-radius: 3px;
}
.steps4__list img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
}
.steps4__no {
  display: block;
  margin: 10px 0 2px;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--sky-bright, #82DCFD);
  width: 28px;
  color: var(--sky-deep, #0F6C8C);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
}
.steps4__label {
  display: block;
  color: var(--navy-text);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .02em;
}
.steps4 figcaption {
  margin-top: 14px;
  padding-left: 11px;
  border-left: 3px solid var(--sky-bright, #82DCFD);
  color: var(--navy-sub, #4A6480);
  font-size: 12px;
}
@media (min-width: 768px) {
  .steps4 { padding: 26px 24px 22px; }
  .steps4__title { font-size: 23px; margin-bottom: 20px; }
  .steps4__list { grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .steps4__label { font-size: 16px; }
}

/* 4カードの「保険診療/自費診療」の囲みを、カード下端に揃える(2026-09-18 発注者指示) */
#tools .tool-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
#tools .tool-card .tool-card__vs { margin-top: auto; }

/* 4枚の「保険診療/自費診療」の囲みの高さをそろえ、上端も一致させる(2026-09-18) */
@media (min-width: 768px) {
  #tools .tool-card .tool-card__vs { min-height: 120px; }
}
@media (min-width: 768px) and (max-width: 1099px) {
  #tools .tool-card .tool-card__vs { min-height: 138px; }
}

/* =========================================================
   「保険診療 / 自費診療」をもっと見やすく
   (2026-09-18 発注者指示)。文字を大きくし、2行それぞれを
   独立した枠(白=保険 / 水色=自費)にして目立たせる。
   ========================================================= */
#tools .tool-card .tool-card__vs {
  gap: 8px;
  padding: 13px 12px;
  font-size: 13.5px;
  line-height: 1.7;
}
#tools .tool-card .tool-card__vs > span,
#tools .tool-card .tool-card__vs > span + span {
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 10px;
  align-items: center;
  padding: 9px 11px;
  background: #fff;
  border: 1px solid rgba(11,46,79,.16);
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(11,46,79,.06);
  color: var(--navy-text);
  font-weight: 500;
}
/* 自費診療の行は水色で強調 */
#tools .tool-card .tool-card__vs > span:last-child,
#tools .tool-card .tool-card__vs > span + span:last-child {
  background: #EAF7FE;
  border-color: rgba(38,145,184,.5);
}
/* ラベルは丸みのあるバッジに */
#tools .tool-card .tool-card__vs b {
  display: block;
  padding: 5px 0;
  border: 1px solid rgba(11,46,79,.16);
  border-radius: 999px;
  background: #EDF2F7;
  color: var(--navy-text);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-align: center;
  white-space: nowrap;
}
#tools .tool-card .tool-card__vs > span:last-child b {
  background: var(--sky-bright);
  border-color: rgba(38,145,184,.6);
  color: var(--navy-text);
}

@media (min-width: 768px) {
  #tools .tool-card .tool-card__vs { font-size: 14.5px; padding: 14px 13px; gap: 9px; }
  #tools .tool-card .tool-card__vs > span,
  #tools .tool-card .tool-card__vs > span + span {
    grid-template-columns: 88px 1fr;
    padding: 10px 12px;
  }
  #tools .tool-card .tool-card__vs b { font-size: 13px; padding: 5px 0; }
}

/* 文字を大きくしたぶん、4枚の囲みの高さ(上端そろえ)を測り直した(2026-09-18) */
@media (min-width: 768px) {
  #tools .tool-card .tool-card__vs { min-height: 166px; }
}
@media (min-width: 768px) and (max-width: 1099px) {
  #tools .tool-card .tool-card__vs { min-height: 182px; }
}
@media (min-width: 768px) and (max-width: 869px) {
  #tools .tool-card .tool-card__vs { min-height: 206px; }
}
@media (min-width: 768px) and (max-width: 799px) {
  #tools .tool-card .tool-card__vs { min-height: 231px; }
}

/* =========================================================
   「当院の根管治療」の導入: カウンセリング写真 + 導入文を横並びに
   (2026-09-18 発注者提供画像を配置)。スマホは写真が上・文が下。
   ========================================================= */
.treat-intro {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.treat-intro__fig {
  margin: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(11,46,79,.16);
  border-radius: 4px;
  box-shadow: 0 14px 34px rgba(11,46,79,.16);
}
.treat-intro__fig img {
  display: block;
  width: 100%;
  /* height:100% は下の860px以上(figureが縦並びのflexになる場合)だけで使う。
     860px未満で height:100% にすると、figureの高さが画像だけで決まり、
     下のキャプションがはみ出して overflow:hidden に切られる(2026-09-19 修正)。 */
  height: auto;
  object-fit: cover;
  object-position: center 45%;
}
.treat-intro__fig figcaption {
  padding: 9px 14px;
  border-top: 1px solid #E4F2F9;
  border-left: 3px solid var(--sky-bright, #82DCFD);
  background: var(--sky-paler, #F6FCFE);
  color: var(--navy-sub, #4A6480);
  font-size: 12px;
  letter-spacing: .06em;
}
.treat-intro .lab-note { margin: 0; }

@media (min-width: 860px) {
  .treat-intro {
    grid-template-columns: 1.08fr 1fr;
    align-items: stretch;
    gap: var(--space-3);
  }
  .treat-intro__fig { display: flex; flex-direction: column; }
  .treat-intro__fig img { flex: 1 1 auto; min-height: 0; height: 100%; }
  .treat-intro .lab-note {
    align-self: stretch;
    display: flex;
    align-items: center;
    font-size: 16px;
    line-height: 2.05;
  }
}

/* 保険診療/自費診療の枠を、4枚とも同じ大きさにそろえる(2026-09-18 発注者指示)。
   2行を等分(1fr 1fr)にして、文字数が違っても枠の高さが変わらないようにする。 */
#tools .tool-card .tool-card__vs { grid-template-rows: 1fr 1fr; }
#tools .tool-card .tool-card__vs > span,
#tools .tool-card .tool-card__vs > span + span { align-content: center; }

/* 2行になるときの改行位置を、意味の切れ目(文節)でそろえる(2026-09-18 発注者指示)。
   HTML側の <wbr> を入れた位置でだけ改行し、どうしても収まらないときだけ途中で折り返す。 */
#tools .tool-card .tool-card__vs > span {
  word-break: keep-all;
  overflow-wrap: anywhere;
  line-break: strict;
}

/* スマホでは「4つの段階」の丸枠が小さくなりすぎるため、
   拡大版を画像の下に追加表示する(PCでは非表示)。2026-09-19 */
.lp-figure__zoom-sp {
  display: block;
  width: 100%;
  height: auto;
  background: #fff;
  border-top: 1px solid #E4F2F9;
}
@media (min-width: 768px) {
  .lp-figure__zoom-sp { display: none; }
}

/* 上のルールは .lp-figure img (詳細度が上)に負けるため、同じ強さで指定し直す */
@media (min-width: 768px) {
  .lp-figure img.lp-figure__zoom-sp { display: none; }
}

/* =========================================================
   保険診療と自費診療(精密根管治療)の違い ― 比較レイアウト
   (2026-09-19 発注者提供「修正３.png」のデザインに合わせて作成)
   表(table)ではなく、左に項目・中央に保険・右に自費の3列構成。
   スマホでは項目ごとに縦積みにする。
   ========================================================= */
.cmp {
  display: grid;
  gap: 0;
  margin-top: var(--space-2);
}
.cmp__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.cmp__row + .cmp__row { margin-top: 12px; }

/* ---------- 左: 項目 ---------- */
.cmp__label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 2px 2px 0;
  font-family: var(--mincho);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .04em;
  color: var(--navy-text);
}
.cmp__label br { display: none; }
.cmp__ico {
  flex: none;
  width: 34px;
  height: 34px;
  padding: 6px;
  border: 1px solid rgba(38,145,184,.4);
  border-radius: 50%;
  background: var(--sky-paler, #F6FCFE);
  fill: none;
  stroke: var(--sky-deep, #2691B8);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cmp__label--head { display: none; }

/* ---------- 中央・右: 内容 ---------- */
.cmp__cell {
  position: relative;
  padding: 13px 15px;
  border: 1px solid rgba(11,46,79,.14);
  border-radius: 4px;
  font-family: var(--mincho);
  font-size: 15px;
  line-height: 1.7;
  color: var(--navy-body);
}
.cmp__cell b {
  display: block;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--navy-text);
  letter-spacing: .02em;
}
.cmp__cell span {
  display: block;
  margin-top: 3px;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--navy-sub);
}
.cmp__cell--ins { background: #fff; border-left: 4px solid var(--navy-text); }
.cmp__cell--pri { background: #EAF8FE; border-left: 4px solid var(--sky-bright, #82DCFD); }

/* 見出し(標準/精密のバッジ付き) */
.cmp__cell--head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 15px;
  font-size: 16px;
  font-weight: 700;
  color: var(--navy-text);
  letter-spacing: .04em;
}
.cmp__cell--head.cmp__cell--ins { background: var(--navy-text); border-color: var(--navy-text); color: #fff; }
.cmp__cell--head.cmp__cell--pri { background: var(--sky-bright, #82DCFD); border-color: var(--sky-bright, #82DCFD); color: var(--navy-text); }
.cmp__tag {
  flex: none;
  margin: 0;
  padding: 4px 13px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.55);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .12em;
}
.cmp__tag--pri { background: var(--navy-text); border-color: var(--navy-text); color: #fff; }

/* 費用の内訳 */
.cmp__price { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 4px; }
.cmp__price li {
  display: grid;
  grid-template-columns: 62px 1fr;
  align-items: baseline;
  gap: 8px;
}
.cmp__price li span { margin: 0; font-size: 13.5px; color: var(--navy-sub); }
.cmp__price li b { font-size: 16px; }
.cmp__tax { font-size: 12.5px; }
.cmp__cell .cmp__tax + b { margin-top: 8px; }
.cmp__cell a { color: var(--sky-deep, #2691B8); }

/* ---------- スマホ: 保険/自費の見出しを各カードに付ける ---------- */
@media (max-width: 767px) {
  .cmp__row--head .cmp__cell { display: none; }
  .cmp__cell::before {
    display: inline-block;
    margin-bottom: 7px;
    padding: 3px 11px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .08em;
  }
  .cmp__cell--ins::before { content: "保険診療"; background: var(--navy-text); color: #fff; }
  .cmp__cell--pri::before { content: "自費診療"; background: var(--sky-bright, #82DCFD); color: var(--navy-text); }
}

/* ---------- PC: 3列に並べて行をそろえる ---------- */
@media (min-width: 768px) {
  .cmp__row {
    grid-template-columns: 185px 1fr 1fr;
    gap: 14px;
    align-items: stretch;
  }
  .cmp__row + .cmp__row { margin-top: 10px; }
  .cmp__label {
    justify-content: flex-start;
    padding: 13px 8px 13px 0;
    font-size: 15.5px;
  }
  .cmp__label br { display: inline; }
  .cmp__label--head {
    display: flex;
    justify-content: center;
    padding: 13px 0;
    color: var(--navy-sub);
    font-size: 14px;
    letter-spacing: .18em;
  }
  .cmp__cell { display: flex; flex-direction: column; justify-content: center; padding: 15px 18px; }
  .cmp__cell--head { flex-direction: row; }
}
@media (min-width: 1000px) {
  .cmp__row { grid-template-columns: 210px 1fr 1fr; gap: 16px; }
  .cmp__cell { font-size: 15.5px; }
  .cmp__cell b { font-size: 16.5px; }
  .cmp__cell--head { font-size: 17px; }
}

/* =========================================================
   比較レイアウトの調整(2026-09-19 発注者指示)
   ①アイコンを修正３の線画に忠実化(紺の線・塗りなし)
   ②「標準」「精密」のバッジを読みやすい配色に
   ③全体の縦幅を詰めて、1画面で見渡せるようにする
   ========================================================= */

/* ① アイコン: 紺の線画 */
.cmp__ico {
  stroke: var(--navy-text);
  stroke-width: 1.4;
  border-color: rgba(11,46,79,.18);
}

/* ② バッジ: 標準=白地に紺文字 / 精密=紺地に白文字 */
.cmp__tag {
  padding: 3px 12px;
  background: #fff;
  border: none;
  color: var(--navy-text);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
}
.cmp__tag--pri { background: var(--navy-text); color: #fff; }

/* ③ 縦幅の圧縮 */
.cmp__row + .cmp__row { margin-top: 8px; }
.cmp__cell { padding: 10px 13px; font-size: 14px; line-height: 1.55; }
.cmp__cell b { font-size: 15px; }
.cmp__cell span { margin-top: 2px; font-size: 12.5px; line-height: 1.6; }
.cmp__cell--head { padding: 9px 13px; font-size: 15px; }
.cmp__label { font-size: 14.5px; gap: 9px; }
.cmp__ico { width: 30px; height: 30px; padding: 5px; }

/* 費用の内訳は横並びにして行数を減らす */
.cmp__price { display: flex; flex-wrap: wrap; gap: 2px 16px; margin-top: 2px; }
.cmp__price li { display: flex; align-items: baseline; gap: 6px; }
.cmp__price li span { margin-top: 0; font-size: 12.5px; }
.cmp__price li b { font-size: 15px; }
.cmp__warranty { margin-top: 5px; }

@media (min-width: 768px) {
  .cmp__row + .cmp__row { margin-top: 7px; }
  .cmp__label { padding: 9px 8px 9px 0; font-size: 14.5px; }
  .cmp__label--head { padding: 9px 0; font-size: 13px; }
  .cmp__cell { padding: 10px 15px; }
}
@media (min-width: 1000px) {
  .cmp__cell { font-size: 14.5px; }
  .cmp__cell b { font-size: 15.5px; }
  .cmp__cell--head { font-size: 16px; }
}

/* 見出し・本文の改行位置を意味の切れ目にそろえる(2026-09-19) */
.cmp__cell b, .cmp__title { word-break: keep-all; overflow-wrap: anywhere; }
.cmp__title { display: block; margin: 0; }
.cmp__cell--head .cmp__title { color: inherit; font: inherit; letter-spacing: inherit; }
@media (min-width: 768px) and (max-width: 999px) {
  .cmp__cell--head { font-size: 14px; }
  .cmp__tag { padding: 3px 10px; font-size: 12px; }
}

/* 「精密」バッジをさらに読みやすく + 項目アイコンを大きく(2026-09-19 発注者指示) */
.cmp__tag {
  padding: 4px 13px;
  font-size: 13.5px;
  letter-spacing: .1em;
}
.cmp__tag--pri {
  background: #fff;
  border: 1.5px solid var(--navy-text);
  color: var(--navy-text);
}
.cmp__ico { width: 36px; height: 36px; padding: 6px; stroke-width: 1.5; }
@media (min-width: 768px) {
  .cmp__ico { width: 40px; height: 40px; padding: 7px; }
  .cmp__label { gap: 11px; }
}
@media (min-width: 768px) and (max-width: 999px) {
  .cmp__tag { padding: 4px 11px; font-size: 12.5px; }
}

/* アイコンを修正３.pngの線画そのままに置き換えたため、塗りで描画する(2026-09-19) */
.cmp__ico { fill: var(--navy-text); stroke: none; fill-rule: evenodd; }

/* 当院の特長カードが5枚になったため、下段を中央そろえにする(2026-09-19 発注者指示) */
@media (min-width: 768px) {
  #treatment .features__grid { grid-template-columns: repeat(6, 1fr); }
  #treatment .features__grid > .feature-card { grid-column: span 2; }
  #treatment .features__grid > .feature-card:nth-child(4) { grid-column: 2 / span 2; }
}
@media (min-width: 560px) and (max-width: 767px) {
  #treatment .features__grid { grid-template-columns: repeat(4, 1fr); }
  #treatment .features__grid > .feature-card { grid-column: span 2; }
  #treatment .features__grid > .feature-card:nth-child(5) { grid-column: 2 / span 2; }
}

/* =========================================================
   「抜歯と診断された歯を残したい方」の外科的歯内療法の図
   (2026-09-19 発注者提供「修正５.png」を忠実に再現)
   イラストは元画像から切り出し、文字はHTMLの明朝体で作り直す
   (拡大してもぼやけず、検索・音声読み上げにも対応するため)
   ========================================================= */
.save-tooth {
  margin: var(--space-3) 0;
  padding: 20px 14px 16px;
  background:
    radial-gradient(120% 70% at 50% 0%, #FFFFFF 0%, rgba(255,255,255,0) 60%),
    linear-gradient(180deg, #F2FAFE 0%, #DFF0FA 100%);
  border: 1px solid rgba(11,46,79,.16);
  border-radius: 6px;
  box-shadow: 0 12px 32px rgba(11,46,79,.12);
  text-align: center;
}
.save-tooth__en {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 0 6px;
  color: var(--navy-sub);
  font-family: var(--mincho);
  font-size: 11.5px;
  letter-spacing: .3em;
  text-indent: .3em;
}
.save-tooth__en::before,
.save-tooth__en::after {
  content: "";
  width: clamp(26px, 8vw, 92px);
  height: 1px;
  background: rgba(11,46,79,.3);
}
.save-tooth__title {
  margin: 0 0 6px;
  font-family: var(--mincho);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: .03em;
  color: var(--navy-text);
}
.save-tooth__lead {
  margin: 0;
  font-family: var(--mincho);
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--navy-body);
}
.save-tooth__hero {
  display: block;
  width: 100%;
  height: auto;
  margin: 12px 0 4px;
  border-radius: 4px;
}
.save-tooth__list {
  list-style: none;
  display: grid;
  gap: 12px;
  margin: 12px 0 0;
  padding: 0;
}
.save-tooth__list > li {
  padding: 12px 12px 14px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(11,46,79,.14);
  border-radius: 5px;
  box-shadow: 0 6px 18px rgba(11,46,79,.08);
}
.save-tooth__list h4 {
  margin: 0 0 9px;
  font-family: var(--mincho);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--navy-text);
}
.save-tooth__list img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}
.save-tooth__cap {
  margin: 10px 0 0;
  font-family: var(--mincho);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--navy-text);
}
.save-tooth__desc {
  margin: 5px 0 0;
  font-family: var(--mincho);
  font-size: 12.5px;
  line-height: 1.8;
  text-align: left;
  color: var(--navy-sub);
}
.save-tooth > figcaption {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(11,46,79,.14);
  font-family: var(--mincho);
  font-size: 12px;
  line-height: 1.8;
  color: var(--navy-sub);
}

@media (min-width: 768px) {
  .save-tooth { padding: 26px 22px 20px; }
  .save-tooth__en { font-size: 12.5px; margin-bottom: 8px; }
  .save-tooth__title { font-size: 27px; }
  .save-tooth__lead { font-size: 15px; }
  .save-tooth__hero { margin: 16px 0 6px; }
  .save-tooth__list { grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 16px; }
  .save-tooth__list > li { padding: 14px 14px 16px; }
  .save-tooth__list h4 { font-size: 18px; }
  .save-tooth__cap { font-size: 14px; }
  .save-tooth__desc { font-size: 13px; }
  .save-tooth > figcaption { font-size: 12.5px; }
}

/* キャプションの改行位置を意味の切れ目にそろえる(2026-09-19) */
.save-tooth__cap { word-break: keep-all; overflow-wrap: anywhere; }

/* 修正５の「CT画像 → 3つの方法」をつなぐ水色の線を再現(2026-09-19 発注者指示) */
.save-tooth__flow {
  position: relative;
  height: 20px;
  margin-top: 2px;
}
.save-tooth__flow i {
  position: absolute;
  display: block;
  border: 0 solid #5FC3EA;
}
.save-tooth__stem {
  left: 50%;
  top: 0;
  width: 2px;
  height: 10px;
  margin-left: -1px;
  background: #5FC3EA;
}
.save-tooth__branch,
.save-tooth__mid { display: none; }

@media (min-width: 768px) {
  .save-tooth__flow { height: 30px; margin-top: 4px; }
  .save-tooth__stem { height: 12px; }
  .save-tooth__branch {
    display: block;
    top: 10px;
    left: calc((100% - 32px) / 6);
    right: calc((100% - 32px) / 6);
    height: 20px;
    border-top-width: 2px;
    border-left-width: 2px;
    border-right-width: 2px;
    border-radius: 10px 10px 0 0;
  }
  .save-tooth__mid {
    display: block;
    left: 50%;
    top: 10px;
    width: 2px;
    height: 20px;
    margin-left: -1px;
    background: #5FC3EA;
  }
}

/* .target-block ul,ol / .save-tooth__flow i に負けていたため、詳細度を上げて指定し直す(2026-09-19) */
.save-tooth .save-tooth__list { padding: 0; gap: 12px; list-style: none; }
.save-tooth .save-tooth__flow .save-tooth__stem { background: #5FC3EA; }
@media (min-width: 768px) {
  .save-tooth .save-tooth__list { gap: 16px; }
  .save-tooth .save-tooth__flow .save-tooth__branch {
    border-top: 2px solid #5FC3EA;
    border-left: 2px solid #5FC3EA;
    border-right: 2px solid #5FC3EA;
    border-bottom: 0;
  }
  .save-tooth .save-tooth__flow .save-tooth__mid { background: #5FC3EA; }
}

/* 3つの術式は元資料のカード画像をそのまま使う(2026-09-19 発注者指示)。
   枠・タイトル・キャプションは画像に含まれるため、HTML側の枠は外し、
   見出しは読み上げ・検索用に残す(画面には出さない)。 */
.save-tooth .save-tooth__list > li {
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
}
.save-tooth .save-tooth__list > li img {
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(11,46,79,.10);
}
.save-tooth__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.save-tooth .save-tooth__desc { margin-top: 9px; padding: 0 2px; }

/* 図の見出し「抜歯と診断された歯を」をさらに強調(2026-09-19 発注者指示) */
.save-tooth__title { font-size: 22px; line-height: 1.5; }
.save-tooth .save-tooth__hl {
  font-weight: 700;
  background: linear-gradient(transparent 64%, rgba(130,220,253,.62) 64%);
  padding: 0 2px;
}
.save-tooth__brsp { display: inline; }
@media (min-width: 768px) {
  .save-tooth__title { font-size: 32px; letter-spacing: .04em; }
  .save-tooth__brsp { display: none; }
}

/* #treatment .target-block p (詳細度が上) に負けて文字サイズが15px固定に
   なっていたため、同じ強さで指定し直す(2026-09-19) */
#treatment .save-tooth .save-tooth__en {
  font-size: 11.5px;
  line-height: 1.6;
  letter-spacing: .3em;
}
#treatment .save-tooth .save-tooth__title {
  font-size: 22px;
  line-height: 1.5;
  font-weight: 700;
}
#treatment .save-tooth .save-tooth__lead {
  font-size: 13.5px;
  line-height: 1.75;
}
#treatment .save-tooth .save-tooth__desc {
  font-size: 12.5px;
  line-height: 1.8;
}
@media (min-width: 768px) {
  #treatment .save-tooth .save-tooth__en { font-size: 12.5px; }
  #treatment .save-tooth .save-tooth__title { font-size: 32px; letter-spacing: .04em; }
  #treatment .save-tooth .save-tooth__lead { font-size: 15.5px; }
  #treatment .save-tooth .save-tooth__desc { font-size: 13px; }
}

/* =========================================================
   院長・歯科技工士のご紹介 ― プロフィールカード
   (2026-09-19 発注者指示「もう少しスタイリッシュに」)
   白いカード + 水色の細いアクセント + 明朝体。
   写真は紺の枠を少しずらして重ねる。
   ========================================================= */
#staff .profile-list { display: grid; gap: var(--space-3); margin-top: var(--space-3); }

#staff .profile {
  position: relative;
  display: grid;
  gap: var(--space-3);
  padding: 22px 18px 20px;
  background: #fff;
  border: 1px solid rgba(11,46,79,.16);
  border-radius: 4px;
  box-shadow: 0 12px 32px rgba(11,46,79,.10);
  overflow: hidden;
}
#staff .profile::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--navy-text) 0%, var(--sky-bright) 55%, rgba(130,220,253,0) 100%);
}

/* ---------- 写真 ---------- */
#staff .profile__media { position: relative; }
#staff .profile__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
}
#staff .profile__photo {
  position: relative;
  z-index: 1;
  box-shadow: 0 10px 26px rgba(11,46,79,.18);
}
#staff .profile__media--two { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
#staff .profile__media--two figure { margin: 0; }
#staff .profile__media--two figcaption {
  margin-top: 6px;
  font-family: var(--mincho);
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--navy-sub);
  letter-spacing: .02em;
}

/* ---------- 本文 ---------- */
#staff .profile__role {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 6px;
  font-family: var(--mincho);
  font-size: 11.5px;
  letter-spacing: .26em;
  color: var(--sky-deep, #2691B8);
}
#staff .profile__role::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, rgba(38,145,184,.45), rgba(38,145,184,0));
}
#staff .profile__name {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  font-family: var(--mincho);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .04em;
  color: var(--navy-text);
}
#staff .profile__kana {
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: .12em;
  color: var(--navy-sub);
}
#staff .profile__tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 12px 0 0;
  padding: 0;
}
#staff .profile__tags li {
  padding: 4px 11px;
  border: 1px solid rgba(38,145,184,.45);
  border-radius: 999px;
  background: var(--sky-paler, #F6FCFE);
  font-family: var(--mincho);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: .03em;
  color: var(--navy-text);
}
#staff .profile__text {
  margin: 14px 0 0;
  font-size: 14.5px;
  line-height: 1.95;
  color: var(--navy-body);
}
#staff .profile__quote {
  position: relative;
  margin: 14px 0 0;
  padding: 14px 16px 14px 40px;
  background: linear-gradient(180deg, #F7FCFE 0%, #EDF7FD 100%);
  border-left: 3px solid var(--sky-bright);
  border-radius: 0 4px 4px 0;
}
#staff .profile__quote::before {
  content: "“";
  position: absolute;
  left: 12px;
  top: 2px;
  font-family: var(--mincho);
  font-size: 40px;
  line-height: 1;
  color: rgba(38,145,184,.45);
}
#staff .profile__quote p {
  margin: 0;
  font-family: var(--mincho);
  font-size: 14.5px;
  line-height: 1.95;
  color: var(--navy-text);
}

@media (min-width: 768px) {
  #staff .profile-list { gap: var(--space-4); }
  #staff .profile {
    grid-template-columns: 250px 1fr;
    align-items: start;
    gap: 28px;
    padding: 30px 30px 28px;
  }
  #staff .profile--tech { grid-template-columns: 1fr 330px; }
  #staff .profile__name { font-size: 25px; }
  #staff .profile__text { font-size: 15px; }
  #staff .profile__quote p { font-size: 15.5px; }
  #staff .profile__media--two { grid-template-columns: 1fr; gap: 12px; }
}
@media (min-width: 1000px) {
  #staff .profile { grid-template-columns: 280px 1fr; gap: 34px; }
  #staff .profile--tech { grid-template-columns: 1fr 380px; }
  #staff .profile__media--two { grid-template-columns: repeat(2, 1fr); }
}

/* 技工士カード: 写真2枚は常に横並びにして高さを抑える(2026-09-19) */
@media (min-width: 768px) {
  #staff .profile--tech { grid-template-columns: 1fr 360px; }
  #staff .profile__media--two { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}
@media (min-width: 1000px) {
  #staff .profile--tech { grid-template-columns: 1fr 400px; }
  #staff .profile__media--two { gap: 12px; }
}

/* 院長の経歴を箇条書き(年表)に(2026-09-19 発注者指示) */
#staff .profile__label {
  margin: 16px 0 8px;
  padding-left: 10px;
  border-left: 3px solid var(--sky-bright);
  font-family: var(--mincho);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--navy-text);
}
#staff .profile__career {
  list-style: none;
  margin: 0;
  padding: 0 0 0 16px;
  border-left: 1px solid rgba(38,145,184,.35);
  display: grid;
  gap: 9px;
}
#staff .profile__career li {
  position: relative;
  font-family: var(--mincho);
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--navy-body);
}
#staff .profile__career li::before {
  content: "";
  position: absolute;
  left: -20px;
  top: .62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--sky-deep, #2691B8);
}
#staff .profile__career li b {
  display: inline-block;
  min-width: 4.6em;
  margin-right: 6px;
  color: var(--navy-text);
  font-weight: 700;
  letter-spacing: .04em;
}
#staff .profile__career li span {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--navy-sub);
}
@media (min-width: 768px) {
  #staff .profile__career li { font-size: 15px; }
  #staff .profile__career li span { font-size: 13px; }
}

/* スマホでは院長写真が縦に長くなりすぎるため幅を抑えて中央寄せ(2026-09-19) */
@media (max-width: 767px) {
  #staff .profile__photo { max-width: 230px; margin: 0 auto; }
}

/* 医院のご案内の表が、スマホで画面右に6pxはみ出す不具合の修正(2026-09-19)
   原因: dl の各行はグリッドの子で min-width:auto のため、中の診療時間の表の
   最小幅(共用CSS .table-scroll table の min-width:320px)に押し広げられていた。
   対応: 行と dt/dd が縮めるように min-width:0 にし、表も画面幅に合わせて縮むようにする。
   ※ 共用の css/dentures.css は他のLP(セラミック・睡眠時無呼吸など)も使うため触らない。 */
@media (max-width: 767px) {
  .clinic-info dl,
  .clinic-info dl > div,
  .clinic-info dl > div > dt,
  .clinic-info dl > div > dd { min-width: 0; }
  .clinic-info .table-scroll table { min-width: 0; }
}

/* =========================================================
   「根管治療(歯の神経・根の治療)とは」下部の「治療の工程」パネルを、
   紺ベースからトップと同じ水色ベースに変更(2026-09-19 発注者指示)
   ========================================================= */
#about ol.target-block {
  background:
    radial-gradient(90% 120% at 88% 0%, rgba(255,255,255,.75) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(158deg, #E4F6FE 0%, #A8E4FA 58%, #82DCFD 100%);
  border: 1px solid rgba(38,145,184,.45);
  box-shadow: 0 16px 38px rgba(11,46,79,.16);
}
#about ol.target-block::before,
#about ol.target-block::after { border-color: rgba(11,46,79,.55); }
#about ol.target-block li {
  color: var(--navy-text);
  border-top-color: rgba(11,46,79,.16);
}
#about ol.target-block li::before {
  color: var(--navy-text);
  border-bottom-color: rgba(11,46,79,.45);
}

/* 直後の注意書きも水色系にそろえる */
#about .note {
  background: #fff;
  border-left: 3px solid var(--sky-bright);
  color: var(--navy-sub);
}

/* =========================================================
   治療の工程: 4つの工程の画像に「治療の工程」の文章を添える
   (2026-09-19 発注者指示。文言は変更しない)。05は画像を準備中。
   ========================================================= */
#about .steps4 { margin-top: 10px; }
#about .steps4__desc {
  margin: 7px 0 0;
  font-family: var(--mincho);
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--navy-body);
  text-align: left;
}

/* 05(画像待ち)の行 */
#about .steps4__next {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 12px;
  align-items: center;
  margin-top: 14px;
  padding: 12px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(11,46,79,.14);
  border-radius: 4px;
}
#about .steps4__ph {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 420 / 602;
  border: 1px dashed rgba(38,145,184,.6);
  border-radius: 3px;
  background: var(--sky-paler, #F6FCFE);
  color: var(--navy-sub);
  font-family: var(--mincho);
  font-size: 11px;
  letter-spacing: .04em;
  text-align: center;
}
#about .steps4__next .steps4__no,
#about .steps4__next .steps4__label { display: block; }

@media (min-width: 768px) {
  #about .steps4__desc { font-size: 13px; }
  #about .steps4__next { grid-template-columns: 120px 1fr; gap: 16px; padding: 14px; }
}

/* 4つの工程 → 5つの工程(05を同じ並びに入れる。2026-09-19 発注者指示) */
#about .steps4__list { grid-template-columns: repeat(2, 1fr); }
#about .steps4__pending .steps4__ph {
  width: 100%;
  aspect-ratio: 420 / 602;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed rgba(38,145,184,.6);
  border-radius: 3px;
  background: var(--sky-paler, #F6FCFE);
  color: var(--navy-sub);
  font-family: var(--mincho);
  font-size: 11px;
  letter-spacing: .04em;
}
@media (min-width: 768px) {
  #about .steps4__list { grid-template-columns: repeat(5, 1fr); gap: 12px; }
  #about .steps4__desc { font-size: 12.5px; }
}
@media (min-width: 1100px) {
  #about .steps4__list { gap: 16px; }
  #about .steps4__desc { font-size: 13px; }
}

/* =========================================================
   通院中断への注意喚起を目立たせる(2026-09-19 発注者指示)
   文言はそのまま。「※」をアイコンに置き換えて枠を強調。
   ========================================================= */
#about .caution {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 13px;
  align-items: start;
  margin-top: var(--space-3);
  padding: 16px 16px 16px 14px;
  background: #fff;
  border: 1px solid var(--navy-text);
  border-left: 6px solid var(--navy-text);
  border-radius: 0 4px 4px 0;
  box-shadow: 0 10px 26px rgba(11,46,79,.14);
}
#about .caution__icon svg {
  display: block;
  width: 40px;
  height: 40px;
  fill: var(--sky-bright, #82DCFD);
  stroke: var(--navy-text);
  stroke-width: 1.4;
  stroke-linejoin: round;
}
#about .caution__icon .caution__bar { stroke: var(--navy-text); stroke-width: 2; stroke-linecap: round; fill: none; }
#about .caution__icon .caution__dot { fill: var(--navy-text); stroke: none; }
#about .caution__lead {
  margin: 0;
  font-family: var(--mincho);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .02em;
  color: var(--navy-text);
  background: linear-gradient(transparent 62%, rgba(130,220,253,.6) 62%);
  display: inline;
  padding: 0 2px;
}
#about .caution__text {
  margin: 8px 0 0;
  font-family: var(--mincho);
  font-size: 14px;
  line-height: 1.85;
  color: var(--navy-body);
}
@media (min-width: 768px) {
  #about .caution { grid-template-columns: 46px 1fr; gap: 16px; padding: 18px 20px 18px 16px; }
  #about .caution__icon svg { width: 46px; height: 46px; }
  #about .caution__lead { font-size: 18px; }
  #about .caution__text { font-size: 14.5px; }
}

/* =========================================================
   治療の流れ: 導入文の横に画像を置く(2026-09-19 発注者指示)
   スマホは文が上・画像が下。
   ========================================================= */
#flow .flow-intro { display: grid; gap: var(--space-2); margin-bottom: var(--space-3); }
#flow .flow-intro__text { margin: 0; }
#flow .flow-intro__fig { margin: 0; }

@media (min-width: 860px) {
  #flow .flow-intro {
    grid-template-columns: 1fr 1.05fr;
    align-items: center;
    gap: var(--space-3);
  }
  #flow .flow-intro__fig { max-width: none; }
}

/* =========================================================
   「保険診療と自費診療(精密根管治療)の違い」の見出しを目立たせる
   (2026-09-19 発注者指示。修正３.pngのタイトルに合わせた中央配置)
   ========================================================= */
#treatment .cmp-title {
  margin: var(--space-4) 0 0;
  padding: 0 0 14px;
  background: none;
  border: none;
  text-align: center;
  font-family: var(--mincho);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .04em;
  color: var(--navy-text);
}
#treatment .cmp-title::before,
#treatment .cmp-title::after { content: none; }
#treatment .cmp-title span,
#treatment .cmp-title b {
  font-weight: 700;
  color: var(--navy-text);
  background: linear-gradient(transparent 64%, rgba(130,220,253,.7) 64%);
  padding: 0 2px;
}
/* 見出しの下に短い水色の罫線 */
#treatment .cmp-title { position: relative; }
#treatment .cmp-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 84px;
  height: 2px;
  margin-left: -42px;
  background: linear-gradient(90deg, rgba(38,145,184,0), var(--sky-deep, #2691B8), rgba(38,145,184,0));
}
@media (min-width: 768px) {
  #treatment .cmp-title { font-size: 27px; padding-bottom: 16px; }
  #treatment .cmp-title::after { width: 110px; margin-left: -55px; }
}

/* 見出しの改行位置を意味の切れ目に(2026-09-19) */
#treatment .cmp-title { word-break: keep-all; overflow-wrap: anywhere; }

/* =========================================================
   対象別ブロック(初めて/再治療)の図を、文章の横に配置して
   左に寄った見た目を解消する(2026-09-19 発注者指示)
   ========================================================= */
#treatment .tb-intro { display: grid; gap: var(--space-2); margin-bottom: var(--space-2); }
#treatment .tb-intro__fig { margin: 0; }
#treatment .tb-intro__text { margin: 0; }

@media (min-width: 860px) {
  #treatment .tb-intro {
    grid-template-columns: 1.05fr 1fr;
    align-items: center;
    gap: var(--space-3);
  }
  #treatment .tb-intro__fig { max-width: none; }
}

/* =========================================================
   比較の見出しをさらに目立たせる(2026-09-19 発注者指示)
   水色の帯に紺の明朝体。上に英字の小見出し。
   ========================================================= */
#treatment .cmp-title {
  margin: var(--space-4) 0 var(--space-3);
  padding: 15px 18px 17px;
  background:
    radial-gradient(120% 140% at 50% -20%, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 62%),
    linear-gradient(90deg, #C3ECFD 0%, #82DCFD 50%, #C3ECFD 100%);
  border: 1px solid rgba(11,46,79,.24);
  border-radius: 4px;
  box-shadow: 0 12px 30px rgba(11,46,79,.16);
  color: var(--navy-text);
  font-size: 22px;
}
#treatment .cmp-title::after { content: none; }
#treatment .cmp-title__en {
  display: block;
  margin-bottom: 4px;
  font-family: var(--mincho);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .3em;
  text-indent: .3em;
  color: var(--navy-sub);
}
/* 水色の上では白いマーカーで抜く */
#treatment .cmp-title span,
#treatment .cmp-title b {
  background: linear-gradient(transparent 60%, rgba(255,255,255,.9) 60%);
  padding: 0 3px;
}
@media (min-width: 768px) {
  #treatment .cmp-title { padding: 18px 22px 20px; font-size: 28px; }
  #treatment .cmp-title__en { font-size: 12px; margin-bottom: 6px; }
}

/* =========================================================
   当院の特長5カードの見出し「安心できる5つの点」
   (2026-09-19 発注者指示)。比較の帯とは差をつけて、
   中央そろえの明朝体+水色の短い罫線にする。
   ========================================================= */
#treatment .feat-title {
  position: relative;
  margin: var(--space-4) 0 0;
  padding: 0 0 14px;
  background: none;
  border: none;
  text-align: center;
  font-family: var(--mincho);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .04em;
  color: var(--navy-text);
  word-break: keep-all;
  overflow-wrap: anywhere;
}
#treatment .feat-title::before { content: none; }
#treatment .feat-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 84px;
  height: 2px;
  margin-left: -42px;
  background: linear-gradient(90deg, rgba(38,145,184,0), var(--sky-deep, #2691B8), rgba(38,145,184,0));
}
#treatment .feat-title__en {
  display: block;
  margin-bottom: 5px;
  font-family: var(--mincho);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .24em;
  text-indent: .24em;
  color: var(--sky-deep, #2691B8);
}
#treatment .feat-title b {
  font-weight: 700;
  background: linear-gradient(transparent 64%, rgba(130,220,253,.7) 64%);
  padding: 0 3px;
}
#treatment .feat-title + .features__body { margin-top: 20px !important; }
@media (min-width: 768px) {
  #treatment .feat-title { font-size: 25px; padding-bottom: 16px; }
  #treatment .feat-title__en { font-size: 12px; }
  #treatment .feat-title::after { width: 110px; margin-left: -55px; }
}

/* =========================================================
   特長5カードと「保険診療と自費診療の違い」の帯が同系色で
   見分けにくかったため、カードを白地に変更(2026-09-19 発注者指示)
   ========================================================= */
#treatment .feature-card {
  background: #fff;
  border: 1px solid rgba(11,46,79,.18);
  border-top: 4px solid var(--sky-bright);
  box-shadow: 0 10px 26px rgba(11,46,79,.10);
}
#treatment .feature-card:hover {
  border-color: rgba(11,46,79,.3);
  border-top-color: var(--sky-deep, #2691B8);
  box-shadow: 0 20px 42px rgba(11,46,79,.18);
}
/* 比較の帯との間を少し広げて区切りを分かりやすく */
#treatment .features__body + .cmp-title { margin-top: 46px; }
@media (min-width: 768px) {
  #treatment .features__body + .cmp-title { margin-top: 58px; }
}

/* =========================================================
   ラバーダム・根管長測定器の写真2枚(2026-09-19 発注者提供画像)
   「このほか〜」の文章の下に横並びで置く。
   ========================================================= */
#tools .tool2 {
  list-style: none;
  display: grid;
  gap: 14px;
  margin: var(--space-2) 0 0;
  padding: 0;
}
#tools .tool2 > li {
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(11,46,79,.18);
  border-top: 4px solid var(--sky-bright);
  border-radius: 4px;
  box-shadow: 0 10px 26px rgba(11,46,79,.10);
}
#tools .tool2 img { display: block; width: 100%; height: auto; }
#tools .tool2__name {
  margin: 0;
  padding: 11px 15px 0;
  font-family: var(--mincho);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--navy-text);
}
#tools .tool2__desc {
  margin: 5px 0 0;
  padding: 0 15px 14px;
  font-family: var(--mincho);
  font-size: 13px;
  line-height: 1.85;
  color: var(--navy-body);
}
#tools .tool2 + .note { margin-top: 10px; }

@media (min-width: 768px) {
  #tools .tool2 { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  #tools .tool2__name { font-size: 17px; padding-top: 13px; }
  #tools .tool2__desc { font-size: 13.5px; padding-bottom: 16px; }
}

/* =========================================================
   リスク・副作用をスタイリッシュに(2026-09-19 発注者指示)
   ※掲載ルール上、折りたたまず全項目を表示したまま見せ方だけ変更。
   ========================================================= */
#risks .risk-band {
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
}
#risks .risk-band ul {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: var(--space-2) 0 0;
  padding: 0;
  counter-reset: risk;
  list-style: none;
}
#risks .risk-band li,
#risks .risk-band li + li {
  counter-increment: risk;
  position: relative;
  margin: 0;
  padding: 14px 16px 14px 50px;
  background: #fff;
  border: 1px solid rgba(11,46,79,.16);
  border-left: 3px solid var(--sky-bright);
  border-top: 1px solid rgba(11,46,79,.16);
  border-radius: 0 4px 4px 0;
  box-shadow: 0 6px 18px rgba(11,46,79,.07);
  font-family: var(--mincho);
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--navy-body);
  transition: box-shadow .2s, border-color .2s;
}
#risks .risk-band li:hover { border-color: rgba(11,46,79,.32); box-shadow: 0 12px 26px rgba(11,46,79,.13); }
#risks .risk-band li::before,
#risks .risk-band li + li::before {
  content: counter(risk, decimal-leading-zero);
  position: absolute;
  left: 14px;
  top: 15px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--navy-text);
  transform: none;
  color: #fff;
  font-family: var(--mincho);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .02em;
}

@media (min-width: 768px) {
  #risks .risk-band ul { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  #risks .risk-band li,
  #risks .risk-band li + li { padding: 15px 18px 15px 52px; font-size: 14px; }
}

/* ラバーダム・根管長測定器は上の4カードの補足なので小さく(2026-09-19 発注者指示) */
#tools .tool2 { gap: 10px; }
#tools .tool2 > li {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 12px;
  align-items: center;
  padding: 10px 12px 10px 10px;
  border-top-width: 1px;
  border-left: 3px solid var(--sky-bright);
  box-shadow: 0 5px 14px rgba(11,46,79,.07);
}
#tools .tool2 img {
  border-radius: 3px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
#tools .tool2__name {
  padding: 0;
  font-size: 14px;
  letter-spacing: .03em;
}
#tools .tool2__desc {
  margin-top: 3px;
  padding: 0;
  font-size: 12px;
  line-height: 1.75;
  color: var(--navy-sub);
}
@media (min-width: 768px) {
  #tools .tool2 { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  #tools .tool2 > li { grid-template-columns: 120px 1fr; padding: 11px 14px 11px 11px; }
  #tools .tool2__name { font-size: 15px; padding: 0; }
  #tools .tool2__desc { font-size: 12.5px; padding: 0; }
}

/* 画像を左・テキストを右に固定(自動配置で説明文が下に回り込むのを防ぐ) 2026-09-19 */
#tools .tool2 > li { grid-template-rows: auto auto; align-content: center; }
#tools .tool2 > li img { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
#tools .tool2__name { grid-column: 2; grid-row: 1; align-self: end; }
#tools .tool2__desc { grid-column: 2; grid-row: 2; align-self: start; }

/* =========================================================
   医院案内の写真をスタイリッシュに(2026-09-19 発注者指示)
   PCは「大きな写真+2×2の小写真」のモザイク。ホバーで少し拡大。
   ========================================================= */
#clinic .clinic-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: var(--space-3) 0 var(--space-3);
}
#clinic .clinic-gallery figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: none;
  border-radius: 5px;
  box-shadow: 0 10px 26px rgba(11,46,79,.14);
}
#clinic .clinic-gallery figure::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 5px;
  border: 1px solid rgba(255,255,255,.55);
  pointer-events: none;
}
#clinic .clinic-gallery img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
#clinic .clinic-gallery figure:hover img { transform: scale(1.05); }
#clinic .clinic-gallery figcaption {
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 5px 12px;
  background: rgba(11,46,79,.78);
  border: none;
  border-left: 2px solid var(--sky-bright);
  border-radius: 2px;
  color: #fff;
  font-family: var(--mincho);
  font-size: 11.5px;
  letter-spacing: .1em;
  line-height: 1.5;
}
#clinic .clinic-gallery__main { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
#clinic .clinic-gallery figure:not(.clinic-gallery__main) { aspect-ratio: 4 / 3; }

@media (min-width: 768px) {
  #clinic .clinic-gallery {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 12px;
  }
  #clinic .clinic-gallery__main {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
    aspect-ratio: auto;
  }
  #clinic .clinic-gallery figure:not(.clinic-gallery__main) { aspect-ratio: 4 / 3; }
  #clinic .clinic-gallery figcaption { left: 12px; bottom: 12px; font-size: 12px; padding: 6px 14px; }
}

/* 医院案内の情報リストも写真に合わせてカード化(2026-09-19 発注者指示) */
#clinic dl {
  display: block;
  margin: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(11,46,79,.16);
  border-top: 4px solid var(--sky-bright);
  border-radius: 5px;
  box-shadow: 0 10px 26px rgba(11,46,79,.10);
}
#clinic dl > div { display: grid; border-bottom: 1px solid #E7F2F8; }
#clinic dl > div:last-child { border-bottom: none; }
#clinic dt {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px 16px 4px;
  background: none;
  border: none;
  font-family: var(--mincho);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--navy-text);
}
#clinic dt::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: none;
  background: var(--sky-bright);
  transform: rotate(45deg);
}
#clinic dd {
  padding: 0 16px 14px 32px;
  font-family: var(--mincho);
  font-size: 14px;
  line-height: 1.95;
  color: var(--navy-body);
}
#clinic dd .table-scroll { margin-top: 8px; }

@media (min-width: 768px) {
  #clinic dl > div { grid-template-columns: 210px 1fr; align-items: start; }
  #clinic dt {
    padding: 16px 16px 16px 20px;
    background: linear-gradient(180deg, #F7FCFE 0%, #EFF8FD 100%);
    border-right: 1px solid #E7F2F8;
    align-self: stretch;
    font-size: 14px;
  }
  #clinic dd { padding: 16px 20px; font-size: 14.5px; }
}

/* =========================================================
   料金(税込)をスタイリッシュに(2026-09-19 発注者指示)
   表を白いカードに入れ、金額を大きく見せる。文言は変更しない。
   ========================================================= */
#fees h3 {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: var(--space-4) 0 12px;
  padding: 0;
  background: none;
  border: none;
  font-family: var(--mincho);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--navy-text);
}
#fees h3::before {
  content: "";
  width: 9px;
  height: 9px;
  flex: none;
  background: var(--sky-bright);
  transform: rotate(45deg);
}
#fees h3::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, rgba(38,145,184,.45), rgba(38,145,184,0));
}
#fees h3:first-of-type { margin-top: var(--space-3); }

#fees .table-scroll {
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(11,46,79,.16);
  border-top: 4px solid var(--sky-bright);
  border-radius: 5px;
  box-shadow: 0 10px 26px rgba(11,46,79,.10);
}
#fees table { width: 100%; border-collapse: collapse; }
#fees thead th {
  padding: 13px 16px;
  background: linear-gradient(180deg, #123B61 0%, #0B2E4F 100%);
  border: none;
  color: #fff;
  font-family: var(--mincho);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-align: left;
}
#fees tbody td,
#fees tbody th {
  padding: 13px 16px;
  border: none;
  border-top: 1px solid #E7F2F8;
  background: transparent;
  font-family: var(--mincho);
  font-size: 14px;
  line-height: 1.8;
  color: var(--navy-body);
  vertical-align: middle;
}
#fees tbody tr:first-child td,
#fees tbody tr:first-child th { border-top: none; }
#fees tbody td:first-child,
#fees tbody th:first-child { color: var(--navy-text); font-weight: 700; }
#fees td.price {
  background: #F4FBFE;
  color: var(--navy-text);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
}
#fees td.price small {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--navy-sub);
  white-space: normal;
}
#fees .note {
  margin-top: 10px;
  padding: 10px 14px;
  background: rgba(255,255,255,.7);
  border: none;
  border-left: 3px solid var(--sky-bright);
  border-radius: 0 3px 3px 0;
  font-family: var(--mincho);
  font-size: 12.5px;
  line-height: 1.9;
  color: var(--navy-sub);
}

@media (min-width: 768px) {
  #fees h3 { font-size: 21px; }
  #fees thead th { padding: 14px 18px; font-size: 14px; }
  #fees tbody td, #fees tbody th { padding: 15px 18px; font-size: 14.5px; }
  #fees td.price { font-size: 19px; }
  #fees .note { font-size: 13px; }
}

/* スマホで表が潰れないよう横スクロールを復活(2026-09-19) */
#fees .table-scroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
#fees table { min-width: 520px; }
#fees tbody td:first-child,
#fees tbody th:first-child { white-space: nowrap; }
#fees tbody td.wrap { word-break: keep-all; overflow-wrap: anywhere; }

/* スマホは横スクロールせず1画面に収める(金額が隠れないように) 2026-09-19 */
@media (max-width: 767px) {
  #fees table { min-width: 0; }
  #fees thead th { padding: 10px 8px; font-size: 12px; letter-spacing: .04em; }
  #fees tbody td,
  #fees tbody th { padding: 11px 8px; font-size: 12.5px; line-height: 1.7; word-break: keep-all; overflow-wrap: anywhere; }
  #fees tbody td:first-child,
  #fees tbody th:first-child { white-space: normal; word-break: keep-all; }
  #fees td.price { font-size: 15px; padding-left: 10px; padding-right: 10px; }
  #fees td.price small { font-size: 10.5px; }
}

/* 治療名が途中で折り返さないよう最小幅を確保(2026-09-19) */
@media (max-width: 767px) {
  #fees tbody td:first-child,
  #fees tbody th:first-child { min-width: 6.3em; }
}

/* ヤグレーザーの機器写真は縦長なので、枠内に収めて表示(2026-09-19 発注者指示) */
#tools .tool2 img.tool2__img--contain {
  object-fit: contain;
  background: linear-gradient(180deg, #FCFDFE 0%, #EDF6FB 100%);
}
@media (min-width: 768px) {
  #tools .tool2 { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  #tools .tool2 > li { grid-template-columns: 100px 1fr; }
}
@media (min-width: 1100px) {
  #tools .tool2 > li { grid-template-columns: 120px 1fr; gap: 14px; }
}

/* =========================================================
   ヘッダーメニューにデザイン性を(2026-09-19 発注者指示)
   明朝体+ホバーで淡い水色のピルと水色の下線。
   ========================================================= */
@media (min-width: 768px) {
  .header__nav { gap: 2px; flex-wrap: nowrap; }
  .header__nav a {
    position: relative;
    padding: 8px 9px;
    border-radius: 999px;
    font-family: var(--mincho);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--navy-text);
    white-space: nowrap;
    transition: background .2s, color .2s;
  }
  .header__nav a::after {
    content: "";
    position: absolute;
    left: 9px;
    right: 9px;
    bottom: 3px;
    height: 2px;
    background: var(--sky-bright);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .24s ease;
  }
  .header__nav a:hover { background: rgba(130,220,253,.2); color: var(--navy-text); }
  .header__nav a:hover::after { transform: scaleX(1); }
}
@media (min-width: 768px) and (max-width: 1099px) {
  .header__nav { gap: 0; }
  .header__nav a { padding: 7px 6px; font-size: 12px; letter-spacing: .01em; }
  .header__nav a::after { left: 6px; right: 6px; }
}

/* =========================================================
   ヘッダーメニュー: 文字を大きく、1項目ずつ枠付きのボタン風に
   (2026-09-19 発注者指示)。画面幅に応じて3段階でサイズを調整。
   ========================================================= */
@media (min-width: 768px) {
  .header__nav a {
    border: 1px solid rgba(38,145,184,.38);
    background: rgba(246,252,254,.9);
    color: var(--navy-text);
    font-weight: 700;
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(11,46,79,.05);
    transition: background .2s, color .2s, border-color .2s, box-shadow .2s, transform .2s;
  }
  .header__nav a::after { display: none; }
  .header__nav a:hover {
    background: var(--navy-text);
    border-color: var(--navy-text);
    color: #fff;
    box-shadow: 0 6px 16px rgba(11,46,79,.24);
    transform: translateY(-1px);
  }
}
/* 幅が狭いとき(タブレット〜小さいPC) */
@media (min-width: 768px) and (max-width: 1099px) {
  .header__nav { gap: 3px; }
  .header__nav a { padding: 6px 7px; font-size: 12px; letter-spacing: 0; }
}
/* 中くらいのPC */
@media (min-width: 1100px) and (max-width: 1319px) {
  .header__nav { gap: 5px; }
  .header__nav a { padding: 8px 11px; font-size: 13.5px; letter-spacing: .02em; }
}
/* 大きいPC */
@media (min-width: 1320px) {
  .header__nav { gap: 7px; }
  .header__nav a { padding: 9px 15px; font-size: 15px; letter-spacing: .04em; }
}

/* =========================================================
   ヘッダーメニューをさらにスタイリッシュに(2026-09-19 発注者指示)
   丸いピル → ページのカードと同じ角丸4pxの上品なボタンに。
   ガラスのような質感+ホバーで紺に反転し水色のラインが伸びる。
   ========================================================= */
@media (min-width: 768px) {
  .header__nav a {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    background: linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(238,248,253,.92) 100%);
    border: 1px solid rgba(11,46,79,.14);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 2px 6px rgba(11,46,79,.06);
    color: var(--navy-text);
  }
  .header__nav a::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--sky-deep, #2691B8), var(--sky-bright));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .3s ease;
  }
  .header__nav a:hover {
    background: linear-gradient(180deg, #123B61 0%, #0B2E4F 100%);
    border-color: var(--navy-text);
    color: #fff;
    box-shadow: 0 8px 18px rgba(11,46,79,.26);
    transform: translateY(-1px);
  }
  .header__nav a:hover::before { transform: scaleX(1); }
  .header__nav a:focus-visible {
    outline: 2px solid var(--sky-deep, #2691B8);
    outline-offset: 2px;
  }
}

/* =========================================================
   ヘッダーメニュー: ボタン枠をやめて、細い区切り線+下線の
   ミニマルなデザインに(2026-09-19 発注者指示「もう少しかっこよく」)
   ========================================================= */
@media (min-width: 768px) {
  .header__nav { gap: 0; }
  .header__nav a {
    position: relative;
    overflow: visible;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    color: var(--navy-text);
    font-family: var(--mincho);
    font-weight: 700;
  }
  /* 項目のあいだの細い縦線 */
  .header__nav a + a::after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 50%;
    width: 1px;
    height: 13px;
    margin-top: -6.5px;
    background: rgba(11,46,79,.18);
    transform: none;
    transition: none;
  }
  /* ホバーで下から伸びる水色のライン */
  .header__nav a::before {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 2px;
    height: 2px;
    background: linear-gradient(90deg, var(--sky-deep, #2691B8), var(--sky-bright));
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .3s ease;
  }
  .header__nav a:hover {
    background: none;
    border: none;
    box-shadow: none;
    transform: none;
    color: var(--sky-deep, #2691B8);
  }
  .header__nav a:hover::before { transform: scaleX(1); }
  .header__nav a:focus-visible { outline: 2px solid var(--sky-deep, #2691B8); outline-offset: 3px; }
}
@media (min-width: 768px) and (max-width: 1099px) {
  .header__nav a { padding: 9px 7px; font-size: 12.5px; letter-spacing: .02em; }
  .header__nav a::before { left: 7px; right: 7px; }
}
@media (min-width: 1100px) and (max-width: 1319px) {
  .header__nav a { padding: 10px 11px; font-size: 14px; letter-spacing: .05em; }
  .header__nav a::before { left: 11px; right: 11px; }
}
@media (min-width: 1320px) {
  .header__nav a { padding: 11px 15px; font-size: 15.5px; letter-spacing: .07em; }
  .header__nav a::before { left: 15px; right: 15px; }
}

/* メニューの文字をさらに大きく・区切り線をはっきりと(2026-09-19 発注者指示) */
@media (min-width: 768px) {
  .header__nav a + a::after {
    width: 1px;
    height: 17px;
    margin-top: -8.5px;
    background: rgba(11,46,79,.38);
  }
}
@media (min-width: 768px) and (max-width: 1099px) {
  .header__nav a { padding: 9px 5px; font-size: 13.5px; letter-spacing: 0; }
  .header__nav a::before { left: 5px; right: 5px; }
}
@media (min-width: 1100px) and (max-width: 1319px) {
  .header__nav a { padding: 10px 10px; font-size: 15px; letter-spacing: .03em; }
  .header__nav a::before { left: 10px; right: 10px; }
}
@media (min-width: 1320px) {
  .header__nav a { padding: 11px 14px; font-size: 17px; letter-spacing: .06em; }
  .header__nav a::before { left: 14px; right: 14px; height: 2px; }
  .header__nav a + a::after { height: 19px; margin-top: -9.5px; }
}

/* 「歯の神経の形はとても複雑です」も他と同じく文章の横に画像を置く(2026-09-19 発注者指示) */
#about .about-intro { display: grid; gap: var(--space-2); margin-top: 10px; }
#about .about-intro__text { margin: 0; }
#about .about-intro__fig { margin: 0; }
@media (min-width: 860px) {
  #about .about-intro {
    grid-template-columns: 1fr 1.05fr;
    align-items: center;
    gap: var(--space-3);
  }
}

/* =========================================================
   「当院の選べる根管治療」の水色バンドを、初画面(トップ)と
   同じ色 #A0D8EF に変更(2026-09-19 発注者指示)
   ========================================================= */
#treatment::before {
  background-color: #F7FCFE;
  background-image:
    linear-gradient(176deg, #A9DDF2 0%, #A0D8EF 40%, #A0D8EF 62%, rgba(160,216,239,0) 62.3%),
    linear-gradient(180deg, #F2FAFD 0%, #F7FCFE 100%);
  background-repeat: no-repeat, no-repeat;
  background-position: top, top;
  background-size: 100% 520px, 100% 100%;
  border-top: 1px solid rgba(11,46,79,.16);
  border-bottom: 1px solid rgba(11,46,79,.16);
}