@charset "utf-8";


/* -- webfont setting ------------------------------------------------------------ */

@font-face{
  font-family : 'FontAwesome';
  src : url('../../../2016/common/fonts/fontawesome-webfont_v=4.5.0.eot');
  src : url('../../../2016/common/fonts/fontawesome-webfont_.eot#iefix&v=4.5.0') format('embedded-opentype'), url('../../../2016/common/fonts/fontawesome-webfont_v=4.5.0.woff2') format('woff2'), url('../../../2016/common/fonts/fontawesome-webfont_v=4.5.0.woff') format('woff'), url('../../../2016/common/fonts/fontawesome-webfont_v=4.5.0.ttf') format('truetype'), url('../../../2016/common/fonts/fontawesome-webfont_v=4.5.0.svg#fontawesomeregular') format('svg');
  font-weight : normal;
  font-style : normal;
}


/* -- social button base setting ------------------------------------------------------------ */

ul.social-button{
  line-height : 1;
  font-size : 80%;
  text-align:center;
}
ul.social-button li{
/*	float:left;
  margin-top : 20px; */
  display:inline-block;
  margin-right:20px;
  overflow : hidden;
  list-style-type : none;
}
html.ipad ul.social-button li { margin-right:5px; }
ul.social-button li:last-child { margin-right:0; }
ul.social-button li a{
  display : block;
  height : 20px;
  padding : 7px 15px 5px;
  border-radius : 3px;
  text-decoration : none;
  color : #ffffff;
  float : left;
}
ul.social-button li a:before{
  display : inline-block;
  font-family : FontAwesome;
  font-style : normal;
  font-weight : normal;
  line-height : 1;
  -webkit-font-smoothing : antialiased;
  -moz-osx-font-smoothing : grayscale;
  font-size : 130%;
}
ul.social-button li span{
  display : block;
  float : left;
  height : 20px;
  padding : 9px 15px 1px;
  margin-left : 15px;
  border : 1px solid #dddddd;
  background:#fff;
  border-radius : 3px;
  position : relative;
  z-index : 0;
}
ul.social-button li span:before{
  content : "";
  display : block;
  width : 0px;
  height : 0px;
  border-style : solid;
  border-width : 9px 9px 9px 0;
  border-color : transparent #ffffff transparent transparent;
  position : absolute;
  top : 50%;
  left : -8px;
  z-index : 0;
  margin-top : -9px;
}
ul.social-button li span:after{
  content : "";
  display : block;
  width : 0px;
  height : 0px;
  border-style : solid;
  border-width : 10px 10px 10px 0;
  border-color : transparent #dddddd transparent transparent;
  position : absolute;
  top : 50%;
  left : -10px;
  z-index : -1;
  margin-top : -10px;
}


/* -- twitter setting ------------------------------------------------------------ */

ul.social-button li.twitter a{
  width : 8.5em;
  background : #1b95e0;
}
ul.social-button li.twitter a:before{
  content : "\f099";
  margin-right : 10px;
  position : relative;
  top : 1px;
}
ul.social-button li.twitter a:hover{
  background : #77ccff;
}


/* -- facebook setting ------------------------------------------------------------ */

ul.social-button li.facebook a{
  width : 13em;
  background : #3a5795;
}
ul.social-button li.facebook a:before{
  content : "\f09a";
  margin-right : 10px;
  position : relative;
  top : 2px;
}
ul.social-button li.facebook a:hover{
  background : #4473d5;
}


/* -- google+ setting ------------------------------------------------------------ */

ul.social-button li.google a{
  width : 13em;
  background : #f44336;
}
ul.social-button li.google a:before{
  content : "\f0d5";
  margin-right : 10px;
  position : relative;
  top : 1px;
}
ul.social-button li.google a:hover{
  background : #ff7965;
}


/* -- hatena bookmark setting ------------------------------------------------------------ */

ul.social-button li.hatena a{
  width : 12em;
  background : #00a4de;
  padding : 6px 15px 6px;
}
ul.social-button li.hatena a:before{
  content : "B!";
  font-family : Verdana;
  font-weight : bold;
  margin-right : 8px;
  position : relative;
  top : 1px;
}
ul.social-button li.hatena a:hover{
  background : #56d0ff;
}

/* -- line setting ------------------------------------------------------------ */
ul.social-button li.line a{
  width : 7.5em;
  background : #00c300;
  position : relative;
white-space:nowrap;
}
ul.social-button li.line a:before{
  content : "\f075";
  margin-right : 10px;
}
ul.social-button li.hatena a:hover{
 background : #26ee25;
}

/* スマホサイズ調整----------------------------　*/
@media only screen and (max-width:750px) {
	ul.social-button li{
  display:block;
  margin-right:0;
  margin-bottom:10px;
}
}