.img-frame{
       position: relative;
       width: 70%;
       height: 300px;
       overflow: hidden;
       margin: 0 auto;
    }
    @media screen and (max-width: 767px){
    .img-frame{
       width: 100%;
       height: 200px;
    }
    .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('img/unagi/DSC_0438.JPG');
       animation: slide-animation-01 24s infinite;
    }
    .img-02{
       background-image: url('img/unagi/DSC_0451.JPG');
       animation: slide-animation-02 24s infinite;
    }
    .img-03{
       background-image: url('img/unagi/DSC_0458.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);}
    }