/*
 * 料金・有料会員のお申し込み（最終確認画面）・アカウント（public/js/billing.js、2026-10-13）。
 * 読むページ（.doc）の枠と字の形のまま。お申し込みの画面は、上から読んでいくとボタンに着く一列。
 * 値はすべて kosei.css の名前。ボタンは parts.css・buttons.css の部品のまま。
 */
.billing-page h2 {
  margin: var(--space-4) 0 var(--space-2);
  font-size: var(--fs-head);
}
.billing-table td,
.billing-table th {
  white-space: normal;
  vertical-align: top;
}
/* 料金の表（Free・Plus・Pro・Business、2026-10-24）：列の頭に、段の名前・日本語の添え書き・役割。色の面は置かない。
   幅は決め打ちしない（前は表 46rem・列 9rem の最小幅で、字の幅しだいで欄の右が切れた）。列は欄の幅を分け合い、中の字は折り返す。
   それでも入りきらないときは、カードにする（billing.js fitPricing）。
   4つの段の列は同じ幅（並べて比べる表で列の幅がばらばらだと、比べにくい。統括5 2026-10-27）：項目の列の幅は fitPricing が
   項目の名前を測って --pricing-label に入れ、残りを4列で等分する */
.billing-pricing .billing-table {
  table-layout: fixed;
  width: 100%;
}
.billing-pricing .billing-table thead th:first-child {
  width: var(--pricing-label, auto);
}
.billing-table thead th {
  vertical-align: top;
}
/* 項目の名前は1行（screen-review「見出し・ラベルが2行に折れていない」）。言葉は短くしてある。
   1行のままでは4つの段の列が狭くなりすぎるとき（字の幅しだい）は、fitPricing が billing-labels-wrap を付け、語の切れ目でだけ折る */
.billing-pricing .billing-table th[scope='row'] {
  white-space: nowrap;
}
.billing-pricing .billing-table.billing-labels-wrap th[scope='row'] {
  white-space: normal;
  word-break: auto-phrase;
}
/* 表の中の字は、語の途中で折らない（screen-review「本文は単語の途中で折り返さない」） */
.billing-pricing .billing-table td {
  word-break: auto-phrase;
}
/* 料金の表のまとまり（壁打ちする・マーケ機能・業界のデータ）：行の全部の幅の見出し。色の面は置かず、字と線で分ける */
.billing-pricing .billing-table .billing-section th {
  padding-top: var(--space-4);
  border-bottom: var(--line-weight) solid var(--line-strong);
  white-space: normal;
  text-align: left;
}
.billing-section-h,
.billing-card-sec dt {
  font-family: var(--font-mincho);
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--text);
}
.billing-section-note {
  margin-left: var(--space-2);
  color: var(--text-muted);
  font-size: var(--fs-note);
  font-weight: 400;
}
.billing-card-sec {
  margin-top: var(--space-4);
  border-bottom: var(--line-weight) solid var(--line-strong);
}
.billing-card-sec dd {
  color: var(--text-muted);
  font-size: var(--fs-note);
}
.billing-tier {
  display: block;
  white-space: nowrap;
  font-size: var(--fs-title);
  font-weight: 700;
}
/* 段の名前と添え書き（マーケティング向け など）は1行。1字だけ次の行に落ちないように（統括5・チームM 2026-10-27）。
   入る幅は fitPricing が段の列に先に取る */
