/* -- テキストワイプinアニメーション -- */
.wipein {
  position: relative;
  color: transparent;
  /*opacity: 0;*/
}
.wipein:after {
  display: block;
  content: "";
  height: 100%;
  background: rgba(255,255,255,.9);
  position: absolute;
  top: 0;
/*.wipein:before {
  display: block;
  content: "";
  height: 100%;
  background: rgba(0,0,0,.9);
  position: absolute;
  top: 0;
}*/
}
.wipein.show {
  animation: wipecolor 1.0s cubic-bezier(0.785, 0.135, 0.15, 0.86) both;
  /*opacity: 1;*/
}
.wipein.show:after {
  animation: wipebar 0.8s cubic-bezier(0.785, 0.135, 0.15, 0.86) both;
}
/*.wipein.show:before {
  animation: wipebar 0.9s cubic-bezier(0.785, 0.135, 0.15, 0.86) both;
}*/

@keyframes wipebar {
  0% {
    left: 0;
    right: 100%;
  }
  50% {
    left: 0;
    right: 0;
  }
  100% {
    left: 100%;
    right: 0;
  }
}
@keyframes wipecolor {
  0% {
    color: transparent;
    opacity:0;
  }
  50% {
    color: transparent;
    opacity:.3;
  }
  51% {
    color: #ddd;
    opacity:.7;
  }
  100% {
    color: #000;
    opacity:1;
  }
}


/* -- マスクアニメーション -- */
.mask-bg {
  color: transparent;
  display: inline-block;
  overflow: hidden;
  position: relative;
  transition: color 0ms 450ms;
}
.mask-bg::after {
  background:#fff;
  bottom: 0;
  content: '';
  display: block;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transform: translate(0, 100%);
}
 
.mask-bg.is-animated {
  color: #000;
}
.mask-bg.is-animated::after {
  animation: mask-bg 1.2s cubic-bezier(0.8, 0, 0.170, 1);
}
 
@keyframes mask-bg {
  0% {
    transform: translate(0, -101%)
  }
  40%, 60% {
    transform: translate(0, 0%)
  }
  100% {
    transform: translate(0, 100%)
  }
}