/* ============================================
   s-notice-02 — 注意書きテーブル（項目名+説明、ストライプ）
   wp:table ブロックに className="s-notice-02" を付与して使用
   ============================================ */
.s-notice-02 {
  --_label-width: 14em;
  --_label-width-sp: 8em;
  container-type: inline-size;
  max-width: var(--width-inner);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

:is(.s-notice-02 *) {
  margin: 0;
}

.s-notice-02 table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-md);
  line-height: var(--line-height-loose);
}

/* --- Row borders --- */
.s-notice-02 tbody tr {
  border-bottom: 1px solid var(--color-border);
}

.s-notice-02 tbody tr:first-child {
  border-top: 1px solid var(--color-border);
}

/* --- Striped rows --- */
.s-notice-02 tbody tr:nth-child(even) {
  background: var(--color-bg-sub);
}

/* --- All cells --- */
.s-notice-02 tbody td {
  padding: var(--space-2-xl) var(--space-3-xl);
  vertical-align: top;
  color: var(--color-text);
}

/* 1列目 = 項目名（ラベル） */
.s-notice-02 tbody td:first-child {
  width: var(--_label-width);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-md);
  color: var(--color-text);
  white-space: nowrap;
  vertical-align: middle;
}

/* 2列目 = 説明（値） */
.s-notice-02 tbody td:last-child {
  font-size: var(--font-size-md);
  color: var(--color-text);
  line-height: var(--line-height-loose);
}

/* --- Danger highlight (重大な副作用等) --- */
.s-notice-02 tbody tr.s-notice-02__row--danger td:first-child {
  color: var(--color-danger);
}

/* figcaption 非表示 */
.s-notice-02 figcaption {
  display: none;
}

/* --- Responsive --- */
@container (max-width: 599px) {
  .s-notice-02 tbody td {
    padding: var(--space-xl) var(--space-2-xl);
    font-size: var(--font-size-sm);
  }

  .s-notice-02 tbody td:first-child {
    width: var(--_label-width-sp);
    font-size: var(--font-size-sm);
    white-space: normal;
    padding-right: var(--space-xl);
  }

  .s-notice-02 tbody td:last-child {
    font-size: var(--font-size-sm);
  }
}