/*
 * base.css — 全キット共通の構造CSS（キットCSSより先に読み込む）
 * 色はできるだけ var(--wp--preset--color--*) トークンを参照し、キット非依存にする。
 * キット固有の装飾・上書きは kit-{name}.css 側に置く。
 *
 * 【段階的に共通構造をここへ集約していく（フェーズ1c）】
 */

/* ━━ フッター3カラム（フッターの設定） ━━ */
.site-footer__inner { display: flex; flex-wrap: wrap; gap: 2.5rem; align-items: flex-start; }
.site-footer__col { flex: 1 1 220px; min-width: 200px; font-size: 0.85rem; }
.site-footer__col-title { font-weight: 700; color: #fff; margin: 0 0 0.7em; font-size: 0.9rem; }
.site-footer__col p { margin: 0 0 0.4em; color: rgba(255,255,255,0.85); }
.site-footer__name { font-weight: 800; font-size: 1.05rem; color: #fff; }
.site-footer__note { color: rgba(255,255,255,0.65); }
.site-footer__col a { color: rgba(255,255,255,0.85); text-decoration: none; }
.site-footer__col a:hover { color: #fff; text-decoration: underline; }

/* 診療時間（コンパクト表） */
.hours__table--compact { margin: 0; }
.hours__table--compact table { border-collapse: collapse; font-size: 0.72rem; width: auto; }
.hours__table--compact th, .hours__table--compact td {
  border: 1px solid rgba(255,255,255,0.25); padding: 0.25em 0.55em; text-align: center;
  color: rgba(255,255,255,0.9); background: transparent;
}
.hours__table--compact th small { display: block; font-weight: 400; font-size: 0.82em; opacity: 0.85; }
.site-footer__closed { font-size: 0.78rem; color: rgba(255,255,255,0.65); margin-top: 0.5em !important; }

/* ページ一覧 */
.site-footer__links { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 1.5rem; }
.site-footer__links li { margin-bottom: 0.45em; break-inside: avoid; }

@media (max-width: 640px) {
  .site-footer__inner { flex-direction: column; gap: 1.8rem; }
}

/* マスク方式アイコン（リッチトーン：単色透過PNG＋currentColor） */
.clinic-icon-mask { display: inline-block; flex-shrink: 0; vertical-align: middle; }

/* ━━ サイトヘッダー（骨格・全キット共通） ━━ */
.site-topbar { display: flex; justify-content: flex-end; align-items: center; gap: 1.5rem; background: var(--wp--preset--color--primary); color: #fff; font-size: 0.8rem; padding-inline: clamp(1rem, 4vw, 2.5rem); padding-block: 0.45rem; }
.site-topbar__tel { color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 0.4em; font-weight: 700; }
.site-topbar__tel svg { display: block; }
.site-topbar__hours { color: rgba(255,255,255,0.75); }

.site-header { position: sticky; top: 0; z-index: 100; }
.site-header__inner { max-width: var(--wp--style--global--wide-size, 1200px); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2.5rem); padding-block: 0.85rem; gap: 1rem; }
.site-header__brand { display: flex; gap: 0.6rem; align-items: center; flex-shrink: 0; text-decoration: none; }
.site-header__symbol img { display: block; width: 44px; height: 44px; object-fit: cover; }
.site-header__brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.site-header__catch { font-size: 0.7rem; font-weight: 700; color: var(--wp--preset--color--primary); }
.site-header__name { font-size: 1.5rem; font-weight: 800; color: var(--wp--preset--color--text-main); }
.site-header__en { font-size: 0.62rem; letter-spacing: 0.12em; color: var(--wp--preset--color--text-muted); }
.site-header__brand--image .site-header__logo-img { display: block; max-height: 48px; width: auto; }
.site-header__drawer { display: flex; align-items: center; gap: 1.2rem; }
.site-nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; background: none; border: none; cursor: pointer; padding: 8px; }
.site-nav-toggle__bar { display: block; height: 2px; width: 100%; background: var(--wp--preset--color--text-main); border-radius: 2px; transition: transform .25s, opacity .25s; }
.site-header__nav .primary-menu { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; list-style: none; margin: 0; padding: 0; }
.site-header__nav .primary-menu .sub-menu { display: none; }
.site-header__nav a { color: var(--wp--preset--color--text-main); font-weight: 600; font-size: 0.9rem; text-decoration: none; padding: 0.4em 0.7em; transition: color .2s, background .2s, border-color .2s; display: inline-block; }

/* ━━ 共通ボタン（骨格・全キット共通） ━━ */
.site-header__cta { display: flex; gap: 0.5rem; align-items: center; flex-shrink: 0; }
.site-header__cta .wp-block-button { margin: 0; }
.cta-btn { display: inline-block; font-weight: 700; font-size: 0.85rem; padding: 0.6em 1.3em; border-radius: var(--wp--custom--border-radius--pill, 999px); text-decoration: none; white-space: nowrap; }
.cta-btn--accent { background: var(--wp--preset--color--accent); color: #fff; }
.cta-btn--outline { background: transparent !important; border: 2px solid var(--wp--preset--color--primary); color: var(--wp--preset--color--primary) !important; }
.cta-btn--outline:hover { background: var(--wp--preset--color--primary-light) !important; }

/* ━━ セクション共通（骨格・全キット共通） ━━ */
.section-head { gap: 4px; margin-bottom: var(--wp--preset--spacing--60); }
.section-head__label { display: inline-block; text-transform: uppercase; margin: 0 0 2px; }
.section-head h2 { position: relative; margin: 0; }
.section-head + * { margin-top: var(--wp--preset--spacing--40); }

/* ━━ ウェーブ区切り（構造。trust は kit 側で非表示） ━━ */
/* 高さは --wave-h に一本化（svg高さ＝ヒーロー重ねの負マージンを必ず一致させ破綻防止）。
   スタイル別の値は body.wave-* で上書き（kit-switch のウェーブ軸）。 */
.wave-divider { display: block; width: 100%; overflow: hidden; line-height: 0; margin-top: -2px; }
.wave-divider svg { display: block; width: 100%; height: var(--wave-h, 56px); }
/* 写真ヒーロー下端に重ねる透過ウェーブ（波を写真へ食い込ませる） */
.wave-divider--hero-overlay {
  margin-top: calc(-1 * var(--wave-h, 56px));
  margin-bottom: -1px; /* 直後のピンクセクションを1px重ね、波下端の継ぎ目を封じる */
  position: relative;
  z-index: 3;
  background: transparent;
  pointer-events: none;
}
/* ウェーブの大きさ（スタイル軸）。none はウェーブ自体を出力しないため変数不要 */
body.wave-soft   { --wave-h: 56px; }
body.wave-bold   { --wave-h: 104px; }
body.wave-wavy   { --wave-h: 80px; }
body.wave-arc    { --wave-h: 96px; }
body.wave-corner { --wave-h: 120px; }
/* arc / corner は境界ごとに左右交互（front-sections.php が反転クラスを付与） */
.wave-divider--flip svg { transform: scaleX(-1); }
@media (max-width: 768px) {
  body.wave-bold   { --wave-h: 70px; }
  body.wave-wavy   { --wave-h: 58px; }
  body.wave-arc    { --wave-h: 60px; }
  body.wave-corner { --wave-h: 72px; }
}

/* ━━ 背景バンド（表示位置で交互） ━━ */
.front-band { position: relative; }
.front-band--soft  { background: var(--wp--preset--color--bg-soft); }
.front-band--white { background: #ffffff; }
.front-band > .section-features,
.front-band > .section-hours-news,
.front-band > .section-departments,
.front-band > .section-access,
.front-band > .section-free,
.front-band > .section-facility { background: transparent !important; }

/* ━━ features / departments / hours / news（骨格・全キット共通／色はトークン追従） ━━ */
/* 4. 当院の特徴 */
.section-features {
  position: relative;
  /* ウェーブは wave-divider ブロックで前後に挿入 */
}

/* 横並びカードの列数：PCは1行3枚（4枚目から折り返し）。狭い画面で2列→1列 */
/* WordPressブロックCSSは PC(≥782px)で .wp-block-columns を flex-wrap:nowrap にするため、
   コンテナを明示的に wrap にして折り返しを有効化する（これが無いと右へあふれる）。 */
.features__cards { flex-wrap: wrap !important; }
.features__cards .features__card {
  flex: 0 0 calc((100% - 2 * var(--wp--preset--spacing--60, 1.5rem)) / 3) !important;
  max-width: calc((100% - 2 * var(--wp--preset--spacing--60, 1.5rem)) / 3);
  min-width: 0;
}
@media (max-width: 900px) {
  .features__cards .features__card {
    flex-basis: calc((100% - var(--wp--preset--spacing--60, 1.5rem)) / 2) !important;
    max-width: calc((100% - var(--wp--preset--spacing--60, 1.5rem)) / 2);
  }
}
@media (max-width: 600px) {
  .features__cards .features__card {
    flex-basis: 100% !important;
    max-width: 100%;
  }
}

/* カード共通 */
.features__card-inner {
  height: 100%;
  box-sizing: border-box; /* height:100% にパディング/ボーダーを含める（二重計上防止） */
  background: #fff;
  border-radius: var(--wp--custom--border-radius--lg, 24px);
  box-shadow: var(--wp--custom--shadow--card, 0 4px 20px color-mix(in srgb, var(--wp--preset--color--primary) 10%, transparent));
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.features__card-inner:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--wp--preset--color--primary) 16%, transparent);
}

/* アイコン版 */
.features__card-inner--icon {
  align-items: center;
  text-align: center;
  padding: var(--wp--preset--spacing--70, 3rem) var(--wp--preset--spacing--60, 2rem);
}
/* 特徴アイコンも装飾なしの線アイコン単体（中央配置・少し大きめ） */
.features__icon {
  flex-shrink: 0;
  color: var(--wp--preset--color--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.9rem;
}
.features__card-inner:hover .features__icon {
  color: var(--wp--preset--color--primary-dark);
}
.features__icon svg { display: block; }

/* 写真版 */
.features__photo {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;        /* 縦横比を固定 */
  background: var(--wp--preset--color--primary-light);
  overflow: hidden;
}
.features__photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;          /* センタートリミング */
  object-position: center;
  display: block;
}
.features__photo-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wp--preset--color--primary);
  opacity: 0.5;
}
.features__photo-body {
  padding: var(--wp--preset--spacing--60, 2rem) var(--wp--preset--spacing--60, 2rem) var(--wp--preset--spacing--70, 3rem);
  text-align: center;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* テキスト共通 */
.features__point {
  color: var(--wp--preset--color--accent);
  font-weight: 700;
  font-size: var(--wp--preset--font-size--xs);
  letter-spacing: 0.1em;
  margin: 0.5rem 0 0.25rem;
}
.features__heading {
  font-size: var(--wp--preset--font-size--lg);
  color: var(--wp--preset--color--primary);
  margin: 0 0 0.5rem;
}
.features__text {
  color: var(--wp--preset--color--text-muted);
  font-size: var(--wp--preset--font-size--sm);
  margin: 0;
}

/* 縦並び（左右交互）レイアウト＝zigzag。写真・アイコンどちらでも可 */
.features__rows {
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 6vw, 5rem);
  margin-top: var(--wp--preset--spacing--70, 3rem);
}
.features__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
/* 既定＝テキスト左・メディア右 */
.features__row-text  { order: 1; }
.features__row-media { order: 2; }
/* 左右交互（alt）＝偶数行で入替 */
.features__rows--alt .features__row:nth-child(even) .features__row-text  { order: 2; }
.features__rows--alt .features__row:nth-child(even) .features__row-media { order: 1; }
/* 写真左固定 */
.features__rows--left .features__row-media { order: 1; }
.features__rows--left .features__row-text  { order: 2; }
/* 写真右固定 */
.features__rows--right .features__row-media { order: 2; }
.features__rows--right .features__row-text  { order: 1; }

/* 番号は横並び時の POINT と同様＝アクセント色・小さめ・控えめに */
.features__row-num {
  display: block;
  color: var(--wp--preset--color--accent);
  font-weight: 700;
  font-size: var(--wp--preset--font-size--xs);
  letter-spacing: 0.1em;
  margin: 0 0 0.5rem;
}
/* 番号スタイル＝大きい薄色数字（POINTなし） */
.features__rows--bignum .features__row-num {
  color: color-mix(in srgb, var(--wp--preset--color--primary) 22%, #fff);
  font-size: clamp(2.6rem, 6vw, 4.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  margin: 0 0 0.2em;
}
.features__row-heading {
  font-size: clamp(1.25rem, 2.6vw, 1.7rem);
  color: var(--wp--preset--color--primary);
  margin: 0 0 0.8rem;
}
.features__row-body {
  color: var(--wp--preset--color--text-main);
  line-height: 1.9;
  margin: 0;
}
.features__row-media--photo {
  position: relative; /* 写真未設定時の .features__photo-empty(absolute) の基準にする */
  aspect-ratio: 3 / 2;
  border-radius: var(--wp--custom--border-radius--lg, 18px);
  overflow: hidden;
  background: var(--wp--preset--color--primary-light);
}
.features__row-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.features__row-media--icon {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 2;
  background: var(--wp--preset--color--primary-light);
  border-radius: var(--wp--custom--border-radius--lg, 18px);
  color: var(--wp--preset--color--primary);
}
.features__row-media--icon svg { display: block; }

@media (max-width: 768px) {
  .features__rows .features__row { grid-template-columns: 1fr; }
  /* スマホは全パターンとも常にメディアを上・テキストを下に積む（交互/左右固定を解除）。
     alt の :nth-child セレクタと同等以上の詳細度で確実に上書き */
  .features__rows .features__row .features__row-media,
  .features__rows--alt .features__row:nth-child(even) .features__row-media { order: 1; }
  .features__rows .features__row .features__row-text,
  .features__rows--alt .features__row:nth-child(even) .features__row-text  { order: 2; }
}

/* 5. 診療案内 */
.departments__card-inner {
  height: 100%;
  /* height:100% を内容領域でなく境界ボックスに適用。
     content-box だとパディング+ボーダーが二重計上され
     カラムより約47px はみ出して下に余白が出る */
  box-sizing: border-box;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
  box-shadow: var(--wp--custom--shadow--card, 0 2px 12px rgba(0,0,0,0.06));
}
.departments__card-inner:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px color-mix(in srgb, var(--wp--preset--color--primary) 14%, transparent);
}

/* アイコン＋見出しを横並び（左寄せの一覧型。特徴の中央寄せと差別化） */
.departments__card-head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 0.7rem;
}
.departments__card-head h3 {
  margin: 0 !important;
  line-height: 1.3;
}
/* 科目名の下にアクセント色の短い下線で装飾（文字の中央に配置・2行でも崩れない） */
.departments__card-head h3 { text-align: center; }
.departments__card-head h3::after {
  content: "";
  display: block;
  width: 28px;
  height: 3px;
  margin: 0.4rem auto 0; /* 左右 auto で文字ブロックの中央へ */
  border-radius: 2px;
  background: var(--wp--preset--color--accent);
}
/* アイコンはコンテナ装飾なしの「線アイコン単体」。
   カード側が角丸＋影＋余白で装飾を担うため、二重装飾を避ける。
   白カードの上の単色グリフなので背景バンドが白/緑どちらでも崩れない。 */
