@charset "UTF-8";
/*basic*/
@media screen and (max-width: 767px) {
  .pc {
    display: none !important;
  }
}
@media screen and (min-width: 768px) {
  .sp {
    display: none !important;
  }
}
.flex {
  display: flex;
  justify-content: space-between;
}

#main {
  display: block;
  overflow: hidden;
  transition: 0.2s;
  padding: 0 0 0 0;
}
@media screen and (max-width: 767px) {
  #main {
    padding: 0 0 0 0;
  }
}

img {
  max-width: 100%;
  height: auto;
}
/* import */
div.SDGs a, div.SDGs img {
  transition: 0.3s;
}
div.SDGs img {
  max-width: 100%;
  height: auto;
}
div.SDGs picture {
  display: block;
}
div.SDGs .mv {
  background-image: url(../img/mv-bg.webp);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  position: relative;
  min-height: 720px;
  display: grid;
  grid-template: ". pic1 title pic2 ." auto/auto 403px 475px 460px auto;
}
@media screen and (max-width: 1350px) {
  div.SDGs .mv {
    grid-template: ". pic1 title pic2 ." auto/auto 25% 45% 30% auto;
  }
}
@media screen and (max-width: 767px) {
  div.SDGs .mv {
    grid-template: ". title title title ." auto ". pic1 . pic2 ." auto/auto 48% 1% 51% auto;
    min-height: inherit;
    padding-top: 10%;
    overflow: hidden;
    background-image: url(../img/mv-bg-sp.webp);
  }
}
div.SDGs .mv:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 190px;
  background-image: url(../img/mv-circle.webp);
  background-size: 100%;
  background-position: center top;
  background-repeat: no-repeat;
}
@media screen and (max-width: 1350px) {
  div.SDGs .mv:after {
    background-position: center bottom;
  }
}
@media screen and (max-width: 767px) {
  div.SDGs .mv:before {
    content: "";
    width: 136px;
    height: 90px;
    bottom: 0;
    right: 5%;
    margin-left: -90px;
    background-image: url(../img/mv3.webp);
    background-size: cover;
    position: absolute;
    z-index: 3;
  }
}
div.SDGs .mv h1 {
  width: 475px;
  grid-area: title;
  margin: 60px 0 auto 0;
}
@media screen and (max-width: 1350px) {
  div.SDGs .mv h1 {
    width: 100%;
  }
}
@media screen and (max-width: 767px) {
  div.SDGs .mv h1 {
    width: 90%;
    margin: 0 auto;
  }
}
div.SDGs .mv .mv1 {
  grid-area: pic1;
  margin: auto 0 100px 0;
  transform: translateX(25%);
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  div.SDGs .mv .mv1 {
    margin: -10vw 0 0 0;
    transform: translate(-8%, 5%) scale(1.05);
  }
}
div.SDGs .mv .mv2 {
  grid-area: pic2;
  margin: auto 0 0px 0;
  transform: translateX(-25%);
  position: relative;
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  div.SDGs .mv .mv2 {
    margin: -10vw 0 0 0;
    transform: translate(0, 10%) scale(1.2);
  }
}
div.SDGs .mv .mv2:after {
  content: "";
  width: 182px;
  height: 120px;
  top: 0;
  left: 50%;
  margin-left: -90px;
  background-image: url(../img/mv3.webp);
  background-size: cover;
  position: absolute;
}
@media screen and (max-width: 767px) {
  div.SDGs .mv .mv2:after {
    display: none;
  }
}
div.SDGs .mnv {
  margin-bottom: 140px;
}
@media screen and (max-width: 767px) {
  div.SDGs .mnv {
    margin-bottom: 10%;
  }
}
div.SDGs .mnv ul {
  display: flex;
  justify-content: center;
  max-width: 1000px;
  width: 90%;
  margin: 0 auto;
  gap: 1%;
}
@media screen and (max-width: 767px) {
  div.SDGs .mnv ul {
    flex-direction: column;
  }
}
div.SDGs .mnv ul li {
  width: 49.5%;
}
@media screen and (max-width: 767px) {
  div.SDGs .mnv ul li {
    width: 100%;
  }
}
div.SDGs .mnv ul li a {
  display: block;
}
div.SDGs .mnv ul li a img {
  width: 100%;
}
div.SDGs .SDGs-area {
  text-align: center;
}
div.SDGs .SDGs-area h2 {
  max-width: 587px;
  margin: 0 auto 0 auto;
  transform: translateY(-75px);
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area h2 {
    transform: translate(0);
    width: 95%;
    padding: 2% 0 0 0;
  }
}
div.SDGs .SDGs-area h3 {
  text-align: center;
  font-size: 4.4rem;
  line-height: 1.5;
  font-weight: bold;
  margin-bottom: 30px;
  display: inline-block;
  position: relative;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area h3 {
    font-size: 9vw;
    margin-bottom: 0;
  }
}
div.SDGs .SDGs-area h3 em {
  font-style: normal;
  display: block;
  margin: 10px 0;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area h3 em {
    display: inline-block;
    margin: 2px 0;
  }
}
div.SDGs .SDGs-area h3 span {
  background-color: #FFFFB0;
  display: inline-block;
  padding: 0 10px;
}
div.SDGs .SDGs-area h3:after {
  content: "";
  position: absolute;
  top: 0px;
  left: 30px;
  background-image: url(../img/kira1.webp);
  background-size: cover;
  width: 47px;
  height: 61px;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area h3:after {
    display: none;
  }
}
div.SDGs .SDGs-area_voice {
  width: 90%;
  max-width: 980px;
  margin: 0 auto;
  display: grid;
  grid-template: "pic1 text1 pic2" max-content "pic1 text2 pic2" 1fr/231px 1fr 262px;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area_voice {
    width: 95%;
    grid-template: "pic1 text1 text1" max-content "text2 text2 pic2" 1fr/30% 35% 35%;
  }
}
div.SDGs .SDGs-area_voice figure {
  margin: auto 0 0 0;
}
div.SDGs .SDGs-area_voice figure.v1 {
  grid-area: pic1;
  position: relative;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area_voice figure.v1:after {
    content: "";
    position: absolute;
    top: 50%;
    right: -30px;
    background-image: url(../img/kira2.webp);
    background-size: cover;
    width: 26px;
    height: 25px;
    z-index: 2;
  }
}
div.SDGs .SDGs-area_voice figure.v2 {
  grid-area: pic2;
  position: relative;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area_voice figure.v2 {
    margin: -40% 0 0 -5%;
    z-index: 2;
    width: 110%;
  }
}
div.SDGs .SDGs-area_voice figure.v2:after {
  content: "";
  position: absolute;
  top: 50px;
  left: -50px;
  background-image: url(../img/kira2.webp);
  background-size: cover;
  width: 49px;
  height: 46px;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area_voice figure.v2:after {
    left: 0;
    top: 0;
    width: 36px;
    height: 35px;
  }
}
div.SDGs .SDGs-area_voice p {
  font-size: 1.6rem;
  font-weight: bold;
}
div.SDGs .SDGs-area_voice p.t1 {
  grid-area: text1;
  margin: 20px auto 25px -20px;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area_voice p.t1 {
    margin: 0 0 0 -5%;
    width: 105%;
  }
}
div.SDGs .SDGs-area_voice p.t2 {
  grid-area: text2;
  margin: 0 0 0 auto;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area_voice p.t2 {
    width: 110%;
    position: relative;
    margin: -10% 0 0 0;
  }
}
div.SDGs .SDGs-area_content {
  background-color: #fff;
  padding: 55px 0px;
  margin-bottom: 70px;
  width: 90%;
  max-width: 980px;
  margin: 0 auto 70px auto;
  position: relative;
  text-align: left;
  display: grid;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area_content {
    width: 95%;
    z-index: 2;
    padding: 30px 0;
  }
}
div.SDGs .SDGs-area_content:before {
  content: "";
  position: absolute;
  top: -35px;
  left: 50%;
  margin-left: -124px;
  background-image: url(../img/sustainable-title.webp);
  background-size: cover;
  width: 248px;
  height: 98px;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area_content:before {
    aspect-ratio: 186/73;
    height: auto;
    width: 50%;
    margin-left: 0;
    top: -30px;
    transform: translateX(-50%);
  }
}
div.SDGs .SDGs-area_content h4 {
  grid-area: title;
  text-align: center;
  font-size: 2.6rem;
  font-weight: bold;
  background: linear-gradient(to right, #ffefff 0%, #ffd4e3 100%);
  border-radius: 25px;
  padding: 10px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 25px;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area_content h4 {
    font-size: 4vw;
    line-height: 1.5;
    padding: 5px 7px;
    margin-bottom: 15px;
  }
}
div.SDGs .SDGs-area_content h4:before, div.SDGs .SDGs-area_content h4:after {
  content: "";
  width: 41px;
  height: 39px;
  background-image: url(../img/icon-circle.webp);
  background-size: cover;
  display: block;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area_content h4:before, div.SDGs .SDGs-area_content h4:after {
    width: 31px;
    height: 29px;
  }
}
div.SDGs .SDGs-area_content .pic1 {
  padding: 12px;
  border-radius: 14px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
  margin: 0 0 auto 0;
}
div.SDGs .SDGs-area_content dl.txt1 dt {
  font-size: 1.6rem;
  padding: 1em 2em;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area_content dl.txt1 dt {
    font-size: 3.75vw;
  }
}
div.SDGs .SDGs-area_content_flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  row-gap: 10px;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area_content_flex {
    flex-direction: column;
    row-gap: 10vw;
  }
}
div.SDGs .SDGs-area_content_flex dl {
  width: 47.5%;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area_content_flex dl {
    width: 100%;
  }
}
div.SDGs .SDGs-area_content_flex dl dt {
  font-size: 1.7rem;
  font-weight: bold;
  background-image: url(../img/icon-check1.webp);
  background-size: 29px;
  background-position: left 5px;
  background-repeat: no-repeat;
  padding-left: 32px;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area_content_flex dl dt {
    font-size: 5vw;
  }
}
div.SDGs .SDGs-area_content_flex dl dt span {
  background: linear-gradient(transparent 60%, #FFE2EE 60%);
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area_content_flex dl dt {
    background-size: 35px;
    padding-left: 40px;
  }
}
div.SDGs .SDGs-area_content_flex dl dd p {
  font-size: 1.4rem;
  line-height: 1.5;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area_content_flex dl dd p {
    font-size: 4.1vw;
    padding: 0 2.5%;
  }
}
div.SDGs .SDGs-area_content_flex dl dd p span {
  display: block;
  font-size: 1.2rem;
  margin-top: 5px;
}
div.SDGs .SDGs-area_content_flex dl dd figure {
  border: 1px solid #CECECE;
  padding: 5px;
  margin: 5px 0;
}
div.SDGs .SDGs-area_content_flex dl dd figure img {
  width: 100%;
  height: auto;
}
div.SDGs .SDGs-area_content_voice {
  background-image: url(../img/area1-bg2.webp);
  background-size: 100%;
  background-position: left center;
  background-repeat: no-repeat;
  margin: 30px 0 0 0;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area_content_voice {
    margin-top: 0;
    background-image: url(../img/area1-bg3.webp);
    background-position: left bottom;
  }
}
div.SDGs .SDGs-area_content h5 span {
  font-size: 2rem;
  font-weight: bold;
  color: #fff;
  background-image: url(../img/area1-txt-bg.webp);
  display: inline-block;
  background-size: cover;
  padding: 2px 30px;
  border-radius: 10px;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area_content h5 span {
    font-size: 4vw;
    line-height: 1.5;
    padding: 5px 15px;
    display: block;
  }
}
div.SDGs .SDGs-area_content.h1a {
  grid-template: ". title title ." auto ". pic1 txt1 ." auto ". pic2 pic2 ." auto ". txt2 txt2 ." auto ". voice voice voice" auto ". btn btn ." auto/40px 1fr 1fr 40px;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area_content.h1a {
    grid-template: ". title title ." auto ". pic1 pic1 ." auto ". txt1 txt1 ." auto ". pic2 pic2 ." auto ". txt2 txt2 ." auto ". voice voice voice" auto ". btn btn ." auto/2.5% 1fr 1fr 2.5%;
  }
}
div.SDGs .SDGs-area_content.h1a .pic1 {
  grid-area: pic1;
}
div.SDGs .SDGs-area_content.h1a .txt1 {
  grid-area: txt1;
}
div.SDGs .SDGs-area_content.h1a .pic2 {
  grid-area: pic2;
  margin-top: -30px;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area_content.h1a .pic2 {
    margin: 0;
  }
}
div.SDGs .SDGs-area_content.h1a .txt2 {
  grid-area: txt2;
  width: 70%;
  margin: -190px 0 0 auto;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area_content.h1a .txt2 {
    width: 100%;
    margin: 0;
  }
}
div.SDGs .SDGs-area_content.h1a .v1 {
  grid-area: voice;
  display: flex;
  align-items: center;
  justify-content: center;
}
div.SDGs .SDGs-area_content.h1a .v1 p {
  margin: -50px -50px 0 0;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area_content.h1a .v1 p {
    margin: 0 -5% 0 2.5%;
  }
}
div.SDGs .SDGs-area_content.h1a .c-btn {
  grid-area: btn;
}
div.SDGs .SDGs-area_content.h1b {
  grid-template: ". title title ." auto ". pic1 txt1 ." auto ". t2 t2 ." auto ". pic2 pic2 ." auto ". txt2 txt2 ." auto ". voice voice voice" auto ". btn btn ." auto/40px 1fr 1fr 40px;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area_content.h1b {
    grid-template: ". title title ." auto ". pic1 pic1 ." auto ". txt1 txt1 ." auto ". t2 t2 ." auto ". pic2 pic2 ." auto ". txt2 txt2 ." auto ". voice voice voice" auto ". btn btn ." auto/2.5% 1fr 1fr 2.5%;
  }
}
div.SDGs .SDGs-area_content.h1b .pic1 {
  grid-area: pic1;
}
div.SDGs .SDGs-area_content.h1b .txt1 {
  grid-area: txt1;
}
div.SDGs .SDGs-area_content.h1b .txt1 dd {
  padding-left: 2em;
}
div.SDGs .SDGs-area_content.h1b .t2 {
  grid-area: t2;
  margin: 35px 0 15px 0;
}
div.SDGs .SDGs-area_content.h1b .pic2 {
  grid-area: pic2;
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area_content.h1b .pic2 {
    flex-direction: column;
    gap: 4vw;
  }
}
div.SDGs .SDGs-area_content.h1b .pic2 li {
  width: 49.5%;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area_content.h1b .pic2 li {
    width: 100%;
  }
}
div.SDGs .SDGs-area_content.h1b .txt2 {
  grid-area: txt2;
  text-align: center;
  font-size: 1.6rem;
  line-height: 1.5;
  margin: 25px 0;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area_content.h1b .txt2 {
    text-align: left;
    margin: 5% 0;
    padding: 0 5%;
    font-size: 4vw;
  }
}
div.SDGs .SDGs-area_content.h1b .v2 {
  grid-area: voice;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0;
  padding-bottom: 0px;
  background-image: url(../img/area1-bg3.webp);
  background-position: left top;
  display: grid;
  grid-template: "pic1 txt1 pic2 ." max-content "pic1 txt2 pic2 ." 1fr ".    .    pic2 ." 30px/221px 1fr 266px 40px;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area_content.h1b .v2 {
    grid-template: "pic1 txt1 txt1 ." max-content "pic1 pic2 pic2 ." 1fr ".    pic2 pic2 ." 30px "txt2 txt2 txt2 ." max-content/auto auto auto 2.5%;
    background-image: url(../img/area1-bg3-sp.webp);
    border-radius: 50px 0 0 50px;
  }
}
div.SDGs .SDGs-area_content.h1b .v2 .vp1 {
  grid-area: pic1;
  margin: 20px 0 0 10px;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area_content.h1b .v2 .vp1 {
    width: 120%;
    margin: 15% 0 auto 5%;
  }
}
div.SDGs .SDGs-area_content.h1b .v2 .vp2 {
  grid-area: pic2;
  margin: auto 0 0 0;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area_content.h1b .v2 .vp2 {
    width: 75%;
    margin: 5% 0 0 0;
  }
}
div.SDGs .SDGs-area_content.h1b .v2 .vt1 {
  grid-area: txt1;
  margin: 50px 0 10px -30px;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area_content.h1b .v2 .vt1 {
    margin: 15% 0 0 0;
  }
}
div.SDGs .SDGs-area_content.h1b .v2 .vt2 {
  grid-area: txt2;
  margin: 0 0 auto 0;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area_content.h1b .v2 .vt2 {
    width: 95%;
    margin: -2.5% 0 10% auto;
  }
}
div.SDGs .SDGs-area_content.h1b .c-btn {
  grid-area: btn;
}
div.SDGs .SDGs-area_content.h1c {
  grid-template: ". title title ." auto ". pic1 txt1 ." auto ". t2 t2 ." auto ". pic2 txt2 ." auto ". pic3 txt3 ." auto ". t3 t3 ." auto ". pic4 pic4 ." auto ". voice voice voice" auto ". btn btn ." auto/40px 1fr 1fr 40px;
  margin-bottom: 0;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area_content.h1c {
    grid-template: ". title title ." auto ". pic1 pic1 ." auto ". txt1 txt1 ." auto ". t2 t2 ." auto ". pic2 pic2 ." auto ". txt2 txt2 ." auto ". pic3 pic3 ." auto ". txt3 txt3 ." auto ". t3 t3 ." auto ". pic4 pic4 ." auto ". voice voice voice" auto ". btn btn ." auto/2.5% 1fr 1fr 2.5%;
  }
}
div.SDGs .SDGs-area_content.h1c .pic1 {
  grid-area: pic1;
}
div.SDGs .SDGs-area_content.h1c .txt1 {
  grid-area: txt1;
}
div.SDGs .SDGs-area_content.h1c .txt1 dt {
  padding-left: 1em;
  padding-top: 0;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area_content.h1c .txt1 dt {
    padding: 1em 0.5em;
  }
}
div.SDGs .SDGs-area_content.h1c .txt1 dd {
  padding-left: 1em;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area_content.h1c .txt1 dd {
    padding: 0;
    text-align: center;
  }
}
div.SDGs .SDGs-area_content.h1c .t2 {
  grid-area: t2;
  margin: 30px 0 15px 0;
}
div.SDGs .SDGs-area_content.h1c .t3 {
  grid-area: t3;
  margin: 50px 0 15px 0;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area_content.h1c .t3 {
    margin-top: 5%;
  }
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area_content.h1c .t3 span {
    display: inline-block;
  }
}
div.SDGs .SDGs-area_content.h1c .pic2 {
  grid-area: pic2;
  width: 95%;
  margin-bottom: 35px;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area_content.h1c .pic2 {
    width: 100%;
    margin-bottom: 5%;
  }
}
div.SDGs .SDGs-area_content.h1c .txt2, div.SDGs .SDGs-area_content.h1c .txt3 {
  font-size: 1.6rem;
  line-height: 1.5;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area_content.h1c .txt2, div.SDGs .SDGs-area_content.h1c .txt3 {
    padding: 0 2.5%;
    margin-bottom: 5%;
  }
}
div.SDGs .SDGs-area_content.h1c .txt2 dt, div.SDGs .SDGs-area_content.h1c .txt3 dt {
  font-size: 1.7rem;
  font-weight: bold;
  background-image: url(../img/icon-check2.webp);
  background-size: 29px;
  background-position: left 5px;
  background-repeat: no-repeat;
  padding-left: 32px;
  margin-bottom: 15px;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area_content.h1c .txt2 dt, div.SDGs .SDGs-area_content.h1c .txt3 dt {
    margin-bottom: 5px;
    font-size: 4vw;
  }
}
div.SDGs .SDGs-area_content.h1c .txt2 dd p, div.SDGs .SDGs-area_content.h1c .txt3 dd p {
  font-size: 1.5rem;
  line-height: 1.5;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area_content.h1c .txt2 dd p, div.SDGs .SDGs-area_content.h1c .txt3 dd p {
    font-size: 3.75vw;
  }
}
div.SDGs .SDGs-area_content.h1c .txt2 {
  grid-area: txt2;
}
div.SDGs .SDGs-area_content.h1c .txt3 {
  grid-area: txt3;
}
div.SDGs .SDGs-area_content.h1c .pic3 {
  grid-area: pic3;
  width: 95%;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area_content.h1c .pic3 {
    width: 100%;
    margin-bottom: 5%;
  }
}
div.SDGs .SDGs-area_content.h1c .pic4 {
  grid-area: pic4;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  row-gap: 0.5vw;
  margin-bottom: 40px;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area_content.h1c .pic4 {
    row-gap: 1.5vw;
    margin-bottom: 5%;
  }
}
div.SDGs .SDGs-area_content.h1c .pic4 li {
  width: 24.5%;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area_content.h1c .pic4 li {
    width: 49%;
  }
}
div.SDGs .SDGs-area_content.h1c .v3 {
  grid-area: voice;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0;
  margin-bottom: 30px;
  padding-bottom: 0px;
  background-image: url(../img/area1-bg4.webp);
  background-size: cover;
  border-radius: 50px 0 0 50px;
  background-position: left top;
  display: grid;
  grid-template: "pic1 txt1 pic2 ." max-content "pic1 txt2 pic2 ." 1fr/245px 1fr 180px 40px;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area_content.h1c .v3 {
    grid-template: ". pic1 txt1 txt1 ." max-content ". txt2 txt2 pic2 ." 1fr/2.5% 1fr 1fr 1fr 2.5%;
    margin-bottom: 0;
  }
}
div.SDGs .SDGs-area_content.h1c .v3 .vp1 {
  grid-area: pic1;
  margin: auto 0 -30px 10px;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area_content.h1c .v3 .vp1 {
    margin: 0 0 0 5%;
    width: 120%;
    position: relative;
  }
}
div.SDGs .SDGs-area_content.h1c .v3 .vp2 {
  grid-area: pic2;
  margin: auto 0 0 0;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area_content.h1c .v3 .vp2 {
    margin: -18vw 0 0 0;
  }
}
div.SDGs .SDGs-area_content.h1c .v3 .vt1 {
  grid-area: txt1;
  margin: 25px 0 0px -50px;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area_content.h1c .v3 .vt1 {
    margin: 5% 0 auto -20%;
    width: 120%;
  }
}
div.SDGs .SDGs-area_content.h1c .v3 .vt2 {
  grid-area: txt2;
  margin: 0 0 0 auto;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area_content.h1c .v3 .vt2 {
    position: relative;
    width: 115%;
    margin: 0% 0 auto 0;
  }
}
div.SDGs .SDGs-area_content.h1c .c-btn {
  grid-area: btn;
}
div.SDGs .SDGs-area_cta {
  width: 90%;
  max-width: 980px;
  margin: 0 auto 45px auto;
  position: relative;
  display: grid;
  grid-template: ". v1 t1" auto "mov mov mov" auto/80px max-content 1fr;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area_cta {
    width: 95%;
    margin-top: 2%;
    margin-bottom: 5vw;
    grid-template: ". v1 t1" auto "mov mov mov" auto/10% 20% 70%;
  }
}
div.SDGs .SDGs-area_cta .v1 {
  grid-area: v1;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area_cta .v1 {
    width: 100%;
  }
}
div.SDGs .SDGs-area_cta .t1 {
  grid-area: t1;
  margin: auto 0 -70px -10px;
  position: relative;
  z-index: 2;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area_cta .t1 {
    width: 100%;
    margin: auto 0 -10vw 0;
  }
}
div.SDGs .SDGs-area_cta a {
  grid-area: mov;
  background-color: #fff;
  padding: 15px;
  border-radius: 23px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  position: relative;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area_cta a {
    padding: 8px;
    border-radius: 10px;
  }
}
div.SDGs .SDGs-area_cta a .movie-modal-wrap .ico-movie {
  display: none;
}
div.SDGs .SDGs-area_cta a:after {
  content: "";
  width: 169px;
  height: 131px;
  background-image: url(../img/play-btn.webp);
  background-size: cover;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: 0.3s;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area_cta a:after {
    width: 64px;
    height: 50px;
  }
}
div.SDGs .SDGs-area_cta a:hover:after {
  opacity: 0.6;
}
div.SDGs .SDGs-area_cta .v2 {
  position: absolute;
  right: -65px;
  bottom: -45px;
  width: 410px;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area_cta .v2 {
    width: 40%;
    right: -5%;
    bottom: -5vw;
  }
}
div.SDGs .SDGs-area_cta .v2 img {
  width: 100%;
  height: auto;
}
div.SDGs .SDGs-area.holo {
  background-color: #FDD0D2;
  background-image: url(../img/area1-bg.webp);
  background-size: 100%;
  background-repeat: no-repeat;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area.holo .SDGs-area_content.h1b h4 {
    font-size: 4.75vw;
    font-feature-settings: "palt";
  }
}
div.SDGs .SDGs-area.holo .SDGs-area_content.h1b .pic1 {
  width: 120%;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area.holo .SDGs-area_content.h1b .pic1 {
    width: 100%;
  }
}
div.SDGs .SDGs-area.holo .SDGs-area_content.h1b .pic1 img {
  width: 100%;
  max-width: none;
}
div.SDGs .SDGs-area.holo .SDGs-area_content.h1b .txt1 {
  padding-left: 25%;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area.holo .SDGs-area_content.h1b .txt1 {
    padding-left: 0;
  }
}
div.SDGs .SDGs-area.holo .SDGs-area_content.h1b .txt1 dt {
  padding: 0;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area.holo .SDGs-area_content.h1b .txt1 dt {
    padding: 1em 2em;
  }
}
div.SDGs .SDGs-area.holo .SDGs-area_content.h1b .txt1 dd {
  padding: 0;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area.holo .SDGs-area_content.h1b .txt1 dd {
    text-align: center;
  }
}
div.SDGs .SDGs-area.holo .SDGs-area_content.h1b .txt1 dd a {
  color: #333;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area.holo .SDGs-area_content.h1b .c-btn a {
    text-align: center;
  }
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area.holo .SDGs-area_content.h1b .c-btn a span {
    padding-right: 20%;
  }
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area.holo .SDGs-area_content.h1b .c-btn a:after {
    right: 8%;
  }
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area.holo .SDGs-area_content.h1c h4 {
    font-size: 5vw;
    font-feature-settings: "palt";
  }
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area.holo .SDGs-area_content.h1c .c-btn a {
    text-align: center;
  }
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area.holo .SDGs-area_content.h1c .c-btn a span {
    padding-right: 20%;
  }
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area.holo .SDGs-area_content.h1c .c-btn a:after {
    right: 5%;
  }
}
div.SDGs .SDGs-area.ene {
  background-color: #C6EEDF;
  background-image: url(../img/area2-bg.webp);
  background-size: 100%;
  background-repeat: no-repeat;
  margin-top: 140px;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area.ene {
    margin-top: 20vw;
    padding-top: 1px;
  }
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area.ene h2 {
    margin-top: -15vw;
    margin-bottom: 2%;
  }
}
div.SDGs .SDGs-area.ene h3 {
  margin-bottom: 0;
}
div.SDGs .SDGs-area.ene h3:after {
  display: none;
}
div.SDGs .SDGs-area.ene h5 span {
  background-image: url(../img/area2-txt-bg.webp);
}
div.SDGs .SDGs-area.ene .SDGs-area_voice {
  grid-template: ". pic1 text3 pic2" max-content ". pic1 text1 pic2" max-content ". pic1 text2 pic2" 1fr/65px 195px 1fr 276px;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area.ene .SDGs-area_voice {
    grid-template: ". text3 text3 text3 ." max-content ". pic1 text1 text1 ." max-content ". text2 text2 pic2 ." 1fr/0 1fr 1fr 1fr 0;
  }
}
div.SDGs .SDGs-area.ene .SDGs-area_voice figure.v1 {
  position: relative;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area.ene .SDGs-area_voice figure.v1 {
    width: 80%;
  }
}
div.SDGs .SDGs-area.ene .SDGs-area_voice figure.v1:after {
  content: "";
  position: absolute;
  top: 0px;
  left: -60px;
  background-image: url(../img/kira1.webp);
  background-size: cover;
  width: 47px;
  height: 61px;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area.ene .SDGs-area_voice figure.v1:after {
    left: auto;
    width: 35px;
    height: 46px;
    right: -30px;
  }
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area.ene .SDGs-area_voice figure.v2 {
    margin: -35% 0 0 -10%;
    width: 115%;
  }
}
div.SDGs .SDGs-area.ene .SDGs-area_voice figure.v2:after {
  top: 100px;
  left: 0px;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area.ene .SDGs-area_voice figure.v2:after {
    top: 0;
  }
}
div.SDGs .SDGs-area.ene .SDGs-area_voice p.t1 {
  margin: 10px auto 15px -10px;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area.ene .SDGs-area_voice p.t1 {
    margin: 20% 0 0 -10%;
    width: 100%;
  }
}
div.SDGs .SDGs-area.ene .SDGs-area_voice p.t2 {
  margin: 0 -20px 0 auto;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area.ene .SDGs-area_voice p.t2 {
    margin: -5% 0 0 auto;
  }
}
div.SDGs .SDGs-area.ene .SDGs-area_voice p.t3 {
  grid-area: text3;
  margin: 20px 0 10px 0;
}
div.SDGs .SDGs-area.ene .SDGs-area_content h4 {
  background: linear-gradient(to right, #D0FADF 0%, #DAF7EE 100%);
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area.ene .SDGs-area_content.h1a h4 {
    font-size: 5vw;
    font-feature-settings: "palt";
  }
}
div.SDGs .SDGs-area.ene .SDGs-area_content.h1a .txt1 dt {
  padding-left: 1em;
  padding-top: 0;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area.ene .SDGs-area_content.h1a .txt1 dt {
    padding: 1em 0.5em;
  }
}
div.SDGs .SDGs-area.ene .SDGs-area_content.h1a .txt1 dd {
  padding-left: 1em;
  position: relative;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area.ene .SDGs-area_content.h1a .txt1 dd {
    padding: 0 2em;
  }
}
div.SDGs .SDGs-area.ene .SDGs-area_content.h1a .v1 {
  margin-top: 30px;
  margin-bottom: 50px;
  padding-bottom: 0px;
  background-image: url(../img/area2-bg_1.webp);
  border-radius: 50px 0 0 50px;
  display: grid;
  grid-template: "pic1 txt1 pic2 ." max-content "pic1 txt2 pic2 ." 1fr "pic1    .    pic2 ." 30px/276px 1fr 230px 40px;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area.ene .SDGs-area_content.h1a .v1 {
    background-size: cover;
    margin-bottom: 0;
    grid-template: "txt1 txt1 txt1 ." max-content "pic1 .    .    ." max-content "txt2 txt2 pic2 ." 1fr/1fr 1fr 1fr 2.5%;
  }
}
div.SDGs .SDGs-area.ene .SDGs-area_content.h1a .v1 .vp1 {
  grid-area: pic1;
  margin: auto 0 -50px 0px;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area.ene .SDGs-area_content.h1a .v1 .vp1 {
    width: 100%;
    margin: -20vw 0 0 20%;
    position: relative;
  }
}
div.SDGs .SDGs-area.ene .SDGs-area_content.h1a .v1 .vp2 {
  grid-area: pic2;
  margin: auto 0 -50px 0;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area.ene .SDGs-area_content.h1a .v1 .vp2 {
    position: relative;
    margin: -45% 0 0 0;
  }
}
div.SDGs .SDGs-area.ene .SDGs-area_content.h1a .v1 .vt1 {
  grid-area: txt1;
  margin: 20px 0 30px -60px;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area.ene .SDGs-area_content.h1a .v1 .vt1 {
    width: 95%;
    margin: 5% 0 0 auto;
  }
}
div.SDGs .SDGs-area.ene .SDGs-area_content.h1a .v1 .vt2 {
  grid-area: txt2;
  width: 90%;
  margin: 0 0 auto auto;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area.ene .SDGs-area_content.h1a .v1 .vt2 {
    width: 110%;
    margin: 0 -5% auto 5%;
  }
}
div.SDGs .SDGs-area.ene .SDGs-area_content.h1b {
  grid-template: ". title title title ." auto ". t2 t2 t2 ." auto ". pic1 txt1 txt1 ." auto ". pic1 table table ." auto ". t3 t3 t3 ." auto ". txt2 txt2 txt2 ." auto ". txt3 txt3 pic2 ." auto ". pic3 pic3 pic2 ." auto "txt4 txt4 txt4 txt4 txt4" auto ". txt5 txt5 txt5 ." auto ". btn btn btn ." auto/40px 282px 1fr 1fr 40px;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area.ene .SDGs-area_content.h1b {
    grid-template: ". title title title ." auto ". t2 t2 t2 ." auto ". pic1 txt1 txt1 ." auto ". table table table ." auto ". t3 t3 t3 ." auto ". txt2 txt2 txt2 ." auto ". txt3 txt3 txt3 ." auto ". pic2 pic2 pic2 ." auto ". pic3 pic3 pic3 ." auto "txt4 txt4 txt4 txt4 txt4" auto ". txt5 txt5 txt5 ." auto ". btn btn btn ." auto/2.5% 45% 1fr 1fr 2.5%;
  }
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area.ene .SDGs-area_content.h1b h4 {
    font-size: 5vw;
    font-feature-settings: "palt";
  }
}
div.SDGs .SDGs-area.ene .SDGs-area_content.h1b .t2 {
  grid-area: t2;
  margin: 0 0 20px 0;
}
div.SDGs .SDGs-area.ene .SDGs-area_content.h1b .pic1 {
  grid-area: pic1;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  margin: 0 0 auto 0;
}
div.SDGs .SDGs-area.ene .SDGs-area_content.h1b .txt1 {
  grid-area: txt1;
}
div.SDGs .SDGs-area.ene .SDGs-area_content.h1b .txt1 dt {
  padding: 1em;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area.ene .SDGs-area_content.h1b .txt1 dt {
    padding: 1em 0 0 1em;
  }
}
div.SDGs .SDGs-area.ene .SDGs-area_content.h1b table {
  grid-area: table;
  border: 1px solid #5d5d5d;
  margin: 0 0 auto 1em;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area.ene .SDGs-area_content.h1b table {
    margin: 10% 0 0 0;
  }
}
div.SDGs .SDGs-area.ene .SDGs-area_content.h1b table th {
  background-color: #EFEFEF;
  text-align: center;
  border: 1px solid #5d5d5d;
  font-size: 1.5rem;
  padding: 5px 10px;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area.ene .SDGs-area_content.h1b table th {
    font-size: 3vw;
  }
}
div.SDGs .SDGs-area.ene .SDGs-area_content.h1b table th span {
  font-size: 1.2rem;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area.ene .SDGs-area_content.h1b table th span {
    font-size: 2vw;
  }
}
div.SDGs .SDGs-area.ene .SDGs-area_content.h1b table td {
  border: 1px solid #5d5d5d;
  padding: 5px 10px;
  text-align: center;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area.ene .SDGs-area_content.h1b table td {
    padding: 5px;
  }
}
div.SDGs .SDGs-area.ene .SDGs-area_content.h1b table td p {
  display: inline-block;
  text-align: left;
  font-size: 1.2rem;
  line-height: 1.5;
  margin-top: 5px;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area.ene .SDGs-area_content.h1b table td p {
    font-size: 2vw;
  }
}
div.SDGs .SDGs-area.ene .SDGs-area_content.h1b table td p span {
  font-weight: bold;
}
div.SDGs .SDGs-area.ene .SDGs-area_content.h1b .t3 {
  grid-area: t3;
  margin: 50px 0 20px 0;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area.ene .SDGs-area_content.h1b .t3 {
    margin: 35px 0 15px 0;
  }
}
div.SDGs .SDGs-area.ene .SDGs-area_content.h1b .txt2 {
  grid-area: txt2;
  margin: 0;
  padding: 20px;
  text-align: left;
  background-color: #E0F0EC;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area.ene .SDGs-area_content.h1b .txt2 {
    display: block;
    padding: 5%;
  }
}
div.SDGs .SDGs-area.ene .SDGs-area_content.h1b .txt2 figure {
  width: 50%;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area.ene .SDGs-area_content.h1b .txt2 figure {
    width: 100%;
  }
}
div.SDGs .SDGs-area.ene .SDGs-area_content.h1b .txt2 dl {
  width: 45%;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area.ene .SDGs-area_content.h1b .txt2 dl {
    width: 100%;
  }
}
div.SDGs .SDGs-area.ene .SDGs-area_content.h1b .txt2 dl dt {
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area.ene .SDGs-area_content.h1b .txt2 dl dt {
    font-size: 4.5vw;
    margin: 1em 0;
  }
}
div.SDGs .SDGs-area.ene .SDGs-area_content.h1b .txt2 dl dt p {
  display: inline-block;
  background-image: url(../img/dotted.png);
  background-position: left bottom;
  background-repeat: repeat-x;
  background-size: auto 2px;
}
div.SDGs .SDGs-area.ene .SDGs-area_content.h1b .txt2 dl dt span {
  font-size: 4rem;
  color: #FF8045;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area.ene .SDGs-area_content.h1b .txt2 dl dt span {
    font-size: 9vw;
  }
}
div.SDGs .SDGs-area.ene .SDGs-area_content.h1b .txt2 dl dd {
  font-size: 1.5rem;
  line-height: 1.5;
  width: 95%;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area.ene .SDGs-area_content.h1b .txt2 dl dd {
    width: 100%;
    font-size: 4vw;
  }
}
div.SDGs .SDGs-area.ene .SDGs-area_content.h1b .txt3 {
  grid-area: txt3;
  margin: 35px 0 15px auto;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area.ene .SDGs-area_content.h1b .txt3 {
    width: 110%;
    margin: 5% 0 0 0;
  }
}
div.SDGs .SDGs-area.ene .SDGs-area_content.h1b .pic2 {
  grid-area: pic2;
  margin-top: -35px;
  padding-right: 0px;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area.ene .SDGs-area_content.h1b .pic2 {
    width: 30%;
    margin: -30% 0 0 auto;
  }
}
div.SDGs .SDGs-area.ene .SDGs-area_content.h1b .pic3 {
  grid-area: pic3;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area.ene .SDGs-area_content.h1b .pic3 {
    margin: 5px 0 5% 0;
  }
}
div.SDGs .SDGs-area.ene .SDGs-area_content.h1b .txt4 {
  grid-area: txt4;
  background-color: #E0F0EC;
  padding: 40px;
  display: grid;
  grid-template: "tl   tl    tl" auto "pic  sp    txt" auto/1fr 50px 1fr;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area.ene .SDGs-area_content.h1b .txt4 {
    padding: 5%;
    display: block;
  }
}
div.SDGs .SDGs-area.ene .SDGs-area_content.h1b .txt4 h5 {
  grid-area: tl;
  margin-bottom: 16px;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area.ene .SDGs-area_content.h1b .txt4 h5 {
    margin-bottom: 10px;
  }
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area.ene .SDGs-area_content.h1b .txt4 h5 span {
    display: inline-block;
  }
}
div.SDGs .SDGs-area.ene .SDGs-area_content.h1b .txt4 figure {
  grid-area: pic;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area.ene .SDGs-area_content.h1b .txt4 figure {
    margin-bottom: 5%;
  }
}
div.SDGs .SDGs-area.ene .SDGs-area_content.h1b .txt4 figure img {
  width: 100%;
}
div.SDGs .SDGs-area.ene .SDGs-area_content.h1b .txt4 dl {
  grid-area: txt;
}
div.SDGs .SDGs-area.ene .SDGs-area_content.h1b .txt4 dl dt {
  font-size: 1.8rem;
  font-weight: bold;
  background-image: url(../img/icon-check3.webp);
  background-size: 29px;
  background-position: left 5px;
  background-repeat: no-repeat;
  padding-left: 32px;
  margin-bottom: 15px;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area.ene .SDGs-area_content.h1b .txt4 dl dt {
    font-size: 4vw;
    margin-bottom: 10px;
  }
}
div.SDGs .SDGs-area.ene .SDGs-area_content.h1b .txt4 dl dd {
  font-size: 1.5rem;
  line-height: 1.5;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area.ene .SDGs-area_content.h1b .txt4 dl dd {
    font-size: 4vw;
  }
}
div.SDGs .SDGs-area.ene .SDGs-area_content.h1b .txt4 dl dd:nth-of-type(1) {
  margin-bottom: 30px;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area.ene .SDGs-area_content.h1b .txt4 dl dd:nth-of-type(1) {
    margin-bottom: 5%;
  }
}
div.SDGs .SDGs-area.ene .SDGs-area_content.h1b .txt5 {
  grid-area: txt5;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row-reverse;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area.ene .SDGs-area_content.h1b .txt5 dt {
    position: relative;
  }
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area.ene .SDGs-area_content.h1b .txt5 dt img {
    max-width: none;
    width: 130%;
    margin-left: -30%;
  }
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area.ene .SDGs-area_content.h1b .txt5 dd img {
    max-width: none;
    width: 100%;
    margin-left: -5%;
  }
}
div.SDGs .SDGs-area.ene .SDGs-area_content.h1b .c-btn {
  grid-area: btn;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area.ene .SDGs-area_content.h1b .c-btn {
    margin-top: -10px;
  }
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area.ene .SDGs-area_content.h1b .c-btn a {
    font-size: 4.75vw;
  }
}
div.SDGs .SDGs-area.ene .SDGs-area_content.h1c {
  grid-template: ". title title ." auto ". pic1 txt1 ." auto ". txt2 txt2 ." auto ". voice voice voice" auto ". txt3 txt3 ." auto ". btn btn ." auto/40px 1fr 1fr 40px;
  margin-bottom: 25px;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area.ene .SDGs-area_content.h1c {
    grid-template: ". title title ." auto ". pic1 pic1 ." auto ". txt1 txt1 ." auto ". txt2 txt2 ." auto ". voice voice voice" auto ". txt3 txt3 ." auto ". btn btn ." auto/2.5% 1fr 1fr 2.5%;
  }
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area.ene .SDGs-area_content.h1c h4 {
    font-size: 5vw;
    font-feature-settings: "palt";
  }
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area.ene .SDGs-area_content.h1c .txt1 dd {
    width: 85%;
    margin: 0 auto;
  }
}
div.SDGs .SDGs-area.ene .SDGs-area_content.h1c .txt2 {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -60px;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area.ene .SDGs-area_content.h1c .txt2 {
    margin: 5% 0 0 0;
  }
}
div.SDGs .SDGs-area.ene .SDGs-area_content.h1c .txt2 dt {
  font-size: 1.7rem;
  font-weight: bold;
  background: none;
  padding-left: 0;
  margin-bottom: 0;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area.ene .SDGs-area_content.h1c .txt2 dt img {
    width: 90%;
    max-width: none;
  }
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area.ene .SDGs-area_content.h1c .txt2 dd img {
    width: 140%;
    margin: -20% 0 0 -35%;
    max-width: none;
  }
}
div.SDGs .SDGs-area.ene .SDGs-area_content.h1c .v3 {
  margin-top: 0px;
  margin-bottom: 0px;
  padding: 25px 0px;
  background-image: url(../img/area2-bg_1.webp);
  border-radius: 50px 0 0 50px;
  display: block;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area.ene .SDGs-area_content.h1c .v3 {
    padding: 10% 0;
  }
}
div.SDGs .SDGs-area.ene .SDGs-area_content.h1c .v3 p {
  text-align: center;
  font-size: 1.8rem;
  line-height: 1.4;
  font-weight: bold;
  margin-bottom: 25px;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area.ene .SDGs-area_content.h1c .v3 p {
    font-size: 4vw;
  }
}
div.SDGs .SDGs-area.ene .SDGs-area_content.h1c .v3 p span {
  display: inline-block;
  text-align: left;
  background-image: url(../img/icon-check3.webp);
  background-size: 29px;
  background-position: left 5px;
  background-repeat: no-repeat;
  padding-left: 32px;
}
div.SDGs .SDGs-area.ene .SDGs-area_content.h1c .v3 ul {
  display: flex;
  justify-content: center;
  gap: 15px;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area.ene .SDGs-area_content.h1c .v3 ul {
    width: 90%;
    margin: 0 auto;
    gap: 2vw;
  }
}
div.SDGs .SDGs-area.ene .SDGs-area_content.h1c .txt3 {
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  justify-content: center;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area.ene .SDGs-area_content.h1c .txt3 {
    padding: 0;
    margin: 5% 0 0 0;
  }
}
div.SDGs .SDGs-area.ene .SDGs-area_content.h1c .txt3 dt {
  background: none;
  padding-left: 0;
  margin-bottom: 0;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area.ene .SDGs-area_content.h1c .txt3 dt {
    width: 40%;
  }
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area.ene .SDGs-area_content.h1c .txt3 dt img {
    max-width: none;
    width: 130%;
    margin-left: -20%;
  }
}
div.SDGs .SDGs-area.ene .SDGs-area_content.h1c .txt3 dd {
  margin: -30px -40px 0 0;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area.ene .SDGs-area_content.h1c .txt3 dd {
    margin: 0;
    width: 60%;
  }
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area.ene .SDGs-area_content.h1c .txt3 dd img {
    max-width: none;
    width: 100%;
  }
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area.ene .SDGs-area_content.h1c .c-btn {
    margin-top: -10px;
  }
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area.ene .SDGs-area_content.h1c .c-btn a {
    text-align: center;
  }
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area.ene .SDGs-area_content.h1c .c-btn a span {
    padding-right: 20%;
  }
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area.ene .SDGs-area_content.h1c .c-btn a:after {
    right: 10%;
  }
}
div.SDGs .SDGs-area.ene .SDGs-area_cta .v2 {
  position: absolute;
  right: -95px;
  bottom: 0;
  width: 410px;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area.ene .SDGs-area_cta .v2 {
    width: 40%;
    right: 0;
  }
}
div.SDGs .SDGs-area.ene .c-reserve {
  padding: 0;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-area.ene .c-reserve {
    padding-top: 2%;
  }
}
div.SDGs .SDGs-future {
  background-color: #FDFBC7;
}
div.SDGs .SDGs-future-title {
  background-color: #fff;
  background-image: url(../img/area3-title-bg.webp);
  background-size: 100%;
  background-position: left bottom;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-future-title {
    padding-top: 10%;
    flex-wrap: wrap;
    background-image: url(../img/area3-title-bg-sp.webp);
  }
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-future-title h2 {
    width: 70%;
    margin: 0 auto;
    order: 1;
  }
}
div.SDGs .SDGs-future-title .v1 {
  margin: auto 0 0 0;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-future-title .v1 {
    order: 2;
    width: 50%;
  }
}
div.SDGs .SDGs-future-title .v2 {
  margin: 0 0 1.5vw 0;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-future-title .v2 {
    order: 3;
    width: 50%;
    margin: 0;
  }
}
div.SDGs .SDGs-future-area {
  width: 90%;
  max-width: 980px;
  margin: 0 auto 40px;
  padding: 40px 40px 40px 40px;
  background-color: #fff;
  display: grid;
  grid-template: "pic1 txt1 ." auto ". txt2 pic2" auto "txt3 txt3 pic3" auto "pic4 pic4 pic4" auto "btn btn btn" auto;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-future-area {
    width: 95%;
    margin-bottom: 28px;
    padding: 7.5% 2.5% 7.5% 2.5%;
    grid-template: "pic1 txt1 txt1 txt1" auto "txt2 txt2 txt2 pic2" auto "txt3 txt3 txt3 txt3" auto "pic3 pic3 pic3 pic3" auto "pic4 pic4 pic4 pic4" auto "btn btn btn btn" auto/1fr 1fr 1fr 1fr;
  }
}
div.SDGs .SDGs-future-area .pic1 {
  grid-area: pic1;
  margin: 0 0 0 auto;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-future-area .pic1 {
    width: 100%;
  }
}
div.SDGs .SDGs-future-area .txt1 {
  grid-area: txt1;
  margin: auto 0;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-future-area .txt1 {
    width: 100%;
  }
}
div.SDGs .SDGs-future-area .pic2 {
  grid-area: pic2;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-future-area .pic2 {
    margin-top: 10vw;
  }
}
div.SDGs .SDGs-future-area .txt2 {
  grid-area: txt2;
  margin: auto 0;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-future-area .txt2 {
    margin-top: 10vw;
  }
}
div.SDGs .SDGs-future-area .txt3 {
  grid-area: txt3;
  margin-top: 50px;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-future-area .txt3 {
    margin-top: 5%;
  }
}
div.SDGs .SDGs-future-area .pic3 {
  grid-area: pic3;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-future-area .pic3 {
    width: 40%;
    margin: 0 0 0 auto;
  }
}
div.SDGs .SDGs-future-area .pic4 {
  grid-area: pic4;
}
div.SDGs .SDGs-future-area .pic4 li {
  width: 55%;
  background-color: #fff;
  padding: 10px;
  border-radius: 23px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-future-area .pic4 li {
    border-radius: 11px;
    padding: 6px;
  }
}
div.SDGs .SDGs-future-area .pic4 li:nth-of-type(1) {
  margin-top: -130px;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-future-area .pic4 li:nth-of-type(1) {
    margin-top: -28vw;
  }
}
div.SDGs .SDGs-future-area .pic4 li:nth-of-type(2) {
  margin: -200px 0 0 auto;
  position: relative;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-future-area .pic4 li:nth-of-type(2) {
    margin: -8vw 0 0 auto;
  }
}
div.SDGs .SDGs-future-area .c-reserve {
  grid-area: btn;
  gap: 0;
}
div.SDGs .SDGs-future-area .c-reserve a {
  margin: 50px -40px 0 0;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-future-area .c-reserve a {
    width: 105%;
    margin: 5% 0 0 0;
  }
}
div.SDGs .SDGs-future_cta {
  width: 90%;
  max-width: 980px;
  margin: 0 auto 0 auto;
  position: relative;
  display: grid;
  grid-template: ". v1 t1" auto "mov mov mov" auto "v2 v2 v2" auto/80px max-content 1fr;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-future_cta {
    width: 95%;
    margin-top: 2%;
    margin-bottom: 0;
    grid-template: ". v1 t1" auto "mov mov mov" auto "v2 v2 v2" auto/10% 20% 70%;
  }
}
div.SDGs .SDGs-future_cta .v1 {
  grid-area: v1;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-future_cta .v1 {
    width: 100%;
  }
}
div.SDGs .SDGs-future_cta .t1 {
  grid-area: t1;
  margin: auto 0 -120px -10px;
  position: relative;
  z-index: 2;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-future_cta .t1 {
    width: 100%;
    margin: auto 0 -10vw 0;
  }
}
div.SDGs .SDGs-future_cta a {
  grid-area: mov;
  background-color: #fff;
  padding: 15px;
  border-radius: 23px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  position: relative;
}
div.SDGs .SDGs-future_cta a .movie-modal-wrap .ico-movie {
  display: none;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-future_cta a {
    padding: 8px;
    border-radius: 10px;
  }
}
div.SDGs .SDGs-future_cta a:after {
  content: "";
  width: 169px;
  height: 131px;
  background-image: url(../img/play-btn.webp);
  background-size: cover;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: 0.3s;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-future_cta a:after {
    width: 64px;
    height: 50px;
  }
}
div.SDGs .SDGs-future_cta a:hover:after {
  opacity: 0.6;
}
div.SDGs .SDGs-future_cta .v2 {
  grid-area: v2;
  display: flex;
  justify-content: space-between;
  margin-top: -155px;
  position: relative;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-future_cta .v2 {
    margin-top: -15vw;
    align-items: flex-end;
  }
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-future_cta .v2 img {
    width: 35%;
    max-width: none;
    height: auto;
  }
}
div.SDGs .SDGs-future_cta .v2 img:nth-of-type(2) {
  margin-right: -25px;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-future_cta .v2 img:nth-of-type(2) {
    width: 25%;
    margin-right: 0;
  }
}
div.SDGs .SDGs-making {
  background-color: #FDE6DF;
  padding: 60px 0;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-making {
    padding: 7.5% 0;
  }
}
div.SDGs .SDGs-making h2 {
  text-align: center;
  margin: 0 auto 55px auto;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-making h2 {
    width: 50%;
    margin-bottom: 7.5%;
  }
}
div.SDGs .SDGs-making ul {
  display: flex;
  width: 90%;
  max-width: 980px;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-making ul {
    flex-direction: column;
    gap: 5vw;
  }
}
div.SDGs .SDGs-making ul li {
  width: 48%;
  margin: 1%;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-making ul li {
    width: 100%;
    margin: 0;
  }
}
div.SDGs .SDGs-making ul li span {
  display: block;
  font-size: 2.4rem;
  font-weight: bold;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-making ul li span {
    font-size: 5vw;
  }
}
div.SDGs .SDGs-making ul li a {
  background-color: #fff;
  display: block;
  padding: 15px;
  border-radius: 23px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  position: relative;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-making ul li a {
    padding: 7px;
    border-radius: 11px;
  }
}
div.SDGs .SDGs-making ul li a .movie-modal-wrap .ico-movie {
  display: none;
}
div.SDGs .SDGs-making ul li a:after {
  content: "";
  width: 110px;
  height: 85px;
  background-image: url(../img/play-btn.webp);
  background-size: cover;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: 0.3s;
}
@media screen and (max-width: 767px) {
  div.SDGs .SDGs-making ul li a:after {
    width: 81px;
    height: 63px;
  }
}
div.SDGs .SDGs-making ul li a:hover:after {
  opacity: 0.6;
}
div.SDGs .c-btn {
  margin-top: -10px;
}
@media screen and (max-width: 767px) {
  div.SDGs .c-btn {
    margin-top: 10px;
  }
}
div.SDGs .c-btn a {
  position: relative;
  text-decoration: none;
  display: block;
  text-align: center;
  background: transparent;
  outline: none;
  transition: all 0.2s ease;
  font-size: 2.4rem;
  color: #fff;
  font-weight: bold;
}
@media screen and (max-width: 767px) {
  div.SDGs .c-btn a {
    font-size: 5vw;
    line-height: 1.3;
    text-align: left;
  }
}
div.SDGs .c-btn a span {
  position: relative;
  z-index: 2;
  display: block;
  padding: 10px 30px;
  background: linear-gradient(to right, #ff800a 0%, #ff764e 100%);
  transition: all 0.3s ease;
}
@media screen and (max-width: 767px) {
  div.SDGs .c-btn a span {
    padding: 15px 20px;
  }
}
div.SDGs .c-btn a .m-icon.m-icon-blank {
  display: none;
}
div.SDGs .c-btn a:after {
  content: "";
  background-image: url(../img/icon-next.webp);
  background-size: cover;
  width: 48px;
  height: 48px;
  position: absolute;
  right: 2.5%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  transition: 0.3s;
}
@media screen and (max-width: 767px) {
  div.SDGs .c-btn a:after {
    width: 34px;
    height: 34px;
  }
}
div.SDGs .c-btn a:before {
  content: "";
  /*絶対配置で影の位置を決める*/
  position: absolute;
  z-index: 0;
  top: 10px;
  left: 0;
  /*影の形状*/
  width: 100%;
  height: 100%;
  background-color: #AF7A2B;
}
div.SDGs .c-btn a:hover span {
  background-color: #333;
  color: #fff;
  transform: translateY(10px);
}
div.SDGs .c-btn a:hover:after {
  top: calc(50% + 10px);
}
div.SDGs .c-reserve {
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 80px;
  padding: 20px 0 0 0;
}
@media screen and (max-width: 1350px) {
  div.SDGs .c-reserve {
    gap: 0px;
  }
}
@media screen and (max-width: 767px) {
  div.SDGs .c-reserve {
    flex-direction: column;
  }
}
div.SDGs .c-reserve a {
  position: relative;
  display: block;
  margin-top: 20px;
}
@media screen and (max-width: 767px) {
  div.SDGs .c-reserve a {
    width: 95%;
    margin-left: 5%;
    margin-top: 0;
  }
}
div.SDGs .c-reserve a img {
  position: relative;
  z-index: 2;
}
div.SDGs .c-reserve a:after {
  content: "";
  background: no-repeat 0 0/100% auto;
  position: absolute;
  transition: 0.26s ease;
  pointer-events: none;
  background-image: url(../img/reserve-btn-bg.webp);
  height: 100%;
  width: 100%;
  left: 0;
  bottom: 0;
}
div.SDGs .c-reserve a:hover {
  opacity: 1;
}
div.SDGs .c-reserve a:hover img {
  opacity: 1;
  transform: translateY(10px);
}
@media screen and (max-width: 767px) {
  div.SDGs .c-reserve .pic {
    position: relative;
    z-index: 3;
    width: 50%;
    display: block;
    margin: -5% auto 0 auto;
  }
}
div.SDGs .c-how {
  background-color: #fff;
}
div.SDGs .c-how a {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  min-height: 320px;
  background-size: cover;
  font-size: 2.4rem;
  line-height: 1.5;
  font-weight: bold;
  text-align: center;
  color: #fff;
  text-decoration: none;
}
@media screen and (max-width: 767px) {
  div.SDGs .c-how a {
    min-height: inherit;
    padding: 10% 0;
    font-size: 5vw;
    background-position: center center;
  }
}
div.SDGs .c-how a:after {
  content: "";
  width: 49px;
  height: 49px;
  background-image: url(../img/icon-next_1.svg);
  background-size: cover;
  display: block;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  div.SDGs .c-how a:after {
    width: 35px;
    height: 35px;
  }
}
div.SDGs .c-how a:hover {
  opacity: 0.6;
}
div.SDGs .c-how.holo a {
  background-image: url(../img/bg1.webp);
}
@media screen and (max-width: 767px) {
  div.SDGs .c-how.holo a {
    background-image: url(../img/bg1-sp.webp);
  }
}
div.SDGs .c-how.ene a {
  background-image: url(../img/bg2.webp);
}
@media screen and (max-width: 767px) {
  div.SDGs .c-how.ene a {
    background-image: url(../img/bg2-sp.webp);
  }
}
div.SDGs .side-nav {
  display: flex;
  flex-direction: column;
  position: fixed;
  right: 0;
  top: 514px;
  right: 0;
  top: 310px;
  margin-top: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.26s, visibility 0.26s;
  z-index: 999;
}
@media screen and (max-width: 767px) {
  div.SDGs .side-nav {
    display: none;
  }
}
div.SDGs .side-nav.is-fixed {
  opacity: 1;
  visibility: visible;
}
div.SDGs .side-nav ul li {
  width: 52px;
  margin-top: 5px;
}
div.SDGs a[target=_blank] .m-icon.m-icon-blank {
  display: none;
}

@media print, screen and (min-width: 769px) and (max-width: 9999px) {
  .glb-pageWrapper {
    min-width: 1200px;
  }
}
@media print, screen and (min-width: 769px) and (max-width: 9999px) {
  .banner-common {
    top: 130px;
  }
}
.container-second {
  max-width: 960px;
  margin: 0 auto;
}

@media screen and (min-width: 0px) and (max-width: 768px) {
  .container-second {
    padding: 0 15px;
  }
}
.for_bnr a {
  display: block;
  max-width: 720px;
  width: 90%;
  margin: 60px auto;
}

/*# sourceMappingURL=sdgs.css.map */