/* ******************************************************************
 *	File name		: base.css
 *	Summary			: css base
 * ******************************************************************
 */
/* ----------------------------------------------------------------- */
/*	base                                                             */
/* ----------------------------------------------------------------- */
body{
	position:relative;
	width:100%;
	height:100%;
	line-height:145%;
	color:#222;
	background:#323B44;
	}
	#wrapper{
		position:relative;
		width:100%;
		text-align:center;
		background:url(../../image/base/bg.png) repeat-x 0 0 #DAEEEE;
		overflow:hidden;
}
/* ----------------------------------------------------------------- */
/*	cloud1                                                           */
/* ----------------------------------------------------------------- */
#cloud1{
	display:block;
	position:absolute;
	top:55px;
	left:50%;
	width:1647px;
	height:259px;
	margin:0 0 0 -823px;
	background:url(../../image/base/cloud1.png) no-repeat 0 0;
   	animation:cloud 20s linear 0s infinite;
	opacity:0;
}
#cloud2{
	display:block;
	position:absolute;
	top:55px;
	left:50%;
	width:1647px;
	height:259px;
	margin:0 0 0 -823px;
	background:url(../../image/base/cloud2.png) no-repeat 0 0;
   	animation:cloud 20s linear 5s infinite;
	opacity:0;
}
@keyframes cloud {
	0%  { opacity:0;left:50%;}
	20% { opacity:1;}
	50% { opacity:1;}
	80% { opacity:1;}
	100%{ opacity:0;left:40%;}
}
/* ----------------------------------------------------------------- */
/*	header                                                           */
/* ----------------------------------------------------------------- */
#head_contents{
	position:relative;
	width:960px;
	height:211px;
	margin:0 auto;
	text-align:left;
}
header{
	position:relative;
	width:930px;
	margin:0 auto;
	z-index:150;
	}
	header #logo{
		position:absolute;
		top:0px;
		left:-7px;
		width:112px;
		height:113px;
		margin:0 auto;
		text-indent:-9999px;
		background:url(../../image/base/logo.png) no-repeat 0 0;
		z-index:10;
	}
	header h1{
		display:block;
		position:absolute;
		top:12px;
		left:119px;
		width:293px;
		height:31px;
		margin:0 auto;
		text-indent:-9999px;
		z-index:0;
		background:url(../../image/base/eng_logo.png) no-repeat 0 0;
	}
	header h1 a{
		display:block;
		position:relative;
		width:427px;
		height:77px;
		text-indent:-9999px;
		}
		header #eng_logo span#row_1{
			display:block;
			position:absolute;
			top:1px;
			left:306px;
			width:309px;
			height:15px;
			text-indent:-9999px;
			background:url(../../image/base/row_1.png) no-repeat 0 0;
		}
		header #eng_logo span#row_2{
			display:block;
			position:absolute;
			top:16px;
			left:306px;
			width:309px;
			height:15px;
			text-indent:-9999px;
			background:url(../../image/base/row_2.png) no-repeat 0 0;
	}
/* nav */
	header nav{
		position:absolute;
		top:57px;
		width:930px;
		height:50px;
		border-top:2px solid #8AB5BA;
		border-bottom:2px solid #8AB5BA;
		background:#C1DBD7;
	}
	header nav ul{
		list-style:none;
		text-align:center;
		z-index:10;
	}
	header nav ul:after{
		content:"";
		position:absolute;
		top:-2px;
		right:0px;
		display:block;
		width:44px;
		height:58px;
		text-indent:-9999px;
		background:url(../../image/base/nav_try.png) no-repeat 0 0;
		z-index:11;
	}
	header nav ul li{
		position:relative;
		display:inline-block;
		height:50px;
		padding:0 0 0 0;
		margin:0px;
		line-height:50px;
	}
	header nav ul li:before{
		content:"/";
		position:relative;
		left:-4px;
		display:inline-block;
		width:35px;
		height:50px;
		text-indent:-9999px;
		background:url(../../image/base/nav_point.png) no-repeat center center;
	}
	header nav ul li:first-child:before{
		display:none;
	}
	header nav ul li:hover:before{
		background:url(../../image/base/nav_point.png) no-repeat center center #C1DBD7;
	}
	header nav ul li a{
		display:inline-block;
		position:relative;
		top:-1px;
		height:100%;
		padding:0 20px;
		font-weight:bold;
		font-size:0.95em;
		color:#3A708D;
	}
	header nav ul li a:hover{
		background:rgba(255,255,255,0.4);
		text-decoration:none;
}
/* active */
.bdcs_about header nav ul li#nav_about a,
.bdcs_member header nav ul li#nav_member a,
.bdcs_achievement header nav ul li#nav_achievement a,
.bdcs_equipment header nav ul li#nav_equipment a,
.bdcs_joint header nav ul li#nav_joint a,
.bdcs_joint header nav ul li#nav_contact a,
.bdcs_joint header nav ul li#nav_itoukens a{
	background:rgba(255,255,255,0.4);
	text-decoration:none;
}
/* nav_language */
	header nav ul li#nav_language{
		display:block;		
		position:absolute;
		top:-70px;
		right:0px;
		width:109px;
		height:53px;
		border-radius:10px;
		-webkit-border-radius:10px;
		-moz-border-radius:10px;
		box-shadow: 0px 0px 5px rgba(0,0,0,0.4);
		-moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.4);
		-webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.4);
		background:#5D814E;
		border:2px solid #FFFFFF;
		line-height:46px;
	}
	header nav ul li#nav_language a{
		display:block;
		width:109px;
		height:45px;
		padding:9px 0 0 0px;
		font-weight:bold;
		font-size:0.95em;
		color:#FFFFFF;
	}
	header nav ul li#nav_language:hover{
		background:#445E39;
	}
	header nav ul li#nav_language:before{
		display:none;
	}


