@charset "UTF-8";

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

  /* =====================
    What is SDGs?
  ===================== */
  .introduction {
    position: relative;
    padding-block: 120px 94px;

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

    .u-inner {
      position: relative;

      .description {
        margin-block-start: 56px;
        padding-inline: 170px;

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

      .sdgs-img {
        inline-size: fit-content;
        border: 1px solid #d1d2d5;
        padding-inline: 40px;
        padding-block: 40px;
        margin-inline: auto;
        margin-block-start: 64px;

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

        .img {
          display: block flow;
          inline-size: 100%;
        }
      }
    }
  }

  /* =====================
    取り組んでいるSDGs
  ===================== */
  .action {
    position: relative;
    padding-block: 118px 116px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image: url('../img/sdgs/action_bg.png');

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

    .u-inner {
      .action-list {
        padding-inline: 47px;

        @media only screen and (width <= 768px) {
          padding-inline: 0;
        }

        .item {
          position: relative;
          box-sizing: border-box;
          border-radius: 20px;
          border: solid 3px #fff;
          padding-inline: 159px 80px;
          padding-block: 56px;

          @media only screen and (width <= 768px) {
            border-radius: calc((100 / 390) * 20 * 1vw);
            border: solid calc((100 / 390) * 3 * 1vw) #fff;
            padding-inline: calc((100 / 390) * 48 * 1vw) calc((100 / 390) * 16 * 1vw);
            padding-block: calc((100 / 390) * 32 * 1vw);
          }

          .action-no {
            font-family: var(--title);
            font-size: 72px;
            line-height: 1.1;
            color: #fff;
            position: absolute;
            top: 186px;
            left: -90px;
            transform: rotate(-90deg);
            pointer-events: none;

            @media only screen and (width <= 768px) {
              font-size: calc((100 / 390) * 32 * 1vw);
              top: calc((100 / 390) * 98 * 1vw);
              left: calc((100 / 390) * -54 * 1vw);
            }
          }
          .title_wrap {
            display: block flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 32px;

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

            .title {
              inline-size: 100%;
              font-size: 24px;
              font-weight: 500;
              border-block-end: 2px solid #fff;
              padding-block-end: 22px;

              @media only screen and (width <= 768px) {
                font-size: calc((100 / 390) * 24 * 1vw);
                line-height: 1.5;
                border-block-end: calc((100 / 390) * 2 * 1vw) solid #fff;
                padding-block-end: calc((100 / 390) * 16 * 1vw);
              }
            }
            .icon-list {
              display: block flex;
              gap: 16px;
              flex-shrink: 0;

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

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

          .wrap {
            margin-block-start: 24px;
            display: block flex;
            align-items: center;
            gap: 40px;

            @media only screen and (width <= 768px) {
              margin-block-start: calc((100 / 390) * 32 * 1vw);
              flex-direction: column;
              gap: calc((100 / 390) * 32 * 1vw);
            }
            .img {
              display: block flow;
              flex-shrink: 0;

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

            .unit {
              .description {
                & + .description {
                  margin-block-start: 1em;
                }
              }
            }
          }

          & + .item {
            margin-block-start: 42px;

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