@charset "utf-8";

/*____________________________________________________________________________

SITE TITLE:BRANDELI
TITLE:スマホ ランキングページ

____________________________________________________________________________*/

/* 見出し */
.ranking h2{
  margin-left:16px;
  margin-bottom:20px;
  font-size:20px;
  color:#333;
  font-weight: normal;
}
.ranking_sub {
  display: inline-block;
  font-size: .9em;
  padding-left: 4px;
}
.ranking_text {
  display: inline-block;
}
#ranking_contents #brandselect {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  height: 28px;
  line-height: 28px;
  padding-left: 8px;
  padding-right: 20px;
  border: 1px solid #aaa;
  border-radius: 4px;
  color: #444;
  font-size: 12px;
  background: #fff;
}
.ranking .filter-brand{
  box-sizing:border-box;
  margin-bottom:24px;
  margin-left:16px;
}
.ranking h3{
  margin:0;
  padding:0;
  margin-bottom:8px;
  font-size:15px;
  background:none;
  font-weight:normal;
  color:#333;
}
.ranking .filter-category h3{
  margin-left:16px;
}
#brandselect {
  width: calc(100% - 32px);
  font-size:14px;
}

/* 絞り込み */
#main_content .select2-container {
  max-width: 100%;
  margin: 0 auto;
  display: block;
  margin-bottom: 12px;
}
.totalwrapper {
  margin-bottom:16px;
  width: 100%;
  height: auto;
  overflow-x:scroll;
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
  background-color:#f6f6f6;
}
.totalwrapper #total {
  padding:0 12px;
  white-space:nowrap;
  font-size:0;
}
.totalwrapper #total .category-title {
  display: none;
}
.totalwrapper #total li{
  display:inline-block;
  box-sizing:border-box;
}
.totalwrapper #total li a {
  display: block;
  padding: 0 10px 0;
  text-decoration: none;
  font-size: 14px;
  line-height:3em;
  height:3em;
  color: #aaa;
  letter-spacing:0;
  box-sizing:border-box;
}
.totalwrapper #total li.active a{
  color: #333;		
  border-bottom: 2px solid #444;  
}
.totalwrapper #total li.subCat a:before{
  content:"-";
  margin-right:2px;
  color:#ddd;
}

/* ランキング */
.rankingList {
  display:flex;
  flex-wrap: wrap;
  font-size: 0;
  border-bottom:2px solid #f6f6f6;
}
.rankingList_item {
  position: relative;
  width: calc(calc(100% - 4px) / 3);
  vertical-align: top;
  padding-bottom: 0;
  border-top:2px solid #f6f6f6;
  border-right:2px solid #f6f6f6;
  box-sizing: content-box;
  overflow: hidden;
}
.rankingList_item a{
  display:block;
  box-sizing:border-box;
  padding:0;
  padding-bottom: 24px;
  height:100%;
  color:#333;
  text-decoration:none;
}
.rankingList_item:nth-of-type(3n){
  margin-right:0;
  border-right:0;
}
.rankingList_item .product-image{
  overflow:hidden;
}
.rankingList_item img{
  width:100%;
  height:auto;
}
.rankingList_item .product-text {
  line-height:1.1;
  padding:0 5px;
  padding-top:10px;
}
.product-text .brandName{
  display:inline-block;
  margin-bottom:5px;
  width:100%;
  font-size:11px;
  line-height:1;
  color:#444;
  overflow:hidden;
  overflow-x:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  -webkit-text-overflow:ellipsis;
  letter-spacing:.02em;
}
.product-text .commodity_name{
  display:inline-block;
  margin-bottom:5px;
  width:100%;
  font-size:10px;
  line-height:1.1;
  color:#999;
  overflow:hidden;
  white-space: nowrap;
  text-overflow:ellipsis;
  overflow:hidden;
}
.product-text .special_price,
.product-text .regular_price {
  font-size: 14px;
  line-height: 1;
  font-weight:400;
  letter-spacing:.02em;
}
.product-text .-discount,
.product-text .special_price{
  color:#FF0030;
}
.rankNum {
  box-sizing: border-box;
  position:absolute;
  top: 4px;
  left: 4px;
  width:26px;
  height:26px;
  line-height:25px;
  text-align:center;
  font-size:11px;
  display: inline-block;
  color: #444;
  background-color: #fff;
  border-radius: 13px;
}
/* 1〜3位 */
.rankingList_item:nth-child(-n+3) .rankNum {
  color: #ffffff;
}
/* 1位 */
.rankingList_item:nth-of-type(1) .rankNum{
  background: #ebbe00;
}
/* 2位 */
.rankingList_item:nth-of-type(2) .rankNum{
  background:#b8b8b8;
}
/* 3位 */
.rankingList_item:nth-of-type(3) .rankNum{
  background:#a16209;
}

/* 画像トリミング */
.product-image img{
  width:140%;
  margin-left:-20%;
  max-width: inherit;
  max-width:initial;
}
/* シューズ他を正方形に */
.ladies .product-image img,
.ladies_bags .product-image img,
.bracelet .product-image img,
.mens .product-image img,
.mens_bags .product-image img,
.bracelet_m .product-image img{
  width:100%;
  margin-left:0;
  margin-top: 0!important;
  padding-bottom: 0!important;
}
.-square .product-image img{
  margin-left: 0;
  width: 100%;
  margin-top: 28px;
  padding-bottom: 28px;
}

