@charset "shift_jis";

/* ----@‘Sƒy[ƒW‘Ξ‰ž@---- */

*{	margin:0;padding:0; font-style:normal;}


body{	font-family:"ƒƒCƒŠƒI", Meiryo, "ƒqƒ‰ƒMƒmŠpƒS Pro W3", "Hiragino Kaku Gothic Pro", "‚l‚r ‚oƒSƒVƒbƒN", "MS PGothic", sans-serif;
	font-size:14px;
	color:#4F4F4F;
	line-height:1.3em;
	background-color:#FFF;
	background:url(http://johnan.org/img/bg.gif) top repeat-x;
}








img{ 	border:0px;	}
ul li{	list-style-type:none;}


a:link{ 		color:#09F; text-decoration:underline;	}
a:visited{		color:#09F; text-decoration:underline;	}
a:hover{		color:#09F; text-decoration:none;	}


.clearfix{clear:both;}
.left{	float:left;}
.right{	float:right;}
#main .center{text-align:center;}
#main .sign{	text-align:right;}
#main .clr{	clear:both;}
#main .blue{	color:#09F;}
#main .red{	color:#C00;}

#main span.void_1{	margin-left:22px;}







#container{	width:910px; margin:0 auto; padding:0px;}






/* —— ƒwƒbƒ_ —— */
#header{	width:910px; height:85px; margin:0px; padding:0px;}
	#header .left{		margin-top:20px;}
	#header .left h2{	font-size:1px; line-height:1.0em;}
	#header .right{		margin-top:34px;}



/* —— ƒƒjƒ…[ —— */
#menu{			width:910px; height:40px; padding:0px;}
#menu #menu_box{	width:910px; height:40px; margin:0 auto; padding:0px; }

#menu #menu_box ul {
		width:910px;
		height:40px;
		margin:0px;
		padding:0px;
		white-space:nowrap;
}

#menu #menu_box ul li {
		display:inline;
		float:left;
		list-style-type:none;
		margin:0px;
		padding:0px;
		font-size:1px;
		line-height:1.0em;
}	
	
#menu #menu_box ul li a { 		display:block; width:150px; height:40px;}
#menu #menu_box ul li.global01 a { 	display:block; width:157px;}
#menu #menu_box ul li.global06 a { 	display:block; width:153px;}

#menu #menu_box ul li.global01, ul li.global01 a:hover {	background:url(http://johnan.org/img/menu01a.gif);}
#menu #menu_box ul li.global02, ul li.global02 a:hover {	background:url(http://johnan.org/img/menu02a.gif);}
#menu #menu_box ul li.global03, ul li.global03 a:hover {	background:url(http://johnan.org/img/menu03a.gif);}
#menu #menu_box ul li.global04, ul li.global04 a:hover {	background:url(http://johnan.org/img/menu04a.gif);}
#menu #menu_box ul li.global05, ul li.global05 a:hover {	background:url(http://johnan.org/img/menu05a.gif);}
#menu #menu_box ul li.global06, ul li.global06 a:hover {	background:url(http://johnan.org/img/menu06a.gif);}
#menu #menu_box ul li a:hover img {	visibility:hidden;}


/* —— ƒƒCƒ“‰ζ‘œ —— */
#vis1{			clear:both; width:910px; height:250px; margin:20px 0px 40px 0px; padding:0px;}
#vis2{			clear:both; width:910px; height:80px; margin:20px 0px 19px 0px; padding:0px;}

	h1{	font-size:1px; line-height:1.0em;}
	
	
	
	


/* —— ƒtƒbƒ^ —— */
#foot{			clear:both; width:910px; margin:0px; padding:0px; color:#555; border-top:solid 40px #FFF;}
	#foot img{	font-size:1px; line-height:1.0em;}

	#foot #pagetop{		width:910px; height:25px; text-align:right;}

	#foot #footnavi{	width:910px; height:26px; margin:0px; padding-top:8px; background-color:#DDD; font-size:11px; text-align:center;}

	#foot #footbox{			width:889px; height:80px; margin:0px; padding:38px 0px 38px 21px; background-color:#F6F6F6;}
	#foot #footbox dl.right{	width:237px; font-size:11px; line-height:1.3em;}
	#foot #footbox dl.right dd{	margin-top:4px;}

	#foot a:link{ 		color:#555; text-decoration:none;}
	#foot a:visited{	color:#555; text-decoration:none;}
	#foot a:hover{		color:#555; text-decoration:underline;}





/* —— ƒTƒu —— */
#sub{	float:right; width:240px; margin:0px; padding:0px;}

	#sub .title{width:240px; height:44px; margin-top:20px; font-size:1px; line-height:1.0em;}
	
	#sub .title01{width:240px; height:60px; margin-top:20px; background:url(img/sub_01.gif) no-repeat; }
	#sub .title02{width:240px; height:60px; margin-top:20px; background:url(img/sub_02.gif) no-repeat; }


	#sub #subcontact a{ display:block;	width:240px; height:105px; background:url(img/subcontact.gif) no-repeat; 	text-indent:100%;
	overflow:hidden;
	white-space:nowrap;
}
	
#sub #subcontact a:hover {	background: url(img/subcontact_on.jpg) no-repeat;}
#sub #subcontact a:hover img {	visibility:hidden;}	
	

	#sub .subbtn{		width:240px; height:70px; margin:10px 0px 0px 0px; font-size:1px; line-height:1.0em; 	text-indent:100%;
	overflow:hidden;
	white-space:nowrap;
}
	
	
	
		#sub .subbtn01 a{ 	display:block; width:240px; height:87px; margin:0px; font-size:1px; line-height:1.0em; 	}
		#sub .subbtn02 a{	display:block; width:240px; height:87px; margin:10px 0px 0px 0px; font-size:1px; line-height:1.0em; 	}

