.sns  {
	clear: both;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 11pt;
	position: relative;
	margin-top: 20px;
	margin-bottom: 20px;
	overflow: hidden;
	height: 130px;
	padding-top: 20px;
}
.sns ul{
	position: relative;
	left: 50%;
	float: left;
}
.sns li{
	position: relative;
	left: -50%;
	float: left;
}
.face {
	color: #fff;
	text-decoration: none;
	text-align: center;
	position: relative;
	z-index: 10;
	display: block;
	width: 90px;
	height: 90px;
	line-height: 90px;
	float: left;
	margin-right: 14px;
	margin-left: 14px;
}
 .face::before {
	content: '';
	background-color: #000080;
	display: block;
	position: absolute;
	width: 90px;
	height: 90px;
	z-index: -1;
	border-radius: 50%;
	box-shadow: 0 0 0 0 #fff, 0 0 0 0 #000080;
	transition: all .2s ease;
	-webkit-transition: all .2s ease;
}
.face:hover::before {
    transform: scale(0.8);
    -webkit-transform: scale(0.8);
    box-shadow:
        0 0 0 25px #fff,
        0 0 0 27px #000080;
}
.blog {
	color: #fff;
	text-decoration: none;
	text-align: center;
	position: relative;
	z-index: 10;
	display: block;
	width: 90px;
	height: 90px;
	line-height: 90px;
	float: left;
	margin-right: 14px;
	margin-left: 14px;
}
 .blog::before {
	content: '';
	background-color: #c80000;
	display: block;
	position: absolute;
	width: 90px;
	height: 90px;
	z-index: -1;
	border-radius: 50%;
	box-shadow: 0 0 0 0 #fff, 0 0 0 0 #c80000;
	transition: all .2s ease;
	-webkit-transition: all .2s ease;
}
.blog:hover::before {
	transform: scale(0.8);
	-webkit-transform: scale(0.8);
	box-shadow: 0 0 0 25px #fff, 0 0 0 27px #c80000;
}
.twit {
	color: #fff;
	text-decoration: none;
	text-align: center;
	position: relative;
	z-index: 10;
	display: block;
	width: 90px;
	height: 90px;
	line-height: 90px;
	float: left;
	margin-right: 14px;
	margin-left: 14px;
}
 .twit::before {
	content: '';
	background-color: #008eff;
	display: block;
	position: absolute;
	width: 90px;
	height: 90px;
	z-index: -1;
	border-radius: 50%;
	box-shadow: 0 0 0 0 #fff, 0 0 0 0 #008eff;
	transition: all .2s ease;
	-webkit-transition: all .2s ease;
}
.twit:hover::before {
	transform: scale(0.8);
	-webkit-transform: scale(0.8);
	box-shadow: 0 0 0 25px #fff, 0 0 0 27px #008eff;
}
.hp {
	color: #000;
	text-decoration: none;
	text-align: center;
	position: relative;
	z-index: 10;
	display: block;
	width: 90px;
	height: 90px;
	line-height: 90px;
	float: left;
	margin-right: 14px;
	margin-left: 14px;
}
 .hp::before {
	content: '';
	background-color: #dadf4f;
	display: block;
	position: absolute;
	width: 90px;
	height: 90px;
	z-index: -1;
	border-radius: 50%;
	box-shadow: 0 0 0 0 #fff, 0 0 0 0 #dadf4f;
	transition: all .2s ease;
	-webkit-transition: all .2s ease;
}
.hp:hover::before {
	transform: scale(0.8);
	-webkit-transform: scale(0.8);
	box-shadow: 0 0 0 25px #fff, 0 0 0 27px #dadf4f;
}
.insta {
	color: #FFF;
	text-decoration: none;
	text-align: center;
	position: relative;
	z-index: 10;
	display: block;
	width: 90px;
	height: 90px;
	line-height: 90px;
	float: left;
	margin-right: 14px;
	margin-left: 14px;
}
 .insta::before {
	content: '';
	background-color: #333333;
	display: block;
	position: absolute;
	width: 90px;
	height: 90px;
	z-index: -1;
	border-radius: 50%;
	box-shadow: 0 0 0 0 #fff, 0 0 0 0 #333333;
	transition: all .2s ease;
	-webkit-transition: all .2s ease;
}
.insta:hover::before {
	transform: scale(0.8);
	-webkit-transform: scale(0.8);
	box-shadow: 0 0 0 25px #fff, 0 0 0 27px #333333;
}