/*
----------------------------------------

使用するfooter以外のcssを削除してください。

----------------------------------------
*/

/*
@import url( './footer/footer-01.css' );
@import url( './footer/footer-02.css' );
*/


/*
----------------------------------------

sp-fix

----------------------------------------
*/

footer .contact-btn a {
	border: solid 1px rgba( 255, 255, 255, .2 );
	background: url( ../img/common/svg/icon-contact-wh.svg ) left calc( 50% - 5rem ) center no-repeat;
}

#sp-fix {
	position: fixed;
	right: 0;
	bottom: -40px;
	left: 0;
	background: #F5F5F5;
	padding: 10px;
	opacity: 0;
	visibility: hidden;
	z-index: -1;
	transition: all .2s;
}

#sp-fix .btn {
	flex: 1;
}

#sp-fix .btn + .btn {
	margin-left: 10px;
}

#sp-fix .btn a {
	display: block;
	background: var( --base-color );
	color: #fff;
	letter-spacing: 0;
	padding: 11px 5px;
}

#sp-fix .btn a::before {
	content: '';
	width: 18px;
	height: 18px;
	display: inline-block;
	vertical-align: middle;
	margin: 2px;
}

#sp-fix .tel a::before {
	background: url( ../img/common/svg/icon-phone-wh.svg ) left center no-repeat;
}

#sp-fix .mail a {
	background: var( --main-color );
}

#sp-fix .mail a::before {
	background: url( ../img/common/svg/icon-contact-wh.svg ) left center no-repeat;
	margin-right: 5px;
}


/* 768 */

@media screen and ( max-width: 768px ) {

	#sp-fix.active {
		bottom: 0;
		opacity: 1;
		visibility: visible;
		z-index: 999;
		overflow: auto;
	}

	#sp-fix {
		min-width: 375px;
	}

}


/*
----------------------------------------
hover
----------------------------------------
*/

@media screen and ( min-width: 768px ) {

	footer .contact-btn a:hover {
		border: solid 1px rgba( 255, 255, 255, .2 );
		background: rgba( 255, 255, 255, .2 ) url( ../img/common/svg/icon-contact-wh.svg ) left calc( 50% - 5rem ) center no-repeat;
	}

}