@charset "utf-8";
/* @group frame */
div.inner{max-width:1024px;position:relative;text-align:left;margin:0 auto;box-sizing: border-box;}
p.commonNoScript, #schoolHeader, #commonContent, #commonFooter, #commonItems div.inner{width:100%;position:relative;}
#commonItems div.inner{max-width:1200px;}
body.search #commonItems section{padding:0;}
/* @end */
/* @group clear hack */
div.inner:after, #schoolHeader ul:after, #commonFooter ul:after{content:".";display:block;font-size:0;height:0;clear:both;visibility:hidden;}
/* @end */
/* @group noscript */
p.commonNoScript{font-size:78.6%;color:#fff;text-align:center;background:#e26060;padding:5px 10px;}
/* @end */
/* @group input初期化 */
.commonSearch input,.menu .keyword input,#modal input{
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
border-radius: 0;
border: 0;
margin: 0;
padding: 0;
background: none transparent;
vertical-align: middle;
font-size: inherit;
color: inherit;
box-sizing: content-box;
}
.commonSearch input::-ms-expand,.menu .keyword input::-ms-expand,#modal input::-ms-expand{display: none;}
.commonSearch input:focus,.menu .keyword input:focus,#modal input:focus{outline:none;}
/* Webkit */
.commonSearch input:focus::-webkit-input-placeholder,
.menu .keyword input:focus::-webkit-input-placeholder,
#modal input:focus::-webkit-input-placeholder{color:transparent;}
/* Firefox 18 以前 */
.commonSearch input:focus:-moz-placeholder,
.menu .keyword input:focus:-moz-placeholder,
#modal input:focus:-moz-placeholder{color:transparent;}
/* IE */
.commonSearch input:focus::-ms-input-placeholder{color:transparent;}
/* @end */
/*@group commonContainer*/
#commonContainer{background:#ffffff;}
main{
	display: block;
	margin: 64px auto 0;
	padding-top: 30px;
}
#schoolTop main{
	margin-top: 67px;
	padding-top: 0;
}
/* @end */
/* @group schoolHeader */
/* background共通指定 */
#home #schoolHeader h1,#schoolHeader p.logo,#schoolHeader p.timetable a,#schoolHeader div.main ul.menu li a{background-repeat: no-repeat;background-size:contain;}
/* common */
#schoolHeader{position: fixed;top: 0;left: 0; z-index:51;background:#fff;box-shadow:rgba(0,0,0,.31) 0 -1px 8px 0px;}
#schoolHeader div.inner{max-width:1044px;width:auto;padding-left: 10px;padding-right: 10px;box-sizing: border-box;}
#schoolHeader div.main, #schoolHeader div.global{width:100%;}
#schoolHeader div.mainHeader{position:relative; /*z-index:1;*/}
#schoolHeader a:hover{opacity: 1;}
.hasHover #schoolHeader a:hover{opacity: 1;}
#schoolHeader.absolute .top_catch{
	display: block;
	max-width: 1044px;
	margin: 10px auto 0;
	padding-left: 10px;
	padding-right: 10px;
	box-sizing: border-box;
	text-align: left;
}
#schoolHeader div.mainHeader > .inner{
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -webkit-align-items:center;
    -ms-flex-align:center;
    align-items:center;
	padding-right: 50px;
}
#schoolHeader div.mainHeader h1{
	width: 188px;
	margin: 0 72px 0 0 !important;
    -webkit-flex-shrink:0;
    -ms-flex-negative:0;
    flex-shrink:0;
}
#schoolHeader.absolute div.mainHeader h1{
	width: 383px;
	margin-right: 46px !important;
}
#schoolHeader div.mainHeader h1 img{
	width: 100%;
}
#schoolHeader div.mainHeader .modeBtn{
	position: relative;
	margin: 0 8px;
	padding: 4px;
	background: #f1f1f1;
	border-radius: 8px;
}
#schoolHeader div.mainHeader .modeHd{
	color: #65b054;
	font-size: 12px;
	font-weight: bold;
	text-align: center;
	white-space: nowrap;
}
#schoolHeader div.mainHeader .modeHd:before{
	content: '';
	display: inline-block;
	margin: .1em .25em 0 0;
	width: 12px;
	height: 12px;
	background: url(../img/icon_teacher_w.svg) no-repeat center center;
	background-size: 100% 100%;
	vertical-align: top;
	border: 1px solid #65b054;
	border-radius: 50%;
}
#schoolHeader div.mainHeader .modeHd a{
	display: inline-block;
	margin-left: .25em;
	vertical-align: middle;
}
#schoolHeader div.mainHeader #selectMode{
	position: relative;
	-webkit-flex-shrink:0;
    -ms-flex-negative:0;
    flex-shrink:0;
	width: 70px;
	margin: 0 14px;
	font-size: 10px;
	background: #d5d5d5;
	border-radius: 30px;
}
#schoolHeader div.mainHeader #selectMode:before{
	position: absolute;
	top: 0;
	left: 35px;
	content: '';
	display: block;
	width: 35px;
	height: 100%;
	background: #65b054;
	border-radius: 30px;
	transition:left .1s ease;
}
#schoolHeader div.mainHeader #selectMode li{
	position: relative;
	float: left;
	width: 35px;
	padding: 5px 0;
	border-radius: 30px;
	color: #fff;
	line-height: 1;
	text-align: center;
	cursor: pointer;
}
#schoolHeader #teacherHelp{
	position: absolute;
	top: 34px;
	left: -17px;
	display: none;
	width: 220px;
	padding: 14px;
	background: rgba(0,0,0,0.8);
	box-sizing: border-box;
	overflow: visible;
	z-index: 303;
}
#schoolHeader #teacherHelp:before{
	position: absolute;
	bottom: 100%;
	left: 0;
	right: 0;
	margin: auto;
	content: '';
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 6.5px 11px 6.5px;
	border-color: transparent transparent #000000 transparent;
	opacity: 0.8;
}
#schoolHeader #teacherHelp p{
	margin: 0 0 .75em;
	color: #fff;
	font-size: 92.8%;
	text-align: left;
}
#schoolHeader #teacherHelp figure{
	margin: 0;
	padding: 0;
}
#schoolHeader #teacherHelp figure img{
	width: 100%;
}
#schoolHeader .wrapMenu{
	-webkit-flex-shrink:1;
    -ms-flex-negative:1;
    flex-shrink:1;
	width: 100%;
}
#schoolHeader .menu{
	overflow: hidden;
}
#schoolHeader.absolute .menu{
	margin-top: 4px;
}
#schoolHeader .menu li{
	float: left;
}
#schoolHeader .menu li a{
	display: inline-block;
	padding: 22px 0;
	font-weight: bold;
	text-size-adjust: 100%;
}
#schoolHeader .menu li.menuOpen a span:after{
	content: '';
	display: inline-block;
	margin: .4em 0 0 .5em;
	width: 10px;
	height: 6px;
	background: url(../img/icon_arrow_g.svg) no-repeat center center;
	background-size: 100% 100%;
	vertical-align: top;
}
#schoolHeader .menu li.btn_w a span:after{
	content: '';
	display: inline-block;
	margin-left: .5em;
	width: 10px;
	height: 6px;
	background: url(../img/icon_arrow_b.svg) no-repeat center center;
	background-size: 100% 100%;
	vertical-align: middle;
}
#schoolHeader .menu li.menuOpen.btn_b a span:after{
	background-image: url(../img/icon_arrow_w.svg);
}
#schoolHeader .menu li:first-child a span{
	border: 0;
}
.hasHover #schoolHeader .menu li a:hover,
#schoolHeader .menu li a.active{
	opacity: 1;
	padding-bottom: 17px;
	border-bottom: 5px solid #81bc73;
}
#schoolHeader .menu li{
	position: absolute;
	display: block;
	visibility: hidden;
	z-index: -1;
}
#schoolHeader .menu li.display{
	position: static;
	visibility: visible;
	z-index: 0;
}
#schoolHeader .menu li.showMore a,
.hasHover #schoolHeader .menu li.showMore a{
	color: #7a7a7a;
	border-color: #585858;
}
#schoolHeader .menu li a span{
	display: block;
	padding: 0 10px;
	border-left: 1px dotted #dadada;
	text-size-adjust: 100%;
}
#schoolHeader .searchBtn{
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
}
#schoolHeader .searchBtn a{
	display: block;
	width: 36px;
	height: 36px;
	text-indent: 100%;
	word-break: keep-all;
	background: url(../img/icon_search.png);
	background-size: 100% 100%;
	overflow: hidden;
}
#schoolHeader .hiddenMenu{
	color: #fff;
	background: #66af54;
	text-size-adjust: 100%;
}
#schoolHeader .hiddenMenu .inner{
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
	padding: 30px 10px;
}
#schoolHeader .hiddenMenu.menusearch .inner{
	display: block;
}
#schoolHeader .hiddenMenu .menuHd{
	width: 220px;
	margin: 0 38px 0 0;
	font-size: 170%;
	border-right: 1px solid #94c788;
}
#schoolHeader #teacherMenu.hiddenMenu .menuHd:before,
#schoolHeader #teacherMenu_w.hiddenMenu .menuHd:before{
	content: '';
	display: inline-block;
	margin: -.25em .25em 0 0;
	width: 1em;
	height: 1em;
	background: url(../img/icon_teacher_w.svg) no-repeat center center;
	background-size: 100% 100%;
	vertical-align: middle;
	border-radius: 50%;
}
#schoolHeader .hiddenMenu .menuItem{
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
	width: 766px;
	margin-bottom: -30px;
}
#schoolHeader .hiddenMenu .menuItem li{
	width: 33%;
	margin: 0 0 30px;
	padding: 0 1em 0 0;
	text-align: left;
	box-sizing: border-box;
}
#schoolHeader .hiddenMenu .menuItem li a{
	display: inline-block;
	color: #fff;
	padding-left: 1.4em;
	text-indent: -1.4em;
	text-size-adjust: 100%;
}
#schoolHeader .hiddenMenu .menuItem a:before{
	content: '';
	display: inline-block;
	margin: .2em .5em 0 0;
	width: 12px;
	height: 12px;
	background: url(../img/icon_link_w.svg) no-repeat center center;
	background-size: 100% 100%;
	vertical-align: top;
	text-indent: 0;
}
#schoolHeader #hiddenMore .forTeacher .hiddenMenu .menuItem a:before,
#schoolHeader .hiddenMenu .menuItem .forTeacher a:before{
	background-image: url(../img/icon_teacher_w.svg);
}
#schoolHeader .hiddenMenu .menuItem .ext a:after{
	content: '';
	display: inline-block;
	margin: .15em 0 0 .25em;
	width: 14px;
	height: 14px;
	background: url(../img/icon_extlink.svg) no-repeat center center;
	background-size: 100% 100%;
	vertical-align: top;
}
#schoolHeader .hiddenMenu#hiddenMore {
	background: #585858;
}
#schoolHeader .hiddenMenu#hiddenMore > .inner {
	padding: 0;
    -webkit-box-pack:center;
    -webkit-justify-content:center;
    -ms-flex-pack:center;
    justify-content:center;
}
#schoolHeader .hiddenMenu#hiddenMore .menu li{
	float: none;
	display: inline-block;
}
.teacherMode #schoolHeader .hiddenMenu#hiddenMore .menu li.forTeacher{
	display: inline-block !important;
}
#schoolHeader .hiddenMenu#hiddenMore .menu li a{
	color: #fff;
}
#schoolHeader .hiddenMenu#hiddenMore .menu li:first-child a span{
	border-left: 1px dotted #dadada;
}
#schoolHeader .hiddenMenu#hiddenMore .menu li:last-child a span{
	border-right: 1px dotted #dadada;
}
#schoolHeader .menu li.forTeacher a span:before{
	content: '';
	display: inline-block;
	margin: 0 .25em 0 0;
	width: 1.2em;
	height: 1.2em;
	background: url(../img/icon_teacher_g.svg) no-repeat center center;
	background-size: 100% 100%;
	vertical-align: top;
}
#schoolHeader .hiddenMenu#hiddenMore .menu li.forTeacher a span:before{
	background-image: url(../img/icon_teacher_b.svg);
}
/* @end */
/* @group hiddenMenu */
#schoolHeader .hiddenMenu{
	display: none;
}
/* @end */
/* @group commonSearch */
#schoolHeader .menusearch .inner{
	display: block;
	padding: 0;
}
.menusearch .commonSearch{
	position: relative;
	display:-webkit-box;
	display:-webkit-flex;
	display:-ms-flexbox;
	display:flex;
	-webkit-flex-wrap:wrap;
	-ms-flex-wrap:wrap;
	flex-wrap:wrap;
	-webkit-box-pack:center;
    -webkit-justify-content:center;
    -ms-flex-pack:center;
    justify-content:center;
	padding:0 15px;
	text-align: left;
	box-sizing: border-box;
}

