@charset "UTF-8";

/*--------------------------------------------------------------------------
fadeイベント（通常用）
--------------------------------------------------------------------------*/
._fade,
._fade_upper,
._fade_under,
._fade_right,
._fade_left,
._fade_zoom {
    opacity: 0;
}

._fade_in {
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
    -webkit-animation-duration: 0.9s;
    animation-duration: 0.9s;
    -webkit-animation-name: fade_in;
    animation-name: fade_in;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-direction: normal;
    animation-direction: normal;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@keyframes fade_in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

._fade_upper_in {
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
    -webkit-animation-duration: 0.9s;
    animation-duration: 0.9s;
    -webkit-animation-name: fade_upper_in;
    animation-name: fade_upper_in;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-direction: normal;
    animation-direction: normal;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@keyframes fade_upper_in {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

._fade_under_in {
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
    -webkit-animation-duration: 0.9s;
    animation-duration: 0.9s;
    -webkit-animation-name: fade_under_in;
    animation-name: fade_under_in;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-direction: normal;
    animation-direction: normal;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@keyframes fade_under_in {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

._fade_right_in {
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
    -webkit-animation-duration: 0.9s;
    animation-duration: 0.9s;
    -webkit-animation-name: fade_right_in;
    animation-name: fade_right_in;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-direction: normal;
    animation-direction: normal;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@keyframes fade_right_in {
    0% {
        opacity: 0;
        transform: translateX(20px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

._fade_left_in {
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
    -webkit-animation-duration: 0.9s;
    animation-duration: 0.9s;
    -webkit-animation-name: fade_left_in;
    animation-name: fade_left_in;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-direction: normal;
    animation-direction: normal;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@keyframes fade_left_in {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

._fade_zoom_in {
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
    -webkit-animation-duration: 0.9s;
    animation-duration: 0.9s;
    -webkit-animation-name: fade_zoom_in;
    animation-name: fade_zoom_in;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-direction: normal;
    animation-direction: normal;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@keyframes fade_zoom_in {
    0% {
        opacity: 0;
        transform: scale(1.3);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

._fade_left_loop_in {
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
    -webkit-animation-duration: 0.8s;
    animation-duration: 0.8s;
    -webkit-animation-name: fade_left_loop_in;
    animation-name: fade_left_loop_in;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    animation-direction: normal;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@keyframes fade_left_loop_in {
    0% {
        transform: translateX(-7px);
    }

    80% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-7px);
    }
}

._fade_right_loop_in {
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
    -webkit-animation-duration: 0.8s;
    animation-duration: 0.8s;
    -webkit-animation-name: fade_right_loop_in;
    animation-name: fade_right_loop_in;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    animation-direction: normal;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@keyframes fade_right_loop_in {
    0% {
        transform: translateX(7px);
    }

    80% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(7px);
    }
}

/*--------------------------------------------------------------------------
fadeイベント（個別css）
--------------------------------------------------------------------------*/
._fade_fv_pc ._ctrl_1 {
    animation-delay: 0.6s;
}

._fade_fv_pc ._ctrl_2 {
    animation-delay: 1.5s;
}