/* ============================================================
   カルーセル（TOP）：クロスフェード方式
   ============================================================ */
.carousel {
  position: relative;
  z-index: 2;               /* 画像より前面（バナー・矢印・ドットを上に） */
  width: 100%;
  background: transparent;  /* 背景なし → 下の画像を透けさせる */
  padding: 30px 30px;   /* 上下24px / 左右16px */
  touch-action: pan-y;
}

/* 全スライドを重ねる（フェード用スタック） */
.carousel__viewport {
  display: grid;            /* ★ これが必須（重ねて表示するため） */
  position: relative;       /* ★ 矢印を画像基準で配置 */
  align-items: center;      /* ★ 追加：短いスライドも上下中央に → 矢印が画像中央に揃う */
}

/* ★ 追加：前後ボタンを画像の両端に重ねる（TOPカルーセル） */
.carousel__btn.carousel__btn--prev,
.carousel__btn.carousel__btn--next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}
.carousel__btn.carousel__btn--prev { left: -16px; }
.carousel__btn.carousel__btn--next { right: -16px; }
.carousel__slide {
  grid-area: 1 / 1;          /* すべて同じ位置に重ねる */
  width: 100%;
  height: auto;            /* 100% → auto（そのままの高さ） */
  opacity: 0;
  transition: opacity 0.9s ease;
  pointer-events: none;
}

.carousel__slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* ----- コントロール：矢印＋ドットを下中央にまとめる ----- */
.carousel__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 12px;          /* 画像とコントロールの間隔 */
}

/* 前後ボタン：丸背景なし、矢印だけ */
.carousel__btn {
  background: none;          /* ★ 丸い背景を消す */
  border: none;
  padding: 0;
  color: #8a8a8a;            /* 矢印の色 */
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: opacity 0.2s;
  position: relative;   /* ★ 追加 */
  top: -1px;            /* ★ 追加：1px上へ（数値で微調整可） */  
}
.carousel__btn:hover { opacity: 0.6; }

/* ドットインジケーター（コントロール内に並べる） */
.carousel__dots {
  display: flex;
  align-items: center;
  gap: 8px;
}
.carousel__dot {
  width: 6px;
  height: 6px;
  padding: 0;
  border: none;              /* 線なし */
  border-radius: 50%;
  background: #8a8a8a;       /* 表示されていない箇所 */
  cursor: pointer;
}
.carousel__dot.is-active {
  background: #001890;       /* 表示されている箇所 */
}

/* ============================================================
   ラインナップ カルーセル（横スライド・無限ループ）
   ============================================================ */
.lineup-carousel {
  position: relative;
  width: 100%;
  background: #fff;
  padding: 20px 0 24px;
}
.lineup-carousel__viewport {
  overflow: hidden;          /* はみ出したスライドを隠す */
  touch-action: pan-y;
}
.lineup-carousel__track {
  display: flex;             /* スライドを横一列に */
}
.lineup-carousel__slide {
  flex: 0 0 50%;       /* 60% → 50%（小さいほど隣の画像が近づく） */
  text-align: center;
  color: var(--navy);
}
.lineup-carousel__img {
  width: 92%;          /* スライド内で大きく */
  max-width: none;     /* ★ 280pxの上限を外す（これが効いていた） */
  height: auto;
  margin: 0 auto 16px;       /* 中央寄せ＋下の余白 */
}

.lineup-carousel__title {
  font-size: 15px;
  font-weight: 700;
  color: #28282d;          /* 商品名 */
}
.lineup-carousel__spec {
  font-size: 13px;
  color: #7e7e81;          /* 詳細 */
  margin-top: 4px;
}

/* ============================================================
   ラインナップ：390px以下はテキストも画像と同じく等倍縮小
   ============================================================ */
@media (max-width: 390px) {
  .lineup-carousel__title {
    font-size: calc(15px * (100vw / 390px));   /* 390pxで15px → 狭いほど縮む */
  }
  .lineup-carousel__spec {
    font-size: calc(13px * (100vw / 390px));   /* 390pxで13px → 狭いほど縮む */
  }
}

/* 455px以下：ナチュラルミネラルウォーターだけ商品名を改行 */
.br-455 { display: none; }          /* 通常（456px以上）は改行しない */

@media (max-width: 455px) {
  .br-455 { display: inline; }      /* 455px以下で改行を有効にする */
}