@charset "utf-8";
*{
    margin: 0; padding: 0;
    box-sizing: border-box;
    text-decoration:none;
    color: #000000;
}

section.content {
    width: 1080px;
    height: 720px;
    position: absolute;
    top: 0;
    left: 0;
}

#canvas1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}



.restore {
  position: absolute;
  left:  0;
  right: 0;
  margin: auto;
  top: 30%;  
}
.restoreImg {
  width:  80vw;
  height: auto;
  background-color: rgba(128, 128, 128, 0.3);
  float: left;
  border: 1px solid #aaaaaa;
  aspect-ratio: 1;
}
.restoreImg img{
  width: 100%;
  height: 100%;
}
.restoreButton{
  position: absolute;
  left: 55%;
  width: 31.5vw;
  height: 17.5vh;
  background-color: rgba(0, 0, 255, 0.7);
  color: rgba(255,255,255,0.7);
  font-size: 1.5em;
  text-align:center;
}




.equipments {
    position: absolute;
    left:  0;
    right: 0;
    margin: auto;
    bottom: 20%;
    width:  80%;
    aspect-ratio: 4/1;
  }
  
.equipment {
    width:  25%;
    height: 100%;
    background-color: rgba(128, 128, 128, 0.3);
    float: left;
    border: 1px solid #aaaaaa;
}
  
.equipment.active {
    background-color: rgba(16, 16, 16, 0.8);
}

.equipment img{
    width: 100%;
    height: 100%;
}
  
#playbtn {
    position: absolute;
    left:  0;
    right: 0;
    margin: auto;
    bottom: 5%;
    width:  40%;
    background-color: rgba(255, 255, 255, 0);
}
  
#playbtn img{
    height: 100%;
    width:  100%;
}


.weapons1 {
  display: flex;
  flex-wrap: wrap;
  position: absolute;
  left:  0;
  right: 0;
  margin: auto;
  bottom: 18%;
  width:  60%;
  aspect-ratio: 3/2;
}

.weapon1 {
  position: relative;
  width: calc(33.33%);
  height: 50%;
  background-color: rgba(128, 128, 128, 0.3);
  border: 1px solid #aaaaaa;
  display: flex;
  justify-content: center;
  align-items: center;
}

.weapon1 .active {
border: 2px solid #555555;
}

.weapon1 img{
width: 100%;
height: 100%;
}

.weapons2 {
  display: flex;
  flex-wrap: wrap;
  position: absolute;
  left:  0;
  right: 0;
  margin: auto;
  bottom: 18%;
  width:  60%;
  aspect-ratio: 3/2;
}

.weapon2 {
  position: relative;
  width: calc(33.33%);
  height: 50%;
  background-color: rgba(128, 128, 128, 0.3);
  border: 1px solid #aaaaaa;
  display: flex;
  justify-content: center;
  align-items: center;
}


.weapon2 .active {
  border: 2px solid #555555;
}

.weapon2 img{
  width: 100%;
  height: 100%;
}
  
.weapons3 {
  position: absolute;
  left:  0;
  right: 0;
  margin: auto;
  bottom: 20%;
  width:  40%;
  aspect-ratio: 2/1;
}

.weapon3 {
  position: relative;
  width:  50%;
  height: 100%;
  background-color: rgba(128, 128, 128, 0.3);
  float: left;
  border: 1px solid #aaaaaa;
  display: flex;
  justify-content: center;
  align-items: center;
}

.weapon3 .active {
  border: 2px solid #555555;
}

.weapon3 img{
  width: 100%;
  height: 100%;
}

.armors1 {
  position: absolute;
  left:  0;
  right: 0;
  margin: auto;
  bottom: 18%;
  width:  80%;
  aspect-ratio: 4/1;
}

.armor1 {
  position: relative;
  width:  25%;
  height: 100%;
  background-color: rgba(128, 128, 128, 0.3);
  float: left;
  border: 1px solid #aaaaaa;
  display: flex;
  justify-content: center;
  align-items: center;
}

.armor1 .active {
  border: 2px solid #555555;
}

.armor1 img{
  width: 100%;
  height: 100%;
}



.nowEquipBox {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /*中心が原点*/
  width: 100%;
  height: 30%;
}
.nowEquip {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: #2e8b57;
  font-weight: bold;
  color: #dcdcdc;
  opacity: 0.8;
  display: flex;
  justify-content: center;
  align-items: center;  
}


