@charset "UTF-8";
/* CSS Document */

-moz-outline-style: none;

/*-------------------------------------
　屋根材基本性能
--------------------------------------*/

/*--------ナビゲーション1段目---------*/

div#sub_content ul.navi_b{
	width: 770px;
	padding-right:-230px;
	float:left;
	margin-bottom:0px;
}

div#sub_content ul.navi_b li{
	float:left;
}

div#sub_content ul.navi_b li a{
	display:block;
	width: 110px;
	height: 34px;
	text-indent:-9999px;
	overflow:hidden;
}

div#sub_content ul.navi_b li a.navi_b_1{background: url(../images/base/navi_1.jpg) no-repeat;}
div#sub_content ul.navi_b li a.navi_b_2{background: url(../images/base/navi_2.jpg) no-repeat;}
div#sub_content ul.navi_b li a.navi_b_3{background: url(../images/base/navi_3.jpg) no-repeat;}
div#sub_content ul.navi_b li a.navi_b_4{background: url(../images/base/navi_4.jpg) no-repeat;}
div#sub_content ul.navi_b li a.navi_b_5{background: url(../images/base/navi_5.jpg) no-repeat;}
div#sub_content ul.navi_b li a.navi_b_6{background: url(../images/base/navi_6.jpg) no-repeat;}
div#sub_content ul.navi_b li a.navi_b_7{background: url(../images/base/navi_7.jpg) no-repeat;}

div#sub_content ul.navi_b li a.navi_b_1:hover{background: url(../images/base/navi_1_f2.jpg) no-repeat;}
div#sub_content ul.navi_b li a.navi_b_2:hover{background: url(../images/base/navi_2_f2.jpg) no-repeat;}
div#sub_content ul.navi_b li a.navi_b_3:hover{background: url(../images/base/navi_3_f2.jpg) no-repeat;}
div#sub_content ul.navi_b li a.navi_b_4:hover{background: url(../images/base/navi_4_f2.jpg) no-repeat;}
div#sub_content ul.navi_b li a.navi_b_5:hover{background: url(../images/base/navi_5_f2.jpg) no-repeat;}
div#sub_content ul.navi_b li a.navi_b_6:hover{background: url(../images/base/navi_6_f2.jpg) no-repeat;}
div#sub_content ul.navi_b li a.navi_b_7:hover{background: url(../images/base/navi_7_f2.jpg) no-repeat;}

div#sub_content ul.navi_b li a.navi_b_1_st{background: url(../images/base/navi_1_f2.jpg) no-repeat;}
div#sub_content ul.navi_b li a.navi_b_2_st{background: url(../images/base/navi_2_f2.jpg) no-repeat;}
div#sub_content ul.navi_b li a.navi_b_3_st{background: url(../images/base/navi_3_f2.jpg) no-repeat;}
div#sub_content ul.navi_b li a.navi_b_4_st{background: url(../images/base/navi_4_f2.jpg) no-repeat;}
div#sub_content ul.navi_b li a.navi_b_5_st{background: url(../images/base/navi_5_f2.jpg) no-repeat;}
div#sub_content ul.navi_b li a.navi_b_6_st{background: url(../images/base/navi_6_f2.jpg) no-repeat;}
div#sub_content ul.navi_b li a.navi_b_7_st{background: url(../images/base/navi_7_f2.jpg) no-repeat;}

/*--------ナビゲーション2段目---------*/

div#sub_content ul.navi_b2{
	width: 770px;
	padding-right:-230px;
	float:left;
	margin-bottom:15px;
}

div#sub_content ul.navi_b2 li{
	float:left;
}

div#sub_content ul.navi_b2 li a,
div#sub_content ul.navi_b2 li span{
	display:block;
	width: 110px;
	height: 34px;
	text-indent:-9999px;
	overflow:hidden;
}

