@charset "utf-8";

/* =========================================================

全ページ共通のスタイルを定義

01. basic layout
02. Header
03. selectbox
04. graph
05.notes
06.area_select
07.notice

========================================================= */

/* 01.basic layout
--------------------------------------------------------- */
body {
	/*background:url(../img/common/bg_body.jpg);*/
	/*background-repeat:repeat;*/
	/*background-position:0 0;*/
	margin:0;
	padding:0;
	text-align: center;
	height:100%;
	width:100%;
	background-color:#9AC739;
}

#wrapper {
    /*overflow:auto;*/
    /*height:768px;*/
	padding:0;
	margin:0 auto;
    text-align: left;
   /* width:1016px;*/
	width: 100%;
}

#main_wrap {
	margin: 0 auto;	
	width: 100%;
   background: #9AC739; 
}

#main { 
   background-position: 0 0; 
   background-repeat: repeat-y; 
   height: auto; 
   margin:0 auto; 
   padding: 0 0;
   width:1016px; 
   }

   
div#contents input[type="radio"] {
	margin-right: 5px;
}

div#contents table td label {
	vertical-align: 0.1em;
}


#footer {
	margin: 0 0 0;
	padding: 20px 0;
	background: #000;
}

#footer .footer_sns_icons {
	display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 50px;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin: 0 auto;
    padding: 0;
    width: 200px;
}

#footer .footer_sns_icons li {
    height: 50px;
    width: 50px;
}

#footer .footer_sns_icons li a {
    background: #3d3d3d;
    border-radius: 100%;
    display: block;
    height: 100%;
    position: relative;
    width: 100%;
}

#footer .footer_sns_icons li a {
    transition: opacity .2s ease;
}

#footer .footer_sns_icons li a:hover {
	opacity: 0.7;
}

#footer .footer_sns_icons li a img {
	top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    position: absolute;
}

#footer .footer_contents {
	display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
	
}

@font-face{font-family:gidole;font-style:normal;font-weight:400;src:url(../fonts/Gidole.woff) format("woff"),url(../fonts/Gidole.ttf) format("truetype")}
#footer .footer_contents .copyright {
	color: #FFF;
	padding: 17px 0 0 20px;
	font-family:gidole,"ヒラギノ角ゴ Pro",Hiragino Kaku Gothic Pro,"游ゴシック",YuGothic,"メイリオ",Meiryo,sans-serif;
}

#footer .footer_contents .footer_rinnai_logo {
	padding: 0 20px 0 0;
}

#footer .footer_contents .footer_rinnai_logo img {
	height: 30px;
}


/* 02.header
--------------------------------------------------------- */
#header { 
   background: #000; 
   background-position: 0 0; 
   background-repeat:no-repeat; 
   height:50px; 
   margin:0 auto;
   padding:0; 
   width:100%; 
   }

#header #logo_area { float:left; margin-left:26px; }
#header #logo_area li { float:left; }
#header #logo_area li#logo { margin-top:19px; margin-right:88px;  }
#header #logo_area li#ecoone { margin-top:10px; margin-right:16px;  } 
#header #h1_title { float:left;  height:24px; width:388px; }
#header #h1_title h1 { height:24px; line-height:24px; padding-top:12px ; }
#header #h1_title h1 img { vertical-align:baseline; }

#header #link_area { float:right; padding-top:13px; margin-right:14px; width:210px; }
#header #link_area li { float:left; }
#header #link_area li.print { margin-right:6px; }

/* 03.selectbox
--------------------------------------------------------- */
#selectbox { margin:0 auto; padding:0 5px; width:1006px; }

#selectbox_head { background:url(../img/common/bg_selectbox_head.jpg) bottom left no-repeat; height:10px; width:1006px; background-size:contain;  }
#selectbox_cont { background:url(../img/common/bg_selectbox.jpg) 0 0 repeat-y; margin:0 auto; width:1006px; background-size:contain; }
#selectbox_bottom{ background:url(../img/common/bg_selectbox_bottom.jpg) 0 0 no-repeat; height:12px; width:1006px; background-size:contain; }

#selectbox #contents { height:auto; margin:0 auto; padding:0; width:1006px; }
#selectbox #contents ul { margin:0; padding:0; }
#selectbox #contents ul li { background:#fff; line-height:1; float:left; }
#selectbox #contents ul li.selectarea { border:1px solid #3f9f3f; margin-left:2px;  }
#selectbox #contents ul li.price { border:1px solid #3f9f3f; margin-left:2px; }
#selectbox #contents ul li.price span { padding-right:10px; }
#selectbox #contents ul li.price span.num,
#selectbox #contents ul li.total span.num { color:#1A1A1A; font-family:'Century Gothic' , 'Dotum' , arial ; font-weight:700; font-size:167%; }

