/* guide.html 専用：style.cssのデザインに合わせる追加CSS */

.hub--guide{
  padding-bottom: 84px; /* 右下の固定ボタン分 */
}

/* ガイドカード（stepの中で使う補助カード） */
.guidecard{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow: var(--shadow);
  padding:14px;
}

/* スクショ＋マーク */
.annot{
  position:relative;
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--border);
  background:#fff;
}
.annot img{
  display:block;
  width:100%;
  height:auto;
}

/* SVGオーバーレイ */
.overlay{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}


/* 表を置くなら（必要な場合だけ） */
.tablewrap{
  overflow-x:auto;
  border-radius:14px;
  border:1px solid var(--border);
}
.maptable{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
  min-width:720px;
  background:#fff;
}
.maptable th, .maptable td{
  border-bottom:1px solid var(--border);
  padding:10px 8px;
  vertical-align:top;
}
.maptable th{
  text-align:left;
  background:var(--bg-soft);
}
.maptable tbody tr:hover{
  background:#eef2ff;
}


/* 画像下の説明欄 */
.guide-desc{
  margin-top: 12px;
  padding: 12px 14px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
}
.guide-desc__title{
  font-weight: 900;
  margin: 0 0 6px;
}
.guide-desc__text{
  line-height: 1.7;
}

/* SVG上の番号（ピン） */
.pin{ cursor: pointer; }
.pin-circle{
  fill: #fff;
  stroke: rgba(17,24,39,.45);
  stroke-width: 0.35;
}
.pin-num{
  font-size: 2.5px;           /* 少し大きくしてOK */
  font-weight: 900;
  text-anchor: middle;
  dominant-baseline: middle;  /* ★これが重要（縦中央） */
  fill: var(--text);
  user-select: none;
}

/* 選択中の番号を強調 */
.pin.active .pin-circle{
  stroke: rgba(37,99,235,.95);
  stroke-width: 0.6;
}

.pin.active .pin-num{
    fill: #111827;
}

/* 画像（スクショ）を大きすぎない幅に制限して中央寄せ */
.annot{
  max-width: 820px;      /* ← ここを 700〜900 で調整 */
  margin: 0 auto;        /* 中央寄せ */
}

/* ついでにカードも少し詰めたいなら */
.guidecard{
  padding: 14px;         /* すでにあるならOK。好みで 12〜18 */
}

/* 画像下の説明欄：文字サイズUP */
.guide-desc__title{
  font-size: clamp(16px, 2.2vw, 20px);
  font-weight: 900;
}

.guide-desc__text{
  font-size: clamp(14px, 2.0vw, 18px);
  line-height: 1.8;
}

.pin-ring{
  fill: transparent;
  stroke: transparent;
  stroke-width: 0.8;
}
.pin.active .pin-ring{
  stroke: rgba(37,99,235,.55);
}

/* SVG要素の変なフォーカス表示を消す */
.pin:focus,
.pin:focus-visible{
  outline: none;
}

.guide-split{
  display:grid;
  grid-template-columns: 1.6fr 1fr;
  gap:14px;
  align-items:start;
}
@media (max-width: 900px){
  .guide-split{ grid-template-columns: 1fr; }
}

.guide-left .annot{
  max-width:none;
  margin:0;
}

.guide-right .guide-desc{
  margin-top:0;
  position: sticky;
  top: 14px;
}