@charset "utf-8";

/* よくあるお悩み */
.onayami-flex {
    display: flex;
    align-items: flex-end;
}

.onayami-flex .s-list-checkmark {
    width: 75%;
}

.onayami-flex .s-bnr {
    width: 25%;
    text-align: center;
}

/* 今の時代、必要なこと。 */
.need-head {
    color: #3573b5;
    font-size: 300%;
    text-align: center;
    font-weight: bold;
    font-family: serif;
    line-height: 160%;
    position: relative;
}

.need-text__wrapper {
    display: flex;
    justify-content: center;
}

.need-text {
    width: 63%;
    text-align: center;
    font-weight: bold;
    font-family: serif;
    margin-top: 20px;
    margin-left: auto;
    position: relative;
    z-index: 2;
}

.need-img {
    width: 20%;
    text-align: center;
}

/* メリット */
.merit-head {
    font-size: 120%;
    font-weight: bold;
    background: linear-gradient(90deg, #A977ED 0%, #F2767D 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.merit-top__wrapper {
    margin-top: 20px;
}

.merit-top__wrapper dl {
    display: flex;
    column-gap: 10px;
}

.merit-top__wrapper dl+dl {
    margin-top: 10px;
}

.merit-top__wrapper dt {
    color: #fff;
    text-align: center;
    font-weight: bold;
    background-color: #555555;
    padding: 10px;
    width: 20%;
}

.merit-top__wrapper dd {
    padding: 10px;
}

.merit-bottom__wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.merit-text {
    width: 80%;
}

.merit-img {
    width: 20%;
    text-align: center;
}

/* 経理のレベルは高くなります */
.level-wrapper {
    display: flex;
    align-items: flex-end;
    gap: 20px;
    margin-top: 40px;
}

.level-text {
    width: 55%;
}

.level-img {
    width: 45%;
}

.level-color {
    margin-top: 20px;
    font-weight: bold;
    background: linear-gradient(90deg, #A977ED 0%, #F2767D 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.level-box {
    font-size: 90%;
    background: #eee;
    padding: 10px 20px;
    margin-top: 20px;
    border-radius: 20px;
}

/* 財務改善・成長加速のカギになる */
.key-color {
    font-weight: bold;
    background: linear-gradient(90deg, #A977ED 0%, #F2767D 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.key-img img {
    width: 60%;
}

/* 経理で注意すべき点 */
.attention-img {
    width: 60%;
}

/* 業務範囲 */
.range-wrapper {
    display: flex;
    column-gap: 4%;
}

.range-table {
    width: 48%;
}

.range-table dt {
    color: #fff;
    font-size: 120%;
    text-align: center;
    font-weight: bold;
    padding: 10px;
    background: linear-gradient(90deg, #A977ED 0%, #F2767D 100%);
}

.range-table__list {
    padding: 10px;
    list-style: none;
}

.range-table__list li {
    color: #475A80;
    font-size: 105%;
    font-weight: bold;
    text-align: center;
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

.range-table__list li:last-of-type {
    border-bottom: none;
}

/* 4つのステップ */
.step-box__wrapper {
    display: flex;
    align-items: stretch;
    column-gap: 2px;
    width: 100%;
    margin-top: 40px;
}

.step-box {
    display: flex;
    flex-direction: column;
    width: 23%;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);
    border-radius: 20px;
}

.step-box__img {
    width: 100%;
    height: 14vw;
    max-height: 145px;
    border-radius: 20px 20px 0 0;
}

.step-box__img img {
    max-width: 100%;
    border-radius: 20px 20px 0 0;
    height: 100%;
    object-fit: cover;
}

.step-box__text {
    background: #fff;
    border-radius: 0 0 20px 20px;
    padding: 20px 10px;
    height: 100%;
}

.step-box__head {
    font-size: 100%;
    text-align: center;
    background: linear-gradient(90deg, #A977ED 0%, #F2767D 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 20px;
    line-height: 150%;
}

.step-box__text p {
    font-size: 88%;
    line-height: 150%;
}

.step-triangle {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2.5%;
    height: auto;
}

.step-triangle .triangle {
    height: 0;
    border-style: solid;
    border-top: 17px solid transparent;
    border-bottom: 17px solid transparent;
    border-left: 15px solid #A977ED;
    border-right: 0;
}

/* ご紹介の流れ */
.flow-wrapper {
    display: flex;
    align-items: center;
    column-gap: 2%;
}

.flow-img {
    width: 45%;
}

.flow-table {
    border-collapse: collapse;
    width: 55%;
}

.flow-table thead th {
    background-color: #3573b5;
    border: 1px solid #fff;
    color: #fff;
    padding: 5px;
}

.flow-table tbody th,
.flow-table tbody td {
    padding: 2px;
    border: solid 1px #656565;
    background-color: #fff;
    line-height: 150%;
}

.flow-table tbody th {
    width: 30%;
    font-size: 80%;
    position: relative;
}

.flow-table tbody tr td {
    font-size: 80%;
    width: 70%;
    text-align: center;
}

/* ご紹介事例 */
.case-head {
    color: #fff;
    font-weight: bold;
    text-align: center;
    background: #0350a3;
    padding: 10px;
}

.case-img__wrapper {
    display: flex;
    align-items: center;
    column-gap: 10px;
    max-width: 500px;
    margin-top: 20px;
    padding: 10px;
}

.case-text__wrpper {
    text-align: center;
    line-height: 150%;
}

.case-name .en {
    font-size: 80%;
    font-weight: bold;
}

.case-name .jp {
    font-size: 130%;
    font-weight: bold;
}

.case-company {
    margin-top: 10px;
}

.case-img {
    width: 40%;
    border-radius: 100vmax;
}

.case-img img {
    border-radius: 100vmax;
}

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

    /* お悩み */
    .onayami-flex {
        flex-direction: column;
        align-items: center;
    }

    .onayami-flex .s-list-checkmark {
        width: 100%;
        padding: 10px;
    }

    .onayami-flex .s-bnr {
        width: 80%;
        max-width: 300px;
    }

    /* 今の時代に必要なこと */
    .need-head {
        font-size: 160%;
        text-align: center;
        font-weight: bold;
        font-family: serif;
        line-height: 160%;
        position: relative;
    }

    .need-text__wrapper {
        flex-direction: column;
        align-items: center;
    }

    .need-text {
        width: 100%;
        margin-left: unset;
    }

    .need-img {
        width: 40%;
        text-align: center;
    }

    /* メリット */
    .merit-head {
        font-size: 110%;
    }

    .merit-top__wrapper {
        margin-top: 20px;
    }

    .merit-top__wrapper dl {
        flex-direction: column;
        row-gap: 10px;
    }

    .merit-top__wrapper dl+dl {
        margin-top: 25px;
    }

    .merit-top__wrapper dt {
        width: 100%;
    }

    .merit-top__wrapper dd {
        padding: 0;
    }

    .merit-bottom__wrapper {
        flex-direction: column;
        align-items: center;
        row-gap: 10px;
    }

    .merit-text {
        width: 100%;
    }

    .merit-img {
        width: 45%;
        text-align: center;
    }

    /* 経理のレベルは高くなります */
    .level-wrapper {
        align-items: flex-end;
        flex-direction: column;
    }

    .level-text {
        width: 100%;
    }

    .level-img {
        width: 100%;
        text-align: center;
    }

    /* 財務改善・成長加速のカギになる */
    .key-img img {
        width: 100%;
    }

    /* 経理で注意すべき点 */
    .attention-img {
        width: 80%;
    }

    /* 業務範囲 */
    .range-wrapper {
        flex-direction: column;
        row-gap: 20px;
    }

    .range-table {
        width: 90%;
        margin-inline: auto;
    }

    .range-table dt {
        font-size: 100%;
    }

    .range-table__list {
        padding: 5px;
    }

    /* 4つのステップ */
    .step-box__wrapper {
        flex-direction: column;
        align-items: center;
        row-gap: 0px;
    }

    .step-box {
        width: 80%;
    }

    .step-box__img {
        height: 48vw;
        max-height: unset;
    }

    .step-box__text {
        padding: 15px 10px;
    }

    .step-box__head {
        margin-top: 0;
        margin-bottom: 10px;
    }

    .step-triangle {
        width: 2.5%;
        height: 100%;
        rotate: 90deg;
    }

    /* ご紹介の流れ */
    .flow-wrapper {
        flex-direction: column;
        row-gap: 20px;
    }

    .flow-img {
        width: 100%;
    }

    .flow-table {
        border-collapse: collapse;
        width: 100%;
    }

    .flow-table tbody th {
        width: 40%;
    }

    .flow-table tbody tr td {
        width: 60%;
    }

    /* ご紹介事例 */
    .case-img__wrapper {
        justify-content: center;
        max-width: 100%;
    }
}