@charset "utf-8";
/* CSS 外断熱サイディング-page */

/*** ボディ（その他） ****/
/*** @group body ******************************************************************************/

body {
	background: url(../images/siding/bg-body.gif) repeat-x left top #3E4144;
	height: 100%;
}

* {
	margin: 0px;
	padding: 0px;
}

#wrapper {
	width: 1080px;
	height: auto;
	margin: 0px auto 0px auto;
	left: 50%;
	margin-left: -540px;  /* マイナス「横幅÷2」 */
	position: absolute;
}

.clear {
	clear: both;
}

span.bf {
	visibility: hidden;
	text-indent: -9999px;
}

span.bf02 {
	visibility: hidden;
	text-indent: -9999px;
	display: none;
}

/*** [色] 文字 ****/
/*** @group moji-color ****************************************************************************/

.moji-red {
	color: #FB565E;
	font-weight: bold;
}

.moji-blue {
	color: #3194D5;
	font-weight: bold;
}

.moji-yellow {
	color: #FCB122;
	font-weight: bold;
}

.moji-orange {
	color: #FD8B1B;
	font-weight: bold;
}

/*** [フォント] 文字 ****/
/*** @group moji-font ****************************************************************************/

.moji-font_j {
	font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Osaka, meiryo, "ＭＳ Ｐゴシック", "Lucida Grande", Arial, sans-serif;
}

.moji-font_e {
	font-family: "Lucida Grande", Arial, sans-serif;
}

/*** [サイズ] 文字 ****/
/*** @group moji-size ****************************************************************************/

.moji-size11 {
	font-size: 11px;
}

.moji-size12 {
	font-size: 12px;
}

.moji-size14 {
	font-size: 14px;
}

.moji-size15 {
	font-size: 15px;
	font-weight: bold;
}

/*** [リンク] 文字 ****/
/*** @group moji-color ****************************************************************************/

.moji-Link01 a {
	color: #404040;
	text-decoration: underline;
}

.moji-Link01 a:hover {
	color: #FD8B1B;
	text-decoration: underline;
}

.moji-Link02 a {
	color: #FD8B1B;
	text-decoration: underline;
}

.moji-Link02 a:hover {
	color: #FEAA3E;
	text-decoration: underline;
}

.moji-Link03 a {
	color: #FD8B1B;
	text-decoration: underline;
	font-family: "Lucida Grande", Arial, sans-serif;
	font-weight: bold;
}

.moji-Link03 a:hover {
	color: #FEAA3E;
	text-decoration: underline;
	font-family: "Lucida Grande", Arial, sans-serif;
	font-weight: bold;
}

/*** [Ｈ1] ヘッダー ****/
/*** @group header ****************************************************************************/

#header {
	padding: 0px;
	height: 210px;
	width: 1080px;
	margin: 0px auto 20px auto;
	background: url(../images/siding/bg-header.jpg) no-repeat;
	overflow: hidden;
}

#head-box {
	padding: 0px;
	height: auto;
	width: 900px;
	margin: 0px auto 0px auto;
	overflow: hidden;
}

#head-left {
	padding: 0px;
	height: auto;
	width: 184px;
	margin: 18px 0px 0px 0px;
	display: inline;
	float: left;
}

#head-right {
	padding: 0px;
	height: auto;
	width: 660px;
	margin: 11px 0px 0px 0px;
	display: inline;
	float: right;
}

/* [h1] start */
h1#Logo a {
    padding: 0px;
	height: 54px;
	width: 184px;
	margin: 0px 0px 0px 0px;
	background: url(../images/siding/h1-Logo.gif) no-repeat;
	display: block;
}

/* [navigation] start */
.head-nav {
	margin: 0px 8px 24px 0px;
	padding: 0px;
	height: 24px;
	width: 607px;
	overflow: hidden;
	display: block;
}

.head-nav ul {
	height: 24px;
	width: 607px;
	margin: 0px 0px 0px 0px;
	padding: 0px;
	list-style-type: none;
	display: block;
}

.head-nav ul li {
	padding: 0;
	margin: 0;
	list-style-type: none;
	display: inline;
}

.head-nav ul li a {
	padding: 0px;
	height: 24px;
	text-decoration: none;
	float: left;
	display: block;
	background: url(../images/siding/headnav.gif) no-repeat;
	border: 0px;
}

.head-nav ul li.headnav-01 a {
	width: 134px;
	margin: 0px 5px 0px 0px;
	background-position: left top;
}

