@charset "utf-8";
/* ============================================================
   child-form.css
   子育てタクシー 会員登録フォーム専用スタイル
   北斗タクシー株式会社
   ============================================================ */

/* ---------- CSS変数 ---------- */
:root {
  --cf-blue:        #417bbf;
  --cf-blue-light:  #d2e7ff;
  --cf-blue-pale:   #eaf3ff;
  --cf-teal:        #009495;
  --cf-teal-light:  #cbe7e5;
  --cf-teal-pale:   #e8f6f5;
  --cf-gray:        #f1f1f1;
  --cf-gray-mid:    #e0e0e0;
  --cf-gray-dark:   #888;
  --cf-text:        #333333;
  --cf-text-sub:    #555555;
  --cf-text-muted:  #888888;
  --cf-warn:        #c0392b;
  --cf-border:      #c8ddf5;
  --cf-white:       #ffffff;
  --cf-bg:          #fafcff;
  --cf-radius-sm:   4px;
  --cf-radius-md:   8px;
  --cf-radius-lg:   12px;
  --cf-shadow:      0 2px 12px rgba(65,123,191,0.10);
  --cf-shadow-btn:  0 4px 16px rgba(65,123,191,0.28);
  --cf-font:        'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
  --cf-max-width:   1200px;
  --cf-content-width: 1200px;
  --cf-transition:  0.22s ease;
}

/* ---------- ラッパー ---------- */
.cf-page-wrap {
  width: 100%;
  max-width: var(--cf-max-width);
  margin: 0 auto;
  padding: 20px 24px 60px;
  box-sizing: border-box;
  font-family: var(--cf-font);
  color: var(--cf-text);
  font-size: 16px;
  line-height: 1.75;
}

/* ---------- ページタイトルブロック ---------- */
.cf-page-hero {
  background: linear-gradient(135deg, var(--cf-blue-light) 0%, var(--cf-teal-light) 100%);
  border-radius: var(--cf-radius-lg);
  padding: 40px 32px 36px;
  margin-bottom: 20px;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--cf-content-width);
  text-align: center;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

@media (max-width: 640px) {
.cf-page-hero {
    margin-top: 50px;
} 
}

.cf-page-hero::before,
.cf-page-hero::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.30);
  pointer-events: none;
}
.cf-page-hero::before { width: 200px; height: 200px; top: -60px; right: -50px; }
.cf-page-hero::after  { width: 140px; height: 140px; bottom: -40px; left: -30px; }

.cf-page-hero__icon {
  display: inline-block;
  width: 56px; height: 56px;
  background: var(--cf-white);
  border-radius: 50%;
  line-height: 56px;
  font-size: 30px;
  margin-bottom: 12px;
  box-shadow: 0 2px 10px rgba(0,148,149,0.18);
  position: relative; z-index: 1;
}
.cf-page-hero__title {
  font-size: 28px;
  font-weight: 800;
  color: var(--cf-blue);
  margin: 0 0 10px;
  letter-spacing: 0.04em;
  position: relative; z-index: 1;
}
.cf-page-hero__sub {
  font-size: 16px;
  color: var(--cf-text-sub);
  margin: 0;
  line-height: 1.9;
  position: relative; z-index: 1;
}