#selectbox #contents ul li.selectarea { width:452px; }
#selectbox #contents ul li.one { width:222px;}
#selectbox #contents ul li.two { width:200px; }
#selectbox #contents ul li.title { border:1px solid #3f9f3f; height:13px; margin-left:2px; padding:36px 0 36px; text-align:center; width:200px; }

/*---条件---*/
#selectbox #contents ul#condition { margin:0 auto; padding:0 10px; width:986px; height:87px; }
#selectbox #contents ul#condition li.selectarea { height:85px; }
#selectbox #contents ul#condition li.one { height:20px; padding:33px 0 32px; text-align:center;  }
#selectbox #contents ul#condition li.one .select { margin:0 auto; padding:0; width:193px; }
#selectbox #contents ul#condition li table { height:82px; margin:3px 0 2px 10px; width:410px; }
/*#selectbox #contents ul#condition li table { height:82px; margin:3px 0 2px 10px; width:373px; }*/
#selectbox #contents ul#condition li table tr th { color:#036; font-weight:700; height:18px; margin:0; padding: 0 0 0 5px; width:110px; }
/*#selectbox #contents ul#condition li table tr th { color:#036; font-weight:700; height:18px; margin:0; padding: 0 0 0 5px; width:90px; }*/
#selectbox #contents ul#condition li table tr th div { margin-left:16px; }																																				
#selectbox #contents ul#condition li table tr td  { margin:0; padding:0; height:18px;  }
#selectbox #contents ul#condition li table tr td input { width:80px; }

/*---給湯---*/
#selectbox #contents ul#kyuutou { margin:2px auto 0; padding:0 10px; width:986px; height:32px; }
#selectbox #contents ul#kyuutou li.selectarea  { width:452px; }
#selectbox #contents ul#kyuutou li.price { height:24px; padding:4px 0 2px; text-align:right; }
#selectbox #contents ul#kyuutou li. two { margin-right:5px; }
#selectbox #contents ul#kyuutou li table { height:23px; margin:4px 0 3px 10px; width:373px; }
#selectbox #contents ul#kyuutou li table th { color:#036; font-weight:700; height:22px; padding-left:5px; width:70px; }
#selectbox #contents ul#kyuutou li table td { height:23px; text-align:left; }
#selectbox #contents ul#kyuutou li table tr td label { margin-right:13px; }

/*---床暖房---*/
#selectbox #contents ul#floor { margin:2px auto 0; padding:0 10px; width:986px;  height:146px; }
#selectbox #contents ul#floor li.selectarea  { padding-right:10px; width:442px; }
#selectbox #contents ul#floor li table { height:141px; margin:2px 0 2px 10px; width:436px; }
#selectbox #contents ul#floor li table th { color:#036; font-weight:700; height:28px; padding-left:5px; width:70px; }
#selectbox #contents ul#floor li table th.w90 { width:90px !important; }
#selectbox #contents ul#floor li table td { height:28px; text-align:left; }
#selectbox #contents ul#floor li table td.dotline { background:url(../img/common/bg_dotline.gif) bottom left repeat-x; }
#selectbox #contents ul#floor li table tr td label { margin-right:19px; }
#selectbox #contents ul#floor li.price { height:13px; padding:66px 0 65px; text-align:right; }
#selectbox #contents ul#floor li table td span { padding-left:10px; }
#selectbox #contents ul#floor li table tr td input.w40 { width:40px; }

/*---浴室暖房---*/
#selectbox #contents ul#bathroom { margin:2px auto 0; padding:0 10px; width:986px; height:32px; }
#selectbox #contents ul#bathroom li.selectarea  { width:452px; }
#selectbox #contents ul#bathroom li.price { height:24px; padding:4px 0 2px; text-align:right; }
#selectbox #contents ul#bathroom li table { height:24px; margin:4px 0 2px 10px; width:373px;  }
#selectbox #contents ul#bathroom li table th { color:#036; font-weight:700; height:22px; padding-left:5px; width:70px; }
#selectbox #contents ul#bathroom li table td { height:23px; text-align:left; }
#selectbox #contents ul#bathroom li table tr td label { margin-right:15px; }

