@charset "UTF-8";

/**********************
styleName:  horie.css
Auther:     EarlyStone
Since:      2009.08.07
Modified:   2010.05.17
Description:
***********************/


/********** 共通部分 **********/
/* body */
body {
	color: #333 !important;
	background: #fff !important;
	font-size: 14px !important;
}

/* #container */
#container {
	width: 900px;
	background: #fff url(../img/bg.gif);
	margin: 0 auto;
}


/********** #header **********/
#header {
	position: relative;
	width: 900px;
	height: 105px;
	background-color: #fff;
}

#headerInner {
	width: 900px;
}

/* 堀江工務店h1、ロゴマーク・コーポレートカラーなし */
#logo {
	position: absolute;
	top: 0;
	left: 0;
	width: 200px;
	text-align: left;
}

#logo h1 {
	margin: 20px 0;
}

#logo h1 a {
	text-decoration: none;
}

/* グローバルナビゲーション */
#globalNav {
	position: absolute;
	top: 75px;
	left: 0;
	width: 900px;
	height: 30px;
	text-align: left;
}

#globalNav ul {
	margin: 10px 0;
	padding: 0;
}

#globalNav li {
	float: left;
	width: 125px;
	height: 30px;
	margin: 0;
	display: block;
	list-style: none;
	text-decoration: none;
}

#globalNav li#contact {
	float: left;
	width: 150px;  /* 「お問い合わせ」メニューのみ横幅150px */
	height: 30px;
	margin: 0;
	display: block;
	list-style: none;
	text-decoration: none;
}

#globalNav li a:link {
	width: 125px;
	height: 30px;
	list-style: none;
	text-decoration: none;
}

#globalNav li a:visited {
	list-style: none;
	text-decoration: none;
}

#globalNav li a:hover,
#globalNav li a:focus,
#globalNav li a:active {
	list-style: none;
	text-decoration: none;
}

/* #footer */
#footer {
	clear: both;
	position: relative;
	width: 900px;
	height: 100px;
	font-size: 12px;
	background: #fff;
}

#footerNav {
	position: absolute;
	top: 0;
	left: 0;
	width: 600px;
	text-align: left;
}

#footerNav ul {
	margin: 0;
	padding: 0;
}

#footerNav li {
	padding: 5px 10px;
	display: inline;
	list-style: none;
}

#footerNav li a:link,
#footerNav li a:visited {
	color: #666;
	text-decoration: underline;
}

#footerNav li a:hover,
#footerNav li a:focus,
#footerNav li a:active {
	color: #000;
	text-decoration: underline;
}

#add {
	position: absolute;
	top: 0;
	left: 690px;
	width: 210px;
	height: 110px;
	background-image: url(../img/address_bg.png);
}

#add p {
	margin: 10px;
}

#add p span {
	font-size: 11px;
}

#add li {
	list-style: none;
}

p#copyright {
	position: absolute;
	top: 91px;
	left: 9px;
}


/********** トップページ **********/
/* #wrapper */
#wrapper {
	width: 900px;
	padding-top: 20px;
	text-align: left;
	overflow: hidden;
}

/* #alpha:コンテンツ上部、最新記事、コンセプト含む部分 */
#alpha {
	width: 900px;
}

/* 家づくりコンセプト */
#concept {
	float: right;
	width: 635px;
	height: 450px; /* コンテンツの内容に応じて変える */
	margin-top: 10px;
	background: #fff url(../img/bg_ie.jpg) no-repeat center bottom;
	color: #CCCCCC;
}

#concept h2 {
	width: 635px;
	padding:10px 0 0 23px;
	color: #663300;
	font-size: 20px;
	background: #fff;
}

#iedukuri {
	color: #006600;
	font-size: 42px;
}

#concept p {
	width: 590px;
	padding: 15px 25px;
	color: #333;
	font-size: 18px;
	line-height: 1.8;
}

/* 最新記事表示欄、最新５件表示 */
#alphaLeft {
	float: left;
	width: 225px;
}

#news {
	float: left;
	width: 225px;
}

#news h2 {
	width: 210px;
	margin: 40px 0 25px 20px;
	color: #663300;
	font-size: 16px;
	border-bottom: 1px solid #663300;
}

#news .article {
	margin-left: 25px;
	margin-bottom: 20px;
}

#news ul {
	padding-left: 20px;
}

