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

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

@keyframes sliderWINTER{
    0%{
        opacity:0;
    }
    5.35%{/* 100% / 28sec * 1.5sec=5.35% */   /* 基：100/24*5sec=20.83% */
        opacity:1;
    }
    25.00%{/* 100% / 28sec * 7sec=25.0% */     /* 基：100/24*8sec=33.33% */
        opacity:1;
    }
    30.36%{/* 100% / 28sec * 8.5sec=30.36% */  /* 基：100/24*11sec=45.83% */
        opacity:0;
    }
    100%{                                      /* 基：100/24*24sec=100% /
        opacity:0;
    }   
}