/* ---------- 注意書きブロック ---------- */
.cf-notice-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 36px;
}
.cf-notice {
  border-radius: var(--cf-radius-md);
  padding: 18px 22px;
  font-size: 16px;
  line-height: 1.85;
}
.cf-notice--blue {
  background: var(--cf-blue-pale);
  border-left: 4px solid var(--cf-blue);
}
.cf-notice--teal {
  background: var(--cf-teal-pale);
  border-left: 4px solid var(--cf-teal);
  margin-top: 20px;
}
.cf-notice--gray {
  background: var(--cf-gray);
  border-left: 4px solid var(--cf-gray-dark);
  margin-top: 20px;
}
.cf-notice__heading {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 10px;
}
.cf-notice--blue  .cf-notice__heading { color: var(--cf-blue); }
.cf-notice--teal  .cf-notice__heading { color: var(--cf-teal); }
.cf-notice--gray  .cf-notice__heading { color: #555; }

.cf-notice__heading-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.cf-notice--blue .cf-notice__heading-dot  { background: var(--cf-blue); }
.cf-notice--teal .cf-notice__heading-dot  { background: var(--cf-teal); }
.cf-notice--gray .cf-notice__heading-dot  { background: #888; }

.cf-notice ul {
  margin: 0;
  padding-left: 18px;
  color: var(--cf-text-sub);
}
.cf-notice ul li { margin-bottom: 5px; }
.cf-notice ul li:last-child { margin-bottom: 0; }
.cf-notice a { color: var(--cf-blue); text-decoration: underline; }
.cf-notice .cf-warn { color: var(--cf-warn); font-weight: 700; }
.cf-notice .cf-strong { font-weight: 700; }

/* ---------- フォームカード ---------- */
.cf-form-card {
  background: var(--cf-white);
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-radius-lg);
  box-shadow: var(--cf-shadow);
  padding: 40px 40px 32px;
  max-width: var(--cf-content-width);
  margin: 20px auto 0px auto;
}
.cf-form-card__title {
  font-size: 22px;
  font-weight: 800;
  color: var(--cf-blue);
  border-bottom: 2px solid var(--cf-blue-light);
  padding-bottom: 12px;
  margin: 0 0 12px;
  letter-spacing: 0.03em;
}
/* required-note はタイトル直後にインラインで表示 */
.cf-required-note {
  display: block;
  font-size: 16px;
  color: var(--cf-text-muted);
  margin: 0 0 20px;
  line-height: 1.4;
}
/* CF7がspanで出力した場合もブロックとして扱う */
span.cf-required-note {
  display: block;
}
.cf-required-note .cf-req { color: var(--cf-warn); font-weight: 700; display: inline; }

/* ---------- フォームテーブル ---------- */
.cf-table {
  width: 100%;
  border-collapse: collapse;
}
.cf-table tr {
  border-bottom: 1px solid #e8eef6;
}
.cf-table tr:last-child { border-bottom: none; }

.cf-table th {
  background: var(--cf-blue-pale);
  color: #2a5080;
  font-size: 16px;
  font-weight: 700;
  padding: 14px 16px;
  text-align: left;
  vertical-align: top;
  width: 220px;
  line-height: 1.65;
}
.cf-table th.cf-th-sub {
  background: #f0f7ff;
  font-weight: 600;
  width: 120px;
  font-size: 16px;
  color: #3a6090;
}
.cf-table td {
  padding: 14px 16px;
  background: var(--cf-bg);
  vertical-align: top;
  line-height: 1.7;
}
.cf-req { color: var(--cf-warn); font-weight: 700; display: inline; }
.cf-th-note {
  display: block;
  font-size: 16px;
  font-weight: 500;
  color: var(--cf-gray-dark);
  margin-top: 3px;
}
.cf-th-note-warn {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: var(--cf-warn);
  margin-top: 3px;
}

/* ---------- フォーム入力要素 ---------- */
.cf-page-wrap .wpcf7-form input[type="text"],
.cf-page-wrap .wpcf7-form input[type="email"],
.cf-page-wrap .wpcf7-form input[type="tel"],
.cf-page-wrap .wpcf7-form textarea,
.cf-page-wrap .wpcf7-form select,
/* プレビュー用（CF7なし環境） */
.cf-page-wrap input[type="text"],
.cf-page-wrap input[type="email"],
.cf-page-wrap input[type="tel"],
.cf-page-wrap textarea,
.cf-page-wrap select {
  display: block;
  width: 100%;
  padding: 9px 13px;
  font-size: 16px;
  font-family: var(--cf-font);
  color: var(--cf-text);
  background: var(--cf-white);
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-radius-sm);
  box-sizing: border-box;
  transition: border-color var(--cf-transition), background var(--cf-transition), box-shadow var(--cf-transition);
  line-height: 1.5;
  -webkit-appearance: none;
  appearance: none;
}
.cf-page-wrap input[type="text"]:focus,
.cf-page-wrap input[type="email"]:focus,
.cf-page-wrap input[type="tel"]:focus,
.cf-page-wrap textarea:focus,
.cf-page-wrap select:focus {
  outline: none;
  border-color: var(--cf-blue);
  background: #f6faff;
  box-shadow: 0 0 0 3px rgba(65,123,191,0.13);
}

/* selectのカスタム矢印 */
.cf-page-wrap select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23417bbf' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
  cursor: pointer;
}

