@charset "shift_jis";

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


/* adventure */
#adv-movie {
	background: url(../adventure/images/bg_adventure.png) 0 0 no-repeat;
	height: 517px;
	margin: 43px 0 22px 0;
}

#adv-movie .ttl-adventure {
	position: absolute;
	top: 89px;
	left: 171px;
}

#adv-movie .copy01 {
	position: absolute;
	top: 227px;
	left: 36px;
}

#adv-movie .copy02 {
	position: absolute;
	top: 377px;
	left: 36px;
}

#adv-movie .chara-movie {
	position: absolute;
	top: 224px;
	right: 51px;
}


/* area02 charactor */
.area02 {
	height: 735px;
}

.charactor01 {
	position: relative;
	height: 411px;
}

/* mario */
.charactor01 #marioWrap,
.charactor01 #lucyWrap,
.charactor01 #kinopioWrap,
.charactor01 #marioWrap a,
.charactor01 #lucyWrap a,
.charactor01 #kinopioWrap a {
	background: url(../adventure/images/bg_chara.png) 0 0 no-repeat;
	cursor: pointer;
}

.charactor01 #marioWrap a {
	position: absolute;
	width: 332px;
	height: 352px;
	top: 60px;
	left: 3px;
	display: block;
}

.charactor01 #marioWrap a span.mario-tag {
	position: absolute;
	width: 223px;
	height: 86px;
	top: 255px;
	left: 135px;
	display: block;
	background: url(../adventure/images/img_mario_tag_off.png) 0 0 no-repeat;
}
.charactor01 #marioWrap a:hover span.mario-tag {
	background: url(../adventure/images/img_mario_tag_on.png) 0 0 no-repeat;
}

.charactor01 .mario {
	position: absolute;
	top: 54px;
	left: 54px;
	cursor: pointer;
}


/* lucy */
.charactor01 #lucyWrap a {
	position: absolute;
	width: 332px;
	height: 353px;
	top: 5px;
	left: 322px;
	display: block;
}

.charactor01 #lucyWrap a span.lucy-tag {
	position: absolute;
	width: 224px;
	height: 86px;
	top: 26px;
	left: 107px;
	display: block;
	background: url(../adventure/images/img_lucy_tag_off.png) 0 0 no-repeat;
}
.charactor01 #lucyWrap a:hover span.lucy-tag {
	background: url(../adventure/images/img_lucy_tag_on.png) 0 0 no-repeat;
}

.charactor01 .lucy {
	position: absolute;
	top: 88px;
	left: 57px;
	cursor: pointer;
}


/* kinopio */
.charactor01 #kinopioWrap a {
	position: absolute;
	width: 325px;
	height: 353px;
	top: 55px;
	left: 632px;
	display: block;
}

.charactor01 #kinopioWrap a span.kinopio-tag {
	position: absolute;
	width: 225px;
	height: 86px;
	top: 255px;
	right: 32px;
	display: block;
	background: url(../adventure/images/img_kinopio_tag_off.png) 0 0 no-repeat;
}
.charactor01 #kinopioWrap a:hover span.kinopio-tag {
	background: url(../adventure/images/img_kinopio_tag_on.png) 0 0 no-repeat;
}

.charactor01 .kinopio {
	position: absolute;
	top: 59px;
	/*right: 61px;*/
	left: 62px;
	cursor: pointer;
}

.charactor01 .book {
	position: absolute;
	top: 0;
	left: 214px;
}

.charactor02 {
	position: relative;
	background: url(../adventure/images/bg_charactor02.png) 0 0 no-repeat;
	height: 324px;
}

.charactor02 .ttl-chara {
	position: absolute;
	top: 0;
	left: 312px;
}

.charactor02 .patapata {
	position: absolute;
	top: 63px;
	left: 36px;
}

.charactor02 .kuribo {
	position: absolute;
	top: 133px;
	left: 320px;
}

.charactor02 .kuppajr {
	position: absolute;
	top: 22px;
	right: 0;
}

/* area03 kyoten */
.area03 {
	background: url(../adventure/images/bg_kyoten.png) 0 0 no-repeat;
	height: 497px;
	margin-top: -46px;
}

.area03 .ttl-kyoten {
	position: absolute;
	top: 121px;
	left: 36px;
}

.area03 .kino01 {
	position: absolute;
	top: -35px;
	left: 21px;
}

.area03 .kino02 {
	position: absolute;
	top: 52px;
	left: 550px;
}

.area03 .kino03 {
	position: absolute;
	top: 372px;
	left: 356px;
}

.area03 .kino04 {
	position: absolute;
	top: 360px;
	right: 0;
}

.area03 .kyoten-copy {
	position: absolute;
	top: 179px;
	left: 36px;
}

.area03 .comment {
	position: absolute;
	top: 151px;
	right: 12px;
}

.area03 .kyoten-img01 {
	position: absolute;
	top: 244px;
	left: 36px;
}

.area03 .kyoten-img02 {
	position: absolute;
	top: 244px;
	left: 360px;
}

.area03 .kyoten-img03 {
	position: absolute;
	top: 306px;
	left: 481px;
}

.area03 .kyoten-img04 {
	position: absolute;
	top: 244px;
	right: 36px;
}

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

.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 .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;
}