/* ------------------------------
 アニメーション
------------------------------ */
/*フェードイン*/
.acms-fade-in-strong {
	opacity: $acms-fade-in-strong;
	transition: opacity $acms-fade-speed;
	 &:hover {
		opacity: 1;
		will-change: opacity;
	}
}
.acms-fade-in {
	opacity: $acms-fade-in;
	transition: opacity $acms-fade-speed;
	 &:hover {
		opacity: 1;
		will-change: opacity;
	}
}
.acms-fade-in-light {
	opacity: $acms-fade-in-light;
	transition: opacity $acms-fade-speed;
	 &:hover {
		opacity: 1;
		will-change: opacity;
	}
}

/*フェードアウト*/
.acms-fade-out-strong {
	opacity: 1;
	transition: opacity $acms-fade-speed;
	 &:hover {
		opacity: $acms-fade-out-strong;
		will-change: opacity;
	}
}
.acms-fade-out {
	opacity: 1;
	transition: opacity $acms-fade-speed;
	 &:hover {
		opacity: $acms-fade-out;
		will-change: opacity;
	}
}
.acms-fade-out-light {
	opacity: 1;
	transition: opacity $acms-fade-speed;
	 &:hover {
		opacity: $acms-fade-out-light;
		will-change: opacity;
	}
}

/* JSが読み込めない環境のとき */
.no-js {
	.acms-slide-top,
	.acms-slide-left,
	.acms-slide-bottom,
	.acms-slide-right {
		opacity: 1;
		-webkit-transform: translateX(0px) translateY(0px);
		transform: translateX(0px) translateY(0px);
	}
}




/* スライド */
/* 上からスライド */
.acms-slide-top {
	opacity: 0;
	-webkit-transform: translateX(0px) translateY($acms-slide-top);
	transform: translateX(0px) translateY($acms-slide-top);
	//opacityの処理をtransformより早くすることでふわっとしたフェードのアニメーションを作っています。
	-webkit-transition: opacity $acms-slide-opacity-speed, -webkit-transform $acms-slide-transform-speed cubic-bezier(0.165, 0.84, 0.44, 1); 
	transition: opacity $acms-slide-opacity-speed, transform $acms-slide-transform-speed cubic-bezier(0.165, 0.84, 0.44, 1); 
	.active  & {
		opacity: 1;
		-webkit-transform: translateX(0px) translateY(0px);
		transform: translateX(0px) translateY(0px);
		will-change: opacity,transform;
	}
}
/* 下からスライド */
.acms-slide-bottom {
	opacity: 0;
	-webkit-transform: translateX(0px) translateY($acms-slide-bottom);
	transform: translateX(0px) translateY($acms-slide-bottom);
	-webkit-transition: opacity $acms-slide-opacity-speed, -webkit-transform $acms-slide-transform-speed cubic-bezier(0.165, 0.84, 0.44, 1);
	transition: opacity $acms-slide-opacity-speed, transform $acms-slide-transform-speed cubic-bezier(0.165, 0.84, 0.44, 1);
	.active  & {
		opacity: 1;
		-webkit-transform: translateX(0px) translateY(0px);
		transform: translateX(0px) translateY(0px);
		will-change: opacity,transform;
	}
}
/* 左からスライド */
.acms-slide-left {
	opacity: 0;
	-webkit-transform: translateX($acms-slide-left) translateY(0px);
	transform: translateX($acms-slide-left) translateY(0px);
	-webkit-transition: opacity $acms-slide-opacity-speed, -webkit-transform $acms-slide-transform-speed cubic-bezier(0.165, 0.84, 0.44, 1);
	transition: opacity $acms-slide-opacity-speed, transform $acms-slide-transform-speed cubic-bezier(0.165, 0.84, 0.44, 1);
	.active  & {
		opacity: 1;
		-webkit-transform: translateX(0px) translateY(0px);
		transform: translateX(0px) translateY(0px);
		will-change: opacity,transform;
	}
}
/* 右からスライド */
.acms-slide-right {
	opacity: 0;
	-webkit-transform: translateX($acms-slide-right);
	transform: translateX($acms-slide-right);
	-webkit-transition: opacity $acms-slide-opacity-speed, -webkit-transform $acms-slide-transform-speed cubic-bezier(0.165, 0.84, 0.44, 1);
	transition: opacity $acms-slide-opacity-speed, transform $acms-slide-transform-speed cubic-bezier(0.165, 0.84, 0.44, 1);
	.active  & {
		opacity: 1;
		-webkit-transform: translateX(0px);
		transform: translateX(0px);
		will-change: opacity,transform;
	}
}



