@charset "utf-8";



#back-top { position: fixed; bottom: 0; right: 2%; z-index: 9999; }
#back-top span { background:url(../img/cp/tw/back-top.png) top center no-repeat; width: 100px; height: 76px; display: block; opacity: 0.8; }
#back-top:hover { filter: alpha(opacity=50); -moz-opacity:0.5; opacity:0.5; }

/*----------------------------------------
	for PC
----------------------------------------*/


@media screen and (min-width: 481px){



	body{
	}

	#wrapper{

	}

	/*--------menu---------*/

	#commonHeadbar{
		width:100%;
		border-bottom:1px solid #333;
		height:28px;
		background: #000;
		position: relative;
		z-index: 1000;
		text-align: center;
	}

	#commonHeadbar .inner{
		width:1200px;
		margin:0 auto 0;
		height:28px;
	}

	#commonHeadbar .ktlogo{
		display:block;
		float:right;
		margin:3px 3px 0;
		width:35px;
	}

	#commonHeadbar .link{
		color:#ddd;
		margin:1px 20px 0 10px;
		display:block;
		font-size:11px;
		float:right;
		position:relative;
	}

	#commonHeadbar .link::before{
		content:'';
		display:block;
		position:absolute;
		left:-15px;top:10px;
		width:5px;
		height:5px;
		border-top:2px solid #fff;
		border-right:2px solid #fff;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}

	#commonHeadbar .btn_reserve{
		display:block;
		float:left;
		width:160px;
		background: #d00;
		color: #fff;
		text-decoration: none;
		font-size: 12px;
		height: 28px;
		line-height: 28px;
	}




	#menu{
		height: 69px;
		width:100%;
		min-width:1200px;
		position:relative;z-index:121;
	}

	#menu:before {
	  content: '';
	  position: absolute;
	  height: 400px;
	  background: #ff5;
	  transform: skewY(-3deg);
	  margin-top: -320px;
	  width: 100%;
	  top: 0;
	  left: 0;
	}

	#menu:after {
	  content: '';
	  position: absolute;
	  height: 400px;
	  background: #c00;
	  transform: skewY(-2deg);
	  margin-top: -330px;
	  width: 100%;
	  top: 0;
	  left: 0;
	}


	#menu ul{
		display:block;
		width: 1200px;
		padding:0;
		margin:0 auto 0;
		z-index: 1000;
		position: relative;
	}

	#menu li{
		display:block;
		width:144px;
		float:left;
		margin: 0;
		position:relative;
	}

	#menu li.new:after{
		display:block;
		content:'';
		position:absolute;
		left:-3px;
		top:-10px;
		background-image:url('../img/common/new.gif');
		background-size:25px;
		width:25px;
		height:25px;
		border-radius:15px;
		overflow:hidden;
		box-shadow:2px 2px 3px rgba(0,0,0,0.9),0px 0px 5px rgba(0,0,0,0.9);
	}

	#menu .sp_br{
		display:inline;
	}

	#menu li img{
		display:block;
		width:100%;
	}

	#menu li.logo{
		display:block;
		width:150px;
		float:left;
		margin:2px 27px 0 3px;
	}

	#menu li:last-child { }
	#menu li.top{background:transparent url('../img/common/menu_top_on.png') center top no-repeat;background-size:100%; }
	#menu li.story{background:transparent url('../img/common/menu_story_on.png') center top no-repeat;background-size:100%; }
	#menu li.outline{background:transparent url('../img/common/menu_outline_on.png') center top no-repeat;background-size:100%; }
	#menu li.characters{background:transparent url('../img/common/menu_characters_on.png') center top no-repeat;background-size:100%; }
	#menu li.system{background:transparent url('../img/common/menu_system_on.png') center top no-repeat;background-size:100%; }
	#menu li.gallery{background:transparent url('../img/common/menu_gallery_on.png') center top no-repeat;background-size:100%; }
	#menu li.products{background:transparent url('../img/common/menu_products_on.png') center top no-repeat;background-size:100%; }
	#menu li.dlc{background:transparent url('../img/common/menu_dlc_on.png') center top no-repeat;background-size:100%; }
	#menu li:last-child { }


	#menu li.on:hover img{opacity:0!important;}

	body#top #menu li.top img{opacity:0!important;}
	body#story #menu li.story img{opacity:0!important;}
	body#outline #menu li.outline img{opacity:0!important;}
	body#characters #menu li.characters img{opacity:0!important;}
	body#system #menu li.system img{opacity:0!important;}
	body#gallery #menu li.gallery img{opacity:0!important;}
	body#product #menu li.products img{opacity:0!important;}
	body#dlc #menu li.dlc img{opacity:0!important;}

	/*--------footer---------*/

	#footer{
		padding:55px 0;
		position:relative;
		z-index:80;
		min-width:1200px;
		margin:0 auto 0;
		color:#333;
		text-align:center;
		background:#000 url('../img/common/bg_footer.jpg') center top repeat-x ;
	}

	#footer img{
		display:block;
		margin:0 auto 0;
	}

	#footer .rights{
		display:block;
		margin:0 auto 0;
	}

	#footer .attention_screenshots{
		display:block;
		font-size:12px;
		color:#fff;
		width:100%;
		padding:0px 0px 30px;
		margin:0 auto 0;
		line-height:1.7em;
		text-align:center;
		top:-30px;
		position:absolute;
	}

	#footer .btn_twitter img{
		display:block;
		width:100%;
	}

	#sns{
		width:220px;
		margin:0 auto 30px;
	}

	#sns a{
		float:left;
		margin:4px;
	}

	a.mo:hover{
		opacity:0.7;
	}

	.textLink{
		font-size:16px;
		width:1200px;
		margin:0 auto 0;
		text-align:center;
		color:#666;
		padding:0px 0 20px;
	}

	.textLink a{
		color:#ddd;
	}

	.flexslider {
		border-radius: 0 !important;
	}

	.flex-direction-nav a {
		height: 60px !important;
	}

	.flex-control-nav{
		bottom:-25px!important;
	}
	.flex-control-nav li a{
		background-color:#ffffee !important;
		width:10px!important;height:10px!important;
		box-shadow:0px 0px 8px rgba(0,0,0,0.8);
	}

	.flex-control-paging li a.flex-active {
		background-color:#ffff00 !important;
	}

	a.flex-next {
		background: url(../img/common/allow-R.png) top left no-repeat!important;
		width: 50px!important;
		height: 50px!important;
	}

	a.flex-prev {
		background: url(../img/common/allow-L.png) top left no-repeat!important;
		width: 50px!important;
		height: 50px!important;
	}

	/*--------common---------*/

	.hide_sp{display:block!important;}
	.hide_pc{display:none!important;}
	.hide_spi{display:inline!important;}
	.hide_pci{display:none!important;}


}

