@charset "utf-8";

#wrapper {
    overflow-x: clip !important;
}

@media screen and (max-width: 768px) {
    #page_top {
        bottom: 70px;
    }
}

/*-------------------------------------
    catch, sub-catch
-------------------------------------*/

.catch {
    font-size: clamp(3.0rem, 3cqw, 4.0rem);
    line-height: 1.5;
    font-weight: 600;
    color: var(--navy);
    margin: 0 0 30px;
}

.sub-catch {
    font-size: clamp(1.5rem, 2cqw, 2.4rem);
    line-height: 1.5;
    padding-bottom: 20px;
    margin-bottom: 30px;
    border-bottom: 2px dotted var(--main);
    color: var(--main);
    font-weight: 600;
}

@media screen and (max-width: 768px) {

    .sub-catch {
        font-size: clamp(1.5rem, 4.5cqw, 2.4rem);
        letter-spacing: 0;
        padding-bottom: 10px;
        margin-bottom: 20px;
    }

    .catch {
        font-size: clamp(2.0rem, 6.2cqw, 4.0rem);
        margin: 0 0 20px;
        line-height: 1.7;
        letter-spacing: 0;
    }
}

/*-------------------------------------
    page-title-area
-------------------------------------*/
.page-title-area .inner {
    position: relative;
    z-index: 1;
    justify-content: space-between;

}

.page-title-area .inner::after {
    content: "";
    display: block;
    width: auto;
    /* height: 360px; */
    height: 300px;
    background: url(../img/ill-bank-billing.png) center/contain no-repeat;
    animation: fuwa 3s ease-out infinite;
    z-index: -1;
    position: absolute;
    right: 2%;
    bottom: -30px;
}

#service.bank-billing .page-title-area .inner::after {
    aspect-ratio: 227/183;
}

#service.direct-debit .page-title-area .inner::after {
    background: url(../img/ill-direct-debit.png) center/contain no-repeat;
    aspect-ratio: 442/331;
}

#service.bank-transfer .page-title-area .inner::after {
    background: url(../img/ill-bank-transfer.png) center/contain no-repeat;
    aspect-ratio: 485/396;
}

#service.credit-card .page-title-area .inner::after {
    background: url(../img/ill-credit-card.png) center/contain no-repeat;
    aspect-ratio: 460/379;
}

#service.bank-oem .page-title-area .inner::after {
    background: url(../img/ill-bank-oem.png) center/contain no-repeat;
    aspect-ratio: 370/284;
}

#service.credit-oem .page-title-area .inner::after {
    background: url(../img/ill-credit-oem.png) center/contain no-repeat;
    aspect-ratio: 370/338;
}

@media screen and (max-width: 768px) {
    .page-title-area .inner::after {
        position: absolute;
        height: 30vw;
        top: 22%;
        right: 5vw;
        bottom: auto;
    }
}


/*-------------------------------------
    catch-area
-------------------------------------*/
.catch-area {
    padding: 100px 0 0;
}

.catch-area .inner {
    display: flex;
    align-items: center;
    --gap: clamp(40px, 5vw, 120px);
    gap: 80px var(--gap);
    container-type: inline-size;
    flex-wrap: wrap;
}

.catch-area .catch-txt-wrap {
    width: 55%;
}

.catch-area .catch-txt-wrap .other-service-btn {
    margin-top: 40px;
    border: 1px solid var(--main);
    display: inline-flex;
    border-radius: 10px;
    padding: 25px;
    align-items: center;
    gap: 40px;
    position: relative;
}

.catch-area .catch-txt-wrap .other-service-btn .btn-catch {
    font-size: 1.7rem;
    font-weight: bold;
    color: var(--main);
    padding: 0 0 10px;
    border-bottom: 2px dotted var(--main);
    margin: 0 0 15px;
    line-height: 1.5;
}

.catch-area .catch-txt-wrap .other-service-btn .btn-service-name {
    font-size: 3.0rem;
    font-weight: bold;
    line-height: 1.5;
    color: var(--navy);
}

.catch-area .catch-txt-wrap .other-service-btn .cmn-arrow {
    position: absolute;
    right: 20px;
    bottom: 20px;
}

.catch-area .catch-txt-wrap .other-service-btn .ill-wrap {
    width: 20%;
}

.catch-area .catch-txt-wrap .other-service-btn .btn-txt-wrap {
    width: calc(80% - 40px);
}

.catch-area .service-point-box-wrap {
    display: flex;
    gap: 40px 30px;
    flex-wrap: wrap;
    width: calc(45% - var(--gap));
}

