/* イベント詳細ページ Event_1 の背景アニメーション用 */

@keyframes move {
	100% {
			transform: translate3d(0, 0, 1px) rotate(360deg);
	}
}

.Event_bg>span {
	width: 20vmin;
	height: 20vmin;
	border-radius: 20vmin;
	backface-visibility: hidden;
	position: absolute;
	animation: move;
	animation-duration: 45;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

/*  以下rootの5colorを対象のインスタ投稿画像の色に変える */

:root{
	--Event_2_BGcolor_A: #DF8303;
	--Event_2_BGcolor_B: #008220;
	--Event_2_BGcolor_C: #527489;
	--Event_2_BGcolor_D: #B84521;
	--Event_2_BGcolor_E: #5FA7A5;
}

.Event_2_BGcolor>span:nth-child(0) {
	color: var(--Event_2_BGcolor_A);
	top: 42%;
	left: 19%;
	animation-duration: 45s;
	animation-delay: -44s;
	transform-origin: -2vw 20vh;
	box-shadow: -40vmin 0 5.469107378771847vmin currentColor;
}
.Event_2_BGcolor>span:nth-child(1) {
	color: var(--Event_2_BGcolor_A);
	top: 29%;
	left: 70%;
	animation-duration: 10s;
	animation-delay: -5s;
	transform-origin: 3vw -9vh;
	box-shadow: 40vmin 0 5.07381043543134vmin currentColor;
}
.Event_2_BGcolor>span:nth-child(2) {
	color: var(--Event_2_BGcolor_B);
	top: 61%;
	left: 12%;
	animation-duration: 35s;
	animation-delay: -5s;
	transform-origin: 4vw -12vh;
	box-shadow: -40vmin 0 5.504397549101909vmin currentColor;
}
.Event_2_BGcolor>span:nth-child(3) {
	color: var(--Event_2_BGcolor_C);
	top: 73%;
	left: 41%;
	animation-duration: 49s;
	animation-delay: -7s;
	transform-origin: 18vw 18vh;
	box-shadow: 40vmin 0 5.697613084218442vmin currentColor;
}
.Event_2_BGcolor>span:nth-child(4) {
	color: var(--Event_2_BGcolor_B);
	top: 21%;
	left: 91%;
	animation-duration: 27s;
	animation-delay: -16s;
	transform-origin: -8vw 13vh;
	box-shadow: -40vmin 0 5.0673907985250555vmin currentColor;
}
.Event_2_BGcolor>span:nth-child(5) {
	color: var(--Event_2_BGcolor_C);
	top: 81%;
	left: 80%;
	animation-duration: 16s;
	animation-delay: -41s;
	transform-origin: 0vw -21vh;
	box-shadow: 40vmin 0 5.123034768824098vmin currentColor;
}
.Event_2_BGcolor>span:nth-child(6) {
	color: var(--Event_2_BGcolor_B);
	top: 28%;
	left: 43%;
	animation-duration: 16s;
	animation-delay: -50s;
	transform-origin: -15vw -14vh;
	box-shadow: -40vmin 0 5.372174414083994vmin currentColor;
}
.Event_2_BGcolor>span:nth-child(7) {
	color: var(--Event_2_BGcolor_E);
	top: 50%;
	left: 96%;
	animation-duration: 24s;
	animation-delay: -1s;
	transform-origin: -8vw 6vh;
	box-shadow: -40vmin 0 5.98363616474762vmin currentColor;
}
.Event_2_BGcolor>span:nth-child(8) {
	color: var(--Event_2_BGcolor_B);
	top: 34%;
	left: 11%;
	animation-duration: 39s;
	animation-delay: -26s;
	transform-origin: -18vw -2vh;
	box-shadow: 40vmin 0 5.285375847519419vmin currentColor;
}
.Event_2_BGcolor>span:nth-child(9) {
	color: var(--Event_2_BGcolor_C);
	top: 37%;
	left: 2%;
	animation-duration: 41s;
	animation-delay: -41s;
	transform-origin: 13vw -6vh;
	box-shadow: -40vmin 0 5.421184027813322vmin currentColor;
}
.Event_2_BGcolor>span:nth-child(10) {
	color: var(--Event_2_BGcolor_D);
	top: 52%;
	left: 54%;
	animation-duration: 38s;
	animation-delay: -50s;
	transform-origin: 15vw -3vh;
	box-shadow: 40vmin 0 5.9302184933122515vmin currentColor;
}
.Event_2_BGcolor>span:nth-child(11) {
	color: var(--Event_2_BGcolor_B);
	top: 85%;
	left: 49%;
	animation-duration: 21s;
	animation-delay: -50s;
	transform-origin: 10vw -1vh;
	box-shadow: 40vmin 0 5.429226357982609vmin currentColor;
}
.Event_2_BGcolor>span:nth-child(12) {
	color: var(--Event_2_BGcolor_D);
	top: 2%;
	left: 4%;
	animation-duration: 26s;
	animation-delay: -38s;
	transform-origin: -6vw 15vh;
	box-shadow: -40vmin 0 5.348753668259104vmin currentColor;
}
.Event_2_BGcolor>span:nth-child(13) {
	color: var(--Event_2_BGcolor_C);
	top: 19%;
	left: 89%;
	animation-duration: 16s;
	animation-delay: -17s;
	transform-origin: 11vw -12vh;
	box-shadow: -40vmin 0 5.065762235972816vmin currentColor;
}
.Event_2_BGcolor>span:nth-child(14) {
	color: var(--Event_2_BGcolor_B);
	top: 61%;
	left: 27%;
	animation-duration: 55s;
	animation-delay: -7s;
	transform-origin: 1vw 24vh;
	box-shadow: 40vmin 0 5.817751605729367vmin currentColor;
}
.Event_2_BGcolor>span:nth-child(15) {
	color: var(--Event_2_BGcolor_D);
	top: 69%;
	left: 52%;
	animation-duration: 45s;
	animation-delay: -24s;
	transform-origin: -21vw 12vh;
	box-shadow: -40vmin 0 5.610734607363268vmin currentColor;
}
.Event_2_BGcolor>span:nth-child(16) {
	color: var(--Event_2_BGcolor_A);
	top: 45%;
	left: 34%;
	animation-duration: 18s;
	animation-delay: -5s;
	transform-origin: 9vw -17vh;
	box-shadow: 40vmin 0 5.720323109960387vmin currentColor;
}
.Event_2_BGcolor>span:nth-child(17) {
	color: var(--Event_2_BGcolor_E);
	top: 99%;
	left: 47%;
	animation-duration: 7s;
	animation-delay: -19s;
	transform-origin: 0vw 18vh;
	box-shadow: 40vmin 0 5.435848331110335vmin currentColor;
}
.Event_2_BGcolor>span:nth-child(18) {
	color: var(--Event_2_BGcolor_A);
	top: 75%;
	left: 22%;
	animation-duration: 45s;
	animation-delay: -33s;
	transform-origin: 13vw -15vh;
	box-shadow: -40vmin 0 5.56550936506466vmin currentColor;
}
.Event_2_BGcolor>span:nth-child(19) {
	color: var(--Event_2_BGcolor_C);
	top: 30%;
	left: 21%;
	animation-duration: 49s;
	animation-delay: -3s;
	transform-origin: 19vw -13vh;
	box-shadow: 40vmin 0 5.973855627478165vmin currentColor;
}
