@charset "utf-8";

/*---------------------------------------------------------------------------------------
	/flow
----------------------------------------------------------------------------------------*/
.lower-main figure.about-main{ background: url("../common/img/flow-main-pc.webp") left bottom / cover no-repeat;}
.flow1{ background: url("../common/img/flow1-bg-pc.svg") center top no-repeat; position: relative; padding: 45px 0 65px;}
.flow1:after{
	content: "";
	position: absolute;
	left: 0;
	bottom: -329px;
	background: url("../common/img/dec-pink-left.svg") center no-repeat;
	width: 158px;
	height: 658px;
	display: block;
}
.flow1 p{
	color: #0F3286;
	font-size: 2.4rem;
	line-height: 1.8;
	font-weight: bold;
	width: 60%;
	margin: 0 auto;
}
.flow1 p span.marker{
	color: #fff;
	background: #E65656;
	padding: 5px 10px;
	margin: 0 .5em;
}

/*------------------------------ responsive ------------------------------*/
@media screen and (max-width: 768px) {
	.lower-main figure.about-main{ background: none;}
	.flow1{ background: url("../common/img/flow1-bg-sp.svg") center top / 100% auto no-repeat; padding: 0 0 40px; position: relative; z-index: 10;}
	.flow1:after{ content: none;}
	.flow1 p{ font-size: 1.7rem;width: 90%; margin: 0 auto;}
}
.flow2{
	padding: 80px 0 80px;
	background: #F0EFEF;
}
.flow2 .wrap{ position: relative;}
.flow2 .wrap:before{
	content: "";
	position: absolute;
	top: -180px;
	right: -30px;
	background: url("../common/img/dec-aqua-s.svg") center no-repeat;
	width: 139px;
	height: 292px;
	display: block;
}
.flow2 .intro{
	color: #B9B9B9;
	text-align: left;
	position: absolute;
	left: 80px;
	top: -5px;
	z-index: 999;
	line-height: .8;
	-ms-writing-mode: tb-rl;
	-webkit-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
}
.flow2 .intro strong{
	display: inline-block;
	font-size: 8.8rem;
	font-weight: 500;
	letter-spacing: .1em;
}
.flow2 .intro span{
	font-size: 2rem;
	font-weight: 500;
	display: inline-block;
	margin-right: 30px;
}
.flow2 .bg-white{
	padding: 45px 70px 65px;
	border-radius: 0 100px 0 100px;
	margin-left: 100px;
	position: relative;
}
.flow2 .bg-white figure.abs{
	position: absolute;
	z-index: 1;
	top: -80px;
	left: 65px;
	width: 32%;
	border-radius: 300px;
}

.flow2 .bg-white figure.abs img{ border-radius: 300px;}

.flow2 .bg-white h2{
	text-align: left;
	position: relative;
	z-index: 2;
	float: right;
	margin-bottom: 45px;
}
.flow2 .bg-white h2 em{
	color: #fff;
	font-size: 2.4rem;
	letter-spacing: .2em;
	font-weight: bold;
	background: #0F3286;
	padding: 0 10px;
	display: inline-block;
	margin-bottom: 8px;
}
.flow2 .bg-white h2 span{
	color: #0F3286;
	font-size: 2.0rem;
	border: 1px solid #0F3286;
	text-align: center;
	padding: 0 15px;
}

.flow2 .bg-white .clm3 ul{
	margin: 200px 0 50px;
}

.flow2 .bg-white .clm3 ul li dl{
	display: flex;
	justify-content: space-between;
}

.flow2 .bg-white .clm3 ul li dl dt{
	width: 45%;
}

.flow2 .bg-white .clm3 ul li dl dd div span{
	font-size: 1.8rem;
	font-weight: 600;
	border-radius: 15px;
	padding: 1px 15px;
	color: #fff;
}

.flow2 .bg-white .clm3 ul li:first-child dl dd div span{
	background: #629FF7;
}
.flow2 .bg-white .clm3 ul li:nth-child(3) dl dd div span{
	background: #F79262 ;
}
.flow2 .bg-white .clm3 ul li:last-child dl dd div span{
	background: #F76287;
}

