@charset "UTF-8";
/* 文字コードの指定 */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap");
/*-------------------------------------------------------------------------------- 
    求人案内(recruit)のスタイル
--------------------------------------------------------------------------------*/
main{
    width:100%;
    background-color:  var(--base-color);
    font-size: var(--font-size-m);
}

/*-------------------------------------------------
    求める人材(necessary person)
-------------------------------------------------*/
.recruit_comment_title_wrap{
    display: flex;
    flex-direction: row;
}
.recruit_comment{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: 100%; 
    text-align: center;
    color: var(--main-color1);
    font-size: var(--font-size-l);
    font-weight: 800;
    margin: 2rem 0;
}
/*-------------------------------------------------------------------------------- 
    募集要領(recruitment details)
--------------------------------------------------------------------------------*/
.recruit_title_wrap{
    display: flex;
    flex-direction: row;
}
/*-------------------------------------------------
    募集内容一覧
-------------------------------------------------*/
.recruit_list{
    padding: 0;
}
.recruit_wrap{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 0;
}
.recruit_detail{
    width: 100%;
}

.recruit_item_row{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    background-color: white;
    border-top:solid .1rem  var(--main-border-color);
    border-left:solid .1rem  var(--main-border-color);
    border-right:solid .1rem  var(--main-border-color);
}
.recruit_item_row:last-child{
    border-bottom:solid .1rem  var(--main-border-color);
}

.recruit_item_wrap{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
    width: 100%;
}

.recruit_item_wrap .item_title{
    width: 20%;
    padding-left: 1rem;
    font-size: var(--font-size-m);
    font-weight: 800;
    border-left: .5rem solid  var(--main-color1);
}
.recruit_item_wrap .item_contents{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    width: 80%;
    padding-left: 1rem;
    border-left:solid .1rem  var(--main-border-color);
}

.recruit_item_wrap .item_contents ul{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    list-style: none;
}
.recruit_item_wrap .item_contents ul li{
    padding-top: .5rem;
    padding-bottom: .5rem;
    line-height: 1;
    padding-left: 1rem;
    text-align: left;
}
/* --------------------------------------------------
	以上が 1300pxを超えるＰＣ端末環境設定
----------------------------------------------------- */
/* --------------------------------------------------
	ここから 1300以下のタブレッド端末環境設定
----------------------------------------------------- */
@media screen and (max-width: 1300px) {
    /*-------------------------------------------------------------------------------- 
        求人案内(recruit)のスタイル
    --------------------------------------------------------------------------------*/
    /*-------------------------------------------------
        求める人材(necessary person)
    -------------------------------------------------*/
    /*-------------------------------------------------------------------------------- 
        募集要領(recruitment details)
    --------------------------------------------------------------------------------*/
    /*-------------------------------------------------
        募集内容一覧
    -------------------------------------------------*/
}
/* --------------------------------------------------
	ここから 768px以下のタブレッド端末環境設定
----------------------------------------------------- */
@media screen and (max-width: 768px) {
    /*-------------------------------------------------------------------------------- 
        求人案内(recruit)のスタイル
    --------------------------------------------------------------------------------*/
    /*-------------------------------------------------
        求める人材(necessary person)
    -------------------------------------------------*/
    .recruit_comment_title_wrap .h2_title{
        width: 100%;
    }
    /*-------------------------------------------------------------------------------- 
        募集要領(recruitment details)
    --------------------------------------------------------------------------------*/
    .recruit_title_wrap .h2_title{
        width: 100%;
    }
    /*-------------------------------------------------
        募集内容一覧
    -------------------------------------------------*/
    .recruit_item_wrap .item_contents{
        width: 100%;
        border-left: .5rem solid  var(--main-color1);
    }
}
/* --------------------------------------------------
    ここから 375rem以下のモバイル端末環境設定
----------------------------------------------------- */
@media screen and (max-width:480px){
    /*-------------------------------------------------------------------------------- 
        求人案内(recruit)のスタイル
    --------------------------------------------------------------------------------*/
    /*-------------------------------------------------
        求める人材(necessary person)
    -------------------------------------------------*/
    .recruit_comment_title_wrap .h2_title{
        width: 100%;
    }
    /*-------------------------------------------------------------------------------- 
        募集要領(recruitment details)
    --------------------------------------------------------------------------------*/
    .recruit_title_wrap .h2_title{
        width: 100%;
    }
    /*-------------------------------------------------
        募集内容一覧
    -------------------------------------------------*/
    .recruit_item_wrap{
        flex-direction: column;
    }
    .recruit_item_wrap .item_title{
        width: 100%;
    }
    .recruit_item_wrap .item_contents{
        border-left: .5rem solid  var(--main-color1);
    }
}