/* CSS Document */
.cat-cat {}
.cat-cat .scene { width: 100%; height: 100vh; position: relative; padding-bottom: 200vh; }
.scene0 .title { position: absolute; inset: 0; margin: auto; width: 60%; height: auto; }

.scene { opacity: 0; }
.scene-inner { width: 100%; height: 100%; position: relative; background: #FFF; display: flex; align-items: center; justify-content: center; }
.scene-inner .text { font-size: 2vw; line-height: 1.75; max-width: 100%; padding: 5vw; } 

.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: center; width: 100%; }

}