/*マーカー*/
.marker.grad,
.marker-b.grad{
    background-image: linear-gradient(90deg, rgb(217, 243, 254) ,rgb(217, 248, 234) ,rgb(255, 255, 224)) !important;
}
.marker.white,
.marker-b.white{
    background-image: linear-gradient(90deg, rgb(255, 255, 255) ,rgb(255, 255, 255));
}

.marker{
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition:background-size 1.5s;
    background-size: 0% 0.5em;
}
.marker-b{
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition:background-size 1.5s;
    background-size: 0% 15px;
}
.marker.active{
    background-size: 100% 0.5em;
}
.marker-b.active{
    background-size: 100% 15px;
}
.marker.yellow{
    background-image: linear-gradient(rgb(255, 255, 0), rgb(255, 255, 0));
    background-size: 0% 0.3em;
    padding-bottom: 5px;
}
.marker.green{
    background-image: linear-gradient(rgb(21, 230, 128), rgb(21, 230, 128));
    background-size: 0% 0.3em;
    padding-bottom: 5px;
}
.marker.blue{
    background-image: linear-gradient(rgb(31, 202, 255), rgb(31, 202, 255));
    background-size: 0% 0.3em;
    padding-bottom: 5px;
}
.marker.p-blue{
    background-image: linear-gradient(rgb(133, 198, 218), rgb(133, 198, 218));
    background-size: 0% 0.3em;
}
.marker.yellow.active,
.marker.green.active,
.marker.blue.active,
.marker.p-blue.active{
    background-size: 100% 0.3em;
}
/*右から左へ移動*/
.is-animated-right ,.is-animated-right2 ,.is-animated-right3 ,.is-animated-right4 ,.is-animated-right5{
    opacity: 0;
}
.is-animated-right.active{
    animation: slideIn-right 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.is-animated-right2.active{
    animation: slideIn-right 1.5s 0.3s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.is-animated-right3.active{
    animation: slideIn-right 1.5s 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.is-animated-right4.active{
    animation: slideIn-right 1.5s 0.9s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.is-animated-right5.active{
    animation: slideIn-right 1.5s 1.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 ,.is-animated-left4{
    opacity: 0;
}
.is-animated-left.active{
    animation: slideIn-left 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.is-animated-left2.active{
    animation: slideIn-left 1.5s 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.is-animated-left3.active{
    animation: slideIn-left 1.5s 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.is-animated-left4.active{
    animation: slideIn-left 1.5s 2s 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 ,.is-animated-bottom4{
    opacity: 0;
}
.is-animated-bottom.active{
    animation: slideIn-bottom 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.is-animated-bottom2.active{
    animation: slideIn-bottom 1.5s 0.3s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.is-animated-bottom3.active{
    animation: slideIn-bottom 1.5s 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.is-animated-bottom4.active{
    animation: slideIn-bottom 1.5s 0.9s 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 ,.is-animated-top3{
    opacity: 0;
}
.is-animated-top.active{
    animation: slideIn-top 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.is-animated-top2.active{
    animation: slideIn-top 1.5s 0.3s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.is-animated-top3.active{
    animation: slideIn-top 1.5s 0.6s 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-fade, .is-animated-fade2 ,.is-animated-fade3 ,.is-animated-fade4 ,.is-animated-fade5{
    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 0.3s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
.is-animated-fade3.active{
    animation: fadeIn 2s 0.6s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
.is-animated-fade4.active{
    animation: fadeIn 2s 0.9s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
.is-animated-fade5.active{
    animation: fadeIn 2s 1.2s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
/*ぽよん*/
.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);}
}