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

/* ---------------------------
figure setting
--------------------------- */
html, body {
	height: 100%;
	text-align: center;
	background: #000;
}

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

/* ---------------------------
content setting
--------------------------- */
#siteWrap {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	background: url(/img/shop/figure/sd/bg.png) repeat;
}
#contentWrap {
	width: 900px;
	margin: 0 auto;
	zoom: 1;
	padding-bottom: 100px;
}
#contentWrap:before, #contentWrap:after {
	content: "";
	display: table;
	overflow: hidden;
}
#contentWrap:after { clear: both; }
#contentBox {
	position: relative;
	box-shadow: 0 0 10px #333;
}

/* ---------------------------
header setting
--------------------------- */
#globalHeaderWrap {
}
#globalHeader {
	width: 900px;
	margin: 0 auto;
}
h1 {
	padding: 10px 0;
	text-align: left;
}

/* carousel */
#carouselWrap {
	position: relative;
	width: 900px;
	height: 470px;
	margin: 0 auto;
}
	#carousel {
		width: 900px;
		height: 440px;
		overflow: hidden;
	}
		#carousel div {
			position: relative;
			float: left;
			width: 900px;
			height: 440px;
			padding-bottom: 15px;
		}
		#carousel-01 { background: url(/img/shop/figure/sd/mainVisual/k-on!/yui.jpg) no-repeat; }
		#carousel-02 { background: url(/img/shop/figure/sd/mainVisual/k-on!/ritsu.jpg) no-repeat; }
		#carousel-03 { background: url(/img/shop/figure/sd/mainVisual/k-on!/mio.jpg) no-repeat; }
		#carousel-04 { background: url(/img/shop/figure/sd/mainVisual/k-on!/tsumugi.jpg) no-repeat; }
		#carousel-05 { background: url(/img/shop/figure/sd/mainVisual/k-on!/azusa.jpg) no-repeat; }
			#carousel h2 {
				position: absolute;
				left: 10px;
				top: 15px;
				z-index: 2;
			}
			#carousel p {
				position: absolute;
				left: 20px;
				top: 110px;
				z-index: 2;
			}
			#carousel ul {
				position: absolute;
				left: 20px;
				top: 0;
				zoom: 1;
				z-index: 1;
			}
			#carousel ul:before, #carousel ul:after {
				content: "";
				display: table;
				overflow: hidden;
			}
			#carousel ul:after { clear: both; }
				#carousel ul li { float: left }
					#carousel ul li:hover {
						-webkit-transition: 0.5s ease-in-out;
						-moz-transition: 0.5s ease-in-out;
						-o-transition: 0.5s ease-in-out;
						-webkit-transform: rotate(3deg);
						-moz-transform: rotate(3deg);
						transform: rotate(3deg);
						-webkit-transform-origin: center top;
						-moz-transform-origin: center top;
						transform-origin: center top;
					}
			#carousel a span { display: none; }
			.shopLink {
				display: block;
				position: absolute;
				left: 30px;
				bottom: 0;
				width: 190px;
				height: 95px;
				background-image: url(/img/shop/figure/sd/mainVisual/k-on!/shopLinkList.png);
				z-index: 3;
			}
			#yuiShopLink           { background-position: 0 0; }
			#ritsuShopLink         { background-position: -195px 0; }
			#mioShopLink           { background-position: -390px 0; }
			#tsumugiShopLink       { background-position: -585px 0; }
			#azusaShopLink         { background-position: -780px 0; }
			#ritsuShopLink:hover   { background-position: -195px -95px; }
			#mioShopLink:hover     { background-position: -390px -95px; }
			#tsumugiShopLink:hover { background-position: -585px -95px; }
			#azusaShopLink:hover   { background-position: -780px -95px; }
			.movieLink {
				display: block;
				position: absolute;
				right: 10px;
				bottom: 40px;
				width: 150px;
				height: 145px;
				z-index: 3;
			}
			.movieLink:hover { cursor: pointer; }
			#mioMovieLink {
				bottom: 140px;
				background: url(/img/shop/figure/sd/mainVisual/k-on!/movie/mio.png) left top;
			}
			#tsumugiMovieLink {
				bottom: 140px;
				background: url(/img/shop/figure/sd/mainVisual/k-on!/movie/tsumugi.png) left top;
			}
			#azusaMovieLink {
				bottom: 140px;
				background: url(/img/shop/figure/sd/mainVisual/k-on!/movie/azusa.png) left top;
			}
			.movieLink:hover { background-position: 0 -145px!important; }
	#pager { text-align: right; }
		#pager a {
			width: 10px;
			height: 10px;
			margin-right: 10px;
			background: #cc3029;
			display: inline-block;
			-webkit-border-radius: 10px;
			-moz-border-radius: 10px;
			border-radius: 10px;
		}
			#pager a.selected { background: #cc6666; }
			#pager a span { display: none; }

