/*===============================================================================
>のあるボタン
================================================================================*/
.c-arrowBtn{
	--c-bg: var(--c-dark);
	--c-text: var(--c-light);
	--arrow-size: .5em;
	--arrow-weight: 2px;
	--arrow-posi-x: 1.75rem;
	position: relative;
	display: inline-block;
	max-width: 22.5rem;
	width: 100%;
	min-width: max-content;
	padding-top: 1rem;
	padding-bottom: 1rem;
	padding-right: calc( var(--arrow-posi-x) * 2 );
	padding-left: var(--arrow-posi-x);
	text-align: left;
	border-radius: 9999px;
	overflow: hidden;
	background: var(--c-bg);
	border: 1px solid var(--c-bg);
	color: var(--c-text);
	font-size: 1.125rem;
	font-weight: var(--fw-lg);
	cursor: pointer;
	transition: var(--ani-t--normal) ease-out;
}
@media (min-width: 600px){
	.c-arrowBtn{
		--arrow-posi-x: 2rem;
		padding-top: 1.25rem;
		padding-bottom: 1.25rem;
		padding-right: calc( var(--arrow-posi-x) * 2 );
		padding-left: var(--arrow-posi-x);
		font-size: 1.25rem;
	}
}

/* アニメーション */
.c-arrowBtn:is(:hover, :focus), 
.c-arrowBtn.--light:is(:hover, :focus){
	--c-bg: var(--c-main);
	--c-text: var(--c-light);
}

/* バリエーション */
.c-arrowBtn.--light{
	--c-bg: var(--c-light);
	--c-text: var(--c-dark);
}
.c-arrowBtn.--light:is(:hover, :focus){
/* 	--c-bg: var(--c-dark);
	--c-text: var(--c-light);
	border: 1px solid var(--c-dark); */
}

/* アイコン */
.c-arrowBtn::after{
	position: absolute;
	top: 50%;
	right: var(--arrow-posi-x);
	transform: translate(0, -50%) rotate(45deg);
	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.--no-icon{
	content: none;
}