/*——　文字の両脇にライン　——*/
.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;
  padding-left: 0.2em;
  display: inline-block;
  text-decoration: none;
  transition:all 0.5s ease 0.2s;
}
a::after {
  position: absolute;
  bottom: -1px;
  left: -0.0856em;
  content: '';
  width: 100%;
  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;
text-decoration:none;
}
a.hover{
color:#ccffcc;
background-color: transparent;
}
a:hover,a:active{
position:relative;
bottom:-1px;
right:-1px;
background-color: transparent;
}
/* 通常時はホバー時の文字を非表示にする */
a .hover{
display: none;
}
/* ホバー時は通常時の文字を非表示にする */
a:hover .nomal{
display: none;
}
/* ホバー時に、ホバー時の文字を表示する */
a:hover .hover{
display: inline;
}


body{
margin:5% 30%;
padding: 0;
letter-spacing: 0.2em;
}