/*
 * before-after-slider.css
 * 別ページ用カルーセル：中央1枚・両端見切れ・ループ
 * before-after.css の後に読み込んでください。
 */

/* ============================================================
   スライダーラッパー
   ============================================================ */
.ba-slider-wrap {
  position: relative;
}

/* 1200px以下のみカルーセルモード */
@media (max-width: 1200px) {
  .ba-slider-wrap {
    overflow: hidden;   /* 両端の見切れを隐す */
    padding: 8px 52px;  /* 矢印ボタン分の左右余白 */
  }
}

/* ============================================================
   左右矢印ボタン（1200px以下のみ表示）
   ============================================================ */
.ba-slider-prev,
.ba-slider-next {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #E95312;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 2px 10px rgba(89,67,60,.25);
  transition: background .2s;
  align-items: center;
  justify-content: center;
}
.ba-slider-prev:hover,
.ba-slider-next:hover { background: #E95312; }
.ba-slider-prev:hover svg path,
.ba-slider-next:hover svg path { stroke: #fff; }
.ba-slider-prev { left: 6px; }
.ba-slider-next { right: 6px; }
.ba-slider-prev svg,
.ba-slider-next svg { width: 20px; height: 20px; display: block; }
.ba-slider-prev svg path,
.ba-slider-next svg path {
  stroke: #E95312;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 1200px) {
  .ba-slider-prev,
  .ba-slider-next { display: flex; }
}

/* ============================================================
   1200px以下：グリッドをカルーセルに変更
   ============================================================ */
@media (max-width: 1200px) {

  /* before-after.cssの縦並びを上書き */
  .ba-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    overflow-x: scroll;
    overflow-y: visible;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    gap: 20px;
    padding: 0;  /* JSで動的に設定 */
  }
  .ba-grid::-webkit-scrollbar { display: none; }

  /* カード幅はJSのsetPadding()で動的に設定するためCSS側は最低限のみ */
  .ba-card {
    margin: 0 !important;
    scroll-snap-align: center;
    flex-shrink: 0;
  }
}

/* ============================================================
   SP（600px以下）
   ============================================================ */
@media (max-width: 600px) {
  .ba-slider-wrap {
    padding: 8px 0px;  /* SP時は少し紹める */
  }
  .ba-slider-prev,
  .ba-slider-next { width: 36px; height: 36px; }
  .ba-slider-prev { left: 4px; }
  .ba-slider-next { right: 4px; }
  /* SP時もカード幅はJS管理 */
	
	
	.ba-grid{
		padding:0!important;
	}
}
.ba-card {
  box-shadow: none;
}