/* =========================================================
  cases.css
  - CASESページ専用（必ずスコープ）
  - about.cssと同じ思想で分離管理
========================================================= */

body.page.page-cases .container{
  max-width: 1120px;
}

/* =================================
  HERO
================================= */

body.page.page-cases .cases-hero{
  position: relative;
  overflow: hidden;
  padding: clamp(84px, 10vh, 120px) 0 clamp(56px, 8vh, 88px);
}

/* 背景：aboutと同トーン */
body.page.page-cases .cases-heroBg{
  position:absolute;
  inset:0;
  z-index:0;
  background:
    radial-gradient(900px 420px at 18% 18%, rgba(244,183,64,.14), transparent 64%),
    radial-gradient(900px 520px at 82% 32%, rgba(47,127,111,.18), transparent 66%),
    radial-gradient(760px 420px at 50% 80%, rgba(111,143,122,.10), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.84));
}
body.page.page-cases .cases-heroBg::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image: var(--noise);
  opacity:.45;
  mix-blend-mode:multiply;
}

body.page.page-cases .cases-heroInner{
  position: relative;
  z-index:1;
  max-width: 980px;
}

body.page.page-cases .cases-heroTitle{
  font-family:"Noto Serif JP", serif;
  font-size: clamp(34px, 4.2vw, 52px);
  line-height: 1.22;
  margin: 0 0 12px;
}

body.page.page-cases .cases-heroLead{
  max-width: 70ch;
  line-height: 1.9;
  color: rgba(0,0,0,.74);
}

/* チップ */

body.page.page-cases .cases-chipRow{
  margin-top:14px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
body.page.page-cases .cases-chip{
  display:inline-flex;
  align-items:center;
  padding:8px 14px;
  border-radius:999px;
  background: rgba(255,255,255,.9);
  border:1px solid rgba(0,0,0,.06);
  font-size:12px;
  box-shadow: 0 10px 22px rgba(0,0,0,.05);
}

/* =================================
  FILTER
================================= */

body.page.page-cases .filterPanel{
  margin-top: 24px;
  border-radius: 22px;
  background: rgba(255,255,255,.82);
  border:1px solid rgba(0,0,0,.06);
  box-shadow: 0 18px 44px rgba(0,0,0,.08);
  padding: 20px;
  backdrop-filter: blur(10px);
}

body.page.page-cases .filterRow{
  margin-top:12px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

body.page.page-cases .filterSelect,
body.page.page-cases .filterInput{
  appearance:none;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
  padding:10px 16px;
  font-size:13px;
  box-shadow: 0 10px 22px rgba(0,0,0,.04);
}

body.page.page-cases .filterInput{
  min-width:260px;
}

/* =================================
  GRID
================================= */

body.page.page-cases .casesGrid{
  margin-top: 40px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 18px;
}

body.page.page-cases .caseCard{
  display:block;
  border-radius: 20px;
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  box-shadow: 0 12px 28px rgba(0,0,0,.06);
  transition:.2s ease;
}
body.page.page-cases .caseCard:hover{
  transform: translateY(-4px);
  box-shadow: 0 22px 60px rgba(0,0,0,.12);
}

body.page.page-cases .caseThumb{
  aspect-ratio: 16/10;
  overflow:hidden;
}
body.page.page-cases .caseThumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

body.page.page-cases .caseBody{
  padding:18px;
}

body.page.page-cases .caseTitle{
  margin:0 0 10px;
  font-weight:800;
  line-height:1.6;
}

body.page.page-cases .caseLead{
  margin:0 0 12px;
  font-size:14px;
  line-height:1.8;
  color:rgba(0,0,0,.72);
}

body.page.page-cases .caseTags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  font-size:12px;
  color:rgba(0,0,0,.60);
}

/* =================================
  CTA
================================= */

body.page.page-cases .casesCta{
  margin-top: 60px;
  border-radius: 22px;
  background: rgba(47,127,111,.92);
  color:#fff;
  padding: 32px;
  box-shadow: 0 24px 60px rgba(0,0,0,.12);
}
body.page.page-cases .casesCta .title{
  font-weight:800;
  margin-bottom:10px;
}
body.page.page-cases .casesCta .note{
  opacity:.9;
}

/* =================================
  Responsive
================================= */

@media (max-width: 980px){
  body.page.page-cases .casesGrid{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

@media (max-width: 640px){
  body.page.page-cases .casesGrid{
    grid-template-columns: 1fr;
  }
  body.page.page-cases .filterInput{
    min-width:100%;
  }
}