@charset "utf-8";

/* TOP PAGE
---------------------------------------------*/

#top {background: url(../img/top/bg_body.jpg) left top repeat-x;}

#top #header {
	height: 473px;
	margin-bottom: 30px;}

/*  SLIDESHOW */

#slidebox {
	position: absolute;
	left: -5px; top: 118px;
	width: 940px; height: 234px;
	z-index: 1;
	padding: 15px;
	background: url(../img/top/bg_slide.jpg) left top no-repeat;}

#slideshow {
	width: 940px;
	height: 234px;
	overflow: hidden;}

#slidenav {
	position: absolute;
	left: 427px; top: 270px;
	z-index: 2000;}

#slidenav li {
	float: left;
	margin-left: 10px;
	text-indent: -9999px;}

#slidenav a {
	display: block;
	width: 10px;
	height: 10px;
	background: url(../img/top/nav_mark.gif) left top no-repeat;}

#slidenav .activeSlide a {background: url(../img/top/nav_active.gif) left top no-repeat;}

#slidenav a:focus {outline: none;}

/*  SELECT */

#select {
	position: relative;
	width: 960px;
	height:290px;
	background: url(../img/top/bg_select.gif) left bottom no-repeat;}

#select dl {position: absolute;}

#select dl dt {text-align: center;}
#select dl dd {padding-top: 5px;;}

#select01 {
	left: 12px; top: 0;
	width: 295px;}

#select02 {
	left: 331px; top: 0;
	width: 300px;}

#select03 {
	position: relative;
	right: 2px; top: 0;
	width: 300px;}

#select ul li {
	text-indent: -9999px;
	margin-bottom: 4px;}

#select ul li a {
	display: block;
	overflow: hidden;
	height:0 !important;}

#select01 li a {
	width: 295px;
	height /**/:  52px;
	padding-top: 52px;
	background-image: url(../img/top/select01.jpg);}

.pr01 a {background-position: 0 0;}
.pr02 a {background-position: 0 -52px;}
.pr03 a {background-position: 0 -104px;}
.pr04 a {background-position: 0 -156px;}

.pr01 a:hover {background-position: -295px 0;}
.pr02 a:hover {background-position: -295px -52px;}
.pr03 a:hover {background-position: -295px -104px;}
.pr04 a:hover {background-position: -295px -156px;}

#select02 li {
	float: left;
	margin-right: 5px;}

#select02 li a {
	width: 145px;
	height /**/:  107px;
	padding-top: 107px;
	background-image: url(../img/top/select02.jpg);}

.js01 a {background-position: 0 0;}
.js02 a {background-position: 0 -107px;}
.js03 a {background-position: 0 -214px;}
.js04 a {background-position: 0 -321px;}

.js01 a:hover {background-position: -145px 0;}
.js02 a:hover {background-position: -145px -107px;}
.js03 a:hover {background-position: -145px -214px;}
.js04 a:hover {background-position: -145px -321px;}

#select03 li {
	position: absolute;}

#select03 li.dp01 {
	left: 4px; top: 60px;
}

#select03 li.dp02 {
	left: 4px; top: 172px;
}

#select03 li.dp03 {
	left: 150px; top: 172px;
}

#select03 li.dp01 a {
	width: 286px;
	height /**/:  107px;
	padding-top: 107px;
	background-image: url(../img/top/select03_01.jpg);}

.dp01 a {background-position: 0 0;}
.dp01 a:hover {background-position: 0 -107px;}

#select03 li.dp02 a,
#select03 li.dp03 a {
	width: 140px;
	height /**/:  107px;
	padding-top: 107px;
	background-image: url(../img/top/select03_02.jpg);}

.dp02 a {background-position: 0 0;}
.dp03 a {background-position: 0 -107px;}

.dp02 a:hover {background-position: -140px 0;}
.dp03 a:hover {background-position: -140px -107px;}
	
#select04 {
	width: 960px;
	height: 137px;
	margin-top: 15px;
	background: url(../img/top/bg_select04.gif) left bottom no-repeat;
}

#select04 dt {
	text-align: center;
}

#select04 dd {
	padding-top: 10px;
	padding-left: 10px;
}

#select04 ul li {
	float: left;
	margin-right: 5px;
}

#select04 ul li a {
	display: block;
	width: 310px !important;
	height: 54px;
	text-indent: -9999px;
	overflow: hidden;
	background-image: url(../img/top/select04_01.jpg);
}

.ot01 a {background-position: 0 0;}
.ot02 a {background-position: 0 -54px;}
.ot03 a {background-position: 0 -108px;}

.ot01 a:hover {background-position: -310px 0;}
.ot02 a:hover {background-position: -310px -54px;}
.ot03 a:hover {background-position: -310px -108px;}

/*  INFORMATION BOX */

#infobox {
	font-size: 12px;
	margin-top: 38px;
	margin-bottom: 50px;}

#newsbox,
#topicsbox {width: 465px;}

/*  NEWS */

#newsbox {float: left;}

#newsbox h3 {
	position: relative;
	margin-bottom: 10px;}

#newsbox h3 span {
	position: absolute;
	right: 8px; top: 17px;}

#newsbox dl dt {
	width: 105px;
	padding: 10px 0 10px 14px;}

#newsbox dl dd {
	position: relative;
	line-height: 1.5em;
	margin-top: -3.2em;
	margin-bottom: 3px;
	padding: 10px 5px 10px 120px;
	background: url(../img/bdr.gif) left bottom repeat-x;}

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

/*  TOPICS */

#topicsbox {float: right;}

#topicsbox a img {
	float: left;
	width: 118px;
	padding-bottom: 25px;
	background: url(../img/top/btn_detail.gif) center bottom no-repeat;}

#topicsbox a:hover img {
	background: url(../img/top/btn_detail_o.gif) center bottom no-repeat;}

#topicsbox ul li {
	margin-top: 10px;
	padding-bottom: 10px;
	background: url(../img/bdr.gif) left bottom repeat-x;}

#topicsbox ul li dl {
	float: right;
	width: 334px;}

#topicsbox ul dl dt {
	font-weight: bold;
	text-indent: -0.5em;
	padding-top: 1em;
	padding-bottom: 0.5em;}

#topicsbox .nophoto {
	margin-top: 10px;
	padding-bottom: 10px;
	background: url(../img/bdr.gif) left bottom repeat-x;}

#topicsbox .nophoto dt {
	font-weight: bold;
	text-indent: -0.5em;
	padding-top: 1em;
	padding-bottom: 0.5em;}


/*  ABOUT SHOWA SCIENCE */

#aboutbox {
	width: 959px;
	height: 125px;
	font-size: 12px;
	margin-bottom: -20px;
	background: url(../img/top/bg_about.jpg) left top no-repeat;}

*html #aboutbox {height: 150px;}

#aboutbox div {
	float: left;}

#aboutbox #showa {
	width: 440px;
	margin-left: 30px;
	margin-right: 30px;}

* html #aboutbox #showa {margin-left: 15px;}

#aboutbox #chuo {
	width: 450px;}


#aboutbox div h4 {
	font-weight: bold;
	font-size: 16px;
	color: #19458e;
	margin-top: 30px;
	margin-bottom: 3px;}

#aboutbox div h4 a {
	color: #19458e;
	text-decoration: none;}

#aboutbox div h4 a:hover {
	text-decoration: underline;}

#aboutbox div p {margin-left: 1px;}