@charset "UTF-8";
@media only screen and (min-width:961px) {
    .ttt_area_service {
        position: relative;
        width: 100%;
        height: 0;
        padding-top: 21.03%;
        background: url("../../img/bcharge/service/bcharge_service_PC.jpg") no-repeat top center;
        background-size: contain;
        margin: 90px auto 0
    }

    .ttt_area_service h2 {}

    .ttt_area_payroll {
        position: relative;
        width: 100%;
        height: 0;
        padding-top: 20.834%;
        background: url("../../img/payroll/payroll_top_PC.jpg") no-repeat top center;
        background-size: contain;
        margin: 90px auto 0
    }

    .ttt_area_payroll h2 {}

    .ttt_area_payroll_j {
        position: relative;
        width: 100%;
        height: 0;
        padding-top: 20.834%;
        background: url("../../img/payroll/payroll_top_j_PC.jpg") no-repeat top center;
        background-size: contain;
        margin: 90px auto 0
    }

    .ttt_area_payroll_j h2 {}

    .pr_area {
        width: 100%;
        max-width: 960px;
        height: auto;
        margin: 0 auto 10rem
    }

    .pr_area .h3_midashi {
        position: relative;
        display: block;
        width: 100%;
        max-width: 960px;
        height: auto;
        margin: 0 auto 1rem;
        padding: 0 1rem;
        font-size: 4rem;
        font-weight: bold;
        line-height: 1.1;
        text-align: center
    }

    .pr_area .bdr {
        position: relative;
        width: 100%;
        max-width: 960px;
        height: auto;
        margin: 0 auto 4rem;
        border-bottom: 4px solid #e95505
    }

    .pr_area span.tri {
        display: block;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 20px 20px 0 20px;
        border-color: #e95505 transparent transparent transparent
    }

    .pr_area h4 {
        display: block;
        width: 100%;
        max-width: 960px;
        height: auto;
        margin: 0 auto 1rem;
        padding: 1rem;
        color: #fff;
        font-weight: bold;
        font-size: 3rem;
        text-align: center;
        background: rgb(233, 86, 5);
        background: linear-gradient(90deg, rgb(233, 86, 5) 0%, rgb(241, 167, 60) 100%);
        border-radius: 10px
    }

    .pr_area .pr_w_box {
        width: 100%;
        max-width: 960px;
        height: auto;
        margin: 0 auto 2rem;
        padding: 20px;
        background: #fff;
        border-radius: 5px
    }

    .pr_area .pr_intro_img {
        width: 100%;
        max-width: 640px;
        height: auto;
        margin: 0 auto 2rem
    }

    .pr_area .pr_intro_img img {
        width: 100%;
        height: auto;
        vertical-align: bottom
    }

    .pr_area .pr_img920 {
        width: 100%;
        max-width: 920px;
        height: auto;
        margin: 0 auto 2rem
    }

    .pr_area .pr_img920 img {
        width: 100%;
        height: auto;
        vertical-align: bottom
    }

    .pr_area ol.pr_step_area {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        max-width: 920px;
        height: auto;
        margin: 0 auto 2rem;
        text-indent: 0
    }

    .pr_area ol.pr_step_area li {
        display: flex;
        flex-direction: column;
        position: relative;
        width: 98%;
        max-width: 300px;
        height: auto;
        padding: 1rem;
        margin: 0% 1%;
        text-indent: 0;
        background: #fff;
        border-radius: 5px
    }

    .pr_area ol.pr_step_area li .step {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: auto;
        margin: 0 auto 1rem;
        font-size: 18px;
        font-weight: bold;
        text-align: center
    }

    .pr_area ol.pr_step_area li .step .num {
        display: block;
        width: 30px;
        height: 30px;
        margin-right: 1rem;
        padding: 0.5rem;
        font-weight: bold;
        color: #fff;
        text-align: center;
        line-height: 1.1;
        background: #e95505;
        border-radius: 30px
    }

    .pr_area ol.pr_step_area li .step_1rayer {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: auto;
        margin: 0 auto 4rem;
        font-size: 18px;
        font-weight: bold;
        text-align: center
    }

    .pr_area ol.pr_step_area li .step_1rayer .num {
        display: block;
        width: 30px;
        height: 30px;
        margin-right: 1rem;
        padding: 0.5rem;
        font-weight: bold;
        color: #fff;
        text-align: center;
        line-height: 1.1;
        background: #e95505;
        border-radius: 30px
    }

    .pr_area ol.pr_step_area li p.img {
        display: block;
        width: 100%;
        max-width: 240px;
        height: auto;
        margin: 0 auto 1rem;
        vertical-align: bottom
    }

    .pr_area ol.pr_step_area li p.img img {
        width: 100%;
        height: auto;
        vertical-align: bottom
    }

    .pr_area ol.pr_step_area li .step1_txt,
    .pr_area ol.pr_step_area li .step2_txt,
    .pr_area ol.pr_step_area li .step3_txt {
        flex-grow: 1;
        width: 100%;
        height: auto;
        margin: 0 auto;
        padding: 1rem;
        background: #f3d5c0;
        border-radius: 5px
    }

    .pr_area ol.pr_step_area li .lh13 {
        display: block;
        line-height: 1.3
    }

    .pr_area ol.pr_step_area .anchor {
        position: relative;
        width: 100%;
        max-width: 20px;
        height: auto
    }

    .pr_area ol.pr_step_area .anchor span {
        display: block;
        position: absolute;
        top: 50%;
        left: 0;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 10px 0 10px 17.3px;
        border-color: transparent transparent transparent #e95505
    }

    .pr_area .donyu_box {
        width: 100%;
        max-width: 920px;
        height: auto;
        margin: 0 auto 6rem
    }

    .pr_area .donyu_box h4 {
        display: block;
        width: 100%;
        height: auto;
        margin: 0 auto 1rem;
        padding: 1rem;
        font-size: 2rem;
        font-weight: bold;
        color: #fff;
        background: #e55504
    }

    .pr_area .donyu_box .tri_area {
        position: relative;
        width: 100%;
        height: auto;
        text-align: center
    }

    .pr_area .donyu_box .tri_area .tri {
        display: block;
        position: absolute;
        top: 0;
        left: 50%;
        width: 0;
        height: 0;
        border-right: 50px solid transparent;
        border-left: 50px solid transparent;
        border-top: 30px solid #E9A205;
        border-bottom: 0
    }

    .pr_area .donyu_box:last-of-type {
        margin: 0 auto
    }

    .shohin2 {
        width: 100%;
        max-width: 960px;
        height: auto;
        margin: 0 auto 10rem
    }

    .shohin2 .h3_midashi {
        position: relative;
        display: block;
        width: 100%;
        max-width: 600px;
        height: auto;
        margin: 0 auto 1rem;
        padding: 0 1rem;
        font-size: 4rem;
        font-weight: bold;
        line-height: 1.1;
        text-align: center
    }

    .shohin2 .h3_midashi2 {
        display: block;
        width: 100%;
        max-width: 960px;
        height: auto;
        margin: 0 auto 1rem;
        padding: 0 1rem;
        font-size: 4rem;
        font-weight: bold;
        line-height: 1.1;
        text-align: center
    }

    .shohin2 .h3_midashi:before {
        position: absolute;
        content: "";
        bottom: 0;
        left: 0;
        display: block;
        width: 44px;
        height: 60px;
        margin-right: 0.5rem;
        background: url("../../img/bcharge/service/accent_left.png") no-repeat top center;
        background-size: contain
    }

    .shohin2 .h3_midashi:after {
        position: absolute;
        content: "";
        bottom: 0;
        right: 0;
        display: block;
        width: 44px;
        height: 60px;
        margin-left: 0.5rem;
        background: url("../../img/bcharge/service/accent_right.png") no-repeat top center;
        background-size: contain
    }

    .shohin2 .bdr {
        position: relative;
        width: 100%;
        max-width: 960px;
        height: auto;
        margin: 0 auto 4rem;
        border-bottom: 4px solid #e95505
    }

    .shohin2 span.tri {
        display: block;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 20px 20px 0 20px;
        border-color: #e95505 transparent transparent transparent
    }

    .shohin2 .shohin_area {
        width: 100%;
        max-width: 960px;
        height: auto;
        margin: 0 auto;
        padding: 2rem;
        background: #fff;
        border-radius: 10px
    }

    .shohin2 .shohin_area h4 {
        display: block;
        width: 100%;
        max-width: 960px;
        height: auto;
        margin: 0 auto 1rem;
        padding: 1rem;
        color: #fff;
        font-weight: bold;
        font-size: 3rem;
        text-align: center;
        background: rgb(233, 86, 5);
        background: linear-gradient(90deg, rgb(233, 86, 5) 0%, rgb(241, 167, 60) 100%);
        border-radius: 10px
    }

    .shohin2 .shohin_area .img {
        width: 100%;
        max-width: 920px;
        height: 0;
        margin: 0 auto;
        padding-top: 74%;
        background: url("../../img/bcharge/service/bcharge_service_gaiyo.jpg") no-repeat top center;
        background-size: contain
    }

    .service_about_area {
        width: 100%;
        max-width: 960px;
        height: auto;
        margin: 0 auto 6rem;
        padding: 0
    }

    .service_about_area h3 {
        width: 100%;
        max-width: 300px;
        height: 0;
        margin: 0 auto 1rem;
        padding-top: 10.5%;
        background: url("../../img/bcharge/service/bcharge_service_m_about.png") no-repeat top center;
        background-size: contain
    }

    .service_about_area .bdr {
        position: relative;
        width: 100%;
        max-width: 960px;
        height: auto;
        margin: 0 auto 4rem;
        border-bottom: 4px solid #e95505
    }

    .service_about_area span.tri {
        display: block;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 20px 20px 0 20px;
        border-color: #e95505 transparent transparent transparent
    }

    .service_about_area .intro_txt {
        width: 100%;
        height: auto;
        margin: 0 auto 1rem;
        font-size: 2rem;
        font-weight: bold;
        text-align: center
    }

    .service_about_area .about_box {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        justify-content: space-between;
        width: 100%;
        max-width: 960px;
        height: auto;
        margin: 0 auto;
        padding: 2rem;
        background: #fff;
        border-radius: 10px
    }

    .service_about_area .about_box .img {
        width: 18%;
        max-width: 160px;
        height: auto;
        margin-right: 1rem
    }

    .service_about_area .about_box .img img {
        width: 100%;
        height: auto;
        vertical-align: bottom
    }

    .service_about_area .about_box .fukidashi {
        position: relative;
        display: inline-block;
        width: 80%;
        max-width: 720px;
        margin: 0 auto;
        padding: 1.8rem;
        background: #f8f1e3;
        border-radius: 5px
    }

    .service_about_area .about_box .fukidashi:before {
        content: "";
        position: absolute;
        top: 30%;
        left: -30px;
        margin-top: -15px;
        border: 15px solid transparent;
        border-right: 15px solid #f8f1e3
    }

    .service_trans_area {
        width: 100%;
        max-width: 960px;
        height: auto;
        margin: 0 auto 4rem
    }

    .service_trans_area h3 {
        width: 100%;
        max-width: 420px;
        height: 0;
        margin: 0 auto 1rem;
        padding-top: 11.5%;
        background: url("../../img/bcharge/service/bcharge_service_m_trans.png") no-repeat top center;
        background-size: contain
    }

    .service_trans_area .bdr {
        position: relative;
        width: 100%;
        max-width: 960px;
        height: auto;
        margin: 0 auto 4rem;
        border-bottom: 4px solid #e95505
    }

    .service_trans_area span.tri {
        display: block;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 20px 20px 0 20px;
        border-color: #e95505 transparent transparent transparent
    }

    .service_trans_area .trans_box {
        width: 100%;
        height: auto;
        margin: 0 auto 6rem
    }

    .service_trans_area .trans_box h4 {
        display: block;
        width: 100%;
        max-width: 960px;
        height: auto;
        margin: 0 auto 1rem;
        font-size: 2rem;
        font-weight: bold;
        text-align: center
    }

    .service_trans_area .trans_box .trans_img {
        width: 100%;
        max-width: 960px;
        height: 0;
        padding-top: 45%;
        margin: 0 auto 2rem;
        background: url("../../img/bcharge/service/bcharge_service_pc_3step.jpg") no-repeat top center;
        background-size: contain
    }

    .service_trans_area .trans_box .btn {
        width: 100%;
        max-width: 320px;
        height: auto;
        margin: 0 auto 6rem;
        padding: 4px;
        background: rgb(234, 90, 5);
        background: linear-gradient(to top, rgb(234, 90, 5) 0%, rgb(254, 169, 0) 100%);
        border-radius: 80px
    }

    .service_trans_area .trans_box .btn a {
        display: block;
        width: 100%;
        height: 100%;
        margin: 0 auto;
        text-align: center;
        text-decoration: none;
        color: #ea5a05;
        font-size: 20px;
        font-weight: bold;
        padding: 12px;
        background: #fff;
        border-radius: 80px
    }

    .service_trans_area .trans_box .btn:hover {
        background: #ea5a05
    }

    .service_trans_area .trans_box .btn:hover a {
        color: #fff;
        background: #ea5a05;
        text-decoration: none
    }

    .service_method_area {
        width: 100%;
        max-width: 960px;
        height: auto;
        margin: 0 auto 4rem
    }

    .service_method_area h3 {
        width: 100%;
        max-width: 300px;
        height: 0;
        margin: 0 auto 1rem;
        padding-top: 11.5%;
        background: url("../../img/bcharge/service/bcharge_service_m_method.png") no-repeat top center;
        background-size: contain
    }

    .service_method_area .bdr {
        position: relative;
        width: 100%;
        max-width: 960px;
        height: auto;
        margin: 0 auto 4rem;
        border-bottom: 4px solid #e95505
    }

    .service_method_area span.tri {
        display: block;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 20px 20px 0 20px;
        border-color: #e95505 transparent transparent transparent
    }

    .service_method_area .method {
        width: 100%;
        max-width: 960px;
        height: auto;
        margin: 0 auto 2rem
    }

    .service_method_area .method th {
        width: 30%;
        max-width: 300px;
        height: auto;
        padding: 1rem;
        font-size: 18px;
        font-weight: bold;
        text-align: center;
        background: #f4c56d;
        border: 1px solid #b6b6b6
    }

    .service_method_area .method td {
        width: 70%;
        max-width: 660px;
        height: auto;
        padding: 1rem;
        background: #ffffff;
        border: 1px solid #b6b6b6
    }

    .service_method_area .method td .img {
        width: 100%;
        max-width: 480px;
        height: auto;
        margin: 0 auto 1rem
    }

    .service_method_area .method td .img img {
        width: 100%;
        height: auto;
        vertical-align: bottom
    }

    .service_method_area .method td .btn {
        width: 100%;
        max-width: 240px;
        height: auto;
        margin: 0 auto 1rem;
        padding: 4px;
        background: rgb(234, 90, 5);
        background: linear-gradient(to top, rgb(234, 90, 5) 0%, rgb(254, 169, 0) 100%);
        border-radius: 60px
    }

    .service_method_area .method td .btn a {
        display: block;
        width: 100%;
        height: 100%;
        margin: 0 auto;
        text-align: center;
        text-decoration: none;
        color: #ea5a05;
        font-size: 16px;
        font-weight: bold;
        padding: 10px;
        background: #fff;
        border-radius: 60px
    }

    .service_method_area .method td .btn:hover {
        background: #ea5a05
    }

    .service_method_area .method td .btn:hover a {
        color: #fff;
        background: #ea5a05;
        text-decoration: none
    }

    .service_method_area .info {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        width: 100%;
        max-width: 960px;
        height: auto;
        margin: 0 auto 6rem;
        padding: 2rem;
        background: #fff;
        border-radius: 10px
    }

    .service_method_area .info .img {
        width: 100%;
        max-width: 160px;
        height: auto;
        margin-right: 1rem
    }

    .service_method_area .info .img img {
        width: 100%;
        height: auto;
        vertical-align: bottom
    }

    .service_method_area .info .fukidashi {
        position: relative;
        display: inline-block;
        width: 80%;
        max-width: 720px;
        margin: 0 auto;
        padding: 1.8rem;
        background: #f8f1e3;
        border-radius: 5px
    }

    .service_method_area .info .fukidashi .o_btn {
        width: 100%;
        max-width: 240px;
        height: auto;
        margin: 0 auto;
        padding: 4px;
        background: rgb(76, 132, 17);
        background: linear-gradient(0deg, rgb(76, 132, 17) 0%, rgb(123, 169, 3) 100%);
        border-radius: 80px
    }

    .service_method_area .info .fukidashi .o_btn a {
        display: block;
        width: 100%;
        height: 100%;
        margin: 0 auto;
        text-align: center;
        text-decoration: none;
        color: #fff;
        font-size: 16px;
        font-weight: bold;
        padding: 10px;
        border-radius: 80px
    }

    .service_method_area .info .fukidashi .o_btn:hover {
        background: rgb(123, 169, 3);
        background: linear-gradient(to top, rgb(123, 169, 3) 0%, rgb(76, 132, 17) 100%)
    }

    .service_method_area .info .fukidashi .o_btn:hover a {
        color: #fff;
        text-decoration: none
    }

    .service_method_area .info .fukidashi:before {
        content: "";
        position: absolute;
        top: 30%;
        left: -30px;
        margin-top: -15px;
        border: 15px solid transparent;
        border-right: 15px solid #f8f1e3
    }

    .s_step {
        width: 100%;
        max-width: 960px;
        height: auto;
        margin: 0 auto 10rem
    }

    .s_step .h3_midashi {
        display: block;
        width: 100%;
        max-width: 960px;
        height: auto;
        margin: 0 auto 1rem;
        padding: 0 1rem;
        font-size: 4rem;
        font-weight: bold;
        line-height: 1.1;
        text-align: center
    }

    .s_step .bdr {
        position: relative;
        width: 100%;
        max-width: 960px;
        height: auto;
        margin: 0 auto 4rem;
        border-bottom: 4px solid #e95505
    }

    .s_step span.tri {
        display: block;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 20px 20px 0 20px;
        border-color: #e95505 transparent transparent transparent
    }

    .s_step h4 {
        display: block;
        width: 100%;
        max-width: 960px;
        height: auto;
        margin: 0 auto 2rem;
        padding: 1rem;
        color: #fff;
        font-weight: bold;
        font-size: 3rem;
        text-align: center;
        background: rgb(233, 86, 5);
        background: linear-gradient(90deg, rgb(233, 86, 5) 0%, rgb(241, 167, 60) 100%);
        border-radius: 10px
    }

    .s_step ol.s_step_area {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        max-width: 960px;
        height: auto;
        margin: 0 auto 2rem;
        text-indent: 0
    }

    .s_step ol.s_step_area li {
        position: relative;
        width: 98%;
        max-width: 300px;
        height: auto;
        padding: 1rem;
        margin: 0% 1%;
        text-indent: 0;
        background: #fff;
        border-radius: 5px
    }

    .s_step ol.s_step_area li .step {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: auto;
        margin: 0 auto 1rem;
        font-size: 18px;
        font-weight: bold;
        text-align: center
    }

    .s_step ol.s_step_area li .step .num {
        display: block;
        width: 30px;
        height: 30px;
        margin-right: 1rem;
        padding: 0.5rem;
        font-weight: bold;
        color: #fff;
        text-align: center;
        line-height: 1.1;
        background: #e95505;
        border-radius: 30px
    }

    .s_step ol.s_step_area li p.img {
        display: block;
        width: 100%;
        max-width: 160px;
        height: auto;
        margin: 0 auto 1rem;
        vertical-align: bottom
    }

    .s_step ol.s_step_area li p.img img {
        width: 100%;
        height: auto;
        vertical-align: bottom
    }

    .s_step ol.s_step_area li .step1_txt {
        width: 100%;
        height: auto;
        margin: 0 auto;
        padding: 1rem;
        text-align: center;
        background: #f3d5c0;
        border-radius: 5px
    }

    .s_step ol.s_step_area li .step2_txt {
        width: 100%;
        height: auto;
        margin: 0 auto;
        padding: 1rem;
        text-align: center;
        background: #f5c09d;
        border-radius: 5px
    }

    .s_step ol.s_step_area li .step3_txt {
        width: 100%;
        height: auto;
        margin: 0 auto;
        padding: 1rem;
        text-align: center;
        background: #f3a16b;
        border-radius: 5px
    }

    .s_step ol.s_step_area .anchor {
        position: relative;
        width: 100%;
        max-width: 20px;
        height: auto
    }

    .s_step ol.s_step_area .anchor span {
        display: block;
        position: absolute;
        top: 50%;
        left: 0;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 10px 0 10px 17.3px;
        border-color: transparent transparent transparent #e95505
    }

    .s_step .other_step {
        width: 100%;
        max-width: 960px;
        height: auto;
        margin: 0 auto 6rem;
        padding: 2rem;
        background: #fff;
        border: 2px dotted #333;
        border-radius: 10px
    }

    .s_step .other_step h5 {
        display: block;
        width: 100%;
        max-width: 480px;
        height: auto;
        margin: 0 auto 1rem;
        font-weight: bold;
        font-size: 1.6rem;
        text-align: center
    }

    .service_implement_area {
        width: 100%;
        max-width: 960px;
        height: auto;
        margin: 0 auto 6rem
    }

    .service_implement_area h3 {
        width: 100%;
        max-width: 300px;
        height: 0;
        margin: 0 auto 1rem;
        padding-top: 11.5%;
        background: url("../../img/bcharge/service/bcharge_service_m_implement.png") no-repeat top center;
        background-size: contain
    }

    .service_implement_area .result {
        width: 100%;
        height: auto;
        margin: 0 auto 1rem;
        font-size: 1.6rem;
        font-weight: bold;
        text-align: center
    }

    .service_implement_area .case_box {
        width: 100%;
        max-width: 960px;
        height: auto;
        margin: 0 auto;
        padding: 2rem;
        background: #fff;
        border-radius: 10px
    }

    .service_implement_area .case_box h4 {
        display: block;
        width: 100%;
        height: auto;
        margin: 0 auto 1rem;
        text-align: center;
        font-size: 2rem;
        font-weight: bold
    }

    .service_implement_area .case_box .theme {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        height: auto;
        margin: 0 auto 1rem
    }

    .service_implement_area .case_box .theme .b_logo {
        width: 100%;
        max-width: 200px;
        height: auto;
        margin-right: 1rem
    }

    .service_implement_area .case_box .theme .b_logo img {
        width: 100%;
        height: auto;
        vertical-align: bottom
    }

    .service_implement_area .case_box .theme .theme_box {
        width: 100%;
        max-width: 700px;
        height: auto;
        padding: 1rem;
        background: #f5f5f5;
        border-radius: 10px
    }

    .service_implement_area .case_box .theme .theme_box h5 {
        display: block;
        width: 100%;
        height: auto;
        margin: 0 auto 1rem;
        padding: 0.5rem;
        text-align: center;
        font-size: 1.6rem;
        font-weight: bold;
        color: #fff;
        background: #8b8b8b;
        border-radius: 20px
    }

    .service_implement_area .case_box .theme .theme_box .df {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        height: auto;
        margin: 0 auto 1rem
    }

    .service_implement_area .case_box .theme .theme_box .df .img {
        width: 30%;
        max-width: 160px;
        height: auto
    }

    .service_implement_area .case_box .theme .theme_box .df .img img {
        width: 100%;
        height: auto;
        vertical-align: bottom
    }

    .service_implement_area .case_box .theme .theme_box .df .txt {
        width: 68%
    }

    .service_implement_area .case_box .under {
        position: relative;
        width: 100%;
        height: auto;
        margin: 0 auto 4rem
    }

    .service_implement_area .case_box span.tri {
        display: block;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 20px 20px 0 20px;
        border-color: #e95505 transparent transparent transparent
    }

    .service_implement_area .case_box .resolution {
        width: 100%;
        height: auto;
        margin: 0 auto
    }

    .service_implement_area .case_box .resolution .resolution_box {
        width: 100%;
        max-width: 920px;
        height: auto;
        background: #ffeece;
        padding: 1rem;
        border-radius: 10px
    }

    .service_implement_area .case_box .resolution .resolution_box h5 {
        display: block;
        width: 100%;
        height: auto;
        margin: 0 auto 1rem;
        padding: 0.5rem;
        text-align: center;
        font-size: 1.6rem;
        font-weight: bold;
        color: #fff;
        background: #e95505;
        border-radius: 20px
    }

    .service_implement_area .case_box .resolution .resolution_box .df {
        width: 100%;
        height: auto;
        margin: 0 auto 1rem
    }

    .service_implement_area .case_box .resolution .resolution_box .df .img {
        width: 22%;
        max-width: 160px;
        height: auto
    }

    .service_implement_area .case_box .resolution .resolution_box .df .img img {
        width: 100%;
        height: auto;
        vertical-align: bottom
    }

    .service_implement_area .case_box .resolution .resolution_box .df .txt {
        width: 76%;
        max-width: 700px
    }

    .service_implement_area .case_box .resolution .resolution_box .resolution_img {
        width: 100%;
        max-width: 480px;
        height: auto;
        margin: 0 auto;
        text-align: center
    }

    .service_implement_area .case_box .resolution .resolution_box .resolution_img img {
        width: 100%;
        height: auto;
        vertical-align: bottom
    }

    .service_implement_area .case_box .resolution .resolution_box .WM {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        height: auto;
        padding: 6px;
        background: #fff;
        border: 2px solid #ffba43;
        border-radius: 10px
    }

    .service_implement_area .case_box .resolution .resolution_box .WM .img {
        width: 100%;
        max-width: 120px;
        margin-right: 1rem;
        height: auto
    }

    .service_implement_area .case_box .resolution .resolution_box .WM .img img {
        width: 100%;
        height: auto;
        vertical-align: bottom
    }

    .service_implement_area .case_box .resolution .resolution_box .WM .txt {
        width: 100%
    }
}

