/* タグボタン */
.tag-filter {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 1rem 0 1.5rem;
}

.tag-chip {
  border: 1px solid #bbb;
  background: #fff;
  padding: .35rem .7rem;
  border-radius: 999px;
  font-size: .9rem;
  cursor: pointer;
  transition: transform .05s ease;
  user-select: none;
}

.tag-chip:hover {
  transform: translateY(-1px);
}

.tag-chip.is-active {
  background: #e7f1ff;
  border-color: #5aa1ff;
}

/* ギャラリースタイル */
#works-gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  gap: 20px;
}

.work-item {
  flex: 0 0 300px;
  aspect-ratio: 16 / 9;
}

.work-item .movie {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  border-radius: 12px;
  overflow: hidden;
}

.work-item .movie iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 12px;
}

.work-item .tag-badges {
  margin-top: auto;
  padding-top: 10px;
}

.tag-badges {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-top: .5rem;
}

.tag-badges span {
  font-size: .80rem;
  background: #f2f2f2;
  padding: .2rem .5rem;
  border-radius: .6rem;
}

@media screen and (max-width: 768px) {
  .work-item {
    max-width:100%;
    min-width:100%;
  }
}