.sns{
    margin-bottom: 20px;
    margin-top: 20px;
    border-top: 1px dotted #ccc;/*上に点線を*/
}
 
.sns p{
    margin-top: 20px;
    font-weight: bold;
}
 
.snstext{
    font-size: 15px;
    vertical-align: middle;
    padding-left: 10px;
    padding-right: 10px;
}
 
.sns ul {
list-style:none;
padding:0px;
margin-left:15px;
 
}
.sns li {
width:31%;
float:left;
padding:5px;
text-aligh:center;
list-style:none;
}
 
 
@media
only screen and (max-width : 900px){
.sns li {
        width:45%;}
 
}
@media
only screen and (max-width : 413px){
.sns li {
        width:45%;}
 
}
 
.sns li a {
font-size:20px;
position:relative;
display:block;
padding:10px;
color:#fff;
border-radius:6px;
text-align:center;
text-decoration: none;
text-shadow:1px 1px 0 rgba(255,255,255,0.3);
}
 
.sns li a:hover {
-webkit-transform: translate3d(0px, 5px, 1px);
-moz-transform: translate3d(0px, 5px, 1px);
transform: translate3d(0px, 5px, 1px);
box-shadow:none;
}
 
/* ツイッター */
.sns .twitter a {
background:#00acee;
box-shadow:0 5px 0 #0092ca;
}
.sns  .twitter a:hover {
background:#0092ca;
}
 
/* Facebook */
.sns  .facebook a {
background:#3b5998;
box-shadow:0 5px 0 #2c4373;
}
.sns .facebook a:hover {
background:#2c4373;
}
 
 
/* グーグル */
.sns .googleplus a {
    background: #dc4e41;
    box-shadow: 0 5px 0 #d51e31;
}
.sns .googleplus a:hover {
background:#bb4237;
}
 
 
/* はてぶ */
.sns .hatebu a {
background:#00a5de;
    box-shadow: 0 5px 0 #0081b8;
}
.sns .hatebu a:hover {
    background: #008cbd;
}
 
 
/* LINE */
.sns  .line a {
background:#25af00;
box-shadow:0 5px 0 #219900;
}
.sns .line a:hover {
background:#219900;
}
  
/* Pocket */
.sns  .pocket a {
background:#f03e51;
box-shadow:0 5px 0 #c0392b;
}
.sns  .pocket a:hover {
background:#c0392b;
}
 
/*ヘッダーのSNSを非表示に*/
header .sns{
display:none;}/* カスタム CSS をここに入力してください */