/* =========================================================
   お問い合わせページ（/contact）用スタイル
   - レイアウト／補助UI／レスポンシブ／CF7を順に整理
========================================================= */


/* =========================================================
   0) レイアウト／タイトル
========================================================= */

/* タイトル（H1） */
.page-slug-contact .page-title.char-animate {
  text-align: center;
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-family: 'Zen Kurenaido', sans-serif;
  color: var(--c-service); /* #338998 → トークン */
  margin: var(--sp-12) auto;
}


/* =========================================================
   1) レイアウト調整・補助UI
========================================================= */

/* ページコンテナ（メインレイアウト） */
.container.contact-container {
  max-width: 700px;
  margin: auto;
  padding-top: 5rem;
}

/* 説明リンク（問い合わせ注記／reCAPTCHA注記） */
.contact-desc a,
.recaptcha-note a {
  color: #338998;
  text-decoration: none;
  font-weight: 500;
  padding: .2rem;
}
.contact-desc a:hover,
.contact-desc a:focus-visible,
.recaptcha-note a:hover {
  background-color: #338998;
  color: #ffffff;
}

/* セクション見出し（連絡／予約） */
h2.contact-title,
h2.booking-title {
  font-size: 2rem;
  font-weight: 400;
  text-align: center;
  margin: 6rem auto 3rem;
}

/* 予約誘導周り */
p.booking-desc {
  width: fit-content;
  margin: auto;
}
.booking-cta {
  margin: 2rem auto 5rem;
  text-align: center;
}
p.booking-note {
  font-size: .8rem;
  margin-top: .4rem;
}


/* =========================================================
   2) レスポンシブ（SP）
========================================================= */
@media (max-width: 767px) {
  .page-content > .container {
    padding-inline: .6rem;
  }

  h1.page-title.char-animate {
    font-size: 2.4rem;
    margin-bottom: 3rem;
  }

  .page-lead {
    text-align: left;
    font-size: 1rem;
  }

  h2.contact-title,
  h2.booking-title {
    font-size: 1.6rem;
    margin: 3rem auto 2rem;
  }

  a.btn.btn-highlight.btn-calendar {
    gap: .2rem;
    padding: 1rem;
  }

  p.booking-note {
    margin-top: .6rem;
  }

  .container.contact-container {
    padding-top: 3rem;
  }
}


/* =========================================================
   3) Contact Form 7（新しいフォーム用）
   - WPFormsと衝突しないよう、セレクタはCF7側に限定
========================================================= */

/* ラベル色／太さ */
.form-field label {
  color: #338998;
  font-weight: 500;
}

/* 単一行テキスト */
.wpcf7-form-control-wrap input {
  border-bottom: 1px solid #338998;
  border-top: none;
  border-left: none;
  border-right: none;
  width: 100%;
  padding: .6rem;
  margin-top: .4rem;
  color: #1A474C;
  font-family: 'Zen Kaku Gothic New';
}

/* フォーカス可視リング（入力／テキストエリア） */
.wpcf7-form-control-wrap input:focus-visible,
textarea#your-message:focus-visible {
  outline: none;
  border: 1px solid #338998;
}

/* チェックボックスの並び */
.wpcf7-form-control.wpcf7-checkbox.wpcf7-validates-as-required {
  display: grid;
  gap: .2rem;
}
.wpcf7-form-control.wpcf7-checkbox.wpcf7-validates-as-required label {
  display: flex;
  align-items: center;
}

/* チェックボックス（CF7汎用） */
input[type="checkbox"] {
  appearance: none !important;
  inline-size: 1.1rem;
  block-size: 1.1rem;
  border: 1px solid var(--c-service, #338998);
  border-radius: 0;
  background: #fff;
  box-sizing: border-box;
  display: inline-grid;
  place-content: center;
  margin: .2rem .6rem 0 0;
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 80% 80%;
  accent-color: var(--c-service, #338998);
}

/* チェックボックスのラベル（本文色／ウエイト） */
.wpcf7-list-item-label {
  color: #1A474C;
  font-weight: 400;
}

/* テキストエリア */
textarea#your-message {
  border: 1px solid #338998;
  margin-top: .4rem;
  padding: .6rem;
  width: 100%;
  color: #1A474C;
  font-family: 'Zen Kaku Gothic New';
}

/* フィールド間マージン */
.form-field {
  margin: 1.2rem 0;
}
.form-field.form-checkbox-group p {
  margin: 0 0 .2rem 0;
}

/* チェックボックス項目の左余白解除 */
.wpcf7-list-item {
  margin-left: 0;
}

/* チェック状態／フォーカス */
input[type="checkbox"]:checked {
  background-color: var(--c-service, #338998);
  border-color: var(--c-service, #338998);
  /* 白いチェック（SVG） */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolyline points='20 6 9 17 4 12' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
input[type="checkbox"]:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--c-service, #338998) 45%, #fff 55%);
  outline-offset: 2px;
}

/* 送信ボタン（CF7） */
input.wpcf7-form-control.wpcf7-submit.has-spinner.btn-submit {
  appearance: none;
  font-family: 'Zen Kaku Gothic New';
  border: 1px solid #338998;
  background-color: #338998;
  color: #fff;
  padding: .4rem 1.2rem;
  font-weight: 500;
  font-size: 1rem;
}

/* フォームメッセージ（CF7：エラー／成功） */
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
  border: none;
  color: #dc3232;
  padding: 0;
  margin-left: 0;
}
.wpcf7 form .wpcf7-response-output {
  color: #338998;
  border: none;
  padding: 0;
  margin-left: 0;
}


/*iOSでRがかかる問題を解消*/
.wpcf7-form-control-wrap input, textarea#your-message, input.wpcf7-form-control.wpcf7-submit.has-spinner.btn-submit {
  -webkit-appearance: none; /* iOSのネイティブ外観を無効化 */
  appearance: none;
  border-radius: 0 !important; /* 角丸を確実に0に */
  background-clip: padding-box; /* iOSのにじみ対策（任意） */
}