@charset "utf-8";/*ページ用*/
/* ------------------------------------------------ */
#header::before {
	content: '';
	position: absolute;
	z-index: 1;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	overflow: hidden;
}
#header.animated::before {
	background: #fff;
	animation-name:headerline;
	animation-duration: 3s;
	animation-fill-mode:forwards;
}
@keyframes headerline{
	0%{transform: translateX(-100%);}
	100%{transform: translateX(0%);}
}
/* ------------------------------------------------ */
.line1 {
	position: relative;
	height: 10px;
	background: #0ad1c4;
}
.line1.animated:before {
	content: '';
	position: absolute;
	z-index: 1;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	pointer-events: none;
	background: #fff;
	animation-name:line1;
	animation-duration: 3s;
	animation-fill-mode:forwards;
}
@keyframes line1 {
	0%{transform: translateX(0%);}
	100%{transform: translateX(100%);}
}
/* ------------------------------------------------ */
.fade.animated {
	animation-fill-mode:forwards;
	opacity:0;
}
.fadeA.animated {animation-name:fadeA;}
.fadeA2.animated {animation-name:fadeA2;}
.fadeB.animated {animation-name:fadeB;}
.fadeC.animated {animation-name:fadeC;}
.fadeD.animated {animation-name:fadeD;}
.fade1.animated {animation-duration:0.8s;}
.fade2.animated {animation-duration:1.6s;}
.fade3.animated {animation-duration:2.4s;}
@keyframes fadeA {
	from {opacity: 0;transform: translateY(100px);}
	to {opacity: 1;transform: translateY(0);}
}
@keyframes fadeA2 {
	from {opacity: 0;transform: translateY(200px);}
	to {opacity: 1;transform: translateY(0);}
}
@keyframes fadeB {
	from {opacity: 0;transform: translateY(-100px);}
	to {opacity: 1;transform: translateY(0px);}
}
@keyframes fadeC {
	from {opacity: 0;transform: translateX(100px);}
	to {opacity: 1;transform: translateX(0);}
}
@keyframes fadeD {
	from {opacity: 0;transform: translateX(-100px);}
	to {opacity: 1;transform: translateX(0px);}
}
/* ------------------------------------------------ */
.texan {
	display: inline-block!important;
	position: relative;
	overflow: hidden;
	line-height: 1;
	padding-bottom: 3px;
	opacity: 0;
}
.texan.line::before {
	content: '';
	position: absolute;
	z-index: -1;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	pointer-events: none;
}
.texan.line.animated::before {animation-name:texan-line;}
.texan.col1.animated {animation-name:texan-col1;}
.texan.col2.animated {animation-name:texan-col2;}
.texan.col3.animated {animation-name:texan-col3;}
.texan.rota.animated {animation-name:texan-rota;}
.texan.col1.rota.animated {animation-name:texan-col1-rota;}
.texan.col2.rota.animated {animation-name:texan-col2-rota;}
.texan.col3.rota.animated {animation-name:texan-col3-rota;}

.texan.animated {
	animation-duration: 1s;
	animation-fill-mode:forwards;
}
.texan.col1.line.animated::before {
	opacity: 0;
	background: #26ede0;
	animation-duration: 1s;
	animation-fill-mode:forwards;
}
.texan.col2.line.animated::before {
	opacity: 0;
	background: #fff;
	animation-duration: 1s;
	animation-fill-mode:forwards;
}
.texan.col3.line.animated::before {
	opacity: 0;
	background: #000;
	animation-duration: 1s;
	animation-fill-mode:forwards;
}

.texan.anim1.animated {animation-delay: 0s;}
.texan.anim2.animated {animation-delay: 1s;}
.texan.anim3.animated {animation-delay: 2s;}
.texan.anim1.animated::before {animation-delay: 0s;}
.texan.anim2.animated::before {animation-delay: 1s;}
.texan.anim3.animated::before {animation-delay: 2s;}

@keyframes texan-line {
	0%{opacity: 0;transform: translateX(-100%);}
	100%{opacity:1;transform: translateX(0%);}
}
@keyframes texan-col1 {
	0%{opacity: 0;color:#fff;}
	100%{opacity: 1;color:#26ede0;}
}
@keyframes texan-col2 {
	0%{opacity: 0;color:#fff;}
	100%{opacity: 1;color:#fff;}
}
@keyframes texan-col3 {
	0%{opacity: 0;color:#000;}
	100%{opacity: 1;color:#000;}
}
@keyframes texan-rota {
	20%{transform: rotate(0deg);}
	100%{transform: rotate(-5deg);}
}
@keyframes texan-col1-rota {
	0%{opacity: 0;color:#fff;}
	20%{opacity: 1;color:#fff;transform: rotate(0deg);}
	100%{opacity: 1;color:#26ede0;transform: rotate(-5deg);}
}
@keyframes texan-col2-rota {
	0%{opacity: 0;color:#fff;}
	20%{opacity: 1;color:#fff;transform: rotate(0deg);}
	100%{opacity: 1;color:#fff;transform: rotate(-5deg);}
}
@keyframes texan-col3-rota {
	0%{opacity: 0;color:#000;}
	20%{opacity: 1;color:#000;transform: rotate(0deg);}
	100%{opacity: 1;color:#000;transform: rotate(-5deg);}
}
/* ------------------------------------------------ */
.titlean h2 {
	display: inline-block;
	position: relative;
	-webkit-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	padding: 0px 0px;
}
.titlean h2::before {
	display: inline-block;
	content: '';
	width: 100%;
	height: 0%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	background: #000;
}
.titlean.titleanB h2 {
	color: #000;
}
.titlean.titleanB h2::before {
	background: #000;
}
.titlean.titleanW h2 {
	color: #fff;
}
.titlean.titleanW h2::before {
	background: #fff;
}
.titlean h2 span {
	opacity: 0;
	-webkit-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
.titlean.animated h2::before {
	-webkit-animation: titlean 1s ease 0s 1 normal forwards;
	animation: titlean 1s ease 0s 1 normal forwards;
}
.titlean.animated h2 span {
	-webkit-animation: titleantex 0s ease .5s 1 normal forwards;
	animation:titleantex 0s ease .5s 1 normal forwards;
}
@keyframes titlean {
	0% {top: 0;height: 0;}
	50% {top: 0;height: 100%;}
	51% {top: 0;height: 100%;}
	100% {top: 100%;height: 0;}
}
@keyframes titleantex {
	0% { opacity:0; }
	50% { opacity:0; }
	100% { opacity:1; }
}
/* ------------------------------------------------ */