@charset "UTF-8";
/* ============================================================
   treatment.css ― 診療案内ページ専用
   色は tokens.css の変数のみ。背景を書く規則には必ず文字色も書く。
   ============================================================ */

/* ------------------------------------------------------------
   ページ内タブ（現在地の下線は site.js が .is-current を付ける）
   状態は 通常／:hover／.is-current の3つ。すべて背景と文字を対で書く。
   ------------------------------------------------------------ */
.p-tabs {
  background: var(--c-base-header);
  color: var(--c-ink);
  border-bottom: var(--border);
}
.p-tabs__inner {
  /* 引き渡しは content-box。中身がちょうど 1360px になるよう padding を足す */
  max-width: calc(var(--w-content) + var(--pad-x) * 2);
  margin-inline: auto;
  display: flex;
  gap: clamp(24px, 4vw, 48px);
  padding-inline: var(--pad-x);
  overflow-x: auto;
}
.p-tabs__link {
  padding-block: 20px;
  font-size: 13.5px;
  letter-spacing: 0.1em;
  color: var(--c-ink);
  background: transparent;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color var(--t-out), border-color var(--t-out);
}
.p-tabs__link:hover {
  color: var(--c-brand);
  background: transparent;
  border-bottom-color: var(--c-brand);
  transition: color var(--t-in), border-color var(--t-in);
}
.p-tabs__link.is-current {
  color: var(--c-brand);
  background: transparent;
  border-bottom-color: var(--c-brand);
}
/* 現在地にホバーしても色が入れ替わらないよう、明示的に同じ組み合わせを書く */
.p-tabs__link.is-current:hover {
  color: var(--c-brand);
  background: transparent;
  border-bottom-color: var(--c-brand);
}

/* ------------------------------------------------------------
   概要（写真3列・全幅）
   ------------------------------------------------------------ */
.p-treatover { padding-block: var(--sp-news) 0; }
.p-treatover__title {
  margin-bottom: 56px;
  text-align: center;
  font-family: var(--f-mincho);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: var(--ls-mincho-wide);
  color: var(--c-ink-strong);
}
.p-treatover__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 72px 4px;
}
.p-treatover__col { display: flex; flex-direction: column; }
.p-treatover__figure { position: relative; }
.p-treatover__media { height: 420px; }
.p-treatover__plate {
  position: absolute;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%);
  background: var(--c-card);
  color: var(--c-ink-strong);
  padding: 13px 34px;
  box-shadow: var(--sh-card);
  white-space: nowrap;
  pointer-events: none;
  text-align: center;
}
.p-treatover__plate-en {
  display: block;
  margin-bottom: 4px;
  font-family: var(--f-latin);
  font-size: 10px;
  letter-spacing: var(--ls-latin);
  color: var(--c-gold);
}
.p-treatover__plate-ja {
  display: block;
  font-family: var(--f-mincho);
  font-size: 16px;
  letter-spacing: 0.14em;
  color: var(--c-ink-strong);
}
.p-treatover__desc {
  max-width: calc(400px + 28px * 2);
  margin: 30px auto 24px;
  padding-inline: 28px;
  font-size: 13px;
  line-height: var(--lh-body);
  letter-spacing: 0.04em;
  color: var(--c-ink-mid);
  text-align: center;
}
.p-treatover__btn {
  display: block;
  width: 220px;
  margin: auto auto 0;
  padding: 14px 0;
  font-size: 12.5px;
  letter-spacing: 0.18em;
}

/* ------------------------------------------------------------
   詳細3件（写真＋本文＋ポイント3枚）
   ------------------------------------------------------------ */
.p-treat {
  display: flex;
  flex-direction: column;
  gap: 130px;
  padding-block: var(--sp-band) var(--sp-page-btm);
}
/* 固定ヘッダーがアンカーに被らないようにする */
.p-treat__block { scroll-margin-top: var(--h-header); }
.p-treat__intro { margin-bottom: 56px; }
.p-treat__media { height: 400px; }
.p-treat__en {
  margin-bottom: 14px;
  font-family: var(--f-latin);
  font-size: 13px;
  letter-spacing: 0.3em;
  color: var(--c-gold);
}
.p-treat__title {
  margin-bottom: 10px;
  font-family: var(--f-mincho);
  font-size: 32px;
  font-weight: 500;
  letter-spacing: var(--ls-mincho);
  color: var(--c-ink-strong);
}
/* 「対象：…」は情報。装飾色（--c-gold 2.87:1）は使えないため
   同系で 4.8:1 の --c-gold-info を使う */
.p-treat__target {
  margin-bottom: 26px;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--c-gold-info);
}
.p-treat__desc {
  font-size: 14.5px;
  line-height: 2.3;
  letter-spacing: 0.05em;
  color: var(--c-ink-mid);
}
.p-treat__points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.p-treat__point {
  background: var(--c-card);
  color: var(--c-ink);
  border: var(--border);
  border-radius: var(--radius);
  padding: 30px 28px;
}
.p-treat__point-bar {
  display: block;
  width: 28px;
  height: 2px;
  margin-bottom: 18px;
  background: linear-gradient(90deg, var(--c-gold), var(--c-gold-light));
}
.p-treat__point-title {
  margin-bottom: 12px;
  font-family: var(--f-mincho);
  font-size: 16.5px;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.06em;
  color: var(--c-ink-strong);
}
.p-treat__point-text {
  font-size: 13px;
  line-height: 2;
  letter-spacing: 0.04em;
  color: var(--c-ink-sub);
}