@charset "utf-8";


.l-container {
  width:100%;
}

.ranking {
  width: 100%;
  padding: 30px 0 0;
  margin: 0 auto;
}

.ranking-title {
  font: 700 30px 'semplicitapro', sans-serif;
  color: #010101;
  letter-spacing: .13em;
  text-align: center;
  margin: 0 0 60px;
}


/*brand-link*/
.brand-link {
  margin: 0 0 30px;
  width: 100%;
}
.brand-link ul {
  display: flex;
  -webkit-transition-timing-function: linear !important;
  transition-timing-function: linear !important;
}
.brand-link ul li {
  flex-basis: 110px;
  position: relative;
  text-align: center;
}
.brand-link ul li a {
  box-sizing: border-box;
  height: 70px;
  display: flex;
  align-items: center;
  padding: 0 5px;
  opacity: .3;
}
.brand-link ul li a img {
  width: 100%;
  height: auto;
  vertical-align: top;
}

.brand-link-all a {}
.brand-link-USGSN a {}
.brand-link-USGGP a {
  padding: 0 !important;
}
.brand-link-FID01 a {}
.brand-link-LBW01 a {}
.brand-link-FUR01 a {}
.brand-link-MOW01 a {}
.brand-link-STY01 a {}
.brand-link-EEM01 a {}
.brand-link-CFD01 a {}

.brand-link-SNH01 {
    flex-basis: 150px!important;
}

.brand-link ul li a:hover {
  opacity: 1;
}

.brand-link ul .active {
  pointer-events: none;
}
.brand-link ul .active a {
  opacity: 1;
}
.brand-link ul .active a::before {
  content: '';
  height: 2px;
  display: block;
  background: #535353;
  position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.brand-link-all a::before { width: 30px; }
.brand-link-USGSN a::before { width: 80px; }
.brand-link-USGGP a::before { width: 70px; }
.brand-link-FID01 a::before { width: 90px; }
.brand-link-LBW01 a::before { width: 70px; }
.brand-link-FUR01 a::before { width: 60px; }
.brand-link-MOW01 a::before { width: 80px; }
.brand-link-STY01 a::before { width: 60px; }
.brand-link-EEM01 a::before { width: 60px; }
.brand-link-CFD01 a::before { width: 80px; }


/*category-link*/
.category-link {
  margin: 0 0 35px;
}
.category-link ul {
  text-align: center;
}
.category-link ul li {
  display: inline-block;
  margin: 0 30px;
}
.category-link ul li a {
  font-size: 14px;
  letter-spacing: .13em;
  text-decoration: none;
  background: url(../img/ranking/arrow-down.png) no-repeat right center;
  padding: 0 20px 0 0;
}
.category-link ul li a:hover {
  opacity: .6;
}


/*アイテム一覧*/
.ranking-list {
  width: 1100px;
  overflow: hidden;
  padding: 100px 0 0;
  margin: -100px auto 40px;
}

.ranking-list h2 {
  font-size: 16px;
  background: #ebcabb;
  padding: 9px 15px;
  margin: 0 0 35px;
}

.ranking-list-men {
  display: none;
}
.ranking-list-men.show {
  display: block;
}

.ranking-list ul {
  width: 1150px;
  letter-spacing: -.4em;
  overflow: hidden;
  padding: 12px 0 0;
  -webkit-transition: 1s;
          transition: 1s;
}
.ranking-list ul li {
  width: 196px;
  display: inline-block;
  vertical-align: top;
  letter-spacing: normal;
  margin: 0 30px 50px 0;
  position: relative;
  counter-increment: items;
}
.ranking-list ul li:nth-child(n+31) {
  width: 170px;
  margin: 0 16px 50px 0;
}


.ranking-list ul li .m-item a {
  display: block;
  text-decoration: none;
}
.ranking-list ul li .m-item a:hover {
  opacity: .6;
}
.ranking-list .m-item-image {
  position: relative;
  margin: 0 0 15px;
}
.ranking-list .m-item-image img {
  width: 100%;
  height: auto;
  vertical-align: top;
}

.ranking-list .m-item-soldout {
  width: 100%;
  height: 20px;
  font: 400 14px/20px 'semplicitapro', sans-serif;
  text-align: center;
  color: #fff;
  background: #9b9b9b;
  position: absolute;
  bottom: 0;
  left: 0;
  opacity: .85;
}

.ranking-list .m-item-icon,
.ranking-list .m-item-category,
.ranking-list .m-item-magazine {
  display: none;
}

.ranking-list .m-item-brand {
  font: 400 12px 'semplicitapro', sans-serif;
  margin: 0 0 3px;
}

.ranking-list .m-item-name {
  margin: 0 0 10px;
}
.ranking-list .m-item-price {
  font: 400 16px 'semplicitapro', sans-serif;
}
.ranking-list .m-item-price.discount {
  color: #be0d23;
}
.ranking-list .m-item-price.discount span + span {
  font-size: 14px;
  margin: 0 0 0 5px;
}



.ranking-list ul li::before {
  content: counter(items);
  box-sizing: border-box;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  border: 1px solid rgba(203,203,203,.5);
  background: #fff;
  font: 400 10px 'semplicitapro', sans-serif;
  line-height: 24px;
  text-align: center;
  position: absolute;
  top: -12px;
  left: 20px;
  z-index: 10;
}
.ranking-list ul li:nth-child(1)::before,
.ranking-list ul li:nth-child(2)::before,
.ranking-list ul li:nth-child(3)::before {
  border: none;
  color: #fff;
  line-height: 25px;
}

.ranking-list ul li:nth-child(1)::before { background: #e7bc3a; }
.ranking-list ul li:nth-child(2)::before { background: #9a9893; }
.ranking-list ul li:nth-child(3)::before { background: #a0783f; }

/*view-more*/
.view-more {
  text-align: center;
}
.view-more.hide {
  display: none;
}

.view-more a {
  box-sizing: border-box;
  width: 230px;
  display: inline-block;
  background: #fff;
  border: 1px solid #030000;
  font: 400 12px 'semplicitapro', sans-serif;
  color: #030000;
  letter-spacing: .13em;
  padding: 15px 0;
}
.view-more a:hover {
  text-decoration: none;
  opacity: .6;
}