@charset "utf-8";

body{
	background: url(../img/body_bg.png) repeat-x #d6d5ce;
}

div.header ul li,
div.menu ul li,
div.footer ul li
{
	float: left;
	font-weight: bold;
}

div.right h3,
div.main h3{
	font-weight: bold;
	font-size: 180%;
	color: #0f4997;
}

body.ja div.right h3,
body.ja div.main h3{
	font-size: 190%;
	
}

	div.menu ul li a,
	div.footer ul li a{
	color: #fff;
	}

a{
	text-decoration: none;
	color :#0078dd;
}
a:hover{
	text-decoration: underline;
}

div.news_box,
div.middle_box,
div.recent_wrap
{
	margin: 20px 0 0;
}

h4{
	font-size: 150%;
	color: #d23939;
	padding: 0 0 10px;
	font-weight:bold;
}

body.app h4{
	color: #333;
	background:url(../img/app_tit_bg.png) no-repeat;
	padding: 10px 15px 10px 50px;
	height: 30px;
}

body.app h4 span{
float: left;
}
body.app h4 ul{
float: right;
}
body.app h4 li{
float: left;
font-size: 85%;
background: url(../img/arrow2.png) no-repeat left center;
margin: 0 0 0 10px;
padding: 0 0 0 17px;
color: #708fa1;
}


h5{
	font-size: 140%;
	font-weight: bold;
	padding: 0 0 5px;
	color: #476656;
}

body.app h5{
	font-size: 150%;
	padding: 0 0 10px;
	color:#567b18;
}

h6{
	font-weight: bold;
}

body.app h6{
	font-size: 100%;
	background: url(../img/app_h6_bg.png) no-repeat;
	padding: 3px 6px;
	margin: 5px 0 8px;
	color: #fff;
}


/* ==== Header ==== */

div.header_container{
	width: 100%;
	height: 61px;
	z-index: 30;
}
div.header{
	width: 930px;
	height: 60px;
	margin: 0 auto;
	overflow: hidden;
}
	div.header h1{
		display: block;
		float: left;
		width: 200px;
		height: 50px;
		margin: 3px 0 0;
	}
	div.header h1 a{
		display: block;
		width: 280px;
		height: 55px;
		color: black;
		_text-indent: -9999px;
		_background: url(../img/logo.png) no-repeat;
	}
	div.btn{
		float: right;
		margin: 19px 178px 0 0;
		border: 0px solid purple;
		height: 42px;
		padding: 0 8px;
		background: url(../img/btn_bg.png) no-repeat 0 0;
	}
	div.btn ul{
		width: 100%;
		height: 42px;
		margin: 0 8px 0 0;
		background: url(../img/btn_bg.png) no-repeat right -86px;
	}
	div.btn ul li{
		height: 42px;
		padding: 10px;
		background: url(../img/btn_bg.png) repeat-x 0 -43px;
	}


div.btn a{
	color: #464545;
}
	div.btn ul li.login{
		padding: 8px 0 0;
	}

		div.btn ul li.login a{
		display:  block;
		padding: 3px 0 0;
		width: 70px;
		height: 30px;
		text-align: center;
		color: #fff;
		background:url(../img/login_btn.png) no-repeat;
	}
	
	div.btn ul li.login a:hover{
	filter: alpha(opacity=60);
	-moz-opacity:0.6;
	opacity:0.6;
}
	
	div.btn ul li.lang_ja a{
		background:url(../img/lang_japanese.png) no-repeat right center;
		padding: 0 20px 0 0 ;
	}
	div.btn ul li.lang_en a{
		background:url(../img/lang_English.png) no-repeat right center;
		padding: 0 20px 0 0 ;
	}
div.container{
	width: 100%;
}
div.wrapper{
	width: 930px;
	margin: 0 auto;
	text-align:left;
}


/* ==== Topimg ==== */
div.topimg{
	height: 150px;
}	

