/*
 * base css 
 * pc width 1000px fixed
 */

@media (max-width: 599px) {
}

@media (min-width: 600px) and (max-width:959px) {
}

@media (min-width: 960px) {
}

@media (max-width: 480px) {
}

@media (min-width: 481px) and (max-width:767px) {
}

@media (min-width: 768px) and (max-width:959px) {
}

@media (min-width: 960px) {
}


/* ---------------------------------------- common */

main { padding: 6em 0 0; }

/* ---------------------------------------- course */

#course { 
	padding: 0 2em; 
	margin: 0 0 8em;
}
#course h3 {
	display: flex;
	justify-content: center;
	align-items: center;
	color: var( --orange-color );
	line-height: 1.4;
	text-align: center;
	margin: 0 0 2em;
}
#course h3 img { margin: 0 .5em 0 0; }
#course ul {
	display: flex;
	flex-wrap: wrap;
	
}
#course ul li { position: relative; }
#course ul li .accepting {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 4.8em;
	aspect-ratio: 1;
	color: #fff;
	background: var( --orange-color );
	border-radius: 100%;
	position: absolute;
	top: -1em;
	left: -1.5em;
}
#course ul li a { 
	display: block;
	-webkit-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}
#course ul li a:hover { opacity: .5; }
#course ul li a img { vertical-align: text-top; }
#course ul li a figcaption { 
	line-height: 1,4;
	margin: .5em 0 0;
}
#course .pagelink { margin: 3em 0 0; }

@media (max-width: 767px) {

	#course h3 { font-size: var( --sp-h3 ); }

}

@media (min-width: 768px) {

	#course h3 { font-size: var( --pc-h3 ); }

}

@media (max-width: 480px) {

	#course ul { 
		justify-content: center;
		gap: 6em 10%; 
	}
	#course ul li { width: 90%; }

}

@media (min-width: 481px) and (max-width:767px) {

	#course ul { gap: 4em 10%; }
	#course ul li { width: 45%; }

}

@media (min-width: 768px) and (max-width:959px) {

	#course ul { gap: 5em 10%; }
	#course ul li { width: 45%; }

}

@media (min-width: 960px) {

	#course ul { gap: 6em 10.5%; }
	#course ul li { width: 26.333333333%; }

}