/* 法務ページ（/ja/legal/*）。build-legal.mjs が docs/legal/*.ja.md から生成する本文に当てる。
   以前は各 index.html に同じ <style> を貼っていたものを1箇所に集約した。 */

.legal-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 4rem 1.5rem 6rem;
}

.legal-wrap h1 {
  font-size: 2rem;
  font-weight: 800;
  color: var(--navy-900, #1c2b3a);
  margin-bottom: 0.5rem;
}

.legal-wrap .updated {
  font-size: 0.8rem;
  color: var(--chalk-500, #8899aa);
  margin-bottom: 3rem;
}

.legal-wrap h2 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--navy-900, #1c2b3a);
  margin: 2.5rem 0 0.75rem;
  border-left: 3px solid #c4e030;
  padding-left: 0.75rem;
}

.legal-wrap h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--navy-800, #2a3f52);
  margin: 1.5rem 0 0.5rem;
}

.legal-wrap p,
.legal-wrap li {
  font-size: 0.9rem;
  line-height: 1.9;
  color: var(--chalk-700, #445566);
}

.legal-wrap ul,
.legal-wrap ol {
  padding-left: 1.5rem;
  margin: 0.5rem 0;
}

.legal-wrap li {
  margin-bottom: 0.25rem;
}

.legal-wrap hr {
  border: none;
  border-top: 1px solid var(--chalk-200, #e8edf2);
  margin: 2rem 0;
}

.legal-wrap a {
  color: var(--navy-800, #2a3f52);
  text-decoration: underline;
}

/* 表は横に溢れさせない（parseMarkdown が .news-table-scroll で包む） */
.legal-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  margin: 1rem 0;
}

.legal-wrap th,
.legal-wrap td {
  text-align: left;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--chalk-200, #e8edf2);
  color: var(--chalk-700, #445566);
  vertical-align: top;
}

.legal-wrap th {
  font-weight: 700;
  background: var(--chalk-50, #f4f7fa);
  color: var(--navy-800, #2a3f52);
}

/* 特商法だけは「項目 → 内容」の2列表なので、左列を見出しセルとして扱う。 */
.legal-tokusho table {
  font-size: 0.875rem;
  margin: 2rem 0;
}

.legal-tokusho thead th {
  border-top: 2px solid #c4e030;
}

.legal-tokusho tbody td:first-child {
  width: 30%;
  font-weight: 700;
  background: var(--chalk-50, #f4f7fa);
  color: var(--navy-800, #2a3f52);
}

.legal-tokusho tbody td {
  padding: 0.9rem 1rem;
  line-height: 1.7;
}