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




ul.cate{list-style: none; width: 310px;}
ul.cate:after {content:""; display:block; clear:both; height:1px; overflow:hidden;}
ul.cate li{height: 25px; float: left; margin-bottom: 5px;}
ul.cate li a{display:block; height:25px;}

.cate01{width: 310px; background: url(../img/cate/01.png) no-repeat; background-size:100%;}
.cate01 a{width: 310px!important; background: url(../img/cate/01_on.png) no-repeat; background-size:100%;}
.cate01 span{width: 310px; height: 25px; display: block; background: url(../img/cate/01_on.png) no-repeat; background-size:100%;}

.cate02{width: 100px; background: url(../img/cate/02.png) no-repeat; background-size:100%; margin-right: 5px;}
.cate02 a{width: 100px!important; background: url(../img/cate/02_on.png) no-repeat; background-size:100%;}
.cate02 span{width: 100px; height: 25px; display: block; background: url(../img/cate/02_on.png) no-repeat; background-size:100%;}

.cate03{width: 100px; background: url(../img/cate/03.png) no-repeat; background-size:100%; margin-right: 5px;}
.cate03 a{width: 100px!important; background: url(../img/cate/03_on.png) no-repeat; background-size:100%;}
.cate03 span{width: 100px; height: 25px; display: block; background: url(../img/cate/03_on.png) no-repeat; background-size:100%;}

.cate04{width: 100px; background: url(../img/cate/04.png) no-repeat; background-size:100%;}
.cate04 a{width: 100px!important; background: url(../img/cate/04_on.png) no-repeat; background-size:100%;}
.cate04 span{width: 100px; height: 25px; display: block; background: url(../img/cate/04_on.png) no-repeat; background-size:100%;}

.cate05{width: 100px; background: url(../img/cate/05.png) no-repeat; background-size:100%; margin-right: 5px;}
.cate05 a{width: 100px!important; background: url(../img/cate/05_on.png) no-repeat; background-size:100%;}
.cate05 span{width: 100px; height: 25px; display: block; background: url(../img/cate/05_on.png) no-repeat; background-size:100%;}

.cate06{width: 100px; background: url(../img/cate/06.png) no-repeat; background-size:100%; margin-right: 5px;}
.cate06 a{width: 100px!important; background: url(../img/cate/06_on.png) no-repeat; background-size:100%;}
.cate06 span{width: 100px; height: 25px; display: block; background: url(../img/cate/06_on.png) no-repeat; background-size:100%;}

.cate07{width: 100px; background: url(../img/cate/07.png) no-repeat; background-size:100%;}
.cate07 a{width: 100px!important; background: url(../img/cate/07_on.png) no-repeat; background-size:100%;}
.cate07 span{width: 100px; height: 25px; display: block; background: url(../img/cate/07_on.png) no-repeat; background-size:100%;}

.cate08{width: 152px; background: url(../img/cate/08.png) no-repeat; background-size:100%; margin-right: 6px;}
.cate08 a{width: 152px!important; background: url(../img/cate/08_on.png) no-repeat; background-size:100%;}
.cate08 span{width: 152px; height: 25px; display: block; background: url(../img/cate/08_on.png) no-repeat; background-size:100%;}

.cate09{width: 152px; background: url(../img/cate/09.png) no-repeat; background-size:100%;}
.cate09 a{width: 152px!important; background: url(../img/cate/09_on.png) no-repeat; background-size:100%;}
.cate09 span{width: 152px; height: 25px; display: block; background: url(../img/cate/09_on.png) no-repeat; background-size:100%;}

.cate10{width: 310px; background: url(../img/cate/10.png) no-repeat; background-size:100%;}
.cate10 a{width: 310px!important; background: url(../img/cate/10_on.png) no-repeat; background-size:100%;}
.cate10 span{width: 310px; height: 25px; display: block; background: url(../img/cate/10_on.png) no-repeat; background-size:100%;}



/* TOP用ＢＯＸ A */

