@charset "UTF-8";
body {
	font-family: Avenir, "Open Sans", "Helvetica Neue", Helvetica, Arial, Verdana, Roboto, sans-serif;
	text-align: left;
	text-decoration: none;
	background-color: #000;
}


/*WRAPEER
------------------------------ */

#wrapper {
	width: 100%;
	overflow-x: hidden;
	overflow-y: hidden;
	background-color: rgba(0, 0, 0, 0.7);
}


/*CONTENTS INNER
------------------------------ */

.contentsInner {
	position: relative;
	width: 1080px;
	margin-left: auto;
	margin-right: auto;
}

@media screen and (min-width:320px) and ( max-width:768px) {
	.contentsInner {
		position: relative;
		padding: 0 30px 0 30px;
		text-align: justify;
		width: 100%;
		margin-left: auto;
		margin-right: auto;
	}
}

.alpha a:hover img {
	opacity: 0.9;
	filter: alpha(opacity=90);
	-ms-filter: "alpha(opacity=90)";
}

.pageTop {
	position: fixed;
	margin-bottom: 5px;
	right: 30px;
	z-index: 9500;
	cursor: pointer;
}

@media screen and (min-width:320px) and ( max-width:768px) {
	.pageTop {
		position: fixed;
		margin-bottom: 5px;
		right: 30px;
		z-index: 9500;
		cursor: pointer;
	}
}


/*CLEAR FIX
------------------------------ */

.clearFix:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}

.clearFix {
	min-height: 1px;
}

snkentbnr * html .clearFix {
	height: 1px;
	/*¥*/
	/*/
  height: auto;
  overflow: hidden;
  /**/
}

.wdt100 {
	width: 100%;
}

@media screen and (min-width:320px) and ( max-width:768px) {
	.rsPsv {
		width: 100%;
	}
}


/*FADE LOADER
------------------------------ */

#fade {
	background-color: #000;
	z-index: 10000;
	background-image: url(../img/loadingback.jpg);
	background-repeat: no-repeat;
	background-position: center center; 
	background-attachment: fixed; 
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	position: fixed;
	display: none;
}
@media screen and (min-width:320px) and ( max-width:1200px) {
#fade {
	background-color: #000;
	z-index: 10000;
	background-image: none;
	display: none;
}
}

a:link {
	color: #000;
	text-decoration: none;
}

a:visited {
	color: #000;
	text-decoration: none;
}

a:hover {
	color: #fff;
	text-decoration: none;
}


/* YOUTUBE
------------------------------ */

.youtubewrapdlc {
	position: relative;
	margin-top: 70px;
	width: 100%;
	padding-top: 56.25%;
	z-index: 6500;
}

.youtubewrapdlc iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100% !important;
	height: 100% !important;
}

.youtubewrap {
	position: relative;
	margin-top: 80px;
	margin-right: auto;
	margin-left: auto;
	width: 500px;
	height: auto;
	margin-bottom: 0px;
}

@media screen and (min-width:320px) and ( max-width:768px) {
	.youtubewrapdlc {
		position: relative;
		margin-top: 40px;
		width: 100%;
		padding-top: 56.25%;
		z-index: 6500;
	}
	.youtubewrap {
		margin-top: 40px;
		margin-right: auto;
		margin-left: auto;
		width: 100%;
		margin-bottom: 50px;
	}
}


/*MAIN CONTENTS
------------------------------ */

header {
	position: relative;
	width: 100%;
	z-index: 6000;
	height: 35px;
}

.snklogo {
	position: absolute;
	right: 0;
	z-index: 100;
}

#mainContA {
	position: relative;
	margin-top: -35px;
	background-image: url(../img/topbackb.png);
	background-repeat: no-repeat;
	background-position: center top;
	height: auto;
	min-height: 950px;
	padding-bottom: 0;
}

.spheader {
	position: relative;
	margin-top: 0;
	width: 100%;
}

@media screen and (min-width:320px) and ( max-width:768px) {
	header {
		position: relative;
		width: 100%;
		z-index: 6000;
		height: 25px;
		background-color: #000;
	}
	.snklogo {
		position: absolute;
		margin-top: 20px;
		width: 120px;
		left: 10px;
		z-index: 100;
	}
	#mainContA {
		position: relative;
		margin-top: 0px;
		background-image: none;
		height: auto;
		padding-bottom: 45px;
	}
}