.billing-for {
  display: block;
  white-space: nowrap;
  color: var(--text-muted);
  font-size: var(--fs-note);
  font-weight: 400;
}
.billing-role {
  display: block;
  margin-top: var(--space-1);
  font-weight: 400;
  word-break: auto-phrase;
}
/* 段の説明が1行で入る幅を測るあいだだけ（billing.js fitPricing） */
.billing-measure .billing-role {
  white-space: nowrap;
}
/* 本文の欄に4つの段の説明が1行で入らないとき、ヘッダーと同じ幅まで、表の欄だけを左右に同じだけ広げる（幅は fitPricing が測る） */
.billing-pricing .doc-scroll.billing-wide,
html .billing-pricing p.billing-wide.billing-wide {
  max-width: none;
  width: var(--pricing-wide);
  margin-left: calc((100% - var(--pricing-wide)) / 2);
}
.billing-soon {
  display: block;
  margin-top: var(--space-1);
  color: var(--text-muted);
  font-size: var(--fs-note);
  font-weight: 400;
}
.billing-go-row td {
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
}
.billing-go-row button {
  white-space: nowrap;
}
.billing-now {
  color: var(--text-muted);
  font-weight: 600;
}
.billing-points {
  margin: var(--space-3) 0;
  padding-left: 1.2em;
  line-height: 1.8;
}
.billing-go {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-4) 0 var(--space-2);
}
.billing-note {
  margin: var(--space-3) 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-card);
  background: var(--surface-quiet);
  line-height: 1.7;
}
.billing-account {
  margin: var(--space-2) 0 var(--space-3);
  color: var(--text-muted);
  overflow-wrap: anywhere;
}
.billing-terms {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: term;
}
.billing-terms > li {
  counter-increment: term;
  padding: var(--space-2) 0 var(--space-3);
  border-top: 1px solid var(--line-soft);
}
.billing-terms > li h2 {
  margin: var(--space-2) 0 var(--space-1);
  font-size: var(--fs-body);
}
.billing-terms > li h2::before {
  content: counter(term) '. ';
  color: var(--text-muted);
}
.billing-terms p,
.billing-terms ul {
  margin: var(--space-1) 0;
  line-height: 1.75;
}
.billing-terms ul {
  padding-left: 1.2em;
}
.billing-price {
  font-size: var(--fs-head);
  font-weight: 600;
}
.billing-confirm {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 2px solid var(--line-soft);
}
.billing-adult {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap);
  font-size: var(--fs-body);
  font-weight: 600;
  cursor: pointer;
}
/* 押せる範囲は行ぜんぶ（欄はラベルの上に重ね、見える四角は字の前に描く） */
.billing-adult input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.billing-adult span::before {
  content: '';
  display: inline-block;
  width: 22px;
  height: 22px;
  margin-right: var(--space-2);
  vertical-align: -5px;
  border: 2px solid var(--text-muted);
  border-radius: 4px;
  background: var(--bg) no-repeat center / 16px 16px;
}
.billing-adult input:checked + span::before {
  border-color: var(--brand-solid);
  background-color: var(--brand-solid);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='white' stroke-width='2.2'/%3E%3C/svg%3E");
}
.billing-adult input:focus-visible + span::before {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.billing-usage {
  display: grid;
  gap: 0;
  margin: var(--space-2) 0;
}
.billing-usage > div {
  display: grid;
  grid-template-columns: minmax(8em, 14em) minmax(0, 1fr);
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--line-soft);
}
.billing-usage dt {
  color: var(--text-muted);
}
.billing-usage dd {
  margin: 0;
  overflow-wrap: anywhere;
}
@media (max-width: 560px) {
  .billing-usage > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .billing-go .primary,
  .billing-go .secondary {
    width: 100%;
  }
}
/* アカウントの画面のいちばん下の「ログアウト」（2026-10-18） */
.billing-logout {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line, #e5e7eb);
}
/* 料金の表は、狭い画面でも表のまま（4つの段を横に比べる）。枠の中で横に動かし、項目の列は左に残す。
   読むページの表（doc.css）が狭い画面で1列に並べ替えるのを、この表だけ戻す */
@media (max-width: 700px) {
  .billing-pricing .doc-scroll {
    overflow-x: auto;
  }
  .billing-pricing .billing-table {
    display: table;
    min-width: 40rem;
  }
  .billing-pricing .billing-table thead {
    display: table-header-group;
  }
  .billing-pricing .billing-table tbody {
    display: table-row-group;
  }
  .billing-pricing .billing-table tr {
    display: table-row;
    padding: 0;
    border-top: 0;
  }
  .billing-pricing .billing-table th,
  .billing-pricing .billing-table td {
    display: table-cell;
    padding: var(--space-2);
    border-top: 1px solid var(--line);
  }
  .billing-pricing .billing-table thead th {
    min-width: 7.5rem;
  }
  .billing-pricing .billing-table th[scope='row'],
  .billing-pricing .billing-table thead th:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 6rem;
    background: var(--bg);
  }
}

/* ── 紺と金のトンマナ（斉藤さん 2026-10-25「帯だけでなく、ボタンやカラー、すべて」）。新しいトップから来た人だけ。
 * 頭は紺の帯（band.js）。見出しは明朝の太字、段の名前は紺、添え書きは白地の金（--text-mark）、金額は大きく。
 * 色の面は置かない。ボタンは parts.css の3つの形のまま。 */
