@charset "Shift_JIS";

/* ///////////////////////////////////////////////
【マンション・個人邸リフォーム工事】
title: reform.css
paths: css/reform.css
/////////////////////////////////////////////// */


/* -----------------------------------------------
Table Of Contents

・グローバルナビゲーション
・ページタイトル
・住まいのリフォームをお考えの方へ
・リフォーム工事 　before　after
・水廻り商品＆住宅金融支援機構・高齢者向け返済特例制度
----------------------------------------------- */



/* -----------------------------------------------

グローバルナビゲーション

----------------------------------------------- */
div#navG ul li.navGReform a {
width: 174px;
background: url(../img/cmn/nav_g.jpg) -348px -48px no-repeat;
}



/* -----------------------------------------------

ページタイトル

----------------------------------------------- */
div#pageTtl h2 {
background: url(../img/reform/pagettl.jpg) no-repeat;
}



/* -----------------------------------------------

住まいのリフォームをお考えの方へ

----------------------------------------------- */
div.housing {
width: 630px;
margin-bottom: 30px;
}

div.housing h2 {
width: 630px;
height: 38px;
margin-bottom: 15px;
background: url(../img/reform/housing_ttl_a.jpg) no-repeat;
}

div.housing dl.headCap {
width: 610px;
margin: 0 10px 20px;
}
div.housing dl.headCap dt {
width: 610px;
height: 29px;
margin-bottom: 10px;
background: url(../img/reform/housing_txt_a.gif) no-repeat;
}


/*施工時期が分かれば、大切な家が長持ちします！*/
div.housing div.period {
width: 610px;
margin: 0 10px 30px;
}
div.housing div.period h3 {
width: 610px;
height: 31px;
margin-bottom: 15px;
background: url(../img/reform/housing_ttl_b_01.jpg) no-repeat;
}

div.housing div.check {
width: 576px;
margin-bottom: 15px;
padding: 3px 15px 10px;
border: #dfdfdf solid 2px;
}
div.housing div.check dl dt {
width: 192px;
height: 37px;
margin-bottom: 5px;
}
div.housing div.check dl dt.ttlA {
background: url(../img/reform/housing_ttl_c_01.gif) no-repeat;
}
div.housing div.check dl dt.ttlB {
background: url(../img/reform/housing_ttl_c_02.gif) no-repeat;
}
div.housing div.check dl dd.gaisou {
position: relative;
}
div.housing div.check dl dd.gaisou ul li {
position: absolute;
left: 420px;
width: 138px;
height: 94px;
}
div.housing div.check dl dd.gaisou ul li.phtA {
top: 0;
}
div.housing div.check dl dd.gaisou ul li.phtB {
top: 104px;
}
div.housing div.check dl dd.gaisou ul li.phtC {
top: 208px;
}
div.housing div.check dl dd.gaisou ul li.phtD {
top: 312px;
}
div.housing div.check dl dd p {
margin-bottom: 5px;
padding-bottom: 5px;
border-bottom: 1px solid #dee7f6;
}
div.housing div.check p.txtA {
width: 464px;
height: 58px;
margin: 0 auto;
background: url(../img/reform/housing_txt_b.gif) no-repeat;
}


/*リフォーム工事施工例*/
div.housing div.cases {
width: 610px;
margin: 0 10px 30px;
}
div.housing div.cases h3 {
width: 610px;
height: 31px;
margin-bottom: 15px;
background: url(../img/reform/housing_ttl_b_02.jpg) no-repeat;
}
div.housing div.cases dl dt {
width: 165px;
height: 22px;
margin-bottom: 5px;
}
div.housing div.cases dl dt.ttlA {
background: url(../img/reform/housing_ttl_e_01.gif) no-repeat;
}
div.housing div.cases dl dt.ttlB {
background: url(../img/reform/housing_ttl_e_02.gif) no-repeat;
}
div.housing div.cases ul li {
float: left;
width: 142px;
margin-right: 14px;
}



/* -----------------------------------------------

リフォーム工事 　before　after

----------------------------------------------- */
div.example {
width: 630px;
margin-bottom: 30px;
}

div.example h2 {
width: 630px;
height: 38px;
margin-bottom: 15px;
background: url(../img/reform/example_ttl_a.jpg) no-repeat;
}

div.example div.innerBox {
width: 610px;
margin: 0 10px 20px;
}



/* -----------------------------------------------

水廻り商品＆住宅金融支援機構・高齢者向け返済特例制度

----------------------------------------------- */
div.earthquake {
width: 630px;
}

/*水廻り商品*/
div.earthquake div.price {
width: 610px;
margin: 0 10px 20px;
}
div.earthquake div.price h3 {
width: 610px;
height: 30px;
margin-bottom: 15px;
background: url(../img/reform/earthquake_ttl_b_04.jpg) no-repeat;
}
div.earthquake div.price ul li {
float: left;
width: 142px;
margin-right: 14px;
}



/*住宅金融支援機構・高齢者向け返済特例制度*/
div.earthquake div.finance {
width: 610px;
margin: 0 auto;
}
div.earthquake div.finance h3 {
width: 610px;
height: 30px;
margin-bottom: 15px;
background: url(../img/reform/earthquake_ttl_b_02.jpg) no-repeat;
}
div.earthquake div.finance p.phtA {
float: right;
width: auto;
height: auto;
margin: 0 0 1.0em 1.0em;
line-height: 0;
}
div.earthquake div.finance p.txtA {
margin-bottom: 10px;
font-size: 115%;
font-weight: bold;
color: #ff66cc;
}
div.earthquake div.finance p.txtB {
margin-bottom: 20px;
font-size: 115%;
font-weight: bold;
color: #016bcf;
}
div.earthquake div.finance dl dt {
margin-bottom: 5px;
padding-bottom: 3px;
border-bottom: 1px dotted #0262bc;
font-weight: bold;
font-size: 110%;
color: #0262bc;
}
div.earthquake div.finance dl dd {
margin-bottom: 20px;
}
div.earthquake div.finance table.tableA {
width: 610px;
margin-bottom: 15px;
border-collapse: separate;
border-spacing: 0;
border-top: #dfdfdf solid 1px;
border-left: #dfdfdf solid 1px;
}
div.earthquake div.finance table.tableA th,
div.earthquake div.finance table.tableA td {
padding: 7px 10px 7px;
border-top: #fff solid 1px;
border-right: #dfdfdf solid 1px;
border-bottom: #dfdfdf solid 1px;
border-left: #fff solid 1px;
}
div.earthquake div.finance table.tableA th {
width: 8.0em;
background: #eef9ff;
vertical-align: top;
}
div.earthquake div.finance table.tableB {
width: 610px;
margin-bottom: 5px;
border-collapse: separate;
border-spacing: 0;
border-top: #dfdfdf solid 1px;
border-left: #dfdfdf solid 1px;
}
div.earthquake div.finance table.tableB th,
div.earthquake div.finance table.tableB td {
padding: 5px 10px 5px;
border-top: #fff solid 1px;
border-right: #dfdfdf solid 1px;
border-bottom: #dfdfdf solid 1px;
border-left: #fff solid 1px;
}
div.earthquake div.finance table.tableB th {
background: #e0ffba;
vertical-align: top;
}