/* CSS Document */
@charset "UTF-8";

.bg_waffle{
  background-color: #ebf0f1;
  overflow-x: hidden;
}

/*KEY VISUAL==================*/
.wa-keyvis{
width: 100%;
max-width: 2000px;
height: 952px;
background: url("../imgs/03_waffle/waffle_keyvis.jpg") no-repeat center;
background-size: cover;
color: #474246;
margin: 0 auto 76px;
}
.wa-keyvis-inner{
/*left: 12vw;*/
padding: 684px 0 0 165px;
max-width: 1366px;
box-sizing:border-box;
margin: 0 auto;
/*top: 50vw;*/
}
.wa-keyvis-inner h2,.wa-keyvis-inner p{
font-family:'Noto Sans JP',sans-serif;
}
.wa-keyvis-inner h2{
/*font-size: 2.73vw;*/
font-size: 52px;
font-weight: 400;
/*margin-bottom: 3.3vw;*/
margin-bottom: 45px;
}
.wa-keyvis-inner h2 span{
font-size: 90%;
}
.wa-keyvis-inner p{
/*font-size: 1.44vw;*/
font-size: 20px;
line-height: 2.1;
letter-spacing: 1.6px;
}

/*contaienr===================*/
.wa-container{
  position: relative;
  max-width: 1366px;
  height: 3320px;
  z-index: 1;
  margin: auto;
}
.wa-cont{
position: absolute;
}
.wa-inner h2{
font-size: 28px;
font-weight: 500;
line-height: 1.9;
margin-bottom: 48px;
text-align: left;
}
.wa-inner p{
font-size: 20px;
line-height: 2.5;
text-align: justify;
letter-spacing: 1.5px;
}

/*Waffle Contents 01*/
.wa-cont-01{
width: 830px;
top:0;
left: 0;
z-index: -1;
}
.wa-cont-01 .wa-inner{
margin: 92px 0 0 192px;
}
.wa-cont-01 p{
width: 33.67vw;
max-width: 460px;
}

.waffleLine{
position: absolute;
top: 420px;
left: 520px;
display: block;
/*margin: 50px;*/
width: 1px;
height: 200px;
background-color: #474246;
}

/*Waffle Contents 02*/
.wa-cont-02{
width: 576px;
top:1000px;
right: 0;
z-index: -2;
}
.wa-cont-02 .wa-inner{
margin: 64px 0 0 42px;
}
.wa-cont-02 p{
width: 426px;
}
.wa-cont-02 .waffleLine{
top: 298px;
left: 220px;
height: 140px
}


/*Waffle Contents 03*/
.wa-cont-03{
position: relative;
top: 1318px;
left: 0;
max-width: 1366px;
height: 1772px;
text-align: center;
z-index:-3;
}
.wa-cont-03 .wa-inner p{
width: 41.7vw;
max-width: 570px;
}
.wa-img-01,.wa-img-02,.wa-cont-03>.wa-inner,.wa-cont-03>a{
position: absolute;
}
.wa-img-01{
top: 0;
left: -350px;
}
.wa-img-02{
bottom: 0;
right: -350px;
}
.wa-cont-03>.wa-inner{
top: 1014px;
left: 192px;
z-index: 1;
}
.wa-cont-03>a{
width: 100%;
bottom: 0px;
left: 0px;
right: 0px;
margin: auto;
z-index: 9999;
}
/*ARROW===============*/
.wa-cont-03 .arrow-text{
font-size: 22px;
margin-bottom: 18px;
}	
.wa-cont-03 .arrow{
width: 274px;
}
.wa-cont-03 .arrow::before{
width: 18px;
}


