/**
 * ALVARA — テキストリンク（アンダーライン＋ホバーアニメ）
 * 参照: swell_child/member_plans.html → css/link-arrow.css
 */

.link-arrow,
.post_content .link-arrow,
.editor-styles-wrapper .link-arrow {
	position: relative;
	display: inline-block;
	font-size: 12.5px;
	font-weight: 400;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: inherit;
	text-decoration: none;
	padding-bottom: 0.32rem;
	transition: letter-spacing 0.42s cubic-bezier(0.22, 1, 0.36, 1), color 0.35s ease;
}

@media (min-width: 721px) {
	.link-arrow,
	.post_content .link-arrow,
	.editor-styles-wrapper .link-arrow {
		font-size: 13px;
	}
}

.link-arrow::before,
.link-arrow::after,
.post_content .link-arrow::before,
.post_content .link-arrow::after,
.editor-styles-wrapper .link-arrow::before,
.editor-styles-wrapper .link-arrow::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	pointer-events: none;
	transition: transform 0.48s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
}

.link-arrow::before,
.post_content .link-arrow::before,
.editor-styles-wrapper .link-arrow::before {
	background: currentColor;
	opacity: 0.32;
	transform: scaleX(1);
	transform-origin: left center;
}

.link-arrow::after,
.post_content .link-arrow::after,
.editor-styles-wrapper .link-arrow::after {
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
}

a.link-arrow:hover,
.related-card:hover .link-arrow {
	opacity: 1;
	letter-spacing: 0.17em;
}

a.link-arrow:hover::after,
.related-card:hover .link-arrow::after {
	transform: scaleX(1);
}

a.link-arrow:hover::before,
.related-card:hover .link-arrow::before {
	opacity: 0;
}

.related-card .link-arrow {
	align-self: flex-start;
	color: #fff;
}

.related-card .link-arrow::before {
	opacity: 0.5;
}

@media (prefers-reduced-motion: reduce) {
	.link-arrow,
	.link-arrow::before,
	.link-arrow::after,
	.post_content .link-arrow,
	.post_content .link-arrow::before,
	.post_content .link-arrow::after {
		transition: none;
	}

	a.link-arrow:hover::after,
	.related-card:hover .link-arrow::after {
		transform: scaleX(1);
	}

	a.link-arrow:hover,
	.related-card:hover .link-arrow {
		letter-spacing: 0.14em;
	}
}