@charset "UTF-8";

.mock-a-1a-print {
  --brand:      #58AA35;
  --brand-dark: #4A9130;
  --text:       #333333;
  --text-sub:   #8A8A8A;
  --line:       #EFEFEF;
  --axis:       #DCDCDC;

  width: 100%;
  padding: 5mm 4mm;
  background: #FFFFFF;
  font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", "Meiryo", system-ui, sans-serif;
  font-size: 9pt;
  color: var(--text);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.mock-a-1a-print *,
.mock-a-1a-print *::before,
.mock-a-1a-print *::after {
  box-sizing: border-box;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

.mock-a-1a-print p { margin: 0; }

.mock-a-1a-print .chart-title {
  display: flex;
  align-items: baseline;
  gap: 2mm;
  margin: 0 0 4mm;
  white-space: nowrap;
}
.mock-a-1a-print .chart-title strong { font-size: 8.5pt; font-weight: 700; color: var(--text); }
.mock-a-1a-print .chart-title span   { font-size: 7.5pt; font-weight: 400; color: var(--text-sub); }

.mock-a-1a-print .chart-title .period {
  margin-left: auto;
  margin-right: 32mm;
  font-size: 7.5pt;
  color: var(--text-sub);
}

.mock-a-1a-print .kpi-row { display: flex; gap: 4mm; margin: 0 0 3.5mm; justify-content: flex-start; }
.mock-a-1a-print .kpi {

  width: 42mm;
  flex: none;
  min-width: 0;
  height: 15mm;
  border-radius: 2mm;
  padding: 2.6mm 4mm;
  color: #FFF;
  background: linear-gradient(168deg, #4B8032 0%, #55A035 58%, #63B93C 100%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.mock-a-1a-print .kpi-value { font-size: 13pt; font-weight: 700; line-height: 1; letter-spacing: -.01em; }
.mock-a-1a-print .kpi-unit  { font-size: 7pt; font-weight: 600; margin-left: .8mm; opacity: .92; }
.mock-a-1a-print .kpi-label { display: flex; align-items: center; gap: 1.4mm; font-size: 7.5pt; font-weight: 600; }
.mock-a-1a-print .kpi-ico {
  width: 4mm; height: 4mm; flex: none; border-radius: 50%;
  background: rgba(255,255,255,.82);
  display: flex; align-items: center; justify-content: center;
}
.mock-a-1a-print .kpi-ico .ico { width: 2.4mm; height: 2.4mm; fill: var(--brand-dark); stroke: none; }

.mock-a-1a-print .chart-power {
  display: block;
  width: 100%;
  height: 47.04mm;
  margin: 0 0 3.5mm;
}
.mock-a-1a-print .chart-power .grid line { stroke: var(--line); stroke-width: 2.5; }
.mock-a-1a-print .chart-power .grid .axis { stroke: var(--axis); stroke-width: 3; }
.mock-a-1a-print .chart-power text {
  font-family: inherit;
  fill: #8A8A8A;
  font-size: 26px;
}
.mock-a-1a-print .chart-power .ax-y { text-anchor: end; }
.mock-a-1a-print .chart-power .ax-y--right { text-anchor: start; }
.mock-a-1a-print .chart-power .ax-x { text-anchor: middle; }
.mock-a-1a-print .chart-power .ax-unit,
.mock-a-1a-print .chart-power .ax-unit-x { fill: #9A9A9A; font-size: 26px; text-anchor: middle; }
.mock-a-1a-print .chart-power .ln { fill: none; stroke: #8FC3FF; stroke-width: 4; stroke-linejoin: round; }

.mock-a-1a-print .legend { display: flex; align-items: center; flex-wrap: nowrap; gap: 2.4mm; }
.mock-a-1a-print .lg {
  display: inline-flex; align-items: center; gap: 1mm;
  font-size: 8.5pt; font-weight: 600; color: var(--text); white-space: nowrap;
}
.mock-a-1a-print .lg-bar { width: 2.6mm; height: 1.8mm; border-radius: .5mm; flex: none; }
.mock-a-1a-print .lg-line { width: 4mm; height: 1.8mm; flex: none; position: relative; }
.mock-a-1a-print .lg-line::before {
  content: ""; position: absolute; top: .8mm; left: 0;
  width: 100%; height: .35mm; background: var(--c);
}