.problem {
  margin-bottom: calc(var(--vw) * 85);
  @media screen and (min-width: 769px) {
    margin-bottom: 22px;
  }
}
:where(.problem) {
  .problem__lead {
    text-align: center;
    color: #DF8F9B;
    margin-bottom: 25px;
    font-size: calc(var(--rem) * 17);
    letter-spacing: 1.36px;
    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 20);
      letter-spacing: 1.6px;
      margin-bottom: 22px;
    }
  }
  .problem__tabs {
    display: grid;
    place-content: center;
    grid-template-columns: 149px 149px;
    gap: 8px;
    margin-bottom: 27px;
    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 22);
      gap: 15px;
      letter-spacing: 1.76px;
      color: #DF8F9B;
      grid-template-columns: 273px 273px;
      margin-bottom: 28px;
    }
  }
  .problem__tabs-button {
    width: 100%;
    display: block;
    border: 1px solid #DF8F9B;
    box-sizing: border-box;
    border-radius: 54.74px;
    text-align: center;
    color: #DF8F9B;
    height: 36px;
    @media screen and (min-width: 769px) {
      border-radius: 100px;
      border: 2px solid #DF8F9B;
      padding: 8px 0;
      height: 57px;
    }
    &.is-active {
      color: #FFF;
      border: none;
      background: linear-gradient(to bottom, #DF8F9B, #FFC8C2);
    }
  }
  .problem__wrapper {
    position: relative;
  }

  .problem__anchor {
    position: relative;
    margin: 0 auto;
    width: calc(var(--vw) * 325);
    opacity: 0;
    pointer-events: none;
    @media screen and (min-width: 769px) {
      width: min(574px, calc(var(--vw) * 574));
      margin: 0 auto;
    }
    &.is-active {
      opacity: 1;
      pointer-events: initial;
    }
    &.is-body {
      position: absolute;
      right: 0;
      left: 0;
      margin: 0 auto;
      top: 0;
      width: 100%;
      @media screen and (min-width: 769px) {
        width: min(400px, calc(var(--vw) * 400));
      }
      .problem__anchor-list {
        right: calc(var(--vw) * 216);
        top: calc(var(--vw) * 18);
        @media screen and (min-width: 769px) {
          top: min(70px, calc(var(--vw) * 70));
          right: min(415px, calc(var(--vw) * 415));
          row-gap: min(30px, calc(var(--vw) * 30));
        }
        &.is-right {
          left: calc(var(--vw) * 216);
          top: calc(var(--vw) * 34);
          @media screen and (min-width: 769px) {
            right: unset;
            top: min(100px, calc(var(--vw) * 100));
            left: min(415px, calc(var(--vw) * 415));
          }
        }
      }

    }
  }
  .problem__anchor-list {
    display: grid;
    position: absolute;
    gap: calc(var(--vw) * 10);
    right: calc(var(--vw) * 211);
    top: calc(var(--vw) * 20);
    @media screen and (min-width: 769px) {
      top: min(55px, calc(var(--vw) * 55));
      right: min(550px, calc(var(--vw) * 550));
      row-gap: min(16px, calc(var(--vw) * 16));
    }
    &.is-right {
      left: calc(var(--vw) * 211);
      top: calc(var(--vw) * 0);
      @media screen and (min-width: 769px) {
        right: unset;
        top: min(10px, calc(var(--vw) * 10));
        left: min(540px, calc(var(--vw) * 540));
      }
    }
  }
  .problem__anchor-item {
    width: calc(var(--vw) * 110);
    @media screen and (min-width: 769px) {
      display: block;
      width: min(200px, calc(var(--vw) * 200));
    }
  }
}