@charset "utf-8";
@import url(//fonts.googleapis.com/earlyaccess/notosansjapanese.css);
@import url(//fonts.googleapis.com/earlyaccess/sawarabimincho.css);
p.no_entry {
    text-align: center;
    font-size: 2.4rem;
}
/*==========================
RECRUIT INDEX MAIN VISUAL
==========================*/
#mv {
    background: url(/logistic/images/recruit/mv.png) no-repeat center;
    background-size: cover;
    padding: 191px 0px 130px;
    position: relative;
    text-align: right;
}
#mv.is_int {
    background: url(/logistic/images/recruit/interview/int_mv.png);
    text-align: left;
    padding: 100px 0 70px;
    background-position: center bottom;
}

.mv_txt.is_ing {
    margin-left: calc((100% - 1000px) / 2 + 20px);
}
@media screen and (max-width: 1000px) {
    .mv_txt.is_ing {
        margin-left: 20px;
    }
}
.h1_read {
    font-size: 2.0rem;
    margin-top: 11px;
}

img#mv_txt {max-width: 46%;padding-right: 20px;}
/*==========================
RECRUIT INDEX CONT1
==========================*/

.cont1 .content {
    max-width: 950px;
    padding: 50px 10px;
}
.rec_top_flex1 {
    justify-content: space-between;
    margin: 30px 0;
    flex-wrap: wrap;
}

.rec_top_flex2 {
    justify-content: space-between;
    flex-wrap: wrap;
}
@media screen and (max-width: 1000px) {
    .rec_top_flex1 {
        justify-content: center;
    }

    .rec_top_flex2 {
        justify-content: center;
    }
    .rec_top_btn1 {
        padding: 20px;
    }

    a.rec_top_btn2 {
        padding: 20px;
    }
}
.rec_top_btn1 img {
    /* border: 1px solid #000; */
}

.rec_top_btn1 {
    font-weight: 600;
}

/*==========================
RECRUIT LIST
==========================*/
.recruit__table {
    border: solid 1px #c3c3c3;
    width: 100%;
    font-size: 14px;
    letter-spacing: 0.5px;
    margin-bottom: 50px;
}

.recruit__table-cont {
    border-bottom: dotted 1px #c3c3c3;
}

.recruit__table-head,.recruit__table-data {
    padding: 10px 20px;
    text-align: left;
    line-height: 1.6;
}

.recruit__table:not(:last-of-type) {
}

.more-btn {
    background-color: #212121;
    color: #fff;
    max-width: 190px;
    box-sizing: border-box;
    display: inline-block;
    padding: 10px 48px 10px 20px;
    text-align: left;
    background-image: url(/tokyologistic/images/btn_arrow1.png);
    background-repeat: no-repeat;
    background-position: right 20px center;
    font-size: 14px;
}

#cont1.is_list {
    padding: 50px 20px;
    min-height: 300px;
}
/*==========================
RECRUIT DETAIL
==========================*/
.page_subhead {
    display: block;
    font-size: 1.7rem;
    color: #fff;
    background-color: #212121;
    padding: 10px 20px;
    font-weight: normal;
    /* margin-bottom: 20px; */
}
.recinfo-title {margin: 30px 0;}

p.page_lead {
    padding: 1em;
}
.entry__btn .btn {
    width: 190px;
    margin: auto;
}
.btn {
    padding: 20px 5px;
    display: block;
    color: #fff;
    font-size: 14px;
    text-align: center;
    border: none;
    cursor: pointer;
}
.btn-2 {
    background-color: #e84442;
}
.btn-3 {
    background-color: #9a9a9a;
}
.entry__btn {
    padding: 10px 5%;
}
.entry__btn-area {
    max-width: 520px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
}

p.entryttl {
    font-size: 103% !important;
}

/*==========================
INTERVIEW
==========================*/
.sub-title {
    font-size: 2.4rem;
    font-weight: 300;
}
#cont3 .int_p {
    /* margin-top: 2em; */
}
.int_h1 .read {
    font-size: 2.0rem;
    font-weight: 300;
    color: #00;
}
.int_cont {
    max-width: 890px;
    padding: 50px 0;
}
.staff_photo {
    max-width: 81%;
}
.staff_img {
    position: relative;
}

