@charset "utf-8";
/* CSS Document */

body {
	font-size: 100%;
	font-family: "ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, Osaka, ＭＳ Ｐゴシック, MS PGothic, sans-serif";
	line-height: 1em;
	background:#001a47;
	color:#ffffff;
}
table {
	width: 100%;
	text-align: left;
	border-collapse: collapse;
	cellpadding: 0.5em;
	margin: 0;
}
table tr {
	padding: 0;
}
table td th {
	padding: 1em;
	line-height: 1.2em;
}
.tbl1,.tbl2,tbl3 tr td th {
	padding: 0.2em 0;
}

.clearfix {zoom: 1;}
.clearfix:before,
.clearfix:after {
	content: '';
	clear: both;
	display: block;
}
/*img {
	max-width:100%;
	height: auto;
	vertical-align:bottom;
}*/
iframe {
	background-color: #001A47;
	width: 100%;
	font-size: 90%;
	/*min-height: 360px;*/
	margin: 0 auto;
	position: relative;
	zoom: 0.5;
}
@media screen and (min-width: 320px) {
iframe {
	zoom: 0.5;
}
}
@media screen and (min-width: 321px) {
iframe {
	zoom: 0.8;
}
}
@media screen and (min-width: 480px) {
.iframe {
	zoom: 0.9;
}
}
#infoset {
	overflow:hidden;
	z-index: 0;
}

#wrapper {
	width: 100%;
	height:100%;
	margin-bottom:53px;
	padding-bottom:53px;
	margin: 0 auto;
}
#bottom {
	padding-bottom: 2%;
	margin-bottom: 2%;
}
hr {
	border: 0;
	height: 2px;
	background-image: -webkit-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,0.75), rgba(255,255,255,0));
	background-image: -moz-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,0.75), rgba(255,255,255,0));
	background-image: -ms-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,0.75), rgba(255,255,255,0));
	background-image: -o-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,0.75), rgba(255,255,255,0));
	width: 90%;
	margin: 2em auto;
}
ruby {
	ruby-align: auto;
	ruby-overhang: auto;
	ruby-position: above;
}
h2 img {
	z-index: 999;
}
	
/* header
---------------------------------------- */
header {
	height: 40px;
	padding-top: 0px;
	padding-right: 5px;
	padding-bottom: 0px;
	padding-left: 5px;
}

header p {
	float:left;
	width:98px;
	display:block;
	padding-top:10px;
}

header ul {
	float:right;
	display:block;
	width:170px;
}

header li {
	float:left;
	display:block;
	width:56px;
	list-style:none;
}
h1 {
	margin-bottom: -5px;
	margin-top: 5px;
}

/* sns
---------------------------------------- */
#sns {
	display:block;
	height: 32px;
	padding: 10px 0 10px 0;
	background-color: #0B4E8E;
}

#sns dl {
	display:block;
	width:300px;
	margin: 0 auto;
}

#sns dt {
	float:left;
	display:block;
	margin-right:6px;
}

#sns dd {
	float:left;
	display:block;
	width:40px;
	margint:0px 4px;
	text-align: center;
}

/* download
---------------------------------------- */
#download {
	display:block;
	text-align:center;
	padding: 10px 10px 5px 10px;
}

#download p {
	display:block;
	text-align:left;
	font-size:75%;
	margin:5px 0px;
	line-height: 1em;
}

#download a:link {color:#6CF; text-decoration:underline;}
#download a:visited {color:#FF6; text-decoration:underline;}
#download a:hover {color:#00FFFF; text-decoration:underline;}


/* spec
---------------------------------------- */
#spec {
	display:block;
	background:#001c46;
	padding-bottom:20px;
	margin: 0 auto;
	font-size: 94%;
	line-height: 1em;
}

#spec h2 {
	display:block;
	text-align:center;
}


#spec p {
	display:block;
	margin: 1em 0px 0px;
	padding: 0px 1em;
}

/* News
---------------------------------------- */
#news {
	display:block;
	font-size: 96%;
}

#news h2 {
	display:block;
	text-align:center;
}

#news a {
	display:block;
	color:#ffffff;
	text-decoration:none;
/*	border-top:2px solid #0f77a9;
	border-bottom:2px solid #052b5e;*/
}

#news dl {
	padding: 5px;
}

#news dl.first {
	padding: 0.5em;
}

#news dl dt {
	float:left;
	margin: 0px 10px 10px 0px;
}

#news dd {
	border-bottom: 2px solid #0f77a9;
	margin-bottom: 5px;
}

