.main-counter {
  margin: 0 calc(calc(100vw - var(--max-width)) / -2);
  background: linear-gradient(90deg, #f7f9f9, #e0e8e9);
}

.main-counter__wrapper {
  display: flex;
  justify-content: center;
  padding: 52px;
  margin: 0 auto;
  background-color: var(--pale-green);
}

.main-counter__company {
  padding-right: 48px;
  margin-right: 48px;
  border-right: 1px solid var(--pale-gray);
}

.main-counter__text {
  display: flex;
  gap: 8px 24px;
  align-items: center;
}

.main-counter__caption {
  color: var(--gray);
}

.main-counter__values {
  display: flex;
  align-items: baseline;
  margin-top: 28px;
}

.main-counter__value {
  display: flex;
  gap: 6px;
  align-items: baseline;
  white-space: nowrap;
}

.main-counter__value:not(:last-child) {
  padding-right: 30px;
  margin-right: 30px;
  border-right: 1px solid var(--pale-gray);
}

.main-counter__value:not(:last-child).main-counter__value--no-border {
  padding-right: 0;
  margin-right: 24px;
  border-right: initial;
}

.main-counter__value-text {
  font-family: Figtree, sans-serif;
  font-size: 34px;
  font-style: normal;
  font-weight: 700;
  font-optical-sizing: auto;
  line-height: 140%; /* 47.6px */
  color: var(--deep-green);
}

.main-counter__text-link {
  position: absolute;
  right: max(80px, calc(calc(100vw - calc(1280px + 80px * 2)) / 2 + 80px));
  bottom: 14px;
}

.main-counter__text-link a {
  display: flex;
  gap: 4px;
  align-items: center;
}

.main-counter__text-link a span {
  position: relative;
  display: block;
}

.main-counter__text-link a span::after {
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1px;
  content: '';
  background-color: currentcolor;
  transition: transform var(--transition-hover);
  transform: scale(0, 1);
  transform-origin: right top;
}

@media (hover: hover) {
  .main-counter__text-link a:hover span::after {
    transform: scale(1, 1);
    transform-origin: left top;
  }
}

@media (width <= 1440px) {
  .main-counter {
    margin: 0;
  }
}

@media (width <= 1024px) {
  .main-counter__company {
    padding-right: 0;
    border-right: initial;
  }

  .main-counter__text {
    flex-direction: column;
    align-items: start;
  }

  .main-counter__values {
    flex-direction: column;
    margin-top: 20px;
  }

  .main-counter__value {
    width: 100%;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--pale-gray);
  }

  .main-counter__value:not(:last-child) {
    padding-right: 0;
    margin-right: 0;
    margin-bottom: 16px;
    border-right: initial;
  }

  .main-counter__value:not(:last-child).main-counter__value--no-border {
    padding-bottom: 0;
    margin-right: 16px;
    margin-bottom: 0;
    border-bottom: initial;
  }
}

@media (width < 768px) {
  .main-counter {
    padding: 0 20px;
    background: linear-gradient(0deg, #fff, 80%, transparent),
      linear-gradient(90deg, #f7f9f9, #e0e8e9);
  }

  .main-counter__wrapper {
    flex-direction: column;
    padding: 24px;
    border-radius: 5px;
  }

  .main-counter__company {
    padding-right: 0;
    margin-right: 0;
    margin-bottom: 20px;
  }

  .main-counter__value-text {
    font-size: 22px;
    font-weight: 600;
  }

  .main-counter__money .main-counter__values {
    flex-direction: row;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--pale-gray);
  }

  .main-counter__money .main-counter__values--sp-no-border {
    padding-bottom: 0;
    margin-top: 16px;
    border: none;
  }

  .main-counter__money .main-counter__value {
    width: fit-content;
    padding-bottom: 0;
    border-bottom: initial;
  }

  .main-counter__text-link {
    position: static;
    margin-top: 18px;
  }
}
