@charset "utf-8";

/***以下スマホ向け***/
@media (max-width:767px){
	div.contact ul,li{
		width:100%;
	}
}

/*******************/
div.contact{
	position:fixed;
	z-index:10;
}

.sns_icon{
	overflow:hidden;
	display:flex;
	list-style:none;
}

.sns_icon li a::before{
	color:#fff;
	text-align:center;
	font-family:FontAwesome;
	display:inline-block;
	border-radius:0; /*角*/
	-webkit-border-radius:0;
	-webkit-transition:all .3s ease;
	transition:all .3s ease;
}

@media (max-width:767px){ /***以下スマホ向け***/
	div.contact{
		width:100%;
		top:auto;
		left:0;
		right:0;
		bottom:0;
	}
	
	.sns_icon{
		width:100%;
		flex-direction:row;
	}
	
	.sns_icon li a::before{
		width:100%; /* Button width */
		height:50px; /* Button height */
		font-size:25px;
		line-height:52.5px; /* Button inner_height */
	}
}

@media (min-width:768px){ /***pc向け***/
	div.contact{
		width:50px;
		top:36%;
		right:0;
	}

	.sns_icon{
		flex-direction:column;
	}

	.sns_icon li a::before{
		width:50px; /* Button width */
		height:200px; /* Button height */
		font-size:22px;
		line-height:200px; /* Button inner_height */
		border-radius:12px 0 0 12px;
	}
}

.sns_icon li a:hover::before {
	opacity:0.7;
}

/******************icon参照*******************/
.sns_icon li a[href*="twitter.com"]::before{
	background-color:#55acee;
	content:"\f099";
}