@charset "utf-8";
/*=====================================================
  Contact/contact.css
  form.php / confirm.php / thanks.php
=====================================================*/

/* ----------------------------------------------------
  メイン
-----------------------------------------------------*/
.site_wrapper{
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 100%;
  min-height: 100vh
}

.contact_box {
  max-width:822px;
  margin:60px auto 0;
}


/* ----------------------------------------------------
  フォームの進捗表示
-----------------------------------------------------*/
.step_ul {
  margin-bottom:35px;
  max-width:822px;
  margin:60px auto 35px;
  list-style: none;
}

.step_ul li {
  float:left;
  width:33%;
  padding:1.76% 0 1.78% 0%;
  font-weight:bold;
  text-align:center;
  background-size:100%!important;
}

@media screen and (max-width: 600px) {
  .step_ul li {
    padding:1.2% 0 1.2% 0%;
  }
}

@media screen and (max-width: 480px) {
  .step_ul li {
    font-size:66%;
  }
}

/* 入力画面
 -------------------------*/
/* STEP1 */
.step_ul li.step1 {
  background:url(../../images/contact/step_01.png) no-repeat top left;
  max-width:251px;
  width:31%;
  color:#fff;
}
/* STEP2 */
.step_ul li.step2 {
  background:url(../../images/contact/step_02.png) no-repeat top left;
  max-width:299px;
  width:36%;
}

/* STEP3 */
.step_ul li.step3 {
  background:url(../../images/contact/step_03.png) no-repeat top left;
  max-width:272px;
  width:33%;
}

/* 確認画面
 -------------------------*/
/* STEP1 */
.step_ul li.flow_normal01 {
  background:url(../../images/contact/step_01_normal.png) no-repeat top left;
  color:#000;
}

/* STEP2 */
.step_ul li.flow_active2 {
  background:url(../../images/contact/step_02_active.png) no-repeat top left;
  color:#fff;
}

/* STEP3 */
.step_ul li.flow_confirm {
  background:url(../../images/contact/step_03_conform.png) no-repeat top left;
}

/* 送信完了
 -------------------------*/
/* STEP1 */
.step_ul li.flow_normal01-2 {
  background:url(../../images/contact/step_01_thanks.png) no-repeat top left;
  color:#000;
}

/* STEP2 */
.step_ul li.flow_normal02 {
  background:url(../../images/contact/step_02_normal.png) no-repeat top left;
}

/* STEP3 */
.step_ul li.flow_active03 {
  background:url(../../images/contact/step_03_active.png) no-repeat top left;
  color:#fff;
}

/* フォーム入力画面の説明文
 -------------------------*/
.step_ul + .defolt_font {
  margin-bottom:20px;
}


/* ----------------------------------------------------
  フォーム(基本)
-----------------------------------------------------*/

/* フォーム入力枠テーブル
 -------------------------*/
.table02 {
  width:100%;
  max-width:805px;
  margin:0 auto 30px;
}

/* 項目エリア */
.table02 th {
  background:#00498C;
  border:1px #dddddd solid;
  color:#fff;
  font-weight:bold;
  padding:17px 0 17px 13px;
  position: relative;
  text-align:left;
  vertical-align:top;
  width: 230px;
}
.table02 th span.remark {
  font-size: 1.2rem;
}

.table02 th .required,
.table02 th .optional{
  color: #fff;
  padding: 2px 7px;
  margin-left: 5px;
  position: absolute;
  right: 11px;
  top: 14px;
}
/* 必須 */
.table02 th .required{
  background-color: #c92f21;
}
/* 任意 */
.table02 th .optional{
  background-color: #F5F5F5;
  color: #000;
  padding: 1px 6px;
}

/* 入力エリア */
.table02 td {
  color:#000;
  border:1px solid #ddd;
  padding:2%;
  word-break: break-all;
}

.contact_box .table02 tbody td {
  padding-right:20px;
  padding-left:20px;
}

/* 入力例 */
.table02 td span {
  color:#424242;
  font-size:86%;
}



/* フォーム入力欄
 -------------------------*/
textarea {
  width:80%;
  height:200px;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "meiryo", sans-serif;
}

input {
  border:#cacaca 1px solid;
  margin-bottom:10px!important;
}
input[type=text] {
  padding:3px 0;
}
input[type=radio],input[type=checkbox] {
  margin-right:5px;
  border:none;
}
textarea {
  border:#cacaca 1px solid;
}
select{
  padding: 3px;
}

/* チェックボックス枠 */
.check_div {
  width:100%;
}

.check_div ul li {
  float:left;
  width:64%;
  margin-right:2%;
}
.check_div ul li.odd {
  width:35%;
}

/* フォームボタン
 -------------------------*/
/* 送信ボタン */
input.btn_01 {
  display: block;
  /* background: #222; */
  background: #455A64;
  color: #fff;
  text-align: center;
  border-radius: 25px;
  padding: 8px 10px;
  margin:0 auto 90px!important;
  width: 200px;
  cursor: pointer;
  transition: .3s;
  /* border: 2px solid #222; */
  border: 2px solid #455A64;
}
input.btn_01:hover{
  background: #fff;
  color: #222;
  text-decoration:none;
}

/* リセットボタン */
input.btn_reset {
    margin-right: 10px !important;
}

