@charset "UTF-8";

.main {
  /* =====================
    What is SDGs?
  ===================== */
  .introduction {
    padding-block: 130px;

    @media (width <= 768px) {
      padding-block: calc((100 / 750) * 132 * 1vw) calc((100 / 750) * 127 * 1vw);
    }
    .description {
      margin-block-start: calc(60px + var(--leading-trim));

      @media (width <= 768px) {
        margin-block-start: calc(calc((100 / 750) * 54 * 1vw) + var(--leading-trim));
        line-height: 1.77;
      }
    }
    .picture {
      display: block flow;
      margin-block-start: calc(81px + var(--leading-trim));
      text-align: center;

      @media (width <= 768px) {
        margin-block-start: calc(calc((100 / 750) * 84 * 1vw) + var(--leading-trim));

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

  /* =====================
    建山建設工業が取り組んでいるSDGs
  ===================== */
  .action {
    overflow: hidden;
    padding-bottom: 130px;

    & h3.title {
      position: relative;
      display: inline-block;
      font-family: var(--yumin);
      font-size: 28px;
      font-weight: 600;
      line-height: 1;

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

      &::after {
        content: '';
        background-color: #172f49;
        inline-size: calc(100vw - 100% - 2em); /* 画面端までの残り幅 */
        block-size: 1px;
        margin-left: 0.7em; /* タイトルと線の間隔 */
        position: absolute;
        top: 30%;
        left: 100%;
        transform: translateY(-50%);
      }
      @media (width <= 768px) {
        &::after {
          top: 42%;
          inline-size: calc(100vw - 100%); /* 画面端までの残り幅 */
          margin-left: 0.4em;
        }
      }
    }

    .action-about_wrap {
      display: block flex;
      align-items: center;
      gap: 60px;
      margin-block-start: 50px;

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

      .picture {
        flex-shrink: 0;

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

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

    .action-list {
      & > li {
        margin-block-start: 129px;
        border-top: 1px solid #98afe8;

        @media (width <= 768px) {
          margin-block-start: calc(calc((100 / 750) * 130 * 1vw) + var(--leading-trim));

          &[data-url='action2'] {
            margin-block-start: calc((100 / 750) * 130 * 1vw);
          }
        }

        .title_wrap {
          display: block flex;
          align-items: center;
          gap: 34px;
          padding-block: 40px 30px;

          @media (width <= 768px) {
            display: block flow;
            padding-block: calc((100 / 750) * 40 * 1vw) calc((100 / 750) * 30 * 1vw);
          }

          .no {
            position: relative;
            font-family: var(--oswald);
            font-size: 22px;
            font-weight: 600;
            letter-spacing: -0.88px;
            line-height: 1;
            color: #98afe8;
            text-transform: uppercase;
            padding-left: 0.7em;

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

            & span {
              font-size: 32px;
              font-weight: 500;
              letter-spacing: -1.28px;

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

            &::before {
              content: '';
              display: block flow;
              inline-size: 8px;
              aspect-ratio: 1/1;
              border-radius: 50rem;
              background-color: #98afe8;
              position: relative;
              top: 20px;
              left: -18px;
            }
            @media (width <= 768px) {
              &::before {
                inline-size: calc((100 / 750) * 12 * 1vw);
                top: calc((100 / 750) * 33 * 1vw);
                left: calc((100 / 750) * -23 * 1vw);
              }
            }
          }

          .title {
            block-size: fit-content;
            font-family: var(--yumin);
            font-size: 22px;
            font-weight: 600;
            line-height: 1.8;
            background-color: var(--primary);
            color: #fff;
            padding-inline: 20px;
            padding-block: calc(13px + var(--leading-trim));

            @media (width <= 768px) {
              inline-size: fit-content;
              font-size: calc((100 / 750) * 30 * 1vw);
              padding-inline: calc((100 / 750) * 24 * 1vw);
              padding-block: calc(calc((100 / 750) * 21 * 1vw) + var(--leading-trim));
              margin-block-start: calc((100 / 750) * 29 * 1vw);
            }
          }
        }
        .action_wrap {
          display: block flex;
          gap: 60px;

          @media (width <= 768px) {
            flex-direction: column-reverse;
            gap: calc((100 / 750) * 48 * 1vw);
          }
          .action_unit {
            .description {
              @media (width <= 768px) {
                line-height: 1.77;
              }
            }
            .icon-list {
              display: block flex;
              gap: 4px;
              margin-block-start: calc(57px + var(--leading-trim));

              @media (width <= 768px) {
                gap: calc((100 / 750) * 5 * 1vw);
                margin-block-start: calc(calc((100 / 750) * 60 * 1vw) + var(--leading-trim));
                & img {
                  inline-size: calc((100 / 750) * 150 * 1vw);
                }
              }
            }
          }
          .picture {
            flex-shrink: 0;
            margin-block-start: 10px;

            @media (width <= 768px) {
              margin-block-start: calc((100 / 750) * 28 * 1vw);
              & img {
                inline-size: calc((100 / 750) * 670 * 1vw);
              }
            }
          }
        }
        &:nth-child(2n) {
          .action_wrap {
            flex-direction: row-reverse;

            @media (width <= 768px) {
              flex-direction: column-reverse;
            }
          }
        }
      }
    }
  }
}