/*スライド写真
---------------------------------------------------------------------------*/
.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, .img-04, .img-05{
   position: absolute;
   top:0;
   left:0;
   width: 100%;
   height: 100%;
   background-size: cover;
   background-repeat: no-repeat;
}
.img-01{
background-image: url(https://kuriharataxi.cloudfree.jp/images/IMG_0797.JPG);
animation: slide-animation-01 24s infinite;
}
.img-02{
background-image: url(https://kuriharataxi.cloudfree.jp/images/IMG_0810.JPG);
animation: slide-animation-02 24s infinite;
}
.img-03{
background-image: url(https://kuriharataxi.cloudfree.jp/images/IMG_0833.JPG);
animation: slide-animation-03 24s infinite;
}

    .msg{
       font-size: 20px;
       color: #fff;
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50% , -50%);
    }
    .msg-01, .msg-02{
        text-shadow: 2px 2px 3px #000, -1px -1px 3px #000;
    }
    .img-03.cover::after{
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background-color: rgba(0, 0, 0, .7);
    }
    .msg-03{
       z-index:1;
    }


@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);}
}