.snsbottom{
  width: 100%;
  transition: 0.8s;
}
.snsbottom ul{
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: space-around;
}

.snsbottom li.sns-tile{
  color: white;
  text-align: center;
  width: 100%;
  margin: 1px;
  padding: 5px;
}
.snsbottom li.sns-tile:first-child{
}

.snsbottom li.sns-tile:last-child{
}

.snsbottom .sns-fb{ background-color: #3B5998;}
.snsbottom .sns-twitter{ background-color: #55acee;}
.snsbottom .sns-google{ background-color: #DB4437;}
.snsbottom .sns-line{ background-color: #1dcd00;}
.snsbottom .sns-hatena{ background-color: #00a5de;}
.snsbottom .sns-pocket{ background-color: #ef3f56;}

.fa-hatena2:before {
    content: "B!";
    font-size: 28px;
    font-family: Verdana;
    font-weight: bold;
    color: white;
    padding: 4.5px;
}

.snsbottom li a,
.snsbottom li a:hover,
.snsbottom li a:visited,
.snsbottom li a:active {
  color: white;
  text-decoration: none;
  background: none;
}

/* mobile */
@media screen and (max-width: 480px){
}

/* tablet min */
@media screen and (min-width: 481px) and (max-width: 767px){
}

/* mobile and tablet min */
@media screen and (max-width: 768px){
  .snsbottom{
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 30;
  }
  .snsbottom li.sns-tile{
    margin: 0;
  }
}

/* tablet max */
@media screen and (min-width: 769px) and (max-width: 979px){
}

/* PC */
@media screen and (min-width: 980px){
  .snsbottom li.sns-line{
    display: none;
  }
}