/*マーカー*/
.is-animated-marker {
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition:background-size 1.5s;
    background-size: 0 0.5em;
}
.is-animated-marker.active {
    background-size: 100% 0.5em;
}
.is-animated-marker-b {
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition:background-size 1.5s, color 1.5s ease;;
    background-size: 0 4em;
}
.is-animated-marker-b.active {
    background-size: 100% 4em;
}
.is-animated-marker-l {
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition:background-size 1.5s, color 1.5s ease;;
    background-size: 0 0.25em;
}
.is-animated-marker-l.active {
    background-size: 100% 0.25em;
}
.is-animated-marker.white,
.is-animated-marker-b.white {
    background-image: linear-gradient(var(--color-white), var(--color-white));
}
.is-animated-marker.grad,
.is-animated-marker-b.grad,
.is-animated-marker-l.grad {
    background-image: linear-gradient(var(--color-grad));
}
.is-animated-marker-b.grad.active {
	color: var(--color-white);
}
.is-animated-marker.green-transparent,
.is-animated-marker-b.green-transparent {
    background-image: linear-gradient(var(--color-green-transparent), var(--color-green-transparent));
}
.is-animated-marker.blue-transparent,
.is-animated-marker-b.blue-transparent {
    background-image: linear-gradient(var(--color-blue-transparent), var(--color-blue-transparent));
}

