/* ============================================================
   CF7 デザイン対応 CSS
   既存CSSに追記してください（上書きではなく追記）

   MW WP Form 固有クラスを CF7 クラスに置き換えた差分です。
   既存CSSの末尾に貼り付けてください。
============================================================ */

/* ----
   ラジオボタン
   .mwform-radio-field → .wpcf7-radio .wpcf7-list-item
---- */
.form table .wpcf7-radio {
  display: block;
}

.form table .wpcf7-radio .wpcf7-list-item {
  display: inline-block;
  margin-left: 0;
  margin-bottom: 14px;
}

.form table .wpcf7-radio .wpcf7-list-item label {
  display: flex;
  align-items: center;
}

/* flex_item2 (返信方法) 内のラジオボタン */
.form table .flex_item2 .wpcf7-list-item {
  margin-right: 24px;
  display: inline-block;
}

/* flex_item 内のラジオボタン */
.form table .flex_item .wpcf7-list-item {
  display: inline-block;
  margin-top: 0;
  margin-right: 48px;
}

@media screen and (max-width: 767.9px) {
  .form table .flex_item .wpcf7-list-item {
    margin-right: 24px;
  }
}

/* ラジオ/チェックボックスのテキスト
   .mwform-radio-field-text / .mwform-checkbox-field-text → .wpcf7-list-item-label */
.wpcf7-list-item-label {
  vertical-align: middle;
}

/* リストアイテム間の余白
   .mw_wp_form .horizontal-item + .horizontal-item → .wpcf7-list-item + .wpcf7-list-item */
.wpcf7-list-item + .wpcf7-list-item {
  margin-left: 0 !important;
  margin-top: 16px;
}

@media screen and (max-width: 767.9px) {
  .wpcf7-list-item + .wpcf7-list-item {
    margin-top: 0;
  }
}

.flex_item .wpcf7-list-item + .wpcf7-list-item {
  margin-top: 0;
}

/* ----
   チェックボックス
   .mwform-checkbox-field → .wpcf7-checkbox
---- */
.form table tr .wpcf7-checkbox .wpcf7-list-item label {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 16px;
}

.form table tr .wpcf7-checkbox .wpcf7-list-item input[type="checkbox"] {
  width: 24px;
  height: 24px;
  min-width: 24px;
  margin-right: 16px;
  margin-bottom: 0;
  margin-top: 1px;
}

@media screen and (max-width: 767.9px) {
  .form table tr .wpcf7-checkbox .wpcf7-list-item input[type="checkbox"] {
    width: 20px;
    height: 20px;
    min-height: 20px;
  }
}

/* 個人情報保護方針 チェックボックステキスト */
.form .privacy_policy_check .wpcf7-list-item-label {
  vertical-align: middle;
  margin-left: 16px;
}

/* ----
   電話番号 (3分割フィールドのラッパー)
   .mwform-tel-field → .tel-field-wrap
---- */
.form table .tel-field-wrap {
  display: flex;
  justify-content: flex-start;
  gap: 16px;
  align-items: center;
  font-size: 2.4rem;
  color: #333;
}

@media screen and (max-width: 767.9px) {
  .form table .tel-field-wrap {
    gap: 8px;
  }
}

.form table .tel-field-wrap input[type="text"] {
  width: 120px;
  max-width: 27%;
  height: 56px;
  padding: 16px 32px;
  border: solid 1px #c8c8c8;
  background: #fff;
  margin-right: 0;
  margin-bottom: 0;
}

@media screen and (max-width: 767.9px) {
  .form table .tel-field-wrap input[type="text"] {
    padding: 12px 16px;
    height: auto;
  }
}

/* ----
   CF7 バリデーションエラー表示
---- */
.wpcf7-not-valid-tip {
  color: #c0392b;
  font-size: 1.4rem;
  margin-top: 8px;
  display: block;
}

.wpcf7-response-output {
  border: solid 1px #c0392b !important;
  color: #c0392b;
  padding: 16px !important;
  margin: 16px 0 0 !important;
  font-size: 1.4rem;
}

/* ----
   CF7 submit ボタン (input[type="submit"] をフォームデザインに合わせる)
---- */
.form .submit input[type="submit"] {
  text-align: left;
  cursor: pointer;
  width: 100%;
  height: 100%;
  line-height: 8.8rem;
  font-size: 1.6rem;
  transition: all 0.2s;
  box-sizing: border-box;
  font-family: "Zen Old Mincho", serif;
  border: solid 1px #c8c8c8;
  padding-left: 40px;
  letter-spacing: 0.05em;
  border-radius: 2px;
  background: #fff;
  color: #333;
  -webkit-appearance: none;
}

.form .submit input[type="submit"]:hover {
  background: #f9f9f9;
  border-color: #f9f9f9;
}

/* ----
   CF7 スピナー非表示 (送信中のアニメーション位置調整)
---- */
.wpcf7 .ajax-loader {
  display: none;
}


.form table tr.tel .tel-field-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.form table tr.tel .tel-field-wrap input[type="text"] {
  width: 120px !important;
  max-width: 27% !important;
  height: 56px !important;
  padding: 16px !important;
  border: solid 1px #c8c8c8 !important;
  background: #fff !important;
  margin-bottom: 0 !important;
}

@media screen and (max-width: 767.9px) {
  .form table tr.tel .tel-field-wrap input[type="text"] {
    height: 40px !important;
    padding: 8px !important;
  }
}

/* 電話番号 フィールド修正 */
.form table tr.tel td p {
  display: flex;
  align-items: center;
  gap: 8px;
}

.form table tr.tel td .wpcf7-form-control-wrap {
  display: inline-block;
  width: auto;
}

.form table tr.tel td input[type="text"] {
  width: 100px !important;
  height: 56px !important;
  padding: 16px !important;
  border: solid 1px #c8c8c8 !important;
  background: #fff !important;
  margin-bottom: 0 !important;
}

@media screen and (max-width: 767.9px) {
  .form table tr.tel td input[type="text"] {
    width: 80px !important;
    height: 40px !important;
    padding: 8px 12px !important;
  }
}