:root {
  --main-color: #ffb3c0;
  --sub-color: #fef7f9;
  --text-color: #2c4b61;
  --accent-color: #ff9927;
  --support-color: #fce6d0;
  --secondary-color: #e37e8f;
}

@media (max-width: 1279px) {
  #fv {
    background-position: right 20% top 0;
    padding-top: 50px;
    padding-bottom: 50px;
  }
  .fv-bottom {
    flex-direction: column-reverse;
  }

  .fv-badges {
    width: 100%;
    max-width: 500px;
  }

  .badge {
    flex: 1;

    img {
      width: 100%;
    }
  }

  #macbook-campaign {
    padding-top: 5vw;
  }

  .macbook-catch {
    h2 {
      font-size: clamp(
        1.125rem,
        calc(0.614rem + 2.182vw),
        2.25rem
      ); /* min: 18px, max: 36px */

      &::before,
      &::after {
        height: 8vw;
      }
    }

    .highlight {
      font-size: clamp(
        0.75rem,
        calc(0.409rem + 1.455vw),
        1.5rem
      ); /* min: 12px, max: 24px */
    }
  }

  .list li {
    font-size: clamp(
      0.875rem,
      calc(0.705rem + 0.727vw),
      1.25rem
    ); /* min: 14px, max: 20px */
  }

  .feature-content {
    h3 {
      font-size: clamp(
        1rem,
        calc(0.602rem + 1.697vw),
        1.875rem
      ); /* min: 16px, max: 30px */
    }
  }

  .feature-image {
    width: 35%;
  }

  .instructor-profile {
    margin-top: 4vw;
  }
}

@media (max-width: 1099px) {
  .fv-campaign {
    max-width: 500px;
  }

  .worries-left {
    width: 65%;
  }
}

@media (max-width: 999px) {
  .sp {
    display: block;
  }

  .list li {
    &::before {
      margin-top: 0.3vw;
    }
  }

  .perfect-content {
    width: 70%;
    max-width: 700px;
  }

  .skills-cards {
    gap: 50px 4vw;
  }
}

@media (max-width: 949px) {
  .feature-box {
    flex-direction: column !important;
    width: 100%;
    max-width: 700px;
    margin: auto;
  }

  .feature-image {
    margin: auto;
    width: 100%;
    max-width: 500px;
  }

  .feature-content {
    width: 100%;

    h3 {
      font-size: 1.75rem;
    }
  }

  .instructor-content {
    margin: 50px auto 0;
    max-width: 600px;
    padding: 30px 20px;
  }

  .instructor-image {
    position: inherit;
    order: 1;
    width: 100%;
    right: 0;
    display: flex;
    justify-content: center;
  }

  .instructor-message {
    order: 2;
    margin-top: 50px;
    display: flex;
    justify-content: center;
    flex-direction: column;

    .instructor-handwritten {
      width: 100%;
      max-width: 500px;
    }

    p {
      font-size: clamp(
        1rem,
        calc(0.886rem + 0.485vw),
        1.25rem
      ); /* min: 16px, max: 20px */

      &.instructor-highlight {
        font-size: clamp(
          1.125rem,
          calc(0.784rem + 1.455vw),
          1.875rem
        ); /* min: 18px, max: 30px */
      }
    }
  }

  .instructor-profile {
    order: 3;
  }

  .instructor-name {
    left: 5%;
    top: 5%;
  }

  .sub {
    margin-top: 50px;
  }
}

@media (max-width: 899px) {
  .sp900 {
    display: block;
  }

  #fv {
    padding-right: 20px;
    padding-left: 20px;
  }

  .fv-top {
    max-width: 500px;
    width: 60%;
  }

  #worries {
    display: flex;
    flex-direction: column-reverse;
    gap: 30px;
    padding-bottom: 0;
  }

  .worries-left {
    width: 100%;
  }

  .worries-image {
    position: inherit;
    left: inherit;
    flex-direction: row-reverse;

    img {
      max-width: inherit;
      width: 45%;
      min-width: 200px;
    }

    &::after {
      transform: scaleX(-1);
      width: 15%;
      max-width: 100px;
      margin-right: -10%;
    }
  }

  #features {
    margin-top: -110px;
  }

  #perfect-fit {
    padding-bottom: 0;
  }

  .perfect-inner {
    flex-direction: column-reverse;
  }

  .perfect-heading {
    width: 100%;
  }

  .perfect-content {
    width: 100%;
    margin: auto;
  }

  .perfect-image {
    position: inherit;
    transform: translateX(-10%);
  }
}

@media (max-width: 799px) {
  .sp800 {
    display: block;
  }

  .fv-catch {
    p {
      font-size: clamp(
        0.625rem,
        calc(0.17rem + 1.939vw),
        1.625rem
      ); /* min: 10px, max: 26px */
    }
  }

  .feature-content {
    ul {
      padding-left: 10px;
    }
  }
}

