ul {
  list-style: disc;
}

li {
  line-height: 120%;
  margin-top: 14px;
  font-weight: var(--light);
}

.calc-header {
  margin-top: 50px;
}

.wrapper {
  width: 100%;
  min-height: 100vh;
}

.card-wrapper {
  width: min(100%, 420px);
  perspective: 500px;
  margin-bottom: -40px;
}

  .card-wrapper:first-child {
    margin-bottom: -50px;
  }

  .card-wrapper:last-child {
    margin-bottom: 0;
  }

.cards {
  width: 100%;
  max-width: 420px;
  margin: 40px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.card {
  width: 100%;
  height: fit-content;
  min-height: 440px;
  border-radius: 20px;
  border: none;
  box-sizing: border-box;
}

  .card.three {
    box-shadow: 0px 0px 0 2px var(--magenta-ternary-3);
  }

.accordion {
  --bs-accordion-bg: color-mix(in srgb, var(--magenta-ternary-3) 25%, #FFF);
  --bs-accordion-active-bg: color-mix(in srgb, var(--magenta-ternary-3) 25%, #FFF);
  --bs-border-radius: var(--s16px);
}

  .accordion .accordion-button {
    --bs-accordion-btn-active-bg: initial;
    --bs-accordion-active-color: var(--font3);
    --bs-accordion-btn-bg: color-mix(in srgb, var(--magenta-ternary-3) 25%, #FFF);
    --bs-accordion-btn-color: none !important;
    --bs-accordion-btn-icon: none !important;
    --bs-accordion-btn-active-icon: none !important;
  }

    .accordion .accordion-button::after {
      display: none !important;
    }

  .accordion .change-purpose i.rotated {
    transform: rotate(180deg);
    transition: transform 0.3s ease;
  }

  .accordion .accordion-item,
  .accordion .accordion-item:not(:first-of-type) {
    border: none !important;
    box-shadow: none;
  }

    .accordion .accordion-item:not(:last-of-type) {
      margin-block-end: var(--s28px) !important;
    }

    .accordion .accordion-item.result {
      border: 2px solid var(--magenta-primary-2) !important;
      --bs-accordion-bg: white !important;
      --bs-accordion-active-bg: white !important;
    }

      .accordion .accordion-item.result .accordion-button {
        --bs-accordion-btn-bg: white !important;
        --bs-accordion-btn-active-bg: white !important;
      }

.result-image {
  max-height: 80px;
}

:is(#resultContent, #noRecommendationContent):not(.hidden) {
  display: flex !important;
}

.radio-card:not(.hidden) {
  display: flex !important;
}

@media (min-width: 48em) {
  .calc-header {
    position: sticky;
    top: 140px;
    align-self: flex-start;
    width: 50%;
  }

  .wrapper {
    width: fit-content;
  }

  .card-wrapper {
    width: 340px;
    min-height: fit-content;
  }

  .cards {
    max-width: none;
  }
}

@media (min-width: 62em) {
  .card-wrapper {
    width: 380px;
  }

    .card-wrapper:first-child {
      margin-bottom: -60px;
    }

    .card-wrapper .card {
      min-height: 500px;
      border-radius: 32px;
    }
}

@media (min-width: 75em) {
  .card-wrapper {
    width: 486px;
  }

    .card-wrapper:first-child {
      margin-bottom: -60px;
    }

    .card-wrapper .card {
      min-height: 530px;
    }

  li {
    margin-top: 16px;
  }
}

@media (min-width: 87.5em) {
  .card-wrapper {
    margin-bottom: -70px;
  }

    .card-wrapper:first-child {
      margin-bottom: -90px;
    }

    .card-wrapper .card {
      height: 560px;
    }
}