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

#main_img_gl{
	width: 100%;
	position: relative;
}

.logo_box{
	width: 960px;
	margin: 0 auto;
}

.main_logo{
	float: left;
	margin: 110px 0 0 43px;
}

.txt_ball h2{
	display: none;
}

.rotation{
	float: right;
	margin: 42px 25px 0px 0px;
	position: relative;
	overflow: hidden;
	z-index: 5;
}

.load {
    -webkit-animation: spin 30s linear infinite;
    -moz-animation: spin 30s linear infinite;
    -ms-animation: spin 30s linear infinite;
    -o-animation: spin 30s linear infinite;
    animation: spin 30s linear infinite;
}

@-webkit-keyframes spin {
	0% {-webkit-transform: rotate(0deg);}
	100% {-webkit-transform: rotate(360deg);}
}
@-moz-keyframes spin {
	0% {-moz-transform: rotate(0deg);}
	100% {-moz-transform: rotate(360deg);}
}
@-ms-keyframes spin {
	0% {-ms-transform: rotate(0deg);}
	100% {-ms-transform: rotate(360deg);}
}
@-o-keyframes spin {
	0% {-o-transform: rotate(0deg);}
	100% {-o-transform: rotate(360deg);}
}
@keyframes spin {
	0% {transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
}

.inner-wrap{
	background-color: inherit;
}

.rotation_txt{
	position: absolute;
	left: 160px;
	top: 210px;
}

.slide_navbox{
	position: relative;
}

.simply-scroll-list li {
    width: 264px;
    height: 180px;
}

#loopSlide{
	min-width: 960px;
	bottom: 230px;
}

#main_img_gl nav{
	background: #fff center center fixed ;
	position: absolute;
	top: -50px;
	width: 100%;
	min-width: 960px;
	padding: 50px 0px 130px;
}

.main_nav01, .main_nav02,
.main_nav03, .main_nav04{
	float: left;
	padding: 10px 41px;
	border-left: solid 1px #b9b9ba;
	/* height: 65px; */
}

.main_nav05{
	float: right;
	padding: 10px 41px;
	border-left: solid 1px #b9b9ba;
	border-right: solid 1px #b9b9ba;
}



#school_circle{
	position: relative;
	max-width: 960px;
	margin: 0 auto;
	height: 220px;
}

#school_circle a:nth-child(1) p{
	top: 110px;
	left: 28px;
}

#school_circle a:nth-child(2) p{
	top: 110px;
	left: 21px;
}

#school_circle a:nth-child(3) p{
	top: 110px;
	left: 21px;
}

#school_circle a:nth-child(4) p{
	top: 100px;
	left: 32px;
}

.ike_description{
	margin-bottom: 10px;
	font-weight: bolder;
}

.nari_description{
	margin-bottom: 10px;
	font-weight: bolder;
}

.neri_description{
	margin-bottom: 10px;
	font-weight: bolder;
}

.hika_description{
	margin: 10px 0 15px;
	font-size: 1.250rem !important;
	letter-spacing: 2px;
}

#school_circle a{
	height: 226px;
	width: 223px;
	display: block;
	position: absolute;
	border-radius: 50%;
	overflow: hidden;
	white-space: nowrap;
	text-indent: 100%;
}

#school_circle a h2{
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}

#school_circle a h2:before{
	position: absolute;
	top: 0px;
	left: 0;
	height: 226px;
	width: 223px;
	content: "";
	z-index: 2;
}

#school_circle a:after{
	position: absolute;
	top: 0px;
	left: 0;
	height: 226px;
	width: 223px;
	content: "";
}

#school_circle .ike_btn{
	top: -70px;
	left: 0px;
}

#school_circle .ike_btn h2:before{
	background: url("/en/common/img/common/ikebukuro.png") no-repeat;
	background-size: contain;
    backface-visibility:hidden;
    -webkit-transition:all .5s;
    -moz-transition:all .5s;
    transition:all .5s;
}

#school_circle .ike_btn:after{
	background: url("/en/common/img/common/ikebukuro_back.png") no-repeat;
	background-size: contain;
    -webkit-transform:rotateY(-180deg);
    -moz-transform:rotateY(-180deg);
    transform:rotateY(-180deg);
    -webkit-transition:all .5s;
    -moz-transition:all .5s;
    transition:all .5s;
}

#school_circle .ike_btn:hover h2:before{
	-webkit-transform:rotateY(180deg);
    -moz-transform:rotateY(180deg);
    transform:rotateY(180deg);
}



#school_circle .ike_btn:hover:after{
	-webkit-transform:rotateY(0);
    -moz-transform:rotateY(0);
    transform:rotateY(0);
}

#school_circle .nari_btn{
	left: 246px;
	top: -7px;
}

#school_circle .nari_btn h2:before{
	background: url("/en/common/img/common/narimasu.png") no-repeat;
	background-size: contain;
    backface-visibility:hidden;
    -webkit-transition:all .5s;
    -moz-transition:all .5s;
    transition:all .5s;
}

