/* CSS Document */


#nature {
	width:756px;
	float:right;
}

#nature h1 {
	width:756px;
	height:137px;
	background:url(../img/nature/title.jpg) no-repeat;
}


#nature #nav {
	width:720px;
	height:30px;
	padding:0 0 40px 25px;
}


@media screen and (max-width: 480px) {

#nature {
	width:100%;
	float:none;
}
	
#nature h1 {
	width:auto;
	height:auto;
	padding:10px 20px 20px 20px;
	margin-bottom:10px;
	text-indent: 0;
	white-space: pre-wrap;
	background:url(../img/sphone/bar.gif) no-repeat bottom;
}

#nature #nav {
	display:none;
}

}





#nature #nav ul {
width:720px;
height:30px;
margin:0px auto;
font-size:10px;
padding:0;
border-left:1px dotted #ABABAB;
}

#nature #nav li {float:left; border-right:1px dotted #ABABAB;}

#nature #nav li a {
background-image:url(../img/nature/smenu.gif);
height:28px;
background-repeat:no-repeat;
outline:none;
text-decoration:none;
display:block;
text-indent:-9999px;
font-size:10px;
line-height:10px;
}


#nature #nav .li1 a {background-position:0px 0px; width:120px;}
#nature #nav .li2 a {background-position:-120px 0px; width:119px;}
#nature #nav .li3 a {background-position:-239px 0px; width:116px;}
#nature #nav .li4 a {background-position:-355px 0px; width:182px;}
#nature #nav .li5 a {background-position:-537px 0px; width:83px;}

#nature #nav li a:hover {border-bottom:2px solid #99CC33;}

#nature #nav .li1s a {background-position:0px 0px; width:120px;border-bottom:2px solid #F00;}
#nature #nav .li2s a {background-position:-120px 0px; width:119px;border-bottom:2px solid #f00;}
#nature #nav .li3s a {background-position:-239px 0px; width:116px;border-bottom:2px solid #f00;}
#nature #nav .li4s a {background-position:-355px 0px; width:182px;border-bottom:2px solid #f00;}
#nature #nav .li5s a {background-position:-537px 0px; width:83px;border-bottom:2px solid #f00;}




/* --周辺情報----------------------------------------------------------------*/


#nature #ard {
	width:700px;
	margin:0 0 0 20px;
}

	#nature #ard h2 {
		width:700px;
		height:80px;
		background:url(../img/nature/arround/st1.gif) no-repeat;
	}
	
	#nature #ard .spot {
		width:210px;
		border:1px solid #d6d6d6;
		margin:0 0 20px 20px;
		float:left;
	}
		#nature #ard .spot p {
			padding:5px 10px 10px 10px;
			margin:0;
			line-height:20px;
			text-align:center;
		}


@media screen and (max-width: 480px) {
	
#nature #ard {
	width:100%;
	margin:0;
}

	#nature #ard h2 {
		width:auto;
		height:auto;
		background-image:none;
		padding:0 20px 0 30px;
	}
	
	#nature #ard .spot {
		width:41%;
		border:1px solid #d6d6d6;
		margin:0 4% 20px 4%;
		text-align:center;
	}


	
}
	
	
	
/* --季節の花と景観----------------------------------------------------------------*/


#nature #flowermenu {
	width:700px;
	margin:0 0 0 20px;
}
	
	#flowermenu #flmenu {
		width:486px;
		height:55px;
		padding:0 0 10px 214px;
		background:url(../img/nature/season/st1.gif) no-repeat left top;
	}
	
	
	#flowerarea {
		width:700px;
		clear:both;
	}
	
		#flowerarea h2 {
			width:700px;
			line-height:40px;
			border-bottom:1px dotted #999999;
			border-top:1px dotted #999999;
			text-align:center;
			font-size:12px;
			font-weight:normal;
			background-color:#333333;
			color:#FFF;
		}

		#flowerarea .pix {
			width:700px;
			text-align:center;
			background:#efefef;
			border-top:1px dotted #444;
			padding:5px 0 0 0;
		}
		
		#flowerarea .thumb {
			width:680px;
			padding:20px 10px;
		}
		
			#flowerarea .thumb a img {border:3px solid #FFFFFF;}
			#flowerarea .thumb a:hover img {border:3px solid #FF9900;}
			#flowerarea .thumb .slc {border:3px solid #333;}


@media screen and (max-width: 480px) {
	

#nature #flowermenu {
	width:100%;
	margin:0;
}
	
	#flowermenu #flmenu {
		width:246px;
		height:auto;
		margin:0 auto;
		padding:0 0 0 0;
		background-image:none;
	}
	
	#flowerarea {
		width:100%;
		clear:both;
	}
	
		#flowerarea h2 {
			width:100%;
			line-height:40px;
			border-bottom:1px dotted #999999;
			border-top:1px dotted #999999;
			text-align:center;
			font-size:12px;
			font-weight:normal;
			background-color:#333333;
			color:#FFF;
		}

		#flowerarea .pix {
			width:100%;
			text-align:center;
			background:#efefef;
			border-top:1px dotted #444;
			padding:5px 0 0 0;
		}
		
		#flowerarea .thumb {
			width:94%;
			padding:20px 3%;
			text-align:center;
		}
		
			#flowerarea .thumb a img {border:3px solid #FFFFFF;}
			#flowerarea .thumb a:hover img {border:3px solid #FF9900;}
			#flowerarea .thumb .slc {border:3px solid #333;}
}


