/* ============================================================
   v6 KARTE デザイン完全移植（Tailwind utilityで足りない部分）
   ============================================================ */

/* Noto Serif 用ヘルパー */
.noto-serif { font-family: 'Noto Serif JP', serif; }

/* フィルターチップ */
.karte-chip {
  background: #fff;
  border-color: rgb(243 244 246);
  color: rgb(156 163 175);
}
.karte-chip:hover {
  border-color: #3A6EA5;
  color: #3A6EA5;
}
.karte-chip.is-active {
  background: #0c1b2f;
  border-color: #0c1b2f;
  color: #fff;
  box-shadow: 0 10px 15px -3px rgba(12, 27, 47, 0.1);
}

/* カルテカード ホバー演出 */
.karte-card { isolation: isolate; }
.karte-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top left, #E87A5D, transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 0;
}
.karte-card:hover::before { opacity: 0.03; }

/* カード矢印アニメ */
.karte-arrow {
  display: inline-block;
  transition: transform 0.3s ease;
}
.karte-card:hover .karte-arrow {
  transform: translateX(8px);
}

/* カード背景アイコン（巨大な装飾） */
.karte-bg-icon {
  width: 240px;
  height: 240px;
}
.karte-bg-icon svg { width: 100%; height: 100%; }

/* カードのフィルタリング状態 */
.karte-card.is-dim {
  opacity: 0.4;
  transform: scale(0.98);
  pointer-events: none;
  transition: opacity 0.4s, transform 0.4s;
}
.karte-card {
  transition: opacity 0.4s, transform 0.4s, box-shadow 0.5s;
}

/* ── モーダル ── */
#karteModal {
  display: none;
}
#karteModal.is-open {
  display: flex;
  animation: karteModalFade 0.25s ease forwards;
}
@keyframes karteModalFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.karte-modal-panel {
  animation: karteModalPop 0.3s cubic-bezier(0.4,0,0.2,1) forwards;
}
@keyframes karteModalPop {
  from { opacity: 0; transform: scale(0.92) translateY(20px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* タブ */
.karte-tab {
  color: rgb(156 163 175);
}
.karte-tab:hover { background: rgba(255,255,255,0.5); }
.karte-tab.is-active {
  background: #fff;
  color: #3A6EA5;
  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
}

/* タブパネル切り替えアニメ */
.karte-panel {
  animation: karteSlideIn 0.3s ease forwards;
}
@keyframes karteSlideIn {
  from { opacity: 0; transform: translateX(10px); }
  to   { opacity: 1; transform: translateX(0); }
}


/* ドットインジケーター */
.karte-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background: rgb(229 231 235);
  transition: width 0.3s ease, background 0.3s ease;
}
.karte-dot-active {
  width: 1.5rem;
  background: #3A6EA5;
}

/* worries / actions のリストスタイル */
.karte-worry-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.karte-worry-icon {
  margin-top: 0.25rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 9999px;
  background: rgba(58, 110, 165, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #3A6EA5;
  flex-shrink: 0;
}
.karte-worry-text {
  color: rgb(75 85 99);
  font-weight: 500;
  line-height: 1.625;
}

.karte-action-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: #fff;
  border: 1px solid rgb(243 244 246);
  padding: 1.25rem;
  border-radius: 1rem;
  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
}
.karte-action-icon {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 9999px;
  background: rgba(58, 110, 165, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #3A6EA5;
  flex-shrink: 0;
}
.karte-action-text {
  color: rgb(55 65 81);
  font-weight: 700;
}

/* prev/next 無効化スタイル */
#kartePrevBtn:disabled {
  color: rgb(229 231 235);
  cursor: not-allowed;
}

/* レスポンシブ：モーダル上のサイドバー */
@media (max-width: 768px) {
  .karte-modal-panel { max-height: 95vh; }
}


/* ============================================================
   チグハグ・スタガード配置（PC幅 < 1024px / モバイル）
   ============================================================ */
@media (max-width: 1023px) {
  /* 右列（偶数番目のカード）を下にズラす */
  #karteGrid > .karte-card:nth-child(2n) {
    margin-top: 56px;
  }
  /* セクション末尾の余白補正（最後の右列が下にはみ出るため） */
  #empathy-ledger > div {
    padding-bottom: 0;
  }
}

