/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Sep 18 2025 | 00:17:20 */
/* === gallery配下だけ適用 === */
body.is-gallery .ba-compare{position:relative;max-width:980px;margin:24px auto;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#f2f2f2}
body.is-gallery .ba-compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;user-select:none;pointer-events:none}
body.is-gallery .ba-compare__after{clip-path:inset(0 0 0 50%)}
body.is-gallery .ba-compare__handle{position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);width:2px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.25)}
body.is-gallery .ba-compare__knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.25);display:grid;place-items:center}
body.is-gallery .ba-compare__knob::before{content:"";width:18px;height:18px;mask:linear-gradient(90deg,transparent 45%,#000 45% 55%,transparent 55%),linear-gradient(0deg,transparent 45%,#000 45% 55%,transparent 55%);-webkit-mask:linear-gradient(90deg,transparent 45%,#000 45% 55%,transparent 55%),linear-gradient(0deg,transparent 45%,#000 45% 55%,transparent 55%);background:#000;opacity:.65}
body.is-gallery .ba-compare__label{position:absolute;z-index:3;top:10px;left:10px;padding:.35em .6em;border-radius:6px;font-size:12px;line-height:1;background:rgba(0,0,0,.55);color:#fff}
body.is-gallery .ba-compare__label--after{left:auto;right:10px}
body.is-gallery .ba-compare input[type="range"]{position:absolute;inset:0;opacity:0}
@media (max-width:480px){body.is-gallery .ba-compare__knob{width:44px;height:44px}}
/* ＋アイコンのズレを防ぐ：中央固定＆行高リセット */
body.is-gallery .ba-compare__knob{
  display:block;         /* gridの影響を回避 */
  line-height:0;         /* 行高の干渉を排除 */
  position:absolute;     /* 念のため明示 */
}

/* 旧マスク方式は上書きして無効化（残っていてOK） */
body.is-gallery .ba-compare__knob::before,
body.is-gallery .ba-compare__knob::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  background:#000;
  opacity:.65;
  border-radius:1px;
}

/* ＋の横棒・縦棒を個別に描く（マスク不要で安定） */
body.is-gallery .ba-compare__knob::before{  /* 横棒 */
  width:18px;
  height:2px;
}
body.is-gallery .ba-compare__knob::after{   /* 縦棒 */
  width:2px;
  height:18px;
}

@media (max-width:480px){
  body.is-gallery .ba-compare__knob::before{ width:20px; height:2px; }
  body.is-gallery .ba-compare__knob::after{  width:2px;  height:20px; }
}


/* 旧方式の擬似要素を無効化（競合回避） */
body.is-gallery .ba-compare__knob::before,
body.is-gallery .ba-compare__knob::after{
  content: none !important;
}

/* ノブ自体に「＋」を背景として描く（中央固定・干渉に強い） */
body.is-gallery .ba-compare__knob{
  /* 既存プロパティは残してOK。必要なら z-index を明示 */
  z-index: 1;

  /* ここが肝：縦棒・横棒・白い円の3レイヤー背景 */
  background:
    linear-gradient(var(--ba-plus, rgba(0,0,0,.75)), var(--ba-plus, rgba(0,0,0,.75))) center/2px 18px no-repeat,  /* 縦棒 */
    linear-gradient(var(--ba-plus, rgba(0,0,0,.75)), var(--ba-plus, rgba(0,0,0,.75))) center/18px 2px no-repeat,  /* 横棒 */
    #fff;                                                                                                         /* ノブ本体 */
}

/* 小さめ端末：バー長さだけ少し伸ばす（任意） */
@media (max-width:480px){
  body.is-gallery .ba-compare__knob{
    background:
      linear-gradient(var(--ba-plus, rgba(0,0,0,.75)), var(--ba-plus, rgba(0,0,0,.75))) center/2px 20px no-repeat,
      linear-gradient(var(--ba-plus, rgba(0,0,0,.75)), var(--ba-plus, rgba(0,0,0,.75))) center/20px 2px no-repeat,
      #fff;
  }
}

/* ===== ノブを「↔︎」アイコンに変更（coredesign /gallery/ のみ） ===== */

/* 旧：＋用の擬似要素や背景を無効化（残っていてもOK） */
body.is-gallery .ba-compare__knob::before,
body.is-gallery .ba-compare__knob::after{
  content: none !important;
}

/* 新：矢印アイコン（SVG）を中央に描く。白い円はそのまま。 */
body.is-gallery .ba-compare__knob{
  /* ノブ本体の見た目（お好みで調整可） */
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:40px; height:40px; border-radius:50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23000' stroke-opacity='.75' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 12l-6 8 6 8'/%3E%3Cpath d='M24 12l6 8-6 8'/%3E%3C/g%3E%3C/svg%3E")
      center / 22px 22px no-repeat,
    #fff; /* ← 白い円 */
  box-shadow:0 2px 10px rgba(0,0,0,.25);
  z-index:1;
}

/* 小さめ端末はアイコンを少し大きく */
@media (max-width:480px){
  body.is-gallery .ba-compare__knob{
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23000' stroke-opacity='.75' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 12l-6 8 6 8'/%3E%3Cpath d='M24 12l6 8-6 8'/%3E%3C/g%3E%3C/svg%3E")
        center / 24px 24px no-repeat,
      #fff;
  }
}