/* サイズバリエーション */
.cf-page-wrap input.cf-w-sm,
.cf-page-wrap select.cf-w-sm  { width: 130px; }
.cf-page-wrap input.cf-w-md,
.cf-page-wrap select.cf-w-md  { width: 200px; }
.cf-page-wrap input.cf-w-lg,
.cf-page-wrap select.cf-w-lg  { width: 260px; }
.cf-page-wrap input[type="text"].cf-inline,
.cf-page-wrap input[type="tel"].cf-inline,
.cf-page-wrap select.cf-inline {
  display: inline-block;
  width: auto;
}

/* ラジオ・チェックボックス */
.cf-page-wrap input[type="radio"],
.cf-page-wrap input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0 5px 0 0;
  accent-color: var(--cf-blue);
  cursor: pointer;
  vertical-align: middle;
  flex-shrink: 0;
}

.cf-rb-group, .cf-cb-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 4px;
}
.cf-rb-group label,
.cf-cb-group label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 16px;
  cursor: pointer;
  color: var(--cf-text-sub);
}

/* 生年月日インライン */
.cf-date-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.cf-date-row select { display: inline-block; width: auto; }
.cf-date-row .cf-date-label {
  font-size: 16px;
  color: var(--cf-text-sub);
}

/* 電話番号ブロック */
.cf-tel-block {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.cf-tel-block input { width: 200px; }
.cf-tel-block select { width: 200px; }
.cf-tel-label { font-size: 16px; color: var(--cf-text-muted); flex-shrink: 0;  display: inline-block; }

/* 配車場所付記 */
.cf-place-note {
  font-size: 16px;
  color: var(--cf-text-muted);
  margin: 6px 0 4px;
}

/* 備考 */
.cf-td-note {
  font-size: 16px;
  color: var(--cf-text-muted);
  margin-top: 5px;
  line-height: 1.6;
}

/* ---------- 送信前確認ボックス ---------- */
.cf-confirm-box {
  background: var(--cf-teal-pale);
  border-radius: var(--cf-radius-md);
  padding: 18px 20px;
  margin-top: 6px;
}
.cf-confirm-box ul {
  margin: 0 0 14px;
  padding-left: 0px;
  font-size: 16px;
  color: #2a5050;
  line-height: 1.9;
}
.cf-confirm-box ul li { margin-bottom: 4px; }
.cf-confirm-box ul a { color: var(--cf-teal); text-decoration: underline; }
.cf-confirm-box ul .cf-warn { color: var(--cf-warn); font-weight: 700; }

.cf-confirm-chk {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--cf-teal);
  cursor: pointer;
}
.cf-confirm-chk input[type="checkbox"] {
  width: 18px; height: 18px;
  accent-color: var(--cf-teal);
}

/* ---------- 送信ボタン ---------- */
.cf-submit-wrap {
  text-align: center;
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--cf-blue-light);
}

.cf-page-wrap .wpcf7-form input[type="submit"],
.cf-page-wrap .wpcf7-form .wpcf7-submit,
.cf-page-wrap input[type="submit"],
.cf-submit-btn {
  display: inline-block;
  background: var(--cf-blue);
  color: var(--cf-white);
  border: none;
  border-radius: 60px;
  padding: 16px 72px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.12em;
  font-family: var(--cf-font);
  cursor: pointer;
  transition: background var(--cf-transition), transform 0.12s, box-shadow var(--cf-transition);
  box-shadow: var(--cf-shadow-btn);
  position: relative;
}
/* :hover はタッチデバイスでは無効（スマートフォン対策） */
@media (hover: hover) {
  .cf-page-wrap input[type="submit"]:hover,
  .cf-submit-btn:hover {
    background: #2f62a3;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(65,123,191,0.38);
  }
}
.cf-page-wrap input[type="submit"]:active,
.cf-submit-btn:active {
  transform: translateY(0);
  box-shadow: var(--cf-shadow-btn);
}




















/* ============================================================
   CF7 リアクション全般
   ============================================================ */

/* ---------- エラー入力欄のハイライト ---------- */
.cf-page-wrap .wpcf7-not-valid,
.cf-page-wrap input.wpcf7-not-valid,
.cf-page-wrap select.wpcf7-not-valid,
.cf-page-wrap textarea.wpcf7-not-valid {
  border-color: var(--cf-warn) !important;
  background: #fff7f7 !important;
  box-shadow: 0 0 0 3px rgba(192,57,43,0.12) !important;
}

