/*
 * polish-20260505.css
 * ─────────────────────────────────────────────────────
 * 目的: 部署詳細・条件詳細など複数ページで散見されていた
 *   1) リスト項目のドット (::before) と本文文字が重なる問題
 *   2) テーブル外枠 (dept-table-modern / sakura-table-wrapper) の
 *      角丸クリッピング不全による「枠が変にサイドにくっつく」見た目
 *   3) dept-content-block ヘッダーのアクセント線が二重線に見える違和感
 * を一括補正する。
 *
 * このファイルは load order の最後尾に置く想定（base.html で
 * unify-calm-20260501.css の直後に読み込む）。
 * 既存セレクタとの specificity 衝突を避けるため、必要に応じ
 * `body:not(.home-page) #main-content` のような複合セレクタを使う。
 */

/* ──────────────────────────────────────────────
   1) sakura-list のドットと本文の重なり修正
   ──────────────────────────────────────────────
   原因: .dept-detail-richcontent li が padding-inline-start: 0.25rem を
   付与し、.sakura-list > li の 1.25rem を上書きしていたため、
   左に絶対配置されていた 6×6 のドット (::before) と本文が重なっていた。
*/
body:not(.home-page) #main-content .dept-detail-richcontent .sakura-list {
  /* 親 ul の二重インデントを解除 */
  padding-inline-start: 0;
  margin-inline-start: 0;
}

body:not(.home-page) #main-content .dept-detail-richcontent .sakura-list > li {
  /* sakura-list 本来の padding を復元（親セレクタ上書き対応） */
  padding-inline-start: 1.25rem;
  padding-block: 0.375rem;
  position: relative;
}

body:not(.home-page)
  #main-content
  .dept-detail-richcontent
  .sakura-list
  > li::marker {
  /* ::marker の二重表示を完全に抑制（list-style:none と併用） */
  content: "";
}

/* ──────────────────────────────────────────────
   2) テーブル外枠の角丸クリッピング正常化
   ──────────────────────────────────────────────
   原因: .dept-table-modern が overflow-x: auto のため、
   表が枠内に収まる場合でも thead 背景色と border-radius が
   合わず「枠が浮いている」見え方になっていた。
   isolation + overflow:clip(hidden fallback) で確実にクリップする。
*/
body:not(.home-page) #main-content .dept-table-modern,
body:not(.home-page) #main-content .sakura-table-wrapper {
  isolation: isolate;
  /* clip は新しめだが overflow:hidden よりスクロール挙動が素直 */
  overflow: hidden;
  overflow-x: auto;
}

/* テーブル本体は wrapper 端に密着させる（左右の謎余白を排除） */
body:not(.home-page) #main-content .dept-table-modern > table,
body:not(.home-page) #main-content .sakura-table-wrapper > table {
  margin: 0;
  inline-size: 100%;
  border-collapse: collapse;
}

/* thead 行は wrapper の角丸に追従して隅をクリップ */
body:not(.home-page) #main-content .dept-table-modern thead th:first-child,
body:not(.home-page) #main-content .sakura-table-wrapper thead th:first-child {
  border-start-start-radius: inherit;
}
body:not(.home-page) #main-content .dept-table-modern thead th:last-child,
body:not(.home-page) #main-content .sakura-table-wrapper thead th:last-child {
  border-start-end-radius: inherit;
}

/* tbody 最終行も角丸に追従 */
body:not(.home-page)
  #main-content
  .dept-table-modern
  tbody
  tr:last-child
  td:first-child,
body:not(.home-page)
  #main-content
  .sakura-table-wrapper
  tbody
  tr:last-child
  td:first-child {
  border-end-start-radius: inherit;
}
body:not(.home-page)
  #main-content
  .dept-table-modern
  tbody
  tr:last-child
  td:last-child,
body:not(.home-page)
  #main-content
  .sakura-table-wrapper
  tbody
  tr:last-child
  td:last-child {
  border-end-end-radius: inherit;
}

/* ──────────────────────────────────────────────
   3) dept-content-block ヘッダーのアクセント線整理
   ──────────────────────────────────────────────
   原因: header に border-block-end:3px solid と
   header::after で上に重ねた 3px solid が同位置に走るため
   ブラウザによっては「二重線」に見える。::after の色だけを
   強調アクセント色とし、線幅を 4px → 3px に統一して
   1本のライン上にアクセントが乗る形に整える。
*/
body:not(.home-page) #main-content .dept-content-block__header {
  /* 線の太さを 3px に統一（::after も 3px なので位相が合う） */
  border-block-end-width: 1px;
  border-block-end-color: var(--color-border-light, #e5e7eb);
}

body:not(.home-page) #main-content .dept-content-block__header::after {
  /* アクセント線は本線の上に重ねる（位置を合わせる） */
  inset-block-end: -1px;
  block-size: 3px;
}

/* ──────────────────────────────────────────────
   4) dept-content-block 内のセクション間の縦余白を均一化
   ────────────────────────────────────────────── */
body:not(.home-page) #main-content .dept-content-block__body > *:first-child {
  margin-block-start: 0;
}
body:not(.home-page) #main-content .dept-content-block__body > *:last-child {
  margin-block-end: 0;
}

/* ──────────────────────────────────────────────
   5) sakura-list（ulがネストされない素のリスト）も
      左右パディングを揃える
   ────────────────────────────────────────────── */
body:not(.home-page) #main-content .sakura-list {
  padding-inline-start: 0;
}

/* ──────────────────────────────────────────────
   6) dept-detail-richcontent h2 の汎用装飾と
      dept-content-block__title / sakura-section__title の
      自前装飾の二重表示を抑制
   ──────────────────────────────────────────────
   原因: .dept-detail-richcontent h2::before が全 h2 に
   4px の縦バーと border-block-end:3px を付与しており、
   dept-content-block__header（既に border-block-end と
   ::after アクセント線あり）や sakura-section__title
   （既に border-inline-start あり）と二重表示されていた。
*/
body:not(.home-page)
  #main-content
  .dept-detail-richcontent
  .dept-content-block__title,