/*--  結果 --*/
#selectbox #contents #result { margin:2px auto 0; padding:0 4px 0 13px; width:986px; margin-top:3px; height:42px; }
#selectbox #contents #result li.btn { cursor:pointer; margin-top:6px; }
#selectbox #contents #result li#total { background:url(../img/common/bg_total.png) right top no-repeat; height:42px; float:right; padding:0; width:653px; }
#selectbox #contents #result li#total #total_head { background:none; border:none; height:42px; padding:0; float:left; width:220px; }
#selectbox #contents #result li#total ol { float:right; height:32px; margin-right:5px; padding:5px 0; width:427px; }
#selectbox #contents #result li#total ol li { background:#fff; border:2px solid #f60;height:20px; padding:5px 0 ; text-align:right; }
#selectbox #contents #result li#total ol li.one { float:left; margin-right:1px; width:220px; }
#selectbox #contents #result li#total .two { float:left; width:198px; }
#selectbox #contents #result li#total span { padding-right:6px; }

/* 04.graph
--------------------------------------------------------- */
#graph { clear:both; margin:0 auto; padding:0 5px; width:1006px; }
#graph_cont { margin:0; width:1006px; }
#graph  h2 { background:url(../img/common/bg_title_h2.jpg) 0 0 no-repeat; color:#333; font-size:116%; height:23px; padding-top:7px; padding-left:22px ;}

#ten_years { float:left;  position:relative; width:503px;  }
#ten_years .content { background:url(../img/common/graph/bg_graph_ten_years.jpg) 0 0 no-repeat; height:193px;  width:503px;  }
#ten_years img { position:absolute; top:30px; left:4px; }
#ten_years img.loading { position:absolute; top:70px; left:234px; }
#ten_years img.text { position:absolute; top:150px; left:204px; }

#years { float:left; position:relative; width:503px; }
#years .content { background:url(../img/common/graph/bg_graph_years.jpg) 0 0 no-repeat; height:193px;  width:503px; }
#years img { position:absolute; top:30px; left:4px; }
#years img.loading { position:absolute; top:70px; left:234px; }
#years img.text { position:absolute; top:150px; left:204px; }

/* 05.noets
--------------------------------------------------------- */
#notes { line-height:1; margin:0 auto; text-align:center; width:1006px; }
#notes p { display:inline; text-align:left; line-height:1; }

/* 06 .area_select
--------------------------------------------------------- */
#area_select { background:url(../img/area/bg_area_select.gif) 0 0 no-repeat; height:409px; margin:0 auto 0 !important; padding:24px 27px; width:823px; }
#area_select p { margin-top:10px; }
#area_select dl { margin:7px 5px 0; height:37px; width:820px; }
#area_select dl#tohoku { margin-top:12px; }
#area_select dl dt { float:left; margin-right:17px; padding-top:1px; width:92px; }
#area_select dl dd { background:url(../img/common/bg_dotline.gif) left bottom repeat-x; float:left; width:704px; }
#area_select dl dd ol { float:left; padding-bottom:7px; width:704px; }
#area_select dl dd ol li { float:left; margin-right:8px; }
#area_select dl dd ol li label { float:left; width:80px;}

#select_simulate { margin:16px auto 0; padding:0 auto; text-align:center; height:89px; width:877px; }

#gas_select { background:url(../img/area/bg_gas_select.gif) 0 0 no-repeat; float:left;  height:89px; margin:0; padding:0; width:561px; }
#gas_select ul { height:37px; padding-top:27px; padding-right: 0; padding-bottom: 26px; padding-left:252px; width:561px; }
#gas_select ul li { float:left; margin-right:13px; width:135px; }
#gas_select ul li.last { margin-right:0; }

#simulate_start { background:url(../img/area/bg_simulate.gif) 0 0 no-repeat; float:left; margin:0 0 0 15px; height:89px; width:301px; }
#simulate_start p { padding:15px 21px 16px; height:58px; width:259px; }


/* 07 .notice
--------------------------------------------------------- */
#notice dl { background:#fff;  border:10px solid #dfdfdf; margin:0 auto; padding:20px 30px 17px; width:800px; }
#notice dl dt { background:url(../img/common/bg_arrow.png ) 2px 50%  no-repeat;  font-weight:700; line-height:1.3; padding:3px 0 3px 18px; text-align:left; }
#notice dl dd { line-height:1; text-align:left; margin-top:3px; }
#notice dl dd ul li { background:url(../img/common/bg_circle.png ) 0 50%  no-repeat; line-height:1.6; padding-left:18px; }