@charset "UTF-8";
/* ============================================================
   お問い合わせ（固定ページ contact / Snow Monkey Forms）
   - functions.php で、お問い合わせページだけ読み込む
   - Snow Monkey Forms の app.css のあとに読み込まれる
   - フォーム設定の「フォームのスタイル」は「なし」にする
   ============================================================ */

.contactPage {
  --contact-green: #009e53;   /* ボタン・枠（.topLineBtn と同じ） */
  --contact-green-dark: #238469; /* 見出し・ラベル（メニューの文字色と同じ） */
  --contact-green-pale: #f3faf6; /* 入力欄の背景 */
  --contact-line: #cfe6d9;    /* 区切り線 */
  --contact-error: #db263e;   /* エラー（.engiRed と同じ） */
  --contact-text: #333;

  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 20px 64px;
  color: var(--contact-text);
}

/* 見出しと導入文 */
.contactTitle {
  color: var(--contact-green);
  font-size: clamp(24px, 4vw, 32px);
  text-align: center;
  margin: 0 0 32px;
}
.contactBody > p {
  line-height: 1.9;
  margin-bottom: 1em;
}

/* スクリーンリーダー用の文字（テーマに定義がないため。プログレストラッカーの説明文などが画面に出ないようにする） */
.contactPage .screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------
   フォーム本体
   ------------------------------------------------------------ */
.contactPage .snow-monkey-form {
  margin-top: 40px;
}

/* 各項目 */
.contactPage .smf-item {
  padding: 20px 0;
  border-top: 1px dotted var(--contact-line);
}
.contactPage .smf-item:first-of-type {
  border-top: none;
}
.contactPage .smf-item__label {
  font-weight: bold;
  color: var(--contact-green-dark);
  margin-bottom: 8px;
}
.contactPage .smf-item__description {
  font-size: 14px;
  color: #666;
}

/* 入力欄（iPhone でタップ時に拡大されないよう 16px 以上） */
.contactPage .smf-text-control__control,
.contactPage .smf-textarea-control__control {
  width: 100%;
  font-size: 16px;
  line-height: 1.6;
  padding: 10px 14px;
  color: var(--contact-text);
  background-color: var(--contact-green-pale);
  border: 1px solid var(--contact-green);
  border-radius: 8px;
  box-shadow: none;
}
.contactPage .smf-textarea-control__control {
  min-height: 12em;
  resize: vertical;
}
.contactPage .smf-text-control__control:focus,
.contactPage .smf-textarea-control__control:focus {
  background-color: #fff;
  outline: 3px solid rgba(0, 158, 83, 0.25);
  outline-offset: 1px;
}

/* チェックボックス（個人情報の同意）
   ブラウザ標準の見た目では枠の太さを変えられないため、appearance: none で描き直す */
.contactPage .smf-checkbox-control__label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.contactPage .smf-checkbox-control__control {
  -webkit-appearance: none;
  appearance: none;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin: 0;
  background: #fff center / 16px 16px no-repeat;
  border: 2px solid var(--contact-green);
  border-radius: 4px;
  cursor: pointer;
}
.contactPage .smf-checkbox-control__control:checked {
  background-color: var(--contact-green);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.contactPage .smf-checkbox-control__control:focus-visible {
  outline: 3px solid rgba(0, 158, 83, 0.35);
  outline-offset: 2px;
}
/* 未チェックで送信したとき：太い赤枠。チェックを入れたら緑に戻す */
.contactPage .smf-checkbox-control__control[data-invalid]:not(:checked) {
  border: 3px solid var(--contact-error);
  background-color: #fdecee;
  box-shadow: 0 0 0 3px rgba(219, 38, 62, 0.2);
}

/* エラー */
.contactPage .smf-error-messages {
  color: var(--contact-error);
  font-size: 14px;
  margin-top: 6px;
}
/* エラーのある入力欄（Snow Monkey Forms が data-invalid を付ける） */
.contactPage [data-invalid].smf-text-control__control,
.contactPage [data-invalid].smf-textarea-control__control,
.contactPage [data-invalid] .smf-text-control__control,
.contactPage [data-invalid] .smf-textarea-control__control {
  border-color: var(--contact-error);
}

/* 確認画面：入力内容を読みやすく */
.contactPage .snow-monkey-form[data-screen="confirm"] .smf-item__controls {
  white-space: pre-wrap;
  line-height: 1.8;
  padding: 4px 2px;
}

/* Turnstile */
.contactPage .smf-turnstile {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

/* ------------------------------------------------------------
   ボタン（.topLineBtn / .subLineBtn と同じ見た目）
   ------------------------------------------------------------ */
.contactPage .smf-action {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 32px;
}
.contactPage .smf-action .smf-button-control + .smf-button-control {
  margin-left: 0; /* gap で間隔を取るので、既定の余白を消す */
}
.contactPage .smf-button-control__control {
  font-family: "RocknRoll One", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  min-width: 200px;
  padding: 10px 40px;
  color: #fff;
  background: var(--contact-green);
  border: 2px solid var(--contact-green);
  border-radius: 50rem;
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.contactPage .smf-button-control__control:hover,
.contactPage .smf-button-control__control:focus-visible {
  color: var(--contact-green);
  background: #fff;
}
/* 「戻る」は白地（.subLineBtn） */
.contactPage .smf-button-control__control[data-action="back"] {
  color: var(--contact-green);
  background: #fff;
}
.contactPage .smf-button-control__control[data-action="back"]:hover,
.contactPage .smf-button-control__control[data-action="back"]:focus-visible {
  color: #fff;
  background: var(--contact-green);
}

/* 完了画面 */
.contactPage .smf-complete-content {
  text-align: center;
  line-height: 1.9;
  padding: 40px 0;
}
/* 完了画面の「ホームへ戻る」ボタン（完了画面にカスタムHTMLで置く） */
.contactPage .contactHomeBtn {
  margin-top: 32px;
}
.contactPage .contactHomeBtn a {
  display: inline-block;
  font-family: "RocknRoll One", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  min-width: 200px;
  padding: 10px 40px;
  color: var(--contact-green);
  background: #fff;
  border: 2px solid var(--contact-green);
  border-radius: 50rem;
  text-decoration: none;
  transition: background-color .2s, color .2s;
}
.contactPage .contactHomeBtn a:hover,
.contactPage .contactHomeBtn a:focus-visible {
  color: #fff;
  background: var(--contact-green);
}

/* ------------------------------------------------------------
   プログレストラッカー（使う場合）
   ------------------------------------------------------------ */
.contactPage .smf-progress-tracker__item[aria-current="true"] .smf-progress-tracker__item__number {
  background-color: var(--contact-green);
  color: #fff;
}
.contactPage .smf-progress-tracker__item[aria-current="true"] .smf-progress-tracker__item__text {
  color: var(--contact-green-dark);
  font-weight: bold;
}

@media (prefers-reduced-motion: reduce) {
  .contactPage .smf-button-control__control,
  .contactPage .contactHomeBtn a {
    transition: none;
  }
}