@charset "UTF-8";


/* ------------------------------------------------------------- */
/* StyleSection _01  Basic CSS                                   */
/* ------------------------------------------------------------- */

@media screen and (min-width: 1051px) {
  main{
    margin: 0 auto;
    min-width: 1140px;
  }
}

@media screen and (max-width: 1050px) {
  main {
    font-size:3.2vw;
    line-height: 1.83;
  }
}



/* ------------------------------------------------------------- */
/* StyleSection _02  お問合せ基本設定                            */
/* ------------------------------------------------------------- */

#input_form {
	margin-top:80px;
}

#input_form , #preview {
	.ttl1 {
		width:1100px;
		text-align:center;
		margin: 0 auto;   /* 水平方向の中央揃え */
		
		h3 {
			text-align:center;
			font-size:2.6em;
			}
		p{
			text-align:center;
			font-size:2em;
		}
	}
} 




/* 入力BOX全体の位置調整 */
#input_form .wrap , #preview .wrap{
  margin: 0 auto;
  position: relative;
  width:1100px;
  
  /*padding-left: 100px; */
  margin-bottom: 100px;
}

.cont1 {
  margin-top: 30px;
  padding-left: 80px;
}
.cont2 {
  margin-top: 30px;
  margin-left: 40px;
  padding: 14px 0px 14px 0px;
  width: 91%;
  
  /* ===== PC 個人情報の同意BOX ===== */
  background-color: #EDE8E7;
  box-shadow: 0 0 8px #BFBFBF;
  border-radius: 8px;

 .row {
  margin-left: 40px;
  }
}

.sec_form {
  margin-top: 40px;
}
.sec_formblk {
  padding: 20px 0;
  
  /* ===== PC and SP Form全体BOX ===== */
  background-color: #F3F3f3;
  box-shadow: 0 0 8px #BFBFBF;
}


 h2 {
  text-align: center !important;
  font-size: 2.3em;
  line-height: 2.6em;
  letter-spacing: 0.2em;
}

/* 入力項目上下間隔調整 */
.rowbt-2 {
  margin-bottom: 2em;
}

/* 同意用チェックボックス 位置調整 */
.form-check-input {
  margin-top: 11px;
  margin-right: 8px;
}
  
.form-check-label {
  margin-top:-5px;
}

/* 確認画面設定 */
#preview h2 {
  text-align: center;
  font-size: 2.3em;
}


@media screen and (min-width: 1051px) {
}

@media screen and (max-width: 1050px) {

	#input_form {
		.ttl1 {
			width:100%;
			margin: 0 0;   /* 水平方向の中央揃え解除 */
			h3 {
				font-size:2.2em;
			}
			p{
				font-size:1.6em;
			}
		}
	} 



  #input_form .wrap , #preview .wrap {
    width: 89vw;
    padding-left: 0;
  }

  h2 {
    font-size: 2.3em;
    line-height: 1.2em;
    letter-spacing: 0.02em;
  }
  .cont1 {
    margin-top: 30px;
    padding-left: 0;
  }
  .cont2 {
    margin-left: 18px;
    padding: 14px 0;
    
    /* SP 個人情報の同意BOX */
    background-color: #EDE8E7;
  }
  
  .cont2 .help-block {
    letter-spacing: 0.005em;
    line-height: 1.2em;
  }
  .cont2 .form-check-label {
    font-size: 1.3em;
    letter-spacing: 0.005em;
  }
  
  .cont2 .row {
    margin: 0;
  }
  
  /* プレビュー設定 */
  #preview h2 {
    font-size: 2.3em;
  }

}


/* ------------------------------------------------------------- */
/* StyleSection _03  INPUT FORM 基本 設定                        */
/* ------------------------------------------------------------- */

/* ----- 項目 (ラベル設定) ----- */
.form-group label{
  font-size: 1.9em;
  line-height: 2em;
}
/* ----- TXTAREA HELP 設定  ----- */
span.help-block {
  display: block;
  font-size: 1.6em;
  line-height: 1.6em;
  margin-bottom: 8px;
}

/* help 内の文字間隔 */
.help-block .spc {
  padding: 0 10px;
  letter-spacing: 0.1em;
}

/* ----- 入力BOX 設定  ----- */
.form-group input {
  font-size: 1.8em;
  line-height: 2em;
  letter-spacing: 0.15em;
}
.form-group select {
  font-size: 1.8em;
  line-height: 1em;
  letter-spacing: 0.2em;
  height: 2.6em;
}

.form-group textarea{
  height: 10em;
  font-size: 1.8em;
  letter-spacing: 0.2em;
}


@media screen and (max-width: 1050px) {
  span.help-block {
    display: block;
    font-size: 1.4em;
    line-height: 1em;
    margin-bottom: 8px;
    margin-left: 1em;
  }
  
  .cont2 .mg-l1 {
    margin-left: 0.5m;
  }
}



/* ------------------------------------------------------------- */
/* StyleSection _04  ボタン設定(戻る・入力確認・送信する) 設定   */
/* ------------------------------------------------------------- */
.form-group nav {
  width: 100%;
  height: 100px;
  padding-top: 30px;
  text-align: center;
}

/* ----- btn_01 基本設定 ----- */
nav .btn_01 {
  display: inline-block;
  text-align: center;
  font-size: 1.8em;
  vertical-align: middle;
  padding: 6px 0;
  font-weight: bold;
  border-radius: 6px;
  transition: 0.5s;
  letter-spacing: 0.3em;
}

/* 戻るボタン */
.return{
  width: 140px;
  margin-right: 100px;
  border: 2px solid #A4A4A4;
  color: #A4A4A4;
}
.return:hover {
  color: #fff;
  background: #ccc;
}

