body{
  margin:0px;
  padding:0px;
  font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
}
div{
  overflow-wrap:break-word;
  word-wrap: break-word;
  box-sizing: border-box;
  user-select:none;
  -moz-user-select:none;
  -webkit-user-select:none;
  -ms-user-select:none;
}
input{
  box-sizing: border-box;
}
textarea{
  box-sizing: border-box;
}
div.SquareButton{
  display: inline-block;
  position: relative;
  text-align: center;
  padding: 1.6rem 2.4rem 1.6rem 1.6rem;
  text-decoration: none;
  color: #fff;
  border: solid 1px #f1f1f1;
  border-radius: 5px;
  margin:0 auto;
}
div.Shadow{
  box-shadow: 0px 0px 12px 10px #ccc;
}
div.SideMenuTitle{
  border-top: 2px solid #666;
  border-bottom: 1px solid #efefef;
  background-color: #f9f9f9;
  padding: 12px 12px 9px;
  font-weight: lighter;
  font-size:14px;
}
div.news_category{
  for-size: 1.2rem;
  padding: 0.3rem 0.6rem;
  background: #999;
  color: #fff;
  border-radius: 3px;
  font-weight: normal;
}
div.BannerArea{
  padding: 5.0rem 0;
  background: url(<? $ServerPath ?>images/bnrArea_bg.jpg) repeat;
  text-align: center;
  border-top: 1px solid #7e7e7e;
  border-bottom: 1px solid #7e7e7e;
}
div.MessageBox{
  box-shadow:inset 0px 0px 0px 4px rgb(0 0 0 / 5%);
  border:1px solid #ccc;
  padding:20px 20px 20px;
}
div.FullScreen{
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
}
div.FullScreenBackGround{
  position:absolute;
  width: 100%;
  height: 100%;
  background: gray;
  opacity:0.7;
}
div.Middle{
  width:100%;
  height:100%;
  display:-webkit-flex;
  display:flex;
  -webkit-align-items:center;
  align-items:center;
}
div.middle{
  width:100%;
  height:100%;
  display:-webkit-flex;
  display:flex;
  -webkit-align-items:center;
  align-items:center;
}
div.Center{
  width:100%;
  display:-webkit-flex;
  display:flex;
  -webkit-justify-content:center;
  justify-content:center;
}
div.center{
  width:100%;
  display:-webkit-flex;
  display:flex;
  -webkit-justify-content:center;
  justify-content:center;
}
div.Right{
  width:100%;
  display:-webkit-flex;
  display:flex;
  -webkit-justify-content:flex-end;
  justify-content:flex-end;
}
div.right{
  width:100%;
  display:-webkit-flex;
  display:flex;
  -webkit-justify-content:flex-end;
  justify-content:flex-end;
}
div.MiddleCenter{
  width:100%;
  height:100%;
  display:-webkit-flex;
  display:flex;
  -webkit-align-items:center;
  align-items:center;
  -webkit-justify-content:center;
  justify-content:center;
}
div.middlecenter{
  width:100%;
  height:100%;
  display:-webkit-flex;
  display:flex;
  -webkit-align-items:center;
  align-items:center;
  -webkit-justify-content:center;
  justify-content:center;
}
div.MiddleRight{
  width:100%;
  height:100%;
  display:-webkit-flex;
  display:flex;
  -webkit-align-items:center;
  align-items:center;
  -webkit-justify-content:flex-end;
  justify-content:flex-end;
}
div.middleright{
  width:100%;
  height:100%;
  display:-webkit-flex;
  display:flex;
  -webkit-align-items:center;
  align-items:center;
  -webkit-justify-content:flex-end;
  justify-content:flex-end;
}
div.TextLink{
  cursor:pointer;
  text-decoration:underline;
  color: #10bd88;
  font-size:12px;
  font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight:400;
  line-height:1.42857143;
}
div.TextLink:hover{
  color: red;
}
div.BlockLink{
  cursor:pointer;
}
div.BlockLink:hover{
  background-color: lightcyan;
}
tr.BlockLink{
  cursor:pointer;
}
tr.BlockLink:hover{
  background-color: lightcyan;
}
div.EditTeacherPhoto{
  position:relative;
  width:100%;
  height:350px;
}
div.EditTeacherProfile{
  position:relative;
  width:100%;
  height:500px;
}
div.TeacherListProfile{
  position:relative;
  cursor:pointer;
  width:300px;
  height:200px;
  float:left;
  margin:5px;
  box-shadow:inset 0px 0px 0px 4px rgb(0 0 0 / 5%);
  border:1px solid #ccc;
  padding:20px 20px 20px;
}
div.SchoolListBox{
  position:relative;
  cursor:pointer;
  width:325px;
  height:200px;
  float:left;
  margin:5px;
  box-shadow:inset 0px 0px 0px 4px rgb(0 0 0 / 5%);
  border:1px solid #ccc;
  padding:20px 20px 20px;
}
div.SchoolListBox:hover{
  background-color:#f0f0f0;
}
div.SchoolListBox_title{
  position:relative;
  width:100%;
  height:15%;
  font-size:16px;
  border-bottom:1px solid black;
}
div.SchoolListBox_profile{
  position:relative;
  width:100%;
  height:85%;
  font-size:12px;
  padding:20px;
}
div.SideMenuTeacher{
  margin-left:20px;
}
div.SideMenuTeacherSelected{
  margin-left:20px;
  color:red;
}

