/* 支援実績のダッシュボード（results-v2）。DESIGN.md の --pp-* を使い、無いときは同じ値で補う */
.ppr {
  --ppr-deep: var(--pp-deep, #003d55);
  --ppr-ink: var(--pp-ink, #002c3d);
  --ppr-panel: var(--pp-panel, #2f5d78);
  --ppr-primary: var(--pp-primary, #54b2dc);
  --ppr-strong: var(--pp-primary-strong, #2e95c3);
  --ppr-action: var(--pp-action, #247599);
  --ppr-text: var(--pp-text, #18313b);
  --ppr-muted: var(--pp-muted, #5e7078);
  --ppr-bg: var(--pp-bg, #f7fbfe);
  --ppr-surface: var(--pp-surface, #fff);
  --ppr-soft: var(--pp-surface-soft, #eef7fc);
  --ppr-border: var(--pp-border, #cfe4ef);
  --ppr-font: var(--pp-font-body, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif);
  --ppr-raised: var(--pp-shadow-raised, 0 18px 40px rgba(0, 44, 61, .16));
  --ppr-card: var(--pp-card-shadow, 0 1px 2px rgba(0, 44, 61, .06));
  --ppr-quick: var(--pp-duration-quick, 180ms);
  --ppr-med: .5s;
  --ppr-slow: .6s;
  --ppr-enter: .35s;
  --ppr-focus: var(--pp-focus-ring, 0 0 0 3px rgba(46, 149, 195, .45));
  --ppr-gap: 20px;
  position: relative;
  font-family: var(--ppr-font);
  color: var(--ppr-text);
  background: var(--ppr-bg);
  line-height: 1.7;
  font-size: 16px;
}
.ppr *, .ppr *::before, .ppr *::after { box-sizing: border-box; }
:where(.ppr) button { font: inherit; color: inherit; }
.ppr :focus-visible { outline: none; box-shadow: var(--ppr-focus); }
.ppr-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ppr-wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; }

/* 数の帯 */
.ppr-hero { position: relative; overflow: hidden; color: #fff; background: linear-gradient(120deg, var(--ppr-deep) 0%, var(--ppr-ink) 100%); }
.ppr-hero-net { position: absolute; inset: -40px; width: calc(100% + 80px); height: calc(100% + 80px); opacity: .32; pointer-events: none; }
.ppr-hero-net g { animation: ppr-drift 38s ease-in-out infinite alternate; transform-origin: 50% 50%; }
@keyframes ppr-drift { from { transform: translate(-18px, -10px) rotate(-1deg); } to { transform: translate(18px, 12px) rotate(1.2deg); } }
.ppr-hero-in { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 32px; align-items: end; padding-top: 40px; padding-bottom: 32px; }
.ppr-eyebrow { display: flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 700; letter-spacing: .22em; color: #9fd3ea; }
.ppr-eyebrow::after { content: ""; width: 48px; height: 1px; background: var(--ppr-primary); }
.ppr-kpis { display: flex; flex-wrap: wrap; gap: 20px 48px; margin-top: 14px; }
.ppr-kpi b { display: block; white-space: nowrap; font-size: 72px; line-height: 1; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ppr-kpi b small { font-size: 18px; font-weight: 700; margin-left: 8px; letter-spacing: 0; color: #d6edf7; }
.ppr-kpi b span { font: inherit; color: #fff; }
.ppr-kpi > span { display: block; margin-top: 10px; font-size: 14px; font-weight: 700; color: #d6edf7; }
.ppr-scope { margin-top: 18px; font-size: 13px; color: #b9dcec; min-height: 1.7em; }
.ppr-ribbon { display: block; width: 100%; height: 150px; }
.ppr-ribbon .ax { fill: #9fd3ea; font-size: 11px; }
.ppr-ribbon .ttl { fill: #d6edf7; font-size: 12px; font-weight: 700; letter-spacing: .06em; }
.ppr-ribbon .end { fill: #fff; font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
/* 公開ページの数の帯はライト（DESIGN.md 2.2: 本文域はライト）。上のページ見出しと下の白いカードにそろえ、紺の地と網の動きを使わない。
   数字は控えめに 36px（4.2 の「大きな数値 48–64px」より小さい。本人指示 10/16。下のカードの円グラフ中央の数と同じ大きさ）。
   社内向け（.ppr-internal）は従来のまま。折れ線の色は results-v2.js が属性で付けるので、属性で選んで上書きする（.ppr-internal と同じやり方） */
.ppr:not(.ppr-internal) .ppr-hero { color: var(--ppr-deep); background: transparent; border-bottom: 1px solid var(--ppr-border); }
.ppr:not(.ppr-internal) .ppr-hero-net { display: none; }
.ppr:not(.ppr-internal) .ppr-hero-in { padding-top: 22px; padding-bottom: 18px; align-items: center; }
.ppr:not(.ppr-internal) .ppr-eyebrow { color: var(--ppr-action); }
.ppr:not(.ppr-internal) .ppr-kpis { gap: 8px 36px; margin-top: 8px; }
.ppr:not(.ppr-internal) .ppr-kpi b { font-size: 36px; font-weight: 700; letter-spacing: 0; color: var(--ppr-strong); }
.ppr:not(.ppr-internal) .ppr-kpi b span { color: var(--ppr-strong); }
.ppr:not(.ppr-internal) .ppr-kpi b small { font-size: 14px; margin-left: 4px; color: var(--ppr-deep); }
.ppr:not(.ppr-internal) .ppr-kpi > span { margin-top: 4px; font-size: 13px; color: var(--ppr-deep); }
.ppr:not(.ppr-internal) .ppr-scope { margin-top: 8px; font-size: 12px; color: var(--ppr-muted); }
.ppr:not(.ppr-internal) .ppr-ribbon { height: 100px; }
.ppr:not(.ppr-internal) .ppr-ribbon .ax { fill: var(--ppr-muted); }
.ppr:not(.ppr-internal) .ppr-ribbon .ttl { fill: var(--ppr-deep); }
.ppr:not(.ppr-internal) .ppr-ribbon .end { fill: var(--ppr-deep); font-size: 13px; font-weight: 700; }
.ppr:not(.ppr-internal) .ppr-ribbon path[fill="#54b2dc"] { fill: var(--ppr-strong); fill-opacity: .1; }
.ppr:not(.ppr-internal) .ppr-ribbon path[stroke="#9fd3ea"] { stroke: var(--ppr-strong); stroke-width: 1.6; }
.ppr:not(.ppr-internal) .ppr-ribbon path[stroke="#fff"] { stroke: var(--ppr-deep); stroke-width: 2.4; }
.ppr:not(.ppr-internal) .ppr-ribbon circle[fill="#fff"] { fill: var(--ppr-deep); r: 3.5px; }

/* 検索の帯 */
.ppr-bar { position: sticky; top: 0; z-index: 20; background: rgba(247, 251, 254, .94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--ppr-border); }
.ppr-bar-in { display: flex; gap: 12px; align-items: center; padding-top: 14px; padding-bottom: 14px; }
.ppr-search { position: relative; flex: 1; }
.ppr-search svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; stroke: var(--ppr-muted); fill: none; stroke-width: 2; }
.ppr-search input { width: 100%; height: 52px; border: 1px solid var(--ppr-border); background: var(--ppr-surface); padding: 0 44px 0 48px; font: inherit; font-size: 16px; color: var(--ppr-text); border-radius: 0; transition: border-color var(--ppr-quick); }
.ppr-search input:hover { border-color: var(--ppr-strong); }
.ppr-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.ppr-search input:focus { outline: none; border-color: var(--ppr-strong); box-shadow: var(--ppr-focus); }
.ppr-clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border: 0; background: transparent; cursor: pointer; color: var(--ppr-muted); font-size: 20px; line-height: 1; }
.ppr-suggest { position: absolute; left: 0; right: 0; top: calc(100% + 6px); background: var(--ppr-surface); box-shadow: var(--ppr-raised); border: 1px solid var(--ppr-border); list-style: none; margin: 0; padding: 6px 0; max-height: 360px; overflow: auto; z-index: 30; }
.ppr-suggest li { display: flex; align-items: center; gap: 10px; padding: 9px 16px; cursor: pointer; font-size: 14px; }
.ppr-suggest li[aria-selected="true"], .ppr-suggest li:hover { background: var(--ppr-soft); }
.ppr-suggest .k { font-size: 11px; font-weight: 700; color: var(--ppr-strong); min-width: 64px; letter-spacing: .04em; }
.ppr-suggest .n { margin-left: auto; font-size: 12px; color: var(--ppr-muted); font-variant-numeric: tabular-nums; }
.ppr-btn { display: inline-flex; align-items: center; gap: 8px; height: 52px; padding: 0 20px; border: 1px solid var(--ppr-deep); background: var(--ppr-surface); color: var(--ppr-deep); font-weight: 700; font-size: 15px; cursor: pointer; border-radius: 0; transition: background var(--ppr-quick), color var(--ppr-quick); white-space: nowrap; }
.ppr-btn:hover { background: var(--ppr-soft); }
.ppr-btn[aria-expanded="true"] { background: var(--ppr-deep); color: #fff; }
.ppr-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }
.ppr-badge { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--ppr-strong); color: #fff; font-size: 12px; }
.ppr-icon { width: 52px; padding: 0; justify-content: center; }

/* 絞り込みの板 */
.ppr-drawer { background: var(--ppr-surface); border-bottom: 1px solid var(--ppr-border); box-shadow: var(--ppr-raised); }
.ppr-drawer[hidden] { display: none; }
.ppr-drawer-in { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 40px; padding-top: 20px; padding-bottom: 8px; }
.ppr-fs { border: 0; margin: 0 0 14px; padding: 0; min-width: 0; }
.ppr-fs legend { font-size: 13px; font-weight: 700; color: var(--ppr-deep); margin-bottom: 8px; padding: 0; }
.ppr-fs.wide { grid-column: 1 / -1; }
.ppr-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ppr-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 6px 14px; border: 1px solid var(--ppr-border); border-radius: 999px; background: var(--ppr-surface); cursor: pointer; font-size: 14px; color: var(--ppr-text); transition: border-color var(--ppr-quick), background var(--ppr-quick); }
.ppr-chip:hover { border-color: var(--ppr-strong); }
.ppr-chip[aria-pressed="true"] { background: var(--ppr-panel); border-color: var(--ppr-panel); color: #fff; }
.ppr-chip .n { font-size: 12px; color: var(--ppr-muted); font-variant-numeric: tabular-nums; }
.ppr-chip[aria-pressed="true"] .n { color: #d6edf7; }
.ppr-chip[disabled] { opacity: .45; cursor: default; }
.ppr-chip i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.ppr-sub { font-size: 12px; color: var(--ppr-muted); margin: 10px 0 6px; }
.ppr-range { position: relative; height: 38px; }
.ppr-range input { position: absolute; left: 0; right: 0; width: 100%; top: 8px; pointer-events: none; appearance: none; background: transparent; margin: 0; }
.ppr-range input::-webkit-slider-thumb { pointer-events: auto; appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--ppr-surface); border: 3px solid var(--ppr-panel); cursor: pointer; }
.ppr-range input::-moz-range-thumb { pointer-events: auto; width: 16px; height: 16px; border-radius: 50%; background: var(--ppr-surface); border: 3px solid var(--ppr-panel); cursor: pointer; }
.ppr-range .track { position: absolute; left: 0; right: 0; top: 18px; height: 4px; background: var(--ppr-border); }
.ppr-range .fill { position: absolute; top: 18px; height: 4px; background: var(--ppr-panel); }
.ppr-range-lbl { display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; color: var(--ppr-deep); }
.ppr-drawer-foot { display: flex; justify-content: flex-end; gap: 12px; padding: 12px 24px 20px; max-width: 1240px; margin: 0 auto; }
.ppr-primary { background: var(--ppr-deep); color: #fff; border-color: var(--ppr-deep); }
.ppr-primary:hover { background: var(--ppr-ink); }
.ppr-scrim { display: none; }

/* 選んだ条件 */
.ppr-active { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-height: 0; padding-top: 16px; }
.ppr-active:empty { padding-top: 0; }
.ppr-pill { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 8px 0 14px; border-radius: 999px; background: var(--ppr-panel); color: #fff; border: 0; cursor: pointer; font-size: 13px; animation: ppr-in var(--ppr-quick) ease-out; }
.ppr-pill span { opacity: .8; }
.ppr-pill svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2.4; fill: none; }
.ppr-link { border: 0; background: transparent; color: var(--ppr-deep); text-decoration: underline; cursor: pointer; font-size: 13px; padding: 4px 6px; }
.ppr-link:hover { color: var(--ppr-action); }
@keyframes ppr-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* グラフ */
.ppr-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "c1 c2 c2" "c3 c4 c5" "c6 c6 c6"; gap: var(--ppr-gap); padding-top: 24px; }
.ppr-card { position: relative; background: var(--ppr-surface); border: 1px solid var(--ppr-border); box-shadow: var(--ppr-card); padding: 20px 22px 18px; min-width: 0; }
.ppr-card::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 3px; background: var(--ppr-primary); transform: scaleX(.18); transform-origin: left; transition: transform var(--ppr-med) cubic-bezier(.2, .7, .2, 1); }
.ppr-card:hover::before { transform: scaleX(1); }
.ppr-card h3 { display: flex; align-items: baseline; gap: 10px; margin: 0 0 4px; font-size: 16px; font-weight: 700; color: var(--ppr-deep); }
.ppr-card h3 em { font-style: normal; font-size: 12px; font-weight: 800; letter-spacing: .12em; color: var(--ppr-strong); }
.ppr-hint { font-size: 12px; color: var(--ppr-muted); margin: 0 0 8px; }
.ppr-c1 { grid-area: c1; } .ppr-c2 { grid-area: c2; } .ppr-c3 { grid-area: c3; } .ppr-c4 { grid-area: c4; } .ppr-c5 { grid-area: c5; } .ppr-c6 { grid-area: c6; }
.ppr-svg { display: block; width: 100%; height: auto; overflow: visible; }
.ppr-c3 .ppr-svg { max-width: 380px; margin: 0 auto; }
.ppr-c5 .ppr-svg { max-width: 460px; margin: 0 auto; }
.ppr-svg .hit { cursor: pointer; transition: opacity var(--ppr-quick); }
.ppr-svg .hit:focus-visible { outline: none; filter: drop-shadow(0 0 3px rgba(46, 149, 195, .9)); }
.ppr-svg text { font-family: var(--ppr-font); }

.ppr-donut { position: relative; max-width: 280px; margin: 4px auto 0; }
.ppr-donut-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; text-align: center; }
.ppr-donut-c b { font-size: 34px; line-height: 1.1; font-weight: 800; color: var(--ppr-deep); font-variant-numeric: tabular-nums; }
.ppr-donut-c span { font-size: 12px; color: var(--ppr-muted); max-width: 120px; }
.ppr-legend { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 14px; }
.ppr-legend button { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: transparent; padding: 4px 2px; cursor: pointer; font-size: 13px; color: var(--ppr-text); text-align: left; transition: opacity var(--ppr-quick); }
.ppr-legend button[data-dim="true"] { opacity: .4; }
.ppr-legend button[aria-pressed="true"] { font-weight: 700; }
.ppr-legend i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.ppr-legend b { margin-left: auto; font-weight: 400; color: var(--ppr-muted); font-variant-numeric: tabular-nums; }

.ppr-trend .grid line { stroke: var(--ppr-border); }
.ppr-trend .ax { font-size: 11px; fill: var(--ppr-muted); }
.ppr-trend .layer { transition: opacity var(--ppr-quick); }
.ppr-trend .shade { fill: var(--ppr-bg); opacity: .78; pointer-events: none; }
.ppr-trend .brush { fill: var(--ppr-strong); opacity: .14; pointer-events: none; }
.ppr-trend .guide { stroke: var(--ppr-deep); stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; }
.ppr-trend .cap { cursor: crosshair; }

.ppr-bars { list-style: none; margin: 6px 0 0; padding: 0; }
.ppr-bars button { display: grid; grid-template-columns: 96px minmax(0, 1fr) 44px; align-items: center; gap: 10px; width: 100%; border: 0; background: transparent; padding: 5px 0; cursor: pointer; font-size: 13px; color: var(--ppr-text); text-align: left; }
.ppr-bars button[disabled] { cursor: default; }
.ppr-bars .t { position: relative; display: flex; height: 16px; background: var(--ppr-soft); overflow: hidden; }
.ppr-bars .sg { display: block; height: 100%; width: 0; flex: none; box-shadow: inset -1px 0 0 rgba(255, 255, 255, .85); transition: width var(--ppr-slow) cubic-bezier(.2, .7, .2, 1), opacity var(--ppr-quick); }
.ppr-bars button:hover .t { box-shadow: 0 0 0 2px var(--ppr-border); }
.ppr-bars button[aria-pressed="true"] .t { box-shadow: 0 0 0 2px var(--ppr-panel); }
.ppr-bars button[aria-pressed="true"] { font-weight: 700; }
.ppr-bars .n { text-align: right; color: var(--ppr-muted); font-variant-numeric: tabular-nums; }

.ppr-bub-legend { display: flex; gap: 14px; font-size: 12px; color: var(--ppr-muted); margin-top: 4px; }
.ppr-bub-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: 0; }

.ppr-heat { overflow-x: auto; }
.ppr-heat table { border-collapse: separate; border-spacing: 3px; width: 100%; min-width: 760px; table-layout: fixed; }
.ppr-heat col.h { width: 118px; }
.ppr-heat th { font-size: 12px; font-weight: 700; color: var(--ppr-deep); padding: 4px 6px; white-space: nowrap; }
.ppr-heat thead th { text-align: center; vertical-align: bottom; height: 40px; padding: 4px 1px; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.02em; }
.ppr-heat tbody th { text-align: left; }
.ppr-heat tbody th i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; }
.ppr-heat td { padding: 0; }
.ppr-heat td button { width: 100%; height: 38px; border: 0; cursor: pointer; font-size: 12px; font-variant-numeric: tabular-nums; transition: transform var(--ppr-quick), background var(--ppr-med); border-radius: 0; }
.ppr-heat td button:hover { transform: scale(1.06); position: relative; z-index: 1; }
.ppr-heat td button[aria-pressed="true"] { box-shadow: inset 0 0 0 3px var(--ppr-primary); }
.ppr-heat td button[disabled] { cursor: default; }
.ppr-heat-scale { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--ppr-muted); margin-top: 8px; justify-content: flex-end; }
.ppr-heat-more { display: none; font-size: 12px; color: var(--ppr-muted); margin: 0 0 6px; }
.ppr-heat-scale span { width: 120px; height: 8px; background: linear-gradient(90deg, #eef7fc, #54b2dc, #003d55); }

/* テーマ（c5）・業界 × サービス種（c6）を出さないときの並び */
.ppr.ppr-no-c5.ppr-no-c6 .ppr-grid { grid-template-areas: "c1 c2 c2" "c3 c4 c4"; }
.ppr.ppr-no-c5:not(.ppr-no-c6) .ppr-grid { grid-template-areas: "c1 c2 c2" "c3 c4 c4" "c6 c6 c6"; }
.ppr.ppr-no-c6:not(.ppr-no-c5) .ppr-grid { grid-template-areas: "c1 c2 c2" "c3 c4 c5"; }
.ppr.ppr-nosticky .ppr-bar { position: static; }

/* 一覧 */
.ppr-list-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 40px; padding-bottom: 12px; border-bottom: 2px solid var(--ppr-deep); }
.ppr-list-h h2 { margin: 0; font-size: 24px; font-weight: 800; color: var(--ppr-deep); }
.ppr-list-h h2 span { font-size: 15px; font-weight: 700; color: var(--ppr-muted); margin-left: 10px; font-variant-numeric: tabular-nums; }
.ppr-list-tools { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.ppr-list-tools select { height: 38px; border: 1px solid var(--ppr-border); background: var(--ppr-surface); font: inherit; font-size: 13px; padding: 0 10px; border-radius: 0; color: var(--ppr-text); }
.ppr-items { list-style: none; margin: 0; padding: 0; }
.ppr-item { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 20px; padding: 20px 8px; border-bottom: 1px solid var(--ppr-border); transition: background var(--ppr-quick); animation: ppr-in var(--ppr-enter) ease-out both; }
.ppr-item:hover { background: var(--ppr-surface); }
.ppr-item .y { font-size: 30px; font-weight: 800; line-height: 1; color: var(--ppr-strong); font-variant-numeric: tabular-nums; }
.ppr-item .m { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 13px; color: var(--ppr-muted); }
.ppr-item .m i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-right: -6px; }
.ppr-item .rg { font-size: 12px; font-weight: 700; color: var(--ppr-deep); border: 1px solid var(--ppr-border); padding: 0 8px; background: var(--ppr-soft); }
.ppr-item h4 { margin: 4px 0 0; font-size: 17px; font-weight: 700; color: var(--ppr-text); }
.ppr-item mark { background: rgba(84, 178, 220, .28); color: inherit; padding: 0 1px; }
.ppr-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ppr-tag { border: 1px solid var(--ppr-border); background: transparent; border-radius: 999px; padding: 1px 10px; font-size: 12px; color: var(--ppr-muted); cursor: pointer; transition: border-color var(--ppr-quick), color var(--ppr-quick); }
.ppr-tag:hover { border-color: var(--ppr-strong); color: var(--ppr-deep); }
.ppr-tag[aria-pressed="true"] { background: var(--ppr-panel); border-color: var(--ppr-panel); color: #fff; }
.ppr-more { display: flex; justify-content: center; padding: 28px 0 8px; }
.ppr-empty { text-align: center; padding: 56px 16px; color: var(--ppr-muted); }
.ppr-empty b { display: block; font-size: 18px; color: var(--ppr-deep); margin-bottom: 6px; }
.ppr-table-wrap { overflow-x: auto; }
.ppr-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 760px; }
.ppr-table th { background: var(--ppr-soft); text-align: left; padding: 12px 14px; font-size: 13px; color: var(--ppr-deep); white-space: nowrap; }
.ppr-table th button { border: 0; background: transparent; font-weight: 700; cursor: pointer; padding: 0; color: inherit; }
.ppr-table td { padding: 12px 14px; border-bottom: 1px solid var(--ppr-border); vertical-align: top; }
.ppr-trend-note { font-size: 12px; color: var(--ppr-muted); margin: 4px 0 0; }
.ppr-note { font-size: 12px; color: var(--ppr-muted); padding: 24px 0 48px; }

.ppr-tip { position: absolute; z-index: 40; pointer-events: none; background: var(--ppr-ink); color: #fff; font-size: 12px; line-height: 1.6; padding: 8px 12px; box-shadow: var(--ppr-raised); max-width: 260px; opacity: 0; transform: translateY(4px); transition: opacity .12s, transform .12s; }
.ppr-tip[data-on="true"] { opacity: 1; transform: none; }
.ppr-tip b { font-size: 14px; }
.ppr-tip .row { display: flex; align-items: center; gap: 6px; }
.ppr-tip .row i { width: 8px; height: 8px; border-radius: 50%; }
.ppr-tip .row em { margin-left: auto; font-style: normal; font-variant-numeric: tabular-nums; padding-left: 12px; }
.ppr-toast { position: fixed; left: 50%; bottom: 32px; transform: translate(-50%, 16px); background: var(--ppr-ink); color: #fff; padding: 10px 18px; font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 60; }
.ppr-toast[data-on="true"] { opacity: 1; transform: translate(-50%, 0); }

/* 幅ごと */
/* 内部用（Banto の「実績（内部用）」だけ）。サイトの青と見分けがつくよう、濃い灰色と琥珀色 */
.ppr.ppr-internal { --ppr-int: #f0b54a; --ppr-int-ink: #6b4500; }
.ppr-int-bar { padding: 8px 24px; font-size: 13px; font-weight: 700; color: var(--ppr-int-ink); background: repeating-linear-gradient(135deg, #fff4dc 0 12px, #ffecc4 12px 24px); border-bottom: 1px solid #f3d38f; }
.ppr.ppr-internal .ppr-hero { background: linear-gradient(120deg, #1f2329 0%, #3a3f47 100%); }
.ppr.ppr-internal .ppr-eyebrow { color: var(--ppr-int); }
.ppr.ppr-internal .ppr-eyebrow::after { background: var(--ppr-int); }
.ppr-int-badge { display: inline-block; margin-left: 8px; padding: 1px 10px; border: 1px solid var(--ppr-int); border-radius: 999px; color: var(--ppr-int); font-size: 11px; letter-spacing: .08em; vertical-align: 1px; }
.ppr.ppr-internal .ppr-ribbon path[fill="#54b2dc"] { fill: var(--ppr-int); }
.ppr.ppr-internal .ppr-ribbon path[stroke="#9fd3ea"] { stroke: #f6cf85; }
.ppr.ppr-internal .ppr-item { border-left: 3px solid var(--ppr-int); }
.ppr-co { margin-top: 2px; font-size: 13px; font-weight: 700; color: var(--ppr-muted); }
@media (max-width: 1199px) {
  .ppr.ppr-no-c5.ppr-no-c6 .ppr-grid { grid-template-areas: "c1 c3" "c2 c2" "c4 c4"; }
  .ppr.ppr-no-c5:not(.ppr-no-c6) .ppr-grid { grid-template-areas: "c1 c3" "c2 c2" "c4 c4" "c6 c6"; }
  .ppr.ppr-no-c6:not(.ppr-no-c5) .ppr-grid { grid-template-areas: "c1 c3" "c2 c2" "c4 c5"; }
  .ppr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "c1 c3" "c2 c2" "c4 c5" "c6 c6"; }
}
@media (max-width: 980px) {
  .ppr .ppr-grid, .ppr.ppr-no-c5.ppr-no-c6 .ppr-grid, .ppr.ppr-no-c5:not(.ppr-no-c6) .ppr-grid, .ppr.ppr-no-c6:not(.ppr-no-c5) .ppr-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; }
  .ppr .ppr-grid > * { grid-area: auto; }
  .ppr-hero-in { grid-template-columns: 1fr; gap: 12px; padding-top: 32px; }
  .ppr-heat-more { display: block; }
  .ppr-kpi b { font-size: 56px; }
  .ppr-ribbon { height: 110px; }
  .ppr-drawer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; max-height: 82vh; overflow: auto; border-top: 1px solid var(--ppr-border); }
  .ppr-drawer-in { grid-template-columns: 1fr; }
  .ppr-drawer-foot { position: sticky; bottom: 0; background: var(--ppr-surface); border-top: 1px solid var(--ppr-border); }
  .ppr-scrim[data-on="true"] { display: block; position: fixed; inset: 0; background: rgba(0, 44, 61, .42); z-index: 45; }
}
@media (max-width: 640px) {
  .ppr-wrap { padding: 0 16px; }
  .ppr-kpis { gap: 16px 28px; }
  .ppr-kpi b { font-size: 46px; }
  .ppr-kpi b small { font-size: 15px; }
  .ppr-btn .lbl { display: none; }
  .ppr-btn { padding: 0 14px; }
  .ppr-legend { grid-template-columns: 1fr; }
  .ppr-item { grid-template-columns: 1fr; gap: 6px; }
  .ppr-item .y { font-size: 22px; }
  .ppr-bars button { grid-template-columns: 80px minmax(0, 1fr) 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .ppr { --ppr-quick: 0ms; --ppr-med: 0ms; --ppr-slow: 0ms; --ppr-enter: 0ms; }
  .ppr .ppr-hero-net g, .ppr .ppr-pill, .ppr .ppr-item { animation-name: none; }
}