サービス一覧01

$BLOCK_NAME: '.service-list-01';

// 変数
$color_primary: #333;
$color_white: #fff;
$color_black: #000;
$duration_default: 0.2s;
$easing_default: cubic-bezier(0.25, 0.25, 0.75, 0.75);

#{ $BLOCK_NAME } {
  max-width: 280px;
  margin: 0 auto;
  &__icon {
    position: relative;
    display: block;
    width: 100%;
    padding-top: 100%;
    background: $color_primary;
    border-radius: 50%;
    &::before {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Work Sans', sans-serif;
      font-weight: 600;
      color: $color_white;
      letter-spacing: 0.3em;
      content: 'VIEW WORKS';
      opacity: 0;
      transition: all $duration_default $easing_default;
    }
    &:hover::before {
      letter-spacing: 0.1em;
      opacity: 1;
    }
    &::after {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 1;
      content: '';
      background: $color_black;
      border-radius: 50%;
      transition: all $duration_default $easing_default;
      transform: scale(0);
    }
    &:hover::after {
      opacity: 0.5;
      transform: scale(1);
    }
    & > img {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      display: block;
      width: 50%;
      height: 50%;
      margin: auto;
      fill: $color_white;
      transition: opacity $duration_default $easing_default;
    }
    &:hover > img {
      opacity: 0.2;
    }
  }
  &__text {
    padding-top: 13px;
    font-size: 13px;
    line-height: 1.6;
    color: $color_black;
    text-align: center;
    letter-spacing: 0.02em;
    & > span {
      display: block;
      font-family: 'Work Sans', sans-serif;
      font-size: 19px;
      font-weight: 600;
    }
  }
}