/*右から左へ移動*/
.is-animated-right ,.is-animated-right2 ,.is-animated-right3 {
    opacity: 0;
}
.is-animated-right.active {
    animation: slideIn-right 2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.is-animated-right2.active {
    animation: slideIn-right 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.is-animated-right3.active {
    animation: slideIn-right 2s 0.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes slideIn-right {
    0% {
        transform: translateX(30%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
    }
    40%,100% {
        opacity: 1;
    }
}
/*左から右へ移動*/
.is-animated-left ,.is-animated-left2 ,.is-animated-left3 {
    opacity: 0;
}
.is-animated-left.active {
    animation: slideIn-left 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.is-animated-left2.active {
    animation: slideIn-left 1s 0.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.is-animated-left3.active {
    animation: slideIn-left 1s 0.4s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.is-animated-left4.active {
    animation: slideIn-left 1s 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.is-animated-left5.active {
    animation: slideIn-left 1s 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes slideIn-left {
    0% {
        transform: translateX(-30%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
    }
    40%,100% {
        opacity: 1;
    }
}
/*下から上へ移動*/
.is-animated-bottom, .is-animated-bottom2 ,.is-animated-bottom3 {
    opacity: 0;
}
.is-animated-bottom.active {
    animation: slideIn-bottom 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.is-animated-bottom2.active {
    animation: slideIn-bottom 1s 0.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.is-animated-bottom3.active {
    animation: slideIn-bottom 1s 0.4s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.is-animated-bottom4.active {
    animation: slideIn-bottom 1s 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.is-animated-bottom5.active {
    animation: slideIn-bottom 1s 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes slideIn-bottom {
    20% {
        transform: translateY(20%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
    }
    40%,100% {
        opacity: 1;
    }
}
/*上から下へ移動*/
.is-animated-top, .is-animated-top2 {
    opacity: 0;
}
.is-animated-top.active {
    animation: slideIn-top 2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes slideIn-top {
    0% {
        transform: translateY(-40%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
    }
    40%,100% {
        opacity: 1;
    }
}
.is-animated-top2.active {
    animation: slideIn-top2 2s 0.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes slideIn-top2 {
    0% {
        transform: translateY(-60%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
    }
    40%,100% {
        opacity: 1;
    }
}
/*フェードイン*/
.is-animated-fade, .is-animated-fade2 ,.is-animated-fade3 {
    opacity: 0;
}
.is-animated-fade.active {
    animation: fadeIn 2s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
.is-animated-fade2.active {
    animation: fadeIn 2s 1s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
.is-animated-fade3.active {
    animation: fadeIn 2s 0.3s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
/*フェードアウト*/
.is-animated-fade-out, .is-animated-fade-out2 ,.is-animated-fade-out3 {
    opacity: 0;
}
.is-animated-fade-out.active {
    animation: fadeIn 2s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
.is-animated-fade-out2.active {
    animation: fadeIn 2s 1s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
.is-animated-fade-out3.active {
    animation: fadeIn 2s 0.3s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
/*ぽよん*/
.is-animated-poyon {
    opacity: 0;
}
.is-animated-poyon.active {
    opacity: 0;
    animation: poyonIn 2s 0.4s cubic-bezier(0.33, 1, 0.68, 1) forwards;
    -webkit-animation: poyonIn 2s 0.4s cubic-bezier(0.33, 1, 0.68, 1) forwards;
    -moz-animation: poyonIn 2s 0.4s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
.is-animated-poyon2 {
    opacity: 0;
}
.is-animated-poyon2.active {
    opacity: 0;
    animation: poyonIn 2s 0.5s cubic-bezier(0.33, 1, 0.68, 1) forwards;
    -webkit-animation: poyonIn 2s 0.5s cubic-bezier(0.33, 1, 0.68, 1) forwards;
    -moz-animation: poyonIn 2s 0.5s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
.is-animated-poyon3 {
    opacity: 0;
}
.is-animated-poyon3.active {
    opacity: 0;
    animation: poyonIn 2s 0.6s cubic-bezier(0.33, 1, 0.68, 1) forwards;
    -webkit-animation: poyonIn 2s 0.6s cubic-bezier(0.33, 1, 0.68, 1) forwards;
    -moz-animation: poyonIn 2s 0.6s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
.is-animated-poyon4 {
    opacity: 0;
}
.is-animated-poyon4.active {
    opacity: 0;
    animation: poyonIn 2s 0.7s cubic-bezier(0.33, 1, 0.68, 1) forwards;
    -webkit-animation: poyonIn 2s 0.7s cubic-bezier(0.33, 1, 0.68, 1) forwards;
    -moz-animation: poyonIn 2s 0.7s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
.is-animated-poyon5 {
    opacity: 0;
}
.is-animated-poyon5.active {
    opacity: 0;
    animation: poyonIn 2s 0.8s cubic-bezier(0.33, 1, 0.68, 1) forwards;
    -webkit-animation: poyonIn 2s 0.8s cubic-bezier(0.33, 1, 0.68, 1) forwards;
    -moz-animation: poyonIn 2s 0.8s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
.is-animated-poyon6 {
    opacity: 0;
}
.is-animated-poyon6.active {
    opacity: 0;
    animation: poyonIn 2s 0.9s cubic-bezier(0.33, 1, 0.68, 1) forwards;
    -webkit-animation: poyonIn 2s 0.9s cubic-bezier(0.33, 1, 0.68, 1) forwards;
    -moz-animation: poyonIn 2s 0.9s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
.is-animated-poyon7 {
    opacity: 0;
}
.is-animated-poyon7.active {
    opacity: 0;
    animation: poyonIn 2s 1s cubic-bezier(0.33, 1, 0.68, 1) forwards;
    -webkit-animation: poyonIn 2s 1s cubic-bezier(0.33, 1, 0.68, 1) forwards;
    -moz-animation: poyonIn 2s 1s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
.is-animated-poyon8 {
    opacity: 0;
}
.is-animated-poyon8.active {
    opacity: 0;
    animation: poyonIn 2s 1.1s cubic-bezier(0.33, 1, 0.68, 1) forwards;
    -webkit-animation: poyonIn 2s 1.1s cubic-bezier(0.33, 1, 0.68, 1) forwards;
    -moz-animation: poyonIn 2s 1.1s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
.is-animated-poyon9 {
    opacity: 0;
}
.is-animated-poyon9.active {
    opacity: 0;
    animation: poyonIn 2s 1.2s cubic-bezier(0.33, 1, 0.68, 1) forwards;
    -webkit-animation: poyonIn 2s 1.2s cubic-bezier(0.33, 1, 0.68, 1) forwards;
    -moz-animation: poyonIn 2s 1.2s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
.is-animated-poyon10 {
    opacity: 0;
}
.is-animated-poyon10.active {
    opacity: 0;
    animation: poyonIn 2s 1.3s cubic-bezier(0.33, 1, 0.68, 1) forwards;
    -webkit-animation: poyonIn 2s 1.3s cubic-bezier(0.33, 1, 0.68, 1) forwards;
    -moz-animation: poyonIn 2s 1.3s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
.is-animated-poyon11 {
    opacity: 0;
}
.is-animated-poyon11.active {
    opacity: 0;
    animation: poyonIn 2s 1.4s cubic-bezier(0.33, 1, 0.68, 1) forwards;
    -webkit-animation: poyonIn 2s 1.4s cubic-bezier(0.33, 1, 0.68, 1) forwards;
    -moz-animation: poyonIn 2s 1.4s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
.is-animated-poyon12 {
    opacity: 0;
}
.is-animated-poyon12.active {
    opacity: 0;
    animation: poyonIn 2s 1.5s cubic-bezier(0.33, 1, 0.68, 1) forwards;
    -webkit-animation: poyonIn 2s 1.5s cubic-bezier(0.33, 1, 0.68, 1) forwards;
    -moz-animation: poyonIn 2s 1.5s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
.is-animated-poyon13 {
    opacity: 0;
}
.is-animated-poyon13.active {
    opacity: 0;
    animation: poyonIn 2s 1.6s cubic-bezier(0.33, 1, 0.68, 1) forwards;
    -webkit-animation: poyonIn 2s 1.6s cubic-bezier(0.33, 1, 0.68, 1) forwards;
    -moz-animation: poyonIn 2s 1.6s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
.is-animated-poyon14 {
    opacity: 0;
}
.is-animated-poyon14.active {
    opacity: 0;
    animation: poyonIn 2s 1.7s cubic-bezier(0.33, 1, 0.68, 1) forwards;
    -webkit-animation: poyonIn 2s 1.7s cubic-bezier(0.33, 1, 0.68, 1) forwards;
    -moz-animation: poyonIn 2s 1.7s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
.is-animated-poyon15 {
    opacity: 0;
}
.is-animated-poyon15.active {
    opacity: 0;
    animation: poyonIn 2s 1.8s cubic-bezier(0.33, 1, 0.68, 1) forwards;
    -webkit-animation: poyonIn 2s 1.8s cubic-bezier(0.33, 1, 0.68, 1) forwards;
    -moz-animation: poyonIn 2s 1.8s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
.is-animated-poyon16 {
    opacity: 0;
}
.is-animated-poyon16.active {
    opacity: 0;
    animation: poyonIn 2s 1.9s cubic-bezier(0.33, 1, 0.68, 1) forwards;
    -webkit-animation: poyonIn 2s 1.9s cubic-bezier(0.33, 1, 0.68, 1) forwards;
    -moz-animation: poyonIn 2s 1.9s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
.is-animated-poyon17 {
    opacity: 0;
}
.is-animated-poyon17.active {
    opacity: 0;
    animation: poyonIn 2s 2s cubic-bezier(0.33, 1, 0.68, 1) forwards;
    -webkit-animation: poyonIn 2s 2s cubic-bezier(0.33, 1, 0.68, 1) forwards;
    -moz-animation: poyonIn 2s 2s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
.is-animated-poyon18 {
    opacity: 0;
}
.is-animated-poyon18.active {
    opacity: 0;
    animation: poyonIn 2s 2.1s cubic-bezier(0.33, 1, 0.68, 1) forwards;
    -webkit-animation: poyonIn 2s 2.1s cubic-bezier(0.33, 1, 0.68, 1) forwards;
    -moz-animation: poyonIn 2s 2.1s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
@keyframes poyonIn {
    0%{opacity:0; transform:translate(0,0px);}
    15%{opacity:0.5; transform:translate(0,-10px);}
    25%{opacity:1; transform:translate(0,0px);}
    100%{opacity:1; transform:translate(0,0px);}
}
@-webkit-keyframes poyonIn {
    0%{opacity:0; -webkit-transform:translate(0,0px);}
    15%{opacity:0.5; -webkit-transform:translate(0,-10px);}
    25%{opacity:1; -webkit-transform:translate(0,0px);}
    100%{opacity:1; -webkit-transform:translate(0,0px);}
}
@-moz-keyframes poyonIn {
    0%{opacity:0; -moz-transform:translate(0,0px);}
    15%{opacity:0.5; -moz-transform:translate(0,-10px);}
    25%{opacity:1; -moz-transform:translate(0,0px);}
    100%{opacity:1; -moz-transform:translate(0,0px);}
}