@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);
}

/* ▼ ----- 色設定 ----- ▼ */
/* 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;
}

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

/* 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;
}

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

/* ▲ ----- 色設定 ----- ▲ */
.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: #ffffff00;
  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-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-poipiku::before {
  -webkit-mask-position: -100px -53px;
  mask-position: -100px -53px;
}
.ic-sns.ic-poipiku.ic-sm::before {
  -webkit-mask-position: -73.8px -38.9px;
  mask-position: -73.8px -38.9px;
}
.ic-sns.ic-poipiku.ic-lg::before {
  -webkit-mask-position: -109.6px -57.3px;
  mask-position: -109.6px -57.3px;
}
.ic-sns.ic-poipiku.ic-xl::before {
  -webkit-mask-position: -132.7px -69.85px;
  mask-position: -132.7px -69.85px;
}
.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-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("../img/layout/icon.png");
  mask-image: url("../img/layout/icon.png");
  -webkit-mask-size: 766.0651731824px;
  mask-size: 766.0651731824px;
  vertical-align: middle;
  transition: none;
}