@charset "utf-8";

/*
Theme Name:tifi
*/

/* videoArea
-------------------------------------*/
video{
	width:100%;
}

/* offer
-------------------------------------*/
.spOffer{
	position: relative;
}
.spOffer .animation{
	position: absolute;
	top: 0;
	left: 0;
	animation: yureru 2.5s infinite;
}

@keyframes yureru {
	0% {
		transform: translate(0px, 4px);
	}
	5% {
		transform: translate(0px, -4px);
	}
	10% {
		transform: translate(0px, 4px);
	}
	15% {
		transform: translate(0px, -4px);
	}
	20% {
		transform: translate(0px, 4px);
	}
	25% {
		transform: translate(0px, -4px);
	}
	30% {
		transform: translate(0px, 0px);
	}
}

/* gifBlock
-------------------------------------*/
.gifBlockA01,
.gifBlockB01{
	position:relative;
	overflow:hidden;
	z-index:0;
}
.gifBlockA01 .video01{
	position:absolute;
	width: 82%;
	margin:0 auto;
	left: 0px;
	right: 0;
	top: 41.5%;
}
	.gifBlockA01 .gif01{
	position:absolute;
	width: 84%;
	margin:0 auto;
	left: 23px;
	right:0;
	top: 82.5%;
}
	.gifBlockB01 .gif01{
	position:absolute;
	width: 77%;
	margin:0 auto;
	left: 0;
	right:0;
	top: 40%;
}


/* animeBlock
-------------------------------------*/
.animeBlockA01{
	position: relative;
	font-size: 1rem;
}

.animeBlockA01 img{
	width: auto;
	max-width: 100%;
}
.animeBlockA01 .anime01{
	position: absolute;
	top: 24%;
	left: 0;
	right: 0;
	width: 90%;
	margin: auto;
}
.animeBlockA01 .anime02{
	position: absolute;
	top: 50.5%;
	left: 0;
	right: 0;
	width: 90%;
	margin: auto;
}
.animeBlockA01 .anime03{
	position: absolute;
	top: 77%;
	left: 0;
	right: 0;
	width: 90%;
	margin: auto;
}
.anime {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 100%;
	overflow: hidden;
	animation: myframe 1.7s ease-in-out 1s infinite alternate both;
	border-right: 2px solid #000;
}
.animeImg{
	position: absolute;
	left: 0;
	height: 100%;
	max-width: none !important;
}

@keyframes myframe{
	from{
		width: 0;
	}
	to{
		width: 100%;
	}
}

/* LinkBlock
-------------------------------------*/
.LinkBlockA01{
	margin: 6% 0 2%;
}