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


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

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



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

/*表示時*/
.js-vis-ups.visible:nth-child(1){animation: js-vis-up 800ms ease  500ms forwards;}
.js-vis-ups.visible:nth-child(2){animation: js-vis-up 800ms ease  800ms forwards;}
.js-vis-ups.visible:nth-child(3){animation: js-vis-up 800ms ease 1100ms forwards;}
.js-vis-ups.visible:nth-child(4){animation: js-vis-up 800ms ease 1400ms forwards;}
.js-vis-ups.visible:nth-child(5){animation: js-vis-up 800ms ease 1700ms forwards;}

@media(max-width:834px){
	.js-vis-ups.visible:nth-child(n){animation: js-vis-up 800ms ease  500ms forwards;}
}

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


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

/*表示時*/
.js-vis-upsl.visible:nth-child(1){animation: js-vis-up 5000ms ease  500ms forwards;}
.js-vis-upsl.visible:nth-child(2){animation: js-vis-up 5000ms ease  800ms forwards;}
.js-vis-upsl.visible:nth-child(3){animation: js-vis-up 5000ms ease 1100ms forwards;}
.js-vis-upsl.visible:nth-child(4){animation: js-vis-up 5000ms ease 1400ms forwards;}
.js-vis-upsl.visible:nth-child(5){animation: js-vis-up 5000ms ease 1700ms forwards;}

@media(max-width:834px){
	.js-vis-upsl.visible:nth-child(n){animation: js-vis-up 800ms ease  500ms forwards;}
}


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

/*表示時*/
.js-vis-upparent2.visible >*:nth-child( 1){animation: js-vis-up 800ms ease  500ms forwards;}
.js-vis-upparent2.visible >*:nth-child( 2){animation: js-vis-up 800ms ease  500ms forwards;}
.js-vis-upparent2.visible >*:nth-child( 3){animation: js-vis-up 800ms ease  600ms forwards;}
.js-vis-upparent2.visible >*:nth-child( 4){animation: js-vis-up 800ms ease  600ms forwards;}
.js-vis-upparent2.visible >*:nth-child( 5){animation: js-vis-up 800ms ease  700ms forwards;}
.js-vis-upparent2.visible >*:nth-child( 6){animation: js-vis-up 800ms ease  700ms forwards;}
.js-vis-upparent2.visible >*:nth-child( 7){animation: js-vis-up 800ms ease  800ms forwards;}
.js-vis-upparent2.visible >*:nth-child( 8){animation: js-vis-up 800ms ease  800ms forwards;}
.js-vis-upparent2.visible >*:nth-child( 9){animation: js-vis-up 800ms ease  900ms forwards;}
.js-vis-upparent2.visible >*:nth-child(10){animation: js-vis-up 800ms ease  900ms forwards;}
.js-vis-upparent2.visible >*:nth-child(11){animation: js-vis-up 800ms ease 1000ms forwards;}
.js-vis-upparent2.visible >*:nth-child(12){animation: js-vis-up 800ms ease 1000ms forwards;}
.js-vis-upparent2.visible >*:nth-child(13){animation: js-vis-up 800ms ease 1100ms forwards;}
.js-vis-upparent2.visible >*:nth-child(14){animation: js-vis-up 800ms ease 1100ms forwards;}
.js-vis-upparent2.visible >*:nth-child(15){animation: js-vis-up 800ms ease 1200ms forwards;}
.js-vis-upparent2.visible >*:nth-child(16){animation: js-vis-up 800ms ease 1200ms forwards;}
.js-vis-upparent2.visible >*:nth-child(17){animation: js-vis-up 800ms ease 1300ms forwards;}
.js-vis-upparent2.visible >*:nth-child(18){animation: js-vis-up 800ms ease 1300ms forwards;}
.js-vis-upparent2.visible >*:nth-child(19){animation: js-vis-up 800ms ease 1400ms forwards;}
.js-vis-upparent2.visible >*:nth-child(20){animation: js-vis-up 800ms ease 1400ms forwards;}
.js-vis-upparent2.visible >*:nth-child(21){animation: js-vis-up 800ms ease 1500ms forwards;}
.js-vis-upparent2.visible >*:nth-child(22){animation: js-vis-up 800ms ease 1500ms forwards;}
.js-vis-upparent2.visible >*:nth-child(23){animation: js-vis-up 800ms ease 1600ms forwards;}
.js-vis-upparent2.visible >*:nth-child(24){animation: js-vis-up 800ms ease 1600ms forwards;}
.js-vis-upparent2.visible >*:nth-child(25){animation: js-vis-up 800ms ease 1700ms forwards;}
.js-vis-upparent2.visible >*:nth-child(26){animation: js-vis-up 800ms ease 1700ms forwards;}
.js-vis-upparent2.visible >*:nth-child(27){animation: js-vis-up 800ms ease 1800ms forwards;}
.js-vis-upparent2.visible >*:nth-child(28){animation: js-vis-up 800ms ease 1800ms forwards;}
.js-vis-upparent2.visible >*:nth-child(29){animation: js-vis-up 800ms ease 1900ms forwards;}
.js-vis-upparent2.visible >*:nth-child(30){animation: js-vis-up 800ms ease 1900ms forwards;}

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

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

/*表示時*/
.js-vis-down.visible{animation: js-vis-down 800ms ease  500ms forwards;}

@keyframes js-vis-down {
  0% {opacity: 0; transform: translateY(-40px);}
  100% {opacity: 1; transform: translateY(0px);}
}
/***************************************************************************/

/*通常時*/
.js-vis-leftup{opacity: 0; transform: translate(20px , 100px);}

