@charset "shift_jis";

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

#mono-wrap01 {
	background: url(../mono/images/bg_mono01.jpg) center 0 no-repeat;
	width: 100%;
	width: expression(document.body.clientWidth < 962? "960px" : "auto");
}
#mono-wrap02 {
	background: url(../mono/images/bg_mono02.jpg) center 240px no-repeat;
	width: 100%;
	width: expression(document.body.clientWidth < 962? "960px" : "auto");
}
#mono-wrap03 {
	background: url(../mono/images/bg_mono03.jpg) center 480px no-repeat;
	width: 100%;
	width: expression(document.body.clientWidth < 962? "960px" : "auto");
}
#mono-wrap04 {
	background: url(../mono/images/bg_mono04.jpg) center 720px no-repeat;
	width: 100%;
	width: expression(document.body.clientWidth < 962? "960px" : "auto");
}
#mono-wrap05 {
	background: url(../mono/images/bg_mono05.jpg) center 960px no-repeat;
	width: 100%;
	width: expression(document.body.clientWidth < 962? "960px" : "auto");
}
#mono-wrap06 {
	background: url(../mono/images/bg_mono06.jpg) center 1200px no-repeat;
	width: 100%;
	width: expression(document.body.clientWidth < 962? "960px" : "auto");
}
#mono-wrap07 {
	background: url(../mono/images/bg_mono07.jpg) center 1440px no-repeat;
	width: 100%;
	width: expression(document.body.clientWidth < 962? "960px" : "auto");
}

#mono .inner {
	height: 1620px;
	overflow: visible;
}

.ttl-mono {
	padding: 114px 0 0 88px;
}

.copy {
	margin: 12px 0 0 92px;
}

.img-mono {
	position: absolute;
	top: 119px;
	left: 522px;
}

.ttl-item {
	padding-top: 41px;
	text-align: center;
}

.item-copy {
	position: absolute;
	top: 1142px;
	left: 261px;
}
.itemlist li{
	position: absolute;
}
.itemlist li span {
	position: absolute;
	display: block;
	margin: 0;
	padding: 0;
}
.itemlist li a span {
	position: absolute;
	display: block;
	margin: 0;
	padding: 0;
	cursor: pointer;
}
.itemlist li a span.btn {
	width: 126px;
	height: 43px;
	background: url(../mono/images/btn_movie_off.png) left top no-repeat;
}
.itemlist li a:hover span.btn {
	background: url(../mono/images/btn_movie_on.png) left top no-repeat;
}

.itemlist li.item1 {
	top: 500px;
	left: 90px;
}
.itemlist li.item1 .copy {
	top: 12px;
	left: 150px;
}
.itemlist li.item1 span.item,
.itemlist li.item1 a span.item {
	top: 0;
	left: 0;
	width: 238px;
	height: 240px;
	background: url(../mono/images/img_item01_off.png) left top no-repeat;
}
.itemlist li.item1 a:hover span.item {
	background: url(../mono/images/img_item01_on.png) left top no-repeat;
}
.itemlist li.item1 .btn {
	top: 206px;
	left: 62px;
}

.itemlist li.item2 {
	top: 512px;
	left: 525px;
}
.itemlist li.item2 .copy {
	top: 0;
	left: 0;
}
.itemlist li.item2 span.item,
.itemlist li.item2 a span.item {
	top: 41px;
	left: 116px;
	width: 210px;
	height: 162px;
	background: url(../mono/images/img_item02_off.png) left top no-repeat;
}
.itemlist li.item2 a:hover span.item {
	background: url(../mono/images/img_item02_on.png) left top no-repeat;
}
.itemlist li.item2 .btn {
	top: 194px;
	left: 168px;
}

.itemlist li.item3 {
	top: 668px;
	left: 352px;
}
.itemlist li.item3 .copy {
	top: 0;
	left: 0;
}
.itemlist li.item3 span.item,
.itemlist li.item3 a span.item {
	top: 79px;
	left: 23px;
	width: 215px;
	height: 309px;
	background: url(../mono/images/img_item03_off.png) left top no-repeat;
}
.itemlist li.item3 a:hover span.item {
	background: url(../mono/images/img_item03_on.png) left top no-repeat;
}
.itemlist li.item3 .btn {
	top: 390px;
	left: 66px;
}

.itemlist li.item4 {
	top: 798px;
	left: 90px;
}
.itemlist li.item4 .copy {
	top: 0;
	left: 0;
}
.itemlist li.item4 span.item,
.itemlist li.item4 a span.item {
	top: 109px;
	left: 79px;
	width: 157px;
	height: 220px;
	background: url(../mono/images/img_item04_off.png) left top no-repeat;
}
.itemlist li.item4 a:hover span.item {
	background: url(../mono/images/img_item04_on.png) left top no-repeat;
}
.itemlist li.item4 .btn {
	top: 299px;
	left: 2px;
}

.itemlist li.item5 {
	top: 775px;
	left: 598px;
}
.itemlist li.item5 .copy {
	top: 0;
	left: 0;
}
.itemlist li.item5 span.item,
.itemlist li.item5 a span.item {
	top: 72px;
	left: 38px;
	width: 252px;
	height: 261px;
	background: url(../mono/images/img_item05_off.png) left top no-repeat;
}
.itemlist li.item5 a:hover span.item {
	background: url(../mono/images/img_item05_on.png) left top no-repeat;
}
.itemlist li.item5 .btn {
	top: 321px;
	left: 151px;
}

.area01 .mario {
	position: absolute;
	bottom: 360px;
	left: 64px;
}

.area01 .kinopio {
	position: absolute;
	bottom: 335px;
	left: 703px;
}

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

/* ========================================
	#footer
======================================== */
#mono #footer {
	background: #E7F8F7 url(../common/bg_footer2.png) 0 0 repeat-x;
}


/* --- 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;
}