/* UI バランス確認の指摘（2026-10-09）。既存の CSS の後に読む。
   ヘッダーのある全ページ（index・404.php を含む）が読む。PC の固定ヘッダー（S1）は保留中で、ここでは触らない。 */

/* S8: ページ見出しの直後の余白を SP 16px / PC 24px にそろえる（商品ページと法務ページ。見出しの形は変えない） */
body main h1.section-title:has(+ .content-card) { margin-bottom: 24px; }
body main h1.section-title + .content-card { margin-top: 0; }
.page-policy .page-title-bar:has(+ :is(.policy-body, .policy-meta)) { margin-bottom: 24px; }
@media (max-width: 767px) {
  body main h1.section-title:has(+ .content-card) { margin-bottom: 16px !important; }
  .page-policy .page-title-bar:has(+ :is(.policy-body, .policy-meta)) { margin-bottom: 16px; }
}

/* S6: 育英費用補償も他の節と同じ「説明 → カード」の縦並びに */
.block-cols { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 1.4rem; }

/* S3: PC はイラストカードを 3 列に固定（1〜2 枚の節も同じ大きさで左から） */
@media (min-width: 1024px) {
  .example-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* S4: カードの絵を同じ高さの枠に入れ、説明文の開始位置をそろえる（スマホの横並びは従来どおり） */
@media (min-width: 596px) {
  .example-card img { width: auto; height: 150px; max-width: 100%; object-fit: contain; }
}

/* S5: カードの説明文の最終行に 1〜2 文字だけ残らないように */
.example-card p { text-wrap: balance; word-break: auto-phrase; }
.example-card .wrap-unit { white-space: nowrap; } /* 「食中毒」等の単語を途中で折らない（hoikuen は wrap-improvements を読まないため） */

/* S9: 園バスの段落を写真の右の 1 列にまとめる（PC・タブレット） */
@media (min-width: 768px) {
  .notice-wrap:has(> .notice-wrap__img) {
    display: grid;
    grid-template-columns: minmax(0, min(420px, 45%)) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    gap: 0 2rem;
    align-items: start;
  }
  .notice-wrap > .notice-wrap__img { grid-column: 1; grid-row: 1 / span 3; float: none; margin: 0; }
  .notice-wrap:has(> .notice-wrap__img) > p { grid-column: 2; }
}

/* S10: 見出しの文字と ※ を一続きに（HTML で span に包んだもの） */
.block-title__text sup { margin-left: 0.1em; }

/* S7: 給付の表をスマホでは行ごとの縦積みに（横スクロールなし）。
   負傷・疾病で共通の給付金額（PC は rowspan）は、縦積みのときだけ疾病の行にも同じセルを出す。 */
.data-table--stack > tbody > tr > td.data-table__sp-dup { display: none; }
@media (max-width: 600px) {
  .data-table--stack > tbody > tr > td.data-table__sp-dup { display: block; }
  main div:has(> table.data-table--stack)::before { content: none !important; display: none !important; }
  main table.data-table.data-table--stack { min-width: 0 !important; width: 100%; border: 0; }
  .data-table--stack > thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .data-table--stack > tbody, .data-table--stack > tbody > tr, .data-table--stack > tbody > tr > td { display: block; width: auto; }
  .data-table--stack > tbody > tr { border: 1px solid #ccc; border-top: 0; }
  .data-table--stack > tbody > tr:first-child,
  .data-table--stack > tbody > tr:has(> td.row-header) { border-top: 1px solid #ccc; margin-top: 12px; }
  .data-table--stack > tbody > tr:first-child { margin-top: 0; }
  .data-table--stack > tbody > tr > td { border: 0; border-top: 1px solid #ccc; }
  .data-table--stack > tbody > tr > td:first-child { border-top: 0; }
  .data-table--stack > tbody > tr > td.row-header { text-align: left; }
  .data-table--stack > tbody > tr > td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    font-size: 14px;
    font-weight: 700;
    color: #4b555c;
  }
  .data-table--stack .data-table { width: 100%; }
}

/* S15: スマホでは読めない LINE の QR を隠し、「友だち追加」ボタンだけに */
@media (max-width: 767px) {
  .contact-method__qr { display: none; }
}

/* S11: スマホのヘッダーで東京海上日動のロゴを左端から本文と同じ 16px 離す（右の 60px はそのまま） */
@media (max-width: 600px) {
  html .site-header .site-logo { padding-left: 16px; box-sizing: border-box; }
  html.has-js .site-header { background-size: 100% calc((100vw - 76px) * 25 / 975); }
}

/* S2（トップ）: 「よくあるご質問」をスマホでは Q/A マークの横に本文を全幅で、絵は本文の下に */
@media (max-width: 600px) {
  main .qa-list .qa-row { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); column-gap: .8rem; align-items: start; padding-left: 0; }
  main .qa-list .qa-row--answer { padding: 1.2rem; }
  main .qa-list .qa-row > .qa-mark { float: none; grid-column: 1; grid-row: 1; margin: 0; }
  main .qa-list .qa-row > p { grid-column: 2; grid-row: 1; }
  main .qa-list .qa-row > img { float: none; display: block; grid-column: 2; grid-row: 2; justify-self: center; margin: .8rem 0 0; max-width: 60%; height: auto; }
  main .qa-list .qa-row--question > img:first-of-type { display: none; }
  main .qa-list .qa-row--answer > img { max-width: 64px; }
}

/* S12（トップ）: ニュースの説明文を見出しと同じ左寄せに（表の下の注記の右寄せはそのまま） */
.section-lead { text-align: left; }

/* S1: PC・タブレット（768px 以上）はロゴ（大きさは今のまま）をスクロールで上に流し、メニューの帯だけ固定。
   sticky の top を「ロゴの高さ＋ロゴとメニューの間の半分」だけ負にする。ロゴの幅は 768〜1023px＝画面幅、
   1024px 以上＝min(画面幅−64px, 1100px)。100vw はスクロールバーの分（約 3px）だけ大きく計算されるが、
   ロゴとメニューの間（14px / 10px）の残り半分の中に収まり、ロゴもメニューも欠けない。スマホ（767px 以下）は変えない。
   ページ内リンクの着地位置は固定される帯の高さ＋8px に合わせる（帯＝メニュー＋下の余白・線）。 */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .site-header:has(.site-logo) { top: calc(-1 * (100vw * 92 / 550 + 7px)); }
  html:has(.site-header .site-logo) { --anchor-offset: 128px; }
}
@media screen and (min-width: 1024px) {
  .site-header:has(.site-logo) { top: calc(-1 * (min(100vw - 64px, 1100px) * 92 / 550 + 5px)); }
  html:has(.site-header .site-logo) { scroll-padding-top: calc(min(74.8px, 47.6px + 2.04vw) + 35px); }
}
/* 横向きのスマホ（高さ 500px 以下）はヘッダーが流れる従来の扱い（anchor-offset-20261004）のまま */
@media screen and (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  html:has(.site-header .site-logo) { --anchor-offset: 0px; scroll-padding-top: 0; }
}