@charset "utf-8";

html,body{
  overflow: hidden
}

body{
  display: none;
}

#wrapper{
    background-image: url(../images/bg.png);
    background-position: center;
    background-size: cover;
    /* width: 100%;
    height: 100vh; */
    position: relative;
    width: 1920px;
    height: 968px;
}

#wrapper0{
  background-image: url(../images/title.png);
  background-position: center;
  background-size: cover;
  /* width: 100%;
  height: 100vh; */
  position: relative;
  width: 1920px;
  height: 968px;
}

#wrapper2{
    background-image: url(../images/bg2.png);
    background-position: center;
    background-size: cover;
    /* width: 100%;
    height: 100vh; */
    width: 1920px;
    height: 968px;
    position: relative;
}

#wrapper3{
    background-image: url(../images/bg3.png);
    background-position: center;
    background-size: cover;
    /* width: 100%;
    height: 100vh; */
    width: 1920px;
    height: 968px;
    position: relative;
    overflow: hidden;
}

#wrapper4{
  background-image: url(../images/bg4.png);
  background-position: center;
  background-size: cover;
  position: relative;
  width: 1920px;
  height: 968px;
}


.bg{
position: absolute;
background-image: url(../images/gameover.png);
background-position: center;
background-size: cover;
width: 100%;
height: 100vh;
opacity: 0;
transition: 1s;
}

.bg_clear{
  position: absolute;
  background-image: url(../images/clear.png);
  background-position: center;
  background-size: cover;
  width: 100%;
  height: 100vh;
  opacity: 0;
  transition: 1s;
  }

  .clear{
    opacity: 1;
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
  }



.gameover{
    opacity: 1;
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
}

.flex{
    margin-top: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

a{
  text-decoration:none
}

h2{
    opacity: 0;
    transition: 1s;
    font-family: 'M PLUS 2', sans-serif;
    font-style: italic;
    letter-spacing: 2px;
    width: 100px;
}

.gameover h2{
    opacity: 1;
    color: rgb(250, 249, 238);
    border: solid 0.5px  rgb(250, 249, 238);
    padding: 10px 0px;
    width: 250px;
    text-align: center
}

.gameover h2:hover{
    box-shadow: #fff 0px 0px 10px;
    text-shadow:  #fff 0px 0px 10px;
}

.title{
  position: absolute;
  left: 1025px;
  top: 500px;
  padding: 0 20px;
  background-color: #000000b0;
}

.title h2{
  opacity: 1;
  color: rgb(250, 249, 238);
  border: solid 0.5px  rgb(250, 249, 238);
  padding: 10px 0px;
  width: 800px;
  text-align: center
}

.title h2:hover{
  box-shadow: #fff 0px 0px 10px;
  text-shadow:  #fff 0px 0px 10px;
}

.clear h2{
  opacity: 1;
  color: #9e8145;
  border: solid 0.5px #9e8145;
  padding: 10px 0px;
  width: 250px;
  text-align: center
}

.clear h2:hover{
  box-shadow: #aaa 0px 0px 10px;
  text-shadow:  #aaa 0px 0px 10px;
}

.ana{
    position: absolute;
    left: 296px;
    top: 202px;
}

.ana img{
    height: 375px;
}

.ana2{
    position: absolute;
    left: 296px;
    top: 202px;
}

.ana2 img{
    height: 375px;
}

.monster{
    position: absolute;
    left: 1200px;
    top: 135px; 
}

.monster2{
  position: absolute;
  left: 1200px;
  top: 135px; 
}

.monster img{
    width: 700px;
    /* transform: rotateY(180deg); */
}

.monster2 img{
  width: 700px;
  /* transform: rotateY(180deg); */
  opacity: 1;
  transition: 0.5s;
}

.rock{
    position: absolute;
    left: -157px;
    top: 159px;
}

.men{
    position: absolute;
    left: 800px;
    top: 500px;
    opacity: 1;
    transition: 1s;
}

.men1{
  position: absolute;
  left: 360px;
  top: 100px;
  opacity: 1;
  transition: 1s;
}

.men2{
  position: absolute;
  left: 800px;
  top: 500px;
  opacity: 1;
  transition: 1s;
}

.brave{
    position: absolute;
    left: 282px;
    top: 228px;
}

.witch{
    position: absolute;
    left: 282px;
    top: 228px;
    display: none;
}

.witch2{
  position: absolute;
  left: 282px;
  top: 228px;
  display: none;
}

.men img{
    height: 400px;
}

.men1 img{
  height: 400px;
}

.men2 img{
  height: 400px;
}

.men_dead{
    height: 800px;
    width: 0;
    transform: rotateX(90deg);
    opacity: 0;
}

.monster_dead{
  width: 0;
  transform: rotateY(90deg);
  opacity: 0;
}

.brave img{
    height: 400px;
    transform: rotateY(180deg);
}

.fire{
  position: absolute;
  left: 1100px;
  top: 350px;
  width: 10px;
}

.fire2{
  position: absolute;
  left: 1100px;
  top: 350px;
}

.fire img{
  height: 30px;
  position: absolute;
  transform: rotateY(180deg);
  opacity: 0;
}

.fire2 img{
  height: 30px;
  position: absolute;
  transform: rotateY(180deg);
  opacity: 0;
}

.fire_on{
  height: 942px;
}

.witch2 img{
  height: 400px;
}

.witch img{
    height: 400px;
}

.memo{
  position: absolute;
left: 935px;
top: 200px;
}

.memo img{
  width: 100px;
}

.exit{
    position: absolute;
    top: 711px;
    left: 674px;
    mix-blend-mode: luminosity;
    transform: scale(1.1,0.5);
}

.sword{
    position: absolute;
    top: 397px;
    left: 1080px;
}

.sword img{
    width: 170px;
}


@keyframes fuwafuwa {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-20px);
    }
  }
  
  .fuwa {
    animation: 3s fuwafuwa infinite;
  }


