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


/*--------------------------- general ----------------------------*/

.clearfix::after {
    content: "";
    display: block;
    clear: both;
    height: 0;
}
.no-break {
	white-space: nowrap;
}
section {
	margin-bottom: 4rem;
}

.navbar h1 {
	font-size: 1em;
    line-height: 1;
}
.floatr-img {
    float: right;
	width: 35%;
    margin: 0 1% 1% 2%;
	height: auto;
    max-width: 100%;
}

/*--------------------------- nav ----------------------------*/


.site-title {
	margin-left: -15px;
}

@media screen and (min-width: 768px) {
	/*--- IE11 hack*/
	.nav-area {
		width: 54%;
	}
	
} /* end media query */

@media screen and (max-width: 480px) {
	.navbar .navbtn {
    	padding: 0 1%;
	}
	
} /* end media query */


/*--------------------------- header ----------------------------*/

header .main-visual {
	margin-bottom: 1em;
}
header .main-visual img {
	/* IE11 hack */
	width: 100%;
	box-shadow: 0 1px 5px #bbb;
}

/*--------------------------- news ----------------------------*/
.news {
	margin: 40px 0;
	padding: 25px 0 0;
}
.news img {
	max-width: 100%;
}
.news h3 {
	margin-bottom: 15px;/**/
}
.news figcaption {
	font-size: 12px;
	font-weight: bold;
}

/*--------------------------- main feature ----------------------------*/

.main-feature .inner-wide {
	margin: 0 -15px;
	background: url("../images/bg_recommended_sp.png") no-repeat top center;
    background-size: 100%;
}
.main-feature h3 {
	text-align: center;
    color: #ed1e79;
	/*color: #f35813;*/
    font-size: 4vw;
	font-weight: bold;
    margin: 0 0 40px;
    padding-top: 40px;
}

/*---IE11 hack*/
.main-feature .col-md-4 {
	margin: 0 15px 30px;
}
.main-feature .card {
	display: block;
	background: #fff;
}
.main-feature .card-img-top {
	margin-top: -4%;
}
.main-feature .card-title {
	margin-bottom: 0;
	padding-bottom: 0.75rem;
}


@media screen and (min-width: 768px) {
	.main-feature .inner-wide {
		background: url("../images/bg_recommended.png") no-repeat top center;
		background-size: 100%;
	}
	.main-feature h3 {		
		font-size: 2.8rem;
		margin: 0 0 40px;
		padding-top: 40px;
	}
	.main-feature .col-md-4 {
		flex: 0 0 31.33333%;
		max-width: 31.33333%;
		margin: 0 1% 30px;
	}
	
	
} /* end media query */


@media screen and (max-width: 480px) {
	
	.main-feature h3 {
    	font-size: 6vw;
	}
	
} /* end media query */


/*--------------------------- extra feature ----------------------------*/

.extra-feature {
    margin-top: -4rem;
}
.extra-feature .feature {
	margin: 0 5% 30px 10%;
	
}
.extra-feature h3 {
	text-align: center;
	color: #ed1e79;
	font-size: 3.2rem;
	background: url("../images/bg_recommended_02.png") no-repeat top center;
	background-size: 100%;
    margin: 0 0 40px;
    padding-top: 50px;
}
.extra-feature h4 {
	color: #ed1e79;
	position: relative;
	font-weight: 800;
}
.extra-feature .feature h4 small {
	font-size: 65%;
	font-weight: 800;
}
.extra-feature .feature h4::before {
	font-family: "Font Awesome 5 Free";
	content: "\f0a4";
	font-weight: 900;
	font-size: 150%;
	position: absolute;
	display: block;
	left:-10%;
	top: -5px;
}
.extra-feature .feature em {
	color: #28b9ed;
	font-weight: bold;
}

