@charset "UTF-8";

.lower .l-wrap {
    overflow: hidden
}

/* @media screen and (min-width:769px) {
    .lower .l-wrap {
        max-width: 1200px
    }
} */

.p-pagetitle,
.p-pagetitle--sub {
    position: relative;
    margin: 0 auto;
    padding: calc(40px + 18%) 0 12%;
    text-align: center
}

.p-pagetitle h1,
.p-pagetitle--sub h1 {
    margin: auto;
    text-align: center;
    position: relative;
    z-index: 1;
    display: block;
    font-size: 1.5rem;
    font-family: "Noto Serif JP", "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
    font-weight: 700
}

.lower .p-pagetitle h1:before,
.lower .p-pagetitle--sub h1:before {
    position: absolute;
    display: block;
    font-size: 1rem;
    top: -90%;
    letter-spacing: .1em;
    left: 0;
    right: 0
}

@media screen and (min-width:769px) {

    .p-pagetitle,
    .p-pagetitle--sub {
        margin: 0 auto;
        padding: 12.5em 0 7.5em
    }

    .p-pagetitle h1,
    .p-pagetitle--sub h1 {
        font-size: 2.5em
    }
}

.lower.service .p-pagetitle h1:before {
    content: 'SERVICE'
}

.lower.payment .p-pagetitle h1:before {
    content: 'PAYMENT'
}

.lower.flow01 .p-pagetitle h1:before,
.lower.flow02 .p-pagetitle h1:before {
    content: 'FLOW'
}

.lower.about .p-pagetitle h1:before {
    content: 'COMPANY'
}

.lower.privacy .p-pagetitle h1:before {
    content: 'PRIVACY'
}

.lower.faq .p-pagetitle h1:before {
    content: 'Q&A'
}

.post-type-archive-shop .p-pagetitle h1:before,
.lower.shop .p-pagetitle h1:before {
    content: 'SHOP'
}

.lower.form .p-pagetitle h1:before {
    content: 'FORM'
}

.lower.inquiry .p-pagetitle h1:before {
    content: 'CONTACT'
}

.lower.loan01 .p-pagetitle--sub h1:before {
    content: 'AUTO LOAN'
}

.lower.loan02 .p-pagetitle--sub h1:before {
    content: 'REMAINING LOAN'
}

.archive.lower .p-pagetitle h1:before,
.single-post .p-pagetitle h1:before {
    content: 'CAMPAIGN&NEWS'
}

.archive.lower.post-type-archive-shop .p-pagetitle h1:before {
    content: 'SHOP'
}

.lower.lease .p-pagetitle--sub h1:before {
    content: 'AUTO LEASE'
}

.lower.flow01 .p-pagetitle h1:after,
.lower.flow02 .p-pagetitle h1:after {
    content: '';
    display: block;
    position: absolute;
    top: calc(50% + .8em);
    left: 50%;
    margin: .5em auto 0;
    font-size: .6em;
    transform: translateX(-50%)
}

.lower.flow01 .p-pagetitle h1:after {
    content: '＜店頭でご購入＞'
}

.lower.flow02 .p-pagetitle h1:after {
    content: '＜通信販売でご購入＞'
}

.lower.solicitation .p-pagetitle h1:before {
    content: 'SOLICITATION POLICY'
}


.p-pagetitle {
    background-color: #cecbb7;
    background-repeat: no-repeat;
    background-position: center center
}

.p-pagetitle {
    background-position: center top 52%
}

.service .p-pagetitle {
    background-image: url(../img/service/service-title-bg-sp.png);
    background-size: contain
}

.payment .p-pagetitle {
    background-image: url(../img/payment/payment-title-bg-sp.png);
    background-size: contain
}

.flow01 .p-pagetitle,
.flow02 .p-pagetitle {
    background-image: url(../img/flow/flow-title-bg-sp.png);
    background-size: contain
}

.category-news .p-pagetitle,
.news .p-pagetitle {
    background-image: url(../img/news_title_bg_sp.png);
    background-size: contain
}

.post-type-archive-shop .p-pagetitle {
    background: url(../img/shop/shop_title_bg_sp.png);
    background-size: contain
}

.faq .p-pagetitle {
    background-image: url(../img/faq_title_bg_sp.png);
    background-size: contain
}

