html,
body {
  width: 100%;
  min-width: 0;
  overflow-x: hidden;
  font-family: "PingFang SC";
}

html {
  background: #d5deed;
}

body {
  padding-bottom: 0;
  background: #d5deed;
}

.page {
  position: relative;
  width: min(100%, 430px);
  min-height: 100vh;
  margin: 0 auto;
  padding-bottom: calc(72px + env(safe-area-inset-bottom));
  background: #dee6f5;
  box-shadow: 0 0 35px rgba(30, 55, 90, .12);
}

.header {
  height: clamp(208px, 63.5vw, 273px);
  background-position: center top;
  background-size: auto clamp(176px, 55vw, 237px);
}

.company-card {
  top: clamp(82px, 24.8vw, 107px);
  width: calc(100% - 28px);
  height: auto;
  min-height: 126px;
  padding: 18px 20px 15px;
  border-top: 5px solid #3478f6;
  border-radius: 18px;
  color: #727b8b;
  font-size: 15px;
  line-height: 28px;
}

.company-card p {
  margin: 0;
  color: #1f2937;
  font-size: 16px;
  font-weight: 600;
}

.company-card p strong,
.company-card p span {
  font-weight: 700;
}

.company-card .credit-code {
  letter-spacing: .025em;
}

.company-card h1 {
  margin: 0 0 7px;
  color: #f02913;
  font-size: 24px;
  line-height: 34px;
}

.company-card p:last-child {
  margin-top: 2px;
}

.content {
  width: 100%;
  max-width: none;
  margin-top: -6px;
}

.main-card,
.process-card,
.service-card,
.faq-card {
  width: calc(100% - 28px);
  min-height: 0 !important;
}

.main-card {
  padding: 19px 14px 20px;
}

.annual-hint {
  width: 100%;
  height: auto;
  min-height: 256px;
  background-size: 100% 100%;
}

.hint-copy {
  font-size: 14px;
  line-height: 26px;
  letter-spacing: 1px;
}

.hint-copy strong {
  font-size: 16px;
  line-height: 26px;
}

.hint-copy b {
  font-size: 14px;
  line-height: 26px;
}

.official-address {
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 14px;
}

.special-reminder {
  height: auto;
}

.process-card {
  overflow: hidden;
}

.order-info {
  padding-right: 20px;
  padding-left: 20px;
}

.process-image {
  width: calc(100% - 63px);
  height: auto;
  aspect-ratio: 818 / 120;
}

.info-row {
  gap: 4px;
}

.info-row > span:first-child {
  flex: 0 0 88px;
  color: #6c7380;
  font-size: 16px;
  font-weight: 600;
}

.info-row strong:not(.price) {
  min-width: 0;
  color: #213351;
  font-weight: 700;
  line-height: 20px;
}

.late-tag {
  flex: 0 0 auto;
}

.agreement {
  height: auto;
  min-height: 42px;
  font-size: 14px;
  line-height: 42px;
}

.agreement a {
  flex: 0 0 auto;
}

.comparison {
  width: 100%;
  height: auto;
  aspect-ratio: 1072 / 1268;
  margin-right: 0;
  margin-left: 0;
  background: none;
  overflow: hidden;
}

.comparison > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.faq-card article p {
  margin-left: 0;
  overflow-wrap: anywhere;
  font-size: 14px;
  line-height: 21px;
}

.faq-card h3 {
  font-size: 14px;
  font-weight: 700;
}

.faq-card > h2 {
  font-size: 16px;
  font-weight: 700;
  line-height: 19px;
}

.bottom-bar button {
  width: calc(100% - 26px);
  height: 52px;
  font-size: 19px;
  font-weight: 700;
  line-height: 52px;
  animation: pay-button-breathe 1.8s ease-in-out infinite;
}

@keyframes pay-button-breathe {
  0%, 100% {
    box-shadow: 0 3px 8px rgba(255, 75, 35, .25);
    transform: scale(1);
  }

  50% {
    box-shadow: 0 7px 22px rgba(255, 75, 35, .5);
    transform: scale(1.035);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bottom-bar button {
    animation: none;
  }
}

.bottom-bar {
  right: auto;
  left: 50%;
  width: min(100%, 430px);
  height: calc(72px + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  transform: translateX(-50%);
}

.bottom-bar button {
  width: calc(100% - 22px);
  max-width: 349px;
}

@media (max-width: 359px) {
  .main-card {
    padding-right: 12px;
    padding-left: 12px;
  }

  .annual-hint {
    min-height: 292px;
    padding: 35px 11px 12px;
  }

  .hint-copy {
    font-size: 13px;
    line-height: 23px;
  }

  .hint-copy strong {
    font-size: 15px;
  }

  .special-reminder p {
    margin-right: 11px;
    margin-left: 11px;
    font-size: 13px;
    line-height: 22px;
  }

  .process-title > span {
    padding-left: 12px;
    font-size: 15px;
  }

  .order-info {
    padding-right: 12px;
    padding-left: 12px;
  }

  .info-row {
    font-size: 14px;
  }

  .info-row > span:first-child {
    flex-basis: 82px;
    font-size: 15px;
  }

  .agreement {
    flex-wrap: wrap;
    padding: 6px 0;
    font-size: 12px;
    line-height: 18px;
  }

  .agreement a {
    margin-left: 25px;
  }

  .service-grid {
    margin-right: 8px;
    margin-left: 8px;
  }

  .service-grid > div {
    gap: 5px;
  }

  .service-icon {
    width: 36px;
    height: 36px;
  }

  .service-grid b {
    font-size: 13px;
  }

  .service-grid small {
    font-size: 10px;
  }

  .faq-card article {
    padding-right: 13px;
    padding-left: 13px;
  }

  .faq-card article p {
    margin-left: 0;
    font-size: 13px;
  }

}

@media (min-width: 431px) {
  .header {
    height: 273px;
    background-size: auto 237px;
  }

  .company-card {
    top: 107px;
  }

  .main-card,
  .process-card,
  .service-card,
  .faq-card {
    width: calc(100% - 28px);
  }


  .page,
  .bottom-bar {
    border-right: 1px solid rgba(172, 187, 210, .45);
    border-left: 1px solid rgba(172, 187, 210, .45);
  }
}