dd{
    margin: 0;
}
body{
    padding-top: 0px;
    margin: 0 auto;
}
.topwidth{
    max-width: 100%;
    margin: 0 auto;
    padding-left: 15%;
}
@media screen and (max-width: 768px) {
    body{
        padding-top: 25px;
    }
}
#Recruitment,#Flow{
    margin-top: -70px;
    padding-top: 70px;
}
@media screen and (max-width: 768px) {
    #Recruitment,#Flow{
        margin-top: -50px;
        padding-top: 50px;
    }
}
/* よく使うタイトルのcss */
#titlebox .main{
    font-family: Cormorant Garamond,sans-serif;
    font-size: 62px;
    font-style: italic;
    margin: 0;
    line-height: initial;
    font-weight: 500;
    color: #fff;
}
#titlebox .sub{
    font-family: Noto Serif JP, YakuHanJPs, 'Noto Sans Japanese', 'Hiragino Kaku Gothic Pro', MyYuGothicM, Meiryo, sans-serif;
    font-size: 16px;
    font-weight: 500;
    margin: 0;
    color: #fff;
}

@media screen and (max-width: 768px) {
    #titlebox .main{
        font-size: 45px;
    }
    #titlebox .sub{
        font-size: 14px;
    }
}
/* よく使うタイトルのcss */
.width{
    max-width: 1200px;
    margin: 0 auto;
}
@media screen and (max-width: 1300px) {
    .width{
        max-width: 100%;
        padding: 0 50px ;
        margin: 0 auto;
    }
}
@media screen and (max-width: 768px) {
    .width{
        max-width: calc(100% - 40px);
        padding: 0 20px;
        margin: 0 auto;
    }
}

#RECRUITMENT{
    padding-top: 70px;
}
#RECRUITMENT .top{
    width: 100%;
    position: relative;
}
#RECRUITMENT .top .banner{
    width: 100%;
}

#RECRUITMENT .top #titlebox{
    position: absolute;
    top: 42%;
    left: 10%;
}
@media screen and (max-width: 1300px) {
    #RECRUITMENT .top #titlebox {
        position: absolute;
        top: 30%;
        left: 0%;
    }
}

@media screen and (max-width: 768px) {
    #RECRUITMENT{
        padding-top: 00px;
    }
    #RECRUITMENT .top{
        width: 100%;
        position: relative;
    }
    #RECRUITMENT .top .banner{
        width: 100%;
    }
    
    #RECRUITMENT .top #titlebox{
        position: absolute;
        top: 42%;
        left: 0px;
    }

}


#RECRUITMENT .r_body{
   padding: 50px 0 50px;
}
#RECRUITMENT .r_body .top_text{
    font-family: 'Noto Serif JP', YakuHanJPs, 'Noto Sans Japanese', 'Hiragino Kaku Gothic Pro', MyYuGothicM, Meiryo, sans-serif;
    font-size: 22px;
    line-height: 46px;
    letter-spacing: 2px;
    font-weight: 500;
}
#RECRUITMENT .recruitment_title{
    font-family: 'Noto Serif JP', YakuHanJPs, 'Noto Sans Japanese', 'Hiragino Kaku Gothic Pro', MyYuGothicM, Meiryo, sans-serif;
    font-size: 30px;
    text-align: center;
    letter-spacing: 2px;
    font-weight: 500;
    margin: 70px 0;
}
@media screen and (max-width: 1300px) {
     #RECRUITMENT .r_body .top_text{
        margin: 0 50px;
     }
}

@media screen and (max-width: 768px) {
    #RECRUITMENT .r_body{
        padding: 30px 0 50px;
     }
     #RECRUITMENT .r_body .top_text{
        margin: 0 20px;
         font-size: 16px;
         line-height: 35px;
         letter-spacing: 1px;
         font-weight: 500;
     }
     #RECRUITMENT .recruitment_title{
         font-size: 20px;
         letter-spacing: 2px;
         font-weight: 500;
         margin: 50px 0 20px ;
     }
}

/* 募集要項*/
#RECRUITMENT .OccupationList{
    width: 100%;
    height: auto;
    border-collapse: collapse;
    border: solid 1px #999;
}

#RECRUITMENT .OccupationList dl.box{
    width: 100%;
    height: auto;
    margin: 0;
    display: flex;
    font-family: 'Noto Serif JP', YakuHanJPs, 'Noto Sans Japanese', 'Hiragino Kaku Gothic Pro', MyYuGothicM, Meiryo, sans-serif;
    font-size: 17px;
    font-weight: 500;
    border-collapse: collapse;
    border-bottom: solid 1px #999;
}
#RECRUITMENT .OccupationList dl.last{
    border-bottom: none;
}
#RECRUITMENT .OccupationList dl dt.title{ 
    width: 30%;
    background-color: #c3c3c3;
    padding: 30px ;
    text-align: left;
    letter-spacing: 2px;
    vertical-align: top;
}

