@charset "utf-8";

/*--------------------*/
/*---- animation.css ----*/
/*--------------------*/

/*== 「Webォームから相談」ボタン ==========*/
/* PC */
@media screen and (min-width: 641px) {

	@keyframes hoverBounce {
		0% {
			transform: scale(1);
		}
		30% {
			transform: scale(1.08);
		}
		80% {
			transform: scale(1.0);
		}
		50% {
			transform: scale(0.92);
		}
		100% {
			transform: scale(1);
		}
	}
	.ctaButton:hover {
		animation: hoverBounce 0.4s ease-out;
		animation-fill-mode :forwards;
	}

}


/*== Web制作・開発の相談をする ==========*/
.ctaWrap {
	opacity: 0;
}
.animation.active.ctaWrap {
	opacity: 1;
	transition: all 1.3s;
}


/*== メインイメージ下コピー ==========*/
.thoughtHead {
	opacity: 0;
	transform: translateY(60px);
	transition: all 0.4s;
}
.thoughtHead.animation.active {
	opacity: 1;
	transform: translateY(0px);
	transition-delay: 0s;
}
.thoughtInner {
	opacity: 0;
	transform: translateY(60px);
	transition: all 0.4s;
}
.thoughtInner.animation.active {
	opacity: 1;
	transform: translateY(0px);
	transition-delay: 0s;
}


/*== アクセントの特長 ==========*/
.featureImage {
	opacity: 0;
	transform: translateX(-120px);
	transition: all 0.5s;
}
.featureImage.animation.active {
	opacity: 1;
	transform: translateX(0px);
	transition-delay: 0.2s;
}
.featureItem:nth-child(2) .featureImage {
	opacity: 0;
	transform: translateX(120px);
	transition: all 0.5s;
}
.featureItem:nth-child(2) .featureImage.animation.active {
	opacity: 1;
	transform: translateX(0px);
	transition-delay: 0.2s;
}
.featureInner {
	opacity: 0;
	transition: all 1s;
}
.featureInner.animation.active {
	opacity: 1;
	transition-delay: 0.3s;
}


/*== ケース ==========*/
.caseItem {
	opacity: 0;
	transform: translateY(80px);
	transition: all 0.6s;
}
.caseItem.animation.active {
	opacity: 1;
	transform: translateY(0px);
	transition-delay: 0s;
}



/*== 保有スキル BOX部分 ==========*/
.skillImage {
	opacity: 0;
	transform: translateX(-120px);
	transition: all 0.5s;
}
.skillImage.animation.active {
	opacity: 1;
	transform: translateX(0px);
	transition-delay: 0.2s;
}
.skillInner {
	opacity: 0;
	transform: translateX(120px);
	transition: all 0.5s;
}
.skillInner.animation.active {
	opacity: 1;
	transform: translateX(0px);
	transition-delay: 0.2s;
}


/*== 保有スキル アイコン部分 ==========*/
.skillImage>img {
	opacity: 0;
}
@keyframes bounce_3 {
	0% {
		transform:rotateY(0deg);
	}
	100% {
		transform:rotateY(360deg);
		opacity: 1;
	}
}
.animation.active.skillImage>div>img {
	animation: bounce_3 1s ease-out;
	animation-fill-mode :forwards;
	opacity: 0;
	animation-delay: 500ms;
}
@keyframes rotate_anime {
	0% {transform:rotateY(0deg);}
	30% {transform:rotateY(360deg);}
	100% {transform:rotateY(360deg);}
}
.animation.active.skillImage>div {
	animation: rotate_anime 3.5s infinite;
	animation-fill-mode :forwards;
	animation-delay: 3900ms;
}


/*== 実績 ==========*/
@keyframes caseTitle {
	0% {
		transform: scale(1);
	}
	30% {
		transform: scale(1.15);
	}
	80% {
		transform: scale(1.0);
	}
	50% {
		transform: scale(0.88);
	}
	100% {
		transform: scale(1);
	}
}
.animation.active.actualTitle {
	animation: caseTitle 0.4s ease-out;
	animation-fill-mode :forwards;
	animation-delay: 0.5s;
}