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

/* ---------------------------
intro setting
--------------------------- */
#introWrap {
	position: fixed;
	width: 100%;
	height: 100%;
	background: #fff;
	z-index: 9999;
}
#intro {
	display: none;
	position: relative;
	width: 856px;
	height: 783px;
	margin: 0 auto;
	background: url(/img/intro/bg.jpg);
}
	#cp li {
		display: none;
		position: absolute;
	}
#cp-1 {
	right: 310px;
	top: 100px;
}
#cp-2 {
	left: 300px;
	top: 300px;
}
#skip {
	display: block;
	position: absolute;
	right: 50px;
	top: 30px;
	width: 100px;
	height: 60px;
	background: url(/img/intro/skip.png);
}
#skip:hover {
	cursor: pointer;
	background-position: 0 -60px;
}
	#skip span { display: none; }

/* ---------------------------
base setting
--------------------------- */
#contentWrap { margin: -140px auto 0 auto; }
#topContent { padding-bottom: 255px; }

/* ---------------------------
queryloader setting
--------------------------- */
.QOverlay { z-index: 9999; }
#qLoverlay { background: none; }
#qLpercentage {
	text-indent: -9999px;
	overflow: hidden;
	background: url(/img/loading.gif) no-repeat center center;
}

/* ---------------------------
top setting
--------------------------- */
#topLogo {
	float: left;
	width: 400px;
}
#restart {
	display: block;
	float: left;
	width: 60px;
	height: 60px;
	margin-top: 25px;
	background: url(/img/restart.png);
}
#restart:hover {
	cursor: pointer;
	background-position: 0 -60px;
}
	#restart span { display: none; }
#top-link {
	float: right;
	width: 500px;
	height: 90px;
	background: url(/img/10th-event.webp) no-repeat;
}
#mochi {
	position: relative;
	width: 180px;
	height: 55px;
	background: url(/img/globalNav/mochi/bg.png) no-repeat 0 1px;
}
	#mochi p {
		display: none;
		position: absolute;
		left: 40px;
		width: 135px;
		height: 55px;
		background: url(/img/globalNav/mochi/commentList.png) no-repeat;
	}
		#mochi p span { display: none; }
#mainVisualWrap {
	float: left;
	width: 536px;
	height: 773px;
	margin: 30px 12px;
	position: relative;
	background: url(/img/mainVisualBg.jpg);
}
#mainVisualWrap2 {
	float: left;
	width: 536px;
	height: 773px;
	margin: 80px 12px 0;
	position: relative;
	background: url(/img/mainVisualBg.jpg);
}
#mainVisual {
	width: 560px;
	height: 795px;
	margin: -11px -12px;
	background: url(/img/mainVisual.png) 2px 1px;
}
#newsLink {
	width: 200px;
	height: 200px;
	position: absolute;
	left: 366px;
	top: -13px;
	background: url(/img/newsLink.png) left top;
}
#BDBOXLink {
	width: 530px;
	height: 80px;
	position: absolute;
	left: 5px;
	top: -60px;
	background: url(/img/BDBOXLink.png) left top;
}
#productLink {
	width: 396px;
	height: 52px;
	position: absolute;
	left: 25px;
	top: 780px;
	background: url(/img/productLink.png) left top;
}
#manualLink {
	width: 104px;
	height: 100px;
	position: absolute;
	left: 428px;
	top: 670px;
	background: url(/img/manualLink.png) left top;
}
#junaio {
	width: 136px;
	height: 41px;
	position: absolute;
	left: 30px;
	top: 830px;
	background: url(/img/junaio.png) left top;
}
#AppstoreLink {
	width: 133px;
	height: 41px;
	position: absolute;
	left: 170px;
	top: 830px;
	background: url(/img/AppstoreLink.png) left top;
}
#GoogleplayLink {
	width: 115px;
	height: 41px;
	position: absolute;
	left: 305px;
	top: 830px;
	background: url(/img/GoogleplayLink.png) left top;
}
#QRcode {
	width: 100px;
	height: 100px;
	position: absolute;
	left: 425px;
	top: 770px;
	background: url(/img/QRcode.jpg) left top;
}
#top-link span, #newsLink span, #BDBOXLink span, #productLink span, #manualLink span, #junaio span, #AppstoreLink span, #GoogleplayLink span, #QRcode span { display: none; }
#topInfoWrap {
	float: left;
	width: 250px;
	margin: 78px 0 0;
	background: rgba(255, 255, 255, 0.3);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4CFFFFFF,endColorstr=#4CFFFFFF);
	-webkit-box-shadow: 2px 1px 10px #ccc;
	-moz-box-shadow: 2px 1px 10px #ccc;
	box-shadow: 2px 1px 10px #ccc;
}
#updateInfo { margin: 5px 0 15px; }
	#updateInfoList {
		height: 180px;
		margin: 5px;
		overflow-y: auto;
	}
		#updateInfoList dl {
			margin: 0 5px 5px;
			padding-top: 5px;
			border-top: 1px #999 dotted;
			font-size: 108%;
		}
		#updateInfoList .first {
			padding-top: 0!important;
			border: none!important;
		}
			#updateInfoList dt { color: #224c89; }
				#updateInfoList dt img {
					padding-left: 5px;
					vertical-align: text-top;
				}
			#updateInfoList dd {
				padding-left: 5px;
				color: #184070;
				line-height: 1.6em;
			}
				#updateInfoList dd a {
					color: #428fdb;
					text-decoration: underline;
				}
				#updateInfoList dd a:hover {
					text-decoration: none;
					cursor: pointer;
				}
			.em { font-weight: bold; }
