@charset "UTF-8";

.vision1{
  display: flex;
  justify-content: space-between;
  flex-direction: row-reverse;
  padding: 40px 60px;
  margin-bottom: 30px;
  background: #D4E6F1;
  border-radius: 10px;
}
.vision1 figure{
  width: 48.7%;
}
.vision1 figure img{
  border-radius: 10px;
}
.vision1 div{
  width: 47.8%;
  padding-top: 20px;
}
.vision2{
  display: flex;
  justify-content: space-between;
  margin-bottom: 80px;
}
.vision2 .leftcol{
  width: 45px;
  font-weight: 500;
}
.vision2 .leftcol .txt1{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  align-items: center;
  margin-bottom: 10px;
  width: 45px;
  height: 188px;
  color: #fff;
  line-height: 1.2;
  background: #003A91;
  border-radius: 5px;
}
.vision2 .leftcol .txt1 span{
  display: inline-block;
  width: 100%;
  font-size: 23px;
  text-align: center;
  line-height: 1;
}
.vision2 .leftcol ol{
  margin-bottom: 10px;
  height: 217px;
  background: url(../img/future/vision2-flow.svg) center top no-repeat;
}
.vision2 .leftcol ol li{
  padding-top: .9em;
  height: 72px;
  color: #fff;
  text-align: center;
  line-height: 1.2;
}
.vision2 .leftcol .txt2{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  align-items: center;
  margin-bottom: 10px;
  width: 45px;
  height: 154px;
  color: #fff;
  line-height: 1.2;
  background: #003A91;
  border-radius: 5px;
}
.vision2 dl{
  width: 31%;
}
.vision2 dl dt{
  color: #fff;
  font-size: 26px;
  text-align: center;
  border-radius: 10px 10px 0 0;
}
.vision2 dl.box1 dt{
  background: #1184D2;
}
.vision2 dl.box2 dt{
  background: #6B78D2;
}
.vision2 dl.box3 dt{
  background: #26AEB5;
}
.vision2 dl dd{
  padding: 20px;
  height: 540px;
  line-height: 1.75;
  background: #fff;
  border-radius: 0 0 10px 10px;
}
.vision2 dl dd .lead{
  height: 130px;
}
.vision2 dl dd ol{
  font-weight: 500;
  margin-bottom: 10px;
  overflow: hidden;
}
.vision2 dl dd ol li{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  height: 60px;
  line-height: 1.5;
  text-align: center;
  border-radius: 5px;
  margin-bottom: 10px;
}
.vision2 dl.box1 dd ol li{
  color: #1184D2;
  background: #D4E6F1;
}
.vision2 dl.box2 dd ol li{
  color: #6B78D2;
  background: #DCDFF4;
}
.vision2 dl.box3 dd ol li{
  color: #26AEB5;
  background: #D2ECED;
}
.vision3{
  padding: 40px 60px;
  background: #D4E6F1;
  border-radius: 10px;
  margin-bottom: 80px;
}
.vision3 dl{
  border-radius: 14px;
  padding: 40px 5px 45px;
  background: #fff;
  margin-bottom: 25px;
}
.vision3 dl dt{
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
}
.vision3 dl dd p{
  line-height: 1.4;
  padding-top: 10px;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .vision1{
    display: block;
    padding: 30px 20px;
    margin-bottom: 30px;
  }
  .vision1 figure{
    width: auto;
  }
  .vision1 div{
    width: auto;
    padding-top: 20px;
  }
  .vision2{
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 30px;
  }
  .vision2 .leftcol{
    width: 45px;
    font-weight: 500;
  }
  .vision2 .leftcol .txt1{
    height: 160px;
  }
  .vision2 dl{
    width: calc(100% - 60px);
    margin-bottom: 30px;
  }
  .vision2 dl dt{
    padding: 5px;
    font-size: 21px;
  }
  .vision2 dl dd{
    height: 500px;
  }
  .vision2 dl dd .lead{
    height: 100px;
  }
  .vision3{
    padding: 30px 20px;
    margin-bottom: 60px;
  }
  .vision3 dl{
    border-radius: 10px;
    padding: 20px 10px 25px;
    margin-bottom: 20px;
  }
  .vision3 dl dt{
    font-size: 17px;
  }
  .vision3 dl dd p{
    padding-top: 10px;
  }
}

.decarbonized1{
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  margin-bottom: 80px;
}
.decarbonized1 div{
  width: 63.3%;
  margin-right: 20px;
}
.decarbonized2{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row-reverse;
  padding: 40px;
  margin-bottom: 80px;
  background: #D4E6F1;
  border-radius: 10px;
}
.decarbonized2 ol{
  width: 48.4%;
}
.decarbonized2 ol li{
  padding: 10px;
  text-align: center;
  background: #F4FAFD;
  border-radius: 10px;
}
.decarbonized2 ol li:not(:last-child){
  margin-bottom: 40px;
  position: relative;
}
.decarbonized2 ol li:not(:last-child):after{
  display: block;
  content: "";
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  height: 40px;
  background: url(../img/future/decarbonized2-bottom.svg) center no-repeat;
}
.decarbonized2 figure{
  width: 48%;
}
.decarbonized3{
  display: flex;
  justify-content: space-between;
  margin-bottom: 80px;
}
.decarbonized3 article{
  padding: 30px;
  width: 48.6%;
  background: #fff;
  border-radius: 10px;
}
.decarbonized3 article div{
  display: flex;
  justify-content: space-between;
  padding-top: 20px;
}
.decarbonized3 article div p{
  width: 65%;
}
.decarbonized3 article div figure{
  width: 30%;
}
@media screen and (max-width: 767px) {
  .decarbonized1{
    display: block;
    overflow: hidden;
    align-items: center;
    margin-bottom: 40px;
  }
  .decarbonized1 div{
    width: auto;
    flex: 1;
    margin-right: 0;
    margin-bottom: 20px;
  }
  .decarbonized1 figure{
    float: right;
    text-align: center;
    padding-top: 70px;
    width: 28%;
  }
  .decarbonized2{
    display: block;
    padding: 0 20px 20px;
    margin-bottom: 40px;
  }
  .decarbonized2 ol{
    width: auto;
  }
  .decarbonized2 figure{
    width: auto;
  }
  .decarbonized3{
    display: block;
    margin-bottom: 40px;
  }
  .decarbonized3 article{
    margin-bottom: 20px;
    padding: 20px;
    width: auto;
  }
  .decarbonized3 article div{
    padding-top: 10px;
  }
}