@media screen and (max-width:960px) {
    .ttt_area_service {
        position: relative;
        width: 100%;
        height: 0;
        padding-top: 41.7%;
        background: url("../../img/bcharge/service/bcharge_service_SP.jpg") no-repeat top center;
        background-size: contain;
        margin: 90px auto 0
    }

    .ttt_area_service h2 {}

    .ttt_area_payroll {
        position: relative;
        width: 100%;
        height: 0;
        padding-top: 41.7%;
        background: url("../../img/payroll/payroll_top_SP.jpg") no-repeat top center;
        background-size: contain;
        margin: 60px auto 0
    }

    .ttt_area_payroll h2 {}

    .ttt_area_payroll_j {
        position: relative;
        width: 100%;
        height: 0;
        padding-top: 41.7%;
        background: url("../../img/payroll/payroll_top_j_SP.jpg") no-repeat top center;
        background-size: contain;
        margin: 60px auto 0
    }

    .ttt_area_payroll_j h2 {}

    .pr_area {
        width: 100%;
        max-width: 960px;
        height: auto;
        margin: 0 auto 10rem
    }

    .pr_area .h3_midashi {
        position: relative;
        display: block;
        width: 100%;
        max-width: 600px;
        height: auto;
        margin: 0 auto 1rem;
        padding: 0 1rem;
        font-size: 4rem;
        font-weight: bold;
        line-height: 1.1;
        text-align: center
    }

    .pr_area .bdr {
        position: relative;
        width: 100%;
        max-width: 960px;
        height: auto;
        margin: 0 auto 4rem;
        border-bottom: 4px solid #e95505
    }

    .pr_area span.tri {
        display: block;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 20px 20px 0 20px;
        border-color: #e95505 transparent transparent transparent
    }

    .pr_area h4 {
        display: block;
        width: 100%;
        max-width: 960px;
        height: auto;
        margin: 0 auto 1rem;
        padding: 1rem;
        color: #fff;
        font-weight: bold;
        font-size: 2rem;
        text-align: center;
        background: rgb(233, 86, 5);
        background: linear-gradient(90deg, rgb(233, 86, 5) 0%, rgb(241, 167, 60) 100%);
        border-radius: 10px
    }

    .pr_area .pr_w_box {
        width: 100%;
        max-width: 960px;
        height: auto;
        margin: 0 auto 2rem;
        padding: 20px;
        background: #fff;
        border-radius: 5px
    }

    .pr_area .pr_intro_img {
        width: 100%;
        max-width: 640px;
        height: auto;
        margin: 0 auto 2rem
    }

    .pr_area .pr_intro_img img {
        width: 100%;
        height: auto;
        vertical-align: bottom
    }

    .pr_area .pr_img920 {
        width: 100%;
        max-width: 920px;
        height: auto;
        margin: 0 auto 2rem
    }

    .pr_area .pr_img920 img {
        width: 100%;
        height: auto;
        vertical-align: bottom
    }

    .pr_area .pr_img640 {
        width: 100%;
        max-width: 640px;
        height: auto;
        margin: 0 auto 2rem
    }

    .pr_area .pr_img640 img {
        width: 100%;
        height: auto;
        vertical-align: bottom
    }

    .pr_area ol.pr_step_area {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        max-width: 920px;
        height: auto;
        margin: 0 auto 2rem;
        text-indent: 0
    }

    .pr_area ol.pr_step_area li {
        display: flex;
        flex-direction: column;
        position: relative;
        width: 98%;
        max-width: 300px;
        height: auto;
        padding: 1rem;
        margin: 0% 1%;
        text-indent: 0;
        background: #fff;
        border-radius: 5px
    }

    .pr_area ol.pr_step_area li .step {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: auto;
        margin: 0 auto 1rem;
        font-size: 18px;
        font-weight: bold;
        text-align: center
    }

    .pr_area ol.pr_step_area li .step .num {
        display: block;
        width: 30px;
        height: 30px;
        margin-right: 1rem;
        padding: 0.5rem;
        font-weight: bold;
        color: #fff;
        text-align: center;
        line-height: 1.1;
        background: #e95505;
        border-radius: 30px
    }

    .pr_area ol.pr_step_area li .step_1rayer {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: auto;
        margin: 0 auto 2rem;
        font-size: 18px;
        font-weight: bold;
        text-align: center
    }

    .pr_area ol.pr_step_area li .step_1rayer .num {
        display: block;
        width: 30px;
        height: 30px;
        margin-right: 1rem;
        padding: 0.5rem;
        font-weight: bold;
        color: #fff;
        text-align: center;
        line-height: 1.1;
        background: #e95505;
        border-radius: 30px
    }

    .pr_area ol.pr_step_area li p.img {
        display: block;
        width: 100%;
        max-width: 240px;
        height: auto;
        margin: 0 auto 1rem;
        vertical-align: bottom
    }

    .pr_area ol.pr_step_area li p.img img {
        width: 100%;
        height: auto;
        vertical-align: bottom
    }

    .pr_area ol.pr_step_area li .step1_txt,
    .pr_area ol.pr_step_area li .step2_txt,
    .pr_area ol.pr_step_area li .step3_txt {
        flex-grow: 1;
        width: 100%;
        height: auto;
        margin: 0 auto;
        padding: 1rem;
        text-align: center;
        background: #f3d5c0;
        border-radius: 5px
    }

    .pr_area ol.pr_step_area .anchor {
        position: relative;
        width: 100%;
        max-width: 20px;
        height: auto
    }

    .pr_area ol.pr_step_area .anchor span {
        display: block;
        position: absolute;
        top: 50%;
        left: 0;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 10px 0 10px 17.3px;
        border-color: transparent transparent transparent #e95505
    }

    .pr_area .donyu_box {
        width: 100%;
        max-width: 920px;
        height: auto;
        margin: 0 auto 6rem;
        text-align: center
    }

    .pr_area .donyu_box h4 {
        display: block;
        width: 100%;
        height: auto;
        margin: 0 auto 1rem;
        padding: 1rem;
        font-size: 2rem;
        font-weight: bold;
        color: #fff;
        background: #e55504
    }

    .pr_area .donyu_box .tri_area {
        position: relative;
        width: 100%;
        height: auto;
        text-align: center
    }

    .pr_area .donyu_box .tri_area .tri {
        display: block;
        position: absolute;
        top: 0;
        left: 50%;
        width: 0;
        height: 0;
        border-right: 50px solid transparent;
        border-left: 50px solid transparent;
        border-top: 30px solid #E9A205;
        border-bottom: 0
    }

    .pr_area .donyu_box:last-of-type {
        margin: 0 auto
    }

    .shohin2 {
        width: 100%;
        max-width: 960px;
        height: auto;
        margin: 0 auto 2rem
    }

    .shohin2 .h3_midashi {
        position: relative;
        display: block;
        width: 100%;
        max-width: 600px;
        height: auto;
        margin: 0 auto 1rem;
        padding: 0 1rem;
        font-size: 4rem;
        font-weight: bold;
        line-height: 1.1;
        text-align: center
    }

    .shohin2 .h3_midashi2 {
        display: block;
        width: 100%;
        max-width: 960px;
        height: auto;
        margin: 0 auto 1rem;
        padding: 0 1rem;
        font-size: 4rem;
        font-weight: bold;
        line-height: 1.1;
        text-align: center
    }

    .shohin2 .h3_midashi:before {
        position: absolute;
        content: "";
        bottom: 0;
        left: 0;
        display: block;
        width: 44px;
        height: 60px;
        margin-right: 0.5rem;
        background: url("../../img/bcharge/service/accent_left.png") no-repeat top center;
        background-size: contain
    }

    .shohin2 .h3_midashi:after {
        position: absolute;
        content: "";
        bottom: 0;
        right: 0;
        display: block;
        width: 44px;
        height: 60px;
        margin-left: 0.5rem;
        background: url("../../img/bcharge/service/accent_right.png") no-repeat top center;
        background-size: contain
    }

    .shohin2 .bdr {
        position: relative;
        width: 100%;
        max-width: 960px;
        height: auto;
        margin: 0 auto 4rem;
        border-bottom: 4px solid #e95505
    }

    .shohin2 span.tri {
        display: block;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 20px 20px 0 20px;
        border-color: #e95505 transparent transparent transparent
    }

    .shohin2 .shohin_area {
        width: 100%;
        max-width: 960px;
        height: auto;
        margin: 0 auto;
        padding: 2rem;
        background: #fff;
        border-radius: 10px
    }

    .shohin2 .shohin_area h4 {
        display: block;
        width: 100%;
        max-width: 960px;
        height: auto;
        margin: 0 auto 1rem;
        padding: 1rem;
        color: #fff;
        font-weight: bold;
        font-size: 3rem;
        text-align: center;
        background: rgb(233, 86, 5);
        background: linear-gradient(90deg, rgb(233, 86, 5) 0%, rgb(241, 167, 60) 100%);
        border-radius: 10px
    }

    .shohin2 .shohin_area .img {
        width: 100%;
        max-width: 920px;
        height: 0;
        margin: 0 auto;
        padding-top: 74%;
        background: url("../../img/bcharge/service/bcharge_service_gaiyo.jpg") no-repeat top center;
        background-size: contain
    }

    .service_about_area {
        width: 100%;
        max-width: 960px;
        height: auto;
        margin: 0 auto 6rem
    }

    .service_about_area h3 {
        width: 100%;
        max-width: 300px;
        height: 0;
        margin: 0 auto 1rem;
        padding-top: 10.5%;
        background: url("../../img/bcharge/service/bcharge_service_m_about.png") no-repeat top center;
        background-size: contain
    }

    .service_about_area .bdr {
        position: relative;
        width: 100%;
        max-width: 960px;
        height: auto;
        margin: 0 auto 4rem;
        border-bottom: 4px solid #e95505
    }

    .service_about_area span.tri {
        display: block;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 20px 20px 0 20px;
        border-color: #e95505 transparent transparent transparent
    }

    .service_about_area .intro_txt {
        width: 100%;
        height: auto;
        margin: 0 auto 1rem;
        font-size: 2rem;
        font-weight: bold;
        text-align: center
    }

    .service_about_area .about_box {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        justify-content: space-between;
        width: 100%;
        max-width: 960px;
        height: auto;
        margin: 0 auto;
        padding: 2rem;
        background: #fff;
        border-radius: 10px
    }

    .service_about_area .about_box .img {
        width: 18%;
        max-width: 160px;
        height: auto;
        margin-right: 1rem
    }

    .service_about_area .about_box .img img {
        width: 100%;
        height: auto;
        vertical-align: bottom
    }

    .service_about_area .about_box .fukidashi {
        position: relative;
        display: inline-block;
        width: 80%;
        max-width: 680px;
        margin: 0 auto;
        padding: 1.8rem;
        background: #f8f1e3;
        border-radius: 5px
    }

    .service_about_area .about_box .fukidashi:before {
        content: "";
        position: absolute;
        top: 30%;
        left: -30px;
        margin-top: -15px;
        border: 15px solid transparent;
        border-right: 15px solid #f8f1e3
    }

    .service_trans_area {
        width: 100%;
        max-width: 960px;
        height: auto;
        margin: 0 auto 4rem
    }

    .service_trans_area h3 {
        width: 100%;
        max-width: 420px;
        height: 0;
        margin: 0 auto 1rem;
        padding-top: 11.5%;
        background: url("../../img/bcharge/service/bcharge_service_m_trans.png") no-repeat top center;
        background-size: contain
    }

    .service_trans_area .bdr {
        position: relative;
        width: 100%;
        max-width: 960px;
        height: auto;
        margin: 0 auto 4rem;
        border-bottom: 4px solid #e95505
    }

    .service_trans_area span.tri {
        display: block;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 20px 20px 0 20px;
        border-color: #e95505 transparent transparent transparent
    }

    .service_trans_area .trans_box {
        width: 100%;
        height: auto;
        margin: 0 auto 6rem
    }

    .service_trans_area .trans_box h4 {
        display: block;
        width: 100%;
        max-width: 960px;
        height: auto;
        margin: 0 auto 1rem;
        font-size: 2rem;
        font-weight: bold;
        text-align: center
    }

    .service_trans_area .trans_box .trans_img {
        width: 100%;
        max-width: 960px;
        height: 0;
        padding-top: 45%;
        margin: 0 auto 2rem;
        background: url("../../img/bcharge/service/bcharge_service_pc_3step.jpg") no-repeat top center;
        background-size: contain
    }

    .service_trans_area .trans_box .btn {
        width: 100%;
        max-width: 320px;
        height: auto;
        margin: 0 auto 6rem;
        padding: 4px;
        background: rgb(234, 90, 5);
        background: linear-gradient(to top, rgb(234, 90, 5) 0%, rgb(254, 169, 0) 100%);
        border-radius: 80px
    }

    .service_trans_area .trans_box .btn a {
        display: block;
        width: 100%;
        height: 100%;
        margin: 0 auto;
        text-align: center;
        text-decoration: none;
        color: #ea5a05;
        font-size: 20px;
        font-weight: bold;
        padding: 12px;
        background: #fff;
        border-radius: 80px
    }

    .service_trans_area .trans_box .btn:hover {
        background: #ea5a05
    }

    .service_trans_area .trans_box .btn:hover a {
        color: #fff;
        background: #ea5a05;
        text-decoration: none
    }

    .service_method_area {
        width: 100%;
        max-width: 960px;
        height: auto;
        margin: 0 auto 4rem
    }

    .service_method_area h3 {
        width: 100%;
        max-width: 300px;
        height: 0;
        margin: 0 auto 1rem;
        padding-top: 11.5%;
        background: url("../../img/bcharge/service/bcharge_service_m_method.png") no-repeat top center;
        background-size: contain
    }

    .service_method_area .bdr {
        position: relative;
        width: 100%;
        max-width: 960px;
        height: auto;
        margin: 0 auto 4rem;
        border-bottom: 4px solid #e95505
    }

    .service_method_area span.tri {
        display: block;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 20px 20px 0 20px;
        border-color: #e95505 transparent transparent transparent
    }

    .service_method_area .method {
        width: 100%;
        max-width: 960px;
        height: auto;
        margin: 0 auto 2rem
    }

    .service_method_area .method th {
        width: 30%;
        max-width: 300px;
        height: auto;
        padding: 1rem;
        font-size: 18px;
        font-weight: bold;
        text-align: center;
        background: #f4c56d;
        border: 1px solid #b6b6b6
    }

    .service_method_area .method td {
        width: 70%;
        max-width: 660px;
        height: auto;
        padding: 1rem;
        background: #ffffff;
        border: 1px solid #b6b6b6
    }

    .service_method_area .method td .img {
        width: 100%;
        max-width: 480px;
        height: auto;
        margin: 0 auto 1rem
    }

    .service_method_area .method td .img img {
        width: 100%;
        height: auto;
        vertical-align: bottom
    }

    .service_method_area .method td .btn {
        width: 100%;
        max-width: 240px;
        height: auto;
        margin: 0 auto 1rem;
        padding: 4px;
        background: rgb(234, 90, 5);
        background: linear-gradient(to top, rgb(234, 90, 5) 0%, rgb(254, 169, 0) 100%);
        border-radius: 60px
    }

    .service_method_area .method td .btn a {
        display: block;
        width: 100%;
        height: 100%;
        margin: 0 auto;
        text-align: center;
        text-decoration: none;
        color: #ea5a05;
        font-size: 16px;
        font-weight: bold;
        padding: 10px;
        background: #fff;
        border-radius: 60px
    }

    .service_method_area .method td .btn:hover {
        background: #ea5a05
    }

    .service_method_area .method td .btn:hover a {
        color: #fff;
        background: #ea5a05;
        text-decoration: none
    }

    .service_method_area .info {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        width: 100%;
        max-width: 960px;
        height: auto;
        margin: 0 auto 6rem;
        padding: 2rem;
        background: #fff;
        border-radius: 10px
    }

    .service_method_area .info .img {
        width: 100%;
        max-width: 160px;
        height: auto;
        margin-right: 1rem
    }

    .service_method_area .info .img img {
        width: 100%;
        height: auto;
        vertical-align: bottom
    }

    .service_method_area .info .fukidashi {
        position: relative;
        display: inline-block;
        width: 76%;
        max-width: 700px;
        margin: 0 auto;
        padding: 1.8rem;
        background: #f8f1e3;
        border-radius: 5px
    }

    .service_method_area .info .fukidashi .o_btn {
        width: 100%;
        max-width: 240px;
        height: auto;
        margin: 0 auto;
        padding: 4px;
        background: rgb(76, 132, 17);
        background: linear-gradient(0deg, rgb(76, 132, 17) 0%, rgb(123, 169, 3) 100%);
        border-radius: 80px
    }

    .service_method_area .info .fukidashi .o_btn a {
        display: block;
        width: 100%;
        height: 100%;
        margin: 0 auto;
        text-align: center;
        text-decoration: none;
        color: #fff;
        font-size: 16px;
        font-weight: bold;
        padding: 10px;
        border-radius: 80px
    }

    .service_method_area .info .fukidashi .o_btn:hover {
        background: rgb(123, 169, 3);
        background: linear-gradient(to top, rgb(123, 169, 3) 0%, rgb(76, 132, 17) 100%)
    }

    .service_method_area .info .fukidashi .o_btn:hover a {
        color: #fff;
        text-decoration: none
    }

    .service_method_area .info .fukidashi:before {
        content: "";
        position: absolute;
        top: 30%;
        left: -30px;
        margin-top: -15px;
        border: 15px solid transparent;
        border-right: 15px solid #f8f1e3
    }

    .s_step {
        width: 100%;
        max-width: 960px;
        height: auto;
        margin: 0 auto 6rem
    }

    .s_step .h3_midashi {
        display: block;
        width: 100%;
        max-width: 960px;
        height: auto;
        margin: 0 auto 1rem;
        padding: 0 1rem;
        font-size: 4rem;
        font-weight: bold;
        line-height: 1.1;
        text-align: center
    }

    .s_step .bdr {
        position: relative;
        width: 100%;
        max-width: 960px;
        height: auto;
        margin: 0 auto 4rem;
        border-bottom: 4px solid #e95505
    }

    .s_step span.tri {
        display: block;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 20px 20px 0 20px;
        border-color: #e95505 transparent transparent transparent
    }

    .s_step h4 {
        display: block;
        width: 100%;
        max-width: 960px;
        height: auto;
        margin: 0 auto 2rem;
        padding: 1rem;
        color: #fff;
        font-weight: bold;
        font-size: 3rem;
        text-align: center;
        background: rgb(233, 86, 5);
        background: linear-gradient(90deg, rgb(233, 86, 5) 0%, rgb(241, 167, 60) 100%);
        border-radius: 10px
    }

    .s_step ol.s_step_area {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        max-width: 960px;
        height: auto;
        margin: 0 auto 2rem;
        text-indent: 0
    }

    .s_step ol.s_step_area li {
        position: relative;
        width: 98%;
        max-width: 300px;
        height: auto;
        padding: 1rem;
        margin: 0% 1%;
        text-indent: 0;
        background: #fff;
        border-radius: 5px
    }

    .s_step ol.s_step_area li .step {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: auto;
        margin: 0 auto 1rem;
        font-size: 18px;
        font-weight: bold;
        text-align: center
    }

    .s_step ol.s_step_area li .step .num {
        display: block;
        width: 30px;
        height: 30px;
        margin-right: 1rem;
        padding: 0.5rem;
        font-weight: bold;
        color: #fff;
        text-align: center;
        line-height: 1.1;
        background: #e95505;
        border-radius: 30px
    }

    .s_step ol.s_step_area li p.img {
        display: block;
        width: 100%;
        max-width: 160px;
        height: auto;
        margin: 0 auto 1rem;
        vertical-align: bottom
    }

    .s_step ol.s_step_area li p.img img {
        width: 100%;
        height: auto;
        vertical-align: bottom
    }

    .s_step ol.s_step_area li .step1_txt {
        width: 100%;
        height: auto;
        margin: 0 auto;
        padding: 1rem;
        text-align: center;
        background: #f3d5c0;
        border-radius: 5px
    }

    .s_step ol.s_step_area li .step2_txt {
        width: 100%;
        height: auto;
        margin: 0 auto;
        padding: 1rem;
        text-align: center;
        background: #f5c09d;
        border-radius: 5px
    }

    .s_step ol.s_step_area li .step3_txt {
        width: 100%;
        height: auto;
        margin: 0 auto;
        padding: 1rem;
        text-align: center;
        background: #f3a16b;
        border-radius: 5px
    }

    .s_step ol.s_step_area .anchor {
        position: relative;
        width: 100%;
        max-width: 20px;
        height: auto
    }

    .s_step ol.s_step_area .anchor span {
        display: block;
        position: absolute;
        top: 50%;
        left: 0;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 10px 0 10px 17.3px;
        border-color: transparent transparent transparent #e95505
    }

    .s_step .other_step {
        width: 100%;
        max-width: 960px;
        height: auto;
        margin: 0 auto 6rem;
        padding: 2rem;
        background: #fff;
        border: 2px dotted #333;
        border-radius: 10px
    }

    .s_step .other_step h5 {
        display: block;
        width: 100%;
        max-width: 480px;
        margin: 0 auto 1rem;
        font-weight: bold;
        font-size: 1.6rem;
        text-align: center
    }

    .service_implement_area {
        width: 100%;
        max-width: 960px;
        height: auto;
        margin: 0 auto 6rem
    }

    .service_implement_area h3 {
        width: 100%;
        max-width: 300px;
        height: 0;
        margin: 0 auto 1rem;
        padding-top: 11.5%;
        background: url("../../img/bcharge/service/bcharge_service_m_implement.png") no-repeat top center;
        background-size: contain
    }

    .service_implement_area .result {
        width: 100%;
        height: auto;
        margin: 0 auto 1rem;
        font-size: 1.6rem;
        font-weight: bold;
        text-align: center
    }

    .service_implement_area .case_box {
        width: 100%;
        max-width: 960px;
        height: auto;
        margin: 0 auto;
        padding: 2rem;
        background: #fff;
        border-radius: 10px
    }

    .service_implement_area .case_box h4 {
        display: block;
        width: 100%;
        height: auto;
        margin: 0 auto 1rem;
        text-align: center;
        font-size: 2rem;
        font-weight: bold
    }

    .service_implement_area .case_box .theme {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        height: auto;
        margin: 0 auto 1rem
    }

    .service_implement_area .case_box .theme .b_logo {
        width: 100%;
        max-width: 200px;
        height: auto;
        margin-right: 1rem
    }

    .service_implement_area .case_box .theme .b_logo img {
        width: 100%;
        height: auto;
        vertical-align: bottom
    }

    .service_implement_area .case_box .theme .theme_box {
        width: 100%;
        max-width: 600px;
        height: auto;
        padding: 1rem;
        background: #f5f5f5;
        border-radius: 10px
    }

    .service_implement_area .case_box .theme .theme_box h5 {
        display: block;
        width: 100%;
        height: auto;
        margin: 0 auto 1rem;
        padding: 0.5rem;
        text-align: center;
        font-size: 1.6rem;
        font-weight: bold;
        color: #fff;
        background: #8b8b8b;
        border-radius: 20px
    }

    .service_implement_area .case_box .theme .theme_box .df {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        height: auto;
        margin: 0 auto 1rem
    }

    .service_implement_area .case_box .theme .theme_box .df .img {
        width: 30%;
        max-width: 160px;
        height: auto
    }

    .service_implement_area .case_box .theme .theme_box .df .img img {
        width: 100%;
        height: auto;
        vertical-align: bottom
    }

    .service_implement_area .case_box .theme .theme_box .df .txt {
        width: 68%
    }

    .service_implement_area .case_box .under {
        position: relative;
        width: 100%;
        height: auto;
        margin: 0 auto 4rem
    }

    .service_implement_area .case_box span.tri {
        display: block;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 20px 20px 0 20px;
        border-color: #e95505 transparent transparent transparent
    }

    .service_implement_area .case_box .resolution {
        width: 100%;
        height: auto;
        margin: 0 auto
    }

    .service_implement_area .case_box .resolution .resolution_box {
        width: 100%;
        max-width: 920px;
        height: auto;
        background: #ffeece;
        padding: 1rem;
        border-radius: 10px
    }

    .service_implement_area .case_box .resolution .resolution_box h5 {
        display: block;
        width: 100%;
        height: auto;
        margin: 0 auto 1rem;
        padding: 0.5rem;
        text-align: center;
        font-size: 1.6rem;
        font-weight: bold;
        color: #fff;
        background: #e95505;
        border-radius: 20px
    }

    .service_implement_area .case_box .resolution .resolution_box .df {
        width: 100%;
        height: auto;
        margin: 0 auto 1rem
    }

    .service_implement_area .case_box .resolution .resolution_box .df .img {
        width: 22%;
        max-width: 160px;
        height: auto
    }

    .service_implement_area .case_box .resolution .resolution_box .df .img img {
        width: 100%;
        height: auto;
        vertical-align: bottom
    }

    .service_implement_area .case_box .resolution .resolution_box .df .txt {
        width: 76%;
        max-width: 700px
    }

    .service_implement_area .case_box .resolution .resolution_box .resolution_img {
        width: 100%;
        max-width: 480px;
        height: auto;
        margin: 0 auto;
        text-align: center
    }

    .service_implement_area .case_box .resolution .resolution_box .resolution_img img {
        width: 100%;
        height: auto;
        vertical-align: bottom
    }

    .service_implement_area .case_box .resolution .resolution_box .WM {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        height: auto;
        padding: 6px;
        background: #fff;
        border: 2px solid #ffba43;
        border-radius: 10px
    }

    .service_implement_area .case_box .resolution .resolution_box .WM .img {
        width: 100%;
        max-width: 120px;
        margin-right: 1rem;
        height: auto
    }

    .service_implement_area .case_box .resolution .resolution_box .WM .img img {
        width: 100%;
        height: auto;
        vertical-align: bottom
    }

    .service_implement_area .case_box .resolution .resolution_box .WM .txt {
        width: 100%
    }
}