.text{
    position: absolute;
    left: 1100px;
    top: 150px;
}

  p{
    width: 500px;
    font-size: 25px;
    font-weight: bold;
    font-family: 'DotGothic16', sans-serif;
    letter-spacing: .1em;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    animation: typing 1.5s steps(10),
      blink .5s steps(1) infinite alternate;
  }
  
  @keyframes typing{
    0% {width: 0;}
  }
  @keyframes blink{
    50% {border-right-color: transparent;}
  }

  .animation{
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 2s;
    width: 128px;
  }
  
  .keyframe2{
    animation-name: anim_h;
  }
  
  @keyframes anim_h {
    0% {
      transform: translate(0px, 0);
    }
    100% {
      transform: translate(20px, 0);
    }
  }

  .rains{
    position: absolute;
    left:0;
    top:0;
    width: 100%;
    height:100%;
  }
  
  /*widthは雨の太さ、heightは長さ*/
  .rains span{
    position: absolute;
    width:1px;
    height:180px;
    background:#FFF;
    opacity:0.4;
  }
  
  
  
   /*雨の初期位置とアニメーション指定、leftはx座標での基準位置、topは開始位置、アニメーション時間は揺らぎ*/
  .rains span:nth-child(1){left:5%; top:-190px; animation: rain-anim 10s infinite;}
  .rains span:nth-child(2){left:10%; top:-180px; animation: rain-anim 11s infinite;}
  .rains span:nth-child(3){left:15%; top:-170px; animation: rain-anim 8s infinite;}
  .rains span:nth-child(4){left:20%; top:-160px; animation: rain-anim 12s infinite;}
  .rains span:nth-child(5){left:25%; top:-150px; animation: rain-anim 10s infinite;}
  
  .rains span:nth-child(6){left:30%; top:-150px; animation: rain-anim 11s infinite;}
  .rains span:nth-child(7){left:35%; top:-160px; animation: rain-anim 13s infinite;}
  .rains span:nth-child(8){left:40%; top:-170px; animation: rain-anim 7s infinite;}
  .rains span:nth-child(9){left:45%; top:-180px; animation: rain-anim 9s infinite;}
  .rains span:nth-child(10){left:50%; top:-190px; animation: rain-anim 11s infinite;}
  
  .rains span:nth-child(11){left:55%; top:-190px; animation: rain-anim 10s infinite;}
  .rains span:nth-child(12){left:60%; top:-180px; animation: rain-anim 6s infinite;}
  .rains span:nth-child(13){left:65%; top:-170px; animation: rain-anim 14s infinite;}
  .rains span:nth-child(14){left:70%; top:-160px; animation: rain-anim 12s infinite;}
  .rains span:nth-child(15){left:75%; top:-150px; animation: rain-anim 10s infinite;}
  
  .rains span:nth-child(16){left:80%; top:-150px; animation: rain-anim 14s infinite;}
  .rains span:nth-child(17){left:85%; top:-160px; animation: rain-anim 8s infinite;}
  .rains span:nth-child(18){left:90%; top:-170px; animation: rain-anim 9s infinite;}
  .rains span:nth-child(19){left:95%; top:-180px; animation: rain-anim 11s infinite;}
  .rains span:nth-child(20){left:100%; top:-190px; animation: rain-anim9 13s infinite;}
  
  @keyframes rain-anim {
    
    0% { transform: translate(0px,0px);}
    4% { transform: translate(0px,600px);}
   
    5% { transform: translate(200px,0px);}
    9% { transform: translate(200px,600px);}
    
    10% { transform: translate(-100px,0px);}
    14% { transform: translate(-100px,600px);}
    
    15% { transform: translate(-200px,0px);}
    19% { transform: translate(-200px,600px);}
    
    20% { transform: translate(100px,0px);}
    24% { transform: translate(100px,600px);}
    
    25% { transform: translate(-150px,0px);}
    29% { transform: translate(-150px,600px);}
    
    30% { transform: translate(-80px,0px);}
    34% { transform: translate(-80px,600px);}
    
    35% { transform: translate(150px,0px);}
    39% { transform: translate(150px,600px);}
    
    40% { transform: translate(-60px,0px);}
    44% { transform: translate(-60px,600px);}
    
    45% { transform: translate(90px,0px);}
    49% { transform: translate(90px,600px);}
    
    50% { transform: translate(60px,0px);}
    54% { transform: translate(60px,600px);}
    
    55% { transform: translate(-60px,0px);}
    59% { transform: translate(-60px,600px);}
    
    60% { transform: translate(-40px,0px);}
    64% { transform: translate(-40px,600px);}
    
    65% { transform: translate(40px,0px);}
    69% { transform: translate(40px,600px);}
    
    70% { transform: translate(-20px,0px);}
    74% { transform: translate(-20px,600px);}
  
    75% { transform: translate(-110px,0px);}
    79% { transform: translate(-110px,600px);}
    
    80% { transform: translate(20px,0px);}
    84% { transform: translate(20px,600px);}
    
    85% { transform: translate(-20px,0px);}
    89% { transform: translate(-20px,600px);}
    
    90% { transform: translate(50px,0px);}
    99% { transform: translate(50px,600px);}
  
    100% { transform: translate(0px,0px);}
    
  }


  .rotate-anime {
    animation: rotate-anime 100ms linear infinite;
  }
  @keyframes rotate-anime {
    0%  {transform: rotate(0);}
    100%  {transform: rotate(360deg);}
  }

  .buruburu {
    display: inline-block;
    animation: hurueru .1s  infinite;
}

@keyframes hurueru {
    0% {transform: translate(0px, 0px) rotateZ(0deg)}
    25% {transform: translate(2px, 2px) rotateZ(1deg)}
    50% {transform: translate(0px, 2px) rotateZ(0deg)}
    75% {transform: translate(2px, 0px) rotateZ(-1deg)}
    100% {transform: translate(0px, 0px) rotateZ(0deg)}
}