@charset "UTF-8";
/* --------------------------------------------------
  Template by espace（https://espace.monbalcon.net/）
  Copyright: 2020 espace.

  利用規約を遵守の上、ご利用ください。
  二次配布、販売は禁止しています。
  --------------------------------------------------*/

:root {
  --eic-animation: 0.3s;
  --eic-basic-color: #555;
  --eic-text-color: #333;
  --eic-shadow-color: rgba(0, 0, 0, 0.2);
}

/* ▼ ----- 色設定 ----- ▼ */
/* ▼ 汎用アイコン ▼ */
/* none */
.ic-sns.ic-none::before {
  background: var(--eic-basic-color);
}
.ic-sns.ic-none.ic-border {
  border-color: var(--eic-basic-color);
}
.ic-sns.ic-none.ic-border.ic-btn {
  box-shadow: 0 3px var(--eic-basic-color);
}
a.ic-sns:not(.ic-btn).ic-none:hover {
  background: var(--eic-basic-color);
}

/* web */
.ic-sns.ic-web::before {
  background: var(--eic-basic-color);
}
.ic-sns.ic-web.ic-border {
  border-color: var(--eic-basic-color);
}
.ic-sns.ic-web.ic-border.ic-btn {
  box-shadow: 0 3px var(--eic-basic-color);
}
a.ic-sns:not(.ic-btn).ic-web:hover {
  background: var(--eic-basic-color);
}

/* earth */
.ic-sns.ic-earth::before {
  background: var(--eic-basic-color);
}
.ic-sns.ic-earth.ic-border {
  border-color: var(--eic-basic-color);
}
.ic-sns.ic-earth.ic-border.ic-btn {
  box-shadow: 0 3px var(--eic-basic-color);
}
a.ic-sns:not(.ic-btn).ic-earth:hover {
  background: var(--eic-basic-color);
}

/* link */
.ic-sns.ic-link::before {
  background: var(--eic-basic-color);
}
.ic-sns.ic-link.ic-border {
  border-color: var(--eic-basic-color);
}
.ic-sns.ic-link.ic-border.ic-btn {
  box-shadow: 0 3px var(--eic-basic-color);
}
a.ic-sns:not(.ic-btn).ic-link:hover {
  background: var(--eic-basic-color);
}

/* clip */
.ic-sns.ic-clip::before {
  background: var(--eic-basic-color);
}
.ic-sns.ic-clip.ic-border {
  border-color: var(--eic-basic-color);
}
.ic-sns.ic-clip.ic-border.ic-btn {
  box-shadow: 0 3px var(--eic-basic-color);
}
a.ic-sns:not(.ic-btn).ic-clip:hover {
  background: var(--eic-basic-color);
}

/* heart */
.ic-sns.ic-heart::before {
  background: var(--eic-basic-color);
}
.ic-sns.ic-heart.ic-border {
  border-color: var(--eic-basic-color);
}
.ic-sns.ic-heart.ic-border.ic-btn {
  box-shadow: 0 3px var(--eic-basic-color);
}
a.ic-sns:not(.ic-btn).ic-heart:hover {
  background: var(--eic-basic-color);
}

/* star */
.ic-sns.ic-star::before {
  background: var(--eic-basic-color);
}
.ic-sns.ic-star.ic-border {
  border-color: var(--eic-basic-color);
}
.ic-sns.ic-star.ic-border.ic-btn {
  box-shadow: 0 3px var(--eic-basic-color);
}
a.ic-sns:not(.ic-btn).ic-star:hover {
  background: var(--eic-basic-color);
}

/* text */
.ic-sns.ic-text::before {
  background: var(--eic-basic-color);
}
.ic-sns.ic-text.ic-border {
  border-color: var(--eic-basic-color);
}
.ic-sns.ic-text.ic-border.ic-btn {
  box-shadow: 0 3px var(--eic-basic-color);
}
a.ic-sns:not(.ic-btn).ic-text:hover {
  background: var(--eic-basic-color);
}

/* mail */
.ic-sns.ic-mail::before {
  background: var(--eic-basic-color);
}
.ic-sns.ic-mail.ic-border {
  border-color: var(--eic-basic-color);
}
.ic-sns.ic-mail.ic-border.ic-btn {
  box-shadow: 0 3px var(--eic-basic-color);
}
a.ic-sns:not(.ic-btn).ic-mail:hover {
  background: var(--eic-basic-color);
}

