@charset "UTF-8";

#kainiseikan{ 
    position: relative;
    overflow: hidden;
    width:92vw;
    height: 54vw;
    margin-bottom: 5vw;
    border:1px solid #6a6aff;
} 

#kainiseikan ul{ 
    list-style: none;
} 

#kainiseikan li img{ 
    position: absolute;
} 

/* ケース１ */
#kainiseikan li:nth-of-type(1) img{
    width: 35vw;
    height: auto;
    top: 0vw;
    left: 10vw;
    animation: seikan_case1 5s infinite;
} 
@keyframes seikan_case1 {
    0% { opacity: 0;}
    5% { opacity: 0.9;}
    30% { opacity: 0.9;}
    35% { opacity: 0;}
    100% { opacity: 0;}
} 

/* ケース２ */
#kainiseikan li:nth-of-type(2) img{ 
    width:40vw;
    height: auto;
    top: 8vw;
    left: 25vw;
    animation: seikan_case2 5s infinite;
} 
@keyframes seikan_case2 {
    0% { opacity: 0;}
    30% { opacity: 0;}
    35% { opacity: 0.9;}
    60% { opacity: 0.9;}
    65% { opacity: 0;}
    100% { opacity: 0;}
} 

/* ケース3 */
#kainiseikan li:nth-of-type(3) img{ 
    width:45vw;
    height: auto;
    top: 16vw;
    left: 40vw;
    animation: seikan_case3 5s infinite;
} 
@keyframes seikan_case3 {
    0% { opacity: 0;}
    60% { opacity: 0;}
    65% { opacity: 0.9;}
    90% { opacity: 0.9;}
    95% { opacity: 0;}
    100% { opacity: 0;}
}