@use "global/acms-common" as acms;
@use "global/common" as global;

/* ------------------------------
　　ボタン
------------------------------ */
.btn {
	background: global.$btn-default-color;
	border: 0;

	@include global.btn-base;
	@include global.btn-small;

	 &:hover {
		@include global.btn-colors(global.$btn-start-color, global.$btn-end-color, #FFF);
	}

	 &:active,
	 &:focus {
		background: global.$btn-active-color;
	}
}

/* ボタン　色付き */
.btn-attention {
	background: global.$btn-attention-default-color;
	border: 0;

	@include global.btn-base;
	@include global.btn-small;

	 &:hover {
		@include global.btn-colors(global.$btn-attention-start-color, global.$btn-attention-end-color, #FFF);
	}

	 &:active,
	 &:focus {
		background: global.$btn-attention-active-color;
	}
}

/* ボタンサイズ大 */
.btn-large {
	box-sizing: border-box;
	background: global.$btn-default-color;

	@include global.btn-base;
	@include global.btn-large;
	@include acms.transition(background-color .25s linear);

	 &:hover {
		background: global.$btn-hover-color;
	}

	 &:active,
	 &:focus {
		background: global.$btn-active-color;
	}
}

/* ボタンサイズ大 色付き */
.btn-attention-large {
	box-sizing: border-box;
	background: global.$btn-attention-default-color;

	@include global.btn-base;
	@include global.btn-large;
	@include acms.transition(background-color .25s linear);

	 &:hover {
		background: global.$btn-attention-hover-color;
	}

	 &:active,
	 &:focus {
		background: global.$btn-attention-active-color;
	}
}

/* デスクトップ：最大360pxボタン */
.btn-block-large {
	box-sizing: border-box;
	width: 100%;
	background: global.$btn-default-color;

	@include global.btn-base;
	@include global.btn-large;
	@include acms.transition(background-color .25s linear);

	 &:hover {
		background: global.$btn-hover-color;
	}

	 &:active,
	 &:focus {
		background: global.$btn-active-color;
	}
}

/* デスクトップ：最大360pxボタン 色付き */
.btn-attention-block-large {
	box-sizing: border-box;
	width: 100%;
	background: global.$btn-attention-default-color;

	@include global.btn-base;
	@include global.btn-large;
	@include acms.transition(background-color .25s linear);

	 &:hover {
		background: global.$btn-attention-hover-color;
	}

	 &:active,
	 &:focus {
		background: global.$btn-attention-active-color;
	}
}

@media (min-width : acms.$breakpoint-md-min) {
	.btn-block-large {
		max-width: 360px;
	}

	.btn-attention-block-large {
		max-width: 360px;
	}
}


.btn-search-block {
	width: 100%;
	max-width: 165px;
	margin: 0 auto;
}

@media (max-width : acms.$breakpoint-md-max) {
	.btn-search-block {
		@include global.btn-search-block;
	}
}



/* ボーダーボタン */
.home-btn {
	margin: 20px auto 10px;
}

.btn-border {
	display: inline-block;
	padding: 7px 10px;
	color: #333;
	border: 1px solid #CCC;
	border-radius: 4px;

	@include acms.font-size(16);

	[class*='acms-icon-'] {
		color: #CCC;

		@include acms.font-size(14);
	}

	 &:hover {
		text-decoration: none;
	}
}


/* 影付きボタン */
.btn-shadow {
	box-shadow: 0 1rem 1rem -0.75rem rgb(0 0 0 / 40%);
}

