/* ===== 人型マップ v3（.kb-map 配下のみに適用） ===== */
.kb-map{
  --kb-accent:#C8102E;
  --kb-accent-dark:#8A0A1E;
  --kb-sub:#2E4053;
  --kb-wa:#B8893E;
  --kb-bg:#FBFAF6;
  --kb-line:#E8E3D8;
  --kb-body-fill:#FAF9F6;
  --kb-outline:#C4C3BD;
  --kb-tint:#F7E7DD;
  --kb-dot:#D6512A;
  --kb-dot-dark:#A93A16;
  --kb-dot-glow:rgba(214,81,42,.45);
  --kb-fig-w:240px;      /* 人型の幅 */
  --kb-label-gap:56px;   /* 人型とラベルの間隔 */
  --kb-fig-x:80px;        /* 人型を右にずらす量 */
  font-family:"Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif;
  color:var(--kb-sub);
  line-height:1.8;
  /* 自身の幅を基準にレイアウトを切り替えるための宣言 */
  container-type:inline-size;
  container-name:kbmap;
}
.kb-map *{box-sizing:border-box;}

/* ── レイアウト ──
   このブロックは「人型＋部位ラベル」だけを持ちます。
   右の紹介カードなどはWordPress側のカラムブロックで組んでください。
   置かれたカラムの幅いっぱいに収まります。 */
