@charset "utf-8";

* {
	margin: 0;
	padding: 0;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}
.clearfix {
  min-height: 1px;
}
* html .clearfix {
  height: 1px;
  /*\*//*/
  height: auto;
  overflow: hidden;
  /**/
}
html {
	font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

.fl {
	float: left;
}

.flimg img {
	float: left;
}
.fldiv {
	width: 960px;
}
.fldiv div {
	float: left;
}
.rblock {
	position: relative;
}
.ablock {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
.rblock img, .ablock img {
	display: block;
}
.pblock img {
    display: block;
	width: 100%;
}
.tx {
	width: 100%;
	position: absolute;
}
li {
	list-style: none;
}
img {
	border: 0;
	vertical-align: top;
}
a {
	color: #0099FF;
	outline: 0;
}
a:focus {
	outline: 0;
}

html {
	width: 100%;
    background-color: #fabe00;
	overflow-y: scroll;
}
body {
	width: 100%;
}
#wrapper {
	width: 100%;
	position: relative;
	overflow: hidden;
    /*
    background: url(../images/common/bg.png) center top repeat fixed;
    background-size: 5.625% auto;
    */
    background-color: #fff;
}
.wrapper {
	width: 100%;
}
.contents {
	position: relative;
	width: 960px;
	margin: 0 auto;
}


/* common */
#bg {
	position: relative;
    width: 100%;
}
#lovl {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 10000;
    background: #fabe00;
}
#loadimg {
    position: absolute;
    width: 56px;
    height: 56px;
    left: 50%;
    top: 50%;
    margin-left: -28px;
    margin-top: -28px;
    -webkit-animation: a_load_img 0.5s linear 0s infinite;	
    animation: a_load_img 0.5s linear 0s  infinite;	
}
@-webkit-keyframes a_load_img {
	0%   {-webkit-transform:rotate(0%);}
	100% {-webkit-transform:rotate(360deg);}
}
@keyframes a_load_img {
	0%   {transform:rotate(0%);}
	100% {transform:rotate(360deg);}
}
.ptop {
	position: fixed;
	right: 1em;
	bottom: 7em;
	text-align:right;
	display:block;
	z-index:100 !important;
}
.ptop img {
	width: 128px !important;
}

.ptop a:hover  {
    opacity: 0.7;
}
.cts { 
    margin: 0 auto;
    position: relative;
}
.nsl { position: absolute; width: 49.02%; left: 3.68%; top: 0; margin-top: 0; z-index:3; }

/* top  */
#topheader, #topbottom {
    position: relative;
}
#htx {
    background: url(../images/common/bg_s.png) center top repeat;
    background-size: 12.08% auto;
    border-bottom: 8px solid #fff;
}
#htx img {
    width: 53.05%;
}

#ns {
    position: absolute;
    z-index: 3;
    right: 0;
    top: 0;
    width: 10.55%;
}
#topheader1 {
    position: relative;
    background: url(../images/top/bg_th1.png) center top repeat;
    background-size: 4.44% auto;
}
#undefined {  top: 60.59%; }

#date { position: absolute;  width: 68.81%; left: 8.86%; top: 0; margin-top:52.43%; z-index: 3; }
#manual { position: absolute; width: 20.97%; left: 75.34%; top: 0; margin-top: 61.04%; z-index: 3;}

#manual a { display: block; }
#enq {
    margin-top: 15.06%;
    background-color: #CCEFFC;
    width: 100%;
    padding: 1.66% 0;
}
#enq a {
    display: block;
    width: 92.91%;
    margin: 0 auto;
}

#topheader2 {
    margin-top: 15.06%;
    position: relative;
    background-color: #ff40a3;
}
.cts #thmenu {
    padding-top: 14.86%;
    position: relative;
}
#thmenu li {
    position: absolute;
}
#m01 { width: 32.98%; left: 3.47%; top: 15.42%; }
#m02 { width: 23.26%; left: 37.08%; top: 15.42%; }
#m03 { width: 15.62%; left: 60.97%; top: 15.42%; }
#m04 { width: 19.3%; left: 77.15%; top: 15.42%; }

