@charset "shift_jis";

body {
	background-color: transparent;
}

#wrapper {
	background: url(../key/images/bg01.jpg) center top repeat-x;
	height: 1845px;
}

#wrapper2 {
	background: url(../key/images/bg02.jpg) center top no-repeat;
}

#wrapper3 {
	background: url(../key/images/bg03.jpg) center 1000px no-repeat;
}

#bg1 {
	background:  url(../key/images/mask_bg.jpg) center 700px repeat-x;
}


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

.ttl {
	position: absolute;
	top: 56px;
	left: 215px;
}


/* ========================================
	#mask
======================================== */
#mask {
	width: 100%;
	height: 407px;
	z-index: 10;
}

.mask-ttl {
	position: absolute;
	top: 0;
	left: 340px;
}

.mask-lead {
	position: absolute;
	top: 88px;
	left: 273px;
}

#mask-navi01 {
	position: absolute;
	top: 186px;
	left: 19px;
}
#mask-navi02 {
	position: absolute;
	top: 245px;
	left: 209px;
}
#mask-navi03 {
	position: absolute;
	top: 209px;
	left: 378px;
}
#mask-navi04 {
	position: absolute;
	top: 245px;
	left: 589px;
}
#mask-navi05 {
	position: absolute;
	top: 170px;
	left: 771px;
}


/* ========================================
	#song
======================================== */
#song {
	width: 960px;
	height: 615px;
	margin: 0 auto;
	position: relative;
}

.song-ttl {
	position: absolute;
	top: 60px;
	left: 360px;
}

.song-lead {
	position: absolute;
	top: 149px;
	left: 163px;
}

.song-chara1 {
	position: absolute;
	top: 35px;
	left: 11px;
}

.song-chara2 {
	position: absolute;
	top: 13px;
	right: -59px;
}

#song-list {
	position: absolute;
	top: 296px;
	left: 0;
}

#song-list li {
	float: left;
	width: 320px;
	text-align: center;
}

.song-movie {
	height: 204px;
}

#mask-list,
#mask-iframe iframe {
	position: relative;
	width: 1120px;
	height: 390px;
	overflow:hidden;
}


/* ========================================
	ifarame
======================================== */
html,
body#key-iframe {
	background-color: transparent;
}

.key-item {
	position: relative;
	height: 390px; 
}

.key-ttl {
	position: absolute;
	top: 82px;
	left: 11px;
}

.key-lead {
	position: absolute;
	top: 140px;
	left: 13px;
}

.key-movie {
	position: absolute;
	top: 82px;
	left: 334px;
}

#dekunuts {
	background: url(../key/images/mask_bg02.png) 55px top no-repeat;
}

.dekunuts-img1 {
	position: absolute;
	top: 168px;
	left: 188px;
}

.dekunuts-img2 {
	position: absolute;
	top: 112px;
	left: 758px;
}

#goron {
	background: url(../key/images/mask_bg03.png) 243px top no-repeat;
}

.goron-img1 {
	position: absolute;
	top: 168px;
	left: 188px;
}

.goron-img2 {
	position: absolute;
	top: 112px;
	left: 758px;
}

#zola {
	background: url(../key/images/mask_bg03.png) 432px top no-repeat;
}

.zola-img1 {
	position: absolute;
	top: 240px;
	left: 122px;
}

.zola-img2 {
	position: absolute;
	top: 120px;
	left: 730px;
}

#stone {
	background: url(../key/images/mask_bg03.png) 630px top no-repeat;
}

.stone-img1 {
	position: absolute;
	top: 241px;
	left: 197px;
}

#captain {
	background: url(../key/images/mask_bg03.png) 818px top no-repeat;
}

.captain-img1 {
	position: absolute;
	top: 192px;
	left: 157px;
}