.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 {
  position: absolute;
  bottom: 8px;
  right: 16px;
}

/// 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: stroke(4, $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;
  }
}

@media (max-width : 525px) {
  .logo-br, .nomobile {
    display: none;
  }
}