@charset "UTF-8";

/* ========================================
	base
======================================== */
#wrapper {
	background: url(../common/main_bg.png) center -7px repeat;
}
#container {
	position: relative;
}
#contents {
	background: none;
}

/* ========================================
	#paint
======================================== */
#paint {
	position: relative;
	width: 100%;
	height: 1047px;
	background: url(../battle/images/paint_bg.jpg) no-repeat center top;
}
#paint .inner {
	position: relative;
	width: 960px;
	margin: 0 auto;
}
#paint #ttl {
	position: absolute;
	top: -21px;
	z-index: 10;
}
#paint #ttl #ink_green {
	position: absolute;
	top: 0;
	left: -88px;
}
#paint #ttl #ink_pink {
	position: absolute;
	top: 9px;
	left: -131px;
}
#paint #ttl h1 {
	position: absolute;
	top: 9px;
	left: -10px;
	width: 581px;
	height: 205px;
}
#paint #ttl #page-ttl {
	position: relative;
	top: 0;
	left: 0;
}
#paint #ttl p {
	position: absolute;
	top: 186px;
	left: 41px;
}
#paint #movie01 {
	position: absolute;
	top: 347px;
	left: -221px;
	width: 900px;
	height: 554px;
}
#paint #movie01 #background,
#paint #movie01 #background-front,
#paint #movie01 #movie01-img {
	position: absolute;
	bottom: 1px;
	width: 900px;
	height: 506px;
}
#paint #movie01 #background ul {
	position: relative;
}
#paint #movie01 #background ul li {
	position: absolute;
	top: 0;
	left: 0;
}
#paint #movie01 #background img {
	width: 900px;
	height: 506px;
}
#paint #movie01 .mask {
	position: absolute;
	top: 0;
	left: 0;
}
#paint #chara01 {
	position: absolute;
	top: -23px;
	left: 480px;
	width: 590px;
	height: 814px;
}
#paint .text-area {
	position: absolute;
	top: 830px;
	right: 3px;
}
#paint .text-area dt {
	position: relative;
	width: 680px;
	height: 124px;
	background: url(../battle/images/paint_ttl_bg.png) no-repeat left top;
}
#paint .text-area dd {
	padding: 0 0 0 105px;
}
#paint #paint-ttl {
	position: relative;
	top: 0;
	left: 0;
}

/* ========================================
	#sea
======================================== */
#sea {
	position: relative;
	width: 100%;
	height: 684px;
	background: url(../battle/images/sea_bg.jpg) no-repeat center top;
}
#sea .inner {
	position: relative;
	width: 960px;
	margin: 0 auto;
}
#sea #movie02 {
	position: absolute;
	top: 4px;
	left: 20px;
	width: 900px;
	height: 507px;
}
#sea #movie02 #background-sea,
#sea #movie02 #background-sea-front,
#sea #movie02 #movie02-img {
	position: absolute;
	bottom: 0;
	width: 900px;
	height: 506px;
}
#sea #movie02 #background-sea img {
	width: 900px;
	height: 506px;
}
#sea #movie02 #background-sea ul {
	position: relative;
}
#sea #movie02 #background-sea ul li {
	position: absolute;
	top: 0;
	left: 0;
}
#sea #movie02 .mask {
	position: absolute;
	top: 0;
	left: 0;
}
#sea #chara02 {
	position: absolute;
	top: 481px;
	left: 605px;
	z-index: 10;
}
#sea .text-area {
	position: absolute;
	top: 475px;
	right: 245px;
}
#sea .text-area dt {
	position: relative;
	width: 714px;
	height: 124px;
	background: url(../battle/images/sea_ttl_bg.png) no-repeat left top;
}
#sea .text-area dd {
	padding: 2px 0 0 109px;
}
#sea #sea-ttl {
	position: relative;
	top: 0;
	left: 0;
}

/* ========================================
	#player
======================================== */
#player {
	position: relative;
	width: 100%;
	height: 1204px;
	background: url(../battle/images/player_bg.jpg) no-repeat center top;
}
#player .inner {
	position: relative;
	width: 960px;
	margin: 0 auto;
}
#player #movie03 {
	position: absolute;
	top: 70px;
	right: -220px;
	width: 900px;
	height: 507px;
}
#player #movie03 #background-player,
#player #movie03 #background-player-front,
#player #movie03 #movie03-img {
	position: absolute;
	bottom: 0;
	width: 900px;
	height: 506px;
}
#player #movie03 #background-player img {
	width: 900px;
	height: 506px;
}
#player #movie03 #background-player ul {
	position: relative;
}
#player #movie03 #background-player ul li {
	position: absolute;
	top: 0;
	left: 0;
}
#player #movie03 .mask {
	position: absolute;
	top: 0;
	left: 0;
}
#player #chara03 {
	position: absolute;
	top: -18px;
	left: -217px;
	z-index: 10;
}
#player .text-area {
	position: absolute;
	top: 506px;
	right: 4px;
	z-index: 10;
}
#player .text-area dt {
	position: relative;
	width: 680px;
	height: 124px;
	background: url(../battle/images/player_ttl_bg.png) no-repeat left top;
}
#player #player-ttl {
	position: relative;
	top: 0;
	left: 0;
}
#player .text-area dd {
	padding: 1px 0 0 104px;
}
#player #copy {
	position: absolute;
	top: 760px;
	left: -7px;
	width: 100%;
}
#player #chara04-text {
	position: absolute;
	top: -26px;
	left: 721px;
}
#player #chara04 {
	position: absolute;
	top: 124px;
	left: 719px;
}

/* ========================================
	animation
======================================== */
.js #ink_green div {
	display: none;
}
.js #ink_pink div {
	display: none;
}
.js #page-ttl span {
	display: none;
}
.js #chara01 > div {
	display: none;
}