/* CSS Document */

/* base ********************************************/

h1{ margin: 0;}
h1 img{ vertical-align: bottom;}

img{ border: none;}

.clr{ clear: both;}

#reform{ padding: 0 5px 0 10px; line-height: 150%;}
#reform img{ margin: 0 0 5px;}

#reform h2{
	margin: 0 0 20px;
	padding: 0 0 0 17px;
	color: #666;
	background: url(h2.gif) left;
	line-height: 100%;
	font-size: 29px;
	font-weight: normal;
}
#reform h2 span{
	color: #630;
	font-size: 18px;
	font-weight: bold;
}
#reform h2.index{
	margin: 0 0 12px;
	padding: 0 0 0 15px;
	color: #383995;
	background: none;
	border-left: solid 3px #383995;
	line-height: 130%;
	font-size: 16px;
	font-weight: bold;
}
.style1 {
	font-size: 22px;
	color: #963;
	font-family: 'ＭＳ Ｐゴシック','ヒラギノ角ゴ Pro W3',Osaka;
}

#reform h3{
	margin: 0 0 15px;
	color: #963;
	clear: both;
	font-size: 22px;
	font-weight: normal;
}

}
#reform h4{
	margin: 0 0 0.3em;
	color: #0066CC;
	font-size: 12px;
}
#reform p, #reform div{
	text-align: justify;
	text-justify: inter-ideograph;
}
#reform p{
	margin: 0 0 0.7em;
}
#reform p.dot{
	margin: 0 0 20px;
	padding: 0 0 10px;
	background: url(line.gif) repeat-x bottom left;
}

#reform .l_blue{ margin: 0.5em 0 0;}
#reform .l_blue a{ color: #7789bc; text-decoration: underline;}

#reform div.pagetop{ margin: 0 15px 15px; clear: both; text-align: right;}
#reform div.pagetop img{ vertical-align: bottom;}

/* --- MARGINES --- */

.mg1{ padding: 0 0 10px;}

/* --- FLOAT --- */

.clm2, .clm3{
	padding: 0 0 15px;
	clear: both;
	width: 505px;
	line-height: 140%;
}

.f1_l, .f1_c, .f1_r{ width: 160px;}
.f1_l{ margin-right: 12px; float: left;}
.f1_c{ float: left;}
.f1_r{ float: right;}

.f2_l{ float: left; width: 240px;}
.f2_r{ float: right; width: 240px;}

.f3_l{ float: left; width: 280px;}
.f3_r{ float: right; width: 215px;}

.f4_l{ float: left; width: 260px;}
.f4_r{ float: right; width: 220px;}

.f5_l{ float: left; width: 220px;}
.f5_r{ float: right; width: 260px;}

.f6_l{ float: left; width: 382px;}
.f6_r{ float: right; width: 110px;}

.f7_l{ float: left; width: 332px;}
.f7_r{ float: right; width: 160px;}

#reform .f6_r img{ margin: 0 0 11px; vertical-align: bottom;}
#reform .f7_l img{ margin: 0 3px 0 0;}
#reform .f7_r h4{ line-height: 140%; font-size: 18px;}

.fa_l{ float: left; width: 80px;}
.fa_r{ float: right; width: 150px;}

/* --- LINE --- */

.line{ background: url(line.gif) no-repeat bottom;}

/* --- GET HIGHT --- */

.hght{
	margin: 0 0 20px;
	display: block;
	min-height: 0;
}
.hght:after{
	content: " ";
	display: block;
	visibility: hidden;
	clear: both;
	height: 0.1px;
	font-size: 0.1em;
	line-height: 0;
}
* html .hght{ display: inline-block;}
/* exclude ie mac \*/
* html .hght{ height: 1%;}
/* all brouser */

/* left navigation ********************************************/