.head-nav ul li.headnav-01 a:hover {
	width: 134px;
	margin: 0px 5px 0px 0px;
	background-position: left -24px;
}

.head-nav ul li.headnav-02 a {
	width: 134px;
	margin: 0px 5px 0px 0px;
	background-position: -139px top;
}

.head-nav ul li.headnav-02 a:hover {
	width: 134px;
	margin: 0px 5px 0px 0px;
	background-position: -139px -24px;
}

.head-nav ul li.headnav-03 {
	padding: 0px;
	height: 24px;
	text-decoration: none;
	float: left;
	display: block;
	background: url(../images/siding/headnav.gif) no-repeat;
	border: 0px;
	width: 134px;
	margin: 0px 5px 0px 0px;
	background-position: -278px top;
}

.head-nav ul li.headnav-04 a {
	width: 190px;
	margin: 0px 0px 0px 0px;
	background-position: -417px top;
}

.head-nav ul li.headnav-04 a:hover {
	width: 190px;
	margin: 0px 0px 0px 0px;
	background-position: -417px -24px;
}

/* [文字] start */
.head-moji {
	padding: 0px;
	margin: 0px 7px 0px 0px;
	font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Osaka, meiryo, "ＭＳ Ｐゴシック", "Lucida Grande", Arial, sans-serif;
	font-size: 12px;
	color: #404040;
	display: block;
	line-height: 140%;
}

/*** [背景] サイト ****/
/*** @group bg-site ****************************************************************************/

#bg-site {
	padding: 15px 0px 0px 0px;
	height: auto;
	width: 900px;
	margin: 0px auto 0px auto;
	background-color: #FFFFFF;
	display: block;
}


/*** [写真] サイトワイズ ****/
/*** @group sitewise ****************************************************************************/

#sitewise {
	padding: 0px;
	height: 332px;
	width: 876px;
	margin: 0px auto 7px auto;
	overflow: hidden;
}

#sitewise-left {
	padding: 0px;
	height: auto;
	width: 668px;
	margin: 0px 0px 0px 0px;
	display: inline;
	float: left;
}

#sitewise-right {
	padding: 0px;
	height: auto;
	width: 192px;
	margin: 0px 0px 0px 0px;
	display: inline;
	float: right;
}

/*** スライドショー ****/
/*** @group slideshow ******************************************************************************/

#gallery {
   position: relative;
   height: 332px;
   width: 668px;
   margin: 0px auto 0px auto;
   padding: 0px;
   background: url(../images/siding/bg-sitewise.gif) no-repeat;
   overflow: hidden;
}

#images {
   margin: 6px auto 0px auto;
   padding: 0px 0px 0px 0px;
   height: 257px;
   width: 656px;
}

#image {
   position: relative;
   margin: 6px auto 0px auto;
   padding: 0px;
   height: 257px;
   width: 656px;
   background: #FFF url(../images/siding/slideshow/loading.gif) center center no-repeat;
}

#image img {
   position: absolute;
}

#thumbwrapper {
	margin: 5px auto 0px auto;
	padding: 0px 0px 0px 0px;
	width: 656px;
	height: 57px;
	overflow: hidden;
	background: url(../images/siding/slideshow/bg-thumbs.gif) no-repeat;
	
}

#thumbarea {
   position: relative;
   width: 592px;
   height: 48px;
   margin: 8px 0px 0px 32px;
   padding: 0px;
   overflow: hidden;
}

#thumbs {
	margin: 0px 0px 0px 0px;
	padding: 0px;
	height: 48px;
	width: 10000px;
	position: absolute;
	list-style: none;
	display: block;
}

#thumbs li { 
   margin: 0px 8px 0px 0px;
   padding: 0px 0px 0px 0px;
   cursor: pointer;
   float: left;
}

.imgnav {
   position: absolute;
   height: 48px;
   width: 20%;
   z-index: 100;
   height: 48px;
   width: 20%;
   z-index: 100;
   outline: none;
   cursor: pointer;
}

#previmg {
   left: 0;
}

#previmg:hover {
   opacity: 1;
   filter: alpha(opacity=100);
}

#nextimg {
   right: 0;
}

#nextimg:hover {
   opacity: 1;
   filter: alpha(opacity=100);
}

/*** [Link] お薦めサイディング ****/
/*** @group sidemenu ****************************************************************************/

#sidemenu {
	margin: 0px auto 0px auto;
	padding: 0px;
	height: auto;
	width: 192px;
	display: block;
}

h3.sidenavTitle {
	padding: 0px;
	height: 32px;
	width: 192px;
	margin: 0px 0px 0px 0px;
	background: url(../images/siding/h3-sidenavTitle.gif) no-repeat;
}