#spec {
    margin-top: -0.69%;
    position: relative;
    z-index: 2;
    background: url(../images/top/bg_spec.png) center top repeat-x;
    background-size: 84.16% auto;
}
#about {
    position: relative;
    margin-top: -5.13%;
}
#hab {
    position: relative;
    z-index: 2;
}
#abtx {
    position: relative;
    margin-top: -0.83%;
    background: url(../images/top/bg_ab.png) center top repeat;
    background-size: 2.36% auto;
}
#btn_abtx { position: relative; width: 60%; margin: 0 auto; }
#ab_p1 { position: absolute; width: 92.98%; left: 3.68%; top: 48.31%; }

.info {
    position: relative;
}
.bg_info {
    background: url(../images/top/bg_i.png) center center repeat;
    background-size: 18.26% auto;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0%;
    height: 100%;
}
.info h2 {
    position: absolute;
    z-index: 2;
}
#i1f .info {
    background: #ff7b8f;
}
#i1f .info h2 {
    width: 48.05%; left: -15.91%; top: -9.67%;
}
#i1_tx1 {
    position: absolute; width: 17.63%; left: 34.93%; top: -13.36%;
    z-index: 2;
}
#i1_tx2 {
    position: absolute; width: 43.75%; left: 54.3%; top: 0.87%;
    z-index: 2;
}
#i1_ss {
    position: absolute; width: 45.55%; left: 52.5%; top: 15.81%;
}
#i1_ss1 { position: absolute; width: 40.62%; left: 56.66%; top: 40.59%; }
#i1_ss2 { position: absolute; width: 37.29%; left: 51.18%; top: -6.16%; }

#i1_ss1 img {
    width: 97.02%;
    padding: 1.48%;
    background: #FF7B8F;
    -webkit-transform: rotate(3.7deg);
    transform: rotate(3.7deg);
}
#i1_ss2 img {
    width: 97.26%;
    padding: 1.36%;
    background: #FF7B8F;
    -webkit-transform: rotate(3.7deg);
    transform: rotate(3.7deg);
}
#i2f .info {
    background: #41FFB1;
}
#i2f .info h2 {
    width: 48.05%; left: -15.98%; top: -9.5%;
}
#i2_ss {
    position: absolute; width: 46.97%; left: 50.83%; top: 14.58%;
}
#i2_ss img {
    width: 97.62%;
    padding: 1.18%;
    background: #41FFB1;
    -webkit-transform: rotate(3.7deg);
    transform: rotate(3.7deg);
}

#i3f .info {
    background: #00E4FF;
}
#i3f .bg_info {
}
#i3f .info h2 {
    width: 55%; left: -15.91%; top: -9.28%;
}
#i3_ss1 {
    position: absolute; width: 35.62%; left: 40.41%; top: -4.97%; 
}
#i3_ss1 img {
    width: 96.88%;
    padding: 1.55%;
    background: #00E4FF;
    -webkit-transform: rotate(6deg);
    transform: rotate(6deg);
}
#i3_p1 { position: absolute; width: 36.59%; left: 63.4%; top: -21.53%; }
#i3_ss2 {
    position: absolute; width: 41.11%; left: 55.69%; top: 50.66%;
    z-index: 2;
}
#i3_ss2 img {
    width: 96%;
    padding: 2%;
    background: #00E4FF;
    -webkit-transform: rotate(6deg);
    transform: rotate(6deg);
}

#site {
    position: relative;
    background: url(../images/top/bg_site.png) center top repeat-x #FFBC1D;
    background-size: 100% auto;
}
#btn_site { position: absolute; width: 93.54%; left: 3.26%; top: 0; margin-top: 14.51%; }

