@charset "utf-8";
/*=======================
	header
================================================================*/
#header{
	width: 100%;
	position: relative;
	z-index: 99;
	height:135px; 
}
.headtop{
	display:flex;
	justify-content: space-between;
	height:80px;
	align-items:center;
	transition:0.3s;
	background: #fff;
}
.navarea{
}
#header.fixed{
	position: fixed;
	top:0;
	left:0;
	height:80px;	
}
.fixed .headtop{
	height:0;
	overflow:hidden;
	opacity:0;
}
.hlogo{
	margin-left: 2vw;
	height: 96%;
	margin: 2% 2vw 2%;	
	min-width: 180px
}

.headtop_right{
	height: 100%;
	display: flex;
	align-items: center;
}
.login_btn_wrap{
	display: flex;
	justify-content: flex-end;
}
.login_btn{
	width: clamp(150px,18vw,325px);
}
.login_btn a{
	display: flex;
	height: 100%;	
	align-items:center;
	margin-right: 1vw;
	transition: .4s;
}
.login_btn a:hover{
	opacity: .6;
	transition: .4s;
}
.head_tel{
	text-align: center;
	min-width: 230px;
}
.head_tel p{
	font-size: 13px;
}
.head_tel a{
	position: relative;
	padding-left: 2.8vw;
	font-size: clamp(1.313rem, -2.688rem + 6.25vw, 2rem);
	font-weight: 600;
	pointer-events: none;
}
.head_tel a::before{
	position: absolute;
	content: "";
	background: url("../img/commn/icon_tel.svg");
	width:clamp(20px,2.5vw,1.8rem);
	height:clamp(20px,2.5vw,1.8rem);
	top: 50%;
	left: 0;
	transform: translateY(-50%);
}
.head_mail{
    margin: 0 1.3vw;
    background: #00a0e9;
    border-radius: 0 0 12px 12px;
    display: block;
    height: 100%;
    padding: 0 1vw;
	min-width: 165px;
}
.head_mail a{
	display: flex;
	height: 100%;
	align-items: center;
	font-weight: 600;
	color: #fff000;
	font-size: clamp(0.875rem, -0.58rem + 2.27vw, 1.125rem);
}
.head_mail a .arrow{
	width: 1.3rem;
	margin-left: 1vw;
	transition: .4s;
	
}
.head_mail a:hover .arrow{
	transform: translateX(.3rem) scale(1.1);
	transition: .4s;
}
@media(max-width:1023px){
	.login_btn_wrap{
		flex-wrap: wrap;
	}
	.login_btn:first-child{
		margin-bottom: 5px;
	}	
}




/*nav*/

.gnav{
	text-align: center;
	padding-top: 5px;
	height: 50px;
	background: #fff;
}
.gnav ul{
	position: relative;
	list-style: none;
	display: flex;
	justify-content: center;	
	background: #fff;
}
.gnav ul ul{
	display: block;
}
.gnav ul li a{
	position: relative;
	display: block;
	text-decoration: none;
	color: #333;
	padding:5px clamp(15px, 2.4vw,45px) 15px;
	transition:all .3s;
	border-right: 2px solid #00a0e9;
	font-size: clamp(0.938rem, 0.604rem + 0.69vw, 1.125rem);
}
.gnav ul li:last-child a{
	border-right: 0px;
}
.gnav ul li a:hover{
	color:#00a0e9;
}

.gnav ul li a::before{
	content:'';
	position: absolute;
	left:50%;
	bottom:5px;
	width:6px;
	height:6px;
	border-top: 2px solid #00a0e9;
    border-right:2px solid #00a0e9;
    transform: rotate(135deg) translateX(-50%);
}

.gnav li.has-child ul{
	position: absolute;
	/*left: 0;*/
	top: 50px;
	z-index: 4;
	/*width: 100%;*/
	display: none;
	/*flex-wrap: wrap;*/
	flex-direction: column;
	justify-content: center;
	box-sizing: border-box;
	background: #fff;
	padding: 15px 20px; 
}

.gnav li.has-child ul li {
    min-width: 220px;
    list-style: none;
    text-align: center;
    border-bottom: 1px dashed #00a0e9;
    padding: 5px 30px 5px 10px;
	position: relative;
}

.gnav li.has-child ul li a {
	padding:3px 0 0;
	display: flex;
	align-items: center;
	width: 100%;
	height: 100%;
	color: #333;
	text-decoration: none;
	transition: background .3s;
	border: none;
	transition: .4s;
}
.gnav li.has-child ul li:hover{
	background: #eaf9ff;
	transition: .4s;
}
/*.gnav li.has-child ul li a:hover img {
	transform: translateY(3px);
	transition: .4s;
}*/
.gnav li.has-child ul li a::before{
	display: none;
}

.gnav li.has-child ul li::before{
	content:'';
	position: absolute;
	right: 25px;
	bottom:35%;
	width:6px;
	height:6px;
	border-top: 2px solid #00a0e9;
    border-right:2px solid #00a0e9;
    transform: rotate(45deg) translateY(-50%);
	transition: .4s;
}
.gnav li.has-child ul li:hover::before{
	right: 5px;
	transition: .4s;
}
@media(max-width:767px){
	#header{
		height:60px; 
	}	
	.navarea,
	.headtop_right{
		display: none;
	}	
	#header.fixed{
		position: fixed;
		height: 60px;
		top: 0;
		left: 0;		
	}	
	.headtop,
	.fixed .headtop{
		height: 60px;
		display: flex;
		opacity: 1;
	}		
}



/*=======================
	mobilnav
================================================================*/
.sp_head{
	display: flex;
	justify-content: flex-end;
}
.sp_ctabtn{
	height: 60px;
	width: 60px;
	padding:0 5px;
}

.openbtn{
	position: relative;
	background:#0071bc;
	cursor: pointer;
    width: 60px;
    height:60px;
}

