サービス一覧03

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

// 変数
$color_black: #0c0c0c;
$color_border: #d7dbe3;
$gradient_bg: linear-gradient(
  270deg,
  transparent 50%,
  rgba(164, 170, 182, 0.1) 0
);
$duration_default: 0.3s;
$duration_dot: 0.15s;
$easing_default: cubic-bezier(0.47, 0, 0.745, 0.715);

#{ $BLOCK_NAME } {
  position: relative;
  display: block;
  height: 195px;
  padding: 30px 40px;
  background-image: $gradient_bg;
  background-position: 100% top;
  background-size: 200% 100%;
  border-top: 1px solid $color_border;
  border-bottom: 1px solid $color_border;
  transition: background-position $duration_default $easing_default;
  &:hover {
    background-position: 0 top;
  }
  &__img {
    height: 40px;
    padding-top: 10px;
    & > img {
      width: auto;
      height: 100%;
    }
  }
  &__text {
    padding-top: 13px;
    font-family: 'Sawarabi Gothic', sans-serif;
    font-size: 12px;
    color: $color_black;
    & > span {
      display: block;
      margin-bottom: 2px;
      font-family: 'Barlow', sans-serif;
      font-size: 20px;
      font-weight: 700;
    }
  }
  &__arrow {
    position: absolute;
    top: 0;
    right: 42px;
    bottom: 0;
    display: block;
    width: 9px;
    height: 9px;
    margin: auto;
    transform: rotate(135deg);
    & > span {
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      width: 3px;
      height: 3px;
      background: $color_black;
      border-radius: 50%;
      transition: all $duration_dot $easing_default;
      &:nth-child(2) {
        top: 6px;
        @at-root #{ $BLOCK_NAME }:hover & {
          top: 0;
        }
      }
      &:nth-child(3) {
        left: 6px;
        @at-root #{ $BLOCK_NAME }:hover & {
          left: 0;
        }
      }
    }
  }
}