/* ##############################################################
#    #content
############################################################## */
#content section {
	position: relative;
}
#content section .inner {
	position: relative;
	width: 1280px;
	margin: 0 auto;
}
#content .performance {
	opacity: 0;
	transform: translateY(15px);
	-webkit-transform: translateY(15px);
	-moz-transform: translateY(15px);
	transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
	-webkit-transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
	-moz-transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
}
#content .performance.end {
	opacity: 1;
	transform: translateY(0);
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
}

/* --------------------------------------------------------------
    .mv
-------------------------------------------------------------- */
#mv {
	padding-bottom: 105px;
	background: url(../images/mv_bg.jpg) center center no-repeat;
	background-size: cover;
}
#mv h1 {
	text-align: center;
}
#mv .lead {
	position: absolute;
	left: calc(50% + 119px);
	top: 172px;
}
#mv .logo {
	position: absolute;
	right: 31px;
	top: 0;
}
#mv .race {
	position: absolute;
	left: 7px;
	bottom: 280px;
	width: 295px;
}
#mv .race img {
	width: 100%;
	height: auto;
}
#mv .live {
	position: absolute;
	left: 22px;
	top: 451px;
}
#mv .cm {
	position: absolute;
	right: 0;
	top: 565px;
}
#mv .sns {
	position: absolute;
	left: 22px;
	top: 21px;
	font-size: 0;
}
#mv .sns li {
	display: inline-block;
	font-size: 12px;
}
#mv .sns li + li {
	margin-left: 16px;
}

#mv nav {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 105px;
	background-color: #eb6100;
}
#mv nav ul {
	width: 1280px;
	margin: 0 auto;
	font-size: 0;
}
#mv nav ul li {
	display: inline-block;
	margin-left: 66px;
	font-size: 12px;
}
#mv nav ul li + li {
	margin-left: 79px;
}

/* --------------------------------------------------------------
    .koko
-------------------------------------------------------------- */
#koko {
	padding: 68px 0 75px;
	background: url(../images/koko_bg.png) center bottom no-repeat;
	background-size: cover;
}
#koko h2 {
	margin-bottom: 17px;
	text-align: center;
}
#koko .lead {
	margin-bottom: 39px;
	text-align: center;
}
#koko .char {
	position: absolute;
	left: calc(50% - 422px);
	top: 7px;
}
#koko .col {
	width: 755px;
	margin: 0 auto;
}
#koko .col .detail {
	position: relative;
	float: left;
	width: 334px;
}
#koko .col .detail li {
	display: none;
}
#koko .col .detail li.default,
#koko .col .detail li.show {
	display: block;
}
#koko .col .detail li a {
	display: block;
}
#koko .col .detail .date {
	position: absolute;
	left: -8px;
	top: -14px;
}
#koko .col .detail .prev {
	opacity: 0.3;
	position: absolute;
	left: 108px;
	bottom: -42px;
}
#koko .col .detail .next {
	opacity: 0.3;
	position: absolute;
	right: 108px;
	bottom: -42px;
}
#koko .col .detail .prev.enable,
#koko .col .detail .next.enable {
	opacity: 1;
}
#koko .col .calendar {
	position: relative;
	float: right;
	display: block;
	width: 392px;
	height: 208px;
	background: url(../images/koko_calendar_bg.png) left top no-repeat;
	background-size: 100%;
}
#koko .col .calendar.coming:before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 392px;
	height: 208px;
	background: url(../images/koko_calendar_coming.png) left top no-repeat;
}
#koko .col .calendar li {
	position: absolute;
	opacity: 0.2;
}
#koko .col .calendar li.enable {
	opacity: 1;
}
#koko .col .calendar li.highlight {
	background-color: #efef00;
}
#koko .col .calendar li:nth-child(1) {
	left: 24px;
	top: 27px;
}
#koko .col .calendar li:nth-child(2) {
	left: 121px;
	top: 27px;
}
#koko .col .calendar li:nth-child(3) {
	left: 214px;
	top: 27px;
}
#koko .col .calendar li:nth-child(4) {
	left: 302px;
	top: 27px;
}
#koko .col .calendar li:nth-child(5) {
	left: 24px;
	top: 67px;
}
#koko .col .calendar li:nth-child(6) {
	left: 121px;
	top: 67px;
}
#koko .col .calendar li:nth-child(7) {
	left: 214px;
	top: 67px;
}
#koko .col .calendar li:nth-child(8) {
	left: 302px;
	top: 67px;
}
#koko .col .calendar li:nth-child(9) {
	left: 24px;
	top: 107px;
}
#koko .col .calendar li:nth-child(10) {
	left: 121px;
	top: 107px;
}
#koko .col .calendar li:nth-child(11) {
	left: 214px;
	top: 107px;
}
#koko .col .calendar li:nth-child(12) {
	left: 302px;
	top: 107px;
}
#koko .col .calendar li:nth-child(13) {
	left: 24px;
	top: 147px;
}
#koko .col .calendar li:nth-child(14) {
	left: 121px;
	top: 147px;
}
#koko .col .calendar li:nth-child(15) {
	left: 214px;
	top: 147px;
}