/* モバイル（〜480px）：横スワイプ用に高さ揃え・オフセット解除 */
@media (max-width: 480px) {
  #karteGrid > .karte-card {
    padding: 1.25rem;
  }
  #karteGrid > .karte-card:nth-child(2n) {
    margin-top: 0;          /* オフセット解除（横並びで段差が出ないように） */
  }
  #karteGrid .karte-card h3 {
    font-size: 14px;
    line-height: 1.5;
  }
  #karteGrid .karte-card .noto-serif.italic {
    font-size: 12px;
  }
}

/* フィルターチップ：7個 → スマホで縦に2行流す */


/* ============================================================
   v4 デザイン適用 — カードと karte-stack
   既存の v6 .karte-card スタイルは上書き、グリッドは削除
   ============================================================ */

/* --- ラッパー：karte-stack ----------------------------------- */
.karte-stack {
  display: flex;
  flex-direction: column;
  gap: 28px;
  width: 100%;
  margin: 0 auto;
}

/* スマホ：横スワイプcarousel（peek付き） */
@media (max-width: 767px) {
  .karte-stack {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;            /* Firefox */
    /* 端のpeekを作る余白 */
    padding: 4px 16px 20px;
    margin: 0 -16px 32px;             /* セクション余白を相殺して端まで */
    scroll-padding-left: 16px;
  }
  .karte-stack::-webkit-scrollbar { display: none; }  /* Chrome/Safari */

  .karte-stack > .karte-card {
    flex: 0 0 85%;                    /* 画面幅85% → 次カードがpeek */
    scroll-snap-align: start;
    margin-top: 0 !important;
  }
}

/* チグハグマージン無効化（v6で nth-child(2n) に入っていた指定を打ち消す） */
.karte-stack > .karte-card:nth-child(2n) {
  margin-top: 0 !important;
}

/* --- カード本体：v4スタイル --------------------------------- */
.karte-card.karte-card--v4 {
  /* v6の Tailwind utility は使わない構造に */
  width: 100%;
  background-color: #ffffff;
  border: 1px solid rgba(240, 235, 230, 0.6);
  border-radius: 24px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.03);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  /* v6の固定高は解除 */
  height: auto;
  padding: 0;
}
.karte-card.karte-card--v4:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(12, 27, 47, 0.08);
}

/* dim状態（フィルター時） */
.karte-card.karte-card--v4.is-dim {
  opacity: 0.35;
  transform: scale(0.98);
  pointer-events: none;
}

/* --- showcase（カード中身）：v4 ---------------------------- */
.karte-card--v4 .karte-showcase {
  display: flex;
  flex-direction: column;
  padding: 30px 28px;
  min-height: 220px;
  justify-content: space-between;
  position: relative;
  z-index: 1;
}
.karte-card--v4 .showcase-header {
  margin-bottom: auto;
}
.karte-card--v4 .showcase-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 900;
  color: #3A6EA5;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  background-color: rgba(58, 110, 165, 0.08);
  padding: 4px 12px;
  border-radius: 4px;
  margin-bottom: 14px;
}
.karte-card--v4 .showcase-empathy {
  font-family: 'Noto Serif JP', serif;
  font-style: italic;
  font-size: 13px;
  line-height: 1.7;
  color: #9ca3af;
  margin: 12px 0 16px;
  padding-left: 14px;
  border-left: 2px solid #E87A5D;
  opacity: 0.9;
}
.karte-card--v4 .showcase-title {
  font-family: 'Noto Serif JP', serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.55;
  color: #1f2937;
  transition: color 0.3s;
}
.karte-card--v4:hover .showcase-title {
  color: #3A6EA5;
}
.karte-card--v4 .showcase-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 32px;
}
.karte-card--v4 .showcase-btn {
  font-size: 11px;
  font-weight: 900;
  color: #9ca3af;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: color 0.3s;
}
.karte-card--v4:hover .showcase-btn {
  color: #3A6EA5;
}

