/* ==========================================================================
   Family One 人気ランキング（2026-08-07 表示の全面見直し）

   【なぜ専用ファイルにするか】
   /familyone/ 配下は family_one_output_page() が独自のHTMLを組み立てており
   wp_head() を呼ばない。そのため wp_enqueue_style() で登録したCSSは届かない。
   （この不具合により css/family-one-score.css の .f1-rrow 系は
   ランキング画面に一度も適用されていなかった。順位が「1.1」「2.2」と
   見えていたのは、olの既定マーカーと順位表示が二重に出ていたため。）
   このファイルは family_one_output_page_before_content で直接linkを出す。

   【順位と表示の分離】
   掲載プランの契約は順位計算に一切影響しない。
   ここで差を付けるのは「情報量と視認性」だけ。
     有料掲載 … 写真・特徴タグ・紹介文・Family Score・操作ボタンまで出す
     一般掲載 … 順位・施設名・カテゴリ・Google評価・詳細リンクのみ
   ========================================================================== */

.f1-rank-page {
  --rk-ink: #243b53;
  --rk-ink-soft: #627d98;
  --rk-line: #e2e8f0;
  --rk-gold: #b7791f;
  --rk-gold-bg: #fffbeb;
  --rk-gold-line: #fbd38d;
  --rk-silver: #64748b;
  --rk-silver-bg: #f8fafc;
  --rk-silver-line: #cbd5e1;
  --rk-bronze: #b45309;
  --rk-bronze-bg: #fffaf5;
  --rk-bronze-line: #fcd9b6;
}

/* --------------------------------------------------------------------------
   1. 見出し（何のランキングかを、読まなくても分かるように）
   -------------------------------------------------------------------------- */
.f1-rank-head { margin: 4px 0 14px; }
.f1-rank-head__eyebrow {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--rk-ink-soft);
}
.f1-rank-head__title {
  margin: 0;
  font-size: 24px;
  line-height: 1.35;
  font-weight: 800;
  color: var(--rk-ink);
  overflow-wrap: anywhere;
}
.f1-rank-head__title .f1-rank-head__cat { color: #2b6cb0; }
.f1-rank-head__basis {
  margin: 8px 0 0;
  padding: 9px 12px;
  background: #f7fafc;
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--rk-ink-soft);
}
.f1-rank-head__basis a { color: #2b6cb0; font-weight: 700; white-space: nowrap; }
.f1-rank-head__meta {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--rk-ink-soft);
}

/* --------------------------------------------------------------------------
   2. カテゴリ切り替え（横スクロールのタブ）
   -------------------------------------------------------------------------- */
