/* =====================================
animation
===================================== */
.animationTrigger {
	opacity: 0;
}

@keyframes swing {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(15deg); }
    50% { transform: rotate(0deg); }
    75% { transform: rotate(-15deg); }
    100% { transform: rotate(0deg); }
}

.swing {
    animation: swing linear 2s infinite;
}

@keyframes swing02 {
    25% { transform: rotate(5deg); }
    50% { transform: rotate(0deg); }
    75% { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); }
}

.swing02 {
    animation: swing02 linear 2s infinite;
}

.fadeUp {
	animation-name: fadeUpAnime;
	animation-duration: 1.2s;
	animation-fill-mode: forwards;
	opacity: 0;
}

@keyframes fadeUpAnime {
	from {
		opacity: 0;
		transform: translateX(100px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

.fadeUpTrigger {
	opacity: 0;
}

.fadeLeft {
	animation-name: fadeLeftAnime;
	animation-duration: 1.2s;
	animation-fill-mode: forwards;
	opacity: 0;
}

@keyframes fadeLeftAnime {
	from {
		opacity: 0;
		transform: translateX(100px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}


/* 諡｡螟ｧ */
.zoomIn {
	animation-name: zoomInAnime;
	animation-duration: 1.5s;
	animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes zoomInAnime {
	from {
		transform: scale(0.6);
		opacity: 0;
	}

	to {
		transform: scale(1);
		opacity: 1;
	}
}

/* 縺ｵ繧上 繧  */
@keyframes float {
	25% { transform: translateY(5px); }
    50% { transform: translateY(0); }
    75% { transform: translateY(5px); }
    100% { transform: translateY(0); }
}

.float {
    animation: float linear 2s infinite;
}

/* 蜑榊ｾ  */
@keyframes walk {
    /* 25% { transform: translateX(5px); } */
    50% { transform: translateX(5px); }
    /* 75% { transform: translateX(5px); } */
    100% { transform: translateX(0); }
}

.walk {
    animation: walk linear 2s infinite;
}