@charset "utf-8";

/*============================================================
   　　スタイルシート
   　　左右から伸びるライン
============================================================*/

/*====== ボックスの周りをラインが動く =======*/
.anime-box {
	width: 80%;
	height: ;
	margin: 0 auto;
	padding: 15px;
	position: relative;
	display: block;
	overflow: hidden;
	}

.box__line {
	position: absolute;
	}

.box__line:nth-child(1),
.box__line:nth-child(3) {
	width: 100%;
	height: 6px;
	}

.box__line:nth-child(2),
.box__line:nth-child(4) {
	width: 6px;
	height: 100%;
	}

.box__line:nth-child(1) {
	top: 0;
	left: 0;
	background: linear-gradient(to right, transparent, orange);
	animation: animate1 2s linear infinite;
	}

.box__line:nth-child(2) {
	top: 0;
	right: 0;
	animation: animate2 2s linear infinite;
	animation-delay: 1s;
	background: linear-gradient(to bottom, transparent, orange);
	}

.box__line:nth-child(3) {
	bottom: 0;
	left: 0;
	background: linear-gradient(to left, transparent, orange);
	animation: animate3 2s linear infinite;
	}

.box__line:nth-child(4) {
	top: 0;
	left: 0;
	background: linear-gradient(to top, transparent, orange);
	animation: animate4 2s linear infinite;
	animation-delay: 1s;
	}

@keyframes animate1 {
	0% {
		transform: translateX(-100%);
		}
	100% {
		transform: translateX(100%);
		}
	}

@keyframes animate2 {
	0% {
		transform: translateY(-100%);
		}
	100% {
		transform: translateY(100%);
		}
	}

@keyframes animate3 {
	0% {
		transform: translateX(100%);
		}
	100% {
		transform: translateX(-100%);
		}
	}

@keyframes animate4 {
	0% {
		transform: translateY(100%);
		}
	100% {
		transform: translateY(-100%);
		}
	}



/*====== 中央から左右に伸びるライン =======*/
.hr-box {
	margin: 0px 0px 12px 0px;
	padding: 0px 0px;
	border: solid 0px #000;
}

.border-lr {
	position: relative;
	text-align: center;
	font-size: 10px;
}

.border-lr:before{
	content: '';
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 0;
	border-bottom: solid 2px #000;
	transform: translateX(-50%);
	animation: border_anim 7s linear forwards;/*=== 7s 表示時間設定 ===*/
	animation-iteration-count: infinite;/*=== 無限に繰り返し ===*/
}

@keyframes border_anim {
	0%{
		width: 0%;
	}
	100%{
		width: 100%;
	}
}


.subline-l {/*====== 左からのライン =======*/
	width: 92%;
	height: 7px;
	padding: 0px 0px 0px 0px;
	margin: 15px auto 5px 0px;
	text-align: lift;
	background-color: ;
}

.border-l {
	position: relative;
	font-size: 18px;
}

.border-l:before{
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	border-bottom: solid 7px #64abfc;
	animation: border_anim 18s linear forwards;
	animation-iteration-count: infinite;/*=== 無限に繰り返し ===*/
}

@keyframes border_anim {
	0%{
		width: 0%;
	}
	100%{
		width: 100%;
	}
}


.subline-r {/*====== 右からのライン =======*/
	width: 92%;
	height: 7px;
	padding: 0px 0px 0px 0px;
	margin: 18px 0px 0px auto;
	text-align: right;
	background-color: ;
}

.border-r {
	position: relative;
	text-align: right;
	font-size: 7px;
}

.border-r:before{
	content: '';
	position: absolute;
	left: 100%;
	bottom: 0;
	width: 0;
	transform: translateX(-100%);
	border-bottom: solid 7px #64abfc;
	animation: border_anim 18s linear forwards;
	animation-iteration-count: infinite;/*=== 無限に繰り返し ===*/
}

@keyframes border_anim {
	0%{
		width: 0%;
	}
	100%{
		width: 100%;
	}
}