@charset "utf-8";
/**
 * Forms Styles
 * フォーム関連のスタイル
 */

/******************** お問い合わせフォーム ********************/
.contact_top {
  text-align: center;
  margin: 30px auto;
  border: 1px solid #ddd;
  background: #eee;
  padding: 20px;
  max-width: 550px;
  box-sizing: border-box;
  border-radius: 4px;
}

.contact_top p {
  margin-bottom: 4px !important;
}

.contact_top > p:first-child {
  font-size: 18px;
}

.contact_top .telfax {
  display: flex;
  justify-content: center;
}

.contact_top .telfax p{
  margin-bottom: 0 !important;
}

/******************** Contact Form 7 スタイル ********************/
.wpcf7-form {
  max-width: 550px !important;
  margin: 0 auto !important;
}

.wpcf7-form p {
  margin-right: 0 !important;
  margin-left: 0 !important;
}

.wpcf7-form p.label {
  margin-bottom: 4px !important;
  font-weight: bold !important;
}

/* 必須マーク（ラベル内） */
.wpcf7-form p.label .required {
  color: #dc3232 !important;
  font-size: 12px !important;
  font-weight: bold !important;
  margin-left: 8px !important;
  padding: 2px 6px !important;
  background: #ffe6e6 !important;
  border-radius: 3px !important;
  text-decoration: none !important;
}

.wpcf7-form .wpcf7-form-control.wpcf7-text,
.wpcf7-form .wpcf7-form-control.wpcf7-email,
.wpcf7-form .wpcf7-form-control.wpcf7-tel,
.wpcf7-form .wpcf7-form-control.wpcf7-number,
.wpcf7-form .wpcf7-form-control.wpcf7-date,
.wpcf7-form .wpcf7-form-control.wpcf7-select,
.wpcf7-form .wpcf7-form-control.wpcf7-textarea {
  padding: 8px !important;
  width: 100% !important;
  max-width: 550px !important;
  box-sizing: border-box !important;
  border: 2px solid #ddd !important;
  border-radius: 4px !important;
  transition: border-color 0.2s ease !important;
}

.wpcf7-form input.wpcf7-submit[type="submit"] {
  background: rgba(157, 0, 0, 1) !important;
  color: #ffffff !important;
  border-radius: 4px !important;
  font-weight: bold !important;
  padding: 8px 60px !important;
  border: none !important;
  cursor: pointer !important;
  display: block !important;
  margin: 20px auto 0 !important;
}

.wpcf7-form input.wpcf7-submit[type="submit"]:hover {
  background: rgba(157, 0, 0, .8) !important;
  font-weight: bold !important;
}

/******************** Contact Form 7 - バリデーションエラー ********************/
/* エラーメッセージ */
.wpcf7-form .wpcf7-not-valid-tip {
  color: #dc3232 !important;
  font-size: 14px !important;
  font-weight: normal !important;
  display: block !important;
  margin-top: 4px !important;
}

/* エラーのある入力フィールド */
.wpcf7-form .wpcf7-not-valid {
  border: 2px solid #dc3232 !important;
  background-color: #ffe6e6 !important;
}

/******************** Contact Form 7 - 送信結果メッセージ ********************/
/* メッセージの基本スタイル */
.wpcf7 form .wpcf7-response-output {
  border: 2px solid #ddd !important;
  margin: 20px 0 !important;
  padding: 15px !important;
  border-radius: 4px !important;
  font-weight: bold !important;
  display: block !important;
}

/* 初期状態・送信中・リセット中は非表示 */
.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form.resetting .wpcf7-response-output,
.wpcf7 form.submitting .wpcf7-response-output {
  display: none !important;
}

/* 成功メッセージ */
.wpcf7 form.sent .wpcf7-response-output {
  border-color: #46b450 !important;
  background-color: #ecf7ed !important;
  color: #46b450 !important;
}

/* バリデーションエラー（必須項目未入力など） */
.wpcf7 form.invalid .wpcf7-response-output {
  border-color: #dc3232 !important;
  background-color: #ffe6e6 !important;
  color: #dc3232 !important;
}

/* 送信失敗エラー */
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
  border-color: #dc3232 !important;
  background-color: #ffe6e6 !important;
  color: #dc3232 !important;
}

