/**
 * HG Affiliate Box v0.1
 * upgrade-guide (#hg-lp) とは独立したクラス名空間。
 * サイトのダーク系トーンに合わせた最低限のスタイル。
 */

.hg-affiliate-box {
	--hg-aff-bg: #161b22;
	--hg-aff-border: #21262d;
	--hg-aff-text: #e6edf3;
	--hg-aff-text-muted: #8b949e;
	--hg-aff-cyan: #00d4ff;

	box-sizing: border-box;
	background: var(--hg-aff-bg);
	border: 1px solid var(--hg-aff-border);
	border-radius: 10px;
	padding: 20px 22px;
	margin: 28px 0;
	color: var(--hg-aff-text);
}

.hg-affiliate-box *,
.hg-affiliate-box *::before,
.hg-affiliate-box *::after {
	box-sizing: border-box;
}

.hg-affiliate-box__title {
	margin: 0 0 14px;
	padding: 0;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--hg-aff-text);
}

.hg-affiliate-box__buttons {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.hg-affiliate-box__button {
	display: flex;
	align-items: center;
	padding: 11px 16px;
	border-radius: 7px;
	text-decoration: none;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
	transition: opacity 0.2s, transform 0.1s;
}

.hg-affiliate-box__button:hover {
	opacity: 0.88;
	transform: translateX(2px);
}

.hg-affiliate-box__button--amazon {
	background: #232f3e;
	color: #ff9900;
	border: 1px solid #3d4f63;
}

.hg-affiliate-box__button--rakuten {
	background: #1a0000;
	color: #ff6666;
	border: 1px solid #3d1010;
}

.hg-affiliate-box__button--yahoo {
	background: #1a0010;
	color: #ff80aa;
	border: 1px solid #3d1030;
}

.hg-affiliate-box__button--paypay-fleamarket {
	background: #1a0508;
	color: #ff4466;
	border: 1px solid #3d1520;
}

.hg-affiliate-box__button--mercari {
	background: #1a0808;
	color: #ff4c4c;
	border: 1px solid #3d1515;
}

@media (max-width: 480px) {
	.hg-affiliate-box {
		padding: 16px 18px;
		margin: 24px 0;
	}

	.hg-affiliate-box__button {
		font-size: 12px;
		padding: 10px 14px;
	}
}