@charset "UTF-8";

/*//////////////////////////////////////////////////////////////////////////////

base.css

--------------------------------------------------------------------------------
Base styles[for PC]
	0. common
	1. body
	2. stage
	3. header
	4. contents
	5. footer

//////////////////////////////////////////////////////////////////////////////*/

/* -----------------------------------------------------------------------------
	0. common
----------------------------------------------------------------------------- */
/*
 * text link style
 */
a { outline : none; }
a:link {}
a:visited {}
a:hover { text-decoration : none; }
a:active {}

/* -----------------------------------------------------------------------------
	1. body

	body
----------------------------------------------------------------------------- */
html {
    height:100%;
	}

body {
    width      :100%;
    min-width  :1020px;
    min-height :762px;
    height     :100%;
    position   :relative;
	margin:0px ;
	color      : #000000;
	font       : 13px/1.231 'メイリオ',Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック','MS P Gothic',arial,helvetica,clean,sans-serif;
	background : #ffffff;
	}

html > body {
    font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック','MS P Gothic',arial,helvetica,clean,sans-serif;
	}
/* for IE7 */
html.ie7 body {
	font       : 13px/1.231 'ＭＳ Ｐゴシック','MS P Gothic',arial,helvetica,clean,sans-serif;
	}
/* for IE8 */
html.ie8 body {
	font       : 13px/1.231 'ＭＳ Ｐゴシック','MS P Gothic',arial,helvetica,clean,sans-serif;
	}

html > body .vi {
	font-family: arial,helvetica,clean,sans-serif;
}

body.bgBlue         { background : #0379e9 url(/images/frontend/pc/common/body/background.blue.png) repeat-x 0 0; }
body.bgGray         { background : #6e6e6e url(/images/frontend/pc/common/body/background.gray.png) repeat-x 0 0; }
body.bgSignQuestion { background : #6e6e6e url(/images/frontend/pc/common/body/background.gray.png) repeat-x 0 0; }
body.bgGreen        { background : #81bb35 url(/images/frontend/pc/common/body/background.green.png) repeat-x 0 0; }
body.bgP-green      { background : #55adb6 url(/images/frontend/pc/common/body/background.p-green.png) repeat-x 0 0; }
body.bgOrange       { background : #d27b04 url(/images/frontend/pc/common/body/background.orange.png) repeat-x 0 0; }
body.bgPink         { background : #d05171 url(/images/frontend/pc/common/body/background.pink.png) repeat-x 0 0; }

/* -----------------------------------------------------------------------------
	2. wrap,stage

	body > #stage
----------------------------------------------------------------------------- */
#wrap {
    width    :1020px;
    height   :762px;
    position :absolute;
    bottom   :50%;
    right    :50%;
	}
#stage {
	position : absolute;
	width    : 1020px;
	height   : 762px;
	margin   : 0 auto;
	overflow : hidden;
    top      : 381px;
    left     : 510px;
	}

.bgBlue #stage         { background : url(/images/frontend/pc/common/stage/background.blue.png) no-repeat 0 0; }
.bgGray #stage         { background : url(/images/frontend/pc/common/stage/background.gray.png) no-repeat 0 0; }
.bgSignQuestion #stage { background : url(/images/frontend/pc/common/stage/background.signQuestion.png) no-repeat 0 0; }
.bgGreen #stage        { background : url(/images/frontend/pc/common/stage/background.green.png) no-repeat 0 0; }
.bgP-green #stage      { background : url(/images/frontend/pc/common/stage/background.p-green.png) no-repeat 0 0; }
.bgOrange #stage       { background : url(/images/frontend/pc/common/stage/background.orange.png) no-repeat 0 0; }
.bgPink #stage         { background : url(/images/frontend/pc/common/stage/background.pink.png) no-repeat 0 0; }

/* -----------------------------------------------------------------------------
	3. header

	body > #stage > div > #header
----------------------------------------------------------------------------- */
#header {
	position : relative;
	width    : 1000px;
	height   : 40px;
	margin   : 0;
	padding  : 14px 12px 10px 12px;
	z-index  : 300;
	}
	/*　背景付ぱんくず（通常） */
	#header ul.location {
		float      : left;
		width      : 730px;
		height     : 40px;
		overflow   : hidden;
		background : url(/images/frontend/pc/common/header/location.background.png) no-repeat 0 0;
		}
		#header ul.location li {
			display     : block;
			float       : left;
			height      : 40px;
			padding     : 0 0 0 15px;
			color       : #ffffff;
			font-size   : 123.1%;
			line-height : 40px;
			}
			#header ul.location li a {
				display     : block;
				height      : 40px;
				padding     : 0 20px 0 0;
				color       : #ffffff;
				line-height : 40px;
				background  : url(/images/frontend/pc/common/arrow/location.png) no-repeat right 1px;
				}
			#header ul.location li a:hover {
				text-decoration : underline;
				}
	#header ul.location:after {
		content    : ".";
		display    : block;
		height     : 0;
		clear      : both;
		visibility : hidden;
		}
		#header ul.location { display : inline-block; }
		/* Hides from IE-mac \*/
		* html #header ul.location { height : 1%; }
		#header ul.location { display : block; }
		/* End hide from IE-mac */

	/*　背景なしぱんくず */
	#header p#location,
	#header p.location {
		float       : left;
		width       : 730px;
		height      : 40px;
		padding     : 0 0 0 15px;
		color       : #ffffff !important;
		font-size   : 123.1%;
		line-height : 40px;
		overflow    : hidden;
		background  : none;
		}
		#header p#location a,
		#header p.location a {
			color           : #ffffff !important;
			}
		#header p#location a:hover,
		#header p.location a:hover {
			text-decoration : underline;
			}
		#header p#location span,
		#header p.location span {
			color : #ffffff !important;
			}

