/* 利用規約・プライバシーポリシー（terms.html・privacy.html。2026-10-27 96）。
   トップ（index.html）と同じ white-orange.css・v5-1.css の上に、トップのページ内 <style> にある土台（ヘッダー・フッターの並び）の一部と、本文の読みやすさだけを足す */
:root {
  --display: "Mochiy Pop One", "Noto Sans JP", sans-serif;
  --body: "Noto Sans JP", "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-family: var(--body);
  font-synthesis: none;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { line-height: 1.9; overflow-wrap: anywhere; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
p, h1, h2, h3 { margin: 0; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--ink); outline-offset: 6px; }
.wrap { width: min(1320px, calc(100% - 96px)); margin-inline: auto; }
.skip { position: absolute; left: 12px; top: -100px; background: #fff; padding: 10px; z-index: 200; }
.skip:focus { top: 12px; }

/* ヘッダー（トップと同じ: ロゴ + ベータ版 + 「無料ではじめる」） */
.header { display: flex; align-items: center; }
.brand { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.2; flex-shrink: 0; }
.brand .brand-logo { display: block; height: 34px; width: auto; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 24px; border-radius: 100px; font-weight: 800; line-height: 1.6; }
.button > span { font-size: 26px; line-height: 1; }
.header-cta { margin-left: auto; }

/* 本文: 読みやすい幅 720px・見出し h2・本文 16px・行間 1.8 */
.legal { width: min(720px, calc(100% - 40px)); margin: 0 auto; padding: 56px 0 72px; color: #25313b; font-size: 16px; line-height: 1.8; }
.legal h1 { font-family: var(--display); font-weight: 400; font-size: clamp(28px, 4vw, 40px); line-height: 1.5; letter-spacing: .01em; color: #080e18; padding-bottom: 14px; border-bottom: 3px solid #ff651c; }
.legal section { margin-top: 36px; }
.legal h2 { font-size: 20px; font-weight: 800; line-height: 1.6; color: #080e18; padding-left: 12px; border-left: 5px solid #ff651c; }
.legal p, .legal ul { margin: 10px 0 0; font-size: 16px; line-height: 1.8; }
.legal ul { padding-left: 1.4em; }
.legal li + li { margin-top: 6px; }
.legal li::marker { color: #ff651c; }
.legal .legal-date { margin-top: 44px; padding-top: 18px; border-top: 1px solid #f1dfd1; font-size: 15px; color: #515864; }
.legal-next { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 36px; }
.legal-next a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: #b23c00; text-decoration: underline; text-underline-offset: 4px; }
.legal-next a:hover { color: #ff651c; }

/* フッター（トップと同じ並び + 規約の 2 つ） */
.footer { display: flex; align-items: center; gap: 36px; padding: 28px 0 48px; }
.footer .brand .brand-logo { height: 40px; }
.footer p, .footer > a:last-child { font-size: 14px; }
.footer > a:last-child { padding: 12px 0; }
.foot-legal { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-left: auto; font-size: 14px; }
.foot-legal a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-underline-offset: 3px; }
.foot-legal a[aria-current="page"] { text-decoration: none; font-weight: 700; color: #b23c00; }

@media (max-width: 760px) {
  .wrap { width: calc(100% - 40px); }
  .brand .brand-logo { height: 30px; }
  .header-cta { font-size: 14px; gap: 16px; }
  .header-cta > span { font-size: 20px; }
  .header .brand > span.hdr-beta { left: calc(100% + 8px); top: 50%; bottom: auto; transform: translateY(-50%); }
  .legal { padding: 36px 0 56px; }
  .legal h2 { font-size: 18px; }
  .footer { display: grid; grid-template-columns: 1fr 1fr; padding-bottom: 36px; }
  .footer .brand { align-items: flex-start; }
  .footer .brand .brand-logo { height: 34px; }
  .footer p { grid-column: 1 / -1; grid-row: 2; }
  .foot-legal { grid-column: 1 / -1; grid-row: 3; margin-left: 0; }
}
@media (max-width: 380px) {
  .header .brand > span.hdr-beta { left: 0; top: calc(100% + 4px); transform: none; }
}
@media (max-width: 360px) {
  .brand .brand-logo { height: 26px; }
}