@charset "UTF-8";
/**
 * お問い合わせ 2026 — Dark Editorial
 * page-contact.php 専用。front-2026.css → archive-2026.css の後に読み込む
 * （見出し部分は archive-2026.css の .ar-head をそのまま使っている）。
 *
 * 本文は Contact Form 7 が出力するマークアップなので、CF7 のクラスを対象にしている。
 * CF7 と Turnstile のスクリプトは外していない（外すと送信できなくなる）。
 */

.ct-body {
  padding: 0 var(--gutter) 120px;
  background: var(--bg);
}

/* 本文は読みやすい幅に収める */
.ct-body > * {
  max-width: 720px;
}

/* ---------- 本文中の見出し・テキスト ---------- */

.ct-body h2 {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 300;
  color: var(--fg);
  margin-bottom: 8px;
}

.ct-body h4 {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 3px;
  color: var(--accent);
  margin-bottom: 32px;
}

.ct-body p,
.ct-body div {
  font-size: 13px;
  line-height: 26px;
  color: var(--muted);
}

.ct-body a { color: var(--accent); }
.ct-body a:hover { color: var(--fg); text-decoration: underline; }

/* 本文末尾に装飾の写真が入っているが、フォームの後に置く必然性がないので非表示にする。
   フォーム内の画像は対象外（:not(form img)）。
   本来は管理画面で本文から削除するのが筋（DB変更になるため今はCSS対処）。 */
.ct-body img { display: none; }
.ct-body form img { display: revert; }

/* ---------- Contact Form 7 ---------- */

.ct-body .wpcf7 { margin-top: 32px; }

/* フレックスにすると「必須」バッジとラベル文字が別行に割れ、バッジが全幅に伸びる。
   `<span class="essential">必須</span>お名前` はインラインで並ぶ想定なので通常フローにする。 */
.ct-body .wpcf7-form p { margin-bottom: 26px; }

.ct-body .wpcf7-form-control:where(input, textarea, select) { margin-top: 10px; }

/* 入力欄。ダーク背景に沈む枠線＋フォーカスでアクセント */
.ct-body .wpcf7-form-control:where(input, textarea, select),
.ct-body input[type="text"],
.ct-body input[type="email"],
.ct-body input[type="tel"],
.ct-body textarea {
  width: 100%;
  padding: 14px 16px;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.7;
  color: var(--fg);
  transition: border-color .2s ease, background-color .2s ease;
}

.ct-body textarea { min-height: 200px; resize: vertical; }

.ct-body input::placeholder,
.ct-body textarea::placeholder { color: #5f5b57; }

.ct-body input:focus,
.ct-body textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: #161413;
}

/* 送信ボタン。トップページの .lp-btn と同じ扱い */
.ct-body .wpcf7-submit,
.ct-body input[type="submit"] {
  display: inline-block;
  width: auto;
  margin-top: 8px;
  padding: 15px 40px;
  background: var(--fg);
  color: var(--bg);
  border: none;
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .5px;
  cursor: pointer;
  transition: background-color .2s ease, transform .2s ease;
}

.ct-body .wpcf7-submit:hover { background: #fff; transform: translateY(-1px); }
.ct-body .wpcf7-submit:disabled { opacity: .5; cursor: default; transform: none; }

/* ---------- 検証メッセージ ---------- */

/* 各項目のエラー。CF7 既定の赤は暗背景で沈むので明るめの赤にする */
.ct-body .wpcf7-not-valid-tip {
  font-size: 12px;
  color: #e88b7d;
}

.ct-body .wpcf7-form-control.wpcf7-not-valid { border-color: #e88b7d; }

/* 送信後の結果表示 */
.ct-body .wpcf7-response-output {
  margin: 24px 0 0 !important;
  padding: 14px 18px !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--fg);
  background: var(--bg-alt);
}

.ct-body .wpcf7 form.sent .wpcf7-response-output { border-color: var(--accent) !important; }
.ct-body .wpcf7 form.invalid .wpcf7-response-output,
.ct-body .wpcf7 form.failed .wpcf7-response-output { border-color: #e88b7d !important; }

/* 送信中のスピナー */
.ct-body .wpcf7-spinner { background-color: var(--muted); }

/* Turnstile（Cloudflare）は iframe なので配置だけ整える */
.ct-body .wpcf7-turnstile { margin-bottom: 24px; }

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .ct-body { padding-bottom: 88px; }
  .ct-body h2 { font-size: 24px; }
  .ct-body textarea { min-height: 160px; }
}

@media (max-width: 560px) {
  .ct-body .wpcf7-submit { width: 100%; text-align: center; }
}

/* ---------- 本文側の調整 ---------- */

/* 本文の先頭に「Contact us / お問い合わせ」という見出しがあり、
   テンプレート側の .ar-head と重複するので隠している。
   本来は管理画面で本文から削除するのが筋だが、DB変更になるためCSSで対処。 */
.ct-body > h2:first-child,
.ct-body > h2:first-child + h4 { display: none; }

/* 空の <p> が本文に複数入っているので余白を潰す */
.ct-body > p:empty { display: none; }

/* ココナラへのリンク行 */
.ct-body > p > a {
  display: inline-block;
  margin: 4px 0 20px;
}

/* 必須バッジ。CF7 のラベル内 <span class="essential"> */
.ct-body .essential {
  display: inline-block;
  margin-right: 10px;
  padding: 3px 8px;
  background: rgba(200, 184, 154, .13);
  border: 1px solid var(--accent);
  border-radius: 2px;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--accent);
  vertical-align: 2px;
  line-height: 1.4;
}

/* 項目名 */
.ct-body .wpcf7-form label {
  font-size: 13px;
  color: var(--fg);
  letter-spacing: .04em;
}