@charset "UTF-8";

div#recruit_top_title {
    margin-bottom: 50px;
}

div#recruit_top_title h2 {
    color: #000000;
    font-family: var(--s-font-f5ab3b3a);
    font-size: 36px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 10px;
    width: 100%;

}

div#recruit_top_title hr {
    border: 1px #006bb8 solid;
    margin-bottom: 10px;
    width: 100%;
}

div#recruit_top_title h3 {
    color: #006bb8;
    font-family: var(--s-font-bab26bd2);
    font-size: 28px;
    font-weight: 400;
    line-height: 1.4;
}

div#recruit_top_contents {
    width: 100%;
    display: flex;
    /* height: 415px; */
}

div#recruit_top_contents_left {
    width: calc(50% - 40px);
    margin-right: 40px;
}

div#recruit_top_contents_left h4 {
    color: #000000;
    font-family: var(--s-font-f5ab3b3a);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.7;
    margin-bottom: 30px;
}

div#recruit_top_contents_left p {
    color: #000000;
    font-family: var(--s-font-f5ab3b3a);
    font-size: 16px;
    font-weight: 400;
    line-height: 2;
}

div#recruit_top_contents_right {
    width: 50%;
    height: 100%;
}

div#recruit_top_contents_right img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 募集要綱 */
div#job_description_contents {
    margin-bottom: 80px;

}

div#job_description_contents dl {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

div#job_description_contents dl dt {
    width: calc(20% - 41px);
    padding: 20px;
    color: #333;
    font-family: var(--s-font-f5ab3b3a);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 1px solid #999999;
    border-left: 1px solid #999999;
    background: #FFFFFF;
}

div#job_description_contents dl dd {
    width: calc(80% - 42px);
    padding: 20px;
    color: #333;
    font-family: var(--s-font-f5ab3b3a);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    display: flex;
    align-items: center;
    border-top: 1px solid #999999;
    border-left: 1px solid #999999;
    border-right: 1px solid #999999;
    background: #EEEEEE;
}


div#job_description_contents dl dt:last-of-type,
div#job_description_contents dl dd:last-of-type {
    border-bottom: 1px solid #999999;
}

/* エントリーボタン */

div.button_position_center.entry {
    display: flex;
    justify-content: center;
    height: 100px;
}

div.button_box.entry,
div.button_box.entry a {
    height: 100px;
    width: 600px;
}

div.button_position_center div.button_position_center_in.entry {
    left: 50%;
    translate: -50% 0;
}

div.button_upper_layer.entry {
    background: linear-gradient(var(--g-angle), var(--g-color-0) var(--g-position-0), var(--g-color-1) var(--g-position-1));
    border-bottom: 1px solid #006bb8;
    border-left: 1px solid #006bb8;
    border-right: 1px solid #006bb8;
    border-top: 1px solid #006bb8;
    bottom: auto;
    color: #333;
    font-family: var(--s-font-f5ab3b3a);
    font-size: 15px;
    font-weight: 400;
    height: 100px;
    justify-content: center;
    line-height: 1.4;
    opacity: 1;
    transform: translate(-10px, -10px);
    width: 600px;
    --g-color-0: #004373;
    --g-position-0: 0%;
    --g-color-1: #006bb8;
    --g-position-1: 70%;
    --g-angle: 90deg;
}

div.button_upper_layer.entry:hover {
    transform: translate(0, 0);
}

span.entry_button_en {
    color: #FFFFFF;
    font-family: var(--s-font-bab26bd2);
    font-size: 64px;
    font-weight: 400;
    letter-spacing: 0em;
    margin-right: 30px;
}

span.entry_button_ja {
    color: #FFFFFF;
    font-family: var(--s-font-f5ab3b3a);
    font-size: 36px;
    font-weight: 700;
    letter-spacing: 0em;
}

div.button_bottom_layer.entry {
    background: #FFFFFF;
    border: 1px solid #006bb8;
    color: #333;
    height: 100px;
    left: 0px;
    width: 600px;
}

/* インタビュー */
div#interview_contents {
    width: 100%;
    margin-bottom: 80px;
}


div.interview_element {
    display: flex;
    width: 100%;
    margin-bottom: 80px;

}


div.interview_left {
    width: calc(45% - 50px);
    margin-right: 50px;
}


div.interview_left img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


div.interview_right {
    width: 55%;
}


div.interview_right h5 {
    color: #006bb8;
    font-family: var(--s-font-f5ab3b3a);
    font-size: 36px;
    font-weight: 700;
    line-height: 1.6;
    margin-bottom: 10px;
    /* width: 780px; */
}


div.interview_right p.join_year {
    color: #333;
    font-family: var(--s-font-f5ab3b3a);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    margin-bottom: 30px;
}

div.interview_right p.interview_main {
    color: #333;
    flex: none;
    font-family: var(--s-font-f5ab3b3a);
    font-size: 18px;
    font-weight: 500;
    height: auto;
    line-height: 2;
    margin: 0px 0px 0px 0px;
    text-align: justify;
    width: 100%;
    max-width: 100%;
    justify-content: space-between;
}

div#gallery_contents {
    display: grid;
    grid-template-columns: 19% 19% 19% 19% 19%;
    justify-content: space-between;
    gap: 30px 0;
}

div#gallery_contents img {
    /* height: 180px; */
    aspect-ratio: 1/0.75;
    width: 100%;
    object-fit: cover;
}

.video_container {
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
}

.video_container video {
    width: 49%;
}

@media screen and (max-width:1024px) {
    div.interview_element {
        flex-direction: column;
    }

    div.interview_left {
        width: 100%;
        margin-right: 0;
        margin-bottom: 48px;
    }

    div.interview_right {
        width: 100%;
    }

    div#gallery_contents {
        grid-template-columns: 32% 32% 32%;
        row-gap: 20px;
    }

    .video_container {
        flex-direction: column;
    }

    .video_container video {
        width: 100%;
    }
}


@media screen and (max-width:768px) {
    div#recruit_top_contents {
        flex-direction: column-reverse;
        height: auto;
    }

    div#recruit_top_contents_left,
    div#recruit_top_contents_right {
        width: 100%;
        margin-right: 0;
        margin-bottom: 30px;
    }

    div#job_description_contents dl dt {
        width: calc(30% - 1px);
        font-size: 14px;
        padding: 10px 0;
    }

    div#job_description_contents dl dd {
        width: calc(70% - 22px);
        font-size: 14px;
        padding: 10px;
    }

    div.button_box.entry,
    div.button_box.entry a,
    div.button_upper_layer.entry,
    div.button_bottom_layer.entry {
        width: 300px;
    }

    span.entry_button_en,
    span.entry_button_ja {
        height: auto;
    }

    span.entry_button_en {
        font-size: 45px;
        line-height: 1;
        margin-right: 0;
    }

    span.entry_button_ja {
        font-size: 30px;
    }

    .button_upper_layer {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    div#interview_contents,
    div.interview_element,
    div#job_description_contents {
        margin-bottom: 30px;
    }

    div.interview_right p.interview_main {
        font-size: 16px;
    }

    div.title {
        margin-bottom: 16px;
    }


    div#gallery_contents {
        grid-template-columns: 49% 49%;
    }
}