/* ============================================================
   当サイトのご利用について (terms.html) — screen-specific styles
   共通トークン・共通コンポーネント(service-nav/header/footer/
   page-heading/breadcrumb/cta/btn/section-heading)は css/style.css を参照。
   ============================================================ */

/* breadcrumb--bottom はSP(768px以下)のみ表示。デスクトップでは非表示
   （breadcrumb自体のクラス・構造は共通のまま、掲載位置だけをHTML側で複製）。 */
.breadcrumb--bottom { display: none; }

.terms { background: #fff; padding: 100px 0; }
.terms__container {
  width: 1000px;
  max-width: 100%;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
}

.terms__block {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 25px;
}

.terms__lead {
  width: 100%;
  font-size: 16px;
  line-height: 2;
  font-weight: 400;
  color: var(--text-primary);
}

/* ===== Table ===== */
.terms__table-col--wide { width: 293px; }
.terms__table-wrap { width: 100%; overflow-x: auto; }
.terms__table {
  min-width: 100%;
  border-collapse: collapse;
  table-layout: auto;
}
.terms__table th,
.terms__table td {
  border: 1px solid var(--border-default);
  padding: 20px 15px;
  text-align: left;
  vertical-align: middle;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-primary);
}
.terms__table th {
  background: var(--bg-primary);
  font-weight: 700;
  white-space: nowrap;
}
.terms__table td {
  background: #fff;
  font-weight: 400;
  vertical-align: top;
  text-align: justify;
}
.terms__table-link {
  color: var(--primary-main);
  text-decoration: underline;
}

@media (max-width: 1040px) {
  .terms__container { width: 100%; padding-inline: 24px; }
  .terms__table-col--wide { width: auto; }
}

/* ============================================================
   SP layout (max-width: 768px)
   Figma node 929:25151（当サイトのご利用について, SP 375幅）に基づく。
   ============================================================ */
@media (max-width: 768px) {

  body { display: flex; flex-direction: column; }
  .breadcrumb { order: 1; }
  .cta { order: 2; }
  .footer { order: 3; }

  .terms { padding: 64px 0; }

  /* section-heading(1)→terms__block の間隔を60px(共通gap)から40pxへ、
     terms__block→section-heading(2) の間隔を60pxから100pxへ調整
     （Figma実測: Frame77内gap=40px, ブロック間gap=100px）。
     HTML構造・共通クラスは変えず、隣接セレクタ+margin補正のみで実現。 */
  .terms__block { margin-top: -20px; }
  .terms__block + .section-heading { margin-top: 40px; }

  /* 「利用者情報の外部送信について」はFigmaでは1行だが、ブラウザのCJKフォント
     計測がFigmaよりわずかに広いため2行に折り返ってしまう。字間を詰めて1行に収める
     （index-sp.md記載のmv__titleと同種の対応。共通style.cssは変更せず、
     このページの1つ目の見出しにのみ terms.css 内で適用。2つ目の見出し
     「クッキー（Cookie）の使用について」はFigmaでも2行折返しのため対象外）。 */
  
  .terms__container { padding-inline: clamp(16px, 3.4vw, 24px); }

  /* ---- Table: 横スクロールカード化はせず、列固定幅+横スクロールで対応
     （Figmaでも列ヘッダー+値2行を横に並べた表がそのままオーバーフローする構成） ---- */
  .terms__table-wrap { -webkit-overflow-scrolling: touch; }
  .terms__table { table-layout: fixed; width: 827px; }
  .terms__table col:nth-child(1) { width: 150px; }
  .terms__table col:nth-child(2) { width: 150px; }
  .terms__table col:nth-child(3) { width: 197px; }
  .terms__table col:nth-child(4) { width: 150px; }
  .terms__table col:nth-child(5) { width: 180px; }
  .terms__table th,
  .terms__table td {
    padding: 20px 15px;
    border-color: var(--bg-tertiary);
  }
  .terms__table td { font-size: 15px; line-height: 1.5; }

  /* ---- Breadcrumb: 本文直後・CTA直前へ相対移動（Figma SP実測配置） ---- */
  .breadcrumb--top { display: none; }
  .breadcrumb--bottom { display: flex; }
}