.commonSearch .keywordArea{
	position: relative;
	width:300px;
	padding: 18px 0 0;
	margin-right:10px;
}
.commonSearch .placeHolder,.commonSearch .keywordArea input[type=text]{
	width:100%;
	color: #616161;
	font-size:128.57%;
	text-indent:15px;
	line-height:1;
}
.commonSearch .placeHolder{
	position:absolute;
	padding:14px 0 10px;
	background:#fff;
	top:18px;
	left:0;
	z-index:1;
	text-align:left;
	border-radius: 5px;
}

.commonSearch .optionArea {
	display:-webkit-box;
	display:-webkit-flex;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-align:center;
	-webkit-align-items:center;
	-ms-flex-align:center;
	align-items:center;
	flex-shrink: 0;
	margin:0 16px 0 0;
	padding: 3px 10px 3px 0;
	border-right: 2px dotted #95c289;
}
.commonSearch .optionMenu{
	margin-right:10px;
	/* width: 215px; */
}
#commonSearch .optionMenu{
	margin-right:16px;
}
.commonSearch .optionMenu *{
	display:block;
	font-size:14px;
	font-weight:normal;
}
.commonSearch .optionMenu{
	/* margin:0; */
	text-align:center;
	z-index:5;
	letter-spacing:-.4em;
}
.commonSearch .optionMenu li strong.selected{
	color:#333;
	background:url(../img/icon_arrow_w.svg) no-repeat;
	background-position:92.5% center;
	background-size: 10px 6px;
	background-color:#3b8c28;
	cursor:pointer;
	border-radius: 3px;
	border: 1px solid #3b8c28;
}
.hasHover .commonSearch .optionMenu li strong.selected:hover,
.commonSearch .optionMenu li strong.selected.active{
	border: 1px solid #bae4b2;
}