.catch-area .service-point-box-wrap.full {
    width: 100%;
}

.catch-area .service-point-box {
    background-color: #F4F4F4;
    border-radius: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    padding: 30px;
    position: relative;
    align-items: center;
    width: 100%;
    container-type: inline-size;
}

.catch-area .service-block.gray .service-point-box {
    background-color: #fff;
}

.catch-area .service-point-num {
    font-size: 1.5rem;
    color: var(--navy);
    font-weight: 600;
    position: absolute;
    top: -17px;
    left: 30px;
    letter-spacing: .1em;
}

.catch-area .service-point-num em {
    font-size: 180%;
    line-height: 1;
}

.catch-area .service-point-img {
    width: 150px;
}

.catch-area .service-point-img img {
    width: 100%;
    object-fit: contain;
}

.catch-area .service-point-txt {
    width: calc(100% - 100px);
}

.catch-area .service-point-catch {
    font-size: clamp(1.5rem, 4cqw, 2.4rem);
    line-height: 1.5;
    font-weight: 600;
}

.catch-area .service-point-sub-catch {
    font-size: 1.7rem;
    line-height: 1.5;
}

.catch-area .service-point-catch .accent {
    color: var(--blue);
}

.catch-area .service-point-catch .accent em {
    font-size: 180%;
    font-weight: 500;
    line-height: 1;
}

.catch-area .service-point-txt .check-list {
    margin-top: 20px;
}

.catch-area .service-point-icon {
    width: 70px;
}

.catch-area .service-point-icon img {
    max-height: 65px;
    object-fit: contain;
}

.catch-area .btn-more {
    margin-top: 50px;
}

.catch-area .service-txt-wrap .btn-more {
    margin-top: 40px;
}

/*catcharea icon-list-box*/
.catch-area .icon-list-box {
    background-color: var(--pale-blue);
    padding: 80px;
    border-radius: 20px;
    width: 100%;
}

.catch-area .icon-list-box .icon-list {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.catch-area .icon-list-box .icon-list .icon-item {
    background-color: #fff;
    padding: 40px 30px;
    border-radius: 10px;
    text-align: center;
    width: calc((100% - 60px) / 3);
    position: relative;
}

.catch-area .icon-list-box .icon-list .icon-item::after {
    content: "\f00c";
    display: inline-block;
    position: absolute;
    top: 20px;
    right: 20px;
    font-family: var(--webicon);
    font-weight: bold;
    font-size: 2.1rem;
    color: var(--main);
}

.catch-area .icon-list-box .icon-list .icon-wrap {
    width: auto;
    height: 50px;
    margin: 0 0 30px;
}

.catch-area .icon-list-box .icon-list .icon-wrap img {
    height: 100%;
    width: auto;
    object-fit: contain;
}

.catch-area .icon-list-box .icon-list .icon-txt {
    font-size: 1.7rem;
    line-height: 1.6;
    font-weight: bold;
}

@media screen and (min-width: 769px) {
    .catch-area .other-service-btn:hover {
        transform: translateY(-10px);
        opacity: .7;
    }
}

@media screen and (max-width: 768px) {
    .catch-area {
        padding: 10vw 0 0;
    }

    .catch-area .inner {
        flex-wrap: wrap;
        --gap: 10vw;
        gap: var(--gap);
    }

    .catch-area .catch-txt-wrap {
        width: 100%;
    }

    .catch-area .catch-txt-wrap .other-service-btn {
        margin-top: 5vw;
        padding: 4vw;
        gap: 5vw;
    }

    .catch-area .catch-txt-wrap .other-service-btn .ill-wrap {
        width: 22vw;
    }

    .catch-area .catch-txt-wrap .other-service-btn .btn-txt-wrap {
        width: calc(100% - 27vw);
    }

    .catch-area .catch-txt-wrap .other-service-btn .btn-catch {
        font-size: 1.4rem;
        margin: 0 0 3vw;
        letter-spacing: 0;
    }

    .catch-area .catch-txt-wrap .other-service-btn .btn-service-name {
        font-size: 1.8rem;
    }

    .catch-area .catch-txt-wrap .other-service-btn .cmn-arrow {
        right: 10px;
        bottom: 10px;
    }

    /*----- service-point-box-wrap -----*/
    .catch-area .service-point-box-wrap {
        gap: 8vw;
        width: 100%;
    }

    .catch-area .service-point-box {
        border-radius: 5px;
        gap: 5vw;
        padding: 7vw 5vw 6vw;
    }

    .catch-area .service-point-num {
        font-size: 1.4rem;
        top: -12px;
        left: 5vw;
    }

    .catch-area .service-point-num em {
        font-size: 160%;
    }

    .catch-area .service-point-icon {
        width: 15vw;
    }

    .catch-area .service-point-icon img {
        max-height: 15vw;
    }

    .catch-area .service-point-txt {
        width: calc(100% - 20vw);
    }

    /*icon-list-box*/
    .catch-area .icon-list-box {
        padding: 10vw 5vw;
        border-radius: 10px;
    }

    .catch-area .icon-list-box .icon-list {
        gap: 5vw;
    }

    .catch-area .icon-list-box .icon-list .icon-item {
        padding: 5vw;
        border-radius: 8px;
        width: 100%;
    }

    .catch-area .icon-list-box .icon-list .icon-wrap {
        width: auto;
        height: 12vw;
        margin: 0 0 5vw;
    }

    .catch-area .icon-list-box .icon-list .icon-txt {
        font-size: 1.5rem;
    }
}

/*-------------------------------------
    about-area
-------------------------------------*/
.about-area {
    padding: 100px 0 0;
}

.about-area .inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    --gap: clamp(40px, 5vw, 120px);
    gap: var(--gap);
    flex-direction: row-reverse;
}