.kb-map__main{ max-width:520px; }   /* 中央に寄せたい場合は margin:0 auto; を追加 */
.kb-map__title{
  font-family:"Noto Serif JP","Yu Mincho",serif;
  font-size:clamp(22px,2.6vw,30px); font-weight:600; line-height:1.5;
  margin:0 0 12px; color:var(--kb-sub);
}
.kb-map__hint{ margin:28px 0 0; font-size:14px; color:#8A8578; }

/* ── 人型とラベル ── */
.kb-stage{ position:relative; }
.kb-diagram{ position:relative; }
.kb-figure{ position:relative; width:var(--kb-fig-w); margin:0 0 0 var(--kb-fig-x); }
.kb-figure__svg{ display:block; width:100%; height:auto; fill:var(--kb-body-fill); }
.kb-figure__svg #outline{ stroke:var(--kb-outline); }
.kb-figure__svg g[id]{ transition:fill .25s ease; }
.kb-figure__svg g[id].is-lit{ fill:var(--kb-tint); }

.kb-labels{ list-style:none; margin:0; padding:0; }
.kb-label{
  position:absolute; top:var(--y);
  left:calc(var(--kb-fig-x) + var(--kb-fig-w) + var(--kb-label-gap));
  transform:translateY(-50%); white-space:nowrap;
}
/* リード線：ラベルの左端から、対応する点の手前まで（幅はJSが計算） */
.kb-label::before{
  content:""; position:absolute; right:100%; top:50%;
  width:var(--line,40px); border-top:1px dotted #CFC9BC;
}
.kb-label a{
  font-size:15px; color:var(--kb-sub); text-decoration:none;
  border-bottom:1px solid transparent; padding-bottom:2px; transition:.2s;
}
.kb-label a:hover, .kb-label.is-hot a{
  color:var(--kb-dot-dark); border-bottom-color:var(--kb-dot);
}

/* ── ホットスポット ── */
.kb-spot{
  position:absolute; transform:translate(-50%,-50%);
  width:44px; height:44px; padding:0; margin:0; border:0; background:none;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  -webkit-tap-highlight-color:transparent; transition:opacity .25s ease;
}
.kb-spot__dot{
  position:relative; z-index:1; width:16px; height:16px; border-radius:50%;
  background:radial-gradient(circle closest-side,
    var(--kb-dot) 0%, var(--kb-dot) 38%, var(--kb-dot-glow) 66%, rgba(214,81,42,0) 100%);
  filter:blur(.4px);
  transition:transform .2s ease, background .2s ease, filter .2s ease;
}
.kb-spot__ripple{
  position:absolute; width:12px; height:12px; border-radius:50%;
  background:var(--kb-dot); opacity:.4; filter:blur(1px);
}
.kb-spot--strong .kb-spot__dot{ animation:kb-pulse 1.2s ease-in-out infinite; }
.kb-spot--strong .kb-spot__ripple{ animation:kb-ripple 1.2s ease-out infinite; }
.kb-spot--medium .kb-spot__dot{ animation:kb-pulse 1.8s ease-in-out infinite; }
.kb-spot--medium .kb-spot__ripple{ animation:kb-ripple 1.8s ease-out infinite; }
.kb-spot--weak   .kb-spot__dot{ animation:kb-pulse 2.4s ease-in-out infinite; }
.kb-spot--weak   .kb-spot__ripple{ animation:kb-ripple 2.4s ease-out infinite; }
@keyframes kb-pulse{ 0%,100%{transform:scale(1);} 50%{transform:scale(1.35);} }
@keyframes kb-ripple{ 0%{transform:scale(1); opacity:.5;} 100%{transform:scale(3.4); opacity:0;} }

.kb-spot:hover .kb-spot__dot,
.kb-spot:focus-visible .kb-spot__dot,
.kb-spot.is-hot .kb-spot__dot{
  animation:none; transform:scale(1.25); background:var(--kb-dot-dark); filter:none;
}
.kb-spot:hover .kb-spot__ripple,
.kb-spot:focus-visible .kb-spot__ripple,
.kb-spot.is-hot .kb-spot__ripple{ animation:none; opacity:0; }
.kb-spot:focus{ outline:none; }
.kb-spot:focus-visible .kb-spot__dot{ box-shadow:0 0 0 3px #fff, 0 0 0 5px var(--kb-dot-dark); }
.kb-spot.is-active .kb-spot__dot{
  animation:none; transform:scale(1.3); background:var(--kb-dot-dark); filter:none;
}
.kb-spot.is-active .kb-spot__ripple{ animation:none; opacity:0; }
.kb-map.is-open .kb-spot:not(.is-active){ opacity:.35; }
.kb-map.is-open .kb-spot:not(.is-active) .kb-spot__dot,
.kb-map.is-open .kb-spot:not(.is-active) .kb-spot__ripple{ animation:none; }

/* ── ポップオーバー ── */
.kb-pop{
  position:absolute; z-index:5; width:230px;
  background:#fff; border:1px solid var(--kb-line); border-radius:12px;
  padding:18px 18px 16px; text-align:left;
  box-shadow:0 6px 28px rgba(46,64,83,.14);
  opacity:0; transition:opacity .2s ease;
}
.kb-pop.is-shown{ opacity:1; }
.kb-pop__part{
  font-family:"Noto Serif JP","Yu Mincho",serif;
  font-size:22px; font-weight:600; line-height:1.3; margin:0 0 2px; color:var(--kb-sub);
}
.kb-pop__symptom{ margin:0 0 14px; font-size:13px; color:#8A8578; }
.kb-pop__cta{
  display:block; text-align:center; padding:11px 14px; border-radius:6px;
  background:var(--kb-accent); color:#fff !important; text-decoration:none !important;
  font-size:14px; font-weight:700; transition:background .2s ease;
}
.kb-pop__cta:hover{ background:var(--kb-accent-dark); }
.kb-pop__cta[hidden]{ display:none; }
.kb-pop__close{
  position:absolute; top:6px; right:6px; width:32px; height:32px;
  padding:0; border:0; background:none; color:#A8A296;
  font-size:20px; line-height:1; cursor:pointer; border-radius:50%;
}
.kb-pop__close:hover{ color:var(--kb-sub); background:var(--kb-bg); }
.kb-pop__arrow{
  position:absolute; width:14px; height:14px;
  background:#fff; border:1px solid var(--kb-line); transform:rotate(45deg);
}
.kb-pop--below .kb-pop__arrow{ top:-8px; border-right:0; border-bottom:0; }
.kb-pop--above .kb-pop__arrow{ bottom:-8px; border-left:0; border-top:0; }

/* ── レスポンシブ ── */
/* ラベルを図の横に置けない幅では、図の下へ回り込ませる。
   判定はビューポートではなく「このブロック自身の幅」で行います。
   （WordPressの2カラムに入れたとき、隣のカラムへはみ出すのを防ぐため）
   人型240 + 間隔56 + ラベル約110 = 約410px 必要 → 430pxを閾値に */
@container kbmap (max-width:430px){
  .kb-map__title{ text-align:center; }
  .kb-map__hint{ text-align:center; }
  /* 人型を小さくしすぎると、腰とお尻のタップ領域（44px）が重なります */
  .kb-map{ --kb-fig-w:280px; }
  .kb-figure{ max-width:92%; margin:0 auto; }
  /* 縦並び：1行1部位。リンクはブロック化してタップ領域を確保 */
  .kb-labels{
    position:static; display:block;
    max-width:260px; margin:26px auto 0;
  }
  .kb-label{ position:static; transform:none; left:auto; }
  .kb-label + .kb-label{ border-top:1px dashed var(--kb-line); }
  .kb-label::before{ display:none; }
  .kb-label a{
    display:block; text-align:center;
    padding:13px 8px; font-size:15px;
    border-bottom:0;
  }
  .kb-pop{ width:210px; padding:16px 16px 14px; }
  .kb-pop__part{ font-size:20px; }
}

/* コンテナクエリ非対応の古いブラウザ向けフォールバック */
@media (max-width:782px){
  .kb-map__title{ text-align:center; }
  .kb-map__hint{ text-align:center; }
  /* 人型を小さくしすぎると、腰とお尻のタップ領域（44px）が重なります */
  .kb-map{ --kb-fig-w:280px; }
  .kb-figure{ max-width:92%; margin:0 auto; }
  /* 縦並び：1行1部位。リンクはブロック化してタップ領域を確保 */
  .kb-labels{
    position:static; display:block;
    max-width:260px; margin:26px auto 0;
  }
  .kb-label{ position:static; transform:none; left:auto; }
  .kb-label + .kb-label{ border-top:1px dashed var(--kb-line); }
  .kb-label::before{ display:none; }
  .kb-label a{
    display:block; text-align:center;
    padding:13px 8px; font-size:15px;
    border-bottom:0;
  }
  .kb-pop{ width:210px; padding:16px 16px 14px; }
  .kb-pop__part{ font-size:20px; }
}

/* WCAG 2.3.1：最速でも0.83Hz。視差軽減設定では静止 */
@media (prefers-reduced-motion:reduce){
  .kb-spot__dot, .kb-spot__ripple{ animation:none !important; }
  .kb-spot__ripple{ opacity:.22; transform:scale(2); }
  .kb-pop, .kb-figure__svg g[id], .kb-spot{ transition:none !important; }
}