*, *:before, *:after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.cp_cssslider {
background:transparent;
/* border: 10px solid #ffffff;
box-shadow:1px 1px 5px rgba(0,0,0,0.7);
height:200px;
width:300px;
margin:2em auto; */
overflow:visible;
position:relative;
}
.cp_cssslider {
  height: 40vw;
  width: 90vw;
  margin: 0 auto;
}
.cp_cssslider img {
  width: 90vw;
}
.cp_cssslider ul {
margin:0;
padding:0;
position:relative;
}
/* tooltip */
.cp_cssslider .tooltip {
background:rgba(0,0,0,0.7);
width:200px;
height:auto;
position:relative;
bottom:95px;
left:-300px;
-webkit-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
}
.cp_cssslider .tooltip h1 {
color:#fff;
padding:0 0 0 20px;
}
.cp_cssslider li:hover .tooltip{
left:0px;
}
.cp_cssslider li {
width:300px;
height:200px;
position:absolute;
left:-200px;
list-style:none;
}

/* 4枚ver */
.cp_cssslider li:nth-child(1){
-webkit-animation:cycle1 20s linear infinite;
animation:cycle1 20s linear infinite;
}
.cp_cssslider li:nth-child(2){
-webkit-animation:cycle2 20s linear infinite;
animation:cycle2 20s linear infinite;
}
.cp_cssslider li:nth-child(3){
-webkit-animation:cycle3 20s linear infinite;
animation:cycle3 20s linear infinite;
}
.cp_cssslider li:nth-child(4){
-webkit-animation:cycle4 20s linear infinite;
animation:cycle4 20s linear infinite;
}
/* .cp_cssslider li:nth-child(5){
-webkit-animation:cycle5 20s linear infinite;
animation:cycle5 20s linear infinite;
} */
@keyframes cycle1 {
0%  { left:0px; }
4%  { left:0px; }
16% { left:0px; opacity:1; z-index:0; }
20% { left:200px; opacity:0; z-index:0; }
21% { left:-200px; opacity:0; z-index:-1; }
50% { left:-200px; opacity:0; z-index:-1; }
76% { left:-200px; opacity:0; z-index:0 }
80% { left:0px; opacity:1; z-index:0 }
92% { left:0px; opacity:1; z-index:0 }
96% { left:0px; opacity:1; z-index:0 }
100%{ left:0px; opacity:1; z-index:0 }
}
@keyframes cycle2 {
0%  { left:-200px; opacity:0; }
16% { left:-200px; opacity:0; }
20% { left:0px; opacity:1; }
24% { left:0px; opacity:1; }
36% { left:0px; opacity:1; z-index:0; }
40% { left:200px; opacity:0; z-index:0; }
41% { left:-200px; opacity:0; z-index:-1; }
100%{ left:-200px; opacity:0; z-index:-1; }
}
@keyframes cycle3 {
0%  { left:-200px; opacity:0; }
36% { left:-200px; opacity:0; }
40% { left:0px; opacity:1; }
44% { left:0px; opacity:1; }
56% { left:0px; opacity:1; z-index:0; }
60% { left:200px; opacity:0; z-index:0; }
61% { left:-200px; opacity:0; z-index:-1; }
100%{ left:-200px; opacity:0; z-index:-1; }
}
@keyframes cycle4 {
0%  { left:-200px; opacity:0; }
56% { left:-200px; opacity:0; }
60% { left:0px; opacity:1; }
64% { left:0px; opacity:1; }
76% { left:0px; opacity:1; z-index:0; }
80% { left:200px; opacity:0; z-index:0; }
81% { left:-200px; opacity:0; z-index:-1; }
100%{ left:-200px; opacity:0; z-index:-1; }
}
/* @keyframes cycle5 {
0%  { left:-200px; opacity:0; }
76% { left:-200px; opacity:0; }
80% { left:0px; opacity:1; }
84% { left:0px; opacity:1; }
96% { left:0px; opacity:1; z-index:0; }
100%{ left:200px; opacity:0; z-index:0; }
} */
/* 4枚verここまで */


/* 5枚ver */
/* .cp_cssslider li:nth-child(1){
-webkit-animation:cycle1 25s linear infinite;
animation:cycle1 25s linear infinite;
}
.cp_cssslider li:nth-child(2){
-webkit-animation:cycle2 25s linear infinite;
animation:cycle2 25s linear infinite;
}
.cp_cssslider li:nth-child(3){
-webkit-animation:cycle3 25s linear infinite;
animation:cycle3 25s linear infinite;
}
.cp_cssslider li:nth-child(4){
-webkit-animation:cycle4 25s linear infinite;
animation:cycle4 25s linear infinite;
}
.cp_cssslider li:nth-child(5){
-webkit-animation:cycle5 25s linear infinite;
animation:cycle5 25s linear infinite;
}
@keyframes cycle1 {
0%  { left:0px; }
4%  { left:0px; }
16% { left:0px; opacity:1; z-index:0; }
20% { left:200px; opacity:0; z-index:0; }
21% { left:-200px; opacity:0; z-index:-1; }
50% { left:-200px; opacity:0; z-index:-1; }
92% { left:-200px; opacity:0; z-index:0; }
96% { left:-200px; opacity:0; }
100%{ left:0px; opacity:1; }
}
@keyframes cycle2 {
0%  { left:-200px; opacity:0; }
16% { left:-200px; opacity:0; }
20% { left:0px; opacity:1; }
24% { left:0px; opacity:1; }
36% { left:0px; opacity:1; z-index:0; }
40% { left:200px; opacity:0; z-index:0; }
41% { left:-200px; opacity:0; z-index:-1; }
100%{ left:-200px; opacity:0; z-index:-1; }
}
@keyframes cycle3 {
0%  { left:-200px; opacity:0; }
36% { left:-200px; opacity:0; }
40% { left:0px; opacity:1; }
44% { left:0px; opacity:1; }
56% { left:0px; opacity:1; z-index:0; }
60% { left:200px; opacity:0; z-index:0; }
61% { left:-200px; opacity:0; z-index:-1; }
100%{ left:-200px; opacity:0; z-index:-1; }
}
@keyframes cycle4 {
0%  { left:-200px; opacity:0; }
56% { left:-200px; opacity:0; }
60% { left:0px; opacity:1; }
64% { left:0px; opacity:1; }
76% { left:0px; opacity:1; z-index:0; }
80% { left:200px; opacity:0; z-index:0; }
81% { left:-200px; opacity:0; z-index:-1; }
100%{ left:-200px; opacity:0; z-index:-1; }
}
@keyframes cycle5 {
0%  { left:-200px; opacity:0; }
76% { left:-200px; opacity:0; }
80% { left:0px; opacity:1; }
84% { left:0px; opacity:1; }
96% { left:0px; opacity:1; z-index:0; }
100%{ left:200px; opacity:0; z-index:0; }
} */
/* 5枚verここまで */

/* animation */
@keyframes progressbar {
0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.3; }
18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }
}