@charset "UTF-8";
/* レイアウト関連 */
@import url(https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap);
#loading {
  display: table;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: white;
  opacity: 0.8;
}

#loading .loadingMsg {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  padding-top: 140px;
  background: url("../img/loading.gif") center center no-repeat;
}

/* 共通部分 */
/*
keycolor
#007acc
#b7b8b6
#34675c
#b3c100
#c2007b
http://www.hp-stylelink.com/news/2013/07/20130708.php#lowList23
*/
html {
  font-size: 62.5%;
}

body {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 100;
  font-size: 1.4rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

a {
  color: #007acc;
  text-decoration: none;
}

a:hover, a:focus {
  cursor: pointer;
  text-decoration: underline;
  color: white;
  background-color: #007acc;
}

input[type="text"]:focus, input[type="password"]:focus, input[type="number"]:focus {
  background-color: #c8e9ff;
}

select {
  padding: 0.25rem;
}

.section-title {
  padding: 0 0 1rem 0;
  font-size: 1.8rem;
}

main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-bottom: 3rem;
}

.main-container {
  min-width: 1000px;
  max-width: 1200px;
  padding: 0.5rem;
}

@media (max-width: 480px) {
  .main-container {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
  }
}

.search-box {
  background-color: #eeeeee;
  border: 1px solid gray;
  border-radius: 5px;
  padding: 1rem;
  margin-top: 1rem;
}

.search-condition-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-bottom: 1rem;
}

.search-condition-list > div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.search-condition-list dt {
  padding: 0.5rem;
  background-color: #b7b8b6;
  vertical-align: middle;
  line-height: 1.5rem;
}

.search-condition-list dd {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0.25rem 1rem 0.25rem 0.5rem;
}

.user-profile-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-bottom: 1rem;
}

.user-profile-list > div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.user-profile-list dt {
  padding: 0.5rem;
  background-color: #b7b8b6;
  vertical-align: middle;
  line-height: 1.5rem;
}

.user-profile-list dd {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0.25rem 1rem 0.25rem 0.5rem;
}

.list-exebtn-area {
  padding-top: 1rem;
  text-align: right;
}

.course-list-box {
  margin-top: 1em;
  position: relative;
  min-height: 48rem;
  padding-bottom: 6rem;
}

@media (max-width: 480px) {
  .course-list-box {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    padding-bottom: 7rem;
  }
}

