@charset "UTF-8" ;
/* ------------------------------------------------- */
/*   for PC design (PC first. public design) */
/* ------------------------------------------------- */
/*---PublicStyle---*/

#stage {
    position: relative;
    width: 600px;
    height:360;
    margin: 0 auto;
}
.pic {
    position: absolute;
    width: 600px;
    height: 360px;
}
.pic img {
    opacity:0;
    -moz-animation: imgTrans 72s; /*infinite解除で繰り返さない*/
    -webkit-animation: imgTrans 72s;
    animation: imgTrans 72s;
}
.piclast img {
    opacity:1;
    -moz-animation: imgTrans2 72s; /*最終画像のみ別にし、フェードアウトしないようにする*/
    -webkit-animation: imgTrans2 72s;
    animation: imgTrans2 72s;
}

#photo1 img {
    -moz-animation-delay: 0s;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}
#photo2 img {
    -moz-animation-delay: 6s;
    -webkit-animation-delay: 6s;
    animation-delay: 6s;
}
#photo3 img {
    -moz-animation-delay: 12s;
    -webkit-animation-delay: 12s;
    animation-delay: 12s;
}
#photo4 img{
    -moz-animation-delay: 18s;
    -webkit-animation-delay: 18s;
    animation-delay: 18s;
}
#photo5 img {
    -moz-animation-delay: 24s;
    -webkit-animation-delay: 24s;
    animation-delay: 24s;
}
#photo6 img {
    -moz-animation-delay: 30s;
    -webkit-animation-delay: 30s;
    animation-delay: 30s;
}
#photo7 img {
    -moz-animation-delay: 36s;
    -webkit-animation-delay: 36s;
    animation-delay: 36s;
}
#photo8 img {
    -moz-animation-delay: 42s;
    -webkit-animation-delay: 42s;
    animation-delay: 42s;
}
#photo9 img {
    -moz-animation-delay: 48s;
    -webkit-animation-delay: 48s;
    animation-delay: 48s;
}

/*---以下11枚の設定-----------------
#photo9 img {
    -moz-animation-delay: 48s;
    -webkit-animation-delay: 48s;
    animation-delay: 48s;
}
#photo10 img {
    -moz-animation-delay: 54s;
    -webkit-animation-delay: 54s;
    animation-delay: 54s;
}
#photo11 img {
    -moz-animation-delay: 60s;
    -webkit-animation-delay: 60s;
    animation-delay: 60s;
}
#photo11 img {
    -moz-animation-delay: 66s;
    -webkit-animation-delay: 66s;
    animation-delay: 66s;
}
------------------------------------*/

#frame {
    width: 600px;
    height: 360px;
    position: relative;
    overflow: hidden;
}
@-webkit-keyframes imgTrans {
 0% { opacity:0; }
 5% { opacity:1; }
 20% { opacity:1; }
 25% { opacity:0; } 
 100% { opacity:0; }
}
@-moz-keyframes imgTrans {
 0% { opacity:0; }
 5% { opacity:1; }
 20% { opacity:1; }
 25% { opacity:0; } 
 100% { opacity:0; }
}
@keyframes imgTrans {
 0% { opacity:0; }
 5% { opacity:1; }
 20% { opacity:1; }
 25% { opacity:0; } 
 100% { opacity:0; }
}
@-webkit-keyframes imgTrans2 {
 0% { opacity:0; }
 5% { opacity:1; }
 20% { opacity:1; }
 25% { opacity:1; } 
 100% { opacity:1; }
}
@-moz-keyframes imgTrans2 {
 0% { opacity:0; }
 5% { opacity:1; }
 20% { opacity:1; }
 25% { opacity:1; } 
 100% { opacity:1; }
}
@keyframes imgTrans2 {
 0% { opacity:0; }
 5% { opacity:1; }
 20% { opacity:1; }
 25% { opacity:1; } 
 100% { opacity:1; }
}