/* config var */
:root {
    --slider-width: 100%;       /* スライダーの横幅 */
    --slider-height: 340px;     /* スライダーの高さ */
    --slider-total-time: 20s;   /* スライダーの一周の間隔 */
    --slider-total-page: 3;     /* スライダーの枚数 */
    --slider-per-seconds: calc(var(--slider-total-time) / var(--slider-total-page));
}
.css-slider {
    width: var(--slider-width);
    height: var(--slider-height);
}
.slider-wrapper,.slider-wrapper ul,
.slider-wrapper li,.slider-wrapper img {
    width: 100%;
    height: 100%;
}
.slider-wrapper ul {
    position: relative;
}
.slider-wrapper li {
    position: absolute;
    top: 0;
}
.slider-wrapper img {
    object-fit: cover;
}
.css-slider ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

@keyframes slide {
    0% {
        opacity: 0;
    }
    95% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
    95% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
.slider-wrapper img {
    opacity: 0;
    -webkit-animation: slide var(--slider-total-time) ease-in-out infinite normal forwards;
    animation: slide var(--slider-total-time) ease-in-out infinite normal forwards;
}
.slider-wrapper .img01 {
    animation-delay: calc(var(--slider-per-seconds) * 0)
}
.slider-wrapper .img02 {
    animation-delay: calc(var(--slider-per-seconds) * -1);
}
.slider-wrapper .img03 {
    animation-delay: calc(var(--slider-per-seconds) * -2);
}