/* ---------------------------
navigation setting
--------------------------- */
#globalNavWrap {}
	#globalNav {}
		#globalNavMenu { padding-bottom: 5px; }
			#globalNavMenu li { float: left; }
				#globalNavMenu li a {
					display: block;
					width: 300px;
					height: 50px;
				}
					#globalNavMenu li a span { display: none; }
				#globalNavMenu-01 { background: url(/img/shop/figure/sd/globalNav/k-on!/globalNavMenuList.png) 0 0; }
				#globalNavMenu-02 { background: url(/img/shop/figure/sd/globalNav/k-on!/globalNavMenuList.png) -300px 0; }
				#globalNavMenu-03 { background: url(/img/shop/figure/sd/globalNav/k-on!/globalNavMenuList.png) -600px 0; }
				#globalNavMenu-01:hover { background-position: 0 -50px; }
				#globalNavMenu-02:hover { background-position: -300px -50px; }
				#globalNavMenu-03:hover { background-position: -600px -50px; }
				#globalNavMenu .current { background-position-y: -50px; }

/* top main content */
#topMainContent {
	margin-top: -30px;
	padding-top: 40px;
	background: #fff;
}
	#topAdBanner { padding-bottom: 10px; }
#topMainContent h3 { margin-left: -15px; }
#sdFigureNewsList {
	padding: 10px 10px 30px 50px;
	text-align: left;
	font-size: 117%;
	color: #3399cc;
}
	#sdFigureNewsList dt { float: left; }
		#sdFigureNewsList dd { margin-left: 120px; }
			#sdFigureNewsList dd a { color: #3333cc; }
			#sdFigureNewsList dd a:hover { color: #ff3333; }
#explainLink {
	position: absolute;
	right: 70px;
	top: 580px;
}
	#explainLink a {
		display: block;
		width: 148px;
		height: 148px;
		background: url(/img/shop/figure/sd/explainLink.png);
	}
	#explainLink a:hover { background-position: 0 -148px; }
		#explainLink a span { display: none; }
#introLink {
	position: absolute;
	right: 50px;
	top: 740px;
}
	#introLink a { color: #3333cc; }
	#introLink a:hover { color: #ff3333; }
#accountLink {
	position: absolute;
	right: 50px;
	top: 780px;
}
	#accountLink a {
		display: block;
		width: 179px;
		height: 141px;
		background: url(/img/shop/figure/sd/accountLink.png);
	}
	#accountLink a:hover { background-position: 0 -141px; }
		#accountLink a span { display: none; }

/* main content*/
#mainContentWrap { background: #fff; }

/* outline */
.sdFigureOutline {
	position: relative;
	margin: 0 30px 20px;
	width: 676px;
	height: 400px;
}
#move {
	float: left;
	background: url(/img/shop/figure/sd/outline/moveBg.png);
}
#moveCharacter {
	position: absolute;
	left: 55px;
	bottom: 25px;
}
#parts {
	float: right;
	background: url(/img/shop/figure/sd/outline/partsBg.png);
}
#partsContent { padding-top: 181px; }
#partsNav {
	float: left;
	width: 136px;
	height: 190px;
	margin-top: 15px;
}
	#partsNav li a {
		display: block;
		width: 136px;
		height: 38px;
		margin-left: 7px;
	}
	#partsNav li a:hover { cursor: pointer; }
		#partsNav li a span { display: none; }
