/* ========================================
   Before / After 比較スライダー
======================================== */

.twentytwenty.before-after-container {
  --position: 50%;

  position: relative;
  width: 100%;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
  cursor: ew-resize;
}

/* Before画像
   こちらが高さの基準になります */
.twentytwenty.before-after-container .before-after-before {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  z-index: 2;

  clip-path: inset(
    0
    calc(100% - var(--position))
    0
    0
  );

  pointer-events: none;
}

/* After画像 */
.twentytwenty.before-after-container .before-after-after {
  position: absolute;
  top: 0;
  left: 0;

  display: block;
  width: 100%;
  height: 100%;

  object-fit: fill;

  z-index: 1;

  pointer-events: none;
}

/* 中央の操作ハンドル */
.before-after-handle {
  position: absolute;

  top: 50%;
  left: var(--position);

  transform: translate(-50%, -50%);

  width: 44px;
  height: 44px;

  border: 3px solid #fff;
  border-radius: 50%;

  background: rgba(0, 0, 0, 0.35);

  z-index: 10;

  cursor: ew-resize;

  padding: 0;

  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.1),
    0 2px 8px rgba(0, 0, 0, 0.25);
}

/* ハンドル上下の白線 */
.before-after-handle::before,
.before-after-handle::after {
  content: "";

  position: absolute;

  left: 50%;

  width: 3px;
  height: 9999px;

  background: #fff;

  transform: translateX(-50%);
}

.before-after-handle::before {
  bottom: 100%;
}

.before-after-handle::after {
  top: 100%;
}

/* 左右矢印 */
.before-after-arrow {
  position: absolute;

  top: 50%;

  width: 0;
  height: 0;

  transform: translateY(-50%);
}

.before-after-arrow-left {
  left: 7px;

  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 7px solid #fff;
}

.before-after-arrow-right {
  right: 7px;

  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 7px solid #fff;
}


/* スマホ */
@media screen and (max-width: 767px) {

  .before-after-handle {
    width: 38px;
    height: 38px;
  }

}