.commonSearch .optionMenu li strong.selected.rika, .hasHover .commonSearch .optionMenu li.rika:hover, .commonSearch .optionMenu li.rika.active{
	background-color:#eb8c38;
	border-color: #eb8c38;
}
.commonSearch .optionMenu li strong.selected.syakai, .hasHover .commonSearch .optionMenu li.syakai:hover, .commonSearch .optionMenu li.syakai.active{
	background-color:#3ea66f;
	border-color: #3ea66f;
}
.commonSearch .optionMenu li strong.selected.kokugo, .hasHover .commonSearch .optionMenu li.kokugo:hover, .commonSearch .optionMenu li.kokugo.active{
	background-color:#e54d58;
	border-color: #e54d58;
}
.commonSearch .optionMenu li strong.selected.sansuu, .hasHover .commonSearch .optionMenu li.sansuu:hover, .commonSearch .optionMenu li.sansuu.active{
	background-color:#42a0d1;
	border-color: #42a0d1;
}
.commonSearch .optionMenu li strong.selected.seikatsu, .hasHover .commonSearch .optionMenu li.seikatsu:hover, .commonSearch .optionMenu li.seikatsu.active{
	background-color:#f66955;
	border-color: #f66955;
}
.commonSearch .optionMenu li strong.selected.doutoku, .hasHover .commonSearch .optionMenu li.doutoku:hover, .commonSearch .optionMenu li.doutoku.active{
	background-color:#e0a721;
	border-color: #e0a721;
}
.commonSearch .optionMenu li strong.selected.ongaku, .hasHover .commonSearch .optionMenu li.ongaku:hover, .commonSearch .optionMenu li.ongaku.active{
	background-color:#b8893a;
	border-color: #b8893a;
}
.commonSearch .optionMenu li strong.selected.taiiku, .hasHover .commonSearch .optionMenu li.taiiku:hover, .commonSearch .optionMenu li.taiiku.active{
	background-color:#8b61d8;
	border-color: #8b61d8;
}
.commonSearch .optionMenu li strong.selected.zukou, .hasHover .commonSearch .optionMenu li.zukou:hover, .commonSearch .optionMenu li.zukou.active{
	background-color:#afa63c;
	border-color: #afa63c;
}
.commonSearch .optionMenu li strong.selected.gijutsu, .hasHover .commonSearch .optionMenu li.gijutsu:hover, .commonSearch .optionMenu li.gijutsu.active{
	background-color:#5da5c5;
	border-color: #5da5c5;
}
.commonSearch .optionMenu li strong.selected.katei, .hasHover .commonSearch .optionMenu li.katei:hover, .commonSearch .optionMenu li.katei.active{
	background-color:#e15192;
	border-color: #e15192;
}
.commonSearch .optionMenu li strong.selected.sougou, .hasHover .commonSearch .optionMenu li.sougou:hover, .commonSearch .optionMenu li.sougou.active{
	background-color:#5e75db;
	border-color: #5e75db;
}
.commonSearch .optionMenu li strong.selected.eigo, .hasHover .commonSearch .optionMenu li.eigo:hover, .commonSearch .optionMenu li.eigo.active{
	background-color:#b03cda;
	border-color: #b03cda;
}
.commonSearch .optionMenu li strong.selected.tokkatsu, .hasHover .commonSearch .optionMenu li.tokkatsu:hover, .commonSearch .optionMenu li.tokkatsu.active{
	background-color:#3ab4a4;
	border-color: #3ab4a4;
}
.commonSearch .optionMenu li strong.selected.tokushi, .hasHover .commonSearch .optionMenu li.tokushi:hover, .commonSearch .optionMenu li.tokushi.active{
	background-color:#ce43d0;
	border-color: #ce43d0;
}
.commonSearch .optionMenu li strong.selected.other, .hasHover .commonSearch .optionMenu li.other:hover, .commonSearch .optionMenu li.other.active{
	background-color:#7b7b7b;
	border-color: #7b7b7b;
}
.commonSearch .optionMenu li strong.selected.all, .hasHover .commonSearch .optionMenu li.subject_all:hover, .commonSearch .optionMenu li.subject_all.active{
	background-color:#3b8c28;
	border-color: #3b8c28;
}
.hasHover .commonSearch .optionMenu .grade li:hover, .commonSearch .optionMenu .grade li.active{
	background-color:#66af54;
}


