@charset "utf-8";

/*top*/
.chosen-reason ul {background-color: #f7f7f7;padding: 2.4%;}
.chosen-reason .item {border: 1px solid #3999b8;border-radius: 5px;position: relative;}
.chosen-reason .item:not(:last-of-type) {margin-bottom: .8rem;}
.chosen-reason .item a {background-color: #fff;border-radius: 5px;color: #333;display: flex;padding: 3px;}
.chosen-reason .item:hover a {opacity: .9;text-decoration: none;}
.chosen-reason .item::after {content: '';border-style: solid;border-width: 0 0 14px 14px;border-color: transparent transparent #3999b8 transparent;bottom: 5px;height: 0;position: absolute;right: 5px;width: 0;}
.chosen-reason .img-box {width: 34%;}
.chosen-reason .text-box {font-size: .7rem;font-weight: 500;line-height: 1.3;letter-spacing: .5px;padding: 2px 2px 5px;width: 65%;}
.chosen-reason .text-box .title {color: #fff;background-color: #3999b8;background: -webkit-linear-gradient(0deg, #29abb6, #4887b9);border-radius: 3px;display: block;font-size: 1em;font-weight: bold;letter-spacing: .6px;padding: .3em .4em;margin-bottom: .3rem;}
.work-example {background-color: #F9C642;padding: 2%;}
.work-example .item {background-color: #fff;padding: 2.2%;}
.work-example .item:not(:last-of-type) {margin-bottom: 1.8%;}
#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;}
#online-estimate-2 {border-radius: 10px;margin: 0 auto;padding: 1em 1.2em;background-color: #f0f0f0;text-align: center;}
#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%;}
}

/*下層ページ*/
.type-lineup {display: flex;justify-content: space-between;flex-wrap: wrap;}
.type-lineup .head-box {width: 100%;}
.type-lineup .head {color: #fff;text-align: center;}
.type-lineup .head-box .inner-box {padding: 4%;}
.type-lineup .type01 .head {background-color: #AD1725;}
.type-lineup .type01 {border: 2px solid #AD1725;}
.type-lineup .type02 .head {background-color: #189814;}
.type-lineup .type02 {border: 2px solid #189814;}
.type-lineup .item {position: relative;}
.type-lineup .item.is-active::before, .type-lineup .item.is-active::after {content: '';display: block;position: absolute;}
.type-lineup .item.is-active::before {content: '現在ご覧のページです';color: #fff;font-size: .91rem;font-weight: bold;left: 50%;letter-spacing: 1px;text-align: center;text-shadow: 0px 0px 8px #000000d1;top: 40%;transform: translateX(-50%);width: 100%;z-index: 2;}
.type-lineup .item.is-active::after {background-color: #00004d;height: 100%;left: 0;top: 0;width: 100%;}
.type-lineup .item:not(:last-of-type) {margin-bottom: 0.5rem;}
.type-lineup .item-disabled {pointer-events: none;position: relative;}
.type-lineup .item-disabled::after {
content: '';background-color: #00000025;display: block;height: 100%;left: 0;top: 0;outline: 2px solid #00000030;position: absolute;width: 100%;z-index: 2;}
.type-lineup .item a {align-items: center;border: 3px solid #D6D6D6;display: flex;justify-content: space-between;padding: 4px 2rem 4px 4px;width: 100%;}
.type-lineup a :hover {text-decoration: none;}
.type-lineup .type01 a:hover {border-color: #AD1725;}
.type-lineup .type02 a:hover {border-color: #189814;}
.type-lineup .img-box {width: 34%;}
.type-lineup .text {color: #333;font-size: 4vw;line-height: 1.2;font-weight: bold;letter-spacing: .3px;width: 60%;}
.type-lineup .btn-arrow::after {content: '';height: .95rem;right: 0.8rem;transform: translateY(-50%) rotate(90deg);width: .95rem;}
.type-lineup .type01 .btn-arrow::after {background-color: #AD1725;}
.type-lineup .type02 .btn-arrow::after {background-color: #189814;}
.type-lineup .item .btn-arrow.type-right::after {transform: translateY(-50%) rotate(0deg);}
.tab-list.multiple-color.type01 {border-bottom: 3px solid #AD1725;}
.tab-list.multiple-color.type02 {border-bottom: 3px solid #189814;}
.tab-list.multiple-color.type01 .tab-name.is-active {background-color: #AD1725;}
.tab-list.multiple-color.type02 .tab-name:last-of-type.is-active {background-color: #189814;}
.accordion-lineup {border: 2px solid #D6D6D6;}
.accordion-lineup .head {background-color: #EDEDED;color: #222;line-height: 1.2;padding: .8rem;padding-left: 1.4rem;position: relative;text-align: left;}
.accordion-lineup .head:before {content: '';display: inline-block;position: absolute;height: 60%;left: 0.6rem;top: 50%;transform: translateY(-50%);width: 5px;}
.type01 .accordion-lineup .head:before {background-color: #ad1725;}
.type02 .accordion-lineup .head:before {background-color: #189814;}
.accordion-lineup .accordion-title {background-color: #FCFCFC;border: 1px solid #D5D5D5;border-radius: 5px;margin-bottom: 0.5rem;}
.accordion-lineup .accordion-title .img-box {margin-left: auto;width: 45%;}
.accordion-lineup .accordion-contents {border: 2px solid #E6E6E6;padding: 2.5%;}
.select-content .select-name {background-color: #fff;border-bottom: 3px solid #0192D1;color: #333;font-size: .92rem;font-weight: bold;padding-bottom: 0.4em;text-align: center;}
.recommend-product .title, .head-box .title-check {align-items: center;display: flex;font-size: 3.6vw;height: 2.6rem;}
.recommend-product .title {background-color: #FFF177;color: #333;font-weight: bold;}
#contents .head-box .title-check {margin-bottom: 0;}
.head-box.box-ecojose .title-check {background-color: #1465C5;color: #fff;}
.head-box.box-standard .title-check {background-color: #D34A0E;color: #fff;}
.recommend-product .title .icon, .head-box .title-check .icon {display: block;height: 100%;margin-right: .6rem;position: relative;width: 2rem;}
.recommend-product .title .icon {background-color: #F29D1C;}
.recommend-product .title .icon::after,
.head-box .title-check .icon::after {content: '';background-size: contain;background-repeat: no-repeat;display: block;height: 1rem;left: 50%;position: absolute;top: 50%;transform: translate(-50%, -50%);width: 1rem;z-index: 1;}
.recommend-product .title .icon::after {background-color: #FFE815;-webkit-mask-image: url(/svg/shape_crown.svg?191127);mask-image: url(/svg/shape_crown.svg?191127);}
.head-box .title-check .icon::after {background-color: #fff;-webkit-mask-image: url(/waterheater/img/svg/icon_check.svg);mask-image: url(/waterheater/img/svg/icon_check.svg);}
.recommend-product .list {display: flex;flex-wrap: wrap;justify-content: space-between;}
.recommend-product .list::after {content: '';display: block;height: 0;width: 32.4%;}
.recommend-product .list .item {width: 32.4%;}
.recommend-product .list .item a {border: 1px solid #e1e1e1;display: inline-block;font-size: .8rem;height: 100%;padding: 1px 1px 6px;width: 100%;}
.recommend-product .list .item a:hover {cursor: pointer;outline: 3px solid #f29d1c;outline-offset: -3px;text-decoration: none;}
.recommend-product .item-head {background-color: #F3F3F3;color: #555;display: inline-flex;justify-content: space-between;font-size: .75em;font-weight: bold;flex-direction: column;line-height: 1.3;letter-spacing: .5px;margin-bottom: .3rem;padding: .3rem;width: 100%;}
.recommend-product .item-head .bg-size {background-color: #DA67A5;color: #fff;font-size: .9em;letter-spacing: 0;padding: .2rem .4rem;margin-left: auto;width: fit-content;}
.recommend-product .img-box {margin: auto;max-width: 84%;}
.recommend-product .text-area, .recommend-product  .price-area {font-size: .6rem;line-height: 1.2;margin: auto;width: 94%;}
.recommend-product .text-area .bg-text {background-color: #fff;border: 1px solid #ED671D;border-radius: 5rem;color: #ED671D;display: block;font-size: 2.8vw;letter-spacing: -.5px;margin-bottom: 0.2rem;padding: 0.3rem;text-align: center;word-break: keep-all;}
.recommend-product .text-area .bg-text.type02 {border: 1px solid #9e9e9e;color: #6a6a6a;}
.recommend-product .price-area .value {align-items: center;background-color: #DA3400;color: #fff;display: flex;font-size: 1.4em;font-weight: bold;justify-content: center;padding: .3rem;position: relative;margin-bottom: .6rem;}
.recommend-product .price-area .value.openprice {font-size: .7rem;}
.recommend-product .price-area .value::after {content: '';display: block;width: 0;height: 0;border-style: solid;border-width: .6rem .6rem 0 .6rem;border-color: #da3400 transparent transparent transparent;bottom: -.4rem;position: absolute;}
.recommend-product .price-area .price {color: #DA3400;font-size: 1.6em;font-weight: bold;line-height: 1;letter-spacing: -1px;text-align: right;word-break: keep-all;}
.recommend-product .price-area .value span, .recommend-product .price-area .price span {font-size: .6em;}
.recommend-product .btn {border-radius: 4px;color: #fff;display: flex;font-size: 4.4vw;flex-direction: column;line-height: 1.4;padding: .6em;position: relative;text-align: center;}
.type01 .recommend-product .btn {background-color: #AD1725;}
.type02 .recommend-product .btn {background-color: #189814;}
.recommend-product .btn .btn-text {letter-spacing: 1px;}
.recommend-product .btn span:not(.small) {font-size: .75em;}
.recommend-product .btn::after {content: '';background-repeat: no-repeat;background-color: #ffffff;display: inline-block;-webkit-mask-image: url(/waterheater/img/svg/icon_page_top.svg);mask-image: url(/waterheater/img/svg/icon_page_top.svg);height: 1.5rem;right: .8rem;position: absolute;top: 50%;transform: translateY(-50%)rotate(90deg);width: 1.5rem;}
.recommend-product .btn:hover {cursor: pointer;opacity: .9;text-decoration: none;}

/*設置タイプ別ページ*/
.head-box.box-ecojose .title-check {background-color: #1465C5;color: #fff;}
.head-box.box-ecojose {border: 3px solid #1465C5;}
.head-box.box-standard .title-check {background-color: #D34A0E;color: #fff;}
.head-box.box-standard {border: 3px solid #D34B0E;}

/*選び方ページ*/
.box-bottom-arrow {background-color: #FFF8DE;padding: 5%;position: relative;text-align: center;margin-bottom: 3rem;}
.box-bottom-arrow .inner-box {background-color: #f97a33;color: #fff;padding: 2.4%;}
.box-bottom-arrow .block-arrow {border-color: #fff8de transparent transparent transparent;bottom: -3rem;transform: translateX(-50%);left: 50%;position: absolute;z-index: -1;}
.tab-switch.multiple-color .tab-list {border-bottom: 0;}
.tab-switch.multiple-color .tab-name.group01.is-active {background-color: #AD1725;}
.tab-switch.multiple-color .tab-name.group02.is-active {background-color: #189814;}
.multiple-color .tab-contents.border-box:nth-of-type(1) {border-color: #AD1725;}
.multiple-color .tab-contents.border-box:nth-of-type(2) {border-color: #189814;}
.multiple-color .tab-contents:nth-of-type(1) .head {color: #AD1725;}
.multiple-color .tab-contents:nth-of-type(2) .head {color: #189814;}

/* SP用 */
@media screen and (max-width: 560px) {
.type-lineup .type01 {margin-bottom: .8rem;}
}

/* PC用 */
@media screen and (min-width: 561px) {
.chosen-reason .item a {padding: 2%;}
.chosen-reason .img-box {width: 31%;}
.chosen-reason .text-box {font-size: .9rem;padding-left: 2%;width: 66%;}
.chosen-reason .text-box .title {padding: 0.6em 0.8em;margin-bottom: 0.5rem;}
#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;}
/*下層ページ*/
.type-lineup {flex-wrap: nowrap;}
.type-lineup .head-box {width: 49%;}
.type-lineup .item .text {font-size: .86rem;}
.type-lineup .btn-arrow::after {height: 1rem;width: 1rem;}
.accordion-lineup .head {padding-left: 1.6rem;}
.accordion-list .accordion-title {font-size: 1rem;padding: 0.5em 3rem 0.5em 1em;}
.accordion-lineup .accordion-title .img-box {height: 48px;width: 33%;}
.select-content .select-name {font-size: 1.2rem;padding-bottom: 0.3em;}
.recommend-product .title, .head-box .title-check {font-size: 1rem;}
.recommend-product .title .icon, .head-box .title-check .icon {width: 3rem;}
.recommend-product .title .icon::after, .head-box .title-check .icon::after {content: '';height: 1.5rem;width: 1.5rem;}
.recommend-product .item-head {font-size: .84rem;flex-direction: row;align-items: center;padding: 0.6rem;}
.recommend-product .img-box {height: 200px;width: 200px;}
.accordion-contents>.recommend-product .img-box {height: 180px;width: 180px;}
.recommend-product .text-area, .recommend-product .price-area {font-size: .76rem;width: 90%;}
.recommend-product .text-area .bg-text {font-size: .76rem;}
.recommend-product .price-area .value {font-size: 1.6em;margin-bottom: 0.8rem;}
.recommend-product .price-area .value.openprice {font-size: 1rem;}
.recommend-product .price-area .price {font-size: 1.9em;}
.recommend-product .price-area .value span, .recommend-product .price-area .price span {letter-spacing: 0;vertical-align: baseline;}
.recommend-product .price-area .value span {font-size: .7em;}
.recommend-product .price-area .price span {font-size: .65em;margin-left: 1px;}
.recommend-product .btn {font-size: 1.1rem;box-shadow: 0 1px 3px 1px #929292;}
}

/*矢印 IEのみ*/
@media all and (-ms-high-contrast: none) {
}