@charset "utf-8";



/**************************************************
 Responsive
**************************************************/
@media screen and (max-width: 690px){
	
a:focus{outline: none;}

br.smp{display: block;}
br.pc{display: none;}
	
.blockskip a{
	padding: 10px;
	font-size: 1.4rem;
}
	
.blockskip a{
	padding: 10px;
	font-size: 1.6rem;
}



/**************************************************
 header
**************************************************/
header h1{padding: 15px 0 0 15px;}
header h1 img{width: 35%;}
	
	
	
/**************************************************
 heroArea
**************************************************/
.heroArea{
	height: 78vh;
	min-height: auto;
}

.heroCopy{top: 20%;}
.heroCopy small{
	font-size: 5.2vw;
	letter-spacing: 0.05em;
}
.heroCopy strong{
	font-size: 10.0vw;
	letter-spacing: 0.05em;
	margin: 15px 0 60px 0;
}
.heroCopy strong::before{
	width: 60px;
	height: 4px;
	left: calc(50% - 30px);
	bottom: -35px;
}
.heroCopy span{
	font-size: 4.5vw;
	letter-spacing: 0.1em;
	line-height: 1.4;
}
	
	
	
/**************************************************
 infoArea
**************************************************/
.infoArea{margin-top: -30px;}
.infoArea::before{height: calc(100% - 29px);}
.infoArea ul{
	width: 100%;
	padding: 0 20px;
}
.infoArea ul li{
	width: calc(100% / 3);
	height: 40vw;
	padding-bottom: 2.5vw;
}
.infoArea ul li span{
	font-size: 4.5vw;
	padding-bottom: 30px;
}
.infoArea ul li span::before{
	width: 40px;
	left: calc(50% - 20px);
	bottom: 8px;
}
.infoArea ul li strong{font-size: 15.0vw;}
.infoArea ul li:nth-of-type(2) strong{font-size: 12.0vw;}
.infoArea ul li strong small{font-size: 7.5vw;}
.infoArea ul li:nth-of-type(2) small{font-size: 3.8vw;}
	
	
	
/**************************************************
 wrapper
**************************************************/
.wrapper{min-width: 100%;}
	
	
	
/**************************************************
 main
**************************************************/
article{padding: 80px 20px;}
article h2{
	width: 100%;
	font-size: 8.0vw;
	letter-spacing: 0.05em;
	padding: 35px 0 30px 0;
}
article h2::before{width: 60px;}

section,
.inner{width: 100%;}

section h3{
	margin-top: 60px;
	font-size: 6.5vw;
	letter-spacing: 0.05em;
	padding-bottom: 20px;
}
section h3.style1{margin-top: 50px;}
section h4{
	margin-top: 50px;
	font-size: 5.5vw;
	letter-spacing: 0.05em;
}
section h4.style1{margin-top: 40px;}
	
article p{font-size: 4.0vw;}
article p.style1{padding-top: 30px;}
	
.imageHanger{margin-top: 40px;}



/**************************************************
 development
**************************************************/
.tableHanger{
	margin: 40px auto 0 auto;
	width: 100%;
	overflow-x: scroll;
}
.tableHanger table{
	width: 200%;
	font-size: 3.8vw;
}
.tableHanger table th{padding: 15px 10px;}
.tableHanger table td{
	width: auto;
	padding: 10px;
}
.tableHanger table tbody tr td:first-of-type{width: auto;}
	
	
	
/**************************************************
 policy
**************************************************/
article.policy section h3{
	padding: 0 0 20px 0;
	-webkit-box-align: center;
	align-items: center;
}
section h3::before{display: none;}
article.policy section h3 span{
	width: 25vw;
	aspect-ratio: 2 / 1;
	font-size: 11.0vw;
	margin: 0 0 10px 0;
}

.policyItem{margin-top: 30px;}
.policyItem dl{
	width: 100%;
	padding: 60px 20px 20px 20px;
	margin: 20px 0 0 0;
}
.policyItem dl:first-of-type{margin: 0;}
.policyItem dl dt{font-size: 2.5rem;}
.policyItem dl dd{font-size: 4.0vw;}
	
	
	
/**************************************************
 flow
**************************************************/
.flowChart{
	width: 100%;
	margin: 50px auto 0 auto;
}
.flowChart::before{
	width: 2px;
	height: calc(100% - 140px);
	top: 80px;
	left: 112px;
	background: #FFFFFF;
}
.flowChart dl{padding: 0;}
.flowChart dl dt{
	width: 100%;
	font-size: 2.8rem;
	padding: 25px 0;
}
.flowChart dl dd{
	width: 100%;
	padding: 0 20px 20px 0;
}
.flowChart dl dd ul li{margin-top: 40px;}
.flowChart dl dd ul li span{
	width: 125px;
	font-size: 2.2rem;
	padding-right: 30px;
}
.flowChart dl dd ul li span::before{
	width: 24px;
	height: 24px;
	top: 3px;
}
.flowChart dl dd ul li strong{
	width: calc(100% - 125px);
	font-size: 1.8rem;
	font-weight: 500;
	line-height: 1.5;
	padding-left: 15px;
}
	

	
/**************************************************
 teacher
**************************************************/
.teacherList{
	width: 100%;
	padding-top: 20px;
}
.teacherList dl{
	width: calc(50% - 10px);
	margin: 20px 20px 0 0;
	padding: 15px 10px;
}
.teacherList dl:nth-of-type(4n){margin: 20px 0 0 0;}
.teacherList dl:nth-of-type(2n){margin: 20px 0 0 0;}
.teacherList dl dt{
	font-size: 5.0vw;
	letter-spacing: 0em;
}
.teacherList dl dt small{font-size: 3.5vw;}
.teacherList dl dd{font-size: 3.8vw;}
	
	
	
/**************************************************
 inquiry
**************************************************/
article.inquiry p.style1{width: 100%;}
.inquiryBtn{
	width: 100%;
	padding-top: 30px;
	padding-left: 0;
}
.inquiryBtn a{margin: 0 auto;}
	
	
	
/**************************************************
 footer
**************************************************/
footer{padding: 45px 20px;}

footer p{
	width: 100%;
	font-size: 4.5vw;
	text-align: center;
}

.footerLink{
	width: 100%;
	margin-top: 30px;
	padding-top: 30px;
	text-align: center;
	border-top: 1px solid #FFFFFF;
}
.footerLink a{font-size: 1.5rem;}
.footerLink a::before{top: 6px;}
	


}