@charset "utf-8";
/* CSS Document */


.arrows span {
  position: relative;
  display: inline-block;
  background: none;
  transition: transform 0.2s ease;
}
.arrows span.link {
  margin-left: 0.5em;
}

.arrows span.anchor {
  margin-right: 0.5em;
}

/*矢印の縦線*/
.arrows [class*='arrow'] {
  position: relative;
  vertical-align: middle;
  left: 0px;
  display: inline-block;
  width: 1px;
  height: 16px;
  background: #919191;
  border-radius: 4px;
}
/*矢印の＜の部分*/
.arrows [class*='arrow']:before,
.arrows [class*='arrow']:after {
  position: absolute;
  content: '';
  top: 0px;
  width: 1px;
  height: 9px;
  background: #919191;
  border-radius: 0px;
}

.arrows:hover [class*='arrow'] ,
.arrows:hover [class*='arrow']:before,
.arrows:hover [class*='arrow']:after {
background:#b6983f;
}

.arrows [class*='arrow']:before {
  left: 3px;
  transform: rotate(-45deg);
}
.arrows [class*='arrow']:after {
  right: 3px;
  transform: rotate(45deg);
}
/*それぞれの角度*/
.arrows .arrow_left {
  transform: rotate(-90deg);
}
.arrows .arrow_right {
  transform: rotate(90deg);
}
.arrows:hover span{
  transform: translateX(5px);
}



.cp_arrows span {
  position: relative;
  display: inline-block;
  background: none;
  border-radius: 100%;
  width: 15px;
  height: 15px;
  border: 1px solid #8d8d8d;
  vertical-align: middle;
  transition: transform 0.2s ease;
}

.cp_arrows .message span {
border-color:#ffffff;
}

.cp_arrows span.link {
  margin-left: 0.5em;
}

.cp_arrows span.anchor {
  margin-right: 0.5em;
}

/*矢印の縦線*/
.cp_arrows [class*='cp_arrow'] {
  position: relative;
  vertical-align: middle;
  left: 0px;
  display: inline-block;
  width: 1px;
  height: 7px;
  background: #919191;
  border-radius: 4px;
  margin: -15px 0 0 6px ;
}
/*矢印の＜の部分*/
.cp_arrows [class*='cp_arrow']:before,
.cp_arrows [class*='cp_arrow']:after {
  position: absolute;
  content: '';
  top: 0px;
  width: 1px;
  height: 3px;
  background: #919191;
  border-radius: 0px;
}

.cp_arrows .message  [class*='cp_arrow'] ,
.cp_arrows .message [class*='cp_arrow']:before,
.cp_arrows .message [class*='cp_arrow']:after {
 background: #ffffff;
}

.cp_arrows:hover span {
background: #b6983f;
border-color:#b6983f;
}

.cp_arrows:hover [class*='cp_arrow'] ,
.cp_arrows:hover [class*='cp_arrow']:before,
.cp_arrows:hover [class*='cp_arrow']:after {
 background: #ffffff;
}

.cp_arrows:hover .message  [class*='cp_arrow'] ,
.cp_arrows:hover .message [class*='cp_arrow']:before,
.cp_arrows:hover .message [class*='cp_arrow']:after {
 background: #ffffff;
}

.cp_arrows [class*='cp_arrow']:before {
  left: 1px;
  transform: rotate(-45deg);
}
.cp_arrows [class*='cp_arrow']:after {
  right: 1px;
  transform: rotate(45deg);
}
/*それぞれの角度*/
.cp_arrows .cp_arrow_left {
  transform: rotate(-90deg);
}
.cp_arrows .cp_arrow_right {
  transform: rotate(90deg);
}

.cp_arrows .cp_arrow_up {
  transform: rotate(0deg);
}
.cp_arrows .cp_arrow_down {
  transform: rotate(180deg);
}
.cp_arrows .cp_arrow_left_up {
  transform: rotate(-45deg);
}
.cp_arrows .cp_arrow_left_down {
  transform: rotate(-135deg);
}
.cp_arrows .cp_arrow_right_up {
  transform: rotate(45deg);
}
.cp_arrows .cp_arrow_right_down {
  transform: rotate(135deg);
}

.cp_arrows:hover span.link{
  transform: translateX(3px);
}
.cp_arrows:hover span.anchor{
  transform: translateY(3px);
}

/*link mark*/
.cp_blanks span {
  position: relative;
  display: inline-block;
  background: #d9d9d9;
  border-radius: 0;
  width: 8px;
  height: 10px;
  border: 1px solid #8d8d8d;
  vertical-align: middle;
  transition: transform 0.2s ease;
}

.cp_blanks span.link {
  margin-left: 0.5em;
}

/*矢印の縦線*/
.cp_blanks [class*='cp_blank'] {
  position: relative;
  vertical-align: middle;
  left: -3px;
  display: inline-block;
  width: 8px;
  height: 10px;
  border: 1px solid #8d8d8d;
  background: #ffffff;
  border-radius: 40;
  margin: -25px 0 0 6px ;
}

.cp_blanks:hover span{
background: #b6983f;
border-color:#b6983f;
}

.cp_blanks:hover [class*='cp_blank'] {
border-color:#b6983f;
}