@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
*/

/* ---------- common ---------- */
#siteWrap {
	display: none;
	position: relative;
	width: 100%;
	min-width: 980px;
	height: auto !important;
	height: 100%;
	min-height: 100%;
	padding-bottom: 140px;
	overflow: hidden;
}
.vol1 #bgWrap {
	position: absolute;
	left: 50%;
	top: 0;
	width: 315px;
	height: 266px;
	margin-left: -465px;
	background: url(/books/phantom/img/bg_header_01.png) no-repeat top left;
	z-index: 0;
}
.vol2 #bgWrap {
	position: absolute;
	left: 50%;
	top: 0;
	width: 315px;
	height: 266px;
	margin-left: -465px;
	background: url(/books/phantom/img/bg_header_02.png) no-repeat top left;
	z-index: 0;
}
.vol3 #bgWrap {
	position: absolute;
	left: 50%;
	top: 0;
	width: 315px;
	height: 266px;
	margin-left: -465px;
	background: url(/books/phantom/img/bg_header_03.png) no-repeat top left;
	z-index: 0;
}

/* ---------- header ---------- */
/*     header     */
#headerWrap {
	position: relative;
	width: 980px;
	height: 175px;
	margin: 0 auto;
}
.header {
	position: absolute;
	top: 20px;
	left: 10px;
}
/*     navigation     */
.navigation {
	position: absolute;
	top: 25px;
	right: 20px;
}
.naviList {
	text-align: center;
}
.naviList li {
	display: inline-block;
	width: 90px;
	height: 102px;
	margin: 0 10px;
}
.naviList li a {
	display: block;
	width: 90px;
	height: 102px;
	text-indent: -9999em;
	opacity: 0;
	filter: alpha(opacity=0);
	transition: opacity .3s linear;
}
.naviList li, .naviList li a {
	background: url(/books/phantom/img/navi_lower3.png) no-repeat;
}
.vol1 .navi01   { background-position: 0 -306px; }
.vol1 .navi01 a { background-position: 0 0px; }
.vol2 .navi01   { background-position: 0 -408px; }
.vol2 .navi01 a { background-position: 0 -102px; }
.vol3 .navi01   { background-position: 0 -512px; }
.vol3 .navi01 a { background-position: 0 -206px; }
.vol1 .navi02   { background-position: -90px -306px; }
.vol1 .navi02 a { background-position: -90px 0px; }
.vol2 .navi02   { background-position: -90px -408px; }
.vol2 .navi02 a { background-position: -90px -102px; }
.vol3 .navi02   { background-position: -90px -512px; }
.vol3 .navi02 a { background-position: -90px -206px; }
.vol1 .navi03   { background-position: -180px -306px; }
.vol1 .navi03 a { background-position: -180px 0px; }
.vol2 .navi03   { background-position: -180px -408px; }
.vol2 .navi03 a { background-position: -180px -102px; }
.vol3 .navi03   { background-position: -180px -512px; }
.vol3 .navi03 a { background-position: -180px -206px; }
.vol1 .navi04   { background-position: -270px -306px; }
.vol1 .navi04 a { background-position: -270px 0px; }
.vol2 .navi04   { background-position: -270px -408px; }
.vol2 .navi04 a { background-position: -270px -102px; }
.vol3 .navi04   { background-position: -270px -512px; }
.vol3 .navi04 a { background-position: -270px -206px; }
.naviList li a:hover {
	opacity: 1;
	filter: alpha(opacity=100);
	transition: opacity .3s linear;
}

/* ---------- main ---------- */
#mainWrap {
	position: relative;
	width: 980px;
	height: 100%;
	margin: 0 auto;
}
#contentsWrap header {
	text-align: center;
}
#contentsWrap {
	padding-bottom: 150px;
}
/* ---------- story ---------- */
.volNavi {
	width: 300px;
	height: 70px;
	padding-left: 670px;
}
.volNavi li {
	padding: 15px;
	float: left;
}
/*     vol01     */
.navi2 a {
	display: block;
	width: 70px;
	height: 40px;
	margin: 0 0 0 auto;
	text-indent: -9999em;
	background: url(/books/phantom/img/nav_to02.png) no-repeat;
}
.story_01 {
	width: 590px;
	height: 534px;
	margin: 0 auto;
	text-indent: -9999em;
	background: url(/books/phantom/img/story_01.png) no-repeat center;
}
/*     vol02     */
.navi1 a {
	display: block;
	width: 70px;
	height: 40px;
	margin: 0 0 0 auto;
	text-indent: -9999em;
	background: url(/books/phantom/img/nav_to01.png) no-repeat;
}
.story_02 {
	width: 610px;
	height: 705px;
	margin: 0 auto;
	text-indent: -9999em;
	background: url(/books/phantom/img/story_02.png) no-repeat center;
}
.navi2to1 a {
	display: block;
	width: 70px;
	height: 40px;
	margin: 0 0 0 auto;
	text-indent: -9999em;
	background: url(/books/phantom/img/nav2_to01.png) no-repeat;
}
.navi2to3 a {
	display: block;
	width: 70px;
	height: 40px;
	margin: 0 0 0 auto;
	text-indent: -9999em;
	background: url(/books/phantom/img/nav2_to03.png) no-repeat;
}
/*     vol03     */ 
.navi3 a {
	display: block;
	width: 70px;
	height: 40px;
	margin: 0 0 0 auto;
	text-indent: -9999em;
	background: url(/books/phantom/img/nav_to03.png) no-repeat;
}
.story_03 {
	width: 540px;
	height: 455px;
	margin: 0 auto;
	text-indent: -9999em;
	background: url(/books/phantom/img/story_03.png) no-repeat center;
}

