@charset "utf-8";
@import url(common.css);

/*------------------------------------------------
contents
------------------------------------------------*/


/* ----------------------------
  news
---------------------------- */
#news {
	color: #fff;
	background-color: #393939;
	padding: 14px 0;
}
#news .header {
	text-align: center;
}
#news .header h2 {
	width: 17.5%;
	margin: 0 auto;
}
#news .body {
	margin-top: 6px;
}
#news .body ul {
	padding: 0 4.68%;
}
#news .body li {
	font-size: 11px;
	border-bottom: 1px dotted #595959;
	padding: 7px 0;
}
#news .body li > span {
	display: block;
}
#news .body li .date {
	float: left;
}
#news .body li .txt {
	color: #aaa;
	margin-left: 75px;
}


/* ----------------------------
  FORTUNE DERBY
---------------------------- */
#frotune_derby {
	padding-top: 50px;
	margin-top: -50px;
}

#frotune_derby .body > p {
	font-size: 11px;
	line-height: 1.75 ;
}

#frotune_derby .btn_sp_fortune {
	margin-top: 7.93%;
}
#frotune_derby #action_area {
	padding-top: 86.81%;
	position: relative;
	top: 0;
	left: 0;
	margin-top: 10px;
	margin-bottom: 15px;
	overflow: hidden;
}
#frotune_derby #action_area .title {
	position: absolute;
	width: 89.1%;
	top: 0;
	left: 4.68%;
	z-index: 200;
}

#frotune_derby #action_area .obj {
	position: absolute;
}


#obj1-1 {
	width: 45.46%;
	bottom: 0;
	left: 0;
	z-index: 100;
}
#obj1-2 {
	width: 68.75%;
	top: 7%;
	right: 0;
	z-index: 110;
	opacity: 0;
}
#obj1-3 {
	width: 68.75%;
	bottom: 0;
	left: 0;
	z-index: 110;
	opacity: 0;
}
#obj1-4 {
	width: 100%;
	bottom: 22.3%;
	left: 0;
	z-index: 90;
	opacity: 0;
}

#obj_1-mask {
	width: 100%;
	bottom: -1.5%;
	left: 0;
	z-index: 95;
}
#obj_1-kami {
	width: 100%;
	bottom: 10.5%;
	left: 0;
	z-index: 120;
	opacity: 0;
}




#action_area.active #obj1-2 {
	animation: fade-in 2.2s ease-out;
	-webkit-animation: fade-in 2.2s ease-out;
	animation-fill-mode:forwards;
	-webkit-animation-fill-mode:forwards;
}
#action_area.active #obj_1-kami {
	animation: fade-in 1.6s ease-out 3s;
	-webkit-animation: fade-in 1.6s ease-out 3s;
	animation-fill-mode:forwards;
	-webkit-animation-fill-mode:forwards;
}
@keyframes fade-in {
	0% {
		opacity: 0;
		}
	100% {
		opacity: 1;
		}
}
@-webkit-keyframes fade-in {
	0% {
		opacity: 0;
		}
	100% {
		opacity: 1;
		}
}


#action_area.active #obj1-3 {
	transform-origin: 0 100%;
	-webkit-transform-origin: 0 100%;
	animation: move_obj1-3 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 2.1s;
	-webkit-animation: move_obj1-3 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 2.1s;
	animation-fill-mode:forwards;
	-webkit-animation-fill-mode:forwards;
}
@keyframes move_obj1-3 {
	0% {
		opacity: 0;
		bottom: -20%;
		transform: scale(1,1);
		}
	90% {
		transform: scale(1.1,1.1);
		}
	100% {
		opacity: 1;
		bottom: 0%;
		transform: scale(1,1);
		}
}
@-webkit-keyframes move_obj1-3 {
	0% {
		opacity: 0;
		bottom: -20%;
		-webkit-transform: scale(1,1);
		}
	90% {
		-webkit-transform: scale(1.1,1.1);
		}
	100% {
		opacity: 1;
		bottom: 0%;
		-webkit-transform: scale(1,1);
		}
}

#action_area.active #obj1-4 {
	transform-origin: 0 100%;
	-webkit-transform-origin: 0 100%;
	animation: move_obj1-4 0.8s cubic-bezier(0.19, 1, 0.22, 1) 2.1s;
	-webkit-animation: move_obj1-4 0.8s cubic-bezier(0.19, 1, 0.22, 1) 2.1s;
	animation-fill-mode:forwards;
	-webkit-animation-fill-mode:forwards;
}
@keyframes move_obj1-4 {
	0% {
		opacity: 0;
		bottom: 2.3%;
		transform: scale(1,1);
		}
	90% {
		transform: scale(1.05,1.05);
		}
	100% {
		opacity: 1;
		bottom: 22.3%;
		transform: scale(1,1);
		}
}
@-webkit-keyframes move_obj1-4 {
	0% {
		opacity: 0;
		bottom: 2.3%;
		-webkit-transform: scale(1,1);
		}
	90% {
		-webkit-transform: scale(1.05,1.05);
		}
	100% {
		opacity: 1;
		bottom: 22.3%;
		-webkit-transform: scale(1,1);
		}
}


