@font-face {
	font-display: block;
	font-family: "xy-v3.1-font";
	src:
		url("/images/icons/v3/xy-v3.1-font.woff2") format("woff2"),
		url("/images/icons/v3/xy-v3.1-font.woff") format("woff");
}
.c-icon-v3,
.c-icon-v3-before::before,
.c-icon-v3-after::after {
	font-family: "xy-v3.1-font";
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-style: normal;
	font-variant: normal;
	font-weight: normal;
	text-decoration: none;
	text-transform: none;
}

.linkedBonus {
	font-family: "Hiragino Kaku Gothic ProN", sans-serif;
	box-sizing: border-box;
	max-width: 800px;
	width: 100%;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.linkedBonus__body {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	flex-direction: column;
	gap: 8px;
	box-sizing: border-box;
	width: 100%;
	padding: 32px;
	border: 1px solid var(--Border-Basic-Low, #d8d8d8);
	border-top: none;
	border-radius: 0 0 8px 8px;
	background-color: #fefaf3;
}
.linkedBonus__tagLabel {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: 0 8px;
	border-radius: 999px;
	background-color: var(--Surface-Accent-High, #c09c5e);
	color: var(--Text-Inverse-Medium, #ffffff);
	min-height: 18px;
	width: 124px;
	font-weight: var(--desktop-font-weight-normal, 300);
	font-size: var(--desktop-font-size-caption-medium, 12px);
	line-height: 1.5;
}
.linkedBonus .linkedBonus__tag {
	height: 18px;
}
.linkedBonus .linkedBonus__lead {
	color: var(--Text-Basic-High, #202020);
	font-weight: var(--desktop-font-weight-bold, 600);
	font-size: var(--desktop-font-size-body-medium, 16px);
	line-height: 1.5;
}
.linkedBonus .linkedBonus__note {
	color: var(--Text-Basic-Low, #8d8d8d);
	font-weight: var(--desktop-font-weight-normal, 300);
	font-size: var(--desktop-font-size-caption-medium, 12px);
	line-height: 1.5;
}
.linkedBonus__amount {
	color: var(--Text-Accent-Gold-High-Hovered, #b08945);
	font-weight: var(--desktop-font-weight-bold, 600);
	font-size: var(--desktop-font-size-body-medium, 16px);
	line-height: 1.5;
}
.linkedBonus__details {
	display: flex;
	flex-direction: column-reverse;
	width: 100%;
}
.linkedBonus .linkedBonus__summaryLabel {
	display: inline-flex;
	align-items: center;
	font-weight: var(--desktop-font-weight-bold, 600);
	font-size: var(--desktop-font-size-body-small, 14px);
	line-height: 1.5;
}
.linkedBonus .linkedBonus__summaryLabel.-close {
	display: none;
}
.linkedBonus .linkedBonus__summaryLabel.-open::after {
	content: "\f133";
	line-height: 1;
	font-size: 12px;
	color: var(--Icon-Basic-Medium, #8d8d8d);
}
.linkedBonus .linkedBonus__summaryLabel.-close::after {
	content: "\f147";
	line-height: 1;
	font-size: 12px;
	color: var(--Icon-Basic-Medium, #8d8d8d);
}
.linkedBonus__summary {
	display: flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	width: 100%;
	min-height: 44px;
	color: var(--Text-Basic-Low, #8d8d8d);
	list-style: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.linkedBonus__summary::-webkit-details-marker {
	display: none;
}
.linkedBonus__summary:active {
	color: var(--Text-Basic-Low-Pressed, #595959);
}
.linkedBonus__summary:active .linkedBonus__summaryLabel::after {
	color: var(--Icon-Basic-Medium-Pressed, #595959);
}
.linkedBonus__summary.is-opened .linkedBonus__summaryLabel.-open {
	display: none;
}
.linkedBonus__summary.is-opened .linkedBonus__summaryLabel.-close {
	display: inline-flex;
}
.linkedBonus__accordion {
	display: none;
	padding-bottom: 8px;
	text-align: left;
}
@media (any-hover: hover) {
	.linkedBonus__summary:hover {
		color: var(--Text-Basic-Low-Hovered, #737373);
	}
	.linkedBonus__summary:hover .linkedBonus__summaryLabel::after {
		color: var(--Icon-Basic-Medium-Hovered, #737373);
	}
	.linkedBonus__summary:active {
		color: var(--Text-Basic-Low-Pressed, #595959);
	}
	.linkedBonus__summary:active .linkedBonus__summaryLabel::after {
		color: var(--Icon-Basic-Medium-Pressed, #595959);
	}
}
