@charset "UTF-8";
/* =========================================================
   お問い合わせ（page-contact.php / confirm / completion）
   導入 → 電話・本社カード → 注意書き → フォーム
   ========================================================= */


.ct-intro {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 44px;
  color: var(--gray);
}


/* 電話・本社カード */
.ct-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 44px;
}

.ct-card {
  border: 1px solid #e0e6ef;
  border-radius: 14px;
  padding: 34px 30px;
  text-align: center;
  transition: .35s;
}

.ct-card:hover {
  border-color: var(--sky);
  box-shadow: 0 10px 26px rgba(31, 116, 196, .12);
  transform: translateY(-4px);
}

.ct-card .ic {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--sky-pale);
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin: 0 auto 16px;
}

.ct-card h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--navy-deep);
  margin-bottom: 8px;
}

.ct-card .big {
  font-family: 'Chakra Petch', sans-serif;
  font-size: 26px;
  font-weight: 700;
  color: var(--navy-deep);
  letter-spacing: .02em;
}

.ct-card p {
  font-size: 13px;
  color: var(--gray);
  margin-top: 6px;
}


/* 注意書き */
.ct-warn {
  background: #fff6ec;
  border: 1px solid #ffd9a8;
  border-radius: 10px;
  padding: 16px 22px;
  text-align: center;
  color: var(--amber-deep);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 44px;
}


/* =========================================================
   フォーム（Contact Form 7 想定）
   ========================================================= */
.form-box {
  background: #f7f9fc;
  border-radius: 14px;
  padding: 40px;
}

/* CF7 の各行ラッパー・完了/確認テキスト共通 */
.form-box .frow { margin-bottom: 22px; }

.form-box label,
.form-box .frow > label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--navy-deep);
  margin-bottom: 8px;
}

/* 必須 / 任意 バッジ */
.form-box .req,
.form-box .any {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 9px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  vertical-align: middle;
  line-height: 1.6;
}

.form-box .req { background: #e2483d; color: #fff; }
.form-box .any { background: #e3e8ef; color: var(--gray); }

.form-box input[type="text"],
.form-box input[type="email"],
.form-box input[type="tel"],
.form-box textarea {
  width: 100%;
  border: 1px solid #d3dbe6;
  border-radius: 8px;
  padding: 14px 16px;
  font-size: 15px;
  font-family: inherit;
  background: #fff;
  color: var(--ink);
  transition: border .3s;
}

.form-box input:focus,
.form-box textarea:focus {
  outline: none;
  border-color: var(--sky);
}

.form-box textarea {
  min-height: 140px;
  resize: vertical;
}

/* 送信ボタン（CF7 submit / 通常 button 兼用） */
.form-box .wpcf7-submit,
.form-box .form-submit .btn,
.form-box button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 8px auto 0;
  padding: 16px 40px;
  border: none;
  border-radius: 3px;
  background: var(--amber);
  color: #fff;
  font-family: inherit;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .04em;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(243, 146, 0, .4);
  transition: transform .3s, background .3s;
}

.form-box .wpcf7-submit:hover,
.form-box button[type="submit"]:hover {
  transform: translateY(-3px);
  background: var(--amber-deep);
}

.form-submit { text-align: center; }

/* 確認・完了画面のメッセージ */
.form-box .thanks {
  text-align: center;
  font-size: 16px;
  color: var(--navy-deep);
  line-height: 2;
}


/* =========================================================
   Contact Form 7 の出力調整
   ========================================================= */
/* CF7デフォルトの <p> ラッパー、または .frow を1項目として扱う */
.form-box .wpcf7-form p { margin-bottom: 22px; }

.form-box .wpcf7-form label {
  display: block;
  width: 100%;
  font-size: 14px;
  font-weight: 700;
  color: var(--navy-deep);
  margin-bottom: 8px;
}

.form-box .wpcf7-form-control-wrap { display: block; }

/* 入力欄の枠：テキスト入力・textarea・select のみ（チェック/ラジオ/同意欄は除外） */
.form-box input.wpcf7-form-control:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.form-box textarea.wpcf7-form-control,
.form-box select.wpcf7-form-control {
  width: 100%;
  border: 1px solid #d3dbe6;
  border-radius: 8px;
  padding: 14px 16px;
  font-size: 15px;
  font-family: inherit;
  background: #fff;
  color: var(--ink);
  transition: border .3s;
}

.form-box input.wpcf7-form-control:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):focus,
.form-box textarea.wpcf7-form-control:focus,
.form-box select.wpcf7-form-control:focus { outline: none; border-color: var(--sky); }

.form-box textarea.wpcf7-form-control { min-height: 140px; resize: vertical; }
.form-box .wpcf7-submit { width: auto; }

/* 同意欄（チェックボックス）：枠なし・インライン・通常ウェイト */
.form-box .wpcf7-acceptance,
.form-box .wpcf7-checkbox,
.form-box .wpcf7-radio { border: none; padding: 0; background: none; }

.form-box .wpcf7-list-item { margin: 0; display: inline-block; }

.form-box .wpcf7-acceptance label,
.form-box .wpcf7-checkbox label,
.form-box .wpcf7-radio label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 0;
  cursor: pointer;
}

.form-box .wpcf7-list-item input[type="checkbox"],
.form-box .wpcf7-list-item input[type="radio"] { width: auto; margin: 0; }

/* バリデーション（未入力・エラー表示） */
.form-box .wpcf7-not-valid { border-color: #e2483d !important; }

.form-box .wpcf7-not-valid-tip {
  color: #e2483d;
  font-size: 12.5px;
  font-weight: 600;
  margin-top: 6px;
}

.form-box .wpcf7-response-output {
  margin: 16px 0 0 !important;
  border-radius: 8px;
  padding: 14px 18px !important;
  font-size: 14px;
}

.form-box .wpcf7-spinner { margin: 0 0 0 12px; }


/* =========================================================
   レスポンシブ
   ========================================================= */
@media screen and (max-width: 768px) {
  .ct-cards { grid-template-columns: 1fr; gap: 14px; }
  .form-box { padding: 26px 20px; }
  .form-box .wpcf7-submit,
  .form-box .form-submit .btn,
  .form-box button[type="submit"] { width: 100%; }
}