@charset "UTF-8";

/* ========================================
	base
======================================== */
#container {
	position: relative;
}

#paint1 {
	background: url(../mode/images/paint_bg01.png) center 313px no-repeat;
}
#paint2 {
	background: url(../mode/images/paint_bg02.png) center 740px no-repeat;
}


/* ========================================
	#topper
======================================== */
#topper {
	height: 717px;
}
#topper #page-ttl {
	position: absolute;
	top: -22px;
	left: -12px;
}
#topper #ink-green {
	position: absolute;
	top: -12px;
	left: -131px;
}
#topper #ink-pink {
	position: absolute;
	top: -21px;
	left: -88px;
}

#topper #letter {
	position: absolute;
	top: 120px;
	left: -26px;
}
#topper #chara {
	position: absolute;
	top: 448px;
	left: 398px;
}
#topper #ttl-bg {
	position: absolute;
	top: -38px;
	right: -92px;
}


/* ========================================
	#hero
======================================== */
#hero {
	height: 782px;
}
#hero .ttl-area {
	position: absolute;
	top: 0;
	left: 434px;
}
#hero .ttl-bg {
	position: relative;
	width: 533px;
	height: 189px;
	background: url(../mode/images/hero_ttl_bg.png) left 36px no-repeat;
}
#hero #hero-ttl {
	position: absolute;
	top: 52px;
	left: 47px;
}
#hero .hero-copy {
	position: absolute;
	top: 0;
	left: 45px;
}
#hero .hero-ink {
	position: absolute;
	top: 14px;
	left: 362px;
}
#hero .hero-info {
	position: absolute;
	top: 295px;
	left: 483px;
}
#hero .hero-text {
	position: absolute;
	top: 177px;
	right: 40px;
}
#hero .hero-img01 {
	position: absolute;
	top: 501px;
	left: 40px;
}
#hero .hero-img02 {
	position: absolute;
	top: 501px;
	left: 360px;
}
#hero .hero-img03 {
	position: absolute;
	top: 501px;
	left: 679px;
}
#hero #hero-chara {
	position: absolute;
	top: 261px;
	left: 664px;
}
#hero #movie {
	position: absolute;
	top: 116px;
	left: 2px;
	background: url(../mode/images/hero_movie_bg.png) left top no-repeat;
	padding: 24px 28px 23px 38px;
}


/* ========================================
	#battle
======================================== */
#battle {
	height: 753px;
	background: url(../mode/images/battle_bg.png) center top no-repeat;
}
#battle .ttl-area {
	position: absolute;
	top: 14px;
	left: -26px;
}
#battle .ttl-bg {
	position: relative;
	width: 552px;
	height: 239px;
	background: url(../mode/images/battle_ttl_bg.png) left 75px no-repeat;
}
#battle #battle-ttl {
	position: absolute;
	top: 82px;
	left: 74px;
}
#battle .battle-copy {
	position: absolute;
	top: 39px;
	left: 72px;
}
#battle .battle-ink {
	position: absolute;
	top: 0;
	left: 405px;
}
#battle .battle-text {
	position: absolute;
	top: 253px;
	left: 202px;
}
#battle .battle-text02 {
	position: absolute;
	top: 539px;
	left: 204px;
}
#battle .battle-img01 {
	position: absolute;
	top: 373px;
	left: 202px;
}
#battle .battle-img02 {
	position: absolute;
	top: 373px;
	left: 501px;
}
#battle #battle-chara01 {
	position: absolute;
	top: 172px;
	left: -12px;
}
#battle #battle-chara02 {
	position: absolute;
	top: 360px;
	left: 740px;
}

/* ========================================
	animation
======================================== */
.js #ink-pink div {
	display: none;
}
.js #ink-green div {
	display: none;
}
.js #page-ttl span {
	display: none;
}
.js #chara div {
	display: none;
}