/* ==========================================================================
   お問い合わせページ（page-contact.php / 固定ページスラッグ: contact）専用スタイル

   - すべて .contact-page 配下にスコープしている。additional.css は
     `input, textarea { width:45vw }` `input:focus { outline:none }` のような
     素の要素セレクタを持つので、スコープを外すと他ページのフォームまで変わる。
   - フォームの HTML は Contact Form 7 が出力する（テンプレートは管理画面）。クラス名は CF7 のものに合わせている。
   - 色とフォントはサイト既存のものだけを使う（新色は足さない）。
   ========================================================================== */

.contact-page {
  --cp-bg: #151720;
  --cp-field-bg: rgba(255, 255, 255, 0.06);
  --cp-field-bg-focus: rgba(255, 255, 255, 0.1);
  --cp-border: rgba(255, 255, 255, 0.28);
  --cp-border-hover: rgba(255, 255, 255, 0.5);
  --cp-accent: #c71585;    /* 送信ボタン・必須マーク（既存） */
  --cp-accent-2: #9966cc;  /* .btn-contact のホバー色（既存）。フォーカスリング・枠線に使う */
  /* 送信ボタンのホバー地色。#9966cc に白文字だと 4.1:1 で WCAG AA（4.5:1）に届かないため、
     同じ色相のまま 5.07:1 になるまで暗くした */
  --cp-accent-2-deep: #8a55c0;
  --cp-error: #ff7ab8;     /* 濃紺背景で読める明度に上げたマゼンタ */
  --cp-muted: rgba(255, 255, 255, 0.68);
  --cp-radius: 5px;        /* .btn-contact / .wpcf7-submit と同じ角丸 */

  padding-bottom: 120px;
}

/* --- 見出し: 固定ナビ（top:5%・高さ約70px）と重ならない位置まで下げる --- */
.contact-page .subtitle {
  padding-top: 150px;
  margin-bottom: 0;
}

/* --- リード文と返信目安 --- */
.contact-page__intro,
.contact-page__form,
.contact-page__notes {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.contact-page__intro {
  margin-top: 40px;
  margin-bottom: 48px;
  text-align: center;
}

.contact-page__lead {
  margin: 0;
  font-size: 16px;
  line-height: 1.9;
  color: #fff;
}

.contact-page__reply {
  display: inline-block;
  margin: 20px 0 0;
  padding: 4px 16px;
  border: 1px solid var(--cp-accent-2);
  border-radius: 999px;
  font-size: 13px;
  color: #fff;
}

/* --- フォームの並び --- */
.contact-page .wpcf7-form {
  text-align: left;
}

/* CF7 は各行を <p> で包む。行どうしの間隔はここで決める（ラベル↔入力欄は下の 8px）。
   position:relative は送信ボタン横のスピナーを絶対配置するため。 */
.contact-page .wpcf7-form p {
  position: relative;
  margin: 0 0 28px;
}

.contact-page .wpcf7-form label {
  display: block;
  width: auto;
  margin: 0;
  font-size: 15px;
  letter-spacing: 0.04em;
  color: #fff;
  text-align: left;
}

/* CF7 の自動整形がラベル文字列と入力欄の間に入れる <br>。間隔は margin で取る */
.contact-page .wpcf7-form label br {
  display: none;
}

.contact-page .wpcf7-form-control-wrap {
  display: block;
  margin-top: 8px;
}

/* --- 入力欄 --- */
.contact-page .wpcf7-text,
.contact-page .wpcf7-email,
.contact-page .wpcf7-tel,
.contact-page .wpcf7-select,
.contact-page .wpcf7-textarea {
  display: block;
  width: 100%;
  margin: 0;
  padding: 12px 16px;
  font-family: inherit;
  font-size: 16px; /* 16px 未満だと iOS Safari がフォーカス時に画面を拡大する */
  line-height: 1.6;
  color: #fff;
  background-color: var(--cp-field-bg);
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-radius);
  box-shadow: none;
  transition: border-color 0.2s, background-color 0.2s;
}

.contact-page .wpcf7-textarea {
  min-height: 200px;
  resize: vertical;
}

.contact-page .wpcf7-form-control::placeholder {
  /* 0.5 で入力欄の地に対して 4.9:1（WCAG AA）。これより薄くすると読めない人が出る */
  color: rgba(255, 255, 255, 0.5);
  opacity: 1;
}

.contact-page .wpcf7-text:hover,
.contact-page .wpcf7-email:hover,
.contact-page .wpcf7-tel:hover,
.contact-page .wpcf7-select:hover,
.contact-page .wpcf7-textarea:hover {
  border-color: var(--cp-border-hover);
}

/* additional.css の `input:focus, textarea:focus { outline:none }` で消えている
   フォーカス表示をここで戻す。テキスト系の欄はクリックでも :focus-visible になる。 */
.contact-page .wpcf7-text:focus-visible,
.contact-page .wpcf7-email:focus-visible,
.contact-page .wpcf7-tel:focus-visible,
.contact-page .wpcf7-select:focus-visible,
.contact-page .wpcf7-textarea:focus-visible {
  outline: 2px solid var(--cp-accent-2);
  outline-offset: 2px;
  border-color: var(--cp-accent-2);
  background-color: var(--cp-field-bg-focus);
}