body:not(.home-page)
  #main-content
  .dept-detail-richcontent
  .sakura-section__title {
  /* 親汎用ルールの装飾を打ち消す */
  border-block-end: 0;
  padding-block-end: 0;
  margin-block: 0;
}

body:not(.home-page)
  #main-content
  .dept-detail-richcontent
  .dept-content-block__title::before,
body:not(.home-page)
  #main-content
  .dept-detail-richcontent
  .sakura-section__title::before {
  /* 汎用 h2::before の縦バーを抑制 */
  content: none;
  display: none;
}

/* ──────────────────────────────────────────────
   7) sakura-section__title のアイコン span が改行で空白文字を
      孕んで「字体と重なる」ように見えるケースの抑制
   ────────────────────────────────────────────── */
body:not(.home-page) #main-content .sakura-section__title {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-wrap: wrap;
}

body:not(.home-page)
  #main-content
  .sakura-section__title
  > .material-symbols-outlined,
body:not(.home-page)
  #main-content
  .sakura-section__title
  > .sakura-section__icon {
  flex-shrink: 0;
  line-height: 1;
}

/* ──────────────────────────────────────────────
   8) ホームページ: セクション・インナー幅の段差解消
   ──────────────────────────────────────────────
   症状: トップページで <section> ごとに白カード/帯の左右位置が
   1〜数十px ずれて「段差」に見える問題。
   原因:
     - .sz-home-guide__inner が max-width:1200px (他は1440px)
     - .sz-info-bar__inner は --content-max-width + --gutter-x
       を独自に使い、.section-inner の calc(100% - 100px) と
       BPごとに微妙にずれる
     - .sz-cta-cards / .sz-home-app-hub / .sz-news-sns-wrap /
       .sz-home-summary / .c-wait-time が同じ .section-inner を
       持ちつつ各 __inner で個別 padding を当てている
   対策: home-page 配下の主要セクションのインナーを単一トークンで
   揃える（max-inline-size と padding-inline を統一）。背景色は
   各セクションに残し、内側のコンテンツ幅だけ強制的に一致させる。
*/
body.home-page .saikazo-main .section-inner,
body.home-page .saikazo-main .sz-cta-cards__inner,
body.home-page .saikazo-main .sz-news-sns-wrap__inner,
body.home-page .saikazo-main .sz-home-app-hub__inner,
body.home-page .saikazo-main .sz-home-summary__inner,
body.home-page .saikazo-main .sz-home-guide__inner,
body.home-page .saikazo-main .sz-info-bar__inner,
body.home-page .saikazo-main .c-wait-time > .section-inner {
  inline-size: 100%;
  max-inline-size: var(--sz-home-section-max, 1440px);
  margin-inline: auto;
  padding-inline: var(--sz-home-section-pad, clamp(1rem, 4vw, 2.5rem));
  box-sizing: border-box;
}

/* sz-home-guide のローカル max-width:1200px を打ち消す */
body.home-page .saikazo-main .sz-home-guide__inner {
  max-inline-size: var(--sz-home-section-max, 1440px);
}

/* sz-info-bar のローカル padding-inline (--gutter-x) を統一 */
body.home-page .saikazo-main .sz-info-bar__inner {
  padding-inline: var(--sz-home-section-pad, clamp(1rem, 4vw, 2.5rem));
}

/* デスクトップでは left/right の余白を視覚的に十分に確保 */
@media (min-width: 1024px) {
  body.home-page .saikazo-main .section-inner,
  body.home-page .saikazo-main .sz-cta-cards__inner,
  body.home-page .saikazo-main .sz-news-sns-wrap__inner,
  body.home-page .saikazo-main .sz-home-app-hub__inner,
  body.home-page .saikazo-main .sz-home-summary__inner,
  body.home-page .saikazo-main .sz-home-guide__inner,
  body.home-page .saikazo-main .sz-info-bar__inner,
  body.home-page .saikazo-main .c-wait-time > .section-inner {
    padding-inline: 50px;
  }
}

@media (min-width: 1600px) {
  body.home-page .saikazo-main .section-inner,
  body.home-page .saikazo-main .sz-cta-cards__inner,
  body.home-page .saikazo-main .sz-news-sns-wrap__inner,
  body.home-page .saikazo-main .sz-home-app-hub__inner,
  body.home-page .saikazo-main .sz-home-summary__inner,
  body.home-page .saikazo-main .sz-home-guide__inner,
  body.home-page .saikazo-main .sz-info-bar__inner,
  body.home-page .saikazo-main .c-wait-time > .section-inner {
    padding-inline: 60px;
  }
}

/* ──────────────────────────────────────────────
   8.1) sz-home-app-hub: 青いカード（__inner）は背景を持つので、
        他セクションと同じ 50/60px の内側余白を当てると
        「カード幅に対して中身が小さい」見た目になる。
        カード自体の visual width を周辺セクションの「コンテンツ列」と
        揃え、内側パディングは控えめに戻す。
   ────────────────────────────────────────────── */
body.home-page .saikazo-main .sz-home-app-hub__inner {
  /* カードの外側を他セクションのコンテンツ幅に揃える
     （= 他セクションの padding-inline 相当を margin で吸収） */
  padding-inline: clamp(0.95rem, 2vw, 1.4rem);
}

@media (min-width: 1024px) {
  body.home-page .saikazo-main .sz-home-app-hub__inner {
    /* 他セクションの 50px padding ぶんを内側で取り戻す */
    max-inline-size: min(
      calc(var(--sz-home-section-max, 1440px) - 100px),
      calc(100% - 100px)
    );
    padding-inline: clamp(1.1rem, 1.8vw, 1.6rem);
  }
}

