@charset "UTF-8";
/* CONTACT */
/* line 4, app/assets/stylesheets/relasic/views/contact/common.scss */
.is-contact .step-flow ol {
  display: flex;
  justify-content: center;
  gap: 30px;
}

/* line 8, app/assets/stylesheets/relasic/views/contact/common.scss */
.is-contact .step-flow ol li {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 10px;
  font-weight: 700;
  color: #4e5772;
}

/* line 17, app/assets/stylesheets/relasic/views/contact/common.scss */
.is-contact .step-flow ol li .num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50px;
  background-color: #859dcb;
  color: #fff;
}

/* line 27, app/assets/stylesheets/relasic/views/contact/common.scss */
.is-contact .step-flow ol li.current {
  color: #000;
}

/* line 29, app/assets/stylesheets/relasic/views/contact/common.scss */
.is-contact .step-flow ol li.current .num {
  background-color: #426AB3;
}

/* line 33, app/assets/stylesheets/relasic/views/contact/common.scss */
.is-contact .step-flow ol li.yet {
  color: #888;
}

/* line 35, app/assets/stylesheets/relasic/views/contact/common.scss */
.is-contact .step-flow ol li.yet .num {
  background-color: #888;
}

/* 入力画面のレイアウト */
/* line 45, app/assets/stylesheets/relasic/views/contact/common.scss */
.contact-input-layout {
  font-weight: 500;
  /* confirm画面のボタンをSP版の時のみ縦2列表示にする */
}

/* line 47, app/assets/stylesheets/relasic/views/contact/common.scss */
.contact-input-layout .item-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 18em;
}

/* line 52, app/assets/stylesheets/relasic/views/contact/common.scss */
.contact-input-layout .item-title span {
  flex: 1;
  min-width: 1px;
  padding-right: 10px;
}

@media (max-width: 768px) {
  /* line 47, app/assets/stylesheets/relasic/views/contact/common.scss */
  .contact-input-layout .item-title {
    width: 10em;
  }
}

@media (max-width: 639px) {
  /* line 47, app/assets/stylesheets/relasic/views/contact/common.scss */
  .contact-input-layout .item-title {
    width: 100%;
    padding-bottom: 15px;
  }
}

/* line 64, app/assets/stylesheets/relasic/views/contact/common.scss */
.contact-input-layout .item-title:not(.nocheck)::after {
  content: "任意";
  display: inline-block;
  padding: 0 6px;
  border-radius: 4px;
  line-height: 20px;
  font-weight: 700;
  font-size: 0.875rem;
  color: #EC6C00;
  border: 1px solid #EC6C00;
}

/* line 76, app/assets/stylesheets/relasic/views/contact/common.scss */
.contact-input-layout.is-confirm .item-title:not(.nocheck)::after {
  display: none !important;
}

/* line 80, app/assets/stylesheets/relasic/views/contact/common.scss */
.contact-input-layout .required .item-title::after {
  content: "必須";
  background-color: #EC6C00;
  color: #fff;
}

/* line 86, app/assets/stylesheets/relasic/views/contact/common.scss */
.contact-input-layout .item-desc {
  flex: 1;
  min-width: 1px;
}

/* line 90, app/assets/stylesheets/relasic/views/contact/common.scss */
.contact-input-layout .name-inner-text {
  width: 2em;
  font-weight: 500;
}

/* line 95, app/assets/stylesheets/relasic/views/contact/common.scss */
.contact-input-layout .input-area.skills ul.uk-list {
  gap: 3px 0;
}

/* line 98, app/assets/stylesheets/relasic/views/contact/common.scss */
.contact-input-layout .input-area.skills ul.uk-list li label {
  display: flex;
  gap: 5px;
  padding-right: 8px;
}

/* line 102, app/assets/stylesheets/relasic/views/contact/common.scss */
.contact-input-layout .input-area.skills ul.uk-list li label .uk-checkbox {
  margin-top: 5px;
}

@media (max-width: 480px) {
  /* line 102, app/assets/stylesheets/relasic/views/contact/common.scss */
  .contact-input-layout .input-area.skills ul.uk-list li label .uk-checkbox {
    margin-top: 3px;
  }
}

/* line 108, app/assets/stylesheets/relasic/views/contact/common.scss */
.contact-input-layout .input-area.skills ul.uk-list li label span {
  flex: 1;
  min-width: 1px;
}

@media (max-width: 480px) {
  /* line 116, app/assets/stylesheets/relasic/views/contact/common.scss */
  .contact-input-layout .input-area .uk-gap {
    gap: 10px;
  }
}

@media (max-width: 639px) {
  /* line 124, app/assets/stylesheets/relasic/views/contact/common.scss */
  .contact-input-layout .confirm-buttons {
    flex-direction: column-reverse;
    gap: 10px;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding-bottom: 5px;
  }
}