table {
width:98%;
margin: 10px auto;
}

th {
  border: solid 1px #BF5C60;
  color: black;
  padding: 5px!important;
  }
td {
  border: solid 1px #BF5C60;
  padding: 5px!important;
  }  


@media screen and (max-width: 768px){/*画面の横幅が768px以下*/

th {
  border-top :solid 1px #FF4B54;
  margin-top:10px!important;
  font-size:80%;
 
}

td {
  border-top :solid 0px #FF4B54;
  font-size:80%;
}

}


/*===============================================
●respon01
===============================================*/

.respon01{
  font-size:85%;
 }

@media screen and (min-width: 769px){/*画面の横幅が769px以上*/

.respon01 th {
text-align           : right;
padding-left:2em!important;
min-width:35%;
}

.respon01 th::after {
  content: " \f101"!important;
  font-family: "Font Awesome 5 Pro"!important;
  color: #FB4F52AD!important;
  margin-right: 3px!important;
  text-align:right!important;
}

}

@media screen and (max-width: 768px){/*画面の横幅が768px以下*/
.respon01{font-size:110%;}
.respon01 th,
.respon01 td {
　border-bottom: none;
  display: block!important;
  width: 100%;
  }


.respon01 th{
  text-align:center;
  padding:5px;
}

}


/*===============================================
●respon02
===============================================*/


 .respon02{
 	font-size:80%!important;
 }


.respon02 td:first-child {
    color: #663D46;
    font-weight: bold;
    text-align:  right;
  }


.respon02 th:first-child {
background: firebrick!important;
text-align: center;
color: white!important;
font-size: 120%!important;
  }

.respon02 th:first-child:before {
  content: " \f336"!important;
  font-weight:100!important;
  font-family: "Font Awesome 5 Pro"!important;
  margin-right: 3px!important;
  text-align: center;
  color: white!important;
  }

.respon02 th {
background: #ffe7ea!important;
text-align: center;
  }
   
@media screen and (min-width: 769px){/*画面の横幅が769px以上*/

.respon02 tr:nth-child(even){
  background-color:rgba(255,213,213,0.3);
} 


.respon02 td:first-child:after {
  content      : " \f101"!important;
  font-family  : "Font Awesome 5 Pro"!important;
  color        : #FB4F52AD!important;
  margin-right : 3px!important;
  text-align   : right!important;

}

.respon02 td:first-child {
    font-size:110%!important;
    min-width:20%!important;
    padding-left:20px!important;
    background-color:rgba(255,213,213,0.3);
}


.respon02 th {
  border:0px;
}
.respon02 td {
  border:0px;
  text-align:center;
  min-width:15%!important;
}

}

@media screen and (max-width: 768px){/*画面の横幅が768px以下*/
.respon02 .thead {display: none;}

.respon02 th{border: 0px;} 

.respon02 tr {width: 100%;}


.respon02 td {
display          : block;
text-align       : left;
width            : 100%;
border           : 0px;
background-color : #FFEDF0 ;
  }

.respon02 td:first-child {
    background: #ffcccc;
    color: maroon;
    font-weight: bold;
    text-align: center;
    margin-top:10px!important;
    border-top :solid 0px #FF4B54;
    font-size:130%; 
  }


.respon02 td:before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
    margin-right: ;

  }


.respon02 td {
    float: left;
    font-weight: normal;
    margin-right: 10px;
    text-align:center!important;

  } 

}



/*===============================================
●ZR/CITYの基本情報のテーブル
===============================================*/

@media screen and (min-width:1101px){
.zr_table_top{
font-size: 90%;
}
}


@media screen and (max-width:1100px){
.zr_table_top{
font-size: 90%!important;
}
}

@media screen and (max-width:768px){
.zr_table_top{
font-size: 130%!important;
}
}

@media screen and (min-width:1101px){
.zr_table_top_height{
height:210px!important;
}
}


@media screen and (max-width:1100px){
.zr_table_top_height{
  height: auto;
}
}

.zr_table_top {
width        : 100%;
margin-top   :-5px!important;
margin-bottom:-5px!important;
border-width : 0px;
}

.zr_table_top tr{
border-width : 0px!important;
}

.zr_table_top th {
border-width : 0px;
padding      : 5px!important;
width        : 25%;
}

.zr_table_top td {
border-width : 0px;
padding      : 8px!important;
line-height  : 1.5em;
}  

.border0{border:0px!important;}

@media screen and (min-width: 769px){/*画面の横幅が769px以上*/

.zr_table_top th {
text-align : center;
font-size  : 90%;
}

.zr_table_top td {
text-align : left;
}

}

@media screen and (max-width: 768px){/*画面の横幅が768px以下*/

.zr_table_top th,
.zr_table_top td {
text-align    : center;
border-bottom : none;
display       : block;
width         : 100%;
margin        : 0 auto;
}

.zr_table_top th{
min-width     : initial;
padding       : 0px;
}

.zr_table_top th {
margin-top    : 0px!important;
font-size     : 80%;
width         : initial!important;
}

.zr_table_top_top td {
font-size     : 80%;
}


}






/*===============================================
●Datatable
===============================================*/


.borderless th {
    border: none;
}
.borderless td {
    border-top    : none;
    border-right  : none;
    border-left   : none;
    border-bottom : 0px dotted #dcdcdc;
    vertical-align:middle!important;
}

/* 行の色を変更する !importantで稼働*/
#foo-table2 thead tr{
    background-color: #CCCCCC;
}
#foo-table2 tbody tr.odd{
    background-color: #FFFFFF;
}
#foo-table2 tbody tr.even{
    background-color: #EEEEEE;
}