@charset "UTF-8";


@font-face {
  font-family: 'M PLUS 1p';
  font-weight: 700;
  src: url('../../fonts/MPLUS1p-Bold.ttf') format('truetype');
}


/* 登録画面 ----------------------------------*/

#mv { background-color: #1ed57a; }
#mv .bg { margin: 0 auto; width: 1088px; height: 423px; background-repeat: no-repeat; background-position: center 133px; background-size: 1088px 290px; animation: image_anime 10s step-start infinite; /* 10秒のアニメーションを繰り返す */ }
@keyframes image_anime {
  0% {
    background-image: url('/employer/images/emp_mainimg1.png?v=202106131625'); /* 背景画像1を指定 */
  }
  50% {
    background-image: url('/employer/images/emp_mainimg2.png?v=202106131625'); /* 背景画像2を指定 */
  }
  100% {
    background-image: url('/employer/images/emp_mainimg1.png?v=202106131625'); /* 背景画像1を指定 */
  }
}
#mv h2 { font-size: 28px; font-family: 'M PLUS 1p', sans-serif; text-align: center; line-height: 1.333; padding-top: 25px; }
#mv h2 .em { font-size: 38px; margin-left: 5px; }

.conversion { text-align: center; margin-top: 44px; padding: 150px 0 35px; background-color: #27d66f; border-radius: 10px; }
h2.title, h3.title { font-weight: bold; text-align: center; }
.conversion h2.title { font-size: 30px; position: relative; }
.conversion h2.title:before { content: ''; position: absolute; top: -140px; left: calc(50% - 60px); width: 120px; height: 120px; background: url('/employer/images/img_apply.png') no-repeat center; background-size: 100% auto; }
.conversion h3.title { font-size: 22px; }
.conversion p.text { font-size: 16px; margin: 20px 0 22px; }
.apply { display: inline-block; background-color: #fff; border-radius: 8px; }
.apply .mod_btn { font-size: 20px; padding: 17px 0; width: 466px; }

#reason { margin-top: 88px; }
#reason h2.title { font-weight: normal; font-size: 28px; }
#reason h2.title .slash { position: relative; display: inline-block; padding: 0 40px; }
#reason h2.title .slash:before, #reason h2.title .slash:after { content: ''; position: absolute; bottom: 4px; display: block; width: 1px; height: 90%; background: #000; }
#reason h2.title .slash:before { left: 8px; transform: rotate(-30deg); }
#reason h2.title .slash:after { right: 8px; transform: rotate(30deg); }
#reason h3.title { font-size: 24px; }
#reason h3.title .em { font-size: 32px; line-height: 1; letter-spacing: 2px; margin-left: 5px; }
#reason ul { margin-top: 33px; display: flex; flex-flow: wrap; justify-content: center; }
#reason li { color: #fff; margin: 5px; padding: 20px 20px 25px; width: 356px; background-repeat: no-repeat; background-position: 0 0; border-radius: 10px; }
#reason li:nth-of-type(1) { margin-left: 0; }
#reason li:nth-of-type(3) { margin-right: 0; }
#reason li:nth-of-type(4), #reason li:nth-of-type(5) { width: 376px; }
#reason li:nth-of-type(1), #reason li:nth-of-type(2), #reason li:nth-of-type(3) { background-size: 356px 200px; }
#reason li:nth-of-type(4), #reason li:nth-of-type(5) { background-size: 376px 200px; }
#reason li:nth-of-type(1) { background-image: url('/employer/images/reason_1.jpg'); }
#reason li:nth-of-type(2) { background-image: url('/employer/images/reason_2.jpg'); }
#reason li:nth-of-type(3) { background-image: url('/employer/images/reason_3.jpg'); }
#reason li:nth-of-type(4) { background-image: url('/employer/images/reason_4.jpg'); }
#reason li:nth-of-type(5) { background-image: url('/employer/images/reason_5.jpg'); }
#reason .odd { background-color: #4d8dc6; }
#reason .even { background-color: #3b9cd8; }
#reason h4 { color: #000; font-weight: bold; font-size: 24px; line-height: 1.333; margin-top: 200px; }
#reason h5 { font-weight: bold; font-size: 18px; margin: 20px 0 15px; }

#joboffer { margin-top: 88px; padding-bottom: 44px; background-color: #e6e8ec; }
#joboffer h2 { color: #fff; font-size: 28px; padding: 11px 0; background-color: #FB49AE; }
#joboffer .in { display: block; margin: 0 auto; width: 1088px; }
#joboffer .lead { font-size: 18px; margin: 22px 0 11px; }
#joboffer h3 { color: #013b96; font-weight: bold; font-size: 22px; margin-top: 33px; padding: 15px; background-color: #fff; border-radius: 8px; }
#jobOfferForm { margin-top: 30px; padding: 30px; background-color: #fff; border-top: 4px solid #013b96; border-bottom-right-radius: 12px; border-bottom-left-radius: 12px; box-shadow: 0 0 3px #ccc; }
legend { display: block; margin-bottom: 15px; padding: 5px 0 5px 15px; width: 100%; background-color: #ff48af; border-radius: 8px; }
legend span { color: #fff; font-weight: bold; font-size: 18px; }
.job_offer { font-size: 16px; margin-bottom: 30px; }
#jobOfferForm table { width: 100%; border-bottom: 1px solid #ccc; }
#jobOfferForm th { font-weight: bold; width: 282px; min-height: 100%; height: 1px; background-color: #ECE2C8; }
#jobOfferForm td { padding-top: 5px; padding-bottom: 5px; }
#jobOfferForm th, #jobOfferForm td { border-top: 1px solid #ccc; }
#jobOfferForm th label, #jobOfferForm td { padding-right: 20px; padding-left: 20px; }
#jobOfferForm th label { position: relative; display: block; min-height: 100%; padding-top: 10px; padding-bottom: 10px; border-top: 1px solid #fff; border-bottom: 1px solid #fff; cursor: default; }
#jobOfferForm th .required { color: #F635B0; font-weight: bold; font-size: 14px; text-align: center; position: absolute; right: 10px; padding: 2px; width: 5em; background-color: #fff; border-radius: 4px; }
input.text, textarea.textarea { padding: 8px 15px; border: 1px solid #0A3F94; border-radius: 4px; box-shadow: rgb(0 0 0 / 20%) 1px 1px 3px 0px inset; }
select.select { padding: 8px 45px 8px 15px; background: none; border: none; cursor: pointer; }
input.checkbox { display: none; }
input.checkbox:not(#agree) + label { margin-right: 50px; }
input.checkbox + label:before { vertical-align: top; content: ''; position: relative; display: inline-block; margin-right: 10px; width: 26px; height: 26px; background-image: url('/employer/images/input.png'); background-repeat: no-repeat; background-position: 0 0; background-size: 26px auto; }
input.checkbox:checked + label:before { background-position: 0 -26px; }
#fHpName input, #fHpNameKana input, #fMail input, #fSubject input, #fNote textarea { width: 640px; }
#fAddress input { width: 459px; }
#fTel input, #fName input, #fPost input { width: 320px; }
#fWorkType td { padding-bottom: 12px; }
#fNote td { padding-bottom: 15px; }
#fWorkType td .required { display: inline-block; padding-top: 7px; }

.gang { margin: 0 auto; padding: 10px; width: 676px; background: #fefefe; border: 1px solid #c3c3c3; border-radius: 10px; box-shadow: 1.5px 1.5px #f2f2f2; }
#law { color: #0000ee; text-decoration: underline; cursor: pointer; }
.law { margin: 15px 20px 0; }
.law dt { font-weight: bold; }
.law dd { text-indent: -2em; margin-top: 10px; padding-left: 2em; }

.action { font-size: 16px; margin: 40px 0 50px; text-align: center; }
.action span { display: block; margin-top: 25px }
#submitBtn { font-size: 20px; display: block; margin: 10px auto 0; padding: 17px 0; width: 366px; }


/* 登録完了 ----------------------------------*/

#thanks { margin: 5px 0 55px; padding: 33px 99px 44px; border-radius: 10px; background: #fff; }
#thanks h2, #thanks h3 { color: #013B96; font-size: 22px; text-align: center; }
#thanks li { margin-top: 20px; }
#thanks li.msg { padding-left: 33px; background: url('/employer/images/zacked_together_check.png') no-repeat 0 0; background-size: 22px 22px; }
#thanks span.time { color: #009900; font-weight: bold; font-size: 16px; }
#thanks span.tel { color: #ff48af; font-family: verdana,arial,helvetica,sans-serif; font-weight: bold; font-size: 22px; }
#thanks h4 { font-weight: bold; }
#thanks li.mail h4 { margin-bottom: 5px; }
#thanks li.mail a { font-weight: bold; font-size: 16px; }
#thanks li.mail a:before { vertical-align: middle; content: ''; display: inline-block; margin: -4px 8px 0 0; width: 18px; height: 18px; background-image: url('/employer/images/page_top.png'); background-size: contain; }
#thanks li.tel span.time { margin-left: 15px; }

#backHome { padding-bottom: 88px; text-align: center; }
#backHome a { font-size: 20px; padding: 10px 50px; }