/* HOME のスライダーだけ */

/* 共通の ul リセット（必要な範囲） */
*,
body,
ul {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}

/* 外枠 */
#home .slide-wrapper {
    width: 100%;
    height: 600px;
    position: relative;
    overflow: hidden;
}

#home .slide-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    background: #000;
}

/* スライド中身 */
#home .slide {
    width: 400%;
    height: 100%;
    display: flex;
    transition: transform .3s;
}

#home .slide>div {
    width: 25%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#home .slide1 {
    transform: translateX(0);
}

#home .slide2 {
    transform: translateX(-25%);
}

#home .slide3 {
    transform: translateX(-50%);
}

#home .slide4 {
    transform: translateX(-75%);
}

/* arrows */
#home .prev,
#home .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    z-index: 2147483647;
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
}

#home .prev::before,
#home .next::before {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .4));
}

#home .prev {
    left: 8px;
}

#home .prev::before {
    transform: rotate(-135deg);
}

#home .next {
    right: 8px;
}

#home .next::before {
    transform: rotate(45deg);
}

/* dots */
#home .indicator {
    width: 100%;
    position: absolute;
    bottom: 16px;
    display: flex;
    column-gap: 14px;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

#home .indicator li {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #000;
    cursor: pointer;
    opacity: .75;
}

#home .indicator li.active {
    background: #000;
    opacity: 1;
}

/* PC センター寄せ＆黒地 */
@media (min-width:961px) {
    #home .slide-wrapper {
        max-width: var(--slider-max);
        margin: 0 auto;
        background: transparent;
    }

    #home .slide,
    #home .slide>div {
        background: #000;
    }
}

/* SP 高さ調整 */
@media (max-width:768px) {
    #home .slide-wrapper {
        height: 300px;
    }

    #home .slide {
        height: 100%;
        transition: transform .3s ease;
        will-change: transform;
    }

    #home .slide>div {
        height: auto;
    }

    #home .slide>div img {
        width: 100%;
        height: auto;
        object-fit: contain;
        object-position: center;
        display: block;
    }
}