#news li {
 	padding-bottom: 8px;
	list-style: none;
	font-size: 13px;
}

#news p {
	font-size: 12px;
}

#news span {
	font-size: 11px;
}

#banner {
	float: left;
	width: 200px;
	height: 100px;
	margin-top: 20px;
	margin-left: 20px;
	background: #fff url(../img/banner01.jpg) no-repeat;
}

#banner p {
	margin-top: 53px;
	margin-left: 10px;
	color: #fff;
	font-size: 14px;
}


/* #beta:コンテンツ下部、新築施工例、リンク含む部分 */
#beta {
	width: 900px;
}

/* 新築施工例読み込み欄、最新１０件表示 */
#works {
	float: left;
	width: 600px;
	font-size: 11px;
	margin-bottom: 50px;
}

#works h2 {
	width: 525px;
	margin: 20px;
	color: #663300;
	font-size: 16px;
	border-bottom: 1px solid #663300;
}

#works ul {
	padding-left: 20px;
}

#works li {
	float: left;
	width: 105px;
	list-style: none;
}

#works li a:link,
#works li a:visited {
	color: #666;
	text-decoration: none;
}

#works li a:hover,
#works li a:focus,
#works li a:active {
	color: #000;
	text-decoration: none;
}

#works ul li span {
	display: block;
	width: 100px;
	height: 80px;
	overflow: hidden;
	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
	border-bottom: 2px solid #333;
	border-right: 2px solid #333;
}

#works ul li span.name {
	width: 100px;
	height: 50px;
	text-align: left;
	border: none;
	font-size: 12px;
}

#works p {
	clear: left;
	padding-left: 20px;
	font-size: 12px;
}

/* クリアハック */
#alpha:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

/* IE用クリアハック */
#container { display: inline-table; }
/* Mac OS版IEには適用しない ＼*/
* html #container { height: 1%; }
*+html #container { height: 1%; }
#container { display: block; }
/**/

*:first-child+html #beta {
	padding-bottom: 50px; /* #wrapper下部余白、IE7対策　*/
}

* html #beta {
	padding-bottom: 50px;  /* #wrapper下部余白、IE6対策　*/
}

/* リンク */
#link {
	float: left;
	width: 225px;
}

#link h2 {
	margin: 19px 0;
	color: #663300;
	font-size: 16px;
	border-bottom: 1px solid #663300;
}

#link li {
	margin-bottom: 10px;
	list-style: none;
	font-size: 13px;
}

#link a:link,
#link a:visited {
	color: #333;
	text-decoration: underline;
}

#link a:hover,
#link a:focus,
#link a:active {
	padding-left: 2px;
	color: #333;
	text-decoration: underline;
}


/********** 新築施工例 **********/
#wrapper_works {
	width: 900px;
}
/* ここより右カラム */
#alpha_works {
	float: right;
	width: 735px;
	margin-left: 30px;
}

/* 建物名と建物概要部分を合わせたカラム */
#title_works {
	width: 720px;
}

/* 建物名 */
#building {
	float: left;
	width: 410px;
	text-align: left;
}

#building h2 {
	width: 410px;
	margin-top: 40px;
	margin-bottom: 20px;
	font-size: 36px;
}

/* 建物概要 */
#summary {
	float: right;
	width: 300px;
	text-align: left;
}

#summary h3 {
	width: 300px;
	margin-top: 50px;
	margin-bottom: 7px;
	font-size: 17px;
}



/* MTの投稿記事内、建物概要テーブルへのスタイル */
#summary table {
	width: 300px !important;
	margin-bottom: 30px !important;
	color: #333 !important;
	font-size: 14px !important;
	border: none !important;
}

#summary td {
	height: 20px !important;
	padding-left: 2px;
	border: solid 1px #666 !important;
}
 
/* ここより本文下部、MTでは「続き」部分 */
#content_works {
	clear: both;
	width: 700px;
	xmargin-left: 35px;
}

#content_works img {
	border: 1px solid #666;
}

/* ここより左カラム、サムネイルメニュー(サムネイルサイズ100/80) */
#beta_works {
	float: left;
	width: 130px;
	margin-top: 20px;
	
}

#beta_works ul#scroll { /* サムネールリストのスクロール */
	width: 120px;
	height: 620px;
	margin-top: 32px;
	margin-left: 10px;
	overflow: scroll;
}

