.tabs {
  margin-top: 2em;
}

.tab-btns input[type="radio"] {
  display: none;
}

/* タブボタンのスタイル */
.tab-btns label {
  display: inline-block;
  padding: 10px 20px;
  background: #eee;
  cursor: pointer;
}

/* 選択されているタブのスタイル */
.tabs:has(#tab1:checked) label[for="tab1"],
.tabs:has(#tab2:checked) label[for="tab2"] {
  background: var(--jcom-red);
  color: white;
}

/* タブコンテンツの基本スタイル */
.tab-content {
  display: none;
  padding: 20px;
  background: white;
  border: 2px solid #ccc;
  border-radius: 5px;
}

/* 選択されているタブのコンテンツを表示 */
.tabs:has(#tab1:checked) .tab-content[data-tab="tab1"],
.tabs:has(#tab2:checked) .tab-content[data-tab="tab2"] {
  display: grid;
}


@media screen and (max-width: 767px) {}