/* ------------------------------------------------------------- */
/* StyleSection   Input パーツ 設定 CSS                          */
/* ------------------------------------------------------------- */


/*---------------------------
    input ・ select を横並び
----------------------------*/
.flex-input {
  display: flex;
  width:100%;

  div {
   box-sizing: border-box; 
   width:50%;
   
   select {
     width: 91%;
   }
 }
}

/*---------------------------
    #input_form 設定
----------------------------*/

/*-- end #input_form PC --*/
#input_form {
  input[type="text"] , textarea , select {
    border: none;
    background: #F0F0F0;
    border-radius: 6px;
  }

  input[type="text"] , textarea {
    width:92%;
  }

  /* 上部説明文表示 */
  .form__must {
    color: #d20069;
  }

  input[type="text"]{
    padding: 10px 10px;
    font-size: 1.8rem;
  }
  select {
    font-size: 1.8rem;
  }
  textarea {
    height:16vh;
    vertical-align: top;
    padding: 6px 10px;
    font-size: 1.8rem;
    line-height: 2.4rem;
  }
} 

/*-------------------------------
 入力ボックス PC レイアウト設定
--------------------------------*/
#input_form {

  dl.form__row {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 10px 0;
    border-bottom: 2px solid #5b533c; 
    padding:4px;  
  }

  dt {
    width: 35%;
    color:#4E4530;
    font-size: 2rem;
    font-weight:400;
  }
  dd {
    width: 65%;
  }

  p.form__must {
    font-size:1.8rem;
  }
  
  p.error-text {
    color: #d20069;
    font-size:1.4rem;
  }

  .note {
    margin-top: 20px;
    text-align: center;
    p {
      font-size:1.8rem;
      color:#4E4530;
    }
  }

  .error-text {
    color: #de3f2e;
    margin-top: 2px;
  }

}



/*---------------------------
  ここだけ SELECT の調整
----------------------------*/
#ｗork_item {
	padding: 8px;
}



/*---------------------------
  .help-block の設定
----------------------------*/
#input_form {
  .consent_inner {
    padding-bottom: 20px;
    text-align: center;
    border-bottom: 2px solid #5b533c; 

    .help-block span {
      color:#4E4530;
      font-size:1.8rem;
      a {
        font-size: 1.8rem;
        color: #850042;
      }
    }
    label{
      vertical-align: middle;
      color:#4E4530;
    }
    label:hover{
      color:#a60053;
    } 
  }
}


/*---------------------------
 セレクトBox 横並びスペース
----------------------------*/
#input_form {
  /*----- 都道府県 幅 PC -----*/
  #pref , #city {
    width: 46%;
  }
  #city {
    margin-left: 3%;
  }

  /*----- セレクトBOX 幅 PC -----*/
  .sele-w1 { width:46%; }

  .sele-w90 { width:90%; }
  .sele-w100 { width:100%; }

}


/*---------------------------
    チェックBOXの設定
----------------------------*/
#input_form {
	input[type="checkbox"] {
	  border-radius: 8px;
	  vertical-align: middle;
	  border: 2px solid #ccc;    /* チェック前の枠線色 */
	  background-color: #d9d9d9; /* チェック前の背景色 */
	  width: 22px;
	  height: 22px;
	}
	input[type="checkbox"]:checked {
	  accent-color: #fff; /* チェック時の背景色 */
	}
}



/*---------------------------
    登録ボタン設定
----------------------------*/
#input_form {

	.note p {
		width: 100%;
		border-top: 2px solid #333;
		padding-top: 12px;
		text-align: left;
		font-size: 1.4rem;
		line-height: 1.6rem;
	}

  .button-area{
    font-family: 'Noto Serif JP', serif;
    margin-top: 40px;
    text-align: center;

    .button-01 {
      display: block;
      box-sizing: border-box;
      max-width: 300px;
      padding: 14px 50px;
      margin: 24px;
      border-radius: 6px; 

      font-size: 1.8rem;
      letter-spacing: 0.1em;
      font-weight: 400;

      margin-inline: auto;
      text-decoration: none;
      cursor: pointer;
      transition: all 0.3s;
    }

    .button-01:hover {
      transition: all 0.3s;
    }
  }
}


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

