@charset "shift-jis";
@import url(main.css);



/*---------------------------------------------------------------------
▼家づくりの流れ
---------------------------------------------------------------------*/


#flow h2 {
	background: url(../flow/img/top.png) no-repeat center top;
	}


#flow h3{
	width: 740px;
	height: 45px;
	margin-bottom: 20px;
	text-indent: -9999px;
	}


#flow h3#title_flow {
	background: url(../flow/img/title_flow.png) no-repeat left top;
	}



/* tab */

#flow ul.tab {
	width: 740px;
	height: 65px;
	margin-top: 40px;
	}

#flow ul.tab li {
	width: 243px;
	height: 65px;
	float: left;
	margin: 0 1px 0 2px;
	display: inline;
	}

#flow ul.tab li a {
	display: block;
	width: 243px;
	height: 65px;
	display: block;
	text-indent:-9999px;
	}


#flow ul.tab li.tab_step1 a {
	background: url(../flow/img/btn_step1.png) no-repeat top left;
	}
#flow ul.tab li.tab_step2 a {
	background: url(../flow/img/btn_step2.png) no-repeat top left;
	}
#flow ul.tab li.tab_step3 a {
	background: url(../flow/img/btn_step3.png) no-repeat top left;
	}


#flow ul.tab li.tab_step1 a:hover,
#flow ul.tab li.tab_step2 a:hover,
#flow ul.tab li.tab_step3 a:hover { background-position: bottom right;}


#flow ul.tab li.tab_step1 a.pager-active {
	background: url(../flow/img/current_step1.png) no-repeat left top;
	cursor: default;
}
#flow ul.tab li.tab_step2 a.pager-active {
	background: url(../flow/img/current_step2.png) no-repeat left top;
	cursor: default;
}
#flow ul.tab li.tab_step3 a.pager-active {
	background: url(../flow/img/current_step3.png) no-repeat left top;
	cursor: default;
}





/* slider area */



#flow .flowarea {
	width: 736px;
	height: auto;
	}


#flow .flowarea h4 {
	width: 736px;
	height: 40px;
	text-indent: -9999px;
	margin-bottom: 20px;
	}


#flow .flowarea h4#step1_bar { background: url(../flow/img/step1.gif) no-repeat left top;}
#flow .flowarea h4#step2_bar { background: url(../flow/img/step2.gif) no-repeat left top;}
#flow .flowarea h4#step3_bar { background: url(../flow/img/step3.gif) no-repeat left top;}


#flow .flowarea table {
	width: 736px;
	}
#flow .flowarea table#image1 {
	background: url(../flow/img/image1.jpg) no-repeat center bottom;
	padding-bottom: 320px;
	width: 736px;
	height: 340px;
	}

#flow .flowarea table th,
#flow .flowarea table td {
	vertical-align: top;
	}
	

#flow .flowarea table th{
	padding: 5px 0 5px 10px;
	text-align: left;
	width: 200px;
	background-color: #FFF;
	}


#flow .flowarea table td {
	padding: 10px 5px 10px 10px;
	width: 245px;
	font-size: 11px;
	line-height: 160%;
	color: #594A28;
	text-align: justify;
	}


#flow .flowarea table td.td_gl {
	border: 2px solid #FFF;
	background-color: #F4F4E1;
	}


#flow .flowarea table td.td_cu {
	border: 2px solid #FFF;
	background-color: #F4F1EA;
	}


#flow .flowarea table td#title_gl {
	background: url(../flow/img/title_gl.gif) no-repeat center top;
	height: 75px;
	text-indent: -9999px;
	}


#flow .flowarea table td#title_cu {
	background: url(../flow/img/title_cu.gif) no-repeat center top;
	height:75px;
	text-indent: -9999px;
	}


#flow .flowarea .img { width: 720px; margin: 50px auto 0;}


#flow .slidearea {
	width: 738px;
	border: #C3B6A3 1px solid;
	height: 660px;
	margin-bottom: 50px;
	}


#flow ul.panel {
	width: 738px;
	margin-bottom: 20px;
}

#flow ul.panel li {
	width: 736px;
	height: 658px;
	border: 1px solid #FFFFFF;
}