/*ボタン内側*/
.openbtn span{
    display: inline-block;
    transition: all .4s;/*アニメーションの設定*/
    position: absolute;
    left: 25%;
    height: 2px;
    border-radius: 5px;
	background: #fff;
  	width: 50%;
  }


.openbtn span:nth-of-type(1) {
	top:13px;	
}

.openbtn span:nth-of-type(2) {
	top:19px;
}

.openbtn span:nth-of-type(3) {
	top:25px;
}

.openbtn span:nth-of-type(3)::after {
	content:"Menu";/*3つ目の要素のafterにMenu表示を指定*/
	position: absolute;
	top:5px;
	left:0;
	color: #fff;
	font-size: 0.6rem;
	text-transform: uppercase;
}

/*activeクラスが付与されると線が回転して×になり、Menu⇒Closeに変更*/

.openbtn.active span:nth-of-type(1) {
    top: 14px;
    transform: translateY(6px) rotate(-45deg);
    width: 50%;
}

.openbtn.active span:nth-of-type(2) {
	opacity: 0;
}

.openbtn.active span:nth-of-type(3){
    top: 26px;
    transform: translateY(-6px) rotate(45deg);
    width: 50%;
}

.openbtn.active span:nth-of-type(3)::after {
	content:"Close";/*3つ目の要素のafterにClose表示を指定*/
    transform: translateY(0) rotate(-45deg);
	top: 8px;
    left: 16px;
}
@media(min-width:768px){
	.sp_head{
		display: none;
	}
}

#g-nav{
    position:fixed;
    z-index: 88;
	top: -150%;
    left:0;
	width:100%;
    height: 100dvh;
	transition: all 0.6s;
	padding-top: 60px;	
	font-weight: 600;
	background: rgba(51,51,51,.5);
}

#g-nav.panelactive{    
	top: 0;
}

/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list{
     display: flex;
	flex-direction: column;
	height: calc(100dvh - 60px);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding-bottom: env(safe-area-inset-bottom);
}

/*ナビゲーション*/

.g-nav-login_btn_wrap ul{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap:10px;
	padding: 10px ;
	background: #fff;
}
#g-nav .course{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap:10px;
	padding: 10px ;
	background: #fff;
}
#g-nav .course a{
 	display: block;
	width: 100%;
	height: 100%;
	padding:.8rem 2rem;
	position: relative;
	color: #fff;
	background: #0071bc;
	line-height: 1.2;
	border-radius: 10px;
}
#g-nav .course a{
	height: 100%;
	vertical-align: middle;
}

#g-nav .course a::before{
	position: absolute;
	content: '\f054';
	top: 50%;
	right: 1rem;
	transform: translateY(-50%);
	font-family: "Font Awesome 6 Free";
}

#g-nav .course a.elementary{background: #7ac943;}
#g-nav .course a.middle{background: #1aa1cd;}
#g-nav .course a.senior{background: #e55560;}
.bggry{background: #eee;}
.othernav{
	width: 90%;
	max-width: 500px;
	margin: 15px auto;
	background: #fff;
	border-radius: 15px;
	padding: 8px 0;
	
}
.othernav li a{
	display: block;
	border-bottom: 2px solid #eee;
	padding: 8px 2.5rem;
	position: relative;
}
.othernav li a::before,
.othernav li a::after{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	font-family: "Font Awesome 6 Free";
	color: #1aa1cd;
}
.othernav li a::before{
	content: '\f0c8';
	left: .8rem;
}
.othernav li a::after{
	content: '\f054';
	right: .8rem;
}
.othernav li:last-child a{
	border-bottom-width: 0px;
}
.othernav li a:hover{
	opacity: .6;
}
.c_br{
	display: none;
}
@media screen and (max-width: 639px) and (min-width: 511px){
	.c_br{
		display: block;
	}
}

@media(max-width:510px){
	#g-nav .course{
		grid-template-columns: repeat(2, 1fr);
	}
}
.g-nave-tel{
	background: #7ac943;
	padding: clamp(1rem, 0.021rem + 4.12vw, 2rem) 2rem;
	text-align: center;
	color: #fff;
	font-size: clamp(1rem, 0.755rem + 1.03vw, 1.25rem);
	line-height: 1.3
}
.g-nave-tel a{
	display: inline-block;
	background: #fff;
	padding: 8px 2rem;
	padding-left: 4rem;
	color: #89b929;
	width: 90%;
	max-width: 400px;
	margin: 10px;
	font-size: clamp(1.25rem, 0.515rem + 3.09vw, 2rem);
	border-radius: 50px;
}
.g-nave-tel a span{
	position: relative;
}
.g-nave-tel a span::before{
	position: absolute;
	content: '';
	background: url("../img/commn/icon_tel.svg")no-repeat center/contain;
	width: 1.5rem;
	height: 1.5rem;
	top: 50%;
	left: -2rem;
	transform: translateY(-50%);
}

.g-nave-mail a{
	display: block;
	width: 100%;
	background: #1aa1cd;
	color: #fff;
	padding: clamp(1rem, 0.021rem + 4.12vw, 2rem) 0; 	
	padding-right: 3rem;
	text-align: center;
	position: relative;
	font-size: clamp(1.25rem, 0.515rem + 3.09vw, 2rem);
}
.g-nave-mail a::after{
	position: absolute;
	content: '';
	width: 1.8rem;
	height: 1.8rem;
	top: 50%;
	right: 1rem;
	transform: translateY(-50%);
	background: url("../img/commn/arrow_w.svg")no-repeat center/contain;
}
@media(max-height:700px){
	.g-nave-tel p small{
		display: none;
	}
}
/*=======================
	sidelink
================================================================*/

