@charset "UTF-8";
/*
京都アニメーション
Copyright (C) Kyoto Animaion Co.,Ltd. All Rights Reserved.
*/

/*
font-size list (base: 12px)
 67% =  8px
 75% =  9px
 83% = 10px
 92% = 11px        175% = 21px
100% = 12px        184% = 22px
108% = 13px        192% = 23px
117% = 14px        200% = 24px
125% = 15px        209% = 25px
133% = 16px        217% = 26px
142% = 17px
150% = 18px
159% = 19px
167% = 20px
*/

/*     siteWrap     */
#siteWrap {
	position: relative;
	background: url(/img/bg/bg.png) no-repeat top center;
	background-attachment: fixed;
}
#headerWrap .header {
	top: 45px;
}
/* ---------- main ---------- */
/*     main     */
#mainWrap {
	position: relative;
	width: 1200px;
	height: 100%;
	min-height: 400px;
	padding-bottom: 80px;
	margin: 0 auto;
}
#contentsWrap {
	width: 930px;
	margin: 0 50px 0 180px;
	padding: 5px 20px 100px;
}

/* ---------- contents ---------- */
.contents > article {
	padding: 20px 20px 60px;
}

/*     navigation     */
#naviWap {
	position: absolute;
	top: 0;
	left: 50px;
	z-index: 10;
}
.naviList {
}
.naviList > li {
	display: block;
	width: 130px;
	height: 30px;
	margin-bottom: 5px;
	background-image: url(/img/navi/navi.png);
}
.naviList > li > a {
	display: block;
	width: 130px;
	height: 30px;
	text-indent: -9999em;
}
.navi01 {
	background-position: 0 0;
}
.navi01:hover { opacity: .5; }
.navi02 {
	background-position: 0 -30px;
}
.navi02:hover { opacity: .5; }
.navi03 {
	background-position: 0 -60px;
}
.navi03:hover { opacity: .5; }
.navi04 {
	background-position: 0 -90px;
}
.navi04:hover { opacity: .5; }
.navi05 {
	background-position: 0 -120px;
}
.navi05:hover { opacity: .5; }
.navi06 {
	background-position: 0 -150px;
}
.navi06:hover { opacity: .5; }
.navi07 {
	background-position: 0 -180px;
}
.navi07:hover { opacity: .5; }
.navi08 {
	background-position: 0 -210px;
}
.navi08:hover { opacity: .5; }
.navi09 {
	background-position: 0 -240px;
}
.navi09:hover { opacity: .5; }
.navi10 {
	background-position: 0 -270px;
}
.navi10:hover { opacity: .5; }
.navi11 {
	background-position: 0 -300px;
}
.navi11:hover { opacity: .5; }
.officialTwitter {
	display: block;
	width: 91px;
	height: 33px;
	background-image: url(/img/navi/navi_tw.png);
}
.officialTwitter a {
	display: block;
	width: 130px;
	height: 33px;
	text-indent: -9999em;
}
.officialTwitter:hover { opacity: .5; }


/*     footer     */
#footerWrap {
	position: absolute;
	width: 100%;
	height: 80px;
	bottom: 0;
}
.footer {
	width: 1200px;
	height: 80px;
	margin: 0 auto;
}
.author {
	float: left;
	display: table;
	height: 80px;
	font-size: 83%;
	margin-left: 210px;
}
.copyright {
	height: 100%;
	color: #6a88a9;
	display: table-cell;
	vertical-align: middle;
}
.pageTopLink {
	float: right;
	position: relative;
	width: 60px;
	height: 60px;
	margin: 20px 90px 0 0;
	text-align: center;
}
.pageTopLink a {
	position: absolute;
	display: block;
	top: 10px;
	width: 60px;
	height: 60px;
	background-color: #00a2ff;
	filter: alpha(opacity=50);
	-moz-opacity: .5;
	opacity: .5;
	-webkit-transition: .3s ease-out;
	-moz-transition: .3s ease-out;
	transition: .3s ease-out;
}
.pageTopLink a:hover {
	top: 0px;
	background-color: #00a2ff;
	filter: alpha(opacity=100);
	-moz-opacity: 1;
	opacity: 1;
}
.pageTopLink img {
	padding-top: 5px;
}