@charset "utf-8";

body
{
	background: url(../img/course/bg_pattern.png) repeat 50% 100%;
}

/*************************
	wrap
*************************/

#wrap
{
	background: url(../img/course/bg_shadow.png) repeat-x 50% 100%;
}

/*************************
	bg
*************************/

#bg
{
	width: 100%;
	height: 100%;
	min-height: 820px;
	position: relative;
	background: url(../img/course/bg_stripe.png) repeat 50% 100%;
}

/*************************
	content
*************************/

#content
{
	width: 1048px;
	height: 726px;
	margin: -418px 0 0 -524px;
}

#content div.yoshi
{
	width: 356px;
	height: 240px;
	position: absolute;
	top: 30px;
	right: 0;
	z-index: 3;
}

#content div.mario
{
	width: 204px;
	height: 328px;
	position: absolute;
	top: 305px;
	left: 1px;
	z-index: 3;
}

#content a.modal
{
	display: block;
	width: 123px;
	height: 68px;
	background: url(../img/course/bttn.png) no-repeat 0 0;
	text-indent: 100%;
	overflow: hidden;
	white-space: nowrap;
	position: absolute;
	top: 629px;
}

#content a.info
{
	background-position: 0 0;
	left: 53px;
}

#content a.balloon
{
	background-position: -123px 0;
	left: 875px;
}

body#pc #content a.info:hover{ background-position: 0 -68px; }
body#pc #content a.balloon:hover{ background-position: -123px -68px; }

/*************************
	subttl
*************************/

#subttl
{
	width: 687px;
	height: 69px;
	background: url(../img/course/subttl.png) no-repeat 0 0;
	margin: 64px 0 0 75px;
}

#subttl h2, #subttl p
{
	visibility: hidden;
}

/*************************
	movie
*************************/

#movie
{
	width: 700px;
	height: 472px;
	background: url(../img/course/movie_frame.png) no-repeat 0 0;
	margin: 19px 0 0 174px;
	position: relative;
}

#movie img.frame_top, #movie img.frame_left, #movie img.frame_right
{
	position: absolute;
	pointer-events : none;
	z-index: 3;
}

#movie img.frame_top{ top: 5px; left: 9px; }
#movie img.frame_left{ top: 13px; left: 9px; }
#movie img.frame_right{ top: 13px; left: 687px; }

/*************************
	moviebox
*************************/

#moviebox
{
	position: absolute;
	top: 5px;
	left: 9px;
	width: 682px;
	height: 378px;
	z-index: 2;
	background: #000;
}

#externalSwfContainer
{
	width: 682px;
	height: 378px;
}

#externalSwfContainer img
{
	margin: 158px 0;
}

/*************************
	cupname
*************************/

#cupname
{
	width: 176px;
	height: 163px;
	position: absolute;
	top: 301px;
	left: 4px;
	overflow: hidden;
}

#cupname li
{
	width: 176px;
	height: 163px;
	position: absolute;
	top: 0;
	left: 0;
	visibility: hidden;
}

#cupname li.select
{
	visibility: visible;
}

#cupname li div
{
	width: 176px;
	height: 163px;
	background: url(../img/course/cup_name.png) no-repeat 0 0;
	text-indent: 100%;
	overflow: hidden;
	white-space: nowrap;
}

#cupname li div.cup_1{ background-position: 0 0; }
#cupname li div.cup_2{ background-position: -176px 0; }
#cupname li div.cup_3{ background-position: -352px 0; }
#cupname li div.cup_4{ background-position: -528px 0; }
#cupname li div.cup_5{ background-position: 0 -163px; }
#cupname li div.cup_6{ background-position: -176px -163px; }
#cupname li div.cup_7{ background-position: -352px -163px; }
#cupname li div.cup_8{ background-position: -528px -163px; }

/*************************
	course
*************************/

#course
{
	width: 526px;
	height: 80px;
	overflow: hidden;
	position: absolute;
	top: 383px;
	left: 170px;
	z-index: 3;
}

#course li
{
	width: 0;
	height: 80px;
	position: absolute;
	top: 0;
	overflow: hidden;
	z-index: 5;
}

#course li.select
{
	width: 526px;
	z-index: 4;
}

#course li.next{ left: 0; }
#course li.prev{ right: 0; }

#course li ul
{
	width: 516px;
	height: 80px;
	padding-left: 10px;
	overflow: hidden;
	position: absolute;
	top: 0;
	right: 0;
}

#course li.next ul{ left: 0; }
#course li.prev ul{ right: 0; }

#course li ul li
{
	width: 125px;
	height: 73px;
	background: url(../img/course/course_br.png) no-repeat 0 80px;
	float: left;
	margin-left: -10px;
	padding: 6px 7px 1px;
	position: static;
}