.sidebtn{
	position: fixed;
	width: 40px;
	top: 150px;
	right: 0;
	z-index: 70;
	font-size: 15px;
	text-align: center;

}
.sidebtn li a{
	display: flex;
	align-items: center;
    flex-direction: column;
	padding: 10px 0;
	padding-right: 5px;
	font-weight: 600;
}
.sidebtn li p{
	-ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;	
}
.sidebtn li span{
	width: 60%;
	margin: 5px auto;
}
.sidebtn li span img{
	vertical-align: bottom;
}
.line{
	border: 1px solid #4caf50;
	border-right-width: 0px;
	margin-bottom: 10px;
	border-radius: 8px 0 0 8px;
	background: #fff;
}
.line a{
	color: #4caf50;
}
.inst{
	border: 1px solid #ff00ff;
	border-right-width: 0px;
	margin-bottom: 10px;
	border-radius: 8px 0 0 8px;
	background: #fff;
}
.inst a{
	color: #ff00ff;
}

@media(max-width:500px){
	.sidebtn{
		top: 80px;	
	}
	.sidebtn li p{
		display: none;	
	}	
	.sidebtn li span {
		width: 75%;
		margin: 0 auto;
	}
}







/*=======================
	pagetop
================================================================*/

#page-top a{
	display: flex;
	justify-content:center;
	align-items:center;
	border-radius: 5px;
	width: 60px;
	height: 60px;
	color: #fff;
	text-align: center;
	text-transform: uppercase; 
	text-decoration: none;
	font-size:0.6rem;
	transition:all 0.3s;
}

#page-top a:hover{
}

/*リンクを右下に固定*/
#page-top {
	position: fixed;
	right: 10px;
	bottom:10px;
	z-index: 2;
    /*はじめは非表示*/
	opacity: 0;
	transform: translateY(100px);
}

/*　上に上がる動き　*/

#page-top.UpMove{
	animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }
  to {
    opacity: 1;
	transform: translateY(0);
  }
}

/*　下に下がる動き　*/

#page-top.DownMove{
	animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
  from {
  	opacity: 1;
	transform: translateY(0);
  }
  to {
  	opacity: 1;
	transform: translateY(100px);
  }
}

/*=======================
	footer
================================================================*/
footer {
	padding: clamp(60px,8vw,100px) 0 ;
	position: relative;
	background: #ebf8ff;
}

.flogo{
	max-width: 200px;
}
.flogo img{
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.f_info{
	font-size: 14px;
}
.f_navi{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.f_navarea{
	display: flex;
	justify-content: flex-end;
	gap: 2vw;
}

.f_navarea a{
	font-weight: 600;
}
.f_navarea .sub a{
	font-weight: 400;
	position:relative;
	padding-left: 1.5rem;	
}
.f_navarea .sub a::before{
	position: absolute;
	content: '>';
	left: .5rem;
	top: 50%;
	transform: translateY(-50%);
	font-size: 90%;
}
.f_navarea a:hover{
	color: #0071DC;
}
.copy{
	font-size: 13px;
	text-align: end;
}
@media(max-width:979px){
	.f_navarea{
		flex-direction: column;
	}
}
@media(max-width:767px){
	.f_navarea{
		display: none;
	}
	.flogo{
		margin: 0 auto 10px
	}
	.f_info{
		text-align: center;
	}
	.copy{
		text-align: center;
	}	
}
/*=======================
	fv
================================================================*/
#fv{
	max-height: calc(100vh - 135px);
    overflow: hidden;
    width: 100%;
}
.visually-hidden{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
}
@media(min-width:601px){
	.fv_sp{
		display: none;
	}	
}
@media(max-width:600px){
	.fv_pc{
		display: none;
	}		
}

.imgarea{
	position: relative;
	display: block;
}
.imgarea img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.imgarea .fvtxt{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	object-fit: contain;
}

/*=======================
	index.php
================================================================*/
/*キャンペーン・講習のお知らせ*/
#capmlink a {
	margin: 50px auto 0;
	width: 80%;
	max-width: 750px;
	display: block;
	
}
#capmlink a .thumbNail{
	object-fit: contain;
	vertical-align: bottom;
}


/*コースリンク*/
#courselink{	
	padding: clamp(40px,6vw,60px) 0 ;
}
.ttl-wrap {
  text-align: center;
	margin-bottom: 20px;
}
.ttl-slash {
  position: relative;
  display: inline-block;
  font-weight: 700;
  font-size: clamp(18px, 3vw, 26px);
  padding: 0 1.8em;
}

.ttl-slash::before,
.ttl-slash::after {
	position: absolute;
	content: "";
	width: 50px;
	height: 2px;
	bottom:52%;
	background: #333;
}

.ttl-slash::before {
  left: 0;
  transform: translateY(-50%) rotate(45deg);
}

.ttl-slash::after {
  right: 0;
  transform: translateY(-50%) rotate(-45deg);
}

.linkwrap ul{
	display: flex;
	justify-content: center;
}
.linkwrap ul li{
	width: 30%;
    margin: 0 clamp(10px, 1.5vw, 20px);
    max-width: 350px;
}
.linkwrap ul li a img{
	transform: translateY(0px);
	transition: .4s;
}
.linkwrap ul li a:hover img{
	transform: translateY(3px);
	transition: .4s;
}

@media(max-width:767px){
	.ttl-slash {
	  padding: 0 60px;
	}
	.ttl-slash::before,
	.ttl-slash::after {
		width: 40px;
	}	

	.ttl-slash::before {
	  transform: translateY(-50%) rotate(50deg);
	}

	.ttl-slash::after {
	  transform: translateY(-50%) rotate(-50deg);
	}
}
@media(max-width:599px){
	.linkwrap ul{
		flex-direction: column;
	}
	.linkwrap ul li{
		width: 80%;
		margin: 0 auto 10px;
	}	
}

/*なぜ成績が上がるのか*/
#gradesup .ttl{
	width: 75%;
	max-width: 750px;
	margin: 0 auto;
	padding-bottom: 10px;
	border-bottom: 2px solid #333;
	margin-bottom: 20px;
}
.subttl{
	text-align: center;
	font-size: clamp(1.4rem, 0.867rem + 1.11vw, 1.7rem);
}
.learning{
	padding-bottom: 0;
}
.learning-inner {
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5vw;
}
.learning-child{
	background: #ebf8ff;
	border: 6px solid #d7f3ff;
	border-radius: 20px;
	padding: 25px 20px 30px;
	text-align: center;
	margin-bottom: 15px;
}
.card-ttl {
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 700;
	font-size: clamp(1rem, 0.111rem + 1.85vw, 1.5rem);
}
.card-ttl span{
	font-size: 120%;
}
.card-ttl span.bl{
	color: #0071bc;
}