.flogo {
	margin-top: 80px;
	position: relative;
	text-align: center;
	z-index: 6000;
}

@media screen and (min-width:320px) and ( max-width:768px) {
	.flogo {
		margin-top: 50px;
		position: relative;
		text-align: center;
		z-index: 6000;
	}
}

.topNavi {
	position: absolute;
	margin-top: 10px;
	left: 125px;
	z-index: 150;
}

.topNavi li {
	float: left;
	margin-right: 10px;
}

.snkLogo {
	position: absolute;
	margin-top: 0px;
	left: 0px;
	z-index: 180;
}

@media screen and (min-width:320px) and ( max-width:768px) {
	.topNavi {
		position: absolute;
		margin-top: 2px;
		margin-left: 10px;
		right: 10px;
		z-index: 150;
	}
	.topNavi li {
		float: right;
		width: 50px;
		text-align: center;
		margin-right: -5px;
	}
	.topNavi li:nth-child(6n) {
		margin-left: 5px;
		width: 30px;
	}
	.topNavi li:nth-child(7n) {
		width: 20px;
	}
	.snkLogo {
		position: absolute;
		margin-top: -10px;
		left: 20px;
		z-index: 160;
		width: 70px;
	}
}

.snsList {
	position: absolute;
	margin-top: 10px;
	right: 0;
}

.snsList li {
	float: right;
	margin-left: 10px;
}

.fsnsList {
	position: relative;
	margin-top: 20px;
	margin-bottom: 20px;
	width: 120px;
	text-align: center;
}

.fsnsList li {
	float: left;
	margin-left: 10px;
}

.youtube {
	position: relative;
	margin-top: 85px;
	margin-left: 20px;
	width: 531px;
	height: 300px;
	border: solid 1px #8C6239;
}

.titlogo {
	text-align: center;
}

.fttl {
	position: absolute;
	margin: 350px 0 0 840px;
}

.maincopy {
	text-align: center;
	margin-left: -10px;
}

#arrow .slick-next:before {
	content: ""
}

#arrow .slick-after:before {
	content: ""
}

.csslide {
	position: relative;
	margin-top: 20px;
	width: 1085px;
	margin-left: -3px;
}

.csslide li img {
	border: 1px solid #8C6239;
}

.topTxt1 {
	margin-top: 20px;
	text-align: center;
	margin-left: 0px;
}

.topTxt2 {
	margin-top: 20px;
	text-align: center;
	margin-left: 0px;
}

@media screen and (min-width:320px) and ( max-width:768px) {
	.topTxt1 {
		text-align: center;
		margin-left: 0px;
		width: 100%;
	}
	.topTxt2 {
		text-align: center;
		margin-left: 0px;
		width: 100%;
	}
}

.newcharacters {
	margin-top: 50px;
	margin-right: -25px;
	margin-left: -8px;
}

.newcharacters li {
	float: left;
	border: solid 1px #8C6239;
	margin-right: 6px;
	margin-left: 9px;
}

#topvideo {
	width: 100%;
}

.movietop {
	position: absolute;
	margin: 86px 0 0 63px;
	z-index: 1000;
}

.youtubebnrwrap {
	position: relative;
}

.steamtag {
	position: fixed;
	right: 0;
	top: 85px;
	z-index: 10000;
}

.copyrightsTxt {
	margin-top: 15px;
	color: #b3b3b3;
	text-align: center;
}

#gFooter {
	padding-bottom: 50px;
}

#mainContB {
	margin-top: 0px;
}

.mcbwrap {
	position: relative;
	margin-top: -15px;
	border: solid 1px #8C6239;
	height: auto;
	padding: 30px 30px 40px 30px;
	margin-bottom: 60px;
	background-color: rgba(0, 0, 0, 0.5);
}

.dxpkg {
	position: relative;
	margin-right: 50px;
	margin-bottom: 20px;
}

.pkgimg {
	position: relative;
	margin-left: 47px;
	border: solid 1px #8C6239;
	width: 310px;
}

.recomen {
	position: relative;
	text-align: center;
}

