@charset "utf-8";
/* CSS Document */

/* FV */
.fv{
	position: relative;
	width: 100%;
	overflow: hidden;
	border-top: solid 3px #000;
	border-bottom: solid 3px #E70014;
}
.fv-bg,
.fv-bg img{
	display: block;
	width: 100%;
	height: auto;
}
.fv-inner{
	position: absolute;
	inset: 0;
}

/* 初期状態 */
.fv-logo{
	position: absolute;
	opacity: 0;
	left: 69%;
	top: 6%;
	width: 40%;
}
.fv-txt{
	position: absolute;
	opacity: 0;
	transform: scale(.7);
}
@media  screen and ( max-width:768px ){
.fv{
	border-top: solid 2px #000;
	border-bottom: solid 2px #E70014;
}
	.fv-logo{
	position: absolute;
	opacity: 0;
	left: 50%;
	top: 2%;
	width: 87%;
}
.fv-txt{
	position: absolute;
	opacity: 0;
	transform: scale(.7);
}
}

/* ロゴ */
.fv-logo.is-show{
	animation: logoFade .8s ease forwards;
}
@keyframes logoFade{
	from{
		opacity: 0;
		transform: translateX(-50%) translateY(30px);
	}
	to{
		opacity: 1;
		transform: translateX(-50%) translateY(0);
	}
}

/*テキスト*/
.fv-txt.is-show{
	animation: popIn .35s ease forwards;
}
@keyframes popIn{
	0%{
		opacity: 0;
		transform: scale(.7);
	}
	70%{
		opacity: 1;
		transform: scale(1.08);
	}
	100%{
		opacity: 1;
		transform: scale(1);
	}
}

/* 位置調整 */
.txt01{
  width: 29%;
  left: 53%;
  top: 44%;
}
.txt02{
	width: 4.5%;
  right: 4%;
  top: 33%;
}
.txt03{
	width: 26%;
  left: 4%;
  top: 12%;
}
.txt04{
  width: 24%;
  left: 66%;
  top: 75%;
}
.txt05{
  width: 9%;
  left: 15%;
  top: 47%;
}
.txt06{
  width: 4.5%;
  left: 84%;
  top: 43%;
}
.txt07{
	width: 9%;
  left: 4%;
  top: 33%;
}
.txt08{
  width: 20%;
  left: 45%;
  top: 68%;
}

@media  screen and ( max-width:768px ){
.txt01{
	width: 43%;
	left: 4%;
	top: 35%;
}
.txt02{
	width: 7%;
	left: 88%;
	top: 47%;
}
.txt03{
	width: 38%;
	left: 4%;
	top: 84%;
}
.txt04{
	width: 37%;
	left: 60%;
	top: 85%;
}
.txt05{
	width: 14%;
	left: 21%;
	top: 52%;
}
.txt06{
	width: 7%;
	left: 78%;
	top: 59%;
}
.txt07{
	width: 13%;
	left: 4%;
	top: 52%;
}
.txt08{
	width: 26%;
	left: 72%;
	top: 32%;
}
}