/* スパム判定メッセージ */
.wpcf7 form.spam .wpcf7-response-output {
  border-color: #f56e28 !important;
  background-color: #fff8e5 !important;
  color: #f56e28 !important;
}

/* 受付不可メッセージ（利用規約未同意など） */
.wpcf7 form.unaccepted .wpcf7-response-output {
  border-color: #ffb900 !important;
  background-color: #fff8e5 !important;
  color: #ffb900 !important;
}

/* 支払い必要メッセージ */
.wpcf7 form.payment-required .wpcf7-response-output {
  border-color: #ffb900 !important;
  background-color: #fff8e5 !important;
  color: #ffb900 !important;
}

/******************** Contact Form 7 - 必須項目マーク ********************/
/* 必須マーク */
.wpcf7-form .wpcf7-form-control-wrap .wpcf7-form-control.wpcf7-validates-as-required::after,
.wpcf7-form p.label abbr {
  content: "必須" !important;
  color: #dc3232 !important;
  font-size: 12px !important;
  font-weight: bold !important;
  margin-left: 4px !important;
  padding: 2px 6px !important;
  background: #ffe6e6 !important;
  border-radius: 3px !important;
  text-decoration: none !important;
}

/******************** Contact Form 7 - 送信中の状態 ********************/
/* 送信中のフォーム全体 */
.wpcf7-form.submitting {
  opacity: 0.7 !important;
  pointer-events: none !important;
}

/* 送信中のボタン */
.wpcf7-form.submitting input.wpcf7-submit[type="submit"] {
  background: #999 !important;
  cursor: not-allowed !important;
}

/* ローディング表示 */
.wpcf7 .ajax-loader {
  visibility: visible !important;
  display: inline-block !important;
  width: 20px !important;
  height: 20px !important;
  margin-left: 10px !important;
  vertical-align: middle !important;
  border: 3px solid rgba(157, 0, 0, 0.3) !important;
  border-radius: 50% !important;
  border-top-color: rgba(157, 0, 0, 1) !important;
  animation: spin 1s linear infinite !important;
  background: transparent !important;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* 送信完了後はローディングを非表示 */
.wpcf7 .ajax-loader.is-active {
  visibility: visible !important;
}

/******************** Contact Form 7 - フォーカス状態 ********************/
.wpcf7-form .wpcf7-form-control:focus {
  outline: none !important;
  border: 2px solid #007bff !important;
  box-shadow: 0 0 0 1px #007bff !important;
}

/******************** Contact Form 7 - レスポンシブ対応 ********************/
@media screen and (max-width: 600px) {
  .wpcf7-form {
    padding: 0 15px !important;
  }
  
  .wpcf7-form input.wpcf7-submit[type="submit"] {
    width: 100% !important;
    padding: 12px 20px !important;
  }
  
  .wpcf7-form .wpcf7-form-control.wpcf7-text,
  .wpcf7-form .wpcf7-form-control.wpcf7-email,
  .wpcf7-form .wpcf7-form-control.wpcf7-tel,
  .wpcf7-form .wpcf7-form-control.wpcf7-select,
  .wpcf7-form .wpcf7-form-control.wpcf7-textarea {
    font-size: 16px !important; /* iOS Safariでのズーム防止 */
  }
}

/******************** Contact Form 7 - チェックボックス・ラジオボタン ********************/
.wpcf7-form .wpcf7-list-item {
  margin: 0 0 8px 0 !important;
}

.wpcf7-form .wpcf7-list-item-label {
  margin-left: 8px !important;
}

.wpcf7-form input[type="checkbox"],
.wpcf7-form input[type="radio"] {
  width: auto !important;
  margin-right: 4px !important;
}

/******************** Contact Form 7 - 確認画面用（プラグイン使用時） ********************/
.wpcf7-form .wpcf7-confirm-table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 20px 0 !important;
}

.wpcf7-form .wpcf7-confirm-table th,
.wpcf7-form .wpcf7-confirm-table td {
  padding: 10px !important;
  border: 1px solid #ddd !important;
  text-align: left !important;
}

.wpcf7-form .wpcf7-confirm-table th {
  background: #f5f5f5 !important;
  font-weight: bold !important;
  width: 30% !important;
}

/******************** reCAPTCHA ********************/
.grecaptcha-badge {
  visibility: hidden;
}