@charset "utf-8";
@import url("root.css");
/***************************************
-------------- staff --------------
***************************************/

#recruitment {
background-color: var(--sub-color01);
padding: 0 0;
}
#recruitment .container{
    padding: 20px 0 0 0;
}

#recruitment .box{
background-color: var(--base-color03);
margin: 30px auto;
padding: 50px;
border-radius: 20px;
width: 1200px;
}

#recruitment .recruitment_box{
border: 5px solid var(--base-color01);
border-radius: 14px;
background-color: var(--base-color03);
padding: 40px;
margin:40px auto 0;
background:url(../img/recruitment/bg.png) top right no-repeat var(--base-color03);
}

#recruitment h3{
font-size: 30px;
font-weight: 700;
margin: 0 auto 10px;
text-align:left;
}

#recruitment dl{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
width: 100%;
}

#recruitment dt{width: 25%;}
#recruitment dt img{max-width: 100%;}
#recruitment dd{
width: 69%;
margin: 0 0 0 6%;
}

#recruitment .col{width:49%;margin: 0 2% 0 0;}
#recruitment .col:nth-child(2n){margin: 0 0 0 0;}
#recruitment .link_a a{width:100%;}


#recruitment .detail_box{width:100%;}

#recruitment .detail_box dl{
margin: 50px auto 0;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items:stretch;
width: 100%;
border-top: 1px solid var(--base-color01);
border-left: 1px solid var(--base-color01);
border-right: 1px solid var(--base-color01);
}



#recruitment .detail_box dt {
    width: 30%;
    font-size: 2rem;
    font-weight: bold;
    color: var(--base-color03);
    border-bottom: 1px solid var(--base-color03);
    text-align: center;
    margin: 0 auto;
    padding: 10px 0;
    background-color: var(--base-color01);
    display: flex;
    align-items: center;
    justify-content: center;
}
#recruitment .detail_box dd {
    width:70%;
    margin: 0 auto;
    padding: 20px 4%;
    text-align: justify;
    border-bottom: 1px solid var(--base-color02);
	background-color: var(--base-color03);
}


#recruitment .title h3 {
    margin: 50px auto 20px;
    font-size: 50px;
    font-weight: 900;
    color: var(--base-color01);
    width: 100%;
    border-bottom: 3px solid var(--base-color01);
    text-align: center;
    padding: 0 0 20px 0;
    line-height: 1;
}

@media screen and (max-width: 768px) {
#recruitment {
background-color: var(--sub-color01);
padding: 0 0;
}
#recruitment .container{
    padding: 20px 0 0 0;
}

#recruitment .box{
background-color: var(--base-color03);
margin: 30px auto;
padding: 50px;
border-radius: 20px;
width:90%;
}

#recruitment .recruitment_box{
border: 5px solid var(--base-color01);
border-radius: 14px;
background-color: var(--base-color03);
padding:20px 20px 10px 20px;
margin:20px auto 0;
background:url(../img/recruitment/bg.png) top right no-repeat var(--base-color03);
}

#recruitment h3{
font-size:20px;
font-weight: 700;
margin: 5px auto 5px;
text-align:center;
}

#recruitment dl{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
width: 100%;
}

#recruitment dt{width: 100%;}
#recruitment dt img{max-width: 100%;}
#recruitment dd{
width:100%;
margin:0 auto;
}
#recruitment .row{width:100%;margin:0 auto;}
#recruitment .col{width:100%;margin:0 auto;}
#recruitment .col:nth-child(2n){margin:0 auto;}
#recruitment .link_a a{width:100%;margin: 0 auto 10px;}


#recruitment .detail_box dl p {
    text-align: justify;
    margin: 10px auto;
}
#recruitment .detail_box dl {
    margin: 20px auto 0;
}
#recruitment .detail_box dt {
    width: 100%;
    font-size:16px;
}
#recruitment .detail_box dd {
    width:100%;
	padding: 0 4%;
}

#recruitment .title h3 {
    margin: 20px auto 20px;
    font-size:24px;

}

}