@charset "UTF-8";

/* =====================
  u-mv
===================== */
.u-mv {
  @media only screen and (width <= 768px) {
    .inner {
      padding-inline-start: calc((100 / 390) * 16 * 1vw);
    }
  }
}

/* =====================
  what
===================== */
.what {
  padding-block: 116px 0;

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

  /* ==== u-inner ==== */
  .u-inner {
    display: block grid;
    gap: 0;
    max-inline-size: 920px;

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

  /* ==== body ==== */
  .body {
    padding-inline: 25px;
    margin-block-start: 56px;
    font-size: 18px;
    line-height: 2;
    color: var(--black);

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

  /* ==== picture ==== */
  .picture {
    display: block flow;
    margin-block-start: 17px;
    margin-inline: auto;

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

/* =====================
  action
===================== */
.action {
  padding-block: 80px 96px;

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

  /* ==== u-inner ==== */
  .u-inner {
    display: block grid;
    gap: 49px;
    padding-block: 59px 64px;
    background: #f1fcff;
    border-radius: 20px;

    @media only screen and (width <= 768px) {
      gap: calc((100 / 390) * 30 * 1vw);
      max-inline-size: calc((100 / 390) * 358 * 1vw);
      padding-block: 12.5vw;
      padding-inline: calc((100 / 390) * 16 * 1vw);
      border-radius: calc((100 / 390) * 20 * 1vw);
    }
  }

  /* ==== u-hgroup ==== */
  .u-hgroup {
    margin-inline: auto;

    @media (width > 768px) {
      translate: -12px 0;
    }
  }

  /* ==== section1 ==== */
  & section[data-id='1'] {
    display: block flex;
    gap: 48px;
    align-items: center;
    justify-content: center;
    max-inline-size: 987px;
    margin-inline: auto;

    @media only screen and (width <= 768px) {
      flex-direction: column;
      gap: calc((100 / 390) * 17 * 1vw);
      max-inline-size: unset;
    }

    .icon {
      display: block flex;
      flex-shrink: 0;
      gap: 30px;

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

        & img {
          inline-size: calc((100 / 390) * 90 * 1vw);
        }
      }
    }

    /* ==== body ==== */
    .body {
      font-size: 18px;
      line-height: 2;
      color: var(--black);

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

  /* ==== section2 ==== */
  & section[data-id='2'] {
    display: block grid;
    grid-template-columns: auto 520px;
    gap: 15px 60px;
    align-items: center;
    padding-inline: 80px;
    margin-block-start: -2px;

    @media only screen and (width <= 768px) {
      display: block flex;
      flex-direction: column;
      gap: 4.2vw;
      padding-inline: 0;
    }

    .head {
      grid-area: 1 / 1 / 2 / 2;
      inline-size: fit-content;
      padding-block-end: 4px;
      margin-block-start: 24px;
      font-size: 24px;
      font-weight: 500;
      color: var(--main);
      border-bottom: 1px solid var(--main);

      @media only screen and (width <= 768px) {
        padding-block-end: 1vw;
        margin-block-start: 0;
        font-size: calc((100 / 390) * 20 * 1vw);
      }
    }

    .body {
      grid-area: 2 / 1 / 3 / 2;
      font-size: 18px;
      line-height: 2;
      color: var(--black);

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

    .picture {
      grid-area: 1 / 2 / 4 / 3;
      border-radius: 30px;

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