@charset "utf-8";

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

/*******************/
div.sns_item{
	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:50px; /*角*/
	-webkit-border-radius:50px;
	-webkit-transition:all .3s ease;
	transition:all .3s ease;
}

@media (max-width:767px){ /***以下スマホ向け***/
	div.sns_item{
		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 */
		border-radius:0;
	}
}

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

	.sns_icon{
		flex-direction:column;
	}

	.sns_icon li a.twitter::before{
		margin-bottom:10px;
	}

	.sns_icon li a::before{
		width:50px; /* Button width */
		height:50px; /* Button height */
		font-size:20px;
		line-height:50px; /* Button inner_height */
	}
}

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

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

.sns_icon li a[href*="youtube.com"]::before{
	background-color:#cd201f;
	content:"\f16a";
}