@charset "utf-8";
/*-------------------------------------
SITE : //www.jeansfactory.jp/
CREATE : 2016.08.15
MODIFIED : 2018.04.02
UPDATED BY : OGASAWARA
MEMO : 2016.09.02 PB紹介コンテンツ追加
MEMO : 2018.04.02 UI/デザイン変更
MEMO : 2020.11.16 ブレイクポイントの追加。デザイン変更。CC対応。
-------------------------------------*/

/* =========================================

    ブランドリスト ver3.0.0

========================================= */

.brandList-container{margin:60px auto 120px;max-width: 1024px;}
.brandList-container .pageTitle{font-size:24px;font-weight:400;position:relative;display:  inline-block;}
.brandList-container .brandList-layout{display: -webkit-flex;display: flex;margin-top: 50px;}
.brandList-container .brandList-layout__menu{width: 280px;margin-right: 30px;}
.brandList-container .brandList-layout__menuInner{position:sticky;top:20px}
.brandList-container .brandList-layout__content{ width: -webkit-calc(100% - 310px);width: calc(100% - 310px);}
@media screen and (max-width:834px){
.brandList-container .pageTitle{font-size:20px;padding: 0 30px;}
.brandList-container .brandList-layout{-webkit-flex-flow: row wrap;-ms-flex-flow: row wrap;flex-flow: row wrap;}
.brandList-container .brandList-layout__menu{width: 100%;margin-right: 0;}
.brandList-container .brandList-layout__menuInner{position: inherit;top: inherit;margin: 0 30px;}
.brandList-container .brandList-layout__content{width: 100%;margin-top: 50px;}
}
@media screen and (max-width:640px){
.brandList-container{margin: 30px auto 80px;}
.brandList-container .pageTitle{padding: 0 20px;}
.brandList-container .brandList-layout{margin-top:30px}
.brandList-container .brandList-layout__menuInner{margin: 0 20px;}
}

