@charset 'urf-8';

/* 共通設定 */
.common_txt{
  font-size: 1.7rem;
  font-family: var(--NotoSans); 
  font-weight: bold;
  color: #515151;
  line-height: calc(22 / 17);
}

.common_form_flex{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.common_form_box{
  background-color: #F1F1F1;
  width: 59.5rem;
  height: 6.1rem;
  padding-left: 4rem;
  font-size: 1.7rem;
  font-family: var(--NotoSans);
  font-weight: bold;
  color: #515151;
  outline: none;
}

/* ラジオボタンのカスタマイズ */
input[type="radio"] {
  appearance: none;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
  background-color: #FFFFFF;
  border: 0.1rem solid #707070;
  cursor: pointer;
  margin-right: 1.8rem; /* 円とテキストの間隔はここで調節 */
}

/* 内側のまる */
input[type="radio"]:before{
  content: "";
  display: block;
  width: 2rem;
  height: 2rem;
  margin: 0.3rem auto;
  border-radius: 50%;
}

/* 選択された時のまるの色 */
input[type="radio"]:checked:before {
  background: #FF876E;
}

/* テキストエリアのスクロールバー非表示 */
textarea::-webkit-scrollbar{
  display: none;
}

/* ラジオボタンの右マージン */
.radio_margin{
  margin-right: 7.8rem;
}

/* --------- ここまで --------- */

/* 全体設定 */
.contact_main_container{
  width: 94.1rem;
  margin: 0 auto;
  padding: 15.6rem 0 18rem;
  position: relative;
}

/* ロゴ */
.contact_logo_box{
  position: absolute;
  width: 28.5rem;
  height: 26.7rem;
  top: 13rem;
  left: -14rem;
  z-index: -1;
}

.contact_logo_img{
  width: 100%;
  vertical-align: top;
}

/* タイトル */
.contact_title{
  font-size: 4rem;
  font-weight: bold;
  font-family: var(--ZenMaru);
  text-align: left;
  color: #515151;
}

/* お問い合わせ説明以降の設定 */
.contact_form_container{
  width: 88.1rem;
  margin: 5.2rem 0 0 auto;
}

/* 必須 */
.required_txt{
  min-width: 6.4rem;
  height: 2.7rem;
  padding: 0.5rem 1.9rem;
  background-color: #FF876E;
  border-radius: 2rem;
  color: #FFFFFF;
  font-size: 1.3rem;
  font-weight: bold;
  font-family: var(--NotoSans);
}

.contact_detail_1,.contact_detail_2,.contact_conf_detail_1,.contact_conf_detail_2{
  line-height: 2.2em;
}

.contact_detail_2,.contact_conf_detail_2{
  display: flex;
  align-items: center;
  margin-bottom: 7.6rem;
}

.detail_required_setting{
  line-height: normal;
  margin-right: 0.7rem;
}

/* お問い合わせ選択 */
.contact_select{
  display: flex;
  align-items: center;
  margin-bottom: 9.7rem;
}

.contact_radio{
  display: flex;
  align-items: center;
}

/* お問い合わせ選択項目をboldに */
.wpcf7-list-item-label{
  font-weight: bold;
 }

/* お問い合わせ項目の位置調整 */
.wpcf7-form-control{
  display: flex;
}

.wpcf7-list-item{
  display: flex;
  align-items: center;
}

/* 各インプットフォーム下のマージン */
.contact_name,.contact_tel,.contact_company,.contact_email{
  margin-bottom: 5rem;
}

/* お問い合わせ内容下マージン */
.contact_description{
  margin-bottom: 10rem;
}

/* お問い合わせ内容選択 */
.contact_radio_title_txt{
  margin-right: 16.9rem;
}

/* お名前 */
.contact_name_title_txt{
  margin-right: 3.3rem;
}

/* 電話番号 */
.contact_tel_title_txt{
  margin-right: 3rem;
}

/* メールアドレス */
.contact_email_title_txt{
  margin-right: 5rem;
}

/* お問い合わせ内容 */
.contact_description{
  align-items: flex-start;
}

.contact_description_title_txt{
  display: block;
  margin-top: 1.8rem;
}

/* テキストボックス */
.description_box{
  resize: none;
  width: 59.5rem;
  height: 30.8rem;
  padding: 2rem 4rem;
}

/* 確認ボタンと戻るボタン */
.contact_btn_container{
  display: flex;
  justify-content: space-between;
}

.contact_submit_btn,.contact_previous_btn{
  display: block;
  min-width: 23.5rem;
  margin: 0 auto;
  padding: 2rem 5.5rem 2.1rem 5.4rem;
  font-size: 1.8rem;
  font-family: var(--ZenMaru);
  font-weight: bold;
  background-color: #FF876E;
  color: #FFFFFF;
  cursor: pointer;
  transition: background-color 0.3s,color 0.3s;
  border: none;
}

.contact_submit_btn:hover,.contact_previous_btn:hover{
  background-color: #6EFFC2;
  color: #515151;
}

/* 確認画面用 */
/* お問い合わせ選択 */
.conf_select{
  justify-content: space-between;
  margin-bottom: 5rem;
}

.conf_radio_title{
  margin-right: 0;
}

.conf_common_txtbox{
  width: 59.5rem;
  text-align: left;
  word-wrap: break-word;
}

/* お問い合わせ説明 */
.conf_desc_txtbox{
  margin-top: 0;
}

/* 送信前の注意文言 */
.caution_txt{
  text-align: center;
  margin-bottom: 2rem;
}

.caution_txt:last-child{
  margin-bottom: 5rem;
}

/* サンクス画面 */
.thanks_main_container{
  padding-bottom: 0;
}

.thanks_title{
  margin-bottom: 11.2rem;
}

/* ハリネズミさん */
.thanks_img_box{
  position: absolute;
  display: block;
  bottom: -23rem;
  right: 5rem;
  width: 22.5rem;
  height: 18.7rem;
}

.thanks_char_img{
  vertical-align: middle;
}

.thanks_container{
  margin-top: 0;
}

.thanks_txt_box{
  width: 62.5rem;
  margin: 0 auto 34.2rem;
}

/* メッセージ */
.thanks_txt{
  font-size: 1.8rem;
  font-family: var(--NotoSans);
  font-weight: 500;
  color: #515151;
  line-height: calc(40 / 18);
  text-align: center;
}

/* contact_confirmationボタン追加分 */
input.wpcf7-form-control.wpcf7-previous.contact_submit_btn {
  background-color: #6effc2;
}


/* ここから調整のため追加 PC用*/
.contact_main_container {
  margin: 15.6rem auto 18rem;
  padding: 0;
}
.contact_logo_box {
  top: -11.3rem;
  left: -13.6rem;
}
/* ここまで調整のため追加 PC用*/




@media (max-width:699.95px) {
  /* 共通設定 */
  .common_txt{
    font-size: 1.6rem;
    line-height: 2.1em;
  }

  .common_form_box{
    width: 33.5rem;
    height: 4rem;
    font-size: 1.6rem;
    padding-left: 2rem;
  }

  input[type="radio"]{
    margin-right: 1.3rem;
  }

  .common_form_flex,.contact_select{
    flex-direction: column;
    align-items: flex-start;
  }

  /* ラジオボタンの右マージン */
  .radio_margin{
    margin-right: 0.6rem;
  }

  /* ----- 共通設定ここまで ----- */

  /* SP版flex対応 */
  .common_form_flex_sp{
    flex-direction: row;
    align-items: center;
    margin-bottom: 1.3rem;
  }

  /* 全体設定 */
  .contact_main_container{
    width: 33.5rem;
    padding: 16.2rem 0 5.316rem;
  }

  /* ロゴ */
  .contact_logo_box{
    width: 10rem;
    height: 9.368rem;
    top: 10.5rem;
    left: 0.6rem;
  }

  /* タイトル */
  .contact_title{
    font-size: 2.5rem;
    text-align: center;
  }
  
  /* 必須 */
  .detail_required_setting{
    margin-right: 1.229rem;
  }

  /* お問い合わせ説明以降の設定 */
  .contact_form_container{
    width: 33.5rem;
  }

  .contact_detail_1{
    margin-bottom: 1.3rem;
  }
  
  .contact_detail_2{
    display: flex;
    justify-content: flex-end;
    margin-bottom: 5.1rem;
  }

  /* お問い合わせ選択 */
  .contact_select{
    flex-direction: column;
    margin-bottom: 6.3rem;
  }

  .contact_radio_title_txt{
    margin: 0 0 1.3rem;
  }

  .contact_radio{
    margin-left: auto;
  }

  /* お名前 */
  .contact_name{
    margin-bottom: 4.8rem;
  }

  .contact_name_title_txt{
    margin-right: 2rem;
  }

  /* お名前のプレースホルダーの文字を非表示 */
  .input_name_box::placeholder{
    color: transparent;
  }

  /* 電話番号 */
  .contact_tel{
    margin-bottom: 6.5rem;
  }

  .contact_tel_title_txt{
    margin-right: 1.383rem;
  }

  /* 会社名、お問い合わせ内容の下部マージン */
  .contact_company_title_txt,.contact_description_title_txt{
    display: block;
    margin-bottom: 1.3rem;
  }

  /* メールアドレス(会社名下部の余白も同じ値なのでまとめる) */
  .contact_email,.contact_company{
    margin-bottom: 6.6rem;
  }

  .contact_email_title_txt{
    margin-right: 4.2rem;
  }

  /* お問い合わせ内容 */
  .description_box{
    height: 20rem;
    padding: 1rem 2rem;
  }

  .contact_description{
    margin-bottom: 4rem;
  }

  .contact_description_title_txt{
    margin-top: 0;
  }

  /* 確認ボタン */
  .contact_submit_btn,.contact_previous_btn{
    min-width: 8.4rem;
    padding: 0.7rem 0.8rem 0.684rem;
    font-size: 1.2rem;
  }

  /* 確認画面用 */
  .conf_common_txtbox{
    width: 33.5rem;
  }

  .conf_contact_radio{
    margin-left: 0;
  }

  .caution_txt{
    font-size: 1.1rem;
    margin-bottom: 0;
  }

  .caution_txt:last-child{
    margin-bottom: 2.5rem;
  }

  /* サンクス画面 */
  .thanks_main_container{
    padding: 0;
    margin-top: 16.2rem;
  }

  .thanks_title{
    font-size: 2rem;
    margin-bottom: 3.8rem;
  }

  .thanks_txt_box{
    width: 100%;
    margin: 0 auto 8.3rem;
  }

  .thanks_txt{
    font-size: 1.4rem;
    line-height: calc(30 / 14);
  }

  .thanks_img_box{
    display: none;
  }


  /* ここから調整のため追加 SP用*/
  .contact_main_container {
    width: 33.5rem;
    padding: 0;
    margin: 16.2rem auto 5.3rem;
  }
  .contact_logo_box {
    top: -5.8rem;
    left: 0.4rem;
  }
  /* ここまで調整のため追加 SP用*/
}