.sc2{
    position: absolute;
     left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
  bottom: 4%;
}

.sc2 p {
  display: inline-block;
  z-index: 2;
  font-size: 1em;
  line-height: 1;
  text-transform: uppercase;
   color: #000;
    font-family: 'Anton', sans-serif;
    font-weight: 400;
    letter-spacing: 0.01em;
}
.sc2 p::after {
  content: '';
  position: absolute;
 top: 1.2em;
  left: 50%;
  width: 0.12em;
  height: 2.5em;
  background: #fff;
     animation: sdl 1.5s cubic-bezier(1, 0, 0, 1) infinite;
background-color: #000;
}


@keyframes sdl {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  50.1% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}

.click{
    font-size: 1em;
    margin-left: -12px;
  animation: clickanim 1s infinite ;
}

@keyframes clickanim {
  0% {
  transform: translateX(0px);

  }
    
      50% {
  transform: translateX(5px);
  }

  100% {
  transform: translateX(0px);
  }
}


.boderanm{
	position: relative;
}

.boderanm:before{
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	border-bottom: solid 1px ;
	animation: border_anim 0.6s linear forwards;
}

@keyframes border_anim {
	0%{
		width: 0%;
	}
	100%{
		width: 100%;
	}
}

.boderanmb{
	position: relative;
}

.boderanmb:before{
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	border-bottom: solid 1px ;
	animation: border_animb 0.6s linear forwards;
}

@keyframes border_animb {
	0%{
		width: 0%;
	}
	100%{
		width: 100%;
	}

}


.fuwafuwa {
  animation: fuwafuwa 2s infinite ease-in-out .8s alternate;
  display: inline-block;
  transition: 1.5s ease-in-out;
  width: 70px;
  height: 70px;
  margin-top: 15px;
}
 
@keyframes fuwafuwa {
  0% {
    transform:translate(0, 0) rotate(-3deg);
  }
  50% {
    transform:translate(0, -15px) rotate(0deg);
  }
  100% {
    transform:translate(0, 0) rotate(3deg);
  }
}
 


/*矢印が右に移動する*/
.btnarrow4{
    /*矢印と下線の基点とするためrelativeを指定*/
  position: relative;
    /*形状*/
    display: inline-block;
  padding-right: 1em;
    text-decoration: none;
    outline: none;
}

/*矢印と下線の形状*/
.btnarrow4::before{
    content: '';
    /*絶対配置で下線の位置を決める*/
  position: absolute;
        top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
   right: 0;
    /*下線の形状*/    
  width: 0;
  height: 0;
  border-left: 0.7em solid black;
  border-top: 0.5em solid transparent;
  border-bottom: 0.5em solid transparent;
    /*アニメーションの指定*/
    transition: all .3s;
}


/*hoverした際の移動*/
.btnarrow4:hover::before{
    right:-5%;
}