/* ============================================================
   style-contact.css — お問い合わせページ専用スタイル
   slug: contact
   ============================================================ */

/* 電話番号一覧（[eiken_contact_tel] ショートコード出力） */
.contact-tel-list {
  width: fit-content;
  margin: 0 auto var(--space-lg);
}
.contact-tel-list > div {
  display: flex;
  align-items: center;
  padding: var(--space-ss) 0;
  transition: transform 0.2s ease;
  transform-origin: left center;
}
.contact-tel-list > div:hover {
  transform: scale(1.2);
}
.contact-tel-list dt {
  width: 9em;
  white-space: nowrap;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.4em;
}
.contact-tel-list dt::before {
  content: "";
  display: inline-block;
  width: var(--space-xs);
  height: var(--space-xs);
  background: var(--c-main);
  flex-shrink: 0;
}
.contact-tel-list dd {
  margin: 0;
}
.contact-tel-list dd a {
  font-size: var(--fs-18);
  color: var(--c-text);
  text-decoration: none;
  white-space: nowrap;
}
.contact-tel-list dd a:hover {
  color: var(--c-main);
}

.wpcf7-form label i {
  color: var(--c-main);
}

.contact-form-lead {
  text-align: center;
  margin: 0 auto var(--space-lg);
  color: var(--c-text);
  line-height: var(--lh-wide);
}

/* CF7フォーム本体 — 最大幅640px・縦並びフレックス */
.wpcf7-form {
  max-width: var(--w-content);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* 各 <label>（ラベルテキスト＋入力欄を縦並び） */
.wpcf7-form label {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
  font-weight: 700;
  font-size: var(--fs-16);
}

/* span.wpcf7-form-control-wrap — フル幅ブロック */
.wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}

/* テキスト・メール入力 */
.wpcf7-form .wpcf7-text,
.wpcf7-form .wpcf7-email {
  width: 100%;
  padding: 0.65em 0.9em;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  font-size: var(--fs-16);
  font-family: inherit;
  color: var(--c-text);
  background: var(--c-white);
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* テキストエリア */
.wpcf7-form .wpcf7-textarea {
  width: 100%;
  padding: 0.65em 0.9em;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  font-size: var(--fs-16);
  font-family: inherit;
  color: var(--c-text);
  background: var(--c-white);
  box-sizing: border-box;
  resize: vertical;
  min-height: 130px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* フォーカス */
.wpcf7-form .wpcf7-text:focus,
.wpcf7-form .wpcf7-email:focus,
.wpcf7-form .wpcf7-textarea:focus {
  outline: none;
  border-color: var(--c-main);
  box-shadow: 0 0 0 3px var(--c-main-a12);
}

/* バリデーションエラー — 入力欄の境界線 */
.wpcf7-form .wpcf7-not-valid {
  border-color: #e53935 !important;
}

/* 必須／任意バッジ */
.contact-form-badge {
  display: inline-block;
  font-size: var(--fs-12);
  font-weight: 700;
  padding: 0.1em 0.6em;
  border-radius: 4px;
  background: var(--c-border);
  color: var(--c-text);
  line-height: var(--lh-ui);
}
.contact-form-badge--required {
  background: #e53935;
  color: var(--c-white);
}

/* バリデーションエラー — エラーメッセージテキスト */
.wpcf7-not-valid-tip {
  display: block;
  font-size: var(--fs-14);
  color: #e53935;
  margin-top: 0.3em;
}

/* CF7 が [submit] を <p> で囲むため、<p> 側に text-align:center を設定 */
.wpcf7-form p:has(.wpcf7-submit) {
  text-align: center;
}

/* 送信ボタン — ピル型。input は擬似要素不可のため chevron は背景SVGで右に付加 */
.wpcf7-form .wpcf7-submit {
  padding: 0.8em 3em 0.8em 2.5em;
  background-color: var(--c-main);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512' fill='%23ffffff'%3E%3Cpath d='M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.4em center;
  background-size: 0.55em auto;
  color: var(--c-white);
  border: none;
  border-radius: var(--radius);
  font-size: var(--fs-16);
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  min-width: 180px;
  transition: background-color 0.2s ease, opacity 0.2s ease;

  &:hover {
    background-color: var(--c-main-hover);
  }

  &:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }
}

/* 同意チェックボックス */
.contact-form-acceptance {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-size: var(--fs-14);
}
.contact-form-acceptance .wpcf7-acceptance {
  display: flex;
  align-items: center;
  gap: 0.5em;
}
.contact-form-acceptance .wpcf7-acceptance label {
  flex-direction: row;
  align-items: center;
  gap: 0.5em;
  font-weight: 400;
}
.contact-form-acceptance input[type="checkbox"] {
  width: 1.1em;
  height: 1.1em;
  accent-color: var(--c-main);
  cursor: pointer;
  flex-shrink: 0;
}
.contact-form-acceptance a {
  color: var(--c-main);
  text-decoration: underline;
}
.contact-form-acceptance a:hover {
  color: var(--c-main-hover);
}

/* Cloudflare Turnstile（CF7 インテグレーションが出力。
   .cloudflare-turnstile はフォーム本文で手動ラップした場合の受け皿） */
.cloudflare-turnstile,
.wpcf7-form .cf-turnstile {
  text-align: center;

  & p {
    font-size: var(--fs-14);
    color: var(--c-text-light);
    margin-bottom: var(--space-md);
  }
}

/* CF7スピナー（送信中） */
.wpcf7-spinner {
  visibility: hidden;
  display: inline-block;
  margin-left: 0.5em;
  vertical-align: middle;
}

.wpcf7-form.submitting .wpcf7-spinner {
  visibility: visible;
}

/* レスポンスメッセージ */
.wpcf7-response-output {
  margin-top: var(--space-sm);
  padding: 0.8em 1em;
  border-radius: 6px;
  font-size: var(--fs-14);
  border: 1px solid transparent;
  text-align: center;
}

.wpcf7-form.sent .wpcf7-response-output {
  border-color: var(--c-main);
  color: var(--c-main);
  background: var(--c-main-a12);
}

.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.spam .wpcf7-response-output {
  border-color: #e53935;
  color: #c62828;
  background: #ffebee;
}