:root {
  --kpi-navy: #07366e;
  --kpi-blue: #0872c7;
  --kpi-yellow: #ffe000;
  --kpi-green: #00985b;
  --kpi-pink: #ed175b;
  --kpi-orange: #f57613;
  --kpi-border: #99dcff;
  --kpi-text: #082e63;
  --kpi-radius: 12px;
}
#kpi-board, #kpi-board * { box-sizing: border-box; }
#kpi-board {
  width: calc(100% - 60px);
  max-width: 1920px;
  margin: 0 60px 0 0;
  color: var(--kpi-text);
  background: #fff;
  font-family: "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
  container-type: inline-size;
}
/* The embedded template reserves space on the right; standalone uses full width. */
.kpi-standalone #kpi-board {
  width: 100%;
  margin: 0 auto;
}
#kpi-board .kpi-hero {
  width: 100%;
  aspect-ratio: 2172 / 372;
  background: url('./img/top.png') center / contain no-repeat;
}
#kpi-board .summary-grid {
  display: grid;
  grid-template-columns: 1.65fr repeat(4, 1fr);
  gap: 18px;
  padding: 20px;
}
#kpi-board .summary-card {
  min-width: 0;
  min-height: 154px;
  padding: 12px 16px 10px;
  border: 2px solid #c7e7fb;
  border-radius: var(--kpi-radius);
  background: linear-gradient(135deg, #fff, #edf8ff);
}
#kpi-board .summary-topline { display: flex; align-items: center; gap: 10px; min-height: 48px; }
#kpi-board .summary-label { font-size: clamp(18px, 1.65cqi, 28px); font-weight: 900; white-space: nowrap; }
#kpi-board .summary-icon { width: 52px; height: 52px; display: inline-block; flex: 0 0 52px; background: center / contain no-repeat; }
#kpi-board .summary-icon-01 { background-image: url('./img/icon01.svg'); }
#kpi-board .summary-icon-02 { background-image: url('./img/icon02.svg'); }
#kpi-board .summary-icon-03 { background-image: url('./img/icon03.svg'); }
#kpi-board .summary-icon-04 { background-image: url('./img/icon04.svg'); }
#kpi-board .summary-icon-05 { background-image: url('./img/icon05.svg'); }
#kpi-board .summary-date .summary-icon { width: 36px; height: 36px; flex-basis: 36px; }
#kpi-board .summary-date .summary-label { color: #0759aa; }
#kpi-board .summary-value-row { display: flex; align-items: baseline; justify-content: flex-end; gap: 6px; white-space: nowrap; }
#kpi-board .summary-value { font-size: clamp(38px, 3.55cqi, 64px); font-weight: 900; line-height: 1.12; letter-spacing: -.035em; }
#kpi-board .summary-value-row small { font-size: 21px; }
#kpi-board .summary-date-value { display: flex; align-items: baseline; gap: 4px; margin-top: 3px; white-space: nowrap; letter-spacing: -.04em; line-height: 1.15; }
#kpi-board .date-year { font-size: clamp(26px, 2.65cqi, 48px); font-weight: 900; }
#kpi-board .date-part strong { font-size: clamp(40px, 4.1cqi, 72px); font-weight: 900; }
#kpi-board .summary-date-value small, #kpi-board .date-weekday { font-size: clamp(16px, 1.7cqi, 28px); font-weight: 900; }
#kpi-board .summary-connected { border-color: #bdebd8; background: linear-gradient(135deg, #fff, #eaf8f0); }
#kpi-board .summary-appointment { border-color: #ffc9e0; background: linear-gradient(135deg, #fff, #fff0f6); }
#kpi-board .summary-order { border-color: #ffe0bc; background: linear-gradient(135deg, #fff, #fff5e9); }
#kpi-board .summary-sub { margin-top: 5px; min-height: 22px; text-align: right; font-size: 14px; white-space: nowrap; }
#kpi-board .summary-compare { color: var(--kpi-text); }
#kpi-board .summary-compare.is-up { color: #ed1743; }
#kpi-board .summary-connected .summary-compare.is-up { color: #008268; }
#kpi-board .summary-compare.is-down { color: #0877b8; }
#kpi-board .summary-compare.is-flat { color: #536e8d; }
#kpi-board .summary-compare.is-none { color: #8293a8; }
#kpi-board .compare-label { color: var(--kpi-text); }
#kpi-board .content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: start;
  gap: 20px;
  padding: 0 20px 16px;
}
#kpi-board .panel { min-width: 0; border: 2px solid var(--kpi-border); border-radius: var(--kpi-radius); overflow: hidden; background: #fff; }
#kpi-board .ranking-heading, #kpi-board .rate-heading {
  display: flex; align-items: center; min-height: 66px; padding: 10px 20px;
  color: #fff; background: linear-gradient(110deg, #086db7, #034d91);
}
#kpi-board .ranking-heading { justify-content: space-between; gap: 12px; }
#kpi-board .ranking-title { display: flex; align-items: center; gap: 10px; font-size: clamp(22px, 2cqi, 34px); font-weight: 900; white-space: nowrap; }
#kpi-board .ranking-heading-icon { display: inline-block; width: 40px; height: 40px; flex: 0 0 40px; background: url('./img/rank.svg') center / contain no-repeat; }
#kpi-board .ranking-slogan { font-size: clamp(12px, 1.1cqi, 19px); white-space: nowrap; }
#kpi-board .table-wrap { padding: 6px 4px 4px; overflow-x: auto; }
#kpi-board .ranking-table { width: 100%; border-collapse: separate; border-spacing: 0 4px; table-layout: fixed; }
#kpi-board .ranking-table th { height: 42px; padding: 7px 4px; background: linear-gradient(#0875bf, #07549b); color: #fff; border-right: 1px solid #4795c8; font-size: clamp(12px, 1.12cqi, 18px); white-space: nowrap; font-weight: 900; }
#kpi-board .ranking-table th:first-child { border-radius: 9px 0 0 9px; }
#kpi-board .ranking-table th:last-child { border-radius: 0 9px 9px 0; border-right: 0; }
#kpi-board .ranking-table .rank-col { width: 10%; }
#kpi-board .ranking-table .name-col { width: 23%; }
#kpi-board .ranking-table td { height: 39px; padding: 2px 5px; border-right: 1px solid #d9e8f4; border-top: 1px solid transparent; border-bottom: 1px solid #dfedf7; text-align: center; background: #f9fcff; color: var(--kpi-text); font-size: clamp(15px, 1.35cqi, 22px); font-weight: 700; }
#kpi-board .ranking-table tbody tr:nth-child(even) td { background: #eff6fd; }
#kpi-board .ranking-table td:first-child { border-radius: 7px 0 0 7px; border-left: 1px solid transparent; }
#kpi-board .ranking-table td:last-child { border-radius: 0 7px 7px 0; border-right: 1px solid transparent; }
#kpi-board .ranking-table tbody tr.is-first td { background: #fff5c6; border-top-color: #f1cc45; border-bottom-color: #f1cc45; font-weight: 900; }
#kpi-board .ranking-table tbody tr.is-first td:first-child { border-left-color: #f1cc45; }
#kpi-board .ranking-table tbody tr.is-first td:last-child { border-right-color: #f1cc45; color: #f0183e; }
#kpi-board .ranking-table tbody tr.is-second td { background: #e5efff; font-weight: 900; }
#kpi-board .ranking-table tbody tr.is-third td { background: #ffead8; font-weight: 900; }
#kpi-board .ranking-table .name-cell { text-align: left; padding-left: 16px; overflow-wrap: anywhere; }
#kpi-board .rank-badge { width: 48px; height: 44px; display: inline-grid; place-items: center; padding: 16px 0 7px; color: #fff; font-family: Arial, sans-serif; font-size: 18px; line-height: 1; font-weight: 700; letter-spacing: 0; text-shadow: 0 1px 2px #654612; background: center / 48px 44px no-repeat; vertical-align: middle; }
#kpi-board .rank-1 { background-image: url('./img/no1.svg'); }
#kpi-board .rank-2 { background-image: url('./img/no2.svg'); }
#kpi-board .rank-3 { background-image: url('./img/no3.svg'); }
#kpi-board .rank-plain { width: 44px; height: 30px; padding: 0; color: var(--kpi-text); font-size: 20px; text-shadow: none; }
#kpi-board .right-column { display: grid; gap: 16px; min-width: 0; align-content: start; }
#kpi-board .rate-heading { gap: 14px; font-size: clamp(23px, 2cqi, 34px); font-weight: 900; }
#kpi-board .rate-heading-icon { width: 40px; height: 40px; flex: 0 0 40px; background: url('./img/up01.svg') center / contain no-repeat; }
#kpi-board .rate-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 18px 10px 14px; }
#kpi-board .rate-item { min-width: 0; text-align: center; padding: 0 10px; border-right: 1px solid #d9e8f4; }
#kpi-board .rate-item:last-child { border-right: 0; }
#kpi-board .rate-label { margin-bottom: 12px; font-size: clamp(14px, 1.25cqi, 21px); font-weight: 900; white-space: nowrap; }
#kpi-board .rate-call .rate-label { color: #096bd3; }
#kpi-board .rate-connected .rate-label { color: var(--kpi-green); }
#kpi-board .rate-appointment .rate-label { color: var(--kpi-pink); }
#kpi-board .rate-order .rate-label { color: #ee3b25; }
#kpi-board .donut { --pct: 0; --ring: #1478ed; --track: #d9eaff; position: relative; width: 100%; max-width: 142px; aspect-ratio: 1; margin: 0 auto 12px; border-radius: 50%; }
#kpi-board .donut-svg { display: block; width: 100%; height: 100%; overflow: visible; transform: rotate(-90deg); }
#kpi-board .donut-track, #kpi-board .donut-progress { fill: none; stroke-width: 10; }
#kpi-board .donut-track { stroke: var(--track); }
#kpi-board .donut-progress { stroke: var(--ring); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--pct)); opacity: clamp(0, var(--pct), 1); }
#kpi-board .rate-connected .donut { --pct: 0; --ring: #00b96f; --track: #dcf4e9; }
#kpi-board .rate-appointment .donut { --pct: 0; --ring: #fb3679; --track: #ffe0eb; }
#kpi-board .rate-order .donut { --pct: 0; --ring: #ff8a08; --track: #ffead8; }
#kpi-board .donut-inner { position: absolute; inset: 15%; border-radius: 50%; background: #fff; display: grid; place-items: center; }
#kpi-board .donut-inner span { font-size: clamp(22px, 1.9cqi, 34px); font-weight: 900; }
#kpi-board .rate-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 3px; margin-top: 5px; white-space: nowrap; font-size: clamp(12px, 1.03cqi, 17px); font-weight: 500; }
#kpi-board .rate-meta strong { margin-left: auto; font-weight: 700; }
#kpi-board .rate-item.is-disabled .donut-track { stroke: #e7edf3; }
#kpi-board .rate-item.is-disabled .donut-inner span { color: #7d8da3; font-size: clamp(14px, 1.1cqi, 19px); }
#kpi-board .mvp-panel { display: grid; grid-template-columns: minmax(90px, .85fr) minmax(0, 2.1fr) minmax(85px, .85fr); align-items: center; gap: 12px; min-height: 205px; padding: 16px 14px; background: radial-gradient(ellipse at 10% 50%, #fff8da80, transparent 42%), linear-gradient(120deg, #fff, #eaf8ff); }
#kpi-board .mvp-trophy { width: 100%; aspect-ratio: 1; background: url('./img/mvp.png') center / contain no-repeat; }
#kpi-board .mvp-center { min-width: 0; padding-left: 14px; border-left: 1px solid #bee5fa; }
#kpi-board .mvp-ribbon { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; margin: 0 0 10px -6px; font-size: clamp(19px, 1.8cqi, 29px); font-weight: 900; white-space: nowrap; transform: rotate(-3deg); transform-origin: left center; }
#kpi-board .mvp-ribbon::before { content: ""; position: absolute; z-index: -1; inset: 0 -5px; background: #ffe12d; clip-path: polygon(3% 7%, 97% 0, 100% 12%, 96% 22%, 100% 30%, 97% 42%, 100% 55%, 96% 65%, 99% 78%, 96% 94%, 2% 100%, 0 88%, 3% 76%, 0 63%, 2% 52%, 0 37%, 3% 23%, 0 15%); }
#kpi-board .mvp-ribbon-icon { width: 28px; height: 25px; background: url('./img/no1.svg') center / contain no-repeat; filter: brightness(0) saturate(100%) invert(15%) sepia(50%) saturate(1800%) hue-rotate(180deg); }
#kpi-board .mvp-name { font-size: clamp(25px, 2.6cqi, 43px); font-weight: 900; line-height: 1.25; overflow-wrap: anywhere; }
#kpi-board .mvp-name small { margin-left: 5px; font-size: 15px; white-space: nowrap; }
#kpi-board .mvp-stats { margin-top: 10px; font-size: clamp(12px, .95cqi, 16px); line-height: 1.65; }
#kpi-board .mvp-stat { display: inline-block; white-space: nowrap; }
#kpi-board .mvp-stat:not(:last-child)::after { content: "・"; }
#kpi-board .mvp-message { margin-top: 4px; font-size: clamp(12px, .95cqi, 16px); color: #07559b; }
#kpi-board .mvp-chart { display: flex; flex-direction: column; align-items: center; align-self: stretch; justify-content: center; min-width: 0; border-left: 1px solid #9fd9fa; padding-left: 6px; }
#kpi-board .chart-copy { text-align: center; transform: rotate(-8deg); color: #0754a6; font-size: clamp(13px, 1.1cqi, 19px); line-height: 1.45; font-weight: 900; }
#kpi-board .mvp-growth-icon { width: 100%; max-width: 105px; aspect-ratio: 1; background: url('./img/up02.svg') center / contain no-repeat; }
#kpi-board .kpi-footer { min-height: 70px; display: flex; align-items: center; justify-content: center; gap: 24px; padding: 16px 20px; color: #fff; background: linear-gradient(110deg, #0864ac, #034b8b); font-size: clamp(17px, 1.6cqi, 28px); font-weight: 900; text-align: center; }
#kpi-board .kpi-footer span { flex: 0 1 150px; height: 2px; background: #ffffffd9; }
/* Container breakpoints also follow the width available inside kintone. */
@container (max-width: 1250px) {
  #kpi-board .summary-grid { gap: 10px; padding: 14px; grid-template-columns: 1.8fr repeat(4, 1fr); }
  #kpi-board .summary-card { padding: 10px; }
  #kpi-board .summary-icon { width: 40px; height: 40px; flex-basis: 40px; }
  #kpi-board .summary-topline { gap: 6px; }
  #kpi-board .summary-label { font-size: 17px; }
  #kpi-board .content-grid { padding: 0 14px 14px; gap: 14px; }
  #kpi-board .ranking-heading, #kpi-board .rate-heading { padding: 10px 12px; }
  #kpi-board .ranking-slogan { white-space: normal; text-align: right; max-width: 120px; }
  #kpi-board .rate-item { padding: 0 6px; }
  #kpi-board .mvp-panel { gap: 8px; padding: 12px 10px; grid-template-columns: 85px minmax(0, 1fr) 80px; }
  #kpi-board .mvp-center { padding-left: 9px; }
}
@container (max-width: 1050px) {
  #kpi-board .summary-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #kpi-board .summary-date { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; min-height: 90px; gap: 12px; }
  #kpi-board .summary-card:not(.summary-date) { min-height: 140px; }
  #kpi-board .content-grid { grid-template-columns: 1fr; }
  #kpi-board .ranking-slogan { max-width: none; white-space: nowrap; }
  #kpi-board .right-column { grid-template-columns: 1fr; }
  #kpi-board .mvp-panel { grid-template-columns: minmax(100px, .7fr) minmax(0, 2fr) minmax(90px, .7fr); }
  #kpi-board .mvp-trophy { max-width: 145px; justify-self: center; }
}
@container (max-width: 600px) {
  #kpi-board .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 12px; }
  #kpi-board .summary-date { flex-wrap: wrap; }
  #kpi-board .summary-value { font-size: 42px; }
  #kpi-board .summary-date-value { margin-left: auto; }
  #kpi-board .content-grid { padding: 0 12px 12px; }
  #kpi-board .ranking-heading { flex-wrap: wrap; gap: 4px; }
  #kpi-board .ranking-slogan { margin-left: auto; }
  #kpi-board .ranking-table { min-width: 640px; }
  #kpi-board .rate-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 0; }
  #kpi-board .rate-item:nth-child(2) { border-right: 0; }
  #kpi-board .donut { max-width: 128px; }
  #kpi-board .mvp-panel { grid-template-columns: 78px minmax(0, 1fr); gap: 10px; }
  #kpi-board .mvp-chart { grid-column: 1 / -1; flex-direction: row; justify-content: flex-end; gap: 14px; border-left: 0; border-top: 1px solid #bee5fa; padding-top: 12px; }
  #kpi-board .chart-copy { font-size: 14px; }
  #kpi-board .mvp-growth-icon { width: 70px; }
  #kpi-board .kpi-footer { gap: 10px; font-size: 16px; }
  #kpi-board .kpi-footer span { flex-basis: 24px; }
}

