:root{
  /* color type A */
  --line_color : #555555 ;
  --back_color : #FFECF6  ;

  /* color type B */
  /* --line_color : #1b1919 ;
  --back_color : #E9ECFF  ; */

  /* color type C */
  /* --line_color : #00135C ;
  --back_color : #DEFFFA  ; */
}

.button{
  position : relative ;
  z-index : 0 ;
  width : 240px ;
  height : 56px ;
  text-decoration : none ;
  font-size : 14px ; 
  font-weight : bold ;
  color : var(--line_color) ;
  letter-spacing : 2px ;
  transition : all .3s ease ;
}
.button__text{
  display : flex ;
  justify-content : center ;
  align-items : center ;
  width : 100% ;
  height : 100% ;
}
.button::before,
.button::after,
.button__text::before,
.button__text::after{
  content : '' ;
  position : absolute ;
  height : 3px ;
  border-radius : 2px ;
  background : #6aeabd;
  transition : all .5s ease ;
}
.button::before{
  top : 0 ;
  left : 54px ;
  width : calc( 100% - 56px * 2 - 16px ) ;
}
.button::after{
  top : 0 ;
  right : 54px ;
  width : 8px ;
}
.button__text::before{
  bottom : 0 ;
  right : 54px ;
  width : calc( 100% - 56px * 2 - 16px ) ;
}
.button__text::after{
  bottom : 0 ;
  left : 54px ;
  width : 8px ;
}
.button__line{
  position : absolute ;
  top : 0 ;
  width : 56px ;
  height : 100% ;
  overflow : hidden ;
}
.button__line::before{
  content : '' ;
  position : absolute ;
  top : 0 ;
  width : 150% ;
  height : 100% ;
  box-sizing : border-box ;
  border-radius : 300px ;
  border : solid 3px #6aeabd ;
}
.button__line:nth-child(1),
.button__line:nth-child(1)::before{
  left : 0 ;
}
.button__line:nth-child(2),
.button__line:nth-child(2)::before{
  right : 0 ;
}
.button:hover{
  letter-spacing : 3px ;
}
.button:hover::before,
.button:hover .button__text::before{
  width : 8px ;
}
.button:hover::after,
.button:hover .button__text::after{
  width : calc( 100% - 56px * 2 - 16px ) ;
}
.button__drow1,
.button__drow2{
  position : absolute ;
  z-index : -1 ;
  border-radius : 16px ;
  transform-origin : 16px 16px ;
}
.button__drow1{
  top : -16px ;
  left : 40px ;
  width : 32px ;
  height : 0;
  transform : rotate( 30deg ) ;
}
.button__drow2{
  top : 44px ;
  left : 77px ;
  width : 32px ;
  height : 0 ;
  transform : rotate(-127deg ) ;
}
.button__drow1::before,
.button__drow1::after,
.button__drow2::before,
.button__drow2::after{
  content : '' ;
  position : absolute ;
}
.button__drow1::before{
  bottom : 0 ;
  left : 0 ;
  width : 0 ;
  height : 32px ;
  border-radius : 16px ;
  transform-origin : 16px 16px ;
  transform : rotate( -60deg ) ;
}
.button__drow1::after{
  top : -10px ;
  left : 45px ;
  width : 0 ;
  height : 32px ;
  border-radius : 16px ;
  transform-origin : 16px 16px ;
  transform : rotate( 69deg ) ;
}
.button__drow2::before{
  bottom : 0 ;
  left : 0 ;
  width : 0 ;
  height : 32px ;
  border-radius : 16px ;
  transform-origin : 16px 16px ;
  transform : rotate( -146deg ) ;
}
.button__drow2::after{
  bottom : 26px ;
  left : -40px ;
  width : 0 ;
  height : 32px ;
  border-radius : 16px ;
  transform-origin : 16px 16px ;
  transform : rotate( -262deg ) ;
}
.button__drow1,
.button__drow1::before,
.button__drow1::after,
.button__drow2,
.button__drow2::before,
.button__drow2::after{
  background : var( --back_color ) ;
}
.button:hover .button__drow1{
  animation : drow1 ease-in .06s ;
  animation-fill-mode : forwards ;
}
.button:hover .button__drow1::before{
  animation : drow2 linear .08s .06s ;
  animation-fill-mode : forwards ;
}
.button:hover .button__drow1::after{
  animation : drow3 linear .03s .14s ;
  animation-fill-mode : forwards ;
}
.button:hover .button__drow2{
  animation : drow4 linear .06s .2s ;
  animation-fill-mode : forwards ;
}
.button:hover .button__drow2::before{
  animation : drow3 linear .03s .26s ;
  animation-fill-mode : forwards ;
}
.button:hover .button__drow2::after{
  animation : drow5 linear .06s .32s ;
  animation-fill-mode : forwards ;
}
.containerspec{
  width : 100% ;
  height : 50px ;
  display : flex ;
  flex-direction : column ;
  justify-content : center ;
  align-items : center ;
}
#portfolio .portfolio-item .portfolio-link .portfolio-hover:hover
{
  opacity: 1;
}