にして使う */ .is-search #search-results.sr-grid{ display: grid; grid-template-columns: 1fr; /* SP: 1列 */ gap: var(--sl-gap); } /* 640px〜: 2列 */ @media (min-width: 640px){ .is-search #search-results.sr-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* 980px〜: 3列（PC標準） */ @media (min-width: 980px){ .is-search #search-results.sr-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* 1400px〜: 4列（広い画面で） */ @media (min-width: 1400px){ .is-search #search-results.sr-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* セル用：念のため */ .is-search #search-results .sr-cell > *{ width: 100%; max-width: 100%; } /* フォールバック箱（カード描画失敗時） */ .is-search .search-fallback{ padding: 12px; background:#fff; border:1px solid #e5e7eb; border-radius:12px; box-shadow:0 2px 8px rgba(0,0,0,.06); } /* SL-1801: 1カラム時（〜639.98px）のカード中央寄せ */ @media (max-width: 639.98px){ .is-search #search-results.sr-grid{ grid-template-columns: 1fr; /* 既存の1列指定の再確認（保険） */ justify-items: center; /* ★これで中央寄せ */ } } /* ========== SL-1801-02: search.html だけ type-container の固定幅を殺してグリッド固定 ========== */ body.is-search #search-results.type-container{ display: grid !important; /* flex 指定を上書きしてグリッドに固定 */ grid-template-columns: 1fr; /* SP: 1列 */ gap: var(--sl-gap, 16px); align-items: start; } /* 子要素に入っている flex 基準幅・最大幅の固定を根こそぎ解除 */ body.is-search #search-results.type-container > *{ flex: initial !important; flex-basis: auto !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; } /* 640px〜: 2列（細すぎ防止で最小幅を持たせると安定） */ @media (min-width: 640px){ body.is-search #search-results.type-container{ grid-template-columns: repeat(2, minmax(300px, 1fr)); } } /* 980px〜: 3列（PC標準） */ @media (min-width: 980px){ body.is-search #search-results.type-container{ grid-template-columns: repeat(3, minmax(320px, 1fr)); } } /* 1400px〜: 4列（広い画面） */ @media (min-width: 1400px){ body.is-search #search-results.type-container{ grid-template-columns: repeat(4, minmax(320px, 1fr)); } } /* 1列時は中央寄せ＋ソフト上限（“妙に細長いカード”を防止） */ @media (max-width: 639.98px){ body.is-search #search-results.type-container{ justify-items: center; } body.is-search #search-results.type-container > *{ width: min(100%, 360px) !important; } } /* SL-1801 A-2: 検索ページでは右上の予備検索を隠す */ .is-search #hs-float { display: none !important; }