@media (min-width: 1600px) {
  body.home-page .saikazo-main .sz-home-app-hub__inner {
    max-inline-size: min(
      calc(var(--sz-home-section-max, 1440px) - 120px),
      calc(100% - 120px)
    );
    padding-inline: clamp(1.25rem, 1.6vw, 1.85rem);
  }
}

/* SNSアイコン表示（index.html Follow Us セクション） */
.sz-news-side__sns-icon {
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0 !important;
  display: block !important;
  color: currentColor !important;
}

.sz-news-side__sns-link {
  gap: 0.5rem !important;
  flex-direction: row !important;
  font-size: 0 !important; /* aria-labelテキストを非表示 */
  line-height: 0 !important;
}

/* SVGアイコンの色設定 */
.sz-news-side__sns-link[aria-label="LINE"] .sz-news-side__sns-icon {
  color: #06c755 !important; /* LINE緑 */
}

.sz-news-side__sns-link[aria-label="Instagram"] .sz-news-side__sns-icon {
  color: #e4405f !important; /* Instagram ピンク */
}

.sz-news-side__sns-link[aria-label="X"] .sz-news-side__sns-icon {
  color: #000000 !important; /* X 黒 */
}

.sz-news-side__sns-link[aria-label="YouTube"] .sz-news-side__sns-icon {
  color: #ff0000 !important; /* YouTube 赤 */
}

/* ウェアラブル対応: アイコンのみ表示 */
@media (max-width: 279px) {
  .sz-news-side__sns-icon {
    width: 18px;
    height: 18px;
  }
}

/* ② 情報を探す タイトル 中央揃え */
body.home-page .sz-hero-v2__search-title {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  text-align: center !important;
  gap: 0.5rem !important; /* アイコンとテキストの間隔 */
}

body.home-page .sz-hero-v2__search-title .material-symbols-outlined {
  flex-shrink: 0 !important;
}

/* ③ ニュースレイアウト: 上下バランス改善 */
.sz-news-v3__link {
  padding: var(--spacing-md, 1rem) var(--spacing-sm, 0.75rem) !important;
  align-items: center !important;
  display: flex !important;
  gap: var(--spacing-sm, 0.75rem) !important;
}