.course-list-tbl {
  margin-top: 1em;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.course-list-tbl tr:hover {
  background-color: rgba(179, 193, 0, 0.5);
}

.course-list-tbl th, .course-list-tbl td {
  padding: 0.5em 0.25em;
  border: 1px solid gray;
}

.course-list-tbl th {
  background-color: #eeeeee;
}

.mypage-course-list-tbl {
  margin-top: 1em;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 480px) {
  .mypage-course-list-tbl thead {
    display: none;
  }
}

@media (max-width: 480px) {
  .mypage-course-list-tbl tr {
    position: relative;
    border: 1px solid gray;
    display: block;
  }
}

.mypage-course-list-tbl tr:hover {
  background-color: rgba(179, 193, 0, 0.5);
}

.mypage-course-list-tbl th, .mypage-course-list-tbl td {
  padding: 0.5em 0.5em;
  border: 1px solid gray;
}

.mypage-course-list-tbl th {
  background-color: #eeeeee;
}

@media (max-width: 480px) {
  .mypage-course-list-tbl th {
    display: none;
  }
}

@media (max-width: 480px) {
  .mypage-course-list-tbl td {
    padding: 0.2em;
    display: inline-block;
    border: 0 none;
  }
}

.course-lecture-list-tbl tbody tr {
  cursor: pointer;
}

.course-lecture-list-tbl tbody tr.select {
  background-color: #c1dcef;
}

.user-course-lecture-tbl {
  margin: 1rem 0;
}

.mypage-course-nm {
  min-width: 25rem;
  max-width: 30rem;
}

@media (max-width: 480px) {
  .mypage-course-nm {
    min-width: 70%;
  }
}

@media (max-width: 480px) {
  .mypage-course-first-day, .mypage-course-last-day {
    content: attr(data-title) " :";
    width: 50%;
  }
}

@media (max-width: 480px) {
  .mypage-course-first-day::before, .mypage-course-last-day::before {
    content: attr(data-title) " :";
    padding: 0 10px 0 0;
    display: inline;
  }
}

.mypage-course-pass-cnt, .mypage-course-cnt {
  text-align: right;
}

@media (max-width: 480px) {
  .mypage-course-pass-cnt, .mypage-course-cnt {
    width: 10%;
  }
}

@media (max-width: 480px) {
  .mypage-course-cnt::before {
    content: " / ";
  }
}

.mypage-course-progress {
  text-align: center;
}

@media (max-width: 480px) {
  .mypage-course-progress {
    width: 80%;
  }
}

td.mypage-course-detail {
  text-align: center;
}

@media (max-width: 480px) {
  td.mypage-course-detail {
    width: 100%;
    background-color: #efefef;
    margin-top: 0.5rem;
    padding: 1rem 0.5rem;
  }
}

@media (max-width: 480px) {
  .mypage-course-detail::after {
    content: ": " attr(data-title);
  }
}

.mypage-search-btn {
  width: 14rem;
  padding: 0.25rem;
}

@media (max-width: 480px) {
  .mypage-search-btn {
    width: 100%;
  }
}

.mypage-search-btn i {
  margin-right: 0.5rem;
}

.user-lecture-list-tbl {
  margin-top: 1em;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 480px) {
  .user-lecture-list-tbl thead {
    display: none;
  }
}

@media (max-width: 480px) {
  .user-lecture-list-tbl tr {
    position: relative;
    border: 1px solid gray;
    display: block;
  }
}

.user-lecture-list-tbl tr:hover {
  background-color: rgba(179, 193, 0, 0.5);
}

.user-lecture-list-tbl th,
.user-lecture-list-tbl td {
  padding: 0.5em 0.5em;
  border: 1px solid gray;
}

.user-lecture-list-tbl th {
  background-color: #eeeeee;
}

@media (max-width: 480px) {
  .user-lecture-list-tbl th {
    display: none;
  }
}

@media (max-width: 480px) {
  .user-lecture-list-tbl td {
    padding: 0.2em;
    display: inline-block;
    border: 0 none;
  }
}

@media (max-width: 480px) {
  .user-lecture-start::before,
  .user-lecture-end::before,
  .user-lecture-last::before {
    content: attr(data-title) " :";
    padding: 0 10px 0 0;
    display: inline;
  }
}

@media (max-width: 480px) {
  .user-lecture-last {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .user-lecture-description {
    width: 100%;
  }
}

td.user-lecture-attend {
  text-align: center;
}

@media (max-width: 480px) {
  td.user-lecture-attend {
    width: 100%;
    background-color: #efefef;
    margin-top: 0.5rem;
    padding: 1rem 0.5rem;
  }
}

@media (max-width: 480px) {
  .user-lecture-attend::after {
    content: " " attr(date-title);
  }
}

.course-cd-cell {
  width: 6.5em;
  text-align: center;
}

@media (max-width: 480px) {
  .course-cd-cell {
    width: initial;
  }
}

.course-nm-cell {
  width: 25rem;
}

@media (max-width: 480px) {
  .course-nm-cell {
    width: initial;
  }
}

.day-cell {
  width: 6.5em;
  text-align: center;
}

@media (max-width: 480px) {
  .day-cell {
    width: initial;
  }
}

.datetime-cell {
  width: 11em;
  text-align: center;
}

@media (max-width: 480px) {
  .datetime-cell {
    width: initial;
  }
}

.course-description-cell {
  width: auto;
}

.course-list-tbl-course-pass-cnt
, .course-list-tbl-course-lectures-cnt
, .course-list-tbl-course-progress {
  text-align: center;
}

.course-list-tbl-long-text-wrapper {
  width: 100%;
  max-height: 2em;
  overflow: hidden;
  word-break: break-all;
}

.search-result-list-container {
  position: relative;
  min-height: 48rem;
  padding-bottom: 7rem;
}

/* CourseLecture 受講者ごと講座進捗一覧 CSS */
.course-detail-progress-container {
  display: inline-block;
  margin: 1rem 0;
  max-height: 300px;
  overflow-y: scroll;
}

.course-detail-progress-tbl {
  margin: 0;
  margin-top: 0;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

@media (max-width: 480px) {
  .course-detail-progress-tbl tr {
    border: 1px solid gray;
    padding: 0.2rem;
    display: inline-block;
  }
}

.course-detail-progress-tbl tr:hover {
  background-color: rgba(179, 193, 0, 0.5);
}

@media (max-width: 480px) {
  .course-detail-progress-tbl thead {
    display: none;
  }
}

.course-detail-progress-tbl th, .course-detail-progress-tbl td {
  padding: 0.5em 0.25em;
  border: 1px solid gray;
}

.course-detail-progress-tbl th {
  background-color: #eeeeee;
}

@media (max-width: 480px) {
  .course-detail-progress-tbl td {
    padding: 0.2em;
    display: inline-block;
    border: 0 none;
  }
}

.course-detail-progress-cd {
  width: 10rem;
  text-align: center;
}

@media (max-width: 480px) {
  .course-detail-progress-cd {
    width: initial;
  }
}

.course-detail-progress-name {
  width: 20rem;
}

@media (max-width: 480px) {
  .course-detail-progress-name {
    width: initial;
    min-width: 70%;
  }
}

.course-detail-progress-first-day,
.course-detail-progress-last-day {
  text-align: center;
}

@media (max-width: 480px) {
  .course-detail-progress-first-day,
  .course-detail-progress-last-day {
    width: 50%;
  }
}

.course-detail-progress-finish {
  width: 8rem;
  text-align: center;
}

@media (max-width: 480px) {
  .course-detail-progressbox {
    width: calc( 100% - 8rem);
  }
}

@media (max-width: 480px) {
  .course-detail-progress-first-day::before,
  .course-detail-progress-last-day::before,
  .course-detail-progress-finish::before {
    content: attr(data-title) " :";
    padding: 0 10px 0 0;
    display: inline;
  }
}

.lecture-progress-order-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 1rem 0.5rem 0;
}

.lecture-progress-order-container dl {
  margin-bottom: 0;
}

.lecture-progress-container {
  display: inline-block;
  margin: 1rem 0;
  max-height: 300px;
  overflow-y: scroll;
}

.lecture-progress-tbl {
  margin: 0;
  margin-top: 0;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

@media (max-width: 480px) {
  .lecture-progress-tbl tr {
    border: 1px solid gray;
    padding: 0.2rem;
    display: inline-block;
  }
}

.lecture-progress-tbl tr:hover {
  background-color: rgba(179, 193, 0, 0.5);
}

@media (max-width: 480px) {
  .lecture-progress-tbl thead {
    display: none;
  }
}

.lecture-progress-tbl th, .lecture-progress-tbl td {
  padding: 0.5em 0.25em;
  border: 1px solid gray;
}

.lecture-progress-tbl th {
  background-color: #eeeeee;
}

@media (max-width: 480px) {
  .lecture-progress-tbl td {
    padding: 0.2em;
    display: inline-block;
    border: 0 none;
  }
}

.lecture-progress-tbl-cd {
  width: 10rem;
  text-align: center;
}

@media (max-width: 480px) {
  .lecture-progress-tbl-cd {
    width: initial;
  }
}

.lecture-progress-tbl-name {
  width: 20rem;
}

@media (max-width: 480px) {
  .lecture-progress-tbl-name {
    width: initial;
    min-width: 70%;
  }
}

.lecture-progress-tbl-first-day,
.lecture-progress-tbl-last-day {
  text-align: center;
}

@media (max-width: 480px) {
  .lecture-progress-tbl-first-day,
  .lecture-progress-tbl-last-day {
    width: 50%;
  }
}

.lecture-progress-tbl-finish {
  text-align: center;
}

@media (max-width: 480px) {
  .lecture-progress-tbl-finish {
    width: 50%;
  }
}

@media (max-width: 480px) {
  .lecture-progress-tbl-first-day::before,
  .lecture-progress-tbl-last-day::before,
  .lecture-progress-tbl-finish::before {
    content: attr(data-title) " :";
    padding: 0 10px 0 0;
    display: inline;
  }
}

footer {
  position: fixed;
  bottom: 0;
  left: 0;
  padding: 0.5em;
  margin: 0;
}

button {
  padding: 0.1rem 1rem;
  border: 1px solid gray;
}

button:hover:not([disabled]), button:focus:not([disabled]) {
  cursor: pointer;
  background-color: #007acc;
  color: white;
}

.search-result-btn {
  width: 14rem;
  margin-right: 1rem;
  margin-left: auto;
  display: block;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

@media (max-width: 480px) {
  .search-result-btn {
    width: 100%;
    margin-right: initial;
    margin-left: initial;
  }
}

.has-event-cell {
  text-align: center;
}

.has-event-cell i {
  font-size: 1.8rem;
}

.has-event-cell:hover, .has-event-cell:focus {
  cursor: pointer;
  background-color: #007acc;
  color: white;
}

.has-event-cell:hover a, .has-event-cell:focus a {
  color: white;
}

.profile-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.profile-img-box {
  margin: 0 2rem;
  background: #eeeeee;
  width: 100px;
  height: 100px;
  border: #007acc 1px solid;
  border-radius: 50px;
}

.profile-text-box {
  font-size: 1.5rem;
  width: calc(100% - 100px);
}

@media (max-width: 480px) {
  .profile-text-box {
    width: 100%;
  }
}

td.progressbar-container-cell {
  padding: 0 1rem;
  vertical-align: middle;
}

.progressbar-container {
  border: 1px solid gray;
  height: 2rem;
  position: relative;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 200px;
}

@media (max-width: 480px) {
  .progressbar-container {
    width: 100%;
  }
}

.progressbar-color {
  position: absolute;
  background-color: #007acc;
  height: 100%;
}

.progress-list {
  margin-top: 1rem;
  position: relative;
  padding-bottom: 6rem;
}

section {
  border: 1px gray solid;
  padding: 1rem;
  border-radius: 5px;
  margin-top: 1rem;
}

@media (max-width: 480px) {
  section {
    padding: 0.5rem;
  }
}

.news-list {
  margin-left: 1.5rem;
}

.setting-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.setting-list dt {
  width: 200px;
  padding: 1rem;
  background-color: #b7b8b6;
}

.setting-list dd {
  width: calc(100% - 200px);
  padding: 0.5rem 1rem 0.5rem 0.5rem;
}

.setting-edit-btn {
  margin-left: 1rem;
}

.event-icon {
  font-size: 1.5rem;
  margin-left: 1rem;
  padding: 0.25rem;
}

.event-icon:hover, .event-icon:focus {
  cursor: pointer;
  background-color: #007acc;
  color: white;
}

.entry-course {
  margin: 1rem auto;
  min-width: 80%;
}

.entry-course input[type='text'] {
  width: 90%;
}

.entry-course th, .entry-course td {
  padding: 0.5em 0.25em;
  border: 1px solid gray;
}

.entry-course th {
  background-color: #eeeeee;
  min-width: 20%;
}

.entry-course td {
  min-width: 30%;
}

.course-add-box {
  display: none;
}

.course-add-box {
  position: absolute;
  background-color: white;
  width: 95%;
  z-index: 11;
  border: 1px solid #007acc;
  -webkit-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.4);
          box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.4);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

.mail-config-btn-ctrl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  padding: 0.5rem;
}

.mail-config-btn-ctrl button:not(:last-child) {
  margin-right: 1rem;
}

.mail-config-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  border-right: 1px solid gray;
  border-bottom: 1px solid gray;
}

.mail-config-item-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.mail-config-item-container dt {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 10em;
  background-color: #eee;
  border-top: 1px solid gray;
  border-left: 1px solid gray;
  padding: 0 0.5rem;
}

.mail-config-item-container dd {
  width: calc(100% - 10em);
  border-top: 1px solid gray;
  border-left: 1px solid gray;
}

.mail-config-dd-password {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.mail-config-item-container input {
  width: 100%;
  padding: 0.5rem;
  border: none;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.mail-config-dd-password i {
  display: none;
  position: absolute;
  right: 0rem;
  padding: 0.5rem;
  cursor: pointer;
}

.mail-config-dd-password:hover > i {
  display: block;
  opacity: 0.5;
}

.mail-config-dd-password i.active {
  opacity: 0.8;
}

.backup-download-btn-container {
  padding: 2rem 0;
}

.backup-download-btn-container button {
  padding: 1.5rem;
}

input[type="number"] {
  width: 6em;
}

.login-box {
  margin-left: auto;
  margin-right: auto;
  width: 300px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

@media (max-width: 480px) {
  .login-box {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
  }
}

.login-dl {
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.login-dl dt {
  margin-top: 1rem;
}

.login-box input[type="text"] {
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

@media (max-width: 480px) {
  .login-box input[type="text"] {
    padding: 0.5rem;
    font-size: 120%;
  }
}

.login-box input[type="password"] {
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

@media (max-width: 480px) {
  .login-box input[type="password"] {
    padding: 0.5rem;
    font-size: 120%;
  }
}

.login-box button {
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 1rem 0;
}

@media (max-width: 480px) {
  .login-box button {
    padding: 0.5rem;
    font-size: 120%;
  }
}

.login-title {
  text-align: left;
  font-size: 2rem;
  padding: 1rem 0;
}

.send-mail-system-admin-layer {
  display: none;
  max-width: 500px;
  height: 200px;
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -75%);
          transform: translate(-50%, -75%);
  border: 0.25em solid #007acc;
  border-top: 2em solid #007acc;
  background-color: white;
  z-index: 10;
  min-width: 300px;
}

.send-mail-system-admin-layer:hover {
  cursor: move;
}

.send-mail-system-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
  padding: 1rem;
  width: 100%;
  height: 100%;
}

.send-mail-system-admin-layer dl {
  margin: 1rem 0;
}

.send-mail-system-admin-layer dl div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.send-mail-system-admin-layer dt {
  width: 5em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-top: 1px solid gray;
  border-left: 1px solid gray;
  background-color: lightgray;
  padding: 0.5rem;
}

.send-mail-system-admin-layer dd {
  width: calc(100% - 5em);
  border-top: 1px solid gray;
  border-left: 1px solid gray;
  border-right: 1px solid gray;
}

.send-mail-system-admin-layer dl div:last-of-type dt,
.send-mail-system-admin-layer dl div:last-of-type dd {
  border-bottom: 1px solid gray;
}

.send-mail-system-admin-layer input {
  width: 100%;
  height: 100%;
  padding: 0.25rem 0.5rem;
  border: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.send-mail-ctrl-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.send-mail-ctrl-box button {
  min-width: 6rem;
  padding: 0.25rem;
}

.send-mail-ctrl-box button:not(:last-child) {
  margin-right: 2rem;
}

.bullet-icon {
  padding-right: 0.5rem;
}

.plus-icon {
  margin-top: 0.25rem;
}

.plus-icon button {
  width: 2rem;
  height: 2rem;
  padding: 0;
  margin: 0 0.75rem;
  outline: none;
}

.plus-icon i {
  font-size: 1.25rem;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  vertical-align: middle;
}

.search-param-view-container {
  max-width: 28em;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: unset;
      -ms-flex-pack: unset;
          justify-content: unset;
  overflow: hidden;
}

input[type="date"] {
  font-family: 'Noto Sans JP', sans-serif;
}

.small-title {
  font-size: 1.2rem;
}

.number-cell {
  text-align: right;
}

@media (max-width: 480px) {
  .mobile-tbl-container {
    width: 100%;
    overflow-x: scroll;
  }
  .mobile-tbl-container table {
    width: 1000px;
    overflow-x: scroll;
  }
}

.layer-ctrl-box button {
  z-index: 1;
}

label {
  padding: 0.25rem;
}

label:hover, input[type='radio']:hover {
  background-color: #007acc;
  cursor: pointer;
  color: white;
}

.active-label {
  background-color: rgba(0, 122, 204, 0.2);
}

.mylecture-condition-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.mylecture-condition-container .search-condition-list {
  margin-bottom: initial;
}

.descriptionLayer {
  display: none;
  position: absolute;
  max-width: 20em;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0.5em;
  z-index: 30;
  -webkit-box-shadow: 2px 2px 10px 1px rgba(0, 0, 0, 0.55);
          box-shadow: 2px 2px 10px 1px rgba(0, 0, 0, 0.55);
  color: #303030;
  background-color: #c1dcef;
  border: 2px solid #007acc;
  border-radius: 1rem;
  word-wrap: break-word;
}

.descTarget:hover {
  cursor: help;
}

.form-require::after {
  content: "*";
  color: #f20000;
  font-size: 1.25em;
}

.open-add-user-course-btn {
  display: block;
  margin-right: 1rem;
  margin-left: auto;
}

@media (max-width: 480px) {
  .open-add-user-course-btn {
    width: 100%;
    margin-right: initial;
    margin-left: initial;
  }
}

.material-icon,
.preview-material-icon {
  color: #f20000;
}

.preview-test-icon {
  color: #014907;
}

.has-event-cell:hover .material-icon,
.has-event-cell:focus .material-icon {
  color: white;
}

.preview-test-icon,
.preview-material-icon {
  background-color: white;
}

.system-capacity-view-list {
  margin-top: 3rem;
}

.system-capacity-view-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 1rem;
}

.system-capacity-view-row > dt {
  font-weight: 600;
  width: 8rem;
}

.page-title {
  padding: 0.5em;
  font-size: 3rem;
  text-align: center;
  background-image: linear-gradient(135deg, #007acc 50%, #0099ff 100%);
}

@media (max-width: 480px) {
  .page-title {
    font-size: 2.5rem;
    text-align: left;
  }
}

.mnm-version {
  font-size: 1.2rem;
  padding-left: 1rem;
}

.main-nav {
  min-width: 240px;
}

@media (max-width: 480px) {
  .main-nav {
    width: 100%;
    min-width: 100%;
    display: none;
    position: fixed;
    background-color: white;
    border: 2px #007acc solid;
    z-index: 100;
    border-radius: 5px;
    -webkit-box-shadow: 0 1rem rgba(0, 0, 0, 0.2);
            box-shadow: 0 1rem rgba(0, 0, 0, 0.2);
  }
}

.main-navi-list li {
  width: 100%;
}

.main-navi-list li a {
  width: 100%;
  display: inline-block;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 1rem 1rem;
}

.user-status-container {
  width: 100%;
  margin-top: 3rem;
}

.user-status-container dt, .user-status-container dd {
  padding: 1rem 1rem;
}

.user-status-container dt {
  background-image: linear-gradient(135deg, #007acc 50%, #0099ff 100%);
}

.main-nav-toggle {
  display: none;
  border: 0 none;
  padding: 0.5rem 1rem;
  font-size: 3rem;
  width: 5rem;
  text-stroke: 1px #007acc;
  -webkit-text-stroke: 1px #007acc;
  z-index: 8;
}

@media (max-width: 480px) {
  .main-nav-toggle {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    background: transparent;
    border: 1px #007acc solid;
  }
}

@media (max-width: 480px) {
  .main-nav-toggle a {
    color: white;
  }
}

@media (max-width: 480px) {
  .main-nav-toggle a:hover, .main-nav-toggle:hover {
    background: transparent;
  }
}

.search-param-layer {
  min-width: 25vw;
  max-width: 50vw;
  min-height: 10vh;
  max-height: 50vh;
  position: absolute;
  top: 50%;
  left: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  border: 0.25em solid #007acc;
  border-top: 2em solid #007acc;
  background-color: white;
  z-index: 10;
}

@media (max-width: 480px) {
  .search-param-layer {
    min-width: initial;
    max-width: 70vw;
    min-height: initial;
    max-height: 70vh;
  }
}

.search-param-layer:hover {
  cursor: move;
}

.search-param-layer-title {
  font-size: 1.8rem;
  padding: 0.5rem;
}

.search-param-keyword-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  cursor: auto;
}

.search-param-keyword-container input {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.search-param-keyword-container button {
  width: 4em;
}

.search-param-layer > ul {
  height: 100%;
  cursor: auto;
  overflow-y: scroll;
  background-color: white;
  padding: 0.25rem;
}

.search-param-layer > ul > li:hover:not(:first-child) {
  cursor: pointer;
  text-decoration: underline;
  color: white;
  background-color: #007acc;
}

.search-param-layer .layer-ctrl-box {
  background-color: white;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  margin: 1rem 0;
}

.search-param-layer .layer-ctrl-box button {
  margin-right: 2rem;
}

.search-param-span {
  margin-right: 0.5em;
  min-width: 5em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.search-param-spanp-close {
  color: red;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  margin-right: 1.5rem;
}

@media (max-width: 480px) {
  .search-param-spanp-close {
    font-size: 125%;
  }
}

.search-param-spanp-close:hover {
  color: white;
  background-color: red;
  cursor: pointer;
}

.search-param-inner-list {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  list-style: none;
}

.search-param-inner-list.header .search-param-code-container {
  background-color: lightgray;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.search-param-inner-list.header .search-param-name-container {
  background-color: lightgray;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.search-param-layer .search-param-code-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 30%;
  padding: 0.25rem;
  border-top: 1px solid black;
  border-left: 1px solid black;
}

.search-param-layer li:last-child .search-param-code-container {
  border-bottom: 1px solid black;
}

.search-param-layer .search-param-name-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 70%;
  padding: 0.25rem;
  border-top: 1px solid black;
  border-right: 1px solid black;
}

.search-param-layer li:last-child .search-param-name-container {
  border-bottom: 1px solid black;
}

.view-target-param-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  padding: 0.5rem 0.25rem;
}

.view-target-param-item-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.view-target-param-container label {
  margin-right: 0.5rem;
}

.view-target-param-item-wrapper input {
  margin: 0;
  margin-right: 0.5rem;
}

.select-param-focus {
  text-decoration: underline;
  color: white;
  background-color: #007acc;
}

.search-param-hover-list-layer {
  position: absolute;
  background-color: white;
  top: 50%;
  left: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  border: 0.25em solid gray;
  background-color: white;
  min-width: 200px;
  max-height: 70vh;
  overflow-y: scroll;
  z-index: 12;
}

.search-param-hover-list-layer:hover {
  cursor: move;
}

.search-param-hover-list-layer h3 {
  padding: 1rem;
}

.search-param-hover-list-layer ul {
  list-style: none;
  padding: 0 2rem;
}

.search-param-hover-list-layer li {
  padding: 0.5rem;
  margin: 0.5rem 0;
  background-color: lightgray;
  border-radius: 5%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.search-param-hover-list-layer .layer-ctrl-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  margin: 0.5rem 2rem;
}

.user-edit-form-layer {
  display: -ms-grid;
  display: grid;
  width: 100rem;
  height: 500px;
  -ms-grid-columns: 1fr;
      grid-template-columns: 1fr;
  -ms-grid-rows: 1fr 10fr 1fr;
      grid-template-rows: 1fr 10fr 1fr;
  border: 0.25em solid #007acc;
  border-top: 2em solid #007acc;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -27.5vh;
  margin-left: -27.5vw;
  background-color: white;
  padding: 0.25rem;
  z-index: 10;
}

@media (max-width: 480px) {
  .user-edit-form-layer {
    width: 100%;
    min-width: 100%;
    height: calc( 100% - 5rem);
    overflow-y: scroll;
    -ms-grid-rows: 19fr;
        grid-template-rows: 19fr;
    top: 5rem;
    left: 0;
    margin-left: 0;
    margin-top: 0;
    padding-bottom: 1rem;
  }
}

.user-edit-form-layer:hover {
  cursor: move;
}

.user-edit-form-layer-title {
  font-size: 1.8rem;
  padding: 0.5rem;
}

.user-edit-form-list {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  -ms-grid-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 3fr;
      grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 3fr;
  border-left: 1px solid gray;
}

@media (max-width: 480px) {
  .user-edit-form-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

.user-edit-form-item-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  grid-column: span 2;
  border-top: 1px solid gray;
  border-right: 1px solid gray;
}

.user-edit-form-item-container:last-child {
  border-bottom: 1px solid gray;
}

.user-edit-form-item-container dt {
  width: 8em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0.25rem;
  background-color: lightgray;
  border-right: 1px solid gray;
}

@media (max-width: 480px) {
  .user-edit-form-item-container dt {
    padding: 1rem 0.25rem;
  }
}

.user-edit-form-item-container dd {
  width: calc(100% - 8em);
}

.user-edit-form-item-container input {
  width: 100%;
  height: 100%;
  border: none;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0 0.25rem;
}

.user-edit-form-item-container select {
  width: 100%;
  height: 100%;
  border: none;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.department-container {
  grid-column: span 4;
}

.occupation-container {
  grid-column: span 4;
}

.corpration-container {
  grid-column: span 3;
}

.workplace-container {
  grid-column: span 3;
}

.birthday-container {
  border-bottom: 1px solid gray;
}

@media (max-width: 480px) {
  .birthday-container {
    border-bottom: initial;
  }
}

.password-container {
  grid-column: span 2;
}

.password-container dd {
  position: relative;
  border-bottom: none;
}

.password-container input {
  padding-right: 4rem;
}

.password-container:hover .password-view-icon {
  display: block;
}

.password-container .password-view-icon {
  display: none;
  position: absolute;
  top: 25%;
  right: 2.5%;
  opacity: 0.5;
  cursor: pointer;
}

.password-container .password-view-icon.active {
  opacity: 0.8;
}

.password-container input[type="password" i]::-ms-reveal {
  display: none;
}

.reconfig-container {
  border-top: none;
  border-right: 1px solid gray;
}

.reconfig-password-btn {
  width: 100%;
  background-color: red;
  color: white;
  font-weight: 600;
  border: none;
}

.mail-container {
  grid-column: span 4;
}

.courses-container {
  grid-column: span 6;
  grid-row: span 3;
}

.courses-container dt {
  width: 8em;
}

.courses-container dd {
  width: calc(100% - 8em);
  height: 100%;
}

.user-edit-form-layer .layer-ctrl-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  margin: 1rem 1rem 1rem 0;
}

@media (max-width: 480px) {
  .user-edit-form-layer .layer-ctrl-box {
    -ms-flex-pack: distribute;
        justify-content: space-around;
    margin: 1rem;
  }
}

.user-edit-form-layer .layer-ctrl-box button {
  margin-right: 0.5rem;
}

.user-edit-course-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding: 0.5rem;
}

.csv-select-list-layer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  border: 0.25em solid #007acc;
  border-top: 2em solid #007acc;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -15vh;
  margin-left: -15vw;
  background-color: white;
  padding: 0.5rem;
  z-index: 10;
}

@media (max-width: 480px) {
  .csv-select-list-layer {
    width: 100%;
    min-width: 100%;
    height: calc( 100% - 5rem);
    overflow-y: scroll;
    -ms-grid-rows: 19fr;
        grid-template-rows: 19fr;
    top: 5rem;
    left: 0;
    margin-left: 0;
    margin-top: 0;
  }
}

.csv-select-list-layer:hover {
  cursor: move;
}

.csv-select-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 0.25rem 0;
}

.csv-select-item-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  cursor: pointer;
}

.csv-select-item-container:last-child {
  margin-bottom: 0;
}

.csv-select-item-container:hover {
  text-decoration: underline;
  color: white;
  background-color: #007acc;
}

.csv-select-item-container label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  padding: 1rem 0;
  cursor: pointer;
}

.csv-select-item-container span {
  display: inline-block;
  width: 10em;
}

.csv-import-log-message {
  padding: 0.5rem;
  border-top: 1px solid gray;
  border-bottom: 1px solid gray;
  margin: 0.5rem 0 1.5rem;
  height: 4em;
  overflow-y: scroll;
}

.csv-import-log-message iframe {
  width: 100%;
}

.csv-select-list-message {
  color: #ba2323;
  text-align: right;
  font-size: 1.2rem;
  margin-top: 0.25rem;
}

.csv-select-list-layer .list-exebtn-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
}

@media (max-width: 480px) {
  .csv-select-list-layer .list-exebtn-container {
    padding: 0.25rem;
    display: block;
  }
}

@media (max-width: 480px) {
  .csv-select-list-layer .list-exebtn-container > input {
    width: 100%;
    margin-bottom: 1rem;
  }
}

@media (max-width: 480px) {
  .csv-select-list-layer .list-exebtn-container > button {
    margin-right: 1rem;
  }
}

.add-course-lecture-layer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 40vw;
  min-width: 800px;
  border: 0.25em solid #007acc;
  border-top: 2em solid #007acc;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -20vh;
  margin-left: -20vw;
  background-color: white;
  padding: 1rem 0.25rem;
  z-index: 11;
}

