@charset "utf-8";


#online-estimate-2 {
    border-radius: 10px;
    margin: 0 auto;
    padding: 1em 1.2em;
    background-color: #f0f0f0;
    text-align: center;
}
#online-estimate-2 form {
}
#online-estimate-2 legend {
}
#online-estimate-2 input.kwd_sel {
    border: 1px solid #aaa;
    border-radius: 5px;
    height: 3em;
    padding: .5em .8em;
    width: 80%;
}
#online-estimate-2 .btn {
    border: 3px solid #ef4a11;
    border-radius: 5px;
    box-shadow: 2px 2px 2px #b1b1b1;
    background-color: #e13e05;
    height: 3em;
    margin-left: .3em;
    padding: .3em 1.5em;
    width: fit-content;
}

/* SP用 */
@media screen and (max-width: 560px) {
    #online-estimate-2 input.kwd_sel {
        width: 74%;
    }
}


.flow-navi {
    background-color: #009f8c;  
    display: flex;
    justify-content: space-between;
    padding: 2% 2.5%;
}
.flow-navi .item {
    background-color: #dadada;
    flex-basis: 30%;
    font-weight: bold;
    padding: 1.3% 1.5%;
    position: relative;
    text-align: center;
}
.flow-navi .item:not(:last-of-type)::after {
    content: '';
    border-style: solid;
    border-width: 15px 0 15px 14px;
    border-color: transparent transparent transparent #dadada;
    display: block;
    height: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: -10px;
    width: 0;
}
.flow-navi .item.on {
    background-color: #fff;
}
.flow-navi .item:not(:last-of-type).on::after {
    content: '';
    border-color: transparent transparent transparent #fff;
}
.flow-navi .tip {
    background-color: #eb5100;
    border-radius: 50px;
    color: #fff;
    display: inline-block;
    font-size: .92rem;
    height: 30px;
    padding: 5px;
    margin-bottom: 3px;
    text-align: center;
    width: 30px;
}
.flow-navi .text {
    display: block;
    font-size: .8rem;
}

#online-estimate {
    border-radius: 10px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}
#online-estimate form {
    bottom: 4%;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    width: 90%;
}
#online-estimate legend {
    color: #333;
    font-size: .8rem;
    margin-bottom: .3rem;
}
#online-estimate input.kwd_sel {
    border: 1px solid #aaa;
    border-radius: 5px;
    height: 1.8rem;
    padding: 0.5em 0.6em;
    width: 75%;
}
#online-estimate .btn {
    border: 1px solid #ef4a11;
    border-radius: 5px;
    box-shadow: 2px 2px 2px #b1b1b1;
    background-color: #e13e05;
    width: 2em;
    height: 1.8rem;
    margin-left: 0.2em;
    padding: 0.3em 1.5em;
    width: fit-content;
}

.click3-steptitle {
    border-bottom: 3px solid #eb5100;
    padding-bottom: .5em;
    padding-left: 0.5em;
}
.click3-steptitle .tip {
    background-color: #eb5100;
    border-radius: 50px;
    color: #fff;
    display: inline-block;
    font-size: 1.2rem;
    height: 36px;
    padding-top: 5px;
    margin-right: .7em;
    text-align: center;
    width: 36px;
}