div.SideMenuSchool{
  margin-left:20px;
}
div.SideMenuSchoolSelected{
  margin-left:20px;
  color:red;
  font-size:12px;
  font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
}

div.SideMenuClass{
  margin-left:40px;
}
div.SideMenuClassSelected{
  margin-left:40px;
  color:red;
  font-size:12px;
  font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
}
div.chatMessage{
  position:relative;
  width:70%;
  height:auto;
  margin-bottom:20px;
  padding:10px;
  background-color:lightgreen;
  font-size:12px;
  border-radius:10px;
  -webkit-border-radius:10px;
  box-shadow: 6px 6px 0px 0px #318c30;
}
div.chatBody{
  position:relative;
  width:100%;
  height:auto;
  margin-bottom:20px;
}
div.chatStatus{
  position:relative;
  bottom:0px;
  width:100%;
  height:20px
}
div.chatReadtime{
  position:absolute;
  left:0px;
  width:30%;
  height:100%;
}
div.chatSendtime{
  position:absolute;
  right:0px;
  width:30%;
  height:100%;
}
div.chatAdminUser{
  position:relative;
  bottom:0px;
  width:100%;
  height:20px
}
div.chatSender{
  position:relative;
  width:70%;
  right:5px;
}
div.chatReciver{
  position:relative;
  width:70%;
  left:5px;
}
div.Calender{
  position:relative;
  width:840px;
  box-sizing:border-box;
  user-select:none;
  -moz-user-select:none;
  -webkit-user-select:none;
  -ms-user-select:none;
}

div.CalenderHead{
  position:relative;
  width:100%;
  height:70px;
}

div.CalenderDate{
  position:absolute;
  top:30%;
  width:100%;
  font-size:20px;
  font-weight:bold;
  text-align:center;
}

div.CalenderPrev{
  position:absolute;
  left:0%;
  top:30%;
  width:5%;
  height:40%;
  font-size:14px;
  text-align:center;
  background-color:#2C3E50;
  color:white;
  cursor:pointer;
}

div.CalenderNext{
  position:absolute;
  left:5%;
  top:30%;
  width:5%;
  height:40%;
  font-size:14px;
  text-align:center;
  background-color:#2C3E50;
  color:white;
  cursor:pointer;
}
  
div.CalenderCurrent{
  position:absolute;
  left:16%;
  top:30%;
  width:5%;
  height:40%;
  font-size:14px;
  text-align:center;
  background-color:#2C3E50;
  color:white;
  cursor:pointer;
}

div.CalenderMonth{
  position:absolute;
  right:5%;
  top:30%;
  width:5%;
  height:40%;
  font-size:14px;
  text-align:center;
  background-color:#2C3E50;
  color:white;cursor:pointer;
}

div.CalenderWeek{
  position:absolute;
  right:0%;
  top:30%;
  width:5%;
  height:40%;
  font-size:14px;
  text-align:center;
  background-color:#2C3E50;
  color:white;
  cursor:pointer;
}

