.page-hero-bg { background-image: url('../images/hero-case.jpg'); }

/* ===== FILTER SECTION ===== */
.filter-section { padding: clamp(40px, 5vw, 80px) clamp(20px, 5vw, 80px) clamp(30px, 4vw, 50px); max-width: 1380px; margin: 0 auto; }
.filter-row { margin-bottom: 20px; }
.filter-label { display: flex; align-items: center; gap: 7px; margin-bottom: 12px; }
.filter-label-en { font-family: 'Inter', sans-serif; font-weight: 800; font-size: 13px; color: var(--dark); }
.filter-label-ja { font-family: 'Noto Sans JP', sans-serif; font-weight: 500; font-size: 11px; color: var(--dark); }
.filter-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-tag { border: 1px solid var(--dark); border-radius: 128px; padding: 0 18px; height: 36px; display: flex; align-items: center; font-family: 'Noto Sans JP', sans-serif; font-size: 13px; font-weight: 500; color: var(--dark); cursor: pointer; transition: background 0.2s, color 0.2s; white-space: nowrap; text-decoration: none; background: #fff; }
.filter-tag:hover, .filter-tag.active { background: var(--dark); color: #fff; }

/* ===== WORKS GRID ===== */
.works-section { padding: 0 clamp(20px, 5vw, 80px) clamp(60px, 8vw, 120px); max-width: 1380px; margin: 0 auto; }
.works-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 20px; }
.work-item { display: flex; flex-direction: column; }
.work-thumb { width: 100%; aspect-ratio: 406 / 220; border-radius: 4px; overflow: hidden; display: block; background: #eee; }
.work-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s; }
.work-thumb:hover img { transform: scale(1.04); }
.work-meta { margin-top: 12px; display: flex; align-items: flex-start; flex-wrap: wrap; }
.work-pref { font-family: 'Noto Sans JP', sans-serif; font-size: 12px; font-weight: 500; color: var(--dark); letter-spacing: 1.2px; white-space: nowrap; padding-right: 12px; }
.work-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.work-tag-item { display: inline-flex; align-items: center; background: var(--navy); color: #fff; font-family: 'Noto Sans JP', sans-serif; font-size: 11px; font-weight: 500; padding: 4px 10px; border-radius: 3px; white-space: nowrap; }
.work-title { margin-top: 8px; margin-bottom: 8px; font-family: 'Inter', sans-serif; font-weight: 800; font-size: 15px; color: var(--navy); line-height: 1.4; }
.work-category { margin-top: 8px; display: inline-block; background: var(--navy); color: #fff; font-family: 'Noto Sans JP', sans-serif; font-size: 11px; font-weight: 500; padding: 3px 6px; border-radius: 2px; }
.more-wrap { display: flex; justify-content: center; margin-top: 40px; padding-bottom: clamp(60px, 8vw, 120px); }
.btn-more { background: var(--navy); color: #fff; font-family: 'Inter', sans-serif; font-weight: 800; font-size: 14px; letter-spacing: 2.8px; padding: 15px 93px; border-radius: 4px; text-decoration: none; transition: opacity 0.2s; }
.btn-more:hover { opacity: 0.85; }

@media (max-width: 900px) { .works-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .works-grid { grid-template-columns: 1fr; } }