/* ==== Prime Gear メーカー一覧：見た目（完全版CSS） ==== */
:root{
  --pg-accent:#B00000;
  --pg-border:#e7e7e7;
  --pg-text:#333;
  --pg-logo-h-m:150px;
  --pg-logo-h-t:168px;
  --pg-logo-h-d:200px;
  --pg-header-offset:180px; /* 固定ヘッダー高さに応じて調整 */
}

/* タブ */
.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;
}
.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; 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 .2s ease, opacity .2s ease, box-shadow .2s ease; will-change:transform;
  order:0; /* ← JSで左→右の順を制御（render内で上書き） */
}
.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:scale(1.05); opacity:1; }
}

/* ページャー */
.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;
}
.pg-btn:hover:not(:disabled){ background:#f2f2f2; border-color:#d6d6d6; }
.pg-btn:disabled{ opacity:.5; cursor:not-allowed; }
.pg-pageinfo{ min-width:68px; text-align:center; color:#333; }

/* スクロール余白 */
#pg-manufacturer{ scroll-margin-top:var(--pg-header-offset); }

/* ===== Prime Gear / メーカー一覧 高速化CSS ===== */
.pg-brand-grid {
  content-visibility: auto;
  contain-intrinsic-size: 1000px;
  will-change: contents;
}

.pg-brand img {
  image-rendering: -webkit-optimize-contrast;
  transition: transform .25s ease, opacity .25s ease;
}

@media (hover:hover) {
  .pg-brand:hover img {
    transform: scale(1.05);
    opacity: .95;
  }
}