@charset "shift-jis";
@import url(default.css); 
 
/* =====================================================================
*
*   INDEX
*
*	
*	1. Whole Style
*	
*	2. Header
*		2-1. Catch Copy / Language Select
*		2-2. Logo / Text Link
*		2-3. Global Nav
*
*	3. Main Image
*		3-1. Suv Nav
*		3-2. Flash
*
*	4. Side Nav
*		4-1. Side Nav
*		4-2. Company Links
*
*	5. Main Contents
*		5-1. Search
*		5-2. Tab
*		5-3. Products List
*
*	6. Topics
*
*	7. Side Information Area
*
*	8. Footer Area
*
*
* =================================================================== */


/*Basic Style*/
a:link    { color:#333; text-decoration:underline; }
a:visited { color:#333; text-decoration:underline; }
a:hover   { color:#666;text-decoration:none; }
a:active  { color:#666;text-decoration:underline; }
 
hr.partition { display:none; }
.guidetxt { display:none; }



/* =====================================================================
*
*    1. Whole Style
*
* =================================================================== */

.union {
		width:1000px;
		background:#dad7c8;
		overflow: hidden;
}
		.union .wrap {
				width:990px;
				background:#f5f2e9;
				overflow: hidden;
		}


/* =====================================================================
*
*    2. Header
*
* =================================================================== */

/* ---------------------------------------------------------------------
*
*    2-1. Catch Copy / Language Select
*
* ------------------------------------------------------------------- */

.copy {
		width:990px;
		background:#dad7c8;
		overflow:hidden;
}
.copy:after {
		content: "";
		display: block;
		clear: both;
		height: 1px;
		overflow: hidden;
}
/*\*/
* html .copy {
		height: 1em;
		overflow: visible;
}
/**/
		.copy #catchcopy {
				float:left;
				width:870px; /*880*/
				padding-left:5px;
				color:#494224;
				font-size:85%;
				font-weight:normal;
		}

		.copy #language {
				float:right;
				width:110px;
				background:#666;
				margin:0;
				color:#fff;
				font-size:80%;
				text-align:center;
		}
		.copy #language a:link    { color:#66dd55; text-decoration:none; }
		.copy #language a:visited { color:#66dd55; text-decoration:none; }
		.copy #language a:hover   { color:#66dd55; text-decoration:underline; }
		.copy #language a:active  { color:#66dd55; text-decoration:none; }


/* ---------------------------------------------------------------------
*
*    2-2. Logo / Text Link
*
* ------------------------------------------------------------------- */

.header_container {
		float:left;
		width:990px;
		padding:0 5px 0 10px;
		overflow:hidden;
		zoom:1;
}

		/* ---------------------------------
		*    Logo
		*/
		.header_container #logo {
				float:left;
				width:160px;
				padding:7px 0;
		}
	
		.header_container #header_box {
				float:left;
				width:815px;
				padding:10px 0 0;
		}
 
				.header_container #header_box #link_box {
						width:815px;
						height:20px;
						padding: 3px 0 0;
				}
				
 						/* ---------------------------------
						*    Text Link
						*/
						.header_container #header_box #link_box #txtlink {
								float:left;
								width:810px; /*815*/
								padding-right:5px;
								font-size:85%;
								text-align:right;
						}
						
						
								.header_container #header_box #link_box #txtlink a:link    { color:#003311; text-decoration:none; }
								.header_container #header_box #link_box #txtlink a:visited { color:#003311; text-decoration:none; }
								.header_container #header_box #link_box #txtlink a:hover   { color:#226633; text-decoration:underline; }
								.header_container #header_box #link_box #txtlink a:active  { color:#003311; text-decoration:none; }
						
						/* ---------------------------------
						*    btn Customer
						.header_container #header_box #link_box #btn_customer {
								float:left;
								width:105px;
								height:20px;
						}
						
								.header_container #header_box #link_box  #btn_customer a {
										width:105px;
										height:20px;
										display:block;
								}
								.header_container #header_box #link_box #btn_customer a:link    {}
								.header_container #header_box #link_box #btn_customer a:visited {}
								.header_container #header_box #link_box #btn_customer a:hover   { background:url(../images/index/btn_customer_on.jpg) no-repeat left top; text-indent:-9999px; }
								.header_container #header_box #link_box #btn_customer a:active  {}
								
						*/
