@charset "UTF-8";

.main {
  /* =====================
    MV
  ===================== */
  .u-mv {
    &::before {
      background-image: url('../img/sdgs/mv.png');
    }
    @media (width <= 768px) {
      &::before {
        background-image: url('../img/sdgs/mv_2x.png');
      }
    }
  }
  /* =====================
    SDGs（持続可能な開発目標）とは？
  ===================== */
  .introduction {
    position: relative;
    padding-block: 98px 104px;

    @media (width <= 768px) {
      padding-block: calc((100 / 750) * 101 * 1vw) calc((100 / 750) * 128 * 1vw);
    }
    .inner {
      inline-size: 1022px;
      margin-inline: auto;
      display: block grid;
      grid-template-columns: auto max-content;
      align-items: center;
      column-gap: 60px;

      @media (width <= 768px) {
        inline-size: 100%;
        grid-template-columns: 1fr;
        column-gap: 0;
        padding-inline: calc((100 / 750) * 40 * 1vw);
        row-gap: calc((100 / 750) * 47 * 1vw);
      }
      .u-h2-title {
        grid-column: 1/2;
        grid-row: 1/2;

        @media (width <= 768px) {
          grid-column: 1/2;
          grid-row: 1/2;
          gap: calc((100 / 750) * 20 * 1vw);
        }
      }
      .description {
        margin-block-start: 40px;
        grid-column: 1/2;
        grid-row: 2/3;

        @media (width <= 768px) {
          margin-block-start: calc((100 / 750) * 23 * 1vw);
          grid-column: 1/2;
          grid-row: 2/3;
        }
      }
      .picture {
        grid-column: 2/3;
        grid-row: 1/3;

        @media (width <= 768px) {
          grid-column: 1/2;
          grid-row: 3/4;
          margin-block-start: calc((100 / 750) * 19 * 1vw);
          & > img {
            width: calc((100 / 750) * 710 * 1vw);
          }
        }
      }
    }
  }

  /* =====================
    アクション
  ===================== */
  .action {
    position: relative;
    padding-block: 0 104px;

    @media (width <= 768px) {
      padding-block: 0 calc((100 / 750) * 128 * 1vw);
    }
    .action-list {
      background-color: #fffde8;

      & > li {
        border-block-start: solid 4px #ffed00;
        padding-inline: 90.5px;
        padding-block: 57px;
        display: block flex;
        align-items: center;
        justify-content: space-between;
        gap: 79px;

        &:nth-child(even) {
          flex-direction: row-reverse;
        }

        &:last-child {
          border-block-end: solid 4px #ffed00;
        }

        @media (width <= 768px) {
          border-block-start: solid calc((100 / 750) * 6 * 1vw) #ffed00;
          padding-inline: calc((100 / 750) * 40 * 1vw);
          padding-block: calc((100 / 750) * 74 * 1vw);
          flex-direction: column;
          gap: calc((100 / 750) * 32 * 1vw);

          &:nth-child(even) {
            flex-direction: column;
          }
          &:last-child {
            border-block-end: solid calc((100 / 750) * 6 * 1vw) #ffed00;
          }
        }
        .picture {
          display: block flow;
          flex-shrink: 0;

          @media (width <= 768px) {
            & > img {
              width: calc((100 / 750) * 510 * 1vw);
            }
          }
        }

        .no {
          font-family: var(--title);
          font-size: 20px;
          font-weight: bold;
          font-style: italic;
          color: #999;

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

        .title {
          inline-size: fit-content;
          margin-block-start: 2px;
          font-size: 32px;
          font-weight: 500;
          line-height: 1.61;
          background-color: #ffed00;
          padding-inline: 30px;
          padding-block: 5px;

          @media (width <= 768px) {
            font-size: calc((100 / 750) * 36 * 1vw);
            padding-inline: calc((100 / 750) * 30 * 1vw);
            padding-block: calc((100 / 750) * 5 * 1vw);
          }
        }

        .description {
          margin-block-start: 33px;

          @media (width <= 768px) {
            margin-block-start: calc((100 / 750) * 33 * 1vw);
          }
        }

        .icon-list {
          display: block flex;
          gap: 29px;
          margin-block-start: 32px;

          @media (width <= 768px) {
            margin-block-start: calc((100 / 750) * 31 * 1vw);
            gap: calc((100 / 750) * 29 * 1vw);

            & li {
              & img {
                width: calc((100 / 750) * 160 * 1vw);
              }
            }
          }
        }
      }
    }
  }
}