/* CSS Document */
.sp-only { display: none; }
.oddo .scene { width: 100%; height: 100vh; position: relative; padding-bottom: 300vh; }
.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;  }
.scene-inner img { max-width: 90vw; max-height: 90vh; }

.scene-inner .text { font-size: 1.8vw; line-height: 1.75; font-weight: bold; display: none; } 

.scene1  { text-align: center; display: flex; align-items: center; justify-content: center; flex-direction: column; }
.scene1 img { width: 30%; height: auto; object-fit: contain; display: block; margin: 0 auto 4em;  }

.scroll { width: 8em; position: absolute; bottom: 4em; right: 4em; margin: auto; }
.scroll img { display: block; width: 100%; margin: 0;  }


.scene2 { text-align: center; display: flex; align-items: center; justify-content: center; flex-direction: column; }
.scene2 img { width: 50vh; height:50vh; object-fit: contain; margin: 3em auto; display: block; }

.scene3  { text-align: center; display: flex; align-items: center; justify-content: center; flex-direction: column; }
.scene3 img { width: 80%; height: 65vh; object-fit: contain; margin-bottom: 3em; }


.scene4  { display: flex; align-items: center; justify-content: center; }
.scene4 img { width: 70%; height: 55vh; width: auto; object-fit: contain; }
.scene4  .inner .text4 { flex-shrink: 0; }


.scene5  { display: flex; align-items: center; justify-content: center; }
.scene5 .conversation { display: flex; justify-content: space-between; width: 100%; margin-bottom: 2em;  }
.scene5 img { width: 50vw; height: auto; object-fit: contain;  }

.scene6  { display: flex; align-items: center; justify-content: center; }
.scene6 .inner { position: relative; width: fit-content; height: fit-content; }
.scene6 img { width: auto; height: 50vh; object-fit: contain; margin:  0 auto; }
.scene6 .text { position: absolute; left: 60%; top: 10vh; margin: auto; }

.scene7  { display: flex; align-items: center; justify-content: center; }
.scene7 .inner { position: relative; width: fit-content; height: fit-content; }
.scene7 img { width: 50%; height: 40vh; object-fit: contain; display: block; margin: 0 auto 1em ;}
.scene7 .text { text-align: center; }


.scene8  { display: flex; align-items: center; justify-content: center; }
.scene8 .inner { position: relative; width: fit-content; height: fit-content; }
.scene8 img { width: 80%; height: 50vh; object-fit: contain; }
.scene8 .text { position: absolute; left: 60%; top: 10vh; margin: auto; }

.scene9  { display: flex; align-items: center; justify-content: center; }
.scene9 .inner { position: relative; width: fit-content; height: fit-content; }
.scene9 img { width: 80%; height: 50vh; object-fit: contain; }
.scene9 .text { position: absolute; left: 60%; top: 10vh; margin: auto; }


.scene10  { display: flex; align-items: center; justify-content: center; }
.scene10 .inner { position: relative; width: fit-content; height: fit-content; }
.scene10 img { width: auto; height: 25vh; object-fit: contain; }
.scene10 .text { position: absolute; left: 60%; top: 0; margin: auto; }


.scene11  { display: flex; align-items: center; justify-content: center; }
.scene11 .inner { position: relative; width: fit-content; height: fit-content; }
.scene11 img { height: 50vh; object-fit: contain; }


.scene12  { display: flex; align-items: center; justify-content: center; }
.scene12 .inner { position: relative; width: fit-content; height: fit-content; }
.scene12 img { height:50vh; object-fit: contain; }
.scene12 .text { position: absolute; right: 0; top: 30%; margin: auto; }


.scene13 { display: flex; align-items: center; justify-content: center; }
.scene13 .inner { position: relative; width: fit-content; height: fit-content; }
.scene13 img { width: auto; height: 55vh; object-fit: contain; margin-bottom: 1em; }
.scene13 .text { text-align: center; text-indent: -2em; }


.scene14  { display: flex; align-items: center; justify-content: center; }
.scene14 .inner { position: relative; width: fit-content; height: fit-content;text-align: center; }
.scene14 img { width: 50vw; height: 40vh; object-fit: contain; display: block; margin: 0 auto 2em; }


.scene15  { display: flex; align-items: center; justify-content: center; }
.scene15 .inner { position: relative; width: fit-content; height: fit-content; display: flex; align-items: center; }
.scene15 img { width: 70%; height: 45vh; object-fit: contain; }
.scene15 .text {  }


.scene16  { display: flex; align-items: center; justify-content: center; }
.scene16 img { width: 80%; height: 1rem; object-fit: contain;  }

.scene17  { text-align: center; display: flex; align-items: center; justify-content: center; flex-direction: column; }
.scene17 img { width: 30%; height: auto; object-fit: contain; display: block; margin: 0 auto 4em;  }


.scene-clone { position: fixed; width: 100%; height: 100%; inset: 0; margin: auto; opacity: 0; transition: opacity 1s; pointer-events: none; }
.scene-clone.active { opacity: 1; transition: opacity 1s .5s; pointer-events: auto; }
.scene-clone .text { opacity: 0; transition: opacity 1s;  }
.scene-clone.active .text { opacity: 1; transition: opacity 1s /*1s*/;  }

@media screen and (orientation: portrait) {
  .oddo { overflow-x: hidden; }
  .sp-only { display: initial; }
  .scene-inner .text { font-size: 4vw; text-align: center; width: 100%; }
  .scroll {width: 6em; right: 1em; bottom: 4em; }
  
  .scene1 img { width: 60%; height: auto; }
  .scene2 img { width: 50%; height: auto; }
  .scene3 img { width: 80%; height: auto; }
  .scene4 .text { position: relative; width: fit-content; text-align: left; }
  .scene4 img { width: 80%; height: auto; }
  .scene5 img { width: 100%; height: auto; }
  .scene6 .text { left: auto; right: 0; }
  
  .scene7 img { height: auto; }
  .scene7 .text { left: auto; right: 0; }
  
  .scene8 { flex-direction: column-reverse; }
  .scene8 img { height: auto; }
  .scene8 .text { left: auto; right: 0; position: relative; top: auto; margin: 0 0 2em;  }
  
  .scene9 { flex-direction: column-reverse; }
  .scene9 img { height: auto;  }
  .scene9 .text { left: auto; right: 0; position: relative; top: auto;  margin: 0 0 2em; }
  .scene10 img { height: auto; width: 90%; display: block; margin: 0 auto; }
  
  .scene11 img { height: auto; width: 100%; display: block; margin: 0 auto; } 
  .scene12 img { height: auto; width: 100%; display: block; margin: 0 auto; }
  .scene12 .text { bottom: 100%; top: auto; right: 0; margin-bottom: 2em;  }
  
  .scene13 img { width: 70%; height: auto; margin: 0 10% 2em 20%; }
  
  .scene14 img { width: 70%; height: auto; }
  .scene15 { flex-direction: column; }
  .scene15 img { width: 50%; height: auto;  margin-bottom: 2em; }
  
  .scene17 img { width: 60%; height: auto;  }
  
}