@charset "utf-8";

/* PC用CSS */
@media screen and (min-width: 561px) {

/* 概算工事費用を確認する */
#wh_price_plan {
  width: 180px;
  height: 343px;
  /*  padding: 314px 0 0 7px;*/
  background: url(/waterheater/img/wh_price_plan_tax.gif?220207) no-repeat right bottom;
  position: relative;
}
.price_plan_btn {
  position: absolute;
  width: 100%;
  bottom: 0.55em;
}
.price_plan_btn img {
  margin: 0 auto;
  display: block;
}
.price_plan_btn img:hover{
  opacity: 0.8;
}
/* ■給湯器：waterheater */
#s-wh-foundation a {
display : block;
width : 180px;
height : 55px;
margin-right: auto;
margin-left: auto;
background-repeat : no-repeat;
background-position : center center;
}
#s-wh-foundation a:link {background-image : url(/waterheater/img/s_wh_foundation_btn.gif) ;}
#s-wh-foundation a:hover {background-image : url(/waterheater/img/s_wh_foundation_btn_o.gif) ;}
#s-wh-foundation a:link img {visibility : visible ; border-style : none ;}
#s-wh-foundation a:hover img {visibility : hidden ; border-style : none ;}
#s-wh-ecojozu a {
display : block;
width : 180px;
height : 55px;
margin-right: auto;
margin-left: auto;
background-repeat : no-repeat;
background-position : center center;
}
#s-wh-ecojozu a:link {background-image : url(/waterheater/img/s_wh_ecojozu_btn.gif) ;}
#s-wh-ecojozu a:hover {background-image : url(/waterheater/img/s_wh_ecojozu_btn_o.gif) ;}
#s-wh-ecojozu a:link img {visibility : visible ; border-style : none ;}
#s-wh-ecojozu a:hover img {visibility : hidden ; border-style : none ;}
#s-wh-oilsearch a {
display : block;
width : 180px;
height : 55px;
margin-right: auto;
margin-left: auto;
background-repeat : no-repeat;
background-position : center center;
}
#s-wh-oilsearch a:link {background-image : url(/waterheater/img/s_wh_oilsearch_btn.gif) ;}
#s-wh-oilsearch a:hover {background-image : url(/waterheater/img/s_wh_oilsearch_btn_o.gif) ;}
#s-wh-oilsearch a:link img {visibility : visible ; border-style : none ;}
#s-wh-oilsearch a:hover img {visibility : hidden ; border-style : none ;}

/* 給湯器専用サイドナビa */
div.wh-box {
    border-left: 1px solid #c0c0c0;
    border-right: 1px solid #c0c0c0;
    padding: 0 3px;
}

div#w-baner {
    background-color: #f1f1f1;
}

div#w-baner h5 {
    border-left: 1px solid #dfdfdf;
    border-right: 1px solid #dfdfdf;
    background-color: #535353;
    color: #ffffff;
    padding: 6px;
}

div#w-baner p {
    border-left: 1px solid #dfdfdf;
    border-right: 1px solid #dfdfdf;
}

div#w-baner p a {
    display: block;
    font-weight: bold;
    padding: 8px;
    color: #333333;
    background-color: #ffffff;
    background-image: linear-gradient(to right, #ffffff 50%, #ffe9d2 50%);
    background-position: 0 0;
    background-size: 200% auto;
    transition: 0.3s;
}
div#w-baner p a:hover {
    background-position: -100% 0;
    color: #333333;
}
}

/* スマホ用CSS */
@media screen and (max-width: 560px) {
  /* 5秒参考見積もり */
  a.s-cost-5 {
    background: url(/waterheater/img/side_a_cost_5.gif);
    background-repeat: no-repeat;
    background-size: cover;
    width: 34.5vw;
    height: 26.3vw;
    display: inline-block;
    float: left;
    text-indent: -9999px;
    text-decoration: none;
    padding: 0 0 0 1px;
  }
  a.s-cost-5:hover {background-position:left bottom;}

  /* 無料見積もり */
  a.s-cost-f {
    background: url(/waterheater/img/side_a_cost_f.gif);
    background-repeat: no-repeat;
    background-size: cover;
    width: 34.5vw;
    height: 26.3vw;
    display: inline-block;
    text-indent: -9999px;
    text-decoration: none;
    clear: both;
  }
  a.s-cost-f:hover {background-position:left bottom;}
}