@charset "UTF-8";

/* mv */
#mv .slider { margin-bottom:15px; }
#mv .buttons { padding:15px 0; background:#f3f9fe; }
#mv .buttons ul { display:flex; justify-content:center; }
#mv .buttons ul li + li {margin-left: 23px;}

.top_box h2 { padding:35px 5% 15px; text-align:center; line-height:1.2; }
.top_box h2 .en { display:block; font-size:24px; font-weight:bold; color:#44aeea; }
.top_box h2 .serif { font-size:15px; }
.top_box .bg { padding:35px 0 25px; }

/* about */
#about .bg { background:#f9f8f7; }
#about .lead { margin-bottom:30px; text-align:center; font-size:23px; font-weight:normal; letter-spacing:-0.05em; line-height:1.4; }
#about .lead span { display:inline-block; padding-bottom:5px; border-bottom:1px solid #251e1c; }
#about p.serif { text-align:center; font-size:19px; line-height:2.4; letter-spacing:-0.05em; }
#about p.serif + p { font-size:15px; }
#about p .blue { color:#4b62a9; }
/*#about p .underline { background:linear-gradient(transparent 70%, #fff000 0%); }*/
#about .photo { /*display:flex; justify-content:center;*/ position:relative; margin:40px 0 15px; }
#about .photo li { margin:2px; }
.slick-arrow {
	position:absolute; top:50%; margin-top:-13px; left:50%; width:30px; height:30px;
	background:#44aeea; color:#fff; border:0; border-radius:0; cursor:pointer; z-index:2; }
.slick-arrow:hover { background:#99ccf2; }
#about .slick-prev { left:-40px; }
#about .slick-next { left:auto; right:-40px; }
#about .btn a { border:1px solid #4b62a9; color:#4b62a9; }
#about .btn a:before { border-left-color:#4b62a9; }
#about .btn a:hover { background:#4b62a9; color:#fff; }
#about .btn a:hover:before { border-left-color:#fff; }

/* course */
#course .bg { background:#f3f9fe; }
#course .con { display:flex; justify-content:space-between; }
#course .license, #course .course { width:48%; }
#course .title { display:flex; justify-content:space-between; margin-bottom:15px; padding-bottom:10px; border-bottom:2px solid #fff; }
#course h3 { font-size:18px; font-weight:normal; color:#44aeea; }
#course .btn a { border:1px solid #44aeea; color:#44aeea; }
#course .btn a:before { border-left-color:#44aeea; }
#course .btn a:hover { background:#44aeea; color:#fff; }
#course .btn a:hover:before { border-left-color:#fff; }
#course .course_list { padding:15px; font-size:12px; background:#fff; }
#course .course_list li + li { border-top:1px solid #ccc; }
#course .course_list li a { display:block; width:100%; height:100%; padding:10px; color:#251e1c; }
#course .course_list li a:hover { background:#fafafa; }
#course .course_list .new { padding:0 10px; font-size:9px; background:#fff000; vertical-align:2px; }
#course .btn_blue { margin-top:15px; text-align:center; }
#course .btn_blue a { display:block; padding:8px; font-size:15px; border-bottom:0; }

/* topics */
#topics .bg { background:#f9f8f7; }
#topics .topics { position:relative; }
#topics .article { display:flex; justify-content:flex-start; width:850px; z-index:1; }
#topics .article:not(.slick-current) { opacity:0.5; }
#topics .article .img { width:350px; margin-right:50px; flex-shrink:0; }
#topics .article .txt { padding-right:20px; }
#topics .article h3 { margin-bottom:30px; font-size:19px; font-weight:normal; letter-spacing:-0.05em; }
#topics .article h3 span { padding-bottom:3px; border-bottom:1px solid #251e1c; }
#topics .article .detail { margin-bottom:25px; font-size:13px; line-height:1.8; }
#topics .slick-prev { margin-left:-440px; }
#topics .slick-next { margin-left:410px; }

/* news */
#news h2 { padding-bottom:0; }
#news .exp { text-align:center; font-size:15px; }
#news .exp .news { color:#eabf55; }
#news .exp .seminar-free { color:#c6c9e4; }
#news .exp .seminar { color:#ebc8dc; }
#news .news_list { border-top:1px solid #b6e4f8; }
#news .news_list li { border-bottom:1px solid #b6e4f8; }
#news .news_list a { display:flex; width:100%; height:100%; padding:20px 50px; justify-content:flex-start; color:#251e1c; }
#news .news_list a:hover { background:#f3fbff; }
#news .news_list a > div + div { margin-left:25px; }
#news .news_list .cat span { display:inline-block; width:85px; height:20px; text-align:center; line-height:20px; font-size:10px; vertical-align:1px; }
#news .news_list .news { background:#eabf55; }
#news .news_list .seminar-free { background:#c6c9e4; }
#news .news_list .seminar { background:#ebc8dc; }
#news .more { margin-top:10px; }
#news .more a { font-weight:normal; }

@media (min-width: 1001px) {
	#about .lead br { display:none; }
}
@media (max-width: 1000px) {
	#mv .buttons ul li { width:32%; }
	
	#about .slick-prev { left:-4%; }
	#about .slick-next { left:auto; right:-4%; }
	
	#topics .article { width:600px; }
	#topics .article .img { width:40%; margin-right:20px; }
	#topics .article h3 { margin-bottom:20px; font-size:17px; }
	#topics .article .detail { margin-bottom:15px; font-size:12px; }
	#topics .slick-prev { margin-left:-315px; }
	#topics .slick-next { margin-left:285px; }
}
@media (min-width: 769px) {
}
@media (max-width: 768px) {
	#about .lead { font-size:21px; }
	#about p.serif + p { font-size:14px; }
	
	#course .con { display:block; }
	#course .license, #course .course { width:100%; }
	#course .course { margin-top:30px; }
	#course .course_list { display:block; width:100%; }
}
@media (max-width: 700px) {
	#mv .buttons ul { display:block; }
	#mv .buttons ul li { width:100%; text-align:center; }
	#mv .buttons ul li + li { margin-top:5px; margin-left: 0; }
	
	#course .title { padding-bottom:5px; }
	
	#topics .slick-prev { margin-left:0; left:0; }
	#topics .slick-next { margin-left:0; left:auto; right:0; }
}
@media (max-width: 600px) {
	.top_box h2 .en { font-size:20px; }
	.top_box h2 .serif { font-size:14px; }
	
	#about p.serif { font-size:16px; line-height:1.8; }
	#about p.serif + p { font-size:13px; }
	
	#course h3 { font-size:16px; }

	#topics .article { display:block; width:100vw; padding:0 10vw; }
	#topics .article .img { width:100%; margin:0 0 15px 0; text-align:center; }
	#topics .slick-slide img { display:inline; }
	#topics .article .txt { padding:0; }

	#news .exp { font-size:13px; }
	#news .news_list a { padding:14px 20px; }
}
@media (max-width: 400px) {
	#about .lead { font-size:17px; }
	
	#news .news_list a { flex-wrap:wrap; padding-left:0; padding-right:0; }
	#news .news_list .cat { margin-left:10px; }
	#news .news_list .cat span { width:70px; height:18px; line-height:18px; font-size:9px; }
	#news .news_list .title { width:100%; margin:5px 0 0; }
}