#newMovie {
	position: relative;
	width: 250px;
	height: 185px;
	margin-bottom: 20px;
	background: url(/img/newMovieBg.jpg) no-repeat center bottom;
}
	.newMovieListWrap {
		width: 232px!important;
		height: 130px!important;
	}
#newMovieList {
	height: 130px!important;
	margin: 0 9px;
}
	#newMovieList li {
		position: relative;
		float: left;
		width: 232px;
		overflow: hidden;
	}
		#newMovieList li a { display: block; }
			#newMovieList li a p {
				position: absolute;
				bottom: -100%;
				width: 220px;
				height: 18px;
				padding: 8px 6px;
				color: #fff;
				font-size: 108%;
				line-height: 18px;
				background: rgba(0, 0, 0, 0.5);
				filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000);
				-webkit-transition: 0.3s ease-in-out;
				-moz-transition: 0.3s ease-in-out;
				-o-transition: 0.3s ease-in-out;
				transition: 0.3s ease-in-out;
				-webkit-border-radius: 0 0 7px 7px;
				-moz-border-radius: 0 0 7px 7px;
				-o-border-radius: 0 0 7px 7px;
				border-radius: 0 0 7px 7px;
			}
#newMovieControl li {
	position: absolute;
	top: 87.5px;
}
	#newMovieControl li a {
		display: block;
		width: 25px;
		height: 25px;
		background: url(/img/movie/nav.png);
	}
	#newMovieControl li a:hover { cursor: pointer; }
		#newMovieControl li a span { display: none; }
#newMoviePrev { left: 5px; }
#newMovieNext { right: 5px; }
.prev { background-position: 0 -50px!important; }
.prev:hover { background-position: 0 -75px!important; }
.next:hover { background-position: 0 -25px!important; }
#newMovie-pv { background: url(/img/movie/pv/bg.jpg); }
#newMovie-spot-15 { background: url(/img/movie/spot/15/bg.jpg); }
#newMovie-spot-30 { background: url(/img/movie/spot/30/bg.jpg); }
#newMovie-howto { background: url(/img/movie/howto/bg.jpg); }
#newMovie-choi_3 { background: url(/img/movie/choi/3/bg.jpg); }
#newMovie-box { background: url(/img/movie/box/bg.jpg); }
	#twTicker iframe {
		margin: 5px;
	}
	#twTicker h2 a {
		display: block;
		width: 240px;
		height: 40px;
		background: url(/img/twTicker.png);
	}
	#twTicker h2 a:hover { background-position: 0 -40px; }
		#twTicker h2 a span { display: none; }
	#twTickerList {
		height: 180px;
		margin: 5px 5px 5px;
		overflow-y: auto;
	}
		#twTickerList li {
			margin: 0 5px 5px;
			border-top: 1px #999 dotted;
			font-size: 108%;
			color: #8E4C28;
		}
		#twTickerList .first { border: none!important; }
			#twTickerList li a {
				color: #f7a094;
				text-decoration: underline;
			}
			#twTickerList li a:hover { text-decoration: none; }
			#twTickerList li .date {
				display: block;
				text-align: right;
			}
	#newDiary h2 a {
		display: block;
		width: 135px;
		height: 35px;
		background: url(/img/newDiary.png);
	}
	#newDiary h2 a:hover { background-position: 0 -35px; }
		#newDiary h2 a span { display: none; }
	#newDiaryList { padding: 10px 15px; }
		#newDiaryList dt {
			color: #8e4c28;
			font-size: 108%;
		}
			#newDiaryList dt img {
				padding-left: 5px;
				vertical-align: middle;
			}
			#newDiaryList dd { padding-left: 10px; }
				#newDiaryList dd a {
					font-size: 117%;
					color: #ee86a7;
					text-decoration: underline;
				}
				#newDiaryList dd a:hover { text-decoration: none; }