/* 日付・バッジ・タイトル全体の縦揃え */
.sz-news-v3__date,
.sz-news-v3__badge,
.sz-news-v3__title {
  display: flex !important;
  align-items: center !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* タイトル行の余白調整 */
.sz-news-v3__title {
  line-height: 1.7 !important;
  flex: 1 !important; /* 残り幅を全て使用 */
}

/* フッターSNSアイコン: ウェアラブル以外で確実に表示 */
@media (min-width: 280px) {
  .footer-sns,
  .l-footer__sns {
    display: flex !important;
  }
}

/* SNSアイコンサイズ統一: index.html (Follow Us) + footer.html */
.sz-news-side__sns-icon,
.footer-sns__icon {
  width: 20px;
  height: 20px;
}

/* YouTube切れ対策: コンテナ幅確保 */
.sz-news-side__sns-links {
  min-width: 100%;
}

.sz-news-side__sns-link {
  flex: 0 0 auto; /* 縮まないように固定 */
  min-width: fit-content;
}

/* タッチターゲットサイズ確保 */
.sz-news-side__sns-link,
.footer-sns__link {
  min-width: 44px;
  min-height: 44px;
}

/* ========================================
   ⑤ウェアラブル（≤279px）: きれいな表示のための全体最適化
   「ただ縦に伸びる」→「コンパクトで機能的な表示」
   ======================================== */
@media (max-width: 279px) {
  /* 基本レイアウト: 余白最小化 */
  body {
    font-size: 0.75rem;
    line-height: 1.5;
  }

  /* コンテナ余白調整 */
  .section-inner,
  .sz-section {
    padding-inline: 0.5rem;
  }

  /* === SNSアイコン: 完全非表示→小さく表示に変更 === */
  .footer-sns,
  .l-footer__sns,
  .sz-news-side__sns {
    display: flex !important;
    gap: 0.25rem !important;
    justify-content: center;
    flex-wrap: wrap;
  }

  .footer-sns__link,
  .sz-news-side__sns-link {
    width: 2rem !important;
    height: 2rem !important;
    min-width: 2rem !important;
    min-height: 2rem !important;
    padding: 0.25rem !important;
  }

  .footer-sns__icon,
  .sz-news-side__sns-icon {
    width: 1rem !important;
    height: 1rem !important;
  }

  /* === ヒーロー検索: コンパクト化 === */
  .sz-hero-v2__search-panel {
    padding: 0.5rem;
    margin-top: 0.5rem;
  }

  .sz-hero-v2__search-title {
    font-size: 0.75rem;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
  }

  .sz-hero-v2__search-title .material-symbols-outlined {
    font-size: 1rem;
  }

  .sz-hero-v2__search-form {
    display: flex;
    gap: 0.25rem;
  }

  .sz-hero-v2__search-form input {
    min-height: 2rem !important;
    font-size: 0.7rem;
    padding: 0.25rem 0.5rem;
  }

  .sz-hero-v2__search-form button {
    min-height: 2rem !important;
    font-size: 0.65rem;
    padding: 0.25rem 0.5rem;
  }

  .sz-hero-v2__search-voice {
    min-width: 2rem !important;
    padding: 0.25rem !important;
  }

  /* === ニュース: 2カラムグリッドに変更（縦積み改善） === */
  .sz-news-v3__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }

  .sz-news-v3__link {
    display: flex;
    flex-direction: column;
    align-items: flex-start !important;
    padding: 0.5rem !important;
    gap: 0.25rem !important;
  }

  .sz-news-v3__date {
    font-size: 0.6rem;
  }

  .sz-news-v3__badge {
    font-size: 0.55rem;
    padding: 0.1rem 0.3rem;
  }

  .sz-news-v3__title {
    font-size: 0.7rem !important;
    line-height: 1.4 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* === Follow Usセクション: 横スクロール対応 === */
  .sz-news-side__sns-links {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    flex-wrap: nowrap !important;
    padding-bottom: 0.25rem;
  }

  .sz-news-side__sns-links::-webkit-scrollbar {
    display: none;
  }

  .sz-news-side__sns-label {
    font-size: 0.7rem;
    margin-bottom: 0.5rem;
  }

  /* === タブナビ: 横スクロール可能 === */
  .sz-news-v3__tabs {
    overflow-x: auto;
    scrollbar-width: none;
    flex-wrap: nowrap !important;
  }

  .sz-news-v3__tabs::-webkit-scrollbar {
    display: none;
  }

  .sz-news-v3__tab {
    flex-shrink: 0;
    min-height: 2rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.65rem;
  }

  /* === サイトマップ: 折りたたみアコーディオンで表示 === */
  .l-footer__sitemap,
  .footer-sitemap {
    display: block !important;
  }

  .footer-sitemap-toggle {
    display: inline-flex !important;
    min-height: 2rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.7rem;
  }

  .footer-sitemap__list {
    display: none; /* デフォルト閉じる */
  }

  .footer-sitemap.is-open .footer-sitemap__list {
    display: block;
  }

  .footer-sitemap__item {
    font-size: 0.65rem;
    padding: 0.25rem 0.5rem;
  }

  /* === フッター情報: ミニマル表示 === */
  .footer-logo {
    flex-direction: row;
    gap: 0.5rem;
    align-items: center;
  }

  .footer-logo__mark {
    width: 1.5rem;
    height: 1.5rem;
  }

  .footer-logo-text__ja {
    font-size: 0.7rem;
  }

  .footer-tel__number {
    font-size: 0.9rem;
    letter-spacing: 0.05em;
  }

  /* === ボタン: タッチターゲット確保 === */
  .c-button,
  .sz-hero-v2__important-text,
  button,
  a.btn {
    min-height: 2.75rem !important; /* 44px */
    padding: 0.5rem 0.75rem;
    font-size: 0.7rem;
  }

  /* === 画像: アスペクト比保持 === */
  img {
    max-width: 100%;
    height: auto;
  }

  /* === ヘッダー: コンパクトナビ === */
  .l-header-nav {
    overflow-x: auto;
    scrollbar-width: none;
    flex-wrap: nowrap !important;
  }

  .l-header-nav::-webkit-scrollbar {
    display: none;
  }

  .l-header-nav__link {
    flex-shrink: 0;
    font-size: 0.65rem;
    padding: 0.25rem 0.5rem;
  }

  /* === ポータルカード: ウェアラブル最適化（画像⑤対策） === */
  /* 実HTMLのクラスは .sz-hero-v2__portal-list（旧 __portal-grid は不一致だった） */
  .sz-hero-v2__portal-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.3rem !important;
  }

  /* 縦書きラベル(writing-mode:vertical-rl)が縦伸びの原因。
     横並びの左ラベル+本文のコンパクトカードに変換する */
  .sz-hero-v2__portal-card {
    display: grid !important;
    grid-template-columns: 3.25rem minmax(0, 1fr) !important;
    align-items: center !important;
    min-height: 2.5rem !important;
    padding: 0 !important;
    font-size: 0.7rem !important;
  }

  .sz-hero-v2__portal-side {
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    font-size: 0.58rem !important;
    padding: 0.35rem 0.2rem !important;
    min-width: 0 !important;
    line-height: 1.2 !important;
  }

  .sz-hero-v2__portal-side {
    writing-mode: horizontal-tb !important;
    font-size: 0.6rem !important;
    padding: 0.3rem 0.2rem !important;
    min-width: 0 !important;
  }

  .sz-hero-v2__portal-main {
    gap: 0.1rem !important;
  }

  .sz-hero-v2__portal-main small {
    font-size: 0.55rem !important;
    line-height: 1.3 !important;
  }

  .sz-hero-v2__portal-main strong {
    font-size: 0.75rem !important;
    line-height: 1.3 !important;
  }
}

/* ════════════════════════════════════════════════
   緊急修正 2026-06-07 (深層): ②③④ 追加強化
   ════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────
   ③ 重要情報ティッカー: 「本文が上に寄る」バランス崩れを修正
   原因: main.bundle が max-width:1279px で
     .sz-hero-v2__important{align-items:stretch}
     .sz-hero-v2__important-body{align-items:flex-start}
   としているため、日付・種別・タイトルが上揃えになり
   バー内で上に寄って見えていた。縦中央揃えに統一する。
   ────────────────────────────────────────────── */