.pt #header p.location{
	width: 468px;
}
.vi #header p.location{
	width: 480px;
}

	/*　タイマー */
	#timer {
		position   : relative;
		float      : left;
		width      : 300px;
		height     : 40px;
		overflow   : hidden;
		margin-right : 10px;
		}
	.en #timer {
		width      : 350px;
		}
.pt #timer {
	width      : 382px;
}
.vi #timer {
	width      : 360px;
}

		#timerText {
			position    : relative;
			float       : left;
			width       : 140px;
			color       : #ffffff;
			font-size   : 16px;
			line-height : 40px;
			}
		.en #timerText {
			width       : 180px;
			}
.pt #timerText {
	width       : 185px;
}
.vi #timerText {
	width       : 180px;
}

			#timerText dt {
				float      : left;
				width      : 90px;
				font-size  : 14px;
				text-align : right;
				}
			.en #timerText dt {
				width      : 130px;
				}
.pt #timerText dt {
	width      : 130px;
}
.vi #timerText dt {
	width      : 130px;
}

			#timerText dd {
				float       : right;
				width       : 50px;
				font-size   : 14px;

				text-align  : right;
				}
				#timerText dd .time {
					margin-right   : 2px;
					font-size      : 22px;
					font-weight    : bold;
					vertical-align : baseline;
					}
		#timerBars {
			position : relative;
			float    : right;
			width    : 152px;
			height   : 20px;
			padding  : 10px 0;
			}
			#timerBar {
				position   : relative;
				float      : right;
				width      : 150px;
				height     : 8px;
				border     : 1px #ffffff solid;
				background : #b5b5b5;
				overflow   : hidden;
				}
				#timerInner {
					position : relative;
					width    : 150px;
					height   : 8px;
					margin   : 0;
					padding  : 0;
					overflow : hidden;
					}
					#timerInner img {
						vertical-align : top;
						}
			#timerBars .min,
			#timerBars .max {
				position  : absolute;
				bottom    : 10px;
				color     : #ffffff;
				font-size : 8px;
				}
			#timerBars .max {
				right     : 0px;
				}

	/* ヘッダー右側エリア */
	#headerRightSide {
		float: right;
		position: relative;
		height: 40px;
		}
		
	/* 右上のボタンたち */
	#header .buttons {
		float      : right;
		width      : 245px;
		height     : 40px;
		overflow   : hidden;
		}
		#header .buttons a {
			display : block;
			}
		/* 「ログアウト」ボタン　*/
		#btn_logout {
			float        : right;
			width        : 130px;
			}
		/* 「はじめての方」ボタン　*/
		#btn_forBeginners {
			float        : left;
			width        : 120px;
			}
		/* 「パスワードを忘れた」ボタン　*/
		#btn_passwordLost {
			float        : right;
			width        : 170px;
			}
		/* 「設定」ボタン　*/
		#btn_preferences {
			float        : left;
			width        : 110px;
			}
		/* 「解答終了」ボタン　*/
		#btn_finish {
			display      : block;
			float        : left;
			width        : 130px;
			}
		/* CGドライブ「説明」ボタン　*/
		#btn_howtoCGDrive {
			float        : left;
			width        : 110px;
			margin-right : 5px;
			}
		/* CGドライブ「終了」ボタン　*/
		#btn_quitCGDrive {
			float        : right;
			width        : 130px;
			}
	#header .buttons:after {
		content    : ".";
		display    : block;
		height     : 0;
		clear      : both;
		visibility : hidden;
		}
	#header .buttons { display : inline-block; }
	/* Hides from IE-mac \*/
	* html #header .buttons { height : 1%; }
	#header .buttons { display : block; }
	/* End hide from IE-mac */

