@import url("/common/js/splide/splide.min.css");

section.pickup {
    background-color: #313131;
}

#pickup_wrapper {
    position: relative;
    width: 85%;
    /* height: 12.5rem; */
    margin: 3rem auto;
}

#pickup_wrapper_inner {
    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template: auto / 9% auto;
    column-gap: 1rem;
    overflow: hidden;
}

#pickup_wrapper .pickup_title {
    position: relative;
    display: grid;
    grid-template: auto auto / auto;
    width: 100vw;
}

#pickup_wrapper .pickup_title h2 {
    font-family: "Poppins", sans-serif;
    font-weight: 800;
    font-style: normal;
    font-size: 4.2rem;
    color: #00A0DA;
    letter-spacing: .075em;
    line-height: 1;
}

#pickup_wrapper .pickup_title .h2sml {
    display:none;
}

#pickup_wrapper .pickup_title .h2sml_sp {
        color: #fff;
    font-size: 1.8rem;
    letter-spacing: .075em;
    font-weight: 800;
}

/* スライド部分 */
#pickup_wrapper .splide {
    position: relative;
    padding-right: 2.25rem;
}

/* スライド内の画像を親（スライド枠）にフィットさせる */
#pickup_wrapper .splide__slide img {
    width: 100%;
    height: auto;
    /* 縦横比を維持 */
    display: block;
    /* 下の隙間を消す */
    object-fit: cover;
    /* 枠いっぱいに収める場合 */
}

#pickup_wrapper .splide__list a img:hover {
    opacity: 0.8;
}

/* 矢印prev表示しない */
#pickup_wrapper .splide__arrow--prev {
    display: none;
}

/* 矢印next */

/* 既存の矢印（SVG）を消す */
.splide__arrow--next svg {
    display: none;
}

/* 矢印の土台設定 */
.splide__arrow--next {
    position: absolute;
    right: 0;
    width: 4.5rem;
    height: 4.5rem;
    background-color: transparent;
    border: none;
    cursor: pointer;
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* 通常時のアイコン：擬似要素before */
.splide__arrow--next::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/include/pickup/images/icon_next.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transition: opacity 0.4s ease;
    /* ふわっと感の調整 */
    opacity: 1;
}

/* ホバー時のアイコン：擬似要素after */
.splide__arrow--next::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/include/pickup/images/icon_next_on.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transition: opacity 0.4s ease;
    /* ふわっと感の調整 */
    opacity: 0;
    /* 最初は透明 */
}

/* ホバー時の挙動：画像を入れ替える */
.splide__arrow--next:hover::before {
    opacity: 0;
}

.splide__arrow--next:hover::after {
    opacity: 1;
}

/* ボタン全体のホバー感（お好みで） */
.splide__arrow--next:hover {
    opacity: 0.9;
}

.big {
    display: block;
}

.sml {
    display: none;
}

/*===============================================
●style.css 画面の横幅が1500pxまで
===============================================*/

@media screen and (max-width: 1500px) {
    .big {
        display: none;
    }

    .sml {
        display: block;
    }

    #pickup_wrapper {
        position: relative;
        width: 100%;
    }

    #pickup_wrapper_inner {
        grid-template: auto auto / auto;
    }

    #pickup_wrapper .pickup_title {
        display: block;
        text-align: center;
    }

    #pickup_wrapper .pickup_title h2 {
        font-size: 4.2rem;
        letter-spacing: .075em;
        padding-bottom: 2rem;

    }

    #pickup_wrapper .pickup_title .h2sml {
        font-size: 2.2rem;
        letter-spacing: .05em;
        font-weight: 700;
        font-family: "Noto Sans JP";
        color: #fff;
        display:inline-block;
    }

    #pickup_wrapper h2 .h2sml_sp {
        display: none;
    }

    #pickup_wrapper .pickup_title p {
        font-size: 1.4rem;
        letter-spacing: .05em;
        padding-bottom: 1.8rem;
    }

    #pickup_wrapper .splide {
        padding-right: 0;
    }


    .splide__arrow--next {
        position: absolute;
        right: 0;
        width: 4.5rem;
        height: 4.5rem;
        background-color: transparent;
        border: none;
        cursor: pointer;
        opacity: 1;
        transition: opacity 0.3s ease;
    }

}

/*===============================================
●style.css 画面の横幅が1000pxまで
===============================================*/

@media screen and (max-width: 1000px) {
    .splide__arrow--next {
        position: absolute;
        right: 0;
        width: 4.5rem;
        height: 4.5rem;
        background-color: transparent;
        border: none;
        cursor: pointer;
        opacity: 1;
        transition: opacity 0.3s ease;
    }

}

/*===============================================
●style.css 画面の横幅が500pxまで
===============================================*/

@media screen and (max-width: 500px) {
    .splide__arrow--next {
        width: 3rem;
        height: 3rem;
    }

    #pickup_wrapper .pickup_title h2 {
        font-size: 3.6rem;
    }

    #pickup_wrapper .pickup_title .h2sml {
        display: none;
    }

    #pickup_wrapper .pickup_title .h2sml_sp {
        display: block;
        font-size: 1.6rem;
        font-weight: 800;

        letter-spacing: 0.1rem;
        color:#fff;
    }

}