@charset "utf-8";

@import url("color.css");
@import url("font.css");


/*===============================================
●style.css 画面の横幅が769px以上
===============================================*/
@media screen and (min-width: 1024px) {
/*==================================
gra04用
===================================*/

	.clearfix:after {
		content: ".";
		display: block;
		height: 0;
		font-size: 0;
		clear: both;
		visibility: hidden;
	}
	
	.clearfix {
		display: inline-block;
	}
	/* Hides from IE Mac */
	* html .clearfix {
		height: 1%;
	}
	
	.clearfix {
		display: block;
	}
	/* End Hack */
	
	.left {
		float: left;
	}
	
	.right {
		float: right;
	}
	
	
	/*================================
	サブページ共通部品
	==================================*/
	
	
	#content_box {
		width: 980px;
		margin-top: 10px;
		margin-left: auto;
		margin-right: auto;
		padding-bottom:26px;
	}
	
	#sub_menu {
		width: 240px;
		padding-bottom: 0px;
		float: left;
		position: relative;
		overflow: hidden;
	}
	
	
	#sub_menu_foot {
		width: 210px;
		background: url(./../img/list3.png) no-repeat #d1ceca;
		height: 38px;
		line-height: 38px;
		color: #FFFFFF;
		font-size: 14px;
		padding-left: 30px;
		margin-top: 25px;
		font-weight: normal;
	}
	.sub_menu_snd {
		width: 200px;
		padding-left: 40px;
		padding-top: 5px;
		padding-bottom: 5px;
		line-height: 1.4em;
	}
	
	.sub_menu_snd:before {
		content: '';
		display: inline-block;
		height: 100%;
		vertical-align: middle;
		margin-right: -0.25em;
	}

	
	
	#footer {
		width: 100%;
		height: 26px;
		position: relative;
		bottom: 0px;
		background-color: #c78198;
	}
	
	
	#contents_outer_pane, #sub_content{
		padding-bottom: 0px;
		margin-left: 0px;
		width: 700px;
		float: right;
	}
	
	#inyou {
		width: 700px;
		text-align: right;
		margin-top: 30px;
		line-height: 1.4em;
	}
	
	
	
	/*==================================
	sub01用
	===================================*/
	
	#t_path {
		height: auto;
		line-height: 20px;
		margin-top: 25px;
		width: 980px;
		margin-left: auto;
		margin-right: auto;
	}
	
		#t_path a {
			color: #FFF;
			text-decoration: none;
		}

			#t_path a:hover {
				color: #0CF;
				text-decoration: none;
			}
	#sub01_c_title {
		width: 680px;
		height: 75px;
		padding-left: 20px;
		padding-top: 10px;
		position: relative;
		margin-bottom: 20px;
	}
	
		#sub01_c_title h1 {
			font-size: 42px;
			line-height: 50px;
			height: 50px;
			margin-top: 0px;
			/*border-left:3px solid #eee;
	padding-left:10px;*/
		}
	
		#sub01_c_title h2 {
			font-size: 18px;
			position: absolute;
			top: 50px;
			right: 15px;
		}
	
	.sub01_c_clm {
		width: 660px;
		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;
		}
	
		.sub01_c_clm p {
			padding: 20px;
			font-size: 15px;
			letter-spacing: 1px;
			line-height: 1.3em;
		}
	
		.sub01_c_clm #course_desc {
			padding: 20px;
			font-size: 15px;
			letter-spacing: 1px;
			line-height: 1.3em;
		}
	
	#sub01_aside {
		text-align: center;
		height: 22px;
		padding-top: 6px;
	}
	
	#sub01_aside_in {
		width: 400px;
		font-size: 14px;
		margin: auto;
	}


    #t_path4 {
        height: auto;
        line-height: 20px;
        margin-top: 25px;
        width: 980px;
        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_box_under {
        clear: both;
        width: 700px;
        height: 180px;
    }

        #gra_box_under p {
            padding-top: 15px;
            padding-left: 15px;
            line-height: 1.2em;
            font-size: 14px;
        }

    #gra_list {
        margin-left: 8px;
    }

        #gra_list li {
            width: 315px;
            min-height: 50px;
            vertical-align: middle;
            padding-left: 25px;
            padding-top: 4px;
            display: inline-block;
            font-size: 14px;
            letter-spacing: 1px;
            margin-top: 10px;
        }

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

    .gra_child_menu li {
        width: 200px;
        height: 30px;
        line-height: 30px;
        padding-left: 40px;
    }

    /* 中身部分 */

    #gra_sec_01 nav, #gra_sec_02 nav, #gra_sec_03 nav, #gra_sec_04 nav {
        display: block;
    }

    #gra_in_top_container {
    }

    .gra_in_menu_container {
        margin-bottom: 20px;
        line-height: 45px;
        font-size: 16px;
        text-align: center;
        float: left;
    }

    .gra_in_menu {
        width: 120px;
        height: 40px;
        float: left;
        margin-right: 10px;
    }

    .gra_in_menu_off {
        width: 120px;
        height: 40px;
        float: left;
        margin-right: 10px;
    }
    .gra_in_menu_off span
    {
	color:#CCCCCC;
		
    }

    .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: left;
        text-align: center;
        font-size: 12px;
    }

    #gra_step_back {
        float: left;
        width: 80px;
        height: auto;
        padding-top: 33px;
        background: url(../img/back_btn_on.jpg) top center no-repeat;
    }

    #gra_step_next {
        float: left;
        width: 80px;
        height: auto;
        padding-top: 33px;
        background: url(../img/next_btn_on.jpg) top center no-repeat;
        margin-left: 10px;
    }

    #gra_step_back_off {
        float: left;
        width: 80px;
        height: auto;
        padding-top: 33px;
        background: url(../img/back_btn_off.jpg) top center no-repeat;
    }

    #gra_step_next_off {
        float: left;
        width: 80px;
        height: auto;
        padding-top: 33px;
        background: url(../img/next_btn_off.jpg) top center no-repeat;
        margin-left: 10px;
    }

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

    .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: 769px;
        /* width: 600px; umeno */
        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:680px;*/
        font-size: 14px;
        height: 20px;
        line-height: 20px;
        padding: 10px;
        margin-top: 15px;
    }

    .gra_ques_mid {
        width: 685px;
        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;*/
		line-height: 2em;
    }

        .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;
    }
    /* umeno 名前変更： 削除予定 ここから */
    .gra_btn_back {
        float: left;
        margin-top: 10px;
        margin-right: 10px;
    }
    /* umeno 削除予定 ここまで */


    .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;
    }
    /* umeno 名前変更：削除予定 ここから */
    .gra_btn_next {
        float: left;
        margin-top: 10px;
        margin-left: 10px;
        margin-right: 10px;
    }
    /* umeno 削除予定 ここまで */


    .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: 140px;
        margin-bottom: 20px;
        margin-top: 50px;
    }

        .gra_ques_btnarea button {
            width: 160px;
            height: 30px;
            font-size: 18px;
            border-radius: 3px;
            margin-right: 100px;
            white-space: nowrap;
        }

    .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;
            }



    /**
 * ドラッグアンドドロップ
 */
    .match_drag_ul {
        padding: 5px 10px;
        width: 410px;
        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: 410px;
        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: 600px;
        margin-top: 20px;
        margin-bottom: 20px;
    }

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

    .ques_droplist {
        width: 200px;
        height: 40px;
        border: solid 1px #AAAAAA;
        display: inline-block;
    }

    .ques_draglist_box li {
        float: left;
        width: 150px;
        height: 40px;
        text-align: center;
        margin: 0px 5px;
        border: solid 1px #AAAAAA;
        background-color: #CCCCCC;
        line-height: 40px;
    }

    .ques_droplist_box {
        margin-top: 30px;
    }

        .ques_droplist_box li {
            width: 600px;
            height: 40px;
            border-bottom: solid 1px #AAAAAA;
            margin-bottom: 25px;
            padding-bottom: 5px;
            line-height: 40px;
        }

    /**
 * 解説：言語運用
 */
    .gra_in_usage_box {
        margin: 10px 0px;
    }

        .gra_in_usage_box a p {
            text-align: center;
            color: #000000;
            text-decoration: none;
            line-height: 40px;
            background-color: #FFAAFF;
        }

 /**
 * ：練習問題
 */

    /* 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 ^^^^^ */
}

.naviUsage {
	background-color: #DCD1D5;
	margin:10px;
	padding:5px;
}

.naviUsageImage {
	margin:5px auto 5px auto;
	display:inline;
	height:50px;
}

	.gra_ques_sec {
		margin-top: 20px;
	}