.about-area .about-txt-wrap {
    width: calc(55% - var(--gap));
}

.about-area .img-wrap {
    width: 45%;
}

@media screen and (max-width: 768px) {
    .about-area {
        padding: 10vw 0 0;
    }

    .about-area .inner {
        --gap: 10vw;
    }

    .about-area .about-txt-wrap {
        width: 100%;
    }

    .about-area .img-wrap {
        width: 100%;
        margin: 0 0 5vw;
    }
}


/*-------------------------------------
    feature-area
-------------------------------------*/
.feature-area {
    padding: 100px 0;
}

@media screen and (max-width: 768px) {
    .feature-area {
        padding: 10vw 0;
    }

    #service.bank-billing .feature-area {
        padding-top: 15vw;
    }
}


/*-------------------------------------
    method-area
-------------------------------------*/
.method-area {
    padding: 0 0 100px;
}

.method-area .inner {
    display: flex;
    flex-wrap: wrap;
    --gap: clamp(40px, 5vw, 120px);
    gap: var(--gap);
    align-items: center;
}

.method-area .method-txt-wrap {
    width: calc(55% - var(--gap));
    container-type: inline-size;
}

.method-area .cmn-h2-title {
    font-size: clamp(3.2rem, 5.5cqw, 5.0rem);
}

.method-area .cmn-h3-title {
    font-size: clamp(2.8rem, 4.3cqw, 3.6rem);
}

.method-area .method-img {
    width: 45%;
    border-radius: 20px;
    overflow: hidden;
}

.method-area .method-card-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}

