@charset "UTF-8";

/* ===================================
	File Name   : top.css
	Description : Top Page Layout CSS
	Editors     : NS Sakurai
	Create Date : 2012/02/09

	Update Description :
		2012/03/09 Append - Banner Box Styles [Sakurai]
		2012/02/10 Append - Value Styles [Sakurai]
		2012/02/09 File Create
====================================== */

/*========== Style Contents ==========

	1. Individual Redefinition
	2. multi Hero
	3. Download Button
	4. Top Information
	5. Banner Box
	6. 
	7. 
	*. Clear Release
	
====================================== */





/*===== ■1. Individual Redefinition =====*/
/* Box Setting */
#Contents {
	margin: 0px auto;
}

/* Title Setting */
h1 {
	background: url(img/logo_visual.png) no-repeat;
	padding: 0px;
	margin: 22px 0px 18px 87px;
	width: 303px;
	height: 274px;
	position: relativel;
	text-indent: -9999px;
	z-index: 999;
}

h2 {
	background: url(img/ttl_top01.png) no-repeat;
	margin: 0px 0px 18px 45px;
	width: 388px;
	height: 28px;
}

h3 {
	background: url(img/ttl_whats-new.jpg) no-repeat;
	margin: 14px 0px 15px 14px;
	width: 430px;
	height: 25px;
	text-indent: -9999px;
}





/*===== ■2. multi Hero =====*/
#multiHero {
	position: absolute;
	top: -15px;
	right: 20px;
	background: url(img/bg_multihero.png) no-repeat;
	padding: 52px 0px 0px 19px;
	width: 470px;
	height: 328px;
}

#multiHero ul#multiHeroContents {
	width: 380px;
	height: 270px;
}

#multiHero ul#multiHeroContents li {
	display: none;
}

#multiHero ul#multiHeroControls {
	position: absolute;
	top: 52px;
	right: 3px;
}

#multiHero ul#multiHeroControls li {
	padding: 0px 0px 5px;
}

#multiHero ul#multiHeroControls li a {
	display: block;
	margin-right: 5px;
	border: 1px solid #999;
	color: #666666;
	font-size: 70%;
	font-family: Arial, sans-serif;
	text-decoration: none;
	line-height: 0.75;
}

#multiHero ul#multiHeroControls li a img {
	opacity: 0.4;
	filter: alpha(opacity=40);
}

#multiHero ul#multiHeroControls li.thisChild a {
	border: 1px solid #FFF;
}

#multiHero ul#multiHeroControls li.thisChild a img {
	opacity: 1;
	filter: alpha(opacity=100);
}

#multiHero ul#multiHeroControls li a:hover img {
	opacity: 0.7;
	filter: alpha(opacity=70);
}







/*===== ■3. Download Button =====*/
#BtnDownload {
	float: left;
	padding: 0px 0px 0px 20px;
}

#BtnDownload li a {
	background: url(common/img/img_btn.jpg) 0px -251px;
}

#BtnDownload li a:hover {background-position: -500px -251px;}






/*===== ■4. Top Information =====*/
#TopInfo {
	display: inline;
	float: right;
	border: 1px solid #CCCCCC;
	background: #FFF;
	margin: 0px 35px 0px 0px;
	padding: 0px 0px 5px;
	width: 458px;
}

#TopInfo ul {
	padding: 0px 30px;
}

#TopInfo ul li {
	background: url(common/img/circle_blue.jpg) no-repeat 0px 5px;
	padding: 0px 0px 5px 12px;
}

#TopInfo ul li strong {
	display: block;
	float: left;
	width: 80px;
	line-height: 1.2;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 77%;
	color: #6085E4;
}

#TopInfo ul li strong em {
	font-weight: bold;
	font-size: 140%;
}

#TopInfo ul li p {
	float: left;
	padding: 0px 0px 5px;
	width: 300px;
	line-height: 1.3;
	font-size: 93%;
}

#TopInfo ul li p span {
	float: left;
	padding: 0px 0px 5px;
	width: 300px;
	line-height: 1.3;
	font-size: 85%;
}





/*===== ■5. Banner Box =====*/
#BannerBox {
	clear: both;
	margin: 0px 0px -40px 5px;
	padding: 30px 0px 0px;
	width: 880px;
	height: 150px;
	overflow: hidden;
}
#BannerBox ul li {
	display: inline;
	float: left;
	margin: 0 0 10px 20px;
}
#BannerBox ul li a {
	background: #033;
}

#BannerBox ul li a:hover img {
	opacity: 0.7;
	filter: alpha(opacity=70);
}



/*===== ■6.  =====*/





/*===== ■7.  =====*/





/*===== ■8.  =====*/






/*===== ■*.Clear Release  =====*/
#TopInfo ul li {
	/zoom: 1;
}

#TopInfo ul li:after {
	content: '';
	display: block;
	clear: both;
}