main img{
	border-radius: 0;
}

main a{
	text-decoration:none;
}


.topImage{
	position: relative;
}

.fader{
	position:relative;	
	margin:0;
	padding:0;
	width:calc(100% - 1.5em);

	margin-left:1.5em;
	display:none;
	z-index:2;
}

.fader li{
	position:relative;
	height:88vw;
	overflow: hidden;
}

.fader img{
	width:100%;
	height:88vw;
	position: relative;
}

.fader .msg{
	position: absolute;
	top:1.5em;
	left:1.5em;
	font-size:4vw;		
	transform-origin:left;
	z-index: 1;
}

.fader .msg p{
	position: relative;
	display:inline;
	font-family:'Noto Serif JP', serif, '游明朝', YuMincho, 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', 'HG明朝E', 'MS P明朝', 'MS 明朝', serif;
	font-weight: 500;	
	letter-spacing:0.1em;	
	margin:0 0.5em 0 0;
	padding:0.6em 0.15em;
	vertical-align: top;
	background:#fff;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
}

legend.topTitle{
	position: relative;
	margin-top:-23.3vw;		
}

legend.topTitle .topLogo {
	position: relative;
	width:77.7vw;
	left:50%;
	transform: translateX(-50%);
	z-index:11;
}

.zoom{
	animation: zoom 15s 0s;
}
@keyframes zoom {
	0% {
	}	
	100% {
		transform: scale(1.25) ;
	}
}

.slide{
	animation: slide 12s 0s;
}

@keyframes slide {
	0% {
		opacity: 0;
		left:-1.5em;
	}
	5% {
		opacity: 1;
		left:1.5em;
	}
}

.transparent{
	animation: transparent 6s 0s;
}

@keyframes transparent {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
}


@media (min-width: 568px) {
	.fader{
		width:calc(100% - ((100% - 540px) / 2));
		margin-left:calc((100% - 540px) / 2);
	}
	.fader li,
	.fader img{
		height:420px;
	}
	.fader .msg{
		font-size:1.22em;
	}
	
	legend.topTitle {
		margin-top:-96px;		
	}
	legend.topTitle .topLogo {
		width:280px;
	}	
}

@media (min-width: 768px) {
	.fader{
		width:calc(100% - ((100% - 720px) / 2));
		margin-left:calc((100% - 720px) / 2);
	}
	.fader li,
	.fader img{
		height:480px;
	}
	.fader .msg{
		font-size:1.33em;
	}
	legend.topTitle {
		margin-top:-110px;
	}
	legend.topTitle .topLogo {
		width:320px;
	}	
}

@media (min-width: 1024px) {
	.fader{
		width:calc(100% - ((100% - 980px) / 2));
		margin-left:calc((100% - 980px) / 2);
	}
	.fader li,
	.fader img{
		height:540px;
	}
	.fader .msg{
		font-size:1.55em;
	}
	
	legend.topTitle {
		margin-top:-120px;
	}
	legend.topTitle .topLogo {
		width:360px;
	}	
}

@media (min-width: 1280px) {
	.fader{
		width:1200px;
		margin-left:auto;
		margin-right:auto;
	}
	.fader li,
	.fader img{
		height:600px;
	}
	.fader .msg{
		font-size:1.66em;
	}
	legend.topTitle {
		margin-top:-130px;
	}
	legend.topTitle .topLogo {
		width:400px;
	}	
}

.backSlide{
	width:6000px;
	display:none;
	position: absolute;
	top:0;
	padding:0;
	margin:0;
	z-index:1;
	left:calc((100% - 1200px) / 2 - 2400px);
}


.backSlide li,
.backSlide img{
	width:1200px;
	height:600px;
}

@media (min-width: 1280px) {
	.backSlide{
		display:block;
		opacity:.2;
	}
}

legend #pc_banner .banner{
	display:none;
	z-index:10;
}

