@charset "UTF-8";
/*================================================
 *  一般・共通設定
 ================================================*/
body, html, main {
    /* important */
    height: 100%;
}
.cd-fixed-bg {
    min-height: 100%;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: top center;
}

html {
	width:100%;
	margin:0 auto;
	font-size: calc(1em * .625);
	color:#323232;
	font-family:"メイリオ", Meiryo, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", serif;
}
body {
	color: #000;
	font-size:16px;
	font-size:1.6rem;
	line-height:1.5;
	position: relative;
}

section {
	/*max-width: 1600px;
	max-width: 160rem;*/
	margin:0 auto;
	position: relative;
}
a {
	color:#c86432;
	text-decoration: none;
}
a:hover {
	color:#c86432;
	text-decoration: underline;
}
em {font-weight:bold;}

@media screen and (max-width:768px) {
	body {
		box-sizing:border-box;
		width:100%;
	}
	section {
		padding: 0 1rem;
	}
}


/*================================================
 *  グローバルナビゲーション
 ================================================*/
nav {
	padding:0;
	width: 100%;
	margin: 0 auto;
	vertical-align:center;
	position: absolute;
	top: 0;
	z-index: 3;
}
.name{
	position: absolute;
	top: 2rem;
	right: 21%;
	font-size: 85.7%;
	font-weight: 600;
}
#toggle {
	display: block;
	position: absolute;
	width: 20%;
	top: 1rem;
	right: 0rem;
}
#toggle img{
	max-width: 4.5rem;
	width: 100%;
}

@media screen and (max-width:768px) {
	#toggle {
		width: 10%;
		right: 0.5rem;
	}
}

#menu{
	display: none;
	position: absolute;
	top:5rem;
	right: 17%;
	width: 100%;
	border-left:none;
	border-right:none;
	z-index:1;
}
#menu.menu_contents_Box{
	width: 39.0625%;
	max-width: 30rem;
	overflow: hidden;
	margin: 0.5% 0 0;
}
#menu.menu_contents_Box:before{
	content:"";
	display:block;
	background: url(../resources/img/bg_pcnav_topbdr.png) no-repeat center bottom;
	background-size: 100%;
	overflow: hidden;
	padding-top: 12%;
}
#menu.menu_contents_Box:after{
	content: "";
	display: block;
	background: url(../resources/img/bg_pcnav_btmbdr.png) no-repeat center top;
	background-size: 100%;
	overflow: hidden;
	padding-bottom: 18.6666666%;
}
#menu li{
	display:block;
	background: url(../resources/img/bg_pcnav_mdlbdr.png) repeat-y  center center;
	background-size: 100%;
	width:100%;
	text-align: center;
	padding-bottom: 3%;
}
#menu li a{
	display: inline-block;
	width: 87.66666%;
}
#menu li a:hover{
	background-color: transparent; /* IE6 */
}
#menu li a:hover img {
	visibility: hidden;
}
#menu li a.mypage {
	background: url("../resources/img/btn_mypage_o.png") no-repeat 0 0;
	background-size: 100%;
}
#menu li a.logout {
	background: url("../resources/img/btn_logout_o.png") no-repeat 0 0;
	background-size: 100%;
}
#menu li a.history {
	background: url("../resources/img/btn_history_o.png") no-repeat 0 0;
	background-size: 100%;
}
#menu li a.contact {
	background: url("../resources/img/btn_contact_o.png") no-repeat 0 0;
	background-size: 100%;
}
#menu li a.laws {
	background: url("../resources/img/btn_laws_o.png") no-repeat 0 0;
	background-size: 100%;
}
#menu li a.faq {
	background: url("../resources/img/btn_faq_o.png") no-repeat 0 0;
	background-size: 100%;
}
#menu li a.terms {
	background: url("../resources/img/btn_terms_o.png") no-repeat 0 0;
	background-size: 100%;
}
#menu li a.privacypolicy {
	background: url("../resources/img/btn_privacypolicy_o.png") no-repeat 0 0;
	background-size: 100%;
}
#menu li a.about {
	background: url("../resources/img/btn_about_o.png") no-repeat 0 0;
	background-size: 100%;
}

@media screen and (max-width:768px) {
	#menu{
		right: 2%;
	}
	#menu.menu_contents_Box:before{
		background: url(../resources/img/bg_spnav_topbdr.png) no-repeat center bottom;
		padding-top: 6.14366729678%;
		background-size: 100%;
	}
	#menu.menu_contents_Box:after{
		background: url(../resources/img/bg_spnav_btmbdr.png) no-repeat center top;
		padding-bottom: 18.6666666%;
		background-size: 100%;
	}
	#menu li{
		background: url(../resources/img/bg_spnav_mdlbdr.png) repeat-y  center center;
		background-size: 100%;
	}
	#menu li a{
		width: 94.3289%;
	}
}

@media screen and (max-width:480px) {
	.name{
		top: 1rem;
	}
}


/*================================================
 *  header
 ================================================*/
header {
	position: relative;
}

header .logo_main{
	position: relative;
	max-width: 84rem;
	width: 52.55%;
	margin: 0 auto;
	padding-top: 3.5%;
	z-index:1;
}
@media screen and (max-width:480px) {
	header .logo_main{
		padding-top: 15%;
		width: 72.55%;
	}
}
header .logo_mainS{
	position: relative;
	max-width: 40.3rem;
	width: 19.85%;
	margin: 0 auto;
	padding-top: 5%;
	z-index:1;
}
@media screen and (max-width:480px) {
	header .logo_mainS{
		padding-top: 15%;
		width: 36.275%;
	}
}

/*================================================
 *  section
 ================================================*/
