/* common */.u-font-bold{font-weight: bold}
html { scroll-behavior: smooth;}
.contents.yu-pay-oil{margin: 0;padding: 0}
.yu-pay-oil{max-width: 100%;background: #C5DEF4;}
.yu-pay-wrap{width:82.292vw;;margin:0 auto;}
.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{width: 100%}
}

/* font */
.yu-pay-red{color: #DD0631}
.yu-pay-orange{color: #ED6B00}
.yu-pay-font-size-s{font-size: .8em}

/* background */
span.marker {background: linear-gradient(transparent 50%, #FCF7A0 50%);
}

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

/* list */
.list-green{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;}

/* title h2 */
h2.yu-pay-h2 {
  position: relative;padding: 1rem 2rem calc(1rem + 10px);background: #FAEF42;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 10% 8%}
.yu-pay-h2-wrap{position: absolute;top:10px}
@media screen and (max-width: 767px) {
    .yu-pay-inner {border-radius: 15px;padding: 0 3% 10%;margin: 0 2%;}
    h2.yu-pay-h2{font-size: 1.3em;margin: 0 2%;}
}

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

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

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

/* 安心のサービス */
.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: #ED6B00;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 #ED6B00;}
.fukidashi-top p {margin: 0;padding: 0;}

/* 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;}
.tab-green{background-color:#2BB7AA;}
.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;}

/* 対象機器と料金プラン */
p.orange-title {background: #ED6B00;padding: 5px 15px;border-radius: 50vh;width: fit-content;color: #fff;}

/* お申込み条件について */
/* table */
.u-mt40{margin-top:40px}
.u-pl10{padding-left: 10px}
.yu-pay-table th{width: 25%;background: #ED6B00;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}
}

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

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