#sub .subblog a{	
	display:block;
	width:240px; 
	height:87px; 
	margin:10px 0px 0px 0px; 
	font-size:1px; 
	line-height:1.0em; 
}

		

	#sub .submenu{		width:240px; margin-bottom:20px;}
	#sub .submenu ul{	width:240px; margin:0px;}
	#sub .submenu ul li a{	width:220px; height:32px; padding:18px 0px 0px 20px; background: url(img/submenu_li.gif) no-repeat; color:#000; display:block;}
	#sub .submenu ul li a:hover{	width:220px; height:32px; padding:18px 0px 0px 20px; background: url(img/submenu_li_on.gif) no-repeat; color:#000; display:block;}

		#sub .submenu a:link{ 		color:#000; text-decoration:none;}
		#sub .submenu a:visited{	color:#000; text-decoration:none;}
		#sub .submenu a:hover{		color:#000; text-decoration: underline;}

	#sub .subbox{	width:198px; margin-bottom:18px; padding:20px 20px 20px;  border:solid 1px #cccccc; border-top:none; font-size:12px;}


	#sub #googleMap{ width:200px;
	height:150px;
	}
	#sub #office address{width:224px; font-size:12px; color:#000; line-height:18px;}
	#sub #office a{ display:block; text-align:right; color:#000000; line-height:30px}

	#sub #office a:link{ 	color:#000; text-decoration:underline;}
	#sub #office a:visited{	color:#000; text-decoration:none;}
	#sub #office a:hover{	color:#000; text-decoration:underline;}


/* —— ƒƒCƒ“ —— */
#main{	float:left; width:640px; margin:0px; padding:0px;}


/* ——INDEX—— */

/*  ƒgƒbƒvƒT[ƒrƒXBOX  */
#topservice{
	width:640px;
	height:192px;
	margin:0px 0px 40px;
}

#topservice h3{
	height:79px;
	width:310px;
	text-indent:100%;
	overflow:hidden;
	white-space:nowrap;
}

#topservice li a{
	display:block;
	float:left;
	width:310px;
	height:192px;
}

#topservice li.svbtn01 a{
	background:url(img/svbtn01.jpg) no-repeat;}
#topservice li.svbtn02 a{
	margin-left:20px;
	background:url(img/svbtn02.jpg) no-repeat;}

#topservice li.svbtn01 a:hover{
	background:url(img/svbtn01_on.jpg) no-repeat;}
#topservice li.svbtn02 a:hover{
	background:url(img/svbtn02_on.jpg) no-repeat;}

#topservice li p{
	margin:0px 24px 0px 20px;
	width:266px;
}

#topservice a:link{ 		color:#000; text-decoration:none;	}
#topservice a:visited{		color:#000; text-decoration:none;	}
#topservice a:hover{		color:#000; text-decoration:none;	}





