/* 1. フォームのグレー背景を画面内に収める */
.wpcf7-form {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 680px !important;
  margin: 0 auto !important;
  background-color: #f1f1f1;
  padding: 20px !important;
  border-radius: 5px;
}

/* 2. CF7が勝手に追加する「見えない枠（span）」のはみ出しを防止（最重要） */
.wpcf7-form-control-wrap {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* 3. 入力欄（白い箱）自体が枠をはみ出さないように強制 */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form textarea,
.wpcf7-form select {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* 4. 必須マーク */
.wpcf7-form small.text-danger {
  color: #fff !important;
  background-color: #dc3545;
  font-size: 75%;
  padding: 0.1em 0.3em;
  margin-left: 0.5em;
  display: inline-block;
}

/* 5. 入力確認のチェックボックスを大きく */
form .wpcf7-acceptance input[type="checkbox"] {
  transform: scale(2.0);
  margin-right: 0.5em;
}

/* 6. 送信ボタンをぴったり中央に配置 */
.wpcf7-submit.btn {
  display: block !important;
  margin: 20px auto 0 auto !important;
}

/* =========================================
   追加：チェックボックス周りと注釈テキストの調整
========================================= */

/* 「入力内容を確認しました」の上下にスペースを作る */
.wpcf7-acceptance {
  display: block !important;
  margin-top: 15px !important;    /* 上のスペース（お好みで10pxなどに調整してください） */
  margin-bottom: 15px !important; /* 下のスペース */
}

/* 「確認画面は表示されません〜」の文字を小さくする */
.notice-text {
  font-size: 85% !important; /* 通常の85%のサイズにする */
  line-height: 1.6 !important; /* 行間を少し開けて読みやすく */
  color: #555 !important;      /* 任意：少しグレーにして注釈っぽくしています */
}