/*===============================================================================
SWELL使用時、.c-iconBtnのクラス名は使用禁止
ヘッダーのハンバーガーメニューと被る為
================================================================================*/
/*===============================================================================
>付きボタン
================================================================================*/
.c-arrowBtn {
	--c-text: var(--c-light);
	--arrow-size: 0.5em;
	--arrow-weight: 2px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	max-width: 10rem;
	width: 100%;
	min-width: fit-content;
	padding: .625em 1.125em;
	text-align: center;
	background: var(--c-gradient);
	background-size: auto 100%;
	border-radius: var(--bd-r--md);
	overflow: hidden;
	color: var(--c-text);
	cursor: pointer;
	transition: var(--ani-t--normal) ease-out;
}
.c-arrowBtn.--w--lg{
	max-width: 17.5rem;
}
/* アニメーション */
.c-arrowBtn:is(:hover, :focus) {
	background-size: auto 200%;
}

/* アイコン */
.c-arrowBtn::after {
	transform: rotate(45deg) translatey(-7%);
	content: "";
	width: var(--arrow-size);
	height: var(--arrow-size);
	border-top: var(--arrow-weight) solid var(--c-text);
	border-right: var(--arrow-weight) solid var(--c-text);
	transition: var(--ani-t--normal) ease-out;
}
/* アニメーション */
.c-arrowBtn:is(:hover, :focus)::after {
	margin-left: .5em;
}