#bg-sidemenu {
	margin: 0px auto 0px auto;
	padding: 0px;
	height: 300px;
	width: 192px;
	background: url(../images/siding/bg-sidenav.gif) no-repeat;
	display: block;
	overflow: hidden;
}

/*** [pickupnav／製品紹介] サイドナビ ***/
/*** @group sidenav ****************************************************************************/

div.sidenav {
	margin: 4px 0px 0px 0px;
	padding: 0px;
	height: 291px;
	width: 207px;
	display: block;
	overflow: hidden;
}

div.sidenav ul {
	height: auto;
	width: 207px;
	list-style-type: none;
}

div.sidenav ul li {
	margin: 0;
	padding: 0;
	list-style-type: none;
	display: inline;
	float: left;
}

div.sidenav ul li a {
	display: block;
	text-decoration: none;
	overflow: auto;
	padding: 0px;
	height: 55px;
	width: 184px;
	background: url(../images/siding/sidenav.jpg) no-repeat;
}

html.sidenav ul li a {
	zoom: 1;/* 余白を解消する指定 */
}

div.sidenav ul li.sidenav-001 a {
	margin: 0px 0px 4px 4px;
	background-position: left top;
}

div.sidenav ul li.sidenav-001 a:hover {
	margin: 0px 0px 4px 4px;
	background-position: -184px top;
}

div.sidenav ul li.sidenav-002 a {
	margin: 0px 0px 4px 4px;
	background-position: left -59px;
}

div.sidenav ul li.sidenav-002 a:hover {
	margin: 0px 0px 4px 4px;
	background-position: -184px -59px;
}

div.sidenav ul li.sidenav-003 a {
	margin: 0px 0px 4px 4px;
	background-position: left -118px;
}

div.sidenav ul li.sidenav-003 a:hover {
	margin: 0px 0px 4px 4px;
	background-position: -184px -118px;
}

div.sidenav ul li.sidenav-004 a {
	margin: 0px 0px 4px 4px;
	background-position: left -177px;
}

div.sidenav ul li.sidenav-004 a:hover {
	margin: 0px 0px 4px 4px;
	background-position: -184px -177px;
}

div.sidenav ul li.sidenav-005 a {
	margin: 0px 0px 0px 4px;
	background-position: left -236px;
}

div.sidenav ul li.sidenav-005 a:hover {
	margin: 0px 0px 0px 4px;
	background-position: -184px -236px;
}

/*** [枠] コンテンツ ****/
/*** @group main ****************************************************************************/

#contents {
	padding: 0px;
	height: auto;
	width: 876px;
	margin: 0px auto 30px auto;
	display: block;
}

/*** [枠] メイン ****/
/*** @group main ****************************************************************************/

#main1 {
	padding: 0px;
	height: auto;
	width: 876px;
	margin: 0px auto 0px auto;
	overflow: hidden;
	display: block;
}

#main-left {
	margin: 0px 0px 0px 0px;
	padding: 0px;
	height: auto;
	width: 330px;
	display: inline;
	float: left;
}

#main-right {
	margin: 0px 0px 0px 0px;
	padding: 0px;
	height: auto;
	width: 530px;
	display: inline;
	float: right;
}

/*** [Ｈ３] タイトル ****/
/*** @group h3.categoryTitle ****************************************************************************/

h3.categoryTitle_01 {
	padding: 0px;
	height: 34px;
	width: 330px;
	margin: 0px 0px 8px 0px;
	background: url(../images/siding/h3-categoryTitle_01.gif) no-repeat;
}

h3.categoryTitle_02 {
	padding: 0px;
	height: 34px;
	width: 330px;
	margin: 0px 0px 8px 0px;
	background: url(../images/siding/h3-categoryTitle_02.gif) no-repeat;
}

h3.categoryTitle_03 {
	padding: 0px;
	height: 34px;
	width: 530px;
	margin: 0px 0px 6px 0px;
	background: url(../images/siding/h3-categoryTitle_03.gif) no-repeat;
}

h3.categoryTitle_04 {
	padding: 0px;
	height: 34px;
	width: 876px;
	margin: 0px 0px 6px 0px;
	background: url(../images/siding/h3-categoryTitle_04.gif) no-repeat;
}

/*** [Ｈ４] タイトル ****/
/*** @group h4.listTitle ****************************************************************************/

h4.listTitle_01 {
	padding: 0px;
	height: 20px;
	width: 320px;
	margin: 0px auto 8px auto;
	background: url(../images/siding/h4-listTitle_01.gif) no-repeat left top;
}

