/* =======================
   Contact（置き換え版）
   ======================= */
   :root {
    --c-primary: var(--color-primary, #b3203a);
    --c-gray: #f3f3f3;
    --c-line: #e6e6e6;
    --c-text: #333;
  }

  /* ---- タブ（インデックス風） ---- */
  .contact-tabs {
    background: #f4f4f4;
    border-top: 6px solid var(--c-primary);
    padding: 0;
  }
  .contact-tabs-content {
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    gap: 0;
    background: #eee;
  }

  /* タブ本体：2行見出し（JP+EN） */
  .contact-tabs .tab {
    display: grid;
    place-items: center;
    text-align: center;
    text-decoration: none;
    background: #eee;
    color: #111;
    border: none;
    border-bottom: 3px solid transparent; /* 下線ベース */
    padding: 1.5rem 1rem 1.25rem;
    transition: background .2s, color .2s, border-color .2s;
  }
  .contact-tabs .tab + .tab { border-left: 1px solid #e3e3e3; }

  /* タブ内テキスト（HTMLに .tab-jp / .tab-en がある場合） */
  .contact-tabs .tab .tab-jp {
    display: block;
    font-weight: 800;
    font-size: clamp(1.0rem, 1.5vw + 1rem, 2rem);
    line-height: 1.1;
  }
  .contact-tabs .tab .tab-en {
    display: block;
    margin-top: .35rem;
    font-weight: 700;
    letter-spacing: .12em;
    font-size: clamp(.8rem, .3vw + .7rem, 1rem);
    color: #b67;
    opacity: .95;
  }

  /* HTMLに .tab-en を入れない場合：data-en で英字行を表示（推奨：<a class="tab" data-en="Contact Form">お問い合わせ</a>） */
  .contact-tabs .tab:not(:has(.tab-en))::after {
    content: attr(data-en);
    display: block;
    margin-top: .35rem;
    font-weight: 700;
    letter-spacing: .12em;
    font-size: clamp(.8rem, .3vw + .7rem, 1rem);
    color: #b67;
    opacity: .95;
  }

  /* ホバー／アクティブ */
  .contact-tabs .tab:hover { background: #e9e9e9; }
  .contact-tabs .tab.is-active {
    background: #fff;
    border-bottom-color: var(--c-primary);
  }
  .contact-tabs .tab.is-active .tab-en,
  .contact-tabs .tab.is-active::after {
    color: var(--c-primary);
  }

  /* ---- パネル切替 ---- */
  .contact-panel {
    display: none;
    padding: 5rem 0;
    background: #fff;
  }

  .contact-panel.is-active { display: block; }

  /* ---- コンテンツ幅 ---- */
  .contact-content {
    max-width: 1000px;
    margin: 0 auto;
  }

  /* ---- サクセスメッセージ ---- */
  .form-success {
    background: #ecfbf1;
    border: 1px solid #b9e6c7;
    color: #165f2e;
    border-radius: .75rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
  }

  /* ---- ラベル／必須バッジ ---- */
  .form-row {
    margin-bottom: 2rem;
  }

  .form-label {
    display: block;
    margin-bottom: 2rem;
    color: var(--color-background-dark);
  }
  .badge {
    display: inline-block;
    padding: 0 .625rem;
    border-radius: 999px;
    font-size: .875rem;
    background: #eee;
    color: #666;
    margin-right: .5rem;
    min-width: 60px;
    text-align: center;
  }
  .badge-required {
    background: var(--color-primary);
    color: var(--color-white);
  }

  .badge-inline { margin-left: .5rem; }

  /* ---- 入力UI ---- */
  input[type="text"], input[type="email"],input[type="tel"], textarea, select {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--c-line);
    background: var(--c-gray);
    color: var(--c-text);
    padding: .9rem 1rem;
    border-radius: .75rem;
    font-size: 1rem;
    line-height: 1.6;
    outline: none;
    transition: border-color .2s, box-shadow .2s, background .2s;
  }
  textarea { resize: vertical; }
  input:focus, textarea:focus, select:focus {
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px rgba(179,32,58,.12);
    background: #fff;
  }

  /* select の赤矢印 */
  .select-wrap { position: relative; }
  .select-wrap select {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 2.5rem;
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23b3203a' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right .8rem center;
  }

  /* 2カラム入力 */
  .col-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.75rem;
  }

  .form-row input[name="zip"] + .col-2 { margin-top: 1.75rem; }
  .form-row input[name="zip"] + .col-2 + .col-2 { margin-top: 1.75rem; }

  /* エラー表示 */
  .err { min-height: 1rem; font-size: .9rem; color: var(--c-primary); }

  /* ---- 個人情報の取扱い（赤枠スクロール） ---- */
  .policy { margin: 1.5rem 0; }
  .policy-title {
    font-weight: 700;
    margin-bottom: 2rem;
    }
  .policy-box {
    border: 2px solid #e89aa7;
    border-radius: .75rem;
    padding: .75rem;
    background: #fff;
    max-height: 220px;
    overflow: hidden; /* 外枠固定 */
  }
  .policy-inner {
    overflow: auto;
    max-height: 180px;
    padding-right: .5rem;
    color: var(--color-gray-light);
    font-weight: bold;
  }

  /* ---- 同意チェック ---- */
  .form-consent .checkbox {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: #f6f6f6;
    border: 1px solid var(--c-line);
    padding: .75rem 1rem;
    border-radius: .75rem;
  }
  .form-consent a { color: var(--c-primary); text-decoration: underline; }

  /* ---- 送信ボタン ---- */
  .form-actions {
    text-align: center;
    margin-top: 2rem;
  }
  .btn-submit {
    appearance: none;
    border: none;
    border-radius: 999px;
    padding: 1rem 3rem;
    font-weight: 700;
    background: var(--c-primary);
    color: #fff;
    cursor: pointer;
    transition: opacity .15s, transform .05s;
    font-size: 2rem;
    width: 100%;
    max-width: 100%;
    height: 80px;
  }
  .btn-submit:hover { opacity: .9; }
  .btn-submit:active { transform: translateY(1px); }

  /* ---- 戻るボタン ---- */
  .form-actions-back {
    text-align: center;
    margin-top: 2rem;
  }
  /* ---- SP調整 ---- */
  @media (max-width: 768px) {
    .contact-tabs .tab { padding: 1.25rem .5rem 1rem; }
    .contact-tabs-content { grid-template-columns: 1fr 1fr; } /* 2列維持 */
    .col-2 {
      grid-template-columns: 1fr;
      gap: 1.25rem;
     }
     .form-row input[name="zip"] + .col-2,
     .form-row input[name="zip"] + .col-2 + .col-2 { margin-top: 1rem; }
    .contact-panel { padding-bottom: 3rem; }
    .form-label{
      margin-bottom: 1.25rem;
    }
    .btn-submit{
     width: 200px;
      height: 60px;
      font-size: 1rem;

      }
  }


.wpcf7-form .wpcf7-not-valid-tip{display:block !important;color:#e11d48;font-size:12px;margin-top:4px;}
.wpcf7-form .wpcf7-form-control.wpcf7-not-valid{border-color:#e11d48 !important;}
/* CF7の標準エラーチップは使わない（.errに集約） */
.wpcf7-form .err:empty{display:none;}


/* [hidden] の保険（成功メッセージなどで使用） */
[hidden] { display: none !important; }

/* エラーテキストの視認性とレイアウト安定 */
.err {
  margin-top: .5rem;
  min-height: 1.2em;   /* チラつき防止 */
  line-height: 1.4;
  font-size: .9rem;
  color: #c62828;
}

/* Thanksセクション */
.thanks-section {
  padding: clamp(30px, 6vw, 80px) 0;
  margin-top: 4rem;
}



.thanks-section h2 {
  font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.2rem);
  font-weight: 700;
  text-align: center;
  line-height: 1.3;
  /* margin: 0 1rem; */
  color: var(--color-primary);
}

.thanks-section p {
  text-align: center;
  line-height: 1.9;
  font-size: clamp(0.95rem, 0.9rem + 0.4vw, 1.125rem);
  margin: 2.5rem 0;
}

/* ======================
   スマホ用（768px以下）
   ====================== */
   @media (max-width: 768px) {
    .thanks-section {
      padding: 20px 1.5rem;
    }

    .thanks-section h2 {
      font-size: 1.4rem;
      margin-bottom: 0.75rem;
    }

    .thanks-section p {
      font-size: 1rem;
      line-height: 1.7;
      text-align: left;
    }
  }

/* 同意欄（CF7 acceptance）最小調整 */
.form-consent .wpcf7-acceptance { display:block; }
.form-consent .wpcf7-acceptance .wpcf7-list-item { display:block; }
.form-consent .wpcf7-acceptance label { display:flex; align-items:center; gap:8px; }
.form-consent .wpcf7-acceptance input[type="checkbox"] { margin:0; }

/* 住所の2カラム強制（PC） */
.address-row .col-2 {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 16px;
}

/* .cell を確実にグリッドアイテム化 */
.address-row .col-2 > .cell { display: block; min-width: 0; margin-top: 1.75rem;}

/* CF7 の wrap をブロック化（幅100%を取りやすく） */
.address-row .col-2 .wpcf7-form-control-wrap { display: block; width: 100%; }

/* 入力幅 */
.address-row input[type="text"] { width: 100%; box-sizing: border-box; }

/* SP は1列 */
@media (max-width: 768px) {
  .address-row .col-2 { grid-template-columns: 1fr; gap: 12px; }
}

/* お名前欄の横並び */
.name-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 16px !important;
}
.name-grid input[type="text"] {
  width: 100%;
  box-sizing: border-box;
}

@media (max-width:768px){
  .name-grid {
    grid-template-columns: 1fr;
    gap: 12px !important;
  }
}

  .wpcf7-spinner {
    display: none !important;
  }