@charset "UTF-8";

/* =====================
  introduction
===================== */
.introduction {
  padding-block: 94px 45px;

  @media only screen and (width <= 768px) {
    padding-block: 15.6vw 20.5vw;
  }

  /* ==== u-inner ==== */
  .u-inner {
    display: block grid;
    grid-template-columns: 521px 646px;
    gap: 69px 113px;

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

  /* ==== u-hgroup ==== */
  .u-hgroup {
    grid-row: 1 / 2;
    grid-column: 1 / 2;
  }

  /* ==== body ==== */
  .body {
    grid-row: 2 / 3;
    grid-column: 1 / 2;
    margin-inline-start: 0;
    line-height: 2;

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

  /* ==== picture ==== */
  .picture {
    grid-row: 1 / 4;
    grid-column: 2 / 3;
    margin-block-start: 2px;

    @media only screen and (width <= 768px) {
      margin-block-start: 0.6vw;
    }
  }
}

/* =====================
  action
===================== */
.action {
  padding-block: 77px 120px;

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

  /* ==== u-inner ==== */
  .u-inner {
    position: relative;
    display: block grid;
    gap: 39px;

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

    /* ==== deco ==== */
    &::before,
    &::after {
      position: absolute;
      display: block flow;
      pointer-events: none;
      content: '';
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
    }

    &::before {
      inset-block-start: -19px;
      inset-inline-start: 30px;
      inline-size: 236px;
      block-size: 203px;
      background-image: url('../img/sdgs/action/deco1.png');
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
    }

    @media only screen and (width <= 768px) {
      &::before {
        inset-block-start: -3vw;
        inset-inline-start: 2.5vw;
        inline-size: calc((100 / 390) * 350 / 2 * 1vw);
        block-size: calc((100 / 390) * 304 / 2 * 1vw);
        background-image: url('../img/sdgs/action/deco1_sp.png');
      }
    }

    &::after {
      inset-block-start: 111px;
      inset-inline-end: 31px;
      inline-size: 139px;
      block-size: 139px;
      background-image: url('../img/sdgs/action/deco2.png');
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
    }

    @media only screen and (width <= 768px) {
      &::after {
        inset-block-start: 51vw;
        inset-inline-end: 2vw;
        inline-size: calc((100 / 390) * 210 / 2 * 1vw);
        block-size: calc((100 / 390) * 210 / 2 * 1vw);
        background-image: url('../img/sdgs/action/deco2_sp.png');
      }
    }

    /* ==== .title ==== */
    & .title {
      font-size: 30px;
      font-weight: 500;
      line-height: 1.8;
      color: var(--blue);

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

    /* ==== body ==== */
    & .body {
      line-height: 2;

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

    /* ==== contents ==== */
    .contents {
      position: relative;
      z-index: 2;
      display: block grid;
      gap: 57px;
      margin-block-start: 24px;

      @media only screen and (width <= 768px) {
        gap: 12.5vw;
        margin-block-start: 6.2vw;
      }

      /* ==== section ==== */
      & section {
        display: block grid;
        grid-template-columns: 499px 589px;
        gap: 33px 64px;
        padding-block: 75px 46px;
        padding-inline: 64px;
        background: white;
        border-radius: 20px;

        @media only screen and (width <= 768px) {
          display: block flex;
          flex-direction: column;
          gap: 8.6vw;
          padding-block: calc((100 / 390) * 50 * 1vw) calc((100 / 390) * 56 * 1vw);
          padding-inline: calc((100 / 390) * 24 * 1vw);
          border-radius: calc((100 / 390) * 20 * 1vw);
        }

        /* ==== lang=en ==== */
        & [lang='en'] {
          grid-row: 1 / 2;
          grid-column: 1 / 2;
          font-size: 40px;
          line-height: 1;
          color: var(--lightblue);

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

        /* ==== picture ==== */
        .picture {
          grid-row: 2 / 5;
          grid-column: 1 / 2;
          translate: 0 -20px;

          @media only screen and (width <= 768px) {
            translate: 0 0;
          }

          & img {
            border-radius: 10px;

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

        /* ==== catch ==== */
        .catch {
          grid-row: 1 / 2;
          grid-column: 2 / 3;
          margin-block-start: 20px;
          font-size: 26px;
          font-weight: 500;
          line-height: 1.8;

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

        /* ==== body ==== */
        .body {
          grid-row: 2 / 3;
          grid-column: 2 / 3;

          @media only screen and (width <= 768px) {
            margin-block-start: -2vw;
          }
        }

        /* ==== icons ==== */
        .icons {
          display: block flex;
          grid-row: 3 / 4;
          grid-column: 2 / 3;
          gap: 16px;
          justify-content: flex-start;
          margin-block-start: 14px;

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

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