@charset "UTF-8";

/* =====================
  introduction
===================== */
.introduction {
  padding-block: 58px 160px;

  @media (width <=768px) {
    padding-block: var(--nudge-7) var(--nudge-7);
    margin-block-start: 8vw;
  }

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

    @media (width <=768px) {
      gap: var(--nudge-4);
    }
  }

  @media (width > 768px) {
    .u-hgroup .title {
      margin-block-start: 9px;
      font-family: var(--yumin);
      font-size: 19px;
    }
  }

  .body {
    @media (width > 768px) {
      padding-inline: 80px;
    }

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

  img {
    display: block flow;
    margin-block-start: 38px;
    margin-inline: auto;

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

/* =====================
  action
===================== */
.action {
  padding-block: 160px 150px;
  background: var(--bg-light-green);

  @media (width <=768px) {
    padding-block: var(--nudge-7) var(--nudge-7);
    margin-block-start: 8vw;
  }

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

    @media (width > 768px) {
      padding-inline: 40px;
    }

    @media (width <=768px) {
      display: block flex;
      flex-direction: column;
      gap: var(--nudge-4);
    }
  }

  /* =====================
    head
  ===================== */
  .head {
    position: relative;
    display: block grid;
    grid-template-columns: auto 561px;
    gap: 23px 58px;
    align-content: center;
    align-items: start;
    margin-block-end: 76px;

    @media (width > 768px) {
      padding-inline-start: 40px;
    }

    @media (width <=768px) {
      display: block flex;
      flex-direction: column;
      gap: var(--nudge-2);
      margin-block-end: var(--nudge-4);
    }

    &::before {
      position: absolute;
      inset-block-start: -1px;
      inset-inline-start: 0;
      font-family: var(--title);
      font-size: 160px;
      font-weight: 300;
      line-height: 0.75;
      color: #e5f4e4;
      white-space: pre;
      pointer-events: none;
      content: 'SDGs\A ACTION';

      @media (width <=768px) {
        inset-block-start: -20vw;
        font-size: calc((100 / 390) * 80 * 1vw);
      }
    }

    h2 {
      position: relative;
      z-index: 2;
      grid-row: 1/ 2;
      grid-column: 1/ 2;
      align-self: end;
      margin-block-start: 60px;
      font-size: 34px;
      font-weight: 500;
      letter-spacing: 1.7px;

      @media (width <=768px) {
        align-self: center;
        margin-block-start: 0;
        font-size: calc((100 / 390) * 24 * 1vw);
        text-align: center;
        letter-spacing: calc((100 / 390) * 1.2 * 1vw);
      }
    }

    p {
      position: relative;
      z-index: 2;
      grid-row: 2/ 3;
      grid-column: 1/ 2;

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

    img {
      position: relative;
      z-index: 2;
      grid-row: 1/ 3;
      grid-column: 2/ 3;

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

  /* =====================
    section
  ===================== */
  section {
    position: relative;
    display: block grid;
    grid-template-columns: auto 1fr;
    gap: 0 76px;

    @media (width <=768px) {
      display: block flex;
      flex-direction: column;
      gap: 0;
      padding-block: var(--nudge-4);
    }

    @media (width > 768px) {
      padding-block: 10px;
      margin-inline: 40px;
    }

    &+section {
      @media (width > 768px) {
        margin-block-start: 26px;
      }
    }

    &::before,
    &::after {
      position: absolute;
      inset-inline: 0;
      display: block flow;
      content: '';
    }

    &::before {
      inset-block-start: 0;
      inline-size: 100%;
      block-size: 1px;
      background: #bababa;
    }

    &::after {
      inset-block-start: -1px;
      inline-size: 60px;
      block-size: 2px;
      background: var(--primary);

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

    .number {
      grid-row: 1/ 2;
      grid-column: 1/ 3;
      padding-inline-start: 21px;
      color: var(--primary);

      @media (width <=768px) {
        padding-inline-start: 2.5vw;
      }

      span {
        position: relative;
        font-weight: 600;
      }

      span:first-child {
        font-size: 20px;

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

        &::before {
          position: absolute;
          inset-block-start: 0;
          inset-inline-start: -20px;
          display: block flow;
          inline-size: 15px;
          aspect-ratio: 1 / 1;
          content: '';
          background: var(--primary);
          clip-path: polygon(0 0, 100% 0, 0 100%);

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

      span:last-child {
        font-size: 30px;

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

    h3 {
      grid-row: 2/ 3;
      grid-column: 1/ 3;
      margin-block-start: 8px;
      font-family: var(--mincho);
      font-size: 30px;
      font-weight: 500;
      line-height: 1.6;
      letter-spacing: 1.5px;

      @media (width <=768px) {
        margin-block-start: var(--nudge-1);
        font-size: calc((100 / 390) * 22 * 1vw);
        letter-spacing: calc((100 / 390) * 1.5 * 1vw);
      }
    }

    img {
      grid-row: 3/ 4;
      grid-column: 1/ 3;
      margin-block-start: 29px;

      @media (width <=768px) {
        margin-block-start: var(--nudge-2);
      }
    }

    p {
      grid-row: 4/ 5;
      grid-column: 2/ 3;
      margin-block-start: 40px;

      @media (width <=768px) {
        margin-block-start: var(--nudge-3);
        font-size: calc((100 / 390) * 15 * 1vw);
      }
    }

    ul {
      display: block flex;
      grid-row: 4/ 5;
      grid-column: 1/ 2;
      gap: 4px;
      margin-block-start: 11px;

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

        li {
          inline-size: calc((100 / 390) * 80 * 1vw);
        }
      }
    }
  }
}