/* 画像の比較スライダー（site-core 0.26.0、includes/class-compare.php）。左 = before、右 = after。位置は --pcj-ba（%） */
.pcj-ba{position:relative;overflow:hidden;margin:0 auto 1.2em;max-width:100%;--pcj-ba:50%;user-select:none;-webkit-user-select:none;touch-action:pan-y;line-height:0}
.pcj-ba img{display:block;width:100%;height:auto;max-width:none;margin:0;pointer-events:none}
.pcj-ba-top{position:absolute;top:0;left:0;right:0;bottom:0;clip-path:inset(0 0 0 var(--pcj-ba))}
.pcj-ba-handle{position:absolute;top:0;bottom:0;left:var(--pcj-ba);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.35);pointer-events:none}
.pcj-ba-handle::before{content:"";position:absolute;top:50%;left:50%;width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.4)}
.pcj-ba-handle::after{content:"\25C0\00a0\25B6";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:11px;color:#333;letter-spacing:1px;line-height:1}
.pcj-ba-range{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none;background:transparent}
.pcj-ba-range:focus-visible{opacity:1;outline:2px solid #2271b1;outline-offset:-2px;background:transparent}
.pcj-ba-label{position:absolute;top:8px;padding:2px 8px;border-radius:3px;background:rgba(0,0,0,.55);color:#fff;font-size:12px;line-height:1.5;pointer-events:none}
.pcj-ba-label-before{left:8px}
.pcj-ba-label-after{right:8px}