body,html { margin: 0; height: 100%; background-color: #000; transition: all 1s ease 0s;}
        canvas { width: calc( 100vh * 1.333333333333333); height: 100%; position: fixed; top:0; left: 0; object-fit: cover; background-color: transparent;}
        /*#cv { left: 50%; transform: translateX(-50%);}*/
        h1 { position: fixed; top:0; left: 0;}
        h2 { position: fixed; top:0; left: 0;}
        
        #start-button { z-index: 99; color: rgba(233,0,3,1.00); font-size: 5vw; padding: .5em 2em; font-family:Arial, Helvetica, "sans-serif"; cursor: pointer; font-weight: bold;}

#start { width: 100%; text-align: center; position: fixed; top:50%; left: 0; transform: translateY(-50%); z-index: 2; }
        #start h3 {font-family: 'Noto Serif JP', serif; color: #FFF; font-size: 4.6vw; font-weight: 600; margin: 0; line-height: 1.3; margin-bottom: 1em;}
        #start h3 span { display: block; font-size: 57%; margin-top: .4em; font-weight: 200;}
        .intro #start { display: block;}
.play #start {display: none;}
        #close { width: 60px; height: 60px; cursor: pointer; position: fixed; top:0; right: 0; z-index: 9; background-image: url("../img/close.svg"); background-repeat: no-repeat; background-size: 35px; background-position: center;}
        .intro #close {  display: none;}

#close { width: 60px; height: 60px; cursor: pointer; position: fixed; top:0; right: 0; z-index: 9; background-image: url("../img/close.svg"); background-repeat: no-repeat; background-size: 35px; background-position: center;display: none;}
        .play #close { display: block;  }
        
        @media screen and (orientation: landscape) {
           canvas { width: 100%; height: 75vw; position: fixed; top:50%; transform: translateY(-50%);} 
            #god,#god2 { background-size: auto 100%;}
            #start h3 { font-size: 2.3vw;}
            #start-button { font-size: 2.5vw;}
        }