@charset "shift_jis";

body#world #wrapper {
	background: url(../world/images/world_bg.gif) repeat-y center top;
}
#wrapper01 {
	background-image: url(../world/images/bg01.jpg);
	background-position: center top;
	background-repeat: no-repeat;
	background-attachment: fixed;
	position: relative;
}

#wrapper02 {
	background-image: url(../world/images/bg02.jpg);
	background-position: center 260px;
	background-repeat: no-repeat;
	background-attachment: fixed;
}

#wrapper03 {
	background-image: url(../world/images/bg03.jpg);
	background-position: center 520px;
	background-repeat: no-repeat;
	background-attachment: fixed;
}

#wrapper04 {
	background-image: url(../world/images/bg04.jpg);
	background-position: center 780px;
	background-repeat: no-repeat;
	background-attachment: fixed;
}

#wrapper05 {
	background-image: url(../world/images/bg05.jpg);
	background-position: center 1040px;
	background-repeat: no-repeat;
	background-attachment: fixed;
}

#wrapper06 {
	background-image: url(../world/images/bg06.jpg);
	background-position: center 1300px;
	background-repeat: no-repeat;
	background-attachment: fixed;
}

#wrapper07 {
	background-image: url(../world/images/bg07.jpg);
	background-position: center 1560px;
	background-repeat: no-repeat;
	background-attachment: fixed;
}


/* ========================================
	#main
======================================== */

.ttl {
	margin: 26px 0 23px 0;
	text-align: center;
}

#mainimg {
	width: 928px;
	height: 628px;
	margin: 0 auto 15px auto;
	overflow: hidden;
}

#slide-area li {
	width: 928px;
	height: 628px;
}


.bx-wrapper {
	position: relative;
}

.bx-controls .bx-pager {
	text-align: center;
	padding-top: 5px;
	position: absolute;
	top: 579px;
	right: 11px;
}

.bx-controls .bx-pager {
	width: 105px;
	height: 10px;
	z-index: 100;
}

.bx-pager a {
	float: left;
	width: 26px;
	height: 26px;
	background: url(../world/images/slide_pointer.png) no-repeat right top;
	margin: 0 9px 0 0;
	text-indent: -9999px;
}
	
.bx-pager a.active{
		background-position: left top;
}

#mainimg .noScriptBox iframe {
	width: 928px;
	height: 628px;
	overflow:hidden;
}
/* --------------------------------
	#story
-------------------------------- */
#story {
	position: relative;
	margin-bottom: 15px;
}

.story-wrap01 {
	background: url(../world/images/story_bg01.png) no-repeat left top;
}
.story-wrap02 {
	background: url(../world/images/story_bg02.png) no-repeat left 355px;
	height: 689px;
}

.stage-copy {
	position: absolute;
	left: 80px;
	top: 77px;
}

.stage-txt {
	position: absolute;
	left: 80px;
	top: 260px;
}

#worldMovie01 {
	position: absolute;
	left: 470px;
	top: 60px;
}

.pre-ttl {
	position: absolute;
	left: 110px;
	top: 0;
	z-index: 100;
}

.movie01 {
	width: 423px;
	height: 555px;
	background: url(../world/images/movie01_bg.jpg) no-repeat left 21px;
	overflow: hidden;
}

.movie01 .movie-img {
	padding: 26px 0 0 12px;
}

#slide-story li {
	width: 400px;
	height: 480px;
}

#bx-pager-story {
	text-align: center;
	padding-top: 5px;
	position: absolute;
	top: 520px;
	left: 165px;
}

#bx-pager-story {
	width: 105px;
	height: 10px;
	z-index: 100;
}

#bx-pager-story a {
	float: left;
	width: 26px;
	height: 26px;
	background: url(../world/images/slide_pointer.png) no-repeat right top;
	margin: 0 9px 0 0;
	text-indent: -9999px;
}
	
#bx-pager-story a.active{
	background-position: left top;
}

#worldMovie01 .noScriptBox iframe {
	width: 423px;
	height: 555px;
	overflow:hidden;
}

/* --------------------------------
	#lorule
-------------------------------- */
#lorule {
	position: relative;
	height: 438px;
	margin-bottom: 15px;
	background: url(../world/images/lorule_bg01.png) no-repeat left top;
}

.lorule-copy {
	position: absolute;
	left: 510px;
	top: 75px;
}

.lorule-txt {
	position: absolute;
	left: 510px;
	top: 172px;
}

#worldMovie02 {
	position: absolute;
	left: 69px;
	top: 70px;
}

.movie02 {
	width: 423px;
	height: 297px;
	background: url(../world/images/movie02_bg.jpg) no-repeat left top;
	overflow: hidden;
}

.movie02 .movie-img {
	padding: 5px 0 0 12px;
}

#slide-lorule li {
	width: 400px;
	height: 240px;
}

#bx-pager-lorule {
	text-align: center;
	padding-top: 5px;
	position: absolute;
	top: 258px;
	left: 164px;
}

#bx-pager-lorule {
	width: 105px;
	height: 10px;
	z-index: 100;
}

#bx-pager-lorule a {
	float: left;
	width: 26px;
	height: 26px;
	background: url(../world/images/slide_pointer.png) no-repeat right top;
	margin: 0 9px 0 0;
	text-indent: -9999px;
}
	
#bx-pager-lorule a.active{
		background-position: left top;
}

#worldMovie02 .noScriptBox iframe {
	width: 423px;
	height: 297px;
	overflow:hidden;
}

