@charset "utf-8";

#wrap{
    max-width: 970px;
    min-width: 300px;
    width: 90%;
    text-align: left;
    margin: 10px auto;
    font-size: 18px;
}

#wrap #top{
    font-size: 18px;
    margin-bottom: 10px;
    padding-bottom: 15px;
    border-bottom: 1px solid #ccc;
}

#wrap span{
    color: #f00;
}

#wrap #document{
    margin-bottom: 10px;
}

#wrap .blue{
    color: #0520fb;
}

#wrap img{
    margin-top: 7px;
}

#wrap .zone{
    border: solid 1px #ccc; 
    background: #eee;
    padding: 3px;
    width: 300px;
    margin: 10px 0;
}

#wrap pre{
    color: #0520fb;
    margin: 0;
}

#wrap .sqr{
    list-style: none;
    margin: 20px auto;
    padding: 0;
    display: inline-block;
    width: 100%;
    text-align: center;
}

#wrap .sqr div{
    display: inline-block;
    width: 200px;
    vertical-align: top;
    margin:0 3%; 
}

#wrap #arrow{
    text-align: center;
}

#wrap #last{
    font-size: 18px;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
    margin: 10px auto;
    padding: 5px 0;
}

/* タブレットレイアウト : 500 px 以上 */
@media screen and (min-width:500px) {
    #wrap {
		width:500px;
	}
	#wrap .zone{
		width:500px;
	}
}

/* タブレットレイアウト : 700 px 以上 */
@media screen and (min-width:700px) {
    #wrap {
        width: 700px;
    }
	#wrap .zone{
		width:700px;
    }
}

/* タブレットレイアウト : 1000 px　以上 */
@media screen and (min-width:1000px) {
    #wrap {
        width: 800px;
		font-size: 13px;
    }
	#wrap .zone{
		width:800px;
    }
	#wrap #top{
	    font-size: 15px;
	}
	#wrap #last{
	    font-size: 15px;
	}
}