@charset "UTF-8";

.recruitBox {
    position: relative;
    background: #fff;
}
.recruitBox::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 20.166%;
    display: block;
    background: #f4f7f7;
    width: 100vw;
}
.recruitBox::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    border-top: solid 2px #003b77;
}
.recruitBox__enTtl {
    position: absolute;
    top: -.8em;
    right: 0;
    color: #003b77;
    line-height: 1;
    margin: 0;
}
.recruitBox__ttl {
    color: #003b77;
}


@media screen and (min-width: 768px) {

   .m-lb01 {
       margin-bottom: 35px;
   }

   .m-lead {
       margin-bottom: 205px;
   }

   .recruitBox {
       -webkit-box-shadow: -5px 5px 10px rgba(204,204,204,.17);
               box-shadow: -5px 5px 10px rgba(204,204,204,.17);
       padding: 65px;
       margin: 100px 0;
   }
   .recruitBox::before {
       top: -100px;
       bottom: -100px;
   }
   .recruitBox::after {
        width: 313px;
   }
   .recruitBox__ttl {
       margin-bottom: 35px;
   }

}

@media screen and (max-width: 767px) {

    .m-lb01 {
        margin-bottom: 25px;
    }

    .m-lead {
        margin-bottom: 110px;
    }
 
    .recruitBox {
        -webkit-box-shadow: -3px 3px 6px rgba(204,204,204,.17);
                box-shadow: -3px 3px 6px rgba(204,204,204,.17);
        padding: 35px 6%;
        margin: 50px 0;
    }
    .recruitBox::before {
        top: -50px;
        bottom: -50px;
    }
    .recruitBox::after {
         width: 36%;
    }
    .recruitBox__ttl {
        margin-bottom: 20px;
    }

}