@charset "UTF-8";

/*------------------------------------
carousel
------------------------------------*/
/* 全体設定 */

.css-carousel-overwrap{
	display: block;
	margin: auto;
	max-width: 360px;
}
.css-carousel-slider {
	width: 100%;
	
	overflow: hidden;
	position: relative;
}
.css-carousel-slider img {
	width: 100%;
	height: auto;
	vertical-align: top;
}


.css-carousel-slider .slide-wrap {
	width: 400%; 
	position: absolute;
	display: flex;
	top: 0;
	left: 0;
	z-index: 0;
	animation: css-carousel-slider 8s infinite; 
	animation-delay: 1s; 
}
.css-carousel-slider .slide-wrap-main {
	width: 100%;
	z-index: 1;
	animation: css-carousel-slider-main 8s infinite; 
	animation-delay: 1s; 
}
.css-carousel-slider .slide {
	width: 100%;
}



/* スライダーアニメーションの設定(*5) */
@keyframes css-carousel-slider {
    0% { transform: translateX(0); }

    20% { transform: translateX(calc(1 / 4 * -100%)); }
    25% { transform: translateX(calc(1 / 4 * -100%)); }

    45% { transform: translateX(calc(2 / 4 * -100%)); }
    50% { transform: translateX(calc(2 / 4 * -100%)); }

    70% { transform: translateX(calc(3 / 4 * -100%)); }
    75% { transform: translateX(calc(3 / 4 * -100%)); }

    95% { transform: translateX(calc(4 / 4 * -100%)); }
    100% { transform: translateX(calc(4 / 4 * -100%)); }
}

@keyframes css-carousel-slider-main {
    0% { transform: translateX(100%); }
    75% { transform: translateX(100%); }
    95% { transform: translateX(0%);}
}