@charset "UTF-8";
/*html5*/
header, footer, nav, section, article, figure, aside {
	display:block;
}

/*レイアウト*/
body,
body>header,
body>header>*,
body>section,
body>aside,
body>footer{
margin:0;
padding:0;
}

body{
	position:relative;
}

body>header{
	position:fixed;
	height:10%;
	width:100%;
	bottom:90%;
}
body>nav{
	position:fixed;
	height:11%;
	width:85%;
	bottom:89%;
	right:0;
}

body>section,
body>aside{
	position:fixed;
	bottom:5%;
	height:85%;
}
body>section{
	width:85%;
	right:0;
	overflow:auto;
	line-height:1.3em;
}
body>aside{
	width:15%;
	left:0;
}


body>footer{
	position:fixed;
	bottom:0;
	height:4%;
	width:100%;
}

section>section,
section>article{
margin:0 1em;
}


@media all and (max-height:500px) {
	body{
		overflow:auto;
	}

	body>header{
		position:static;
		height:50px;
		bottom:450px;
	}
	
	body>nav{
		position:absolute;
		height:55px;
		top:0;
	}

	body>section,
	body>aside{
		position:static;
		bottom:25px;
		height:425px;
	}
	
	body>section{
		float:right;
	}
	
	body>aside{
		float:left;
	}

	body>footer{
		position:static;
		bottom:0;
		clear:both;
		height:25px;
	}
}

@media all and (max-width:700px) {
	html,body{
	height:100%;
	}
	body{
		overflow:auto;
		width:700px;
	}

	body>header{
		position:static;
	}
	
	body>nav{
		position:absolute;
		width:550px;
	}

	body>section,
	body>aside{
		position:static;
		height:87%;
	}
	
	body>section{
		float:right;
		width:550px;
	}
	
	body>aside{
		float:left;
		width:150px;
	}

	body>footer{
		position:static;
		clear:both;
	}
}






/*スタイル*/
*{
	z-index:10;
}

body{
	background:#565656;
}

body>header{
	position:fixed;
	height:10%;
}
body>section,
body>aside{
/*
	border:1px solid #ff0000;
	margin:-1px;
*/
}

body>section{
	padding-top:1em;
	padding-bottom:1em;
	border-width: 30px 70px;
	border-image: url("img/sec_bak.png") 30 70 fill repeat;
	-o-border-image: url("img/sec_bak.png") 30 70 30 70 / 30px 70px 30px 70px repeat;
	border-style:solid;
	box-sizing: border-box;
	overflow:auto;
}
body>section *,
body>header *{
	color:#aeaeae;
}
body>section>h1,
body>section>h2,
body>section>h3,
body>section>h4,
body>section>h5,
body>section>h6{
	clear:both;
}

body>section>img{
	float:right;
	margin:0 0 1em 1em;
}

body>footer{
	background-color: hsla(0,100%,50%,0.4);
	box-shadow: inset hsla(0,0%,15%,  1) 0  0px 0px 4px, 	/* border */
						inset hsla(0,0%,15%, .8) 0 -1px 5px 4px, 	/* soft SD */
						inset hsla(0,0%,0%, .25) 0 -1px 0px 7px,	/* bottom SD */
						inset hsla(0,0%,10%,.7) 0  2px 1px 7px, 	/* top HL */
					　		  hsla(0,0%, 0%,.15) 0 -5px 6px 4px, 	/* outer SD */
					　		  hsla(0,0%,10%,.5) 0  5px 6px 4px;	/* outer HL */	
	background-image: linear-gradient(top, hsla(0,60%,78%,0.4)  0%,
																				hsla(0,60%,90%,0.7) 50%,
																				hsla(0,60%,78%,0.4) 57%,
																				hsla(0,60%,70%,0.3)100%);
	z-index:50;
}

