/* =========================================================
   お問い合わせ専用スタイル（contact.html でのみ読み込む）
   - シンプルな「フォーム」ページ。privacy-policy.html と同じトーンで、凝った演出は入れない。
   - 全体は白背景・黒文字で可読性を最優先。
     ※ Wix版で「白背景に白文字で読めない」バグがあったため、
       文字色は必ず黒系（#222 前後）に固定し、白文字は使わない
       （送信ボタンのラベルはグラデ背景の上なので例外的に白）。
   - 色変数 --bb-red / --bb-orange / --bb-coral などは base.css で定義済みのものを使う。
     ここではこのページ専用の変数（--ct-*）だけを定義する。
   ========================================================= */

:root{
  --ct-text:  #222222;   /* 本文・入力文字の基本色（白背景に対して十分なコントラスト） */
  --ct-muted: #555555;   /* 注記など、やや弱めたい箇所のみ。白文字は不可 */
  --ct-max:   640px;     /* フォームの最大幅（読みやすい行長に制限） */
}

/* ---------- ページ全体の土台 ---------- */
.ct-page{
  background:#ffffff;
  color:var(--ct-text);
}

/* py-lg-6 は Bootstrap に無いので補完（privacy-policy.html と同じ使い方に合わせる） */
@media (min-width:992px){
  .py-lg-6{ padding-top:4.5rem; padding-bottom:4.5rem; }
}

/* 共通フッターの弧（base.css の .bb-footer-arc）はフッター上端の真上 140px にかぶさる。
   本文（送信ボタン）が隠れないよう、弧の高さ＋余白ぶんの下パディングを確保する
   （index/about-1 の .bb-cta-band と同じ 160px の考え方）。
   ※ HTML 側の .py-5（Bootstrap ユーティリティ）が padding-bottom:3rem !important を
      当てているため、それを上書きするには !important が必要。 */
.ct-page{ padding-bottom:160px !important; }
/* モバイル（≤767.98px）は弧が 90px に縮むので下パディングも軽くする
   （弧 90px より十分に大きい 120px を確保）。 */
@media (max-width:767.98px){
  .ct-page{ padding-bottom:120px !important; }
}

/* 読みやすい幅に制限して中央寄せ */
.ct-doc{
  max-width:var(--ct-max);
  margin-inline:auto;
  line-height:1.9;
  font-size:clamp(0.95rem, 0.9rem + 0.3vw, 1.0625rem);
  font-feature-settings:"palt" 1;
}

/* ---------- ページタイトル ---------- */
.ct-title{
  font-weight:900;
  color:var(--bb-black);
  font-size:clamp(1.6rem, 1.3rem + 1.6vw, 2.4rem);
  line-height:1.35;
  margin:0 0 1.5rem;
  padding-bottom:0.75rem;
  border-bottom:3px solid var(--bb-red);
}

/* ---------- リード文・注記 ---------- */
.ct-lead{
  margin:0 0 0.5rem;
  color:var(--ct-text);
}
.ct-note{
  margin:0 0 2rem;
  font-size:0.9em;
  color:var(--ct-muted);
}

/* 必須マーク（氏名※ / Email※） */
.ct-req{
  color:var(--bb-red);
  font-weight:700;
  margin-left:0.15em;
}

/* ---------- フォーム ---------- */
.ct-form .form-label{
  font-weight:700;
  color:var(--ct-text);
  margin-bottom:0.35rem;
}
/* ラベル下の補足テキスト（上部の「※は必須項目です」注記と同じ控えめなトーン） */
.ct-field-note{
  margin:-0.15rem 0 0.4rem;
  font-size:0.9em;
  color:var(--ct-muted);
}
.ct-form .form-control{
  color:var(--ct-text);
  background:#ffffff;
}
.ct-form .form-control:focus{
  border-color:var(--bb-coral);
  box-shadow:0 0 0 0.2rem rgba(242,114,111,0.25); /* --bb-coral #F2726F 系 */
}

/* ---------- 送信ボタン ----------
   サイト共通のCTA（about.css の .bb-btn-coral）と同系統の見た目を、
   このページ用に再定義したもの。about.css は読み込まない方針。
   色は base.css の CSS変数をそのまま使用。 */
.ct-actions{
  text-align:center;                              /* ボタンを中央寄せ */
}
.ct-submit-btn{
  /* inline-flex ＋ 中央寄せで、padding の値によらずラベルを中央に置き、
     min-height と合わせてタップ領域44px以上を保証する */
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  background:linear-gradient(120deg, var(--bb-red) 0%, var(--bb-orange) 50%, var(--bb-coral) 100%);
  color:#fff;
  padding:.6rem 2.1rem;
  border-radius:999px;
  font-weight:700;
  font-size:1.15rem;
  border:none;
}
.ct-submit-btn:hover{
  color:#fff;
}
.ct-submit-btn:focus-visible{
  outline:3px solid var(--bb-coral);
  outline-offset:2px;
}

/* ---------- 極小画面での詰め ---------- */
@media (max-width:575.98px){
  .ct-doc{ line-height:1.85; }
  .ct-submit-btn{
    display:flex;
    width:100%;
  }
}

/* =========================================================
   以下はフォーム送信処理（assets/js/contact.js）用の追記。
   既存ルールは変更していない（追加のみ）。
   ========================================================= */

/* ---------- ハニーポット（ボット対策） ----------
   人間にもスクリーンリーダーにも見せないため画面外へ飛ばす。
   display:none にしないのは、一部のボットが「非表示要素は無視してよい」と
   学習しているため（空でない値が送られてきたらサーバ側で弾く）。 */
.ct-hp{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

/* ---------- 送信結果メッセージ欄 ----------
   成功＝緑、失敗＝赤。白背景・濃色文字（このページの可読性ルールに合わせ、白文字は使わない）。
   初期状態は HTML 側の hidden 属性で非表示、JS が hidden を外して表示する。 */
.ct-form-message{
  margin:0 0 1.5rem;
  padding:0.85rem 1rem;
  border-radius:8px;
  border:1px solid transparent;
  font-weight:700;
  line-height:1.7;
}
.ct-form-message.is-success{
  color:#0f5132;
  background:#d1e7dd;
  border-color:#a3cfbb;
}
.ct-form-message.is-error{
  color:#842029;
  background:#f8d7da;
  border-color:#f1aeb5;
}

/* 送信中（disabled）のボタン。通常時の見た目は変えず、押せないことだけ伝える */
.ct-submit-btn:disabled{
  opacity:0.65;
  cursor:not-allowed;
}