div#guide {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  perspective: 550px;
  /*background: aqua;*/
}

div#guide.invert {
  transform: scale(-1, 1);
}

div#center-wrapper {
  /*回転*/
  width: 100px;
  height: 100px;
  position: relative;
  margin: auto;
  /*background: fuchsia;*/
  transform: rotateX(5deg) rotate(0deg);
}

div#center {
  /*移動*/
  width: 100px;
  height: 100px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: relative;
  margin: auto;
  /*background: lime;*/
}

div#lobby-wrapper {
  /*移動*/
  width: 100px;
  height: 100px;
  margin: auto;
  transition: 1.5s;
}

div#guide * {
  transform-style: preserve-3d;
  transition: 0.5s;
}

div.surface {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 100px;
  height: 100px;
  outline: 1px solid black;
}

div.surface.red {
  outline: 2px dotted #d22;
}

div.surface.yellow {
  outline: 2px dotted yellow;
}

div.surface.green {
  outline: 2px dotted #392;
}

div.surface.blue {
  outline: 2px dotted #12b;
}

div.surface.purple {
  outline: 2px solid #a3a;
}

div.floor {
  background: #99999933;
}

div.floor.purple {
  background: url(../img/library8_5.png) center no-repeat;
  background-size: 120%;
}

div.floor.blink {
  animation: blink 1.5s ease-in-out infinite;
}

div.floor.blink:hover {
  filter: brightness(1.5);
}

@keyframes blink {
  0% {
    background: #999;
  }
  50% {
    background: #ccc;
  }
  100% {
    background: #999;
  }
}

div#lobby {
  background: url(../img/library8_0.png) center no-repeat;
  background-size: 100%;
  outline: 2px solid #fa3;
}

div#lobby-true {
  background: url(../img/library8_0a.png) center no-repeat;
  background-size: 100%;
  outline: 2px solid #fa3;
}

div#lobby-true.wait {
  opacity: 0;
  transform: translateZ(100px) rotate(720deg);
}

div#lobby-true.pattern-a {
  transform: rotate(0deg);
}

div#lobby-true.pattern-b {
  transform: rotate(-90deg);
}

div#p01 {
  left: 100%;
  right: -100%;
}

div#p02 {
  top: 100%;
  bottom: -100%;
}

div#p03 {
  left: -100%;
  right: 100%;
}

div#p04 {
  top: -100%;
  bottom: 100%;
}

div#p05 {
  left: 200%;
  right: -200%;
  top: 200%;
  bottom: -200%;
}

div#p06 {
  left: -200%;
  right: 200%;
  top: 200%;
  bottom: -200%;
}

div#p07 {
  left: -200%;
  right: 200%;
  top: -200%;
  bottom: 200%;
}

div#p08 {
  left: 200%;
  right: -200%;
  top: -200%;
  bottom: 200%;
}

div#p0e {
  left: 500%;
  right: -500%;
  top: -100%;
  bottom: 100%;
}

div#p0s {
  left: -100%;
  right: 100%;
  top: 500%;
  bottom: -500%;
}

div#p0w {
  left: -500%;
  right: 500%;
  top: -100%;
  bottom: 100%;
}

div#p0n {
  left: -200%;
  right: 200%;
  top: -500%;
  bottom: 500%;
}

div#blink-1 {
  left: 200%;
  right: -200%;
}

div#blink-2 {
  top: 200%;
  bottom: -200%;
}

div#blink-3 {
  left: -200%;
  right: 200%;
}

div#blink-4 {
  top: -200%;
  bottom: 200%;
}

div#r01 {
  left: 200%;
  right: -200%;
  transform: translateX(400px) translateZ(75px) rotate(180deg);
}

/*1.appear-red*/

div#guide[step="appear-red"] div#center-wrapper {
  transform: rotateX(35deg) rotate(45deg);
}

div#guide[step="appear-red"] div#center {
  left: -200%;
  right: 200%;
  transform: translateZ(75px);
}

div#blink-1.not-selected {
  left: 900%;
  right: -900%;
  opacity: 0;
}

div#blink-2.not-selected {
  top: 900%;
  bottom: -900%;
  opacity: 0;
}

div#blink-3.not-selected {
  left: -900%;
  right: 900%;
  opacity: 0;
}

div#blink-4.not-selected {
  top: -900%;
  bottom: 900%;
  opacity: 0;
}

div#r01.appear {
  animation: appear-red 1.5s ease-in-out forwards;
}

