/*-------------------------------------------------------------------------------------
フォーム(section id="form")
----------------------------------------------------------------------------------------*/
/*--------------------------------------------------
ブラウザ固有のフォームCSSをリセット
-----------------------------------------------------*/
/* テキスト テキストエリア */
input[type="text"], input[type="email"], input[type="tel"], input[type="date"], input[type="number"],textarea{
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-color: transparent;
  background-image: none;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 0;
  color: inherit;
  font-family: inherit;
  font-size: 2.4rem;
  padding: 0.4em 0.8em;
  width: 100%;
}

input:focus, textarea:focus {
  border: 1px solid rgba(0, 0, 0, 0.7);
  box-shadow: none;
  outline: none;
}


/* チェックボックス ラジオボタン 共通リセット*/
input[type="checkbox"], input[type="radio"] {
  display: none;
}
input[type="checkbox"] + span, input[type="radio"] + span {
  cursor: pointer;
  display: inline-block;
  margin: 0 0.2em 0;
  padding: 0 0 0 1.2em;
  position: relative;
}

/* チェックボックス 作成 */
input[type="checkbox"] + span::before {
  -webkit-transform: translateY(-50%);
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 2px;
  content: "";
  display: block;
  height: 1em;
  left: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 1em;
}
input[type="checkbox"] + span::after {
  -webkit-transform: translateY(-50%) rotate(-45deg);
  border-bottom: 3px solid rgba(0, 0, 0, 0.7);
  border-left: 3px solid rgba(0, 0, 0, 0.7);
  content: "";
  display: block;
  height: 0.6em;
  left: 0;
  margin-top: -0.2em;
  opacity: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
  transition: all 0s ease 0s;
  width: 1em;
}
input[type="checkbox"]:checked + span::after {
  opacity: 1;
}

/* ラジオボタン 作成 */
input[type="radio"] + span::before {
  -webkit-transform: translateY(-50%);
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.7);
  border-radius: 50%;
  content: "";
  display: block;
  height: 16px;
  left: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
}
input[type="radio"] + span::after {
  -webkit-transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid transparent;
  border-radius: 50%;
  content: "";
  height: 8px;
  left: 4px;
  opacity: 0;
  padding: 2px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: all 0s ease 0s;
  width: 8px;
}
input[type="radio"]:checked + span::after {
  opacity: 1;
}

/* セレクトボックス リセット */
select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background: transparent url(https://haniwaman.com/wp/wp-content/uploads/2018/12/form-css-arrow.png) no-repeat center right 8px/16px 16px;
  border: 1px solid rgba(0, 0, 0, 0.16);
  border-radius: 0;
  color: inherit;
  cursor: pointer;
  font-family: inherit;
  font-size: 1em;
  padding: 0.4em 0.8em;
  width: 100%;
}
select::-ms-expand {
  display: none;
}

/* セレクトボックス選択時 */
select:focus {
  border: 1px solid rgba(0, 0, 0, 0.32);
  box-shadow: none;
  outline: none;
}

/* 送信ボタン リセット */
input[type="submit"] {
  -webkit-appearance: none;
  background-color: rgba(0, 0, 0, 0.32);
  background-image: none;
  border: none;
  border-radius: 0;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-size: 1em;
  margin: 0 0 1em;
  padding: 0.6em 2em;
  text-decoration: none;
}
input[type="submit"] :hover,
input[type="submit"] :focus {
  outline: none;
}
input[type="submit"] ::-moz-foucus-inner {
  border: none;
  padding: 0;
}

/*--------------------------------------------------
フォーム基本設定
-----------------------------------------------------*/
.mail-input{
  margin-bottom: 2.4rem;
  font-size: 2.4rem;
}
.mail-input::placeholder{
  text-align: center;
  font-size: 2.4rem;
}

.submit-btn{
  width: 100%;
}
.submit-btn:focus{
  border: none;
}
.submit-btn:hover{
  opacity: 0.8;
  transition: all 0.3s;
}

