.snsShare, .snsTwitter, .snsFacebook, .snsGoogle {
	width: 100px;
	height: 75px;
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
	background-size: 100px 47px;
	background-position: center center;
	background-repeat: no-repeat no-repeat;
	z-index: 0;
	opacity: 0;
	vertical-align: bottom;
	transition: all 1s ease 0s;
}
.snsShare {
	display: block;
	position: relative;
	top: auto;
	left: auto;
	background-image: url(./img/snsShare.png);
	z-index: 5;
	opacity: 1;
	vertical-align: middle;
}
.snsTwitter {
	background-image: url(./img/snsTwitter.png);
	z-index: 1;
}
.snsFacebook {
	background-image: url(./img/snsFacebook.png);
	z-index: 2;
}
.snsGoogle {
	background-image: url(./img/snsGoogle.png);
	z-index: 3;
}
.snsShare:hover .snsTwitter {
	left: 100%;
	opacity: 1;
}
.snsShare:hover .snsFacebook {
	left: 200%;
	opacity: 1;
}
.snsShare:hover .snsGoogle {
	left: 300%;
	opacity: 1;
}


.snsShareS {
	margin-top: 2em;
	clear: both;
}
.snsShareS a {
	padding: 0.5em 0.5em 0.125em 1.5em;
	background-repeat: no-repeat no-repeat;
	background-position: left center;
	background-size: 16px 16px;
	text-decoration: none;
	font-size: 0.9em;
	transition: none;
}
.snsShareS a:hover {
	border-bottom: 2px dotted #404040;
}
.snsTwitterS {
	background-image: url(./img/snsTwitterS.png);
	z-index: 1;
}
.snsFacebookS {
	background-image: url(./img/snsFacebookS.png);
	z-index: 2;
}
.snsGoogleS {
	background-image: url(./img/snsGoogleS.png);
	z-index: 3;
}

@media screen and (max-width: 500px){
.snsShare, .snsTwitter, .snsFacebook, .snsGoogle {
	width: calc(100px / 3 * 2);
	height: calc(75px / 3 * 2);
	background-size: calc(100px / 3 * 2) calc(47px / 3 * 2);
}
.snsShare .snsTwitter,
.snsShare:hover .snsTwitter {
	left: 125%;
	opacity: 1;
}
.snsShare .snsFacebook,
.snsShare:hover .snsFacebook {
	left: 250%;
	opacity: 1;
}
.snsShare .snsGoogle,
.snsShare:hover .snsGoogle {
	left: 375%;
	opacity: 1;
}

}