/* ===========================
bizxim-hanbai.css
--------------------------- */

h5:before {
    content: none !important; 
}

.layoutItem.col2 > *, .layoutItem.col3 > *, .layoutItem.col4 > *, .layoutItem.col5 > *, .layoutItem.col6 > *, .layoutItem.col7 > *, .layoutItem.col8 > * {
    margin-right: 0 !important;;
    margin-bottom: 0 !important;;
}


.text-box-02{
    background:#f2f2f2;
    padding:30px;
}

.text-box-03{
    background:#e0e7f3;
    padding:30px;
}

.text-box-04{
    background:#ffffff;
    padding:30px;
}

.text-box-02 dl dd{
    padding-left: 13px;
    position: relative;
}

.text-box-02 dl dd::before{
    content: "";
    display: block;
    height: 5px;
    width: 5px;
    border-radius: 50%;
    position: absolute;
    top: 1.2rem;
    left: 0;
}

.text-box-02 dl dd::before{
    background:#333333;
}

.text-box-03 ul li{
    padding-left: 15px;
    position: relative;
}

.text-box-03 ul li::before{
    content: "";
    display: block;
    height: 10px;
    width: 10px;
    position: absolute;
    top: 1rem;
    left: 0;
}

.text-box-03 ul li::before{
    background:#6685c1;
}

.text-box-03 ul li ul{
    display: flex;
}

.text-box-03 ul li ul li{
    padding-left: 15px;
    position: relative;
    margin: 0 20px 0 0;
}

.text-box-03 ul li ul li::before{
    content: "";
    display: block;
    height: 5px;
    width: 5px;
    border-radius: 50%;
    position: absolute;
    top: 1.2rem;
    left: 0;
}

.text-box-03 ul li ul li::before{
    background:#333333;
}

/* ===========================
cfp
--------------------------- */

.fc-03 {
    color: #DF4646;
}

.h-style {
    font-size: 4rem;
    text-align: center;
}

.h-style small {
    font-size: 70%;
}

.align-c {
    text-align: center;
}

.kai-red {
    color: #BC4228;
    letter-spacing: .2rem;
    margin-left: 10px;
}

@media screen and (max-width: 800px) {
    .hdg-03-02 {
        font-size: 2rem;
        line-height: 1.6;
    }

    .hdg-04-bg {
        margin-bottom: 20px;
    }
    .h-style {
        font-size: 2.4rem;
    }

    .h-style img {
        max-width: 150px;
    }

}

/* ---------------------------
area-main-visual
--------------------------- */

#area-main-visual {
    position: relative;
}

.main-visual-txt {
    width: 990px;
    margin: 0 auto;
    color: #FFFFFF;
    padding: 60px 0;
    position: relative;
}

.main-visual-txt-inner {
    width: 60%;
}

.main-visual-txt h1 {
    font-size: 5rem;
    line-height: 1.5;
    font-weight: bold;
}

.main-visual-txt h2 {
    margin-top: 10px;
    font-size: 2.4rem;
    font-weight: bold;
}

.main-visual-inner::before,
.main-visual-inner::after {
    content: "";
    display: block;
    height: 100%;
    position: absolute;
    top: 0;
    width: 100%;
}

.main-visual-inner::before {
    background: url("/Portals/0/lp/images/bizxim_hanbai/header_02.png") no-repeat left;
    background-size: cover;
    z-index: -1;
    background-color: #FFFFFF;
}

@media screen and (max-width: 800px) {
    .main-visual-txt {
        padding: 30px 0;
    }

    .main-visual-txt-inner {
        width: 100%;
    }

    .main-visual-txt h1 {
        font-size: 2.4rem;
    }

    .main-visual-txt h2 {
        font-size: 1.3rem;
    }

    .main-visual-txt h3 {
        font-size: 1.3rem;
        line-height: 1.75;
    }
}


/* ---------------------------
area-probleml
--------------------------- */

#area-problem {
    background: url("/Portals/0/lp/images/bizxim_hanbai/bizxim01.png") top left no-repeat;
}

.area-problem-inner {
    padding: 60px 0;
}

.area-problem-list {
    margin: 60px auto 0 auto;
}

.area-problem-list li {
    position: relative;
    margin: 20px 0;
    padding: 30px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 3em;
    font-size: 2.2rem;
    font-weight: bold;
}

.area-problem-list>li span.list {
    display: block;
    padding-left: 40px;
}

.area-problem-list>li span.list::before {
    content: "";
    display: block;
    height: 25px;
    width: 25px;
    position: absolute;
    top: 38%;
    left: 4%;
}

