@charset "UTF-8";
/* =========================================================
   swap.css  ―  レンズ見本クリックによる写真切替の見た目
   ・初期表示の見た目は変えない（クリック可能化・アクティブ表示・送りUIの追加のみ）
   ========================================================= */

/* 見本をクリック可能に */
.swatch--clickable {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.swatch--clickable img {
  transition: transform 0.15s ease, filter 0.15s ease;
}
.swatch--clickable:hover img,
.swatch--clickable:focus-visible img {
  transform: scale(1.06);
}
.swatch--clickable:focus-visible {
  outline: 2px solid #7fa6cf;
  outline-offset: 3px;
  border-radius: 8px;
}

/* 選択中の見本の装飾は付けない（ご要望によりアクティブ表示なし）。
   選択状態は .is-active クラス／aria-pressed のみで保持し、見た目は変えない。 */

/* メイン写真の差し替えは swap.js が左右スライド＋フェードを inline style で制御する。
   ここでは特別な指定は不要（角丸などは既存の .showcase__photo-img を維持）。 */

/* メイン写真のスワイプ操作。
   touch-action: pan-y で「縦スクロールはブラウザ任せ／横ジェスチャーは JS が受け取る」を実現。
   画像のドラッグ・選択は抑止。デスクトップでは掴めることを示すカーソルに。 */
.swap-swipe {
  touch-action: pan-y;
  cursor: grab;
}
.swap-swipe:active {
  cursor: grabbing;
}
.swap-swipe img {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}

/* ‹ 濃度の比較 › 前後送りナビ */
.density.has-swap .density__title {
  display: none; /* 元の「濃度の比較」見出しは swap-nav 内のラベルで代替 */
}
.swap-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 10px;
}
.swap-nav__title {
  font-weight: 700;
  font-size: clamp(1rem, 4vw, 1.5rem);
}
@media (min-width: 768px) {
  .swap-nav__title {
    font-size: 1.125rem;
  }
}
@media (min-width: 1440px) {
  .swap-nav__title {
    font-size: 1.25rem;
  }
}
.swap-nav__btn {
  flex: 0 0 auto;
  width: 1.9em;
  height: 1.9em;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid #c4c4c4;
  border-radius: 50%;
  background: #fff;
  color: #777;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.swap-nav__btn:hover {
  background: #f2f2f2;
  color: #333;
}
.swap-nav__btn:focus-visible {
  outline: 2px solid #7fa6cf;
  outline-offset: 2px;
}

/* モーション抑制環境では切替フェード等を無効化 */
@media (prefers-reduced-motion: reduce) {
  .swatch--clickable img,
  .showcase__photo-img,
  .swap-nav__btn {
    transition: none !important;
  }
}