/* ラベル列の幅（縦ライン位置）と間隔 */
:root{
  --aka-label-col: 180px;
  --aka-gap: 34px;
}

/* 行レイアウト：ラベル右・入力左（全行） */
body.contactfoam .contact-form-wrap .form-row{
  display: grid !important;
  grid-template-columns: var(--aka-label-col) minmax(0,1fr) !important;
  column-gap: var(--aka-gap) !important;
  align-items: center !important;
  margin-bottom: 25px !important;
}

/* ラベル（項目名＋バッジ）を右端へ */
body.contactfoam .contact-form-wrap .form-row .label{
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 8px !important;
  text-align: right !important;
  white-space: nowrap !important;
  color:#555;
  font-weight:600;
}

/* 入力側は左起点で右へ伸びる */
body.contactfoam .contact-form-wrap .form-row .field{
  justify-self: start !important;
  width: 100% !important;
}

/* 第1～第3候補の入力枠だけ最大200pxに制限 */
body.contactfoam #date1,
body.contactfoam #date2,
body.contactfoam #date3,
body.contactfoam select[name="time1"],
body.contactfoam select[name="time2"],
body.contactfoam select[name="time3"]{
  max-width: 200px !important;
  width: 100% !important;  /* 親幅が広くても200pxを超えないように */
}

/* バッジ（必須/任意） */
body.contactfoam .contact-form-wrap .badge{
  display:inline-block !important;
  font-size:11px !important;
  line-height:1 !important;
  padding:4px 8px !important;
  border-radius:999px !important;
  border:1px solid transparent !important;
}
body.contactfoam .contact-form-wrap .badge.required{
  background: rgb(229,57,53) !important;
  color:#fff !important;
  border-color: rgb(229,57,53) !important;
}
body.contactfoam .contact-form-wrap .badge.optional{
  background:#f1f3f5 !important;
  color:#6c757d !important;
  border-color:#e1e4e8 !important;
}

/* 入力枠（薄いオレンジ） */
body.contactfoam .contact-form-wrap .field input[type="text"],
body.contactfoam .contact-form-wrap .field input[type="email"],
body.contactfoam .contact-form-wrap .field input[type="url"],
body.contactfoam .contact-form-wrap .field input[type="date"],
body.contactfoam .contact-form-wrap .field select,
body.contactfoam .contact-form-wrap .field textarea{
  width:100% !important;
  background:#fff6e5 !important;
  border:1px solid #f3cf8d !important;
  border-radius:8px !important;
  padding:12px 14px !important;
  font-size:14px !important;
  box-sizing:border-box !important;
  outline:none !important;
  box-shadow: rgb(253,216,53) 0 0 0 0 !important;
}
body.contactfoam .contact-form-wrap .field textarea{
  min-height:140px !important;
  resize:vertical !important;
}
body.contactfoam .contact-form-wrap .field input::placeholder,
body.contactfoam .contact-form-wrap .field textarea::placeholder{
  color:#9b8b6b !important;
}

/* 電話番号・ミーティング希望だけ幅を抑える */
body.contactfoam .contact-form-wrap .tel-inputs{
  display:flex !important; gap:14px !important; max-width:300px !important;
}

body.contactfoam .contact-form-wrap #meeting{ max-width:420px !important; width:100% !important; }

/* ミーティング詳細ブロック（内側行も同じ縦ライン） */
body.contactfoam .contact-form-wrap #meetingFields{
  padding:16px 0 !important;     /* 左右0で縦ラインに一致 */
  margin-top:16px !important;
  display:none;
}

body.contactfoam .contact-form-wrap #meetingFields .form-row{
  grid-template-columns: var(--aka-label-col) minmax(0,1fr) !important;
  column-gap: var(--aka-gap) !important;
  align-items:center !important;
  margin-bottom:20px !important;
}