/* ---------- エラーメッセージ（入力欄直下） ---------- */
.cf-page-wrap .wpcf7-not-valid-tip {
  display: block;
  color: var(--cf-warn);
  font-size: 16px;
  font-weight: 600;
  margin-top: 5px;
  padding: 4px 8px;
  background: #fff0ef;
  border-left: 3px solid var(--cf-warn);
  border-radius: 0 var(--cf-radius-sm) var(--cf-radius-sm) 0;
  line-height: 1.5;
  animation: cf-shake 0.35s ease both;
}

/* エラー出現時の小さな揺れ */
@keyframes cf-shake {
  0%,100% { transform: translateX(0); }
  25%      { transform: translateX(-4px); }
  75%      { transform: translateX(4px); }
}

/* ---------- フォーム全体ステータスバナー ---------- */
/* CF7の出力構造：
   .wpcf7 > form.wpcf7-form + div.wpcf7-response-output
   → response-output は form の兄弟要素として .wpcf7 直下に出力される
   → セレクタは .wpcf7 .wpcf7-response-output ではなく
     .wpcf7 > .wpcf7-response-output で確実に捕捉する             */

/* ベース共通：CF7デフォルトを完全リセット＋中央寄せ＋目立つ枠 */
.wpcf7 > .wpcf7-response-output,
.cf-page-wrap .wpcf7-response-output {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: var(--cf-content-width) !important;
  margin: 24px auto 0 !important;   /* 中央寄せ */
  padding: 0 !important;
  border: none !important;
  border-radius: var(--cf-radius-md) !important;
  font-family: var(--cf-font) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.8 !important;
  background: transparent !important;
  position: relative !important;
  overflow: hidden !important;
  animation: cf-bannerIn 0.45s ease both;
}
@keyframes cf-bannerIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ======================================
   バリデーションエラー（未入力・形式誤り）
   ====================================== */
.wpcf7 > .wpcf7-response-output.wpcf7-validation-errors,
.cf-page-wrap .wpcf7-validation-errors {
  background: #fff3f3 !important;
  border: 3px solid #e07000 !important;
  border-top: none !important;
  border-radius: var(--cf-radius-md) !important;
  color: #6b2800 !important;
  padding: 50px 20px 18px !important;
  box-shadow: 0 4px 16px rgba(224,112,0,0.20) !important;
}
/* 上部ヘッダーバー */
.wpcf7 > .wpcf7-response-output.wpcf7-validation-errors::before,
.cf-page-wrap .wpcf7-validation-errors::before {
  content: '⚠  入力内容をご確認ください';
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  height: 40px;
  background: #e07000;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0 18px;
  box-sizing: border-box;
}

/* ======================================
   送信失敗（メールサーバーエラー）
   ====================================== */
.wpcf7 > .wpcf7-response-output.wpcf7-mail-sent-ng,
.wpcf7 > .wpcf7-response-output.wpcf7-aborted,
.cf-page-wrap .wpcf7-mail-sent-ng,
.cf-page-wrap .wpcf7-aborted {
  background: #fff5f5 !important;
  border: 3px solid var(--cf-warn) !important;
  border-top: none !important;
  border-radius: var(--cf-radius-md) !important;
  color: #6b1010 !important;
  padding: 50px 20px 18px !important;
  box-shadow: 0 4px 16px rgba(192,57,43,0.20) !important;
}
.wpcf7 > .wpcf7-response-output.wpcf7-mail-sent-ng::before,
.wpcf7 > .wpcf7-response-output.wpcf7-aborted::before,
.cf-page-wrap .wpcf7-mail-sent-ng::before,
.cf-page-wrap .wpcf7-aborted::before {
  content: '✕  送信できませんでした';
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  height: 40px;
  background: var(--cf-warn);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0 18px;
  box-sizing: border-box;
}

/* ======================================
   スパム判定
   ====================================== */
.wpcf7 > .wpcf7-response-output.wpcf7-spam-blocked,
.cf-page-wrap .wpcf7-spam-blocked {
  background: #f8f5ff !important;
  border: 3px solid #7c3aed !important;
  border-top: none !important;
  border-radius: var(--cf-radius-md) !important;
  color: #3b0f8b !important;
  padding: 50px 20px 18px !important;
  box-shadow: 0 4px 16px rgba(124,58,237,0.18) !important;
}
.wpcf7 > .wpcf7-response-output.wpcf7-spam-blocked::before,
.cf-page-wrap .wpcf7-spam-blocked::before {
  content: '🛡  送信をブロックしました';
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  height: 40px;
  background: #7c3aed;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0 18px;
  box-sizing: border-box;
}