@media (max-width: 480px) {
  .add-course-lecture-layer {
    width: 100%;
    min-width: 100%;
    height: calc( 100% - 5rem);
    overflow-y: scroll;
    -ms-grid-rows: 19fr;
        grid-template-rows: 19fr;
    top: 5rem;
    left: 0;
    margin-left: 0;
    margin-top: 0;
    padding-bottom: 1rem;
  }
}

.add-course-lecture-layer:hover {
  cursor: move;
}

.add-course-lecture-list {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  -ms-grid-rows: 1fr 1fr 1fr 1fr 1fr;
      grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
  border-left: 1px solid gray;
  margin: 1rem 0;
}

@media (max-width: 480px) {
  .add-course-lecture-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

.add-course-lecture-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  grid-column: span 4;
  border-top: 1px solid gray;
  border-right: 1px solid gray;
}

.add-course-lecture-item:last-child {
  border-bottom: 1px solid gray;
}

.add-course-lecture-item dt {
  width: 12em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 1rem 0.25rem;
  background-color: lightgray;
  border-right: 1px solid gray;
}

@media (max-width: 480px) {
  .add-course-lecture-item dt {
    padding: 1rem 0.25rem;
  }
}

.add-course-lecture-item dd {
  width: calc(100% - 12em);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.add-course-lecture-item input {
  width: 100%;
  height: 100%;
  border: none;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0 0.25rem;
}

.add-course-lecture-item select {
  width: 100%;
  height: 100%;
  border: none;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.add-course-lecture-exam-select-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.add-course-lecture-exam-select-container label {
  margin-left: 1rem;
}

.add-course-lecture-exam-select-container input {
  width: initial;
  height: initial;
}

.add-course-lecture-description {
  grid-column: span 8;
}

.add-course-lecture-material {
  grid-column: span 8;
}

.add-course-lecture-material dd > input {
  width: 20em;
}

.add-course-lecture-material input[type="file" i]::-webkit-file-upload-button {
  margin: 0.5rem 0;
  margin-right: 0.25rem;
}

.add-course-lecture-alert-mail {
  grid-column: span 8;
}

.add-course-lecture-alert-mail dd {
  width: 4rem;
}

.add-course-lecture-alert-mail input {
  height: 75%;
  cursor: pointer;
}

.list-exebtn-area button {
  margin-right: 1rem;
}

.preview-material-container {
  grid-column: span 8;
}

.preview-material-container dd {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 0 1rem;
}

.preview-material-container dd i {
  font-size: 120%;
}

.add-user-course-layer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 1000px;
  border: 0.25em solid #007acc;
  border-top: 2em solid #007acc;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -30vh;
  margin-left: -27.5vw;
  background-color: white;
  padding: 1rem 0.25rem 6rem;
  z-index: 11;
}

@media (max-width: 480px) {
  .add-user-course-layer {
    width: 100%;
    min-width: 100%;
    min-height: initial;
    height: calc( 100% - 5rem);
    overflow-y: scroll;
    top: 5rem;
    left: 0;
    margin-left: 0;
    margin-top: 0;
    padding-bottom: 6rem;
    position: fixed;
  }
}

.add-user-course-layer:hover {
  cursor: move;
}

.add-user-course-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 0;
  list-style: none;
  margin: 1rem 0.25rem;
  border: 1px solid black;
  overflow-y: scroll;
  max-height: 400px;
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

@media (max-width: 480px) {
  .add-user-course-list {
    min-width: 80rem;
  }
}

.add-user-course-list li:first-child li {
  background-color: lightgray;
  border-top: 0;
}

.add-user-course-list > li:not(:first-child):hover {
  cursor: pointer;
  text-decoration: underline;
  color: white;
  background-color: #007acc;
}

.add-user-course-item-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  list-style: none;
  padding: 0;
}