table.CalenderTableBody{
  width:100%;
  border-collapse:collapse;
  border:1px solid #ff00ff;
}

tr.CalenderBodyTr{
  width:100%;
  border:1px solid #a0a0a0;
}

th.CalenderBodyTh{
  width:14%;
  height:30px;
  border:1px solid #a0a0a0;color:#20bde8;
}

td.CalenderBodyTd{
  width:14%;
  height:100px;
  border:1px solid #a0a0a0;
}
  
div.MonthCell{
  position:relative;
  width:100%;
  height:100%;
  color:#20bde8;
  overflow:hidden;
}
div.MonthCell:hover{
  background-color:#ffffd0;
}

div.MonthCell_Sunday{
  position:relative;
  width:100%;
  height:100%;
  color:#20bde8;
  background-color:#d7d7d7;
  color:red;
  overflow:hidden;
}
div.MonthCell_Sunday:hover{
  background-color:#ffffd0;
}

div.MonthCell_Saturday{
  position:relative;
  width:100%;
  height:100%;
  background-color:#d7d7d7;
  color:blue;
  overflow:hidden;
}
div.MonthCell_Saturday:hover{
  background-color:#ffffd0;
}

div.MonthCellOther{
  position:relative;
  width:100%;
  height:100%;
  color:#c0c0c0;
  overflow:hidden;
}
div.MonthCellOther:hover{
  background-color:#ffffd0;
}

div.MonthCellOther_Sunday{
  position:relative;
  width:100%;
  height:100%;
  color:#c0c0c0;
  background-color:#d7d7d7;
  overflow:hidden;
}
div.MonthCellOther_Sunday:hover{
  background-color:#ffffd0;
}

div.MonthCellOther_Saturday{
  position:relative;
  width:100%;
  height:100%;
  color:#c0c0c0;
  background-color:#d7d7d7;
  overflow:hidden;
}
div.MonthCellOther_Saturday:hover{
  background-color:#ffffd0;
}

div.MonthCell_Date{
  position:absolute;
  left:0px;
  top:0px;
  width:100%;
  height:20px;
  text-align:right;
  cursor:pointer;
}
div.MonthCell_ItemArea{
  position:absolute;
  left:0px;
  top:20px;
  width:100%;
  height:80px;
  overflow:auto;"
}

