@charset "UTF-8";

/* 比較表 start--------------- */
.comparison-table-wrapper {
	height: auto;
	--border-width: clamp(3px, 0.5vw, 6px);
	position: relative;
	border-radius: var(--radius2);
	line-height: 1.8;
	overflow-y: hidden !important;
	overflow-x: auto !important;
	padding: var(--border-width);
}

.comparison-table-wrapper::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: calc(100% - var(--border-width) * 2);
	height: calc(100% - var(--border-width) * 2);
	pointer-events: none;
	border-radius: var(--radius2);
	border: var(--border-width) solid var(--color01);
}

/* tableタグ--- */

.comparison-table {
	width: 100%;
    min-width: 800px;
	table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 0;
    /* width: 100%; */
    background: #fff;
    border-radius: var(--radius2);
    vertical-align: middle;
    font-weight: var(--fw_medium);
    overflow-x: auto;
    position: relative;
	line-height: 1.5;
}


.comparison-table th,
.comparison-table td {
	--paddingX: 16px;
	--paddingY: 18px;
	border-bottom: var(--border-width) solid var(--color01);
	border-right: var(--border-width) solid var(--color01);
	padding: var(--paddingX) var(--paddingY);
	text-align: center;
	background: var(--color_white);
	vertical-align: middle;
}

/* .comparison-table th:first-child,
.comparison-table td:first-child {
	min-width: 8em;
} */

.comparison-table tbody th,
.comparison-table tbody td {
	border-bottom: var(--border-width) solid var(--color02);
}

.comparison-table th {
    font-weight: bold;
    color: var(--color_black);
}

.comparison-table th:last-child,
.comparison-table tr:not(:last-child) td:last-child {
	border-right: none;
}

.comparison-table tbody tr:last-child th:first-child {
	border-left: none;
	border-bottom: none;
	border-radius: 0 0 0 var(--radius2);
}

.comparison-table tr:last-child td:not(:first-child) {
	border-bottom: none;
}

:has(.color05_underline) td {
	position: relative;
}

.color05_underline {
	width: calc(100% + var(--paddingX) * 1);
	height: var(--border-width);
	position: absolute;
	bottom: calc(var(--border-width) * -1);
	left: 50%;
	transform: translateX(-50%);
	background-color: var(--color05);
	display: block;
}

.comparison-table tr:last-child td:last-child {
	border-right: none;
	border-bottom: none;
}

.comparison-table th:first-child,
.comparison-table td:first-child {
	width: 8em;
	position: sticky;
	left: 0;
	z-index: 3;
}

.comparison-table thead th:first-child {
	border-bottom: var(--border-width) solid var(--color01);
}

.comparison-table .main-product {
	background: var(--color05);
	color: var(--color_white);
	min-width: 10em;
}

.comparison-table .main-product + .main-product::after {
	content: "";
	position: absolute;
	top: calc(var(--border-width) * -1);
	left: calc(var(--border-width) * -1);
	width: calc(100% + var(--border-width));
	height: calc(100% + var(--border-width) * 2);
	border-left: var(--border-width) solid var(--color_white);
	z-index: 2;
}

.comparison-table thead tr:first-child th:first-child {
	border-top-left-radius: calc( var(--radius2) - var(--border-width));
}
.comparison-table thead tr:first-child th:last-child {
	border-top-right-radius: calc( var(--radius2) - var(--border-width));
}
.comparison-table tbody tr:last-child td:first-child {
	border-bottom-left-radius: calc( var(--radius2) - var(--border-width));
}
.comparison-table tbody tr:last-child td:last-child {
	border-bottom-right-radius: calc( var(--radius2) - var(--border-width));
}

/* 角丸のため、左端・上端のborderを消す */
.comparison-table th, .comparison-table td {
	border-top: none;
	border-left: none;
}

.main-product {
	position: relative;
}
.main-product::before {
	content: "";
	position: absolute;
	top: calc(var(--border-width) * -1);
	left: calc(var(--border-width) * -1);
	width: calc(100% + var(--border-width) * 2);
	height: calc(100% + var(--border-width) * 2);
	height: calc(100% + var(--border-width) * 1);
	border-bottom: var(--border-width) solid var(--color05);
	background-color: var(--color05);
	z-index: 2;
}

thead .main-product span {
	position: relative;
	z-index: 2;
	letter-spacing: 0.05em;
}

.main-product-text {
	position: relative;
	z-index: 2;
}
.main-product-text::before	 {
	content: "";
	position: absolute;
	top: 0;
	left: calc(var(--border-width) * -1);
	width: var(--border-width);
	height: 100%;
	background-color: var(--color05);
	z-index: 1;
}
.main-product-text::after	 {
	content: "";
	position: absolute;
	top: 0;
	right: calc(var(--border-width) * -1);
	width: var(--border-width);
	height: 100%;
	background-color: var(--color05);
	z-index: 1;
}

.comparison-table td {
	text-align: left;
	width: fit-content;
}

.comparison-table td.text-center {
	text-align: center;
}

/* 注釈 */
.note {
	font-size: 12px;
	color: var(--color_black);
	margin-top: 4px;
	display: block;
}

/* 遮熱効果（性能面の比較） */

.comparison-table.second.wrapper::after {
	background-color: var(--color_grey01);
}

.comparison-table.second .comparison-table th:first-child,
.comparison-table.second .comparison-table td:first-child {
	min-width: 7em;
}

/* 比較表 end --------------- */

/* メディアクエリ start --------------- */

@media (max-width: 900px) {
	.comparison-table.first,
	.comparison-table.second,
	.comparison-table.third {
		min-width: 700px;
	}

	.comparison-table th, .comparison-table td {
		padding: 10px 12px;
	}

	.comparison-table-wrapper {
		width: calc(100vw - var(--size2));
		overflow-y: hidden;
		overflow-x: auto;
		padding: 0;
	}

	.comparison-table-wrapper::after {
		display: none;
	}

	.comparison-table th:first-child,
	.comparison-table td:first-child {
		background-color: var(--color04);
	}

	.comparison-table.second th:first-child,
	.comparison-table.second td:first-child,
	.comparison-table.third th:first-child,
	.comparison-table.third td:first-child {
		background-color: var(--color04);
	}
}

/* スマートフォン用 */
@media screen and (max-width: 768px) {
	.comparison-table thead tr:first-child th:first-child::after {
		content: "";
		position: absolute;
		bottom: calc(var(--border-width) * -1);
		left: 0;
		width: 100%;
		height: var(--border-width);
		background-color: var(--color01);
		z-index: 2;
	}

	.comparison-table .fs20 {
		font-size: 15px;
	}

	.comparison-table .fs18 {
		font-size: 14px;
	}
	
	.comparison-table .fs16 {
		font-size: 13px;
	}

}

@media (max-width: 600px) {
    .comparison-table th, .comparison-table td {
    font-size: 12px;
    padding: 4px 6px;
    }

	.comparison-table.second {
		min-width: 500px;
	}

}

@media screen and (max-width: 480px) {
	.comparison-table-wrapper {
		width: calc(100vw - var(--size1));
		border-radius: var(--radius2) 0 0 var(--radius2);
	}

}