@charset "utf-8";

/* 全て流用してポジションは別シートで指定  */
/******************************************************
 クロスフェード 2枚
******************************************************/
.slider2 ul{
    margin:0;
    padding:0;
    list-style:none;
}
.slider2 ul li{
    position:absolute;
    top:0;
    left:0;

  /* VendorPrefix */
  -webkit-animation-duration: 14000ms; /* 7sec x 2枚  */
  animation-duration: 14000ms;         /* 上記と同値  */
  -webkit-animation-iteration-count:infinite;
  animation-iteration-count:infinite;
}

.slider2 ul li:nth-child(1){
    animation-name:slider2KF;
    animation-delay:-1500ms; /* 1枚目は1.5sec早めに開始し、トランジションをパスする */
}
.slider2 ul li:nth-child(2){
    animation-name:slider2KF;
    animation-delay:5500ms;
    opacity:0;
}

@keyframes slider2KF{
    0%{ /* Start */
        opacity:0;
    }
    6.43%{  /* 1.5s 1.5秒に100％にする 60000/14000*1.5=6.43 */
        opacity:1;
    }
    51.43%{ /* 12s 100%持続時間 */
        opacity:1;
    }
    53.71%{ /* 12.5s 0%へ収束時間 */
        opacity:0;
    }
    100%{   /* そのまま最後まで0％にしておく */
        opacity:0;
    }
}

/******************************************************
 クロスフェード 3枚
******************************************************/
.slider3 ul{
    margin:0;
    padding:0;
    list-style:none;
}
.slider3 ul li{
    position:absolute;
    top:0;
    left:0;

  /* VendorPrefix */
  -webkit-animation-duration: 21000ms; /* 7sec x 3枚  */
  animation-duration: 21000ms;         /* 上記と同値  */
  -webkit-animation-iteration-count:infinite;
  animation-iteration-count:infinite;
}

.slider3 ul li:nth-child(1){
    animation-name:slider3KF;
    animation-delay:-1500ms; /* 1枚目は1.5sec早めに開始し、トランジションをパスする */
}
.slider3 ul li:nth-child(2){
    animation-name:slider3KF;
    animation-delay:5500ms;
    opacity:0;
}
.slider3 ul li:nth-child(3){
    animation-name:slider3KF;
    animation-delay:12500ms;
    opacity:0;
}
 
@keyframes slider3KF{
    0%{ /* Start */
        opacity:0;
    }
    4.29%{  /* 1.5s 1.5秒に100％にする 60000/21000*1.5=4.29 */
        opacity:1;
    }
    34.28%{ /* 12s 100%持続時間 */
        opacity:1;
    }
    35.71%{ /* 12.5s 0%へ収束時間 */
        opacity:0;
    }
    100%{   /* そのまま最後まで0％にしておく */
        opacity:0;
    }
}

/******************************************************
 クロスフェード 4枚
******************************************************/
.slider4 ul{
    margin:0;
    padding:0;
    list-style:none;
}
.slider4 ul li{
    position:absolute;
    top:0;
    left:0;

  /* VendorPrefix */
  -webkit-animation-duration: 28000ms; /* 7sec x 4枚  */
  animation-duration: 28000ms;         /* 上記と同値  */
  -webkit-animation-iteration-count:infinite;
  animation-iteration-count:infinite;
}

.slider4 ul li:nth-child(1){
    animation-name:slider4KF;
    animation-delay:-1500ms; /* 1枚目は1.5sec早めに開始し、トランジションをパスする */
}
.slider4 ul li:nth-child(2){
    animation-name:slider4KF;
    animation-delay:5500ms;
    opacity:0;
}
.slider4 ul li:nth-child(3){
    animation-name:slider4KF;
    animation-delay:12500ms;
    opacity:0;
}
.slider4 ul li:nth-child(4){
    animation-name:slider4KF;
    animation-delay:19500ms;
    opacity:0;
}
 