/* ----------------------------
  thoroughbred_ride
---------------------------- */
#thoroughbred_ride {
	padding-top: 50px;
	margin-top: -50px;
}

#thoroughbred_ride .body > p {
	font-size: 11px;
	line-height: 1.75 ;

}
#thoroughbred_ride #action_area2 {
	padding-top: 62.5%;
	position: relative;
	top: 0;
	left: 0;
	margin-top: 10px;
	margin-bottom: 15px;
	overflow: hidden;
}
#thoroughbred_ride .title {
	width: 91.87%;
	margin: 0 auto;
	border-top: 1px dotted #FFF;
	margin-top: 25px;
	padding-top: 25px;
}

#thoroughbred_ride #action_area2 .obj {
	position: absolute;
}


#obj2-1 {
	width: 100%;
	top: 0;
	left: 0;
	z-index: 100;
	opacity: 0;

}
#obj2-2 {
	width: 66.56%;
	top: 0;
	right: -6.5%;
	z-index: 110;
	opacity: 0;
}

#obj_2-kami {
	width: 100%;
	top: 0;
	left: 0;
	z-index: 120;
	opacity: 0;
}

#action_area2.active #obj2-1 {
	animation: fade-in 2.2s ease-out;
	-webkit-animation: fade-in 2.2s ease-out;
	animation-fill-mode:forwards;
	-webkit-animation-fill-mode:forwards;
}


#action_area2.active #obj2-2 {
	transform-origin: 0 100%;
	-webkit-transform-origin: 0 100%;
	animation: move_obj2-2 1.1s cubic-bezier(0.215, 0.61, 0.355, 1) 2s;
	-webkit-animation: move_obj2-2 1.1s cubic-bezier(0.215, 0.61, 0.355, 1) 2s;
	animation-fill-mode:forwards;
	-webkit-animation-fill-mode:forwards;
}

@keyframes move_obj2-2 {
	0% {
		opacity: 0;
		transform: scale(0.8,0.8);
		}
	50% {
		opacity: 1;
		}
	100% {
		opacity: 1;
		transform: scale(1,1);
		}
}
@-webkit-keyframes move_obj2-2 {
	0% {
		opacity: 0;
		-webkit-transform: scale(0.8,0.8);
		}
	50% {
		opacity: 1;
		}
	100% {
		opacity: 1;
		-webkit-transform: scale(1,1);
		}
}

#action_area2.active #obj_2-kami {
	animation: fade-in 1.6s ease-out 1.8s;
	-webkit-animation: fade-in 1.6s ease-out 1.8s;
	animation-fill-mode:forwards;
	-webkit-animation-fill-mode:forwards;
}


/* ----------------------------
  rhythm_jockey
---------------------------- */
#rhythm_jockey {
	padding-top: 50px;
	margin-top: -50px;
}

#rhythm_jockey .body > p {
	font-size: 11px;
	line-height: 1.75 ;

}
#rhythm_jockey #action_area3 {
	padding-top: 55.46%;
	position: relative;
	top: 0;
	left: 0;
	margin-top: 10px;
	margin-bottom: 15px;
	overflow: hidden;
}
#rhythm_jockey .title {
	width: 91.87%;
	margin: 0 auto;
	border-top: 1px dotted #FFF;
	margin-top: 25px;
	padding-top: 25px;
}

#rhythm_jockey #action_area3 .obj {
	position: absolute;
}


#obj3-1 {
	width: 100%;
	top: 0;
	left: 0;
	z-index: 100;
	opacity: 0;

}
#obj3-2 {
	width: 100%;
	top: -10%;
	right: -27%;
	z-index: 110;
	opacity: 0;
}

#obj3-3 {
	width: 100%;
	top: 0;
	left: 0;
	z-index: 120;
	opacity: 0;
}

#obj3-4 {
	width: 100%;
	top: 0;
	left: 0;
	z-index: 120;
	opacity: 0;
}



#action_area3.active #obj3-1 {
	animation: fade-in 1s ease-out;
	-webkit-animation: fade-in 1s ease-out;
	animation-fill-mode:forwards;
	-webkit-animation-fill-mode:forwards;
}

#action_area3.active #obj3-2 {
	transform-origin: 100% 50%;
	-webkit-transform-origin: 100% 50%;
	animation: move_obj3-2 0.8s ease-out 1s;
	-webkit-animation: move_obj3-2 0.8s ease-out 1s;
	animation-fill-mode:forwards;
	-webkit-animation-fill-mode:forwards;
}

