@charset "UTF-8";
/* ==========================================================================
   play top
========================================================================== */
.ua-wiiu #play{
    background: url(../../sp/assets/img/play/play_bg.jpg) 0 0;
    -webkit-background-size: cover;
            background-size: cover;
}
#play .playcontentbody{
  width: 828px;
  height: 428px;
  position: absolute;
  top: 40%;
  left: 50%;
  margin: -214px 0 0 -414px;
}

#play .playcontent_challenge,
#play .playcontent_challenge_hitarea{
  position: absolute;
  left: 0;
  top: 0;
}

#play .playcontent_world,
#play .playcontent_world_hitarea{
  position: absolute;
  left: 440px;
  top: 0;
}

#play .playcontent_chara{
  position: absolute;
  top: 350px;
  left: 50%;
  margin-left: -314px;
}

#play .playcontent_challenge_hitarea a{
  display: block;
  width: 388px;
  height: 428px;
  position: relative;
}

#play .playcontent_world_hitarea a{
  display: block;
  width: 388px;
  height: 428px;
  position: relative;
}
#play .hitarea_btn{
  position: absolute;
  left: 83px;
  top: 362px; 
}
#play .playcontent_challenge_balloon{
  position: absolute;
  left: -70px;
  top: -45px;
  width: 130px;
  height: 130px;
}
#play .playcontent_world_balloon{
  position: absolute;
  right: -70px;
  top: -45px;
  width: 130px;
  height: 130px;
}
#play .playcontent_challenge_balloon:before,
#play .playcontent_world_balloon:before{
  content: "";
  width: 130px;
  height: 130px;
  display: block;
  background: url(../img/play/play_balloon_shadow.png) 0 0 no-repeat;
  position: absolute;
  left: 2px;
  top: 2px;
  
}
#play .balloon_bg{
  position: absolute;
  left: 0;
  top: 0;
  width: 130px;
  height: 130px;
}
#play .balloon_text{
  position: absolute;
  left: 0;
  top: 0;
  width: 130px;
  height: 130px;
}

#play .hitarea_btn span{
  width: 220px;
  height: 44px;
  display: block;
  background-image: url(../img/play/play_sprite.png);
  background-position: 0 0;
  background-repeat: no-repeat;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
}
.no-touchevents #play a:hover .hitarea_btn span{ background-position: 0 -44px;}




#play .bgarea {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#play .bgarea ul {
  position: relative;
  zoom: 1;
}

#play .bgarea ul:after {
  content: '';
  display: block;
  clear: both;
}

#play .bgarea li {
  float: left;
}

@media screen and (orientation: portrait) {
  .tabletmode #play .bgarea{
      top: 0;
  }
  .tabletmode #play .playcontentbody{
    top: 35%;
  }
}