/* お問い合わせフォーム（Contact Form 7 ＋ オリジナルCSS）
 * 何を補うか: CF7もSWELLも入力欄の装飾を持たない。
 *   SWELLの素の入力欄は background:#f7f7f7 ／ 1px の枠 ／ border-radius:0 だけ
 *   （build/css/main.css。build/ を横断しても wpcf7 に当たるCSSは0件）。
 *
 * 当て先: [contact-form-7 … html_class="cside-form"] で <form> に付く .cside-form。
 *   CF7 は html_class をそのまま form のクラスへ足す（includes/contact-form.php）。
 *
 * 値は持たない。値は案件側（カスタマイザーの追加CSS）で --cff-* に入れる。
 * !important は使わない。CF7側の規則より深いセレクタで上書きしている。
 *
 * 戻し方: このファイルの読み込みを functions.php から外す。
 */
:root{
  /* 既定値＝素に近い見た目。案件側で上書きする。 */
  --cff-font: inherit;
  --cff-fs: 1.1em;
  --cff-lh: 1.7;
  --cff-form-width: 720px;

  --cff-row-gap: 22px;
  --cff-col-gap: 24px;
  --cff-label-width: 26%;
  --cff-label-color: inherit;
  --cff-label-bg: transparent;
  --cff-label-fs: 15px;
  --cff-label-weight: 700;

  --cff-field-bg: #ffffff;
  --cff-field-color: inherit;
  --cff-field-border: #cbd5e1;
  --cff-field-border-width: 1px;
  --cff-field-radius: 6px;
  --cff-field-height: 52px;
  --cff-field-pad-x: 14px;
  --cff-textarea-rows: 6;

  --cff-accent: #2563eb;
  --cff-accent-soft: rgba(37, 99, 235, .22);
  --cff-line: #e2e8f0;
  --cff-error: #c0392b;
  --cff-note-color: #64748b;

  --cff-req-bg: #c0392b;
  --cff-req-color: #ffffff;

  --cff-btn-bg: #1f2937;
  --cff-btn-color: #ffffff;
  --cff-btn-height: 56px;
  --cff-btn-radius: 6px;
  --cff-btn-fs: 16px;
  --cff-btn-width: 320px;
  --cff-btn-align: center;

  --cff-surface: transparent;
  --cff-surface-pad: 0px;
  --cff-surface-radius: 0px;
  --cff-cell-pad-y: 14px;
  --cff-cell-pad-x: 16px;
}

/* ---- 全体 ---- */
.cside-form{
  max-width: var(--cff-form-width);
  margin-left: auto;
  margin-right: auto;
  font-family: var(--cff-font);
  font-size: var(--cff-fs);
  line-height: var(--cff-lh);
  color: var(--cff-field-color);
}
.cside-form.-surface{
  padding: var(--cff-surface-pad);
  border-radius: var(--cff-surface-radius);
  background-color: var(--cff-surface);
}

/* ---- 行 ----
 * 半分幅（.-half）を2つ並べられるよう、入れ物を2列のグリッドにしている。
 * 全幅の行は grid-column を全体に伸ばす。 */
.cside-form .cff-fields{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--cff-col-gap);
  row-gap: var(--cff-row-gap);
}
.cside-form .cff-row{ grid-column: 1 / -1; min-width: 0; }
.cside-form .cff-row.-half{ grid-column: span 1; }

/* ---- 項目名の位置 ---- */
.cside-form.-layout-stack .cff-label{ margin-bottom: 7px; }
.cside-form.-layout-side .cff-row,
.cside-form.-layout-table .cff-row{
  display: grid;
  grid-template-columns: var(--cff-label-width) minmax(0, 1fr);
  align-items: start;
  column-gap: var(--cff-col-gap);
}
.cside-form.-layout-side .cff-row.-half,
.cside-form.-layout-table .cff-row.-half{ grid-column: 1 / -1; }
.cside-form.-layout-side .cff-label,
.cside-form.-layout-table .cff-label{ padding-top: .5em; }

/* 表組み風：項目名の列に地色を敷き、セルらしく余白を持たせる */
.cside-form.-layout-table .cff-row{ column-gap: 0; }
.cside-form.-layout-table .cff-label{
  padding: var(--cff-cell-pad-y) var(--cff-cell-pad-x);
  background-color: var(--cff-label-bg);
}
.cside-form.-layout-table .cff-input{ padding: var(--cff-cell-pad-y) var(--cff-cell-pad-x); }

