/*タブ切り替え全体のスタイル*/
.tabs {
  background-color: #f5f5f5;
  width: 100%;
}

/*タブのスタイル*/
.tab_item {
  width: calc(100%/2);
  background-color: #f5f5f5;
  line-height: 50px;
  text-align: center;
  display: block;
  float: left;
  padding: 16px 0;
  transition: all 0.2s ease;
}


.tab_item_2 {
  width: calc(100%/2);
  background-color: #f5f5f5;
  text-align: center;
  display: block;
  float: left;
  padding: 16px 0;
  transition: all 0.2s ease;
}

.only {
  width: 100% !important;
}

.only .batch-5 {
  margin: 0 auto;
}

.only .batch-6 {
  margin: 0 auto;
}


.tab_content_description {
  width: 100%;
  text-align: center;
  justify-content: center;
  display: flex;
  align-items: flex-start;
}

/*ラジオボタンを全て消す*/
input[name="tab_item"] {
  display: none;
}

/*タブ切り替えの中身のスタイル*/
.tab_content {
  display: none;
  clear: both;
  overflow: hidden;
  justify-content: center;
  height: 100%;
}


/*選択されているタブのコンテンツのみを表示*/
#event:checked ~ #event_content {
  display: block;
  background-color: #fff;
}

#specialmenu:checked ~ #specialmenu_content {
  display: block;
  background-color: #fff;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item .batch-5 {
  background-color: #111;
}

.tabs input:checked + .tab_item .text-6 {
  color: #fff;
}

.tabs input:checked + .tab_item .event-2-icon {
  background-color: #D7000F;
}


.tabs input:checked + .tab_item_2 .batch-6 {
  background-color: #111;
}

.tabs input:checked + .tab_item_2 .text-11 {
  color: #fff;
}

.tabs input:checked + .tab_item_2 .menu-2-icon {
  background-color: #2C8B00;
}