/* =========================================================
   CO・COでんき：フォーム最適化CSS（完全置き換え版）
   - CF7最低限 + 旧contact_* の必要要素だけ再構成
========================================================= */

/* --------------------------------------------------------
   0) CF7 ベース
-------------------------------------------------------- */
.wpcf7-form {
  max-width: 960px;
  margin: 0 auto;
}
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
  width: 90%;
  padding: 12px 14px;
  border: 1px solid #ddd;
  border-radius: 8px;
}
.wpcf7-submit {
  background: var(--color-primary);
  color: #fff;
  border: none;
  padding: 12px 24px;
  border-radius: 9999px;
}

/* バリデーション */
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed  .wpcf7-response-output {
  border-color: #E53935;
  color: #E53935;
}

/* --------------------------------------------------------
   1) ボタン（btn）統合
-------------------------------------------------------- */
/* 基本 */
.denki .btn,
.denki .contact_btn .btn-confirm input,
.denki .contact_btn .btn-submit input,
.denki .contact_btn .btn-back input {
  appearance: none;
  border: 0;
  cursor: pointer;
  transition: .3s;
  line-height: 1;
  text-align: center;
  display: block;
  border-radius: 3.5em;
  font-weight: 500;
  padding: 1.2em 1.5em;
}
.denki .contact_btn .btn-confirm input,
.denki .contact_btn .btn-submit input,
.denki .contact_btn .btn-back input {
  margin-left: auto;
  margin-right: auto;
}

/* サイズ（共通） */
@media (max-width: 767px) {
  .denki .btn,
  .denki .btn-long,
  .denki .btn-medium,
  .denki .btn-short,
  .denki .contact_btn .btn-confirm input,
  .denki .contact_btn .btn-submit input,
  .denki .contact_btn .btn-back input {
    width: 84vw;
    margin-left: auto;
    margin-right: auto;
  }
}
@media (min-width: 768px) {
  .denki .btn-long,
  .denki .contact_btn .btn-confirm input,
  .denki .contact_btn .btn-submit input,
  .denki .contact_btn .btn-back input {
    width: 350px;
  }
}

/* 色 */
.denki .btn-primary,
.denki .contact_btn .btn-confirm input,
.denki .contact_btn .btn-submit input {
  background: #de624a;
  border: 2px solid #de624a;
  color: #fff !important;
}
.denki .btn-white,
.denki .contact_btn .btn-back input {
  background: #fff;
  border: 2px solid #de624a;
  color: #333 !important;
}

/* → 矢印 */
.denki .btn-arrow,
.denki .contact_btn .btn-confirm,
.denki .contact_btn .btn-submit,
.denki .contact_btn .btn-back {
  position: relative;
}
.denki .btn-arrow::after,
.denki .contact_btn .btn-confirm::after,
.denki .contact_btn .btn-submit::after,
.denki .contact_btn .btn-back::after {
  content: "\e5e1";
  font-family: "Material Icons Round";
  position: absolute;
  top: 50%;
  right: 1em;
  transform: translateY(-50%);
}
.denki .contact_btn .btn-back::after {
  left: 1em;
  right: auto;
  transform: translateY(-50%) rotate(180deg);
  color: #de624a;
}

/* --------------------------------------------------------
   2) contact_content ブロック
-------------------------------------------------------- */
.denki .contact_content + .contact_content {
  margin-top: 60px;
}
@media (max-width: 767px) {
  .denki .contact_content + .contact_content {
    margin-top: 16vw;
  }
}

/* 見出し */
.denki .contact_content_heading {
  color: #fff;
  background-color: #a38d7c;
  border-radius: 6px;
  padding: 10px 16px;
  margin-bottom: 30px;
}
@media (max-width: 767px) {
  .denki .contact_content_heading {
    border-radius: 1.6vw;
    padding: 2.666vw 4.266vw;
    margin-bottom: 8vw;
  }
}

/* --------------------------------------------------------
   3) 項目行 contact_item
-------------------------------------------------------- */
.denki .contact_item {
  border-top: 1px solid #d2d2d2;
  padding: 20px 0;
}
.denki .contact_item:last-of-type {
  border-bottom: 1px solid #d2d2d2;
}
@media (max-width: 767px) {
  .denki .contact_item {
    padding: 5.333vw 0;
  }
}

/* チェックボックス */


