/*==========================================
 *  テーブル
 ==========================================*/
table {  
	width: 95%;
	margin-bottom:1em;
	border-collapse:collapse; /*隣接するセルのボーダーを重ねて表示（collapse）、間隔をあけて表示（separate）*/
	border:0px solid red;/*borderはすべて1pxだが確認のため太くして色を付けた*/
	background:000;  /**/
}

.mailform {
	width:95%;
	margin: 0 auto;
	background:coral;  /**/
}
tr{
	background:;	
	border:0px solid black;
	}
th {

	padding:5px;
	text-align:left;
	vertical-align:middle;
	border:1px solid gray;
	background:gainsboro; /**/
}

td {

	padding:5px;
	text-align:left;
	border:1px solid gray;
	background:whitesmoke; /**/
}

td .cell { /* メールフォーム用*/
	padding:5px;
	font-size:1em;
	width:80%;	
	background:whitesmoke;  /*色*/
}

td .cell:hover { /* メールフォーム用*/
	background:white;  /*色*/
	}


select{/* メールフォーム用*/
  	padding:5px;
	font-size:1em;
	width:55%;
	background:whitesmoke;  /*lightgreen*/
}

select:hover{/* メールフォーム用*/
	background:white;  /**/
}

text{/* メールフォーム用*/
   	padding:5px;
	font-size:1em;
	width:97%;
}

table textarea{/* メールフォーム用*/
        	padding:5px;
	font-size:1em;
	width:95%;
	background:whitesmoke;  /**/
}

table textarea:hover{
    	background:white;  /**/    
    	}
    	
/*================================================
 *  タブレット向けデザイン （スクロールバーを考慮して20px大きいサイズで切り替え）設置しなくても影響なし
 ================================================*/
 
@media screen and (max-width:979px) {
table {
        width: 100%;
    }

select{
        	padding:5px;
	font-size:1em;
	width:55%;
}
}*/

/*================================================
 *  スマートフォン向けデザイン=画面の横幅が767pxまで
 ================================================*/
@media screen and (max-width:767px) {

	table {	
		width:90%;
		margin: 0 auto;
		margin-bottom:1em;
		border-collapse:collapse; /*隣接するセルのボーダーを重ねて表示（collapse）、間隔をあけて表示（separate）*/
		border:0px solid black;/*borderはすべて1pxだが確認のため太くして色を付けた*/
		background:;  /*whitesmoke*/
}

	.mailform {
		width:100%;
		margin: 0 auto;
		background:;  /*whitesmoke*/
		border:0px solid blue;
}
 /* セルのブロックが横から縦になる*/
	tr {
		width:100%;
		background:;	
		border:0px solid black;
		background:;
	}
	
	th{
		width: 100%;
		display: block;
		border:1px solid gray;
		background:gainsboro; 
}

	td {
		width: 100%;
		display: block;
		border:1px solid gray;
		background:whitesmoke; 
}


	table select{/* メールフォーム用*/
		padding:5px;
		font-size:1em;
		width:50%;
}

#demo01 table { width: 90%; border:none; padding: 10px;}
#demo01 thead { display: none;}
#demo01 tr {
	display: block;
	margin-bottom: 20px;
	border-top: 1px solid #4f4d47;
}
#demo01 td {
	display: block;
	text-align: center;
	border-right: 1px solid #4f4d47;
	border-bottom: none;
	padding: 2px;
}

/* tdのデザイン */
#demo01 td:nth-of-type(1) { background-color: gray; text-align: center; color: #fff;}
#demo01 td:last-child { border-bottom: 1px solid #4f4d47;}
#demo01 td:before {
	color: #4f4d47;
	display: block;
	background-color: #f5f3ec;
}

/* contentでタイトルを追加 */
#demo01 td:nth-of-type(2):before { content: "データ容量";}
#demo01 td:nth-of-type(3):before { content: "バージョン管理";}
#demo01 td:nth-of-type(4):before { content: "料金";}



}*/
/*================================================
 *  スマートフォン向けデザイン=画面の横幅が640pxまで
 ================================================*/
@media screen and (max-width:640px) {

	table {
		width: 90%;
    }
  セルのブロックが横から縦になる
	table th,
	table td {
		width: 100%;
		display: block;
}
	table select{/* メールフォーム用*/
		padding:5px;
		font-size:1em;
		width:40%;
}

	td .cell {	  /* メールフォーム用*/
		padding:5px;
		font-size:1em;
		width:90%;
}
}*/
/*================================================
 *  スマートフォン向けデザイン=画面の横幅が480pxまで
 ================================================*/
@media screen and (max-width:480px){

    table {
        width: 90%;
    }
  セルのブロックが横から縦になる
    table th, table td {
    width: 100%;
        display: block;
    }

        table select{/* メールフォーム用*/
        	padding:5px;
font-size:1em;
width:40%;
}

td .cell {	  /* メールフォーム用*/
padding:5px;
font-size:1em;
width:90%;
}
}