/*===============================================================================
SWELL使用時、.c-iconBtnのクラス名は使用禁止
ヘッダーのハンバーガーメニューと被る為
================================================================================*/
/*===============================================================================
沈み込みボタン
================================================================================*/
.c-blockBtn{
	--c-current: var(--c-light);
	--c-bg: #4AA0F5;
	--c-shadow: #327bc4;
	max-width: 35rem;
	background: var(--c-bg);
	box-shadow: 0 4px 0 var(--c-shadow);
	text-shadow: 0 1px 2px rgba(51, 51, 51, 0.25);
	color: var(--c-current);
	cursor: pointer;
	transition: var(--ani-t--normal) ease-out;
}
/* アイコンも同時に色変更可能 */
.c-blockBtn:is(:focus, :hover){
	box-shadow: 0 0 0 var(--c-shadow);
	transform: translateY(4px);
}

/*===============================
* カラーバリエーション
* =================================*/
/* オレンジ */
.c-blockBtn.--c-act01{
	--c-bg: var(--c-act01);
	--c-shadow: #D98429;
}
/* 水色 */
.c-blockBtn.--c-act02{
	--c-bg: var(--c-act02);
	--c-shadow: #6695C3;
}
.c-blockBtn.--c-act02--dark{
	--c-bg: var(--c-act02--dark);
	--c-shadow: #327BC4;
}
/* 黄色 */
.c-blockBtn.--c-act03{
	--c-current: var(--c-main);
	--c-bg: #FFF479;
	--c-shadow: #DBCE3C;
}
/* 緑色 */
.c-blockBtn.--c-green{
	--c-bg: var(--c-green);
	--c-shadow: #58B128;
}
/* LINE */
.c-blockBtn.--c-line{
	--c-bg: #06C755;
	--c-shadow: #1FA656;
}
/* 薄水色 */
.c-blockBtn.--c-main{
	--c-current: var(--c-main);
	--c-bg: var(--c-blue);
	--c-shadow: var(--c-blue--dark);
}
/* 薄水色 */
.c-blockBtn.--c-blue--dark{
	--c-current: var(--c-light);
	--c-bg: var(--c-blue--dark);
	--c-shadow: #879CB0;
}
/* 灰色 */
.c-blockBtn.--c-gray{
	--c-current: var(--c-dark);
	--c-bg: var(--c-gray);
	--c-shadow: #ccc;
}



/*===============================================================================
四角ボタン
================================================================================*/
.c-squareBtn{
	--icon-size: 1.33em;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	width: 100%;
	min-width: fit-content;
	padding: 0.4em;
	text-align: center;
	border-radius: var(--bd-r--xs);
	font-size: 1.5rem;
	font-weight: var(--fw-lg);
}
/* アイコン */
.c-squareBtn svg{
	width: var(--icon-size);
}

/*===============================
 * バリエーション
 * =================================*/
.c-squareBtn.--rounded{
	padding: .8em .5em;
	border-radius: 100vmax;
}



/*===============================================================================
角丸ボタン＋アイコン
================================================================================*/
.c-roundedBtn{
	--icon-size: .9em;
	position: relative;
	display: inline-block;
	width: 100%;
	padding: clamp(1rem, 0.643rem + 0.95vw, 1.5rem) calc( var(--icon-size) + 0.3em * 2 );
	text-align: center;
	border-radius: 100vmax;
	font-size: 1.5rem;
	font-weight: var(--fw-lg);
}
/*アイコン*/
.c-roundedBtn svg{
	position: absolute;
	top: 50%;
	right: 0.7em;
	transform: translate(0, -50%);
	width: var(--icon-size);
	transition: var(--ani-t--normal) ease-out;
}
.c-roundedBtn:is(:focus, :hover) svg{
	transform: translate(0.6em, -50%);
}



/*===============================================================================
大ボタン：使用箇所：サービス等
================================================================================*/
.c-largeBtn{
	--icon-size: 1rem;
	position: relative;
	display: inline-block;
	width: 100%;
	padding: 1.25rem calc( var(--icon-size) + .75rem * 2 );
	text-align: center;
	border-radius: var(--bd-r--sm);
	font-size: clamp(1.5rem, 1.429rem + 0.36vw, 1.75rem);
	font-weight: var(--fw-xl);
}
/*アイコン*/
.c-largeBtn svg{
	position: absolute;
	top: 50%;
	right: 1.25rem;
	transform: translate(0, -50%);
	width: var(--icon-size);
	transition: var(--ani-t--normal) ease-out;
}
.c-largeBtn:is(:focus, :hover) svg{
	transform: translate(0.5rem, -50%);
}
/*===============================
* バリエーション
* =================================*/
.c-largeBtn.--double svg:nth-of-type(1){
	left: 1.25rem;
}
.c-largeBtn.--double svg:nth-of-type(1),
.c-largeBtn.--double svg:nth-of-type(2){
	transform: translate(0, -50%) rotate(90deg);
}
.c-largeBtn.--double:is(:focus, :hover) svg:nth-of-type(1),
.c-largeBtn.--double:is(:focus, :hover) svg:nth-of-type(2){
	transform: translate(0, 0) rotate(90deg);
}

.c-largeBtn:has(.c-largeBtn__icon){
	display: inline-flex;
	gap: .5em;
	align-items: center;
	padding: 1.25rem .8em;
	text-align: left;
}
.c-largeBtn__icon{
	width: 1.9em;
}