/* うたのこのポリシー・サポート用の追加スタイル。
 *
 * 色とフォントは style.css の変数をそのまま使う。**ここで新しい色を作らない。**
 * style.css 本体を触らないのは、触ると全ページの ?v= を上げる必要が出るため。
 *
 * ⚠️ CSP が style-src 'self' なので、**インラインの <style> や style= は効かない。**
 *    見た目を足すときは必ずこのファイルに書く。
 */

/* 見出しまわり ------------------------------------------------- */

.legal .lead { color: var(--ink-soft); margin: 10px 0 0; }

/* 節の番号。長いポリシーは「いま何章か」が見えたほうが読みやすい */
.legal h2 { display: flex; align-items: baseline; gap: 12px; }
.legal h2 .num {
  flex: none; font-size: .78rem; font-weight: 500; color: var(--terra-dark);
  background: rgba(217, 154, 92, .14); border-radius: 999px; padding: 3px 10px;
}
.legal h3 { font-family: var(--font-round); font-weight: 500; font-size: 1rem;
            color: var(--teal); margin: 24px 0 6px; }

.legal .fineprint { font-size: .86rem; }

/* 表 ------------------------------------------------------------ */

.legal .scroll { overflow-x: auto; margin: 20px 0; }
.legal table { width: 100%; border-collapse: collapse; font-size: .94rem; line-height: 1.8; }
.legal th,
.legal td { text-align: left; vertical-align: top; padding: 14px 14px 14px 0;
            border-bottom: 1px solid var(--cream-2); }
.legal th { color: var(--ink-soft); font-family: var(--font-round); font-weight: 500;
            font-size: .84rem; white-space: nowrap; }
.legal td:first-child { white-space: nowrap; padding-right: 24px;
                        font-weight: 500; color: var(--teal-dark); }
.legal td:not(:first-child) { color: var(--ink-soft); }

/* **狭い画面では3列の表が1文字ずつに潰れる。** 縦に積み直す */
@media (max-width: 620px) {
  .legal .scroll { overflow-x: visible; }
  .legal table,
  .legal tbody,
  .legal tr,
  .legal td { display: block; width: 100%; }
  .legal tr:has(th) { display: none; }
  .legal tr { border-bottom: 1px solid var(--cream-2); padding: 16px 0; }
  .legal tr:last-child { border-bottom: 0; }
  .legal td { border: 0; padding: 4px 0; white-space: normal; }
  .legal td:first-child { font-family: var(--font-round); font-weight: 700;
                          font-size: 1rem; color: var(--teal-dark); padding: 0 0 6px; }
  .legal td[data-label]:not(:first-child)::before {
    content: attr(data-label);
    display: inline-block; margin-right: 8px; vertical-align: 2px;
    font-size: .72rem; color: var(--terra-dark);
    background: rgba(217, 154, 92, .14); border-radius: 999px; padding: 1px 8px;
  }
}

/* 囲み ---------------------------------------------------------- */

.legal .note {
  background: var(--teal-soft); border-radius: var(--radius);
  padding: 18px 22px; margin: 24px 0;
}
.legal .note p { color: var(--ink); margin: 0; }

.legal .contact-box {
  background: var(--teal-soft); border-radius: var(--radius-lg);
  padding: 26px 28px; margin: 28px 0; text-align: center;
}
.legal .contact-box .label { font-family: var(--font-round); font-weight: 500;
                             color: var(--teal-dark); margin: 0 0 8px; }
.legal .contact-box .mailto { font-size: 1.06rem; font-weight: 500; margin: 0; }
.legal .contact-box .fine { color: var(--ink-soft); font-size: .86rem; margin: 12px 0 0; }

/* よくある質問 -------------------------------------------------- */

.legal details { border-bottom: 1px solid var(--cream-2); }
.legal details:last-of-type { border-bottom: 0; }
.legal summary {
  cursor: pointer; list-style: none; position: relative;
  padding: 18px 38px 18px 0;
  font-family: var(--font-round); font-weight: 500; color: var(--teal-dark);
}
.legal summary::-webkit-details-marker { display: none; }
.legal summary::after {
  content: "＋"; position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
  color: var(--terra); font-size: .95rem;
}
.legal details[open] summary::after { content: "−"; }
.legal details > *:last-child { margin-bottom: 20px; }