/* ===========================
   Contact (CF7) Styles - Full
   既存レイアウトは維持、ボタン周りのみ整理
   =========================== */

/* CF7の自動hidden群は非表示でOK */
.wpcf7 .hidden-fields-container{ display:none !important; visibility:hidden; }

/* ラッパー */
.wpcf7 .cf7-contact{ max-width:768px; margin:0 auto; margin-top: 50px;}
.wpcf7 .cf7-contact p{ margin:0 0 0.75rem; font-weight:600; color:var(--asks-main,#0e2a3f); 
font-size: var(--f22);
}
.wpcf7 .cf7-contact p + p{ margin-top:14px; }

.wpcf7 .cf7-contact div{
  margin-bottom: 6rem;
}

/* 入力系 */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea{
  width:100%;
  box-sizing:border-box;
  padding:10px 14px;
  border:1px solid #b7c5d1;
  border-radius:6px;
  font-size:var(--f22);
  background:#fff; color:#123;
  transition:border-color .2s, box-shadow .2s;
}
.wpcf7 textarea{ min-height:160px; }

/* フォーカス */
.wpcf7 input:focus, .wpcf7 textarea:focus{
  border-color:var(--asks-blue,#3E8FB3);
  box-shadow:0 0 0 3px rgba(62,143,179,.15);
}

/* CF7のエラーメッセージ */
.wpcf7 .wpcf7-not-valid-tip{
  color:#d63a3a; font-size:var(--f22); margin-top:0.75rem;
}

/* 注意書き */
.wpcf7 .cf7-contact p.contact-note{
  text-align:center;
   color: var(--c-main);
  font-size: var(--f40);
  margin:6.6rem auto 1.8rem;
  font-weight: 700;
  font-feature-settings: "palt";
}

/* ===== 確認プレビュー（見出し・中身） ===== */
.wpcf7 .cf7-preview{
  max-width: 800px;
  margin-top: 50px;
}
.wpcf7 .cf7-preview dl{
  display: block;
  grid-template-columns: 9.5em 1fr;   /* 左ラベル/右値 */
  column-gap: 18px;
  row-gap: 14px;
  margin: 0;
}
.wpcf7 .cf7-preview dt{
  margin: 0;
  color: #000000;
  font-weight: 700;
  font-size: var(--f22);
  letter-spacing: .04em;
  margin-top: 8.125rem;
}
.wpcf7 .cf7-preview dd{
  margin: 0;
  color: #7a8894;                     /* 値は薄めグレー */
  font-size: var(--f22);
  line-height: 1.9;
  margin-left: 1em;
  white-space: pre-wrap;
}
.wpcf7 .cf7-preview dd:last-of-type{ border-bottom: none; }

/* ボタンラッパー：中央寄せ・縦積み */
.wpcf7 .cf7-buttons{
  display:grid;
  grid-template-columns: 1fr;
  justify-items:center;
  gap:16px;
  margin-top:18px;
  outline: none;
  border: none;
}

/* 共通ボタン（ベース） */
.wpcf7 .cf7-buttons .btn{
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:none;
  border-radius:999px;
  padding: 1em 1.8em;
  font-weight: 500;
  font-size: var(--f30);
  letter-spacing:.04em;
  cursor:pointer;
 transition: all .3s ease;
  text-decoration:none;
  outline: none;
}

/* 送信（プライマリ：既存の色味を踏襲） */
.wpcf7 .cf7-buttons input.cf7-send{
  /* composes: btn;  → ツール非対応環境もあるので下の保険で共通付与 */
  background: linear-gradient(90deg, #0023d0 0%, #2a86b6 50%, #0023d0 100%);
  background-size: 200% 100%;
  color:#fff;
  transition: all .3s ease;
  border: none !important;
  font-weight: 500;
  font-size: var(--f30);
  padding: 1em 1.8em;
}
.wpcf7 .cf7-buttons input.cf7-send:hover{ background-position: 100% 0; }
.wpcf7 .cf7-buttons input.cf7-send:active{ transform: translateY(1px); }

/* 修正（セカンダリ：白地＋アウトライン） */
.wpcf7 .cf7-buttons .cf7-back{
  /* composes: btn; */
  background:#fff;
  color:#3f8db6;
  border:2px solid #3f8db6 !important;
   font-weight: 500;
  font-size: var(--f30);
  padding: 1em 1.8em;
}
.wpcf7 .cf7-buttons .cf7-back:hover{
  background:#f6fbfe;
  border-color:#9cc5da;
}

/* 確認（初期に表示するボタン） */
.wpcf7 .cf7-buttons .cf7-confirm{
  /* composes: btn; */
  font-weight:500;           /* 既存の指定を踏襲 */
  font-size:16px;
  color:#fff;
  background: linear-gradient(90deg, #0023d0 0%, #2a86b6 50%, #0023d0 100%);
  background-size: 200% 100%;
  transition: all .3s ease;
  border: none !important;
  font-weight: 500;
  font-size: var(--f30);
  padding: 1em 1.8em;
}
.wpcf7 .cf7-buttons .cf7-confirm:hover{ background-position: 100% 0; }
.wpcf7 .cf7-buttons .cf7-confirm:active{ transform: translateY(1px); }

/* composes非対応ブラウザへの保険（共通見た目を付与） */
.wpcf7 .cf7-buttons input.cf7-send,
.wpcf7 .cf7-buttons .cf7-back,
.wpcf7 .cf7-buttons .cf7-confirm{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  padding: 1em 1.8em;
  font-weight:700;
  letter-spacing:.04em;
  cursor:pointer;
  outline: none !important;
  min-width: 426px;
  
}

/* 初期状態：確認ボタンだけ表示 */
.wpcf7 form .cf7-back,
.wpcf7 form input.cf7-send,
.wpcf7 form .cf7-preview{  display: none !important; }


/* 確認状態：プレビュー＋送信/修正を表示、確認は隠す */
.wpcf7 form.is-confirm .cf7-confirm{ display:none; }
.wpcf7 form.is-confirm .cf7-back,
.wpcf7 form.is-confirm input.cf7-send,
.wpcf7 form.is-confirm .cf7-preview{ display:block !important; }
.wpcf7 form.is-confirm .cf7-inputs {
  display: none !important;
}

/* pタグ内に置かれても中央寄せ（保険） */
.wpcf7 form p:has(.cf7-confirm),
.wpcf7 form p:has(.cf7-back),
.wpcf7 form p:has(.cf7-send){ text-align:center; }

/* モバイル調整 */
@media (max-width:768px){
  .wpcf7 .cf7-buttons{ gap:14px; }
}
@media (max-width:640px){
  .wpcf7 .cf7-buttons .btn{ width: min(100%, 360px); }
}

/* ===== SP最適化：プレビュー表 ===== */
@media (max-width:640px){
  .wpcf7 .cf7-preview{ max-width: 86vw; }
  .wpcf7 .cf7-preview dl{ grid-template-columns: 7.5em 1fr; }
}

/* ===== レイアウト補助 ===== */
@media (max-width:768px){
  .wpcf7 .cf7-contact {
    width: 80%;
    margin: 0 auto; /* 中央寄せ */
  }
}

/* ===== そのほか（既存のHeroなどはそのまま） ===== */
.accent { color: #3E8FB3; }

/* ------ Contact Hero ------ */
.contact-hero{
  background-repeat: no-repeat;
  background-position: left bottom; /* 左を優先表示 */
  background-size: cover;           /* PCはしっかり敷き詰め */
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  aspect-ratio: 1920/840;
  background-image: url("../assets/contact_hero.webp");
}
.contact-hero__inner{
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}
.contact-hero__title{
  margin: 0;
  color: var(--asks-main);
  font-size: var(--f45);
  font-weight: 700;
  margin-bottom: 20px;
}
.contact-hero__title .strong{ font-size: var(--f55); }

.contact-hero__lead{
  margin: 0 auto;
  color: var(--asks-main);
  line-height: 1.9;
  font-size: var(--f20);
  font-weight: 500;
}

/* SP最適化（Hero） */
@media (max-width: 768px){
  .contact-hero{
    background-image: url("../assets/sp_contact_hero.webp");
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    aspect-ratio: 750/700;
  }
  .contact-hero__inner{
    position: relative;
    top: -5%;
  }


  .contact-hero::after{
    right: -18%;
    width: 64vw; height: 66vw;
    clip-path: polygon(20% 0,100% 0,100% 75%,72% 100%,42% 62%,0 28%);
    opacity:.9;
  }
  .contact-hero__title{
    font-size: clamp(18px, 6vw, 45px);
  }
  .contact-hero__title .strong{
    font-size: clamp(32px, 6vw, 55px);
  }

  .wpcf7 .cf7-buttons input.cf7-send,
.wpcf7 .cf7-buttons .cf7-back,
.wpcf7 .cf7-buttons .cf7-confirm{
  min-width: 100px;
}

.wpcf7 .cf7-contact{
  margin-top: 90px;
}

.wpcf7 .cf7-contact div{
  margin-bottom: 85px;
}

.wpcf7 .cf7-preview dt{
  margin-top: 140px;
}

}
@media (max-width: 480px){
  .contact-hero::after{ display:none; }  /* モバイルで写真を消したい場合 */
  .contact-hero__lead{ padding: 0 8px; font-size: 3.33vw; }
}

/* ------ 送信後メッセージ ------ */
.contact-thanks {
  text-align: center;
  padding: 80px 16px;
}

.contact-thanks__title {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 700;
  color: #0e2a3f;
}

.contact-thanks__subtitle {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 700;
  color: #0e2a3f;
}

.contact-thanks__lead {
  font-size: clamp(14px, 2.5vw, 20px);
  color: #334a5a;
}