/* 送信成功（.sent時はCSSで非表示にするため最小限） */
.wpcf7 > .wpcf7-response-output.wpcf7-mail-sent-ok,
.cf-page-wrap .wpcf7-mail-sent-ok {
  display: none !important; /* 送信完了は .sent クラスのCSSで制御 */
}

/* ---------- 送信中スピナー ---------- */
.cf-page-wrap .wpcf7-spinner {
  display: none !important;
}
.cf-page-wrap .wpcf7-form.submitting input[type="submit"],
.cf-page-wrap .wpcf7-form.submitting .wpcf7-submit {
  pointer-events: none;
  opacity: 0.7;
  position: relative;
  color: transparent;
}
.cf-page-wrap .wpcf7-form.submitting input[type="submit"]::after,
.cf-page-wrap .wpcf7-form.submitting .wpcf7-submit::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 20px; height: 20px;
  margin: -10px 0 0 -10px;
  border: 3px solid rgba(255,255,255,0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: cf-spin 0.7s linear infinite;
}
@keyframes cf-spin {
  to { transform: rotate(360deg); }
}

/* ---------- 送信完了後フォームのグレーアウト ---------- */
.cf-page-wrap .wpcf7-form.sent input:not([type="submit"]),
.cf-page-wrap .wpcf7-form.sent select,
.cf-page-wrap .wpcf7-form.sent textarea {
  background: var(--cf-gray) !important;
  color: var(--cf-text-muted) !important;
  pointer-events: none;
}
.cf-page-wrap .wpcf7-form.sent input[type="submit"],
.cf-page-wrap .wpcf7-form.sent .wpcf7-submit {
  display: none;
}

/* ---------- 送信完了メッセージ（img03.jpg準拠） ---------- */

@keyframes cf-fadeIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* カード全体（img03の白背景枠に対応） */

/* タイトル（img03: 「子育てタクシー会員登録フォーム」） */

/* 本文テキストブロック */

/* 電話番号行（img03: 「TEL 045-623-8884」） */

@media screen and (max-width: 768px) {
  
  
  
  
}






/*-- 20260424 追記 --*/

/* 入力エラー時 (data-status="invalid") */
.wpcf7 form[data-status="invalid"] .wpcf7-response-output {
    background-color: #fff0ef !important;
    border: 2px solid #fff0ef !important;
    color: #c0392b !important;
    font-size: 18px !important;
    text-align: center !important;
    line-height: 1.4 !important;
    font-weight: normal !important;
    letter-spacing: 0.03em !important;
    margin: 20px 0px 0px 0px !important;
    padding: 10px 10px 10px 10px !important;
    box-sizing: border-box !important;
    display: inline-block !important;
}

/* 送信失敗時 (data-status="failed") */
.wpcf7 form[data-status="failed"] .wpcf7-response-output {
    background-color: #fff0ef !important;
    border: 2px solid #fff0ef !important;
    color: #c0392b !important;
    font-size: 18px !important;
    text-align: center !important;
    line-height: 1.4 !important;
    font-weight: normal !important;
    letter-spacing: 0.03em !important;
    margin: 20px 0px 0px 0px !important;
    padding: 10px 10px 10px 10px !important;
    box-sizing: border-box !important;
    display: inline-block !important;
}


/* 送信完了時 (data-status="sent") */
.wpcf7 form[data-status="sent"] .wpcf7-response-output {
display: none !important;
font-size: 0px !important;
color: #fff !important;
background-color: transparent !important;
margin: 0px !important;
padding: 0px !important;
box-sizing: border-box;
visibility: hidden !important;
line-height: 0px;
}

/* ------------------------------- */

























/* ---------- セクション区切り ---------- */
.cf-section-label {
  grid-column: 1 / -1;
  background: var(--cf-blue);
  color: var(--cf-white);
  font-size: 16px;
  font-weight: 700;
  padding: 8px 16px;
  letter-spacing: 0.06em;
}


/* ============================================================
   CF7レンダリング修正パッチ
   er01〜er05 の不具合対応
   ============================================================ */

