/*
PC/SP 共通問い合わせフォーム CSS（Consolidated v2025-12-08）
trend-contact.css
*/
@charset "UTF-8";

/* =========================
   基本トークン／外枠
========================= */
:root{
  --tfl-label-w: 220px;   /* PC時のラベル幅 */
  --tfl-row-gap: 16px;    /* 行間 */
}

/* スキン（茶系） */
.contact-brown{
  --cb-accent:#6b5137;
  --cb-border:#d9d3cb;
  --cb-btn:#6b5137;
  --cb-btn-txt:#fff;
  color:#333;
  font-size:16px;
  line-height:1.8;
}

.contact-brown .bar{
  width:4px;
  height:1.2em;
  border-radius:2px;
  background:var(--cb-accent);
  display:inline-block;
  margin-right:.5em;
}

/* 上部案内文 */
.c-form__notice{
  margin:0 0 18px;
  padding:.9em 1em;
  background:#f9f6f1;
  border:1px solid #e6ddd3;
  border-radius:8px;
  color:#4b3e31;
}

/* =========================
   行レイアウト（PC:2カラム／SP:1カラム）
========================= */
.c-form{
  max-width:980px;
  margin:0 auto;
}

.c-form__row{
  display:grid;
  grid-template-columns: var(--tfl-label-w) 1fr;
  column-gap:16px;
  row-gap:6px;
  align-items:start;
  margin:var(--tfl-row-gap) 0;
}

.c-form__label{
  font-weight:700;
  white-space:nowrap;
  display:flex;
  align-items:center;
}

.c-form__field{
  min-width:0;
}

/* =========================
   入力UI：input / textarea / select 共通
========================= */
.c-form__field input[type="text"],
.c-form__field input[type="email"],
.c-form__field input[type="tel"],
.c-form__field select,
.c-form__field textarea{
  width:100%;
  max-width:760px;
  box-sizing:border-box;
  border:1px solid var(--cb-border);
  border-radius:6px;
  background:#fff;
  padding:.65em .8em;
  font:inherit;
  line-height:1.6;
}

/* select 見た目統一（iOS/PC問わず） */
.c-form__field select{
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  background-color:#fff;
  background-image:none;
}

/* IE 用：デフォルト矢印を消す */
.c-form__field select::-ms-expand{
  display:none;
}

.c-form__field textarea{
  min-height:160px;
  resize:vertical;
}

/* placeholder */
.c-form :is(input,textarea)::placeholder{
  color:#9aa0a6;
  opacity:1;
}

/* 「※必須」などの補足 */
.c-form__req{
  margin:.45em 0 0;
  font-size:.9rem;
  color:#666;
}

/* 必須ラベル（新） */
.c-form__note{
  margin:4px 0 0;
  font-size:.85rem;
  color:#a38a7a;   /* 通常時（薄いブラウンなど） */
}
.c-form__note--error{
  color:#d33;      /* エラー時は赤 */
}

/* インライン群（ラジオ等） */
.c-form__inline{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 16px;
}

.c-form__radios label{
  display:inline-flex;
  align-items:center;
  gap:6px;
  cursor:pointer;
}

.c-form__field input[type="radio"]{
  margin-right:.35em;
  accent-color:var(--cb-accent);
}

/* 生年月日 */
.c-form__birth{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 10px;
}

.c-form__birth select{
  width:auto;
  min-width:6rem;
}

.c-form__birth-unit{
  margin-left:4px;
  margin-right:8px;
}

/* =========================
   ボタン（基本）
========================= */
.c-form__actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
  justify-content:center;
}

/* ボタンの見た目定義（PC/SP共通のベース） */
.c-form__actions .btn,
.c-form__actions [type="submit"],
.c-form__actions [type="button"]{
  appearance:none;
  border:1px solid var(--cb-btn);
  background:var(--cb-btn);
  color:#fff;
  padding:.7em 1.2em;
  border-radius:12px;
  font-weight:700;
  cursor:pointer;
}

/* 戻るボタンなどのゴーストボタン */
.c-form__actions .btn:not(.primary),
.c-form__actions [name="_tfl_step"][value="input"]{
  background:#fff;
  color:#4b3e31;
  border-color:#cfc7be;
}

/* =========================
   確認画面（見出し／リード／定義リスト）
========================= */
.c-form__subtitle{
  margin:1.5em 0 .6em;
  font-size:1.1rem;
  font-weight:700;
}

.c-form__lead{
  margin:0 0 1.5em;
  font-size:.95rem;
  line-height:1.8;
}

.c-form__confirm{
  display:grid;
  grid-template-columns: var(--tfl-label-w) 1fr;
  gap:10px 18px;
  margin:0 0 18px;
}

.c-form__confirm dt{
  font-weight:700;
  color:#4b3e31;
}

.c-form__confirm dd{
  margin:0;
  padding:.5em .7em;
  background:#fff;
  border:1px solid #e6ddd3;
  border-radius:8px;
}

/* =========================
   エラー表示（強制可視）
========================= */
.c-form__err,
.mwform-error,
.mw_wp_form .mwform-error,
.mw_wp_form .form-error,
.mw_wp_form .error,
.mw_wp_form .mw_wp_form_error{
  display:block !important;
  visibility:visible !important;
  margin:.45em 0 0;
  color:#c33;
  font-size:.92rem;
  line-height:1.6;
  background:none;
  border:0;
  box-shadow:none !important;
}

/* 生年月日：3項目のうち先頭だけ見せる互換 */
.c-form__birth .mwform-error{
  display:none;
}
.c-form__birth .mwform-error:first-of-type{
  display:inline-block;
  margin-left:8px;
}

/* =========================
   MW WP Form 互換
========================= */

