/*タブ切り替え全体のスタイル*/
.tabs {
  margin-top: 50px;
  background-color: #fff;
/*  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);*/
  margin: 32px auto 0;
}

/*タブのスタイル*/
.tab_item {
  width: calc(100%/2);
  height: 50px;
  /* border-bottom: 3px solid #5ab4bd; */
  /* background-color: #d9d9d9; */
  line-height: 50px;
  font-size: 16px;
  text-align: center;
  color: #565656;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
}
.tab_item:hover {
  opacity: 0.75;
}

.tab_item_2 {
  width: calc(100%/2);
  height: 50px;
  /* border-bottom: 3px solid #5ab4bd; */
  background-color: #E6E6E6;
  line-height: 50px;
  font-size: 16px;
  text-align: center;
  color: #565656;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
}
/* .tab_item_2:hover {
  opacity: 0.75;
} */

.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;
  padding: 58px 0px 96px;
  justify-content: center;
  height: 100%;
}


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

#programming:checked ~ #programming_content {
  display: flex;
  background-color: #E6E6E6;
}

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

.tabs input:checked + .tab_item_2 {
  background-color: #E6E6E6;
  color: #000;
}

label {
  margin: 0;
}

@media screen and (max-width: 765px) {
  .tabs {
    margin: 0px auto;
  }

  .tab_content {
    padding: 32px 16px 96px;
  }

  .tab_content_description {
    max-width: 288px;
  }

  .tab_item {
    height: 70px;
    line-height: 140%;
    padding: 12px 0;
  }
  .tab_item_2 {
    height: 70px;
    line-height: 140%;
    padding: 12px 0;
  }
}