@charset "UTF-8";

#kainiseikan{ 
    position: relative;
    overflow: hidden;
    width:57vw;
    height: 38vw !important;
    margin-bottom: 4vw;
    border:1px solid #6a6aff;
} 

#kainiseikan ul{ 
    list-style: none;
} 

#kainiseikan li img{ 
    position: absolute;
    max-height: 19vw !important;/* 親要素を打ち消すため必要 */
} 

/* ケース１ */
#kainiseikan li:nth-of-type(1) img{ 
    width: 20vw;
    height: auto;
    max-height: 19vw !important;/* 親要素を打ち消すため必要 */
    top: 1vw;
    left: 2vw;
    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: 25vw;
    height: auto;
    max-height: 21vw !important;/* 親要素を打ち消すため必要 */
    top: 6vw;
    left: 12vw;
    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: 28vw;
    height: auto;
    max-height: 23vw !important;/* 親要素を打ち消すため必要 */
    top: 12vw;
    left: 22vw;
    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;}
}