/* ---- 区切り線 ---- */
.cside-form.-div-row .cff-row,
.cside-form.-div-outer-row .cff-row{ border-bottom: 1px solid var(--cff-line); padding-bottom: var(--cff-row-gap); }
.cside-form.-div-outer-row .cff-fields{ border-top: 1px solid var(--cff-line); padding-top: var(--cff-row-gap); }
.cside-form.-layout-table.-div-row .cff-row,
.cside-form.-layout-table.-div-outer-row .cff-row{ padding-bottom: 0; }

/* ---- 項目名と必須 ---- */
.cside-form .cff-label{
  display: block;
  color: var(--cff-label-color);
  font-size: var(--cff-label-fs);
  font-weight: var(--cff-label-weight);
  line-height: 1.6;
}
.cside-form .cff-label label{ display: inline; cursor: pointer; font-weight: inherit; }
.cside-form .cff-req{
  display: inline-block;
  margin-left: .6em;
  padding: .12em .55em;
  border-radius: 3px;
  background-color: var(--cff-req-bg);
  color: var(--cff-req-color);
  font-size: .72em;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.6;
  vertical-align: 1px;
}
.cside-form .cff-req.-text{ padding: 0; background-color: transparent; color: var(--cff-req-bg); font-size: .78em; letter-spacing: 0; }
.cside-form .cff-req.-mark{ padding: 0; background-color: transparent; color: var(--cff-req-bg); font-size: 1em; }
.cside-form .cff-opt{
  display: inline-block;
  margin-left: .6em;
  padding: .12em .55em;
  border: 1px solid var(--cff-line);
  border-radius: 3px;
  color: var(--cff-note-color);
  font-size: .72em;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.6;
  vertical-align: 1px;
}
.cside-form .cff-note{ margin: .45em 0 0; color: var(--cff-note-color); font-size: .84em; line-height: 1.65; }

/* ---- 入力欄 ---- */
.cside-form .wpcf7-form-control-wrap{ display: block; }
.cside-form input[type="text"],
.cside-form input[type="email"],
.cside-form input[type="tel"],
.cside-form input[type="url"],
.cside-form input[type="number"],
.cside-form input[type="date"],
.cside-form input[type="file"],
.cside-form select,
.cside-form textarea{
  width: 100%;
  min-height: var(--cff-field-height);
  padding: .5em var(--cff-field-pad-x);
  border: var(--cff-field-border-width) solid var(--cff-field-border);
  border-radius: var(--cff-field-radius);
  background-color: var(--cff-field-bg);
  color: var(--cff-field-color);
  font-family: inherit;
  font-size: inherit;
  line-height: 1.5;
  -webkit-appearance: none;
  appearance: none;
}
.cside-form textarea{
  min-height: calc(var(--cff-textarea-rows) * var(--cff-lh) * 1em + 1.2em);
  line-height: var(--cff-lh);
  resize: vertical;
}
.cside-form select{
  /* appearance:none で消える矢印を描き直す。画像は使わない（1リクエスト減らす）。 */
  background-image: linear-gradient(45deg, transparent 50%, var(--cff-field-color) 50%), linear-gradient(135deg, var(--cff-field-color) 50%, transparent 50%);
  background-position: calc(100% - var(--cff-field-pad-x) - 5px) center, calc(100% - var(--cff-field-pad-x)) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: calc(var(--cff-field-pad-x) * 2 + 12px);
}
.cside-form input::placeholder,
.cside-form textarea::placeholder{ color: var(--cff-note-color); opacity: .75; }

.cside-form input:focus,
.cside-form select:focus,
.cside-form textarea:focus{
  outline: none;
  border-color: var(--cff-accent);
  box-shadow: 0 0 0 3px var(--cff-accent-soft);
}

/* 枠のつけ方（既定は枠線で囲む） */
.cside-form.-field-underline input[type="text"],
.cside-form.-field-underline input[type="email"],
.cside-form.-field-underline input[type="tel"],
.cside-form.-field-underline input[type="url"],
.cside-form.-field-underline input[type="number"],
.cside-form.-field-underline input[type="date"],
.cside-form.-field-underline select,
.cside-form.-field-underline textarea{
  border-width: 0 0 var(--cff-field-border-width);
  border-radius: 0;
  background-color: transparent;
}
.cside-form.-field-fill input[type="text"],
.cside-form.-field-fill input[type="email"],
.cside-form.-field-fill input[type="tel"],
.cside-form.-field-fill input[type="url"],
.cside-form.-field-fill input[type="number"],
.cside-form.-field-fill input[type="date"],
.cside-form.-field-fill select,
.cside-form.-field-fill textarea{ border-color: transparent; }