.flex-select {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.flex-select .item {
    border: solid #D2D2D2 1px;
}
.flex-select .img-box {
    width: 100%;
}
.flex-select .text-box {
    padding: 12px;
}
.flex-select .item input:hover {
    cursor: pointer;
    opacity: .9;
}
.flex-select .item input[type="submit"] {
    background-color: #e13e05;
    border: 3px solid #e13e05;
    border-radius: 5px;
    box-shadow: 0 2px 4px #72727261;
    color: #fff;
    display: block;
    font-size: 1rem;
    font-weight: bold;
    margin: 5px auto 0;
    padding: 6px;
    width: 90%;
}

.back-btn {
    display: flex;
    margin: auto;
    justify-content: space-between;
    width: 90%;
}
.back-btn .item {
    background-color: #eee;
    border: 5px solid #eee;
    border-radius: 30px;
    color: #333;
    display: inline-block;
    font-size: .9rem;
    font-weight: bold;
    padding: 0.4em 0.8em;
    text-align: center;
    text-decoration: none;
    width: 160px;
}
.back-btn .item:hover {
    background-color: #e3e3e3;
    border-color: #e3e3e3;
    cursor: pointer;
}

#contents #main {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.hinban-box {
    background-color: #e9e9e9;
    border: 4px solid #ccc;
    padding: 0 .5rem .5rem;
}
.hinban-box.first {
    background-color: #f6efdd;
    border-color: #f3ce80;
}
.hinban-box .box-title {
    color: #333;
    font-size: .96rem;
    font-weight: bold;
    line-height: 2.6;
    text-align: center;
}
.hinban-box .inner-list,
.hinban-box .inner {
    background-color: #fff;
    display: flex;
}
.hinban-box .inner-list {
    flex-wrap: wrap;
    padding: .8rem .5rem .5rem .6rem;
    position: relative;
}
.hinban-box .inner {
    padding: .8rem;
}
.hinban-box .inner-list li {
    margin-bottom: .6rem;
    padding-left: 1.2em;
    position: relative;
}
.hinban-box .inner-list li::after {
    content: '';
    background-image: url(/waterheater/img/g-icon01.gif);
    background-repeat: no-repeat;
    display: block;
    height: 12px;
    left: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
}
.hinban-box .inner-list a {
    color: #ff6600;
    font-size: .8rem;
    font-weight: bold;
}
.hinban-box .inner-list a:hover {
    text-decoration-line: underline;
}

#gaisan3 .inner [id^="icon"] {
    background-repeat: no-repeat;
    background-position: left top;
    background-size: contain;
    height: 6.7vw;
    text-indent: -9999px;
    width: 17.6vw;
}
#gaisan3 [id^="icon"]:not(:last-of-type) {
    margin-right: .8rem;
}
#gaisan3 #icon1 {
    background-image: url(/waterheater/img/g-icon02.gif);
}
#gaisan3 #icon2 {
    background-image: url(/waterheater/img/g-icon03.gif);
}
#gaisan3 #icon3 {
    background-image: url(/waterheater/img/g-icon04.gif);
}
#gaisan3 #icon4 {
    background-image: url(/waterheater/img/g-icon05.gif);
}
#gaisan3 #icon5 {
    background-image: url(/waterheater/img/g-icon06.gif);
}
#gaisan3 #icon6 {
    background-image: url(/waterheater/img/g-icon07.gif);
}
#gaisan3 #icon7 {
    background-image: url(/waterheater/img/g-icon08.gif);
}
#gaisan3 #icon8 {
    background-image: url(/waterheater/img/g-icon09.gif);
}
#gaisan3 #icon9 {
    background-image: url(/waterheater/img/g-icon10.gif);
}
#gaisan3 #icon10 {
    background-image: url(/waterheater/img/g-icon11.gif);
}
#gaisan3 #icon11 {
    background-image: url(/waterheater/img/g-icon12.gif);
}
#gaisan3 #icon12 {
    background-image: url(/waterheater/img/g-icon13.gif);
}
#gaisan3 #icon13 {
    background-image: url(/waterheater/img/g-icon14.gif);
}

.result-box {
    border: 4px solid #ffc107;
}
.result-box .box-title {
    background-color: #f9c712;
    border-bottom: 4px #fff double;
    color: #333;
    display: block;
    font-size: .8rem;
    font-weight: bold;
    height: 2.6rem;
    line-height: 2.6rem;
    letter-spacing: 1px;
    padding-left: 56px;
    position: relative;
    text-align: left;
    width: 100%;
}
.result-box .box-title::after {
    content: '';
    background-image: url(/waterheater/hinban/estimate/img/on_batch.png);
    background-size: contain;
    background-repeat: no-repeat;
    display: block;
    height: 80px;
    left: 1px;
    position: absolute;
    top: -10px;
    width: 50px;
}
.result-box .product-box {
    padding: 3%;
}