/* Œ©Ο‚ΰ‚θμ¬BOX */
#mitsumori{
	width:640px;
	height:200px;
	margin:0px 0px 40px;
	background:url(img/mitsumori.jpg) no-repeat;
}

#mitsumori h4{
	height:120px;
	width:640px;
	text-indent:100%;
	overflow:hidden;
	white-space:nowrap;
}

#mitsumori ul{
	display:block;
	width:547px;
	height:50px;
	margin:0px 0px 0px 93px;
	}
#mitsumori li a{
	display:block;
	float:left;
	width:246px;
	height:50px;
	text-indent:100%;
	overflow:hidden;
	white-space:nowrap;	
}

#mitsumori li.mitsumori_btn01 a{
	background: url(img/hojin_btn.gif) no-repeat;
}

#mitsumori li.mitsumori_btn02 a{
	margin-left:15px;
	background: url(img/kojin_btn.gif) no-repeat;
}

#mitsumori li.mitsumori_btn01 a:hover{
	background: url(img/hojin_btn_on.gif) no-repeat;
}
#mitsumori li.mitsumori_btn02 a:hover{
	margin-left:15px;
	background: url(img/kojin_btn_on.gif) no-repeat;
}


	/* ‚»‚Μ‘ΌƒT[ƒrƒX */

#servicelist{
	width:640px;
	margin-bottom:40px;
}
#servicelist .title{
	width:640px; 
	height:44px; 
	background:url(img/title_01.gif) no-repeat; 	
	text-indent:100%;
	overflow:hidden;
	white-space:nowrap;
}
#servicelist p{
	display:block;
	float:left;
	width:280px;
	height:80px;
	margin:0px;
	padding-top:21px;
	font-size:14px;
	color:#000000;
	
}

#servicelist h4{
	float:left;
	width:219px;
	height:114px;
	text-indent:100%;
	overflow:hidden;
	white-space:nowrap;
}



#servicelist li a{
	clear:both;
	display:block;
	width:640px;
	height:114px;
	margin-top:10px;
}
	
#servicelist li.sv01 a{
	margin-top:20px;
		background:url(img/service_01.jpg) no-repeat;}
#servicelist li.sv02 a{
		background:url(img/service_02.jpg) no-repeat;}
#servicelist li.sv03 a{
		background:url(img/service_03.jpg) no-repeat;}

#servicelist li.sv01 a:hover{
	margin-top:20px;
		background:url(img/service_01on.jpg) no-repeat;}
#servicelist li.sv02 a:hover{
		background:url(img/service_02on.jpg) no-repeat;}
#servicelist li.sv03 a:hover{
		background:url(img/service_03on.jpg) no-repeat;}

#servicelist li a p{ 		color:#000; text-decoration:underline!important;	}
#servicelist li a p:hover{		color:#000; text-decoration:none!important;	}




	/* V’…ξ•ρ */
	#main #topics .title02{ 
	width:640px; 
	height:44px;
	margin-bottom:8px; 
	background:url(img/title_02.gif) no-repeat; 	
	text-indent:100%;
	overflow:hidden;
	white-space:nowrap;
}
	#main #topics{	clear:both; margin-bottom:60px; color:#000000;}
	#main #topics ul{		width:640px;}
	#main #topics ul li{ width:618px;		padding:12px 11px 15px 11px; border-bottom:solid 1px #cccccc;}
	#main #topics ul li.date{	float:left; width:188px; padding:12px 0px 15px 19px; background:url(img/new.gif) 108px 12px no-repeat; border-bottom:none;}
	
	#main #topics a:link{ 		color:#000; text-decoration:underline;}
	#main #topics a:visited{	color:#000; text-decoration:underline;}
	#main #topics a:hover{		color:#000; text-decoration:none;}




/*  ‚¨–⍇‚ν‚Ήƒoƒi[  */
#contactbn a{
	display:block;
	width:640px;
	height:143px;
	background:url(img/contact_bn.jpg) no-repeat;
	text-indent:100%;
	overflow:hidden;
	white-space:nowrap;
}
#contactbn a:hover{
	display:block;
	width:640px;
	height:143px;
	background:url(img/contact_bn_on.jpg) no-repeat;
}