@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 { text-align: center; margin: 0 auto; width: 100%; max-width: 428px; background-repeat: no-repeat; background-position: center bottom; background-size: contain; animation: image_anime 10s step-start infinite; /* 10秒のアニメーションを繰り返す */ }
@keyframes image_anime {
  0% {
    background-image: url('/sp/employer/images/emp_mainimg1.png?v=202205171506'); /* 背景画像1を指定 */
  }
  50% {
    background-image: url('/sp/employer/images/emp_mainimg2.png?v=202205171519'); /* 背景画像2を指定 */
  }
  100% {
    background-image: url('/sp/employer/images/emp_mainimg1.png?v=202205171506'); /* 背景画像1を指定 */
  }
}
#mv .bg:after { content: ''; display: block; padding-top: calc(1000 / 2200 * 100%); /* ％＝画像の高÷画像の幅 */ }
#mv h1 { font-size: 12px; padding-top: 10px; font-weight: bold; }
#mv h1:after { content: ''; display: block; margin: 0 auto; width: 222px; height: 12px; background-image: url('/sp/employer/images/img_title.png'); background-repeat: no-repeat; background-size: contain; }
#mv h2 { font-size: 16px; font-family: 'M PLUS 1p', sans-serif; line-height: 1.333; padding-top: 10px; padding-bottom: 10px; }
#mv h2 .em { font-size: 20px; margin-left: 2px; }

#contents { padding: 22px 0 0; background: url('/sp/employer/images/bg_main_sp.jpg') no-repeat center top; background-size: 100% auto; }
.conversion { text-align: center; margin: 0 5px 22px; padding: 120px 25px 30px; background-color: #27d66f; border-radius: 10px; }
h2.title, h3.title { font-weight: bold; text-align: center; }
.conversion h2.title { font-size: 20px; line-height: 1.333; position: relative; }
.conversion h2.title:before { content: ''; position: absolute; top: -113px; left: calc(50% - 50px); width: 100px; height: 100px; background: url('/employer/images/img_apply.png') no-repeat center; background-size: 100% auto; }
.conversion h3.title { font-size: 16px; margin-top: 11px; }
.conversion p.text { text-align: left; margin: 20px 0 22px; }
.apply { display: inline-block; width: 100%; max-width: 366px; background-color: #fff; border-radius: 8px; }
.apply .mod_btn { font-size: 18px; padding: 15px 0; width: 100%; }

#reason { padding-top: 44px; background-color: #fff; }
#reason h2.title { font-weight: normal; font-size: 20px; }
#reason h2.title .slash { position: relative; display: inline-block; padding: 0 33px; }
#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: 16px; }
#reason h3.title .em { font-size: 20px; line-height: 1; letter-spacing: 2px; margin-left: 5px; }
#reason ul { margin: 20px auto 0; width: 320px; }
#reason li { margin: 5px 0; background-repeat: no-repeat; background-position: 0 0; background-size: contain; border-radius: 8px; }
#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 li:before { content: ''; display: block; padding-top: calc(400 / 712 * 100%); /* ％＝画像の高÷画像の幅 */ }
#reason .odd { background-color: #4d8dc6; }
#reason .even { background-color: #3b9cd8; }
#reason h4, #reason h5 { font-weight: bold; font-size: 16px; text-align: center; }
#reason h4 { color: #000; line-height: 1.333; padding-top: 15px; }
#reason h5 { color: #fff; padding-top: 10px; padding-bottom: 20px; }
#reason li:nth-of-type(4) h4, #reason li:nth-of-type(5) h4 { padding-top: 5px; }

#joboffer { margin-top: 44px; padding-bottom: 15px; background-color: #e6e8ec; }
#joboffer h2 { color: #fff; font-size: 22px; text-align: center; line-height: 1.333; padding: 9px 0; background-color: #FB49AE; }
#joboffer .in { padding: 20px 10px; }
#joboffer ul { margin-right: 20px; margin-left: 20px; }
#joboffer .lead1 { margin-bottom: 15px; }
#joboffer .lead2 li + li { margin-top: 10px; }
#joboffer h3 { color: #013b96; font-weight: bold; font-size: 18px; margin-top: 25px; padding: 13px 15px; background-color: #fff; border-radius: 8px; }
#jobOfferForm { margin-top: 15px; padding: 20px 15px; 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: 3px 0 3px 15px; width: 100%; background-color: #ff48af; border-radius: 8px; }
legend span { color: #fff; font-weight: bold; font-size: 16px; }
.job_offer { font-size: 16px; margin-bottom: 30px; }
#jobOfferForm table { width: 100%; border-bottom: 1px solid #ccc; }
#jobOfferForm th { font-weight: bold; width: 100%; background-color: #ECE2C8; }
#jobOfferForm td { padding-top: 5px; padding-bottom: 15px; }
#jobOfferForm th, #jobOfferForm td { display: block; border-top: 1px solid #ccc; }
#jobOfferForm th label { position: relative; display: block; padding: 3px 10px 3px 10px; border-top: 1px solid #fff; border-bottom: 1px solid #fff; }
#jobOfferForm th .required { color: #F635B0; font-weight: bold; font-size: 12px; text-align: center; position: absolute; top: 5px; right: 10px; padding: 2px; width: 5em; background-color: #fff; border-radius: 4px; }
input.text, textarea.textarea { padding: 8px 7px; width: 100%; border: 1px solid #0A3F94; border-radius: 4px; box-shadow: rgb(0 0 0 / 20%) 1px 1px 3px 0px inset; }
select.select { padding: 8px 50px 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; }
#fAddress input { margin-top: 5px; }
#fWorkType td .required { display: inline-block; padding-top: 6px; }

#law { color: #0000ee; text-decoration: underline; }
.law { margin: 15px 10px 0; }
.law dt { font-weight: bold; }
.law dd { text-indent: -2em; margin-top: 10px; padding-left: 2em; }

.action { font-size: 16px; margin: 40px 0 35px; text-align: center; }
#submitBtn { font-size: 18px; display: block; margin: 20px auto 0; padding: 15px 0; width: 100%; max-width: 366px; }


#container { padding: 15px 15px 30px; }
#thanks { padding: 20px 0 30px; border-radius: 10px; background: #fff; }
#thanks h1, #thanks h2, #thanks h3 { font-weight: bold; text-align: center; }
#thanks h2, #thanks h3 { color: #013B96; font-size: 16px; }
#thanks h1 { font-size: 18px; margin-bottom: 15px; }
#thanks ul { margin: 0 15px; }
#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; }
#thanks h4 { font-weight: bold; }
#thanks li.mail h4 { margin-bottom: 3px; }
#thanks li.mail a { font-weight: bold; }
#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 a { color: #ff48af; font-family: verdana,arial,helvetica,sans-serif; font-weight: bold; font-size: 18px; display: block; }

#backHome { margin-top: 15px; text-align: center; }
#backHome a { font-size: 16px; padding: 10px 33px; }