@charset "UTF-8";
/*
 * css/ranking/ranking.css - パソコン売れ筋ランキング（/ranking/ 配下の 12 画面）
 * すべて .rk-page 配下に限定し、共通 CSS（new_style.css / header.css 等）に影響させない。
 * 文字は 16px 以上（ルール ui-verification）。本文の左右は共通ヘッダーの内容幅（1300px）に揃える。
 * 金・銀・銅は 1〜3 位の順位バッジと上辺の線だけに使う（白文字とのコントラスト 4.5:1 以上）。
 * ブレークポイント: 〜767px / 768〜1023px / 1024px〜
 *
 * @changelog
 *   2026-11-12  AI(Cursor)  初版作成
 *   2026-11-12  AI(Cursor)  見出しを詰める（集計期間を H1 の横、条件の見出しとボタンを 1 行）
 *   2026-11-12  AI(Cursor)  ランキング間のナビを H1 の下のタブに変更
 *   2026-11-14  AI(Cursor)  ゲーミングPC の関連ページへのリンク（rk-gaming）を追加
 */
.rk-page {
  --rk-ink: #1f2124;
  --rk-ink-soft: #464a50;
  --rk-line: #d9dee5;
  --rk-line-strong: #b9c1cc;
  --rk-tint: #f3f6fa;
  --rk-brand: var(--main-key-cl, #004896);
  --rk-brand-2: var(--main-key-cl-2, #006dcc);
  --rk-gold: #8a6a00;
  --rk-silver: #5f6772;
  --rk-bronze: #94562a;
  --rk-up: #146c43;
  --rk-down: #b42318;
  --rk-radius: 8px;
  color: var(--rk-ink);
  background: #fff;
  font-size: 16px;
  line-height: 1.7;
  overflow-x: clip;
}

.rk-page *,
.rk-page *::before,
.rk-page *::after {
  box-sizing: border-box;
}

:where(.rk-page) :where(h1, h2, h3, p, ul, ol, dl, dd, figure) {
  margin: 0;
  padding: 0;
}

.rk-page ul,
.rk-page ol {
  list-style: none;
}

.rk-page img {
  display: block;
  max-width: 100%;
  height: auto;
}

.rk-page a {
  color: var(--rk-brand);
  text-underline-offset: 0.2em;
}

.rk-page a:focus-visible,
.rk-page summary:focus-visible {
  outline: 3px solid var(--rk-brand-2);
  outline-offset: 2px;
}

.rk-page :where(h1, h2, h3) {
  text-wrap: balance;
  word-break: auto-phrase;
}

.rk-page :where(p, li, dd) {
  line-break: strict;
  text-wrap: pretty;
}

.rk-wrap {
  width: 100%;
  max-width: 1348px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- 見出し・条件 ---------- */
.rk-head {
  padding: 24px 0 20px;
  background: var(--rk-tint);
  border-bottom: 1px solid var(--rk-line);
}

/* H1（左）と集計期間（右）を 1 行に。入らない幅では期間が H1 の下に回る */
.rk-head__top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 24px;
}

.rk-head__title {
  font-size: 30px;
  line-height: 1.35;
}

.rk-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 32px;
  margin-top: 16px;
  padding: 12px 20px;
  background: #fff;
  border: 1px solid var(--rk-line);
  border-radius: var(--rk-radius);
}

/* 条件の見出しとボタンを 1 行に（ボタンが入りきらないときは見出しの右側で折り返す） */
.rk-filter__group {
  display: flex;
  align-items: center;
  gap: 8px 12px;
}

.rk-filter__group > .rk-seg {
  flex: 1 1 auto;
  min-width: 0;
}

.rk-filter__group--wide {
  flex-basis: 100%;
  flex-wrap: wrap;
}

.rk-filter__legend {
  font-weight: 700;
  white-space: nowrap;
}

.rk-seg {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.rk-seg__item {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid var(--rk-line-strong);
  border-radius: 6px;
  background: #fff;
  color: var(--rk-ink);
  text-decoration: none;
}

a.rk-seg__item:hover {
  border-color: var(--rk-brand);
  color: var(--rk-brand);
}

.rk-seg__item[aria-current="true"],
.rk-chip[aria-current="true"] {
  border-color: var(--rk-brand);
  background: var(--rk-brand);
  color: #fff;
  font-weight: 700;
}

.rk-seg__short {
  display: none;
}

/* データの無い期間（選べない）。文字は #5a6069 で背景との比 5.6:1 を保つ */
.rk-seg__item.is-disabled {
  border-style: dashed;
  background: #eef0f3;
  color: #5a6069;
}

.rk-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.rk-chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--rk-line-strong);
  border-radius: 6px;
  background: #fff;
  color: var(--rk-ink);
  text-decoration: none;
}