/*header_containerのfloat解除*/
.header_container:after {
	content: " ";
	display: block;
	height: 0;
	visibility: hidden;
	clear: both;
}


/* ---------------------------------------------------------------------
*
*    2-3. Global Nav
*
* ------------------------------------------------------------------- */
.gnav {
		float:left;
		width:990px;
		height:44px;
		margin:0 0 1px;
		padding:0 5px;
		overflow:hidden;
		zoom:1; }
 
		.gnav ul {}
 
		.gnav li {
				float:left;
				width:245px;
				height:44px;
				list-style:none inside;
		}
		
				/* ---------------------------------
				*    既製品紹介
				*/
				.gnav #gnav_products {
						width:245px;
						height:44px;
				}
					.gnav #gnav_products a {
							width:245px;
							height:44px;
							background:url(../images/index/gnav.jpg) no-repeat 0 0;
							text-indent:-9999px;
							display:block;
					}
					.gnav #gnav_products a:hover { background:url(../images/index/gnav.jpg) no-repeat 0 -44px; text-indent:-9999px; }
 
				/* ---------------------------------
				*    施工例
				*/
				.gnav #gnav_portfolio {
						width:245px;
						height:44px;
				}
					.gnav #gnav_portfolio a {
							width:245px;
							height:44px;
							background:url(../images/index/gnav.jpg) no-repeat -245px 0;
							text-indent:-9999px;
							display:block;
					}
					.gnav #gnav_portfolio a:hover { background:url(../images/index/gnav.jpg) no-repeat -245px -44px; text-indent:-9999px; }
 
				/* ---------------------------------
				*    カタログ請求
				*/
				.gnav #gnav_catalog {
						width:245px;
						height:44px;
				}
					.gnav #gnav_catalog a {
							width:245px;
							height:44px;
							background:url(../images/index/gnav.jpg) no-repeat -490px 0;
							text-indent:-9999px;
							display:block;
					}
					.gnav #gnav_catalog a:hover { background:url(../images/index/gnav.jpg) no-repeat -490px -44px; text-indent:-9999px; }
 
				/* ---------------------------------
				*    会社案内
				*/
				.gnav #gnav_company {
						width:245px;
						height:44px;
				}
					.gnav #gnav_company a {
							width:245px;
							height:44px;
							background:url(../images/index/gnav.jpg) no-repeat -735px 0;
							text-indent:-9999px;
							display:block;
					}
					.gnav #gnav_company a:hover { background:url(../images/index/gnav.jpg) no-repeat -735px -44px; text-indent:-9999px; }
					
					
				 
/* =====================================================================
*
*    3. Main Image
*
* =================================================================== */

.main_img {
		clear:both;
		width:990px;
		height:200px;
		padding:0 5px;
}


