@charset "utf-8";
/* CSS Document */

/* 全体設定 */
	body { width:100%; margin:0; padding:0; font-size:12px; color:#000000; background:url(../../images/common/white.png); overflow-x:hidden; }
	a { color:#ad0004; text-decoration:none; }
	a:hover { text-decoration:underline; }
	a:visited { color:#331506; }
	img { margin:0; padding:0; }

/* ヘッダー */
	#headerArea { width:100%; /*height:100px;*/ background:url(../../images/common/dGray.png); }
	.headerBox { width:910px; margin:0px auto; padding:3px 0; }
	.headerLeft { top:3px; flaot:left; position:relative; }
	.headerLeft ul li { /*display:inline;*/ float:left; }
	.headerLeft ul li.headerBtn { width:70px; height:70px; top:5px; background:url(../../images/common/white.png); border-radius:40px; position:relative; }
	li.logo { width:287px; height:76px; }
	li.logo a { width:287px; height:76px; background:url(../../images/common/spriteImg.png) no-repeat; background-position:0 -480px; display:block; }
	li a.howToBtn { width:70px; height:70px; background:url(../../images/common/spriteImg.png) no-repeat; background-position:0 -788px; display:block; }
	li a.howToBtn:hover { width:70px; height:70px; background:url(../../images/common/spriteImg.png) no-repeat; background-position:0 -718px; display:block; }
	li a.enVerBtn { width:70px; height:70px; background:url(../../images/common/spriteImg.png) no-repeat; background-position:0 -928px; display:block; }
	li a.enVerBtn:hover { width:70px; height:70px; background:url(../../images/common/spriteImg.png) no-repeat; background-position:0 -858px; display:block; }
	.headerRight { float:right; }
	.adAreaTop { width:468px; height:60px; margin:0px; }
	.viralArea { width:468px; text-align:center; }
	.viralArea ul li { flaot:left; }
	
/* コンテンツ */
	/* 注意表記 */
		#cautionArea { width:100%; text-align:center; background:url(../../images/common/lRed.png); }
		.cautionImg { width:442px; height:22px; margin:3px 0px; background:url(../../images/common/spriteImg.png) no-repeat; background-position:0 -60px; }
	/* モード選択 */		
		#modeSelectArea { width:100%; padding:2px 0 1px; background:url(../../images/common/lGray.png); }
		#modeSelectArea div { width:900px; margin:0px auto; }	
		#modeSelectArea div ul li { margin-right:15px; float:left; }
		#modeSelectArea div ul li.modeName { width:84px; height:60px; background:url(../../images/common/spriteImg.png) no-repeat; background-position:0 0; }
		/* 初級編 */
			#modeSelectArea div ul li .activeMenuEasy { width:241px; height:60px; background:url(../../images/common/spriteImg.png) no-repeat; background-position:0 -142px; }
			#modeSelectArea div ul li.easyBtn a { width:241px; height:60px; background:url(../../images/common/spriteImg.png) no-repeat; background-position:0 -82px; display:block; }
			#modeSelectArea div ul li.easyBtn a:hover { width:241px; height:60px; background:url(../../images/common/spriteImg.png) no-repeat; background-position:0 -142px; display:block; }
		/* 中級編 */
			#modeSelectArea div ul li .activeMenuMiddle { width:241px; height:60px; background:url(../../images/common/spriteImg.png) no-repeat; background-position:0 -262px; }
			#modeSelectArea div ul li.middleBtn a { width:241px; height:60px; background:url(../../images/common/spriteImg.png) no-repeat; background-position:0 -202px; display:block; }
			#modeSelectArea div ul li.middleBtn a:hover { width:241px; height:60px; background:url(../../images/common/spriteImg.png) no-repeat; background-position:0 -262px; display:block; }
		/* 上級編 */
			#modeSelectArea div ul li .activeMenuHard { width:257px; height:60px; background:url(../../images/common/spriteImg.png) no-repeat; background-position:0 -382px; }
			#modeSelectArea div ul li.hardBtn a { width:257px; height:60px; background:url(../../images/common/spriteImg.png) no-repeat; background-position:0 -322px; display:block; }
			#modeSelectArea div ul li.hardBtn a:hover { width:257px; height:60px; background:url(../../images/common/spriteImg.png) no-repeat; background-position:0 -382px; display:block; }

	/* 問題 */		
		#contentsArea { width:900px; margin:10px auto 0px; }
		#contentsArea div { width:100%; margin:0px; }
		ul.questionBox li { width:124px; height:164px; margin-right:5px; text-align:center; float:left; }
		.questionBorderBox { width:118px; height:158px; margin:0px; padding:0px; border-radius:10px; border:3px #fff solid; }
		#contentsArea div ul li.easy { border-radius:10px; background:url(../../images/easy/questionBoxPattern.png); }
		#contentsArea div ul li.middle { border-radius:10px;  background:url(../../images/middle/questionBoxPattern.png); }
		#contentsArea div ul li.high { border-radius:10px;  background:url(../../images/high/questionBoxPattern.png); }
		.questionTitle { top:10px; position:relative; }
		/* 低音オクターブ */
			img.lowSound { width:88px; height:39px; background:url(../../images/common/spriteQuestionImg.png) no-repeat; background-position:0 0; }
		/* 中央オクターブ */
			img.middleSound { width:88px; height:39px; background:url(../../images/common/spriteQuestionImg.png) no-repeat; background-position:0 -39px; }
		/* 高音オクターブ */
			img.highSound { width:88px; height:39px; background:url(../../images/common/spriteQuestionImg.png) no-repeat; background-position:0 -78px; }
		/* ３音オクターブ */
			img.threeSound { width:88px; height:39px; background:url(../../images/common/spriteQuestionImg.png) no-repeat; background-position:0 -117px; }
		/* ＃有無 */
			img.sharp { width:29px; height:29px; background:url(../../images/common/spriteQuestionImg.png) no-repeat; background-position:0 -156px; }
			img.nonSharp { width:29px; height:29px; background:url(../../images/common/spriteQuestionImg.png) no-repeat; background-position:0 -185px; }
		.questionTxt { top:15px; position:relative; }
		.questionTxt ul li { text-align:center; float:left; }
		/* 単音オクターブ */
			img.questionTxtEasy { width:61px; height:29px; background:url(../../images/common/spriteQuestionImg.png) no-repeat; background-position:0 -214px; }
		/* 単音オクターブ */
			img.questionTxtMiddle01 { width:61px; height:29px; background:url(../../images/common/spriteQuestionImg.png) no-repeat; background-position:0 -243px; }
			img.questionTxtMiddle02 { width:61px; height:29px; background:url(../../images/common/spriteQuestionImg.png) no-repeat; background-position:0 -272px; }
		/* 単音オクターブ */
			img.questionTxtHigh01 { width:61px; height:29px; background:url(../../images/common/spriteQuestionImg.png) no-repeat; background-position:0 -301px; }
			img.questionTxtHigh02 { width:61px; height:29px; background:url(../../images/common/spriteQuestionImg.png) no-repeat; background-position:0 -330px; }

		.countDown { top:20px; position:relative; }
		.countDown span { width:27px; height:27px; display:inline; }
		.startBtn { width:80px; height:31px; margin:0px auto; top:15px; border-radius:17px; background:url(../../images/common/replayBtnBg.png); position:relative; }
		.startBtn a { width:74px; height:24px; top:3px; left:3px; border-radius:15px; display:block; position:relative;
			background: #f4f1ec; /* Old browsers */
			background: -moz-linear-gradient(top, #ffffff 0%, #f4f1ec 50%, #d0cbc9 100%); /* FF3.6+ */
			background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(50%,#f4f1ec), color-stop(100%,#d0cbc9)); /* Chrome,Safari4+ */
			background: -webkit-linear-gradient(top, #ffffff 0%,#f4f1ec 50%,#d0cbc9 100%); /* Chrome10+,Safari5.1+ */
			background: -o-linear-gradient(top, #ffffff 0%,#f4f1ec 50%,#d0cbc9 100%); /* Opera 11.10+ */
			background: linear-gradient(to bottom, #ffffff 0%,#f4f1ec 50%,#d0cbc9 100%); /* W3C */
		 }
		/* for IE8 */
			#contentsArea div ul li.easy,
			#contentsArea div ul li.middle,
			#contentsArea div ul li.high { border-radius:0px¥9; }
			.startBtn,
			.startBtn a { border-radius:0px¥9; }
		/* for IE9 */
			.questionBorderBox:not(:target) { border-radius:10px¥9; }
			#contentsArea div ul li.easy:not(:target),
			#contentsArea div ul li.middle:not(:target),
			#contentsArea div ul li.high:not(:target) { border-radius:10px¥9; }
			.startBtn:not(:target),
			.startBtn a:not(:target) { border-radius:0px¥9; }

	/* 回答 */
		.answerTxt { width:586px; height:60px; background:url(../../images/common/spriteImg.png) no-repeat; background-position:0 -658px; }
		.answerArea ul { margin:10px 0px 10px 8px; }
		.answerArea ul.rePlayBtnArea li { float:left; }
		.answerArea ul.rePlayBtnArea li.rePlayBtnEasy,
		.answerArea ul.rePlayBtnArea li.rePlayBtnMiddle,
		.answerArea ul.rePlayBtnArea li.rePlayBtnHigh { width:98px; height:98px; border-radius:49px; }
		.answerArea ul.rePlayBtnArea li.rePlayBtnEasy { background:url(../../images/easy/questionBoxPattern.png); }
		.answerArea ul.rePlayBtnArea li.rePlayBtnMiddle { background:url(../../images/middle/questionBoxPattern.png); }
		.answerArea ul.rePlayBtnArea li.rePlayBtnHigh { background:url(../../images/high/questionBoxPattern.png); }

		.rePlayBtn { height:80px; top:9px; left:9px; border-radius:44px; background:url(../../images/common/replayBtnBg.png); position:relative; }
		.rePlayBtn a { width:72px; height:73px; top:3px; left:4px; border-radius:40px; display:block; position:relative;
			background: #f4f1ec; /* Old browsers */
			background: -moz-linear-gradient(top, #ffffff 0%, #f4f1ec 50%, #d0cbc9 100%); /* FF3.6+ */
			background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(50%,#f4f1ec), color-stop(100%,#d0cbc9)); /* Chrome,Safari4+ */
			background: -webkit-linear-gradient(top, #ffffff 0%,#f4f1ec 50%,#d0cbc9 100%); /* Chrome10+,Safari5.1+ */
			background: -o-linear-gradient(top, #ffffff 0%,#f4f1ec 50%,#d0cbc9 100%); /* Opera 11.10+ */
			background: linear-gradient(to bottom, #ffffff 0%,#f4f1ec 50%,#d0cbc9 100%); /* W3C */
		 }

		.answerBox { width:770px; height:70px; background:url(../../images/common/dGray.png); border-radius:10px; }
		.answerBox ul { width:770px; height:45px; top:13px; position:relative; }
		.answerBox ul li { float:left; }
		/* for IE8 */
			.rePlayBtn,
			.rePlayBtn a { border-radius:0px¥9; }
		/* for IE9 */
			.answerBox:not(:target) { border-radius:10px¥9; }
			.rePlayBtn:not(:target),
			.rePlayBtn a:not(:target) { border-radius:0px¥9; }

	/* 鍵盤・五線譜 */
		/* 鍵盤 */
			.keyBoardArea { width:870px; margin-top:-50px; padding:10px 0px 20px 20px; background:url(../../images/common/dGray.png); border-radius:10px; }
			.keyBoardArea ul li { float:left; }
			table.tableKeyBoard { width:630px; margin:10px auto 0; border:0px; background:#fff; }
			table.tableKeyBoard td { border-collapse:collapse; border:1px #000 solid; border-left:0px; border-right:0px; }
			table.tableKeyBoard td img { width:9px; }
			table.tableKeyBoard td.keyBoardWhite { border-left:1px #000 solid; }
			table.tableKeyBoard td.keyBoardBlack { border:0px; 
				background: #3a3a3a; /* Old browsers */
				background: -moz-linear-gradient(top, #3a3a3a 50%, #2d2d2d 85%, #080404 99%, #000000 100%); /* FF3.6+ */
				background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#3a3a3a), color-stop(85%,#2d2d2d), color-stop(99%,#080404), color-stop(100%,#000000)); /* Chrome,Safari4+ */
				background: -webkit-linear-gradient(top, #3a3a3a 50%,#2d2d2d 85%,#080404 99%,#000000 100%); /* Chrome10+,Safari5.1+ */
				background: -o-linear-gradient(top, #3a3a3a 50%,#2d2d2d 85%,#080404 99%,#000000 100%); /* Opera 11.10+ */
				background: linear-gradient(to bottom, #3a3a3a 50%,#2d2d2d 85%,#080404 99%,#000000 100%); /* W3C */
			}
			table.tableKeyBoard td.topTd { height:80px; border-bottom:0px; }
			table.tableKeyBoard td.bottomTd { height:60px; border-top:0px;
				background: #ffffff; /* Old browsers */
				background: -moz-linear-gradient(top, #ffffff 50%, #f4f1ec 85%, #d0cbc9 99%, #a6a4a4 100%); /* FF3.6+ */
				background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#ffffff), color-stop(85%,#f4f1ec), color-stop(99%,#d0cbc9), color-stop(100%,#a6a4a4));/* Chrome,Safari4+ */
				background: -webkit-linear-gradient(top, #ffffff 50%,#f4f1ec 85%,#d0cbc9 99%,#a6a4a4 100%); /* Chrome10+,Safari5.1+ */
				background: -o-linear-gradient(top, #ffffff 50%,#f4f1ec 85%,#d0cbc9 99%,#a6a4a4 100%); /* Opera 11.10+ */
				background: linear-gradient(to bottom, #ffffff 50%,#f4f1ec 85%,#d0cbc9 99%,#a6a4a4 100%); /* W3C */
			}
		/* for IE */
			table.tableKeyBoard td.keyBoardBlack { background: #3a3a3a¥9; }
			table.tableKeyBoard td.bottomTd { background: #ffffff¥9; }
		/* for IE9 */
			table.tableKeyBoard td.keyBoardBlack:not(:target) { background: #3a3a3a¥9; }
			table.tableKeyBoard td.bottomTd:not(:target) { background: #ffffff¥9; }
			.keyBoardArea:not(:target) { border-radius:10px¥9; }

		/* 五線譜 */
			table.table5Line { width:210px; margin-left:10px; top:-15px; background:url(../../images/common/white.png); border:0px; border:0px #000 solid; border-collapse:collapse; position:relative; }
			table.table5Line td { width:63px; height:8px; border-collapse:collapse; border:0px; }
			table.table5Line td.borderTd { border-bottom:1px #777 solid; }
	/* ページの先頭へ */
		.pageTopLink { width:100%; margin:10px 0; padding:10px 0px; }
		.pageTopImg { width:900px; height:13px; marign:0 auto; }
		.pageTopImg a { width:144px; height:13px; background:url(../../images/common/spriteImg.png) no-repeat; background-position:0px -645px; display:block; }
		.pageTopImg a:hover { width:144px; height:13px; background:url(../../images/common/spriteImg.png) no-repeat; background-position:0px -632px; display:block; }

	/* 広告 */
		.adAreaBottom { width:100%; margin:10px auto; text-align:center; }

	/* リンク用バッジ */
		/* 画面幅：956px以上（縦列表示） */
			.badgeColumn { width:56px; top:270px; right:10px; position:absolute; }
			.badgeColumn ul li { margin-bottom:5px; }
		/* 画面幅：956px以下（並列表示） */
			.badgeParallel { width:100%; padding:5px 0; /* background:url(../../images/common/lGray.png); */ }
			.badgeParallel ul { width:361px; margin:0 auto; }
			.badgeParallel ul li { width:56px; margin-right:5px; float:left; }

	/* フッター */
		/* 各種リンク */
			#footerLinkArea { width:100%; background:url(../../images/common/lGray.png); }
			#footerLinkArea div { width:900px; margin:0px auto; }
			.serviceLink { width:900px; margin:0 auto; padding:5px 0; font-size:12px; }
			.serviceLink ul { margin:5px 0; }
			.serviceLink ul li { padding:0 5px; border-right:1px #7d7d7d solid; float:left; }
			.serviceLink ul li.right { border-right:0px; }
			.serviceLink a { color:#ff5f26; }
			.serviceLink a:hover { color:#0074ba; }
			.serviceLink a:visited { color:#ad0004; }

#ff5f26

		/* コピーライト */
			#footer { width:100%; height:50px; /* background:url(../../images/common/dGray.png); */ }
			#footer div { width:900px; margin:0px auto; }
			#footer div img { float:left; }
			#footer div p { float:right; }
			.ideeileLogo { width:133px; height:38px; background:url(../../images/common/spriteImg.png) no-repeat; background-position:0 -442px; }