.sangyoui-number-chart {
  margin: 0 auto;
  padding: 30px 0px 10px 0px;
  text-align: center;
  color: #000;
  font-family: sans-serif;
}

.sangyoui-number-chart h2 {
  margin: 0 0 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid #999;
  font-size: 38px;
  font-weight: 900;
  line-height: 1.2;
}

.sangyoui-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 16px;
}

.sangyoui-date {
  margin: 0;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.25;
  text-align: left;
}

.sangyoui-total {
  margin: 0;
  color: #173a99;
  font-size: 42px;
  font-weight: 900;
  line-height: 1;
}

.sangyoui-total span {
  font-size: 1.25em;
}

.sangyoui-pie {
  position: relative;
  width: 380px;
  aspect-ratio: 1 / 1;
  margin: 0 auto 18px;
  border: 1px solid #000;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    #129900 0deg 239.3deg,
    #ddd 239.3deg 360deg
  );
  overflow: hidden;
}

.sangyoui-pie::before,
.sangyoui-pie::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 50%;
  height: 1px;
  background: #000;
  transform-origin: left center;
  z-index: 2;
}

.sangyoui-pie::before {
  transform: rotate(-90deg);
}

.sangyoui-pie::after {
  transform: rotate(149.3deg);
}

.pie-label {
  position: absolute;
  z-index: 3;
  font-weight: 900;
  line-height: 1.35;
}

.pie-label-gray {
  left: 5%;
  top: 25%;
  color: #555;
  font-size: 23px;
  text-align: center;
}

.pie-label-green {
  right: 8%;
  top: 50%;
  color: #fff;
  font-size: 32px;
  text-align: center;
}

.pie-label-green span {
  font-size: 1.25em;
}

.sangyoui-note {
  margin: 0;
  font-size: 11px;
  line-height: 1.6;
  text-align: center;
}

/* スマホ調整 */
@media (max-width: 600px) {
  .sangyoui-number-chart {
    max-width: 100%;
    padding: 14px 8px;
  }

  .sangyoui-number-chart h2 {
    font-size: 30px;
  }

  .sangyoui-summary {
    display: block;
    margin-bottom: 14px;
  }

  .sangyoui-date {
    margin-bottom: 8px;
    font-size: 16px;
    text-align: center;
  }

  .sangyoui-total {
    font-size: 34px;
  }

  .sangyoui-pie {
    width: 320px;
    max-width: 92vw;
  }

  .pie-label-gray {
    font-size: 19px;
  }

  .pie-label-green {
    font-size: 26px;
  }

  .sangyoui-note {
    font-size: 11px;
  }
}

.sangyoui-title {
  position: relative;
  width: 100%;
  margin: 0 0 20px;
  padding: 0 0 12px;
  text-align: center;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.3;
}

.sangyoui-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-image: repeating-linear-gradient(
    to right,
    #b8b8b8 0,
    #b8b8b8 2px,
    transparent 2px,
    transparent 5px
  );
}

.activity-lead {
  margin: 0 0 22px;
  font-size: 29px;
  font-weight: 900;
  line-height: 1.55;
  text-align: center;
}

.activity-lead span {
  color: #128000;
}

.activity-lead em {
  color: #e60000;
  font-style: normal;
}

.activity-pie {
  background: conic-gradient(
    from 0deg,
    #22a817 0deg 175.3deg,
    #ddd 175.3deg 360deg
  );
}

.activity-pie::after {
  transform: rotate(85.3deg);
}

.activity-label {
  position: absolute;
  z-index: 3;
  font-weight: 900;
  line-height: 1.25;
  text-align: center;
}

.activity-label strong {
  display: block;
  margin-top: 5px;
  font-size: 35px;
}

.activity-label span {
  display: inline-block;
  margin-top: 10px;
  padding: 3px 14px;
  background: #fff;
  border-radius: 6px;
  font-size: 35px;
  line-height: 1.1;
}

.activity-label-gray {
  left: 3%;
  top: 25%;
  color: #777;
  font-size: 35px;
}

.activity-label-gray span {
  color: #777;
}

.activity-label-green {
  right: 4%;
  top: 22%;
  color: #fff;
  font-size: 40px;
}

.activity-label-green span {
  color: #128000;
}

@media (max-width: 600px) {
  .activity-lead {
    font-size: 20px;
    line-height: 1.6;
  }

  .activity-label-gray {
    left: 4%;
    top: 26%;
    font-size: 25px;
  }

  .activity-label-green {
    right: 3%;
    top: 23%;
    font-size: 30px;
  }

  .activity-label strong {
    margin-top: 5px;
    font-size: 28px;
  }

  .activity-label span {
    font-size: 25px;
  }
}