@charset "utf-8";
@media (max-width: 1001px) {
}
@media (max-width: 801px) {
}
@media (max-width: 481px) {
}

span.news-y { background: #bccece !important;}
span.topix-y{ background: #b7b3b1 !important;}
span.news-p { background: #dbaeac !important;}
span.topix-p{ background: #b7b3b1 !important;}

#pager .inner { position: relative; width: 80%; max-width: 300px; margin: 0 auto; padding: 0 60px;}
#pager .prev,
#pager .next { width: 60px; position: absolute; top: 50%; transform: translateY(-50%);}
#pager .prev { left: 0px;}
#pager .next { right: 0px;}
#pager .prev a,
#pager .next a { display: block; color: #000; font-weight: 300; text-align: center; text-decoration: none;}
#pager ul { font-size: 0; text-align: center;}
#pager ul li { display: inline-block; width: 30px; font-size: 18px; font-weight: 300; line-height: 1;}
#pager ul li span,
#pager ul li a { display: block; width: 20px; height: 20px; color: #000; line-height: 20px;}
#pager ul li a { color: #000; text-decoration: none;}
#pager .prev a:hover,
#pager .next a:hover ,
#pager ul li a:hover { color: #aaa;}



#news-list .inner-sct { padding: 40px 0 80px;}
#news-list .ctn { width: 92%; max-width: 1200px; margin: 0 auto 60px;}
#news-list .ctn ul { font-size: 0px;}
#news-list .ctn li { display: inline-block; width: 25%; padding: 20px; vertical-align: top;}
#news-list .ctn li a { display: block; color: #403E2A; text-decoration: none; transition: 0.3s ease;}
#news-list .ctn li a dl dt { position: relative; margin-bottom: 25px; overflow: hidden;}
#news-list .ctn li a dl dt span { display: block; width: 100%; padding-top: 100%; background: #DFDDDC;}
#news-list .ctn li a dl dt span img { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); max-height: 100%; }
#news-list .ctn li a dl dt span img.logo { width: 80%; height: auto;}
#news-list .ctn li a dl dd.cate { margin-bottom: 20px; font-size: 14px; line-height: 1;}
#news-list .ctn li a dl dd.cate span { display: block; width: 80px; padding: 4px 0px 3px; background: #eee; border-radius: 50px; color: #fff; letter-spacing: 0.1rem; text-align: center;}
#news-list .ctn li a dl dd.tit { font-size: 15px;}
#news-list .ctn li a dl dd.update { color: #BB6662; font-size: 14px;}
#news-list .ctn li a:hover { opacity: 0.5;}
@media (max-width: 1001px) {
	#news-list .ctn li { display: inline-block; width: 33.33334%;}
}
@media (max-width: 641px) {
	#news-list .ctn li { display: inline-block; width: 50%; padding: 12px;}
}
@media (max-width: 481px) {
	#news-list .inner-sct { padding: 20px 0 60px;}
}


#news .inner-sct { padding: 40px 0 80px;}
#news article { width: 88%; max-width: 1000px; margin: 0 auto 50px;}
#news article .article-hd { margin: 0 auto 20px; padding-bottom: 20px; border-bottom: solid 1px #000;}
#news article .article-hd p { margin-bottom: 30px;}
#news article .article-hd p time,
#news article .article-hd p span { display: inline-block; margin-right: 10px; line-height: 1.2; vertical-align: middle;}
#news article .article-hd p span { padding: 3px 20px 2px; background: #eee; border-radius: 50px; line-height: 1.2; color: #fff;}
#news article .article-hd p span {}
#news article .article-hd h2{ font-size: clamp(16px,2.5vw,25px); font-weight: 700; letter-spacing: 0.05rem; line-height: 1.4;}
#news article .article-ctn{ margin: 0 auto; padding: 40px 0;}
#news article figure.main-img { width: 100%; max-width: 1000px; margin: 0 auto 60px; text-align: center;}
#news article figure.main-img img { width: auto; max-width: 100%;}
#news article .article-ctn p { margin-bottom: 30px;}
#news article .article-ctn p:last-child { margin-bottom: 0px;}
#news article .article-ctn figure { margin-bottom: 30px; text-align: center;}
#news article .article-ctn figure img { width: auto; max-width: 100%;}
@media (max-width: 481px) {
	#news .inner-sct { padding: 20px 0 60px;}
	#news article figure.main-img { margin-bottom: 30px;}
	#news article .article-ctn p { margin-bottom: 20px;}
	#news article .article-ctn figure { margin-bottom: 20px;}
}


#column-list .inner-sct { padding: 40px 0 80px;}
#column-list .ctn { width: 92%; max-width: 1200px; margin: 0 auto 60px;}
#column-list .ctn ul { font-size: 0px;}
#column-list .ctn li { display: inline-block; width: 33.33334%; padding: 20px; vertical-align: top;}
#column-list .ctn li a { display: block; color: #403E2A; text-decoration: none; transition: 0.3s ease;}
#column-list .ctn li a dl dt { position: relative; margin-bottom: 25px; overflow: hidden;}
#column-list .ctn li a dl dt span { display: block; width: 100%; padding-top: 80%;}
#column-list .ctn li a dl dt span img { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); height: 100%; max-height: 100%; }
#column-list .ctn li a dl dt span img.logo { width: 80%; height: auto;}
#column-list .ctn li a dl dd.cate { margin-bottom: 20px; font-size: 12px; line-height: 1;}
#column-list .ctn li a dl dd.cate span { display: block; width: 80px; padding: 8px 0px; background: #eee; border-radius: 50px; color: #fff; text-align: center;}
#column-list .ctn li a dl dd.tit { display: block; font-size: 18px; font-weight: 600;}
#column-list .ctn li a dl dd.excerpt { font-size: 15px;}
#column-list .ctn li a dl dd.update { color: #BB6662; font-size: 14px;}
#column-list .ctn li a:hover { opacity: 0.5;}
@media (max-width: 801px) {
	#column-list .ctn li { display: inline-block; width: 50%; padding: 12px;}
}
@media (max-width: 481px) {
	#column-list .inner-sct { padding: 20px 0 60px;}
	#column-list .ctn { margin: 0 auto 40px;}
	#column-list .ctn li a dl dt { margin-bottom: 12px;}
}


#column .inner-sct { padding: 40px 0 80px;}
#column article { width: 100%; margin: 0 auto 50px;}
#column article .article-hd { width: 88%; max-width: 1000px; margin: 0 auto 20px; padding-bottom: 20px;}
#column article .article-hd h2 { color: #403E2A;  font-size: clamp(16px,2.8vw,28px); font-weight: 700; letter-spacing: 0.05rem; line-height: 1.4; text-align: center;}
#column article figure.main-img { width: 100%; max-width: 1000px; margin: 0 auto 60px; text-align: center;}
#column article figure.main-img img { width: auto; max-width: 100%;}
#column article .article-ctn { width: 88%; max-width: 1000px; margin: 0 auto; padding: 40px 0;}
#column article .article-ctn p { margin-bottom: 30px;}
#column article .article-ctn p:last-child { margin-bottom: 0px;}
#column article .article-ctn figure { margin-bottom: 30px; text-align: center;}
#column article .article-ctn figure img { width: auto; max-width: 100%;}
@media (max-width: 481px) {
	#column .inner-sct { padding: 20px 0 60px;}
	#column article .article-hd { margin-bottom: 10px; padding-bottom: 10px;}
	#column article .article-hd h2 { font-size: 15px; text-align: left;}
	#column article figure.main-img { margin: 0 auto;}
	#column article .article-ctn p { margin-bottom: 20px;}
	#column article .article-ctn figure { margin-bottom: 20px;}
}



#course-list .inner-sct { padding: 40px 0 80px;}
#course-list .ctn { width: 92%; max-width: 1200px; margin: 0 auto 60px;}
#course-list .ctn ul { font-size: 0px;}
#course-list .ctn li { display: inline-block; width: 33.33334%; padding: 20px;}
#course-list .ctn li a { display: block; color: #000; text-decoration: none;}
#course-list .ctn li a dl dt { position: relative; margin-bottom: 15px;}
#course-list .ctn li a dl dt span { display: block; width: 100%; padding-top: 65%; overflow: hidden; background: #eee;}
#course-list .ctn li a dl dt span img { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 100%;}
#course-list .ctn li a dl dt span img.logo { width: 72%; height: auto;}
#course-list .ctn li a dl dd.update { margin-bottom: 10px; font-size: 14px;}
#course-list .ctn li a dl dd.update time { display: inline-block; margin-right: 10px; color: #000;}
#course-list .ctn li a dl dd.update span { display: inline-block; padding: 0px 10px; background: #c5a600; border-radius: 50px; color: #fff; text-align: center;}
#course-list .ctn li a dl dd.tit { font-size: 16px;}
@media (max-width: 1001px) {
	#course-list .ctn li { padding: 12px;}
}
@media (max-width: 801px) {
	#course-list .ctn li { width: 50%;}
}
@media (max-width: 641px) {
	#course-list .ctn li a dl dd.update { margin-bottom: 6px; font-size: 12px;}
}
@media (max-width: 481px) {
	#course-list .ctn li { width: 100%; padding: 12px 0;}
	#course-list .ctn li a dl dd.update { margin-bottom: 6px;}
}


#curriculum .inner-sct { padding: 80px 0;}
#curriculum article { width: 88%; max-width: 1000px; margin: 0 auto 80px;}
#curriculum article .article-hd { margin: 0 auto; padding-bottom: 18px; border-bottom: solid 1px #000;}
#curriculum article .article-hd p { margin-bottom: 20px;}
#curriculum article .article-hd p time { display: inline-block; margin-right: 10px; line-height: 1.2;}
#curriculum article .article-hd p span { display: inline-block; margin-right: 10px; padding: 2px 10px; background: #c5a600; border-radius: 50px; line-height: 1.2; color: #fff;
}
#curriculum article .article-hd h2 { font-size: 25px; font-weight: 700; line-height: 1.4;}
#curriculum article figure.main-img { width: 100%; max-width: 1000px; margin: 0 auto 60px; text-align: center;}
#curriculum article figure.main-img img { width: auto; max-width: 100%;}
#curriculum article .article-ctn { margin: 0 auto; padding: 20px 0;}
#curriculum article .article-ctn p { margin-bottom: 30px;}
#curriculum article .article-ctn p:last-child { margin-bottom: 0px;}
#curriculum article .article-ctn a { color: #000;}
#curriculum article .article-ctn a:hover { text-decoration: none;}
#curriculum article .article-ctn figure { margin-bottom: 30px; text-align: center;}
#curriculum article .article-ctn figure img { width: auto; max-width: 100%;}
@media (max-width: 481px) {
	#curriculum .inner-sct { padding: 40px 0;}
	#curriculum article .article-hd h2 { font-size: 18px;}
	#curriculum article .article-ctn p { margin-bottom: 20px;}
	#curriculum article .article-ctn figure { margin-bottom: 20px;}
}