.mainchara{
	max-width: 36rem;
	width: 22.55%;
	position: absolute;
	left: 6%;
	margin-top: 0;
	z-index:0;
}
.mainchara02{
	max-width: 36rem;
	width: 22.55%;
	position: absolute;
	left: 6%;
	margin-top: -10%;
	z-index:0;
}
.maintenanceTxt {
	position: relative;
	max-width: 48.2rem;
	width: 33.125%;
	margin: 1% auto 0;
	font-size: 85%;
	color: red;
	background-color: #ffffc9;
	border-radius: .5rem;
	border: solid .4rem #513215;
	padding: 2rem;
	z-index:2;
}
.maintenanceTxt .hd,
.maintenanceTxt .txt{
	font-weight: 600;
}
.maintenanceTxt .hd{
	clear: left;
	float: left;
	width: 3rem;
}
.maintenanceTxt .txt{
	margin-left: 3rem;
}
@media screen and (max-width:480px) {
	.mainchara{
		margin-top: 13.6%;
	}
	.maintenanceTxt {
		font-size: 64.2857%;
		padding: 2%;
		width: 80%;
		margin: 15% auto;
	}
}
@media screen and (min-width:568px) and ( max-width:736px) {
	.maintenanceTxt {
		font-size: 64.2857%;
		padding: 2%;
		width: 80%;
		margin: 1% auto;
	}
}

.playBtn{
	max-width: 23.5rem;
	width: 14.6875%;
	margin: 3% auto;
}
.howto{
	max-width: 74.7rem;
	width: 46.6875%;
	margin: 3% auto;
}
.discription{
	margin: 0 auto;
	max-width: 108rem;
	width: 72.63%;
}

@media screen and (max-width:768px) {
	.playBtn{
		width: 20%;
		margin: 5% auto;
	}
	.howto{
		width: 70%;
		margin: 5% auto 0;
	}
	.discription{
		width: 100%;
	}
}

@media screen and (max-width:480px) {
	.playBtn{
		width: 30%;
		margin: 15% auto;
	}
	.howto{
		width: 100%;
		margin: 10% auto 0;
	}
	.discription{
		width: 100%;
	}
}

.contents_Box{
	max-width: 33.6rem;
	width: 31.17%;/*34.35185%*/
	float: left;
	overflow: hidden;
	padding-right: 3.24074074074%;
	margin: 1% 0;
}

.contents_Box:before{
	content:"";
	display:block;
	background: url(../resources/img/bg_topbdr.png) no-repeat center bottom;
	background-size: 100%;
	overflow: hidden;
	padding-top: 11.9047619047%;
}
.contents_Box:after{
	content: "";
	display: block;
	background: url(../resources/img/bg_btmbdr.png) no-repeat center top;
	background-size: 100%;
	overflow: hidden;
	padding-bottom: 17.8571428571%;
}
.contents_Box:last-child{
	padding-right:0;
}

@media screen and (max-width:768px) {
	.contents_Box{
		float: none;
		margin: 1% auto;
		padding-right: 0;
		width: 90%;
		font-size: 85.714285714%;
	}
}

.inner_Box{
	padding: 0 5%;
	background: url(../resources/img/bg_mdlbdr.png) repeat-y  center center;
	background-size: 100%;
	min-height: 2rem;
}
.inner_Box p{
	width: 79.37%;
	margin: 0 auto;
	color: #503214;
	font-weight: 600;
	max-width: 23.2rem;
}
.inner_Box p.img {
	border: solid .4rem #fff;
	border-radius: .4rem;
}
.detailedplayBtn{
	max-width: 48.1rem;
	width: 30.0625%;
	margin: 3% auto;
	float: none;
	overflow: hidden;
}

@media screen and (max-width:768px) {
	.detailedplayBtn{ width: 50%; }
}

@media screen and (max-width:480px) {
	.detailedplayBtn{ width: 70%; }
}

.adbnrArea{
	overflow: hidden;
	margin: 0 auto;
	max-width: 108rem;
	width: 72.63%;
}
.adbnrArea li{
	float: left;
	max-width: 30rem;
	width: 27.77777777%;
	margin: 3% auto;
	padding-right: 8.3333333333%;
}
.adbnrArea li:last-child{
	padding-right: 0;
}

@media screen and (max-width:768px) {
	.adbnrArea li{
		float: none;
		padding-right: 0;
		width: 90%;
	}
}

.action{ margin-bottom:5%; }
.action .contentsBox{
	max-width: 108rem;
	width: 67.5%;
	margin: 0 auto;
}
.action .contentsBox:before{
  content:"";
  display:block;
  background: url(../resources/img/bg_system_requirements.png) no-repeat;
  background-size: 100%;
  overflow: hidden;
  padding-top: 19.4444444444%;
}

.action .contentsBox:after{
  content:"";
  display:block;
  background: url(../resources/img/bg_actionBot.png) no-repeat;
  background-size: 100%;
  padding-bottom:8.7%;
}
.action .innerBox{
  padding:2% 0 3% 0;
  background: url(../resources/img/bg_actionBg.png) repeat-y 0 0;
  background-size: 100%;
}
.action dl{
	width: 87%;
	margin:0 auto;
}
.action dl dt{
	color: #0071bc;
	font-weight: 600;
	width:25%;
	display:inline-block;
	marign:0;
	padding:0;
	vertical-align:top;
}
.action dl dd{
	color: #503214;
	font-weight: 600;
	width:73%;
	display:inline-block;
	marign:0;
	padding:0;
	vertical-align:top;
}

@media screen and (max-width:768px) {
	.action{
		width: 100%;
		font-size: 85.714285714%;
		padding-top:10%;
	}
	.action .contentsBox{
		width: 100%;
	}
	.action dl{
		top: 55.5%;
	}
	.action dl dt{
		display:block;
		width:100%;
	}
	.action dl dd{
		display:block;
		width:100%;
	}
}

@media screen and (max-width:414px) {
	.action{ font-size: 57.142857142%; }
}