.topTxt3 {
	position: relative;
	padding-left: 1em;
	text-indent: -1em;
	width: 100%;
	text-align: justify;
	word-break: break-all;
	margin-top: -10px;
	margin-left: 0;
	font-size: 9pt;
	color: #fff;
	line-height: 1.6em;
	z-index: 4000;
}

.topTxt3 br {
	display: block;
}

.topTxt4 {
	position: relative;
	margin-top: -10px;
	padding-left: 1em;
	text-indent: -1em;
	font-size: 11pt;
	color: #fff;
	line-height: 1.6em;
}

.topTxt3 li {
	margin-bottom: 10px;
}

.leftBox {
	position: relative;
	float: left;
	width: 65%;
}

.rightBox {
	position: relative;
	float: right;
	width: 35%;
}

.campaignbnr {
	position: relative;
	margin-top: 10px;
	margin-left: 47px;
}

.buybtn {
	background-color: red;
	text-align: center;
	color: #000;
	font-size: 16pt;
	font-weight: 600;
	width: 306px;
	margin-top: 26px;
	margin-left: 47px;
}

.buybtn a {
	display: block;
	width: 100%;
	height: 100%;
	padding: 15px;
}

.buybtn2 {
	position: absolute;
	background-color: red;
	text-align: center;
	color: #000;
	font-size: 16pt;
	font-weight: 600;
	width: 310px;
	margin-top: 10px;
	right:25px;
	
}

.buybtn2 a {
	display: block;
	width: 100%;
	height: 100%;
	padding:15px;
}

.include {
	position: relative;
}

.campaignbnrsteam {
	position: absolute;
	margin-top: 18px;
	margin-left: 210px;
	width: 225px;
}

.buybtnsteam {
	position: absolute;
	background-color: red;
	color: #000;
	font-size: 13pt;
	font-weight: 600;
	width: 206px;
	margin-top: 10px;
	margin-left: 450px;
	text-align: center;
	z-index: 1200;
}

.buybtnsteam a {
	display: block;
	width: 100%;
	height: 100%;
	padding: 10px;
}

.comingsoon {
	position: absolute;
	right: 0;
	margin-top: -30px;
	z-index: 1000;
}

.topbacksp {
	position: relative;
	height: auto;
}

.spyoutube {
	position: relative;
	margin-top: 20px;
	text-align: center;
	padding-left: 30px;
	padding-right: 30px;
}

.spyoutube img {
	border: solid 1px #8C6239;
}

.spwrap {
	height: auto;
}

.short {
	position: relative;
	width: 345px;
	margin-left: 0;
	z-index: 3000;
}
.short2 {
	position: relative;
	width: 800px;
	margin-left: 0;
	z-index: 3000;
}
.short2 {
	position: relative;
	width: 800px;
	margin-left: 0;
	z-index: 3000;
}

