@charset "shift_jis";

#wrapper {
	height: auto !important;
	height: 100%;
	min-height: 100%;
}

/* ========================================
	bg
======================================== */
#wrapper01 {
	background-image: url(../princess/images/bg01.jpg);
	background-position: center top;
	background-repeat: no-repeat;
	position: relative;
}

#wrapper02 {
	background-image: url(../princess/images/bg02.jpg);
	background-position: center 300px;
	background-repeat: no-repeat;
}

#wrapper03 {
	background-image: url(../princess/images/bg03.jpg);
	background-position: center 600px;
	background-repeat: no-repeat;
}

#wrapper04 {
	background-image: url(../princess/images/bg04.jpg);
	background-position: center 900px;
	background-repeat: no-repeat;
}

#wrapper05 {
	background-image: url(../princess/images/bg05.jpg);
	background-position: center 1200px;
	background-repeat: no-repeat;
}

#wrapper06 {
	background-image: url(../princess/images/bg06.jpg);
	background-position: center 1500px;
	background-repeat: no-repeat;
}

#wrapper07 {
	background-image: url(../princess/images/bg07.jpg);
	background-position: center 1800px;
	background-repeat: no-repeat;
}

#wrapper08 {
	background-image: url(../princess/images/bg08.jpg);
	background-position: center 2100px;
	background-repeat: no-repeat;
}

/* ========================================
	#main
======================================== */
#main {
	position: relative;
	padding: 135px 0 0;
	background: url(../common/bg_main_top.png) no-repeat center top;
}

#main h1 {
	position: absolute;
		top: 17px;
		left: -174px;
	z-index: 100;
}

#main .inner {
	background: url(../common/bg_main_body.png) repeat-y center top;
}


/* --------------------------------
	#princess01
-------------------------------- */
#princess01 {
	position: relative;
	height: 445px;
}

#princess01 .txt-area {
	float: left;
	padding-top: 65px;
	padding-left: 40px;
}

#princess01 h2 {
}

#princess01 p.txt {
	margin-top: 16px;
}

#princess01 .movie-wrap {
	float: right;
	width: 460px;
	height: 263px;
	padding-top: 41px;
	background: url(../princess/images/bg_princess01_movie.png) no-repeat left bottom;
}

#princess01 #princess01-movie {
	margin-top: 10px;
	margin-left: 10px;
}

#princess01 ul.img-area {
	clear: both;
	padding-top: 17px;
	padding-left: 220px;
}

#princess01 ul.img-area li {
	float: left;
	margin-right: 20px;
}

#princess01 #princess01-chara {
	position: absolute;
		top: 203px;
		left: 37px;
	z-index: 100;
}


/* --------------------------------
	#princess02
-------------------------------- */
#princess02 {
	position: relative;
	padding-top: 30px;
	width: 940px;
	height: 922px;
	margin: 0 auto;
	background: url(../princess/images/bg_princess02_01.jpg) repeat left top;
}

#princess02 .lesson {
	float: left;
	height: 523px;
	margin-left: 30px;
	background: url(../princess/images/bg_princess02_02.jpg) no-repeat left 32px;
}

#princess02 .lesson .wrap {
	width: 360px;
	text-align: center;
}

#princess02 .lesson .txt {
	padding: 8px 0 18px;
}

#princess02 .lesson ul li {
	margin-bottom: 10px;
}

#princess02 .arrow-area #princess02-arrow01 {
	position: absolute;
		top: 207px;
		left: 369px;
}

#princess02 .arrow-area #princess02-kinopio {
	position: absolute;
		top: 268px;
		left: 425px;
}

#princess02 .arrow-area #princess02-arrow02 {
	position: absolute;
		top: 312px;
		left: 369px;
}

#princess02 .arrow-area #princess02-fukidashi01 {
	position: absolute;
		top: 126px;
		left: 381px;
}

#princess02 .arrow-area #princess02-fukidashi02 {
	position: absolute;
		top: 395px;
		left: 381px;
}

#princess02 .arrow-area #princess02-arrow03 {
	position: absolute;
		top: 528px;
		left: 370px;
}

#princess02 .item {
	float: right;
	height: 523px;
	margin-right: 20px;
	background: url(../princess/images/bg_princess02_02.jpg) no-repeat left 32px;
}

#princess02 .item .wrap {
	width: 370px;
	text-align: center;
}

#princess02-movie a:hover img {
	filter: none !important;
}

#princess02 .item .txt {
	padding: 8px 0 11px;
}

#princess02 .item #princess02-club {
	position: absolute;
		top: 379px;
		right: -13px;
}

#princess02 .world {
	position: relative;
	float: left;
	width: 883px;
	height: 322px;
	margin-top: 50px;
	margin-left: 30px;
	text-align: center;
	background: url(../princess/images/bg_princess02_03.png) no-repeat left 17px;
}

#princess02 .world .img-main {
	position: absolute;
		top: 66px;
		left: 219px;
}

#princess02 .world .txt {
	position: absolute;
		top: 71px;
		left: 619px;
}

#princess02 .world .btn-tournament {
	position: absolute;
		top: 172px;
		left: 619px;
}

#princess02 .world #princess02-chara {
	position: absolute;
		top: -14px;
		left: 28px;
}


/* --------------------------------
	#princess03
-------------------------------- */
#princess03 {
	position: relative;
	padding-top: 51px;
	height: 710px;
}

#princess03 h2 {
	padding-left: 40px;
}

#princess03 .img01 {
	position: absolute;
		top: 121px;
		left: 40px;
}

#princess03 .txt01 {
	position: absolute;
		top: 120px;
		left: 459px;
}

#princess03 .img02 {
	position: absolute;
		top: 224px;
		left: 460px;
}

#princess03 .txt02 {
	position: absolute;
		top: 433px;
		left: 40px;
}

#princess03 .img03 {
	position: absolute;
		top: 433px;
		left: 310px;
}

#princess03 .img04 {
	position: absolute;
		top: 433px;
		left: 620px;
}

#princess03 #princess03-chara01 {
	position: absolute;
		top: 292px;
		left: -107px;
}

#princess03 #princess03-chara02 {
	position: absolute;
		top: 109px;
		left: 775px;
}

/* ========================================
	popWrap
======================================== */
#modal {
	display: none;
	position: absolute;
		z-index: 9200;
	left: 50%;
	width: 526px;
	height: 632px;
	margin-left: -345px;
}

#popBody {
	padding-top: 15px;
	background: transparent;
}

#popWrap {
	position: relative;
	width: 526px;
	height: 618px;
	margin: 0 auto;
	background: url("../princess/images/popup_bg.png") no-repeat scroll left top;
	filter :progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../princess/images/popup_bg.png",sizingMethod="crop");
}

#popWrap #moviearea-wrap {
	position: relative;
	width: 506px;
	padding-top: 40px;
}

#popWrap #item-moviearea {
	width: 408px;
	height: 539px;
	margin: 0 auto;
	text-align: center;
}

#popWrap #item-moviearea video,
#popWrap #item-moviearea #stagePoster {
	margin-top: 29px;
}

#popWrap #pop-close {
	position: absolute;
	top: -15px;
	right: 0;
}