@charset "utf-8";
* { margin: 0; padding: 0 }
body { color: #333; font-size: 13px; font-family: "ＭＳ Ｐゴシック", Arial; line-height: 140%; background-color: #000; text-align: center; margin: 0; padding: 0 }
img{border: 0;}
.margin_bottom_10{margin-bottom: 10px;}
.margin_bottom_20{margin-bottom: 20px;}
.margin_bottom_40{margin-bottom: 40px;}
.haruhino_table{ font-size: 13px; font-family: "ＭＳ Ｐゴシック", Arial; text-decoration: none; width: 235px; }
.haruhino_table th,.haruhino_table td{ text-align: left; vertical-align: top; padding-top: 3px; padding-bottom: 5px; border-bottom: 1px dashed #333; }
.right_pos{ float: right; }
.left_pos{ float: left; }
a { color: #333 }
a:hover { color: #ccc }
#contents      { margin-right: auto; margin-left: auto; width: 780px; height: auto; clear: both }
#flash  { width: 780px; clear: both }
#main_body { width: 780px; clear: both }
#menu      { background-color: #000; margin-top: 10px; margin-right: 5px; width: 200px; float: left }
#menu ul { text-align: left; list-style-type: none }
#menu li   { color: white; background-color: #666; list-style-type: none; padding-top: 5px; padding-bottom: 5px; padding-left: 15px; border-bottom: 1px solid #000 }
#menu li a { color: white; font-weight: bold; text-decoration: none }
#menu li a:hover { color: #ccc; font-weight: bold; text-decoration: none }
#menu img { display: block }
#main        { background-color: white; margin-top: 10px; width: 575px; float: left; clear: right }
.text     { text-align: left; margin-right: 15px; margin-left: 20px }
#news              { list-style-type: none; list-style-image: none; display: block; clear: both }
#news li          { color: #313131; background-image: url("image/mark01.gif"); background-repeat: no-repeat; background-position: 0 1px; text-align: left; margin-bottom: 10px; padding-left: 20px }
.continu                      { background-image: url("image/mark02.gif"); background-repeat: no-repeat; background-position: right bottom; text-align: right; margin-top: 15px; margin-bottom: 5px; padding-right: 20px; float: right; clear: both }
img.box      { vertical-align: bottom }
.info_outline        { padding-bottom: 5px; width: 540px; height: auto; float: left; clear: both; border-bottom: 1px solid #333 }
.info_text          { text-align: left; margin-right: 10px; padding-top: 5px; padding-bottom: 10px; width: 250px; float: left }
.info_photo   { padding-top: 5px; width: 280px; float: right }
.haru_map           { margin-top: 5px; width: 540px; height: auto; float: left; clear: both; border-bottom: 1px solid #333 }
.haru_map div   { margin-top: 5px; margin-bottom: 10px; margin-left: 5px; padding-bottom: 10px; width: 170px; float: left }
.haru_map div ul   { list-style-image: none; margin: 0; padding: 0 }
.haru_map_info    { font-size: 80%; text-align: right; width: 540px; height: auto; clear: both }
.haru_map div li   { background-image: url("image/mark02.gif"); background-repeat: no-repeat; background-attachment: fixed; background-position: left center; padding: 2px 10px 2px 20px }
.haru_outline        { margin-top: 10px; width: 540px; height: auto; float: left; clear: both; border-bottom: 1px solid #333 }
.haru_text  { text-align: left; margin-right: 10px; padding-top: 5px; padding-bottom: 5px; width: 260px; float: left }
.haru_text h3  { font-size: 16px; font-weight: bold; background-image: url("image/mark01.gif"); background-repeat: no-repeat; background-position: 0 1px; margin-top: 5px; padding-left: 20px }
.haru_text div   { margin-top: 15px; margin-bottom: 5px; margin-left: 21px; }
.haru_photo  { width: 270px; float: right }
#pet  { margin-top: 15px; margin-bottom: 10px; clear: both }
#pet dt    { font-size: 15px; font-weight: bold; background-image: url("image/mark01.gif"); background-repeat: no-repeat; background-position: left 1px; margin-bottom: 5px; padding-left: 20px }
#pet dd    { margin-bottom: 15px; margin-left: 20px }
#privacy  { margin-top: 15px; margin-bottom: 10px; clear: both }
#privacy dt   { font-weight: bold; margin-bottom: 5px }
#privacy dd   { font-size: 12px; margin-bottom: 10px; margin-left: 26px }
#privacy ul  { font-size: 12px; font-weight: normal; margin-left: 20px }
div.rent_js  { text-align: right; margin: 5px 10px 20px }
div.rent_js img  { margin-left: 1px }
.com  { margin-bottom: 10px; padding-bottom: 5px; width: 540px; float: left; clear: both; border-bottom: 1px dotted silver }
.com_b      { font-weight: bold; background-image: url("image/mark01.gif"); background-repeat: no-repeat; background-position: left 2px; margin-top: 1px; padding-left: 20px; width: 130px; float: left; vertical-align: top }
.com_c      { width: 380px; float: left; clear: right }

.sitemap  { margin-bottom: 10px; padding-bottom: 5px; width: 540px; float: left; clear: both; border-bottom: 1px dotted silver }
.sitemap_b   { font-weight: bold; background-image: url("image/mark01.gif"); background-repeat: no-repeat; background-position: left 2px; margin-top: 1px; padding-left: 20px; width: 200px; float: left }
.sitemap_c   { width: 320px; float: left; clear: right }
.mail  { margin-bottom: 10px; padding-bottom: 5px; width: 540px; float: left; clear: both; border-bottom: 1px dotted silver }
input { vertical-align: middle; margin-right: 5px; }
.mail_b     { font-weight: bold; background-image: url("image/mark01.gif"); background-repeat: no-repeat; background-position: left 2px; margin-top: 1px; padding-left: 20px; width: 180px; float: left; vertical-align: top }
.mail_c     { font-size: 9px; font-weight: normal; width: 340px; float: left; clear: right   }
.mail_d { width: 340px; float: left; clear: right; }
.mail_c textarea { width: 340px }
.cbox { vertical-align: middle; margin-right: 10px; }
.form01 { width: 340px }
.form02 { float: right }
.form02 form { float: left }
#footer          { color: #fff; background-color: #000; background-image: url("image/footer.gif"); background-repeat: no-repeat; text-align: center; padding-top: 45px; padding-bottom: 37px; vertical-align: middle; border-bottom: 10px solid #000 }

#top_topics{
	background-color:#FFFFFF;
	text-align:left;
}

#top_topics ul li{
	background:url(http://haruhino.net/image/mark01.gif) no-repeat;
	padding-left:18px;
	margin:2px 0 10px 20px;
	list-style:none;
	width:505px;
}
* html #top_topics ul li{
	padding-right:20px;
}


.bg_fff{
	background:#FFFFFF;
}


/*slider st*/
#slider{ width: 780px; text-align:center; float: left; margin-bottom: 17px; margin-top: 25px; }
	#slider h3{ width: 340px; float: left; margin-bottom: 17px; }
.slider_box{ width: 555px; margin-bottom: 20px; margin-left: 20px; }
	.slider_box p{ font-size: 78%; width: 340px; float: left; }
	.slider_box p.long{ width:555px; margin-top: 17px; }
	
	.slider_box .photo_box {margin-bottom:10px; display:inline; height:63px}
	.slider_box .photo_box img {margin-right:10px;}
	.slider_box .photo_box img.light_right {margin-right:0px}