body#pc #course ul li:hover
{
	background-position: 50% 50%;
}

#course ul li a
{
	display: block;
	width: 125px;
	height: 75px;
	background: url(../img/course/course.png) no-repeat 0 0;
}

#course ul.cup_1 li.course_1 a{ background-position: 0 0; }
#course ul.cup_1 li.course_2 a{ background-position: -125px 0; }
#course ul.cup_1 li.course_3 a{ background-position: -250px 0; }
#course ul.cup_1 li.course_4 a{ background-position: -375px 0; }
#course ul.cup_2 li.course_1 a{ background-position: 0 -73px; }
#course ul.cup_2 li.course_2 a{ background-position: -125px -73px; }
#course ul.cup_2 li.course_3 a{ background-position: -250px -73px; }
#course ul.cup_2 li.course_4 a{ background-position: -375px -73px; }
#course ul.cup_3 li.course_1 a{ background-position: 0 -146px; }
#course ul.cup_3 li.course_2 a{ background-position: -125px -146px; }
#course ul.cup_3 li.course_3 a{ background-position: -250px -146px; }
#course ul.cup_3 li.course_4 a{ background-position: -375px -146px; }
#course ul.cup_4 li.course_1 a{ background-position: 0 -219px; }
#course ul.cup_4 li.course_2 a{ background-position: -125px -219px; }
#course ul.cup_4 li.course_3 a{ background-position: -250px -219px; }
#course ul.cup_4 li.course_4 a{ background-position: -375px -219px; }
#course ul.cup_5 li.course_1 a{ background-position: 0 -292px; }
#course ul.cup_5 li.course_2 a{ background-position: -125px -292px; }
#course ul.cup_5 li.course_3 a{ background-position: -250px -292px; }
#course ul.cup_5 li.course_4 a{ background-position: -375px -292px; }
#course ul.cup_6 li.course_1 a{ background-position: 0 -365px; }
#course ul.cup_6 li.course_2 a{ background-position: -125px -365px; }
#course ul.cup_6 li.course_3 a{ background-position: -250px -365px; }
#course ul.cup_6 li.course_4 a{ background-position: -375px -365px; }
#course ul.cup_7 li.course_1 a{ background-position: 0 -438px; }
#course ul.cup_7 li.course_2 a{ background-position: -125px -438px; }
#course ul.cup_7 li.course_3 a{ background-position: -250px -438px; }
#course ul.cup_7 li.course_4 a{ background-position: -375px -438px; }
#course ul.cup_8 li.course_1 a{ background-position: 0 -511px; }
#course ul.cup_8 li.course_2 a{ background-position: -125px -511px; }
#course ul.cup_8 li.course_3 a{ background-position: -250px -511px; }
#course ul.cup_8 li.course_4 a{ background-position: -375px -511px; }

#course ul li a span
{
	display: block;
	width: 125px;
	height: 75px;
	background: url(../img/course/course_shadow.png) no-repeat 0 0;
	text-indent: 100%;
	overflow: hidden;
	white-space: nowrap;
}

body#pc #course ul li a:hover span{ background-position: 0 -73px; }
#course ul li a.select span{ background-position: 0 -146px!important; }

/*************************
	cup
*************************/

#cupMark
{
	display: block;
	width: 87px;
	height: 87px;
	position: absolute;
	top: 618px;
	left: 197px;
}

#cup
{
	width: 648px;
	height: 87px;
	padding-left: 6px;
	position: absolute;
	top: 618px;
	left: 197px;
	overflow: hidden;
}

#cup li
{
	width: 79px;
	height: 79px;
	float: left;
	margin-left: -6px;
	padding: 4px;
}

#cup li a, #cup li p
{
	display: block;
	width: 79px;
	height: 79px;
	background: url(../img/course/cup.png) no-repeat 0 0;
	text-indent: 100%;
	overflow: hidden;
	white-space: nowrap;
}

#cup li a.cup_1{ background-position: 0 0; }
#cup li a.cup_2{ background-position: -79px 0; }
#cup li a.cup_3{ background-position: -158px 0; }
#cup li a.cup_4{ background-position: -237px 0; }
#cup li a.cup_5{ background-position: -316px 0; }
#cup li a.cup_6{ background-position: -395px 0; }
#cup li a.cup_7{ background-position: -474px 0; }
#cup li a.cup_8{ background-position: -553px 0; }
body#pc #cup li a.cup_1:hover{ background-position: 0 -79px; }
body#pc #cup li a.cup_2:hover{ background-position: -79px -79px; }
body#pc #cup li a.cup_3:hover{ background-position: -158px -79px; }
body#pc #cup li a.cup_4:hover{ background-position: -237px -79px; }
body#pc #cup li a.cup_5:hover{ background-position: -316px -79px; }
body#pc #cup li a.cup_6:hover{ background-position: -395px -79px; }
body#pc #cup li a.cup_7:hover{ background-position: -474px -79px; }
body#pc #cup li a.cup_8:hover{ background-position: -553px -79px; }