/* 入力確認 */
.confirm{
  width: 180px;
  border: 2px solid #27acd9;
  color: #27acd9;
}
.confirm:hover {
  color: #fff;
  background: #27acd9;
}


@media screen and (max-width: 1050px) {
  .form-group select {
    font-size: 1.8em;
    line-height: 1em;
    letter-spacing: 0.1em;
    height: 2.6em;
    
  }
  .btn_01 {
    font-size: 1.8em;
    padding: 0 0;
    border-radius: 3px;
    transition: 0.5s;
    height: 50px;
  }
  .return{
    font-size: 1.8em;
    letter-spacing: 0.01;
    
    width: 30%;
  }
  .confirm{
    font-size: 1.8em;
    width: 40%;
    letter-spacing: 0.001;
    border: 2px solid #27acd9;
    color: #27acd9;
  }
}


/* ------------------------------------------------------------- */
/* StyleSection _05  mini Modal 設定                             */
/* ------------------------------------------------------------- */
#modalWrap {
  display: none;
  background: none;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 990;
  overflow: hidden;
  }

  #modalWrap .modalBox {
    position: fixed;
    width: 85%;
    max-width: 420px;
    
    height: 0;
    
    top: -30%;
    bottom: 0;
    left: 0;
    right: 0;
    
    margin: auto;
    overflow: hidden;
    opacity: 1;
    display: none;
    border-radius: 3px;
    z-index: 1000;
  }

  #modalWrap .modalInner {
  font-size: 1.3em;
    padding: 50px 30px 50px 30px;

    text-align: center;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
  }

/* ------------------------------------------------------------- */
/* StyleSection _06  Input Form Color 設定                       */
/* ------------------------------------------------------------- */
/* 緑枠に背景色を追加 */
.is-valid {
  background-color: #dff0d8;
}
/* 赤枠に背景色を追加 */
.is-invalid {
  background-color: #ffdddd;
}
/* 入力が誤り 黄色 */
.caution{
  background-color: #fcf8e3;
}

/* 必須入力 ( 未入力 )*/
*[required]{
  outline: solid 1px #fd8c8c;
  background-color: #ffdddd;
}
/* 入力がOK ( 入力完了 )*/
*[required].is-valid, .required.is-valid, .is-valid {
  outline: solid 1px #7CBB96;
  background-color: #dff0d8;
}
/* 入力中の ( 入力エラー )*/
*[required].is-valid.caution, .is-valid.caution, .caution {
  background-color: #fcf8e3;
}


/* プレースホルダ */
input[type="text"]::placeholder , input[type="password"]::placeholder {
  color: #7C707E;
}



/* ------------------------------------------------------------- */
/* StyleSection _07  エラーコメント表示テキスト＋アイコン 設定   */
/*  Errorが表示されている時のクラスに設定している                */
/* ------------------------------------------------------------- */

/*
<div class="invalid-feedback">
<img src="img/alert-circle.svg">
<span id="userid_come">電話番号が未入力です</span>
</div>
*/
.invalid-feedback img {
  margin-bottom: 6px;
  margin-right: 6px;
}
.invalid-feedback span {
  font-size: 2em;
  line-height: 2em;
}


/* 必須 アイコン <i class="required_icon">必須</i>  */
/* <i class="required_icon">必須</i></label> */
.required_icon {
  background-color: #fd8c8c;
  color: #fff;
  font-size: 16px;
  min-width: 10px;
  padding: 3px 14px 3px 7px;
  margin: 0px 5px;
  line-height: 1;
  vertical-align: middle;
  white-space: nowrap;
  text-align: center;
  border-radius: 10px;
  display: inline-block;
}

@media screen and (min-width: 1051px) {
  .required_icon {
    margin-bottom: 4px;
  }
}

@media screen and (max-width: 1050px) {
  .invalid-feedback img {
    width: 21px;
    margin-bottom: 6px;
    margin-right: 6px;
  }
}



/* ------------------------------------------------------------- */
/* StyleSection _08 移動確認 Modal設定                           */
/* ------------------------------------------------------------- */
.move_check .modal-header{
  color: #FD6666;
  background-color: #ccc;
  font-size: 1.8em;
}
.move_check #modal-title-common {
  font-size: 1.2em;
}
.move_check #modal-body-common {
  font-size: 2em;
  min-height: 6em;
}
.move_check #modal-footer-common {
  background-color: #ccc;
}


/* =========== ボタン設定 ===========  */
.move_check #modal-footer-common button {
  font-size: 1.8em;
  line-height: 2em;
  
  border-radius:8px;
}
/* Left ボタン */
.move_check #modal_button1 button {
  width: 180px;
  border: 2px solid #27acd9;
  color: #27acd9;
  background-color: #fff;
  margin-right: 30px;
}
.move_check #modal_button1 button:hover {
  color: #fff;
  background: #27acd9;
}


/* Right ボタン */
.move_check #modal_button2 button {
  width: 100px;

  margin-right: 20px;
  border: 2px solid #6C6C6C;
  color: #fff;
  background-color: #ACACAC;
}
.move_check #modal_button2 button:hover {
  color: #fff;
  background: #6C6C6C;
}

@media screen and (max-width: 1050px) {
  .move_check #modal_button1 button {
    width: 140px;
    margin-right: 30px;
  }
  /* Right ボタン */
  .move_check #modal_button2 button {
    width: 130px;
    margin-right: 10px;
    border: 2px solid #6C6C6C;
    letter-spacing: 0.005em;
  }
}