.flbox{
  display: block;
}
.nowrap{
  white-space: nowrap;
}
.wrap2{
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  position: relative;
  padding: 0 4%;
  box-sizing: border-box;
}
.microgrid #sec1 .blk1 {
  padding: 10px 0 0px;
}
.microgrid #sec1 .blk2 {
  height: 40vw;
  background-image: url(../img/power/microgrid/key1.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.microgrid #sec1 .blk1 h1,
.microgrid #sec1 .blk1 h2{
  margin-bottom: 30px;
  font-size: 4.5vw;
  letter-spacing: 0.01em;
  line-height: 1.5;
}
.microgrid #sec1 .blk1 h1 .en,
.microgrid #sec1 .blk1 h2 .en {
  font-family: athelas, serif;
  text-transform: capitalize;
  color: #a4c8e3;
  display: block;
}
.microgrid #sec1 .blk1 h1 .jp,
.microgrid #sec1 .blk1 h2 .jp {
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "メイリオ", Meiryo, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-weight: 500;
  font-size: 7vw;
  letter-spacing: 0.14em;
  display: block;
}
#sec2 {
  padding: 10vw 0 12vw;
}
#sec2 h2 {
  font-size: 6vw;
  margin-bottom: 6vw;
  letter-spacing: 0;
  color: #0068b7;
  font-weight: 500;
}
#sec2 .flbox{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 10vw 0 6vw;
}
#sec2 .flbox .box{
  margin: 0 2vw 4vw;
  padding: 4vw 0;
  border-radius: 10px;
  width: 45%;
}
#sec2 .flbox .box:nth-child(1){
  border: 4px solid #88c13e;
}
#sec2 .flbox .box:nth-child(2){
  border: 3px solid #3ec197;
}
#sec2 .flbox .box:nth-child(3){
  border: 3px solid #a273c9;
}
#sec2 .flbox .box p.ttls{
  font-weight: 500;
  text-align: center;
  font-size: 5.5vw;
  letter-spacing: 0.025em;
}
#sec2 .flbox .box p.ttls small{
  display: block;
  font-size: 4vw;
  line-height: 1;
}
#sec2 h4 {
  margin: 9vw 0 3vw;
  padding: 0 4%;
  box-sizing: border-box;
  color: #0068b7;
}
#sec2 p.img{
  width: 90%;
  margin: 0 auto 9vw;
}
#sec2 p.img img{
  width: 100%;
  height: auto;
}
#sec3 h2 {
  font-size: 6vw;
  margin-bottom: 6vw;
  letter-spacing: 0;
  color: #0068b7;
  font-weight: 500;
  line-height: 1.6;
}
#sec3 h2 + p.txt{
  margin-bottom: 9vw;
}
#sec3 p.img{
  width: 90%;
  margin: 0 auto;
}
#sec3 p.img + p.img {
  margin: 9vw auto 9vw;
}
#sec3 p.img img{
  width: 100%;
  height: auto;
}
#sec3 p.txt1{
  margin-bottom: 6vw;
}
#sec3 p.txt2{
  margin-bottom: 12vw;
}
#sec3 .video {
  margin-bottom: 6vw;
}
#sec3 .video p.img{
  width: 100%;
}
#sec3 .video p.img img{
  width: 100%;
  height: auto;
}
#sec3 .video iframe{
  width: 100%;
  height: 52vw;
}
#sec3 .flbox +p.txt{
  margin-top: 6vw;
}







@media only screen and (min-width: 768px) {
.flbox{
  display: flex;
}
.wrap2{
  width: 100%;
  max-width: 1000px;
  padding: 0;
}
.microgrid #sec1 .blk1 {
  padding: 28px 0 33px;
}
.microgrid #sec1 .blk1 h1,
.microgrid #sec1 .blk1 h2 {
  font-size: 26px;
  line-height: 40px;
}
.microgrid #sec1 .blk1 h1 .en,
.microgrid #sec1 .blk1 h2 .en {
  font-family: athelas, serif;
  text-transform: capitalize;
  color: #a4c8e3;
}
.microgrid #sec1 .blk1 h1 .jp,
.microgrid #sec1 .blk1 h2 .jp {
  font-size: 42px;
  line-height: 56px;
}
.microgrid #sec1 .blk2 {
  height: 320px;
}
#sec2 {
  padding: 109px 0 88px;
}
#sec2 h2 {
  font-size: 32px;
  margin-bottom: 33px;
  letter-spacing: 0.025em;
}
#sec2 .flbox {
  margin: 38px 0 47px;
}
#sec2 .flbox .box {
  margin: 0 10px;
  padding: 30px 0;
  border-radius: 10px;
  width: 257px;
}
#sec2 .flbox .box p.ttls {
  font-size: 34px;
}
#sec2 .flbox .box p.ttls small {
  font-size: 24px;
  margin-bottom: 14px;
}
#sec2 h4 {
  margin: 53px auto 5px;
  font-size: 22px;
  width: 853px;
  padding: 0;
}
#sec3 h2 + p.txt{
  margin-bottom: 43px;
}
#sec2 p.img {
  width: 842px;
  margin: 0 auto 50px;
}
#sec3 h2 {
  font-size: 32px;
  margin-bottom: 25px;
  letter-spacing: 0.025em;
}
#sec3 p.img {
  width: 774px
}
#sec3 p.img + p.img {
  margin: 39px auto 67px;
}
#sec3 p.txt1 {
  margin-bottom: 36px;
}
#sec3 p.txt2 {
  margin-bottom: 50px;
}
#sec3 .video {
  margin-bottom: 0;
  width: 57%;
  height: 321px;
}
#sec3 .video iframe{
  width: 100%;
  height: 100%;
}
#sec3 .video + p.txt{
  width: 41%;
}
#sec3 .flbox + p.txt {
  margin-top: 0;
}
#sec3 .flbox{
  justify-content: space-between;
  margin-bottom: 52px;
}
#sec3{
  padding-bottom: 28px;
}

}

@media only screen and (min-width: 768px)  and (max-width: 1240px) {
.microgrid #sec1 .blk1 h1,
.microgrid #sec1 .blk1 h2{
  padding: 0 20px;
  box-sizing: border-box;
}
#sec2,
#sec3{
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}
#sec2 p.img{
  width: 90%;
}
}

/*ipad code*/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  #sec2 .flbox .box {
    width: 215px;
}
#sec2 h4 {
  width: 100%;
  margin-bottom: 20px;
}
#sec3 p.img {
  width: 90%;
}
}