/* arrow（既存のv6 .karte-arrow を流用） */
.karte-card--v4 .karte-arrow {
  display: inline-block;
  transition: transform 0.3s ease;
}
.karte-card--v4:hover .karte-arrow {
  transform: translateX(8px);
}

/* --- レスポンシブ：タブレット以上で2列まで -------------- */
@media (min-width: 768px) {
  .karte-stack {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}
@media (min-width: 1024px) {
  .karte-stack {
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
  }
}

/* モーダル本体：高さ固定 */
/* PC時は元のサイズ（590px）で固定 */
.karte-modal-panel {
  height: 590px;
}

/* スマホ（レスポンシブ）時の調整 */
@media (max-width: 768px) {
  .karte-modal-panel { 
    height: auto;        /* 固定高さを解除 */
    max-height: 82vh;    /* 画面の高さの82%を上限にして一回り小さくする */
    margin: auto;        /* 上下に程よい余白を作って中央配置 */
    border-radius: 24px; /* スマホの画面サイズに合わせて角丸も少しスマートに */
  }
}




/* ============================================================
   領域横断の強み 帯（カルテヘッダー下）
   ============================================================ */
.karte-domains {
  background: #fff;
  border: 1px solid rgba(58,110,165,0.12);
  border-radius: 14px;
  padding: 20px 24px;
  margin-bottom: 44px;
}
.karte-domains-label {
  display: inline-block;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #3A6EA5;
  margin-bottom: 12px;
}
.karte-domains-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.karte-domains-tags span {
  font-size: 12px;
  font-weight: 700;
  color: #0c1b2f;
  background: rgba(58,110,165,0.06);
  border: 1px solid rgba(58,110,165,0.12);
  padding: 5px 12px;
  border-radius: 6px;
}
.karte-domains-note {
  font-size: 12.5px;
  color: #6b7280;
  margin: 0;
  line-height: 1.7;
}
.karte-domains-note strong { color: #E87A5D; font-weight: 700; }

/* ============================================================
   カルテモーダル：相談への動線（CTAボタンではなく控えめリンク）
   ============================================================ */
.karte-modal-lead {
  margin-top: 18px;
  font-size: 13px;
  color: #6b7280;
  line-height: 1.7;
}
.karte-modal-link {
  display: inline-block;
  margin-top: 4px;
  color: #3A6EA5;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(58,110,165,0.3);
  transition: color 0.2s, border-color 0.2s;
}
.karte-modal-link:hover {
  color: #E87A5D;
  border-color: #E87A5D;
}

@media (max-width: 480px) {
  .karte-domains { padding: 16px 18px; margin-bottom: 32px; }
  .karte-domains-tags span { font-size: 11px; padding: 4px 10px; }
}

/* 結果アイコンのサイズを全Caseで強制統一 */
#karteResultIcon {
  width: 72px;
  height: 72px;
  padding: 0 !important;
  align-items: center;
  justify-content: center;
}
#karteResultIcon svg {
  width: 34px !important;
  height: 34px !important;
}

/* ============================================================
   ★ モーダル：3タブとも同じ大きさに固定
   ============================================================ */

/* コンテンツ部：スクロールなし・縦flex */
.karte-modal-content {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 28px 32px !important;
}

/* パネル：高さ統一・.hidden は尊重（タブ切替を壊さない） */
.karte-panel {
  flex: 1;
  flex-direction: column;
  min-height: 0;
}
.karte-panel:not(.hidden) { display: flex; }
.karte-panel.hidden { display: none; }

