.logo-img { border: 2px solid $suwa03; box-shadow: 0 0 7px 3px $suwa04; }
.logo-sns { transition: background 0.3s, color 0.3s; background-color: $black2; border: 1px solid $white2; padding: 8px; margin: 4px 10px; }
.logo-sns:hover { background-color: $white2; border: 1px solid $black2; }
.logo-play { transition: background 0.3s, color 0.3s; background-color: transparent; border-radius: 25%; padding: 2px; }
.logo-play:hover { background-color: $ng4; }
.logo-br { padding: 8px; }

/// Stroke font-character
/// @param  {Integer} $stroke - Stroke width
/// @param  {Color}   $color  - Stroke color
/// @return {List}            - text-shadow list
@function stroke($stroke, $color) {
  $shadow: ();
  $from: $stroke*-1;
  @for $i from $from through $stroke {
   @for $j from $from through $stroke {
      $shadow: append($shadow, $i*1px $j*1px 0 $color, comma);
    }
  }
  @return $shadow;
}
/// Stroke font-character
/// @param  {Integer} $stroke - Stroke width
/// @param  {Color}   $color  - Stroke color
/// @return {Style}           - text-shadow
@mixin stroke($stroke, $color) {
  text-shadow: stroke($stroke, $color);
}

@keyframes sitenamehover {
  0%   { text-shadow: stroke(4, $suwa04); }
  25%  { text-shadow: stroke(4, $suwa03); }
  50%  { text-shadow: stroke(4, $suwa00); }
  75%  { text-shadow: stroke(4, $suwa03); }
  100% { text-shadow: stroke(4, $suwa04); }
}

.logo-c {
  font-size: 64px;
  font-weight: bolder;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-shadow: -4px -4px 0 $suwa04, -4px -3px 0 $suwa04, -4px -2px 0 $suwa04, -4px -1px 0 $suwa04, -4px 0px 0 $suwa04, -4px 1px 0 $suwa04, -4px 2px 0 $suwa04, -4px 3px 0 $suwa04, -4px 4px 0 $suwa04, -3px -4px 0 $suwa04, -3px -3px 0 $suwa04, -3px -2px 0 $suwa04, -3px -1px 0 $suwa04, -3px 0px 0 $suwa04, -3px 1px 0 $suwa04, -3px 2px 0 $suwa04, -3px 3px 0 $suwa04, -3px 4px 0 $suwa04, -2px -4px 0 $suwa04, -2px -3px 0 $suwa04, -2px -2px 0 $suwa04, -2px -1px 0 $suwa04, -2px 0px 0 $suwa04, -2px 1px 0 $suwa04, -2px 2px 0 $suwa04, -2px 3px 0 $suwa04, -2px 4px 0 $suwa04, -1px -4px 0 $suwa04, -1px -3px 0 $suwa04, -1px -2px 0 $suwa04, -1px -1px 0 $suwa04, -1px 0px 0 $suwa04, -1px 1px 0 $suwa04, -1px 2px 0 $suwa04, -1px 3px 0 $suwa04, -1px 4px 0 $suwa04, 0px -4px 0 $suwa04, 0px -3px 0 $suwa04, 0px -2px 0 $suwa04, 0px -1px 0 $suwa04, 0px 0px 0 $suwa04, 0px 1px 0 $suwa04, 0px 2px 0 $suwa04, 0px 3px 0 $suwa04, 0px 4px 0 $suwa04, 1px -4px 0 $suwa04, 1px -3px 0 $suwa04, 1px -2px 0 $suwa04, 1px -1px 0 $suwa04, 1px 0px 0 $suwa04, 1px 1px 0 $suwa04, 1px 2px 0 $suwa04, 1px 3px 0 $suwa04, 1px 4px 0 $suwa04, 2px -4px 0 $suwa04, 2px -3px 0 $suwa04, 2px -2px 0 $suwa04, 2px -1px 0 $suwa04, 2px 0px 0 $suwa04, 2px 1px 0 $suwa04, 2px 2px 0 $suwa04, 2px 3px 0 $suwa04, 2px 4px 0 $suwa04, 3px -4px 0 $suwa04, 3px -3px 0 $suwa04, 3px -2px 0 $suwa04, 3px -1px 0 $suwa04, 3px 0px 0 $suwa04, 3px 1px 0 $suwa04, 3px 2px 0 $suwa04, 3px 3px 0 $suwa04, 3px 4px 0 $suwa04, 4px -4px 0 $suwa04, 4px -3px 0 $suwa04, 4px -2px 0 $suwa04, 4px -1px 0 $suwa04, 4px 0px 0 $suwa04, 4px 1px 0 $suwa04, 4px 2px 0 $suwa04, 4px 3px 0 $suwa04, 4px 4px 0 $suwa04;
}

.logo-c:hover { animation: sitenamehover 2s linear infinite; }

@media (max-width : 1200px) {
  .logo-c { font-size: 32px; }
}
@media (max-width : 968px) {
  .logo-c { font-size: 20px; }
}