@charset "UTF-8";

.photo-show { 
    height: 302px; /*表示したい大きさ*/
    margin: 1em auto; /*縦余白30pxは任意*/
    max-width: 100%;
    position: relative;
    width: 552px; /*表示したい大きさ、height と合わせる*/
}

.photo-show img { 
    animation: show 36s infinite;
    -webkit-animation: show 36s infinite;
/*    border-radius: 50%;*/
    height: auto;
    max-width: 100%;
    opacity: 0;
    position: absolute; /*画像を全て重ねる*/
}

/*アニメーション*/

@keyframes show {
    0% {opacity:0}
    5% {opacity:1}
    10% {opacity:1}
    20% {opacity:0}
 }

@-webkit-keyframes show {
    0% {opacity:0}
    5% {opacity:1}
    10% {opacity:1}
    20% {opacity:0}
}

/*各画像のアニメーションの開始時間をずらす*/

.photo-show img:nth-of-type(1) {
    animation-delay: 0s;
    -webkit-animation-delay: 0s;
}

.photo-show img:nth-of-type(2) {
    animation-delay: 4s;
    -webkit-animation-delay: 4s;
}

.photo-show img:nth-of-type(3) {
    animation-delay: 8s;
    -webkit-animation-delay: 8s;
}

.photo-show img:nth-of-type(4) {
    animation-delay: 12s;
    -webkit-animation-delay: 12s;
}

.photo-show img:nth-of-type(5) {
    animation-delay: 16s;
    -webkit-animation-delay: 16s
}

.photo-show img:nth-of-type(6) {
    animation-delay: 20s;
    -webkit-animation-delay: 20s;
}

.photo-show img:nth-of-type(7) {
    animation-delay: 24s;
    -webkit-animation-delay: 24s;
} 
.photo-show img:nth-of-type(8) {
    animation-delay: 28s;
    -webkit-animation-delay: 28s;
}

.photo-show img:nth-of-type(9) {
    animation-delay: 32s;
    -webkit-animation-delay: 32s;
}

/*マウスが画像に重なった際、動きを止めて四角くする*/

.photo-show img {
    transition: 0.2s;
    -webkit-transition: 0.2s;
}

.photo-show:hover img {
    animation-play-state: paused;
    -webkit-animation-play-state: paused;
    border-radius: 0;
}