@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap');

/*---- 共通部分 ----*/
html{
    scroll-behavior: smooth;
}
/* support iOS */
html{
    height: -webkit-fill-available;
}
body{
min-height: 100vh;
min-height: -webkit-fill-available;
}
body{
    font-family: "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
}
article{
    position: relative;
    overflow-x: hidden;
}
img{
    width: 100%;
    image-rendering: -webkit-optimize-contrast;
}
p{
    font-size: 18px;
    line-height: 1.7;
}
h2,h3{
    color: #B10017;
    font-weight: bold;
    
}
h2{
    font-size: 28px;
    text-align: center;
    line-height: 1.3;
}
h3{
    font-size: 22px;
}

h4{
    font-size: 28px;
    font-weight: bold;
    color: #fff;
    padding: 12px 0;
    border-radius: 100vh;
}
.link{
    text-decoration: underline;
    color: #1571DA;
    font-size: 16px;
    display: block;
    position: relative;
    text-align: left;
}
.link::before{
    content: "";
    display: inline-block;
    position: absolute;
    width: 8px;
    height: 8px;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    background-image: url(../img/link_icon.png);
    background-size: contain;
    background-repeat: no-repeat;
}
.sec_innr{
    margin: 0 auto;
}
.notes{
    font-size: 12px;
}

@media screen and (max-width:768px) {
    p{
        font-size: 3.733vw;
    }
    h2{
        font-size:4.8vw;
        text-align: left;
        line-height: 1.5;
    }
    h3{
        font-size: 4.267vw;
    }
    h4{
        padding: 1.067vw 0;
        font-size: 4.8vw;
        
    }
    .notes{
        font-size: 3.2vw;
        font-weight: normal;
    }
    .link{
        font-size: 3.2vw;
    }
    .link::before{
        width: 2.133vw;
        height: 2.133vw;
        top: 52%;
    }
    .sec_innr{
        width: 91.467vw;
        padding: 0;
    }
}

/* ----タブレット・SP時表示・非表示切り替え---- */
.view--sp{
    display: none;
}
.view__tab{
    display: none;
}
.only__tab{
    display: none;
}
@media screen and (max-width: 1200px) {
    .only__pc{
        display: none;
    }
    .view__tab{
        display: block;
    }
    .only__tab{
        display: block;
    }
}
@media screen and (max-width:768px) {
    .view--pc{
        display: none;
    }
    .view--sp{
        display: block;
    }
    .only__tab{
        display: none;
    }
}


    




/*---- KV・ヘッダー ----*/

.main_visual{
    width: 100%;
    text-align: center;
    position: relative;
}

.kv_links{
    width: 75%;
    max-width: 1200px;
    display:flex;
    justify-content: space-between;
    position: absolute;
    bottom: 6%;
    left: 50%;
    transform: translateX(-50%);
}
.kv_links div{
    width: 48.4%;
    max-width: 580px;
}

header{
    background: #000;
}
header .header_innr{
    max-width: 1200px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    padding: 15px;
}
header .header_innr nav ul{
    display: flex;
    justify-content: space-between;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
}
.header_logo{
    min-width: 120px;
    width: 14.52%;
    margin-right: 10px;
}
.globalMenuSp{
    width: 80%;
    max-width: 855px;
}
.menu_br{
    display: none;
}
@media screen and (min-width:1700px) {
    .kv_links{
        bottom: 8.5%;
    }
}
@media screen and (max-width:1000px) {
    header .header_innr nav ul{
        align-items: center;
    }
    .menu_br{
        display: block;
    }
}

@media screen and (max-width:768px) {
    .kv_links{
        width: 91.467vw;
        display:block;
        bottom: 5.333vw;
    }
    .kv_links div{
        width: 100%;
    }
    .kv_links div:last-of-type{
        margin-top: 2.667vw;
    }

    header .header_innr{
        padding:7.493vw 0 3.013vw;
    }
    .header_logo{
        width: 63.733vw;
        margin-left: 6.133vw;
        margin-right: 0;
    }
    header .header_innr nav ul{
        width: 100%;
        display: block;
    }
    header .header_innr nav ul li{
        width:  91.467vw;
        margin:0 auto;
        font-size: 5.333vw;
    }
    header .header_innr nav ul .logo{
        padding-top: 7.467vw;
        margin-bottom: 10.133vw;
        text-align: left;
        margin-left: 6.133vw
    }
    header .header_innr nav ul .logo p{
        width:63.733vw;
    }
    header .header_innr nav ul .menu{
        font-size: 4.8vw;
        margin-bottom: 7.2vw;
    }

    header .header_innr nav ul li a{
        width: 64vw;
        border-bottom: 1px solid #FFF;
        margin:0 auto;
    }

    header .header_innr nav ul li.inquiry a{
        width: 64vw;
        border-bottom: 1px solid transparent;
        margin:0 auto 8vw;
    }
    header .header_innr nav ul li .btn_fixed{
        margin:0 auto;
    }
    header .header_innr nav ul li .btn_fixed a{
        background-color: #FFF;
        color:#C6054D;
        font-weight: bold;
        font-size: 3.467vw;
        margin:0 auto 12.533vw;
        border-radius: 10.667vw;
    }

    header .header_innr nav ul .f_logo{
        max-width: 39.733vw;
        margin: 0 auto 6.133vw;
    }
    header .header_innr nav ul .copy{
        font-weight: 400;
        font-size: 2.933vw;
        color:#858585;
        /* padding-bottom: 8vw; */
        padding-bottom: 8vw;
    }
    @supports(-webkit-touch-callout: none){
        /* iPhoneの表示のみ指定を上書き */
        header .header_innr nav ul .copy{
            /* height: -webkit-fill-available; */
            padding-bottom: 28vw;

        }
    }
    .menu_br{
        display: none;
    }
}


