/* 施工事例の絞り込み・ハブ */

.cases-page .case-hero{padding-block:var(--space-8) var(--space-6);border-bottom:0}
.cases-page .case-hero h1{font-size:clamp(2.2rem,6vw,4.2rem)}
.cases-page .case-hero .lede{margin-bottom:0}
.cases-page .case-card a{text-decoration:none}
.cases-page .case-card h3 a{display:block}
.cases-page .case-card h3 a:hover,
.cases-page .case-card h3 a:focus-visible{color:var(--color-accent-dark)}
.cases-page .tag{text-decoration:none}
.cases-page a.tag:hover,
.cases-page a.tag:focus-visible{border-color:var(--color-accent-dark);color:var(--color-accent-dark)}

.cases-filter-wrap{
  border-block:var(--rule);
  background:var(--color-page);
}
.cases-filter{
  display:grid;
  gap:var(--space-5);
  padding-block:var(--space-6);
}
.cases-filter-row{
  display:grid;
  grid-template-columns:4.5rem minmax(0,1fr);
  gap:var(--space-4);
  align-items:start;
}
.cases-filter-label{
  margin:0;
  padding-top:.7rem;
  font-size:var(--text-sm);
  font-weight:800;
  letter-spacing:.08em;
  color:var(--color-accent-dark);
  white-space:nowrap;
}
.cases-chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-2);
  min-width:0;
}
.cases-chip-row--scroll{
  flex-wrap:nowrap;
  overflow-x:auto;
  padding-bottom:var(--space-1);
  scrollbar-width:thin;
}
a.cases-chip{text-decoration:none;color:var(--color-ink)}
.cases-chip{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  min-height:44px;
  padding:0 var(--space-4);
  border:var(--rule);
  border-radius:99rem;
  background:var(--color-paper);
  color:var(--color-ink);
  font-weight:700;
  line-height:1;
  white-space:nowrap;
  transition:background-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out);
}
.cases-chip:hover,
.cases-chip:focus-visible{
  border-color:var(--color-accent-dark);
  color:var(--color-accent-dark);
}
.cases-chip:active{background:var(--color-paper-3)}
a.cases-chip[aria-current="page"]{
  background:var(--color-ink);
  border-color:var(--color-ink);
  color:var(--color-page);
}
a.cases-chip[aria-current="page"]:hover,
a.cases-chip[aria-current="page"]:focus-visible{color:var(--color-page)}
.cases-chip[aria-disabled="true"]{
  opacity:.45;
  cursor:not-allowed;
  color:var(--color-muted);
}
.cases-chip .count{
  font-size:.8em;
  font-variant-numeric:tabular-nums;
  font-weight:700;
  color:var(--color-muted);
}
a.cases-chip[aria-current="page"] .count{color:color-mix(in oklch,var(--color-page) 72%,transparent)}

.cases-toolbar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-3);
  padding-block:var(--space-5) var(--space-2);
}
.cases-toolbar p{margin:0;font-weight:700}
.cases-toolbar strong{font-variant-numeric:tabular-nums}
.cases-clear{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:0 var(--space-4);
  border:0;
  background:transparent;
  color:var(--color-accent-dark);
  font-weight:700;
  text-decoration:underline;
  text-decoration-thickness:.08em;
  text-underline-offset:.18em;
}
.cases-clear:hover,
.cases-clear:focus-visible{color:var(--color-ink)}

.cases-hub-intro{
  max-width:62ch;
  margin:0 0 var(--space-8);
  padding:var(--space-6);
  border-left:3px solid var(--color-teal-dark);
  background:var(--color-paper-2);
}
.cases-hub-intro p{margin:0;line-height:1.85}
.cases-hub-stats{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-2) var(--space-5);
  margin-top:var(--space-5);
  padding:0;
  list-style:none;
  font-size:var(--text-sm);
  font-weight:700;
  color:var(--color-muted);
}
.cases-hub-stats strong{color:var(--color-ink);font-variant-numeric:tabular-nums}

.cases-empty{
  padding:var(--space-12) var(--space-6);
  border:var(--rule);
  background:var(--color-paper-2);
  text-align:center;
}
.cases-empty h2{margin-bottom:var(--space-3);font-size:var(--text-xl)}
.cases-empty p{max-width:42ch;margin:0 auto var(--space-6);color:var(--color-muted)}
.cases-empty .actions{justify-content:center}

.cases-directory{
  margin-top:var(--space-16);
  padding-top:var(--space-10);
  border-top:var(--rule);
}
.cases-directory h2{font-size:var(--text-xl)}
.cases-directory-block+.cases-directory-block{margin-top:var(--space-8)}
.cases-directory h3{
  margin-bottom:var(--space-3);
  font-size:var(--text-sm);
  font-weight:800;
  letter-spacing:.08em;
  color:var(--color-accent-dark);
}
.cases-directory ul{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-2) var(--space-5);
  margin:0;
  padding:0;
  list-style:none;
}
.cases-directory a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  font-weight:700;
  text-decoration:none;
}
.cases-directory a:hover,
.cases-directory a:focus-visible{color:var(--color-accent-dark);text-decoration:underline}

.cases-related-head{
  display:flex;
  flex-wrap:wrap;
  align-items:end;
  justify-content:space-between;
  gap:var(--space-3);
  margin-bottom:var(--space-6);
}
.cases-related-head h2{margin:0}
.summary-box a{
  font-weight:700;
  color:var(--color-accent-dark);
  text-decoration:none;
}
.summary-box a:hover,
.summary-box a:focus-visible{text-decoration:underline}

.lp-cases{
  padding-block:var(--space-16);
  border-top:var(--rule);
  background:var(--color-page);
}
.lp-cases .case-card a{text-decoration:none}
.lp-cases .case-card h3 a{display:block}
.lp-cases .case-card h3 a:hover,
.lp-cases .case-card h3 a:focus-visible{color:var(--color-accent-dark)}
.lp-cases a.tag:hover,
.lp-cases a.tag:focus-visible{border-color:var(--color-accent-dark);color:var(--color-accent-dark)}
.lp-cases-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:var(--space-6);
  align-items:end;
  margin-bottom:var(--space-8);
}
.lp-cases-head p{margin:0;color:var(--color-muted)}
.lp-cases-head h2{margin-bottom:var(--space-2)}
.lp-cases-more{
  margin-top:var(--space-8);
  text-align:center;
}

@media(max-width:52rem){
  .cases-filter-row{grid-template-columns:minmax(0,1fr);gap:var(--space-2)}
  .cases-filter-label{padding-top:0}
  .cases-chip-row{flex-wrap:nowrap;overflow-x:auto;padding-bottom:var(--space-1)}
  .lp-cases-head{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:30rem){
  .cases-filter{padding-block:var(--space-5)}
  .cases-toolbar{align-items:stretch;flex-direction:column}
  .cases-clear{align-self:flex-start;padding-inline:0}
}