.add-user-course-item-header-list li {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.add-user-course-item-list li {
  width: calc( (100% - 21em) / 3);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-top: 1px solid black;
  border-right: 1px solid black;
  padding: 0.25rem 0.5rem;
}

.add-user-course-item-list li:nth-of-type(7) {
  border-right: none;
}

/* 各列のwidthを全列から引いて計算 */
.add-user-course-item-list li.ipt-checkbox-container {
  width: 3em;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.add-user-course-item-list .view-staff-cd {
  width: 8em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.add-user-course-item-list .view-sex-nm {
  width: 4em;
}

.add-user-course-item-list .view-employment-status {
  width: 6em;
}

.add-user-course-layer .layer-ctrl-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

@media (max-width: 480px) {
  .add-user-course-layer .layer-ctrl-box {
    margin-top: 1rem;
  }
}

.add-user-course-layer .layer-ctrl-box button {
  margin-right: 1rem;
}

.search-param-tag-layer {
  height: 50vh;
  width: 50vw;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -25vh;
  margin-left: -25vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  border: 0.25em solid #007acc;
  border-top: 2em solid #007acc;
  background-color: white;
  z-index: 12;
}

@media (max-width: 480px) {
  .search-param-tag-layer {
    height: 70vh;
    width: 70vw;
    margin-top: -35vh;
    margin-left: -35vw;
  }
}

.search-param-tag-layer:hover {
  cursor: move;
}

.search-param-tag-layer-title {
  font-size: 1.8rem;
  padding: 0.5rem;
}

.search-param-keyword-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  cursor: auto;
}

.search-param-keyword-container input {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.search-param-keyword-container button {
  width: 4em;
}

.search-param-tag-list {
  height: 100%;
  cursor: auto;
  overflow-y: scroll;
  background-color: white;
  padding: 0.25rem;
}

.search-param-tag-list li:hover {
  cursor: pointer;
  text-decoration: underline;
  color: white;
  background-color: #007acc;
}

.search-param-tag-layer .layer-ctrl-box {
  background-color: white;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  margin: 1rem 0;
}

.search-param-tag-layer .layer-ctrl-box button {
  margin-right: 2rem;
}

.search-param-span {
  margin-right: 0.5em;
  min-width: 5em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.search-param-spanp-close {
  color: red;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  margin-right: 1.5rem;
}

@media (max-width: 480px) {
  .search-param-spanp-close {
    font-size: 125%;
  }
}

.search-param-spanp-close:hover {
  color: white;
  background-color: red;
  cursor: pointer;
}

.search-param-inner-list {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  list-style: none;
}

.search-param-inner-list.header .search-param-code-container {
  background-color: lightgray;
}

.search-param-inner-list.header .search-param-name-container {
  background-color: lightgray;
}

.search-param-checkbox-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 2em;
  padding: 0.25rem 0.5rem;
  border-left: 1px solid black;
  border-right: 1px solid black;
}

.search-param-code-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 30%;
  border-right: 1px solid black;
  padding: 0.25rem;
}

.search-param-tag-box {
  display: inline-block;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  max-width: 15em;
  border: 1px solid black;
  padding: 0.5rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  border-radius: 5px;
  margin-left: 0.5rem;
  margin-top: 0.25rem;
}

.view-target-param-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  padding: 0.5rem 0.25rem;
}

.view-target-param-item-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.view-target-param-container label {
  margin-right: 0.5rem;
}

.view-target-param-item-wrapper input {
  margin: 0;
  margin-right: 0.5rem;
}

.add-courseadmin-layer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 100rem;
  min-height: 60rem;
  border: 0.25em solid #007acc;
  border-top: 2em solid #007acc;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -30rem;
  margin-left: -50rem;
  background-color: white;
  padding: 1rem 0.25rem 2rem 0.25rem;
  z-index: 11;
}