/*---- 追従バナー---- */
.fixed_bnr{
    width: 100%;
    background: #fff;
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 19px 12px 15px;
    height: 100px;
    z-index: 100;
    box-shadow: 0px -2px 4px rgba(0, 0, 0, .15);
}
.fixed_bnr .fixed_bnr_innr{
    max-width: 1200px;
    display: flex;
    align-items: center;
    margin: 0 auto;
}
.fixed_bnr p{
    font-size: 22px;
    font-weight: bold;
    text-align: center;
}
.fixed_bnr p span{
    color: #C6054D;
}
.fixed_bnr .card{
    width: 117px;
    margin-right: 21px;
    min-width: 110px;
    min-width: 90px;
}
.btn_fixed{
    margin-left: 29px;
}
.btn_fixed a{
    color: #fff;
    background: #C6054D;
    width: 370px;
    display: block;
    font-size: 22px;
    border-radius: 30px;
    padding: 12px 0 11px;
}
.btn_fixed a:hover{
    background: #9F043E;
}
.return_top{
    margin-left: 30px;
    width: 64px;
    min-width: 64px;
}
@media screen and (max-width:1024px) {
    .fixed_bnr{
        padding: 0;
        display: flex;
    }
    .fixed_bnr .card,.fixed_bnr .bnr_txt{
        display: none;
    }
    .btn_fixed{
        margin: 0 auto;
    }
    .return_top{
        margin-left: 0;
        position: absolute;
        top: 50%;
        right: 15px;
        transform: translateY(-50%);
    }
}

@media screen and (max-width:768px) {
    
    .fixed_bnr{
        padding: 1.867vw 0;
        height: 14.4vw;
    }
    .btn_fixed{
        line-height:4.533vw;
    }
    .btn_fixed a{
        width: 52.533vw;
        font-size:3.467vw;
        border-radius: 5.333vw;
        padding: 3.2vw 0 2.933vw;
    }
    .return_top{
        width: 12.8vw;
        min-width: 12.8vw;
        right: 4.267vw;
    }
}

/*---- ユナイトカードについて---- */
#unite_card{
    padding: 104px 20px 60px;
    text-align: center;
    position: relative;
    background-size: 595px,541px;
    background-image: url(../img/orange_ribbon.png?1),url(../img/red_ribbon.png?1);
    background-repeat: no-repeat;
    background-position: top 440px left -420px,top 1192px right -340px;
}
.pink_ribbon{
    width:416px;
    height: 414px;
    bottom: -154px;
    left: -280px;
    position: absolute;
    background-image: url(../img/pink_ribbon.png?1);
    background-repeat: no-repeat;
    z-index: 0;
}
#unite_card .card_logo{
    width: 235px;
    margin: 0 auto 18px;
}
.unite_card_ttl{
    color: #222222;
}
#unite_card .card_desc{
    font-size: 18px;
    max-width: 808px;
    margin: 18px auto 0;
    color: #B10017;
    font-weight: bold;
}
#unite_card .card_feature_list{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 40px auto 0;
    max-width: 1170px;
}

#unite_card .card_feature_list li:nth-child(n+3){
    margin-top: 30px;
}
#unite_card .card_feature_list li{
    width: 49%;
    max-width: 570px;
}
#unite_card .point_ttl{
    margin-top: 103px;
}
.point_ttl_lead{
    font-weight: bold;
    margin: 25px auto 5px;
}

.point_capture{
    display: flex;
    justify-content: space-between;
    margin: 36px auto 30px;
    max-width: 1170px;
    position: relative;
}
.rpoint_loop{
    position: absolute;
    top: 0;
    left: 32%;
    width: 38.64%;
    max-width: 452px;
}
.rpoint_shop{
    margin-right: auto;
}
.rpoint_shop,.rpoint_service{
    width: 28.9%;
    max-width: 388px;
}

.rakuten_card_link{
    width: 304px;
    margin: 5px auto 4px;
    display: block;
}


.point_check{
    margin:80px auto 0;
    max-width: 1170px;
    border-top: solid 1px #707070;
    display: flex;
    padding:71px 0 0;
    justify-content: space-between;
    text-align: left;
    position: relative;
    z-index: 1;
}

