*{
  margin:0;
  padding:0;
}
/* これは、ブラウザでの見え方の差異を無くすため、余白を０にする処理です。 */


body{
   display: flex;
  justify-content: center;
}

#flash{
  width: 1300px;
  height: 960px;
  background-color: rgb(48, 53, 76);
  z-index: 98;
  position: absolute;
  opacity: 0;
  cursor:not-allowed;
  display: none;
}
#flash.active{
  animation:fadeInOut 1s;
}
@keyframes fadeInOut{
  0%{opacity: 0;}
  50%{opacity: 1;}
  100%{opacity: 0;}
  }
#flashWhite{
  width: 1300px;
  height: 960px;
  background-color: white;
  z-index: 102;
  position: absolute;
  opacity: 0;
  cursor:not-allowed;
  display: none;
}  
#flashWhite.active{
    animation:fadeInOutLong 2s;
  }
@keyframes fadeInOutLong{
  0%{opacity: 0;}
  25%{opacity: 1;}
  50%{opacity: 1;}
  100%{opacity: 0;}
 }
 #greyScreen{
  width: 1300px;
  height: 960px;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 79;
  position: absolute;
  opacity: 0;
  cursor:not-allowed;
  display: none;
}  
#greyScreen.active{
    animation:greyScreen_anim 10s;
  }
@keyframes greyScreen_anim{
  0%{opacity: 0;}
  10%{opacity: 1;}
  32%{opacity: 1;}
  33%{opacity: 0;}
  100%{opacity: 0;}
 }
 #greyScreen2{
  width: 1300px;
  height: 960px;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 79;
  position: absolute;
  opacity: 0;
  cursor:not-allowed;
  transition:all 1s;
}
#greyScreen3{
  width: 1300px;
  height: 960px;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 149;
  position: absolute;
  opacity: 0;
  cursor:not-allowed;
  transition:all 1s;
}

 #goFlash{
  width: 1300px;
  height: 960px;
  background-color: white;
  z-index: 200;
  position: absolute;
  opacity: 0;
  cursor:not-allowed;
  display: none;
}
#goFlash.active{
  animation:fadeInOut 0.2s;
}

#loading{
  position: absolute;
  width: 1300px;
  height: 960px;
  background-color: aliceblue;
  z-index: 300;
  display: flex;
  justify-content: center;
  align-items:center; 
}



#loading.active{
  transition: 1s;
  opacity: 0;
}

#loadingText{
  font-size: 40px;
  animation: blinking 1s infinite;
}

@keyframes blinking{
0%{opacity: 1;}
50%{opacity: 0;}
100%{opacity: 1;}
}

#preImage{
  position: absolute;
  scale: 0.1;
  opacity: 0;
}

/* 大きな枠 */
#main1{
  position: absolute;
  z-index: 300;
  pointer-events: none;
}

#tytle{
  position: absolute;
  z-index: 21;
}
#bigContainer2{
  width: 1300px;
  height: 960px;
  position: absolute;
  display: flex;
  flex-direction: column;
  overflow:hidden;
  justify-content:center ;
}
#bigContainer3{
  width: 1300px;
  height: 960px;
  position: absolute;
  display: flex;
  justify-content: center;
}
#version{
  top:400px;
  left: 1000px;
  position: absolute;
  z-index: 23;
  color: antiquewhite;
  font-size: 30px;
  text-shadow:2px 2px 0 rgb(0, 0, 0), -2px -2px 0 rgb(0, 0, 0),
              -2px 2px 0 rgb(0, 0, 0), 2px -2px 0 rgb(0, 0, 0),
              0px 2px 0 rgb(0, 0, 0),  0 -2px 0 rgb(0, 0, 0),
              -2px 0 0 rgb(0, 0, 0), 2px 0 0 rgb(0, 0, 0);
}
.smallContainer2{
  top:525px;
  width: 500px;
  text-align: center;
  position: absolute;
  z-index: 23;
  color: white;
  font-size: 45px;
  line-height: 75px;
  
  text-shadow: 3px 3px 0 rgb(0, 0, 0), -3px -3px 0 rgb(0, 0, 0),
      -3px 3px 0 rgb(0, 0, 0), 3px -3px 0 rgb(0, 0, 0),
      0px 3px 0 rgb(0, 0, 0), 0 -3px 0 rgb(0, 0, 0),
      -3px 0 0 rgb(0, 0, 0), 3px 0 0 rgb(0, 0, 0);
}
#story{
  opacity: 0.5;
  border-radius:10px;  
}
#story:hover{
  opacity: 1;
  background-color:black;
  cursor: pointer;
}
#story2{
  opacity: 0.5;
  border-radius:10px;
}
#story2:hover{
  opacity: 1;
  background-color:black;
  cursor: pointer;
}
#option{
  opacity: 0.5;
  border-radius:10px;
}
#option:hover{
  opacity: 1;
  background-color:black;
  cursor: pointer;
}
#credit{
  opacity: 0.5;
  border-radius:10px;  
}
#credit:hover{
  opacity: 1;
  background-color:black;
  cursor: pointer;
}



