@charset "UTF-8";

/* =========================================================
   施設紹介一覧ページ 固有スタイル（facilities.html / facility-list.html）
   共通パーツは common.css を参照
   ========================================================= */

/* JS 絞り込みで非表示にする要素（施設カード・空グループ・もっと見る） */
.is-hidden {
  display: none !important;
}

.facilities {
  display: flex;
  flex-direction: column;
  gap: 50px;
  padding-top: 50px;
}

/* ---------- 絞り込みエリア ---------- */
/* ブロックは max 767px で画面中央寄せ・子要素は左寄せ（Figma 準拠） */
.facilities__filters {
  width: 100%;
  max-width: 767px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.filter-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.filter-row__label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
}
.filter-row__label img {
  flex: 0 0 auto;
}

/* 都道府県セレクト */
.filter-select {
  position: relative;
  width: 200px;
}
.filter-select select {
  width: 100%;
  padding: 9px 40px 9px 20px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-white);
  color: var(--color-text);
  font-family: inherit;
  font-size: 14px;
  appearance: none;
  -webkit-appearance: none;
}
.filter-select::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  width: 10px;
  height: 6px;
  transform: translateY(-50%);
  background: var(--color-muted);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  pointer-events: none;
}

/* ブランド絞り込みのピル群 */
.brand-pills {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.brand-pill {
  padding: 2px 30px;
  border-radius: 20px;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  color: var(--color-muted);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.83;
  white-space: nowrap;
}
.brand-pill.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

/* ---------- 結果件数 ---------- */
.facilities__count {
  text-align: center;
  color: var(--color-primary);
  font-weight: 700;
  font-size: 20px;
}

/* ---------- 一覧本体（ベースカラー背景） ---------- */
.facilities__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
  /* 下 50px は CTA との間隔（ベースカラー帯の中で持つ） */
  padding: 50px 50px 50px;
  background: var(--color-base);
}

/* ブランドごとのグループ（カードは最大 700px の列に揃える） */
.brand-group {
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: 100%;
  max-width: 700px;
}
.brand-group__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: clamp(24px, 4vw, 32px);
  line-height: 1.5;
}
.brand-group__title::before {
  content: "";
  width: 4px;
  height: 30px;
  background: var(--color-primary);
}

/* 「もっと見る」ボタン */
.facilities__more {
  align-self: center;
}

/* ---------- レスポンシブ ---------- */
@media (max-width: 768px) {
  .facilities__list {
    padding: 30px 20px 50px;
  }
  /* 絞り込み・件数も他セクションと同じ左右 20px の余白を確保（端への張り付き防止） */
  .facilities__filters,
  .facilities__count {
    padding-left: 20px;
    padding-right: 20px;
  }
  .filter-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .filter-select {
    width: 100%;
  }
}