#stopCircle {
	position: absolute;
	top: calc(45% + 30px);
	right: calc(50% + 230px);
	z-index: 0;
}

#stopCircle div {
	position: absolute;
}

#stopCircle div::before,
#stopCircle div::after {
	content: '';
	display: block;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	position: absolute;
	top: 50%;
	left: 50%;
}

#stopCircle div.top {
	top: -245px;
	z-index: 1;
}

#stopCircle div.top::before {
	background-image: url(https://img.yuyu-tei.jp/images/animation/circle/top_in.png);
	width: 500px;
	height: 500px;
	transform: translate(-50%, -50%) rotate3d(1, 0, 0, 77deg) rotate(0deg);
	opacity: 0.4;
	/* animation: stopCircle_top_in forwards 8s 0s infinite linear normal; */
}

/* @keyframes stopCircle_top_in {
	0% {
		transform: translate(-50%, -50%) rotate3d(1, 0, 0, 77deg) rotate(0deg);
	}

	100% {
		transform: translate(-50%, -50%) rotate3d(1, 0, 0, 77deg) rotate(360deg);
	}
} */

#stopCircle div.top::after {
	background-image: url(https://img.yuyu-tei.jp/images/animation/circle/top_out.png);
	width: 1180px;
	height: 1100px;
	transform: translate(-50%, -50%) rotate3d(1, 0, 0, 72deg) rotate(0deg);
	top: calc(50% - 4px);
	opacity: 0.2;
	/* animation: stopCircle_top_out forwards 5s 0s infinite ease normal; */
}

/* @keyframes stopCircle_top_out {
	0% {
		transform: translate(-50%, -50%) rotate3d(1, 0, 0, 77deg) rotate(0deg);
	}

	50% {
		transform: translate(-50%, -50%) rotate3d(1, 0, 0, 77deg) rotate(-360deg);
	}

	100% {
		transform: translate(-50%, -50%) rotate3d(1, 0, 0, 77deg) rotate(-360deg);
	}
} */

#stopCircle div.middle {
	z-index: 2;
}

#stopCircle div.middle::before,
#stopCircle div.middle::after {
	transform: translate(-50%, -50%) rotate3d(1, 0, 0, 85deg) rotate(0deg);
	background-image: url(https://img.yuyu-tei.jp/images/animation/circle/middle.png);
	width: 980px;
	height: 980px;
	opacity: 0.8;
	/* animation: stopCircle_middle forwards 3s 0s infinite linear normal; */
}

/* @keyframes stopCircle_middle {
	0% {
		transform: translate(-50%, -50%) rotate3d(1, 0, 0, 85deg) rotate(0deg);
	}

	100% {
		transform: translate(-50%, -50%) rotate3d(1, 0, 0, 85deg) rotate(90deg);
	}
} */

#stopCircle div.middle::before {
	top: calc(50% - 74px);
}

#stopCircle div.middle::after {
	top: calc(50% + 124px);
}

#stopCircle div.bottom {
	top: 298px;
	z-index: 1;
}

#stopCircle div.bottom::before {
	background-image: url(https://img.yuyu-tei.jp/images/animation/circle/bottom_in.png);
	width: 680px;
	height: 680px;
	transform: translate(-50%, -50%) rotate3d(1, 0, 0, -77deg) rotate(0deg);
	opacity: 0.4;
	/* animation: stopCircle_bottom_in forwards 10s 0s infinite linear normal; */
}

/* @keyframes stopCircle_bottom_in {
	0% {
		transform: translate(-50%, -50%) rotate3d(1, 0, 0, -75deg) rotate(0deg);
	}

	100% {
		transform: translate(-50%, -50%) rotate3d(1, 0, 0, -75deg) rotate(360deg);
	}
} */

#stopCircle div.bottom::after {
	background-image: url(https://img.yuyu-tei.jp/images/animation/circle/top_out.png);
	width: 1580px;
	height: 1580px;
	transform: translate(-50%, -50%) rotate3d(1, 0, 0, 72deg) rotate(0deg);
	top: calc(50% - -1px);
	opacity: 0.1;
	/* animation: stopCircle_bottom_out forwards 3s 0s infinite linear normal; */
}

/* @keyframes stopCircle_bottom_out {
	0% {
		transform: translate(-50%, -50%) rotate3d(1, 0, 0, 74deg) rotate(0deg);
	}

	100% {
		transform: translate(-50%, -50%) rotate3d(1, 0, 0, 74deg) rotate(360deg);
	}
} */

#stopCircle div.light {
	z-index: 3;
}

#stopCircle div.light::before,
#stopCircle div.light::after {
	background: #f3f4e4;
	width: 130px;
	height: 20px;
	border-radius: 50%;
	box-shadow: -60px 0px 60px 60px #e9ee68, 60px 0px 60px 60px #e9ee68;
	opacity: 0.4;
	transform: translate(-50%, -50%) scale(0.6, 0.9);
	transition: 0.2s;
}

#stopCircle div.light::before {
	top: calc(50% - 246px);
}

#stopCircle div.light::after {
	top: calc(50% + 297px);
}

#stopCircle div.light.zoom::before,
#stopCircle div.light.zoom::after {
	opacity: 0.7;
	transform: translate(-50%, -50%);
	transition: 0.2s 0.2s;
}

#stop_arrow {
	position: absolute;
	top: calc(50% - 136px);
	right: calc(50% + 424px);
	z-index: 0;
	width: 158px;
	height: 42px;
	background: url(https://img.yuyu-tei.jp/images/animation/arrow/base.svg);
}

#stop_arrow div {
	position: absolute;
	top: 25px;
	z-index: 1;
	width: 14px;
	height: 16px;
	background: url(https://img.yuyu-tei.jp/images/animation/arrow/tri.png);
	transform-origin: left center;
	/* animation:stop forwards 2s 0s infinite linear normal; */
}

/* @keyframesstop {
	0% {
		opacity: 1;
	}

	50% {
		opacity: 0;
	}

	90% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
} */

#stop_arrow div:nth-child(1) {
	left: 94px;
	animation-delay: -1s;
}

#stop_arrow div:nth-child(2) {
	left: 112px;
	transform: scale(0.9);
	animation-delay: -0.85s;
}

#stop_arrow div:nth-child(3) {
	left: 128px;
	transform: scale(0.7);
	animation-delay: -0.7s;
}

#stop_arrow div:nth-child(4) {
	left: 141px;
	transform: scale(0.6);
	animation-delay: -0.55s;
}

#stop_arrow div:nth-child(5) {
	left: 153px;
	transform: scale(0.5);
	animation-delay: -0.4s;
}



@media screen and (max-width: 768px) {

	#stopCircle {
		top: 324px;
		right: 50%;
		padding-top: 82px;
	}

	#stopCircle div.top {
		top: -40vw;
	}

	#stopCircle div.middle::before {
		top: -30vw;
	}

	#stopCircle div.middle::after {
		top: 5vw;
	}

	#stopCircle div.bottom {
		top: 56vw;
	}

	#stopCircle div.light::before {
		top: calc(50% - 246px);
	}

	#stopCircle div.light::after {
		top: 33vw;
	}

	#stop_arrow {
		display: none;
	}    
}