/* --------------------------------------------------------------
    .ureshii
-------------------------------------------------------------- */
#ureshii {
	padding: 14px 0 18px;
	background: url(../images/ureshii_bg.png) center center no-repeat;
	background-size: cover;
}
#ureshii h2 {
	text-align: center;
}
#ureshii .lead {
	margin-top: -30px;
	text-align: center;
}
#ureshii .bubble {
	margin-top: -29px;
	text-align: center;
}
#ureshii .lead2 {
	margin-top: -34px;
	text-align: center;
}
#ureshii .enter {
	margin-top: -59px;
	text-align: center;
}
#ureshii .finish {
	margin-top: -53px;
	text-align: center;
}

#ureshii .holding,
#ureshii .finish {
	display: none;
}

/* --------------------------------------------------------------
    .collabo
-------------------------------------------------------------- */
#collabo {
	padding: 106px 0 111px;
	background: url(../images/collabo_bg.jpg) center center no-repeat;
	background-size: cover;
}
#collabo .col {
	width: 928px;
	margin: 0 auto 37px;
}
#collabo .col .left {
	float: left;
	width: 452px;
}
#collabo .col .left h2 {
	margin-bottom: 27px;
}
#collabo .col .right {
	position: relative;
	float: right;
	width: 476px;
}
#collabo .col .right a {
	display: block;
}
#collabo .col .right .date {
	position: absolute;
	left: 0;
	bottom: -16px;
	width: 100%;
	text-align: center;
}
#collabo .col .right.num1 .date img,
#collabo .col .right.num2 .date img {
	width: 88.17%;
}
#collabo .list {
	position: relative;
	width: 928px;
	margin: 0 auto;
}
#collabo .list .box {
	overflow: hidden;
	width: 100%;
}
#collabo .list .box ul {
	display: block;
	width: 5000px;
	padding-top: 19px;
	font-size: 0;
	transition: all 0.2s ease;
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
}
#collabo .list .box li {
	position: relative;
	display: inline-block;
	margin-right: 52px;
	font-size: 12px;
}
#collabo .list .box li.new a:before {
	content: '';
	position: absolute;
	left: 0;
	top: -19px;
	width: 54px;
	height: 19px;
	background: url(../images/collabo_list_new.png) left top no-repeat;
}
#collabo .list .prev {
	position: absolute;
	left: -46px;
	top: 86px;
}
#collabo .list .next {
	position: absolute;
	right: -46px;
	top: 86px;
}

