/*
Theme Name: 全日本不動産協会宮城県本部
Version: 1.0
Author: CREATEONE
*/

@media (max-width: 767.98px) {
    body{
        font-size: 14px;
    }
    .form-control,
    .form-select{
        font-size: 16px;
    }
}

/* =========================================================
   Contact Form 7 × Bootstrap5  装飾CSS（完全統合版）
   名前空間: .cf5
   ---------------------------------------------------------
   ・アクセント: #5e7e15
   ・md以上は Grid で dt/dd を等高＆2カラム
   ・dtは薄いグレー背景（#f8f9fa）
   ・ラベル固定幅 240px（必要に応じて調整可）
   ・radio/checkbox の文字シャドウ無効化
   ・余白・境界・フォーカス・バリデーション・ボタン強調
   ========================================================= */

/* カスタムプロパティ */
.cf5 {
  --cf5-accent: #5e7e15;  /* 強調色 */
  --cf5-label-bg: #f8f9fa;/* dt 背景（薄いグレー） */
  --cf5-field-bg: #ffffff;/* dd 背景 */
  --cf5-border:  #e5e9e2; /* 枠線 */
  --cf5-danger:  #dc3545; /* エラー色 */
  --cf5-muted:   #6c757d; /* 補足テキスト */
}
@media (max-width: 767.98px) {
    .cf5{
        display: block!important; /* スマホではブロック表示 */
    }
}

/* 基本レイアウト（スマホは縦積み） */
.cf5 .row { --bs-gutter-x: 1rem; }

/* dt / dd 共通の枠線と余白（スマホ基準） */
.cf5__label,
.cf5__field {
    border-bottom: 1px solid var(--cf5-border);
    padding: 1rem 1.25rem;
    margin-bottom: 0;
}

/* dt 外観 */
.cf5__label {
    background: var(--cf5-label-bg);
    font-weight: 600;
    color: #212529;
    writing-mode: horizontal-tb; /* 横書きに強制 */
    text-align: left;
    white-space: nowrap;         /* 折返し防止 */
    display: flex;
    justify-content: space-between; /* 左右に配置 */
    align-items: center;
}

/* dd 外観 */
.cf5__field {
  background: var(--cf5-field-bg);
}

/* md以上：2カラムレイアウト */
@media (min-width: 768px) {

  .cf5 dl.row > dt,
  .cf5 dl.row > dd {
    margin: 0;
    padding: 1.25rem 1.5rem;             /* 余白を広めに */
  }

  /* セル風の境界（中央の二重線を防ぐ） */
  .cf5__label {
    border-right: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-width: 240px;                   /* 幅固定 */
  }
  .cf5__field {
    border-left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;                       /* 可変 */
  }

}

/* スマホ（縦積み時） */
@media (max-width: 767.98px) {
  .cf5__label { border-bottom: 0 !important; }
}

/* 必須バッジ（赤背景・白文字） */
.cf5__badge {
  display: inline-block;
  background: var(--cf5-danger);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  padding: 0.2em 0.6em;
  border-radius: 0.25rem;
  margin-left: .4em;
  vertical-align: middle;
  margin-left: auto; /* 念のため右寄せ強制 */
}


/* 補足テキスト（色） */
.cf5 .text-muted { color: var(--cf5-muted) !important; }

/* ラジオ/チェック群（CF7の .wpcf7-list-item をカード風に） */
.cf5 .wpcf7-list-item {
  margin: 0 .75rem .5rem 0;
  display: inline-flex;
}
.cf5 .wpcf7-list-item label {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .5rem .75rem;
  border: 1px solid var(--cf5-border);
  border-radius: .5rem;
  background: #fff;
  cursor: pointer;
  transition: border-color .15s, background-color .15s, color .15s;
  text-shadow: none !important;     /* 文字シャドウを常に無効化 */
}
.cf5 .wpcf7-list-item label:hover {
  text-shadow: none !important;     /* hover時もシャドウなし */
}
.cf5 .wpcf7-list-item input[type="radio"]:checked + span,
.cf5 .wpcf7-list-item input[type="checkbox"]:checked + span {
  color: #0d6efd;
  font-weight: 600;
  text-shadow: none !important;     /* 選択時もシャドウなし */
}

/* 郵便番号行の隙間（補助） */
.cf5 .gap-2 { gap: .5rem !important; }

/* バリデーション（CF7標準クラス） */
.cf5 .wpcf7-not-valid {
  border-color: var(--cf5-danger) !important;
  box-shadow: 0 0 0 .25rem rgba(220, 53, 69, .12) !important;
}
.cf5 .wpcf7-not-valid-tip {
  color: var(--cf5-danger);
  margin-top: .25rem;
  font-size: .875rem;
}

/* 送信ボタン（大きく・目立つ） */
.cf5__submit.btn {
  background: var(--cf5-danger);
  border-color: var(--cf5-danger);
  color: #fff;
  border-radius: .75rem;
  letter-spacing: .05em;
  font-weight: 700;
  transition: filter .15s ease, transform .05s ease;
}
.cf5__submit.btn:hover,
.cf5__submit.btn:focus {
  filter: brightness(0.95);
  color: #fff;
}
.cf5__submit.btn:active { transform: translateY(1px); }

/* 幅：スマホは全幅、md以上で自動幅 */
.cf5__submit.btn.w-100 { width: 100% !important; }
@media (min-width: 768px) {
  .cf5__submit.btn.w-md-auto { width: 300px !important; }
}

/* CF7のレスポンスメッセージ */
.cf5 .wpcf7 form .wpcf7-response-output {
  margin: 1rem 0 0;
  padding: .75rem 1rem;
  border: 1px solid var(--cf5-border);
  border-left: .3rem solid var(--cf5-accent);
  background: #f9fcf4;
  color: #1f2d16;
}
.cf5 .wpcf7 form.invalid .wpcf7-response-output {
  border-left-color: var(--cf5-danger);
  background: #fff5f5;
  color: #5a1f22;
}