.staff_num {
    background: #100a64;
    color: #FFF;
    padding: 5px 15px;
    font-size: 2.0rem;
    letter-spacing: 4px;
    top: -23px;
}
.staff_loc {
    background: #000;
    color: #fff;
    font-size: 2.4rem;
    padding: 5px 20px;
    top: 30%;
}
.staff_name {
    background: #100a64;
    color: #fff;
    font-size: 3.2rem;
    padding: 5px 20px;
    top: calc(30% + 63px);
}

.staff_name .year {
    font-size: 1.6rem;
    padding-right: 30px;
}
.int_h1.is_main {
    font-size: 4.0rem;
    font-weight: 800;
}
.int_h1 {
    font-size: 2.4rem;
    font-weight: 600;
    color: #100a64;
    padding: 10px 0 0px;
}
p.int_p {
    font-size: 1.5rem;
}
.cont1 .staff_img {text-align: right;}
.cont1 .staff_loc{left: 5%;width: 37%;}

.cont2 .staff_num{right: 19.4%;}
.cont2 .staff_loc{left: 58%;width: 39%;text-align: right;}
.cont2 .staff_name{left: 60%;flex-wrap: wrap;align-items: baseline;}

.cont3 .staff_num{right: 0;}
.cont3 .staff_loc{left: 5%;width: 32%;}
.cont3 .staff_name{

}
.cont3 .staff_img {
    text-align: right;
}
.cont4 .staff_num{right: 19.4%;}
.cont4 .staff_loc{left: 66%;width: 30%;text-align: right;}
.cont4 .staff_name{left: 62%;flex-wrap: wrap;align-items: baseline;}

.cont7 .staff_num{right: 0;}
.cont7 .staff_loc{left: 5%;width: 32%;}
.cont7 .staff_name{

}
.cont7 .staff_img {
    text-align: right;
}

.cont8 .staff_num{right: 0;}
.cont8 .staff_loc{left: 5%;width: 37%;}
.cont8 .staff_name{

}
.cont8 .staff_img {
    text-align: right;
}

.cont9 .staff_num{right: 19.4%;}
.cont9 .staff_loc{left: 59%;width: 34%;text-align: right;}
.cont9 .staff_name{left: 62%;flex-wrap: wrap;align-items: baseline;}

.cont10 .staff_num{right: 19.4%;}
.cont10 .staff_loc{left: 66%;width: 30%;text-align: right;}
.cont10 .staff_name{left: 62%;flex-wrap: wrap;align-items: baseline;}

.cont11 .staff_num{right: 0;}
.cont11 .staff_loc{left: 5%;width: 32%;}
.cont11 .staff_name{

}
.cont11 .staff_img {
    text-align: right;
}

.int_link a:first-child {
    padding-right: 15px;
}

.content.soumu {
    background: #100860;
    color: #FFF;
    padding: 30px 50px;
    font-size: 2.0rem;
    box-sizing: border-box;
}

.content.soumu h1 {
    text-align: center;
    font-size: 2.4rem;
    font-weight: 500;
}
h1.list_h1.content {
    text-align: center;
    margin-bottom: 20px;
    font-size: 2.4rem;
}
.main.content {
    padding: 30px 10px;
}

.contact{
    margin: 40px 0;
}
.contact-bnr{
    display: flex;
    align-items: flex-start;
    margin-top: 20px;
}
.contact-bnr a{
    margin-right: 20px;
}
.contact .contact_txt{
    min-width: 450px;
}
.contact_btn{
    width: 300px;
    margin-top: 20px;
}
.contact_btn a {
    background-color: #100a64;
    display: inline-block;
    padding: 16px 60px;
    border-radius: 100px;
    font-size: 18px;
    text-align: center;
    font-weight: 700;
    color: #ffffff;
    text-decoration: none;
    opacity: 1;
    transition: 0.3s;
  }
  .contact_btn a:hover {
    opacity: 0.6;
    transition: 0.3s;
  }
