@charset "UTF-8";

/* =====================
  c-list
===================== */
.c-list {
  display: grid;
  grid-template-rows: auto auto;
  grid-template-columns: repeat(4, 1fr);
  gap: 41px 53px;
  align-items: flex-start;
  padding-inline: 40px;

  @media only screen and (width <= 768px) {
    grid-template-columns: repeat(2, 1fr);
    gap: calc((100 / 390) * 40 * 1vw) calc((100 / 390) * 9 * 1vw);
    padding-inline: calc((100 / 390) * 0 * 1vw);
  }

  & li {
    display: block grid;
    gap: 7px;

    @media only screen and (width <= 768px) {
      gap: 2vw;
    }
  }

  .picture {
    border-radius: 20px;

    @media only screen and (width <= 768px) {
      border-radius: calc((100 / 390) * 20 * 1vw);
    }
  }

  .text {
    align-self: flex-end;
    font-size: 18px;
    line-height: 2;
    color: var(--black);
    text-align: center;

    @media only screen and (width <= 768px) {
      font-size: calc((100 / 390) * 15 * 1vw);
      line-height: 1.8;
    }
  }
}

/* =====================
  introduction
===================== */
.introduction {
  padding-block: 119px 80px;

  @media only screen and (width <= 768px) {
    padding-block: calc((100 / 390) * 80 * 1vw) calc((100 / 390) * 63.7 * 1vw);
  }

  & p {
    font-size: 18px;
    line-height: 1.8;
    text-align: center;

    @media only screen and (width <= 768px) {
      inline-size: calc((100 / 390) * 266 * 1vw);
      margin-inline: auto;
      font-size: calc((100 / 390) * 15 * 1vw);
      line-height: 1.8;
    }
  }
}

/* =====================
  pickup
===================== */
.pickup {
  padding-block: 91px 98px;
  background: #f1fcff;

  @media only screen and (width <= 768px) {
    padding-block: calc((100 / 390) * 64 * 1vw);
  }

  .u-inner {
    display: block grid;
    gap: 82px;

    @media only screen and (width <= 768px) {
      gap: 8.2vw;
      padding-inline: calc((100 / 390) * 16 * 1vw);
    }
  }

  .u-hgroup {
    &::before {
      inset-inline-start: 19px;
    }

    @media only screen and (width <= 768px) {
      &::before {
        inset-inline-start: calc((100 / 390) * 5 * 1vw);
      }
    }
  }
}

/* =====================
  online
===================== */
.online {
  padding-block: 90px 96px;

  @media only screen and (width <= 768px) {
    padding-block: calc((100 / 390) * 64 * 1vw);
  }

  .u-inner {
    display: block grid;
    gap: 82px;

    @media only screen and (width <= 768px) {
      gap: calc((100 / 390) * 32 * 1vw);
    }
  }

  .u-hgroup {
    &::before {
      inset-inline-start: 68px;
    }

    @media only screen and (width <= 768px) {
      &::before {
        inset-inline-start: calc((100 / 390) * 35 * 1vw);
      }
    }
  }

  .c-list {
    grid-template-columns: repeat(5, 1fr);
    gap: 60px 35px;
    padding-inline: 79.6px;

    @media only screen and (width <= 768px) {
      grid-template-columns: repeat(2, 1fr);
      gap: calc((100 / 390) * 16 * 1vw);
      padding-inline: calc((100 / 390) * 0 * 1vw);
    }
  }

  /* ==== banner ==== */
  .banner {
    display: block flex;
    gap: 48px;
    justify-content: center;
    margin-block-start: -2px;

    @media only screen and (width <= 768px) {
      flex-direction: column;
      gap: calc((100 / 390) * 24 * 1vw);
      padding-inline: calc((100 / 390) * 16 * 1vw);
      margin-block-start: calc((100 / 390) * 24 * 1vw);
      margin-inline: calc(50% - 50cqi);
    }
  }

  /* ==== attention-text ==== */
  .attention-text {
    margin-block: -3em 1em;
    text-align: center;

    @media only screen and (width <= 768px) {
      margin-block: 0;

      @media only screen and (width <= 768px) {
        font-size: calc((100 / 390) * 14 * 1vw);
      }
    }
  }
}