@media (max-width: 649px) {
  .feature-content {
    h3 {
      font-size: 4vw;
    }
  }

  .recommend-comment {
    flex-direction: column;
    align-items: end;
    width: 100%;
    max-width: 500px;
    margin: 50px auto 0;
  }

  .comment-balloon {
    &::after {
      transform: rotate(65deg);
      right: 0;
      bottom: -10px;
      top: inherit;
      right: 20%;
    }
  }

  .comment-illust {
    width: 35%;
    min-width: 150px;

    img {
      width: 100%;
    }
  }

  .instructor-name {
    width: 30%;
    left: 5%;
    min-width: 150px;
  }
}

@media (max-width: 599px) {
  header {
    align-items: center;
    padding: 15px;

    .btn-wrap {
      width: 50%;
      min-width: 180px;
    }
  }

  h1 {
    width: 25%;
  }

  #fv {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .fv-catch {
    gap: 10px;
  }

  .fv-top {
    gap: 20px;
  }

  .fv-inner {
    gap: 20px;
  }

  .fv-bottom {
    max-width: 400px;
    width: 80%;
  }

  .fv-badges {
    gap: 10px;
  }

  .check-list {
    padding: 5vw;
  }

  .worries-sub {
    font-size: 3.5vw;
  }

  #instructor {
    padding-right: 0;
    padding-left: 0;
    padding-bottom: 0;
  }

  .instructor-content {
    border-radius: 0;
  }

  .price-offer-box {
    padding: 5vw;
  }

  #price-offer {
    padding: 50px 20px;
  }
}

@media (max-width: 549px) {
  .recommend-card {
    img {
      width: 20%;
    }

    p {
      font-size: 3.5vw;
    }
  }

  .comment-balloon {
    p {
      font-size: 4vw;
    }
  }

  #worries {
    padding-top: 50px;
  }

  #perfect-fit {
    padding-top: 70px;
    clip-path: polygon(0 8%, 100% 0, 100% 100%, 0% 100%);
  }

  #features {
    margin-top: -140px;
    padding-bottom: 20px;
  }

  .features-heading {
    margin: auto;
    margin-bottom: 0.5em;
    width: 80%;
  }

  .feature-content {
    font-size: clamp(
      0.875rem,
      calc(0.705rem + 0.727vw),
      1.25rem
    ); /* min: 14px, max: 20px */

    ul {
      li {
        padding-top: 5em;
      }
    }
  }

  .feature-list {
    gap: 80px;
  }

  .feature-box {
    &::before {
      bottom: -5%;
    }
  }

  .skills-ttl {
    max-width: 350px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 30px;
  }

  .skills-group {
    & + .skills-group {
      margin-top: 80px;
    }
  }

  #recommend {
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .recommend-heading h2 {
    font-size: clamp(
      1.25rem,
      calc(0.795rem + 1.939vw),
      2.25rem
    ); /* min: 20px, max: 36px */
    margin-bottom: 30px;

    &::before {
      width: 1.25em;
    }
  }

  #instructor {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .instructor-lead {
    font-size: clamp(
      1.25rem,
      calc(1.08rem + 0.727vw),
      1.625rem
    ); /* min: 20px, max: 26px */
  }

  .instructor-message {
    margin-top: 30px;
  }
}

@media (max-width: 499px) {
  .skills-ttl {
    img {
      width: 70%;
    }
  }

  .skills-label {
    font-size: 6vw;
  }

  .skills-description {
    font-size: clamp(
      1rem,
      calc(0.886rem + 0.485vw),
      1.25rem
    ); /* min: 16px, max: 20px */
  }

  #instructor {
    h2 {
      img {
        width: 50%;
        min-width: 200px;
      }
    }
  }

  .instructor-lead {
    font-size: clamp(
      1.25rem,
      calc(1.136rem + 0.485vw),
      1.5rem
    ); /* min: 20px, max: 24px */
  }

  .macbook-catch {
    h2:before {
      transform: rotate(-20deg) translateX(-20px);
    }

    h2:after {
      transform: rotate(20deg) translateX(20px);
    }
  }

  .macbook-image {
    width: 90%;
    margin: 20px auto 0;
  }
}

@media (max-width: 449px) {
  .worries-sub {
    font-size: clamp(
      0.75rem,
      calc(0.068rem + 2.909vw),
      2.25rem
    ); /* min: 12px, max: 36px */
  }

  .list li::before {
    margin-top: 0.5vw;
  }
}

@media (max-width: 399px) {
  .macbook-catch h2 {
    font-size: 4.5vw;
  }
}