@charset "utf-8";

/*------------------------------------------------------------------------------*/
/* SUJ */
/* Produced by TYWebdesign */
/* 2012/  /   */
/* Last Update 2012/  /   */
/*------------------------------------------------------------------------------*/

body {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
	background: url(../../images/suj/bg.gif) left top repeat-x #fff;
	margin: 0;
	padding: 0;
	line-height: 1.8;
	font-size: 14px;
	color: #393939;
}

html {
	overflow-y: scroll;
}

/* Reset
----------------------------------------------- */

ul, ol, dl, dt, dd, li {
	padding: 0;
	margin: 0;
}

h1, h2, h3, h4, h5, h6, p {
	margin: 0;
	padding: 0;
}

img {
	border: none;
	vertical-align:bottom;
}

/* Link
----------------------------------------------- */

a:link, a:visited {
	color: #42413C;
	text-decoration: none;
}

a:hover, a:active, a:focus {
	text-decoration: underline;
}

a img.alpha {
	background: none!important;
}

a:hover img.alpha {
	/* for modern browser */
	opacity: 0.8;
	/* for IE7 */
	filter: alpha(opacity=80);
	/* for IE8 */
	-ms-filter: "alpha(opacity=80)";
	background: none!important;
}

/* ================================================================================ */
/* 1.Basic Layout */ 
/* ================================================================================ */

#container {
	width: 960px;
	margin: 0 auto;
}

#header {
	height: 100px;
	background: url(../../images/suj/header_bg.gif) 0 0 no-repeat;
}

#icatch {
	width: 960px;
}

#content {
	position: relative;/* IE6 */
	width: 960px;
	margin-bottom: 30px;
}

#side {
	width: 250px;
	float: left;
}

#main {
	width: 680px;
	padding: 0;
	float: right;
}

#footer {
	height: 160px;
	background: url(../../images/suj/footer/footer_bg.gif) 0 0  repeat-x;
}

#footercont {
	width: 960px;
	margin: 0 auto;
}

/* ================================================================================ */
/* 2.Header Custmize */ 
/* ================================================================================ */

#header h1 {
	padding-top: 18px;
}

#hdboxl {
	width: 460px;
	float: left;
}

#hdboxr {
	width: 500px;
	height: 95px;
	float: right;
	position: relative;
}

/* minimenu
----------------------------------------------- */

#hdboxr ul {
	position: absolute;
	right: 0;
	bottom: 0;
	list-style-type: none;
}

#hdboxr ul li {
	height: 100%;/* IE6 */
	margin-right: 25px;
	padding-left: 12px;
	display: inline;
	background: url(../../images/suj/list_tri.gif) 0 50% no-repeat;
}

/* grobal navi
----------------------------------------------- */

#gnav {
	margin-bottom: 30px;
	padding: 0;
	clear: both;
}

#gnav ul {
	list-style-type: none;
}

#gnav ul#main_menu li a{
	float: left;
}

ul.sub_menu{
	display: none;
	position: absolute;
	z-index:9999;
	margin-top: 50px;
        margin-left: 160px;
}
ul.sub_menu li{
	background-color: #BFFFFF;
	border-bottom: 1px solid #7DBDF4;
	height: 30px;
}
ul.sub_menu li:hover{
	background-color: #7DBDF4;
}
ul.sub_menu li a{
	text-align: left;
	padding: 0 8px;
	display: block;
	height: 100%;
	line-height: 30px;
	text-decoration: none;
	height: 30px;
	width: 100%;
}

/* ================================================================================ */
/* 3.Content Custmize */ 
/* ================================================================================ */

#main h2 {
	margin: 15px 0;
	/* delete this line after erase comment */
	margin-top: 0;
	padding: 1px 0 8px 25px;
	color: #fff;
	font-size: 18px;
	background:url(../../images/suj/h2_bg.gif) 0 0 no-repeat;
}

#main h3 {
	margin: 0 20px 15px;
	padding: 0 0 3px 2px;
	border-bottom: 3px solid #f3ebeb;
}


/* middle menu
----------------------------------------------- */

div.middle {
	width: 680px;
	height: 140px;
	margin-bottom: 30px;
	background: url(../../images/suj/middle/middle_bg.gif) 0 0 no-repeat;
}

ul.item {
	margin-top: 50px;
}

ul.item li {
	padding-left: 20px;
	list-style: none;
	float: left;
}

/* topics
----------------------------------------------- */

dl.topi {
	width: 680px;
	position: relative;
}

dl.topi dt {
	width: 9em;
	padding-top: 10px;
	padding-left: 4.5em;
	position: absolute;
	left: 0;
	color: #393939;
}

dl.topi dd {
	padding: 10px 15px 20px 14.5em;
}

dt.news {
	background: url(../../images/suj/topi/list_news.gif) 5px 15px no-repeat;
}