/* 確認画面のボタンエリア */
.contact_btn {
  width:80%;
  max-width:410px;
  margin:0 auto;
}

.contact_btn .btn_01 {
  float:left!important;
  max-width:224px!important;
}

.btn_01 + .btn_01 {
  margin-left:15px!important;
}

/* 採用の同意ボタン */
.btn_flex{
  display: flex;
  justify-content: center;
  margin-top: 40px;
}
.link_btn_black{
  margin: 0;
}
.link_btn_black + .link_btn_grey{
  margin-left: 30px;

}
.link_btn_grey a{
  background: #979898;
  border: 2px solid #979898;
}
.link_btn_grey a:hover{
  border: 2px solid #979898;
}

/* フォーム動的セレクタ
 -------------------------*/
.disabled {
  color: #cccccc;
}
#ifm input.btn_01 {
  margin-bottom:45px!important;
}

#ifm input.btn_01:focus-visible {
/*   outline: 4px solid orange; */
  outline: 4px solid #f2694a;
}

.target_remark {
  color:#424242;
  font-size:86%;
}

.target_remark .dot_list{
  list-style-type: disc;
  margin-left: 1rem;
}
.target_remark .dot_list li {
  margin-left: 1rem;
}
.target_remark.target_remark_syubetu_1,
.target_remark.target_remark_syubetu_2,
.target_remark.target_remark_syubetu_3 {
  margin-bottom: 10px;
}

/* .th_remark {
  margin-top: 20px;
  word-break: keep-all;
} */


@media screen and (max-width: 800px) {
  #mainColumn {
    margin:0!important;
  }

  .l-size {
    width:70%;
  }

  .formError .formErrorContent {
    width:100%;
    min-width:inherit;
    box-sizing:border-box;
    max-width:66%;
  }

  .table02 tbody td {
    padding:10px 1%;
  }

  .table02 th {
    min-width: 100%;
    padding-left:0!important;
  }

  .check_div ul {
    width:100%;
  }

  .check_div ul li {
    float:none;
    width:90%;
  }
  .check_div ul li.odd {
                width:90%;
        }
  .contact_box {
    margin:60px 2% 0;
  }

  .table02 th {
    padding-left:2%!important;
  }

  .table02 th ,
  .table02 tbody td {
    display:block!important;
  }
  .contact_btn{

  }
  form#bfm{
    width: 200px;
    margin: 0 auto;
    margin-bottom: 20px;
  }
  form#nfm{
    width: 200px;
    margin: 0 auto;
  }
  .btn_01 {
    margin-bottom: 30px!important;
  }
  input.btn_reset {
    margin-right: 0px !important;
  }
}


/* ----------------------------------------------------
  確認画面
-----------------------------------------------------*/
/* 送信ボタンクリック後の処理用 */
.clicked {
  border: 1px solid #ccc;
  text-align: center;
  font-size: 120%;
  padding: 15px 0;
  background: #005df8;
  color: #fff;
  margin-bottom: 90px;
}


/* ----------------------------------------------------
  送信完了
 -----------------------------------------------------*/
h3.title_h3 {
  margin-bottom:38px!important;
}
.thanks_title{
  text-align: center;
  font-size: 1.8rem;
}
.thanks_text{
  text-align: center;
  font-size: 1.6rem;
  margin-bottom: 130px;

}


/* ----------------------------------------------------
  求人応募フォーム
-----------------------------------------------------*/
.rectuit_contact .contact_box h3{
  font-size: 2rem;
  margin-left: 8.5px;
  margin-bottom: 5px;
}

.rectuit_contact td span{
   color: #333;
}

.rectuit_contact input{
  margin-bottom: 0!important;
}
input[name="fm_email_confirm"],input#fm_workplace1,input#fm_workplace2,input#fm_employmentstatus{
  margin-top: 10px;
}
input#fm_history1,input#fm_history2,input#fm_history3{
  margin-top: 15px;
}
input#fm_city,input#fm_building,input#fm_history1,input#fm_history2,input#fm_history3{
  width: 100%;
}

.rectuit_contact .table02 th{
  vertical-align: middle;
}

/* 確認画面／送信完了
 -------------------------*/
.recruit_contact_wrap {
  margin-bottom: 130px;
}

.thanks_text_wrap{
  text-align: center;
  margin-top: 9rem;
  margin-bottom: 9rem;
  padding: 0 20px
}
.thanks_text_wrap .thanks_text{
  margin-bottom: 0;
  line-height: 2.5;
}
.thanks_text_wrap + .link_btn_black{
  margin: 0 auto;
}


@media screen and (max-width: 800px) {
  input#fm_company,input#fm_busyo,input#fm_name_last,input#fm_name_first,input#fm_namek_last,input#fm_namek_first{
  width: 84%;
}
  input#fm_name_first,input#fm_namek_first{
    margin-top: 10px;
  }
  .rectuit_contact input[size="40"]{
    width: 100%;
  }
  .rectuit_contact input#fm_live_tel1,
  .rectuit_contact input#fm_live_tel2,
  .rectuit_contact input#fm_live_tel3,
  .rectuit_contact input#fm_call_tel1,
  .rectuit_contact input#fm_call_tel2,
  .rectuit_contact input#fm_call_tel3,
  .rectuit_contact input#fm_birth_year {
    width: 25%;
  }
  .rectuit_contact select#fm_now_occupation {
    width: 100%;
  }
}