.rk-chip:hover {
  border-color: var(--rk-brand);
  color: var(--rk-brand);
}

.rk-period {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin-left: auto;
  color: var(--rk-ink-soft);
}

.rk-period__label {
  color: var(--rk-ink);
  font-weight: 700;
}

.rk-period__range {
  color: var(--rk-ink);
}

.rk-period__weekly {
  padding: 0 10px;
  border: 1px solid var(--rk-brand);
  border-radius: 999px;
  background: #fff;
  color: var(--rk-brand);
  font-weight: 700;
  white-space: nowrap;
}

/* 見出しの直後の一覧はファーストビューに入るよう上の余白を詰める */
.rk-head + .rk-section {
  padding-top: 28px;
}

/* ---------- セクション ---------- */
.rk-section {
  padding: 48px 0;
}

.rk-section--tint {
  background: var(--rk-tint);
}

.rk-section__head {
  max-width: 760px;
  margin-bottom: 24px;
}

.rk-section__title {
  padding: 2px 0 2px 14px;
  border-left: 5px solid var(--rk-brand);
  font-size: 26px;
  line-height: 1.45;
}

.rk-section__lead {
  margin-top: 10px;
  color: var(--rk-ink-soft);
}

.rk-section__more {
  margin-top: 28px;
  text-align: center;
}

.rk-empty {
  padding: 32px 24px;
  border: 1px dashed var(--rk-line-strong);
  border-radius: var(--rk-radius);
  background: #fff;
  text-align: center;
}

.rk-note {
  margin-top: 20px;
  color: var(--rk-ink-soft);
}

.rk-note:empty {
  display: none;
}

/* ---------- ボタン・リンク ---------- */
.rk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 10px 24px;
  border: 2px solid var(--rk-brand);
  border-radius: var(--rk-radius);
  background: var(--rk-brand);
  color: #fff !important;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}

.rk-btn:hover {
  background: #003670;
  border-color: #003670;
}

.rk-btn--outline {
  min-width: 280px;
  background: #fff;
  color: var(--rk-brand) !important;
}

.rk-btn--outline:hover {
  background: var(--rk-tint);
  border-color: var(--rk-brand);
}

.rk-btn--sub {
  border-color: var(--rk-line-strong);
  background: #fff;
  color: var(--rk-ink) !important;
}

.rk-btn--sub:hover {
  background: var(--rk-tint);
  border-color: var(--rk-ink-soft);
}

.rk-arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  font-weight: 700;
}

.rk-arrow-link::after {
  content: "›";
  font-size: 20px;
  line-height: 1;
}

/* ---------- 順位の変動 ---------- */
.rk-change,
.rk-trend {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-bottom: 6px;
  font-weight: 700;
}

.rk-change__icon {
  margin-right: 6px;
}

.rk-change--up,
.rk-trend__up {
  color: var(--rk-up);
}

.rk-change--down {
  color: var(--rk-down);
}

.rk-change--same {
  color: var(--rk-ink-soft);
}

.rk-change--new {
  color: var(--rk-brand);
}

.rk-trend__move,
.rk-trend__growth {
  color: var(--rk-ink-soft);
  font-weight: 400;
}