/* ---------- 注意書きと フォームカードの横幅を統一 ---------- */
.cf-notice,
.cf-form-card {
  max-width: var(--cf-content-width);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
.cf-notice {
  margin-bottom: 0; /* cf-notice-group の gap で制御 */
}
.cf-notice-group {
  max-width: var(--cf-content-width);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 28px;
  gap: 12px;
}

/* ---------- CF7が出力するラッパーをインライン化（selectの縦並び解消）---------- */
/* CF7 は select を <span class="wpcf7-form-control-wrap"> で包んで出力する。
   これがブロック要素になるため縦並びになる。inline-block で強制解除。     */
.cf-date-row {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 4px 4px !important;
}
.cf-date-row > span,
.cf-date-row .wpcf7-form-control-wrap {
  display: inline-flex !important;
  align-items: center !important;
  flex-shrink: 0;
}
.cf-date-row .wpcf7-form-control-wrap select,
.cf-date-row select {
  display: inline-block !important;
  width: auto !important;
  min-width: 72px !important;
  max-width: 90px !important;
  vertical-align: middle;
  flex-shrink: 0;
}
.cf-date-row .cf-date-label {
  display: inline-block !important;
  font-size: 16px;
  color: var(--cf-text-sub);
  line-height: 1;
  flex-shrink: 0;
  white-space: nowrap;
}

/* ---------- ラジオ・チェックボックスのCF7出力ラッパー ---------- */
/* CF7はradio/checkboxをspanで包む。それをflexにする */
.cf-rb-group .wpcf7-form-control,
.cf-rb-group .wpcf7-radio {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}
.cf-rb-group .wpcf7-form-control .wpcf7-list-item,
.cf-rb-group .wpcf7-radio .wpcf7-list-item {
  display: inline-flex;
  align-items: center;
  margin: 0;
}
.cf-rb-group .wpcf7-list-item-label {
  font-size: 16px;
  color: var(--cf-text-sub);
  margin-left: 4px;
  cursor: pointer;
}

.cf-cb-group .wpcf7-form-control,
.cf-cb-group .wpcf7-checkbox {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}
.cf-cb-group .wpcf7-form-control .wpcf7-list-item,
.cf-cb-group .wpcf7-checkbox .wpcf7-list-item {
  display: inline-flex;
  align-items: center;
  margin: 0;
}
.cf-cb-group .wpcf7-list-item-label {
  font-size: 16px;
  color: var(--cf-text-sub);
  margin-left: 4px;
  cursor: pointer;
}

/* ---------- 送信前確認チェック ---------- */
.cf-confirm-chk .wpcf7-form-control,
.cf-confirm-chk .wpcf7-checkbox {
  display: inline-flex;
  align-items: center;
}
.cf-confirm-chk .wpcf7-list-item {
  display: inline-flex;
  align-items: center;
  margin: 0;
}
.cf-confirm-chk .wpcf7-list-item-label {
  font-size: 16px;
  font-weight: 700;
  color: var(--cf-teal);
  margin-left: 6px;
  cursor: pointer;
}














/* ---------- ご利用頻度：同一グループラジオ＋回数入力 ---------- */
.cf-freq-wrap {
width: 100%;
display: block;
margin: 0px;
padding: 0px;
box-sizing: border-box;
position: relative;
}

.cf-freq-row {
display: block;
align-items: center;
gap: 8px;
margin: 0px;
padding: 0px;
box-sizing: border-box;
width: 100%;
height: 40px;
position: relative;
}

.cf-freq-row .wpcf7-form-control.wpcf7-radio.cf-freq-trigger,
.cf-freq-row .wpcf7-radio.cf-freq-trigger {
  display: inline-flex !important;
  align-items: center;
  flex-shrink: 0;
}

.cf-freq-row .wpcf7-list-item {
  display: inline-flex !important;
  align-items: center;
  margin: 0 !important;
}

.cf-freq-row .wpcf7-list-item label {
display:block;
gap: 4px;
font-size: 16px;
color: var(--cf-text-sub);
cursor: pointer;
width: 80px;
margin: 0px;
padding: 0px;
box-sizing: border-box;
position: absolute;
top: 7px;
left: 0px;
}

.cf-freq-row .wpcf7-list-item label input[type="radio"] {
  width: 16px !important;
  height: 16px !important;
  accent-color: var(--cf-blue);
  flex-shrink: 0;
  margin: 0;
}
    
.cf-freq-row .wpcf7-list-item-label {
font-size: 16px;
color: var(--cf-text-sub);
display: inline;
padding: 0px 0px 0px 5px;
box-sizing: border-box;
}

.cf-freq-row .wpcf7-form-control-wrap input.cf-freq-input,
.cf-page-wrap input.cf-freq-input {
display: block;
width: 60px;
margin: 0px;
padding: 6px 8px;
box-sizing: border-box;
font-size: 16px;
text-align: center;
flex-shrink: 0;
position: absolute;
top: -45px;
left: 80px;
}

.cf-freq-row .wpcf7-form-control-wrap {
  display: inline-block !important;
  flex-shrink: 0;
}

.cf-freq-label {
display: block;
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-size: 16px;
color: var(--cf-text-sub);
flex-shrink: 0;
white-space: nowrap;
width: 80px;
position: absolute;
top: 7px;
left: 150px;
}











/* 週・月未選択時は回数欄を薄く（JSで制御） */
.cf-freq-row .wpcf7-form-control-wrap {
  display: inline-block;
}

/* ---------- 電話番号：種別selectをインラインに ---------- */
.cf-tel-block .wpcf7-form-control-wrap {
  display: inline-block;
}
.cf-tel-block .wpcf7-form-control-wrap select,
.cf-tel-block select {
  display: inline-block;
  width: auto;
  min-width: 190px;
}
.cf-tel-block .wpcf7-form-control-wrap input[type="tel"],
.cf-tel-block input[type="tel"] {
  width: 200px;
  display: inline-block;
}

/* ---------- ヒーロー・注意書きの余白調整 ---------- */
.cf-page-hero {
  margin-bottom: 20px;
}
.cf-notice-group {
  margin-bottom: 24px;
}








/* ============================================================
   CF7 送信完了（.sent クラス）時の表示切替
   JSなし・CSSのみで制御
   CF7は送信成功時に .wpcf7-form に .sent クラスを自動付与する

   動作：
   ・フォーム内容（テーブル・ボタン・タイトル・必須メモ）を非表示
   ・注意書きブロック・ヒーローを非表示
   ・.wpcf7-response-output を img03.jpg スタイルの完了画面として全面表示
   ============================================================ */

/* --- 送信完了時：注意書き・ヒーローを非表示 --- */
.wpcf7-form.sent ~ .cf-notice,
.cf-form-card:has(.wpcf7-form.sent) ~ .cf-notice,
/* has()非対応ブラウザ向けに親から制御できないため
   .cf-page-wrap 直下の notice は CF7の :has で対応 */
.cf-page-wrap:has(.wpcf7-form.sent) .cf-page-hero,
.cf-page-wrap:has(.wpcf7-form.sent) .cf-notice {
  display: none !important;
}

/* --- 送信完了時：フォームカードのタイトル・必須メモを非表示 --- */
.cf-page-wrap:has(.wpcf7-form.sent) .cf-form-card__title,
.cf-page-wrap:has(.wpcf7-form.sent) .cf-required-note,
.cf-page-wrap:has(.wpcf7-form.sent) span.cf-required-note {
  display: none !important;
}

/* --- 送信完了時：フォームテーブル・送信ボタンを非表示 --- */
.wpcf7-form.sent .cf-table,
.wpcf7-form.sent .cf-submit-wrap {
  display: none !important;
}

/* --- 送信完了時：wpcf7-response-output を完了画面として表示 --- */
/* CF7標準の response-output の上書き */
.wpcf7-form.sent .wpcf7-response-output {
  /* リセット */
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  color: inherit !important;
  /* 完了画面として全幅表示 */
  display: block !important;
}

/* --- 完了画面ラッパー：フォームカードをそのまま流用 --- */
.cf-page-wrap:has(.wpcf7-form.sent) .cf-form-card {
  padding: 48px 48px 56px;
}

/* --- 完了メッセージ本体（CF7の設定テキストが入る）--- */
/* CF7管理画面「メール」タブの「送信完了メッセージ」テキストがここに表示される */
.wpcf7-form.sent .wpcf7-mail-sent-ok {
  /* 完了アイコン行 */
  display: block !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  color: var(--cf-text) !important;
  font-size: 16px !important;
  font-weight: normal !important;
  line-height: 2 !important;
}

/* --- 完了画面：タイトル（疑似要素で表示）--- */
.cf-page-wrap:has(.wpcf7-form.sent) .cf-form-card::before {
  content: '子育てタクシー会員登録フォーム';
  display: block;
  font-size: 22px;
  font-weight: 800;
  color: var(--cf-text);
  text-align: center;
  letter-spacing: 0.04em;
  padding-bottom: 20px;
  margin-bottom: 32px;
  border-bottom: 2px solid var(--cf-blue-light);
}

/* --- 完了画面：電話番号をCSSの疑似要素で表示 --- */
/* CF7メッセージタブはプレーンテキストのみのため、
   電話番号の装飾は ::after 疑似要素でCSSから追加する  */
.wpcf7-form.sent .wpcf7-mail-sent-ok::after {
  content: 'TEL 045-623-8884';
  display: block;
  font-size: 24px;
  font-weight: 700;
  color: var(--cf-blue);
  letter-spacing: 0.06em;
  margin-top: 16px;
}

/* --- フェードインアニメーション --- */
.wpcf7-form.sent .wpcf7-mail-sent-ok {
  animation: cf-sentFadeIn 0.6s ease both;
}
@keyframes cf-sentFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- レスポンシブ --- */
@media screen and (max-width: 768px) {
  .cf-page-wrap:has(.wpcf7-form.sent) .cf-form-card {
    padding: 28px 18px 36px;
  }
  .cf-page-wrap:has(.wpcf7-form.sent) .cf-form-card::before {
    font-size: 18px;
  }
}




































/* ---------- 生年月日 縦並び完全防止パッチ ---------- */
/* CF7が select の後に自動挿入する改行・brを非表示にする */
.cf-date-row br {
  display: none !important;
}
/* CF7 wpcf7-form-control-wrap は必ずインライン */
.cf-date-row span.wpcf7-form-control-wrap,
.cf-date-row .wpcf7-form-control-wrap {
  display: inline !important;
  vertical-align: middle;
}
/* select 自体も必ずインライン */
.cf-date-row span.wpcf7-form-control-wrap select {
  display: inline-block !important;
  width: auto !important;
  min-width: 70px !important;
  max-width: 92px !important;
  vertical-align: middle !important;
  margin: 0 2px !important;
}
/* 「年」「月」「日」テキストラベルをインラインに */
.cf-date-row .cf-date-label,
.cf-date-row > span.cf-date-label {
  display: inline !important;
  vertical-align: middle;
  font-size: 16px;
  color: var(--cf-text-sub);
  margin: 0 4px 0 0;
}

/* ---------- 横幅統一：ヒーロー・注意書きグループもcf-content-widthに ---------- */
.cf-page-hero,
.cf-notice-group,
.cf-notice,
.cf-form-card {
  max-width: var(--cf-content-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box;
}
/* notice-group はflexのままで各 notice が伸びる */
.cf-notice-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
  width: 100%;
}
.cf-notice {
  width: 100%;
}

/* ---------- レスポンシブ ---------- */
@media screen and (max-width: 768px) {
  .cf-page-wrap { padding: 20 14px 40px; }

  .cf-page-hero { padding: 28px 18px 24px; }
  .cf-page-hero__title { font-size: 22px; }

  .cf-form-card { padding: 22px 16px 20px; }
  .cf-form-card__title { font-size: 18px; }

  /* テーブルをスタック表示 */
  .cf-table,
  .cf-table tbody,
  .cf-table tr,
  .cf-table th,
  .cf-table td {
    display: block;
    width: 100% !important;
    box-sizing: border-box;
  }
  .cf-table tr { margin-bottom: 0; }
  .cf-table th,
  .cf-table th.cf-th-sub {
    padding: 10px 14px 6px;
    border-bottom: none;
  }
  .cf-table td { padding: 8px 14px 14px; }
  .cf-table tr { border-bottom: 1px solid #dce9f7; }

  .cf-date-row { gap: 4px; }
  .cf-date-row select { font-size: 16px; }

  .cf-tel-block { flex-direction: column; align-items: flex-start; gap: 6px; }
  .cf-tel-block input,
  .cf-tel-block select { width: 100% !important; }

  .cf-page-wrap input.cf-w-sm,
  .cf-page-wrap input.cf-w-md,
  .cf-page-wrap input.cf-w-lg,
  .cf-page-wrap select.cf-w-sm,
  .cf-page-wrap select.cf-w-md,
  .cf-page-wrap select.cf-w-lg { width: 100% !important; }

  .cf-page-wrap input[type="submit"],
  .cf-submit-btn { width: 100%; padding: 16px 20px; }

  
  
}

@media screen and (max-width: 480px) {
  .cf-page-hero__title { font-size: 18px; }
  .cf-page-hero__sub { font-size: 16px; }
  .cf-rb-group, .cf-cb-group { gap: 8px 14px; }
}