.commonSearch .optionMenu li strong.selected span{
	height:31px;
	line-height:31px;
	color: #fff;
	text-align:center;
	padding:2px 10px 3px 0;
}
.commonSearch .optionMenu > li{
	display:inline-block;
	position:relative;
	margin:0 10px 0 0;
	width:106px;
	text-align:left;
	letter-spacing:normal;
	border-radius: 5px;
	box-sizing: border-box;
}
.commonSearch .optionMenu > li:last-child{
	margin-right:0;
}
/* menu > toggleMenu */
.commonSearch .optionMenu li > ul.toggleMenu{
	display:none;
	width:302px;
	border:none;
	position:absolute;
	left:50%;
	top:100%;
	margin-top:15px;
	padding: 6px;
	z-index:2;
	background: #fff;
	border: 4px solid #66af54;
	border-top: 0;
	border-radius: 10px;
	box-sizing: border-box;
	overflow: visible;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}
.commonSearch .optionMenu li > ul.toggleMenu:before{
	position: absolute;
	top: -7px;
	left: 50%;
	content: '';
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 7px 7px 7px;
	border-color: transparent transparent #ffffff transparent;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}
.commonSearch .optionMenu li > ul.toggleMenu:after{
	content: '';
	display: block;
	width: 0;
	height: 0;
	font-size: 0;
	clear: both;
}
.commonSearch .optionMenu li > ul.toggleMenu li{
	position:relative;
	display:block;
	float: left;
	margin: 2px;
	width: 90px;
	padding:12px 0;
	color:#4b4948;
	line-height: 1;
	text-align:center;
	cursor:pointer;
	background:#f1f1f1;
	box-sizing: border-box;
}
.commonSearch .optionMenu li ul.toggleMenu li,
.commonSearch .optionMenu .sort ul.menuSort .selected + ul li{
	transition:background .4s ease;
}
.hasHover .commonSearch .optionMenu li ul.toggleMenu li:hover,
.commonSearch .optionMenu li ul.toggleMenu li.active,
.hasHover .commonSearch .optionMenu .sort ul.menuSort .selected + ul li:hover{
	color: #fff;
	transition:background .2s ease;
}
/* toggleMenu subject*/
.en .commonSearch .optionMenu .subject {
	width:215px;
}
.commonSearch .optionMenu .subject ul{
	width:90px;
}
.commonSearch .optionMenu .subject ul.en{
	width:660px;
}
.commonSearch .optionMenu li.subject strong.selected.act + ul.toggleMenu li{
	padding:0;
	width:75px;
	text-align:center;
}
.commonSearch .optionMenu li.subject strong.selected.act + ul.toggleMenu.en li{
	width:220px;
}
.commonSearch .optionMenu li strong.selected{
	transition: all .6s ease;
}
.hasHover .commonSearch .optionMenu li strong.selected:hover{
	transition: all .2s ease;
}
.commonSearch .optionMenu li strong.selected.changed{
	background-color:#f0f9ed;
}
.commonSearch .optionMenu li strong.selected.act {
 box-shadow: none;
 background-color:#f4f4f4;
}
.commonSearch .optionMenu li strong.selected.act + ul.toggleMenu{
	visibility:visible;
	overflow: hidden;
	letter-spacing:-.4em;
}
.commonSearch .optionMenu li strong.selected.act + ul.toggleMenu li{
	top: 0 !important;
	left: 0 !important;
	padding:0 16px 0 15px;
	line-height:3;
	letter-spacing: normal;
}
/* カテゴリー */
.commonSearch .optionMenu li#category strong.selected.act + ul.toggleMenu{
	width:572px;
}
.commonSearch .optionArea input {
display:none
}
.commonSearch .optionArea label {
position:relative;
display:block;
padding:0 0 0 1.8em;
-webkit-box-sizing:border-box;
box-sizing:border-box
}
.commonSearch .optionArea label{
	/* margin-left: 12px; */
	margin-right:12px;
}
.commonSearch .optionArea label:after {
position:absolute;
content:"";
display:block;
top:.05em;
left:0;
width:1em;
height:1em;
background: #fff;
border:2px solid #63ac55;
border-radius: 4px;
}
.commonSearch .optionArea label:before {
position:absolute;
content:"";
display:block;
top:.05em;
left:.4em;
width:.5em;
height:.65em;
border-right:3px solid #ffab51;
border-bottom:3px solid #ffab51;
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
opacity:0;
z-index: 1;
}
.commonSearch .optionArea input[type=checkbox]:checked+label:before {
opacity:1
}
.commonSearch .keywordArea input[type=text]{
	background:transparent;
	position:relative;
	z-index:2;
	height:42px;
}
.commonSearch #searchKeyword.focus{
	/* background:#fff; */
}
.commonSearch .searchSubmit{
	cursor:pointer;
	width: 114px;
	height: 46px;
	margin:17px 0;
	background:url(../img/btn_search.png);
	background-size: 100% 100%;
	text-align:center;
	border-radius: 5px;
}
.hasHover .commonSearch .searchSubmit:hover{
	opacity:.8;
	transition:opacity .4s ease;
}
#schoolHeader .teachersSearch{
	max-width: 870px;
	margin: 0 auto;
	padding: 0 20px 10px;
	overflow: hidden;
	box-sizing: border-box;
}
#schoolHeader .teachersSearch li{
	float: left;
	margin-left: 30px;
}
#schoolHeader .teachersSearch li:first-child{
	margin-left: 0;
}
#schoolHeader .teachersSearch li a{
	color: #fff;
}
#schoolHeader .teachersSearch li a:before{
	content: '';
	display: inline-block;
	margin-right: .5em;
	width: 19px;
	height: 19px;
	background: url(../img/icon_teacher_w.svg) no-repeat center center;
	background-size: 100% 100%;
	vertical-align: middle;
}

