@charset "utf-8";

/* --------------------
アニメーション
-------------------- */
.mainvisual {
  background: #fff;
  position: relative;
  overflow: hidden;
  width: 100%;
}
.js-mv {
  background: #fff url("/imgs/index/kv/kv02_sp.jpg") no-repeat center top;
  background-size: 100% auto;
}
@media screen and (max-width: 767px){
  .mainvisual {
    padding-top: 88.13%;
  }
}
@media screen and (min-width: 768px){
  .mainvisual {
    padding-top: 35%;
  }
  .js-mv {
    background: #fff url("/imgs/index/kv/kv02.jpg") no-repeat center top;
    background-size: 100% auto;
  }
}

.mainvisual img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  vertical-align: top;
}

.mainvisual > div,
.mainvisual > p {
  opacity: 0;
}

/* アニメーションパーツ */
@media screen and (max-width: 768px){
  .face01,
  .face02,
  .face03,
  .face04,
  .face05,
  .face06 {
    width: 32.93%;
    position: absolute;
    z-index: 1;
    margin-left: 110%;
  }
  .face01,
  .face02,
  .face03 {
    top: 0;
  }
  .face04,
  .face05,
  .face06 {
    bottom: 0;
  }
  .face01 { left: 0;}
  .face02 { left: 33.53%;}
  .face03 { left: 67.13%;}
  .face04 { left: 0;}
  .face05 { left: 33.53%;}
  .face06 { left: 67.13%;}

  .item01,
  .item02,
  .item03,
  .item04,
  .item05,
  .item06 {
    width: 32.93%;
    position: absolute;
    z-index: 1;
  }
  .item01,
  .item02,
  .item03 {
    top: 0;
    margin-bottom: 110%;
  }
  .item04,
  .item05,
  .item06 {
    margin-top: 110%;
    bottom: 0;
  }
  .item01 { left: 0;}
  .item02 { left: 33.53%;}
  .item03 { left: 67.13%;}
  .item04 { left: 0;}
  .item05 { left: 33.53%;}
  .item06 { left: 67.17%;}

  .kv_txt {
    position: absolute;
    width: 83.73%;
    left: 0;
    top: 0;
    margin-top: 44.3%;
    z-index: 2;
  } 

}
@media screen and (min-width: 768px){
  .face01,
  .face02,
  .face03,
  .face04,
  .face05,
  .face06 {
    width: 16.31%;
    position: absolute;
    top: 0;
    z-index: 1;
    margin-left: 110%;
  }
  .face01 { left: 0;}
  .face02 { left: 16.72%;}
  .face03 { left: 33.45%;}
  .face04 { left: 50.17%;}
  .face05 { left: 66.9%;}
  .face06 { left: 83.62%;}



  .item01,
  .item02,
  .item03,
  .item04,
  .item05,
  .item06 {
    width: 16.31%;
    position: absolute;
    z-index: 1;
  }
  .item01,
  .item03,
  .item05 {
    bottom: 0;
    margin-bottom: 110%;
  }
  .item02,
  .item04,
  .item06 {
    top: 0;
    margin-top: 110%;
  }
  .item01 { left: 0;}
  .item02 { left: 16.72%;}
  .item03 { left: 33.45%;}
  .item04 { left: 50.17%;}
  .item05 { left: 66.9%;}
  .item06 { left: 83.62%;}  

  .kv_txt {
    position: absolute;
    width: 48.36%;
    left: 0;
    top: 0;
    margin-top: 14.48%;
    z-index: 2;
  }  
}