/* =========================================
   SOLVE｜トピックス画像カルーセル（余白最小化版）
   ========================================= */

/* セクションの上下余白を圧縮（全体の“オレンジ”部分を詰める） */
.topic_section {
  margin-block: 1.5rem;      /* 上下とも1.5remに */
  padding-block: 0;          /* 上下のpaddingをゼロに */
}

/* スライダー全体：高さは画像に合わせて自動 */
.topic_slider-ig {
  position: relative;
  display: block;
  height: auto;              /* ★固定高さをやめる（重要） */
  margin: 0;                 /* 念のため */
}

/* スライドラッパー＆アイテム：自動高さで追随 */
.topic_slider__slide,
.topic_slider__item {
  position: relative;
  height: auto;              /* ★ここもautoに */
  overflow: hidden;
}

/* 両サイドのチラ見えを外側にもはみ出させたい場合 */
.topic_slider__slide .slick-list { overflow: visible; }


.topic_slider__slide .slick-slide {
 // margin-right: -15%; /* ← チラ見せ領域を指定（例: 15%） */
  transition: transform 0.3s ease;
}


/* 画像：縦横比を維持しつつ、画面高の70%を上限に */
.topic_slider__item {
  display: flex;
  align-items: center;
  justify-content: center;
}
.topic_slider__item img {
  display: block;
  max-width: 115%;
  width:115%;
  height: auto;              /* 縦横比維持 */
  max-height: auto;          /* ★表示領域70%を上限に */
  object-fit: contain;       /* トリミングなしで収める */
  margin: 0 auto;
}

/* 新しいViewport単位対応（モバイルのアドレスバー起伏に強い） */
@supports (height: 1svh) {
  .topic_slider__item img { max-height: 70svh; }
}

/* モバイルでさらにタイトに（任意微調整） */
@media (max-width: 768px) {
  .topic_section { margin-block: 1rem; }
}

/* ===============================
   slick矢印：画像の縦中央に固定
   =============================== */
.topic_slider-ig .slick-prev,
.topic_slider-ig .slick-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}
.topic_slider-ig .slick-prev { left: 10px; }
.topic_slider-ig .slick-next { right: 10px; }

.topic_slider-ig .slick-prev:before,
.topic_slider-ig .slick-next:before {
  color: #333;
  font-size: 24px;
  opacity: 0.85;
  transition: opacity .2s ease;
}
.topic_slider-ig .slick-prev:hover:before,
.topic_slider-ig .slick-next:hover:before { opacity: 1; }

/* ===============================
   slickドット：画像の下端に重ねる
   =============================== */
.topic_slider-ig .slick-dots {
  position: absolute !important;
  left: 50%;
  bottom: 8px;                 /* 画像の下端からの距離 */
  transform: translateX(-50%);
  z-index: 3;
  margin: 0;
  padding: 0;
  width: auto;
  list-style: none;
}
.topic_slider-ig .slick-dots li { display: inline-block; margin: 0 4px; }
.topic_slider-ig .slick-dots li button {
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
}
.topic_slider-ig .slick-dots li button:before {
  font-size: 10px;
  color: #aaa;
  opacity: .85;
}
.topic_slider-ig .slick-dots li.slick-active button:before {
  color: #333;
  opacity: 1;
}


.modellistInfo{
 padding-left:15p;
 padding-top:20px;
}



/* ===== ライトボックス全体 ===== */
.lightbox-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: rgba(0,0,0,0.8);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.lightbox-overlay.active { display: flex; }

/* 拡大画像 */
.lightbox-overlay img {
  max-width: 90vw;
  max-height: 90vh;
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(0,0,0,0.6);
  object-fit: contain;
}

/* 閉じるボタン */
.lightbox-close {
  position: absolute;
  top: 20px; right: 30px;
  color: #fff;
  font-size: 32px;
  cursor: pointer;
  line-height: 1;
  font-weight: bold;
}