.card-img {
	margin-top: 10px;	
}
.card-img img {
	width: 100%;
	height: auto;
	border-radius: 10px;
	display: block;
	aspect-ratio: 16 / 9;
}
.card-text{
	font-weight: 600;
	text-align: center;
}
@media(max-width:767px){
	.learning-inner {
		margin: 0 auto;
		display: block;
		gap: 1.5vw;
	}
	.learning-card{
		margin-bottom: 30px
	}
	.card-ttl{
		font-size: clamp(1rem, 0.509rem + 2.07vw, 1.5rem);
	}
	.card-text{
		font-size: clamp(1.25rem, 0.943rem + 1.29vw, 1.563rem);
	}	
}
@media screen and (max-width:767px) and (min-width:450px){
	.learning-child {
		display: flex;
		flex-direction: row-reverse;
		justify-content: space-between;
		align-items: center;
	}
	.card-ttl{
    	width: 60%;		
	}	
	.card-img{
		width: 36%;
		margin-top: 0;
	}
	.card-img img {
		aspect-ratio: 4 / 3;
	}	
}

/*学習サイクル*/
#cycle .ttl{
	text-align: center;
	font-family: "Noto Sans JP", sans-serif;
	font-size:clamp(1.3rem, 0.744rem + 2.34vw, 2.5rem);
	letter-spacing: .1rem;
}
#cycle .ttl span{
	font-size: clamp(1.6rem, 0.72rem + 3.71vw, 3.5rem);
	color: #1aa1cd;
}
#cycle .comn2{
	padding:clamp(15px,3vw,40px);
	border: 1px solid #1aa1cd;
	border-radius: 15px;
}

/*学習planリンク*/
#plan .ttl{
	text-align: center;
	font-family: "Noto Sans JP", sans-serif;
	font-size: clamp(1.5rem, 1.037rem + 1.95vw, 2.5rem);
	letter-spacing: .1rem;
	color: #1aa1cd;
}
/*英検*/
#eiken{
	padding-top: 0;
}
.eikenhead{
	padding:clamp(3.125rem, 2.256rem + 3.66vw, 5rem) 0 80px;
	clip-path: ellipse(70% 100% at top);
	background: #1aa1cd;	
}

.eikenhead{
	text-align: center;
	color: #fff;
	text-shadow: 1px 1px 3px #333;
	margin-bottom: 50px;
}
.eikenhead h2{
	font-family: "Noto Sans JP", sans-serif;
	font-size:clamp(1.7rem, 0.811rem + 1.85vw, 2.2rem);
	letter-spacing: .2rem;
	padding-bottom: 10px;
	margin-bottom: 15px;
	position: relative;
	display: inline-block;
}
.eikenhead h2 span{
	font-size: clamp(2.1rem, 1.033rem + 2.22vw, 2.7rem);
	color: #fff000;
}
.eikenhead h3{
	font-size: clamp(1.3rem, 0.767rem + 1.11vw, 1.6rem);
}

.eikenhead h2::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 110%;
  height: 3px;
  background: linear-gradient(
    to right,
    transparent 0%,
    #fff 20%,
    #fff 80%,
    transparent 100%
  );
  border-radius: 999px;
  transform: translateX(-50%);
}

.skill_list{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	margin-bottom: 50px;
}
.skill{
	text-align: center;
	padding:0 2vw 1rem;
	border-right: 1px dashed #999;
}

.skill figure{
	width: 90%;
	margin: 0 auto;
}
.skill p{
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 900;
	font-size: clamp(1rem, 0.467rem + 1.11vw, 1.3rem);
}
.skill._01{
	color: #009245;
}
.skill._02{
	color: #e55560;
}
.skill._03{
	color: #f15a24;
}
.skill._04{
	color: #0071bc;
	border-right: 0px;
}
.elst_point_box{
	background: #ebf8ff;
	border: 2px solid #00a0e9;
	border-radius: 20px;
}
.box_ttl{
    font-size: 1.2em;
    background: #00a0e9;
    padding: .8rem;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.05em;
	border-radius: 18px 18px 0 0;
}
.box_ttl span{
	position: relative;
	display: inline-block;
	padding: 0 50px;
}
.box_ttl span::before,
.box_ttl span::after{
	position: absolute;
	content: '';
	height: 2px;
	width: 40px;
	background: #fff;
	top: 50%;
	transform: translateY(-50%);
}
.box_ttl span::before{
	left: 0;
}
.box_ttl span::after{
	right: 0;
}
.row2 {
	padding: 20px 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.elst_point_box ul{
	padding: 2rem clamp(12px ,3.3vw,120px);
}
.elst_point_box li{
	padding: 1rem .2rem .3rem 3rem;
	position: relative;
	border-bottom: 1px dashed  #00a0e9;
	font-weight: 600;
	color: #1aa1cd;
	letter-spacing: .15rem;
}
.elst_point_box li::before{
	position: absolute;
	content: '';
	width: 1.4rem;
	height: 1.6rem;
	background: url("../img/icon_check.png")no-repeat center/contain;
	left: .5rem;
	top:1rem;
}
@media(max-width:767px){
	.eikenhead{
		clip-path: ellipse(85% 100% at top);
	}	
	.eikenhead h2{
		font-size:clamp(1.2rem, 0.709rem + 2.07vw, 1.7rem);
	}
	.eikenhead h2 span{
		font-size: clamp(1.5rem, 0.911rem + 2.48vw, 2.1rem);
	}
	.eikenhead h3{
		font-size: clamp(1rem, 0.705rem + 1.24vw, 1.3rem);
	}	
}
@media(max-width:767px){
	.skill_list{
		grid-template-columns: repeat(2, 1fr);
		margin-bottom: 50px;
	}
	.skill._02{
		border-width: 0px;
	}	
}

/*成績情報*/
#gradesinfo{
	background: url("../img/bgimg01.jpg")no-repeat right bottom/contain;
}
#gradesinfo::before{
	position: absolute;
	content: '';
	width: 85%;
	height: 100%;
	background: linear-gradient(to right,#fff 60%,transparent);
	top: 0;
}
#gradesinfo .ttl{
	text-align: center;
	font-family: "Noto Sans JP", sans-serif;
	font-size: clamp(1.5rem, 1.037rem + 1.95vw, 2.5rem);
	letter-spacing: .1rem;
	color: #1aa1cd;
}
.gradesinfo_inner{
	padding-left: clamp(0.938rem, -91.875rem + 137.5vw, 11.25rem);
	max-width: 1000px;
}
.grades_slide {/*横幅94%で左右に余白を持たせて中央寄せ*/
   width:94%;
   margin:0 auto;	
}
/*左右arrow*/
.grades_slide .slick-prev, 
.grades_slide .slick-next {
    position: absolute;/*絶対配置にする*/
    top: 42%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    background: url("../img/commn/arow_b.svg");
    height: 25px;
    width: 25px;
}

