/* -- テキストワイプ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;
  }
}