@charset "utf-8";

html {
	overflow-y:scroll;
}
body {
	background:#000;
}

.content {
	display:none; width:100%;
}
.content .content_wrap {
	position:relative; width:960px; min-height:1200px; margin:0 auto;
}

/*
**	BACKGROUND
*/
.bg_default {
	position:absolute; left:0; top:0;
}
.bg_suzumusic {
	display:none; opacity:0;
	position:absolute; left:596px; top:561px;
}
.bg_suzumusic area {
	cursor:pointer;
}
.bg_ending {
	display:none;
}
.logo {
	position:absolute; left:417px; top:78px;
}

/*
**	Banner
*/
.banner {
	position:absolute; right:0; top:28px;
}
.banner .item {
	position:absolute; right:0; top:0;
}
.banner .writer {
	display:none; opacity:0; top:84px; right:23px;
}


/*
**	ENDING
*/
.ending {
	display:none;
	position:absolute; left:0; top:0;
}
.ending .ending_bg {
	position:absolute; left:0; top:0;
}
.ending .rainbow {
	display:none;
	position:absolute; left:0; top:160px;
}
.ending .panel {
	display:none;
	position:absolute; left:0; top:800px; overflow:visible;
}
.ending .panel .crown {
	position:absolute; left:441px; top:-32px;
}
.ending .panel .text {
	position:absolute; left:200px; top:14px;
}
.ending .buttons {
	position:absolute; left:
}
.ending .buttons .item {
}
#download {
	position:absolute; left:200px; top:138px; width:280px; height:50px; cursor:pointer;
	background:url(../img/ending-buttons.png) 0 0 no-repeat; margin-left:0;
	transition:background-image 0.4s, margin-left 0.25s;
}
#report {
	position:absolute; left:530px; top:138px; width:280px; height:50px; cursor:pointer;
	background:url(../img/ending-buttons.png) 0 -50px no-repeat; margin-left:0;
	transition:background-image 0.4s, margin-left 0.25s;
}
#download:hover {
	background:url(../img/ending-buttons-hover.png) 0 0 no-repeat; margin-left:10px;
}
#report:hover {
	background:url(../img/ending-buttons-hover.png) 0 -50px no-repeat; margin-left:10px;
}

/*
**	DOWNLOADS
*/

.downloads {
	display:none;
	position:absolute; left:80px; top:100px;
}
.downloads .close {
	position:absolute;
}
.downloads .close_hover img {
	opacity:0;
}
.downloads .close_hover area {
	cursor:pointer;
}
.downloads .panel {
	position:absolute; left:0; top:0; width:798px; height:448px;
	background:url(../img/download-bg.jpg) no-repeat;
	border:1px solid #414141;
}
.downloads .item {
	display:block; position:absolute; left:30px; height:32px;
	transition:background-image 0.4s, margin-left 0.25s;
}
.downloads .item:hover {
	margin-left:10px;
}
.downloads .pca {
	top:276px; width:224px;
	background:url(../img/download-buttons.png) no-repeat 0 0;
}
.downloads .pca:hover {
	background:url(../img/download-buttons-hover.png) no-repeat 0 0;
}
.downloads .pcb {
	top:332px; width:214px;
	background:url(../img/download-buttons.png) no-repeat 0 -40px;
}
.downloads .pcb:hover {
	background:url(../img/download-buttons-hover.png) no-repeat 0 -40px;
}
.downloads .spa {
	top:388px; width:320px;
	background:url(../img/download-buttons.png) no-repeat 0 -80px;
}
.downloads .spa:hover {
	background:url(../img/download-buttons-hover.png) no-repeat 0 -80px;
}

/*
**	NAVIGATION
*/
.navi {
	position:absolute; left:24px; top:28px;
	text-align:left;
}
.navi .subtitle {
}
.navi .item {
	margin-top:30px; margin-left:0;
	cursor:pointer;
	transition:background-image 0.4s, margin-left 0.25s;
}
.navi .item:hover, .navi .item.active {
	margin-left:10px;
}
.navi .navi_sheet {
	width:201px; height:30px; background:url(../img/navi.png) 0 0 no-repeat;
}
.navi .navi_sheet2 {
	width:242px; height:30px; background:url(../img/navi.png) 0 -30px no-repeat;
}
.navi .navi_book {
	width:109px; height:30px; background:url(../img/navi.png) 0 -60px no-repeat;
}
.navi .navi_cd {
	width:75px; height:30px; background:url(../img/navi.png) 0 -90px no-repeat;
}
.navi .navi_sheet:hover, .navi .navi_sheet.active {
	background:url(../img/navi-hover.png) 0 0 no-repeat;
}
.navi .navi_sheet2:hover, .navi .navi_sheet2.active {
	background:url(../img/navi-hover.png) 0 -30px no-repeat;
}
.navi .navi_book:hover {
	background:url(../img/navi-hover.png) 0 -60px no-repeat;
}
.navi .navi_cd:hover {
	background:url(../img/navi-hover.png) 0 -90px no-repeat;
}
.navi .sns {
	margin-top:30px;
	cursor:pointer;
}

.navi .finish {
	cursor:default;
	transition:none;
}
.navi .finish:hover {
	margin-left:0;
	width:242px; height:30px; background:url(../img/navi.png) 0 -30px no-repeat;
}

/*
**	HINT ICONS
*/
.hint_icon {
	position:absolute; left:0; top:0;
}
.hint_icon img {
	opacity:0;
}
.hint_icon area {
	cursor:pointer;
}
#hint_icon_0 {
	position:absolute; left:96px; top:344px;
}
#hint_icon_1 {
	position:absolute; left:235px; top:567px;
}
#hint_icon_2 {
	position:absolute; left:814px; top:553px;
}
#hint_icon_3 {
	position:absolute; left:16px; top:726px;
}
#hint_icon_4 {
	position:absolute; left:644px; top:702px;
}
#hint_icon_5 {
	position:absolute; left:512px; top:921px;
}
#hint_icon_6 {
	position:absolute; left:809px; top:399px;
}

