:root{
  --pg-accent:#B00000;
  --pg-border:#e7e7e7;
  --pg-text:#333;

  /* ロゴ高さ（スマホを少しだけ拡大） */
  --pg-logo-h-m: 150px;   /* Mobile */
  --pg-logo-h-t: 168px;   /* Tablet */
  --pg-logo-h-d: 200px;   /* Desktop */
}

/* タブ */
.pg-alpha-tabs{
  display:flex; flex-wrap:wrap; gap:8px; justify-content:center; align-items:center;
  margin:0 0 12px;
}
.pg-alpha-tabs button{
  padding:.5em 1em; border:1px solid var(--pg-border); background:#fff; color:var(--pg-text);
  border-radius:999px; cursor:pointer; font-size:.95rem;
  transition:background .18s ease, color .18s ease, border-color .18s ease, transform .12s ease;
}
.pg-alpha-tabs button:hover{ transform:translateY(-1px); }
.pg-alpha-tabs button.is-active{ background:var(--pg-accent); color:#fff; border-color:var(--pg-accent); }

/* コントロール（件数＋ページサイズ） */
.pg-controls{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:10px; margin:0 0 10px;
}
.pg-count{ color:#666; font-size:.95rem; }

/* プライムギア風セレクト（ピル型） */
.pg-size{ display:flex; align-items:center; gap:8px; color:#444; }
.pg-size__label, .pg-size__suffix{ font-size:.95rem; }

/* ▼クリック領域を広く＆矢印もクリック可に */
.pg-select{
  position:relative; display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--pg-border); border-radius:999px; padding:.2em .8em;
  background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.04);
  cursor:pointer; /* コンテナ自体もクリック可能 */
}
.pg-select select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  border:none; background:transparent; padding:.2em .8em .2em .2em;
  font-size:.95rem; color:#222; outline:none; cursor:pointer;
}
.pg-select__chev{
  color:#888; pointer-events:auto; /* 矢印もクリック判定 */
}

/* グリッド */
.pg-brand-grid{
  display:grid; gap:18px; align-items:center;
  grid-template-columns:repeat(2, minmax(0,1fr));
}
@media (min-width:560px){ .pg-brand-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px; } }
@media (min-width:840px){ .pg-brand-grid{ grid-template-columns:repeat(4, minmax(0,1fr)); gap:22px; } }
@media (min-width:1100px){ .pg-brand-grid{ grid-template-columns:repeat(6, minmax(0,1fr)); gap:24px; } }

.pg-brand{
  display:flex; align-items:center; justify-content:center; padding:12px;
  text-decoration:none; transition:transform .18s ease, opacity .18s ease;
}
.pg-brand img{
  display:block; width:auto; height:auto; max-width:100%;
  max-height: var(--pg-logo-h-m);
}
@media (min-width:640px){ .pg-brand img{ max-height: var(--pg-logo-h-t); } }
@media (min-width:960px){ .pg-brand img{ max-height: var(--pg-logo-h-d); } }

@media (hover:hover){ .pg-brand:hover{ transform:translateY(-2px); opacity:.95; } }
.pg-brand:focus-visible{ outline:2px solid var(--pg-accent); outline-offset:3px; border-radius:10px; }

/* ページャー（ホバーはグレー） */
.pg-pager{
  display:flex; gap:12px; align-items:center; justify-content:center;
  margin:14px 0 0;
}
.pg-btn{
  display:inline-flex; align-items:center; gap:.5em;
  padding:.6em 1.1em; border:1px solid var(--pg-border); background:#fff; color:#222;
  border-radius:999px; cursor:pointer; font-size:.95rem;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
  transition:background .15s ease, border-color .15s ease, transform .12s ease;
}
.pg-btn__icon{ color:currentColor; }
.pg-btn:hover:not(:disabled){
  background:#f2f2f2;    /* ← グレーに */
  border-color:#d6d6d6;
  transform:translateY(-1px);
}
.pg-btn:active:not(:disabled){ transform:translateY(0); }
.pg-btn:disabled{ opacity:.5; cursor:not-allowed; }
.pg-pageinfo{ min-width:68px; text-align:center; color:#333; }
:root{
  --pg-header-offset: 180px; /* 固定ヘッダーの高さ（必要に応じて調整） */
}

/* 念のため：scrollIntoViewやフラグメント遷移時の余白 */
#pg-manufacturer{ scroll-margin-top: var(--pg-header-offset); }