@media (min-width:768px) {
	legend #pc_banner .banner{
		display:block;
		position: absolute;
		overflow: hidden;
		padding:1.5em 0 3em 0;
		width:calc(50% - 1em);		
		left:calc(720px / 2 + (100% - 720px) / 2 + 1em);
		top:-1.5em;
	}
	
	legend #pc_banner .banner img.frame{
		position: absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
		object-position: left center;
		transform-origin: left center;		
	}
	
	
	legend #pc_banner .banner a{
		position: relative;
		display: block;
		left:calc((50% - 1em) - 180px - (100% - 720px) / 2);
		height:240px;
		width:180px;
		z-index:10;
		opacity: 1 !important;
	}
	
	legend #pc_banner .banner img{
		position: relative;
		vertical-align: top;
		width:100%;
		height:100%;
		transition: .3s;
	}

	legend #pc_banner .banner a:hover img{
		opacity: 0.6;
	}
	
}


@media (min-width:1024px) {
	legend #pc_banner .banner{
		left:calc(980px / 2 + (100% - 980px) / 2 + 1.5em);
	}
	
	legend #pc_banner .banner a{
		left:calc((50% - 1.5em) - 240px - (100% - 980px) / 2);
		height:320px;
		width:240px;
	}
}

@media (min-width:1280px) {
	legend #pc_banner .banner{
		width:calc(50% - 0em);		
		left:calc(1200px / 2 + (100% - 1200px) / 2 + 2em);
	}
	
	legend #pc_banner .banner a{
		left:calc((50% - 2em) - 300px - (100% - 1200px) / 2);
		height:400px;
		width:300px;
	}
}

div.more_pick{
	display: block;
	padding: 0.25em 0.5em 0.3em 0.5em;
	width:5em;
	text-align:center;
	
	position: absolute;
	opacity:1 !important;
	font-family: 'Montserrat', sans-serif;
	font-weight:500;
	z-index:12;
	bottom:-1em;
	right:-1em;
	border:0.5px solid rgb(218, 83, 110);
	color:white;
}


div.more_pick::before{
	content: "";
	display: inline-block;
	position: absolute;
	top:0.75em;
	right: 4px;
	width: 4px;
	height: 4px;
	margin-right:0.5em;
	
	border-top: 2px solid white;
	border-right: 2px solid white;
	transform: rotate(45deg);
	transition: .3s;
}

div.more_pick::after{
	content:'';
	display: block;
	position: absolute;
	top:0;
	left:0;
	height:100%;
	width:100%;
	transition:background 0.3s;
	background-size: 200% auto;
	background-image: -webkit-gradient(linear, left top, right top, from(rgb(218, 83, 110)), color-stop(50%, rgb(218, 83, 110)),color-stop(50%, #ffffff), to(#ffffff));
	overflow: hidden;
	z-index:-1;
}

div.more_pick:hover::after {
	background-position: right center;
}

div.more_pick:hover{
	color:rgb(218, 83, 110);
}
div.more_pick:hover::before {
	right:2px;
	border-color:rgb(218, 83, 110);	
}




.gakuen_life,
.gakuen_logo{
	position:relative;
	z-index:100;
}


main .news {
	position: relative;
	margin:1em 0 4em 0;	
	z-index:20;
}

main .news .normal{
	box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
	margin:0 1.5em;
	padding:0.5em 0 1.5em 0;
	position: relative;
	z-index:22;
}

main .news .important .wrap{
	background:rgb(218, 83, 110,.6);
	margin:3em 0 2em 0;
	padding:0.5em 1.5em 1em 1.5em;
	position: relative;
	z-index:22;
}

main .news .important .wrap::after{
	content: '';
	position: absolute;	
	background:#fff;	
	width:100%;
	width:calc(100% - 3em);
	height:calc(100% - 2em);
	left:1.5em;
	top:1em;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;	
}

main #news,
main #news_important{
	padding:0 1em;
	margin-bottom:1.25em;
	position: relative;
	z-index:23;
}

main .colum_title{
	text-align:center;
	padding-bottom:0;
	margin-bottom:1em;
	position: relative;
	z-index:25;
}


main .colum_title h1,
main .colum_title h2{
	color:rgb(149,192,236);		
	font-family: 'Montserrat', sans-serif;
	font-weight: 300;
	font-size:1.8em;
	line-height: 1.2em;
	margin:0;
	text-align:center;
	padding:0;
}


main .important h1{
	color:rgb(218, 83, 110) !important;
	margin-top:-0.88em;
	width:10em;
	left:50%;
	transform: translateX(-50%);
}


main .normal .colum_title h2{
	color:#333!important;
}


main .colum_title h2.pickup{
	color:#f7b63d!important;
}


main .colum_title p{
	font-family: 游ゴシック, YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Verdana, sans-serif;
	font-weight: bold;
	margin:0;
}

.mb-none{
	display:none;
}
.tb-none{
	display:none;
}	
.pc-none{
	display:none;
}	


.newsData li.mb-none,
.topicData li.mb-none{
	display:none;
}





/* sm */
@media (min-width: 568px) {

	main .news {
		margin:4em 0;	
	}	
	
	main .news .normal{		
		max-width:540px;
		margin:0 auto;
	}
	main #news{
		padding:0 1.5em;
	}
	
	main .news .important{
		max-width:100%;
		padding-bottom:2em;
	}

	main .news .important .wrap::after{
		max-width:540px;
		width:100%;
		top:1.5em;		
		height:calc(100% - 3em);
		left:50%;
		transform: translateX(-50%);
	}
	main #news_important{
		max-width:calc(540px - 3em);
		margin:0 auto;
	}

	main .colum_title p{
		padding-bottom:0.5em;
	}
	
	main .colum_title h1,
	main .colum_title h2{
		font-size:2.4em;
	}
	
	main .important h1{
		margin-top:-0.77em;
	}

	.newsData li.mb-none,
	.topicData li.mb-none{
		display:block;
	}
	.newsData li.tb-none,
	.topicData li.tb-none{
		display:none;
	}	
	.newsData li.pc-none,
	.topicData li.pc-none{
		display:none;
	}	
	
}