@media screen and (max-width: 1050px) {
  .form-cont {
    width:100%;
  }
  .form-cont-inner {
    padding:12px 0;
  
  }

  /*-------------------------------
    入力ボックス SMP レイアウト設定
  --------------------------------*/
  #input_form {
  
    input[type="text"] , textarea , select {
      padding:6px;
      font-size:2rem;
    }
  
    input[type="text"] , textarea {
      width:94%;
    }
  }


  /*---------------------------
   セレクトBox SMP 並びスペース
  ----------------------------*/
  #input_form {

    select {
      width: 98%;
    }
    #city {
      margin-top: 6px;
    }
    .sele-w1 { width:98%; }

  }


  /*-------------------------------
    入力ボックス SMP レイアウト設定
  --------------------------------*/
  #input_form {
    dl.form__row {
      width: 100%;
    }
    dt {
      font-size:2.4rem;
      width: 100%;
    }
    dd {
      width: 100%;
      padding: 4px 10px;
    }

    p.form__must {
      padding: 0 6px;
      font-size:1.8rem;
    }
    
    p.error-text {
      font-size:1.8rem;
    }

    .note {
      p {
        font-size:2rem;
      }
    }
  }


  /*-------------------------------
     .help-block SMP 設定
  --------------------------------*/
  #input_form {
    .consent_inner {
      .help-block span {
        font-size: 2.4rem;
        a {
          font-size: 2.4rem;
        }
      }
    }
  }



	/*---------------------------
	    ボタン設定
	----------------------------*/
	#input_form {
	
		.note p {
			font-size: 1.5rem;
			line-height: 1.6rem;
		}
	
	  .button-area{
	    margin-top: 20px;

	    .button-01 {
	      font-size: 1.4rem;
	    }

	    .button-01:hover {
	      transition: all 0.3s;
	    }
	  }
	}
}


/* ------------------------------------------------------------- */
/* StyleSection   Remodal 関連 CSS                               */
/* ------------------------------------------------------------- */

/* *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*
  .modal-edit-css remodal 設定
*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-* */
.modal-edit-css {
	h1{
		color:#2D2D2D;
	}
	#edit-inner {
	 color: #2D2D2D;
	}
	#edit-btn-l {
	  color: #fff;
	  background-color: #939393;
	  margin-right: 140px;
	}
	#edit-btn-l:hover {
	  background-color: #ccc;
	}
	#edit-btn-r {
    color: #fff;
	  background-color: #00B6D8;
	}
	#edit-btn-r:hover {
	  background-color: #00CEF2;
	}

}


/* *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*
  .preview remodal設定
*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-* */
.modal-cont.preview {

  h2 {
    color: #5b5139;
    font-size:3rem;
    width: 80%;
    border-bottom: 2px solid #5b533c; 
    text-align: center;

    margin: 0 auto;  /* 中央寄せ */
  }
 
  .preview-cont {
    margin-top: 40px;
  }

  dl.form__row {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 10px 0;
    border-bottom: 2px solid #5b533c; 
    padding:4px; 
    text-align: left; 
  }

  dt {
    width: 40%;
    color:#4E4530;
    font-size: 2rem;
    font-weight:400;
  }
  dd {
    width: 60%;
    min-height: 5rem;
    font-size: 2.2rem;
    
    .textarea-cont {
      padding-right: 2px;
      padding-bottom: 8px;
      line-height: 2.8rem;;
    }

  }
  .note {
    margin-top: 20px;
    text-align: center;
    p {
      font-size:1.8rem;
      color:#4E4530;
      text-align: left;
      line-height: 2rem;
    }
  }
}



/*---------------------------
  プライバシーポリシー設定
----------------------------*/
.modal-cont.prapoli {
  h2 {
    color: #5b5139;
  }
  dl {
    margin-top: 20px;
    color:#4E4530;
  }
  dt , dd {
    text-align: left ;
  }
  dt {
    margin-top: 8px;
    font-size: 1.8rem;
  }
  dd {
    font-size: 1.4rem;
  }
  ul {
    padding: 0 40px;
  }
  li {
    line-height: 1.6rem;
  }
}



/* ------------------------------------------------------------- */
/* StyleSection   パーツ CSS                                     */
/* ------------------------------------------------------------- */

/* ----- 必須マーク  ----- */
.form__row dt span {
  margin-left:10px;
  font-size:1.3rem;
  padding: 2px 6px;
  border-radius: 10px;
  color: #fff;
  background-color: #E67D9A;
}





/*---------------------------
  エラー表示 div 設定
----------------------------*/
.input-group div {
   font-size: 1.4rem;
   color:#FF8282;
}


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

/* 必須入力 ( 未入力 )*/
*[required] {
  outline: solid 1px #fd8c8c;
  background-color: #f0f0f0;
}

*[required].is-invalid {
  outline: solid 2px #fd8c8c;
  background-color: #f0f0f0;
}

/* 入力が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;
}