h4.listTitle_02 {
	padding: 0px;
	height: 20px;
	width: 320px;
	margin: 0px auto 8px auto;
	background: url(../images/siding/h4-listTitle_02.gif) no-repeat left top;
}

h4.listTitle_03 {
	padding: 0px;
	height: 20px;
	width: 320px;
	margin: 0px auto 8px auto;
	background: url(../images/siding/h4-listTitle_03.gif) no-repeat left top;
}

/*** 文字 ****/
/*** @group top-moji ****************************************************************************/

.top-moji01 {
	height: auto;
	width: 320px;
	margin: 0px auto 16px auto;
	padding: 0px;
	display: block;
	font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Osaka, meiryo, "ＭＳ Ｐゴシック", "Lucida Grande", Arial, sans-serif;
	font-size: 13px;
	color: #323232;
	line-height: 140%;
}

.top-moji02 {
	height: auto;
	width: 320px;
	margin: 0px auto 16px auto;
	padding: 0px;
	display: block;
	font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Osaka, meiryo, "ＭＳ Ｐゴシック", "Lucida Grande", Arial, sans-serif;
	font-size: 12px;
	color: #323232;
	line-height: 130%;
}

.top-moji03 {
	display: block;
	font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Osaka, meiryo, "ＭＳ Ｐゴシック", "Lucida Grande", Arial, sans-serif;
	font-size: 12px;
	color: #323232;
	line-height: 120%;
	font-weight: normal;
}

/*** [枠] お客様にぜひ知ってもらいたい、お薦めポイント ****/
/*** @group feature-waku ****************************************************************************/

.point-waku {
	height: auto;
	width: 530px;
	margin: 0px auto 8px auto;
	padding: 0px;
	display: block;
	background-color: #F2F3F5;
}

.point-waku2 {
	height: auto;
	width: 530px;
	margin: 0px auto 16px auto;
	padding: 0px;
	display: block;
	background-color: #F2F3F5;
}

.point-box1 {
	height: auto;
	width: 70px;
	margin: 0px 0px 0px 0px;
	padding: 0px;
	display: block;
}

.point-box2 {
	height: auto;
	width: 450px;
	margin: 0px 0px 0px 0px;
	padding: 6px 10px 6px 0px;
	display: block;
}

/*** [Ｈ４] タイトル ****/
/*** @group h4.itemTitle ****************************************************************************/

h4.item-moji {
	padding: 0px;
	margin: 0px auto 3px auto;
	display: block;
	font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Osaka, meiryo, "ＭＳ Ｐゴシック", "Lucida Grande", Arial, sans-serif;
	font-size: 13px;
	color: #39ABA5;
	line-height: 120%;
	font-weight: bold;
}

/*** [Ｈ４] タイトル ****/
/*** @group h4.itemTitle ****************************************************************************/

h4.itemTitle_01 {
	padding: 0px;
	height: 26px;
	width: 174px;
	margin: 0px 0px 1px 6px;
	background: url(../images/siding/h4-itemTitle_01.gif) no-repeat;
	display: block;
}

h4.itemTitle_02 {
	padding: 0px;
	height: 26px;
	width: 174px;
	margin: 0px 0px 1px 6px;
	background: url(../images/siding/h4-itemTitle_02.gif) no-repeat;
	display: block;
}

h4.itemTitle_03 {
	padding: 0px;
	height: 26px;
	width: 174px;
	margin: 0px 0px 1px 6px;
	background: url(../images/siding/h4-itemTitle_03.gif) no-repeat;
	display: block;
}

h4.itemTitle_04 {
	padding: 0px;
	height: 26px;
	width: 174px;
	margin: 0px 0px 1px 6px;
	background: url(../images/siding/h4-itemTitle_04.gif) no-repeat;
	display: block;
}

h4.itemTitle_05 {
	padding: 0px;
	height: 26px;
	width: 174px;
	margin: 0px 0px 1px 6px;
	background: url(../images/siding/h4-itemTitle_05.gif) no-repeat;
	display: block;
}

/*** [枠] メトロタイルの特徴 ****/
/*** @group feature-waku ****************************************************************************/

.product-waku {
	height: auto;
	width: 846px;
	margin: 0px auto 5px auto;
	padding: 0px;
	display: block;
}

.product-box1 {
	height: auto;
	width: 225px;
	margin: 0px 0px 0px 0px;
	padding: 0px;
}

.product-box2 {
	height: auto;
	width: 442px;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}

