/*====================================================================

common.css

====================================================================*/

/*--------------------------------------------------------------------
format
--------------------------------------------------------------------*/
body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dt,dd,li,address,table,th,td,form,select,option,input,label
{margin:0; padding:0;}
ul li{list-style:none;}
ol{padding:0px 35px 10px 30px;}
ol li{margin:5px 0 5px 0;}
hr{display:none;}
p{margin-bottom:0;}
table, tr, td, th{font-size:100%;}
img{display:block; border:none;}

/*a
-----------------------------------*/
a{
	color:#7FC6BC;
	text-decoration: underline;
}
a:visited{
	color:#70AEA5;
	text-decoration:none;
}
a:hover{
	color:#7FC6BC;
	text-decoration:none;
}

/*--------------------------------------------------------------------
common elements
--------------------------------------------------------------------*/
body{
	background: #FFFFFF;
	font-size: 12px;
	line-height: 1.6;
	color: #666666;
	text-align: center;
}
#container{
	width: 715px;
	margin: 0 auto;
	text-align: left;
}

/*--------------------------------------------------------------------
header
--------------------------------------------------------------------*/
#header{
	width: 715px;
	background: url(../img/head_bg.gif) no-repeat top;
}
#header h1{
	height: 20px;
	line-height: 20px;
	font-size: 10px;
	font-weight: normal;
	color: #88B729;
	padding-left: 10px;
}
#header a{
	font-size: 1px;
	text-indent: -9999px;
	overflow: hidden;
}
#header div{
	float: left;
	width: 235px;
	height: 67px;
	background: url(../img/logo.gif) no-repeat;
}
#header div a{
	display: block;
	width: 235px;
	height: 67px;	
}
#header p{
	float: right;
	width: 198px;
	height: 67px;
	text-indent: -9999px;
	overflow: hidden;
	background: url(../img/tel.gif) no-repeat;
}

/*navi
-----------------------------------*/
#header ul{
	display: block;
	clear: both;
	width: 715px;
	height: 35px;
	background: url(../img/navi.gif) no-repeat;
}
#header ul li{
	display: block;
	width: 143px;
	float: left;
}
#header ul li a{
	display: block;
	width: 143px;
	height: 35px;
}
#header ul li a:hover{
	background-image: url(../img/navi_hover.gif);
}
#toppage a:hover{background-position: 0px 0px;}
#topics a:hover{background-position: -143px 0px;}
#counseling a:hover{background-position: -286px 0px;}
#works a:hover{background-position: -429px 0px;}
#contact a:hover{background-position: -572px 0px;}


/*--------------------------------------------------------------------
contents
--------------------------------------------------------------------*/
#contents{
	background: url(../img/border_s.gif) repeat-y 181px;
	margin-top: 10px;
}
#leftpane{
	float: left;
	width: 172px;
}
#rightpane{
	float: right;
	width: 518px;
}

/*leftpane information
-----------------------------------*/
.lpbox{
	width: 172px;
	background: url(../img/border_d.gif) repeat-x;
	padding-top: 13px;
	font-size: 10px;
	color: #999999;
	line-height: 1.3;
}
.lpbox h3{
	font-size: 12px;
	font-weight: normal;
	color: #4BB5C1;
	line-height: 1;
}
.lpbox p{
	margin-top: 9px;
}
/* member system */
#member table{
	width: 172px;
	border-top: solid 1px #DBDBDB;
	border-collapse: collapse;
	margin: 10px 0 5px;
}
#member th, #member td{
	font-weight: normal;
	padding-top: 2px;
	padding-bottom: 1px;
	border-bottom: solid 1px #DBDBDB;
}
#member td{color: #96CA2D;}
#member .td1{
	text-align: center;
	background: #F9F9F9;
}
#member .td2{
	text-align: center;
	background: #EFEFEF;
}
#member div{
	width: 172px;
	height: 35px;
	text-indent: -9999px;
	overflow: hidden;
	background: url(../img/tel_m.gif) no-repeat;
	margin: 10px 0 0 0;
}
/* asking for contribution */
#contribution div{
	background: #EAF5D4;
	border: solid 1px #CCE69A;
	margin-top: 10px;
	padding: 5px 5px 5px;
}
#contribution th, #contribution td{
	font-weight: normal;
	color: #76AA0C;
	text-align: left;
	vertical-align: top;
	padding: 2px 3px;
}


/*--------------------------------------------------------------------
footer
--------------------------------------------------------------------*/
#footer{
	width: 715px;
	background: url(../img/border_s.gif) repeat-x top;
	margin-top: 15px;
	padding: 17px 0 16px;
	line-height: 1;
	font-size: 10px;
}
#footer p{float: left;}
#footer div{
	float: right;
	color: #96CA2D;
	letter-spacing: 1px;
}

