/* ==========================================================================
   規約・方針ページ 共通
   プライバシーポリシー / 特定食材の除去 / 健康経営推進方針 / カスタマーハラスメント方針

   4ページとも中身は違うが、読み方は同じ「read するための文書」。
   見た目もひとつにまとめてあり、各ページは文章のかたまり($policy_blocks)を
   渡すだけでよい(template-parts/policy-body.php)。

   ・書体はゴシックのみ。明朝はブランドの声なので、規約には使わない
   ・色は墨一色。グレーは使わない(サイト全体の方針と同じ)
   ・空きは tokens.css の --rule-* に従う
   ========================================================================== */

.policy {
  /*
   * 本文の下。フッターとの境目なので区切りの4倍。
   * 他ページの .site-footer 側の空きと合わせて、文書の終わりを示す。
   */
  padding-bottom: calc(var(--rule-section) * 2);
}

/*
 * 一行の長さの上限。
 *
 * 本文の幅(1200px前後)いっぱいに流すと1行が長くなりすぎ、
 * 次の行の頭を目が見失う。ページ見出しのリード文と同じ886pxで止める。
 * 中央に置くのは、上のヒーローが中央ぞろえだから。
 */
.policy__body {
  max-width: 886px;
  margin-inline: auto;
}

/* ---------- 章の見出し ---------- */

/*
 * 大見出し。
 * 上は区切りの2倍(48px)、下は共通ルールの「見出し→中身」(24px)。
 * 上を厚くしているのは、前の章の終わりと次の章の始まりを分けるため。
 */
.policy__h2 {
  margin-top: calc(var(--rule-section) * 2);
  margin-bottom: var(--rule-head);
  font: var(--type-h2-san);
  letter-spacing: var(--ls-heading);
  color: var(--color-ink);
}

/* 文書の一番上には、その上に何も無いので空きを付けない */
.policy__body > :first-child {
  margin-top: 0;
}

/* 本文の上の小見出しなのでサブヘッド(ゴシック20px/350)。元は16px/500 */
.policy__h3 {
  margin-top: var(--rule-row);
  margin-bottom: var(--space-sm);
  font: var(--type-subhead);
  letter-spacing: var(--ls-body);
  color: var(--color-ink);
}

.policy__h4 {
  margin-top: var(--space-md);
  margin-bottom: var(--space-xs);
  font: var(--type-h4-san);
  letter-spacing: var(--ls-body);
  color: var(--color-ink);
}

/* ---------- 本文 ---------- */

.policy__p {
  font: var(--type-body);
  letter-spacing: var(--ls-body);
  color: var(--color-ink);
}

/* 段落どうしは、ふつうの1行あけ */
.policy__p + .policy__p {
  margin-top: var(--space-sm);
}

/* ---------- 箇条書き ---------- */

.policy__list,
.policy__num {
  margin-top: var(--space-sm);
  padding-left: 1.5em;
  font: var(--type-body);
  letter-spacing: var(--ls-body);
  color: var(--color-ink);
}

.policy__list {
  list-style: disc;
}

.policy__num {
  list-style: decimal;
}

.policy__list li + li,
.policy__num li + li {
  margin-top: var(--space-xs);
}

/* ---------- 名称と値の組(窓口の連絡先など) ---------- */

.policy__terms {
  display: grid;
  grid-template-columns: 8em minmax(0, 1fr);
  gap: var(--space-xs) var(--space-md);
  margin-top: var(--space-sm);
  font: var(--type-body);
  letter-spacing: var(--ls-body);
  color: var(--color-ink);
}

.policy__terms dt {
  font-weight: 500;
}

.policy__terms dd {
  margin: 0;
}

/* ---------- 用語の言い換え(「コンタミネーションとは」など) ---------- */

/*
 * 本文の流れから少し外れる補足。
 * 色を変えずに、左の罫線と地色だけで「これは注記」と示す。
 */
.policy__note {
  margin-top: var(--space-md);
  padding: var(--space-md);
  border-left: 2px solid var(--color-line);
  background-color: var(--color-grayge);
  font: var(--type-body);
  letter-spacing: var(--ls-body);
  color: var(--color-ink);
}

.policy__note-title {
  font-weight: 500;
}

.policy__note-title + p {
  margin-top: var(--space-2xs);
}

/* ---------- 文末のリンク ---------- */

.policy__foot {
  margin-top: calc(var(--rule-section) * 2);
  text-align: right;
}


/* ---------- スマートフォン ---------- */

@media (max-width: 768px) {
  .policy__terms {
    /* 8emの見出し列が入らないので、名称の下に値を積む */
    grid-template-columns: 1fr;
    gap: var(--space-2xs);
  }

  .policy__terms dd + dt {
    margin-top: var(--space-sm);
  }
}


/* ==========================================================================
   認定マーク(健康経営推進方針ページ)
   ========================================================================== */

.policy-mark {
  padding-top: 0;
  padding-bottom: calc(var(--rule-section) * 2);
}

.policy-mark__inner {
  max-width: 886px;
  margin-inline: auto;
}

/*
 * マークを収める白い面。
 * 支給データが白地なので、地色(生成り)の上に直接置くと
 * 画像の四角い縁が見えてしまう。白を敷いて、その中に置く。
 */
/*
 * 白い面は、マークを包むぶんだけ。
 * 本文の幅いっぱいに広げると、横長の帯そのものが図柄のように見えてしまう。
 * inline-flex にして中身の大きさに合わせ、左端にそろえて置く。
 */
.policy-mark__frame {
  display: flex;
  /* 中身(マーク + 内側の余白)のぶんだけの幅にする */
  width: fit-content;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
  background-color: var(--color-white);
  border: 1px solid var(--color-line);
}

/*
 * マークの大きさは、この数字ひとつで決まる。
 * 縦横比は画像そのものに任せる(height を auto にしてある)ので、
 * 差し替えて形が変わっても歪まない。
 *
 * 幅に「%」を混ぜないこと。
 * 親(.policy-mark__frame)は中身に合わせて幅を決めるので、
 * 子が % を使うと「親の幅は子で決まる / 子の幅は親で決まる」の堂々巡りになる。
 * そのときブラウザは画像の元の幅(1152px)で親の幅を計算してしまい、
 * 白い枠だけが本文いっぱいまで広がる。
 * 狭い画面での縮小は max-width に任せる。
 */
.policy-mark__frame img {
  width: 300px;
  max-width: 100%;
  height: auto;
}

.policy-mark__caption {
  margin-top: var(--space-md);
  font: var(--type-caption);
  letter-spacing: var(--ls-caption);
  color: var(--color-ink);
}

@media (max-width: 768px) {
  .policy-mark__frame {
    padding: var(--space-lg) var(--space-md);
  }
}