/* Motion is shared by the standalone page and the kintone template. */
@keyframes kpi-card-enter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes kpi-row-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes kpi-mvp-glow {
  0%, 100% { filter: drop-shadow(0 2px 3px rgb(236 174 17 / 8%)); }
  50% { filter: drop-shadow(0 2px 8px rgb(236 174 17 / 30%)); }
}
@media (prefers-reduced-motion: no-preference) {
  #kpi-board .summary-card,
  #kpi-board .ranking-panel,
  #kpi-board .kpi-rate-panel,
  #kpi-board .mvp-panel {
    animation: kpi-card-enter 500ms cubic-bezier(.2, .7, .2, 1) backwards;
  }
  #kpi-board .summary-card:nth-child(2) { animation-delay: 60ms; }
  #kpi-board .summary-card:nth-child(3) { animation-delay: 120ms; }
  #kpi-board .summary-card:nth-child(4) { animation-delay: 180ms; }
  #kpi-board .summary-card:nth-child(5) { animation-delay: 240ms; }
  #kpi-board .ranking-panel, #kpi-board .kpi-rate-panel { animation-delay: 160ms; }
  #kpi-board .mvp-panel { animation-delay: 260ms; }
  #kpi-board .ranking-table tbody tr { animation: kpi-row-enter 400ms ease-out backwards; }
  #kpi-board .ranking-table tbody tr:nth-child(2) { animation-delay: 60ms; }
  #kpi-board .ranking-table tbody tr:nth-child(3) { animation-delay: 120ms; }
