/* =========================================================
   レトリバーデザイン ／ お問い合わせフォーム（Contact Form 7 用）
   ---------------------------------------------------------
   base.css の共通トークン（--green 等）を前提に読み込みます。
   Contact Form 7 が出力するマークアップ例：

   <div class="wpcf7"> ... <form> ...
     <label> ラベル文言
       <span class="wpcf7-form-control-wrap" data-name="your-name">
         <input type="text" class="wpcf7-form-control wpcf7-text ...">
       </span>
     </label>
   ... <input type="submit" class="wpcf7-form-control wpcf7-submit"> </form></div>

   このCSSは .wpcf7 配下にのみ効くよう스코프してあるので、
   他のページ要素に影響しません。
========================================================= */

.wpcf7{
  max-width:680px;
  margin:0 auto;
}

.wpcf7 form{
  display:flex;
  flex-direction:column;
  gap:32px;
}

/* label がそのまま1項目の枠になる（添付コードの構造に合わせる） */
.wpcf7 form > p,
.wpcf7 form > label{
  display:flex;
  flex-direction:column;
  gap:10px;
  font-size:14px;
  font-weight:700;
  color:var(--ink);
  letter-spacing:.02em;
  margin:0;
}

/* 必須ラベルの「（必須）」を小さく・グリーンのバッジ風に */
.wpcf7 form > label{
  position:relative;
}

/* ---- 入力欄の共通土台 ---- */
.wpcf7-form-control-wrap{
  display:block;
  width:100%;
}

.wpcf7 input.wpcf7-form-control,
.wpcf7 textarea.wpcf7-form-control,
.wpcf7 select.wpcf7-form-control{
  width:100%;
  box-sizing:border-box;
  font-family:"Noto Sans JP",system-ui,sans-serif;
  font-size:15px;
  font-weight:400;
  color:var(--text);
  background:#fff;
  border:1px solid #d8d8d8;
  border-radius:0;
  padding:15px 16px;
  line-height:1.6;
  transition:border-color .18s ease, box-shadow .18s ease;
  outline:none;
}

.wpcf7 input.wpcf7-form-control::placeholder,
.wpcf7 textarea.wpcf7-form-control::placeholder{
  color:#aaa;
}

.wpcf7 input.wpcf7-form-control:focus,
.wpcf7 textarea.wpcf7-form-control:focus,
.wpcf7 select.wpcf7-form-control:focus{
  border-color:var(--green);
  box-shadow:0 0 0 3px var(--green-tint);
}

.wpcf7 textarea.wpcf7-form-control{
  min-height:180px;
  resize:vertical;
}

/* ---- セレクト（矢印をグリーンでカスタム表示） ---- */
.wpcf7 select.wpcf7-form-control{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  padding-right:44px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c7a49' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:18px;
  cursor:pointer;
}

/* ---- 必須／任意バッジ（ラベル文中の「（必須）」を強調したい場合の任意クラス） ---- */
.wpcf7-req{
  display:inline-block;
  font-size:11px;
  font-weight:700;
  color:var(--green);
  background:var(--green-tint);
  padding:2px 9px;
  margin-left:8px;
  letter-spacing:.04em;
  vertical-align:middle;
}

/* ---- 送信ボタン ---- */
.wpcf7 input[type="submit"].wpcf7-form-control{
  align-self:center;
  width:auto;
  min-width:240px;
  margin-top:8px;
  padding:17px 48px;
  background:var(--green);
  color:#fff;
  font-size:15px;
  font-weight:700;
  letter-spacing:.06em;
  border:none;
  cursor:pointer;
  transition:background .18s ease;
}
.wpcf7 input[type="submit"].wpcf7-form-control:hover{
  background:var(--green-dark);
}
.wpcf7 input[type="submit"].wpcf7-form-control:disabled{
  opacity:.6;
  cursor:default;
}

/* 送信中のスピナー（CF7標準の .wpcf7-spinner を流用しつつ色だけ調整） */
.wpcf7-spinner{
  margin:0 0 0 12px !important;
}

/* ---- バリデーションエラー ---- */
.wpcf7 .wpcf7-not-valid-tip{
  display:block;
  margin-top:8px;
  font-size:12.5px;
  font-weight:500;
  color:#8a3b3b;
}
.wpcf7 input.wpcf7-not-valid,
.wpcf7 textarea.wpcf7-not-valid,
.wpcf7 select.wpcf7-not-valid{
  border-color:#c96a6a;
}
.wpcf7 input.wpcf7-not-valid:focus,
.wpcf7 textarea.wpcf7-not-valid:focus,
.wpcf7 select.wpcf7-not-valid:focus{
  box-shadow:0 0 0 3px rgba(201,106,106,.12);
}

/* 送信完了・送信エラーのメッセージ枠 */
.wpcf7 .wpcf7-response-output{
  margin:28px 0 0;
  padding:16px 20px;
  font-size:13.5px;
  border:1px solid var(--line);
  color:var(--text);
}
.wpcf7-mail-sent-ok{
  border-color:var(--green) !important;
  background:var(--green-tint);
  color:#175f39 !important;
}
.wpcf7-validation-errors,
.wpcf7-mail-sent-ng,
.wpcf7-spam-blocked{
  border-color:#c96a6a !important;
  background:#fbf1f1;
  color:#8a3b3b !important;
}

/* アクセシビリティ：フォーカス時に画面を揺らす invalid フォーカス演出を無効化 */
.wpcf7-form.invalid .wpcf7-response-output{
  outline:none;
}

/* =========================================================
   レスポンシブ
========================================================= */
@media (max-width:600px){
  .wpcf7 form{gap:26px;}
  .wpcf7 input.wpcf7-form-control,
  .wpcf7 textarea.wpcf7-form-control,
  .wpcf7 select.wpcf7-form-control{
    font-size:16px; /* iOSのズーム防止のため16px以上を維持 */
    padding:14px 14px;
  }
  .wpcf7 input[type="submit"].wpcf7-form-control{
    width:100%;
    min-width:0;
  }
}