@charset "utf-8";

/* ---------------------------------------------------
   File: common.css
   Version: 1.0.0
   Update: 2014-09-09
   Author: http://flowlab.co.jp

   (c)2007-2014 Flowlab inc. All Rights Reserved.
--------------------------------------------------- */





/* ===================================================
   Page Layout
=================================================== */

div#wrapper {
	margin: 0 auto;
	letter-spacing: 0.1em;
}

/* Header */
header {
	height: 180px;
	background: url(../img_common/bg_header.jpg) center top repeat-x;
	overflow: hidden;
}
#headerBox {
	width: 1000px;
	margin: 0 auto;
	padding: 24px 0 0 0;
}

/* Contents */
div#contentsBox {
	clear: both;
	width: 1000px;
	margin: 0 auto;
}

/* Footer */
footer {
	background: url(../img_common/bg_footer.gif) center top repeat-x #FFF;
	margin-top: 60px;
}
#footerTopBox {
	width: 1000px;
	height: 65px;
	background: url(../img_common/bg_footer_top.jpg) 0 0 no-repeat;
	margin: 0 auto;
}
#footerBox {
	width: 1000px;
	margin: 0 auto;
}


/* IEPNG FIX */
* html .iepngfix {
	behavior: expression(IEPNGFIX.fix(this));
}


/* ===================================================
   Header
=================================================== */

/* -----------------------------------
		Logo
----------------------------------- */
#logo,
#logo img,
#logo a {
	width: 340px;
	height: 60px;
	display: block;
	overflow: hidden;
}
#logo {
	float: left;
}
#logo a {
	background: url(../img_common/logo.jpg) 0 0 no-repeat;
	text-indent: -9999px;
}
#logo a:hover {
	background-position: 0 -60px;
}

/* -----------------------------------
		Sub Navigation
----------------------------------- */
#snaviBox {
	width: 440px;
	float: right;
}
#snaviBox ul#snaviBox li,
#snaviBox li a {
	display: block;
}
#snaviBox ul,
#snaviBox li,
#snaviBox li img,
#snaviBox li a {
	display: block;
}
#snaviBox li {
	float: left;
}

/* Contact Type */
#contactType {
	width: 320px;
	height: 21px;
	padding-bottom: 15px;
	float: right;
}
#contactType li#btn_contact_header {
	float: right;
}

/* S Navi */
#snavi,
#snavi li,
#snavi li a {
	height: 30px;
}
#snavi {
	clear: both;
	overflow: hidden;
	display: block;
}
#snavi li {
}
#snavi li a {
	background: url(../img_common/snavi.jpg);
	text-indent: -9999px;
}
#snavi li#s_top a									{ width: 	57px;			background-position:            0          0;}
#snavi li#s_support a						{ width: 108px;			background-position:    -57px          0;}
#snavi li#s_aboutus a						{ width: 	73px;			background-position:  -165px          0;}
#snavi li#s_staff a								{ width: 	97px;			background-position:  -238px          0;}
#snavi li#s_faq a									{ width: 100px;			background-position:  -335px          0;}

#snavi li#s_top a:hover					{ background-position:            0  -30px;}
#snavi li#s_support a:hover	{ background-position:    -57px  -30px;}
#snavi li#s_aboutus a:hover	{ background-position:  -165px  -30px;}
#snavi li#s_staff a:hover				{ background-position:  -238px  -30px;}
#snavi li#s_faq a:hover					{ background-position:  -335px  -30px;}






/* ===================================================
   Grobal Navigation
=================================================== */

#gnavi {
	clear: both;
	width: 1000px;
	padding-top: 14px;
}
#gnavi li,
#gnavi li a {
	height: 68px;
	display: block;
}
#gnavi li {
	float: left;
}
#gnavi li a {
	background: url(../img_common/gnavi.jpg);
	text-indent: -9999px;
}
#gnavi li#g_concept a																{ width: 142px;		background-position:           0           0;}
#gnavi li#g_spec a																		{ width: 143px;		background-position: -142px           0;}
#gnavi li#g_works a																	{ width: 143px;		background-position: -285px           0;}
#gnavi li#g_flow a																		{ width: 142px;		background-position: -428px           0;}
#gnavi li#g_service a																{ width: 143px;		background-position: -570px           0;}
#gnavi li#g_renovation a#mmenu1						{ width: 143px;		background-position: -713px           0;}
#gnavi li#g_shop a																		{ width: 144px;		background-position: -856px           0;}

