/* ===== meal：サムネクリックで横スライド（JS不要） ===== */

/* ラジオボタンは非表示にしてフォーカスでスクロールさせない */
.meal-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px; height: 1px;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* メインスライダー */
.meal-slider { width:100%; }
.meal-viewport { overflow:hidden; position:relative; width:100%; }
.meal-track {
  display:flex;
  width:1000%;               /* 10枚分 */
  transform: translateX(0);  /* 0番目 */
  transition: transform .45s ease;
}
.meal-track .ms {
  flex: 0 0 10%;             /* 10枚 = 10%ずつ */
  width:10%;
}
.meal-track img {
  width:100%; height:auto; display:block;
  object-fit: cover;
}

/* サムネイル一覧 */
.meal-thumbs {
  margin-top:10px;
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap:8px;
}
.meal-thumbs label {
  display:block;
  cursor:pointer;
  border:2px solid transparent;
  transition: border-color .2s ease, transform .2s ease;
}
.meal-thumbs label:hover {
  transform: translateY(-2px);
}
.meal-thumbs img {
  width:100%; height:auto; display:block;
}
@media(max-width:750px){
  .meal-thumbs{ grid-template-columns: repeat(4, 1fr); }
}

/* スライド位置（10枚ぶん） */
#ms-0:checked ~ .meal-slider .meal-track { transform: translateX(  0%); }
#ms-1:checked ~ .meal-slider .meal-track { transform: translateX(-10%); }
#ms-2:checked ~ .meal-slider .meal-track { transform: translateX(-20%); }
#ms-3:checked ~ .meal-slider .meal-track { transform: translateX(-30%); }
#ms-4:checked ~ .meal-slider .meal-track { transform: translateX(-40%); }
#ms-5:checked ~ .meal-slider .meal-track { transform: translateX(-50%); }
#ms-6:checked ~ .meal-slider .meal-track { transform: translateX(-60%); }
#ms-7:checked ~ .meal-slider .meal-track { transform: translateX(-70%); }
#ms-8:checked ~ .meal-slider .meal-track { transform: translateX(-80%); }
#ms-9:checked ~ .meal-slider .meal-track { transform: translateX(-90%); }

/* 選択中サムネの枠線ハイライト */
#ms-0:checked ~ .meal-thumbs label[for="ms-0"],
#ms-1:checked ~ .meal-thumbs label[for="ms-1"],
#ms-2:checked ~ .meal-thumbs label[for="ms-2"],
#ms-3:checked ~ .meal-thumbs label[for="ms-3"],
#ms-4:checked ~ .meal-thumbs label[for="ms-4"],
#ms-5:checked ~ .meal-thumbs label[for="ms-5"],
#ms-6:checked ~ .meal-thumbs label[for="ms-6"],
#ms-7:checked ~ .meal-thumbs label[for="ms-7"],
#ms-8:checked ~ .meal-thumbs label[for="ms-8"],
#ms-9:checked ~ .meal-thumbs label[for="ms-9"]{
  border-color:#4d4d4d;
}

/* ===== スクロール位置の調整 ===== */
/* #meal1 に余白を持たせて、スクロール時に上に行きすぎないようにする */

/* ページ全体のスクロール位置補正（固定ヘッダー分など） */
/* 各アンカーに補正を入れる */
#ms-0,
#ms-1,
#ms-2,
#ms-3,
#ms-4,
#ms-5,
#ms-6,
#ms-7,
#ms-8,
#ms-9 {
  margin-top: 330px;
}

.meal-track .ms{
    margin: 0;
}

.meal-text {
    width: 43% !important;
    margin-left: 5%;
}