@media (max-width: 480px) {
  .add-courseadmin-layer {
    width: 100%;
    min-width: 100%;
    min-height: initial;
    height: calc( 100% - 5rem);
    overflow-y: scroll;
    top: 5rem;
    left: 0;
    margin-left: 0;
    margin-top: 0;
    padding-bottom: 6rem;
    position: fixed;
  }
}

.add-courseadmin-layer:hover {
  cursor: move;
}

.add-courseadmin-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 0;
  list-style: none;
  margin: 1rem 0;
  border: 1px solid black;
  overflow-y: scroll;
  max-height: 400px;
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

@media (max-width: 480px) {
  .add-courseadmin-list {
    min-width: 80rem;
  }
}

.add-courseadmin-list li.select-admin {
  color: white;
  background-color: #007acc;
  text-decoration: none;
}

.add-courseadmin-list li:first-child li {
  background-color: lightgray;
  border-top: 0;
}

.add-courseadmin-list > li:not(:first-child):hover {
  cursor: pointer;
  text-decoration: underline;
  color: white;
  background-color: #007acc;
}

.add-course-admin-item-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  list-style: none;
  padding: 0;
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.add-user-course-item-header-list li {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.add-course-admin-item-list li {
  width: calc( (100% - 18em) / 3);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-top: 1px solid black;
  border-left: 1px solid black;
  padding: 0.5rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

/* 各列のwidthを全列から引いて計算 */
.add-course-admin-item-list .view-staff-cd {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 8em;
}

.add-course-admin-item-list .view-sex-nm {
  width: 4em;
}

.add-course-admin-item-list .view-employment-status {
  width: 6em;
}

.add-courseadmin-layer .layer-ctrl-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.add-courseadmin-layer .layer-ctrl-box button {
  margin-right: 1rem;
}

.edit-course-layer {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  min-width: 80rem;
  min-height: 30rem;
  border: 0.25em solid #007acc;
  border-top: 2em solid #007acc;
  padding: 0.25rem 0.25rem;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -40rem;
  margin-top: -15rem;
  background-color: white;
  z-index: 10;
}

@media (max-width: 480px) {
  .edit-course-layer {
    width: 100%;
    min-width: 100%;
    height: calc( 100% - 5rem);
    overflow-y: scroll;
    top: 5rem;
    left: 0;
    margin-left: 0;
    margin-top: 0;
    position: fixed;
  }
}

.edit-course-layer:hover {
  cursor: move;
}

.edit-course-form-list {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  -ms-grid-rows: 1fr 1fr 1fr 1fr 1fr;
      grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
  border-left: 1px solid gray;
  margin: 0;
}

@media (max-width: 480px) {
  .edit-course-form-list {
    display: block;
  }
}

.edit-course-lecture-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  grid-column: span 4;
  border-top: 1px solid gray;
  border-right: 1px solid gray;
}

.edit-course-lecture-item:last-child {
  border-bottom: 1px solid gray;
}

.edit-course-lecture-item dt {
  width: 12em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 1rem 0.25rem;
  background-color: lightgray;
  border-right: 1px solid gray;
}

@media (max-width: 480px) {
  .edit-course-lecture-item dt {
    width: 8em;
  }
}

.edit-course-lecture-item dd {
  width: calc(100% - 12em);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

@media (max-width: 480px) {
  .edit-course-lecture-item dd {
    width: calc(100% - 8em);
  }
}

.edit-course-lecture-item input {
  width: 100%;
  height: 100%;
  border: none;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0 0.25rem;
}

.edit-course-lecture-item select {
  width: 100%;
  height: 100%;
  border: none;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.edit-course-nm, .edit-course-description, .edit-course-tags {
  grid-column: span 8;
}

.list-exebtn-area button {
  margin-right: 1rem;
}

.course-admin-container {
  grid-column: span 8;
  grid-row: span 4;
  border: 1px solid gray;
}

.course-admin-container dt {
  width: 8em;
}

.course-admin-container dd {
  width: calc(100% - 8em);
  height: 100%;
  padding: 1rem 0.5rem;
}

.edit-course-layer .layer-ctrl-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  margin: 1rem 1rem 1rem 0;
}

.edit-course-layer .layer-ctrl-box button {
  margin-right: 0.5rem;
}

.full-overlay {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(100, 100, 100, 0.5);
  z-index: 9;
}

.close-full-overlay {
  font-size: 5rem;
  position: absolute;
  padding: 1rem;
  top: 0;
  right: 0;
  color: red;
}

@media (max-width: 480px) {
  .close-full-overlay {
    font-size: 3rem;
    padding: 0.5rem;
  }
}

.close-full-overlay:hover {
  text-decoration: none;
}

.user-add-course-layer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 1000px;
  border: 0.25em solid #007acc;
  border-top: 2em solid #007acc;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -30vh;
  margin-left: -500px;
  background-color: white;
  padding: 1rem 0.25rem;
  z-index: 11;
}

@media (max-width: 480px) {
  .user-add-course-layer {
    width: 100%;
    min-width: 100%;
    min-height: initial;
    height: calc( 100% - 5rem);
    overflow-y: scroll;
    top: 5rem;
    left: 0;
    margin-left: 0;
    margin-top: 0;
    padding-bottom: 6rem;
    position: fixed;
  }
}

.user-add-course-layer:hover {
  cursor: move;
}

.user-add-course-ctrl-form-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 0.5rem 0.25rem;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.user-add-course-ctrl-form-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-right: 2rem;
}

