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


/*通常時*/
.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);}
}