@charset "UTF-8";
/* CSS Document */

/* -----------------------------------------------
Table Design
----------------------------------------------- */
table {
	border-top: 1px solid #c0c0c0;
	border-right: 1px solid #c0c0c0;
	width: 100%;
	border-spacing: 0px;
	margin: 2em auto;
}
th, td {
	border-bottom: 1px solid #c0c0c0;
	border-left: 1px solid #c0c0c0;
	text-align: left;
	padding: 0.5em 0.5em 0.5em 0.8em;
	font-size:0.9em;	
}
th { background-color: #f0f6da;
font-weight:normal;}
td h6{
	text-align:left;
	font-size:1em;
	margin:0.3em 0;
	font-weight:normal;
	color:#69F;
}
#demo01 table,
#demo02 table,
#demo03 table
 {margin:1em 0 2em 0;}

#demo01,
#demo02,
#demo03{
	margin:0 0 2em 0;
}


/* -----------------------------------------------
Media Query
----------------------------------------------- */
@media only screen and (max-width: 600px) {
h1 { font-size: 14px;}
h1 > span { display: block;}
.back { border-radius: 0px; width: 100%; padding: 10px;}


/*-------------- レイアウトを変更する --------------*/
#demo01 table,
#demo02 table,
#demo03 table
 { width: 100%; border:none; padding: 10px;}
#demo01 thead ,
#demo02 thead ,
#demo03 thead
{ display: none;}
#demo01 tr,
#demo02 tr ,
#demo03 tr
{
	display: block;
	margin-bottom: 20px;
	border-top: 1px solid #c0c0c0;
}
#demo01 td,
#demo02 td,
#demo03 td
{
	display: block;
	text-align: left;
	border-right: 1px solid #c0c0c0;
	border-bottom: none;
	padding:1em 0.5em 0.5em 0.5em;
}

/* tdのデザイン */
.b td{
	text-align:center;
	font-weight:bold;
}
#demo01 td:nth-of-type(1), 
#demo02 td:nth-of-type(1),
#demo03 td:nth-of-type(1)
{ background-color: #e8c59c; text-align: center; color: #fff;font-size:1.2em;font-weight:bold;}
#demo01 td:last-child, 
#demo02 td:last-child,
#demo03 td:last-child
{ border-bottom: 1px solid #c0c0c0;}
#demo01 td:before,
#demo02 td:before,
#demo03 td:before
 {
	color: #4f4d47;
	display: block;
	background-color: #f5f3ec;
	font-weight:bold;
	padding: 0.4em;
}

/* 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: "会場";}
#demo01 td:nth-of-type(5):before { content: "お申し込み";}
#demo01 td:nth-of-type(6):before { content: "お申し込み";}

#demo02 td:nth-of-type(2):before { content: "日程";}
#demo02 td:nth-of-type(3):before { content: "時間";}
#demo02 td:nth-of-type(4):before { content: "講師";}
#demo02 td:nth-of-type(5):before { content: "会場";}
#demo02 td:nth-of-type(6):before { content: "お申し込み";}

#demo03 td:nth-of-type(2):before { content: "ニックネーム";}
#demo03 td:nth-of-type(3):before { content: "特徴";}
#demo03 td:nth-of-type(4):before { content: "講師";}
#demo03 td:nth-of-type(5):before { content: "会場";}
#demo03 td:nth-of-type(6):before { content: "お申し込み";}
}