.method-area .method-card-wrap .method-card {
    width: calc((100% - 40px) / 2);
    background-color: #fff;
    border-radius: 10px;
    padding: 40px 30px 30px;
    border: 1px solid var(--navy);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.method-area .method-card-wrap .method-card .num {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.4rem;
    font-weight: 500;
    color: #fff;
    background-color: var(--main);
    border-radius: 20px;
    display: inline-block;
    padding: 5px 20px;
    line-height: 1.5;
    letter-spacing: .05em;
}

.method-area .method-card-wrap .method-card .icon-wrap {
    width: 70px;
    height: 70px;
    margin-bottom: 30px;
    text-align: center;
}

.method-area .method-card-wrap .method-card .icon-wrap img {
    width: auto;
    height: 70px;
    max-width: 70px;
    max-height: 70px;
    object-fit: contain;
}

.method-area .method-card-wrap .method-card .method-card-title {
    font-size: 3.0rem;
    font-weight: 500;
    margin-bottom: 20px;
    text-align: center;
    color: var(--navy);
    line-height: 1.6;
}

.method-area .method-card-wrap .method-card .method-card-sub-title {
    font-size: 2.0rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 5px 0;
    margin: 0 0 20px;
    color: var(--main);
    width: 100%;
    /* border-top: 1px dotted var(--main);
    border-bottom: 1px dotted var(--main); */
    background-color: var(--pale-blue);
}

/* .method-area .method-card-wrap .method-card .method-card-sub-title::before,
.method-area .method-card-wrap .method-card .method-card-sub-title::after {
    content: "";
    flex-grow: 1;
    height: 1px;
    background-color: var(--main);
    display: inline-block;
} */

.method-area .method-card-wrap .method-card .basic-txt+.method-card-sub-title,
.method-area .method-card-wrap .method-card .check-list+.method-card-sub-title {
    margin-top: 40px;
}



.method-area .method-card-wrap .cmn-txt-box {
    width: 100%;
    margin: 30px 0 0;
    border: none;
    background-color: var(--pale-blue);
    color: var(--main);
}



@media screen and (max-width: 768px) {
    .method-area {
        padding: 0 0 10vw;
    }

    .method-area .inner {
        --gap: 5vw;
    }

    .method-area .method-txt-wrap {
        width: 100%;
        order: 2;
    }

    .method-area .method-img {
        width: 100%;
        order: 1;
        border-radius: 8px;
    }

    .method-area .cmn-h2-title {
        font-size: clamp(2.4rem, 7.5cqw, 3.0rem);
    }

    .method-area .cmn-h3-title {
        font-size: clamp(1.8rem, 6cqw, 2.6rem);
    }

    .method-area .method-card-wrap {
        gap: 10vw;
        margin: 5vw 0 0;
        order: 3;
    }

    .method-area .method-card-wrap .method-card {
        width: 100%;
        padding: 10vw 5vw 6vw;
    }

    .method-area .method-card-wrap .method-card .num {
        top: -15px;
        font-size: 1.4rem;
        padding: 5px 12px;
    }

    .method-area .method-card-wrap .method-card .icon-wrap {
        width: 18vw;
        height: 18vw;
        margin-bottom: 20px;
    }

    .method-area .method-card-wrap .method-card .method-card-title {
        font-size: 2.1rem;
        margin-bottom: 25px;
    }

    .method-area .method-card-wrap .method-card .method-card-sub-title {
        font-size: 1.8rem;
        margin: 0 0 15px;
    }

    .method-area .method-card-wrap .method-card .basic-txt+.method-card-sub-title,
    .method-area .method-card-wrap .method-card .check-list+.method-card-sub-title {
        margin-top: 8vw;
    }
}


/*-------------------------------------
    admin-panel-area
-------------------------------------*/
.admin-panel-area {
    padding: 100px 0;
    background-color: var(--pale-blue);
}

.admin-panel-area .inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    --gap: clamp(40px, 5vw, 120px);
    gap: var(--gap);
}

.admin-panel-area .admin-panel-txt-wrap {
    width: calc(60% - var(--gap));
}

.admin-panel-area .ill-wrap {
    width: 40%;
}

.admin-panel-area .ill-wrap img {
    width: 100%;
    object-fit: contain;
}

.admin-panel-area .cmn-txt-box {
    margin: 30px 0 0;
}

.admin-panel-area .cmn-txt-box .disc-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 30px;
    margin: 10px 0 0;
}

.admin-panel-area .cmn-txt-box .disc-list .disc-item {
    margin: 0;
}

.admin-panel-area .panel-img-list {
    display: flex;
    flex-wrap: wrap;
    gap: 100px 60px;
}

.admin-panel-area .panel-img-item {
    width: calc((100% - 60px) / 2);
}

