@charset "UTF-8";
/* CORE Base お客様ポータル 共通スタイル
 * =============================================================================
 * ★ 見た目の正は製品サイト（/assets/redesign.css）。このファイルは「その上に載る
 *   ポータル固有の部品」だけを持つ。各 HTML は redesign.css → このファイルの順で読む。
 *
 *   なぜ製品サイトの CSS を実物で読むのか:
 *     ヘッダ（.header/.brand/.brand-lockup/.shell）とフッタ（.footer/.foot-links/
 *     .foot-by/.footer-legal）を「同じ見え方」ではなく「同じ実体」にするため。
 *     製品サイト側でロゴ寸法やヘッダ高さを直したとき、ポータルが勝手に追随する。
 *     コピーで持つと必ずずれる（＝別サービスに見える原因が再発する）。
 *
 *   旧テーマ（黒 #0b0b0e / 金 #d4af37）は全廃。--cbp-* は消さずに製品トークンの
 *   別名として再定義してある（下の :root）。理由は 2 つ:
 *     1) .cbp-* を書き出す JS（cbp-*.js）に一切手を入れずに色を載せ替えられる。
 *     2) 私が目視で辿れなかった経路に古い参照が残っていても、暗い色が出てこない。
 *   フォールバック値（var(--navy, #102b57) の第2引数）は、redesign.css が
 *   何らかの事情で落ちたときにポータルが読める状態で立ち上がるための保険。
 * ============================================================================= */

