html { scroll-behavior: smooth;}
/* common */
.m0auto{margin: 0 auto}
.contents.yu-pay-b{margin: 0;padding: 0}
.yu-pay-b{max-width: 100%;}
.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-wrap-sub{max-width: 1160px;margin:0 auto ;}
.noteList {display: table-cell;white-space: nowrap;}
.noteText {display: table-cell;}
.yu-pay-indent {padding-left:1em;text-indent:-1em;}
ul.yu-pay-list li {padding-left: 2em;text-indent: -2em;}
.u-va-t img {vertical-align: top !important;}
.u-va-b img {vertical-align: bottom !important;}
@media screen and (min-width: 767.5px) {.sp-block{display: none}
}
@media screen and (max-width: 767px) {.pc-block{display: none}
.yu-pay-wrap-inner{padding:0 3%}
.yu-pay-wrap{margin:40px auto 0}
.contents-yu{max-width: 1160px;margin: 50px auto 0;padding: 0 20px 80px 20px;}
}
 @media screen and (max-width: 767.499px) {nav.topic-path {margin: 0 !important;padding: 0 0 80px;background: #CDECF7;}}

/* font */
.font-em1{font-size: 1.2em}
.bold, .u-font-bold {font-weight: bold}
.yu-pay-red{color: #EB4118;}
.yu-pay-pink, .pink-font{color: #EF8586;}
.yu-pay-blue, .blue-font{color:#6599D1;}
.green-font{color: #2ABCAC}
.orange-font{color: #EB8151}
.sup{font-size: 0.8em;vertical-align: top;margin-left: 10px}
a.link-color{color: #000}

/* bg */
.yu-pay-sky{background: #CDECF7;max-width:100%;}
.yu-pay-white{color: #fff}
span.marker {background: linear-gradient(transparent 50%, #FFFBD1 50%);
}
span.marker-title {background: linear-gradient(transparent 50%, #FFEA28 50%);
}

/* kv */
.yu-pay-logo{width: 6em;display: inline-block;}

/* 除菌機能付き給湯器のおすすめ */
.osusume-box{border: 7px solid #CDECF7;border-radius: 20px;}
.osusume-title{background:#CDECF7;padding-bottom: 7px;}
.osusume-title{position: relative}
.arrow-osusume{position: absolute;top: 20%;right: 14px;}

/* title h2 */
h2.yu-pay-h2 {
  position: relative;padding: 1rem 2rem calc(1rem + 10px);background: #FFEA28;text-align: center;margin: 0 10%;font-family: 'TBUDゴシック B', 'TBUDGothic B' !important;font-weight: bold;font-size: 1.6em;top: -10px;}
h2.yu-pay-h2:before {
  position: absolute;top: -10px;left: -10px;width: 100%;height: 100%;content: '';border: 4px solid #010101;}
.yu-pay-inner{background: #fff;border-radius: 80px;padding:0 6% 8%}
.yu-pay-inner2{padding:0 5%}
.yu-pay-h2-wrap{position: absolute;top:10px}
@media screen and (max-width: 767px) {.yu-pay-inner {border-radius: 15px;padding: 0 3% 6%;margin: 0 2%;}
    h2.yu-pay-h2{font-size: 1.3em;margin: 0 2%;}
    .yu-pay-inner2{padding:0}
}

/* title h3 */
h3.yu-pay-h3 {
  position: relative;padding:1rem 4em calc(0rem + 10px);background: #FFEA28;text-align: center;font-family: 'TBUDゴシック B', 'TBUDGothic B' !important;font-weight: bold;font-size: 1.4em; width: fit-content;
    margin: 0 auto;border-radius: 50vh;color: #2BB7AA;text-align:center}
h3.yu-pay-h3:before {
  position: absolute;top: -5px;left: -5px;width: 100%;height: 100%;content: '';border: 2px solid #2BB7AA;border-radius: 50vh;}
@media screen and (max-width: 767px) {h3.yu-pay-h3{padding: 1rem 1.5em calc(0rem + 10px);font-size: 1.1em;}}
.h3-subtitle{background: #F9DDE1;padding: 5px 5%;border-radius: 50vh;}
.h3-subtitle2{background:#D7E5F3;padding: 5px 5%;border-radius: 50vh;}
.h3-yu-pay{border: 3px solid #2ABCAC;width: fit-content;padding: 10px 4%;border-radius: 50vh;color: #2ABCAC}
@media screen and (max-width: 767px) {.h3-subtitle, .h3-subtitle2{display: block;padding: 0 10px}}

/* title h4 */
h4.yu-pay-h4{width: fit-content;padding: 20px 3% 5px;border-bottom: 1px solid #010101;margin:0 auto;font-family: 'TBUDゴシック B', 'TBUDGothic B' !important;font-weight: bold;}
.h4-yu-pay{border-bottom: 1px solid #000;padding:0 10px;width: fit-content;}

p.pink-title {background: #EF8586;padding: 5px 15px;border-radius: 50vh;width: fit-content;color: #fff;}

/* kv */
.noteList-width{padding: 12px 10%;line-height: 1em;}
.noteList-width p{margin-bottom: 2px;}
@media screen and (max-width: 767px) {.noteList-width{padding: 10px 5%;line-height: 1.6em;}}

/* flex */
.flex-yu-pay{display: flex;flex-wrap: wrap;justify-content:space-between}

/* day */
.day-pink{background:#EF8586;border-top:10px solid #EF8586;border-bottom:10px solid #EF8586}
.day-blue{background:#6599D1;border-top:10px solid #6599D1;border-bottom:10px solid #6599D1}
.day-pink p img, .day-blue p img{width: 1em;vertical-align: middle;margin-right: 15px}
.day-pink p, .day-blue p{border: 1px #fff dashed;border-right: none;border-left: none;padding: 10px 3%;text-align: center;color: #fff}
.flex-yu-pay.flex2{margin-right: 3%}
.yu-pay-p-h3{border-bottom: 1px solid #EF8586}
.yu-pay-b-h3{border-bottom: 1px solid #6599D1}
.day-pink-box{border: 1px solid #EF8586;border-radius: 26px;padding:7%}
.day-blue-box{border: 1px solid #6599D1;border-radius: 26px;padding:7%}
@media screen and (max-width: 767px){
.flex-yu-pay.flex2{margin-right: 0}
.flex-yu-pay{display: block}
}
.img-kadomaru img{border-radius: 15px}
.palt {font-feature-settings: "palt";}

/* width */
.day-nagare{margin:0 15%}

.yu-pay-logo-img img{width: 20%;}
@media screen and (min-width: 767.5px) {.flex1{width: 60%}
.flex2{width: 36%}
.flex3{width: 30%}
.flex4{width: 5%;align-items: center;display: flex;padding-bottom:18%;}
.flex5{width: 50%}
.flex6{width: 44%}
}
@media screen and (max-width: 767px){
.flex4{text-align: center;transform: rotate(90deg);font-size: 3em !important;}
.sup{margin:0}
.yu-pay-logo-img img{width: 40%;}
}

/* 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: #2BB7AA;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, .yu-pay-option{margin: 0 25%}
.yu-pay-button img{filter: drop-shadow(0 5px 0 #AF2A0A);}
.yu-pay-option img{filter: drop-shadow(0 5px 0 #DF5152);}
@media screen and (min-width: 767.5px) {
.yu-pay-photo-img{text-align: center;margin:0 auto}
.yu-pay-photo-img img{width: 60%}
.yu-pay-button img:hover, .yu-pay-option img:hover{filter:none;}
}
@media screen and (max-width: 767px){.yu-pay-button, .yu-pay-option, .yu-pay-tell{margin: 0 5%}

}

/* tab */
.tab1-body__item.tab1-body__item--1.on {background: #EF8586;padding: 30px;}
.tab1__link {color: #fff;padding:10px;}
.tab1-body__item {
display: none;text-align: center;}
.tab1-body__item.on {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}
}

/* block5 */
.yu-pay-service{top:30px}
.yu-pay-service-inner{border:10px solid #2BB7AA;border-radius: 30px;padding:40px 3% 20px;}
@media screen and (max-width: 767px) {
.yu-pay-service-inner{border:5px solid #2BB7AA;border-radius: 10px;padding:40px 3%}
}

/* ふきだし */
.fukidashi-top{position: relative;display: inline-block;margin: 1.5em 0;padding: 7px 10px;width: 100%;color: #fff;font-size: 16px;background: #EF8586;text-align: center;border-radius: 50vh}
.fukidashi-top:before {content: "";position: absolute;top: -28px;left: 50%;margin-left: -15px;border: 15px solid transparent;border-bottom: 15px solid #EF8586;}
.fukidashi-top p {margin: 0;padding: 0;}

/* 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: 12vw;margin-right: 10px;}
.yu-pay-qa div:last-child{width: 86vw;}
}

/* 3つのplan */
.pink-bg{background:#F38587}
.blue-bg{background:#6599D1}
.green-bg{background:#2ABCAC}
.flex3-3{display: flex;gap: 10px;align-items: stretch;}
.flex3-3 > 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-3 > div{width: 100%;margin-top: 10px}
.plan-box{padding: 10px 3%;border-radius: 10px}
.plan-inner{background: #fff;border-radius: 12px;}}

/* background */
.box-wrap{border-radius: 40px;padding: 40px 3%;background: #fff;border: 2px solid #2ABCAC}
@media screen and (max-width: 767.499px) {.box-wrap{border-radius: 10px !important;padding: 30px 3%;}}


/* table */
.u-mt40{margin-top:40px}
.u-pl10{padding-left: 10px}
.yu-pay-table th{width: 25%;background: #2ABCAC;color: #fff;}
.yu-pay-table th:not(:last-child){border-bottom:1px solid #fff}
.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}
}

/* nav */
.yu-pay-nav-red{color: #E94C4F}
.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%, #0B8238 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: #E94118;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: #FEEC39;border: 6px solid #0B8238;color: #0B8238;font-weight: bold; background-image: url(/member_web/public/img/yu-pay/triangle.png);background-repeat: no-repeat;background-position: left top;    background-size: 1em;padding: 7%}
.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}}

@media only screen and (min-width: 767.5px){
footer#footer {padding-bottom: 10% !important;}}
@media only screen and (max-width: 767px){
footer#footer {padding-bottom:40% !important;}    
}

/* ユーザーボイス */
.yu-pay-uservoice{border: 9px solid #D7E5F3;border-radius: 15px}
@media only screen and (max-width: 767px){.yu-pay-uservoice {border: 5px solid #D7E5F3;border-radius: 5px;}}
.color-green{color: #2ABCAC}

/* tab */
.tab1 {
display: flex;flex-direction: row;text-align: center;margin: 0 !important;
  }
.tab1__item {flex: 1;flex-basis: 120px;}
.tab1__link {
display: block;text-decoration: none;color: #2D3132;cursor: pointer;border-top-right-radius: 15px;border-top-left-radius: 15px;padding:10px;font-size: 1.5em;font-family: "TBUDゴシック B", "TBUDGothic B";height: 100%;line-height: 1.2em}
.tab-pink{background-color:#EF8586;}
.tab-blue{background-color:#6599D1 !important;}
.tab-green{background-color:#2BB7AA !important;}
.tab1-sub-item{background: #fff;padding: 5px 8%;color: #EF8586;border-radius: 50vh;font-size: 1.1vw;display: inline-block;margin-top: 10px;}
.tab2-sub-item{background: #fff;padding: 5px 8%;color: #6599D1;border-radius: 50vh;font-size: 1.2vw;display: inline-block;margin-top: 10px;}
.tab3-sub-item{background: #fff;padding: 5px 8%;color: #2BB7AA;border-radius: 50vh;font-size: 1.4vw;display: inline-block;margin-top: 10px;}
.tab1-body__item.tab1-body__item--1.on {background: #EF8586;padding: 30px;}
.tab1-body__item.tab1-body__item--2.on {background: #6599D1;padding: 30px;}
.tab1-body__item.tab1-body__item--3.on {background: #2BB7AA;padding: 30px;}
.tab1__link {color: #fff;padding:10px;}
.tab1-body__item {
display: none;text-align: center;}
.tab1-body__item.on {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: 2vw;border-radius:8px;line-height: 1.5em;}
.tab1__link{font-size: 2.5vw;}
.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: 20px 3%;}
.tab-inner{border-radius: 5px}
}
span.tab1__link.tab-green, span.tab1__link.tab-pink, span.tab1__link.tab-blue{opacity: .5;}
span.tab1__link.tab-green.on, span.tab1__link.tab-pink.on, span.tab1__link.tab-blue.on {opacity: 1;}

.aq-logo img{width: 2em;padding-bottom: 10px}

/* 3つのplan */
.flex3-2{display: flex;gap: 10px;align-items: stretch;}
.flex3-2 > 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-2 > div{width: 100%;margin-top: 10px}
.plan-box{padding: 10px 3%;border-radius: 10px}
.plan-inner{background: #fff;border-radius: 12px;}}

/*lot */
.lot-box{border:#2BB7AA 7px solid;border-radius: 50px;}
.egao-p-wrap{border: #E86E71 19px solid;border-radius: 12px;}
@media screen and (max-width: 767.499px) {.lot-box{border-radius: 12px;border:#2BB7AA 3px solid;}
.egao-p-wrap{border: #E86E71 3px solid;}}

/* 対象製品 */
.font-gold{color: #A38F5E}
.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}}

/* ご利用の流れ */
.bg-light-blue{background: #F5F6F6}