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