.flow2 .bg-white .clm3 ul li dl dd{
	width: 50%;
}

.flow2 .bg-white .clm3 ul li dl dd h3{
	font-size: 2.6rem;
	color: #0F3286;
}

.flow2 .bg-white .clm3 ul li dl dd p{
	text-align: left;
	font-size: 1.6rem;
	line-height: 1.7;
}
.flow2 .bg-white .clm3 ul li dl dd p a{
	border-bottom: 1px solid #333;
	
}

.flow2 .bg-white .clm3 ul li.triangle {
	height: calc(80px / 2);
	width: 60px;
	clip-path: polygon(0 0, 50% 50%, 100% 0);
	color:  #0F3286;
	background: #0F3286;
	margin: 20px auto 0;
}

.flow2 .bg-white dl.bg-gray{
	background: #F0EFEF;
	padding: 40px 50px;
	border-radius: 20px;
}
.flow2 .bg-white dl.bg-gray dt{
	font-size: 2.4rem;
	font-weight: bold;
	display: inline-block;
	position: relative;
	padding: 0 25px;
	margin-bottom: 20px;
}
.flow2 .bg-white dl.bg-gray dt:before,.flow2 .bg-white dl.bg-gray dt:after{
	content: "";
	width: 16px;
	height: 27px;
	position: absolute;
	bottom: 0;
	margin-bottom: 5px;
}
.flow2 .bg-white dl.bg-gray dt:before{ background: url("../common/img/about6-balloon1.svg") center no-repeat; left: 0;}
.flow2 .bg-white dl.bg-gray dt:after{ background: url("../common/img/about6-balloon2.svg") center no-repeat; right: 0;}
.flow2 .bg-white dl.bg-gray dd{ text-align: left;}
.flow2 .bg-white dl.bg-gray dd ul li{ display: inline-block; margin: 0 12px 10px 0;}
.flow2 .bg-white dl.bg-gray dd ul li div{ display: flex;}
.flow2 .bg-white dl.bg-gray dd figure{ background: #0F3286; display: flex; width: 37px; justify-content: center; align-items: center;}
.flow2 .bg-white dl.bg-gray dd div span{
	flex: 1;
	font-size: 1.6rem;
	font-weight: bold;
	display: inline-block;
	background: #fff;
	padding: 5px 10px;
}
.flow2 .bg-white dl.bg-gray dd div span em{ font-weight: bold;}
.flow2 .btn{padding-top: 30px;}

/*------------------------------ responsive ------------------------------*/
@media screen and (max-width: 768px) {
	.flow2{ padding: 50px 0 50px;}
	.flow2 .wrap:before{
		top: -200px;
		right: 10px;
		background: url("../common/img/dec-aqua-s.svg") center / 70px auto no-repeat;
		width: 70px;
		height: 146px;
	}
	.flow2 .intro{
		left: 0%;
		top: -10vw;
	}
	.flow2 .intro strong{ font-size: 4.5rem;}
	.flow2 .intro span{
		font-size: 1.1rem;
		line-height: 1.4;
		margin-right: 0;
	}
	.flow2 .bg-white{
		padding: 130px 15px 40px;
		border-radius: 0 50px 0 50px;
		margin-left: 0;
	}
	.flow2 .bg-white figure.abs{
		top: -8vw;
		left: inherit;
		right: 60px;
		width: 61.6%;
	}
	.flow2 .bg-white h2{
		text-align: center;
		float: none;
		margin-bottom: 20px;
	}
	.flow2 .bg-white h2 em{
		font-size: 1.5rem;
		padding: 0 3px;
		margin-bottom: 5px;
	}
	.flow2 .bg-white h2 span{
		font-size: 1.5rem;
	}
	.flow2 .bg-white h2 img{ width: 212px;}
	
	.flow2 .bg-white .clm3 ul{
		margin: 30px 0 30px;
	}
	.flow2 .bg-white .clm3 ul li dl{
		display: block;
	}
	.flow2 .bg-white .clm3 ul li dl dt{
		width: 80%;
		margin: 0 auto 10px;
	}
	.flow2 .bg-white .clm3 ul li dl dd div span{
		font-size: 1.6rem;
	}
	.flow2 .bg-white .clm3 ul li dl dd{
		width: 100%;
	}
	.flow2 .bg-white .clm3 ul li dl dd h3{
		font-size: 2.2rem;
		line-height: 1.3;
		margin: 5px 0 0;
	}

	.flow2 .bg-white dl.bg-gray{
		padding: 25px 0;
		border-radius: 10px;
	}
	.flow2 .bg-white dl.bg-gray dt{
		font-size: 1.6rem;
		line-height: 1.3;
		margin-bottom: 15px;
	}
	.flow2 .bg-white dl.bg-gray dt:before{ margin-right: 10px;}
	.flow2 .bg-white dl.bg-gray dt:after{ margin-left: 10px;}
	.flow2 .bg-white dl.bg-gray dd{ padding: 0 5%;}
	.flow2 .bg-white dl.bg-gray dd ul li{ display: block; margin: 0 0 7px;}
	.flow2 .bg-white dl.bg-gray dd figure{ width: 31px; min-height: 31px;}
	.flow2 .bg-white dl.bg-gray dd div span{
		font-size: 1.1rem;
		display: block;
		padding: 5px 10px;
	}
	.flow2 .bg-white dl.bg-gray dd div span em{ font-weight: bold;}
}

.flow3 .school1{
	background: url("../common/img/school-bg.svg") center top repeat;
	padding: 70px 0 100px;
}
.flow3 .school1 h2.title{
	color: #0F3286;
	font-size: 3.2rem;
	margin: 0 0 30px;
	line-height: 1.2;
}
.flow3 .school1 .sub{
	color: #0F3286;
	font-size: 1.8rem;
	position: relative;
	display: inline-block;
	font-weight: 600;
	
}
.flow3 .school1 .sub:before, .flow3 .school1 .sub:after{
	content: "";
	width: 16px;
	height: 27px;
	position: absolute;
	bottom: 0;
	margin-bottom: 0px;
}
.flow3 .school1 .sub:before{ background: url("../common/img/about6-balloon1.svg") center no-repeat; left: -30px;}
.flow3 .school1 .sub:after{ background: url("../common/img/about6-balloon2.svg") center no-repeat; right: -30px;}

.flow3 .school1 .ac-cont{ position: relative; text-align: left;}
.flow3 .school1 .ac-cont:after{
	content: "";
	position: absolute;
	top: 40%;
	right: -10px;
	background: url("../common/img/dec-gray-small.svg") center no-repeat;
	width: 128px;
	height: 269px;
	display: block;
}
.flow3 .school1 .ac-cont .wrap{
	max-width: 530px;
	padding: 0;
}
.flow3 .school1 .ac-cont h2{
	color: #fff;
	font-size: 2.2rem;
	font-weight: bold;
	background: url("../common/img/ac-open-white.svg") right 15px center no-repeat #81C1F8;
	padding: 10px 40px 10px 20px;
	border-radius: 8px;
	margin-top: 10px;
	cursor: pointer;
	position: relative;
}
.flow3 .school1 .ac-cont h2:after{
	position: absolute;
	z-index: -1;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 8px;
	background: #C6E9FF;
	display: block;
}
.flow3 .school1 .ac-cont h2.open{ background: url("../common/img/ac-close-white.svg") right 15px center no-repeat #81C1F8;}
.flow3 .school1 .ac-cont h2.open:after{ content: "";}
.flow3 .school1 .ac-cont ul{
	font-weight: bold;
	background: #C6E9FF;
	border-radius: 0 0 8px 8px;
	display: none;
}
.flow3 .school1 .ac-cont ul dl dt{
	color: #0F3286;
	font-size: 1.8rem;
	padding: 10px 40px 10px 20px;
	background: url("../common/img/ac-open.svg") right 15px center no-repeat;
	cursor: pointer;
	border-bottom: 1px solid #fff;
}
.flow3 .school1 .ac-cont ul dl dt.open{ background: url("../common/img/ac-close.svg") right 15px center no-repeat;}
.flow3 .school1 .ac-cont ul dl dd{
	font-size: 1.6rem;
	background: #F0EFEF;
	display: none;
}
.flow3 .school1 .ac-cont ul dl dd a{
	display: block;
	background: url("../common/img/ic-link.svg") right 15px center no-repeat;
	padding: 10px 40px 10px 20px;
	border-bottom: 1px solid #fff;
}
.flow3 .school1 .ac-cont ul dl dd a p{ margin-bottom: 10px;}
.flow3 .school1 .ac-cont ul dl dd a p:last-child{ margin-bottom: 0;}
.flow3 .school1 .ac-cont ul dl dd small{
	font-size: 1.4rem;
	font-weight: bold;
}
.flow3 .school1 .ac-cont ul dl dd span{
	color: #fff;
	font-size: 1.2rem;
	display: inline-block;
	background: #0F3286;
	padding: 3px 15px 4px;
	border-radius: 99px;
	margin-left: .5em;
}




/*------------------------------ responsive ------------------------------*/
@media screen and (max-width: 768px) {
	.lower-main figure.school-main{ background: none;}
	.flow3 .school1{
		background: none;
		padding: 50px 0 100px;
	}
	.flow3 .school1 h2.title{
		font-size: 2.8rem;
		margin: 5px 0 30px;
	}
	.flow3 .school1 .sub{
		font-size: 1.8rem;
		line-height: 1.3;
	}
	.flow3 .school1 .sub:before, .flow3 .school1 .sub:after{
		margin-bottom: 5px;
	}

	.flow3 .school1 .ac-cont:after{
		top: -75px;
		right: -30%;
		background: url("../common/img/dec-gray-small.svg") center / 64px auto no-repeat;
		z-index: -1;
	}
	.flow3 .school1 .ac-cont h2{ margin-top: 5px;}
	.flow3 .school1 .ac-cont ul dl dd a p{ margin-bottom: 5px;}

	
}


.flow4 h2, .flow5 h2{
	color: #0F3286;
	font-size: 3.2rem;
	margin: 0 0 30px;
	line-height: 1.2;
}
.flow4 p, .flow4 p{
	text-align: left;
	font-size: 1.6rem;
	line-height: 1.7;
	width: 60%;
	margin: 0 auto 15px;
}
.flow4 h3{
	margin-bottom: 20px;
}

.flow5 .spsCnt_inner{
	margin-bottom: 50px;
}

.flow-imgSet ul{
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	position: relative;
	z-index: 10;
	
}
.flow-imgSet ul li{
	width: 25%;
}
.mb{
	margin-bottom: 200px;
}
/*------------------------------ responsive ------------------------------*/
@media screen and (max-width: 768px) {
	.flow4 h2, .flow5 h2{
		color: #0F3286;
		font-size: 2.6rem;
		width:95%;
		margin: 0 auto 30px;
		line-height: 1.2;
	}
	.flow4 p, .flow5 p{
		text-align: left;
		font-size: 1.6rem;
		line-height: 1.7;
		width: 90%;
		margin: 0 auto 15px;
	}
	.flow5 .spsCnt_inner{
		margin-bottom: 50px;
	}
	.flow-imgSet ul li{
		width: 50%;
	}
	.mb{
		margin-bottom: 120px;
	}
}



.flow2 .no_admission_fee div{
	width: 80%;
	margin: 0 auto 20px;
}
.flow4 .no_admission_fee div{
	width: 40%;
	margin: 0 auto 20px;
}

/*------------------------------ responsive ------------------------------*/
@media screen and (max-width: 768px) {
	.flow2 .no_admission_fee div{
		width: 90%;
		margin: 0 auto 20px;
	}
	.flow4 .no_admission_fee div{
		width: 70%;
	margin: 0 auto 20px;
}
	
}