#action_area3.active #obj3-3 {
	animation: move_obj3-3 0.8s ease-out 2s;
	-webkit-animation: move_obj3-3 0.8s ease-out 2s;
	animation-fill-mode:forwards;
	-webkit-animation-fill-mode:forwards;
}

#action_area3.active #obj3-4 {
	animation: move_obj3-4 0.8s ease-out 2.8s;
	-webkit-animation: move_obj3-4 0.8s ease-out 2.8s;
	animation-fill-mode:forwards;
	-webkit-animation-fill-mode:forwards;
}

@keyframes move_obj3-2 {
	0% {
		opacity: 0;
		transform: scale(0.8,0.8);
		top: -10%;
		right: -27%;
		}

	100% {
		opacity: 1;
		top: 0%;
		right: 0%;
		transform: scale(1,1);
		}
}
@-webkit-keyframes move_obj3-2 {
	0% {
		opacity: 0;
		-webkit-transform: scale(0.8,0.8);
		top: -10%;
		right: -27%;
		}
	50% {

		}
	100% {
		opacity: 1;
		top: 0%;
		right: 0%;
		-webkit-transform: scale(1,1);
		}
}



@keyframes move_obj3-3 {
	0% {
		opacity: 0;
		left: -2%;
		}
	96% {
		opacity: 1;
		left: 0%;
		}
	98% {
		opacity: 1;
		left: -1%;
		}
	100% {
		opacity: 1;
		left: 0%;
		}
}
@-webkit-keyframes move_obj3-3 {
	0% {
		opacity: 0;
		left: -2%;
		}
	96% {
		opacity: 1;
		left: 0%;
		}
	98% {
		opacity: 1;
		left: -1%;
		}
	100% {
		opacity: 1;
		left: 0%;
		}
}


@keyframes move_obj3-4 {
	0% {
		opacity: 0;
		left: -3%;
		}
	25% {
		top: -2%;
		}
	50% {
		top: 0%;
		}
	75% {
		top: 2%;
		}
	100% {
		opacity: 1;
		left: 0%;
		}
}
@-webkit-keyframes move_obj3-4 {
	0% {
		opacity: 0;
		left: -3%;
		}
	25% {
		top: -2%;
		}
	50% {
		top: 0%;
		}
	75% {
		top: 2%;
		}
	100% {
		opacity: 1;
		left: 0%;
		}
}


/* ----------------------------
  hotblood
---------------------------- */
#hotblood {
	padding-top: 50px;
	margin-top: -50px;
}

#hotblood .body > p {
	font-size: 11px;
	line-height: 1.75 ;

}
#hotblood #action_area4 {
	padding-top: 107%;
	position: relative;
	top: 0;
	left: 0;
	margin-top: 10px;
	margin-bottom: 15px;
	overflow: hidden;
}
#hotblood .title {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 140;
	width: 91.87%;
	margin: 0 auto;
	border-top: 1px dotted #FFF;
	margin-top: 25px;
	padding-top: 25px;
}

#hotblood #action_area4 .obj {
	position: absolute;
}

#obj4-1 {
	width: 51.71%;
	bottom: 0;
	right: -2.9%;
	z-index: 150;
	opacity: 0;
}
#obj4-2 {
	width: 39.21%;
	top: 43%;
	right: 31%;
	z-index: 110;
	opacity: 0;
}

#obj4-3 {
	width: 50.31%;
	bottom: 0;
	left: -11%;
	z-index: 120;
	opacity: 0;
}

#obj4-4 {
	width: 51.09%;
	bottom: 10%;
	left: 0;
	z-index: 90;
	opacity: 0;
}

#action_area4.active #obj4-1 {
	animation: move_obj4-1 1s ease-out;
	-webkit-animation: move_obj4-1 1s ease-out;
	animation-fill-mode:forwards;
	-webkit-animation-fill-mode:forwards;
}
#action_area4.active #obj4-2 {
	animation: move_obj4-2 3s ease-out 1s;
	-webkit-animation: move_obj4-2 3s ease-out 1s;
	animation-fill-mode:forwards;
	-webkit-animation-fill-mode:forwards;
}

#action_area4.active #obj4-3 {
	animation: move_obj4-3 1.3s ease-out 3s;
	-webkit-animation: move_obj4-3 1.3s ease-out 3s;
	animation-fill-mode:forwards;
	-webkit-animation-fill-mode:forwards;
}

#action_area4.active #obj4-4 {
	animation: move_obj4-4 0.9s ease-out 3.5s;
	-webkit-animation: move_obj4-4 0.9s ease-out 3.5s;
	animation-fill-mode:forwards;
	-webkit-animation-fill-mode:forwards;
}

