/* =====================================================
   Contact Form 7 用スタイル(お問い合わせ・無料査定 共通)
   style.css の末尾に追加するか、別ファイルで読み込んでください。
   既存の .formStyle / .btn / .red / .reCAPTCHA のCSSがある場合は、
   このブロックが後ろに来るようにしてください。
   ===================================================== */
:root{
  --yk-ink:#13364A;      /* 文字・枠線 */
  --yk-primary:#0B6FA4;  /* メインの青 */
  --yk-bar:#1B5FAE;      /* 帯の青 */
  --yk-sky:#3DB5E6;      /* 水色 */
  --yk-cta:#FFCE2E;      /* 差し色(黄) */
  --yk-line:#9DC3D6;     /* 入力欄の枠線 */
  --yk-pale:#E3F3FB;     /* 淡い水色 */
  --yk-error:#B42318;    /* エラー・必須 */
}

/* --- フォーム全体(白いカード) --- */
.wpcf7 form.wpcf7-form{
  max-width:760px;
  margin:0 auto;
  box-sizing:border-box;
  padding:36px 28px;
  background:#fff;
  border:2px solid var(--yk-ink);
  border-radius:20px;
  box-shadow:8px 8px 0 var(--yk-sky);
  color:var(--yk-ink);
  font-size:16px;
  line-height:1.8;
}
.wpcf7 form.wpcf7-form p{margin:0}
.wpcf7 form.wpcf7-form dl{margin:0;padding:0}
.wpcf7 form.wpcf7-form dt{
  float:none;width:auto;
  margin:22px 0 6px;padding:0;
  font-weight:700;
}
.wpcf7 form.wpcf7-form dt:first-child{margin-top:0}
.wpcf7 form.wpcf7-form dd{float:none;width:auto;margin:0;padding:0}
.wpcf7 form.wpcf7-form .wpcf7-form-control-wrap{display:block}

/* --- 必須マーク --- */
.wpcf7 form.wpcf7-form .red{
  display:inline-block;
  margin-left:.4em;
  padding:0 .8em;
  border-radius:999px;
  background:var(--yk-error);
  color:#fff;
  font-size:12px;
  font-weight:700;
  line-height:22px;
  vertical-align:middle;
}

/* --- 入力欄 --- */
.wpcf7 form.wpcf7-form input[type="text"],
.wpcf7 form.wpcf7-form input[type="email"],
.wpcf7 form.wpcf7-form input[type="tel"],
.wpcf7 form.wpcf7-form textarea{
  display:block;
  width:100%;
  box-sizing:border-box;
  height:48px;
  padding:0 14px;
  border:2px solid var(--yk-line);
  border-radius:8px;
  background:#fff;
  color:var(--yk-ink);
  font-family:inherit;
  font-size:16px;        /* 16px未満だとiPhoneで拡大されます */
  line-height:1.5;
  -webkit-appearance:none;
  appearance:none;
}
.wpcf7 form.wpcf7-form textarea{
  height:auto;
  min-height:170px;
  padding:12px 14px;
  resize:vertical;
}
.wpcf7 form.wpcf7-form input[type="text"]:focus,
.wpcf7 form.wpcf7-form input[type="email"]:focus,
.wpcf7 form.wpcf7-form input[type="tel"]:focus,
.wpcf7 form.wpcf7-form textarea:focus{
  outline:3px solid rgba(61,181,230,.45);
  border-color:var(--yk-primary);
}

/* --- ラジオボタン(売りたい農機具の状態) --- */
.wpcf7 form.wpcf7-form .wpcf7-radio{display:flex;flex-wrap:wrap;gap:8px 12px}
.wpcf7 form.wpcf7-form .wpcf7-list-item{margin:0}
.wpcf7 form.wpcf7-form .wpcf7-list-item label{
  display:flex;align-items:center;gap:8px;
  min-height:44px;
  padding:0 18px;
  border:2px solid var(--yk-line);
  border-radius:999px;
  background:#fff;
  cursor:pointer;
  font-weight:700;
}
.wpcf7 form.wpcf7-form .wpcf7-list-item input{
  width:20px;height:20px;margin:0;
  accent-color:var(--yk-primary);
}
.wpcf7 form.wpcf7-form .wpcf7-list-item label:has(input:checked){
  border-color:var(--yk-primary);
  background:var(--yk-pale);
}