/* ---------------------------------------------------------------------
*
*    3-1. Suv Nav
*
* ------------------------------------------------------------------- */

		.sub_nav {
				clear:both;
				width:190px;
				height:120px;
				background:url(../images/index/border.jpg) no-repeat center bottom;
				padding:0 0 15px;
		}
 
				.sub_nav ul {}
				 
				.sub_nav li {
						width:190px;
						height:40px;
						list-style:none inside;
						display:inline;
				}
				 
						/* ---------------------------------
						*    ショールーム
						*/
						.sub_nav #sub_showroom {
								width:190px;
								height:40px;
						}
									.sub_nav #sub_showroom a {
											width:190px;
											height:40px;
											background:url(../images/index/subnav.jpg) no-repeat 0 0;
											text-indent:-9999px;
											display:block;
									}
									.sub_nav #sub_showroom a:hover { background:url(../images/index/subnav.jpg) no-repeat -190px 0; text-indent:-9999px; }
				 
						/* ---------------------------------
						*    ユニオンミュージアム
						*/
						.sub_nav #sub_museum {
								width:190px;
								height:40px;
						}
									.sub_nav #sub_museum a {
											width:190px;
											height:40px;
											background:url(../images/index/subnav.jpg) no-repeat 0 -40px;
											text-indent:-9999px;
											display:block;
									}
									.sub_nav #sub_museum a:hover { background:url(../images/index/subnav.jpg) no-repeat -190px -40px; text-indent:-9999px; }
							 
						/* ---------------------------------
						*    ホットスポット
						*/
						.sub_nav #sub_hotspot {
								width:190px;
								height:40px;
						}
								.sub_nav #sub_hotspot a {
										width:190px;
										height:40px;
										background:url(../images/index/subnav.jpg) no-repeat 0 -80px;
										text-indent:-9999px;
										display:block;
								}
								.sub_nav #sub_hotspot a:hover { background:url(../images/index/subnav.jpg) no-repeat -190px -80px; text-indent:-9999px; }


/* ---------------------------------------------------------------------
*
*    3-2. Flash
*
* ------------------------------------------------------------------- */	

		#flash {
			float:left;
			width:980px;
			height:200px;
			padding:0 5px;
		}
	 

			
			
/* =====================================================================
*
*    4. Side Nav
*
* =================================================================== */
.contents_area {
		clear:both;
		width:990px;
		_width:1000px;
		padding:10px 5px;
		overflow:hidden;
}
.contents_area:after {
		content: "";
		display: block;
		clear: both;
		height: 1px;
		overflow: hidden;
}
/*\*/
* html .contents_area {
		height: 1em;
		overflow: visible;
}
/**/



/* ---------------------------------------------------------------------
*
*    4-1. Side Nav
*
* ------------------------------------------------------------------- */

		.contents_area .side_nav_area {
				float:left;
				width:190px;
				margin:0 5px 0 0;
		}

				.contents_area .side_nav_area .side_nav {
						width:180px;
						margin:15px 0 0;
						padding:0 5px 15px;
						background:url(../images/index/border.jpg) no-repeat center bottom;
				}
 
						.contents_area .side_nav_area .side_nav ul {}
					 
						.contents_area .side_nav_area .side_nav li {
								width:180px;								
								list-style:none inside;
						}
					 
						.contents_area .side_nav_area .side_nav p {
								width:180px;
								font-size:85%;
								line-height:1.4em;
								margin:3px 0 10px;
						}
	 
						/* ---------------------------------
						*    リンク
						*/
						.contents_area .side_nav_area .side_nav #sidenav_link {
								width:42px;
								height:18px;
						}
						 
							.contents_area .side_nav_area .side_nav #sidenav_link a {
									width:42px;
									height:18px;
									display:block;
									margin:0 0 10px;
							}
							.contents_area .side_nav_area .side_nav #sidenav_link a:hover { background:url(../images/index/sidenav_link_on.gif) no-repeat left top; text-indent:-9999px; }
							
						/* ---------------------------------
						*    お問い合わせ
						*/
						.contents_area .side_nav_area .side_nav #sidenav_inquiry {
								width:58px;
								height:18px;
						}
						 
							.contents_area .side_nav_area .side_nav #sidenav_inquiry a {
									width:58px;
									height:18px;
									display:block;
							}
							.contents_area .side_nav_area .side_nav #sidenav_inquiry a:hover { background:url(../images/index/sidenav_inquiry_on.gif) no-repeat left top; text-indent:-9999px; }
 

