#header {}
#header h1 { position:relative; display: block; max-height: 700px; overflow: hidden;}
#header h1 img { width: 100%; height: auto; max-height: 700px;}
#header h1::after { 
	display:block; clear:both; content:"";
	position: absolute; top:80px; 
/*	left: 0; 	*/
	left: -430px; 
	right: 0;
	margin: auto;
	width: 567px; height: 411px;
	background: url(../../img/site_tit.png) no-repeat center center;
}

/* HEAD LOGO */
.logosp a {
	position: relative;
	display: block;
	width: 100%;
	height:300px;
	text-indent:-9999px;
	background:url("../../../img/mainimg.jpg") no-repeat center center;
	background-size: cover;
}
.logosp a::after {
	display:block; clear:both; content:"";
	position: absolute; top:70px; left: 0; right: 0;
	margin: auto;
	width: 230px; height: 166px;
	background: url(../../../img/site_tit.png) no-repeat center center;
	background-size: 100% auto;
}


/*====================================================================================================
  COURSE LIST
====================================================================================================*/
#toppage .course_list { position: relative; padding:7% 0; background: #fff;}
#toppage .course_list h3 {
	margin:0 0 3%;
	width:100%;
	height:50px;
	text-indent:-9999px;
	background:url(../../img/mid_courselist.png) no-repeat center top;
}
#toppage ul.panel { margin: auto; width: 96%; max-width: 1000px; display: flex; justify-content:center; flex-wrap: wrap; gap:20px 2%;}
#toppage ul.panel + ul.panel { margin-top:20px;}
#toppage ul.panel li { width:32%;}
#toppage ul.panel li a {
	display: block;
	padding:8% 0 13%;
	font-weight: bold;
	text-decoration: none;
	text-align: center;
	color: #222;
	background:rgba(0,0,0,0.05); 
	border-radius:10px;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
}
#toppage ul.panel li a b { display: block; padding:30px 0; font-size:183.5%; line-height:100%;}
#toppage ul.panel li a b span { font-size: 87.5%;}
#toppage ul.panel li a small {
	display: block;
	margin: auto;
	padding:5px 0;
	width: 130px;
	color: #fff;
	font-size: 100%;
	line-height:100%;
	background:#222;
	border-radius:20px;
	-webkit-border-radius:20px;
	-moz-border-radius:20px;
}
#toppage ul.panel li b::before {
	display:block; clear:both; content:"";
	margin: auto; width:95px; height: 95px; 
}
#toppage ul.panel li.cate1 b { padding:10px 0;}
#toppage ul.panel li.cate1 a b::before { background: url("../../img/icon_01.png") no-repeat center center;}
#toppage ul.panel li.cate2 a b::before { background: url("../../img/icon_04.png") no-repeat center center;}
#toppage ul.panel li.cate3 a b::before { background: url("../../img/icon_05.png") no-repeat center center;}
#toppage ul.panel li.cate4 a b::before { background: url("../../img/icon_06.png") no-repeat center center;}
#toppage ul.panel li.cate5 a b::before { background: url("../../img/icon_07.png") no-repeat center center;}
#toppage ul.panel li.cate1 a:hover b::before { background: url("../../img/icon_01w.png") no-repeat center center;}
#toppage ul.panel li.cate2 a:hover b::before { background: url("../../img/icon_04w.png") no-repeat center center;}
#toppage ul.panel li.cate3 a:hover b::before { background: url("../../img/icon_05w.png") no-repeat center center;}
#toppage ul.panel li.cate4 a:hover b::before { background: url("../../img/icon_06w.png") no-repeat center center;}
#toppage ul.panel li.cate5 a:hover b::before { background: url("../../img/icon_07w.png") no-repeat center center;}
#toppage ul.panel li.cate1 a { color:#91BC1B; }
#toppage ul.panel li.cate1 a small { background:#91BC1B; }
#toppage ul.panel li.cate1 a:hover { background-color:#91BC1B; color: #fff;}
#toppage ul.panel li.cate1 a:hover small { color: #91BC1B; }
#toppage ul.panel li.cate2 a { color:#559414;  }
#toppage ul.panel li.cate2 a small { background:#559414; }
#toppage ul.panel li.cate2 a:hover { background-color:#559414; color: #fff;}
#toppage ul.panel li.cate2 a:hover small { color:#559414; }
#toppage ul.panel li.cate3 a { color:#B56B00;  }
#toppage ul.panel li.cate3 a small { background:#B56B00; }
#toppage ul.panel li.cate3 a:hover { background-color:#B56B00; color: #fff;}
#toppage ul.panel li.cate3 a:hover small { color:#B56B00; }
#toppage ul.panel li.cate4 a { color:#FFB60F; }
#toppage ul.panel li.cate4 a small { background:#FFB60F; }
#toppage ul.panel li.cate4 a:hover { background-color:#FFB60F; color: #fff;}
#toppage ul.panel li.cate4 a:hover small { color: #FFB60F; }
#toppage ul.panel li.cate5 a { color:#da9107; }
#toppage ul.panel li.cate5 a small { background:#da9107; }
#toppage ul.panel li.cate5 a:hover { background-color:#da9107; color: #fff;}
#toppage ul.panel li.cate5 a:hover small { color: #da9107; }
#toppage ul.panel li a:hover small { background:#fff;}