/* ===== 規約3点（/terms/ /privacy/ /tokushoho/）の共通スタイル =====
   ページは tools/build-legal-pages.py が作る。専門家の確認や契約の場面で紙にされるので、
   印刷したときに読めることを優先している。配色は space のブランド（紺・水色）。 */
:root {
  --navy:#181850; --teal:#35B8C6; --tealLine:#9ADCE2;
  --ink:#15181f; --dim:#2e3640; --faint:#3c4552;
  --line:#dfe3ec; --bg:#f6f7fb; --card:#fff; --red:#A3122B;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  font-size:15.5px; line-height:1.9; overflow-wrap:anywhere;
}
a { color:var(--navy); }

/* 上の帯 */
.lgHead { background:var(--navy); color:#fff; padding:10px 16px;
  display:flex; align-items:center; gap:8px 18px; flex-wrap:wrap; }
.lgBrand { font-weight:800; letter-spacing:.1em; font-size:16px; white-space:nowrap; }
.lgBrand small { font-weight:700; letter-spacing:.04em; font-size:13px; margin-left:4px; }
.lgNav { display:flex; flex-wrap:wrap; gap:4px 16px; font-size:13.5px; }
.lgHead .lgNav a { color:#fff; text-decoration:none; opacity:.82; padding:2px 0; }
.lgHead .lgNav a:hover { opacity:1; text-decoration:underline; }
.lgHead .lgNav a[aria-current="page"] { opacity:1; border-bottom:2px solid var(--teal); }

/* 印刷のための外枠（画面ではただの箱） */
.pg, .pg > tbody, .pg > tbody > tr, .pg > tbody > tr > td { display:block; }
.pg > thead, .pg > tfoot { display:none; }
.pg td { padding:0; }

.lgWrap { max-width:820px; margin:0 auto; padding:8px 16px 56px; }
h1 { font-size:26px; line-height:1.45; margin:26px 0 2px; color:var(--navy); text-wrap:balance; }
.lgSub { margin:0 0 20px; color:var(--dim); font-weight:700; }
.lead { margin:0 0 18px; text-wrap:pretty; }

.lgDraft { margin:18px 0 0; padding:11px 14px; border:2px solid var(--red); border-radius:4px;
  background:#fff5f6; color:#6d0a1b; font-size:14.5px; line-height:1.75; text-wrap:pretty; }

/* 目次（利用規約だけ） */
.lgToc { background:var(--card); border:1px solid var(--line); border-radius:4px;
  padding:12px 16px 12px; margin:0 0 22px; }
.lgTocT { font-weight:700; margin-bottom:4px; }
.lgToc ol { list-style:none; margin:0; padding:0; columns:2 16em; column-gap:24px; font-size:14px; line-height:1.9; }
.lgToc li { break-inside:avoid; }
.lgToc a { text-decoration:none; }
.lgToc a:hover { text-decoration:underline; }

/* 条・章 */
.art { background:var(--card); border:1px solid var(--line); border-radius:4px;
  padding:16px 20px 12px; margin:0 0 12px; scroll-margin-top:12px; }
.art h2 { font-size:17px; line-height:1.5; margin:0 0 8px; color:var(--navy);
  padding-left:10px; border-left:4px solid var(--teal); text-wrap:balance; }
.art h3 { font-size:15.5px; margin:14px 0 4px; color:var(--navy); }
.art p { margin:0 0 8px; text-wrap:pretty; }
.note { display:block; font-size:13.5px; line-height:1.75; color:var(--faint); margin:6px 0 8px; text-wrap:pretty; }

/* 項（1 2 3）と号（(1) (2)）。ぶら下げて、番号の下に文字が回り込まないように */
ol.kou, ol.go { list-style:none; margin:0 0 6px; padding:0; }
ol.kou { counter-reset:kou; }
ol.kou > li { counter-increment:kou; position:relative; padding-left:1.9em; margin:0 0 7px; text-wrap:pretty; }
ol.kou > li::before { content:counter(kou); position:absolute; left:0; top:0; width:1.3em;
  text-align:right; font-weight:700; color:var(--navy); }
ol.go { counter-reset:go; margin-top:4px; }
ol.go > li { counter-increment:go; position:relative; padding-left:2.7em; margin:0 0 4px; text-wrap:pretty; }
ol.go > li::before { content:"(" counter(go) ")"; position:absolute; left:0; top:0; width:2.3em;
  text-align:right; color:var(--dim); }

/* 表 */
.tw { overflow-x:auto; margin:8px 0 8px; border:1px solid var(--line); border-radius:3px; }
.lgWrap table { border-collapse:collapse; width:100%; font-size:14.5px; line-height:1.7; }
.lgWrap th, .lgWrap td { border-bottom:1px solid var(--line); padding:8px 12px; text-align:left;
  vertical-align:top; text-wrap:pretty; }
.lgWrap thead th { background:var(--navy); color:#fff; font-weight:700; white-space:nowrap; }
.lgWrap tbody tr:last-child > th, .lgWrap tbody tr:last-child > td { border-bottom:none; }
.lgWrap td.num { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.lgWrap td .tw { margin:6px 0; }
.lgWrap td p { margin:0 0 6px; }

/* 見出しが左にある表（特商法・窓口） */
table.dl > tbody > tr > th { background:#eef1f8; color:var(--navy); font-weight:700; width:13em;
  border-right:1px solid var(--line); }
/* 料金表のプラン名は折らない（「ビジネ／ス」にしない） */
table.plan td:first-child { white-space:nowrap; }
@media (max-width:640px) {
  /* ⚠ 表そのものも block にする。table のままだと、中の料金表の幅に引っぱられて
       画面より広くなり、右端の文字が切れる（2026-09-30 に特商法表記で起きた） */
  table.dl, table.dl > tbody, table.dl > tbody > tr { display:block; width:auto; }
  table.dl > tbody > tr > th, table.dl > tbody > tr > td { display:block; width:auto; border-right:none; }
  .lgWrap thead th { white-space:normal; }
  .lgWrap th, .lgWrap td { padding:7px 9px; }
  /* 列の多い表は、1行をカードのように縦に並べる。各セルの前に見出し（data-label）を出す */
  table.stack > thead { display:none; }
  table.stack, table.stack > tbody, table.stack > tbody > tr, table.stack > tbody > tr > td { display:block; width:auto; }
  table.stack > tbody > tr { border-bottom:1px solid var(--line); padding:4px 0; }
  table.stack > tbody > tr:last-child { border-bottom:none; }
  table.stack > tbody > tr > td { border-bottom:none; padding:3px 10px; }
  table.stack > tbody > tr > td:first-child { font-weight:700; color:var(--navy); padding-top:8px; }
  table.stack > tbody > tr > td:not(:first-child)::before { content:attr(data-label); display:block;
    font-size:12.5px; font-weight:700; color:var(--dim); }
  table.dl > tbody > tr > th { border-bottom:none; padding-bottom:2px; }
  table.dl > tbody > tr:last-child > th { border-bottom:none; }
  .art { padding:14px 14px 10px; }
  h1 { font-size:23px; }
}

/* 360px 幅（小さめのAndroid）でも料金表の4列が横に動かずに収まるように */
@media (max-width:400px) {
  .lgWrap table { font-size:13.5px; }
  .lgWrap th, .lgWrap td { padding:7px 7px; }
  .art { padding:12px 11px 8px; }
}

.lgEnd { margin:22px 0 0; text-align:right; color:var(--dim); font-size:14px; line-height:1.8; }
.lgFoot { border-top:1px solid var(--line); background:var(--card); color:var(--dim);
  font-size:13px; padding:16px; text-align:center; }
.lgFoot nav { display:flex; flex-wrap:wrap; justify-content:center; gap:4px 18px; margin-bottom:6px; }

/* ===== 印刷 =====
   🔴 紙にブラウザのURL・日付・ページ番号を出さない（塙さんから何度も指摘されている）。
   ブラウザはそれらを @page の余白に描くので、余白を 0 にして描く場所を無くす。
   上下の余白は、印刷のときだけ表として働く .pg の thead / tfoot（各ページに繰り返し出る）で取り直す。
   左右は body の padding で取る（左右の padding は全ページに効く）。
   ⚠ @page は後に書いたものが勝つ。このファイルより後に @page の margin を書かないこと。 */
@media print {
  @page { size:A4; margin:0; }
  html, body { margin:0 !important; background:#fff !important; }
  body { padding:0 15mm !important; font-size:10.5pt; line-height:1.75;
    -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .lgHead, .lgFoot, .lgToc { display:none !important; }
  .pg { display:table; width:100%; border-collapse:collapse; }
  .pg > thead { display:table-header-group; }
  .pg > tfoot { display:table-footer-group; }
  .pg > tbody { display:table-row-group; }
  .pg > tbody > tr, .pg > thead > tr, .pg > tfoot > tr { display:table-row; }
  .pg > tbody > tr > td, .pg > thead > tr > td, .pg > tfoot > tr > td { display:table-cell; padding:0; }
  .pgSp { height:13mm; }
  .lgWrap { max-width:none; padding:0; }
  h1 { font-size:17pt; margin-top:0; }
  .art { border:none; border-radius:0; padding:0; margin:0 0 9pt; background:none; }
  .art h2 { font-size:11.5pt; break-after:avoid; }
  .art h3 { break-after:avoid; }
  ol.kou > li, ol.go > li, .lgWrap tr { break-inside:avoid; }
  /* 号を含む長い項まで分けずに送ると、ページの下が大きく空く。これだけは途中で分けてよい */
  ol.kou > li:has(ol), .lgWrap tr:has(ol), .lgWrap tr:has(table) { break-inside:auto; }
  .tw { overflow:visible; }
  /* 見出しが左の表（特商法・窓口）は、表のままだと行がページをまたぐときに大きな空きが出る。
     印刷では横並びの箱として組む（箱ならきれいにページを分けられる） */
  table.dl, table.dl > tbody { display:block; }
  table.dl > tbody > tr { display:flex; border-bottom:1px solid var(--line); break-inside:auto; }
  table.dl > tbody > tr:last-child { border-bottom:none; }
  table.dl > tbody > tr > th { flex:0 0 38mm; width:auto; border-bottom:none; }
  table.dl > tbody > tr > td { flex:1 1 auto; min-width:0; border-bottom:none; }
  .lgWrap table { font-size:9.5pt; }
  a { color:inherit; text-decoration:none; }
}