.topics{ margin-bottom:5%; }
.topics .contentsBox{
	max-width: 108rem;
	width: 67.5%;
	margin: 0 auto;
}
.topics .contentsBox:before{
  content:"";
  display:block;
  background: url(../resources/img/bg_topicsTopbdr.png) no-repeat;
  background-size: 100%;
  overflow: hidden;
  padding-top: 18.05555555%;
}
.topics .contentsBox:after{
  content:"";
  display:block;
  background: url(../resources/img/bg_topicsBtmbdr.png) no-repeat;
  background-size: 100%;
  padding-bottom:8.7%;
}
.topics .innerBox{
  padding:1.5% 5% 0;
  background: url(../resources/img/bg_topicsMdlbdr.png) repeat-y 0 0;
  background-size: 100%;
}
.topics dl{
	width: 100%;
	overflow: hidden;
}
.topics dl dt{
	color: #0071bc;
	font-weight: 600;
	clear: left;
	float: left;
	width: 16rem;
}
.topics dl dd{
	color: #503214;
	font-weight: 600;
	margin-left: 10rem;
}
.topics dl dd.new{
	color: #ff0000;
}
.topics dl dd.new::after{
	content:'NEW';
	background-color: #e4007f;
	border-radius: .2rem;
	color: #fff;
	font-weight: 600;
	padding: 0 0.5%;
	margin-left: 1rem;
}

@media screen and (max-width:768px) {
	.topics{
		width: 100%;
		font-size: 2vw;
		padding-top:10%;
	}
	.topics .contentsBox{ width: 100%; }
	.topics dl dt{ width: 32%; }
	.topics dl dd{ margin-left: 32%; }
}

@media screen and (max-width:414px) {
	.topics{ font-size: 2.3vw; }
}

footer {
	max-width: 51rem;
	width: 31.875%;
	margin: 0 auto;
	padding: 4% 0 9%;
	position: relative;
	text-align: center;
}

footer ul li {
	color: #503214;
	font-size: 1.5vw;
	font-weight: 900;
}

@media screen and (max-width:768px) {
	footer ul li { font-size: 2.3vw; }
}

/*================================================
 *  information
 ================================================*/
.infoInner{
	background: url("../resources/img/bg_info.png") no-repeat 0 top;
	max-width: 108rem;
	width: 100%;
	margin: 0 auto;
	padding:19% 0 0 0;
	background-size: 100%;
	position: relative;
}

/*================================================
 *  How to Play
 ================================================*/
.howtoplay{
	background: url("../resources/img/howtoplay/bg_howtoBot.png") no-repeat 0 bottom;
	max-width: 108rem;
	width: 67.5%;
	margin: 0 auto;
	padding:5% 0 4.947916666% 0;
	background-size: 100%;
	position: relative;
}
.howtoplayInner{
	background: url("../resources/img/howtoplay/bg_howtoTop.png") no-repeat 0 top;
	max-width: 108rem;
	width: 100%;
	margin: 0 auto;
	padding:19% 0 0 0;
	background-size: 100%;
	position: relative;
}
.howtoplayBg{
	background: url("../resources/img/howtoplay/bg_howtoBg.png") repeat-y 0 0;
	max-width: 108rem;
	width: 100%;
	margin: 0 auto;
	background-size: 100%;
	position: relative;
}
.howtoplayBg .linkBox{
	margin:0 auto;
	padding:2% 0;
	width:90%;
}
.howtoplayBg ul.linkList {
	display:inline-block;
	width:45%;
	vertical-align:top;
	padding:0 2.5%;
}
.howtoplayBg ul.linkList li{
	display:block;
	text-align:left;
	width:100%;
	padding:.2% 0;
}
.howtoplayBg ul.linkList li.indent2{
	padding-left:2rem;
	text-indent:-2rem;
	margin-left:0.5rem;
}
.howtoplayBg h2{
	width: 90%;
	margin: 0 auto;
	color:#e51f82;
	font-size:3rem;
	font-weight: 800;
}
.howtoplayBg h2.sub{
	width: 90%;
	margin: 0 auto;
	color:#e51f82;
	font-size:2.5rem;
	font-weight: 700;
}
.howtoplayBg h2.center{
	width: 90%;
	margin: 0 auto;
	color:#e51f82;
	font-size:2.5rem;
	font-weight: 700;
  text-align: center;
}
.howtoplayBg dl{
	width: 90%;
	margin: 0 auto;
	padding-bottom:3%;
}
.howtoplayBg dl.center{
  text-align: center;
}
.howtoplayBg dl dt{
	display:inline-block;
	width:26%;
	padding:0 1.5% 0 0.5%;
	margin:0;
	vertical-align:top;
}
.howtoplayBg dl dt img{
	max-width: 248px;
	border: solid .4rem #fff;
}
.howtoplayBg dl dd{
	display:inline-block;
	width:71%;
	padding:0 0.5%;
	margin:0;
	vertical-align:top;
	color:#503214;
	font-weight: 600;
}
.howtoplayBg dl dd.left{
  text-align: left;
}
.howtoplayBg dl dd.left p.right{
  text-align: right;
}