/* --- ファイル添付 --- */
.wpcf7 form.wpcf7-form input[type="file"]{
  display:block;
  width:100%;
  box-sizing:border-box;
  padding:12px;
  border:2px dashed var(--yk-line);
  border-radius:12px;
  background:#F7FAFC;
  color:var(--yk-ink);
  font-family:inherit;
  font-size:15px;
}
.wpcf7 form.wpcf7-form input[type="file"]::file-selector-button{
  margin-right:14px;
  padding:10px 20px;
  border:0;
  border-radius:999px;
  background:var(--yk-bar);
  color:#fff;
  font-family:inherit;
  font-weight:700;
  cursor:pointer;
}

/* --- 送信ボタン --- */
.wpcf7 form.wpcf7-form input[type="submit"]{
  display:block;
  width:100%;
  height:76px;
  margin:40px 0 0;
  padding:0 64px 0 32px;
  border:3px solid var(--yk-ink);
  border-radius:999px;
  background:var(--yk-cta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%2313364A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat right 28px center;
  color:var(--yk-ink);
  font-family:inherit;
  font-size:24px;
  font-weight:900;
  letter-spacing:.2em;
  text-indent:.2em;
  box-shadow:0 7px 0 var(--yk-ink);
  cursor:pointer;
  transition:transform .15s,box-shadow .15s,background-position .15s;
  -webkit-appearance:none;
  appearance:none;
}
.wpcf7 form.wpcf7-form input[type="submit"]:hover{transform:translateY(-2px);box-shadow:0 9px 0 var(--yk-ink);background-position:right 22px center}
.wpcf7 form.wpcf7-form input[type="submit"]:active{transform:translateY(5px);box-shadow:0 2px 0 var(--yk-ink)}
.wpcf7 form.wpcf7-form input[type="submit"]:focus-visible{outline:3px solid var(--yk-primary);outline-offset:4px}
.wpcf7 form.wpcf7-form.submitting input[type="submit"]{opacity:.6;cursor:wait}
.wpcf7 form.wpcf7-form .wpcf7-spinner{display:block;margin:14px auto 0}

/* --- 入力エラー --- */
.wpcf7 form.wpcf7-form .wpcf7-not-valid{border-color:var(--yk-error) !important;background:#FFF8F7}
.wpcf7 form.wpcf7-form .wpcf7-not-valid-tip{
  display:block;margin-top:6px;
  color:var(--yk-error);
  font-size:14px;font-weight:700;
}

/* --- 送信後のメッセージ --- */
.wpcf7 form.wpcf7-form .wpcf7-response-output{
  margin:24px 0 0;
  padding:14px 18px;
  border:2px solid var(--yk-line);
  border-radius:12px;
  font-weight:700;
}
.wpcf7 form.wpcf7-form.sent .wpcf7-response-output{
  border-color:#187A41;background:#E8F5EC;color:#14532D;
}
.wpcf7 form.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7 form.wpcf7-form.unaccepted .wpcf7-response-output,
.wpcf7 form.wpcf7-form.failed .wpcf7-response-output,
.wpcf7 form.wpcf7-form.aborted .wpcf7-response-output,
.wpcf7 form.wpcf7-form.spam .wpcf7-response-output{
  border-color:var(--yk-error);background:#FDECEA;color:#7A1A12;
}

/* --- reCAPTCHAの注意書き --- */
.wpcf7 form.wpcf7-form .reCAPTCHA{
  margin-top:20px;
  color:#4A6A7D;
  font-size:13px;
  line-height:1.7;
}
.wpcf7 form.wpcf7-form .reCAPTCHA p{display:inline;margin-right:.35em}
.wpcf7 form.wpcf7-form .reCAPTCHA a{color:inherit;text-decoration:underline}
/* 注意書きを表示しているので、右下のバッジは非表示にして構いません
   (くさかり事業部のバッジとの重なりも避けられます) */
.grecaptcha-badge{visibility:hidden}

/* --- スマホ --- */
@media (max-width:640px){
  .wpcf7 form.wpcf7-form{padding:28px 18px;box-shadow:6px 6px 0 var(--yk-sky)}
}