/* comment */
.ic-sns.ic-comment::before {
  background: var(--eic-basic-color);
}
.ic-sns.ic-comment.ic-border {
  border-color: var(--eic-basic-color);
}
.ic-sns.ic-comment.ic-border.ic-btn {
  box-shadow: 0 3px var(--eic-basic-color);
}
a.ic-sns:not(.ic-btn).ic-comment:hover {
  background: var(--eic-basic-color);
}

/* home */
.ic-sns.ic-home::before {
  background: var(--eic-basic-color);
}
.ic-sns.ic-home.ic-border {
  border-color: var(--eic-basic-color);
}
.ic-sns.ic-home.ic-border.ic-btn {
  box-shadow: 0 3px var(--eic-basic-color);
}
a.ic-sns:not(.ic-btn).ic-home:hover {
  background: var(--eic-basic-color);
}

/* file */
.ic-sns.ic-file::before {
  background: var(--eic-basic-color);
}
.ic-sns.ic-file.ic-border {
  border-color: var(--eic-basic-color);
}
.ic-sns.ic-file.ic-border.ic-btn {
  box-shadow: 0 3px var(--eic-basic-color);
}
a.ic-sns:not(.ic-btn).ic-file:hover {
  background: var(--eic-basic-color);
}

/* pencil */
.ic-sns.ic-pencil::before {
  background: var(--eic-basic-color);
}
.ic-sns.ic-pencil.ic-border {
  border-color: var(--eic-basic-color);
}
.ic-sns.ic-pencil.ic-border.ic-btn {
  box-shadow: 0 3px var(--eic-basic-color);
}
a.ic-sns:not(.ic-btn).ic-pencil:hover {
  background: var(--eic-basic-color);
}

/* book */
.ic-sns.ic-book::before {
  background: var(--eic-basic-color);
}
.ic-sns.ic-book.ic-border {
  border-color: var(--eic-basic-color);
}
.ic-sns.ic-book.ic-border.ic-btn {
  box-shadow: 0 3px var(--eic-basic-color);
}
a.ic-sns:not(.ic-btn).ic-book:hover {
  background: var(--eic-basic-color);
}

/* image */
.ic-sns.ic-image::before {
  background: var(--eic-basic-color);
}
.ic-sns.ic-image.ic-border {
  border-color: var(--eic-basic-color);
}
.ic-sns.ic-image.ic-border.ic-btn {
  box-shadow: 0 3px var(--eic-basic-color);
}
a.ic-sns:not(.ic-btn).ic-image:hover {
  background: var(--eic-basic-color);
}

/* human */
.ic-sns.ic-human::before {
  background: var(--eic-basic-color);
}
.ic-sns.ic-human.ic-border {
  border-color: var(--eic-basic-color);
}
.ic-sns.ic-human.ic-border.ic-btn {
  box-shadow: 0 3px var(--eic-basic-color);
}
a.ic-sns:not(.ic-btn).ic-human:hover {
  background: var(--eic-basic-color);
}

/* clap */
.ic-sns.ic-clap::before {
  background: var(--eic-basic-color);
}
.ic-sns.ic-clap.ic-border {
  border-color: var(--eic-basic-color);
}
.ic-sns.ic-clap.ic-border.ic-btn {
  box-shadow: 0 3px var(--eic-basic-color);
}
a.ic-sns:not(.ic-btn).ic-clap:hover {
  background: var(--eic-basic-color);
}

/* ▼ サービスアイコン ▼ */
/* twitter */
.ic-sns.ic-twitter::before {
  background: #1da1f2;
}
.ic-sns.ic-twitter.ic-border {
  border-color: #1da1f2;
}
.ic-sns.ic-twitter.ic-border.ic-btn {
  box-shadow: 0 3px #1da1f2;
}
a.ic-sns:not(.ic-btn).ic-twitter:hover {
  background: #1da1f2;
}

/* mastodon */
.ic-sns.ic-mastodon::before {
  background: #6364FF;
}
.ic-sns.ic-mastodon.ic-border {
  border-color: #6364FF;
}
.ic-sns.ic-mastodon.ic-border.ic-btn {
  box-shadow: 0 3px #6364FF;
}
a.ic-sns:not(.ic-btn).ic-mastodon:hover {
  background: #6364FF;
}