#RECRUITMENT .OccupationList dl dd.detail{ 
    width: 70%;
    margin: none;
    padding: 30px;
    letter-spacing: 1px;
}
#RECRUITMENT .OccupationList dl dd.smalls{
    padding: 20px 30px;
}

#RECRUITMENT .OccupationList dl dd.detail .occupation{
    margin: 0;
    line-height: 35px;
}
#RECRUITMENT .OccupationList dl dd.detail .occupation dd{ 
    margin-left: 0;
    padding-bottom: 30px;
}
#RECRUITMENT .OccupationList dl dd.detail .occupation dd:last-child{ 
    margin-left: 0;
    padding-bottom: 0px;
}

#RECRUITMENT .OccupationList dl dd.detail .shop{
    margin: 0;
    line-height: 35px;
}

#RECRUITMENT .OccupationList dl dd.detail .Salary{
    margin: 0;
    line-height: 35px;
}
#RECRUITMENT .OccupationList dl dd.detail .Salary li{
    padding-bottom: 20px;
}
#RECRUITMENT .OccupationList dl dd.detail .Salary li:last-child{
    padding-bottom: 0px;
}
.occupation-name{
    position: relative;
    display: inline-block;
}
.occupation-name::after{
    content: '';
    position: absolute;
    left: 0;
    bottom: 4px; /* 下線の位置を調整 */
    width: 100%;
    height: 10%; /* テキストの高さに合わせる */
    background-color: #77aad9; /* 下線のスタイルを指定 */
    display: block;
    z-index: -1; /* テキストの下に配置 */
}

@media screen and (max-width: 1300px) {
    #RECRUITMENT .OccupationList{
        width: calc(100% - 10px);
        padding: 0;
        height: auto;
        border-collapse: collapse;
        border: solid 1px #999;
    }
}
@media screen and (max-width: 768px) {
    #RECRUITMENT .OccupationList{
        max-width: 100%;
        padding: 0;
        height: auto;
        border-collapse: collapse;
        border: solid 1px #999;
    }
    
    #RECRUITMENT .OccupationList dl.box{
        width: 100%;
        display: block;
        font-size: 17px;
        font-weight: 500;
    }
    #RECRUITMENT .OccupationList dl.last{
        border-bottom: none;
    }
    #RECRUITMENT .OccupationList dl dt.title{ 
        font-size: 17px;
        width: calc(100% - 30px);
        background-color: #c3c3c3;
        padding: 10px 15px;
        text-align: center;
        letter-spacing: 2px;
        vertical-align: top;
    }
    
    #RECRUITMENT .OccupationList dl dd.detail{ 
        font-size: 15px;
        width: calc(100% - 30px);
        padding: 15px;
        letter-spacing: 1px;
        margin: none;
    }
    #RECRUITMENT .OccupationList dl dd.smalls{
        width: calc(100% - 30px);
        padding: 15px;
    }
    
    #RECRUITMENT .OccupationList dl dd.detail .occupation{
        margin: 0;
        line-height: 30px;
    }
    #RECRUITMENT .OccupationList dl dd.detail .occupation dd{ 
        margin-left: 0;
        padding-bottom: 20px;
    }
    #RECRUITMENT .OccupationList dl dd.detail .occupation dd:last-child{ 
        margin-left: 0;
        padding-bottom: 0px;
    }
    
    #RECRUITMENT .OccupationList dl dd.detail .shop{
        margin: 0;
        line-height: 30px;
    }
    
    #RECRUITMENT .OccupationList dl dd.detail .Salary{
        margin: 0;
        line-height: 30px;
    }
    #RECRUITMENT .OccupationList dl dd.detail .Salary li{
        padding-bottom: 20px;
    }
    #RECRUITMENT .OccupationList dl dd.detail .Salary li:last-child{
        padding-bottom: 0px;
    }
}
.occupation-group{
    margin: 0 0 60px 0;
}
.salary1{
    margin: 0 0 60px 0;    
}
@media screen and (max-width: 768px) {
    .occupation-group{
        margin: 0 0 30px 0;
    }
    .salary1{
        margin: 0 0 30px 0;    
    } 
}

/* 募集要項*/


