/* ===== slickレイアウトの安定化 ===== */

/* 2カラム時に右切れするのを防ぐ（flex内での収縮許可） */
@media (min-width:900px){
  main.column .main-contents { min-width: 0; }
}

/* スライダー枠：列幅にフィット＆上限幅で頭打ち（巨大化防止） */
.meal-slider{
  box-sizing: border-box;
  width: 100%;
  max-width: 1600px;      /* ←広い画面でもここで止める */
  margin: 0 auto;         /* センター寄せ。左寄せにしたければ 0 に */
  overflow: hidden;
  border-radius: 10px 0 10px 0;
  line-height: 0;         /* 画像下の余白(行間)を消す */
}

/* slickの高さ計算ズレ対策（fade時に効く） */
.meal-slider .slick-list,
.meal-slider .slick-track{ height: auto !important; }

/* 初期は非表示、初期化後のみ表示（積み重なり防止） */
.meal-slider .slick-slide{ display: none; }
.meal-slider.slick-initialized .slick-slide{ display: block; }

/* 各スライド：縦横比で高さを作る（下の余白を作らない） */
.slick-img{
  position: relative;
  aspect-ratio: 178 / 50;   /* 必要なら 16/9 等に変更 */
  overflow: hidden;
}

/* 画像はカバー表示。baselineの隙間対策に block + vertical-align */
.slick-img img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  will-change: transform;
  vertical-align: top;
}

/* ズーム（Ken Burns） */
@keyframes zoomUp{
  from { transform: scale(1); }
  to   { transform: scale(1.08); }
}

/* 表示中のスライドだけズーム。JS側でも付け直し */
.meal-slider .slick-current .slick-img img{
  animation: zoomUp 8s linear forwards;
}

/* モバイルは少し縦寄りの比率に */
@media (max-width:600px){
  .slick-img{ aspect-ratio: 16 / 9; }
}