/* ----------------------------------------------------------------- */
/*	back_animation                                                   */
/* ----------------------------------------------------------------- */
#sea{
	position:absolute;
	top:0px;
	left:50%;
	width:100%;
	height:480px;
	margin-left:234px;
	background:url(../../image/back_animation/sea.png) repeat-x 0 0;
	z-index:0;
	}
	#sea_shallows{
		position:absolute;
		top:0px;
		left:-275px;
		width:275px;
		height:480px;
		background:url(../../image/back_animation/sea_shallows.png) no-repeat 0 0;
}
#sea #fishbox{
	position:absolute;
	top:74px;
	left:280px;
	width:101px;
	height:36px;
   	animation:fishbox 20s linear infinite;
	opacity:0;
}
@keyframes fishbox {
	0%  { opacity:0;}
	10% { opacity:1;}
	40% { opacity:1;}
	45% { opacity:0;}
	50% { opacity:0;}
	60% { opacity:1;}
	90% { opacity:1;}
	95% { opacity:0;}
	100%{ opacity:0;}
}
#sea #fish{
	position:absolute;
	top:0px;
	left:200px;
	width:101px;
	height:36px;
	background-image:url(../../image/back_animation/fish.png);
	background-repeat:no-repeat;
	background-position:0 0;
   	animation:fish 20s linear infinite;
}
@keyframes fish {
	0%  { left:200px;background-position:0 0;}
	45% { background-position:0 0;}
	50% { left:0px;background-position:0 -36px;}
	95% { background-position:0 -36px;}
	100%{ left:200px;background-position:0 0;}
}
#sea #seaweed{
	position:absolute;
	top:240px;
	left:451px;
	width:115px;
	height:73px;
	background-image:url(../../image/back_animation/seaweed.png);
	background-repeat:no-repeat;
	background-position:0 0;
}
#sea #star{
	position:absolute;
	top:283px;
	left:381px;
	width:40px;
	height:40px;
	background:url(../../image/back_animation/starfish.png) no-repeat 0 0;
}
#sea #star_txt{
	position:absolute;
	top:228px;
	left:282px;
   	animation:star_txt 10s linear infinite;
}
@keyframes star_txt {
	0%  { left:282px;}
	50% { left:302px;}
	100%{ left:282px;}
}
#sea #star_o{
	position:absolute;
	top:0px;
	left:0px;
	width:17px;
	height:17px;
	background:url(../../image/back_animation/star_o.png) no-repeat 0 0;
	opacity:0;
   	animation:star_o 5s 0s linear infinite;
}
@keyframes star_o {
	0%  { top:-0px;opacity:0;}
	50% { top:-50px;opacity:1;}
	100%{ top:-100px;opacity:0;}
}
#sea #star_c{
	position:absolute;
	top:18px;
	left:27px;
	width:9px;
	height:11px;
	background:url(../../image/back_animation/star_c.png) no-repeat 0 0;
	opacity:0;
   	animation:star_c 5s 0.5s linear infinite;
}
@keyframes star_c {
	0%  { top:18px;opacity:0;}
	50% { top:-32px;opacity:1;}
	100%{ top:-82px;opacity:0;}
}
#sea #star_e{
	position:absolute;
	top:30px;
	left:48px;
	width:10px;
	height:11px;
	background:url(../../image/back_animation/star_e.png) no-repeat 0 0;
	opacity:0;
   	animation:star_e 5s 1s linear infinite;
}
@keyframes star_e {
	0%  { top:30px;opacity:0;}
	50% { top:-20px;opacity:1;}
	100%{ top:-70px;opacity:0;}
}
#sea #star_a{
	position:absolute;
	top:43px;
	left:70px;
	width:11px;
	height:12px;
	background:url(../../image/back_animation/star_a.png) no-repeat 0 0;
	opacity:0;
   	animation:star_a 5s 1.5s linear infinite;
}
@keyframes star_a {
	0%  { top:43px;opacity:0;}
	50% { top:-7px;opacity:1;}
	100%{ top:-57px;opacity:0;}
}
#sea #star_n{
	position:absolute;
	top:56px;
	left:91px;
	width:13px;
	height:11px;
	background:url(../../image/back_animation/star_n.png) no-repeat 0 0;
	opacity:0;
   	animation:star_n 5s 2s linear infinite;
}
@keyframes star_n {
	0%  { top:56px;opacity:0;}
	50% { top:6px;opacity:1;}
	100%{ top:-44px;opacity:0;}
}

