/* ===== Contact 基本 ===== */
.contact-title{
  font-size: 4.4rem;
  font-weight: 700;
  text-align: center;
  margin: 6rem 0 5rem;
  font-family: 'Roboto', sans-serif;
}

.wpforms-container{
  max-width: 680px;
  margin: 0 auto;
  padding: 20px 5vw;
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif;
}
/* すべての子要素を安定させる */
.wpforms-container *, .wpforms-container *::before, .wpforms-container *::after{
  box-sizing: border-box;
}

/* 入力UIの統一 */
.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container input[type="tel"],
.wpforms-container textarea{
  width: 100%;
  max-width: 100%;
  padding: 12px 14px;
  border: 1px solid #dce3ea;
  border-radius: 8px;
  background: #fff;
  line-height: 1.4;
}
.wpforms-container textarea{ min-height: 160px; }

/* ラベル間隔 */
.wpforms-field-label{ font-weight: 600; margin-bottom: 6px; }

/* 送信ボタン */
.wpforms-submit{
  background:#2563eb; color:#fff; border:none;
  padding:12px 20px; border-radius:10px; font-weight:600;
}
.wpforms-submit:hover{ opacity:.9; }

/* ===== レイアウト：PCは2カラム、スマホは1カラム ===== */
/* PC: WPForms の half列をグリッドで整列（float無効化） */
@media (min-width: 768px){
  .wpforms-field-row{
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 16px 24px;
    clear: both; /* 念のため */
  }
  .wpforms-one-half,
  .wpforms-one-third,
  .wpforms-one-fourth{
    float: none !important;
    width: auto !important;
    margin: 0 !important;
  }
}

/* モバイル: 1カラムに強制 */
@media (max-width: 767px){
  .wpforms-field-row{
    display: block !important;
  }
  .wpforms-one-half,
  .wpforms-one-third,
  .wpforms-one-fourth{
    float: none !important;
    width: 100% !important;
    margin: 0 0 16px 0 !important;
    clear: both !important;
  }
  .wpforms-container{ padding-left: 6vw !important; padding-right: 6vw !important; }
}

/* ===== メール + 確認メールのズレ対策（決め打ちで安定） ===== */
/* ラベルと入力の縦積みを明示（テーマ干渉対策） */
.wpforms-field-email .wpforms-field-row,
.wpforms-field-email-confirm .wpforms-field-row{
  display: contents; /* 子の one-half をそのままレイアウトに参加させる */
}

/* 2カラム時も幅を合わせる */
@media (min-width: 768px){
  .wpforms-field-email .wpforms-one-half,
  .wpforms-field-email-confirm .wpforms-one-half{
    width: 100% !important; /* grid管理に任せる */
    margin: 0 !important;
  }
}

/* モバイル時は縦並び＆隙間 */
@media (max-width: 767px){
  .wpforms-field-email,
  .wpforms-field-email-confirm{
    margin-bottom: 16px;
  }
}

/* ===== プライバシーポリシーのスクロール枠（policy-box クラスを付与している前提） ===== */
.wpforms-field.policy-box .wpforms-terms-container{
  max-height: 200px;
  overflow-y: auto;
  padding: 10px 12px;
  border: 1px solid #dce3ea;
  border-radius: 8px;
  background: #fafbfd;
  line-height: 1.6;
  font-size: 14px;
}



/* --- Contact 修正：PC幅拡張＆メール確認の幅ズレ解消 --- */

/* PCでフォームが狭い → 少し広げる（必要に応じて値はお好みで） */
.wpforms-container {
  max-width: 820px !important; /* 680px → 820px に拡張 */
}

/* WPForms の行ブロックを素直なグリッド/縦積みに整える */
@media (min-width: 768px){
  /* 通常フィールドは2カラム運用（名前など） */
  .wpforms-field-row{
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 16px 24px;
  }
  .wpforms-field-row > .wpforms-field-row-block,
  .wpforms-one-half,
  .wpforms-one-third,
  .wpforms-one-fourth{
    float: none !important;
    width: auto !important;
    margin: 0 !important;
  }

  /* メール & 確認メールは “フル幅で縦並び” に固定（名前と同じ幅に） */
  .wpforms-field-email .wpforms-field-row,
  .wpforms-field-email-confirm .wpforms-field-row{
    display: block !important; /* ← ここで display:contents を上書き */
  }
  .wpforms-field-email .wpforms-field-row > .wpforms-field-row-block,
  .wpforms-field-email-confirm .wpforms-field-row > .wpforms-field-row-block{
    width: 100% !important;
    margin: 0 0 16px 0 !important;
    float: none !important;
  }
}

