@charset "utf-8";




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


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

	body{
		background-color:#021418;
	}

	#wrapper{

	}

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

	#commonHeadbar{
		width:100%;
		border-bottom:1px solid #333;
		height:28px;

	}

	#commonHeadbar .inner{
		width:1000px;
		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;
		margin:0px 3px 0;
		width:130px;
	}

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


	#menu{
		height:103px;
		width:100%;
		background:transparent url("../img/common/menu_bg.png") center top repeat;
		min-width:1000px;
		position:relative;z-index:121;
		box-shadow:0px 3px 2px rgba(0,0,0,0.4);
	}

	#menu ul{
		display:block;
		height:73px;
		width:980px;
		padding:0 10px;
		margin:0 auto 0;
	}

	#menu li{
		display:block;
		width:130px;
		float:left;
		margin:12px 0 0 3px;
		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 20px 0 3px;
	}


	#menu li.outline{background:transparent url('../img/common/menu_outline_on.png') center top no-repeat;background-size:100.5%;}
	#menu li.character{background:transparent url('../img/common/menu_character_on.png') center top no-repeat;background-size:100.5%;}
	#menu li.action{background:transparent url('../img/common/menu_action_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.online{background:transparent url('../img/common/menu_online_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.on:hover img{opacity:0!important;}

	body.outline #menu li.outline img{opacity:0!important;}
	body.character #menu li.character img{opacity:0!important;}
	body.action #menu li.action img{opacity:0!important;}
	body.system #menu li.system img{opacity:0!important;}
	body.online #menu li.online img{opacity:0!important;}
	body.gallery #menu li.gallery img{opacity:0!important;}

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

	#footer{
		padding:55px 0;
		position:relative;
		z-index:80;
		min-width:1000px;
		margin:0 auto 0;
		color:#333;
		text-align:center;
		background:#021418 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:13px;
		color:#333;
		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:1000px;
		margin:0 auto 0;
		text-align:center;
		color:#666;
		padding:0px 0 20px;
	}

	.textLink a{
		color:#ddd;
	}



	.flex-control-nav{
		bottom:-45px!important;
	}
	.flex-control-nav li a{
		border:3px solid #000;
		background-color:#000!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:#00DDCB!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:#FFF6F1;

	}

	#wrapper{
	}

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

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

	#commonHeadbar .inner{
		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;
		margin:0px 0px 0;
		width:120px;
	}

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





			#menu{
				width:100%;
				position:relative;z-index:121;
				background-color:#000;
				padding:0 0 0;
				box-shadow:0px 3px 2px rgba(0,0,0,0.4);
			}

			#menu ul{
				display:block;
				padding:26px 6% 15px;
				margin:0 auto 0;
				background:transparent url("../img/common/menu_bg.png") center bottom repeat-x;
				position:relative;
				bottom:0px;

			}



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

			#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;
			}
			#menu li.logo a{
				display:block;
				width:36%;
				margin:0 auto 0;
			}


			#menu li.outline{background:transparent url('../img/common/menu_outline_on.png') center top no-repeat;background-size:100.5%;}
			#menu li.character{background:transparent url('../img/common/menu_character_on.png') center top no-repeat;background-size:100.5%;}
			#menu li.action{background:transparent url('../img/common/menu_action_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.online{background:transparent url('../img/common/menu_online_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%;}


			body.outline #menu li.outline img{opacity:0!important;}
			body.character #menu li.character img{opacity:0!important;}
			body.action #menu li.action img{opacity:0!important;}
			body.system #menu li.system img{opacity:0!important;}
			body.online #menu li.online img{opacity:0!important;}
			body.gallery #menu li.gallery img{opacity:0!important;}


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

	#footer .attention_screenshots{
		display:block;
		font-size:10px;
		color:#333;
		width:90%;
		padding:0px 5% 30px;
		margin:0 auto 0;
		line-height:1.2em;
		text-align:center;
		top:-40px;
		position:absolute;
		font-weight:normal;
	}

	#footer{
		padding:35px 0;
		position:relative;
		z-index:80;
		margin:0 auto 0;
		color:#333;
		text-align:center;
		background:#021418 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;
	}


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

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

	.flex-control-nav li a{
		border:3px solid #000;
		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:#00DDCB!important;
	}

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

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

}