/* ===================================================================================
 for PC min-width: 741px
 =================================================================================== */
@media screen and (min-width: 741px), print {
    /*==========================
    RECRUIT LIST
    ==========================*/
    .recruit__table-head {
        width: 20%;
    }

    .recruit__table-head {
        font-weight: normal;
        border-right: solid 1px #c3c3c3;
    }

    .more-btn_area {
        text-align: right;
        margin-bottom: 30px;
    }

    
    .rec_contact {
        margin: 0 auto;
        border-spacing: 0;
        border-top: solid 2px #C8C8C8;
        border-right: solid 2px #C8C8C8;
        font-size: 1.5rem;
    }

    .rec_contact td {}

    .rec_contact th {}

    .rec_contact th,.rec_contact td {
        border-left: solid 2px #C8C8C8;
        border-bottom: solid 2px #C8C8C8;
        padding: 5px 1em;
        vertical-align: middle;
    }

}

/* ===================================================================================
 for SP max-width: 740px
 =================================================================================== */
@media screen and (max-width: 740px) {
    /*==========================
    RECRUIT INDEX MAIN VISUAL
    ==========================*/
    #mv {
        padding: 20vw 0;
    }
    .h1_read {
    font-size: 2.4rem;
    margin-top: 11px;
}
    /*==========================
    RECRUIT INDEX CONT1
    ==========================*/
    .h1_read {
        font-size: 1.8rem;
        margin-top: 11px;
    }
    a.rec_top_btn2 {
        padding: 5px 0;
    }

    .rec_top_btn1 {
        padding: 5px 0;
    }
    /*==========================
    RECRUIT LIST
    ==========================*/
    .recruit__table-head, .recruit__table-data {
        display: block;
        padding: 10px;
    }

    .recruit__table-head {
        padding-bottom: 0;
        font-size: 18px;
    }
    .recruit__table {
        margin-bottom: 20px;
    }

    .more-btn_area {
        margin-bottom: 50px;
    }

    .more-btn {
        margin: 0 auto;
        float: none;
        display: block;
    }
    
    .table-wrap{
        overflow-x: scroll;
    }
    .table {
        width: 100%;
        border-collapse: collapse;
        white-space: nowrap;
    }
    .rec_contact {
        margin: 0 auto;
        border-spacing: 0;
        border-top: solid 2px #C8C8C8;
        border-right: solid 2px #C8C8C8;
        font-size: 1.5rem;
    }
    .rec_contact td {}

    .rec_contact th {}

    .rec_contact th,.rec_contact td {
        border-left: solid 2px #C8C8C8;
        border-bottom: solid 2px #C8C8C8;
        padding: 5px 1em;
        vertical-align: middle;
    }
     /*==========================
    INTERVIEW
    ==========================*/
    .staff_num.absolute,.staff_loc.absolute,.staff_name.absolute {
        position: static;
    }

    .staff_photo {
        max-width: 100%;
    }

    .int_cont {
        padding: 20px 15px;
    }

    .staff_loc {
        text-align: right;
    }

    .staff_loc {
        width: 100%!important;
        box-sizing: border-box;
        font-size: 1.8rem;
    }

    .staff_num {
        width: 5em;
        text-align: center;
        font-size: 1.4rem;
    }

    .staff_name {
        text-align: right;
        font-size: 2.4rem;
        padding: 0 20px;
    }

    .int_h1 {
        font-size: 2.0rem;
    }
    .cont4 .staff_name,.cont3 .staff_name {
        display: block;
    }
    .mv_txt.is_ing {
        max-width: 80%;
        margin-left: 0;
    }

    #mv.is_int {
        text-align: center;
        background-position: 60% 50%;
    }
    .int_h1.is_main {
        font-size: 3.2rem;
        text-align: center;
    }

    .int_h1 .read {
        font-size: 1.6rem;
    }

    .sub-title {
        font-size: 2.0rem;
    }

    .contact-sp{
        margin-top: 40px;
    }
    .contact-sp .contact_btn{
        margin: 30px auto;
        text-align: center;
    }
}