.user-add-course-ctrl-form-item dt:not(:last-child),
.user-add-course-ctrl-form-item dd:not(:last-child) {
  margin-right: 1rem;
}

.user-add-course-ctrl-form-item .select-tag-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.user-add-course-ctrl-form-item input {
  padding: 0.25rem;
}

.user-add-course-ctrl-form-item select {
  min-width: 10rem;
}

.user-add-course-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  list-style: none;
  padding: 0.5rem 0.25rem;
}

@media (max-width: 480px) {
  .user-add-course-list {
    min-width: 80rem;
  }
}

.user-add-course-list-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  list-style: none;
}

.user-add-course-list li:first-child > ul {
  background-color: lightgray;
}

.user-add-course-list li:first-child > ul > li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.user-add-course-list li:last-child > ul > li {
  border-bottom: 1px solid gray;
}

.user-add-course-list-item li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0.25rem;
  border-top: 1px solid gray;
  border-left: 1px solid gray;
  white-space: nowrap;
  overflow: hidden;
}

.user-add-course-list-item .item-checkbox {
  width: 3rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.user-add-course-list-item li:not(.item-checkbox):not(.item-day) {
  width: calc( (100% - 13rem) / 4);
}

.user-add-course-list-item li:last-child {
  border-right: 1px solid gray;
}

.user-add-course-list-item .item-day {
  width: 10rem;
  text-align: center;
}

.user-add-course-ctrl-button-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  padding: 1rem 0.25rem;
}

