@import url(lower.css);
@import url("https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css");

.common-top h2 {
  font-size: clamp(1.7em, 3vw, 44px);
  @media (width < 768px) {
    font-size: 1.3em;
  }
}
.case {
  padding-top: 10vw;
  display: flex;
  .title-common {
    width: max(30%, 200px);
  }
  .contents {
    flex: 1;
  }
  canvas {
    width: 100% !important;
    opacity: 0;
    transition: opacity 0.4s;
    &.show {
      opacity: 1;
    }
  }
}

.strengths {
  display: flex;
  align-items: start;
  .title-common {
    position: sticky;
    top: 160px;
    width: max(30%, 200px);
  }
  .contents {
    flex: 1;
    counter-reset: num 0;
  }
  li {
    padding: max(3vw, 1.2em) max(4vw, 1.2em);
    box-shadow: 0 10px 20px var(--bg-c);
    border-radius: 1.4em;
    display: flex;
    align-items: start;
    gap: max(3vw, 1.2em);
    counter-increment: num 1;
    &::before {
      content: "0" counter(num);
      font-size: 8vw;
      font-weight: 700;
      line-height: 0.9;
      transform: skew(-10deg);
      background-image: linear-gradient(var(--primary-c), #eee);
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
      opacity: 0.4;
    }
    & ~ li {
      margin-top: 5vw;
    }
  }
  h3 {
    font-size: max(1.8vw, 1.2em);
    margin-bottom: 1em;
    font-weight: 500;
  }
  p {
    line-height: 1.8;
  }
  .guaranteed {
    display: grid;
    .body {
      grid-area: 1/2/2/3;
    }
    .note {
      margin-top: 1em;
    }
  }
  .chart {
    grid-area: 2/1/3/3;
    width: min(100%, 630px);
    margin-left: auto;
  }
  canvas {
    width: 100% !important;
    opacity: 0;
    transition: opacity 0.4s;
    &.show {
      opacity: 1;
    }
  }
}
.result {
  padding-bottom: max(5vw, 50px);
}

@media (width < 768px) {
  .case {
    flex-direction: column;
    gap: 1.4em;
    .title-common {
      width: 100%;
    }
    ~ section:not(.cta) {
      padding-top: 0;
    }
  }
  .strengths {
    flex-direction: column;
    gap: 1.4em;
    .title-common {
      position: relative;
      top: 0;
      width: 100%;
    }
    li {
      position: relative;
      margin-top: 1em;
      padding-top: 2em;
      &::before {
        position: absolute;
        font-size: 4em;
        inset: -0.5em 1rem auto auto;
      }
      & ~ li {
        margin-top: 4em;
      }
    }
    .guaranteed .body {
      grid-area: 1/1/2/3;
    }
  }
}