/* 表示管理用 start*/
.itemsContainerButtons--refinementCategory {
    visibility: hidden;
    height: 0;
}

@media only screen and (max-width: 767px) {

    .js-dlpo-genreBtn-a .itemsContainerButtons--refinementCategory,
    .js-dlpo-genreBtn-b .itemsContainerButtons--refinementCategory {
        visibility: visible;
        height: auto;
    }
}

/* 表示管理用 end*/


@media only screen and (max-width: 767px) {

    /* Aパターン start*/
    .js-dlpo-genreBtn-a .itemsContainerButtons--refinementCategory .itemsContainerButtons__inner {
        position: relative;
        padding: 0;
    }

    .js-dlpo-genreBtn-a .itemsContainerButtons--refinementCategory .itemsContainerButtons__inner::before {
        content: "";
        position: absolute;
        top: 50%;
        right: 0;
        width: 38px;
        height: 100%;
        transform: translateY(-50%);
        background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, white 53%, white 100%);
        background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 53%, white 100%);
        clip-path: inset(0 0 6px 0);
        pointer-events: none;
    }

    .js-dlpo-genreBtn-a .itemsContainerButtons--refinementCategory .itemsContainerButtons__list {
        border-bottom: solid 1px #EBEBEB;
        padding: 12px 0 0 18px;
    }

    .js-dlpo-genreBtn-a .itemsContainerButtons--refinementCategory .itemsContainerButtons__item {
        margin: 0;
    }

    .js-dlpo-genreBtn-a .itemsContainerButtons--refinementCategory .itemsContainerButtons__item:last-child {
        padding-right: 18px;
    }

    .js-dlpo-genreBtn-a .itemsContainerButtons--refinementCategory .itemsContainerButtons__btn {
        margin: 0 6px 16px 0;
        padding: 5px 20px 7px;
        color: #333;
        border-color: #999;
    }

    .js-dlpo-genreBtn-a .itemsContainerButtons--refinementCategory .itemsContainerButtons__inner::after {
        content: "";
        position: absolute;
        right: 3px;
        width: 18px;
        height: 18px;
        top: calc(50% - 11px);
        background: url(https://content.bookoff.co.jp/common/images/arrow-gray.svg) center center no-repeat;
        background-size: 18px 18px;
    }

    /* Aパターン end*/

    /* Bパターン start */
    .js-dlpo-genreBtn-b .itemsContainerButtons--refinementCategory .itemsContainerButtons__inner {
        padding: 0 0 2px;
    }

    .js-dlpo-genreBtn-b .itemsContainerButtons--refinementCategory .itemsContainerButtons__inner::before {
        content: "";
        position: absolute;
        top: 50%;
        right: 0;
        width: 38px;
        height: 100%;
        transform: translateY(-50%);
        background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, white 53%, white 100%);
        background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 53%, white 100%);
        clip-path: inset(0 0 8px 0);
        pointer-events: none;
    }

    .js-dlpo-genreBtn-b .itemsContainerButtons--refinementCategory .itemsContainerButtons__list {
        padding: 16px 16px 14px;
        border-bottom: 1px solid #EBEBEB;
    }

    .js-dlpo-genreBtn-b .itemsContainerButtons--refinementCategory .itemsContainerButtons__item {
        margin: 0 8px 0 0;
    }

    .js-dlpo-genreBtn-b .itemsContainerButtons--refinementCategory .itemsContainerButtons__btn {
        border: 1px solid #999;
        font-size: 22px;
        font-weight: normal;
        color: #333;
    }

    .js-dlpo-genreBtn-b .itemsContainerButtons--refinementCategory .itemsContainerButtons__inner::after {
        content: "";
        position: absolute;
        right: 4px;
        top: calc(50% - 10px);
        width: 19px;
        height: 19px;
        background: url(https://content.bookoff.co.jp/common/images/arrow-gray.svg) center center no-repeat;
        background-size: 19px 19px;
    }

    .js-dlpo-genreBtn-b .itemsContainerButtons--refinementCategory .itemsContainerButtons__item:last-child {
        margin: 0 9px 0 0;
    }

    /* Bパターン end */

    /* 共通 */
    .itemsContainerButtons--refinementCategory .itemsContainerButtons__list {
        flex-wrap: nowrap;
        overflow-x: auto;
    }

    .itemsContainerButtons--refinementCategory .itemsContainerButtons__inner.-scrollEnd::before,
    .itemsContainerButtons--refinementCategory .itemsContainerButtons__inner.-scrollEnd::after {
        content: none;
    }

    /* 共通 */

}