/* ========== scrub.css ========== */

.cs-track {
  width: 100%;
}

.cs-pin-wrap {
  width: 100%;
  overflow: hidden;
  background: #000;
  background: #fff;
}

/* Canvas枠：各画像の比率をpadding-topで指定 */
.cs-wrap {
  position: relative;
  width: 100%;
  background: #000;
  background: #fff;
}
.cs-wrap canvas {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: block;
}

/* 各BOXの縦横比 */
#csWrap1_01 { padding-top: 54.1667%; } /* 960x520 */
#csWrap1_02 { padding-top: 41.6667%; } /* 960x400 */
#csWrap1_03 { padding-top: 62.5%;    } /* 960x600 */
#csWrap1_04 { padding-top: 21.875%;  } /* 960x210 */

/* eye.mp4用・BOX2用（1080x1920 = 9:16） */
#csWrap2    { padding-top: 177.78%;  } /* 1080x1920 */
#csWrapEye  { padding-top: 177.78%;  } /* eye.mp4 */

/* video用 */
.scrub-frame {
  position: relative;
  width: 100%;
}
.scrub-spacer {
  display: block;
  width: 100%;
  height: auto;
  visibility: hidden;
}
.scrub-video {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1;
}

/* ========== brandcopy 自動再生Canvas ========== */
/* 960x500 → padding-top: 52.0833% */
.bc-wrap {
  position: relative;
  width: 100%;
  padding-top: 52.0833%;
}
.bc-wrap canvas {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: block;
}