.howtoplayBg dl dd h3{
	font-size:1.8rem;
	font-weight: 600;
}
.howtoplayBg ul{
	width: 90%;
	margin: 0 auto;
	padding-bottom:3%;
}
.howtoplayBg ul li{
	display:inline-block;
	width: 32%;
	margin: 0 auto;
	vertical-align:top;
	color:#503214;
	font-weight: 600;
	padding:0 0.5%;
}
.howtoplayBg ul li p{
	text-align:center;
	padding:2%;
}
.howtoplayBg ul li img{
	max-width: 248px;
	margin: 0 auto;
	border: solid .4rem #fff;
}
.howtoplayBg ul li h3{
	font-size:1.8rem;
	font-weight: 600;
}
.backBtn{
	max-width: 48.1rem;
	width: 23.695%;
	margin: 3% auto;
}
@media screen and (max-width:768px) {
	.howtoplay{
		width: 100%;
	}
	.howtoplayBg h2{
		font-size: 3vw;
	}
	.howtoplayBg h2.sub{
		font-size: 2.6vw;
	}
  .howtoplayBg h2.center{
    font-size: 2.6vw;
    text-align: center;
  }
	.howtoplayBg dl dt{
		display:block;
		width:96%;
		max-width:248px;
		margin:0 auto;
		padding:2%;
		text-align:center;
	}
	.howtoplayBg dl dd{
		display:block;
		width:96%;
		margin:0 auto;
		font-size: 1rem;
	}
  .howtoplayBg dl dd p.right{
    text-align: right;
  }
	.howtoplayBg dl dd h3,
	.howtoplayBg ul li h3{
		font-size: 1.3rem;
	}
	.howtoplayBg ul li{
		display:block;
		width: 100%;
		margin: 0 auto;
		vertical-align:top;
		color:#503214;
		font-weight: 600;
		padding:1.5% 0.5%;
		font-size: 1rem;
	}
	.backBtn{
		max-width: 48.1rem;
		width: 60%;
	}
}
@media screen and (max-width:414px) {
	.howtoplayBg h2{
		font-size: 1.5rem;
	}
	.howtoplayBg h2.sub{
		font-size: 1.3rem;
	}
  .howtoplayBg h2.center{
		font-size: 1.3rem;
    text-align: center;
	}
	.howtoplayBg ul.linkList {
		display:block;
		width:100%;
		vertical-align:top;
	}
	.howtoplayBg dl dt{
		display:block;
		width:96%;
		margin:0 auto;
		padding:2%;
	}
	.howtoplayBg dl dd{
		display:block;
		width:96%;
		margin:0 auto;
	}
  .howtoplayBg dl dd p.right{
    text-align: right;
	}
}

/*================================================
  store
 ================================================*/
header.header{
	position: fixed;
	top: 0px;
	width: 100%;
	z-index: 2;
}
header .fixbar {
  width: 100%;
	height: 0;
	background-size: 56.25%;
	background-repeat: no-repeat;
	background-position: top center;
	background-image: url("../resources/img/store/bg_storeFx.png");
	margin: 0 auto;
	padding-top: 20.521%;
}

.store .bkBtn {
	position: absolute;
	max-width: 10.8rem;
	top: 14%;
	right: 25%;
	width: 5.67524960%;
}

.store .pointArea {
	position: relative;
	margin-top: -8%;
	max-width: 98rem;
	margin-left: auto;
	margin-right: auto;
	display: -webkit-flex;
  display: flex;
  width: 50.973%;
}
.store .pointArea li {
	flex-direction: row;
	width: 12.5%;
	margin-left: 12.5%;
}
.store .pointArea li:first-child {
	margin-left: 11%;
	margin-right: 1.5%;
	width: 12.5%;
}
.store .pointArea p {
	font-size: 1.3vw;
	font-weight: 900;
	text-shadow: 0 .2rem .1rem #000, 0 -.2rem .1rem #000, .2rem 0 .1rem #000, -.2rem 0rem .1rem #000;
	color: #fff;
	text-align: center;

}
.store .pointArea p:first-child {
	font-size: 2vw;
	line-height: 1.3;
}
/*  itemArea  */
.store .roll {
	height: 0;
	padding-top: 21.521%;
}
.store .item.contentsBox{
	max-width: 96rem;
	width: 50%;
	margin: 0 auto;
}
.store .item.contentsBox:before{
	content:"";
	display:block;
	background: url("../resources/img/store/bg_storeTopbdr.png") no-repeat 0 top;
	background-size: 100%;
	overflow: hidden;
	padding-top: 3.2291666%;
}
.store .item.contentsBox:after{
	content:"";
	display:block;
	background: url("../resources/img/store/bg_storeBtmbdr.png") no-repeat 0 bottom;
	background-size: 100%;
	padding-bottom: 3.9583333%;
}
.store .item .innerBox{
	padding: 2% 5%;
	background: url("../resources/img/store/bg_storeMdlbdr.png") repeat-y left center;
	background-size: 100%;
	position: relative;
}
.store .item .innerBox .ico{
	display: inline-block;
}
.store .item .innerBox .move{
	max-width: 38.7rem;
	width: 44.79166666%;
}
.store .item .innerBox .trash{
	max-width: 29.6rem;
	width: 34.259259%;
}
.store .item .innerBox .special{
	max-width: 40.3rem;
	width: 46.643518518%;
}
.store .item .innerBox .life{
	max-width: 30.4rem;
	width: 35.185185%;
}
.store .item .innerBox .userupgrade{
	max-width: 86.5rem;
	width: 100.11574%;
}

.store .item .innerBox .num{
	max-width: 4.2rem;
	width: 4.86111111%;
	display: inline-block;
}
.store .item .innerBox .ico img,
.store .item .innerBox .num img{
	vertical-align: top;
}
.store .item .innerBox .num.ajst img{
	padding-top: 8%;
}
.store .item .innerBox .discript {
	position: relative;
	top: -3rem;
	left: 17%;
	text-shadow: 0 .2rem .1rem #93027e, 0 -.2rem .1rem #93027e, .2rem 0 .1rem #93027e, -.2rem 0rem .1rem #93027e;
	font-size: 1.7vw;
	color: #fff;
	font-weight: 900;
	line-height: 1.2;
	width: 86%;
}
.store .item .innerBox .discript .sale {
	color: #FF16D0;
	text-shadow: 0 .1rem .1rem #840632, 0 -.1rem .1rem #fff, .1rem 0 .1rem #AC0E8C, -.1rem 0rem .1rem #FFB6F0;
	font-weight: 900;
	display: inline-block;
	padding-top: 3%;
}
.store .item .innerBox .te{
	width: 52.083335%;
	max-width: 45rem;
	margin-left: auto;
	overflow: hidden;
}
.store .item .innerBox .te li {
	display: inline-block;
	width: 52.444444%;
}
.store .item .innerBox .te li:last-child {
	width: 44.44444444%;
	margin-left: 1%;
}
.store .item .innerBox .te  li .money {
	max-width: 23.6rem;
	text-align: right;
	background: url("../resources/img/store/bk_price_base.png") no-repeat right center;
	background-size: 100%;
	padding: 5.085% 0;
}
.store .item .innerBox .te  li .money img {
	max-width: 3.2rem;
	width: 13.5593220338%;
}
.store .item .innerBox .te  li .money img:last-child {
	margin-right: 5%;
}
.store .item .innerBox .te  li a {
	display: block;
	max-width: 20rem;
	margin-right: 0;
	margin-left: auto;
}