.point_check dt{
    font-size: 22px;
    line-height: 36px;
    color: #B10017;
}
.point_check dd{
    font-size: 18px;
    line-height: 27px;
}
.point_check_text{
    max-width: 470px;
    width: 42%;
}
.point_check_text dd{
    margin-top: 40px;
}
.edy_point{
    margin-top: 40px;
}
.point_check_capture{
    max-width: 570px;
    margin-left: 2%;
    width: 52%;
}
.receipt_capture dd{
    margin-top: 11px;
}
@media screen and (max-width:768px) {
    #unite_card{
        padding: 10.667vw 0 16vw;
        text-align: left;
        background-image: none;
        width: 91.467vw;
        margin: 0 auto;
    }
    #unite_card .card_logo{
        width: 37.333vw;
        margin: 0 auto 3.733vw;
    }
    .unite_card_ttl{
        text-align: center;
    }
    #unite_card .card_desc{
        font-size: 3.733vw;
        width: 100%;
        margin: 5.333vw auto 0;
    }
    #unite_card .card_feature_list{
        display: block;
        margin-top: 0;
        padding: 0;
    }
    #unite_card .card_feature_list li:nth-child(n+3){
        margin-top: 5.333vw;
    }
    #unite_card .card_feature_list li{
        margin-top: 5.333vw;
        width: 100%;
        max-width: 100%;
    }
    #unite_card .point_ttl{
        margin-top: 16vw;
    }
    .point_ttl_lead{
        margin: 2.4vw auto;
        font-size: 3.733vw;
    }
    .point_capture{
        flex-wrap: wrap;
        margin: 5.067vw auto 8vw;
        padding: 0;
        width: 100%;
        max-width: 1170px;
    }
    .rpoint_loop{
        width: 80.533vw;
        position: unset;
        transform: unset;
        margin: 0 auto;
    }
    .rpoint_shop,.rpoint_service{
        width: 44.533vw;
        margin-top: 5.333vw;
    }
    .point_link_lead{
        font-weight: bold;
        font-size: 3.2vw;
    }
    .rakuten_card_link{
        width: 61.267vw;
        margin:4vw auto 5.067vw;
    }
    .point_check{
        margin:5.333vw auto 0;
        display: block;
        padding:0;
    }
    .point_check dl{
        margin-top: 5.333vw;
    }
    .point_check dt{
        font-size: 4.267vw;
        line-height: 5.6vw;
    }
    .point_check dd{
        font-size: 3.733vw;
        line-height: 5.6vw;
    }
    .point_check_text{
        width: 100%;
        max-width: 100%;
    }
    .point_check_text dd{
        margin-top: 2.667vw;
    }
    .point_check_capture{
        max-width: 100%;
        margin-left: 0;
        width: 100%;
    }
    .receipt_capture dd{
        margin-top: 2.667vw;
        width: 100%;
    }
    
}

/*---- 楽天Edyについて ----*/
#edy{
    background: #EBEBEB;
    text-align: center;
    padding: 60px 0 20px;
    
}

#edy .sec_innr{
    padding-bottom: 51px;
    background-size: 515px;
    background-image: url(../img/edy_ribbon.png?1);
    background-repeat: no-repeat;
    background-position: top 540px right -420px;
}
#edy .edy_desc{
    margin-top: 30px;
    font-weight: bold;
}
.rakuten_edy_link_desc{
    margin-top: 24px;
}
.rakuten_edy_link{
    width: 253px;
    display: block;
    margin: 7px auto 0;
}
.edy_desc_cap{
    justify-content: space-between;
    margin: 25px auto 0;
    max-width: 1210px;
    padding: 0 20px;
    
}

.edy_cap{
    background: #fff;
}
.edy_cap h3{
    text-align: center;
}
.edy_cap .notes{
    text-align: left;
    margin-top: 15px;
    
}

.charge_edy{
    width: 100%;
    padding: 16px 25px 20px;
}

.charge_edy_innr{
    display: flex;
    flex-wrap: wrap;
    max-width: 1082px;
    margin: 18px auto 0;
}
.charge_edy .charge_edy_innr .edy_cap01{
    padding-right: 40px;
    order: 1;
    width: 47.41%;
}
.charge_edy .charge_edy_innr .notes{
    order: 3;
    line-height: 1.7;
}
.charge_edy .charge_edy_innr .edy_cap02{
    padding:6px 0 5px 30px;
    margin-top: 21px;
    border-left: solid 1px #707070;
    order: 2;
    width: 52.59%;
}


.container_edy_cap{
    display: flex;
    justify-content: space-between;
}
.container_edy_cap >div{
    max-width: 570px;
    padding: 20px 25px 16px;
    width: 48.71%;
    margin-top: 26px;
}

.pay_edy_cap{
    margin-top: 17px;
}
.get_point_cap{
    margin-top: 34px;
}
.edy_my_page{
    background: #fff;
    padding: 40px 20px 37px;
    /* margin-top: 51px; */
}
.edy_my_page_innr{
    max-width: 970px;
    margin: 0 auto;
}
.edy_my_page_innr h4{
    background: #000B50;
    margin-bottom: 15px;
}

