:root {
  --cf7-font: "Segoe UI", "Helvetica Neue", Arial, "Noto Sans JP", sans-serif;
  --cf7-bg: #ffffff;
  --cf7-text: #1f2937;   /* ダークグレー */
  --cf7-border: #d1d5db; /* 薄グレー */
  --cf7-focus: #0a58ca;  /* 企業ブルー */
  --cf7-error: #dc3545;  /* 赤 */
  --cf7-success: #198754;/* 緑 */
  --cf7-radius: 4px;     /* 角丸控えめ */
  --cf7-space: 14px;
}

/* コンテナ */
.wpcf7 {
  max-width: 640px;   /* 好みで 480〜720px 程度に調整 */
  margin: 0 auto;     /* 中央寄せ */
  padding: 0 20px;    /* 画面端で余白を確保 */
  font-family: var(--cf7-font);
  color: var(--cf7-text);
}

/* 送信ボタンのラッパーを中央寄せ */
.wpcf7-form .wpcf7-submit {
  display: inline-block; /* ボタンをインラインブロックに */
}

.wpcf7-form p:has(.wpcf7-submit) {
  display: flex;
  justify-content: center; /* 横方向中央寄せ */
}

/* ラベル */
.wpcf7-form label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--cf7-text);
}

/* 入力フィールド */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea,
.wpcf7-form select {
  width: 100%;
  border: 1px solid var(--cf7-border);
  border-radius: var(--cf7-radius);
  padding: 10px 12px;
  background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.wpcf7-form input:focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus {
  outline: none;
  border-color: var(--cf7-focus);
  box-shadow: 0 0 0 2px rgba(10, 88, 202, 0.15);
}

/* ボタン */
.wpcf7-form input[type="submit"] {
  background: var(--cf7-focus);
  border: none;
  border-radius: var(--cf7-radius);
  color: #fff;
  font-weight: 600;
  padding: 12px 20px;
  cursor: pointer;
  transition: background-color .2s ease;
}
.wpcf7-form input[type="submit"]:hover {
  background: #084298; /* 濃いブルー */
}

/* エラーメッセージ */
.wpcf7-form .wpcf7-not-valid {
  border-color: var(--cf7-error);
}
.wpcf7-form .wpcf7-not-valid-tip {
  font-size: 0.9rem;
  color: var(--cf7-error);
  margin-top: 4px;
}

/* 成功・失敗メッセージ */
.wpcf7 form .wpcf7-response-output {
  margin-top: var(--cf7-space);
  padding: 10px 12px;
  border-radius: var(--cf7-radius);
  border: 1px solid var(--cf7-border);
}
.wpcf7 form.sent .wpcf7-response-output {
  border-color: var(--cf7-success);
  color: var(--cf7-success);
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
  border-color: var(--cf7-error);
  color: var(--cf7-error);
}