@charset "UTF-8";
/* ========================================

アニメーション用CSS

======================================== */

#header .text01{animation: slideIn01 1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;}
@keyframes slideIn01 {
	0% {
		/*transform: translateY(-300px);*/
		opacity: 0;
		top: -30%;
	}
	100% {
		/*transform: translateY(0);*/
		top: 17%;
	}
	40%,100% {
		opacity: 1;
	}
}

#header .text02{animation: slideIn02 1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;}
@keyframes slideIn02 {
	0% {
		transform: translateY(300px);
		opacity: 0;
	}
	100% {
		transform: translateY(0);
	}
	40%,100% {
		opacity: 1;
	}
}

#header #headerLogo{animation: slideIn03 1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;}
@keyframes slideIn03 {
	0%,30% {
		transform: scale(0,0);
		opacity: 0;
	}
	100% {
		transform: scale(1,1);
	}
	40%,100% {
		opacity: 1;
	}
}

/* --- cont01 --- */
.cont01anim01{animation: cont01anim01 2s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;}
@keyframes cont01anim01 {
	0%, 40% {
		transform: skew(0deg, 0deg);
	}
	5% {
		transform: skew(5deg, 5deg);
	}
	10% {
		transform: skew(-4deg, -4deg);
	}
	15% {
		transform: skew(3deg, 3deg);
	}
	20% {
		transform: skew(-2deg, -2deg);
	}
	25% {
		transform: skew(1deg, 1deg);
	}
	30% {
		transform: skew(-0.6deg, -0.6deg);
	}
	35% {
	transform: skew(0.3deg, 0.3deg);
	}
}


.cont01anim02{animation: cont01anim02 2s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;}
@keyframes cont01anim02{
	0% {
		transform: translateX(180px);
		opacity: 0;
	}
	100% {
		transform: translateX(0);
	}
	40%,100% {
		opacity: 1;
	}
}
.cont01anim03{animation: cont01anim03 2s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;}
@keyframes cont01anim03{
	0% {
		transform: translateX(180px);
		opacity: 0;
	}
	100% {
		transform: translateX(0);
	}
	40%,100% {
		opacity: 1;
	}
}


/* --- cont02 --- */
.cont02anim01{animation: cont02anim01 2s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;}
@keyframes cont02anim01{
	0% {
		transform: translateY(30px);
		opacity: 0;
	}
	80% {
		opacity: 1;
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}
.cont02anim02{animation: cont02anim02 2s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;}
@keyframes cont02anim02{
	0% {
		transform: translateY(30px);
		opacity: 0;
	}
	80% {
		opacity: 1;
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}
.cont02anim03{animation: cont02anim03 2s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;}
@keyframes cont02anim03{
	0% {
		transform: translateY(30px);
		opacity: 0;
	}
	80% {
		opacity: 1;
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

.cont02anim04{animation: cont02anim04 2s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;}
@keyframes cont02anim04{
	0% {
		transform: translateY(30px);
		opacity: 0;
	}
	80% {
		opacity: 1;
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}
.cont02anim05{animation: cont02anim05 2s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;}
@keyframes cont02anim05{
	0% {
		transform: translateY(30px);
		opacity: 0;
	}
	80% {
		opacity: 1;
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}
.cont02anim06{animation: cont02anim06 2s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;}
@keyframes cont02anim06{
	0% {
		transform: translateY(30px);
		opacity: 0;
	}
	80% {
		opacity: 1;
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

/* --- cont03 --- */
.cont03anim01{animation: cont03anim01 0.5s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;}
@keyframes cont03anim01 {
	0% {
		transform: scale(0.8);
		opacity: 0;
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}
.cont03anim02{animation: cont03anim02 0.5s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;}
@keyframes cont03anim02 {
	0% {
		transform: translateX(140px);
		opacity: 0;
	}
	50% {
		transform: translateX(0);
	}
	65% {
		transform: translateX(30px);
	}
	100% {
		transform: translateX(0);
	}
	20%,100% {
		opacity: 1;
	}
}