@charset "UTF-8";

.head21,
.head24,
.head32{
  font-weight: 500;
}

/*--------------------------------------------------------#sec-sdgs-01-----*/

#sec-sdgs-01{
  padding: 90px 0 110px;
}

.flex-s01{
  margin-bottom: 50px;
  justify-content: space-between;
  align-items: flex-start;
}

.s01-ttl{
  width: 40%;
}

.s01-text{
  width: 56%;
}

.flex-s02{
  margin-bottom: 40px;
  justify-content: space-between;
  align-items: flex-start;
}

.s02-img{
  width: 30%;
}

.s02-detail{
  width: 67%;
}

.s02-detail ul{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 0 -0.5% 1%;
}

.s02-detail ul li{
  margin: 0 0.5%;
  width: 10%;
}

.dot-head .head21{
  display: flex;
  margin-bottom: 15px;
}

.dot-head .head21 .grad-head{
  margin-right: 10px;
}

/*--------------------------------------------------------#sec-sdgs-02-----*/

#sec-sdgs-02{
  background: #f4f4f4;
  padding: 120px 0;
}

.flex-s03{
  justify-content: space-between;
  align-items: center;
  margin-bottom: 50px;
}

.s03-img{
  width: 46%;
}

.s03-detail{
  width: 50%;
}

.s03-ttl{
  margin-bottom: 30px;
}

.s03-ttl .gra-head{
  margin-bottom: 10px;
}

.white-border{
  margin-top: 20px;
}

.white-border span{
  background: #fff;
  font-weight: 500;
  padding: 3px 10px 5px;
}

.s03-graph img{
  box-shadow: 0px 0px 20px -1px rgba(0,0,0,0.3);
  -webkit-box-shadow: 0px 0px 20px -1px rgba(0,0,0,0.3);
  -moz-box-shadow: 0px 0px 20px -1px rgba(0,0,0,0.3);
}

/*--------------------------------------------------------#sec-sdgs-03-----*/

#sec-our-sdgs{
  padding: 120px 0;
}

.flex-our{
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 60px;
}

.our-ttl{
  width: 40%;
}

.our-detail{
  width: 60%;
}

.m-head{
  display: flex;
  font-weight: 500;
  margin-bottom: 10px;
}

.m-head .gra-head{
  margin-right: 5px;
}

.flex-materiality{
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 -0.25%;
}

.flex-materiality li{
  margin: 0 0.35%;
  width: 19.25%;
}

.m-wrap{
  border-radius: 5px;
  background: #fff;
  box-shadow: 0px 0px 20px -1px rgba(35,156,236,0.3);
  -webkit-box-shadow: 0px 0px 20px -1px rgba(35,156,236,0.3);
  -moz-box-shadow: 0px 0px 20px -1px rgba(35,156,236,0.3);
  padding: 30px 5%;
  text-align: center;
}

.m-wrap img{
  height: 85px;
  object-fit: contain;
}

.sdgs-point-wrap{
  margin-top: 70px;
}

.flex-point{
  margin-bottom: 40px;
  justify-content: space-between;
  align-items: center;
}

.point-img{
  width: 47%;
}

.point-detail{
  width: 50%;
}

.point-ttl{
  border-bottom: 1px solid #eeeeee;
  margin-bottom: 25px;
  padding-bottom: 10px;
}

.point-ttl .text28{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-weight: 500;
}

.point-ttl .text28 .gra-head{
  font-size: 42px;
  font-size: 4.2rem;
  font-weight: 500;
  margin-right: 10px;
}

.ft-c-blue{
  margin-bottom: 20px;
}

.point-detail .text15{
  margin-bottom: 20px;
}

.our-icon{
  display: flex;
}

.our-icon img{
  margin-right: 5px;
  width: 110px;
}

.m-list-wrap{
  border-bottom: 1px dotted #dbdbdb;
  margin-bottom: 20px;
  padding-bottom: 20px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}

.m-list-icon img {
    box-shadow: 0px 0px 20px -1px rgba(35,156,236,0.3);
    -webkit-box-shadow: 0px 0px 20px -1px rgba(35,156,236,0.3);
    -moz-box-shadow: 0px 0px 20px -1px rgba(35,156,236,0.3);
    justify-content: center;
    align-items: center;
    border-radius: 90px;
    height: 90px !important;
    width: 90px !important;
    margin-right: 15px;
    display: flex;
    padding: 20px;
}

.m-ttl{
  width: 340px;
}

.m-list-wrap .text15{
  width: calc(100% - 455px);
}

@media only screen and (max-width: 1200px) {

.s01-ttl .head42 {
    font-size: 3.4rem;
}

.m-wrap img {
    height: 65px;
    object-fit: contain;
}

.m-wrap .text15{
  font-size: 13px;
  font-size: 1.3rem;
  line-height: 1.4 !important;
}

.our-icon img{
  width: 90px;
}

}

@media only screen and (max-width: 960px) {

.s01-ttl .head32 {
    font-size: 2rem;
}

.s01-ttl .head42 {
    font-size: 3rem;
}

.s02-detail ul li {
    margin: 0 0.5%;
    width: 15.5%;
}

.s03-ttl {
    margin-bottom: 20px;
}

.s03-ttl .gra-head {
    margin-bottom: 0;
}

.flex-s03 {
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 30px;
}

.white-border span {
    font-size: 1.6rem;
}

}

@media only screen and (max-width: 768px) {

.head32 {
    font-size: 2.2rem;
}

.dot-head .head21 {
    margin-bottom: 10px;
}

#sec-sdgs-01{
    padding: 60px 0 80px;
}

.flex-s01 {
    margin-bottom: 30px;
    display: block;
}

.s01-ttl {
    width: 100%;
    margin-bottom: 25px;
}

.s01-ttl .head32 {
    font-size: 1.6rem;
}

.s01-ttl .head42 {
    font-size: 2.4rem;
}

.s01-text {
    width: 100%;
}

.flex-s02 {
    display: block;
}

.s02-img {
    width: 70%;
    margin: 0 auto 15px;
}

.s02-detail {
    width: 100%;
}

#sec-sdgs-02 {
    padding: 60px 0;
}

.flex-s03 {
    display: block;
    margin-bottom: 40px;
}

.s03-img {
    width: 100%;
    margin-bottom: 25px;
}

.s03-detail {
    width: 100%;
}

#sec-our-sdgs {
    padding: 60px 0;
}

.flex-our {
    display: block;
    margin-bottom: 40px;
}

.our-ttl {
    margin-bottom: 25px;
    width: 100%;
}

.m-wrap {
    padding: 15px 5%;
}

.flex-materiality {
    margin: 0 -1%;
}

.flex-materiality li {
    width: 48%;
    margin: 0 1% 2%;
}

.flex-point {
    display: block;
}

.point-img {
    margin-bottom: 15px;
    width: 100%;
}

.point-detail {
    width: 100%;
}

.m-list-wrap .text15 {
    width: 100%;
    margin-top: 15px;
}

.m-wrap img {
    height: 40px;
}

.sdgs-point-wrap {
    margin-top: 50px;
}

.our-ttl .head32{
  font-size: 2.6rem;
}

.point-ttl .text28 {
    font-size: 2.2rem;
}

.point-ttl .text28 .gra-head {
    font-size: 3.2rem;
}

.point-ttl {
    margin-bottom: 15px;
    padding-bottom: 0;
}

.m-ttl {
    width: 200px;
}

}

@media only screen and (max-width: 400px) {

}