@charset "shift_jis";

.bg1 {
	width: 100%;
	height: 350px;
	background: url(../story/images/bg1.jpg) center top no-repeat;
	background-size: cover;
}
.bg2 {
	width: 100%;
	height: 350px;
	background: url(../story/images/bg2.jpg) center center no-repeat;
	background-size: cover;
}
.bg3 {
	width: 100%;
	height: 700px;
	background: url(../story/images/bg3.jpg) center center no-repeat;
	background-size: cover;
}
.bg4 {
	width: 100%;
	height: 700px;
	background: url(../story/images/bg4.jpg) center center no-repeat;
	background-size: cover;
}
.bg5 {
	width: 100%;
	height: 1400px;
	background: url(../story/images/bg5.jpg) center center no-repeat;
	background-size: cover;
}

.ttl {
	padding: 52px 0 0 212px;
}

.lead {
	margin: 0 0 0 212px;
}

#container {
	z-index: 10;
}

/* ========================================
	#topper
======================================== */
#topper {
	width: 100%;
	height: 350px;
	position: relative;
	top: 0;
}


/* ========================================
	#story1
======================================== */
#story1 {
	width: 100%;
	height: 350px;
	position: relative;
}

#movieFlash,.story1-movie {
	padding: 40px 0 0 223px;
}

.story1-chara {
	position: absolute;
	top: -40px;
	left: 630px;
}

/* ========================================
	#story2
======================================== */
#story2 {
	width: 100%;
	height: 700px;
	position: relative;
}

.story2-ttl {
	position: absolute;
	top: 60px;
	left: 6px;
}

.story2-lead {
	position: absolute;
	top: 233px;
	left: 6px;
}

.story2-screen1 {
	position: absolute;
	top: 294px;
	left: 3px;
}

.story2-screen2 {
	position: absolute;
	top: 133px;
	left: 573px;
}

.story2-screen3 {
	position: absolute;
	top: 446px;
	left: 423px;
}

.story2-txt1 {
	position: absolute;
	top: 578px;
	left: 193px;
}

.story2-chara {
	position: absolute;
	top: 320px;
	left: 718px;
}

/* ========================================
	#story3
======================================== */
#story3 {
	width: 100%;
	height: 700px;
	position: relative;
}

.story3-line1 {
	padding: 20px 0 0 0;
}

.story3-ttl {
	position: absolute;
	top: 80px;
	left: 515px;
}

.story3-lead {
	position: absolute;
	top: 231px;
	left: 435px;
}

.story3-screen1 {
	position: absolute;
	top: 91px;
	left: 91px;
}

.story3-screen2 {
	position: absolute;
	top: 443px;
	left: 230px;
}

.story3-screen3 {
	position: absolute;
	top: 321px;
	left: 530px;
}

.story3-txt1 {
	position: absolute;
	top: 388px;
	left: 310px;
}

.story3-chara {
	position: absolute;
	top: 320px;
	left: -9px;
}

.story3-line2 {
	position: absolute;
	top: 654px;
	left: 0;
}

/* ========================================
	#story4
======================================== */
#story4 {
	width: 100%;
	height: 843px;
	position: relative;
}


.story4-ttl {
	position: absolute;
	top: 45px;
	left: 11px;
}

.story4-lead {
	position: absolute;
	top: 234px;
	left: 433px;
}

.story4-screen1 {
	position: absolute;
	top: 231px;
	left: 10px;
}

.story4-screen2 {
	position: absolute;
	top: 354px;
	left: 430px;
}

.story4-screen3 {
	position: absolute;
	top: 574px;
	left: 91px;
}

.story4-txt1 {
	position: absolute;
	top: 521px;
	left: 15px;
}

.story4-ocarina {
	position: absolute;
	top: 630px;
	left: 480px;
}