/* ===========================================================================
   下層ページ（company / policy）— 2026-08-27 追加
   ---------------------------------------------------------------------------
   LP本体（index.html / index-b.html）はこのファイルを読み込まない。
   逆に下層ページは tokens/base/components/sections/sp をすべて読み込むので、
   **ヘッダー・フッター・CTAボタン・器(.is-in) は LP の実装をそのまま共有する。**
   ここに書くのは「下層ページにしか無いもの」だけ。

   【レイアウト方針】AGENTS.md「器で組む（service-site方式 / D20）」に従う。
     - 拡縮しない（zoom / transform: scale は PC帯で使わない）
     - 幅は `min(<設計幅>, 100% - --gutter * 2)`。広い帯では原寸、狭い帯では器が縮む
     - SP帯（767px以下）は sp.css の body.zoom で 375px 設計が比例拡縮される。
       よってこのファイルの SP 値は **375px 幅を基準にした CSS px** で書く

   【色】生の hex は書かない（check-css が NG にする）。tokens.css の変数だけを使う。
   =========================================================================== */

/* ヘッダーのロゴは、この2ページだけリンクになる（LP ではロゴが現在地なのでリンクにしない）。
   `a` は inline なので、sections.css の `header .logo` が持つ width/height を
   効かせるために display を与える。**サイズと位置は sections.css / sp.css のまま。** */
header a.logo {
  display: block;
  text-decoration: none;
}

/* =========================================================
 * 見出し帯 — ページ名を出す淡い青の帯
 * LP の #lead と同じ --bg-tint を使い、下罫線もヘッダーと同じ --c-border で揃える
 * ========================================================= */
.page-head {
  background: var(--bg-tint);
  border-bottom: 1px solid var(--c-border);
  padding: 64px 0 56px;
}

.page-head__en {
  font-family: var(--ff-sans);
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  line-height: 1.4;
  letter-spacing: 2.4px;
  color: var(--c-brand);
}

.page-head__title {
  margin-top: 12px;
  font-family: var(--ff-serif);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-40);
  line-height: 1.4;
  letter-spacing: 1.6px;
  color: var(--c-ink);
}

/* =========================================================
 * 本文の器
 * LP の .is-in は 1200px だが、下層ページは読み物なので 900px で受ける。
 * **器の式は .is-in と同型**（広い帯では 900px 原寸、狭い帯では --gutter を残して縮む）。
 * ========================================================= */
.page-body {
  padding: 72px 0 96px;
}

.page-body .is-in {
  width: min(900px, 100% - var(--gutter) * 2);
}

/* =========================================================
 * 運営会社（company）
 * ========================================================= */
.company-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--ff-sans);
  font-size: var(--fs-16);
  line-height: 1.9;
}

.company-table tr {
  border-bottom: 1px solid var(--c-border);
}

.company-table tr:first-child {
  border-top: 1px solid var(--c-border);
}

.company-table th,
.company-table td {
  padding: 24px;
  text-align: left;
  vertical-align: top;
}

.company-table th {
  width: 220px;
  background: var(--bg-subtle);
  font-weight: var(--fw-medium);
  color: var(--c-ink);
  white-space: nowrap;
}

.company-table td {
  color: var(--c-ink-2);
}

/* =========================================================
 * 個人情報保護方針（policy）
 * ========================================================= */
.policy-subtitle {
  position: relative;
  padding-bottom: 14px;
  font-family: var(--ff-serif);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-22);
  line-height: 1.6;
  color: var(--c-ink);
}

/* 見出し下のブランド色の短い線。LP の section4__line と同じ考え方 */
.policy-subtitle::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 64px;
  height: 2px;
  background: var(--c-brand);
}

.policy-lead {
  margin-top: 28px;
  font-family: var(--ff-sans);
  font-size: var(--fs-16);
  line-height: 2;
  color: var(--c-ink-2);
}

/* base.css が `ol { list-style: none }` にしているので、番号は counter で作る */
.policy-list {
  margin-top: 28px;
  counter-reset: policy;
}

.policy-list li {
  position: relative;
  counter-increment: policy;
  margin-top: 16px;
  padding-left: 40px;
  font-family: var(--ff-sans);
  font-size: var(--fs-16);
  line-height: 2;
  color: var(--c-ink-2);
}

.policy-list li::before {
  content: counter(policy);
  position: absolute;
  left: 0;
  top: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--c-brand);
  color: var(--c-on-dark);
  font-family: var(--ff-sans);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  line-height: 1;
}

.policy-dates {
  margin-top: 36px;
  font-size: var(--fs-14);
  line-height: 2;
  color: var(--c-muted);
}

.policy-contact {
  margin-top: 36px;
  padding: 28px 32px;
  background: var(--bg-subtle);
  border-left: 3px solid var(--c-brand);
  font-size: var(--fs-14);
  line-height: 2;
  color: var(--c-ink-2);
}

.policy-contact__title {
  font-weight: var(--fw-medium);
  color: var(--c-ink);
}

.policy-contact a {
  color: var(--c-brand);
}

/* =========================================================
 * トップへ戻る導線
 * ========================================================= */
.page-back {
  margin-top: 56px;
  text-align: center;
  font-size: var(--fs-14);
}

.page-back a {
  display: inline-block;
  padding-bottom: 2px;
  border-bottom: 1px solid currentColor;
  color: var(--c-brand);
  text-decoration: none;
}

.page-back a:hover {
  opacity: 0.7;
}

/* ===========================================================================
   SP帯（767px以下）
   sp.css の body { width: 375px; zoom: ... } が効いた状態で解釈されるので、
   ここの px は **375px 幅を基準にした CSS px**。
   =========================================================================== */
@media (max-width: 767px) {
  .page-head {
    padding: 32px 0 28px;
  }

  .page-head__en {
    font-size: var(--fs-11);
    letter-spacing: 1.6px;
  }

  .page-head__title {
    margin-top: 8px;
    font-size: var(--fs-22);
    letter-spacing: 0.8px;
  }

  .page-body {
    padding: 32px 0 48px;
  }

  /* 表は2列だと窮屈なので、SP では見出しと内容を縦積みにする */
  .company-table,
  .company-table tbody,
  .company-table tr,
  .company-table th,
  .company-table td {
    display: block;
    width: auto;
  }

  .company-table {
    font-size: var(--fs-13);
    line-height: 1.8;
  }

  .company-table th,
  .company-table td {
    padding: 10px 12px;
    white-space: normal;
  }

  .company-table td {
    padding-top: 8px;
    padding-bottom: 14px;
  }

  .policy-subtitle {
    font-size: var(--fs-16);
    padding-bottom: 10px;
  }

  .policy-subtitle::after {
    width: 48px;
  }

  .policy-lead,
  .policy-list li {
    font-size: var(--fs-13);
    line-height: 1.9;
  }

  .policy-lead {
    margin-top: 20px;
  }

  .policy-list {
    margin-top: 20px;
  }

  .policy-list li {
    margin-top: 12px;
    padding-left: 28px;
  }

  .policy-list li::before {
    top: 3px;
    width: 18px;
    height: 18px;
    font-size: var(--fs-10);
  }

  .policy-dates {
    margin-top: 24px;
    font-size: var(--fs-12);
  }

  .policy-contact {
    margin-top: 24px;
    padding: 18px 16px;
    font-size: var(--fs-12);
  }

  .page-back {
    margin-top: 32px;
    font-size: var(--fs-12);
  }
}