.SliderBox {
	position: relative;
	}

.SliderBox img	{
	display: block;
	width: 100%;
	height: auto;
	}


.SliderBox input	{
	display: none;
	}


.SliderInside	{
	display: flex;
	justify-content: center;
	}


.SliderInside img {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	transition: .5s;
	z-index: 0;
	}


label span	{
	display: block;
	width: 40px;
	height:	40px;
	padding: 12px;
	margin: 0px 0 0;
	border-radius: 100%;
	cursor: pointer;
	position: relative;
	z-index: 2;
	}

label span::before	{
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background: #4287f5;
	opacity: 0.5;
	border-radius: 100%;
	}
    
input:nth-of-type(1):checked ~ .SliderInside label:nth-of-type(1) span::before,
input:nth-of-type(2):checked ~ .SliderInside label:nth-of-type(2) span::before,
input:nth-of-type(3):checked ~ .SliderInside label:nth-of-type(3) span::before,
input:nth-of-type(4):checked ~ .SliderInside label:nth-of-type(4) span::before	{
	background: #000;
	opacity: 1;
	}


label span::before	{
	animation: slidebutton 14s infinite;
	}



@keyframes slidebutton	{
	0%	{opacity: 0.5;background: #4287f5;}
	3.5%	{opacity: 1;background: #555;}/* b÷x×100=y */
	25%	{opacity: 1;background: #555;}/* 100÷c=z */
	28.5%	{opacity: 0.5;background: #4287f5;}/* y+z */
	}    
        
label:nth-of-type(2) span::before,label:nth-of-type(2) img{
	animation-delay: 3.5s;
}

            
label:nth-of-type(3) span::before,label:nth-of-type(3) img{
	animation-delay: 7s;
}
       
label:nth-of-type(4) span::before,label:nth-of-type(4) img{
	animation-delay: 10.5s;
}


input:nth-of-type(1):checked ~ .SliderInside label:nth-of-type(1) img,
input:nth-of-type(2):checked ~ .SliderInside label:nth-of-type(2) img,
input:nth-of-type(3):checked ~ .SliderInside label:nth-of-type(3) img,
input:nth-of-type(4):checked ~ .SliderInside label:nth-of-type(4) img	{
	opacity: 1;
	z-index: 1;
}

.SliderInside img	{
	animation: slide 14s infinite;/* (a+b)×c=x */
	opacity: 0;
	}

@keyframes slide	{
	0%{opacity: 0;}
	3.5%{opacity: 1;z-index: 1;}/* b÷x×100=y */
	25%{opacity: 1;}/* 100÷c=z */
	28.5%{opacity: 0;z-index: 0;}/* y+z */
}

input:checked ~ .SliderInside img,input:checked ~ .SliderInside span::before{
	animation: none;
}

.SliderInside:hover img,.SliderInside:hover span::before	{
	animation-play-state:paused;/* マウスを載せると一時停止 */
}