/* ---------- character ---------- */
.characterVolNavi {
	padding: 15px 50px 35px;
}
.character li {
	position: relative;
	width: 940px;
	height: 240px;
	margin-top: -55px;
	text-indent: -9999em;
}
.character li:first-child {
	margin-top: 0px;
}
/*     vol01     */
/*.characterNavi2 a {
	display: block;
	width: 185px;
	height: 40px;
	margin: 0 0 0 auto;
	text-indent: -9999em;
	background: url(/books/phantom/img/chara_01to02.png) no-repeat;
}
*/.vol1 .chara01 {
	margin-left: 30px;
	background: url(/books/phantom/img/chara_0101.png) no-repeat;
}
.vol1 .chara02 {
	margin-left: 135px;
	background: url(/books/phantom/img/chara_0102.png) no-repeat;
}
.vol1 .chara03 {
	margin-left: 30px;
	background: url(/books/phantom/img/chara_0103.png) no-repeat;
}
.vol1 .chara04 {
	margin-left: 135px;
	background: url(/books/phantom/img/chara_0104.png) no-repeat;
}
/*     vol02     */
/*.characterNavi1 a {
	display: block;
	width: 185px;
	height: 40px;
	margin: 0 0 0 auto;
	text-indent: -9999em;
	background: url(/books/phantom/img/chara_02to01.png) no-repeat;
}
*/.vol2 .chara01 {
	margin-left: 30px;
	background: url(/books/phantom/img/chara_0201.png) no-repeat;
}
.vol2 .chara02 {
	margin-left: 135px;
	background: url(/books/phantom/img/chara_0202.png) no-repeat;
}
.vol2 .chara03 {
	margin-left: 30px;
	background: url(/books/phantom/img/chara_0203.png) no-repeat;
}
.vol2 .chara04 {
	margin-left: 135px;
	background: url(/books/phantom/img/chara_0204.png) no-repeat;
}
/*     vol03     */
.vol3 .chara01 {
	margin-left: 30px;
	background: url(/books/phantom/img/chara_0301.png) no-repeat;
}
.vol3 .chara02 {
	margin-left: 135px;
	background: url(/books/phantom/img/chara_0302.png) no-repeat;
}
.vol3 .chara03 {
	margin-left: 30px;
	background: url(/books/phantom/img/chara_0303.png) no-repeat;
}
/* ---------- books ---------- */
.booksVolNavi {
	display: block;
	height: 40px;
	padding: 15px 50px 35px;
}
.books {
	display: block;
	width: 980px;
	margin-bottom: 60px;
}
.booksLeftContent {
	float: left;
	width: 400px;
}
.booksRightContent {
	float: left;
	width: 560px;
	margin-left: 20px;
}
.booksImg {
	display: block;
	text-align: right;
}
.booksImg img {
	padding: 3px;
	border: 1px #00ffff solid;
	/*border: 1px #f75e62 solid;*/
}
.booksTitle {
	/*color: #bf000e;*/
	color: #3af0f2;
	margin-bottom: 15px;
	font-size: 192%;
	font-weight: bold;
	font-family: "ヒラギノ明朝 ProN W6","HiraMinProN-W6","HG明朝E","ＭＳ Ｐ明朝","MS PMincho","MS 明朝",serif;
}
.booksInfo {
	color: #fff;
	font-size: 125%;
	line-height: 2em;
	margin: 15px 0;
}
.booksLink li {
	margin: 5px 0;
}
.booksLink li a {
	display: inline-block;
	min-width: 240px;
	padding: 5px 20px;
	color: #fff;
	font-size: 125%;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	/*background-color: #FFF;*/
	border: 1px #3af0f2 solid;
	transition: .3s ease-out;
}
.booksLink li a:hover {
	color: #FFF;
	background-color: #47DEE0;
}
/*     vol01     */
/*     vol02     */

/* ---------- special ---------- */
.specialVolNavi {
	display: block;
	height: 40px;
	padding: 15px 50px 35px;
}
.special {
	display: block;
	margin-bottom: 60px;
}
.spSubTitle {
	text-align: center;
	margin-bottom: 30px;
}
.spContent {
	text-align: center;
}
.spContent li {
	display: inline-block;
	margin: 0 10px 10px;
}
.spMovie .spContent ul {
	margin-bottom: 20px;
}
.spMovie .spContent li {
	margin: 0 20px;
}
.spContent li a {
	text-decoration: none;
}
.spContent li a > img {
	border: 1px #c9c9c9 solid;
}
.mvT {
	color: #fff;
	/*color: #5c5c5c;*/
	margin-top: 5px;
	font-size: 125%;
}
/*     vol01     */
/*     vol02     */

/* ---------- footer ---------- */
#footerWrap {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 140px;
	background: url(/books/phantom/img/bg_footer.png) repeat-x;
}
.footer {
	position: relative;
	width: 980px;
	height: 140px;
	margin: 0 auto;
	background: url(/books/phantom/img/bg_under.png) no-repeat top right;
}
.leftContent {
	float: left;
}
.shareList {
	margin: 35px 0 25px 25px;
}
.shareList li {
	display: inline-block;
	width: 26px;
	height: 26px;
	margin-right: 15px;
}
.corporateLink {
	margin: 25px 0 25px 25px;
}
.rightContent {
	float: right;
}
.linkList {
	font-size: 117%;
	text-align: right;
	margin-top: 25px;
}
.linkList li {
	margin-bottom: 10px;
}
.copyright {
	color: #FFF;
	font-size: 83%;
	text-align: right;
	margin: 20px 0;
}