/* md */
@media(min-width: 768px) {
		
	main .news {
		max-width:720px;
		display: flex;
		align-items: flex-start;
		margin:3em auto;
	}	
	
	main .news .normal{		
		width:calc((50% - 1em));
		max-width:100%;
		
		margin-left:1em;
		
		box-shadow: none;
	}
	main #news{
		padding:0;
		margin-bottom:2em;
	}
	
	main .news .important{
		width:calc(50% - 1em);
		height:auto;
		
		margin:-1em 1em 0 0;
	}

	main .news .important .wrap::after{
		top:1em;		
		height:calc(100% - 2em);
		width:calc(100% - 2em);
		max-width:100%;
		
		left:50%;
		transform: translateX(-50%);
		box-shadow: none;		
	}
	main #news_important{
		max-width:calc(100% - 3em);
		margin:0 auto;
	}
	
	.newsData li.tb-none,
	.topicData li.tb-none{
		display:none;
	}	
	.newsData li.pc-none,
	.topicData li.pc-none{
		display:none;
	}
	
	main .colum_title p{
		padding-bottom:1em;
	}
	
}


/* lg */
@media (min-width: 1024px) {
	main .news {
		max-width:980px;
		margin:4em auto 4em auto;
	}	

	
	main .news .normal{		
		width:calc(50% - 1em);
		margin-left:1em;
		
	}
	
	main .news .important{
		width:calc(50% - 1em);
		height:auto;
		
		margin-right:1em;
	}

	.newsData li.tb-none,
	.topicData li.tb-none{
		display:block;
	}	
	
	.newsData li.pc-none,
	.topicData li.pc-none{
		display:none;
	}
	
}

@media (min-width: 1280px) {

	main .news {
		max-width:1200px;
	}	

	main .news .normal{		
		width:calc(50% - 1.5em);
		margin-left:1.5em;
	}
	
	main .news .important{
		width:calc(50% - 1.5em);
		height:auto;
		
		margin-right:1.5em;
	}	
	.newsData li.pc-none,
	.topicData li.pc-none{
		display:block;
	}
	
	.topicData {
		position: relative;
		z-index:10;
		overflow: hidden;
	}
	
}

main img.recruit{
	width:calc(100% - 3em);
	margin:0 0 3em 1.5em;
}

