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


/*---------------------------------------------
menu全体
---------------------------------------------*/

.mar{
	margin:5px 0 6px 0;
	font-size:14px;
}

.free_ttl{margin-top:10px;}

div#menu{
	background:url(../images/bg_main.gif) bottom left no-repeat;
	width:700px;
	margin-bottom:30px;
	padding-bottom:5px;
	letter-spacing:normal;
}

div#menu p.menu_top {
	background:url(../images/bg_top.gif) bottom left no-repeat;
	width:700px;
	height:7px;
	font-size:0;
	line-height:0;
	margin-bottom:9px;
}

div#menu p.flow{
	margin:0 0 18px 15px;
}

div#menu div.box{
	margin-left:12px;
	margin-bottom:10px;
	display: inline-block;
	overflow:hidden;
}

div#menu p.ttl{
	font-size:14px;
	line-height:1.2em;
	font-weight:bold;
	margin:0 11px;
	margin-top:13px;
}

div#menu p.txt{
	float:left;
	width:102px;
	margin:5px 0 0 11px;
	color:#333333;
	line-height:1.2em;
	overflow:hidden;
	display:inline;
	font-size:12px;
}

div#menu p.img{
	margin-top:5px;
	float:right;
	width:90px;
	margin-right:11px;
	overflow:hidden;
	display:inline;
	border:#dddddd;
	border-style:solid;
	border-width:2px;
}

/*---------------------------------------------
ソフト指定
---------------------------------------------*/
/*powerpoint*/
#menu .power_point{
	background:url(../images/power_point.png) top left no-repeat; 
	float:left;
	width:219px;
	margin-right:9px;
	display: inline;
	cursor: pointer;
    height: 160px;
}

#menu .power_point.hover{
	cursor: pointer;
	background:url(../images/power_point_over.png) top left no-repeat;
}

#menu .power_point a{
	color:#cd5d15;
	text-decoration: none;
}

#menu .power_point a:hover{
	color:#cd5d15;
	text-decoration: underline;
}


/*excel*/
#menu .excel{
	background:url(../images/excel.png) top left no-repeat; 
	float:left;
	width:219px;
	margin-right:9px;
	display: inline;
	cursor: pointer;
    height: 160px;
}

#menu .excel.hover{
	cursor: pointer;
	background:url(../images/excel_over.png) top left no-repeat;
	
}

#menu .excel a{
	color:#367f00;
	text-decoration:none;
}

#menu .excel a:hover{
	color:#367f00;
	text-decoration: underline;
}


/*word*/
#menu .word{
	background:url(../images/word.png) top left no-repeat; 
	float:left;
	width:219px;
	margin-right:9px;
	display: inline;
	cursor: pointer;
    height: 160px;
}

#menu .word.hover{
	cursor: pointer;
	background:url(../images/word_over.png) top left no-repeat;
}

#menu .word a{
	color:#014f91;
	text-decoration:none;
}

#menu .word a:hover{
	color:#014f91;
	text-decoration: underline;
}


/*photo_shop*/
#menu .photo_shop{
	background:url(../images/photo_shop.png) top left no-repeat; 
	float:left;
	width:219px;
	margin-right:9px;
	display: inline;
	cursor: pointer;
    height: 160px;
}

#menu .photo_shop.hover{
	cursor: pointer;
	background:url(../images/photo_shop_over.png) top left no-repeat;
}

#menu .photo_shop a{
	color:#07457d;
	text-decoration:none;
}

#menu .photo_shop a:hover{
	color:#07457d;
	text-decoration: underline;
}


/*illustrator*/
#menu .illustrator{
	background:url(../images/illustrator.png) top left no-repeat; 
	float:left;
	width:219px;
	margin-right:9px;
	display: inline;
	cursor: pointer;
    height: 160px;
}

#menu .illustrator.hover{
	cursor: pointer;
	background:url(../images/illustrator_over.png) top left no-repeat;
}

#menu .illustrator a{
	color:#e46600;
	text-decoration:none;
}

#menu .illustrator a:hover{
	color:#e46600;
	text-decoration: underline;
}

/*---------------------------------------------
難易度指定
---------------------------------------------*/
#menu .star5{
	margin:8px 5px 0 0;
	background:url(../images/star.png) top right no-repeat;
	position:relative;
	top:0;
	left:138px;
	width:70px;
	height:11px;
}

#menu .star4{
	margin:8px 5px 0 0;
	background:url(../images/star.png) top right no-repeat;
	position:relative;
	top:0;
	left:153px;
	width:55px;
	height:11px;
}


#menu .star3{
	margin:8px 5px 0 0;
	background:url(../images/star.png) top right no-repeat;
	position:relative;
	top:0;
	left:168px;
	width:40px;
	height:11px;
}


#menu .star2{
	margin:8px 5px 0 0;
	background:url(../images/star.png) top right no-repeat;
	position:relative;
	top:0;
	left:181px;
	width:27px;
	height:11px;
}


#menu .star1{
	margin:8px 5px 0 0;
	background:url(../images/star.png) top right no-repeat;
	position:relative;
	top:0;
	left:196px;
	width:12px;
	height:11px;
}


/*clearfix直打ち*/
.box3:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}

.box3 {
    display: inline-block;
}

* html .box3 {
    height: 1px;
}

.box2:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}

.box2 {
    display: inline-block;
}

* html .box2 {
    height: 1px;
}

.box1:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}

.box1 {
    display: inline-block;
}

* html .box1 {
    height: 1px;
}