/* ---------------------------------------------------------------------
*
*    4-2. Company Links
*
* ------------------------------------------------------------------- */

				.contents_area .side_nav_area .co_link {
							width:180px;
							background:url(../images/index/border.jpg) no-repeat center top;
							padding:15px 5px 0;
				}
	 
						.contents_area .side_nav_area .co_link h2 {
									margin-bottom:10px;
						}
					 
						.contents_area .side_nav_area .co_link ul {}
					 
						.contents_area .side_nav_area .co_link li {
									width:180px;
									height:30px;
									list-style:none inside;
									display:inline;
						}
							 
						.contents_area .side_nav_area .co_link p {
									font-size:85%;
									line-height:1.4em;
									margin:2px 0 5px;
						}
 
						/* ---------------------------------
						*    アトリエユニオン
						*/
						.contents_area .side_nav_area .co_link #co_atelierunion a {
							width:180px;
							height:30px;
							display:block;
						}
						.contents_area .side_nav_area .co_link #co_atelierunion a:hover { background:url(../images/index/colink_atelierunion_on.gif) no-repeat left top; text-indent:-9999px; }
 
						/* ---------------------------------
						*    株式会社ユニオン防音
						*/
						.contents_area .side_nav_area .co_link #co_union-bouon a {
							width:180px;
							height:30px;
							display:block;
						}
						.contents_area .side_nav_area .co_link #co_union-bouon a:hover { background:url(../images/index/colink_union-bouon_on.gif) no-repeat left top; text-indent:-9999px; }
 
						/* ---------------------------------
						*    ユニオン造形文化財団
						*/
						.contents_area .side_nav_area .co_link #co_uffec a {
							width:180px;
							height:30px;
							display:block;
						}
						.contents_area .side_nav_area .co_link #co_uffec a:hover { background:url(../images/index/colink_uffec_on.gif) no-repeat left top; text-indent:-9999px; }
		

 
/* =====================================================================
*
*    5. Main Contents
*
* =================================================================== */

.contents_area .main_contents {
		float:left;
		width:600px;
		background:#fff;
}
.main_contents:after {
		content: "";
		display: block;
		clear: both;
		height: 1px;
		overflow: hidden;
	}
/*\*/
* html .main_contents {
		height: 1em;
		overflow: visible; }
/**/
 
/* ---------------------------------------------------------------------
*
*    5-1. Search
*
* ------------------------------------------------------------------- */

		.main_contents .search_area {
				width:600px;
				margin-bottom:30px;
		}
 
				.main_contents .search_area #search_container {
						width:585px; /*600*/
						_width:600px;
						height:35px;
						margin:0 0 15px;
						padding:5px 0 0 15px;
						overflow:hidden;
				}
				 
				#search_container:after {
						content: "";
						display: block;
						clear: both;
						height: 1px;
						overflow: hidden; }
				/*\*/
				* html #search_container {
						height: 1em;
						overflow: visible; }
				/**/
				
						.main_contents .search_area #search_container h2 {
								float:left;
								width:120px;
								padding:2px 0 0 0; }
 
						.main_contents .search_area #search_container #search_box {
								float:right;
								width:385px; /*395*/
								background:url(../images/index/search_bg.gif);
								padding:5px;
								margin-right: 5px;
								text-align:center;
						}
						 
								.main_contents .search_area #search_container #search_box p {
										float:left;
										padding: 2px 5px 0 2px;
										color:#009944;
										font-size: 85%;
								}
								
								.main_contents .search_area #search_container #search_box input {
										float:left;
										width:160px;
										height:1.5em;
										line-height: 140%;
										border:1px solid #009944;
										padding: 0 0 0 2px;
								}
 
 
 /* ---------------------------------------------------------------------
*
*    5-2. Tab
*
* ------------------------------------------------------------------- */

		.main_contents .tablist {
				width:585px; /*600*/
				_width:594px;
				height:49px;
				background:url(../images/index/tab_bg.jpg) repeat-x bottom;
				margin:0 1px 15px;
				padding:0 4px 0 9px;
		}
		 
				.main_contents .tablist h3 {
						float:left;
						width:195px;
						cursor:pointer;
				}
				
				
 
						/* ---------------------------------
						*    Tab Hide
						*/
						.tablist #tabsel1.tab_selector a{ /*Archism*/
								width:195px; 
								height:44px;
								background:url(../images/index/tab_archism_off.jpg) no-repeat left top;
								text-indent:-9999px;
								display:block;
						}
						 
						.tablist #tabsel2.tab_selector a{ /*Cityview*/
								width:195px; 
								height:44px;
								background:url(../images/index/tab_cityview_off.jpg) no-repeat left top;
								text-indent:-9999px;
								display:block;
						}
						 
						.tablist #tabsel3.tab_selector a{ /*Modellize*/
								width:195px; 
								height:44px;
								background:url(../images/index/tab_modellize_off.jpg) no-repeat left top;
								text-indent:-9999px;
								display:block;
						}
				 
						/* ---------------------------------
						*    Tab Visibl
						*/
						.tablist #tabsel1.selected a{ /*Archism*/
								width:195px; 
								height:44px;
								background:url(../images/index/tab_archism_on.jpg) no-repeat left top;
								text-indent:-9999px;
								display:block;
						}
						 
						.tablist #tabsel2.selected a{ /*Cityview*/
								width:195px; 
								height:44px;
								background:url(../images/index/tab_cityview_on.jpg) no-repeat left top;
								text-indent:-9999px;
								display:block;
						}
						 
						.tablist #tabsel3.selected a{ /*Modellize*/
								width:195px; 
								height:44px;
								background:url(../images/index/tab_modellize_on.jpg) no-repeat left top;
								text-indent:-9999px;
								display:block;
						}
 

 /* ---------------------------------------------------------------------
*
*    5-3. Products List
*
* ------------------------------------------------------------------- */

