@charset "utf-8";
/* CSS Document */

#employment {}
#employment .left-column { position: relative; z-index: 0}
#employment .left-column .imgWrap{ position: relative; z-index: 1; padding-left:50px}
#employment .left-column .blueCon{position:absolute;bottom:-20%;right:calc( 100% - 50% );width:100%;height:400px;background-color:var(--thm-primary); z-index: 0; padding:22% 0  0 50% }
#employment .right-column p { margin:0}
#employment .right-column .txtSmall { font-weight: 500; color:#999; letter-spacing: 0}
#employment .right-column  .txtBig{ color:#000; font-size:2.5em; line-height:1.3; font-weight:700;}
#employment .right-column .btm_txtCon { padding-right:15vh; text-align: justify}
#employment .right-column .btm_txtCon p { color:#202020;}
#employment .content_ideal {padding:380px 0 0; position: relative}
#employment .content_ideal .bigGray_txt {color:#F8F8F8; font-size:9em; font-weight: 800; position: absolute; right:0; top:90px; z-index: 0}
#employment .content_ideal .ideal_talentUl { display: flex; justify-content: space-between; padding:0 5vw; position: relative; z-index: 1}
#employment .content_ideal .ideal_talentUl li{  text-align: center; width:25%;}
#employment .content_ideal .ideal_talentUl li .ico { width:110px; height:110px; margin:0 auto 30px auto; display: block; background-size: contain}
#employment .content_ideal .ideal_talentUl li .ico.ico_idealTalent01 { background-image: url("../images/employment/ico_idealTalent01.png")}
#employment .content_ideal .ideal_talentUl li .ico.ico_idealTalent02 { background-image: url("../images/employment/ico_idealTalent02.png")}
#employment .content_ideal .ideal_talentUl li .ico.ico_idealTalent03 { background-image: url("../images/employment/ico_idealTalent03.png")}
#employment .content_ideal .ideal_talentUl li .ico.ico_idealTalent04 { background-image: url("../images/employment/ico_idealTalent04.png")}
#employment .content_ideal .ideal_talentUl li .txt{ color:#000; font-weight: 600; font-size: 1.2em;}
#employment .content_ideal .ideal_talentUl li .txtEng{ color:#000; font-weight:500; font-size: 1em; display: block; letter-spacing: normal}

#rec_guide  {background: #f3f3f3}
#rec_guide { background-color: #f3f3f3; }
#rec_guide .rec_guide_iInner { display: flex; justify-content:flex-start; align-items: center;}
#rec_guide .rec_guide_iInner .left { width:25%;}
#rec_guide .rec_guide_iInner .left .rgi_icon { width:115px; height:115px; margin:0  auto; display: block; background-size: contain}
#rec_guide .rec_guide_iInner .left .rgi_icon.icon01 { background-image: url("../images/employment/rgi_icon01.png")}
#rec_guide .rec_guide_iInner .left .rgi_icon.icon02 { background-image: url("../images/employment/rgi_icon02.png")}
#rec_guide .rec_guide_iInner .left .rgi_icon.icon03 { background-image: url("../images/employment/rgi_icon03.png")}
#rec_guide .rec_guide_iInner .left .rgi_icon.icon04 { background-image: url("../images/employment/rgi_icon04.png")}
#rec_guide .rec_guide_iInner .left .rgi_icon.icon05 { background-image: url("../images/employment/rgi_icon05.png")}
#rec_guide .rec_guide_iInner .right {  width:75%;  border-bottom:dotted 2px #ccc; padding: 70px 5vw}
#rec_guide .rec_guide_iInner .right h3 {font-weight: 600; font-size: 1.2em;}
#rec_guide .rec_guide_iInner .right h3 .num { display: inline-block; margin-right:10px;}
#rec_guide .rec_guide_iInner .right p { margin-top:20px; font-size:1em; color:#202020}
#rec_guide  .whiteBox { padding:70px 4vw; background-color: rgba(0,0,0,.02); }
#rec_guide  .whiteBox h3{ font-weight: 500; font-size: 1.4em; margin-left: .5vw;}
#rec_guide  .whiteBox ul {}
#rec_guide  .whiteBox ul li { padding-left:30px; position: relative; line-height: 1.5; margin-bottom:7px; color:#202020}
#rec_guide  .whiteBox ul li:last-child { margin-bottom:0;}
#rec_guide  .whiteBox ul li:before { content:''; width:5px; height:1px; background: #202020; top:10px; left:0; position: absolute }

