@charset "UTF-8";


/* .slider-arrow,.slider-radio-wrap {
    display: block;
} */

/* 変数指定 */
:root {
    --margin-bottom: min(4cqw, 1.5rem);
    --margin-bottom-min: min(2cqw, .8rem);
    --gap: min(3.6cqw, 1.6rem);
    
    --active-color: #0072ff;
    --aside-width: 22%;
    --aside-max-width: 350px;
}

#auto_template {

    .auto_template__inner {
        background-color: #FFF;
    }

}

#auto_template a:hover {
    opacity: .9 !important;
}

/* #auto_template .row:not(.auto_template__top, .banner-carousel) {
    width: 90%;
} */

/* TOPに戻るボタン */
#auto_template .top-back {
    bottom: 1em;
}

/* 画像-カルーセル */
#auto_template .row.banner-carousel {
    width: 100%;

    /* 左の余白削除 */
    margin: 0 auto;

    .carousel-inner {
        width: 100%;
        display: flex;
        justify-content: start;
        gap: 1.33%;
        position: relative;
        box-sizing: border-box;
        padding: 0 40px;
        overflow: visible;

        .carousel-item {
            width: 24%;
            min-width: auto;
            display: none;
            flex-direction: column;
            margin: 0 !important;

            &:nth-last-child(1) {
                margin-right: 0;
            }
        }

        /* アイテム数が少ない場合の処理 */
        &.item-width-max {
            padding: 0;
            margin-bottom: var(--margin-bottom);
        }
    }

    .carousel-inner.itemcount-1-4 + .slider-radio-wrap {
        display: none;
    }

    .slider-radio-wrap {
        width: 100%;
        display: flex;
        justify-content: center;
        gap: 1em;
        /* margin-top: 2%; */

        & input[type="radio"] {
            display: none;
        }

        .radio-label{
            display: block;
            margin-bottom: var(--margin-bottom-min);
            width: 8px;
            height: 8px;
            background-color: #c5c5c5;
            border-radius: 100vw;
            &:has(:checked) {
                background-color: #222;
            }
        }
    }
    
    .slider-arrow {
        position: absolute;
        top: 50%;  
        transform: translateY(-50%);
        width: 28px;
        height: 28px;
        background: #222;
        display: none;
        justify-content: center;
        align-items: center;
        border-radius: 100vw;
        z-index: 1;
        animation: none !important;

        /* & i {
            font-size: 13px;
            margin-left: .2em;
            color: #fff;
            font-weight: bold;
        } */
        .arrow {
            position: relative;
            width: 9px;
            height: 9px;
        }
        
        .arrow::before,
        .arrow::after {
            content: "";
            position: absolute;
            top: calc(50% - 2px);
            right: 0;
            width: 9px;
            height: 3px;
            border-radius: 9999px;
            background-color: #ffffff;
            transform-origin: calc(100% - 1px) 50%;
        }
        
        .arrow::before {
          transform: rotate(45deg);
        }
        
        .arrow::after {
          transform: rotate(-45deg);
        }
    }
    .slider-arrow.prev-label {
        left: 7px;

        .arrow {
            transform: rotate(-180deg);
            margin-right: -1px;
        }
    }
    .slider-arrow.next-label {
        right: 7px;
    }

}

/* 画像-正方形カルーセル */
#auto_template .row.banner-carousel__center {

    /* 表示処理 */
    &:has(.radio-label:nth-of-type(1) .radio-slider:checked) .carousel-item:nth-of-type(n+1):nth-of-type(-n+4),
    &:has(.radio-label:nth-of-type(1) .radio-slider:checked) .slider-arrow.slider-1 {
        display: flex;
        z-index: 2;
        animation: fadein 0.6s;
    }
    &:has(.radio-label:nth-of-type(2) .radio-slider:checked) .carousel-item:nth-of-type(n+5):nth-of-type(-n+8),
    &:has(.radio-label:nth-of-type(2) .radio-slider:checked) .slider-arrow.slider-2 {
        display: flex;
        z-index: 2;
        animation: fadein 0.6s;
    }
    &:has(.radio-label:nth-of-type(3) .radio-slider:checked) .carousel-item:nth-of-type(n+9):nth-of-type(-n+12),
    &:has(.radio-label:nth-of-type(3) .radio-slider:checked) .slider-arrow.slider-3 {
        display: flex;
        z-index: 2;
        animation: fadein 0.6s;
    }

}

