html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video,
select {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
body {
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
a {
  text-decoration: none;
}
button {
  border: none;
  background: none;
}
select {
  -webkit-appearance: button;
  appearance: button;
}
.header {
  padding: 0 1%;
  background: #fff;
}
.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  @media screen and (min-width: 460px) {
    height: 3.5rem;
  }
}
.header-logo {
  height: 9vw;
  min-height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 2.667vw;
  @media screen and (min-width: 460px) {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 0.5rem;
  }
}
.header-logo img {
  width: auto;
  height: 52%;
  @media screen and (min-width: 460px) {
    width: auto;
    height: 1.4rem;
  }
}
.header .txt-permissionnumber {
  font-size: 3vw;
  @media screen and (min-width: 460px) {
    font-size: 0.8rem;
  }
}
.header.form {
  border-bottom: 2px solid #33cccc;
}
.footer {
  background: #f8f8f8;
}
.footer-privacy {
  padding: 4% 4%;
  display: flex;
  justify-content: center;
}
.footer-privacy .p-mark {
  width: 18%;
  height: intrinsic;
  margin-right: 2%;
  @media screen and (min-width: 460px) {
    width: 18%;
    height: 18%;
    margin-right: 2%;
  }
}
.footer-privacy .declaration {
  font-size: 3vw;
  line-height: 1.6;
  @media screen and (min-width: 460px) {
    font-size: 0.85rem;
  }
}
.footer-privacy .declaration span {
  font-weight: bold;
}
.footer-link {
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid #cccccc;
}
.footer-link li {
  width: 50%;
  padding: 3% 0;
  box-sizing: border-box;
  border-bottom: 1px solid #cccccc;
  text-align: center;
}
.footer-link li:nth-child(odd) {
  border-right: 1px solid #ccc;
}
.footer-link li:nth-child(odd):last-child {
  width: 100%;
}
.footer-link li a {
  font-size: 3.2vw;
  color: #007acc;
  @media screen and (min-width: 460px) {
    font-size: 1rem;
    color: #007acc;
  }
}
.footer .copyright {
  padding: 1%;
  background: #353231;
  color: #fff;
  text-align: center;
  font-size: 3vw;
  @media screen and (min-width: 460px) {
    font-size: 1rem;
  }
}
body {
  min-height: 100%;
  position: relative;
  background-color: #fff;
  color: #333;
  font-family: "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo,
    "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", Verdana, Geneva, Arial,
    Helvetica, sans-serif;
  font-size: 3.5vw;
  line-height: 1.5;
}
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  font-size: 0;
  clear: both;
  visibility: hidden;
}
.clearfix {
  display: inline-block;
}
a {
  color: #333;
}
.uppercase {
  text-transform: uppercase;
}
.panSlide {
  width: 100%;
  background-color: #eee;
  overflow-y: auto;
}
.panSlide ul {
  content: "";
  display: table;
  clear: both;
  box-sizing: border-box;
  padding: 0 3%;
  overflow-y: scroll;
}
.panSlide ul li {
  display: table-cell;
  white-space: nowrap;
  font-size: 7px;
  height: 25px;
  line-height: 25px;
}
.panSlide ul li a {
  color: #2451d2;
  display: inline-flex;
}
.panSlide li a:after {
  content: "";
  display: inline-block;
  background: url(/img/sp/common/img-pan-arrow.png);
  background-size: auto auto;
  background-size: 100%;
  margin: 0 10px;
  width: 8px;
  height: 25px;
}
.hidden {
  display: none;
}
.lp_step_question_popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 1000;
}
.lp_step_question_popup .modal {
  position: relative;
  top: 30%;
  width: 80%;
  padding: 20px;
  margin: 0 auto;
  padding: 3rem 1.5rem;
  border-radius: 4px;
  background-color: #fff;
  text-align: center;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
.lp_step_question_popup .modal .popup_title {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 1.5rem;
  color: #ff6600;
}
.lp_step_question_popup .modal .close-button {
  display: block;
  font-size: 1rem;
  width: 230px;
  margin: 14px auto;
  padding: 1rem;
  color: white;
  text-align: center;
  border-radius: 10px;
  box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.3);
}
.lp_step_question_popup .modal .close-button.first-button {
  background-color: #ff6600;
}
.lp_step_question_popup .modal .close-button.second-button {
  background-color: #3dc308;
}
.change-sitepolicy {
  background-color: #d2f4f4;
  padding: 2.667vw;
}
.change-sitepolicy .change-sitepolicy-container {
  width: 100%;
  display: flex;
}
.change-sitepolicy .change-sitepolicy-icon {
  margin-right: 2.667vw;
}
.change-sitepolicy .change-sitepolicy-icon img {
  width: 5.333vw;
  height: 5.333vw;
  fill: #3cc;
}
.change-sitepolicy .change-sitepolicy-content {
  line-height: 1.4;
}
.change-sitepolicy .change-sitepolicy-title {
  font-weight: bold;
  font-size: 3.2vw;
}
.change-sitepolicy .change-sitepolicy-description {
  font-size: 3.2vw;
}
.change-sitepolicy .change-sitepolicy-description a {
  text-decoration: underline;
  color: #3cc;
}
.modal-question {
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: 0.5s;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
}
.modal-question .inner {
  width: 90%;
  padding: 8%;
  background-color: #fff;
  border-radius: 7px;
  box-shadow: 5px 5px 25px #444;
  box-sizing: border-box;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}
