@charset "UTF-8";

#SDGs {
  .sustainable {
    background-color: #c7e9f6;
    position: relative;
  }

  .sustainable::before {
    content: "";
    background: url(../img/img_sdgs/cloud_left.webp);
    position: absolute;
    top: 15%;
    left: 6vw;
    width: 156px;
    height: 69px;
  }

  .sustainable::after {
    content: "";
    background: url(../img/img_sdgs/cloud_right.webp);
    position: absolute;
    top: 20%;
    right: 2vw;
    width: 275px;
    height: 114px;
  }

  .sustainable_inner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 100px 0;
    z-index: 22;
    position: relative;
  }

  .sustainable h2 {
    display: flex;
    justify-content: center;
    align-items: end;
  }

  .sustainable h2 span {
    font-size: 4rem;
    color: #008765;
    position: relative;
    bottom: 15px;
    margin-right: 1em;
    text-align: center;
  }

  .sustainable h2 figure {}

  .sustainable h2 figure img {}

  .sustainable p.main {
    text-align: center;
    font-size: 1.8rem;
    line-height: 1.7;
    margin: 50px 0;
    font-weight: 600;
  }

  .sustainable figure.mountain {}

  .sustainable figure.mountain img {}

  .sustainable dl {
    display: flex;
    padding: 50px;
    background: rgb(255 255 255 / 50%);
    /* gap: 10%; */
    align-items: center;
  }

  .sustainable dt {
    width: 45%;
  }

  .sustainable dt h3 {
    font-size: 3.0rem;
    color: #0097d8;
  }

  .sustainable dt p {
    font-size: 1.8rem;
    line-height: 1.7;
    text-align: justify;
  }

  .sustainable dd {
    width: 50%;
    margin-left: 5%;
    padding-left: 5%;
    border-left: solid 1px #aaaaaa;
  }

  .sustainable dd figure {}

  .sustainable dd figure img {}

  .approach {
    margin-top: 100px;
  }

  .approach+.approach {
    margin-top: 150px;
  }

  .approach_inner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
  }

  .approach h3 {
    display: flex;
    align-items: center;
  }

  .approach h3 p.approach_mark {
    background: #0097d8;
    display: grid;
    place-content: center;
    text-align: center;
    aspect-ratio: 1/1;
    width: 100px;
    height: 100px;
  }

  .approach h3 p.approach_mark span:nth-of-type(1) {
    color: #fff;
    font-size: 2.0rem;
    line-height: 1;
  }

  .approach h3 p.approach_mark span:nth-of-type(2) {
    color: #fff;
    font-size: 4.6rem;
    line-height: 1;
  }

  .approach h3 p.approach_title {
    font-size: 3.0rem;
    margin-left: 1em;
  }

  .sdgs_logo {
    display: flex;
    margin-left: auto;
  }

  .sdgs_logo figure {}

  .sdgs_logo figure img {}

  .approach dl {
    display: flex;
    margin-top: 30px;
    padding-top: 30px;
    border-top: solid 1px #000;
    gap: 4%;
  }

  .approach dt {
    width: 48%;
  }

  .approach dt p {
    font-size: 1.8rem;
    line-height: 1.7;
    text-align: justify;
  }

  .approach dt p+p {
    margin-top: 1em;
  }

  .approach dd {
    width: 48%;
    flex-wrap: nowrap;
    display: flex;
  }

  .approach dd figure {}

  .approach dd figure img {}




  @media screen and (max-width: 768px) {
    .sustainable_inner {
      padding: 50px 0;
    }

    .sustainable h2 {
      width: 86%;
      margin: auto;
    }

    .sustainable h2 span {
      font-size: 2.8rem;
      margin-right: 0.5em;
    }

    .sustainable h2 figure {
      max-width: 34%;
    }

    .sustainable p.main {
      width: 86%;
      margin: auto;
      font-feature-settings: "palt";
      margin-bottom: 40px;
    }

    .sustainable dl {
      padding: 50px 7%;
      flex-direction: column;
    }

    .sustainable dt {
      width: 100%;
    }

    .sustainable dd {
      border-left: none;
      width: 100%;
      margin: 30px 0 0;
      padding: 30px 0 0;
      border-top: solid 1px #aaaaaa;
    }

    .approach {
      margin-top: 50px;
    }

    .approach_inner {
      width: 86%;
    }

    .approach h3 {
      flex-wrap: wrap;
    }

    .approach h3 p.approach_mark {
      max-width: 70px;
      max-height: 70px;
    }

    .approach h3 p.approach_mark span:nth-of-type(1) {
      font-size: 1.6rem;
    }

    .approach h3 p.approach_mark span:nth-of-type(2) {
      font-size: 4rem;
    }

    .approach h3 p.approach_title {
      font-size: 2.2rem;
      margin-left: 0.5em;
    }

    .sdgs_logo {
      width: 100%;
      margin-top: 30px;
    }

    .sdgs_logo figure {
      max-width: 20%;
    }

    .approach dl {
      flex-direction: column-reverse;
      gap: 30px;
    }

    .approach dt {
      width: 100%;
    }

    .approach dd {
      width: 100%;
    }

    .approach+.approach {
      margin-top: 100px;
      margin-bottom: 100px !important;
    }







  }
}