@media screen and (max-width:768px) {
	header .fixbar {
		background-size: 100%;
		padding-top: 36.45833333%;
	}
	.store .bkBtn{
		width: 10%;
		right: 5%;
		top: 14%;
	}
	.store .pointArea {
		margin-top: -14%;
		width: 90%;
	}
	.store .pointArea p{
		font-size: 2.3vw;
		text-shadow: 0 .1rem 0rem #000, 0 -.1rem 0rem #000, .1rem 0 0rem #000, -.1rem 0rem 0rem #000;
	}
	.store .pointArea p:first-child{
		font-size: 4vw;
	}
	.store .item.contentsBox{
		width: 100%;
	}
	.store .item .innerBox .discript {
		font-size: 3.3vw;
		top: -2rem;
		text-shadow: 0 .1rem .1rem #93027e, 0 -.1rem .1rem #93027e, .1rem 0 .1rem #93027e, -.1rem 0rem .1rem #93027e;
	}
	.store .roll{ padding-top: 36.45833333%; }
}

@media screen and (max-width:414px) {
	.store .pointArea p:first-child{
		line-height: 1.2;
	}
	.store .item .innerBox .te li{
		width: 51.444444%;
	}
}

@media (max-width: 750px) and (orientation: landscape) {
	header.header{
		position: fixed;
		top: 0px;
		width: 100%;
		z-index: 2;
	}
	header .fixbar {
	  width: 100%;
		height: 0;
		background-size: 56.25%;
		background-repeat: no-repeat;
		background-position: top center;
		background-image: url("../resources/img/store/bg_storeFx.png");
		margin: 0 auto;
		padding-top: 20.521%;
	}

	.store .bkBtn {
		position: absolute;
		max-width: 10.8rem;
		top: 14%;
		right: 25%;
		width: 5.67524960%;
	}

	.store .pointArea {
		position: relative;
		margin-top: -8%;
		max-width: 98rem;
		margin-left: auto;
		margin-right: auto;
		display: -webkit-flex;
	  display: flex;
	  width: 50.973%;
	}
	.store .pointArea li {
		flex-direction: row;
		width: 12.5%;
		margin-left: 12.5%;
	}
	.store .pointArea li:first-child {
		margin-left: 11%;
		margin-right: 1.5%;
		width: 12.5%;
	}
	.store .pointArea p {
		font-size: 1.3vw;
		font-weight: 900;
		text-shadow: 0 .1rem 0rem #000, 0 -.1rem 0rem #000, .1rem 0 0rem #000, -.1rem 0rem 0rem #000;
		color: #fff;
		text-align: center;

	}
	.store .pointArea p:first-child {
		font-size: 2vw;
		line-height: 1.3;
	}
	/*  itemArea  */
	.store .roll {
		height: 0;
		padding-top: 21.521%;
	}
	.store .item.contentsBox{
		max-width: 96rem;
		width: 50%;
		margin: 0 auto;
	}
	.store .item.contentsBox:before{
		content:"";
		display:block;
		background: url("../resources/img/store/bg_storeTopbdr.png") no-repeat 0 top;
		background-size: 100%;
		overflow: hidden;
		padding-top: 3.2291666%;
	}
	.store .item.contentsBox:after{
		content:"";
		display:block;
		background: url("../resources/img/store/bg_storeBtmbdr.png") no-repeat 0 bottom;
		background-size: 100%;
		padding-bottom: 3.9583333%;
	}
	.store .item .innerBox{
		padding: 2% 5%;
		background: url("../resources/img/store/bg_storeMdlbdr.png") repeat-y left center;
		background-size: 100%;
		position: relative;
	}
	.store .item .innerBox .ico{
		display: inline-block;
	}
	.store .item .innerBox .move{
		max-width: 38.7rem;
		width: 44.79166666%;
	}
	.store .item .innerBox .trash{
		max-width: 29.6rem;
		width: 34.259259%;
	}
	.store .item .innerBox .special{
		max-width: 40.3rem;
		width: 46.643518518%;
	}
	.store .item .innerBox .life{
		max-width: 30.4rem;
		width: 35.185185%;
	}
	.store .item .innerBox .userupgrade{
		max-width: 86.5rem;
		width: 100.11574%;
	}

	.store .item .innerBox .num{
		max-width: 4.2rem;
		width: 4.86111111%;
		display: inline-block;
	}
	.store .item .innerBox .ico img,
	.store .item .innerBox .num img{
		vertical-align: top;
	}
	.store .item .innerBox .num.ajst img{
		padding-top: 8%;
	}
	.store .item .innerBox .discript {
		position: relative;
		left: 17%;
		text-shadow: 0 .1rem .1rem #93027e, 0 -.1rem .1rem #93027e, .1rem 0 .1rem #93027e, -.1rem 0rem .1rem #93027e;
		font-size: 1.7vw;
		color: #fff;
		font-weight: 900;
		line-height: 1.2;
		width: 86%;
	}
	.store .item .innerBox .te{
		width: 52.083335%;
		max-width: 45rem;
		margin-left: auto;
		overflow: hidden;
		margin-top: 0rem;
	}
	.store .item .innerBox .te li {
		display: inline-block;
		width: 52.444444%;
	}
	.store .item .innerBox .te li:last-child {
		width: 44.44444444%;
	}
	.store .item .innerBox .te  li .money {
		max-width: 23.6rem;
		text-align: right;
		background: url("../resources/img/store/bk_price_base.png") no-repeat right center;
		background-size: 100%;
		padding: 5.085% 0;
	}
	.store .item .innerBox .te  li .money img {
		max-width: 3.2rem;
		width: 13.5593220338%;
	}
	.store .item .innerBox .te  li .money img:last-child {
		margin-right: 5%;
	}
	.store .item .innerBox .te  li a {
		display: block;
		max-width: 20rem;
		margin-right: 0;
		margin-left: auto;
	}
}

