@charset "UTF-8";

/* =====================
  what
===================== */
.what {
  padding-block: 104px 120px;

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

  /* ==== u-inner ==== */
  .u-inner {
    display: block grid;
    grid-template-columns: auto 571px;
    gap: 43px 80px;

    @media (width <= 768px) {
      display: block flex;
      flex-direction: column;
      gap: calc((100 / 390) * 31 * 1vw);
    }

    /* ==== u-head ==== */
    .u-head {
      grid-area: 1 / 1 / 2 / 2;
      align-self: flex-start;
      padding-block: 20px 0;
    }

    /* ==== body ==== */
    .body {
      grid-area: 2 / 1 / 3 / 2;
      line-height: 2;
    }

    /* ==== picture ==== */
    .picture {
      display: block grid;
      grid-area: 1 / 2 / 3 / 3;
      place-content: center;
      align-self: flex-start;
      padding-block: 14px;
      border: 1px solid var(--green, #274827);
      border-radius: 10px;

      @media (width <= 768px) {
        padding-block: calc((100 / 390) * 7 * 1vw);
        padding-inline: calc((100 / 390) * 14 * 1vw);
        border-radius: calc((100 / 390) * 10 * 1vw);
      }

      & img {
        @media (width > 768px) {
          inline-size: 523px;
        }
      }
    }
  }
}

/* =====================
  action
===================== */
.action {
  padding-block: 103px 120px;
  background-color: var(--lightgreen);

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

  /* ==== u-inner ==== */
  .u-inner {
    display: block grid;
  }

  /* ==== u-head ==== */
  .u-head {
    margin-block-end: 58px;

    @media (width <= 768px) {
      margin-block-end: calc((100 / 390) * 32 * 1vw);
    }
  }

  .u-head + p {
    margin-block-end: 39px;
    line-height: 2;

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

  /* ==== section ==== */
  & section {
    display: block grid;
    grid-template-columns: 538px auto;
    gap: 0 104px;
    padding-block: 64px;
    border-block: 1px solid var(--gray300);

    @media (width <= 768px) {
      display: block flex;
      flex-direction: column;
      padding-block: calc((100 / 390) * 39 * 1vw);
    }

    & + section {
      border-block-start: none;
    }

    &:nth-child(even) {
      grid-template-columns: auto 538px;

      /* ==== picture ==== */
      .picture {
        grid-area: 1 / 2 / 4 / 3;
      }

      /* ==== hgroup ==== */
      .hgroup {
        grid-area: 1 / 1 / 2 / 2;
      }

      /* ==== body ==== */
      .body {
        grid-area: 2 / 1 / 3 / 2;
      }

      /* ==== list ==== */
      .list {
        grid-area: 3 / 1 / 4 / 2;
      }
    }

    /* ==== picture ==== */
    .picture {
      grid-area: 1 / 1 / 5 / 2;
    }

    /* ==== hgroup ==== */
    .hgroup {
      display: block grid;
      grid-area: 1 / 2 / 2 / 3;
      gap: 11px;
      padding-block-start: 22px;

      @media (width <= 768px) {
        gap: calc((100 / 390) * 10 * 1vw);
        padding-block-start: calc((100 / 390) * 31 * 1vw);
      }

      & span {
        font-family: var(--title);
        font-size: 20px;
        font-weight: 500;
        line-height: 1;
        color: var(--green);

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

      & h2 {
        font-size: 32px;
        font-weight: 500;
        line-height: 2;
        color: transparent;
        background: linear-gradient(99deg, #274827 15.76%, #aad59a 97.34%);
        background-clip: text;
        -webkit-text-fill-color: transparent;

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

    /* ==== body ==== */
    .body {
      grid-area: 2 / 2 / 3 / 3;
      padding-block-start: 27px;
      line-height: 2;

      @media (width <= 768px) {
        padding-block-start: calc((100 / 390) * 16 * 1vw);
      }
    }

    /* ==== list ==== */
    .list {
      display: block flex;
      flex-wrap: wrap;
      grid-area: 3 / 2 / 4 / 3;
      gap: 16px;
      padding-block-start: 38px;

      @media (width <= 768px) {
        gap: calc((100 / 390) * 8 * 1vw);
        padding-block-start: calc((100 / 390) * 24 * 1vw);
      }

      & li {
        inline-size: 96px;

        @media (width <= 768px) {
          inline-size: calc((100 / 390) * 72 * 1vw);
        }
      }
    }
  }
}