/*
【目次】
動画部分
利用事例
/*

/* 動画部分
====================================== */


.fadeInUp01 {
    -webkit-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: 4s;
    -ms-animation-duration: 4s;
    animation-duration: 4s;
    -webkit-animation-name: fadeInUp01;
    animation-name: fadeInUp01;
    visibility: visible !important;
}

@-webkit-keyframes fadeInUp01 {
    0% {
        opacity: 0;
        -webkit-transform: translateY(80px);
    }
    20% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}

@keyframes fadeInUp01 {
    0% {
        opacity: 0;
        -webkit-transform: translateY(80px);
        -ms-transform: translateY(80px);
        transform: translateY(80px);
    }
    30% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}


.fadeInUp02 {
    -webkit-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: 4s;
    -ms-animation-duration: 4s;
    animation-duration: 4s;
    -webkit-animation-name: fadeInUp02;
    animation-name: fadeInUp02;
    visibility: visible !important;
}

@-webkit-keyframes fadeInUp02 {
    0% {
        opacity: 0;
        -webkit-transform: translateY(80px);
    }
    35% {
        opacity: 0;
        -webkit-transform: translateY(80px);
    }
    65% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}

@keyframes fadeInUp02 {
    0% {
        opacity: 0;
        -webkit-transform: translateY(80px);
        -ms-transform: translateY(80px);
        transform: translateY(80px);
    }
    35% {
        opacity: 0;
        -webkit-transform: translateY(80px);
        -ms-transform: translateY(80px);
        transform: translateY(80px);
    }
    65% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}
.fadeInUp03 {
    -webkit-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: 4s;
    -ms-animation-duration: 4s;
    animation-duration: 4s;
    -webkit-animation-name: fadeInUp03;
    animation-name: fadeInUp03;
    visibility: visible !important;
}

@-webkit-keyframes fadeInUp03 {
    0% {
        opacity: 0;
        -webkit-transform: translateY(80px);
    }
    70% {
        opacity: 0;
        -webkit-transform: translateY(80px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}

@keyframes fadeInUp03 {
    0% {
        opacity: 0;
        -webkit-transform: translateY(80px);
        -ms-transform: translateY(80px);
        transform: translateY(80px);
    }
    70% {
        opacity: 0;
        -webkit-transform: translateY(80px);
        -ms-transform: translateY(80px);
        transform: translateY(80px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}

/* 利用事例
====================================== */

.fadeInLR {
    -webkit-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: .8s;
    -ms-animation-duration: .8s;
    animation-duration: .8s;
    -webkit-animation-name: fadeInLR;
    animation-name: fadeInLR;
    visibility: visible !important;
}

@-webkit-keyframes fadeInLR {
    0% {
        opacity: 0;
        -webkit-transform: translateX(80px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}

@keyframes fadeInLR {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-80px);
        -ms-transform: translateX(-80px);
        transform: translateX(-80px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }
}

.fadeInRL {
    -webkit-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: .8s;
    -ms-animation-duration: .8s;
    animation-duration: .8s;
    -webkit-animation-name: fadeInRL;
    animation-name: fadeInRL;
    visibility: visible !important;
}

@-webkit-keyframes fadeInRL {
    0% {
        opacity: 0;
        -webkit-transform: translateX(80px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}

@keyframes fadeInRL {
    0% {
        opacity: 0;
        -webkit-transform: translateX(80px);
        -ms-transform: translateX(80px);
        transform: translateX(80px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }
}


/* セキュリティ
====================================== */


.fadeInUp {
    -webkit-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: .8s;
    -ms-animation-duration: .8s;
    animation-duration: .8s;
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
    visibility: visible !important;
}

@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(80px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(80px);
        -ms-transform: translateY(80px);
        transform: translateY(80px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}