/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Nov 01 2021 | 22:39:18 */
/*オープニングアニメーション｜双方向横スライド*/
#opening-animation{
  position:fixed;
  animation-direction
  overflow: hidden;
  top: 0;
  left: 0;
  margin: 0 calc(50% - 50vw);
  z-index:9999;
  height: 100vh;
  width: 100vw;
  animation: cover 2.0s forwards;
}

#opening-animation:before {
  animation: 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  position: absolute;
  height:51.5vh;
  width:100vw;
  background-color: rgba(0, 0, 0, 1);
  content: '';
  left: 0;
  pointer-events: none;
  right: 0;
  z-index: 9999;
}

#opening-animation:after {
  animation: 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  position: absolute;
  height:48.5vh;
  width:100vw;
  background-color: rgba(0, 0, 0, 1);
  content: '';
  left: 0;
  pointer-events: none;
  right: 0;
  z-index: 9999;
}

#opening-animation:before {
  animation-name: img-wrap-before;
  top: 0;
  bottom: 51.5%;
}

#opening-animation:after {
  animation-name: img-wrap-after;
  top: 51.5%;
  bottom: 0;
}

@keyframes cover{
    0% {background:rgba(255,255,255,1);}
  100% {background:rgba(255,255,255,0); z-index:-1;}  
}

@keyframes img-wrap-before {
  0% {transform: translateX(0%);}
  100% {transform: translateX(100%); opacity:0; z-index:-1;}
}

@keyframes img-wrap-after {
  100% {transform: translateX(-100%); opacity:0; z-index:-1;}
}