.user-add-course-ctrl-button-box button {
  z-index: 1;
}

.user-add-course-ctrl-button-box button:not(:last-child) {
  margin-right: 2rem;
}

.search-tags-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  max-width: 40rem;
  overflow: hidden;
}

.search-tag-item-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.dialog-message-layer {
  position: absolute;
  width: 300px;
  max-height: 50%;
  background: white;
  border-color: #007acc;
  border-width: 0.25rem;
  border-top-width: 2rem;
  border-radius: 5px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 21;
}

.close-dialog-layer {
  font-size: 5rem;
  position: absolute;
  padding: 1rem;
  top: 0;
  right: 0;
  color: red;
}

.close-dialog-layer:hover {
  text-decoration: none;
}

.dialog-message-box {
  white-space: pre-wrap;
}

.dialog-message-box i {
  margin-right: 0.5rem;
}

.dialog-message-layer .fa-check-circle {
  color: #70b062;
}

.dialog-message-layer .fa-times-circle {
  color: #cd5638;
}

.dialog-message-layer .fa-exclamation-triangle {
  color: #e3ab30;
}

.dialog-message-footer {
  margin-top: 1em;
  text-align: right;
}

.pager {
  margin-top: 1rem;
  margin-bottom: 1rem;
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
}

.pager .pagination {
  text-align: center;
}

