/*::::::::::::::::::::::::::::::::::::::::::::::::
ANIMATION
:::::::::::::::::::::::::::::::::::::::::::::::::*/

/*
body {
    animation: fadeIn 1s ease 0s 1 normal;
}
*/

.d0 {animation-delay:0s;}
.d0-5 {animation-delay:0.5s;}
.d1 {animation-delay:1s;}
.d1-5 {animation-delay:1.5s;}
.d2 {animation-delay:2s;}
.d3 {animation-delay:3s;}
.d4 {animation-delay:4s;}
.d6 {animation-delay:6s;}
.d8 {animation-delay:8s;}
.d10 {animation-delay:10s;}
.d12 {animation-delay:12s;}



/* class="js_animate" data-animate="fadeInUp both ease-in-out 0.6s 0.6s*/

.js_animate {
/*    display: none;*/
}



/* :::::::::::::::::::::::::::::::::::::*/

@keyframes u-fadeInUp {
    0% {
        opacity: 0;
        transform: translate(0, 40px);
        transition: all ease-in-out 0.5s;
    }
    100% {
        opacity: 1;
        transform: translate(0, 0);
    }
}


/* :::::::::::::::::::::::::::::::::::::*/

@keyframes u-fadeUp {
    0% {
        opacity: 0;
        filter: blur(10px);
        transform: translateY(5px);
        transition: opacity 0.2s ease-in-out,
        filter 0.5s ease-in-out,
        transform 1s ease-in-out;
    }
    100% {
        opacity: 1;
        filter: blur(0);
        transform: translateZ(0);
    }
}

/* :::::::::::::::::::::::::::::::::::::*/

.u-fadeInLeft {
/*
    animation-name: fadeInLeft;
    animation-delay: 0.2s;
    animation-fill-mode: both;
    animation-duration: 0.2s;
*/
}
@keyframes u-fadeInLeft {
    from {
        opacity: 0;
       transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* :::::::::::::::::::::::::::::::::::::*/

@keyframes u-InBig {
    0% {
/*        opacity: 0;*/
        transform: scale(0.8);
    }
    100% {
/*        opacity: 1;*/
        transform: scale(1);
    }
}
}

/*:::::::::::::::::::::::::::::::::
 TXT 斜め下からべろんとアニメーション
:::::::::::::::::::::::::::::::::*/

.fadeTypeUp {
/*
    -webkit-animation-name: fade_type_up;
    animation-name: fade_type_up;
    animation-delay: 1s;
    animation-fill-mode: both;
    animation-duration: 1s;
*/
}

@keyframes fadeTypeUp {
  0% {
    opacity: 0;
    transform: translateY(45%) rotate(45deg);
    transform-origin: left bottom;
    }
  100% {
    opacity: 1;
    transform: translateY(0) rotate(0);
  }
}

/* :::::::::::::::::::::::::::::::::::::*/


.showIn {
/*
    animation-delay: 0.5s;
    animation-fill-mode: both;
    animation-duration: 1s;
    animation-name: fadeIn;
*/
}
@keyframes showIn {
    0% {
        opacity: 0;
        visibility: hidden;
    }
    100% {
        opacity: 1;
        visibility: visible;
    }
}