@charset "UTF-8";
/* CSS Document */

@media(max-width: 1366px) {
	#completion .example1::after,
	#completion .example2::after{
		background-size: cover;
	}
}
@media(max-width: 1000px) {
	.package .flex{
		flex-flow: column;
		align-items: center;
	}
	#sample section{
		width: 100%;
		max-width: 500px;
	}
	.package-box{
		width: 100%;
		max-width: 500px;
	}
	.package .flex{
		gap: 30px;
	}
	#e_learning-top .lp-course_grid{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	#package02 .package-box{
		width: 90%;
		margin: 0 auto;
	}
	#footer-menu .footer-menu-inner .flex{
		flex-flow: column;
		align-items: center;
	}
	#footer-menu .footer-menu-inner {
		width: 100%;
		max-width: 500px;
		margin: 0 auto;
	}
	#footer-menu .footer-menu-inner .widget_media_image{
		margin-top: 30px;
	}
	#footer-menu .footer-menu-inner .widget_media_image:first-child{
		margin-top: 0;
	}
	.course-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
	.course-search_list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
	.course-archive .course-grid{
		gap: 20px;
	}
}
@media(min-width: 768px) {
	.sp_only{
		display: none;
	}
}
@media(max-width: 767px) {
	.pc_only{
		display: none;
	}
	header .btn{
		padding: 10px 30px;
		line-height: 1.2;
	}
	header img{
		width: 150px;
		height: auto;
		margin-left: 0;
	}
	h2{
		margin-bottom: 80px;
		line-height: 1.6;
	}
	header a{
		padding: 10px 20px;
	}
	#hero{
		margin-bottom: 80px;
	}
	#worries,
	.package,
	#lp-course,
	#completion{
		margin: 80px auto 0;
	}
	#reason{
		margin: 170px auto 0;
		padding-bottom: 0;
	}
	#worries ul li:before{
		width: 18px;
		height: 18px;
		margin-top: 6px;
		margin-right: 10px;
	}
	#worries ul li{
		margin-bottom: 15px;
	}
	#worries::before{
		width: 128px;
		height: 135px;
		bottom: -100px;
		top: auto;
		left: calc(50% - 115px);
	}
	#worries::after{
		width: 84px;
		height: 134px;
		bottom: -100px;
		top: auto;
		right: calc(50% - 130px);
	}
	.reason-box{
		flex-flow: column;
	}
	.reason-box section{
		width: 90%;
		margin: 0 auto;
		padding: 0;
	}
	.end .reason-box{
		align-items: flex-end;
	}
	.end .reason-box .img-wrap{
		order: 1;
	}
	#reason .end .reason-box section{
		order: 2;
	}
	.reason-box .img-wrap{
		width: 100%;
	}
	#faq{
		margin-top: 150px;
	}
	#faq dl{
		margin: 0 auto 20px;
	}
	#package02{
		padding-top: 80px;
	}
	.course-archive {
        padding: 30px 0 60px;
    }

    .course-archive__inner {
        width: calc(100% - 30px);
    }

    .course-archive__title {
        font-size: 26px;
    }

    .course-search__title,
    .course-archive__heading h2 {
        font-size: 22px;
    }

    .course-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .course-card__body {
        padding: 12px;
    }

    .course-card__title {
        font-size: 14px;
    }
	.course-search {
        padding: 15px;
    }
    .course-search_list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .course-search_item {
        font-size: 12px;
    }
	.cta a{
		width: 90%;
	}
	.cta a:after{
		right: 20px;	
	}
	#Instructor .flex{
		flex-flow: column;
	}
	#Instructor .flex img{
		margin-right: 0;
		margin-bottom: 20px;
	}
	.course-archive .course-grid{
		gap: 20px;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media(max-width: 600px) {
	#e_learning-top .lp-course_grid{
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}
	.course-grid,
	.course-archive .course-grid {
        grid-template-columns: 1fr;
    }
}
@media(min-width: 501px) {
	.sp{
		display: none;
	}
}