/* ---------- 商品カード ---------- */
.rk-list {
  display: grid;
  gap: 16px;
}

.rk-list--podium {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.rk-list__item--row {
  grid-column: 1 / -1;
}

.rk-card {
  position: relative;
  height: 100%;
  border: 1px solid var(--rk-line);
  border-radius: var(--rk-radius);
  background: #fff;
}

.rk-card__rank {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  font-weight: 700;
  color: var(--rk-ink);
}

.rk-card__rank-num {
  font-size: 28px;
  line-height: 1;
}

.rk-card__rank-label {
  margin-right: 4px;
}

.rk-card__media {
  display: flex;
  align-items: center;
  justify-content: center;
}

.rk-card__noimg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1;
  background: var(--rk-tint);
  color: var(--rk-ink-soft);
}

.rk-card__series,
.rk-card__model {
  color: var(--rk-ink-soft);
}

.rk-card__name {
  font-size: 20px;
  line-height: 1.45;
}

.rk-card__link {
  display: inline-block;
  padding: 8px 0;
  color: var(--rk-ink) !important;
  text-decoration: none;
}

.rk-card__link:hover {
  color: var(--rk-brand) !important;
  text-decoration: underline;
}

.rk-spec {
  display: grid;
  gap: 4px;
  margin-top: 12px;
}

.rk-spec__row {
  display: grid;
  grid-template-columns: 5.5em minmax(0, 1fr);
  gap: 8px;
  padding-top: 4px;
  border-top: 1px solid #edf0f3;
}

.rk-spec__label {
  color: var(--rk-ink-soft);
}

.rk-spec__value {
  overflow-wrap: anywhere;
}