:root {
  /* --- 旧 --cbp-* は製品トークンの別名として生かす（安全網） --------------- */
  --cbp-bg: var(--soft, #f5f7f9);
  --cbp-bg2: var(--soft-blue, #edf4f9);
  --cbp-card: var(--paper, #ffffff);
  --cbp-line: var(--line, #dce3ea);
  --cbp-gold: var(--navy, #102b57);      /* 旧「金」＝強調色 → 製品のネイビー */
  --cbp-gold-dim: var(--line, #dce3ea);
  --cbp-text: var(--ink, #10213a);
  --cbp-muted: var(--body, #5a6a7e);
  --cbp-red: #9a2727;
  --cbp-green: #0e6f66;
  --cbp-blue: var(--blue-ink, #0e6c93);

  /* --- ポータル固有の状態色（製品パレットから作る） ----------------------- */
  --cbp-ok-bg: #eefaf8;
  --cbp-ok-ink: #0d5f58;
  --cbp-ok-line: #b8e3dd;
  --cbp-err-bg: #fdeeee;
  --cbp-err-ink: #9a2727;
  --cbp-err-line: #efc4c4;
  --cbp-warn-bg: #fdf8e9;
  --cbp-warn-ink: #7a5b12;
  --cbp-warn-line: #e8d79a;
}

/* 見出しセルなど「読み上げには要るが画面には出さない」文字 */
.cbp-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* redesign.css は本文リンクに色を持たない（.note a などで個別指定）。
   ポータルは本文中に素のリンクが出るので、ここで既定を与える。 */
.cbp-main a:not(.button):not(.cbp-btn):not(.cbp-navlink):not(.foot-links a),
.cbp-auth a:not(.button):not(.cbp-btn) {
  color: var(--blue-ink, #0e6c93);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* =============================================================================
   1. シェル（ヘッダ／サブナビ／本文／フッタ）
   ============================================================================= */

/* ヘッダは製品サイトの .header をそのまま使う。右側は静かな見出しラベルだけ。
   （製品サイトのグローバルナビはポータルには置かない。ポータル内の導線は下の
     サブナビに集約し、製品サイトへの導線はフッタに置く。） */
.cbp-header-tag { flex: none; }

/* 製品サイトの .header-inner は gap:28px の flex 1行。そこへポータルのバッジを
   足すと、320px（iPhone SE 第1世代など）でロゴ＋バッジが1行に収まらず、
   ページ全体が横スクロールする（製品サイト単体では起きない＝ポータルが持ち込む不具合）。
   360px 未満だけ折り返しを許し、バッジを次行へ落として本文の横あふれを止める。 */
@media (max-width: 359px) {
  .cbp-page .header-inner,
  .header .header-inner { flex-wrap: wrap; gap: 6px 12px; }
  .cbp-header-tag { font-size: 9.5px; letter-spacing: .06em; }
}

/* --- ポータル内ナビ（製品サイトのタブ表現に合わせる） --------------------- */
.cbp-subnav {
  position: sticky;
  top: 92px;                 /* .header の高さ */
  z-index: 55;
  border-bottom: 1px solid var(--line, #dce3ea);
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(14px);
}
.cbp-subnav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.cbp-navlist { display: flex; align-items: center; gap: 4px 22px; min-width: 0; }
.cbp-navlink {
  display: inline-flex;
  align-items: center;
  min-height: 54px;
  color: #43536a;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
}
.cbp-navlink:hover { color: var(--blue-ink, #0e6c93); }
/* 現在地の下線は製品サイトの .nav a[aria-current="page"] と同じ作法 */
.cbp-navlink.on,
.cbp-navlink[aria-current="page"] {
  color: var(--blue-ink, #0e6c93);
  box-shadow: inset 0 -2px 0 var(--blue, #08a6db);
}
.cbp-navside { display: flex; align-items: center; gap: 14px; min-width: 0; }
.cbp-who { display: grid; gap: 1px; text-align: right; min-width: 0; }
.cbp-who strong {
  display: block;
  color: var(--navy, #102b57);
  font-size: 12.5px;
  font-weight: 750;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cbp-who span {
  display: block;
  color: var(--body, #5a6a7e);
  font-size: 11px;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- 本文帯 ------------------------------------------------------------- */
.cbp-main { padding: clamp(30px, 4.5vw, 54px) 0 clamp(58px, 8vw, 96px); background: var(--soft, #f5f7f9); }
.cbp-stack { display: grid; gap: clamp(16px, 2.4vw, 26px); }

.cbp-pagehead { margin-bottom: clamp(20px, 3vw, 30px); }
.cbp-h1 {
  margin: 12px 0 12px;
  color: var(--navy, #102b57);
  font-size: clamp(27px, 3.1vw, 40px);
  line-height: 1.34;
  letter-spacing: -.035em;
  font-weight: 700;
  word-break: auto-phrase;
  text-wrap: pretty;
}
.cbp-lead { max-width: 46rem; margin: 0; color: var(--body, #5a6a7e); font-size: 14.5px; }

/* =============================================================================
   2. カード・見出し・文字
   ============================================================================= */
.cbp-card {
  padding: clamp(20px, 2.8vw, 32px);
  border: 1px solid var(--line, #dce3ea);
  border-top: 4px solid var(--cyan, #56cce9);
  background: var(--paper, #ffffff);
  box-shadow: 0 14px 34px rgba(23, 53, 87, .06);
  /* グリッド項目の既定 min-width は min-content。中の表の min-width が
     そのまま項目幅を押し上げ、横スクロール枠が効かなくなる（＝スマホで
     ページ全体が横にあふれ、同意文書のハッシュが画面外に切れる）。0 を明示。 */
  min-width: 0;
}
.cbp-card--plain { border-top-color: var(--line, #dce3ea); }
.cbp-card--act { border-top-color: var(--yellow, #f6c93c); }
.cbp-card--done { border-top-color: var(--teal, #3ac6bd); }

.cbp-card h2 {
  margin: 0 0 6px;
  color: var(--navy, #102b57);
  font-size: clamp(19px, 2vw, 24px);
  line-height: 1.45;
  letter-spacing: -.025em;
  font-weight: 730;
  word-break: auto-phrase;
  text-wrap: pretty;
}
.cbp-card h3 {
  margin: clamp(24px, 3vw, 34px) 0 8px;
  color: var(--navy, #102b57);
  font-size: 16px;
  font-weight: 750;
  letter-spacing: -.01em;
}
.cbp-card > h2 + .cbp-muted,
.cbp-card > h2 + .cbp-help { margin-top: 0; }
.cbp-card > :last-child { margin-bottom: 0; }

.cbp-muted, .cbp-help { color: var(--body, #5a6a7e); font-size: 13px; line-height: 1.85; }
.cbp-help { margin: 0 0 14px; }
.cbp-help:last-child { margin-bottom: 0; }
.cbp-strong { color: var(--ink, #10213a); font-weight: 750; }

/* =============================================================================
   3. ボタン（製品サイトの .button と同じ体系。角丸なし・ネイビー主／白地従）
   .cbp-btn / .cbp-btn-primary / .cbp-btn-sm の名前は JS が書き出すので温存する。
   ============================================================================= */
.cbp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 20px;
  border: 1px solid var(--navy, #102b57);
  border-radius: 0;
  background: var(--paper, #ffffff);
  color: var(--navy, #102b57);
  font: inherit;
  font-size: 13px;
  font-weight: 760;
  line-height: 1.2;
  letter-spacing: .01em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.cbp-btn:hover { background: var(--soft, #f5f7f9); color: var(--navy, #102b57); }
.cbp-btn-primary { border-color: var(--navy, #102b57); background: var(--navy, #102b57); color: #fff; }
.cbp-btn-primary:hover { background: #173b70; color: #fff; }
.cbp-btn-ghost { border-color: #bdc9d5; color: #43536a; }
.cbp-btn-ghost:hover { border-color: var(--navy, #102b57); color: var(--navy, #102b57); }
.cbp-btn-sm { min-height: 36px; padding: 0 13px; font-size: 12px; font-weight: 750; }
/* 無効状態でも文字は読めること。WCAG 1.4.3 は無効な部品を対象外にしているが、同意画面では
   「いま押せないボタンに何と書いてあるか」が手順の説明そのものなので 4.5:1 を満たす。 */
.cbp-btn[disabled] { border-color: #c6cfd9; background: #eef1f4; color: #5d6b7c; cursor: not-allowed; }
.cbp-btn-primary[disabled] { border-color: #c6cfd9; background: #dfe4ea; color: #56647a; }
.cbp-btn-block { width: 100%; min-height: 52px; font-size: 14px; }

/* 操作の主従を見せる並び。主ボタンが左、従が右。 */
.cbp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 18px; }
.cbp-actions--tight { margin-top: 12px; }

/* =============================================================================
   4. 状態表示（読込中・空・エラー）と通知
   ============================================================================= */
.cbp-state {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 20px 18px;
  border: 1px dashed var(--line, #dce3ea);
  background: var(--soft, #f5f7f9);
  color: var(--body, #5a6a7e);
  font-size: 13px;
  line-height: 1.8;
}
.cbp-state.is-loading::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  border: 2px solid #c3d3e2;
  border-top-color: var(--blue, #08a6db);
  border-radius: 50%;
  animation: cbp-spin .8s linear infinite;
}
@keyframes cbp-spin { to { transform: rotate(360deg); } }
.cbp-state.is-empty { border-style: solid; background: var(--paper, #ffffff); }
.cbp-state.is-empty::before {
  content: "";
  flex: none;
  width: 3px;
  align-self: stretch;
  background: var(--line, #dce3ea);
}
.cbp-state.is-error {
  border-style: solid;
  border-color: var(--cbp-err-line);
  background: var(--cbp-err-bg);
  color: var(--cbp-err-ink);
  font-weight: 700;
}
.cbp-state.is-error::before { content: ""; flex: none; width: 3px; align-self: stretch; background: var(--cbp-err-ink); }

/* 画面上部の通知。既定は非表示（JS が .ok / .err を足して出す）。 */
.cbp-msg { display: none; }
.cbp-msg.ok, .cbp-msg.err {
  display: block;
  margin: 0 0 clamp(16px, 2.4vw, 26px);
  padding: 15px 18px;
  border: 1px solid var(--cbp-ok-line);
  border-left-width: 4px;
  background: var(--cbp-ok-bg);
  color: var(--cbp-ok-ink);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.75;
}
.cbp-msg.err { border-color: var(--cbp-err-line); background: var(--cbp-err-bg); color: var(--cbp-err-ink); }

/* 補足の帯（製品サイトの .plan-note と同じ作法：左に 4px の色帯） */
.cbp-notice {
  margin: 16px 0 0;
  padding: 15px 18px;
  border-left: 4px solid var(--cyan, #56cce9);
  background: var(--soft-blue, #edf4f9);
  color: var(--body, #5a6a7e);
  font-size: 12.5px;
  line-height: 1.85;
}
.cbp-notice b, .cbp-notice strong { color: var(--ink, #10213a); font-weight: 750; }
.cbp-warn { border-left-color: var(--yellow, #f6c93c); background: var(--cbp-warn-bg); color: #40342a; }
.cbp-warn-ink { color: var(--cbp-warn-ink); font-weight: 750; }

/* =============================================================================
   5. 表（製品サイトの .tbl と同じ体系）
   ============================================================================= */
.cbp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.cbp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
table.cbp-table thead th {
  padding: 11px 14px;
  border-bottom: 1px solid var(--line, #dce3ea);
  background: var(--soft-blue, #edf4f9);
  color: var(--navy, #102b57);
  font-size: 12px;
  font-weight: 750;
  text-align: left;
  white-space: nowrap;
}
table.cbp-table tbody th {
  padding: 13px 14px 13px 0;
  border-bottom: 1px solid var(--line, #dce3ea);
  color: var(--navy, #102b57);
  font-size: 12.5px;
  font-weight: 750;
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
}
table.cbp-table td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--line, #dce3ea);
  color: var(--body, #5a6a7e);
  font-size: 13px;
  vertical-align: top;
}
table.cbp-table tbody tr:last-child th,
table.cbp-table tbody tr:last-child td { border-bottom: 0; }
table.cbp-table td .cbp-btn { white-space: nowrap; }

/* 一覧表（列が多い）。狭い画面では 1 行ずつのカードに畳む。 */
.cbp-table--list { min-width: 620px; }
/* 明細表（項目名｜値の 2 列）。★min-width を持たせない。
   ここに 560px などを効かせると、実機 390px で本文の SHA-256（64桁）が
   枠外に出て読めなくなる。同意の前提として全桁見えなければならない。 */
.cbp-table--kv { min-width: 0; }
.cbp-table--kv tbody th { width: 34%; }

/* 折り返すと読みにくい短い値（日付・文書番号・通番） */
.cbp-cell-nw { white-space: nowrap; }
/* 書類名のうしろの状態バッジは必ず改行して置く（行によって付いたり付かなかったりで
   行の高さがばらつくのを避ける） */
.cbp-table--list tbody td:first-child .cbp-badge { display: block; width: max-content; margin-top: 7px; }

.cbp-hash {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace;
  font-size: 12px;
  line-height: 1.7;
  color: var(--ink, #10213a);
  /* 64 桁を必ず折り返して全部見せる（切らない・省略しない） */
  word-break: break-all;
  overflow-wrap: anywhere;
}
td.cbp-hash { color: var(--ink, #10213a); }

/* =============================================================================
   6. バッジ
   ============================================================================= */
.cbp-badge {
  display: inline-block;
  padding: 3px 9px;
  border: 1px solid transparent;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  white-space: nowrap;
  vertical-align: 1px;
}
.cbp-badge-todo { border-color: var(--cbp-warn-line); background: var(--cbp-warn-bg); color: var(--cbp-warn-ink); }
.cbp-badge-done { border-color: var(--cbp-ok-line); background: var(--cbp-ok-bg); color: var(--cbp-ok-ink); }
.cbp-badge-info { border-color: #cfe3ef; background: var(--soft-blue, #edf4f9); color: var(--blue-ink, #0e6c93); }

/* =============================================================================
   7. 進行状況（申込 → 契約 → 提供開始）※製品サイトの .step-grid と同じ骨格
   ============================================================================= */
.cbp-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 16px;
  border-top: 1px solid var(--line, #dce3ea);
  border-bottom: 1px solid var(--line, #dce3ea);
}
.cbp-step { padding: 22px 24px; border-right: 1px solid var(--line, #dce3ea); }
.cbp-step:last-child { border-right: 0; }
.cbp-step .n { color: var(--body, #5a6a7e); font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.cbp-step .l { margin-top: 10px; color: var(--navy, #102b57); font-size: 19px; font-weight: 730; letter-spacing: -.02em; }
.cbp-step .a { margin-top: 6px; color: var(--body, #5a6a7e); font-size: 12.5px; }
.cbp-step.done { box-shadow: inset 0 3px 0 var(--teal, #3ac6bd); background: #f4fbfa; }
.cbp-step.done .n { color: var(--cbp-ok-ink); }
.cbp-step.current { box-shadow: inset 0 3px 0 var(--blue, #08a6db); background: var(--soft-blue, #edf4f9); }
.cbp-step.current .n { color: var(--blue-ink, #0e6c93); }

/* =============================================================================
   8. 書類ビューア／同意
   ============================================================================= */
.cbp-doc {
  height: min(62vh, 620px);
  overflow: hidden;
  border: 1px solid rgba(16, 43, 87, .18);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(23, 53, 87, .12);
}
.cbp-doc iframe { display: block; width: 100%; height: 100%; border: 0; background: #fff; }

.cbp-consent {
  margin-top: 14px;
  padding: clamp(16px, 2.4vw, 24px);
  border: 1px solid var(--line, #dce3ea);
  border-left: 4px solid var(--yellow, #f6c93c);
  background: var(--cbp-warn-bg);
}
.cbp-consent pre {
  margin: 0 0 14px;
  font: inherit;
  font-size: 13px;
  line-height: 1.9;
  color: #33291f;
  white-space: pre-wrap;
  word-break: break-word;
}
.cbp-check {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 12px 14px;
  border: 1px solid #e0d3ab;
  background: #fff;
  color: var(--ink, #10213a);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.7;
  cursor: pointer;
}
.cbp-check input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--navy, #102b57); }
.cbp-check input:disabled { cursor: not-allowed; }
.cbp-check:has(input:disabled) { color: #55657a; cursor: not-allowed; }

/* 本人確認の1行（ボタン＋コード欄） */
.cbp-otprow { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.cbp-otprow .cbp-field { min-width: 200px; margin: 0; }
/* コード欄と同じ高さに揃える（並ぶと段差が目立つ） */
.cbp-otprow > .cbp-btn { min-height: 49px; }

/* =============================================================================
   9. 入力（製品サイトのお問い合わせフォーム .cb-field と同じ形。白地版）
   ============================================================================= */
.cbp-field { display: grid; gap: 7px; margin: 0 0 16px; }
.cbp-field:last-child { margin-bottom: 0; }
.cbp-field label { color: var(--navy, #102b57); font-size: 12px; font-weight: 750; letter-spacing: .02em; }
.cbp-field input,
.cbp-field select,
.cbp-field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #c3cede;
  border-radius: 0;
  background: #fff;
  color: var(--ink, #10213a);
  font: inherit;
  font-size: 14px;
  line-height: 1.7;
}
.cbp-field textarea { min-height: 132px; resize: vertical; }
.cbp-field input::placeholder, .cbp-field textarea::placeholder { color: #8f9dae; }
.cbp-field input:focus, .cbp-field select:focus, .cbp-field textarea:focus {
  border-color: var(--blue, #08a6db);
  outline: 2px solid rgba(8, 166, 219, .28);
  outline-offset: 0;
}
.cbp-field input[disabled], .cbp-field textarea[disabled] { background: #eef1f4; color: #5d6b7c; cursor: not-allowed; }
.cbp-field .cbp-hint { color: var(--body, #5a6a7e); font-size: 11.5px; line-height: 1.7; }
.cbp-otp { font-size: 22px !important; letter-spacing: .42em; text-align: center; font-variant-numeric: tabular-nums; }

/* =============================================================================
   10. やり取り（吹き出し）
   ============================================================================= */
.cbp-thread {
  display: grid;
  gap: 14px;
  max-height: 56vh;
  overflow: auto;
  padding: 4px 4px 4px 0;
}
.cbp-bubble {
  max-width: 86%;
  padding: 13px 16px;
  border: 1px solid var(--line, #dce3ea);
  border-radius: 14px;
  background: var(--paper, #ffffff);
  font-size: 13.5px;
  line-height: 1.85;
}
.cbp-bubble .who { display: block; margin-bottom: 5px; color: var(--body, #5a6a7e); font-size: 11px; font-weight: 750; }
.cbp-bubble p { margin: 0; color: var(--ink, #10213a); white-space: pre-wrap; word-break: break-word; }
.cbp-bubble.lsh { justify-self: start; border-start-start-radius: 3px; background: var(--soft, #f5f7f9); }
.cbp-bubble.client {
  justify-self: end;
  border-color: #cfe3ef;
  border-end-end-radius: 3px;
  background: var(--soft-blue, #edf4f9);
}

/* =============================================================================
   11. ログイン／招待（製品サイトのヒーローと同じ空気の上に白いカードを置く）
   ============================================================================= */
.cbp-auth {
  padding: clamp(42px, 5.5vw, 78px) 0 clamp(56px, 7vw, 96px);
  background:
    radial-gradient(circle at 12% 24%, rgba(255, 255, 255, .85), transparent 22rem),
    radial-gradient(circle at 72% 35%, rgba(96, 218, 209, .28), transparent 28rem),
    linear-gradient(118deg, #e8fff3 0%, #dff9f7 48%, #dcefff 100%);
}
.cbp-auth-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  /* 1 行目を min-content に固定する。auto のままだと、2 行にまたがるカードの高さが
     両行へ配分され、見出しと箇条書きのあいだに空白の谷ができる。 */
  grid-template-rows: min-content 1fr;
  grid-template-areas: "head card" "list card";
  align-content: start;
  gap: clamp(26px, 4vw, 56px);
}
.cbp-auth-head { grid-area: head; }
.cbp-auth-list { grid-area: list; align-self: start; }
.cbp-auth-card { grid-area: card; align-self: start; }
.cbp-auth-grid--single {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto;
  grid-template-areas: "head" "card" "list";
  max-width: 640px;
}

.cbp-auth-head .cbp-h1 { margin-top: 14px; }
.cbp-auth-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(16, 43, 87, .16); }
.cbp-auth-list li {
  padding: 12px 0 12px 1.8em;
  border-bottom: 1px solid rgba(16, 43, 87, .12);
  color: #3c4c62;
  font-size: 13.5px;
  text-indent: -1.8em;
}
.cbp-auth-list li::before { content: "—"; display: inline-block; width: 1.8em; color: var(--blue, #08a6db); text-indent: 0; }
.cbp-auth-card { box-shadow: 0 24px 60px rgba(23, 53, 87, .14); }
.cbp-auth-card .cbp-h2 { margin-top: 0; }

/* =============================================================================
   13. お支払い（ご請求の一覧・内訳の確認）
   =============================================================================
   ★お金の画面なので、数字は等幅の桁そろえ（font-variant-numeric: tabular-nums）で出す。
     桁がずれると「いくら払うのか」を読み違える。
   ★二重価格を思わせる見せ方（打ち消し線・他の価格との比較表示）は作らない。 */
.cbp-pay-sum {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 26px;
  margin: 0 0 18px;
  padding: 18px 20px;
  border-left: 4px solid var(--navy, #102b57);
  background: var(--soft-blue, #edf4f9);
}
.cbp-pay-sum .l {
  color: var(--body, #5a6a7e);
  font-size: 11.5px;
  font-weight: 750;
  letter-spacing: .08em;
}
.cbp-pay-sum .v {
  color: var(--navy, #102b57);
  font-size: clamp(23px, 3vw, 29px);
  font-weight: 780;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.cbp-pay-sum .s { color: var(--body, #5a6a7e); font-size: 12.5px; }
.cbp-pay-sum .s b { color: var(--ink, #10213a); font-weight: 750; font-variant-numeric: tabular-nums; }

.cbp-amount {
  color: var(--ink, #10213a);
  font-size: 15px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cbp-amount-sub { display: block; margin-top: 3px; color: var(--body, #5a6a7e); font-size: 11.5px; font-weight: 600; }

.cbp-badge-pay { border-color: #cfe3ef; background: var(--soft-blue, #edf4f9); color: var(--blue-ink, #0e6c93); }
.cbp-badge-due { border-color: var(--cbp-warn-line); background: var(--cbp-warn-bg); color: var(--cbp-warn-ink); }

.cbp-pay-note { margin: 6px 0 0; color: var(--body, #5a6a7e); font-size: 11.5px; line-height: 1.75; }

/* --- 内訳の確認（お支払いの直前に必ず出す） ------------------------------- */
.cbp-modal {
  width: min(560px, calc(100vw - 32px));
  max-height: min(88vh, 900px);
  padding: 0;
  border: 1px solid var(--line, #dce3ea);
  background: var(--paper, #ffffff);
  color: var(--ink, #10213a);
  box-shadow: 0 30px 80px rgba(16, 43, 87, .26);
}
.cbp-modal::backdrop { background: rgba(11, 24, 44, .52); }
.cbp-modal-head {
  padding: 20px clamp(18px, 3vw, 26px) 14px;
  border-bottom: 1px solid var(--line, #dce3ea);
}
.cbp-modal-head h2 {
  margin: 0;
  color: var(--navy, #102b57);
  font-size: 19px;
  font-weight: 760;
  letter-spacing: -.02em;
}
.cbp-modal-head p { margin: 7px 0 0; color: var(--body, #5a6a7e); font-size: 12.5px; line-height: 1.8; }
.cbp-modal-body { padding: clamp(16px, 2.6vw, 22px) clamp(18px, 3vw, 26px); overflow-y: auto; }
.cbp-modal-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 16px clamp(18px, 3vw, 26px) 20px;
  border-top: 1px solid var(--line, #dce3ea);
  background: var(--soft, #f5f7f9);
}
.cbp-modal-foot .cbp-btn { flex: 1 1 200px; }

/* 内訳表（項目｜金額）。金額は右そろえ・桁そろえ。 */
table.cbp-break { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.cbp-break th {
  padding: 11px 0;
  border-bottom: 1px solid var(--line, #dce3ea);
  color: var(--body, #5a6a7e);
  font-size: 12.5px;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
}
table.cbp-break td {
  padding: 11px 0;
  border-bottom: 1px solid var(--line, #dce3ea);
  color: var(--ink, #10213a);
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
table.cbp-break tr.total th,
table.cbp-break tr.total td {
  border-bottom: 0;
  padding-top: 14px;
  color: var(--navy, #102b57);
  font-size: 17px;
  font-weight: 780;
}
table.cbp-break tr.total th { font-size: 13px; }
.cbp-methods { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.cbp-methods li {
  padding: 10px 13px;
  border: 1px solid var(--line, #dce3ea);
  background: var(--paper, #ffffff);
  color: var(--body, #5a6a7e);
  font-size: 12px;
  line-height: 1.7;
}
.cbp-methods li b { display: block; margin-bottom: 2px; color: var(--ink, #10213a); font-size: 13px; font-weight: 750; }

/* =============================================================================
   12. 幅ごとの調整
   ============================================================================= */
@media (max-width: 1080px) {
  /* 1 列に畳むときは、まず用件（フォーム）を出す。説明は下に回す。 */
  .cbp-auth-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas: "head" "card" "list";
  }
}

@media (max-width: 900px) {
  .cbp-steps { grid-template-columns: minmax(0, 1fr); }
  .cbp-step { border-right: 0; border-bottom: 1px solid var(--line, #dce3ea); }
  .cbp-step:last-child { border-bottom: 0; }
}

@media (max-width: 760px) {
  /* .header は 760px 以下で 76px。サブナビの貼り付き位置を合わせる。 */
  .cbp-subnav { top: 76px; }
  .cbp-subnav-inner { display: block; padding-block: 4px 8px; }
  .cbp-navlist {
    gap: 0 18px;
    overflow-x: auto;
    scrollbar-width: none;
    /* 端の見切れを出して「まだ続きがある」ことを見せる */
    padding-right: 8px;
  }
  .cbp-navlist::-webkit-scrollbar { display: none; }
  .cbp-navlink { min-height: 46px; }
  .cbp-navside {
    justify-content: space-between;
    gap: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--line, #dce3ea);
  }
  .cbp-who { text-align: left; }
  .cbp-header-tag { font-size: 10px; }
  .cbp-doc { height: 58vh; }
  .cbp-thread { max-height: none; }
  .cbp-bubble { max-width: 94%; }
  .cbp-actions .cbp-btn { flex: 1 1 auto; }
}

/* 一覧表は横スクロールで潰さない。ただし 599px 以下では 1 行 = 1 カードに畳む
   （製品サイト redesign.css の .tbl と同じ手法。thead を隠し td を data-l で見出す）。 */
@media (max-width: 599px) {
  .cbp-table--list { min-width: 0; }
  .cbp-table--list thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .cbp-table--list tbody tr {
    display: block;
    padding: 16px 0;
    border-bottom: 1px solid var(--line, #dce3ea);
  }
  .cbp-table--list tbody tr:last-child { border-bottom: 0; }
  .cbp-table--list tbody td { display: block; padding: 0; border: 0; }
  .cbp-table--list tbody td[data-l] { padding: 5px 0; }
  .cbp-table--list tbody td[data-l]::before {
    content: attr(data-l);
    display: block;
    margin-bottom: 2px;
    color: var(--body, #5a6a7e);
    font-size: 11px;
    font-weight: 750;
  }
  .cbp-table--list tbody td.cbp-cell-head {
    color: var(--navy, #102b57);
    font-size: 15px;
    font-weight: 750;
    letter-spacing: -.01em;
  }
  .cbp-table--list tbody td.cbp-cell-head::before { content: none; }
  .cbp-table--list tbody td.cbp-cell-act { margin-top: 10px; }
  .cbp-table--list tbody td.cbp-cell-act::before { content: none; }
  .cbp-table--list tbody td.cbp-cell-act .cbp-btn { width: 100%; }

  /* 明細表も 2 列を積む。SHA-256 は全幅を使って 64 桁を折り返す。 */
  .cbp-table--kv tbody tr { display: block; padding: 13px 0; border-bottom: 1px solid var(--line, #dce3ea); }
  .cbp-table--kv tbody tr:last-child { border-bottom: 0; }
  .cbp-table--kv tbody th,
  .cbp-table--kv tbody td { display: block; width: auto; padding: 0; border: 0; white-space: normal; }
  .cbp-table--kv tbody th { margin-bottom: 5px; color: var(--body, #5a6a7e); font-size: 11px; font-weight: 750; }
  .cbp-otprow .cbp-field { min-width: 0; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .cbp-state.is-loading::before { animation: none; }
}