@charset "utf-8";
/* CSS Document */
/*タブ切り替え全体のスタイル*/
.tabs {
  width: 1080px;
  float: left;
  padding-bottom: 20px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  margin: 30px auto 20px auto;
}

/*タブのスタイル*/
.tab_item {
  width: calc(109%/3.3);
  height: 50px;
  border-bottom: 7px solid #d2c8b2;
  background-color: #f2f2f2;
  line-height: 57px;
  font-size: 130%;
  text-align: center;
  color: #444;
  display: block;
  float: left;
  font-weight: bold;
  transition: all 0.2s ease;
  margin-top: 0px;
  margin-right: 3px;
}

/*タブのスタイル 元の状態：直線つなげる
.tab_item {
  width: calc(100%/3);
  height: 60px;
  border-bottom: 10px solid #d2c8b2;
  background-color: #f2f2f2;
  line-height: 70px;
  font-size: 130%;
  text-align: center;
  color: #422b26;
  display: block;
  float: left;
  font-weight: bold;
  transition: all 0.2s ease;
  margin-top: 5px;
}
*/

.tab_item:hover {
  opacity: 1;
}

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

.category_01 {
    border-bottom: 7px solid #0d5dd2;
}
.category_01:hover {
    color: #fff;
    background-color: #0d5dd2;
}

.category_02 {
    border-bottom: 7px solid #CC6956;
}
.category_02:hover {
    color: #fff;
    background-color: #CC6956;
}

.category_03 {
    border-bottom: 7px solid #708090;
}
.category_03:hover {
    color: #fff;
    background-color: #708090;
}

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


/*選択されているタブのコンテンツのみを表示*/
#category01:checked ~ #category01_content,
#category02:checked ~ #category02_content,
#category03:checked ~ #category03_content {
  display: block;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .category_01 {
  background-color: #0d5dd2;
  color: #fff;
  border-bottom: 25px solid #0d5dd2;
  border-radius: 20px 20px 0 0;
  margin-top: -18px;
  line-height: 67px;
}

.tabs input:checked + .category_02 {
  background-color: #CC6956;
  color: #fff;
  border-bottom: 25px solid #CC6956;
  border-radius: 20px 20px 0 0;
  margin-top: -18px;
  line-height: 67px;
}

.tabs input:checked + .category_03 {
  background-color: #708090;
  color: #fff;
  border-bottom: 25px solid #708090;
  border-radius: 20px 20px 0 0;
  margin-top: -18px;
  line-height: 67px;
}