/* 採用の流れ　ここから */
#RECRUITMENT .flow{
    padding-top: 100px;
}
#RECRUITMENT .flow .flow_inner{
    padding: 70px 0;
}
#RECRUITMENT .flow .flow_inner dl{
   display: flex;
   align-items: flex-start;
   gap: 70px;
   margin: 0;
   padding-bottom: 40px;
}
#RECRUITMENT .flow .flow_inner dt{
    width: 80px;
    position: relative;
}
#RECRUITMENT .flow .flow_inner dt::after{
    position: absolute;
    content: "";
    background: url(https://image.global-center.co.jp/recruiting/recruitment/icon_arrow.png) no-repeat center center;
    background-size: contain;
    width: 20px;
    height: 14px;
    bottom: -40px;
    left: 29px;
}
#RECRUITMENT .flow .flow_inner dt.last::after{
    display: none;
}
#RECRUITMENT .flow .flow_inner dt img{
    width: 100%;
}
#RECRUITMENT .flow .flow_inner dd{
    width: calc(100% - 110px);
    display: flex;
    align-items: center;
    gap: 30px;
    padding-bottom: 40px;
    border-bottom: 1px solid #999;
    height: 70px;
}
#RECRUITMENT .flow .flow_inner dd.last{
    border-bottom: none;
}
#RECRUITMENT .flow .flow_inner dd p{
    margin: 0;
    font-family: 'Noto Serif JP', YakuHanJPs, 'Noto Sans Japanese', 'Hiragino Kaku Gothic Pro', MyYuGothicM, Meiryo, sans-serif;
    font-weight: 500;
}
#RECRUITMENT .flow .flow_inner dd .main{
    flex-basis: 40%;
    font-size: 22px;
    letter-spacing: 2px;
}
#RECRUITMENT .flow .flow_inner dd .sub{
    flex-basis: 60%;
    font-size: 16px;
    letter-spacing: 1px;
    line-height: 35px;
}
#RECRUITMENT .flow .come{
    font-family: 'Noto Serif JP', YakuHanJPs, 'Noto Sans Japanese', 'Hiragino Kaku Gothic Pro', MyYuGothicM, Meiryo, sans-serif;
    font-weight: 500;
    font-size: 16px;
    text-align: center;
    line-height: 35px;
    padding-bottom: 50px;
}
#RECRUITMENT .flow .flow_inner dd .mynavi-bnr{
    display:flex;
    flex-direction:column;
    align-items:left;
    padding-bottom: 40px;
}
#RECRUITMENT .flow .flow_inner dd .mynavibnr_wrap{
    display:flex;
    gap:10px;
    width:100%;
}
#RECRUITMENT .flow .flow_inner dd .mynavibnr_wrap a img{
    width:100%;
}
#RECRUITMENT .flow .flow_inner dd .mynavi-bnr a{
    padding:10px 0;
}
@media screen and (max-width: 768px) {
    #RECRUITMENT .flow{
        padding-top: 30px;
    }
    #RECRUITMENT .flow .flow_inner{
        padding: 20px 0 0;
    }
    #RECRUITMENT .flow .flow_inner dl{
       display: block;
       padding-bottom: 80px;
       position: relative;
    }
    #RECRUITMENT .flow .flow_inner dl.last{
        padding-bottom: 50px;
    }
    #RECRUITMENT .flow .flow_inner dl::after{
        position: absolute;
        content: "";
        background: url(https://image.global-center.co.jp/recruiting/recruitment/icon_arrow.png) no-repeat center center;
        background-size: contain;
        width: 20px;
        height: 14px;
        bottom: 30px;
        left: 47.5%;
    }
    #RECRUITMENT .flow .flow_inner dl.last::after{
        display: none;
    }

    #RECRUITMENT .flow .flow_inner dt{
        width: 100%;
        text-align: center;
    }
    #RECRUITMENT .flow .flow_inner dt img{
        width: 60px;
    }
    #RECRUITMENT .flow .flow_inner dt::after{
        display: none;
    }
    #RECRUITMENT .flow .flow_inner dt.last::after{
        display: none;
    }
    
    #RECRUITMENT .flow .flow_inner dd{
        width:100%;
        display: block;
        padding-bottom: 30px;
        height: auto;
    }
    #RECRUITMENT .flow .flow_inner dd.last{
        border-bottom: 1px solid #999;
    }
    #RECRUITMENT .flow .flow_inner dd p{
        margin: 0;
        font-weight: 500;
    }
    #RECRUITMENT .flow .flow_inner dd .main{
        font-size: 20px;
        letter-spacing: 2px;
        text-align: center;
        padding: 20px 0;
    }
    #RECRUITMENT .flow .flow_inner dd .sub{
        font-size: 15px;
        line-height: 33px;
    }
    #RECRUITMENT .flow .come{
        font-weight: 500;
        font-size: 15px;
        text-align: left;
        line-height: 33px;
        padding-bottom: 50px;
    }
    #RECRUITMENT .flow .flow_inner dd .mynavi-bnr{
        align-items:center;
        padding-bottom: 0;
    }
    #RECRUITMENT .flow .flow_inner dd .mynavi-bnr a{
        padding:20px 0 0;
    }
    #RECRUITMENT .flow .flow_inner dd .mynavibnr_wrap{
        gap:5px;
        width:100%;
        align-items: center;
        justify-content: center;
    }
    #RECRUITMENT .flow .flow_inner dd .mynavibnr_wrap a img{
        width:100%;
    }

}
/* 採用の流れ　ここまで */