.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* radio非表示 */
.tabs input.tab_index {
  display: none;
}

/* タブボタン */
.tabs > label {
  padding: 12px 18px;
  background: var(--gray2);
  color: var(--black);
  border-radius: 999px;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  white-space: nowrap;
  transition: 0.25s;
}

/* 通常hover */
.tabs > label:hover {
  background: var(--blue2);
}

/* 選択中 */
#tab1:checked + label,
#tab2:checked + label,
#tab3:checked + label,
#tab4:checked + label,
#tab5:checked + label,
#tab6:checked + label,
#tab7:checked + label,
#tab8:checked + label {
  background: var(--blue1);
  color: #fff;
}

/* キャンセル未処理あり */
.tabs > label.tab_cancel.alert {
  background: var(--red);
  color: #fff;
}

/* キャンセル未処理あり hover */
.tabs > label.tab_cancel.alert:hover {
  background: var(--orange);
  color: #fff;
}

/* キャンセル未処理あり 選択中 */
#tab5:checked + label.tab_cancel.alert {
  background: var(--red);
  color: #fff;
}

/* キャンセル未処理あり 選択中 hover */
#tab5:checked + label.tab_cancel.alert:hover {
  background: var(--orange);
  color: #fff;
}

/* キャンセル件数 */
.tabs > label.tab_cancel.alert span {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 7px;
  background: #fff;
  color: var(--red);
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
}

/* コンテンツ */
.contents {
  width: 100%;
  margin-top: 16px;
}

.content {
  display: none;
  padding: 40px 20px 80px;
  border-radius: 16px;
  background: var(--white);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* 表示切替 */
#tab1:checked ~ .contents .c1,
#tab2:checked ~ .contents .c2,
#tab3:checked ~ .contents .c3,
#tab4:checked ~ .contents .c4,
#tab5:checked ~ .contents .c5,
#tab6:checked ~ .contents .c6,
#tab7:checked ~ .contents .c7,
#tab8:checked ~ .contents .c8 {
  display: block;
}