/* --------------------------------
	moviePopup
-------------------------------- */
body#worldPop,
body#storyMoviePop,
body#loruleMoviePop {
	background-color: transparent;
}

#worldPop-wrap {
	position: relative;
	width: 928px;
	height: 628px;
}

#worldPop-wrap .movie-main {
	position: absolute;
	top: 579px;
	right: 11px;
}
	
.movie-btn {
	margin: 12px 0 0 157px;
}
	
.movie-main li,
.movie-btn li {
	float: left;
	width: 26px;
	height: 26px;
	background: url(../world/images/slide_pointer.png) no-repeat right top;
	margin: 0 9px 0 0;
	text-indent: -9999px;
	cursor: pointer;
}
	
.movie-main li a,
.movie-btn li a {
	display: block;
	width: 26px;
	height: 26px;
	cursor: pointer;
}

.movie-main li.current,
.movie-btn li.current {
	background-position: left top;
	cursor: default;
}

/* --------------------------------
	#character
-------------------------------- */
#character {
	margin-bottom: 36px;
}

.chara-ttl {
	margin-bottom: 7px;
	text-align: center;
}

#chara-area {
	position: relative;
	width: 960px;
	height: 710px;
	margin: 0 auto;
}
#chara-area li {
	position: absolute;
}
#chara-area li#chara01 {
	top: 5px;
	left: 167px;
	width: 246px;
}
#chara-area li#chara02 {
	top: 349px;
	left: 3px;
	width: 212px;
}
#chara-area li#chara03 {
	top: 345px;
	left: 223px;
	width: 171px;
}
#chara-area li#chara04 {
	top: 332px;
	left: 748px;
	width: 212px;
}
#chara-area li#chara05 {
	top: 5px;
	left: 495px;
	width: 223px;
}
#chara-area li#chara06 {
	top: 329px;
	left: 409px;
	width: 339px;
}
#chara-area li #chara01-img,
#chara-area li #chara01-name,
#chara-area li #chara02-img,
#chara-area li #chara02-name,
#chara-area li #chara03-img,
#chara-area li #chara03-name,
#chara-area li #chara04-img,
#chara-area li #chara04-name,
#chara-area li #chara05-img,
#chara-area li #chara05-name,
#chara-area li #chara06-img,
#chara-area li #chara06-name {
	position: absolute;
}
#chara-area li #chara01-img,
#chara-area li #chara02-img,
#chara-area li #chara03-img,
#chara-area li #chara04-img,
#chara-area li #chara05-img,
#chara-area li #chara06-img{
	top: 0;
}
#chara-area li #chara01-name {
	top: 272px;
	left: 53px;
}
#chara-area li #chara02-name {
	top: 271px;
	left: 38px;
}
#chara-area li #chara03-name {
	top: 275px;
	left: 18px;
}
#chara-area li #chara04-name {
	top: 288px;
	left: 18px;
}
#chara-area li #chara05-name {
	top: 272px;
	left: 74px;
}
#chara-area li #chara06-name {
	top: 290px;
	left: 90px;
}

/* その他のキャラクター */
#chara-other-area {
	position: relative;
	width: 960px;
	height: 367px;
	margin: 0 auto;
	background: url(../world/images/bg_chara_other.png) no-repeat left top;
}

#chara-other-area .chara-other-ttl {
	position: absolute;
	top: 24px;
	left: 374px;
}
#chara-other-area .update {
	position: absolute;
	top: -15px;
	left: 429px;
}

#chara-other-area li#chara07,
#chara-other-area li#chara08,
#chara-other-area li#chara09,
#chara-other-area li#chara10,
#chara-other-area li#chara11,
#chara-other-area li#chara12,
#chara-other-area li#chara13 {
	position: absolute;
}
#chara-other-area li#chara07 {
	top: 74px;
	left: 22px;
	width: 165px;
}
#chara-other-area li#chara08 {
	top: 80px;
	left: 177px;
	width: 126px;
}
#chara-other-area li#chara09 {
	top: 124px;
	left: 304px;
	width: 131px;
}
#chara-other-area li#chara10 {
	top: 78px;
	left: 435px;
	width: 112px;
}
#chara-other-area li#chara11 {
	top: 62px;
	left: 539px;
	width: 160px;
}
#chara-other-area li#chara12 {
	top: 58px;
	left: 687px;
	width: 116px;
}
#chara-other-area li#chara13 {
	top: 51px;
	left: 802px;
	width: 131px;
}

/* --------------------------------
	#pop
-------------------------------- */
#coverLayer {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9000;
	height: 100%;
	width: 100%;
	background: url(../common/lightbox_bg.png) left top repeat;
}
#modal {
	display: none;
	position: absolute;
	z-index: 9200;
	left: 50%;
	width: 859px;
	height: 533px;
}
#popBody {
	padding-top: 17px;
	background: transparent;
}
#pop {
	position: relative;
	width: 859px;
	margin: 0 auto;
	background: url(../world/images/lightbox_bg01.png) left top no-repeat;
}
#pop #popInner {
	position: relative;
	width: 100%;
	height: 516px;
	background: url(../world/images/lightbox_bg02.png) left bottom no-repeat;
}
#pop .chara {
	float: left;
}
#pop .text {
	float: left;
}
#pop #popClose {
	position:absolute;
	top: -17px;
	right: 0;
	z-index: 9900;
}

#pop.chara07 {
	background: url(../world/images/lightbox07_bg01.png) left top no-repeat;
}
#pop.chara07 #popInner {
	background: url(../world/images/lightbox07_bg02.png) left bottom no-repeat;
}
#pop.chara07 .text img {
	display: block;
}