/* ビフォー・アフター比較スライダー */

/* ラッパーのスタイル - 外枠とパディング */
.ba-slider-wrapper {
  padding: 30px;
  border: 1px solid #999;
  border-radius: 6px;
}

/* 親コンテナに相対的な位置を設定（重要：absoluteの基準点） */
.ba-slider,
.ba-slider > [data-type="data-type-image"] {
  position: relative;
  overflow: hidden;
}

/* ホバー時のシャドウを無効化 */
.ba-slider:hover,
.ba-slider *:hover {
  box-shadow: none !important;
}

/* セパレーター（ボーダー）のスタイル */
.ba-slider .cndkbeforeafter-seperator {
  width: 2px !important;
  background-color: #ffffff !important;
}

/* ハンドル（ボタン）のスタイル */
.ba-slider .cndkbeforeafter-seperator > div > span {
  width: 80px !important;
  height: 61px !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  cursor: ew-resize;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important;
  top: 30% !important;
  left: 50% !important;
  margin-top: -30px !important;
  margin-left: -40px !important;
}

/* デフォルトの矢印アイコンを完全に削除 */
.ba-slider .cndkbeforeafter-seperator > div > span::before,
.ba-slider .cndkbeforeafter-seperator > div > span::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  border: none !important;
  background: none !important;
  padding: 0 !important;
  margin: 0 !important;
  transform: none !important;
}

/* 新しいアイコン用の擬似要素を追加 */
.ba-slider .cndkbeforeafter-seperator > div > span {
  position: relative;
}

.ba-slider .cndkbeforeafter-seperator > div > span::after {
  content: "" !important;
  display: block !important;
  width: 80px !important;
  height: 61px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='418.3' height='321.2' viewBox='0 0 418.3 321.2'%3E%3Cpolygon fill='%23ffffff' points='202.4 274.7 202.1 184.1 113 184 112.9 138.7 4.1 229.4 113.2 320.3 113.1 275 202.4 274.7'/%3E%3Cg%3E%3Crect fill='%23ffffff' x='196.6' y='56' width='4.6' height='81.9'/%3E%3Crect fill='%23ffffff' x='187' y='65.1' width='4.9' height='72.8'/%3E%3Crect fill='%23ffffff' x='176.4' y='75.9' width='4.9' height='62'/%3E%3Crect fill='%23ffffff' x='166.6' y='84' width='4.9' height='53.9'/%3E%3Crect fill='%23ffffff' x='119.4' y='126.3' width='4.7' height='11.6'/%3E%3Crect fill='%23ffffff' x='128.6' y='120.1' width='4.7' height='17.8'/%3E%3Crect fill='%23ffffff' x='157.5' y='93.9' width='4.9' height='43.9'/%3E%3Crect fill='%23ffffff' x='147.5' y='100.9' width='4.9' height='37'/%3E%3Crect fill='%23ffffff' x='138.4' y='109.1' width='4.9' height='28.8'/%3E%3C/g%3E%3Cpolygon fill='%23ffffff' points='215.8 48 216.1 138.6 305.2 138.7 305.3 184 414.1 93.3 305 2.4 305.1 47.7 215.8 48'/%3E%3Cg%3E%3Crect fill='%23ffffff' x='217.3' y='184.5' width='4.6' height='81.9' transform='translate(440.4 449.6) rotate(179.7)'/%3E%3Crect fill='%23ffffff' x='226.5' y='184.5' width='4.9' height='72.8' transform='translate(459.2 440.5) rotate(179.7)'/%3E%3Crect fill='%23ffffff' x='237.1' y='184.5' width='4.9' height='62' transform='translate(480.2 429.6) rotate(179.7)'/%3E%3Crect fill='%23ffffff' x='246.9' y='184.5' width='4.9' height='53.9' transform='translate(499.9 421.5) rotate(179.7)'/%3E%3Crect fill='%23ffffff' x='294.2' y='184.5' width='4.7' height='11.6' transform='translate(594.1 378.9) rotate(179.7)'/%3E%3Crect fill='%23ffffff' x='255.9' y='184.5' width='4.9' height='43.9' transform='translate(517.9 411.5) rotate(179.7)'/%3E%3Crect fill='%23ffffff' x='266' y='184.5' width='4.9' height='37' transform='translate(538 404.5) rotate(179.7)'/%3E%3Crect fill='%23ffffff' x='275' y='184.5' width='4.9' height='28.8' transform='translate(556 396.2) rotate(179.7)'/%3E%3Crect fill='%23ffffff' x='285.2' y='184.5' width='4.7' height='17.8'/%3E%3C/g%3E%3C/svg%3E") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  position: static !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  border: none !important;
}