.grades_slide .slick-prev {/*戻る矢印の位置と形状*/
    left: -1.8%;
    transform: rotate(180deg);
}

.grades_slide .slick-next {/*次へ矢印の位置と形状*/
    right: -1.8%;
}

.grades_slide .slick-track{
	display: flex;
}
.grades_slide .slick-slide{
	height: auto;
	display: flex;
}
.grades_box{
	border: 1px solid #00a0e9;
	background: #fff;
	margin: 0 10px;
	border-radius: 20px;
	height: 100%;
	display: flex;
	flex-direction: column;
}
.grades_box_head{
	background: #00a0e9;
	padding: .5rem;
	text-align: center;
	color: #fff;
	border-radius: 18px 18px 0 0 ;
}

.grades_box_txt{
	padding: .5rem 1rem 1rem;
}
.grades_box_txt h3{
	margin-bottom: 10px;
}
.grades_box_txt span{
	font-weight: 600;
	color: #FD3B3E;
}
@media(max-width:767px){
	#gradesinfo .mbtn{
		margin-top: 0;
	}
}
@media(max-width:500px){
	#gradesinfo{
		padding-bottom: 200px;
	}
	#gradesinfo::before{
		background: transparent;
	}	
}
/*教室の様子*/
.img_slide {/*横幅94%で左右に余白を持たせて中央寄せ*/
   width:100%;
    margin:0 auto;
}
.img_slide li{
	aspect-ratio: 4 / 3;
	overflow: hidden;
	margin: 0 5px;
}
.img_slide img {
    width:100%;/*スライダー内の画像を横幅100%に*/
    height:100%;
	object-fit: cover;
}


/*news*/
.info h2{
	text-align: center;
	color: #00a0e9;
	padding-bottom: 10px;
	border-bottom: 2px solid #00a0e9;
	margin-bottom: 15px;
}
#newsWrap{
	width: 100%;
	height: 350px;
	padding:0 1rem 1rem;
}
#newsList{
	height: 320px;
	overflow-y: auto;
}
#newsList li{
	padding: .5rem;
	border-bottom: 1px dotted #666;
	margin-bottom: 5px;
}
#newsList .up_ymd{
	margin-right: 10px;
}
#newsList .catName:not(.cat-2){
	display: inline-block;
	background: #bdeaff;
	padding: 0 8px;
	border-radius: 20px;
	font-size: 14px;
}
#newsList .cat-2 .catName{
	display: inline-block;
	background: #fff;
}
#newsList::-webkit-scrollbar {
  width: 5px;
}

#newsList::-webkit-scrollbar-track {
  background-color: transparent;
}

#newsList::-webkit-scrollbar-thumb {
	background: linear-gradient( #95dcfc 30%, transparent 30%);
}

/*カレンダー*/
.calendar {
	text-align: center;
}
/*otherlink*/
#other{
	background: #1aa1cd;	
	padding: clamp(45px,7vw,65px) 0 ;
}
.link_banner a{
	position: relative;
	background: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	height: 200px;
	color: #fff;
	text-shadow: 0 0 3px #1aa1cd;
	font-size: clamp(1.5rem, 0.611rem + 1.85vw, 2rem);
	font-weight: 600;
	z-index: 1;
	line-height: 1.3;
}
.link_banner small{
	font-size: 70%;
}
.link_banner a img{
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -1;
	object-position: top;
}
.link_banner:nth-child(2n) a img{
	object-position: center;	
}
/*=======================
	subfv
================================================================*/
.subfv{
    position: relative;
    background: #3fa9f5;
    padding: clamp(38px, 2.8vw, 70px) 0 clamp(45px, 3vw, 80px);
    display: block;
}
.subfv::before{
	position: absolute;
	content: '';
	width: 100%;
	height: 100%;
	background: url("../img/pagettlbg.jpg")no-repeat center/100%;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	mix-blend-mode: hard-light;
}
.pagettl{
	position: relative;
	z-index: 1;
	color: #0e6eb8;
	padding-left: 2rem;
	font-size: clamp(1.375rem, 1.04rem + 1.53vw, 2.188rem);
}
.pagettl::before{
	position: absolute;
	content: '';
	width: 5px;
	height: 80%;
	left: 0;
	top: 50%;
	border-radius: 10px;
	transform: translateY(-50%);
	background: #0e6eb8;	
}

/*パンくずリスト*/
.breadcrumb {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 14px;
}

.breadcrumb li {
  display: flex;
  align-items: center;
}

.breadcrumb li a {
  text-decoration: none;
  color: #2c6fb7;
}

