@charset "utf-8";

body{margin: 0px; padding: 0px;
	text-align: center;
	font-size: 90%; line-height: 180%; color: #ececec; /*文字色*/
	background-color: #000000;
	background-image: url(../images/bg.gif);
	background-repeat: repeat-x;
	background-attachment: fixed;
	display:none; /*fadein使用*/
	font-family: Arial, Helvetica, Verdana, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;}

	.background-hack {
		z-index: -1;
		background-color: #000000;
		background-repeat: no-repeat;
		background-size: 100% auto;
		position: fixed;
		top: 0; left: 0; right: 0; bottom: 0;}

a:link {color: #ffffff; text-decoration: none;}
a:visited {color: #e6e0c5; text-decoration: none;}
a:hover {color: #ffea83; text-decoration: none;
	-webkit-transition: 0.3s;
	transition: 0.3s;}

a:hover img {opacity: .8;
	filter: alpha(opacity=80);
	-webkit-transition: 0.3s; transition: 0.3s;}

/*common*/
.main-container1080 {margin: 0; padding: 0; width: 1080px;
	background-color: #000000;}
.main-container960 {margin: 0; padding: 0; width: 960px;}

.clear{clear:both;}

.space20 {width: 20px; height: 20px;}
.space10 {width: 10px; height: 10px;}
.space5 {width: 5px; height: 5px;}

/*画像回り込み imgタグにclass指定*/
.left {float: left;}
.right {float: right;}
.center {text-align: center;}

/*top*/
.keyvisual {margin: 0; padding: 0px 0px 25px 0px;
	width: 100%; height: auto;
	position: relative;}

.mainlogo {margin: 0; padding: 0; top: 459px; left: 29px;
	position: absolute; width: 100%;}
	.logo img {margin: 0; width: 100%; height: auto;}

.oldlink {margin: -20px 0px 0px 0px;
	font-size: 100%; font-weight: bold;}
.line {margin-top: -5px; z-index: 10000;}
.date2017 {padding: 50px 0px 30px 0px;}

	/*Red*/
	.bgRed {margin-top: -5px; padding: 0;
		width: 1080px; height: 387px;
		background-image: url(../images/bgRed.jpg);}
	.catchcopy {padding: 0px 60px 0px 80px;
		font-size: 130%; line-height: 190%; color: #fbf1bf;}

/*menu*/
.menu-box {margin-top: -5px; padding: 0;
	width: 1080px; text-align: left;}

.menu-box1 {margin: 0px; padding: 0px 0px 0px 0px;
	width: 360px; height: 406px;
	float: left;}
.menu-box1 a:hover img {opacity: 10; filter: alpha(opacity=100);}

.menu-box2 {margin: 0px; padding: 0px 40px 0px 40px;/*menu*/
	width: 280px; height: 406px;
	float: left; text-align: center;
	background-image: url(../images/bg_middle.jpg);}

.menu-box3 {margin: 0px; padding: 0px 0px 0px 0px;
	width: 360px; height: 406px;
	float: right;}
.menu-box3 a:hover img {opacity: 10; filter: alpha(opacity=100);}

/*main-menu*/
.main-menu {margin: 0; padding: 0px;
	width: 280px; height: auto;}
.contents {margin: 30px 0px 20px 0px; padding: 0px;
	width: 280px;}

.main-btn {margin: 0px 0px 10px 0px; padding: 0px 0px 0px 0px;
	float: none; width: 280px;
	text-align: center; cursor: pointer;
	background: linear-gradient(to right, #222222 0%, #696969 50%, #222222 100%);
	border:1px solid #373737;}

.main-btn a {padding: 8px 0px 8px 0px; display: block;}
.main-btn a:hover {background: linear-gradient(to right, #434343 0%, #919191 50%, #434343 100%);}
.main-btnac {padding: 8px 0px 8px 0px; background: #000000;}

/*sub-menu*/
.sub-menu {margin: 0; padding: 0px 30px;
	width: 1020px; height: auto;}

.sub-btn {margin: 0px 3px 0px 3px; padding: 0px 0px 0px 0px;
	float: left; width: 247px;
	text-align: center; cursor: pointer;
	background: linear-gradient(to right, #222222 0%, #696969 50%, #222222 100%);
	border-top: 1px solid #373737;
	border-right: 1px solid #373737;
	border-left: 1px solid #373737;}

.sub-btn a {padding: 8px 0px 8px 0px; display: block;}
.sub-btn a:hover {background: linear-gradient(to right, #434343 0%, #919191 50%, #434343 100%);}
.sub-btnac {padding: 8px 0px 8px 0px; background: #000000;}

.header a:hover img {opacity: 10; filter: alpha(opacity=100);}

.text-box {margin: 0; padding: 40px 60px 20px 60px;
	width: 960px; background: #000000; text-align: left;}

.text-box2 {margin-bottom: 40px; padding: 20px 30px 20px 30px;
	width: 920px; background: #262626;
	box-shadow:0px 0px 15px 5px #474747;
	border: 1px solid #555555;}

.text-box2red {margin-bottom: 40px; padding: 20px 30px 20px 30px;
	width: 920px; background: #3a1818;
	box-shadow:0px 0px 15px 5px #632b2b;
	border: 1px solid #743939;}

.text-title1 {margin: 0; padding: 0px 0px 4px 0px;
	font-size: 75%; line-height: 100%; color: #ffffff;
	font-weight: normal; letter-spacing: 5px;}
.text-title2 {margin: 0; padding: 0px 0px 10px 0px;
	font-size: 160%; line-height: 100%; color: #ffffff;
	font-weight: normal; letter-spacing: 2px;}

/*character*/
.chara-left {margin: 0; padding: 0;
	float: left; width: 600px; height: 500px;}
.chara-right {margin: 0; padding: 100px 0px 0px 0px;
	float: left; width: 320px; height: auto;}
.text-chara {padding: 0px 0px 15px 0px; font-size: 130%; line-height: 120%;}

/*mecha*/
.mecha-right {margin: 0; padding: 0;
	float: right; width: 600px; height: 500px;}
.mecha-left {margin: 0; padding: 120px 0px 0px 0px;
	float: right; width: 320px; height: auto;}
.text-mecha {padding: 0px 0px 15px 0px; font-size: 130%; letter-spacing: 0px;}

/*story*/
.story-left {margin: 0; padding: 10px 25px 10px 25px;
	float: left; width: 400px; background: #000000;}
.story-right {margin: 0; padding: 20px 5px 0px 35px;
	float: left; width: 430px;}
.text-story {padding: 0px 0px 0px 0px; font-size: 180%;}
.text-story2 {padding: 0px 0px 30px 0px; font-size: 80%; letter-spacing: 0px;}

.story-red {color: #a81e1e;}



	/*paging*/
	.paging-box {margin: 0; padding: 50px 240px 20px 240px;
		width: 480px; text-align: center;}
.	paging-btn {margin: 0px 2% 0px 2%;
		float: left; width: 46%;
		text-align: center; cursor: pointer;
		background: #135192;}

	.paging-btn a {padding: 5px 0px 5px 0px; display: block;}
	.paging-btn a:hover {background: #34699a;}
	.paging-btnac {padding: 5px 0px 5px 0px; background: transparent;}
		.paging-btn img {margin: 0px; width: 30%; height: auto;}

/*sns*/
.sns-box {margin: 30px 0px 0px 0px; padding: 0px 0px 0px 25px;
	width: 255px;}
.main-sns {margin-left: 20px;}
.white {margin-right: 20px; padding: 0;
	float: left; background-color: #ffffff;}
.white img{width: 100%; height: auto;}

/*Blue*/
.bgBlue {margin-top: -5px; padding: 0;
	width: 1080px; height: 268px;
	width: 1080px; height: 168px;
	background-image: url(../images/bgBlue.jpg);}

/*link*/
.link-box {text-align: left;
	margin-left: 255px; padding: 65px 0px 30px 0px;}
.banner {margin-right: 20px; padding: 0px;
	float: left; background-color: #ffffff;}
	.banner img{width: 100%; height: auto;}
.banner2 {margin: 0; padding: 0; 
	width: 960px; background-color: #ffffff;}
	.banner2 img{width: 100%; height: auto;}

/*footer*/
.footer {margin-top: 50px;
	background-color: #191919; width:100%;}
.footer-bg {background-image: url(../images/footer.jpg);
	background-repeat: repeat-x;
	width: 100%; height: 81px}
.sunrise {margin-top: 10px;}
.copyrights {margin-top: 10px;
	font-size: 80%; line-height: 180%; color: #a0a0a0;}
.copyrights2 {margin-top: 8px; padding: 0px 0px 40px 0px;
	font-size: 75%; line-height: 150%;}

/*pagetop*/
#page-top {margin: 0px; padding: 0px;
	position: fixed; bottom: 110px; right: 50px;}
#page-top a {margin: 0px; padding: 40px 0px 0px 0px;
	width: 110px; height: 70px; display: block;
	background:#505050;
	font-size: 90%; color: #a5a5a5;}
#page-top a:hover {background:#676767;
	color: #ffffff;}

/*menu*/
/*staffcast*/
/*outline*/
/*story*/


/*●640px以下（SP）
================================================*/
@media only screen and (max-width: 640px) {

.pconly{display: none;}

body{font-size: 75%; line-height: 160%;
	background-image: url(../images/spacer.png);}

/*common*/
.main-container1080, .main-container960 {width: 100%;}

.space20 {width: 10px; height: 10px;}
.space10 {width: 5px; height: 5px;}

/*top*/
.keyvisual {margin-bottom: 34%; padding: 0px;}
.keyvisual img {width: 100%;}

.mainlogo {top: 75%; left: 0%;}
	.mainlogo img {margin: 0; width: 90%; height: auto;}

.oldlink {margin: 24% 0% 0% 0%;
	width: 100%;
	position: absolute; font-size: 100%;}

.line {margin-top: -4px; z-index: 10000;}
	.line img {margin: 0; width: 100%; height: auto;}

.date2017 {padding: 2% 0% 3% 0%;}

/*Red*/
.bgRed {margin-top: -3px; padding: 5% 0% 0% 0%;
	text-align: left;
	width: 100%; height: auto;
	background-image: url(../images/bgRedS.jpg);
	background-size: contain;}

/*menu*/
.menu-box {margin-top: -3px; width: 100%;}

.menu-box1 {margin: 0px; padding: 0% 0 10% 0;
	width: 50%; height: auto;
	float: left;}
	.menu-box1 img {margin: 0px; width: 100%; height: auto;}

.menu-box2 {margin: 0; padding: 0;	/*menu*/
	width: 100%; height: auto;
	float: none; text-align: center;
	background-image: url(../images/spacer.png);}

.menu-box3 {margin: 0px; padding: 0% 0 10% 0;
	width: 50%; height: auto;
	float: right;}
	.menu-box3 img {margin: 0px; width: 100%; height: auto;}

/*mainmenu*/
.main-menu {margin: 0; padding: 7% 8% 5% 8%; width: 84%;}
.contents {margin: 10% 0% 8% 0%; padding: 0px; width: 100%;}

.main-btn {margin: 2% 2% 2% 2%;
	float: left; text-align: center; width: 45%;}
.main-btn a {padding: 20px 0px 20px 0px;}
.main-btnac {padding: 20px 0px 20px 0px;}
	.main-btn img {margin: 0px; width: 100%; height: auto;}

/*submenu*/
.sub-menu {margin: 0; padding: 0% 8% 10% 8%; width: 84%;}

.sub-btn {margin: 2% 2% 2% 2%;
	float: left; text-align: center; width: 45%;
	border-bottom: 1px solid #373737;}
.sub-btn a {padding: 20px 0px 20px 0px;}
.sub-btnac {padding: 20px 0px 20px 0px;}
	.sub-btn img {margin: 0px; width: 100%; height: auto;}

.header {margin: 0; padding: 4% 0% 4% 0%;}
.header img {margin: 0px; width: 50%; height: auto;}

.page-title {padding: 2% 0 1% 0; line-height: 100%; letter-spacing: 2px;}

.text-box {margin: 0; padding: 5% 10% 7% 10%; width: 80%;}

.text-box2 {margin-bottom: 10%; padding: 4% 5% 4% 5%;
	width: 90%;
	box-shadow:0px 0px 12px 5px #474747;
	border: 1px solid #4c4c4c;}

.text-box2red {margin-bottom: 10%; padding: 4% 5% 4% 5%;
	width: 90%;
	box-shadow:0px 0px 12px 5px #632b2b;
	border: 1px solid #6b3535;}

.text-title1 {color: #ffffff;}
.text-title2 {color: #e8e8e8;}

/*character*/
.chara-left {float: none; width: 100%; height: auto;}
	.chara-left img {margin: 0px; width: 100%; height: auto;}
.chara-right {margin: 0; padding: 0px;
	float: none; width: 100%; height: auto;}
.text-chara {padding: 4% 0px 4% 0px;}

/*mecha*/
.mecha-right {float: none; width: 100%; height: auto;}
	.mecha-right img {margin: 0px; width: 100%; height: auto;}
.mecha-left {margin: 0; padding: 0px;
	float: none; width: 100%; height: auto;}
.text-mecha {padding: 4% 0px 4% 0px; line-height: 130%; letter-spacing: 2px;}

/*story*/
.story-left {padding: 2% 2% 2% 2%;
	float: none; width: 96%; height: auto;}
	.story-left img {margin: 0px; width: 100%; height: auto;}
.story-right {margin: 0; padding: 0px;
	float: none; width: 100%; height: auto;}
.text-story {padding: 5% 0% 0% 0%; font-size: 160%;}
.text-story2 {padding: 0% 0% 4% 0%; font-size: 85%;}
.story-red {color: #a81e1e;}

	/*paging*/
	.paging-box {margin: 0; padding: 6% 15% 4% 15%; width: 70%;}
	.paging-btn {margin: 0% 2% 4% 2%;
		text-align: center; width: 46%;}
	.paging-btn a {padding: 20px 0px 20px 0px;}
	.paging-btnac {padding: 20px 0px 20px 0px;}
		.paging-btn img {margin: 0px; width: 50%; height: auto;}

/*sns*/
.sns-box {margin: 0; padding: 4% 0% 8% 0%;
	width: 100%; background-color: transparent;}
.main-sns {margin: 0 auto; padding: 5% 0% 5% 5%;
	width: 210px;}

/*Blue*/
.bgBlue {margin-top: -3px; padding-bottom: 10%;
	width: 100%; height: auto;
	background-image: url(../images/bgBlueS.jpg);
	background-size: contain;}

/*link*/
.link-box {text-align: center;
	margin-left: 0px; padding: 7% 0% 3% 0%; width: 82%;}
.banner {margin: 3% 1% 3% 1%; padding: 0px; width: 48%;
	float: left; background-color: #ffffff;}
.banner2 {width: 80%;}

/*footer*/
.footer {margin: 0px; padding: 2% 0% 5% 3%;
	text-align: left; 
	width: 97%; height: auto;}

	.footer .img1 {float: left; width:24.2%;}
	.footer .img1 img {margin: 0px; width: 97%; height: auto;}
	.footer .img2 {float: left; width:52.8%;}
	.footer .img2 img {margin: 0px; width: 100%; height: auto;}

.footer {margin-top: 0px; text-align: center;}
.sunrise {margin-top: 15px;}
	.sunrise img{width:30%;}

.copyrights {margin-top: 4%;
	font-size: 90%; line-height: 140%; color: #a0a0a0;}
.copyrights2 {margin-top: 3%; padding: 0 0 6% 0;
	font-size: 85%; line-height: 140%;}

/*pagetop*/
#page-top {bottom: 80px; right: 0px;}
#page-top a {margin: 0px; padding: 22px 0px 0px 0px;
	width: 70px; height: 42px;
	font-size: 80%; color: #c5c5c5; font-weight: bold;}

/*menu*/
/*staffcast*/
/*outline*/
/*story*/
/*character*/
/*mecha*/

/**/}


/*●641px以上
======================================*/
@media only screen and (min-width: 641px) {
.sponly{display: none;}
/**/}


/*●横（SP）
================================================*/
@media only screen
and (min-device-width:320px)
and (max-device-width:480px)
and (orientation:landscape) {

#toggle img{margin: 0px 10px 0px 0px; padding: 5px 0px 0px 0px;
	width: 35%; height: auto;}

.main-sns {margin: 0px 0px 0px 0px; padding: 5% 0% 0% 35%;
	position: relative; width: 65%;}

.sub-title {font-size: 230%}

.story-catch {font-size: 230%}

.btn-blue, .table5, .sub-title3, .sub-title4, .btnL, .txts, .name, .name2, .bluray-title 
{font-size: 180%}

.pun, .bluray-title, .table1, .table2, .table3, .table4 
{font-size: 140%}

/**/}