.BoxTOP_A{width:240px; height:380px; position:relative;}
.BoxTOP_A img{display: block; width: 240px; height: 380px;}
.BoxTOP_A a{display: block; width:240px; height:380px;}
.BoxTOP_A h2{position:absolute; top:0px; left: 0px; width: 60px; color:#FFFFFF; font-size:13px; font-weight: bold; z-index: 100; line-height: 60px; text-align: center;}
.BoxTOP_A p{display: block; color:#3C3C3C; font-weight: bold; position: absolute; z-index: 100; font-size:14px; top:5px; left: 70px; margin-right: 10px;}
.BoxTOP_A section{background: url(../img/bg/BoxTOP_A.png) no-repeat; background-size: 100%; width: 240px; height: 380px;}

.BoxTOP_A a:hover p{
text-shadow: 
    white 2px 0px,  white -2px 0px,
    white 0px -2px, white 0px 2px,
    white 2px 2px , white -2px 2px,
    white 2px -2px, white -2px -2px,
    white 1px 2px,  white -1px 2px,
    white 1px -2px, white -1px -2px,
    white 2px 1px,  white -2px 1px,
    white 2px -1px, white -2px -1px;	
}


/* TOP用ＢＯＸ B */
.BoxTOP_B{width:240px; height:180px; position:relative;}
.BoxTOP_B img{display: block; width: 240px; height: 180px;}
.BoxTOP_B a{display: block; width:240px; height:180px;}
.BoxTOP_B h2{position:absolute; top:0px; left: 0px; width: 60px; color:#FFFFFF; font-size:13px; font-weight: bold; z-index: 100; line-height: 60px; text-align: center;}
.BoxTOP_B p{display: block; color:#3C3C3C; font-weight: bold; position: absolute; z-index: 100; font-size:14px; top:5px; left: 70px; margin-right: 10px;} 
.BoxTOP_B section{background: url(../img/bg/BoxTOP_B.png) no-repeat; background-size: 100%; width: 240px; height: 180px;}

.BoxTOP_B a:hover p{
text-shadow: 
    white 2px 0px,  white -2px 0px,
    white 0px -2px, white 0px 2px,
    white 2px 2px , white -2px 2px,
    white 2px -2px, white -2px -2px,
    white 1px 2px,  white -1px 2px,
    white 1px -2px, white -1px -2px,
    white 2px 1px,  white -2px 1px,
    white 2px -1px, white -2px -1px;	
}


/* TOP用ＢＯＸ C */

.BoxTOP_C{width:500px; height:180px; position:relative;}
.BoxTOP_C img{display: block; width: 500px; height: 180px;}
.BoxTOP_C a{display: block; width:500px; height:180px;}
.BoxTOP_C h2{position:absolute; top:0px; left: 0px; width: 60px; color:#FFFFFF; font-size:13px; font-weight: bold; z-index: 100; line-height: 60px; text-align: center;}
.BoxTOP_C p{display: block; color:#3C3C3C; font-weight: bold; position: absolute; z-index: 100; font-size:14px; top:5px; left: 70px; margin-right: 10px;} 
.BoxTOP_C section{background: url(../img/bg/BoxTOP_C.png) no-repeat; background-size: 100%; width: 500px; height: 180px;}

.BoxTOP_C a:hover p{
text-shadow: 
    white 2px 0px,  white -2px 0px,
    white 0px -2px, white 0px 2px,
    white 2px 2px , white -2px 2px,
    white 2px -2px, white -2px -2px,
    white 1px 2px,  white -1px 2px,
    white 1px -2px, white -1px -2px,
    white 2px 1px,  white -2px 1px,
    white 2px -1px, white -2px -1px;	
}


/* TOP用ＢＯＸ D */

.BoxTOP_D{width:500px; height:380px; position:relative;}
.BoxTOP_D img{display: block; width: 500px; height: 380px;}
.BoxTOP_D a{display: block; width:500px; height:380px;}
.BoxTOP_D h2{position:absolute; top:0px; left: 0px; width: 60px; color:#FFFFFF; font-size:13px; font-weight: bold; z-index: 100; line-height: 60px; text-align: center;}
.BoxTOP_D p{display: block; color:#3C3C3C; font-weight: bold; position: absolute; z-index: 100; font-size:14px; top:5px; left: 70px; margin-right: 10px;} 
.BoxTOP_D section{background: url(../img/bg/BoxTOP_D.png) no-repeat; background-size: 100%; width: 500px; height: 380px;}

.BoxTOP_D a:hover p{
text-shadow: 
    white 2px 0px,  white -2px 0px,
    white 0px -2px, white 0px 2px,
    white 2px 2px , white -2px 2px,
    white 2px -2px, white -2px -2px,
    white 1px 2px,  white -1px 2px,
    white 1px -2px, white -1px -2px,
    white 2px 1px,  white -2px 1px,
    white 2px -1px, white -2px -1px;	
}

/* TOP用ＢＯＸ E */

.BoxTOP_E{width:500px; height:180px; position:relative; background:url(../img/bg/topleft.png) top left no-repeat ,url(../img/bg/topright.png) top right no-repeat,url(../img/bg/bottomleft.png) bottom left no-repeat ,url(../img/bg/bottomright.png) bottom right no-repeat;}
.BoxTOP_E section{padding: 20px;}


/* TOP用ＢＯＸ F */

.BoxTOP_F{width:500px; height:380px; position:relative; background:url(../img/bg/topleft.png) top left no-repeat ,url(../img/bg/topright.png) top right no-repeat,url(../img/bg/bottomleft.png) bottom left no-repeat ,url(../img/bg/bottomright.png) bottom right no-repeat;}
.BoxTOP_F section{padding: 20px;}



@media only screen and (max-width:529px) {
.BoxTOP_C{width:240px; height:180px; position:relative;}
.BoxTOP_C img{display: block; width: 240px; height: 180px;}
.BoxTOP_C a{display: block; width:240px; height:180px;}
.BoxTOP_C h2{position:absolute; top:0px; left: 0px; width: 60px; color:#FFFFFF; font-size:13px; font-weight: bold; z-index: 100; line-height: 60px; text-align: center;}
.BoxTOP_C p{display: block; color:#3C3C3C; font-weight: bold; position: absolute; z-index: 100; font-size:14px; top:5px; left: 70px; margin-right: 10px;} 
.BoxTOP_C section{background: url(../img/bg/BoxTOP_B.png) no-repeat; background-size: 100%; width: 240px; height: 180px;}

.BoxTOP_C a:hover p{
text-shadow: 
    white 2px 0px,  white -2px 0px,
    white 0px -2px, white 0px 2px,
    white 2px 2px , white -2px 2px,
    white 2px -2px, white -2px -2px,
    white 1px 2px,  white -1px 2px,
    white 1px -2px, white -1px -2px,
    white 2px 1px,  white -2px 1px,
    white 2px -1px, white -2px -1px;	
}
	
.BoxTOP_D{width:240px; height:380px; position:relative;}
.BoxTOP_D img{display: block; width: 240px; height: 380px;}
.BoxTOP_D a{display: block; width:240px; height:380px;}
.BoxTOP_D h2{position:absolute; top:0px; left: 0px; width: 60px; color:#FFFFFF; font-size:13px; font-weight: bold; z-index: 100; line-height: 60px; text-align: center;}
.BoxTOP_D p{display: block; color:#3C3C3C; font-weight: bold; position: absolute; z-index: 100; font-size:14px; top:5px; left: 70px; margin-right: 10px;}
.BoxTOP_D section{background: url(../img/bg/BoxTOP_A.png) no-repeat; background-size: 100%; width: 240px; height: 380px;}

.BoxTOP_D a:hover p{
text-shadow: 
    white 2px 0px,  white -2px 0px,
    white 0px -2px, white 0px 2px,
    white 2px 2px , white -2px 2px,
    white 2px -2px, white -2px -2px,
    white 1px 2px,  white -1px 2px,
    white 1px -2px, white -1px -2px,
    white 2px 1px,  white -2px 1px,
    white 2px -1px, white -2px -1px;	
}
	
/* TOP用ＢＯＸ E */

.BoxTOP_E{width:240px; height:180px; position:relative; background:url(../img/bg/topleft.png) top left no-repeat ,url(../img/bg/topright.png) top right no-repeat,url(../img/bg/bottomleft.png) bottom left no-repeat ,url(../img/bg/bottomright.png) bottom right no-repeat;}
.BoxTOP_E section{padding: 20px;}


/* TOP用ＢＯＸ F */

.BoxTOP_F{width:240px; height:380px; position:relative; background:url(../img/bg/topleft.png) top left no-repeat ,url(../img/bg/topright.png) top right no-repeat,url(../img/bg/bottomleft.png) bottom left no-repeat ,url(../img/bg/bottomright.png) bottom right no-repeat;}
.BoxTOP_F section{padding: 20px;}	
	
	
}

.BoxTOP_A p.TOPex01{top:150px; left: 30px;}



.BoxA{width:240px;}
.BoxA img{width:100%; display:block;}
.BoxA .Rowbox{margin:5px;}
/* .BoxA .Rowbox{margin:4px; border: 1px solid #cccccc;} */


.BoxA section{position:relative; padding:10px; height:auto;}

.BoxA section .cate{font-size:16px; font-weight:normal; line-height:20px; display:inline-table; padding:5px;}
.BoxA section .cate{position:absolute; top:5px; height:5px;}
.BoxA section .cate{  
    border-radius: 3px;        /* CSS3草案 */  
    -webkit-border-radius:3px;    /* Safari,Google Chrome用 */  
    -moz-border-radius:3px;   /* Firefox用 */  
}


.BoxA h2{font-size:16px; line-height:20px; font-weight:bold; width:215px; height:auto; padding-top:5px; padding-bottom:5px; margin:0 auto;}




.BoxA section p{
	display: block;
	margin: 0 auto;
	line-height: 18px;
	font-size: 13px;
	font-weight: normal;
	width: 210px;
	height:auto;
	overflow: hidden;
}


.BoxA section p.instructor{height:55px;}



@media only screen and (max-width:719px) {
.BoxA img{width:95%; display:block; margin:0 auto;}
.BoxA section{position:relative; height:auto;}

.BoxA section .cate{font-size:16px; font-weight:normal; line-height:20px; display:inline-table; padding:5px;}
.BoxA section .cate{position:absolute; top:15px; left:15px;}
.BoxA section .cate{  
    border-radius: 3px;        /* CSS3草案 */  
    -webkit-border-radius:3px;    /* Safari,Google Chrome用 */  
    -moz-border-radius:3px;   /* Firefox用 */  
}


.BoxA h2{font-size:16px; line-height:20px; font-weight:bold; width:95%; height:38px; padding-top:5px; padding-bottom:5px; overflow:hidden; margin:0 auto;}

.BoxA .date{
	line-height:20px;
	font-size: 13px;
	font-weight: normal;
	width: 220px;
	width:95%;
	color:#000000;
	overflow:hidden;
	padding-top:5px;
}


.BoxA section p{
	display: block;
	margin:0 auto;
	line-height: 18px;
	font-size: 13px;
	font-weight: normal;
	width:95%;
	height:90px;
	overflow:hidden;
}

}
 
.BoxB{width:480px;}
.BoxB img{width:220px; height:290px; display:block;}

.BoxB section{position:relative; padding:10px; height:330px;}

.BoxB section .cate{font-size:16px; font-weight:normal; line-height:20px; display:inline-table; padding:5px;}
.BoxB section .cate{position:absolute; top:5px; height:5px;}
.BoxB section .cate{  
    border-radius: 3px;        /* CSS3草案 */  
    -webkit-border-radius:3px;    /* Safari,Google Chrome用 */  
    -moz-border-radius:3px;   /* Firefox用 */  
}


.BoxB h2{font-size:16px; line-height:24px; font-weight:bold; width:220px; height:44px; padding-top:5px; padding-bottom:5px; overflow:hidden; float:right;}

.BoxB .date{
	line-height:20px;
	font-size: 13px;
	font-weight: normal;
	width: 440px;
	height:20px;
	color:#000000;
	overflow:hidden;
	padding-top:5px;
}

.BoxB img{float:left;}


.BoxB section p{
	float: right;
	line-height: 18px;
	font-size: 13px;
	font-weight: normal;
	width: 220px;
	height: 234px;
	color: #000000;
	overflow: hidden;
	margin-bottom: 10px;
}




@media only screen and (max-width:719px) {
.BoxB section{position:relative; height:auto;}

.BoxB section .cate{font-size:16px; font-weight:normal; line-height:20px; display:inline-table; padding:5px;}
.BoxB section .cate{position:absolute; top:5px; height:5px;}
.BoxB section .cate{  
    border-radius: 3px;        /* CSS3草案 */  
    -webkit-border-radius:3px;    /* Safari,Google Chrome用 */  
    -moz-border-radius:3px;   /* Firefox用 */  
}



.BoxB h2{font-size:16px; line-height:24px; font-weight:bold; width:100%; height:38px; padding-top:5px; padding-bottom:5px; overflow:hidden; float:right;}

.BoxB .date{
	line-height:20px;
	font-size: 13px;
	font-weight: normal;
	width: 440px;
	height:20px;
	overflow:hidden;
	padding-top:5px;
}

.BoxB img{float:none; width:100%; height:auto;}


.BoxB section p{
	float:right;
	line-height: 18px;
	font-size: 13px;
	font-weight: normal;
	width: 100%;
	height:auto;
	overflow:hidden;
	margin-bottom:10px;
}

}