@charset "utf-8";

/* ===============================
   テーブル共通ベース
================================= */
.table-base {
	table-layout: fixed;
	width: 100%;
	margin: 2rem 1rem;
}

.table-base th,
.table-base td {
	padding: 1rem;
	word-break: normal;
	overflow-wrap: break-word;
}

.table-base caption {
	font-weight: bold;
	padding: 0.2rem 1rem;
	background: #555;
	color: #fff;
	border-radius: 5px;
	margin-bottom: 1rem;
}


/* ===============================
   ta-op1（列見出しタイプ）
================================= */
.ta-op1 {
}

.ta-op1 .col1 {
	background: #eee;
}

.ta-op1 .col2 {
	background: #dde8f6;
}


/* ===============================
   ta-op2（行見出しタイプ）
================================= */
.ta-op2 thead th {
	background: #ccc;
	font-weight: bold;
	text-align: center;
}

.ta-op2 tbody th {
	background: #eee;
	font-weight: bold;
	text-align: center;
}

.ta-op2 td {
	text-align: center;
}


/* ===============================
   3分割 20:20:60
================================= */
.col-20-20-60 .col1 { width: 20%; }
.col-20-20-60 .col2 { width: 20%; }
.col-20-20-60 .col3 { width: 60%; }


/* ===============================
   等幅テーブル
================================= */
.equal-width th,
.equal-width td {
	width: auto;
}

.equal-width col {
	width: calc(100% / var(--col-count));
}


/* ===============================
   線あり
================================= */
.table-lines {
    border-collapse: collapse;
    border-top: 1px solid #999;
}

.table-lines th,
.table-lines td {
    border: 1px solid #999;
}


/* ===============================
   線なし
================================= */
.table-no-lines {
    border-collapse: separate;
    border-spacing: 0 1rem;
}



/* ===============================
   左背景あり
================================= */
.table-left-bg th {
	background: #f0f0f0;
	width: 30%;
	text-align: left;
}



/* ===============================
   左背景なし
================================= */
.table-left-no-bg th {
	background: transparent;
}


/* ===============================
   行間あけ
================================= */
.table-row-gap {
	border-collapse: separate;
	border-spacing: 0 1rem;
}

.table-row-gap th {
	width: 20%;
	background: #cadde8;
	border-radius: 4px;
}


/* ===============================
   2:8 比率
================================= */
.table-2-8 th {
	width: 20%;
}

.table-2-8 td {
	width: 80%;
}