/* mousepad.me 1050px ワイドレイアウト / 2026-11-01
   index.html / list.html / checkout.html のみに適用。
   旧サイトの900px画像は引き伸ばさず中央に配置します。
*/
.site {width:min(1050px,100%);}
.top-caption {max-width:1050px;}
/* 旧デザインのヘッダー・メニュー画像は元サイズを維持する */
.classic-header a {max-width:900px;margin-inline:auto;}
.classic-header img {width:100%;max-width:900px;height:auto;margin-inline:auto;}
@media (min-width:751px) {
  .classic-nav {width:min(900px,calc(100% - 20px));margin:0 auto;}
  .home-hero {max-width:940px;margin-inline:auto;}
  .home-hero>img {max-width:880px;width:100%;height:auto;margin-inline:auto;}
  .promo-banners {max-width:900px;margin:0 auto 24px;}
  .original-features {max-width:900px;margin-inline:auto;grid-template-columns:349fr 531fr;}
  .home-purchase {max-width:980px;margin:18px auto 0;}
  .list-main {padding-inline:24px;}
  .checkout-refined {padding-inline:36px;}
}
/* 広い画面では4列、通常のPC画面では従来の3列 */
@media (min-width:1060px) {
  .category-grid {grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;}
  .catalog-card {padding:13px;}
  .catalog-picture {height:165px;}
}
@media (min-width:751px) and (max-width:1059px) {
  .category-grid {grid-template-columns:repeat(3,minmax(0,1fr));}
}
/* 750px以下は既存のスマホ表示を優先し、横スクロールを作らない */
@media (max-width:750px) {
  .classic-header a {max-width:100%;}
  .classic-nav {width:100%;max-width:none;margin:0;}
  .promo-banners,.original-features,.home-purchase {max-width:100%;}
}