/* worry / action リスト */
#karteWorriesList,
#karteActionsList {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
  margin: 0;
}

/* worry項目：固定高＋2行クランプ */
#karteWorriesList > li { min-height: 46px; display: flex; align-items: center; }
.karte-worry-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
  line-height: 1.55;
}

/* action項目：固定高＋2行クランプ */
#karteActionsList > .karte-action-item { min-height: 52px; padding: 11px 14px !important; }
.karte-action-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
  line-height: 1.5;
}

/* 診察メモ / 伴走のこだわり box：常に下端固定・3行クランプ */
.karte-panel[data-panel="0"] > div:last-child,
.karte-panel[data-panel="1"] > div:last-child {
  margin-top: auto !important;
  margin-bottom: 4px;
  flex-shrink: 0;
  min-height: 96px;
}

/* actionリストと「こだわり」box の間に最低マージンを確保 */
#karteActionsList,
#karteWorriesList {
  margin-bottom: 20px !important;
}

/* AFTERパネル：中央寄せ */
.karte-panel[data-panel="2"] { justify-content: center; align-items: center; }
.karte-panel[data-panel="2"] > .text-center { width: 100%; }
#karteResultTitle {
  min-height: 56px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
#karteResultQuote {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical; overflow: hidden;
}

/* モーダルタイトル：2行クランプで統一 */
#karteModalTitle {
  min-height: 58px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}

@media (max-width: 480px) {
  .karte-modal-content { padding: 20px 22px !important; }
  #karteWorriesList > li { min-height: 42px; }
  #karteActionsList > .karte-action-item { min-height: 48px; }
}
/* ============================================================
   v2.9 MODAL — attached modal UI port / Chobitt brand aligned
   ============================================================ */
body.karte-modal-open { overflow: hidden; }

#karteModal.karte-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
#karteModal.karte-modal.is-open {
  display: flex;
  animation: karteModalFade .2s ease both;
}
#karteModal .karte-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(27, 37, 51, .42);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
#karteModal .karte-modal-panel--v29 {
  position: relative;
  width: min(100%, 590px);
  max-height: min(90vh, 820px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid #eae3d8;
  border-radius: 22px;
  box-shadow: 0 24px 70px rgba(27, 37, 51, .18);
  animation: karteModalPop .26s cubic-bezier(.2,.8,.2,1) both;
  font-family: 'Noto Sans JP', sans-serif;
}
#karteModal .karte-modal-head {
  min-height: 62px;
  padding: 15px 20px 15px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: #faf8f5;
  border-bottom: 1px solid #f0eae1;
}
#karteModal .karte-modal-meta { display: flex; align-items: center; gap: 10px; min-width: 0; }
#karteModal .karte-case-badge {
  flex: none;
  padding: 5px 9px;
  border: 1px solid #f7d4cc;
  border-radius: 5px;
  background: #fef2ef;
  color: #e86858;
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
}
#karteModal .karte-case-category {
  overflow: hidden;
  color: #718096;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#karteModal .karte-modal-close {
  width: 34px;
  height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #7d8997;
  cursor: pointer;
  transition: .2s ease;
}
#karteModal .karte-modal-close:hover { background: #fff; color: #1b2533; }
#karteModal .karte-modal-close svg,
#karteModal .karte-mini-heading svg,
#karteModal .karte-check-icon svg,
#karteModal .karte-consult-btn svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#karteModal .karte-modal-close svg { width: 19px; height: 19px; }

#karteModal .karte-modal-body {
  padding: 25px 27px 27px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #ddd6cc transparent;
}
#karteModal .karte-modal-intro { margin-bottom: 20px; }
#karteModal .karte-modal-intro h3 {
  margin: 0 0 7px;
  color: #1b2533;
  font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: -.02em;
}
#karteModal .karte-modal-summary {
  margin: 0;
  color: #e86858;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.7;
}
#karteModal .karte-mini-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  color: #243145;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
}
#karteModal .karte-dot-accent {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e86858;
  flex: none;
}
#karteModal .karte-mini-heading svg { width: 16px; height: 16px; color: #e86858; flex: none; }

