@charset "UTF-8";

.main {
  /* =====================
    MV
  ===================== */
  .u-mv {
    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: 100px 110px;

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

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

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

        @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);
        }
      }
    }
  }

  /* =====================
    ベルサービスが取り組んでいるSDGs
  ===================== */
  .action {
    position: relative;
    padding-block: 113px 112px;

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

    .u-inner {
      padding-inline: 80px;

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

      .action-list {
        counter-reset: number 0;
        & > li {
          position: relative;

          @media (width <= 768px) {
            .img {
              inline-size: 100%;
              border-radius: calc((100 / 390) * 10 * 1vw) calc((100 / 390) * 10 * 1vw) 0 0;
            }
          }

          &::after {
            counter-increment: number;
            content: '0' counter(number);
            font-family: var(--title);
            font-size: 96px;
            line-height: 1.1;
            color: rgba(255, 255, 255, 0.8);
            position: absolute;
            top: 21px;
            left: 40px;
          }

          @media (width <= 768px) {
            &::after {
              font-size: calc((100 / 390) * 40 * 1vw);
              top: calc((100 / 390) * 16 * 1vw);
              left: calc((100 / 390) * 16 * 1vw);
            }
          }
          .wrap {
            background-color: #fff;
            display: block flex;
            align-items: center;
            gap: 80px;
            padding-inline: 80px;
            padding-block: 48px;
            border-radius: 0 0 10px 10px;

            @media (width <= 768px) {
              flex-direction: column-reverse;
              gap: calc((100 / 390) * 16 * 1vw);
              padding-inline: calc((100 / 390) * 16 * 1vw);
              padding-block: calc((100 / 390) * 24 * 1vw);
              align-items: start;
              border-radius: 0 0 calc((100 / 390) * 10 * 1vw) calc((100 / 390) * 10 * 1vw);
            }

            .icon-list {
              flex-shrink: 0;
              display: block flex;
              gap: 30px;

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

                & img {
                  inline-size: calc((100 / 390) * 100 * 1vw);
                }
              }
            }
            .action_unit {
              .title {
                font-size: 24px;
                font-weight: 500;
                color: #0d72a2;

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

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

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