#school_circle .nari_btn:after{
	background: url("/en/common/img/common/narimasu_back.png") no-repeat;
	background-size: contain;
    -webkit-transform:rotateY(-180deg);
    -moz-transform:rotateY(-180deg);
    transform:rotateY(-180deg);
    -webkit-transition:all .5s;
    -moz-transition:all .5s;
    transition:all .5s;
}

#school_circle .nari_btn:hover h2:before{
	-webkit-transform:rotateY(180deg);
    -moz-transform:rotateY(180deg);
    transform:rotateY(180deg);
}



#school_circle .nari_btn:hover:after{
	-webkit-transform:rotateY(0);
    -moz-transform:rotateY(0);
    transform:rotateY(0);
}

#school_circle .neri_btn{
	right: 246px;
	top: -7px;
}

#school_circle .neri_btn h2:before{
	background: url("/en/common/img/common/nerima.png") no-repeat;
	background-size: contain;
    backface-visibility:hidden;
    -webkit-transition:all .5s;
    -moz-transition:all .5s;
    transition:all .5s;
}

#school_circle .neri_btn:after{
	background: url("/en/common/img/common/nerima_back.png") no-repeat;
	background-size: contain;
    -webkit-transform:rotateY(-180deg);
    -moz-transform:rotateY(-180deg);
    transform:rotateY(-180deg);
    -webkit-transition:all .5s;
    -moz-transition:all .5s;
    transition:all .5s;
}

#school_circle .neri_btn:hover h2:before{
	-webkit-transform:rotateY(180deg);
    -moz-transform:rotateY(180deg);
    transform:rotateY(180deg);
}



#school_circle .neri_btn:hover:after{
	-webkit-transform:rotateY(0);
    -moz-transform:rotateY(0);
    transform:rotateY(0);
}

#school_circle .hika_btn{
	right: 0px;
	top: -70px;
}

#school_circle .hika_btn h2:before{
	background: url("/en/common/img/common/hikarigaoka.png") no-repeat;
	background-size: contain;
    backface-visibility:hidden;
    -webkit-transition:all .5s;
    -moz-transition:all .5s;
    transition:all .5s;
}

#school_circle .hika_btn:after{
	background: url("/en/common/img/common/hikarigaoka_back.png") no-repeat;
	background-size: contain;
    -webkit-transform:rotateY(-180deg);
    -moz-transform:rotateY(-180deg);
    transform:rotateY(-180deg);
    -webkit-transition:all .5s;
    -moz-transition:all .5s;
    transition:all .5s;
}

#school_circle .hika_btn:hover h2:before{
	-webkit-transform:rotateY(180deg);
    -moz-transform:rotateY(180deg);
    transform:rotateY(180deg);
}



#school_circle .hika_btn:hover:after{
	-webkit-transform:rotateY(0);
    -moz-transform:rotateY(0);
    transform:rotateY(0);
}

#main_content .upper_group .upper_img{
	padding-top: 60px;
	position: relative;
}

#main_content .upper_img img:first-child{
	vertical-align: bottom;
	position: relative;
	z-index: 10;
}

#main_content .upper_group .upper_img .people02{
	position: absolute;
	top: -46px;
	left: 1%;
}

#main_content .upper_group .upper_img .people03{
	position: absolute;
	right: 0.5%;
	top: -50px;
}

#main_content .main_txt{
	background-color: #fff;
}

#main_content .main_txt h2{
	text-align: center;
	margin: 0;
	font-size: 2em;
	font-weight: lighter;
	padding: 80px 0 20px;
	color: #545454;
}

.main_txt p{
	text-align: center;
	font-size: 0.875em;
	line-height: 2;
	padding: 0px 15px 40px;
	margin-bottom: 0;
	color: #545454;
}

#main_content .centerimg_group{
	background-color: #fff;
	position: relative;
	margin: auto;
	max-width: 960px;
}

.middle_group{
	width: 100%;
	overflow: hidden;
}

.ball_01,
.ball_02,
.ball_03,
.ball_04,
.ball_05,
.ball_06,
.ball_07,
.ball_08,
.ball_09,
.ball_10{
	position: absolute;
}

.ball_01{
	top: 229px;
	left: -110px;
}

.ball_02{
	top: 187px;
	left: -59px;
}

.ball_03{
	top: 115px;
	left: -26px;
}

.ball_04{
	top: 160px;
	left:39px;
}

.ball_05{
	top: 150px;
	left: 384px;
}

.ball_06{
	top: 90px;
	right: 170px;
}

.ball_07{
	top: 109px;
	right: 128px;
}

.ball_08{
	top: 153px;
	right: 48px;
}

.ball_09{
	top: 125px;
	right: -17px;
}

.ball_10{
	top: 234px;
	right: -65px;
}

#main_content .centerimg_group img:first-child{
	vertical-align: bottom;
}