.my_page_link{
    width: 317px;
    margin: 20px auto 0;
    position: relative;
}
.my_page_desc{
    color: #000B50;
    font-weight: bold;
    text-align: center;
}
.my_page_feature{
    display: flex;
    justify-content: space-between;
    margin-top: 19px;
}
.my_page_feature >div{
    background: #F2F4FF;
    border-radius: 2px;
    max-width: 470px;
    width: 48.45%;
    padding: 11px 15px 9px;
}
.my_page_feature >div dl{
    color: #000B50;
    font-weight: bold;
    line-height: 1.4;
}
.my_page_feature >div dl dt{
    border-bottom: solid 1px #000B50;
    font-size: 28px;
    padding-bottom: 2px;
}
.my_page_feature >div dl dd{
    font-size: 22px;
    margin: 20px auto 0;
    width: 96%;
}
.my_page_feature >div .notes{
    margin-top: 10px;
}
.more_edy{
    font-size: 22px;
    font-weight: bold;
    margin-top: 21px;
    color: #B10017;
}



@media screen and (max-width:768px) {
    #edy{
        text-align: left;
        padding: 5.333vw 0 7.2vw;
    }
    #edy .sec_innr{
        background: none;
        padding-bottom: unset;
    }
    #edy .edy_desc{
        margin-top: 2.667vw;
    }
    .rakuten_edy_link_desc{
        margin-top: 2.667vw;
    }
    .rakuten_edy_link{
        width: 51.733vw;
        margin: 2.667vw auto 0;
    }
    .edy_desc_cap{
        padding: 0;
        margin-top: 2.667vw;
    }
    
    .edy_cap .notes{
        margin: 4.8vw auto 0;
        width: 80.533vw;
    }
    .charge_edy{
        padding:5.333vw 0 5.6vw;
    }
    .charge_edy_innr{
        width: 100%;
        margin: 18px auto 0;
    }
    .charge_edy_innr >div{
        margin:0 auto;
    }
    .charge_edy .charge_edy_innr .edy_cap01{
        padding-right: 0;
        width: 68.267vw;
        order: 1;
    }
    .charge_edy .charge_edy_innr .notes{
        order: 2;
        width: 80.533vw;
    }
    .charge_edy .charge_edy_innr .edy_cap02{
        padding:0;
        margin: 8.533vw 0 0 9.867vw;
        width: 78.667vw;
        order:3;
        border: none;
    }
    
    .container_edy_cap{
        display: block;
        
    }
    .container_edy_cap >div{
        width: 100%;
        max-width: 100%;
        padding: 5.333vw 0 3.2vw;
        margin-top: 5.333vw;
    }
    
    .pay_edy_cap{
        margin: 4vw 0 0 5.333vw;
        width:82.133vw;
    }
    .get_point_cap{
        margin: 7.733vw auto 0;
        width: 80.533vw;
    }


    .edy_my_page{
        padding: 5.867vw 0 7.2vw;
        margin-top: 5.333vw;
    }
    .edy_my_page_innr{
        width: 91.2vw;
    }
    .edy_my_page_innr h4{
        text-align: center; 
        margin-bottom: 2.667vw;
    }
    .my_page_desc{
        font-size: 3.733vw;
    }
    .my_page_feature{
        display: block;
        margin-top: 2.667vw;
    }
    .my_page_feature >div{
        border-radius: 0.533vw;
        width: 100%;
        max-width: 100%;
        padding: 2.933vw 5.333vw 2.4vw;
        
    }
    .my_page_feature >div:nth-child(2){
        margin-top: 5.333vw;
    }
    .my_page_feature >div dl{
        text-align: center;
    }
    .my_page_feature >div dl dt{
        font-size: 4.267vw;
        padding-bottom: 2.133vw;
        border-bottom: solid 0.267vw #000B50;
    }
    .my_page_feature >div dl dd{
        font-size: 3.733vw;
        text-align: left;
        margin: 3.467vw auto 0;
    }
    .my_page_feature >div:first-of-type dl dd{
        width: 53vw;
    }
    .my_page_feature >div:nth-of-type(2) dl dd{
        width: 67vw;
    }
    .my_page_feature >div .notes{
        margin-top: 2.667vw;
    }
    
    .more_edy{
        font-size: 3.733vw;
        margin: 2.667vw auto 0;
        width: 80.8vw;
    }
    .my_page_link{
        width: 64.4vw;
        margin: 4.267vw auto 0;
    }
}


/*---- 楽天チェック ----*/
#rakuten_check{
    text-align: center;
    padding: 106px 20px 0;
}

#rakuten_check .raku_ck_innr{
    max-width: 970px;
    margin: 0 auto 19px;
    font-weight: bold;
}
#rakuten_check .raku_ck_innr h4{
    background:#E02E34;
}

.raku_ck_catch{
    font-size: 28px;
    color: #B10017;
    margin: 18px 0 20px;
}

.raku_ck_detail{
    background: #FBDDD7;
    margin-top: 19px;
    padding:32px 0 30px;
}
.raku_ck_detail h5{
    font-size: 28px;
    color: #B10017;
    margin-bottom: 9px;
}

