@charset "shift_jis";

/* ========================================
	stage
======================================== */
#header,
#footer,
#wrapper  {
	width: expression(document.body.clientWidth < 962? "960px" : "auto");
	min-width: 960px;
	/*max-width: 2000px;*/
}


/* background */
#stage .mainvisual-wrap00 {
	background: url(../stage/images/bg_stage01.jpg) center 0 no-repeat;
	width: 100%;
	width: expression(document.body.clientWidth < 962? "960px" : "auto");
}
#stage .mainvisual-wrap01 {
	background: url(../stage/images/bg_stage02.jpg) center 240px no-repeat;
	width: 100%;
	width: expression(document.body.clientWidth < 962? "960px" : "auto");
}
#stage .mainvisual-wrap02 {
	background: url(../stage/images/bg_stage03.jpg) center 480px no-repeat;
	width: 100%;
	width: expression(document.body.clientWidth < 962? "960px" : "auto");
}
#stage .mainvisual-wrap03 {
	background: url(../stage/images/bg_stage04.jpg) center 720px no-repeat;
	width: 100%;
	width: expression(document.body.clientWidth < 962? "960px" : "auto");
}
#stage .mainvisual-wrap04 {
	background: url(../stage/images/bg_stage05.jpg) center 960px no-repeat;
	width: 100%;
	width: expression(document.body.clientWidth < 962? "960px" : "auto");
}

/* area01 stage */
.area01 {
	height: 1161px;
	z-index: 10;
}

.area01 .ttl-stage {
	margin-top: 31px;
}

.area01 .copy {
	margin-top: 6px;
}

.area01 .img-stage {
	float: right;
	margin-top: 31px;
}

.area01 .mario {
	position: absolute;
	top: 104px;
	left: 437px;
}

.area01 .kinopio {
	position: absolute;
	top: 559px;
	left: 802px;
}

/* thumbs */
.area01 a {
	cursor: pointer;
}

.area01 .thumb01 {
	position: absolute;
	top: 279px;
	left: 37px;
}

.area01 a span.thumb01-copy {
	position: absolute;
	top: 216px;
	left: 44px;
	display: none;
}
.area01 a:hover span.thumb01-copy {
	display: block;
}

.area01 .thumb02 {
	position: absolute;
	top: 378px;
	left: 353px;
}

.area01 a span.thumb02-copy {
	position: absolute;
	top: 314px;
	left: 362px;
	display: none;
}
.area01 a:hover span.thumb02-copy {
	display: block;
}

.area01 .thumb03 {
	position: absolute;
	top: 281px;
	left: 751px;
}

.area01 a span.thumb03-copy {
	position: absolute;
	top: 220px;
	left: 699px;
	display: none;
}
.area01 a:hover span.thumb03-copy {
	display: block;
}

.area01 .thumb04 {
	position: absolute;
	top: 419px;
	left: 676px;
}

.area01 a span.thumb04-copy {
	position: absolute;
	top: 361px;
	left: 685px;
	display: none;
}
.area01 a:hover span.thumb04-copy {
	display: block;
}

.area01 .thumb05 {
	position: absolute;
	top: 540px;
	left: 1px;
}

.area01 a span.thumb05-copy {
	position: absolute;
	top: 475px;
	left: 6px;
	display: none;
}
.area01 a:hover span.thumb05-copy {
	display: block;
}

.area01 .thumb06 {
	position: absolute;
	top: 552px;
	left: 313px;
}

.area01 a span.thumb06-copy {
	position: absolute;
	top: 488px;
	left: 320px;
	display: none;
}
.area01 a:hover span.thumb06-copy {
	display: block;
}

.area01 .thumb07 {
	position: absolute;
	top: 605px;
	left: 539px;
}

.area01 a span.thumb07-copy {
	position: absolute;
	top: 546px;
	left: 554px;
	display: none;
}
.area01 a:hover span.thumb07-copy {
	display: block;
}

.area01 .thumb08 {
	position: absolute;
	top: 691px;
	left: 143px;
}

.area01 a span.thumb08-copy {
	position: absolute;
	top: 624px;
	left: 148px;
	display: none;
}
.area01 a:hover span.thumb08-copy {
	display: block;
}

.area01 .thumb09 {
	position: absolute;
	top: 831px;
	left: 0;
}

.area01 a span.thumb09-copy {
	position: absolute;
	top: 767px;
	left: 15px;
	display: none;
}
.area01 a:hover span.thumb09-copy {
	display: block;
}

.area01 .thumb10 {
	position: absolute;
	top: 730px;
	left: 491px;
}

.area01 a span.thumb10-copy {
	position: absolute;
	top: 670px;
	left: 502px;
	display: none;
}
.area01 a:hover span.thumb10-copy {
	display: block;
}

.area01 .thumb11 {
	position: absolute;
	top: 867px;
	left: 491px;
}

.area01 a span.thumb11-copy {
	position: absolute;
	top: 806px;
	left: 497px;
	display: none;
}
.area01 a:hover span.thumb11-copy {
	display: block;
}

.area01 .thumb12 {
	position: absolute;
	top: 775px;
	left: 776px;
}

.area01 a span.thumb12-copy {
	position: absolute;
	top: 709px;
	left: 734px;
	display: none;
}
.area01 a:hover span.thumb12-copy {
	display: block;
}

.area01 .thumb13 {
	position: absolute;
	top: 871px;
	left: 694px;
}

.area01 a span.thumb13-copy {
	position: absolute;
	top: 812px;
	left: 709px;
	display: none;
}
.area01 a:hover span.thumb13-copy {
	display: block;
}

.area01 .thumb14 {
	position: absolute;
	top: 1015px;
	left: 394px;
}

.area01 a span.thumb14-copy {
	position: absolute;
	top: 953px;
	left: 410px;
	display: none;
}
.area01 a:hover span.thumb14-copy {
	display: block;
}

.area01 .thumb15 {
	position: absolute;
	top: 1039px;
	left: 687px;
}

.area01 a span.thumb15-copy {
	position: absolute;
	top: 976px;
	left: 702px;
	display: none;
}
.area01 a:hover span.thumb15-copy {
	display: block;
}


/* area02 support */
.area02 {
	background: url(../stage/images/bg_support.png) 79px 11px no-repeat;
	height: 367px;
}

.area02 .ttl-support {
	float: left;
	margin: 0 9px 0 32px;
}

.area02 dl {
	float: left;
	margin: 94px 29px 0 0;
}

/* --- js flip animation --- */
.animImg {
	position: absolute;
}

.hide {
	display: none;
}

.flipImages .flipSingle {
	-webkit-transform: perspective(400);
	-webkit-animation: flip 8.466s cubic-bezier(0.6, 0.05, 0.4, 0.95) 0 infinite normal;
}

@-webkit-keyframes flip {
	0% {
		-webkit-transform: perspective(0);
		-webkit-transform: rotateY(0deg);
	}
	44.776% {
		-webkit-transform: perspective(0);
		-webkit-transform: rotateY(0deg);
	}
	50% {
		-webkit-transform: perspective(400);
		-webkit-transform: rotateY(180deg);
	}
	94.776% {
		-webkit-transform: perspective(400);
		-webkit-transform: rotateY(180deg);
	}
}

/* modal window */
#coverLayer,
#innerLayer {
	z-index: 10;
}