@charset 'UTF-8';

@media screen and (min-width: 769px){

.lsf a {
  display: inline-block;
  color: #333;
  text-decoration: none;
}

.lsf a:hover {
	color: #333;
}

.button {
  padding: 10px 13px;
  position: relative;
}
/* Effect1
 *************************************** */
/* 擬似要素の共通スタイル */
.change-border01::after,
.change-border01::before,
.change-border01__inner::after,
.change-border01__inner::before {
  background-color: #333;
  content: '';
  display: block;
  position: absolute;
  z-index: 10;
  transition: all .3s ease;
  -webkit-transition: all .3s ease;
}
/* 左上へ配置 */
.change-border01::after {
    height: 1px;
    left: -1px;
    top: -1px;
    width: 0px;
}
/* 右下へ配置 */
.change-border01::before {
  bottom: -1px;
  height: 1px;
  right: -1px;
  width: 0px;
}
/* 左下へ配置 */
.change-border01__inner::after {
  bottom: -1px;
  height: 0px;
  left: -1px;
  width: 1px;
}
/* 右下へ配置 */
.change-border01__inner::before {
  height: 0px;
  right: -1px;
  top: -1px;
  width: 1px;
}

/* hover */
.change-border01:hover::after,
.change-border01:hover::before {
  width: 100%;
  width: calc(100% + 1px);
}
.change-border01:hover .change-border01__inner::after,
.change-border01:hover .change-border01__inner::before {
  height: 100%;
  height: calc(100% + 1px);
}
}