@charset "UTF-8";
/* ----------------------------------------------------------
募集職種
---------------------------------------------------------- */
/* --------------------------------
募集職種TOP
----------------------------------- */
.lower_ttl_Box .main_ttl::before{
    background: var(--skyblue);
}
footer{
    background: none;
}
#recruit{
    width: 100%;
    background: url(../img/navy_bg.jpg) center center repeat-y;
    background-size: cover;
    background-attachment: fixed;
    color: #fff;
}
.recruit_Wrap{
    padding: 100px 0 0;
}
.recruit_Wrap .Wrap_ttl{
    padding: 10px ;
    border-bottom: 1px solid var(--bluegray);
    margin-bottom: 50px;
}
.recruit_Wrap .Wrap_ttl h2{
    color: #fff;
}
.recruit_Wrap .recruit_List_Box{
    margin-top: 50px;
}
.recruit_Wrap .recruit_List_Box h3{
    position: relative;
    font-size: 3rem;
    padding-left: 0.5em;
}
.recruit_Wrap .recruit_List_Box h3::before{
    position: absolute;
    content: "";
    width: 8px;
    height: 8px;
    background: var(--skyblue);
    border-radius: 50%;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}
.recruit_Wrap .recruit_List_Box .recruit_List{
    margin-top: 20px;
}
.recruit_Wrap .recruit_List_Box .recruit_List li{
    width: 49%;
    border-bottom: 1px solid var(--bluegray);
    transition: 0.3s;
}
.recruit_Wrap .recruit_List_Box .recruit_List li:hover{
    background: rgba(255,255,255,0.1);
}
.recruit_Wrap .recruit_List_Box .recruit_List li a{
    position: relative;
    display: block;
    width: 100%;
    color: #fff;
    font-size: 1.6rem;
    padding: 20px 5px;
}
.recruit_Wrap .recruit_List_Box .recruit_List li a::after{
    position: absolute;
    font-family: "Material Symbols Sharp";
    content: "\e941";
    color: #fff;
    font-size: 1.8rem;
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
}
.recruit_Wrap .recruit_List_Box .recruit_List_none{
    width: 100%;
    color: #fff;
    font-size: 1.6rem;
    padding: 20px 5px;
}
/* サイドボタン */
.index_Box{
    position: sticky;
    top: 0;
}
.side_Btn [class*=Btn] {
    background: #fff;
    border: 1px solid #fff;
}
.side_Btn [class*=Btn]:not(:first-child) span {
    color: #111;
}
.side_Btn .job_detail_Btn::before,
.side_Btn .job_detail_Btn::after{
    background: #111;
}
.side_Btn .job_detail_Btn:hover {
    background: #111;
}
.side_Btn .job_detail_Btn:hover span {
    color: #fff;
}
.side_Btn .job_detail_Btn:hover::before,
.side_Btn .job_detail_Btn:hover::after {
    background: #fff;
}
.side_Btn [class*=Btn]:not(:first-child):hover span{
    color: #fff;
}
/* エントリーボタン */
.side_Btn .entry_Btn{
    padding: 0;
    border: 0;
}
.side_Btn .entry_Btn a{
    width: 100%;
    margin: 0;
}
/* 見出し */
.lower_ttl_Box .main_ttl{
    color: #fff;
}
.lower_ttl_Box h2,
.lower_ttl_Box h3{
    color: #fff;
}
/* 募集職種 */
.recruit_List_detail dl{
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    border-bottom: 1px solid #fff;
    /* padding-bottom: 10px; */
    font-size: 1.5rem;
    line-height: 1.6;
}
.recruit_List_detail dl dt{
    width: 20%;
    padding: 15px 10px;
}
.recruit_List_detail dl dd{
    width: 80%;
    padding: 15px 10px;
}
/* モーダル */
.modal-container .modal-content .txt{
    color: #333;
}

/* ==============================================================
PC(1600px~)
============================================================== */
@media screen and (min-width: 1600px) {


}

/* ==============================================================
PC・TAB(~1100px)
============================================================== */
@media screen and (max-width:1100px) {

}

/* ==============================================================
PC・TAB(~820px)
============================================================== */
@media screen and (max-width:820px) {


}

/* ==============================================================
SP(~768px)
============================================================== */
@media screen and (max-width:768px) {

    /* --------------------------------
    募集職種TOP
    ----------------------------------- */
    #recruit{
        position: relative;
    }
    #recruit::before{
        position:fixed;
        content:"";
        display:block;
        top:0;
        left:0;
        z-index:-1;
        width:100%;
        height:100vh;
        background-repeat:no-repeat;
        background-position:50% 100%;
        background-image:url(../img/navy_bg.jpg);
        background-size:cover;
    }
    footer{
        padding-bottom: 100px;
    }
    .recruit_Wrap {
        padding: 70px 0 0;
    }
    .recruit_Wrap .Wrap_ttl{
        margin-bottom: 20px;
    }
    .recruit_Wrap .recruit_List_Box {
        margin-top: 25px;
    }
    .recruit_Wrap .recruit_List_Box h3{
        font-size: 2rem;
    }
    .recruit_Wrap .recruit_List_Box h3::before {
        width: 6px;
        height: 6px;
    }
    .recruit_Wrap .recruit_List_Box .recruit_List {
        margin-top: 5px;
    }
    .recruit_Wrap .recruit_List_Box .recruit_List li {
        width: 100%;
    }
    .recruit_Wrap .recruit_List_Box .recruit_List li a {
        font-size: 1.4rem;
        padding: 15px 5px;
    }

    .recruit_Wrap main{
        margin-top: 0;
    }
    .recruit_Wrap .lower_ttl_Box{
        margin-bottom: 10px;
    }
    .recruit_List_detail dl {
        flex-wrap: wrap;
        font-size: 1.4rem;
        line-height: 1.5;
        border-bottom: none;
    }
    .recruit_List_detail dl dt,
    .recruit_List_detail dl dd{
        width: 100%;
    }
    .recruit_List_detail dl dt{
        text-align: center;
        background: #fff;
        color: #111;
        padding: 7px 0;
    }
    .recruit_List_detail dl dd{
        padding: 8px 5px 15px;
    }
    .recruit_Wrap aside .index_Box .side_Btn{
        background: rgba(0,0,0,0.5);
    }
    .recruit_Wrap aside .index_Box .side_Btn .entry_Btn{
        display: none;
    }
    .recruit_Wrap aside .index_Box .side_Btn .job_detail_Btn,
    .recruit_Wrap aside .index_Box .side_Btn .job_recruit_Btn {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 15px 5px;
    }
    #Pagetop{
        bottom: 10.5%;
    }
}