@charset "UTF-8";

/* ====================================
	共通スタイル
==================================== */
/* ページタイトル */
.page-title {
	margin-block: 1.5em 1em;
	font-size: 2.4rem;
	font-weight: 700;
}

.page-lead-text {
	font-size: 1.5rem;
	margin-bottom: 1.5em;
}

/* テーブル */
.compare-legend-list {
	margin-bottom: 1em;
	display: flex;
	justify-content: flex-start;
	font-size: 1.2rem;

	li:not(:first-child) {
		margin-left: 0.5em;
	}
}

.compare-table-wrapper {
	overflow-x: auto;
	position: relative;
}

.compare-table {
	inline-size: 100%;
	table-layout: fixed;
	border-bottom: solid 1px #727272;
	word-break: break-all;
	border-collapse: separate;
	border-spacing: 0px;

	th,
	td {
		padding: 0.5rem 0.5rem;
		text-align: center;
		border-top: solid 1px #727272;
	}

	th[scope="row"] {
		font-size: 1.4rem;
		background: var(--white-gray);
		position: sticky;
		left: 0;
		z-index: 2;
	}

	th[scope="col"],
	td {
		font-size: 1.4rem;
		border-left: solid 1px #727272;
	}

	em {
		font-weight: bold;
		text-decoration: underline;
		text-decoration-thickness: 3px;
		text-decoration-color: #FFD665;
		text-underline-offset: 4px;
		text-decoration-skip-ink: none;
	}
}

.selected {
	background: #FFFBF0;
}

.prod-link {
	display: block;

	&:hover {
		text-decoration-thickness: 2px;
	}
}

.prod-name {
	margin-bottom: 0.25em;
	font-size: 1.4rem;
	line-height: 1.2;
	font-weight: 700;
}

.prod-img {
	margin-top: 1em;
	padding: 0 5%;
}

.prod-link-text {
	font-size: 1.2rem;
	line-height: 1.2;
	font-weight: bold;

}

.prod-selected {
	font-size: 1.2rem;
	line-height: 1.2;
	font-weight: bold;
}

.arrow-right {
	margin-right: 0.25em;
	inline-size: 0.6em;
	block-size: 1em;
}

/* ボタンリンク一覧 */
.list-btn-links {
	display: flex;
	align-items: center;
	flex-direction: column;
	row-gap: 2rem;
	margin-top: 8rem;
}

/* .list-btn-links>li {
	inline-size: min(100%, 245px);
} */

.list-btn-links .btn-has-arrow-left {
	inline-size: 100%;
}

/* ====================================
	480px以上専用スタイル
==================================== */
@media screen and (width >=480px) {}

/* ====================================
	768px未満専用スタイル
==================================== */
@media screen and (width <768px) {

	/* テーブル */
	.compare-table {

		th,
		td {
			inline-size: 100px;
		}
	}
}

/* ====================================
	768px以上専用スタイル
==================================== */
@media screen and (width >=768px) {

	/* ページタイトル */
	.page-title {
		font-size: 4rem;
	}

	.page-lead-text {
		font-size: 1.8rem;
	}

	/* テーブル */
	.compare-legend-list {
		margin-bottom: 2rem;
	}

	.compare-table {
		/* min-inline-size: 1200px; */

		th,
		td {
			padding: 1rem 1rem;
		}

		th[scope="row"] {
			font-size: 1.6rem;
		}

		th[scope="col"],
		td {
			font-size: 1.6rem;
		}
	}

	.prod-name {
		font-size: 2.6rem;
	}

	.prod-img {
		padding: 0 22%;
	}

	/* ボタンリンク一覧 */
	.list-btn-links {
		flex-direction: row;
		justify-content: center;
		column-gap: 4rem;
		margin: 10rem auto 0;
	}

	.list-btn-links .btn-has-arrow-left {
		font-size: 1.8rem;
	}
}

/* ====================================
	768px以上1080px未満専用スタイル
==================================== */
@media screen and (768px <=width < 1080px) {}

/* ====================================
	1080px未満専用スタイル
==================================== */
@media screen and (width <1080px) {}

/* ====================================
	1080px以上専用スタイル
==================================== */
@media print,
screen and (1080px <=width) {}

/* ====================================
	ホバー、マウスポインタが有効なデバイス
==================================== */
@media (hover:hover) and (pointer: fine) {

	.prod-link:hover {
		text-decoration-thickness: 2px;
	}
}