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

/* ---------------------------
base setting
--------------------------- */
html, body {
	height: 100%;
	text-align: center;
}
#start { background-color: #000; }
#news, #gallery {
	background-color: #000;
	color: #fff;
}

/* ---------------------------
clearfix setting
--------------------------- */
.clearfix { zoom: 1; }
.clearfix:before, .clearfix:after {
	content: "";
	display: table;
	overflow: hidden;
}
.clearfix:after { clear: both; }

/* ---------------------------
content setting
--------------------------- */
#siteWrap {
	display: none;
	height: auto !important;
	height: 100%;
	min-height: 100%;
}
	#contentBox, #indexContentBox {
		width: 980px;
		margin: 0 auto;
		padding-bottom: 120px;
		zoom: 1;
		text-align: left;
		position: relative;
	}
	#contentBox:before, #contentBox:after, #indexContentBox:before, #indexContentBox:after {
		content: "";
		display: table;
		overflow: hidden;
	}
	#contentBox:after, #indexContentBox:after { clear: both; }
	.coppelia #indexContentBox { background: url(/books/coppelia/img/indexBgCoppelia.jpg) no-repeat right 140px; }
	.swanilda #indexContentBox { background: url(/books/coppelia/img/indexBgSwanilda.jpg) no-repeat right 140px; }
a:link    { text-decoration: underline; }
a:visited { text-decoration: underline; }
a:hover   { text-decoration: none; }
a:active  { text-decoration: none; }

/* ---------------------------
coppelia
--------------------------- */

/* start */
#startMainContent {
	display: none;
	position: relative;
	height: 540px;
	margin: 20px 0;
	background: url(/books/coppelia/img/start/startMainContentBg.jpg) #000 no-repeat center top;
}
#coppeliaStartDoor {
	display: none;
	width: 580px;
	position: absolute;
	top: 100px;
	left: 200px;
	background: url(/books/coppelia/img/start/door/doorList.jpg) no-repeat left top;
}
	#coppeliaStartDoor ul { zoom: 1; }
	#coppeliaStartDoor ul:before, #coppeliaStartDoor ul:after {
		content: "";
		display: table;
		overflow: hidden;
	}
	#coppeliaStartDoor ul:after { clear: both; }
		#coppeliaStartDoor ul li, #coppeliaStartDoor ul li a {
			display: block;
			height: 300px;
		}
			#coppeliaStartDoor ul li a img { display: none; }
		#coppeliaStartDoor-01, #coppeliaStartDoor-02 {
			float: left;
			width: 290px;
		}
		#coppeliaStartDoor-01 { background: url(/books/coppelia/img/start/door/doorList.jpg) no-repeat left top; }
		#coppeliaStartDoor-02 { background: url(/books/coppelia/img/start/door/doorList.jpg) no-repeat -290px top; }
		#coppeliaStartDoor-01:hover { background: url(/books/coppelia/img/start/door/doorList.jpg) no-repeat left -300px; }
		#coppeliaStartDoor-02:hover { background: url(/books/coppelia/img/start/door/doorList.jpg) no-repeat -290px -300px; }
#coppeliaStartQuestion {
	display: none;
	position: absolute;
	bottom: 30px;
	left: 190px;
	text-align: center;
}

/* globalHeader */
#globalNavWrap {
	float: left;
	width: 380px;
}
#globalHeader { width: 380px; }
	#siteName { width: 0 }
		#siteName a { display: block; }
#release {
	width: 380px;
	height: 100px;
	background: url("/books/coppelia/img/advertise/releaseBg.png") no-repeat left top;
}
	#release img { display: none; }