#howtoplay {
    margin-top: 6.66%;
    margin-bottom: 6.38%;
}
.htp {
    position: relative;
}
.htp h3 {
    z-index: 3;
    width: 19.23%;
    position: absolute;
    left: 0;
    top: 0;
    margin-top: -2.77%;
}
.htp h4 {
    position: relative;
    z-index: 2;
}
#htp1 {
    position: relative;
}
.b_htp {
    position: relative;
    width: 92.84%;
    margin: 2.43% auto 4% auto;
}
#b_htp1_2 {
    margin-top: -1%;
    margin-bottom: 0%;
}
#htp2 {
    position: relative;
    margin-top: 4.43%;
}
#g2_p1 { position: absolute; width: 33.81%; right: 0; top: -13.45%; }
#g2_p2 { position: absolute; width: 28.68%; left: 70.62%; bottom: 0; }
.g2_ss { position: absolute;}
#g2_ss1 { width: 30.55%; left: 3.12%; top: 35.41%; }
#g2_ss2 { width: 30.55%; left: 34.3%; top: 35.41%; }
#g2_ss3 { width: 30.55%; left: 65.62%; top: 35.41%; }
#g2_ss4 { width: 30.55%; left: 3.12%; top: 51.26%; }
#g2_ss5 { width: 30.55%; left: 34.3%; top: 51.26%; }
#g2_ss6 { width: 37.84%; left: 60.55%; top: 48.64%; }
#g2_ss6i {
    padding:1.7%;
    background: #48AAF2;
    -webkit-transform: rotate(5.3deg);
    transform: rotate(5.3deg);
}

#htp3 {
    position: relative;
    margin-top: 7.01%;
    background: url(../images/top/g3_bg.png) center top repeat;
    background-size: 3.05% auto;
}
.g3_ss { position: absolute; padding: 1%; background: #236BFF; }
#g3_p1 { position: absolute; width: 45.55%; left: 0%; top: 23.59%; }
#g3_ss1 { width: 41.66%; left: 3.72%; top: 42.28%; }
#g3_ss2 { width: 32.5%; left: 61.84%; top: 23.57%; }
#g3_ss3 { width: 38.75%; left: 50.04%; top: 42.77%; }

#htp4 {
    position: relative;
    margin-top: 7.01%;
    background: url(../images/top/g4_bg.png) center top repeat;
    background-size: 5.2% auto;
}
.g4_ss { position: absolute; }
.g4_ssi {
    padding: 2.4%;
    background: #B7BEFF;
    -webkit-transform: rotate(7deg);
    transform: rotate(7deg);
}
#g4_ss1 { width: 42.34%; left: 7.43%; top: 18.83%; z-index: 2;}
#g4_ss2 { width: 47.36%; left: 48.54%; top: 16.18%; }
#g4_ss2 .g4_ssi { padding: 2.14%;}

#htp5 {
    position: relative;
    margin-top: 5.48%;
}
#htp6 {
    position: relative;
    margin-top: 7.01%;
}
#special {
    
}
#h_spc {
    position: relative;
    z-index: 2;
}
#spctx {
    position: relative;
    background: url(../images/top/bg_spc.png) center top repeat;
    background-size: 2.08% auto;
    margin-top: -6.31%;
}
#spctxi {
    position: relative;
    width: 94%;
    margin: -4% auto 0 auto; 
    padding-bottom: 2%;
    font-size: x-small;
    line-height: 1.4;
    color: #000;
    font-weight: bold;
    text-shadow: 1px 1px 1px 1px #fff;
}
#spctxi li {
    position: relative;
    text-indent: -1em;
    margin-left: 1em;
}
#spctxi a {
    color: #f00;
}
.spc_pf {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
}
#spc_p1 {
    position: absolute;
    width: 59.33%; left: 37.26%; top: 54.18%;
    z-index: 2;
}