#main_content .centerimg_group img:nth-child(2){
	vertical-align: top;
}

#main_content .topics{
	background-color: #fff;
	margin-bottom: 120px;
}

#main_content .topics h2{
	text-align: center;
	margin: 0;
	font-size: 2em;
	font-weight: lighter;
	padding: 70px 0 0 0;
	color: #545454;
}

.topics .topics_inner{
	max-width: 770px;
	margin: auto;
	padding: 0px 15px;
}

.topics .more{
	text-align: right;
	border-bottom: 1px dashed #adadad;
	margin: 0;
	padding-bottom: 15px;
	font-size: 0.875em;
}

.topics .more_for-small{
	display: none;
}

.topics .more a{
	color: #545454;
}

.topics .more a:hover{
	text-decoration: none;
}

.topics_inner ul{
	list-style: none;
	margin: 0;
	padding: 0;
}

.topics_inner ul li{
	color: #adadad;
	font-size: 0.875em;
	border-bottom: 1px dashed #adadad;
	padding: 15px 5px;
}

.topics_inner ul li img{
	vertical-align: bottom;
	padding: 0 20px;
}

.topics_inner ul li a{
	color: #545454;
}

.topics_inner ul li a:hover{
	text-decoration: none;
}

.topics_inner .ike_color a:hover{
	color: #e77c88;
}

.topics_inner .nari_color a:hover{
	color: #80b97b;
}

.topics_inner .neri_color a:hover{
	color: #eabc3b;
}

.topics_inner .hika_color a:hover{
	color: #3eaed7;
}

.many_people02{
	text-align: center;
	padding-top: 40px;
}

.topics_inner .many_people02 img{
	vertical-align: bottom;
}

.box_gallery {
	padding-top: 40px;
}

.box_gallery ul li a {
	display: inline-block;
	padding-left: 20px;
}

/* Media Queries
----------------------------------- */

@media only screen and (max-width : 959px) {
	.logo_box .rotation{
		display: none;
	}
	.middle_group .centerimg_group .ball_gl{
		display: none;
	}
	#main_img_gl{
		background-color: #fff;
	}
	.main_logo{
		float: none;
		margin: 0 40px;
	}
	.logo_box .txt_ball h2{
		display: inherit;
		text-align: center;
	}
	.logo_box .txt_ball h2 img {
	    margin-top: 50px;
	    max-width: 230px;
	}
	.logo_box .main_logo{
		width: 34%;
		float: left;
		margin: 0px 0px 0px 6%;
	}
	.logo_box .txt_ball{
		width: 56%;
		float: right;
		margin: 0px 2%;
	}
	#loopSlide{
		position: static;
	}
	#main_img_gl nav{
		position: static;
	}
	.logo_box{
		width: 100%;
		margin: 20px 0;
	}
	.slide_navbox{
		overflow: hidden;
	}
	#school_circle{
		height: 470px;
	}
	#school_circle .ike_btn{
		top: 20px;
		left: 12%;
	}
	#school_circle .nari_btn{
		top: 20px;
		left: auto;
		right: 12%;
		margin-left: -111px;
	}
	#school_circle .neri_btn {
		top: 270px;
		left: 12%;
	}
	#school_circle .hika_btn{
		top: 270px;
		right: 12%;
		margin-left: -111px;
	}
	.topics_inner ul li a{
		display: block;
		margin-top: -10px;
	}
	.topics_inner ul li a:before{
		content: "\A";
		white-space: pre;
	}
	#main_content .topics{
		margin-bottom: 0;
	}
}


@media only screen and (max-width : 639px) {
	header nav{
		display: none;
	}
	.logo_box{
		margin: 0;
	}
	.logo_box .main_logo {
	    width: auto;
	    float: none;
	    margin: 20px;
	    text-align: center;
	}
	.logo_box .txt_ball{
		display: none;
	}
	#school_circle .ike_btn{
		left: 50%;
		top: 20px;
		margin-left: -111px;
	}
	#school_circle .nari_btn{
		top: 260px;
		left: 50%;
	}
	#school_circle .neri_btn{
		left: 50%;
		margin-left: -111px;
		top: 500px;
	}
	#school_circle .hika_btn{
		left: 50%;
		margin-left: -111px;
		top: 740px;
	}
	#school_circle{
		height: 1000px;
	}
	#main_content .upper_group .upper_img .people02{
		top: -38px;
	}
	#main_content .upper_group .upper_img .people03{
		right: -4%;
		top: -42px;
	}
	#main_content .topics h2{
		padding: 70px 0px 50px;
	}
	.topics .topics_inner .more{
		display: none;
	}
	.topics_inner ul .ike_color{
		border-top: 1px dashed #ADADAD;
	}
	.topics .more_for-small{
		display: inherit;
		margin-top: 40px;
		text-align: center;
	}
	.topics .more_for-small a{
		color: #545454;
	}
	.box_gallery {
		padding-top: 20px;
	}
	.many_people02{
		padding-top: 0;
	}
}