/* globalNav */
#globalNav { margin: 10px 0; }
	#globalNav ul {
		width: 250px;
		background: url("/books/coppelia/img/globalNav/globalNavList.png") no-repeat left top;
	}
	#news #globalNav ul, #gallery #globalNav ul { background: url("/books/coppelia/img/globalNav/globalNavList_w.png") no-repeat left top; }
		#globalNav span { display: none; }
		#globalNav ul li, #globalNav ul li a {
			width: 250px;
			height: 60px;
			display: block;
		}
		#globalNavList-01 a:hover { background:url("/books/coppelia/img/globalNav/globalNavList.png") -250px 0px no-repeat; }
		#globalNavList-02 a:hover { background:url("/books/coppelia/img/globalNav/globalNavList.png") -250px -60px no-repeat; }
		#globalNavList-03 a:hover { background:url("/books/coppelia/img/globalNav/globalNavList.png") -250px -120px no-repeat; }
		#globalNavList-04 a:hover { background:url("/books/coppelia/img/globalNav/globalNavList.png") -250px -180px no-repeat; }
		#globalNavList-05 a:hover { background:url("/books/coppelia/img/globalNav/globalNavList.png") -250px -240px no-repeat; }
		#globalNavList-06 a:hover { background:url("/books/coppelia/img/globalNav/globalNavList.png") -250px -300px no-repeat; }
		#globalNavList-01 #currentTop          { background:url("/books/coppelia/img/globalNav/globalNavList.png") -250px 0px no-repeat; }
		#globalNavList-02 #currentNews         { background:url("/books/coppelia/img/globalNav/globalNavList.png") -250px -60px no-repeat; }
		#globalNavList-03 #currentIntroduction { background:url("/books/coppelia/img/globalNav/globalNavList.png") -250px -120px no-repeat; }
		#globalNavList-04 #currentCharacter    { background:url("/books/coppelia/img/globalNav/globalNavList.png") -250px -180px no-repeat; }
		#globalNavList-05 #currentGallery      { background:url("/books/coppelia/img/globalNav/globalNavList.png") -250px -240px no-repeat; }
		#globalNavList-06 #currentSpecial      { background:url("/books/coppelia/img/globalNav/globalNavList.png") -250px -300px no-repeat; }
		#news #globalNavList-01 a:hover, #gallery #globalNavList-01 a:hover { background:url("/books/coppelia/img/globalNav/globalNavList_w.png") -250px 0px no-repeat; }
		#news #globalNavList-02 a:hover, #gallery #globalNavList-02 a:hover { background:url("/books/coppelia/img/globalNav/globalNavList_w.png") -250px -60px no-repeat; }
		#news #globalNavList-03 a:hover, #gallery #globalNavList-03 a:hover { background:url("/books/coppelia/img/globalNav/globalNavList_w.png") -250px -120px no-repeat; }
		#news #globalNavList-04 a:hover, #gallery #globalNavList-04 a:hover { background:url("/books/coppelia/img/globalNav/globalNavList_w.png") -250px -180px no-repeat; }
		#news #globalNavList-05 a:hover, #gallery #globalNavList-05 a:hover { background:url("/books/coppelia/img/globalNav/globalNavList_w.png") -250px -240px no-repeat; }
		#news #globalNavList-06 a:hover, #gallery #globalNavList-06 a:hover { background:url("/books/coppelia/img/globalNav/globalNavList_w.png") -250px -300px no-repeat; }
		#news #globalNavList-01 #currentTop, #gallery #globalNavList-01 #currentTop                   { background:url("/books/coppelia/img/globalNav/globalNavList_w.png") -250px 0px no-repeat; }
		#news #globalNavList-02 #currentNews, #gallery #globalNavList-02 #currentNews                 { background:url("/books/coppelia/img/globalNav/globalNavList_w.png") -250px -60px no-repeat; }
		#news #globalNavList-03 #currentIntroduction, #gallery #globalNavList-03 #currentIntroduction { background:url("/books/coppelia/img/globalNav/globalNavList_w.png") -250px -120px no-repeat; }
		#news #globalNavList-04 #currentCharacter, #gallery #globalNavList-04 #currentCharacter       { background:url("/books/coppelia/img/globalNav/globalNavList_w.png") -250px -180px no-repeat; }
		#news #globalNavList-05 #currentGallery, #gallery #globalNavList-05 #currentGallery           { background:url("/books/coppelia/img/globalNav/globalNavList_w.png") -250px -240px no-repeat; }
		#news #globalNavList-06 #currentSpecial, #gallery #globalNavList-06 #currentSpecial           { background:url("/books/coppelia/img/globalNav/globalNavList_w.png") -250px -300px no-repeat; }
#globalNavTwitter { padding: 0 0 20px 10px; }

