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

/* ---------------------------
main visual setting
--------------------------- */
html { background: #fff; }
#mainVisualWrap {
	width: 100%;
	height: 180px;
	padding: 35px 0;
	clear: both;
	background: url(/img/mainVisual/mainVisualWrapBg.png) #fff repeat left top;
}
	#mainVisual {
		width: 960px;
		height: 180px;
		margin: 0 auto;
		overflow: hidden;
		position: relative;
	}
		#mainVisualMenu { zoom: 1; }
		#mainVisualMenu:before, #mainVisualMenu:after {
			content: "";
			display: table;
			overflow: hidden;
		}
		#mainVisualMenu:after { clear: both; }
			#mainVisualMenu li {
				float: left;
				width: 216px;
				position: relative;
			}
				#mainVisualMenu li figure figcaption {
					width: 196px;
					position: absolute;
					left: 0;
					bottom: -100%;
					padding: 10px;
					background: rgba(0, 0, 0, 0.7);
					background: url(/img/mainVisual/mainVisualMenuFigcaptionBg.png) repeat\9; /* IE8 and below*/
					text-align: left;
					transition: 0.3s ease-in-out;
					-webkit-transition: 0.3s ease-in-out;
					-moz-transition: 0.3s ease-in-out;
					-o-transition: 0.3s ease-in-out;
				}
					#mainVisualMenu li figure figcaption a {
						color: #fff;
						text-decoration: none;
					}
						#mainVisualMenu li figure figcaption a h2 {
							font-size: 117%;
							font-weight: bold;
						}
						#mainVisualMenu li figure figcaption a p { font-size: 92%; }
			#mainVisualMenuControlPrev, #mainVisualMenuControlNext {
				width: 50px;
				height: 180px;
				position: absolute;
				top: 0;
				background: white;
			}
			#mainVisualMenuControlPrev {
				left: 0;
				background: url(/img/mainVisual/mainVisualMenuLeftGradient.png) no-repeat left top;
				background: linear-gradient(right, rgba(255, 255, 255, 0), white 50%, white);
				background: -moz-linear-gradient(right, rgba(255, 255, 255, 0), white 50%, white);
				background: -webkit-gradient(linear, right top, left top, from(rgba(255, 255, 255, 0)), color-stop(50%, white), to(white));
			}
			#mainVisualMenuControlNext {
				right: 0;
				background: url(/img/mainVisual/mainVisualMenuRightGradient.png) no-repeat left top;
				background: linear-gradient(left, rgba(255, 255, 255, 0), white 50%, white);
				background: -moz-linear-gradient(left, rgba(255, 255, 255, 0), white 50%, white);
				background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(50%, white), to(white));
			}
				#mainVisualMenuControlPrev span, #mainVisualMenuControlNext span {
					display: block;
					width: 20px;
					height: 60px;
					margin: 60px 15px;
					background: rgba(0, 0, 0, 0.7);
					background: url(/img/mainVisual/mainVisualMenuControlBg.png) repeat\9; /* IE8 and below*/
					line-height: 60px;
					color: #fff;
					font-size: 125%;
					cursor: pointer;
				}
				#mainVisualMenuControlPrev span:hover, #mainVisualMenuControlNext span:hover {
					background: rgba(0, 0, 0, 0.5);
					background: url(/img/mainVisual/mainVisualMenuControlBg_r.png) repeat\9; /* IE8 and below*/
				}

/* ---------------------------
content setting
--------------------------- */