#gnavi li#g_concept a:hover											{ background-position:           0   -68px;}
#gnavi li#g_spec a:hover													{ background-position: -142px   -68px;}
#gnavi li#g_works a:hover												{ background-position: -285px   -68px;}
#gnavi li#g_flow a:hover														{ background-position: -428px   -68px;}
#gnavi li#g_service a:hover												{ background-position: -570px   -68px;}
#gnavi li#g_renovation a#mmenu1:hover		{ background-position: -713px   -68px;}
#gnavi li#g_shop a:hover													{ background-position: -856px   -68px;}

/* ---------------------------------------
   Renovation - Drop Down Menu
--------------------------------------- */

#gnavi #g_renovation .mainmenu a.menu {
	display: block;
	padding: 0;
	margin: 0;
	text-decoration: none;
}
#gnavi #g_renovation ul.submenu {
	width: 144px;
	height: 98px;
	visibility: hidden;
	position: absolute;
	z-index: 3;
	display: block;
	margin-top: -19px;
	padding-left: 2px;
}
#gnavi #g_renovation ul.submenu li,
#gnavi #g_renovation ul.submenu li a {
	width: 144px;
	display: block;
	overflow: hidden;
}
#gnavi ul.submenu li#g_renovation_works,
#gnavi ul.submenu li#g_renovation_works a {
	height: 53px;
}
#gnavi ul.submenu li#g_renovation_consultation,
#gnavi ul.submenu li#g_renovation_consultation a {
	height: 45px;
}
#gnavi #g_renovation ul.submenu li a {
	background: url(../img_common/gnavi_sub.jpg);
	text-indent: -9999px;
}

#gnavi ul.submenu li#g_renovation_works a										{ background-position:              0            0;}
#gnavi ul.submenu li#g_renovation_consultation a						{ background-position:              0    -53px;}

#gnavi ul.submenu li#g_renovation_works a:hover						{ background-position:    -144px            0;}
#gnavi ul.submenu li#g_renovation_consultation a:hover	{ background-position:    -144px    -53px;}






/* ===================================================
   Contents
=================================================== */

/* -----------------------------------
		Page Path
----------------------------------- */
#pagePath,
#pagePath ul,
#pagePath ul li,
#pagePath ul li a {
	display: block;
}
#pagePath {
	width: 1000px;
	margin: 0 auto;
	padding-bottom: 50px;
}
#pagePath ul {
	float: right;
}
#pagePath li {
	font-size: 0.8em;
	float: left;
}
#pagePath li a {
	color: #000;
	text-decoration: none;
	background: url(../img_common/icon_arrow_pagepath.jpg) right center no-repeat;
	padding-right: 12px;
	margin-right: 10px;
}
#pagePath li a:hover {
	color: #999;
}


/* -----------------------------------
		Local Navigation
----------------------------------- */
#lnavi_area {
	width: 170px;
	float: left;
}

/* Page Title */
#lnavi_area h1 {
	width: 170px;
	display: block;
	text-indent: -9999px;
	overflow: hidden;
	padding-bottom: 40px;
}

/* Local Navigation Box */
#lnaviBox {
	background: url(../img_common/lnavi_mid.jpg) 0 0 repeat-y;
	margin-bottom: 30px;
}
#lnaviBox ul {
	background: url(../img_common/lnavi_top.jpg) 0 0 no-repeat;
	padding: 30px 0 20px 0;
}
	#lnaviBox ul li,
	#lnaviBox ul li a {
		display: block;
	}
	#lnaviBox ul li {
		font-size: 0.8em;
		line-height: 1.4em;
		background: url(../img_common/line_dot_lnavi.jpg) left bottom no-repeat;
		margin: 0 10px;
	}
		#lnaviBox ul li a {
			color: #000;
			background: url(../img_common/icon_arrow_lnavi.jpg) left center no-repeat;
			text-decoration: none;
			padding: 10px 0 10px 10px;
		}
		#lnaviBox ul li a:hover {
			color: #999;
		}