div#sub_content ul.navi_b2 li a.navi_b_8{background: url(../images/base/navi_8.jpg) no-repeat;}
div#sub_content ul.navi_b2 li a.navi_b_9{background: url(../images/base/navi_9.jpg) no-repeat;}
div#sub_content ul.navi_b2 li a.navi_b_10{background: url(../images/base/navi_10.jpg) no-repeat;}
div#sub_content ul.navi_b2 li a.navi_b_11{background: url(../images/base/navi_11.jpg) no-repeat;}
div#sub_content ul.navi_b2 li a.navi_b_12{background: url(../images/base/navi_12.jpg) no-repeat;}
div#sub_content ul.navi_b2 li a.navi_b_13{background: url(../images/base/navi_13.jpg) no-repeat;}

div#sub_content ul.navi_b2 li a.navi_b_8:hover{background: url(../images/base/navi_8_f2.jpg) no-repeat;}
div#sub_content ul.navi_b2 li a.navi_b_9:hover{background: url(../images/base/navi_9_f2.jpg) no-repeat;}
div#sub_content ul.navi_b2 li a.navi_b_10:hover{background: url(../images/base/navi_10_f2.jpg) no-repeat;}
div#sub_content ul.navi_b2 li a.navi_b_11:hover{background: url(../images/base/navi_11_f2.jpg) no-repeat;}
div#sub_content ul.navi_b2 li a.navi_b_12:hover{background: url(../images/base/navi_12_f2.jpg) no-repeat;}
div#sub_content ul.navi_b2 li a.navi_b_13:hover{background: url(../images/base/navi_13_f2.jpg) no-repeat;}

div#sub_content ul.navi_b2 li a.navi_b_8_st{background: url(../images/base/navi_8_f2.jpg) no-repeat;}
div#sub_content ul.navi_b2 li a.navi_b_9_st{background: url(../images/base/navi_9_f2.jpg) no-repeat;}
div#sub_content ul.navi_b2 li a.navi_b_10_st{background: url(../images/base/navi_10_f2.jpg) no-repeat;}
div#sub_content ul.navi_b2 li a.navi_b_11_st{background: url(../images/base/navi_11_f2.jpg) no-repeat;}
div#sub_content ul.navi_b2 li a.navi_b_12_st{background: url(../images/base/navi_12_f2.jpg) no-repeat;}
div#sub_content ul.navi_b2 li a.navi_b_13_st{background: url(../images/base/navi_13_f2.jpg) no-repeat;}

div#sub_content ul.navi_b2 li span.navi_b_14{background: url(../images/base/navi_14.jpg) no-repeat;}



/*---------------共通----------------*/

#sub_content a img{ border: none;}
#sub_content h1.kihon{
	background: url(../images/feature/kihon/sttl_base.jpg) no-repeat left top;
	height: 58px;
}

div.sttl_in{
	margin: 0 0 10px 0;
}

div.sttl_in_box{
	margin: 0 0 20px 0;
}

div.roogaBox{
	width: 770px;
	line-height: 1.8em;
	text-justify: distribute;
	text-align: justify;
	margin-bottom: 35px;
}

div.roogaBox-movie{
	margin-bottom: 5px !important;
}

div.roogaBox2{
	width: 500px;
	margin-bottom: 20px;
	float: left;
}
div.roogaBox2 h3{
	margin: 0 0 15px 0;
}
div.roogaBox2 p{
	margin: 0 0 5px 0;
	padding: 0;
	line-height: 18px;
}
span.kankyoImg{
	width: 235px;
	margin: -40px 0 10px 0;
	float: left;
	display: block;
}

div.roogaBox_padding_s{
	width: 770px;
	line-height: 1.8em;
	text-justify: distribute;
	text-align: justify;
	margin-bottom: 20px;
}

div.roogaBox_bigtxt{
	font-size: 16px;
	padding-left: 10px;
}

.border_on{
	border:1px solid #f58220;
}

h3.sttl_lead{
	margin:20px 0px 15px;
}

/*----------地震に強い-----------*/

div#sttl_jishin_simg1{
	width: 168px;
	height: 62px;
	float: right;
	padding-left: 40px;
}

div#sttl_jishin_simg2{
	width: 296px;
	height: 162px;
	float: right;
	padding-left: 40px;
}

