@charset "utf-8";
/* smp-ranking-page.css（SP）
   LOCONDO のランキングページ（/shop/contents/ranking/）だけの指定。
   読み込み順は ranking-section 系（トップと共通の部品）の後ろ。PC は ranking-page.css。

   並び
   1. 土台（前の smp-content-ranking.css から、今も使うものだけを写したもの。値は変えていない）
   2. ランキングページだけの配置と部品（見出し行の左揃え、0件の文言など） */

/*================================================================
  1. 土台
================================================================*/
#ranking_contents #title {
  margin-bottom:24px;
  padding: 0 16px ;
}
#ranking_contents #title h2 {
font-size:20px;
margin-bottom:10px;
color:#333;
}
#ranking_contents #title p {
color:#888;
padding:0;
font-size: 11px; /* ※3時間ごとに更新 */
}
.ranking_sub {
  display: none;/* jsでinline-blockにして表示 */
  font-size: .9em;
  padding-left: 4px;
}
.ranking_text {
  display: inline-block;
}
.breadcrumbs {
  display: none;
}
.pagetop {
  display: none;
}
/* 一覧の並び（列の幅と間は smp-ranking-section.css） */
#rank .catalogList {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}
/* 読み込み中のローダー */
.catalogList_item.-loading img {
  width:100%;
  height:auto;
  mix-blend-mode: multiply;
}

/*================================================================
  2. ランキングページだけの配置と部品
================================================================*/
#ranking_contents #title{
  margin-bottom:16px;
}
#ranking_contents #title h2 {
  margin-bottom:5px;
}
/* 1行目「ランキング」、2行目「（条件）※3時間ごとに更新」と並べる。
   見出しと注記を文字として続け（inline）、条件の前でだけ改行する。長いときは括弧ごと文字として折り返す
   （中を inline-block にすると、文字の塊だけが次の行に落ちて「（」と「）」が別の行に残る） */
#ranking_contents #title h2 {
  display: inline;
}
#ranking_contents #title h2 .ranking_sub {
  display: inline;
  font-size: 11px;
  padding: 0;
  vertical-align: 2px; /* 2行目は「ランキング」の 20px の行の高さのままなので、小さい文字を少し持ち上げて1行目との間を詰める（注記も同じだけ） */
}
#ranking_contents #title h2 .ranking_sub::before {
  content: "\A";
  white-space: pre;
}
#ranking_contents #title .ranking_note {
  display: inline;
  margin-left: 4px;
  vertical-align: 2px;
}
#ranking_contents #title h2 .ranking_sub span {
  display: inline;
  padding: 0;
  font-size: inherit; /* SP の共通 CSS の h2 span（10px、左 3px）を打ち消し、.ranking_sub の 11px にする */
}

/* 金額／個数の PC 用ボタン（見出し行）は出さない。SP は設定画面の中に出す */
#ranking_contents .-pcOnly {
  display: none !important;
}

/* h4 を外したので、タブの先頭と末尾に見出し行と同じ 10px の余白を取る */
#ranking_contents #section-ranking .tab-subCate-scroll {
  padding-left: 10px;
}
#ranking_contents #section-ranking .tab-subCate-scroll li:last-child {
  margin-right: 10px;
}
/* カテゴリのタブと商品の間（トップはタブの下に 40px 取っている） */
#ranking_contents #ranking-cateTabs {
  margin-bottom: 0px;
}
/* 1段目（シューズ、アパレルなど）は、ランキングを見ている間、画面の上（ヘッダーの下）に付いてくる。
   付いてくる範囲を一覧の終わりまで広げるため、タブの箱（#ranking-cateTabs）は箱を作らず、1段目を #section-ranking の中で sticky にする。
   付いてくる位置（--rankingStickyTop）は ranking-page.js がヘッダーの高さから決める */
#ranking_contents #ranking-cateTabs {
  display: contents;
}
#ranking_contents #ranking-cateTabs > [class^="title_"]:first-child {
  position: sticky;
  top: var(--rankingStickyTop, 0px);
  z-index: 10; /* ヘッダー（.fixheader の 20）より下 */
  background-color: #fff;
}
/* 一覧の並びはトップ（5. ランキング一覧）と同じ。トップは31件目から隠すが、ランキングページは全件出す */
#ranking_contents #section-ranking .catalogList > li:nth-child(n + 31) {
  display: block;
}

/* ランキングが無いとき */
#ranking_contents #rank .catalogList li.noitem {
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: 60px 10px;
  white-space: normal;
  text-align: center;
  font-size: 14px;
  color: #666;
}
#ranking_contents #rank.-reloading {
  opacity: .4;
  pointer-events: none;
}

/* 共通テンプレートの商品カードでも、ランキングページは商品名を出す（トップは出さない。smp-ranking-section.css で隠している） */
#ranking_contents #section-ranking .catalogList_item .product-text .commodityName {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 10px;
}