@charset "UTF-8";

/* =====================
  header active
===================== */
@layer style {
  [data-page='sdgs'] .header ul {
    --active-anchor: --company;

    &::before {
      opacity: 1;
    }
  }
}

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

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

  /* ==== u-inner ==== */
  .u-inner {
    display: block grid;
    grid-template-columns: 560px 1fr;
    gap: 52px 61px;
    align-items: start;

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

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

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

  /* ==== img ==== */
  img {
    grid-row: 2 / 3;
    grid-column: 1 / 2;

    @media (width <=768px) {
      inline-size: 90%;
      margin-inline: auto;
    }
  }

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

    @media (width > 768px) {
      margin-block-start: 36px;
    }
  }
}

/* =====================
  action
===================== */
.action {
  padding-block: 156px 160px;
  background: var(--bg2);

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

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

    >h2 {
      font-size: 30px;
      font-weight: 600;
      text-align: center;

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

    >p {
      margin-block-start: 35px;
      text-align: center;

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

  /* ==== wrapper ==== */
  .wrapper {
    display: block grid;
    gap: 30px;
    margin-block-start: 61px;

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

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

    section {
      display: block grid;
      grid-template-columns: 400px 1fr;
      gap: 0 60px;
      align-items: start;
      padding-block: 58px 59px;
      padding-inline: 40px;
      background: #fff;
      border: 1px solid var(--primary, #082c60);
      border-radius: 20px;

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

    .head {
      position: relative;
      display: block flex;
      grid-row: 1 / 2;
      grid-column: 1 / 3;
      gap: 0 60px;
      align-items: center;
      padding-block-start: 24px;
      font-family: var(--serif);
      font-weight: 600;

      @media (width > 768px) {
        margin-block-end: 31px;
      }

      @media (width <=768px) {
        display: block flex;
        flex-direction: column;
        gap: 0.1vw;
        inline-size: 100%;
        padding-block-start: var(--nudge-1);
      }

      >span {
        font-size: 20px;
        color: var(--primary);

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

        span {
          font-size: 29px;

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

      h3 {
        font-size: 28px;

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

      &::before,
      &::after {
        position: absolute;
        inset-block-start: 0;
        inset-inline-start: 0;
        display: block flow;
        inline-size: 100%;
        block-size: 2px;
        content: '';

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

      &::before {
        background: #e6e6e6;
      }

      &::after {
        inline-size: 40px;
        background: var(--primary);

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

    .picture {
      grid-row: 2 / 4;
      grid-column: 1 / 2;

      @media (width <=768px) {
        inline-size: 100%;
        block-size: 38vw;
        margin-block-start: var(--nudge-3);
        margin-inline: auto;
        object-fit: cover;
        object-position: center top;
      }
    }

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

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

    ul {
      display: block flex;
      grid-row: 3 / 4;
      grid-column: 2 / 3;
      gap: 0 3px;
      margin-block-start: 24px;

      @media (width <=768px) {
        gap: 0 1vw;
        justify-content: center;
        inline-size: fit-content;
        margin-block-start: var(--nudge-3);
        margin-inline: auto;

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

    section:nth-child(even) {
      grid-template-columns: 1fr 400px;

      .picture {
        grid-column: 2 / 3;
      }

      .body {
        grid-column: 1 / 2;
      }

      ul {
        grid-column: 1 / 2;
      }
    }
  }

  /* ====  data-id="action02" ==== */
  [data-id='action02'] {
    .picture {
      @media (width <=768px) {
        object-position: center;
      }
    }
  }
}