body.home-page .sz-hero-v2__important {
  align-items: center !important;
}
body.home-page .sz-hero-v2__important-body {
  align-items: center !important;
}
/* 日付ブロック(年/月日)を中央揃えにして高さの偏りをなくす */
body.home-page .sz-hero-v2__important-date {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

/* ──────────────────────────────────────────────
   ④ YouTube/医療関係者バナーの「切れ」対策
   原因: .sz-news-side__banner-img の object-fit:cover +
   aspect-ratio で上下が切れて見えるケース。バナー全体を
   確実にカード内に収め、角丸クリップを担保する。
   ────────────────────────────────────────────── */
.sz-news-side__banner {
  overflow: hidden !important;
  border-radius: var(--radius-md, 0.5rem) !important;
}
.sz-news-side__banner-img {
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
  display: block !important;
}

/* ④ グローバルSNSアイコン: 表示と寸法を全箇所で統一（SVG） */
.sz-news-side__sns-icon,
.footer-sns__icon {
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0 !important;
  display: block !important;
  fill: currentColor !important;
}
.sz-news-side__sns-link,
.footer-sns__link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ════════════════════════════════════════════════
   緊急修正 2026-06-07 (第2深層): 画像1〜6 PCポータルバナー対応
   対象: .sz-portal-banner__*（min-width:768px で表示されるPCバナー）
   ════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────
   画像2,3: SNSアイコンを「白背景＋囲み線」のシンプル版に
   現状: 各SNSが原色ベタ塗り円（nth-child で色指定）
   変更: 背景白・薄い囲み線・アイコン色をブランド色に
   ────────────────────────────────────────────── */
body.home-page .sz-portal-banner__sns-row a,
body.home-page .sz-portal-banner__sns-row a:nth-child(1),
body.home-page .sz-portal-banner__sns-row a:nth-child(2),
body.home-page .sz-portal-banner__sns-row a:nth-child(3),
body.home-page .sz-portal-banner__sns-row a:nth-child(4),
body.home-page .sz-portal-banner__sns-row a:nth-child(5) {
  background: #fff !important;
  border: 1px solid rgba(17, 79, 161, 0.25) !important;
  color: #1a3d62 !important;
  border-radius: 50% !important;
  width: 2rem !important;
  height: 2rem !important;
  transition:
    border-color 0.15s,
    background 0.15s !important;
}
body.home-page .sz-portal-banner__sns-row a:hover {
  background: #f0f6ff !important;
  border-color: rgba(17, 79, 161, 0.5) !important;
  opacity: 1 !important;
}
/* アイコン色をブランドカラーで（背景白なので視認性確保） */
body.home-page
  .sz-portal-banner__sns-row
  a[aria-label="Instagram"]
  .material-symbols-outlined {
  color: #e1306c !important;
}
body.home-page
  .sz-portal-banner__sns-row
  a[aria-label="X"]
  .material-symbols-outlined {
  color: #000 !important;
}
body.home-page
  .sz-portal-banner__sns-row
  a[aria-label="Facebook"]
  .material-symbols-outlined {
  color: #1877f2 !important;
}
body.home-page
  .sz-portal-banner__sns-row
  a[aria-label="YouTube"]
  .material-symbols-outlined {
  color: #ff0000 !important;
}
body.home-page
  .sz-portal-banner__sns-row
  a[aria-label="LINE"]
  .material-symbols-outlined {
  color: #06c755 !important;
}

/* 画像2,3: ニュース横 Follow Us の SNS（SVG）も白背景＋囲み線に統一 */
.sz-news-side__sns-link {
  background: #fff !important;
  border: 1px solid rgba(17, 79, 161, 0.25) !important;
  border-radius: 10px !important;
  transition:
    border-color 0.15s,
    background 0.15s !important;
}
.sz-news-side__sns-link:hover {
  background: #f0f6ff !important;
  border-color: rgba(17, 79, 161, 0.5) !important;
}

/* ──────────────────────────────────────────────
   画像4: jump-row / keyword-row を中央揃えに
   ────────────────────────────────────────────── */
body.home-page .sz-portal-banner__jump-row {
  justify-content: center !important;
}
body.home-page .sz-portal-banner__keyword-row {
  justify-content: center !important;
}
body.home-page .sz-portal-banner__sns-row {
  justify-content: center !important;
}
/* 検索タイトルも中央 */
body.home-page .sz-portal-banner__search-title {
  justify-content: center !important;
  text-align: center !important;
}

/* ──────────────────────────────────────────────
   画像5: ポータルカードのウェアラブル/狭幅崩れ対策
   原因: __cards が repeat(4,1fr) 固定 + __card-side が
   writing-mode:vertical-rl（縦書き）のため、狭幅で
   各カードが極端に縦長になり崩れる。
   対策: 幅に応じて段組を減らし、狭幅では縦書きを解除した
   横並びのコンパクトカードに変換する。
   ────────────────────────────────────────────── */
/* タブレット〜狭幅(768〜900px): 2列に */
@media (min-width: 768px) and (max-width: 900px) {
  body.home-page .sz-portal-banner__inner {
    grid-template-columns: 1fr !important;
  }
  body.home-page .sz-portal-banner__cards {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
/* さらに狭い場合(〜560px相当): カードを1列・横書きラベルに */
@media (max-width: 560px) {
  body.home-page .sz-portal-banner__cards {
    grid-template-columns: 1fr !important;
    gap: 0.5rem !important;
  }
  body.home-page .sz-portal-banner__card {
    min-height: 3rem !important;
  }
  body.home-page .sz-portal-banner__card-side {
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    min-width: 4.5rem !important;
    font-size: 0.7rem !important;
    padding: 0.4rem 0.5rem !important;
    text-align: center !important;
  }
}

/* ──────────────────────────────────────────────
   画像5(ウェアラブル ≤279px): ポータルバナーを縦長で
   伸ばさず、横書きの2列コンパクトタイルにする
   （min-width:768px で表示なので通常ウェアラブルでは非表示だが、
    レスポンシブ確認時の崩れ防止として定義）
   ────────────────────────────────────────────── */
@media (max-width: 279px) {
  body.home-page .sz-portal-banner__cards {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.25rem !important;
  }
  body.home-page .sz-portal-banner__card {
    flex-direction: column !important;
    min-height: 2.75rem !important;
    border-radius: 8px !important;
  }
  body.home-page .sz-portal-banner__card-side {
    writing-mode: horizontal-tb !important;
    width: 100% !important;
    min-width: 0 !important;
    font-size: 0.58rem !important;
    padding: 0.2rem !important;
  }
  body.home-page .sz-portal-banner__card-main {
    padding: 0.3rem 0.35rem !important;
  }
  body.home-page .sz-portal-banner__card-main small {
    display: none !important; /* 狭すぎるので補足は省略 */
  }
  body.home-page .sz-portal-banner__card-main strong {
    font-size: 0.7rem !important;
  }
}

/* ──────────────────────────────────────────────
   画像6: 重要情報バー(sz-hero-v2__important)の本文が
   上に寄る問題 → 全要素を上下中央に揃える
   原因: max-width:1279px で __important が align-items:stretch、
   __important-body が align-items:flex-start のため本文が上寄り。
   ナビ列(上下矢印)が縦に高く、本文との高さ差で偏って見える。
   ────────────────────────────────────────────── */
body.home-page .sz-hero-v2__important {
  align-items: center !important;
}
body.home-page .sz-hero-v2__important-body {
  align-items: center !important;
  align-self: center !important;
}
body.home-page .sz-hero-v2__important-text {
  align-self: center !important;
}
/* ナビ列も中央に揃え、本文との縦バランスを取る */
body.home-page .sz-hero-v2__important-nav {
  align-self: center !important;
  align-items: center !important;
}

/* ════════════════════════════════════════════════
   緊急修正 2026-06-07 (第3深層): 画像①ピル内中央 + 画像②本文縦中央
   ════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────
   画像①: jump-row / keyword-row の各リンク(ピル)内の
   テキストを枠内中央に。行全体の中央寄せ(前回)に加え、
   各ピルの中身も flex 中央＋text-align:center で揃える。
   ────────────────────────────────────────────── */
body.home-page .sz-portal-banner__jump-row {
  justify-content: center !important;
  align-items: center !important;
}
body.home-page .sz-portal-banner__jump-row a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1.2 !important;
}

body.home-page .sz-portal-banner__keyword-row {
  justify-content: center !important;
  align-items: center !important;
}
body.home-page .sz-portal-banner__keyword-row a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1.2 !important;
}
/* 「注目」ラベルも縦位置を揃える */
body.home-page .sz-portal-banner__keyword-label {
  display: inline-flex !important;
  align-items: center !important;
}

/* ──────────────────────────────────────────────
   画像②: 重要情報バー本文(kind/date/text)の上下中央化を強化
   __important-body の子要素すべてを縦中央に揃える。
   日付ブロック(__important-date: flex-direction column)も
   中央寄せにし、バー内で上に寄らないようにする。
   ────────────────────────────────────────────── */
body.home-page .sz-hero-v2__important-body > * {
  align-self: center !important;
}
body.home-page .sz-hero-v2__important-kind {
  display: inline-flex !important;
  align-items: center !important;
  align-self: center !important;
}
body.home-page .sz-hero-v2__important-date {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  align-self: center !important;
}
body.home-page .sz-hero-v2__important-badge {
  align-self: center !important;
}

/* ════════════════════════════════════════════════
   緊急修正 2026-06-07 (第4): ヘッダーWEB問診ボタンの枠線強化
   原因: --webmonshin は border-color:rgba(13,58,117,.35)（薄い）。
   さらに 1280px+ で .sz-header__cta-btn が
   border-inline:1px solid rgba(13,58,117,.12) に上書きされ、
   白背景に対して枠線がほぼ見えなくなっていた。
   対策: 全幅で 1.5px の濃い枠線（不透明）を明示し視認性を確保。
   ════════════════════════════════════════════════ */
.sz-header__cta-btn--webmonshin {
  border: 1.5px solid var(--sz-primary-dark, #0d3a75) !important;
  border-color: var(--sz-primary-dark, #0d3a75) !important;
}
/* hover時は反転（背景濃紺・枠線維持） */
.sz-header__cta-btn--webmonshin:hover {
  border: 1.5px solid var(--sz-primary-dark, #0d3a75) !important;
}
/* 1280px+ の border-inline 上書き（薄い枠線）を打ち消す */
@media (min-width: 1280px) {
  .sz-header__cta-btn--webmonshin {
    border: 1.5px solid var(--sz-primary-dark, #0d3a75) !important;
    border-inline: 1.5px solid var(--sz-primary-dark, #0d3a75) !important;
    border-block: 1.5px solid var(--sz-primary-dark, #0d3a75) !important;
  }
}

/* ════════════════════════════════════════════════
   緊急修正 2026-06-07 (第5): 診療科/部門/委員会 詳細ページの
   縦長・余白過大・テーブル行見出し左詰まり・統計カード空白を一括改善
   対象: .dept-content-block / .dept-table-modern / .dept-stats-grid
   （全 department_detail ページ共通CSSなので全該当ページに反映）
   ════════════════════════════════════════════════ */

/* ── 画像b,c: dept-table-modern の行見出し(tbody th)を整形 ──
   原因: thead th と tbody td にしか padding が無く、行見出し
   (受入対象 / 月・水・金 等)が既定の極小paddingで左に詰まっていた。
   sakura-table tbody th と同等の体裁(余白・幅・薄背景・左アクセント)を付与。 */
body:not(.home-page) #main-content .dept-table-modern tbody th {
  padding: clamp(0.75rem, 2vw, 1rem) clamp(1rem, 2vw, 1.5rem) !important;
  text-align: start !important;
  vertical-align: middle;
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-text-main);
  background: var(--color-background, #f3f6fa);
  white-space: nowrap;
  border-block-end: 1px solid var(--color-border-light);
  border-inline-start: 3px solid var(--color-primary, #114fa1);
  inline-size: clamp(7rem, 26%, 13rem);
}
@media (max-width: 600px) {
  body:not(.home-page) #main-content .dept-table-modern tbody th {
    white-space: normal;
    inline-size: 40%;
  }
}
body:not(.home-page) #main-content .dept-table-modern tbody tr:last-child th {
  border-block-end: none;
}
/* 値セルも上下中央で読みやすく */
body:not(.home-page) #main-content .dept-table-modern tbody td {
  vertical-align: middle;
}

/* ── 画像a: stats-grid + table 横並びの空白解消 ──
   原因: 短いテーブルの横で統計カード3枚が縦積みで背が高くなり
   テーブル下に大きな空白。カードをコンパクトな横型にして高さを抑え、
   stretch + flex:1 でテーブル高さに均等フィットさせ空白を解消。 */
@media (min-width: 768px) {
  body:not(.home-page)
    #main-content
    .dept-content-block__body:has(.dept-stats-grid):has(.dept-table-modern) {
    align-items: stretch !important;
  }
  body:not(.home-page)
    #main-content
    .dept-content-block__body:has(.dept-stats-grid):has(.dept-table-modern)
    .dept-stats-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: clamp(0.5rem, 1.2vw, 0.75rem) !important;
    margin-block-end: 0 !important;
  }
  body:not(.home-page)
    #main-content
    .dept-content-block__body:has(.dept-stats-grid):has(.dept-table-modern)
    .dept-stat-card {
    flex: 1 1 0 !important; /* テーブル高さに均等フィット（空白解消）*/
    flex-direction: row !important; /* 数値+ラベルを横並びでコンパクトに */
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: 0.2rem 0.4rem !important;
    padding: clamp(0.6rem, 1.5vw, 1rem) clamp(0.75rem, 2vw, 1.25rem) !important;
    text-align: center;
  }
  body:not(.home-page)
    #main-content
    .dept-content-block__body:has(.dept-stats-grid):has(.dept-table-modern)
    .dept-stat-card__number {
    font-size: clamp(1.5rem, 2.5vw, 2.1rem) !important;
  }
  body:not(.home-page)
    #main-content
    .dept-content-block__body:has(.dept-stats-grid):has(.dept-table-modern)
    .dept-stat-card__label {
    flex-basis: 100%;
    margin-block-start: 0.05rem !important;
  }
}

/* ── 全体の縦長・余白過大の圧縮 ──
   dept-content-block のブロック間隔を縮小して全体を引き締める */
body:not(.home-page) #main-content .dept-content-block {
  margin-block-end: clamp(1.75rem, 3.5vw, 2.75rem) !important;
  padding-block-end: clamp(1.25rem, 2.5vw, 1.75rem) !important;
}
body:not(.home-page) #main-content .dept-content-block__header {
  margin-block-end: clamp(1rem, 2vw, 1.5rem) !important;
}
/* 単独配置(テーブルと並ばない)の統計カードも少し圧縮 */
body:not(.home-page) #main-content .dept-stat-card {
  padding: clamp(1rem, 2.2vw, 1.5rem);
}
body:not(.home-page) #main-content .dept-stats-grid {
  margin-block-end: clamp(1rem, 2vw, 1.5rem);
}