/* 画像-長方形カルーセル */
#auto_template .row.banner-carousel__category {
    .carousel-inner {

        .carousel-item {
            width: 100%;
        }

    }

    /* 表示処理 */
    &:has(.radio-label:nth-of-type(1) .radio-slider:checked) .carousel-item:nth-of-type(1),
    &:has(.radio-label:nth-of-type(1) .radio-slider:checked) .slider-arrow.slider-1,
    &:has(.radio-label:nth-of-type(2) .radio-slider:checked) .carousel-item:nth-of-type(2),
    &:has(.radio-label:nth-of-type(2) .radio-slider:checked) .slider-arrow.slider-2,
    &:has(.radio-label:nth-of-type(3) .radio-slider:checked) .carousel-item:nth-of-type(3),
    &:has(.radio-label:nth-of-type(3) .radio-slider:checked) .slider-arrow.slider-3,
    &:has(.radio-label:nth-of-type(4) .radio-slider:checked) .carousel-item:nth-of-type(4),
    &:has(.radio-label:nth-of-type(4) .radio-slider:checked) .slider-arrow.slider-4,
    &:has(.radio-label:nth-of-type(5) .radio-slider:checked) .carousel-item:nth-of-type(5),
    &:has(.radio-label:nth-of-type(5) .radio-slider:checked) .slider-arrow.slider-5,
    &:has(.radio-label:nth-of-type(6) .radio-slider:checked) .carousel-item:nth-of-type(6),
    &:has(.radio-label:nth-of-type(6) .radio-slider:checked) .slider-arrow.slider-6,
    &:has(.radio-label:nth-of-type(7) .radio-slider:checked) .carousel-item:nth-of-type(7),
    &:has(.radio-label:nth-of-type(7) .radio-slider:checked) .slider-arrow.slider-7,
    &:has(.radio-label:nth-of-type(8) .radio-slider:checked) .carousel-item:nth-of-type(8),
    &:has(.radio-label:nth-of-type(8) .radio-slider:checked) .slider-arrow.slider-8,
    &:has(.radio-label:nth-of-type(9) .radio-slider:checked) .carousel-item:nth-of-type(9),
    &:has(.radio-label:nth-of-type(9) .radio-slider:checked) .slider-arrow.slider-9,
    &:has(.radio-label:nth-of-type(10) .radio-slider:checked) .carousel-item:nth-of-type(10),
    &:has(.radio-label:nth-of-type(10) .radio-slider:checked) .slider-arrow.slider-10,
    &:has(.radio-label:nth-of-type(11) .radio-slider:checked) .carousel-item:nth-of-type(11),
    &:has(.radio-label:nth-of-type(11) .radio-slider:checked) .slider-arrow.slider-11,
    &:has(.radio-label:nth-of-type(12) .radio-slider:checked) .carousel-item:nth-of-type(12),
    &:has(.radio-label:nth-of-type(12) .radio-slider:checked) .slider-arrow.slider-12 {
        display: flex;
        z-index: 2;
        animation: fadein 0.6s;
    }
}

/* 商品リスト */
#auto_template .item-wrap-var-2 {
    /* column-gap: 5%;

    .item {
        width: 30%;
    } */

    /* pc 3カラム */
    &.pcColumn-3 {
        column-gap: 3%;
        .item{
            width: calc((100% - 6%) / 3);
    
            /* .normal-price {
                display: none;
            } */
        }
    }

    /* pc 2カラム */
    &.pcColumn-2 {
        column-gap: 4%;
        .item{
            width: 48%;
    
            .price-wrap {
                display: inline-flex;
            }
            .item-promo {
                display: inline-block;
            }
        }
    }

    /* pc 1カラム */
    &.pcColumn-1 {
        /* column-gap: 4%; */
        .item{
            width: 100%;
    
            .price-wrap {
                display: inline-flex;
            }
            .item-promo {
                display: inline-block;
            }
        }
    }
}

