@charset "utf-8";
/* CSS Document */

.pc_inn_tab:after {
    content: "";
    display: table;
    clear: both;
}


@media only screen and (min-width: 520px) {
    .pc_inn_tab {
        width: 100%;
        margin: 0 auto;
    }
}

/*タブ切り替え全体のスタイル*/
.tabs {
  width: 100%;
  float: left;
  padding-bottom: 0px;
  margin: 10px auto 0px auto;
}

.tab_category_box{
    max-width: 1120px;
    margin: 0 auto;
}



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



/*タブのスタイル 元の状態：直線つなげる
.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 {
  width: calc(100%/3.3);
  height: 50px;
  line-height:  50px;
  border-radius: 20px 20px 0px 0px;
  border-bottom: 0px solid #d2c8b2;
  background-color: #fff;
  font-size: 3.5vw;
  text-align: center;
  color: #444;
  display: block;
  float: left;
  font-weight: bold;
  transition: all 0.2s ease;
  margin: 0% 0.5%;
  position: relative;
}


.tab_item:hover {
  opacity: 1;
}

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

.category_01 {
    border-top: 3px solid #0d5dd2;
    border-left: 3px solid #0d5dd2;
    border-right: 3px solid #0d5dd2;
}
.category_01:hover {
    color: #fff;
    background-color: #0d5dd2;
}

.category_02 {
    border-top: 3px solid #CC6956;
    border-left: 3px solid #CC6956;
    border-right: 3px solid #CC6956;
}
.category_02:hover {
    color: #fff;
    background-color: #CC6956;
}

.category_03 {
    border-top: 3px solid #708090;
    border-left: 3px solid #708090;
    border-right: 3px solid #708090;
}
.category_03:hover {
    color: #fff;
    background-color: #708090;
}





/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_category_box .category_01 {
  background-color: #0d5dd2;
  color: #fff;
  font-size: 3.5vw;
  border-bottom: 0px solid #0d5dd2;
  border-radius: 20px 20px 0px 0;
  margin-top: -10px;
  padding-top: 10px;
  line-height:  50px;
  position: relative;
}

.tabs input:checked + .tab_category_box .category_02 {
  background-color: #CC6956;
  color: #fff;
  font-size: 3.5vw;
  border-bottom: 0px solid #CC6956;
  border-radius: 20px 20px 0 0;
  margin-top: -10px;
  padding-top: 10px;
  line-height:  50px;
  position: relative;
}

.tabs input:checked + .tab_category_box .category_03 {
  background-color: #708090;
  color: #fff;
  font-size: 3.5vw;
  border-bottom: 0px solid #708090;
  border-radius: 20px 20px 0 0;
  margin-top: -10px;
  padding-top: 10px;
  line-height:  50px;
  position: relative;
}


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

#category01_content{
  border-top: 3px solid #0d5dd2;
  border-bottom: 3px solid #0d5dd2;
  background: rgba(13, 93, 210, 0.05);
}

#category02_content{
  border-top: 3px solid #CC6956;
  border-bottom: 3px solid #CC6956;
  background: rgba(204, 105, 86, 0.05);
}

#category03_content{
  border-top: 3px solid #708090;
  border-bottom: 3px solid #708090;
  background: rgba(112, 128, 144, 0.05);
}



/*-------------------------------------------------------------
	PC　タブ中身の内容＿100％
--------------------------------------------------------------*/

.tab_con_top_col {
    float: left;
    width: 100%;
    height: auto;
    margin: 10px auto;
}


.tab_con_box {
    width:95%;
    height: auto;
    max-width: 1120px;
    margin: 15px auto;
    background-color: #fff;
    padding: 0 0 0px 5px;
    display: table;
}