.departments__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wp--preset--color--primary);
}
.departments__card-inner:hover .departments__icon {
  color: var(--wp--preset--color--primary-dark);
}

.departments__more a {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  text-decoration: none;
  font-weight: 700;
  transition: gap 0.2s;
}
.departments__more a:hover { gap: 0.5em; }

/* ── カードスタイル・プリセット（セクション単位。横並びは維持） ── */
/* アイコン上・大きめ ／ 白抜き丸：カード内容を中央寄せ */
.departments__grid--icon-top .departments__card-inner,
.departments__grid--icon-badge .departments__card-inner {
  text-align: center;
  align-items: center;
}
/* 見出しブロックを縦・中央に */
.departments__grid--icon-top .departments__card-head,
.departments__grid--icon-badge .departments__card-head {
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}
.departments__grid--icon-top .departments__icon svg,
.departments__grid--icon-badge .departments__icon svg {
  width: 52px;
  height: 52px;
}
/* アイコン白抜き（プライマリを一段薄めた緑の丸タイル。白アイコンの視認性は維持） */
.departments__grid--icon-badge .departments__icon {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--wp--preset--color--primary) 72%, var(--wp--preset--color--primary-light));
  color: #fff;
}
.departments__grid--icon-badge .departments__card-inner:hover .departments__icon {
  background: var(--wp--preset--color--primary);
  color: #fff;
}
.departments__grid--icon-badge .departments__icon svg {
  width: 36px;
  height: 36px;
}
/* アウトライン（影をやめ細い枠線でフラット） */
.departments__grid--outline .departments__card-inner {
  box-shadow: none;
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 18%, #fff);
}
.departments__grid--outline .departments__card-inner:hover {
  box-shadow: 0 6px 20px color-mix(in srgb, var(--wp--preset--color--primary) 12%, transparent);
}

/* フリーセクション（お知らせ・バナー）。本文はテーマ・タイポで整形＝崩れ防止 */
.section-free .free__inner {
  max-width: 760px;
  margin: var(--wp--preset--spacing--60, 2rem) auto 0;
  text-align: center;
}
.section-free .free__body {
  color: var(--wp--preset--color--text-main);
  line-height: 1.9;
  font-size: var(--wp--preset--font-size--md);
}
.section-free .free__body > :first-child { margin-top: 0; }
.section-free .free__body > :last-child { margin-bottom: 0; }
.section-free .free__body p { margin: 0 0 1em; }
.section-free .free__body a { color: var(--wp--preset--color--primary); text-decoration: underline; }
.section-free .free__body strong { color: var(--wp--preset--color--primary-dark); }
.section-free .free__body ul,
.section-free .free__body ol { display: inline-block; text-align: left; margin: 0.4em 0; padding-left: 1.4em; }
.section-free .free__image { margin-top: 1.6rem; }
.section-free .free__image img {
  max-width: 100%;
  height: auto;
  border-radius: var(--wp--custom--border-radius--lg, 18px);
  display: block;
  margin: 0 auto;
}
.section-free .free__btn { margin-top: 1.6rem; margin-bottom: 0; }

/* 強調パネル：色付き角丸＋左 accent バーで「大きく目立つ」告知に（移転案内など） */
.section-free--emphasis .free__inner {
  background: color-mix(in srgb, var(--wp--preset--color--primary-light) 72%, #fff);
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 16%, transparent);
  border-left: 5px solid var(--wp--preset--color--accent);
  border-radius: var(--wp--custom--border-radius--lg, 18px);
  padding: clamp(1.6rem, 4vw, 2.6rem);
  box-shadow: var(--wp--custom--shadow--card, 0 2px 12px rgba(0,0,0,0.06));
}

/* 6. 診療時間・お知らせ */
.hours__table table {
  width: 100%;
  border-collapse: collapse;
  border-radius: var(--wp--custom--border-radius--md, 18px);
  overflow: hidden;
  box-shadow: var(--wp--custom--shadow--card);
}
.hours__table thead th {
  background: var(--wp--preset--color--primary);
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.6em 0.4em;
  text-align: center;
}
.hours__table tbody th {
  background: var(--wp--preset--color--primary-light);
  color: var(--wp--preset--color--text-main);
  font-weight: 700;
  font-size: 0.8rem;
  padding: 0.7em 0.8em;
  text-align: left;
  white-space: nowrap;
}
.hours__table tbody td {
  text-align: center;
  padding: 0.7em 0.4em;
  font-weight: 700;
  border-bottom: 1px solid var(--wp--preset--color--primary-light);
  font-size: 1.05rem;
}
.hours__table tbody tr:last-child td,
.hours__table tbody tr:last-child th {
  border-bottom: none;
}
/* 本日ハイライト（JSで付与） */
.hours__table td.is-today,
.hours__table th.is-today {
  background: color-mix(in srgb, var(--wp--preset--color--accent) 22%, transparent) !important;
  font-weight: 800;
  position: relative;
}
/* thead の本日列ヘッダー */
.hours__table thead th.is-today {
  background: var(--wp--preset--color--accent) !important;
  color: #fff;
}

/* 診療状態の絵文字カラー（data-status で色分け） */
.hours__table td[data-status="on"]   { color: var(--wp--preset--color--primary); }
.hours__table td[data-status="off"]  { color: var(--wp--preset--color--text-muted); }
.hours__table td[data-status="star"] { color: var(--wp--preset--color--accent); }

/* ── スタイル：シンプル（フラット＝緑ヘッダー帯なし。ただしプライマリ緑を効かせて華やかに） ── */
.hours__table--simple table {
  box-shadow: none;
  border-radius: 0;
}
/* 曜日ヘッダー：緑文字＋緑の下線（帯塗りはしない＝フラット感は維持） */
.hours__table--simple thead th {
  background: transparent;
  color: var(--wp--preset--color--primary);
  border-bottom: 2px solid color-mix(in srgb, var(--wp--preset--color--primary) 32%, transparent);
}
/* 午前/午後ラベル：緑、時間（small）はグレーで控えめに */
.hours__table--simple tbody th {
  background: transparent;
  color: var(--wp--preset--color--primary);
}
.hours__table--simple tbody th small {
  color: var(--wp--preset--color--text-muted);
  font-weight: 400;
}
/* 行の罫線も緑系にして色を添える */
.hours__table--simple tbody td {
  border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 16%, transparent);
}
/* 丸はゴールド（accent）＝緑×ゴールドの差し色。要確認★も accent（既定のまま） */
.hours__table--simple td[data-status="on"] { color: var(--wp--preset--color--accent); }
/* 本日列ハイライトは控えめに（thead の濃い accent を解除） */
.hours__table--simple thead th.is-today {
  background: color-mix(in srgb, var(--wp--preset--color--accent) 16%, transparent) !important;
  color: var(--wp--preset--color--primary);
}
.hours__table--simple td.is-today,
.hours__table--simple th.is-today {
  background: color-mix(in srgb, var(--wp--preset--color--accent) 12%, transparent) !important;
}

/* 臨時休診のお知らせ */
.hours__temp-notice {
  margin-top: 0.8rem;
  background: color-mix(in srgb, var(--wp--preset--color--accent) 12%, transparent);
  border-left: 4px solid var(--wp--preset--color--accent);
  border-radius: 8px;
  padding: 0.7em 1em;
  font-size: 0.82rem;
}
.hours__temp-notice strong { color: var(--wp--preset--color--primary-dark); display: block; margin-bottom: 0.3em; }
.hours__temp-notice ul { margin: 0; padding-left: 1.1em; }
.hours__temp-notice li { margin-bottom: 0.2em; }