div.topimg h2{
	display: block;
	width:510px;
	height: 150px;
	background:url(../img/spiceup.png) no-repeat 0 35px;
	text-indent: -9999px;
}


div.topimg p.phone{
	width: 180px;
	position: relative;
	top: -205px;
	left: 740px;
	z-index: 9;
	display: block;
}


div.topimg p.animegif{
	width: 180px;
	position: relative;
	top: -520px;
	left: 783px;
	z-index: 20;
	display: block;
}


div.topimg p.light{
	width: 200px;
	height: 100px;
	position: relative;
	top: -678px;
	left: 540px;
	z-index:-3;
}

	
/* ==== Menu ==== */
div.menu{
	height: 60px;
	background: url(../img/menu_bg.png) no-repeat transparent;
	color : #fff;
	padding: 0 0 0 20px;
}
	div.menu ul li{
		margin: 8px 2px 0 ;
	}
	div.menu ul li a{
		display:block;
		height: 40px;
		margin: 0 0 0 10px;
		padding: 5px 10px 0 0;
	}
	

	div.menu ul li.on,
	div.menu ul li:hover
	{
		background: url(../img/menu_li_bg.png) no-repeat 0 0;
	}
	div.menu ul li.on a,
	div.menu ul li:hover a
	{
		background: url(../img/menu_li_bg.png) no-repeat right -47px;
		color: gray;
	}
	
	
	
	
	
/* ==== Main ==== */
div.main{
	border: solid pink 0;
	padding: 40px 30px 30px;
	background: url(../img/main_bg.png) repeat-x #f9f9f8;
}



/* ==== Left ==== */
div.left{
	width: 280px;
	padding: 0 15px;
	float:left;
}


/* ==== Right ==== */
div.right{
	float: right;
	width: 540px;
}


/* ==== Middle ==== */
div.middle,
div.middle_box
{
	width: 100%;
}

div.middle_box{
	background: url(../img/box_870_mid.png) repeat-y;
}

div.middle_box div.box{
	padding: 30px;
}
	
div.middle_left,
div.middle_right{
	width: 390px;
}

	div.middle_left{
		float: left;
	}
	
	div.middle_right{
		float: right;
	}


	div.middle_box div.box ul li{
		font-weight: normal;
	}



/*==== Recent ====*/

div.recent_box{
	margin: 0 0 10px;
	padding: 15px;
	background: url(../img/recent_bg.png) no-repeat;
	height: 107px;
}

div.img{
	float: left;
	width: 100px;
}
div.img img:hover{
	filter: alpha(opacity=60);
	-moz-opacity:0.6;
	opacity:0.6;
}


div.data{
	float: right;
	width: 140px;
	border: 1px solid white;
}
	div.data p.title{
		font-weight: bold;
		color:#CE0020;
	}

div.data p.text{
	margin: 0 0 10px;
}

/* ==== campwrap ==== */
div.camp_wrap{
}

div.camp_box{
}

div.camp_box h2{
	font-size:100%;
	font-weight:bold;
	padding:5px 5px 3px 25px;
}

div.camp_box ul{
	padding:8px 6px 7px;
}
div.camp_box ul li{
	line-height:1.3;
	padding:2px 0 2px 8px;
}


/* ==== News==== */

div.news_box dl {
	width: 520px;
	padding: 10px;
	background: url(../img/box_520_mid.png) repeat-y;
}
div.news_box dl dt {
	float: left;
	width: 7em;
	padding: 5px 0;
	font-weight: bold;
	text-indent: 1em;
	line-height: 150%;
}
div.news_box dl dd {
	padding: 5px 0 5px 7em;
	line-height: 150%;
}

/*====Banners */
table.banners{
	margin: 15px 0 0;
}	
table.banners td{
	padding: 5px 3px 0;
}


/*=== Advertising Table ====*/
table.advertising{
	border-collapse: collapse;
}

