/* /contact/ フォームの専用CSS（新規実装）。
 *
 * 方針: フォームは [data-legacy-content] の内側に置き、本文の行間・リンク色・段落余白等は
 *   legacy-content.css から【継承】する。このファイルは継承では成立しない差分
 *   （入力欄・セレクト・ボタン・エラー表示・ハニーポットの隠蔽など）だけを書く。
 *   継承される本文値は上書きし直さない。
 *
 * 色の出所（現行サイトで既に使用されている実値のみ）:
 *   --cf-accent  … CTA/リンクのティール #3c8b86（legacy-chrome.css .main-section
 *                  { --vk-color-text-link:#3c8b86 } / Lightning テーマ vk-color-primary）
 *   --cf-accent-dark … #1d4946（同 .main-section --vk-color-text-link-hover）
 *   --cf-error   … #d44950（legacy-content.css [data-legacy-content]{--vk-color-text-meta:#d44950}）
 *   --cf-border  … rgba(0,0,0,0.07)（legacy-content.css --vk-color-border-hr）
 * フォントサイズは全て14px以上。
 */

.contact-form {
  --cf-accent: #3c8b86;
  --cf-accent-dark: #1d4946;
  --cf-error: #d44950;
  --cf-border: rgba(0, 0, 0, 0.18);
  max-width: 640px;
  /* 新設ページのフォームを640px中央寄せ・オーナー承認2026-07-19・現行WPは全幅 */
  margin-left: auto;
  margin-right: auto;
}

.contact-form .cf-field {
  margin: 1.4rem 0;
}
.contact-form .cf-label {
  display: block;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.contact-form .cf-required {
  color: var(--cf-error);
  font-size: 14px;
  margin-left: 0.3em;
}
.contact-form .cf-desc {
  font-size: 14px;
  line-height: 1.7;
  margin: 0 0 0.6rem;
}

/* 入力欄・セレクト・テキストエリア（継承では成立しないフォーム制御の見た目） */
.contact-form input[type="email"],
.contact-form input[type="text"],
.contact-form select,
.contact-form textarea {
  width: 100%;
  box-sizing: border-box;
  font-size: 16px; /* iOS のズーム防止も兼ねて16px */
  line-height: 1.6;
  padding: 0.6em 0.75em;
  border: 1px solid var(--cf-border);
  border-radius: 4px;
  background: #fff;
  color: inherit;
}
.contact-form textarea {
  min-height: 160px;
  resize: vertical;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: 2px solid var(--cf-accent);
  outline-offset: 1px;
  border-color: var(--cf-accent);
}
.contact-form .cf-invalid input,
.contact-form .cf-invalid select,
.contact-form .cf-invalid textarea {
  border-color: var(--cf-error);
}

/* ラジオ・チェックボックス（タップ対象44px確保） */
.contact-form .cf-choice {
  display: flex;
  align-items: flex-start;
  gap: 0.5em;
  min-height: 44px;
  font-size: 16px;
  line-height: 1.6;
  cursor: pointer;
}
.contact-form .cf-choice input {
  width: 1.15em;
  height: 1.15em;
  margin-top: 0.3em;
  flex: 0 0 auto;
}

.contact-form .cf-counter {
  font-size: 14px;
  color: #555; /* legacy-content.css の本文色 --vk-color-text-body:#555555 と同値 */
  text-align: right;
  margin-top: 0.25rem;
}

/* インラインエラー（各フィールド直下・赤系・14px以上） */
.contact-form .cf-error {
  color: var(--cf-error);
  font-size: 14px;
  line-height: 1.6;
  margin: 0.35rem 0 0;
}

/* 送信ボタン（主要CTA） */
.contact-form .cf-submit {
  appearance: none;
  border: none;
  border-radius: 100px; /* Lightning のボタン角丸 --vk-size-radius-btn-primary:100px と同傾向 */
  background: var(--cf-accent);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  padding: 0.8em 2.4em;
  cursor: pointer;
  min-height: 44px;
}
.contact-form .cf-submit:hover:not(:disabled) {
  background: var(--cf-accent-dark);
}
.contact-form .cf-submit:disabled {
  opacity: 0.6;
  cursor: default;
}

/* ハニーポット（視覚・スクリーンリーダー双方から隠す） */
.contact-form .cf-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* 送信結果メッセージ */
.contact-form-result {
  font-size: 16px;
  line-height: 1.8;
  padding: 1.2em 1.4em;
  border-radius: 6px;
  border: 1px solid var(--cf-border);
}
.contact-form-result.is-success {
  border-color: var(--cf-accent);
  background: rgba(60, 139, 134, 0.06); /* --cf-accent の淡色 */
}
.contact-form-result.is-error {
  border-color: var(--cf-error);
  background: rgba(212, 73, 80, 0.06); /* --cf-error の淡色 */
}