/* お知らせ一覧 */
.news__list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
}
.news__list li {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--wp--preset--color--primary-light);
  font-size: 0.875rem;
  line-height: 1.6;
}
.news__list li:last-child { border-bottom: none; }
.news__date {
  color: var(--wp--preset--color--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
  font-size: 0.8rem;
  padding-top: 0.1em;
}
.news__cat {
  flex-shrink: 0;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.15em 0.7em;
  border-radius: 999px;
  white-space: nowrap;
}
.news__list a,
.news__link {
  color: var(--wp--preset--color--text-main);
  text-decoration: none;
  transition: color 0.2s;
}
.news__list a:hover { color: var(--wp--preset--color--primary); }

/* ━━ 院長挨拶 / アクセス（骨格・色はトークン追従） ━━ */
/* 7. 院長挨拶 */
.greeting__photo-wrap {
  overflow: hidden;
}
.greeting__photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.greeting__profile {
  gap: 0.75rem;
  align-items: baseline;
  flex-wrap: wrap;
}

.greeting__message {
  max-width: 520px;
}
/* 署名は本文と同じ幅に収め、右端を本文に揃える */
.greeting__sign {
  max-width: 520px;
}

/* 8. アクセス */
.access__map-wrap {
  overflow: hidden;
}
.access__map-wrap iframe {
  width: 100%;
  height: 100%;
  min-height: 380px;
  border: none;
  display: block;
}

.access__block h3 {
  font-size: 0.8rem !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.35rem;
  padding-left: 0.6em;
  border-left: 3px solid var(--wp--preset--color--primary);
}

.access__list {
  list-style: none !important;
  padding: 0 !important;
}
.access__list li {
  padding: 0.4em 0;
  border-bottom: 1px dashed var(--wp--preset--color--primary-light);
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  gap: 0.5em;
}
.access__list li:last-child { border-bottom: none; }
.access__route-icon {
  color: var(--wp--preset--color--primary);
  flex-shrink: 0;
}
/* features / departments のSVGアイコン共通 */
.features__icon svg,
.departments__icon svg {
  display: block;
}

/* キャッチコピー内の強調（管理画面で **…** で囲んだ部分）＝ブランドカラー。
   色はトークン追従（キット/パレットで自動追従）。 */
.hero__catch .hero__accent { color: var(--wp--preset--color--primary); }

/* 写真ヒーローは背景の明るさが不定なので、見出し全体にダークなハロー（影）を付けて
   写真から浮かせる（白の本文も色つき部分も読める。キット非依存）。
   色つき部分は淡いブランド色だと沈むため、accent に白を少し混ぜて輝度を確保（elegantの金茶対策）。 */
.hero--photo .hero__catch,
.hero--photo .hero__sub {
  text-shadow: 0 1px 2px rgba(0,0,0,0.55), 0 2px 10px rgba(0,0,0,0.35);
}
.hero--photo .hero__catch .hero__accent {
  color: color-mix(in srgb, var(--wp--preset--color--accent) 62%, #fff);
}

/* ヒーロー埋め込み（診療時間／お知らせを隅にドックする白カード）。
   写真/色ヒーローの隅に浮かせる。PCは絶対配置の角ドック、モバイルは下に積む。 */
.hero__embed {
  position: absolute; z-index: 3; bottom: clamp(14px, 3vw, 32px);
  width: min(360px, 40%); display: flex; flex-direction: column; gap: 12px;
}
.hero__embed--right { right: clamp(14px, 4vw, 40px); }
.hero__embed--left  { left:  clamp(14px, 4vw, 40px); }
.hero__embed-card {
  background: #fff; color: var(--wp--preset--color--text-main);
  border-radius: var(--wp--custom--border-radius--lg, 16px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
  padding: clamp(0.9rem, 2vw, 1.2rem) clamp(1rem, 2.2vw, 1.3rem);
}
.hero__embed-title {
  margin: 0 0 0.5em; font-weight: 700; font-size: 0.95rem;
  color: var(--wp--preset--color--primary); letter-spacing: 0.04em;
}
.hero__embed .news__list { margin: 0; }
.hero__embed .news__list--compact li { font-size: 0.82rem; }
.hero__embed .news__more { margin: 0.5em 0 0; }
.hero__embed .hours-table, .hero__embed table { font-size: 0.82rem; }
@media (max-width: 900px) {
  /* モバイルはドックせず、ヒーロー内容の下に折り返して積む（重なり回避）。
     section-hero は flex なので wrap させ、両子要素を全幅に。 */
  .section-hero.hero--photo.has-hero-embed,
  .section-hero.hero--color.has-hero-embed { flex-wrap: wrap; }
  .has-hero-embed .hero__inner { flex: 1 1 100%; }
  .hero__embed {
    position: static; width: auto; flex: 1 1 100%;
    margin: 0.25rem clamp(1rem, 4vw, 1.5rem) 1.5rem;
  }
}

/* ━━ ヒーロー（全幅・骨格／色はキットで上書き） ━━ */
.section-hero.hero--photo,
.section-hero.hero--color {
  position: relative; overflow: hidden;
  min-height: clamp(380px, 56vh, 560px);
  display: flex; align-items: center;
  background: none;
}

/* ━━ ご予約・お問い合わせ CTA（骨格／色はキットで上書き） ━━ */
.section-cta { background: var(--wp--preset--color--primary); color: #fff; text-align: center; padding: clamp(3rem, 6vw, 4.5rem) clamp(1rem, 4vw, 2.5rem); }
.section-cta__inner { max-width: 720px; margin: 0 auto; }
.section-cta__label { display: inline-block; font-size: 0.72rem; letter-spacing: 0.14em; font-weight: 700; opacity: 0.8; }
.section-cta__heading { color: #fff; font-size: clamp(1.6rem, 3.5vw, 2.2rem); margin: 0.3em 0; }
.section-cta__lead { color: rgba(255,255,255,0.9); margin: 0 0 1em; }
.section-cta__tel a { color: #fff; font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 800; text-decoration: none; letter-spacing: 0.04em; }
.section-cta__buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 1.4rem; }
.section-cta .cta-btn--outline { border-color: #fff !important; color: #fff !important; }
.section-cta .cta-btn--outline:hover { background: rgba(255,255,255,0.15) !important; }

/* ━━ 本文エディタの「挿入部品」（cms-*）＝フロント＆エディタ共通の体裁。トークン＝パレット追従。
   接頭辞 cms- でグローバルに当て、本文ラッパ（content-page__body / free__body / dept-detail）を問わず効かせる ━━ */
/* ステップ（番号付きカード） */
ol.cms-steps { list-style: none; counter-reset: cms-step; margin: 1.6em 0; padding: 0; }
ol.cms-steps > li {
  counter-increment: cms-step;
  position: relative;
  margin: 0 0 0.7em;
  padding: 0.9em 1.1em 0.9em 3.4em;
  background: var(--wp--preset--color--primary-light);
  border-radius: var(--wp--custom--border-radius--md, 10px);
  line-height: 1.7;
}
ol.cms-steps > li::before {
  content: counter(cms-step);
  position: absolute; left: 0.9em; top: 0.85em;
  width: 1.7em; height: 1.7em;
  display: flex; align-items: center; justify-content: center;
  background: var(--wp--preset--color--primary); color: #fff;
  border-radius: 50%; font-weight: 700; font-size: 0.82em;
}
/* 箇条書きリスト / 番号リスト（部品。標準のリストボタンの代替） */
ul.cms-list { list-style: disc; margin: 1.2em 0; padding-left: 1.6em; }
ol.cms-olist { list-style: decimal; margin: 1.2em 0; padding-left: 1.7em; }
ul.cms-list > li, ol.cms-olist > li { margin-bottom: 0.4em; line-height: 1.8; }
ul.cms-list > li::marker { color: var(--wp--preset--color--primary); }
ol.cms-olist > li::marker { color: var(--wp--preset--color--primary); font-weight: 700; }

/* Q&A */
dl.cms-qa { margin: 1.6em 0; }
dl.cms-qa dt {
  position: relative; padding: 0.6em 0 0.6em 1.9em;
  font-weight: 700; color: var(--wp--preset--color--primary-dark);
  border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 16%, transparent);
}
dl.cms-qa dt::before { content: "Q"; position: absolute; left: 0; top: 0.55em; color: var(--wp--preset--color--accent); font-weight: 800; }
dl.cms-qa dd {
  position: relative; margin: 0 0 0.6em 1.9em; padding: 0.2em 0 0.7em;
  line-height: 1.8; color: var(--wp--preset--color--text-main);
}
dl.cms-qa dd::before { content: "A"; position: absolute; left: -1.9em; top: 0.2em; color: var(--wp--preset--color--primary); font-weight: 800; }
/* ボタンリンク */
a.cms-btn {
  display: inline-block; text-decoration: none; font-weight: 700;
  background: var(--wp--preset--color--accent); color: #fff;
  padding: 0.7em 1.9em; border-radius: 999px;
}
a.cms-btn:hover { filter: brightness(0.95); }
/* 注意ボックス */
.cms-note {
  margin: 1.6em 0; padding: 1em 1.2em;
  background: color-mix(in srgb, var(--wp--preset--color--accent) 10%, transparent);
  border-left: 4px solid var(--wp--preset--color--accent);
  border-radius: 0 var(--wp--custom--border-radius--md, 10px) var(--wp--custom--border-radius--md, 10px) 0;
  line-height: 1.8;
}
/* リード文 */
.cms-lead {
  font-size: var(--wp--preset--font-size--md, 1.05rem);
  line-height: 1.9; font-weight: 500;
  color: var(--wp--preset--color--text-main);
  margin: 0 0 1.2em;
}
/* 本文中の表（cms-table ＝部品挿入 ／ content-page__body 等 ／ エディタ body に共通） */
table.cms-table,
.content-page__body table,
.dept-detail table,
.free__body table,
.mce-content-body table {
  width: 100%; border-collapse: collapse; margin: 1.6em 0;
}
table.cms-table th, table.cms-table td,
.content-page__body th, .content-page__body td,
.dept-detail th, .dept-detail td,
.free__body th, .free__body td,
.mce-content-body th, .mce-content-body td {
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--text-main) 14%, transparent);
  padding: 0.6em 0.8em; text-align: left; line-height: 1.6;
}
table.cms-table th,
.content-page__body th, .dept-detail th, .free__body th, .mce-content-body th {
  background: var(--wp--preset--color--primary-light); font-weight: 700;
}
/* 表（display:table）は直後の要素とマージンが相殺されず詰まりやすい→上スペースを確保 */
table.cms-table + *,
.content-page__body table + *,
.dept-detail table + *,
.free__body table + * { margin-top: 1.6em; }

@media (max-width: 600px) {
  table.cms-table, .content-page__body table, .dept-detail table, .free__body table { font-size: 0.9em; }
  ol.cms-steps > li { padding-left: 3em; }
}

/* エディタ内のみ（.mce-content-body）：部品ホバーで枠を出し、操作バーの対象を明示。
   フロントには .mce-content-body が無いので影響しない（base.css は editor-style でもある） */
.mce-content-body .cms-steps,
.mce-content-body .cms-list,
.mce-content-body .cms-olist,
.mce-content-body .cms-qa,
.mce-content-body .cms-note,
.mce-content-body .cms-lead,
.mce-content-body table.cms-table,
.mce-content-body .cms-btn {
  outline: 1px solid transparent;
  outline-offset: 4px;
  border-radius: 4px;
  transition: outline-color .12s ease;
}
.mce-content-body .cms-steps:hover,
.mce-content-body .cms-list:hover,
.mce-content-body .cms-olist:hover,
.mce-content-body .cms-qa:hover,
.mce-content-body .cms-note:hover,
.mce-content-body .cms-lead:hover,
.mce-content-body table.cms-table:hover,
.mce-content-body .cms-btn:hover {
  outline-color: color-mix(in srgb, #2271b1 55%, transparent);
}
/* 選択中（カーソルがある）部品は実線の青枠ではっきり囲う（Q&A 等のロック選択枠と統一感） */
.mce-content-body .cms-active,
.mce-content-body .cms-active:hover {
  outline: 2px solid #2271b1 !important;
  outline-offset: 4px;
  border-radius: 4px;
}

/* ━━ 仕上げ：本文の読みやすい幅・院長写真の充填 ━━ */
/* 長文（本文ページ・診療科目詳細）は読みやすい幅に制限 */
.content-page__body,
.dept-detail { max-width: 760px; }
/* 院長写真：枠いっぱいに表示（上寄り防止） */
.greeting__photo-wrap { position: relative; aspect-ratio: 3 / 4; }
.greeting__photo-wrap figure,
.greeting__photo-wrap .wp-block-image { position: absolute; inset: 0; margin: 0; }
.greeting__photo-wrap figure img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ━━ ルート直下＆ヘッダー内部の余白を詰める（各自で余白管理） ━━ */
.wp-site-blocks > * + * { margin-block-start: 0; }
.site-header > * + * { margin-block-start: 0; }
.site-header { --wp--style--block-gap: 0; }

/* ━━ ヘッダー上段の電話：アイコンと番号を確実に横並び中央（キャッシュ対策で強制） ━━ */
.site-header__top-right .site-topbar { display: inline-flex !important; align-items: center !important; flex-wrap: nowrap !important; }
.site-header__top-right .site-topbar__tel { display: inline-flex !important; align-items: center !important; gap: 0.4em !important; line-height: 1 !important; white-space: nowrap !important; }
.site-header__top-right .site-topbar__tel svg { width: 1.15em !important; height: 1.15em !important; display: block !important; flex-shrink: 0 !important; margin: 0 !important; }
.site-header__top-right .site-topbar__tel br { display: none !important; }

/* ━━ カード系セクションの仕上げ（等高のまま空きを目立たせない＋見出し中央） ━━ */
/* 診療案内カード：縦フレックス＋余白を詰め、「詳しく見る」を下端へ */
.departments__card-inner { display: flex; flex-direction: column; padding: 1.4rem 1.5rem !important; }
.departments__card-inner > h3 { margin: 0.55rem 0 0.3rem !important; }
.departments__card-inner > p { margin: 0; line-height: 1.7; }
.departments__more { margin-top: 0.7rem; }
/* 当院の特徴（アイコン版）：内容を上下中央に寄せて空きを上下へ分散＋余白圧縮 */
.features__card-inner--icon { justify-content: flex-start; padding: var(--wp--preset--spacing--60, 1.75rem) var(--wp--preset--spacing--60, 1.75rem) !important; }
/* 見出しを中央寄せ（診療案内・当院の特徴・院内紹介） */
.section-features .section-head,
.section-departments .section-head,
.section-facility .section-head { align-items: center; text-align: center; }
.section-features .section-head h2::after,
.section-departments .section-head h2::after,
.section-facility .section-head h2::after { margin-inline: auto; }

/* ━━ 空段落（wpautop由来）の余白を除去 ━━ */
.section-departments p:empty,
.section-features p:empty,
.section-facility p:empty,
.section-hours-news p:empty,
.departments__card-inner p:empty,
.features__card-inner p:empty { display: none !important; margin: 0 !important; }
.departments__card-inner > *:last-child { margin-bottom: 0; }

/* ═══════════════════════════════════════════════════════════════
   共通レイアウト（全キット共通・色/フォント/影はトークン追従）
   ── 旧 kit-soft.css から昇格。trust / normal / 今後のキットも同じ
      「配置（arrangement）」を継承し、各キットは色・書体・装飾のみ上書きする。
═══════════════════════════════════════════════════════════════ */

/* ── セクション見出し：中央寄せ＋サイズ＋アクセント下線 ── */
.section-head { align-items: center; text-align: center; }
.section-head__label { font-size: 0.72rem; letter-spacing: 0.14em; font-weight: 700; }
.section-head h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem); padding-bottom: 0.4em; }
.section-hours-news .section-head h2 { font-size: clamp(1.35rem, 1.15rem + 0.6vw, 1.6rem); }
.section-head h2::after {
  content: ""; display: block; width: 44px; height: 3px;
  background: var(--wp--preset--color--accent); border-radius: 999px;
  margin: 0.35em auto 0;
}
@media (min-width: 782px) {
  .section-hours-news .wp-block-columns { gap: clamp(2.5rem, 5vw, 5rem) !important; align-items: flex-start; }
  .section-hours-news .wp-block-columns > .wp-block-column { flex-basis: 0 !important; flex-grow: 1 !important; }
}

/* ── ヘッダー2段（上：ロゴ/電話/予約 ・ 下：メニュー帯）── */
.site-header__top { background: #fff; }
.site-header__top-inner { max-width: var(--wp--style--global--wide-size, 1200px); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2.5rem); padding-block: 0.45rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.site-header__top-right { display: flex; align-items: center; gap: 1.2rem; }
.site-header__top-right .site-topbar__tel { display: inline-flex; align-items: center; line-height: 1; gap: 0.4em; }
.site-header__top-right .site-topbar__tel svg { width: 1.15em; height: 1.15em; display: block; flex-shrink: 0; }
.site-topbar { display: inline-flex !important; align-items: center; gap: 0.8rem; background: transparent !important; color: var(--wp--preset--color--text-main); padding: 0 !important; }
.site-topbar__hours { color: var(--wp--preset--color--text-muted); font-size: 0.76rem; }
.site-topbar__tel { color: var(--wp--preset--color--primary) !important; font-weight: 700; font-size: 1.05rem; gap: 0.3em; }

.site-header__nav-row { background: var(--wp--preset--color--primary); }
.site-header__nav-inner { max-width: var(--wp--style--global--wide-size, 1200px); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2.5rem); padding-block: 0; }
.site-header__nav-row .site-header__nav { width: 100%; }
.site-header__nav-row .primary-menu { justify-content: center; gap: 0.6rem; }
.site-header__nav-row .site-header__nav a { display: inline-block; padding: 0.85em 1.1em; color: #fff; font-weight: 700; border-radius: 0; }
.site-header__nav-row .site-header__nav a:hover { color: #fff; background: rgba(255,255,255,0.15); }
/* ドロップダウン（PC=hover/focus、SP=ドロワー内で常時展開） */
.site-header__nav-row .primary-menu > li.menu-item-has-children { position: relative; }
.site-header__nav-row .menu-item-has-children > a::after { content: "▾"; margin-left: 0.35em; font-size: 0.8em; line-height: 1; }
.site-header__nav-row .primary-menu .sub-menu { list-style: none; margin: 0; padding: 0.4rem; display: block; position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px); min-width: 180px; background: #fff; border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,0.16); z-index: 60; opacity: 0; visibility: hidden; transition: opacity .2s ease, transform .2s ease; }
.site-header__nav-row .menu-item-has-children:hover > .sub-menu,
.site-header__nav-row .menu-item-has-children:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.site-header__nav-row .primary-menu .sub-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.site-header__nav-row .sub-menu a { display: block; color: var(--wp--preset--color--text-main) !important; font-weight: 600; padding: 0.55em 0.9em !important; border-radius: 8px; white-space: nowrap; text-align: left; }
.site-header__nav-row .sub-menu a:hover { color: var(--wp--preset--color--primary-dark) !important; background: var(--wp--preset--color--primary-light) !important; }
@media (min-width: 901px) {
  .site-header__nav-row .primary-menu > li { position: relative; }
  .site-header__nav-row .primary-menu > li + li::before { content: ""; position: absolute; left: -0.3rem; top: 50%; transform: translateY(-50%); height: 1.1em; border-left: 2px dotted rgba(255,255,255,0.5); }
}
@media (max-width: 900px) {
  .site-nav-toggle { display: flex; }
  .site-header__top-right { gap: 0.6rem; }
  .site-topbar__hours { display: none; }
  .site-header__nav-row { max-height: 0; overflow: hidden; opacity: 0; border-top: none; transition: max-height .3s ease, opacity .2s; }
  body.nav-open .site-header__nav-row { max-height: 80vh; opacity: 1; border-top: 1px solid rgba(255,255,255,0.25); }
  .site-header__nav-row .primary-menu { flex-direction: column; align-items: stretch; gap: 0; }
  .site-header__nav-row .primary-menu > li { border-bottom: 1px solid rgba(255,255,255,0.18); }
  .site-header__nav-row .site-header__nav a { display: block; padding: 0.9em 0.4em; }
  .site-header__nav-row .primary-menu .sub-menu { position: static; transform: none; opacity: 1; visibility: visible; background: transparent; box-shadow: none; border-radius: 0; padding: 0 0 0.4rem 1.2rem; min-width: 0; }
  .site-header__nav-row .sub-menu a { color: rgba(255,255,255,0.92) !important; background: transparent !important; padding: 0.6em 0.4em !important; font-weight: 600; }
  .site-header__nav-row .sub-menu a:hover { color: #fff !important; background: rgba(255,255,255,0.12) !important; }
}

/* ── 院内紹介：トップのスライダー＋アーカイブのグリッド ── */
.facility__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--wp--preset--spacing--60, 1.5rem); margin-top: var(--wp--preset--spacing--70, 2rem); align-items: start; }
.facility__card-inner { display: block; background: #fff; border-radius: var(--wp--custom--border-radius--md, 12px); overflow: hidden; box-shadow: var(--wp--custom--shadow--card, 0 4px 16px rgba(0,0,0,0.08)); text-decoration: none; color: inherit; transition: transform .2s, box-shadow .2s; }
a.facility__card-inner:hover { transform: translateY(-3px); }
.facility__photo { position: relative; aspect-ratio: 4 / 3; background: var(--wp--preset--color--bg-soft); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.facility__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.facility__photo-empty { color: var(--wp--preset--color--primary); opacity: 0.4; }
.facility__body { padding: 1rem 1.1rem 1.2rem; }
.facility__title { font-size: 1.05rem; margin: 0 0 0.4em; }
.facility__desc { font-size: 0.9rem; color: var(--wp--preset--color--text-muted); line-height: 1.7; margin: 0; }
.facility__more { display: inline-block; margin-top: 0.7em; color: var(--wp--preset--color--primary); font-weight: 700; font-size: 0.85rem; }
.facility__empty { text-align: center; color: var(--wp--preset--color--text-muted); }
.facility__slider { position: relative; margin-top: var(--wp--preset--spacing--70, 2rem); }
.facility__track { display: flex; gap: 1.4rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; padding: 0.5rem 0.25rem 1.2rem; scrollbar-width: none; }
.facility__track::-webkit-scrollbar { display: none; }
.facility__track > .facility__card { flex: 0 0 calc((100% - 2 * 1.4rem) / 3); scroll-snap-align: start; display: flex; flex-direction: column; }
.facility__track .facility__card-inner { flex: 1; display: flex; flex-direction: column; width: 100%; }
.facility__track .facility__photo { flex: 0 0 auto; }
.facility__track .facility__body { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.facility__nav { position: absolute; top: 38%; transform: translateY(-50%); z-index: 3; width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer; background: #fff; color: var(--wp--preset--color--primary); box-shadow: 0 4px 14px rgba(0,0,0,0.14); font-size: 1.6rem; line-height: 1; display: flex; align-items: center; justify-content: center; transition: background .2s, color .2s, opacity .2s; }
.facility__nav:hover { background: var(--wp--preset--color--primary); color: #fff; }
.facility__nav--prev { left: -10px; }
.facility__nav--next { right: -10px; }
.facility__nav:disabled { opacity: 0.3; cursor: default; pointer-events: none; }
.facility__dots { display: flex; justify-content: center; gap: 0.5rem; margin-top: 0.7rem; }
.facility__dot { width: 8px; height: 8px; border-radius: 50%; border: none; padding: 0; cursor: pointer; background: color-mix(in srgb, var(--wp--preset--color--primary) 30%, transparent); transition: background .2s, transform .2s; }
.facility__dot.is-active { background: var(--wp--preset--color--accent); transform: scale(1.25); }
.facility__more-wrap { text-align: center; margin-top: 1.6rem; }
.facility__more-btn { display: inline-block; padding: 0.7em 1.8em; border-radius: var(--wp--custom--border-radius--pill, 999px); border: 1.5px solid var(--wp--preset--color--primary); color: var(--wp--preset--color--primary); font-weight: 700; text-decoration: none; transition: background .2s, color .2s; }
.facility__more-btn:hover { background: var(--wp--preset--color--primary); color: #fff; }
@media (max-width: 900px) { .facility__track > .facility__card { flex-basis: calc((100% - 1.4rem) / 2); } .facility__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .facility__track > .facility__card { flex-basis: 82%; } .facility__nav { display: none; } .facility__grid { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════════════
   ヘッダーレイアウト軸（統合 / 透過オーバーレイ / サイドバー）
   ── ヘッダー形状は clinic_get_active_header() のグローバル設定でキット非依存。
      旧 kit-soft.css から昇格し、trust / normal / 今後のキットも同じ配置を継承。
      色・影・角丸はトークン追従。
═══════════════════════════════════════════════════════════════ */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ヘッダー：1段レイアウト（構造）軸 body.header-integrated / body.header-overlay
   ロゴ左・メニュー中央寄り・右にアクション（電話＋WEB予約）
   ※構造（flex配置・メニュー・ドロップダウン・ドロワー）は両者で共有。
     透過オーバーレイ固有の見た目（透過・白文字・スクロール不透明化）は後段のスキンで定義。
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
:is(.header-integrated, .header-overlay) .site-header { background: #fff; box-shadow: 0 1px 0 rgba(0,0,0,0.06); }
:is(.header-integrated, .header-overlay) .site-header__bar {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  max-width: 1360px; /* 広い画面の余白を活用し、メニューに余裕を出す（縦は不変） */
  margin-inline: auto;
  padding: 0.7rem clamp(1rem, 4vw, 2.5rem);
}
:is(.header-integrated, .header-overlay) .site-header__name { font-size: 1.25rem; }
:is(.header-integrated, .header-overlay) .site-header__nav-wrap { flex: 1 1 auto; min-width: 0; }
:is(.header-integrated, .header-overlay) .site-header__actions { display: flex; align-items: center; gap: 0.9rem; margin-left: auto; flex-shrink: 0; flex-wrap: nowrap; }
/* アクション内の電話を1行インラインに（縦積み防止） */
:is(.header-integrated, .header-overlay) .site-header__actions .site-topbar { display: inline-flex !important; align-items: center !important; flex-wrap: nowrap !important; }
:is(.header-integrated, .header-overlay) .site-header__actions .site-topbar__tel {
  display: inline-flex !important; align-items: center !important; gap: 0.4em !important; line-height: 1 !important; white-space: nowrap !important;
  font-weight: 700; font-size: 0.98rem; color: var(--wp--preset--color--primary) !important; text-decoration: none;
}
:is(.header-integrated, .header-overlay) .site-header__actions .site-topbar__tel svg { width: 1.1em !important; height: 1.1em !important; display: inline-block !important; vertical-align: middle !important; flex-shrink: 0 !important; margin: 0 !important; }

:is(.header-integrated, .header-overlay) .site-header__nav .primary-menu {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 0.12rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
:is(.header-integrated, .header-overlay) .site-header__nav a {
  display: inline-block;
  color: var(--wp--preset--color--text-main);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.5em 0.72em;
  border-radius: var(--wp--custom--border-radius--sm, 8px);
  text-decoration: none;
  white-space: nowrap;
}
:is(.header-integrated, .header-overlay) .site-header__nav a:hover {
  color: var(--wp--preset--color--primary);
  background: var(--wp--preset--color--primary-light);
}

/* 診療案内ドロップダウン（統合版・白ヘッダー） */
:is(.header-integrated, .header-overlay) .site-header__nav .menu-item-has-children { position: relative; }
:is(.header-integrated, .header-overlay) .site-header__nav .menu-item-has-children > a::after { content: "▾"; margin-left: 0.3em; font-size: 0.8em; }
:is(.header-integrated, .header-overlay) .site-header__nav .primary-menu .sub-menu {
  display: block;
  list-style: none; margin: 0; padding: 0.4rem;
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 180px; background: #fff;
  border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,0.16);
  z-index: 60; opacity: 0; visibility: hidden;
  transition: opacity .2s ease, transform .2s ease;
}
:is(.header-integrated, .header-overlay) .site-header__nav .menu-item-has-children:hover > .sub-menu,
:is(.header-integrated, .header-overlay) .site-header__nav .menu-item-has-children:focus-within > .sub-menu {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
:is(.header-integrated, .header-overlay) .site-header__nav .primary-menu .sub-menu::before {
  content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px;
}
:is(.header-integrated, .header-overlay) .site-header__nav .sub-menu a {
  display: block; color: var(--wp--preset--color--text-main) !important;
  font-weight: 600; padding: 0.55em 0.9em !important; border-radius: 8px; white-space: nowrap; text-align: left;
}
:is(.header-integrated, .header-overlay) .site-header__nav .sub-menu a:hover {
  color: var(--wp--preset--color--primary-dark) !important;
  background: var(--wp--preset--color--primary-light) !important;
}

/* 統合版：狭い画面は早めにハンバーガー（ロゴ＋トグル → ドロワー） */
@media (max-width: 1100px) {
  :is(.header-integrated, .header-overlay) .site-nav-toggle { display: flex; }
  :is(.header-integrated, .header-overlay) .site-header__nav-wrap {
    position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; box-shadow: 0 8px 20px rgba(0,0,0,0.12);
    max-height: 0; overflow: hidden; opacity: 0; pointer-events: none;
    transition: max-height .3s ease, opacity .2s;
    z-index: 50;
  }
  body:is(.header-integrated, .header-overlay).nav-open .site-header__nav-wrap {
    max-height: 80vh; opacity: 1; pointer-events: auto;
  }
  :is(.header-integrated, .header-overlay) .site-header__nav .primary-menu { flex-direction: column; align-items: stretch; gap: 0; padding: 0.6rem clamp(1rem,4vw,2.5rem) 1rem; }
  :is(.header-integrated, .header-overlay) .site-header__nav .primary-menu > li { border-bottom: 1px solid var(--wp--preset--color--primary-light); }
  :is(.header-integrated, .header-overlay) .site-header__nav a { display: block; padding: 0.9em 0.4em; }
  /* ドロワー内：サブメニューは静的に展開 */
  :is(.header-integrated, .header-overlay) .site-header__nav .primary-menu .sub-menu {
    position: static; transform: none; opacity: 1; visibility: visible;
    box-shadow: none; border-radius: 0; min-width: 0; padding: 0 0 0.4rem 1.2rem;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ヘッダー：透過オーバーレイ・スキン（body.header-overlay）
   構造は上の1段レイアウトを共有。ここでは「透過↔ソリッド」の見た目だけを定義。
   フロント＋写真ヒーロー（body.has-hero-photo）のときのみ透過。
   それ以外（内部ページ・色/イラストヒーロー）はソリッド白で安全フォールバック。
   スクロールは既存JS（.site-header.is-scrolled）を流用＝JS改修なし。
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
body.header-overlay { --header-h: 84px; }

/* 透過↔ソリッドを滑らかに */
.header-overlay .site-header,
.header-overlay .site-header__name,
.header-overlay .site-header__catch,
.header-overlay .site-header__en,
.header-overlay .site-header__nav a,
.header-overlay .site-header__actions .site-topbar__tel,
.header-overlay .site-nav-toggle__bar {
  transition: background-color .25s ease, color .25s ease, box-shadow .25s ease;
}

/* ── 透過状態（最上部・写真ヒーロー上）＝フロスト白＋ブランド文字 ── */
body.header-overlay.has-hero-photo .site-header:not(.is-scrolled) {
  background: transparent;
  box-shadow: none;
  backdrop-filter: none; /* blur は ::before のフロスト層が担当 */
  -webkit-backdrop-filter: none;
}
/* フロスト白ベール：上部に白の半透明＋ぼかしを敷き、下端は mask で写真へフェード */
body.header-overlay.has-hero-photo .site-header:not(.is-scrolled)::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: calc(var(--header-h) + 72px);
  background: linear-gradient(to bottom, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.45) 45%, rgba(255,255,255,0) 100%);
  backdrop-filter: blur(7px) saturate(1.04);
  -webkit-backdrop-filter: blur(7px) saturate(1.04);
  -webkit-mask: linear-gradient(to bottom, #000 25%, transparent 100%);
  mask: linear-gradient(to bottom, #000 25%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}
/* バーの中身はフロスト層より前面で鮮明に */
body.header-overlay.has-hero-photo .site-header:not(.is-scrolled) .site-header__bar {
  position: relative; z-index: 1;
}
/* ロゴ名をブランド色（キャッチ=primary/英字=muted は base のまま、メニュー・電話・トグルは
   統合/base の濃色がそのまま効く＝白指定を入れないことで濃色化） */
/* ロゴ名：ブランドの軸として存在感UP（黒のまま・両状態で一貫） */
body.header-overlay .site-header__name { font-size: 1.55rem; letter-spacing: 0.01em; }
/* 透過状態のみ：黒文字＋薄い影でフロスト白／写真から浮かせる */
body.header-overlay.has-hero-photo .site-header:not(.is-scrolled) .site-header__name {
  color: var(--wp--preset--color--text-main);
  text-shadow: 0 1px 3px rgba(0,0,0,0.18);
}
/* 現在地：accent の下線で位置を明示 */
body.header-overlay.has-hero-photo .site-header:not(.is-scrolled) .site-header__nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--wp--preset--color--accent); }
/* 電話アイコンだけ accent 差し色（番号は統合の primary。svg は stroke=currentColor のため color で着色） */
body.header-overlay.has-hero-photo .site-header:not(.is-scrolled) .site-header__actions .site-topbar__tel svg { color: var(--wp--preset--color--accent); }
/* WEB予約：accent 塗りのまま、白ベール上に軽い影 */
body.header-overlay.has-hero-photo .site-header:not(.is-scrolled) .site-header__cta .cta-btn--accent { box-shadow: 0 4px 12px rgba(0,0,0,0.12); }

/* ── ヒーロー引き上げ（写真フロントのみ）：ヘッダーを画像に重ねる ──
   バーの高さを --header-h に固定（border-box）し、ヒーローを同量だけ引き上げて隙間ゼロで重ねる */
body.header-overlay.has-hero-photo .site-header__bar { box-sizing: border-box; min-height: var(--header-h); }
body.header-overlay.has-hero-photo .section-hero { margin-top: calc(-1 * var(--header-h)); }
body.header-overlay.has-hero-photo .section-hero .hero__inner {
  padding-top: calc(var(--header-h) + var(--wp--preset--spacing--80, 4rem));
}

/* ヒーローのラベル（内科・小児科）を白透過 pill → ブランド色 pill に（差し色） */
body.header-overlay.has-hero-photo .hero__label {
  background: color-mix(in srgb, var(--wp--preset--color--primary) 80%, transparent);
  color: #fff;
}

/* ── モバイル：白ドロワー内のリンクは暗色へ戻す（白文字だと白背景で見えないため） ── */
@media (max-width: 1100px) {
  body.header-overlay.has-hero-photo .site-header:not(.is-scrolled) .site-header__nav a {
    color: var(--wp--preset--color--text-main);
  }
}

/* ── 透過状態（明るいヒーロー：collage/card/illust の bg-soft 地の上） ──
   写真ヒーローの白フロストは不要＝素通し透過＋濃色文字のまま重ねる。
   スクロールで白ヘッダーに戻る挙動・引き上げ量は has-hero-photo と同一。 */
body.header-overlay.has-hero-light .site-header:not(.is-scrolled) {
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.header-overlay.has-hero-light .site-header__bar { box-sizing: border-box; min-height: var(--header-h); }
body.header-overlay.has-hero-light .section-hero { margin-top: calc(-1 * var(--header-h)); }
body.header-overlay.has-hero-light .section-hero .hero__inner {
  padding-top: calc(var(--header-h) + var(--wp--preset--spacing--80, 4rem) * var(--space-scale, 1));
}
/* 現在地は accent 下線（has-hero-photo と同じ流儀） */
body.header-overlay.has-hero-light .site-header:not(.is-scrolled) .site-header__nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--wp--preset--color--accent); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ヘッダー：左サイドバー（縦固定ナビ）軸 body.header-sidebar
   白ベース＋ブランド差し色。サブメニューは右フライアウト。
   デスクトップ＝左固定カラム＋本文オフセット。モバイル＝上バー＋ドロワー（既存JS流用）。
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
body.header-sidebar { --sidebar-w: 264px; }
.header-sidebar .site-header__sidebar { display: flex; flex-direction: column; }
.header-sidebar .site-header__brand { gap: 0.7rem; }

/* ── デスクトップ：左固定サイドバー＋本文オフセット ── */
@media (min-width: 1101px) {
  body.header-sidebar { padding-left: var(--sidebar-w); }
  body.header-sidebar .site-header {
    position: fixed;
    top: var(--wp-admin--admin-bar--height, 0px);
    left: 0;
    width: var(--sidebar-w);
    height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
    background: #fff;
    border-right: 1px solid color-mix(in srgb, var(--wp--preset--color--text-main) 10%, transparent);
    box-shadow: none;
    z-index: 100;
  }
  .header-sidebar .site-header__sidebar { min-height: 100%; padding: 1.6rem 1.1rem; }
  .header-sidebar .site-header__sidebar-head { margin-bottom: 1.3rem; }
  .header-sidebar .site-header__sidebar-body { display: flex; flex-direction: column; flex: 1 1 auto; }

  /* 縦メニュー */
  .header-sidebar .site-header__nav .primary-menu {
    display: flex; flex-direction: column; align-items: stretch;
    gap: 0.15rem; list-style: none; margin: 0; padding: 0;
  }
  .header-sidebar .site-header__nav a {
    display: block; padding: 0.7em 0.8em;
    color: var(--wp--preset--color--text-main); font-weight: 700;
    border-radius: 8px; text-decoration: none;
  }
  .header-sidebar .site-header__nav a:hover {
    color: var(--wp--preset--color--primary);
    background: var(--wp--preset--color--primary-light);
  }
  .header-sidebar .site-header__nav a[aria-current="page"] {
    color: var(--wp--preset--color--primary);
    background: transparent;
    box-shadow: inset 3px 0 0 var(--wp--preset--color--accent); /* 左の縦ラインのみ（囲いなし・直線） */
    border-radius: 0;
  }

  /* 診療案内：右フライアウト */
  .header-sidebar .site-header__nav .menu-item-has-children { position: relative; }
  .header-sidebar .site-header__nav .menu-item-has-children > a::after {
    content: "\25B8"; float: right; font-size: 0.85em; opacity: 0.7;
  }
  .header-sidebar .site-header__nav .primary-menu .sub-menu {
    display: block; /* base の .sub-menu{display:none} を上書き（これが無いとフライアウトが出ない） */
    position: absolute; left: calc(100% + 8px); top: 0;
    min-width: 200px; list-style: none; margin: 0; padding: 0.4rem;
    background: #fff; border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,0.16);
    opacity: 0; visibility: hidden; transform: translateX(-6px);
    transition: opacity .2s ease, transform .2s ease; z-index: 60;
  }
  .header-sidebar .site-header__nav .menu-item-has-children:hover > .sub-menu,
  .header-sidebar .site-header__nav .menu-item-has-children:focus-within > .sub-menu {
    opacity: 1; visibility: visible; transform: translateX(0);
  }
  .header-sidebar .site-header__nav .primary-menu .sub-menu::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: -8px; width: 8px;
  }
  .header-sidebar .site-header__nav .sub-menu a { padding: 0.5em 0.8em; font-weight: 600; white-space: nowrap; }

  /* アクション（電話＋WEB予約）はメニューのすぐ下に（最下部ピン留めしない＝見切れ防止） */
  .header-sidebar .site-header__actions {
    margin-top: 1.5rem; display: flex; flex-direction: column; align-items: stretch;
    gap: 0.7rem; padding-top: 1.2rem;
    border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--text-main) 9%, transparent);
  }
  .header-sidebar .site-header__actions .site-topbar { display: flex; justify-content: center; }
  .header-sidebar .site-header__actions .site-topbar__tel {
    display: inline-flex; align-items: center; gap: 0.45em;
    color: var(--wp--preset--color--primary); font-weight: 700; text-decoration: none;
  }
  /* アイコンは番号と同じメインカラー（currentColor 継承） */
  .header-sidebar .site-header__actions .site-topbar__tel svg {
    width: 1.1em; height: 1.1em; flex-shrink: 0;
  }
  .header-sidebar .site-header__actions .site-header__cta,
  .header-sidebar .site-header__actions .site-header__cta .wp-block-button { display: block; }
  .header-sidebar .site-header__actions .cta-btn { display: block; text-align: center; }
}

/* ── モバイル（≤1100）：上バー＋ドロワー（既存 body.nav-open / #site-nav を流用） ── */
@media (max-width: 1100px) {
  body.header-sidebar { padding-left: 0; }
  body.header-sidebar .site-header {
    position: sticky; top: 0; left: auto; width: auto; height: auto;
    background: #fff; border-right: none; box-shadow: 0 1px 0 rgba(0,0,0,0.06); z-index: 100;
  }
  .header-sidebar .site-header__sidebar-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.7rem clamp(1rem, 4vw, 2.5rem);
  }
  .header-sidebar .site-nav-toggle { display: flex; }

  /* ドロワー本体（メニュー＋アクションを内包） */
  .header-sidebar .site-header__sidebar-body {
    position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; box-shadow: 0 8px 20px rgba(0,0,0,0.12);
    max-height: 0; overflow: hidden; opacity: 0; pointer-events: none;
    transition: max-height .3s ease, opacity .2s; z-index: 50;
  }
  body.header-sidebar.nav-open .site-header__sidebar-body {
    max-height: 85vh; overflow-y: auto; opacity: 1; pointer-events: auto;
  }
  .header-sidebar .site-header__nav .primary-menu {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    list-style: none; margin: 0; padding: 0.4rem clamp(1rem,4vw,2.5rem) 0.6rem;
  }
  .header-sidebar .site-header__nav .primary-menu > li { border-bottom: 1px solid var(--wp--preset--color--primary-light); }
  .header-sidebar .site-header__nav a { display: block; padding: 0.9em 0.4em; color: var(--wp--preset--color--text-main); font-weight: 700; text-decoration: none; }
  /* ドロワー内：サブメニューはインライン展開（フライアウト解除） */
  .header-sidebar .site-header__nav .primary-menu .sub-menu {
    display: block; position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border-radius: 0; min-width: 0; margin: 0;
    list-style: none; padding: 0 0 0.4rem 1.2rem; background: transparent;
  }
  .header-sidebar .site-header__nav .menu-item-has-children > a::after { content: ""; }
  /* アクション（電話＋予約）をドロワー下部に */
  .header-sidebar .site-header__actions {
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
    padding: 0.8rem clamp(1rem,4vw,2.5rem) 1rem;
  }
  .header-sidebar .site-header__actions .site-topbar__tel {
    display: inline-flex; align-items: center; gap: 0.45em;
    color: var(--wp--preset--color--primary); font-weight: 700; text-decoration: none;
  }
  .header-sidebar .site-header__actions .site-topbar__tel svg { width: 1.1em; height: 1.1em; }
}

/* ── サイドバー配色トーン（body.sb-light 既定＝上の白ベース。dark / soft を上書き） ── */

/* dark：ブランド濃色パネル（背景・ロゴ・トグルは両ブレークポイント共通＝トップバーも濃色） */
.header-sidebar.sb-dark .site-header { background: var(--wp--preset--color--primary-dark); }
.header-sidebar.sb-dark .site-header__name { color: #fff; }
.header-sidebar.sb-dark .site-header__catch { color: rgba(255,255,255,0.82); }
.header-sidebar.sb-dark .site-header__en { color: rgba(255,255,255,0.6); }
.header-sidebar.sb-dark .site-nav-toggle__bar { background: #fff; }
@media (min-width: 1101px) {
  .header-sidebar.sb-dark .site-header { border-right-color: rgba(255,255,255,0.14); }
  .header-sidebar.sb-dark .site-header__nav a { color: rgba(255,255,255,0.86); }
  .header-sidebar.sb-dark .site-header__nav a:hover { color: #fff; background: rgba(255,255,255,0.12); }
  .header-sidebar.sb-dark .site-header__nav a[aria-current="page"] { color: #fff; background: transparent; box-shadow: inset 3px 0 0 var(--wp--preset--color--accent); border-radius: 0; }
  .header-sidebar.sb-dark .site-header__actions { border-top-color: rgba(255,255,255,0.14); }
  .header-sidebar.sb-dark .site-header__actions .site-topbar__tel { color: #fff; }
  /* 右フライアウトは白パネルのまま → リンクは暗色に */
  .header-sidebar.sb-dark .site-header__nav .sub-menu a { color: var(--wp--preset--color--text-main); }
  .header-sidebar.sb-dark .site-header__nav .sub-menu a:hover { color: var(--wp--preset--color--primary-dark); background: var(--wp--preset--color--primary-light); }
}

/* soft：淡いブランドトーン（bg-soft 面・メニューは濃色のまま） */
.header-sidebar.sb-soft .site-header { background: var(--wp--preset--color--bg-soft); }
@media (min-width: 1101px) {
  .header-sidebar.sb-soft .site-header { border-right-color: color-mix(in srgb, var(--wp--preset--color--text-main) 8%, transparent); }
  /* 淡背景でも hover が分かるよう少し強めの差し色（現在地は左ラインのみ＝base 継承） */
  .header-sidebar.sb-soft .site-header__nav a:hover { background: color-mix(in srgb, var(--wp--preset--color--primary) 14%, transparent); }
}

/* ═══════════════════════════════════════════════════════════════
   個別ページ共通レイアウト（診療科目/ブログ/初めての方へ/院長紹介/採用/院内紹介ギャラリー）
   ── 旧 kit-soft.css から昇格・全キット共通。配置(構造)を担い、
      色・影・角丸はトークン追従、各キットは装飾のみ上書きする。
═══════════════════════════════════════════════════════════════ */
/* 11. 診療科目 個別ページ */
/* パンくず */
.dept-breadcrumb {
  font-size: 0.8rem;
  color: var(--wp--preset--color--text-muted);
  margin-bottom: 1.2rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3em;
}
.dept-breadcrumb a {
  color: var(--wp--preset--color--primary);
  text-decoration: none;
}
.dept-breadcrumb a:hover { text-decoration: underline; }

/* ヒーローバー */
.dept-hero__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.8rem;
}
.dept-hero__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: var(--wp--custom--border-radius--lg, 24px);
  background: #fff;
  color: var(--wp--preset--color--primary);
  box-shadow: var(--wp--custom--shadow--card);
  flex-shrink: 0;
}
.dept-hero__icon svg { display: block; }
.dept-hero__title {
  font-size: var(--wp--preset--font-size--3xl, 2.25rem); /* 他ページのヒーローh1と統一（フォールバック付き） */
  font-weight: 800;
  line-height: 1.25;
  margin: 0;
}
.dept-hero__lead {
  font-size: var(--wp--preset--font-size--md);
  color: var(--wp--preset--color--text-muted);
  line-height: 1.8;
  margin: 0;
  max-width: 640px;
}

/* 本文 */
.dept-detail {
  line-height: 1.9;
  max-width: 720px;
}
.dept-detail h2 {
  font-size: var(--wp--preset--font-size--xl);
  font-weight: 700;
  margin: 2em 0 0.6em;
  padding-bottom: 0.4em;
  border-bottom: 2px solid var(--wp--preset--color--primary-light);
}
.dept-detail h3 {
  font-size: var(--wp--preset--font-size--lg);
  font-weight: 700;
  margin: 1.6em 0 0.5em;
}
.dept-detail p { margin: 0 0 1em; }
.dept-detail ul, .dept-detail ol { margin: 0 0 1em; padding-left: 1.5em; }
.dept-detail li { margin-bottom: 0.4em; }

/* 配下の詳しいページ一覧 */
.dept-children {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--wp--preset--color--primary-light);
}
.dept-children__label {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--wp--preset--color--primary);
  margin: 0 0 0.8rem;
}
.dept-children__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.dept-children__item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.9em 1.1em;
  background: #fff;
  border: 1px solid var(--wp--preset--color--primary-light);
  border-radius: var(--wp--custom--border-radius--md, 12px);
  text-decoration: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.dept-children__item:hover {
  border-color: var(--wp--preset--color--primary);
  box-shadow: var(--wp--custom--shadow--card);
}
.dept-children__icon {
  display: inline-flex; flex-shrink: 0;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--wp--preset--color--primary-light);
  color: var(--wp--preset--color--primary);
  align-items: center; justify-content: center;
}
.dept-children__text { flex: 1; display: flex; flex-direction: column; }
.dept-children__text strong { color: var(--wp--preset--color--text-main); font-size: 1rem; }
.dept-children__desc { color: var(--wp--preset--color--text-muted); font-size: 0.82rem; margin-top: 0.15em; }
.dept-children__arrow { color: var(--wp--preset--color--primary); flex-shrink: 0; }

/* 戻るリンク */
.dept-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  color: var(--wp--preset--color--primary);
  font-weight: 700;
  font-size: var(--wp--preset--font-size--sm);
  text-decoration: none;
  border: 1px solid var(--wp--preset--color--primary-light);
  border-radius: var(--wp--custom--border-radius--pill);
  padding: 0.5em 1.2em;
  transition: background 0.2s;
}
.dept-back-link:hover { background: var(--wp--preset--color--primary-light); }
.dept-back-link svg { display: block; }

/* ブログ：カテゴリーバッジ（個別・一覧共通） */
.blog-cat {
  display: inline-block;
  padding: 0.1em 0.7em;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  background: var(--wp--preset--color--primary-light);
  color: var(--wp--preset--color--primary-dark);
}
/* ブログ個別：アイキャッチ */
.blog-single__thumb {
  margin: 0 0 2rem;
  border-radius: var(--wp--custom--border-radius--lg, 18px);
  overflow: hidden;
}
.blog-single__thumb img { width: 100%; height: auto; display: block; }

/* ブログ一覧：カードグリッド */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--wp--preset--spacing--60, 1.75rem);
  margin-top: var(--wp--preset--spacing--70, 2rem);
}
.blog-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--wp--custom--border-radius--lg, 18px);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 4px 16px rgba(20, 40, 50, 0.08);
  transition: transform .2s, box-shadow .2s;
}
.blog-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(20, 40, 50, 0.16); }
.blog-card__thumb {
  aspect-ratio: 16 / 10;
  background: var(--wp--preset--color--bg-soft);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.blog-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 画像なし：タイポグラフィ・カバー（グラデ地＋タイトル） */
.blog-card__thumb--text {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--wp--preset--color--primary) 16%, #fff),
    var(--wp--preset--color--bg-soft));
  padding: 1.1rem 1.2rem;
  text-align: center;
}
.blog-card__cover-title {
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--wp--preset--color--primary-dark);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-card__body { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: 0.4rem; }
.blog-card__meta { display: flex; align-items: center; gap: 0.6rem; margin: 0; }
.blog-card__meta .news__date { color: var(--wp--preset--color--text-muted); font-size: 0.8rem; }
.blog-card__title { font-size: 1.05rem; margin: 0; line-height: 1.5; }
.blog-card__excerpt { font-size: 0.85rem; color: var(--wp--preset--color--text-muted); line-height: 1.7; margin: 0; }
@media (max-width: 900px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .blog-grid { grid-template-columns: 1fr; } }

/* その他の科目 */
.dept-others__label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--wp--preset--color--primary);
  text-transform: uppercase;
  margin: 0 0 0.8rem;
}
.dept-others__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.dept-others__item {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  background: #fff;
  border: 1px solid var(--wp--preset--color--primary-light);
  border-radius: var(--wp--custom--border-radius--pill);
  padding: 0.45em 1em;
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 600;
  color: var(--wp--preset--color--text-main);
  text-decoration: none;
  transition: border-color 0.2s, background 0.2s;
}
.dept-others__item:hover {
  border-color: var(--wp--preset--color--primary);
  background: var(--wp--preset--color--primary-light);
}
.dept-others__icon {
  display: inline-flex;
  color: var(--wp--preset--color--primary);
}
.dept-others__icon svg { display: block; }

/* 11-b. 初めての方へ */
.firstvisit__breadcrumb {
  font-size: 0.8rem;
  color: var(--wp--preset--color--text-muted);
}
.firstvisit__breadcrumb a { color: var(--wp--preset--color--primary); text-decoration: none; }
.firstvisit__breadcrumb a:hover { text-decoration: underline; }

.firstvisit__section { margin-bottom: var(--wp--preset--spacing--80, 4rem); }
.firstvisit__title {
  font-size: var(--wp--preset--font-size--xl, 1.5rem);
  font-weight: 700;
  padding-left: 0.6em;
  border-left: 5px solid var(--wp--preset--color--primary);
  margin: 0 0 1.2rem;
}

/* お持ちいただくもの */
.firstvisit__belongings {
  background: var(--wp--preset--color--bg-soft);
  border-radius: var(--wp--custom--border-radius--lg, 18px);
  padding: 1.4rem 1.6rem;
}
.firstvisit__belongings ul { list-style: none; margin: 0; padding: 0; }
.firstvisit__belongings li {
  display: flex; gap: 0.8rem; align-items: flex-start;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--wp--preset--color--primary-light);
}
.firstvisit__belongings li:last-child { border-bottom: none; }
.firstvisit__check { color: var(--wp--preset--color--primary); flex-shrink: 0; display: inline-flex; }
.firstvisit__belongings strong { display: block; font-size: 1rem; }
.firstvisit__item-desc { display: block; color: var(--wp--preset--color--text-muted); font-size: 0.875rem; margin-top: 0.2em; }
.firstvisit__note {
  display: flex; gap: 0.5em;
  background: rgba(224,163,94, 0.16);
  border: 1px solid rgba(224,163,94, 0.5);
  border-radius: var(--wp--custom--border-radius--md, 8px);
  padding: 0.9em 1.1em;
  font-size: 0.875rem;
  margin: 1.2rem 0 0;
}