table.advertising td{
	width: 25%;
	padding: 10px;
}
table.advertising th{
	padding: 10px 15px;
	font-size: 150%;
	font-weight: bold;
	background: url(../img/arrow.png) no-repeat right center;
}

table.advertising td ul{
	height: 12em;
	border: 6px solid #efefe7;
	padding: 5px 10px;
}

table.advertising td ul li{
	display: block;
	width: 100%;
}

p.map{
	padding: 40px 0 0 10px;
}

/*==== iPhone ====*/
div.iphone_box{
	margin: 0 0 30px;
}

div.iphone_box h4{
	border-bottom:1px solid #ccc;
	margin: 0 0 10px;
	padding: 0 0 5px;
}


div.iphone_data{
	float:left;
}

div.iphone_img{
	float:right;
}
div.iphone_img ul li{
	float: left;
	margin: 0 5px;
}

div.iphone_img img{
	width: 200px;
}


div.app {
	padding-bottom: 0 !important;
}

div.app div.middle_left{
	width: 200px;
	padding: 30px 0 0 5px;
}
div.app div.middle_right{
	width: 450px;
	padding: 30px 0 0;

}

div.app div.middle_right dl{
	margin: 10px 0;
}
div.app div.middle_right dt{
	font-size: 120%;
	font-weight: bold;
}

div.feature dl{
	margin: 10px 0;
}
div.feature dt{
	margin: 1em 0 0;
	font-size: 120%;
	font-weight: bold;
}


/* === Release === */
div.release{
	margin: 0 0 20px;
}
div.release p{
	display: inline;
	font-size: 130%;
	font-weight: bold;
	color: red;
}
div.release img:hover{
	filter: alpha(opacity=60);
	-moz-opacity:0.6;
	opacity:0.6;
}


div.middle_middle{
	padding: 30px 0 0;
	clear:both;
}


/*==== Applications ====*/
body.applications div.img{
	padding: 0 0 0 3px;
}

body.applications h4{
	margin: 0 0 10px;
	padding: 0 0 5px 22px;
	background: url(../img/app_arrow.png) no-repeat left 4px;
	border-bottom: 1px solid #ccc;
	line-height: 1.3;
}

body.applications div.data{
	width: 275px;
}
body.applications div.data li{
	padding: 0 0 2px;
}
body.applications div.data li img{
	margin: 3px 0 0;
}

/*==== Contact ====*/
form.contact{
	width: 700px;
	}

form.contact label{
	display:block;
	margin: 10px 0 3px;
	font-weight:bold;
	width: 120px;
	background: url(../img/label.png) no-repeat;
}
input {
	width: 300px;
	padding: 4px 3px;
}
input,textarea{
	border:1px solid #ccc;
}

input.submit{
	display:block;
	margin: 10px 0 0;
	width: 95px;
	height: 35px;
	background: url(../img/submit.png) no-repeat;
	color: #fff;
	font-weight:bold;
	border: none;

}
input.submit:hover{
	background-position: left -35px;
}


div#gallery ul li{
	float: left;
	margin: 10px 10px 0 0;
}

div#gallery ul li img{
	width: 130px;
	border: 1px solid gray;
}
div#gallery ul li img:hover{
	filter: alpha(opacity=50);
	-moz-opacity:0.5;
	opacity:0.5;
}

/*====Sitemap====*/
ul.sitemap li.sub{
	text-indent: 15px;
}

/*=== About Us====*/
ul.expertises li{
	border:1px solid #eaf4ec;
	background: #f6f9f6;
	margin: 0 0 5px;
	padding: 3px 8px;
}


/* ==== Footer ==== */
div.footer{
	background: url(../img/footer_bg.png) repeat-x #626566;
	height: 70px;
	padding: 40px 0 0;
	width: 100%;
	text-align: center;
}
	
	div.footer ul{
		margin: 0 auto;
		width: 750px;
	}

	div.footer ul li{
		padding: 0 10px;
	}
	div.footer p{
		padding: 5px 0 0;
		color: #fff;
	}