@charset "UTF-8";

/* =====================
  共通
===================== */
section .inner {
  margin-left: auto;
  margin-right: auto;
  padding: 0 5%;
}

.sdgs-item {
  display: flex;
  flex-wrap: wrap;
}
.sdgs-box {
  height: 20.53333333vw;
  width: 20.53333333vw;
}
/* =====================
  section[data-id="1"]
===================== */
section[data-id="1"] {
  padding-top: 13.0666666vw;
}

section[data-id="1"] .wrap p {
  padding-bottom: 5vw;
}
section[data-id="1"] picture {
  margin-bottom: 13vw;
  display: block;
}

/* =====================
  section[data-id="2"]
===================== */
section[data-id="2"] {
  padding-bottom: 11.4666666vw;
}

section[data-id="2"] .subTitle01 {
  text-align: center;
}

section[data-id="2"] .sdgs-head p {
  padding-bottom: 5.33333333vw;
}

section[data-id="2"] .sdgs-item {
  justify-content: space-between;
}

section[data-id="2"] .sdgs-box {
  margin-bottom: 2vw;
}

/* =====================
  section[data-id="3"]
===================== */
section[data-id="3"] .unit {
  padding-top: 15vw;
  padding-bottom: 15.2vw;
}

section[data-id="3"] .unit:nth-child(odd) {
  background-color: #faf7f7;
}

section[data-id="3"] .inner h3 {
  font-size: 130%;
  line-height: 1.6;
  padding-bottom: 7vw;
}

section[data-id="3"] .inner p {
  padding-bottom: 5.33333333vw;
}

section[data-id="3"] .sdgs-item {
  margin-bottom: 9vw;
}

section[data-id="3"] .sdgs-box + .sdgs-box {
  margin-left: 1.33333333vw;
}

section[data-id="3"] .unit .text::after {
  content: "";
  display: block;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 89.33333333vw;
  height: 66.66666666vw;
}
section[data-id="3"] .unit[data-id="1"] .text::after {
  background-image: url(../../contents/sdgs/img/01_sp.png);
}

section[data-id="3"] .unit[data-id="2"] .text::after {
  background-image: url(../../contents/sdgs/img/02_sp.png);
}
section[data-id="3"] .unit[data-id="3"] .text::after {
  background-image: url(../../contents/sdgs/img/03_sp.png);
}

section[data-id="3"] .unit[data-id="2"] h2 {
  margin-left: -5%;
}