/* お問い合わせ内容の幅 */
body.contactfoam .contact-form-wrap #inquiryRow .field{ width:100% !important; }
body.contactfoam .contact-form-wrap #inquiryRow textarea{ width:100% !important; }

/* 固定ヘッダー対策 */
body.contactfoam { padding-top: 120px; }

body.contactfoam #date1Row .label { font-size: 13px; }

/* ====== フォーム幅をカード化して中央寄せ（左右がマックスになる対策） ====== */
body.contactfoam .contact-form-wrap{
  /* 画面に応じて伸縮するが最大は760px、最小でも余白を確保 */
  width: min(1000px, 92vw) !important;   /* 右側デザイン程度の幅に固定 */
  max-width: 1000px !important;
  margin: 32px auto !important;         /* 中央寄せ */
  padding: 24px 28px 36px !important;   /* 内側余白を確保 */
  border-radius: 10px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.08) !important;
  background: #fff !important;          /* 念のため明示 */
  box-sizing: border-box !important;
}

/* === 冒頭メッセージを中央寄せに戻す（強制） === */
body.contactfoam .contact-form-wrap .contact-lead{
  text-align: center !important;
  margin-bottom: 22px !important;
  font-size: 15px;
}
body.contactfoam .contact-form-wrap .contact-lead p{
  text-align: center !important;
  margin: 6px 0 !important;
  line-height: 1.7 !important;
}
body.contactfoam .contact-form-wrap .contact-lead .brand{
  color: #e60012 !important;
  font-weight: 700 !important;
}
body.contactfoam .contact-form-wrap .hr{
  margin: 18px 0 24px !important;
  width: 100% !important;
}

/* 送信ボタンを赤・角丸・シャドー・大きめに（強制版） */
body.contactfoam .submit-area { text-align: center !important; }
body.contactfoam .submit-btn  {
  width: 20% !important;
  display: inline-block !important;
  margin: 0 auto !important;
  background: #e60012 !important;  /* 赤 */
  color: #fff !important;
  border: none !important;
  border-radius: 12px !important;   /* 角丸 */
  padding: 10px !important;         /* 大きめ */
  font-size: 18px !important;       /* 大きめ */
  font-weight: 700 !important;
  box-shadow: 0 6px 16px rgba(230,0,18,.25) !important; /* シャドー */
  cursor: pointer !important;
  transition: transform .08s ease, box-shadow .2s ease, background .2s ease !important;
}
body.contactfoam .submit-btn:hover{
  background: #c90010 !important;
  box-shadow: 0 8px 20px rgba(230,0,18,.33) !important;
}
body.contactfoam .submit-btn:active{ transform: translateY(1px) !important; }
body.contactfoam .submit-btn:focus{
  outline: 2px solid #ffd1d6 !important;
  outline-offset: 2px !important;
}

/* ── 枠内（input/select/textarea）の文字だけ小さく ── */
body.contactfoam .contact-form-wrap .field input[type="text"],
body.contactfoam .contact-form-wrap .field input[type="email"],
body.contactfoam .contact-form-wrap .field input[type="url"],
body.contactfoam .contact-form-wrap .field input[type="date"],
body.contactfoam .contact-form-wrap .field select,
body.contactfoam .contact-form-wrap .field textarea{
  font-size: 13px !important;       /* 小さくする */
  padding: 10px 12px !important;     /* 見た目崩れ防止で少し詰める */
  line-height: 1.5 !important;
  margin-bottom: 5px !important;
}
/* プレースホルダーも小さく */
body.contactfoam .contact-form-wrap .field input::placeholder,
body.contactfoam .contact-form-wrap .field textarea::placeholder{
  font-size: 13px !important;
}
/* 電話3分割も合わせる */
body.contactfoam .contact-form-wrap .tel-inputs input{
  font-size: 13px !important;
}
/* 会議ブロック内のセレクトも */
body.contactfoam #meetingFields select{
  font-size: 13px !important;
}
/* 補足文はさらに控えめ */
body.contactfoam .help{
  font-size: 11.5px !important;
}

