/* list.css — ページ種別固有スタイル。base.css と併用 */
/* 本文ラッパ・パンくず */
.page{max-width:960px;margin:0 auto;padding:24px 20px 72px}
.breadcrumb{display:flex;gap:6px;flex-wrap:wrap;font-size:11.5px;color:var(--sub);list-style:none;margin-bottom:18px}
.breadcrumb a{color:var(--sub);text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}
.breadcrumb li+li::before{content:"›";margin-right:6px;color:var(--line)}
.page-head{margin-bottom:26px}
.page-head h1{
  font-family:var(--font-display);font-weight:900;font-size:26px;line-height:1.5;
  color:var(--navy);
}
.page-head p{font-size:14px;color:var(--sub);margin-top:8px;max-width:40em}
/* カテゴリ絞り込みナビ */
.cat-nav{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.cat-nav a{
  font-size:12px;font-weight:700;color:var(--teal);text-decoration:none;
  background:var(--card);border:1px solid var(--line);border-radius:99px;padding:6px 14px;
  transition:background .15s ease, color .15s ease;
}
.cat-nav a:hover{background:var(--teal-soft)}
.cat-nav a.on{background:var(--teal);border-color:var(--teal);color:#fff}
/* 記事カード */
.a-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px}
@media (max-width:820px){.a-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.a-grid{grid-template-columns:1fr}}
.a-card{
  display:flex;flex-direction:column;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  text-decoration:none;color:var(--ink);box-shadow:var(--shadow);
  transition:transform .15s ease, box-shadow .15s ease;
}
a.a-card:hover{transform:translateY(-3px);box-shadow:0 8px 22px rgba(22,50,79,.14)}
.a-card.soon{opacity:.72}
.a-card .thumb{
  aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--teal-soft),#D8E9F2);font-size:40px;
}
.a-card .body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:7px;flex:1}
.a-card .cat{
  align-self:flex-start;font-size:10.5px;font-weight:700;letter-spacing:.08em;
  color:var(--teal);background:var(--teal-soft);border-radius:99px;padding:2px 10px;
}
.a-card .ttl{
  font-family:var(--font-display);font-weight:700;font-size:15.5px;
  color:var(--navy);line-height:1.55;
}
a.a-card:hover .ttl{color:var(--teal)}
.a-card .excerpt{
  font-size:12.5px;color:var(--sub);
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.a-card .meta{font-size:11px;color:var(--sub);margin-top:auto;padding-top:4px}
/* 診断への導線 */
.tool-banner{
  margin-top:36px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:24px 22px;text-align:center;
}
.tool-banner .tb-title{
  font-family:var(--font-display);font-weight:900;font-size:18px;color:var(--navy);line-height:1.5;
}
.tool-banner .tb-desc{font-size:13px;color:var(--sub);margin:8px auto 16px;max-width:36em}
.cta-btn{
  display:inline-block;text-align:center;background:var(--orange);color:#fff;text-decoration:none;
  font-family:var(--font-display);font-weight:700;font-size:15px;
  padding:13px 34px;border-radius:99px;
  box-shadow:0 4px 0 var(--orange-dark);
  transition:transform .1s ease, box-shadow .1s ease;
}
.cta-btn:hover{transform:translateY(2px);box-shadow:0 2px 0 var(--orange-dark)}
/* 404ページ */
.nf{text-align:center;padding:36px 0 4px}
.nf .nf-code{font-family:var(--font-display);font-weight:900;font-size:64px;line-height:1;color:var(--teal)}
.nf h1{font-family:var(--font-display);font-weight:900;font-size:24px;color:var(--navy);margin-top:12px}
.nf p{font-size:14px;color:var(--sub);margin:14px auto 0;max-width:36em}
.nf .nf-links{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-top:20px}
.nf .nf-links a{color:var(--teal);font-weight:700;font-size:13.5px}
/* フッター余白の上書き(トップ/一覧のみ) */
.site-footer .ft-inner{max-width:960px;margin:0 auto;padding:44px 20px 32px}