/* ============================================================
   jishinhoken.css – Earthquake Insurance page styles (complete)
   Last Update: 2025-08-15 (Typography clamp / a11y tuning)
   ------------------------------------------------------------
   役割：
   - 「家財の地震保険」ページ固有の見た目のみ定義
   - 表（割引制度 / 支払区分）のレイアウトと装飾
   - スクロール系UI（右端フェード／同期バー／配色）は
     common.css + scroll.js に共通化
     ※ 必要なら :root で --sb-* を上書きしてください
        例）--sb-thumb, --sb-track, --sb-height
   ============================================================ */


/* ------------------------------------------------------------
   0) Design tokens（このページだけの配色・寸法）
   ------------------------------------------------------------ */
:root {
  /* テーブルUI */
  --jt-border: #000;        /* 表枠の基本線色 */
  --jt-head-bg: #d8e4f4;    /* 見出し背景（薄ブルー） */
  --jt-even-bg: #f7fdf8;    /* 偶数行背景（淡いグリーン） */
  --jt-accent: #e2761f;     /* 強調（%や注意色） */

  --jt-th-pad-y: 0.8rem;
  --jt-td-pad-y: 0.8rem;
  --jt-cell-pad-x: 1rem;

  /* フォント（common 未定義時は流体で保険） */
  --eq-fs-base: var(--fs-base, clamp(1.6rem, 1.5rem + 0.3vw, 1.8rem));
  --eq-fs-title: var(--fs-title, clamp(2.0rem, 1.6rem + 1.2vw, 2.6rem));

  /* アクセシビリティ（common があれば優先） */
  --eq-focus-ring: var(--focus-ring, 3px solid rgba(0,117,201,.6));


  /* （任意）このページだけスクロールバー配色を変える場合は以下を解放
  --sb-thumb  : #0f7011;
  --sb-track  : #cfead3;
  --sb-height : 20px;
  */
}


/* ------------------------------------------------------------
   1) セクション共通
   ------------------------------------------------------------ */