/* ご予約について */
.firstvisit__reserve { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.firstvisit__rcard {
  background: #fff;
  border: 1px solid var(--wp--preset--color--primary-light);
  border-radius: var(--wp--custom--border-radius--lg, 18px);
  padding: 1.6rem;
}
.firstvisit__ricon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: var(--wp--custom--border-radius--md, 12px);
  background: var(--wp--preset--color--primary-light); color: var(--wp--preset--color--primary);
  margin-bottom: 0.8rem;
}
.firstvisit__rcard h3 { font-size: 1.1rem; margin: 0 0 0.5rem; }
.firstvisit__rcard p { color: var(--wp--preset--color--text-muted); font-size: 0.9rem; margin: 0 0 1.2rem; }
.firstvisit__rbtn {
  display: inline-block;
  background: var(--wp--preset--color--primary); color: #fff;
  font-weight: 700; text-decoration: none;
  padding: 0.7em 1.6em; border-radius: var(--wp--custom--border-radius--pill, 999px);
}
.firstvisit__rbtn--tel { background: var(--wp--preset--color--accent); }

/* 診察の流れ（タイムライン） */
.firstvisit__flow { list-style: none; margin: 0; padding: 0; }
.firstvisit__step { display: flex; gap: 1rem; position: relative; padding-bottom: 1.6rem; }
.firstvisit__step:not(:last-child)::before {
  content: ""; position: absolute; left: 24px; top: 48px; bottom: 0;
  width: 2px; background: var(--wp--preset--color--primary-light);
}
.firstvisit__step-no {
  flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%;
  background: var(--wp--preset--color--primary); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1;
  z-index: 1;
}
.firstvisit__step-no small { font-size: 0.5rem; letter-spacing: 0.05em; }
.firstvisit__step-no b { font-size: 1.1rem; }
.firstvisit__step-body { padding-top: 0.3rem; }
.firstvisit__step-body h3 { font-size: 1.05rem; margin: 0 0 0.3rem; }
.firstvisit__step-body p { color: var(--wp--preset--color--text-muted); font-size: 0.9rem; margin: 0; }

