@charset "UTF-8";


.animation-honkirin {
	opacity: 0;
}
.animation-honkirin.active {
    animation: kirinanime1 1.2s cubic-bezier(.72,0,1,1), kirinanime2 .35s 1.2s cubic-bezier(.42,0,.4,1) forwards;
	opacity: 1;
}
@keyframes kirinanime1 {
    0% {
        transform: translateY(111%) translateX(-50%) scale(1.5);
    }
    100% {
        transform: translateY(65%) translateX(-50%) scale(1.25);
    }
}
@keyframes kirinanime2 {
    0% {
        transform: translateY(65%) translateX(-50%) scale(1.25);
    }
    100% {
        transform: translateY(0) translateX(-50%) scale(1);
    }
}
@media screen and (max-width:834px) {

    .animation-honkirin {
        opacity: 0;
    }
    .animation-honkirin.active {
        animation: kirinanime1 1.2s cubic-bezier(.72,0,1,1), kirinanime2 .35s 1.2s cubic-bezier(.42,0,.4,1) forwards;
        opacity: 1;
    }
    @keyframes kirinanime1 {
        0% {
            transform: translateY(160%) scale(1.5);
        }
        100% {
            transform: translateY(90%) scale(1.25);
        }
    }
    @keyframes kirinanime2 {
        0% {
            transform: translateY(90%) scale(1.25);
        }
        100% {
            transform: translateY(0) scale(1);
        }
    }
}
    
.animation-bg {
    display: block;
	position: relative;
    transform: scale(1.03);
	transition: all cubic-bezier(.63,-0.01,.47,1) 1s 1s;
	opacity: 0;
}
.animation-bg.active {
    transform: scale(1);
	opacity: 1;
}

.animation1 {
    display: block;
	position: relative;
    transform: scale(1.6);
	transition: all cubic-bezier(.63,-0.01,.47,1) .3s 1.5s;
	opacity: 0;
}
.animation1.active {
    transform: scale(1);
	opacity: 1;
}


.animation2 {
    display: block;
	position: relative;
    transform: translateX(-100%) scale(.7);
	transition: all cubic-bezier(.63,-0.01,.47,1) .5s 2s;
	opacity: 0;
}
.animation2.active {
    transform: translateX(0) scale(1);
	opacity: 1;
}


.animation3 {
    display: block;
	position: relative;
	transition: all ease .8s 1.5s;
	opacity: 0;
}
.animation3.active {
	opacity: 1;
}

.animation4 {
    display: block;
	position: relative;
    transform: scale(1.8);
	transition: all cubic-bezier(.63,-0.01,.47,1) .3s 2.7s;
	opacity: 0;
}
.animation4.active {
    transform: scale(1);
	opacity: 1;
}
.animation5 {
    display: block;
	position: relative;
    transform: scale(1.8);
	transition: all cubic-bezier(.63,-0.01,.47,1) .3s 2.85s;
	opacity: 0;
}
.animation5.active {
    transform: scale(1);
	opacity: 1;
}
.animation6 {
    display: block;
	position: relative;
    transform: scale(1.8);
	transition: all cubic-bezier(.63,-0.01,.47,1) .3s 3s;
	opacity: 0;
}
.animation6.active {
    transform: scale(1);
	opacity: 1;
}
.animation-text {
    display: block;
	position: relative;
	transition: all cubic-bezier(.63,-0.01,.47,1) .5s 1.5s;
	opacity: 0;
}
.animation-text.active {
	opacity: 1;
}




.animation7 {
    display: block;
	position: relative;
    transform: translateY(-10px);
	transition: all cubic-bezier(.63,-0.01,.47,1) .5s;
	opacity: 0;
}
.animation7.active {
    transform: translateY(0);
	opacity: 1;
}

.animation8 {
    display: block;
	position: relative;
    transform: scale(1.8);
	transition: all cubic-bezier(.63,-0.01,.47,1) .5s;
	opacity: 0;
}
.animation8.active {
    transform: scale(1);
	opacity: 1;
}

.animation9 {
    display: block;
	position: relative;
    transform: translateY(40px);
	transition: all cubic-bezier(.63,-0.01,.47,1) .5s;
	opacity: 0;
}
.animation9.active {
    transform: translateY(0);
	opacity: 1;
}

.animation10 {
    display: block;
	position: relative;
	transition: all cubic-bezier(.63,-0.01,.47,1) 1s;
	opacity: 0;
}
.animation10.active {
	opacity: 1;
}