#partsNav-01 a { background: url(/img/shop/figure/sd/outline/partsNav-01.png) no-repeat -20px 0; }
#partsNav-02 a { background: url(/img/shop/figure/sd/outline/partsNav-02.png) no-repeat -20px 0; }
#partsNav-03 a { background: url(/img/shop/figure/sd/outline/partsNav-03.png) no-repeat -20px 0; }
#partsNav-04 a { background: url(/img/shop/figure/sd/outline/partsNav-04.png) no-repeat -20px 0; }
#partsNav-05 a { background: url(/img/shop/figure/sd/outline/partsNav-05.png) no-repeat -20px 0; }
#partsCharacter {
	float: left;
	width: 530px;
	height: 205px;
}
	#partsCharacter img { position: absolute; }
	.partsYui img { display: block; left: 155px; bottom: 15px; }
	.partsRitsu img { left: 182px; bottom: 18.5px; }
	.partsMio img { left: 180px; bottom: 18px; }
	.partsTsumugi img { left: 180px; bottom: 18px; }
	.partsAzusa img { left: 180px; bottom: 15px; }
	#partsCharacter a {
		position: absolute;
		right: 15px;
		bottom: 15px;
		width: 126px;
		height: 23px;
		background: url(/img/shop/figure/sd/outline/partsMore.png);
	}
	#partsCharacter a:hover {
		background: url(/img/shop/figure/sd/outline/partsMore.png) 0 -23px;
	}
		#partsCharacter a span { display: none; }
#joint {
	float: left;
	background: url(/img/shop/figure/sd/outline/jointBg.png);
}
#jointCharacter {
	position: absolute;
	left: 110px;
	bottom: 15px;
}
#package {
	float: right;
	width: 690px;
	height: 428px;
	background: url(/img/shop/figure/sd/outline/packageBg.png);
}

/* gallery */
#mainContent {
	width: 820px;
	margin: 10px 30px;
	padding: 0 10px 50px;
	background: url(/img/shop/figure/sd/mainContentBg.jpg) repeat;
}
	#mainContent h2 {
		text-align: left;
		padding: 10px 0 10px 5px;
	}
	#mainContent h3 { text-align: left; }
	.galleryListWrap { padding-bottom: 10px; }
		.galleryList { padding: 10px; }
		#onecut { height: 270px; }
		#yui {
			height: 270px;
			padding-left: 140px;
			background: url(/img/shop/figure/sd/gallery/k-on!/bg/yui.png) no-repeat center 10px;
		}
		#ritsu {
			height: 250px;
			padding-right: 110px;
			background: url(/img/shop/figure/sd/gallery/k-on!/bg/ritsu.png) no-repeat center 10px;
		}
		#mio {
			height: 240px;
			padding-left: 140px;
			background: url(/img/shop/figure/sd/gallery/k-on!/bg/mio.png) no-repeat center 10px;
		}
		#tsumugi {
			height: 220px;
			padding-right: 140px;
			background: url(/img/shop/figure/sd/gallery/k-on!/bg/tsumugi.png) no-repeat center 10px;
		}
		#azusa {
			height: 230px;
			padding: 25px 10px 10px 150px;
			background: url(/img/shop/figure/sd/gallery/k-on!/bg/azusa.png) no-repeat center 10px;
		}
		#movie {
			height: 130px;
			padding: 25px 10px 10px 165px;
			background: url(/img/shop/figure/sd/gallery/k-on!/bg/movie.png) no-repeat 15px 10px;
		}
			.galleryList li {
				float: left;
				padding-top: 10px;
			}
			.up { padding-top: 0!important; }
		.movieGalleryLink { display: block; }
		.movieGalleryLink:hover { cursor: pointer; }

/* agency */
.agencyTitle {
	padding: 20px 0 0 25px;
	font-size: 133%;
}
#agencyDescriptionList {
	padding: 15px 0 15px 30px;
	text-align: left;
	font-size: 117%;
}
	#agencyDescriptionList li { line-height: 1.8em; }
	#agencyDescriptionList .red { color: red; }
.agencyNotice {
	padding: 15px 0 15px 50px;
	text-align: left;
	font-size: 117%;
	color: red;
}
	#agencyNoticeList li { line-height: 1.8em; }
