@charset "UTF-8";

.main {
  /* =====================
    MV
  ===================== */
  .u-mv {
    background-image: url('../img/sdgs/mv.png');

    .fs {
      font-size: 34px;
    }
    @media (width <= 768px) {
      background-image: url('../img/sdgs/mv_2x.png');

      .fs {
        font-size: calc((100 / 390) * 24 * 1vw);
      }
    }
  }
  /* =====================
    What is SDGs?
  ===================== */
  .sdgs-about {
    padding-block: 104px 128px;

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

    .u-inner {
      display: block flex;
      gap: 64px;

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

      .picture {
        display: block flow;
        flex-shrink: 0;

        @media (width <= 768px) {
          & img {
            inline-size: calc((100 / 390) * 358 * 1vw);
          }
        }
      }
      .about_wrap {
        margin-block-start: 25px;

        @media (width <= 768px) {
          margin-block-start: 0;
        }
        .description {
          margin-block-start: 42px;

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

  /* =====================
    取り組み
  ===================== */
  .action {
    position: relative;
    padding-block-start: 91px;
    padding-block-end: 128px;

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

    .u-inner {
      & > .description {
        text-align: center;
        margin-block-start: 35px;

        @media (width <= 768px) {
          margin-block-start: calc((100 / 390) * 24 * 1vw);
          text-align: left;
        }
      }

      .action-list {
        margin-block-start: 71px;

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

        & > li {
          background-color: #fff;
          display: block flex;
          gap: 64px;

          @media (width <= 768px) {
            flex-direction: column-reverse;
            gap: calc((100 / 390) * 43 * 1vw);
            padding-block-end: calc((100 / 390) * 48 * 1vw);
          }
          .wrap {
            position: relative;
            padding-inline-start: 64px;
            padding-block: 52px;

            @media (width <= 768px) {
              padding-inline: calc((100 / 390) * 24 * 1vw);
              padding-block: 0;
            }
            .no {
              position: relative;
              font-family: var(--yumin);
              font-size: 28px;
              color: var(--primary);

              @media (width <= 768px) {
                font-size: calc((100 / 390) * 26 * 1vw);
                position: absolute;
                top: calc((100 / 390) * -21 * 1vw);
                right: calc((100 / 390) * 25 * 1vw);
              }
            }
            .content-catch {
              margin-block-start: 25px;

              @media (width <= 768px) {
                margin-block-start: 0;
              }
            }
            .description {
              margin-block-start: 44px;

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

            .icon-list {
              display: block flex;
              gap: 16px;
              margin-block-start: 55px;

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

                & img {
                  inline-size: calc((100 / 390) * 72 * 1vw);
                }
              }
            }
          }
          .picture {
            display: block flow;
            flex-shrink: 0;

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

          & + li {
            margin-block-start: 72px;

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