@layer components {
	/*
	 * ピルボタン（共有・移植元 .btn--pill）。白地・紺枠・紺字の丸型ボタン。
	 * mv-message（理念導線）・news-list（一覧導線）で共用。矢印は currentColor の
	 * インライン SVG（news-item と同形状）で色追従する。
	 */
	.nexray-pill {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 1.5rem; /* 24px */
		min-width: 160px;
		padding: 1.25rem 3rem; /* 20px 48px */
		background: var(--wp--preset--color--base);
		border: 1px solid var(--wp--preset--color--primary);
		border-radius: 999px;
		color: var(--wp--preset--color--primary);
		font-size: 1rem;
		font-weight: 600;
		letter-spacing: var(--nexray-letter-spacing-wide);
		line-height: 1.4;
		text-decoration: none;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
		transition:
			background var(--nexray-transition),
			color var(--nexray-transition),
			border-color var(--nexray-transition),
			box-shadow var(--nexray-transition);
	}

	.nexray-pill:hover,
	.nexray-pill:focus-visible {
		background: var(--wp--preset--color--blue-950);
		border-color: var(--wp--preset--color--base);
		color: var(--wp--preset--color--base);
		box-shadow: none;
	}

	.nexray-pill__arrow {
		display: block;
		width: 29px;
		height: 10px;
		flex-shrink: 0;
		color: currentColor;
		transition: transform var(--nexray-transition);
	}

	.nexray-pill:hover .nexray-pill__arrow,
	.nexray-pill:focus-visible .nexray-pill__arrow {
		transform: translateX(4px);
	}

	/*
	 * 小サイズ修飾子（#236 IR FAQ 導線など、本文内の控えめな導線用）。
	 * 基準 pill より padding / font / gap / min-width を絞る。ラベルが長い場合は
	 * 折り返して高さが伸びる（inline-flex のまま）。
	 */
	.nexray-pill--sm {
		gap: 1rem; /* 16px */
		min-width: 0;
		padding: 1rem 1.5rem; /* 16px 24px（基準 pill の 20px 48px を圧縮） */
		font-size: 0.9375rem; /* 15px（small 14px と body 16px の中間） */
	}
}