/* ════════════════════════════════════════════════
   緊急修正 2026-06-07 (第6): /medical/departments/ 配下 全45ページ
   詳細ページの縦長・余白・テーブル・リスト・カード密度を総合改善
   （全ページ共通CSSなので 1 箇所で全ページに反映）
   設計 A〜H に対応
   ════════════════════════════════════════════════ */

/* ── A: リッチHTML(detail_content)内の素テーブルの行見出し(tbody th) ──
   .dept-table-modern と異なり detail_content 直書きの <table> は
   .dept-detail-richcontent table。その tbody th が左詰まりだったため
   余白・幅・薄背景・左アクセントを付与して可読性を確保。 */
body:not(.home-page) #main-content .dept-detail-richcontent table tbody th {
  padding: clamp(0.7rem, 1.8vw, 0.95rem) clamp(0.9rem, 2vw, 1.4rem) !important;
  text-align: start !important;
  vertical-align: middle;
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-text-main);
  background: var(--color-background, #f3f6fa);
  white-space: nowrap;
  border-block-end: 1px solid var(--color-border-light);
  border-inline-start: 3px solid var(--color-primary, #114fa1);
  inline-size: clamp(7rem, 26%, 13rem);
}
@media (max-width: 600px) {
  body:not(.home-page) #main-content .dept-detail-richcontent table tbody th {
    white-space: normal;
    inline-size: 40%;
  }
}
body:not(.home-page) #main-content .dept-detail-richcontent table tbody td {
  vertical-align: middle;
}

