@charset "utf-8";
@import url("color.css");
@import url("font.css");

/*===============================================
●tablet.css 画面の横幅が768pxまで
===============================================*/
@media screen and (min-width: 641px) and (max-width: 1023px) {

    #content_box {
        width: 725px;
        margin-top: 10px;
        margin-left: auto;
        margin-right: auto;
    }
    #sub_menu {
        width: 240px;
        padding-bottom: 0px;
        float: left;
        position: relative;
        overflow: hidden;
    }
    #sub_content{
        padding-bottom: 0px;
        margin-left: 0px;
        width: 465px;
        float: right;
    }
    .sub01_c_clm {
        width: 445px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 10px;
    }

        .sub01_c_clm h3 {
            font-weight: normal;
            height: 30px;
            font-size: 16px;
            line-height: 30px;
            padding-left: 15px;
        }
	.left {
		float: left;
	}
	.right {
		float: right;
	}
	

	#t_path4 {
		height: auto;
		line-height: 20px;
		margin-top: 25px;
		width: 100%; /* umeno add */
		margin-left: auto;
		margin-right: auto;
	}

	#sub_menu_bunpou_title2 {
		width: 200px;
		height: 40px;
		line-height: 40px;
		font-size: 14px;
		padding-left: 40px;
		margin-bottom: 5px;
		margin-top: 10px;
		font-weight: normal;
	}

    .gra_menu_snd {
        width: 200px;
        min-height: 24px;
        padding-left: 40px;
        padding-top: 14px;
        padding-bottom: 13px;
        vertical-align: middle;
    }
    .gra_menu_snd2 {
        width: 200px;
        height: 39px;
        padding-left: 40px;
	}

        .gra_menu_snd:before, .gra_menu_snd2:before {
			content: '';
			display: inline-block;
/*            height: 100%;*/
			vertical-align: middle;
			margin-right: -0.25em;
		}

        .gra_menu_snd li, .gra_menu_snd2 li {
			font-size: 14px;
			display: inline-block;
			vertical-align: middle;
		}
	#gra_list {
		margin-left: 5px;
	}

		#gra_list li {
			width: 195px;
			height: 60px;
			vertical-align: middle;
			padding-left: 25px;
			padding-right: 5px;
			padding-top: 4px;
			display: inline-block;
			font-size: 15px;
			letter-spacing: 1px;
			margin-top: 10px;
			line-height: 18px;
		}

	#gra_menu_foot {
		width: 210px;
		height: 40px;
		line-height: 40px;
		font-size: 14px;
		padding-left: 30px;
		margin-top: 25px;
		font-weight: normal;
	}

	/* 中身部分 */
	#gra_sec_04 nav {
		display: table;
	}
	.gra_in_menu_container {
		margin-bottom: 20px;
		line-height: 45px;
		font-size: 16px;
		text-align: center;
		float: none;
		display: table-row-group;
	}
	.gra_in_menu {
		width: 109px;
		height: 40px;
		float: left;
		margin-right: 9px;
	}
	.gra_in_menu_off {
		width: 109px;
		height: 40px;
		float: left;
		margin-right: 9px;
	}
	.gra_in_menu_clear {
		margin-right: 0px;
	}

	.gra_in_menu_container a {
		color: #333;
		text-decoration: none;
	}

		.gra_in_menu_container a:hover {
			color: #fff;
			text-decoration: none;
		}

	.gra_in_backnext {
		float: none;
		display: table-header-group;
		font-size: 14px;
	}

	#gra_step_back {
		float: left;
		width: 177px;
		height: 50px;
		padding-left: 50px;
		background: url(../img/back_btn_on.jpg) top left no-repeat;
		text-align: left;
	}

	#gra_step_next {
		float: right;
		width: 177px;
		height: 50px;
		padding-right: 50px;
		background: url(../img/next_btn_on.jpg) top right no-repeat;
		margin-left: 10px;
		text-align: right;
	}

	#gra_step_back_off {
		float: left;
		width: 100px;
		height: 50px;
		padding-left: 50px;
		background: url(../img/back_btn_off.jpg) top left no-repeat;
		text-align: left;
	}

	#gra_step_next_off {
		float: right;
		width: 177px;
		height: 50px;
		padding-right: 50px;
		background: url(../img/next_btn_off.jpg) top right no-repeat;
		margin-left: 10px;
		text-align: right;
	}

	.gra_in_title {
		background-color: #d1ceca;
		color: #333;
		font-weight: normal;
		min-height: 30px;
		font-size: 16px;
		line-height: 30px;
		padding-left: 15px;
		margin-top: 20px;
	}

	.gra_in_content {
		width: 92%;
		margin-left: auto;
		margin-right: auto;
		margin-top: 20px;
		font-size: 14px;
	}

		.gra_in_content p {
			margin-bottom: 15px;
		}

		.gra_in_content table {
			margin-bottom: 15px;
		}

			.gra_in_content table caption {
				margin-bottom: 10px;
			}

		.gra_in_content th, .gra_in_content td {
			border: 1px solid #333;
			padding: 7px;
			text-align: center;
		}

	.gra_dl_title {
		margin-top: 20px;
		margin-bottom: 15px;
		margin-left: 25px;
		font-size: 16px;
	}

	.gra_dl_box {
		/*	width:600px;*/
		min-height: 50px;
		padding-top: 10px;
		padding-left: 10px;
		padding-right: 10px;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 15px;
	}


		.gra_dl_box .instTxtBlk {
			float: left;
			line-height: 1.3em;
			font-size: 15px;
		}

		.gra_dl_box .voiceLinkBox {
			float: right;
			margin-top: 4px;
			margin-right: 4px;
		}

			.gra_dl_box div img {
				margin-left: 10px;
			}

		.gra_dl_box a {
			text-decoration: none;
		}

	.gra_ques_head {
		/*	width:445px;*/
		font-size: 14px;
		height: 20px;
		line-height: 20px;
		padding: 10px;
		margin-top: 15px;
	}

	.gra_ques_mid {
		width: 645px;
		font-size: 14px;
		height: 40px;
		line-height: 20px;
		padding-right: 15px;
		display: table-cell;
		vertical-align: middle;
	}

		.gra_ques_mid a {
			text-decoration: none;
		}

			.gra_ques_mid a:hover {
				opacity: 0.7;
			}

		.gra_ques_mid .gra_btn_on, .gra_ques_mid .pro_btn_on {
			width: 46px;
			height: 28px;
			line-height: 28px;
			text-align: center;
			font-size: 16px;
			margin-left: 10px;
		}

		.gra_ques_mid .gra_btn_off {
			width: 46px;
			height: 28px;
			line-height: 28px;
			text-align: center;
			font-size: 16px;
			margin-left: 10px;
		}

	.gra_ques_foot {
		font-size: 14px;
		height: 55px;
		line-height: 55px;
	}

		.gra_ques_foot .icon {
			margin-left: 20px;
			margin-top: 5px;
			width: 20px;
			margin-right: -5px;
		}

		.gra_ques_foot p {
			margin-left: 10px;
		}

	.prev_que_btn {
		float: left;
		margin-top: 10px;
		margin-right: 10px;
	}
	#prev_que_btn {
		float: left;
		margin-top: 10px;
		margin-right: 10px;
	}
	.next_que_btn {
		float: left;
		margin-top: 10px;
		margin-left: 10px;
		margin-right: 10px;
	}
	#next_que_btn {
		float: left;
		margin-top: 10px;
		margin-left: 10px;
		margin-right: 10px;
	}
	.gra_ques_inputarea {
		padding: 15px;
		margin-top: 15px;
	}
		.gra_ques_inputarea p {
			float: left;
			font-size: 16px;
		}
		.gra_ques_inputarea form {
			float: left;
			margin-top: -6px;
			margin-left: 3px;
			margin-right: 5px;
		}

			.gra_ques_inputarea form input {
				height: 22px;
				font-size: 16px;
			}
	.gra_ques_btnarea {
		padding-left: 47px;
		margin-bottom: 20px;
		margin-top: 50px;
	}

		.gra_ques_btnarea button {
			width: 150px;
			height: 30px;
			font-size: 18px;
			border-radius: 3px;
			margin-right: 40px;
		}

	.gra_ques_res {
		padding-left: 20px;
		margin-top: 10px;
	}

		.gra_ques_res table td {
			height: 60px;
			font-size: 18px;
			padding-right: 40px;
		}

		.gra_ques_res p {
			font-size: 14px;
			line-height: 1.3em;
		}

		.gra_ques_res .menu {
			margin-top: 30px;
			margin-bottom: 30px;
		}

			.gra_ques_res .menu ul li {
				width: 100px;
				height: 40px;
				float: left;
				text-align: center;
				line-height: 40px;
				font-size: 18px;
				margin-left: 28px;
				margin-bottom: 15px;
			}

	/**
	 * ドラッグアンドドロップ
	 */
	.match_drag_ul {
		padding: 5px 10px;
		width: 310px;
		float: left;
		margin-right: 15px;
	}

		.match_drag_ul li {
			height: 40px;
			border: solid 1px #AAAAAA;
			margin-bottom: 25px;
			padding: 5px;
/*			line-height: 40px;*/
			text-align: center;
			background-color: #FFFFFF;
			cursor: move;
		}

	.match_drop_ul {
		padding: 5px 0px;
		width: 310px;
		float: left;
	}

		.match_drop_ul li {
			height: 40px;
			border: solid 1px #AAAAAA;
			margin-bottom: 25px;
			padding: 5px;
/*			line-height: 40px;
			text-align: right;*/
			background-color: #EDE8E4;
		}

	/**
	 * sort用ドラッグアンドドロップ
	 *
	 */
	.sort_p_mg {
		margin: 0px 5px;
	}

	.sort_drag_box {
		display: inline-block;
		width: 40px;
		border-bottom: dotted 1px #AAAAAA;
		text-align: center;
	}

	.sort_drag_ul {
		border: solid 1px #AAAAAA;
		padding: 5px 10px;
		width: 300px;
		margin-top: 20px;
		margin-bottom: 20px;
		padding-top: 15px;
	}

		.sort_drag_ul li {
			float: none;
			width: auto;
			height: 40px;
			padding: 5px 10px;
			line-height: 40px;
			border: solid 1px #AAAAAA;
			margin-right: 10px;
			margin-bottom: 10px;
			background-color: #FFFFFF;
			cursor: move;
		}

	/* umeno add from here vvvv */
	.answerBlock {
		position: absolute;
		top: 10px;
		left: 10px;
		width: 460px;
		border: solid;
		opacity: 0.9;
		background-color: white;
		display: none;
		border:solid;
	}
		.answerBlock h1 {
			TEXT-ALIGN: center;
		}

		.answerBlock p {
			font-size: 120%;
			padding: 20px;
		}

		.answerBlock div {
			margin: 20px;
		}

	.ques_block {
		position: relative;
	}
	/* umeno add from ^^^^^ */
	
		.gra_ques_sec {
		margin-top: 20px;
		}

}