@charset "UTF-8";

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

    .u-h1-title {
      & > span[lang='en'].sdgs-txt {
        text-transform: unset;
      }
    }
  }
  /* =====================
    What is SDGs?
  ===================== */
  .introduction {
    position: relative;
    padding-block: 132px 120px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image: url('../img/sdgs/intro_bg.png');

    @media (width <= 768px) {
      padding-block: calc((100 / 390) * 46 * 1vw) calc((100 / 390) * 72 * 1vw);
    }
    .u-inner {
      padding-inline: 150px;

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

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

        @media (width <= 768px) {
          margin-block-start: calc((100 / 390) * 16 * 1vw);
        }
      }
      .sdgs-img {
        display: block flow;
        margin-inline: auto;
        margin-block-start: 65px;

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

  /* =====================
    取り組んでいるSDGs
  ===================== */
  .action {
    position: relative;
    padding-block: 120px;

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

    .u-inner {
      .action-list {
        display: block flex;
        align-items: center;
        gap: 28px;

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

        .item {
          position: relative;
          background-color: #fff;
          padding-inline: 40px;
          padding-block: 48px;

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

          .number {
            inline-size: fit-content;
            display: block flow;
            font-family: var(--title);
            font-size: 20px;
            background: linear-gradient(59.63deg, #173004 15.83%, #459e00 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            line-height: 1.1;

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

          .img {
            display: block flow;
            margin-block-start: 16px;

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

          .action_unit {
            margin-block-start: 26px;

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

            .title {
              font-size: 24px;
              font-weight: 500;
              color: var(--primary);

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

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

          .icon-list {
            display: block flex;
            gap: 24px;
            margin-block-start: 31px;

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

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