html {
  height: 100%;
}
body {
  margin: 0px !important;
  height: 100vh !important;
  min-width: 320px !important;
}
#mainContent {
    background-image: url("/csr/plastic-recycle/game2/img/BG.png");
    justify-content: center;
    align-items: center;
    display: flex;
    width: 100%;
    height: 100%;
  text-align: center;
}
#mainContent:-webkit-full-screen {
    background-image: url("/csr/plastic-recycle/game2/img/BG.png");
    width: 100%;
    height: auto;
}
#mainContent:-moz-full-screen {
    background-image: url("/csr/plastic-recycle/game2/img/BG.png");
    width: 100%;
    height: auto;
}
#mainContent:-ms-full-screen {
    background-image: url("/csr/plastic-recycle/game2/img/BG.png");
    width: 100%;
    height: auto;
}
#mainContent:fullscreen {
    background-image: url("/csr/plastic-recycle/game2/img/BG.png");
    width: 100%;
    height: auto;
}

.ingamefooter {
  position: fixed;
  font-size: 1.2rem;
  line-height: 30px;
  text-align: center;
  bottom: 0px;
  padding: 0px;
  width: 100%;
  height: 30px;
  background-color: #194B65;
  color: #60B0FF;
}


canvas {
}

#loadingContainer{
  position: absolute;

  top: 35%;
  left: 35%;
  width: 30%;
  height: 30%;

}
#loadProg{ margin: auto; width: 141px; height: 18px;}
#loadProgEmpty {background: url('/csr/plastic-recycle/game2/img/progressEmpty.png') no-repeat right / cover; float: right; width: 100%; height: 100%; display: inline-block;}
#loadProgFill {background: url('/csr/plastic-recycle/game2/img/progressFull.png') no-repeat left / cover; float: left; width: 0%; height: 100%; display: inline-block;}

#fullscreen {
    position: fixed;
    right: 0px;
    bottom: 30px;
    width: 100%;
    height: 38px;
    line-height: 38px;
}

#fullscreen img {
  float: right;
}
/*-------------------------*/
/* 遊び方画面              */
/*-------------------------*/

#howto {
  position: absolute;
  width: 90%;
  height: 90%;
  top: 5%;
  left: 5%;
  overflow-y: scroll;
}

#howto .title {
  display: block;
  width: 50%;
  margin: 0 auto;
}

#howto .title img {
  width: 100%;
}

#howto .explain {
  display: block;
}

#howto .explain img {
  width: 100%;
}

#howto .buttons {
  display: block;
  width: 80%;
  margin: 0 auto;
}

#howto .buttons a img {
  display: inline;
  margin: 5%;
  padding: 0;
  width: 15%;
}

#howto .buttons a:nth-child(2) img {
  width: 36.5%;
}



/*-------------------------*/
/* 豆知識画面              */
/*-------------------------*/

#mame {
  padding: 0;
  overflow-y: scroll;
  position: absolute;
  width: 90%;
  height: 85%;
  top: 7%;
  left: 5%;

  background-color: rgba(255, 255, 255, 0.5);
}

#mame .title {
  display: inline;
}

#mame .title img {
  width: 100%;
  object-fit: contain;
}

#mame .explain {
  display: inline;
}

#mame .explain img {
  width: 100%;
  object-fit: contain;
}

#mame .close_btn{
  position: fixed;
  width: 50px;
  height: 50px;
  top: 5%;
  right: 7%;
}

#mame .close_btn img {
  width: 100%;
  height: 100%;
}








/*-------------------------*/
/*-------------------------*/
/*-------------------------*/


#warning_sp {
  background-image: url("/csr/plastic-recycle/game2/img/BG.png");
  background-repeat: repeat;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  text-align: center;
}
#warning_sp img {
  position: relative;
  width: 50%;
  height: auto;
  margin: 0 auto;
  top: 40%;
}

@media only screen and (max-device-width: 480px) {
  .sprite-company-logo {
    background-size: cover !important;
    width: 180px !important;
    padding-top: 64px !important;
  }
}