/* ==========================================================================
   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: 14px;              /* カード同士の間隔。境界が分かる程度に空ける */
  counter-reset: none;
}
.f1-rlist > li { list-style: none !important; }
.f1-rlist > li::marker { content: none; }

/* --------------------------------------------------------------------------
   4. 1行＝1施設
   -------------------------------------------------------------------------- */
/* 1施設＝1カード。
   以前は border-color が --rk-line（#e2e8f0）の1pxだけで、4位以降は
   白背景に極薄の枠線という状態だった。1〜3位はメダル色の背景があるため
   区別できていたが、それ以降は施設同士の境界が見えず、縦に文字が
   並んでいるだけに見えていた。枠線を濃くし、影と余白で1枚ずつ独立させる。 */
.f1-rrow {
  position: relative;
  display: block;
  padding: 14px 16px;
  border: 1px solid #cbd5e1;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(36, 59, 83, 0.06), 0 1px 1px rgba(36, 59, 83, 0.04);
}

/* 口コミを書く（「詳細を見る」と並列のサブボタン）。
   主導線（詳細を見る）とぶつからないよう、枠線のみの控えめな見た目にする。
   Family One既存のロイヤルブルー系（--dc3-primary）に合わせる。 */
.f1-rrow__review-btn {
  border: 1px solid var(--dc3-primary, #2b4c8c);
  background: #fff;
  color: var(--dc3-primary, #2b4c8c);
  white-space: nowrap;
}
.f1-rrow__review-btn:hover,
.f1-rrow__review-btn:focus {
  background: var(--dc3-primary, #2b4c8c);
  color: #fff;
  text-decoration: none;
}

.f1-rrow__rankbar { flex-wrap: wrap; }

@media (max-width: 380px) {
  .f1-rrow { padding: 12px 13px; }
}

/* --------------------------------------------------------------------------
   PCでの横幅の使い方（2026-08-11）

   Family Oneの共通ラッパー .f1-wrap は max-width:720px で、読み物としては
   ちょうどよいが、ランキングでは1440px以上のPCで左右に大きな余白が残り、
   カードだけが細く伸びていた。ランキングのページに限って横幅を広げる。
   （.f1-wrap 自体は変更しない。他のFamily Oneページの体裁を動かさないため）

   縦1列は維持する。ランキングは順位を上から読むものなので、多段組みにすると
   1位と2位が横に並んで「どちらが上位か」が読み取りにくくなる。
   広げた幅は、カードの中を「写真｜情報｜操作」の3列にして使う。
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .f1-wrap.f1-rank-page,
  .f1-wrap.f1-crank { max-width: 1000px; }
}
@media (min-width: 1440px) {
  .f1-wrap.f1-rank-page,
  .f1-wrap.f1-crank { max-width: 1120px; }
}

/* --------------------------------------------------------------------------
   PCは2列カード（2026-08-11）

   以前は「PCでも縦1列」としていたが、1440px以上では1枚のカードが横に
   間延びし、1画面に3〜4件しか入らなかった。2列にすると1画面で比較でき、
   横幅も使い切れる。

   順位は必ず「左→右、上→下」の順に読める並び（grid の既定の行方向）で、
   1位が左上に来る。多段組みでも順位が入れ替わることはない。

   1〜3位はメダル色の背景と枠で区別する（既存）。カードの大きさは
   順位で変えない。1位だけ大きくすると、有料掲載が上位に来たときに
   「契約で優遇している」ように見えてしまうため。
   -------------------------------------------------------------------------- */
/* PCは「縦1列の横長カード」を3ブロックで組む（2026-08-11 整理）
     左 20〜22%：順位＋施設写真
     中央 55〜60%：施設情報
     右 20〜23%：操作ボタン
   ランキングは上から順に比較するページなので多段組みにしない。
   1画面に3〜4件見える密度を目標に、カード高さを抑える。 */
@media (min-width: 860px) {
  .f1-rlist { display: flex; flex-direction: column; gap: 14px; }

  .f1-rrow { padding: 14px 18px; }

  /* Flexで「順位｜写真｜情報｜操作」。写真が無ければ要素ごと存在しないので、
     幅も予約されず、施設情報が自動的に左へ詰まる。 */
  .f1-rrow__main {
    display: flex;
    align-items: flex-start;
    gap: 16px;
  }

  /* 左：順位。幅を固定して施設名の開始位置を揃える */
  .f1-rrow__lead { flex: 0 0 58px; }
  .f1-rrow__rankbar {
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-start;
    gap: 3px;
    margin: 0;
  }
  .f1-rrow__move { margin-left: 0; }

  /* 写真は16:10で統一。写真を主役にしないため100〜120pxに抑える */
  .f1-rrow__photo {
    flex: 0 0 112px;
    width: 112px;
    height: auto;
    aspect-ratio: 16 / 10;
    border-radius: 10px;
  }
  .f1-rrow__photo img { width: 100%; height: 100%; object-fit: cover; }

  /* 中央：情報。行間を詰めて中央に大きな空白を作らない */
  .f1-rrow__body { display: block; min-width: 0; flex: 1 1 auto; }
  .f1-rrow__head { margin-bottom: 2px; }
  .f1-rrow__meta { margin: 2px 0 0; row-gap: 4px; }
  .f1-rrow__tags { margin-top: 4px; }
  .f1-rrow__pr {
    margin-top: 5px;
    -webkit-line-clamp: 2;          /* 紹介文は2行で省略 */
    font-size: 12.5px;
    line-height: 1.6;
  }

  /* 右：ボタン縦2段・同じ幅・やや小さめ */
  .f1-rrow__cta {
    flex: 0 0 164px;
    margin: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 7px;
  }
  .f1-rrow__btn { width: 100%; text-align: center; font-size: 12.5px; padding: 7px 10px; }
}

@media (min-width: 1200px) {
  .f1-rrow__photo { flex-basis: 120px; width: 120px; }
}

/* ホーム画面の抜粋（compact）：写真・紹介文・タグを出さないぶん低く収める */
@media (min-width: 860px) {
  .f1-rrow--compact { padding: 11px 16px; }
  .f1-rrow--compact .f1-rrow__cta { flex-basis: 140px; }
}

/* --------------------------------------------------------------------------
   副次操作（くらべる・お気に入り）
   主操作と同じ大きさのボタンにすると、有料掲載のカードだけ縦に伸びて
   一覧の高さが揃わなくなる。小さな文字リンクとしてまとめる。
   -------------------------------------------------------------------------- */
.f1-rrow__cta-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 10px;
  margin-top: 2px;
  font-size: 11.5px;
  line-height: 1.4;
}
.f1-rrow__sublink,
.f1-rrow__cta-sub .wpfp-link,
.f1-rrow__cta-sub a {
  font-size: 11.5px;
  color: var(--rk-ink-soft, #627d98);
  text-decoration: underline;
  background: none;
  border: 0;
  padding: 0;
  min-height: 0;
  cursor: pointer;
}
.f1-rrow__sublink:hover,
.f1-rrow__cta-sub a:hover { color: var(--dc3-primary, #2b4c8c); }
.f1-rrow__fav { font-size: 11.5px; }

/* 特徴タグは1行に収め、はみ出しても折り返さない（＋Nで省略済み） */
.f1-rrow__tags { display: flex; flex-wrap: nowrap; overflow: hidden; gap: 5px; }
.f1-rrow__tag--more { color: var(--rk-ink-soft, #627d98); }

/* 順位の帯。上位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; }
  /* スマホは1列。カード上部に写真、その下に施設情報。
     高さを固定すると端末幅によって比率が崩れるため、比率で指定する。 */
  .f1-rrow__main { display: block; }
  .f1-rrow__photo {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    margin: 2px 0 11px;
    border-radius: 8px;
  }
  .f1-rrow__photo img { aspect-ratio: 16 / 10; }
  /* 写真が無い施設で不自然な空白を作らない（要素自体が出力されないため余白も出ない） */
  .f1-rrow__main > .f1-rrow__body:first-child { margin-top: 0; }
  .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; }
}

/* 写真を横並びに戻すのはタブレット以上。スマホでは常に縦。 */
/* 【2026-08-11 撤去】以前はここで
     .f1-rrow--paid            .f1-rrow__photo { width:110px }
     .f1-rrow--gold.f1-rrow--paid .f1-rrow__photo { width:140px }
   として、有料掲載だと写真が大きく、さらに1位かつ有料だともっと大きくなっていた。

   写真は掲載区分に関わらず登録があれば出す方針へ変えたため、
   契約の有無や順位で大きさを変えると「契約で優遇している」ように見える。
   写真の大きさは全カード共通とし、順位はメダルと背景色でのみ区別する。
   （サイズ指定は上の共通ブロックに一本化した） */

/* ==========================================================================
   Family One Passport ブランド仕上げ（2026-08-11）

   狙い：「行政情報サイトの信頼感」＋「子育てサービスの親しみやすさ」
         ＋「Passportブランドの上質感」。
   白・淡いブルー・ごく薄いグレーを土台に、ロイヤルブルーは
   「重要な情報だけ」に使う。線で囲うのではなく、白い面がわずかに浮く。

   ここは見た目だけを扱う。順位・スコア・判定・データには一切触れない。
   ========================================================================== */

/* 変数は .f1-rank-page だけでなく、カードを描くどこでも効くようにする
   （ホーム・トップページでもランキングカードを使うため） */
.f1-rlist,
.f1-rrow {
  --fo-blue: var(--dc3-brand-blue, #247bfb);
  --fo-blue-deep: #1b4f9c;
  --fo-blue-pale: #eef4fd;
  --fo-blue-line: #cfe0f7;
  --fo-ink: #172b4d;
  --fo-ink-soft: #5b6b85;
  --fo-line: #e4eaf2;
  --fo-surface: #f7f9fc;
  --fo-gold: #9a7b21;
  --fo-gold-bg: #fdf7e7;
  --fo-silver: #5c6b7a;
  --fo-silver-bg: #f4f6f9;
  --fo-bronze: #97602f;
  --fo-bronze-bg: #fbf2ea;
}

/* ---- 1. カード：黒枠をやめ、白い面がわずかに浮く ---- */
.f1-rrow {
  background: #fff;
  border: 1px solid var(--fo-line);
  border-radius: 15px;
  box-shadow: 0 3px 12px rgba(20, 45, 90, 0.06);
  transition: box-shadow .18s ease, border-color .18s ease;
}
.f1-rrow:hover {
  border-color: var(--fo-blue-line);
  box-shadow: 0 6px 18px rgba(20, 45, 90, 0.10);
}

/* 1〜3位もカード面は白のまま。順位部分だけにアクセントを置く
   （カード全体を金銀銅にすると「順位を買っている」ように見えるため） */
.f1-rrow--gold,
.f1-rrow--silver,
.f1-rrow--bronze {
  background: #fff;
  border-width: 1px;
  border-color: var(--fo-line);
}

/* ---- 2. ランキングエリアの背景（白いカードが自然に浮くように） ---- */
.f1-rlist {
  background: var(--fo-surface);
  border-radius: 16px;
  padding: 14px;
  gap: 11px;
}

/* ---- 3. 順位：数字は控えめ、1〜3位のみ淡いアクセント ---- */
.f1-rrow__rankbar { align-items: center; }
.f1-rrow__rank {
  font-size: 15px;
  font-weight: 800;
  color: var(--fo-ink-soft);
  letter-spacing: 0;
}
.f1-rrow__rank em { font-size: 11px; font-weight: 700; margin-left: 1px; }
.f1-rrow__medal { font-size: 15px; }

.f1-rrow--gold .f1-rrow__rank,
.f1-rrow--silver .f1-rrow__rank,
.f1-rrow--bronze .f1-rrow__rank {
  display: inline-flex;
  align-items: baseline;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 15px;
}
.f1-rrow--gold   .f1-rrow__rank { color: var(--fo-gold);   background: var(--fo-gold-bg); }
.f1-rrow--silver .f1-rrow__rank { color: var(--fo-silver); background: var(--fo-silver-bg); }
.f1-rrow--bronze .f1-rrow__rank { color: var(--fo-bronze); background: var(--fo-bronze-bg); }

/* ---- 5. 写真：太い枠を付けず、角丸だけ ---- */
.f1-rrow__photo { border: 0; border-radius: 11px; background: var(--fo-surface); }
.f1-rrow__photo img { border-radius: 11px; }

/* ---- 6. 施設名：カード内で最も読みやすく。最大2行 ---- */
.f1-rrow__name {
  font-weight: 700;
  color: var(--fo-ink);
  font-size: 16px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.f1-rrow__name:hover { color: var(--fo-blue-deep); }
.f1-rrow--gold .f1-rrow__name,
.f1-rrow--silver .f1-rrow__name,
.f1-rrow--bronze .f1-rrow__name { font-size: 16.5px; }

/* ---- 7. 認定：小型バッジ。星は出さずラベルで示す ---- */
.f1-rrow .f1-cert__stars { display: none; }
.f1-rrow .f1-cert {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--fo-blue-pale);
  border: 1px solid var(--fo-blue-line);
  color: var(--fo-blue-deep);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}
.f1-rrow .f1-cert--premium,
.f1-rrow .f1-cert--gold {
  background: var(--fo-gold-bg);
  border-color: #ecd9a3;
  color: var(--fo-gold);
}

/* ---- 3(色の役割)・8・9：補助情報はグレー、重要だけ濃色 ---- */
.f1-rrow__type {
  background: var(--fo-blue-pale);
  border: 0;
  color: var(--fo-blue-deep);
  font-size: 11.5px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
}
.f1-rrow__meta { color: var(--fo-ink-soft); font-size: 12.5px; }

/* Google評価：星だけゴールド、文字はグレー */
.f1-rrow__rating { font-weight: 600; color: var(--fo-ink-soft); }
.f1-rrow__rating small { color: #8a99ad; font-weight: 400; }
.f1-rrow__rating--f1 { color: var(--fo-ink-soft); }

/* Family Score：1行。数字だけ太く。順位より強く見せない */
.f1-rrow__fscore {
  color: var(--fo-ink-soft);
  font-weight: 500;
  font-size: 12.5px;
}
.f1-rrow__fscore small { color: #8a99ad; font-weight: 400; font-size: 10.5px; margin-left: 2px; }

/* 特徴タグ：ごく薄いグレー地 */
.f1-rrow__tag {
  background: #f2f5f9;
  border: 0;
  color: var(--fo-ink-soft);
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 6px;
}
.f1-rrow__pr { color: var(--fo-ink-soft); }

/* 「施設情報充実」バッジも主張を弱める */
.f1-rrow__rich-badge {
  background: #f2f5f9;
  border: 0;
  color: #7a889c;
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 6px;
}

/* ---- 10. ボタン ---- */
.f1-rrow__btn {
  border-radius: 11px;
  font-weight: 700;
  letter-spacing: 0;
}
.f1-rrow__cta .f1-btn--primary {
  background: var(--fo-blue);
  border-color: var(--fo-blue);
  color: #fff;
}
.f1-rrow__cta .f1-btn--primary:hover { background: var(--fo-blue-deep); border-color: var(--fo-blue-deep); }
.f1-rrow__review-btn {
  background: #fff;
  border: 1px solid var(--fo-blue-line);
  color: var(--fo-blue-deep);
}
.f1-rrow__review-btn:hover,
.f1-rrow__review-btn:focus { background: var(--fo-blue-pale); color: var(--fo-blue-deep); }

/* 比較・お気に入りは小型テキストリンク（♡は装飾なのでCSSで付ける） */
.f1-rrow__cta-sub { color: var(--fo-ink-soft); }
.f1-rrow__fav::before { content: "♡ "; }

/* ---- 13. 見出し：タイトル＋短い説明の2階層 ---- */
.f1-ranking-highlight__title {
  color: var(--fo-ink);
  font-weight: 800;
  letter-spacing: .01em;
}
.f1-ranking-highlight__lead {
  color: var(--fo-ink-soft);
  font-size: 12.5px;
  margin-top: 2px;
}

/* 免責文は内容を変えずに、目立たせない（読める大きさは保つ） */
.f1-rlist__note {
  background: #fff;
  border: 1px solid var(--fo-line);
  border-radius: 10px;
  color: #7a889c;
  font-size: 11.5px;
  line-height: 1.7;
  padding: 9px 12px;
  margin-bottom: 11px;
}
.f1-rlist__note strong { color: var(--fo-ink-soft); }

/* ---- 11・14. 余白と横幅 ---- */
@media (min-width: 860px) {
  .f1-rrow { padding: 16px 18px; }
  .f1-rrow__main { gap: 15px; }
  .f1-rrow__head { margin-bottom: 3px; }
  .f1-rrow__meta { margin-top: 4px; }
  .f1-rrow__btn { padding: 8px 10px; font-size: 12.5px; }
  .f1-rrow__cta { flex: 0 0 156px; gap: 7px; }
}
@media (min-width: 1440px) {
  .f1-wrap.f1-rank-page,
  .f1-wrap.f1-crank { max-width: 1000px; }
}

/* ---- 12. ホームは簡易カード（同じデザイン言語のまま密度だけ上げる） ---- */
.f1-rrow--compact { box-shadow: 0 2px 8px rgba(20, 45, 90, 0.05); }
.f1-rrow--compact .f1-rrow__name { font-size: 15px; -webkit-line-clamp: 1; }
@media (min-width: 860px) {
  .f1-rrow--compact { padding: 12px 16px; }
}

/* ---- 15. スマホ：縦積み。CTAは横幅100% ---- */
@media (max-width: 859px) {
  .f1-rlist { padding: 10px; gap: 10px; }
  .f1-rrow__cta { flex-direction: row; gap: 8px; }
  .f1-rrow__btn { flex: 1 1 0; min-width: 0; }
  .f1-rrow__cta-sub { justify-content: flex-start; margin-top: 6px; }
}
@media (max-width: 420px) {
  .f1-rrow__cta { flex-direction: column; }
}

/* ==========================================================================
   レイアウト確定（2026-08-11）

   直した2点
   ① 右のボタンがカード枠からはみ出していた
      → .f1-rrow__main を Flex から Grid へ。列幅を明示し、中央だけを
        minmax(0, 1fr) で伸縮させる。Flexだと中央の中身（タグの nowrap 等）が
        縮みきらず、右列が押し出されて枠を越えることがあった。
        overflow:hidden で隠すのではなく、計算で収める。
   ② 比較・お気に入りの有無でカード高さが変わっていた
      → 副次操作の領域を常に置き（PHP側）、min-height で高さを固定する。
        機能が無い施設に偽のボタンは出さない。
   ========================================================================== */

.f1-rrow,
.f1-rrow *,
.f1-rlist { box-sizing: border-box; }

@media (min-width: 860px) {
  /* カード本体：横幅いっぱい・中央寄せ・padding込みの幅計算 */
  .f1-rlist { max-width: 960px; margin-left: auto; margin-right: auto; }
  .f1-rrow { width: 100%; padding: 16px 18px; }

  /* 順位 ｜ 写真 ｜ 情報 ｜ 操作 の4列。中央だけが伸縮する */
  .f1-rrow__main {
    display: grid;
    grid-template-columns: 58px 112px minmax(0, 1fr) 150px;
    gap: 16px;
    align-items: start;
    width: 100%;
  }
  /* 写真が無いカードは写真列を作らない（空枠を出さない） */
  .f1-rrow--nophoto .f1-rrow__main {
    grid-template-columns: 58px minmax(0, 1fr) 150px;
  }

  .f1-rrow__lead  { min-width: 0; }
  .f1-rrow__photo { width: 100%; max-width: 112px; min-width: 0; flex: none; }
  .f1-rrow__body  { min-width: 0; }

  /* 右列：カード内部に必ず収める。押し出し系の指定は使わない */
  .f1-rrow__cta {
    width: 100%;
    max-width: 150px;
    min-width: 0;
    margin: 0;                /* margin-left:auto 等で右へ押し出さない */
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;   /* 上寄せ。カードごとに位置を揃える */
    gap: 8px;
    flex: none;
  }
  .f1-rrow__cta .f1-btn,
  .f1-rrow__cta a,
  .f1-rrow__cta button {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  /* 主操作2つは同じ幅・同じ高さ */
  .f1-rrow__btn {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    font-size: 12.5px;
  }

  /* 副次操作：中身が無くても高さを保ち、カード高さを揃える */
  .f1-rrow__cta-sub {
    min-height: 42px;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 3px 10px;
  }
  .f1-rrow__cta-sub:empty { display: block; }

  /* カード高さの下限をそろえる（無料掲載でも極端に低くならない） */
  .f1-rrow { min-height: 148px; }
  .f1-rrow--compact { min-height: 0; }
}

@media (min-width: 1200px) {
  .f1-rrow__main { grid-template-columns: 58px 120px minmax(0, 1fr) 150px; }
  .f1-rrow--nophoto .f1-rrow__main { grid-template-columns: 58px minmax(0, 1fr) 150px; }
  .f1-rrow__photo { max-width: 120px; }
}

/* ホームの簡易カードも同じ考え方で、写真が無い前提の3列 */
@media (min-width: 860px) {
  .f1-rrow--compact .f1-rrow__main { grid-template-columns: 58px minmax(0, 1fr) 140px; }
  .f1-rrow--compact .f1-rrow__cta { max-width: 140px; }
  .f1-rrow--compact .f1-rrow__btn { min-height: 38px; }
  .f1-rrow--compact .f1-rrow__cta-sub { display: none; }  /* ホームは副次操作を出さない */
}

/* 紹介文・特徴タグの伸びを抑え、カードだけが縦に伸びないようにする */
.f1-rrow__pr {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.f1-rrow__tags { flex-wrap: wrap; }

/* ---- スマホ：3カラムにしない。縦積み ---- */
@media (max-width: 859px) {
  .f1-rrow__main { display: block; }
  .f1-rrow__photo { width: 100%; max-width: none; margin: 8px 0 10px; }
  .f1-rrow__cta {
    width: 100%;
    max-width: none;
    margin-top: 10px;
    flex-direction: row;
    gap: 8px;
  }
  .f1-rrow__btn { flex: 1 1 0; min-width: 0; min-height: 42px; }
  .f1-rrow__cta-sub { min-height: 0; justify-content: flex-start; margin-top: 8px; }
  .f1-rrow { min-height: 0; }
}
@media (max-width: 420px) {
  .f1-rrow__cta { flex-direction: column; }
}

/* ==========================================================================
   最終デザイン調整（2026-08-11）
   ========================================================================== */

/* ---- 1. カード内の縦位置を統一 ----
   写真あり／なしで見え方が変わらないよう、3〜4列を上下中央でそろえる。
   写真なしのカードが上に寄って間延びして見えるのを防ぐ。 */
@media (min-width: 860px) {
  .f1-rrow__main { align-items: center; }
  .f1-rrow__lead { align-self: center; }
  .f1-rrow__body { align-self: center; }
  .f1-rrow__cta  { align-self: center; justify-content: center; }
}

/* ---- 2. 写真：角丸9px・写真と情報の間隔16px（gapで統一済み） ---- */
.f1-rrow__photo { border-radius: 9px; }
.f1-rrow__photo img { border-radius: 9px; object-fit: cover; }

/* ---- 5. カード：角丸14px・薄い枠・薄い影。hoverは控えめ ---- */
.f1-rrow {
  border-radius: 14px;
  border-color: #e4eaf2;
  box-shadow: 0 2px 10px rgba(20, 45, 90, 0.055);
}
.f1-rrow:hover {
  border-color: #c9dcf5;
  box-shadow: 0 5px 16px rgba(20, 45, 90, 0.10);
}

/* ---- 6. 認定と順位を視覚的に分ける ----
   順位＝金/銀/銅（ランキング結果）
   認定＝ブランドブルー（Family Oneの評価）
   ゴールド認定まで金色にすると「1位＝ゴールド」と混同するため、
   認定バッジは階級に関わらずブルー系で統一する。 */
.f1-rrow .f1-cert,
.f1-rrow .f1-cert--premium,
.f1-rrow .f1-cert--gold,
.f1-rrow .f1-cert--silver,
.f1-rrow .f1-cert--certified {
  background: var(--fo-blue-pale, #eef4fd);
  border-color: var(--fo-blue-line, #cfe0f7);
  color: var(--fo-blue-deep, #1b4f9c);
}

/* ---- 7. Family Score：Google評価と同程度の読みやすさに ---- */
.f1-rrow__fscore { font-size: 12.5px; color: #4a5b74; font-weight: 600; }
.f1-rrow__fscore small { font-weight: 400; }

/* ---- 4. 副次操作：主CTAよりかなり小さく ---- */
.f1-rrow__cta-sub { font-size: 11px; gap: 2px 8px; }
.f1-rrow__sublink,
.f1-rrow__cta-sub a,
.f1-rrow__fav,
.f1-rrow__fav a { font-size: 11px; }
.f1-rrow__fav::before { content: none; }   /* 文言側に♡を含めるため二重表示を防ぐ */

/* ---- 9. ランキング説明：緑→ブルーグレー系へ ----
   design-system.css の .f1-ranking-trust は医療カテゴリの緑ティントを使っており、
   注意・警告のように見えていた。Family Oneのロイヤルブルー系に統一する。
   文言・内容は一切変更しない。 */
.f1-ranking-trust {
  background: #f2f7fd;
  border: 1px solid #dbe8f8;
  border-radius: 12px;
}
.f1-ranking-trust__lead { color: #2c3e5c; }
.f1-ranking-about summary { color: #1b4f9c; font-weight: 700; }

/* ---- 8. ホームのcompact：写真と口コミボタンを出す構成に合わせる ---- */
@media (min-width: 860px) {
  .f1-rrow--compact .f1-rrow__main { grid-template-columns: 58px 96px minmax(0, 1fr) 140px; }
  .f1-rrow--compact.f1-rrow--nophoto .f1-rrow__main { grid-template-columns: 58px minmax(0, 1fr) 140px; }
  .f1-rrow--compact .f1-rrow__photo { max-width: 96px; }
}

/* --------------------------------------------------------------------------
   ランキングカードの住所表示

   どこにある施設かは順位や点数より先に知りたい情報なので、カテゴリのすぐ下に置く。
   ただし主情報ではないため、施設名より小さく淡い文字にする。
   カードが縦に伸びるとボタンが押し出されるので、スマホでは2行までで打ち切る。
   -------------------------------------------------------------------------- */
.f1-rrow__meta--addr { margin: 2px 0 0; }

.f1-rrow__addr {
  display: inline-flex;
  align-items: flex-start;
  gap: 4px;
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--dc3-ink-soft, #5b6472);
}
.f1-rrow__addr svg { flex-shrink: 0; margin-top: 2px; opacity: 0.7; }

/* 2行を超えたら末尾を「…」にして、カードの高さをそろえる */
.f1-rrow__addr-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* 住所が登録されていない施設。あることを隠さず、目立たせもしない */
.f1-rrow__addr--none { color: var(--dc3-ink-weak, #98a2b3); font-style: normal; }

/* PCは幅に余裕があるので1行に収まりやすい。折り返しても3行まで許す */
@media (min-width: 901px) {
  .f1-rrow__addr { font-size: 0.78rem; }
  .f1-rrow__addr-text { -webkit-line-clamp: 3; line-clamp: 3; }
}

/* ホームの小さいカードでは1行に抑える（縦に伸ばさない） */
.f1-rrow--compact .f1-rrow__addr-text { -webkit-line-clamp: 1; line-clamp: 1; }
.f1-rrow--compact .f1-rrow__addr { font-size: 0.72rem; }