@charset "UTF-8";
/* CSS Document */

 /*----- フェードイン -----*/
.inviewfadeIn {
    opacity: 0;
    transition: .8s;
}
.fadeIn {
	opacity:0;
	transition:opacity .8s ease;
}
.fadeIn.show{
	opacity:1;
}
/*----- 上へスライド -----*/
.inviewUp {
    transform: translate(0, 40px);
    -webkit-transform: translate(0, 40px);
    transition: .8s;
}
.Up {
    transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
}
/*----- ズームイン -----*/
.inviewzoomIn {
    transform: scale(0, 0);
    -webkit-transform: scale(0, 0);
    transition: .8s;
}
.zoomIn {
    transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
}
/*----- フェードインしながら上へスライド -----*/
.inviewfadeInUp {
    opacity: 0;
    transform: translate(0, 60px);
    -webkit-transform: translate(0, 60px);
    transition: .8s;
}
.fadeInUp {
    opacity: 1.0;
    transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
}


/*下から上*/
.fadeUp{
	opacity:0;
	transform: translateY(60px);
	transition: all 1s cubic-bezier(.23,1,.32,1);
}
.fadeUp.show{
	opacity:1;
	transform: translateY(0);
}

/*左から*/
.fadeLeft{
	opacity:0;
	transform: translateX(-60px);
	transition: all 1s cubic-bezier(.23,1,.32,1);
}

.fadeLeft.show{
	opacity:1;
	transform: translateX(0);
}

/*右から*/
.fadeRight{
	opacity:0;
	transform: translateX(60px);
	transition: all 1s cubic-bezier(.23,1,.32,1);
}

.fadeRight.show{
	opacity:1;
	transform: translateX(0);
}



/*ボヨンと表示*/
.titlePop{
	transform: scale(.5);
}

.titlePop.show{
	animation: titleBounce .7s ease forwards;
}

@keyframes titleBounce{
	0%{
		transform: scale(.5);
	}
	40%{
		transform: scale(1.15);
	}
	60%{
		transform: scale(.95);
	}
	80%{
		transform: scale(1.05);
	}
	100%{
		transform: scale(1);
	}
}