.area-problem-list>li span.list::before {
    background: url("/Portals/0/lp/images/bizxim_hanbai/check.png") no-repeat;
    background-size: 100%;
}

.flow {
    text-align: center;
}


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

    #area-problem {
        background-size: cover;
    }

    .area-problem-inner {
        padding: 50px 0;
    }

    .area-problem-txt {
        width: 100%;
    }

    .area-problem-list {
        margin: 40px auto 0 auto;
        width: 100%;
    }

    .area-problem-list li {
        margin: 15px 0;
        padding: 25px 10px;
        font-size: 1.8rem;
        line-height: 1.5;
    }

    .area-problem-list>li span.list {
        padding-left: 40px;
    }

    .area-problem-list>li span.list::before {
        top: 36%;
        left: 3%;
    }
}

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

    .area-problem-list>li span.list::before {
        top: 35%;
        left: 5%;
    }
}

/* ---------------------------
area-cause
--------------------------- */

#area-cause{
    background: #e0e7f3;
    padding: 60px 0;
}

#area-cause .hdg-03-02 span{
    display:block;
    font-size: 2.8rem;
}

.area-cause-bg{
    background: #FFFFFF;
    padding: 40px;
    margin-top: 40px;
}

.area-cause-bg ul{
    margin-top: 30px;
}

.area-cause-bg ul.col3 li {
    width: calc((100% - 60px) / 3);
    border: 1px solid #E0E0E0;
}

.area-cause-bg ul li .txt{
    padding: 20px;
}

.cause-box{
    display: flex;
}

.cause-box figure{
    width: 160px;
    margin-right: 30px;
} 

.cause-box ul li{
    position: relative;
    font-weight: bold;
    padding-left: 15px;
    word-break: break-all;
}

.cause-box ul li::before{
    content: "";
    display: block;
    height: 5px;
    width: 5px;
    border-radius: 50%;
    position: absolute;
    top: 1.3rem;
    left: 0;
    background: #233856;
}

.box-flex{
    display: flex;
}

.box-flex .box-01,.box-flex .box-02{
    padding: 20px;
}

.box-flex .box-01{
    background: #f2f2f2;
    position: relative;
}

.box-flex .box-01::after {
    width: 0;
    height: 0;
    position: absolute;
    top: 40%;
    right: -14%;
    content: '';
    color: #f2f2f2;
    border-color: transparent;
    border-width: 2em;
    border-left-color: currentColor;
    }

.box-flex .box-01 .ttl,.box-flex .box-02 .ttl{
    display: inline-block;
    border-radius: 10px;
    padding: 5px;
    color: #FFF;
    margin: 0;
    font-weight: bold;
}

.box-flex .box-01 .ttl{
    background: #595959;
}

.box-flex .box-02 .ttl{
    background: #d66900;
}

.box-flex .box-02{
    background: #fff8dd;
}

.box-flex .lyt-txt-img{
    align-items: center;
}

.box-flex .img-content{
    margin-right: 20px;
    width: 90%;
}



@media screen and (max-width: 800px) {
#area-cause{
    padding: 50px 0;
}

.area-cause-bg{
    padding: 20px;
    margin-top: 20px;
}

#area-cause .hdg-04{
    margin-top: 0;
}

.area-cause-bg p{
    margin-top: 0px;
}

#area-cause .hdg-03-02 span{
    font-size: 1.8rem;
}

.area-cause-bg ul.col3 li {
    width: 100%;
    margin:0 auto 20px auto;
    }
    
.area-cause-bg ul.col3 li img {
    width: 100%;
    }
    
.cause-box{
    display:inherit;
}

.cause-box figure{
    margin: 0 auto;
}
.box-flex{
    display: block;
}


.box-flex .box-01::after {
    top: 100%;
    right: 40%;
    border-top-color: currentColor;
    border-left-color: transparent;
    }

.box-flex .lyt-txt-img{
    align-items: center;
}

.box-flex .img-content{
    margin-right: 0;
    width: 100%;
}

}


/* ---------------------------
area-solution
--------------------------- */

#area-solution {
    margin-top: 20px;
}

.area-solution-bg {
    background: url("/Portals/0/lp/images/cfp/blue.png") repeat;
    background-color: #242E59;
    padding: 50px 0 60px 0;
}

.area-solution-about {
    background: url("/Portals/0/lp/images/bizxim_hanbai/solution-img-bg-02.png") no-repeat;
    background-size: cover;
    background-color: #FFFFFF;
    padding: 60px;
}