/* 姓／名 行 */
.denki .contact_item_content {
  display: flex;
  justify-content: center;   /* 行全体を中央寄せ */
  align-items: center;
  gap: 8px;                  /* ラベルと入力の間 */
}

/* ラベルは幅指定しない（必要なら最小幅だけ指定） */
.denki .contact_item_text {
  flex: 0 0 auto;
  /* text-align: center;  // 文字自体も中央にしたければ */
}

/* 入力欄はある程度の横幅だけ持たせる */
.denki .contact_item_content input {
  flex: 0 0 260px;
  max-width: 100%;
}

/* SP は縦積みしたければ */
@media (max-width: 767px) {
  .denki .contact_item_content {
    flex-direction: column;
    align-items: stretch; /* か center, お好みで */
  }
}

/* 郵便番号 */
.denki .contact_item_zip {
  display: flex;
  align-items: center;
  justify-content: center;

}
.denki .contact_item_zip input[type="text"] {
  width: 5em;
}

/* --------------------------------------------------------
   3-b) チェックボックス・ラジオ（denki 用シンプル版）
   - ブラウザ標準の見た目を使う
   - ラベルとの距離だけ調整
-------------------------------------------------------- */
.denki input[type="checkbox"],
.denki input[type="radio"] {
  display: inline-block;
  margin-right: .4em;
}

/* --------------------------------------------------------
   4) 注意書きボックス
-------------------------------------------------------- */
.denki .contact_box {
  background: #f7f5ed;
  text-align: left;
  padding: 30px;
  border-radius: 20px;
  margin-top: 20px;
}
@media (max-width: 767px) {
  .denki .contact_box {
    padding: 4vw;
    border-radius: 5.333vw;
    margin-top: 5.333vw;
  }
}
 .denki .contact_box ul {
    list-style: none;
    margin: 0;
    padding-left: 0;
  }
  .denki .contact_box a {
  color: #de624a;
  text-decoration: underline;
}
/* 個人情報同意チェック用 contact_box_input */
.denki .contact_box_input {
  position: relative;
  text-align: center;
}

@media (min-width: 768px) {
  .denki .contact_box_input {
    margin-top: 35px;
  }
}

@media (max-width: 767px) {
  .denki .contact_box_input {
    margin-top: 9.3333333333vw;
  }
}

.denki .contact_box_input .wpcf7-not-valid-tip,
.denki .contact_box_input .error {
  position: absolute;
  right: 50%;
  width: 100%;
}

@media (min-width: 768px) {
  .denki .contact_box_input .wpcf7-not-valid-tip,
  .denki .contact_box_input .error {
    bottom: 0;
    transform: translate(50%, 90%);
  }
}

@media (max-width: 767px) {
  .denki .contact_box_input .wpcf7-not-valid-tip,
  .denki .contact_box_input .error {
    top: -10.6666666667vw;
    transform: translate(50%, 65%);
  }
}
/* --------------------------------------------------------
   5) 必須ラベル（完全統合）
-------------------------------------------------------- */
.denki .contact .required,
.denki .contact_box_input .required {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 .5em;
  font-size: .85em;
  line-height: 1;
  color: #fff;
  background: #de624a;
  margin-left: 10px;
  min-width: 50px;
  min-height: 23px;
  border-radius: 3px;
}
@media (max-width: 767px) {
  .denki .contact .required {
    min-width: 13.333vw;
    min-height: 6.133vw;
    margin-left: 2.666vw;
    border-radius: .8vw;
  }
}

/* --------------------------------------------------------
   6) ボタン位置
-------------------------------------------------------- */
/* contact_btn 内のボタン位置（1カラム中央寄せ） */
.denki .contact_btn {
  text-align: center;
  margin-top: 30px;
}

/* wpcf7 出力の .btn / .wpcf7-submit を中央寄せ */
.denki .contact_btn .btn,
.denki .contact_btn .wpcf7-submit {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 16px;

}

/* --------------------------------------------------------
   7) 確認画面・バリデーション
-------------------------------------------------------- */
.denki .contact_form .wpcf7-not-valid-tip {
  color: #b70000;
  display: block;
  font-size: 93%;
}
.denki .contact_input .btn-submit,
.denki .contact_input .btn-back,
.denki .contact_input .contact_box-2,
.denki .contact_confirm .contact_item_content_text,
.denki .contact_confirm .contact_item_text {
  display: none;
}
.denki .contact_confirm .required,
.denki .contact_confirm .btn-confirm {
  display: none;
}