@charset "UTF-8";


/** カテゴリのタップ部分 **/
div#category-list .list ul {
    overflow: visible;

}

.category-columns {
    display: flex;
}

.category-column {
    position: relative;
    display: inline-block;
    width: 33%;
}

 .category-list__small-categories{
     display: none;
     width: 100%;
     background: #f6f6f6;
 }
 .category-list__small-category-link{
    display: flex;
    align-items: center;
    width: 100%;
    height: 70px;
    padding: calc((70px - 2px - 1.8em) / 2) 20px;
    padding-right: 40px;
    position: relative;
    border-bottom: 1px solid lightgray;
 }
 .category-list__small-categories.active{
     display: block;
 }
 .category-list__small-category a{
     color: #000;
 }
 .category-list__small-category a span::after{
    content: attr(data-category-item-total);
    margin: 0 0 0 3px;
}
 .category-list__item .fa-times-circle{
    display: none;
    position: absolute;
    right: 11px;
    top: -11px;
    font-size: 26px;
    cursor: pointer;
    z-index: 10;
}

 .category-list__item .fa-times-circle:after {
    content: "";
    background: #fff;
    padding: 6px;
    position: absolute;
    left: 5px;
    top: 7px;
    z-index: -1;
 }

 @media ( max-width: 991px ) {
.category-columns {
    display: block;
}
.category-column {
    position: relative;
    display: inline-block;
    width: 100%;
}
 .category-list__item .fa-times-circle{
     position: fixed;
     right: 7%;
     top: 28%;
 }

 .category-list__small-categories{
    width: 100%;
    max-height: 60%;

 }
 .category-list__small-category-link{
    padding: calc((55px - 2px - 1.8em) / 2) 20px;
 }

 .category-list__small-categories::-webkit-scrollbar {
     background:#ccc;
     width:10px;
 }
 .category-list__small-categories::-webkit-scrollbar-thumb {
    background:#aaa;
 }
 .category-list__item .fa-times-circle{
     z-index: 1003;
 }
 .category-list__item .fa-times-circle:before{
    color: #999;
 }

 .sp-category-menu-open {
     overflow:hidden;
 }


 .category-list__overray {
     display: none;
     width: 100%;
     height: 100%;
     background: rgba(0,0,0,.5);
     position: fixed;
     top: 0;
     left: 0;
     z-index: 1001;
 }
 }