/* ---------------------------------
*    Tab Box Hide
*	 [ main_contents ] > [ id="tab1" class="noshow" ]
*
*/
.noshow {
		width:600px;
		overflow: hidden;
		display:none;
}
 
.noshow:after {
		content: "";
		display: block;
		clear: both;
		height: 1px;
		overflow: hidden;
}
/*\*/
* html .noshow {
		height: 1em;
		overflow: visible;
}
/**/


/* ---------------------------------
*    Tab Box Visibl
*	 [ main_contents ] > [ id="tab1" class="tab" ] 
*
*/
.tab {
		width:600px;
		overflow: hidden;
}
 
.tab:after {
		content: "";
		display: block;
		clear: both;
		height: 1px;
		overflow: hidden;
}
/*\*/
* html .tab {
		height: 1em;
		overflow: visible;
}
/**/


/* ---------------------------------
*    ProductList
*/

		.product_list {
				float:left;
				width:600px; /*600*/
				margin:0 0 10px;
				font-size:95%;
				overflow:hidden;
		}
		 
					.product_list ul {
							width:585px;
							_width:605px; /*600*/
							padding:0 5px 0;
					}
					.product_list div{
							float:left;
							width:280px; /*280*/
							border-bottom:1px solid #ddd;
							margin:0 0 5px 10px;
							_margin:0 0 5px 5px;
							padding:0 0 2px;
							list-style:none inside;
							display:block;
					}
					.product_list li {
							width:280px;
							display:block;
							_margin:0 0 0 -1.5em;
					}
					.product_list li img{
							float:left;
							width:50px;
					}
					.product_list li p{
							float:right;
							width:220px;
							padding-left:5px;
					}
		 
							.product_list a:link    { color:#333; text-decoration:none; } 
							.product_list a:visited { color:#333; text-decoration:none; } 
							.product_list a:hover   { color:#666; text-decoration:underline; }
							.product_list a:active  { color:#666; text-decoration:none; }
							
/* -----------------------------------------------------
*    住宅用製品のリストのみ使用（カテゴリーのタイトル）
*/
h4.products_category {
		width:590px; /*600*/
		font-size:100%;
		font-weight:bold;
		padding:0 0 0 10px;
}

/* -----------------------------------------------------
*    都市景観のみ使用（イメージ画像）
*/
#p_cityview{
		margin:0 0 15px;
		text-align:center;
}

/* -----------------------------------------------------
*    コンテンツの高さ調整
*/
#tab1 .product_list{
	margin-bottom:420px;
}

#tab2 .product_list{
	margin-bottom:500px;
}



/* =====================================================================
*
*    7. Side Information Area
*
* =================================================================== */

.contents_area .side_info_area {
		float:left;
		width:180px;
		padding:0 0 0 5px;
		font-size:80%;
		_font-size:85%;
}


 
		/* ---------------------------------
		*    White Box
		*/
		.side_info_area .side_info_box {
				width:170px;
				background:#fff;
				margin:0 0 2px;
				padding:5px;
				/*font-size:98%;
				_font-size:95%;*/
		}
				
 
				.side_info_area .side_info_box h2 { 
						margin:0 0 5px;
				}
  
				/* ---------------------------------
				*    Banner
				*/
				.side_info_box .banner_firstchild {
						margin:0 0 5px;
				}
				
				.side_info_box .banner_lastchild {
						margin:5px 0 0;
				}
 
				/* ---------------------------------
				*    About UNION Web Site
				*/
				.side_info_box #website_info {
						width:160px; /*170*/
						border:1px solid #999;
						letter-spacing: 0.01em;
						padding:4px;
				}
 
						.side_info_box #website_info h2 {
								color:#aa9955;
								font-size:100%;
								_font-size:95%;
								font-weight:bold;
						}

 
						.side_info_box #website_info #btn_mail {
								width:160px;
								height:23px;
								border-bottom:1px dotted #999;
								margin:0 0 3px;
								padding:0 0 3px;
						}
 
								.side_info_box #website_info #btn_mail a { /*メールの送信先はこちら*/
										width:160px;
										height:20px;
										display:block;
								}
 
								.side_info_box #website_info #btn_mail a:hover { background:url(../images/index/btn_mail_on.jpg) no-repeat left top; text-indent:-9999px; }
 
				/* ---------------------------------
				*    Topics
				*/								
				.side_info_box #topics_area dl {
						width:170px;
						margin-bottom:10px;
						overflow: hidden;
						zoom:1;
				}
 
				.side_info_box #topics_area dt {
						width:170px;
						background:#eee;
						color:#aa9955;
						/*font-size:95%;*/
						font-weight:bold;
						padding:3px 5px;
				}
 
				.side_info_box #topics_area dd {
						width:170px;
						border-bottom:1px solid #eee;
						/*font-size:85%;
						_font-size:90%;*/
						margin-left:2px;
				}
 
						.side_info_box #topics_area dd p {
								padding:0 0 0 10px;
						}
 
						.side_info_box #topics_area dd a {
								background:url(../images/index/i_arrow_topics.gif) no-repeat 0 5px;
								padding:0 0 0 10px;
						}
						/*.side_info_box #topics_area a:link    { color:#007733; text-decoration:underline; }
						.side_info_box #topics_area a:visited { color:#55aa77; text-decoration:underline; }
						.side_info_box #topics_area a:hover   { color:#009944; text-decoration:none; }
						.side_info_box #topics_area a:active  { color:#007733; text-decoration:underline; }*/
 
 
 
/* =====================================================================
*
*    8. Footer Area
*
* =================================================================== */

.footer_area {
		clear:both;
		width:990px;
		background:#e8e6db;
		padding:20px 0 50px;
		text-align:center;
}
		.footer_area p {
				margin:0 0 3px;
				font-size:85%;
				_font-size:80%;
		}
		
		
				/*.footer_area a:link    { color:#003311; text-decoration:underline; }
				.footer_area a:visited { color:#99bbaa; text-decoration:underline; }
				.footer_area a:hover   { color:#226633; text-decoration:none; }
				.footer_area a:active  { color:#003311; text-decoration:underline; }*/

		.footer_area #copyright {
				color:#918249;
		}