@charset "utf-8";


@-webkit-keyframes fedein1 {
    0% {
        opacity: 0;
    }

    30% {
        opacity: 0;
    }

    99% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

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

    30% {
        opacity: 0;
    }

    99% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

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

    60% {
        -webkit-transform: translateY(3px);
        transform: translateY(3px);
        opacity: 1;
    }

    99% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
        opacity: 1;
    }

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

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

    60% {
        -webkit-transform: translateY(3px);
        transform: translateY(3px);
        opacity: 1;
    }

    99% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
        opacity: 1;
    }

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

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

    99% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
        opacity: 1;
    }

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

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

    99% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
        opacity: 1;
    }

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

@-webkit-keyframes ups2 {
    0% {
        -webkit-transform: translateY(30px);
        transform: translateY(30px);
        opacity: 0;
    }

    99% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
        opacity: 1;
    }

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

@keyframes ups2 {
    0% {
        -webkit-transform: translateY(30px);
        transform: translateY(30px);
        opacity: 0;
    }

    99% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
        opacity: 1;
    }

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

@-webkit-keyframes fade1 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 1;
    }
}

@media screen {


    .popup {
        opacity: 0;
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px)
    }

    .once.popup {
        animation: popup 1.0s forwards;
        -webkit-animation: popup 1.0s forwards;
    }

    .ups {
        opacity: 0;
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px)
    }

    .once.ups {
        animation: ups 1.0s forwards;
        -webkit-animation: ups 1.0s forwards;
    }

    .ups2 {
        opacity: 0;
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px)
    }

    .once.ups2 {
        animation: ups 1.4s forwards;
        -webkit-animation: ups 1.4s forwards;
    }

    .once.popups {
        animation: none;
        -webkit-animation: none;
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    .popups > * {
        opacity: 0;
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px);
    }

    .once.popups > * {
        animation: popup 1.4s forwards;
        -webkit-animation: popup 1.4s forwards;
    }

    .once.popups > *:nth-child(2) {
        -webkit-animation-delay: 0.2s;
        animation-delay: 0.2s;
    }

    .once.popups > *:nth-child(3) {
        -webkit-animation-delay: 0.4s;
        animation-delay: 0.4s;
    }

    .once.popups > *:nth-child(4) {
        -webkit-animation-delay: 0.6s;
        animation-delay: 0.6s;
    }

    .once.popups > *:nth-child(5) {
        -webkit-animation-delay: 0.8s;
        animation-delay: 0.8s;
    }

    .once.popups > *:nth-child(6) {
        -webkit-animation-delay: 1.0s;
        animation-delay: 1.0s;
    }

    .once.popups > *:nth-child(7) {
        -webkit-animation-delay: 1.2s;
        animation-delay: 1.2s;
    }

    .once.popups > *:nth-child(8) {
        -webkit-animation-delay: 1.4s;
        animation-delay: 1.4s;
    }

    .once.popups > *:nth-child(9) {
        -webkit-animation-delay: 1.6s;
        animation-delay: 1.6s;
    }

    .once.popups > *:nth-child(10) {
        -webkit-animation-delay: 1.8s;
        animation-delay: 1.8s;
    }


    .once.fade1 {
        animation: fade1 3s  ease forwards;
        -webkit-animation: fade1 3s  ease forwards;
    }
    .fade1,
    .feder,
    .feder_row {
        opacity: 0;
    }


    .once.feder {
        animation: fedein1 1.2s forwards;
        -webkit-animation: fedein1 1.2s forwards;
    }

    .once.feder_row {
        animation: fedein1 2.0s ease-out forwards;
        -webkit-animation: fedein1 2.0s ease-out forwards;
    }

    .feders > * {
        opacity: 0;
    }

    .once.feders > * {
        animation: fedein1 1.8s forwards;
        -webkit-animation: fedein1 1.8s forwards;
    }


    .once.delay_set > *:nth-child(2),
    .once.delay_1 {
        -webkit-animation-delay: 0.2s;
        animation-delay: 0.2s;
    }

    .once.delay_set > *:nth-child(3),
    .once.delay_2 {
        -webkit-animation-delay: 0.4s;
        animation-delay: 0.4s;
    }

    .once.delay_set > *:nth-child(4),
    .once.delay_3 {
        -webkit-animation-delay: 0.6s;
        animation-delay: 0.6s;
    }

    .once.delay_set > *:nth-child(5),
    .once.delay_4 {
        -webkit-animation-delay: 0.8s;
        animation-delay: 0.8s;
    }

    .once.delay_set > *:nth-child(6),
    .once.delay_5 {
        -webkit-animation-delay: 1.0s;
        animation-delay: 1.0s;
    }


    .vertical_open,
    .holizon_open,
    .bg_flash,
    .bg_blackout {
        position: relative;
        overflow: hidden;
    }

    .vertical_open:before,
    .vertical_open:after,
    .holizon_open:before,
    .holizon_open:after,
    .bg_blackout:before {
        content: "";
        width: 100%;
        height: 100%;
        z-index: 8;
        background: #fff;
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        transition: height .2s;
    }

    .vertical_open:after {
        top: auto;
        bottom: 0;
    }

    .vertical_open.once:before,
    .vertical_open.once:after {
        height: 0;
    }

    .holizon_open:before,
    .holizon_open:after {
        bottom: 0;
        right: 0;
        left: auto;
        transition: width .4s .2s ease-out;
    }

    .holizon_open:after {
        left: 0;
        right: auto;
    }

    .holizon_open.once:before,
    .holizon_open.once:after {
        width: 0;
    }

}

.transition {
    transition: .8s;

}

.l_to_r {
    opacity: 0;
    transform: translate(-100px, 0px);
    -webkit-transform: translate(-100px, 0px);
}

.mv01 {
    opacity: 1.0;
    transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
}

.r_to_l {
    opacity: 0;
    transform: translate(100px, 0px);
    -webkit-transform: translate(100px, 0px);
}

.mv02 {
    opacity: 1.0;
    transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
}