/*brandtype
-------------------------------------*/
.brandList-layout__menu .brandtype{}
.brandList-layout__menu .brandtype ul{}
.brandList-layout__menu .brandtype ul > li{font-size: 14px;}
.brandList-layout__menu .brandtype ul > li a{position:relative;padding: 5px 0;transition: .5s;text-decoration: none;display: -webkit-flex;display: flex;-webkit-box-align: center;align-items: center;color: #202020;}
.brandList-layout__menu .brandtype ul > li a:hover{background:#dcdde2;}
.brandList-layout__menu .brandtype ul > li.slt{}
.brandList-layout__menu .brandtype ul > li .icon-checkmark{display:inline-block;width:20px;min-width: 20px;height: 20px;border-radius:5px;border: 1px solid #666;margin-right: 8px;box-sizing: border-box;}
.brandList-layout__menu .brandtype ul > li.slt .icon-checkmark{background-image: -webkit-linear-gradient(left, #202020 0%, #202020 100%);background-image: linear-gradient(to right, #202020 0%, #202020 100%);border: none;position: relative;}
.brandList-layout__menu .brandtype ul > li.slt .icon-checkmark::after { position: absolute; content: ""; width: 10px; height: 5px; margin-top: -2px; border-left: 3px solid #fff;border-bottom: 3px solid #fff;top: 50%;left: 50%; -webkit-transform: translate(-50%,-50%) rotate(-45deg);transform: translate(-50%,-50%) rotate(-45deg);}
@media screen and (max-width:834px){
}
@media screen and (max-width:640px){
}

/*brand-select-list
-------------------------------------*/
.brandList-layout__menu #brand-select-list{margin-top:30px;}
.brandList-layout__menu #brand-select-list__tab{display: -webkit-flex;display: flex;  -webkit-box-align: center; align-items: center; position: relative;}
.brandList-layout__menu #brand-select-list__tab::after{content:"";position: absolute;display:block;height: 1px;width: 100%;background: #dcdcdc;bottom: 0px;z-index: -1;}
.brandList-layout__menu #brand-select-list__tab li{width: -webkit-calc(100% / 2);width: calc(100% / 2);padding: 0 10px;cursor: pointer;height: 45px;display: -webkit-flex;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;-webkit-box-align: center;align-items: center;-webkit-justify-content: center;justify-content: center;text-align: center;line-height: 1.6;}
.brandList-layout__menu #brand-select-list__tab li.select{-moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; background: #ffffff none repeat scroll 0 0;border-color: #dcdcdc #dcdcdc #ffffff;border-image: none;border-radius: 4px 4px 0 0; border-style: solid; border-width: 1px;color: #2d2d2d;}
.brandList-layout__menu #brand-select-list .brand-select-list__tab-target.disnon{ display:none}
.brandList-layout__menu #brand-select-list .brand-select-list__tab-target{margin-top:30px}
/* alpha_kanaList */
#brand-select-list .brand-select-tab ul{display: -webkit-flex;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;}
#brand-select-list .brand-select-tab ul li{height: 50px;line-height: 50px;width: -webkit-calc(100% / 5 - 4.8px);width: calc(100% / 5 - 4.8px);margin-right: 6px;text-align: center;}
#brand-select-list .brand-select-tab ul li:nth-of-type(5n){margin-right:0}
#brand-select-list .brand-select-tab ul li:nth-of-type(n+6){margin-top:8px}
#brand-select-list .brand-select-tab ul li a{color: #202020;display:  block;background: #EBECF0;border: 1px solid #EBECF0;transition: all 300ms ease-out 0ms;text-decoration: none;border-radius: 4px;}
#brand-select-list .brand-select-tab ul li a:hover{border: #001335 1px solid;}
#brand-select-list .brand-select-tab ul li.on{}
#brand-select-list .brand-select-tab ul li.off{color:#B4B4B4;text-decoration:none;border: none;}
#brand-select-list .brand-select-tab ul li.none{border:none;text-decoration:none;}
#brand-select-list .brand-select-tab ul li.slt{}
#brand-select-list .brand-select-tab ul li.slt a{color:#fff;background: #001335;border: #001335 1px solid;}
@media screen and (max-width:834px){
}
@media screen and (max-width:640px){
}

/* search-results
-------------------------------------*/
#brand-pb-container + #search-results {margin-top: 50px;}
#search-results .brand-list-container{width:100%;}
#search-results .brand-list-container:nth-of-type(n+2){margin-top:50px}
#search-results .brand-list-container .listname{display:block;font-size: 18px;}
#search-results .brand-list-container .brand-list{margin-top:20px;display: -webkit-flex;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;}
#search-results .brand-list-container .brand-list li {display:block;padding:  0;width: -webkit-calc(100% / 5 - 16px);width: calc(100% / 5 - 16px);margin-right: 20px;}
#search-results .brand-list-container .brand-list li:nth-of-type(5n){margin-right:0}
#search-results .brand-list-container .brand-list li:nth-of-type(n+6){margin-top: 20px;}
#search-results .brand-list-container .brand-list li .brandBox {display: block;text-decoration:none;color:#000;-webkit-transition:all .3s ease-in-out .0s;transition: all .3s ease-in-out .0s;width:  auto;}
#search-results .brand-list-container .brand-list li .brandBox .brandImg {width: 100%;display: block;-webkit-transition: all .3s ease-in-out .0s;transition: all .3s ease-in-out .0s;border-radius: 5px;}
#search-results .brand-list-container .brand-list li .brandBox:hover .brandImg{box-shadow: -4px -4px 10px #e8e9ea, 4px 4px 10px #BABECC;}
#search-results .brand-list-container .brand-list li .brandBox .name {width: 100%;margin-top: 8px;display: block;}
@media screen and (max-width:834px){
#search-results .brand-list-container .listname{padding: 0 30px;}
#search-results .brand-list-container .brand-list{margin: 20px 30px 0;}
}
@media screen and (max-width:640px){
#brand-pb-container + #search-results {margin-top: 30px;}
#search-results .brand-list-container:nth-of-type(n+2){margin-top:30px}
#search-results .brand-list-container .listname{padding: 0 20px;}
#search-results .brand-list-container .brand-list{margin:0;}
#search-results .brand-list-container .brand-list li {width: 100%;margin-right: 0;}
#search-results .brand-list-container .brand-list li:nth-of-type(n+6){margin-top:0}
#search-results .brand-list-container .brand-list li .brandBox {display: -webkit-flex;display: flex;-webkit-box-align: center;align-items: center;padding: 10px 20px;}
#search-results .brand-list-container .brand-list li .brandBox:hover {box-shadow: 0 20px 20px -20px #BABECC,0 -20px 20px -20px #e8e9ea;}
#search-results .brand-list-container .brand-list li .brandBox .brandImg {width: 60px;margin-right: 15px;}
#search-results .brand-list-container .brand-list li .brandBox:hover .brandImg{box-shadow:none}
#search-results .brand-list-container .brand-list li .brandBox .name {margin-top:0;}
}

/* pb-list
-------------------------------------*/
#brand-pb-container{}
#brand-pb-container .pb-label{ display: inline-block; font-size: 18px; position: relative; padding: 0 10px;color: #fff; margin-left: 10px;}
#brand-pb-container .pb-label::before{position:absolute;content:"";-webkit-transform: skew(-30deg);-moz-transform: skew(-30deg);transform: skew(-30deg);top: 0;bottom: 0;z-index: -1;width: 3px;left: -10px;border-left: 1px solid #001335;border-right: 3px solid #001335;}
#brand-pb-container .pb-label::after{position:absolute;content:"";-webkit-transform: skew(-30deg);-moz-transform: skew(-30deg);transform: skew(-30deg);background: #001335;top: 0;bottom: 0;left: 0;right: 0;z-index: -1;}
#brand-pb-container .brand-pb-list{display: -webkit-flex;display: flex;overflow-x: auto;padding: 20px;margin-top: 20px;}
#brand-pb-container .brand-pb-list::-webkit-scrollbar{height:8px}
#brand-pb-container .brand-pb-list::-webkit-scrollbar-track{ border-radius:5px; background:#ebecf0}
#brand-pb-container .brand-pb-list::-webkit-scrollbar-thumb{ border-radius:5px; background:#283135}
#brand-pb-container .brand-pb-list li{}
#brand-pb-container .brand-pb-list li:nth-of-type(n+2){ margin-left: 20px;}
#brand-pb-container .brand-pb-list li .brandBox{display: -webkit-flex;display: flex;-webkit-box-align: center;align-items: center;padding: 0 20px;box-shadow:-5px -5px 10px #b1b1b11a, 5px 5px 10px #2424241a;border-radius: 5px;color: #202020;text-decoration: none;transition: all 300ms ease-out 0ms;}
#brand-pb-container .brand-pb-list li .brandBox:hover{box-shadow: -2px -2px 5px #b1b1b11a, 2px 2px 5px #2424241a;}
#brand-pb-container .brand-pb-list li .brandBox img{width:80px; margin-right:15px}
#brand-pb-container .brand-pb-list li .brandBox .name{white-space: nowrap;font-size: 0.9em;}
@media screen and (max-width:834px){
#brand-pb-container .pb-label{margin-left: 40px;}
#brand-pb-container .brand-pb-list{padding: 20px 40px;}
}
@media screen and (max-width:640px){
#brand-pb-container .pb-label{font-size: 16px; margin-left: 30px;}
#brand-pb-container .brand-pb-list{padding: 20px 30px;margin-top: 10px;}
#brand-pb-container .brand-pb-list li:nth-of-type(n+2){ margin-left: 15px;}
#brand-pb-container .brand-pb-list li .brandBox{padding: 0 15px;}
#brand-pb-container .brand-pb-list li .brandBox img{width:65px;}
}