@charset "UTF-8";

/* =============================================================
   Commercial transaction act page (business/commercial/)
   Shared parts (#breadcrumb / #page-hero / .section-ttl) come
   from common.css. This file only holds the disclosure table
   and its supporting prose.
   ============================================================= */

/* .commercial-lead: intro paragraph above the table */
.commercial-lead {
	max-width: 1000px;
	margin: 0 auto 32px;
	font-size: 14px;
	line-height: 1.75;
	letter-spacing: .04em;
	color: var(--col-text);
}

/* .commercial-table: key/value disclosure table (colors match colorfulbox.jp/commercial/'s table01.thGray) */
.commercial-table {
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	border-collapse: collapse;
	font-size: 14px;
	line-height: 1.6;
	letter-spacing: .04em;
	& th,
	& td {
		padding: 16px 24px;
		border: 1px solid #d6d6d6;
		text-align: left;
		vertical-align: middle;
	}
	& th {
		width: 220px;
		background: #ededed;
		color: var(--col-text);
		font-weight: 700;
	}
	& td {
		background: var(--col-white);
		color: var(--col-text);
	}
	& a {
		color: var(--col-primary);
		text-decoration: underline;
	}
}

/* bullet list used inside table cells (fees, cancellation conditions, etc.) — plain "・" prefix, same as colorfulbox.jp's .dotList */
.commercial-list {
	& li {
		position: relative;
		padding-left: 1.2em;
		& + li {
			margin-top: 6px;
		}
		&::before {
			content: "・";
			display: block;
			position: absolute;
			top: 0;
			left: 0;
		}
	}
}

/* .commercial-note: small print below the table */
.commercial-note {
	margin-top: 12px;
	font-size: 13px;
	line-height: 1.7;
	letter-spacing: .04em;
	color: var(--col-text-muted);
	text-align: center;
}

/* ---------- sp ---------- */
@media screen and (max-width: 640px) {
	.commercial-lead {
		font-size: 13px;
	}
	.commercial-table {
		font-size: 13px;
		& th,
		& td {
			padding: 10px 14px;
		}
		& th {
			width: 38%;
		}
	}
}