@charset "UTF-8";

.bestBuyRanking {
  --spacing-xxs: 4px;
  --spacing-xs: 8px;
  --spacing-small: 12px;
  --BodyText-Secondary: #666;
  --Border-Border-Basic: #DDD;
  --MainColor-Primary: #76952F;
  --header-height-sp: 91px;
  --header-height-pc: 155px;
  --header-ani-speed-sp: 1s;

  max-width: 640px;
  margin: 0 auto;
}
/* ナビゲーション */
.bestBuyRanking__nav {
  top: 0;
  left: 0;
  z-index: 2;
  overflow-x: auto;
  width: 100%;
  background: #fff;
  border-bottom: 1px solid var(--Border-Border-Basic);
}
.bestBuyRanking__nav[data-device='sp'],
.bestBuyRanking__nav[data-device='app'] {
  position: sticky;
  transition: top var(--header-ani-speed-sp) ease-in-out;
}
.bestBuyRanking__nav.is-down {
  top: 0;
}
.bestBuyRanking__nav[data-device='sp'].is-up {
  top: var(--header-height-sp);
}
.bestBuyRanking__nav[data-device='pc'].is-up {
  top: var(--header-height-pc);
}
@media screen and (min-width: 1260px) {
  .bestBuyRanking__nav {
    --transform: translateX(calc(-50%));
  }
}
@media screen and (max-width: 1259px) {
  .bestBuyRanking__nav {
    --transform: translateX(calc(-50% + 82px));
  }
}
.bestBuyRanking__nav[data-device='pc'].is-up,
.bestBuyRanking__nav[data-device='pc'].is-down {
  position: fixed;
  width: 640px;
  left: calc(50% - 35px);
  transform: var(--transform);
  z-index: 998;
}
.bestBuyRanking__nav ul {
  display: flex;
  flex-wrap: nowrap;
  min-width: max-content;
}
.bestBuyRanking__nav li {
  padding: var(--spacing-xs) var(--spacing-small);
  cursor: pointer;
}
.bestBuyRanking__nav li span {
  display: block;
  color: var(--BodyText-Secondary);
  padding: var(--spacing-xs) 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 140%;
  letter-spacing: 0.64px;
  pointer-events: none;
}
.bestBuyRanking__nav li.is-active span {
  color: var(--MainColor-Primary);
  padding-bottom: var(--spacing-xxs);
  border-bottom: var(--spacing-xxs) solid var(--MainColor-Primary);
}
/* ランキング */
.bestBuyRanking__panel {
  display: none;
}
.bestBuyRanking__panel.is-active {
  display: block;
}
.bestBuyRanking__item {
  margin-bottom: 80px;
}
.bestBuyRanking__item .offer-item__title {
  margin-right: -15px;
  margin-left: -15px;
}
@media screen and (max-width: 749px) {
  .bestBuyRanking__item {
    margin-bottom: 40px;
  }  
}
.bestBuyRanking .js-soldout {
  display: block !important;
}