.extra-feature .premium-feature {
	padding: 5% 5% 0;
}
.extra-feature .premium-feature li {
	display: flex;
}
.extra-feature .premium-feature .card {
	background: #fff;
	padding: 5%;
	/*--IE11対策*/
	display: block;
}
.extra-feature .premium-feature img {
    display: block;
    max-width: 75%;
	width: 75%;
    margin: 0 auto 1em;
}
.extra-feature .premium-feature h5 {
	color: #ed1e79;
	font-weight: 800;
	text-align: center;
	font-size: 1rem;
}
.extra-feature .premium-feature p {
	font-size: 0.9rem;
}

@media screen and (max-width: 768px) {
	
	.extra-feature h3 {
		padding-top: 8%;
		font-size: 8vw;
	}
	
	.extra-feature .feature h4::before {
		font-size: 130%;
		top: -20px;
}
	
} /* end media query */

/*--------------------------- campaign ----------------------------*/

.campaign {
	padding: 25px 30px;
	border-top: 5px solid #67b519;
	border-bottom: 5px solid #67b519;
}
.campaign p.catch {
	text-align: center;
	font-family: "Rounded Mplus 1c";
	font-size: 2rem;
	font-weight: 600;
	margin-bottom: 0;
	color: #28b9ed;
}
.campaign h4 {
	color: #ed1e79;
	text-align: center;
	position: relative;
	margin-bottom: 30px;
	font-weight: 700;
	
}
.campaign h4 strong {
	display: block;
	font-size: 2.5rem;
	
}
.campaign h4 small {
	position: absolute;
	display: flex;
	background: #ed1e79;
	line-height: 1.2;
    padding: .5em;
    width: 120px;
	height: 120px;
	font-size: 1.8rem;
	bottom: 0;
	right: 5%;
	/*width: 160px;
	height: 160px;
	font-size: 1.6rem;
	bottom: -20px;
	right: 2%;*/
    border-radius: 50%;
    color: white;
    font-weight: bold;
	
    
	transform: rotate(10deg);
	justify-content: center;
    align-items: center;
}
.campaign em {
	color: #28b9ed;
	font-weight: bold;
	font-style: normal;
}
.campaign dl {
	margin-top: 25px;
	font-size: .93rem;
}
.campaign dl dt {
	color: #ed1e79;
	font-weight: bold;
	font-size: 120%;
	margin-bottom: 0.5em;
}
.campaign dl dd {
	margin-bottom: 0.2em;
	margin-left: 0.5em;
	padding-left: 1em;
    text-indent: -1em;
}
.campaign dl dd::before {
	content: "・";
}


@media screen and (max-width: 992px) {
	
	.campaign h4 small {
		position: static;
		display: inline-block;
		width: auto;
		height: auto;
		border-radius: 8%;
		font-size: 1rem;
		transform: rotate(0);
	}

	.campaign h4 small br {
		display: none;
	}
	
} /* end media query */

@media screen and (max-width: 768px) {
	
	.campaign {
	padding: 25px 20px;
	}
	.campaign p.catch {
    	font-size: 1.2rem;
	}
	.campaign h4 strong {
    	font-size: 110%;
	}
	
	
} /* end media query */


/*--------------------------- courses ----------------------------*/


.courses h3 {
	text-align: center;
	color: #67b519;
	font-size: 3.5rem;
	background: url("../images/bg_course_introduction_v2.png") no-repeat bottom center;
	background-size: 100%;
    margin: 0;
	padding-bottom: 4%;
    padding-top: 2%;
}

.course-intro {
	padding: 30px 20px;
	margin-bottom: 40px;
	color: #ed1e79;
	font-family: "Rounded Mplus 1c";
}

.course-intro.by-purpose-english {
	color: #28b9ed;
}
.course-intro.kids-english {
	color: var(--orange);
}

