.hero .hero-cta .btn[href^="#"]::after {
  transform: translateY(-2px) rotate(135deg);
}

.hero .hero-cta .btn-primary {
  gap: 10px;
  padding-inline: 20px;
}

.notice {
  margin-top: 32px;
}

.product-visual {
  height: 176px;
  aspect-ratio: auto;
}

.product-visual img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 176px;
  object-fit: contain;
}

.steps {
  grid-template-columns: minmax(0, 1fr);
  max-width: 980px;
  margin-inline: auto;
}

.step {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  gap: 10px 24px;
  padding: 24px 28px;
}

.step .num {
  grid-column: 1;
  grid-row: 1 / 4;
  align-self: start;
}

.step h3,
.step p,
.step .when {
  grid-column: 2;
}

.step p {
  font-size: 1.5rem;
}

.step .when {
  justify-self: start;
  margin-top: 0;
}

.step:not(:last-child)::after {
  top: auto;
  right: auto;
  bottom: -14px;
  left: 77px;
  transform: rotate(135deg);
}

.faq {
  gap: 12px;
}

.faq summary {
  padding-block: 20px;
}

.faq .a-body {
  padding-top: 18px;
  padding-bottom: 22px;
}

@media (min-width: 960px) {
  .hero-body {
    grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
    gap: 28px;
  }

  .hero-visual {
    max-width: 320px;
  }

  .about-grid {
    gap: 40px;
    align-items: start;
  }
}

@media (max-width: 959px) {
  .hero-visual {
    width: min(280px, 65%);
  }
}

@media (max-width: 599px) {
  .notice {
    margin-top: 28px;
  }

  .hero .hero-cta .btn-primary {
    padding-inline: 16px;
  }

  .hero-visual {
    width: min(200px, 65%);
  }

  .product-visual {
    height: 140px;
  }

  .product-visual img {
    max-height: 140px;
  }

  .step {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding: 24px;
  }

  .step .num {
    grid-column: 1;
    grid-row: auto;
  }

  .step h3,
  .step p,
  .step .when {
    grid-column: 1;
  }

  .step:not(:last-child)::after {
    left: 50%;
  }

  .faq summary {
    padding: 18px 16px;
  }

  .faq .a-body {
    padding: 20px 16px;
  }
}