/*
 * 規約・表記の読みもの（naga.css の上に重ねる）。
 * 使うページ: templates/tokutei.html（特定商取引法に基づく表示）・templates/rules.html（NAGA有料プラン利用規約）。
 * どちらも S3 にそのまま置く静的ページ。l- はこのページ群だけの部品。
 */

/* 本文の柱: 1 行がおよそ 40 字前後に収まる幅（条文だけの読みものはもう少し狭く） */
.l-doc { max-width: 880px; margin: 0 auto; }
.l-doc--prose { max-width: 780px; }
.l-doc .n-page-head { margin-bottom: 22px; }
.l-doc .n-page-head h1 { text-wrap: balance; word-break: auto-phrase; }
.l-doc__body { padding: 6px clamp(18px, 3.4vw, 40px); line-height: 1.95; }
.l-doc__body p { margin: 0; }
.l-doc__body a { overflow-wrap: anywhere; }

/* ---- 項目と内容（特定商取引法に基づく表示） -------------------------------------------------- */
.l-defs { margin: 0; }
.l-defs__row { display: grid; grid-template-columns: 12.5em minmax(0, 1fr); gap: 4px 32px; padding: 20px 0; border-top: 1px solid var(--line); }
.l-defs__row:first-child { border-top: 0; }
.l-defs dt { position: relative; padding-left: 16px; color: var(--muted); font-size: 14px; font-weight: 700; line-height: 29px; letter-spacing: 0.04em; }
.l-defs dt::before { content: ""; position: absolute; left: 1px; top: 11.5px; width: 6px; height: 6px; background: var(--violet-hi); transform: rotate(45deg); }
.l-defs dd { margin: 0; min-width: 0; }
.l-defs dd > p + p, .l-defs dd > p + .l-note, .l-defs dd > .l-note + p { margin-top: 6px; }
.l-note { color: var(--muted); font-size: 14px; }

/* 注意事項の番号つきの見出し: 「01」「02」（Oxanium）と、題へ続く細い線 */
.l-points { margin: 0; padding: 0; list-style: none; counter-reset: l-point; }
.l-points > li { counter-increment: l-point; }
.l-points > li + li { margin-top: 18px; }
.l-points h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; font-size: 1rem; font-weight: 900; line-height: 29px; }
.l-points h2::before {
  content: counter(l-point, decimal-leading-zero);
  flex: none;
  padding-right: 22px;
  font-family: var(--font-latin); font-size: 14px; font-weight: 600; letter-spacing: 0.06em; color: var(--violet-text);
  background: linear-gradient(var(--violet-hi), var(--violet-hi)) right 50% / 12px 1px no-repeat;
}

/* ---- 条文（NAGA有料プラン利用規約） --------------------------------------------------------- */
.l-articles { margin: 0; padding: 0; list-style: none; counter-reset: l-article; }
.l-articles > li { counter-increment: l-article; padding: 24px 0 26px; border-top: 1px solid var(--line); }
.l-articles > li:first-child { border-top: 0; }
.l-articles h2 { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; font-size: 1.1rem; line-height: 1.6; }
.l-articles h2::before {
  content: "第" counter(l-article) "条";
  flex: none;
  padding: 1px 9px;
  border-radius: var(--radius-xs);
  border: 1px solid rgba(181, 140, 255, 0.38);
  background: rgba(181, 140, 255, 0.07);
  color: var(--violet-text);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.8;
}
.l-clauses { margin: 0; padding-left: 1.75em; }
.l-clauses > li { padding-left: 0.3em; }
.l-clauses > li + li { margin-top: 8px; }
.l-clauses > li::marker { color: var(--violet-text); font-family: var(--font-latin); font-weight: 700; }
.l-articles p + .l-clauses { margin-top: 10px; }
.l-doc__date { margin: 0; padding: 18px 0 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; text-align: right; }

/* ---- スマホ ------------------------------------------------------------------------------ */
@media (max-width: 767.98px) {
  .l-defs__row { grid-template-columns: minmax(0, 1fr); padding: 16px 0 18px; }
  .l-defs dt { color: var(--violet-text); font-size: 13px; }
}
@media (max-width: 575.98px) {
  .l-doc__body { padding: 4px 18px; }
  .l-articles > li { padding: 20px 0 22px; }
  .l-articles h2 { align-items: flex-start; gap: 10px; font-size: 1.04rem; }
  .l-articles h2::before { margin-top: 1px; }
  .l-clauses { padding-left: 1.5em; }
  /* フッターのリンクを押しやすく（naga.css に入れたい） */
  .l-page .n-footer__links { gap: 0 20px; }
  .l-page .n-footer__links a { display: inline-flex; align-items: center; min-height: 44px; }
}
/* 題は「NAGA有料プラン / 利用規約」の所だけで折り返す */
#l-title { word-break: keep-all; overflow-wrap: anywhere; }
/* 見出しの中で、語の途中で折りたくないまとまり */
.l-nb { white-space: nowrap; }