/* -----------------------------------------------------------------------------
	4. contents

	body > #stage > div > #contents
----------------------------------------------------------------------------- */
#contents {
	position : relative;
	width    : 1000px;
	height   : 600px;
	margin   : 0;
	padding  : 0 12px;
	z-index  : 200;
	}

/* -----------------------------------------------------------------------------
	5. footer

	body > #stage > div > #footer
----------------------------------------------------------------------------- */
#footer {
	position   : relative;
	width      : 1020px;
	height     : 90px;
	margin     : 0;
	background : url(/images/frontend/pc/common/footer/background.png) no-repeat right top;
	z-index    : 100;
	}
	#footer .loginAccount {
		position      : absolute;
		top           : 35px;
		padding       : 0 0 0 10px;
		color         : #ffffff;
		font-size     : 22px;
		border-bottom : 1px #ffffff solid;
		}
		#footer .loginAccount span.suffix {
			margin-left : 5px;
			font-size   : 14px;
			}
	#footer .uniqueID_regist {
		position      : absolute;
		top           : 70px;
		padding       : 0 0 0 25px;
		color         : #ffffff;
		font-size     : 16px;
		background    : url("/images/frontend/pc/common/arrow/normal.white.png") no-repeat 10px 4px;
		}
		#footer .uniqueID_regist a {
			color : #ffffff;
			}
		#footer .uniqueID_regist a:hover {
			text-decoration : underline;
			}
	#footer .buttons {
		position      : absolute;
		top           : 23px;
		left          : 312px;
		width         : 400px;
		height        : 40px;
		text-align    : center;
		}
	#footer #functionButtons {
		top           : 32px;
		left          : 10px;
		width         : 250px;
		height        : 35px;
		margin-top    : 5px;
		text-align    : left;
		}

	#footer .colLeft {
		float         : left;
		width         : 215px;
		min-height    : 152px;
		background    : url(/images/frontend/pc/common/footer/background.png) no-repeat 12px bottom;
		}
	.ja #footer .colLeft {
		background    : none;
		}
		#footer .colLeft .loginAccount {
			top           : 0;
			font-size     : 15px;
			}
			#footer .colLeft .loginAccount span.suffix {
				font-size   : 12px;
				}
		#footer .colLeft #functionButtons {
			top           : 0px;
			left          : 0px;
			width         : 215px;
			height        : 150px;
			margin        : 0;
			text-align    : center;
			}
			#footer .colLeft #functionButtons #btn_sounds_on,
			#footer .colLeft #functionButtons #btn_sounds_off,
			#footer .colLeft #functionButtons #btn_rubies_on,
			#footer .colLeft #functionButtons #btn_rubies_off,
			#footer .colLeft #functionButtons #btn_wordsLinks_on,
			#footer .colLeft #functionButtons #btn_wordsLinks_off {
				position : relative;
				top      : 35px;
				display  : block;
				width    : 160px;
				height   : 35px;
				margin   : 0 auto 6px auto;
				}

	#footer .colRight {
		float         : right;
		width         : 778px;
		padding-right : 12px;
		}
		#footer .colRight .title {
			float         : left;
			width         : 400px;
			margin-bottom : 5px;
			color         : #ffffff;
			font-size     : 16px;
			line-height   : 20px;
			}
		#footer .colRight .legends {
			float         : right;
			width         : auto;
			margin-bottom : 5px;
			color         : #ffffff;
			font-size     : 16px;
			line-height   : 20px;
			text-align    : right;
			}
			#footer .colRight .legends img {
				margin         : 0 5px 0 10px;
				vertical-align : top;
				}

		.pt #footer .colRight .legends {
			width: 560px;
		}
		
		#footer .colRight #resultsList {
			clear         : both;
			width         : 775px;
			margin-top    : 5px;
			border-top    : 2px #ffffff solid;
			border-right  : 1px #ffffff solid;
			border-bottom : 1px #ffffff solid;
			border-left   : 2px #ffffff solid;
			/*
			 * IssueID 1880/アルファ 20% -> 30%
			 */
			background    : url(/images/frontend/pc/common/others/background.black.30.png) repeat 0 0;
			}
			#footer .colRight #resultsList ul {
				width   : 775px;
				}
				#footer .colRight #resultsList ul li {
					position      : relative;
					float         : left;
					width         : 30px;
					height        : 30px;
					border-right  : 1px #ffffff solid;
					border-bottom : 1px #ffffff solid;
					}
					#footer .colRight #resultsList ul li.finished {
						background : #29abe2;
						}
					#footer .colRight #resultsList ul li.unsure {
						background : #f8b62d;
						}
						#footer .colRight #resultsList ul li a {
							display     : block;
							width       : 30px;
							height      : 30px;
							color       : #ffffff;
							font-size   : 18px;
							line-height : 30px;
							text-shadow : rgba(0, 0, 0, 0.4) 0px -1px 0;
							text-align  : center;
							}
						#footer .colRight #resultsList ul li a:hover {
							background  : #ee1c24;
							}
		#remainingQuestions {
			position      : relative;
			clear         : both;
			width         : 460px;
			height        : 50px;
			background    : url("/images/frontend/pc/common/footer/remainingQuestions.background.png") no-repeat 0 0;
			}
			#remainingQuestions dt {
				float       : left;
				width       : 150px;
				color       : #736357;
				font-size   : 18px;
				font-weight : bold;
				line-height : 50px;
				text-align  : center;
				}
			#remainingQuestions dd {
				float : left;
				width : 310px;
				}
				#remainingQuestions dd .remaining {
					float        : left;
					width        : 145px;
					padding-left : 15px;
					font-size    : 18px;
					line-height  : 50px;
					}
					#remainingQuestions dd .remaining span {
						margin         : 0 4px;
						color          : #ed1c24;
						font-size      : 26px;
						font-weight    : bold;
						vertical-align : middle;
						}
				#remainingQuestions dd .description {
					float     : left;
					width     : 140px;
					padding   : 10px 10px 10px 0;
					color     : #0071bc;
					font-size : 12px;
				}