/* =============================================
   JPJ products — legal pages (特商法表記・プライバシーポリシー)
   css/style.css の後に読み込む
============================================= */
.legal { padding: calc(var(--space-32) + 40px) 0 var(--space-24); }
.legal__inner { max-width: 820px; margin: 0 auto; }
.legal .section-header { margin-bottom: var(--space-12); }
.legal__lead { color: var(--color-text-muted); font-size: var(--fs-sm); line-height: 2; margin-bottom: var(--space-10); text-align: center; }
.legal__card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-10);
}
.legal__table { width: 100%; border-collapse: collapse; }
.legal__table th,
.legal__table td {
  text-align: left; vertical-align: top;
  padding: var(--space-5) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--fs-sm); line-height: 1.9;
}
.legal__table tr:last-child th,
.legal__table tr:last-child td { border-bottom: none; }
.legal__table th { width: 30%; color: var(--color-gold); font-weight: 400; letter-spacing: var(--ls-wide); }
.legal__table td { color: var(--color-text-sub); }
.legal__block + .legal__block { margin-top: var(--space-10); }
.legal__block h2 {
  font-family: var(--font-serif-jp); font-weight: 400;
  font-size: var(--fs-md); color: var(--color-gold-light);
  margin-bottom: var(--space-3);
}
.legal__block p,
.legal__block li { font-size: var(--fs-sm); color: var(--color-text-sub); line-height: 1.9; }
.legal__block ul { list-style: disc; padding-left: 1.4em; margin-top: var(--space-2); }
.legal a { color: var(--color-gold); text-decoration: underline; text-underline-offset: 3px; }
.legal__date { margin-top: var(--space-10); font-size: var(--fs-xs); color: var(--color-text-muted); }
.legal__back { display: inline-block; margin-top: var(--space-10); font-size: var(--fs-sm); }
.footer__legal { display: flex; justify-content: center; gap: var(--space-6); flex-wrap: wrap; margin-bottom: var(--space-4); }
.footer__legal a { font-size: var(--fs-xs); letter-spacing: var(--ls-wide); color: var(--color-text-muted); }
.footer__legal a:hover { color: var(--color-text); }
@media (max-width: 640px) {
  .legal__card { padding: var(--space-6) var(--space-5); }
  .legal__table th, .legal__table td { display: block; width: 100%; padding: var(--space-3) 0; }
  .legal__table th { padding-bottom: 0; border-bottom: none; }
}
.legal + .footer { padding-top: var(--space-10); }
.legal + .footer .footer__bottom { border-top: none; padding-top: 0; }