.about .p-pagetitle {
    background-image: url(../img/about_title_bg_sp.png);
    background-size: contain
}

.privacy .p-pagetitle {
    background-image: url(../img/privacy_title_bg_sp.png);
    background-size: contain
}

.solicitation .p-pagetitle {
    background-image: url(../img/solicitation_title_bg_sp.png);
    background-size: contain
}

.thanks .p-pagetitle,
.confirm .p-pagetitle,
.form .p-pagetitle {
    background-image: url(../img/payment/form-title-bg-sp.png);
    background-size: contain
}

.inquiry .p-pagetitle {
    background-image: url(../img/inquiry_title_bg_sp.png);
    background-size: contain
}

.error404 .p-pagetitle {
    background-image: url(../img/404_title_bg_sp.png);
    background-size: contain
}

@media screen and (min-width:769px) {
    .p-pagetitle {
        background-position: center top 60%
    }

    .service .p-pagetitle {
        background-image: url(../img/service/service-title-bg.png);
        background-size: contain
    }

    .payment .p-pagetitle {
        background-image: url(../img/payment/payment-title-bg.png);
        background-size: contain
    }

    .flow01 .p-pagetitle,
    .flow02 .p-pagetitle {
        background-image: url(../img/flow/flow-title-bg.png);
        background-size: contain
    }

    .category-news .p-pagetitle,
    .single-post .p-pagetitle {
        background-image: url(../img/news_title_bg.png);
        background-size: contain
    }

    .post-type-archive-shop .p-pagetitle {
        background: url(../img/shop/shop_title_bg.png) no-repeat center top 60%;
        background-size: contain
    }

    .faq .p-pagetitle {
        background-image: url(../img/faq_title_bg.png);
        background-size: contain
    }

    .about .p-pagetitle {
        background-image: url(../img/about_title_bg.png);
        background-size: contain
    }

    .privacy .p-pagetitle {
        background-image: url(../img/privacy_title_bg.png);
        background-size: contain
    }

    .solicitation .p-pagetitle {
        background-image: url(../img/solicitation_title_bg.png);
        background-size: contain
    }

    .thanks .p-pagetitle,
    .confirm .p-pagetitle,
    .form .p-pagetitle {
        background-image: url(../img/payment/form-title-bg.png);
        background-size: contain
    }

    .inquiry .p-pagetitle {
        background-image: url(../img/inquiry_title_bg.png);
        background-size: contain
    }

    .error404 .p-pagetitle {
        background-image: url(../img/404_title_bg.png);
        background-size: contain
    }
}

.step-flow {
    font-family: "Noto Serif JP", "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif
}

.step-flow__txt {
    width: 90%;
    margin: 0 auto 1em;
    font-size: 1.125em;
    line-height: 1.75
}

.flow__list {
    list-style: none;
    width: 91.73%;
    margin: 11% auto
}

.flow__list a {
    display: block;
    color: #000
}

.flow__list>li {
    margin-bottom: 16%
}

.flow__list li ul {
    list-style: none;
    margin: 1.8em 0;
    padding: 0
}

.flow__list p {
    margin: 0;
    padding: 0
}

.step {
    position: relative;
    font-weight: 700;
    font-family: "Noto Serif JP", "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
    text-align: center;
    color: #c80039
}

.step__no {
    display: block;
    padding-bottom: 46.3%;
    font-size: 1.125em
}

.step__no b {
    position: relative;
    display: block;
    font-size: 3em
}

.step__no b:after {
    content: "";
    position: absolute;
    bottom: -.7em;
    left: 50%;
    width: 5px;
    height: .5em;
    background: url(../img/lower/flow_img01.png) no-repeat center top;
    background-size: contain;
    transform: translateX(-50%)
}

.step__ttl {
    display: block;
    margin: 1em auto .5em;
    font-size: 1.375em
}

.step__txt {
    font-size: 1.125em;
    line-height: 1.75;
    line-break: strict;
    word-wrap: break-word;
    overflow-wrap: break-word
}

.flow__list .step:before {
    content: "";
    position: absolute;
    top: 45%;
    left: 50%;
    width: 40.82%;
    height: 42%;
    background: #fff url(../img/lower/flow_img02.png) no-repeat top center;
    background-size: contain;
    transform: translateX(-50%)
}

