@charset "utf-8";
*, *::before, *::after {box-sizing: border-box;}
html {
	font-size: 62.5%;
	/* 標準の文字サイズを10pxに設定 */
}
body {
	color: #000;
	font-size: 1.5rem;
	font-family: 游ゴシック体, "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	line-height: 1.5;
	-webkit-text-size-adjust: 100%;
	/* フォントサイズ自動調整OFF */
}
section {
    max-width: 960px;
    margin: 0 auto;
    padding: 30px;
}
.sp { display: block !important; }
.pc { display: none  !important; }
@media screen and (min-width: 769px) {
.sp { display: none  !important; }
.pc { display: block !important; }
}


/* テーブル関連（ここだけデスクトップファースト！）*/

/* PC
=============================================== */

/* common---*/

table {
	width: 100%;
	border-collapse: collapse;
}
th, td {
	padding: 20px;
	vertical-align: middle;
	border: .99px solid #ddd;
}
th {
	font-weight: bold;
	background: #f5f5f5;
}
td {
	background: #fff;
}

/* demo01---*/

.demo01 th {
	width: 200px;
}

/* demo02---*/

.demo02 tr td:first-child {
	font-weight: bold;
	background: #f5f5f5;
}

.demo02 th,
.demo02 td {
	text-align: center;
}

/* demo03---*/

.demo03 th {
	width: 200px;
}


/* SP
=============================================== */
@media only screen and (max-width: 768px) {

/* demo01---*/

.demo01 {}
.demo01 th,
.demo01 td {
    width: 100%;
    display: block;
    border-top: none;
}
.demo01 tr:first-child th {
    border-top: .99px solid #ddd;
}

/* demo02---*/

.demo02 {
    display: block;
    width: 100%;
}
.demo02 thead {
    display: block;
    float: left;
    overflow-x: scroll;
}
.demo02 tbody {
    display: block;
    width: auto;
    overflow-x: scroll;
    white-space: nowrap;
}
.demo02 th {
    display: block;
    width: auto;
}
.demo02 tbody tr {
    display: inline-block;
    margin: 0 -3px;
}
.demo02 td {
    display: block;
}
.demo02 th,
.demo02 td {
    text-align: center;
    border-bottom: none;
}
.demo02 th:last-child,
.demo02 td:last-child {
    border-bottom: .99px solid #ddd;
}

/* demo03---*/

.demo03 {}
.demo03 tr {
    display: block;
    margin-bottom: 20px;
}
.demo03 th {
    display: block;
    width: 100%;
}
.demo03 td {
    display: list-item;
    list-style: none;
    width: 100%;
    border-top: none;
}

/*endSP*/}