.rk-card__buy {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rk-card__price {
  font-weight: 700;
}

.rk-card__price-label {
  display: block;
  color: var(--rk-ink-soft);
  font-weight: 400;
}

.rk-card__price-num {
  font-size: 28px;
  line-height: 1.2;
}

.rk-card__tax {
  font-weight: 400;
}

.rk-card__ended {
  padding: 8px 12px;
  border-radius: 6px;
  background: #eef0f3;
  color: var(--rk-ink);
  font-weight: 700;
}

.rk-card--ended .rk-card__media img {
  filter: grayscale(1);
}

/* 1〜3 位（大きいカード） */
.rk-card--top {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  border-top: 5px solid var(--rk-brand);
}

.rk-card--top .rk-card__rank {
  align-self: flex-start;
  justify-self: start;
  min-width: 72px;
  padding: 8px 14px;
  border-radius: 6px;
  background: var(--rk-brand);
  color: #fff;
}

.rk-card--top .rk-card__rank-num {
  font-size: 32px;
}

.rk-card--rank1 { border-top-color: var(--rk-gold); }
.rk-card--rank1 .rk-card__rank { background: var(--rk-gold); }
.rk-card--rank2 { border-top-color: var(--rk-silver); }
.rk-card--rank2 .rk-card__rank { background: var(--rk-silver); }
.rk-card--rank3 { border-top-color: var(--rk-bronze); }
.rk-card--rank3 .rk-card__rank { background: var(--rk-bronze); }

.rk-card--top .rk-card__media {
  max-width: 220px;
  margin: 0 auto;
}

.rk-card--top .rk-card__name {
  font-size: 22px;
}

.rk-card--top .rk-card__body {
  flex: 1;
}

.rk-card--top .rk-card__buy {
  padding-top: 16px;
  border-top: 1px solid var(--rk-line);
}

/* 4 位以下・急上昇（1 行） */
.rk-card--compact {
  display: grid;
  grid-template-columns: 64px 112px minmax(0, 1fr) 260px;
  gap: 20px;
  align-items: center;
  padding: 16px 20px;
}

.rk-card--compact .rk-card__rank {
  flex-direction: row;
  flex-wrap: wrap;
}

.rk-card--compact .rk-card__media {
  width: 112px;
}

.rk-card--compact .rk-spec {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  column-gap: 20px;
}

/* ---------- 条件から探す・パーツのタイル ---------- */
.rk-entry {
  display: grid;
  gap: 24px;
}

.rk-entry__title {
  margin-bottom: 10px;
  font-size: 20px;
}

.rk-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.rk-tile {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  min-height: 112px;
  padding: 20px 22px;
  border: 1px solid var(--rk-line);
  border-left: 5px solid var(--rk-brand);
  border-radius: var(--rk-radius);
  background: #fff;
  color: var(--rk-ink) !important;
  text-decoration: none;
}

.rk-tile:hover {
  border-color: var(--rk-brand);
}

.rk-tile__label {
  color: var(--rk-brand);
  font-size: 20px;
  font-weight: 700;
}

.rk-tile__label::after {
  content: " ›";
}

.rk-tile__top {
  overflow-wrap: anywhere;
}

.rk-tile__top-rank {
  margin-right: 8px;
  padding: 0 8px;
  border-radius: 4px;
  background: var(--rk-gold);
  color: #fff;
  font-weight: 700;
}

/* ---------- ゲーミングPC の関連ページ（parts/rk_gaming.tpl）。/gaming-pc/ と同じ濃紺の地で区切る ---------- */
.rk-gaming {
  background: linear-gradient(135deg, #0b1022 0%, #161f3a 100%);
  color: #e6ebf5;
}

.rk-gaming__head {
  max-width: 760px;
  margin-bottom: 24px;
}

.rk-gaming__eyebrow {
  margin: 0 0 6px;
  color: #a99bff;
  font-weight: 700;
  letter-spacing: .12em;
}

.rk-gaming__title {
  margin: 0;
  color: #fff;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.4;
}

.rk-gaming__lead {
  margin: 10px 0 0;
  color: #b8c2d9;
}

.rk-gaming__links {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rk-gaming__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 100%;
  min-height: 56px;
  padding: 12px 18px;
  border: 1px solid #43507d;
  border-radius: var(--rk-radius);
  background: rgba(255, 255, 255, .04);
  color: #fff !important;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
  word-break: auto-phrase;
  text-wrap: balance;
}

.rk-gaming__link::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-top: 2px solid #8ccfff;
  border-right: 2px solid #8ccfff;
  transform: rotate(45deg);
}

.rk-gaming__link:hover {
  border-color: #8ccfff;
  background: rgba(140, 207, 255, .12);
}

.rk-gaming__link:focus-visible {
  outline: 3px solid #5fd0ff;
  outline-offset: 2px;
}

@media (max-width: 767px) {
  .rk-gaming__title {
    font-size: 22px;
  }

  .rk-gaming__links {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- パーツランキング ---------- */
.rk-parts {
  display: grid;
  gap: 16px;
}

.rk-part {
  display: grid;
  grid-template-columns: 72px auto minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  padding: 20px;
  border: 1px solid var(--rk-line);
  border-radius: var(--rk-radius);
  background: #fff;
}

.rk-part__rank {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  padding: 6px 0;
  border-radius: 6px;
  background: var(--rk-tint);
  font-weight: 700;
}

.rk-part__rank-num {
  font-size: 28px;
  line-height: 1;
}

.rk-part--top {
  border-top: 5px solid var(--rk-brand);
}

.rk-part--top .rk-part__rank {
  background: var(--rk-brand);
  color: #fff;
}

.rk-part--rank1 { border-top-color: var(--rk-gold); }
.rk-part--rank1 .rk-part__rank { background: var(--rk-gold); }
.rk-part--rank2 { border-top-color: var(--rk-silver); }
.rk-part--rank2 .rk-part__rank { background: var(--rk-silver); }
.rk-part--rank3 { border-top-color: var(--rk-bronze); }
.rk-part--rank3 .rk-part__rank { background: var(--rk-bronze); }

.rk-part__img {
  width: auto;
  max-width: 96px;
  max-height: 96px;
}

.rk-part:not(:has(.rk-part__img)) {
  grid-template-columns: 72px minmax(0, 1fr);
}

.rk-part__maker {
  color: var(--rk-ink-soft);
}

.rk-part__name {
  font-size: 20px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.rk-part__summary {
  margin-top: 6px;
  color: var(--rk-ink-soft);
}

.rk-part__pcs {
  margin-top: 12px;
  padding: 12px 16px;
  border-radius: 6px;
  background: var(--rk-tint);
}

.rk-part__pcs-title {
  font-weight: 700;
}

.rk-part__pcs-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
}

/* 採用している PC の検索結果へのリンク（商品検索・スペック検索） */
.rk-part__search {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-top: 12px;
}

.rk-part__search-title {
  font-weight: 700;
}

.rk-part__search-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.rk-part__search-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid var(--rk-brand);
  border-radius: 6px;
  background: #fff;
  color: var(--rk-brand) !important;
  font-weight: 700;
  text-decoration: none;
}

.rk-part__search-link::after {
  content: "›";
  font-size: 20px;
  line-height: 1;
}

.rk-part__search-link:hover {
  background: var(--rk-brand);
  color: #fff !important;
}

/* ---------- 急上昇の条件 ---------- */
.rk-rule {
  margin-bottom: 24px;
  padding: 20px 24px;
  border-left: 5px solid var(--rk-brand);
  border-radius: 0 var(--rk-radius) var(--rk-radius) 0;
  background: var(--rk-tint);
}

.rk-rule__title {
  font-size: 20px;
}

.rk-rule__list {
  margin-top: 8px;
  padding-left: 1.2em !important;
  list-style: disc !important;
}

.rk-rule__order {
  margin-top: 8px;
}

/* ---------- 集計方法・FAQ ---------- */
.rk-about {
  border-top: 1px solid var(--rk-line);
}

.rk-about__list {
  border-top: 1px solid var(--rk-line);
}

.rk-about__row {
  display: grid;
  grid-template-columns: 12em minmax(0, 1fr);
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rk-line);
}

.rk-about__row dt {
  font-weight: 700;
}

.rk-faq__title {
  margin: 36px 0 12px;
  font-size: 22px;
}

.rk-faq {
  display: grid;
  gap: 10px;
}

.rk-faq__item {
  border: 1px solid var(--rk-line);
  border-radius: var(--rk-radius);
  background: #fff;
}

.rk-faq__q {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 12px 20px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.rk-faq__q::-webkit-details-marker {
  display: none;
}

.rk-faq__q::before {
  content: "Q";
  flex: none;
  color: var(--rk-brand);
  font-size: 20px;
}

.rk-faq__q::after {
  content: "＋";
  margin-left: auto;
  color: var(--rk-brand);
}

.rk-faq__item[open] .rk-faq__q::after {
  content: "－";
}

.rk-faq__a {
  padding: 0 20px 16px 52px;
}

/* ---------- ランキング間のナビ ---------- */
/* ---------- ランキング間のナビ（H1 の下のタブ） ---------- */
.rk-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 32px;
  margin-top: 8px;
  border-bottom: 1px solid var(--rk-line-strong);
}

.rk-nav__group {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
}

.rk-nav__title {
  color: var(--rk-ink-soft);
  font-weight: 700;
  white-space: nowrap;
}

/* 入りきらない幅では行ごとに横スクロール（隠さない） */
.rk-nav__list {
  display: flex;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}

.rk-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 10px;
  border-bottom: 3px solid transparent;
  color: var(--rk-ink) !important;
  text-decoration: none;
  white-space: nowrap;
}