#lnaviBox #lnaviBtm,
#lnaviBox #lnaviBtm img {
	height: 4px;
	display: block;
}

/* Contact */
#lnavi_contact li,
#lnavi_contact li img {
	display: block;
}
#lnavi_contact li {
	padding-bottom: 20px;
}

/* Other Menu */
#otherMenu {
	padding-top: 10px;
}
#otherMenu li,
#otherMenu li img {
	display: block;
}


/* -----------------------------------
		Contents
----------------------------------- */
#contents_area {
	width: 730px;
	float: right;
}
.contents {
	padding-bottom: 80px;
}

/* Lead Box */
#leadBox article {
	float: left;
}
#leadBox article h2 {
	display: block;
	overflow: hidden;
	text-indent: -9999px;
	padding-bottom: 40px;
	margin-top: 30px;
}
#leadBox #mainImage {
	float: right;
}

/* Title */
.contents h3 {
	font-size: 1.5em;
	line-height: 1.4em;
	background: url(../img_common/line_h3.jpg) left bottom no-repeat;
	padding: 10px 0;
	margin-bottom: 25px;
	display: block;
}

/* Brown Box */
.brownBox {
	font-size: 0.9em;
	background: url(../img_common/bg_brown-box.jpg) 0 0 repeat;
	padding: 20px 30px;
}
.brownBox h4 {
	font-size: 1.1em;
	font-weight: bold;
	padding-bottom: 10px;
}
.brownBox ul {
	width: 100%;
}
.brownBox li {
	width: 47%;
	line-height: 1.4em;
	background: url(../img_common/icon_circle_brown-box.jpg) 0 0.6em no-repeat;
	float: left;
	display: block;
	padding-left: 15px;
	margin-bottom: 8px;
}

/* Attention */
.att {
	font-size: 0.7em;
	line-height: 1.4em;
	display: block;
	padding-top: 10px;
}

/* -----------------------------------
		Banner Box
----------------------------------- */
#bannerBox {
	width: 1000px;
	height: 90px;
	margin: 0 auto 22px;
}
#bannerBox img {
	display: block;
}
div#bannerBox li {
	width: 234px;
	height: 90px;
	display: block;
	padding-right: 20px;
	float: left;
}
div#bannerBox li.float_r {
	padding-right: 0;
	float: right;
}

/* -----------------------------------
		Contact Box
----------------------------------- */
#contactBox {
	width: 1000px;
	height: 166px;
	background: url(../img_common/bg_contact-box.jpg) 0 0 no-repeat;
	margin: 0 auto;
}
#contactBox ul,
#contactBox ul li,
#contactBox ul li img {
	display: block;
}
#contactBox ul {
	width: 670px;
	height: 40px;
	display: block;
	padding: 36px 0 0 280px;
}
#contactBox ul li {
	float: left;
}
#contactBox #btn_contactBox_webForm {
	padding-top: 15px;
	float: right;
}





/* ===================================================
   Page Top
=================================================== */

#pageTop,
#pageTop a {
	width: 70px;
	height: 65px;
	display: block;
	overflow: hidden;
	text-indent: -9999px;
}
#pageTop {
	float: right;
}
#pageTop a {
	background: url(../img_common/btn_pagetop.jpg) 0 0 no-repeat;;
	text-indent: -9999px;
}
#pageTop a:hover {
	background-position: 0 -65px;
}






/* ===================================================
   Footer
=================================================== */

#footerBox {
	clear: both;
	padding: 40px 0;
}

#companyInformationBox {
	width: 460px;
	color: #491b03;
	float: left;
}

/* Address */
#companyInformationBox address {
	width: 350px;
	letter-spacing: 0.1em;
	font-style: normal;
	line-height: 1.4em;
	display: block;
	padding-top: 5px;
	float: left;
}

/* Btn - Contact */
#btn_contact_footer,
#btn_contact_footer p,
#btn_contact_footer p img {
	display: block;
}
#btn_contact_footer {
	float: right;
}

/* Copyrights */
#companyInformationBox small {
	font-size: 0.55em;
	letter-spacing: 0.3em;
}

