/*================================================
 *  スライド
 ================================================*/
@import url('https://fonts.googleapis.com/css?family=Noto+Sans');

*, *:before, *:after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

.cp_cssslider {
height:436px;
width:240px;
overflow:visible;
position:relative;
}
.cp_cssslider .mask {
overflow:hidden;
height:436px;/* ボーダー分を差し引く */
}
.cp_cssslider ul{
margin:0;
padding:0;
position:relative;
}
/* tooltip */
.cp_cssslider .tooltip {
background:rgba(0,0,0,0.7);
width:240px;
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 li {
width:320px;
height:436px;
position:absolute;
top:-200px;
list-style:none;
}
.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;
}

@keyframes cycle1 {
0%  { top:0px; }
4%  { top:0px; }
16% { top:0px; opacity:1; z-index:0; }
20% { top:200px; opacity:0; z-index:0; }
21% { top:-200px; opacity:0; z-index:-1; }
50% { top:-200px; opacity:0; z-index:-1; }
92% { top:-200px; opacity:0; z-index:0; }
96% { top:-200px; opacity:0; }
100%{ top:0px; opacity:1; }
}
@keyframes cycle2 {
0%  { top:-200px; opacity:0; }
16% { top:-200px; opacity:0; }
20% { top:0px; opacity:1; }
24% { top:0px; opacity:1; }
36% { top:0px; opacity:1; z-index:0; }
40% { top:200px; opacity:0; z-index:0; }
41% { top:-200px; opacity:0; z-index:-1; }
100%{ top:-200px; opacity:0; z-index:-1; }
}
@keyframes cycle3 {
0%  { top:-200px; opacity:0; }
36% { top:-200px; opacity:0; }
40% { top:0px; opacity:1; }
44% { top:0px; opacity:1; }
56% { top:0px; opacity:1; z-index:0; }
60% { top:200px; opacity:0; z-index:0; }
61% { top:-200px; opacity:0; z-index:-1; }
100%{ top:-200px; opacity:0; z-index:-1; }
}
@keyframes cycle4 {
0%  { top:-200px; opacity:0; }
56% { top:-200px; opacity:0; }
60% { top:0px; opacity:1; }
64% { top:0px; opacity:1; }
76% { top:0px; opacity:1; z-index:0; }
80% { top:0px; opacity:1; }
84% { top:0px; opacity:1; }
96% { top:0px; opacity:1; z-index:0; }
100%{ top:200px; opacity:0; z-index:0; }
}
/* slide */
.slid_wrapper{
	width: 960px;
	text-align: center;
	margin: 0 auto;
}
.cp_cssslider{
	width: calc( 100% / 3);
	float: left;
}
.top_bk{
	width: 100%;
	text-align: center;
	margin: 0 auto;
}
.top_bk img{
	margin-top: -200px;
}