/* Chrome の自動入力は水色の背景＋黒文字を強制し、濃紺の画面で浮く。内側の影で塗り直す */
.contact-page .wpcf7-form-control:-webkit-autofill,
.contact-page .wpcf7-form-control:-webkit-autofill:hover,
.contact-page .wpcf7-form-control:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff;
  caret-color: #fff;
  box-shadow: 0 0 0 1000px #23253a inset;
}

/* セレクト: OS 既定の矢印を消して、サイトの線の太さに合わせた矢印を描く */
.contact-page .wpcf7-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 44px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23ffffff' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px 8px;
}

/* ドロップダウンの一覧は OS が白地で描くことがあるため、文字色を濃くしておく */
.contact-page .wpcf7-select option {
  color: #191c27;
  background-color: #fff;
}

/* --- 送信ボタン ---
   サイト共通の .btn-contact と同じ「紫が斜めに流れ込む」ホバー演出にそろえる。
   <input type="submit"> は ::after を持てないので、斜めのグラデーションを
   background-position で動かして同じ見え方を作っている。 */
.contact-page .wpcf7-submit {
  display: block;
  width: 100%;
  margin: 8px 0 0;
  padding: 14px 16px;
  font-family: "Nova Flat", "Kiwi Maru", cursive;
  font-size: 16px;
  letter-spacing: 0.08em;
  color: #fff;
  cursor: pointer;
  border: none;
  border-radius: var(--cp-radius);
  background-color: var(--cp-accent);
  background-image: linear-gradient(135deg, var(--cp-accent-2-deep) 0 50%, transparent 50% 100%);
  background-size: 300% 100%;
  background-position: 100% 0;
  background-repeat: no-repeat;
  transition: background-position 0.5s ease-in-out, opacity 0.2s;
}

/* additional.css の .wpcf7-submit:hover（白地に反転）を打ち消して、演出を差し替える */
.contact-page .wpcf7-submit:hover {
  color: #fff;
  background-color: var(--cp-accent);
  background-position: 0 0;
}

.contact-page .wpcf7-submit:focus-visible {
  outline: 2px solid var(--cp-accent-2);
  outline-offset: 3px;
}

/* 送信中: CF7 が form に .submitting を付ける。二度押しを防ぎ、待ちを見せる */
.contact-page .wpcf7-form.submitting .wpcf7-submit {
  opacity: 0.6;
  cursor: progress;
  pointer-events: none;
}

/* CF7 のスピナーはボタンの右隣にインラインで出て、中央揃えのボタンを押しのける。
   ボタンの内側右端に重ねる */
.contact-page .wpcf7-spinner {
  position: absolute;
  top: 50%;
  right: 16px;
  margin: 0;
  margin-top: 4px; /* .wpcf7-submit の margin-top 8px の半分。ボタンの縦中央に合わせる */
  transform: translateY(-50%);
  background-color: #fff;
  opacity: 0.9;
}

.contact-page .wpcf7-spinner::before {
  background-color: var(--cp-accent);
}

/* --- エラー表示 --- */
.contact-page .wpcf7-not-valid-tip {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  color: var(--cp-error);
}

.contact-page .wpcf7-form-control.wpcf7-not-valid {
  border-color: var(--cp-error);
}

/* フォーム下の全体メッセージ（CF7 既定は水色や黄色の太枠） */
.contact-page .wpcf7 form .wpcf7-response-output {
  margin: 24px 0 0;
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.7;
  color: #fff;
  text-align: left;
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-radius);
}

.contact-page .wpcf7 form.invalid .wpcf7-response-output,
.contact-page .wpcf7 form.unaccepted .wpcf7-response-output,
.contact-page .wpcf7 form.payment-required .wpcf7-response-output,
.contact-page .wpcf7 form.failed .wpcf7-response-output,
.contact-page .wpcf7 form.aborted .wpcf7-response-output,
.contact-page .wpcf7 form.spam .wpcf7-response-output {
  border-color: var(--cp-error);
}

/* --- 個人情報・reCAPTCHA の注記 --- */
.contact-page__notes {
  margin-top: 32px;
  text-align: left;
}

.contact-page__notes p {
  margin: 0 0 8px;
  font-size: 12px;
  line-height: 1.8;
  color: var(--cp-muted);
}

.contact-page__notes a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.contact-page__notes a:hover {
  color: var(--cp-accent-2);
}

.contact-page__notes a:focus-visible {
  outline: 2px solid var(--cp-accent-2);
  outline-offset: 2px;
}

/* --- SP --- */
@media screen and (max-width: 600px) {
  .contact-page {
    padding-bottom: 80px;
  }

  /* 固定表示のロゴ（.toplogo・幅25vw）とハンバーガーの下に潜らない位置 */
  .contact-page .subtitle {
    padding-top: 120px;
  }

  /* 長い和文の中央揃えは行頭が揃わず読みにくいので、SP では左揃えにする */
  .contact-page__intro {
    margin-top: 24px;
    margin-bottom: 36px;
    text-align: left;
  }

  .contact-page__lead {
    font-size: 14px;
  }

  .contact-page .wpcf7-form p {
    margin-bottom: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-page .wpcf7-form-control,
  .contact-page .wpcf7-submit {
    transition: none;
  }
}