@charset "UTF-8";
/* ==========================================================================
   brand.css — ブランド一覧（brand.html）
   読み込み順：normalize.css → bootstrap.min.css → common.css → brand.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 人気ブランド（ロゴ付き）
   -------------------------------------------------------------------------- */
.brand{padding-block:22px 40px}
.brand-hot{margin-bottom:28px}
.brand-hot__list{--bs-gutter-y:var(--gap)}
.brand-hot__item{
  display:flex;
  align-items:center;
  justify-content:center;
  height:100%;
  min-height:96px;
  padding:16px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--white);
  transition:border-color .2s var(--ease);
}
.brand-hot__item:hover{border-color:var(--line-strong)}
.brand-hot__logo{
  max-width:100%;
  max-height:52px;
  object-fit:contain;
}

/* --------------------------------------------------------------------------
   2. すべてのブランド：見出し・件数
   -------------------------------------------------------------------------- */
.brand-all__count{
  flex:0 0 auto;
  font-size:12px;
  color:var(--muted);
}
.brand-all__count b{color:var(--navy)}

/* --------------------------------------------------------------------------
   3. 絞り込みツールバー（検索＋頭文字）
   -------------------------------------------------------------------------- */
.brand-filter{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:12px;
  margin-bottom:16px;
  padding:13px 14px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--bg);
}

.brand-filter__search{
  position:relative;
  width:100%;
  max-width:360px;
}
.brand-filter__icon{
  position:absolute;
  top:50%;
  left:12px;
  font-size:15px;
  color:var(--muted);
  transform:translateY(-50%);
  pointer-events:none;
}
.brand-filter__input{
  width:100%;
  height:40px;
  padding:0 34px 0 34px;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);
  background:var(--white);
  color:var(--ink);
  font-size:12.5px;
}
.brand-filter__input:focus{outline:none;border-color:var(--cta);box-shadow:0 0 0 3px rgba(30,123,239,.14)}
.brand-filter__clear{
  position:absolute;
  top:50%;
  right:6px;
  display:flex;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  padding:0;
  border:0;
  border-radius:50%;
  background:var(--blue);
  color:var(--navy);
  font-size:15px;
  line-height:1;
  transform:translateY(-50%);
  cursor:pointer;
}
.brand-filter__clear:hover{background:var(--blue-200);color:var(--cta)}

.brand-az{width:100%}
/* 頭文字は折り返さず1行で表示し、入りきらない場合のみ横スクロールさせる */
.brand-az__list{
  display:flex;
  flex-wrap:nowrap;
  gap:5px;
  overflow-x:auto;
  padding-bottom:2px;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.brand-az__list::-webkit-scrollbar{display:none}
/* 折り返さないため、li 側で縮小を止めて1行を保つ */
.brand-az__list li{display:flex;flex:0 0 auto}
.brand-az__btn{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:30px;
  height:30px;
  padding:0 8px;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);
  background:var(--white);
  color:var(--navy);
  font-size:12px;
  font-weight:700;
  line-height:1;
  cursor:pointer;
  transition:border-color .16s var(--ease),background .16s var(--ease),color .16s var(--ease);
}
.brand-az__btn:hover{border-color:var(--cta);color:var(--cta);background:var(--white)}
.brand-az__btn.is-active{border-color:var(--cta);background:var(--cta);color:#fff}

/* --------------------------------------------------------------------------
   4. ブランドカード（ブランド名のみ）
   -------------------------------------------------------------------------- */
.brand-list{--bs-gutter-y:var(--gap)}
.brand-list__item.is-hidden{display:none}

.brand-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  height:100%;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--white);
  transition:border-color .18s var(--ease);
}
.brand-item:hover{border-color:var(--cta)}
.brand-item::after{
  content:"›";
  flex:0 0 auto;
  color:var(--muted);
  font-size:15px;
  line-height:1;
  transition:color .18s var(--ease),transform .18s var(--ease);
}
.brand-item:hover::after{color:var(--cta);transform:translateX(1px)}
.brand-item__name{font-size:13px;font-weight:700;line-height:1.5;color:var(--navy)}
.brand-item__count{font-size:10.5px;color:var(--muted)}

/* --------------------------------------------------------------------------
   5. 該当なし
   -------------------------------------------------------------------------- */
.brand-empty{
  margin-top:8px;
  padding:26px 18px;
  border:1px dashed var(--line-strong);
  border-radius:var(--radius);
  background:var(--bg);
  text-align:center;
  font-size:12.5px;
  color:var(--muted);
}

/* --------------------------------------------------------------------------
   6. レスポンシブ
   -------------------------------------------------------------------------- */
@media (max-width:767.98px){
  .brand-hot__item{min-height:78px;padding:12px}
  .brand-hot__logo{max-height:42px}
}

@media (max-width:575.98px){
  .brand-filter__search{max-width:none}
  .brand-item{padding:10px 12px}
  .brand-az__btn{min-width:28px;height:28px;padding:0 6px}
}