@charset "utf-8";
/* ==========================================================================
   LP第3案 追加スタイル（lp.css の後に読む）。既存の語彙（紺グラデ帯・白の額装・
   黄色ピル・青の薄い列見出し）だけで組み、新しい色は足さない。
   inline style は使わない（本番CSPで禁止）。SVGの fill/stroke 属性は可。
   ========================================================================== */

/* ── 5つの悩み（台帳形式。カードにしない） ─────────────── */
.ledger{border-top:2px solid var(--navy);max-width:1000px;margin:0 auto}
.ledger-hd{display:none}
.ledger-row{display:grid;gap:8px;padding:20px 0;border-bottom:1px solid var(--rule);
  text-decoration:none;color:var(--tx)}
.ledger-row:hover .lg-tag{background:var(--yl);color:var(--navy)}
.ledger-row:hover .lg-q{color:var(--blue)}
.lg-no{font-family:var(--mt);font-weight:800;font-size:13px;color:var(--blue)}
.lg-q{font-size:16.5px;font-weight:900;line-height:1.6;letter-spacing:-.01em;color:var(--navy)}
.lg-a{font-size:14px;line-height:1.9;color:var(--mut)}
.lg-tag{display:inline-block;background:var(--blue-pale);color:var(--blue);font-weight:700;
  border-radius:6px;padding:4px 12px;font-size:13px;line-height:1.7;white-space:nowrap}
@media(min-width:860px){
  .ledger-hd{display:grid;grid-template-columns:26px 1.05fr 1.35fr 132px;gap:24px;
    padding:12px 0;font-size:12px;font-weight:700;color:var(--mut)}
  .ledger-row{grid-template-columns:26px 1.05fr 1.35fr 132px;gap:24px;align-items:start;padding:22px 0}
  .lg-q{font-size:16px}
}