.area-solution-about-inner-bg {
    background: #FFFFFF;
    padding: 40px;
}

.solution-detail {
    display: flex;
}

.solution-detail .solution-txt {
    width: 70%;
    margin-right: 40px;
}

.solution-detail .solution-img {
    width: 30%;
}

.solution-contact {
    display: flex;
}

.solution-contact p {
    width: 60%;
    margin-right: 30px;
}

.solution-contact .inquiry-btn {
    width: 40%;
    text-align: center;
}

.solution-contact .inquiry-btn a {
    width: 100%;
    background: #E2E1E1;
    padding: 15px 25px;
    display: inline-block;
    color: #333333;
}

.solution-contact .inquiry-btn span {
    font-weight: bold;
    position: relative;
    padding-left: 50px;
}

.solution-contact .inquiry-btn span::before {
    content: "";
    display: block;
    background: url("/Portals/0/lp/images/im-inhouse/solution-img-bg-03.png") no-repeat left;
    background-size: contain;
    position: absolute;
    top: -1rem;
    left: 0;
    width: 41px;
    height: 37px;
}

@media screen and (max-width: 1200px) {
    .solution-detail .solution-txt {
        width: 60%;
    }

    .solution-detail .solution-img {
        width: 40%;
    }

    .solution-contact p {
        width: 50%;
    }

    .solution-contact .inquiry-btn {
        width: 50%;
    }
}

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

    .solution-contact,
    .solution-detail {
        display: inherit;
    }

    .solution-detail .solution-txt,
    .solution-detail .solution-img,
    .solution-contact p,
    .solution-contact .inquiry-btn {
        width: 100%;
    }

    .solution-detail .solution-txt p,
    .solution-contact p {
        margin-bottom: 30px;
    }
}

@media screen and (max-width: 800px) {
    .area-solution-bg {
        padding: 40px 0 30px 0;
    }

    .area-solution-about-inner-bg {
        padding: 20px;
    }

    .area-solution-about {
        padding: 30px 0;
    }

    .text-box {
        padding: 20px;
    }

    .solution-detail .solution-txt p,
    .solution-contact p {
        margin-bottom: 20px;
    }

    .solution-contact .inquiry-btn a {
        padding: 15px 10px;
    }

    .solution-contact .inquiry-btn span {
        padding-left: 35px;
    }

    .solution-contact .inquiry-btn span::before {
        width: 30px;
    }
}

/* ---------------------------
area-about
--------------------------- */

#area-about {
    background-color: #E0E7F3;
    padding: 60px 0;
}

.op-font {
    font-size: 19px;
    font-weight: bold;
    padding: 0.5em 0;
    margin-top: 0;
    margin-bottom: .5em;
    border-bottom: #999 solid 1px;
    line-height: 1.5;
}

.op-txt {
    margin-top: 0;
}
@media screen and (max-width: 800px) {
    .op-font {
        margin-bottom: 0.5em;
        padding: 0.5em 1.5em 0 0;
    }

    .op-txt.none {
        border-bottom: none;
    }

    .layoutItem.col3 .op-txt:nth-of-type(3n) {
        border-bottom: none;
    }
}

.area-about-inner-bg {
    background: #FFFFFF;
    padding: 40px;
    margin-top: 60px;
}

.p-adjust {
    padding: 40px 120px;
}

.scroll-guide {
    display: none;
    position: relative;
    padding-left: 30px;
    margin: 0 0 10px 0;
}

.scroll-guide::before {
    content: "";
    display: block;
    background: url(/Portals/0/lp/images/im-inhouse/ico-scroll-guide.png) no-repeat left;
    background-size: contain;
    position: absolute;
    top: 0;
    left: 0;
    width: 28px;
    height: 26px;
}

.tbl-area-about {
    border-spacing: 5px;
    border: none;
}

.tbl-area-about th,
.tbl-area-about td {
    border: none;
    padding: 15px 20px;
}

.tbl-area-about th.bg-none {
    background: none;
}

.tbl-area-about th.bg-02 {
    background: #E2E1E1;
    color: #333333;
}

.tbl-area-about th.bg-03 {
    background: #DF4646;
}

.tbl-area-about .step1 th,
.tbl-area-about .step2 th,
.tbl-area-about .step3 th,
.tbl-area-about .step4 th {
    text-align: center;
    vertical-align: middle;
}

.tbl-area-about .step1 th {
    background: #9CBADB;
}

.tbl-area-about .step1 td {
    border: 2px solid #9CBADB;
}

