@charset "UTF-8";
/*
Name: snsbtn.css
Description: 共通CSS
-------------------------------------------------- */

/* テーマのCSSとの競合を一旦解除 */
#share_top1 ul,
#share_top2 ul,
#share_btm1 ul,
#share_btm2 ul {
  all: initial;
}

/* ----------------------------------------------------------------------
 ソーシャルボタン
---------------------------------------------------------------------- */
#share_top1 li:before,
#share_top2 li:before,
#share_btm1 li:before,
#share_btm2 li:before,
#share5_top li:before,
#share5_btm li:before {
  all: initial;
  content:"";
}
.sns_btn_area {
  all: initial;
  margin:40px 0 20px;
}
.sns_btn_area:after {
  content: '';
  display: block;
  clear: both;
  zoom: 1;
}
@font-face {
    font-family: 'icomoon';
    src: url('../fonts/icomoon.eot?evfvw0');
    src: url('../fonts/icomoon.eot?evfvw0#iefix') format('embedded-opentype'),
         url('../fonts/icomoon.ttf?evfvw0') format('truetype'),
         url('../fonts/icomoon.woff?evfvw0') format('woff'),
         url('../fonts/icomoon.svg?evfvw0#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.icon-feedly:before { content: "\e907"; }
.icon-hatebu:before { content: "\e908"; }
.icon-pocket:before { content: "\e90a"; }
.icon-google-plus:before { content: "\e900"; }
.icon-google-plus2:before { content: "\e901"; }
.icon-twitter:before { content: "\e904"; }
.icon-rss:before { content: "\e90b"; }
.icon-rss2:before { content: "\e906"; }
.icon-pinterest:before { content: "\e905"; }
/*.icon-facebook:before { content: "\e902"; }*/
.icon-facebook:before {
	content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  margin: -5px 3px 0 0;
  background: url("../images/fb-mark1.png") no-repeat;
  background-size: contain;
  vertical-align: middle;
}
.icon-facebook2:before {
	content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  margin: -5px 3px 0 0;
  background: url("../images/fb-mark2.png") no-repeat;
  background-size: contain;
  vertical-align: middle;
}
/*.icon-line:before { content: "\f0e5"; }*/
.icon-line:before {
	content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  margin: -5px 3px 0 0;
  background: url("../images/line-mark1.png") no-repeat;
  background-size: contain;
  vertical-align: middle;
}
.icon-line2:before {
	content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  margin: -5px 3px 0 0;
  background: url("../images/line-mark2.png") no-repeat;
  background-size: contain;
  vertical-align: middle;
}

#share_top1 ul li a,
#share_top2 ul li a,
#share_btm1 ul li a,
#share_btm2 ul li a {
  -webkit-transition:all 0.3s;
  -moz-transition:all 0.3s;
  -o-transition:all 0.3s;
  transition:all 0.3s;
}

/*--------------------------------
share_top1（Style1）
---------------------------------*/
#share_top1 { width:100%; margin:-10px 0 15px; }
#share_top1 h2 { color:#666666; font-weight:400; }
#share_top1 ul { margin:0; padding:0; list-style:none; }
#share_top1 ul li { display:inline-block; padding:0; text-align:center; list-style:none; }
#share_top1 ul li a { min-width:27px; text-decoration:none; display:inline-block; margin:0 5px 5px 0; font-size:12px; font-weight:400; color: #fff !important; background:#fafafa; border-radius:2px; box-shadow:0 1px 0 rgba(0,0,0,.03); text-shadow:none; text-align:center; line-height:25px; padding:1px 5px 0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; }
#share_top1 ul li a i { position:relative; top:3px; color:#fff; font-size:1.3em; text-shadow:1px 1px 0 rgba(255, 255, 255, .1); }
#share_top1 ul li a .ttl { margin:0 3px 0 2px; text-align:center; line-height:20px; }
#share_top1 ul li a .share-count { display:inline; font-size:9px; color:#fff; padding:0; line-height:25px; margin:0; border-radius:0 1px 1px 0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; }
#share_top1 ul li > a:hover { -webkit-transform:translate3d(0, 1px, 0); transform:translate3d(0, 1px, 0) }
@media screen and (max-width:480px) {
	#share_top1 { width:100%; margin:0 0 5px; }
	#share_top1 ul {}
	#share_top1 ul li a { margin-right:2px; }
	#share_top1 ul li a i { left:1px; }
	#share_top1 ul li>a span { display:none; }
	#share_top1 ul li a .share-count { margin-left:3px; }
}

/*--------------------------------
share_btm1（Style3）
---------------------------------*/
#share_btm1 { margin:0 0 15px; }
#share_btm1 .sns { text-align:center; }
#share_btm1 ul { margin:0 0 2%; list-style:none; }
#share_btm1 li { float:left; width:48%; margin:0 1% 1.5%; cursor:pointer; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; }
.post #share_btm1 ul li { list-style:none; background-image:none; padding:0; }
#share_btm1 ul li a { position:relative; display:block; top:3px; font-size:13px; padding:10px 2px; color:#fff !important; border-radius:2px; text-align:center; text-decoration:none; vertical-align:middle; }
#share_btm1 ul li a i { position:relative; top:3px; font-size:140%; }
#share_btm1 ul li a .ttl { margin:0 3px 0 4px; display:inline-block; text-align:center; font-size:12px; }
#share_btm1 ul li a .share-count { position:absolute; bottom:-2px; right:8px; font-size:10px; padding:0; line-height:25px; margin:0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; }
#share_btm1 ul li a:hover { -webkit-transform: translate3d(0px, 2px, 1px); -moz-transform: translate3d(0px, 2px, 1px); transform: translate3d(0px, 2px, 1px); }
@media only screen and (min-width:480px) {
	#share_btm1 { width:100%; margin:-15px 0 15px; }
	#share_btm1 ul { margin-right:-1%; list-style:none; overflow:hidden; }
	#share_btm1 li { width:24%; margin:0 1% 1% 0; }
	#share_btm1 li a { font-size:12px; padding:10px 2px; }
	#share_btm1 li:nth-child(4n) { margin-right:0; }
}

/*------------- share_top1 & share_btm1 button_color -------------*/
/* Twitter */
#share_top1 ul li.twitter a, #share_btm1 ul li.twitter a { color:#fff !important; background-color:#55acee; }
#share_top1 ul li.twitter a:hover, #share_btm1 ul li.twitter a:hover { background-color:#468ec5; }
/* Facebook */
#share_top1 ul li.facebook a, #share_btm1 ul li.facebook a { background-color:#35629a; }
#share_top1 ul li.facebook a:hover, #share_btm1 ul li.facebook a:hover { background-color:#1f3669; }
/* Google+ */
#share_top1 ul li.googleplus a, #share_btm1 ul li.googleplus a { background-color:#dd4b39;}
#share_top1 ul li.googleplus a:hover, #share_btm1 ul li.googleplus a:hover { background-color:#b94031;}
#share_top1 ul li.googleplus a i { top:4px; }
/* Hatena */
#share_top1 ul li.hatebu>a, #share_btm1 ul li.hatebu a { background-color:#3c7dd1;}
#share_top1 ul li.hatebu>a:hover, #share_btm1 ul li.hatebu a:hover { background-color:#0270ac;}
/* Pocket */
#share_top1 ul li.pocket a, #share_btm1 ul li.pocket a { background-color:#ee4056; }
#share_top1 ul li.pocket a:hover, #share_btm1 ul li.pocket a:hover { background-color:#c53648; }
/* rss */
#share_top1 ul li.rss a, #share_btm1 ul li.rss a { background-color:#ffb53c; }
#share_top1 ul li.rss a:hover, #share_btm1 ul li.rss a:hover { background-color:#e09900; }
/* Feedly */
#share_top1 ul li.feedly a, #share_btm1 ul li.feedly a { background-color:#6cc655; }
#share_top1 ul li.feedly>a:hover, #share_btm1 ul li.feedly>a:hover { background-color:#5ca449; }
/* Pinterest */
#share_top1 ul li.pinterest a, #share_btm1 ul li.pinterest a { background-color:#d4121c; }
#share_top1 ul li.pinterest a:hover, #share_btm1 ul li.pinterest a:hover { background-color:#a42f35; }
/* Line */
#share_top1 ul li.line a, #share_btm1 ul li.line a { background-color:#57bd37; }
#share_top1 ul li.line a:hover, #share_btm1 ul li.line a:hover { background-color:#44942b; }


/*--------------------------------
share_top2（Style2）
---------------------------------*/
#share_top2 { width:100%; margin:-10px 0 15px; }
#share_top2 h2 { color:#444; font-weight:400; }
#share_top2 ul.type2 { margin:0; padding:0; list-style:none; }
#share_top2 ul.type2 li { display:inline-block; padding:0; text-align:center; }
#share_top2 ul.type2 li a { text-decoration:none; display:inline-block; margin:0 5px 5px 0; font-size:12px; font-weight:400; border-radius:2px; color:#222 !important; text-align:center; background:#fafafa !important; border:1px solid rgba(0,0,0,.1); box-shadow:0 1px 0 rgba(0,0,0,.03); text-shadow:none; line-height:25px; padding:1px 5px 0; }
#share_top2 ul.type2 li a i { position:relative; top:3px; color:#222; font-size:1.3em; text-shadow:1px 1px 0 rgba(255, 255, 255, .1); }
#share_top2 ul.type2 li a .ttl { margin:0 3px 0 2px; text-align:center; line-height:20px; }
#share_top2 ul.type2 li a .share-count { color:#444; font-size:9px; padding:0; line-height:25px; margin:0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; }
#share_top2 ul.type2 li a:hover, #share_top2 ul.type2 li a:hover i, #share_top2 ul.type2 li a:hover .share-count  { color:#fff !important; }
#share_top2 ul.type2 li a:hover { border-color:rgba(255,255,255,.1); }
@media screen and (max-width:480px) {
	#share_top2 { width:100%; margin:0 0 5px; }
	#share_top2 ul.type2 {}
	#share_top2 ul.type2 li a { margin-right:2px; }
	#share_top2 ul.type2 li a i { left:1px; }
	#share_top2 ul.type2 li>a span.ttl { display:none; }
	#share_top2 ul.type2 li a .share-count { margin-left:3px; }
}

/*--------------------------------
share_btm2（Style4）
---------------------------------*/
#share_btm2 { margin:0 0 15px; text-align:center; }
#share_btm2 .sns {}
#share_btm2 ul.type4 { margin:0 0 2%; list-style:none; }
#share_btm2 ul.type4 li { float:left; width:48%; margin:0 1% 1.5%; cursor:pointer; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; }
.post #share_btm2 ul li { list-style:none; background-image:none; padding:0; }
#share_btm2 ul.type4 li a { position:relative; display:block; top:5px; font-size:13px; padding:10px 2px; text-decoration:none; border-radius:2px; color:#222 !important; text-align:center; background:#fafafa !important; border:1px solid rgba(0,0,0,.1); box-shadow:0 1px 0 rgba(0,0,0,.03); text-shadow:none; }
#share_btm2 ul.type4 li a i { position:relative; top:3px; font-size:140%; color:#222 !important; }
#share_btm2 ul.type4 li a .ttl { margin:0 3px 0 4px; display:inline-block; text-align:center; font-size:12px; }
#share_btm2 ul.type4 li a .share-count { position:absolute; bottom:-2px; right:8px; font-size:10px; padding:0; line-height:25px; margin:0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; color:#222 !important; }
#share_btm2 ul.type4 li a:hover, #share_btm2 ul.type4 li a:hover i, #share_btm2 ul.type4 li a:hover .share-count  { color:#fff !important; }
@media only screen and (min-width:480px) {
	#share_btm2 { width:100%; margin:-15px 0 15px; }
	#share_btm2 ul.type4 { margin-right:-1%; list-style:none; overflow:hidden; }
	#share_btm2 ul.type4 li { width:24%; margin:0 1% 1% 0; }
	#share_btm2 ul.type4 li a { font-size:12px; padding:10px 2px; }
	#share_btm2 ul.type4 li:nth-child(4n) { margin-right:0; }
}
/*------------- share_top2 & share_btm4 button_color -------------*/
/* Twitter */
#share_top2 ul.type2 li.twitter a, #share_btm2 ul.type4 li.twitter a { color:#222 !important; background-color:#fafafa !important; }
#share_top2 ul.type2 li.twitter a:hover, #share_btm2 ul.type4 li.twitter a:hover { color:#fff !important; background-color:#55acee !important; }
/* Facebook */
#share_top2 ul.type2 li.facebook a, #share_btm2 ul.type4 li.facebook a { color:#222 !important; background-color:#fafafa !important; }
#share_top2 ul.type2 li.facebook a:hover, #share_btm2 ul.type4 li.facebook a:hover { color:#fff !important; background-color:#35629a !important; }
/* Google+ */
#share_top2 ul.type2 li.googleplus a, #share_btm2 ul.type4 li.googleplus a { color:#222 !important; background-color:#fafafa !important; }
#share_top2 ul.type2 li.googleplus a:hover, #share_btm2 ul.type4 li.googleplus a:hover { color:#fff !important; background-color:#dd4b39 !important;}
#share_top2 ul.type2 li.googleplus a i, #share_btm2 ul.type4 li.googleplus a i { top:4px; }
/* Hatena */
#share_top2 ul.type2 li.hatebu a, #share_btm2 ul.type4 li.hatebu a { color:#222 !important; background-color:#fafafa !important; }
#share_top2 ul.type2 li.hatebu a:hover, #share_btm2 ul.type4 li.hatebu a:hover { color:#fff !important; background-color:#3c7dd1 !important;}
/* Pocket */
#share_top2 ul.type2 li.pocket a, #share_btm2 ul.type4 li.pocket a { color:#222 !important; background-color:#fafafa !important; }
#share_top2 ul.type2 li.pocket a:hover, #share_btm2 ul.type4 li.pocket a:hover { color:#fff !important; background-color:#ee4056 !important; }
/* rss */
#share_top2 ul.type2 li.rss a, #share_btm2 ul.type4 li.rss a { color:#222 !important; background-color:#fafafa !important; }
#share_top2 ul.type2 li.rss a:hover, #share_btm2 ul.type4 li.rss a:hover { color:#fff !important; background-color:#ff8c00 !important; }
/* Feedly */
#share_top2 ul.type2 li.feedly a, #share_btm2 ul.type4 li.feedly a { color:#222 !important; background-color:#fafafa !important; }
#share_top2 ul.type2 li.feedly a:hover, #share_btm2 ul.type4 li.feedly a:hover { color:#fff !important; background-color:#6cc655 !important; }
/* Pinterest */
#share_top2 ul.type2 li.pinterest a, #share_btm2 ul.type4 li.pinterest a { color:#222 !important; background-color:#fafafa !important; }
#share_top2 ul.type2 li.pinterest a:hover, #share_btm2 ul.type4 li.pinterest a:hover { color:#fff !important; background-color:#d4121c !important; }
/* line */
#share_top2 ul.type2 li.line a, #share_btm2 ul.type4 li.line a { color:#222 !important; background-color:#fafafa !important; }
#share_top2 ul.type2 li.line a:hover, #share_btm2 ul.type4 li.line a:hover { color:#fff !important; background-color:#57bd37 !important; }

/*--------------------------------
share_top5（公式ボタン）
---------------------------------*/
#share5_top { margin:-10px 0 -20px; }
#share5_btm { margin:0 0 -40px; }
.sns_default_top { margin:0; padding:0; overflow:hidden; }
.sns_default_top ul, .sns_default_top ul li { list-style:none; background-image:none; padding:0;  }
.sns_default_top ul li { display:inline-block; margin:0 5px 3px 0; line-height:1!important; overflow:hidden; vertical-align:top; }
.sns_default_top ul li.twitter_button { width:62px; }
.sns_default_top ul li.fbshare_button:hover { text-decoration:none; }
.sns_default_top ul li.google_button { width:58px; }
.sns_default_top ul li.pocket_button { width:88px; }
@media only screen and (max-width: 480px) {
	#share5_top { margin:0 0 -15px; }
	#share5_btm { margin:30px 0 -30px; }
	.sns_default_top { margin:0; }
	.sns_default_top ul li { margin-bottom:6px; }
	.sns_default_top ul li.twitter_button { margin-left:0; }
}