body>footer>p,
body>footer>address,
body>footer>small{
	position:absolute;
	display:block;
	bottom:0;
	right:0;
	font-size:small;
}
body>footer>a{
	display:block;
	position:fixed;
	bottom:2%;
	right:2%;
	background:rgba(0,0,0,0.5);
	padding:10px 20px;
	color:white;
	background-clip:content-box;
	text-decoration:none;
}
body>footer>a:hover{
	background:rgba(0,0,0,0.8);
	background-clip:content-box;
}
body>footer>a:hover:after{
	  border-bottom:10px solid rgba(0,0,0,0.8);
}

body>footer>a:after {
	content:'';
	border-left:8px solid transparent;
	border-right:8px solid transparent;
	border-bottom:10px solid rgba(0,0,0,0.5);
	position:absolute;
	top:0;
	left:50%;
}
body>footer>a>span {
	display:block;
	padding:5px;
	box-shadow:0 0 2px 2px rgba(255,255,255,1);
	z-index:50;
}
body>footer>p{
	bottom:30%;
	right:auto;
	left:2%;
	margin:0;
	padding:0;
}


body>footer>small{
	bottom:20%;
	right:1%;
}
body>footer>address{
	top:0;
	margin:0 40%;
	width:20%;
	height:100%;
	text-align:center;
}
body>footer>address *{
	padding:0;
	margin:0;
}
body>footer>address>form{
	display:table;
	width:100%;
	height:100%;
	vertical-align:middle;
}
body>footer>address>form>input{
	display:table-cell;
	width:100%;
	height:100%;
	vertical-align:middle;
	border:none;
	background-color:transparent;
	color:#0000ff;
}


body>footer>address>form>:hover{
	color:#ff0000;
	cursor: pointer;
}
address span,
address kbd{
	display:none;
}

body>header>hgroup {height:100%;position:relative;}

body>header>nav>h2{display:none;}

body>header>hgroup>*{margin:0;padding:0;height:100%;}
body>header>hgroup>h1 {position:absolute;display:block;width:10%;height:100%;}
body>header>hgroup>h2 {
	border-image: url("img/hd.png") 10 fill;
	-o-border-image: url("img/hd.png") 10 10 10 10 / 10px 10px 10px 10px;
	border-style:solid;
	border-width:10px 10px;
	padding-top:1%;
	display:block;
	position:absolute;
	overflow:hidden;
	box-sizing: border-box;
	width:90%;
	height:85%;
	white-space: nowrap;
	right:0;
}
body>header>hgroup>h1>a {
	display:block;
	font-size:5px;
	text-indent:-500000px;
	overflow:hidden;
	width:100%;
	height:100%;
	background-image:url("img/rogo_left.gif");
	background-size:auto 100%;
	background-repeat:no-repeat;
	background-position:center center;
}
@media all and (max-height:500px) {
	header>hgroup>h1{
		height:30px;
	}
}

body>header>hgroup>h2:after {
	content: "cursor";
	display:inline-block;
	text-indent:50000px;
	overflow:hidden;
	width:1em;
	height:1em;
	line-height:100%;
	background-image:url("img/txt_car.gif");
	background-repeat:repeat-y;
}

body>header>nav{
	position:absolute;
	right:0;
	top:0;
	height:100%;
	width:94%;
	overflow:hidden;
	background-image:url("img/navline.png");
	background-repeat:repeat-x;
	background-position:left bottom;

/*
	background-repeat:repeat-x;
	background-position:300px bottom;
*/

}

body>header>nav>ul,
body>header>nav>ul>li{
	margin:0;
	padding:0;
	list-style:none;
}
body>header>nav>ul{
	position:absolute;
	bottom:0;
	left:0;
	height:100%;
	width:100%;
}

body>header>nav>ul>li>a{
	position:absolute;
	bottom:0;
	left:0;
	border-image: url("img/nav00.png") 15 fill round;
	-o-border-image: url("img/nav00.png") 15 15 15 15 / 15px 15px 15px 15px round;
	border-style:solid;
	border-width:10px; 
	text-decoration:none;
	white-space: nowrap;
	box-sizing: border-box;
	color:#ffffff;
	text-shadow:1px 1px 0px #000000,-1px -1px 0px #000000,0px 1px 0px #000000,1px 0px 0px #000000;
	margin:0;
	padding:0;
	width:100%;
	text-align:center;
}

