/* ------------------------------------------------------------- */
/* StyleSection _ sec  画像スライド 共通設定 CSS                 */
/* ------------------------------------------------------------- */

/* ======  画像スライド Cont ====== */
.img-slide-cont {
	margin-top: 30px;
}

.slide-common {
/*	width: 100%;*/
	width: 420px;    
	overflow: hidden;
	position: relative;

	margin: 0 auto;
	border-radius:10px;
    
	box-shadow: 0 0 10px 6px #cccccc;
}

.slide-common img {
	width: 100%;
	height: auto;
	vertical-align: top;
}


@media screen and (max-width: 1050px) {
	.slide-common {
		width: 380px;
		padding-right: 20px;
	}
}



/* ------------------------------------------------------------- */
/* StyleSection _ sec01  画像２枚  CSS                           */
/* ------------------------------------------------------------- */

/* スライド設定 */
.css-carousel-slider2 .slide-wrap {
    width: 200%;
    position: absolute;
    display: flex;
    top: 0;
    left: 0;
    z-index: 0;
    animation: css-carousel-slider2 10s infinite;
    animation-delay: 2s;
}
.css-carousel-slider2 .slide-wrap-main {
    width: 100%;
    z-index: 1;
    animation: css-carousel-slider-main2 10s infinite;
    animation-delay: 2s;
}
.css-carousel-slider2 .slide {
    width: 100%;
}

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

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

    90% { transform: translateX(calc(2 / 2 * -100%)); }
    100% { transform: translateX(calc(2 / 2 * -100%)); }
}

@keyframes css-carousel-slider-main2 {
    0% { transform: translateX(100%); }
    50% { transform: translateX(100%); }
    90% { transform: translateX(0%);}
}

/* ------------------------------------------------------------- */
/* StyleSection _ sec01  画像３枚  CSS                           */
/* ------------------------------------------------------------- */

/* スライド設定 */
.css-carousel-slider3 .slide-wrap {
    width: 300%;
    position: absolute;
    display: flex;
    top: 0;
    left: 0;
    z-index: 0;
    animation: css-carousel-slider3 15s infinite;
    animation-delay: 2s;
}
.css-carousel-slider3 .slide-wrap-main {
    width: 100%;
    z-index: 1;
    animation: css-carousel-slider-main3 15s infinite;
    animation-delay: 2s;
}
.css-carousel-slider3 .slide {
    width: 100%;
}

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

    27.3% { transform: translateX(calc(1 / 3 * -100%)); }
    33.3% { transform: translateX(calc(1 / 3 * -100%)); }

    60.6% { transform: translateX(calc(2 / 3 * -100%)); }
    66.6% { transform: translateX(calc(2 / 3 * -100%)); }

    94% { transform: translateX(calc(3 / 3 * -100%)); }
    100% { transform: translateX(calc(3 / 3 * -100%)); }
}

@keyframes css-carousel-slider-main3 {
    0% { transform: translateX(100%); }
    66.6% { transform: translateX(100%); }
    94% { transform: translateX(0%);}
}


/* ------------------------------------------------------------- */
/* StyleSection _ sec01  画像４枚  CSS                           */
/* ------------------------------------------------------------- */

/* スライド設定 */
.css-carousel-slider4 .slide-wrap {
    width: 400%;
    position: absolute;
    display: flex;
    top: 0;
    left: 0;
    z-index: 0;
    animation: css-carousel-slider4 20s infinite;
    animation-delay: 2s;
}
.css-carousel-slider4 .slide-wrap-main {
    width: 100%;
    z-index: 1;
    animation: css-carousel-slider-main4 20s infinite;
    animation-delay: 2s;
}
.css-carousel-slider4 .slide {
    width: 100%;
}

/* スライダーアニメーションの設定 */
@keyframes css-carousel-slider4 {
    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-main4 {
    0% { transform: translateX(100%); }
    75% { transform: translateX(100%); }
    95% { transform: translateX(0%);}
}



/* ------------------------------------------------------------- */
/* StyleSection _ sec01  画像５枚  CSS                           */
/* ------------------------------------------------------------- */

/* スライド設定 */
.css-carousel-slider5 .slide-wrap {
    width: 500%;
    position: absolute;
    display: flex;
    top: 0;
    left: 0;
    z-index: 0;
    animation: css-carousel-slider5 25s infinite;
    animation-delay: 2s;
}
.css-carousel-slider5 .slide-wrap-main {
    width: 100%;
    z-index: 1;
    animation: css-carousel-slider-main5 25s infinite;
    animation-delay: 2s;
}
.css-carousel-slider5 .slide {
    width: 100%;
}

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

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

    36% { transform: translateX(calc(2 / 5 * -100%)); }
    40% { transform: translateX(calc(2 / 5 * -100%)); }

    56% { transform: translateX(calc(3 / 5 * -100%)); }
    60% { transform: translateX(calc(3 / 5 * -100%)); }

    76% { transform: translateX(calc(4 / 5 * -100%)); }
    80% { transform: translateX(calc(4 / 5 * -100%)); }

    96% { transform: translateX(calc(5 / 5 * -100%)); }
    100% { transform: translateX(calc(5 / 5 * -100%)); }
}

@keyframes css-carousel-slider-main5 {
    0% { transform: translateX(100%); }
    80% { transform: translateX(100%); }
    96% { transform: translateX(0%);}
}




/* ------------------------------------------------------------- */
/* StyleSection _ sec01  画像６枚  CSS                           */
/* ------------------------------------------------------------- */

/* スライド設定 */
.css-carousel-slider6 .slide-wrap {
    width: 600%;
    position: absolute;
    display: flex;
    top: 0;
    left: 0;
    z-index: 0;
    animation: css-carousel-slider6 30s infinite;
    animation-delay: 2s;
}
.css-carousel-slider6 .slide-wrap-main {
    width: 100%;
    z-index: 1;
    animation: css-carousel-slider-main6 30s infinite;
    animation-delay: 2s;
}
.css-carousel-slider6 .slide {
    width: 100%;
}

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

    13.6% { transform: translateX(calc(1 / 6 * -100%)); }
    16.6% { transform: translateX(calc(1 / 6 * -100%)); }

    30.3% { transform: translateX(calc(2 / 6 * -100%)); }
    33.3% { transform: translateX(calc(2 / 6 * -100%)); }

    46.9% { transform: translateX(calc(3 / 6 * -100%)); }
    49.9% { transform: translateX(calc(3 / 6 * -100%)); }

    63.6% { transform: translateX(calc(4 / 6 * -100%)); }
    66.6% { transform: translateX(calc(4 / 6 * -100%)); }

    80.3% { transform: translateX(calc(5 / 6 * -100%)); }
    83.3% { transform: translateX(calc(5 / 6 * -100%)); }

    97% { transform: translateX(calc(6 / 6 * -100%)); }
    100% { transform: translateX(calc(6 / 6 * -100%)); }
}

@keyframes css-carousel-slider-main6 {
    0% { transform: translateX(100%); }
    83.3% { transform: translateX(100%); }
    97% { transform: translateX(0%);}
}