/*********************************
 最上部のクロスフェード
**********************************/
.sliderMUA{
    width:1190px;
    height:566px;
    margin:0 auto;
    position:relative;
}
.sliderMUA ul{
    margin:0;
    padding:0;
    list-style:none;
}
.sliderMUA ul li{
    width:1190px;
    height:566px;
    position:absolute;
    top:0;
    left:0;
    animation-iteration-count:infinite;
    animation-duration:35000ms; /* 35sec = 7sec * 5枚 */
}
.sliderMUA ul li:nth-child(1){ /*-1.5sec (前もって表示させておくため)*/
    animation-name:sliderMUA;
    animation-delay:-1500ms;
}
.sliderMUA ul li:nth-child(2){ /*-1.5sec + 7sec = 5.5sec */
    animation-name:sliderMUA;
    animation-delay:5500ms;
    opacity:0;
}
.sliderMUA ul li:nth-child(3){ /*-1.5sec + (7sec*2) = 12.5sec */
    animation-name:sliderMUA;
    animation-delay:12500ms;
    opacity:0;
}
 
.sliderMUA ul li:nth-child(4){ /*-1.5sec + (7sec*3) = 19.5sec */
    animation-name:sliderMUA;
    animation-delay:19500ms;
    opacity:0;
}

.sliderMUA ul li:nth-child(5){ /*-1.5sec + (7sec*4) = 26.5sec */
    animation-name:sliderMUA;
    animation-delay:26500ms;
    opacity:0;
}

.sliderMUA ul li:nth-child(6){ /*-1.5sec + (7sec*5) = 33.5sec */
    animation-name:sliderMUA;
    animation-delay:33500ms;
    opacity:0;
}

@keyframes sliderMUA{
    0%{
        opacity:0;
    }
    4.29%{/* 100% / 35sec * 1.5sec=4.29% */  /* 基：100/24*5sec=20.83% */
        opacity:1;
    }
    20.0%{/* 100% / 35sec * 7sec=20.0% */  /* 基：100/24*8sec=33.33% */
        opacity:1;
    }
    24.29%{/* 100% / 35sec * 8.5sec=24.29% */  /* 基：100/24*11sec=45.83% */
        opacity:0;
    }
    100%{ /* 基：100/24*24sec=100% /
        opacity:0;
    }   
}