.flow_check_in{
    width: 90.42%;
    max-width: 877px;
    margin: 27px auto 0;
}
#rakuten_check .link{
    width: 258px;
    margin: 0 auto;
    position: relative;
}
@media screen and (max-width:768px) {
    #rakuten_check{
        padding: 5.333vw 0 0;
    }
    #rakuten_check .raku_ck_innr{
        width: 91.2vw;
        margin: 0 auto 14px;
    }
    .raku_ck_catch{
        font-size: 3.733vw;
        margin: 4.533vw 0 3.733vw;
    }
    .raku_ck_detail{
        margin-top: 3.733vw;
        padding:3.733vw 0 6.667vw;
    }
    .raku_ck_detail h5{
        font-size: 3.733vw;
        margin-bottom: 3.733vw;
    }
    
    .flow_check_in{
        width: 86.133vw;
        margin: 28px auto 0;
    }
    #rakuten_check .link{
        width: 52.32vw;
    }
    .raku_ck_desc{
        text-align: left;
    }
}


/*---- お申し込み方法 ----*/

#method{
    padding: 100px 20px 0;
    position: relative;
    background-size: 557px;
    background-image: url(../img/method_ribbon_red.png?1);
    background-repeat: no-repeat;
    background-position: top -45px left -350px;
}
#method .method_orange_ribbon{
    width:495px;
    height: 500px;
    bottom: -200px;
    right: -400px;
    position: absolute;
    background-image: url(../img/method_orange_ribbon.png?1);
    background-repeat: no-repeat;
    z-index: 1;
}
.method_innr{
    max-width: 1170px;
    margin: 0 auto;
}
.method_ttl_lead{
    margin-top: 30px;
    font-weight: bold;
    text-align: center;
}
.method_ttl_lead span{
    color: #B10017;
}
.method_desc{
    background: #EBEBEB;
    padding: 20px;
    margin-top: 30px;
}
.method_desc dl{
    max-width: 723px;
    margin: 0 auto;
    line-height: 1.5;
    
}
.method_desc dt{
    padding-bottom: 8px;
    font-size: 22px;
    text-align: center;
}
.method_desc dd{
    padding-top: 11px;
    font-weight: bold;
    border-top: solid 1px #707070;
}

/* ----タブ---- */
.tab {
    width: 100%;
    max-width: 1170px;
    margin: 0 auto;
    padding-bottom: 205px;
    font-weight: bold;
}
.tab .tab-panel__item,.tab .tab-trigger__item{
    width: 48.7%;
    max-width: 570px;
}

.rounded{
    border-radius: 60px;
    text-align: center;
    font-size: 22px;
    line-height: 1.3;
}
.web_panel .rounded{
    padding: 14px 0 13px;
}
.tab .tab-panel__item p:not(:first-of-type) .rounded{
    margin-top: 56px;
}
@media screen and (max-width: 1024px) {
    .rounded {
        font-size: 18px;
    }
    
    .tab {
        padding-bottom: 130px;
    }
}


@media screen and (max-width: 768px) {
    .tab {
        padding-bottom: 0;
    }
    .tab .tab-panel__item p:not(:first-of-type) .rounded{
        margin-top: 8.8vw;
    }
    .rounded{
        font-size: 3.733vw;
        border-radius: 1.6vw;
    }
    .web_panel .rounded{
        margin-top: 8.8vw;
        padding: 4.267vw 0 4vw;
    }
    .web_panel .rounded:hover{
        padding: 4.95vw 0 4.5vw;
    }

    .web_panel p:nth-of-type(2) .rounded{
        padding: 2.4vw 0 1.6vw;
    }
    .web_panel p:nth-of-type(2) .rounded:hover{
        padding: 3vw 0 2.2vw;
    }

}



.tab-trigger__list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}
.tab-trigger__item {
    color: #fff;
    background: #B10017;
    position: relative;
    margin-top: 56px;
    padding: 16px 0 15px;
}

@media screen and (max-width: 768px) {
    .tab-trigger__item {
        margin-top: 8.8vw;
        font-size: 3.2vw;
        line-height: 4.8vw;
        height: 13.067vw;
        text-align: left;
        padding-left: 2.667vw;
        padding-top: 2.133vw;
        border-radius: 0; /*  角丸リセット */
        /*  左上のみ角丸 */
        border-top-left-radius: 1.6vw;
        -webkit-border-top-left-radius: 1.6vw;
        -moz-border-radius-topleft: 1.6vw;
        /*  右上のみ角丸 */
        border-top-right-radius: 1.6vw;
        -webkit-border-top-right-radius: 1.6vw;
        -moz-border-radius-topright: 1.6vw;
    }
    
}
.tab-panel {
    margin-top: 55px;
    position: relative;
}
.tab-panel__list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}
@media screen and (max-width: 768px) {
    .tab-panel {
        margin-top: 0;
    }
    .tab-panel__list {
        display: block;
    }
}
.flow_intro{
    background: #D94E00;
    color: #fff;
    position: relative;
    margin: 40px auto 0;
    font-weight: bold;
    padding: 17px 0 14px;
    max-width:1170px;
}
@media screen and (max-width: 768px) {
    .flow_intro{
        margin-top: 5.333vw;
        line-height: 1.3;
        padding:1.067vw 0 0.8vw;
        font-size: 4.267vw;
    }
}
.tab-panel__item p a{
    display: block;
    color: #B10017;
    background: #fff;
    border: solid 2px #B10017;
}
.tab-panel__item p a:hover,.tab-panel__item p a:active{
    background: #8D0012;
    color: #fff;
    border: none;
    padding: 16px 0 15px;
}
@media screen and (max-width: 768px) {
    .tab-panel__item p a{
        border: solid 0.6vw #B10017;
    }
    .tab-panel__item p a:hover,.tab-panel__item p a:active{
        padding: 4.8vw 0 4.533vw;
    }
}