#agencyKyoaniShop { padding: 15px 0 30px; }
#agencyList { margin: 5px 50px 15px; }
	#agencyList thead { background: url(/img/shop/figure/sd/agency/agencyListHeadBg.jpg) no-repeat; }
	#agencyList tbody { background: #fff; }
		#agencyList th {
			padding: 10px 0;
			border: 1px #333 solid;
			font-size: 117%;
			text-align: center;
		}
		#agencyList td {
			padding: 5px 0 5px 5px;
			text-align: left;
			border: 1px #333 solid;
		}
			#agencyList td a {
				padding-right: 18px;
				background: url(/img/shop/figure/sd/agency/blank.png) no-repeat right top;
				color: #33c;
			}
			#agencyList td a:hover { color: #f33; }
			.agencyArea { text-align: center!important; }
			#agencyList td ul li {
				float: left;
				width: 30px;
				height: 30px;
				margin-left: 5px;
			}
				#agencyList td ul li span { display: none; }
			.yui     { background: url(/img/shop/figure/sd/agency/yui.jpg) no-repeat; }
			.ritsu   { background: url(/img/shop/figure/sd/agency/ritsu.jpg) no-repeat; }
			.mio     { background: url(/img/shop/figure/sd/agency/mio.jpg) no-repeat; }
			.tsumugi { background: url(/img/shop/figure/sd/agency/tsumugi.jpg) no-repeat; }
			.azusa   { background: url(/img/shop/figure/sd/agency/azusa.jpg) no-repeat; }

#socialLinkList { padding: 10px 0 0 20px; }
#twitter, #hatena { margin-right: 15px;}
	#socialLinkList li { float: left; }
#sdFigureNotice {
	padding: 20px 5px 0 0;
	text-align: right;
	font-size: 92%;
	color: #cc3029;
}
#worksCopyright { padding: 10px 0 5px; }

/* ---------------------------
footer setting
--------------------------- */
#globalFooterWrap {
	width: 100%;
	min-width: 900px;
	height: 78px;
	margin-top: -80px;
	border-top: 2px #e6521e solid;
	background-color: #fff;
	clear: both;
	text-align: left;
}
	#globalFooter {
		position: relative;
		width: 900px;
		margin: 0 auto;
		height: 78px;
	}
		#footerCorporateIdentity {
			float: left;
			width: 350px;
		}
			#footerLogo {}
			#footerNavigationLinkList {}
				#footerNavigationLinkList li { float: left; }
				#footerNavigationLinkList li a {
					display: block;
					height: 20px;
				}
				#footerNavigationLinkList li a span { display: none; }
				#footerNavigationLinkList-01 a {
					width: 90px;
					background: url(/img/shop/figure/sd/footerNavigationLinkList.png) no-repeat;
				}
				#footerNavigationLinkList-02 a {
					width: 130px;
					background: url(/img/shop/figure/sd/footerNavigationLinkList.png) no-repeat -90px 0;
				}
				#footerNavigationLinkList-03 a {
					width: 90px;
					background: url(/img/shop/figure/sd/footerNavigationLinkList.png) no-repeat -220px 0;
				}
				#footerNavigationLinkList-01 a:hover { background-position: 0 -20px; }
				#footerNavigationLinkList-02 a:hover { background-position: -90px -20px; }
				#footerNavigationLinkList-03 a:hover { background-position: -220px -20px; }
		#footerCorporateLink {
			float: left;
			width: 550px;
		}
			#footerCorporateLinkList { margin: 10px 0 20px 250px; }
				#footerCorporateLinkList li { float: left; }
					#footerCorporateLinkList li a {
						display: block;
						height: 20px;
					}
					#footerCorporateLinkList-01 a {
						width: 190px;
						background: url(/img/shop/figure/sd/footerCorporateLinkList.png) no-repeat;
					}
					#footerCorporateLinkList-02 a {
						width: 110px;
						background: url(/img/shop/figure/sd/footerCorporateLinkList.png) no-repeat -190px 0;
					}
					#footerCorporateLinkList-01 a:hover { background-position: 0 -20px; }
					#footerCorporateLinkList-02 a:hover { background-position: -190px -20px; }
						#footerCorporateLinkList li span { display: none; }
			#footerCorporateLink small {
				display: block;
				text-align: right;
			}