@media (max-width: 767px){
  /* スマホで“確認メールだけ左に隙間が出る”問題の保険 */
  .wpforms-field-row > .wpforms-field-row-block{
    width: 100% !important;
    margin: 0 0 16px 0 !important; /* ← 左の余白が残るテーマを潰す */
    float: none !important;
  }
}

/* Contact page only */
.contact-page .contact-title{
  font-size: 4.4rem;
  font-weight: 700;
  text-align: center;
  margin: 6rem 0 5rem;
  font-family: 'Roboto', sans-serif;
}

/* コンテナ幅を拡張（PCで狭い問題を解消） */
.contact-page .wpforms-container{
  max-width: 880px;        /* ← 680px だと狭いので拡張 */
  margin: 0 auto;
  padding: 0 5vw 80px;
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif;
}

/* 入力UIの統一（念のため 100% 幅を強制） */
.contact-page .wpforms-container input[type="text"],
.contact-page .wpforms-container input[type="email"],
.contact-page .wpforms-container input[type="tel"],
.contact-page .wpforms-container textarea{
  width: 100% !important;
  max-width: 100% !important;
  padding: 12px 14px;
  border: 1px solid #dce3ea;
  border-radius: 8px;
  background: #fff;
  line-height: 1.4;
}
.contact-page .wpforms-container textarea{ min-height: 160px; }
.contact-page .wpforms-field-label{ font-weight: 600; margin-bottom: 6px; }
.contact-page .wpforms-submit{
  background:#2563eb; color:#fff; border:none;
  padding:12px 20px; border-radius:10px; font-weight:600;
}
.contact-page .wpforms-submit:hover{ opacity:.9; }

/* ===== 行レイアウトの土台 ===== */
@media (min-width: 768px){
  /* 全体は2カラム（名前など） */
  .contact-page .wpforms-field-row{
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 16px 24px;
    clear: both;
  }
  /* WPFormsの旧float系を殺す */
  .contact-page .wpforms-one-half,
  .contact-page .wpforms-one-third,
  .contact-page .wpforms-one-fourth,
  .contact-page .wpforms-field-row > .wpforms-field-row-block,
  .contact-page .wpforms-first,
  .contact-page .wpforms-last{
    float: none !important;
    width: auto !important;
    margin: 0 !important;
  }
}

/* ===== “メール＋確認”はPCでもフル幅で縦積み ===== */
@media (min-width: 768px){
  .contact-page .wpforms-field-email .wpforms-field-row,
  .contact-page .wpforms-field-email-confirm .wpforms-field-row{
    display: grid !important;
    grid-template-columns: 1fr !important; /* ← 1列 */
    gap: 16px !important;
  }
  .contact-page .wpforms-field-email .wpforms-field-row > .wpforms-field-row-block,
  .contact-page .wpforms-field-email-confirm .wpforms-field-row > .wpforms-field-row-block{
    width: 100% !important;
    margin: 0 !important;
  }
}

/* スマホは全面1カラム＆左ズレ抑止 */
@media (max-width: 767px){
  .contact-page .wpforms-field-row{
    display: block !important;
  }
  .contact-page .wpforms-field-row > .wpforms-field-row-block,
  .contact-page .wpforms-one-half,
  .contact-page .wpforms-one-third,
  .contact-page .wpforms-one-fourth,
  .contact-page .wpforms-first,
  .contact-page .wpforms-last{
    float: none !important;
    width: 100% !important;
    margin: 0 0 16px 0 !important; /* ← “確認メールだけ左に隙間”の保険 */
  }

  /* 余白を統一 */
  .contact-page .wpforms-container{
    padding-left: 6vw !important;
    padding-right: 6vw !important;
  }
}

/* プライバシーポリシーのスクロール枠（任意） */
.contact-page .wpforms-field.policy-box .wpforms-terms-container{
  max-height: 200px;
  overflow-y: auto;
  padding: 10px 12px;
  border: 1px solid #dce3ea;
  border-radius: 8px;
  background: #fafbfd;
  line-height: 1.6;
  font-size: 14px;
}