div#sttl_jishin_simg3{
	width: 347px;
	height: 127px;
	float: right;
	padding-left: 40px;
}

/*----------色あせしにくい-----------*/

div#sttl_iroai_simg1{
	width: 300px;
	height: 170px;
	float: right;
	padding-left: 40px;
}

/*----------環境にも気配りを-----------*/

div#sttl_kankyou_simg1{
	width: 235px;
	height: 200px;
	float: right;
	padding-left: 20px;
	margin: -30px 0 0 0;
}

/*----------耐風-----------*/

div#sttl_taifuu_simg1{
	width: 300px;
	height: 125px;
	float: right;
	padding-left: 20px;
}

/*----------防水-----------*/

div#sttl_bousui_simg1{
	width: 420px;
	height: 140px;
	float: right;
	padding-left: 20px;
}

div#sttl_bousui_simg2{
	width: 420px;
	height: 200px;
	float: right;
	padding-left: 20px;
}

.h3inbox h3{
	margin:10px 0 10px 10px;
	}

/*----------耐久-----------*/

div#sttl_taikyuu_simg1{
	width: 400px;
	height: 405px;
	float: right;
	/*padding-left: 20px;*/
}

div#sttl_taikyuu_simg1_1{
	padding-top: 75px;
}

div#sttl_taikyuu_simg2{
	width: 450px;
	height: 200px;
	float: right;
	padding-left: 20px;
}

div#sttl_dannetsu_simg1{
	width: 380px;
	height: 139px;
	float: right;
	padding-left: 20px;
}

div#sttl_taikyuu_simg4{
	margin-top: 15px;
}
.taikyuu_reg {
	bottom: 2px;
	font-size: 17px;
	display: inline-block;
	position: relative;
}

/*----------断熱-----------*/

a.btn_shanetsu_glassa{
	display:block;
	width:395px;
	height:49px;
	background: url(../images/base/dannetsu/btn_shanetsu_glassa.jpg) top no-repeat;
	text-indent:-9999px;
	margin:0px auto 55px;
}

a.btn_shanetsu_glassa:hover{
	background: url(../images/base/dannetsu/btn_shanetsu_glassa.jpg) bottom no-repeat;
}

/*--ムービー--*/

.movie_btn{
	margin-bottom:30px;
	position: relative;
}

.movie_btn a{
	display:block;
	cursor:pointer;
}
.movie_btn a:hover{
	text-decoration:none;
	filter: alpha(opacity=80);
	-moz-opacity:0.9;
	opacity:0.9;
}
.movie_btn .gallery_btn{
	position: absolute;
	left:387px;
	top:97px;
}






/* 20170526 リニューアル追記 */

#sub_content {
	font-size: 12px;
}

#sub_content a img:hover {
	-moz-transition:0.25s linear;
	-webkit-transition:0.25s linear;
	-o-transition:0.25s linear;
	transition:0.25s linear;
	
	filter:alpha(opacity=80);
	-moz-opacity: 0.8;
	opacity: 0.8;
}

#sub_content p {margin-bottom: 10px;}

.f_left {float: left;}

.f_right {float: right;}

.cf:after {
	visibility:hidden;
	height:0;
	display:block;
	font-size:0;
	content:" ";
	clear:both;
}

.movie_link_area {
	position: relative;
	margin-bottom: 20px;
}

.movie_link_area .movie_gallery_btn {
	position: absolute;
	left: 390px;
	bottom: 25px;
}

ul.roof_item_menu {
	margin: 0 -25px 20px 0;
}

ul.roof_item_menu li {
	float: left;
	width: 240px;
	margin: 0 25px 20px 0;
	position: relative;
}

ul.roof_item_menu li h4 {
	font-size: 130%;
}

ul.roof_item_menu li .more {
	position: absolute;
	right: 0;
	bottom: 0;
}




/* 20170526 リニューアル追記 */

.txt_area {
	font-size: 120%;
	line-height: 1.6;
}