.product-image:before {
  content: "";
  display: block;
  width: 100%;
  height: calc(calc(calc(100vw - 2px) / 3) * 1.4);
  position: absolute;
  z-index: 1;
  background-color: #000;
  opacity: .02;
}
.ladies .product-image:before,
.ladies_bags .product-image:before,
.bracelet .product-image:before,
.mens .product-image:before,
.mens_bags .product-image:before,
.bracelet_m .product-image:before{
  height: calc(calc(calc(100vw - 10px) / 3) * 1);
}

/* 非表示 */
.totalwrapper #total li.nodisplay {
  display: none;
}
.breadcrumbs {
  display: none;
}
.pagetop {
  display: none;
}
.filter-category h3{
  display:none;
}

/*----------------------------------------------------------------------------
catalog-campaignGroup 
仕組みが他と違うため、独自指定 
----------------------------------------------------------------------------*/
/* キャンペーンアイコン .catalog-campaignGroup */
.rankingList_item .catalog-campaignGroup {
  font-size: 10px;
  transform: translateY(calc( -18px * 0.9));
  text-align:left;
}
.rankingList_item .catalog-campaignItem{
  height:calc( 18px * 0.9);
  margin-bottom:1px;
}
.rankingList_item .catalog-campaignItem + .catalog-campaignItem {
  margin-left: -5px;
}
.rankingList_item .catalog-campaignItem span {
  display:inline-flex;
  align-items:center;
  padding:0 .5em;
  font-size:10px;
  font-weight:600;
  line-height:1.8em;
  white-space:nowrap;
  transform-origin:0 0;
  transform:scale(.9);
  color: #fff;
  letter-spacing: .05em;
}
.rankingList_item .catalog-campaignItem span:after{
  letter-spacing: 0;
}
.rankingList_item .catalog-campaignItem:last-child {
  margin-bottom: -18px;
}
.rankingList_item .catalog-link:hover .catalog-campaignItem {
  opacity: 0.7;
}
.rankingList_item .catalog-link{
  text-decoration: none;
}
/* セール */
.rankingList_item .catalog-campaignItem.-discount span {
  background-color:rgba(237, 20, 61, .8)
}
.rankingList_item .catalog-campaignItem.-discount span:after {
  content: "OFF";
  margin-left: 0.1em;
}
span.-specialprice:after{
  display: none !important;
  margin-left: 0 !important;
}
.rankingList_item .catalog-campaignItem.-discount.-timesale span:before {
  content:"";
  display:inline-block;
  width: 12px;
  height: 12px;
  background-image: url('//media.aws.locondo.jp/contents/img/common/icon_timesale.svg');
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  margin-right: .2em;
}
/* クーポン */
.rankingList_item .catalog-campaignItem.-coupon span {
  color: #222;
  background-color:rgba(255, 218, 31, .8);
}
.rankingList_item .catalog-campaignItem.-coupon.-rate span:after {
  content: "%";
}
.rankingList_item .catalog-campaignItem.-coupon.-price span:after {
  content: "円";
}
/* 調整 */
.rankingList_item .product-text{
  padding-top:0px;
}


/*----------------------------------------------------------------------------
  カテゴリータブ
----------------------------------------------------------------------------*/

/*表示切り替え*/
.topCategory.is-select {
  font-weight: bold;
}
.subCateList {
  display: none;
}
.subCateList.is-view {
  display: block;
}


#mainCategory_tab {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  overflow-x: scroll;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  font-size: 0;
  white-space: nowrap;
  border-bottom: 1px solid #eee;
  height: auto;
  padding: 12px 0 12px 0;
  /* background-color: #f6f6f6; */
}
#mainCategory_tab li {
  font-size: 11px;
  display: inline-block;
  width: 80px;
  text-align: center;
  opacity: 0.3;
  border: 0;
}
#mainCategory_tab li.is-select {
  opacity: 1;
  background: none;
  border: none;
}
#mainCategory_tab p {
  display: block;
  padding: 4px 0;
  text-decoration: none;
}

#mainCategory_tab li:before {
  content: '';
  display: inline-block;
  background: #000;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-size: cover;
}
#mainCategory_tab li.tab_L:before {
  background-image: url(//sc3.locondo.jp/contents/commodity/shop/SFN20784D/commodity/FI/FI4039EW00901_thumb.jpg);
}
#mainCategory_tab li.tab_M:before {
  background-image: url(//sc3.locondo.jp/contents/commodity/shop/SSNY0808D/commodity/SA/SA1959EM00050_thumb.jpg);
}
#mainCategory_tab li.tab_apparel_k_g:before {
  background-image: url(//sc3.locondo.jp/contents/commodity/shop/SFFX0618D/commodity/CO/CO3909EC08018_thumb.jpg);
}
#mainCategory_tab li.tab_apparel_k_b:before {
  background-image: url(//sc3.locondo.jp/contents/commodity/shop/SFFX0618D/commodity/CO/CO3909EC07695_thumb.jpg);
}
#mainCategory_tab li.tab_homeFashion:before {
  background-image: url(//sc3.locondo.jp/contents/commodity/shop/SOTK0663D/commodity/ID/ID4138DU03447_thumb.jpg);
}