body{
  background-image: url(./sp/img/bg_tile.png);
}
.bitFont{
  font-family: "Press Start 2P";font-size: 22px;
}

.hiraganaDott{
  font-family: 'DotGothic16';
}

img{
  max-width:100%;
}
.soccerBtn{
  background-color:#55f;
  color:#fff;
  padding:10px 20px;
  border-radius:15px;
  cursor:pointer;
}
.soccerBtnnotMyTurn{
  background-color:#ccc !important;
}
.soccerContainer,#soccerTitleArea{
  max-width:480px;
  margin:auto;
  display:none;
}
.soccerContainerInner{
  background-color:#00f;
  height:100%;
}

#SoccerGameDiv{
  position:relative;
}
#SoccerKeeper{
  position:absolute;
  bottom:-10px;
  left:50%;
  width:80px;
  margin-left:-40px;
  border:1px solid #ccc;
  border-radius:15px;
  z-index:9998;
}

#SoccerBall{
  width:50px;
  position:absolute;
  bottom:-140px;
  left:50%;
  margin-left:-25px;
  z-index:9999;
}
.ball_rortation{
  animation:1s linear infinite ball_rotation;
}
@keyframes ball_rotation{
  0%{ transform:rotate(0);}
  100%{ transform:rotate(720deg); }
}
#soccerRoop {
    width: 100%;
    height: 150px;
    background: url(../img/soccer/GOAL_BG_LOOP.jpg) repeat-x;
    background-position: 0 0;
    display:none;
    position:relative;
    overflow:hidden;
}
.soccerBGLoopAnim{
  animation: bgroop 5s linear infinite;
}
@keyframes bgroop {
    from {
        background-position: -1956px 0;
    }
    to {
        background-position: 0 0;
    }
}
#SoccerBall2{
  position:absolute;
  height:70px;
  left:50%;
  top:50%;
  margin-left:-35px;
  margin-top:-35px;
  z-index:9998;
}
#SoccerKeeper2{
  position:absolute;
  bottom:-100px;
  left:-140px;
  margin-left:-115px;
  height:200px;
  display:none;
  z-index:9997;
}
#SoccerResult{
  width:300px;
  height:200px;
  position:absolute;
  top:50%;
  left:50%;
  margin-top:-100px;
  margin-left:-150px;
  display:none;
}
.soccerMakerLogo{
  text-align:center;
  color:#f00;
  font-size:18px;
}

#soccerNyadosonArea{
  position:relative;
  display:none;
  height:300px;
}
#soccerNyadosonLogo{
  width:120px;
  position:absolute;
  text-align:center;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
}
#soccerLogoArea{
  position:relative;
  height:300px;
}
.mainMakerLogo{
  position:absolute;
  text-align:center;
  top:-10%;
  left:50%;
  transform: translate(-50%, -50%);
  white-space:nowrap;
}
.LogoShadow{
  text-shadow: 2px 2px #000;
}
.bitTextSize{
  font-size:16px;
}
.soccerLogoblinking{
  animation:blink 1.5s ease-in-out infinite alternate;
}
@keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
.ZoomAnim{
  display:block;
  animation:expansion 80s linear infinite;
  animation-direction:reverse;
  animation-fill-mode:forwards;
  animation-play-state:running;
  background-size:150% !important;
  background-position:center bottom;
}
@keyframes expansion{
  0%{
    background-position:center bottom;
    }
  25%{
    background-position:right bottom;
    }
  75%{
    background-position:left bottom;
    }
  100%{
    background-position:center bottom;
    }
}