main img.senbatsu{
	width:calc(100% - 3em);
	margin:0 0 1.5em 1.5em;
	border:1.5px solid #a40b5d;
}



@media (min-width: 768px) {
	main img.recruit {
		width:100%;
		margin:0;
	}
	main img.senbatsu {
		width:100%;
		margin:0 0 1.5em 0;
	}
}



main #topics{
	padding:0 1.5em;	
}

main #topics img{
	border-radius: .125rem;
}

@media (min-width: 568px) {
	main #topics{
		max-width:540px;
		margin-left:auto;
		margin-right:auto;
		padding:0;
	}
}
@media (min-width: 768px) {
	main #topics{
		max-width:720px;
	}
}
@media (min-width: 1024px) {
	main #topics{
		max-width:980px;
	}
}

@media (min-width: 1280px) {
	main #topics{
		max-width:100%;
	}
	
	main #topics img{
		border-radius:0;
	}
}



/*			   	*/
/*	pickBanner  */
/*			   	*/
main #tablet_banner .banner{
	display:none;
}
main #tablet_banner .banner img{
	vertical-align: top;
}


@media (min-width:568px) {
	main #tablet_banner .banner{
		margin:2em auto 5em auto;
		width:540px;
		display:block;
	}
}
@media (min-width:768px) {
	main #tablet_banner .banner{
		display:none;
	}
}


/*			   	*/
/*	topBanner  	*/
/*			   	*/

main #banner{
	margin-bottom:4em;
}

main ul.topBanner {
	position:relative;
	margin:0;
	padding:0;
	list-style:none;
}

main .topBanner li,
main .topBanner img{
	height:77vw;
}


main .topBanner li{
	position:relative;
	padding:0;
	margin:0;
	margin-bottom:1.5em;
}


main .topBanner .swip{
	position: absolute;
	left:1.5em;
	width:calc(100% - 1.5em);
	height:100%;
	overflow: hidden;
}



main .topBanner img{
	position: relative;
	z-index:1;
}

main .topBanner .back{
	display: block;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:2;
	opacity:.55;
	transition: .4s;		
}

main .topBanner h3{
	width:100%;
	text-align:center;
	font-family:  'Noto Serif JP', serif, '游明朝', YuMincho, 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', 'HG明朝E', 'MS P明朝', 'MS 明朝', serif;
	font-weight: 500;
	color:#fff;
	font-size:7.5vw;
	letter-spacing: 0.05em;
	margin:0.5em 0;
	z-index:4;
}

main .topBanner p{
	margin:0 0 0.5em 1em;
	line-height:1.5em;
}

main .topBanner a:hover{
	opacity:1;
}

main .topBanner .message{
	position: absolute;
	bottom:1.5em;
	left:0;
	width:calc(100% - 1.5em);
	line-height: 1.75em;
	
    font-family: 游ゴシック, YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Verdana, sans-serif;
    font-weight: bold;	
	color:white;
		
	z-index:3;
}



main .topBanner .message::before{
	content: "";
	display: inline-block;
	position: absolute;
	top:50%;
	right: 6px;
	width: 6px;
	height: 6px;
	margin-right:0.5em;
	
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	transform: rotate(45deg);
	transition: .3s;
}


.topBanner li:hover .message::before{
	right:2px;	
}

.topBanner li:hover .back{
	opacity:0;
}



