/* ツールキットの目次（/tools/）と、各ツールのページ（/tools/<id>/）。テーマでだけ使う（theme/springl/parts/toolkit.php）。
   置き場は試作の assets/（デザインの正を1か所にするため）。theme/sync-assets.js が写す。
   **目次は「実務から探す」と同じ組み方**（.practice・.pgroup は prototype.css）。ここに書くのはツールの項目と、
   目的別の並び、本体を入れる枠だけ。色・形・書体は tokens.css だけを参照する */

.tkhead__n {
  margin: var(--sp-s5) 0 0;
  font-size: calc(14px * var(--sp-scale)); color: var(--sp-text);
}
.tkhead__n b {
  font-family: var(--sp-font-display); font-size: calc(20px * var(--sp-scale));
  color: var(--sp-ink); margin-right: 2px; font-variant-numeric: tabular-nums;
}
.tkhead__sub {
  margin: var(--sp-s3) 0 0;
  font-family: var(--sp-font-mono); font-size: var(--sp-fs-meta);
  letter-spacing: var(--sp-ls-label); color: var(--sp-text-soft);
}
.tkhead__m { margin-top: var(--sp-s4); }
.tkgroup__sub { margin: var(--sp-s2) 0 0; font-size: calc(13px * var(--sp-scale)); line-height: 1.7; color: var(--sp-text-soft); }

/* ツールの項目。**箱にしない**（写真の無い一覧は罫線。.pcard と同じ） */
.tkcard {
  display: block;
  padding: var(--sp-s5) 0;
  border-top: 1px solid var(--sp-line);
  transition: border-color 0.2s var(--sp-ease);
}
.tkcard:hover { border-top-color: var(--sp-link); }
.pgroup__list > .tkcard:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 700px) { .pgroup__list > .tkcard:nth-child(2) { border-top: 0; padding-top: 0; } }
.tkcard__t {
  font-size: calc(17px * var(--sp-scale)); font-weight: 700; line-height: 1.5;
  color: var(--sp-ink); margin: 0;
  transition: color 0.2s var(--sp-ease);
}
.tkcard:hover .tkcard__t { color: var(--sp-link); }
.tkcard__new {
  display: inline-block; margin-left: var(--sp-s2); padding: 1px 6px; vertical-align: 2px;
  font-family: var(--sp-font-mono); font-size: calc(10.5px * var(--sp-scale)); font-weight: 400; letter-spacing: 0.06em;
  color: var(--sp-on-link); background: var(--sp-link); border-radius: var(--sp-radius-pill);
}
.tkcard__sub {
  margin: var(--sp-s1) 0 0;
  font-family: var(--sp-font-mono); font-size: calc(11.5px * var(--sp-scale));
  letter-spacing: 0.02em; color: var(--sp-text-soft);
}
.tkcard__d { margin: var(--sp-s2) 0 0; font-size: calc(13.5px * var(--sp-scale)); line-height: 1.8; color: var(--sp-text); }
.tkcard__m {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-s1) var(--sp-s2);
  margin: var(--sp-s2) 0 0; font-size: calc(12.5px * var(--sp-scale)); line-height: 1.6; color: var(--sp-text-soft);
}

/* 目的からツールを選ぶ。段の番号（01・02…）で「この順に使う」を見せる */
.tkpath-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.tkpath { padding: var(--sp-s5) 0; border-top: 1px solid var(--sp-line-strong); }
.tkpath:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 960px) {
  .tkpath { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 0 var(--sp-s8); }
  .tkpath__steps { grid-column: 2; grid-row: 1 / span 2; }
}
.tkpath__t { font-size: calc(15px * var(--sp-scale)); font-weight: 700; line-height: 1.6; color: var(--sp-ink); margin: 0; }
.tkpath__d { margin: var(--sp-s1) 0 var(--sp-s3); font-size: calc(13px * var(--sp-scale)); line-height: 1.7; color: var(--sp-text-soft); }
.tkpath__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-s2); }
.tkpath__steps a {
  display: inline-flex; align-items: center; gap: var(--sp-s2);
  min-height: 32px; padding: 4px 12px 4px 6px;
  font-size: calc(13px * var(--sp-scale)); font-weight: 700; color: var(--sp-ink);
  background: var(--sp-card); border: 1px solid var(--sp-line-strong); border-radius: var(--sp-radius-pill);
}
.tkpath__steps a:hover { border-color: var(--sp-link); color: var(--sp-link); }
.tkpath__no {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 4px;
  font-family: var(--sp-font-mono); font-size: calc(10.5px * var(--sp-scale)); font-weight: 400;
  color: var(--sp-text-soft); background: var(--sp-blue-wash); border-radius: var(--sp-radius-pill);
}

