.recruit-top-container {
    padding: 8rem 0;

    .recruit-top-white-box-container {
        width: 100%;
        background-color: #fff;
        padding: 8rem;
        display: flex;
        border-radius: 1.6rem;
        justify-content: space-between;

        .white-box-left-text {
            max-width: 71.5rem;

            .title {
                font-style: normal;
                font-weight: 700;
                font-size: 3.6rem;
                line-height: 160%;
                letter-spacing: 0.1em;
                color: #D62328;
                padding-bottom: 7.2rem;
            }

            & p {
                font-style: normal;
                font-weight: 500;
                font-size: 1.8rem;
                line-height: 200%;
                letter-spacing: 0.1em;
                color: #000000;
            }
        }

        .img-container-top {
            width: 48.1rem;
        }
    }
}

.recruit-bottom-container {
    padding: 0 0 16rem;

    .white-container-btm {
        background-color: #fff;
        border-radius: 1.6rem;
        padding: 8rem;
    }
    .common-title-page {
        margin-bottom: 4rem;
    }
    .red-nav {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 0px 1.6rem 0px 4rem;
        width: 100%;
        height: 7rem;
        background: #D62328;
        border-radius: 4rem;
        margin-bottom: 3.2rem;
        cursor: pointer;

        .text {
            font-style: normal;
            font-weight: 900;
            font-size: 2rem;
            /* line-height: 30px; */
            letter-spacing: 0.05em;
            color: #FFFFFF;
        }


        .icon-container {
            width: 4.4rem;
            height: 4.4rem;
            transform: rotate(90deg);

            & img {
                width: 100%;
                height: 100%;
            }
        }
    }   
}

.table-container {
    display: none;
}

.red-nav.open + .table-container {
    display: block; 
}

.infos-container .table-container {
    display: block;
}

.red-nav .icon-container {
    transition: transform 0.3s ease;
    transform: rotate(90deg); 
}

.red-nav.open .icon-container {
    transform: rotate(-90deg);
}

@media screen and (max-width: 767px) {
    .recruit-top-container {
        padding: 4rem 0;
    }

    .recruit-top-container .recruit-top-white-box-container {
        flex-direction: column;
        padding: 4rem 2rem;
    }

    .recruit-top-container .recruit-top-white-box-container .white-box-left-text {
        max-width: 100%;
    }

    .recruit-top-container .recruit-top-white-box-container .white-box-left-text .title {
        font-size: 2.4rem;
        padding-bottom: 3rem;
    }

    .recruit-top-container .recruit-top-white-box-container .white-box-left-text p {
        font-size: 1.6rem;
    }

    .recruit-top-container .recruit-top-white-box-container .img-container-top {
        width: 100%;
        margin-top: 2rem;
    }

    .recruit-bottom-container {
        padding: 0rem 0 8rem;
    }

    .recruit-bottom-container .white-container-btm {
        padding: 4rem 2rem;
    }

    .recruit-bottom-container .common-title-page {
        margin-bottom: 2rem;
    }

    .recruit-bottom-container .red-nav {
        padding: 0 1.2rem 0 2rem;
        height: 5.5rem;
    }

    .recruit-bottom-container .red-nav .text {
        font-size: 1.6rem;
    }

    .recruit-bottom-container .red-nav .icon-container {
        width: 3.2rem;
    }
}