#news dl dd {
/*	margin:0px -20px 0px;*/
	padding: 0px 0px 5px 10px;
}

#news p.link {
	display:block;
	padding: 10px 5px 10px;
	text-align: center;
}

/* about
---------------------------------------- */
#about {
	width: 100%;
	display:block;
	background:#001c46;
	padding-bottom:10px;
	margin: 0 auto;
}

#about h2 {
	display:block;
	text-align:center;
	margin-bottom: 5px;
	background-color:#003265;	
}

#about div {
	display:block;
	margin:20px 0px 0px;
	padding:0px 20px;
}

#about div p {
	text-align: center;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

/*novel
-----------------------------------------*/
#novelink {
	display: block;
	margin-bottom: 5px;
}

#novel {
	text-align: center;
}
.lines {
	margin-top: 2em;
	margin-bottom: 2em;
}
.section_top {
	margin-top: 0.5em;
}
#novel ul {
	margin-bottom: 2em;
	width: 160px;
	margin-top: 2em;
	margin-right: auto;
	margin-left: auto;
}
#novel li {
	line-height: 1.5em;
	list-style-type: none;
}
#novel li a {
	width: 100%;
	display:block;
}
.update {
	font-size: 88%;
}
.update:after {
	content: "更新予定";
}
#novel a:visited {
	color: #85CFC5;
}

/*Content
-----------------------------------------*/
#story,#summary,#charactor,#help,#info {
	width: 100%;
	min-height: 280px;
}
#help {
	width: 95%;
	margin: 0 auto;
	padding: 2% 1% 1% 2%;
	/*background-color:#001A47;*/
	font-size: 96%; 
}
#help h2 {
	display: none;
}
#help a:link {color:#6CF; text-decoration:underline;}
#help a:visited {color:#FF6; text-decoration:underline;}
#help a:hover {color:#00FFFF; text-decoration:underline;}

#summary p {
	font-size: 92%;
}
#summary a:link {color:#6CF; text-decoration:underline;}
#summary a:visited {color:#FF6; text-decoration:underline;}
#summary a:hover {color:#00FFFF; text-decoration:underline;}

.totop,.l {
	display: none;
}

.txtbox {
	width: 94%;
	font-size: 90%;
	padding: 3%;
}
#inner_frm {
	height: 520px;
	overflow-y: auto;
}
.frmbox {
	width: 95%;
	display:block;
	margin: 0 auto 1em auto;
	min-height: 100px;
	overflow: hidden;
	position: relative;
}
.ancbox {
	 min-height: 380px;
	 background-color:#111083;
}

#infolist ul {
	width: 99%;
	margin: 0 auto;
	text-align: center;
}
#infolist li {
	width: 100%;
	display: block;
	margin: 0.5em 0;
	text-align: center;
}
#infolist li img {
	max-width: 570px;
}
#infolist li  {
	padding-top: 0.2em;
	font-size: 115%;
	font-weight: bold;
	background-color: #16ACF0;
}
	
.accordion,.normal > li {
	list-style-type: none;
	margin-left: 5px;
	color: #FFF;
}
.accordion ul > li {
	text-indent: 2em;
	font-size: 240%;
}
.accordion ul > li > div {
	text-indent: 0;
	font-size: 75%;
}
.accordion,.normal li.first {
	margin-top: 5px;
}

@media screen and (min-width: 320px) {
.accordion,.normal li.first {
	zoom: 0.5;
}
.charalist div {
	zoom: 0.98;
}
}
@media screen and (min-width: 321px) {
section {
	zoom: 0.8;
}
}
@media screen and (min-width: 480px) {
.accordion,.normal li.first {
	zoom: 0.9;
}
.charalist div {
	zoom: 0.98;
}
}
.active a {
	width: 90%;
	display: block;
	color: #FF3;
}
.active > li {
	margin-top: 2px;
	margin-bottom: 2px;
}

#sub li {
	list-style-position: inside;
	list-style-image: url(../images/common/arrow.png);
	vertical-align: middle;
	line-height: 1.5em;
}

.charalist {
	width: 100%;
	/*height: 250px; //icon ver.*/
	height: auto;
	text-align: center;
	margin: 0 auto;
	padding-top: 2%;
}
.charalist div {
	width: 359px;
	font-size: 98%;
	text-shadow: 
	0px 0px 1px #001847, 
	0px 0px 8px #001847, 
	0px 0px 8px #001847;	
	text-align: left;
	line-height: 1.2em;
	margin: 0 auto;
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size:contain;
	padding-top: 15px;
	padding-right: 225px;
	padding-bottom: 70px;
	padding-left: 25px;
	overflow: hidden;
	display: block;	
}
.charalist div section {
	width: 100%;
	text-align: right;
	margin-top: 0.6em;
	font-size: 110%;
}
.charalist img {
	max-width:96%;
	height: auto;
	vertical-align:bottom;
}
.charalist ul li:after {
	content: '';	
	clear: both;
	display: block;
}

