@charset "UTF-8";

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

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

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

    .u-inner {
      position: relative;

      @media only screen and (width <= 768px) {
        .u-hgroup {
          & span[lang='en'] {
            font-size: calc((100 / 390) * 40 * 1vw);
          }
        }
      }

      .logo_wrap {
        display: block flex;
        align-items: center;
        justify-content: center;
        gap: 40px;
        margin-block-start: 62px;

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

          .img[data-id='logo'] {
            inline-size: calc((100 / 390) * 150 * 1vw);
          }
          .img[data-id='cross'] {
            inline-size: calc((100 / 390) * 16 * 1vw);
          }
          .img[data-id='sdgs'] {
            inline-size: calc((100 / 390) * 150 * 1vw);
          }
        }
      }

      & > .description {
        margin-block-start: 30px;
        text-align: center;
        font-weight: bold;
        color: #111;

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

      .wrap {
        position: relative;
        padding: 60px;
        border-radius: 10px;
        background-color: #f1f8fe;
        margin-block-start: 72px;

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

        &::after {
          content: '';
          display: block flow;
          background-repeat: no-repeat;
          background-size: contain;
          background-position: center;
          background-image: url('../img/sdgs/illust_tree.png');
          inline-size: 266px;
          block-size: 241px;
          position: absolute;
          top: -95px;
          right: 28px;
          pointer-events: none;
        }

        @media only screen and (width <= 768px) {
          &::after {
            inline-size: calc((100 / 390) * 140 * 1vw);
            block-size: auto;
            aspect-ratio: 266/241;
            position: absolute;
            top: calc((100 / 390) * -80 * 1vw);
            right: calc((100 / 390) * 28 * 1vw);
          }
        }

        .catch {
          font-family: var(--serif);
          font-size: 38px;
          font-weight: 600;
          line-height: 1.4;

          @media only screen and (width <= 768px) {
            font-size: calc((100 / 390) * 24 * 1vw);
          }
        }
        .unit {
          display: block flex;
          align-items: start;
          gap: 50px;
          margin-block-start: 48px;

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

          .sdgs-img {
            inline-size: fit-content;
            background-color: #fff;
            padding-inline: 25px;
            padding-block: 26px;
            flex-shrink: 0;

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

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

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

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

    .u-inner {
      .catch {
        font-family: var(--serif);
        font-size: 28px;
        font-weight: 600;
        line-height: 2;
        text-align: center;

        @media only screen and (width <= 768px) {
          font-size: calc((100 / 390) * 25 * 1vw);
          line-height: 1.6;
        }
      }

      & > .description {
        margin-block-start: 40px;
        text-align: center;

        @media only screen and (width <= 768px) {
          margin-block-start: calc((100 / 390) * 32 * 1vw);
          text-align: left;
        }
      }
      .action-list {
        margin-block-start: 73px;

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

        .item {
          position: relative;

          .action-no {
            position: relative;
            font-family: var(--pop);
            font-size: 44px;
            font-weight: 300;
            line-height: 1;
            color: var(--primary);
            display: block flex;
            align-items: center;
            gap: 6px;

            @media only screen and (width <= 768px) {
              font-size: calc((100 / 390) * 40 * 1vw);
              gap: calc((100 / 390) * 6 * 1vw);
            }
            .no {
              font-size: 30px;
              font-weight: 200;
              margin-block-start: 7px;
              flex-shrink: 0;

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

            &::after {
              content: '';
              display: inline-block;
              inline-size: 100%;
              block-size: 1px;
              background-color: #999;
              margin-inline-start: 16px;
            }
            @media only screen and (width <= 768px) {
              &::after {
                margin-inline-start: calc((100 / 390) * 8 * 1vw);
              }
            }
          }

          .wrap {
            display: block flex;
            align-items: start;
            gap: 60px;
            margin-block-start: 35px;

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

            .img {
              display: block flow;
              flex-shrink: 0;
              border-radius: 10px;

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

            .unit {
              .title {
                font-family: var(--serif);
                font-size: 24px;
                font-weight: 600;
                line-height: 1.4;

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

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

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

              .icon-list {
                display: block flex;
                gap: 4px;
                margin-block-start: 30px;

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

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

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

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

            .wrap {
              flex-direction: row-reverse;

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