.breadcrumb li a:hover {
  text-decoration: underline;
}

.breadcrumb li + li::before {
  content: "＞";
  margin: 0 8px;
  color: #bbb;
}
@media (max-width: 480px) {
  .breadcrumb {
    font-size: 12px;
  }

  .breadcrumb li + li::before {
    margin: 0 5px;
  }
}

.breadcrumb li[aria-current="page"] {
  color: #444;
}

/*==========================================================
	成績が上がる理由
===========================*/
/* ===============================
   ① ヒーロー
=================================*/
.reason-hero .ttl {
    width: 75%;
    max-width: 750px;
    margin: 0 auto;
    padding-bottom: 10px;
    border-bottom: 2px solid #333;
    margin-bottom: 20px;
}

.reason-hero ul {
  max-width:600px;
  margin:20px auto;
  list-style:none;
}
.reason-hero ul li:before {
  content: '';
  margin-right:8px;
  padding: .6rem;
  background: url("../img/icon_check.png")no-repeat center/contain;

}
.worry-section{
  padding:clamp(20px,7vw,80px) 0;
}

.worry-inner{
  width:95%;
  margin:auto;
  display:flex;
  align-items:center;
  gap:60px;
}

.worry-text{
  flex:5;
}

.worry-text h3{
  font-size:clamp(1.25rem, 1.076rem + 0.73vw, 1.625rem);
  color:#1E73BE;
  margin-bottom:20px;
}

.worry-text ul{
  list-style:none;
  padding:0;
  margin-bottom:20px;
}

.worry-text ul li{
  background:#fff;
  padding:12px 18px;
  border-radius:12px;
  margin-bottom:12px;
  box-shadow:0 4px 10px rgba(0,0,0,0.05);
}



.worry-image{
  flex:4;
  text-align:center;
}

.worry-image img{
  max-width:100%;
  height:auto;
}

/* スマホ対応 */
@media(max-width:768px){
  .worry-inner{
    flex-direction:column;
  }
}
.reason-solution{
display:flex;
gap:60px;
align-items:center;
margin-bottom:100px;
}
.reason-solution h3{
	color: #1E73BE;
}
.reason-solution h3 span{
	font-size: 110%;
	color: #f44336;
}
.solution-img{
flex:1;
}

.solution-img img{
width:100%;
border-radius:12px;
}

.solution-text{
flex:1;
}



/* 仕組み */

.reason-system{
margin-bottom:100px;
}
.center{
text-align:center;
margin-bottom:40px;
}

.system-grid{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:20px;
}

.system-card{
text-align:center;
background:#fff;
padding:20px;
border-radius:10px;
box-shadow:0 4px 12px rgba(172, 205, 252,.06);
}

.system-card img{
width:100%;
border-radius:8px;
margin-bottom:10px;
}

.study-cycle{
padding:80px 20px;
text-align:center;
background:#f7f9fc;
}

.cycle-lead{
margin-bottom:40px;
}

.cycle-wrap{
display:flex;
justify-content:center;
align-items:center;
flex-wrap:wrap;
gap:10px;
}

.cycle-item{
background:#fff;
padding:20px;
border-radius:10px;
width:190px;
box-shadow:0 5px 15px rgba(0,0,0,0.08);
}

.cycle-item h3{
font-size:1.4rem;
margin-bottom:10px;
	text-align: center;
}

.num{
background:#1E73BE;
color:#fff;
width:30px;
height:30px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
margin:0 auto 10px;
}

.arrow{
font-size:1.5rem;
padding:0 5px;
}

.cycle-result{
margin-top:30px;
font-size:18px;
}

@media(max-width:454px){
	.cycle-wrap{
		flex-direction: column;
	}
	.cycle-item{
		width:70%;
	}	
	.arrow{
	transform: rotate(90deg);
		font-weight: 900;
	}
	
}

/* ポイント */
.blue-band {
    background: #00a0e9;
    color: #fff000;
    text-align: center;
    padding: 15px;
    font-size: clamp(1.4rem, 1.122rem + 1.17vw, 2rem);
    font-weight: bold;
    margin: 40px 0 20px;
    font-family: "Noto Sans JP", sans-serif;
}

.point-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
margin-top:40px;
}

.point-box{
background:#fff;
padding:30px;
border-radius:12px;
box-shadow:0 5px 15px rgba(0,0,0,0.08);
	margin-bottom: 30px;
}
.point-box h3{
	text-align: center;
	color: #1E73BE;
	margin-bottom: 15px;
}

.point-box img{
width:100%;
border-radius:10px;
margin-bottom:15px;
}

.point-bottom{
	font-size: clamp(1.2rem, 0.922rem + 1.17vw, 1.8rem);
	font-weight: 600;
	color: #1E73BE;
	text-align: center;
}

/* メッセージ */

.reason-message{
margin-top:80px;
}

.message-inner{
display:flex;
gap:60px;
align-items:center;
}

.message-img img{
width:100%;
border-radius:12px;
}



/* スマホ */

@media(max-width:768px){

.reason-worry,
.message-inner{
flex-direction:column;
}
	.reason-solution{
		flex-direction: column-reverse;
	}

.system-grid{
grid-template-columns:repeat(2,1fr);
}

.point-grid{
grid-template-columns:1fr;
}

}

/*合格実績*/

.results-title{
text-align:center;
font-size:34px;
margin-bottom:10px;
}

.results-sub{
text-align:center;
margin-bottom:50px;
color:#666;
}


/* 目立つ実績 */

.results-highlight{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
max-width:1000px;
margin:0 auto 70px;
}

.highlight-card{
background:#fff;
padding:30px 20px;
border-radius:10px;
text-align:center;
box-shadow:0 10px 25px rgba(0,0,0,0.08);
}

.highlight-card h3{
font-size:22px;
margin:10px 0;
}

.badge{
display:inline-block;
background:#1E73BE;
color:#fff;
padding:5px 12px;
font-size:12px;
border-radius:20px;
}


