/*** レスポンシブテーブルデザイン ***/

.tabletype01{
   width: 100%;
   margin-top: 0px;
   margin-bottom: 20px;
   border-top:1px solid #bbbbbb;
   border-right:1px solid #bbbbbb;
}
.tabletype01 th,
.tabletype01 td{
   padding:8px;
   border-bottom:1px solid #bbbbbb;
   border-left:1px solid #bbbbbb;
}



.tabletype01-respo{
   width: 100%;
   margin-top: 0px;
   margin-bottom: 20px;
   border-top:1px solid #bbbbbb;
   border-right:1px solid #bbbbbb;
}
.tabletype01-respo th,
.tabletype01-respo td{
   padding:8px;
   border-bottom:1px solid #bbbbbb;
   border-left:1px solid #bbbbbb;
}
.th-gray th {
   background-color:#f4f4f4;
}
.th-aqua th {
   background-color:#EEF2FF;
}
.th-orange th {
   background-color:#FFF5EC;
}
.th-yellow th {
   background-color:#FFFFEC;
}
.th-white th {
   background-color:#FFFFFF;
}


.th10tdtd th {
   width: 10%;
}
.th10tdtd td {
   width: 45%;
}

.th20 th {
   width: 20%;
}
.th20 td {
   width: 80%;
}
.th30 th {
   width: 30%;
}
.th30 td {
   width: 70%;
}
.th40 th {
   width: 40%;
}
.th40 td {
   width: 60%;
}
.th50 th {
   width: 50%;
}
.th50 td {
   width: 50%;
}

.th-l th {
   text-align: left;
}
.th-c th {
   text-align: center;
}
.th-r th {
   text-align: right;
}
.td-l td {
   text-align: left;
}
.td-c td {
   text-align: center;
}
.td-r td {
   text-align: right;
}



@media screen and (max-width:640px) {
.tabletype01-respo th,
.tabletype01-respo td{
	display:block;
}
.tabletype01-respo{
width: 100%;
}
.tabletype01-respo th,
.tabletype01-respo td {
width: 100%;
}



}