.mv::after {
  background-image: url(../img/common/mv-frame-f3f3f3.svg);
}

.infograph {
  position: relative;
  background: #f3f3f3;
  padding-top: min(118px, 118 / 1280 * var(--inner-width) * 1px);
  padding-bottom: min(160px, 160 / 1280 * var(--inner-width) * 1px);
}
@media only screen and (max-width: 48em) {
  .infograph {
    padding-top: calc(52 / 390 * var(--inner-width) * 1px);
    padding-bottom: calc(160 / 390 * var(--inner-width) * 1px);
  }
}

.infograph-items {
  position: relative;
  width: min(1044px, 1044 / 1280 * var(--inner-width) * 1px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: min(28px, 28 / 1280 * var(--inner-width) * 1px);
}
@media only screen and (max-width: 48em) {
  .infograph-items {
    width: auto;
    margin: 0 calc(32 / 390 * var(--inner-width) * 1px);
    grid-template-columns: 1fr;
    gap: calc(28 / 390 * var(--inner-width) * 1px);
  }
}

.infograph-item {
  background: #fff;
  border-radius: min(16px, 16 / 1280 * var(--inner-width) * 1px);
  min-height: min(328px, 328 / 1280 * var(--inner-width) * 1px);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  padding-top: min(24px, 24 / 1280 * var(--inner-width) * 1px);
  padding-bottom: min(8px, 8 / 1280 * var(--inner-width) * 1px);
}
@media only screen and (max-width: 48em) {
  .infograph-item {
    border-radius: calc(16 / 390 * var(--inner-width) * 1px);
    min-height: calc(328 / 390 * var(--inner-width) * 1px);
    padding-top: calc(24 / 390 * var(--inner-width) * 1px);
    padding-bottom: calc(8 / 390 * var(--inner-width) * 1px);
  }
}

.infograph-item__title {
  font-size: min(20px, 20 / 1280 * var(--inner-width) * 1px);
  margin-bottom: min(24px, 24 / 1280 * var(--inner-width) * 1px);
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media only screen and (max-width: 48em) {
  .infograph-item__title {
    font-size: calc(20 / 390 * var(--inner-width) * 1px);
    margin-bottom: calc(24 / 390 * var(--inner-width) * 1px);
  }
}

.infograph-item__image img {
  width: 100%;
  height: auto;
}

.infograph-item__num {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: min(64px, 64 / 1280 * var(--inner-width) * 1px);
}
@media only screen and (max-width: 48em) {
  .infograph-item__num {
    height: calc(64 / 390 * var(--inner-width) * 1px);
  }
}
.infograph-item__num strong {
  font-family: "Syncopate", sans-serif;
  font-weight: 700;
  font-size: min(64px, 64 / 1280 * var(--inner-width) * 1px);
  line-height: 1;
  background: linear-gradient(180deg, #a9cb03 15%, #48a63f 85%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}
@media only screen and (max-width: 48em) {
  .infograph-item__num strong {
    font-size: calc(64 / 390 * var(--inner-width) * 1px);
  }
}
.infograph-item__num span {
  font-weight: 500;
  font-size: min(18px, 18 / 1280 * var(--inner-width) * 1px);
  line-height: 1.5;
}
@media only screen and (max-width: 48em) {
  .infograph-item__num span {
    font-size: calc(18 / 390 * var(--inner-width) * 1px);
  }
}
.infograph-item__num.is-small strong {
  font-size: min(54px, 54 / 1280 * var(--inner-width) * 1px);
}
@media only screen and (max-width: 48em) {
  .infograph-item__num.is-small strong {
    font-size: calc(54 / 390 * var(--inner-width) * 1px);
  }
}

.infograph-item__note {
  text-align: center;
  font-weight: 500;
  font-size: min(14px, 14 / 1280 * var(--inner-width) * 1px);
  margin-top: min(12px, 12 / 1280 * var(--inner-width) * 1px);
  line-height: 1.2;
}
@media only screen and (max-width: 48em) {
  .infograph-item__note {
    font-size: calc(14 / 390 * var(--inner-width) * 1px);
    margin-top: calc(12 / 390 * var(--inner-width) * 1px);
  }
}
.infograph-item__note small {
  font-size: min(12px, 12 / 1280 * var(--inner-width) * 1px);
}
@media only screen and (max-width: 48em) {
  .infograph-item__note small {
    font-size: calc(12 / 390 * var(--inner-width) * 1px);
  }
}

.infograph-lines .line-4 {
  left: calc(50% + min(397px, 397 / 1280 * var(--inner-width) * 1px));
  top: max(-160px, -160 / 1280 * var(--inner-width) * 1px);
}
@media only screen and (max-width: 48em) {
  .infograph-lines .line-4 {
    left: calc(215 / 390 * var(--inner-width) * 1px);
    top: calc(0 / 390 * var(--inner-width) * 1px);
  }
}
.infograph-lines .line-1 {
  right: calc(50% + min(324px, 324 / 1280 * var(--inner-width) * 1px));
  top: min(986px, 986 / 1280 * var(--inner-width) * 1px);
}
@media only screen and (max-width: 48em) {
  .infograph-lines .line-1 {
    right: calc(74 / 390 * var(--inner-width) * 1px);
    top: calc(991 / 390 * var(--inner-width) * 1px);
  }
}
.infograph-lines .line-2 {
  left: calc(50% + min(384px, 384 / 1280 * var(--inner-width) * 1px));
  top: min(1822px, 1822 / 1280 * var(--inner-width) * 1px);
}
@media only screen and (max-width: 48em) {
  .infograph-lines .line-2 {
    left: calc(205 / 390 * var(--inner-width) * 1px);
    top: calc(2443 / 390 * var(--inner-width) * 1px);
  }
}/*# sourceMappingURL=infograph.css.map */