@charset "UTF-8";

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

    @media (width <= 768px) {
      background-image: url('../img/sdgs/mv_2x.png');
    }
  }
  /* =====================
    What is SDGs?
  ===================== */
  .introduction {
    padding-block: 84px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image: url('../img/sdgs/what_bg.png');
    inline-size: 100%;
    block-size: 694px;

    @media (width <= 768px) {
      padding-block: calc((100 / 390) * 46 * 1vw) calc((100 / 390) * 72 * 1vw);
      background-image: url('../img/sdgs/what_bg_2x.png');
      inline-size: 100%;
      block-size: auto;
    }

    .u-h2-title {
      .title {
        @media (width <= 768px) {
          display: block flow;
          padding-inline-start: calc((100 / 390) * 68 * 1vw);

          &::before {
            position: absolute;
            left: 0;
            top: 0.8em;
          }
        }
      }
    }

    .content_wrap {
      display: block flex;
      align-items: center;
      gap: 87px;
      padding-inline: 40px;
      margin-block-start: 61px;

      @media (width <= 768px) {
        flex-direction: column;
        gap: calc((100 / 390) * 30 * 1vw);
        padding-inline: 0;
        margin-block-start: calc((100 / 390) * 46 * 1vw);
      }

      .picture {
        display: block flow;
        flex-shrink: 0;
        border-radius: 20px;
        border: solid 1px #549fd6;
        padding-inline: 24px;
        background-color: #fff;

        @media (width <= 768px) {
          border-radius: calc((100 / 390) * 10 * 1vw);
          padding-block: calc((100 / 390) * 4 * 1vw);
          padding-inline: calc((100 / 390) * 8 * 1vw);
          & img {
            inline-size: calc((100 / 390) * 326 * 1vw);
          }
        }
      }

      .description {
        line-height: 2;

        @media (width <= 768px) {
          line-height: 1.8;
        }
      }
    }
  }

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

    .u-inner {
      & > h3.title {
        position: relative;
        font-family: var(--yumin);
        font-size: 32px;
        font-weight: 600;
        text-align: center;
        border-top: dashed 2px #dbdbdb;
        padding-block-start: 87px;

        @media (width <= 768px) {
          font-size: calc((100 / 390) * 26 * 1vw);
          padding-block-start: calc((100 / 390) * 51 * 1vw);
        }
      }
      & > .description {
        margin-block-start: 29px;
        text-align: center;

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

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

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

        & > li {
          padding-inline: 64px;
          padding-block: 45px 64px;
          border-radius: 20px;

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

          .no {
            position: relative;
            font-family: var(--title);
            font-size: 32px;
            color: #549fd6;
            display: block flex;
            align-items: center;
            gap: 12px;

            &::before {
              content: '';
              display: block flow;
              inline-size: 64px;
              block-size: 1px;
              background-color: #549fd6;
            }

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

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

          .action_wrap {
            display: block flex;
            align-items: center;
            gap: 80px;
            margin-block-start: 19px;

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

            .picture {
              flex-shrink: 0;

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

            .action_unit {
              .title {
                font-family: var(--yumin);
                font-size: 24px;
                font-weight: 600;
                letter-spacing: 0.72px;
                color: #1b57af;

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

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

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

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

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

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

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

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