/*----------------------------------------
	for SP
----------------------------------------*/

@media screen and (max-width: 480px) {

	html{
		background-color:#000;
	}

		body{

		background-color:#e8effa;

	}

	#wrapper{
	}

	/*--------menu---------*/

	#commonHeadbar {
		width:100%;
		border-bottom:1px solid #333;
		height:25px;
		position:absolute;
		top:0;
		z-index:200;
		text-align: center;
	}

	#commonHeadbar .inner{
		background: #000;
		width:100%;
		margin:0 auto 0;
		height:25px;
	}

	#commonHeadbar .ktlogo{
		display:block;
		float:right;
		margin:4px 5px 0;
		width:30px;
	}

	#commonHeadbar .link{
		color:#ddd;
		margin:7px 20px 0 0;
		display:none;
		float:right;
		position:relative;

	}

	#commonHeadbar .link::before{
	content:'';
	display:block;
	position:absolute;
	left:-13px;top:7px;
	width:5px;
	height:5px;
	border-top:2px solid #fff;
	border-right:2px solid #fff;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	}

	#commonHeadbar .link::before{
	content:'';
	display:block;
	position:absolute;
	left:-15px;top:10px;
	width:5px;
	height:5px;
	border-top:2px solid #fff;
	border-right:2px solid #fff;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	}

	#commonHeadbar .btn_reserve{
		display:block;
		float:left;
		width:160px;
		background: #d00;
		color: #fff;
		text-decoration: none;
		font-size: 12px;
		height: 100%;
		line-height: 28px;
	}

	#commonHeadbar .btn_reserve img{
		display:block;
		width:100%;
	}





	#menu{
		width:100%;
		background: #000;
		position:relative;z-index:121;
		padding:0 0 0;
	}

	#menu ul{
		display:block;
		padding:26px 0 5px;
		margin:0 auto 0;
		background:#c00;
		position:relative;
		bottom:0px;

	}



	#menu li{
		display:block;
		width:32.2%;
		float:left;
		margin:0 0 0 0;
		position:relative;
	}

	#menu li:nth-child(3n+2) { }

	#menu li img{
		display:block;
		width:100%;
	}

	#menu li.new:after{
		display:block;
		content:'';
		position:absolute;
		left:-3px;
		top:-8px;
		background-image:url('../img/common/new.gif');
		background-size:23px;
		width:23px;
		height:23px;
		border-radius:15px;
		overflow:hidden;
		box-shadow:2px 2px 3px rgba(0,0,0,0.9),0px 0px 5px rgba(0,0,0,0.9);
	}

	#menu li.logo{
		display:block;
		width:100%;
		margin:0px auto 3px;
		clear:both;
		border:none;
	}
	#menu li.logo a{
		display:block;
		width:36%;
		margin:0 auto 0;
	}


	#menu li.story{background:transparent url('../img/common/menu_story_on.png') center top no-repeat;background-size:100%;}
	#menu li.outline{background:transparent url('../img/common/menu_outline_on.png') center top no-repeat;background-size:100%;}
	#menu li.characters{background:transparent url('../img/common/menu_characters_on.png') center top no-repeat;background-size:100%;}
	#menu li.system{background:transparent url('../img/common/menu_system_on.png') center top no-repeat;background-size:100%;}
	#menu li.gallery{background:transparent url('../img/common/menu_gallery_on.png') center top no-repeat;background-size:100%;}
	#menu li.products{background:transparent url('../img/common/menu_products_on.png') center top no-repeat;background-size:100%;}
	#menu li.dlc{background:transparent url('../img/common/menu_dlc_on.png') center top no-repeat;background-size:100%;}


	body.story #menu li.story img{opacity:0!important;}
	body.outline #menu li.outline img{opacity:0!important;}
	body.characters #menu li.characters img{opacity:0!important;}
	body.system #menu li.system img{opacity:0!important;}
	body.gallery #menu li.gallery img{opacity:0!important;}
	body.products #menu li.products img{opacity:0!important;}
	body.dlc #menu li.dlc img{opacity:0!important;}



	/*--------footer---------*/

	#footer .attention_screenshots{
		display:block;
		font-size:8px;
		color:#fff;
		width:100%;
		padding:0px 2% 30px;
		margin:0 auto 0;
		line-height:1.2em;
		text-align:center;
		top:-20px;
		position:absolute;
		font-weight:normal;
		z-index: 1020;
	}

	#footer{
		padding:35px 0;
		position:relative;
		z-index:80;
		margin:0 auto 0;
		color:#333;
		text-align:center;
		background:#000 url('../img/common/bg_footer.jpg') center top repeat-x ;
	}

	#footer img{
		display:block;
		margin:0 auto 0;
	}

	#footer .rights{
		display:block;
		width:95%;
		margin:0 auto 0;
	}


	#footer .btn_twitter img{
		display:block;
		width:100%;
	}

	#sns{
		width:220px;
		max-width:100%;
		margin:0 auto 30px;
	}

	#sns a{
		float:left;
		margin:4px;
	}

	a.mo:hover{
		opacity:0.8;
	}

	.textLink{
		font-size:14px;
		width:96%;
		margin:0 auto 0;
		text-align:center;
		color:#ddd;
		padding:0px 0 20px;
	}

	.textLink a{
		color:#ddd;
		display:block;
	}

	.flexslider {
		border-radius: none !important;
	}

	.flex-control-nav{
		bottom:-40px!important;
	}

	.flex-control-nav li{
		margin:0 3px!important;
	}

	.flex-control-nav li a{
		background-color:#000!important;
		width:8px!important;height:8px!important;
		box-shadow:0px 0px 8px rgba(0,0,0,0.8);
	}

	.flex-control-paging li a.flex-active {
		background-color:#ffff00!important;
	}

	.flex-direction-nav a {
		height: 60px !important;
	}


/*--------common---------*/
#back-top span { width: 50px; height: 38px; background-size: 100%; }

.hide_sp{display:none!important;}
.hide_pc{display:block!important;}
.hide_spi{display:none!important;}
.hide_pci{display:inline!important;}

}