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

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


/*---------------------------
    #input_form 設定
----------------------------*/
#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"] , select {
    height:3.4vh;
    padding: 4px 10px;
    font-size: 1.8rem;
  }
  textarea {
    height:16vh;
    vertical-align: top;
    padding: 6px 10px;
    font-size: 1.8rem;
    line-height: 2.4rem;
  }

  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;
  }


  /*  .help-block の設定 */
  .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 横並びスペース -----*/
 #pref , #city {
   width: 46%;
 }
 #city {
    margin-left: 3%;
 }
  /* セレクトBOX 幅 PC */
  .sele-w1 { width:46%; }

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

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


}

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

  #input_form {
  
    input[type="text"] , textarea , select {
      font-size:2.8rem;
      line-height:3.6rem;
    }
  
    input[type="text"] , textarea {
      width:94%;
    }

    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:3rem;
    }
    
    p.error-text {
      font-size:1.8rem;
    }

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

    .error-text {
    }

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


    select {
      width: 98%;
    }
    #city {
      margin-top: 6px;
    }
    /* セレクトBOX 幅 SP */
    .sele-w1 { width:98%; }


  } /*-- end #input_form --*/


}


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



/*---------------------------
    ボタン設定
----------------------------*/
#input_form , .modal-cont{
  .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;
    }
  }
}



/*----- 内容の確認ボタン Color Color -----*/
.btn-confirma {
  color: #333;
  border: solid 1px #333;
}
.btn-confirma:hover , .btn-close:hover {
  color: #fff;
  background: #c80064;
  border: solid 1px #840042;
}

/*----- 戻る・閉じる ボタン Color -----*/
.btn-return , .btn-close {
  color: #333;
  border: solid 1px #333;
  background: #9e9e9e;
}
.btn-return:hover ,  .btn-close:hover {
  color: #fff;
  background: #afafaf;
}

/*----- 登録・送信実行 ボタン Color -----*/
.btn-submit {
  color: #fff;
  background: #c80064;
  border: solid 1px #840042;
}
.btn-submit:hover {
  color: #fff;
  background: #ff0482;
}


/*----- ボタン横並び -----*/
.btn-inline  {
  display: flex;
  justify-content: center;
}




/*---------------------------
  モーダル 共通設定
----------------------------*/
.modal-cont {
  border-radius: 10px; 
}



/*---------------------------
  プレビュー 基本設定
----------------------------*/
.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;
  }
}





/*---------------------------
    チェックBOXの設定
----------------------------*/
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; /* チェック時の背景色 */
}





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

}

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

}




/* ------------------------------------------------------------- */
/* 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: #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;
}