/* トップ「売れ筋ランキング」商品カードのお気に入り（ハート）ボタン行の補正。
   ボタン・ハートの見た目は商品一覧と共通の .product-list-actions / .product-list-favorite-button（common.css）を使う。
   商品一覧では .section-productbox 配下の規則で SOLD OUT の上余白（body .soldout の margin-top:1rem）を打ち消しているが、
   トップのランキングはその配下に無いため、同じ打ち消しをここで行い SOLD OUT とハートの高さ・上端を揃える。 */
.page-top .section-topranking .top-ranking-slider .product-list-actions .soldout {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin-top: 0;
  overflow: hidden;
  white-space: nowrap;
}

/* ランキングのカードは商品一覧より幅が狭く、ハートの分だけ「商品詳細」「SOLD OUT」ボタンが縮むため、
   スマホ幅ではボタン左のカートアイコンが文字に重なる。480px以下ではアイコンを出さず、文字を中央に表示する。 */
@media (max-width: 480px) {
  .page-top .section-topranking .top-ranking-slider .product-list-actions .shopping-btn::before,
  .page-top .section-topranking .top-ranking-slider .product-list-actions .soldout::before {
    display: none;
  }
}