@charset "utf-8";
/* CSS top-page */

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

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

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

#wrapper {
	width: 900px;
	height: 100%;
	min-height: 100%;
	margin: 0px auto 0px auto;
}

.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: 90px;
	width: 900px;
	margin: 0px auto 7px auto;
}

#head-box1 {
	padding: 0px;
	height: auto;
	width: 900px;
	margin: 0px auto 0px auto;
}

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

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

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

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

.head-nav ul {
	height: 36px;
	width: 595px;
	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;
	margin: 0px;
	height: 36px;
	text-decoration: none;
	float: left;
	display: block;
	background: url(../images/yane/headnav.gif) no-repeat;
	border: 0px;
}

.head-nav ul li.headnav-01 a {
	width: 136px;
	background-position: left top;
}

.head-nav ul li.headnav-01 a:hover {
	width: 136px;
	background-position: left -36px;
}

.head-nav ul li.headnav-02 a {
	width: 117px;
	background-position: -136px top;
}

.head-nav ul li.headnav-02 a:hover {
	width: 117px;
	background-position: -136px -36px;
}

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

.head-nav ul li.headnav-04 a {
	width: 199px;
	background-position: -395px top;
}

.head-nav ul li.headnav-04 a:hover {
	width: 199px;
	background-position: -395px -36px;
}

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

/* [文字] start */
.head-moji {
	padding: 0px;
	margin: 0px 0px 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 sitewise ****************************************************************************/

#sitewise {
	padding: 0px;
	height: 284px;
	width: 900px;
	margin: 0px auto 16px auto;
	overflow: hidden;
}

#sitewise-left {
	padding: 0px;
	height: auto;
	width: 700px;
	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: 284px;
   width: 700px;
   margin: 0px auto 0px auto;
   padding: 0px;
   background: url(../images/yane/bg-sitewise.gif) no-repeat;
}

#images {
   margin: 5px auto 0px auto;
   padding: 0px 0px 0px 0px;
   height: 214px;
   width: 690px;
}

#image {
   position: relative;
   margin: 5px auto 0px auto;
   padding: 0px;
   height: 214px;
   width: 690px;
   background: #FFF url(../images/yane/slideshow/loading.gif) center center no-repeat;
}

#image img {
   position: absolute;
}

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

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

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

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

.imgnav {
   position: absolute;
   height: 47px;
   width: 20%;
   z-index: 100;
   height: 47px;
   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);
}

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

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

h3.categoryTitle_02 {
	padding: 0px;
	height: 34px;
	width: 900px;
	margin: 0px 0px 6px 0px;
	background: url(../images/yane/h3-topics.gif) no-repeat;
}

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

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

h3.categoryTitle_05 {
	padding: 0px;
	height: 34px;
	width: 900px;
	margin: 0px 0px 6px 0px;
	background: url(../images/yane/h3-product.gif) no-repeat;
}

/*** [Link] おすすめ屋根材 ****/
/*** @group pickup ****************************************************************************/

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

#pickup-bg {
	margin: 0px auto 0px auto;
	padding: 0px;
	height: 252px;
	width: 192px;
	background: url(../images/yane/bg-pickup.gif) no-repeat;
	display: block;
}

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

div.sidenav {
	margin: 0px 0px 5px 0px;
	padding: 0px;
	height: 199px;
	width: 207px;
}

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;
	margin: 5px 0px 0px 4px;
	height: 55px;
	width: 184px;
}

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

div.sidenav ul li.pickupnav-001 a {
	background: url(../images/yane/pickupnav-001.jpg) no-repeat;
}

div.sidenav ul li.pickupnav-001 a:hover {
	background: url(../images/yane/pickupnav-001_over.jpg) no-repeat;
}

div.sidenav ul li.pickupnav-002 a {
	background: url(../images/yane/pickupnav-002.jpg) no-repeat;
}

div.sidenav ul li.pickupnav-002 a:hover {
	background: url(../images/yane/pickupnav-002_over.jpg) no-repeat;
}

div.sidenav ul li.pickupnav-003 a {
	background: url(../images/yane/pickupnav-003.jpg) no-repeat;
}

div.sidenav ul li.pickupnav-003 a:hover {
	background: url(../images/yane/pickupnav-003_over.jpg) no-repeat;
}