.product-box3 {
	height: auto;
	width: 179px;
	margin: 0px 0px 0px 0px;
	padding: 0px;
}

.product-moji {
	height: auto;
	width: 442px;
	margin: 0px 0px 0px 0px;
	padding: 0px;
	display: block;
	font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Osaka, meiryo, "ＭＳ Ｐゴシック", "Lucida Grande", Arial, sans-serif;
	font-size: 12px;
	color: #323232;
	line-height: 140%;
	font-weight: normal;
	overflow: hidden;
}

.product-left {
	height: auto;
	width: 218px;
	margin: 0px;
	padding: 0px 6px 0px 0px;
	display: inline;
	float: left;
}

.product-right {
	height: auto;
	width: 218px;
	margin: 0px;
	padding: 0px;
	display: inline;
	float: right;
}


.Line-01 {
	height: 1px;
	width: 864px;
	margin: 0px auto 8px auto;
	padding: 0px;
	background: url(../images/siding/Line-01.gif) no-repeat;
	display: block;
}

.Line-02 {
	height: 1px;
	width: 900px;
	margin: 0px auto 16px auto;
	padding: 0px;
	background: url(../images/siding/Line-01.gif) no-repeat;
	display: block;
}

/*** [Ｈ５] タイトル ****/
/*** @group h5.nameTitle ****************************************************************************/

h5.nemeTitle_01 {
	padding: 0px;
	height: 19px;
	width: 309px;
	margin: 0px 0px 8px 0px;
	background: url(../images/siding/h5-nameTitle_01.gif) no-repeat;
	display: block;
}

h5.nemeTitle_02 {
	padding: 0px;
	height: 19px;
	width: 309px;
	margin: 0px 0px 8px 0px;
	background: url(../images/siding/h5-nameTitle_02.gif) no-repeat;
	display: block;
}

h5.nemeTitle_03 {
	padding: 0px;
	height: 19px;
	width: 309px;
	margin: 0px 0px 8px 0px;
	background: url(../images/siding/h5-nameTitle_03.gif) no-repeat;
	display: block;
}

h5.nemeTitle_04 {
	padding: 0px;
	height: 19px;
	width: 309px;
	margin: 0px 0px 8px 0px;
	background: url(../images/siding/h5-nameTitle_04.gif) no-repeat;
	display: block;
}

h5.nemeTitle_05 {
	padding: 0px;
	height: 19px;
	width: 309px;
	margin: 0px 0px 8px 0px;
	background: url(../images/siding/h5-nameTitle_05.gif) no-repeat;
	display: block;
}

/*** バナー ****/
/*** @group banner ****************************************************************************/

.banner-monitor a {
	height: 77px;
	width: 400px;
	margin: 0px auto 12px auto;
	padding: 0px;
	background: url(../images/siding/banner-monitor.jpg) no-repeat;
	display: block;
}

.banner-contact a {
	height: 50px;
	width: 500px;
	margin: 0px auto 24px auto;
	padding: 0px;
	background: url(../images/siding/banner-contact.gif) no-repeat;
	display: block;
}

.banner-contact a:hover {
	height: 50px;
	width: 500px;
	margin: 0px auto 24px auto;
	padding: 0px;
	background: url(../images/siding/banner-contact_over.gif) no-repeat;
	display: block;
}


/*** フッター内　コピーライト＆リンク各種 ****/
/*** @group footer ******************************************************************************/


#footer {
	width: 876px;
	height: auto;
	padding: 20px 0px 20px 0px;
	margin: 0px auto 0px auto;
	background-color: #212121;
}

#footer-box {
	width: 840px;
	height: auto;
	padding: 0px;
	margin: 0px auto 10px auto;
}

#footer-box ul {
	padding: 0px;
	margin: 0px;
	list-style-type: none;
}

#footer-box ul li {
	list-style-type: none;
	color: #FFFFFF;
	font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Osaka, meiryo, "ＭＳ Ｐゴシック", "Lucida Grande", Arial, sans-serif;
	display: inline;
	margin: 0;
	padding: 0;
	font-size: 12px;
	font-weight: normal;
}

#footer-box ul li a { 
	text-decoration: none;
	color: #FFFFFF;
}

#footer-box ul li a:hover {
	color: #FFFFFF;
	text-decoration: underline;
}

#footer-address {
	width: 840px;
	height: auto;
	margin: 0px auto 0px auto;
	padding: 0;
	font: 12px/normal "Lucida Grande", Arial, sans-serif;
	color: #FFFFFF;
}