/* ===========================
   Reset for SALE Page
   =========================== */
body.sale-bg {
  background: #a61f24;
}
body.sale-bg main.main-top,
body.sale-bg .intro,
body.sale-bg .key {
  background: #a61f24;
}

/* Keyvisual */
.key {
  width: 100%;
  margin: 0 auto 20px;
  padding: 0;
}

/* ===========================
   割引率ボタン（画像そのまま）
   =========================== */
.cat__list.custom-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  padding: 0 10px 30px;
}

.cat__list.custom-grid li {
  width: 48%;
  margin: 0;
}

@media (min-width: 768px) {
  .cat__list.custom-grid li {
    width: 18%;
  }
}

.cat__list.custom-grid li img {
  width: 100%;
  height: auto;
  display: block;
}

/* ===========================
   CATEGORY ボタン（画像そのまま）
   =========================== */
.colm {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  padding: 20px 10px 50px;
}

.colm li {
  width: 48%;
  margin: 0;
}

@media (min-width: 768px) {
  .colm li {
    width: 22%;
  }
}

.colm li img {
  width: 100%;
  height: auto;
  display: block;
}

/* 見出し */
.cat__title,
h1,
h2 {
  text-align: center;
  color: #fff !important;
  font-weight: 700;
}

/* 余白調整 */
.intro {
  padding-bottom: 20px;
}

main.main-top {
  padding-top: 20px;
}

@media (min-width: 768px) {
  main.main-top {
    padding-top: 40px;
  }
}

/* =====================================
   ① CATEGORY（SP）を2列表示にする
   ===================================== */
@media screen and (max-width: 767px) {
  .colm {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
  }

  .colm li {
    width: 48% !important; /* ← 2列化 */
    margin: 0 !important;
    padding: 0 !important;
  }

  .colm li img {
    width: 100% !important;
    height: auto !important;
  }
}

/* 画像は透明背景にしない（これが重要） */
body.sale-bg .key *:not(img) {
    background: transparent !important;
}

/* ============================
   Keyvisual（メイン画像）を通常表示
   ============================ */

/* 画像は横幅100%・高さは自然比率 */
.key__slide__item img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: cover !important; /* contain → cover に変更で余白を除去 */
}

/* slick が付ける高さ制御をフル解除 */
.key,
.key__slide__item,
.key .slick-list,
.key .slick-track {
    height: auto !important;
}

/* slick が transform で高さを誤魔化すのを無効化 */
.key .slick-track {
    transform: none !important;
}

/* slick が自動で作るラッパー（これがサイズを固定している）*/
.key__slide {
    height: auto !important;
}

/* ==== PCだけKVを最大1200pxまでに制限 === */
@media (min-width: 768px) {
  .key {
    max-width: 1200px;
    margin: 0 auto;
  }
}

/* スマホでヘッダーとバナー画像が重なる対策 */
@media screen and (max-width: 767px) {
  .key {
    margin-top: 20px !important; /* 必要に応じて数値調整可能 */
  }
}

/* ===== PC：割引率ボタン（3 + 2 レイアウト、全て同じ幅） ===== */
@media (min-width: 960px) {

  /* コンテナ */
  .cat__list.custom-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px 32px; /* 上下24px、左右32px */
    max-width: 900px;
    margin: 0 auto 50px;
  }

  /* すべてのボタンを統一サイズに */
  .cat__list.custom-grid li {
    width: 28%;       /* ← 3列にフィットする幅 */
    max-width: 260px; /* ← 任意。画像が大きい場合の保護 */
  }

  /* 2行目（最後の2つ）だけ中央寄せに見せるため幅変更 */
  .cat__list.custom-grid li:nth-last-child(2),
  .cat__list.custom-grid li:last-child {
    width: 28%; /* ← 1行目と完全同じ幅にする（大きさ統一） */
  }
}

@media (min-width: 960px) {

  /* コンテナを広めにして大きく見せる */
  .cat__list.custom-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 28px 40px; /* 余白を広めに */
    max-width: 1100px; /* ← 広めに調整（重要） */
    margin: 0 auto 60px;
  }

  /* すべてのボタンの幅を大きくする */
  .cat__list.custom-grid li {
    flex: 0 1 300px;  /* ← 大きく見える最適値 */
  }

  /* 2行目の2つも同じ幅にして統一 */
  .cat__list.custom-grid li:nth-last-child(2),
  .cat__list.custom-grid li:last-child {
    flex: 0 1 300px; /* ← 完全に同じ幅にする */
  }

  /* 画像も大きく見せやすくする */
  .cat__list.custom-grid li img {
    width: 100%;
    height: auto;
    display: block;
  }
}

/* CATEGORY 上の余白を詰める（PC/SP 共通） */
.cat {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.cat__title {
    margin-top: 10px !important; /* 必要なら調整 */
}

/* 割引リスト下の余白を最小化 */
.cat__list.custom-grid {
    margin-bottom: 20px !important; /* ← ここ小さくする */
    padding-bottom: 0 !important;
}

/* UL が勝手に作る下余白を無効化 */
.cat__list.custom-grid ul,
.cat__list.custom-grid {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* カテゴリエリアの上にできる隙間の原因を潰す */
.colm {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body.sale-bg,
body.sale-bg main.main-top,
body.sale-bg .intro,
body.sale-bg .key {
  background: #a61f24;
}

.key img,
.key__slide__item img {
  display: block;
}