/* CSS Document */
.far .scene { width: 100%; height: 100vh; position: relative; padding-bottom: 300vh; }

.scene { opacity: 0; }
.scene-inner { width: 100%; height: 100%; position: relative; background: #FFF;  }
.scene-inner .text { font-size: 2vw; line-height: 1.75; position: absolute; right: 0; bottom: 0; max-width: 100%; padding: 5vw; } 

.scene0 { display: flex; align-items: center; justify-content: center; font-size: 10vw; }
.scene1 img { width: 80%; height: 70vh; object-fit: contain; position: absolute; top: 15vh; left: 0; right: 0; margin: auto; object-position: 20% center; }

.scene2 img { width: 80%; height: 60vh; object-fit: contain; position: absolute; top: 10vh; left: 0; right: 0; margin: auto; object-position: 30% center; }
.scene3 img { width: 70%; height: 85vh; object-fit: contain; position: absolute; top: 10vh; left: 0; right: 0; margin: auto; object-position: 10% center; }
.scene4 img { width: 80%; height: 70vh; object-fit: contain; position: absolute; top: 10vh; left: 0; right: 0; margin: auto; }
.scene5 img { width: 80%; height: 70vh;object-fit: contain; position: absolute; top: 10vh; left: 0; right: 0; margin: auto; }
.scene-clone { position: fixed; width: 100%; height: 100%; inset: 0; margin: auto; opacity: 0; transition: opacity 1s;  }
.scene-clone.active { opacity: 1; transition: opacity 1s .5s;  }
.scene-clone .text { opacity: 0; transition: opacity 1s;  }
.scene-clone.active .text { opacity: 1; transition: opacity 1s 1s;  }

@media screen and (max-width: 768px) {
  .scene-inner .text { font-size: 4vw; text-align: left; width: 100%; }
  
  
  .scene1 img { width: 80%; top: 8vh; }
  .scene2 img { width: 80%; top: 18vh; }
  .scene3 img { width: 85%; top: 0vh; }
  .scene4 img { width: 80%; top: 0vh; }
  .scene5 img { width: 80%; top: 0vh; }
  .scene6 img { width: 80%; top: 0vh; }
}