/* ==========================================================================
   プライバシーポリシー（pages/privacy-policy.html）
   Figma PC 537:18476 / SP 621:6104
   SP を基準に書き、@media (min-width: 1025px) で PC に切り替える
   400〜1024px は SP のレイアウトのまま、中身を最大 640px で中央寄せにしている（幅は Figma に指定なし）

   目次
    1. hero            .p-privacy__hero / __tag / __title
    2. policy-content  .p-privacy__content / __card / __meta / __category / __updated
    3. 本文            .p-privacy__body（中は素のタグだけ。子孫セレクタで当てる）/ __num
   ========================================================================== */

.p-privacy {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border-default); /* フッターとの間の線（PC 537:18512 / SP 621:6166） */
}

/* ==========================================================================
   1. hero（PC 537:18482 の上部 / SP 621:6135）
   ========================================================================== */
.p-privacy__hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-24) var(--space-20);
  border-bottom: 1px solid var(--color-border-default); /* SPだけの線（621:6137） */
}

/* 英字のタグ。Figmaの文字は小文字で、表示だけ大文字 */
.p-privacy__tag {
  padding: 3px 11px; /* Figmaは 4px 12px で枠線が内側。枠線1pxぶん引いて外寸（高さ25px）を合わせる */
  border: 1px solid var(--color-text-primary);
  border-radius: 20px; /* Figmaの実値 */
  font: 700 12px/1.4 var(--font-en);
  color: var(--color-text-strong);
  text-transform: uppercase;
  white-space: nowrap;
}

.p-privacy__title {
  font: 700 24px/1.4 var(--font-jp); /* 文字/見出し/中 */
  text-align: center;
}

@media (min-width: 1025px) {
  .p-privacy__hero {
    gap: var(--space-16);
    padding: var(--space-64) var(--space-40) var(--space-16);
    border-bottom: 0;
  }

  .p-privacy__title {
    font-size: 40px; /* Figmaの実値（文字スタイルの 32px ではない） */
  }
}

/* ==========================================================================
   2. policy-content（PC 537:18484 / SP 621:6138）
   SP は枠なしで全幅、PC は幅1000pxの枠つきカード
   ========================================================================== */
.p-privacy__content {
  padding: var(--space-24) var(--space-20) var(--space-48);
}

.p-privacy__card {
  max-width: 640px; /* SP〜タブレットの最大幅。Figmaに指定なし */
  margin-inline: auto;
}

/* 区分のタグと最終更新日 */
.p-privacy__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  margin-bottom: var(--space-32);
}

.p-privacy__category {
  padding: var(--space-4) 10px; /* Figmaの実値 */
  border-radius: 4px; /* Figmaの実値 */
  background: var(--color-background-base);
  font: 400 12px/1.6 var(--font-jp); /* 文字/本文/小 */
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.p-privacy__updated {
  font: 400 12px/1.6 var(--font-jp); /* 文字/本文/小 */
  color: var(--color-text-secondary);
  white-space: nowrap;
}

@media (min-width: 1025px) {
  .p-privacy__content {
    padding: 0 var(--space-40) var(--space-64);
  }

  .p-privacy__card {
    max-width: 1000px; /* Figmaの実値 */
    padding: var(--space-64) clamp(var(--space-40), 8.33vw, var(--space-120)) var(--space-96); /* 1440pxで左右120px。狭い画面では縮める */
    border: 1px solid var(--color-border-default);
    border-radius: 8px; /* Figmaの実値 */
    background: var(--color-white);
  }

  .p-privacy__meta {
    margin-bottom: var(--space-40);
  }

  .p-privacy__category {
    padding: 6px var(--space-12); /* Figmaの実値 */
  }

  .p-privacy__updated {
    font: 500 14px/1.6 var(--font-jp); /* 文字/本文/標準 */
  }
}

/* ==========================================================================
   3. 本文（.p-privacy__body）
   中の要素にクラスは付けない（条の番号の .p-privacy__num だけ）。h2・h3・p・ul・ol・hr・a・table だけで書けば同じ見た目になる
   余白の決まり（Figmaの並びをそのまま規則にしたもの）
   - 条の見出し h2 の上：SP 32px／PC 40px、下：SP 12px／PC 16px
   - 段落どうし、リストの後、項の見出し h3 の上：1行分（1.6em）あける
   - h3 の直後、段落の直後のリスト：あけない
   ========================================================================== */
.p-privacy__body {
  font: 500 14px/1.6 var(--font-jp); /* 文字/本文/標準 */
  color: var(--color-text-secondary);
}

.p-privacy__body > * {
  margin-block: 0;
}

.p-privacy__body > * + * {
  margin-top: 1.6em; /* 1行分 */
}

.p-privacy__body hr {
  margin-block: var(--space-32);
}

/* 条の見出し（1. 利用者情報 など） */
.p-privacy__body h2 {
  margin-top: var(--space-32);
  font: 700 16px/1.6 var(--font-jp); /* 文字/本文/大・強調 */
  color: var(--color-text-primary);
}

.p-privacy__body hr + h2,
.p-privacy__body > h2:first-child {
  margin-top: 0;
}

.p-privacy__body h2 + * {
  margin-top: var(--space-12);
}

/* 項の見出し（（1）お客様からご提供いただく情報 など）。Figmaでは本文と同じ文字 */
.p-privacy__body h3 {
  font: inherit;
  color: inherit;
}

.p-privacy__body h3 + *,
.p-privacy__body p + ul,
.p-privacy__body p + ol {
  margin-top: 0;
}

/* リスト。行頭の「・」や番号は本文の文字として入れる（CSSでは付けない） */
.p-privacy__body ul,
.p-privacy__body ol {
  padding: 0;
  list-style: none;
}

/* 条の番号（1.〜13.）だけブランド色にする。Figmaに無い指定（#32。xNEXT側で決定） */
.p-privacy__num {
  color: var(--color-primary);
}

/* 表（取得する情報・委託先・外部送信先）。Figmaに無いので #32 の指定に合わせた
   SPで3列でもはみ出さないよう、英字の長い語も折り返す */
.p-privacy__body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.p-privacy__body th,
.p-privacy__body td {
  padding: 8px 10px;
  border: 1px solid var(--color-border-default);
  text-align: left;
  vertical-align: top;
}

.p-privacy__body th {
  background: var(--color-background-base);
  font-weight: 700;
  color: var(--color-text-primary);
}

/* 本文中のリンク（Figmaにリンクの見た目の指定は無い。下線だけ付けている） */
.p-privacy__body a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.p-privacy__body a:hover {
  text-decoration: none;
}

@media (min-width: 1025px) {
  .p-privacy__body hr {
    margin-block: var(--space-40);
  }

  .p-privacy__body h2 {
    margin-top: var(--space-40);
    font: 700 20px/1.4 var(--font-jp); /* 文字/見出し/小 */
  }

  .p-privacy__body hr + h2,
  .p-privacy__body > h2:first-child {
    margin-top: 0;
  }

  .p-privacy__body h2 + * {
    margin-top: var(--space-16);
  }
}