body>header>nav>ul>li>a{
	transition-property: transform;
	transition-duration:200ms;
	transition-timing-function:ease-in-out;
}

body>header>nav>ul>li>a[href="/rule/index.html"]{
	border-image: url("img/nav01.png") 15 fill round;
	-o-border-image: url("img/nav01.png") 15 15 15 15 / 15px 15px 15px 15px round;
}

body>header>nav>ul>li>a[href="/world/index.html"]{
	border-image: url("img/nav02.png") 15 fill round;
	-o-border-image: url("img/nav02.png") 15 15 15 15 / 15px 15px 15px 15px round;
}

body>header>nav>ul>li>a[href="/person/index.html"]{
	border-image: url("img/nav03.png") 15 fill round;
	-o-border-image: url("img/nav03.png") 15 15 15 15 / 15px 15px 15px 15px round;
}

body>header>nav>ul>li>a[href="/novel/index.html"]{
	border-image: url("img/nav04.png") 15 fill round;
	-o-border-image: url("img/nav04.png") 15 15 15 15 / 15px 15px 15px 15px round;
}

body>header>nav>ul>li:hover {
/*
	transform: scale(1.3);
*/
	transform-origin:left bottom;
 	transform:rotate(-10deg);
}


body>header>nav>ul>li:hover {
	z-index:20;
}

body>header>nav>ul>li{
	display:block;
	position:absolute;
	bottom:1px;
	width:4em;
	visibility:visible;
	right: 0;
}
body>header>nav>ul>li:nth-child(1){
	height:100%;
	right:0;
}
body>header>nav>ul>li:nth-child(1)>a{height:100%;}


body>header>nav>ul>li>span{
	display:none;
}


footer{
	clear:both;
}

body>nav{
	overflow:hidden;
	position:fixed;
	bottom:59%;
	height:30%;
	width:15%;
	left:1%;
	background: rgba(255,255,255,0.2);
	border:1px solid rgba(255,0,0,0.6);
	box-shadow: 1px 1px 5px 5px rgba(255,0,0,0.5),inset 1px 1px 3px 3px rgba(255,255,255,0.6); 
	padding-bottom:3em;
	box-sizing: border-box;
}

body>nav.noside{
	height:80%;
	bottom:6%;
}


body>nav>h1,
body>aside>h1{
	display:none;
}
body>nav ul,
body>nav ul ul,
body>nav ul ul ul{
	list-style:none;
	margin:1em 0 0 0.5em;
	padding:0;
}
body>nav ul ul,
body>nav ul ul ul{
	margin-top:0;
}
body>nav ul a{
	font-size:smaller;
	display:block;
	text-decoration:none;
	color:#ffffff;
	text-shadow:1px 1px 2px rgba(0,0,0,1),1px 1px 2px rgba(0,0,0,1);
	padding:5px 0 5px 1em;
	box-shadow:inset 1px 1px 1px 1px rgba(0,0,0,1),inset 1px 1px 2px 2px rgba(255,255,255,0.6); 
	background-image: linear-gradient(top, hsla(0,0%,78%,0.4)  0%,
																				hsla(0,0%,90%,0.7) 50%,
																				hsla(0,0%,78%,0.4) 57%,
																				hsla(0,0%,70%,0.3)100%);
}
body>nav ul a:hover{
	text-shadow:1px 1px 0px rgba(255,0,0,0.5);
	box-shadow:inset 1px 1px 2px 2px rgba(255,0,0,0.4); 
}
body>aside{
	bottom:6%;
	height:52%;
	width:16%;
	left:1%;
	overflow:hidden;
	z-index:1;
	border-style: solid;
	border-width:5px; 
	border-right:none;
	box-sizing: border-box;
	border-image: url("img/aside.png") 5 fill;
	-o-border-image: url("img/aside.png") 5 5 5 5 / 5px 5px 5px 5px;
	padding-bottom:2em;
}

