@charset "utf-8";
/* CSS Document */
body,html { height: 100%; margin: 0;font-family: 'Noto Sans JP', sans-serif; overflow: hidden;}
        iframe,#bg { width: 100%; position: fixed; top:0; left: 0; height: 100vw; border: none; overflow: hidden; opacity: 0;}
        .i1 iframe:nth-of-type(1){ opacity: 1;}
        .i2 iframe:nth-of-type(2){ opacity: 1;}
        .i3 iframe:nth-of-type(3){ opacity: 1;}
        .i4 iframe:nth-of-type(4){ opacity: 1;}
        #bg { background-color: #FF236B; opacity: 1; background-image: url("../img/yellow.svg"); background-position: center; background-size: 20vw; }
        
        #play { position: fixed; cursor: pointer;}
        
        .audio-player { position: fixed; bottom: 0; left: 0;
  width: 100%; padding: 15px; box-sizing: border-box; 
}

.progress-bar { margin: 15px 0;
  width: 100%;
  height: 4px;
  background-color: #f6f6f6;
}


#progress {
  height: 100%;
  width: 0;
  background-color: rgb(247, 143, 157);
}
        
        #pause { width: 50px; height: 50px; border-radius: 50%;background-color: #f6f6f6; margin: 0 auto; cursor: pointer; background-image: url("../img/pause.svg"); background-repeat: no-repeat; background-position: center; background-size: 25px;}
        
         .play #pause { background-image: url("../img/play.svg");}
        h3 { font-weight: 400; color: #E7102B;}

        #console { position:fixed; bottom: 0px; left: 0; width: 100%; padding: 20px; box-sizing: border-box; color: #27F026; font-size: 2.5vw; backface-visibility: hidden; transform: translate3d(0,0,0);}
        
        @media (orientation: landscape){
            iframe,#bg { width: calc( 100vh - 200px ); height: calc( 100% - 200px); left: 50%; transform: translateX(-50%);}
            #console { left: calc((100vw - ( 100vh - 200px ) ) / 2 );font-size: 1vw;}
            #bg {  background-size: 10vw; }
        }
        
        #prog { width: 60px; height: calc( 60px + 2em); position: fixed; top:50%; left: 50%; transform: translate(-50%,-50%); 
background-image: url(../img/Spinner-1s-200px.svg);
    background-repeat: no-repeat;
    background-size: 60px; background-position: center; padding-top:calc( 60px + 1em); font-size: 10px; text-align: center; display: none; 
}
#progress2 { position: absolute; bottom: 0; left: 0; width: 100%;}
.intro #prog { display: block; }
.intro #wrap { opacity: 0;}
#wrap {transition: all 2s ease 0s;}