/*オプション画面の一番後ろの紺の背景 */
#main2{
  position: absolute;
}

/* メッセージウィンドウの枠と背景 */
#mainMes{
  position: absolute;
}

#sala{
  margin-top: 420px;
  margin-left: 40px;
  position: absolute;
  width: 300px;
  z-index: 11;

}

#bigContainer{
  width: 1300px;
  height: 960px;
  position: absolute;
  display: flex;
  flex-direction: column;
  overflow:hidden;
}

.smallContainer{
  color: aliceblue;
  margin-left: 90px;
  margin-top: 70px;
  transform-origin: left;
  scale:3;
  display: flex;
  z-index: 11;
}

#bgmBar{
  cursor: grab;
  margin-top: -3px;
  width:250px;
}

#seBar{
  cursor: grab;
  margin-top: -3px;
  width:250px;
}

.speed{
  cursor: pointer;
  margin-left: 30px;
}

.speed:hover{
  background-color: gray;
}

#speedNormal.active{
 background-color: green
}
#speedFast.active{
  background-color: green;
 }
 #speedFastest.active{
  background-color: green;
 }

.difficulty{
  cursor: pointer;
  margin-left: 30px;
}
.difficulty:hover{
  background-color: gray;
}
#difficultyEasy.active{
  background-color: green;
 }
#difficultyNormal.active{
  background-color: green;
 }

#return{
  width: 100px;
  cursor: pointer;
  position: relative;
  z-index: 11;
  color: aliceblue;
  font-size: 50px;
  left: 1100px;
  top:200px;
}

#return:hover{
  background-color: gray;
}

#messageBox{
  top:692px;
  left: 58px;
  font-size: 45px;
  font-weight: 500;
  color: aliceblue;
  z-index: 5;
  position: absolute;
  letter-spacing: 0.1em;
  text-shadow:2px 2px 0 rgb(0, 0, 0), -2px -2px 0 rgb(0, 0, 0),
              -2px 2px 0 rgb(0, 0, 0), 2px -2px 0 rgb(0, 0, 0),
              0px 2px 0 rgb(0, 0, 0),  0 -2px 0 rgb(0, 0, 0),
              -2px 0 0 rgb(0, 0, 0), 2px 0 0 rgb(0, 0, 0);
  /* -webkit-text-stroke: 2px rgb(0, 0, 0); */
  line-height: 55px;
  opacity: 1;
  z-index: 10;
}

#bigContainer4{
  width: 1300px;
  height: 960px;
  position: absolute;
  display: none;
  flex-direction: column;
  overflow:hidden;
  pointer-events: none;
}

#waku_fight{
  width: 1300px;
  height: 960px;
  position: absolute;
  z-index: 100;
}
#forest{
  top: -100px;
  left:-150px;
  width: 1554px;
  height: 1113px;
  position: absolute;}
