@charset "utf-8";
/* CSS Document */
/******************************************************************************
 background
******************************************************************************/
body.top {
 background:url(../images/top/bg_pc.jpg) repeat-y top center #000;
 background-size: 1600px auto;
}
body.game {
 background:url(../images/game/bg_pc.jpg) repeat-y top center #000;
 background-size: 1600px auto;
}
body.plyer_stats {
 background:url(../images/plyer_stats/bg_pc.jpg) repeat-y top center #000;
 background-size: 1600px auto;
}
body.prizes {
 background:url(../images/prizes/bg_pc.jpg) repeat-y top center #000;
 background-size: 1600px auto;
}
body.starry {
 background:url(../images/common/bg_starry.jpg) repeat-y top center #000;
 background-size: 1600px auto;
}
body.beginners {
 background:url(../images/common/bg_cloud.jpg) no-repeat top center #000;
 background-size: 1600px auto;
}
body.privacy {
 background:url(../images/common/bg_goal.jpg) no-repeat top center #000;
 background-size: 1600px auto;
}
body.operation {
 background:url(../images/common/bg_ball.jpg) no-repeat top center #000;
 background-size: cover;
}
body.rule {
 background:url(../images/common/bg_play.jpg) no-repeat top center #000;
 background-size: 1600px auto;
}
@media screen and (max-width: 767px) {
 body.game {
  background:url(../images/game/bg_sp.jpg) repeat-y center top #000;
  background-size: 100% auto;
 }
 body.plyer_stats {
  background:url(../images/plyer_stats/bg_sp.jpg) repeat-y top center #000;
  background-size: 100% auto;
 }
 body.prizes {
  background:url(../images/prizes/bg_sp.jpg) repeat-y top center #000;
  background-size: 100% auto;
 }
 body.starry {
  background:url(../images/common/bg_starry_sp.jpg) repeat-y top center #000;
  background-size: 100% auto;
 }
 body.beginners {
  background:url(../images/common/bg_cloud_sp.jpg) no-repeat top center #000;
  background-size: cover;
 }
 body.privacy {
  background:url(../images/common/bg_goal_sp.jpg) repeat-y top center #000;
  background-size: 100% auto;
 }
 body.operation {
  background:url(../images/common/bg_ball_sp.jpg) no-repeat top center #000;
  background-size: 100% auto;
 }
 body.rule {
  background:url(../images/common/bg_play_sp.jpg) no-repeat top center #000;
  background-size: 100% auto;
 }
}
/******************************************************************************
 Layout
******************************************************************************/
#wrapper {
 width: 100%;
 position: relative;
 height: auto !important; 
 height: 100%;
 min-height: 100%;
 font-size:14px;
 font-weight: 400;
 line-height:1.5em;
 overflow: hidden;
}
#wrapper.palla {
 background:url(../images/top/bg_layer_sp.png) repeat-y top center;
 background-size: 100% auto;
}
@media screen and (min-width: 767px) {
 #wrapper.palla {
  background:url(../images/top/bg_layer.png) repeat-y top center;
  background-size: 1600px auto;
 }
}
#wrapper img {
 width: 100%;
 height: auto;
}
.inner {
 clear:both;
 margin:0 auto;
 padding: 0 5%;
 height:auto;
 box-sizing: border-box;
 position: relative;
 max-width: 1200px;
}
@media screen and (max-width: 767px) {
 #wrapper {
  font-size:12px;
 }
 .inner {
  width:100%;
  padding: 0 3%;
 }
}
/* main contents ****************************************************/
.container {
 clear:both;
 width:100%;
 margin:0 auto;
 padding: 160px 0 130px;
 height:auto;
 box-sizing: border-box;
 position: relative;
 background-size: 100% auto;
}
.container.firstView {
 padding: 65px 0 130px;
}
@media screen and (max-width: 767px) {
 .container {
  padding: 90px 0 20%;
 }
 .container.firstView {
  padding: 50px 0 20%;
 }
}
/* header ****************************************************/
header {
 width: 100%;
 box-sizing: border-box;
 position: fixed;
 z-index: 50;
 background: rgba(0,0,0,0.9);
}
header .headerInner {
 padding: 0 1em;
 height: 60px;
 position: relative;
 box-sizing: border-box;
 display: flex;
 display: -webkit-flex;
 flex-wrap:nowrap;
 -webkit-flex-wrap:nowrap;
 justify-content:space-between;
 -webkit-box-pack:justify;
 -webkit-justify-content:space-between;
 align-items:center;
  -webkit-box-align:center;
  -webkit-align-items:center;
}
header h1{
 margin: 0 auto;
 width: 220px;
}
header .loginBtn {
 padding: 0.5em;
 background: #FFF;
 color: #000;
 font-size: 80%;
 border: none;
 border-radius: 2px;
}
header .loginBtn p {
 line-height: 1.2em;
}
@media screen and (max-width: 767px) {
 header h1{
  width: 47%;
  max-width: 220px;
 }
 header .headerInner {
  height: 50px;
 }
}
/* alert ****************************************************/
#alertWrap {
 width: 100%;
 position: fixed;
 z-index: 40;
 line-height: 1.7em;
 top:60px;
}
.alert {
 padding: 0 0 5px;
 text-align: center;
}
@media screen and (min-width: 768px) {
 .alert {
  padding: 5px 0 8px;
  opacity: 0.9;
 }
}
.alert a {
 display: inline-block;
 
 color: #000;
 text-align: center;
}
.alert a > *{
 display: inline-block;
 vertical-align:middle;
 line-height: 1em;
}
.alert.get{
 color: #000;
 /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fa9a12+1,fffc00+100 */
background: rgba(255,188,11,0.92); /* Old browsers */
background: -moz-linear-gradient(-45deg, #fa9a12 1%, #fffc00 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #fa9a12 1%,#fffc00 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #fa9a12 1%,#fffc00 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fa9a12', endColorstr='#fffc00',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
@media screen and (max-width: 767px) {
 #alertWrap {
  top:50px;
 }
}

/* nav ****************************************************/
nav {
 background:rgba(0,0,0,0.96);
 position: fixed;
 z-index: 45;
 top:50px;
 left: -100%;
 width: 93%;
 max-width: 350px;
 height: 700px;
 overflow-y: scroll;
 -webkit-transition: 0.4s ease-out;
 transition: 0.4s ease-out;
}
nav.active {
 left: 0;
}
nav .navInner {
 padding:2em 3% 5em;
 position: relative;
}
nav .menuList li{
 border-bottom: 1px solid #333;
}
nav .menuList li a{
 display: inline-block;
 padding: 1em;
}
nav .navInner .userName{
 padding: 1em;
 border-bottom: 1px solid #333;
 display: flex;
 display: -webkit-flex;
 flex-wrap:wrap;
 -webkit-flex-wrap:wrap;
 justify-content:space-between;
 -webkit-box-pack:justify;
 -webkit-justify-content:space-between;
}
nav .navInner .userName .name{
 color: #ffdb8e;
}
nav .navInner .userName{}
nav .navInner .close{
 width: 20px;
 padding: 5px;
 position: absolute;
 bottom: 2em;
 right: 5%;
 cursor: pointer;
}
@media screen and (min-width: 768px) {
 nav {
  top:60px;
 }
}

/* menu ****************************************************/
#menu {
 display:block;
 margin:0;
 padding: 8px 5px 7px;
 width:50px;
 height:50px;
 cursor:pointer;
}
#menu .normalTxt { display: block;}
#menu .activeTxt { display: none;}
#menu.active .normalTxt { display: none;}
#menu.active .activeTxt { display: block;}
/* animation */
.menu-trigger,
.menu-trigger span {
 display: inline-block;
 transition: all .4s;
 box-sizing: border-box;
}
.menu-trigger {
 position: relative;
 width: 40px;
 height: 40px;
}
.menu-trigger span {
 position: absolute;
 left: 20%;
 width: 60%;
 height: 3px;
 background-color: #FFF;
}
.menu-trigger span:nth-of-type(1) {top:21px;}
.menu-trigger span:nth-of-type(2) {top: 30px;}
.menu-trigger span:nth-of-type(3) {bottom: 8px;}
.menu-trigger.active span {background-color: #FFF;}
.menu-trigger.active span:nth-of-type(1) {-webkit-transform: translateY(9px) rotate(-45deg);transform: translateY(9px) rotate(-45deg);}
.menu-trigger.active span:nth-of-type(2) {opacity: 0;}
.menu-trigger.active span:nth-of-type(3) {-webkit-transform: translateY(-9px) rotate(45deg);transform: translateY(-9px) rotate(45deg);}
.hamburger-text {
 text-align: center;
 font-family: 'Play', sans-serif;
 font-size: 9px;
 font-weight: bold;
 line-height: 1.3em;
}


/* login ****************************************************/
#overlay{
 z-index:40;
 position:absolute;
 top:0px;
 left:0;
 width:100%;
 height:120%;
 background:rgba(0,0,0,0.96);
 text-align:center;
 display: none;
}
#overlay.active {
 display: block;
 animation: fadeIn 0.3s ease-in-out 1 alternate;
}
#loginWrap {
 width: 100%;
 padding: 0px 0 50px;
 position: absolute;
 top:50px;
 left: 0;
 z-index: 40;
 display: none;
}
#loginWrap.active {
 display: block;
 animation: fadeIn 0.3s ease-in-out 1 alternate;
}
#loginWrap .loginInner {
 padding-top: 80px;
 display: none;
}
#loginWrap .loginInner.active {
 display: block;
 animation: fadeIn 0.3s ease-in-out 1 alternate;
}
#loginWrap .close {
 width: 20px;
 padding: 5px;
 position: absolute;
 top:20px;
 right: 5%;
 cursor: pointer;
}
#loginWrap > section {
 width: 80%;
 margin: 0 auto 4em;
 max-width: 600px;
}
#loginWrap .btnStyle {
 margin-bottom: 1em;
}
#loginWrap .btnStyle .btn a,
#loginWrap .btnStyle .btn button{
 display: block;
 width: 100%;
 box-sizing: border-box;
 padding: 9px 0;
 border: 2px solid #FFF;
 text-align: center;
 font-weight: bold;
 font-size: 100%;
 background: #000;
 color: #FFF;
}
#loginWrap .btnStyle.yahooBtn .btn a{
 background: #ff0022;
 border-color: #ff0022;
 padding: 7px 0;
}
#loginWrap .btnStyle.yahooBtn .logo{
 display: inline-block;
 vertical-align: middle;
 width: 30%;
 max-width: 100px;
}
#loginWrap .btnStyle.signUp .btn a,
#loginWrap .btnStyle.signUp .btn button{
 color: #000;
 background: #ffff00; /* Old browsers */
 background: -moz-linear-gradient(45deg, #ffff00 1%, #ffa800 100%); /* FF3.6-15 */
 background: -webkit-linear-gradient(45deg, #ffff00 1%,#ffa800 100%); /* Chrome10-25,Safari5.1-6 */
 background: linear-gradient(45deg, #ffff00 1%,#ffa800 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffff00', endColorstr='#ffa800',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
#loginWrap .error {
 color: #ff0022;
 padding-bottom: 0.5em;
}
#loginWrap .formInput {
 width: 90%;
 margin: 0 auto;
}
#loginWrap input[type="submit"] {
 display: block;
 width: 100%;
 margin: 2em auto;
 padding: 7px 0;
 border: 2px solid #FFF;
 background: #000;
 color: #FFF;
}
#loginWrap .formArea {
 margin-bottom: 4em;
}
#loginWrap .attention {
 margin-bottom: 1em;
}
#loginWrap .complete {
 text-align: center;
 font-size: 200%;
 font-weight: bold;
 line-height: 2em;
}
#loginWrap .borderBox {
 border: 1px solid #FFF;
 padding: 1em;
 box-sizing: border-box;
 margin-bottom: 2em;
}
#loginWrap .tmpPass {
 padding: 0.5em 0;
 text-align: center;
 font-size: 115%;
 font-weight: bold;
 color: #000;
 background: #909090;
}
#loginWrap .step_1 .btnStyle{
 margin-bottom: 30px;
}
#norton-idsafe-field-styling-divId {
 display: none;
}
/* footer ****************************************************/
footer {
 width: 100%;
 font-size: 75%;
 position: relative;
 text-align: center;
 margin-top: 4em;
}
/* footNav ****************************************************/
#footNav {
 width: 100%;
 position: fixed;
 bottom: 0;
 left: 0;
 background: rgba(0,0,0,0.8);
 z-index: 10;
}
#footNav > ul{
 width: 100%;
 display: -webkit-flex;
 display: flex;
 flex-wrap:wrap;
 -webkit-flex-wrap:wrap;
 justify-content:space-between;
 -webkit-box-pack:justify;
 -webkit-justify-content:space-between;
}
#footNav > ul li{
  width: 25%;
}
#gotoTop {
 width: 50px;
 height: auto;
 position: fixed;
 right: 3%;
 bottom: 10%;
 cursor: pointer;
 z-index: 10;
 opacity: 0;
 -webkit-transition: 0.3s ease-out;
 transition: 0.3s ease-out;
 visibility: hidden;
}
#gotoTop.active {
 opacity: 1;
 visibility: visible;
}
@media screen and (min-width: 768px) {
 #footNav {
  display: none;
 }
 #gotoTop {
  bottom: 20px;
 } 
}

 
 


/******************************************************************************

 SP 

******************************************************************************/
@media screen and (min-width: 768px) {.pcnone{display: none;}.spnone{display: block;}}
@media screen and (max-width: 767px) {.pcnone{display: block;}.spnone{display: none;}}