/*--------------------------------------------------
Contact Form 7カスタマイズ
-----------------------------------------------------*/
/* フォーム要素 基本設定 */
input[type="text"], input[type="email"], input[type="tel"], input[type="date"], select{
  width: 100%;
  height: 9rem;
}
input[type="number"] {
  width: 100px;
  height: 9rem;
}
textarea{
  width:100%;
  min-height: 300px;
  line-height: 1.7;
}

/* 全体レイアウト */
.form-table{
  border-collapse: collapse;
  margin-bottom: 30px;
}

/* 見出し蘭・通常蘭共通 */
.form-table th,.form-table td {
  border-bottom:2px dotted #ddd;
  padding: 25px 20px;
  background:#fff;
  vertical-align: middle;
}

/*見出し欄*/
.form-table th{
  position: relative;
  width:30%;
  text-align:left;
  font-size:16px;
}
.form-table th span:nth-child(2){
  font-weight: bold;
}

/*入力欄*/
.form-table td{
  font-size:14px;
}

/* 「必須」「任意」 共通 */
.required, .any{
  position: relative;
  bottom:1px;
  margin-right: 7px;
  padding:3px 5px;
  font-size:7px;
  color:#fff;
}
/*必須背景色*/
.required{
  background:#ff0000;
}
/*任意背景色*/
.any{
  background:#777;
}

/* 「チェックボックス」「ラジオボタン」のラベル位置調整 */
.wpcf7-list-item-label{
  position: relative;
  bottom:2px
}

/* 横並びチェックボックス 余白調整*/
.wpcf7-list-item{
  margin-left: 10px;
}
.wpcf7-list-item:first-child{
  margin-left: 0;
}

/*縦並びチェックボックス 余白調整*/
.verticallist .wpcf7-list-item{
  display:block;
  margin-bottom: 8px;
  margin-left: 0;
}
.verticallist .wpcf7-list-item:last-child{
  margin-bottom: 0;
}


/*--------------------------------------------------
スマホ用フォームカスタマイズ
-----------------------------------------------------*/
@media only screen and (max-width:750px){
  .mail-input{
    font-size: 2.8rem!important;
  }
  .mail-input::placeholder{
    font-size: 2.8rem!important;
  }
}

/*--------------------------------------------------
タブレットContact Form 7カスタマイズ
-----------------------------------------------------*/

@media only screen and (min-width: 600px) and (max-width: 1024px){
  #form{
      padding: 6vw 30px;
  }
  .form_tit{
      margin-bottom: 3vw;
      font-size: 30px;
  } 
  .form_read-txt{
      margin-bottom: 3vw;
      font-size: 18px;
  }
  .form-area{
      padding:3vw;
  }

  /* 見出し蘭・通常蘭共通 */
  .form-table th,.form-table td {
    padding: 20px 15px;
  }
  input[type="text"], input[type="email"], input[type="tel"], input[type="date"], select{
    width: 100%;
  }
}

/*--------------------------------------------------
スマホContact Form 7カスタマイズ
-----------------------------------------------------*/
@media(max-width:599px){

  /* フォームエリア全体 */
  #form{
      padding: 4vw 4.66vw;
  }
  .form_tit{
      font-size: 24px;
      margin-top: 30px;
      margin-bottom: 4vw;
  }   
  .form_read-txt{
      margin-bottom: 12px;
      font-size: 14px;
  }
  .form-area{
      padding: 4vw 3.866vw;
  }
  .form-table th,.form-table td {
      display:block!important;
      width:100%!important;
      border-top:none!important;
      -webkit-box-sizing:border-box!important;
      -moz-box-sizing:border-box!important;
      box-sizing:border-box!important;
      padding: 20px 1vw;
      font-size: 14px;
  }
  .form-table th{
      border-bottom: none;
      padding-bottom: 0;
  }
  .form-table td{
      padding-top: 7px;
  }
  /* テキスト・テキストエリア・クイズのinput横幅  */
  input[type="text"], input[type="email"], input[type="tel"], input[type="date"], input[type="number"]{
      width: 100%;
  }
  /* 必須・任意の文字サイズ調整 */	
  .required, .any {	
      font-size:10px;
  }
  /* 送信ボタン横幅  */
  #formbtn{
      width: 100%;
  }

}