@charset "UTF-8";

/* =============================================================
 * 画像の比較スライダー（共有部品）
 *
 * 同じ寸法の画像を2枚ぴったり重ね、上の画像を clip-path で左側だけ見せる。
 * 境目を左右に動かすと、同じ場所を見比べられる。
 *
 * 使っている場所：
 *   ・/seisaku/image-resolution-checker/（RGB と CMYK の見比べ）
 *   ・/seisaku/rgb-to-cmyk-converter/  （同上）
 * 動かす処理は compare-slider.js（window.CompareSlider.create）。
 *
 * クラスの接頭辞は cs-（compare slider）。
 * もとは画像解像度チェッカーの中に irc- 接頭辞で書いていたが、
 * 2ページで使うことになったのでファイルごと切り出した（2026-09-10）。
 * ============================================================= */
.cs-compare {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid #ccc;
  /* 画像の下に隙間ができないように */
  line-height: 0;
  cursor: ew-resize;
  /* ドラッグ中に画像や文字が選択されるのを防ぐ */
  user-select: none;
  -webkit-user-select: none;
  /* スマホで縦スクロールを殺さない。縦フリックはページへ渡し、横の動きだけ拾う
   * （原寸プレビューの枠と同じ考え方。進行ログ 2026-09-08 の記録を参照） */
  touch-action: pan-y;
}

.cs-compareImg {
  display: block;
  width: 100%;
  height: auto;
}

/* 上に重ねる側。clip-path の右インセットを JS が動かす */
.cs-compareClip {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  clip-path: inset(0 50% 0 0);
}

.cs-compareClip .cs-compareImg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

/* 境目の線。つまみは中央に置く */
.cs-compareLine {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .35);
  pointer-events: none;
}

.cs-compareGrip {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #12305a;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
  /* 左右の矢印を文字で置く（画像を増やさないため） */
  color: #12305a;
  font-size: 15px;
  font-weight: bold;
  line-height: 36px;
  text-align: center;
  letter-spacing: -1px;
}

/* どちら側が何かを常に出しておく。触らなくても意味が分かるように */
.cs-compareLabel {
  position: absolute;
  top: 10px;
  padding: 3px 10px;
  border-radius: 3px;
  background: rgba(27, 29, 31, .72);
  color: #fff;
  font-size: 80%;
  line-height: 1.6;
  white-space: nowrap;
  pointer-events: none;
}

.cs-compareLabelLeft  { left: 10px; }
.cs-compareLabelRight { right: 10px; }

.cs-compareNote {
  margin-top: 8px;
  font-size: 85%;
  color: #666;
}

@media (max-width: 600px) {
  .cs-compareGrip {
    width: 34px;
    height: 34px;
    margin: -17px 0 0 -17px;
    line-height: 30px;
    font-size: 13px;
  }

  .cs-compareLabel {
    top: 6px;
    padding: 2px 7px;
    font-size: 72%;
  }

  .cs-compareLabelLeft  { left: 6px; }

  /* 狭い画面では左右のラベルが横に並びきらず重なるので、右側は下端へ逃がす。
   * 上下で分かれていれば、幅がどれだけ狭くなっても衝突しない */
  .cs-compareLabelRight {
    top: auto;
    bottom: 6px;
    right: 6px;
  }
}