/*矢印ボックス（マウスオーバーの範囲を広げるために箱で用意）*/
.arrow-right {
  padding: 15px 0px 15px 0pc;
  border-top: 1px solid #d8dadc;
  border-right: 1px solid #d8dadc;
  border-left: 1px solid #d8dadc;
  font-size: 17px;
  color: black;
}
.arrow-right:after {
  content: "";
  border-top: 3px solid #666666; /*矢印の色と太さ*/
  border-right: 3px solid #666666;
  width: 10px;
  height: 10px;
  rotate: 45deg; /*右向き矢印に*/
  margin-right: 0.8em;
  margin-left: auto;
}
.arrow-right:hover:after {
  animation: arrowRight 0.4s 2;
}
.arrow-bottom {
  padding: 15px 0px 15px 0pc;
  border-top: 1px solid #d8dadc;
  border-right: 1px solid #d8dadc;
  border-left: 1px solid #d8dadc;
  font-size: 17px;
  color: black;
}
.arrow-bottom:after {
  content: "";
  border-bottom: 3px solid #666666; /*矢印の色と太さ*/
  border-right: 3px solid #666666;
  width: 10px;
  height: 10px;
  rotate: 45deg; /*下向き矢印に*/
  margin-right: 0.8em;
  margin-left: auto;
}
.arrow-bottom:hover:after {
  animation: arrowBottom 0.4s 2;
}
/*矢印アニメーション設定*/
/*右にぷかぷか*/
@keyframes arrowRight {
  0% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(30%, -30%, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
/*下にぷかぷか*/
@keyframes arrowBottom {
  0% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(30%, 30%, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}