#karteModal .karte-modal-problem {
  margin-bottom: 23px;
  padding: 16px 17px;
  border: 1px solid #eee5d8;
  border-radius: 10px;
  background: #faf6f3;
}
#karteModal .karte-problem-list { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
#karteModal .karte-problem-list li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: #536174;
  font-size: 13px;
  line-height: 1.65;
}
#karteModal .karte-problem-mark {
  width: 4px;
  height: 4px;
  margin-top: .72em;
  flex: none;
  border-radius: 50%;
  background: #d9a99f;
}
#karteModal .karte-diagnosis {
  margin: 11px 0 0;
  padding-top: 10px;
  border-top: 1px solid rgba(232, 104, 88, .12);
  color: #8a6b63;
  font-size: 11.5px;
  line-height: 1.7;
}

#karteModal .karte-modal-approach { margin-bottom: 23px; }
#karteModal .karte-approach-list { display: grid; gap: 9px; }
#karteModal .karte-approach-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #4f5e70;
  font-size: 13px;
  line-height: 1.65;
}
#karteModal .karte-check-icon {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fef2ef;
  color: #e86858;
}
#karteModal .karte-check-icon svg { width: 11px; height: 11px; stroke-width: 2.4; }
#karteModal .karte-commitment {
  margin: 11px 0 0 28px;
  color: #8b796f;
  font-size: 11.5px;
  line-height: 1.65;
}

#karteModal .karte-modal-outcome {
  padding: 15px 17px;
  border: 1px solid #d9e9e1;
  border-radius: 10px;
  background: #f4f8f6;
}
#karteModal .karte-outcome-label {
  margin-bottom: 5px;
  color: #3a7257;
  font-size: 11px;
  font-weight: 700;
}
#karteModal .karte-outcome-title {
  margin: 0;
  color: #223047;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.65;
}
#karteModal .karte-outcome-quote {
  margin: 6px 0 0;
  color: #667567;
  font-size: 11.5px;
  line-height: 1.65;
}

#karteModal .karte-modal-foot {
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-top: 1px solid #f0eae1;
  background: #faf8f5;
}
#karteModal .karte-modal-guide {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  color: #718096;
  font-size: 10.5px;
}
#karteModal .karte-beaver-avatar {
  width: 32px;
  height: 32px;
  flex: none;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid #ece4da;
  border-radius: 50%;
  background: #fff;
}
#karteModal .karte-beaver-avatar img {
  width: 42px;
  height: 42px;
  object-fit: cover;
  object-position: center 34%;
}
#karteModal .karte-consult-btn {
  min-height: 39px;
  padding: 9px 15px 9px 17px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 999px;
  background: #e86858;
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 4px 13px rgba(232, 104, 88, .14);
  transition: transform .2s ease, background .2s ease;
}
#karteModal .karte-consult-btn:hover { background: #dc5c4c; transform: translateY(-1px); }
#karteModal .karte-consult-btn svg { width: 14px; height: 14px; }
#karteModal .karte-consult-btn .consult-cta-label,
#consultModal .consult-submit .consult-cta-label { white-space: nowrap; }
#karteModal .karte-consult-btn small,
#consultModal .consult-submit small {
  padding-left: 8px;
  border-left: 1px solid rgba(255,255,255,.52);
  color: inherit;
  font: inherit;
  font-size: .82em;
  line-height: 1.2;
  white-space: nowrap;
}

