/*===============================================================================
SWELL使用時、.c-iconBtnのクラス名は使用禁止
ヘッダーのハンバーガーメニューと被る為
================================================================================*/

/* グラデーション背景ボタン・最大幅を指定してください */
.c-Btn {
	display: block;
	width: 100%;
	min-width: fit-content;
	text-align: center;
	padding: .8em;
	background: var(--c-gradient--btn);
	background-size: 100% auto;
	color: var(--c-brown);
	font-size: 1.25rem;
	font-family: var(--ff-m);
	font-weight: var(--fw-lg);
	transition: var(--ani-t--normal) ease-out;
}
/* 囲い線グラデーションボタン・最大幅を指定してください */
.c-Btn.--border {
	background: var(--c-bgc);
	color: var(--c-main);
	border: 1px solid transparent;
	border-image: linear-gradient(95.14deg, #B78230 0%, #E4BC6D 50%, #B78830 100%)1;
}
.c-Btn:is(:hover, :focus){
	background-size: 200% auto;
	color: var(--c-brown);
}

/*===============================================================================
アウトラインのボタン
================================================================================*/
.c-outlineBtn {
	display: inline-block;
	width: 100%;
	padding: 0.8em;
	text-align: center;
	background: var(--c-bgc);
	border: 2px solid;
	border-image: var(--c-gradient--btn) 2;
	color: var(--c-main);
	font-size: 1.25rem;
	font-weight: var(--fw-lg);
	font-family: var(--ff-m);
	cursor: pointer;
	transition: var(--ani-t--normal);
}

/* アニメーション */
.c-outlineBtn:is(:hover, :focus) {
	color: var(--c-main);
	background: var(--c-brown--light);
}