#sns  {
	clear: both;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 10pt;
	width: 250px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 60px;
	overflow: visible;
	height: 120px;
	margin-top: 0px;
}
#sns3  {
	clear: both;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 10pt;
	width: 500px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 60px;
	overflow: visible;
	height: 120px;
}
.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;
	margin-top: 20px;
}
 .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;
}
.face:hover{
	color: #fff;
}
.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;
	margin-top: 20px;
}
 .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;
}
.blog:hover{
	color: #fff;
}
.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;
	margin-top: 20px;
}
 .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;
}
.twit:hover{
	color: #fff;
}
.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;
	margin-top: 20px;
}
 .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;
}
.hp:hover{
	color: #000;
}