.hinban-box .product-box {
    background-color: #fff;
    border-radius: 10px;
    padding: 14px;
}
.product-box .product-item {
    background-color: #fff;
    border: 4px solid #e9e9e9;
    padding: 1.2% 2%;
    width: 100%;
}
.product-item .img1 {
    display: inline-block;
    margin-right: 2%;
    width: 26%;
}
.product-item .txt1 {
    display: inline-block;
    font-size: .7rem;
    width: 70%;
}
.product-item .txt1 a:link {
    color: #ff6600;
    display: block;
    font-size: .72rem;
    font-weight: bold;
    text-decoration: underline;
}
.product-item .gray {
    color: #666;
}
.product-box .tbl1 {
    background: #fff;
    box-sizing: border-box;
    border: 1px solid #f7d897;
    border-spacing: 0 3px;
    padding: 2px;
    width: 100%;
}
.product-box tr {
    display: flex;
    flex-wrap: wrap;
}
.product-box td:first-of-type {
    background-color: #ffe5af;
    display: block;
    height: auto;
    font-weight: bold;
    padding: 3px;
    text-align: center;
    width: 100%;
}
.product-box .td2 {
    background: #fff8e5;
    padding: 4.5% 2%;
    width: 58%;
}
.product-box .td3 {
    background: url(/waterheater/img/g-img11.gif) no-repeat;;
    width: 5%;
}
.product-box .td4 {
    color: #ff0000;
    font-weight: bold;
    padding: 4.5% 2%;
    text-align: right;
    width: 28%;
}
.product-box .tbl2 {
    border: 1px solid #ff0000;
    box-sizing: border-box;
}
.product-box .tbl2 tr {

}
.product-box .tbl2 .td9 {
    background-color: #fddaec;
    color: red;
    font-size: 4vw;
    font-weight: bold;
    line-height: 2.6;
    padding: 3% 0;
    width: 40%;
}
.product-box .tbl2 .td10 {
    color: #ff0000;
    font-size: 6vw;
    line-height: .9;
    font-weight: bold;
    height: auto;
    padding: 3% 2% 2%;
    text-align: right;
    width: 56%;
}
.product-box .tbl2 .text-s {
    font-size: 12px;
}
#gaisan3 .box8 {
    color: #333;
    font-size: 10px;
    line-height: 1.3;
    text-align: center;
}
#gaisan3 .btn1,
#gaisan3 .box9 {
    background-size: cover;
    background-position: left top;
    background-repeat: no-repeat;
    display: block;
    margin: 0 auto;
    text-indent: -9999px;
}
#gaisan3 .btn1 {
    background-image: url(/waterheater/img/g-btn14.gif);
    height: 15vw;
    width: 90%;
}
#gaisan3 .btn1:hover {
    background-position: left bottom;
}
#gaisan3 .box9 {
    background-image: url(/waterheater/img/g-cap25.gif);
    height: 20px;
    width: 328px;
}
.eco-info {
    background-image: url(/waterheater/img/eco_bg.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: contain;
    color: #11277c;
    font-size: .8rem;
    font-weight: bold;
    height: 10rem;
    margin: auto;
    padding: 3.2rem 0 0 26%;
    width: 90%;
}
.eco-info .eco-info-s {
    font-size: .8em;
}
.red-price {
    color: #db0e36;
    font-size: 2rem;
    line-height: 2rem;
}
.result-box .font-s {
    font-size: 11px !important;
}


.another-list h4 {
    color: #333;
    background-color: #ecefee;
    padding: 6px 10px;
    font-size: .75rem;
    font-weight: bold;
    letter-spacing: 1px;
    margin-bottom: 5px;
}
.another-list ul {
    display: flex;
    flex-wrap: wrap;
    padding: 1%;
}
.another-list ul::after {
    content: '';
    display: block;
    width: 50%;
}
.another-list li {
    font-size: .74rem;
    letter-spacing: -.1px;
    flex-basis: 50%;
    margin-bottom: 2px;
    padding-left: 1em;
    position: relative;
}
.another-list li::before {
    content: url(/waterheater/img/g-icon15.gif);
    left: 0;
    top: 40%;
    transform: translateY(-50%);
    position: absolute;
}

/* スマホ用 */
@media screen and (max-width: 560px){
.pc {
    display: none !important;
}
.flex-select.sp-col-2 .item {
    flex-basis: 48.5%;
    margin-bottom: 0.8rem;
}

#gaisan1 h2 {
    height: auto !important;
}
.hinban-box .inner-list li {
    flex-basis: 48.5%;  
}
.hinban-box .inner-list li:nth-of-type(odd) {
    margin-right: .4rem;
}
}

