@charset "utf-8";

.button-border {
	/* border: 1px solid #eee; */
	padding: 20px 40px;
	position: relative;
	display: inline-block;
	color: #432;
	text-decoration: none;
	background-color: #c5e1ff;

	font-family: "M PLUS Rounded 1c", sans-serif;
	font-weight: 400;
	font-style: normal;
}

/* Effect1
   *************************************** */
/* 擬似要素の共通スタイル */
.button-border::after,
.button-border::before,
.button-border span::after,
.button-border span::before {
	background-color: #f29436;
	content: '';
	display: block;
	position: absolute;
	z-index: 10;
	transition: all .3s ease;
	-webkit-transition: all .3s ease;
}

/* 左上へ配置 */
.button-border::after {
	width: 0px;
	height: 2px;
	top: -1px;
	left: -1px;
}

/* 右下へ配置 */
.button-border::before {
	width: 0px;
	height: 2px;
	right: -1px;
	bottom: -1px;
}

/* 左下へ配置 */
.button-border span::after {
	width: 2px;
	height: 0px;
	left: -1px;
	bottom: -1px;
}

/* 右上へ配置 */
.button-border span::before {
	width: 2px;
	height: 0px;
	top: -1px;
	right: -1px;
}

/* hover */
.button-border:hover::after,
.button-border:hover::before {
	width: 100%;
	width: calc(100% + 1px);
}

.button-border:hover span::after,
.button-border:hover span::before {
	height: 100%;
	height: calc(100% + 1px);
}
/* フォント太らせる */
.font_test {
    font-weight:  bold;
}

.example4{
	/* padding-top:5px; */
	padding-top:10px;
    /* line-height: 2; */
    /* border: 1px solid #333;
    background: #e7edf8;
    width: 50%; */
}

/* その2 */
/* .example-4 {
	outline-width: 1px;
	outline-offset: 0;
	outline-color: rgba(0, 130, 206, 0.75);
	outline-style: solid;
	animation: animateOutline 4s ease infinite;
  }

  @keyframes animateOutline {
	0% {
	  outline-width: 1px;
	  outline-offset: 0;
	  outline-color: rgba(0, 130, 206, 0);
	}
  
	10% {
	  outline-color: rgba(0, 130, 206, 0.75);
	} */
  
	/* The animation finishes at 50% コメントアウト*/
	/* 50% {
	  outline-width: 7px;
	  outline-offset: 4px;
	  outline-color: rgba(0, 130, 206, 0);
	}
  
	100% {
	  outline-width: 7px;
	  outline-offset: 4px;
	  outline-color: rgba(102, 102, 102, 0);
	}
  } */