@charset "UTF-8";
/* CSS Document */

@font-face {
  font-family: "pixelMplus";
  src: 
	  url('font/pixelMplus.eot'),
	  url('font/pixelMplus.eot?#iefix') format('embedded-opentype'),
	   url("font/pixelMplus.woff2") format('woff2'),
       url("font/pixelMplus.woff") format('woff');
}

@font-face {
  font-family: "zpix";
  src: 
	  url('font/zpix.eot'),
	  url('font/zpix.eot?#iefix') format('embedded-opentype'),
	   url("font/zpix.woff2") format('woff2'),
       url("font/zpix.woff") format('woff');
}

ul,li{list-style: none; padding: 0; margin: 0;}

html,body{width: 100%; height: 100%;}
body{margin: 0; font-family: "zpix","pixelMplus";
	line-height: 1.8;
-ms-font-feature-settings: "normal";}

.abs{position: absolute; display: block;}
.rel{position: relative; display: block;}

.clearBlock:after{
content:"";
display:block;
clear:both;
}

#gameArea{position: relative; display: block; margin: auto; overflow: hidden; width: 100%; height: 100%;}

#opPage{position: fixed; width: 100%; height: 100%; z-index: 9; top: 0; left: 0; display: block;
background:url(../images/opBg.png) no-repeat 90% center; background-size: cover;}
.oplogo{position: relative; display: block; width: 90%; max-width: 908px; margin: 70px auto 7%;
animation-duration: 1.2s;
animation-fill-mode: both;
animation-name: zoomIn;
	z-index: 1;
}

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale3d(2.3, 2.3, 2.3);
  }

  50% {
    opacity: 1;
  }
}



@media screen and (max-height:895px){
	.oplogo{width: 60%; margin: 60px auto 5%; max-width: 706px;}
}

@media screen and (max-height:770px){
	.oplogo{width: 50%; margin: 55px auto 2%;}
}

.opSelectBg{width: 480px; margin: 0 auto;}
.characterList{width: 280px; height: 140px; padding-top: 30px; margin: auto; top: 0; left: 0; bottom: 0; right: 0; display: none;}
.characterList li{width: 88px; height: 140px; float: right; cursor: pointer;}
.characterList li:first-child{float: left;}
.characterList li.on{background:url(../images/selectBar.png) no-repeat center bottom; background-size: 100% auto;}

