@charset "utf-8";

/* =======================================

	CommonElements

======================================= */
#loopSlide_sp {
display:none;
}


#container_slide {
	padding: 0 30px;
	text-align: center;
}

#carousel {
	margin: 0 auto;
	width: 100%;
	height: 310px;
	text-align: left;
	position: relative;
}

#carousel_prev,
#carousel_next {
	top: 0;
	width: 30px;
	height: 300px;
	background: #000;
	cursor: pointer;
	position: absolute;
}
#carousel_prev {
	left: -30px;
	background:transparent url(../img/prev.png) no-repeat top left;
}
#carousel_next {
	right: -30px;
	background:transparent url(../img/next.png) no-repeat top left;
}

#carousel ul.liquidlist li {
	float: left;
	text-align: center;
	display: inline;
}

#carousel ul.liquidlist li img {
width:96%;
margin:0 auto;
}


/* =======================================
	ClearFixElements
======================================= */
#carousel ul.liquidlist:after {
	content: ".";
	height: 0;
	clear: both;
	display: block;
	visibility: hidden;
}

#carousel ul.liquidlist {
	display: inline-block;
	overflow: hidden;
	margin:0;
	padding:0;
}

#clear {
clear:both;
}

/* =======================================

	CommonElements

======================================= */
@media only screen and (max-width: 800px){
#container_slide {
display:none;
}


#loopSlide_sp {
display: block;
}



}

.loopSlide {
    display: flex;
    width: 90vw;
	margin:0 auto;
    height: 150px;
    overflow: hidden;
	margin-top:-25px;

    img {
        width: auto;
        height: 100%;
		max-width: none;
		
        &:first-child {
            animation: slide1 60s -30s linear infinite;
        }

        &:last-child {
            animation: slide2 60s linear infinite;
        }

    }
}

@keyframes slide1 {
  0% {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes slide2 {
  0% {
    transform: translateX(0);
  }
  to {
    transform: translateX(-200%);
  }
}
@keyframes slide3 {
  0% {
    transform: translateX(0);
  }
  to {
    transform: translateX(-200%);
  }
}
@keyframes slide4 {
  0% {
    transform: translateX(0);
  }
  to {
    transform: translateX(-200%);
  }
}
@keyframes slide5 {
  0% {
    transform: translateX(0);
  }
  to {
    transform: translateX(-200%);
  }
}
@keyframes slide6 {
  0% {
    transform: translateX(0);
  }
  to {
    transform: translateX(-200%);
  }
}