.flex{
	display: flex;
}



.card {
width: 326px;
max-width: 39vw;

}

.card a .imgbox {
	padding-top: 56.25%;
}

.card .teacher{
	position: relative;
	padding-top: 2rem;
}
.card .teacher img{
	position: absolute;
	border-radius: 50%;
	width:5rem;
	top: -30px;
	left: 10px;
	border: 1px solid #fff;
}

.card .teacher p{
	position: absolute;
	top: 0;
	left: 6.5rem;
	font-weight:normal;
	margin: 0;
	font-size: 1.2rem;
}

.card.instructor a .imgbox {
	padding-top: 100%;
}

	#modal .movie_contents{
		position: relative;
		width: 100%;
		padding-top: 56.25%
	}
	#modal .movie_contents iframe{
		position: absolute;
		top: 0;
		right: 0;
		width: 100%;
		height: 100%;
	}
	#modal .prof_contents{
		padding: 10px;
	}
	
	#modal .prof_contents .prof{
		font-size: 1.4rem
	}
	#modal .prof_contents .prof h2{
		font-size: 1.6rem
	}

.list dl.tbl>dt{
	position: relative;
	border: 1px solid #ddd;
	border-bottom: 0px solid #ddd;
	font-weight: normal;
	text-align: left;
	padding: 5px 0px 5px 10px;
	line-height: 2em;
	color:#111;
	font-size:14px;
	background: rgba(0,128,0,.4);
	background-repeat: no-repeat;
	background-position:  right center;
}

.list dl.tbl>dd{
	border: 1px solid #ddd;
	padding: 5px;
	line-height: 2em;

}
.list dl.tbl>dd{
	border: 1px solid #ddd;
	padding: 5px;
	line-height: 2em;

}
.list dl.tbl{
	width: 100%;
	display: flex;
	flex-direction: row;
}
	
.list dl.tbl>dt{
	position: relative;
	width: 8em;
	padding: 10px;
}
.list dl.tbl>dd{
	position: relative;
	width: calc(100% - 8em);
	padding: 10px;
}

.list dl.tbl>dd ul{
	list-style-type: none;
}

.list dl.tbl>dd ul li{
	display: block;
	margin-right: 1em;
}





@media (min-width: 768px) {
	.course_flex{
		display: flex;
		flex-direction: row;

		justify-content: space-between;
	}
	.ph{
		display: block;
		width: calc(100% - 520px);
		min-width: 49%;
		margin: 10px;
		position: relative;
		overflow: hidden;
	}
	
	.ph img{
		display: block;
		width: 100%;
		height:calc(100% - 10px);
		margin: 0 0 0px;
		object-fit: cover;
	}
	
	#main .course_flex .category{
		display: block;
		width: 500px;
		max-width: 49%;
	}
	.flex{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}
	
.list dl.tbl>dd ul li{
	display: inline-block;
	margin-right: 1em;
}
	
	
	
	.card {
		width: 239px;
		max-width: calc((100% - 60px) / 3);

	}

	#modal .prof_contents{
		display: flex;
		padding: 10px;
	}
	
	#modal .prof_contents .prof{
		font-size: 1.4rem
	}
	#modal .prof_contents .prof h2{
		font-size: 1.6rem
	}
	
	
}