@charset "UTF-8";

/*==========================================
 *  table
 ==========================================*/
 table {
	width:100%;
	margin-bottom:1em;
	border-collapse:collapse;
	border:1px solid #ddd;
	background:#ccc;
}

 timetable {
	width:100%;
	margin-bottom:1em;
	border-collapse:collapse;
	border:1px solid #ddd;
	background:#fff;
}


 @media screen and (max-width: 767px){
	table {
width:95%;
margin: 0 auto;
margin-bottom:1em;
border-collapse:collapse; 
border:0px solid black;
background:;
}

 	.mailform {
width:100%;
margin: 0 auto;
background:;
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;
}

	#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: "料金";}

}

/*================================================
 *  table.type01
 ================================================*/
table.type01 {
	border-collapse: collapse;
	text-align: left;
	line-height: 1.5;
}
table.type01 th {
	width: 150px;
	padding: 10px;
	font-weight: bold;
	vertical-align: top;
	border: 1px solid #ccc;
}
table.type01 td {
	width: 350px;
	padding: 10px;
	vertical-align: top;
	border: 1px solid #ccc;
}



table.type02 {
	border-collapse: separate;
	border-spacing: 0;
	text-align: left;
	line-height: 1.5;
	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
}
table.type02 th {
	width: 150px;
	padding: 10px;
	font-weight: bold;
	vertical-align: top;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	border-top: 1px solid #fff;
	border-left: 1px solid #fff;
	background: #eee;
}
table.type02 td {
	width: 350px;
	padding: 10px;
	vertical-align: top;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}


table.type03 {
	border-collapse: collapse;
	text-align: left;
	line-height: 1.5;
	border-top: 1px solid #ccc;
	border-left: 3px solid #369;
}
table.type03 th {
	width: 147px;
	padding: 10px;
	font-weight: bold;
	vertical-align: top;
	color: #153d73;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;

}
table.type03 td {
	width: 349px;
	padding: 10px;
	vertical-align: top;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}



table.type04 {
	border-collapse: separate;
	border-spacing: 1px;
	text-align: left;
	line-height: 1.5;
	border-top: 1px solid #ccc;
}
table.type04 th {
	width: 150px;
	padding: 10px;
	font-weight: bold;
	vertical-align: top;
	border-bottom: 1px solid #ccc;
}
table.type04 td {
	width: 350px;
	padding: 10px;
	vertical-align: top;
	border-bottom: 1px solid #ccc;
}



table.type05 {
	border-collapse: separate;
	border-spacing: 1px;
	text-align: left;
	line-height: 1.5;
	border-top: 1px solid #ccc;
}
table.type05 th {
	width: 150px;
	padding: 10px;
	font-weight: bold;
	vertical-align: top;
	border-bottom: 1px solid #ccc;
	background: #efefef;
}
table.type05 td {
	width: 350px;
	padding: 10px;
	vertical-align: top;
	border-bottom: 1px solid #ccc;
}



table.type06 {
	border-collapse: collapse;
	text-align: left;
	line-height: 1.5;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}
table.type06 th {
	width: 150px;
	padding: 10px;
	font-weight: bold;
	vertical-align: top;
}
table.type06 td {
	width: 350px;
	padding: 10px;
	vertical-align: top;
}
table.type06 .even {
	background: #efefef;
}



table.type07 {
	border-collapse: collapse;
	text-align: left;
	line-height: 1.5;
	border: 1px solid #ccc;
}
table.type07 thead {
	border-right: 1px solid #ccc;
	border-left: 1px solid #ccc;
	background: #04162e;
}
table.type07 thead th {
	padding: 10px;
	font-weight: bold;
	vertical-align: top;
	color: #fff;
}
table.type07 tbody th {
	width: 150px;
	padding: 10px;
	font-weight: bold;
	vertical-align: top;
	border-bottom: 1px solid #ccc;
	background: #efefef;
}
table.type07 td {
	width: 350px;
	padding: 10px;
	vertical-align: top;
	border-bottom: 1px solid #ccc;
}



