@charset "utf-8";

/*------------------------*/
/*募集要項*/
/*-------------------------*/

/*求める人物像*/
#personality {
    background: url('../img/bg_wave_single_g.svg') no-repeat center bottom;
}

.talent {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}
.talent h3 {
    font-family: serif;
    text-align: center;
}
.talent p {
    /*16-18*/
    font-size: clamp(1rem, 0.975rem + 0.13vw, 1.125rem);
}
.talent ul {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 0;
    list-style-type: none;
}
.talent li {
    text-align: center;
    padding: 15px 20px 10px;
    line-height: 140%;
    background: url('../img/dot.png') repeat-x center bottom; 
}

.talent figure {
    margin: 30px auto 0;
    /* max-width: 500px; */
    max-width: clamp(400px, 60%, 500px);
}




/*------------------------------*/
/*募集職種*/
/*------------------------------*/
#recruitment {
    background: url('../img/bg_wave_w_2.svg') no-repeat center bottom;
    background-color: #F0F5F9;
    padding-top: 1px; /*余白対策*/
    margin-top: -1px;
    padding-bottom: 140px;
}


/*ページ内メニュー*/
.pagemenu {
    margin-bottom: 50px;
}
.pagemenu ul {
    font-weight: bold;
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.pagemenu li {
    margin: 0 10px 0 0;
}
.pagemenu li::after {
    content: "／";
    padding-left: 10px;
}
.pagemenu li:last-child::after {
    content: "";
}

/*詳細*/
.type {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 40px 40px;
    background-color: #fff;
    border-radius: 10px;
    position: relative; /*下線用*/
}
.type::before{
    position: absolute;
    top: -1px;
    left: 40px;
    width: 10vw;
    height: 4px;
    content: '';
    background: #0057c9;
}

.type h3 {
        color: #0057c9;
}
.type~.type {
    margin-top: 40px;
}


/*募集要項*/
.tbl-type {
    width: 100%;
    border: 1px #bbb solid;
    border-collapse: collapse;
    line-height: 140%;
}
.tbl-type th {
    width: 200px;
    padding: 10px;
    border-right: 1px #bbb dotted;
    border-bottom: 1px #bbb solid;
    background-color: #f7f7f7;
}
.tbl-type td {
    padding: 10px 20px;
    border-bottom: 1px #bbb solid;
}

/*採用プロセス*/
.type h4 {
    /*16-18*/
    font-size: clamp(1rem, 0.975rem + 0.13vw, 1.125rem);
    margin: 0 0 20px;
    padding-bottom: 10px;
    border-bottom: 1px #ddd solid;
    color: #000;
}
.type .flow {
    margin-top: 20px;
    border: 1px #dbe3f5 solid;
    padding: 20px;
}
.type .notes {
    margin-top: 30px;
}


#type04 {
    background: url('../img/illust13.png') no-repeat right 20px bottom 20px;
    background-color: #fff;
    /*background-size: 10vw;*/
    background-size: 200px;
}

/*２column*/
.column {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
.column .info-l {
    width: 40%;
}
.column .info-r {
    flex: 1;
}


/*------------------------------*/
/*よくある質問*/
/*------------------------------*/
#faq {
    background-image: url('../img/bg_wave_single_w.svg'), url('../img/bg_wave_single_b.svg');
    background-repeat: no-repeat, no-repeat;
    background-position: center top, center bottom;
    padding-bottom: 140px;
}

.faqs {
    max-width: 1000px;
    margin: 0 auto;
}
.faqs dl {
    margin: 0;
    padding: 10px 10px 20px;
    border-bottom: 1px #ddd solid;
}
.faqs dl~dl {
    margin-top: 20px;
}
.faqs dt {
    /*16-20*/
    font-size: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);
    font-weight: bold;
}
.faqs dd {
    margin: 20px 0 0 0;
    display: none;
}
.faqs dd .num {
    color: #ddd;
    margin-left: 2px;
}

.faqs .line {
    display: flex;
    flex-wrap: wrap;
    line-height: 180%;
}
.faqs .line .num {
    width: 60px;
    font-weight: bold;
    letter-spacing: 1px;
    /*18-22*/
    font-size: clamp(1.125rem, 1.075rem + 0.25vw, 1.375rem);
}
.faqs .line .txt {
    flex: 1;
}



/*------------------------------*/
/*応募先など*/
/*------------------------------*/
#information {
    background-size: 20vw;
    background-color: #E6F4FF;
    padding-top: 1px; /*余白対策*/
    margin-top: -1px;
    padding-bottom: 100px;
}


/*お問い合わせ*/
.contact {
    width: 100%;
    margin: 0 auto;
    text-align: center;
}
.contact dt {
    /*18-20*/
    font-size: clamp(1.125rem, 1.1rem + 0.13vw, 1.25rem);
    font-weight: bold;
    margin-bottom: 20px;
}
.contact dd {
    margin: 0 0 10px;
    line-height: 140%;
}
.contact .entry {
    margin: 40px auto 0;
}
.contact .entry a,
.contact .entry span {
    min-width: 300px;
}




/****************************/
/*レスポンシブ*/
/****************************/
@media screen and (max-width: 1279px) {
}

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

    .pagemenu li {
        margin: 0 10px 20px;
    }

    .type {
        padding: 20px 20px 40px;
    }
    .type .flow dt {
        width: 120px;
    }
    .tbl-type th {
        width: 180px;
    }
    #type04 {
        background-size: 120px;
    }
}

@media screen and (max-width: 779px) {
    #recruitment {
        padding-bottom: 100px;
    }

    .type .flow dt {
        width: 100px;
    }
    .flow dd {
        margin: 0 0 0 20px;
        padding: 10px 10px;
    }
    .tbl-type th {
        width: 120px;
    }
    
    #faq {
        padding-bottom: 100px;
    }
    .faqs .line .num {
        width: 50px;
        letter-spacing: 0;
    }
}

@media screen and (max-width: 579px) {
    #recruitment {
        padding-bottom: 50px;
    }
    #type04 {
        background-position: center bottom 20px;
        padding-bottom: 180px;
    }
    .type .entry {
        margin: 20px auto 0;
    }
    #faq {
        padding-bottom: 70px;
    }
    #information {
        padding-bottom: 70px;
    }

    .column {
        flex-direction: column;
    }
    .column .info-l {
        width: 100%;
    }
    .column .info-r {
        width: 100%;
    }

}

@media screen and (max-width: 379px) {
    
    .type {
        padding: 10px 10px 30px;
    }
    .tbl-type {
        border: 1px #bbb solid;
        border-width: 0;
    }
    .tbl-type th {
        display: block;
        width: 100%;
        padding: 10px 10px 0 10px;
        border-width: 0;
        text-align: left;
        background-color: transparent
    }
    .tbl-type td {
        display: block;
        width: 100%;
        padding: 5px 10px;
        border-bottom: 1px #bbb solid;
    }
    .type .flow {
        padding: 20px 10px;
    }
    .type .flow dt {
        width: 90px;
    }
    .flow dd {
        padding: 10px 0;
    }

    .faqs .line .num {
        width: 40px;
    }
}