.slider_mbq {
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
}


.slide-number { display: none; }
.main-delivery-text { line-height: 1.6rem; }

/* --- 1. Swiper全体の高さを少し余裕を持たせる（340px） --- */
.swiper {
  padding: 0;
  margin: 0;
  height: 340px; /* 260pxは短すぎたため、テキストが入るよう340pxに調整 */
}

/* --- 2. スライドの高さを一番背が高いものに強制的に揃える --- */
.slider_mbq .swiper-wrapper {
  display: flex;
  align-items: stretch; /* これがガタガタを防ぐ最重要設定 */
}

.slider_mbq .swiper-slide {
  height: auto; /* stretchを効かせるため */
  display: flex;
}

/* --- 3. コンテナ（色が入るエリア）：背景色を復活させ、高さ一杯に広げる --- */
.omakase-case {
  display: flex;
  flex: 1; /* 親の高さ一杯まで背景色を広げる */
  align-items: center; /* 中身を上下中央に */
  padding: 20px;
  gap: 25px;
  background-color: #fdfaf7; /* ★ここにエリアの色を設定（お好みの色に） */

  box-sizing: border-box;
  overflow: hidden; /* 中身が飛び出さないようにガード */
}

/* --- 4. 画像エリア：高さを少し抑えてテキストの場所を確保 --- */
.omakase-images {
  flex: 0 0 45%;
  display: flex;
  gap: 10px;
}

.omakase-images a {
  flex: 1;
}

.omakase-images img {
  width: 100%;
  height: 240px; /* 画像の高さを少し下げて、全体の高さを抑える */
  object-fit: cover;
  border-radius: 6px;
  display: block;
}

/* --- 5. テキストエリア：はみ出さないように調整 --- */
.omakase-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.omakase-info h3 {
  margin: 0 0 10px 0;
  font-size: 1.3rem; /* サイズを調整 */
  color: #333;
  line-height: 1.3;
}

.omakase-info p {
  margin: 0 0 10px 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #555;
  /* 長すぎるテキストは3行で省略（はみ出し防止） */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.omakase-meta {
  padding-top: 10px;
  border-top: 1px solid #ddd;
  font-size: 0.85rem;
  color: #777;
}

/* --- スマホ用の調整 --- */
@media (max-width: 767px) {
  .swiper {
    height: auto; 
    min-height: 520px; /* スマホは縦に伸びるので高さを確保 */
  }
  .omakase-case {
    flex-direction: column;
    padding: 15px;
  }
  .omakase-images {
    width: 100%;
  }
  .omakase-images img {
    height: 180px;
  }
}