@charset "utf-8";
/* CSS Document */
/*メイン画像*/
#stage {
    position: relative;
    max-width: 1000px;
    margin: 2rem auto 0;
}
.pic-top, .pic-oki, .pic-yuza, .pic-kusa {
    position: absolute;
}
/*TOP*/
.pic-top img {
    width: 100%;
    height: auto;
    opacity: 0;
    -moz-animation: imgTrans 55s infinite;
    -webkit-animation: imgTrans 55s ease-in infinite;
    animation: imgTrans 55s infinite;
}
/*各保養所TOP*/
.pic-oki img, 
.pic-yuza img, .pic-kusa img {
    width: 100%;
    height: auto;
    opacity: 0;
    -moz-animation: imgTrans 30s infinite;
    -webkit-animation: imgTrans 30s ease-in infinite;
    animation: imgTrans 30s infinite;
}
/*1枚5秒で切り替わり*/
#photo1 img {
    -moz-animation-delay: 0s;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}
#photo2 img {
    -moz-animation-delay: 5s;
    -webkit-animation-delay: 5s;
    animation-delay: 5s;
}
#photo3 img {
    -moz-animation-delay: 10s;
    -webkit-animation-delay: 10s;
    animation-delay: 10s;
}
#photo4 img {
    -moz-animation-delay: 15s;
    -webkit-animation-delay: 15s;
    animation-delay: 15s;
}
#photo5 img {
    -moz-animation-delay: 20s;
    -webkit-animation-delay: 20s;
    animation-delay: 20s;
}
#photo6 img {
    -moz-animation-delay: 25s;
    -webkit-animation-delay: 25s;
    animation-delay: 25s;
}
#photo7 img {
    -moz-animation-delay: 30s;
    -webkit-animation-delay: 30s;
    animation-delay: 30s;
}
#photo8 img {
    -moz-animation-delay: 35s;
    -webkit-animation-delay: 35s;
    animation-delay: 35s;
}
#photo9 img {
    -moz-animation-delay: 40s;
    -webkit-animation-delay: 40s;
    animation-delay: 40s;
}
#photo10 img {
    -moz-animation-delay: 45s;
    -webkit-animation-delay: 45s;
    animation-delay: 45s;
}
#photo11 img {
    -moz-animation-delay: 50s;
    -webkit-animation-delay: 50s;
    animation-delay: 50s;
}
#photo12 img {
    -moz-animation-delay: 55s;
    -webkit-animation-delay: 55s;
    animation-delay: 55s;
}
/*画像の切り替わるタイミング*/
@-webkit-keyframes imgTrans {
0% {
opacity:0;
}
7% {
opacity:1;
}
18% {
opacity:1;
}
25% {
opacity:0;
}
100% {
opacity:0;
}
}
@-moz-keyframes imgTrans {
0% {
opacity:0;
}
7% {
opacity:1;
}
18% {
opacity:1;
}
25% {
opacity:0;
}
100% {
opacity:0;
}
}
@keyframes imgTrans {
0% {
opacity:0;
}
7% {
opacity:1;
}
18% {
opacity:1;
}
25% {
opacity:0;
}
100% {
opacity:0;
}
}