/* Firefox hack start */
@-moz-document url-prefix() {
　　　　 body>aside{
　　　　　　　　 width:15%;
　　　　 }
}


body>aside.nonav{
	bottom:6%;
	height:80%;
}
body>aside>*{
	margin:1em;
	font-size:smaller;
	color:#dedede;
	text-shadow:1px 1px 0px #000000;
}

body>aside h2{
}

body>aside p,
body>aside div>p{
}

body>aside h2+p{
	margin-top:0;
	font-size:smaller;
}
body>aside h3{
	font-size:100%;
	background:rgba(255,255,255,0.2);
}

body>aside ol{
	margin:0;
	padding:0 0 0 1.5em;
}
body>aside strong{
	display:block;
	margin:0 0 1em 0;
	font-weight:bold;
}
body>aside dl,
body>aside dl>dt,
body>aside dl>dd{
	display:block;
	width:auto;
	border:none;
}
body>aside dl{
	margin-right:1em;
}
body>aside dl>dt{
	background:rgba(255,255,255,0.3);
}

body>section>h2{
	line-height:1.5em;
	min-height:1.5em;
	font-size:180%;
	border-radius: 3px;
	background-image: linear-gradient(top, hsla(0,0%,78%,0.4)  0%,
																				hsla(0,0%,90%,0.7) 50%,
																				hsla(0,0%,78%,0.4) 57%,
																				hsla(0,0%,70%,0.3)100%);
	color:#ffffff;
	text-shadow:2px 2px 4px rgba(255,0,0,0.7),1px 1px 2px rgba(255,0,0,0.7),-1px -1px 1px rgba(255,0,0,0.7);
}
body>section>h2 *{
	color:#ffffff;
}
body>section>h3{
	color:#ffffff;
	text-shadow:2px 2px 4px rgba(0,0,0,0.7),1px 1px 2px rgba(0,0,0,0.7),-1px -1px 1px rgba(0,0,0,0.7);
}
body>section>h3 *{
	color:#ffffff;
}
body>section>h4,
body>section>h4 *{
	color:#ffffff;
}

body>section>p,
body>section>h3,
body>section>h4{
margin-left:1em;
}


/*スクロールバー*/
/* Let's get this party started */
body>section::-webkit-scrollbar {
	width: 3px;
}
 
/* Track */
body>section::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.3); 
	-webkit-border-radius: 6px;
}
 
/* Handle */
body>section::-webkit-scrollbar-thumb {
	-webkit-border-radius: 6px;
	border-radius: 6px;
	background: rgba(255,0,0,0.5); 
	-webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.3); 
}
/*
body>section.scroll1::-webkit-scrollbar-thumb {
	background: rgba(255,0,0,0.2); 
	-webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.1); 
}
body>section.scroll2::-webkit-scrollbar-thumb {
	background: rgba(255,0,0,0.4); 
	-webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.2); 
}
body>section.scroll3::-webkit-scrollbar-thumb {
	background: rgba(255,0,0,0.6); 
	-webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.3); 
}
body>section::-webkit-scrollbar-thumb:hover ,
body>section.scroll4::-webkit-scrollbar-thumb {
	background: rgba(255,0,0,0.8); 
	-webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.5); 
}
*/
body>section::-webkit-scrollbar-thumb:window-inactive {
	background: rgba(255,0,0,0.4); 
}


body>aside::-webkit-scrollbar {
	width: 3px;
}

body>aside::-webkit-scrollbar-thumb {
	border-radius: 6px;
	border-radius: 6px;
	background: rgba(255,0,0,0); 
	box-shadow: inset 0 0 4px rgba(0,0,0,0); 
}

html:after{
	content:'';
	display:block;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-image:url("img/Jtowercomp.gif");
	background-repeat:no-repeat;
	background-position:center center;
	background-color:#000000;
}