/* misskey */
.ic-sns.ic-misskey::before {
  background: #8ab942;
}
.ic-sns.ic-misskey.ic-border {
  border-color: #8ab942;
}
.ic-sns.ic-misskey.ic-border.ic-btn {
  box-shadow: 0 3px #8ab942;
}
a.ic-sns:not(.ic-btn).ic-misskey:hover {
  background: #8ab942;
}

/* facebook */
.ic-sns.ic-facebook::before {
  background: #1877f2;
}
.ic-sns.ic-facebook.ic-border {
  border-color: #1877f2;
}
.ic-sns.ic-facebook.ic-border.ic-btn {
  box-shadow: 0 3px #1877f2;
}
a.ic-sns:not(.ic-btn).ic-facebook:hover {
  background: #1877f2;
}

/* facebook-bg */
.ic-sns.ic-facebook-bg::before {
  background: #1877f2;
}
.ic-sns.ic-facebook-bg.ic-border {
  border-color: #1877f2;
}
.ic-sns.ic-facebook-bg.ic-border.ic-btn {
  box-shadow: 0 3px #1877f2;
}
a.ic-sns:not(.ic-btn).ic-facebook-bg:hover {
  background: #1877f2;
}

/* instagram */
.ic-sns.ic-instagram::before {
  background: #e4405f;
}
.ic-sns.ic-instagram.ic-border {
  border-color: #e4405f;
}
.ic-sns.ic-instagram.ic-border.ic-btn {
  box-shadow: 0 3px #e4405f;
}
a.ic-sns:not(.ic-btn).ic-instagram:hover {
  background: #e4405f;
}

/* marshmallow */
.ic-sns.ic-marshmallow::before {
  background: #eb5158;
}
.ic-sns.ic-marshmallow.ic-border {
  border-color: #eb5158;
}
.ic-sns.ic-marshmallow.ic-border.ic-btn {
  box-shadow: 0 3px #eb5158;
}
a.ic-sns:not(.ic-btn).ic-marshmallow:hover {
  background: #eb5158;
}

/* pixiv */
.ic-sns.ic-pixiv::before {
  background: #0096fa;
}
.ic-sns.ic-pixiv.ic-border {
  border-color: #0096fa;
}
.ic-sns.ic-pixiv.ic-border.ic-btn {
  box-shadow: 0 3px #0096fa;
}
a.ic-sns:not(.ic-btn).ic-pixiv:hover {
  background: #0096fa;
}

/* pixiv-bg */
.ic-sns.ic-pixiv-bg::before {
  background: #0096fa;
}
.ic-sns.ic-pixiv-bg.ic-border {
  border-color: #0096fa;
}
.ic-sns.ic-pixiv-bg.ic-border.ic-btn {
  box-shadow: 0 3px #0096fa;
}
a.ic-sns:not(.ic-btn).ic-pixiv-bg:hover {
  background: #0096fa;
}

/* privatter */
.ic-sns.ic-privatter::before {
  background: #0378a6;
}
.ic-sns.ic-privatter.ic-border {
  border-color: #0378a6;
}
.ic-sns.ic-privatter.ic-border.ic-btn {
  box-shadow: 0 3px #0378a6;
}
a.ic-sns:not(.ic-btn).ic-privatter:hover {
  background: #0378a6;
}

/* privatter-bg */
.ic-sns.ic-privatter-bg::before {
  background: #0378a6;
}
.ic-sns.ic-privatter-bg.ic-border {
  border-color: #0378a6;
}
.ic-sns.ic-privatter-bg.ic-border.ic-btn {
  box-shadow: 0 3px #0378a6;
}
a.ic-sns:not(.ic-btn).ic-privatter-bg:hover {
  background: #0378a6;
}