/* --森の散策・ハイキング----------------------------------------------------------------*/

#nature {padding-bottom:20px;}

#nature #hike {
	width:407px;
	padding:104px 34px 44px 256px;
	margin:0 0 30px 27px;
	background:url(../img/nature/hike/guide.jpg) no-repeat;
}

	#nature #hike h2 {
		width:361px;
		height:40px;
		background:url(../img/nature/hike/ip.gif) no-repeat;
	}

#nature #cs h2 {
	width:714px;
	height:70px;
	margin:0 0 0 20px;
}
	#nch21 {background:url(../img/nature/hike/st1.gif) no-repeat;}
	#nch22 {background:url(../img/nature/hike/st2.gif) no-repeat;}
	#nch23 {background:url(../img/nature/hike/st3.gif) no-repeat;}
	#nch24 {background:url(../img/nature/hike/st4.gif) no-repeat;}
	#nch25 {background:url(../img/nature/hike/st5.gif) no-repeat;}
	
	.l20 {margin-left:20px;}
	
	#nature #cs p {margin:0; padding:10px 50px 50px 50px;}


@media screen and (max-width: 480px) {
	
#nature #hike {
	width:100%;
	padding:0 0 0 0;
	margin:0 0 0 0;
	background-image:none;
}

	#nature #hike h2 {
		width:90%;
		height:auto;
		padding:0 5%;
		background-image:none;
	}
	
	#nature #cs h2 {
		width:100%;
		height:70px;
		margin:20px 0 0 0;
		text-indent:100%;
		overflow:hidden;
		white-space:nowrap;
		background-size:180%;
	}
	
	.l20 {margin-left:0;}
	
	#nature #hike p {margin:0; padding:10px 5%;}
	#nature #cs p {margin:0; padding:10px 5%;}
	
}


/* --自然情報トップ----------------------------------------------------------------*/


#nature #top .box {
	width:300px;
	float:left;
	padding:18px;
	margin:0 0 30px 27px;
	background:#EDF6DB url(../img/nature/kado.gif) no-repeat right bottom;
}

#nature #top .box p {margin:0; padding:10px;}

#nature #top h2 {
	width:300px;
	height:40px;
}

#nature #top h2 a {
	width:300px;
	height:40px;
	display:block;
}

	#nth21 {background:url(../img/nature/st1.gif) no-repeat top left;}
	#nth22 {background:url(../img/nature/st2.gif) no-repeat top left;}
	#nth23 {background:url(../img/nature/st3.gif) no-repeat top left;}
	#nth24 {background:url(../img/nature/st4.gif) no-repeat top left;}
	

@media screen and (max-width: 480px) {
	
	#nature #top .box {
		float:none;
		margin:0 2% 10px 2%;
		padding:17px 3%;
		width:90%;
		text-align:center;
	}
	#nature #top .box img {
		width:auto;
	}
	
	#nature #top h2 {
		text-indent:0;
		white-space:pre-wrap;
		overflow:hidden;
		width:100%;
		height:auto;
	}
	
	#nth21 {background:none;}
	#nth22 {background:none;}
	#nth23 {background:none;}
	#nth24 {background:none;}

#nature #top h2 a {
	width:100%;
	height:40px;
	display:block;
}

#nature #top .box p {text-align:left;}
	
}
	
/* --野生生物----------------------------------------------------------------*/

#nature #animal h2 {
	width:714px;
	height:80px;
	margin:0 0 0 20px;
}

	#nah21 {background:url(../img/nature/animal/st1.gif) no-repeat top left;}
	#nah22 {background:url(../img/nature/animal/st2.gif) no-repeat top left;}
	#nah23 {background:url(../img/nature/animal/st3.gif) no-repeat top left;}

	#nature #animal p {
		margin:0 40px 0 30px;
		padding:0;
	}
	
		#nature #animal p img.left {
			float:left;
			margin:0 30px 5px 0;
		}
		
		#nature #animal p img.righ {
			float:right;
			margin:0 0 5px 30px;
		}

	#nature #animal .boxl {
		width:154px;
		float:left;
		margin:0 0 20px 35px;
		background-color:#efefef;
	}
	
	#nature #animal .boxm {
		width:154px;
		float:left;
		margin:0 0 20px 10px;
		background-color:#efefef;
	}
	
		#nature #animal .boxm p,
		#nature #animal .boxl p {
			margin:0; padding:0px 10px 5px 10px;
			text-align:center;
		}

@media screen and (max-width: 480px) {
	
#nature #animal h2 {
	width:auto;
	height:80px;
	margin:0 0 0 20px;
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
}

	#nature #animal p {
		margin:0 5%;
		padding:0;
	}
	
		#nature #animal p img.left {
			float:none;
			width:100%;
			margin:0 0 5px 0;
		}
		
		#nature #animal p img.righ {
			float:none;
			width:100%;
			margin:0 0 5px 0;
		}

	#nature #animal .boxl {
		width:44%;
		float:left;
		margin:0 3%;
	}
	
	#nature #animal .boxm {
		width:44%;
		float:left;
		margin:0 3%;
	}
	
		#nature #animal .boxm p,
		#nature #animal .boxl p {
			margin:0; padding:0px 5%;
		}
		
		#nature #animal .boxm img,
		#nature #animal .boxl img {
			width:100%;
		}

	
}