@media screen and (max-width: 882px) {
	#schoolHeader div.mainHeader h1{
		margin-right: 71px !important;
	}
	.menusearch .commonSearch{
		-webkit-box-pack:start;
		-webkit-justify-content:flex-start;
		-ms-flex-pack:start;
		justify-content:flex-start;
		padding-top: 0;
	}
	.commonSearch .optionArea{
		margin-top: 18px;
	}
	.menusearch .commonSearch .searchSubmit{
		margin: 12px 0 10px;
	}
}
/* @end */
/* @group commonFooter */
#commonPagetop{
	width:50px;
	height:50px;
	display:none;
	position:fixed;
	bottom:20px;
	right:20px;
	font-size:1px;
	cursor:pointer;
}
.hasHover #commonPagetop:hover{
	opacity:.85;
}
#commonFooter{
	font-size:78.6%;
	z-index:5;
	border-top:1px solid #f8f8f8;
}
/* @end */
/* @group jsp */
.jspContainer, .jspTrack, .jspDrag{
	position:relative;
}
.jspContainer{
	overflow:hidden;
}
.jspPane, .jspVerticalBar, .jspHorizontalBar{
	position:absolute;
}
.jspVerticalBar, .jspHorizontalBar .jspTrack, .jspHorizontalBar .jspDrag, .jspHorizontalBar .jspArrow, .jspCorner{
	height:100%;
}
.jspVerticalBar, .jspHorizontalBar, .jspTrack{
	background:#e3e3e3;
}
.jspVerticalBar{
	top:0;
	right:0
	;width:16px;
}
.jspHorizontalBar{
	width:100%;
	height:16px;
	left:0;
	bottom:0;
}
.jspCap{
	display:none;
}
.jspHorizontalBar .jspCap, .jspHorizontalBar .jspDrag, .jspHorizontalBar .jspArrow, .jspCorner{
	float:left;
}
.jspDrag, .jspArrow{
	cursor:pointer;
}
.jspDrag{
	background:#4b4b4b;
	top:0;
	left:0;
}
.jspDragTop, .jspDragBottom{
	width:16px;
	height:8px;
	position:absolute;
	left:0;
	background:url(../img/bg_jsp_drag.png) no-repeat;
}
.jspDragTop{
	top:0;
}
.jspDragBottom{
	bottom:0;
	background-position:0 -8px;
}
.jspVerticalBar .jspArrow{
	height:16px;
}
.jspHorizontalBar .jspArrow{
	width:16px;
}
.jspVerticalBar .jspArrow:focus{
	outline:0;
}
.jspArrow, .jspCorner{
	width:0;
	height:0;
	display:none;
}
/* @end */