@keyframes appear-red {
  0% {
    transform: translateX(400px) translateZ(75px);
  }
  40% {
    transform: translateX(0px) translateZ(75px);
  }
  60% {
    transform: translateX(0px) translateZ(75px) rotate(360deg);
  }
  100% {
    transform: translateX(0px) translateZ(0px);
  }
}

/*----------------------*/

p#test {
  background: #f00;
  opacity: 0.5;
}

div.surface.wait {
  transform: translateZ(100px);
  opacity: 0;
}

#r01 {
  background: url(../img/library8_1.png) center no-repeat;
  background-size: 100%;
}

#r02,
#r04 {
  left: 100%;
  right: -100%;
  transform: rotateY(-90deg);
  transform-origin: 0 0;
}

#r03,
#r05 {
  top: -100%;
  bottom: 100%;
  transform: rotateX(-90deg);
  transform-origin: 100% 100%;
}

div#r06 {
  top: 100%;
  bottom: -100%;
  transform: rotateX(90deg);
  transform-origin: 0 0;
}

/*2.expand-red*/

div.red.expand {
  background: url(../img/library8_1.png) center no-repeat;
  background-size: 100%;
}

div#guide[step="expand-red"] div#center-wrapper {
  animation: ctw-expand-red 3s ease-in-out forwards;
}

@keyframes ctw-expand-red {
  0% {
    transform: rotateX(35deg) rotate(405deg);
  }
  100% {
    transform: rotateX(5deg) rotate(0deg);
  }
}

div#guide[step="expand-red"] div#center {
  left: -200%;
  right: 200%;
  animation: ctr-expand-red 3s ease-in-out forwards;
}

@keyframes ctr-expand-red {
  0% {
    transform: translateZ(75px);
  }
  100% {
    transform: translateZ(0px);
  }
}

div#r02.expand,
div#r04.expand,
div#b02.expand,
div#b03.expand,
div#b05.expand {
  animation: expand-e 3s ease-in-out forwards;
}
div#r03.expand,
div#r05.expand,
div#g03.expand,
div#g04.expand,
div#g06.expand,
div#b06.expand {
  animation: expand-n 3s ease-in-out forwards;
}
div#r06.expand,
div#y03.expand,
div#y05.expand,
div#b04.expand {
  animation: expand-s 3s ease-in-out forwards;
}

div#y02.expand,
div#y04.expand,
div#y06.expand,
div#g02.expand,
div#g05.expand {
  animation: expand-w 3s ease-in-out forwards;
}

@keyframes expand-e {
  0% {
    transform: rotateY(-90deg);
  }
  100% {
    transform: rotateY(0deg);
  }
}

@keyframes expand-s {
  0% {
    transform: rotateX(90deg);
  }
  100% {
    transform: rotateX(0deg);
  }
}

@keyframes expand-w {
  0% {
    transform: rotateY(90deg);
  }
  100% {
    transform: rotateY(0deg);
  }
}

@keyframes expand-n {
  0% {
    transform: rotateX(-90deg);
  }
  100% {
    transform: rotateX(0deg);
  }
}

div#y01 {
  left: 100%;
  right: -100%;
  top: 200%;
  bottom: -200%;
  background: url(../img/library8_3.png) center no-repeat;
  background-size: 100%;
}

#y02,
#y04,
#y06 {
  left: -100%;
  right: 100%;
  transform: rotateY(90deg);
  transform-origin: 100% 100%;
}

#y03,
#y05 {
  top: 100%;
  bottom: -100%;
  transform: rotateX(90deg);
  transform-origin: 0 0;
}

/*3.appear-yellow*/

div#guide[step="appear-yellow"] div#center-wrapper {
  animation: ctw-appear-yellow 3s ease-in-out forwards;
  transform: rotateX(35deg) rotate(135deg);
}

@keyframes ctw-appear-yellow {
  0% {
    transform: rotateX(0deg) rotate(0deg);
  }
  100% {
    transform: rotateX(35deg) rotate(135deg);
  }
}

div#guide[step="appear-yellow"] div#center {
  left: -100%;
  right: 100%;
  top: -200%;
  bottom: 200%;
  transition: 3s;
  animation: ctr-appear-yellow 3s ease-in-out forwards;
}

@keyframes ctr-appear-yellow {
  0% {
    transform: translateZ(0px);
  }
  100% {
    transform: translateZ(75px);
  }
}

