@charset "UTF-8";

.mock-a-1a-sp{
  --c-1: #5470C6;  
  --c-2: #91CC75;  
  --c-3: #FAC858;  
  --c-4: #EE6666;  
  --c-5: #9A60B4;  

  --brand:    #58AA35;
  --text:     #2E2E2E;
  --text-sub: #8A8A8A;
  --line:     #EDEDED;
}

.mock-a-1a-sp *{ box-sizing: border-box; }

.mock-a-1a-sp{
  font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", "Meiryo", system-ui, sans-serif;
  color: var(--text);
}
.mock-a-1a-sp h2,
.mock-a-1a-sp p{ margin: 0; }

.mock-a-1a-sp .sp-frame{
  width: 100%;
  max-width: 335px;
  margin-inline: auto;
}

.mock-a-1a-sp .kpi-row{
  display: flex; gap: 8px;
  margin-bottom: 10px;
}
.mock-a-1a-sp .kpi{
  flex: 1; min-width: 0;
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 10px;
}
.mock-a-1a-sp .kpi-value{ font-size: 18px; font-weight: 700; line-height: 1.15; white-space: nowrap; }
.mock-a-1a-sp .kpi-unit{ font-size: 10.5px; font-weight: 600; margin-left: 2px; }
.mock-a-1a-sp .kpi-label{ margin-top: 2px; font-size: 10.5px; color: var(--text-sub); }

.mock-a-1a-sp .card{
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px 16px 18px;
}

.mock-a-1a-sp .chart{ display: block; width: 100%; margin-top: 8px; }
.mock-a-1a-sp .chart .grid line{ stroke: #EFEFEF; stroke-width: 4; }
.mock-a-1a-sp .chart .grid .axis{ stroke: #DCDCDC; stroke-width: 5; }
.mock-a-1a-sp .chart text{ font-family: inherit; fill: #8A8A8A; font-size: 48px; }
.mock-a-1a-sp .chart .ax-y{ text-anchor: end; }
.mock-a-1a-sp .chart .ax-y--right{ text-anchor: start; }
.mock-a-1a-sp .chart .ax-x{ text-anchor: middle; }
.mock-a-1a-sp .chart .ax-unit,
.mock-a-1a-sp .chart .ax-unit-x{ fill: #9A9A9A; font-size: 46px; text-anchor: middle; }
.mock-a-1a-sp .chart .ln{ fill: none; stroke: #8FC3FF; stroke-width: 6; stroke-linejoin: round; }

.mock-a-1a-sp .chart .ax-y text:nth-child(2),
.mock-a-1a-sp .chart .ax-y text:nth-child(4),
.mock-a-1a-sp .chart .ax-y text:nth-child(5){ display: none; }

.mock-a-1a-sp .chart .ax-unit,
.mock-a-1a-sp .chart .ax-unit-x{ display: none; }

.mock-a-1a-sp .chart .ax-x text:nth-child(2),
.mock-a-1a-sp .chart .ax-x text:nth-child(4),
.mock-a-1a-sp .chart .ax-x text:nth-child(6){ display: none; }

.mock-a-1a-sp .legend{ display: flex; align-items: center; flex-wrap: wrap; gap: 5px 10px; margin-top: 10px; }
.mock-a-1a-sp .lg{ display: inline-flex; align-items: center; gap: 4px; font-size: 10px; color: #5C5C5C; white-space: nowrap; }
.mock-a-1a-sp .lg-bar{ width: 14px; height: 8px; border-radius: 2px; flex: none; }
.mock-a-1a-sp .lg-line{ width: 18px; height: 8px; flex: none; position: relative; }
.mock-a-1a-sp .lg-line::before{ content:""; position:absolute; top:3.5px; left:0; width:100%; height:2px; background: var(--c); }
.mock-a-1a-sp .lg-line::after{ content:""; position:absolute; top:1px; left:5px; width:6px; height:6px; border-radius:50%; background: var(--c); }

.mock-a-1a-sp .card-head h2{ font-size: 14px; font-weight: 700; line-height: 1.35; }
.mock-a-1a-sp .card-head p{ margin-top: 2px; font-size: 11px; color: var(--text-sub); }

.mock-a-1a-sp .donut-wrap{ display: flex; justify-content: center; margin: 14px 0 16px; }
.mock-a-1a-sp .donut{ display: block; }

.mock-a-1a-sp .rank-list{
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.mock-a-1a-sp .rank-item{
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--line);
}
.mock-a-1a-sp .rank-item:last-child{ border-bottom: 0; padding-bottom: 0; }

.mock-a-1a-sp .rank-name{
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; line-height: 1.5;
  min-width: 0;
}
.mock-a-1a-sp .chip{ display: inline-block; width: 9px; height: 9px; border-radius: 2px; flex: none; }
.mock-a-1a-sp .rank-value{
  font-size: 11.5px; font-weight: 600; color: var(--text);
  white-space: nowrap; flex: none;
}