@charset "utf-8";

.mb01 {
        margin-bottom: 1rem;
}

.recruiter-title-box {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 300px;
        overflow: hidden;
        background: url(../images/recruiter_title.jpg) center center no-repeat;
        background-size: 100% auto;
        margin: 4rem auto;
}

.recruiter-title-box h2 {
        width: 100%;
        height: auto;
        text-align: center;
        padding: 2rem;
        background-color: rgba(0, 0, 0, 0.15);
        font-size: 3rem;
        letter-spacing: 0.5rem;
        color: #fff;
}

.main-contents {
        max-width: calc(1200px + 6%);
        padding-left: 3%;
        padding-right: 3%;
        margin: 0 auto;
}

.recruiter-photo {
        position: relative;
        width: 100%;
}

.recruiter-01 {
        margin-top: 15rem;
}

.profile-box {
        position: absolute;
        top: 50%;
        right: 10%;
        transform: translateY(-50%);
        background-color: rgba(255, 255, 255, 0.6);
}

.recruiter-01-profile {
        position: relative;
        padding: 4rem;
        list-style-type: none;
}

.recruiter-info-box {
        list-style-type: none;
}

.recruiter-01-name {
        font-size: 3rem;
        margin-bottom: 2.5rem;
        line-height: 1em;
        color: #333333;
}

.rb {
        color: #e5001b;
        font-size: 1.4rem;
}

.recruiter-01-profile::before {
        position: absolute;
        content: "";
        height: 10rem;
        width: 3px;
        top: 5px;
        left: 5px;
        background-color: #e5001b;
}

.recruiter-info {
        color: #333333;
        line-height: 2em;
}

.recruiter-img {
        width: 100%;
}

.recruiter-box-title {
        margin-bottom: 5rem;
}

.recruiter-text-box {
        position: relative;
        width: 80%;
        margin-top: 5rem;
        padding: 4rem 5rem;
}

.bgc {
        width: 600px;
        height: 600px;
        position: absolute;
        z-index: -1;
        top: -20%;
        left: -20%;
        background-color: #f7f7f7;
}

.recruiter-text-wrap {
        letter-spacing: 2px;
        line-height: 1.8;
        text-align: justify;
}

.recruiter-box02 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 15rem auto;
}

.recruiter-box03 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 15rem auto;
}

.recruiter-box04 {
        margin-bottom: 15rem;
        padding: 8rem;
        background-color: #f7f7f7;
}

.recruiter-box-title02,
.recruiter-box-title03 {
        margin-bottom: 5rem;
}

.recruiter_01 .recruiter-box-title02,
.recruiter_02 .recruiter-box-title02 {
        width: 45%;
}

.recruiter-01 .recruiter-box02-img-wrap,
.recruiter-02 .recruiter-box02-img-wrap {
        width: 50%;
}

.recruiter-01 .recruiter-box-text02,
.recruiter-02 .recruiter-box-text02 {
        width: 80%;
        padding: 4rem 5rem;
        background-color: #f7f7f7;
}

.recruiter-01 .recruiter-box-flex {
        display: flex;
        justify-content: flex-end;
}

.recruiter-01 .recruiter-box02,
.recruiter-02 .recruiter-box02 {
        margin-bottom: 0;
}

.recruiter-01 .recruiter-box02-img,
.recruiter-02 .recruiter-box02-img {
        width: 100%;
}

.recruiter-box03-left {
        width: 50%;
        margin-right: 5%;
}

.recruiter-box03-right {
        width: 45%;
}

.recruiter-box03-img {
        width: 100%;
}

.recruiter-box-title03 {
        order: 2;
}

.recruiter-box-text03 {
        order: 1;
}

.recruiter-box-title04 {
        width: max-content;
        margin: 0 auto 5rem;
        text-align: center;
}

.heading14 {
        position: relative;
        padding-left: 80px;
        font-size: 20px;
}

.heading14::before {
        content: attr(data-number);
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        color: rgba(229, 0, 27, 0.3);
        font-size: 50px;
}

.heading14::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100px;
        height: 1px;
        background-color: rgba(229, 0, 27, 1);
}

.recruiter_02 .recruiter-box02-img-wrap {
        position: relative;
        z-index: -1;
}

.recruiter_02 .recruiter-box03-left {
        width: 45%;
}

.recruiter_02 .recruiter-box03-right {
        width: 50%;
}

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


        .recruiter-title-box {
                height: 20rem;
                margin: 0 auto;
        }

        .recruiter-box {
                display: block;
        }

        .recruiter-01 {
                margin-top: 5rem;
        }

        .profile-box {
                position: relative;
                left: 0;
                right: 0;
                transform: none;
        }

        .recruiter-01-profile {
                display: flex;
                align-items: flex-start;
                justify-content: space-between;
                padding: 2rem;
        }

        .recruiter-01-name {
                width: 60%;
                font-size: 2rem;
        }

        .recruiter-01-info {
                width: 40%;
        }

        .bgc {
                width: 300px;
                height: 300px;
                top: -50%;
        }

        .recruiter-text-box {
                width: 100%;
                padding: 0 1rem;
        }

        .recruiter-photo,
        .recruiter-01 .recruiter-box02-img-wrap,
        .recruiter-02 .recruiter-box02-img-wrap,
        .recruiter-01 .recruiter-box-text03,
        .recruiter-02 .recruiter-box-text03,
        .recruiter-box03-left,
        .recruiter-box03-right {
                width: 100%;
        }

        .recruiter-01 .recruiter-box-title02,
        .recruiter-02 .recruiter-box-title02 {
                width: 100%;
                margin: 2rem 0;
                padding: 0 1rem;
        }

        .recruiter-box-title,
        .recruiter-box-title03 {
                margin-bottom: 2rem;
        }

        .recruiter-01 .recruiter-box-title03,
        .recruiter-01 .recruiter-box-text03 {
                padding: 0 1rem;
        }

        .heading14 {
                padding-left: 60px;
                font-size: 1.8rem;
        }

        .heading14::before {
                font-size: 4rem;
        }

        .recruiter-text-wrap {
                letter-spacing: 0.01em;
                line-height: 1.9;
        }

        .recruiter-box02,
        .recruiter-box03 {
                display: block;
                margin: 5rem 0;
        }

        .recruiter-01 .recruiter-box-text02,
        .recruiter-02 .recruiter-box-text02 {
                width: 100%;
                padding: 2rem 1rem;
        }

        .recruiter-box03-left {
                margin-bottom: 1rem;
        }

        .recruiter-box04 {
                padding: 2rem 1rem;
                margin-bottom: 5rem;
        }

        .recruiter-01 .recruiter-box04 {
                margin-bottom: 8rem;
        }

        .recruiter-box-title04 {
                margin: 0 0 2rem;
        }
}