@charset "UTF-8";
/* =============================================================================
   Privacy Policy — Page-specific CSS（F-12 / `/privacy-policy/` 以外には配信しない）
   -----------------------------------------------------------------------------
   設計順序（CLAUDE.md §11）:
     Global Design Token（rebuild.css :root）
       → Global Component（.l-inner / .sec-eyebrow / .sec-title / .screen-reader-text）
         → Page-specific（本ファイル / prefix `pp-`）
   前提:
     - `rebuild.css` の後に読み込む（deps: wp-diversity-rebuild）
     - `.page-id-*` セレクタを作らない
     - `!important` を使わない
     - gradient / box-shadow / KPI / emoji / 過度な radius / 装飾 CTA を使わない
   温度:
     法務文書。**サイト内でもっとも静かなページ**として設計する。
     面（背景色）は使わず、区切りは罫線のみ。読みやすさを最優先する。
   ========================================================================== */

/* -----------------------------------------------------------------------------
   Section Rhythm（Page-specific）
   -----------------------------------------------------------------------------
   `.section` を Global セレクタにしない。`class="section"` は他ページでも使われて
   おり、素の `.section` を Global 化すると Regression になる。
   company.css / products-list.css / curble-chair.css / records.css / contact.css
   と同一の役割。
   長文ページのため、セクション間の余白は他ページより詰める。
   -------------------------------------------------------------------------- */
.page-privacy .section {
  padding: clamp(36px, 4vw, 60px) var(--sp-gutter);
}

.page-privacy .section-rule {
  max-width: var(--w-page);
  margin-inline: auto;
  height: 1px;
  background: var(--c-line);
}

/* 節と節のあいだに細い区切りを置く（面ではなく線で分ける） */
.page-privacy .section + .section > .l-inner {
  border-top: 1px solid var(--c-line);
  padding-top: clamp(28px, 3vw, 44px);
}

/* -----------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.page-privacy .pp-hero {
  padding: clamp(40px, 5.2vw, 80px) var(--sp-gutter) clamp(28px, 3.2vw, 48px);
}

.pp-hero__title {
  margin: 0 0 var(--sp-md);
  font-family: var(--f-serif);
  font-weight: 600;
  font-size: var(--fs-h1);
  line-height: var(--lh-head);
  letter-spacing: .06em;
  color: var(--c-text-strong);
}

.pp-hero__lead {
  max-width: var(--w-measure);
  margin: 0;
  font-size: var(--fs-body);
  line-height: 2;
  color: var(--c-text-2);
}

/* -----------------------------------------------------------------------------
   Section heading / 本文
   長文の可読性を最優先する。measure を絞り、行間を広めに取る。
   -------------------------------------------------------------------------- */
.pp-sec__title {
  max-width: var(--w-measure);
  margin: 0 0 var(--sp-md);
  font-size: clamp(18px, 1.6vw, 22px);
  letter-spacing: .04em;
}

.pp-text {
  max-width: var(--w-measure);
  margin: 0 0 1.2em;
  font-size: var(--fs-body);
  line-height: 2;
  color: var(--c-text);
}

.pp-text:last-child {
  margin-bottom: 0;
}

.pp-list {
  max-width: var(--w-measure);
  margin: 0 0 1.2em;
  padding-left: 1.6em;
  font-size: var(--fs-body);
  line-height: 2;
  color: var(--c-text);
}

.pp-list li {
  list-style: decimal;
  margin-bottom: .4em;
}

.pp-list li:last-child {
  margin-bottom: 0;
}

/* -----------------------------------------------------------------------------
   Table（Cookie 一覧 / 外部サービス一覧）
   -----------------------------------------------------------------------------
   5 列のデータ表。records.css の `.rec-table__scroll` と同型で、
   **ページ本体を横スクロールさせず、表だけをスクロールコンテナに閉じ込める。**
   -------------------------------------------------------------------------- */
.pp-table__scroll {
  max-width: 100%;
  margin: 0 0 1.2em;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--c-line);
}

.pp-table__scroll:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 2px;
}

.pp-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: var(--fs-body-s);
  line-height: 1.8;
}

.pp-table th,
.pp-table td {
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--c-line);
  overflow-wrap: anywhere;
}

.pp-table thead th {
  font-weight: 600;
  color: var(--c-text-strong);
  background: var(--c-bg-sub);
  white-space: nowrap;
}

.pp-table tbody th {
  font-weight: 500;
  color: var(--c-text-strong);
  font-family: var(--f-mono);
  font-size: 12.5px;
}

.pp-table tbody td {
  color: var(--c-text-2);
}

.pp-table tbody tr:last-child th,
.pp-table tbody tr:last-child td {
  border-bottom: 0;
}

/* -----------------------------------------------------------------------------
   お問い合わせ窓口
   -------------------------------------------------------------------------- */
.pp-contact__list {
  max-width: var(--w-measure);
  margin: 0 0 1.2em;
  font-size: var(--fs-body);
  line-height: 1.9;
}

.pp-contact__list dt {
  margin-top: .8em;
  font-size: var(--fs-meta);
  letter-spacing: .08em;
  color: var(--c-text-faint);
}

.pp-contact__list dt:first-child {
  margin-top: 0;
}

.pp-contact__list dd {
  margin: 2px 0 0;
  color: var(--c-text);
  overflow-wrap: anywhere;
}

.pp-contact__mail a {
  display: inline-block;
  min-height: var(--tap);
  font-family: var(--f-mono);
  color: var(--c-primary);
  text-decoration: none;
  border-bottom: 1px solid var(--c-link-underline-strong);
  overflow-wrap: anywhere;
}

.pp-contact__mail a:visited {
  color: var(--c-primary);
  border-bottom-color: var(--c-link-underline-strong);
}

.pp-contact__mail a:hover,
.pp-contact__mail a:active {
  color: var(--c-primary-dark);
  border-bottom-color: currentColor;
}

.pp-contact__mail a:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 3px;
  color: var(--c-primary-dark);
}

.pp-dates {
  max-width: var(--w-measure);
  margin: var(--sp-lg) 0 0;
  padding-top: var(--sp-sm);
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-body-s);
  line-height: 1.9;
  color: var(--c-text-muted);
}

/* -----------------------------------------------------------------------------
   Responsive
   token の clamp() を優先し、media query は最小限にとどめる。
   -------------------------------------------------------------------------- */
@media screen and (max-width: 480px) {
  /* 320px でも表以外が横に溢れないよう、本文の measure を viewport に従わせる */
  .pp-text,
  .pp-list,
  .pp-hero__lead,
  .pp-sec__title,
  .pp-contact__list,
  .pp-dates {
    max-width: 100%;
  }

  .pp-table {
    min-width: 560px;
  }
}

/* -----------------------------------------------------------------------------
   Print（法務文書のため、印刷して読むケースを想定する）
   -------------------------------------------------------------------------- */
@media print {
  .page-privacy .section {
    padding: 12pt 0;
    break-inside: avoid;
  }

  .page-privacy .section + .section > .l-inner {
    border-top: 0;
    padding-top: 0;
  }

  .pp-text,
  .pp-list,
  .pp-hero__lead,
  .pp-contact__list {
    max-width: none;
    line-height: 1.7;
  }

  /* 表はスクロールできないため、印刷時は全幅で折り返す */
  .pp-table__scroll {
    overflow-x: visible;
  }

  .pp-table {
    min-width: 0;
    font-size: 9pt;
  }

  .pp-table thead th {
    background: transparent;
  }
}