.web_panel .rounded .notes{
    margin-left: 10px;
}
@media screen and (max-width: 768px) {
    
    .web_panel .rounded .notes{
        margin-left: 0;
        text-align: center;
    }
}



.web_panel p{
    position: relative;
}

.tab-trigger__item::before,
.tab .rounded:after{
    content: "";
    display: block;
    z-index: 4;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 19px;
    background-size: contain;
    background-repeat: no-repeat;
}
@media screen and (max-width: 768px) {
    .tab-trigger__item::before,
    .tab .rounded:after{
        width: 5.333vw;
        height: 3.467vw;
    }
    .tab-trigger__item{
        background: #D5D5D5;
        color: #000;
        cursor: pointer;
    }
    .tab-trigger__item.is-active{
        background: #B10017;
        color: #fff;
    }
}
.tab .rounded::after{
    bottom: -40px;
    background-image: url(../img/arrow.png);
}
@media screen and (max-width: 768px) {
    .tab .rounded::after{
        bottom: -6.133vw;
    }
    .tab .tab-trigger__item::after{
        display: none;
    }
    .tab-trigger__list{
        position: relative;
    }
    .flow_intro:after,
    .tab-trigger__list::after{
        content: "";
        display: block;
        z-index: 4;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 5.333vw;
        height: 3.467vw;
        bottom: -6.133vw;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .flow_intro:after{
        background-image: url(../img/arrow_orange.png);    
    }
    .tab-trigger__list::after{
        background-image: url(../img/arrow.png);
    }
}


.tab-trigger__item::before{
    top: -40px;
    background-image: url(../img/arrow_orange.png);
}
.web_panel .step_number{
    position: absolute;
    z-index: 4;
    top: 52%;
    left: 25px;
    transform: translateY(-50%);
    font-size: 14px;
}
@media screen and (max-width: 768px) {
    .tab-trigger__item::before{
        display: none;
    }

    .web_panel .step_number{
        font-size: 3.2vw;
        top: 54%;
    }
}

.finish{
    color: #B10017;
    font-size: 28px;
    text-align: center;
    margin: 59px 0 30px;
}
.tab-panel__item div{
    max-width: 485px;
    margin: 0 auto;
    color: #B10017;
}
.method_receipt{
    position: absolute;
    top: 175px;
    right: 0;
    z-index: 4;
    width: 48.71%;
    max-width: 570px;
    background: #FFECD8;
}
.method_receipt_innr{
    width: 93%;
    max-width: 530px;
    padding: 3.86% 0 3.5%;
    margin: 0 auto;
}
.tab-panel__item .notes{
    font-weight: normal;
}

.paper_panel .notes{
    color: #000;
    margin-top: 15px;
    font-size: 12px;
}

@media screen and (max-width: 1024px) {
    
    .method_receipt{
        top: 193px;
    }
    .paper_panel p{
        font-size: 16px;
    }
}
@media screen and (max-width: 768px) {
    .finish{
        font-size: 4.267vw;
        margin: 8.533vw 0 2.667vw;
    }
    .tab-panel__item {
        display: none;
        width: 100% !important;
        max-width: 100% !important;
    }
    .tab-panel__item.is-active {
        display: block !important;
    }
    .tab-panel__item div {
        max-width: 100%;
        margin-top: 8.8vw;
    }
    .paper_panel .notes{
        font-size: 3.2vw;
        color: #000;
    }
    .paper_panel div p{
        font-size: 4.267vw;
    }
    .method_receipt{
        position: unset;
        width: 100%;
        max-width: 100%;
        margin-top: 6.667vw;
    }
    .tab-trigger,.flow_intro,.tab-panel__list,.method_receipt_innr{
        width: 91.467vw;
    }
    .method_receipt_innr{
        max-width: 91.467vw;
        padding: 3.733vw 0 4.533vw;
    }
    .tab-trigger,.tab-panel__list{
        margin: 0 auto;
    }
}



@media screen and (max-width:768px) {
    #method{
        margin-top: 8vw;
        padding: 8vw 0 16vw;
        background: none;
    }
    .method_innr{
        width: 91.467vw;
        padding: 0;
    }
    .method_ttl_lead{
        margin-top: 2.667vw;
        font-size: 3.733vw;
        text-align: left;
    }
    
    .method_desc{
        margin-top: 2.667vw;
        padding:2.667vw 0 4vw;
    }
    .method_desc dl{
        width: 100%;
        font-size: 3.733vw;
    }
    .method_desc dt{
        font-size: 3.733vw;
        padding: 0 2vw 1.333vw;
    }
    .method_desc dd{
        padding-top: 2.667vw;
        margin: 0 5.333vw;
    }
}



