@charset "utf-8";

/*=Information==================================================

  File Name:default.css
	1.index

	Author:Kuroneko
	LastUpdate:2014.2.14


==============================================Information END=*/



/*=1.[ index ]
==============================================================*/


h1 {
left: 30px;
top: 0px;
font-size: 80px;
letter-spacing: 0.05em;
}

h2 {
margin-top: 0;
margin-bottom: 1em;
font-family: 'Elsie Swash Caps', cursive;
font-size: 40px;
font-weight: normal;
}

section {
position: absolute;
left: 130px;
top: 0;
margin: 0;
width: auto;
z-index: 10;
}

figure{
margin:0;
padding:1em;
background:rgba(0,0,0,0.05);
}

figcaption{
text-align:right;
}

p#top-line{
position:absolute;
top:85px;
left:37px;
font-size:12px;
z-index: 5;
}

section h3 span, section h4 span {
display:inline-block;
margin-left: 10px;
padding: 2px 4px;
vertical-align: 3px;
font-size:10px;
font-weight: normal;
color: #fff;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
    *display: inline;
    *zoom: 1;
}

section h3 span.series, section h4 span.series {
background-color: #0068B7;
}

section h3 span.end, section h4 span.end {
background-color: #E4007F;
}

#longstory {
top: 2000px;
}

#longstory div {
padding: 100px 20px 0 500px;
}

#shortstory {
top: 4000px;
}

#shortstory div {
padding: 0 400px 0 0;
}

#illust {
top: 6000px;
}

#about {
top: 8000px;
}

#about ul {
margin-bottom: 1em;
}

#about th {
width: 150px;
}

#about form textarea {
height: 100px;
width: 100%;
}

#link {
top: 10000px;
}

#illust ul {
margin-bottom: 1em;
}

#illust ul li {
list-style: none;
width: 100px;
display: inline-block;
font-size:10px;
text-align: center;
margin-right: 20px;
}

#illust ul li img {
border: 3px solid #000;
}

#illust ul li img:hover {
border-color: #FFF100;
}

#link div {
width: 45%;
float: left;
}

#link table td {
line-height: 1.2;
padding-bottom: 1em;
}

footer {
position: absolute;
top: 11500px;
z-index: 10;
margin: 0;
width: 100%;
}

#side-nav {
position: fixed;
top: 30%;
left: 15px;
z-index: 20;
}

#side-nav ul {
}

#side-nav li {
position: relative;
margin: 0;
width: auto;
}

#side-nav li a {
position: relative;
display: block;
margin: 0;
width: auto;
color: #333;
font-family: 'Wire One', sans-serif;
font-size:25px;
/*
font-size: 2.5rem;
*/
}

#side-nav li a .circle {
display: block;
float: left;
margin: 7px;
height: 11px;
width: 11px;
background-color: #3b3b3b;
-webkit-border-radius: 50%;
border-radius: 50%;
-webkit-background-clip: padding-box;
background-clip: padding-box;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
-o-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
}

#side-nav li a:hover .circle, #side-nav li a.active .circle {
background-color: #656565;
-webkit-transform: scale(1.25);
-moz-transform: scale(1.25);
-ms-transform: scale(1.25);
-o-transform: scale(1.25);
transform: scale(1.25);
}

#side-nav li a.active .circle {
background-color: #959595;
}

#side-nav li a .nameTag {
display: inline-block;
position: relative;
top: -5px;
left: -5px;
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
-o-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
zoom: 1;
}

#side-nav li a:hover .nameTag {
left: 5px;
filter: alpha(opacity=100);
opacity: 100;
}


#cat, #long, #short {
position: fixed;
z-index: 0;
margin:0;
}

#cat {
bottom: 0;
left: 50px;
width: 172px;
height: 136px;
background-image: url(/img/image-cat.gif);
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
}

#long {
bottom: 0;
left: 230px;
width: 391px;
height: 580px;
background-image: url(/img/image-long.gif);
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
}

#short {
bottom: 0;
right: 20px;
width: 700px;
height: 580px;
background-image: url(/img/image-short.gif);
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
}

@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
	#cat {
	background-image: url(/img/image-cat@2x.gif);
	}
	#long {
	background-image: url(/img/image-long@2x.gif);
	}
	#short {
	background-image: url(/img/image-short@2x.gif);
	}
}