/*--------------------------------------------
	img-frame
	https://www.bring-flower.com/blog/slideshow/
--------------------------------------------*/

.img-frame{
   position: relative;
   width: 100%;
   height: 100vh;
   overflow: hidden;
   margin: 0 auto;
}


	
.img-01, .img-02, .img-03{
   position: absolute;
   top:0;
   left:0;
   width: 100%;
   height: 100%;
   background-size: cover;
   background-repeat: no-repeat;
}

.img-01{
   background: url(../img/slimuscle_banner1.jpg) no-repeat center/cover;
   animation: slide-animation-01 20s infinite;
}
.img-02{
   background: url(../img/slimuscle_banner2.jpg) no-repeat center/cover;
   animation: slide-animation-02 20s infinite;
}
.img-03{
   background: url(../img/slimuscle_banner3.jpg) no-repeat center/cover;
   animation: slide-animation-03 20s infinite;
}



@media screen and (max-width: 900px) {
	
.img-01{
   background: url(../img/slimuscle_banner_sp1.jpg) no-repeat center/cover;
}
.img-02{
   background: url(../img/slimuscle_banner_sp2.jpg) no-repeat center/cover;
}
.img-03{
   background: url(../img/slimuscle_banner_sp3.jpg) no-repeat center/cover;
}
}



@keyframes slide-animation-01 {
    0% {opacity: 1; transform: scale(1.0);}
  30% {opacity: 1;}
  40% {opacity: 0; transform: scale(1.2);}
  90% {opacity: 0}
100% {opacity: 1; transform: scale(1.0);}
}
@keyframes slide-animation-02 {
    0% {opacity: 0;}
  30% {opacity: 0; transform: scale(1.0);}
  40% {opacity: 1;}
  60% {opacity: 1;}
  70% {opacity: 0; transform: scale(1.2);}
100% {opacity: 0;}
}
@keyframes slide-animation-03 {
    0% {opacity: 0;}
  60% {opacity: 0;  transform: scale(1.0);}
  70% {opacity: 1;}
  90% {opacity: 1;}
100% {opacity: 0; transform: scale(1.2);}
}
	
	
.img-frame::after{
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, .1);
}