@charset "utf-8";
/* CSS Document */

.img-frame{
 position: relative;
 width: 540px;
 height: 300px;
 overflow: hidden;
 margin: 0 auto;
}
.msg{
 font-size: 20px;
 color: #fff;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50% , -50%);
}
@media screen and (max-width: 540px){
.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('../images/akasaka-540-19.jpg');
 animation: slide-animation-01 24s infinite;
}
.img-02{
 background-image: url('../images/akasaka-540-20.jpg');
 animation: slide-animation-02 24s infinite;
}
.img-03{
 background-image: url('../images/akasaka-540-11.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);}
}