@charset "utf-8";
/* CSS Document */
.pagevisual {
  background: url("../../common/img/mv-sdgs.png")no-repeat center;
  background-size: cover;
}


.sdgs-bg {
  background: url("../img/sdgs_bg01.png")no-repeat center;
  background-size: cover;
  padding: 95px 0;
}
.sdgs-bg p{
  text-align: center;
  color: #fff;
  font-size: 2.4rem;
  line-height: 1.7;
  letter-spacing: 0.2em;
  font-weight: bold;
}
.sdgs-example {
  background: #ECEEEE;
}
.sdgs-example .container{
  padding: 60px 0;
}
.sdgs-example ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  gap: 20px;
}
.sdgs-box {
  background: #fff;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 75px 0;
  width: 100%;
}
.sdgs-box:first-child {
  margin-top: 40px;
}
.sdgs-box:nth-child(n+2) {
  width: 100%;
  max-width: 49%;
}

.sdgs-box h3{
  text-align: center;
  color: #0D2C61;
  font-size: 2.4rem;
  margin-bottom: 20px;
}
.sdgs-box ul{
  margin-top: 30px;
  margin-left: 5%;
  list-style: disc;
}
.sdgs-numbers {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0 20px;
}
.sdgs-description {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 50px;
  
}
.sdgs-description div{
  width: 100%;
  max-width: 200px;
}

.sdgs_single {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 50px;
}
.sdgs_text {
  padding-top: 10px;
  letter-spacing: 0;
  width: 100%;
  max-width: 260px;
}

/*-----------------------------------------*/


/*-----------------------------------------*/
/* 固有レスポンシブ
------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 1199px) {
}
/*タブレット（縦）*/
@media screen and (orientation: portrait) and (min-width: 768px){}

@media screen and (max-width: 767px) {
  .sdgs-bg {
    padding: 95px 5%;
  }
  .sdgs-example .container {
    padding: 50px 5% 0;
  }
  
  .sdgs-description {
    flex-wrap: wrap;
  }
  .sdgs-box:nth-child(n+2) {
    max-width: inherit;
  }
  .sdgs-box h3{
    padding: 0 5%;
    font-size: 2rem;
    letter-spacing: 0.1em;
  }
  .sdgs-bg p {
    font-size: 2rem;
  }
  .sdgs-numbers {
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px 10px;
  }
  .sdgs-numbers img {
    max-width: 46%;
  }

}