#navi_left ul{ margin: 0; padding: 0; list-style: none;}
#navi_left li{
	margin: 0 0 8px;
	float: left;
	display: block;
	width: 185px;
	height: 20px;
	background: url(menu.gif) no-repeat top;
	line-height: 20px;
	font-size: 12px;
	overflow: hidden;
}
#navi_left li a{
	padding: 0 0 0 15px;
	display: block;
	width: 170px;
	_width: 185px;
	height: 20px;
	text-decoration: none;
}
#navi_left li a:hover, #navi_left li#on{
	background: url(menu_r.gif) no-repeat top;
	color: #fff;
}
#navi_left li#on a{ color: #fff;}

#navi_left img{ margin: 0 0 10px;}

/* contents ********************************************/

/* --- INDEX --- */

#reform .clm2 p{ margin: 0 0 0.3em;}
#reform .clm3 p{ margin: 0 0 0.3em; text-align: center;}
.clm2 p a, .clm3 p a{
	padding: 0 0 0 11px;
	background: url(arrow.gif) center left;
}

#reform div#banners{ margin: 0 0 20px; clear: both; text-align: center;}

/* --- PLANNER --- */

#reform div#planner{
	margin: 0 0 15px;
	padding: 5px 10px 10px;
	clear: both;
	background: #faebd7;
}
#reform div#planner h3{
	margin: 0.35em 0 0;
	color: #630;
	line-height: 120%;
	font-size: 18px;
	font-weight: bold;
}
#reform div#planner .osusume{
	margin: 10px 0 0;
	padding: 10px 10px 0 4px;
	background: #fff;
}
.fp_l{ float: left;}
.fp_r{ float: right;}
#reform .fp_l p{ margin: 0 15px; padding: 0 0 5px; line-height: 140%;}
.fp_l img{ margin: 0 0 5px; vertical-align: bottom;}
.fp_r p{
	margin: 0;
	padding: 10px 10px 0;
	clear: both;
	background: url(osusume_bg_1.gif) no-repeat top;
}
.fp_r p span{ color: #30c; font-weight: bold;}
.fp_r .photo{ margin: -10px 0 0; background: url(osusume_bg_3.gif) no-repeat top #fff;}
.fp_r .photo .l{ margin: 0; padding: 25px 0 0; float: left; width: 145px;}
.fp_r .photo .r{ margin: 0; float: right; width: 80px;}
.fp_r .photo .r img{ margin: 0; vertical-align: bottom;}
.fp_r .images{ margin: 0; padding: 0 0 10px; width: 270px; background: #fff;}
#reform .fp_r .images img{ margin: 0; vertical-align: bottom;}
.fp_r .images .l{ margin: 0; float: left; width: 100px;}
.fp_r .images .r{ margin: 0; float: right; width: 160px;}
.kitchen .fp_l, .bath .fp_l{ width: 240px;}
.kitchen .fp_r, .bath .fp_r{
	width: 230px;
	background: url(osusume_bg_2.gif);
}

.toilet .fp_l{ width: 200px;}
.toilet .fp_r{
	width: 270px;
	background: url(toilet/osusume_bg_2.gif);
}
.toilet .fp_r p{ background: url(toilet/osusume_bg_1.gif) no-repeat top;}
.toilet .fp_r .photo{ margin: -10px 0 0; background: url(toilet/osusume_bg_3.gif) no-repeat top #fff;}

.catch{ margin-left: 15px;}
#reform dl{ margin: 0;}
#reform dt{
	margin: 3px 0 10px;
	background: url(osusume_catch.gif) no-repeat left center;
	color: #fff;
	width: 220px;
	height: 21px;
	line-height: 21px;
	text-align: center;
	font-size:14px;
	font-weight: bold;	
}
#reform dd{
	margin: 0 0 3px;
	color: #630;
	font-size: 22px;
}
#reform .toilet dt{
	background: url(toilet/osusume_catch.gif) no-repeat left center;
	width: 180px;
}
#reform dd{
	font-size: 16px;
	font-weight: bold;
}




/* footer ********************************************/

#reform_footer{
	margin: 0 10px;
	padding: 15px 0 0;
	border-top: solid 1px #a9a9a9;
	text-align: center;
	font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
}
#reform_footer p{ margin: 0 0 8px;}