div.MonthCell_Item{
  position:relative;
  width:100%;
  height:30px;
  text-align:left;
  font-size:12px;
  padding-left:5px;
  padding-right:5px;
  margin-bottom:5px;
  color:black;
  cursor:pointer;
  background-color:cyan;
  overflow:auto;
}
div.MonthCell_Item:hover{
  background-color:yellow;
}
div.MonthCell_SelectedItem{
  position:relative;
  width:100%;
  height:20px;
  text-align:left;
  font-size:12px;
  margin-bottom:5px;
  color:black;
  cursor:pointer;
  background-color:lightgray;
}
div.MonthCell_SelectedItem:hover{
  background-color:pink;
}
div.BodyStyle{
  position:relative;
  width:100%;
  height:100%;
}
@media screen and (min-width: 921px)
{
div.LoginForm{
  position:relative;
  width:500px;
  height:200px;
  margin-bottom:50px;
}
div.LoginFormID{
  position:absolute;
  top:20px;
  left:0px;
  width:100%;
  height:60px;
}
div.LoginFormPW{
  position:absolute;
  top:80px;
  left:0px;
  width:100%;
  height:60px;
}
div.LoginForm_Title{
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
  height:30px;
}
div.LoginForm_Input{
  position:absolute;
  top:30px;
  left:0px;
  width:100%;
  height:30px;
}
div.LoginFormSubmit{
  position:absolute;
  top: 160px;
  left:0px;
  width:100px;
  height: 30px;
}
div.LoginFormMsg{
  position:relative;
  width:100%;
  height:30px;
  color:red;
}
div.Header{
  position:relative;
  left:0px;
  top:0px;
  width:100%;
  height:250px;
  margin:0px;
  background-color:black;
  overflow:hidden;
}
div.Header_menu{
  position:absolute;
  bottom:110px;
  width:auto;
  height:auto;
  font-size:12px;
  border-right:1px solid white;
}
div.Header_menuitem{
  position:relative;
  padding:5px;
  width:auto;
  float:left;
  border-left:1px solid white;
  color:white;
}
div.MainPageHeader{
  position:absolute;
  left:0px;
  bottom:0px;
  width:100%;
  height:100px;
  background-image: url(/images/bg_header-1.jpg);
}
img.MainPageHeader_logo{
  position:absolute;
  left:20px;
  top:10px;
}
div.MainPageHeader_username{
  position:absolute;
  right:20px;
  top:10px;
  height:30px;
}
div.MainPageHeader_headertitle{
  position:absolute;
  font-size:30px;
  height:30px;
  width:100%;
  height:100%;
  display:-webkit-flex;
  display:flex;
  -webkit-align-items:center;
  align-items:center;
  -webkit-justify-content:center;
  justify-content:center;
}
div.MainPageBody{
  position:relative;
  left:0px;
  top:0px;
  width:100%;
  height:auto;
}
div.MainPage{
  position:relative;
  width:98%;
  height:auto;
}
div.MainPageInfo{
  position:relative;
  left:0px;
  top:0px;
  width:83%;
  overflow-wrap:break-word;
  word-wrap: break-word;
  padding:10px;
  float:left;
}
div.MainPageSideMenu{
  position:relative;
  left:0%;
  top:0px;
  width:17%;
  overflow-wrap:break-word;
  word-wrap: break-word;
  float:left;
}
div.MainPageFooter
{
  position:relative;
  width:100%;
  height:150px;
  margin-top:20px;
  border-top:3px solid #c0c0c0;
}
div.MainPageFooter_company{
  position:absolute;
  left:20px;
  top:10px;
  width:200px;
  height:20px;
  font-size:16px;
}
div.MainPageFooter_address{
  position:absolute;
  left:50px;
  top:30px;
  width:300px;
  height:80px;
  font-size:12px;
}
div.MainPageFooter_copyright{
  position:absolute;
  left:0px;
  bottom:0px;
  width:100%;
  height:50px;
  font-size:12px;
  border-top:1px solid #f0f0f0;
}
}
@media screen and (min-width: 481px) and (max-width: 920px)
{
div.LoginForm{
  position:relative;
  width:500px;
  height:200px;
  margin-bottom:50px;
}
div.LoginFormID{
  position:absolute;
  top:20px;
  left:10px;
  width:100%;
  height:30px;
}
div.LoginFormPW{
  position:absolute;
  top:80px;
  left:10px;
  width:100%;
  height:30px;
}
div.LoginForm_Title{
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
  height:30px;
}
div.LoginForm_Input{
  position:absolute;
  top:30px;
  left:0px;
  width:100%;
  height:30px;
}
div.LoginFormSubmit{
  position:absolute;
  top: 160px;
  left:0px;
  width:100px;
  height: 30px;
}
div.LoginFormMsg{
  position:relative;
  width:100%;
  height:30px;
  color:red;
}
div.Header{
  position:relative;
  left:0px;
  top:0px;
  width:100%;
  height:250px;
  margin:0px;
  background-color:black;
}
div.Header_menu{
  position:absolute;
  bottom:110px;
  width:auto;
  height:auto;
  font-size:12px;
  border-right:1px solid white;
}
div.Header_menuitem{
  position:relative;
  padding:5px;
  width:auto;
  float:left;
  border-left:1px solid white;
  color:white;
}
div.MainPageHeader{
  position:absolute;
  left:0px;
  bottom:0px;
  width:100%;
  height:100px;
  background-image: url(/images/bg_header-1.jpg);
}
img.MainPageHeader_logo{
  position:absolute;
  left:20px;
  top:10px;
}
div.MainPageHeader_username{
  position:absolute;
  right:20px;
  top:10px;
  height:30px;
}
div.MainPageHeader_headertitle{
  position:absolute;
  font-size:30px;
  height:30px;
  width:100%;
  height:100%;
  display:-webkit-flex;
  display:flex;
  -webkit-align-items:center;
  align-items:center;
  -webkit-justify-content:center;
  justify-content:center;
}
div.MainPageBody{
  position:relative;
  left:0px;
  top:0px;
  width:100%;
}
div.MainPage{
  position:relative;
  width:100%;
}
div.MainPageInfo{
  position:relative;
  width:100%;
  overflow-wrap:break-word;
  word-wrap: break-word;
  padding:10px;
}
div.MainPageSideMenu{
  display:none;
}
div.MainPageFooter
{
  position:relative;
  width:100%;
  height:150px;
  margin-top:20px;
  border-top:3px solid #c0c0c0;
}
div.MainPageFooter_company{
  position:absolute;
  left:20px;
  top:10px;
  width:200px;
  height:20px;
  font-size:16px;
}
div.MainPageFooter_address{
  position:absolute;
  left:50px;
  top:30px;
  width:300px;
  height:80px;
  font-size:12px;
}
div.MainPageFooter_copyright{
  position:absolute;
  left:0px;
  bottom:0px;
  width:100%;
  height:50px;
  font-size:12px;
  border-top:1px solid #f0f0f0;
}
}
@media screen and (min-width: 0px) and (max-width: 480px)
{
div.LoginForm{
  position:relative;
  width:100%;
  height:200px;
  margin-bottom:50px;
}
div.LoginFormID{
  position:absolute;
  top:20px;
  left:0px;
  width:100%;
  height:30px;
}
div.LoginFormPW{
  position:absolute;
  top:80px;
  left:0px;
  width:100%;
  height:30px;
}
div.LoginForm_Title{
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
  height:30px;
}
div.LoginForm_Input{
  position:absolute;
  top:30px;
  left:0px;
  width:100%;
  height:30px;
}
div.LoginFormSubmit{
  position:absolute;
  top: 160px;
  left:0px;
  width:100px;
  height: 30px;
}
div.LoginFormMsg{
  position:relative;
  width:100%;
  height:30px;
  color:red;
}
div.Header{
  position:relative;
  left:0px;
  top:0px;
  width:100%;
  height:250px;
  margin:0px;
  background-color:black;
}
div.Header_menu{
  position:absolute;
  bottom:110px;
  width:auto;
  height:auto;
  font-size:12px;
  border-right:1px solid white;
}
div.Header_menuitem{
  position:relative;
  padding:5px;
  width:auto;
  float:left;
  border-left:1px solid white;
  color:white;
}
div.MainPageHeader{
  position:absolute;
  left:0px;
  bottom:0px;
  width:100%;
  height:100px;
  background-image: url(/images/bg_header-1.jpg);
}
img.MainPageHeader_logo{
  position:absolute;
  width:70%;
  left:20px;
  top:10px;
}
div.MainPageHeader_username{
  position:absolute;
  right:20px;
  bottom:10px;
  height:30px;
}
div.MainPageHeader_headertitle{
  position:absolute;
  font-size:30px;
  height:30px;
  width:100%;
  height:100%;
  display:-webkit-flex;
  display:flex;
  -webkit-align-items:center;
  align-items:center;
  -webkit-justify-content:center;
  justify-content:center;
}
div.MainPageBody{
  position:relative;
  left:0px;
  top:0px;
  width:100%;
}
div.MainPage{
  position:relative;
  width:100%;
}
div.MainPageInfo{
  position:relative;
  width:100%;
  overflow-wrap:break-word;
  word-wrap: break-word;
  padding:10px;
}
div.MainPageSideMenu{
  display:none;
}
div.MainPageFooter
{
  position:relative;
  width:100%;
  height:150px;
  margin-top:20px;
  border-top:3px solid #c0c0c0;
}
div.MainPageFooter_company{
  position:absolute;
  left:20px;
  top:10px;
  width:200px;
  height:20px;
  font-size:16px;
}
div.MainPageFooter_address{
  position:absolute;
  left:50px;
  top:30px;
  width:300px;
  height:80px;
  font-size:12px;
}
div.MainPageFooter_copyright{
  position:absolute;
  left:0px;
  bottom:0px;
  width:100%;
  height:50px;
  font-size:12px;
  border-top:1px solid #f0f0f0;
}
}