/* 規約系ページ（利用規約・プライバシーポリシー・特定商取引法に基づく表記）の共通スタイル。
   トークンと共通部品は site.css。トップページと同じく罫線（2px の濃紺＋細線）で区切る */

/* ---------- ページ見出し: トップのヒーローを小さくしたもの ---------- */
.page-head { position: relative; overflow: hidden; padding: var(--sp-8) 0 var(--sp-7); border-bottom: 1px solid var(--hairline-strong); background: linear-gradient(180deg, var(--brand-tint) 0%, var(--canvas) 90%); }
.page-head::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(var(--brand-tint-2) 1px, transparent 1px), linear-gradient(90deg, var(--brand-tint-2) 1px, transparent 1px); background-size: calc(var(--cell) * 2.4) var(--cell); -webkit-mask-image: radial-gradient(ellipse 60% 120% at 85% 0%, #000 15%, transparent 70%); mask-image: radial-gradient(ellipse 60% 120% at 85% 0%, #000 15%, transparent 70%); pointer-events: none; }
.page-head .container { position: relative; }
.page-label { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .04em; color: var(--brand); margin-bottom: var(--sp-4); }
.page-label::before { content: ''; width: 10px; height: 10px; background: var(--brand); }
.page-title { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h2); line-height: 1.3; letter-spacing: -.02em; }
.page-subtitle { margin-top: var(--sp-3); color: var(--ink-mute); font-size: 14px; max-width: 40em; }

/* ---------- 本文 ---------- */
.legal { max-width: 800px; padding: var(--sp-8) 0 var(--sp-9); }
.intro { color: var(--ink-2); margin-bottom: var(--sp-7); max-width: 44em; }
.article { padding: var(--sp-5) 0 var(--sp-6); border-top: 1px solid var(--hairline); }
.intro + .article { border-top: 2px solid var(--ink); }
.article h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3); line-height: 1.5; margin-bottom: var(--sp-3); }
.article h2 .art { font-family: var(--font-mono); font-weight: 700; font-size: 14px; color: var(--brand); }
.article p { color: var(--ink-2); margin-bottom: var(--sp-2); }
.article p:last-child { margin-bottom: 0; }
.article ol, .article ul { list-style: none; margin-top: var(--sp-2); }
.article li { position: relative; color: var(--ink-2); padding-left: 2em; margin-bottom: var(--sp-2); }
.article ol { counter-reset: li; }
.article ol li { counter-increment: li; }
.article ol li::before { content: counter(li) '.'; position: absolute; left: 0; font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--brand); top: .2em; }
/* 箇条書きの印はアイコンと同じ「セル」 */
.article ul li::before { content: ''; position: absolute; left: .45em; top: .72em; width: 7px; height: 7px; background: var(--brand); }
.meta { margin-top: var(--sp-2); padding-top: var(--sp-5); border-top: 2px solid var(--ink); font-family: var(--font-mono); font-size: 13px; color: var(--ink-mute); }

/* ---------- 特定商取引法に基づく表記: 項目と内容の表 ---------- */
.spec { width: 100%; border-collapse: collapse; border-top: 2px solid var(--ink); }
.spec th, .spec td { text-align: left; vertical-align: top; padding: var(--sp-4) 0; border-bottom: 1px solid var(--hairline); }
.spec th { width: 30%; padding-right: var(--sp-5); font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--ink); }
.spec td { color: var(--ink-2); }
.spec td strong { color: var(--ink); font-weight: 700; }
.sub { font-size: 13px; color: var(--ink-mute); }

@media (max-width: 640px) {
  .page-head { padding: var(--sp-7) 0 var(--sp-6); }
  .legal { padding: var(--sp-6) 0 var(--sp-8); }
  .spec, .spec tbody, .spec tr, .spec th, .spec td { display: block; width: 100%; }
  .spec tr { padding: var(--sp-4) 0; border-bottom: 1px solid var(--hairline); }
  .spec th, .spec td { padding: 0; border: none; }
  .spec th { margin-bottom: var(--sp-1); color: var(--brand); font-size: 13px; }
}