@media screen and (min-width:769px) {
    .step-flow__txt {
        width: 92.5%;
        margin: 1.65em auto 1.8em;
        font-size: 1.125em
    }

    .flow__list {
        max-width: 1114px;
        width: 93%;
        margin: 0 auto 5.8%
    }

    .flow__list>li {
        position: relative;
        margin-bottom: 0;
        padding: 2.7em 0 2.7em 19.6875em;
        box-sizing: border-box
    }

    .flow__list>li:after {
        content: "";
        position: absolute;
        bottom: 0;
        right: 0;
        width: 89%;
        max-width: 1000px;
        height: 0;
        border-bottom: 1px solid #979797
    }

    .step {
        position: static
    }

    .step__no {
        position: absolute;
        left: 0;
        top: 50%;
        padding: 0;
        font-size: 1.2em;
        transform: translateY(-80%)
    }

    .step__ttl {
        font-size: 1.8em;
        text-align: left
    }

    .step-flow .step__ttl {
        margin-top: 0
    }

    .step__txt {
        font-size: 1.125em
    }

    .flow__list .step:before {
        top: 50%;
        left: 8.3125em;
        width: 8.75em;
        height: 6.875em;
        transform: translateY(-50%)
    }
}

.flow01 .intro,
.flow02 .intro {
    background: #f4f4f4;
    overflow: hidden
}

.intro__body {
    width: 92%;
    margin: 10.5% auto 9.5%;
    font-size: 1.125em;
    font-family: "Noto Serif JP", "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
    line-height: 1.75
}

.loan01 .intro__body,
.loan02 .intro__body,
.lease .intro__body {
    font-family: inherit
}

.loan01 .step-flow__txt,
.loan02 .step-flow__txt,
.lease .step-flow__txt {
    font-family: sans-serif
}

@media screen and (min-width:769px) {
    .intro__body {
        margin: 93px auto 90px;
        font-size: 1.125em;
        text-align: center
    }

    .flow02 .intro__body {
        margin-bottom: 70px
    }
}

.headline01 {
    width: 91.47%;
    margin: 0 auto 1em;
    padding: 0 .4em;
    box-sizing: border-box;
    font-size: 1.375em;
    font-weight: 700;
    font-family: "Noto Serif JP", "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
    line-height: 1.2;
    border-left: 6px solid #da0033
}

.headline01 span {
    display: inline-block
}

.service .headline01 {
    margin-left: 0
}

@media screen and (min-width:769px) {
    .headline01 {
        width: 92.6%;
        padding: .1em .6em .2em;
        font-size: 1.5em
    }
}

.lower.loan01 .p-pagetitle--sub {
    background-image: url(../img/payment/loan01-title-bg-sp.png)
}

.lower.loan02 .p-pagetitle--sub {
    background-image: url(../img/payment/loan02-title-bg-sp.png)
}

.lower.lease .p-pagetitle--sub {
    content: '';
    background-image: url(../img/payment/lease-title-bg-sp.png)
}

.lower .p-pagetitle--sub {
    background-position: center top 52%;
    background-repeat: no-repeat;
    background-size: contain
}

@media (min-width:769px) {
    /* .bg__gray01 {
        width: min(100%,1400px);
    } */

    .p-pagetitle,
    .p-pagetitle--sub {
        /* min-width: auto; */
        width: min(90%,1400px);
        padding: 12.375em 0 7.375em;
        margin: auto
    }

    .lower.loan01 .p-pagetitle--sub {
        content: '';
        background-image: url(../img/payment/loan01-title-bg.png)
    }

    .lower.loan02 .p-pagetitle--sub {
        content: '';
        background-image: url(../img/payment/loan02-title-bg.png)
    }

    .lower.lease .p-pagetitle--sub {
        content: '';
        background-image: url(../img/payment/lease-title-bg.png)
    }

    .lower .p-pagetitle--sub {
        background-position: center top 60%
    }
}

/* @media only screen and (min-device-width:769px) and (max-device-width:1400px) {

    .bg__gray01,
    .p-pagetitle,
    .p-pagetitle--sub {
        min-width: auto;
        max-width: 1400px
    }
} */