/* PC用 */
@media screen and (min-width: 561px){
.flow-navi .item {
    text-align: left;
}
.flow-navi .item:not(:last-of-type)::after {
    border-width: 25px 0 25px 14px;
    right: -14px;
}

.flow-navi .tip {
    margin-bottom: 0;
    margin-right: 0.6em;
}
.flow-navi .text {
    display: inline-block;
    font-size: 1rem;
}
.flex-select.pc-col-4 {
    justify-content: center;
}
.flex-select.pc-col-4 .item {
    flex-basis: 25%;
}
.flex-select.pc-col-3 .item {
    flex-basis: 32%;
    margin-bottom: 0.8rem;
}
.flex-select .text-box p {
    font-size: .9rem !important;
    line-height: 1.3;
    margin-bottom: 4px;
}
    
.back-btn {
    width: 45%;
}

#contents #main {
    width: 780px;
}

#online-estimate form {
    bottom: 6%;
    width: 90%;
}
#online-estimate legend {
    font-size: .9rem;
    margin-bottom: 3px;
}
#online-estimate input.kwd_sel {
    height: 2.4rem;
    width: 82%;
}
#online-estimate .btn {
    height: 2.4rem;
    margin-left: 0.6rem;
    padding: 0.3rem 2.4rem;
}

.result-contents {
    width: 580px;
}
.result-contents p,
.result-contents a {
    font-size: .8rem !important;
}
.result-contents .td2 {
    font-size: .75rem !important;
}

.hinban-box .box-title {
    font-size: .96rem;
    line-height: 3;
}
.hinban-box .inner-list {
    padding: .8rem .5rem .5rem 1rem;
}
.hinban-box .inner {
    padding: .8rem;
}
.hinban-box .inner-list li {
    flex-basis: 32.4%;
}
.hinban-box .inner-list li:not(:nth-of-type(3n)) {
    margin-right: .5rem;
}
.hinban-box .inner-list a {
    font-size: .9rem;
}
    
#gaisan3 .inner [id^="icon"] {
    height: 49px;
    width: 132px;
}
.result-box .box-title {
    font-size: 1.2rem;
    height: 3.6rem;
    line-height: 2.8;
    letter-spacing: 1.5px;
    padding-left: 0;
    text-align: center;
}
.result-box .box-title::after {
    height: 124px;
    left: .8rem;
    width: 94px;
}

.product-item {
    font-size: .85rem;
}
.product-item .txt1,
.product-item .txt1 a:link {
    font-size: .9rem;
    margin-bottom: 3px;
}
.product-box .tbl1 {
    margin-bottom: .8rem;
}
.product-box .pc th {
    background-color: #f5c75f;
    border-bottom: 1px solid #fff;
}
.product-box .th1,
.product-box td:first-of-type {
    padding: 1.4% 2%;
    width: 22%;
}
.product-box .th2,
.product-box .td2 {
    padding: 1.4% 2%;
    width: 41%;
}
.product-box .th3,
.product-box .td3 {
    width: 2.7%;
}
.product-box .th4,
.product-box .td4 {
    padding: 1.4% 2%;
    width: 22%;
}
.product-box td:first-of-type {
    border-bottom: 1px solid #fff;
    font-size: .9rem;
    padding: 1.4% 2%;
    text-align: left;
}
.product-box .td2 {
    font-size: .9rem;
}
.product-box .td4 {
    font-size: 1.1rem;
}
.product-box .tbl2 .text-s {
    font-size: 14px;
}

.product-box .tbl2 {
    margin-bottom: .6rem;
    width: 100%;
}
.product-box .tbl2 .td9 {
    border: unset;
    font-size: 1rem;
    line-height: 3.5;
    padding: 1% 2%;
    text-align: center;
    width: 22%;
}
.product-box .tbl2 .td10 {
    font-size: 2rem;
    line-height: .8;
    padding: 2.5% 2% .9% 0;
    width: 72%;
}
#gaisan3 .box8 {
    font-size: 13px;
    line-height: 1.4;
}
#gaisan3 .btn1 {
    height: 61px;
    width: 328px;
}

.eco-info {
    font-size: 1.2rem;
    height: 229px;
    padding: 72px 0 0 150px;
    width: 500px;
}
.red-price {
    font-size: 2.8rem;
    line-height: 3.8rem;
}

.another-list ul::after {
    width: 32%;
}
.another-list li {
    flex-basis: 33%;
}
}

/* ipad用 */
@media screen and (min-width: 600px) and (max-width: 980px) {
.eco-info {
    font-size: 1rem;
    height: 14rem;
    padding: 4.5rem 0 0 33%;
}
}