@charset "UTF-8";

body{
	background-image:url(../img/dot.png);
	/*overflow:hidden;*/
	/*overflow-x: hidden;/*要検討スクロールバー消す*/
}

#container{
	width:100%;
	min-width:980px;
	height:auto;
	display:block;
	background-image:url(../img/common_bg.png);
	background-position:center top;
	background-repeat:no-repeat;
}

.bs{
	/* box-shadow */
	-webkit-box-shadow:rgba(200, 207, 217, 0.45098) 1px 2px 10px 0px;
	-moz-box-shadow:rgba(200, 207, 217, 0.45098) 1px 2px 10px 0px;
	box-shadow:rgba(200, 207, 217, 0.45098) 1px 2px 10px 0px;
}

/****メインビジュアル****/

header{
	width:100%;
	height:222px;	/*22+115+85 = 222px*/
	-webkit-box-sizing:border-box;/*追加*/
	-moz-box-sizing: border-box;
	box-sizing:border-box;/*追加*/
	/*overflow:hidden;*//*overflow:hidden;でスマホエラー回避*/
	/*overflow-y:visible;
	overflow-x:hidden;*/
}

/***contents _header***/
#contents_header{
	width:100%;
	height:22px;
	background-color:#fff;
}

#contents_header:after{
	content:"";
	display:block;
	clear:both;	
}

.headerclass{
	width:960px;
	margin:0 auto;
}

.headerclass > p{
	width:480px;
	height:22px;
	padding-top:3px;
	padding-left:5px;
	float:left;
	color:gray;
	font-size:12px;/*フォントザイズ*/
	font-size:0.75rem;
}

.headerclass > a{
	margin-left:10px;
	padding-top:2px;
	padding-right:5px;
	color:silver;
	line-height:22px;
	height:22px;
	float:right;
	font-size:12px;/*フォントザイズ*/
	font-size:0.75rem;
}

.headerclass > a:hover{
	color:#64A1FF;
}
/***END_contents _header***/

/***logo_area****/
#logoArea{
	width:960px;
	height:110px;
	margin:0 auto;
	position:relative;
}

#logoArea h1{
	position:absolute;
	top:28px;
	left: 0;
 	right: 0;
	margin:0 auto;
	width:250px;
	height:60px;
}

#logoArea h1 a{
	width:100%;
	height:100%;
	display:block;
}
/****navigation****/

#navigation{
	width:960px;
	height:85px;
	margin:0 auto;
	position: relative; 
	background-image:url(../img/common_navbg.png);
	background-repeat:no-repeat;
	/*border:1px solid red;*/
}

.navclass ul{
	margin:14px 10px 0 10px;
	padding:0;
}

.navclass li{
	display: inline-block;
	list-style:none;
	width:120px;
	height:60px;	
}

.navclass li:nth-child(even){
	margin-left:16.65px;
	margin-right:16.65px;
	/*background-color:red;*/	
}

.navclass li:nth-child(odd){
	/*background-color:cyan;*/	
}

.navclass li a{
	display:block;
	line-height:60px;
	padding:0;
	position:relative;
	text-indent:-9999px;
	overflow:hidden;
	width:120px;	/*ロゴの横幅に合わせる*/
	height:60px;
	text-align:center;
	/*border:1px solid red;*/
}

.navclass li a:active{
	top:2px;
	opacity:.7;
}

.top a{
	background-image:url(../img/navationbuttom3.png);
	background-size:840px;
	background-repeat:no-repeat;
	background-position:0px 0px;
}

.top a:hover{
	background-image:url(../img/navationbuttom3.png);
	background-size:840px;
	background-repeat:no-repeat;
	background-position:0px -60px;
}

.story a{
	background-image:url(../img/navationbuttom3.png);
	background-size:840px;
	background-repeat:no-repeat;
	background-position:-120px 0px;
}

.story a:hover{
	background-image:url(../img/navationbuttom3.png);
	background-size:840px;
	background-repeat:no-repeat;
	background-position:-120px -60px;
}

.world a{
	background-image:url(../img/navationbuttom3.png);
	background-size:840px;
	background-repeat:no-repeat;
	background-position:-240px 0px;
}

.world a:hover{
	background-image:url(../img/navationbuttom3.png);
	background-size:840px;
	background-repeat:no-repeat;
	background-position:-240px -60px;
}

.chara a{
	background-image:url(../img/navationbuttom3.png);
	background-size:840px;
	background-repeat:no-repeat;
	background-position:-360px 0px;
}

.chara a:hover{
	background-image:url(../img/navationbuttom3.png);
	background-size:840px;
	background-repeat:no-repeat;
	background-position:-360px -60px;
}

.grahic a{
	background-image:url(../img/navationbuttom3.png);
	background-size:840px;
	background-repeat:no-repeat;
	background-position:-480px 0px;
}

.grahic a:hover{
	background-image:url(../img/navationbuttom3.png);
	background-size:840px;
	background-repeat:no-repeat;
	background-position:-480px -60px;
}

