@charset "shift_jis";

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

/* background */
#collect .mainvisual-wrap01 {
	background: url(../collect/images/bg_collect01.jpg) center 20px no-repeat;
	width: 100%;
	width: expression(document.body.clientWidth < 962? "960px" : "auto");
}
#collect .mainvisual-wrap02 {
	background: url(../collect/images/bg_collect02.jpg) center 220px no-repeat;
	width: 100%;
	width: expression(document.body.clientWidth < 962? "960px" : "auto");
}
#collect .mainvisual-wrap03 {
	background: url(../collect/images/bg_collect03.jpg) center 372px no-repeat;
	width: 100%;
	width: expression(document.body.clientWidth < 962? "960px" : "auto");
}
#collect .mainvisual-wrap04 {
	background: url(../collect/images/bg_collect04.jpg) center 572px no-repeat;
	width: 100%;
	width: expression(document.body.clientWidth < 962? "960px" : "auto");
}
#collect .mainvisual-wrap05 {
	background: url(../collect/images/bg_collect05.jpg) center 762px no-repeat;
	width: 100%;
	width: expression(document.body.clientWidth < 962? "960px" : "auto");
}
#collect .mainvisual-wrap06 {
	background: url(../collect/images/bg_collect06.jpg) center 900px no-repeat;
	width: 100%;
	width: expression(document.body.clientWidth < 962? "960px" : "auto");
}
#collect .mainvisual-wrap07 {
	background: url(../collect/images/bg_collect07.jpg) center 1100px no-repeat;
	width: 100%;
	width: expression(document.body.clientWidth < 962? "960px" : "auto");
}
#collect .mainvisual-wrap08 {
	background: url(../collect/images/bg_collect08.jpg) center 1290px no-repeat;
	width: 100%;
	width: expression(document.body.clientWidth < 962? "960px" : "auto");
}
#collect .mainvisual-wrap09 {
	background: url(../collect/images/bg_collect09.jpg) center 1419px no-repeat;
	width: 100%;
	width: expression(document.body.clientWidth < 962? "960px" : "auto");
}
#collect .mainvisual-wrap10 {
	background: url(../collect/images/bg_collect10.jpg) center 1619px no-repeat;
	width: 100%;
	width: expression(document.body.clientWidth < 962? "960px" : "auto");
}
#collect .mainvisual-wrap11 {
	background: url(../collect/images/bg_collect11.jpg) center 1819px no-repeat;
	width: 100%;
	width: expression(document.body.clientWidth < 962? "960px" : "auto");
}


/* area01 collect */
.area01 {
	height: 372px;
}

.area01 .ttl-collect {
	position: absolute;
	top: 31px;
	left: 0;
}

.area01 .copy01 {
	position: absolute;
	top: 106px;
	left: 0;
}

.area01 .copy02 {
	position: absolute;
	top: 220px;
	left: 0;
}

.area01 .album {
	position: absolute;
	top: 58px;
	right: 0;
}

.area01 .mario {
	position: absolute;
	top: 133px;
	left: 485px;
}

/* area02 town */
.area02 {
	height: 528px;
}

.area02 .ttl-town {
	position: absolute;
	top: 31px;
	left: 0;
}

.area02 .town-copy01 {
	position: absolute;
	top: 94px;
	left: 0;
}

.area02 .town-copy02 {
	position: absolute;
	top: 154px;
	left: 0;
}

.area02 .town-img01 {
	position: absolute;
	top: 225px;
	left: 0;
}
.area02 .town-img01 .title {
	position: absolute;
	top: -20px;
	left: -10px;
	z-index: 100;
}
.area02 .town-img02 {	
	position: absolute;
	top: 19px;
	right: 0;
}

.area02 .town-img03 {
	position: absolute;
	top: 244px;
	left: 440px;
}

.area02 .kinopio01 {
	position: absolute;
	top: 273px;
	left: 840px;
}

/* area03 shop */
.area03 {
	height: 519px;
}

.area03 .ttl-shop {
	position: absolute;
	top: 32px;
	left: 173px;
}

.area03 .shop-copy01 {
	position: absolute;
	top: 79px;
	left: 173px;
}

.area03 .shop-copy02 {
	position: absolute;
	top: 141px;
	right: 0;
}

.area03 .shop-copy03 {
	position: absolute;
	top: 328px;
	left: 495px;
}

.area03 .shop-img01 {
	position: absolute;
	top: 141px;
	left: 408px;
}

.area03 .shop-img02 {	
	position: absolute;
	top: 327px;
	right: 0;
}

.area03 .kinopio02 {
	position: absolute;
	top: 24px;
	left: 0;
}

/* area04 mono */
.area04 {
	height: 550px;
}

.area04 .ttl-mono {
	position: absolute;
	top: 32px;
	left: 0;
}

.area04 .mono-copy01 {
	position: absolute;
	top: 94px;
	left: 0;
}

.area04 .mono-img01 {
	position: absolute;
	top: 150px;
	left: 0;
}

.area04 .mono-img02 {	
	position: absolute;
	top: 305px;
	left: 301px;
}

.area04 .mono-img03 {	
	position: absolute;
	top: 353px;
	left: 570px;
}

.area04 .kinopio03 {
	position: absolute;
	top: 240px;
	left: 786px;
}

/* page-top */
#collect #main .area04 .pagetop {
	position: absolute;
	bottom: 10px;
	right: 0;
	padding-bottom: 0;
}


/* --- js flip animation --- */
.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;
}

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