/* 一覧 */

.results-block{
max-width:1000px;
margin:0 auto 50px;
}

.block-title{
font-size:22px;
margin-bottom:20px;
border-left:5px solid #1E73BE;
padding-left:10px;
}

.results-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:12px;
list-style:none;
padding:0;
}

.results-grid li{
background:#fff;
padding:12px;
border-radius:8px;
text-align:center;
box-shadow:0 3px 10px rgba(0,0,0,0.06);
}

.results-grid li.strong{
font-weight:700;
border:2px solid #1E73BE;
}


/* スマホ */

@media(max-width:768px){

.results-highlight{
grid-template-columns:1fr 1fr;
}

.results-grid{
grid-template-columns:1fr 1fr;
}

}

/*在籍校*/
.school-section{
background:#f7f9fc;
}

.school-title{
text-align:center;
font-size:clamp(1.438rem, 1.177rem + 1.1vw, 2rem);
margin-bottom:10px;
}

.school-sub{
text-align:center;
margin-bottom:60px;
color:#666;
}

.school-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
max-width:1100px;
margin:auto;
}

.school-card{
background:#fff;
padding:35px 25px;
border-radius:12px;
text-align:center;
box-shadow:0 12px 30px rgba(0,0,0,0.08);
transition:.3s;
}

.school-card:hover{
transform:translateY(-5px);
box-shadow:0 18px 40px rgba(0,0,0,0.12);
}

.school-icon{
	max-width: 50px;
	margin: 0 auto 10px;
}

.school-card h3{
margin-bottom:10px;
font-size:20px;
}

.school-text{
font-size:14px;
color:#666;
margin-bottom:18px;
}

.school-card ul{
list-style:none;
padding:0;
margin:0;
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:8px;
}

.school-card li{
background:#f1f4f8;
padding:6px 12px;
border-radius:20px;
font-size:14px;
}


/* スマホ */

@media(max-width:768px){

.school-grid{
grid-template-columns:1fr;
}

}
/*==========================================================
	塾案内
===========================*/
.a_table tr{
	border-bottom: 1px solid #ccc;
}
.a_table th{
	padding: 1rem .5rem;
	background: #def7ff;
	color: #0071bc;
	width: 25%;
}
.a_table td{
	padding: 1rem 1rem;	
}
.map{
	max-width: 960px;
	height: 45vh;
	margin: 30px auto 0;	
}
.map iframe{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*講師案内*/
.teacher01{
  margin: 20px 0;
  padding:20px 30px 40px;
  border: 3px solid #0071bc;
	background: #fff;
}
.teach_name {
  position: relative;
  left: -40px;
  background-color: #0071bc;
  color: #fff;
  padding: 0.5em 1em;
  margin: 0;
  width: 100%;
  font-size: 20px;
  font-weight: bold;
}
/*.teach_txt_area{
	display: flex;
	margin-top: 20px;
	gap:15px;
	justify-content: space-between;
}*/
.teach_img{
    width: 30%;
    margin: 2vw 3vw 1vw;
    float: left;	
}
.teach_img img{
	object-position: bottom;
}
.teach_txt{
	width: 100%;
	padding: 2vw 3vw;
	
}

.teacher02{
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap:2vw;
}
.teacher02 dl{
	width: 45%;
  margin: 20px auto;
  padding:20px 3vw 40px;
  border: 3px solid #4caf50;
	background: #fff;
}
.teacher02 dt {
  position: relative;
  left: -70px;
  background-color: #4caf50;
  color: #fff;
  padding: 0.5em 1em;
  margin: 0;
  width: 110%;
  font-size:clamp(0.938rem, 0.382rem + 1.16vw, 1.25rem);
  font-weight: bold;
}
.teacher02 dd{
	margin-top: 20px;
}
@media(max-width:767px){
	.teacher02 dl{
		width: 100%;
	}	
}
@media(max-width:500px){
	
	.teacher01 {
		margin: 20px 0;
		padding: 20px 20px 30px;
	}
	.teach_name {
	  left: -35px;
	}	
	.teach_img{
	   width: 98%;
	   margin: 2vw auto 1vw;
	   clear: both;	
	}	
	.teach_txt{
		width: 100%;
		padding: 2vw 1vw;
	}
	.teacher02 dt {
	  left: -25px
	}	
	
}

/*入塾流れ*/
#flow{
	background: #def7ff;
}
.flow{
	width: 98%;
	max-width: 1200px;
	margin: 3vw auto 20px;
}
.flow img{
	width: 100%;
	object-fit: contain;
}
.sp_flow{
	display: none;
}
@media(max-width:600px){
	.pc_flow{
		display: none;
	}
	.sp_flow{
		display: block;
	}
}
/*授業料*/
.price._head th{
	color: #333;
	font-size: 1.2rem;
	border: 0px;
}
.price th{
	width: calc(100% / 3);
	background: #def7ff;
	color: #0071bc;
	padding: .8rem 1rem;
	border: 1px solid #0071bc;
	border-left-width: 0px;
}
.price td{
	border-bottom: 1px solid #0071bc;
	border-right: 1px solid #0071bc;
	padding: .8rem 1rem;
	text-align: center;
	font-weight: 600;
	color: #666;
}
.price th:last-child,
.price td:last-child{
	border-right-width: 0px;
}
/*============================================================================
	Contactページ
======================================*/
/*よくある質問*/
.leadtxt{
	text-align: center;
}
/*アコーディオン全体*/
.faq {
  margin-bottom: 20px;
}

.faq_q {
	background-color: #def7ff;
	background-image:
		repeating-linear-gradient(-45deg,
		#f8feff, #f8feff 4px,
		transparent 0, transparent 8px);
	color: #666;
	padding: 16px 20px;
	padding-left: 7rem;
	border-radius: 8px;
	cursor: pointer;
	font-weight: bold;
	list-style: none;
	position: relative;
}
.faq_q::before { 
	position: absolute;
	content: "Q"; 
	background: #3fa9f5; 
	color: #fff; 
	width: 35px; 
	height: 35px; 
	display: inline-flex; 
	align-items: center; 
	justify-content: center; 
	border-radius: 50%; 
	font-weight: bold; 
	margin-right: 10px; 
    left: 3.1rem;
}

