/* ============================================================
   公開法務ページ（利用規約・プライバシーポリシー）の共通スタイル
   土台は user/top.html と同じ style.css。ここでは長文の読み物として
   必要な組版だけを足す（ビルドステップ無しの方針＝CLAUDE.md に合わせる）

   使い方: <link rel="stylesheet" href="legal.css?v=1">（user/legal/ 直下から）
   ============================================================ */

body { background: #fff; }

/* --- ヘッダー（ロゴだけ。未ログインの第三者が直接開くため、ナビは置かない） --- */
.legal-header {
  border-bottom: 1px solid var(--c-line);
  padding: 16px 20px;
  display: flex; align-items: center;
}
.legal-header__brand { display: flex; align-items: center; text-decoration: none; transition: opacity .15s; }
.legal-header__brand:hover { opacity: .75; }
.legal-header__brand img { height: 32px; width: auto; display: block; }

/* --- 本文 --- */
.legal-main { max-width: 840px; margin: 0 auto; padding: 32px 20px 56px; }
.legal-main__title { font-size: 24px; font-weight: 800; color: var(--c-ink-900); margin: 0 0 12px; line-height: 1.4; }
.legal-main__lead { font-size: 16px; line-height: 1.8; color: var(--c-ink-500); margin: 0 0 28px; }

.legal-section { margin: 0 0 28px; }
.legal-section__title {
  font-size: 18px; font-weight: 700; color: var(--c-ink-900);
  margin: 0 0 10px; padding-bottom: 8px;
  border-bottom: 1px solid var(--c-line);
  line-height: 1.5;
}
.legal-section p { font-size: 16px; line-height: 1.8; color: var(--c-ink-700); margin: 0 0 10px; }
.legal-section p:last-child { margin-bottom: 0; }
.legal-section ol { margin: 0 0 10px; padding-left: 1.4em; }
.legal-section li { font-size: 16px; line-height: 1.8; color: var(--c-ink-700); margin-bottom: 4px; }
.legal-section li:last-child { margin-bottom: 0; }
.legal-section a { color: var(--c-primary); text-decoration: underline; }

/* --- 表（プライバシーポリシーの委託先一覧など） --- */
.legal-table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.8; }
.legal-table th,
.legal-table td { border-bottom: 1px solid var(--c-line); padding: 12px 4px; text-align: left; vertical-align: top; }
.legal-table th { width: 34%; font-weight: 700; color: var(--c-ink-900); }
.legal-table td { color: var(--c-ink-700); }

/* 要確認（未確定）の項目に付ける印。特定商取引法に基づく表記のページと同じ仕組み。
   事業側の判断が確定したら、文言を書き換えたうえで data-pending 属性ごと消す。
   属性が付いている限りこのバッジが出るので、確定値と見分けが付かなくなる事故を防ぐ */
[data-pending]::before {
  content: '確認中';
  display: inline-block;
  margin-right: 8px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: #fdf0d5;
  color: #8a5a00;
  font-size: 13px;
  font-weight: 700;
  vertical-align: 1px;
}

.legal-updated { margin-top: 24px; font-size: 14px; color: var(--c-ink-500); }

/* --- フッター（user/top.html のフッターと同じ見た目に揃える） --- */
footer {
  background: var(--c-ink-900); color: rgba(255,255,255,.4);
  padding: 24px 20px; text-align: center; font-size: 16px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
footer a { color: rgba(255,255,255,.7); text-decoration: underline; }
footer a:hover { color: #fff; }
footer .footer__links { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: center; }