@charset "utf-8";

/*

splide.ini.css
Version: 2022.09.21

*/

/* --------------------------------------------------------
/* splide-visual.css
/* splide-fade.css
/* splide-carousel.css
-------------------------------------------------------- */


/* splide-visual.css
-------------------------------------------------------- */
.splide-visual {
    margin: 0 auto;
    width: 100%;
}
.splide-visual .splide__slide img {
    width: 100%;
}
.splide-visual .splide__arrow {
    width: 4em;
    height: 4em;
    background: #fff;
}

/* pc（1200px以上の場合に適用） */
@media (min-width: 1200px) {
    .splide-visual .splide-visual-list-item .img img {
        image-rendering: pixelated; /* ピクセルぼやけを解消 */
    }
}


/* splide-fade.css
-------------------------------------------------------- */
.splide-fade {
    margin: 0 auto;
    width: 100%;
}
.splide-fade .splide__slide img {
    width: 100%;
}
.splide-fade .splide__arrow {
    width: 4em;
    height: 4em;
    background: #fff;
}

/* .splide-fade-scroll */
.splide-fade-scroll {
    position: absolute;
    bottom: 30px;
    left: 50%;
    z-index: 2;
    display: inline-block;
    padding-top: 60px;
    color: #fff;
    letter-spacing: .1em;
    font-size: 1.2rem;
    font-family: "Noto Sans JP", sans-serif;
    transition: opacity .3s;
    transform: translateX(-50%);
}
.splide-fade-scroll:hover {
    color: #fff;
    text-decoration: none;
}
.splide-fade-scroll span {
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -15px;
    width: 30px;
    height: 50px;
    border: 2px solid #fff;
    border-radius: 50px;
}
.splide-fade-scroll span::before {
    position: absolute;
    top: 10px;
    left: 50%;
    display: block;
    margin-left: -3px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #fff;
    content: "";
    animation: splide-fade-scroll 2s infinite;
}
@keyframes splide-fade-scroll {
    0% {
        opacity: 0;
        transform: translate(0, 0);
    }
    40% {
        opacity: 1;
    }
    80% {
        opacity: 0;
        transform: translate(0, 20px);
    }
    100% {
        opacity: 0;
    }
}

/* pc（1200px以上の場合に適用） */
@media (min-width: 1200px) {
    /* .splide-fade .splide-fade-list-item .img img {
        image-rendering: pixelated;
    } */
    /* #splide-fade-scroll */
    /* #splide-fade-scroll {
        margin-top: -94px;
        padding-top: 94px;
    } */
}


/* splide-carousel.css
-------------------------------------------------------- */
.splide-carousel {
    margin: 0 auto;
    padding: 100px 14px;
    max-width: 1520px;
    width: 100%;
}
.splide-carousel .splide__slide img {
    width: 100%;
}
.splide-carousel .splide__arrow {
    width: 3em;
    height: 3em;
    border-radius: 0;
    background: #fff;
}
.splide-carousel .splide__arrow--prev {
    left: 0;
}
.splide-carousel .splide__arrow--next {
    right: 0;
}

/* pc（1200px以上の場合に適用） */
@media (min-width: 1200px) {
    .splide-carousel {
        padding: 100px 20px;
    }
    /* .splide-carousel .splide-carousel-list-item .img img {
        image-rendering: pixelated;
    } */
}