.modal-question .inner .button {
  padding: 10px 15px;
  box-sizing: border-box;
  position: absolute;
  top: -45px;
  right: 0;
  color: #fff;
  font-size: 0.95em;
  border: 0;
  border-radius: 4px;
  outline: 0;
  background-color: #333333;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.modal-question .inner img {
  display: block;
  max-width: 95%;
  margin: 0 auto 4%;
}
.modal-question .inner .modal-txt {
  margin: 0 0 4% 0;
  text-align: center;
  line-height: 1.5;
  font-size: 3.6vw;
}
.modal-question .inner .modal-txt span {
  color: #f66876;
}
.modal-question .inner .question-link {
  display: block;
  margin: 0 auto;
  border-radius: 5px;
  padding: 20px 40px;
  text-align: center;
  color: #fff;
  font-weight: bold;
  font-size: 4.8vw;
  line-height: 1;
  background: #f8a84a;
  box-shadow: 0 2px 0px #c07a27;
  transition: 0.3s;
  position: relative;
}
.modal-question .inner .question-link:after {
  content: "";
  display: block;
  border-left: 3px solid #fff;
  border-bottom: 3px solid #fff;
  transform: translateY(-50%) rotate(-135deg);
  position: absolute;
  top: 50%;
  right: 24px;
  width: 6px;
  height: 6px;
}
.modal-question .inner.modal-email-form-inner {
  padding: 0;
  max-width: 213.333vw;
  height: 60%;
}
.modal-question .inner.modal-email-form-inner .email-form-container {
  height: 100%;
  overflow: scroll;
  border-radius: 2.667vw;
}
.modal-question
  .inner.modal-email-form-inner
  .email-form-container
  .modal-email-form {
  background: #f2f1ec;
  padding: 8vw 0;
}
.modal-question
  .inner.modal-email-form-inner
  .email-form-container
  .modal-email-form.modal-gs-login-form {
  border-radius: 2.667vw;
}
.modal-question .inner.modal-email-form-inner.modal-gs-login-inner {
  height: auto;
}
.modal-question .bg-overlay {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.45);
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}
.is-show {
  opacity: 1;
  visibility: visible;
}
.display-lock {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
}
body {
  background: white;
  color: #333333;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ",
    Meiryo, "ＭＳ Ｐゴシック", Verdana, Geneva, Arial, Helvetica;
  font-size: 12px;
  height: 100%;
  line-height: 1.5;
  min-width: 320px;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  @media screen and (min-width: 460px) {
    width: 460px;
    margin: auto;
    font-size: 1rem;
  }
}
body.fixArea {
  padding: 0 0 80px 0;
}
body.fixArea.plural {
  padding: 0 0 150px 0;
}
body.fixArea.Min {
  padding: 0 0 80px 0;
}
img {
  max-width: 100%;
}
img.fit {
  width: 100%;
}
input[type="text"],
input[type="tel"] {
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance: none;
  background: #fff;
  border: 1px solid #cccccc;
  padding: 5px;
  width: 100%;
}
textarea {
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance: none;
  background: #fff;
  border: 1px solid #cccccc;
  padding: 5px;
  width: 100%;
}
input[type="text"],
input[type="tel"] {
  height: 38px;
}
.form-select {
  position: relative;
  display: inline-block;
}
.form-select.col1 {
  display: block;
}
.form-select:after {
  content: "";
  display: block;
  border-left: 2px solid #999;
  border-bottom: 2px solid #999;
  transform: rotate(-45deg);
  position: absolute;
  width: 6px;
  height: 6px;
  top: 0;
  bottom: 0;
  right: 10px;
  z-index: 3;
  margin: auto;
}
select {
  font-size: 12px;
  height: 40px;
  padding: 4px;
  width: 100%;
  background: #fff;
  border: 1px solid #cccccc;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  outline: none;
}
textarea {
  height: 105px;
  resize: none;
}
button {
  background: #0066cc;
  color: #fff;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ",
    Meiryo, "ＭＳ Ｐゴシック", Verdana, Geneva, Arial, Helvetica;
  font-size: 12px;
  font-weight: bold;
}
button:disabled {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
  opacity: 0.5;
  cursor: default;
}
button.btn.submit:disabled {
  pointer-events: none;
}
table {
  margin-bottom: 15px;
  width: 100%;
}
table th,
table td {
  border: 1px solid #cccccc;
  padding: 8px 10px;
}
table th {
  background: #eee;
  color: #33cccc;
  font-weight: bold;
  width: 75px;
  vertical-align: top;
}
.red {
  color: #ff0000;
}
.rd {
  color: #ff6666;
}
.f14 {
  font-size: 14px;
}
.f16 {
  font-size: 16px;
}
.mt10 {
  margin-top: 10px;
}
.mt15 {
  margin-top: 15px;
}
.mt20 {
  margin-top: 20px;
}
.mt30 {
  margin-top: 30px;
}
.mt20 {
  margin-top: 20px;
}
.mb10 {
  margin-bottom: 10px;
}
.mb15 {
  margin-bottom: 15px;
}
.mb20 {
  margin-bottom: 20px;
}
.mb30 {
  margin-bottom: 30px;
}
.ml10 {
  margin-left: 10px;
}
.mr15 {
  margin-right: 15px;
}
.fl {
  float: left;
}
.tc {
  text-align: center;
}
.p0 {
  padding: 0px;
}
.center {
  text-align: center;
}
.tag {
  clear: both;
  margin: 0 -5px -5px;
  position: relative;
}
.tag table {
  border-collapse: separate;
  border-spacing: 5px;
}
.tag table td {
  border: 1px solid #eee;
  color: #ccc;
  empty-cells: hide;
  font-size: 10px;
  padding: 4px 0;
  text-align: center;
}
.tag table td.on {
  background: #ff9a03;
  border: 0;
  color: #fff;
}
.btn {
  font-size: 4vw;
  font-weight: bold;
  margin: 0 auto;
  width: auto;
  @media screen and (min-width: 460px) {
    font-size: 1rem;
    font-weight: bold;
    margin: 0 auto;
    width: auto;
  }
}
.btn:not(.img) {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: #3777b6;
  background: -webkit-gradient(linear, 0 0, 0 bottom, from(#3c88d3), to(#369));
  background: -webkit-linear-gradient(#3c88d3, #369);
  background: -moz-linear-gradient(#3c88d3, #369);
  background: -ms-linear-gradient(#3c88d3, #369);
  background: -o-linear-gradient(#3c88d3, #369);
  background: linear-gradient(#3c88d3, #369);
  border: 1px solid #3366cc;
}
.btn a {
  color: #fff;
  display: block;
  padding: 10px 8px;
}
.contactArea:last-child {
  margin-top: 30px;
}
.content .contactArea {
  margin-bottom: 25px;
}
.contactArea .btn.entry {
  margin: 0 auto 10px;
}
.btn a.arrow {
  background: url(/img/sp/common/arrow-btn-blue.png) no-repeat right center;
  -moz-background-size: 46px 36px;
  -o-background-size: 46px 36px;
  -webkit-background-size: 46px 36px;
  background-size: 46px 36px;
  display: block;
  font-size: 18px;
  line-height: 1.3;
  min-height: 36px;
  text-align: left;
}
.btn.entry {
  background: #ffa900;
  background: -webkit-gradient(
    linear,
    0 0,
    0 bottom,
    from(#ffc600),
    to(#ff8d00)
  );
  background: -webkit-linear-gradient(#ffc600, #ff8d00);
  background: -moz-linear-gradient(#ffc600, #ff8d00);
  background: -ms-linear-gradient(#ffc600, #ff8d00);
  background: -o-linear-gradient(#ffc600, #ff8d00);
  background: linear-gradient(#ffc600, #ff8d00);
  border: 1px solid #ff9933;
}
.btn.entry a.arrow {
  background: url(/img/sp/common/arrow-btn-orange.png) no-repeat right center;
  -moz-background-size: 46px 36px;
  -o-background-size: 46px 36px;
  -webkit-background-size: 46px 36px;
  background-size: 46px 36px;
}
.btn.entry a.arrow img {
  width: 208px;
}
.box {
  background: #fff;
  margin-bottom: 20px;
  position: relative;
}
.box .inner {
  padding: 15px 15px 20px;
  width: auto;
}
.box .title1 + .inner,
.box .title2 + .inner {
  padding-top: 0;
}
.title1 {
  -moz-box-shadow: 0 -1px 3px #c5c2b2;
  -webkit-box-shadow: 0 -1px 3px #c5c2b2;
  box-shadow: 0 -1px 3px #c5c2b2;
  background: #2cc2c2;
  background: -webkit-gradient(
    linear,
    0 0,
    0 bottom,
    from(#1bb4b4),
    to(#3ed0d0)
  );
  background: -webkit-linear-gradient(#1bb4b4, #3ed0d0);
  background: -moz-linear-gradient(#1bb4b4, #3ed0d0);
  background: -ms-linear-gradient(#1bb4b4, #3ed0d0);
  background: -o-linear-gradient(#1bb4b4, #3ed0d0);
  background: linear-gradient(#1bb4b4, #3ed0d0);
  border-top: 1px solid #a8dbdb;
  border-bottom: 1px solid #55b4b4;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.3;
  padding: 10px 15px;
}
.title1 span {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: block;
}
.title3 {
  background: #33cccc;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  padding: 10px 15px;
}
.title4 {
  color: #fff;
  font-size: 15px;
  font-weight: bold;
  padding: 10px 0 9px;
  position: relative;
  text-align: center;
}
.title5 {
  font-size: 15px;
  font-weight: bold;
  line-height: 1.3;
  margin-bottom: 3px;
}
.title5 span {
  background-position: left center;
  background-repeat: no-repeat;
  display: block;
  padding: 5px 15px 5px 25px;
}
.title5 span.recommend {
  background-image: url(/img/sp/common/icon-recommend.png);
  -moz-background-size: 19px 20px;
  -o-background-size: 19px 20px;
  -webkit-background-size: 19px 20px;
  background-size: 19px 20px;
}
.android .title5 span {
  padding-bottom: 3px;
  padding-top: 7px;
}
p.result {
  background: #eeeeee;
  padding: 10px 15px;
  font-weight: bold;
}
p.result span {
  color: #33cccc;
}
.stepBtn {
  margin: 15px 15px 0;
}
.stepBtn ul {
  padding-right: 15px;
  overflow: hidden;
}
.stepBtn li {
  float: left;
}
.stepBtn li:first-child {
  width: 25%;
  margin-right: 15px;
}
.stepBtn li:last-child {
  width: 75%;
  margin-right: -15px;
}
.btn-top {
  margin: 3%;
}
.btn-top .btn-entry {
  font-family: "ヒラギノ丸ゴ Pro W4", "ヒラギノ丸ゴ Pro",
    "Hiragino Maru Gothic Pro", "ヒラギノ角ゴ Pro W3",
    "Hiragino Kaku Gothic Pro", "HG丸ｺﾞｼｯｸM-PRO", "HGMaruGothicMPRO";
  height: 5vh;
  display: flex;
  padding: 4%;
  margin: 3% 0;
  align-items: center;
  justify-content: center;
  color: #fff;
  border-radius: 6px;
}
.btn-top .btn-entry span {
  display: inline-block;
  margin-right: 3%;
  padding: 2%;
  color: #333;
  background-color: #fff;
  border-radius: 4px;
  font-size: 4vw;
  font-weight: bold;
  vertical-align: top;
  @media screen and (min-width: 460px) {
    display: inline-block;
    margin-right: 3%;
    padding: 2%;
    color: #333;
    background-color: #fff;
    border-radius: 4px;
    font-size: 1rem;
    font-weight: bold;
    vertical-align: top;
  }
}
.btn-top .btn-entry p {
  display: inline-block;
  line-height: 1rem;
  @media screen and (min-width: 460px) {
    display: inline-block;
    line-height: 1.2rem;
  }
}
.btn-top .btn-entry:first-child {
  background: linear-gradient(#ff9b00, #ff7800);
  font-size: 4vw;
  @media screen and (min-width: 460px) {
    background: linear-gradient(#ff9b00, #ff7800);
    font-size: 1.2rem;
  }
}
.btn-top .btn-entry:last-child {
  background: linear-gradient(#ff8c8a, #fe6762);
  font-size: 3.8vw;
  @media screen and (min-width: 460px) {
    background: linear-gradient(#ff8c8a, #fe6762);
    font-size: 1.1rem;
  }
}
.jobinfo {
  background: #eee;
  padding: 3%;
  font-size: 3.6vw;
  position: relative;
}
.jobinfo label {
  position: absolute;
  z-index: 1;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 80px;
  cursor: pointer;
  text-align: center;
  background: linear-gradient(
    to bottom,
    rgba(250, 252, 252, 0) 0%,
    rgba(250, 252, 252, 0.95) 90%
  );
}
.jobinfo label:after {
  width: 300px;
  position: absolute;
  z-index: 2;
  bottom: 30px;
  left: 50%;
  content: "続きをよむ";
  transform: translate(-50%, 0);
  color: #ffffff;
  border-radius: 30px;
  background-color: #ff9898;
  padding: 12px 0;
  border: 2px solid #fff;
  font-size: 3.8vw;
  @media screen and (min-width: 460px) {
    width: 300px;
    position: absolute;
    z-index: 2;
    bottom: 30px;
    left: 50%;
    content: "続きをよむ";
    transform: translate(-50%, 0);
    color: #ffffff;
    border-radius: 30px;
    background-color: #ff9898;
    padding: 12px 0;
    border: 2px solid #fff;
    font-size: 1rem;
  }
}
.jobinfo input {
  display: none;
}
.jobinfo input:checked + label {
  background: inherit;
}
.jobinfo input:checked + label:after {
  content: "閉じる";
}
.jobinfo input:checked ~ .jobinfo-container {
  height: auto;
  padding-bottom: 100px;
  transition: all 0.5s;
}
.jobinfo .jobinfo-container {
  overflow: hidden;
  height: 260px;
  transition: all 0.5s;
  @media screen and (min-width: 460px) {
    overflow: hidden;
    height: 260px;
    transition: all 0.5s;
    font-size: 1rem;
  }
}
.jobinfo .jobinfo-box {
  margin-top: 1.5%;
  padding: 3%;
  background: #fff;
  border-radius: 3px;
}
.jobinfo .jobinfo-box dl {
  padding: 2% 0;
  border-bottom: 1px solid #ccc;
}
.jobinfo .jobinfo-box dl:first-child {
  padding-top: 0;
}
.jobinfo .jobinfo-box dl:last-child {
  border-bottom: none;
}
.jobinfo .jobinfo-box dl dt {
  font-weight: bold;
}
.form .secForm form .entrystep .itemList {
  margin-bottom: 0;
}
.form .secForm form .itemList > dd {
  padding-bottom: 10px;
}
.form .secForm .errorArea {
  clear: both;
  padding-top: 6px;
}
.form .secForm p.errortext {
  background: url(../img/icon-caution.png) no-repeat left 2px;
  -moz-background-size: 13px 12px;
  -o-background-size: 13px 12px;
  -webkit-background-size: 13px 12px;
  background-size: 13px 12px;
  color: #ff3330;
  font-weight: bold;
  padding: 0px 15px 0 20px;
}
.form .secForm .form-success p.errortext {
  padding-top: 0px;
}
.form .secForm .num {
  font-weight: bold;
  padding: 5px 10px;
}
ul.checkbox,
ul.radio {
  margin-top: 5px;
  background: #fff;
  margin: -20px -15px 0;
}
ul.checkbox li {
  width: 100%;
  border: none;
  position: relative;
}
ul.checkbox li label {
  height: 20px;
  padding: 12px 15px 13px 45px;
  background: white url(../img/bg-label-check.png) no-repeat 15px 12px;
  -webkit-background-size: 20px 100px;
  background-size: 20px 100px;
  line-height: 20px;
  cursor: pointer;
  display: block;
  position: relative;
  z-index: 2;
  border-bottom: 1px solid #eee;
  border-right: 1px solid #eee;
}
ul.checkbox li input[type="checkbox"]:checked + label {
  background-color: #cde8f6;
  background-position: 15px -64px;
}
ul.checkbox li.skill_more label:before {
  content: "";
  display: block;
  border-left: 2px solid #999;
  border-bottom: 2px solid #999;
  transform: rotate(-45deg);
  position: absolute;
  width: 8px;
  height: 8px;
  top: 0;
  right: 13px;
  z-index: 3;
  margin: auto;
  bottom: 0;
}
ul.checkbox li.skill_more > input[type="checkbox"]:checked + label:before {
  content: "";
  display: block;
  transform: rotate(135deg);
}
ul.radio {
  display: flex;
  flex-wrap: wrap;
  margin: -16px -15px;
}
ul.radio li {
  width: 50%;
}
ul.radio li label {
  height: 20px;
  padding: 12px 15px 13px 45px;
  background: white url(../img/bg-label-radio.png) no-repeat 15px 12px;
  -webkit-background-size: 20px 100px;
  background-size: 20px 100px;
  line-height: 20px;
  cursor: pointer;
  display: block;
  position: relative;
  z-index: 2;
  border-bottom: 1px solid #eee;
  border-right: 1px solid #eee;
}
ul.radio li input[type="radio"]:checked + label {
  background-color: #cde8f6;
  background-position: 15px -68px;
}
ul.checkbox .skill_main li label {
  padding: 12px 15px 13px 65px;
  background: #f2fbff url(../img/bg-label-check.png) no-repeat 35px 12px;
  background-size: 20px 100px;
}
ul.checkbox .skill_main li input[type="checkbox"]:checked + label {
  background-color: #cde8f6;
  background-position: 35px -68px;
}
p.error {
  background: url(../img/icon-caution.png) no-repeat left 2px;
  background-size: 13px 12px;
  color: #ff3330;
  font-weight: bold;
  line-height: 1.2;
  padding: 0px 15px 0 20px;
  margin: 1% 0 0 0;
}
.errortext span {
  font-size: 12px;
  font-weight: bold;
  color: #ff3330;
  display: block;
}
dd.error select,
dd.error input[type="text"],
dd.error input[type="tel"] {
  border-color: #ff3330;
}
select.error {
  border-color: #ff3330;
}
input[type="text"].error {
  border-color: #ff3330;
}
ul.checkbox li input[type="checkbox"],
ul.checkbox li input[type="radio"],
ul.radio li input[type="checkbox"],
ul.radio li input[type="radio"] {
  display: none;
}
.secContactMini {
  margin: 0 4%;
  width: auto;
}
.entryBoxMerit {
  padding: 3%;
  background: #fff;
  background-color: #fff;
  width: 90%;
  border-radius: 5px;
  margin: 0 auto 10px;
  border: 2px solid #33cccc;
}
.entryBoxMerit li span {
  color: #33cccc;
}
.entryBoxMerit img {
  width: 90%;
}
.entryBoxMerit .first {
  font-size: 11px;
  padding: 6px 10px 2px;
  line-height: 1.2em;
}
.entryBoxMerit .second {
  font-size: 12px;
  text-align: center;
  padding-bottom: 5px;
}
.formRed {
  color: #f33a3a;
}
.form .itemList {
  margin-bottom: 15px;
}
.form .itemList .form-title {
  background: #e0f4f4;
  border: 1px solid #eeeeee;
  border-width: 1px 0;
  font-weight: bold;
  padding: 7px 15px;
}
.form .itemList .form-title:first-child {
  border-top-width: 0;
}
.form .itemList .form-title .optional {
  background: #999999;
}
.form .itemList .form-title .required,
.form .itemList .form-title .optional {
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  color: #fff;
  display: inline-block;
  font-weight: normal;
  margin-right: 5px;
  padding: 2px 8px;
}
.form .itemList .form-item {
  overflow: hidden;
  padding: 16px 15px;
}
.form .itemList .form-item .multi-select-area {
  display: flex;
}
.form .itemList .form-item .multi-select-area .select-box {
  width: 135px;
}
.form .itemList .form-item .multi-select-area .select-box select.state,
.form .itemList .form-item .multi-select-area .select-box select.city {
  width: 135px;
  float: none;
}
.form .itemList .form-item .multi-select-area .select-box:first-child {
  margin-right: 15px;
}
.form .itemList .form-item .name-area {
  display: flex;
  align-items: center;
}
.form .itemList .form-item .name-area .col {
  float: none;
}
.form .itemList .form-item .month,
.form .itemList .form-item .day {
  margin: 0 0 0 11px;
}
.form .itemList .form-item .caption {
  margin: 2% 0;
}
input[type="text"],
input[type="tel"] {
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance: none;
  background: #fff;
  border: 1px solid #cccccc;
  padding: 5px;
  width: 100%;
}
textarea {
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance: none;
  background: #fff;
  border: 1px solid #cccccc;
  padding: 5px;
  width: 100%;
}
.form .itemList dt.error .required,
.secForm .itemList dt.error .required,
form .itemList dt.error .required {
  background: #ff6666;
}
.form .itemList dd.error,
.secForm .itemList dd.error,
form .itemList dd.error {
  background: #fff5f5;
}
.form .itemList dd.error input,
.form .itemList dd.error textarea,
.form .itemList dd.error select,
.secForm .itemList dd.error input,
.secForm .itemList dd.error textarea,
.secForm .itemList dd.error select,
form .itemList dd.error input,
form .itemList dd.error textarea,
form .itemList dd.error select {
  border-color: #ff3330;
}
.form .itemList dt .required,
.secForm .itemList dt .required,
form .itemList dt .required {
  background: #33cccc;
}
.form .itemList dd .col,
.secForm .itemList dd .col,
form .itemList dd .col {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: table;
  float: left;
  padding-right: 10px;
  table-layout: fixed;
  width: 50%;
}
.form .itemList dd select.state,
.form .itemList dd select.city,
.secForm .itemList dd select.state,
.secForm .itemList dd select.city,
form .itemList dd select.state,
form .itemList dd select.city {
  width: 135px;
}
.form .itemList dd.error select.error,
.secForm .itemList dd.error select.error,
form .itemList dd.error select.error {
  border-color: #ff3330;
}
.form .itemList dd select.year,
.secForm .itemList dd select.year,
form .itemList dd select.year {
  width: 40vw;
  @media screen and (min-width: 460px) {
    width: 10rem;
  }
}
.form .itemList dd select.month,
.form .itemList dd select.day,
.secForm .itemList dd select.month,
.secForm .itemList dd select.day,
form .itemList dd select.month,
form .itemList dd select.day {
  width: 20vw;
  @media screen and (min-width: 460px) {
    width: 5rem;
  }
}
.form .link,
.secForm .link,
form .link {
  margin-bottom: 25px;
  text-align: center;
}
.form .link li,
.secForm .link li,
form .link li {
  display: inline-block;
  margin: 0 3%;
}
.btn.submit {
  padding: 3%;
  display: block;
}
.btn.contact,
.btn.submit,
.btn.entry,
.btn.hw {
  background: #ffa900;
  background: -webkit-gradient(
    linear,
    0 0,
    0 bottom,
    from(#ffc600),
    to(#ff8d00)
  );
  background: -webkit-linear-gradient(#ffc600, #ff8d00);
  background: -moz-linear-gradient(#ffc600, #ff8d00);
  background: -ms-linear-gradient(#ffc600, #ff8d00);
  background: -o-linear-gradient(#ffc600, #ff8d00);
  background: linear-gradient(#ffc600, #ff8d00);
  border: 1px solid #ff9933;
}
.form .secForm p.error {
  background: url(../img/icon-caution.png) no-repeat 2px 2px;
  -moz-background-size: 13px 12px;
  -o-background-size: 13px 12px;
  -webkit-background-size: 13px 12px;
  background-size: 13px 12px;
  color: #ff3330;
  margin: 0px;
  padding: 1% 0;
}
.form .secForm .form-item.interim p.error {
  padding: 0;
  padding-left: 18px;
}
.form .secForm form .itemList > dd.error input.error,
.form .secForm form .itemList > dd.error textarea.error,
.form .secForm form .itemList > dd.error select.error {
  border-color: #ff3330;
}

/* 未選択状態（エラーが発生している場合） */
.form .itemList dt.error .required,
.secForm .itemList dt.error .required,
form .itemList dt.error .required {
  background: #ff6666; /* エラー時の背景色 */
}

/* 勤務形態が選択された場合、selectedクラスを追加 */
.form .itemList dt .required.selected,
.secForm .itemList dt .required.selected,
form .itemList dt .required.selected {
  background: #33cccc;
}

/* 勤務形態が選択された場合、背景を白に変更 */
.white-bg {
  background-color: white !important;
}

/* 未選択の場合のエラー背景色 */
.form .itemList dd.error,
.secForm .itemList dd.error,
form .itemList dd.error {
  background: #fff5f5; /* エラー状態の背景色 */
}

/* 入職希望時期が選択された場合、背景を白に変更 */
.white-bg {
  background-color: white !important;
}

/* 超音波項目にのみ三角形アイコンを追加 (li.skill_more直下のlabelにのみ適用) */
ul.checkbox li.skill_more > label:before {
  content: "";
  display: block;
  border-left: 2px solid #999;
  border-bottom: 2px solid #999;
  transform: rotate(-45deg); /* 初期状態は左下向き */
  position: absolute;
  width: 8px;
  height: 8px;
  top: 0;
  right: 13px; /* 右端に配置 */
  z-index: 3;
  margin: auto;
  bottom: 0;
}

/* チェックされた場合に三角形が回転 */
ul.checkbox li.skill_more > input[type="checkbox"]:checked + label:before {
  content: "";
  display: block;
  transform: rotate(135deg); /* チェック後は逆さ三角形に回転 */
}

/* サブスキル項目には三角形アイコンを表示しない */
ul.checkbox li:not(.skill_more) > label:before {
  content: none; /* サブスキルには三角形を表示しない */
}