_arrow-right.scss

/* ----------------------------------------------------------
/* arrow-right
/* 右に向かう横向きの矢印
/* ---------------------------------------------------------- */

$arrow-right-width-value: 30px;
$arrow-right-height-value: 50px;

.arrow-right {
  height: $arrow-right-height-value;
  &::before, &::after {
    display: inline-block;
    content: '';
  }
  &::before {
    // 胴体の棒の部分
    width: $arrow-right-width-value + $arrow-right-height-value;
    height: 45%;
    background: $arrow-color;
  }
  &::after {
    // 三角の部分
    width: $arrow-right-height-value;
    height: $arrow-right-height-value;
    border: $arrow-right-height-value / 2 solid transparent;
    border-left-color: $arrow-color;
    margin-bottom: - $arrow-right-height-value / 4;
  }
  // フォームで使う色
  &.is-memo {
    &::before { background: $form-border-color-2; }
    &::after { border-left-color: $form-border-color-2; }
  }
}

.arrow-right__position {
  // 左右方向中央に位置
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-53%); // 三角がラインにかぶリすぎないように位置調整あり
}