/*左から徐々に表示(専用)*/


/*通常時*/
.top #visible01{width:0;}

/*表示時*/
.top #visible01.visible{animation: topvisible1 1s linear 500ms forwards;}

@keyframes topvisible1 {
  0% {width:0;opacity: 0;}
  100% {width:480px;opacity: 1;}
}

/*SP表示時*/
@media(max-width:834px){
    .top #visible01.visible{animation: topvisible1_sp 1s linear 500ms forwards;}
}
@keyframes topvisible1_sp {
  0% {width:0;opacity: 0;}
  100% {width:170px;opacity: 1;}
}

/***************************************************************************/

/*通常時*/
.js-vis-up{opacity: 0; transform: translateY(20px);}

/*表示時*/
.js-vis-up.visible{animation: js-vis-up 500ms linear 500ms forwards;}

@keyframes js-vis-up {
  0% {opacity: 0; transform: translateY(20px);}
  100% {opacity: 1; transform: translateY(0px);}
}


.js-vis-gorightimg{overflow:hidden;}
.js-vis-gorightimg img{opacity: 0; transform: translateX(-100vw);transition:0.8s 0.5s;}
.js-vis-gorightimg.visible img{opacity: 1; transform: translateX(0);}

.js-vis-goleftimg{overflow:hidden;}
.js-vis-goleftimg img{opacity: 0; transform: translateX(100vw);transition:0.8s 0.5s;}
.js-vis-goleftimg.visible img{opacity: 1; transform: translateX(0);}

.js-vis-goleft{opacity: 0; transform: translateY(20px);}
.js-vis-goleft.visible{animation: js-vis-up 500ms linear 500ms forwards;}