#beta_works li {
	width: 101px;
	height: auto;
	margin-bottom: 10px;
	list-style: none;
}

#beta_works li a:link,
#beta_works li a:visited {
	color: #666;
	text-decoration: none;
}

#beta_works li a:hover,
#beta_works li a:focus,
#beta_works li a:active {
	color: #000;
	text-decoration: none;
	opacity: 0.6;
	filter: alpha(opacity=60);
}

#beta_works ul li span.thumb {
	display: block;
	width: 100px;
	height: 80px;
	overflow: hidden;
	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
	border-bottom: 2px solid #333;
	border-right: 2px solid #333;
}

#beta_works ul li span.name {
	width: 100px;
	height: auto;
	text-align: left;
	border: none;
	font-size: 11px;
}


/********** 工法 **********/
#wrapper_method {
	width: 900px;
	text-align: left;	
}

#wrapper_method h2 {
	width: 860px;
	margin: 50px 0 30px 20px;
	color: #663300;
	font-size: 17px;
}

/* 左カラム、カテゴリー一覧使用時
#alpha_method {
	float: left;
	width: 250px;
	padding-top: 8px;
}

#alpha_method h3 {
	width: 210px;
	margin: 0 0 5px 20px;
	padding-left: 10px;
	color: #663300;
	background: url(../img/listmark_b.gif) no-repeat center left;
}

#alpha_method ul {
	width: 220px;
}

#alpha_method li {
	margin-left: 10px;
	margin-bottom: 10px;
	padding-left: 20px;
	list-style: none;
	color: #663300;
}

#alpha_method li a:link,
#alpha_method li a:visited {
	color: #663300;
	text-decoration: underline;
}

#alpha_method li a:hover,
#alpha_method li a:focus,
#alpha_method li a:active {
	padding-left: 2px;
	color: #663300;
	text-decoration: underline;
}
 */
 
 /* 左カラム、カテゴリー不使用時　*/
 #alpha_method {
	float: left;
	width: 200px;
}

#alpha_method ul {
	width: 180px;
	padding-top: 5px;
	padding-left: 20px;
}

#alpha_method li {
	margin-bottom: 4px;
	padding-left: 10px;
	list-style: none;
	background: url(../img/listmark_b.gif) no-repeat center left;
	color: #663300;
}

#alpha_method li a:link,
#alpha_method li a:visited {
	color: #663300;
	text-decoration: underline;
}

#alpha_method li a:hover,
#alpha_method li a:focus,
#alpha_method li a:active {
	padding-left: 2px;
	color: #663300;
	text-decoration: underline;
}

 
/* 右カラム、カテゴリー本文 */
#beta_method {
	float: right;
	width: 640px;
}

#title_method {
	margin-bottom: 12px;
	font-size: 24px;
	color: #006600;
}

#content_method {
	width: 550px;
}

#content_method p {
	margin: 20px;
	line-height: 25px;
}


/********** リフォーム **********/
#wrapper_reform {
	width: 900px;
	text-align: left;
}

#wrapper_reform h2 {
	width: 860px;
	margin: 50px 0 30px 20px;
	color: #663300;
	font-size: 17px;
}

/* 左カラム、カテゴリー一覧 */
#alpha_reform {
	float: left;
	width: 200px;
}

#alpha_reform ul {
	width: 180px;
	padding-top: 5px;
	padding-left: 20px;
}

#alpha_reform li {
	margin-bottom: 4px;
	padding-left: 10px;
	list-style: none;
	background: url(../img/listmark_b.gif) no-repeat center left;
	color: #663300;
}

#alpha_reform li a:link,
#alpha_reform li a:visited {
	color: #663300;
	text-decoration: underline;
}

#alpha_reform li a:hover,
#alpha_reform li a:focus,
#alpha_reform li a:active {
	padding-left: 2px;
	color: #663300;
	text-decoration: underline;
}

/* 右カラム、カテゴリー本文 */
#beta_reform {
	float: right;
	width: 660px;
	margin-bottom: 40px;
}

#title_reform {
	margin-bottom: 12px;
	font-size: 24px;
	color: #006600;
}

#content_reform {
	width: 550px;
}

#content_reform p {
	line-height: 25px;
}


/********** 記事一覧 **********/
#wrapper_news {
	width: 880px;
	height: 700px;
	text-align: left;
}