.firstvisit__cta-btn:hover { opacity: 0.92; }

@media (max-width: 640px) {
  .firstvisit__reserve { grid-template-columns: 1fr; }
}

/* 11-e. お知らせ / 採用情報（一覧・個別） */
/* お知らせ一覧 */
.news__list--archive { list-style: none; margin: 0; padding: 0; }
.news__list--archive li {
  display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap;
  padding: 1rem 0; border-bottom: 1px solid var(--wp--preset--color--primary-light);
}
.news__list--archive .news__date { color: var(--wp--preset--color--text-muted); font-size: 0.85rem; flex-shrink: 0; }
.news__list--archive .news__cat { font-size: 0.72rem; font-weight: 700; padding: 0.2em 0.8em; border-radius: 999px; flex-shrink: 0; }
.news__list--archive .news__link { flex: 1; color: var(--wp--preset--color--text-main); text-decoration: none; font-weight: 600; }
.news__list--archive .news__link:hover { color: var(--wp--preset--color--primary); }
.news-single__meta { display: flex; align-items: center; gap: 0.8em; flex-wrap: wrap; }

.lp-pagination ul { list-style: none; display: flex; gap: 0.4rem; justify-content: center; padding: 0; margin: 2rem 0 0; }
.lp-pagination a, .lp-pagination span { display: inline-block; padding: 0.4em 0.8em; border-radius: 6px; text-decoration: none; color: var(--wp--preset--color--primary); }
.lp-pagination .current { background: var(--wp--preset--color--primary); color: #fff; }

/* 採用カード一覧 */
.recruit-card {
  display: block; background: #fff; border: 1px solid var(--wp--preset--color--primary-light);
  border-radius: var(--wp--custom--border-radius--lg, 18px); padding: 1.4rem 1.6rem; margin-bottom: 1rem;
  text-decoration: none; transition: border-color .2s, box-shadow .2s;
}
.recruit-card:hover { border-color: var(--wp--preset--color--primary); box-shadow: var(--wp--custom--shadow--card); }
.recruit-card__head { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.3rem; flex-wrap: wrap; }
.recruit-card__emp { background: var(--wp--preset--color--primary-light); color: var(--wp--preset--color--primary); font-size: 0.75rem; font-weight: 700; padding: 0.25em 0.8em; border-radius: 999px; }
.recruit-card__job { color: var(--wp--preset--color--text-muted); font-size: 0.85rem; }
.recruit-card__title { font-size: 1.15rem; margin: 0.2rem 0; color: var(--wp--preset--color--text-main); }
.recruit-card__salary { color: var(--wp--preset--color--text-muted); font-size: 0.9rem; margin: 0.3rem 0; }
.recruit-card__more { color: var(--wp--preset--color--primary); font-weight: 700; font-size: 0.85rem; }

/* 採用 個別 */
.recruit-single__table { width: 100%; border-collapse: collapse; margin-bottom: 2rem; }
.recruit-single__table th {
  text-align: left; white-space: nowrap; vertical-align: top; width: 8em;
  background: var(--wp--preset--color--bg-soft); color: var(--wp--preset--color--primary);
  font-weight: 700; padding: 0.8em 1em; border: 1px solid var(--wp--preset--color--primary-light); font-size: 0.9rem;
}
.recruit-single__table td { padding: 0.8em 1em; border: 1px solid var(--wp--preset--color--primary-light); }
.recruit-single__sec { margin-bottom: 1.8rem; }
.recruit-single__h {
  font-size: var(--wp--preset--font-size--lg, 1.25rem); font-weight: 700;
  border-left: 5px solid var(--wp--preset--color--primary); padding-left: 0.6em; margin: 0 0 0.8em;
}

/* 11-d. ランディング（診療案内/院長紹介/アクセス） */
.lp-breadcrumb { font-size: 0.8rem; color: var(--wp--preset--color--text-muted); }
.lp-breadcrumb a { color: var(--wp--preset--color--primary); text-decoration: none; }
.lp-breadcrumb a:hover { text-decoration: underline; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   12. プリセット用の軸バリアント（docs/variant-catalog.md 参照）
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* 軸A：余白スケール（body.spacing-compact / -standard / -airy）
   --space-scale 係数1つで、セクション縦paddingに使うスペーシングプリセット
   （90=セクション / 100=特大）を一括伸縮する。standard は上書きなし＝現行どおり。
   ※ calc 内の clamp は theme.json settings.spacing.spacingSizes の 90/100 と同期させること */
body { --space-scale: 1; }
body.spacing-compact { --space-scale: 0.72; }
body.spacing-airy    { --space-scale: 1.4; }
body.spacing-compact,
body.spacing-airy {
  --wp--preset--spacing--90:  calc(clamp(2.75rem, 5vw, 4.25rem) * var(--space-scale));
  --wp--preset--spacing--100: calc(clamp(3.5rem, 6vw, 5.5rem)  * var(--space-scale));
}

/* 軸B：写真マスク形状（body.mask-kit / -rounded-sm / -rounded-lg / -arch / -square）
   mask-kit（既定）は何もせずキットCSSの装飾に任せる＝現行どおり。
   それ以外は「単独写真コンテナ」の角丸を --mask-radius で一括上書きする。
   ※ !important はキットCSS側の写真角丸の !important（kit-trust 等）より
     高い詳細度で確実に勝たせるためのもの。対象を増やすときは下の :is() に追加 */
body.mask-rounded-sm { --mask-radius: 10px; }
body.mask-rounded-lg { --mask-radius: 28px; }
body.mask-arch       { --mask-radius: 999px 999px var(--wp--custom--border-radius--lg, 18px) var(--wp--custom--border-radius--lg, 18px); }
body.mask-square     { --mask-radius: 0px; }
/* アール：角1つだけ大きな丸み。既定＝左上（maskdir で切替） */
body.mask-corner     { --corner-r: clamp(48px, 11vw, 140px); --mask-radius: var(--corner-r) var(--wp--custom--border-radius--md, 8px) var(--wp--custom--border-radius--md, 8px) var(--wp--custom--border-radius--md, 8px); }
body:is(.mask-rounded-sm, .mask-rounded-lg, .mask-arch, .mask-corner, .mask-square)
  :is(.greeting__photo-wrap, .features__row-media--photo, .doctor-page__photo,
      .blog-single__thumb, .facility-single__photo, .free__image img) {
  border-radius: var(--mask-radius) !important;
  overflow: hidden;
}

/* アーチの向き（body.maskdir-*。mask=arch のときのみ効く：--mask-radius を差し替え）
   border-radius の順序＝左上 右上 右下 左下 */
body.mask-arch.maskdir-left  { --mask-radius: 999px var(--wp--custom--border-radius--lg, 18px) var(--wp--custom--border-radius--lg, 18px) 999px; }
body.mask-arch.maskdir-right { --mask-radius: var(--wp--custom--border-radius--lg, 18px) 999px 999px var(--wp--custom--border-radius--lg, 18px); }
/* 交互：特徴の行レイアウトは写真の外側に膨らむ向きで左右交互（既定の並び＝奇数行:写真右/偶数行:写真左）。
   その他の単独写真は上向きのまま */
body.mask-arch.maskdir-alt .features__row:nth-child(odd)  .features__row-media--photo {
  border-radius: var(--wp--custom--border-radius--lg, 18px) 999px 999px var(--wp--custom--border-radius--lg, 18px) !important;
}
body.mask-arch.maskdir-alt .features__row:nth-child(even) .features__row-media--photo {
  border-radius: 999px var(--wp--custom--border-radius--lg, 18px) var(--wp--custom--border-radius--lg, 18px) 999px !important;
}

/* アールの向き（body.mask-corner.maskdir-*）：大きく丸める角を切替。他の角は md。
   top=左上／left=左下／right=右下。順序＝左上 右上 右下 左下 */
body.mask-corner.maskdir-left  { --mask-radius: var(--wp--custom--border-radius--md, 8px) var(--wp--custom--border-radius--md, 8px) var(--wp--custom--border-radius--md, 8px) var(--corner-r); }
body.mask-corner.maskdir-right { --mask-radius: var(--wp--custom--border-radius--md, 8px) var(--wp--custom--border-radius--md, 8px) var(--corner-r) var(--wp--custom--border-radius--md, 8px); }
/* 交互：特徴の行で外側の上角を左右交互に丸める（奇数行:写真右→右上／偶数行:写真左→左上） */
body.mask-corner.maskdir-alt .features__row:nth-child(odd)  .features__row-media--photo {
  border-radius: var(--wp--custom--border-radius--md, 8px) var(--corner-r) var(--wp--custom--border-radius--md, 8px) var(--wp--custom--border-radius--md, 8px) !important;
}
body.mask-corner.maskdir-alt .features__row:nth-child(even) .features__row-media--photo {
  border-radius: var(--corner-r) var(--wp--custom--border-radius--md, 8px) var(--wp--custom--border-radius--md, 8px) var(--wp--custom--border-radius--md, 8px) !important;
}

/* 全幅レイアウト（body.bleed-full）：ヘッダーとヒーロー内側の最大幅を解除。
   本文セクション（front-band 内の constrained レイアウト）は変えない。
   ヘッダーは形状ごとに内側コンテナが異なる：
     帯分離＝__inner/__top-inner/__nav-inner、統合・オーバーレイ＝__bar。両方を対象にする。 */
body.bleed-full .site-header__inner,
body.bleed-full .site-header__top-inner,
body.bleed-full .site-header__nav-inner,
body.bleed-full .site-header__bar,
body.bleed-full .hero__inner {
  max-width: none;
}

/* 軸C：ヒーロー構成 .hero--collage（明るい地＋写真散らし＋縦書きキャッチ）
   バリアントはこの1クラスのみ。色・角丸・影はトークン追従（キット別の分岐なし）。
   写真の角は --mask-radius（軸B）に追従し、mask-kit のときはキットの lg トークン。
   縦書き（writing-mode: vertical-rl）はPC幅のみ。狭い幅は横書きフォールバック。 */
.section-hero.hero--collage {
  position: relative; overflow: hidden;
  background: var(--wp--preset--color--bg-soft);
  min-height: clamp(460px, 68vh, 720px);
  display: flex; align-items: center;
}
/* 装飾シェイプ：角1つが大きく丸い抽象ブロックを低コントラストで背面に敷く（しま系）。
   色はトークン追従（bg-soft より一段だけ深いトーン）。本文（.hero__inner=z2）より背面 */
.section-hero.hero--collage::before,
.section-hero.hero--collage::after {
  content: ""; position: absolute; z-index: 1; pointer-events: none;
  background: color-mix(in srgb, var(--wp--preset--color--primary-light) 80%, var(--wp--preset--color--bg-soft));
}
.section-hero.hero--collage::before {
  width: clamp(240px, 34vw, 500px); aspect-ratio: 1 / 1;
  top: clamp(-80px, -6vw, -24px); right: clamp(4%, 10vw, 14%);
  border-radius: 0 0 0 clamp(90px, 16vw, 240px);
}
.section-hero.hero--collage::after {
  width: clamp(200px, 26vw, 380px); aspect-ratio: 1 / 1;
  bottom: clamp(-70px, -5vw, -20px); left: clamp(2%, 6vw, 9%);
  border-radius: 0 clamp(80px, 14vw, 200px) 0 0;
}
.hero__inner--collage {
  position: relative; z-index: 2;
  max-width: var(--wp--style--global--wide-size, 1200px);
  width: 100%; margin: 0 auto;
  padding: calc(var(--wp--preset--spacing--80, 3rem) * var(--space-scale, 1)) clamp(1rem, 4vw, 2.5rem);
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 3.5rem);
}
.hero__collage-text {
  flex: 0 1 auto;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.hero--collage .hero__catch { letter-spacing: 0.1em; line-height: 1.7; }
/* 写真は左右の列に散らす（右＝主役の縦長＋小、左＝低い位置に1枚） */
.hero__collage-photos { display: grid; gap: clamp(1rem, 2.2vw, 1.8rem); align-items: start; }
.hero__collage-photos--right { flex: 1 1 38%; grid-template-columns: 1fr; }
.hero__collage-photos--left  { flex: 1 1 28%; grid-template-columns: 1fr; align-self: flex-end; margin-bottom: clamp(-1rem, -2vh, -2rem); }
.hero__collage-photo {
  margin: 0; overflow: hidden; width: 100%;
  border-radius: var(--mask-radius, var(--wp--custom--border-radius--lg, 18px));
  background: var(--wp--preset--color--primary-light);
  box-shadow: var(--wp--custom--shadow--card, 0 2px 12px rgba(0,0,0,0.08));
}
.hero__collage-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero__collage-photos--right .hero__collage-photo:nth-child(1) { aspect-ratio: 3 / 4; }
.hero__collage-photos--right .hero__collage-photo:nth-child(2) { aspect-ratio: 1 / 1; width: 56%; justify-self: start; margin-top: clamp(-3rem, -6vh, -5rem); position: relative; z-index: 1; margin-left: clamp(-1rem, -2vw, -2rem); }
.hero__collage-photos--left .hero__collage-photo { aspect-ratio: 4 / 5; }

@media (min-width: 960px) {
  /* 縦書きキャッチ（PC幅のみ）。改行が「行→列（右から左）」になる */
  .hero--collage .hero__catch {
    writing-mode: vertical-rl;
    font-size: clamp(1.7rem, 2.4vw, 2.4rem);
    letter-spacing: 0.22em;
    line-height: 2.0;
    max-height: clamp(320px, 46vh, 500px);
    margin: 0.6em 0;
  }
}
@media (max-width: 959px) {
  .hero__inner--collage { flex-direction: column; align-items: stretch; }
  .hero__collage-text { order: -1; }
  .hero__collage-photos--right { grid-template-columns: 1.4fr 1fr; align-items: start; }
  .hero__collage-photos--right .hero__collage-photo:nth-child(1) { aspect-ratio: 4 / 3; }
  .hero__collage-photos--right .hero__collage-photo:nth-child(2) { width: 100%; margin: clamp(1.2rem, 4vw, 2rem) 0 0; }
  .hero__collage-photos--left { display: none; } /* モバイルは枚数を絞って大きく見せる */
}

/* 軸C：ヒーロー構成 .hero--card（明るい地＋大角丸の写真カード1枚＋浮きラベル）
   写真の角丸は軸B --mask-radius に追従しつつ、カードらしさのため既定は大きめ（28px）。 */
.section-hero.hero--card {
  position: relative; overflow: hidden;
  background: var(--wp--preset--color--bg-soft);
  min-height: clamp(420px, 58vh, 620px);
  display: flex; align-items: center;
}
.hero__inner--card {
  position: relative; z-index: 2;
  max-width: var(--wp--style--global--wide-size, 1200px);
  width: 100%; margin: 0 auto;
  padding: calc(var(--wp--preset--spacing--80, 3rem) * var(--space-scale, 1)) clamp(1rem, 4vw, 2.5rem);
  display: flex; align-items: center;
  gap: clamp(1.5rem, 5vw, 4rem);
}
.hero__card-text { flex: 0 1 44%; }
.hero__card-media { position: relative; flex: 1 1 56%; }
.hero__card-photo {
  margin: 0; overflow: hidden;
  aspect-ratio: 16 / 11;
  border-radius: var(--mask-radius, 28px);
  box-shadow: var(--wp--custom--shadow--card, 0 10px 30px rgba(0,0,0,0.12));
  background: var(--wp--preset--color--primary-light);
}
.hero__card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 浮きラベル（チップ）：写真の左上に少しはみ出して重ねる */
.hero__card-chip {
  position: absolute; top: -0.9em; left: clamp(0.8rem, 2vw, 1.6rem);
  padding: 0.45em 1.3em;
  background: var(--wp--preset--color--accent); color: #fff;
  font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em;
  border-radius: var(--wp--custom--border-radius--pill, 999px);
  box-shadow: var(--wp--custom--shadow--card, 0 4px 14px rgba(0,0,0,0.14));
}
@media (max-width: 959px) {
  .hero__inner--card { flex-direction: column-reverse; align-items: stretch; }
  .hero__card-text { flex-basis: auto; }
}

/* 軸C：ヒーロー構成 .hero--illust（写真なし・イラスト地）
   現在のイラストセットのモチーフを最大5つ散らし、中央にテキスト。
   モチーフ色はSVGに実色注入済み＝パレット追従。イラスト非対応キットでは色地のみ。 */
.section-hero.hero--illust {
  position: relative; overflow: hidden;
  background: var(--wp--preset--color--bg-soft);
  min-height: clamp(400px, 56vh, 580px);
  display: flex; align-items: center;
}
.hero__inner--illust {
  position: relative; z-index: 2;
  max-width: var(--wp--style--global--wide-size, 1200px);
  width: 100%; margin: 0 auto;
  padding: calc(var(--wp--preset--spacing--80, 3rem) * var(--space-scale, 1)) clamp(1rem, 4vw, 2.5rem);
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.hero--illust .hero__sub { margin-inline: auto; }
.hero__illust-deco { position: absolute; inset: 0; pointer-events: none; }
.hero__illust-motif { position: absolute; width: clamp(56px, 8vw, 120px); opacity: 0.9; }
.hero__illust-svg { display: block; width: 100%; height: auto; }
.hero__illust-motif--1 { top: 12%;  left: 6%;   transform: rotate(-8deg); }
.hero__illust-motif--2 { top: 16%;  right: 8%;  transform: rotate(10deg); width: clamp(44px, 6vw, 92px); }
.hero__illust-motif--3 { bottom: 14%; left: 13%; transform: rotate(6deg);  width: clamp(40px, 5.5vw, 84px); }
.hero__illust-motif--4 { bottom: 10%; right: 15%; transform: rotate(-6deg); }
.hero__illust-motif--5 { top: 46%;  left: 46%;  transform: translateX(14rem) rotate(4deg); width: clamp(36px, 4.5vw, 70px); }
@media (max-width: 768px) {
  .hero__illust-motif--3, .hero__illust-motif--5 { display: none; } /* モバイルは数を絞って可読性優先 */
}

/* 軸D：見出し演出（body.headfx-standard / body.headfx-en-watermark）
   en-watermark はアイブロウ（英字ラベル）を巨大な透かし文字として h2 の背面に敷く。
   ラベルはパターン側でインラインstyle付与のため !important で上書きする。 */
body.headfx-en-watermark .section-head { position: relative; }
body.headfx-en-watermark .section-head__label {
  position: absolute;
  inset-inline: 0;
  top: -0.32em;
  z-index: 0;
  font-size: clamp(3rem, 8.5vw, 6.2rem) !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  line-height: 1;
  color: color-mix(in srgb, var(--wp--preset--color--primary) 9%, transparent) !important;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}
body.headfx-en-watermark .section-head h2 { position: relative; z-index: 1; }

/* ── セクションの構え（軸「band」）× 区切り・角の形（軸「wave」）──
   band＝セクションの構え：flat/gradient=全幅ストライプ、panel=浮きパネル、panel-alt=片寄せパネル。
   wave＝区切り・角の形：全幅のときはセクション間の区切りSVG、パネルのときは角丸の大きさに読み替える。
   ＝アール(wave:corner)や弧(wave:arc)を、全幅でも浮き/片寄せパネルでも一貫して効かせる。 */

/* gradient は淡色バンドを水彩風の縦グラデにする（全幅時の下地）。 */
body.band-gradient .front-band--soft {
  background: linear-gradient(180deg,
    var(--wp--preset--color--bg-soft) 0%,
    color-mix(in srgb, var(--wp--preset--color--primary-light) 72%, #ffffff) 52%,
    var(--wp--preset--color--bg-soft) 100%);
}

/* パネルの角丸(--panel-r)は「区切り・角の形」(wave 軸) に追従する。
   全幅では区切りSVGの形、パネルでは角丸の大きさ、という読み替え。 */
body.band-panel,
body.band-panel-alt          { --panel-r: clamp(28px, 5vw, 64px); }  /* 既定（波系＝パネルでは標準の丸み） */
body:is(.band-panel, .band-panel-alt).wave-none   { --panel-r: clamp(8px, 1.6vw, 16px); }   /* 直線＝角ひかえめ */
body:is(.band-panel, .band-panel-alt).wave-arc    { --panel-r: clamp(40px, 7vw, 100px); }   /* 弧＝大きめ */
body:is(.band-panel, .band-panel-alt).wave-corner { --panel-r: clamp(56px, 11vw, 160px); }  /* アール＝特大 */

/* 浮きパネル：淡色バンドを大角丸の浮きコンテナに（しま歯科系の上質レイアウト）。
   ページ地は白のまま、コンテンツ側が浮く＝図と地の反転。角丸が境界を担うため区切りSVGは非表示。 */
body.band-panel .front-band--soft {
  max-width: min(1280px, calc(100% - 2 * clamp(14px, 3.5vw, 44px)));
  margin-inline: auto;
  margin-block: clamp(20px, 4vw, 56px);
  border-radius: var(--panel-r, clamp(28px, 5vw, 64px));
  overflow: hidden; /* 散らし装飾をパネル内にクリップ */
}
body.band-panel .wave-divider { display: none; }

/* 片寄せパネル：片側は画面端まで／反対側だけ角丸で浮かせる非対称パネル。
   寄せる向きは淡色バンドごとに左右交互（front-sections.php が front-band--s0/s1 を付与）。
   角丸(--panel-r)は wave 軸に追従（上のブロックで body 側に定義）。 */
body.band-panel-alt .front-band--soft {
  --panel-gap: clamp(14px, 4vw, 72px);
  margin-block: clamp(20px, 4vw, 56px);
  overflow: hidden;
}
/* s0：左は画面端まで、右だけ浮かせる（右側に余白＋右角丸） */
body.band-panel-alt .front-band--soft.front-band--s0 {
  margin-right: var(--panel-gap);
  margin-left: 0;
  border-radius: 0 var(--panel-r) var(--panel-r) 0;
}
/* s1：右は画面端まで、左だけ浮かせる（左側に余白＋左角丸） */
body.band-panel-alt .front-band--soft.front-band--s1 {
  margin-left: var(--panel-gap);
  margin-right: 0;
  border-radius: var(--panel-r) 0 0 var(--panel-r);
}
body.band-panel-alt .wave-divider { display: none; }
@media (max-width: 600px) {
  /* 狭い画面は寄せ量を控えめに（片側の余白だけ） */
  body.band-panel-alt .front-band--soft { --panel-gap: clamp(10px, 4vw, 20px); }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   13. イラスト装飾レイヤー（旧 kit-soft.css から移設。illust対応キット共通の構造）
   色はSVG内に実色注入済み＝パレット追従。isolation+z-index:-1 で本文の背面に。
   ページが長い＝バンドが多い＝装飾も増える＝常に万遍なく分布。CTA/フッターには付かない。
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.front-band { isolation: isolate; } /* 本文の z-index を触らず装飾だけ背面化 */
/* 位置・回転・サイズ・反転・不透明度は PHP がインライン style で1つずつ付与（有機的な散らし） */
.front-band__decor {
  position: absolute; z-index: -1; pointer-events: none;
  width: clamp(46px, 5.5vw, 82px); transform-origin: center;
}
.front-band__decor-svg { display: block; width: 100%; height: auto; }

/* 見出し（.section-head の h2）の真横に添えるモチーフ。小さく控えめ・常に左側 */
.section-head__decor {
  position: absolute; top: 35%;
  width: clamp(20px, 2.4vw, 25px);
  pointer-events: none; opacity: 0.7;
}
.section-head__decor--right { left: 100%;  margin-left: 0.5rem;  transform: translateY(-50%); }
.section-head__decor--left  { right: 100%; margin-right: 0.5rem; transform: translateY(-50%) scaleX(-1); }
.section-head__decor-svg { display: block; width: 100%; height: auto; }

/* 見出しのセクション別アイコン（意味アイコン。装飾と違い反転なし・不透明度100%・少し大きめ。高さ基準で見た目を揃える） */
.section-head__icon { display: inline-flex; }
.section-head__icon-svg { display: block; height: clamp(38px, 4.2vw, 50px); width: auto; }
.section-head__icon--above { margin-bottom: 6px; } /* .section-head は縦flex＝左/中央寄せに自動追従 */
.section-head__icon--left  { position: absolute; top: 50%; right: 100%; margin-right: 0.5rem; transform: translateY(calc(-50% - 9px)); } /* h2中央でなく見出し全体（アイブロウ＋h2）の中心に寄せて上げる */
.section-head__icon--left .section-head__icon-svg { height: clamp(24px, 2.8vw, 32px); }

@media (max-width: 768px) {
  .front-band__decor { display: none; } /* モバイルは装飾オフで可読性優先 */
  .section-head__decor { display: none; }
  /* .section-head__icon は意味アイコンのためモバイルでも表示 */
}

/* 院長紹介ページ */
.doctor-page__profile {
  display: flex; flex-wrap: wrap; gap: 2rem; align-items: center; margin-bottom: 2rem;
}
.doctor-page__photo {
  flex: 0 0 220px; max-width: 220px; aspect-ratio: 3/4; overflow: hidden;
  border-radius: var(--wp--custom--border-radius--lg, 18px); background: var(--wp--preset--color--primary-light);
}
.doctor-page__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.doctor-page__meta { flex: 1 1 280px; }
.doctor-page__kana { font-size: 0.8rem; color: var(--wp--preset--color--text-muted); margin: 0 0 0.2em; }
.doctor-page__name { font-size: var(--wp--preset--font-size--2xl, 1.875rem); font-weight: 800; margin: 0 0 0.3em; }
.doctor-page__title { color: var(--wp--preset--color--primary); font-weight: 700; margin: 0 0 0.2em; }
.doctor-page__specialty { color: var(--wp--preset--color--text-muted); font-size: 0.9rem; margin: 0; }
.doctor-page__greeting { line-height: 1.9; margin-bottom: 2.5rem; }
.doctor-page__section { margin-bottom: 2rem; }
.doctor-page__h {
  font-size: var(--wp--preset--font-size--lg, 1.25rem); font-weight: 700;
  border-left: 5px solid var(--wp--preset--color--primary); padding-left: 0.6em; margin: 0 0 0.8em;
}
.doctor-page__career { width: 100%; border-collapse: collapse; }
.doctor-page__career th {
  text-align: left; white-space: nowrap; vertical-align: top; padding: 0.5em 1.2em 0.5em 0;
  color: var(--wp--preset--color--primary); font-weight: 700; width: 1%;
}
.doctor-page__career td { padding: 0.5em 0; border-bottom: 1px solid var(--wp--preset--color--primary-light); }
.doctor-page__career tr:last-child td { border-bottom: none; }
.doctor-page__list { list-style: none; margin: 0; padding: 0; }
.doctor-page__list li { padding: 0.5em 0 0.5em 1.4em; position: relative; border-bottom: 1px dashed var(--wp--preset--color--primary-light); }
.doctor-page__list li::before { content: "・"; position: absolute; left: 0.3em; color: var(--wp--preset--color--primary); }
.doctor-page__list li:last-child { border-bottom: none; }

/* 11-c. 院内紹介ギャラリー */
.facility__breadcrumb { font-size: 0.8rem; color: var(--wp--preset--color--text-muted); }
.facility__breadcrumb a { color: var(--wp--preset--color--primary); text-decoration: none; }
.facility__breadcrumb a:hover { text-decoration: underline; }

.facility__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
  margin-top: 1.4rem;
}

.facility__card {
  background: #fff;
  border: 1px solid var(--wp--preset--color--primary-light);
  border-radius: var(--wp--custom--border-radius--lg, 18px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* 先頭の大カード：写真の上に名称を重ねる */
.facility__card--large {
  position: relative;
  border: none;
  border-radius: var(--wp--custom--border-radius--lg, 18px);
  margin-bottom: 0.5rem;
}
.facility__card--large .facility__photo { aspect-ratio: 16 / 7; }
.facility__card--large .facility__caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.55), transparent);
  color: #fff; padding: 1.6rem;
}
.facility__card--large .facility__name { color: #fff; }
.facility__card--large .facility__desc { color: rgba(255,255,255,0.9); }

.facility__photo {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--wp--preset--color--primary-light);
  overflow: hidden;
}
.facility__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.facility__img--empty {
  display: flex; align-items: center; justify-content: center;
  color: var(--wp--preset--color--text-muted); font-size: 0.85rem;
}
.facility__more-badge {
  position: absolute; top: 0.8rem; right: 0.8rem;
  background: var(--wp--preset--color--primary); color: #fff;
  font-size: 0.75rem; font-weight: 700; padding: 0.3em 0.9em;
  border-radius: var(--wp--custom--border-radius--pill, 999px); text-decoration: none;
}
.facility__caption { padding: 1.1rem 1.2rem 1.3rem; }
.facility__name { font-size: 1.05rem; margin: 0 0 0.4rem; }
.facility__desc { color: var(--wp--preset--color--text-muted); font-size: 0.875rem; margin: 0; line-height: 1.7; }
.facility__more { margin: 0.8rem 0 0; }
.facility__more a { color: var(--wp--preset--color--primary); font-weight: 700; font-size: 0.85rem; text-decoration: none; }

.facility-single__photo { margin: 0 0 1.6rem; border-radius: var(--wp--custom--border-radius--lg, 18px); overflow: hidden; }
.facility-single__photo img { width: 100%; height: auto; display: block; }

@media (max-width: 900px) { .facility__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .facility__grid { grid-template-columns: 1fr; } }