/* ツール本体の枠。高さは中身に合わせる（parts/toolkit.php のスクリプト）。最初の高さは読み込み中の目安 */
.tkapp { padding-bottom: var(--sp-s6); }
.tkapp__frame {
  display: block; width: 100%; height: 900px; border: 0;
  background: var(--sp-bg); border-radius: var(--sp-radius-lg);
}
.tkapp__note { margin: var(--sp-s3) 0 0; font-size: calc(12.5px * var(--sp-scale)); color: var(--sp-text-soft); }
.tkapp .gate { margin: 0; }
/* 会員でない人のツールのページ: 図の見本と登録の案内を並べる（2026-10-11 点検「何が手に入るか伝わりにくい」「案内の下が大きく空く」） */
.tkapp:has(.tkapp__peek) { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-s5); align-items: start; }
@media (min-width: 960px) { .tkapp:has(.tkapp__peek) { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.tkapp__peek { margin: 0; }
.tkapp__peek img { display: block; width: 100%; height: auto; border-radius: var(--sp-radius-lg); background: #ffffff; border: 1px solid var(--sp-line); }
.tkapp__peek figcaption { margin-top: var(--sp-s2); font-size: calc(12.5px * var(--sp-scale)); color: var(--sp-text-soft); }
/* ページから印刷したときは、案内だけを出す（ツールは枠の中の「印刷」から刷る・parts/toolkit.php） */
.tkapp__print { display: none; }
@media print {
  .head, .topics, .menu, .search, .foot, #related, .tkapp__note, .tkapp__frame, .totop, .skip, .stamp { display: none !important; }
  .tkapp__print { display: block; margin: var(--sp-s4) 0 0; font-size: 11pt; }
}
.tkrel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--sp-s6); }
@media (min-width: 700px) { .tkrel { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .tkrel { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* --- 目次のカードと絞り込み（2026-10-11 編集長のご依頼「CEHub のツールの TOP のようにカード形式、上部のラベルで絞り込む」）---
   カードは記事のカード（.cards・.card。prototype.css）をそのまま使う。写真はツールの図（apps/toolkit/thumbs/・theme/make-toolkit-thumbs.js）。
   ラベルは大分類ごとに1行。大分類のラベルは英語と日本語の2段で、押すとその分類の全部 */
.tkf { margin: 0 0 var(--sp-s5); }
/* 上の段: 大分類のタブ（下線で選んでいるものを示す）。狭い幅では横に流す */
.tkf__tabs {
  display: flex; gap: var(--sp-s1); border-bottom: 1px solid var(--sp-line-strong);
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.tkf__tabs::-webkit-scrollbar { display: none; }
.tkf__tab {
  flex: none; display: inline-flex; align-items: baseline; gap: var(--sp-s2);
  min-height: 44px; padding: var(--sp-s3) var(--sp-s4) calc(var(--sp-s3) - 2px);
  font: inherit; font-size: calc(14px * var(--sp-scale)); font-weight: 700; color: var(--sp-text-soft);
  background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px; cursor: pointer; white-space: nowrap;
}
.tkf__tab .tkf__en { font-family: var(--sp-font-display); letter-spacing: -0.01em; }
.tkf__tab .tkf__ja { font-weight: 400; font-size: calc(12px * var(--sp-scale)); }
.tkf__tab:hover { color: var(--sp-ink); }
.tkf__tab[aria-pressed="true"] { color: var(--sp-ink); border-bottom-color: var(--sp-ink); }
@media (hover: none) { .tkf__tab:hover { color: var(--sp-text-soft); } .tkf__tab[aria-pressed="true"]:hover { color: var(--sp-ink); } }
/* 下の段: 選んだ大分類の中の項目 */
.tkf__items { display: flex; flex-wrap: wrap; gap: var(--sp-s2); padding-top: var(--sp-s4); }
.tkf__items[hidden] { display: none; }
.tkf__chip {
  display: inline-flex; align-items: center; gap: var(--sp-s2);
  min-height: 34px; padding: 4px 8px 4px 14px;
  font: inherit; font-size: calc(13px * var(--sp-scale)); font-weight: 700; color: var(--sp-ink);
  background: var(--sp-card); border: 1px solid var(--sp-line-strong); border-radius: var(--sp-radius-pill); cursor: pointer;
}
.tkf__chip:hover { border-color: var(--sp-link); color: var(--sp-link); }
@media (hover: none) { .tkf__chip:hover { border-color: var(--sp-line-strong); color: var(--sp-ink); } }
.tkf__chip[aria-pressed="true"] { background: var(--sp-blue); border-color: var(--sp-blue); color: var(--sp-on-dark); }
.tkf__n {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px;
  font-family: var(--sp-font-mono); font-size: calc(11px * var(--sp-scale)); font-weight: 400;
  color: var(--sp-text-soft); background: var(--sp-blue-wash); border-radius: var(--sp-radius-pill);
}
.tkf__tab .tkf__n { align-self: center; }
.tkf__tab[aria-pressed="true"] .tkf__n { color: var(--sp-on-dark); background: var(--sp-blue); }
.tkf__chip[aria-pressed="true"] .tkf__n { color: var(--sp-ink); background: var(--sp-card); }
/* 選んだ結果（件数）。読み上げにも出す（role="status"） */
.tkf__status { margin: 0 0 var(--sp-s5); font-size: calc(13px * var(--sp-scale)); font-weight: 700; color: var(--sp-text-soft); }
.tkf__empty { margin: var(--sp-s5) 0 0; color: var(--sp-text-soft); }
.tkc[hidden] { display: none; }
.tkc__thumb { aspect-ratio: 16 / 10; background: #ffffff; }
.tkc__thumb > img { object-fit: contain; }
.tkc__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-s2); margin: 0; }
.tkc__lock {
  display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px;
  font-family: var(--sp-font-mono); font-size: calc(11px * var(--sp-scale)); letter-spacing: 0.04em;
  color: var(--sp-text-soft); border: 1px solid var(--sp-line-strong); border-radius: var(--sp-radius-pill);
}
.tkc__d { margin: var(--sp-s2) 0 0; font-size: calc(13px * var(--sp-scale)); line-height: 1.75; color: var(--sp-text); }
.tkpaths { padding-top: 0; }
/* 実務の札は長い名前（サステナブルメディアプロモーション）があるので、札の中で折り返す（切らない） */
/* 実務の札は1行に収める（2026-10-11 編集長のご指摘「ラベルが2行になって崩れて見える」）。
   いちばん長い「サステナブルメディアプロモーション」（17字）が、4列のカード（約 230px）に文字1.15倍でも入る大きさにした。
   それでも入らない幅（英語ページの長い名前など）では、札の中で折る */
.tkc__meta .tag { font-size: calc(10.5px * var(--sp-scale)); letter-spacing: 0; white-space: normal; max-width: 100%; text-align: left; line-height: 1.4; height: auto; min-height: 22px; padding: 2px 7px; }
html[data-sp-fontsize="large"] .tkc__meta .tag { font-size: calc(10px * var(--sp-scale)); }   /* 1.15倍では 10.5px だと 2px 足りなかった（4列・900／1180px） */

/* 目次の説明文の「ご相談はこちらから」（お問い合わせへ。2026-10-11 編集長のご依頼） */
.ihead__lede a { color: var(--sp-link); text-decoration: underline; text-underline-offset: 3px; padding-block: 3px; }   /* 押せる高さを 24px 以上に */
.ihead__lede a:hover { text-decoration-thickness: 2px; }

/* 目次: 頭（件数）と「実務から探す」の間を詰める（2026-10-11 編集長のご指摘「スペースが空きすぎ」。.ihead の下 40px と .sec の上 72px が足されていた） */
.tkindex { margin-top: var(--sp-s5); }
/* 会員でない人: 件数の下の案内（.gate）も上を詰める */
.ihead + .wrap > .gate { margin-top: 0; }