/*===============================================================================
グラデーション
================================================================================*/
.c-gradientBtn{
	position: relative;
	z-index: 0;
	display: inline-block;
	text-align: center;
	max-width: 25rem;
	width: 100%;
	padding: 1em .75em;
	background: linear-gradient(91.85deg, #FFD9B6 0%, #F08CA0 40%, #DC1B80 100%);
	background-size: 100% auto;
	border-radius: 99999px;
	overflow: hidden;
	font-weight: var(--fw-lg);
	font-size: 1.25rem;
	color: var(--c-light);
	cursor: pointer;
	transition: var(--ani-t--normal) ease-out;
}
.c-gradientBtn:is(:hover, :focus){
	background-size: 200% auto;
	color: var(--c-light);
}




/*===============================================================================
四角いボタン
================================================================================*/
.c-squaretBtn{
	--line-size: 4em;
	position: relative;
	display: inline-block;
	max-width: 17.5rem;
	width: 100%;
	min-width: fit-content;
	padding: 0.875em;
	text-align: center;
	background: rgba(51, 51, 51, 0.7);
	color: var(--c-light);
	font-size: 1.25rem;
	font-weight: var(--fw-lg);
	cursor: pointer;
	transition: var(--ani-t--normal);
}
/* アニメーション */
.c-squaretBtn:is(:hover, :focus){
	background: rgba(255, 255, 255, 0.7);
	color: var(--c-dark);
}
/* 初期の線 */
.c-squaretBtn::after{
	position: absolute;
	top: 50%;
	right: 0;
	transform: translate(50%, -50%);
	content: "";
	width: var(--line-size);
	height: 1px;
	background: var(--c-light);
	transform-origin: right;
	transition: var(--ani-t--normal);
}
/* アニメーション */
.c-squaretBtn:is(:hover, :focus)::after{
	background: var(--c-dark);
}