/* ── B: 番号付きリスト(dept-info-list)の縦圧縮 + マーカー縦位置 ──
   padding-block が大きく15項目で過剰に縦長。圧縮しつつマーカーと
   本文の縦位置を揃える。 */
body:not(.home-page) #main-content .dept-info-list__item {
  padding-block: clamp(0.75rem, 2vw, 1.15rem) !important;
  gap: clamp(0.625rem, 1.5vw, 1rem) !important;
  align-items: flex-start;
}
body:not(.home-page) #main-content .dept-info-list__marker {
  margin-block-start: 0 !important;
}

/* ── C: カード系 padding の適正化（間延び解消） ── */
body:not(.home-page) #main-content .dept-feature-card {
  padding: clamp(1rem, 2.2vw, 1.4rem) !important;
}
body:not(.home-page) #main-content .dept-policy-card {
  padding: clamp(1.1rem, 2.4vw, 1.6rem) !important;
}
body:not(.home-page) #main-content .dept-message-box {
  padding: clamp(1rem, 2.2vw, 1.4rem) !important;
}

/* ── D: リッチHTML内 h2 の二重装飾抑制 ──
   .dept-detail-richcontent h2::before の縦バーが
   dept-content-block__title(h2) と二重になるのを確実に抑制。 */
body:not(.home-page)
  #main-content
  .dept-detail-richcontent
  .dept-content-block__title {
  border-block-end: 0 !important;
  padding-block-end: 0 !important;
  margin-block: 0 !important;
}
body:not(.home-page)
  #main-content
  .dept-detail-richcontent
  .dept-content-block__title::before {
  content: none !important;
  display: none !important;
}

