/* =========================================================
   UMIDAS – 規約ページ固有スタイル
   （利用規約／プライバシーポリシー／特定商取引法に基づく表記）
   共通のトークン・ヘッダー・フッターは base.css 側にある。
   必ず base.css のあとに読み込むこと。

   長文を最後まで読んでもらう前提の組み方にしている。
   ・1行あたり全角40字前後で折り返す（max-width 760px）
   ・条文の区切りが分かるよう、見出しの上に大きく余白を取る
   ========================================================= */

.legal-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 116px clamp(20px, 5vw, 40px) 88px;
}

/* 最小値は「特定商取引法に基づく表記」12文字が 360px 幅でも収まる大きさ */
.legal-content h1 {
  font-size: clamp(1.5rem, 3.6vw, 2.25rem);
  font-weight: 700;
  line-height: 1.45;
  margin-bottom: 10px;
}

.legal-updated {
  display: inline-block;
  padding: 3px 14px;
  margin-bottom: 44px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.9375rem;
  color: var(--text-sub);
}

.legal-content h2 {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 1.3125rem;
  font-weight: 700;
  line-height: 1.6;
  margin-top: 56px;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--line);
}

.legal-content h2 .article-num {
  flex-shrink: 0;
  min-width: 38px;
  padding: 2px 0;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-en);
  font-size: 0.9375rem;
  font-weight: 700;
  text-align: center;
}

.legal-content p,
.legal-content li {
  font-size: 1.0625rem;
  line-height: 1.95;
  color: var(--text-sub);
}

.legal-content p {
  margin-bottom: 16px;
}

.legal-content strong {
  color: var(--text);
  font-weight: 700;
}

.legal-content ol,
.legal-content ul {
  padding-left: 1.6em;
  margin-bottom: 20px;
}

.legal-content ul {
  list-style: disc;
}

.legal-content li {
  margin-bottom: 8px;
}

.legal-content li::marker {
  color: var(--text-weak);
}

/* 入れ子のリストは詰めて、階層が分かるようにする */
.legal-content li > ul,
.legal-content li > ol {
  margin-top: 8px;
  margin-bottom: 0;
}

/* 本文中のリンク。:not(.btn) を付けないと、末尾の導線ボタンにも
   この色と下線が効いてしまう（.legal-content a の方が .btn--primary より詳細度が高いため） */
.legal-content a:not(.btn) {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal-content a:not(.btn):hover {
  color: var(--accent-hover);
}

/* 制定日・改定日 */
.legal-revision {
  margin-top: 56px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 1rem;
  color: var(--text-weak);
  text-align: right;
}

/* ─────────────────────────────────────────
   項目表（特定商取引法に基づく表記）
   ───────────────────────────────────────── */
.info-table-wrap {
  margin-bottom: 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.info-table {
  width: 100%;
  border-collapse: collapse;
}

.info-table th,
.info-table td {
  font-size: 1.0625rem;
  line-height: 1.9;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.info-table th {
  width: 240px;
  background: var(--surface-2);
  color: var(--text);
  font-weight: 700;
}

.info-table td {
  color: var(--text-sub);
}

.info-table tr:last-child th,
.info-table tr:last-child td {
  border-bottom: none;
}

.info-table ul {
  margin: 8px 0 0;
  padding-left: 1.4em;
}

.info-table li {
  margin-bottom: 6px;
  font-size: 1rem;
}

.placeholder {
  color: var(--accent);
  font-weight: 700;
}

/* ─────────────────────────────────────────
   読み終わったあとの導線
   ───────────────────────────────────────── */
.legal-foot-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}

/* ─────────────────────────────────────────
   スマートフォン
   ───────────────────────────────────────── */
@media (max-width: 768px) {
  .legal-content {
    padding: 100px 18px 64px;
  }

  .legal-updated {
    margin-bottom: 32px;
  }

  .legal-content h2 {
    font-size: 1.1875rem;
    margin-top: 44px;
    gap: 10px;
  }

  .legal-content p,
  .legal-content li {
    font-size: 1rem;
  }

  /* 表は2段組だと横に潰れるので、項目名を見出しのように縦に積む */
  .info-table,
  .info-table tbody,
  .info-table tr,
  .info-table th,
  .info-table td {
    display: block;
    width: 100%;
  }

  .info-table tr {
    border-bottom: 1px solid var(--line);
  }

  .info-table tr:last-child {
    border-bottom: none;
  }

  .info-table th {
    padding: 14px 16px 10px;
    border-bottom: none;
    font-size: 1.0625rem;
  }

  .info-table td {
    padding: 0 16px 18px;
    border-bottom: none;
    font-size: 1rem;
  }

  .legal-foot-nav .btn {
    width: 100%;
  }
}

/* ─────────────────────────────────────────
   スマホの文字スケール（h1 は据え置き）
   ───────────────────────────────────────── */
@media (max-width: 768px) {
  .legal-content h2 {
    font-size: 1.0625rem;
  }

  .legal-content p,
  .legal-content li,
  .info-table td,
  .info-table li {
    font-size: 0.8125rem;
    line-height: 1.85;
  }

  .info-table th {
    font-size: 0.9375rem;
  }

  .legal-updated,
  .legal-revision {
    font-size: 0.75rem;
  }
}