/*************************
	modal
*************************/

#modal.on.disp_1 div.info,
#modal.on.disp_2 div.balloon
{
	display: block;
}

/*************************
	info
*************************/

#modal div.info
{
	width: 900px;
	height: 636px;
	top: 50%;
	left: 50%;
	margin: -369px 0 0 -450px;
}

#modal div.info img.photo_01,
#modal div.info img.photo_02,
#modal div.info img.photo_03
{
	position: absolute;
}

#modal div.info img.photo_01{ top: 35px; left: 375px; }
#modal div.info img.photo_02{ top: 309px; left: 85px; }
#modal div.info img.photo_03{ top: 404px; left: 479px; }

#plate
{
	width: 900px;
	height: 636px;
	position: absolute;
	top: 0;
	left: 0;
	background: url(../img/course/info_plate.png) no-repeat 0 0;
}

#plate dl
{
	position: absolute;
}

#plate dl.txt_01
{
	width: 330px;
	height: 223px;
	background: url(../img/course/info_txt_01.png) no-repeat 0 0;
	top: 51px;
	left: 65px;
}

#plate dl.txt_02
{
	width: 255px;
	height: 79px;
	background: url(../img/course/info_txt_02.png) no-repeat 0 0;
	top: 309px;
	left: 485px;
}

#plate dl.txt_03
{
	width: 287px;
	height: 79px;
	background: url(../img/course/info_txt_03.png) no-repeat 0 0;
	top: 512px;
	left: 97px;
}

#plate dl dt, #plate dl dd
{
	visibility: hidden;
}

/*************************
	balloon
*************************/

#modal div.balloon
{
	width: 955px;
	height: 355px;
	background: url(../img/course/balloon_bg_top.png) no-repeat 0 0;
	top: 50%;
	left: 50%;
	margin: -230px 0 0 -475px;
}

#modal div.balloon div.box
{
	width: 955px;
	height: 328px;
	background: url(../img/course/balloon_bg_bttm.png) no-repeat 0 100%;
	padding-top: 27px;
	position: relative;
}

#modal div.balloon div.box dl
{
	width: 955px;
	height: 293px;
	background: url(../img/course/balloon_bg_pattern.png) repeat-y 0 0;
}

#modal div.balloon div.box dl dt
{
	width: 489px;
	height: 105px;
	background: url(../img/course/balloon_ttl.png) no-repeat 26px 16px;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}

#modal div.balloon div.box dl dd
{
	width: 454px;
	height: 169px;
	margin-left: 30px;
	overflow: hidden;
	position: relative;
}

#modal div.balloon div.box dl dd ul
{
	width: 460px;
	height: 174px;
	overflow: hidden;
}

#modal div.balloon div.box dl dd li
{
	width: 109px;
	height: 82px;
	margin: 0 6px 5px 0;
	background: url(../img/course/balloon_course.jpg) no-repeat 0 0;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	float: left;
}

#modal div.balloon div.box dl dd li.course_1{ background-position: 0 0; }
#modal div.balloon div.box dl dd li.course_2{ background-position: -109px 0; }
#modal div.balloon div.box dl dd li.course_3{ background-position: -218px 0; }
#modal div.balloon div.box dl dd li.course_4{ background-position: -327px 0; }
#modal div.balloon div.box dl dd li.course_5{ background-position: 0 -82px; }
#modal div.balloon div.box dl dd li.course_6{ background-position: -109px -82px; }
#modal div.balloon div.box dl dd li.course_7{ background-position: -218px -82px; }
#modal div.balloon div.box dl dd li.course_8{ background-position: -327px -82px; }

#modal div.balloon div.box dl dd img
{
	position: absolute;
	top: 0;
	left: 0;
}

#movie_balloon
{
	width: 416px;
	height: 233px;
	position: absolute;
	top: 67px;
	left: 504px;
	background: #000000;
}

#movie_balloon img
{
	position: absolute;
}

#movie_balloon img.top{ top: 0; left: 0; }
#movie_balloon img.left{ top: 12px; left: 0; }
#movie_balloon img.right{ top: 12px; right: 0; }
#movie_balloon img.bttm{ bottom: 0; left: 0; }

/*************************
	externalSwfContainerModal
*************************/

#externalSwfContainerModal
{
	width: 416px;
	height: 233px;
}

#externalSwfContainerModal img
{
	margin: 91px 8px;
	position: static;
}