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

.headerAreaB{
background: url("/wp-content/post-img/lp-wh-2023/k0006-header-pc.jpg");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
width: 100%;
height: 0;
padding-top: 61.78571428571429%;
}

.whPriceList{
border-top: #000 solid 1px;
border-left: #000 solid 1px;
}
.whPriceList th,.whPriceList td{
border-bottom: #000 solid 1px;
border-right: #000 solid 1px;
font-size: 1.4rem;
}
.taxColor{color: blue; font-size: 1.4rem; font-weight: bold;}
.whPriceList th,.whPriceList td{padding: 0 0.5em; text-align: center; line-height: 1.5em; vertical-align: middle;}
.whPriceList tr:nth-child(odd){background-color: #eee;}


.tableWrap{
overflow: scroll;
height: 75vh;
}

.whPriceList th{
padding: 0.5em 0;
background-color: #eee;
position: sticky;
top: 0;
}

.formBtnArea{
margin-bottom: 1em;
}

.formBtnArea button{
padding: 0.2em;
margin-bottom: 0.5em;
}

/* 詳細ページLPヘッダ */
.singleLpTit{
box-sizing: border-box;
margin-bottom: 20px;
padding: 0.5em;
background-color: #b50d42;
color: #fff;
text-align: center;
font-size: 2.4rem;
}

/* 詳細ページ機能一覧 */
.whFuncTit{
margin: 1em 0;
padding: 0.5em;
background-color: #404040;
color: #fff;
text-align: center;
}
.whFuncWrap{
display: flex;
flex-wrap: wrap;
max-width: 260px;
justify-content: space-between;
}
.whFuncWrap li{
margin-bottom: 10px;
box-sizing: border-box;
border: double 1px #ccc;
width: 100%;
max-width: 80px;
min-height: 50px;
font-size: 1.2rem;
line-height: 1.5em;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: #fff;
}
.whFuncOn{
background-color: #b50d0d;
}
.whFuncOff{
background-color: #ccc;
}
.whFuncDesc{
font-size: 1.1rem;
line-height: 1.5em;
text-align: right;
}

/* オススメ */
.recommendWrap{
margin-bottom: 40px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.recItemBox{
margin-bottom: 1em;
padding: 9px;
box-sizing: border-box;
max-width: 204px;
border: solid 1px #c3c3c3;
}
.recItemType{
margin-bottom: 5px;
display: flex;
}
.recItemType li{
box-sizing: border-box;
padding: 0 8px;
display: inline-block;
font-size: 1.2rem;
text-align: center;
}
.recSize{
background-color: #80092e;
color: #fff;
}
.recFunc01{
background-color: #ffc7d8;
}
.recFunc02{
background-color: #a1e5ea;
}
.recFunc03{
background-color: #eaa6a1;
}
.recType{
background-color: #e7e7e7;
}
.makerIcon,
.whEcoIcon{display: inline-block;}
.makerIcon img,
.whEcoIcon img{
height: 14px;
width: auto;
}
.itemPhotoWrap{
display: flex;
}
.itemPhotoWrap div{
margin: 0.5em;
}
.recItemH4{
font-size: 1.4rem;
font-weight: normal;
}
.recItemH4+p{
margin-bottom: 10px;
font-size: 1.2rem;
line-height: 1.5em;
}
.rmPriceTit{
background-color: #333;
color: #fff;
text-align: center;
border-radius: 10000px;
font-size: 1.2rem;
}
.rmPriceTax{
font-size: 1.2rem;
text-align: center;
}
.raPriceTit{
background-color: #80092e;
color: #fff;
text-align: center;
border-radius: 10000px;
font-size: 1.2rem;
}
.raPriceTax{
padding-top: 0.2em;
font-size: 2.4rem;
font-weight: bold;
color: #80092e;
text-align: center;
}

/* 湯沸かし器 */
.yuwakashiBoxWrap{
margin-bottom: 1em;
display: flex;
}
.yuwakashiLeft{
margin-bottom: 1em;
width: 30%;
height: auto;
}
.yuwakashiRight{
margin-left: 5%;
width: 65%;
height: auto;
}



@media screen and (max-width: 450px) { /* スマホ450以下 *************************************************************************************/

.headerAreaB{
background: url("/wp-content/post-img/lp-wh-2023/k0006-header-smt.jpg");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
width: 100%;
height: 0;
padding-top: 125%;
}

/* 詳細ページ機能一覧 */
.whFuncWrap{
margin: 5% 5% 0;
max-width: 90%;
}
.whFuncWrap li{
max-width: 30%;
}
.whFuncDesc{
margin-right: 5%;
}

.recommendWrap{
justify-content: space-around;
}

/* オススメ */
.recommendWrap{
justify-content: space-around;
}
.recItemBox{
width: calc(50% - 1em);
}
.recItemType li{
padding: 0 5px;
}

.raPriceTax{
font-size: 2.1rem;
}

/* 湯沸かし器 */
.yuwakashiBoxWrap{
padding: 5%;
}
.yuwakashiLeft{
width: 20%;
}
.yuwakashiRight{
width: 75%;
}

/* hybrid */
.hyblidImg{
padding: 0 5%;
}


}