/*
 * 「あわせて確認したい情報」共通コンポーネント。
 *
 * カード装飾を避け、サービス一覧・課題一覧と同じく
 * 罫線、余白、文字の階層で関連ページを落ち着いて案内する。
 */

.p-related {
	border-top: 0;
	background: #ffffff;
}

.p-related__title {
	margin: 0 0 28px;
	color: var(--color-heading);
	font-size: var(--font-size-h2);
	font-weight: 500;
	line-height: 1.5;
}

.p-related__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 56px;
	margin-top: 0;
	border-top: 0;
}

.p-related__list a,
.p-related__list a:nth-child(odd),
.p-related__list a:nth-child(even) {
	position: relative;
	display: grid;
	min-width: 0;
	min-height: 104px;
	grid-template-columns: minmax(0, 1fr) 10px;
	grid-template-areas:
		"title arrow"
		"description arrow";
	align-content: center;
	column-gap: 20px;
	row-gap: 4px;
	padding: 22px 0;
	border-top: 1px solid var(--color-border);
	border-right: 0;
	border-bottom: 0;
	background: transparent;
}

.p-related__list a:nth-last-child(-n + 2) {
	border-bottom: 1px solid var(--color-border);
}

.p-related__list strong {
	grid-area: title;
	justify-self: start;
	max-width: 100%;
	padding-bottom: 3px;
	color: var(--color-heading);
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: right bottom;
	background-size: 0 1px;
	font-size: var(--font-size-item-title);
	font-weight: 500;
	line-height: 1.6;
	transition: color 0.16s ease, background-size 0.3s ease;
}

.p-related__list .p-related__description {
	grid-area: description;
	color: var(--color-text);
	line-height: 1.7;
}

.p-related__list .p-related__arrow {
	position: static;
	display: block;
	width: 7px;
	height: 7px;
	grid-area: arrow;
	align-self: center;
	justify-self: end;
	border-top: 1px solid #94a3b8;
	border-right: 1px solid #94a3b8;
	font-size: 0;
	line-height: 0;
	transform: rotate(45deg);
	transition: border-color 0.16s ease;
}

.p-related__list a:hover strong,
.p-related__list a:focus-visible strong {
	color: var(--color-primary-dark);
	background-position: left bottom;
	background-size: 100% 1px;
	text-decoration: none;
}

.p-related__list a:hover .p-related__arrow,
.p-related__list a:focus-visible .p-related__arrow {
	border-color: var(--color-primary);
}

@media (max-width: 760px) {
	.p-related__title {
		margin-bottom: 20px;
	}

	.p-related__list {
		grid-template-columns: 1fr;
		column-gap: 0;
	}

	.p-related__list a,
	.p-related__list a:nth-child(odd),
	.p-related__list a:nth-child(even) {
		min-height: 92px;
		padding: 20px 0;
	}

	.p-related__list a:nth-last-child(-n + 2) {
		border-bottom: 0;
	}

	.p-related__list a:last-child {
		border-bottom: 1px solid var(--color-border);
	}
}