/* 特集一覧 コンテンツ幅調整 */
#auto_template .article-wrap {
    gap: 3.5%;

    .article {
        /* width: 31%; */
        &:nth-of-type(3) {
            /* margin-top: 0; */
        }
    }
}

/* 商品一覧(swiper) 切替 */
#auto_template .item-wrap.swiper {
    overflow: hidden;
    .swiper-wrapper {
        width: 100%;
    }
    .item {
        width: 18%;

        &:nth-of-type(1) {
            margin-left: 0;
        }
        &:nth-last-of-type(1) {
            margin-right: 0;
        }
    }
}

/* 商品一覧(スライダー) */
#auto_template .item-wrap.slider {
    position: relative;

    .slider-inner {
        width: 100%;
        display: flex;
        justify-content: start;
        gap: 4%;
        position: relative;
        box-sizing: border-box;
        padding: 0 5%;
        /* margin-bottom: 3%; */
        overflow: visible;

        .item {
            width: 22%;
            min-width: auto;
            display: none;
            flex-direction: column;
            margin: 0 !important;
        }
    }

    .slider-radio-wrap {
        width: 100%;
        display: flex;
        justify-content: center;
        gap: 1em;

        & input[type="radio"] {
            display: none;
        }

        .radio-label{
            display: block;
            width: 10px;
            height: 10px;
            background-color: #ffffff;
            border-radius: 100vw;
            border: 1px solid #dbdbdb;
            &:has(:checked) {
                background-color: #afafaf;
            }
        }
    }
    
    .slider-arrow {
        position: absolute;
        top: 50%;  
        transform: translateY(-50%);
        width: 30px;
        height: 30px;
        background: #d1d1d1;
        border: 1px solid #dbdbdb;
        display:  flex;
        justify-content: center;
        align-items: center;
        border-radius: 100vw;
        pointer-events: none;
        z-index: 1;

        & i {
            font-size: 1rem;
            margin-left: .2em;
            color: #fff;
            font-weight: bold;
        }
    }
    .slider-arrow.prev-label {
        left: 1%;
        & i {
            transform: rotate(-180deg);
            margin-right: .3em;
        }
    }
    .slider-arrow.next-label {
        right: 1%;
    }

    &:has(.radio-label:nth-of-type(1) .radio-slider:checked) .item:nth-of-type(n+1):nth-of-type(-n+4) {
        display: flex;
    }
    &:has(.radio-label:nth-of-type(1) .radio-slider:checked) .slider-arrow.slider-1 {
        pointer-events: all;
        background: #fff;
        border: 1px solid #d1d1d1;
        z-index: 2;
        & i {
            color: #d1d1d1;
        }
    }
    
    
    &:has(.radio-label:nth-of-type(2) .radio-slider:checked) .item:nth-of-type(n+5):nth-of-type(-n+8) {
        display: flex;
    }
    &:has(.radio-label:nth-of-type(2) .radio-slider:checked) .slider-arrow.slider-2 {
        pointer-events: all;
        background: #fff;
        border: 1px solid #d1d1d1;
        z-index: 2;
        & i {
            color: #d1d1d1;
        }
    }
    
    
    &:has(.radio-label:nth-of-type(3) .radio-slider:checked) .item:nth-of-type(n+9):nth-of-type(-n+12) {
        display: flex;
    }
    &:has(.radio-label:nth-of-type(3) .radio-slider:checked) .slider-arrow.slider-3 {
        pointer-events: all;
        background: #fff;
        border: 1px solid #d1d1d1;
        z-index: 2;
        & i {
            color: #d1d1d1;
        }
    }

}