/* -----------------------------------
		Footer Navigation
----------------------------------- */
#footerBox nav {
	width: 435px;
	float: right;
}
#footerBox nav ul,
#footerBox nav ul li,
#footerBox nav ul li a {
	display: block;
}
#footerBox nav ul li,
#footerBox nav ul li a {
	height: 20px;
}
#footerBox nav ul li a {
	background: url(../img_common/fnavi.gif);
	text-indent: -9999px;
}
#footerBox nav #fnavi_l li,
#footerBox nav #fnavi_m li,
#footerBox nav #fnavi_r li {
	padding-bottom: 10px;
}
#footerBox nav #fnavi_r #f_renovation_works {
	padding-bottom: 2px;
}
#footerBox nav #fnavi_l			{ width:   95px;			float: left;}
#footerBox nav #fnavi_m		{ width: 124px;			float: left;}
#footerBox nav #fnavi_r			{ width: 100px;			float: left;}
#footerBox nav #fnavi_sub	{ width:  90px;				float: right;}

/* fnavi_l ----------------------- */
#footerBox nav #fnavi_l #f_concept a																		{ background-position:             0               0;}
#footerBox nav #fnavi_l #f_spec a																					{ background-position:             0        -28px;}
#footerBox nav #fnavi_l #f_works a																				{ background-position:             0        -56px;}

#footerBox nav #fnavi_l #f_concept a:hover														{ background-position:             0        -82px;}
#footerBox nav #fnavi_l #f_spec a:hover																{ background-position:             0      -110px;}
#footerBox nav #fnavi_l #f_works a:hover															{ background-position:             0      -138px;}

/* fnavi_m ----------------------- */
#footerBox nav #fnavi_m #f_flow a																				{ background-position:      -95px               0;}
#footerBox nav #fnavi_m #f_service a																		{ background-position:      -95px        -28px;}
#footerBox nav #fnavi_m #f_shop a																				{ background-position:      -95px        -56px;}

#footerBox nav #fnavi_m #f_flow a:hover																{ background-position:      -95px        -82px;}
#footerBox nav #fnavi_m #f_service a:hover														{ background-position:      -95px      -110px;}
#footerBox nav #fnavi_m #f_shop a:hover															{ background-position:      -95px      -138px;}

/* fnavi_r ----------------------- */
#footerBox nav #fnavi_r #f_renovation a																{ background-position:    -219px               0;}
#footerBox nav #fnavi_r #f_renovation_works a											{ background-position:    -219px        -28px;}
#footerBox nav #fnavi_r #f_renovation_consultation a							{ background-position:    -219px        -49px;}

#footerBox nav #fnavi_r #f_renovation a:hover												{ background-position:    -219px        -82px;}
#footerBox nav #fnavi_r #f_renovation_works a:hover							{ background-position:    -219px      -110px;}
#footerBox nav #fnavi_r #f_renovation_consultation a:hover		{ background-position:    -219px      -131px;}

/* fnavi_sub ----------------------- */
#footerBox nav #fnavi_sub {
	border-left: #c8bab4 1px solid;
	padding-left: 22px;
}
#footerBox nav #fnavi_sub #f_support a																{ background-position:    -348px               0;}
#footerBox nav #fnavi_sub #f_aboutus a																{ background-position:    -348px       -20px;}
#footerBox nav #fnavi_sub #f_staff a																			{ background-position:    -348px       -40px;}
#footerBox nav #fnavi_sub #f_faq a																				{ background-position:    -348px       -60px;}

#footerBox nav #fnavi_sub #f_support a:hover												{ background-position:    -348px       -82px;}
#footerBox nav #fnavi_sub #f_aboutus a:hover												{ background-position:    -348px     -102px;}
#footerBox nav #fnavi_sub #f_staff a:hover														{ background-position:    -348px     -122px;}
#footerBox nav #fnavi_sub #f_faq a:hover															{ background-position:    -348px     -142px;}

/* Etc ----------------------- */
#footerBox nav #fnavi_etc {
	clear: both;
	width: 250px;
	padding-top: 10px;
	float: right;
}
#footerBox nav #fnavi_etc li {
	padding-right: 12px;
	float: left;
}
#footerBox nav #fnavi_etc li#f_sitemap {
	padding: 0;
	float: right;
}
#footerBox nav #fnavi_etc li a {
	background: none;
	text-indent: 0;
}