/* Simple Related Card */
.src-wrap {
	--src-accent: #6f98a8;
	--src-text: #2f3a40;
	--src-line: #0699e3;
	--src-bg: #fff;
	margin: 2.5em 0;
}

/* 見出し：左に細いアクセント線 */
.src-wrap__label {
	margin: 0 0 .9em;
	padding-left: .7em;
	border-left: 3px solid var(--src-accent);
	font-size: 1.95rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--src-text);
	letter-spacing: .04em;
}

/* ---- カード本体 ---- */
.src-card {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 12px;
	background: var(--src-bg);
	border: 1px solid var(--src-line);
	border-radius: 10px;
	text-decoration: none !important;
	color: var(--src-text);
	transition: border-color .2s;
}
.src-card:focus-visible { outline: 2px solid var(--src-accent); outline-offset: 2px; }

.src-card__thumb {
	flex: 0 0 160px;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 6px;
	background: #eef3f5;
}
.src-card__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0 !important;
}

.src-card__title {
	flex: 1;
	min-width: 0;
	font-size: 1.8rem;
	font-weight: 700;
	line-height: 1.6;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.src-card:hover .src-card__title { color: var(--src-accent); }

/* 右矢印（丸の中に ＞） */
.src-card::after {
	content: "";
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	margin-left: auto;
	border-radius: 50%;
	background: var(--src-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center / 18px;
	transition: transform .2s;
}
.src-card:hover::after { transform: translateX(3px); }

/* ---- 複数表示（グリッド） ---- */
.src-wrap--grid .src-wrap__items {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}
.src-wrap--grid .src-card {
	position: relative;
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
	padding: 0 0 14px;
	overflow: hidden;
}
.src-wrap--grid .src-card::after {
	position: absolute;
	right: 14px;
	bottom: 14px;
}
.src-wrap--grid .src-card__thumb {
	flex: none;
	width: 100%;
	border-radius: 0;
}
.src-wrap--grid .src-card__title {
	padding: 0 64px 0 14px;
	font-size: 1.8rem;
}

/* ---- スマホ ---- */
@media (max-width: 600px) {
	.src-card { gap: 12px; padding: 10px; }
	.src-card__thumb { flex-basis: 110px; }
	.src-wrap__label { font-size: 1.4rem; }
	.src-card__title { font-size: 1.2rem; }
	.src-card::after { flex-basis: 28px; width: 28px; height: 28px; background-size: 14px; }
	.src-wrap--grid .src-wrap__items { grid-template-columns: 1fr; }
	.src-wrap--grid .src-card { flex-direction: row; align-items: center; padding: 10px; }
	.src-wrap--grid .src-card__thumb { flex: 0 0 110px; width: auto; border-radius: 6px; }
	.src-wrap--grid .src-card__title { padding: 0; }
	.src-wrap--grid .src-card::after { position: static; }
}

@media (prefers-reduced-motion: reduce) {
	.src-card, .src-card::after { transition: none; }
}