.course-intro ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.course-intro h4 {
	text-align: center;
	font-size: 3.8rem;
	margin-bottom: 25px;
	font-feature-settings: "palt";
}
.course-intro p.bg-lightgray {
	font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color: #000;
	margin-bottom: 0;
	border-radius: 10px;
}
.course-intro .course-plan {
	text-align: center;
	margin: 20px 0;
	padding: 0;
}
.course-intro .course-plan > li {
	border-bottom: 1px solid lightgray;
	padding: 1em 0;
}
.course-intro .course-plan > li:last-child {
	border-bottom: 3px solid #c6dfa4;
	padding-bottom: 1.5em;
}
.course-intro .course-plan h5 {
	font-size: 1.6rem;
	font-weight: 600;
	margin-bottom: 0;
}
.course-intro .course-plan .price {
	font-size: 2.3rem;
	font-weight: 600;
	line-height: 1.1;
	font-feature-settings: "palt";
}
.course-intro .course-plan .price strong {
	font-size: 185%;
	font-weight: 800;
	margin-right: -.3em;
	margin-left: 3px;
	position: relative;
	bottom: -5px;
}
.course-intro .course-plan .price small {
	font-size: 1.5rem;
	font-weight: 700;
}

.course-intro .plan-feature li {
	
	padding: 0 .5em;
	color: #67b519;
	font-size: 1.4rem;
	font-weight: 600;
	line-height: 1.4;
	display: flex;
}
.course-intro .plan-feature li>div {
	background: #ddedf5;
	border-radius: 10px;
	width: 100%;
	margin-bottom: 1em;
	display: flex;
	justify-content: center;
  	align-items: center;
	position: relative;
	padding: 15px;
}
.course-intro .plan-feature li>div::after {
	position: absolute;
    bottom: -17px;
    left: 52%;
    z-index: 90;
    margin-left: -17px;
    border-top: 17px solid #ddedf5;
    border-left: 17px solid transparent;
    border-right: 17px solid transparent;
    border-bottom: 0;
    content: "";
}


@media (min-width: 992px) {
	.course-intro .plan-feature {
		padding: 0;
	}	
}

@media screen and (max-width: 768px) {
	
	.courses h3 {
		padding-bottom: 7%;
		padding-top: 0%;
		font-size: 8vw;
	}
	
} /* end media query */


@media screen and (max-width: 576px) {
	.course-intro {
		/*margin-right: 1em;
		margin-left: 1em;*/
		width: 90%;
	}
	
} /* end media query */

/*----- option */
.course-intro .plan-option {
    justify-content: center;
	color: #67b519;
	font-weight: 600;
	margin-bottom: 30px;
}
.course-intro .plan-option .option-contents {
	margin: 0.5em;
	display: flex;
	
}
.course-intro .plan-option h5 {
	margin: 0.5em;
	display: flex;
	justify-content: center;
  	align-items: center;
	font-size: 1.5rem;
	font-weight: 600;
	flex-direction: column;
	line-height: 1;
}
.course-intro .plan-option h5::before {
	font-family: "Font Awesome 5 Free";
    content: "\f0a6";
    font-weight: 900;
    font-size: 350%;
    display: inline-block;
	margin-bottom: 6px;
}
.course-intro .plan-option .option-contents > * {
	display: flex;
	justify-content: center;
  	align-items: center;
	margin: 0 0.5em 0.5em;
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.3;
    padding: .5em;
    border-radius: 10px;
}
.course-intro .plan-option .option-item {
	background: #ddedf5;
	
}
.course-intro .plan-option .option-item small {
	font-size: 60%;
	font-weight: 800;
}
.course-intro .plan-option .option-item strong {
	/*display: block;*/
	font-size: 140%;
	font-weight: 700;
}
.course-intro .plan-option .option-catch {
	background: #67b519;
	color: #fff;
	margin-left: 2em;
	text-align: center;
	position: relative;
	line-height: 1.5;
}
.course-intro .plan-option .option-catch::before {
	content: '';
	position: absolute;
	display: block;
	width: 0;
	height: 0;
	left: -28px;
	top: 33%;
	border-right: 30px solid #67b519;
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
	
}

/*----- links to detail */

.link-to-detail .row {
	justify-content: space-around;
}
.link-to-detail .row li {
	width: 360px;
	margin-bottom: .5em;
}

