.c-tool-tag {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.c-tool-tag__content {
  display: flex;
  gap: 10px;
  align-items: center;
  background: #ffffff;
  border: 1px solid #666666;
  border-radius: 60px;
  padding: 8px 24px;
  cursor: pointer;
}

.c-tool-tag__text {
  font-size: 14px;
  color: #00000099;
}

.c-tool-tag__content input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.c-tool-tag__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.c-tool-tag__icon img {
  width: 25px;
  height: 25px;
  flex-shrink: 0;
}

/* 選択時のスタイル */
.c-tool-tag__content input[type="checkbox"]:checked ~ .c-tool-tag__text {
  color: #ffffff;
}

/* ラベル全体を光らせる */
.c-tool-tag__content:has(input[type="checkbox"]:checked) {
  border-color: #a2b2b9;
  background: #a2b2b9;
}

.c-tool-tag__content:has(input[type="checkbox"]:checked) .c-tool-tag__icon {
  width: 25px;
  opacity: 0.5;
  margin-left: 0;
  transform: rotate(45deg);
}

/* 非活性時 */
.c-tool-tag__content:has(input[type="checkbox"]:disabled) .c-tool-tag__text {
  color: #6b7280;
}

.c-tool-tag__content:has(input[type="checkbox"]:disabled) .c-tool-tag__icon {
  filter: grayscale(100%);
  opacity: 0.5;
}