@charset "UTF-8";
/* ============================================================
   tools-hub.css — iseeit.jp ツール一覧ハブ／ナビページ共通
   ルート要素に class="thb" を付けた内側だけに効く。
   既存のサイト共通CSSと衝突しないよう、全セレクタに thb- を冠する。
   ============================================================ */

.thb {
  /* 通帳の貸借になぞらえた2色。左＝順算（藍）／右＝逆算（臙脂） */
  --thb-ink:        #16242e;
  --thb-ink-soft:   #5c6d75;
  --thb-ink-faint:  #8b9aa0;
  --thb-paper:      #fbfbf8;
  --thb-rule:       #cbd6d2;
  --thb-rule-firm:  #8fa5a0;
  --thb-fwd:        #1f5c73;
  --thb-rev:        #7e2b36;
  --thb-fwd-tint:   #eef3f6;
  --thb-rev-tint:   #f8eef0;

  --thb-serif: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", serif;
  --thb-sans:  "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif;

  --thb-step: 1.6rem;

  max-width: 54rem;
  margin: 0 auto;
  padding: 0 1.1rem 4rem;
  color: var(--thb-ink);
  background: var(--thb-paper);
  font-family: var(--thb-sans);
  font-size: 1rem;
  line-height: 1.8;
  text-align: left;
}

.thb *,
.thb *::before,
.thb *::after { box-sizing: border-box; }

/* ---------- 見出し ---------- */

.thb-head {
  padding: 2.6rem 0 1.4rem;
  border-bottom: 2px solid var(--thb-rule-firm);
}

.thb-head__title {
  margin: 0;
  font-family: var(--thb-serif);
  font-size: 2.1rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: .04em;
}

.thb-head__lead {
  margin: .7rem 0 0;
  max-width: 34em;
  color: var(--thb-ink-soft);
  font-size: .95rem;
}

.thb-head__count {
  margin: .5rem 0 0;
  color: var(--thb-ink-faint);
  font-size: .82rem;
  font-variant-numeric: tabular-nums;
}

/* ---------- 目的から探す ---------- */

.thb-ask { margin: var(--thb-step) 0 2.4rem; }

.thb-ask__title {
  margin: 0 0 .7rem;
  font-family: var(--thb-serif);
  font-size: 1.05rem;
  font-weight: 600;
}

.thb-ask__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 3px solid var(--thb-rule-firm);
}

.thb-ask__item + .thb-ask__item { border-top: 1px solid var(--thb-rule); }

.thb-ask__link {
  display: block;
  padding: .6rem 0 .6rem 1rem;
  color: var(--thb-ink);
  font-family: var(--thb-serif);
  font-size: 1.02rem;
  text-decoration: none;
}

.thb-ask__link:hover,
.thb-ask__link:focus-visible { background: var(--thb-fwd-tint); color: var(--thb-fwd); }

/* ---------- セクション ---------- */

.thb-sec { margin-top: 2.8rem; }

.thb-sec__title {
  margin: 0;
  padding-bottom: .35rem;
  border-bottom: 1px solid var(--thb-rule-firm);
  font-family: var(--thb-serif);
  font-size: 1.32rem;
  font-weight: 600;
  letter-spacing: .03em;
}

.thb-sec__lead {
  margin: .6rem 0 1rem;
  max-width: 36em;
  color: var(--thb-ink-soft);
  font-size: .9rem;
  line-height: 1.75;
}

/* 順逆ペアの列見出し。ペアを含むセクションにのみ出す */
.thb-cols {
  display: grid;
  grid-template-columns: 1fr 2.6rem 1fr;
  align-items: end;
  margin-bottom: .2rem;
  font-size: .8rem;
  line-height: 1.5;
}

.thb-cols__fwd { color: var(--thb-fwd); }
.thb-cols__rev { color: var(--thb-rev); }

.thb-cols__fwd,
.thb-cols__rev { padding-bottom: .3rem; border-bottom: 2px solid currentColor; }

/* ---------- 一覧 ---------- */

.thb-rows {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--thb-rule);
}

.thb-row { border-bottom: 1px solid var(--thb-rule); }

/* 単体 */
.thb-row--solo .thb-item { padding: .85rem .2rem; }

/* 順逆ペア：左右対向 */
.thb-row--pair {
  display: grid;
  grid-template-columns: 1fr 2.6rem 1fr;
}

.thb-row--pair .thb-item { padding: .85rem .9rem; }
.thb-row--pair .thb-item--fwd { background: var(--thb-fwd-tint); }
.thb-row--pair .thb-item--rev { background: var(--thb-rev-tint); }

.thb-gutter {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--thb-ink-faint);
  font-size: .95rem;
}

.thb-gutter::before {
  content: "⇄";
  display: block;
}

/* ペアの関係を1行で */
.thb-rel {
  grid-column: 1 / -1;
  margin: 0;
  padding: .45rem .2rem .7rem;
  color: var(--thb-ink-soft);
  font-size: .8rem;
  line-height: 1.6;
}

/* ---------- 各項目 ---------- */

.thb-item { display: block; }

.thb-item__link {
  color: var(--thb-ink);
  font-size: 1.02rem;
  font-weight: 600;
  text-decoration: none;
  text-underline-offset: .22em;
}

.thb-item__link:hover,
.thb-item__link:focus-visible { text-decoration: underline; }

.thb-item--fwd .thb-item__link:hover { color: var(--thb-fwd); }
.thb-item--rev .thb-item__link:hover { color: var(--thb-rev); }

.thb-item__short {
  margin: .15rem 0 .35rem;
  color: var(--thb-ink-soft);
  font-size: .88rem;
  line-height: 1.65;
}

.thb-item__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem;
  color: var(--thb-ink-faint);
  font-size: .76rem;
  line-height: 1.4;
}

.thb-kind {
  padding: .05rem .4rem;
  border: 1px solid var(--thb-rule-firm);
  color: var(--thb-ink-soft);
}

.thb-level { letter-spacing: .12em; }

.thb-date { font-variant-numeric: tabular-nums; }

/* ---------- 逆引きナビへの導線（セクション先頭の特別扱い） ---------- */

.thb-row--lead {
  background: #fff;
  border-bottom: 2px solid var(--thb-rule-firm);
}

.thb-row--lead .thb-item__link { font-family: var(--thb-serif); font-size: 1.12rem; }

/* ---------- アクセシビリティ ---------- */

.thb :focus-visible {
  outline: 2px solid var(--thb-fwd);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .thb * { transition: none !important; animation: none !important; }
}

/* ---------- 狭い画面：ペアを縦に積む ---------- */

@media (max-width: 34rem) {
  .thb { font-size: .97rem; }
  .thb-head__title { font-size: 1.72rem; }

  .thb-cols { grid-template-columns: 1fr; gap: 0; }
  .thb-cols__fwd,
  .thb-cols__rev { border-bottom: none; padding-bottom: 0; }
  .thb-cols__rev { display: none; }

  .thb-row--pair { grid-template-columns: 1fr; }

  .thb-row--pair .thb-item { padding: .8rem .75rem; }
  .thb-row--pair .thb-item--fwd { border-left: 3px solid var(--thb-fwd); }
  .thb-row--pair .thb-item--rev { border-left: 3px solid var(--thb-rev); }

  .thb-gutter { height: 1.5rem; }
  .thb-gutter::before { content: "⇅"; }

  .thb-rel { padding: .4rem .75rem .65rem; }
}