:root{
  --bg:#ffffff;
  --fg:#111111;
  --sub:#666666;
  --muted:#777777;
  --border:#e0e0e0;
  --radius:10px;
  --font:"YuGothic","Yu Gothic",system-ui,-apple-system,BlinkMacSystemFont,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji";
}

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

body{
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font);
  line-height:1.8;
}

.container{
  max-width:720px;
  margin:0 auto;
  padding:40px 18px 32px;
}

header{ margin-bottom:24px; }

h1{
  font-size:26px;
  font-weight:600;
  margin:0;
}

/* ================================
 * ヘッダーロゴ
 * ============================== */
.site-title{
  display:inline-flex;
  align-items:center;
  gap:10px;
}

.site-title h1{ margin:0; }

.site-logo{
  height:38px;
  width:auto;
  display:block;
  margin:0;
}

.subtitle{
  margin:4px 0 0;
  font-size:13px;
  color:var(--sub);
}

/* インラインナビ */
.nav-inline{
  margin-top:6px;
  font-size:12px;
  color:var(--sub);
}
.nav-inline a{
  color:inherit;
  text-decoration:none;
  padding:2px 4px;
  border-radius:6px;
}
.nav-inline a:hover{ background:#f5f5f5; }
.nav-inline .sep{ color:#ccc; }

.block{
  margin-bottom:26px;
  padding-bottom:18px;
  border-bottom:1px solid var(--border);
}
.block:last-of-type{ border-bottom:none; }

h2{
  font-size:15px;
  margin:0 0 8px;
  font-weight:600;
}

h3{
  font-size:15px;
  font-weight:500;
  margin:18px 0 8px;
  color:var(--muted);
  letter-spacing:.3px;
}

.category-desc{
  font-size:.85rem;
  color:var(--muted);
  margin:4px 0 8px;
  line-height:1.5;
}

.small{ margin-top:2px; }

/* 薄いテキスト */
.muted{
  color:var(--sub);
  opacity:.9;
}

a{
  color:inherit;
  text-decoration:underline;
  text-underline-offset:2px;
}
a:hover{ background:#f5f5f5; }

footer{
  margin-top:20px;
  font-size:11px;
  color:var(--sub);
  text-align:left;
}

/* フォーム用 */
.input,
.textarea{
  width:100%;
  max-width:640px;
  padding:8px 10px;
  border:1px solid var(--border);
  border-radius:8px;
  font-size:14px;
  font-family:var(--font);
  background:#fff;
}
.textarea{
  min-height:180px;
  resize:vertical;
}

/* ボタン */
.btn-primary{
  display:inline-block;
  margin-top:4px;
  padding:8px 18px;
  border:none;
  border-radius:8px;
  background:#111111;
  color:#ffffff;
  font-size:13px;
  cursor:pointer;
  text-decoration:none;
}
.btn-primary:hover{ opacity:.9; }

/* ====== ツール表示（白ベースを崩さない） ====== */
.tool-search{ margin-top:8px; }
.tool-search-meta{
  margin-top:6px;
  display:flex;
  gap:10px;
  align-items:center;
}

.tool-pins{
  margin-top:10px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

/* “pill” は下線を消して、境界線だけ（白ベース維持） */
.pill{
  display:inline-flex;
  align-items:center;
  padding:5px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  font-size:12px;
  text-decoration:none;
  line-height:1.5;
  background:#fff;
}
.pill:hover{ background:#f5f5f5; }

.tool-cat-grid{
  margin-top:12px;
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}

.tool-cat-card{
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:12px 12px 10px;
  background:#fff;
}

.tool-cat-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:6px;
}

.tool-cat-title{
  font-size:13px;
  font-weight:600;
  line-height:1.3;
}

.tool-cat-count{
  font-weight:500;
  color:var(--muted);
}

.tool-cat-hint{
  font-size:12px;
  color:var(--muted);
  line-height:1.4;
  margin-top:2px;
}

.tool-more{
  border:1px solid var(--border);
  background:#fff;
  border-radius:999px;
  padding:5px 10px;
  font-size:12px;
  cursor:pointer;
  white-space:nowrap;
}
.tool-more:hover{ background:#f5f5f5; }

.list{
  list-style:none;
  margin:0;
  padding:0;
  font-size:13px;
}
.list li{ margin-bottom:14px; }
.list.compact li{ margin-bottom:10px; }

.tool-hidden{
  margin-top:8px;
  padding-top:8px;
  border-top:1px dashed var(--border);
}

/* 全件（長い） */
.tool-all{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--border);
}
.tool-all summary{
  cursor:pointer;
  font-size:13px;
  color:var(--fg);
  user-select:none;
  list-style:none;
}
.tool-all summary::-webkit-details-marker{ display:none; }
.tool-all summary::before{
  content:"▶";
  display:inline-block;
  margin-right:6px;
  color:var(--muted);
  transform:translateY(-1px);
}
.tool-all[open] summary::before{ content:"▼"; }

.tool-grid{
  margin-top:12px;
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}

.tool-card{
  display:block;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:10px 10px 9px;
  text-decoration:none;
  background:#fff;
}
.tool-card:hover{ background:#f5f5f5; }

.tool-card-title{
  font-size:13px;
  font-weight:600;
  margin:0 0 4px;
}

.tool-card-desc{
  font-size:12px;
  color:var(--muted);
  line-height:1.5;
  margin:0 0 6px;
}

.tool-card-meta{
  font-size:11px;
  color:var(--muted);
}

/* 寄付ブロック */
.donate-block{ font-size:13px; }

.donate-buttons{
  margin-top:8px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.donate-buttons a{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid var(--border);
  font-size:12px;
  text-decoration:none;
  line-height:1.6;
  background:#fff;
}
.donate-buttons a:hover{ background:#f5f5f5; }

/* ====== レスポンシブ（白ベース維持） ====== */
/* 600px〜：カテゴリカード 2列 / 全件カード 2列 */
@media (min-width: 600px){
  .tool-cat-grid{ grid-template-columns:1fr 1fr; }
  .tool-grid{ grid-template-columns:1fr 1fr; }
}

/* 900px〜：全件カード 3列（ただしcontainer幅が720なので実質2〜3の間） */
@media (min-width: 900px){
  .tool-grid{ grid-template-columns:1fr 1fr 1fr; }
}