/* top main content */
#topMainContentBox {
	width: 630px;
	float: left;
}
	.topMainContent { margin: 10px; }
		.topMainContent header {
			border-bottom: 1px #e6521e dotted;
			zoom: 1;
		}
		.topMainContent header:before, .topMainContent header:after {
			content: "";
			display: table;
			overflow: hidden;
		}
		.topMainContent header:after { clear: both; }
			.topMainContent header h2 { float: left; }
			.topMainContent header ul {
				float: right;
				margin: 20px 0;
			}
				.topMainContent header ul li {
					float: right;
					margin: 0 10px;
				}
					.topMainContent header ul li.rss {
						padding-left: 15px;
						background: url(/img/icon/rss.png) no-repeat left 3px;
					}
					.topMainContent header ul li.list {
						padding-left: 15px;
						background: url(/img/icon/list.png) no-repeat left 3px;
					}
					.topMainContent header ul li a {
						text-decoration: none;
						color: #e6521e;
					}
					.topMainContent header ul li a:hover { text-decoration: underline; }
		/* information */
		.topAdvertiseBanner { padding: 10px 0; }
			.topAdvertiseBanner a {
				display: block;
				text-align: center;
			}
		#topMainContentImportantInfo {
			clear: both;
			margin: 5px 0;
		}
			.topImportantInfoData {
				padding: 5px 0;
				zoom: 1;
			}
			.topImportantInfoData:before, .topImportantInfoData:after {
				content: "";
				display: table;
				overflow: hidden;
			}
			.topImportantInfoData:after { clear: both; }
			.topImportantInfoData aside { float: left; }
				.topImportantInfoData p {
					float: left;
					padding: 2px 0 2px 110px;
					background: url(/img/information/topImportantInfo.png) no-repeat 5px 1px;
				}
				.topImportantInfoData p.shop {
					background: url(/img/information/InfoShop.png) no-repeat 5px 1px;
				}
					.topImportantInfoData p a { color: #ff3333; }
				.topImportantInfoPubDate { padding: 2px 0; }
			.topInfoData {
				padding: 0 5px;
				border-top: 1px #ccc dotted;
				zoom: 1;
			}
			.topInfoData:before, .topInfoData:after {
				content: "";
				display: table;
				overflow: hidden;
			}
			.topInfoData:after { clear: both; }
				.topInfoData:hover { background: #f9f9f9; }
				.topInfoData:first-child {border-top: 0px}
				.topInfoThumb {
					float: left;
					width: 76px;
					margin: 15px 0;
					background: #fff;
				}
					.topInfoThumb a {
						display: block;
						padding: 2px;
						border: 1px #ccc solid;
						text-decoration: none;
					}
				.topInfoText {
					float: left;
					width: 524px;
					margin: 10px 0;
				}
					.topInfoPubDate { padding: 3px 0; }
						aside.info { background: url(/img/information/InfoNews.png) no-repeat 10px 2px; }
						aside.shop { background: url(/img/information/InfoShop.png) no-repeat 10px 2px; }
						aside.event { background: url(/img/information/InfoEvent.png) no-repeat 10px 2px; }
						.topInfoPubDate time { padding: 3px 50px 3px 110px; }
							.topInfoPubDate time.new { background: url(/img/new.png) no-repeat right 4px; }
					.topInfoText p {
							padding: 5px 0 0 10px;
							line-height: 1.6em;
						}
						.topInfoText p a {
							color: #333;
							text-decoration: none!important;
						}
						.topInfoText p a:hover { text-decoration: underline; }
						.topInfoText p a.info:hover { color: #3366ff; }
						.topInfoText p a.shop:hover { color: #ff6633; }
						.topInfoText p a.event:hover { color: #009900; }
						.topInfoText p.extraLink a { padding-right: 35px; }
						.topInfoText p.extraLink a.info {
							color: #3366ff;
							background: url(/img/icon/extraLinkNews.png) no-repeat right 1px;
						}
						.topInfoText p.extraLink a.shop {
							color: #ff6633;
							background: url(/img/icon/extraLinkShop.png) no-repeat right 1px;
						}
						.topInfoText p.extraLink a.event {
							color: #009900;
							background: url(/img/icon/extraLinkEvent.png) no-repeat right 1px;
						}
/* sub content */
#topSubContentBox {
	width: 350px;
	float: left;
}
	.topSubContent { margin: 10px; }
		.topSubContent header {
			border-bottom: 1px #e6521e dotted;
			zoom: 1;
		}
		.topSubContent header:before, .topSubContent header:after {
			content: "";
			display: table;
			overflow: hidden;
		}
		.topSubContent header:after { clear: both; }
			.topSubContent header h2 { float: left; }
			.topSubContent header ul {
				float: right;
				text-align: right;
				margin: 6px 0;
			}
				.topSubContent header ul li { margin: 4px 0; }
					.topSubContent header ul li.rss { background: url(/img/icon/rss.png) no-repeat 23px 3px; }
					.topSubContent header ul li.list {
						padding-left: 15px;
						background: url(/img/icon/list.png) no-repeat left 3px;
					}
						.topSubContent header ul li a {
							text-decoration: none;
							color: #e6521e;
						}
							.topSubContent header ul li a:hover { text-decoration: underline; }
	/* chuunibyo comment */
	#chuunibyoCommentTitle { border: none; }
	#topSubContentChuunibyoComment {
		margin: 5px 5px 0;
		border: 5px #ff66cc solid;
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		border-radius: 10px;
		background: url(/img/books/chuunibyo/mainContent/comment/commentBg.png) repeat left top;
	}
			#topChuunibyoCommentData header { border: none; }
				#topChuunibyoCommentDataPubDate {
					padding: 5px 0 5px 10px;
					font-size: 125%;
					color: #ff66cc;
					background: url(/img/new.png) no-repeat 140px 10px;
				}
			#topChuunibyoCommentDataThumb { text-align: center; }
				#topChuunibyoCommentDataThumb a { display: block; }
					#topChuunibyoCommentDataThumb a:hover {
						-ms-filter: 'alpha( opacity=60 )';
						filter: alpha( opacity=60 );
					}
					#topChuunibyoCommentDataThumb img { border: 1px #ccc solid; }
						#topChuunibyoCommentDataThumb span img { border: none; }
			#topChuunibyoCommentDataText {
				margin: 10px 20px;
				padding-left: 50px;
				background: url(/img/books/chuunibyo/mainContent/comment/commentDataTextBg.png) no-repeat left top;
				line-height: 18px;
			}
				#topChuunibyoCommentDataText a {
					color: #ff66cc;
					-webkit-transition: all 0.2s linear 0;
					-moz-transition: all 0.2s linear 0;
					transition: all 0.2s linear 0;
				}
					#topChuunibyoCommentDataText a:hover { font-size: 117%; }
			#topChuunibyoCommentData h3 {
				margin:5px 75px 10px;
				padding-bottom: 10px;
				font-size: 133%;
				font-weight: bold;
				line-height: 32px;
				text-align: center;
				background: url(/img/books/chuunibyo/mainContent/comment/commentDataNameBorder.png) repeat-x left bottom;
			}
			#topChuunibyoCommentShare {
				padding: 10px 0;
				text-align: center;
			}
	.prettyPopin {
		border: 1px solid #C7C7C7;
		-webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,.60);
		-moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,.60);
		box-shadow: 0px 0px 0px 20px 0px rgba(0,0,0,.60);
	}
	.prettyContent { background: #fff!important; }
	.prettyPopin a#b_close {
		width: 19px;
		height: 19px;
		background: url(/img/prettyPopin/close.png) no-repeat top left;
	}
		.prettyPopin a#b_close:hover { background: url(/img/prettyPopin/close.png) no-repeat 0 -19px; }

	/* anibaka */
	#topSubContentAnibaka { clear: both; }
		.topAnibakaData {
			clear: both;
			padding: 10px;
			zoom: 1;
		}
		.topAnibakaData:before, .topAnibakaData:after {
			content: "";
			display: table;
			overflow: hidden;
		}
		.topAnibakaData:after { clear: both; }
			.topAnibakaData:hover { background: url(/img/topAnibakaBg.png) no-repeat center top; }
			.topAnibakaData header { border-bottom: 1px #ccc dotted; }
				.topAnibakaData h3 {
					padding-left: 5px;
					border-left: 4px #e6521e solid;
				}
					.topAnibakaData h3.new { background: url(/img/new.png) no-repeat right 5px; }
					.topAnibakaData h3 a {
						color: #e6521e;
						font-size: 133%;
						font-weight: bold;
						text-decoration: none;
					}
						.topAnibakaData h3 a:hover { text-decoration: underline; }
				.topAnibakaData aside { text-align: right; }
			.topAnibakaIcon {
				float: left;
				width: 90px;
				margin: 5px;
				background: #fff;
			}
				.topAnibakaIcon img {
					display: block;
					margin: 0 auto;
					padding: 10px 5px;
					border: #ccc 1px solid;
				}
			.topAnibakaContent {
				float: left;
				width: 198px;
			}
			.topAnibakaContent p {
				margin: 5px;
				line-height: 1.8em;
			}
				.topAnibakaContent a { color: #e6521e; }
				.topAnibakaContent p span { white-space: nowrap; }

	/* anibaka renewal */
	#topSubContentAnibakaRe { clear: both; }
		.topAnibakaReData {
			clear: both;
			padding: 10px;
			zoom: 1;
			border-bottom: 1px #ccc dotted;
		}
		.topAnibakaReData:before, .topAnibakaReData:after {
			content: "";
			display: table;
			overflow: hidden;
		}
		.topAnibakaReData:after { clear: both; }
			.topAnibakaReData:hover { background-color: #FFEFEB; }
				.topAnibakaReData h3 {
					padding: 5px 0;
				}
					.topAnibakaReData h3 a {
						color: #e6521e;
						font-size: 133%;
						font-weight: bold;
						text-decoration: none;
					}
						.topAnibakaReData h3 a:hover { text-decoration: underline; }
				.topAnibakaReData aside { text-align: right; }
			.topAnibakaReIcon {
				float: left;
				width: 90px;
				margin: 5px;
			}
				.topAnibakaReIcon img {
					display: block;
					margin: 0 auto;
					padding: 10px 5px;
					border: #ccc 1px solid;
					background: #fff;
				}
			.topAnibakaReContent {
				float: left;
				width: 200px;
				margin: 5px;
			}
			.topAnibakaReContent .genericon {
				font-size: 133%;
			}
	/* school blog */
	#topSubContentSchool { clear: both; }
		.topSchoolData {
			clear: both;
			padding: 10px;
			zoom: 1;
			border-bottom: 1px #ccc dotted;
		}
		.topSchoolData:before, .topSchoolData:after {
			content: "";
			display: table;
			overflow: hidden;
		}
		.topSchoolData:after { clear: both; }
				.topSchoolData h3 {
					border-left: 4px #e6521e solid;
					padding: 0 5px;
					margin: 5px;
				}
					.topSchoolData h3 a {
						color: #e6521e;
						font-size: 133%;
						font-weight: bold;
						text-decoration: none;
					}
						.topSchoolData h3 a:hover { text-decoration: underline; }
				.topSchoolData aside { text-align: right; }
			.topSchoolPubDate .genericon {
				font-size: 133%;
			}
	

/* shop */
#topKyoaniShop { clear: both; }
	#topKyoaniShop header {
		margin: 10px;
		border-bottom: 1px #e6521e dotted;
		zoom: 1;
	}
	#topKyoaniShop header:before, #topKyoaniShop header:after {
		content: "";
		display: table;
		overflow: hidden;
	}
	#topKyoaniShop header:after { clear: both; }
		#topKyoaniShop header h2 { float: left; }
		#topKyoaniShop header ul {
			float: right;
			margin: 20px 0;
		}
			#topKyoaniShop header ul li {
				float: right;
				margin: 0 10px;
			}
				#topKyoaniShop header ul li.rss {
					padding-left: 15px;
					background: url(/img/icon/rss.png) no-repeat left 3px;
				}
				#topKyoaniShop header ul li.list {
					padding-left: 15px;
					background: url(/img/icon/list.png) no-repeat left 3px;
				}
				#topKyoaniShop header ul li a {
					text-decoration: none;
					color: #e6521e;
				}
				#topKyoaniShop header ul li a:hover { text-decoration: underline; }
	#topKyoaniShopNewGoodsList {
		width: 960px;
		height: 214px;
		margin: 10px auto 0;
		zoom: 1;
	}
	#topKyoaniShopNewGoodsList:before, #topKyoaniShopNewGoodsList:after {
		content: "";
		display: table;
		overflow: hidden;
	}
	#topKyoaniShopNewGoodsList:after { clear: both; }
		.scrollable {
			position: relative;
			float: left;
			width: 900px;
			height: 194px;
			margin: 10px;
			overflow: hidden;
		}
			.scrollable .items {
				position: absolute;
				width: 20000em;
				clear: both;
			}
				.items div {
					float: left;
					width: 900px;
				}
					.items div a {
						display: block;
						float: left;
						padding: 0 25px;
					}
						.reflect { display: block; }
		a.browse {
			float: left;
			width: 20px;
			height: 60px;
			margin: 77px 0;
			display: block;
			background: rgba(0, 0, 0, 0.7);
			background: url(/img/shop_product/kyoaniShopNewGoodsListBrowseBg.png) repeat\9; /* IE8 and below*/
			line-height: 60px;
			color: #fff;
			font-size: 125%;
			cursor: pointer;
			text-align: center;
		}
		a.browse:hover {
			background: rgba(0, 0, 0, 0.5);
			background: url(/img/shop_product/kyoaniShopNewGoodsListBrowseBg_r.png) repeat\9; /* IE8 and below*/
		}
		a.prev { margin-left: 0; }
		a.next {
			margin-right: 0;
			clear: right;
		}
		a.disabled		{ visibility: hidden !important; }
		#topKyoaniShopInfo { zoom: 1; margin-bottom: 30px;}
		#topKyoaniShopInfo:before, #topKyoaniShopInfo:after {
			content: "";
			display: table;
			overflow: hidden;
		}
		#topKyoaniShopInfo:after { clear: both; }
			#topKyoaniShopInfo header {
				margin: 0 10px;
				border-bottom: 1px #333 dotted;
			}
			#topKyoaniShopInfoText {
				float: left;
				width: 370px;
			}
				#topKyoaniShopInfoText dl { margin: 15px; }
					#topKyoaniShopInfoText dl dt {
						padding-left: 5px;
						border-left: 3px #333 solid;
						font-size: 125%;
					}
						#topKyoaniShopInfoText dl dd {
							padding: 15px 0 15px 20px;
							font-size: 108%;
						}
					#topKyoaniShopInfoText dl dd dl.telNumber { margin: 0; }
						#topKyoaniShopInfoText dl.telNumber dt {
							padding-left: 0;
							border: none;
							font-size: 100%;
						}
							#topKyoaniShopInfoText dl.telNumber dd {
								padding: 5px 0 5px 15px;
								font-size: 117%;
							}
								#topKyoaniShopInfoText dl.telNumber dd span { font-size: 83%; }
							#topKyoaniShopInfoText dl dd table {
								border: 1px #333 solid;
								border-collapse: collapse;
							}
								#topKyoaniShopInfoText dl dd table th {
									padding: 5px;
									border: 1px #333 solid;
									text-align: center;
								}
								#topKyoaniShopInfoText dl dd table td {
									padding: 5px;
									border: 1px #333 solid;
									text-align: center;
								}
			#topKyoaniShopInfoMap {
				float: left;
				width: 600px;
			}
				#mapKyoaniShop { margin: 15px 5px 0 25px; }
				#topKyoaniShopInfoMapText {
					width: 600px;
					margin-top: 5px;
				}
						#topKyoaniShopInfoMapText ul li {
							margin-left:25px;
							color: #ff3333;
						}
			#topKyoaniShopRetailerLink {
				float: left;
				width: 600px;
			}
				#topKyoaniShopRetailerLink a {
					display: block;
					margin: 5px 40px;
				}


/*     ----------     socialmedia     ----------     */
.topSubContent.socialmedia {
	font-size: 0;
}
.socialMediaData {
	display: inline-block;
	margin-left: 10px;
}
.socialMediaData:first-child {
	margin: 0;
}
.socialMediaData a {
	display: block;
	opacity: 1;
	-webkit-transition: .3s ease-out;transition: .3s ease-out;
}
.socialMediaData a:hover {
	opacity: .5;
}

/*     ----------     newyear     ----------     */
#mainVisualWrap.newyear {
	height: 400px !important;
}