/*@Teacher Mode*/
.teacherMode #schoolHeader div.mainHeader #selectMode:before{
	left: 0;
}

#schoolHeader .spFixHeader{
	display: none;
}
@media screen and (min-width: 768px) {
	#schoolHeader .onlySP{display: none !important;}
	#schoolHeader.absolute{position: absolute;}
}
@media screen and (max-width: 767px) {
	
	main{
		margin: 0 auto;
	}
	#schoolTop main{
		margin-top:0;
	}
	#schoolHeader{
		position: relative;
		box-shadow: none;
	}
	#schoolHeader.absolute .top_catch{
		max-width: 93%;
		margin: 0 10px;
		padding: 2.5% 0 0;
		text-align: left;
		box-sizing: border-box;
	}
	#schoolHeader .top_catch img{
		max-width: 100%;
	}
	#schoolHeader div.mainHeader{
		position: relative;
		padding: 0 0 40px;
	}
	#schoolHeader div.mainHeader > .inner{
		-webkit-box-pack:justify;
		-webkit-justify-content:space-between;
		-ms-flex-pack:justify;
		justify-content:space-between;
		padding: 0 10px 2px;
	}
	#schoolHeader.absolute div.mainHeader h1{
		width: 56%;
		margin: 0 !important;
	}
	#schoolHeader div.mainHeader h1{
		width: 56%;
		-webkit-flex-shrink: 1;
		-ms-flex-negative: 1;
		flex-shrink: 1;
		margin: 0 !important;
	}
	#schoolHeader div.mainHeader .modeBtn{
		display:-webkit-box;
		display:-webkit-flex;
		display:-ms-flexbox;
		display:flex;
		-webkit-box-align:center;
		-webkit-align-items:center;
		-ms-flex-align:center;
		align-items:center;
		margin-right: 0;
		background: none;
	}
	#schoolHeader div.mainHeader #selectMode{
		margin: 0 0 0 10px;
	}
	#teacherHelp{
		left: auto;
		top: 38px;
		right: -10px;
	}
	#teacherHelp:before{
		left: auto;
		right: 96px;
	}
	.hiddenMenu .inner,.hiddenMenu .menuItem{
		display: block;
	}
	#schoolHeader .spFixHeader{
		display: block;
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 40px;
	}
	#schoolHeader .spFixHeader.fixed{
		position: fixed;
		top: 0;
		bottom: auto;
	}
	#schoolHeader .spFixHeader .wrapMenu{
		position: relative;
		width: 100%;
		right: 0;
		bottom: 0;
		z-index: 301;
		background: #eff1ee;
	}
	#schoolHeader .menu{
		margin-right: 90px;
		border-right: 1px solid #d1d2d0;
		overflow: visible;
	}
	#schoolHeader.absolute .menu{
		margin-top: 0;
	}
	#schoolHeader .spFixHeader .wrapMenu .menu li{
		position: static;
		visibility: visible;
		z-index: 0;
	}
	#schoolHeader .spFixHeader .wrapMenu .menu li + li span{
		border-left: 1px dotted #d1d2d0;
	}
	#schoolHeader .spFixHeader .wrapMenu .menu li a{
		padding: 10px 0;
	}
	#schoolHeader .spFixHeader .wrapMenu .menu li a:hover{
		border: 0;
	}
	#schoolHeader .spFixHeader .wrapMenu .menu li.menuOpen a span::after{
		background-image: url(../img/icon_arrow_g.svg);
	}
	#schoolHeader .spFixHeader .wrapMenu .menu li .hiddenMenu{
		position: absolute;
		width: 100%;
		top: 40px;
		left: 0px;
		box-shadow: rgba(0,0,0,.31) 0 3px 3px 0px;
	}
	.hiddenMenu#hiddenMore .menu li{
		display: block;
		position: static;
		width: 100%;
		visibility: visible;
		margin: 0;
	}
	.hiddenMenu#hiddenMore .menu li a{
		margin: 0 10px;
	}
	.hiddenMenu#hiddenMore .menu li a span,
	.hiddenMenu#hiddenMore .menu li:first-child a span,
	#schoolHeader .hiddenMenu#hiddenMore .menu li:first-child a span{
		border: 0;
	}
	#schoolHeader .spFixHeader .menu li.showMore{
		position: absolute;
		right: 0;
		bottom: 0;
		display: block;
		width: auto;
		height: auto;
	}
	#schoolHeader .spFixHeader .menu li.showMore a{
		position: relative;
		display: block;
		width: 40px;
		height: 40px;
		margin: 0;
		padding: 0;
		background: #585858;
	}
	#schoolHeader .menu li.showMore a:hover,#schoolHeader .menu li.showMore a.active{
		border: 0;
	}
	#schoolHeader .spFixHeader .menu li.showMore a span{
		display: inline-block;
		transition: all .4s;
		box-sizing: border-box;
		position: absolute;
		left: 12px;
		width: 16px;
		height: 2px;
		padding: 0;
		background-color: #fff;
		border-radius: 4px;
	}
	#schoolHeader .spFixHeader .menu li.showMore a span:after{
		display: none;
	}
	#schoolHeader .spFixHeader .menu li.showMore a span:nth-of-type(2){
		top: 13px;
	}
	#schoolHeader .spFixHeader .menu li.showMore a span:nth-of-type(3){
		top: 19px;
	}
	#schoolHeader .spFixHeader .menu li.showMore a span:nth-of-type(4){
		bottom: 13px;
	}
	#schoolHeader .spFixHeader .menu li.showMore a.active span:nth-of-type(2){
		-webkit-transform: translateY(6px) rotate(-45deg);
		transform: translateY(6px) rotate(-45deg);
	}
	#schoolHeader .spFixHeader .menu li.showMore a.active span:nth-of-type(3){
		opacity: 0;
	}
	#schoolHeader .spFixHeader .menu li.showMore a.active span:nth-of-type(4){
		-webkit-transform: translateY(-6px) rotate(45deg);
		transform: translateY(-6px) rotate(45deg);
	}
	#schoolHeader .spFixHeader .wrapMenu .menuItem li a{
		padding: 10px 0 10px 15px;
	}
	#schoolHeader .spFixHeader .searchBtn{
		top: 4px;
		right: 48px;
		transform: translateY(0);
		z-index: 302;
	}
	#schoolHeader .spFixHeader .searchBtn a{
		width: 32px;
		height: 32px;
	}
	#schoolHeader .spFixHeader .searchBtn a:hover{
		opacity: 1;
	}
	#schoolHeader .hiddenMenu#hiddenMore {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		max-height: 100vh;
		padding: 40px 0 0;
		overflow: hidden;
		overflow-y: auto;
		box-sizing: border-box;
		z-index: 300;
		box-shadow: rgba(0,0,0,.31) 0 3px 3px 0px;
	}
	#schoolHeader .hiddenMenu#hiddenMore .menu li + li a{
		border-top: 1px solid #696969;
	}
	#schoolHeader 	.hiddenMenu#hiddenMore .menuItem li + li a{
		border-top: 1px solid #85bf76;
	}
	#schoolHeader 	.hiddenMenu#hiddenMore .menu li a{
		display: block;
		padding: 15px 0;
		font-size: 114%;
	}
	#schoolHeader .hiddenMenu#hiddenMore .menu li a:hover{
		padding: 15px 0;
		border: 0;border-top: 1px solid #696969;
	}
	#schoolHeader .hiddenMenu#hiddenMore .menu li:first-child a:hover{
		border: 0;
	}
	#schoolHeader .hiddenMenu#hiddenMore .menuItem li:first-child a:hover{
		border: 0;
	}
	#schoolHeader .menu li.menuOpen a span:after{
		background-image: url(../img/icon_arrow_w.svg);
	}
	#schoolHeader .hiddenMenu .inner{
		padding: 10px;
	}
	#schoolHeader .menusearch .inner{
		max-width: none;
		width: 92%;
		padding: 0 0 1.5%;
	}
	#schoolHeader .hiddenMenu .menuHd{
		width: auto;
		padding: 0 0 5px;
		margin: 0 0 5px;
		font-size: 142%;
		border: 0;
		border-bottom: 0;
	}
	#schoolHeader #teacherMenu.hiddenMenu .menuHd::before, #schoolHeader #teacherMenu_w.hiddenMenu .menuHd::before {
		margin-top: 0;
	}
	#schoolHeader .hiddenMenu .menuItem{
		display:-webkit-box;
		display:-webkit-flex;
		display:-ms-flexbox;
		display:flex;
		-webkit-flex-wrap:wrap;
		-ms-flex-wrap:wrap;
		flex-wrap:wrap;
		width: auto;
		margin: 0 0 1px;
		padding: 0;
		overflow: hidden;
	}
	#schoolHeader .hiddenMenu .menuItem li{
		width: 100%;
		margin: 0 10px;
	}
	#schoolHeader .hiddenMenu .menuItem li + li{
		border-top: 1px solid #94c788;
	}
	#schoolHeader .hiddenMenu#hiddenMore .menuItem li{
		position: static;
		width: 100%;
		margin: 0 10px;
		padding: 0;
		visibility: visible;
		box-sizing: border-box;
		z-index: 0;
	}
	#schoolHeader .hiddenMenu#hiddenMore .menu{
		margin: 0;
	}
	#schoolHeader .hiddenMenu#hiddenMore .menuHd{
		display: none;
	}
	#schoolHeader .hiddenMenu#hiddenMore .menuItem li a{
		display: block;
		padding: 15px 0 15px 15px;
		border: 0;
	}
	#schoolHeader .hiddenMenu#hiddenMore .menuItem li:first-child a{
		border: 0;
	}
	#schoolHeader .hiddenMenu#hiddenMore .menuItem li a:hover{
		padding: 15px;
		border-top: 1px solid #85bf76;
	}
	.menusearch{
		box-shadow: rgba(0,0,0,.31) 0 3px 3px 0px;
	}
	.menusearch .commonSearch{
		width: 100%;
		min-width: 302px;
		margin: 0 auto;
		padding: 0;
		text-align: center;
		background: transparent;
		-webkit-box-pack:justify;
		-webkit-justify-content:space-between;
		-ms-flex-pack:justify;
		justify-content:space-between;
		-webkit-align-content:center;
		-ms-flex-line-pack:center;
		align-content:center;
	}
	.menusearch .commonSearch:after{
		content: '';
		display: block;
		width: 0;
		height: 0;
		clear: both;
	}
	.menusearch .commonSearch .keywordArea{
		width: 63%;
		float: left;
	}
	.commonSearch,.commonSearch .optionArea{
		display: block;
	}
	.commonSearch .optionArea{
		width: 63%;
		float: left;
		margin: 0 0 10px;
		padding: 15px 0 0;
		text-align: left;
		border: 0;
	}
	.menusearch .commonSearch .optionMenu{
		width: auto;
		margin: 0 0 20px;
		text-align: left;
	}
	.commonSearch .optionArea label{
		display: inline-block;
	}
	.commonSearch .optionMenu .subject ul{
		width: 220px;
		overflow-y: hidden;
	}
	.commonSearch .optionMenu {
		position: relative;
	}
	.commonSearch .optionMenu > li{
		position: static;
		margin: 0 4% 0 0;
		width: 48%;
	}
	.commonSearch .placeHolder, .commonSearch .keywordArea input[type="text"]{
		font-size: 100%;
	}
	.commonSearch .placeHolder{
		padding: 14px 0;
	}
	.commonSearch .optionMenu li.subject > ul.toggleMenu{
		left: 0;
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
	.commonSearch .optionMenu li.subject > ul.toggleMenu:before{
		left: 36px;
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
	.commonSearch .optionMenu li.grade > ul.toggleMenu{
		left: 0;
		-webkit-transform: translateX(0);
		transform: translateX(0);

	}
	.commonSearch .optionMenu li.grade > ul.toggleMenu:before{
		left: 136px;
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
	.commonSearch .optionMenu li > ul.toggleMenu li{
		width: 90px;
		float: left;
	}
	.menusearch .commonSearch .searchSubmit{
		width: 30%;
		max-width: 126px;
		height: 92px;
		padding: 0;
		background-color: #ffffff;
		background-image: url(../img/btn_search_sp.png);
		background-position: center;
		background-repeat: no-repeat;
		background-size: 69% auto;
		margin: -42px 0 0 4.5%;
		box-shadow: 0 4px #509c41;
	}
	#schoolHeader .teachersSearch{
		padding: 6px 0 3%;
	}
	#schoolHeader .teachersSearch li{
		margin-left: 10px;
	}
	#schoolHeader .teachersSearch li:first-child{
		margin-left: 0;
	}
	#schoolHeader .onlyPC{display: none !important;}
}

