html, body{
  margin: 0;
  width: 100%;
  height: 100%;
  -webkit-user-select:none;
  -background-color: #24ac3e;
}
html{
  overflow: auto;
}
body{
  overflow: hidden;
}

.forimg{
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% auto;
}

#base{
  position: relative;
  width: 100%;
  max-width: 640px;
  -padding-top: 73%;
  max-height: 853px;
  background-color: #FFF;
  margin-left: auto;
  margin-right: auto;
  -margin: 0;
  background-image: url(../images/back.png);
  background-repeat: no-repeat;
  background-size:auto 100%;
}

#base:before {
display: block;
content: "";
-width: 100%;
padding-top: 133%;
}

#wrapper{
  position: absolute;
 top: 0;
 left: 0;
 bottom: 0;
 right: 0;
}
#start{
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
  background-image: url("../images/bankokuki.png");
  background-repeat: no-repeat;
  background-size: 100% auto;
}

.title {
    margin-top: 25%;
    display: inline-block;
    position: relative;
    padding: 25% 43%;
    background-image: url("../images/logo.png");
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center;
}

.goal{
  margin-top: 3%;
  margin-left: auto;
  margin-right: auto;
  padding: 5% 20%;
  width: 5%;
  background-image: url("../images/mezase.png");
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center;
}

.select{
  display: inline-block;
  margin-top: 4%;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}

.lvBtn{
  cursor: pointer;
  float: left;
  margin-right: 5%;
  margin-left: 5%;
  width: 20%;
	position: relative;
	padding: 5% 10%;
  background-repeat: no-repeat;
  background-size: 100% auto;
}

#lv7{
  background-image: url("../images/7kakoku.png");
}

#lv9{
  background-image: url("../images/9kakoku.png");
}

.how2Btn{
  cursor: pointer;
  padding: 4% 10%;
  width: 10%;
  margin-top: 5%;
  margin-left: auto;
  margin-right: auto;
  background-image: url("../images/asobikata.png");
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center;
}

#how2{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  background-color: rgba(30, 30, 30, 0.5);
}

#exp{
  position: absolute;
  top: 0;
  width: 70%;
  height: 80%;
  margin: 10%;
  background-color: #FFF;
  border-radius: 8px;
  z-index: 2;
  padding: 5%;
}

#expimg{
  width: 100%;
  height: 100%;
  background-image: url(../images/exp3.png);
  background-size: 100% auto;
  background-position: top;
  background-repeat: no-repeat;
}

.close{
  cursor: pointer;
  position: absolute;
  top: 5%;
  right: 5%;
}

#main{
  width: 100%;
  height: 100%;
}

#game{
  position: absolute;
}

#bingo{
  position: relative;
  width: 75%;
  height: auto;
  display: block;
  padding-top:109.95%;
  margin-left: auto;
  margin-right: auto;
}

#bingo #tableCell, #bingo #game, #bingo .pole, #bingo #red{
  position: absolute;
  top: 2%;
  left: 0;
  width: 100%;
  height: 100%;
}

#bingo #red{
  height: 10%;
  background-color: rgba(255, 10, 10, 0.7);
}

#bingo .pole{
  width: 2%;
  height: 99%;
  background-repeat: no-repeat;
  background-size: 100% auto;
}

#bingo #pole_left{
    left: -2%;
    background-image: url("../images/hidara_po-ru.png");
}

#bingo #pole_right{
    left: 100%;
    background-image: url("../images/migi_po-ru.png");
}

#clear{
  position: absolute;
  top: 20%;
  left: 15%;
  width: 70%;
  height: 40%;
  background-image: url("../images/1000ten.png");
  opacity: 0;
}

#shinpan{
  position: absolute;
  bottom: 17%;
  right: 0;
  width: 18%;
  padding-top: 15%;
  overflow: hidden;
}

#shinpan img{
  width: 140%;
}

#under{
  position: absolute;
  width: 100%;
  height: 15%;
  bottom: 0;
}

#left{
  position: absolute;
  width: 28%;
  height: 100%;
  bottom: 0;
  left: 0;
}

#score {
    height: 35%;
    width: 90%;
    padding-top: 15%;
    margin-left: 10%;
    margin-right: auto;
    margin-top: 0;
    background-image: url("../images/sukoa.png");
    background-repeat: no-repeat;
    background-size: 100% auto;
}

