/* CSS animation settings */

/* Underline when hovering) https://www.nxworld.net/css-hover-underline-animation-examples-and-sass-mixin.html */


/************************************************************/
/* Animation settings: fade in/out                          */
/************************************************************/
/* fade in */
.fade-in{
    opacity:0;

    animation-name           : fade-in;
    animation-duration       : 2.0s; 
    /*animation-iteration-count: infinite;*/
    animation-iteration-count: 1;
    animation-fill-mode      : forwards;
}
@keyframes fade-in{
    0% {
        opacity: 0;/*初期状態では透明に*/
    }
    100% {
        opacity: 1;
    }
}
/* fade out */
.fade-out{
    opacity:0;

    animation-name           : fade-out;
    animation-duration       : 2.0s; 
    animation-iteration-count: 1;
    animation-fill-mode      : forwards;
}
@keyframes fade-out{
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
/************************************************************/
/* Animation settings: slide in/out                         */
/************************************************************/
/* slide in */
.slide-in{
    animation-name           : slide-in;
    animation-duration       : 1.6s; 
    animation-iteration-count: infinite;
    animation-fill-mode      : forwards;
}
@keyframes slide-in{
    0% {
        transform: translateX(200px);
    }
    100% {
        transform: translateX(0);
    }
}
/* slide out */
.slide-out{
    animation-name           : slide-out;
    animation-duration       : 1.6s; 
    animation-iteration-count: infinite;
    animation-fill-mode      : forwards;
}
@keyframes slide-out{
    0% {
        transform: translateX(0px);
    }
    100% {
        transform: translateX(200px);
    }
}

/************************************************************/
/* Animation settings: slide + fade                         */
/************************************************************/
/* fade in from bottom */
.fade-in-B{
    opacity:0;

    animation-name           : fade-in-B;
    animation-duration       : 2.0s; 
    animation-iteration-count: 1;
    animation-fill-mode      : forwards;
}
@keyframes fade-in-B{
    0% {
        opacity: 0;
        transform: translateY(100px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
/* fade in from right */
.fade-in-R{
    opacity:0;

    animation-name           : fade-in-R;
    animation-duration       : 1.6s; 
    animation-iteration-count: 1;
    animation-fill-mode      : forwards;
}
@keyframes fade-in-R{
    0% {
        opacity: 0;
        transform: translateX(50px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
/* fade in from left */
.fade-in-L{
    opacity:1;

    animation-name           : fade-in-L;
    animation-duration       : 2.5s; 
    animation-iteration-count: 1;
    animation-fill-mode      : forwards;
}
@keyframes fade-in-L{
    0% {
        opacity: 0;
        transform: translateX(-50px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* fade out to the right */
.fade-out-R{
    opacity:0;

    animation-name           : fade-out-R;
    animation-duration       : 1.6s; 
    animation-iteration-count: infinite;
    animation-fill-mode      : forwards;
}
@keyframes fade-out-R{
    0% {
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateX(200px);
    }
}
/* fade out to the left */
.fade-out-L{
    opacity:0;

    animation-name           : fade-out-L;
    animation-duration       : 1.6s; 
    animation-iteration-count: infinite;
    animation-fill-mode      : forwards;
}
@keyframes fade-out-L{
    0% {
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateX(-200px);
    }
}
/* fade in from the top and fade out to the bottom */
.fade-in-out{ 
    opacity:0;

    animation-name           : fade-in-out;
    animation-duration       : 5s; 
    animation-iteration-count: infinite;
    animation-fill-mode      : forwards;
}
@keyframes fade-in-out{
    0% {
        opacity: 0;
        transform: translateY(-30px);
    }
    50%{
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity:0;
        transform: translateY(30px);
    } 
}

/************************************************************/
/* Animation settings: slide animation                      */
/************************************************************/

.slide-cover {
    overflow: hidden;
    display: inline-block;
    opacity: 0;/*事前に透過0にして消しておく*/
}
.slide-in_inner {
    display: inline-block;
}
  
.slideAnimeLeftRight {
    animation-name:slideTextX100;
    animation-duration:0.8s;
    animation-fill-mode:forwards;
    opacity: 0;
}

@keyframes slideTextX100 {
    from {
        transform: translateX(-100%); /*要素を左の枠外に移動*/
        opacity: 0;
    }
    to {
        transform: translateX(0);/*要素を元の位置に移動*/
        opacity: 1;
    }
}