#gauge{
  width: 1300px;
  height: 860px;
  position: absolute;
  z-index: 50;
}
#fightFace_kip{
  position: absolute;
  z-index: 51;
}
#fightFace_enemy{
  position: absolute;
  z-index: 51;
}
#kipName{
  top: 45px;
  left: 200px;
  font-size: 30px;
  color: aliceblue;
  position: absolute;
  text-shadow:2px 2px 0 rgb(0, 0, 0), -2px -2px 0 rgb(0, 0, 0),
              -2px 2px 0 rgb(0, 0, 0), 2px -2px 0 rgb(0, 0, 0),
              0px 2px 0 rgb(0, 0, 0),  0 -2px 0 rgb(0, 0, 0),
              -2px 0 0 rgb(0, 0, 0), 2px 0 0 rgb(0, 0, 0);
  line-height: 55px;
  opacity: 1;
  z-index: 10;
}
#enemyName{
  top: 45px;
  left: 1020px;
  font-size: 30px;
  color: aliceblue;
  position: absolute;
  text-shadow:2px 2px 0 rgb(0, 0, 0), -2px -2px 0 rgb(0, 0, 0),
              -2px 2px 0 rgb(0, 0, 0), 2px -2px 0 rgb(0, 0, 0),
              0px 2px 0 rgb(0, 0, 0),  0 -2px 0 rgb(0, 0, 0),
              -2px 0 0 rgb(0, 0, 0), 2px 0 0 rgb(0, 0, 0);
  line-height: 55px;
  opacity: 1;
  z-index: 10;
}
#stage{
  top:60px;
  left: 555px;
  font-size: 50px;
  color: aliceblue;
  position: absolute;
  letter-spacing:4px ;
  text-shadow:3px 3px 0 rgb(0, 0, 0), -3px -3px 0 rgb(0, 0, 0),
              -3px 3px 0 rgb(0, 0, 0), 3px -3px 0 rgb(0, 0, 0),
              0px 3px 0 rgb(0, 0, 0),  0 -3px 0 rgb(0, 0, 0),
              -3px 0 0 rgb(0, 0, 0), 3px 0 0 rgb(0, 0, 0);
  line-height: 55px;
  opacity: 1;
  z-index: 10;
}
#kipHP{
  transform-origin: left center;
  transform: scale(1,1);
  position: absolute;
  z-index: 49;
  top:93px;
  left:170px;
  transition: 1s;
}
#kipSP{
  transform-origin: left center;
  transform: scale(0,1);
  position: absolute;
  z-index: 49;
  top: 136px;
  left:180px;
  transition: 1s;
}
#enemyHP{
  transform-origin: right center;
  transform: scale(1,1);
  position: absolute;
  z-index: 49;
  top:93px;
  left:788px;
  transition: 1s;
}
#enemySP{
  transform-origin: right center;
  transform: scale(0,1);
  position: absolute;
  z-index: 49;
  top: 136px;
  left:900px;
  transition: 1s;
}
#timeGauge{
  transform-origin: left center;
  transform: scale(100,1);
  position: absolute;
  z-index: 101;
  top: 755px;
  left:175px;
}
#typeText{
  font-size: 50px;
  color: aliceblue;
  position: relative;
  top: 780px;
  letter-spacing: 5px;
  text-shadow:2px 2px 0 rgb(0, 0, 0), -2px -2px 0 rgb(0, 0, 0),
              -2px 2px 0 rgb(0, 0, 0), 2px -2px 0 rgb(0, 0, 0),
              0px 2px 0 rgb(0, 0, 0),  0 -2px 0 rgb(0, 0, 0),
              -2px 0 0 rgb(0, 0, 0), 2px 0 0 rgb(0, 0, 0);
  line-height: 55px;
  z-index: 101;
  text-align: center;
  display: none;
}
#translation{
  font-size: 25px;
  color: aliceblue;
  position: absolute;
  top: 860px;
  left: 70px;
  text-shadow:2px 2px 0 rgb(0, 0, 0), -2px -2px 0 rgb(0, 0, 0),
              -2px 2px 0 rgb(0, 0, 0), 2px -2px 0 rgb(0, 0, 0),
              0px 2px 0 rgb(0, 0, 0),  0 -2px 0 rgb(0, 0, 0),
              -2px 0 0 rgb(0, 0, 0), 2px 0 0 rgb(0, 0, 0);
  line-height: 55px;
  z-index: 101;
  display: none;
}
#kipFighting{
  top: 120px;
  left:-120px;
  position: absolute;
  z-index: 5;
}
#wargFighting{
  top: 120px;
  left:600px;
  position: absolute;
  z-index: 5;
}

#kipStill{
  position: absolute;
  top:-1200px;
  z-index: 80;
}
#kipStill.active{
  animation: slide1 3s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes slide1{
  0%{transform: translateY(0px);
    opacity: 0;}
  60%{transform: translateY(1250px);
    opacity: 1;}
  100%{transform: translateY(1250px);
    opacity: 0;}
  }

  #wargStill{
    position: absolute;
    top:1000px;
    left:600px;
    z-index: 80;
  }
  #wargStill.active{
    animation: slide2 3s cubic-bezier(0.22, 1, 0.36, 1);
  }
  
  @keyframes slide2{
    0%{transform: translateY(0px);
      opacity: 0;}
    60%{transform: translateY(-900px);
      opacity: 1;}
    100%{transform: translateY(-900px);
      opacity: 0;}
    }