/* JSが付与する hidden を強制で非表示に */
body.contactfoam .hidden{ display: none !important; }

/* 「ミーティング＝希望する」のときだけ お問い合わせ内容の行を消す */
body.contactfoam:has(#meeting option:checked[value="希望する"]) #inquiryRow{
  display: none !important;
}

/* 逆に「希望しない」の時は表示（念のため明示） */
body.contactfoam:has(#meeting option:checked[value="希望しない"]) #inquiryRow{
  display: grid !important; /* あなたの行レイアウトに合わせて grid で表示 */
}

/* 念のため：非表示時に中の入力も触れないように（視覚以外もブロック） */
body.contactfoam:has(#meeting option:checked[value="希望する"]) #inquiryRow *{
  pointer-events: none;
}

/* 【第1/2/3候補】の日付と時間セレクトを同じサイズに揃える */
body.contactfoam .contact-form-wrap .form-row .field #date1,
body.contactfoam .contact-form-wrap .form-row .field #date2,
body.contactfoam .contact-form-wrap .form-row .field #date3,
body.contactfoam .contact-form-wrap .form-row .field select[name="time1"],
body.contactfoam .contact-form-wrap .form-row .field select[name="time2"],
body.contactfoam .contact-form-wrap .form-row .field select[name="time3"]{
  /* 幅をきっちり同じに */
  width: 200px !important;
  max-width: 200px !important;

  /* 高さ・内側余白・文字サイズを統一 */
  height: 42px !important;
  padding: 10px 12px !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  box-sizing: border-box !important;

  /* 横に並んだ時のベースライン差を解消 */
  display: inline-block !important;
  vertical-align: middle !important;
}

/* 日付と時間の間に少しだけ余白を付ける（第1/2/3共通） */
body.contactfoam #date1,
body.contactfoam #date2,
body.contactfoam #date3{
  margin-right: 10px !important;
}

/* UA差異対策（selectの高さを見た目合わせ）*/
body.contactfoam .contact-form-wrap .form-row .field select[name="time1"],
body.contactfoam .contact-form-wrap .form-row .field select[name="time2"],
body.contactfoam .contact-form-wrap .form-row .field select[name="time3"]{
  -webkit-appearance: none; /* Safari/Chromeでの高さ差を軽減 */
  -moz-appearance: none;
  appearance: none;
}


/* =========================================
   スマホ用CSS（置き換え版）  ≤768px
   - 文字は12px統一
   - ラベルを右寄せ＆少し右へ
   - 入力欄は高さ低め＆横幅やや狭め
   - 行は2カラム：ラベル42% / フィールド残り
   ========================================= */
