:root{
	--conveyItems: 6;
	--conveyWidth: calc(20% * (var(--conveyItems) + 1) - 5%);
}


img.topIllust.TopGear0{
	animation-name: gear0Rotation;
	animation-duration: 10s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

@keyframes gear0Rotation{
	from{
		transform: rotate(0deg);
	}
	to{
		transform: rotate(360deg);
	}
}

img.topIllust.TopGear1, img.topIllust.TopGear2, img.topIllust.TopGear3{
	animation-name: gear1Rotation;
	animation-duration: 6s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

img.topIllust.TopGear2, img.topIllust.TopGear3{
	animation-direction: reverse;
}

@keyframes gear1Rotation{
	from{
		transform: rotate(0deg);
	}
	to{
		transform: rotate(360deg);
	}
}

div.frameLight{
	animation-name: lighting;
	animation-duration: 4s;
	animation-iteration-count: infinite;
}

@keyframes lighting{
	0%{
		opacity: .5;	
	}
	50%{
		opacity: .2;
	}
	100%{
		opacity: .5;
	}
}

img.topIllust.TopAko{
	animation-name: akoSlidein;
	animation-delay: .7s;
	animation-duration:3s;
	animation-fill-mode: both;
}

@keyframes akoSlidein{
	from{
		right: -10%;
		opacity: 0;
	}
	to{
		right: 0%;
		opacity: 1;
	}
}

div.catchCopy{
	animation-name: catchcopySlidein;
	animation-delay: 2.1s;
	animation-duration: 3s;
	animation-fill-mode: both;
}

@keyframes catchcopySlidein{
	from{
		top: 12%;
		right: 10%;
		opacity: 0;
	}
	to{
		top: 24%;
		right: 10%;
		opacity: 1;
	}
}

/*---コンベアーアニメーション--*/

div.convey{
	animation-name: imageConveyer;
	animation-duration: 15s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-fill-mode: both;
}

div.secondConvey{
	animation-name: imageConveyer;
	animation-duration: 15s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-fill-mode: both;
}

@keyframes imageConveyer{
	from{
		left: calc(-1 * var(--conveyWidth));
	}
	to{
		left: var(--conveyWidth);
	}
}