/* 目次のカード */
.work-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px 16px;
}
@media (min-width: 768px) {
  .work-cards { grid-template-columns: repeat(3, 1fr); gap: 48px 24px; }
}
.work-card { display: block; }
.work-card__thumb { display: block; overflow: hidden; background: var(--bg-2); }
.work-card__thumb img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.work-card:hover .work-card__thumb img { transform: scale(1.05); }
.work-card__category {
  display: inline-block;
  margin-top: 14px;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--accent);
}
.work-card__title {
  display: block;
  margin-top: 4px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
  transition: color 0.2s;
}
.work-card:hover .work-card__title { color: var(--accent); }
.work-card__date { display: block; margin-top: 4px; font-size: 12px; color: var(--text-sub); }

/* 各事例 */
.works { max-width: 780px; margin: 0 auto; }
.work {
  padding: clamp(56px, 8vw, 88px) 0;
  border-top: 1px solid var(--line);
  scroll-margin-top: 72px;
}
.work:first-child { border-top: 0; padding-top: 0; }
.work__meta {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: var(--text-sub);
}
.work__category { color: var(--accent); letter-spacing: 0.12em; font-weight: 500; }
.work__title {
  margin-top: 8px;
  font-size: clamp(22px, 2.6vw, 28px);
  line-height: 1.5;
}
.work__body { margin-top: 28px; }
.work__body > * + * { margin-top: 20px; }
.work__body h3 { font-size: 17px; }
.work-photos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
@media (min-width: 600px) {
  .work-photos { grid-template-columns: repeat(var(--cols), 1fr); }
}
.work-photo { position: relative; }
.work-photo img { width: 100%; }
.work-photo__label {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 2px 10px;
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: 0.12em;
  color: #ecebe6;
  background: rgba(14, 14, 13, 0.75);
}
.work__back { margin-top: 32px; font-size: 13px; }
.work__back a { color: var(--text-sub); border-bottom: 1px solid var(--line); }
.work__back a:hover { color: var(--text); }