/* おすすめ単体作品ランキング（/ranking/）
   ──────────────────────────────────────────────
   ■ なぜこのCSSが要るか
   テーマのページ別CSSは、**元からあった3ブロック（num0〜num2）にしか
   見出しの大きさを指定していない。**

       #child_lp_page90 .lp_free_space.num0 .content_header .headline { font-size:26px }
       …num1、num2 まで

   TOP20に増やした結果、4位以降（num3〜num19）は指定が無く、
   既定の小さい文字に落ちていた。**順位が下がるほど字が小さくなる**という、
   意味のない見た目になっていた。

   num を1つずつ書き足すのは、本数を変えるたびに直すことになるので採らない。
   **番号に関係なく、全部同じ大きさにする。** */

#lp_page_wrap .lp_free_space .content_header .headline {
  font-size: 26px !important;
}

/* ---- 作品名の左右の余白を外す（作品ページと同じ直し）
   テーマは .styled_h4 に padding: 3px 0 3px 20px !important を掛けている。
   **この左20pxは中身のない空白。** 背景色も左の枠線も ::before も無い。
   字下げしているだけで、下の罫線だけが20px左まで伸びていた。

   このCSSは /ranking/ にしか読み込まれないので、ここで上書きする。
   .styled_h4 側が !important なので、**より細かい指定**で勝つ。
   h4.styled_h4（0,1,1）> .styled_h4（0,1,0）。 */
#lp_page_wrap h4.styled_h4,
h4.styled_h4 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 順位はガイド（/guide/）と同じ見た目にそろえる。
   同じサイトの中で「順位」が2か所に出るので、違う見た目だと別物に見える。
   ガイド側は .gd-no（Jost / 600 / #c9c9c9）。

   **数字だけを出す。**「第」「位」は付けない。
   数字が主役なので、余計な文字があると読み取りが遅くなる。 */
.rk-no {
  font-family: "Jost", "Century Gothic", "Futura", "Hiragino Sans",
               "Noto Sans JP", sans-serif;
  font-size: 34px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .02em;
  color: #c9c9c9;
}

@media screen and (max-width: 750px) {
  #lp_page_wrap .lp_free_space .content_header .headline {
    font-size: 20px !important;
  }
  .rk-no { font-size: 26px; }
}