/* キットベンチの共通の帯（上の帯・すべての道具のメニュー・下の帯）だけ（2026-10-02）。
   道具のページ（kb.css と一緒に）と、拡張の紹介ページ・まとめ記事など（style.css と一緒に）の両方で読む。
   ページの中身の見た目は変えないよう、ここには .kb- で始まる帯の部品だけを書く（details など全体に効く指定は書かない） */
.kb-head, .kb-foot { font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif; box-sizing: border-box; }
.kb-head *, .kb-foot * { box-sizing: border-box; }
.kb-head { height: 60px; background: #fff; border-bottom: 1px solid #e6e6ee; display: flex; align-items: center; gap: 28px; padding: 0 24px; position: sticky; top: 0; z-index: 50; font-size: 16px; line-height: normal; }
.kb-logo { display: flex; align-items: center; text-decoration: none; flex: none; }
.kb-logo img { width: auto; height: 36px; display: block; }
.kb-nav { margin-left: auto; display: flex; gap: 22px; align-items: center; height: 60px; font-size: 14px; }
.kb-nav a { text-decoration: none; color: #33333b; white-space: nowrap; }
.kb-nav a:hover { color: #2f80ed; }
.kb-right { margin-left: 8px; display: flex; gap: 12px; align-items: center; font-size: 14px; }
.kb-pro { background: #e5332a; color: #fff; text-decoration: none; padding: 7px 14px; border-radius: 6px; font-weight: 600; white-space: nowrap; }
.kb-pro:hover { color: #fff; }
.kb-has-mega { position: static; }
.kb-nav-btn { font: inherit; font-size: 14px; color: #33333b; background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; padding: 0; height: 60px; white-space: nowrap; }
.kb-has-mega.open .kb-nav-btn { color: #e5332a; }
.kb-mega { display: none; position: absolute; left: 24px; right: 24px; top: 60px; background: #fff; border: 1px solid #e6e6ee; border-radius: 14px; padding: 28px 32px; z-index: 10; text-align: left; }
.kb-has-mega.open .kb-mega { display: block; }
.kb-mega-in { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 28px; }
.kb-mcol p { margin: 0 0 12px; font-size: 14px; color: #707078; }
.kb-mcol ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.kb-mcol a { display: flex; align-items: center; gap: 10px; padding: 7px 6px; border-radius: 8px; text-decoration: none; color: #33333b; font-size: 15px; }
.kb-mcol a:hover { background: #f5f5fa; }
.kb-mcol img { width: 26px; height: 26px; border-radius: 6px; }
.kb-mcol small { margin-left: auto; font-size: 10px; color: #707078; border: 1px solid #e6e6ee; border-radius: 4px; padding: 0 4px; line-height: 16px; flex: none; }
.kb-ico { display: inline-grid; place-items: center; flex: none; border-radius: 9px; background: var(--c); }
.kb-mcol .kb-ico { border-radius: 6px; }
@media (max-width: 1000px) { .kb-mega-in { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .kb-head { gap: 12px; padding: 0 16px; }
  .kb-nav { gap: 0; } .kb-nav > a { display: none; }
  .kb-right { margin-left: 4px; } .kb-pro { padding: 6px 10px; font-size: 13px; }
  .kb-mega { left: 8px; right: 8px; padding: 18px; max-height: calc(100vh - 76px); overflow: auto; }
  .kb-mega-in { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 380px) { .kb-nav-btn { font-size: 13px; } }
.kb-foot { background: #fff; border-top: 1px solid #e6e6ee; padding: 24px; font-size: 13px; text-align: center; color: #707078; }
.kb-foot-nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 22px; margin-bottom: 10px; }
.kb-foot-nav a { text-decoration: none; color: #47474f; }
.kb-foot-nav a:hover { color: #2f80ed; }
.kb-foot p { margin: 0; }

/* 拡張の紹介ページ：目次の帯を共通の帯の下に貼り付ける。サイト名は共通の帯にあるので外す */
.en-pnav { top: 60px; }
.en-pnav-site, .en-pnav-sep { display: none; }
.enl section[id] { scroll-margin-top: 117px; }

/* 「ほかの拡張機能」「ほかの道具」は紺の帯＋白いカード（道具のページと同じ・2026-10-02 チカ） */
.kb-band-navy { background: #23263A; }
.kb-band-navy h2 { color: #fff; }
.kb-band-navy .en-others a, .kb-band-navy .bst-mq a { background: #fff; border-color: transparent; }
.kb-band-navy .en-others a:hover, .kb-band-navy .bst-mq a:hover { border-color: #c9c9d6; }
.kb-band-navy .en-others a.en-oc-all { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .5); }
.kb-band-navy .bst-hub-all a { color: #fff; }
.kb-foot-an { margin-top: 8px !important; font-size: 12px; color: #8a8a94; }
.kb-foot-an a { color: inherit; }
/* 360px幅（小さめのAndroid）で Premium が4〜9pxはみ出していた（ja・es・pt・10/6 実測）→ ロゴと余白を少し詰める */
@media (max-width: 380px) { .kb-head { gap: 8px; padding: 0 12px; } .kb-logo img { height: 30px; } .kb-right { margin-left: 2px; } .kb-pro { padding: 6px 8px; } }
@media (max-width: 340px) { .kb-head { gap: 6px; padding: 0 10px; } .kb-logo img { height: 26px; } .kb-nav-btn { font-size: 12px; } .kb-pro { padding: 5px 7px; font-size: 12px; } }

/* 下の帯の言語一覧（10/7 プライバシー・問い合わせなど kb-site.css を読まないページで、名前がくっついていた）。kb-site.css と同じ */
.kb-foot-lang { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin: 14px auto 6px; max-width: 900px; padding: 0 16px; }
.kb-foot-lang a { font-size: 13px; color: inherit; opacity: .8; text-decoration: none; }
.kb-foot-lang a[aria-current] { opacity: 1; font-weight: 700; text-decoration: underline; }

/* メニュー（すべての道具）が画面より高い時は、メニューの中をスクロール（10/7 パソコンで下の道具が見えなかった）。スマホは前から同じ */
.kb-mega { max-height: calc(100vh - 76px); overflow-y: auto; overscroll-behavior: contain; }