@keyframes move_obj4-1 {
	0% {
		opacity: 0;
		right: -5.9%;
		}

	100% {
		opacity: 1;
		right: -2.9%;
		}
}
@-webkit-keyframes move_obj4-1 {
	0% {
		opacity: 0;
		right: -5.9%;
		}
	100% {
		opacity: 1;
		right: -2.9%;
		}
}

@keyframes move_obj4-2 {
	0% {
		opacity: 0;
		right: 26%;
		}

	100% {
		opacity: 1;
		right: 31%;
		}
}
@-webkit-keyframes move_obj4-2 {
	0% {
		opacity: 0;
		right: 26%;
		}
	100% {
		opacity: 1;
		right: 31%;
		}
}

@keyframes move_obj4-3 {
	0% {
		opacity: 0;
		bottom: -67%;
		left: -50%;
		}
	36% {
		opacity: 1;
		bottom: 0%;
		left: -11%;
		}
	40% {
		bottom: 1%;
		}
	44% {
		bottom: 0%;
		}
	48% {
		bottom: 1%;
		}
	52% {
		bottom: 0%;
		}
	56% {
		bottom: 1%;
		}
	60% {
		bottom: 0%;
		}
	64% {
		bottom: 1%;
		}
	68% {
		bottom: 0%;
		}
	72% {
		bottom: 1%;
		}
	76% {
		bottom: 0%;
		}
	80% {
		bottom: 1%;
		}
	84% {
		bottom: 0%;
		}
	88% {
		bottom: 1%;
		}
	92% {
		bottom: 0%;
		}
	96% {
		bottom: 1%;
		}
	100% {
		opacity: 1;
		bottom: 0%;
		left: -11%;
		}
}
@-webkit-keyframes move_obj4-3 {
	0% {
		opacity: 0;
		bottom: -67%;
		left: -50%;
		}
	36% {
		opacity: 1;
		bottom: 0%;
		left: -11%;
		}
	40% {
		bottom: 1%;
		}
	44% {
		bottom: 0%;
		}
	48% {
		bottom: 1%;
		}
	52% {
		bottom: 0%;
		}
	56% {
		bottom: 1%;
		}
	60% {
		bottom: 0%;
		}
	64% {
		bottom: 1%;
		}
	68% {
		bottom: 0%;
		}
	72% {
		bottom: 1%;
		}
	76% {
		bottom: 0%;
		}
	80% {
		bottom: 1%;
		}
	84% {
		bottom: 0%;
		}
	88% {
		bottom: 1%;
		}
	92% {
		bottom: 0%;
		}
	96% {
		bottom: 1%;
		}
	100% {
		opacity: 1;
		bottom: 0%;
		left: -11%;
		}
}


@keyframes move_obj4-4 {
	0% {
		opacity: 0;
		bottom: 0%;
		}
	40% {
		bottom: 10%;
		}
	44% {
		bottom: 9%;
		}
	48% {
		bottom: 10%;
		}
	52% {
		bottom: 9%;
		}
	56% {
		bottom: 10%;
		}
	60% {
		bottom: 9%;
		}
	64% {
		bottom: 10%;
		}
	68% {
		bottom: 9%;
		}
	72% {
		bottom: 10%;
		}
	76% {
		bottom: 9%;
		}
	80% {
		bottom: 10%;
		}
	84% {
		bottom: 9%;
		}
	88% {
		bottom: 10%;
		}
	92% {
		bottom: 9%;
		}
	96% {
		bottom: 10%;
		}
	100% {
		opacity: 1;
		bottom: 10%;
		}
}
@-webkit-keyframes move_obj4-4 {
	0% {
		opacity: 0;
		bottom: 0%;
		}
	100% {
		opacity: 1;
		bottom: 10%;
		}
}

/* ----------------------------
  movie
---------------------------- */
#movie {
	background: url(../img/bg_illust.png) 50% 105% no-repeat;
	background-size: contain;
	padding: 23px 0 50px;
}
#contents > #movie .inner {
	max-width: 800px;
}

#movie .top_notice {
	margin-bottom: 25px;
	position: relative;
}

#movie .top_notice .btn_map {
	display: block;
	width: 26.72%;
	position: absolute;
	top: 41%;
	right: 6%;
	z-index: 10;
}

#movie .lead {
	font-size: 13px;
	line-height: 1.75;
}

#movie .mov_frame {
	background: url(../img/mov_frame.png) no-repeat;
	background-size: 100%;
	padding: 1.7%;
	margin-top: 22px;
}
#movie .youtube {
	position: relative;
	width: 100%;
	padding-top: 56.25%;

}
#movie .youtube iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100% !important;
	height: 100% !important;
}



/* ----------------------------
  その他
---------------------------- */
section#other {
	margin: 40px 0 0;
}

section#other p.chu {
	font-size: 10px;
	color: #FFF;
	margin-top: 22px;
}