/* --- スライダー基本設定 --- */
.slider-area {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.slider {
    position: absolute;
    inset: 0;
}

.slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.8s ease;
}

.slide.active {
    opacity: 1;
}

/* --- PC・SPの切り替え --- */

/* デスクトップ（PC）表示の時 */
@media (min-width: 768px) {
    .pc-slider {
        display: block;
        aspect-ratio: 1366 / 600;
        /* PC用の比率 */
    }

    .sp-slider {
        display: none;
        /* SP用を隠す */
    }
}

/* モバイル（SP）表示の時 */
@media (max-width: 767px) {
    .pc-slider {
        display: none;
        /* PC用を隠す */
    }

    .sp-slider {
        display: block;
        aspect-ratio: 750 / 1042;
        /* SP用の比率（縦長にするのがおすすめ） */
    }
}