/* mainContentWrap */
#mainContentWrap {
	float: left;
	width: 600px;
	margin-bottom: 30px;
}
	#mainContent {
		margin: 20px;
		position: relative;
	}
	#mainContent h2 { font-size: 192%; }

/* index */

/* What's News */
#globalNews { width: 320px; }
	#globalNews h2 { border-bottom: 1px #ccc dotted; }
	#globalNews dl {
		height: 150px;
		margin: 10px;
		overflow: auto;
	}
		#globalNews dl dd {
			padding-left: 10px;
			margin-bottom: 10px;
			line-height: 1.8em;
		}
			#globalNews dl dd a {
				color: #666;
			}

/* news */
.news {
	padding: 10px 0 5px;
	margin-bottom: 30px;
	border-bottom: 1px #ccc dotted;
}
	.news h3 {
		border-bottom: 2px #fff solid;
		padding-left: 55px;
		background: url(/books/coppelia/img/mainContent/news/newsTitle.png) no-repeat 5px 6px;
		font-size: 159%;
	}
	.newsPubDate {
		text-align: right;
		padding: 5px 50px 5px 0;
		background: url(/books/coppelia/img/mainContent/news/newsUpdated.png) no-repeat right 8px;
		color: #666;
	}
	.news p {
		padding: 30px 0;
		font-size: 125%;
		line-height: 1.8em;
	}
		.news p a { color: #999; }
	.newsGoToTop {
		padding-right: 15px;
		background: url(/books/coppelia/img/mainContent/news/goToTop.png) no-repeat right 2px;
		text-align: right;
	}
		.newsGoToTop a {
			color: #999;
			text-decoration: none;
		}
			.newsGoToTop a:hover { text-decoration: underline; }

/* introduction */

/* character */
#characterNav {
	padding: 10px 0;
	zoom: 1;
}
#characterNav:before, #characterNav:after {
	content: "";
	display: table;
	overflow: hidden;
}
#characterNav:after { clear: both; }
	#characterNav li {
		float: left;
		padding-left: 15px;
	}
		#characterNav li.active a {
			color: #999;
		}
		#characterNav li a {
			color: #000;
			cursor: pointer;
			text-decoration: none;
		}
			#characterNav li a:hover { color: #999; }