.special a{
	background-image:url(../img/navationbuttom3.png);
	background-size:840px;
	background-repeat:no-repeat;
	background-position:-600px 0px;
}

.special a:hover{
	background-image:url(../img/navationbuttom3.png);
	background-size:840px;
	background-repeat:no-repeat;
	background-position:-600px -60px;
}

.down a{
	background-image:url(../img/navationbuttom3.png);
	background-size:840px;
	background-repeat:no-repeat;
	background-position:-720px 0px;
}

.down a:hover{
	background-image:url(../img/navationbuttom3.png);
	background-size:840px;
	background-repeat:no-repeat;
	background-position:-720px -60px;
}
/***constents***/

#contents{
	width:960px;
	height:auto;
	margin: 0px auto 95px auto;
	position:relative;
	/*border:1px yellow solid;*/
}

#contents h2{
	text-align:center;
	height:100px;
	padding-top:20px;
	font-size:24px;
	font-size:1.5rem;/*フォントサイズ*/
	letter-spacing: 0.03em;
}
/***footer***/

footer{
	width:100%;
	height:90px;
	-webkit-box-sizing:border-box;/*追加*/
	-moz-box-sizing: border-box;
	box-sizing:border-box;/*追加*/
	background-color: #FFF;
	border-bottom:5px solid #060053;
	/*background-image:url(../img/footerbg.png);*/
	/*background:url(img/footer_bg.png),linear-gradient( rgba(255, 255, 255, 0),rgba(255, 255, 255, 1),rgba(255, 255, 255, 1));*/
	/*background:linear-gradient( rgba(255, 255, 255, 0),rgba(255, 255, 255, 1),rgba(230, 242, 255, 1));
	/*background:linear-gradient( rgba(255, 255, 255, 0),rgba(230, 242, 255, 1),rgba(230, 242, 255, 1));*/
	/*background-image:url(img/footer_bg2.png);*/
	background-repeat:no-repeat;
	background-position:top center;
	/*filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#66FFFFFF', endColorstr='#FFFFFFFF');/*ie9*/
	/*background-color:#fff;*/
}

#footer_container{
	width:960px;
	height:auto;
	margin:0 auto;
	/*border-top: solid 1px #333333;*/
}

/*ロゴ*/
#footer_box{
	width:30%;
	float:left;
	position:relative;
	padding-top:18px;
	box-sizing:border-box;
}

#footer_box:before{
	content:"";
	display:block;
	clear:both;	
}

#footer_box a{
	/*hover*/
	-webkit-transition: all 0.15s ease;
    -moz-transition: all 0.15s ease;
    transition: all  0.15s ease;
}

#footer_box a:hover{
	opacity:0.7;
}

/*右半分*/
#footer_nav{
	width:70%;
	float:right;
	height:85px;
	margin:0 auto;
}

#footer_nav:before{
	content:"";
	display:block;
	clear:both;	
}

.f_navclass{
	margin: 23px 0px 0px 0px;
}

.f_navclass ul{
	width:100%;
	font-size:0px;
	 text-align:right;
	padding-left:0px;
}

.f_navclass li{
	color:#414549;
	font-size:11px;	/*フォントサイズ*/
	display: inline-block;
	list-style:none;
	height:18px;
	padding: 0px 10px ;
}

.f_navclass li a{
	font-weight:bold;
	/*hover*/
	-webkit-transition: all 0.15s ease;
    -moz-transition: all 0.15s ease;
    transition: all  0.15s ease;
	color:#4d4d4d;
}

.f_navclass li a:hover{
	opacity:1;
	color:#FFCE00;
	text-decoration:underline;
}

.f_navclass li a:active{
	opacity:.5;
}

.f_navclass li:nth-child(even){
	border-left: 1px solid #747474;
	border-right: 1px solid #747474;
}

.copyright p{
	width:100%;
	text-align:right;
	padding-top:12px;
	padding-right:10px;
	font-size:11px;/*フォントサイズ*/
	color:#4d4d4d;/*カラー*/
}

/**追加バナー**/

.tags{
	position:absolute;
	top:-12px;
	text-indent:-9999px;
	overflow:hidden;
	text-align:center;
	/*border:1px solid red;*/
}

.tags p{
	width:120px;
	height:20px;
	text-indent:-9999px;
	overflow:hidden;
	text-align:center;
}

.newtag{
	/*right:282px;/*グラフィックス*/
	/*right:147px;*/
	right:282px;/*キャラクター*/
	background-image:url(../img/baner.png);
	background-size:360px 20px;
	background-position:0px 0;
}

.movietag{
	right:147px;
	background-image:url(../img/baner.png);
	background-size:360px 20px;
	background-position:-120px 0;
}

.trialtag{
	right:12px;
	background-image:url(../img/baner.png);
	background-size:360px 20px;
	background-position:-240px 0;
}