/* ===== 共通スタイル ===== */
.slider-container {
    max-width: 1200px;
    margin: 0 auto 50px;
    height: fit-content;
}

h2 {
    font-size: 18px;
    margin-bottom: 20px;
    color: #333;
}

/* スライダー本体の余白を削除 */
.slick-slider {
    margin: 0;
    padding: 0;
}

/* カードの基本スタイル */
.card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    text-align: center;
}

.card img {
    width: 100%;
    object-fit: cover;
    display: block;
}

.card p {
    padding: 30px 24px;
    font-size: 16px;
    font-weight: bold;
    color: #343A3F;
    margin: 0;
    white-space: normal;
}

/* --- 矢印とドットの共通スタイル --- */
.slick-arrow {
    width: 78px !important;
    height: 78px !important;
    z-index: 10;
    background: none;
}

.slick-arrow::before {
    display: none;
}

.slick-prev {
    background-image: url(/cms/contents/feature/img/prev.png)!important;
    background-position: center!important;
    background-repeat: no-repeat!important;
    background-size: contain!important;
}

.slick-next {
    background-image: url(/cms/contents/feature/img/next.png)!important;
    background-position: center!important;
    background-repeat: no-repeat!important;
    background-size: contain!important;
}

.slick-disabled {
    opacity: 0 !important;
    visibility: hidden !important;
    cursor: default !important;
}

.slick-dots {
    bottom: -30px !important;
}

.slick-dots li button::before {
    font-size: 10px !important;
    color: #ccc !important;
}

.slick-dots li.slick-active button::before {
    color: #333 !important;
}

/* ===== PC向けのスタイル (min-width: 768px) ===== */
@media (min-width: 768px) {
    /* PCでのスライドアイテムのスタイル */
    .slide-item {
        margin-right: 24px; /* アイテム間の間隔を24pxに */
        padding: 0;
    }

    /* slider-1 のアイテム幅と画像高さ */
    .slider-1 .slide-item {
        width: 384px !important;
    }
    .slider-1 .card img {
        height: 202px;
    }

    /* slider-2 のアイテム幅と画像高さ */
    .slider-2 .slide-item {
        width: 332px !important;
    }
    .slider-2 .card img {
        height: 236px;
    }

    /* PCでの矢印の位置 (コンテナの外側) */
    .slick-prev {
        left: -38px !important;
    }
    .slick-next {
        right: -38px !important;
    }
}

/* ===== スマートフォン向けのスタイル (max-width: 767px) - 修正箇所 ===== */
@media (max-width: 767px) {
    .slider-container {
        padding: 0;
        /* centerModeで左右にはみ出る部分を隠す */
        overflow: hidden;
    }

    .slick-slider {
        margin: 0;
    }

    .slide-item {
        /* centerModeではアイテム幅はJSで自動計算されるため、CSSでの固定幅指定は行いません */
        padding: 0 8px; /* スライド間の余白 */
        margin: 0;
    }
    
    /* SPでの画像のアスペクト比を調整 */
    .slider-1 .card img {
        aspect-ratio: 332 / 174.65;
        height: auto; /* aspect-ratioを適用するため高さを自動に */
    }

    .slider-2 .card img {
        aspect-ratio: 332 / 236;
        height: auto; /* aspect-ratioを適用するため高さを自動に */
    }

    /* SPでの矢印の位置 (スライド上) */
    .slick-prev {
        left: 15px !important;
    }
    .slick-next {
        right: 15px !important;
    }

    /* センターモード用のスタイル */
    .slick-slide {
        transition: transform 0.4s, opacity 0.4s;
        opacity: 0.5; /* 非アクティブなスライドは半透明に */
    }
    .slick-center {
        opacity: 1; /* 中央のスライドは不透明に */
        transform: scale(1.03); /* 中央のスライドを少しだけ大きくする */
    }
}