/*タブ切り替え全体のスタイル*/
.tabs {
  margin-top: 50px;
  padding-bottom: 20px;
  /*box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);*/
  width: calc(100%);
  margin: 0 auto;
  border: .5px solid #bbb;
  border-top: none;
  border-radius: 5px;
  background-color: #fff;
}

/*タブのスタイル*/
.tab_item,.tab_item2,.tab_item3 {
  height: 40px;
  border: .5px solid #bbb;
  border-left: none;
  background-color: #d3d3d3;
  line-height: 1.2rem;
  font-size: min(calc(15px + .3vw),22px);
  color: #565656;
  display: block;
  float: left;
  font-weight: bold;
  transition: all 0.2s ease;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
}

.tab_item {width: calc(100%/3); text-align: center; padding-top:15px;}
.tab_item2 {width: calc(100%/4); padding-top:10px; padding-left:15px;}
.tab_item3 {width: calc(100%/4); text-align: center; padding-top:15px;}

.tab_item:hover,.tab_item2:hover,.tab_item3:hover {
  opacity: 0.6;
}


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

/*タブ切り替えの中身のスタイル*/
.tab_content {
  display: none;
  padding: 20px 0;
  clear: both;
  overflow: hidden;
}

/*選択されているタブのコンテンツのみを表示*/
#pc1:checked ~ #pc1_content,
#pc2:checked ~ #pc2_content,
#pc3:checked ~ #pc3_content,
#pc4:checked ~ #pc4_content {
  display: block;
}
#bw1:checked ~ #bw1_content,
#bw2:checked ~ #bw2_content,
#bw3:checked ~ #bw3_content {
  display: block;
}
#sp1:checked ~ #sp1_content,
#sp2:checked ~ #sp2_content,
#sp3:checked ~ #sp3_content,
#sp4:checked ~ #sp4_content {
  display: block;
}

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

.tab_logo {width:50%;}


@media only screen and (max-width:1023px) {
  .tagline {display:none;}
  .tab_logo {width:40%;}
  .tab_item,.tab_item2,.tab_item3 {font-size: min(calc(14px + .6vw),22px);}

}

@media only screen and (max-width:768px) {
  .tab_logo {width:30%;}

}