/*4.expand-yellow*/

div.yellow.expand {
  background: url(../img/library8_3.png) center no-repeat;
  background-size: 100%;
}

div#guide[step="expand-yellow"] div#center-wrapper {
  transform: rotateX(35deg) rotate(135deg);
  animation: ctw-expand-yellow 3s ease-in-out forwards;
}

@keyframes ctw-expand-yellow {
  0% {
    transform: rotateX(35deg) rotate(135deg);
  }
  100% {
    transform: rotateX(15deg) rotate(25deg);
  }
}

div#guide[step="expand-yellow"] div#center {
  top: -200%;
  bottom: 200%;
  left: -100%;
  right: 100%;
  animation: ctr-expand-yellow 3s ease-in-out forwards;
}

@keyframes ctr-expand-yellow {
  0% {
    transform: translateZ(75px);
  }
  100% {
    top: -250%;
    bottom: 250%;
    left: 50%;
    right: -50%;
    transform: translateZ(0px);
  }
}

/*5.appear-green*/

div#guide[step="appear-green"] div#center-wrapper {
  transform: rotateX(35deg) rotate(135deg);
  animation: ctw-appear-green 3s ease-in-out forwards;
}

@keyframes ctw-appear-green {
  0% {
    transform: rotateX(15deg) rotate(-335deg);
  }
  100% {
    transform: rotateX(15deg) rotate(25deg);
  }
}

div#guide[step="appear-green"] div#center {
  top: -250%;
  bottom: 250%;
  left: 50%;
  right: -50%;
  animation: ctr-appear-green 3s ease-in-out forwards;
}

@keyframes ctr-appear-green {
  0% {
    transform: translateZ(0px);
  }
  100% {
    top: -100%;
    bottom: 100%;
    left: 200%;
    right: -200%;
    transform: translateZ(75px);
  }
}

/*---------------*/

div#g01 {
  left: -200%;
  right: 200%;
  top: 100%;
  bottom: -100%;
  background: url(../img/library8_4.png) center no-repeat;
  background-size: 100%;
}

#g02,
#g05 {
  left: -100%;
  right: 100%;
  transform: rotateY(90deg);
  transform-origin: 100% 100%;
}

#g03,
#g04,
#g06 {
  top: -100%;
  bottom: 100%;
  transform: rotateX(-90deg);
  transform-origin: 100% 100%;
}

/*6.expand-green*/

div.green.expand {
  background: url(../img/library8_4.png) center no-repeat;
  background-size: 100%;
}

div#guide[step="expand-green"] div#center-wrapper {
  transform: rotateX(15deg) rotate(25deg);
  animation: ctw-expand-green 3s forwards;
}

@keyframes ctw-expand-green {
  0% {
    transform: rotateX(15deg) rotate(385deg);
    animation-timing-function: cubic-bezier(0.6, 0, 0.85, 0.5);
  }
  50% {
    transform: rotateX(45deg) rotate(185deg);
    animation-timing-function: cubic-bezier(0.15, 0.5, 0.5, 1);
  }
  100% {
    transform: rotateX(15deg) rotate(-55deg);
  }
}

div#guide[step="expand-green"] div#center {
  top: -100%;
  bottom: 100%;
  left: 200%;
  right: -200%;
  animation: ctr-expand-green 3s forwards;
}

@keyframes ctr-expand-green {
  0% {
    transform: translateZ(75px);
  }
  50% {
    transform: translateZ(300px);
  }
  100% {
    top: 50%;
    bottom: -50%;
    left: 300%;
    right: -300%;
    transform: translateZ(80px);
  }
}

/*---------------*/

div#b01 {
  left: -200%;
  right: 200%;
  top: -300%;
  bottom: 300%;
  background: url(../img/library8_2.png) center no-repeat;
  background-size: 100%;
}

#b02,
#b03,
#b05 {
  left: 100%;
  right: -100%;
  transform: rotateY(-90deg);
  transform-origin: 0 0;
}

#b04 {
  top: 100%;
  bottom: -100%;
  transform: rotateX(90deg);
  transform-origin: 0 0;
}

#b06 {
  top: -100%;
  bottom: 100%;
  transform: rotateX(-90deg);
  transform-origin: 100% 100%;
}

/*7.append-blue*/

div#guide[step="appear-blue"] div#center-wrapper {
  transform: rotateX(15deg) rotate(-55deg);
  animation: ctw-appear-blue 3s forwards;
}

