@charset "utf-8";

/* 国分寺校のインストラクターページ用のcss
https://www.namelessproduction.com/kokubunji/instructor_test.html
*/

#showlist {
	margin:0;
	padding:0;
	position:relative;
  width: 980px;
	margin-bottom: -130px;
}
#showlist ul {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
}
#showlist ul li {
	width:220px;
	list-style:none;
	margin-left: 18px;
	margin-bottom: 20px;
}
#showlist ul li img{
	width:220px;
	height:220px;
	margin:0;
	padding:0;
}
#showlist li a {
	width:220px;
	height:220px;
	margin:0;
	padding:0;
	display:block;
	position:relative;
	text-decoration:none;
	border:4px solid #ffffff;
}
#showlist li a:hover {
	border:4px solid #db4e03;
}
#showlist li.orange a:hover {
	border:4px solid #fda700;
}
#showlist li.green a:hover {
	border:4px solid #78be09;
}
#showlist li.pink a:hover {
	border:4px solid #f01e8a;
}
#showlist li.blue a:hover {
	border:4px solid #3069ff;
}
#showlist li.lightblue a:hover {
	border:4px solid #7ccde1;
}
#showlist li.yellow a:hover {
	border:4px solid #ffea00;
}
#showlist li.red a:hover {
	border:4px solid #fd3131;
}

#showlist .bgTop{
	width:256px;
	height:146px;
	position:absolute;
	top:0; left:0;
	border:0;
	z-index: 1;
}

#showlist .moveArea{
	width:220px;
	height:90px;
	overflow:hidden;
	position:absolute;
	top:130px; left:0;
}
#showlist li .movebox{
	width:220px;
	position:absolute;
	top:0; left:0;
}
#showlist li .movebox span{
	word-break: break-all !important;
}

#showlist li .movebox .title{
	position:absolute;
	top:5px; left: 5px;
	border:0;
	z-index: 3;
	color: #ffffff;
	line-height: 19px;
	font-weight: bold;
	font-size:20px;
	text-align: left !important;
}
#showlist li .movebox .desc{
	font-size:16px;
	font-weight: bold;
	line-height:15px;
	padding:0 5px;
	position:absolute;
	top:66px; left:0;
	z-index: 2;
	color: #ffffff;
	white-space: nowrap;
}
#showlist .ie7 {
	display: none;
}