@media  (min-width: 3840px) {
    #employment .left-column .blueCon{ width:200%; padding-left:150%}
    
}
@media  (min-width: 2400px)  and  (max-width: 3839px){
   #employment .left-column .blueCon{ width:150%; padding-left:100%}
    
}


@media  (min-width: 992px) and  (max-width: 1571px) and (orientation: landscape) {
     #employment .left-column { padding-right:4vw}
    #employment .left-column .blueCon  { bottom:-10%}
     #employment .right-column { padding-left:3vw; margin-left:-1vw}
    #employment .right-column .txtBig { font-size:2em; text-align: justify}
    #employment .right-column  .txtBig br{ display: none;}
    #employment .right-column .btm_txtCon { padding:0}
    #employment .content_ideal { padding:250px 0 100px}
}        
@media (max-width: 991px) {
    #employment .right-column { margin-top:30px;}
    #employment .left-column .blueCon { bottom:-15%; height:300px}
    #employment .right-column .txtSmall { font-size:.9em}
    #employment .right-column .txtBig{ font-size:1.5em; text-align: justify}
    #employment .right-column .txtBig br{ display: none;}
    #employment .right-column .btm_txtCon { padding:0; }
    #employment .right-column .btm_txtCon p { font-size: .9em; line-height: 1.5;}
    #employment .content_ideal { padding:160px 0 0}
    #employment .content_ideal .bigGray_txt { width:200%; top:-10px; left:auto; left:50%; margin-left:-100%; font-size: 5em; text-align: right;}
    #employment .content_ideal .ideal_talentUl{ padding:0; margin:-110px 0 0}
    #employment .content_ideal .ideal_talentUl li  { line-height: 1.1}
    #employment .content_ideal .ideal_talentUl li .ico  { width:100%; height:60px; background-repeat: no-repeat; background-position: center; margin:0 auto 10px auto}
    #employment .content_ideal .ideal_talentUl li .txt { width:100%; font-size:.85em; line-height: 1.2; white-space:nowrap;  overflow: hidden; text-overflow:ellipsis; ; display: block}
    #employment .content_ideal .ideal_talentUl li .txtEng{ font-size: .7em; line-height: 1.1; display: block; margin-top:5px;}

    #rec_guide .rec_guide_iInner { flex-direction:column; align-items:baseline; padding:25px 0 0}
    #rec_guide .rec_guide_iInner .left { width:100%;}
    #rec_guide .rec_guide_iInner .left .rgi_icon { width:60px; height:60px; margin:0 0 -25px 10px;}
    #rec_guide .rec_guide_iInner .right { width:auto; padding:0 0 35px;}
    #rec_guide .rec_guide_iInner .right h3 { font-size: 1em; text-align: right}
    #rec_guide .rec_guide_iInner .right p {margin:15px 0 0; font-size: .9em; line-height: 1.5; text-align: justify}
    #rec_guide .whiteBox { padding:30px}
    #rec_guide .whiteBox h3 { font-size:1.1em;}
    #rec_guide .whiteBox ul li { font-size:.9em; padding-left:20px}
    #rec_guide .whiteBox ul li:before { width:5px; top:12px;}
    
}

@media  (min-width: 768px) and (max-width: 991px) {
    #employment .right-column { margin-top:40px}
    #employment .left-column .imgWrap { width:60%; float: right; padding-right:5%}
    #employment .left-column .blueCon { right:calc( 100% - 85% )}
    #rec_guide .rec_guide_iInner .right { width:100%}
}