/* キットベンチ：サイトの外側（上の帯・下の帯・トップ・カード・使い方の帯など）の見た目。道具の画面の見た目は kb.css（_src/split_css.py が振り分け） */
.kb-logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 19px; color: var(--ink); text-decoration: none; }
.kb-logo img { width: 30px; height: 30px; }
.kb-nav { display: flex; gap: 22px; font-size: 14px; }
.kb-nav a { text-decoration: none; color: var(--ink); }
.kb-nav a:hover { color: var(--acc); }
.kb-right { margin-left: auto; 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; }
.kb-top { text-align: center; padding: 36px 24px 8px; }
.kb-top h1 { font-size: 42px; font-weight: 600; color: var(--ink); margin: 0; line-height: 1.25; }
.kb-top p { font-size: 20px; margin: 12px auto 0; max-width: 980px; line-height: 1.6; }
.kb-pills { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 28px auto 32px; padding: 0 24px; max-width: 1200px; }
.kb-pills button { font: inherit; font-size: 14px; padding: 7px 14px; border-radius: 999px; border: 1px solid #d6d6e0; background: #fff; color: var(--ink); cursor: pointer; }
.kb-pills button.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.kb-grid { list-style: none; margin: 0 auto; padding: 0 24px 64px; max-width: 1440px; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.kb-card a { display: flex; flex-direction: column; height: 100%; min-height: 232px; padding: 24px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; text-decoration: none; }
.kb-card a:hover { border-color: #c9c9d6; }
.kb-card img { width: 42px; height: 42px; border-radius: 9px; }
.kb-card h3 { font-size: 20px; font-weight: 500; color: var(--ink); margin: 22px 0 8px; line-height: 1.35; }
.kb-card p { font-size: 13px; line-height: 18px; color: var(--mute); margin: 0; }
.kb-kind { margin-top: auto; padding-top: 14px; font-size: 12px; color: var(--mute); }
.kb-kind b { font-weight: 600; color: var(--ink); }
.kb-card.hide { display: none; }
.kb-foot { background: #fff; border-top: 1px solid var(--line); padding: 24px; font-size: 13px; text-align: center; color: var(--mute); }
.kb-pro-row { width: 100%; border-top: 1px solid var(--line); padding-top: 12px; font-size: 13px; color: var(--mute); }
.kb-pro-row b { color: var(--ink); }
.kb-note { font-size: 13px; color: var(--mute); margin: 14px auto 0; }
.kb-sec { max-width: 980px; margin: 56px auto 0; padding: 0 24px; text-align: left; }
.kb-sec h2 { font-size: 26px; font-weight: 600; color: var(--ink); margin: 0 0 16px; }
.kb-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.kb-steps li { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 20px; }
.kb-steps b { display: block; color: var(--ink); font-size: 17px; margin-bottom: 6px; }
.kb-steps span { font-size: 14px; color: var(--mute); line-height: 1.7; }
.kb-ext { display: flex; gap: 18px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 20px; }
.kb-ext img { width: 56px; height: 56px; border-radius: 12px; }
.kb-ext div { flex: 1; font-size: 14px; line-height: 1.7; }
.kb-ext b { color: var(--ink); font-size: 17px; display: block; }
.kb-ext a { text-decoration: none; border: 1px solid var(--ink); color: var(--ink); border-radius: 999px; padding: 8px 16px; font-size: 14px; white-space: nowrap; }
@media (max-width: 760px) {
  .kb-nav { display: none; } .kb-steps { grid-template-columns: 1fr; }
}

/* ラッコツールズの探しやすさを足す（数字の見出し・検索・お気に入り・人気/新着）2026-10-02 チカ */
.kb-search { max-width: 760px; margin: 22px auto 0; display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #d6d6e0; border-radius: 12px; padding: 0 16px; color: var(--mute); }
.kb-search input { flex: 1; border: 0; outline: 0; font: inherit; font-size: 17px; padding: 15px 0; background: transparent; color: var(--ink); }
.kb-block { max-width: 1440px; margin: 0 auto; padding: 8px 24px 0; }
.kb-block h2 { font-size: 22px; font-weight: 600; color: var(--ink); margin: 18px 0 14px; }
.kb-bhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.kb-seg { display: flex; border: 1px solid #d6d6e0; border-radius: 10px; overflow: hidden; }
.kb-seg button { font: inherit; font-size: 14px; padding: 8px 16px; border: 0; background: #fff; color: var(--ink); cursor: pointer; }
.kb-seg button.on { background: var(--ink); color: #fff; }
.kb-mini { padding: 0 0 8px; }
.kb-block .kb-grid { padding-left: 0; padding-right: 0; }
.kb-card { position: relative; }
.kb-star { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%; border: 0; background: transparent; color: #b8b8c4; cursor: pointer; display: grid; place-items: center; z-index: 1; }
.kb-star:hover { color: #e0a100; background: #f5f5fa; }
.kb-star.on { color: #e0a100; }
.kb-star.on svg { fill: currentColor; }

/* すべての道具のメニュー（iLovePDF の「すべてのPDFツール」と同じ考え：カテゴリごとの列・列ごとに同じ色）2026-10-02 */
.kb-has-mega { position: static; }
.kb-nav-btn { font: inherit; font-size: 14px; color: var(--ink); background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; padding: 20px 0; }
.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 var(--line); border-radius: 14px; padding: 28px 32px; z-index: 10; }
.kb-has-mega.open .kb-mega { display: block; }
.kb-mega-in { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 24px 28px; }
.kb-mcol p { margin: 0 0 12px; font-size: 14px; color: var(--mute); }
.kb-mcol ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.kb-mcol a { display: flex; align-items: center; gap: 12px; padding: 7px 6px; border-radius: 8px; text-decoration: none; color: var(--ink); font-size: 15px; }
.kb-mcol a:hover { background: #f5f5fa; }
.kb-mcol img { width: 26px; height: 26px; border-radius: 6px; }
.kb-nav { align-items: center; height: 60px; }
.kb-nav-btn { padding: 0; height: 60px; }
.kb-mega-in { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .kb-mega-in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.kb-facts { list-style: none; padding: 0; margin: 14px 0 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; color: var(--mute); }
.kb-facts li + li::before { content: "・"; margin-right: 18px; color: #c4c4cf; }
.kb-facts b { color: var(--ink); font-size: 16px; }
/* ナビを右寄せ（2026-10-02 チカ） */
.kb-nav { margin-left: auto; }
.kb-right { margin-left: 8px; }
/* 見出しまわりの別案 B：左に見出しと検索、右にカテゴリのタイル */
.kb-heroB { max-width: 1240px; margin: 0 auto; padding: 40px 24px 12px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 40px; align-items: center; }
.kb-heroB h1 { font-size: 40px; font-weight: 600; color: var(--ink); margin: 0; line-height: 1.3; }
.kb-heroB .kb-search { margin: 22px 0 0; max-width: none; }
.kb-heroB .kb-facts { justify-content: flex-start; }
.kb-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.kb-tiles button { width: 100%; font: inherit; font-size: 13px; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 8px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.kb-tiles button.on { border-color: var(--ink); }
.kb-tiles span.sq { width: 36px; height: 36px; border-radius: 9px; }
/* 別案 C：濃い帯の中に見出しと検索、カテゴリは色の点つきの横並び */
.kb-heroC { background: #23263a; color: #fff; padding: 44px 24px 34px; text-align: center; }
.kb-heroC h1 { font-size: 38px; font-weight: 600; margin: 0; }
.kb-heroC .kb-search { border-color: transparent; }
.kb-heroC .kb-facts { color: #c9cbe0; } .kb-heroC .kb-facts b { color: #fff; } .kb-heroC .kb-facts li + li::before { color: #6b6f8f; }
.kb-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin: 24px auto 30px; padding: 0 24px; max-width: 1200px; }
.kb-dots button { font: inherit; font-size: 15px; color: var(--ink); background: none; border: 0; border-bottom: 2px solid transparent; padding: 6px 2px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.kb-dots button.on { border-bottom-color: var(--ink); font-weight: 600; }
.kb-dots i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
@media (max-width: 900px) { .kb-heroB { grid-template-columns: 1fr; } .kb-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.kb-tiles img { border-radius: 9px; }
.kb-dots button, .kb-dots button.on { background: none; border: 0; border-radius: 0; border-bottom: 2px solid transparent; color: var(--ink); padding: 6px 2px; }
.kb-dots button.on { border-bottom-color: var(--ink); }

/* C2：カテゴリをアイコン付きの箱に／数字を帯の中の箱に（2026-10-02） */
.kb-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 26px auto 30px; padding: 0 24px; max-width: 1240px; }
.kb-chips button { font: inherit; font-size: 14px; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 9px 14px 9px 10px; cursor: pointer; display: inline-flex; align-items: center; gap: 9px; }
.kb-chips button img { width: 26px; height: 26px; border-radius: 7px; }
.kb-chips button.on { border-color: var(--ink); background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.kb-stats { list-style: none; padding: 0; margin: 22px auto 0; display: grid; grid-template-columns: repeat(4, minmax(0, 150px)); justify-content: center; gap: 12px; }
.kb-stats li { border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); border-radius: 12px; padding: 12px 8px; display: flex; flex-direction: column; gap: 2px; }
.kb-stats b { font-size: 22px; color: #fff; }
.kb-stats span { font-size: 12px; color: #c9cbe0; }
/* C3：カテゴリを色の丸いボタンに（選ぶとその色で塗る）／数字を白い札に */
.kb-cpills { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 26px auto 30px; padding: 0 24px; max-width: 1240px; }
.kb-cpills button { font: inherit; font-size: 14px; color: var(--c); background: #fff; border: 1.5px solid var(--c); border-radius: 999px; padding: 7px 16px; cursor: pointer; font-weight: 600; }
.kb-cpills button.on { background: var(--c); color: #fff; border-color: var(--c); }
.kb-tags { list-style: none; padding: 0; margin: 18px 0 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.kb-tags li { background: #fff; color: var(--ink); border-radius: 999px; padding: 6px 14px; font-size: 13px; }
.kb-tags b { font-size: 15px; }
@media (max-width: 600px) { .kb-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 8px; }
}
.kb-chips { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; gap: 8px; scrollbar-width: none; }
@media (min-width: 1200px) { .kb-chips { justify-content: center; }
}
.kb-chips button { flex: none; font-size: 13px; padding: 8px 12px 8px 8px; gap: 8px; }
.kb-chips button img { width: 24px; height: 24px; }
.kb-chips button.on { box-shadow: none; border: 2px solid var(--ink); padding: 7px 11px 7px 7px; }
/* 4つの箱の数字の行をそろえる（数字だけの「16」が低く小さく見えた・2026-10-02 チカ） */
.kb-stats b { display: block; font-size: 24px; line-height: 32px; height: 32px; font-feature-settings: "palt"; }
.kb-stats span { line-height: 18px; }
/* 4つの箱の地の色（2026-10-02 チカ「その方が目立つ」）。C2＝白い箱／C2色＝カテゴリの色を1つずつ */
.kb-stats li { background: #fff; border-color: #fff; }
.kb-stats b { color: var(--ink); }
.kb-stats span { color: var(--mute); }
.kb-stats.colored li { border-color: transparent; }
.kb-stats.colored li:nth-child(1) { background: #2F80ED; } .kb-stats.colored li:nth-child(2) { background: #2E9E5B; }
.kb-stats.colored li:nth-child(3) { background: #EE7A2E; } .kb-stats.colored li:nth-child(4) { background: #8E44AD; }
.kb-stats.colored b { color: #fff; } .kb-stats.colored span { color: rgba(255,255,255,.88); }

/* 道具のページの型（_src/kb.py・2026-10-02） */
.kb-ico { display: inline-grid; place-items: center; flex: none; border-radius: 9px; background: var(--c); }
.kb-mcol .kb-ico { border-radius: 6px; }
.kb-crumb { display: flex; justify-content: center; gap: 8px; font-size: 13px; color: var(--mute); margin-bottom: 14px; }
.kb-crumb a { text-decoration: none; }
.kb-crumb a:hover { color: var(--acc); }
.kb-rel { padding: 0; max-width: none; }
.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: var(--sub); }
.kb-foot-nav a:hover { color: var(--acc); }
.kb-foot p { margin: 0; }
@media (max-width: 760px) { .kb-sec { padding: 0 16px; margin-top: 40px; }
}
.kb-mcol small { margin-left: auto; font-size: 11px; color: var(--mute); border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; line-height: 18px; flex: none; }
.kb-mcol small { font-size: 10px; padding: 0 4px; line-height: 16px; }
.kb-mcol a { gap: 10px; }
@media (max-width: 760px) {
  .kb-nav { display: flex; margin-left: auto; 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; }
  .kb-logo { font-size: 17px; }
}
.kb-logo, .kb-nav-btn, .kb-pro { white-space: nowrap; }
@media (max-width: 380px) { .kb-logo img { width: 26px; height: 26px; } .kb-logo { gap: 7px; font-size: 16px; } .kb-nav-btn { font-size: 13px; }
}

/* ほかの道具は4枚＝4列／2列／1列で割り切る（3枚＋1枚の余りを出さない・2026-10-02） */
.kb-rel { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .kb-rel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) { .kb-rel { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}
/* 10枚＝5列×2段（パソコン）／2列×5段（タブレット・スマホ）。スマホのカードは小さく（10/6 チカ） */
.kb-rel.kb-rel10 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1000px) { .kb-rel.kb-rel10 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .kb-rel .kb-card a { padding: 14px 12px; gap: 6px; min-height: 0; }
  .kb-rel .kb-card .kb-ico { width: 34px !important; height: 34px !important; border-radius: 9px; }
  .kb-rel .kb-card .kb-ico svg { width: 20px; height: 20px; }
  .kb-rel .kb-card h3 { font-size: 15px; margin: 4px 0 0; }
  .kb-rel .kb-card p { font-size: 12px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0; }
  .kb-rel .kb-card .kb-kind { display: none; }
}
.kb-rel.kb-rel10 .kb-kind { display: none; }
.kb-rel.kb-rel10 .kb-card a { min-height: 0; }
@media (min-width: 1001px) { .kb-rel.kb-rel10 .kb-card p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } }
.kb-h1 .kb-ico { border-radius: 12px; }
@media (max-width: 760px) { .kb-h1 .kb-ico { width: 38px !important; height: 38px !important; border-radius: 9px; } .kb-h1 .kb-ico svg { width: 23px; height: 23px; }
}

/* ロゴ（マーク＋Kitbench／キットベンチ・2026-10-02 チカ B案） */
.kb-logo img { width: auto; height: 36px; display: block; }
/* 使い方から下は白い帯にして、上の道具の部分と分ける（2026-10-02 チカ）。中の箱は薄い灰色 */
.kb-lower { background: #fff; border-top: 1px solid var(--line); margin-top: 56px; padding: 8px 0 64px; }
.kb-lower .kb-sec:first-child { margin-top: 40px; }
.kb-lower .kb-steps li, .kb-lower .kb-ext, .kb-lower details, .kb-lower .kb-card a { background: var(--bg); border-color: transparent; }
.kb-lower .kb-card a:hover { border-color: #c9c9d6; }
.kb-lower .kb-ext a { background: #fff; }
/* ほかの道具は濃い灰色の帯＋白いカード（2026-10-02 チカ） */
.kb-relband { background: #e9eaf2; margin-top: 56px; padding: 8px 0 64px; }
.kb-relband .kb-sec:first-child { margin-top: 40px; }
.kb-lower:has(.kb-relband) { padding-bottom: 0; }
.kb-lower .kb-relband .kb-card a { background: #fff; border-color: transparent; }
.kb-lower .kb-relband .kb-card a:hover { border-color: #c9c9d6; }
/* ほかの道具の帯は、トップの見出しの帯と同じ紺（2026-10-02 チカ「この背景色」） */
.kb-relband { background: #23263A; }
.kb-relband h2 { color: #fff; }
/* Premium の料金ページ（2026-10-02 チカ「iLovePDF の料金ページみたいに」） */
.kb-bill { display: inline-flex; margin: 26px auto 0; background: #fff; border: 1px solid #d6d6e0; border-radius: 999px; padding: 4px; }
.kb-bill button { font: inherit; font-size: 15px; border: 0; background: none; color: var(--ink); padding: 9px 22px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.kb-bill button.on { background: var(--ink); color: #fff; }
.kb-bill small { font-size: 12px; font-weight: 600; color: #e5332a; }
.kb-bill button.on small { color: #ffb4ae; }
.kb-plans { max-width: 820px; margin: 28px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; text-align: left; }
.kb-plan { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 28px; display: flex; flex-direction: column; }
.kb-plan-name { margin: 0; font-size: 18px; font-weight: 700; color: var(--ink); }
.kb-plan-price { margin: 10px 0 18px; color: var(--mute); font-size: 15px; }
.kb-plan-price b { font-size: 40px; font-weight: 700; color: var(--ink); margin-right: 4px; }
.kb-plan ul { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; font-size: 15px; color: var(--ink); }
.kb-plan li { padding-left: 26px; position: relative; line-height: 1.6; }
.kb-plan li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 12px; height: 7px; border-left: 2.5px solid #34A160; border-bottom: 2.5px solid #34A160; transform: rotate(-45deg); }
.kb-plan-free { display: block; text-align: center; text-decoration: none; border: 1.5px solid var(--ink); color: var(--ink); border-radius: 10px; padding: 12px; font-weight: 600; }
.kb-plan-pro { background: #23263A; border-color: #23263A; }
.kb-plan-pro .kb-plan-name, .kb-plan-pro .kb-plan-price b, .kb-plan-pro ul { color: #fff; }
.kb-plan-pro .kb-plan-price { color: #c9cbe0; }
.kb-plan-pro li::before { border-color: #7fd8a0; }
.kb-plan-btn { display: block; text-align: center; text-decoration: none; box-sizing: border-box; }
.kb-plan-note { margin: 18px 0 0; font-size: 13px; color: #c9cbe0; }
.kb-plan-soon { margin: 0; color: #fff; text-align: center; padding: 12px; border: 1px dashed rgba(255,255,255,.4); border-radius: 10px; }
.kb-cmp { overflow-x: auto; }
.kb-cmp table { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--bg); border-radius: 12px; overflow: hidden; }
.kb-cmp th, .kb-cmp td { text-align: left; vertical-align: top; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.kb-cmp thead th { font-size: 13px; color: var(--mute); font-weight: 600; }
.kb-cmp thead .kb-cmp-pro { color: var(--ink); }
.kb-cmp tbody th a { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 600; white-space: nowrap; }
.kb-cmp tbody th img { border-radius: 6px; }
.kb-cmp ul { margin: 0; padding-left: 1.1em; display: grid; gap: 4px; color: var(--sub); }
.kb-cmp td:last-child ul { color: var(--ink); }
.kb-restore { margin: 18px 0 0; font-size: 14px; }
@media (max-width: 760px) { .kb-plans { grid-template-columns: 1fr; } .kb-bill button { padding: 8px 14px; } .kb-cmp table, .kb-cmp tbody, .kb-cmp tr, .kb-cmp th, .kb-cmp td { display: block; } .kb-cmp thead { display: none; } .kb-cmp tbody th { border-bottom: 0; padding-bottom: 4px; } .kb-cmp td:nth-child(2)::before { content: "無料"; } .kb-cmp td:nth-child(3)::before { content: "Premium"; } .kb-cmp td::before { display: block; font-size: 12px; color: var(--mute); margin-bottom: 4px; }
}
.kb-team { margin: 20px 0 0; font-size: 14px; color: var(--mute); }
.kb-team a { margin-left: 8px; color: var(--ink); font-weight: 600; }
/* 読み物（道具の下の説明・2026-10-02） */
.kb-guide p, .kb-guide li { font-size: 16px; line-height: 1.9; color: var(--sub); }
.kb-guide p { margin: 0 0 14px; }
.kb-guide ul { margin: 0 0 14px; padding-left: 1.3em; }
.kb-guide .kb-cmp { margin: 6px 0 14px; }
.kb-guide .kb-cmp td { color: var(--ink); }
.kb-src { font-size: 13px !important; color: var(--mute) !important; }
.kb-src a { color: var(--mute); }
/* BMIの目盛り（2026-10-02） */
.kb-scale { position: relative; width: 100%; display: flex; height: 26px; border-radius: 6px; overflow: hidden; font-size: 11px; color: #fff; margin-top: 4px; }
.kb-scale span { display: grid; place-items: center; white-space: nowrap; overflow: hidden; }
.kb-scale span:nth-child(1) { background: #3584EE; } .kb-scale span:nth-child(2) { background: #34A160; } .kb-scale span:nth-child(3) { background: #EF7E34; } .kb-scale span:nth-child(4) { background: #C0392B; }
.kb-scale i { position: absolute; top: -3px; bottom: -3px; width: 4px; margin-left: -2px; background: #23263A; border: 1px solid #fff; border-radius: 2px; }
/* 検索中は注目・お気に入りを隠す（2026-10-02 チカ） */
body.kb-searching #pickBlock, body.kb-searching #favBlock { display: none !important; }
/* Premium の状態と復元（2026-10-02） */
.kb-state { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--bg); border-radius: 12px; padding: 14px 18px; }
.kb-state p { margin: 0; flex: 1; color: var(--ink); font-weight: 600; }
.kb-state button { font: inherit; font-size: 13px; padding: 6px 12px; border-radius: 8px; border: 1px solid #d6d6e0; background: #fff; color: var(--ink); cursor: pointer; }
.kb-sec h3 { font-size: 17px; color: var(--ink); margin: 28px 0 6px; }
.kb-rs-lead { font-size: 14px; color: var(--mute); margin: 0 0 12px; }
.kb-rs { display: grid; gap: 10px; max-width: 520px; }
.kb-rs label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--mute); }
.kb-rs input { font: inherit; font-size: 16px; color: var(--ink); border: 1px solid #d6d6e0; border-radius: 8px; padding: 10px 12px; }
.kb-cmp-sec { background: #fff; color: var(--ink) !important; font-size: 14px !important; padding-top: 18px !important; }
.kb-cmp tbody th .kb-ico { flex: none; }

/* 道具の下の「使い方・読み物・よくある質問」は最初たたむ（10/4 チカ：まず触る人が多い・すぐ下に「ほかの道具」）。文章はページの中にあるので Google は読む */
.kb-fold { position: relative; max-height: 150px; overflow: hidden; }
.kb-fold::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 110px; background: linear-gradient(rgba(255,255,255,0), #fff); pointer-events: none; }
.kb-fold.open { max-height: none; }
.kb-fold.open::after { display: none; }
.kb-more-w { max-width: 980px; margin: 8px auto 48px; padding: 0 16px; text-align: center; }
.kb-more { font: inherit; font-size: 15px; font-weight: 600; padding: 12px 28px; border-radius: 999px; border: 1px solid #d6d6e0; background: #fff; color: var(--ink); cursor: pointer; }
.kb-more:hover { border-color: #9a9ab0; }

/* カードの右上のバッジ（2026-10-05）：アイコンと同じ段の右寄せ。☆（右上）にかからないよう右を空ける */
.kb-ctop { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.kb-badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; padding-right: 30px; margin-top: 2px; }
.kb-badges i { font-style: normal; font-size: 11px; font-weight: 700; line-height: 1; padding: 4px 7px; border-radius: 999px; white-space: nowrap; }
.kb-bnew { background: #e2483d; color: #fff; }
.kb-bpro { background: #1f2233; color: #fff; }
.kb-bcat { color: var(--c); background: #fff; box-shadow: inset 0 0 0 1px var(--c); }

/* トップの大きな2つの入口（2026-10-05）：カテゴリのチップの上 */
.kb-groups { display: flex; justify-content: center; gap: 10px; margin: 22px auto 0; padding: 0 16px; flex-wrap: wrap; }
.kb-groups { flex-wrap: nowrap; max-width: 520px; }
.kb-groups button { font: inherit; font-size: 15px; font-weight: 700; padding: 11px 12px; border-radius: 12px; border: 2px solid var(--ink); background: #fff; color: var(--ink); cursor: pointer; flex: 1 1 0; min-width: 0; line-height: 1.25; }
.kb-groups button.on { background: var(--ink); color: #fff; }
.kb-groups + .kb-chips { margin-top: 14px; }
.kb-chips button[hidden] { display: none; }
/* 料金ページの比較表：Premium の列を目立たせる（10/6 チカ「ただの横並び」）。スマホの各セルの見出しは data-l（言語ごと） */
.kb-cmp-plans thead .kb-cmp-pro { background: #e5332a; color: #fff; font-size: 14px; }
.kb-cmp-plans tbody td:last-child { background: #fff3f2; box-shadow: inset 2px 0 0 #e5332a, inset -2px 0 0 #e5332a; }
.kb-cmp-plans tbody tr:last-child td:last-child { box-shadow: inset 2px 0 0 #e5332a, inset -2px 0 0 #e5332a, inset 0 -2px 0 #e5332a; }
.kb-cmp-plans td:last-child ul { list-style: none; padding-left: 0; font-weight: 600; }
.kb-cmp-plans td:last-child li { position: relative; padding-left: 22px; }
.kb-cmp-plans td:last-child li::before { content: ""; position: absolute; left: 2px; top: .35em; width: 11px; height: 6px; border-left: 2.5px solid #e5332a; border-bottom: 2.5px solid #e5332a; transform: rotate(-45deg); }
.kb-cmp-plans td:nth-child(2) ul { color: var(--mute); }
@media (max-width: 760px) {
  .kb-cmp-plans td:nth-child(2)::before, .kb-cmp-plans td:nth-child(3)::before { content: attr(data-lbl); }
  .kb-cmp-plans tbody td:last-child, .kb-cmp-plans tbody tr:last-child td:last-child { box-shadow: inset 3px 0 0 #e5332a; border-radius: 0 8px 8px 0; }
  .kb-cmp-plans td:nth-child(3)::before { color: #e5332a; font-weight: 700; }
}
/* 料金ページの比較表：カテゴリの見出し（色の点＋名前・10/6） */
.kb-cmp .kb-cmp-cat { background: #fff; font-size: 13px; color: var(--mute); font-weight: 700; padding: 14px 16px 6px; box-shadow: none !important; }
.kb-cmp .kb-cmp-cat span { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--c); margin-right: 8px; vertical-align: 0; }
/* 料金の切り替えが3つになった（2026-10-07 買い切り）。スマホでは小さい字を下の段に回して幅を詰める（ドイツ語で375pxをはみ出した） */
@media (max-width: 760px) { .kb-bill { max-width: 100%; } .kb-bill button { flex-direction: column; gap: 0; padding: 6px 10px; font-size: 14px; line-height: 1.25; } .kb-bill small { font-size: 11px; } }
/* Premium のバナー（2026-10-07 チカ「デザインしたバナーに」→ 背景は E＝紺のベタ）。道具のページ（ほかの道具の手前）とトップ（すべての道具の下）。ロゴ・丸い太字（M PLUS Rounded 1c） */
.kb-proband { padding: 8px 16px 40px; }
.kb-pb { max-width: 980px; margin: 0 auto; }
.kb-pb-card { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 28px; align-items: center; padding: 36px 40px; border-radius: 22px; color: #fff;
  background: #1f2233; box-shadow: 0 18px 40px rgba(31,34,51,.22); text-align: left; }   /* 10/7 チカ：E＝紺のベタ */
.kb-pb-card::before, .kb-pb-card::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.kb-pb-card::before { width: 260px; height: 260px; right: -70px; bottom: -110px; background: rgba(255,255,255,.07); }
.kb-pb-card::after { width: 120px; height: 120px; left: 46%; top: -60px; background: rgba(255,255,255,.06); }
.kb-pb-brand { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; }
.kb-pb-brand img { height: 26px; width: auto; display: block; }
.kb-pb-brand span { font-family: "M PLUS Rounded 1c", system-ui, sans-serif; font-weight: 800; font-size: 13px; letter-spacing: .04em; padding: 3px 11px; border-radius: 999px; background: #fff; color: #e5332a; }
.kb-pb-h { margin: 0 0 16px; font-family: "M PLUS Rounded 1c", system-ui, sans-serif; font-weight: 800; font-size: 26px; line-height: 1.45; color: #fff; }
.kb-pb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.kb-pb-list li { position: relative; padding-left: 28px; font-size: 15px; line-height: 1.55; color: rgba(255,255,255,.92); }
.kb-pb-list li::before { content: ""; position: absolute; left: 0; top: .2em; width: 18px; height: 18px; border-radius: 50%; background: rgba(255,255,255,.18); }
.kb-pb-list li::after { content: ""; position: absolute; left: 5px; top: calc(.2em + 5px); width: 8px; height: 4.5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); }
.kb-pb-side { position: relative; z-index: 1; display: grid; gap: 14px; }
.kb-pb-plans { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.kb-pb-plans li { display: grid; grid-template-columns: 6.2em minmax(0, 1fr); align-items: baseline; column-gap: 10px; padding: 10px 14px; border-radius: 12px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); }
.kb-pb-plan { grid-row: span 2; align-self: center; font-size: 12px; font-weight: 700; color: rgba(255,255,255,.75); }
.kb-pb-plans b { font-family: "M PLUS Rounded 1c", system-ui, sans-serif; font-weight: 800; font-size: 22px; color: #fff; }
.kb-pb-plans small { font-size: 12px; color: rgba(255,255,255,.75); }
.kb-pb-btn { display: block; text-align: center; padding: 14px 18px; border-radius: 12px; background: #fff; color: #e5332a; font-family: "M PLUS Rounded 1c", system-ui, sans-serif; font-weight: 800; font-size: 17px; text-decoration: none; box-shadow: 0 6px 18px rgba(0,0,0,.18); transition: transform .15s; }
.kb-pb-btn:hover { transform: translateY(-1px); }
@media (max-width: 760px) { .kb-pb-card { grid-template-columns: minmax(0, 1fr); padding: 26px 20px; gap: 20px; } .kb-pb-h { font-size: 20px; } }
/* トップの作り直し（2026-10-07 仮想客チェック）：カテゴリの見出し・拡張機能の区切り・スマホは細い行・数字の箱は1行・下の帯の言語 */
.kb-cathead { grid-column: 1 / -1; list-style: none; display: flex; align-items: center; gap: 10px; margin: 14px 0 -4px; font-size: 17px; font-weight: 700; color: var(--ink); }
.kb-cathead span { width: 12px; height: 12px; border-radius: 4px; background: var(--c); }
.kb-cathead:first-child { margin-top: 0; }
.kb-searching .kb-cathead, .kb-cathead[hidden] { display: none; }
#extBlock[hidden], #extBlock[hidden] + #extGrid { display: none; }
.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; }
@media (max-width: 600px) {
  .kb-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 0 4px; }
  .kb-stats li { padding: 8px 4px; min-width: 0; overflow: hidden; }
  .kb-stats b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .kb-stats b { font-size: 16px; line-height: 22px; height: 22px; }
  .kb-stats span { font-size: 10.5px; line-height: 14px; }
  /* スマホのカード＝アイコン・名前・説明1行の細い行（最初の画面に道具が出るように） */
  .kb-home .kb-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 0 16px 40px; }
  .kb-home .kb-card a { min-height: 0; padding: 12px 44px 12px 12px; display: grid; grid-template-columns: 42px minmax(0, 1fr); column-gap: 12px; align-items: center; }
  .kb-home .kb-card .kb-ctop { grid-row: span 2; display: block; }
  .kb-home .kb-card .kb-badges, .kb-home .kb-card .kb-kind { display: none; }
  .kb-home .kb-card h3 { margin: 0; font-size: 16px; }
  .kb-home .kb-card p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .kb-home .kb-mini .kb-card a { padding-right: 44px; }
  .kb-home .kb-card .kb-star { top: 50%; transform: translateY(-50%); right: 6px; }
}
/* カテゴリのチップ：PC では折り返して全部見せる（真ん中寄せで横にはみ出すと左端が切れて戻れなかった・10/7 仮想客） */
@media (min-width: 900px) { .kb-chips { flex-wrap: wrap; justify-content: center; overflow: visible; } }
/* スマホの見出しを2行に収めて、道具を早く見せる */
@media (max-width: 600px) { .kb-heroC h1 { font-size: 26px; line-height: 1.35; } .kb-heroC { padding-top: 28px; padding-bottom: 24px; } }

/* ほかの道具のカードのチップ（10/7）：☆が無いので右を空けない */
.kb-rel .kb-badges { padding-right: 0; }

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

/* 拡張機能だけに絞った時（10/7）：Web版の見出し・最近使った・お気に入り・種類のチップは隠す */
.kb-extonly #allH, .kb-extonly #recentBlock, .kb-extonly #favBlock, .kb-extonly #recent, .kb-extonly #fav, .kb-extonly #pickBlock { display: none; }

/* 道具の下の「Premium だとこうなる」（10/7）：メモ帳のチラ見せと同じ紺の枠 */
.kb-tease { max-width: 980px; margin: 12px auto 0; }
.kb-tease p { margin: 0; padding: 10px 12px; border: 1px solid #1f2233; border-radius: 10px; background: #fff; font-size: 13px; line-height: 1.7; color: var(--ink); text-align: left; }
.kb-tease .kb-bpro { font-style: normal; font-size: 11px; font-weight: 700; padding: 3px 7px; border-radius: 999px; margin-right: 6px; }
.kb-tease a { display: inline-block; margin-left: 4px; padding: 4px 12px; border-radius: 8px; background: #1f2233; color: #fff; text-decoration: none; font-weight: 700; }

/* 料金ページの比較表の下の申し込みの段（10/7 C 案）。年払いを紺に */
.kb-cta3 h2 { text-align: center; }
.kb-cta3-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; gap: 12px; max-width: 860px; margin: 0 auto; }
.kb-cta3-b { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 16px 12px; border: 2px solid #1f2233; border-radius: 14px; background: #fff; color: #1f2233; text-decoration: none; text-align: center; }
.kb-cta3-b small { font-size: 13px; font-weight: 700; }
.kb-cta3-b b { font-size: 24px; line-height: 1.2; }
.kb-cta3-b span { font-size: 12px; opacity: .75; }
.kb-cta3-b i { font-style: normal; font-size: 11px; font-weight: 700; margin-top: 6px; padding: 3px 8px; border-radius: 999px; background: #e5332a; color: #fff; }
.kb-cta3-b.on { background: #1f2233; color: #fff; }
.kb-cta3-b:hover { box-shadow: 0 4px 14px rgba(31,34,51,.18); }
@media (max-width: 760px) { .kb-cta3-row { grid-auto-flow: row; grid-template-columns: 1fr; } }

/* アプリとして入れる案内への一行（10/8） */
.kb-applink { text-align: center; margin: 10px auto 0; font-size: 13px; }
.kb-applink a { color: var(--sub); }