#zoomContainer{
  position: absolute; 
  transform-origin: -400px 700px;
}
#zoomContainer.active{
  animation:fightZoom 10s forwards;
}
@keyframes fightZoom{
 0%{
  transform: scale(1) translateX(0px);
}
 5% {
  transform: scale(1.5) translateX(0px);
} 
 12% {
  transform: scale(1.5) translateX(0px);
}
 20%{
  transform: scale(1.5) translateX(-680px);
}
 25%{
  transform: scale(1.5) translateX(-680px);
}
 35%{
  transform: scale(1) translate(0px);
}
 100%{
  transform: scale(1) translate(0px);
}
}

#ready{
  position: absolute;
  top:350px;
  left: 480px;
  z-index: 199;
  display: none;
  animation: ready_anim 2.5s forwards;
}
@keyframes ready_anim{
  0%{opacity: 1;}
  80%{opacity: 1;}
  100%{opacity: 0;}
}

#go{
  transform-origin: center;
  transform: scale(5);
  top: 250px;
  left: 320px;
  position: absolute;
  z-index: 199;
  display: none;
  animation: go_anim 1s forwards;
}

@keyframes go_anim{
  0%{
    opacity: 1;
    transform: scale(5) translateY(0px)
  }
  20%{
    opacity: 1;
    transform: scale(0.7) translateY(0px)
  }
  22%{
    opacity: 1;
    transform: scale(0.7) translateY(5px)
  }
  24%{
    opacity: 1;
    transform: scale(0.7) translateY(-5px)
  }
  26%{
    opacity: 1;
    transform: scale(0.7) translateY(2px)
  }
  27%{
    opacity: 1;
    transform: scale(0.7) translateY(-1px)
  }
  28%{
    opacity: 1;
    transform: scale(0.7) translateY(0px)
  }
  80%{
    opacity: 1;
    transform: scale(0.7) translateY(0px)
  }
  100%{
    opacity: 0;
    transform: scale(0.7) translateY(0px)
  }
}

#fireBox{
  position: absolute;
  z-index: 500;
  /* background-color: blue; */
  width: 100px;
  height: 400px;
  top: 320px;
  left: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  flex-wrap: wrap;
}

#damageBox{
  position: absolute;
  z-index: 190;
  top: 100px;
  left: 0px;
  display: flex;
}

#fireShoot{
  position: absolute;
  z-index: 501;
}
#fireShoot2{
  position: absolute;
  z-index: 501;
}
#fireShoot3{
  position: absolute;
  z-index: 501;
}
#explosion{
  position: absolute;
  z-index: 101;
  left:550px;
  top:75px;
  opacity: 0.8;
}
#explosion2{
  position: absolute;
  z-index: 101;
  left:550px;
  top:75px;
  opacity: 0.8;
}#explosion3{
  position: absolute;
  z-index: 101;
  left:550px;
  top:75px;
  opacity: 0.8;
}

#hitMark{
  position: absolute;
  z-index: 101;
}
#hitMark2{
  position: absolute;
  z-index: 101;
}#hitMark3{
  position: absolute;
  z-index: 101;
}

#warg_dash1,#warg_dash2{
  position: absolute;
  z-index: 101;
  display: none;
  top:270px;
  left:1300px;
}
#warg_dash4{
  position: absolute;
  z-index: 2;
  display: none;
  top:270px;
  left:1300px;
 
}
#warg_dash6{
  position: absolute;
  z-index: 101;
  display: none;
  top:270px;
  left:1300px;
}
#warg_dash3{
  transform: scale(0.9);
  position: absolute;
  z-index: 2;
  display: none;
  top:230px;
  left:1300px;
}

#warg_dash1.active,#warg_dash2.active,#warg_dash4.active{
  animation:dash 1.5s ease-in;
}
#warg_dash6.active{
  animation:dash 1s ease-in;
}
#warg_dash3.active{
  animation: dash 2s ease-in;
}

@keyframes dash{
  0%{transform: translateX(0px);}
  100%{transform: translateX(-2000px);}
  }

#defeat{
  position: absolute;
  z-index: 150;
}
#victory{
  position: absolute;
  z-index: 150;
}