@charset "utf-8";
/* CSS Document */
body,html { height: 100%; margin: 0;}
        video { width: 100%; height: 100%; object-fit: cover; object-position: center; position: fixed; top:0; left: 0; transition: all 1s ease 0s;}
        .play video { opacity: 0; }
        
h1 { margin: 0; font-size: 8vw; text-align: center; position: fixed; top:50%; left: 0; transform: translateY(-50%);font-family: "Yuji Syuku", serif; color: #FFF; width: 100%; transition: all 1s ease 0s;}
.play h1 { opacity: 0;}
        
         #shutterButton { position: fixed; bottom:3vw; left: 50%; transform: translateX(-50%); text-indent: -9999px; width: 60px; height: 60px; background-color: #FFF; border-radius: 50%; cursor: pointer; z-index: 9; transition: all .4s ease 0s;}
    #shutterButton:before { content: ""; display: block; width: 50px; height: 50px; border-radius: 50%; box-sizing: border-box; border: 1px solid #000; position: absolute; top:50%; left: 50%; transform: translate(-50%,-50%);}
        .play #shutterButton { display: none;}
        
        #canvas { opacity: 0;}
        #canvasWrap { height: 60vh; position:fixed; top:0; left: 0; width: 100%;}
        canvas { position: absolute; top:50%; left: 50%; transform: translate(-50%,-50%); filter: grayscale(100%); width: 40%; height: auto; opacity: 0; transition: all 1s ease 0s;}
        #text { background-color: #282828; color: #999;word-break: break-all; height: 40vh; position: fixed; bottom: 0; left: 0; padding: 2vw; box-sizing: border-box; overflow: hidden; width: 100%; opacity: 0;  transition: all 1s ease 0s; font-size: 3vw;
        font-family: "Yuji Syuku", serif;
  font-weight: 400;
  font-style: normal;}
        .play #text { opacity: 1;}
.play #canvas2 { opacity: 1;}
        
        
        #playButton { position: fixed; bottom: 3vw; left: 50%; transform: translateX(-50%); cursor: pointer; width: 60px; height: 60px; background-image: url("../img/play.svg"); background-repeat: no-repeat;background-size: 30px; background-position: center; z-index: 1; background-color: rgba(255,255,255,.7); border-radius: 50%; display: none;}
        .play #playButton { display: block;}
.play.playing #playButton { display: none;}

#stop { position: fixed; top:0; left: 0%; cursor: pointer; width: 60px; height: 60px; background-image: url("../img/stop.svg"); background-repeat: no-repeat;background-size: 30px; background-position: center; display: none; z-index: 1;}
        .play #stop { display: block;} 

#load { width: 100%; height: 100%; position: fixed; top:0; left: 0; background-image: url("../img/Spinner-1s-200px.svg"); background-repeat: no-repeat; background-position: center; background-size: 90px; opacity: 0; background-color: rgba(0,0,0,.7);}
.load #load { opacity: 1; z-index: 99; }

@media (orientation: landscape) {
    h1 { font-size: 4vw;}
   canvas { width: auto; height: 60%; }
    #text {  font-size: 1.5vw; padding: 1vw; }
}