.img-frame{
    position: relative;
    width: 70%;
    height: 300px;
    overflow: hidden;
    margin: 0 auto;
 }

.img-frame{
    width: 800px;
    height: 300px;
    margin-bottom: 5rem;
 }
 .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-image: url('https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/6-1-1/img/img_01.jpg');
    animation: slide-animation-01 24s infinite;
 }
 .img-02{
    background-image: url('https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/6-1-1/img/img_02.jpg');
    animation: slide-animation-02 24s infinite;
 }
 .img-03{
    background-image: url('https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/6-1-1/img/img_03.jpg');
    animation: slide-animation-03 24s infinite;
 }
 @keyframes slide-animation-01 {
     0% {opacity: 1; transform: scale(1.0);}
   30% {opacity: 1;}
   40% {opacity: 0; transform: scale(1.15);}
   90% {opacity: 0}
 100% {opacity: 1; transform: scale(1.0);}
 }
 @keyframes slide-animation-02 {
     0% {opacity: 0;}
   30% {opacity: 0; transform: scale(1.1);}
   40% {opacity: 1;}
   60% {opacity: 1;}
   70% {opacity: 0; transform: scale(1.0);}
 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.1);}
}


@media screen and (min-width: 1px) and (max-width: 767px) {
   .img-frame {
      width: 90%;
   }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
   .img_frame {
      width: 80%;
   }
}