@charset "UTF-8";

.mock-a-1a-hero{
  --brand:      #58AA35;
  --bg:         #F5F5F5;
  --surface:    #FFFFFF;
  --line:       #E9E9E9;
  --line-soft:  #EFEFEF;
  --text:       #333333;
  --text-sub:   #8A8A8A;
}

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

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

.mock-a-1a-hero .stage{ width: 520px; margin: 0 auto; }
.mock-a-1a-hero .screen{
  background: var(--surface);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}

.mock-a-1a-hero .topbar{
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}
.mock-a-1a-hero .page{ font-size: 13px; font-weight: 700; }
.mock-a-1a-hero .period{ font-size: 10.5px; color: var(--text-sub); }

.mock-a-1a-hero .kpi-row{ display: flex; gap: 10px; padding: 12px 14px; background: var(--bg); }
.mock-a-1a-hero .kpi{
  flex: 1; min-width: 0;
  background: var(--surface);
  border-radius: 8px;
  padding: 10px 12px;
}
.mock-a-1a-hero .kpi-value{ font-size: 20px; font-weight: 700; line-height: 1.15; white-space: nowrap; }
.mock-a-1a-hero .kpi-unit{ font-size: 11px; font-weight: 600; margin-left: 2px; }
.mock-a-1a-hero .kpi-label{ margin-top: 2px; font-size: 10.5px; color: var(--text-sub); }

.mock-a-1a-hero .chart{ display: block; width: 100%; margin-top: 8px; }

.mock-a-1a-hero .chart .grid line{ stroke: #EFEFEF; stroke-width: 1.556; }
.mock-a-1a-hero .chart .grid .axis{ stroke: #DCDCDC; stroke-width: 1.867; }
.mock-a-1a-hero .chart text{ font-family: inherit; fill: #8A8A8A; font-size: 31px; }
.mock-a-1a-hero .chart .ax-y{ text-anchor: end; }
.mock-a-1a-hero .chart .ax-y--right{ text-anchor: start; }
.mock-a-1a-hero .chart .ax-x{ text-anchor: middle; }
.mock-a-1a-hero .chart .ax-unit,
.mock-a-1a-hero .chart .ax-unit-x{ fill: #9A9A9A; font-size: 30px; text-anchor: middle; }

.mock-a-1a-hero .chart .ln{ fill: none; stroke: #8FC3FF; stroke-width: 4; stroke-linejoin: round; }

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

.mock-a-1a-hero .chart .ax-unit,
.mock-a-1a-hero .chart .ax-unit-x{ display: block; }

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

.mock-a-1a-hero .card{
  background: var(--surface);
  margin: 0 14px 14px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 12px;
}
.mock-a-1a-hero .card-head{ display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.mock-a-1a-hero .card-head h2{ font-size: 12.5px; font-weight: 700; line-height: 1.3; }
.mock-a-1a-hero .card-sub{ margin-top: 1px; font-size: 10px; color: var(--text-sub); }

.mock-a-1a-hero .seg-toolbar{ display: flex; gap: 4px; flex: none; }
.mock-a-1a-hero .seg{
  font-size: 9.5px; line-height: 1.4;
  padding: 3px 7px; border-radius: 4px;
  border: 1px solid #E0E0E0; background: #FFF; color: #4A4A4A;
  white-space: nowrap;
}
.mock-a-1a-hero .seg.is-on{ background: var(--brand); border-color: var(--brand); color: #FFF; font-weight: 700; }

.mock-a-1a-hero .dist-body{ display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.mock-a-1a-hero .donut-wrap{ flex: none; }
.mock-a-1a-hero .donut{ display: block; }

.mock-a-1a-hero .rank-list{
  list-style: none; margin: 0; padding: 0;
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 5px;
}
.mock-a-1a-hero .rank-item{
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  font-size: 10.5px; line-height: 1.4;
}
.mock-a-1a-hero .rank-name{
  display: flex; align-items: center; gap: 5px;
  min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mock-a-1a-hero .chip{ display: inline-block; width: 8px; height: 8px; border-radius: 2px; flex: none; }
.mock-a-1a-hero .rank-value{ white-space: nowrap; font-weight: 600; color: var(--text); }