#scoreText{
  height: 70%;
  width: 100%;
  text-align: center;
  font-size: 4vw;
}

#returnBtn{
  position: absolute;
  top: 60%;
  padding: 23% 20%;
  width: 10%;
  height: 35%;
  margin-left: 10%;
  background-image: url("../images/modoru.png");
  background-repeat: no-repeat;
  background-size: 100% auto;
}

#right{
  position: absolute;
  width: 70%;
  height: 100%;
  right: 0;
  bottom: 0;
}

.control{
  height: 100%;
}

.btns{
  height: 95%;
  float: left;
  cursor: pointer;
  background-repeat: no-repeat;
  background-size: 100% auto;
}

#leftBtn, #rightBtn{
  width: 16%;
  background-image: url("../images/hidari.png");
}

#downBtn{
  width: 24%;
  background-image: url("../images/shita.png");
  background-position: bottom;
  margin-left: 2%;
  margin-right: 2%;
}

#rightBtn{
    background-image: url("../images/migi.png");
}

#retryBtn{
  position: absolute;
  bottom: 20%;
  width: 50%;
  height: 8%;
  margin-right: 25%;
  margin-left: 25%;
  background-image: url("../images/mouitido.png");
}

.hatena{
  float: left;
  width: 10%;
  height: 40%;
  margin-left: 28%;
  margin-top: 16%;
  background-image: url("../images/hatena.png");
}

table{
  border-collapse: collapse;
  border: solid 1.5px;
  border-color: rgba(126, 125, 139, 0.8);
  background-color: rgba(255, 255, 255, 0.5);
  width: 100%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
}

td{
  width: 20%;
  height: 9%;
  margin: 0px;
  padding: 0px;
  text-align: center;
}

#game span{
  position: absolute;
  top: 0;
  left: 90px;
  width: 20%;
  height: 9%;
  text-align: center;
}

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

#game span p{
  position: absolute;
  font-size: 2vw;
  margin: 0;
  top: 20%;
  left: 30%;
  color: #000;
  text-shadow: 1px 1px #FFF, -1px 1px #FFF;
}



/* .btns{
    display: inline-block;
    padding: 0.5vw 1vw;
    text-decoration: none;
    background: #668ad8;
    color: #FFF;
    border-bottom: solid 0.5vw #627295;
    border-radius: 3px;
    width: 25%;
    height: 20%;
    text-align: center;
}
.btns:active {
    -ms-transform: translateY(0.5vw);
    -webkit-transform: translateY(0.5vw);
    transform: translateY(0.5vw);
    border-bottom: none;
} */



.deleteAnim img{
  border: solid 3px;
  border-color: rgb(247, 142, 66);
  box-sizing: border-box;
}


.deleteAnim{
  opacity: 0;
  -webkit-animation: anime1 0.3s;
  -animation: anime1 0.3s;
}

@keyframes anime1 {
  0%{opacity: 1;}
  20%{opacity: 1;}
  40%{opacity: 0.2;}
  50%{opacity: 1;}
  70%{opacity: 1;}
  100%{opacity: 0;}
}

@-webkit-keyframes anime1{
  0%{opacity: 1;}
  20%{opacity: 1;}
  40%{opacity: 0.2;}
  50%{opacity: 1;}
  70%{opacity: 1;}
  100%{opacity: 0;}
}

.gameEnd{
  position: absolute;
  top: 20%;
  left: 15%;
  width: 70%;
  height: 30%;
}

#congrats{
  background-image: url("../images/omedetou.png");
}

#gameOver{
    background-image: url("../images/gameover.png");
}

.hidden{
  visibility: hidden;
}

.clearfix:after{
	content: "";
	clear: both;
	display: block;
}

@media (min-width: 640px) {
  #scoreText{
  font-size: 20px;
  }

}


#back-home {
  margin: 10px auto 20px;
  width: 680px;
  background: transparent url("../images/sen.png") top center no-repeat;
}
#back-home p {
  background: transparent url("../../image/back-o.png") left center no-repeat;
  background-size: 32px;
  line-height: 60px;
  padding-left: 40px;
  display: flex;
  justify-content: space-between;
}
@media (max-width: 480px) {
  #back-home {
    display: none;
  }
}