@charset "shift_jis";

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

/* area01 */
.nazotoki-wrap01 {
	background: url(../nazotoki/images/bg_nazo01.jpg) center 0 no-repeat;
}
.nazotoki-wrap02 {
	background: url(../nazotoki/images/bg_nazo02.jpg) center 300px no-repeat;
}

/* area01 */
.area01 {
	height: 184px;
}
.area01 .ttl-nazotoki {
	padding-top: 31px;
}

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

.area01 .mario {
	position: absolute;
	top: 18px;
	left: 768px;
}

.area01 .lucy {
	position: absolute;
	top: 9px;
	left: 513px;
}

.area01 .question {
	position: absolute;
	top: 51px;
	left: 678px;
}



/* area02 peparize */
.area02 {
	height: 434px;
	padding-top: 88px;
	text-align: center;
}

.area02 .ttl-peparize {
	margin-bottom: 8px;
}

.area02 .p-img01 {
	position: absolute;
	top: 175px;
	left: 0;
}

.area02 .p-img02 {
	position: absolute;
	top: 362px;
	left: 351px;
}

.area02 .p-img03 {
	position: absolute;
	top: 187px;
	left: 685px;
}

.area02 .p-img04 {
	position: absolute;
	top: 276px;
	left: 0;
}

.area02 .p-img05 {
	position: absolute;
	top: 188px;
	left: 324px;
}

.area02 .p-img06 {
	position: absolute;
	top: 297px;
	left: 648px;
}


/* area03 other */
.other01 {
	float: left;
	background: url(../nazotoki/images/bg_nazo03.jpg) 0 0 no-repeat;
	width: 611px;
	height: 429px;
}

.other01 .ttl-other01 {
	padding: 97px 0 21px 56px;
}

.other01 .img-other01 {
	float: left;
	padding: 0 9px 0 30px;
	text-align: center;
}

.other01 .img-other02 {
	float: left;
	text-align: center;
}

.other02 {
	float: right;
	background: url(../nazotoki/images/bg_nazo04.jpg) 0 0 no-repeat;
	width: 336px;
	height: 429px;
}

.other02 .other02-copy01 {
	padding: 78px 0 0 21px;
}

.other02 .other02-copy02 {
	padding: 0 0 8px 36px;
}

.other02 .other02-img01 {
	padding: 0 0 0 32px;
}


/* flip & float */
.flipImages,
.animImg,
.floatImage {
	position: absolute;
}

.animImg {
	position: absolute;
}

.hide {
	display: none;
}

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

.flipImages img.flipSingle.hide {
 display: none;
}

@-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);
	}
}

@-webkit-keyframes float {
	0% {
		top: 0;
	}
	50% {
		top: 6px;
	}
}

.floatImage img.floating {
	-webkit-animation: float 2s linear 0 infinite normal;
}


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