/* components/_table-compare.css */

.c-table-compare {
	width: 100%;
	border-spacing: 0;
	padding-left: clamp( calc( 1rem * 10 / var(--font-size) ),  5vw ,calc( 1rem *  60 / var(--font-size) ) );
	padding-right: clamp( calc( 1rem * 10 / var(--font-size) ),  5vw ,calc( 1rem *  60 / var(--font-size) ) );
	table-layout: fixed;
	display: block;
    overflow-x: auto;
	font-size: clamp( calc( 1rem * 12 / var(--font-size) ), 3vw, calc( 1rem * 20 / var(--font-size) ) );
}
@media ( max-width: 800px ) {
	.c-table-compare {
		width: calc( 100vw - 20px );
		border-top-right-radius: 0 !important;
		border-bottom-right-radius: 0 !important;
	}
	}


.c-table-compare thead,
.c-table-compare tbody {
    display: table;
    width: 100%;
	min-width: 480px;
}

	.c-table-compare td, 
	.c-table-compare th{
		text-align: center;
		vertical-align: center;
		height: 80px;
		word-wrap: break-word;
    	white-space: normal;
    	padding: 8px;
    
	}
	.c-table-compare th[scope="row"] {
		padding-left: 0;
	}

	.c-table-compare img {
		display: inline-block;
	}

	.c-table-compare > thead > tr > th:not(:empty),
	.c-table-compare > tbody > tr > :not(th) {
		width: clamp( 120px, 16vw, 240px );
	}

	.c-table-compare thead th {
		height: 120px;
	}

	.c-table-compare tbody th {
		text-align: left;
	}

	.c-table-compare > * > tr > *:first-child {
		width: clamp( 130px, 35vw ,100% );
		
	}

	.c-table-compare tbody > tr > * {
		border-top: 1px solid var(--color-grey-600);
	}

	.c-table-compare tbody > tr:last-child > * {
		padding-bottom: 80px;
		height: 160px;
	}

	.c-table-compare__logo {
		width: clamp( 80px, 20vw, 193px );
	}

	.c-table-compare img[src$="ok.svg"] {
		filter: grayscale(100%) brightness(0);
	}
	.c-table-compare img[src$="no.svg"] {
		filter: grayscale(100%) brightness(1.5);
	}