@layer components {
	/* ============================================================
	 * content-block … 左ボーダー付きの情報ブロック（見出し＋リンク/本文）。
	 * 採用情報（#90）の中途採用メール・新卒サイトの2導線で初出。移植元
	 * css/style.css の .content-block(-group) を移植。今後の下層ページでも再利用する
	 * 共有部品のため components/ に置く（ADR 0007）。
	 *
	 * リンクはコアブロックの段落内 <a>（コアは <a> 自体へ class を付けられないため
	 * 子孫セレクタ .content-block a で狙う）。外部リンク（target="_blank"）には
	 * 疑似要素で外部アイコンを自動付与する（インライン SVG をコンテンツに埋めない）。
	 * ============================================================ */
	.content-block-group {
		display: flex;
		flex-direction: column;
		gap: var(--wp--preset--spacing--20);
		width: 100%;
	}

	.content-block {
		display: flex;
		flex-direction: column;
		gap: var(--wp--preset--spacing--30);
		padding: var(--wp--preset--spacing--40);
		background-color: var(--wp--preset--color--slate-100);
		border-left: 4px solid var(--wp--preset--color--slate-300);
		/* 外部リンクアイコン（移植元インライン SVG と同図形）を currentColor で描くための mask 元。 */
		--nexray-ext-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E");
	}

	.content-block__title {
		margin: 0;
		font-size: var(--wp--preset--font-size--large);
		font-weight: 600;
		line-height: 1.2;
		color: var(--wp--preset--color--contrast);
	}

	/* ブロック内リンク（コア段落の <a>）。 */
	.content-block a {
		display: inline-flex;
		align-items: center;
		gap: 0.25em;
		color: var(--wp--preset--color--primary);
		text-decoration: underline;
		text-underline-offset: 3px;
		overflow-wrap: anywhere;
		transition: opacity var(--nexray-transition);
	}

	.content-block a:hover {
		opacity: 0.7;
	}

	/*
	 * 外部リンク（別タブ）に外部アイコンを付与。currentColor で色を継ぐため
	 * mask（アルファ）＋ background-color:currentColor で描く（移植元インライン SVG と同図形）。
	 */
	.content-block a[target="_blank"]::after {
		content: "";
		flex-shrink: 0;
		width: 1em;
		height: 1em;
		background-color: currentColor;
		-webkit-mask: var(--nexray-ext-icon) no-repeat center / contain;
		mask: var(--nexray-ext-icon) no-repeat center / contain;
	}
}