.rk-nav__link:hover {
  color: var(--rk-brand) !important;
  border-bottom-color: var(--rk-line-strong);
}

.rk-nav__link[aria-current="page"] {
  border-bottom-color: var(--rk-brand);
  color: var(--rk-brand) !important;
  font-weight: 700;
}

/* エラー画面（unavailable.tpl）の説明文 */
.rk-head__lead {
  margin-top: 16px;
  color: var(--rk-ink-soft);
}

/* ---------- 〜1023px ---------- */
@media (max-width: 1023px) {
  /* 共通ヘッダー（position: fixed）内のパンくずが折り返すとヘッダーだけ高くなり H1 に重なるため、この画面では 1 行で横スクロールにする */
  .rk-body .topic-path {
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .rk-body .topic-path::-webkit-scrollbar {
    display: none;
  }

  .rk-list--podium {
    grid-template-columns: minmax(0, 1fr);
  }

  .rk-card--top {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    grid-template-areas:
      "rank rank"
      "media body"
      "buy buy";
    gap: 16px 24px;
  }

  .rk-card--top .rk-card__rank { grid-area: rank; }
  .rk-card--top .rk-card__media { grid-area: media; margin: 0; }
  .rk-card--top .rk-card__body { grid-area: body; }
  .rk-card--top .rk-card__buy { grid-area: buy; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }

  .rk-card--compact {
    grid-template-columns: 56px 96px minmax(0, 1fr);
    grid-template-areas:
      "rank media body"
      "buy buy buy";
  }

  .rk-card--compact .rk-card__rank { grid-area: rank; }
  .rk-card--compact .rk-card__media { grid-area: media; width: 96px; }
  .rk-card--compact .rk-card__body { grid-area: body; }
  .rk-card--compact .rk-card__buy { grid-area: buy; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }

  .rk-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- 〜767px ---------- */
@media (max-width: 767px) {
  .rk-wrap {
    padding: 0 16px;
  }

  .rk-head {
    padding: 16px 0;
  }

  .rk-head__title {
    font-size: 24px;
  }

  .rk-period {
    margin-left: 0;
  }

  .rk-filter {
    gap: 10px 20px;
    margin-top: 12px;
    padding: 12px;
  }

  .rk-filter__group {
    flex-basis: 100%;
  }

  .rk-filter__legend {
    flex: 0 0 4.5em;
  }

  .rk-filter__group--wide .rk-filter__legend {
    flex-basis: 100%;
  }

  .rk-seg {
    gap: 6px;
  }

  .rk-seg__item {
    padding: 8px 12px;
  }

  .rk-seg__long {
    display: none;
  }

  .rk-seg__short {
    display: inline;
  }

  .rk-head + .rk-section {
    padding-top: 20px;
  }

  .rk-section {
    padding: 36px 0;
  }

  .rk-section__title {
    font-size: 22px;
  }

  .rk-btn--outline {
    width: 100%;
    min-width: 0;
  }

  .rk-card--top {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "rank"
      "media"
      "body"
      "buy";
    padding: 20px 16px;
  }

  .rk-card--top .rk-card__media {
    max-width: 200px;
    margin: 0 auto;
  }

  .rk-card--compact {
    grid-template-columns: 56px 96px minmax(0, 1fr);
    grid-template-areas:
      "rank media ."
      "body body body"
      "buy buy buy";
    gap: 12px;
    padding: 16px;
  }

  .rk-card--compact .rk-spec {
    grid-template-columns: minmax(0, 1fr);
  }

  .rk-card__rank-num {
    font-size: 24px;
  }

  .rk-card__buy .rk-btn {
    width: 100%;
  }

  .rk-tiles {
    grid-template-columns: minmax(0, 1fr);
  }

  .rk-part {
    grid-template-columns: 56px auto minmax(0, 1fr);
    gap: 12px;
    padding: 16px;
  }

  .rk-part:not(:has(.rk-part__img)) {
    grid-template-columns: 56px minmax(0, 1fr);
  }

  .rk-part__img {
    max-width: 64px;
    max-height: 64px;
  }

  .rk-about__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

  .rk-faq__a {
    padding-left: 20px;
  }

  .rk-nav__group {
    flex-basis: 100%;
  }

  .rk-nav__title {
    flex: 0 0 5em;
  }

  /* スクロールバーの代わりに右端を薄くして続きがあることを示す（表示中のタブは ranking_nav.js が見える位置へ寄せる） */
  .rk-nav__list {
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }

  .rk-nav__list::-webkit-scrollbar {
    display: none;
  }
}