.underline{
   text-decoration: none;
   border-bottom: 1px solid red;
   padding-bottom: 1px;
}/*——　文字の両脇にライン　——*/
.title-border {
display: flex;
align-items: center;
}
.title-border:before,
.title-border:after {
border-top: 1px solid;
content: "";
flex-grow: 1;
}
.title-border:before {
margin-right: 1rem;
}
.title-border:after {
margin-left: 1rem;
}a {
  position: relative;
  display: inline-block;
  text-decoration: none;
}
a::after {
  position: absolute;
  bottom: -1px;
  left: 0;
  content: '';
  width: 100%;
  height: 1px;
  background: #007dff;
  transform: scale(0, 1);
  transform-origin: right top;
  transition: transform .3s;
}
a:hover::after {
  transform-origin: left top;
  transform: scale(1, 1);
}


a:link,a:visited{
color:#000000;
background-color: rgba(240, 220, 160, 0.3);
text-decoration:none;
}
a.hover{
color:#ccffcc;
background-color: transparent;
}
a:hover,a:active{
position:relative;
bottom:-1px;
right:-1px;
background-color: transparent;
}
body{
margin:5% 20%;
padding: 0;
}.fixed_test {
    position:  fixed;        /* 要素の配置方法を指定 */
    background-color: #fff;     /* 背景色指定 */
    border: 2px solid #d6cb84;
    padding:  20px;             /* 余白指定 */
    left:  0;                /* 左からの位置指定 */
    top: 0;                  /* 上からの位置指定 */
}