/*マーカー*/
.is-animated-marker {
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition:background-size 1.5s;
    background-size: 0 0.3em;
}
.is-animated-marker.active {
    background-size: 100% 0.3em;
}
.is-animated-marker-b {
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition:background-size 1.5s;
    background-size: 0 0.7em;
}
.is-animated-marker-b.active {
    background-size: 100% 0.7em;
}
.is-animated-marker.yellow,
.is-animated-marker-b.yellow {
    background-image: linear-gradient(var(--color-yellow), var(--color-yellow));
}
.is-animated-marker.red-transparent,
.is-animated-marker-b.red-transparent {
    background-image: linear-gradient(var(--color-red-transparent), var(--color-red-transparent));
}
.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 cubic-bezier(0.33, 1, 0.68, 1) forwards;
    -webkit-animation: poyonIn 2s cubic-bezier(0.33, 1, 0.68, 1) forwards;
    -moz-animation: poyonIn 2s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
.is-animated-poyon2 {
    opacity: 0;
}
.is-animated-poyon2.active {
    opacity: 0;
    animation: poyonIn 2s 0.2s cubic-bezier(0.33, 1, 0.68, 1) forwards;
    -webkit-animation: poyonIn 2s 0.2s cubic-bezier(0.33, 1, 0.68, 1) forwards;
    -moz-animation: poyonIn 2s 0.2s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
.is-animated-poyon3 {
    opacity: 0;
}
.is-animated-poyon3.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-poyon4 {
    opacity: 0;
}
.is-animated-poyon4.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-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;
}
@keyframes poyonIn {
    0%{opacity:0; transform:translate(0,0px);}
    15%{opacity:0.5; transform:translate(0,-20px);}
    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,-20px);}
    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,-20px);}
    25%{opacity:1; -moz-transform:translate(0,0px);}
    100%{opacity:1; -moz-transform:translate(0,0px);}
}