/* common */.u-font-bold{font-weight: bold}
html { scroll-behavior: smooth;}

.contents.yu-pay-contents{margin: 0;padding: 0}
.yu-pay-contents{max-width: 100%;}
.yu-pay-wrap{width:82.292vw;margin:0 auto;}
@media screen and (max-width: 767.499px) {
.yu-pay-wrap{width: 100%; padding: 0 3%}}

.m0auto{margin: 0 auto}
@media only screen and (max-width: 767px) {
.m0auto-sp{margin: 0 auto}
}
.yu-pay-indent {padding-left:1em;text-indent:-1em;}

/* 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: #F38587;border-radius:  50%; position:relative;top: -1px;margin-right: 5px;}

.yu-pay-indent {padding-left:1em;text-indent:-1em;}

/* plan */
.pink-bg{background:#F38587}
.blue-bg{background:#6599D1}
.green-bg{background:#2ABCAC}
.gray-bg{background: #EEEFEF}

/* color */
.pink-font{color: #EF8586}
.blue-font{color: #6599D1}
.green-font{color: #2ABCAC}
.red-font{color: #E44242}
span.marker {background: linear-gradient(transparent 50%, #FFEA28 50%);
}

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

/* title */
.h2-yu-pay{background: #A38F5E;width: fit-content;padding: 10px 10%;border-radius: 50vh;color: #fff}
.h3-yu-pay{border: 3px solid #A38F5E;width: fit-content;padding: 10px 4%;border-radius: 50vh;color: #A38F5E}
.yu-pay-h4{border-bottom: 3px solid #000;padding:0 10px;width: fit-content;}
.h4-yu-pay{border-bottom: 1px solid #000;padding:0 10px;width: fit-content;}

/*hokyo */
.hojyo{width: 50%;margin: 0 auto;padding: 40px 0;}

/* 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;}}

/*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}}

/* oil */
.oil-wrap{border: 1px solid #E44242}


/* お客様の声 */
.user-merihari-wrap {border: 16px solid #EEEFEF;border-radius: 25px;padding: 20px 2%;box-sizing: border-box}
.item {width: calc(50% - 20px);}
@media screen and (max-width: 767.499px) {
    .user-merihari-wrap{border: 5px solid #EEEFEF;border-radius: 10px;}
    .item {width:100%}
}

/* ご契約の流れ */
.gray-bg2{background: #F5F6F6}
.box-wrap{border-radius: 40px;padding: 30px 3%;background: #fff}

/* お申込み条件について */
/* 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 #000;border-right: 1px solid #000}
.yu-pay-table tr:last-child td{border-bottom: 1px solid #000;}
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 #000}
}

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

/* qa */
.yu-pay-qa div:first-child{width: 6vw;margin-right: 20px;}
.yu-pay-qa div:last-child{width: 94vw;}
.yu-pay-u-border{padding-bottom:20px;
background-image:linear-gradient(to right, #000 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;}
}

/* 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 (min-width: 767.5px){
footer#footer {padding-bottom: 10% !important;}}
@media only screen and (max-width: 767px){
footer#footer {padding-bottom:40% !important;}    
}
@media only screen and (max-width: 500px) {.yu-pay-nav.yu-pay-nav2{padding:7% 1px !important}}