#characterList {
	position: relative;
	margin: 10px 0 0;
	zoom: 1;
}
#characterList:before, #characterList:after {
	content: "";
	display: table;
	overflow: hidden;
}
#characterList:after { clear: both; }
	.scrollable {
		position: relative;
		float: left;
		width: 500px;
		height: 900px;
		overflow: hidden;
	}
		.scrollable .items {
			position: absolute;
			width: 10000em;
			clear: both;
		}
			.items div {
				float: left;
				width: 500px;
			}
	#characterControlPrev {
		position: fixed;
		top: 300px;
		z-index: 1;
	}
	#characterControlNext {
		position: fixed;
		top: 300px;
		margin-left: 470px;
		z-index: 1;
	}
	a.browse {
		width: 30px;
		height: 80px;
		display: block;
		line-height: 80px;
		color: #000;
		font-size: 217%;
		cursor: pointer;
		text-align: center;
	}
		a.browse:hover { color: #999; }
	a.disabled	{ visibility: hidden !important; }

/* gallery */
.galleryList {
	padding: 30px 0 10px;
	zoom: 1;
}
.galleryList:before, .galleryList:after {
	content: "";
	display: table;
	overflow: hidden;
}
.galleryList {
	clear: both;
}
	.gallery {
		float: left;
		width: 280px;
		text-align: center;
	}
		.gallery a {
			display: block;
			padding: 0 10px;
		}
		.gallery p img {
			vertical-align: text-top;
		}

/* spceial */
.special {
	padding: 10px 0 5px;
	margin-bottom: 30px;
	border-bottom: 1px #ccc dotted;
}
	.special h3 {
		border-bottom: 2px #000 solid;
		padding-left: 65px;
		background: url(/books/coppelia/img/mainContent/special/specialTitle.png) no-repeat 5px 6px;
		font-size: 159%;
	}
	.special p {
		padding: 15px 10px;
		font-size: 117%;
	}
.specialGoToTop {
	padding-right: 15px;
	background: url(/books/coppelia/img/mainContent/news/goToTop.png) no-repeat right 2px;
	text-align: right;
}
	.specialGoToTop a {
		color: #999;
		text-decoration: none;
	}
		.specialGoToTop a:hover { text-decoration: underline; }
.wallPaperDownloadThumb {
	padding: 20px 0;
	text-align: center;
}
.wallPaperDownloadLink {
	text-align: center;
	padding: 10px 0 40px;
	zoom: 1;
}
.wallPaperDownloadLink:before, .wallPaperDownloadLink:after {
	content: "";
	display: table;
	overflow: hidden;
}
.wallPaperDownloadLink:after {
	clear: both;
}
	.wallPaperDownloadLink li {
		float: left;
		line-height: 1.8em;
		padding: 0 5px;
	}
		.wallPaperDownloadLink li a {
			color: #000;
		}
			.wallPaperDownloadLink li a:hover {
				color: #999;
			}
.twitterIconDownloadLink {
	padding: 10px 0 ;
	zoom: 1;
}
.twitterIconDownloadLink:before, .twitterIconDownloadLink:after {
	content: "";
	display: table;
	overflow: hidden;
}
.twitterIconDownloadLink:after {
	clear: both;
}
	.twitterIconDownloadLink li {
		float: left;
		margin-left: 20px;
	}
		.twitterIconDownloadLink li a {
			display: block;
			padding: 3px;
			border: 1px #ccc solid;
			-webkit-box-shadow: 3px 3px 3px 0 rgba(0,0,0,0.2);
			-moz-box-shadow: 3px 3px 3px 0 rgba(0,0,0,0.2);
			box-shadow: 3px 3px 3px 0 rgba(0,0,0,0.2);
		}
			.twitterIconDownloadLink li a:hover {
				border: 1px #000 solid;
			}
	.twitterIconAllDownloadLink a {
		color: #000;
	}
		.twitterIconAllDownloadLink a:hover {
			color: #999;
		}
.bookCoverDownloadThumb {
	text-align: center;
}
.bookCoverDownloadLink {
	padding: 20px 0 40px;
}
	.bookCoverDownloadLink li {
		line-height: 1.8em;
		padding: 5px 0 5px 20px;
		font-size: 125%;
	}
		.bookCoverDownloadLink li a {
			color: #000;
		}
			.bookCoverDownloadLink li a:hover {
				color: #999;
			}
#creatorComment {
	margin: 40px 40px 0;;
	padding-top: 25px;
	background: url(/books/coppelia/img/mainContent/creatorCommentBg.png) no-repeat left top;
	zoom: 1;
}
#creatorComment:before, #creatorComment:after {
	content: "";
	display: table;
	overflow: hidden;
}
#creatorComment:after {
	clear: both;
}
	#creatorComment li {
		float: left;
	}
		#creatorComment li a {
			width: 240px;
			height: 60px;
			display: block;
		}
		#authorComment { background: url(/books/coppelia/img/mainContent/authorCommentBg.png) no-repeat left top; }
		#illustratorComment { background: url(/books/coppelia/img/mainContent/illustratorCommentBg.png) no-repeat left top; }
		#authorComment:hover { background: url(/books/coppelia/img/mainContent/authorCommentBg.png) no-repeat left -60px; }
		#illustratorComment:hover { background: url(/books/coppelia/img/mainContent/illustratorCommentBg.png) no-repeat left -60px; }

/* globalFooter */
#globalFooter {
	width: 980px;
	position: absolute;
	bottom: 100px;
	zoom: 1;
}
#globalFooter:before, #globalFooter:after {
	content: "";
	display: table;
	overflow: hidden;
}
#globalFooter:after { clear: both; }
	#socialLink {
		float: left;
		margin-left: 5px;
		zoom: 1;
	}
	#socialLink:before, #socialLink:after {
		content: "";
		display: table;
		overflow: hidden;
	}
	#socialLink:after { clear: both; }
		#socialLink li {
			float: left;
			margin-left: 5px;
		}
			#socialLink #twitter { margin-left: 0;}
			#socialLink #hatena { padding-right: 8px; }
	#worksCopyright { float: right; }