/* ▲ ----- 色設定 ----- ▲ */
.ic-sns {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  min-width: 50px;
  max-width: 100%;
  height: 50px;
  color: var(--eic-basic-color);
  font-size: 16px;
  line-height: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ic-sns[data-text]::after {
  content: attr(data-text);
  display: inline-block;
  padding: 0 18.75px 0 0;
}
.ic-sns.ic-sm {
  min-width: 40px;
  height: 40px;
  font-size: 14px;
}
.ic-sns.ic-sm::before {
  width: 38px;
  -webkit-mask-size: 569.6382053706px;
  mask-size: 569.6382053706px;
}
.ic-sns.ic-sm[data-text]::after {
  padding: 0 9px 0 0;
}
.ic-sns.ic-lg {
  min-width: 60px;
  height: 60px;
  font-size: 16px;
}
.ic-sns.ic-lg::before {
  width: 58px;
  -webkit-mask-size: 854.4573087689px;
  mask-size: 854.4573087689px;
}
.ic-sns.ic-lg[data-text]::after {
  padding: 0 15.75px 0 0;
}
.ic-sns.ic-xl {
  min-width: 70px;
  height: 70px;
  font-size: 18px;
}
.ic-sns.ic-xl::before {
  width: 68px;
  -webkit-mask-size: 1025.3487713783px;
  mask-size: 1025.3487713783px;
}
.ic-sns.ic-xl[data-text]::after {
  padding: 0 18.75px 0 0;
}
.ic-sns.ic-rounded {
  border-radius: 6px;
}
.ic-sns.ic-rounded.ic-sm {
  border-radius: 5px;
}
.ic-sns.ic-rounded.ic-lg {
  border-radius: 7px;
}
.ic-sns.ic-rounded.ic-xl {
  border-radius: 8px;
}
.ic-sns.ic-circle {
  border-radius: 25px;
}
.ic-sns.ic-circle.ic-sm {
  border-radius: 20px;
}
.ic-sns.ic-circle.ic-lg {
  border-radius: 30px;
}
.ic-sns.ic-circle.ic-xl {
  border-radius: 35px;
}
.ic-sns.ic-border {
  background: #fff;
  border: 1px solid transparent;
}
.ic-sns.ic-shadow {
  background: #fff;
  box-shadow: 0 2px 5px 0 var(--eic-shadow-color);
}
.ic-sns.ic-btn {
  background: #fff;
  box-shadow: 0 3px var(--eic-shadow-color);
}
.ic-sns.ic-none {
  padding-top: 16px;
  padding-bottom: 16px;
}
.ic-sns.ic-none::before {
  content: none;
}
.ic-sns.ic-none.ic-sm {
  padding-top: 12px;
  padding-bottom: 12px;
}
.ic-sns.ic-none.ic-lg {
  padding-top: 21px;
  padding-bottom: 21px;
}
.ic-sns.ic-none.ic-xl {
  padding-top: 25px;
  padding-bottom: 25px;
}
.ic-sns.ic-none.ic-border, .ic-sns.ic-none.ic-shadow, .ic-sns.ic-none.ic-btn {
  padding-left: 25px;
  padding-right: 25px;
}
.ic-sns.ic-none.ic-border.ic-sm, .ic-sns.ic-none.ic-shadow.ic-sm, .ic-sns.ic-none.ic-btn.ic-sm {
  padding-left: 20px;
  padding-right: 20px;
}
.ic-sns.ic-none.ic-border.ic-lg, .ic-sns.ic-none.ic-shadow.ic-lg, .ic-sns.ic-none.ic-btn.ic-lg {
  padding-left: 30px;
  padding-right: 30px;
}
.ic-sns.ic-none.ic-border.ic-xl, .ic-sns.ic-none.ic-shadow.ic-xl, .ic-sns.ic-none.ic-btn.ic-xl {
  padding-left: 35px;
  padding-right: 35px;
}
.ic-sns.ic-web::before {
  -webkit-mask-position: -6px -6px;
  mask-position: -6px -6px;
}
.ic-sns.ic-web.ic-sm::before {
  -webkit-mask-position: -4px -4px;
  mask-position: -4px -4px;
}
.ic-sns.ic-web.ic-lg::before {
  -webkit-mask-position: -5px -5px;
  mask-position: -5px -5px;
}
.ic-sns.ic-web.ic-xl::before {
  -webkit-mask-position: -7px -7px;
  mask-position: -7px -7px;
}
.ic-sns.ic-earth::before {
  -webkit-mask-position: -53px -6px;
  mask-position: -53px -6px;
}
.ic-sns.ic-earth.ic-sm::before {
  -webkit-mask-position: -38.9px -4px;
  mask-position: -38.9px -4px;
}
.ic-sns.ic-earth.ic-lg::before {
  -webkit-mask-position: -57.3px -5px;
  mask-position: -57.3px -5px;
}
.ic-sns.ic-earth.ic-xl::before {
  -webkit-mask-position: -69.85px -7px;
  mask-position: -69.85px -7px;
}
.ic-sns.ic-link::before {
  -webkit-mask-position: -100px -6px;
  mask-position: -100px -6px;
}
.ic-sns.ic-link.ic-sm::before {
  -webkit-mask-position: -73.8px -4px;
  mask-position: -73.8px -4px;
}
.ic-sns.ic-link.ic-lg::before {
  -webkit-mask-position: -109.6px -5px;
  mask-position: -109.6px -5px;
}
.ic-sns.ic-link.ic-xl::before {
  -webkit-mask-position: -132.7px -7px;
  mask-position: -132.7px -7px;
}
.ic-sns.ic-clip::before {
  -webkit-mask-position: -147px -6px;
  mask-position: -147px -6px;
}
.ic-sns.ic-clip.ic-sm::before {
  -webkit-mask-position: -108.7px -4px;
  mask-position: -108.7px -4px;
}
.ic-sns.ic-clip.ic-lg::before {
  -webkit-mask-position: -161.9px -5px;
  mask-position: -161.9px -5px;
}
.ic-sns.ic-clip.ic-xl::before {
  -webkit-mask-position: -195.55px -7px;
  mask-position: -195.55px -7px;
}
.ic-sns.ic-heart::before {
  -webkit-mask-position: -194px -6px;
  mask-position: -194px -6px;
}
.ic-sns.ic-heart.ic-sm::before {
  -webkit-mask-position: -143.6px -4px;
  mask-position: -143.6px -4px;
}
.ic-sns.ic-heart.ic-lg::before {
  -webkit-mask-position: -214.2px -5px;
  mask-position: -214.2px -5px;
}
.ic-sns.ic-heart.ic-xl::before {
  -webkit-mask-position: -258.4px -7px;
  mask-position: -258.4px -7px;
}
.ic-sns.ic-star::before {
  -webkit-mask-position: -241px -6px;
  mask-position: -241px -6px;
}
.ic-sns.ic-star.ic-sm::before {
  -webkit-mask-position: -178.5px -4px;
  mask-position: -178.5px -4px;
}
.ic-sns.ic-star.ic-lg::before {
  -webkit-mask-position: -266.5px -5px;
  mask-position: -266.5px -5px;
}
.ic-sns.ic-star.ic-xl::before {
  -webkit-mask-position: -321.25px -7px;
  mask-position: -321.25px -7px;
}
.ic-sns.ic-text::before {
  -webkit-mask-position: -288px -6px;
  mask-position: -288px -6px;
}
.ic-sns.ic-text.ic-sm::before {
  -webkit-mask-position: -213.4px -4px;
  mask-position: -213.4px -4px;
}
.ic-sns.ic-text.ic-lg::before {
  -webkit-mask-position: -318.8px -5px;
  mask-position: -318.8px -5px;
}
.ic-sns.ic-text.ic-xl::before {
  -webkit-mask-position: -384.1px -7px;
  mask-position: -384.1px -7px;
}
.ic-sns.ic-mail::before {
  -webkit-mask-position: -335px -6px;
  mask-position: -335px -6px;
}
.ic-sns.ic-mail.ic-sm::before {
  -webkit-mask-position: -248.3px -4px;
  mask-position: -248.3px -4px;
}
.ic-sns.ic-mail.ic-lg::before {
  -webkit-mask-position: -371.1px -5px;
  mask-position: -371.1px -5px;
}
.ic-sns.ic-mail.ic-xl::before {
  -webkit-mask-position: -446.95px -7px;
  mask-position: -446.95px -7px;
}
.ic-sns.ic-comment::before {
  -webkit-mask-position: -382px -6px;
  mask-position: -382px -6px;
}
.ic-sns.ic-comment.ic-sm::before {
  -webkit-mask-position: -283.2px -4px;
  mask-position: -283.2px -4px;
}
.ic-sns.ic-comment.ic-lg::before {
  -webkit-mask-position: -423.4px -5px;
  mask-position: -423.4px -5px;
}
.ic-sns.ic-comment.ic-xl::before {
  -webkit-mask-position: -509.8px -7px;
  mask-position: -509.8px -7px;
}
.ic-sns.ic-home::before {
  -webkit-mask-position: -429px -6px;
  mask-position: -429px -6px;
}
.ic-sns.ic-home.ic-sm::before {
  -webkit-mask-position: -318.1px -4px;
  mask-position: -318.1px -4px;
}
.ic-sns.ic-home.ic-lg::before {
  -webkit-mask-position: -475.7px -5px;
  mask-position: -475.7px -5px;
}
.ic-sns.ic-home.ic-xl::before {
  -webkit-mask-position: -572.65px -7px;
  mask-position: -572.65px -7px;
}
.ic-sns.ic-file::before {
  -webkit-mask-position: -476px -6px;
  mask-position: -476px -6px;
}
.ic-sns.ic-file.ic-sm::before {
  -webkit-mask-position: -353px -4px;
  mask-position: -353px -4px;
}
.ic-sns.ic-file.ic-lg::before {
  -webkit-mask-position: -528px -5px;
  mask-position: -528px -5px;
}
.ic-sns.ic-file.ic-xl::before {
  -webkit-mask-position: -635.5px -7px;
  mask-position: -635.5px -7px;
}
.ic-sns.ic-pencil::before {
  -webkit-mask-position: -523px -6px;
  mask-position: -523px -6px;
}
.ic-sns.ic-pencil.ic-sm::before {
  -webkit-mask-position: -387.9px -4px;
  mask-position: -387.9px -4px;
}
.ic-sns.ic-pencil.ic-lg::before {
  -webkit-mask-position: -580.3px -5px;
  mask-position: -580.3px -5px;
}
.ic-sns.ic-pencil.ic-xl::before {
  -webkit-mask-position: -698.35px -7px;
  mask-position: -698.35px -7px;
}
.ic-sns.ic-book::before {
  -webkit-mask-position: -570px -6px;
  mask-position: -570px -6px;
}
.ic-sns.ic-book.ic-sm::before {
  -webkit-mask-position: -422.8px -4px;
  mask-position: -422.8px -4px;
}
.ic-sns.ic-book.ic-lg::before {
  -webkit-mask-position: -632.6px -5px;
  mask-position: -632.6px -5px;
}
.ic-sns.ic-book.ic-xl::before {
  -webkit-mask-position: -761.2px -7px;
  mask-position: -761.2px -7px;
}
.ic-sns.ic-image::before {
  -webkit-mask-position: -617px -6px;
  mask-position: -617px -6px;
}
.ic-sns.ic-image.ic-sm::before {
  -webkit-mask-position: -457.7px -4px;
  mask-position: -457.7px -4px;
}
.ic-sns.ic-image.ic-lg::before {
  -webkit-mask-position: -684.9px -5px;
  mask-position: -684.9px -5px;
}
.ic-sns.ic-image.ic-xl::before {
  -webkit-mask-position: -824.05px -7px;
  mask-position: -824.05px -7px;
}
.ic-sns.ic-human::before {
  -webkit-mask-position: -664px -6px;
  mask-position: -664px -6px;
}
.ic-sns.ic-human.ic-sm::before {
  -webkit-mask-position: -492.6px -4px;
  mask-position: -492.6px -4px;
}
.ic-sns.ic-human.ic-lg::before {
  -webkit-mask-position: -737.2px -5px;
  mask-position: -737.2px -5px;
}
.ic-sns.ic-human.ic-xl::before {
  -webkit-mask-position: -886.9px -7px;
  mask-position: -886.9px -7px;
}
.ic-sns.ic-clap::before {
  -webkit-mask-position: -711px -6px;
  mask-position: -711px -6px;
}
.ic-sns.ic-clap.ic-sm::before {
  -webkit-mask-position: -527.5px -4px;
  mask-position: -527.5px -4px;
}
.ic-sns.ic-clap.ic-lg::before {
  -webkit-mask-position: -789.5px -5px;
  mask-position: -789.5px -5px;
}
.ic-sns.ic-clap.ic-xl::before {
  -webkit-mask-position: -949.75px -7px;
  mask-position: -949.75px -7px;
}
.ic-sns.ic-twitter::before {
  -webkit-mask-position: -6px -53px;
  mask-position: -6px -53px;
}
.ic-sns.ic-twitter.ic-sm::before {
  -webkit-mask-position: -4px -38.9px;
  mask-position: -4px -38.9px;
}
.ic-sns.ic-twitter.ic-lg::before {
  -webkit-mask-position: -5px -57.3px;
  mask-position: -5px -57.3px;
}
.ic-sns.ic-twitter.ic-xl::before {
  -webkit-mask-position: -7px -69.85px;
  mask-position: -7px -69.85px;
}
.ic-sns.ic-mastodon::before {
  -webkit-mask-position: -194px -53px;
  mask-position: -194px -53px;
}
.ic-sns.ic-mastodon.ic-sm::before {
  -webkit-mask-position: -143.6px -38.9px;
  mask-position: -143.6px -38.9px;
}
.ic-sns.ic-mastodon.ic-lg::before {
  -webkit-mask-position: -214.2px -57.3px;
  mask-position: -214.2px -57.3px;
}
.ic-sns.ic-mastodon.ic-xl::before {
  -webkit-mask-position: -258.4px -69.85px;
  mask-position: -258.4px -69.85px;
}
.ic-sns.ic-misskey::before {
  -webkit-mask-position: -241px -53px;
  mask-position: -241px -53px;
}
.ic-sns.ic-misskey.ic-sm::before {
  -webkit-mask-position: -178.5px -38.9px;
  mask-position: -178.5px -38.9px;
}
.ic-sns.ic-misskey.ic-lg::before {
  -webkit-mask-position: -266.5px -57.3px;
  mask-position: -266.5px -57.3px;
}
.ic-sns.ic-misskey.ic-xl::before {
  -webkit-mask-position: -321.25px -69.85px;
  mask-position: -321.25px -69.85px;
}
.ic-sns.ic-facebook::before {
  -webkit-mask-position: -53px -53px;
  mask-position: -53px -53px;
}
.ic-sns.ic-facebook.ic-sm::before {
  -webkit-mask-position: -38.9px -38.9px;
  mask-position: -38.9px -38.9px;
}
.ic-sns.ic-facebook.ic-lg::before {
  -webkit-mask-position: -57.3px -57.3px;
  mask-position: -57.3px -57.3px;
}
.ic-sns.ic-facebook.ic-xl::before {
  -webkit-mask-position: -69.85px -69.85px;
  mask-position: -69.85px -69.85px;
}
.ic-sns.ic-facebook-bg::before {
  -webkit-mask-position: -100px -53px;
  mask-position: -100px -53px;
}
.ic-sns.ic-facebook-bg.ic-sm::before {
  -webkit-mask-position: -73.8px -38.9px;
  mask-position: -73.8px -38.9px;
}
.ic-sns.ic-facebook-bg.ic-lg::before {
  -webkit-mask-position: -109.6px -57.3px;
  mask-position: -109.6px -57.3px;
}
.ic-sns.ic-facebook-bg.ic-xl::before {
  -webkit-mask-position: -132.7px -69.85px;
  mask-position: -132.7px -69.85px;
}
.ic-sns.ic-instagram::before {
  -webkit-mask-position: -147px -53px;
  mask-position: -147px -53px;
}
.ic-sns.ic-instagram.ic-sm::before {
  -webkit-mask-position: -108.7px -38.9px;
  mask-position: -108.7px -38.9px;
}
.ic-sns.ic-instagram.ic-lg::before {
  -webkit-mask-position: -161.9px -57.3px;
  mask-position: -161.9px -57.3px;
}
.ic-sns.ic-instagram.ic-xl::before {
  -webkit-mask-position: -195.55px -69.85px;
  mask-position: -195.55px -69.85px;
}
.ic-sns.ic-marshmallow::before {
  -webkit-mask-position: -6px -100px;
  mask-position: -6px -100px;
}
.ic-sns.ic-marshmallow.ic-sm::before {
  -webkit-mask-position: -4px -73.8px;
  mask-position: -4px -73.8px;
}
.ic-sns.ic-marshmallow.ic-lg::before {
  -webkit-mask-position: -5px -109.6px;
  mask-position: -5px -109.6px;
}
.ic-sns.ic-marshmallow.ic-xl::before {
  -webkit-mask-position: -7px -132.7px;
  mask-position: -7px -132.7px;
}
.ic-sns.ic-pixiv::before {
  -webkit-mask-position: -53px -100px;
  mask-position: -53px -100px;
}
.ic-sns.ic-pixiv.ic-sm::before {
  -webkit-mask-position: -38.9px -73.8px;
  mask-position: -38.9px -73.8px;
}
.ic-sns.ic-pixiv.ic-lg::before {
  -webkit-mask-position: -57.3px -109.6px;
  mask-position: -57.3px -109.6px;
}
.ic-sns.ic-pixiv.ic-xl::before {
  -webkit-mask-position: -69.85px -132.7px;
  mask-position: -69.85px -132.7px;
}
.ic-sns.ic-pixiv-bg::before {
  -webkit-mask-position: -100px -100px;
  mask-position: -100px -100px;
}
.ic-sns.ic-pixiv-bg.ic-sm::before {
  -webkit-mask-position: -73.8px -73.8px;
  mask-position: -73.8px -73.8px;
}
.ic-sns.ic-pixiv-bg.ic-lg::before {
  -webkit-mask-position: -109.6px -109.6px;
  mask-position: -109.6px -109.6px;
}
.ic-sns.ic-pixiv-bg.ic-xl::before {
  -webkit-mask-position: -132.7px -132.7px;
  mask-position: -132.7px -132.7px;
}
.ic-sns.ic-privatter::before {
  -webkit-mask-position: -147px -100px;
  mask-position: -147px -100px;
}
.ic-sns.ic-privatter.ic-sm::before {
  -webkit-mask-position: -108.7px -73.8px;
  mask-position: -108.7px -73.8px;
}
.ic-sns.ic-privatter.ic-lg::before {
  -webkit-mask-position: -161.9px -109.6px;
  mask-position: -161.9px -109.6px;
}
.ic-sns.ic-privatter.ic-xl::before {
  -webkit-mask-position: -195.55px -132.7px;
  mask-position: -195.55px -132.7px;
}
.ic-sns.ic-privatter-bg::before {
  -webkit-mask-position: -194px -100px;
  mask-position: -194px -100px;
}
.ic-sns.ic-privatter-bg.ic-sm::before {
  -webkit-mask-position: -143.6px -73.8px;
  mask-position: -143.6px -73.8px;
}
.ic-sns.ic-privatter-bg.ic-lg::before {
  -webkit-mask-position: -214.2px -109.6px;
  mask-position: -214.2px -109.6px;
}
.ic-sns.ic-privatter-bg.ic-xl::before {
  -webkit-mask-position: -258.4px -132.7px;
  mask-position: -258.4px -132.7px;
}

a.ic-sns {
  transition: background var(--eic-animation), border var(--eic-animation), transform var(--eic-animation), box-shadow var(--eic-animation);
  text-decoration: none;
  background: #fff;
  color: var(--eic-basic-color);
}
a.ic-sns.ic-btn:hover, a.ic-sns.ic-btn:active {
  transform: translateY(3px);
  box-shadow: none !important;
}
a.ic-sns.ic-none {
  padding-left: 25px;
  padding-right: 25px;
}
a.ic-sns.ic-none.ic-sm {
  padding-left: 20px;
  padding-right: 20px;
}
a.ic-sns.ic-none.ic-lg {
  padding-left: 30px;
  padding-right: 30px;
}
a.ic-sns.ic-none.ic-xl {
  padding-left: 35px;
  padding-right: 35px;
}
a.ic-sns:not(.ic-btn):hover {
  color: #fff;
}
a.ic-sns:not(.ic-btn):hover::before {
  background: #fff;
}

.ic-sns-area {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.ic-sns-area.ic-sns-area-center {
  justify-content: center;
}
.ic-sns-area.ic-sns-area-sm {
  gap: 5px;
}
.ic-sns-area.ic-sns-area-lg {
  gap: 15px;
}
.ic-sns-area.ic-sns-area-xl {
  gap: 20px;
}

.ic-sns::before {
  content: "";
  display: inline-block;
  width: 48px;
  height: 100%;
  -webkit-mask-image: url("icon.png");
  mask-image: url("icon.png");
  -webkit-mask-size: 766.0651731824px;
  mask-size: 766.0651731824px;
  vertical-align: middle;
  transition: none;
}