/*===============================================================================
SWELL使用時、.c-iconBtnのクラス名は使用禁止
ヘッダーのハンバーガーメニューと被る為
================================================================================*/
/*===============================================================================
グラデーション
================================================================================*/
.c-gradientBtn{
	position: relative;
	z-index: 0;
	display: inline-block;
	text-align: center;
	max-width: 25rem;
	width: 100%;
	padding: .825em 1.25em;
	background: var(--c-gradient);
	background-size: 100% auto;
	border-radius: 99999px;
	overflow: hidden;
	font-weight: var(--fw-lg);
	font-family: var(--ff-gz);
	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;
	opacity: .7;
}

/* アイコン */
.c-gradientBtn__icon{
	position: absolute;
	top: 50%;
	right: 2em;
	transform: translateY(-50%);
	width: .4em;
	transition: var(--ani-t--normal) ease-out;
}
.c-gradientBtn:is(:hover, :focus) .c-gradientBtn__icon{
	transform: translate(.2em, -50%);
}


/*===============================================================================
テキストボタン
================================================================================*/
.c-textBtn {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	width: fit-content;
	padding: 0.3em 0;
	color: var(--c-act01);
	font-family: var(--ff-gz);
	font-weight: var(--fw-lg);
	cursor: pointer;
	transition: var(--ani-t--normal) ease-out;
}
.c-textBtn:is(:hover, :focus) {
	opacity: 0.8;
}
/* サークル */
.c-textBtn__icon svg {
	width: .75em;
	transition: var(--ani-t--normal) ease-out;
}
.c-textBtn:is(:hover, :focus) .c-textBtn__icon svg{
	transform: translateX(.25em);
}



/*===============================================================================
塗りつぶしボタン
================================================================================*/
.c-fillBtn{
	display: inline-block;
	width: 100%;
	min-width: fit-content;
	padding: .8em;
	text-align: center;
	background: var(--c-main);
	outline: 1px solid var(--c-light);
	outline-offset: -.2em;
	font-size: 1.25rem;
	font-family: var(--ff-gz);
	color: var(--c-light);
	cursor: pointer;
	transition: var(--ani-t--normal) ease-out;
}
/* アニメーション */
.c-fillBtn:is(:hover, :focus){
	outline-offset: 0px;
}



/*===============================================================================
角丸ボタン：投稿一覧
================================================================================*/
.c-radiusBtn{
	display: grid;
	grid-template-columns: repeat(auto-fit,minmax(11.25rem,1fr));
	align-items: center;
	gap: 1rem;
}
@media (min-width: 768px){
	.main.archives .c-radiusBtn{
		grid-template-columns: repeat(auto-fit,minmax(11.25rem,11.25rem));
	}
}
.c-radiusBtn__item{
	text-align: center;
	border: 2px solid var(--c-main);
	border-radius: 99999px;
	overflow: hidden;
}
.c-radiusBtn__link{
	display: inline-block;
	width: 100%;
	padding: .8em;
	background: var(--c-main);
	font-size: clamp(1rem, 0.821rem + 0.48vw, 1.25rem);
	font-weight: var(--fw-lg);
	font-family: var(--ff-gz);
	color: var(--c-light);
	transition: var(--ani-t--normal) ease-out;
}
.c-radiusBtn__link:is(:hover, :focus),
.c-radiusBtn__link.is-active{
	background: var(--c-light);
	color: var(--c-main);
}