/* =====================================================================
   製品ラインナップ(/new/products/)
   1. 見出し帯(低い帯 masthead--compact は site.css)  2. 製品群の切り替え・型番検索・絞り込み(上部に固定する帯は1段)
   3. 製品群  4. 製品カード  5. 会員向け案内
   見出し帯・製品群の説明を詰め、最初の画面に製品カードの1列目が入るようにしている
   ===================================================================== */

/* 2. 製品群の切り替え・型番検索・絞り込み ------------------------------
   上部に固定するのは1段(製品群のボタン。広い画面では検索と絞り込みのボタンも同じ段)。
   狭い画面の検索・絞り込みの段は、下へスクロールすると製品群の段の裏に隠れ、上へ戻すと出る(レイアウトはずれない) */
.skip-inline { position: absolute; left: var(--gutter); z-index: 45; padding: 10px 16px; border-radius: var(--radius); background: var(--navy); color: #fff; font-family: var(--font-head); font-feature-settings: "palt"; font-size: var(--fs-sm); font-weight: 700; top: 8px; }
.skip-inline:not(:focus) { width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-inline:focus { outline-color: var(--sky); }
.catalog { position: relative; }
.catalog-bar { position: sticky; top: var(--header-h); z-index: 42; }
.admin-bar .catalog-bar { top: calc(var(--header-h) + var(--wp-admin--admin-bar--height, 32px)); }
@media (max-width: 600px) { .admin-bar .catalog-bar { top: var(--header-h); } }
.no-js .catalog-bar { display: none; }
.catalog-bar__inner { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; }
.catalog-bar__inner::before { content: ""; position: absolute; inset: 0 calc(50% - 50vw); z-index: -1; background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--line); }
/* タブレット・スマホでは、スクロール中の描画を軽くするためぼかしをやめる */
@media (max-width: 1023px) { .catalog-bar__inner::before { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; } }
/* キーボードで帯の中を移った時は、site.js が項目の全体が見える位置まで帯を送る(端の余白は scroll-padding。右端はぼかしの幅も空ける) */
.seg { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding: 8px var(--gutter); scroll-padding-inline: var(--gutter) calc(var(--gutter) + 28px); }
/* 右にまだ項目がある間だけ、右端をぼかして続きがあることを示す(products.js が .is-more を付ける。端まで送ると消える) */
.seg.is-more { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
.seg::-webkit-scrollbar { display: none; }
.seg__btn {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 12px 6px 14px; border-radius: var(--radius);
  font-family: var(--font-head); font-feature-settings: "palt"; font-size: var(--fs-sm); font-weight: 700; color: var(--ink-2); white-space: nowrap; border: 1px solid var(--line);
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.seg__btn:hover { border-color: var(--navy); color: var(--ink); }
.seg__btn[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.seg__btn[aria-pressed="true"] .count { background: rgba(255, 255, 255, .18); color: #fff; }
.seg__btn.is-zero { opacity: .45; }

.catalog-bar__tools { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.psearch { position: relative; }
.psearch .icon { position: absolute; left: 12px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.psearch input {
  width: 100%; min-height: 44px; padding: 8px 12px 8px 38px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: #fff;
  font: inherit; font-family: var(--font-ja); font-size: 1rem; color: var(--ink); transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.psearch input::placeholder { color: var(--muted); opacity: 1; }
/* 入力前は消去ボタンの場所を空けない(表示「型番・製品名で検索」を欄の幅いっぱいに使う。入りきらない時は products.js が短い表示に替える) */
.psearch input:placeholder-shown::-webkit-search-cancel-button { display: none; }
.psearch input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(29, 130, 230, .22); }
.filters__toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 14px; border-radius: var(--radius); border: 1px solid var(--line-strong); background: #fff; font-family: var(--font-head); font-feature-settings: "palt"; font-size: var(--fs-sm); font-weight: 700; white-space: nowrap; }
.filters__toggle .icon { width: 18px; height: 18px; color: var(--blue); }
.filters__toggle:hover, .filters__toggle[aria-expanded="true"] { border-color: var(--navy); background: var(--surface-2); }
.filters__badge { min-width: 22px; padding: 0 6px; border-radius: var(--radius); background: var(--blue); color: #fff; font-family: var(--font-en); font-size: .75rem; line-height: 22px; text-align: center; }

/* 狭い画面: 検索・絞り込みの段は製品群の段の下に重ねて置き、下へスクロールすると隠す */
@media (max-width: 1023px) {
  .catalog-bar__tools { position: absolute; z-index: -2; left: 0; right: 0; top: 100%; padding: 8px 0 10px; transition: transform var(--dur-2) var(--ease-out), visibility 0s linear 0s; }
  .catalog-bar__tools::before { content: ""; position: absolute; inset: 0 calc(50% - 50vw); z-index: -1; background: rgba(255, 255, 255, .97); border-bottom: 1px solid var(--line); box-shadow: 0 8px 18px rgba(11, 30, 51, .05); }
  .catalog-bar.is-tucked .catalog-bar__tools { transform: translateY(-100%); visibility: hidden; transition: transform var(--dur-2) var(--ease-out), visibility 0s linear var(--dur-2); }
  .catalog__body { padding-top: calc(62px + clamp(24px, 4vw, 40px)) !important; }
}
/* 400px未満: 検索欄を少しでも広く(絞り込みのボタンの余白と、検索欄の左の余白を詰める) */
@media (max-width: 399px) {
  .filters__toggle { padding-inline: 10px; gap: 6px; }
  .psearch input { padding-left: 34px; }
  .psearch .icon { left: 10px; }
}
/* 横向きのスマホ(高さが低い)では帯を固定しない */
@media (max-height: 500px) and (max-width: 1023px) { .catalog-bar { position: relative; top: 0 !important; } }
@media (min-width: 1024px) {
  .catalog-bar__inner { grid-template-columns: minmax(0, 1fr) auto; gap: 16px; }
  .seg { margin: 0; padding-inline: 0; gap: 4px; }
  .seg__btn { padding-inline: 10px 8px; gap: 6px; font-size: .875rem; }
  /* 検索欄は 220px(絞り込み中の件数の印が付いても、1366px以上では製品群のボタンが1段に収まる) */
  .catalog-bar__tools { grid-template-columns: 220px auto; }
}

/* 絞り込みのパネル: 広い画面は帯の下に開くドロップダウン、狭い画面は下から出るシート */
.filters__panel { position: absolute; z-index: 1; left: 0; right: 0; top: 100%; }
.filters__sheet { width: min(var(--wrap), 100% - var(--gutter) * 2); margin-inline: auto; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--radius-lg) var(--radius-lg); background: #fff; box-shadow: var(--shadow-2); }
.filters__panel:not([hidden]) .filters__sheet { animation: fade-up var(--dur-2) var(--ease-out); }
.filters__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 12px 4px 24px; }
.filters__title { font-family: var(--font-head); font-feature-settings: "palt"; font-weight: 700; font-size: var(--fs-sm); letter-spacing: var(--track-head); }
.filters__close { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--ink-2); }
.filters__close:hover { background: var(--surface-2); }
.filters__body { display: flex; flex-wrap: wrap; gap: 16px 32px; padding: 8px 24px 16px; }
.filters__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 24px 16px; border-top: 1px solid var(--line); }
.filters__apply { min-height: 48px; }
.filters__backdrop { position: fixed; inset: 0; z-index: 41; background: rgba(6, 21, 39, .4); }
@media (min-width: 1024px) { .filters__backdrop { background: transparent; } }
@media (max-width: 1023px) {
  .filters__panel { position: fixed; z-index: 70; left: 0; right: 0; top: auto; bottom: 0; }
  .filters__sheet { width: 100%; max-height: min(78vh, 640px); display: flex; flex-direction: column; border: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .filters__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; flex-direction: column; gap: 20px; padding: 8px 20px 20px; }
  .filters__head { padding: 10px 8px 6px 20px; border-bottom: 1px solid var(--line); }
  .filters__foot { padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); box-shadow: 0 -6px 16px rgba(11, 30, 51, .06); }
  .filters__apply { flex: 1; justify-content: center; }
  .filters__panel:not([hidden]) .filters__sheet { animation: sheet-up var(--dur-2) var(--ease-out); }
}
@keyframes sheet-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }

.facet { border: 0; margin: 0; padding: 0; min-width: 0; }
.facet__legend { padding: 0; margin-bottom: 8px; font-family: var(--font-head); font-feature-settings: "palt"; font-size: .875rem; font-weight: 700; color: var(--ink-2); letter-spacing: var(--track-label); }
.facet__opts { display: flex; flex-wrap: wrap; gap: 6px; }
.facet__opt { position: relative; display: inline-flex; cursor: pointer; }
.facet__opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.facet__opt > span {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 12px; border-radius: var(--radius);
  border: 1px solid var(--line-strong); background: #fff; font-family: var(--font-head); font-feature-settings: "palt"; font-size: var(--fs-sm); font-weight: 700; color: var(--ink-2);
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.facet__opt > span::before { content: ""; width: 16px; height: 16px; border-radius: var(--radius); border: 1.5px solid var(--line-strong); background: #fff; transition: all var(--dur-1) var(--ease); }
.facet__n { font-family: var(--font-en); font-size: .75rem; color: var(--muted); }
.facet__opt:hover > span { border-color: var(--blue); color: var(--ink); }
.facet__opt input:checked + span { background: var(--blue-tint); border-color: var(--blue); color: #00478a; }
.facet__opt input:checked + span::before { background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat; border-color: var(--blue); }
.facet__opt input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
/* 今の製品群とほかの条件では0件になる選択肢(押せない。件数0のまま薄く) */
.facet__opt:has(input:disabled) { cursor: default; }
.facet__opt input:disabled { cursor: default; }
.facet__opt input:disabled + span { opacity: .45; border-style: dashed; }
.facet__opt:hover input:disabled + span { border-color: var(--line-strong); color: var(--ink-2); }
/* 製品群を選んでいる時: その製品群の中で絞り込む(チップを押すと製品群の指定を外す) */
.filters__scope { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; flex-basis: 100%; }
.filters__scope[hidden], .filters__none[hidden] { display: none; }
.filters__scope-k { font-family: var(--font-head); font-feature-settings: "palt"; font-size: .875rem; font-weight: 700; color: var(--ink-2); letter-spacing: var(--track-head); }
/* どの項目にも選べる条件が無い時(周辺機器・取付金具など) */
.filters__none { display: grid; justify-items: start; gap: 12px; flex-basis: 100%; padding: 4px 0 8px; }
.filters__none p { font-size: var(--fs-sm); line-height: 1.8; color: var(--ink-2); }
.facet__reset { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 4px; font-family: var(--font-head); font-feature-settings: "palt"; font-size: var(--fs-sm); font-weight: 700; color: var(--blue); }
.facet__reset .icon { width: 16px; height: 16px; }
.facet__reset:disabled { color: var(--muted); opacity: .6; cursor: default; }

/* 3. 製品群 ----------------------------------------------------------- */
.catalog__body { padding-block: clamp(20px, 2vw, 32px) var(--section); }
/* 一覧の先頭: 業種別の提案から来た時の表示 → 件数の行と適用中の条件のチップ */
.catalog__head { display: grid; gap: 12px; }
.catalog__line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.catalog__status { font-size: var(--fs-sm); color: var(--ink-2); }
/* 絞り込みシートを閉じた後・チップをすべて外した後のフォーカスの移動先(tabindex="-1")。見た目の枠は出さない */
.catalog__status:focus { outline: none; }
.catalog__status b { font-family: var(--font-en); font-size: 1.25rem; color: var(--navy); margin-right: 4px; font-variant-numeric: tabular-nums; }

/* 業種別の提案から(?from=): どの業種の提案からか と、トップのその業種の提案へ戻るリンク */
.pfrom { display: flex; align-items: center; gap: 4px 12px; min-height: 56px; padding: 6px 8px 6px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); }
.pfrom__icon { display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: #fff; color: var(--blue); }
.pfrom__icon .icon { width: 20px; height: 20px; }
.pfrom__text { flex: 1 1 auto; min-width: 0; font-size: var(--fs-sm); color: var(--ink-2); letter-spacing: var(--track-head); word-break: keep-all; overflow-wrap: anywhere; }
.pfrom__text b { font-family: var(--font-head); font-feature-settings: "palt"; font-weight: 700; font-size: var(--fs-md); color: var(--ink); }
.pfrom__back { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; border-radius: var(--radius); font-family: var(--font-head); font-feature-settings: "palt"; font-size: var(--fs-sm); font-weight: 700; color: var(--blue); white-space: nowrap; transition: background-color var(--dur-1) var(--ease); }
.pfrom__back .icon { width: 18px; height: 18px; transform: scaleX(-1); transition: transform var(--dur-2) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .pfrom__back:hover { background: #fff; } .pfrom__back:hover .icon { transform: scaleX(-1) translateX(3px); } }
.pfrom__back:active { background: #fff; }
/* スマホ: 戻るリンクは「提案に戻る」(読み上げは「業種別の提案に戻る」) */
@media (max-width: 599px) {
  .pfrom { gap: 4px 6px; min-height: 48px; padding: 2px 2px 2px 8px; }
  .pfrom__icon { width: 30px; height: 30px; }
  .pfrom__icon .icon { width: 18px; height: 18px; }
  .pfrom__text b { font-size: var(--fs-sm); }
  .pfrom__back { padding: 0 8px; }
  .pfrom__back-pre { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* 適用中の条件のチップ(押すとその条件だけ外れる)と「条件をクリア」。JS が無い時は絞り込みが効かないので出さない */
/* チップと「条件をクリア」は文字のように1列に流す(チップが多い時も、クリアは最後のチップの横に続く) */
.pactive { display: block; min-width: 0; margin-bottom: -6px; }
.pactive[hidden], .no-js .pactive { display: none; }
.pactive__list { display: inline; margin: 0; padding: 0; list-style: none; }
.pactive__list li { display: inline-block; margin: 0 6px 6px 0; vertical-align: middle; }
.pactive__chip {
  display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 4px 8px 4px 12px; border: 1px solid var(--blue); border-radius: var(--radius);
  background: var(--blue-tint); color: #00478a; font-family: var(--font-head); font-feature-settings: "palt"; font-size: var(--fs-sm); font-weight: 700; letter-spacing: var(--track-head); white-space: nowrap;
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.pactive__chip .icon { width: 16px; height: 16px; stroke-width: 2; }
@media (hover: hover) and (pointer: fine) { .pactive__chip:hover { background: var(--blue); color: #fff; } }
.pactive__chip:active { background: var(--blue); color: #fff; }
.pactive__clear { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; margin: 0 0 6px 6px; padding: 4px; vertical-align: middle; font-family: var(--font-head); font-feature-settings: "palt"; font-size: var(--fs-sm); font-weight: 700; color: var(--blue); }
.pactive__clear .icon { width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) { .pactive__clear:hover { text-decoration: underline; text-underline-offset: 3px; } }
/* タッチ端末では押しやすい高さに */
@media (pointer: coarse) { .pactive__chip, .pactive__clear { min-height: 44px; } }
/* スマホ: 件数の行の下にチップ。「条件をクリア」は「クリア」(読み上げは「条件をクリア」)にしてチップと同じ段に収める */
@media (max-width: 599px) {
  .catalog__line { gap: 6px 12px; }
  .catalog__status { flex-basis: 100%; }
  .pactive__chip { padding-inline: 10px 6px; }
  .pactive__clear { margin-left: 0; padding-inline: 6px; }
  .pactive__clear-pre { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* 移動先は、固定ヘッダーと製品群の段の下に見出しが来るように */
/* content-visibility は使わない(絞り込みで隠したカードが、描画前の製品群では読み上げに出てしまうため) */
.pgroup { padding-top: clamp(36px, 4vw, 64px); scroll-margin-top: calc(var(--header-h) + 72px); }
.catalog__head + .pgroup { padding-top: 20px; }
.pgroup + .pgroup { margin-top: clamp(40px, 4vw, 72px); border-top: 1px solid var(--line); }
/* 絞り込みで前の製品群が隠れている時、表示中の最初の製品群(products.js が is-first を付ける)は件数の行のすぐ下に */
.pgroup.is-first { margin-top: 0; border-top: 0; padding-top: 20px; }
/* 製品群を1つだけ表示している時は、上の余白と区切り線を詰める */
.catalog.is-single .pgroup { padding-top: 16px; margin-top: 0; border-top: 0; }
.pgroup__head { display: grid; gap: 14px 64px; margin-bottom: clamp(20px, 2.4vw, 32px); }
.pgroup__title-wrap { position: relative; display: flex; align-items: flex-start; gap: 18px; }
.pgroup__icon { display: grid; place-items: center; flex-shrink: 0; width: 52px; height: 52px; margin-top: 4px; border-radius: 50%; background: var(--blue-tint); color: var(--blue); }
.pgroup__icon .icon { width: 26px; height: 26px; stroke-width: 1.4; }
.pgroup .eyebrow { margin-bottom: 6px; }
.pgroup__title { font-size: clamp(1.625rem, 1.2rem + 1.2vw, 2.25rem); line-height: 1.3; }
.pgroup__sub { margin-top: 4px; color: var(--ink-2); font-family: var(--font-head); font-feature-settings: "palt"; font-size: var(--fs-sm); font-weight: 700; }
.pgroup__lead { color: var(--ink-2); line-height: 1.95; }
/* 説明はスマホだけ2行で省略(JSが動く時・長い説明か注記がある製品群 .is-clamp だけ)。「続きを読む」で注記まで開く。
   ボタンの有無はサーバー側で決める(読み込み後に高さが変わって一覧がずれないように)。600px以上は全文と注記 */
.pgroup__toggle { display: none; }
@media (max-width: 599px) {
  .js .is-clamp .pgroup__more:not(.is-open) { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .js .is-clamp .pgroup__more:not(.is-open) .pgroup__notes { display: none; }
  .js .is-clamp .pgroup__toggle { display: inline-flex; }
}
.pgroup__toggle { align-items: center; gap: 4px; min-height: 44px; margin-top: -4px; font-family: var(--font-head); font-feature-settings: "palt"; font-size: var(--fs-sm); font-weight: 700; color: var(--blue); }
.pgroup__toggle .icon { width: 18px; height: 18px; transition: transform var(--dur-2) var(--ease-out); }
.pgroup__toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
.pgroup__notes { margin-top: 12px; display: grid; gap: 4px; }
.pgroup__notes li { position: relative; padding-left: 16px; font-size: var(--fs-sm); color: var(--muted); line-height: 1.8; }
.pgroup__notes li::before { content: "※"; position: absolute; left: 0; }
/* 内訳は押せない文字の並び(枠や地の色を付けず、絞り込みのチップと見分ける) */
.pgroup__stats { margin-top: 8px; font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.8; }
.pgroup__stats b { margin-inline: 2px; font-family: var(--font-en); font-size: 1rem; font-weight: 800; color: var(--navy); font-variant-numeric: tabular-nums; }
.pgroup__order { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-family: var(--font-head); font-feature-settings: "palt"; font-size: var(--fs-sm); font-weight: 700; color: var(--navy); }
.pgroup__order .icon { width: 18px; height: 18px; color: var(--blue); }
@media (min-width: 1024px) { .pgroup__head { grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); align-items: start; } }
/* 1024〜1199px は見出しの列を広げ、「ネットワークカメラ」「取付金具・中継BOX」を1行に収める(狭くなっても文節・「カメラ」の前で折り返す) */
@media (min-width: 1024px) and (max-width: 1199px) { .pgroup__head { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); column-gap: 40px; } }
/* スマホ: アイコンと内訳の数を省き、見出しの塊を低く(件数は製品群のボタンに出ている) */
@media (max-width: 599px) {
  .pgroup__icon, .pgroup__stats { display: none; }
  /* 検索・絞り込み中は、製品群の説明を省いて結果を先に見せる(見出しは残す。条件を外すと戻る) */
  .catalog.is-filtered .pgroup__intro { display: none; }
  .pgroup__sub { margin-top: 0; }
  .catalog .catalog__body { padding-top: calc(66px + 16px) !important; }
  .catalog__head + .pgroup, .pgroup.is-first { padding-top: 12px; }
  .masthead--compact .masthead__lead { font-size: .9375rem; line-height: 1.75; }
}

/* 4. 製品カード --------------------------------------------------------
   列: 600px未満 2列 / 600〜1023px 3列 / 1024px以上 4列(カードの幅は約170〜300px)。767px以下は縦型の小さいカード(下の「スマホ」) */
.pgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 600px) { .pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 768px) { .pgrid { gap: 16px; } }
@media (min-width: 1024px) { .pgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .pgrid { gap: 20px; } }
.pcard {
  position: relative; display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; overflow: hidden;
  transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease-out);
}
.pcard.is-entering { animation: card-in .45s var(--ease-out) both; animation-delay: calc(var(--k, 0) * 18ms); }
@keyframes card-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.pcard__link { position: relative; display: flex; flex-direction: column; flex: 1; }
.pcard__link:focus-visible { outline-offset: -3px; }
/* 製品は枠の下寄せで大きさをそろえ(assets/img/catalog)、接地の影を付ける */
.pcard__media { position: relative; display: block; aspect-ratio: 1; background: var(--surface-2); overflow: hidden; }
.pcard__media::after { content: ""; position: absolute; left: 22%; right: 22%; top: 84%; height: 5%; border-radius: 50%; background: radial-gradient(50% 50% at 50% 50%, rgba(11, 30, 51, .16), transparent 70%); pointer-events: none; }
.pcard__img { width: 100%; height: 100%; object-fit: contain; padding: 10%; mix-blend-mode: multiply; transition: transform .7s var(--ease-out); }
.pcard__img.is-catalog { padding: 0; transform-origin: 50% 86%; }
/* 形状ごとの見かけの大きさをそろえる(そろえた画像は外接矩形を枠に収めるため、丸いドーム型・アイボール型は大きく、横長のバレット型は小さく見える)。
   製品の面積(白以外の画素)が枠の約25〜30%になるように、接地線(86%)を基準に縮小・拡大する */
.pcard[data-pa_shape~="dome"] .pcard__img.is-catalog, .pcard[data-pa_shape~="eyeball"] .pcard__img.is-catalog { scale: .88; }
.pcard[data-pa_shape="bullet"] .pcard__img.is-catalog { scale: 1.08; }
.pcard__body { display: flex; flex-direction: column; gap: 4px; padding: 14px 14px 10px; flex: 1; }
.pcard__catalog { align-self: flex-start; font-family: var(--font-en); font-size: .75rem; font-weight: 800; letter-spacing: var(--track-label); color: var(--muted); }
.pcard__model { font-family: var(--font-en); font-weight: 800; font-size: var(--fs-md); letter-spacing: .01em; line-height: 1.35; overflow-wrap: anywhere; color: var(--ink); }
/* 旧型番・別表記で検索に合った時の小さな表示(「旧型番 IPS-XVR6108-POC」。資料ダウンロードの仕様書の行も同じ見た目: documents.css) */
.alias-note { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; font-family: var(--font-en); font-size: .75rem; font-weight: 700; line-height: 1.6; color: var(--ink-2); overflow-wrap: anywhere; }
.alias-note[hidden] { display: none; }
.alias-k { flex-shrink: 0; padding: 0 4px; border: 1px solid var(--line-2); border-radius: var(--radius); font-family: var(--font-head); font-feature-settings: "palt"; font-weight: 700; letter-spacing: var(--track-head); color: var(--ink-2); }
.pcard__alias { margin-top: 2px; }
/* 製品名は語の途中で折り返さない: 対応ブラウザは文節(auto-phrase)、それ以外は商品名の空白の位置で(keep-all)。
   リンクの中なので <wbr> は使わない(読み上げ名に空白が入るため) */
.pcard__name { font-size: .875rem; color: var(--ink-2); line-height: 1.65; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: keep-all; word-break: auto-phrase; overflow-wrap: anywhere; }

/* 業種別の提案の提案例(?pick=)。一覧の先頭に置き、ピントが合った状態(ファインダーの四隅)と「提案例」の札で示す */
.pcard--pick { border-color: var(--navy); box-shadow: 0 0 0 1px var(--navy); }
.pcard--pick .vf--card { opacity: 1; --vf-c: var(--navy); }
.pcard--pick .vf--card i { transform: none; }
.pcard__pick {
  position: absolute; z-index: 2; left: 22px; top: 22px; display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 2px 10px 2px 8px; border-radius: var(--radius);
  background: var(--navy); color: #fff; font-family: var(--font-head); font-feature-settings: "palt"; font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--track-head); line-height: 1.4;
}
.pcard__pick::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sky); }
@media (hover: hover) and (pointer: fine) { .pcard--pick:hover { box-shadow: 0 0 0 1px var(--blue), var(--shadow-1); } }
.pcard__chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.pcard__chips .chip { font-feature-settings: "palt"; }
.pcard__cta { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 44px; padding: 0 14px; border-top: 1px solid var(--line); font-family: var(--font-head); font-feature-settings: "palt"; font-size: .875rem; font-weight: 700; color: var(--blue); transition: background-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease); }
.pcard__cta .icon { width: 16px; height: 16px; transition: transform var(--dur-2) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .pcard:hover { border-color: var(--blue); box-shadow: var(--shadow-1); transform: translateY(-3px); }
  .pcard__link:hover .pcard__img { transform: scale(1.06); }
  .pcard__link:hover .pcard__cta { background: var(--blue); color: #fff; }
  .pcard__link:hover .pcard__cta .icon { transform: translate(2px, -2px); }
}
.pcard__link:active .pcard__media { filter: brightness(.96); }
/* ホバー・キーボードのフォーカスで、製品写真にファインダーの四隅が寄ってピントが合う(.vf--card の見た目と出し方は site.css。読み上げには出ない)。
   製品カードでは四隅を少し大きく、寄る動きを短く。タッチ端末では出さない(押した後に残るため。提案例のカードの常時の表示は残す) */
@media (hover: hover) and (pointer: fine) {
  .pcard .vf--card { --vf-s: 20px; }
  .pcard .vf--card i { transition-duration: var(--dur-2); }
}
@media (hover: none), (pointer: coarse) { .pcard:not(.pcard--pick) .vf--card { display: none; } }
/* 仕様書PDF: 「詳細・価格」の行の右端に重ねる(別のリンク)。文字色のアイコンと「PDF」の小さな枠(赤は使わない)。
   幅は --pdf-w で固定し、「詳細・価格」の行はその分を空ける(矢印がPDFの下に潜らないように) */
.pcard { --pdf-w: 124px; }
.pcard--pdf .pcard__cta { padding-right: calc(var(--pdf-w) + 10px); }
.pcard__pdf {
  position: absolute; right: 0; bottom: 0; z-index: 2; display: inline-flex; align-items: center; justify-content: center; gap: 4px; width: var(--pdf-w); height: 44px; padding: 0 8px;
  border-left: 1px solid var(--line); background: #fff; font-family: var(--font-head); font-feature-settings: "palt"; font-size: .75rem; font-weight: 700; color: var(--ink-2); white-space: nowrap;
  transition: color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
}
.pcard__pdf .icon { width: 16px; height: 16px; color: var(--ink-2); }
.pcard__pdf-type {
  display: inline-grid; place-items: center; height: 20px; margin-left: 2px; padding: 0 5px; border: 1px solid var(--line-strong); border-radius: var(--radius);
  font-family: var(--font-en); font-size: .75rem; font-weight: 800; letter-spacing: .04em; line-height: 1; color: var(--ink-2);
}
.pcard__pdf:hover { background: var(--surface-2); color: var(--ink); }
.pcard__pdf:hover .pcard__pdf-type { border-color: var(--ink-2); }
.pcard__pdf:focus-visible { outline-offset: -3px; }
@media (min-width: 768px) { .pcard__body { padding: 18px 18px 12px; } .pcard__cta { padding: 0 18px; } .pcard--pdf .pcard__cta { padding-right: calc(var(--pdf-w) + 12px); } }
/* 狭いカード(3列の 768〜899px・4列の 1024〜1199px。カードの幅が約260px未満)では「仕様書」の文字を省き、アイコンと「PDF」だけに
   (読み上げの名前はリンクの aria-label「<型番>の仕様書PDF（サイズ）（新しいタブで開きます）」で、幅によらず同じ) */
@media (min-width: 768px) and (max-width: 899px), (min-width: 1024px) and (max-width: 1199px) { .pcard { --pdf-w: 84px; } }
@media (max-width: 899px), (min-width: 1024px) and (max-width: 1199px) { .pcard__pdf-label { display: none; } }
/* この機種の資料(対象機種にこの型番がある資料がある機種だけ): カードの最下段の横長のリンク(別のリンク。資料ダウンロードを型番で開く)。
   写真の上には置かない。「詳細・価格 / 仕様書」の段の下に高さ 44px の段を足す(スマホはカタログ番号・仕様書の段の下) */
.pcard--docs { --docs-h: 44px; }
.pcard--docs .pcard__link { padding-bottom: var(--docs-h); }
.pcard--docs .pcard__pdf { bottom: var(--docs-h); }
.pcard__docs {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; align-items: center; gap: 6px; height: var(--docs-h); padding: 0 14px;
  border-top: 1px solid var(--line); border-radius: 0 0 var(--radius-lg) var(--radius-lg); background: var(--surface-2);
  font-family: var(--font-head); font-feature-settings: "palt"; font-size: .8125rem; font-weight: 700; line-height: 1.4; color: var(--blue); white-space: nowrap;
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.pcard__docs > span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pcard__docs b { font-family: var(--font-en); font-weight: 800; }
.pcard__docs .icon { flex-shrink: 0; width: 16px; height: 16px; }
.pcard__docs:focus-visible { outline-offset: -3px; }
@media (hover: hover) and (pointer: fine) { .pcard__docs:hover { background: var(--blue-tint); } }
@media (min-width: 768px) { .pcard__docs { padding: 0 18px; } }
@media (max-width: 767px) { .pcard__docs { padding: 0 10px; font-size: .75rem; gap: 4px; } .pcard__docs .icon:last-child { display: none; } }
/* 製品群の見出しの「この製品群の資料」(群に共通の取扱説明書・ソフトウェアなど。資料ダウンロードを製品群で開く) */
.pgroup__docs { margin-top: 10px; }
.pgroup__docs a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-family: var(--font-head); font-feature-settings: "palt"; font-size: var(--fs-sm); font-weight: 700; color: var(--blue); text-decoration: underline; text-decoration-color: rgba(0, 104, 196, .35); text-underline-offset: 4px; }
.pgroup__docs a .icon { flex-shrink: 0; width: 18px; height: 18px; }
.pgroup__docs a .icon:last-child { width: 16px; height: 16px; }
.pgroup__docs b { margin-inline: 2px; font-weight: 800; }
@media (hover: hover) and (pointer: fine) { .pgroup__docs a:hover { text-decoration-color: currentColor; } }

/* スマホのカードで「+n」に畳む属性(3つ目以降)。広い画面では全部見せる */
.chip--more { display: none; }

/* スマホ(2列)と 600〜767px(3列): 縦型の小さいカード(上に正方形の画像、型番 14px、製品名は1行、属性は2つ+「+n」)。カードの幅は約170〜215px。
   仕様書PDFはカードの右下のアイコン(44px角)にし、カタログ番号と同じ最下段に置く(PDFのための行を作らない) */
@media (max-width: 599px) { .pgrid { gap: 12px 8px; } }
@media (max-width: 767px) {
  .pcard__media .vf--card { inset: 8px; }
  .pcard__body { padding: 10px 8px 0 10px; gap: 2px; }
  .pcard__model { font-size: .875rem; line-height: 1.4; letter-spacing: 0; }
  .pcard__pick { left: 14px; top: 14px; }
  /* 製品名は1行で省略(文節で折り返すと省略が早くなり、見える文字が減るため、ここでは通常の折り返し) */
  .pcard__name { -webkit-line-clamp: 1; line-height: 1.6; word-break: normal; overflow-wrap: normal; }
  /* 属性は「画素数・形状」+「+n」を1行に(フィッシュアイ・アイボール型でも収まる幅) */
  .pcard__chips { gap: 3px; margin-top: 6px; }
  .pcard__chips .chip { padding-inline: 5px; letter-spacing: .02em; }
  .pcard__chips .chip:nth-child(n+3):not(.chip--more) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .pcard__chips .chip--more { display: inline-flex; padding-inline: 4px; background: transparent; border: 1px solid var(--line-2); font-family: var(--font-en); }
  /* カタログ番号は最下段の左(右に仕様書PDF) */
  .pcard__catalog { order: 9; display: flex; align-items: center; align-self: stretch; min-height: 44px; margin-top: auto; }
  /* 詳細へのリンクの印は出さない(カード全体がリンク。文字は読み上げ用に残す。見えない矢印は配置もしない) */
  .pcard__cta, .pcard--pdf .pcard__cta { position: absolute; display: block; width: 1px; height: 1px; min-height: 0; padding: 0; overflow: hidden; clip-path: inset(50%); border: 0; }
  .pcard__cta .icon { display: none; }
  .pcard__pdf { width: auto; min-width: 44px; height: 44px; padding: 0 10px 0 8px; gap: 3px; border-left: 0; border-top-left-radius: var(--radius); background: transparent; }
  .pcard:hover { transform: none; }
}

/* 「すべて」: 製品群ごとに先頭の2段分だけを出し(スマホ4件・600〜1023px 6件・1024px以上 8件)、残りは「〇〇 n件をすべて見る」。
   隠れるのが1段(列の数)以下の製品群は省かずに全件(カードの .pcard--rest* とボタンの有無・--sm --md はサーバー側で付ける)。
   .is-preview はサーバー側と products.js が付ける */
.pgroup__all { display: none; }
/* 599px以下の「すべて」: 2つ目以降の製品群(最初の画面に入らない)と、一覧の後の案内・フッターは、最初の描画の後に少しずつ配置する
   (templates/products.php の埋め込みスクリプトが段階を進める。最初の製品群はカードの2段目から、ほかの製品群は 見出し → カードの1段目 → 残り。
   スクロール・キー・タップの時はすぐに全部。JS が無い時は最初から全部。高さ 1200px を超える画面では、後から出す所が最初の画面に入るのでしない) */
@media (max-width: 599px) and (max-height: 1200px) {
  .js .catalog.is-deferring .pgroup[data-defer="0"] { display: none; }
  .js .catalog.is-deferring .pgroup[data-defer="1"] > :not(.pgroup__head),
  .js .catalog.is-deferring .pgroup[data-defer="2"] > :not(.pgroup__head):not(.pgrid),
  .js .catalog.is-deferring .pgroup[data-defer="2"] .pcard:nth-child(n+3) { display: none; }
  .js .catalog.is-deferring[data-defer-tail="3"] ~ .member, .js .catalog.is-deferring[data-defer-tail="3"] ~ .cta, .js .catalog.is-deferring[data-defer-tail="2"] ~ .cta,
  .js.is-deferring-foot .site-footer { display: none; }
}
/* 最初の製品群の2段目より後(高さ 950px 以下の画面では、最初の画面の下にある) */
@media (max-width: 599px) and (max-height: 950px) {
  .js .catalog.is-deferring .pgroup[data-defer="1st"] > :not(.pgroup__head):not(.pgrid),
  .js .catalog.is-deferring .pgroup[data-defer="1st"] .pcard:nth-child(n+3) { display: none; }
}
.catalog.is-preview .pgroup__all {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; margin-top: 12px; padding: 8px 16px;
  border: 1px solid var(--line-2); border-radius: var(--radius); background: #fff; color: var(--ink);
  font-family: var(--font-head); font-feature-settings: "palt"; font-size: var(--fs-sm); font-weight: 700; letter-spacing: var(--track-head);
}
@media (max-width: 599px) { .catalog.is-preview .pcard--rest { display: none; } }
/* 600〜1023px: 9件より多い製品群だけ省略する(.pgroup__all--sm は9件以下の製品群。スマホだけに出す) */
@media (min-width: 600px) and (max-width: 1023px) {
  .catalog.is-preview .pcard--rest-md, .catalog.is-preview .pgroup__all--sm { display: none; }
}
/* 1024px以上: 12件より多い製品群だけ省略する(.pgroup__all--md は12件以下の製品群) */
@media (min-width: 1024px) {
  .catalog.is-preview .pcard--rest-lg, .catalog.is-preview .pgroup__all--sm, .catalog.is-preview .pgroup__all--md { display: none; }
}
@media (min-width: 600px) {
  .catalog.is-preview .pgroup__all { max-width: 480px; margin-inline: auto; margin-top: 16px; }
}
.pgroup__all b { margin-inline: 2px; font-family: var(--font-en); font-size: 1rem; font-weight: 800; color: var(--navy); }
.pgroup__all .icon { width: 18px; height: 18px; color: var(--blue); }
.pgroup__all:active { background: var(--surface-2); }
@media (hover: hover) and (pointer: fine) { .pgroup__all:hover { border-color: var(--navy); } }
.pgroup__title:focus { outline: none; }

.pgroup__empty { padding: 32px; border: 1px dashed var(--line-2); border-radius: var(--radius-lg); text-align: center; color: var(--muted); font-size: var(--fs-sm); }
.pgroup__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; margin-top: 28px; }
.pgroup__price-note { flex-basis: 100%; font-size: .875rem; color: var(--muted); }
/* スマホ: WEBオーダーへのボタンは全幅で1行に(「WEBオーダーで見る（取付金具・中継BOX）」も390pxで1行。余白と字間を詰める) */
@media (max-width: 599px) {
  .pgroup__foot { margin-top: 16px; gap: 4px; }
  .pgroup__foot .btn { width: 100%; padding-inline: 14px 12px; gap: 8px; font-size: var(--fs-sm); letter-spacing: .02em; }
  .pgroup__price-note { margin-top: 2px; line-height: 1.7; }
}
.catalog__empty { margin-top: 20px; padding: 56px 24px; text-align: center; border: 1px dashed var(--line-2); border-radius: var(--radius-lg); }
.catalog__empty-title { margin-bottom: 20px; text-wrap: balance; color: var(--ink-2); font-family: var(--font-head); font-feature-settings: "palt"; font-weight: 700; overflow-wrap: anywhere; }
/* 型番で探して見つからない時の案内(販売終了・型番変更の可能性と、後継機種の問い合わせ先) */
.catalog__empty-note { max-width: 34em; margin: -8px auto 24px; display: grid; justify-items: center; gap: 8px; }
.catalog__empty-note[hidden] { display: none; }
.catalog__empty-note p { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.8; text-wrap: pretty; }
.catalog__empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.catalog__empty-actions .btn__label { text-wrap: balance; }
/* スマホ: 0件の時のボタンは全幅(「「型番」をWEBオーダーで検索」を語の途中で折り返さない) */
@media (max-width: 599px) { .catalog__empty { padding: 40px 16px; } .catalog__empty-actions .btn { width: 100%; } }

/* 5. 会員向け案内 ------------------------------------------------------ */
.member { background: var(--surface-2); padding-block: clamp(64px, 6vw, 104px); }
.member:focus { outline: none; }
.member__inner { display: grid; gap: 32px 64px; align-items: center; }
.member__title { font-size: var(--fs-h2); line-height: 1.45; }
.member__text { margin-top: 16px; color: var(--ink-2); line-height: 2; max-width: 36em; }
.member__actions { display: grid; gap: 12px; }
@media (min-width: 1024px) { .member__inner { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } }

/* 絞り込みを開いている間は、帯(とシート)をヘッダー・画面下の帯より手前に */
.catalog-bar.is-filtering { z-index: 72; }
body.is-filtering .action-bar { transform: translateY(110%) !important; }
@media (max-width: 1023px) { body.is-filtering { overflow: hidden; } }