/*  bitcash  */

.store.bitcash .fixbar.fixbarS {
	background-image: url("../resources/img/store/bg_storeFxS.png");
	padding-top: 11.71875%;
}
.store.bitcash .fixbar.fixbarS .bkBtn {
	top: 25%;
}
.store.bitcash .roll{
	padding-top: 12.71875%;
}
.store.bitcash .contentsBox{
	max-width: 81.6rem;
	width: 42.8799%;
	margin: 0 auto;
}
.store.bitcash .contentsBox:before{
  content:"";
  display:block;
  background: url(../resources/img/store/bg_bitTop.png) no-repeat;
  background-size: 100%;
  overflow: hidden;
  padding-top: 8.82352941176%;
}

.store.bitcash .contentsBox:after{
  content:"";
  display:block;
  background: url(../resources/img/store/bg_bitBtm.png) no-repeat;
  background-size: 100%;
  padding-bottom: 11.2745098039%;
}
.store.bitcash .innerBox{
  padding:0% 5%;
  background: url(../resources/img/store/bg_bitBg.png) repeat-y 0 0;
  background-size: 100%;
}
.store.bitcash .innerBox h1,
.store.bitcash .innerBox h2,
.store.bitcash .innerBox p {
	font-weight: 900;
	text-shadow: 0 .2rem .1rem #93027e, 0 -.2rem .1rem #93027e, .2rem 0 .1rem #93027e, -.2rem 0rem .1rem #93027e;
	color: #fff;
	width: 93.420%;
	max-width: 68rem;
	margin: 0 auto;
}
.store.bitcash .innerBox h1{
	font-size: 1.5vw;
	text-align: center;
	line-height: 2;
}
.store.bitcash .innerBox h1.thanks{
	font-size: 2vw;
	line-height: 2;
}
.store.bitcash .innerBox h2{
	font-size: 2vw;
	line-height: 2;
}
.store.bitcash .innerBox h3{
	font-size: 2vw;
	color: #231f20;
	font-weight: 900;
}
.store.bitcash .innerBox p{
	font-size: 1.5vw;
	padding-bottom: 3%;
}
.store.bitcash .innerBox h3 + p{
	color: #28b0d2;
	text-shadow: none;
	margin-left: 0;
	margin-right: auto;
	width: 55%;
	font-size: 1.2vw;
}
.store.bitcash .innerBox .payment{
	border-radius: 1rem;
	max-width: 68rem;
	width: 84.596%;
	margin: 0 auto;
	position: relative;
	background-color: #fff;
	padding: 3% 4%;
}
.store.bitcash .innerBox .payment .bitcash-img{
	max-width: 14.3rem;
	width: 23.5197368421%;
	margin-left: 0;
	margin-right: auto;
}
.store.bitcash .innerBox .payBtn {
	max-width: 20rem;
	width: 29.4117647058%;
	margin-right: 0;
	margin-left: auto;
	position: absolute;
	right: 6%;
	top: 24%;
}
.store.bitcash .innerBox .bkGameBtn {
	max-width: 48.1rem;
	width: 70.7352941176%;
	margin: 5% auto 0;
}
.store.bitcash .innerBox .bkGameBtn a{ display: block; }
.store.bitcash .innerBox .credit{
	background-color: #fff;
	border-radius: 1rem;
	width: 85%;
	max-width: 68rem;
	margin: 0 auto;
	position: relative;
	padding: 3% 4%;
	margin-top: 2%;
}
.store.bitcash .innerBox .credit ul {
	margin-left: 5%;
}
.store.bitcash .innerBox .credit ul li {
	text-align: center;
	display: inline-block;
	width: 20%;
}
.store.bitcash .innerBox .credit ul li img{
	max-width: 8.5rem;
	width: 71.6694772344%;
}

@media screen and (max-width:768px) {
	.store.bitcash .fixbar.fixbarS {
		padding-top: 20.8333333%;
	}
	.store.bitcash .roll{
		padding-top: 21.8333333%;
	}
	.store.bitcash .contentsBox{
		width: 100%;
	}
	.store.bitcash .innerBox h1 {
		font-size: 3vw;
	}
	.store.bitcash .innerBox h2{
		font-size: 4vw;
	}
	.store.bitcash .innerBox h1.thanks {
		font-size: 3.8vw;
	}
	.store.bitcash .innerBox h3{
		font-size: 3.8vw;
	}
	.store.bitcash .innerBox p{
		font-size: 3vw;
	}
	.store.bitcash .innerBox h3 + p{
		font-size: 2.5vw;
	}
}