/*MEDIA QUERY========================
=====================================
=====================================*/
@media screen and (max-width:1081px){

  .wa-cont-01 .wa-inner{
  margin: 92px 0 0 80px;
  }
  .wa-cont-01 p{
  width: 80vw;
  max-width: 740px;
  }
  .wa-cont-02{
  top:1100px;
  }
  .wa-cont-02 .wa-inner{
  margin: 64px 0 0 82px;
  }
  .wa-cont-03>.wa-inner{
  top: 1064px;
  left: 80px;
  }
  .wa-img-01{
  top: 100px;
  }

}/*MQ 1001 end*/


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

  .header-inner{
  display:flex;
  justify-content: space-between;
  align-items: center;
  /*padding: 3.5vw;*/
  /*padding: 48px;*/
  }

  /*KEY VISUAL==================*/
  .wa-keyvis{
  max-width: 800px;
  height: 1310px;
  background: url("../imgs/03_waffle/waffle_keyvis_sp.jpg") no-repeat center;
  background-size: cover;
  margin: 0 auto 160px;
  }
  .wa-keyvis-inner{
  padding: 952px 0 0 90px;
  }
  .wa-keyvis-inner h2{
  font-size: 58px;
  }
  .wa-keyvis-inner p:first-child{
  font-size: 38px;
  margin-bottom: 36px;
  }
  .wa-keyvis-inner p:last-child{
  font-size: 26px;
  }

  /*contaienr===================*/
  .wa-container{
  position: static;
  height: 5000px;
  overflow: hidden;
  }
  .wa-cont{
  margin-bottom: 200px;
  }
  .wa-inner h2{
  font-size: 33px;
  line-height: 1.9;
  margin-bottom: 55px;
  }
  .wa-inner p{
  font-size: 26px;
  line-height: 2.3;
  }

  /*Waffle Contents 01*/
  .wa-cont-01{
  position: relative;
  width: 800px;
  }
  .wa-cont-01 .wa-inner{
  margin: 120px 0 0 108px;
  }
  .wa-cont-01 p{
  width: 69.25vw;
  max-width: 554px;
  }

  .waffleLine{
  top: 430px;
  left: 170px;
  }


  /*Waffle Contents 02*/
  .wa-cont-02{
  position: relative;
  width: 800px;
  top:0;
  margin-bottom: 100px;
  }
  .wa-cont-02 .wa-inner{
  margin: 140px 0 0 140px;
  }
  .wa-cont-02 p{
  width: 69.25vw;
  max-width: 554px;
  }
  .wa-img{
  text-align: right;
  }
  .wa-cont-02 .waffleLine{
  top: 340px;
  left: 380px;
  height: 240px
  }

  /*Waffle Contents 03*/
  .wa-cont-03{
  position: relative;
  top: 0;
  left: 0;
  max-width: 1366px;
  height: 1960px;
  text-align: left;
  z-index: 10;
  }
  .wa-cont-03 .wa-inner p{
  width: 69.25vw;
  max-width: 554px;
  }
  .wa-img-01,.wa-img-02,.wa-cont-03>.wa-inner,.wa-cont-03>a{
  position: absolute;
  }
  .wa-img-01{
  width: 820px;
  top: 0;
  left: -326px;
  }
  .wa-img-02{
  width: 674px;
  bottom: 0;
  right: -322px;
  }
  .wa-cont-03>.wa-inner{
  top: 880px;
  left: 106px;
  z-index: 1;
  }
  .wa-cont-03>a{
  bottom: 325px;
  left: 106px;
  margin: auto;
  /*z-index: 1;*/
  }

  /*ARROW===============*/
  .wa-cont-03 .arrow-text{
  font-size: 22px;
  margin-bottom: 18px;
  }	
  .wa-cont-03 .arrow{
  width: 274px;
  }
  .wa-cont-03 .arrow::before{
  width: 18px;
  }

}/*MQ 801 end*/


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

  /*KEY VISUAL==================*/
  .wa-keyvis{
  max-width: 100%;
  height: 1000px;
  margin: 0 auto 0;
  }
  .wa-keyvis-inner{
  padding: 600px 20px 0;
  }
  .wa-keyvis-inner h2{
  font-size: 48px;
  margin-bottom: 40px;
  line-height: 1.2;
  }
  .wa-keyvis-inner p:first-child{
  font-size: 38px;
  margin-bottom: 36px;
  }
  .wa-keyvis-inner p:last-child{
  font-size: 16px;
  text-align: left;
  letter-spacing: 0;
  }
  .wa-keyvis-inner br{
  display: none;
  }

  /*contaienr===================*/
  .wa-container{
  position: static;
  height: 3300px;
  }
  .wa-cont{
  margin-bottom: 100px;
  }
  .wa-inner h2{
  font-size: 18px;
  line-height: 1.9;
  margin-bottom: 30px;
  }
  .wa-inner p{
  font-size: 16px;
  line-height: 2;
  letter-spacing: 1px;
  }

  /*Waffle Contents 01*/
  .wa-cont-01{
  position: relative;
  max-width: 100%;
  }
  .wa-cont-01 .wa-inner,.wa-cont-02 .wa-inner{
  margin: 80px 30px 0;
  }
  .wa-cont-01 p,.wa-cont-02 p{
  width: 100%;
  max-width: 100%;
  }
  .waffleLine{
  top: 53vw;
  left: 100px;
  height: 120px;
  }

  /*Waffle Contents 02*/
  .wa-cont-02{
  width: 100%;
  }
  .wa-img{
  text-align: right;
  }
  .wa-cont-02 h2 br:last-child{
  display: none;
  }
  .wa-cont-02 .waffleLine{
  top: 53vw;
  left: 36.6vw;
  height: 120px;
  }

  /*Waffle Contents 03*/
  .wa-cont-03{
  max-width: 100%;
  height: 1760px;
  text-align: left;
  z-index:-3;
  }
  .wa-cont-03 .wa-inner p{
  width: 100%;
  max-width: 100%;
  }
  .wa-img-01,.wa-img-02,.wa-cont-03>.wa-inner,.wa-cont-03>a{
  position: absolute;
  }
  .wa-img-01{
  width: 820px;
  top: 0;
  left: -230px;
  }
  .wa-cont-03>.wa-inner{
  top: 800px;
  left: 0;
  z-index: 1;
  margin: 0 30px;
  }
  .wa-cont-03>a{
  bottom: 500px;
  left: 30px;
  margin: auto;
  /*z-index: 1;*/
  }
  .wa-img-02{
  width: 500px;
  bottom: 0;
  right: -200px;
  }

}/*MQ 601 end*/

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

  /*contaienr===================*/
  .wa-container{
  position: static;
  height: 3000px;
  letter-spacing: 1px;
  }
  /*Waffle Contents 03*/
  .wa-cont-03{
  max-width: 100%;
  height: 1400px;
  }
  .wa-img-01{
  width: 560px;
  top: 0;
  left: -180px;
  }
  .wa-img-02{
  width: 360px;
  bottom: 0;
  right: -160px;
  }
  .wa-cont-03>.wa-inner{
  top: 580px;
  }
  .wa-cont-03>a{
  top: 960px;
  }


}/*MQ 421 end*/