/* ===================================================================
   chuijikou.css — 注意事項ページ（#caution）専用スタイル
   スクロール機能を全面撤去（JS/UIとも）
   - 外側 notice-table：横スクロール無し（PC=2列、SP=カード化）
   - 内側 payment-table：横スクロール無し（折返し表示）
   - ページ内スムーズスクロール無効化（このページのみ）
   =================================================================== */

/* このページではスムーズスクロールを無効化（common.css 上書き） */
html { scroll-behavior: auto !important; }

/* 余計なスクロールUIの痕跡が残っても無効化（保険） */
#caution .table-scroll-wrapper,
#caution .table-scroll-main,
#caution .table-scroll-bottom { display: contents !important; }

/* -----------------------------
   0) ページローカルトークン
----------------------------- */
#caution {
  --cj-brand:     var(--brand, #117713);
  --cj-brand-ink: var(--brand-strong, #0c5d0f);
  --cj-danger:    var(--danger, #c50f0f);
  --cj-border:    var(--border, #e0e0e0);
  --cj-card-bg:   #fff;
  --cj-sec-bg:    var(--clr-bg-section, #fff);
  --cj-shadow:    0 2px 12px rgba(0,0,0,.06);

  --cj-fs-base:  clamp(1.6rem, 1.5rem + 0.3vw, 1.8rem);
  --cj-fs-title: clamp(2.0rem, 1.6rem + 1.2vw, 2.6rem);

  --cj-radius: .6rem;
  --cj-gap-y:  1rem;
}

/* -----------------------------
   1) セクション土台／見出し
----------------------------- */
#caution.notice { background: var(--cj-sec-bg); padding: 2rem 0; margin-block-start: 0; }
#caution .container { margin-inline: auto; margin-block-end: 1rem; }

#caution .notice-heading { display: flex; align-items: center; gap: 1rem; margin: 0 0 2rem; }
#caution .notice-heading img { display: none; }
#caution .notice-heading h2 {
  font: 700 var(--cj-fs-title)/1.25 "Noto Sans JP","Roboto","Meiryo",sans-serif;
  margin: 0; padding-left: 1rem; border-left: 8px solid var(--cj-brand); color: #000; white-space: normal;
}

/* -----------------------------
   2) 外側：注意事項テーブル（PC基準）
----------------------------- */
.notice-table {
  width: 100%;
  border-collapse: separate; border-spacing: 0;
  background: var(--cj-card-bg);
  border: 1px solid #cfe1d9; border-radius: var(--cj-radius);
  font-size: var(--cj-fs-base); line-height: 1.6;
  box-shadow: var(--cj-shadow);
  overflow: clip; /* 角丸に合わせる */
}

/* 列幅（PC：左は固定気味、右は自動） */
.notice-table col.col-key  { width: clamp(180px, 22vw, 240px); }
.notice-table col.col-body { width: auto; }

/* ヘッダ */
.notice-table thead th {
  background: var(--cj-brand); color: #fff; font-weight: 700; text-align: left;
  padding: 1rem 1rem; border-bottom: 1px solid var(--cj-border); white-space: normal;
}
.notice-table thead th:first-child { border-top-left-radius: var(--cj-radius); }
.notice-table thead th:last-child  { border-top-right-radius: var(--cj-radius); }

/* セル共通 */
.notice-table th,
.notice-table td {
  border-bottom: 1px solid #cfe1d9; border-right: 1px solid #cfe1d9;
  padding: 1rem; vertical-align: top; white-space: normal; word-break: break-word;
}

/* 左列（項目）：固定表示や sticky は使わない（スクロール機能撤去の方針） */
.notice-table th[scope="row"] {
  background: #eef7ee; font-weight: 700;
}

/* 右列は常に白（交互色なし） */
.notice-table tbody td { background: #fff; }

/* テキスト余白 */
.notice-table .cell-body p { margin: 0 0 var(--cj-gap-y); white-space: normal; }
.notice-table .cell-body p:last-child { margin-bottom: 0; }

/* 角丸 */
.notice-table tbody tr:last-child th[scope="row"] { border-bottom-left-radius: var(--cj-radius); }
.notice-table tbody tr:last-child td:last-child    { border-bottom-right-radius: var(--cj-radius); }

/* 中間帯：左列の詰まりすぎを緩和 */
@media (max-width: 900px) and (min-width: 601px) {
  .notice-table col.col-key { width: clamp(150px, 30vw, 220px); }
}

/* -----------------------------
   3) スマホ（≤600px）：縦カード化
----------------------------- */
@media (max-width: 600px) {
  .notice-table { display: block; border: 0; box-shadow: none; background: transparent; overflow: visible; }
  .notice-table > thead { display: none; }
  .notice-table > tbody { display: grid; gap: 12px; margin: 0; padding: 0; }

  .notice-table > tbody > tr {
    display: block; width: 100%; max-width: 100%; box-sizing: border-box;
    background: #fff; border: 1px solid #cfead3; border-left: 6px solid var(--cj-brand);
    border-radius: var(--cj-radius); box-shadow: var(--cj-shadow); padding: .8rem 1rem 1rem;
  }
  .notice-table > tbody > tr > th[scope="row"] {
    display: block; margin: 0 0 .6rem; padding: .6rem .9rem;
    border: 0; border-radius: .45rem;
    background: linear-gradient(95deg, var(--cj-brand-ink), var(--cj-brand));
    color: #fff; font-weight: 700;
  }
  .notice-table > tbody > tr > td { display: block; padding: 0; max-width: 100%; overflow-wrap: anywhere; }
}

/* -----------------------------
   4) 内側：払込方法テーブル（折返しで必ず収める）
----------------------------- */
.payment-table {
  width: 100%;
  table-layout: fixed;           /* 列幅を自動配分しつつ折返し */
  border-collapse: separate; border-spacing: 0;
  background: #fff; border: 1px solid #dfe5ec; border-radius: .8rem;
  overflow: clip;
  font-size: var(--cj-fs-base); line-height: 1.35;
}

.payment-table thead th {
  background: #e9f2ff; color: #000; font-weight: 700; text-align: center;
  padding: .9rem .9rem; border-bottom: 1px solid #dfe5ec; white-space: normal; word-break: break-word;
}
.payment-table thead tr + tr th { background: #f4f8ff; }

.payment-table th,
.payment-table td {
  border-right: 1px solid #e5eaf0; border-bottom: 1px solid #e5eaf0;
  padding: 1rem .9rem; vertical-align: middle; white-space: normal; word-break: break-word;
}

.payment-table .row-head {
  background: #f7f9fc; font-weight: 700; text-align: left;
}

.payment-table td.yes { color: var(--cj-brand-ink); font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.payment-table td.no  { color: var(--cj-danger);    font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }

/* 角と罫線の体裁 */
.payment-table thead th:first-child { border-top-left-radius: .8rem; }
.payment-table thead th:last-child  { border-top-right-radius: .8rem; }
.payment-table tbody tr:last-child td:last-child { border-bottom-right-radius: .8rem; }
.payment-table tbody tr:last-child .row-head     { border-bottom-left-radius: .8rem; }

/* スマホ微調整（詰め気味） */
@media (max-width: 600px) {
  .payment-table { font-size: 1.6rem; }
  .payment-table th,
  .payment-table td { padding: .7rem .6rem; }
}

/* -----------------------------
   5) 注意書き／アクセント
----------------------------- */
#caution .attention { color: var(--cj-danger); font-weight: 700; }
#caution .note {
  font-size: var(--fs-small, 1.4rem); color: #383838; line-height: 1.4; white-space: normal;
  margin: .6rem 0 0; padding: .6rem .8rem; background: #fffaf0; border-left: 5px solid #f3c742;
}

/* -----------------------------
   6) その他・安全対策
----------------------------- */


/* フォーカス可視化（共通トークンが無い場合の保険） */
#caution a:focus-visible,
#caution th:focus-visible,
#caution td:focus-visible {
  outline: var(--focus-ring, 3px solid rgba(0, 117, 201, .6)); outline-offset: 2px; border-radius: .2rem;
}

/* 印刷 */
@media print {
  .notice-table th, .notice-table td,
  .payment-table th, .payment-table td { border-color: #666; }
}
/* 注意事項テーブル：thead 見出し（「項目」「内容」）を中央寄せ */
#caution .notice-table thead th {
  text-align: center;
  vertical-align: middle;
}

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