@media (max-width: 640px) {
  #karteModal.karte-modal { padding: 12px; align-items: flex-end; }
  #karteModal .karte-modal-panel--v29 {
    width: 100%;
    max-height: 92dvh;
    border-radius: 20px 20px 14px 14px;
  }
  #karteModal .karte-modal-head { padding: 13px 15px; }
  #karteModal .karte-modal-body { padding: 21px 18px 22px; }
  #karteModal .karte-modal-intro h3 { font-size: 19px; }
  #karteModal .karte-modal-foot { padding: 12px 14px; }
  #karteModal .karte-modal-guide > span:last-child { display: none; }
  #karteModal .karte-consult-btn { flex: 1; max-width: 260px; }
}

/* ============================================================
   v3.0 CONSULTATION MODAL — ported from attached UI
   ============================================================ */
body.consult-modal-open { overflow: hidden; }
#consultModal.consult-modal {
  position: fixed; inset: 0; z-index: 10050 !important; display: none;
  align-items: center; justify-content: center; padding: 18px;
}
#consultModal.consult-modal.is-open { display: flex; animation: karteModalFade .2s ease both; }
#consultModal .consult-modal-overlay { position: absolute; inset: 0; background: rgba(27,37,51,.45); backdrop-filter: blur(3px); }
#consultModal .consult-modal-panel {
  position: relative; z-index: 1; width: min(100%, 620px); max-height: 92vh;
  background: #fff; border: 1px solid #eae3d8; border-radius: 22px;
  box-shadow: 0 26px 70px rgba(18,30,45,.24); overflow: hidden;
  display: flex; flex-direction: column; animation: karteModalPop .26s cubic-bezier(.2,.8,.2,1) both;
}
#consultModal .consult-modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 17px 22px; border-bottom: 1px solid #f0eae0; background: #faf8f5;
}
#consultModal .consult-modal-brand { display: flex; align-items: center; gap: 11px; min-width: 0; }
#consultModal .consult-beaver { width: 36px; height: 36px; border-radius: 50%; background: #fef2ef; display: grid; place-items: center; overflow: hidden; flex: none; }
#consultModal .consult-beaver img { width: 31px; height: 31px; object-fit: contain; }
#consultModal .consult-modal-brand h3 { margin: 0; font-family: "Zen Kaku Gothic New","Noto Sans JP",sans-serif; font-size: 16px; font-weight: 600; color: #1b2533; }
#consultModal .consult-modal-brand p { margin: 3px 0 0; font-size: 11px; line-height: 1.55; color: #718096; }
#consultModal .consult-modal-close { width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent; color: #718096; display: grid; place-items: center; cursor: pointer; flex: none; }
#consultModal .consult-modal-close:hover { background: #fff; color: #1b2533; }
#consultModal .consult-modal-close svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
#consultModal .consult-modal-body { padding: 22px 24px 24px; overflow-y: auto; }
#consultModal .consult-form { display: grid; gap: 18px; }
#consultModal .consult-field { display: grid; gap: 7px; }
#consultModal .consult-label { font-size: 12px; font-weight: 600; color: #374151; }
#consultModal .consult-label em { font-style: normal; color: #eb6b5b; }
#consultModal .consult-label .consult-required,
#consultModal .consult-label .consult-optional {
  display: inline-block;
  margin-left: 5px;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 600;
  line-height: 1.35;
  vertical-align: 1px;
}
#consultModal .consult-label .consult-required { background: #fef0ec; color: #d95748; }
#consultModal .consult-label .consult-optional { background: #f1f3f4; color: #78838d; }
#consultModal .consult-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
#consultModal input[type="text"], #consultModal input[type="email"], #consultModal textarea {
  width: 100%; box-sizing: border-box; border: 1px solid #ddd5c8; border-radius: 8px; background: #fff;
  padding: 10px 11px; color: #1b2533; font: 400 14px/1.6 "Noto Sans JP",sans-serif; outline: none;
}
#consultModal textarea { resize: vertical; min-height: 86px; }
#consultModal input:focus, #consultModal textarea:focus { border-color: #eb6b5b; box-shadow: 0 0 0 2px rgba(235,107,91,.09); }
#consultModal .consult-segment { display: grid; grid-template-columns: repeat(5,1fr); gap: 6px; }
#consultModal .consult-segment button, #consultModal .consult-chips button {
  border: 1px solid #e0d8cc; background: #fff; color: #52637a; cursor: pointer; transition: .18s ease;
  font-family: "Noto Sans JP",sans-serif;
}
#consultModal .consult-segment button { min-height: 34px; padding: 5px 7px; border-radius: 7px; font-size: 11px; }
#consultModal .consult-segment button.is-selected, #consultModal .consult-chips button.is-selected { border-color: #eb6b5b; background: #fef2ef; color: #d95748; font-weight: 600; }
#consultModal .consult-chips { display: flex; flex-wrap: wrap; gap: 8px; }
#consultModal .consult-chips button { padding: 7px 11px; border-radius: 999px; font-size: 11px; }
#consultModal .consult-chips button.is-selected::before { content: "✓ "; }
#consultModal .consult-submit {
  width: 100%; border: 0; border-radius: 999px; padding: 13px 18px; background: #eb6b5b; color: #fff;
  font: 600 14px/1 "Zen Kaku Gothic New","Noto Sans JP",sans-serif; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 9px; box-shadow: 0 5px 18px rgba(235,107,91,.2); transition: .18s ease;
}
#consultModal .consult-submit:hover { background: #de5c4b; transform: translateY(-1px); }
#consultModal .consult-submit:disabled { opacity: .55; cursor: wait; transform: none; }
#consultModal .consult-submit svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#consultModal .consult-privacy { margin: -6px 0 0; text-align: center; font-size: 10.5px; line-height: 1.6; color: #8490a0; }
#consultModal .consult-success { text-align: center; padding: 24px 8px 18px; }
#consultModal .consult-success-icon { width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center; background: #ecf6f2; color: #2d6a4f; font-size: 28px; font-weight: 700; }
#consultModal .consult-success h4 { margin: 0 0 10px; font-family: "Zen Kaku Gothic New",sans-serif; font-size: 20px; color: #1b2533; }
#consultModal .consult-success p { margin: 0 auto; max-width: 430px; font-size: 13px; line-height: 1.8; color: #4a5568; }
#consultModal .consult-success-close { margin-top: 20px; border: 0; border-radius: 999px; padding: 10px 26px; background: #eb6b5b; color: #fff; font-size: 13px; cursor: pointer; }
@media (max-width: 640px) {
  #consultModal.consult-modal { padding: 10px; }
  #consultModal .consult-modal-panel { border-radius: 18px; max-height: 95vh; }
  #consultModal .consult-modal-head { padding: 14px 16px; }
  #consultModal .consult-modal-body { padding: 18px 16px 20px; }
  #consultModal .consult-modal-brand p { display: none; }
  #consultModal .consult-form { gap: 14px; }
  #consultModal .consult-field { gap: 5px; }
  #consultModal .consult-grid-2 { grid-template-columns: 1fr; gap: 14px; }
  #consultModal .consult-segment { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; }
  #consultModal .consult-segment button { min-height: 32px; padding: 4px 5px; font-size: 10px; }
  #consultModal .consult-chips { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
  #consultModal .consult-chips button { width: 100%; min-height: 34px; padding: 6px 7px; border-radius: 8px; font-size: 10px; }
  #consultModal input[type="text"],
  #consultModal input[type="email"],
  #consultModal textarea { padding: 9px 10px; font-size: 16px; }
  #consultModal textarea { min-height: 72px; }
  #consultModal .consult-submit { margin-top: 2px; }
}

/* Hide the inactive screen even when the consultation form has display:grid. */
#consultModal .consult-form[hidden],
#consultModal .consult-success[hidden] { display: none !important; }