/* ハンドルの左右にbefore/afterテキストを追加 */
/* コメントアウト: 必要に応じて復元可能
.ba-slider .cndkbeforeafter-seperator::before,
.ba-slider .cndkbeforeafter-seperator::after {
  position: absolute;
  top: 30%;
  transform: translateY(-50%);
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  text-transform: lowercase;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  line-height: 1;
}

.ba-slider .cndkbeforeafter-seperator::before {
  content: "before";
  right: calc(100% + 25px);
}

.ba-slider .cndkbeforeafter-seperator::after {
  content: "after";
  left: calc(100% + 25px);
}
*/

/* After（下になる画像）のスタイル - コンテナ全体を埋める */
.ba-slider .cndkbeforeafter-item-after-c {
  left: 0 !important;
  width: 100% !important;
}

/* Before（上になる画像）のスタイル - 左端を基準にする */
.ba-slider .cndkbeforeafter-item-before-c {
  left: 0 !important;
}

/* 画像のスケーリング - 高さは自動でアスペクト比を保つ */
.ba-slider .cndkbeforeafter-item img {
  position: relative;
  display: block;
  height: auto !important;
  max-width: none !important;
}

/* Before画像 - 親要素（.cndkbeforeafter-item）の幅を基準にする */
.ba-slider .cndkbeforeafter-item-before-c {
  overflow: hidden !important;
}

/* After画像も同様 */
.ba-slider .cndkbeforeafter-item-after-c {
  overflow: hidden !important;
}

/* デフォルトはトランジションなし（ドラッグ時に即座に反応） */
/* ただし、アニメーション中とクリック時は除外 */
.ba-slider:not(.ba-animating):not(.ba-click-mode) .cndkbeforeafter-seperator,
.ba-slider:not(.ba-animating):not(.ba-click-mode) .cndkbeforeafter-item > div {
  transition: none !important;
}

/* クリック時のみ短いトランジションを適用 */
.ba-slider.ba-click-mode .cndkbeforeafter-seperator,
.ba-slider.ba-click-mode .cndkbeforeafter-item > div {
  transition: all 0.2s ease-out !important;
}

/* Before/Afterテキストラベルのスタイル */
.ba-slider .cndkbeforeafter-item-before-text,
.ba-slider .cndkbeforeafter-item-after-text {
  background-color: rgba(0, 0, 0, 0.9) !important;
  color: #ffffff !important;
  padding: 8px 20px !important;
  margin: 15px !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  text-shadow: none !important;
  border-radius: 999px !important;
  opacity: 1 !important;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .ba-slider .cndkbeforeafter-seperator > div > span {
    width: 40px !important;
    height: 30px !important;
    margin-top: -15px !important;
    margin-left: -20px !important;
  }

  .ba-slider .cndkbeforeafter-seperator > div > span::after {
    width: 40px !important;
    height: 30px !important;
  }

  .ba-slider .cndkbeforeafter-seperator::before,
  .ba-slider .cndkbeforeafter-seperator::after {
    font-size: 12px !important;
  }

  .ba-slider .cndkbeforeafter-item-before-text,
  .ba-slider .cndkbeforeafter-item-after-text {
    font-size: 11px !important;
    padding: 6px 16px !important;
  }
}