body {
  margin : 0px;
  padding: 0px;
  font   : 12px "Lucida Grande", Helvetica, Arial, sans-serif;
  width  : 100%;
  height : 100%;
}

a {
  color: #00B7FF;
}

.display-none {
  display   : none;
  visibility: hidden;
}

.np-button {
  background: #e0e0e0;
  box-shadow: 9px 9px 18px #9b9b9b,
    -9px -9px 18px #ffffff;
}

.np-circle-32 {
  width        : 32px;
  height       : 32px;
  border-radius: 50%;
  background   : #e0e0e0;
  box-shadow   : 9px 9px 18px #9b9b9b,
    -9px -9px 18px #ffffff;
}

.circle-sm {
  width        : 36px;
  height       : 36px;
  border-radius: 50%;
}

.circle-base {
  width        : 42px;
  height       : 42px;
  border-radius: 50%;
}

.np-circle-lg {
  width        : 64px;
  height       : 64px;
  border-radius: 50%;
  background   : #e0e0e0;
  box-shadow   : 9px 9px 18px #9b9b9b,
    -9px -9px 18px #ffffff;
}

.np-circle-2xl {
  width        : 96px;
  height       : 96px;
  border-radius: 50%;
  background   : #e0e0e0;
  box-shadow   : 9px 9px 18px #9b9b9b,
    -9px -9px 18px #ffffff;
}

.np-circle-4xl {
  width        : 128px;
  height       : 128px;
  border-radius: 50%;
  background   : #e0e0e0;
  box-shadow   : 9px 9px 18px #9b9b9b,
    -9px -9px 18px #ffffff;
}

.ios-click {
  position: fixed;
  top     : 0;
  bottom  : 0;
  left    : 0;
  right   : 0;
}

#direct-panel {
  width: 360px;
}

/* ダブルタップしても画面を拡大(ズーム)させない設定 */
/* 完全にタッチスクロールが無効になる */
html {
  /* touch-action: none; */
}

.layer-wrap>canvas {
  position      : absolute;
  pointer-events: all;
  touch-action  : auto;
}

.layer-wrap>div {
  position      : absolute;
  pointer-events: all;
  touch-action  : auto;
}

#file-droparea {
  width: 200px;
  height: 200px;
  margin: 20px auto;
  text-align: center;
  line-height: 200px;
  border: 2px dashed #ccc;
  cursor: pointer;
  background-color: azure;
}