/* =========================================================
   Park Vision Contact – MW WP Form
   （/contact/ 専用の上書き）
   ========================================================= */
:root{
  --pv-navy:#273861;
  --pv-blue:#1f6f93;
  --pv-gray:#f3f5f7;
  --pv-line:#e3e7eb;
  --pv-text:#2b2e38;
}
section.contact{
  padding: 1em;
}
.contact{
  padding: clamp(48px,6vw,80px) 0;
  background: var(--pv-gray);
}
.contact__title{
  max-width: 1100px;
  margin: 0 auto 24px;
  padding-left: .65em;
  border-left: 6px solid var(--pv-blue);
  font: 700 clamp(22px,3.4vw,28px)/1.3 "Noto Sans JP", system-ui, sans-serif;
  color: var(--pv-navy);
}
.contact .contact-form{
  max-width: 880px;
  margin: 0 auto;
  background:#fff;
  border:1px solid var(--pv-line);
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0,0,0,.04);
  padding: clamp(20px,3.2vw,36px);
  color: var(--pv-text);
  font-family:"Noto Sans JP", system-ui, sans-serif;
}

/* 説明文 */
.contact .form-lead{
  margin: 0 0 20px;
  color:#555;
  line-height:1.9;
  font-size: clamp(14px,1.6vw,15.5px);
}

/* 2カラム */
.contact .form-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 768px){
  .contact .form-grid{ grid-template-columns: 1fr; }
}

/* 行ブロック */
.contact .form-item{
  margin-bottom: 40px;
}
.contact .form-item:last-child{ margin-bottom: 0; }

.contact .form-item label{
  display:block;
  font-weight:600;
  color:var(--pv-navy);
  margin: 0 0 8px;
  font-size: 14px;
}
.contact .req{
  color:#fff; font-size:.85em; margin-left:.4em;
}
.contact .opt{
  color:var(--pv-blue); font-size:.85em; margin-left:.4em;
}

/* 入力要素 */
.contact input[type="text"],
.contact input[type="email"],
 .contact input[type="tel"], 
.contact select,
.contact textarea{
  width:100%;
  background:#fff;
  border:1px solid var(--pv-line);
  border-radius: 8px;
  font-size:16px;
  line-height:1.6;
  padding: 12px 14px;
  transition: border-color .2s, box-shadow .2s, background-color .2s;
	    margin-top: -20px;
    margin-bottom: 20px;
  
}
.contact textarea{ min-height: 160px; resize: vertical; }
.contact input:focus,
.contact select:focus,
.contact textarea:focus{
  outline: none;
  border-color: var(--pv-blue);
  box-shadow: 0 0 0 3px rgba(31,111,147,.12);
}