@media (max-width: 750px) and (orientation: landscape) {
	.store.bitcash .fixbar.fixbarS {
		background-image: url("../resources/img/store/bg_storeFxS.png");
		padding-top: 11.71875%;
	}
	.store.bitcash .fixbar.fixbarS .bkBtn {
		top: 25%;
	}
	.store.bitcash .roll{
		padding-top: 12.71875%;
	}
	.store.bitcash .contentsBox{
		max-width: 81.6rem;
		width: 42.8799%;
		margin: 0 auto;
	}
	.store.bitcash .contentsBox:before{
	  content:"";
	  display:block;
	  background: url(../resources/img/store/bg_bitTop.png) no-repeat;
	  background-size: 100%;
	  overflow: hidden;
	  padding-top: 8.82352941176%;
	}

	.store.bitcash .contentsBox:after{
	  content:"";
	  display:block;
	  background: url(../resources/img/store/bg_bitBtm.png) no-repeat;
	  background-size: 100%;
	  padding-bottom: 11.2745098039%;
	}
	.store.bitcash .innerBox{
	  padding:0% 5%;
	  background: url(../resources/img/store/bg_bitBg.png) repeat-y 0 0;
	  background-size: 100%;
	}
	.store.bitcash .innerBox h1,
	.store.bitcash .innerBox h2,
	.store.bitcash .innerBox p {
		font-weight: 900;
		text-shadow: 0 .2rem .1rem #93027e, 0 -.2rem .1rem #93027e, .2rem 0 .1rem #93027e, -.2rem 0rem .1rem #93027e;
		color: #fff;
		width: 93.420%;
		max-width: 68rem;
		margin: 0 auto;
	}
	.store.bitcash .innerBox h1{
		font-size: 1.5vw;
		text-align: center;
		line-height: 2;
	}
	.store.bitcash .innerBox h1.thanks{
		font-size: 2vw;
		line-height: 2;
	}
	.store.bitcash .innerBox h2{
		font-size: 2vw;
		line-height: 2;
	}
	.store.bitcash .innerBox h3{
		font-size: 2vw;
		color: #231f20;
		font-weight: 900;
	}
	.store.bitcash .innerBox p{
		font-size: 1.5vw;
		padding-bottom: 3%;
	}
	.store.bitcash .innerBox h3 + p{
		color: #28b0d2;
		text-shadow: none;
		margin-left: 0;
		margin-right: auto;
		width: 55%;
		font-size: 1.2vw;
	}
	.store.bitcash .innerBox .payment{
		border-radius: 1rem;
		max-width: 68rem;
		width: 84.596%;
		margin: 0 auto;
		position: relative;
		background-color: #fff;
		padding: 3% 4%;
	}
	.store.bitcash .innerBox .payment .bitcash-img{
		max-width: 14.3rem;
		width: 23.5197368421%;
		margin-left: 0;
		margin-right: auto;
	}
	.store.bitcash .innerBox .payBtn {
		max-width: 20rem;
		width: 29.4117647058%;
		margin-right: 0;
		margin-left: auto;
		position: absolute;
		right: 6%;
		top: 24%;
	}
	.store.bitcash .innerBox .bkGameBtn {
		max-width: 48.1rem;
		width: 70.7352941176%;
		margin: 5% auto 0;
	}
	.store.bitcash .innerBox .credit{
		background-color: #fff;
		border-radius: 1rem;
		width: 85%;
		max-width: 68rem;
		margin: 0 auto;
		position: relative;
		padding: 3% 4%;
		margin-top: 2%;
	}
	.store.bitcash .innerBox .credit ul {
		margin-left: 5%;
	}
	.store.bitcash .innerBox .credit ul li {
		text-align: center;
		display: inline-block;
		width: 20%;
	}
	.store.bitcash .innerBox .credit ul li img{
		max-width: 8.5rem;
		width: 71.6694772344%;
	}
}
/*================================================
 *  login
 ================================================*/
.login.contentsBox{
	max-width: 108rem;
	width: 56.25%;
	margin: 0 auto;
}

@media screen and (max-width:768px) {
	.login.contentsBox{
		width: 100%;
	}
}

.login.contentsBox:before{
	content:"";
	display:block;
	background: url("../resources/img/login/bg_loginTopbdr.png") no-repeat 0 top;
	background-size: 100%;
	overflow: hidden;
	padding-top: 18.0555555%;
}
.login.contentsBox:after{
	content:"";
	display:block;
	background: url("../resources/img/login/bg_loginBtmbdr.png") no-repeat 0 bottom;
	background-size: 100%;
	padding-bottom: 7.87037%;
}
.login .innerBox{
	padding:0% 0%;
	background: url("../resources/img/login/bg_loginMdlbdr.png") repeat-y left center;
	background-size: 100%;
}
.login .innerBox h1{
	font-weight: 900;
	color: #e51f82;
	padding-bottom: 1.5%;
	font-size: 1.5vw;
}
.login .innerBox h2{
	font-size: 1vw;
	line-height: 1.4;
}