@keyframes slider4KF{
    0%{ /* Start */
        opacity:0;
    }
    3.21%{  /* 1.5s 1.5秒に100％にする 60000/28000*1.5=3.21 */
        opacity:1;
    }
    25.71%{ /* 12s */
        opacity:1;
    }
    26.79%{ /* 12.5s */
        opacity:0;
    }
    100%{   /* そのまま最後まで0％にしておく */
        opacity:0;
    }
}

/******************************************************
 クロスフェード 5枚
******************************************************/
.slider5 ul{
    margin:0;
    padding:0;
    list-style:none;
}
.slider5 ul li{
    position:absolute;
    top:0;
    left:0;

  /* VendorPrefix */
  -webkit-animation-duration: 35s; /* 7sec x 5枚  */
  animation-duration: 35s;         /* 上記と同値  */
  -webkit-animation-iteration-count:infinite;
  animation-iteration-count:infinite;
}

.slider5 ul li:nth-child(1){
    animation-name:slider5KF;
    animation-delay:-1500ms; /* 1枚目は1.5sec早めに開始し、トランジションをパスする */
}
.slider5 ul li:nth-child(2){
    animation-name:slider5KF;
    animation-delay:5500ms;
    opacity:0;
}
.slider5 ul li:nth-child(3){
    animation-name:slider5KF;
    animation-delay:12500ms;
    opacity:0;
}
.slider5 ul li:nth-child(4){
    animation-name:slider5KF;
    animation-delay:19500ms;
    opacity:0;
}
.slider5 ul li:nth-child(5){
    animation-name:slider5KF;
    animation-delay:26500ms;
    opacity:0;
}

@keyframes slider5KF{
    0%{ /* Start */
        opacity:0;
    }
    2.57%{  /* 1.5s 1.5秒に100％にする 60000/35000*1.5=2.57 */
        opacity:1;
    }
    20.57%{ /* 12s 12秒に100％にする 60000/35000*12=20.57 */
        opacity:1;
    }
    21.42%{ /* 12.5s 12.5秒に100％にする 60000/35000*12.5=21.42 */
        opacity:0;
    }
    100%{   /* そのまま最後まで0％にしておく */
        opacity:0;
    }
}

/******************************************************
 クロスフェード 6枚
******************************************************/
.slider6 ul{
    margin:0;
    padding:0;
    list-style:none;
}
.slider6 ul li{
    position:absolute;
    top:0;
    left:0;

  /* VendorPrefix */
  -webkit-animation-duration: 42s; /* 7sec x 6枚  */
  animation-duration: 42s;         /* 上記と同値  */
  -webkit-animation-iteration-count:infinite;
  animation-iteration-count:infinite;
}

.slider6 ul li:nth-child(1){
    animation-name:slider6KF;
    animation-delay:-1500ms; /* 1枚目は1.5sec早めに開始し、トランジションをパスする */
}
.slider6 ul li:nth-child(2){
    animation-name:slider6KF;
    animation-delay:5500ms;
    opacity:0;
}
.slider6 ul li:nth-child(3){
    animation-name:slider6KF;
    animation-delay:12500ms;
    opacity:0;
}
.slider6 ul li:nth-child(4){
    animation-name:slider6KF;
    animation-delay:19500ms;
    opacity:0;
}
.slider6 ul li:nth-child(5){
    animation-name:slider6KF;
    animation-delay:26500ms;
    opacity:0;
}
.slider6 ul li:nth-child(6){
    animation-name:slider6KF;
    animation-delay:33500ms;
    opacity:0;
}

@keyframes slider6KF{
    0%{ /* Start */
        opacity:0;
    }
    2.14%{  /* 1.5s 1.5秒に100％にする 60000/42000*1.5=2.14 */
        opacity:1;
    }
    17.14%{ /* 12s 12秒に100％にする 60000/42000*12=17.14 */
        opacity:1;
    }
    17.86%{ /* 12.5s 12.5秒に100％にする 60000/42000*12.5=17.86 */
        opacity:0;
    }
    100%{   /* そのまま最後まで0％にしておく */
        opacity:0;
    }
}