@media screen and (max-width:768px) {
    .ttt_area_service {
        position: relative;
        width: 100%;
        max-width: 960px;
        height: 0;
        padding-top: 41.7%;
        background: url("../../img/bcharge/service/bcharge_service_SP.jpg") no-repeat top center;
        background-size: contain;
        margin: 60px auto 0
    }

    .ttt_area_service h2 {}

    .ttt_area_payroll {
        position: relative;
        width: 100%;
        height: 0;
        padding-top: 41.7%;
        background: url("../../img/payroll/payroll_top_SP.jpg") no-repeat top center;
        background-size: contain;
        margin: 60px auto 0
    }

    .ttt_area_payroll h2 {}

    .pr_area {
        width: 100%;
        max-width: 960px;
        height: auto;
        margin: 0 auto 10rem
    }

    .pr_area .h3_midashi {
        font-size: 2.5rem
    }

    .pr_area .bdr {
        position: relative;
        width: 100%;
        max-width: 960px;
        height: auto;
        margin: 0 auto 4rem;
        border-bottom: 4px solid #e95505
    }

    .pr_area span.tri {
        display: block;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 20px 20px 0 20px;
        border-color: #e95505 transparent transparent transparent
    }

    .pr_area h4 {
        font-size: 1.8rem
    }

    .pr_area .pr_w_box {
        width: 100%;
        max-width: 960px;
        height: auto;
        margin: 0 auto 2rem;
        padding: 20px;
        background: #fff;
        border-radius: 5px
    }

    .pr_area .pr_intro_imgsp {
        width: 100%;
        max-width: 640px;
        height: auto;
        margin: 0 auto 2rem
    }

    .pr_area .pr_intro_imgsp img {
        width: 100%;
        height: auto;
        vertical-align: bottom
    }

    .pr_area .pr_img920 {
        width: 100%;
        max-width: 920px;
        height: auto;
        margin: 0 auto 2rem
    }

    .pr_area .pr_img920 img {
        width: 100%;
        height: auto;
        vertical-align: bottom
    }

    .pr_area .pr_img640 {
        width: 100%;
        max-width: 640px;
        height: auto;
        margin: 0 auto 2rem
    }

    .pr_area .pr_img640 img {
        width: 100%;
        height: auto;
        vertical-align: bottom
    }

    .pr_area ol.pr_step_area {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        max-width: 920px;
        height: auto;
        margin: 0 auto 2rem;
        text-indent: 0
    }

    .pr_area ol.pr_step_area li {
        display: flex;
        flex-direction: column;
        position: relative;
        width: 98%;
        max-width: 300px;
        height: auto;
        padding: 1rem;
        margin: 0% 1%;
        text-indent: 0;
        background: #fff;
        border-radius: 5px
    }

    .pr_area ol.pr_step_area li .step {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: auto;
        margin: 0 auto 1rem;
        font-size: 18px;
        font-weight: bold;
        text-align: center
    }

    .pr_area ol.pr_step_area li .step .num {
        display: block;
        width: 30px;
        height: 30px;
        margin-right: 1rem;
        padding: 0.5rem;
        font-weight: bold;
        color: #fff;
        text-align: center;
        line-height: 1.1;
        background: #e95505;
        border-radius: 30px
    }

    .pr_area ol.pr_step_area li .step_1rayer {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: auto;
        margin: 0 auto 2rem;
        font-size: 18px;
        font-weight: bold;
        text-align: center
    }

    .pr_area ol.pr_step_area li .step_1rayer .num {
        display: block;
        width: 30px;
        height: 30px;
        margin-right: 1rem;
        padding: 0.5rem;
        font-weight: bold;
        color: #fff;
        text-align: center;
        line-height: 1.1;
        background: #e95505;
        border-radius: 30px
    }

    .pr_area ol.pr_step_area li p.img {
        display: block;
        width: 100%;
        max-width: 240px;
        height: auto;
        margin: 0 auto 1rem;
        vertical-align: bottom
    }

    .pr_area ol.pr_step_area li p.img img {
        width: 100%;
        height: auto;
        vertical-align: bottom
    }

    .pr_area ol.pr_step_area li .step1_txt,
    .pr_area ol.pr_step_area li .step2_txt,
    .pr_area ol.pr_step_area li .step3_txt {
        flex-grow: 1;
        width: 100%;
        height: auto;
        margin: 0 auto;
        padding: 1rem;
        text-align: center;
        background: #f3d5c0;
        border-radius: 5px
    }

    .pr_area ol.pr_step_area .anchor {
        position: relative;
        width: 100%;
        max-width: 20px;
        height: auto
    }

    .pr_area ol.pr_step_area .anchor span {
        display: block;
        position: absolute;
        top: 50%;
        left: 0;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 10px 0 10px 17.3px;
        border-color: transparent transparent transparent #e95505
    }

    .pr_area .donyu_box {
        width: 100%;
        max-width: 920px;
        height: auto;
        margin: 0 auto 6rem;
        text-align: center
    }

    .pr_area .donyu_box h4 {
        display: block;
        width: 100%;
        height: auto;
        margin: 0 auto 1rem;
        padding: 1rem;
        font-size: 2rem;
        font-weight: bold;
        color: #fff;
        background: #e55504
    }

    .pr_area .donyu_box .tri_area {
        position: relative;
        width: 100%;
        height: auto;
        text-align: center
    }

    .pr_area .donyu_box .tri_area .tri {
        display: block;
        position: absolute;
        top: 0;
        left: 50%;
        width: 0;
        height: 0;
        border-right: 50px solid transparent;
        border-left: 50px solid transparent;
        border-top: 30px solid #E9A205;
        border-bottom: 0
    }

    .pr_area .donyu_box:last-of-type {
        margin: 0 auto
    }

    .shohin2 {
        margin: 0 auto 2rem
    }

    .shohin2 .h3_midashi,
    .shohin2 .h3_midashi2 {
        font-size: 2.5rem
    }

    .shohin2 .h3_midashi:before {
        content: none
    }

    .shohin2 .h3_midashi:after {
        content: none
    }

    .shohin2 .shohin_area h4 {
        font-size: 1.8rem
    }

    .shohin2 .shohin_area .img {
        width: 100%;
        max-width: 768px;
        height: 0;
        margin: 0 auto;
        padding-top: 250%;
        background: url("../../img/bcharge/service/bcharge_service_gaiyosp.jpg") no-repeat top center;
        background-size: contain
    }

    .service_about_area h3 {
        padding-top: 15.5%
    }

    .service_about_area .intro_txt {
        font-size: 1.6rem
    }

    .service_about_area .about_box {
        flex-direction: column
    }

    .service_about_area .about_box .img {
        width: 100%;
        max-width: 160px;
        height: auto;
        margin: 0 auto 1rem
    }

    .service_about_area .about_box .fukidashi {
        width: 100%
    }

    .service_about_area .about_box .fukidashi:before {
        content: "";
        position: absolute;
        top: 0;
        left: 48%;
        margin-top: -15px;
        border-width: 0 15px 15px 15px;
        border-color: transparent transparent #f8f1e3 transparent
    }

    .service_trans_area h3 {
        padding-top: 16%
    }

    .service_trans_area .trans_box h4 {
        font-size: 1.6rem
    }

    .service_trans_area .trans_box .trans_img {
        width: 100%;
        max-width: 768px;
        height: 0;
        padding-top: 250%;
        margin: 0 auto 2rem;
        background: url("../../img/bcharge/service/bcharge_service_sp_3step.jpg") no-repeat top center;
        background-size: contain
    }

    .service_trans_area .trans_box .btn {
        max-width: 240px;
        padding: 4px;
        border-radius: 60px
    }

    .service_trans_area .trans_box .btn a {
        font-size: 16px;
        border-radius: 60px
    }

    .service_method_area h3 {
        padding-top: 14.6%
    }

    .service_method_area .method th {
        display: block;
        width: 100%;
        max-width: 768px;
        font-size: 16px
    }

    .service_method_area .method td {
        display: block;
        width: 100%;
        max-width: 768px
    }

    .service_method_area .method td .btn {
        max-width: 200px
    }

    .service_method_area .method td .btn a {
        font-size: 14px
    }

    .service_method_area .info {
        flex-direction: column
    }

    .service_method_area .info .img {
        width: 100%;
        max-width: 160px;
        height: auto;
        margin: 0 auto 1rem
    }

    .service_method_area .info .fukidashi {
        width: 100%;
        max-width: 768px;
        text-align: center
    }

    .service_method_area .info .fukidashi .o_btn {
        max-width: 200px;
        border-radius: 60px
    }

    .service_method_area .info .fukidashi .o_btn a {
        font-size: 14px;
        border-radius: 60px
    }

    .service_method_area .info .fukidashi:before {
        content: "";
        position: absolute;
        top: 0;
        left: 46%;
        margin-top: -15px;
        border-width: 0 15px 15px 15px;
        border-color: transparent transparent #f8f1e3 transparent
    }

    .s_step .h3_midashi {
        font-size: 2.5rem
    }

    .s_step h4 {
        font-size: 1.8rem
    }

    .s_step ol.s_step_area {
        flex-direction: column
    }

    .s_step ol.s_step_area li {
        width: 100%;
        margin: 1rem auto
    }

    .s_step ol.s_step_area li .step {
        font-size: 16px
    }

    .s_step ol.s_step_area .anchor {
        position: relative;
        width: 100%;
        max-width: 20px;
        height: auto;
        margin: 0 auto 1.5rem
    }

    .s_step ol.s_step_area .anchor span {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 17.3px 10px 0 10px;
        border-width: 17.3px 10px 0 10px;
        border-color: #e95505 transparent transparent transparent
    }

    .service_implement_area h3 {
        width: 100%;
        max-width: 300px;
        height: 0;
        margin: 0 auto 1rem;
        padding-top: 14.6%;
        background: url("../../img/bcharge/service/bcharge_service_m_implement.png") no-repeat top center;
        background-size: contain
    }

    .service_implement_area .case_box h4 {
        font-size: 1.8rem
    }

    .service_implement_area .case_box .theme {
        flex-direction: column
    }

    .service_implement_area .case_box .theme .b_logo {
        width: 100%;
        max-width: 200px;
        height: auto;
        margin: 0 auto 1rem
    }

    .service_implement_area .case_box .theme .b_logo img {
        width: 100%;
        height: auto;
        vertical-align: bottom
    }

    .service_implement_area .case_box .theme .theme_box {
        width: 100%;
        max-width: 768px;
        margin: 0 auto
    }

    .service_implement_area .case_box .theme .theme_box .df {
        flex-direction: column
    }

    .service_implement_area .case_box .theme .theme_box .df .img {
        width: 100%;
        margin: 0 auto 1rem
    }

    .service_implement_area .case_box .theme .theme_box .df .txt {
        width: 100%;
        max-width: 768px
    }

    .service_implement_area .case_box .resolution {
        width: 100%;
        height: auto;
        margin: 0 auto
    }

    .service_implement_area .case_box .resolution .resolution_box .df {
        flex-direction: column
    }

    .service_implement_area .case_box .resolution .resolution_box .df .img {
        width: 100%;
        max-width: 160px;
        height: auto;
        margin: 0 auto 1rem
    }

    .service_implement_area .case_box .resolution .resolution_box .df .txt {
        width: 100%;
        max-width: 768px
    }

    .service_implement_area .case_box .resolution .resolution_box .WM {
        flex-direction: column
    }

    .service_implement_area .case_box .resolution .resolution_box .WM .img {
        margin: 0 auto 1rem
    }
}