/* =============================================================================
   ポリシーページ共通スタイル（特商法 / プライバシーポリシー / 利用規約）

   ・LP本体（styles.css）は読み込まない。
     styles.css は 440px 固定の LP 専用で、@media(min-width:768px) が :root の
     --fs-* を拡大する作りになっている。長文の規約ページに巻き込むと
     「幅は変わらないのに文字だけ大きくなる」ため、必要な変数だけ写して独立させた。
   ・列幅・背景・フォントは LP と同じ見え方に揃える（スマホからの遷移が前提）。
   ========================================================================== */

:root {
  /* ⚠️ このファイルは styles.css から**値を写して**独立している。
     styles.css の :root を変えたら**ここも同じ値に直す**（2026-08-07 の色トンマナ変更で1回踏んだ）。
     LPから遷移してくるページなので、主色がズレると「別サイトに飛んだ」に見える */
  --color-primary: #8a2f4d;
  --color-secondary: #37515d;
  --color-secondary-dark: #2a3e47;

  --color-bg: #ffffff;
  --color-bg-muted: #f7f7f7;

  --color-text: #1a1a1a;
  --color-text-sub: #666666;
  --color-text-muted: #999999;

  --color-border: #e5e5e5;

  --fs-h1: 20px;
  --fs-h2: 16px;
  --fs-body: 14px;
  --fs-sm: 13px;
  --fs-caption: 12px;

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;

  --radius-md: 8px;
  --radius-full: 9999px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: "Noto Sans JP", sans-serif;
  font-size: var(--fs-body);
  line-height: 1.9;
  letter-spacing: 0.02em;
  color: var(--color-text);
  background: var(--color-secondary-dark);  /* 脇はLPと同じブランド色 */
  -webkit-text-size-adjust: 100%;
}

.shell {
  max-width: 440px;
  margin: 0 auto;
  background: var(--color-bg);
  min-height: 100vh;
  box-shadow: 0 10px 40px rgba(0,0,0,.22);
}

/* 戻る導線 ---------------------------------------------------------------- */
/* 最上部：小さいテキストリンク。読み始める前に「戻れる」と分かれば十分なので、
   ボタンにして主張させない（2026-08-06 むた指示） */
.pback {
  display: inline-block;
  margin-bottom: var(--space-lg);
  color: var(--color-text-sub);
  font-size: var(--fs-caption);
  text-decoration: none;
}
.pback:hover { text-decoration: underline; }

/* 最下部：読み終えた人が押す操作なのでボタン。
   フッターの中には入れない（サイト情報の一部に見えて操作として認識されにくいため） */
.pback-area {
  background: var(--color-bg);
  padding: 0 var(--space-lg) var(--space-2xl);
  text-align: center;
}
.pback-btn {
  display: inline-block;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--fs-sm);
  text-decoration: none;
  padding: 12px var(--space-lg);
}

/* 本文 -------------------------------------------------------------------- */
.pdoc {
  padding: var(--space-lg) var(--space-lg) var(--space-2xl);
}

.pdoc h1 {
  font-size: var(--fs-h1);
  line-height: 1.5;
  font-weight: 700;
  padding-bottom: var(--space-md);
  margin-bottom: var(--space-lg);
  border-bottom: 2px solid var(--color-primary);
}

.pdoc h2 {
  font-size: var(--fs-h2);
  line-height: 1.6;
  font-weight: 700;
  margin-top: var(--space-xl);
  margin-bottom: var(--space-sm);
  color: var(--color-primary);
}

.pdoc h3 {
  font-size: var(--fs-body);
  font-weight: 700;
  margin-top: var(--space-lg);
  margin-bottom: var(--space-xs);
}

.pdoc h1 + h2 { margin-top: 0; }

.pdoc p { margin-bottom: var(--space-md); }
.pdoc p:last-child { margin-bottom: 0; }

.pdoc ul, .pdoc ol {
  margin: 0 0 var(--space-md);
  padding-left: 1.4em;
}
.pdoc li { margin-bottom: var(--space-xs); }
.pdoc li:last-child { margin-bottom: 0; }
/* 番号項目のなかの箇条書き（第2条の「本サービスには次の内容が含まれます」等） */
.pdoc li > ul {
  margin: var(--space-xs) 0 var(--space-sm);
}

.pdoc strong { font-weight: 700; }
/* 本文中のリンクだけ主色（赤）。戻る導線は操作なので巻き込まない。
   ⚠️ `.pdoc a`（0,1,1）は `.pback`（0,1,0）より詳細度が高いので、
   .pback を後ろに書いても勝てない。除外側で書く（2026-08-06） */
.pdoc a:not(.pback) { color: var(--color-primary); }

/* お問い合わせ窓口の「事業者名 / 住所 / 電話番号」のような
   ラベル＋値のブロックは、ラベルを小さめのサブ色にして値を主にする */
.pdoc p > strong:first-child { font-size: var(--fs-sm); color: var(--color-text-sub); }

/* フッター ---------------------------------------------------------------- */
.pfooter {
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-muted);
  padding: var(--space-xl) var(--space-lg) var(--space-2xl);
  text-align: center;
}
.pfooter__links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}
.pfooter__links a {
  color: var(--color-text);
  font-size: var(--fs-sm);
  text-decoration: underline;
}
.pfooter__links a[aria-current="page"] {
  color: var(--color-text-muted);
  text-decoration: none;
  pointer-events: none;
}
.pfooter__copy {
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
}