body {
	background-image: url("../img/317_garnet/page/back.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: 50% 0%;
}

a, a:link, a:visited {
	color: #66cc33;
}

a:hover, a:active {
	color: #ffcc66;
}

hr {
	background-image: url("../img/317_garnet/page/line.png");
	background-size: contain;
	background-repeat: no-repeat;
	border: none;
	width: 820px;
	height: 35px;
}

#play-work {
	display: inline-block;
	padding: 0;
	border: 4px #ffffff solid;
}

#info-work th, #info-member th, .wide-head {
	background-color: rgba(255, 75, 75, 0.667);
}

#info-work td, #info-member td, .wide-body {
	background-color: rgba(120, 0, 0, 0.667);
}


.titleBackStyle {
	animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes titleBackMove {
	0% {
		transform: translateY(-300px);
	}
	100% {
		transform: translateY(0);
	}
}


.titleDancerStyle {
	animation-timing-function: linear;
}

@keyframes titleDancerMoveA {
	0% {
		transform: translateY(414px);
	}
	20% {
		transform: translateY(24px);
	}
	80% {
		transform: translateY(-24px);
	}
	100% {
		transform: translateY(-414px);
	}
}

@keyframes titleDancerMoveB {
	0% {
		transform: translateY(400px);
	}
	20% {
		transform: translateY(10px);
	}
	45% {
		transform: translateY(-10px);
	}
	65% {
		transform: translateY(-400px);
	}
	100% {
		transform: translateY(-400px);
	}
}



.titleRoseHandStyle {
	animation-timing-function: linear;
}

@keyframes titleRoseHandMoveA {
	0% {
		opacity: 0;
	}
	20% {
		opacity: 1;
	}
	60% {
		opacity: 1;
	}
	70% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}

@keyframes titleRoseHandMoveB {
	0% {
		opacity: 0;
	}
	35% {
		opacity: 0;
	}
	55% {
		opacity: 1;
	}
	80% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}



.titleMainStyle {
	animation-timing-function: linear;
}

@keyframes titleMainMove {
	0% {
		transform: translateY(400px);
	}
	100% {
		transform: translateY(0);
	}
}