#sub_content a img:hover {
	-moz-transition:0.25s linear;
	-webkit-transition:0.25s linear;
	-o-transition:0.25s linear;
	transition:0.25s linear;
	
	filter:alpha(opacity=80);
	-moz-opacity: 0.8;
	opacity: 0.8;
}

#sub_content p {margin-bottom: 10px;}

.f_left {float: left;}

.f_right {float: right;}

.cf:after {
	visibility:hidden;
	height:0;
	display:block;
	font-size:0;
	content:" ";
	clear:both;
}

.movie_link_area {
	position: relative;
	margin-bottom: 20px;
}

.movie_link_area .movie_gallery_btn {
	position: absolute;
	left: 390px;
	bottom: 25px;
}




/* 軽い屋根のメリット */

.jishin_main_area {
	background: url(../images/base/jishin/gensin_im.png) no-repeat 0 0;
	width: 770px;	
	height: 210px;
	text-indent:-9999px;
	position: relative;
	margin: 0 0 30px;
}

.jishin_main_area ul {
	position: absolute;
	right: 10px;
	bottom: 10px;
	text-indent:0;
}

.jishin_main_area ul:after {
	visibility:hidden;
	height:0;
	display:block;
	font-size:0;
	content:" ";
	clear:both;
}

.jishin_main_area ul li {
	float: left;
	margin-left: 5px;
}

h2.h2_jishin_top {
	margin-bottom: 10px;
}

.w240 {width: 240px;}

ul.jishin_btn {
	margin-top: 50px;
}

ul.jishin_btn li {
	margin-bottom: 5px;
}






/* 暮らしを心地よく */

.kurashi_main_area {
	background: url(../images/base/kurashi/kaiteki_im.png) no-repeat 0 0;
	width: 770px;	
	height: 210px;
	text-indent:-9999px;
	position: relative;
	margin: 0 0 30px;
}

h2.h2_kurashi_top {
	margin-bottom: 10px;
}

.kurashi_feature_image {
	background: url(../images/base/kurashi/kaiteki_zu_im.png) no-repeat 0 0;
	height: 407px;
	margin-bottom: 50px;
	position: relative;
}

.kurashi_feature_image ul {}

.kurashi_feature_image ul li.kaiteki_zu_im_btn_1 {
	position: absolute;
	top: 43px;
	left: 581px;
}

.kurashi_feature_image ul li.kaiteki_zu_im_btn_2 {
	position: absolute;
	top: 148px;
	left: 578px;
}

.kurashi_feature_image ul li.kaiteki_zu_im_btn_3 {
	position: absolute;
	top: 164px;
	left: 0;
}

ul.kurashi_feature {
	margin: 0 -22px 0 0;
}

ul.kurashi_feature li {
	float: left;
	width: 242px;
	margin: 0 22px 0 0
}

ul.kurashi_feature li h3 {
	margin-bottom: 5px;
}


/* 選べるデザイン */

.design_main_area {
	background: url(../images/base/design/jiyuu_im.png) no-repeat 0 0;
	width: 770px;	
	height: 210px;
	text-indent:-9999px;
	position: relative;
	margin: 0 0 30px;
}

h2.h2_design_top {
	margin-bottom: 10px;
	font-size: 130%;
}


.h3_design_top_area {
	position: relative;
	margin-bottom: 20px;
}

.h3_design_top_area h3:before {
	content:"";
	position: absolute;
	right: 160px;
	bottom: 0;
	height:2px;
	width: 400px;
	background-color: #004097;
	display:block;
}

.h3_design_top_area h3.h3_rooga:before {
	bottom: 7px;
	width: 442px;
	background-color: #000;
}

.h3_design_top_area h3.h3_grandnext:before {
	bottom: 2px;
	width: 400px;
	background-color: #cc9900;
}

.h3_design_top_area h3.smt_metal:before {
	bottom: 2px;
	width: 350px;
	background-color: #0096e0;
}

.h3_design_top_area ul {
	position: absolute;
	right: 0;
	top: 0;
}

.h3_design_top_area ul li {
	float: left;
	margin: 0 0 0 10px;
}

h3.h3_design_top {
	margin-bottom: 20px;
}