@charset "utf-8";
/* CSS Document */

#pixel-viewer {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.9);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  animation: fadein 0.2s ease-out both;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
}
#pixel-viewer.fadeout {
  animation: fadeout 0.2s ease-out both;
  pointer-events: none /* ← IE救済措置（IEでこれがないと画像を閉じた後にページ全体がクリックできなくなります...）*/;
}
#pixel-viewer.fadeout #pixel-viewer__img {
  animation: scaledown 0.2s ease-out both;
}
#pixel-viewer::before,
#pixel-viewer::after {
  content: "";
  dispaly: block;
  width: 24px;
  height: 3px;
  background: #eee;
  border-radius: 4px;
  position: fixed;
  top: 20px;
  right: 12px;
  z-index: 12;
}
#pixel-viewer::before {
  transform: rotate(45deg);
}
#pixel-viewer::after {
  transform: rotate(-45deg);
}
#pixel-viewer__img {
  display: block;
  margin: auto;
  max-width: 100%;
  max-height: calc(100% - 44px);
  animation: scaleup 0.2s ease-out both;
}
@keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes scaleup {
  0% {
    transform: scale(0.97);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes fadeout {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes scaledown {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.97);
  }
}