.link-to-detail a.btn {
    display: block;
    border-radius: 8px;
    
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.3;
	white-space: normal;
}
.link-to-detail a.btn small {
	font-size: 1rem;
	font-weight: 800;
}




@media screen and (max-width: 768px) {
	
	.course-intro h4 {
    font-size: 7vw;
	}
	.course-intro .course-plan {
    	margin-top: 0;
	}
	.course-intro .course-plan .price {
    	font-size: 1.5rem;
		margin-top: -10px;
		line-height: 1.3;
	}
	.course-intro .plan-option h5::before {
		font-size: 250%;
	}
	.course-intro .plan-option .option-contents {
		margin: 0;
		display: block;
	}
	.course-intro .plan-option .option-contents > * {
		font-size: 1.2rem;
	}
	.course-intro .plan-option .option-catch {
		margin-left: 0;
		margin-top: 1.5em;
	}
	.course-intro .plan-option .option-catch::before { 
		left: 43%;
		top: -48px;
		border-bottom: 30px solid #67b519;
		border-right: 20px solid transparent;
		border-left: 20px solid transparent;
	}
	
} /* end media query */

@media screen and (max-width: 450px) {
	
	.course-intro h4 {
    font-size: 10vw;
	}
	
	.course-intro .course-plan h5 {
    	font-size: 9vw;
		margin-bottom: 0;
	}
	.course-intro .course-plan .price {
    	font-size: 6vw;
	}
	.course-intro .plan-feature li {

 	   font-size: 5vw;
	}
	.link-to-detail a.btn {
		font-size: 1.2rem;
	}
	
} /* end media query */




/*--------------------------- 目的別コース ----------------------------*/

/*---- corse list */

.overview-list {
    margin-top: 30px;
}
.overview-list ul {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 0;
	justify-content: space-around;
}
.overview-list ul > li {
	background: #28b9ed;
	color: #fff;
	border-radius: 8px;
	width: 46%;
	min-width: 310px;
    margin: 0 1.5% 20px;
    
	
}
.overview-list ul > li > a:link,
.overview-list ul > li > a:visited {
	color: #fff;
	display: block;
}
.overview-list ul > li > a:hover,
.overview-list ul > li > a:active {
	text-decoration: none;
}
.overview-list ul > li > a dl {
	border-radius: 8px;
	margin-bottom: 0;
	display: flex;
	align-items: center;
}

.overview-list ul > li > a:link dl,
.overview-list ul > li > a:visited dl {
	background: none;

}
.overview-list ul > li > a:hover dl,
.overview-list ul > li > a:active dl {
	background: #51B3E2;
}

.overview-list ul > li dl dt {
	margin: 0;
	width: 37%;
	max-width: 185px;
}
.overview-list ul > li dl dd {
	padding: 0 10px;
	line-height: 1.4;
	font-size: 2vw;
    font-weight: 600;
}

.overview-list ul > li dl dd small {
	font-size: 68%;
	font-weight: inherit;
	letter-spacing: -0.05em;
}
.overview-list ul > li dl dt img {
	max-width: 100%;
	display: block;
	border-radius: 8px 0 0 8px;
	border: 3px solid rgba(32,171,140,0);
}

@media screen and (min-width:1200px) {
	.overview-list ul > li dl dd {
		font-size: 1.8rem;
	}
	
} /* end media query */

@media screen and (max-width: 768px) {
	
	.overview-list ul > li {
		width: 80%;
		min-width: 200px;
	}
	.overview-list ul > li dl dd {
    	font-size: 3.4vw;
	}
	
} /* end media query */

@media screen and (max-width: 450px) {
	
	.overview-list ul > li dl dd {
    	font-size: 4vw;
	}
	
} /* end media query */



/*--------------------------- CTAボタン ----------------------------*/

.cta-links .row {
	margin-right: 0;
	margin-left: 0;
}

/*--------------------------- Q&A ----------------------------*/

.border-a p:last-child {
    margin-bottom: 0;
}

/*--------------------------- 運営者情報 ----------------------------*/

.management-logo {
	max-width: 250px;
}