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

/*===============================================================================
オレンジのボタン　最大幅400px・フォントサイズ20px・上下余白28px・矢印あり
================================================================================*/
.c-btn {
	--this-color: var(--c-light);
	position: relative;
	display: inline-block;
	background: var(--c-act01);
	color: var(--this-color);
	text-align: center;
	font-size: 1.25rem;
	font-weight: var(--fw-lg);
	padding: clamp(1.25rem, .76vw + 1.06rem, 1.75rem) 0;
	max-width: 25rem;
	width: 100%;
	transition: var(--ani-t--normal) ease-out;
}
.c-btn::before {
	position: absolute;
	content: "";
	width: 8px;
	height: 8px;
	border: 0;
	border-top: solid 2px var(--this-color);
	border-right: solid 2px var(--this-color);
	top: 50%;
	transform: translateY(-50%) rotate(45deg);
	right: 1.25rem;
	transition: var(--ani-t--normal) ease-out;
}
.c-btn:hover {
	background: #dfa656;
}
.c-btn:hover::before {
	right: 1rem;
}

.c-btn.--line {
	background: #06C755;
}

/* 矢印なしのボタンの指定 --no-arrow */
.c-btn.--no-arrow::before {
	content: none;
}

/* 最大幅520px --c-btn-xl */
.c-btn.--c-btn-xl {
	max-width: 32.5rem;
}

/* 最大幅480px・フォントサイズ24pxのボタンの指定 --c-btn-lg */
.c-btn.--c-btn-lg {
	max-width: 30rem;
	font-size: clamp(1.25rem, .38vw + 1.16rem, 1.5rem);
}

/* 上下余白20pxのボタンの指定 --c-btn-sm */
.c-btn.--c-btn-sm {
	padding: clamp(1rem, .38vw + .91rem, 1.25rem) 0;
}

/* 背景色（白） --light */
.c-btn.--light {
	--this-color: var(--c-blue-dark);
	background: var(--c-light);
}

/* 最大幅320px・フォントサイズ18px・上下余白16pxのボタンの指定 --c-btn-xs */
.c-btn.--c-btn-xs {
	padding: 1rem 0;
	font-size: 1rem;
}
@media (min-width: 600px) {
	.c-btn.--c-btn-xs {
		font-size: unset;
		max-width: 20rem;
	}
}