@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: 112px 112px;

    @media (width <= 768px) {
      padding-block: calc((100 / 390) * 46 * 1vw) calc((100 / 390) * 72 * 1vw);
      background-color: #fff;
    }
    .u-inner {
      padding-inline: 40px;
      display: block flex;
      justify-content: space-between;
      align-items: center;
      gap: 92px;

      @media (width <= 768px) {
        flex-direction: column;
        gap: calc((100 / 390) * 32 * 1vw);
        padding-inline: calc((100 / 390) * 16 * 1vw);
      }
      .wrap {
        .description {
          margin-block-start: 43px;

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

        @media (width <= 768px) {
          inline-size: 100%;
        }
      }
    }
  }

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

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

    .u-inner {
      .action-list {
        .item {
          position: relative;
          background-color: #fff;
          border-radius: 10px;
          padding-inline: 80px;
          padding-block: 64px;

          @media (width <= 768px) {
            border-radius: calc((100 / 390) * 10 * 1vw);
            padding-inline: calc((100 / 390) * 16 * 1vw);
            padding-block: calc((100 / 390) * 48 * 1vw);
          }
          .wrap {
            display: block flex;
            align-items: center;
            gap: 56px;
          }
          .title_wrap {
            justify-content: center;

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

            .title_unit {
              position: relative;
              inline-size: fit-content;
              padding-inline-end: 32px;
              padding-block-end: 16px;

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

              &::after {
                content: '';
                position: absolute;
                inline-size: 100%;
                block-size: 1px;
                background: linear-gradient(180deg, #1990bc 0%, #4ae296 100%);
                bottom: 0;
                left: 0;
              }

              .number {
                display: block flow;
                font-family: var(--title);
                font-size: 18px;
                color: var(--primary);
                line-height: 1.1;

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

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

                @media (width <= 768px) {
                  font-size: calc((100 / 390) * 18 * 1vw);
                  line-height: 1.2;
                  margin-block-start: calc((100 / 390) * 8 * 1vw);
                }
              }
            }
            .icon-list {
              display: block flex;
              gap: 24px;

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

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

          .action_wrap {
            margin-block-start: 31px;

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

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

              @media (width <= 768px) {
                inline-size: 100%;
              }
            }
          }

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

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