@charset "utf-8";
/* CSS Document */
body,html { }
    html { overflow-x:hidden;}
  body { margin: 0;
    
  }
    .intro,.start { overflow: hidden;}
  canvas { transition: all .4s ease 0s;
    position:absolute;
    top: 0;
    left: 0;
    pointer-events: none; /* キャンバスにマウスイベントが影響しないようにする */
  }
    p { font-size: 10vw; margin: 0; text-align: center;font-family: 'New Tegomin', serif; transition: all .4s ease 0s; padding-top: 2em;}
.start p,.intro p,.start canvas,.intro canvas {  transform: translateY(100svh)}
    p span { display: inline-block;writing-mode: vertical-rl;}


    
    #start { width: 100%; height: 100svh; background-color: #FFF; position: fixed; top:0 ; left: 0; display: flex; justify-content: center; align-items: center; font-family: 'New Tegomin', serif; text-align: center; display: none; }
    .intro #start {display: flex;}
    #start h1 { font-size: 8vw;}
    #play { margin: 0 auto; padding: 1em 2em; font-size: 4vw;cursor: pointer;}
    
    #close { width: 60px; height: 60px; position: fixed; top:0; right: 0; cursor: pointer; background-image: url("../img/close.svg"); background-size: 20px; background-position: center; background-repeat: no-repeat; background-color: rgba(255,255,255,.7);backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px); }
.intro #close { display: none;}

#icons { width: 15vw; height: 15vw; background-image: url("../img/scroll.svg"); background-repeat: no-repeat; background-size: 10vw; position: fixed; top:0%; left: 50%; transform: translate(-50%,-100svh); transition: all .4s linear 0s;background-position: center bottom;animation: arrowmove .5s linear infinite; opacity: 0;}
.start #icons,.intro #icons { opacity: 1;transform: translate(-50%,-50%);top:50%;}
.intros #icons { width: 0; height: 0; margin-top:0; overflow: hidden;}
#icons span { display: block; text-align: center; font-size: 3vw; color: #000;font-family: 'New Tegomin', serif;}

footer { width: 100%; height: 5vh; position: fixed; bottom: 0; left: 0;
background: rgb(255,255,255);
background: linear-gradient(180deg, rgba(0,0,0,0) 19%, rgba(0,0,0,.3) 100%); }

.end footer { opacity: 0;}

@keyframes arrowmove{
      0%{transform: translate(-50%,-50%);}
      50%{transform: translate(-50%,-70%);}
     100%{transform: translate(-50%,-50%);}
 }
    
    @media screen and (orientation: landscape) {
           p { font-size: 2.5vw;}
            #icons { width: 7vw; height: 7vw; background-size: 5vw;}
        #icons span { font-size: 1.5vw;}
        #start h1 { font-size: 4vw;}
        #play { font-size: 2vw;}
        }