#wrapper_news h2 {
	margin: 30px 0 30px 20px;
	color: #663300;
	font-size: 16px;
	border-bottom: 1px solid #663300;
}

#wrapper_news p {
	margin-left: 28px;
	font-size: 12px;
}

#newsList {
	width: 880px;
	height: 610px;
	margin: 30px 0;
	background:url(../img/bg_news.jpg) no-repeat center left; /* 記事一覧専用の背景画像 */
}

#newsList ul {
	margin-left: 20px;
}

#newsList li {
	margin-bottom: 5px;
	padding-left: 10px;
	background: url(../img/listmark_g.gif) no-repeat center left; /* リストマーク */
	list-style: none;
}

#alpha_news {
	width: 880px;
	height: 579px;
	margin: 30px 0;
	background:url(../img/bg_news.jpg) no-repeat center left; /* 記事一覧専用の背景画像 */
}

#alpha_news h3 {
	margin: 0 0 30px 30px;
	padding-left: 4px;
	font-size: 16px;
	border-left: 5px solid #006600;
}

#alpha_news p {
	padding-left: 40px;
	font-size: 13px;
	background: none;
}


/********** 会社概要 **********/
#wrapper_corp {
	width: 880px;
	margin-left: 20px;
	text-align: left;
}

#wrapper_corp h2 {
	width: 860px;
	margin: 30px 0 10px 0;
	color: #663300;
	font-size: 16px;
	border-bottom: 1px solid #663300;
}	

/* 会社概要 */
#content_corp {
	width: 880px;
}

#content_corp ul{
	padding-bottom: 30px;
}

#content_corp li{
	display: block;
	list-style: none;
}

#content_corp dl {
	list-style: none;
}

#content_corp dt {
	float: left;
	clear: both;
}

#content_corp dd {
	margin-bottom: 4px;
	padding: 0 0 0 7em;
	list-style: none;
}

/* 地図 */
#map {
	width: 880px;
}

/* 施工エリア */
#area {
	width: 880px;
}

#area ul {
	padding-bottom: 40px;
}

#area li {
	list-style: none;
	margin-bottom: 4px;
}


/********** 個人情報の保護について **********/
#wrapper_privacy {
	width: 880px;
	margin-left: 20px;
	text-align: left;
}

#wrapper_privacy h2 {
	width: 860px;
	margin: 30px 0 20px 0;
	color: #663300;
	font-size: 16px;
	border-bottom: 1px solid #663300;
}

#wrapper_privacy h3 {
	color: #006600;
}

#wrapper_privacy h4 {
	color: #006600;
}

#wrapper_privacy p {
	width: 800px;
	padding: 10px 0 40px 0;
}

#wrapper_privacy ul {
	padding: 10px 0 40px 10px;
}

#wrapper_privacy li {
	width: 800px;
	margin-bottom: 5px;
}

#wrapper_privacy ol {
	padding: 10px 0 50px 20px;
}

#wrapper_privacy li img {
	margin-top: 2px;
	vertical-align: bottom;
}


/********** お問い合わせ **********/
#wrapper_contact {
	width: 880px;
	margin-left: 20px;
	margin-bottom: 50px;
	text-align: left;
}

#wrapper_contact h2 {
	width: 860px;
	margin: 30px 0;
	color: #663300;
	font-size: 16px;
	border-bottom: 1px solid #663300;
}

#wrapper_contact h3 {
	margin-bottom: 20px;
	color: #006600;
}

#wrapper_contact dl {
	width: 700px;
}

#wrapper_contact dt {
	float: left;
	clear: both;
}

#wrapper_contact dd {
	margin-bottom: 10px;
	padding: 0 0 0 9em;
	list-style: none;
}

#wrapper_contact p {
}

p#attention {
	padding-bottom: 30px;
	color: #ff3300;
}

p#confirm,p#subit {
	margin: 30px 0;
}

#wrapper_contact p#thanks {
	padding-top: 100px;
	padding-bottom: 300px;
	text-align: center;
}


/* MTの投稿記事へのスタイル */
#content_works h4,#content_method h4,#content_reform h4 {
	padding-left: 4px;
	margin-bottom: 6px;
	text-align: left;
	font-size: 16px;
	border-left: solid 5px #666666;
}

#content_works p,#content_method p,#content_reform p {
	text-align: left;
}

#content_works span,#content_method span,#content_reform span {
	text-align: left;
}

/* END */