.tbl-area-about .step1 td dl dt {
    color: #9CBADB;
}

.tbl-area-about .step2 th {
    background: #84AEDC;
}

.tbl-area-about .step2 td {
    border: 2px solid #84AEDC;
}

.tbl-area-about .step2 td dl dt {
    color: #84AEDC;
}

.tbl-area-about .step3 th {
    background: #5591C7;
}

.tbl-area-about .step3 td {
    border: 2px solid #5591C7;
}

.tbl-area-about .step3 td dl dt {
    color: #5591C7;
}

.tbl-area-about .step4 th {
    background: #4679A7;
}

.tbl-area-about .step4 td {
    border: 2px solid #4679A7;
}

.tbl-area-about .step4 td dl dt {
    color: #4679A7;
}

.tbl-area-about td.bc-01 {
    border: 2px solid #DF4646;
}

.tbl-area-about .step5 th {
    background: #E3E8F1;
    color: #333333;
    text-align: center;
    font-weight: normal;
}

.tbl-area-about td dl dd {
    padding-left: 13px;
    position: relative;
}

.tbl-area-about td dl dd::before {
    content: "";
    display: block;
    height: 5px;
    width: 5px;
    border-radius: 50%;
    position: absolute;
    top: 1.2rem;
    left: 0;
}

.tbl-area-about .step1 td dl dd::before {
    background: #9CBADB;
}

.tbl-area-about .step2 td dl dd::before {
    background: #84AEDC;
}

.tbl-area-about .step3 td dl dd::before {
    background: #5591C7;
}

.tbl-area-about .step4 td dl dd::before {
    background: #4679A7;
}

.menu-box {
    background: #FFFFFF;
    padding: 40px;
    margin-top: 60px;
}

.menu-box .menu-box-ico {
    width: 75px;
    margin: 0 auto;
}

.menu-box dl {
    margin-top: 40px;
}

.menu-box dl dt {
    font-size: 1.8rem;
    color: #4679A7;
    position: relative;
    padding-left: 15px;
    margin-top: 20px;
}

.menu-box dl dt::before {
    content: "";
    display: block;
    height: 5px;
    width: 5px;
    border-radius: 50%;
    position: absolute;
    top: 1.3rem;
    left: 0;
    background: #4679A7;
}

.menu-box dl dd {
    margin-top: 10px;
}

@media screen and (max-width: 767px) {
    .scroll-guide {
        display: block;
    }

    .table-scroll table {
        min-width: 767px;
    }

    .table-scroll {
        white-space: normal;
    }
}

@media screen and (max-width: 800px) {
    #area-about {
        padding: 50px 0;
    }

    .area-about-inner-bg {
        margin-top: 40px;
        padding: 20px;
    }

    .p-adjust {
        padding: 20px;
    }

    .menu-box {
        padding: 20px;
        margin-top: 20px;
    }

    .menu-box dl {
        margin-top: 20px;
    }

    .area-about-inner .hdg-img img {
        width: 100%;
        display: block;
        margin-bottom: 10px;
    }
}

/* ---------------------------
area-industry
--------------------------- */

#area-industry {
    background: url(/Portals/0/lp/images/bizxim_hanbai/area-industry-img-bg-01.png) repeat;
    padding: 60px;
}

#area-industry .col4 .text-box{
    padding: 0;
    background: none;
    border: 0;
    margin: 0;
}

@media screen and (max-width: 800px) {
    #area-industry {
        padding: 30px 10px;
    }

    #area-industry .col4 .text-box{
        margin-top: 30px;
    }
}

/* ---------------------------
area-function
--------------------------- */
#area-function {
    padding: 60px;
}

@media screen and (max-width: 800px) {
    #area-function {
        padding: 50px 0;
    }
    
}

/* ---------------------------
area-template
--------------------------- */

#area-template{
    padding: 60px;
}

#area-template .text-box-03 .op-font {
    padding:0 0 0.5em 0;
    border-bottom: #d1daec solid 1px;
}

#area-template .w-80 {
    width:calc((100% - 20px) / 3*2);
}

@media screen and (max-width: 800px) {
    #area-template{
        padding: 50px 0;
    }

    #area-template .w-80 {
        width:100%;
    }
    
}
    



/* ---------------------------
Layout
--------------------------- */

