/* =====================================================
   section-index.css
   チップ型ページ内ナビ（B案）S2仕様・PC静止化
   土台: mock11.html #s2（外・内側5px）＋影のみ0.05に薄め（浮き上がり抑制）
   ホバー: 創作ナビ style.css:4278-4290 と同系（#7D74A8＋白文字＋白線）
   ===================================================== */

/* --- ナビコンテナ: PC 6列1行・静止（sticky撤去） --- */
/* plan 1788622559107: PC/タブ自然幅＋中央寄せ（1fr引き伸ばし廃止）。背景/padding/max-width/margin不変。MOBILE_MIN=105.3px実測→フロア106px（390px client・2026-09-06） */
.top-section-index {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: stretch;
  gap: 14px;
  padding: 14px 18px 16px;
  margin: 0 auto;
  max-width: 1160px;
  background: rgba(246, 243, 251, 0.95);
  border: 1px solid #DCE6EE;
  border-radius: 8px;
  position: static;
}

/* --- 各チップ（S2忠実＋影のみ0.05に薄め・浮き上がり抑制） --- */
.top-index-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  flex: 0 1 auto;
  min-width: 140px;
  max-width: 220px;
  min-height: 48px;
  padding: 10px 18px;
  /* 2026-09-06: PC 14→15pxへ底上げ（ヒーローボタン0.95rem≒15.2px・quicklinks14pxとの階層整合。5文字ラベル実幅<min140のため1行維持に影響なし） */
  font-size: 15px;
  line-height: 1.5;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: 8px;
  text-decoration: none;
  color: #5F568E;
  background: #fff;
  border-top: none;
  border-bottom: 3px solid #BBB7DA;
  border-left: 1px solid #DCE6EE;
  border-right: 1px solid #DCE6EE;
  box-shadow: 0 6px 12px rgba(115, 105, 160, 0.05);
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

/* --- ティック（S2: 2×12px・40%・内側5px） --- */
.top-index-chip::before,
.top-index-chip::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 12px;
  border-radius: 1px;
  background: rgba(187, 183, 218, 0.40);
  pointer-events: none;
}
.top-index-chip::before {
  left: 5px;
}
.top-index-chip::after {
  right: 5px;
}

/* ホバー: 創作ナビ（style.css:4282 #7D74A8）参照を移植＋ティック白 */
.top-index-chip:hover {
  background-color: #7D74A8;
  color: #fff;
  border-top: none;
  border-bottom: 3px solid #fff;
  border-left: 1px solid #7D74A8;
  border-right: 1px solid #7D74A8;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(125, 116, 168, 0.075);
}
.top-index-chip:hover::before,
.top-index-chip:hover::after {
  background: #fff;
}

/* フォーカスリング（現行維持） */
.top-index-chip:focus-visible {
  outline: 2px solid #7369A0;
  outline-offset: 2px;
}