/* --------------------------------------------------------------
    .schedule
-------------------------------------------------------------- */
#schedule {
	padding: 97px 0 45px;
	background: url(../images/schedule_bg.jpg) center bottom no-repeat;
	background-size: cover;
}
#schedule h2 {
	margin-bottom: 51px;
	text-align: center;
}
#schedule ul {
	width: 1214px;
	margin: 0 auto;
	font-size: 0;
}
#schedule ul li {
	position: relative;
	display: inline-block;
	margin-bottom: 26px;
	font-size: 12px;
}
#schedule ul li + li {
	margin-left: 17px;
}
#schedule ul li:nth-child(6n+1) {
	margin-left: 0;
}
#schedule ul li.enable:before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: url(../images/schedule_list_enable.png) left top no-repeat;
	background-size: 100%;
}
#schedule .caption {
	width: 1214px;
	margin: 0 auto;
}

/* --------------------------------------------------------------
    .purchase
-------------------------------------------------------------- */
#purchase {
	padding: 88px 0 76px;
	background: url(../images/purchase_bg.jpg) center center no-repeat;
	background-size: cover;
}
#purchase .col {
	width: 896px;
	margin: 0 auto;
}
#purchase .col .left {
	float: left;
	width: 421px;
	margin: 155px 0 0 33px;
}
#purchase .col .left h2 {
	margin-bottom: 24px;
}
#purchase .col .right {
	float: right;
	width: 376px;
}
#purchase .col .right li + li {
	margin-top: -10px;
}

/* --------------------------------------------------------------
    .links
-------------------------------------------------------------- */
#links {
	padding: 97px 0 150px;
	color: #fff;
	background-color: #000;
}
#links .col {
	width: 1025px;
	margin: 0 auto 85px;
}
#links .col .left {
	float: left;
	width: 500px;
}
#links .col .left li + li {
	margin-top: 10px;
}
#links .col .right {
	position: relative;
	float: right;
	width: 477px;
	margin-top: 20px;
	padding: 46px 0 23px;
	border: 1px solid #fff;
}
#links .col .right h3 {
	position: absolute;
	left: 74px;
	top: -21px;
}
#links .col .right table {
	width: 436px;
	margin: 0 auto;
}
#links .col .right table tr td {
	padding: 3px 0 0;
	vertical-align: middle;
	text-align: center;
}
#links .col .right table tr:first-child td {
	padding: 0 0 15px;
	border-bottom: 1px dotted #fff;
}
#links .col .right table tr td:first-child {
	width: 173px;
	padding-left: 20px;
}
#links .col .right table tr td p {
	height: 32px;
	margin-bottom: 6px;
	line-height: 32px;
	font-size: 12px;
}
#links .col .right table tr:nth-child(1) td:nth-child(2) p {
	line-height: 16px;
} 
#links .col .right table tr:nth-child(2) img {
	width: 161px;
	height: auto;
}
#links .bannar {
	width: 1025px;
	margin: 0 auto;
	font-size: 0;
}
#links .bannar li {
	display: inline-block;
	margin-bottom: 15px;
	font-size: 12px;
}
#links .bannar li + li {
	margin-left: 16.5px;
}
#links .bannar li:nth-child(7n+1) {
	margin-left: 0;
}

/* ##############################################################
#    #fixedNav
############################################################## */
#fixedNav {
	position: fixed;
	right: 0;
	bottom: 0;
	padding-right: 12px;
	font-size: 0;
	background-color: #fff;
	box-shadow: 0 0 18px 0 rgba(0,0,0,0.5);
	-webkit-transform: scale(0.75);
			transform: scale(0.75);
    -webkit-transform-origin: right bottom;
    		transform-origin: right bottom;
	-webkit-transition: all 0.3s ease;
			transition: all 0.3s ease;
}
#fixedNav.hidden {
	right: -700px;
}
#fixedNav li {
	display: inline-block;
	font-size: 12px;
}
#fixedNav li:nth-child(2) {
	margin-left: 24px;
}
#fixedNav li:nth-child(3) {
	margin-left: 34px;
}
#fixedNav li:nth-child(4) {
	margin-left: 19px;
}
#fixedNav li:nth-child(5) {
	margin-left: 10px;
}