.main-visual-txt,
.area-problem-inner,
#area-flow,
.area-solution-bg-inner,
.area-industry-inner,
.area-function-inner,
.area-template-inner,
.area-solution-about-inner,
.area-about-inner,
.area-cause-inner,
.area-features-inner {
    width: 100%;
    max-width: 990px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
}

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

    .main-visual-txt,
    .area-problem-inner,
    #area-flow,
    .area-solution-bg-inner,
    .area-industry-inner,
    .area-function-inner,
    .area-solution-about-inner,
    .area-about-inner,
    .area-cause-inner,
    .area-features-inner {
        padding-left: 10px;
        padding-right: 10px;
    }
}

.area-features {
    padding: 60px 0;
}

.area-features-inner h5 {
    font-weight: bold;
    font-size: 2.4rem;
    text-align: center;
}

.area-cause-img {
    background-color: #E0E7F3;
    padding: 16px;
    margin-bottom: 20px;
}

.indent {
    text-indent: -1em;
    padding-left: 1em;
}

.area-features-img {
    background-color: #FFF;
    padding: 16px;
}

.area-cause-inr-flex {
    display: flex;
    list-style-type: none;
    flex-direction: row;
    width: 100%;
    margin: 0;
    padding: 0;
    justify-content: space-between;
    flex-wrap: wrap;
}

.area-cause-inr-flex > * {
    width: calc((100% - 40px) / 2);
}

.h4style {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 8px;
    border-left: none;
}

.col2-txt p {
    font-size: 1.6rem;
    line-height: 1.5;
    margin-top: 0;
}

.col2-txt ul {
    margin-left: 16px;
    margin-top: 10px;
    line-height: 1.5;
}

.col2-txt ul li {
    list-style-type: disc;
    padding-left: 10px;
}

.bg-white-img {
    background-color: #FFF;
    padding: 10px;
}

.reason-box {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 20px;
}

.reason-box-item {
    width: calc(50% - 10px);
    background: #E0E7F3;
    padding: 16px;
    position: relative;
}

.reason-box-item h3 {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 8px;
    padding-left: 35px;
    position: relative;
}

.reason-box-item h3::before {
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    background: url("/Portals/0/lp/images/im-inhouse/problem-img-bg-02.png") no-repeat;
    background-size: contain;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.reason-box-item p {
    font-size: 1.6rem;
    line-height: 1.5;
    margin-top: 0;
}

@media screen and (max-width: 800px) {
    .area-cause-inr-flex > * {
        width: 100%;
        margin-top: 16px;
    }

    .area-features-inner h5 {
        font-size: 2rem;
    }
    .reason-box {
        gap: 15px;
    }

    .reason-box-item {
        width: 100%;
        padding: 20px;
    }

    .reason-box-item h3 {
        font-size: 1.8rem;
        padding-left: 30px;
    }

    .reason-box-item h3::before {
        width: 20px;
        height: 20px;
    }

    .reason-box-item p {
        font-size: 1.4rem;
    }
}

.graph-section {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    margin: 40px auto 0;
}

.graph-box {
    width: calc(33.33% - 20px);
}

.graph-title {
    text-align: center;
    margin-bottom: 20px;
    border-bottom: 1px solid #3E4872;
    min-height: 104px;
}

.graph-title h3 {
    color: #3E4872;
    font-size: 2.4rem;
    font-weight: bold;
    margin-bottom: 10px;
}

.graph-title p {
    font-size: 1.6rem;
    color: #3E4872;
    margin-top: 0;
    line-height: 1.5;
}

.graph-content {
    margin: 20px 0;
}

.graph-content img {
    width: 100%;
    height: auto;
    margin: 10px 0;
}

.graph-content span {
    font-size: .9rem;
    text-align: center;
    display: block;
    line-height: 1.5;
}

.graph-description {
    margin-top: 20px;
}

.graph-description ul {
    list-style: none;
    padding: 0;
}

.graph-description li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 8px;
    font-size: 1.4rem;
    line-height: 1.6;
}

.graph-description li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #333;
}

@media screen and (max-width: 800px) {
    .graph-section {
        flex-direction: column;
        gap: 20px;
    }

    .graph-box {
        width: 100%;
    }
    .graph-title {
        border-bottom: none;
        min-height: initial;
        margin-bottom: 0;
    }

    .graph-title h3 {
        font-size: 2rem;
        line-height: 1.4;
    }

    .graph-title p {
        font-size: 1.4rem;
    }

    .graph-content {
        border-bottom: 1px solid #3E4872;
        padding-bottom: 20px;
        margin-top: 10px;
    }
    
    .graph-content.none {
        border-bottom: none;
    }
    
    .graph-content span {
        font-size: 1.2rem;
    }

    .graph-content span.nega-m {
        margin-top: -25px;
    }
}