.loading{margin: auto; top: 0; left: 0; bottom: 0; right: 0; display: block; width: 48px; height: 58px; font-size: 12px; text-align: center; color: #ffffff;}
.selectListBlock{display: none;}

.continueList{width: 140px; height: 90px; padding-top: 40px; margin: auto; top: 0; left: 0; bottom: 0; right: 0; color: #ffffff; font-size: 20px; text-align: center; display: none;}
.continueList.clearGame{width: 170px; height: 140px; padding-top: 50px;}
.continueList li{width: 110px; height: 23px; padding-left: 30px; cursor: pointer; margin-bottom: 30px; letter-spacing: 0.07em;}
.continueList li.on{background:url(../images/triangle.png) no-repeat left center;}
.continueList li:nth-child(3){display: none;}
.continueList.clearGame li{width: 140px;}
.continueList.clearGame li:nth-child(3){display: block;}

.endingBtn{width: 210px; height: auto; padding-top: 20px; margin: auto; top: 0; left: 0; bottom: 0; right: 0; color: #ffffff; font-size: 18px; text-align: center; display: block;}
.endingBtn li{width: 210px; height: auto; padding-left: 30px; cursor: pointer; margin-bottom: 12px; letter-spacing: 0.07em; box-sizing: border-box;}
.endingBtn li.on{background:url(../images/triangle.png) no-repeat left center; background-size: 8px auto;}
.endingBtn li a{color: #ffffff; text-decoration: none;}
.endingBtn li.on a{color: #ffff00;}

@media screen and (max-width:710px){
	.opSelectBg{width: 300px;}
	.characterList{width: 140px; height: 70px;}
	.characterList li{width: 44px; height: 70px;}
	
	
	.continueList{padding-top: 50px; font-size: 14px; width: 120px;}
	.continueList.clearGame{padding-top: 80px;}
	.continueList li{height: 14px; padding-left: 15px; width: 105px; margin-bottom: 23px;}
	.continueList li.on{background-size: auto 100%;}
	
	.oplogo{margin: 60px auto 7%;}
	#opPage{background:url(../images/opBgSp.png) no-repeat center bottom; background-size:cover;}
}


.endingLogo{margin-bottom: 15px;}
.endingLb{width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: rgba(0,0,0,0.9); z-index: 999; display: none;}
#endingBlock{width: 96%; height: 570px; max-width: 700px;
color: #ffffff;
text-align: center; line-height: 1.6;
padding: 30px 40px;
z-index: 999;
background-color: #000000;
border: solid 6px #ffffff;
box-sizing: border-box;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
box-shadow: 0 0 0 3px #000000;
-webkit-box-shadow: 0 0 0 3px #000000;
-moz-box-shadow: 0 0 0 3px #000000;
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
display: none;
font-size: 18px; font-weight: bold;
margin: auto;
}

@media screen and (max-width:710px){
	#endingBlock{
		padding: 15px; font-size: 14px;
		height: 500px;
	}
}

@media screen and (max-width:320px){
	#endingBlock{
		padding: 15px 0; font-size: 13px;
		height: 500px;
	}
}

.levelUp{top: 25%; left: 0; right: 0; margin: auto; display: none;}


.enterText{
color: #ffffff;
text-align: left; line-height: 1.6;
padding: 30px 40px;
z-index: 999;
background-color: #000000;
border: solid 6px #ffffff;
width: 276px;
height: auto;
box-sizing: border-box;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
box-shadow: 0 0 0 3px #000000;
-webkit-box-shadow: 0 0 0 3px #000000;
-moz-box-shadow: 0 0 0 3px #000000;
position: absolute;
top: 40px;
left: 40px;
display: none;
font-size: 18px; font-weight: bold;
}

.textBlock{
color: #ffffff;
text-align: left; line-height: 1.6;
padding: 30px;
z-index: 999;
background-color: #000000;
border: solid 6px #ffffff;
width: 600px;
height: auto;
box-sizing: border-box;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
box-shadow: 0 0 0 3px #000000;
-webkit-box-shadow: 0 0 0 3px #000000;
-moz-box-shadow: 0 0 0 3px #000000;
position: absolute;
bottom: 20px;
left: 40px;
display: none;
font-size: 18px;
}

.textBlock .zpix{
	font-size: 110%;
}

@media screen and (max-width:710px){
	.levelUp{width: 254px;}
	
	.textBlock{width: 100%; bottom: 0; left: 0; border-bottom: none; font-size: 14px; border-radius: 0; border-right: none; border-left: none;
	padding: 15px 15px;}
}

.lb, .modalBg, .howtoLb{position: fixed; width: 100%; height: 100%; z-index: 999; top: 0; left: 0; display: none;}
.modalBg{background: rgba(0,0,0,0.7);}
.modal{width: 300px; height: 170px; top: 0; left: 0; right: 0; bottom: 0; margin: auto; position: fixed; z-index: 999; background: url(../images/youtubeBg.png) no-repeat;
background-size: cover; color: #ffffff; text-align: center; box-sizing: border-box; padding: 50px 18px 0; font-size: 18px; display: none;}

.modalBtns{width: 280px; margin-top: 25px;}
.modalBtns li{display: inline-block; padding-left: 20px; margin: 0 20px; cursor: pointer;}
.modalBtns li.on{background: url(../images/triangle.png) no-repeat left center;}

.lbInner{position: fixed; width: 96%; height: auto; left: 0; right: 0; top: 20%; z-index: 999; max-width: 634px; margin: 0 auto; display: none; box-sizing: border-box;
background: url(../images/youtubeBg.png) no-repeat; background-size: 100% 100%; padding: 10px;}

@media screen and (max-height:895px){
	.lbInner{width: 90%; top: 15%;}
}

@media screen and (max-height:770px){
	.lbInner{width: 90%; top: 9%;}
}

.css-cancel,
.closeBtn{background: url(../images/btnClose.png) no-repeat; width: 54px; height: 54px; position: absolute; display: block;
top: -27px; right: -27px;}

.btnHowTo{border: 2px solid #000000; width: 200px; height:80px; top: 20px; left: 20px; border-radius: 10px; color: #ffffff; background: #000000; font-size: 18px;}
.btnHowTo .inner{border: 4px solid #ffffff; width: 100%; height: 100%; border-radius: 8px; box-sizing: border-box; background: #ffffff;}
.btnHowTo .inner span{width: 100%; height: 100%; box-sizing: border-box; background: #000000; border-radius: 6px; line-height: 72px; padding-left: 25px;}
.btnHowTo .inner span img{display: inline-block; vertical-align: middle; margin-right: 10px;}

.howtoLb{display: none; background: rgba(0,0,0,0.7);}
.howtoBlock{color: #ffffff;
text-align: center; line-height: 1.6;
padding: 30px 0 70px;
z-index: 999;
margin: auto;
background-color: #000000;
border: solid 6px #ffffff;
width: 700px;
height: 530px;
box-sizing: border-box;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
box-shadow: 0 0 0 3px #000000;
-webkit-box-shadow: 0 0 0 3px #000000;
-moz-box-shadow: 0 0 0 3px #000000;
position: fixed;
top: 10%;
left: 0; right: 0;
display: none;
}

.howtoBlock ul.inner li{display: none; font-size: 18px;}
.howtoBlock ul.inner li:first-child{display: block;}
.btnRight, .btnLeft{top: 50%; margin-top: -12px;}
.btnRight{right: 30px;}
.btnLeft{left: 30px; display: none;}

.howtoBlock .inner li span{display: block;}

@media screen and (max-width:710px){
	.css-cancel{width: 27px; height: 27px; top: -8px; right: -8px; background-size: cover;}
	.closeBtn{width: 27px; height: 27px; top: -10px; right: -10px; background-size: cover;}
	
	.btnHowTo{width: 130px; height:42px; top: 10px; left: 10px; font-size:12px;}
	.btnHowTo .inner span{line-height: 34px; padding-left: 15px;}
	.btnHowTo .inner span img{width: 7px; height: auto;}
	
	.howtoBlock{width: 90%; padding: 10%; height: auto;}
	.howtoBlock ul.inner img{width: 100%;}
	.howtoBlock ul.inner li{font-size: 14px;}
	.btnRight{right: 10px;}
	.btnLeft{left: 10px;}
	.howtoBlock .inner li span{display: inline-block; width: 10px;}
}

.movieLb {
	clear: both;
  position: relative;
  width: 100%;
  padding-top: 56.25%;
	max-width: 590px;
	margin: 5px auto;
}
.movieLb iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}