.out{
position: relative;
width: 200%;
margin:100px 0 0 -10px;/*-34% 0 0 -1.56%*/
display: block;
background-image: linear-gradient(0deg, #FFF 9.36%, #82b2b3 1%);
}
.in img{
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: .5s;
z-index: 0;
}
input{
display: none;
}
.in{
display: flex;
justify-content: center;
margin: 0 29.3333% 0 0;
}
label span{
display: block;
width: 10px;
height: 10px;
padding: 8px;
margin: -40px 0 0;
border-radius: 100%;
cursor: pointer;
position: relative;
z-index: 10;
}
label span::before{
content: "";
display: block;
width: 100%;
height: 100%;
background: #666;
opacity: 0.5;
border-radius: 100%;
}            
input:nth-of-type(1):checked ~ .in label:nth-of-type(1) span::before,
input:nth-of-type(2):checked ~ .in label:nth-of-type(2) span::before,
input:nth-of-type(3):checked ~ .in label:nth-of-type(3) span::before{
background: #fff;
opacity: 1;
}
label span::before{
animation: slidebutton 14s infinite;
}
   @keyframes slidebutton{
   0%{opacity: 0.5;background: #666;}
   3.5%{opacity: 1;background: #fff;}/* b÷x×100=y */
   25%{opacity: 1;background: #fff;}/* 100÷c=z */
   28.5%{opacity: 0.5;background: #666;}/* 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;
}           
input:nth-of-type(1):checked ~ .in label:nth-of-type(1) img,
input:nth-of-type(2):checked ~ .in label:nth-of-type(2) img,
input:nth-of-type(3):checked ~ .in label:nth-of-type(3) img{
opacity: 1;
z-index: 1;
}
.in 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 ~ .in img,input:checked ~ .in span::before{
animation: none;
}
.in:hover img,.in:hover span::before{
animation-play-state:running; /* paused マウスを載せると一時停止 */
}

@media (min-width: 980px) and (max-width: 1280px) {
.out {
margin: 86px 0 0 -10px;
}
.in{
margin: 0 30% 0 0;
}
}
@media only screen and (max-width:979px) {
   .out {
   width: 100%;
   margin:25% 0 -10% -1.56%;
   background-image: none;
   }
   .in {
   margin: 0;
   }
}