.pager .pagination li {
  display: inline;
  margin: 0 2px;
  display: inline-block;
  text-align: center;
  position: relative;
}

.pager .pagination li a {
  display: inline-block;
  text-decoration: none;
  border: 1px solid gray;
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
}

.pager .pagination li.pre,
.pager .pagination li.next {
  display: none;
}

.pager .pagination li a:hover,
.pager .pagination li a.page-active,
.pager .pagination li.page-active a {
  color: #fff;
  background: #007acc;
}

@media (max-width: 480px) {
  .pager .pagination li {
    display: none;
  }
  .pager .pagination li.pre,
  .pager .pagination li.next {
    display: inline-block;
    width: 40%;
    text-align: center;
  }
  .pager .pagination li.first-pager,
  .pager .pagination li.last-pager {
    display: none;
  }
  .pager .pagination li.pre a,
  .pager .pagination li.next a,
  .pager .pagination li.first-pager a,
  .pager .pagination li.last-pager a {
    text-align: center;
  }
  .pager .pagination li.pre span::after {
    content: "前の10件へ";
  }
  .pager .pagination li.pre i {
    margin-right: 1rem;
  }
  .pager .pagination li.next span::before {
    content: "次の10件へ";
  }
  .pager .pagination li.next i {
    margin-left: 1rem;
  }
}

.loading-overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(100, 100, 100, 0.5);
  z-index: 9;
  display: none;
}

span.loading-mnm {
  position: relative;
  display: inline-block;
  font-size: 1.5rem;
  color: #007acc;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
  padding: 2rem 2rem;
  background-color: rgba(224, 224, 224, 0.8);
  border-radius: 1rem;
}

span.loading-mnm span {
  position: absolute;
  display: inline-block;
  left: 0;
  bottom: 1.0rem;
  width: 100%;
  height: 0.5rem;
  background-position: 0 0;
  background-color: #007acc;
  background-image: -webkit-gradient(linear, left top, right top, from(#007acc), to(transparent));
  background-image: linear-gradient(to right, #007acc, transparent);
  vertical-align: middle;
  -webkit-animation: animation48 2s linear infinite;
  animation: animation48 2s linear infinite;
}

@-webkit-keyframes animation48 {
  0% {
    width: 0;
    background-color: transparent;
  }
  40% {
    width: 100%;
    background-color: transparent;
  }
  80% {
    width: 100%;
  }
  100% {
    width: 100%;
  }
}

@keyframes animation48 {
  0% {
    width: 0;
    background-color: transparent;
  }
  40% {
    width: 100%;
    background-color: transparent;
  }
  80% {
    width: 100%;
  }
  100% {
    width: 100%;
  }
}
/*# sourceMappingURL=common.css.map */