dt.update {
	background: url(../../images/suj/topi/list_update.gif) 5px 15px no-repeat;
}

dd.gray {
	background: #eaeaea;
}

div.view {
	margin-top: 20px;
	padding-left: 570px;
	padding-bottom: 10px;
	border-bottom: 3px solid #0e4ead;
}

/* ================================================================================ */
/* 4.Sidebar Custmize */ 
/* ================================================================================ */

div.login h4 {
	margin: 0 auto;
	width: 180px;
	background: #0e4ead;
	font-size: 13px;
	text-align: center;
	color: #fff;
}

div.login input {
	width: 100px;
}

div.login p {
	margin-top: 10px;
	padding-left: 40px;
	font-size: 11px;
}


ul.sidemenu {
	padding: 0;
	list-style: none;
	margin-bottom: 15px 0;
}

ul.sidemenu li {
	padding: 0;
	margin-bottom: 15px;
	background: #fff;
}

div.login {
	width: 250px;
	height: 140px;
	margin-bottom: 30px;
	background: url(../../images/suj/side/login_bg.gif) 0 0 no-repeat #fff;
}

/* side navi
----------------------------------------------- */

ul.nav {
	margin: 0 0 20px;
	list-style: none;
}
ul.nav li {
	font-size: 13px;
	border-bottom: 1px solid #45bf55;
}
ul.nav a, ul.nav a:visited {
	padding: 5px 5px 5px 25px;
	display: block;
	width: 220px;  /* IE6 */
	color: #393939;
	text-decoration: none;
	background: url(../../images/suj/side/side_list_off.gif) 5px 50% no-repeat;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus {
	color: #fff;
	background: url(../../images/suj/side/side_list_on.gif) 5px 50% no-repeat #45bf55;
}

/* ================================================================================ */
/* 5.PageTop Footer Custmize */ 
/* ================================================================================ */

#ftboxl {
	width: 800px;
	float: left;
}

#ftboxl ul {
	margin: 8px 0 15px -1px;
	padding: 0 0 5px 0;
	background: url(../../images/suj/common/foot_line.gif) bottom left repeat-x;
}

#ftboxl li {
	padding: 0 10px;
	font-size: 12px;
	display:inline;
	border-left:1px solid #fff;
}

#ftboxl li a {
	color: #fff;
	text-decoration: none;
}

#ftboxl li a:hover {
	color: #333;
	text-decoration: none;
}


.add {
	padding-top: 5px;
	font-size:12px;
	color: #fff;
}

.copy {
	padding-top: 10px;
	font-size: 10px;
	color: #fff;
	font-weight: 700;
}

#ftboxr {
	width: 150px;
	float: right;
	overflow: hidden;
}

.pagetop {
	margin: 0 auto;
}

/* ================================================================================ */
/* 6.TOOL */ 
/* ================================================================================ */

/* Float
----------------------------------------------- */
.fltrt {float: right; margin-left: 8px;}
.fltlft {float: left; margin-right: 8px;}

/* ClearFix
----------------------------------------------- */

.clearfix:after {
	content: " ";
	display: block;
	visibility: hidden;
	clear: both;
	height: 0.1px;
	font-size: 0.1em;
	line-height: 0;
}
/* for IE7 */

*:first-child+html .clearfix {
	min-height: 1%;
	/*zoom	: 1;*/
}
/* for Mac IE */

* html .clearfix {
	display: inline-table;
}
/* no Mac IE \*/

* html .clearfix {
	height: 1%;
}

.clearfix {
	display: block;
	
	overflow:hidden;
}
/* End hide from IE-mac */

/* for safari?EIE7?EIE8 */

*+html .clearfix {
	min-height: 0;
	display: inline-block;
}

/* Other Clear
----------------------------------------------- */

.clears { 
	clear:both;
	/*height:0;
	font-size: 1px;
	line-height: 0px;*/
}

/* Styling
----------------------------------------------- */

p.fs12 {font-size: 12px;}
p.lr20 {padding: 0 20px;}
p.lr30 {padding: 0 30px;}
.btm15 {margin-bottom: 15px;}
.btm20 {margin-bottom: 20px;}
.btm30 {margin-bottom: 30px;}
.red {color: #cc0000;}
.redb {color: #cc0000; font-weight: bold;}

/* news of page
----------------------------------------------- */

div.content h1.title{
	margin: 0;
	margin-bottom: 15px;
	padding: 1px 0 8px 25px;
	color: #fff;
	font-size: 18px;
	background:url(../../images/suj/h2_bg.gif) 0 0 no-repeat;
}

div.content p.sub_title{
	margin: 15px 0;
	padding: 1px 0 8px 25px;
	font-size: 15px;
	background:url(../../images/suj/sub_title_bg.gif) 0 0 no-repeat;
}

div.content div.news{
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
	line-height: 1.8;
	font-size: 13px;
}