@media (max-width: 768px){

  /* 基本フォントサイズ */
  body.contactfoam,
  body.contactfoam .contact-form-wrap,
  body.contactfoam .contact-form-wrap input,
  body.contactfoam .contact-form-wrap select,
  body.contactfoam .contact-form-wrap textarea,
  body.contactfoam .contact-lead,
  body.contactfoam .help,
  body.contactfoam .company-info,
  body.contactfoam .completion-message{
    font-size: 12px !important;
  }
  body.contactfoam .contact-form-wrap input::placeholder,
  body.contactfoam .contact-form-wrap textarea::placeholder{
    font-size: 12px !important;
  }

  /* カード幅と余白 */
  body.contactfoam .contact-form-wrap{
    width: min(96vw, 680px) !important;
    margin: 20px auto !important;
    padding: 16px 14px !important;
    box-sizing: border-box;
  }

  /* 1行のレイアウト（ラベル：フィールド＝42%：残り） */
  body.contactfoam .contact-form-wrap .form-row{
    display: grid !important;
    grid-template-columns: 42% 1fr;   /* ←バランスはここで微調整（40〜45%推奨） */
    column-gap: 8px;
    align-items: center;
    margin-bottom: 16px !important;
    width: 100%;
  }

  /* ラベル（項目欄）を右寄せ＆少し右に寄せる */
  body.contactfoam .contact-form-wrap .form-row .label,
  body.contactfoam .contact-form-wrap .form-row label{
    text-align: right;
    padding-left: 10px;   /* 左端にくっついて隠れないように */
    padding-right: 20px;
    margin-left: 6px;     /* ブロック自体をわずかに右へ */
    white-space: nowrap;
    line-height: 1.35;
    overflow: visible;
    box-sizing: border-box;
  }
  /* 必須/任意バッジがある場合の間隔 */
  body.contactfoam .contact-form-wrap .form-row .label .badge,
  body.contactfoam .contact-form-wrap .form-row label .badge{
    margin-left: 6px;
  }

  /* 入力欄：高さを低く、横幅をやや狭く（はみ出し防止） */
  body.contactfoam .contact-form-wrap .form-row .field{ min-width: 0; }
  body.contactfoam .contact-form-wrap .form-row .field input,
  body.contactfoam .contact-form-wrap .form-row .field select,
  body.contactfoam .contact-form-wrap .form-row .field textarea{
    width: 92% !important;   /* 100%だと窮屈→少し狭めて余白確保 */
    min-height: 34px;        /* 高さ控えめ */
    padding: 6px 8px;        /* コンパクトな内側余白 */
    line-height: 1.2;
    box-sizing: border-box;
  }
  /* セレクト矢印のため右側余白を少し多めに */
  body.contactfoam .contact-form-wrap .form-row .field select{
    padding-right: 28px !important;
  }
  /* テキストエリアは最小高を控えめに */
  body.contactfoam .contact-form-wrap .form-row .field textarea{
    min-height: 84px !important;
  }

  /* 電話番号などの分割フィールド */
  body.contactfoam .contact-form-wrap .tel-inputs{
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px;
    width: 92% !important;
  }

  /* 日付・時間・プルダウンなどは行幅いっぱいに */
  body.contactfoam #date1,
  body.contactfoam #date2,
  body.contactfoam #date3,
  body.contactfoam select[name="time1"],
  body.contactfoam select[name="time2"],
  body.contactfoam select[name="time3"],
  body.contactfoam #meeting{
    width: 100% !important;
    max-width: none !important;
    display: block !important;
    margin-right: 0 !important;
  }

  /* 送信ボタン（大きすぎ問題の調整） */
  body.contactfoam .submit-btn,
  body.contactfoam button[type="submit"]{
    font-size: 14px !important;
    line-height: 1.2 !important;
    padding: 10px 14px !important;
    width: 100% !important;
    box-sizing: border-box;
  }

  /* 説明文の上下マージン微調整（任意） */
  body.contactfoam .contact-form-wrap .contact-lead p{
    margin: 20px 0 !important;
  }
}

/* さらに狭い端末（≤480px）：微調整だけ */
@media (max-width: 480px){
  body.contactfoam .contact-form-wrap .form-row{
    grid-template-columns: 44% 1fr;  /* 画面が狭いのでラベルを少し広げて読みやすく */
    column-gap: 6px;
    --aka-label-col: 170px;
    --aka-gap: 0px;
  }
  body.contactfoam .contact-form-wrap .form-row .field input,
  body.contactfoam .contact-form-wrap .form-row .field select,
  body.contactfoam .contact-form-wrap .form-row .field textarea{
    width: 90% !important;          /* さらに1〜2%だけ短くして余白を確保 */
  }

  body.contactfoam .contact-form-wrap .contact-lead {
      margin-top: 65px;
  }

  body.contactfoam .contact-form-wrap .tel-inputs {
    gap: 0px !important;
  }
}

/* iPad 横向きのみ（サイズ問わず）＋ contactfoam ページ限定 */
@media screen and (orientation: landscape) and (min-width: 768px) and (max-width: 1366px) {

  body.contactfoam .contact-form-wrap .contact-lead {
    margin-top: 100px;
  }

}