/* ----------------------------------------------------------------- */
/*	meter                                                            */
/* ----------------------------------------------------------------- */
#meter{
	display:block;
	position:absolute;
	top:350px;
	left:50%;
	width:15px;
	height:100%;
	margin-left:-472px;
	max-height:1136px;
	background:url(../../image/back_animation/meter.png) no-repeat 0 0;
	z-index:120;
}
#meter #cago{
	display:block;
	position:fixed;
	margin:-33px 0 0 -5px;
	text-indent:-9999px;
	cursor:pointer;
	border:1px solid red;
}
#meter #back_top{
	display:block;
	position:absolute;
	text-indent:-9999px;
	top:0px;
	left:0px;
	cursor:pointer;
	width:58px;
	height:87px;
	background:url(../../image/back_animation/cargo.png) no-repeat 0 0;
	z-index:5;
}
#meter #ito_prof{
	display:block;
	position:absolute;
	top:-75px;
	left:-5px;
	width:68px;
	height:119px;
	text-indent:-9999px;
	background:url(../../image/back_animation/ito_prof.png) no-repeat 0 0;
	z-index:1;
}
#meter #ryutan{
	display:block;
	position:absolute;
	top:-31px;
	left:9px;
	width:52px;
	height:50px;
	text-indent:-9999px;
	background:url(../../image/back_animation/ryutan.png) no-repeat 0 0;
	z-index:3;
   	animation:ryutan_a 0.5s 0s linear 1;
}
@keyframes ryutan_a {
	0%  { top:-31px;}
	25% { top:-50px;}
	50% { top:-31px;}
	75% { top:-50px;}
	100%{ top:-31px;}
}
#meter #ryutan_arm{
	display:block;
	position:absolute;
	top:0px;
	left:23px;
	width:13px;
	height:7px;
	text-indent:-9999px;
	background:url(../../image/back_animation/ryutan_arm.png) no-repeat 0 0;
	z-index:3;
   	animation:ryutan_a 0.5s 0s linear 1;
	z-index:6;
}
#meter #ryutan_b{
	display:block;
	position:absolute;
	top:-34px;
	left:3px;
	width:55px;
	height:56px;
	text-indent:-9999px;
	background:url(../../image/back_animation/ryutan_b.png) no-repeat 0 0;
	z-index:3;
	opacity:0;
}

/* ----------------------------------------------------------------- */
/*	pnkz                                                             */
/* ----------------------------------------------------------------- */
#pnkz{
	position:absolute;
	top:117px;
	width:100%;
	z-index:80;
	color:#666;
	text-align:center;
	z-index:1200;
	}
	#pnkz p{
		width:930px;
		margin:0 auto;
		font-size:0.75em;
		text-align:left;
		text-indent:15px;
	}
	#pnkz a{
		color:#3A718C;
	}
	#pnkz a:hover{
		text-decoration:underline;
}
/* ----------------------------------------------------------------- */
/*	footer                                                           */
/* ----------------------------------------------------------------- */
footer {
	position:relative;
	min-height:100px;
	z-index:0;
	background:#323B44;
}
footer p{
	clear:both;
	padding:10px 0;
	font-size:0.8em;
	text-align:center;
	color:#43BCC5;
}