/*Charactor Setting*/
#axel {
	background-image: url(../images/chara/bg_axel.jpg);
	height: 300px;	
}
#mirto {
	background-image: url(../images/chara/bg_mirto.jpg);
	height: 300px;	
}
#rb {
	background-image: url(../images/chara/bg_rb.jpg);
	height: 300px;	
}
#charme {
	background-image: url(../images/chara/bg_charme.jpg);
	height: 300px;	
}
#rs {
	background-image: url(../images/chara/bg_rs.jpg);
	height: 340px;	
}
#ln {
	background-image: url(../images/chara/bg_ln.jpg);
	height: 340px;	
}
#weiss {
	background-image: url(../images/chara/bg_weiss.jpg);
	height: 300px;	
}
#nia {
	background-image: url(../images/chara/bg_nia.jpg);
	height: 300px;	
}
#hunt {
	background-image: url(../images/chara/bg_hunt.jpg);
	height: 360px;	
}
#zard {
	background-image: url(../images/chara/bg_zard.jpg);
	height: 320px;	
}
#rana {
	background-image: url(../images/chara/bg_rana.jpg);
	height: 360px;	
}
#lai {
	background-image: url(../images/chara/bg_lai.jpg);
	height: 360px;	
}


/*--expand ver.*/
.kwicks {
	/* recommended styles for kwicks ul container */
	width: 620px;
	list-style: none;
	position: relative;
	margin: 0 auto;
	padding-top: 2%;
}
@media screen and (min-width: 320px) {
.kwicks {
	zoom: 0.5;
}
}
@media screen and (min-width: 480px) {
.kwicks {
	zoom: 0.98;
}
}
.kwicks li{
	/* these are required, but the values are up to you (must be pixel) */
	width: 145px;
	height: 420px;
	margin-left: 5px;
	margin-right: 5px;
	/*do not change these */
	display: block;
	overflow: hidden;
	padding: 0;
}
.kwicks.horizontal li {	
	float: left;
	max-width: 100%;
}
.kwicks.horizontal #kwick_4,#kwick_8 {
	margin-right: none; 
}

.charalist ul li:nth-child(4n+1) {
	clear:both;
	margin-bottom: 10px;
}


/* twitter
---------------------------------------- */
#twitter {
	display:block;
	padding:10px 5px;
	text-align:center;
}

#twitter p {
	font-size:75%;
}

/* footer
---------------------------------------- */
footer h3 {
	display:block;
	text-align:center;
}

#serieslink {
	display:block;
}

#serieslink li {
	display:block;
	background:#ffffff;
	background:-webkit-gradient(linear,left top, left bottom, from(#ffffff), to(#d4d5e1));
	border-bottom:2px solid #b1acbf;
}
#serieslink a {
	display:block;
	padding:10px;
	color:#524e60;
	text-decoration:none;
	background-image: url(../images/bg_arrow.png);
	background-repeat: no-repeat;
	background-position: 98% center;
}

#CompanyLink {
	display:block;
	text-align:center;
	border-top:2px solid #5a3900;
	border-bottom:2px solid #5a3900;
	background:#f0e8cc;
	color:#000000;
	font-size:75%;
	line-height: 1.5em;
	height: 38px;
	padding: 10px 0px 10px 0px;
}

#CompanyLink a {color:#000000; text-decoration:none;}

.footercopy {
	display:block;
	padding:5px;
	font-size:75%;
	text-align:center;
	background-color: #0B4E8E;
}

/* BackBtn
---------------------------------------- */
#SerchDownload {
	display:block;
	padding:10px;
	text-align:center;
}

#BackBtn {
	display:block;
	text-align:center;
	margin-right: auto;
	margin-left: auto;
	padding: 20px 0 20px 0;
	background-color: #001C46;
	zoom: 0.5;
}

.close {
	padding: 1em;
	cursor: pointer;
}

/*setting
---------------------------------------- */
#pr_ban {
	width: 90%;
	margin: 0 auto;
	text-align: center;
	max-width: 600px;
}
.check {
	font-size: 80%;
	color: #F30;
	line-height: 1.2em;
}