/* 施工事例ページで、境目をドラッグしてビフォーアフターを比較する。
   clip-path は読み込み後の再描画が崩れることがあるため使わず、overflow:hidden の
   幅をJSで変えることで切り抜く（写真側のimgは常にスライダー全幅のpxサイズを保つ）。 */
.ba_slider{position:relative;width:100%;max-width:720px;margin:1.6em auto;aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:#dfe3e8;touch-action:none;user-select:none;-webkit-user-select:none}
.ba_slider_after{position:absolute;inset:0;z-index:1}
.ba_slider_after img{position:absolute;inset:0;width:100%!important;height:100%!important;object-fit:cover;display:block;pointer-events:none;-webkit-user-drag:none;-webkit-touch-callout:none;max-width:none!important}
.ba_slider_before{position:absolute;top:0;left:0;height:100%;width:var(--ba-pos,50%);overflow:hidden;z-index:2}
.ba_slider_before img{position:absolute;top:0;left:0;height:100%;object-fit:cover;display:block;pointer-events:none;-webkit-user-drag:none;-webkit-touch-callout:none;max-width:none!important;height:100%!important}
.ba_slider_divider{position:absolute;top:0;bottom:0;left:var(--ba-pos,50%);width:3px;margin-left:-1.5px;background:#fff;z-index:3;pointer-events:none}
.ba_slider_handle{position:absolute;top:50%;left:var(--ba-pos,50%);width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(28,35,51,.3);z-index:4;cursor:ew-resize;display:flex;align-items:center;justify-content:center}
.ba_slider_handle::before,.ba_slider_handle::after{content:"";width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent}
.ba_slider_handle::before{border-right:7px solid #27303d;margin-right:4px}
.ba_slider_handle::after{border-left:7px solid #27303d;margin-left:4px}
.ba_slider_label{position:absolute;top:10px;font:800 11px "Noto Sans JP",sans-serif;letter-spacing:.05em;color:#fff;background:rgba(28,35,51,.55);padding:4px 10px;border-radius:10px;z-index:3;pointer-events:none}
.ba_slider_label-before{left:10px}
.ba_slider_label-after{right:10px}
.ba_slider.ba_hint .ba_slider_before,.ba_slider.ba_hint .ba_slider_divider,.ba_slider.ba_hint .ba_slider_handle{transition:width .7s cubic-bezier(.65,0,.35,1),left .7s cubic-bezier(.65,0,.35,1)}
@media (max-width:420px){.ba_slider{max-width:100%}}