.f1-rank-cats { margin: 0 0 16px; }
.f1-rank-cats__label {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--rk-ink-soft);
}
.f1-rank-cats__scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 2px 8px;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.f1-rank-cats__scroll::-webkit-scrollbar { height: 6px; }
.f1-rank-cats__scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
.f1-rank-cat {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 15px;
  border: 1px solid var(--rk-line);
  border-radius: 999px;
  background: #fff;
  color: #486581;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
.f1-rank-cat:hover { background: #f7fafc; border-color: #cbd5e1; }
.f1-rank-cat__count { font-size: 11px; font-weight: 600; color: #94a3b8; }
.f1-rank-cat--on {
  background: #2b6cb0;
  border-color: #2b6cb0;
  color: #fff;
}
.f1-rank-cat--on:hover { background: #2c5282; border-color: #2c5282; }
.f1-rank-cat--on .f1-rank-cat__count { color: rgba(255, 255, 255, .8); }

/* --------------------------------------------------------------------------
   3. 一覧の枠（順位はolの既定マーカーではなく、必ず自前の表示だけを使う）
   -------------------------------------------------------------------------- */
.f1-rlist__note {
  margin: 0 0 12px;
  padding: 9px 12px;
  background: #f7fafc;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.75;
  color: var(--rk-ink-soft);
}
.f1-rlist {
  list-style: none !important;   /* olの「1.」が順位表示と二重に出るのを防ぐ */
  margin: 0 0 18px;
  padding: 0;
  display: flex;
  flex-direction: column;        /* PCでも横に並べない。ランキングは必ず縦1列 */
  gap: 10px;
  counter-reset: none;
}
.f1-rlist > li { list-style: none !important; }
.f1-rlist > li::marker { content: none; }

/* --------------------------------------------------------------------------
   4. 1行＝1施設
   -------------------------------------------------------------------------- */
.f1-rrow {
  position: relative;
  display: block;
  padding: 12px 14px;
  border: 1px solid var(--rk-line);
  border-radius: 12px;
  background: #fff;
}

/* 順位の帯。上位3件はメダル色で強くする。 */
.f1-rrow__rankbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
}
.f1-rrow__medal { font-size: 21px; line-height: 1; }
.f1-rrow__rank {
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  color: var(--rk-ink);
  font-variant-numeric: tabular-nums;
}
.f1-rrow__rank em {
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
  margin-left: 1px;
}
.f1-rrow__rank--pr {
  font-size: 12px;
  padding: 3px 9px;
  border-radius: 999px;
  background: #edf2f7;
  color: var(--rk-ink-soft);
}
.f1-rrow__move {
  font-size: 12px;
  font-weight: 700;
  margin-left: auto;
}
.f1-rrow__move--up { color: #2f855a; }
.f1-rrow__move--down { color: #c53030; }
.f1-rrow__move--flat { color: #a0aec0; }

/* 上位3件 */
.f1-rrow--gold   { border-color: var(--rk-gold-line);   background: var(--rk-gold-bg);   border-width: 2px; }
.f1-rrow--silver { border-color: var(--rk-silver-line); background: var(--rk-silver-bg); }
.f1-rrow--bronze { border-color: var(--rk-bronze-line); background: var(--rk-bronze-bg); }
.f1-rrow--gold   .f1-rrow__rank { color: var(--rk-gold);   font-size: 24px; }
.f1-rrow--silver .f1-rrow__rank { color: var(--rk-silver); font-size: 23px; }
.f1-rrow--bronze .f1-rrow__rank { color: var(--rk-bronze); font-size: 23px; }
.f1-rrow--gold   .f1-rrow__name { font-size: 19px; }
.f1-rrow--silver .f1-rrow__name,
.f1-rrow--bronze .f1-rrow__name { font-size: 17px; }

/* 施設名まわり */
.f1-rrow__head { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.f1-rrow__name {
  font-size: 16px;
  font-weight: 700;
  color: var(--rk-ink);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.f1-rrow__name:hover { text-decoration: underline; }

/* 「施設情報充実」。品質の保証ではなく“情報量が多い”ことを示すラベル。
   認定バッジ（★）と紛らわしくならないよう、色も形も分ける。 */
.f1-rrow__rich-badge {
  padding: 2px 9px;
  border-radius: 4px;
  white-space: nowrap;
  background: #ebf4ff;
  border: 1px solid #bee3f8;
  color: #2c5282;
  font-size: 11px;
  font-weight: 700;
}
.f1-rrow__current {
  padding: 2px 9px;
  border-radius: 999px;
  white-space: nowrap;
  background: #e6f4ea;
  color: #22543d;
  font-size: 11px;
  font-weight: 700;
}

.f1-rrow__meta {
  margin: 5px 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  font-size: 12.5px;
  color: var(--rk-ink-soft);
}
.f1-rrow__type {
  padding: 2px 8px;
  border-radius: 4px;
  background: #edf2f7;
  color: #486581;
  font-weight: 700;
  font-size: 11.5px;
}
.f1-rrow__rating { font-weight: 700; color: var(--rk-gold); }
.f1-rrow__rating small { font-weight: 400; color: var(--rk-ink-soft); }
.f1-rrow__rating--f1 { color: #2f855a; }
.f1-rrow__fscore { font-weight: 700; color: #2b6cb0; }

/* 有料掲載のみ：写真＋紹介文 */
.f1-rrow__main { display: flex; gap: 12px; align-items: flex-start; }
.f1-rrow__photo {
  flex: 0 0 auto;
  display: block;
  width: 96px;
  height: 96px;
  border-radius: 10px;
  overflow: hidden;
  background: #f0f4f8;
}
.f1-rrow__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.f1-rrow__photo--placeholder { display: flex; align-items: center; justify-content: center; color: #a0aec0; }
.f1-rrow__body { min-width: 0; flex: 1 1 auto; }
.f1-rrow__pr {
  margin: 7px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: #486581;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.f1-rrow__tags { margin: 7px 0 0; display: flex; flex-wrap: wrap; gap: 5px; }
.f1-rrow__tag {
  padding: 3px 9px;
  border-radius: 4px;
  background: #f0f4f8;
  font-size: 11.5px;
  color: #486581;
  white-space: nowrap;
}
/* 評価に反映されている取組は、施設が自己申告した特徴タグと区別する */
.f1-rrow__tag--eval {
  background: #f0fff4;
  border: 1px solid #c6f6d5;
  color: #276749;
  font-weight: 700;
}

.f1-rrow__cta {
  margin: 10px 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.f1-rrow__btn { font-size: 13px; padding: 8px 16px; }
.f1-rrow__fav { font-size: 12px; }

/* 一般掲載はできるだけ簡潔に。行の高さも抑える。 */
.f1-rrow--free { padding: 10px 14px; }
.f1-rrow--free .f1-rrow__rankbar { margin-bottom: 5px; }

/* --------------------------------------------------------------------------
   5. スマホ：順位 → 施設名 → 写真・特徴 → 詳細 の縦移動だけで読めるようにする
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
  .f1-rank-head__title { font-size: 20px; }
  .f1-rrow { padding: 11px 12px; border-radius: 10px; }
  .f1-rrow__main { display: block; }           /* 写真を横に置かず、名前の下へ回す */
  .f1-rrow__photo {
    width: 100%;
    height: 150px;
    margin: 9px 0 0;
    border-radius: 8px;
  }
  .f1-rrow--gold .f1-rrow__name { font-size: 17px; }
  .f1-rrow--silver .f1-rrow__name,
  .f1-rrow--bronze .f1-rrow__name { font-size: 16px; }
  .f1-rrow__cta { gap: 6px; }
  .f1-rrow__btn { flex: 1 1 auto; text-align: center; font-size: 12.5px; padding: 9px 10px; }
  .f1-rank-cat { padding: 7px 13px; font-size: 13px; }
}

/* 写真を横並びに戻すのはタブレット以上。スマホでは常に縦。 */
@media (min-width: 601px) {
  .f1-rrow--paid .f1-rrow__photo { width: 110px; height: 110px; }
  .f1-rrow--gold.f1-rrow--paid .f1-rrow__photo { width: 140px; height: 140px; }
}