@charset "UTF-8";

.main {
  /* =====================
    MV
  ===================== */
  .u-mv {
    background-image: unset;
    .u-inner {
      &::before {
        background-image: url('../img/sdgs/mv.png');
      }
      @media (width <= 768px) {
        &::before {
          background-image: url('../img/sdgs/mv_2x.png');
        }
      }
    }
  }

  /* =====================
    What is SDGs?
  ===================== */
  .introduction {
    position: relative;
    padding-block: 23px 120px;

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

    &::before {
      content: '';
      display: block flow;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center top;
      background-image: url('../img/sdgs/mv_bg.png');
      inline-size: 100%;
      block-size: 1765px;
      position: absolute;
      left: 0;
      bottom: 0;
      pointer-events: none;
      z-index: -1;
    }

    @media (width <= 768px) {
      &::before {
        background-image: url('../img/sdgs/mv_bg_2x.png');
        block-size: calc((100 / 390) * 1464 * 1vw);
      }
    }

    .u-inner {
      position: relative;

      .description {
        margin-block-start: 63px;
        text-align: center;
        line-height: 1.9;

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

      .img {
        display: block flow;
        background-color: #fff;
        padding-inline: 40px;
        padding-block: 8px;
        border-radius: 16px;
        margin-inline: auto;
        margin-block-start: 79px;

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

  /* =====================
    取り組んでいるSDGs
  ===================== */
  .action {
    position: relative;
    padding-block: 103px 120px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image: url('../img/sdgs/action_bg.png');

    @media (width <= 768px) {
      background-image: url('../img/sdgs/action_bg_2x.png');
      padding-block-start: calc((100 / 390) * 64 * 1vw);
      padding-block-end: calc((100 / 390) * 90 * 1vw);
    }

    .u-inner {
      .action-list {
        margin-block-start: 64px;

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

        .item {
          position: relative;
          display: block flex;
          align-items: start;
          justify-content: space-between;
          gap: 92.05px;

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

          .title_unit {
            position: relative;
            flex-shrink: 0;

            .number {
              background-image: linear-gradient(126deg, #22327e 35%, #5d69a1 56%, #0f1b53 83%);
              font-family: var(--title);
              font-size: 64px;
              font-weight: 500;
              line-height: 1;
              -webkit-background-clip: text;
              background-clip: text;
              -webkit-text-fill-color: transparent;
              position: absolute;
              top: 0;
              left: 0;

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

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

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

          .wrap {
            .title {
              background-image: linear-gradient(94deg, #22327e 34%, #5d69a1 54%, #0f1b53 79%);
              font-family: var(--shippori);
              font-size: 24px;
              line-height: 1.3;
              -webkit-background-clip: text;
              background-clip: text;
              -webkit-text-fill-color: transparent;

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

            .description {
              margin-block-start: 48px;
              line-height: 1.9;

              @media (width <= 768px) {
                line-height: 1.86;
                margin-block-start: calc((100 / 390) * 32 * 1vw);
              }
            }
            .icon-list {
              display: block flex;
              gap: 16px;
              margin-block-start: 40px;

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

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

          + .item {
            margin-block-start: 120px;

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