/* sm */
@media (min-width: 568px) {
	
	main .topBanner {
		display:flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	
	main .topBanner li{
		margin:0;
		margin-bottom:1.5em;		
	}
	
	main .topBanner h3{
		font-size:1.63em;
	}
		
	main .topBanner .swip{
		left:0;
		width:100%;
	}
	
	/*偶数の場合*/
	main .topBanner.even li,
	main .topBanner.even li img{
		height:280px;
	}
	
	main .topBanner.even li{
		width:50%;
	}

	main .topBanner.even li:nth-child(even) .message{
		margin-left:1.5em;
	}
	
	
	/*奇数の場合*/
	main .topBanner.odd{
		width:540px;
		margin:0 auto;
	}

	main .topBanner.odd li,
	main .topBanner.odd li img{
		height:240px;
	}

	main .topBanner.odd li{
		width:100%;
	}
		
	main .topBanner.odd .message{
		width:50%;		
	}
	main .topBanner.odd li:nth-child(even) .message{
		margin-left:50%;
	}
}


/* md */
@media(min-width: 768px) {

	/*偶数の場合*/	
	main .topBanner.even{
		width:720px;
		margin-left:auto;
		margin-right:auto;
	}

	main .topBanner.even li,
	main .topBanner.even li img{
		height:300px;
	}
	
	main .topBanner.even li{
		width:calc((100% - 2em) / 2);
		margin:0 2em 2em 0;
	}
	
	main .topBanner.even li:nth-child(2n){
		margin-right:0;
	}

	main .topBanner.even .message{
		width:calc(100% - 1.5em);			
	}	

	main .topBanner.even li:nth-child(even) .message{
		margin-left:0;
	}
	
	
	/*奇数の場合*/
	main .topBanner.odd{
		width:100%;
	}
	
	main .topBanner.odd.one {
		width:540px;
	}	
	
	main .topBanner.odd li,
	main .topBanner.odd li img{
		height:320px;
	}
	main .topBanner.odd li{
		width:calc(100% / 3);
	}
	
	main .topBanner.odd.one li{
		width:100%;
	}	
	
	main .topBanner.odd .message{
		width:100%;
	}
	
	main .topBanner.odd li:nth-child(even) .message{
		margin-left:0;
	}	
}


/* lg */
@media (min-width: 1024px) {
	
	main .topBanner p{
		margin-left:1.5em;
		margin-bottom:0.75em;
	}
	
	
	/*偶数の場合*/	
	main .topBanner.even{
		width:100%;
	}

	main .topBanner.even li,
	main .topBanner.even li img{
		height:320px;
	}
	
	main .topBanner.even li{
		width:calc((100% - 2em) / 2);
		margin-right:2em;
	}
	main .topBanner.even li:nth-child(even){
		margin-right:0;
	}
	
	main .topBanner.even .message{
		width:calc(100% - (100% - 490px) - 2.5em);
		margin-left:calc(100% - (490px - 1em));
	}
	
	main .topBanner.even li:nth-child(even) .message{
		margin-left:1.5em;
	}

	/*奇数の場合*/
	main .topBanner.odd li,
	main .topBanner.odd li img{
		height:360px;
	}
}



/* lg */
@media (min-width: 1280px) {
	
	main .topBanner p{
		margin-left:0;
		text-align:center;
	}
	
	/*偶数の場合*/	
	main .topBanner.even li,
	main .topBanner.even li img{
		height:400px;
	}
	
	main .topBanner.even li{
		width:25%;
		margin-right:0;
	}	

	main .topBanner.even.two{
		width:980px;
	}	
	
	main .topBanner.even.two li{
		width:calc((100% - 3em) / 2);
		margin-right:3em;
	}	
	main .topBanner.even.two li:last-child{
		margin-right:0;
	}

	
	main .topBanner.even .message,
	main .topBanner.even li:nth-child(even) .message{
		width:100%;
		margin-left:0;
	}
	
	
	/*奇数の場合*/
	main .topBanner.odd{
		width:1200px;
	}
	
	main .topBanner.odd li,
	main .topBanner.odd li img{
		height:400px;
	}
	
	main .topBanner.odd li{
		width:calc((100% - 6em) / 3);
		margin-right:3em;
	}
	main .topBanner.odd li:nth-child(3n),
	main .topBanner.odd li:last-child{
		margin-right:0;
	}
	
	main .topBanner.odd .message{
		width:100%;
	}
}





a.more{
	display: inline-block;
	padding: 0.5em 2.5em 0.5em 2.5em;
	text-align:center;
	position: relative;
	opacity:1 !important;
	
	border:0.5px solid #333;
	
	margin:0;	
	left:50%;
	transform: translateX(-50%);
	z-index:2;
}

a.more span{
	font-family: 'Montserrat', sans-serif;
	font-weight:500;
}

a.more sign{
	position: relative;
}

a.more .sign::before{
    content: '';
    /*絶対配置で下線の位置を決める*/
	position: absolute;
    bottom:12px;
    right:1em;
    width:12px;
    height: 1px;
	background:#333;
	transition: all .3s;	
}

a.more .sign::after{
    content: '';
	position: absolute;
    bottom:14px;
    right:1em;
    width: 7px;
    height:1px;
	background:#333;
    transform: rotate(35deg);
    transition: all .3s;	
}


/* Effect1
*************************************** */
/* 擬似要素の共通スタイル */
a.more::after,
a.more::before,
.more_inner::after,
.more_inner::before {
	background-color:#ddd;
	content: '';
	display: block;
	position: absolute;
	z-index: 10;
	transition: all .3s ease;
	-webkit-transition: all .3s ease;
}
/* 左上へ配置 */
a.more::after {
	width: 0px;
	height: 0.5px;
	top: -0.5px;
	left: -0.5px;
}
/* 右下へ配置 */
a.more::before {
	width: 0px;
	height: 0.5px;
	right: -0.5px;
	bottom: -0.5px;
}
/* 左下へ配置 */
.more_inner::after {
	width: 0.5px;
	height: 0px;
	left: -0.5px;
	bottom: -0.5px;
}
/* 右下へ配置 */
.more_inner::before {
	width: 0.5px;
	height: 0px;
	top: -0.5px;
	right: -0.5px;
}

/* hover */

a.more:hover{
	border-color:#fff;
}

a.more:hover::after,
a.more:hover::before {
	width: 100%;
	width: calc(100% + 0.5px);
}
a.more:hover .more_inner::after,
a.more:hover .more_inner::before {
	height: 100%;
	height: calc(100% + 0.5px);
}
a.more:hover .sign::before,
a.more:hover .sign::after{
    right:0.5em;
}





main .school{
	margin-left:1.5em;
	margin-bottom:3em;
	width:calc(100% - 3em);
	height:100%;
	position: relative;
}

main .school h1{
	position:absolute;
	z-index:9;
	
	display:inline;
	font-family:'Noto Serif JP', serif, '游明朝', YuMincho, 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', 'HG明朝E', 'MS P明朝', 'MS 明朝', serif;
	font-weight: 500;	
	letter-spacing:0.05em;	
	text-align: left;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	
	font-size:8vw;
	
	right:-0.5em;
	top:-2em;
}

main .school a{
	display:block;
}


main .school img{
	height:360px;
	top:0;
	position: absolute;
	z-index:1;
}

main .school .blur{
	width:100%;
	height:180px;
	top:180px;
	position: absolute;
	z-index:2;
	background-image: -webkit-gradient(linear, center top, center bottom, from(rgb(255,255,255,.1)), to(rgb(255,255,255,1)));
}

main .school .blur::after{
	content: '';
	display:block;
	width:100%;
	height:120px;
	top:-180px;
	position: absolute;
	z-index:2;
	background-image: -webkit-gradient(linear, center bottom, center top, from(rgb(255,255,255,.1)), to(rgb(255,255,255,1)));
}


main .school .first,
main .school .groupLink{
	position: relative;
	z-index:4;
	top:0;
}

main .school .first{
	margin-left:1em;
	width:calc(100% - 2em);
}

main .school .first a::before{
	content: "";
	display: inline-block;
	position: absolute;
	top:0.7em;
	right: 3px;
	width: 4px;
	height: 4px;
	margin-right:0.5em;
	
	border-top: 2px solid #333;
	border-right: 2px solid #333;
	transform: rotate(45deg);
	transition: .3s;
}

main .school .first a:hover::before{
	right:0;
}




main .school .groupLink{
	display:none;
}


main .school h3,
main .school p{
	margin:0 0 0.5em 0;
}


main .school ul{
	position: relative;
	background:#fff;
	margin:0;	
	margin-top:66px;
	width:calc(100% - 3em);
	z-index:3;
	list-style:none;
	padding:1em 1.5em;
}



main .school li{
	border-bottom:0.5px dotted #ddd;
	margin-bottom:0.5em;
	padding-bottom:0.5em;
	position: relative;
	z-index:4;	
}

main .groupLink li::before,
main .groupLink li::after{
	content:'';
	display:block;
	position: absolute;
	top:0.5em;
	right:0.5em;
	width:1em;
	height:0.75em;
	border:0.5px solid rgb(149,192,236, .5);
	background: #fff;
}
main .groupLink li::after{
	top:0.75em;
	right:0.25em;
}

main .groupLink li{
	padding-left:2.5em;
}

main .groupLink li a::before{
	content:'';
	display:block;
	position: absolute;
	top:-0.1em;
	right:0;
	left:0;
	height:1.8em;
}

main .groupLink li:nth-child(1) a::before{
	background:url("../img/mark_logo_you.svg") no-repeat;
}
main .groupLink li:nth-child(2) a::before{
	background:url("../img/mark_logo_syo.svg") no-repeat;
}
main .groupLink li:nth-child(3) a::before{
	background:url("../img/mark_logo_dai.svg") no-repeat;
}
main .groupLink li:nth-child(4) a::before{
	background:url("../img/mark_logo_r_a.svg") no-repeat;
}
main .groupLink li:nth-child(5) a::before{
	background:url("../img/mark_logo_r_b.svg") no-repeat;
}



/* sm */
@media (min-width: 568px) {
	main .school{
		margin-left:0;
		width:100%;
	}
	
	main .school h1{
		margin-right:calc((100% - 540px) / 2);
		font-size:2.4em;
		right:-0.25em;		
	}
	main .school .first{
		margin-left:calc((100% - 540px) / 2);
		max-width:540px;
	}
	
	main .school ul{
		box-shadow: rgba(0, 0, 0, 0.1) 0px -7.5px 8px -3px, rgba(0, 0, 0, 0.05) 0px -5px 4px -2px;		
	}	
}
@media (min-width: 768px) {
	main .school h1{
		margin-right:calc((100% - 720px) / 2);
		font-size:2.8em;
	}
}


@media (min-width: 1024px) {
	main .school h1{
		margin-right:calc((100% - 980px) / 2);
	}
	
	main .school .first,
	main .school .groupLink{
		width:50%;
		max-width:calc((980px - 2em) / 2);
		margin-left:calc((100% - 980px) / 2);		
		float:left;
	}

	main .school .groupLink{
		display:block;
		margin-left:2em;
	}
}


@media (min-width: 1280px) {
	
	main .school h1{
		margin-right:calc((100% - 1200px) / 2);
	}
	
	main .school .first,
	main .school .groupLink{
		max-width:calc((980px - 3em) / 2);
	}

	main .school .groupLink{
		display:block;
		margin-left:3em;
	}
}



main .bottom{
	text-align:center;
	position: relative;
	width:100%;
	height:225px;
	margin-top:4em;
	z-index:1;
}

main .bottom p{
	margin-bottom:0;
	position: relative;
	z-index:2;
}


main .bottom img.classi{
	width:200px;
	margin:0;
	position: relative;
	z-index:2;
}

main .bottom img.bottomImg{
	width:auto;
	height:25vw;
	position: absolute;
	bottom:0;
	right:0;
}


.slide-arrow {
	position: absolute;
	top: 115px;
	cursor: pointer;
	z-index:1;
	transition: .3s;
}

.slide-arrow:hover {
	opacity:.6;
}


.prev-arrow {
	border-bottom: solid 3px #666;
	border-left: solid 3px #666;
	width: 10px;
	height: 10px;
	transform: rotate(45deg);
	
	left: 44px;
}


.next-arrow {
	border-top: solid 3px #666;
	border-right: solid 3px #666;
	width: 10px;
	height: 10px;
	transform: rotate(45deg);
	
	right: 44px;
}





/* sm */
@media (min-width: 568px) {
	main .bottom img.bottomImg{
		height:128px;
	}
}

/* md */
@media(min-width: 768px) {
}


/* lg */
@media (min-width: 1024px) {
}

/* xl */
@media(min-width: 1280px) {
	main .bottom img.bottomImg{
		height:10vw;
	}
}