/*
    common-JS
--------------------*/
/* ▼フェード（イン・アウト） */
#mv {
  width: 1410px;
  height: 823px;
  margin: 0 auto;
  z-index: 0;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 5;
}


@media screen and (max-width: 1920px) {
  #mv {
    top: 0;
    right: calc(50% - 960px);
  }
}

#mv::before {
  content: "";
  width: 300px;
  height: 300px;
  background: url(/images/key/mv_deco_c.png) no-repeat center / contain;
  position: absolute;
  left: -70px;
  bottom: -224px;
  z-index: 10;
}

#mv .bx-wrapper,
#mv ul {
  height: 100%;
}

#mv li,
#mv .bx-viewport {
  height: 100%;
}

.main-vis01 {
  background: url(../images/key/main-vis_01.png) no-repeat bottom / cover;
}

.main-vis02 {
  background: url(../images/key/main-vis_02.png) no-repeat bottom / cover;
}

.main-vis03 {
  background: url(../images/key/main-vis_03.png) no-repeat bottom / cover;
}

.main-vis04 {
  background: url(../images/key/main-vis_04.png) no-repeat bottom / cover;
}



@media screen and (max-width: 767px) {
  #mv {
    width: 100%;
    height: 400px;
    margin: 0 auto;
    z-index: 0;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 5;
  }

  .main-vis01 {
    background: url(../images/key/main-vis_01.png) no-repeat right top / contain;
  }
  
  .main-vis02 {
    background: url(../images/key/main-vis_02.png) no-repeat right top / contain;
  }
  
  .main-vis03 {
    background: url(../images/key/main-vis_03.png) no-repeat right top / contain;
  }
  
  .main-vis04 {
    background: url(../images/key/main-vis_04.png) no-repeat right top  / contain;
  }
}