/*表示時*/
.js-vis-leftup.visible{animation: js-vis-leftup 800ms ease  500ms forwards;}

@keyframes js-vis-leftup {
  0% {opacity: 0; transform: translate(20px , 100px);}
  100% {opacity: 1; transform: translate(0px);}
}
/***************************************************************************/


/*通常時*/
.js-vis-about>*{opacity:0;transition:0.5s 1.5s;}
.js-vis-about::before{opacity: 0; transform: translateX(-100vw);}

/*表示時*/
.js-vis-about.visible > *{opacity:1;}
.js-vis-about.visible::before{animation: js-vis-leftmax 800ms ease  500ms forwards;}

@keyframes js-vis-leftmax {
  0% {opacity: 0; transform: translateX(-100vw);}
  100% {opacity: 1; transform: translateY(0px);}
}
/***************************************************************************/

.js-vis-about2 {background-blend-mode: lighten;background-color: rgba(255,255,255,1);transition:2s linear 1s;}
.js-vis-about2.visible {background-blend-mode: lighten;background-color: rgba(255,255,255,0);}

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

/*通常時*/
.js-vis-widthb::before{width: 0;transition:1s ease 0.5s;}
/*表示時*/
.js-vis-widthb.visible::before{width:100%;}


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

/*通常時*/
.js-vis-img{position:relative;}
.js-vis-img::before{content:"";position:absolute;top:0;left:0;height:100%;background:#E0E9DE;z-index:2;}
.js-vis-img img{opacity: 0;}

/*表示時*/
.js-vis-img.visible img{animation: js-vis-img 2000ms ease  500ms forwards;}
.js-vis-img.visible::before{animation: js-vis-imgb 2000ms ease  500ms forwards;}

@keyframes js-vis-img {
  0% {opacity: 0;}
  40% {opacity: 0;}
  41% {opacity: 1;}
  100% {opacity: 1;}
}
@keyframes js-vis-imgb {
  0%   {left:0;width:0;right:auto;}
  40%  {left:0;width:100%;right:auto;}
  60%  {left:auto;width:100%;right:0;}
  100% {left:auto;width:0;right:0;}
}

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

/*通常時*/
.js-vis-rollimg:nth-child(1){transition:1s 1.6s;}
.js-vis-rollimg:nth-child(2){transition:1s 1.3s;}
.js-vis-rollimg:nth-child(3){transition:1s 1s;}
.js-vis-rollimg:not(.visible){transform:translate(100% , -50%) rotate(180deg)!important; opacity:0;}




.js-vis-text >*{opacity:0;transform:translateY(-40px);display:inline-block;}
.js-vis-text.visible >*:nth-child(n){animation: js-vis-text 2000ms ease  1300ms forwards;}
.js-vis-text.visible >*:nth-child( 3n + 1){animation: js-vis-text 2000ms ease  1100ms forwards;}
.js-vis-text.visible >*:nth-child( 5n + 1){animation: js-vis-text 2000ms ease   500ms forwards;}
.js-vis-text.visible >*:nth-child( 7n + 1){animation: js-vis-text 2000ms ease   900ms forwards;}
.js-vis-text.visible >*:nth-child(11n + 1){animation: js-vis-text 2000ms ease   700ms forwards;}


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



/*通常時*/
.js-vis-right>*{opacity:0;transform: translateX(100px);}

/*表示時*/
.js-vis-right.visible > *:nth-child( 1){animation: js-vis-right 800ms ease  500ms forwards;}
.js-vis-right.visible > *:nth-child( 2){animation: js-vis-right 800ms ease  600ms forwards;}
.js-vis-right.visible > *:nth-child( 3){animation: js-vis-right 800ms ease  700ms forwards;}
.js-vis-right.visible > *:nth-child( 4){animation: js-vis-right 800ms ease  800ms forwards;}
.js-vis-right.visible > *:nth-child( 5){animation: js-vis-right 800ms ease  900ms forwards;}
.js-vis-right.visible > *:nth-child( 6){animation: js-vis-right 800ms ease 1000ms forwards;}
.js-vis-right.visible > *:nth-child( 7){animation: js-vis-right 800ms ease 1100ms forwards;}
.js-vis-right.visible > *:nth-child( 8){animation: js-vis-right 800ms ease 1200ms forwards;}
.js-vis-right.visible > *:nth-child( 9){animation: js-vis-right 800ms ease 1300ms forwards;}
.js-vis-right.visible > *:nth-child(10){animation: js-vis-right 800ms ease 1400ms forwards;}
.js-vis-right.visible > *:nth-child(11){animation: js-vis-right 800ms ease 1500ms forwards;}
.js-vis-right.visible > *:nth-child(12){animation: js-vis-right 800ms ease 1600ms forwards;}
.js-vis-right.visible > *:nth-child(13){animation: js-vis-right 800ms ease 1700ms forwards;}
.js-vis-right.visible > *:nth-child(14){animation: js-vis-right 800ms ease 1800ms forwards;}
.js-vis-right.visible > *:nth-child(15){animation: js-vis-right 800ms ease 1900ms forwards;}
.js-vis-right.visible > *:nth-child(16){animation: js-vis-right 800ms ease 2000ms forwards;}
.js-vis-right.visible > *:nth-child(17){animation: js-vis-right 800ms ease 2100ms forwards;}
.js-vis-right.visible > *:nth-child(18){animation: js-vis-right 800ms ease 2200ms forwards;}
.js-vis-right.visible > *:nth-child(19){animation: js-vis-right 800ms ease 2300ms forwards;}
.js-vis-right.visible > *:nth-child(20){animation: js-vis-right 800ms ease 2400ms forwards;}

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