/* =========================================================
   sections/terms.css — 利用規約ページ本文（privacy.css と同一体裁）
   【C-2：2層構造／外側=全幅白背景・内側=読みやすい幅で中央寄せ】
   - ヘッダー/フッターは header.css / footer.css を再利用（本ファイルでは定義しない）。
   - 法務ページのため読みやすさ優先：左揃え・広め行間・段落間/条間に余白。
   - 色・サイズは既存トークン（--color-text / --fs-* / --space-*）参照。生px禁止・BEM。
   ========================================================= */

/* ---- 外側：全幅の白背景 ---- */
.terms {
  background: var(--color-white);
  padding-block: var(--space-72);       /* 上下 72px */
}

/* ---- 内側：読みやすい幅で中央寄せ ---- */
.terms__inner {
  width: 100%;
  max-width: var(--container-read);     /* 880px（本文の行長） */
  margin-inline: auto;
  padding-inline: var(--space-24);      /* 左右ガター */
  color: var(--color-text);
}

/* ページ見出し */
.terms__title {
  margin: 0 0 var(--space-40);
  font-weight: 700;
  font-size: var(--fs-xl);              /* 42px */
  line-height: 1.4;
  text-align: center;
}

/* リード文 */
.terms__lead {
  margin: 0 0 var(--space-48);
  font-weight: 400;
  font-size: var(--fs-sm);              /* 16px */
  line-height: 1.8;
}

/* 各条ブロック */
.terms__section + .terms__section { margin-top: var(--space-40); }

/* 条見出し（本文より大きめ・太字） */
.terms__heading {
  margin: 0 0 var(--space-16);
  font-weight: 700;
  font-size: var(--fs-base);            /* 24px */
  line-height: 1.5;
}

/* 本文段落 */
.terms__text {
  margin: 0;
  font-weight: 400;
  font-size: var(--fs-sm);              /* 16px */
  line-height: 1.8;
}
.terms__text + .terms__text { margin-top: var(--space-16); }

/* 番号付き項目リスト（（1）（2）/ ①② など。採番はテキスト側に持たせる） */
.terms__list {
  margin: var(--space-16) 0 0;
  padding-left: var(--space-24);
  list-style: none;
}
.terms__list-item {
  font-weight: 400;
  font-size: var(--fs-sm);              /* 16px */
  line-height: 1.8;
}
.terms__list-item + .terms__list-item { margin-top: var(--space-8); }

/* 問い合わせ先等のブロック */
.terms__contact {
  margin-top: var(--space-16);
  font-weight: 400;
  font-size: var(--fs-sm);              /* 16px */
  line-height: 1.9;
}

/* トップに戻るボタン（privacy/terms 共通・LPのCTAと同系の黄ピル）
   ※同一定義を privacy.css にも置く（各ページのCSSが独立読み込みのため） */
.page-top-link {
  display: block;
  width: max-content;
  max-width: 100%;
  margin: var(--space-64) auto 0;       /* 本文から離して中央寄せ */
  padding: var(--space-16) var(--space-48);
  border-radius: var(--space-48);       /* ピル型 */
  background: var(--color-primary);     /* #FCCB0C 黄 */
  box-shadow: var(--shadow-btn);
  font-weight: 700;
  font-size: var(--fs-sm);              /* 16px */
  line-height: 1;
  text-align: center;
  color: var(--color-text);             /* 黒文字 */
  text-decoration: none;
}

/* =========================================================
   レスポンシブ
   ※ @media は var() 不可のため px 直書き＋トークン名をコメント併記。
   ========================================================= */

/* ---- SP（≤767＝--bp-sp 未満）：画面端ガター＋見出し1段下げ ---- */
@media (max-width: 767px) {
  .terms__inner { padding-inline: var(--container-pad); } /* 画面端ガター16px */
  .terms__title   { font-size: var(--fs-lg); }   /* 42→32 */
  .terms__heading { font-size: var(--fs-base); } /* 据え置き（24） */
}