/* ── E: セクション間余白の圧縮（縦長の主因） ── */
body:not(.home-page) #main-content .sakura-section {
  margin-block-end: clamp(1.5rem, 3vw, 2.25rem);
}
body:not(.home-page) #main-content .dept-section-divider {
  padding-block: clamp(0.25rem, 0.6vw, 0.5rem) !important;
  margin-block: clamp(0.25rem, 0.6vw, 0.5rem) !important;
}
body:not(.home-page) #main-content .dept-detail-richcontent h2 {
  margin-block: clamp(1.5rem, 3vw, 2rem) clamp(0.75rem, 1.5vw, 1.25rem) !important;
}
/* richcontent内の section + section の過大マージンも圧縮 */
body:not(.home-page) #main-content .dept-detail-richcontent > section + section,
body:not(.home-page) #main-content .dept-detail-richcontent > div + div {
  margin-block-start: clamp(1.5rem, 3vw, 2.25rem) !important;
}

/* ── F: 関連疾患グリッド(dept-conditions-grid)の密度向上 ──
   42枚と多いので段組を増やしカード余白を圧縮して縦長を緩和。 */
body:not(.home-page) #main-content .dept-conditions-grid {
  gap: clamp(0.6rem, 1.5vw, 1rem);
}
@media (min-width: 600px) {
  body:not(.home-page) #main-content .dept-conditions-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  body:not(.home-page) #main-content .dept-conditions-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
body:not(.home-page) #main-content .dept-condition-card {
  padding: clamp(0.85rem, 2vw, 1.25rem);
}

/* ── G: 冒頭 dept-intro の圧縮 ── */
body:not(.home-page) #main-content .dept-intro {
  padding: clamp(1.1rem, 2.4vw, 1.75rem) !important;
  margin-block-end: clamp(1.5rem, 3vw, 2.25rem) !important;
}

/* ── H: 診療科一覧ページ sz-dept-list-card の余白適正化 ── */
body:not(.home-page) #main-content .sz-dept-list-card {
  padding: clamp(1rem, 2.5vw, 1.25rem) !important;
  gap: clamp(0.75rem, 2vw, 1.25rem) !important;
}

/* ════════════════════════════════════════════════
   緊急修正 2026-06-07 (第7→第8改訂): 全サブページ共通
   パンくず+アンカーナビ(page-topbar)が固定ヘッダーの
   陰に隠れる問題を修正 → 実ヘッダー高さに追従する sticky
   原因: 固定ヘッダー(.sz-header, z-index:1000)は2〜3段で
   実高さが約98〜110px。前回 top:50px が小さすぎて page-topbar が
   ヘッダー裏に潜り込んでいた。
   対策: JS(ui-core)が実測した --sticky-header-h を top に使用。
   未測定時のフォールバックを 110px(PC)/60px(モバイル)に設定し
   小さすぎて隠れる事故を防止。
   ════════════════════════════════════════════════ */
body:not(.home-page) .page-topbar {
  position: sticky;
  /* JS未適用でも隠れないようモバイル既定を大きめに */
  top: var(--sticky-header-h, 60px);
  z-index: 90; /* ヘッダー(1000)より下・本文より上 */
  background: var(--color-white, #fff);
}
@media (min-width: 1280px) {
  body:not(.home-page) .page-topbar {
    /* PCフルヘッダー(utility48+main50=98)+余裕。JSが実値で上書き */
    top: var(--sticky-header-h, 110px);
  }
}
/* sticky を効かせるため祖先の overflow を解除（念のため） */
body:not(.home-page) .saikazo-main {
  overflow: visible;
}
/* アンカージャンプ時もヘッダー+topbar下に出るようスクロール余白 */
html {
  scroll-padding-top: var(--sticky-header-h, 110px);
}

/* ════════════════════════════════════════════════
   緊急修正 2026-06-07 (第9→第10改訂): テーブルの背景方針
   ・左の行見出し列(th) = ベージュ背景を維持（列の区別）
   ・右の値列(td)        = ゼブラ廃止で全行 白に統一
   原因(前回): th まで白にしてしまい左右の区別が消えた。
   今回: th はベージュに戻し、td のみ白＋境界線で区切る。
   対象: dept-table-modern / dept-detail-richcontent table
   （/medical/departments/ 配下 全45ページに共通反映）
   ════════════════════════════════════════════════ */

/* 値列(td): 偶数行ゼブラ背景を廃止して全行 白に */
body:not(.home-page) #main-content .dept-table-modern tbody tr:nth-child(even),
body:not(.home-page)
  #main-content
  .dept-detail-richcontent
  table
  tbody
  tr:nth-child(even) {
  background: transparent !important;
}
body:not(.home-page) #main-content .dept-table-modern tbody td,
body:not(.home-page) #main-content .dept-detail-richcontent table tbody td {
  background: var(--color-white, #fff) !important;
}

/* 行見出し(分類列 th): ベージュ背景を維持（左右の区別） */
body:not(.home-page) #main-content .dept-table-modern tbody th,
body:not(.home-page) #main-content .dept-detail-richcontent table tbody th {
  background: var(--color-background, #f3f6fa) !important;
}

/* 行間は境界線で区切る */
body:not(.home-page) #main-content .dept-table-modern tbody td,
body:not(.home-page) #main-content .dept-table-modern tbody th,
body:not(.home-page) #main-content .dept-detail-richcontent table tbody td,
body:not(.home-page) #main-content .dept-detail-richcontent table tbody th {
  border-block-end: 1px solid var(--color-border-light, #e5e7eb) !important;
}
body:not(.home-page) #main-content .dept-table-modern tbody tr:last-child td,
body:not(.home-page) #main-content .dept-table-modern tbody tr:last-child th,
body:not(.home-page)
  #main-content
  .dept-detail-richcontent
  table
  tbody
  tr:last-child
  td,
body:not(.home-page)
  #main-content
  .dept-detail-richcontent
  table
  tbody
  tr:last-child
  th {
  border-block-end: none !important;
}

/* ホバーのみ薄いハイライト（td側のみ。th はベージュ維持） */
body:not(.home-page) #main-content .dept-table-modern tbody tr:hover td,
body:not(.home-page)
  #main-content
  .dept-detail-richcontent
  table
  tbody
  tr:hover
  td {
  background: var(--color-primary-light, #eef4fb) !important;
}