/* ================================================================
   nayami_sibling_v1.css
   横断ナビ（兄弟カテゴリ横断ピルボタン）
   お悩み別 第3階層カテゴリページ専用
   BEMクラス名: .frt-sibling 系で統一
   設置先: gigaplus /remedy/css/nayami_sibling_v1.css
   2026-06-26
================================================================ */

/* ---- セクション全体のラッパー ---- */
.frt-sibling {
  margin: 0 0 20px;
  padding: 12px 0 16px;
}

/* ---- 見出し「○○の他のお悩みも見る」 ---- */
.frt-sibling__label {
  font-size: 12px;
  color: #993556;
  font-weight: bold;
  margin: 0 0 10px;
}

/* ---- ピルボタンのフレックスコンテナ ---- */
.frt-sibling__grid {
  display: flex;
  flex-wrap: wrap;          /* スマホ時は折り返してOK */
  gap: 8px;
}

/* ---- ピルボタン（通常） ---- */
.frt-sibling__pill {
  background: #FBEAF0;
  color: #993556;
  border: 1px solid #F4C0D1;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  text-decoration: none;
  display: inline-block;
  line-height: 1.4;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

/* ---- ホバー時 ---- */
.frt-sibling__pill:hover {
  background: #F4C0D1;
  color: #72243E;
  text-decoration: none;
}

/* ---- 現在地（アクティブ）---- */
.frt-sibling__pill--current {
  background: #993556;
  color: #fff;
  border-color: #993556;
  cursor: default;
  pointer-events: none;   /* 現在地クリック不可 */
}

/* ---- ダークモード非対応（実サイトの既存コンポーネントと同方針）---- */
/* prefers-color-scheme には追従しない */