@charset "utf-8";

body {
  background-color: lightyellow;
}

h1 {
  text-align: center;
}

div.screen {
  max-width:700px;
  max-height: 502px;
  width: 100vw;
  height: calc((502/ 700) * 100vw);
  background-color: #000;
  background-image: url(../images/base_bgi_4.png);
  background-size: cover;
  border: 5px solid #888;
  background-position: center;
  margin: 0px auto;
  box-sizing: border-box;
  position: relative;
}

/* =================title====================== */
#h img {
  position: absolute;
  top: calc((60 / 502) * 100%);
  left: calc((118 / 700) * 100%);
  display: none;
  width: calc((50 / 700) * 100%);
  height: auto;
  z-index: 3;
}

#a img{
  position: absolute;
  top: calc((69 / 502) * 100%);
  left: calc((170 / 700) * 100%);
  display: none;
  width: calc((43 / 700) * 100%);
  height: auto;
  z-index: 3;
}

#l img {
  position: absolute;
  top: calc((76 / 502) * 100%);
  left: calc((225 / 700) * 100%);
  display: none;
  width: calc((33 / 700) * 100%);
  height: auto;
  z-index: 3;
}

#l2 img {
  position: absolute;
  top: calc((82 / 502) * 100%);
  left: calc((263 / 700) * 100%);
  display: none;
  width: calc((33 / 700) * 100%);
  height: auto;
  z-index: 3;
}

#o img {
  position: absolute;
  top: calc((83 / 502) * 100%);
  left: calc((300 / 700) * 100%);
  display: none;
  width: calc((41 / 700) * 100%);
  height: auto;
  z-index: 3;
}

#w img {
  position: absolute;
  top: calc((86 / 502) * 100%);
  left: calc((345 / 700) * 100%);
  display: none;
  width: calc((63 / 700) * 100%);
  height: auto;
  z-index: 3;
}

#e img {
  position: absolute;
  top: calc((92 / 502) * 100%);
  left: calc((410 / 700) * 100%);
  z-index: 3;
  display: none;
  width: calc((33 / 700) * 100%);
  height: auto;
}

#e2 img {
  position: absolute;
  top: calc((93 / 515) * 100%);
  left: calc((447 / 700) * 100%);
  z-index: 3;
  display: none;
  width: calc((33 / 700) * 100%);
  height: auto;
}

#n img {
  position: absolute;
  top: calc((89 / 502) * 100%);
  left: calc((484 / 700) * 100%);
  z-index: 2;
  display: none;
  width: calc((48 / 700) * 100%);
  height: auto;
  z-index: 3;
}


#star_2 img {
  position: absolute;
  top: calc((86 / 502) * 100%);
  left: calc((541 / 700) * 100%);
  z-index: 2;
  width: calc((48 / 700) * 100%);
  height: auto;
  z-index: 3;
}

#star_7 img {
  position: absolute;
  top: calc((44 / 502) * 100%);
  left: calc((69 / 700) * 100%);
  z-index: 3;
  width: calc((48 / 700) * 100%);
  height: auto;
}


/* ========others===================== */

#trick img {
  position: absolute;
  left:calc((200 / 700) * 100%);
  top: calc((335 / 502) * 100%);
  width: calc((116 / 700) * 100%);
  height: auto;
  z-index: 3;
}



#goast img {
  position: absolute;
  top: calc((120 / 502) * 100%);
  left:calc((580 / 700) * 100%);
  width: calc((110 / 700) * 100%);
  height: auto;
  z-index: 2;
}





#star_1 img {
  position: absolute;
  top:calc((165 / 502) * 100%);
  left:calc((75 / 700) * 100%);
  display: none;
  width: calc((46 / 700) * 100%);
  height: auto;
  z-index: 1;
  
}

#star_3 img {
  position: absolute;
  top:calc((165 / 502) * 100%);
  left:calc((75 / 700) * 100%);
  display: none;
  width: calc(( 45 / 700) * 100%);
  height: auto;
  z-index: 1;
  
}
#star_4  img {
  position: absolute;
  top:calc((165 / 502) * 100%);
  left:calc((75 / 700) * 100%);
  display: none;
  width: calc((45 / 700) * 100%);
  height: auto;
  z-index: 1;
  
}
#star_5 img {
  position: absolute;
  top:calc((436 / 502) * 100%);
  left:calc((389 / 700) * 100%);
  display: none;
  width: calc((44 / 700) * 100%);
  height: auto;
  z-index: 2;
}

#star_6 img {
  position: absolute;
  top:calc(( 435 / 502) * 100%);
  left:calc(( 310 / 700) * 100%);
  display: none;
  width: calc(( 50 / 700) * 100%);
  height: auto;
  z-index: 1;
  
}

#candy img {
  position: absolute;
  top:calc((430 / 502) * 100%);
  left:calc((373 / 700) * 100%);
  display: none;
  width: calc((90 / 700) * 100%);
  height: auto;
  z-index: 3;
 
}

#candy_2 img {
  position: absolute;
  top:calc((330 / 502) * 100%);
  left:calc((577 / 700) * 100%);
  width: calc((96 / 700) * 100%);
  height: auto;
  z-index: 4;
}

#bat img {
  position: absolute;
  top:calc((140 / 502) * 100%);
  left:calc((152 / 700) * 100%);
  width: calc((86 / 700) * 100%);
  height: auto;
}

#cat img {
  position: absolute;
  top:calc((262 / 502) * 100%);
  left:calc((345 / 700) * 100%);
  width: calc((110 / 700) * 100%);
  height: auto;
}

#spider img {
  position: absolute;
  top:calc((128 / 502) * 100%);
  left:calc((504 / 700) * 100%);
  width: calc((85 / 700) * 100%);
  height: auto;
  z-index: 1;
  
}

#pumpkin img {
  position: absolute;
  top:calc((160 / 502) * 100%);
  left:calc((240 / 700) * 100%);
  width: calc((90 / 700) * 100%);
  height: auto;
  z-index: 1;
}

#hat img {
  position: absolute;
  top:calc((74 / 502) * 100%);
  left: calc((8 / 700) * 100%);
  width: calc((77 / 700) * 100%);
  height: auto;
}
#candy_left img {
  position: absolute;
  top:calc((275 / 502) * 100%);
  left: calc((18 / 700) * 100%);
  width: calc((77 / 700) * 100%);
  height: auto;
  z-index: 4;
}
#candy_twin img {
  position: absolute;
  top:calc((119 / 502) * 100%);
  left: calc((2 / 700) * 100%);
  width: calc((126 / 700) * 100%);
  height: auto;
  z-index: 4;
}
#box img {
  position: absolute;
  top:calc((295 / 502) * 100%);
  left: calc((-10 / 700) * 100%);
  width: calc((197 / 700) * 100%);
  height: auto;
  z-index: 4;
}
#message img {
  position: absolute;
  top:calc((150 / 502) * 100%);
  left: calc((150 / 700) * 100%);
  width: calc((400 / 700) * 100%);
  height: auto;
  display: none;
  z-index: 4;
}

#c_1 img {
  position: absolute;
  top: calc((270 / 502) * 100%);
  left: calc((575 / 700) * 100%);
  width: calc((81 / 700) * 100%);
  /* display: none; */
  height: auto;

}

#c_2 img {
  position: absolute;
  top: calc((400 / 502) * 100%);
  left: calc((390 / 700) * 100%);
  width: calc((50 / 700) * 100%);
  height: auto;

}