/* ズーム */
// 拡大
// hoverしたときに拡大する
.acms-zoom-in {
	-webkit-transition: -webkit-transform $acms-zoom-transform-speed;
	transition: transform $acms-zoom-transform-speed;
	-webkit-transform: scale($acms-slide-zoom-in-default);
	transform: scale($acms-slide-zoom-in-default);
	 &:hover {
		-webkit-transform: scale($acms-slide-zoom-in-hover);
				transform: scale($acms-slide-zoom-in-hover);
		will-change: opacity,transform;
	}
}
// 拡大しながら表示する
.acms-zoom-in-show {
	opacity: 0;
	-webkit-transition: opacity $acms-zoom-opacity-speed, -webkit-transform $acms-zoom-transform-speed;
	transition: opacity $acms-zoom-opacity-speed, transform $acms-zoom-transform-speed;
	-webkit-transform: scale($acms-slide-zoom-in-show);
	transform: scale($acms-slide-zoom-in-show);
	.active  &,
	 &.active {
		opacity: 1;
		-webkit-transform: scale($acms-slide-zoom-in-default);
				transform: scale($acms-slide-zoom-in-default);
		will-change: opacity,transform;
	}
}

// 縮小
// hoverしたときに縮小する
.acms-zoom-out {
	-webkit-transition: -webkit-transform $acms-zoom-transform-speed;
	transition: transform $acms-zoom-transform-speed;
	-webkit-transform: scale($acms-slide-zoom-out-default);
	-webkit-transform: scale($acms-slide-zoom-out-default);
			transform: scale($acms-slide-zoom-out-default);
	 &:hover {
		-webkit-transform: scale($acms-slide-zoom-out-hover);
		transform: scale($acms-slide-zoom-out-hover);
		will-change: opacity,transform;
	}
}
// 縮小しながら表示する
.acms-zoom-out-show {
	opacity: 0;
	-webkit-transition: opacity $acms-zoom-opacity-speed, -webkit-transform $acms-zoom-transform-speed;
	transition: opacity $acms-zoom-opacity-speed, transform $acms-zoom-transform-speed;
	-webkit-transform: scale($acms-slide-zoom-out-show);
	-webkit-transform: scale($acms-slide-zoom-out-show);
			transform: scale($acms-slide-zoom-out-show);
	.active  &,
	 &.active {
		opacity: 1;
		-webkit-transform: scale($acms-slide-zoom-out-default);
		transform: scale($acms-slide-zoom-out-default);
		will-change: opacity,transform;
	}
}
/* JSが読み込めない環境のとき */
.no-js {
	.acms-zoom-in-show,
	.acms-zoom-out-show {
		opacity: 1;
		-webkit-transform: scale(1);
		transform: scale(1);
	}
}




/* ポップアップ */
//上
.acms-popup-top-child {
	.acms-popup-child {
		-webkit-transform: translateX(0px) translateY(0px);
				transform: translateX(0px) translateY(0px);
		-webkit-transition: -webkit-transform $acms-popup-down-speed;
		transition: transform $acms-popup-down-speed;
	}
	 &:hover .acms-popup-child {
		-webkit-transform: translateX(0px) translateY($acms-popup-top);
				transform: translateX(0px) translateY($acms-popup-top);
		-webkit-transition: transform $acms-popup-up-speed;
		transition: transform $acms-popup-up-speed;
		will-change: transform;
	}
}
.acms-popup-top {
	-webkit-transform: translateX(0px) translateY(0px);
			transform: translateX(0px) translateY(0px);
	transition: transform $acms-popup-down-speed;
	 &:hover {
		-webkit-transform: translateX(0px) translateY($acms-popup-top);
				transform: translateX(0px) translateY($acms-popup-top);
		transition: transform $acms-popup-up-speed;
		will-change: transform;
	}
}

//右
.acms-popup-right-child {
	.acms-popup-child {
		-webkit-transform: translateX(0px) translateY(0px);
				transform: translateX(0px) translateY(0px);
		transition: transform $acms-popup-down-speed;
	}
	 &:hover .acms-popup-child {
		-webkit-transform: translateX($acms-popup-right) translateY(0px);
				transform: translateX($acms-popup-right) translateY(0px);
		transition: transform $acms-popup-up-speed;
		will-change: transform;
	}
}
.acms-popup-right {
	-webkit-transform: translateX(0px) translateY(0px);
			transform: translateX(0px) translateY(0px);
	transition: transform $acms-popup-down-speed;
	 &:hover {
		-webkit-transform: translateX($acms-popup-right) translateY(0px);
				transform: translateX($acms-popup-right) translateY(0px);
		transition: transform $acms-popup-up-speed;
		will-change: transform;
	}
}