/* ── 機能カード：額装の中に概念図カルーセル ──────────────── */
.fsec-lead{max-width:36em}
.fcard-shot.is-car{background:#fff;color:var(--tx)}
.ctabs{display:flex;flex-wrap:wrap;gap:6px;padding:10px 12px;background:#fff;border-bottom:1px solid var(--rule)}
.ctab{border:1px solid var(--rule);background:#fff;color:var(--mut);border-radius:999px;
  padding:5px 12px;font-size:12px;font-weight:700;cursor:pointer;font-family:var(--jp);line-height:1.5}
.ctab[aria-selected="true"]{background:var(--navy);color:#fff;border-color:var(--navy)}
.cbody{display:grid;grid-template-columns:minmax(0,1fr);padding:16px 16px 6px}
.slide{grid-area:1/1;min-width:0;visibility:hidden}
.slide.on{visibility:visible}
.slide-t{font-size:14px;font-weight:900;color:var(--navy);line-height:1.5;margin:0 0 8px}
.slide-cap{font-size:11.5px;line-height:1.65;color:var(--mut);margin:8px 0 0}
.slide svg{display:block;width:100%;height:auto}
.slide text{font-family:var(--jp);fill:var(--tx)}
.slide .lb{font-size:12px;fill:var(--mut)}
.slide .lb2{font-size:12.5px;fill:var(--navy);font-weight:500}
.slide .vv{font-size:13px;font-weight:700;fill:var(--navy)}
.slide .big{font-family:var(--mt);font-size:24px;font-weight:800;fill:var(--navy)}
.slide .ax{stroke:var(--rule);stroke-width:1}
.slide .grid{stroke:#EDF1F7;stroke-width:1}
.cfoot{display:flex;align-items:center;gap:10px;padding:8px 12px 12px;border-top:1px solid var(--rule)}
.cfoot .cnt{font-family:var(--mt);font-weight:700;font-size:12px;color:var(--mut);margin-left:auto}
.cbtn{width:32px;height:32px;border-radius:50%;border:1px solid var(--rule);background:#fff;
  color:var(--navy);font-size:16px;line-height:1;cursor:pointer;display:grid;place-items:center;font-family:var(--jp)}
.cbtn:hover{border-color:var(--navy)}
.fcard-shot.is-single .cfoot{display:none}
.scrollx{overflow-x:auto}

/* 概念図の中の表 */
.tbl{width:100%;border-collapse:collapse;font-size:12px;color:var(--tx)}
.tbl th{font-weight:700;color:var(--mut);text-align:left;font-size:11px;padding:6px 6px;
  border-bottom:1px solid var(--rule);white-space:nowrap;line-height:1.4}
.tbl td{padding:7px 6px;border-bottom:1px solid #EEF2F7;vertical-align:middle;white-space:nowrap;line-height:1.5}
.tbl td.n,.tbl th.n{font-family:var(--mt);font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.tbl td.n{color:var(--navy)}
.tbl .car-cell b{display:block;font-weight:700;color:var(--navy)}
.tbl .car-cell small{color:var(--mut);font-size:11px}
.tbl .next{font-size:11.5px;color:var(--tx);white-space:normal;min-width:8em;line-height:1.4}
.tbl .next em{font-style:normal;color:var(--blue);font-weight:700}
.tbl .pct{font-family:var(--mt);font-weight:800;font-size:15px;color:var(--navy)}
.tag{display:inline-block;border-radius:999px;padding:2px 10px;font-weight:700;font-size:11.5px;line-height:1.6}
.tag-ok{background:var(--blue-pale);color:var(--blue)}
.tag-ng{background:#F3F4F6;color:var(--dark)}
.tag-na{background:#FFF5CC;color:#7A5A00}
.tbl .me{background:var(--blue-pale)}
.tbl .dn{color:#C0392B}
.tbl .up{color:#1B7F4F}
.tbl .sub{display:block;font-size:10.5px;color:var(--mut);font-weight:400;font-family:var(--jp)}
.tbl td.c{text-align:center}
.tbl th.c{text-align:center}
.tbl .ind{color:var(--navy);font-weight:700}
.tbl .ind small{display:block;font-weight:400;color:var(--mut);font-size:10px;white-space:normal;line-height:1.4}
.tbl .memo{display:block;font-size:10.5px;color:var(--mut);line-height:1.4}
.tbl td small{font-size:10.5px;color:var(--mut);font-weight:400;font-family:var(--jp)}
.tbl .sumrow td{background:var(--surf);font-weight:700}
.tbl .sumrow td.n{color:var(--navy)}

/* KPIタイル（ダッシュボードの図） */
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.kpi{background:var(--surf);border-radius:8px;padding:10px 12px}
.kpi .l{font-size:11px;color:var(--mut)}
.kpi .v{font-family:var(--mt);font-size:22px;font-weight:800;color:var(--navy);line-height:1.2}
.kpi .v small{font-size:11px;font-weight:700;color:var(--mut);margin-left:2px;font-family:var(--jp)}
.kpi .d{font-size:11px;color:var(--mut);margin-top:2px}
.kpi .d b{font-family:var(--mt);color:#1B7F4F}
@media(max-width:480px){.kpis{grid-template-columns:repeat(2,1fr)}}

/* ── 額装の高さを5機能でそろえる ─────────────────────────
   図の縦幅がまちまちだと、並べたときに枠がガタついて安っぽく見える。
   PC幅では額装を 500px に固定し、中身（SVG・表・タイル）を残りの高さへ流し込む。
   SVGは全図 viewBox 560×300 に統一してあるので、どのタブでも同じ大きさで収まる。
   スマホ幅は1カラムで縦に積むため、固定はせず自然な高さに任せる。 */
@media(min-width:900px){
  .fcard-shot.is-car{display:flex;flex-direction:column;height:500px}
  .fcard-shot.is-car .shot-bar,.fcard-shot.is-car .ctabs,.fcard-shot.is-car .cfoot{flex:none}
  .cbody{flex:1 1 auto;min-height:0;grid-template-rows:minmax(0,1fr)}
  .slide{display:flex;flex-direction:column;min-height:0}
  .slide-t,.slide-cap{flex:none}
  /* 注記が1行でも2行でも図の大きさが変わらないように、高さを確保しておく */
  .slide-cap{min-height:36px}
  .slide svg{flex:1 1 0;min-height:0;width:100%;height:auto;align-self:stretch}
  .slide .scrollx{flex:1 1 0;min-height:0;overflow:auto}
  .slide .scrollx .tbl{height:100%}
  /* 枠を固定した中に表を収めるため、行の上下余白と行送りを詰める */
  .slide .tbl th{padding:5px 5px}
  .slide .tbl td{padding:5px 5px;line-height:1.4}
  .slide .tbl .car-cell small,.slide .tbl .memo{line-height:1.35}
  .slide .kpis{flex:1 1 0;min-height:0;grid-template-rows:repeat(3,minmax(0,1fr))}
  .slide .kpi{display:flex;flex-direction:column;justify-content:center}
}