.mask-wrap{
  display: table;
  overflow: hidden;
  margin: 0;
}


.mask-wrap .mask{
  display: table;
  position: relative;
  left: -99%;
  overflow: hidden;
}
.mask-wrap .mask-bg{
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #eee;
}


.inview {
  overflow: hidden;
  transform: translate(-100%, 0);
  transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;
 
}

.inview span {
  display: block;
  opacity: 0;
  transform: translate(100%, 0);
  transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;
}

.inview.is-show,
.inview.is-show span {
  transform: translate(0, 0);
  opacity: 1;
}


.video-inview {
  opacity: 0;
  transition: 0.3s;
 
}
.video-inview.is-show {
  opacity: 1;
}


.r-inview {
  overflow: hidden;
  transform: translate(99.8%, 0);
  transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;
 
}

.r-inview span {
  display: block;
  transform: translate(100%, 0);
  transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;
}

.r-inview.is-show,
.r-inview.is-show span {
  transform: translate(0, 0);
}




/*----- フェードインしながら上へスライド -----*/
.inviewfadeInUp {
  opacity: 0;
  transform: translate(0, 30px);
  -webkit-transform: translate(0, 30px);
  transition: .8s;
}

.fadeInUp {
  opacity: 1.0;
  transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
}