div.sidenav ul li.pickupnav-004 a {
	background: url(../images/yane/pickupnav-004.jpg) no-repeat;
}

div.sidenav ul li.pickupnav-004 a:hover {
	background: url(../images/yane/pickupnav-004_over.jpg) no-repeat;
}

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

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

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

#main {
	padding: 0px;
	height: auto;
	width: 900px;
	margin: 0px auto 24px auto;
	overflow: hidden;
	display: block;
}

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

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

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

.top-moji01 {
	height: auto;
	width: 880px;
	margin: 0px auto 24px 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 {
	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: 13px;
	color: #323232;
	line-height: 140%;
}

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

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

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

h4.featureTitle_01 {
	padding: 0px;
	height: 16px;
	width: 237px;
	margin: 0px 0px 3px 0px;
	background: url(../images/yane/h4-feature_01.gif) no-repeat;
}

h4.featureTitle_02 {
	padding: 0px;
	height: 16px;
	width: 237px;
	margin: 0px 0px 3px 0px;
	background: url(../images/yane/h4-feature_02.gif) no-repeat;
}

h4.featureTitle_03 {
	padding: 0px;
	height: 16px;
	width: 237px;
	margin: 0px 0px 3px 0px;
	background: url(../images/yane/h4-feature_03.gif) no-repeat;
}

h4.featureTitle_04 {
	padding: 0px;
	height: 16px;
	width: 237px;
	margin: 0px 0px 3px 0px;
	background: url(../images/yane/h4-feature_04.gif) no-repeat;
}

h4.productTitle_01 {
	padding: 0px;
	height: 20px;
	width: 200px;
	margin: 0px 0px 10px 6px;
	background: url(../images/yane/h4-product_01.gif) no-repeat;
}

h4.productTitle_02 {
	padding: 0px;
	height: 20px;
	width: 200px;
	margin: 0px 0px 10px 6px;
	background: url(../images/yane/h4-product_02.gif) no-repeat;
}

h4.productTitle_03 {
	padding: 0px;
	height: 20px;
	width: 200px;
	margin: 0px 0px 10px 6px;
	background: url(../images/yane/h4-product_03.gif) no-repeat;
}

h4.productTitle_04 {
	padding: 0px;
	height: 20px;
	width: 200px;
	margin: 0px 0px 10px 6px;
	background: url(../images/yane/h4-product_04.gif) no-repeat;
}

/*** 写真 ****/
/*** @group illust ****************************************************************************/

.illust-01 {
	height: 138px;
	width: 428px;
	margin: 0px auto 16px auto;
	padding: 0px;
	background: url(../images/yane/photo-01.jpg) no-repeat;
	display: block;
}

.illust-02 {
	height: 101px;
	width: 428px;
	margin: 0px auto 16px auto;
	padding: 0px;
	background: url(../images/yane/photo-02.jpg) no-repeat;
	display: block;
}

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

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

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

.feature-box2 {
	height: auto;
	width: 370px;
	margin: 0px 0px 0px 0px;
	padding: 0px;
	display: block;
}

.feature-Line {
	height: 1px;
	width: 440px;
	margin: 0px auto 12px auto;
	padding: 0px;
	background: url(../images/yane/Line-01.gif) no-repeat;
	display: block;
}

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

.product-waku {
	height: auto;
	width: 888px;
	margin: 0px 0px 5px 6px;
	padding: 0px;
	display: block;
	overflow: hidden;
}

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

.product-center {
	height: auto;
	width: 453px;
	margin: 0px 0px 0px 12px;
	padding: 0px;
	display: inline;
	float: left;
}

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

.product-photo {
	height: 119px;
	width: 230px;
	margin: 0px 0px 0px 0px;
	padding: 0px;
}

.product-color {
	height: 119px;
	width: 181px;
	margin: 0px 0px 0px 0px;
	padding: 0px;
}

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

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

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

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

.banner-contact a {
	height: 50px;
	width: 500px;
	margin: 0px auto 24px auto;
	padding: 0px;
	background: url(../images/yane/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/yane/banner-contact_over.gif) no-repeat;
	display: block;
}


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


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

#footer-box {
	width: 860px;
	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: 860px;
	height: auto;
	margin: 0px auto 0px auto;
	padding: 0;
	font: 12px/normal "Lucida Grande", Arial, sans-serif;
	color: #FFFFFF;
}