/* =========================================
   Contact 2段タブ（含有感デザイン／背景なし）
   - 上段アクティブタブから“連結バー”で下段へ接続
   - 下段は「上段カードの中面」上に、枠だけのチップ（背景透明）
   ========================================= */

:root {
  --navy: #0b1e39;      /* 親タブの軸色（濃紺） */
  --navy-light: #13325b;
  --gold: #c8a44b;      /* 階層差の強調に使うアクセント */
  --white: #ffffff;
  --silver: #f5f7fa;    /* コンテンツ面の薄グレー */
}

/* 全体ラッパ */
.contact-wrapper {
  background: var(--white);
  padding: 30px;
  border-radius: 14px;
  max-width: 960px;
  margin: 0 auto;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  border: 1px solid #e6ebf4;
  font-family: "Segoe UI", "Helvetica", sans-serif;
}

.contact-wrapper h2 {
  color: var(--navy);
  text-align: center;
  font-size: 30px;
  margin-bottom: 10px;
  letter-spacing: 0.5px;
}
.contact-wrapper p {
  text-align: center;
  color: #444;
  margin-bottom: 18px;
}

/* =========================
   上段：大分類タブ（親カード）
   ========================= */
.main-tabs {
  display: flex;
  gap: 10px;              /* 線ではなく余白で区切る */
  border-bottom: none;    /* 下線は使わない。連結バーで表現 */
  padding-bottom: 0;
}

.main-tabs button {
  flex: 1 1 0;            /* 均等幅（①） */
  text-align: center;
  padding: 14px 18px;
  border-radius: 12px;
  border: 1px solid #d6dbe7;
  background: var(--navy); /* 非アクティブは濃紺カード */
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.main-tabs button:hover { background: var(--navy-light); }

.main-tabs button.active {
  background: #fff;                 /* アクティブは白カード */
  color: var(--navy);
  border: 2px solid var(--navy);    /* 親カードは紺枠で強調 */
  position: relative;
  z-index: 2;                       /* 連結バーより前面 */
}

/* 連結バー：親カード下から“中面”へ伸ばす帯 */
.main-tabs button.active::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -8px;                     /* 少し下へはみ出す */
  height: 16px;                     /* 帯の高さ */
  background: #fff;                 /* 中面と同じ色 */
  border-left: 2px solid var(--navy);
  border-right: 2px solid var(--navy);
  border-bottom: 2px solid var(--navy);
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  box-shadow: 0 1px 0 var(--gold) inset; /* ごく薄い金の下ライン */
}

/* =========================
   下段ラッパ：中面カード
   ========================= */
.sub-tabs-wrapper {
  margin-top: 16px !important;  /* 連結バーに近づけて一体感を出す */
  position: relative;
  z-index: 1;
}

/* 子分類グループ（JSで is-visible を付与） */
.sub-tabs {
  display: none; /* デフォルト非表示（JSで切替） */
}
.sub-tabs[hidden] { display: none !important; }

.sub-tabs[data-group].is-visible {
  display: flex;
  gap: 10px;
  background: #fff;                 /* 親カードの“中面” */
  border: 2px solid var(--navy);    /* 親枠の延長として同色枠 */
  border-top: none;                 /* 連結バーとつながるので上枠はなし */
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  padding: 18px 12px;               /* 中面インナー余白 */
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

/* =========================
   子分類タブ（中面のチップ：背景なし）
   ========================= */
.sub-tabs button {
  flex: 1 1 0;                      /* 均等幅（①） */
  text-align: center;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid #d6dbe7;        /* 細いグレー枠（中面カードと馴染む） */
  background: transparent;          /* ★ 背景なし */
  color: var(--navy);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.sub-tabs button:hover {
  border-color: #bfc7d8;            /* 少し濃く */
  box-shadow: 0 0 0 2px rgba(200,164,75,0.15); /* ほんのり金のフォーカス輪郭 */
}
.sub-tabs button.active {
  background: transparent;          /* 背景なしのまま */
  border: 2px solid var(--gold);    /* 金枠で状態を明確化 */
  color: var(--navy);
}

/* =========================
   コンテンツ枠
   ========================= */
.form-section {
  display: none;
  padding: 20px 5px;
}
.form-section.active {
  display: block;
  background: var(--silver);
  border-radius: 12px;
  padding: 22px;
  margin-top: 12px;                 /* 中面カードの下に控えめに続く */
  border: 1px solid #e7ebf3;
}

/* リンク：軽いチップ風（背景うすめで可読性確保） */
.form-section a {
  display: inline-block;
  background: #eef2f8;
  color: var(--navy-light);
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid #d6dbe7;
  text-decoration: none;
}
.form-section a:hover { background: #e4e9f3; }

/* =========================
   スマホ最適化（TikTok風）
   ========================= */
@media (max-width: 640px) {
  .contact-wrapper { padding: 22px; border-radius: 12px; max-width: 100%; }
  .contact-wrapper h2 { font-size: 24px; }
  .contact-wrapper p  { font-size: 14px; }

  .main-tabs { flex-wrap: wrap; gap: 10px; }
  .main-tabs button { flex: 1 1 100%; font-size: 17px; }
  .main-tabs button.active::after {
    left: 10px; right: 10px; height: 14px; bottom: -6px;
  }

  .sub-tabs[data-group].is-visible {
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 10px;
  }
  .sub-tabs button {
    flex: 1 1 calc(50% - 8px); /* 2列カードで押しやすく */
    min-height: 44px;
    font-size: 16px;
  }
}

/* =========================
   アクセシビリティ補助
   ========================= */
.main-tabs button, .sub-tabs button {
  white-space: normal;
  outline-offset: 2px;
}
.main-tabs button:focus-visible,
.sub-tabs button:focus-visible {
  outline: 3px solid #7aa2ff;
}

/* =========================
   （必要なら強制オーバーライド）
   Astraの装飾が勝つ場合は、以下のように
   bodyクラスを前置してセレクタ強度を上げてください。
   例） body.page-slug-contact .main-tabs button {...}
   ========================= */