/* 選択肢（ラジオ・チェックボックス） */
.cside-form .wpcf7-checkbox,
.cside-form .wpcf7-radio{ display: block; padding-top: .35em; }
.cside-form .wpcf7-list-item{ display: inline-block; margin: 0 1.4em .3em 0; }
.cside-form .wpcf7-list-item label{ display: inline-flex; align-items: baseline; gap: .1em; cursor: pointer; }
.cside-form input[type="checkbox"],
.cside-form input[type="radio"]{
  width: auto;
  min-height: 0;
  margin-right: .2em;
  padding: 0;
  border: 0;
  accent-color: var(--cff-accent);
  transform: translateY(1px);
}

/* 同意チェック */
.cside-form .cff-consent{ margin-top: calc(var(--cff-row-gap) * 1.2); text-align: var(--cff-btn-align); }
.cside-form .cff-consent .wpcf7-list-item{ margin: 0; }
.cside-form .cff-consent a{ color: inherit; text-decoration: underline; }

/* ---- 送信 ---- */
.cside-form .cff-foot-note{ margin: calc(var(--cff-row-gap) * .8) 0 0; color: var(--cff-note-color); font-size: .86em; line-height: 1.7; text-align: var(--cff-btn-align); white-space: pre-line; }
.cside-form .cff-actions{ position: relative; margin-top: calc(var(--cff-row-gap) * 1.4); text-align: var(--cff-btn-align); }
/* 送信中インジケーターはCF7が必ず出す。見えていなくても
 * 幅24px＋左右24pxの余白を場所として取るため、中央寄せのボタンが
 * 左へ36pxずれる（2026-09-06 DOT PRESSのステージングで実測）。
 * 流れから外して、ボタンのすぐ右に置く。 */
.cside-form .wpcf7-spinner{ position: absolute; margin: 0 0 0 16px; }
.cside-form .wpcf7-submit{
  display: inline-block;
  width: var(--cff-btn-width);
  max-width: 100%;
  min-height: var(--cff-btn-height);
  padding: .7em 2em;
  border: 0;
  border-radius: var(--cff-btn-radius);
  background-color: var(--cff-btn-bg);
  color: var(--cff-btn-color);
  font-size: var(--cff-btn-fs);
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.5;
  text-align: center;
  cursor: pointer;
  transition: opacity .2s ease;
}
.cside-form .wpcf7-submit:hover{ opacity: .82; }
.cside-form .wpcf7-submit:focus-visible{ outline: 3px solid var(--cff-accent); outline-offset: 2px; }

/* ---- 検証メッセージ ----
 * CF7側は「.wpcf7 form .wpcf7-response-output」（特異度 0,2,1）。
 * 同じ形にクラスを1つ足して確実に上回る。!important は使わない。 */
.wpcf7 form.cside-form .wpcf7-response-output{
  margin: 1.6em 0 0;
  padding: .9em 1.1em;
  border-width: 1px;
  border-radius: var(--cff-field-radius);
  font-size: .88em;
  line-height: 1.7;
}
.cside-form .wpcf7-not-valid-tip{ margin-top: .4em; color: var(--cff-error); font-size: .84em; }
.cside-form input.wpcf7-not-valid,
.cside-form select.wpcf7-not-valid,
.cside-form textarea.wpcf7-not-valid{ border-color: var(--cff-error); }

/* ---- 狭い画面 ---- */
@media (max-width: 781px){
  .cside-form .cff-fields{ grid-template-columns: 1fr; }
  .cside-form .cff-row.-half{ grid-column: 1 / -1; }
  .cside-form.-layout-side .cff-row,
  .cside-form.-layout-table .cff-row{ grid-template-columns: 1fr; row-gap: 7px; }
  .cside-form.-layout-side .cff-label,
  .cside-form.-layout-table .cff-label{ padding-top: 0; }
  .cside-form.-layout-table .cff-input{ padding-top: 0; }
  .cside-form .wpcf7-submit{ width: 100%; }
}