#kpi-board .mvp-trophy { animation: kpi-mvp-glow 5s ease-in-out 3; }
}
@media (hover: hover) and (pointer: fine) {
  #kpi-board .summary-card:hover { border-color: #80c6ee; box-shadow: 0 6px 18px rgb(7 54 110 / 10%); }
  #kpi-board .ranking-table tbody tr:hover td { box-shadow: inset 0 0 0 999px rgb(8 114 199 / 5%); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  #kpi-board .summary-card { transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease; }
  #kpi-board .summary-card:hover { transform: translateY(-3px); }
  #kpi-board .ranking-table td { transition: box-shadow 160ms ease; }
}

/* No business values are displayed until their API response has arrived. */
#kpi-board .is-loading {
  display: inline-block;
  min-width: 2.6ch;
  border-radius: 5px;
  color: transparent;
  background: transparent;
  vertical-align: baseline;
  pointer-events: none;
}
#kpi-board .summary-date-value.is-loading { min-width: 80%; min-height: 52px; margin-top: 7px; }
#kpi-board .mvp-stats.is-loading { min-width: 85%; min-height: 24px; }
#kpi-board .ranking-table .ranking-loading { height: 160px; color: #70849c; font-size: 15px; font-weight: 500; }
#kpi-board .mvp-panel:has(.mvp-name .is-loading) .mvp-message { visibility: hidden; }
.kpi-export-stage { position: fixed; left: -30000px; top: 0; pointer-events: none; }
.kpi-export-stage #kpi-board { width: 100%; max-width: none; margin: 0; }
.kpi-export-stage #kpi-board *, .kpi-export-stage #kpi-board *::before, .kpi-export-stage #kpi-board *::after { animation: none !important; transition: none !important; }
.kpi-export-stage #kpi-board .summary-card { transform: none; box-shadow: none; }

#kpi-board .kpi-hero[role="button"] { cursor: pointer; }
#kpi-board .kpi-hero[aria-disabled="true"] { cursor: wait; }
#kpi-board .kpi-hero:focus-visible { outline: 3px solid #ffe000; outline-offset: -4px; }
#kpi-board .kpi-export-status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }