h1,
h2,
h3,
h4,
p {
    color: #3f3f3f;
}


section.body .title-body .box-center .bg-active{
    position: absolute;
    background-color: #656565;
    height: 3.2vw;
    width: 12.7vw;
    border-radius: .5vw;
    bottom: -.8vw;
    left: -1.3vw;
}

.body-plan .body-header {
    background-image: url("/libro/images/image-main-plan.png");
    margin: auto;
    max-width: 1400px;
    height: 880px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    z-index: 1;
}


.bg-out-header {
    position: relative;
    background-color: #F6F7F7;
}


.bg-black-end {
    position: absolute;
    background-color: #3f3f3f;
    height: 389px;
    width: 100%;
    bottom: 0;
}

.title-main {
    position: absolute;
    bottom: 258px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.title-main .title {
    width: 100%;
    display: flex;
    justify-content: center;
}

.title-main .title h2 {
    font-size: 30px;
    color: white;
    text-align: center;
    letter-spacing: 3px;
    letter-spacing: 6px;
}

.title-main .lorem p {
    width: 100%;
    display: flex;
    justify-content: center;
    color: white;
    font-size: 12px;
    letter-spacing: 1.2px;
}

.body-plan .title-red-blue {
    width: 100%;
    display: flex;
}

.body-plan .title-red-blue .blue-left {
    width: 50%;
    background-color: #5b779b;
    height: 100px;
    display: flex;
    justify-content: end;
}

.body-plan .title-red-blue .red-right {
    width: 50%;
    background-color: #af6262;
    height: 100px;
    display: flex;
    justify-content: start;
}

.body-plan .title-red-blue .box-in-left {
    width: 475px;
    height: 100px;
    display: flex;
    align-items: center;
}

.body-plan .title-red-blue .box-in-left .box-logo {
    display: flex;
}

.body-plan .title-red-blue .box-in-left .box-logo h2 {
    font-size: 29px;
    color: white;
    margin-left: 13px;
}

.body-plan .title-red-blue .box-in-left .box-logo img {
    width: 10%;
    margin-left: 75px;
}


.body-plan .title-red-blue .box-in-right .box-logo {
    display: flex;
}

.body-plan .title-red-blue .box-in-right .box-logo h2 {
    font-size: 29px;
    color: white;
    margin-left: 13px;
}

.body-plan .title-red-blue .box-in-right .box-logo img {
    width: 10%;
    margin-left: 100px;
}


.body-plan .title-red-blue .box-in-right {
    width: 475px;
    height: 100px;
    display: flex;
    align-items: center;
}

.body-section-plan {
    max-width: 950px;
    margin: auto;
}

.body-section-plan .all-box-number {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;

}

.body-section-plan .all-box-number .all-box {
    display: flex;
    flex-wrap: wrap;
    width: 46.5%;
}

.body-section-plan .all-box-number .all-box .box {
    display: flex;
    align-items: center;
    width: 100%;
    height: 90px;
    border-radius: 20px;
    padding: 20px 30px;
    padding-right: 0;
    margin-bottom: 20px;
}

.body-section-plan .all-box-number .all-box .box.box-blue {
    background-color: #5b779b;
}

.body-section-plan .all-box-number .all-box .box.box-red {
    background-color: #af6262;
}

.body-section-plan .all-box-number .all-box .box .title {
    width: 70%;
}


.body-section-plan .all-box-number .all-box .box .number {
    width: 30%;
}


.body-section-plan .all-box-number .all-box .box .title h4 {
    font-size: 18px;
    letter-spacing: 1px;
    color: white;
}

.body-section-plan .all-box-number .all-box .box .number h4 {
    font-size: 75px;
    display: flex;
    justify-content: end;
    margin-right: 17px;
    letter-spacing: -4px;
    padding-bottom: 10px;
}


.body-section-plan .all-box-number .all-box .box.box-red .number h4 {
    color: #bf8181;
}

.body-section-plan .all-box-number .all-box .box.box-blue .number h4 {
    color: #7c92af;
}


.all-box-text {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    margin-bottom: 40px;
}

.all-box-text .all-box {
    width: 46.5%;
}

.all-box-text .all-box p {
    font-size: 16px;
    line-height: 31px;
}

.all-box-text .box-blue p {
    color: #5b779b;
}

.all-box-text .box-red p {
    color: #af6262;
}

.all-box-logo {
    margin: 20px 0;
    display: flex;
    justify-content: space-between;
}


.all-box-logo .box-left {
    display: flex;
    flex-wrap: wrap;
    border: 4px solid #5b779b;
    width: 46.5%;
    padding: 16px;
    padding-left: 25px;
    padding-right: 25px;
    border-radius: 20px;
    flex-direction: column;
    padding-bottom: 0px;
    align-items: center;
}


.all-box-logo .box-left .title {
    padding-bottom: 12px;
    width: 98%;
    background-image: radial-gradient(circle, #5b779b 20%, transparent 10%);
    background-position: bottom;
    background-size: 5px 16px;
    background-repeat: repeat-x;
    display: flex;
    justify-content: center;
    height: 50px;
}

.all-box-logo .box-left .title h5 {
    font-size: 18px;
    letter-spacing: 3px;
    color: #5b779b;
    font-weight: unset;
}

.all-box-logo .box-right {
    display: flex;
    border: 4px solid #af6262;
    width: 46.5%;
    padding: 16px;
    padding-left: 25px;
    padding-right: 25px;
    border-radius: 20px;
    padding-bottom: 5px;
}

.all-box-logo .box-left .box-logo .box {
    display: flex;
    justify-content: center;
    margin: 20px 0;
    margin-bottom: 48px;
}

.all-box-logo .box-left .box-logo .box .logo {
    width: 30%;
    display: flex;
}

.all-box-logo .box-left .box-logo .box .title-logo {
    width: 65%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
}

.all-box-logo .box-left .box-logo .box .title-logo h3 {
    font-size: 24px;
    color: #3f3f3f;
    line-height: 23px;
    margin-bottom: 5px;
}

.all-box-logo .box-left .box-logo .box .title-logo p {
    font-size: 12px;
    color: #5b779b;
}

.all-box-logo .box-left .box-logo .box .logo img {
    width: 57%;
    margin: auto;
}

.all-box-logo .box-right .box-logo {
    width: 100%;
}

.all-box-logo .box-right .box-logo .box {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 27px;
}

.all-box-logo .box-right .box-logo .box .logo {
    width: 100%;
    display: flex;
}

.all-box-logo .box-right .box-logo .box .title-logo {
    width: 100%;
    padding-bottom: 5px;
    display: flex;
    justify-content: center;
}

.all-box-logo .box-right .box-logo .box .title-logo h3 {
    font-size: 18px;
    letter-spacing: 3px;
    color: #af6262;
}

.all-box-logo .box-right .box-logo .box .logo img {
    width: 68%;
    margin-left: 62px;
}

.body-plan .title-red-blue-custom {
    margin-top: 53px;
}

.body-plan .title-red-blue-custom .blue-left {
    width: 50%;
    background-color: #5b779b;
    height: 190px;
    display: flex;
    justify-content: end;
}


.body-plan .title-red-blue-custom .red-right {
    width: 50%;
    background-color: #af6262;
    height: 190px;
    display: flex;
    justify-content: start;
}

.body-plan .title-red-blue-custom .box-in-left {
    width: 475px;
    height: 190px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    position: relative;

}

.body-plan .title-red-blue-custom .image-square {
    width: 100%;
    display: flex;
    justify-content: center;
    position: absolute;
    top: -30px;
}

.body-plan .title-red-blue-custom .image-square img {
    width: 50px;
}


.body-plan .title-red-blue-custom .box-in-right {
    width: 475px;
    height: 190px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;

}

.btn-white {
    background-color: white;
    display: flex;
    align-items: center;
    padding: 20px 30px;
    border-radius: 40px;
    width: 360px;
}


.btn-white:hover {
    opacity: .8;
}

.btn-white .arrow {
    width: 10px;
    height: 10px;
    display: flex;
    align-items: center;
}

.btn-white .arrow img {
    width: 100%;
}

.color-blue {
    color: #5b779b !important;
}

.color-red {
    color: #af6262 !important;
}

.btn-white .title p {
    width: 100%;
}

.btn-white .title p {
    font-size: 18px;
    letter-spacing: 2px;
    margin-left: 30px;
}

.bg-body-pc-table-custom {
    padding-top: 50px;
}

.all-box-main {
    position: absolute;
    bottom: 25px;
    max-width: 950px;
    width: 100%;
    display: flex;
    justify-content: center;
    row-gap: 20px;
    column-gap: 40px;
}

.body-header .box-double-main {
    display: flex;
    width: 100%;
    justify-content: center;
}

.body-header .box-double-main .box {
    display: flex;
    background-color: white;
    width: 48%;
    border-radius: 30px;
    align-items: center;
    padding: 28px;
    border: 5px solid #4b4b4b;
    box-shadow: inset -4px -4px 5px 0px #bcbcbc;
}

.body-header .box-double-main .box:hover {
    opacity: .8;
}


.body-header .box-double-main .box .box-logo {
    display: flex;
    flex-direction: column;
    padding: 10px;
    border-radius: 20px;
    width: 130px;
    height: 130px;
}


.body-header .box-double-main .box .box-logo img {
    width: 63%;
    margin: auto;
}

.body-header .box-double-main .box:last-child .box-logo img {
    width: 75%;
}

.body-header .box-double-main .box .box-title {
    display: flex;
    width: 65%;
    flex-wrap: wrap;
    margin-left: 30px;
}

.body-header .box-double-main .box .box-title h3 {
    font-size: 24px;
    line-height: 25px;
    margin-bottom: 15px;
}

.body-header .box-double-main .box .box-title p {
    font-size: 15px;
}


@media (max-width: 1399px) {
    section.body .title-body .box-center .bg-active {
        position: absolute;
        background-color: #656565;
        height: 47px;
        width: 175px;
        border-radius: .8vw;
        bottom: -11px;
        left: -20px;
    }
}

@media (max-width: 670px) {
    .body-plan .body-header {
        background-image: url(/libro/images/image-main-plan-sp.png);
        height: 165vw;
        width: 100%;
    }

    .title-main {
        bottom: 82vw;
    }

    .title-main .title h2 {
        font-size: 4.7vw;
        letter-spacing: .5vw;
        margin-bottom: 2vw;
    }

    .title-main .lorem p {
        font-size: 2.4vw;
        letter-spacing: .5vw;
    }

    .all-box-main {
        bottom: 5vw;
        column-gap: 4vw;
    }

    .body-header .box-double-main .box {
        width: 42vw;
        border-radius: 3vw;
        padding: 3vw;
        flex-wrap: wrap;
    }

    .body-header .box-double-main .box .box-title {
        width: 100%;
        margin-left: 0;
        justify-content: center;
    }

    .body-header .box-double-main .box .box-logo {
        display: flex;
        flex-direction: column;
        padding: 2vw;
        border-radius: 2vw;
        width: 36vw;
        height: 36vw;
        box-shadow: 4px 4px 2px 2px #d7d6d6;
    }

    .body-header .box-double-main .box .box-logo img {
        width: 56%;
    }

    .body-header .box-double-main .box:last-child .box-logo img {
        width: 63%;
    }

    .body-header .box-double-main .box .box-title h3 {
        font-size: 4vw;
        line-height: 5vw;
        margin-bottom: 2.5vw;
        margin-top: 4vw;
        text-align: center;
    }

    .body-header .box-double-main .box .box-title p {
        font-size: 2.7vw;
        letter-spacing: .1vw;
        margin-bottom: 3vw;
        padding-left: 1vw;
    }

    /* 
    .body-plan .title-red-blue .box-in-right {
        width: 475px;
        height: 100px;
        display: flex;
        align-items: center;
    } */

    .body-plan .title-red-blue .box-in-left .box-logo img {
        width: 10%;
        margin-left: 75px;
    }

    .body-plan .title-red-blue .box-logo h2 {
        color: white;
        font-size: 4vw !important;
    }

    .body-plan .title-red-blue .red-right {
        height: 10vw;
    }

    .body-plan .title-red-blue .red-right {
        height: 19vw;
    }

    .body-plan .title-red-blue .blue-left {
        height: 19vw;
    }

    .body-plan .title-red-blue .box-in-right {
        width: 100%;
        height: 19vw;
        justify-content: center;
    }

    .body-plan .title-red-blue .box-in-left {
        width: 100%;
        height: 19vw;
        justify-content: center;

    }

    .body-section-plan .all-box-number {
        margin-top: 4vw;
        justify-content: center;
        column-gap: 3vw;
    }

    .body-section-plan .all-box-number .all-box {
        width: 42.5%;
    }

    .body-section-plan .all-box-number .all-box .box {
        height: 24vw;
        border-radius: 3vw;
        padding: 5vw;
        padding-right: 0;
        margin-bottom: 3vw;
        position: relative;

    }

    .body-section-plan .all-box-number .all-box .box .number {
        position: absolute;
        bottom: 2vw;
        right: 3vw;
    }

    .body-section-plan .all-box-number .all-box .box .number h4 {
        font-size: 9vw;
        margin: 0;
        padding-bottom: 0;
        letter-spacing: -.5vw;
    }

    .body-section-plan .all-box-number .all-box .box.box-blue .number h4 {
        color: #7c92af;
    }

    .body-section-plan .all-box-number .all-box .box.box-red .number h4 {
        color: #bf8181;
    }

    .body-section-plan .all-box-number .all-box .box .title {
        width: 100%;
    }

    .body-section-plan .all-box-number .all-box .box .title h4 {
        font-size: 3.7vw;
        letter-spacing: .4vw;
        line-height: 5.5vw;
        position: relative;
        z-index: 90;
    }

    .all-box-text {
        width: 88%;
        margin: auto;
        margin-top: 2vw;
        margin-bottom: 3vw;
    }

    .all-box-text .all-box {
        width: 48%;
    }

    .all-box-text .all-box p {
        font-size: 3.2vw;
        line-height: 5.8vw;
    }

    .all-box-logo {
        margin: auto;
        margin-top: 6vw;
        margin-bottom: 3vw;
        width: 88%;
    }

    .all-box-logo .box-right {
        display: flex;
        border: .8vw solid #af6262;
        width: 48%;
        padding: 4vw;
        padding-left: 0;
        padding-right: 0;
        border-radius: 4vw;
        height: max-content;
    }

    .all-box-logo .box-left {
        display: flex;
        flex-wrap: wrap;
        border: .8vw solid #5b779b;
        width: 48%;
        padding: 4vw;
        padding-top: 3vw;
        padding-left: 0;
        padding-right: 0;
        border-radius: 4vw;
    }

    .all-box-logo .box-right .box-logo .box .title-logo h3 {
        font-size: 4vw;
        letter-spacing: .1vw;
        width: auto;
        text-align: center;
        line-height: 5vw;
    }

    .all-box-logo .box-left .title h5 {
        font-size: 4vw;
        letter-spacing: .3vw;
    }

    .all-box-logo .box-left .title {
        padding-bottom: 1vw;
        width: 100%;
        background-image: radial-gradient(circle, #5b779b 11%, transparent 10%);
        background-position: bottom;
        background-size: 1vw 4.9vw;
        background-repeat: repeat-x;
        height: 3vw;
        display: flex;
        justify-content: center;
        height: 12vw;
    }

    .all-box-logo .box-left .box-logo .box {
        display: flex;
        justify-content: center;
        margin: 3vw 0;
        flex-wrap: wrap;
    }

    .all-box-logo .box-left .box-logo .box .title-logo {
        width: 100%;
        margin-top: 3vw;
        align-items: center;
    }

    .all-box-logo .box-left .box-logo .box .logo {
        width: 100%;
    }

    .all-box-logo .box-left .box-logo .box .title-logo h3 {
        font-size: 4vw;
        text-align: center;
        line-height: 5vw;
        margin-bottom: 1vw;
    }

    .all-box-logo .box-left .box-logo .box .title-logo p {
        font-size: 2.7vw;
        display: flex;
        justify-content: center;
        text-align: center;
        width: 30vw;
    }

    .line-radius-bottom {
        background-image: radial-gradient(circle, rgb(201, 201, 201) 11%, transparent 10%);
        background-position: bottom;
        background-size: 1vw 5vw;
        background-repeat: repeat-x;
        height: 3vw;
    }

    .all-box-logo .box-left .box-logo .box .logo img {
        width: 45%;
        margin: auto;
    }

    .all-box-logo .box-right .box-logo .box .title-logo {
        padding-bottom: 4vw;
    }

    .all-box-logo .box-right .box-logo .box .logo img {
        width: 89%;
        margin : auto;
    }

    .all-box-logo .box-right .box-logo .box {
        margin-bottom: 4vw;
    }

    .all-box-logo .box-right .box-logo .box:last-child {
        margin-top: 2vw;
    }

    .body-plan .title-red-blue-custom {
        margin-top: 6vw;
    }

    .body-plan .title-red-blue .blue-left {
        height: 18.5vw;
    }

    .body-plan .title-red-blue .box-in-left {
        width: 100%;
        height: 18.5vw;
    }

    .body-plan .title-red-blue .box-in-right {
        width: 100%;
        height: 18.5vw;
    }

    .body-plan .title-red-blue .red-right {
        height: 18.5vw;
    }

    .body-plan .title-red-blue-custom .blue-left {
        height: 22.5vw;
    }

    .body-plan .title-red-blue-custom .box-in-left {
        width: 100%;
        height: 22.5vw;
    }

    .body-plan .title-red-blue-custom .box-in-right {
        width: 100%;
        height: 22.5vw;
    }

    .body-plan .title-red-blue-custom .red-right {
        height: 22.5vw;
    }

    .btn-white {
        background-color: white;
        display: flex;
        align-items: center;
        padding: 2vw 6vw;
        border-radius: 20vw;
        width: 41vw;
        height: 15vw;
    }

    .btn-white .arrow {
        width: 2vw;
        height: 2vw;
        display: flex;
        align-items: center;
    }

    .btn-white .title p {
        font-size: 4vw;
        letter-spacing: .1vw;
        margin-left: 2vw;
    }

    .body-plan .title-red-blue-custom .image-square {
        top: -5vw;
    }

    .bg-body-pc-table-custom {
        padding-top: 8vw;
    }

    .body-plan .title-red-blue-custom .image-square img {
        width: 7.5vw;
    }

    section.body .title-body .box-center .bg-active {
        height: 8vw;
        width: 44vw;
        border-radius: 1vw;
        bottom: 46.5vw;
        left: 28vw;
    }

    .body-header .box-double-main .box {
        border: unset;
        box-shadow: unset;
        width: 42vw;
    }
    
}