//下
.acms-popup-bottom-child {
	.acms-popup-child {
		-webkit-transform: translateX(0px) translateY(0px);
				transform: translateX(0px) translateY(0px);
		transition: transform $acms-popup-down-speed;
	}
	 &:hover .acms-popup-child {
		-webkit-transform: translateX(0px) translateY($acms-popup-bottom);
				transform: translateX(0px) translateY($acms-popup-bottom);
		transition: transform $acms-popup-up-speed;
		will-change: transform;
	}
}
.acms-popup-bottom {
	-webkit-transform: translateX(0px) translateY(0px);
			transform: translateX(0px) translateY(0px);
	transition: transform $acms-popup-down-speed;
	 &:hover {
		-webkit-transform: translateX(0px) translateY($acms-popup-bottom);
				transform: translateX(0px) translateY($acms-popup-bottom);
		transition: transform $acms-popup-up-speed;
		will-change: transform;
	}
}

//左
.acms-popup-left-child {
	.acms-popup-child {
		-webkit-transform: translateX(0px) translateY(0px);
				transform: translateX(0px) translateY(0px);
		transition: transform $acms-popup-down-speed;
	}
	 &:hover .acms-popup-child {
		-webkit-transform: translateX($acms-popup-left) translateY(0px);
				transform: translateX($acms-popup-left) translateY(0px);
		transition: transform $acms-popup-up-speed;
		will-change: transform;
	}
}
.acms-popup-left {
	-webkit-transform: translateX(0px) translateY(0px);
			transform: translateX(0px) translateY(0px);
	transition: transform $acms-popup-down-speed;
	 &:hover {
		-webkit-transform: translateX($acms-popup-left) translateY(0px);
				transform: translateX($acms-popup-left) translateY(0px);
		transition: transform $acms-popup-up-speed;
		will-change: transform;
	}
}

/* 左から */
.acms-delay:nth-child(1),
.acms-delay-first {
	-webkit-transition-delay: $acms-animation-delay-first;
	transition-delay: $acms-animation-delay-first;
}
.acms-delay:nth-child(2),
.acms-delay-second {
	-webkit-transition-delay: $acms-animation-delay-second;
	transition-delay: $acms-animation-delay-second;
}
.acms-delay:nth-child(3),
.acms-delay-third {
	-webkit-transition-delay: $acms-animation-delay-third;
	transition-delay: $acms-animation-delay-third;
}
.acms-delay:nth-child(4),
.acms-delay-fourth {
	-webkit-transition-delay: $acms-animation-delay-fourth;
	transition-delay: $acms-animation-delay-fourth;
}

/* 右（反対方向）から */
.acms-delay-reverse:nth-child(4),
.acms-delay-reverse-fourth {
	-webkit-transition-delay: $acms-animation-delay-reverse-fourth;
	transition-delay: $acms-animation-delay-reverse-fourth;
}
.acms-delay-reverse:nth-child(3),
.acms-delay-reverse-third {
	-webkit-transition-delay: $acms-animation-delay-reverse-third;
	transition-delay: $acms-animation-delay-reverse-third;
}
.acms-delay-reverse:nth-child(2),
.acms-delay-reverse-second {
	-webkit-transition-delay: $acms-animation-delay-reverse-second;
	transition-delay: $acms-animation-delay-reverse-second;
}
.acms-delay-reverse:nth-child(1),
.acms-delay-reverse-first {
	-webkit-transition-delay: $acms-animation-delay-reverse-first;
	transition-delay: $acms-animation-delay-reverse-first;
}




/* JSが読み込めない環境のとき */
.no-js {
	.acms-slide-top,
	.acms-slide-left,
	.acms-slide-bottom,
	.acms-slide-right {
		opacity: 1;
		-webkit-transform: translateX(0px) translateY(0px);
				transform: translateX(0px) translateY(0px);
	}
	.acms-zoom-in-show,
	.acms-zoom-out-show {
		opacity: 1;
		-webkit-transform: scale(1);
				transform: scale(1);
	}
}