.admin-panel-area .panel-img-item .img-wrap {
    width: 100%;
    height: 20vw;
    border-radius: 15px;
    position: relative;
    overflow: hidden;
    background: #fff;
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.admin-panel-area .panel-img-item .img-wrap img {
    height: initial;
}

/* .admin-panel-area .panel-img-item .img-wrap::after {
    content: "\f00e";
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 15px;
    right: 15px;
    color: #fff;
    font-size: 2.1rem;
    font-family: var(--webicon);
    font-weight: bold;
    color: #fff;
    width: 50px;
    height: 50px;
    background-color: var(--navy);
    border-radius: 30px;
} */

.admin-panel-area .panel-img-list-txt-wrap {
    margin: 40px 0 0;
}

@media screen and (max-width: 768px) {
    .admin-panel-area {
        padding: 10vw 0;
    }

    .admin-panel-area .inner {
        --gap: 5vw;
        position: relative;
        z-index: 1;
    }

    .admin-panel-area .admin-panel-txt-wrap {
        width: 100%;
    }

    .admin-panel-area .sub-catch {
        text-shadow: var(--text-shadow-white);
    }

    .admin-panel-area .cmn-txt-box .disc-list {
        gap: 3vw;
        margin: 2vw 0 0;
        flex-direction: column;
    }

    .admin-panel-area .ill-wrap {
        width: 45%;
        margin: 0 auto;
        position: absolute;
        z-index: -1;
        top: -7vw;
        right: -5vw;
    }

    .admin-panel-area .panel-img-list {
        gap: 12vw;
        margin-top: 5vw;
    }

    .admin-panel-area .panel-img-item {
        width: 100%;
    }

    .admin-panel-area .panel-img-item .img-wrap {
        height: auto;
        width: 100%;
        border-radius: 7px;
    }

    .admin-panel-area .panel-img-list-txt-wrap {
        margin: 5vw 0 0;
    }

    .admin-panel-area .panel-img-item a::after {
        bottom: 10px;
        right: 10px;
        font-size: 1.7rem;
        width: 40px;
        height: 40px;
        border-radius: 20px;
    }
}


/*-------------------------------------
    .strength-area
-------------------------------------*/
.strength-area {
    padding: 0 0 100px;
}

.strength-area .bg-wrap {
    width: 100%;
    height: clamp(400px, 35vw, 800px);
    /* background: url(../img/service-strength-mv.jpg) center/cover no-repeat; */
    position: relative;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url("../img/service-strength-mv.jpg");
}

.strength-area .bg-wrap.copy-wework::after {
    top: 10px;
    right: 10px;
    bottom: initial;
}

.strength-area .bg-wrap .cmn-marquee-wrap {
    bottom: -30px;
    top: initial;
}

.strength-area .inner {
    display: flex;
    flex-wrap: wrap;
    --gap: clamp(60px, 5vw, 120px);
    gap: var(--gap);
    padding: 100px 0 0;
    align-items: center;
}

.strength-area .strength-txt-wrap {
    width: calc(70% - var(--gap));
    container-type: inline-size;
}

.strength-area .strength-title {
    color: var(--main);
    margin: 0 0 30px;
    font-weight: bold;
    line-height: 1.6;
    font-size: clamp(2.4rem, 5cqw, 5.0rem);
}

.strength-area .catch {
    font-size: clamp(3.0rem, 3.6cqw, 4.0rem);
}

.strength-area .ill-wrap {
    width: 30%;
}

.strength-area .cmn-img-list {
    margin: 0;
}

@media screen and (max-width: 768px) {
    .strength-area {
        padding: 0 0 10vw;
    }

    .strength-area .bg-wrap {
        width: 100%;
        height: 56vw;
        background-attachment: initial;
    }

    .strength-area .bg-wrap .cmn-marquee-wrap {
        bottom: -15px;
    }

    .strength-area .inner {
        --gap: 10vw;
        padding: 10vw 5vw 0;
        position: relative;
    }

    .strength-area .strength-txt-wrap {
        width: 100%;
    }

    .strength-area .strength-title {
        margin: 0 0 20px;
        font-size: clamp(2.4rem, 8cqw, 4.0rem);
        text-shadow: var(--text-shadow-white);
    }

    .strength-area .catch {
        font-size: clamp(2.0rem, 6.3cqw, 3.0rem);
        text-shadow: var(--text-shadow-white);
    }

    .strength-area .ill-wrap {
        width: 40%;
        position: absolute;
        top: 5vw;
        right: 0;
        z-index: -1;
        opacity: .7;
    }
}

/*-------------------------------------
   #footer_fixed_service
-------------------------------------*/
@media screen and (max-width: 768px) {
    #footer_fixed_service {
        display: flex;
        gap: 2vw;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: #f3f3f3;
        padding: 2vw;
        z-index: 5;
    }

    #footer_fixed_service .btn-more {
        margin: 0;
        width: 100%;

    }

    #footer_fixed_service a {
        display: block;
        text-align: center;
        padding: 10px;
        border-radius: 5px;
        font-weight: bold;
        color: #fff;

    }

    #footer_fixed_service .tel {
        width: 15vw;
        background-color: var(--green);
        border-radius: 5px;
    }

    #footer_fixed_service .tel img {
        filter: brightness(0) invert(1);
        width: 6vw;
    }

    #footer_fixed_service .tel svg {
        fill: #fff;
        stroke: #fff;
    }

    #footer_fixed_service .contact {
        background-color: var(--cv);
        width: calc(100% - 17vw);
        border-radius: 5px;
        font-size: 1.7rem;
    }

    #footer_fixed_service .contact img {
        margin-right: 10px;
    }

    #footer_fixed {
        display: none !important;
    }
}




/*-------------------------------------
    
-------------------------------------*/

@media screen and (max-width: 768px) {}

/*-------------------------------------
    
-------------------------------------*/

@media screen and (max-width: 768px) {}

/*-------------------------------------
    
-------------------------------------*/

@media screen and (max-width: 768px) {}