@charset "utf-8";

/* ---------------------sub_mv-------------------- */
.sub_mv {
  background: url(/assets/img/sdgs/sub_mv.jpg) no-repeat center center/cover;
}

/* ---------------------sdgs-------------------- */
.sdgs {
  padding-top: 293px;
}

.sdgs .wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 88px;
}

.sdgs .texts {
  width: 631px;
}

.sdgs h2 {
  margin-bottom: 40px;
}

.sdgs .photo {
  width: 437px;
}

/* ---------------------action-------------------- */
.action {
  padding: 128px 0;
}

.act {
  width: 1280px;
}

.act > li {
  display: flex;
  margin-bottom: 64px;
  padding: 48px 106px;
  border: 2px solid var(--main);
  justify-content: space-between;
  align-items: center;
}

.act > li:last-child {
  margin-bottom: 0;
  flex-direction: row-reverse;
}

.act .photo {
  width: 410px;
  filter: drop-shadow(0 8px 30px rgba(0, 0, 0, 0.2));
}

.act .texts {
  width: 570px;
}

.act h3 {
  margin-bottom: 32px;
}

.act h3 .en {
  display: block;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.8;
  color: #999;
}

.act h3 .ja {
  display: block;
  font-size: 36px;
  font-weight: 500;
  line-height: 1.8;
  color: var(--main);
}

.act .noto {
  margin-bottom: 32px;
}

.goals {
  display: flex;
  column-gap: 30px;
}

.goals li {
  width: 100px;
}

.sdgs_img {
  background-color: #fff;
  padding: 24px;
}

@media screen and (max-width: 750px) {
  /* ---------------------sub_mv-------------------- */
  .sub_mv {
    background: url(/assets/img/sdgs/sub_mv_sp.jpg) no-repeat center
      center/cover;
  }

  /* ---------------------sdgs-------------------- */
  .sdgs {
    padding: calc((100 / 390) * 146 * 1vw) 0 calc((100 / 390) * 40 * 1vw);
  }

  .sdgs .wrap {
    display: block;
  }

  .sdgs .texts {
    width: 100%;
    margin-bottom: calc((100 / 390) * 40 * 1vw);
  }

  .sdgs h2 {
    margin-bottom: calc((100 / 390) * 32 * 1vw);
  }

  .sdgs .photo {
    width: calc((100 / 390) * 294 * 1vw);
    margin: 0 auto;
  }

  /* ---------------------action-------------------- */
  .action {
    padding: calc((100 / 390) * 64 * 1vw) 0;
  }

  .act {
    width: 100%;
  }

  .act > li {
    display: block;
    margin-bottom: calc((100 / 390) * 48 * 1vw);
    padding: calc((100 / 390) * 32 * 1vw) calc((100 / 390) * 16 * 1vw);
    border: calc((100 / 390) * 2 * 1vw) solid var(--main);
  }

  .act .photo {
    width: calc((100 / 390) * 220 * 1vw);
    margin: 0 auto calc((100 / 390) * 16 * 1vw);
    filter: drop-shadow(0 8px 30px rgba(0, 0, 0, 0.1));
  }

  .act .texts {
    width: 100%;
  }

  .act h3 {
    margin-bottom: calc((100 / 390) * 16 * 1vw);
  }

  .act h3 .en {
    font-size: calc((100 / 390) * 14 * 1vw);
  }

  .act h3 .ja {
    font-size: calc((100 / 390) * 24 * 1vw);
  }

  .act .noto {
    margin-bottom: calc((100 / 390) * 16 * 1vw);
  }

  .goals {
    column-gap: calc((100 / 390) * 16 * 1vw);
  }

  .goals li {
    width: calc((100 / 390) * 80 * 1vw);
  }

  .sdgs_img {
    padding: 0;
  }
}