/*pagetop
-----------------------------------*/
#pagetop{
	clear: both;
	width: 715px;
	height: 9px;
	background: url(../img/pagetop.gif) no-repeat right center;
	margin: 10px 0 0;
}
#pagetop a{
	display: block;
	float: right;
	width: 90px;
	height: 9px;
	font-size: 1px;
	text-indent: -9999px;
	overflow: hidden;
}
#pagetop a:hover{background: url(../img/pagetop_hover.gif) no-repeat;}


/*--------------------------------------------------------------------
titles
--------------------------------------------------------------------*/
h2{
	clear: both;
	width: 715px;
	height: 101px;
	font-size: 12px;
	text-indent: -9999px;
	overflow: hidden;
}
#rightpane h3{
	clear: both;
	height: 50px;
	font-size: 10px;
	text-indent: -9999px;
	overflow: hidden;
}
#rightpane h4{
	clear: both;
	height: 16px;
	font-size: 12px;
	text-indent: -9999px;
	overflow: hidden;
}


/*--------------------------------------------------------------------
other
--------------------------------------------------------------------*/
.clear{
	display: block;
	clear: both;
	height: 1px;
	font-size: 1px;
	text-indent: -9999px;
	overflow: hidden;
}

/*pagetop
-----------------------------------*/
.totop{
	clear: both;
	width: 520px;
	height: 11px;
	background: url(../img/totop.gif) no-repeat right center;
	margin: 10px 0 10px;
}
.totop a{
	display: block;
	float: right;
	width: 98px;
	height: 11px;
	font-size: 1px;
	text-indent: -9999px;
	overflow: hidden;
}
.totop a:hover{background: url(../img/totop_hover.gif) no-repeat;}

/*tocontact
-----------------------------------*/
.tocontact{
	clear: both;
	width: 518px;
	height: 34px;
	background: url(../img/tocontact.gif) no-repeat;
}
.tocontact p, .tocontact div{
	text-indent: -9999px;
	overflow: hidden;
}
.tocontact p{
	float: left;
	width: 250px;
}
.tocontact div{
	float: right;
	width: 250px;
}
.tocontact div a{
	display: block;
	width: 239px;
	height: 17px;
	margin-top: 8px;
}
.tocontact div a:hover{
	background: url(../img/tocontact_hover.gif) no-repeat;
}

/*text
-----------------------------------*/
.text{
	margin-top: 10px;
}
.text strong{
	font-weight: normal;
	color: #FC70C7;
}
.text2{
	border: solid 1px #E9E9E9;
	background: #F9F9F9;
	padding: 5px 10px;
	margin: 5px 0 15px;
}
.text2 ul li{
	background: url(../img/circle.gif) no-repeat left 5px;
	padding-left: 13px;
	margin-top: 3px;
}
.text2 strong{
	font-weight: normal;
	color: #FC70C7;
}
.text3{margin: 10px 0 10px;}
.text3 strong{
	font-weight: normal;
	color: #FC70C7;
}

/*table
-----------------------------------*/
/* table1 */
.table1{
	width: 488px;
	margin: 15px 0 0 15px;
	background: url(../img/border_d.gif) repeat-x top;
}
.table1 th, .table1 td{
	padding-top: 5px;
	padding-bottom: 5px;
	text-align: left;
	vertical-align: middle;
	background: url(../img/border_d.gif) repeat-x bottom;
}
.table1 th{
	padding-left: 10px;
	font-weight: normal;
	color: #96CA2D;
}
.table1 td{width: 380px;}
/* table2 */
.table2{
	width: 498px;
	margin: 10px 0 0 10px;
	background: url(../img/border_s2.gif) repeat-x top;
}
.table2 th, .table2 td{
	padding-top: 4px;
	padding-bottom: 4px;
	text-align: left;
	background: url(../img/border_s2.gif) repeat-x bottom;
}
.table2 th{
	padding-left: 10px;
	font-weight: normal;
	color: #96CA2D;
}
.table2 td{width: 360px;}
/* table3 */
.table3{
	width: 318px;
	margin: 15px 0 0 100px;
}
.table3 th, .table3 td{
	text-align: center;
}
/* table4 */
.table4{
	width: 518px;
	background: #E3E3E3;
	margin-top: 10px;
	margin-bottom: 15px;
}
.table4 th, .table4 td{
	padding: 5px 5px 3px 9px;
	text-align: left;
	vertical-align: top;
	line-height: 1.6;
}
.table4 th{
	color: #888888;
	background: #F9F9F9;
	font-weight: normal;
}
.table4 th strong{
	font-weight: normal;
	color: #96CA2D;
}
.table4 td{
	vertical-align: top;
	background: #FFFFFF;;
}