@keyframes ctw-appear-blue {
  0% {
    transform: rotateX(15deg) rotate(-55deg);
    animation-timing-function: cubic-bezier(0.15, 0.5, 0.5, 1);
  }
  30% {
    transform: rotateX(45deg) rotate(0deg);
    animation-timing-function: cubic-bezier(0.6, 0, 0.85, 0.5);
  }
  80% {
    transform: rotateX(45deg) rotate(0deg);
    animation-timing-function: cubic-bezier(0.15, 0.5, 0.5, 1);
  }
  100% {
    transform: rotateX(15deg) rotate(-35deg);
  }
}

div#guide[step="appear-blue"] div#center {
  top: 50%;
  bottom: -50%;
  left: 300%;
  right: -300%;
  animation: ctr-appear-blue 3s ease-in-out forwards;
}

@keyframes ctr-appear-blue {
  0% {
    transform: translateZ(80px);
    animation-timing-function: cubic-bezier(0.6, 0, 0.85, 0.5);
  }
  30% {
    top: 0%;
    bottom: -0%;
    transform: translateZ(300px);
    animation-timing-function: cubic-bezier(0.15, 0.5, 0.5, 1);
  }
  50% {
    transform: translateZ(360px);
    animation-timing-function: cubic-bezier(0.6, 0, 0.85, 0.5);
  }
  80% {
    top: 600%;
    bottom: -600%;
    left: 300%;
    right: -300%;
    transform: translateZ(300px);
    animation-timing-function: cubic-bezier(0.15, 0.5, 0.5, 1);
  }
  100% {
    top: 300%;
    bottom: -300%;
    left: 200%;
    right: -200%;
    transform: translateZ(75px);
  }
}

/*8.expand-blue*/

div.blue.expand {
  background: url(../img/library8_2.png) center no-repeat;
  background-size: 100%;
}

div#guide[step="expand-blue"] div#center-wrapper {
  transform: rotateX(15deg) rotate(-35deg);
  animation: ctw-expand-blue 3s ease-in-out forwards;
}

@keyframes ctw-expand-blue {
  0% {
    transform: rotateX(15deg) rotate(-35deg);
  }
  100% {
    transform: rotateX(5deg) rotate(405deg);
  }
}

div#guide[step="expand-blue"] div#center {
  top: 300%;
  bottom: -300%;
  left: 200%;
  right: -200%;
  animation: ctr-expand-blue 3s ease-in-out forwards;
}

@keyframes ctr-expand-blue {
  0% {
    transform: translateZ(75px);
  }
  90% {
    transform: translateZ(-125px);
  }
  100% {
    top: 300%;
    bottom: -300%;
    left: 0%;
    right: 0%;
    transform: translateZ(75px);
  }
}

/*9.appear-gold*/
div#guide[step="appear-gold"] div#center-wrapper {
  transform: rotateX(5deg) rotate(405deg);
  animation: ctw-appear-gold 2s ease-in-out forwards;
}

@keyframes ctw-appear-gold {
  0% {
    transform: rotateX(5deg) rotate(45deg);
  }
  30% {
    transform: rotateX(5deg) rotate(180deg);
  }
  100% {
    transform: rotateX(5deg) rotate(180deg);
  }
}

div#guide[step="appear-gold"] div#center {
  top: 300%;
  bottom: -300%;
  left: 0%;
  right: 0%;
  animation: ctr-appear-gold 2s ease-in-out forwards;
}

@keyframes ctr-appear-gold {
  0% {
    transform: translateZ(75px);
  }
  30% {
    top: 300%;
    bottom: -300%;
    left: 0%;
    right: 0%;
    transform: translateZ(75px);
  }
  60% {
    top: 0%;
    bottom: 0%;
    left: 0%;
    right: 0%;
    transform: translateZ(75px);
  }
  100% {
    top: 0%;
    bottom: 0%;
    left: 0%;
    right: 0%;
    transform: translateZ(150px);
  }
}

/*---------------*/

div#guide[step="final"] div#center-wrapper {
  transform: rotateX(5deg) rotate(405deg);
}

@media screen and (max-width: 768px) {
  div#guide {
    transform: scale(0.85);
  }

  div#guide.invert {
    transform: scale(-0.85, 0.85);
  }
}

@media screen and (max-width: 480px) {
  div#guide {
    transform: scale(0.6);
  }
  div#guide.invert {
    transform: scale(-0.6, 0.6);
  }
}