.upperUI {
  position: absolute;
  left:  0;
  right: 0;
  margin: auto;
  top:5%;
  width:  50%;
  aspect-ratio: 5/1;
  background-color: rgba(0, 0, 0, 0.8);
}


/*装備選択画面からホームに戻るボタン*/
#returnButton {
  position: absolute;
  left: 0;
  top: 0;
  margin: 10px;
  width: auto;
  height: 8%;
  aspect-ratio: 1;
}
#returnButton img{
  width: 100%;
  height: 100%;
  border-radius: 50%; /*円形にトリミング*/
}

/*お金のUI*/
.moneyUI {
  position: absolute;
  top: 0;
  right: 0;
  margin: 10px;
  width: 35%;
  height: 8%;
}
.moneyBox {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border-radius: 50vh;
  background-color: #EEEEEE;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.moneyIcon{
  position: reative;
  left: 0;
  margin: 10px;
  height:60%;
}
.moneyUnit{
  position: reative;
  right: 0;
  margin: 10px;
  height:50%;
}






#back_btn {
  position: absolute;
  left:  0;
  width: 20%;
  height: 100%;
  float: left;
}

#back_btn.active {
  background-color: rgba(128, 128, 128, 0.6);
}

#back_btn img{
  height: 100%;
  width:  100%;
}

#money {
  position: absolute;
  left:  40%;
  width: 60%;
  height: 100%;
  font-size: 3.5vh;
  color: #ffffff;
}




/* .name {
  position: absolute;
  left:  0;
  right: 0;
  margin: auto;
  top:15%;
  width: 80%;
  color: rgba(200,200,200,0.7);
  font-size: 3em;
  font-weight: bold;
  text-align:center;
  aspect-ratio: 4/1;
} */


.equipdeatails {
  position: absolute;
  left: 50%;
  top: 15%;
  transform: translate(-50%, 0%); /*上辺の中央が原点*/

  width:  90%;
  height: 35%;
  background-color: rgba(51, 153, 102);
  border: 1px solid #000000;
}

.equipdeatImgBack {
  position: absolute;
  top: 50%;
  left: 5%;
  transform: translate(0%, -50%); /*左辺の中心が原点*/
  width: 25%;
  height: auto; /*サイズは1:1*/
  aspect-ratio: 1/1; /*サイズは1:1*/ 
  background-color: rgb(255, 255, 255);
}
.equipdeatImgbox {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(128, 128, 128, 0.3);
  border: 1px solid #aaaaaa;
  display: flex;
  justify-content: center;
  align-items: center;
}
.equipdeatImgbox img{
  /* position: absolute;
  top: 0;
  left: 0; */
  width: 100%;
  height: 100%;
}

.weaponTextBox {
  position: absolute;
  top: 50%;
  bottom: 50%;
  right: 5%;
  margin: auto;
  width: 60%;
  height: 90%;
}
.weaponStatus {
  width: 100%;
  /* height: 75%; */
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.weaponDescription {
  position: absolute;
  left: 0;
  top: 65%;
  /* transform: translate(0%, -100%); 左下が原点 */
  width: 100%;
  height: 20%;
}

.name {
  margin: auto;
  width: 80%;
  color: rgba(200,200,200,0.7);
  font-size: 2em;
  font-weight: bold;
  text-align:center;
  aspect-ratio: 4/1;
}


.lowerUI {
  position: absolute;
  left:  0;
  right: 0;
  margin: auto;
  bottom: 10%;
  width:  70%;
  aspect-ratio: 4/1;
}

.lowerUI1 {
  position: absolute;
  left:  0;
  width: 45%;
  height: 100%;
  float: left;
  background-color: rgba(255, 0, 0, 0.7);
  color: rgba(255,255,255,0.7);
  font-size: 1.5em;
  text-align:center;
}

.lowerUI1 .active {
  background-color: rgba(255, 0, 0, 1);
}

.lowerUI1 .unavailable {
  background-color: rgba(255, 149, 149, 0.7);
}

.lowerUI2 {
  position: absolute;
  left: 55%;
  width: 45%;
  height: 100%;
  background-color: rgba(0, 0, 255, 0.7);
  color: rgba(255,255,255,0.7);
  font-size: 1.5em;
  text-align:center;
}

.lowerUI2 .active {
  background-color: rgba(0, 0, 255, 1);
}

.lowerUI2 .unavailable {
  background-color: rgba(149, 149, 255, 0.7);
}