/* プレースホルダー色をやや薄く */
.contact ::placeholder{ color:#9aa3ad; }

/* セレクトの矢印（ネイティブ風カスタム） */
.contact select{
  appearance: none;
  background-image: linear-gradient(45deg,transparent 50%, #9aa3ad 50%),
                    linear-gradient(135deg, #9aa3ad 50%, transparent 50%),
                    linear-gradient(to right, transparent, transparent);
  background-position: calc(100% - 18px) 55%, calc(100% - 12px) 55%, 0 0;
  background-size: 6px 6px, 6px 6px, 100% 100%;
  background-repeat: no-repeat;
}

/* 補足テキスト */
.contact small{
  display:block; margin-top:6px; color:#6b7280; font-size: 12.5px;
}

/* ファイル入力を横並び（スクショ風） */
.contact input[type="file"]{
  font-size: 14px;
  padding: 10px;
  border-radius:8px;
  border:1px solid var(--pv-line);
  background:#fafafa;
}

/* 同意チェック */
.contact .agree{
  padding-top: 8px; color:#444;
}
.contact .agree a{ color:var(--pv-blue); text-decoration: underline; }

/* ボタン */
.contact .form-actions{
  margin-top: 28px;
  display:flex; flex-wrap:wrap; gap:12px; justify-content:center;
}
.contact .btn{
  display:inline-block;
  font-weight:700;
  border-radius: 999px;
  padding: 12px 28px;
  font-size:16px;
  text-decoration:none;
  margin-left: 1em;
  transition: transform .08s ease, background .25s ease, color .25s ease, box-shadow .25s ease;
}
.contact .btn-primary{
  background: var(--pv-blue);
  color:#fff;
  box-shadow: 0 6px 18px rgba(31,111,147,.22);
  border: none;
  margin-bottom: 2em;
}
.contact .btn-primary:hover{ background:#195a7a; transform: translateY(-1px); }
.contact .btn-outline{
  background:#fff; color:var(--pv-blue);
  border:2px solid var(--pv-blue);
}
.contact .btn-outline:hover{ background:var(--pv-blue); color:#fff; }

/* =============== 確認画面（MW WP Formが付与するクラス） */
.mw_wp_form_confirm .contact .form-item input,
.mw_wp_form_confirm .contact .form-item textarea,
.mw_wp_form_confirm .contact .form-item select{
  border:none; background:transparent; padding:0; box-shadow:none;
}
.mw_wp_form_confirm .contact .form-item{
  border-bottom:1px dashed var(--pv-line);
  padding-bottom: 14px;
}
.mw_wp_form_confirm .contact .form-item label{
  color:var(--pv-blue);
}

/* =============== バリデーション/エラー表示 */
.contact .mw_wp_form .error{
  color:#b61414;
  font-size: 12.5px;
  margin-top: 6px;
}
.contact .required{ color:#b61414; } /* MW側の既定クラスが入る場合の保険 */

.contact .is-error input[type="text"],
.contact .is-error input[type="email"],
.contact .is-error input[type="tel"],
.contact .is-error select,
.contact .is-error textarea{
  border-color:#e67b7b;
  box-shadow:0 0 0 3px rgba(230,123,123,.15);
}

/* =============== 細部微調整 */
.contact .contact-form .wpcf7-not-valid-tip{ display:none } /* 旧CF7対策の無効化（残骸がある場合） */
.contact figure, .contact img{ max-width:100%; height:auto }


.next-steps{margin:20px 0 6px;text-align:left}
.next-steps h2{font-size:18px;color:#273861;margin:0 0 .4em}
.next-steps ol{margin:0;padding-left:1.2em;color:#333;line-height:1.9}
.cta-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:18px 0}
.cta{display:block;background:#f8fbff;border:1px solid #e2eef6;border-radius:12px;padding:14px 16px;text-align:center;font-weight:700;color:#1f6f93;text-decoration:none}
.cta:hover{background:#eaf5fb}

.thanks-actions {
    margin-top: 2em;
    display: flex;}
/* ==========================================
   MW WP Form ボタン共通
   ========================================== */

/* 「確認画面へ」ボタン */
input[name="submitConfirm"],
input[name="submitBack"],
input[name="submit"] {
  display: inline-block;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 16px;
  border-radius: 999px;
  padding: 12px 28px;
  border: none;
  cursor: pointer;
  transition: all 0.25s ease;
  margin: 6px 8px;
}

/* ==========================================
   MW WP Form ボタン共通
   ========================================== */

/* 「確認画面へ」ボタン */
input[name="submitConfirm"],
input[name="submitBack"],
input[name="submit"] {
  display: inline-block;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 16px;
  border-radius: 999px;
  padding: 12px 28px;
  border: none;
  cursor: pointer;
  transition: all 0.25s ease;
  margin: 6px 8px;
}

/* 確認画面へ（初回画面） */
input[name="submitConfirm"] {
  background-color: #1f6f93;
  color: #fff;
  box-shadow: 0 4px 12px rgba(31, 111, 147, 0.25);
  width: 50%;
}
input[name="submitConfirm"]:hover {
  background-color: #195a7a;
  transform: translateY(-1px);
}

/* 戻る（確認画面） */
input[name="submitBack"] {
  background: #fff;
  border: 2px solid #1f6f93;
  color: #1f6f93;
}
input[name="submitBack"]:hover {
  background: #1f6f93;
  color: #fff;
}

/* 送信する（確認画面） */
input[name="submit"],
input[name="submitButton"] {
  background-color: #273861;
  color: #fff;
  box-shadow: 0 4px 12px rgba(39,56,97,0.25);
  width: 50%;
}
input[name="submit"]:hover {
  background-color: #1f2d50;
  transform: translateY(-1px);
}

/* 各ブラウザのフォーム初期スタイルをリセット */
input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 6px;
  border: 1px solid #d8dee7;
  padding: 10px 14px;
  font-size: 16px;
  line-height: 1.5;
  width: 100%;
  box-sizing: border-box;
  margin: 0; /* ←これが特に重要。UA stylesheetのmarginを無効化 */
}

/* Safari特有の内部影を消す */
input[type="text"]::-webkit-inner-spin-button,
input[type="text"]::-webkit-outer-spin-button,
input[type="tel"]::-webkit-inner-spin-button,
input[type="tel"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* focus時のデフォルト青い枠を抑える */
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: #1f6f93;
  box-shadow: 0 0 0 2px rgba(31, 111, 147, 0.2);
}