* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

body {
  overflow: hidden;
  background: #fff;
  font-family: sans-serif;
}

/*
  viewer = 画面に見えている窓 top:80pxで広告が隠れない
  canvas = その中を動く巨大な画像領域
*/
.viewer {
    position: absolute;
    top: 80px;
    right: 0;
    bottom: 0;
    left: 0;

    overflow: hidden;
    cursor: grab;
    touch-action: none;
}

.viewer.is-dragging {
  cursor: grabbing;
}

.canvas {
  position: absolute;
  left: 0;
  top: 0;
  
  /* JSで作品全体のサイズを設定する */
  width: 2400px;
  height: 3600px;
  
  transform: translate3d(0, 0, 0);
  transform-origin: 0 0;
}

.tile {
  position: absolute;
  display: block;
  width: 1200px;
  height: 1200px;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}