/* common */.u-font-bold{font-weight: bold}
.yu-pay-main-wrap{margin:0 auto;max-width:100%;padding: 0 0 100px;margin-bottom:100px}
.yu-pay-wrap{max-width: 1160px;margin:60px auto 0;}
.yu-pay-wrap2{max-width: 1160px;margin:50px auto;padding:50px 0}
.noteList {display: table-cell;white-space: nowrap;}
.noteText {display: table-cell;}
.yu-pay-indent {padding-left:1em;text-indent:-1em;}
@media screen and (min-width: 767.5px) {.sp-block{display: none}}
@media screen and (max-width: 767px) {.pc-block{display: none}
ul.yu-pay-list li {padding-left: 1.5em;text-indent: -1.5em;}
.yu-pay-wrap-inner{padding:0 3%}
.yu-pay-wrap{margin:6% auto 0}
}
@media screen and (max-width: 767.499px) {
    .yu-pay-wrap2{margin:20px auto !important;padding:10px 0}
}

.m0auto{margin: 0 auto}
@media screen and (max-width: 767.499px) {.m0auto-sp{margin: 0 auto}}

/* yu-pay */
.yu-pay-box{flex-grow: 1;}
.yu-pay-box a{color: #000}
.yu-pay-box p img {width: 90%;height: 100%;object-fit: cover;}
.icon-img img{width:2em}
.shadow-green{box-shadow: 0 0 7px #B2DFD3;}
.shadow-pink{box-shadow: 0 0 7px #F38E91;}
.outline{outline-offset : -4px;outline :4px solid #F6EF53;}

/* cost-button */
.cost-button img, .img60 img{width: 60%;}
.turning{-webkit-transform: scaleX(-1);-o-transform: scaleX(-1);-moz-transform: scaleX(-1);transform: scaleX(-1);filter: FlipH;-ms-filter: "FlipH";display: inline-block;}
@media screen and (max-width: 767.499px) {
    .cost-button img, .img60 img{width: 90%;}
.turning2-sp{ transform:rotate(90deg); }
}

/* font */
.bold {font-weight: bold}
.yu-pay-red{color: #EB4118;}
.yu-pay-red2{color: #B85C38}
.yu-pay-pink{color: #D6B9B5;}
.yu-pay-orange{color:#F68B61;}
.yu-pay-green{color:#2C8464;}
.yu-pay-green2{color:#2ABCAC;}
sub{font-size: .6em;vertical-align: baseline}
sup{font-size: .6em;vertical-align: text-top}

/* bg */
.yu-pay-white{color: #fff}
span.marker {background: linear-gradient(transparent 50%, #F6EF53 50%);}
.hphb-green-bg{background: #2C8464}
.hphb-green-bg2{background: #B2DFD3}
.hphb-green-bg3, .yu-pay-green-bg2{background: #2ABCAC}
.hphb-green-bg4{background: #EAF6F3}
.yu-pay-green-bg{background: #F2F4F1}
.yu-pay-green-bg{background: #F2F4F1}
.yu-pay-pink-bg{background: #FBF2ED}
.yu-pay-pink-bg2{background:#D6B9B5}

/* title h2 */
.yu-pay-inner{padding:0 5%}
.yu-pay-inner2{padding:5%;background: #fff;border-radius: 20px}
.yu-pay-inner3{padding:5% 5% 3% 5%;background: #fff;border-radius: 20px 20px 0 0}
.img80 img{width: 80%}
@media screen and (max-width: 767px) {.yu-pay-inner {padding: 0 3% 10%;}
    h2.yu-pay-h2{font-size: 1.3em;margin: 0 2%;}
    .yu-pay-inner2{padding: 3%;margin: 3%;}
    .yu-pay-inner3{padding: 3%;margin: 3% 3% 0 3%;}
    a .questions-button{margin:0 3%}
    .img80 img{width: 100%}
}

/* title h3 */
.ribbon-black {display: inline-block;position: relative;height: 50px;line-height: 50px;text-align: center;padding: 0 50px;background: #000;color: #FFF;box-sizing: border-box;}
.ribbon-black:before, .ribbon-black:after {
position: absolute;content: '';width: 0px;height: 0px;z-index: 1;}
.ribbon-black:before {top: 0;left: 0;border-width: 25px 0px 25px 15px;border-color: transparent transparent transparent #fff;border-style: solid;}
.ribbon-black:after {top: 0;right: 0;border-width: 25px 15px 25px 0px;border-color: transparent #fff transparent transparent;border-style: solid;}
@media screen and (max-width: 767.99px) {.ribbon-black{font-size: 1em !important;width: 100%}}

/* energy-saving */
.energy-saving{background-image: repeating-linear-gradient(90deg, #2c8464, #2c8464 6px, transparent 6px, transparent 12px), repeating-linear-gradient(180deg, #2c8464, #2c8464 6px, transparent 6px, transparent 12px), repeating-linear-gradient(90deg, #2c8464, #2c8464 6px, transparent 6px, transparent 12px), repeating-linear-gradient(180deg, #2c8464, #2c8464 6px, transparent 6px, transparent 12px);
background-position: left top, right top, left bottom, left top;
background-repeat: repeat-x, repeat-y, repeat-x, repeat-y;
background-size: 100% 4px, 4px 100%, 100% 4px, 4px 100%;flex-grow: 1;}
.nergy-saving-inner{background: #2C8464;outline-offset : -6px;outline :4px solid #fff;padding:20px}
.energy-saving-font{font-size: 4em}
.br-white{border-bottom:1px solid #fff;padding:5px 0;margin-bottom: 10px;}

/* resilience */
.resilience-box{border: 10px solid #B2DFD3;border-radius: 20px;position: relative}
.resilience-title{background: #1A1311;border-radius: 50vh;padding:50px;color: #fff;text-align: center;width: fit-content;position: absolute;top: -10px;left: 50%;transform: translate(-50%,-50%);}
@media screen and (min-width: 768px) {.resilience-title{white-space: nowrap;}}
@media screen and (max-width: 767.99px) {.resilience-title{width: 80%;border-radius: 30px}
.resilience-inner-sp{padding:50px 3% 3% !important}}

/* hphb-questions-box */
.hphb-questions-box{gap:15px}
.hphb-questions-inner{width: calc((100% - 45px) / 4);}
.hphb-box{background: #2C8464;border-radius: 10px 0 0 10px;aspect-ratio: 1;width:40%;align-items: center;display: flex;margin: 0 auto;justify-content: center;}
.hphb-box img{width: 60%}
.hphb-box2{border: #B2DFD3 5px solid;border-radius: 0 10px 10px 0;border-left:none;width:60%;padding: 5px;align-items: center;display: flex;}
a .questions-button{color: #fff !important;text-decoration: none;background: #0F2E2E;padding: 10px;border-radius:0 0 20px 20px}
.questions-button span{width: 1.8em;display: inline-block;}
.questions-button span img{vertical-align: middle !important}
@media screen and (max-width: 767.99px) {
 .hphb-questions-inner{width: calc((100% - 15px) / 2);}
.hphb-questions-box :nth-child(1) {order: 1;}    
.hphb-questions-box :nth-child(2) {order: 3;}   
.hphb-questions-box :nth-child(3) {order: 5;}   
.hphb-questions-box :nth-child(4) {order: 7;}
.hphb-questions-box :nth-child(5) {order: 2;}
.hphb-questions-box :nth-child(6) {order: 4;}
.hphb-questions-box :nth-child(7) {order: 6;}
    
}

/* ハイブリッド給湯機対象製品　/　料金　 */
.box-wrap{border-radius: 40px;padding: 60px 3%;background: #fff;border:solid #B2DFD3 5px}
@media screen and (max-width: 767.499px) {.box-wrap{border-radius: 10px !important;padding: 30px 3%;}}

/* 3つのplan */
.flex3{display: flex;gap: 10px;align-items: stretch;}
.flex3 > div{ width: calc(100% / 3);}
.plan-inner{background: #fff;border-radius: 20px;line-height: 1.6;background: #fff;flex: 1;display: flex;flex-direction: column;justify-content: center;flex: 1; 
}
.plan-box{padding: 8px;border-radius: 25px;display: flex;flex-direction: column; }
@media screen and (max-width: 767.499px) {.flex3 > div{width: 100%;margin-top: 10px}
.plan-box{padding: 10px 3%;border-radius: 10px}
.plan-inner{background: #fff;border-radius: 12px;}}

/* 対象製品 */
.box-wrap2{border: 8px solid #909F9F;border-radius: 30px}
.pink-font{color: #EF8586}
.plan-inner2 {background: #fff;border-radius: 50vh;}
/* fukidasi */
.fukidashi-bottom {
  position: relative;display: inline-block;margin: 1.5em 0;padding: 7px 30px;min-width: 120px;max-width: 100%;color: #F68B61;background: #FFF;border: solid 3px #F68B61;box-sizing: border-box;border-radius: 50vh
}
.fukidashi-bottom:before {
  content: "";position: absolute;bottom: -22px;left: 50%;margin-left: -15px;border: 12px solid transparent;border-top: 12px solid #FFF;z-index: 2;
}
.fukidashi-bottom:after {
  content: "";position: absolute;bottom: -29px;left: 50%;margin-left: -16px;border: 14px solid transparent;border-top: 14px solid #F68B61;z-index: 1;
}

/* プレミアW除菌 */
.premium-wrap{border: solid #EB8151}
.kirakira-img img{width: 1em;vertical-align: middle}
.h2-yu-pay-orange{background: #EB8151;width: fit-content;padding: 10px 10%;border-radius: 50vh;color: #fff}
.h2-yu-pay-orange2{background: #fff;width: fit-content;padding: 10px 10%;border-radius: 50vh;color: #EB8151;border: 5px solid #EB8151}
@media screen and (max-width: 767.499px) {.h2-yu-pay-orange2{border: 2px solid #EB8151}}

/* 湯～Pay */
.yu-pay-h3{background: #0F2E2E;padding:10px 6%;border-radius: 50vh;width: fit-content;margin: 0 auto;}
.h4-yu-pay{border-bottom: 1px solid #000;padding:0 10px;width: fit-content;}
@media screen and (max-width: 767.99px) {.yu-pay-h3{padding:10px 50px}}

/* flat-box */
.flat-box{background: #D6B9B5;border-radius: 10px;border: 10px solid #D6B9B5;}
.flat-seihin-box{background: #fff;border-radius: 10px}

/* title h4 */
h4.yu-pay-h4{width: fit-content;padding: 20px 3% 5px;border-bottom: 1px solid #010101;margin:0 auto;}

p.pink-title {background:#D6B9B5;padding: 15px 6%;border-radius: 50vh;width: fit-content;line-height: 1}

/* list img */
ul.yu-pay-list li img, ul.yu-pay-list2 li img{width: 1.4em;vertical-align: middle;margin-right: 6px;}
@media screen and (min-width: 767.5px) {.yu-pay-list{margin:0 10%}}

/* list */
.list-green, .list-pink{list-style:  none;margin:  0;padding: 0;padding-left:1em;text-indent:-1em;}
.list-green li:before {
content:  "";width:  1em;height:  1em;display:  inline-block;background-color:#2C8464 ;border-radius:  50%; position:relative;top: -1px;margin-right: 5px;}
.list-pink li:before {
content:  "";width:  1em;height:  1em;display:  inline-block;background-color: #EF8586;border-radius:  50%; position: relative;top: -1px;margin-right: 5px;}

/* yu-pay-button */
.yu-pay-button{margin: 0 18%}
.yu-pay-button3{margin: 0 20%}
.yu-pay-button2{margin: 0 10%}
.yu-pay-button2 img{filter: drop-shadow(0 4px 0 #032E13);}
.yu-pay-button img{filter: drop-shadow(0 4px 0 #032E13);}
@media screen and (min-width: 767.5px) {
.yu-pay-button img:hover,  .yu-pay-button2 img:hover, .yu-pay-button3 img:hover{filter:none}
}
@media screen and (max-width: 767px){.yu-pay-button, .yu-pay-button3{margin: 0 5%}
.yu-pay-button2{margin: 0 3%}}
.yu-pay-button3 img{filter: drop-shadow(0 5px 0 #642515);}

/*  人に笑顔プロジェクト */
.egao-p-wrap{border: #FBD3D3 15px solid;border-radius: 12px;}
@media screen and (max-width: 767.499px) {
.egao-p-wrap{border: #FBD3D3 3px solid;}}


/* tab */
.plan-wrap{border-radius: 20px;border: 10px solid #FBF2ED;padding-top:20px}
.tab1-body__item, .tab3-body__item {
display: none;text-align: center;}
.tab1-body__item.on, .tab3-body__item.on3 {display: block;}
.tab1-body{border-radius: 0 0 15px 15px;box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, .1);}
.tab-inner{background: #fff;padding:30px 3%;border-radius: 20px}
@media screen and (max-width: 767px) {
.tab1-sub-item, .tab2-sub-item, .tab3-sub-item{width: 100%;font-size: 2.4vw;border-radius:10px;line-height: 1.5em;}
.tab1__link{font-size: 3vw;}
.tab1-body__item.tab1-body__item--1.on,.tab1-body__item.tab1-body__item--2.on,.tab1-body__item.tab1-body__item--3.on{padding: 15px 3%;}
.tab-inner{border-radius: 10px}
}
/* tab-wrap3 */
.tab3 {display: flex;text-align: center;margin: 0 !important;}
.tab3__item {flex: 1;}
.tab3__link{justify-content:center;padding:10px;color: #DCDDDE;font-size: 1.4em;font-family: "TBUDゴシック B", "TBUDGothic B";border-bottom: 10px solid #DCDDDE;flex: 1;display: flex;cursor: pointer;}
.tab3__link.tab1.on3 {color: #D6B9B5;border-bottom: 10px solid #D6B9B5}
.tab3__link.tab2.on3 {color: #2BB7AA;border-bottom: 10px solid #2BB7AA}

/* qa */
.yu-pay-qa div:first-child{width: 6vw;margin-right: 20px;}
.yu-pay-qa div:last-child{width: 94vw;}
.yu-pay-u-border{
background-image:linear-gradient(to right, #010101 8px, transparent 8px);background-size: 14px 1px;background-repeat: repeat-x; background-position: left bottom;}
@media screen and (max-width: 767px) {
.yu-pay-qa div:first-child{width: 10vw;margin-right: 10px;}
.yu-pay-qa div:last-child{width: 86vw;}
}

/* table */
.u-mt40{margin-top:40px}
.u-pl10{padding-left: 10px}
.yu-pay-table th{width: 25%;background: #F2F4F1;color: #010101;}
.yu-pay-table th:not(:last-child){border:1px solid #010101}
.yu-pay-table td{padding:20px 10px;border-top: 1px solid #010101;border-right: 1px solid #010101}
.yu-pay-table tr:last-child td{border-bottom: 1px solid #010101;}
table.yu-pay-table{border-collapse: collapse;table-layout: fixed;width: 100%;}
@media only screen and (min-width: 766.5px) {
.yu-pay-table th{text-align: center;align-items: center;display: table-cell;vertical-align: middle;}
}
@media only screen and (max-width: 767px) {
  .yu-pay-table th,.yu-pay-table td {
    width: auto;display: block;table-layout: fixed;}
    .yu-pay-table th{padding:20px 10px;border: none;text-align: center;}
    .yu-pay-table td{padding:20px 10px;border-top: none;border-left: 1px solid #010101}
}

/* フローティングナビ */
.yu-pay-nav-red{color: #B03A3A}
.yu-pay-follow-wrap{max-width: 1160px;margin:0 auto}
body{position: relative}
#yu-pay-nav-wrap{position: fixed;z-index: 99999; bottom:0;width: 100%}
.yu-pay-nav-bg{background: linear-gradient(transparent 30%, #0F2E2E 30%)}
.yu-pay-nav-inner > a{width : calc(100% / 3) ;display: inline-block;line-height: 1.5em;}
.yu-pay-nav-inner > a:hover{opacity: 1 !important;}
.yu-pay-nav-inner > a div:hover, .yu-pay-nav-inner > a div:hover span{background: #B03A3A;color: #fff}
.yu-pay-nav-inner > a div:hover img{-webkit-filter: brightness(0) invert(1);filter: brightness(0) invert(1);}
.yu-pay-nav{background: #F6EF53;border: 6px solid #0F2E2E;color: #0F2E2E;font-weight: bold; background-size: 1em;padding: 7%;outline: #0F2E2D solid 1px;outline-offset: -10px;}
.yu-pay-nav div img{width: 3em}
.yu-pay-width, .yu-pay-width2{width: 50%}
@media only screen and (max-width: 1100px) and  (min-width: 767px){.yu-pay-width{width: 60%}.yu-pay-width2{width: 40%}.yu-pay-nav{padding:3%}}
.info-follow{width: 66%}
.tell-follow{width: 34%}
@media only screen and (max-width: 767px) and  (min-width: 425.5px){yu-pay-nav{padding:3% 1%}.yu-pay-nav div img{width: 2em}}
@media only screen and (max-width: 425px) {
.u-d-f.yu-pay-nav{display: block !important;text-align: center;}
.yu-pay-nav div img{width: 2.5em}
}
@media only screen and (max-width: 500px) {.yu-pay-nav.yu-pay-nav2{padding:7% 1px !important}}

.yu-pay-photo-img{text-align: center;margin:0 auto}
@media only screen and (min-width: 767.5px){
footer#footer {padding-bottom: 10% !important;}
.yu-pay-photo-img img{width: 60%}
}
@media only screen and (max-width: 767px){
footer#footer {padding-bottom:40% !important;}
.yu-pay-photo-img img{width: 94%}
}

#hybrid{ scroll-margin-top: 20px;}

/* point デザイン */
.point-wrap{position: relative;}
.point{position: absolute;top: -31%;left: 2%;width: 14%;}
.yu-pay-title{padding: 0 15%;}
.point-font3{font-size: 3em}

/* light-green */
.yu-pay-green-box{border: 8px solid #2BB7AA;border-radius: 30px}
.light-green-bg{background: #2BB7AA;border-radius:20px 20px 0 0;padding: 10px 0;}

/* blue */
.yu-pay-blue-box{border: 8px solid #6599D1;border-radius: 30px}
.light-blue-bg{background: #6599D1;border-radius:20px 20px 0 0;padding: 10px 0}

/* point1 */
.yu-pay-point-title-img img{ width: 60%}
.zen-maru{font-family: 'Zen Maru Gothic';}
.point1-box{background: #E3FEF5;border-radius: 20px;}
.point1-box-title{background: #2BB7AA;border-radius: 15px}
.color-red{color: #EA3434}
.point-font{font-size: 2.5em}
.point-font2{font-size: 1.2em}
.point1-box2{background: #fff;border-radius: 20px;border: #E3FEF5 1px solid}
@media screen and (max-width: 767px) {
    .point1-box, .point1-box2{padding: 30px 3% !important}
}

/* point2 */
.point2{position: absolute;top: -110%;left: 2%;width: 14%;}

@media screen and (max-width: 767px) {
.point{width: 14%;position: absolute;top: -24%;left: 2%;}
.yu-pay-point-title-img img{ width:70%}
.light-green-bg, .light-pink-bg, .light-blue-bg{border-radius: 10px 10px 0 0;}
.yu-pay-green-box {border: 4px solid #2BB7AA;border-radius: 15px;}
.yu-pay-blue-box{border: 4px solid #6599D1;border-radius: 15px}
.point2 {position: absolute;top: -59%;width: 19%;} 
.point3 {position: absolute;top: -37%;left: 2%;width: 14%;}
}

.yu-pay-hybrid3{background: #E8EEEA;padding: 15px 3%}
.yu-pay-hybrid3-title{background: #3A9875;border-radius: 50vh;width: fit-content;padding:10px 4%;text-align: center;    margin: 0 auto;}

/* resilience */
.resilience{background: #3A9875;padding: 0 20px;width: fit-content;display: flex;align-items: center;border-radius: 10px}
.resilience-title{background: #032E13;border-radius: 50vh;padding: 1% 4%}