.eq-section {
  padding: 2rem 0;
  margin-block-start: 0;
  background: var(--clr-bg-section, var(--flow-bg));
}
.eq-section .container {
  margin-inline: auto;     /* 中央寄せを維持 */
  margin-block-end: 1rem;  /* 下だけ余白 */
}
.eq-subtitle {
  border-left-color: var(--hk-primary, #004a9f);
}
.eq-section .section-title {
  margin: 0rem 0rem 2rem 0rem;
}

/* 小テキストの注記リスト（このページ内のみ軽微調整） */
.eq-section .note-list {
  margin: 0.2rem 0 1rem;
  padding-left: 1.4em;
  font-size: var(--eq-fs-base);
  line-height: 1.6;
}
.eq-section .note-list li {
  list-style: disc;
}


/* ------------------------------------------------------------
   2) 支払区分テーブル（「家財の地震保険・支払区分」）
      ※ スクロールや右端フェードは共通CSS側で処理
   ------------------------------------------------------------ */
.damage-table-wrapper {
  /* ページ固有の余白のみを保持（挙動は common.css に委譲） */
  margin: 2.4rem 0;
}

.damage-table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  font-size: var(--eq-fs-base);
  line-height: 1.4;
  background: #fff;
  border: 1px solid #c4c4c4;
  border-radius: 8px; /* 視覚上の角丸 */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.damage-table th,
.damage-table td {
  border: 1px solid #e0e0e0;
  padding: var(--jt-td-pad-y) var(--jt-cell-pad-x);
  text-align: center;
  vertical-align: middle;
}
.damage-table thead th {
  background: #00655a;
  color: #fff;
  font-weight: 700;
}
.damage-table tr:nth-child(even) {
  background: var(--jt-even-bg);
}

/* 強調（%など） */
.rate-bold {
  font-weight: 700;
  color: var(--jt-accent);
}
/* 大きな数字だけ拡大（Safari のベースラインずれを避ける） */
.damage-table .num-lg {
  font-size: clamp(2.6rem, 2.2rem + 0.8vw, 3rem);
  line-height: 1;
  display: inline-block;
}


/* ------------------------------------------------------------
   3) 割引制度テーブル（.discount-table）
   ------------------------------------------------------------ */
.discount-table-wrapper {
  margin: 1.2rem 0 0;
}

.discount-table {
  width: 100%;
  min-width: 680px; /* モバイル初期幅 */
  table-layout: fixed;
  border-collapse: collapse;
  border: 1px solid var(--jt-border);
  font-size: var(--eq-fs-base);
  line-height: 1.3;
  transition: min-width 0.25s ease;
}
/* scroll.js が横幅超過時だけ付与 → PC 幅相当に拡張 */
.discount-table.expanded {
  min-width: var(--content-max-width);
}

/* セル共通 */
.discount-table th,
.discount-table td {
  border: 1px solid var(--jt-border);
  padding: 0.8rem;
  vertical-align: top;
}
.discount-table thead tr th,
.discount-table tr:first-child th {
  background: var(--jt-head-bg);
  color: #000;
  font-weight: 700;
  text-align: left;
}

/* 左列（割引種類）を淡緑で強調 */
.discount-table .level {
  background: #f0fffa;
  font-weight: 700;
}

/* 右列の丸数字（環境依存せず固定の丸数字グリフを使用） */
@counter-style circled-decimal {
  system: fixed;
  /* 1..20 = U+2460..U+2473（丸数字） */
  symbols: "\2460""\2461""\2462""\2463""\2464""\2465""\2466""\2467""\2468""\2469""\246A""\246B""\246C""\246D""\246E""\246F""\2470""\2471""\2472""\2473";
  suffix: " ";
}
.req-paras {
  counter-reset: req;
}
.req-paras p {
  counter-increment: req;
  position: relative;
  padding-left: 2.4rem;
  margin: 0 0 0.4rem;
}
.req-paras p::before {
  content: counter(req, circled-decimal);
  position: absolute;
  left: 0;
  top: 0;
  font-size: var(--eq-fs-base);
  line-height: 1.2;
  font-family: "Noto Sans JP", "Roboto", "Meiryo", sans-serif;
}

/* 「耐震等級割引」の括弧内説明は本文ウェイトへ */
.level.level-paren p {
  font-weight: normal;
}

/* レベル行内の注意（赤） */
.level .note {
  margin: 0.2rem 0 0;
}
.level .note sup {
  color: #a50000;
}


/* ------------------------------------------------------------
   4) アラートボックス（注意事項）
   ------------------------------------------------------------ */
.alert-box {
  border: 2px solid var(--jt-accent);
  border-radius: 6px;
  padding: 1.6rem;
  margin: 2.4rem 0;
  background: #fff;
  font-size: var(--eq-fs-base);
  line-height: 1.6;
}
.alert-box__head {
  display: flex;
  align-items: center;
  margin-bottom: 0.8rem;
}
.alert-box__icon {
  font-size: clamp(2rem, 1.8rem + 0.6vw, 2.4rem);
  margin-right: 0.6rem;
  line-height: 1;
  color: var(--jt-accent);
}
.alert-box__title {
  font-weight: 700;
  color: var(--jt-accent);
  margin: 0;
  font-size: var(--eq-fs-title);
  line-height: 1.2;
  white-space: normal;
}
.alert-box__body {
  margin: 0;
}


/* ------------------------------------------------------------
   5) 強調色（本文内 % など）
   ------------------------------------------------------------ */
.rate {
  color: var(--jt-accent);
  font-weight: 700;
}


/* ------------------------------------------------------------
   6) 限度額表（右寄せフロート）
   ------------------------------------------------------------ */
.limit-table-wrapper {
  float: right;
  margin: 0 0 1.6rem 2.4rem;
  max-width: 340px;
}
.limit-table {
  width: 100%;
  border: 1px solid var(--jt-border);
  border-collapse: collapse;
  font-size: var(--eq-fs-base);
  line-height: 1.4;
  background: #fff;
}
.limit-table th,
.limit-table td {
  border: 1px solid var(--jt-border);
  padding: 0.6rem 0.2rem;
}
.limit-table th {
  background: var(--jt-head-bg);
  font-weight: 700;
  text-align: center;
}
.limit-table .item {
  text-align: center;
}
.limit-table .amount {
  color: var(--jt-accent);
  font-weight: 700;
  text-align: center;
}
@media (max-width: 600px) {
  .limit-table-wrapper {
    float: none;
    margin: 0 auto 1.6rem;
    max-width: none;
  }
}


/* ------------------------------------------------------------
   7) 「右記／上記」自動切替（PC/スマホ）
   ------------------------------------------------------------ */
.dir-word::after {
  content: attr(data-wide);
}
@media (max-width: 600px) {
  .dir-word::after {
    content: attr(data-narrow);
  }
}


/* ------------------------------------------------------------
   8) 細かな余白・レスポンシブ
   ------------------------------------------------------------ */
@media (max-width: 600px) {
  /* テーブル内フォントを微調整して折返しと視認性を確保 */
  .discount-table,
  .damage-table {
    font-size: clamp(1.6rem, 1.55rem + 0.2vw, 1.7rem);
  }
  .damage-table .num-lg {
    font-size: clamp(2.2rem, 2rem + 0.6vw, 2.6rem);
  }
}


/* ------------------------------------------------------------
   9) フォーカス可視（ページ内リンク等）
   ------------------------------------------------------------ */
.eq-section a:focus-visible,
.discount-table a:focus-visible,
.damage-table a:focus-visible,
.alert-box a:focus-visible,
.limit-table a:focus-visible {
  outline: var(--eq-focus-ring);
  outline-offset: 2px;
  border-radius: 0.2rem;
}
/* 支払区分（家財の地震保険）だけ、左右のUA既定マージンを打消し */
figure[aria-label="家財の地震保険・支払区分"] { margin-inline: 0; }

/* ============================================================
   SP専用：家財の地震保険・支払区分テーブルの列幅＆余白最適化
   目的：
     - 列幅：内容の長さに合わせて決定（列内で一貫）
     - 改行：既存の <br> のみで折り、追加の自動改行はしない
     - 余白：最小化。ただし変数で後から調整できる
   影響範囲：<figure aria-label="家財の地震保険・支払区分"> のみ
   ------------------------------------------------------------ */
@media (max-width: 600px) {
  /* 1) 余白（調整トークン）：必要に応じて数値だけ変えてOK */
  figure[aria-label="家財の地震保険・支払区分"] {
    --jt-td-pad-y: 0.2rem;   /* 上下の最小余白（デフォ 0.2rem）*/
    --jt-cell-pad-x: 0.3rem; /* 左右の最小余白（デフォ 0.3rem）*/
  }

  /* 2) テーブル幅：内容に合わせて“縮む”ようにする */
  figure[aria-label="家財の地震保険・支払区分"] .damage-table {
    /* 既定の min-width: 680px を打ち消し、内容幅で縮む */
    min-width: 0;
    width: auto;
    display: inline-table; /* shrink-to-fit（列幅＝内容） */
    table-layout: auto;    /* 列幅を内容から算出 */
  }

  /* 3) 自動折返しを止め、<br> のみで改行する */
  figure[aria-label="家財の地震保険・支払区分"] .damage-table th,
  figure[aria-label="家財の地震保険・支払区分"] .damage-table td {
    white-space: nowrap;   /* 自動改行を抑止（<br> は有効）*/
    white-space: normal;     /* balance は使わない（方針どおり）*/
  }
}
/* ============================================================
   SP専用：支払区分テーブル（家財の地震保険）
   目的：
     1) 列幅＝内容の長さに合わせる（列内は全行で同じ幅）
     2) 既存の <br> は改行するが、それ以外は改行しない
     3) 収まらない分は横スクロール（既存の下段バー表示を利用）
     4) セル余白は“ほぼゼロ”に。変えたい時は下の変数を触るだけ
   影響範囲：figure[aria-label="家財の地震保険・支払区分"] 内のみ
   ------------------------------------------------------------ */
@media (max-width: 600px) {
  /* ★ 余白の調整ノブ（お好みで変更） */
  figure[aria-label="家財の地震保険・支払区分"] {
    --jt-cell-pad-x: 0.3rem;  /* セル左右の余白（初期：ほぼゼロ） */
    --jt-th-pad-y:   0.2rem;  /* 見出しセルの上下余白 */
    --jt-td-pad-y:   0.2rem;  /* データセルの上下余白 */
  }

  /* 列幅＝内容の長さ。表は必要分だけの幅に縮む */
  figure[aria-label="家財の地震保険・支払区分"] .damage-table {
    display: inline-table;   /* shrink-to-content（列幅は内容基準） */
    table-layout: auto;      /* 列幅を内容から自動算出（既定だが明示） */
    width: auto;             /* 既存の width:100% をSPでは打消し */
    min-width: 0;            /* 既存の min-width:680px をSPでは解除 */
  }

  /* 既存の <br> だけ改行し、それ以外は折返さない */
  figure[aria-label="家財の地震保険・支払区分"] .damage-table th,
  figure[aria-label="家財の地震保険・支払区分"] .damage-table td {
    white-space: nowrap;     /* 自動改行なし（<br> は有効） */
    padding-block: var(--jt-td-pad-y);
    padding-inline: var(--jt-cell-pad-x);
  }
  /* 見出しセルは上下余白を別ノブで */
  figure[aria-label="家財の地震保険・支払区分"] .damage-table thead th,
  figure[aria-label="家財の地震保険・支払区分"] .damage-table tr:first-child th {
    padding-block: var(--jt-th-pad-y);
  }
}
/* ============================================================
   支払区分図（figure）と直前の .alert-box の間隔を詰める
   - 既定：.alert-box の margin は上下 2.4rem（jishinhoken.css）
   - 目的：この組合せのときだけ「0.8rem」に縮める
   - スクロールUIや配色は変更しない
   ============================================================ */
:root {
  /* ★ お好みで調整（例：0.6rem / 1rem など） */
  --eq-gap-alert2figure: 0.8rem;
}

/* モダンブラウザ：:has() で “この並びのときだけ” 下マージンを変更 */
@supports selector(:has(+ *)) {
  /* .alert-box の直後が 該当 figure の場合だけ下マージンを詰める */
  .eq-section .alert-box:has(+ figure[aria-label="家財の地震保険・支払区分"]) {
    margin-bottom: var(--eq-gap-alert2figure);
  }
  /* UA既定の figure 上マージンは打消し（margin 折り畳みの影響を排除） */
  .eq-section .alert-box + figure[aria-label="家財の地震保険・支払区分"] {
    margin-top: 0;
  }
}

/* 旧ブラウザ用フォールバック（:has 未対応）
   2.4rem − 0.8rem = 1.6rem を“負の上マージン”で相殺して 0.8rem に近づける */
@supports not selector(:has(+ *)) {
  .eq-section .alert-box + figure[aria-label="家財の地震保険・支払区分"] {
    margin-top: -1.6rem; /* = 2.4rem（既定） − 0.8rem（目標） */
  }
}

/* スマホ時（～600px）：<col> の幅を上書き（インラインstyleに勝つため !important） */
@media (max-width: 600px) {
  /* 1列目：割引種類  2列目：適用条件  3列目：確認資料 */
  .discount-table col:nth-child(1) { width: 30% !important; }
  .discount-table col:nth-child(2) { width: 30% !important; }
  .discount-table col:nth-child(3) { width: 40% !important; }
}

/* PC幅（601px～）：必要ならデスクトップ時も明示上書き可
   既存の 25/35/40 を踏襲（HTMLのインラインを優先にするならこの塊は不要） */
@media (min-width: 601px) {
  .discount-table col:nth-child(1) { width: 15% !important; }
  .discount-table col:nth-child(2) { width: 20% !important; }
  .discount-table col:nth-child(3) { width: 65% !important; }
}