/* ============================================
   Classes Page
   ============================================ */

.classes {
  padding: 0 var(--padding-x);
  padding-top: var(--fv-padding-top);

  .title {
    font-family: var(--font-en);
    font-size: var(--fv-title-font-size);
    font-weight: normal;
    line-height: normal;
    margin-bottom: var(--fv-title-margin-bottom);
  }

  .text-fit {
    margin-bottom: var(--fv-logo-margin-bottom);
  }


  .flow {
    display: flex;
    justify-content: center;
    padding: 85rem 0;
  }
}

/* --- 講座セクション --- */
.courses {
  .border {
    border-top: 1px solid #D9D9D9;
  }

  .inner {
    padding: 36rem var(--padding-x) 80rem;
  }

  .heading {
    font-family: var(--font-ja);
    font-size: 28rem;
    font-weight: normal;
    font-feature-settings: var(--ffs-pwid);
    line-height: normal;
    margin-bottom: 105rem;
  }

  .course-grid {
    row-gap: 100rem;
  }

  .course {
    display: flex;
    flex-direction: column;
    gap: 32rem;
    text-decoration: none;
    color: inherit;

    .head {
      display: flex;
      flex-direction: column;
      gap: 5rem;
    }

    .title {
      font-family: var(--font-ja);
      font-size: 32rem;
      font-weight: normal;
      letter-spacing: 1.35rem;
      line-height: 1.81;
      font-feature-settings: var(--ffs-pwid);
    }

    .subtitle {
      font-family: var(--font-en);
      font-size: 22.122rem;
      font-weight: normal;
      line-height: normal;
    }

    .desc {
      font-size: 18.1rem;
      letter-spacing: 1.6rem;
      line-height: 1.81;
      font-feature-settings: var(--ffs-pwid);
    }

    .visual {
      margin-top: auto;
      width: 100%;
      aspect-ratio: 16 / 9;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      &.visual--cfc { background-color: var(--color-cfc); }
      &.visual--iep { background-color: var(--color-iep); }
      &.visual--pppa { background-color: var(--color-pppa); }
      &.visual--pppb { background-color: var(--color-pppb); }
      &.visual--idw { background-color: var(--color-idw); }
    }
  }
}

html[lang="en"] .courses .course .title {
  letter-spacing: 0;
  line-height: 1.8;
}

/* --- サーティフィケーション --- */
.certification {
  padding: 43rem var(--padding-x) 80rem;

  .heading {
    font-family: var(--font-ja);
    font-size: 28rem;
    font-weight: normal;
    font-feature-settings: var(--ffs-pwid);
    line-height: normal;
    margin-bottom: 80rem;
  }

  .body {
    font-size: 18rem;
    letter-spacing: 1.08rem;
    line-height: 1.81;
    max-width: 745rem;

    p + p {
      margin-top: 1em;
    }
  }
}

html[lang="en"] .certification .body {
  letter-spacing: 0;
  line-height: 1.8;
}

/* ============================================
   Responsive - SP
   ============================================ */
@media (max-width: 700px) {
  .classes {
    .flow {
      padding: 24rem 0 100rem;
    }
  }

  .courses {

    .inner {
      padding: 43rem var(--padding-x) 101rem;
    }

    .heading {
      font-size: 22rem;
      margin-bottom: 52rem;
    }

    .course-grid {
      grid-template-columns: 1fr;
      gap: 60rem;
    }

    .course {
      gap: 13rem;

      .title {
        font-size: 20rem;
        letter-spacing: 1rem;
      }

      .subtitle {
        font-size: 13rem;
      }

      .desc {
        font-size: 14rem;
        letter-spacing: 0;
        line-height: 1.9;
      }
    }
  }

  .certification {
    padding: 44rem var(--padding-x) 60rem;

    .heading {
      font-size: 18rem;
      line-height: 1.5;
      margin-bottom: 49rem;
    }

    .body {
      font-size: 13rem;
      letter-spacing: 0;
      line-height: 1.9;
    }
  }
}