/*---- よくある質問 ----*/

#faq{
    background: #EBEBEB;
    padding: 64px 20px 60px;
    background-size: 510px;
    background-image: url(../img/faq_ribbon.png?1);
    background-repeat: no-repeat;
    background-position: top 200px left -405px;
}

#faq .faq_lead{
    margin-top: 32px;
    text-align: center;
    font-weight: bold;
}

#acMenu{
    max-width:970px;
    margin: 15px auto 0;
    font-weight: bold;
    border-radius: 2px;
    background:#fff;
    
}
#acMenu dt,#acMenu dd{
    border-radius: 2px;
    line-height: 1.5;
}
#acMenu dt:not(:first-of-type){
    margin-top: 20px;
}
#acMenu dt{
    display:block;
    color: #B10017;
    font-size: 22px;
    position: relative;
    padding:16px 60px 11px 42px;
    cursor: pointer;
}
#acMenu dd{
    display:none;
    font-size: 18px;
    color: #222222;
    padding:0 60px 15px 42px;
    position: relative;
}
#acMenu dd p{
    line-height: 1.4;
    text-indent: -1em;
}
#acMenu dd p{
    margin-bottom: 1em;
}
#acMenu dt::before,
#acMenu dd::before{
    position: absolute;
}

#acMenu dt::before{
    content: 'Q.';
    left: 18px;
}
#acMenu dt::after{
    content: '';
    position: absolute;
    top: 22px;
    right: 20px;
    background-image: url(../img/arrow.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 30px;
    height: 19px;
    transform: rotate(0deg);
    transition: all 0.5s;
}

#acMenu dt.add::after{
    transform: rotate(180deg);
}

#acMenu dd::before{
    content: 'A.';
    top: 0;
    left: 20px;
}
#acMenu dd p.q_a_raku_point{
    margin: 0;
    text-indent: 0;
}
#acMenu dd p.q_a_edy_answer{
    border-top: 1px solid #000;
    margin-top: 1em;
    padding-top: 1em;
}
#acMenu dd p.q_a_edy_answer .q_a_edy_answer_ttl,
#acMenu dd p.q_a_raku_point .q_a_raku_point_ttl{
    color: #0099CC;
}

@media screen and (max-width:768px) {
    #faq{
        padding: 5.6vw 0;
        background-image: none;
    }
    #faq .faq_lead{
        margin-top: 2.667vw;
        text-align: left;
    }
    #acMenu{
        margin: 10px auto 0;
        border-radius: 1.6vw;
    }
    #acMenu dt,#acMenu dd{
        border-radius: 1.6vw;
        font-size:3.733vw;
    }
    #acMenu dt{
        font-size:3.733vw;
        padding: 4vw 12vw 3.2vw 9.067vw;
    }
    #acMenu dd{
        font-size: 3.2vw;
        font-weight: normal;
        padding: 0 12vw 2.4vw 9.067vw;
    }
    
    #acMenu dt::before{
        font-size:5.333vw;
        top: 2vw;
        position: absolute;
        left: 2.3vw;
    }
    #acMenu dd::before{
        font-weight: bold;
        font-size:3.733vw;
        left: 3vw;
    }
    #acMenu dt::after{
        top: 5vw;
        right: 3.2vw;
        width: 4.8vw;
        height: 2.995vw;
    }

    #acMenu dd p{
        font-size: 3.2vw;
    }
    
}

/*---- 他カード（ナイスカード・あんくるふじやカード・nimocaカード）の情報 ----*/

#card_info{
    padding:0 20px;
}
#card_info .sec_innr{
    max-width: 1170px;
}
#card_info .sec_innr div{
    margin-top: 100px;
}
@media screen and (max-width:768px) {
    #card_info{
        padding:0;
    }
    #card_info .sec_innr{
        width: 91.467vw;
    }
    #card_info .sec_innr #old_card_info{
        margin-top: 8vw;
        padding-top: 8vw;
    }
    #card_info .sec_innr #nimoca_info{
        margin-top: 6vw;
        padding-top: 7.6vw;
    }
}


/*---- 利用規約 ----*/

#terms_of_service{
    padding:100px 0 0;
    position: relative;
}
.blue_ribbon{
    width:497px;
    height: 494px;
    bottom: -370px;
    left: -400px;
    position: absolute;
    z-index: -1;
    background-image: url(../img/blue_ribbon.png?1);
    background-repeat: no-repeat;
}
.tos_sub_ttl{
    font-weight: bold;
    margin-top: 52px;
}
#terms_of_service .tos_innr{
    max-width: 1010px;
    margin: 0 auto;
    padding: 0 20px;
}
#terms_of_service .tos_innr .tos_txt{
    border: solid 1px #DDDDDD;
    border-radius: 3px;
    margin-top: 23px;
    height: 240px;
    padding: 21px 34px 30px 20px;
    overflow-y: scroll;
}
#terms_of_service .tos_innr .tos_txt p{
    font-size: 14px;
}
#terms_of_service .tos_innr .tos_txt p .indent{
    display: inline-block;
    margin-left: 1em;
}
#terms_of_service .tos_innr .tos_txt p:not(:first-of-type){
    margin-top: 14px;
}
#terms_of_service .tos_innr .link{
    width: 320px;
    position: relative;
    margin: 28px auto 0;
}
.btn_link_wrap{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: 970px;
    width: 100%;
}
.btn_link_wrap .btn_link{
    max-width: 470px;
    width: 48.45%;
    color: #fff;
    font-weight: bold;
    text-align: center;
    margin-top: 40px;
}
.btn_link_wrap .btn_link a{
    display: block;
    padding: 8px 0;
    border-radius: 30px;
    background: #B10017;
}
.btn_link_wrap .btn_link a:hover{
    background: #8D0012;
}
.btn_link_wrap .btn_link:nth-child(n+3){
    margin-top: 20px;
}

