@charset "utf-8";
/*----------------------------*/
/* 限定販売スライダー */
/*----------------------------*/
/*----------------------------*/
/* 基礎設定 */
/*----------------------------*/
.limitedEditionSlider.swiper-container{
    width: 100%;
    overflow: hidden;
    z-index: 0;
    padding-right: 40px;/* アイテム最後尾の右側に余白をつける */
    margin-top: 60px;
    position: relative;
}
.limitedEditionSlider .swiper-wrapper{
    width: 100%;
    height: 100%;
    padding-bottom: 40px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
/*---------*/
/* スライド */
.limitedEditionSlider .swiper-slide{
    width: 224px;
    height: auto;
    border-radius: 16px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    background: var(--color-white);
    -webkit-box-shadow: var(--rich-shadow-0);
            box-shadow: var(--rich-shadow-0);
    position: relative;
}
.limitedEditionSlider .photo{
    width: 100%;
}
.limitedEditionSlider .photo > img{
    display: block;
    border-top-right-radius: 16px;
    border-top-left-radius: 16px;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}
/* テキスト */
.limitedEditionSlider .caption{
    padding: 16px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}
.limitedEditionSlider .caption a{
    color: var(--colo-txt);
}
.limitedEditionSlider .caption a::before{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    -webkit-transition: .2s ease;
    transition: .2s ease;
}
.limitedEditionSlider .caption span{
    display: block;
}
.limitedEditionSlider .caption .price{
    font-size: var(--txt-large);
    font-weight: var(--bold);
}
/* hover設定 */
.limitedEditionSlider .caption a:hover::before{
    background: rgba(255, 255, 255, 0.3);
}
/*---------*/
/* 矢印 */
/* ▽基礎設定をリセット▽ */
.limitedEditionSlider .swiper-button-prev:after,
.limitedEditionSlider .swiper-button-next:after {
    font-family: swiper-icons;
    font-size: var(--swiper-navigation-size);
    text-transform: none !important;
    letter-spacing: 0;
    text-transform: none;
    font-variant: initial;
    display: none;
}
.limitedEditionSlider .swiper-button-prev:after,
.limitedEditionSlider .swiper-container-rtl .swiper-button-next:after {
    content: "prev";
    display: none;
}

.limitedEditionSlider .swiper-button-next:after,
.limitedEditionSlider .swiper-container-rtl .swiper-button-prev:after {
    content: "next";
    display: none;
}
/* ▲基礎設定をリセット▲ */
.limitedEditionSlider .swiper-button-next,
.limitedEditionSlider .swiper-button-prev
{
    width: 48px;
    height: 48px;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    -webkit-transition: .2s ease;
    transition: .2s ease;
}
.limitedEditionSlider .swiper-button-next > svg,
.limitedEditionSlider .swiper-button-prev > svg
{
    display: block;
    width: 100%;
    fill: var(--color-main);
    -webkit-transition: .2s ease;
    transition: .2s ease;
}
.limitedEditionSlider .swiper-button-prev > svg{
    -webkit-transform: scale(-1,1);
            transform: scale(-1,1);
}
/* 表示/非表示設定 */
.limitedEditionSlider .swiper-button-next.disable,
.limitedEditionSlider .swiper-button-prev.disable
{
    opacity: 0;
    visibility: hidden;
    z-index: -9;
}
/* hover設定 */
.limitedEditionSlider .swiper-button-next:hover > svg,
.limitedEditionSlider .swiper-button-prev:hover > svg
{
    opacity: 0.7;
}
.limitedEditionSlider .swiper-button-next:focus,
.limitedEditionSlider .swiper-button-prev:focus
{
    border: none;
    outline: none;
}
/*---------*/
/* スクロールバー */
.limitedEditionSlider .scrollBar__wrapper{
    width: 80%;
    margin: 0 auto;
    position: absolute;
    bottom: 16px;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
}
.limitedEditionSlider .swiper-scrollbar{
    position: relative;
    margin-top: 16px;
    background: transparent;
}
.limitedEditionSlider .swiper-scrollbar::before{
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    margin: auto;
    height: 4px;
    background: rgba(27,27,27,0);
}
.limitedEditionSlider .drag{
    height: 4px;
    position: relative;
}
/* scriptのdragSizeと合わせる */
.limitedEditionSlider .drag::before{
    content: "";
    width: 200px;
    height: 4px;
    border-radius: calc(4px / 2);
    background: rgba(27,27,27,0.5);
    margin: auto;
    cursor: -webkit-grab;
    cursor: grab;

    position: absolute;
    top: 0;
    left: 0;
}


/*------------------*/
/*タブレット*/
/*------------------*/
@media(max-width:959px){
    /* 基礎設定 */
    .limitedEditionSlider.swiper-container{
        margin-top: 24px;
    }
    .limitedEditionSlider .swiper-wrapper{
        padding-bottom: 24px;
    }
    /* テキスト */
    .limitedEditionSlider .caption{
        padding: 16px 2vw;
    }
    /* hover設定 */
    .limitedEditionSlider .caption a:hover::before{
        background: rgba(255, 255, 255, 0.5);
    }
    /* hover設定 */
    .limitedEditionSlider .caption a:hover::before{
        background: transparent;
    }
    .limitedEditionSlider .caption a:active::before{
        background: rgba(255, 255, 255, 0.5);
    }
    /* 矢印 */
    .swiper-button-next,
    .swiper-button-prev
    {
        display: none;
    }
    /* スクロールバー */
    .limitedEditionSlider .scrollBar__wrapper{
        bottom: 0;
    }
    .limitedEditionSlider .drag::before{
        width: 100px;
    }
}/* タブレットラスト */


/*------------------*/
/*スマホ*/
/*------------------*/
@media(max-width:559px){
    /*---------*/
    /* スライド */
    .limitedEditionSlider .swiper-slide{
        border-radius: 8px;
    }
    .limitedEditionSlider .photo > img{
        border-top-right-radius: 8px;
        border-top-left-radius: 8px;
    }
    /* テキスト */
    .limitedEditionSlider .caption{
        padding: 8px 2vw;
    }
    .limitedEditionSlider .caption a{
        font-size: var(--txt-small);
        line-height: 1.4;
    }
    .limitedEditionSlider .caption .price{
        font-size: var(--txt-medium);
        line-height: 1.7;
    }
    /* スクロール */
    .limitedEditionSlider .drag::before{
        width: 64px;
    }
}/* スマホラスト */