/* 本文の h2：明朝800・21px・紺、左に金の細い縦線（統括の見出しの決まり）。お申し込みの番号つきの項目は番号が印なので線なし */
html[data-top='new'] .billing-page h2 {
  padding-left: 10px;
  border-left: 3px solid var(--gold);
  font-family: var(--font-mincho);
  font-weight: 800;
  font-size: 1.3125rem;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: var(--brand-12);
}
html[data-top='new'] .billing-intro {
  margin: 0 0 var(--space-5);
  color: var(--text-muted);
  font-size: var(--fs-body);
  line-height: 1.8;
  word-break: auto-phrase;
}
/* 料金の表：段の名前・添え書き・役割。段の頭の下に紺の線 */
html[data-top='new'] .billing-pricing .billing-table {
  margin-top: 0;
}
html[data-top='new'] .billing-table thead th {
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--brand-12);
  color: var(--text);
}
html[data-top='new'] .billing-tier {
  font-family: var(--font-mincho);
  font-size: 1.625rem;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: var(--brand-12);
}
html[data-top='new'] .billing-for {
  margin-top: 2px;
  color: var(--text-mark);
  font-weight: 700;
  letter-spacing: 0.06em;
}
html[data-top='new'] .billing-role {
  margin-top: var(--space-2);
  color: var(--text-muted);
  font-size: var(--fs-note);
  line-height: 1.6;
}
html[data-top='new'] .billing-soon {
  display: inline-block;
  margin-top: var(--space-2);
  padding: 0 var(--space-2);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: var(--fs-tag);
  line-height: 1.8;
}
/* 料金の行：金額を明朝で大きく、「月額」は小さく前に */
html[data-top='new'] .billing-price-row th,
html[data-top='new'] .billing-price-row td {
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
  vertical-align: baseline;
}
/* 「月額」と金額は1行のまま。値の説明（1人あたり）は、その下に小さく */
.billing-amount {
  white-space: nowrap;
}
.billing-price-note {
  display: block;
  color: var(--text-muted);
  font-size: var(--fs-tag);
}
html[data-top='new'] .billing-per {
  margin-right: 2px;
  color: var(--text-muted);
  font-size: var(--fs-tag);
}
html[data-top='new'] .billing-yen {
  font-family: var(--font-mincho);
  font-size: 1.375rem;
  font-weight: 800;
  color: var(--brand-12);
  white-space: nowrap;
}
html[data-top='new'] .billing-table tbody th[scope='row'] {
  color: var(--text-muted);
  font-weight: 500;
}
/* 申し込みの行：ボタンは列の幅いっぱい（4つの高さと幅をそろえる） */
html[data-top='new'] .billing-go-row th,
html[data-top='new'] .billing-go-row td {
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 0;
  vertical-align: middle;
}
html[data-top='new'] .billing-go-row td > .primary,
html[data-top='new'] .billing-go-row td > .secondary {
  width: 100%;
  --control-pad: var(--space-3);
}
html[data-top='new'] .billing-go-row td:has(> button) {
  padding-right: var(--space-3);
}
html[data-top='new'] .billing-now {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-h);
  border-radius: var(--radius-control);
  color: var(--text-mark);
  font-weight: 700;
}
html[data-top='new'] .billing-points-h {
  margin-top: var(--space-6);
}
html[data-top='new'] .billing-points {
  margin-top: 0;
  color: var(--text-muted);
  font-size: var(--fs-body);
  word-break: auto-phrase;
}
html[data-top='new'] .billing-page .billing-note {
  border-color: var(--line);
  background: var(--surface);
  border-left: 3px solid var(--gold);
}
/* お申し込みの確認：番号は金、金額は明朝 */
html[data-top='new'] .billing-terms > li h2 {
  padding-left: 0;
  border-left: 0;
  font-size: var(--fs-lead);
}
html[data-top='new'] .billing-terms > li h2::before {
  color: var(--text-mark);
}
html[data-top='new'] .billing-price {
  font-family: var(--font-mincho);
  font-weight: 800;
  color: var(--brand-12);
}
html[data-top='new'] .billing-confirm {
  border-top-color: var(--brand-12);
}
/* アカウント：表の頭は紺の線、ボタンの並びは1行に */
html[data-top='new'] .billing-who {
  margin-top: 0;
}
html[data-top='new'] .billing-usage > div:first-child {
  border-top-color: var(--line-strong);
}
html[data-top='new'] .billing-usage dd {
  color: var(--text);
  font-weight: 500;
}
/* 会員の種類の行：種類と、右に「料金を見る」 */
html[data-top='new'] .billing-kind {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 var(--space-2);
}
html[data-top='new'] .billing-kind .small-button {
  margin: calc((var(--control-sm-h) - var(--tap)) / 2) 0;
}
html[data-top='new'] .billing-account-page .billing-go {
  margin: var(--space-3) 0 var(--space-5);
}
html[data-top='new'] .billing-logout {
  border-top-color: var(--line-soft);
}
/* スマホ：表をやめ、段ごとのカードを縦に（billing.js の .billing-cards。中身は表と同じ行） */
.billing-cards {
  display: none;
}
/* 表をやめてカードにするのは、スマホの幅と、PC でも表が欄に入りきらないと測ったとき（billing.js fitPricing が
   .billing-cards-fit を付ける。2026-10-27 本番：窓の幅 1330px で Business の列が欄の右で切れていた） */