.login .innerBox h2,
.login .innerBox p{
	font-weight: 600;
	color: #503214;
}
.login .innerBox .img_character{
	max-width: 27.7rem;
	width: 29.212767%;
	position: absolute;
	top: 0;
	right: 1%;
}
.login .innerBox .contents {
	max-width: 94rem;
	margin: 0 7%;
	padding-top: 5%;
	position: relative;
}
.login .innerBox .btn {
	box-shadow: 0 0 0 .2rem #fff;
	color: #503214;
	margin:  0;
	font-weight: 900;
	border-radius: .5rem;
	width: auto;
	display: inline-block;
	text-align: center;
	padding: 1% 3%;
}
.login .innerBox  a.btn:hover {
	text-decoration: none;
}
.login .innerBox .btn.loginBtn {
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #c7dcff), color-stop(0.00, #fff));
	background: -webkit-linear-gradient(#fff, #c7dcff);
	background: -moz-linear-gradient(#fff, #c7dcff);
	background: -o-linear-gradient(#fff, #c7dcff);
	background: -ms-linear-gradient(#fff, #c7dcff);
	background: linear-gradient(#fff, #c7dcff);
	border: .3rem solid #4285f4;
	font-size: 1.5vw;
	margin-top: 2%;
	margin-bottom: 3%;
	width: 35%;
}
.login .innerBox .btn.entryBtn {
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #c7dcff), color-stop(0.00, #fff));
	background: -webkit-linear-gradient(#fff, #ffe0e6);
	background: -moz-linear-gradient(#fff, #ffe0e6);
	background: -o-linear-gradient(#fff, #ffe0e6);
	background: -ms-linear-gradient(#fff, #ffe0e6);
	background: linear-gradient(#fff, #ffe0e6);
	border: .3rem solid #ff0033;
	font-size: 1.5vw;
	margin-top: 2%;
	padding: 0 6%;
}
.login .innerBox .btn.entryBtn_off {
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #8faebd), color-stop(0.00, #d1e2e9));
	background: -webkit-linear-gradient(#8faebd, #d1e2e9);
	background: -moz-linear-gradient(#8faebd, #d1e2e9);
	background: -o-linear-gradient(#8faebd, #d1e2e9);
	background: -ms-linear-gradient(#8faebd, #d1e2e9);
	background: linear-gradient(#8faebd, #d1e2e9);
	border: .3rem solid #a1c1d8;
	font-size: 1.5vw;
	margin-top: 2%;
	color:#96afbb;
	padding: 0 6%;
}
.login .innerBox .btn.playbtn {
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #c6ffe7), color-stop(0.00, #fff));
	background: -webkit-linear-gradient(#fff, #c6ffe7);
	background: -moz-linear-gradient(#fff, #c6ffe7);
	background: -o-linear-gradient(#fff, #c6ffe7);
	background: -ms-linear-gradient(#fff, #c6ffe7);
	background: linear-gradient(#fff, #c6ffe7);
	border: .3rem solid #0ac868;
	font-size: 1.5vw;
	margin-top: 2%;
	width: 35%;
}
.login .innerBox .btn.loginBtn span,
.login .innerBox .btn.entryBtn span,
.login .innerBox .btn.entryBtn_off span,
.login .innerBox .btn.playbtn span {
	font-size: 1.2vw;
}
.login .innerBox .star,
.about .aboutInner .star {
		font-size: 1.5vw;
		color: #238492;
		text-align: center;
		margin-top: 2%;
		margin-bottom: 2%;
}
.login .innerBox .playBtn.large {
	margin-bottom: 0;
	width: 24.479166666%;
	max-width: 23.5rem;
}
.login .innerBox .advice {
	border-radius: .3rem;
	border: solid .4rem #fff;
	background-color: #fff799;
	font-size: 0.8vw;
	margin-top: 2%;
	margin-bottom: 2%;
}
.login .innerBox .advice ol,
.login .innerBox .advice ul {
	list-style: none;
	padding: 2%;
}
.login .innerBox .advice ol li {
	text-indent: -1.0rem;
	margin-left: 1.0rem;
	font-weight: 900;
	color: #503214;
}
.login .innerBox .advice ol li ul {
		padding-bottom: 0%;
}
.login .innerBox .advice + p {
	font-size: 0.8vw;
}

@media screen and (max-width:768px) {
	.login .innerBox .img_character{
			display: none;
	}
	.login .innerBox h1,
	.login .innerBox .star,
	.about .aboutInner .star{
		font-size: 3vw;
	}
	.login .innerBox h2 {
		font-size: 1rem;
	}
	.login .innerBox p{
		font-size: 1rem;
	}
	.login .innerBox .btn.loginBtn,
	.login .innerBox .btn.playbtn{
		font-size: 3.5vw;
	}
	.login .innerBox .btn.entryBtn,
	.login .innerBox .btn.entryBtn_off{
		font-size: 2.6vw;
	}
	.login .innerBox .playBtn.large {
		width: 36.5474339035%;
		margin-top: 5%;
	}
	.login .innerBox .btn.loginBtn span,
	.login .innerBox .btn.entryBtn span,
	.login .innerBox .btn.entryBtn_off span,
	.login .innerBox .btn.playbtn span {
		font-size: 2.2vw;
	}
}

@media screen and (max-width:414px) {
	.login .innerBox h1 {
		font-size: 1.5rem;
	}
	.login .innerBox .btn.loginBtn,
	.login .innerBox .btn.playbtn{
			font-size: 4.5vw;
			width: 45%;
	}
	.login .innerBox .btn.entryBtn{
			font-size: 3.6vw;
	}
	.login .innerBox .btn.loginBtn span,
	.login .innerBox .btn.entryBtn span,
	.login .innerBox .btn.entryBtn_off span,
	.login .innerBox .btn.playbtn span {
		font-size: 3.2vw;
	}
}

/*================================================
 *  about
 ================================================*/
.about {
	text-align: center;
	color:#503214;
}
.about .aboutInner{
	background: url("../resources/img/howtoplay/bg_aboutTop.png") no-repeat 0 top;
	background-size: 100%;
}
.about .aboutInner .logo_mainSS{
	width: 20%;
	margin: 0 auto;
}
.about h3,
.about p {
	width: 90%;
	margin: 0 auto;
}
.about h3 {
	font-size:1.8rem;
	font-weight: 600;
}
.about p { font-weight: 600; }
.about h2,
.about .aj{ padding-top: 3%; }
.about .pt0{ padding-top: 0; }
.about h2:first-child{ padding-top: 0%; }
.about .discript {
	text-align: left;
	width: 70%;
	margin: 0 auto;
}

@media screen and (max-width:768px) {
	.about p{ font-size: 1rem; }
	.about h3 { font-size: 1.3rem; }
	.about .discript { width: 90% }
}
/*================================================
 *  Minors Notes
 ================================================*/
.minor{ margin-bottom:5%; }
.minor .contentsBox{
	width: 67.5%;
  max-width: 65.6rem;
  margin: 0 auto;
}
.minor .contentsBox:before{
  content:"";
  display:block;
  background: url(../resources/img/bg_al_top.png) no-repeat;
  background-size: 100%;
  overflow: hidden;
  padding-top: -webki-calc(40 / 656 * 100%) ;
  padding-top: calc(40 / 656 * 100%);

}

.minor .contentsBox:after{
  content:"";
  display:block;
  background: url(../resources/img/bg_al_btm.png) no-repeat;
  background-size: 100%;
  padding-bottom: -webki-calc(60 / 656 * 100%) ;
  padding-bottom: calc(60 / 656 * 100%);
}
.minor .innerBox{
  padding:2% 0 3% 0;
  background: url(../resources/img/bg_al_mdl.png) repeat-y 0 0;
  background-size: 100%;
}
.minor h1{
	color: #503214;
	font-weight: 600;
  text-align: center;
  padding-bottom: 2%;
}
.minor p{
	color: #503214;
  font-size: 1.4rem;
	font-weight: 600;
  width: 87%;
	margin:0 auto;
	padding:0;
	vertical-align:top;
}

@media screen and (max-width:768px) {
	.minor{
		width: 100%;
		font-size: 85.714285714%;
		padding-top:10%;
	}
	.minor .contentsBox{
		width: 100%;
	}
}

@media screen and (max-width:414px) {
  .minor {
    padding-top:0%;
  }
  .minor h1, .minor p{
    font-size: 57.142857142%;
  }
}