@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: 20px auto 0px auto;
}

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



/*タブ切り替えの中身のスタイル*/
.tab_content {
  display: none;
  padding: 20px 0px 20px 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%/4.6);
  height: 77px;
  border-radius: 20px 20px 0px 0px;
  border-bottom: 0px solid #d2c8b2;
  background-color: #fff;
  line-height: 77px;
  font-size: 120%;
  text-align: center;
  color: #444;
  display: block;
  float: left;
  font-weight: bold;
  transition: all 0.2s ease;
  margin: 0 1%;
  position: relative;
  top: 3px;
  left: 0;
}


.tab_item:hover {
  opacity: 1;
}

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

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

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

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

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



/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_category_box .category_01 {
  background-color: #f3ffe5;
  color: #444;
  font-size: 150%;
  border-top: 3px solid #79b43c;
  border-right: 3px solid #79b43c;
  border-left: 3px solid #79b43c;
  border-bottom: 3px solid #f3ffe5;
  border-radius: 20px 20px 0px 0;
  margin-top: -12px;
  padding-top: 12px;
  line-height: 77px;
  position: relative;
  top: 3px;
  left: 0;
  z-index: 333;
}

.tabs input:checked + .tab_category_box .category_02 {
  background-color: #DAF2DF;
  color: #444;
  font-size: 150%;
  border-top: 3px solid #669932;
  border-right: 3px solid #669932;
  border-left: 3px solid #669932;
  border-bottom: 3px solid #DAF2DF;
  border-radius: 20px 20px 0 0;
  margin-top: -12px;
  padding-top: 12px;
  line-height: 77px;
  position: relative;
  top: 3px;
  left: 0;
  z-index: 333;
}

.tabs input:checked + .tab_category_box .category_03 {
  background-color: #f3ffe5;
  color: #444;
  font-size: 150%;
  border-top: 3px solid #79b43c;
  border-right: 3px solid #79b43c;
  border-left: 3px solid #79b43c;
  border-bottom: 3px solid #f3ffe5;
  border-radius: 20px 20px 0 0;
  margin-top: -12px;
  padding-top: 12px;
  line-height: 77px;
  position: relative;
  top: 3px;
  left: 0;
  z-index: 333;
}

.tabs input:checked + .tab_category_box .category_04 {
  background-color: #DAF2DF;
  color: #444;
  font-size: 150%;
  border-top: 3px solid #669932;
  border-right: 3px solid #669932;
  border-left: 3px solid #669932;
  border-bottom: 3px solid #DAF2DF;
  border-radius: 20px 20px 0px 0;
  margin-top: -12px;
  padding-top: 12px;
  line-height: 77px;
  position: relative;
  top: 3px;
  left: 0;
  z-index: 333;
}


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

#category01_content{
  border-top: 3px solid #79b43c;
  background-color: #f3ffe5;
}

#category02_content{
  border-top: 3px solid #669932;
  background-color: #DAF2DF;
}

#category03_content{
  border-top: 3px solid #79b43c;
  background-color: #f3ffe5;
}

#category04_content{
  border-top: 3px solid #669932;
  background-color: #DAF2DF;
}




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

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


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


.tab_image_main{
    position: relative;
    float: left;
    width: 50%;
    height: auto;
    margin: 20px 15px 0 auto;
}

.tab_image_main img {
    width: 100%;
    max-width: 550px;
    height: auto;
    margin: 0px auto;
    border-radius: 5px;
}


.tab_image_sub_box {
    float: left;
    width: 100%;
    margin: 20px 15px 0px 5px;
}

.tab_image_sub {
    position: relative;
    float:left;
    width: 300px;
    height: auto;
    margin: 10px 50px 20px 0px;
    padding: 0px;
	border: 0px solid #666;
}

.tab_image_sub img {
    width:100%;
    height: auto;
    margin: 0px auto;
    border-radius: 5px;
}


/* image　拡大アイコン */

.tab_image_main .fa {
  position: absolute;
  top: 90%;
  left: 90%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  padding:0;
  color: rgba(0, 0, 0, 0.7);
  font-size: 36px;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius:  4px;
  }

.tab_image_sub .fa {
  position: absolute;
  top: 90%;
  left: 92%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  padding:0;
  color: rgba(0, 0, 0, 0.7);
  font-size: 25px;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius:  4px;
  }

/*タブ中身の内容＿テーブル*/
.table_box{
    float: left;
    width: 48%;
    height: auto;
    margin: 15px auto 0;
}

table{
  border-collapse: collapse;
  border-spacing: 0;
  width:95%; 
　max-width: 500px;
}

table tr{
  border-bottom: solid 1px #eee;
  /*cursor: pointer;*/
}

table tr:hover{
  /*background-color: #DAF2DF;*/
}

table tr.name{
    background-color:rgba(242,242,242,0);
}

table th,table td{
  width: 20%;
  padding: 15px 0px;
  vertical-align: middle;
  text-align: left;
}

th.vehicle_other{
  width: 30%;
  padding: 15px 0px;
  vertical-align: middle;
  text-align: left;
}