@media screen and (min-width:320px) and ( max-width:768px) {
		.buybtn2 {
	position: relative;
		margin-top: 20px;
		margin-bottom: 40px;
		width: 100%;
		left:0px;
	
}
	.buybtn2 a {

	padding:10px;
}
	.snsList {
		position: relative;
		margin-top: -10%;
		width: 115px;
	}
	.snsList li {
		float: left;
		margin-left: 10px;
	}
	.csslidesp {
		position: relative;
		margin-top: 20px;
		width: 105%;
		margin-left: 0;
		overflow: hidden;
	}
	.csslidesp li {
		float: left;
		width: 46%;
		margin-right: 3.0%;
		margin-left: 0px;
		margin-bottom: 9px;
	}
	.csslidesp li img {
		border: 1px solid #8C6239;
	}
	.newcharacters {
		margin-top: 50px;
		margin-right: -25px;
	}
	.newcharacters li {
		float: left;
		width: 46.5%;
		border: solid 1px #8C6239;
		margin-right: 9px;
		margin-left: 0px;
		margin-bottom: 9px;
	}
	#mainContB {
		margin-top: 0px;
	}
	.mcbwrap {
		margin-bottom: 40px;
		height: auto;
	}
	.leftBox {
		position: relative;
		float: left;
		width: 100%;
	}
	.rightBox {
		position: relative;
		float: right;
		width: 100%;
	}
	.dxpkg {
		position: relative;
		margin-right: 0px;
		margin-bottom: 0px;
	}
	.pkgimg {
		position: relative;
		margin-left: auto;
		margin-right: auto;
		width: 85%;
	}
	.campaignbnr {
		position: relative;
		margin-top: 20px;
		margin-left: 0px;
		width: 100%;
	}
	.buybtn {
		background-color: red;
		color: #000;
		font-size: 18pt;
		font-weight: 600;
		width: 100%;
		margin-top: 40px;
		margin-left: 0px;
	}
	.topTxt3 {
		margin-top: 5px;
		font-size: 11pt;
		width: 100%;
	}
	.topTxt3 br {
		display: none;
	}
	.include {
		position: relative;
		margin-top: 20px;
	}
	.buybtnsteam {
		position: relative;
		background-color: red;
		text-align: center;
		color: #000;
		font-size: 18pt;
		font-weight: 600;
		width: 100%;
		margin-top: 40px;
		margin-left: 0px;
	}
	.campaignbnrsteam {
		position: relative;
		margin-top: 18px;
		margin-left: 0;
		width: 100%;
	}
	.topTxt4 {
		position: relative;
		margin-top: 5px;
		padding-left: 1em;
		text-indent: -1em;
		font-size: 11pt;
		color: #fff;
		line-height: 1.6em;
		word-break: break-all;
		text-align: justify;
	}
	.short {
		width: 100%;
		margin-left: 0;
	}
	.short2 {
	position: relative;
	width: 100%;
	margin-left: 0;
	z-index: 3000;
}
	.short2 {
	position: relative;
	width: 100%;
	margin-left: 0;
	z-index: 3000;
}
	.buybtn a {
	padding: 10px;
}
}

.fadeimg {
	height: 100%;
	background-image: url(../img/loadingback.jpg);
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100%;
}

.logosmall {
	position: absolute;
	right: 0;
}

.dxback {
	position: absolute;
	margin: -20px 0 0 340px;
	z-index: 500;
}
.dxback2 {
	position: absolute;
	margin: 0px 0 0 230px;
	z-index: 500;
}

.upgptokutenimg {
	position: absolute;
	margin-top: -12px;
	right: -30px;
}

.cautiontextarea {
	font-size: 10pt;
	color:#fff;
	text-align: justify;
}
.cautiontextarea2 {
	position: relative;
	font-size: 10pt;
	margin-top: 20px;
	width: 670px;
	color:#fff;
	text-align: justify;
}
@media screen and (min-width:320px) and ( max-width:768px) {
	.cautiontextarea2 {
	position: relative;
	font-size: 10pt;
	margin-top: 20px;
	width: 100%;
	color:#fff;
	text-align: justify;
}
}

#checkitout {
		position: absolute;
	margin: 223px 0 0 538px;
	z-index: 5400;
	animation-name: animation01;
	animation-duration: 2s;
	animation-timing-function: ease-in;
	animation-delay: 3s;
	animation-fill-mode: both;
	animation-iteration-count: infinite;
}

@keyframes animation01 {
	from {
		left: 0px;
	}
	5% {
		left: 10px;
		}
	7% {
		left: 13px;
		}
	10% {
		left: 5px;
		}
	13% {
		left: -5px;
		}
	15%,20%,30%,40%,50%,60%,70%,80%,90% {
		left: 0px;
	}
	to {
		left: 0px;
	}
	}

-webkit-@keyframes animation01 {
	from {
		left: 0px;
	}
	5% {
		left: 10px;
		}
	7% {
		left: 13px;
		}
	10% {
		left: 5px;
		}
	13% {
		left: -5px;
		}
	15%,20%,30%,40%,50%,60%,70%,80%,90% {
		left: 0px;
	}
	to {
		left: 0px;
	}
	}

-moz-@keyframes animation01 {
	from {
		left: 0px;
	}
	5% {
		left: 10px;
		}
	7% {
		left: 13px;
		}
	10% {
		left: 5px;
		}
	13% {
		left: -5px;
		}
	15%,20%,30%,40%,50%,60%,70%,80%,90% {
		left: 0px;
	}
	to {
		left: 0px;
	}
	}


.mt {
	margin-top: 20px;
}