/* 通信会社のシステム。style.css・flow.css・fm.css の上に重ねる（接頭辞 cr-） */
.cr-lead { margin: 0 0 10px; font-size: 13px; color: var(--ink2); max-width: 56em; }
.cr-lab { margin: 12px 0 6px; font-size: 12px; font-weight: 700; color: var(--muted); }
.cr-small { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
.cr-h3 { margin: 16px 0 6px; font-size: 14px; }
.cr-k { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 12px; font-weight: 700; color: var(--muted); }
.cr-panel { padding: 14px 16px; min-width: 0; position: sticky; top: 12px; }
.cr-panel h3 { margin: 6px 0 6px; font-size: 17px; }
.cr-panel > p { margin: 0 0 6px; font-size: 13.5px; color: var(--ink2); }
.cr-dl { margin: 8px 0 0; display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 6px 12px; font-size: 13.5px; }
.cr-dl dt { font-size: 12px; font-weight: 700; color: var(--muted); padding-top: 2px; }
.cr-dl dd { margin: 0; color: var(--ink2); }
.cr-judge { margin: 8px 0 0; font-size: 13px; font-weight: 700; border-radius: 8px; padding: 7px 10px; }
.cr-judge.ok { background: #f0fdf4; color: #14532d; }
.cr-judge.ng { background: #fef2f2; color: #7f1d1d; }
.cr-judge.mid { background: #fffbeb; color: #78350f; }
.cr-why { margin: 6px 0 0; font-size: 12.5px; color: var(--ink2); }
.cr-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.cr-cast small { display: block; margin-top: 2px; font-size: 12px; font-weight: 700; color: #0f766e; }

/* 層の印（BSS・OSS・網・窓口） */
.cr-ly { display: inline-block; font: 600 10.5px/1.6 var(--latin); border-radius: 5px; padding: 0 6px; margin-right: 6px; vertical-align: 1px; white-space: nowrap; }
.cr-ly.bss { background: #ccfbf1; color: #115e59; }
.cr-ly.oss { background: #ede9fe; color: #5b21b6; }
.cr-ly.net { background: #e2e8f0; color: #334155; }
.cr-ly.win { background: #fef3c7; color: #92400e; }
.cr-legend { margin: 10px 0 0; font-size: 12px; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.cr-legend .cr-ly { margin-right: 4px; }

/* 業務システムの全体: 9 つの箱を 1→2→3、3 の下の 4 から 4←5←6、6 の下の 7 から 7→8→9 と進む */
.cr-map { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 14px; align-items: start; margin-bottom: 6px; }
.cr-maph { margin: 0 0 6px; font-size: 12px; font-weight: 700; color: var(--muted); }
.cr-route + .cr-maph { margin-top: 14px; }
.cr-route { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 26px; }
.cr-route li { position: relative; min-width: 0; display: flex; }
.cr-route li:nth-child(4) { grid-row: 2; grid-column: 3; }
.cr-route li:nth-child(5) { grid-row: 2; grid-column: 2; }
.cr-route li:nth-child(6) { grid-row: 2; grid-column: 1; }
.cr-route li:nth-child(7) { grid-row: 3; grid-column: 1; }
.cr-route li:nth-child(8) { grid-row: 3; grid-column: 2; }
.cr-route li:nth-child(9) { grid-row: 3; grid-column: 3; }
.cr-route li::after { position: absolute; color: #94a3b8; font-weight: 700; }
.cr-route li:nth-child(1)::after, .cr-route li:nth-child(2)::after, .cr-route li:nth-child(7)::after, .cr-route li:nth-child(8)::after { content: "→"; right: -20px; top: 50%; transform: translateY(-50%); }
.cr-route li:nth-child(3)::after, .cr-route li:nth-child(6)::after { content: "↓"; left: 50%; bottom: -21px; transform: translateX(-50%); }
.cr-route li:nth-child(4)::after, .cr-route li:nth-child(5)::after { content: "←"; left: -20px; top: 50%; transform: translateY(-50%); }
.cr-side { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cr-node { appearance: none; width: 100%; font: inherit; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--line); background: var(--paper); border-radius: 12px; padding: 8px 11px; color: var(--ink); min-width: 0; }
.cr-node b { font-size: 13.5px; }
.cr-node small { font-size: 11.5px; color: var(--muted); }
.cr-node.side { border-style: dashed; }
.cr-node:hover { border-color: #94a3b8; }
.cr-node[aria-pressed="true"] { background: #0f172a; border-color: #0f172a; color: #fff; }
.cr-node[aria-pressed="true"] small { color: #cbd5e1; }
.cr-nhead { display: flex; align-items: center; gap: 0; }
.cr-nno { font: 600 11px/18px var(--latin); width: 18px; height: 18px; text-align: center; border-radius: 50%; background: var(--line2); color: var(--ink2); margin-right: 6px; flex: none; }
.cr-node[aria-pressed="true"] .cr-nno { background: #334155; color: #fff; }

/* 1 歩ずつ */
.cr-flow { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 14px; align-items: start; margin-top: 10px; }
.cr-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cr-step { appearance: none; width: 100%; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: center; text-align: left; font: inherit; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; cursor: pointer; }
.cr-step:hover { border-color: #94a3b8; }
.cr-step.on { border-color: #0d9488; background: #f0fdfa; }
.cr-sn { width: 26px; height: 26px; border-radius: 50%; background: var(--line2); color: var(--ink2); font: 600 12.5px/26px var(--latin); text-align: center; display: inline-block; flex: none; }
.cr-step.on .cr-sn, .cr-k .cr-sn { background: #0d9488; color: #fff; }
.cr-st { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; }
.cr-st b { font-size: 14px; }
.cr-st small { font-size: 12px; color: var(--muted); }
.cr-sys { margin: 6px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px; }
.cr-sys > span:first-child { font-size: 12px; font-weight: 700; color: var(--muted); margin-right: 2px; }
.cr-tag { display: inline-flex; align-items: center; background: #f8fafc; border: 1px solid var(--line); border-radius: 8px; padding: 2px 8px; color: var(--ink2); }
.cr-nav { display: flex; gap: 6px; margin-top: 12px; }
.cr-nav button { appearance: none; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 5px 13px; cursor: pointer; }
.cr-nav button[disabled] { color: #94a3b8; cursor: default; }

/* 本人確認の判定 */
.cr-kyc { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 14px; align-items: start; margin-bottom: 10px; }
.cr-kyccases { display: grid; gap: 6px; }
.cr-case { appearance: none; font: inherit; font-size: 13px; font-weight: 700; text-align: left; cursor: pointer; border: 1px solid var(--line); background: var(--paper); border-radius: 10px; padding: 8px 11px; color: var(--ink); display: flex; gap: 8px; align-items: baseline; }
.cr-case:hover { border-color: #94a3b8; }
.cr-case[aria-pressed="true"] { background: #0f172a; border-color: #0f172a; color: #fff; }
.cr-where { flex: none; font-size: 11px; font-weight: 700; border-radius: 6px; padding: 0 7px; background: #e0f2fe; color: #075985; }
.cr-case[aria-pressed="true"] .cr-where { background: #334155; color: #e2e8f0; }
.cr-kycout { padding: 14px 16px; min-width: 0; }
.cr-kycout h3 { margin: 6px 0 8px; font-size: 16px; }
.cr-periods { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cr-periods li { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }
.cr-periods li.ok { border-color: #86efac; background: #f7fef9; }
.cr-periods li.ng { border-color: #fca5a5; background: #fffafa; }
.cr-periods li.now { box-shadow: 0 0 0 2px #0d9488 inset; }
.cr-ph { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.cr-now { font-size: 11px; font-weight: 700; color: #fff; background: #0d9488; border-radius: 999px; padding: 0 8px; }
.cr-verd { margin: 4px 0 0; font-size: 13.5px; font-weight: 700; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.cr-periods li.ok .cr-verd { color: #14532d; }
.cr-periods li.ng .cr-verd { color: #7f1d1d; }
.cr-verd small { font-size: 12px; font-weight: 500; color: var(--muted); }
.cr-periods .srcl { margin-top: 4px; }

/* CDR の練習 */
.cr-cdrs { list-style: none; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cr-cdr { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 9px 12px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cr-cdr.ok { border-color: #86efac; }
.cr-cdr.ng { border-color: #fca5a5; }
.cr-cdrh { display: flex; align-items: center; gap: 8px; }
.cr-cdrh code, .cr-cdrd code, .cr-k code { font: 600 12px var(--latin); background: var(--line2); border-radius: 5px; padding: 0 5px; }
.cr-nol { font-size: 11px; font-weight: 700; color: var(--muted); }
.cr-cno { font: 600 11px/20px var(--latin); width: 20px; height: 20px; text-align: center; border-radius: 50%; background: var(--line2); color: var(--ink2); flex: none; }
.cr-kind { margin-left: auto; font-size: 11px; font-weight: 700; border-radius: 6px; padding: 0 8px; }
.cr-kind.voice { background: #dbeafe; color: #1e3a8a; }
.cr-kind.sms { background: #fce7f3; color: #831843; }
.cr-kind.data { background: #dcfce7; color: #14532d; }
.cr-cdrd { margin: 0; display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: 2px 8px; font-size: 12.5px; }
.cr-cdrd dt { font-size: 11.5px; font-weight: 700; color: var(--muted); }
.cr-cdrd dd { margin: 0; color: var(--ink2); overflow-wrap: anywhere; }
.cr-pick { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--muted); }
.cr-pick select, .cr-field select { font: inherit; font-size: 13.5px; color: var(--ink); background: #f8fafc; border: 1px solid #cbd5e1; border-radius: 9px; padding: 5px 8px; min-width: 0; cursor: pointer; }
.cr-pick select { flex: 1; }
.cr-res:empty { display: none; }
.cr-res .cr-judge { margin-top: 0; }
.cr-res .srcl { margin-top: 4px; }
.cr-cdrsum { padding: 12px 14px; }
.cr-cdrsum h3 { margin: 0 0 6px; font-size: 14px; }
.fm-table td.n, .fm-table th.n { text-align: right; font-family: var(--latin); white-space: nowrap; }

/* 1 か月の請求 */
.cr-bill { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 14px; align-items: start; margin-bottom: 10px; }
.cr-billin { padding: 12px 14px; margin: 0; min-width: 0; }
.cr-field { display: grid; gap: 4px; font-size: 12px; font-weight: 700; color: var(--muted); }
.cr-field select { font-size: 15px; font-weight: 500; }
.cr-base { margin: 0; padding-left: 1.2em; display: grid; gap: 2px; font-size: 12.5px; color: var(--ink2); }
.cr-events { display: grid; gap: 6px; }
.cr-ev { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; align-items: center; background: #f8fafc; border: 1px solid var(--line); border-radius: 10px; padding: 7px 10px; }
.cr-evon { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--ink); cursor: pointer; }
.cr-evon input { flex: none; width: 17px; height: 17px; margin: 1px 0 0; accent-color: #0d9488; cursor: pointer; }
.cr-evday { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--muted); }
.cr-evday input { font: inherit; font-size: 13.5px; color: var(--ink); background: var(--paper); border: 1px solid #cbd5e1; border-radius: 8px; padding: 4px 6px; min-width: 0; }
.cr-evday input:disabled { opacity: .45; }
.cr-rules { margin-top: 12px; font-size: 12.5px; color: var(--ink2); }
.cr-rules summary { cursor: pointer; font-weight: 700; color: var(--ink); }
.cr-rules ul { margin: 6px 0 0; padding-left: 1.2em; display: grid; gap: 3px; }
.cr-in { display: block; margin-top: 4px; }
.cr-billout { padding: 14px 16px; min-width: 0; }
.cr-invh { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; margin: 8px 0 0; padding: 0 0 8px; border-bottom: 1px solid var(--line); }
.cr-invh div { display: flex; flex-direction: column; gap: 1px; }
.cr-invh b { font-size: 14px; }
.cr-invh small { font-size: 11.5px; color: var(--muted); }
.cr-invr { text-align: right; }
.cr-total { margin: 10px 0 4px; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; background: #f0fdfa; border-radius: 10px; padding: 8px 12px; }
.cr-total small { font-size: 12px; font-weight: 700; color: #0f766e; }
.cr-total b { font: 700 22px var(--latin); color: #0f172a; }
.cr-invt th small { display: block; font-size: 11.5px; font-weight: 500; color: var(--muted); margin-top: 1px; }
.cr-invt th { font-weight: 700; }
.cr-invt tr.sub th, .cr-invt tr.sub td, .cr-depts tr.sub th, .cr-depts tr.sub td { background: #f8fafc; }
.cr-invt tr.tot th, .cr-invt tr.tot td { border-top: 2px solid var(--line); font-size: 14.5px; color: #1d4ed8; }
.cr-depts th { font-weight: 700; white-space: nowrap; }
.cr-depts thead th { white-space: normal; }
.cr-trace { margin: 0; padding-left: 1.2em; display: grid; gap: 3px; font-size: 12.5px; color: var(--ink2); overflow-wrap: anywhere; }

/* 料金表の版の練習 */
.cr-cat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.cr-catver { padding: 12px 14px; min-width: 0; }
.cr-catver h3 { margin: 0 0 6px; font-size: 14px; }
.cr-vert td, .cr-vert th { font-size: 12.5px; }
.cr-notes { margin: 8px 0 0; padding-left: 1.2em; display: grid; gap: 3px; font-size: 12.5px; color: var(--ink2); }
.cr-qs { display: grid; gap: 8px; }
.cr-q { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.cr-q > p:first-child { margin: 0; font-size: 13.5px; color: var(--ink); display: flex; gap: 8px; align-items: baseline; }
.cr-qn { font: 600 11px/20px var(--latin); width: 20px; height: 20px; text-align: center; border-radius: 50%; background: var(--line2); color: var(--ink2); flex: none; }
.cr-q.ok { border-color: #86efac; }
.cr-q.ng { border-color: #fca5a5; }
.cr-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.cr-opt { appearance: none; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; border: 1px solid var(--line); background: var(--paper); border-radius: 10px; padding: 6px 10px; color: var(--ink2); text-align: left; }
.cr-opt:hover { border-color: #94a3b8; }
.cr-opt[aria-pressed="true"] { background: #0f172a; border-color: #0f172a; color: #fff; }
.cr-fb { margin: 0; font-size: 12.5px; border-radius: 8px; padding: 6px 10px; background: var(--line2); color: var(--ink2); }
.cr-q.ok .cr-fb { background: #f0fdf4; color: #14532d; }
.cr-q.ng .cr-fb { background: #fef2f2; color: #7f1d1d; }
.cr-score { margin: 8px 0 0; font-size: 13px; font-weight: 700; color: var(--ink2); }
.cr-score:empty { display: none; }
.cr-sql { margin: 10px 0 0; background: #0f172a; color: #e2e8f0; border-radius: 10px; padding: 10px 12px; font: 500 12px/1.6 var(--latin); white-space: pre-wrap; overflow-wrap: anywhere; }

/* データの形 */
.cr-erd { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 14px; align-items: start; margin-bottom: 10px; }
.cr-ents { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.cr-ent { appearance: none; font: inherit; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 1px; border: 1px solid var(--line); background: var(--paper); border-radius: 10px; padding: 7px 10px; color: var(--ink); min-width: 0; }
.cr-ent b { font-size: 13px; }
.cr-ent small { font: 500 11px var(--latin); color: var(--muted); overflow-wrap: anywhere; }
.cr-ent:hover { border-color: #94a3b8; }
.cr-ent.rel { border-color: #5eead4; background: #f0fdfa; }
.cr-ent[aria-pressed="true"] { background: #0f172a; border-color: #0f172a; color: #fff; }
.cr-ent[aria-pressed="true"] small { color: #cbd5e1; }
.cr-entp { padding: 12px 14px; min-width: 0; }
.cr-entp h3 { margin: 6px 0 6px; font-size: 16px; }
.cr-cols { margin: 6px 0 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; font-size: 12.5px; }
.cr-cols dt { font: 600 12px var(--latin); color: var(--ink); overflow-wrap: anywhere; }
.cr-cols dd { margin: 0; color: var(--ink2); }
.cr-rel { margin: 10px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px; }
.cr-rel span { font-size: 12px; font-weight: 700; color: var(--muted); }
.cr-rel button { appearance: none; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; border: 1px solid #5eead4; background: #f0fdfa; color: #115e59; border-radius: 999px; padding: 3px 10px; }
.cr-rel button:hover { border-color: #0d9488; }
#crDataNotes { margin-top: 10px; }

.cr-node:focus-visible, .cr-step:focus-visible, .cr-nav button:focus-visible, .cr-case:focus-visible, .cr-opt:focus-visible, .cr-ent:focus-visible, .cr-rel button:focus-visible, .cr-pick select:focus-visible, .cr-field select:focus-visible, .cr-evon input:focus-visible, .cr-evday input:focus-visible, .cr-rules summary:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }

@media (max-width: 1100px) {
  .cr-map, .cr-flow, .cr-kyc, .cr-bill, .cr-cat, .cr-erd { grid-template-columns: minmax(0, 1fr); }
  .cr-panel { position: static; }
  .cr-cdrs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .cr-route { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .cr-route li:nth-child(n) { grid-row: auto; grid-column: auto; }
  .cr-route li:nth-child(n)::after { content: "↓"; right: auto; left: 50%; top: auto; bottom: -19px; transform: translateX(-50%); }
  .cr-route li:last-child::after { content: none; }
  .cr-side, .cr-ents { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cr-dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .cr-dl dd { margin-bottom: 6px; }
  .cr-cdrs { grid-template-columns: minmax(0, 1fr); }
  .cr-ev { grid-template-columns: minmax(0, 1fr); }
  .cr-invr { text-align: left; }
  .cr-total b { font-size: 19px; }
  .cr-depts th, .cr-depts td { padding: 6px 6px; }
  .cr-billout, .cr-panel, .cr-kycout { padding: 12px 12px; }
}