/* anime.css */
/* moveOn (scroll) */
.from_left.moveOn, .from_left-on{
    animation: from-L 1.5s forwards ease-in-out 0s;
}
.from_left05s.moveOn{
    animation: from-L 1.5s forwards ease-in-out 0.5s;
}
.from_left10s.moveOn{
    animation: from-L 1.5s forwards ease-in-out 1.0s;
}
@keyframes from-L {
	0% {
        opacity: 0;
        transform: translateX(-50px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.from_right.moveOn, .from_right-on{
    animation: from-R 1.5s forwards ease-in-out 0.15s;
}
.from_right05s.moveOn{
    animation: from-R 1.5s forwards ease-in-out 0.75s;
}
.from_right10s.moveOn{
    animation: from-R 1.5s forwards ease-in-out 1.25s;
}
@keyframes from-R {
	0% {
        opacity: 0;
        transform: translateX(50px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
.down0s.moveOn, .down0s-on{
    animation: down0s 1s forwards ease-in-out 0s;
}
.down05s.moveOn, .down05s-on{
    animation: down0s 1s forwards ease-in-out 0.5s;
}
.down1s.moveOn, .down1s-on{
    animation: down0s 1s forwards ease-in-out 1.0s;
}
.down2s.moveOn{
    animation: down0s 1s forwards ease-in-out 1.5s;
}
.down3s.moveOn{
    animation: down0s 1s forwards ease-in-out 2.0s;
}
.down4s.moveOn{
    animation: down0s 1s forwards ease-in-out 2.5s;
}
.down5s.moveOn{
    animation: down0s 1s forwards ease-in-out 3.0s;
}
.down6s.moveOn{
    animation: down0s 1s forwards ease-in-out 3.5s;
}
.down7s.moveOn{
    animation: down0s 1s forwards ease-in-out 4.0s;
}
.down8s.moveOn{
    animation: down0s 1s forwards ease-in-out 4.5s;
}
.down9s.moveOn{
    animation: down0s 1s forwards ease-in-out 5.0s;
}
.down10s.moveOn{
    animation: down0s 1s forwards ease-in-out 5.5s;
}
.down11s.moveOn{
    animation: down0s 1s forwards ease-in-out 6.0s;
}
.down12s.moveOn{
    animation: down0s 1s forwards ease-in-out 6.5s;
}
.down13s.moveOn{
    animation: down0s 1s forwards ease-in-out 7.0s;
}
.down14s.moveOn{
    animation: down0s 1s forwards ease-in-out 7.5s;
}
@keyframes down0s {
	0% {
        opacity: 0;
        transform: translateY(-100px);
    }
    80% {
        opacity: 1;
        transform: translateY(0);
    }
    85% {
        opacity: 1;
        transform: translateY(-10px);
    }
    90% {
        opacity: 1;
        transform: translateY(0);
    }
    95% {
        opacity: 1;
        transform: translateY(-5px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
.up1s.moveOn{
    animation: up0s 1s forwards ease-in-out 1s;
}
.up2s.moveOn{
    animation: up0s 1s forwards ease-in-out 1.5s;
}
@keyframes up0s {
	0% {
        opacity: 0;
        transform: translateY(100px);
    }
    80% {
        opacity: 1;
        transform: translateY(0);
    }
    85% {
        opacity: 1;
        transform: translateY(10px);
    }
    90% {
        opacity: 1;
        transform: translateY(0);
    }
    95% {
        opacity: 1;
        transform: translateY(5px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.from_left_1s.moveOn{
    animation: bound-L_1s 1.5s forwards ease-in-out 0s;
}
@keyframes bound-L_1s {
	0% {
        opacity: 0;
        transform: translateX(-50px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
.from_left_2s.moveOn{
    animation: bound-L_2s 1.5s forwards ease-in-out 0.75s;
}
@keyframes bound-L_2s {
	0% {
        opacity: 0;
        transform: translateX(-50px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
.from_left_3s.moveOn{
    animation: bound-L_3s 1.5s forwards ease-in-out 1.5s;
}
@keyframes bound-L_3s {
	0% {
        opacity: 0;
        transform: translateX(-50px);
    }
    80% {
        opacity: 1;
        transform: translateX(0);
    }
    85% {
        opacity: 1;
        transform: translateX(10px);
    }
    90% {
        opacity: 1;
        transform: translateX(0);
    }
    95% {
        opacity: 1;
        transform: translateX(5px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
.bound-box {
    position: relative;
    width: 100%;
    height: 120px;
}
.bound {
}
.bound span.moveOn, .bound_4 span.moveOn, .bound_8 span.moveOn , .bound_9 span.moveOn {
    position: absolute;
    left: 0;
    right: 0;
    top:0;
    bottom: 50px;
    margin: auto;
}
    /*7文字*/
.bound span.moveOn:nth-child(1){left:-7.5em; animation: bounda 0.8s forwards ease-in-out 0.0s;}
.bound span.moveOn:nth-child(2){left:-5em; animation: bounda 0.8s forwards ease-in-out 0.1s;}
.bound span.moveOn:nth-child(3){left:-2.5em; animation: bounda 0.8s forwards ease-in-out 0.2s;}
.bound span.moveOn:nth-child(4){left: 0.0em; animation: bounda 0.8s forwards ease-in-out 0.3s;}
.bound span.moveOn:nth-child(5){left: 2.5em; animation: bounda 0.8s forwards ease-in-out 0.4s;}
.bound span.moveOn:nth-child(6){left: 5em; animation: bounda 0.8s forwards ease-in-out 0.5s;}
.bound span.moveOn:nth-child(7){left: 7.5em; animation: bounda 0.8s forwards ease-in-out 0.6s;}
    /*4文字*/
.bound_4 span.moveOn:nth-child(1){left:-3.75em; animation: bounda 0.8s forwards ease-in-out 0.0s;}
.bound_4 span.moveOn:nth-child(2){left:-1.25em; animation: bounda 0.8s forwards ease-in-out 0.1s;}
.bound_4 span.moveOn:nth-child(3){left: 1.25em; animation: bounda 0.8s forwards ease-in-out 0.2s;}
.bound_4 span.moveOn:nth-child(4){left: 3.75em; animation: bounda 0.8s forwards ease-in-out 0.3s;}
    /*8文字*/
.bound_8 span.moveOn:nth-child(1){left:-8.75em; animation: bounda 0.8s forwards ease-in-out 0.0s;}
.bound_8 span.moveOn:nth-child(2){left:-6.25em; animation: bounda 0.8s forwards ease-in-out 0.1s;}
.bound_8 span.moveOn:nth-child(3){left:-3.75em; animation: bounda 0.8s forwards ease-in-out 0.2s;}
.bound_8 span.moveOn:nth-child(4){left:-1.25em; animation: bounda 0.8s forwards ease-in-out 0.3s;}
.bound_8 span.moveOn:nth-child(5){left: 1.25em; animation: bounda 0.8s forwards ease-in-out 0.4s;}
.bound_8 span.moveOn:nth-child(6){left: 3.75em; animation: bounda 0.8s forwards ease-in-out 0.5s;}
.bound_8 span.moveOn:nth-child(7){left: 6.25em; animation: bounda 0.8s forwards ease-in-out 0.6s;}
.bound_8 span.moveOn:nth-child(8){left: 8.75em; animation: bounda 0.8s forwards ease-in-out 0.7s;}
    /*9文字*/
.bound_9 span.moveOn:nth-child(1){left:-10em; animation: bounda 0.8s forwards ease-in-out 0.0s;}
.bound_9 span.moveOn:nth-child(2){left:-7.5em; animation: bounda 0.8s forwards ease-in-out 0.1s;}
.bound_9 span.moveOn:nth-child(3){left:-5em; animation: bounda 0.8s forwards ease-in-out 0.2s;}
.bound_9 span.moveOn:nth-child(4){left:-2.5em; animation: bounda 0.8s forwards ease-in-out 0.3s;}
.bound_9 span.moveOn:nth-child(5){left: 0.0em; animation: bounda 0.8s forwards ease-in-out 0.4s;}
.bound_9 span.moveOn:nth-child(6){left: 2.5em; animation: bounda 0.8s forwards ease-in-out 0.5s;}
.bound_9 span.moveOn:nth-child(7){left: 5em; animation: bounda 0.8s forwards ease-in-out 0.6s;}
.bound_9 span.moveOn:nth-child(8){left: 7.5em; animation: bounda 0.8s forwards ease-in-out 0.7s;}
.bound_9 span.moveOn:nth-child(9){left: 10em; animation: bounda 0.8s forwards ease-in-out 0.8s;}

@keyframes bounda {
	0% {opacity: 0;top: 0;transform: scale(1);}
	30% {opacity: 1;top: -25%;}
	50% {opacity: 1;transform: scale(1);}
	90% {opacity: 1;top: 0;transform: scale(1);}
	100% {opacity: 1;top: 0;transform: scale(1);}
}
    /* moveOn trigger　*/  
    .aTrigger{
        opacity: 0;
    }

    /* flow */
    .flow {
        animation-name:flow_a;
        animation-delay:0s;
        animation-duration: 4s;
        animation-timing-function: ease-in-out;
        animation-iteration-count: infinite; 
    }
    @keyframes flow_a {
      0% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(-20px);
      }
      100% {
        transform: translateY(0);
      }
    } 

    /* banner */   
    .banner {
        position: absolute;
        bottom: 4%;
        right: 2vw;
        opacity: 0;
        animation-name:banner_a;
        animation-delay: 2s;
        animation-duration: 0.75s;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
        animation-iteration-count: 1; 
    }
    @keyframes banner_a {
      from {
        transform: translateX(200px);
        opacity: 0;
      }
      to {
        transform: translateX(0);
        opacity: 1;
      }
    }