/* フォーム内の自動改行BRを無効 */
.contact-brown .c-form .mw_wp_form br{
  display:none !important;
}

/* 旧ラッパ（.mf-row / .form-grid）を透過化して中身だけ流す */
.contact-brown .c-form .mf-row,
.contact-brown .c-form .form-grid{
  display:contents !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
}

/* 旧ラッパが残す <br> を抑止 */
.contact-brown .c-form .mf-row > br,
.contact-brown .c-form .mf-row label+br,
.contact-brown .c-form .mf-row input+br,
.contact-brown .c-form .mf-row textarea+br,
.contact-brown .c-form .mf-row select+br,
.contact-brown .c-form .form-grid dd br{
  display:none !important;
}

/* 旧 .mw_wp_form 系が margin/border を注入する場合の無効化 */
#contact .contact-brown .c-form .mw_wp_form *{
  border-image:initial !important;
}

/* =========================
   レスポンシブ共通
========================= */
@media (max-width: 767.98px){

  /* SP左右の余白を統一（16px） */
  #contact .container,
  #contact .l-contained,
  .l-contained{
    padding-left:16px !important;
    padding-right:16px !important;
  }

  .c-form__row{
    grid-template-columns:1fr;
  }

  .c-form__label{
    margin-top:6px;
    white-space:normal;
  }

  .c-form__confirm{
    grid-template-columns:1fr;
  }

  .c-form__field :is(input,select,textarea){
    max-width:100%;
  }

  .c-form__birth select{
    min-width:96px;
  }

  /* 種別ラジオ：左揃えで縦積み */
  .c-form__radios{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
  }
  .c-form__radios .mwform-radio-field{
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin:0 !important;
    width:100%;
  }

  /* フォーム下に余白（スマホ時） */
  #contact .c-form{
    margin-bottom:60px;
  }
}

/* PC 幅広レイアウト */
@media (min-width:1024px){
  :root{ --tfl-label-w:260px; }
  .l-contained{ max-width:1280px; }
}

/* =========================
   Contact Hotfix (テーマ上書き対策) v2025-12-08
========================= */

/* 入力枠をテーマより優先して確保 */
#contact .c-form__field input[type="text"],
#contact .c-form__field input[type="email"],
#contact .c-form__field input[type="tel"],
#contact .c-form__field select,
#contact .c-form__field textarea{
  box-sizing:border-box !important;
  background:#fff !important;
  border:1px solid var(--cb-border, #d9d3cb) !important;
  border-radius:6px !important;
  color:#333 !important;
  box-shadow:none !important;
}

/* select の appearance をフォームのスタイルに合わせて統一 */
#contact .c-form__field select{
  -webkit-appearance:none !important;
  -moz-appearance:none !important;
  appearance:none !important;
  background-image:none !important;
}

/* フォーカス可視化（テーマの outline:none 対策） */
#contact .c-form__field :is(input,select,textarea):focus{
  outline:none !important;
  border-color:#a8b6c8 !important;
  box-shadow:0 0 0 3px rgba(168,182,200,.25) !important;
}

/* ボタン：テーマの .btn を上書き（見た目のみ統一） */
#contact .c-form__actions .btn,
#contact .c-form__actions [type="submit"],
#contact .c-form__actions [type="button"],
#contact .c-form__actions .btn.primary{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:1em 1.2em !important;
  border-radius:12px !important;
  background:var(--cb-btn, #6b5137) !important;
  border:1px solid var(--cb-btn, #6b5137) !important;
  color:var(--cb-btn-txt, #fff) !important;
  text-decoration:none !important;
  box-shadow:none !important;
  font-size:1.1rem;
}

/* aタグボタン化（テーマが a.btn を別デザインにしている対策） */
#contact .c-form__actions .btn > a{
  all:unset !important;
  display:contents !important; /* 親のflexボタンをそのまま使う */
}

/* hover */
#contact .c-form__actions .btn:hover,
#contact .c-form__actions [type="submit"]:hover{
  filter:brightness(1.06);
}

/* 入力欄の透明化・枠消しを強制してくるテーマ対策 */
#contact .contact-brown .c-form input,
#contact .contact-brown .c-form textarea{
  background-clip:padding-box !important;
}

/* ▼ セレクト右側のアイコンをカスタムで表示 */
#contact .c-form__field select{
  -webkit-appearance:none !important;
  -moz-appearance:none !important;
  appearance:none !important;

  padding-right: 2.6em !important;

  background-color:#fff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 10 6'%3E%3Cpath fill='%236b5137' d='M1 0l4 4 4-4 1 1-5 5-5-5z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: calc(100% - 0.9em) 50% !important;
  background-size: 12px 7px !important;
}

/* =========================
   ボタン幅：PC と SP の違い（最終版）
========================= */

/* PC（768px以上）はボタンに最小幅 200px を持たせる */
@media (min-width: 768px){
  #contact .c-form__actions .btn,
  #contact .c-form__actions [type="submit"],
  #contact .c-form__actions [type="button"]{
    min-width:200px !important;
  }
}

/* SP（〜767px）は grid で 1:1 等分 */
@media (max-width: 767.98px){

  /* アクション部分を2カラムのグリッドに */
  #contact .c-form__actions{
    display:grid !important;
    grid-template-columns:1fr 1fr;
    column-gap:8px;
    row-gap:10px;
    justify-content:stretch !important;
  }

  /* 各ボタンはセルいっぱいに広げる */
  #contact .c-form__actions .btn,
  #contact .c-form__actions [type="submit"],
  #contact .c-form__actions [type="button"]{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 !important;              /* テーマ側 margin を殺す */
    padding:0.9em .4em !important;
    font-size:1rem;
  }
}