/*
**	BOOK
*/
.book_overlay {
	display:none;
	position:fixed; left:0; top:0; width:100%; height:100%;
	background:url(../img/common-overlay.png) left top;
}
.book {
	display:none;
	position:absolute; left:0; top:240px; width:960px; height:644px;
}
.book .bg {
	position:absolute; left:0; top:0; overflow:visible;
}
.book .panel {
	position:absolute; left:0; top:0;
}
.book .phase1, .book .phase3 {
	position:absolute; left:29px; top:78px;
}
.book .close {
	position:absolute; right:93px; top:-43px;
}
.book .close_hover img {
	opacity:0;
}
.book .close_hover area {
	cursor:pointer;
}
.book .movie {
	position:absolute; left:159px; top:110px; width:642px; height:400px;
}
.book .movie .frame {
	display:block; overflow:hidden;
	position:absolute; left:0; top:0; width:640px; height:360px;
	border:1px solid #373737;
	background:#1f1f1f;
}
.book .movie .show {
	position:absolute; left:266px; bottom:0; width:110px; height:32px;
	cursor:pointer;
}
.book .movie .back {
	display:none;
	position:absolute; left:277px; bottom:0; width:88px; height:32px;
	cursor:pointer;
}

/*
**	PHASE 1 SHEET
*/
.book .sheet1 .hover, .book .sheet1 .answer_text {
	position:absolute; left:252px; top:120px; width:456px; height:306px;
}
.book .sheet1 .answer_text .item {
	float:left; height:306px; padding-top:44px;
	color:#fff; font-size:32px; line-height:65px; text-align:center; text-indent:-2px;
}
.book .sheet1 .hover .item {
	float:left; height:306px;
	opacity:0; cursor:pointer;
	transition:opacity 0.2s;
}
.book .sheet1 .hover .item:hover, .book .sheet1 .hover .item.active {
	opacity:1;
}
#sheet1_icon_0, #sheet1_text_0 { width:66px; }
#sheet1_icon_1, #sheet1_text_1 { width:64px; }
#sheet1_icon_2, #sheet1_text_2 { width:66px; }
#sheet1_icon_3, #sheet1_text_3 { width:66px; }
#sheet1_icon_4, #sheet1_text_4 { width:65px; }
#sheet1_icon_5, #sheet1_text_5 { width:65px; }
#sheet1_icon_6, #sheet1_text_6 { width:64px; }
#sheet1_icon_0 { background:url(../img/answer-sheet1-hover.png) 0 0 no-repeat; }
#sheet1_icon_1 { background:url(../img/answer-sheet1-hover.png) -66px 0 no-repeat; }
#sheet1_icon_2 { background:url(../img/answer-sheet1-hover.png) -130px 0 no-repeat; }
#sheet1_icon_3 { background:url(../img/answer-sheet1-hover.png) -196px 0 no-repeat; }
#sheet1_icon_4 { background:url(../img/answer-sheet1-hover.png) -262px 0 no-repeat; }
#sheet1_icon_5 { background:url(../img/answer-sheet1-hover.png) -327px 0 no-repeat; }
#sheet1_icon_6 { background:url(../img/answer-sheet1-hover.png) -392px 0 no-repeat; }
.book .sheet1 .answer {
	position:absolute; left:200px; top:457px; width:560px; height:50px; overflow:hidden;
}
.book .sheet1 .answer .switcher {
	position:absolute; left:0; top:0;
}
.book .sheet1 .answer .switcher .submit {
	position:absolute; left:122px; top:100px; width:332px; height:46px; padding:2px 0;
	overflow:hidden;
}
.book .sheet1 .answer .switcher .answer_keyword {
	position:absolute; left:19px; top:0; height:50px;
}
.book .sheet1 .answer .switcher .answer_keyword .item {
	float:left;
	width:46px; height:50px; margin-right:7px;
	line-height:50px; text-align:center; font-size:36px; color:#fff;
}
/*
**	PHASE2 SHEET
*/
.book .sheet2 .submit {
	position:absolute; left:321px; top:564px; padding:2px 0;
}

/*
**	PHASE3 SHEET
*/
.book .sheet3 .submit {
	position:absolute; left:321px; top:463px; padding:2px 0;
}

.submit {
	width:332px; height:46px; padding:2px 0;
	overflow:hidden;
}
.submit input[type="text"] {
	float:left;
	width:231px; height:44px;
	border:1px #fff solid; border-radius:6px;
	text-align:center; line-height:44px; font-size:32px; color:#fff; background:#000;
}
.submit input[type="submit"] {
	float:left; cursor:pointer;
	width:98px; height:46px;
	text-indent:-9999px;
	background:url(../img/answer-submit.png) center center no-repeat;
}

/*
**	LOADER
*/
.opening {
	position:fixed; left:0; top:0; width:100%; height:100%; min-height:100%;
	background:url(../img/common-overlay.png) left top;
}
.opening .panel {
	position:absolute; left:-212px; top:-300px; width:425px; height:600px;
}
.opening .panel .loading {
	display:none;
	position:absolute; left:136px; top:552px; width:153px; height:13px;
	background:url(../img/opening-loading.png) no-repeat;
}
.opening .panel .enter {
	display:none;
	position:absolute; left:162px; top:540px; width:102px; height:48px;
	cursor:pointer;
	background:url(../img/opening-enter.png) no-repeat;
}