.spc_p {
    position: absolute; width: 97%; left: 1.5%; top: 2%;
}
#spc_tx1 { position:absolute; width: 38.75%; left: 1.52%; top: 55.17%; z-index: 3;}
#topbottom {
}
.topb {
    position: relative;
    width: 94.30%;
    border-radius: 45px;
    background-color: #fff;
    box-shadow: 3px 3px 3px 3px rgba(181, 181, 182, 1);
    margin: 0 auto;
}
.topb_p {
    background: url(../images/top/bg_pv.png) center top repeat;
    background-size: 1.25% auto;
    margin-top: -5%;
    padding: 1% 0 4% 0;
}
.mvbtn {
    position: relative;
    width: 89.79%;
    margin: 6.59% auto 0 auto; 
}
.mvbtn .mv,.mvbtn span {
    position: absolute;
    display: block;
    width: 95.2%;
    left: 1.39%;
    top: 2.12%;
}
.mvbtn .mv:after {
    content: "";
    position:absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: url(../images/top/mvbtn.png) center center no-repeat;
    background-size: 35.65% auto;
}
.mvbtn .mv:hover:after {
    background-color: rgba(0,0,0,0.4);
}
.mvbtn span:after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: url(../images/top/mvend.png);
    background-position: center center;
    background-color: rgba(0,0,0,0.7);
    background-repeat: no-repeat;
    background-size: 80% auto;
}
#pv {
    position: relative;
    margin-top: -4.79%; 
}
#pv h2 {
    position: relative;
    width: 54.51%;
    margin: 0 auto 0;
    z-index: 2;
}
#cm {
    padding-top: 4.09%;   
}

#cm h2 {
    position: relative;
    width: 24.18%;
    margin: 0 auto 0;
    z-index: 2;
}

#twitter h2 {
    position: relative;
    width: 38.12%;
    margin: 0 auto 0;
    z-index: 2;
}
#twitter .topb {
    margin-top: -5%;
    padding-top: 50.32%;
}
#twf {
    position: absolute;
    left: 5%;
    top: 10%;
    width: 90%;
    height: 85%;
    overflow: hidden;
}
#twitterwidget {
    position: relative;
    max-width: 1200px !important;
    margin: 0 auto;
    height: 100%;
    min-height: 200px;
}
#twitterwidget iframe {
}
#btn_portal {
    padding: 4.6% 0;
}
#twitter {
    margin-top: 4.6%;
}
#snsset {
    margin: 0 auto;
    width: 216px;
    height: 64px;
    padding: 4% 0;
}
#snsset li {
    float: left;
    margin-right: 8px;
}
#snsset li img {
	width: 64px;
	height:64px;
	display: block;
}
#snsset a:hover { opacity: 0.7; }
#copyright {
    background: #000;
    padding: 2% 0;
    font-size: small;
    text-align: center;
    color: #fff;
}
.bn {
    margin: 2% auto 0 auto;
}
.bn ul {
    text-align: center;
}
.bn li {
    display: inline-block;
    width: 32.18%;
    max-width: 309px;
}
#footer {
    position: relative;
    width: 100%;
    overflow: hidden;
}
#btn_htp2_1 { position: absolute; width: 9.23%; left: 78.33%; top: 85.35%; }
#btn_htp2_1 a { display: block; -webkit-transition-duration: 0.1s; transition-duration: 0.1s;  }
#btn_htp2_1 a:hover { -webkit-transform: scale(1.2,1.2); transform: scale(1.2,1.2);  }
@media only screen and (min-width: 1440px) {
    #topheader, #topbottom {
        background-size: auto auto;
    }
    .topb_p {
        background-size: auto auto;
    }
}

@media screen and (max-width:767px) {
    /* common */
    .ptop img {
        width: 80px !important;
    }
    .topb {
        border-radius: 15px;
    }
    #ns {
        width: 13.5%;
    }
    #htx {
        
        border-bottom: 3px solid #fff;
    }
    #htx img {
        width: 80%;
    }
    #g1_bg:after {
        background: url(../images/top/g1_ssdotsp.png) center center repeat;
    }

    #snsset {
        position: relative;
        left: auto;
        top: auto;
        width: 80%;
        height: auto;
        margin: 0 auto;
    }
    #snsset li {
        margin: 0 2%;
        width: 29%;
    }
    #snsset li img {
        width: 100%;
        height:auto;
    }
    #copyright {
        font-size: x-small;
        font-size: 2vw;
    }
    .bn {
        margin-top: 5%;
    }
    .bn li {
        display: block;
        width: 96%;
        margin: 1% auto;
    }
}