@media (max-width: 700px) {
  html[data-top='new'] .billing-pricing .doc-scroll {
    display: none;
  }
  html[data-top='new'] .billing-cards {
    display: grid;
    gap: var(--space-4);
  }
}
html[data-top='new'] .billing-pricing.billing-cards-fit .doc-scroll {
  display: none;
}
html[data-top='new'] .billing-pricing.billing-cards-fit .billing-cards {
  display: grid;
  gap: var(--space-4);
}
html[data-top='new'] .billing-card {
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-top: 3px solid var(--brand-12);
  border-radius: var(--radius-card);
  background: var(--surface);
}
html[data-top='new'] .billing-card-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0;
}
html[data-top='new'] .billing-card .billing-for {
  margin: 0;
}
html[data-top='new'] .billing-card .billing-role {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-1) 0 0;
  font-size: var(--fs-note);
}
html[data-top='new'] .billing-card .billing-soon {
  margin: 0;
}
html[data-top='new'] .billing-card-price {
  margin: var(--space-3) 0 var(--space-2);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--line-strong);
  font-size: var(--fs-body);
}
html[data-top='new'] .billing-card-price .billing-yen {
  font-size: 1.625rem;
}
html[data-top='new'] .billing-card-rows {
  margin: 0;
  font-size: var(--fs-note);
  line-height: 1.6;
}
html[data-top='new'] .billing-card-rows > div {
  display: grid;
  grid-template-columns: 9.5em minmax(0, 1fr);
  gap: var(--space-2);
  padding: 6px 0;
  border-bottom: 1px solid var(--line-soft);
}
html[data-top='new'] .billing-card-rows dt {
  color: var(--text-muted);
  word-break: auto-phrase;
}
html[data-top='new'] .billing-card-rows dd {
  margin: 0;
  word-break: auto-phrase;
}
html[data-top='new'] .billing-card-go {
  margin: var(--space-3) 0 0;
}
html[data-top='new'] .billing-card-go .primary,
html[data-top='new'] .billing-card-go .secondary {
  width: 100%;
}
html[data-top='new'] .billing-card-go .billing-now {
  min-height: 0;
  justify-content: flex-start;
}
/* 紹介の特典（referral.js）：「友達に贈る」は、ほかの欄（今期の残り）と同じ見出しと表。「友達から届いた紹介コード」は
   登録から48時間だけの欄なので、白に細い線の囲み（金の線は見出しだけ。二重にしない） */
.billing-gift {
  margin: var(--space-6) 0 var(--space-4);
}
.billing-gift-entry {
  margin: 0 0 var(--space-5);
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-3);
  background: var(--surface);
}
.billing-gift-entry > h2 {
  margin-top: 0;
}
.billing-gift-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-2) var(--space-3);
  margin: var(--space-3) 0 var(--space-2);
}
.billing-gift-form .field {
  flex: 1 1 16rem;
  margin: 0;
}
.billing-gift-form .field > span {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--text-muted);
  font-size: var(--fs-note);
}
.billing-gift-code {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
  margin: var(--space-3) 0 var(--space-2);
}
.billing-gift-value {
  display: grid;
  gap: 2px;
  margin: 0;
}
.billing-gift-value b {
  font-size: var(--fs-lead);
  letter-spacing: 0.04em;
  overflow-wrap: anywhere;
}
html[data-top='new'] .billing-gift-value b {
  font-family: var(--font-mincho);
  color: var(--brand-12);
}
@media (max-width: 560px) {
  .billing-gift-form .secondary,
  .billing-gift-code .secondary {
    width: 100%;
  }
}
/* カードの中のまとまりの見出し（壁打ちする・マーケ機能）：行ではなく見出しの形。明朝の太字、上に余白、下に濃い線 */
html[data-top='new'] .billing-card-rows > .billing-card-sec {
  /* 見出し（明朝・本文の大きさ）と「Pro で使えます」（小さい字）の字の並びをそろえる */
  align-items: baseline;
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-bottom: var(--line-weight) solid var(--line-strong);
}
html[data-top='new'] .billing-card-rows > .billing-card-sec dt {
  color: var(--text);
}
html[data-top='new'] .billing-card-rows > .billing-card-sec dd {
  color: var(--text-muted);
}

/* マスの中で1行に1つずつ並べる名前（マーケ機能の中身。billing.js cellHTML の lines）。「・」を行の終わりに残さない */
.billing-line {
  display: block;
}