.faq_q::-webkit-details-marker {
  display: none;
}

.faq_a {
	background-color: #def7ff;
	background-image:
		repeating-linear-gradient(-45deg,
		#f8feff, #f8feff 4px,
		transparent 0, transparent 8px);
	padding: 1.5rem 20px;
	padding-left: 7rem;
	border-left: 4px solid thin;
	border-radius: 8px;
	margin-top: 5px;
	position: relative;
}
.faq_a::before { 
	content: "A"; 
	background:#3fa9f5; 
	color: #fff; 
	width: 35px; 
	height: 35px; 
	display: inline-flex; 
	align-items: center; 
	justify-content: center; 
	border-radius: 50%; 
	font-weight: bold; 
	position: absolute;
    left: 3.1rem;
}

.cta_trial {
  background: #f0f7fd;
  padding: 50px 30px;
  text-align: center;
  border-radius: 16px;
  margin: 60px 0;
}

.cta_trial h3 {
  color: #0071bc;
  font-size: 1.6rem;
  margin-bottom: 20px;
}

.cta_trial p {
  margin-bottom: 30px;
  line-height: 1.8;
}

.cta_btn {
  display: inline-block;
  background: #0071bc;
  color: #fff;
  padding: 14px 36px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: bold;
  transition: 0.3s;
}

.cta_btn:hover {
  background: #005fa3;
}

@media(max-width:599px){
	.faq_q,
	.faq_a {
		padding-right: 2rem;
    	padding-left: 4.5rem;
		
	}
	.faq_q::before,
	.faq_a::before { 
		left: 1.1rem;
	}	
}

/*--Form -----------------*/
:root{
  --main:#00a0e9;
  --sub:#cef3ff;
  --accent:#4caf50;
}

#contactForm{
  margin:auto;
  background:#fff;
  padding:clamp(15px, 4vw, 40px);
  border-radius:10px;
  box-shadow:0 5px 20px rgba(0,0,0,0.05);
}

.form_wrap h2{
  text-align:center;
  color:var(--main);
  margin-bottom:30px;
}

.row{
	display:flex;
	padding: 10px 5px;
	margin-bottom:20px;
	flex-wrap:wrap;
	border-bottom: 1px dotted #999;
}

.row label.title{
	width:30%;
	font-weight:bold;
}

.row .input_area{
  width:70%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap:10px;
}

.required{
	background:var(--main);
	color:#fff;
	font-size: 12px;
	padding: 4px 6px;
	border-radius: 3px;
	margin-right: 10px;
}

input[type=text],
input[type=email],
input[type=tel],
input[type=date],
select,
textarea{
  width:100%;
  padding:8px;
  border:1px solid #ccc;
  border-radius:5px;
  font-size:14px;
}

textarea{
  resize:vertical;
}

.check_area label{
  margin-right:20px;
  cursor:pointer;
}
/* 性別エリア */
.gender_area{
  display:flex;
  gap:15px;
}

/* ラジオ本体を消す */
.gender_area input[type="radio"]{
  display:none;
}

/* ラベルをボタン風に */
.gender_label{
  padding:0 30px;
  border:1px solid #999;
  border-radius:30px;
  cursor:pointer;
  background:#fff;
  transition:0.3s;
  color:#333;
}

/* ホバー */
.gender_label:hover{
  background:#cef3ff;
}

/* 選択中 */
.gender_area input[type="radio"]:checked + .gender_label{
  background:#cef3ff;
  border-color:#81dbf7;
}
/* ===== ご希望日時 全体枠 ===== */
.schedule_wrap{
	width: 100%;
}
/* 各希望ブロック */
.schedule_block{
  background:#fff;
  padding:15px;
  margin-bottom:15px;
  border-radius:8px;
  border:1px solid #d9f1fb;
  box-shadow:0 2px 6px rgba(0,0,0,0.05);
}

/* 第1希望は少し強調 */
.schedule_block:first-of-type{
  border:1px solid #d9f1fb;
}

/* 日付＋時間横並び */
.schedule_block input[type="text"],
.schedule_block select{
  padding:8px;
  border-radius:6px;
  border:1px solid #ccc;
  margin-right:10px;
}

/* focus時 */
.schedule_block input:focus,
.schedule_block select:focus{
  border:1px solid #00a0e9;
  outline:none;
  box-shadow:0 0 5px rgba(0,160,233,0.3);
}

/* スマホ対応 */
@media(max-width:767px){
  .schedule_block input,
  .schedule_block select{
    width:100%;
    margin-bottom:10px;
  }
}

button{
  display:block;
  width:250px;
  margin:30px auto 0;
  padding:12px;
  background:#19A1CD;
  color:#fff!important;
  border:none;
  border-radius:30px;
  font-size:16px;
  cursor:pointer;
  transition:.3s;
}

button:hover{
  opacity:.8;
}

.error{
  color:red;
  font-size:12px;
  margin-top:5px;
}

@media(max-width:767px){
  .row label.title,
  .row .input_area{
    width:100%;
  }
	.row label.title{
		margin-bottom: 5px;
	}
}
@media(max-width:460px){
	.check_area div{
		width: 100%;
	}
}

/*============================
	campaignぺージ詳細
=================================================*/
#camp .detailUpfile{
	max-width: 750px;
	margin: 0 auto 15px;
}

/*============================
	news詳細ページ
=================================================*/
#up_ymd{
	text-align: end;	
}
#news{
	padding: 2vw 3vw;
	border: 1px solid #f8f8f8;
  box-shadow:0 10px 25px rgba(0,0,0,0.1);
	border-radius: 20px;
}

#news .detailUpfile{
	max-width: 650px;
	margin: 0 auto 15px;
}