canvas{
  max-width: max-content;
}
#mv_box_wrapper {
  height: 840px;
  width: 100%;
  margin: 0;
  padding: 0;
}

#waves {
  position: relative;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  z-index: 10;
  top: 100px;
}

#title {
  position: fixed;
  top: 10px;
  left: 10px;
  font-size: 20px;
  letter-spacing: 0.1em;
  z-index: 100;
  margin: 0;
  padding: 0;
  font-weight: 100;
}
.mv_message{
  position: absolute;
  bottom: 10%;
  color: #000;
  left: 10%;
  font-size: 50px;
  font-weight: 700;
}
/* --- 全体のBOX定義 ---------------------------------------- */
.box {
  position   : absolute;
  left: 0;
  /* max-width  : 400px; */
  width: 100vw;
  height     : 840px;
  margin     : auto;
  overflow   : hidden;
  z-index: 0;
}

/* --- 背景の指定 ------------------------------------------- */
.box .bgImg {
  position   : absolute;
  top        : 0;
  left       : 0;
  bottom     : 0;
  right      : 0;
  opacity    : 0;
  animation  : bgAnime 20s infinite;   /* 4画像 × 各5s = 20s */
  background-size: cover;
  background-position: center left;
}

/* --- 段差で背景画像のアニメーションを実行 ----------------- */
.box .src1 {
  background-image : url(../images/mv/mv1.jpg);
  animation-delay  : 0s;
}
.box .src2 {
  background-image : url(../images/mv/mv2.jpg);
  animation-delay  : 5s;
}
.box .src3 {
  background-image : url(../images/mv/mv3.jpg);
  animation-delay  : 10s;
}
.box .src4 {
  background-image : url(../images/mv/mv4.jpg);
  animation-delay  : 15s;
}
.box .src1_title {
  background-image : url(../images/mv/mv1_title.png);
  animation-delay  : 0s;
  z-index: 20;
  max-width: 1280px;
  margin: 0 auto;
}
.box .src2_title {
  background-image : url(../images/mv/mv2_title.png);
  animation-delay  : 5s;
  z-index: 20;
  max-width: 1280px;
  margin: 0 auto;
}
.box .src3_title {
  background-image : url(../images/mv/mv3_title.png);
  animation-delay  : 10s;
  z-index: 20;
  max-width: 1280px;
  margin: 0 auto;
}
.box .src4_title {
  background-image : url(../images/mv/mv4_title.png);
  animation-delay  : 15s;
  z-index: 20;
  max-width: 1280px;
  margin: 0 auto;
}

@keyframes bgAnime {
  0% { opacity: 0; }
  10% { opacity: 1; }
  25% { opacity: 1; }
  40% { opacity: 0; }
  100% { opacity: 0; }
}

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

  #mv_box_wrapper {
    height: 600px;
  }

  #waves {
    top: 310px;
  }

  .box {
    height     : 600px;
  }

  .box .src1 {
    background-image : url(../images/mv/mv1-sp.jpg);
  }
  .box .src2 {
    background-image : url(../images/mv/mv2-sp.jpg);
  }
  .box .src3 {
    background-image : url(../images/mv/mv3-sp.jpg);
  }
  .box .src4 {
    background-image : url(../images/mv/mv4-sp.jpg);
  }
  .box .src1_title {
    background-image : url(../images/mv/mv1-sp_title.png);
  }
  .box .src2_title {
    background-image : url(../images/mv/mv2-sp_title.png);
  }
  .box .src3_title {
    background-image : url(../images/mv/mv3-sp_title.png);
  }
  .box .src4_title {
    background-image : url(../images/mv/mv4-sp_title.png);
  }
}