/* ##############################################################
#
#    #modal
#
############################################################## */
#modal {
	display: none;
	position: fixed;
	z-index: 2;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.9);
}
#modal .clickArea {
	position: absolute;
	z-index: 0;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
#modal .inner {
	position: relative;
	z-index: 1;
	top: 50%;
	width: 1000px;
	margin: -300px auto 0;
}
#modal .inner .close {
	position: absolute;
	right: 0;
	top: -70px;
}
#modal .inner .video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}
#modal .inner .video-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}



/* ##############################################################
#
#    responsive
#
############################################################## */

/* --------------------------------------------------------------
    pc
-------------------------------------------------------------- */
@media print, screen and (min-width: 769px) {}



/* --------------------------------------------------------------
    sp
-------------------------------------------------------------- */
@media screen and (max-width: 768px) {
	
	#wrapper {
		padding-bottom: 15.8%;
	}

	/* ##############################################################
	#    #content
	############################################################## */
	#content section .inner {
		width: 100%;
	}

	/* --------------------------------------------------------------
		.mv
	-------------------------------------------------------------- */
	#mv {
		padding-bottom: 148.5px;
		background-image: url(../images/sp_mv_bg.jpg);
	}
	#mv h1 {
		width: 49.06%;
		margin: 0 auto 19px;
		padding-top: 11.5px;
	}
	#mv .lead {
		position: absolute;
		left: -3.13%;
		top: 46.5px;
		width: 39.06%;
	}
	#mv .logo {
		position: absolute;
		right: 3.13%;
		top: 0;
		width: 25.78%;
	}
	#mv .race {
		position: static;
		width: 100%;
		margin-bottom: 21.5px;
	}
	#mv .live {
		position: static;
		width: 84.06%;
		margin: 0 auto;
		padding-bottom: 53px;
	}
	#mv .cm {
		position: static;
		width: 45.94%;
		margin: 0 auto;
	}

	#mv nav {
		height: 148.5px;
	}
	#mv nav ul {
		width: 320px;
		padding: 20.5px 0 13px;
		text-align: center;
	}
	#mv nav ul li {
		width: 160px;
		margin: 0 0 10px 0;
		font-size: 12px;
	}
	#mv nav ul li + li {
		margin-left: 0;
	}

	/* --------------------------------------------------------------
		.koko
	-------------------------------------------------------------- */
	#koko {
		padding: 26px 0;
		background-image: url(../images/sp_koko_bg.png);
	}
	#koko h2 {
		margin-bottom: 17.5px;
	}
	#koko .lead {
		margin-bottom: 46.5px;
	}
	#koko .col {
		width: 78.13%;
		margin: 0 auto;
	}
	#koko .col .detail {
		float: none;
		width: 100%;
		margin-bottom: 43px;
	}
	#koko .col .detail .date {
		left: -9px;
		top: -11px;
		width: 58.5px;
	}
	#koko .col .detail li.show .date {
		width: 46.6%;
	}
	#koko .col .detail .prev {
		left: 32%;
		bottom: -30px;
		width: 25px;
	}
	#koko .col .detail .next {
		right: 32%;
		bottom: -30px;
		width: 25px;
	}
	#koko .col .calendar {
		float: none;
		width: 100%;
		height: 0;
		padding-top: 53%;
	}
	#koko .col .calendar.coming:before {
		width: 100%;
		height: 100%;
		background-size: 100%;
	}
	#koko .col .calendar li {
		width: 18.4%;
	}
	#koko .col .calendar li:nth-child(1) {
		left: 5.2%;
		top: 12.78%;
	}
	#koko .col .calendar li:nth-child(2) {
		left: 29.2%;
		top: 12.78%;
	}
	#koko .col .calendar li:nth-child(3) {
		left: 53.2%;
		top: 12.78%;
	}
	#koko .col .calendar li:nth-child(4) {
		left: 76.2%;
		top: 12.78%;
	}
	#koko .col .calendar li:nth-child(5) {
		left: 5.2%;
		top: 32.33%;
	}
	#koko .col .calendar li:nth-child(6) {
		left: 29.2%;
		top: 32.33%;
	}
	#koko .col .calendar li:nth-child(7) {
		left: 53.2%;
		top: 32.33%;
	}
	#koko .col .calendar li:nth-child(8) {
		left: 76.2%;
		top: 32.33%;
	}
	#koko .col .calendar li:nth-child(9) {
		left: 5.2%;
		top: 51.5%;
	}
	#koko .col .calendar li:nth-child(10) {
		left: 29.2%;
		top: 51.5%;
	}
	#koko .col .calendar li:nth-child(11) {
		left: 53.2%;
		top: 51.5%;
	}
	#koko .col .calendar li:nth-child(12) {
		left: 76.2%;
		top: 51.5%;
	}
	#koko .col .calendar li:nth-child(13) {
		left: 5.2%;
		top: 70.68%;
	}
	#koko .col .calendar li:nth-child(14) {
		left: 29.2%;
		top: 70.68%;
	}
	#koko .col .calendar li:nth-child(15) {
		left: 53.2%;
		top: 70.68%;
	}

	/* --------------------------------------------------------------
		.ureshii
	-------------------------------------------------------------- */
	#ureshii {
		padding: 12.5px 0 14px;
		background-image: url(../images/sp_ureshii_bg.png);
	}
	#ureshii .lead {
		margin-top: -9px;
	}
	#ureshii .bubble {
		margin-top: -15px;
	}
	#ureshii .lead2 {
		margin-top: -14px;
	}
	#ureshii .enter {
		margin-top: -24px;
	}
	#ureshii .finish {
		margin-top: -31.5px;
	}

	/* --------------------------------------------------------------
		.collabo
	-------------------------------------------------------------- */
	#collabo {
		padding: 35.5px 0 30.5px;
		background-image: url(../images/sp_collabo_bg.jpg);
	}
	#collabo .col {
		width: 100%;
		margin: 0 auto 41px;
	}
	#collabo .col .left {
		float: none;
		width: 100%;
	}
	#collabo .col .left h2 {
		margin-bottom: 22.5px;
	}
	#collabo .col .right {
		float: none;
		width: 93.75%;
		margin: 25.5px auto 0;
	}
	#collabo .col .right .date {
		bottom: -10.5px;
	}
	#collabo .col .right .date img {
		width: 62.17%;
	}
	#collabo .list {
		width: 84.69%;
	}
	#collabo .list .box ul {
		width: 922.51%;
	}
	#collabo .list .box li {
		width: 5.18%;
		margin-right: 0.48%;
	}
	#collabo .list .prev {
		left: -18px;
		top: calc(50% + 2px);
		width: 9.5px;
	}
	#collabo .list .next {
		right: -18px;
		top: calc(50% + 2px);
		width: 9.5px;
	}

	/* --------------------------------------------------------------
		.schedule
	-------------------------------------------------------------- */
	#schedule {
		padding: 43.5px 0 41px;
		background-image: url(../images/sp_schedule_bg.jpg);
	}
	#schedule h2 {
		margin-bottom: 35px;
	}
	#schedule ul {
		width: 93.75%;
		margin: 0 auto 21.5px;
	}
	#schedule ul li {
		width: 48%;
		margin-bottom: 17.5px;
	}
	#schedule ul li + li,
	#schedule ul li:nth-child(6n+1) {
		margin-left: 0;
	}
	#schedule ul li:nth-child(even) {
		margin-left: 4%;
	}
	#schedule .caption {
		width: 89.69%;
	}

	/* --------------------------------------------------------------
		.purchase
	-------------------------------------------------------------- */
	#purchase {
		padding: 40px 0 37.5px;
		background-image: url(../images/sp_purchase_bg.jpg);
	}
	#purchase .col {
		width: 100%;
	}
	#purchase .col .left {
		float: none;
		width: 100%;
		margin: 0;
	}
	#purchase .col .left h2 {
		margin-bottom: 20px;
	}
	#purchase .col .left .lead {
		margin-bottom: 18px;
	}
	#purchase .col .right {
		float: none;
		width: 85.94%;
		margin: 0 auto;
	}
	#purchase .col .right li + li {
		margin-top: -1px;
	}

	/* --------------------------------------------------------------
		.links
	-------------------------------------------------------------- */
	#links {
		padding: 61px 0 45px;
	}
	#links .col {
		width: 83.91%;
		margin: 0 auto 50px;
	}
	#links .col .left {
		float: none;
		width: 100%;
	}
	#links .col .left li + li {
		margin-top: 15px;
	}
	#links .col .right {
		float: none;
		width: 100%;
		margin-top: 86px;
		padding: 16px 0 8px;
	}
	#links .col .right h3 {
		position: absolute;
		left: 0;
		top: -16px;
		width: 100%;
		text-align: center;
	}
	#links .col .right h3 img {
		width: 69.65%;
	}
	#links .col .right table {
		display: block;
		width: 91.25%;
		margin: 0 auto;
	}
	#links .col .right table tbody,
	#links .col .right table tr,
	#links .col .right table td {
		display: block;
	}
	#links .col .right table tr {
		border-bottom: 1px dotted #fff;
	}
	#links .col .right table tr + tr {
		border-bottom: none;
	}
	#links .col .right table tr td {
		padding: 8px 0 16px !important;
		text-align: center;
	}
	#links .col .right table tr td + td {
		width: 100%;
		padding-bottom: 17px;
		text-align: center;
	}
	#links .col .right table tr:first-child td {
		padding-left: 0;
		border-bottom: none;
	}
	#links .col .right table tr td:first-child {
		width: 100%;
		font-size: 9px;
		border-bottom: 1px dotted #fff;
	}
	#links .col .right table tr td img {
		width: 45.04% !important;
	}
	#links .col .right table tr:nth-child(1) td:nth-child(1) img {
		width: 64.06% !important;
	}
	#links .col .right table tr td p {
		height: 16px;
		margin: 6px 0;
		line-height: 16px !important;
		font-size: 10px;
	}
	#links .bannar {
		width: 83.91%;
	}
	#links .bannar li {
		width: 30.73%;
		margin-bottom: 12.5px;
	}
	#links .bannar li + li,
	#links .bannar li:nth-child(7n+1) {
		margin-left: 3.91%;
	}
	#links .bannar li:nth-child(3n+1) {
		margin-left: 0;
	}

	/* ##############################################################
	#    #fixedNav
	############################################################## */
	#fixedNav {
		position: fixed;
		right: 0;
		bottom: 0;
		padding-right: 1.88%;
		-webkit-transform: scale(1);
				transform: scale(1);
	}
	#fixedNav.hidden {
		right: 0;
		bottom: -100px;
	}
	#fixedNav li:nth-child(1) {
		width: 28.75%;
	}
	#fixedNav li:nth-child(2) {
		width: 13.75%;
		margin-left: 3.75%;
	}
	#fixedNav li:nth-child(3) {
		width: 10.16%;
		margin-left: 5.31%;
	}
	#fixedNav li:nth-child(4) {
		width: 16.09%;
		margin-left: 2.97%;
	}
	#fixedNav li:nth-child(5) {
		width: 15.3%;
		margin-left: 1.56%;
	}

	/* ##############################################################
	#
	#    #modal
	#
	############################################################## */
	#modal {
		display: none;
		position: fixed;
		z-index: 2;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,0.9);
	}
	#modal .inner {
		width: 300px;
		margin: -100px auto 0;
	}
	#modal .inner .close {
		top: -40px;
		width: 18px;
		height: 18px;
	}
}