#schoolFooter{
	padding:30px;
	color:#fff;
	background-color: #66af54;
}
#schoolFooter .inner{
	display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
	-webkit-flex-wrap:wrap;
	-ms-flex-wrap:wrap;
	flex-wrap:wrap;
}
#schoolFooter .footerBlock{
	width: 25%;
	padding-right: 15px;
	box-sizing: border-box;
}
#schoolFooter li{
	margin: 0 0 1em;
}
#schoolFooter .footerBlock > li.forTeacher{
	margin: 2em 0 1em;
}
#schoolFooter li ul{
	margin: .5em 0 0;
}
#schoolFooter li li{
	margin-bottom: .5em;
}
#schoolFooter a,
#schoolFooter span{
	color: #fff;
	font-size: 114%;
	vertical-align: middle;
}
#schoolFooter a:before{
	content: '';
	display: inline-block;
	margin: .27em .5em 0 0;
	width: 12px;
	height: 12px;
	background: url(../img/icon_link_w.svg) no-repeat center center;
	background-size: 100% 100%;
	vertical-align: top;
}
#schoolFooter .forTeacher a:before{
	background-image: url(../img/icon_teacher_w.svg);
}
#schoolFooter a.ext:after{
	content: '';
	display: inline-block;
	margin: .27em 0 0 .1em;
	width: 12px;
	height: 12px;
	background: url(../img/icon_extlink.svg) no-repeat center center;
	background-size: 100% 100%;
	vertical-align: top;
}
#schoolFooter a.subLink{
	font-size: 100%;
}
@media screen and (max-width: 767px) {
	#schoolFooter{
		padding: 25px;
	}
	#schoolFooter .footerBlock{
		width: 50%;
		margin: 0 0 2em;
		padding-right: 10px;
	}
	#schoolFooter a, #schoolFooter span{
		font-size: 93%;
	}
	#schoolFooter a.subLink{
		font-size: 79%;
	}
}