body.admin,body.admin .headnavi{
  background-color: #e0ecda;
}
body.student,body.student .headnavi{
  background-color: #c7dfe9;
}
main{
  padding: 70px 0 0 0;
}
@media(max-width:1120px){
  main{
    padding: 70px 20px 0;
  }
}

main > .inner > div > section{
  background-color: #FFF;
}
.side{
  flex: 0 0 200px;
  position: relative;
}
@media(min-width:1001px){
  main .side > nav{
    position:fixed;
  }
  main > .flex{
    display: flex;
  }
}
@media(max-width:1000px){
  main > .flex{
    display: block;
  }
  main .side nav ul{
    display: flex;
    justify-content: space-between;
    padding: 0 20px 0 0;
  }
}
@media(max-width:600px){
  main .side{
    display: none;
  }
}
.main{
  flex: 1 1 auto;
}
.side li{
  margin: 10px 0;
}
.side a{
  display: flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  font-size: 15px;
}


.main{
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.main section > .inner{
  padding: 20px;
  margin: 0;
  flex: 1 1 auto;
}

/*---------------------------------------------------------icon*/
.ic{
  display: flex;
  align-items: center;
}
.ic:before{
  content: "";
  display: inline-block;
  width: 30px;
  height: 30px;
  vertical-align: middle;
  margin-right: 5px;
}
.ic.class:before{
  background: url(../images/icon-class.svg);
  background-size: 100%;
}
.ic.student:before{
  background: url(../images/icon-student.svg);
  background-size: 100%;
}
.ic.schedule:before{
  background: url(../images/icon-schedule.svg);
  background-size: 100%;
}
.ic.assesment:before{
  background: url(../images/icon-assesment.svg);
  background-size: 100%;
}
.ic.seminar:before{
  background: url(../images/icon-seminar.svg);
  background-size: 100%;
}
.ic.event:before{
  background: url(../images/icon-event.svg);
  background-size: 100%;
}
.ic.biz-green{
  filter: invert(50%) sepia(53%) saturate(685%) hue-rotate(69deg) brightness(91%) contrast(88%);
}

/*---------------------------------------------------------table*/

table.lined{
  width: 100%;
  border-collapse: collapse;
}
table.lined tr{
  border-bottom: 1px dashed #999;
}
table.lined td{
  padding: 8px 10px;
}
table.lined tr:hover{
  background-color: #e4e4e4;
}
table.profile{
  border:5px solid #FFF;
  border-collapse: collapse;
}
table.profile td{
  padding: 15px;
  vertical-align: top;
}
table.profile tr:nth-child(odd) td{
  background-color: #f7f7f7;
}
@media(max-width:800px){
  table.lined td{
    width: auto !important;
    padding: 5px;
  }
}
@media(max-width:600px){
  table.lined tr{
    display: block;
    padding: 10px 0;
  }
  table.lined td{
    display: block;
    text-align: left;
  }
  table.class-assesment tr:first-child{
    display: none;
  }
  table.class-assesment td:nth-child(5):before{
    content: "開始日: ";
  }
  table.class-assesment td:nth-child(6):before{
    content: "終了日: ";
  }
  table.class-assesment td:nth-child(7):before{
    content: "受講前アセスメント: ";
  }
  table.class-assesment td:nth-child(8):before{
    content: "受講後アセスメント: ";
  }
}
/*---------------------------------------------------------input*/
label {
    display: flex;
    align-items: center;
    cursor: pointer;
}
input[type="radio"]{
  display: none;
}
input[type="radio"] + .mark{
  display: inline-block;
  margin-right: 5px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border:3px solid #49b8e7;
  background-color: #FFF;
}
input[type="radio"]:checked + .mark{
  position: relative;  
}
input[type="radio"]:checked + .mark:before{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #1377a4;
}
input[type="checkbox"]{
  display: none;
}
input[type="checkbox"] + .mark{
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 5px;
  background:url(../images/check.svg);
  background-size: 100%;
}
input[type="checkbox"]:checked + .mark{
  background:url(../images/check-checked.svg);
  background-size: 100%;
}
input[type="number"],input[type="text"],input[type="e-mail"],input[type="date"],input[type="password"],textarea,select{
  height: 35px;
  border: 2px solid #49b8e7;
  font-size: 0.9em;
  border-radius: 4px;
  color: #434343;
}
input[type="number"]{
  width: 60px;
  text-align: center;
}
input[type="text"]{
  width: 100%;
}
input[type="date"]{
  font-family: Roboto, sans-serif;
}
textarea{
  height: 20em;
  width: 100%;
  font-family: "Noto Sans JP", sans-serif;
}
input[type="file"]{
  display: none;
}
label.file{
  display: flex;
  background-color: #3b99c1;
  color: #FFF;
  padding: 5px 10px;
  border-radius: 20px;
  cursor: pointer;
  gap: 10px;
  align-items: center;
  white-space: nowrap;
}
label.file:before{
  display: block;
  content: "";
  background-image: url(../images/icon-plus.svg);
  background-size: 100%;
  filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(0deg) brightness(102%) contrast(102%);
  width: 20px;
  height: 20px;
}
input[type="submit"],input[type="button"]{
  background-color: #3b99c1;
  color: #FFF;
  padding: 5px 10px;
  border-radius: 20px;
  cursor: pointer; 
  min-width: 120px;
  border: 0px;
  font-size: 1.0em;
}
input.cancel{
  background-color: #999;
}

.disabled{
  opacity: 0.4;
  cursor: none;
  pointer-events: none;
}
.tab-check{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap:wrap;
}
.tab-check label{
  position: relative;
  display: inline-block;
}
.tab-check label svg{
  vertical-align: middle;
}
.tab-check input[type="radio"] + .mark{
  display: block;
  width: 100%;
  height: 100%;
  margin-right: 0px;
  background:#9c899b none;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  border-radius: 5px;
  border:none;
}
.tab-check input[type="radio"] + .mark:before{
  display: none;
}
.tab-check input[type="radio"] + .mark + span{
  position: relative;
  z-index: 1;
  padding: 5px 10px;
  display: inline-block;
  color: #FFF;
}
.tab-check input[type="radio"]:checked + .mark{
  background:#A1499C none;
}
.tab-check input[type="radio"]:checked + .mark + span{
}
.tab-check.green input[type="radio"] + .mark{
  background:#9db89b none;
}
.tab-check.green input[type="radio"]:checked + .mark{
  background:#319f2c none;
}


/*---------------------------------------------------------button*/
.btn{
  font-family: "Noto Sans JP", sans-serif;
  border: 0px;
  background-color: #7A7A7A;
  color: #FFF;
  border-radius: 5px;
  padding: 5px 12px 5px 6px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
}
.btn.inline-block{
  display: inline-block;
  padding: 5px 10px;
}
.btn.big{
  padding: 15px;
}

.btn:before{
  content: "";
  width: 20px;
  height: 20px;
  display: block;
  filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(0deg) brightness(102%) contrast(102%);
}
.btn.none:before{
  display: none;
}
.btn.edit:before{
  background-image: url(../images/icon-edit.svg);
  background-size: 100%;
}
.btn.plus:before{
  background-image: url(../images/icon-plus.svg);
  background-size: 100%;
}
.btn.list:before{
  background-image: url(../images/icon-list.svg);
  background-size: 100%;
}
.btn.cloud:before{
  background-image: url(../images/icon-cloud.svg);
  background-size: 100%;
}
.btn.share:before{
  background-image: url(../images/icon-share.svg);
  background-size: 100%;
}
.btn.chevron-l:before{
  background-image: url(../images/icon-chevron-l.svg);
  background-size: 30px;
  background-position: center,center;
}
.btn.chevron-r:before{
  background-image: url(../images/icon-chevron-r.svg);
  background-size: 30px;
  background-position: center,center;
}
.btn.assesment:before{
  background-image: url(../images/icon-assesment.svg);
  background-size: 30px;
  background-position: center,center;
}
.btn.close{
  padding: 5px;
}
.btn.close:before{
  background-image: url(../images/icon-plus.svg);
  background-size: 100%;
  transform: rotate(45deg);
}
.btn.biz-green,
.btn.biz-blue
{
  background-color: transparent;
}
.btn.biz-green:before{
  filter:invert(72%) sepia(13%) saturate(6158%) hue-rotate(67deg) brightness(96%) contrast(60%);
}
.btn.biz-blue:before{
  filter:invert(36%) sepia(100%) saturate(753%) hue-rotate(163deg) brightness(108%) contrast(104%);
}

/*---------------------------------------------------------school-list*/
.school-list{
  flex: 0 0 calc((100% - 80px) / 4);
  background-color: #FFF !important;
}
.school-list .detail{
  padding: 5px 12px;
}
.school-list .detail a{
  text-decoration: none;
}
.school-list .btn.edit{
  padding: 8px;
  margin: 0 0 0 auto;
  border-radius: 5px 0 0 0;
}
/*---------------------------------------------------------assesment*/
.assesment-wrap{
  background-color: #FFF;
  padding: 20px;
  margin-bottom: 40px;
}
.assesment-wrap .question{
  flex:0 0 40%;
  font-weight: bold;
}
.assesment-wrap .answer{
  flex:1 1 auto;
}
.assesment-wrap.agree .question{
  margin-bottom: 30px;
}
.assesment-wrap.agree .answer{
  display: flex;
  justify-content: space-evenly;
  gap: 20px;
}
.assesment-wrap.agree .answer label{
  flex-direction: column;
}
@media (max-width:800px){
  .assesment-wrap .question{
    margin-bottom: 20px;
  }
}

/*---------------------------------------------------------modal*/

.modal{
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
  padding: 20px;
  background-color: rgba(155,155,155,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.modal .inner{
  padding: 20px;
  border-radius: 20px;
  background-color: #FFF;
  max-width: 800px;
  background-color: #EEE;
  overflow: auto;
}
.modal h1{

}
.modal .flex{
  gap: 10px;
}
.modal label{
  display: flex;
  gap: 10px;
  align-items: center;
}
.modal .inner > label + label{
  margin-top: 10px;
}
.modal label > span.wide{
  display: block;
  flex: 0 0 100%;
}
.modal .box{
  gap: 0px;
  border: 2px solid #49b8e7;
  border-radius: 5px;
  padding: 5px;
  background-color: #FFF;
}
.modal .box button{
  margin-right: 5px;
}
.modal button{
  background-color: #3b99c1;
  color: #FFF;
  padding: 5px 10px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 1em;
  border:none;
}

@media (min-width:750px){
  .modal .inner {
    min-width: 550px;
  }
}
























/**/