@media screen and (max-width:768px) {
    #terms_of_service{
        margin-top: 10vw;
        padding:10.533vw 0 0;
    }
    .tos_sub_ttl{
        margin-top: 2.667vw;
    }
    #terms_of_service .tos_innr{
        width: 91.467vw;
        padding: 0;
    }
    #terms_of_service .tos_innr .tos_txt{
        border-radius: 0.8vw;
        margin-top: 2.667vw;
        height: 69.333vw;
        padding: 2.4vw 3vw 8vw 2.133vw;
    }
    #terms_of_service .tos_innr .tos_txt p{
        font-size: 3.2vw;
    }
    #terms_of_service .tos_innr .tos_txt p:not(:first-of-type){
        margin-top: 3.2vw;
    }
    #terms_of_service .tos_innr .tos_txt p .indent{
        width: 95%;
    }
    #terms_of_service .tos_innr .link{
        width: 64.533vw;
        margin: 5.333vw auto 4.533vw;
    }
    .btn_link_wrap{
        display: block;
        width: 100%;
    }
    .btn_link_wrap .btn_link{
        width: 100%;
        max-width: 100%;
        margin-top: 0;
    }
    .btn_link_wrap .btn_link:not(:first-of-type){
        margin-top: 2.667vw;
    }
    .btn_link_wrap .btn_link a{
        padding: 0.8vw 0;
        border-radius: 8vw;
    }
}

/*---- お問い合わせ ----*/
#inquiry{
    padding: 100px 0 153px;
    background-size: 498px;
    background-image: url(../img/foot_ribbon_pink.png?1);
    background-repeat: no-repeat;
    background-position: bottom -205px right -350px;
}
#inquiry .inquiry_lead{
    margin-top: 30px;
    text-align: center;
    font-weight: bold;
}
.inquiry_list{
    margin: 63px auto 0;
    width: 623px;
    font-weight: bold;
}
.inquiry_list li{
    padding-bottom: 17px;
}
.inquiry_list li:nth-child(n+2){
    padding-top: 41px;
    border-top: solid 1px #707070;
}
.inquiry_list li h3{
    font-size: 20px;
}
.inquiry_list li >div{
    display: flex;
    justify-content: space-between;
}
.inquiry_list li >div dl dt{
    font-size: 16px;
    margin-top: 10px;
    color: #222;
}
.inquiry_list li >div dl dd{
    font-size: 12px;
    margin-top: 7px;
}
.inquiry_list li >div p{
    font-size: 34px;
    font-family: 'Roboto';
    margin-top: 17px;
    line-height: 1.2;
    width: 275px;
    position: relative;
    padding-left: 25px;
}
.inquiry_list li >div p::before{
    content: "";
    display: inline-block;
    position: absolute;
    width: 16px;
    height: 24px;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    background-image: url(../img/tel.png);
    background-size: contain;
    background-repeat: no-repeat;
}

@media screen and (max-width:768px) {
    #inquiry{
        padding: 16vw 0;
        background: none;
    }
    #inquiry .inquiry_lead{
        margin-top: 2.667vw;
        text-align: left;
    }
    .inquiry_list{
        margin: 5.333vw auto 0;
        width: 100%;
    }
    .inquiry_list li >div{
        display: block;
    }
    .inquiry_list li >div dl dt{
        font-size: 3.733vw;
        margin-top: 2.667vw;
    }
    .inquiry_list li >div dl dd{
        font-size: 3.2vw;
        margin-top: 1.867vw;
    }
    .inquiry_list li >div p{
        font-size: 6.667vw;
        margin: 4.533vw 0 0 5.333vw;
        width: 54vw;
        padding-left: 4.941vw;
    }
    .inquiry_list li >div p::before{
        width: 3.128vw;
        height: 4.6vw;
    }
    .inquiry_list li h3{
        font-size: 4.267vw;
    }
}

footer{
    background: #000;
    text-align: center;
    padding: 27px 0 123px;
}
footer div{
    width: 150px;
    margin: 0 auto;
}
footer p{
    color: #fff;
    font-size: 12px;
    margin-top: 20px;
}

@media screen and (max-width:768px) {
    footer{
        padding: 7.2vw 0 20.267vw;
    }
    footer div{
        width: 40vw;
    }
    footer p{
        font-size: 2.933vw;
        margin-top: 6.667vw;
    }
}