/*------------ slider style set ------------*/
/* 全体設定 */
.css-carousel-slider {
    width: 100%;
    height: auto;
    overflow: hidden;
    position: relative;
}
.css-carousel-slider img {
    width: 100%;
    height: auto;
    vertical-align: top;
}

/* スライド設定 */
.css-carousel-slider .slide-wrap {
    width: 600%; /* 画像の合計数*100%を設定(*2) */
    position: absolute;
    display: flex;
    top: 0;
    left: 0;
    z-index: 0;
    animation: css-carousel-slider 40s infinite; /* スライダーアニメーション全体の時間(*3) */
    animation-delay: 2s; /* スライダーが始まるまでの時間(*4) */
}
.css-carousel-slider .slide-wrap-main {
    width: 100%;
    z-index: 1;
    animation: css-carousel-slider-main 40s infinite; /* (*3)と同じ内容を設定 */
    animation-delay: 2s; /* (*4)と同じ内容を設定 */
}
.css-carousel-slider .slide {
    width: 100%;
}

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

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

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

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

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

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

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

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