table.type08 {
	border-collapse: collapse;
	text-align: left;
	line-height: 1.5;
	border-left: 1px solid #ccc;
}

table.type08 thead th {
	padding: 10px;
	font-weight: bold;
	border-top: 1px solid #ccc;
	border-right: 1px solid #ccc;
	border-bottom: 2px solid #c00;
	background: #dcdcd1;
}
table.type08 tbody th {
	width: 150px;
	padding: 10px;
	font-weight: bold;
	vertical-align: top;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	background: #ececec;
}
table.type08 td {
	width: 350px;
	padding: 10px;
	vertical-align: top;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}


table.type09 {
	border-collapse: collapse;
	text-align: left;
	line-height: 1.5;

}
table.type09 thead th {
	padding: 10px;
	font-weight: bold;
	vertical-align: top;
	color: #369;
	border-bottom: 3px solid #036;
}
table.type09 tbody th {
	width: 150px;
	padding: 10px;
	font-weight: bold;
	vertical-align: top;
	border-bottom: 1px solid #ccc;
	background: #f3f6f7;
}
table.type09 td {
	width: 350px;
	padding: 10px;
	vertical-align: top;
	border-bottom: 1px solid #ccc;
}



table.type10 {
	border-collapse: collapse;
	text-align: left;
	line-height: 1.5;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}
table.type10 thead th {
	width: 150px;
	padding: 10px;
	font-weight: bold;
	vertical-align: top;
	color: #fff;
	background: #04162e;
}
table.type10 td {
	width: 350px;
	padding: 10px;
	vertical-align: top;
}
table.type10 .even {
	background: #f3f6f7;
}


table.type11 {
	border-collapse: separate;
	border-spacing: 1px;
	text-align: center;
	line-height: 1.5;
}
table.type11 th {
	width:33%;
	padding: 10px;
	font-weight: bold;
	vertical-align: top;
	color: #fff;
	background: #036;
}
table.type11 td {
	width:33%;
	padding: 10px;
	vertical-align: top;
	border-bottom: 1px solid #ccc;
	background: #eee;
}


/*==========================================
 ==========================================*/

table.company {
    width: 500px;
    margin: 0 auto;
    border-collapse: separate;
    border-spacing: 0px 15px;
    font-size: 12px;
}
 
table.company th,
table.company td {
    padding: 10px;
}
 
table.company th {
    background: #295890;
    vertical-align: middle;
    text-align: left;
    width: 100px;
    overflow: visible;
    position: relative;
    color: #fff;
    font-weight: normal;
    font-size: 15px;
}
 
table.company th:after {
    left: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(136, 183, 213, 0);
    border-left-color: #295890;
    border-width: 10px;
    margin-top: -10px;
}
/* firefox */
@-moz-document url-prefix() { 
    table.company th::after {
        float: right;
        padding: 0;
        left: 30px;
        top: 10px;
        content: " ";
        height: 0;
        width: 0;
        position: relative;
        pointer-events: none;
        border: 10px solid transparent;
        border-left: #295890 10px solid;
        margin-top: -10px;
    }
}
 
table.company td {
    background: #f8f8f8;
    width: 360px;
    padding-left: 20px;
}


/*==========================================
 ==========================================*/
section table { width: 100%; }
section th, section td  { padding: 10px; border: 1px solid #ddd; }
section th  { background: #f4f4f4; }
 
/*----------------------------------------------------
  .demo01
----------------------------------------------------*/
.demo01 th  { width: 30%; text-align: left; }
 
@media only screen and (max-width:480px){
    .demo01 { margin: 0 -10px; }
    .demo01 th,
    .demo01 td{
    width: 100%;
    display: block;
    border-top: none;
    }
  .demo01 tr:first-child th { border-top: 1px solid #ddd; }
}