@charset "UTF-8";
/*CALL*/ /* A Modern CSS Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

ul[role=list],
ol[role=list] {
  list-style: none;
}

html:focus-within {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

a:not([class]) {
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
}

img,
picture {
  max-width: 100%;
  display: block;
}

input,
button,
textarea,
select {
  font: inherit;
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *,
*::before,
*::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/*デフォルトで、一部のブラウザは親から font-family や font-size を継承しないため*/
button, input, select, textarea {
  font-family: inherit;
  font-size: 100%;
}

/**/
@font-face {
  font-family: "icomoon";
  src: url("../fonts/icomoon.eot");
  src: url("../fonts/icomoon.eot") format("embedded-opentype"), url("../fonts/icomoon.ttf") format("truetype"), url("../fonts/icomoon.woff") format("woff"), url("../fonts/icomoon.svg") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
[class^=icon-], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "icomoon" !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-info:before {
  content: "\e930";
}

.icon-key:before {
  content: "\e92f";
}

.icon-horn_on:before {
  content: "\e92e";
}

.icon-horn:before {
  content: "\e900";
}

.icon-pause:before {
  content: "\e929";
}

.icon-pause-circle:before {
  content: "\e92a";
}

.icon-play:before {
  content: "\e92b";
}

.icon-play_circle:before {
  content: "\e92c";
}

.icon-repeat:before {
  content: "\e92d";
}

.icon-preview:before {
  content: "\e927";
}

.icon-chevron-left:before {
  content: "\e925";
}

.icon-chevron-right:before {
  content: "\e926";
}

.icon-test_check:before {
  content: "\e924";
}

.icon-test_add:before {
  content: "\e91c";
}

.icon-test_folder:before {
  content: "\e91d";
}

.icon-book:before {
  content: "\e91e";
}

.icon-book_open:before {
  content: "\e91f";
}

.icon-class:before {
  content: "\e920";
}

.icon-database:before {
  content: "\e921";
}

.icon-graph:before {
  content: "\e922";
}

.icon-refresh:before {
  content: "\e923";
}

.icon-sounds:before {
  content: "\e91b";
}

.icon-file:before {
  content: "\e91a";
}

.icon-radio_off:before {
  content: "\e918";
}

.icon-radio_on:before {
  content: "\e919";
}

.icon-tri_down:before {
  content: "\e916";
}

.icon-tri_up:before {
  content: "\e917";
}

.icon-calender:before {
  content: "\e90a";
}

.icon-detail:before {
  content: "\e901";
}

.icon-download:before {
  content: "\e902";
}

.icon-edit:before {
  content: "\e903";
}

.icon-exit:before {
  content: "\e904";
}

.icon-eye:before {
  content: "\e905";
}

.icon-eye_closed:before {
  content: "\e906";
}

.icon-gear:before {
  content: "\e907";
}

.icon-help:before {
  content: "\e908";
}

.icon-notavailable:before {
  content: "\e909";
}

.icon-plus:before {
  content: "\e915";
}

.icon-print:before {
  content: "\e90b";
}

.icon-serach:before {
  content: "\e90c";
}

.icon-sort_down:before {
  content: "\e90d";
}

.icon-sort_up:before {
  content: "\e90e";
}

.icon-time:before {
  content: "\e90f";
}

.icon-trash:before {
  content: "\e910";
}

.icon-unlock:before {
  content: "\e911";
}

.icon-upload:before {
  content: "\e912";
}

.icon-user:before {
  content: "\e913";
}

.icon-user_add:before {
  content: "\e914";
}

.icon-user_profile:before {
  content: "\e928";
}

/* COMMON -----------------------------------*/
html {
  font-size: 62.5%;
  font-family: -apple-system, BlinkMacSystemFont, YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
  color: #22759C;
  overflow-x: hidden;
  margin: 0px;
}

body {
  background: #f0f3f6;
  height: 100vh;
  font-size: 1.4rem;
  margin: 0px;
}

#app {
  background: #f0f3f6;
  height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
  font-size: 1.4rem;
  margin: 0px;
}

header,
footer {
  width: 100%;
  margin: 0 auto;
}

#wrapper,
#footermenu {
  width: 100%;
  margin: 0 auto;
}

header {
  background: #C9DBE3;
  color: #3F85A6;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
header h1 {
  width: 260px;
  font-size: 1.8rem;
  padding: 20px 0;
  text-align: center;
  background: #3F85A6;
  color: #b8d2e0;
  text-align: center;
}
header h1 img {
  display: block;
  width: 80%;
  height: auto;
  margin: 0 auto;
}
header h2 {
  text-align: left;
  margin-right: auto;
  margin-left: 40px;
  opacity: 0.5;
}
header .header_menu {
  display: flex;
  align-items: center;
  margin-right: 20px;
}
header .header_menu .username {
  margin-right: 1em;
  margin-left: 2em;
}
header .header_menu button.ico-help {
  width: 30px;
  height: 30px;
  padding: 0;
  background: none;
  border: none;
}
header .header_menu button.ico-help::before {
  font-family: "icomoon" !important;
  content: "\e908";
  font-size: 30px;
  color: #3F85A6;
}
header .header_menu button.ico-info {
  width: 30px;
  height: 30px;
  padding: 0;
  background: none;
  border: none;
}
header .header_menu button.ico-info::before {
  font-family: "icomoon" !important;
  content: "\e930";
  font-size: 30px;
  color: #3F85A6;
}

#wrapper {
  flex: 1;
  display: flex;
}
#wrapper #contents {
  flex: 1;
  padding: 40px;
}
#wrapper #contents h1 {
  font-size: 2.4rem;
  margin-bottom: 2rem;
  border-bottom: 2px solid #3F85A6;
}
#wrapper #contents h1:before {
  content: "";
}

footer {
  display: none;
  margin-top: auto;
  background: gray;
}

/*footermenu*/
#footermenu {
  display: flex;
  list-style: none;
}

h1 {
  font-size: 2rem;
}

h2 {
  font-size: 1.8rem;
}

h3 {
  font-size: 1.6rem;
}

h4 {
  font-size: 1.6rem;
}

.pos-r {
  display: block;
  margin-left: auto;
  margin-right: 0;
}

.pos-c {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

button {
  color: #fff;
  background: #3F85A6;
  border: 1px solid #3F85A6;
  border-radius: 4px;
  padding: 0.5em 1em;
  line-height: 1;
  min-width: 6em;
  font-size: 1.6rem;
  cursor: pointer;
}
button:hover {
  opacity: 0.6;
}

button:disabled {
  background-color: #ccc;
  border: 1px solid #ccc;
  color: #666;
  opacity: 0.6;
}

[class^=btn-] {
  font-family: "icomoon" !important;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
}
[class^=btn-]::before {
  font-size: 2rem;
}

[class^=btn-]:hover {
  opacity: 0.6;
}

.btn-help::before {
  content: "\e908";
}

.btn-print::before {
  content: "\e90b";
}

.btn-upload::before {
  content: "\e912";
}

table [class^=btn-] {
  width: 2em;
  height: 2em;
  padding: 0;
  display: inline;
  min-width: initial;
}
table [class^=btn-]:before {
  margin: 0;
}

.btn-download::before {
  content: "\e902";
}

.btn-edit:before {
  content: "\e903";
}

.btn-trash:before {
  content: "\e910";
}

.btn-refresh:before {
  content: "\e923";
}

.btn-preview:before {
  content: "\e927";
}

.btn-tri_down,
.btn-tri_up {
  width: 1.5em !important;
  height: 1.5em !important;
  background: none;
  color: #3F85A6;
  border: none;
  display: block;
  font-size: 2rem;
}

.btn-tri_down:before {
  content: "\e916";
}

.btn-tri_up:before {
  content: "\e917";
}

.btn-cancel {
  border: 1px solid #ccc !important;
  color: #22759C;
  background: #ccc;
}

.btns_layoutC {
  text-align: center;
}
.btns_layoutC button {
  min-width: 8em;
  margin: 0 0.5em;
}

.btn_area {
  text-align: center;
}
.btn_area button {
  min-width: 8em;
  margin: 0 0.5em;
}

.btn-print {
  display: flex;
  align-items: center;
}
.btn-print::before {
  content: "\e90b";
  display: inline-block;
  margin-right: 0.25em;
}

.btn-download {
  display: flex;
  align-items: center;
}
.btn-download::before {
  content: "\e902";
  display: inline-block;
  margin-right: 0.25em;
}

.btn-plus {
  display: flex;
  align-items: center;
}
.btn-plus::before {
  font-family: "icomoon" !important;
  content: "\e915";
  display: inline-block;
  margin-right: 0.25em;
}

.btn-search {
  display: flex;
  align-items: center;
}
.btn-search::before {
  font-family: "icomoon" !important;
  content: "\e90c";
  display: inline-block;
  margin-right: 0.25em;
}

.btn-return {
  display: flex;
  align-items: center;
}
.btn-return:before {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
  transform: rotate(-45deg);
  margin-right: 0.25em;
}

.btn-refresh {
  display: flex;
  align-items: center;
}
.btn-refresh::before {
  font-family: "icomoon" !important;
  content: "\e923";
  display: inline-block;
  margin-right: 0.25em;
}

.btn-delete {
  display: flex;
  align-items: center;
}
.btn-delete::before {
  font-family: "icomoon" !important;
  content: "\e910";
  display: inline-block;
  margin-right: 0.25em;
}

/**/
.btn-detail {
  width: 3em !important;
  font-size: 1.4rem;
}

.btn-next_student {
  display: flex;
  align-items: center;
}
.btn-next_student:after {
  font-family: "icomoon";
  content: "\e926";
  display: inline-block;
  font-size: 2rem;
  line-height: 1;
  margin-left: 0.25em;
}

.btn-prev_student {
  display: flex;
  line-height: 1;
}
.btn-prev_student:before {
  font-family: "icomoon";
  content: "\e925";
  display: inline-block;
  font-size: 2rem;
  line-height: 1;
  margin-right: 0.25em;
}

.tab-box button {
  font-size: 1.4rem;
}

/*USER*/
.btn-exam {
  display: flex;
  align-items: center;
  background: #ff8a14;
  border: none;
  margin-right: 1em;
}
.btn-exam::before {
  content: "\e91c";
  display: inline-block;
  margin-right: 0.25em;
}

.btn-status {
  display: flex;
  align-items: center;
  border: none;
}
.btn-status::before {
  content: "\e922";
  display: inline-block;
  margin-right: 0.25em;
}

.btn-pw {
  display: flex;
  align-items: center;
  margin-left: 20px;
  border: none;
}
.btn-pw::before {
  content: "\e92f";
  display: inline-block;
  margin-right: 0.25em;
}

#testplay {
  display: block;
  width: 100px !important;
  height: 100px !important;
  padding: 20px;
  border-radius: 100%;
  margin: 0 auto;
  line-height: 1;
  min-width: auto;
  border: none;
  background-repeat: no-repeat;
  background-position: center center;
  background-color: #ffac1c;
  background-size: 60%;
}

#testplay.arc-type {
  background-color: #ff7e1c;
}

.btn-horn {
  background-image: url("../img/horn.svg");
}

.btn-horn_on {
  background-image: url("../img/horn_on.svg");
}

.btn-start {
  margin-top: 2em;
}

/*form items*/
.required {
  color: #f2230c;
  line-height: 1;
}

.required-msg {
  color: #f2230c;
  margin-bottom: 1em;
  font-size: 1.6rem;
}

input[type=text],
input[type=password] {
  padding: 0.5em 0.5em;
  outline: none;
  width: 100%;
  border: 1px solid #ccc;
}

input:focus,
textarea:focus {
  border: 1px solid #00a3cc;
  outline: none;
}

textarea {
  width: 100%;
  height: 100%;
  border: 1px solid #ccc;
  padding: 0.1em 0.5em;
  text-align: left;
}

select {
  border: 1px solid #ccc;
  padding: 8px;
}

label {
  position: relative;
}

label.checkbox {
  display: inline-block;
}

.checkbox input[type=checkbox] {
  display: none;
}

.checkbox input[type=checkbox] + span {
  position: relative;
  cursor: pointer;
  padding-left: 2em;
}

.checkbox input[type=checkbox] + span:before {
  content: "";
  position: absolute;
  left: 0px;
  top: 0px;
  display: inline-block;
  width: 20px;
  height: 20px;
  background: #d7dde4;
  border-radius: 4px;
  cursor: pointer;
}

.cb_pos_right.checkbox input[type=checkbox] + span {
  margin-left: 5px;
}

.cb_pos_right.checkbox input[type=checkbox] + span:before {
  content: "";
  position: absolute;
  right: 20px;
  display: inline-block;
  width: 20px;
  height: 20px;
  background: #d7dde4;
  border-radius: 4px;
  cursor: pointer;
}

table td .checkbox {
  width: 20px;
}

.checkbox input[type=checkbox]:checked + span:before {
  background: #ff8a14;
}

.checkbox input[type=checkbox]:checked + span:after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 8px;
  border-left: 3px solid #fff;
  border-bottom: 3px solid #fff;
  transform: rotate(-45deg);
  position: absolute;
  left: 2px;
  top: 3px;
}

.checkbox input[type=checkbox]:disabled + span {
  opacity: 0.4;
  cursor: arrow;
}

.radio {
  display: inline-block;
  margin-right: 2em;
}
.radio:hover {
  cursor: pointer;
}
.radio span {
  display: flex;
  align-items: center;
}

.radio input[type=radio] {
  display: none;
}

.radio input[type=radio] + span:before {
  font-family: "icomoon" !important;
  content: "\e918";
  display: inline-block;
  color: #ccc;
  font-size: 2.4rem;
  margin-right: 5px;
}

.radio input[type=radio]:checked + span:before {
  font-family: "icomoon" !important;
  content: "\e919";
  display: inline-block;
  color: #ff8a14;
}

dl.form-item, .bulk-operation dl, dl.mng_stu_search {
  display: flex;
  width: 100%;
  align-items: center;
  margin-bottom: 1.5em;
  font-size: 1.6rem;
}
dl.form-item dt, .bulk-operation dl dt, dl.mng_stu_search dt {
  min-width: 12em;
  font-weight: bold;
  text-align: right;
  padding: 0.5em;
  margin-right: 1em;
}
dl.form-item dd, .bulk-operation dl dd, dl.mng_stu_search dd {
  flex: 1;
}

dl.form-item-def {
  display: flex;
  width: 100%;
  align-items: center;
  margin-bottom: 1.5em;
  font-size: 1.6rem;
}
dl.form-item-def dt {
  font-weight: bold;
  text-align: right;
  padding: 0.5em;
  margin-right: 1em;
  margin-left: 2em;
  min-width: 5em;
}
dl.form-item-def dd {
  flex: 1;
}

/**/
#attachment label {
  /* ボタン部分の見た目（任意） */
  display: inline-block;
  position: relative;
  background: #3F85A6;
  color: #fff;
  white-space: nowrap;
  padding: 0.25em 1em;
  border-radius: 4px;
  width: 12em;
}

#attachment label:hover {
  opacity: 0.6;
  cursor: pointer;
}

#attachment label input {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
}

#attachment .filename {
  font-weight: 16px;
  margin: 0 0 0 10px;
}

.ico-file:before {
  font-family: "icomoon" !important;
  content: "\e91a";
}

/*search_area*/
.search_area {
  display: flex;
}
.search_area .search_txt {
  width: 30em !important;
  margin-right: 10px;
}

input[type=date] {
  margin-right: 0.5em;
}

.userid-input input {
  width: 50%;
}

/*side menu*/
#side_menu {
  background: #4f5f6f;
  width: 260px;
  font-size: 1.6rem;
  line-height: 1;
  /**/
  /*
  .sp_admin_menu{
  	background: lightgoldenrodyellow;
  }
  .admin_menu{
  	background: palegreen;
  }
  .teacher_menu{
  	background: paleturquoise;
  }*/
  /*
  	 .teacher_menu{
  		a,div{
  			display: block;
  			padding:15px 10px 15px 15px;
  			text-decoration: none;
  			color:$sideMenuTxt;
  			border-left:6px solid #4f686f;
  			background: #4f686f;
  		}
  		a:hover,
  		div.sub_menu_head:hover,
  		.sub_menu a:hover{
  			color:$sideMenuTxt-Hover;
  			border-left:6px solid #c1e9eb;
  			background: #5e7d85;
  		}

  		.sub_menu a {
  			border-left: 6px solid #465c63;
  			background: #465c63;
  		}
  	 }*/
}
#side_menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
#side_menu li {
  border-bottom: 1px solid none;
  background: #4f5f6f;
  /*.current_menu a{
  	border-left: 6px solid #C1DDEB;
  	color: #fff;
  	background: #5e7285;
  }*/
}
#side_menu li:first-child {
  border-top: 1px solid none;
}
#side_menu li a.current_menu {
  color: #fff;
}
#side_menu li a, #side_menu li div {
  display: block;
  padding: 15px 10px 15px 15px;
  text-decoration: none;
  color: #b8d2e0;
  border-left: 6px solid #4f5f6f;
}
#side_menu li a:hover {
  color: #fff;
  border-left: 6px solid #C1DDEB;
  background: #5e7285;
}
#side_menu li div.sub_menu_head {
  display: flex;
  align-content: center;
  border-bottom: 1px solid none;
}
#side_menu li div.sub_menu_head:hover {
  color: #fff;
  cursor: pointer;
  border-left: 6px solid #C1DDEB;
  background: #5e7285;
}
#side_menu li div.sub_menu_head:after {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  border-right: 2px solid #b8d2e0;
  border-bottom: 2px solid #b8d2e0;
  transform: rotate(45deg);
  transition-duration: 0.2s;
  margin-top: 4px;
  margin-left: auto;
}
#side_menu li .sub_menu {
  display: none;
}
#side_menu li .sub_menu_head.active:after {
  transform: rotate(225deg);
}
#side_menu li ul.sub_menu a {
  border-left: 6px solid #465463;
  background: #465463;
  padding-left: 2.5em;
  color: #b8d2e0;
}
#side_menu li ul.sub_menu a:hover {
  border-left: 6px solid #C1DDEB;
  color: #fff;
  background: #5e7285;
}
#side_menu li:last-child {
  border-bottom: none;
}
#side_menu li:first-child {
  border-top: 1px solid none;
}
#side_menu .sub_menu_head.active + .sub_menu {
  display: block;
}
#side_menu .sub_menu_head.active + .sub_menu a.current_menu {
  color: #fff;
}
#side_menu a[class^=icon-]:before,
#side_menu .icon-book:before,
#side_menu .icon-test_add:before,
#side_menu .icon-class:before,
#side_menu .icon-database:before,
#side_menu .icon-test_check:before {
  margin-right: 0.5em;
}
#side_menu .teacher_menu {
  border-top: 2px solid rgba(255, 255, 255, 0.2);
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}

/*table*/
table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  margin: 1em auto;
  background: #fff;
}
table tr th, table tr td {
  padding: 5px;
  border: 1px solid #E6E9ED;
}
table tr th {
  color: #fff;
  background: #3F85A6;
  text-align: left;
  height: 2.5em;
  font-weight: normal;
  line-height: 1.2;
}
table tr:nth-child(odd) td {
  background: #f0f7fa;
}
table th {
  line-height: 1.2;
}

th.sort {
  cursor: pointer;
  position: relative;
}

th.sort::before,
th.sort::after {
  content: "";
  height: 8px;
  width: 8px;
  position: absolute;
  border-top: 2px solid #c1ddeb;
  border-right: 2px solid #c1ddeb;
  right: 10px;
  top: 50%;
}

th.sort::before {
  transform: translateY(-8px) rotate(-45deg);
}

th.sort::after {
  transform: translateY(2px) rotate(135deg);
}

th.sort.ascending::before {
  border-top: 2px solid #00d0ff;
  border-right: 2px solid #00d0ff;
  margin-top: 2px;
}

th.sort.descending::after {
  border-top: 2px solid #00d0ff;
  border-right: 2px solid #00d0ff;
  margin-top: -2px;
}

table .icon-eye {
  font-size: 2.4rem;
  color: #00a3cc;
}

table .icon-eye_closed {
  font-size: 2.4rem;
  opacity: 0.5;
}

table .icon-user_profile {
  font-size: 2.4rem;
  color: #00a3cc;
}

table .icon-notavailable {
  font-size: 2.4rem;
  opacity: 0.5;
}

/*教材の管理 ---------------------*/
table.materials th {
  text-align: center;
}
table.materials th:nth-child(1) {
  width: 2em;
}
table.materials th:nth-child(2) {
  width: 4em;
  text-align: center;
}
table.materials th:nth-child(4) {
  width: 5em;
}
table.materials th:nth-child(5) {
  width: 6em;
}
table.materials th:nth-last-child(1),
table.materials th:nth-last-child(2) {
  width: 4em;
  text-align: center;
}
table.materials td:nth-child(1) {
  text-align: center;
}
table.materials td:nth-child(2) {
  text-align: right;
}
table.materials td:nth-child(3),
table.materials td:nth-child(4) {
  text-align: left;
}
table.materials td:nth-child(5),
table.materials td:nth-last-child(1),
table.materials td:nth-last-child(2),
table.materials td:nth-last-child(3) {
  text-align: center;
}

/*単元別テストの管理 ---------------------*/
table.unit_test th:nth-last-child(1),
table.unit_test th:nth-last-child(2),
table.unit_test td:nth-last-child(1),
table.unit_test td:nth-last-child(2),
table.unit_test td:nth-last-child(3) {
  text-align: center;
  width: 4em;
}

/*到達度テストの管理 ---------------------*/
table.achievement_test th:nth-last-child(1),
table.achievement_test th:nth-last-child(2),
table.achievement_test td:nth-last-child(1),
table.achievement_test td:nth-last-child(2),
table.achievement_test td:nth-last-child(3) {
  text-align: center;
  width: 4em;
}

/*単元別テストの管理 ---------------------*/
table.class-table th:nth-child(1) {
  text-align: center;
  width: 3em;
}
table.class-table td:nth-child(1) {
  text-align: right;
}
table.class-table td:nth-child(6) {
  width: 8em;
  text-align: center;
}
table.class-table th:nth-child(3) {
  min-width: 16em;
}
table.class-table th:nth-child(4) {
  min-width: 10em;
}
table.class-table th:nth-child(5) {
  width: 12em;
}
table.class-table th:nth-child(5) {
  width: 12em;
}
table.class-table th:nth-last-child(1),
table.class-table th:nth-last-child(2),
table.class-table th:nth-last-child(3),
table.class-table td:nth-last-child(1),
table.class-table td:nth-last-child(2),
table.class-table td:nth-last-child(3) {
  width: 6rem;
  text-align: center;
}

/*table_teachcer*/
.table_teacher th:nth-child(1), .mng-student-edit th:nth-child(1) {
  width: 3em;
}
.table_teacher th:nth-child(2), .mng-student-edit th:nth-child(2) {
  width: 6em;
}
.table_teacher th:nth-last-child(3), .mng-student-edit th:nth-last-child(3) {
  white-space: nowrap;
}
.table_teacher th:nth-last-child(1), .mng-student-edit th:nth-last-child(1),
.table_teacher th:nth-last-child(2),
.mng-student-edit th:nth-last-child(2),
.table_teacher td:nth-last-child(1),
.mng-student-edit td:nth-last-child(1),
.table_teacher td:nth-last-child(2),
.mng-student-edit td:nth-last-child(2) {
  width: 6rem;
  text-align: center;
}
.table_teacher th:nth-last-child(3), .mng-student-edit th:nth-last-child(3),
.table_teacher td:nth-last-child(3),
.mng-student-edit td:nth-last-child(3) {
  width: 8rem;
  text-align: center;
}

.table_mng-student th:nth-child(1) {
  width: 4em;
}
.table_mng-student th:nth-child(2) {
  width: 6em;
}
.table_mng-student th:nth-last-child(3) {
  white-space: nowrap;
}
.table_mng-student th:nth-last-child(1),
.table_mng-student th:nth-last-child(2),
.table_mng-student td:nth-last-child(1),
.table_mng-student td:nth-last-child(2) {
  width: 6rem;
  text-align: center;
}
.table_mng-student th:nth-last-child(3),
.table_mng-student td:nth-last-child(3) {
  width: 8rem;
  text-align: center;
}

/*table_graph*/
.table_graph {
  margin: 0.5em auto;
}
.table_graph .below td {
  background: #ffe0e3;
}
.table_graph td {
  overflow-y: hidden;
}
.table_graph th:nth-child(1) {
  text-align: center;
  width: 4em;
}
.table_graph th:nth-child(2) {
  text-align: center;
  width: 10em;
}
.table_graph th:nth-child(3) {
  text-align: center;
  width: 7em;
}
.table_graph th:nth-child(4) {
  text-align: center;
  width: 8em;
}
.table_graph th:nth-child(5) {
  text-align: center;
  width: 6em;
}
.table_graph .scale_cell {
  display: flex;
  /*
  span:nth-child(odd){
  	background: #ffe0e3;
  }*/
}
.table_graph .scale_cell span {
  width: 10%;
  text-align: right;
}
.table_graph .graph_cell {
  display: flex;
  width: 100%;
  position: relative;
  height: 20px;
}
.table_graph .graph_cell .bar-li {
  background: #79b336;
  width: 25%;
  height: 20px;
}
.table_graph .graph_cell .bar-vo {
  background: #00c1e3;
  width: 50%;
  height: 20px;
}
.table_graph .graph_cell .def_line:after {
  content: "";
  display: inline-block;
  border-left: 2px solid #465463;
  height: 300%;
  width: 1;
  position: absolute;
  top: -100%;
  left: calc( 100% * 0.6 );
}
.table_graph .graph_cell .avg_line:after {
  content: "";
  display: inline-block;
  border-left: 2px solid red;
  height: 300%;
  width: 1;
  top: -100%;
  position: absolute;
  left: calc( 100% * 0.13 );
}

/**/
.below td {
  background: #ffe0e3 !important;
}

/*materials_view*/
.materials_view td:first-of-type {
  width: 4em;
  text-align: center;
}
.materials_view th {
  text-align: center;
}

/*test-list-table*/
.test-list-table th {
  text-align: center;
}
.test-list-table td:nth-child(1) {
  width: 3em;
  text-align: center;
}
.test-list-table td:nth-child(3) {
  color: red;
}
.test-list-table td:nth-last-child(1) {
  width: 4em;
  text-align: center;
}

.audiocell td:nth-child(2),
.audiocell td:nth-child(3) {
  width: 32%;
}

.test-audio-table th {
  text-align: center;
}
.test-audio-table tr td {
  background: #fff !important;
}
.test-audio-table td:nth-child(1) {
  width: 3em;
  text-align: center;
}
.test-audio-table .prevtd {
  text-align: center;
  border-bottom: 2px solid rgba(63, 133, 166, 0.7) !important;
}

.test-audio-table tr:nth-child(odd) td {
  border-bottom: 2px solid rgba(63, 133, 166, 0.7) !important;
}

.test-audio-table tr:nth-child(even) > td:nth-child(1) {
  border-bottom: 2px solid rgba(63, 133, 166, 0.7) !important;
}

.test-audio-table tr .table-answer td {
  text-align: left;
  border: 1px solid #E6E9ED !important;
}

.table-answer {
  margin: 0;
}
.table-answer th {
  text-align: center;
  width: 10em;
  background: rgba(223, 228, 232, 0.8);
  color: #22759C;
  border-top: 1px solid #c1cbd3 !important;
}
.table-answer td {
  text-align: left;
  border-top: 1px solid #c1cbd3 !important;
}
.table-answer tr:nth-child(1) {
  color: red;
}
.table-answer tr:nth-child(1) th {
  border-top: none !important;
}

/*learning_info_table*/
.learning_info_table th {
  text-align: center;
}

/*checklist_auto*/
.scoringlist_auto th {
  text-align: center;
}
.scoringlist_auto th:nth-of-type(1),
.scoringlist_auto td:nth-of-type(1) {
  width: 2em;
  text-align: center;
}
.scoringlist_auto th:last-child {
  width: 5em;
}
.scoringlist_auto select {
  color: red;
}

.student_paper th,
.student_paper td:nth-of-type(1),
.student_paper td:last-child {
  text-align: center;
}
.student_paper td:nth-of-type(3) {
  color: red;
}
.student_paper td:nth-of-type(1) {
  width: 3em;
}
.student_paper th:last-child {
  width: 5em;
}
.student_paper select {
  color: red;
}

/*table_linkdata*/
.table_linkdata th:nth-of-type(1),
.table_linkdata td:nth-of-type(1) {
  width: 2em;
  text-align: center;
}
.table_linkdata th:nth-of-type(2) {
  width: 50%;
}
.table_linkdata th:nth-of-type(3) {
  width: 50%;
}
.table_linkdata th:nth-of-type(4) {
  text-align: center;
  width: 4em;
}

.table_linkdata_stu th:nth-of-type(1),
.table_linkdata_stu td:nth-of-type(1) {
  text-align: center;
  width: 2em;
}
.table_linkdata_stu th:nth-of-type(6) {
  text-align: center;
  width: 4em;
}

.deleted_list th:nth-of-type(1) {
  text-align: center;
  width: 3em;
}
.deleted_list tr.deleted_line td {
  background: #d6dce5 !important;
  color: #90969c;
}
.deleted_list td:nth-of-type(1) {
  text-align: center;
}

/*USER*/
table.listening_progress {
  width: 100%;
  margin: 0 auto;
}
table.listening_progress th, table.listening_progress td {
  text-align: center;
}
table.listening_progress td:nth-child(1) {
  text-align: left;
}
table.listening_progress td:nth-child(1) span {
  display: block;
}

.user_status_result table.study-time {
  width: initial;
  margin: 0;
}
.user_status_result table.study-time tr td {
  background: none;
  border: none;
  border-bottom: 1px solid #3F85A6;
}
.user_status_result table.study-time tr:first-child td {
  border-top: 1px solid #3F85A6;
}
.user_status_result table.study-time td:nth-child(2) {
  text-align: right;
  padding-left: 4em;
}

.user_status table {
  margin: 0 auto;
}

.result_table th {
  text-align: center;
}
.result_table tr:nth-of-type(1) th:nth-of-type(1),
.result_table tr:nth-of-type(1) th:nth-of-type(6),
.result_table tr:nth-of-type(1) th:nth-of-type(7) {
  text-align: center;
}
.result_table tr:nth-of-type(1) th:nth-of-type(7) {
  width: 9em;
}
.result_table tr:nth-of-type(2) th {
  text-align: center;
}
.result_table td:nth-child(1) {
  text-align: right;
  width: 4em;
}
.result_table td:nth-child(6),
.result_table td:nth-child(7),
.result_table td:nth-child(8),
.result_table td:nth-child(9),
.result_table td:nth-child(10),
.result_table td:nth-child(11) {
  text-align: center;
}
.result_table a {
  color: #00a3cc;
}

.result_table_user tr:nth-of-type(1) th {
  text-align: center;
}
.result_table_user tr:nth-of-type(1) th:nth-of-type(7) {
  width: 9em;
}
.result_table_user tr:nth-of-type(2) th {
  text-align: center;
}
.result_table_user td {
  text-align: right;
}
.result_table_user td:nth-child(2) {
  text-align: left;
}
.result_table_user a {
  color: #00a3cc;
}
.result_table_user td:nth-child(3),
.result_table_user td:nth-child(5),
.result_table_user td:nth-child(7),
.result_table_user td:nth-child(9),
.result_table_user td:nth-child(11),
.result_table_user td:nth-child(13) {
  min-width: 3em;
}
.result_table_user td:nth-child(4),
.result_table_user td:nth-child(6),
.result_table_user td:nth-child(8),
.result_table_user td:nth-child(10),
.result_table_user td:nth-child(12),
.result_table_user td:nth-child(14) {
  min-width: 6em;
}

.mng-student-list .bg-th {
  background: #3F85A6;
}
.mng-student-list th:nth-child(1),
.mng-student-list th:nth-child(2),
.mng-student-list td:nth-child(1),
.mng-student-list td:nth-child(2) {
  text-align: center;
  width: 4em;
}

/*table-reserved*/
.table-reserved th {
  text-align: center;
}
.table-reserved td:nth-child(1) {
  text-align: right;
}
.table-reserved td:nth-child(5) span {
  display: block;
}
.table-reserved th:nth-last-child(1),
.table-reserved th:nth-last-child(2),
.table-reserved td:nth-last-child(1),
.table-reserved td:nth-last-child(2) {
  width: 4em;
  text-align: center;
}

/*tab menu*/
.tab_menu {
  display: flex;
}
.tab_menu .tab {
  position: relative;
  top: 5px;
  z-index: 98;
  min-width: 10em;
  text-align: center;
  border: 1px solid #e3e3e3;
  border-bottom: none;
  background: #e3e3e3;
  margin-right: 5px;
  border-radius: 8px 8px 0 0;
  padding: 10px;
}
.tab_menu .tab:hover {
  cursor: pointer;
}
.tab_menu .tab span {
  display: inline-block;
}
.tab_menu .current {
  position: relative;
  top: 0px;
  z-index: 100;
  background: #fff;
  border: 1px solid #ccc;
  border-bottom: 2px solid #fff;
  font-weight: bold;
  color: #00a3cc;
}

.tab_contents {
  z-index: 99;
  padding: 10px;
  border-top: 1px solid #ccc;
  position: relative;
  top: -1px;
  background: #fff;
}

.pad {
  padding: 30px;
}

body.login {
  background: #22759C;
  display: flex;
  justify-content: center;
  align-items: center;
}
body.login h1 {
  font-weight: normal;
  font-size: 1.8rem;
  margin-bottom: 40px;
}
body.login h1 img {
  display: block;
  width: 340px;
  height: auto;
  margin: 10px auto;
}

.login_area h1 {
  text-align: center;
  color: #fff;
  font-size: 2.4rem;
}
.login_area label {
  width: 60px;
}
.login_area button {
  font-size: 1.6rem;
}
.login_area input[type=text],
.login_area input[type=password] {
  height: 2em;
}

.login_area .forget {
  display: block;
  margin-top: 20px;
  color: #fff;
  font-size: 1.6rem;
  font-weight: normal;
  text-align: left;
}
.login_area .about_area {
  margin: 0 auto;
  text-align: right;
}
.login_area button.btn-login {
  background: #ffac1c;
  font-size: 1.4rem;
  min-width: 12em;
}
.login_area button.ico-help {
  padding: 0;
  background: none;
  border: none;
  font-size: 1.6rem;
}
.login_area button.ico-help::before {
  font-family: "icomoon" !important;
  content: "\e908";
  font-size: 1.6rem;
  color: #fff;
}

.loginmsg {
  color: #fff;
}

.login_form {
  border: 1px solid #2785b1;
  padding: 10px 20px;
  margin: 20px auto 20px auto;
  background: #2785b1;
  text-align: center;
  box-shadow: 0px 0px 15px -5px rgba(0, 0, 0, 0.2);
  width: 500px;
}

.login_layout {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.login_layout > div {
  width: 50%;
  text-align: center;
}

.login_layout2 > div {
  width: 80%;
  text-align: center;
  margin: 0 auto;
}

.login_layout2 button.btn-login {
  background: #ffac1c;
  font-size: 1.8rem;
  width: 80%;
  margin-bottom: 1em;
}

.userid,
.password {
  display: block;
  background: #fff;
  border: 1px solid #00a3cc;
  display: flex;
  margin: 20px 0;
}
.userid input,
.password input {
  border: none;
}

.userid label:after {
  font-family: "icomoon" !important;
  content: "\e913";
  font-size: 2rem;
  color: #b0bec5;
}

.password label:after {
  font-family: "icomoon" !important;
  content: "\e911";
  font-size: 2rem;
  color: #b0bec5;
}

#my-signin2 > div {
  margin: 20px auto;
}

#my-signin2 span {
  font-size: 2.4rem;
}

.abcRioButtonIcon {
  padding: 14px !important;
}

.abcRioButtonIcon div {
  width: 32px !important;
  height: 32px !important;
}

.abcRioButtonIcon div svg {
  width: 32px !important;
  height: 32px !important;
}

.g_id_signin {
  margin: 30px auto;
}
.g_id_signin .nsm7Bb-HzV7m-LgbsSe {
  min-height: 50px;
}
.g_id_signin .nsm7Bb-HzV7m-LgbsSe-Bz112c {
  width: 32px !important;
  height: 32px !important;
}
.g_id_signin svg {
  width: 32px !important;
  height: 32px !important;
}
.g_id_signin span {
  font-size: 2rem !important;
}

/*remodal custom*/
/* Media queries
   ========================================================================== */
.remodal-cancel {
  font-size: 20px;
  width: 30px;
  min-width: inherit;
  height: 30px;
  padding: 0;
  margin-left: auto;
  margin-right: -10px;
  display: block;
  background: #063F6A;
  line-height: 1;
}

.remodal-cancel:hover {
  background: #063F6A;
  opacity: 0.9;
}

.remodal {
  padding: 20px;
}

.modal_msg {
  font-size: 2rem;
  padding: 1em;
}

@media only screen and (min-width: 641px) {
  .remodal {
    max-width: 700px;
  }
  .remodal.widepopup {
    min-width: 1000px;
  }
}
/*単元別テスト新規登録*/
.test-title-area {
  border: 1px solid #ccc;
  padding: 20px;
}
.test-title-area dl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 2em;
}
.test-title-area dl dt {
  margin-right: 1em;
  margin-left: 2em;
  font-weight: bold;
}
.test-title-area dl dt:first-child {
  margin-left: 0;
}
.test-title-area dl dd:first-of-type {
  flex: 1;
}
.test-title-area dl:last-child {
  margin-bottom: 0;
}
.test-title-area textarea {
  width: 100%;
}
.test-title-area .time-limit {
  white-space: nowrap;
}
.test-title-area .time-limit input {
  width: 4em !important;
  margin-right: 0.52em;
}
.test-title-area textarea {
  min-height: 5em;
}

/*question_form*/
/**/
.soundfile label {
  display: block;
  position: relative;
  color: #fff;
  white-space: nowrap;
  border: 1px solid #ccc;
  width: 100%;
  height: 3em;
  background: #fff;
  background: url(/img/sounds.svg) center center no-repeat;
}

.soundfile label:hover {
  opacity: 0.6;
  cursor: pointer;
}

.soundfile label input {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
}

.soundfile label input:hover {
  cursor: pointer;
}

.soundfile .filename {
  font-size: 1rem;
  margin: 0 0 0 10px;
}

.soundfile label.soundon {
  border: 1px solid #3F85A6;
  background: url(/img/sounds_on.svg) center center no-repeat;
}

.question_form {
  margin-bottom: 1em;
  display: flex;
  justify-content: space-between;
}
.question_form dt {
  width: 2em;
}
.question_form dd:first-of-type {
  flex: 1;
  margin-right: 2em;
}
.question_form dd:nth-of-type(2) {
  width: 20em;
}
.question_form dd:nth-of-type(3) {
  margin-left: 2em;
  width: 8em;
}

.question_form.wid2 dd:nth-of-type(2) {
  width: 30em;
}

.question_form_label {
  margin-bottom: 0.5em;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.question_form_label div {
  border-bottom: 2px solid #00a3cc;
  color: #00a3cc;
}
.question_form_label div:first-of-type {
  flex: 1;
  margin-left: 2em;
  margin-right: 2em;
}
.question_form_label div:nth-of-type(2) {
  width: 20em;
  border-bottom: 2px solid #53AB00;
  color: #53AB00;
}
.question_form_label div:nth-of-type(3) {
  margin-left: 2em;
  width: 8em;
}
.question_form_label .note {
  font-size: 1.2rem;
  display: block;
  line-height: 1.2;
}

.question_form_label.wid2 div:nth-of-type(2) {
  width: 30em;
  border-bottom: 2px solid #53AB00;
  color: #53AB00;
}

.correct-answer {
  width: 20em !important;
}

.choices input {
  margin-bottom: 0.5em;
}
.choices input:first-of-type {
  background: #E9FADA;
}
.choices input:last-of-type {
  margin-bottom: 0;
}

.test_question_area {
  margin-top: 2em;
}

.problem_txt {
  margin: 2em 0 1em 0;
  font-weight: bold;
  padding: 5px;
  background: #DFE4E8;
}

/*teacherlist*/
ul.teacherlist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}
ul.teacherlist li {
  margin: 0.5em 1em 0.5em 0;
  min-width: 12em;
}

section {
  margin-bottom: 4em;
}
section h2 {
  display: flex;
  align-items: center;
  border-left: 5px solid #3F85A6;
  padding: 0 0.5em;
  margin-bottom: 2em;
}
section h2:after {
  content: "";
  display: block;
  height: 1px;
  background: #3F85A6;
  flex: 1;
  margin-left: 0.5em;
}
section h3 {
  display: flex;
  align-items: center;
  border-left: 5px solid #3F85A6;
  padding: 0.1em 0.5em;
  margin-bottom: 1em;
}
section h3:after {
  content: "";
  display: block;
  height: 1px;
  background: #3F85A6;
  flex: 1;
  margin-left: 0.5em;
}

.spline {
  border-top: 1px solid #ccc;
  padding: 1em 0;
}
.spline dt {
  min-width: 4em;
}
.spline .btn_area {
  margin-top: 2em;
}

/*file_download_area*/
.file_download_area {
  padding: 1em;
  background: #E6EEF5;
  margin-top: 4em;
  border-radius: 10px;
  align-items: center;
  display: flex;
}
.file_download_area dt {
  text-align: left;
  margin-right: 4em;
  font-weight: bold;
}

a.btn-download {
  text-decoration: none;
  border: 2px solid #3F85A6;
  padding: 0.5em 1em;
  border-radius: 4px;
  color: #3F85A6;
  display: inline-block;
  margin: 0 1em;
  background: #fff;
  min-width: 12em;
  text-align: center;
  font-size: 1.6rem;
}

/*search_class*/
.search_class {
  display: flex;
  align-items: flex-end;
  margin-bottom: 2em;
}
.search_class div:nth-child(1) {
  margin-right: 6em;
}

.search_class dl {
  display: flex;
  margin-bottom: 1em;
}
.search_class dl dt {
  font-weight: bold;
  text-align: right;
  width: 6em;
  margin-right: 1em;
}

.search_class dl:last-child {
  margin-bottom: 0;
}

.search_result {
  text-align: center;
  margin-bottom: 2em;
  font-size: 1.6rem;
  background: #fff;
  padding: 0.5em;
}

/*tab-graph*/
.tab_head {
  text-align: right;
}

.tab_head_btn {
  display: flex;
  justify-content: end;
}
.tab_head_btn button {
  margin-left: 1em;
}

.agn {
  display: inline-block;
  display: flex;
  justify-content: end;
  margin-bottom: 0.5em;
}
.agn dt {
  font-weight: bold;
  margin-right: 1em;
}

.table_graph_head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  line-height: 1;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}
.table_graph_head .usage1 {
  display: inline-block;
  padding: 0.25em 1em;
  background: #79b336;
  margin-left: 2em;
}
.table_graph_head .usage2 {
  display: inline-block;
  padding: 0.25em 1em;
  background: #00c1e3;
}
.table_graph_head dl {
  display: flex;
  align-items: center;
}
.table_graph_head dl dt {
  font-weight: bold;
  margin-right: 0.5em;
}
.table_graph_head dl .base-time {
  border-color: red;
  color: red;
}
.table_graph_head dl .base-time::-moz-placeholder {
  color: red;
}
.table_graph_head dl .base-time::placeholder {
  color: red;
}
.table_graph_head dl dt:nth-of-type(2) {
  margin-left: 2em;
}
.table_graph_head dl input {
  width: 3em;
  margin-right: 0.5em;
  padding: 0.25em;
}

.table_graph_foot {
  margin: 0.5em 0;
  display: flex;
}
.table_graph_foot .usage3 {
  display: inline-block;
  padding: 0.25em 1em;
  width: 2em;
  height: 1.5em;
  background: #ffe0e3;
}

.detail_data_head span {
  margin-right: 1em;
}
.detail_data_head span:nth-of-type(3):before {
  content: "「";
  display: inline-block;
}
.detail_data_head span:nth-of-type(3):after {
  content: "」";
  display: inline-block;
}

/*history_view_area*/
.history_view {
  display: flex;
  justify-content: space-around;
  margin-top: 2em;
}
.history_view div {
  border: 1px solid #8092a4;
  background: #fff;
  padding: 1em;
  position: relative;
}
.history_view div.mark-lisn:after {
  content: "";
  display: block;
  position: absolute;
  top: -1px;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20px 20px 0 0;
  border-color: #79b336 transparent transparent transparent;
}
.history_view div.mark-lisn:before {
  content: "";
  display: block;
  position: absolute;
  bottom: -1px;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 20px 20px;
  border-color: transparent transparent #79b336 transparent;
}
.history_view div.mark-vocb:after {
  content: "";
  display: block;
  position: absolute;
  top: -1px;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20px 20px 0 0;
  border-color: #00c1e3 transparent transparent transparent;
}
.history_view div.mark-vocb:before {
  content: "";
  display: block;
  position: absolute;
  bottom: -1px;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 20px 20px;
  border-color: transparent transparent #00c1e3 transparent;
}
.history_view .mark-none {
  display: flex;
  align-items: center;
  align-content: center;
}
.history_view .mark-none p {
  width: 240px;
  text-align: center;
  align-self: center;
}

.his_title {
  margin: 0.5em;
}

.modal-user {
  text-align: left;
  margin-bottom: 1em;
  list-style: none;
  line-height: 1.5;
  padding: 5px;
  margin: 0 0 1em 0;
  border-collapse: collapse;
}
.modal-user th {
  background: #C9DBE3;
  color: #22759C;
  border-color: #8092a4;
}
.modal-user td {
  background: #fff !important;
  border-color: #8092a4;
}

.exam_retry {
  font-size: 1.6rem;
  text-align: left;
  margin-bottom: 1em;
}
.exam_retry button {
  margin-top: 2em;
}

.retry-schedule {
  font-size: 1.6rem;
  display: none;
  margin-bottom: 2em;
}
.retry-schedule dl {
  text-align: left;
}
.retry-schedule dl dd {
  padding-left: 2em;
}

/*materials_view_area*/
.materials_view_area {
  display: flex;
  justify-content: space-between;
}
.materials_view_area table {
  width: calc(50% - 10px);
  height: -moz-fit-content;
  height: fit-content;
}
.materials_view_area .listning_list tr th {
  background: #79b336;
}
.materials_view_area .vocabulary_list tr th {
  background: #00c1e3;
}

/*test-name*/
.test-name {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  padding: 0.5em;
}
.test-name dt {
  width: 8em;
  font-weight: bold;
  text-align: right;
}
.test-name dt:after {
  content: "：";
}
.test-name dd {
  width: calc(100% - 8em);
}

/*test-reserved*/
.table_header {
  display: flex;
  align-items: flex-end;
}

/*test-schedule*/
.test-select {
  display: flex;
  margin-bottom: 1em;
  align-items: center;
}
.test-select dt {
  font-weight: bold;
  margin-right: 1em;
}

.cols2Layout,
.test-schedule {
  border: 1px solid #465463;
  padding: 20px;
}

.cols2Layout {
  display: flex;
  width: 100%;
}
.cols2Layout dl {
  display: flex;
  width: 50%;
}
.cols2Layout dl dt {
  margin-right: 1em;
}
.cols2Layout dt {
  font-weight: bold;
}
.cols2Layout .material_list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cols2Layout .material_list li {
  margin-bottom: 1em;
}
.cols2Layout .material_list li:last-child {
  margin-bottom: 0;
}
.cols2Layout .sublist li {
  margin-bottom: 2em;
}
.cols2Layout .sublist li:last-child {
  margin-bottom: 0;
}
.cols2Layout .unit_list {
  list-style: none;
  padding: 0;
  margin: 1em auto 1em 2em;
}
.cols2Layout .unit_list li {
  margin-bottom: 1em;
}

.test-schedule dl {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
}
.test-schedule dl:first-child {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  border-bottom: 1px dotted #465463;
}
.test-schedule button {
  min-width: 12em;
}
.test-schedule dd input {
  margin: 0 5px 0 5px;
}
.test-schedule .fx1 {
  flex: 1;
}
.test-schedule .btn-start {
  margin-top: 0;
}

/*pagenation*/
.pagenation {
  list-style: none;
  display: flex;
  justify-content: center;
  margin: 2em auto;
}
.pagenation li a {
  width: 2em;
  height: 2em;
  background: #3F85A6;
  margin: 0.25em;
  padding: 0.25em;
  text-align: center;
  color: #fff;
  display: block;
  text-decoration: none;
  border-radius: 4px;
}
.pagenation li a:hover {
  opacity: 0.6;
}
.pagenation .current {
  background: #fff;
  border: 1px solid #3F85A6;
  color: #3F85A6;
}

.btn-area {
  margin-top: 4em;
  border-top: 1px solid #ccc;
  padding: 1em;
}

/*detail_title*/
.detail_head > div {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.detail_title {
  background: #C9DBE3;
  padding: 0.25em 1em;
  display: inline-block;
}

/*search_test*/
.search_test {
  margin-bottom: 2em;
}
.search_test select {
  margin-right: 2em;
}

/*test_select"*/
.test_select {
  display: flex;
  margin-bottom: 2em;
}
.test_select dl {
  display: flex;
  margin-bottom: 1em;
}
.test_select dl dt {
  font-weight: bold;
  margin-right: 1em;
  min-width: 4em;
}
.test_select .test_info {
  background: rgba(201, 219, 227, 0.5);
  padding: 1em;
  border-radius: 8px;
  width: 50%;
  margin-right: 4em;
}
.test_select select {
  min-width: 10em;
  display: block;
  margin-bottom: 2em;
}

.check_area {
  border: 1px solid #C9DBE3;
  background: #fff;
  padding: 0px 20px 20px 20px;
  margin-bottom: 2em;
}
.check_area .question_form div:nth-of-type(2) {
  color: red;
}
.check_area select:disabled {
  background-color: #ccc;
  border: 1px solid #ccc;
  opacity: 0.6;
}

.paper_head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}

.student_name {
  display: flex;
  font-size: 1.6rem;
  line-height: 1;
}
.student_name span {
  margin-right: 2em;
}
.student_name span:nth-of-type(3) {
  font-weight: bold;
}

.student_result {
  display: flex;
  align-items: center;
  justify-content: end;
}
.student_result .vis_score {
  border: 1px solid #ccc;
  background: #fff;
  text-align: center;
  padding: 0.5em;
  font-size: 1.8rem;
  font-weight: bold;
  margin-left: 2em;
}
.student_result .get_score {
  color: red;
}

.btn_LR {
  display: flex;
  justify-content: space-between;
}

/*input_code*/
.input_code_area {
  margin-bottom: 2em;
}

.input_code {
  background: rgba(201, 219, 227, 0.5);
  padding: 1em;
  display: flex;
  width: 100%;
}
.input_code dt {
  white-space: nowrap;
  margin-right: 1em;
  font-weight: bold;
}
.input_code dd input[type=text] {
  display: block;
  margin-bottom: 1em;
  width: 30em;
}

.input_code2 {
  background: rgba(201, 219, 227, 0.5);
  padding: 1em;
}
.input_code2 .label_codo_input {
  display: flex;
  margin: 0 0 0.5em 0;
}
.input_code2 .label_codo_input dt {
  width: 2em;
}
.input_code2 .label_codo_input span {
  width: 300px;
  display: inline-block;
  margin-left: 0.5em;
  border-bottom: 2px solid #4f5f6f;
  color: #4f5f6f;
  padding-bottom: 0.25em;
}
.input_code2 .label_codo_input span:nth-child(2) {
  margin-left: 10px;
}
.input_code2 dl {
  display: flex;
  margin-bottom: 1em;
  align-items: center;
}
.input_code2 dl dt {
  width: 2em;
  text-align: center;
}
.input_code2 dl input[type=text] {
  width: 300px;
  margin: 0 0.5em;
  display: inline-block;
}
.input_code2 button {
  margin-left: calc(2em + 3px);
}

.test_view {
  display: flex;
}
.test_view select {
  margin: 0 0.5em;
}

/*学習者の管理フォームレイアウト*/
.mng_stu_search {
  margin-top: 1em;
}
.mng_stu_search dt {
  min-width: initial !important;
}
.mng_stu_search dd {
  display: flex;
}
.mng_stu_search dd select {
  min-width: 16em;
  margin-right: 1em;
}
.mng_stu_search dd select option[value=""] {
  font-weight: bold;
}
.mng_stu_search dd input[type=text] {
  width: 16em !important;
  margin-right: 1em;
}

.bulk-operation {
  border: 1px solid #ccc;
  margin: 3em auto;
  display: flex;
  align-items: center;
  padding: 1em;
}
.bulk-operation dl {
  margin-right: 8em;
}
.bulk-operation dl dt {
  min-width: 8em;
}
.bulk-operation dl:last-child {
  margin-bottom: 0;
}

/*学習者を一括登録する*/
.add_regist {
  margin-top: 4em;
}
.add_regist dl dd {
  display: flex;
  align-items: center;
}
.add_regist dl dd button {
  margin-left: 4em;
}

/*pw-chanege*/
.pw-chanege {
  margin: 2em auto;
}
.pw-chanege input[type=text] {
  width: 16em;
}
.pw-chanege input[type=password] {
  width: 16em;
}

/**/
.ms-drop label {
  margin-bottom: 0.5em;
}

.ms-drop label span {
  display: flex;
  position: relative;
  align-items: center;
}

.ms-drop input[type=checkbox] {
  display: none;
}

.ms-drop input[type=checkbox] + span:before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background: #ccc;
  border-radius: 4px;
  margin-right: 5px;
}

.ms-drop input[type=checkbox]:checked + span:before {
  background: #ff8a14;
}

.ms-drop input[type=checkbox]:checked + span:after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 8px;
  border-left: 3px solid #fff;
  border-bottom: 3px solid #fff;
  transform: rotate(-45deg);
  position: absolute;
  left: 2px;
  top: 4px;
}

/*USER CONTENTS*/
/*user_status*/
.user_status {
  display: flex;
  align-items: center;
  width: 100%;
  border-bottom: 1px solid rgba(34, 117, 156, 0.2);
  padding: 2em 0;
}
.user_status dt {
  min-width: 12em;
  background: rgba(34, 117, 156, 0.6);
  color: #fff;
  padding: 0.5em 0.5em;
  margin-right: 2em;
  text-align: center;
}
.user_status dd {
  flex: 1;
}
.user_status .total_time {
  font-size: 2rem;
  font-weight: bold;
  white-space: nowrap;
}

dl.user_status:last-of-type {
  margin-bottom: 2em;
}

.user_status.align-top dt, .user_status.align-top dd {
  align-self: flex-start;
}

.user_status_search {
  display: flex;
  align-items: flex-start;
  margin-bottom: 2em;
}
.user_status_search select {
  margin: 0 1em;
}

.user_status_result {
  display: flex;
}
.user_status_result .total_time {
  margin-right: 2em;
  font-size: 2rem;
}

/*グラフサンプル用*/
.bar_graph_area img {
  max-width: 300px;
  height: auto;
}

.sub_header {
  background: #ffd373;
  padding: 10px;
  text-align: center;
  margin-top: 10px;
  font-size: 2rem;
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: center;
}
.sub_header div {
  font-size: 1.6rem;
  background: #fff;
  padding: 0.25em 0.5em;
  margin-left: 2em;
}

.sub_header.arc-type {
  background: #FFBD94;
}

.steps {
  display: flex;
  background: #e1e7e8;
  list-style: none;
  align-content: center;
  align-items: center;
  justify-content: center;
  margin: 0;
}
.steps li {
  padding: 0.5em;
  min-width: 4em;
  border: 1px solid #fff;
  text-align: center;
}
.steps li.current {
  color: #fff;
  background: #ffac1c;
}

.steps.arc-type li.current {
  color: #fff;
  background: #FF7E1C;
}

/*TEST*/
.exam-area {
  max-width: 1000px;
  margin: 0 auto;
  font-size: 1.6rem;
}
.exam-area dl {
  display: flex;
  align-content: center;
  align-items: center;
}
.exam-area dl dt {
  font-weight: bold;
  margin-right: 1em;
  align-self: flex-start;
}
.exam-area dl input {
  width: 30em;
}
.exam-area dl textarea {
  min-height: 10em;
}
.exam-area p.msg {
  text-align: center;
  margin-bottom: 2em;
}
.exam-area .mgntop {
  margin-top: 2em;
}
.exam-area .question_txt {
  padding-left: 1em;
}
.exam-area form {
  padding-left: 2em;
}

ul.intro li {
  margin-top: 1.25em;
}
ul.intro li span {
  color: red;
}

.exam-menu .exam-list {
  width: 50%;
  list-style: none;
  margin: 0 auto;
  padding: 0;
  /*
  input[type="radio"]:checked + label:after{
  	font-family: 'icomoon' !important;
  	content: "\e926";
  	position: absolute;
  	right:-1.5em;
  	width:1em;
  	font-size: 2rem;
  }*/
}
.exam-menu .exam-list label {
  font-size: 1.8rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5em 1em 0.5em 0.5em;
  border-radius: 6px;
  border: 3px solid #3F85A6;
}
.exam-menu .exam-list label span:nth-child(2) {
  flex: 1;
  margin-left: 1em;
}
.exam-menu .exam-list label img {
  border-radius: 5px;
}
.exam-menu .exam-list label:hover {
  cursor: pointer;
  opacity: 0.8;
}
.exam-menu .exam-list input[type=radio] {
  display: none;
}
.exam-menu .exam-list input[type=radio] + div {
  padding: 5px;
  border: 3px solid rgba(255, 255, 255, 0);
  border-radius: 10px;
  margin-bottom: 1em;
}
.exam-menu .exam-list input[type=radio] + div:nth-of-type(1) > label {
  background: #fff;
}
.exam-menu .exam-list input[type=radio] + div:nth-of-type(2) > label {
  background: #fff;
}
.exam-menu .exam-list input[type=radio] + div:nth-of-type(3) > label {
  background: #fff;
}
.exam-menu .exam-list input[type=radio]:checked + div:nth-of-type(1) {
  background: rgba(63, 133, 166, 0.3);
}
.exam-menu .exam-list input[type=radio]:checked + div:nth-of-type(2) {
  background: rgba(63, 133, 166, 0.3);
}
.exam-menu .exam-list input[type=radio]:checked + div:nth-of-type(3) {
  background: rgba(63, 133, 166, 0.3);
}
.exam-menu .exam-list.achv label {
  background: #ff7e1c;
  border: 3px solid #ff7e1c;
  color: #fff;
}
.exam-menu .exam-list.achv input[type=radio]:checked + label {
  background: #ffbd8a;
  border: 3px solid #f55e00;
  color: #f55e00;
}

/*audio_test*/
.audio_test {
  text-align: center;
}

.question_msg {
  margin: 0 auto 2em;
  padding: 0.25em 0.5em;
  background: #DFE4E8;
  display: flex;
}
.question_msg span {
  display: block;
}

.question_txt {
  margin: 0 auto 2em;
  display: inline-block;
}

#alert_msg {
  padding: 0.5em 1em;
  margin: 2em auto;
  width: 90%;
  text-align: center;
}

.alertcolor {
  background: #ffe0e3;
  color: #ff1f35;
}

.sub-dialog {
  padding: 1em;
  border: 1px solid #3F85A6;
  background: #fff;
  width: 20em;
  text-align: center;
  width: 400px;
}
.sub-dialog p {
  margin-bottom: 1em;
}
.sub-dialog button {
  margin: 0.5em;
}
.sub-dialog .btn-cancel {
  background: #eee;
}

/**/
.lisning-area {
  display: flex;
  align-items: flex-start;
  align-content: center;
}
.lisning-area div:first-child {
  margin-right: 2em;
}
.lisning-area div:last-child {
  flex: 1;
  margin: 0;
}
.lisning-area div:last-child p.question_txt {
  margin-bottom: 2em;
}
.lisning-area .btn-play {
  background-color: #ffac1c;
  border: none;
  background-repeat: no-repeat;
  background-position: center center;
  border-radius: 50%;
  min-width: initial;
  width: 50px !important;
  height: 50px !important;
  background-image: url(../img/horn.svg);
  background-size: 70%;
}
.lisning-area .btn-play.arc-type {
  background-color: #ff7e1c;
}
.lisning-area .nowplaying {
  background-color: #ff8a14 !important;
  background-image: url(../img/horn_on.svg);
  opacity: 1;
}
.lisning-area .playend {
  background-color: #ff8a14;
  background-image: url(../img/horn.svg);
  opacity: 1;
}
.lisning-area button#btn-limitedplay:disabled {
  background-color: #aaa;
}

.exam-area textarea {
  width: 40em;
  height: 5em;
}

.last_msg {
  text-align: center;
}
.last_msg button {
  margin-top: 4em;
}

.select_answer input[type=radio] {
  display: none;
}
.select_answer label:hover {
  cursor: pointer;
  opacity: 0.8;
}
.select_answer input[type=radio]:checked + label {
  background: #27A0E6;
  color: #fff;
}
.select_answer label {
  cursor: pointer;
  background: rgba(39, 160, 230, 0.2);
  padding: 0.5em 1em;
  min-width: 20em;
  display: block;
  border-radius: 6px;
  margin-bottom: 1em;
}
@charset "UTF-8";
/*CALL*/ /* A Modern CSS Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

ul[role=list],
ol[role=list] {
  list-style: none;
}

html:focus-within {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

a:not([class]) {
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
}

img,
picture {
  max-width: 100%;
  display: block;
}

input,
button,
textarea,
select {
  font: inherit;
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/*デフォルトで、一部のブラウザは親から font-family や font-size を継承しないため*/
button, input, select, textarea {
  font-family: inherit;
  font-size: 100%;
}

/**/
@font-face {
  font-family: "icomoon";
  src: url("../fonts/icomoon.eot");
  src: url("../fonts/icomoon.eot") format("embedded-opentype"), url("../fonts/icomoon.ttf") format("truetype"), url("../fonts/icomoon.woff") format("woff"), url("../fonts/icomoon.svg") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
[class^=icon-], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "icomoon" !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-info:before {
  content: "\e930";
}

.icon-key:before {
  content: "\e92f";
}

.icon-horn_on:before {
  content: "\e92e";
}

.icon-horn:before {
  content: "\e900";
}

.icon-pause:before {
  content: "\e929";
}

.icon-pause-circle:before {
  content: "\e92a";
}

.icon-play:before {
  content: "\e92b";
}

.icon-play_circle:before {
  content: "\e92c";
}

.icon-repeat:before {
  content: "\e92d";
}

.icon-preview:before {
  content: "\e927";
}

.icon-chevron-left:before {
  content: "\e925";
}

.icon-chevron-right:before {
  content: "\e926";
}

.icon-test_check:before {
  content: "\e924";
}

.icon-test_add:before {
  content: "\e91c";
}

.icon-test_folder:before {
  content: "\e91d";
}

.icon-book:before {
  content: "\e91e";
}

.icon-book_open:before {
  content: "\e91f";
}

.icon-class:before {
  content: "\e920";
}

.icon-database:before {
  content: "\e921";
}

.icon-graph:before {
  content: "\e922";
}

.icon-refresh:before {
  content: "\e923";
}

.icon-sounds:before {
  content: "\e91b";
}

.icon-file:before {
  content: "\e91a";
}

.icon-radio_off:before {
  content: "\e918";
}

.icon-radio_on:before {
  content: "\e919";
}

.icon-tri_down:before {
  content: "\e916";
}

.icon-tri_up:before {
  content: "\e917";
}

.icon-calender:before {
  content: "\e90a";
}

.icon-detail:before {
  content: "\e901";
}

.icon-download:before {
  content: "\e902";
}

.icon-edit:before {
  content: "\e903";
}

.icon-exit:before {
  content: "\e904";
}

.icon-eye:before {
  content: "\e905";
}

.icon-eye_closed:before {
  content: "\e906";
}

.icon-gear:before {
  content: "\e907";
}

.icon-help:before {
  content: "\e908";
}

.icon-notavailable:before {
  content: "\e909";
}

.icon-plus:before {
  content: "\e915";
}

.icon-print:before {
  content: "\e90b";
}

.icon-serach:before {
  content: "\e90c";
}

.icon-sort_down:before {
  content: "\e90d";
}

.icon-sort_up:before {
  content: "\e90e";
}

.icon-time:before {
  content: "\e90f";
}

.icon-trash:before {
  content: "\e910";
}

.icon-unlock:before {
  content: "\e911";
}

.icon-upload:before {
  content: "\e912";
}

.icon-user:before {
  content: "\e913";
}

.icon-user_add:before {
  content: "\e914";
}

.icon-user_profile:before {
  content: "\e928";
}

.font-red {
  color: red;
}

/* COMMON -----------------------------------*/
html {
  font-size: 62.5%;
  font-family: -apple-system, BlinkMacSystemFont, YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
  color: #22759C;
  overflow-x: hidden;
  margin: 0px;
}

body {
  background: #f0f3f6;
  height: 100vh;
  font-size: 1.4rem;
  margin: 0px;
}

#app {
  background: #f0f3f6;
  height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
  font-size: 1.4rem;
  margin: 0px;
}

header,
footer {
  width: 100%;
  margin: 0 auto;
}

#wrapper,
#footermenu {
  width: 100%;
  margin: 0 auto;
}

header {
  background: #C9DBE3;
  color: #3F85A6;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
header h1 {
  width: 260px;
  font-size: 1.8rem;
  padding: 20px 0;
  text-align: center;
  background: #3F85A6;
  color: #b8d2e0;
  text-align: center;
}
header h1 img {
  display: block;
  width: 80%;
  height: auto;
  margin: 0 auto;
}
header h2 {
  text-align: left;
  margin-right: auto;
  margin-left: 40px;
  opacity: 0.5;
}
header .header_menu {
  display: flex;
  align-items: center;
  margin-right: 20px;
}
header .header_menu .username {
  margin-right: 1em;
  margin-left: 2em;
}
header .header_menu button.ico-help {
  margin-right: 20px;
  min-width: initial;
  width: 30px !important;
  height: 30px !important;
  padding: 0;
  background: none;
  border: none;
}
header .header_menu button.ico-help::before {
  font-family: "icomoon" !important;
  content: "\e908";
  font-size: 30px;
  color: #3F85A6;
}
header .header_menu form.form-exit {
  margin-right: 20px;
  min-width: initial;
  width: 30px !important;
  height: 30px !important;
  padding: 0;
}
header .header_menu button.ico-exit {
  margin-right: 20px;
  min-width: initial;
  width: 30px !important;
  height: 30px !important;
  padding: 0;
  background: none;
  border: none;
}
header .header_menu button.ico-exit::before {
  font-family: "icomoon" !important;
  content: "\e904";
  font-size: 30px;
  color: #3F85A6;
}
header .header_menu button.ico-info {
  margin-right: 20px;
  min-width: initial;
  width: 30px !important;
  height: 30px !important;
  padding: 0;
  background: none;
  border: none;
}
header .header_menu button.ico-info::before {
  font-family: "icomoon" !important;
  content: "\e930";
  font-size: 30px;
  color: #3F85A6;
}

#wrapper {
  flex: 1;
  display: flex;
}
#wrapper #contents {
  flex: 1;
  padding: 40px;
}
#wrapper #contents h1 {
  font-size: 2.4rem;
  margin-bottom: 2rem;
  border-bottom: 2px solid #3F85A6;
}
#wrapper #contents h1:before {
  content: "";
}

footer {
  display: none;
  margin-top: auto;
  background: gray;
}

/*footermenu*/
#footermenu {
  display: flex;
  list-style: none;
}

h1 {
  font-size: 2rem;
}

h2 {
  font-size: 1.8rem;
}

h3 {
  font-size: 1.6rem;
}

h4 {
  font-size: 1.6rem;
}

.pos-r {
  display: block;
  margin-left: auto;
  margin-right: 0;
}

.pos-c {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

button {
  color: #fff;
  background: #3F85A6;
  border: 1px solid #3F85A6;
  border-radius: 4px;
  padding: 0.5em 1em;
  line-height: 1;
  min-width: 6em;
  font-size: 1.6rem;
  cursor: pointer;
}
button:hover {
  opacity: 0.6;
}

button:disabled {
  background-color: #ccc;
  border: 1px solid #ccc;
  color: #666;
  opacity: 0.6;
}

[class^=btn-] {
  font-family: "icomoon" !important;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
}
[class^=btn-]::before {
  font-size: 2rem;
}

[class^=btn-]:hover:not[class=btn-area] {
  opacity: 0.6;
}

.btn-help::before {
  content: "\e908";
}

.btn-print::before {
  content: "\e90b";
}

.btn-upload::before {
  content: "\e912";
}

table [class^=btn-] {
  width: 2em;
  height: 2em;
  padding: 0;
  display: inline;
  min-width: initial;
}
table [class^=btn-]:before {
  margin: 0;
}

.btn-download::before {
  content: "\e902";
}

.btn-edit:before {
  content: "\e903";
}

.btn-trash:before {
  content: "\e910";
}

.btn-refresh:before {
  content: "\e923";
}

.btn-preview:before {
  content: "\e927";
}

.btn-tri_down,
.btn-tri_up {
  width: 1.5em !important;
  height: 1.5em !important;
  background: none;
  color: #3F85A6;
  border: none;
  display: block;
  font-size: 2rem;
}

.btn-tri_down:before {
  content: "\e916";
}

.btn-tri_up:before {
  content: "\e917";
}

.btn-cancel {
  border: 1px solid #ccc !important;
  color: #22759C;
  background: #ccc;
}

.btns_layoutC {
  text-align: center;
}
.btns_layoutC button {
  min-width: 8em;
  margin: 0 0.5em;
}

.btn_area {
  text-align: center;
}
.btn_area button {
  min-width: 8em;
  margin: 0 0.5em;
}

.btn-print {
  display: flex;
  align-items: center;
}
.btn-print::before {
  content: "\e90b";
  display: inline-block;
  margin-right: 0.25em;
}

.btn-download {
  display: flex;
  align-items: center;
}
.btn-download::before {
  content: "\e902";
  display: inline-block;
  margin-right: 0.25em;
}

.btn-plus {
  display: flex;
  align-items: center;
}
.btn-plus::before {
  font-family: "icomoon" !important;
  content: "\e915";
  display: inline-block;
  margin-right: 0.25em;
}

.btn-search {
  display: flex;
  align-items: center;
}
.btn-search::before {
  font-family: "icomoon" !important;
  content: "\e90c";
  display: inline-block;
  margin-right: 0.25em;
}

.btn-return {
  display: flex;
  align-items: center;
}
.btn-return:before {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
  transform: rotate(-45deg);
  margin-right: 0.25em;
}

.btn-refresh {
  display: flex;
  align-items: center;
}
.btn-refresh::before {
  font-family: "icomoon" !important;
  content: "\e923";
  display: inline-block;
  margin-right: 0.25em;
}

.btn-delete {
  display: flex;
  align-items: center;
}
.btn-delete::before {
  font-family: "icomoon" !important;
  content: "\e910";
  display: inline-block;
  margin-right: 0.25em;
}

/**/
.btn-detail {
  width: 3em !important;
  font-size: 1.4rem;
}

.btn-next_student {
  display: flex;
  align-items: center;
}
.btn-next_student:after {
  font-family: "icomoon";
  content: "\e926";
  display: inline-block;
  font-size: 2rem;
  line-height: 1;
  margin-left: 0.25em;
}

.btn-prev_student {
  display: flex;
  line-height: 1;
}
.btn-prev_student:before {
  font-family: "icomoon";
  content: "\e925";
  display: inline-block;
  font-size: 2rem;
  line-height: 1;
  margin-right: 0.25em;
}

.tab-box button {
  font-size: 1.4rem;
}

/*USER*/
.btn-exam {
  display: flex;
  align-items: center;
  background: #ff8a14;
  border: none;
  margin-right: 1em;
}
.btn-exam::before {
  content: "\e91c";
  display: inline-block;
  margin-right: 0.25em;
}

.btn-status {
  display: flex;
  align-items: center;
  border: none;
}
.btn-status::before {
  content: "\e922";
  display: inline-block;
  margin-right: 0.25em;
}

.btn-pw {
  display: flex;
  align-items: center;
  margin-left: 20px;
  border: none;
}
.btn-pw::before {
  content: "\e92f";
  display: inline-block;
  margin-right: 0.25em;
}

#testplay {
  display: block;
  width: 100px !important;
  height: 100px !important;
  padding: 20px;
  border-radius: 100%;
  margin: 0 auto;
  line-height: 1;
  min-width: auto;
  border: none;
  background-repeat: no-repeat;
  background-position: center center;
  background-color: #ffac1c;
  background-size: 60%;
}

#testplay.arc-type {
  background-color: #ff7e1c;
}

.btn-horn {
  background: url("../img/horn.svg");
}

.btn-horn_on {
  background: url("../img/horn_on.svg");
}

.btn-start {
  margin-top: 2em;
}

/*form items*/
.required {
  color: #f2230c;
  line-height: 1;
}

.required-msg {
  color: #f2230c;
  margin-bottom: 1em;
  font-size: 1.6rem;
}

.required-msg.allreq {
  text-align: left;
}

input[type=text],
input[type=password] {
  padding: 0.5em 0.5em;
  outline: none;
  width: 100%;
  border: 1px solid #ccc;
}

input:focus,
textarea:focus {
  border: 1px solid #00a3cc;
  outline: none;
}

textarea {
  width: 100%;
  height: 100%;
  border: 1px solid #ccc;
  padding: 0.1em 0.5em;
  text-align: left;
}

select {
  border: 1px solid #ccc;
  padding: 8px;
}

label {
  position: relative;
}

label.checkbox {
  display: inline-block;
}

.checkbox input[type=checkbox] {
  display: none;
}

.checkbox input[type=checkbox] + span {
  position: relative;
  cursor: pointer;
  padding-left: 2em;
}

.checkbox input[type=checkbox] + span:before {
  content: "";
  position: absolute;
  left: 0px;
  display: inline-block;
  width: 20px;
  height: 20px;
  background: #d7dde4;
  border-radius: 4px;
  cursor: pointer;
}

.cb_pos_right.checkbox input[type=checkbox] + span {
  margin-left: 5px;
}

.cb_pos_right.checkbox input[type=checkbox] + span:before {
  content: "";
  position: absolute;
  right: 20px;
  display: inline-block;
  width: 20px;
  height: 20px;
  background: #d7dde4;
  border-radius: 4px;
  cursor: pointer;
}

table td .checkbox,
table th .checkbox {
  width: 20px;
}

.checkbox input[type=checkbox]:checked + span:before {
  background: #ff8a14;
}

.checkbox input[type=checkbox]:checked + span:after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 8px;
  border-left: 3px solid #fff;
  border-bottom: 3px solid #fff;
  transform: rotate(-45deg);
  position: absolute;
  left: 2px;
  top: 3px;
}

.checkbox input[type=checkbox]:disabled + span {
  opacity: 0.4;
  cursor: arrow;
}

.radio {
  display: inline-block;
  margin-right: 2em;
}
.radio:hover {
  cursor: pointer;
}
.radio span {
  display: flex;
  align-items: center;
}

.radio input[type=radio] {
  display: none;
}

.radio input[type=radio] + span:before {
  font-family: "icomoon" !important;
  content: "\e918";
  display: inline-block;
  color: #ccc;
  font-size: 2.4rem;
  margin-right: 5px;
}

.radio input[type=radio]:checked + span:before {
  font-family: "icomoon" !important;
  content: "\e919";
  display: inline-block;
  color: #ff8a14;
}

dl.form-item, .bulk-operation dl, dl.mng_stu_search {
  display: flex;
  width: 100%;
  align-items: center;
  margin-bottom: 1.5em;
  font-size: 1.6rem;
}
dl.form-item dt, .bulk-operation dl dt, dl.mng_stu_search dt {
  min-width: 12em;
  font-weight: bold;
  text-align: right;
  padding: 0.5em;
  margin-right: 1em;
}
dl.form-item dd, .bulk-operation dl dd, dl.mng_stu_search dd {
  flex: 1;
}

dl.form-item-def {
  display: flex;
  width: 100%;
  align-items: center;
  margin-bottom: 1.5em;
  font-size: 1.6rem;
}
dl.form-item-def dt {
  font-weight: bold;
  text-align: right;
  padding: 0.5em;
  margin-right: 1em;
  margin-left: 2em;
  min-width: 5em;
}
dl.form-item-def dd {
  flex: 1;
}

/**/
#attachment label {
  /* ボタン部分の見た目（任意） */
  display: inline-block;
  position: relative;
  background: #3F85A6;
  color: #fff;
  white-space: nowrap;
  padding: 0.25em 1em;
  border-radius: 4px;
  width: 12em;
}

#attachment label:hover {
  opacity: 0.6;
  cursor: pointer;
}

#attachment label input {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
}

#attachment .filename {
  font-weight: 16px;
  margin: 0 0 0 10px;
}

.ico-file:before {
  font-family: "icomoon" !important;
  content: "\e91a";
}

/*search_area*/
.search_area {
  display: flex;
}
.search_area .search_txt {
  width: 30em !important;
  margin-right: 10px;
}

input[type=date] {
  margin-right: 0.5em;
}

.userid-input input {
  width: 50%;
}

/*side menu*/
#side_menu {
  background: #4f5f6f;
  min-width: 260px;
  font-size: 1.6rem;
  line-height: 1;
  /**/
  /*
  .sp_admin_menu{
  	background: lightgoldenrodyellow;
  }
  .admin_menu{
  	background: palegreen;
  }
  .teacher_menu{
  	background: paleturquoise;
  }*/
  /*
  	 .teacher_menu{
  		a,div{
  			display: block;
  			padding:15px 10px 15px 15px;
  			text-decoration: none;
  			color:$sideMenuTxt;
  			border-left:6px solid #4f686f;
  			background: #4f686f;
  		}
  		a:hover,
  		div.sub_menu_head:hover,
  		.sub_menu a:hover{
  			color:$sideMenuTxt-Hover;
  			border-left:6px solid #c1e9eb;
  			background: #5e7d85;
  		}

  		.sub_menu a {
  			border-left: 6px solid #465c63;
  			background: #465c63;
  		}
  	 }*/
}
#side_menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
#side_menu li {
  border-bottom: 1px solid none;
  background: #4f5f6f;
  /*.current_menu a{
  	border-left: 6px solid #C1DDEB;
  	color: #fff;
  	background: #5e7285;
  }*/
}
#side_menu li:first-child {
  border-top: 1px solid none;
}
#side_menu li a.current_menu {
  color: #fff;
}
#side_menu li a, #side_menu li div {
  display: block;
  padding: 15px 10px 15px 15px;
  text-decoration: none;
  color: #b8d2e0;
  border-left: 6px solid #4f5f6f;
}
#side_menu li a:hover {
  color: #fff;
  border-left: 6px solid #C1DDEB;
  background: #5e7285;
}
#side_menu li div.sub_menu_head {
  display: flex;
  align-content: center;
  border-bottom: 1px solid none;
}
#side_menu li div.sub_menu_head:hover {
  color: #fff;
  cursor: pointer;
  border-left: 6px solid #C1DDEB;
  background: #5e7285;
}
#side_menu li div.sub_menu_head:after {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  border-right: 2px solid #b8d2e0;
  border-bottom: 2px solid #b8d2e0;
  transform: rotate(45deg);
  transition-duration: 0.2s;
  margin-top: 4px;
  margin-left: auto;
}
#side_menu li .sub_menu {
  display: none;
}
#side_menu li .sub_menu_head.active:after {
  transform: rotate(225deg);
}
#side_menu li ul.sub_menu a {
  border-left: 6px solid #465463;
  background: #465463;
  padding-left: 2.5em;
  color: #b8d2e0;
}
#side_menu li ul.sub_menu a:hover {
  border-left: 6px solid #C1DDEB;
  color: #fff;
  background: #5e7285;
}
#side_menu li:last-child {
  border-bottom: none;
}
#side_menu li:first-child {
  border-top: 1px solid none;
}
#side_menu .sub_menu_head.active + .sub_menu {
  display: block;
}
#side_menu .sub_menu_head.active + .sub_menu a.current_menu {
  color: #fff;
}
#side_menu a[class^=icon-]:before,
#side_menu .icon-book:before,
#side_menu .icon-test_add:before,
#side_menu .icon-class:before,
#side_menu .icon-database:before,
#side_menu .icon-test_check:before {
  margin-right: 0.5em;
}
#side_menu .teacher_menu {
  border-top: 2px solid rgba(255, 255, 255, 0.2);
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}

/*table*/
table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  margin: 1em auto;
  background: #fff;
}
table tr th, table tr td {
  padding: 5px;
  border: 1px solid #E6E9ED;
}
table tr th {
  color: #fff;
  background: #3F85A6;
  text-align: left;
  height: 2.5em;
  font-weight: normal;
  line-height: 1.2;
}
table tr:nth-child(odd) td {
  background: #f0f7fa;
}
table th {
  line-height: 1.2;
}

th.sort {
  cursor: pointer;
  position: relative;
}

th.sort::before,
th.sort::after {
  content: "";
  height: 8px;
  width: 8px;
  position: absolute;
  border-top: 2px solid #c1ddeb;
  border-right: 2px solid #c1ddeb;
  right: 10px;
  top: 50%;
}

th.sort::before {
  transform: translateY(-8px) rotate(-45deg);
}

th.sort::after {
  transform: translateY(2px) rotate(135deg);
}

th.sort.ascending::before {
  border-top: 2px solid #00d0ff;
  border-right: 2px solid #00d0ff;
  margin-top: 2px;
}

th.sort.descending::after {
  border-top: 2px solid #00d0ff;
  border-right: 2px solid #00d0ff;
  margin-top: -2px;
}

table .icon-eye {
  font-size: 2.4rem;
  color: #00a3cc;
}

table .icon-eye_closed {
  font-size: 2.4rem;
  opacity: 0.5;
}

table .icon-user_profile {
  font-size: 2.4rem;
  color: #00a3cc;
}

table .icon-notavailable {
  font-size: 2.4rem;
  opacity: 0.5;
}

/*教材の管理 ---------------------*/
table.materials th:nth-child(1) {
  width: 2em;
}
table.materials th:nth-child(2) {
  width: 4em;
  text-align: center;
}
table.materials th:nth-last-child(2) {
  width: 4em;
  text-align: center;
}
table.materials th:nth-last-child(5) {
  width: 5em;
}
table.materials th:nth-last-child(4) {
  width: 6em;
}
table.materials td:nth-child(1),
table.materials td:nth-child(2),
table.materials td:nth-child(4) {
  text-align: center;
}
table.materials td:nth-last-child(1),
table.materials td:nth-last-child(2),
table.materials td:nth-last-child(3),
table.materials td:nth-last-child(4) {
  text-align: center;
}

/*単元別テストの管理 ---------------------*/
table.unit_test th {
  text-align: center;
}
table.unit_test th:nth-child(1),
table.unit_test td:nth-child(1){
  width: 3em;
}
table.unit_test th:nth-last-child(1),
table.unit_test th:nth-last-child(2),
table.unit_test td:nth-last-child(1),
table.unit_test td:nth-last-child(2),
table.unit_test td:nth-last-child(3){
  width: 4em;
}
table.unit_test th:nth-child(2),
table.unit_test td:nth-child(4) {
  white-space: nowrap;
}
table.unit_test td:nth-child(1){
  text-align: right;
}

/*到達度テストの管理 ---------------------*/
table.achievement_test th {
  text-align: center;
}
table.achievement_test th:nth-child(1),
table.achievement_test td:nth-child(1){
  width: 3em;
}
table.achievement_test th:nth-last-child(1),
table.achievement_test th:nth-last-child(2),
table.achievement_test td:nth-last-child(1),
table.achievement_test td:nth-last-child(2),
table.achievement_test td:nth-last-child(3) {
  width: 4em;
}
table.achievement_test th:nth-child(2),
table.achievement_test td:nth-child(4) {
  white-space: nowrap;
}
table.achievement_test td:nth-child(1){
  text-align: right;
}

/*単元別テストの管理 ---------------------*/
table.class-table th:nth-child(1) {
  text-align: center;
  width: 3em;

}
table.class-table td:nth-child(6) {
  width: 8em;
  text-align: center;
}
/* table.class-table th:nth-child(3) {
  min-width: 16em;
} */
table.class-table th:nth-child(4) {
  min-width: 10em;
}
/* table.class-table th:nth-child(5) {
  width: 12em;
}
table.class-table th:nth-child(5) {
  width: 12em;
} */
table.class-table th:nth-last-child(1),
table.class-table th:nth-last-child(2),
table.class-table th:nth-last-child(3),
table.class-table td:nth-last-child(1),
table.class-table td:nth-last-child(2),
table.class-table td:nth-last-child(3) {
  width: 6rem;
  text-align: center;
}

/*table_teachcer*/
.mng-student-edit th:nth-child(1), .table_mng-student th:nth-child(1) {
  width: 4em;
}
.table_teacher th:nth-child(2), .mng-student-edit th:nth-child(2), .table_mng-student th:nth-child(2) {
  width: 6em;
}
.table_teacher th:nth-last-child(3), .mng-student-edit th:nth-last-child(3), .table_mng-student th:nth-last-child(3) {
  white-space: nowrap;
}
.table_teacher th:nth-last-child(1), .mng-student-edit th:nth-last-child(1), .table_mng-student th:nth-last-child(1),
.table_teacher th:nth-last-child(2),
.mng-student-edit th:nth-last-child(2),
.table_mng-student th:nth-last-child(2),
.table_teacher td:nth-last-child(1),
.mng-student-edit td:nth-last-child(1),
.table_mng-student td:nth-last-child(1),
.table_teacher td:nth-last-child(2),
.mng-student-edit td:nth-last-child(2),
.table_mng-student td:nth-last-child(2) {
  width: 6rem;
  text-align: center;
}
.table_teacher th:nth-last-child(3), .mng-student-edit th:nth-last-child(3), .table_mng-student th:nth-last-child(3),
.table_teacher td:nth-last-child(3),
.mng-student-edit td:nth-last-child(3),
.table_mng-student td:nth-last-child(3) {
  width: 8rem;
  text-align: center;
}
.table_teacher td:nth-child(1){
  width: 3em;
  text-align: right;
}

/*table_graph*/
.table_graph {
  margin: 0.5em auto;
}
.table_graph .below td {
  background: #ffe0e3;
}
.table_graph td {
  overflow-y: hidden;
}
.table_graph th:nth-child(1) {
  text-align: center;
  width: 4em;
}
.table_graph th:nth-child(2) {
  text-align: center;
  width: 10em;
}
.table_graph th:nth-child(3) {
  text-align: center;
  width: 7em;
}
.table_graph th:nth-child(4) {
  text-align: center;
  width: 8em;
}
.table_graph th:nth-child(5) {
  text-align: center;
  width: 6em;
}
.table_graph .scale_cell {
  display: flex;
  /*
  span:nth-child(odd){
  	background: #ffe0e3;
  }*/
}
.table_graph .scale_cell span {
  width: 10%;
  text-align: right;
}
.table_graph .graph_cell {
  display: flex;
  width: 100%;
  position: relative;
  height: 20px;
}
.table_graph .graph_cell .bar-li {
  background: #79b336;
  width: 25%;
  height: 20px;
}
.table_graph .graph_cell .bar-vo {
  background: #00c1e3;
  width: 50%;
  height: 20px;
}
.table_graph .graph_cell .def_line:after {
  content: "";
  display: inline-block;
  border-left: 2px solid #465463;
  height: 300%;
  width: 1;
  position: absolute;
  top: -100%;
  left: calc( 100% * 0.6 );
}
.table_graph .graph_cell .avg_line:after {
  content: "";
  display: inline-block;
  border-left: 2px solid red;
  height: 300%;
  width: 1;
  top: -100%;
  position: absolute;
  left: calc( 100% * 0.13 );
}

/**/
.below td {
  background: #ffe0e3 !important;
}

/*materials_view*/
.materials_view th{
  text-align: center;
}
.materials_view td:first-of-type {
  width: 4em;
  text-align: center;
}

/*test-list-table*/
.test-list-table th{
  text-align: center;
}
.test-list-table td:nth-child(1) {
  width: 3em;
  text-align: center;
}
.test-list-table td:nth-child(3) {
  color: red;
}
.test-list-table td:nth-last-child(1) {
  width: 4em;
  text-align: center;
}

.audiocell td:nth-child(2),
.audiocell td:nth-child(3) {
  width: 32%;
}

.test-audio-table th{
  text-align: center;
}
.test-audio-table tr td {
  background: #fff !important;
}
.test-audio-table td:nth-child(1) {
  width: 3em;
  text-align: center;
}
.test-audio-table .prevtd {
  text-align: center;
  border-bottom: 2px solid rgba(63, 133, 166, 0.7) !important;
}

.test-audio-table tr:nth-child(odd) td {
  border-bottom: 2px solid rgba(63, 133, 166, 0.7) !important;
}

.test-audio-table tr:nth-child(even) > td:nth-child(1) {
  border-bottom: 2px solid rgba(63, 133, 166, 0.7) !important;
}

.test-audio-table tr .table-answer td {
  text-align: left;
  border: 1px solid #E6E9ED !important;
}

.table-answer {
  margin: 0;
}
.table-answer th {
  text-align: center;
  width: 10em;
  background: rgba(223, 228, 232, 0.8);
  color: #22759C;
  border-top: 1px solid #c1cbd3 !important;
}
.table-answer td {
  text-align: left;
  border-top: 1px solid #c1cbd3 !important;
}
.table-answer tr:nth-child(1) {
  color: red;
}
.table-answer tr:nth-child(1) th {
  border-top: none !important;
}

/*learning_info_table*/
.learning_info_table th {
  text-align: center;
}
.learning_info_table th:nth-child(1) {
  width: 3.5em;
}
.learning_info_table th:nth-child(2),
.learning_info_table th:nth-child(3),
.learning_info_table th:nth-child(4),
.learning_info_table th:nth-child(5),
.learning_info_table td:nth-child(2),
.learning_info_table td:nth-child(3),
.learning_info_table td:nth-child(4),
.learning_info_table td:nth-child(5){
    word-wrap: break-word;
    word-break: break-word;
}

/*checklist_auto*/
.scoringlist_auto th{
  text-align: center;
}
.scoringlist_auto th:nth-of-type(1),
.scoringlist_auto td:nth-of-type(1) {
  width: 2em;
  text-align: center;
}
.scoringlist_auto th:last-child {
  width: 5em;
}
.scoringlist_auto select {
  color: red;
}

.student_paper th,
.student_paper td:nth-of-type(1),
.student_paper td:last-child {
  text-align: center;
}
.student_paper td:nth-of-type(3) {
  color: red;
}
.student_paper td:nth-of-type(1) {
  width: 3em;
}
.student_paper th:last-child {
  width: 5em;
}
.student_paper select {
  color: red;
}

/*table_linkdata*/
.table_linkdata th:nth-of-type(1),
.table_linkdata td:nth-of-type(1) {
  width: 2em;
  text-align: center;
}
.table_linkdata th:nth-of-type(2) {
  width: 50%;
}
.table_linkdata th:nth-of-type(3) {
  width: 50%;
}
.table_linkdata th:nth-of-type(4) {
  text-align: center;
  width: 4em;
}

.table_linkdata_stu th:nth-of-type(1),
.table_linkdata_stu td:nth-of-type(1) {
  text-align: center;
  width: 2em;
}
.table_linkdata_stu th:nth-of-type(6) {
  text-align: center;
  width: 4em;
}

.deleted_list th:nth-of-type(1) {
  text-align: center;
  width: 3em;
}
.deleted_list tr.deleted_line td {
  background: #d6dce5 !important;
  color: #90969c;
}
.deleted_list td:nth-of-type(1) {
  text-align: center;
}

/*USER*/
table.listening_progress {
  width: 100%;
  margin: 0 auto;
}
table.listening_progress th, table.listening_progress td {
  text-align: center;
}
table.listening_progress td:nth-child(1) {
  text-align: left;
}
table.listening_progress td:nth-child(1) span {
  display: block;
}

.user_status_result table.study-time {
  width: initial;
  margin: 0;
}
.user_status_result table.study-time tr td {
  background: none;
  border: none;
  border-bottom: 1px solid #3F85A6;
}
.user_status_result table.study-time tr:first-child td {
  border-top: 1px solid #3F85A6;
}
.user_status_result table.study-time td:nth-child(2) {
  text-align: right;
  padding-left: 4em;
}

.user_status table {
  margin: 0 auto;
}

.result_table th{
  text-align: center;
}
.result_table tr:nth-of-type(1) th:nth-of-type(1),
.result_table tr:nth-of-type(1) th:nth-of-type(6),
.result_table tr:nth-of-type(1) th:nth-of-type(7) {
  text-align: center;
}
.result_table tr:nth-of-type(1) th:nth-of-type(7) {
  width: 9em;
}
.result_table tr:nth-of-type(2) th {
  text-align: center;
}
.result_table td:nth-child(1){
  text-align: right;
  width: 4em;
}
.result_table td:nth-child(6),
.result_table td:nth-child(7),
.result_table td:nth-child(8),
.result_table td:nth-child(9),
.result_table td:nth-child(10),
.result_table td:nth-child(11) {
  text-align: center;
}
.result_table a {
  color: #00a3cc;
}

.result_table_user tr:nth-of-type(1) th {
  text-align: center;
}
.result_table_user tr:nth-of-type(1) th:nth-of-type(7) {
  width: 9em;
}
.result_table_user tr:nth-of-type(2) th {
  text-align: center;
}
.result_table_user td {
  text-align: right;
}
.result_table_user td:nth-child(2) {
  text-align: left;
}
.result_table_user a {
  color: #00a3cc;
}
.result_table_user td:nth-child(3),
.result_table_user td:nth-child(5),
.result_table_user td:nth-child(7),
.result_table_user td:nth-child(9),
.result_table_user td:nth-child(11),
.result_table_user td:nth-child(13) {
  min-width: 3em;
}
.result_table_user td:nth-child(4),
.result_table_user td:nth-child(6),
.result_table_user td:nth-child(8),
.result_table_user td:nth-child(10),
.result_table_user td:nth-child(12),
.result_table_user td:nth-child(14) {
  min-width: 6em;
}

.mng-student-list .bg-th {
  background: #3F85A6;
}
.mng-student-list th:nth-child(1),
.mng-student-list th:nth-child(2),
.mng-student-list td:nth-child(1),
.mng-student-list td:nth-child(2) {
  text-align: center;
  width: 4em;
}

/*table-reserved*/
.table-reserved th{
  text-align: center;
}
.table-reserved th:nth-child(1),
.table-reserved td:nth-child(1) {
  width: 3em;
}
.table-reserved td:nth-child(1) {
  text-align: right;
}
.table-reserved td:nth-child(5) span {
  display: block;
}
.table-reserved th:nth-last-child(1),
.table-reserved th:nth-last-child(2),
.table-reserved td:nth-last-child(1),
.table-reserved td:nth-last-child(2) {
  width: 4em;
  text-align: center;
}

table.table-confirm th:nth-child(1),
table.table-confirm td:nth-child(1) {
  text-align: center;
  width: 4em;
}
table.table-confirm .notfound {
  color: red;
}

/*tab menu*/
.tab_menu {
  display: flex;
}
.tab_menu .tab {
  position: relative;
  top: 5px;
  z-index: 98;
  min-width: 10em;
  text-align: center;
  border: 1px solid #e3e3e3;
  border-bottom: none;
  background: #e3e3e3;
  margin-right: 5px;
  border-radius: 8px 8px 0 0;
  padding: 10px;
}
.tab_menu .tab:hover {
  cursor: pointer;
}
.tab_menu .tab span {
  display: inline-block;
}
.tab_menu .current {
  position: relative;
  top: 0px;
  z-index: 100;
  background: #fff;
  border: 1px solid #ccc;
  border-bottom: 2px solid #fff;
  font-weight: bold;
  color: #00a3cc;
}

.tab_contents {
  z-index: 99;
  padding: 10px;
  border-top: 1px solid #ccc;
  position: relative;
  top: -1px;
  background: #fff;
}

.pad {
  padding: 30px;
}

body.login {
  background: #22759C;
  display: flex;
  justify-content: center;
  align-items: center;
}
body.login h1 {
  font-weight: normal;
  font-size: 1.8rem;
  margin-bottom: 40px;
}
body.login h1 img {
  display: block;
  width: 340px;
  height: auto;
  margin: 10px auto 40px auto;
}

.login_area h1 {
  text-align: center;
  color: #fff;
  font-size: 2.4rem;
}
.login_area label {
  width: 60px;
}
.login_area button {
  font-size: 1.6rem;
}
.login_area input[type=text],
.login_area input[type=password] {
  height: 2em;
}

.login_area .forget {
  display: block;
  margin-top: 20px;
  color: #fff;
  font-size: 1.6rem;
  font-weight: normal;
  text-decoration: underline;
  text-align: left;
}
.login_area .about_area {
  margin: 0 auto;
  text-align: right;
  width: 500px;
}
.login_area button.btn-login {
  background: #ffac1c;
  font-size: 1.4rem;
  min-width: 12em;
}
.login_area button.ico-help {
  padding: 0;
  background: none;
  border: none;
  font-size: 1.6rem;
}
.login_area button.ico-help::before {
  font-family: "icomoon" !important;
  content: "\e908";
  font-size: 1.6rem;
  color: #fff;
}

.login_area .notice_area {
  color: #fff;
  font-size: 1.4rem;
  margin: 40px auto 20px auto;
}
.login_area .notice_area p {
  text-align: left;
  white-space: pre-wrap;
}

.login_area .entrance-msg {
  font-size: 1.4rem;
  color: #fff;
  margin-top: 8em;
  text-align: center;
}

.loginmsg {
  color: #fff;
  text-align: center;
}

.login_form {
  border: 1px solid #2785b1;
  padding: 10px 20px;
  margin: 20px auto 20px auto;
  background: #2785b1;
  text-align: center;
  box-shadow: 0px 0px 15px -5px rgba(0, 0, 0, 0.2);
  width: 500px;
}

.login_layout {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.login_layout > div {
  width: 50%;
  text-align: center;
}

.login_layout2 > div {
  width: 80%;
  text-align: center;
  margin: 0 auto;
}

.login_layout2 button.btn-login {
  background: #ffac1c;
  font-size: 1.8rem;
  width: 80%;
  margin-bottom: 1em;
}

.userid,
.password {
  display: block;
  background: #fff;
  border: 1px solid #00a3cc;
  display: flex;
  margin: 20px 0;
}
.userid input,
.password input {
  border: none;
}

.userid label:after {
  font-family: "icomoon" !important;
  content: "\e913";
  font-size: 2rem;
  color: #b0bec5;
}

.password label:after {
  font-family: "icomoon" !important;
  content: "\e911";
  font-size: 2rem;
  color: #b0bec5;
}

#my-signin2 > div {
  margin: 20px auto;
}

#my-signin2 span {
  font-size: 2.4rem;
}

.abcRioButtonIcon {
  padding: 14px !important;
}

.abcRioButtonIcon div {
  width: 32px !important;
  height: 32px !important;
}

.abcRioButtonIcon div svg {
  width: 32px !important;
  height: 32px !important;
}

.g_id_signin {
  margin: 30px auto;
}
.g_id_signin .nsm7Bb-HzV7m-LgbsSe {
  min-height: 50px;
}
.g_id_signin .nsm7Bb-HzV7m-LgbsSe-Bz112c {
  width: 32px !important;
  height: 32px !important;
}
.g_id_signin svg {
  width: 32px !important;
  height: 32px !important;
}
.g_id_signin span {
  font-size: 2rem !important;
}

/*remodal custom*/
/* Media queries
   ========================================================================== */
.remodal-cancel {
  font-size: 20px;
  width: 30px;
  min-width: inherit;
  height: 30px;
  padding: 0;
  margin-left: auto;
  margin-right: -10px;
  display: block;
  background: #063F6A;
  line-height: 1;
}

.remodal-cancel:hover {
  background: #063F6A;
  opacity: 0.9;
}

.remodal {
  padding: 20px;
}

.modal_msg {
  font-size: 2rem;
  padding: 1em;
}

@media only screen and (min-width: 641px) {
  .remodal {
    max-width: 700px;
  }
  .remodal.widepopup {
    min-width: 1000px;
  }
}
/*単元別テスト新規登録*/
.test-title-area {
  border: 1px solid #ccc;
  padding: 20px;
}
.test-title-area dl {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-column-gap: 10px;
  grid-row-gap: 20px;
  align-items: center;
  margin-bottom: 2em;
}
.test-title-area dl dt {
  font-weight: bold;
  text-align: right;
  margin-left: 0;
}
.test-title-area dl dd:first-of-type {
  flex: 1;
}
.test-title-area dl:last-child {
  margin-bottom: 0;
}
.test-title-area textarea {
  width: 100%;
}
.test-title-area .time-limit {
  white-space: nowrap;
}
.test-title-area .time-limit input {
  width: 4em !important;
  margin-right: 0.52em;
}
.test-title-area input[type=text],
.test-title-area select{
  width: auto;
}
.test-title-area textarea {
  min-height: 5em;
}

/*question_form*/
/**/
.soundfile label {
  display: block;
  position: relative;
  color: #fff;
  white-space: nowrap;
  border: 1px solid #ccc;
  width: 100%;
  height: 3em;
  background: #fff;
  background: url(/img/sounds.svg) center center no-repeat;
}

.soundfile label:hover {
  opacity: 0.6;
  cursor: pointer;
}

.soundfile label input {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
}

.soundfile label input:hover {
  cursor: pointer;
}

.soundfile .filename {
  font-size: 1rem;
  margin: 0 0 0 10px;
}

.soundfile label.soundon {
  border: 1px solid #3F85A6;
  background: url(/img/sounds_on.svg) center center no-repeat;
}

.question_form {
  margin-bottom: 1em;
  display: flex;
  justify-content: space-between;
}
.question_form dt {
  width: 2em;
}
.question_form dd:first-of-type {
  flex: 1;
  margin-right: 2em;
}
.question_form dd:nth-of-type(2) {
  width: 20em;
}
.question_form dd:nth-of-type(3) {
  margin-left: 2em;
  width: 8em;
}

.question_form.wid2 dd:nth-of-type(2) {
  width: 30em;
}

.question_form_label {
  margin-bottom: 0.5em;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.question_form_label div {
  border-bottom: 2px solid #00a3cc;
  color: #00a3cc;
}
.question_form_label div:first-of-type {
  flex: 1;
  margin-left: 2em;
  margin-right: 2em;
}
.question_form_label div:nth-of-type(2) {
  width: 20em;
  border-bottom: 2px solid #53AB00;
  color: #53AB00;
}
.question_form_label div:nth-of-type(3) {
  margin-left: 2em;
  width: 8em;
}
.question_form_label .note {
  font-size: 1.2rem;
  display: block;
  line-height: 1.2;
}

.question_form_label.wid2 div:nth-of-type(2) {
  width: 30em;
  border-bottom: 2px solid #53AB00;
  color: #53AB00;
}
.question_frame {
  border: 1px solid #ccc;
  padding: 30px;
  margin-bottom: 2em;
}

.correct-answer {
  width: 20em !important;
}

.choices input {
  margin-bottom: 0.5em;
}
.choices input:first-of-type {
  background: #E9FADA;
}
.choices input:last-of-type {
  margin-bottom: 0;
}

.test_question_area {
  margin-top: 2em;
}

.problem_txt {
  margin: 2em 0 1em 0;
  font-weight: bold;
  padding: 5px;
  background: #DFE4E8;
}

/*teacherlist*/
ul.teacherlist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}
ul.teacherlist li {
  margin: 0.5em 1em 0.5em 0;
  min-width: 12em;
}

section {
  margin-bottom: 4em;
}
section h2 {
  display: flex;
  align-items: center;
  border-left: 5px solid #3F85A6;
  padding: 0 0.5em;
  margin-bottom: 2em;
}
section h2:after {
  content: "";
  display: block;
  height: 1px;
  background: #3F85A6;
  flex: 1;
  margin-left: 0.5em;
}
section h3 {
  display: flex;
  align-items: center;
  border-left: 5px solid #3F85A6;
  padding: 0.1em 0.5em;
  margin-bottom: 1em;
}
section h3:after {
  content: "";
  display: block;
  height: 1px;
  background: #3F85A6;
  flex: 1;
  margin-left: 0.5em;
}

.spline {
  border-top: 1px solid #ccc;
  padding: 1em 0;
}
.spline dt {
  min-width: 4em;
}
.spline .btn_area {
  margin-top: 2em;
}

/*file_download_area*/
.file_download_area {
  padding: 1em;
  background: #E6EEF5;
  margin-top: 4em;
  border-radius: 10px;
  align-items: center;
  display: flex;
}
.file_download_area dt {
  text-align: left;
  margin-right: 4em;
  font-weight: bold;
}

a.btn-download {
  text-decoration: none;
  border: 2px solid #3F85A6;
  padding: 0.5em 1em;
  border-radius: 4px;
  color: #3F85A6;
  display: inline-block;
  margin: 0 1em;
  background: #fff;
  min-width: 12em;
  text-align: center;
  font-size: 1.6rem;
}

/*search_class*/
.search_class {
  display: flex;
  align-items: flex-end;
  margin-bottom: 2em;
}
.search_class div:nth-child(1) {
  margin-right: 6em;
}

.search_class dl {
  display: flex;
  margin-bottom: 1em;
}
.search_class dl dt {
  font-weight: bold;
  text-align: right;
  width: 6em;
  margin-right: 1em;
  color: #465463;
}
.search_class dl dt::after {
  content: "※";
  display: inline-block;
  color: red;
}

.search_class dl:last-child {
  margin-bottom: 0;
}

.search_result {
  text-align: center;
  margin-bottom: 2em;
  font-size: 1.6rem;
  background: #fff;
  padding: 0.5em;
}

/*tab-graph*/
.tab_head {
  text-align: right;
}

.tab_head_btn {
  display: flex;
  justify-content: end;
}
.tab_head_btn button {
  margin-left: 1em;
}

.agn {
  display: inline-block;
  display: flex;
  justify-content: end;
  margin-bottom: 0.5em;
}
.agn dt {
  font-weight: bold;
  margin-right: 1em;
}

.table_graph_head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  line-height: 1;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}
.table_graph_head .usage1 {
  display: inline-block;
  padding: 0.25em 1em;
  background: #79b336;
  margin-left: 2em;
}
.table_graph_head .usage2 {
  display: inline-block;
  padding: 0.25em 1em;
  background: #00c1e3;
}
.table_graph_head dl {
  display: flex;
  align-items: center;
}
.table_graph_head dl dt {
  font-weight: bold;
  margin-right: 0.5em;
}
.table_graph_head dl .base-time {
  border-color: red;
  color: red;
}
.table_graph_head dl .base-time::-moz-placeholder {
  color: red;
}
.table_graph_head dl .base-time::placeholder {
  color: red;
}
.table_graph_head dl dt:nth-of-type(2) {
  margin-left: 2em;
}
.table_graph_head dl input {
  width: 3em;
  margin-right: 0.5em;
  padding: 0.25em;
}

.table_graph_foot {
  margin: 0.5em 0;
  display: flex;
}
.table_graph_foot .usage3 {
  display: inline-block;
  padding: 0.25em 1em;
  width: 2em;
  height: 1.5em;
  background: #ffe0e3;
}

.detail_data_head span {
  margin-right: 1em;
}
.detail_data_head span:nth-of-type(3):before {
  content: "「";
  display: inline-block;
}
.detail_data_head span:nth-of-type(3):after {
  content: "」";
  display: inline-block;
}

/*history_view_area*/
.history_view {
  display: flex;
  justify-content: space-around;
  margin-top: 2em;
}
.history_view div {
  border: 1px solid #8092a4;
  background: #fff;
  padding: 1em;
  position: relative;
}
.history_view div.mark-lisn:after {
  content: "";
  display: block;
  position: absolute;
  top: -1px;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20px 20px 0 0;
  border-color: #79b336 transparent transparent transparent;
}
.history_view div.mark-lisn:before {
  content: "";
  display: block;
  position: absolute;
  bottom: -1px;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 20px 20px;
  border-color: transparent transparent #79b336 transparent;
}
.history_view div.mark-vocb:after {
  content: "";
  display: block;
  position: absolute;
  top: -1px;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20px 20px 0 0;
  border-color: #00c1e3 transparent transparent transparent;
}
.history_view div.mark-vocb:before {
  content: "";
  display: block;
  position: absolute;
  bottom: -1px;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 20px 20px;
  border-color: transparent transparent #00c1e3 transparent;
}
.history_view .mark-none {
  display: flex;
  align-items: center;
  align-content: center;
}
.history_view .mark-none p {
  width: 240px;
  text-align: center;
  align-self: center;
}

.his_title {
  text-align: center;
  margin: 0.5em;
}

.modal-user {
  text-align: left;
  margin-bottom: 1em;
  list-style: none;
  line-height: 1.5;
  padding: 5px;
  margin: 0 0 1em 0;
  border-collapse: collapse;
}
.modal-user th {
  background: #C9DBE3;
  color: #22759C;
  border-color: #8092a4;
}
.modal-user td {
  background: #fff !important;
  border-color: #8092a4;
}

.exam_retry {
  font-size: 1.6rem;
  text-align: left;
  margin-bottom: 1em;
}
.exam_retry button {
  margin-top: 2em;
}

.retry-schedule {
  font-size: 1.6rem;
  display: none;
  margin-bottom: 2em;
}
.retry-schedule dl {
  text-align: left;
}
.retry-schedule dl dd {
  padding-left: 2em;
}

/*materials_view_area*/
.materials_view_area {
  display: flex;
  justify-content: space-between;
}
.materials_view_area table {
  width: calc(50% - 10px);
}
.materials_view_area .listning_list tr th {
  background: #79b336;
}
.materials_view_area .vocabulary_list tr th {
  background: #00c1e3;
}

/*test-name*/
.test-name {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  padding: 0;
}
.test-name dt {
  width: auto;
  font-weight: bold;
  text-align: left;
}
.test-name dd:before {
  content: "：";
}
.test-name dt:after {
  content: none;
}
.test-name dd {
  width: calc(100% - 8em);
}

/*test-reserved*/
.table_header {
  display: flex;
  align-items: flex-end;
}

/*test-schedule*/
.test-select {
  display: flex;
  margin-bottom: 1em;
  align-items: center;
}
.test-select dt {
  font-weight: bold;
  margin-right: 1em;
}

.cols2Layout,
.test-schedule {
  border: 1px solid #465463;
  padding: 20px;
}

.cols2Layout {
  display: flex;
  width: 100%;
}
.cols2Layout dl {
  display: flex;
  width: 50%;
}
.cols2Layout dl dt {
  margin-right: 1em;
}
.cols2Layout dt {
  font-weight: bold;
}
.cols2Layout .material_list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cols2Layout .material_list li {
  margin-bottom: 1em;
}
.cols2Layout .material_list li:last-child {
  margin-bottom: 0;
}
.cols2Layout .sublist li {
  margin-bottom: 2em;
}
.cols2Layout .sublist li:last-child {
  margin-bottom: 0;
}
.cols2Layout .unit_list {
  list-style: none;
  padding: 0;
  margin: 1em auto 1em 2em;
}
.cols2Layout .unit_list li {
  margin-bottom: 1em;
}

.test-schedule dl {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
}
.test-schedule dl:first-child {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  border-bottom: 1px dotted #465463;
}
.test-schedule button {
  min-width: 12em;
}
.test-schedule dd input {
  margin: 0 5px 0 5px;
}
.test-schedule .fx1 {
  flex: 1;
}
.test-schedule .btn-start{
  margin-top: 0;
}

/*pagenation*/
.pagenation {
  list-style: none;
  display: flex;
  justify-content: center;
  margin: 2em auto;
}
.pagenation li a {
  width: 2em;
  height: 2em;
  background: #3F85A6;
  margin: 0.25em;
  padding: 0.25em;
  text-align: center;
  color: #fff;
  display: block;
  text-decoration: none;
  border-radius: 4px;
}
.pagenation li a:hover {
  opacity: 0.6;
}
.pagenation .current {
  background: #fff;
  border: 1px solid #3F85A6;
  color: #3F85A6;
}
.pagenation .disabled {
  background: #ccc;
  cursor: text;
}
.pagenation .disabled:hover {
  opacity: 1;
}

.btn-area {
  margin-top: 4em;
  border-top: 1px solid #ccc;
  padding: 1em;
  display: flex;
  justify-content: center;
}
.btn-area button {
  margin: 0 1em;
  min-width: 8em;
}

/*detail_title*/
.detail_head > div {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.detail_title {
  background: #C9DBE3;
  padding: 0.25em 1em;
  display: inline-block;
}

/*search_test*/
.search_test {
  margin-bottom: 2em;
}
.search_test select {
  margin-right: 2em;
  min-width: 300px;
}
.search_test dl {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-column-gap: 10px;
  grid-row-gap: 20px;
  align-items: center;
  margin-bottom: 2em;
}
.search_test dl dt {
  font-weight: bold;
  text-align: right;
}
.requiredmark:after {
  content: "※";
  color: red;
}

/*test_select"*/
.test_select {
  display: flex;
  margin-bottom: 2em;
}
.test_select dl {
  display: flex;
  margin-bottom: 1em;
}
.test_select dl dt {
  font-weight: bold;
  margin-right: 1em;
  min-width: 4em;
}
.test_select .test_info {
  background: rgba(201, 219, 227, 0.5);
  padding: 1em;
  border-radius: 8px;
  width: 50%;
  margin-right: 4em;
}
.test_select select {
  min-width: 10em;
  display: block;
  margin-bottom: 2em;
}

.check_area {
  border: 1px solid #C9DBE3;
  background: #fff;
  padding: 0px 20px 20px 20px;
  margin-bottom: 2em;
}
.check_area .question_form div:nth-of-type(2) {
  color: red;
}
.check_area select:disabled {
  background-color: #ccc;
  border: 1px solid #ccc;
  opacity: 0.6;
}

.paper_head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}

.student_name {
  display: flex;
  font-size: 1.6rem;
  line-height: 1;
}
.student_name span {
  margin-right: 2em;
}
.student_name span:nth-of-type(3) {
  font-weight: bold;
}

.student_result {
  display: flex;
  align-items: center;
  justify-content: end;
}
.student_result .vis_score {
  border: 1px solid #ccc;
  background: #fff;
  text-align: center;
  padding: 0.5em;
  font-size: 1.8rem;
  font-weight: bold;
  margin-left: 2em;
}
.student_result .get_score {
  color: red;
}

.btn_LR {
  display: flex;
  justify-content: space-between;
}

/*input_code*/
.input_code_area {
  margin-bottom: 2em;
}

.input_code {
  background: rgba(201, 219, 227, 0.5);
  padding: 1em;
  display: flex;
  width: 100%;
}
.input_code dt {
  white-space: nowrap;
  margin-right: 1em;
  font-weight: bold;
}
.input_code dd input[type=text] {
  display: block;
  margin-bottom: 1em;
  width: 30em;
}

.input_code2 {
  background: rgba(201, 219, 227, 0.5);
  padding: 1em;
}
.input_code2 .label_codo_input {
  display: flex;
  margin: 0 0 0.5em 0;
}
.input_code2 .label_codo_input dt {
  width: 2em;
}
.input_code2 .label_codo_input span {
  width: 300px;
  display: inline-block;
  margin-left: 0.5em;
  border-bottom: 2px solid #4f5f6f;
  color: #4f5f6f;
  padding-bottom: 0.25em;
}
.input_code2 .label_codo_input span:nth-child(2) {
  margin-left: 10px;
}
.input_code2 dl {
  display: flex;
  margin-bottom: 1em;
  align-items: center;
}
.input_code2 dl dt {
  width: 2em;
  text-align: center;
}
.input_code2 dl input[type=text] {
  width: 300px;
  margin: 0 0.5em;
  display: inline-block;
}
.input_code2 button {
  margin-left: calc(2em + 3px);
}

.test_view section {
  display: flex;
}
.test_view select,
.test_view span {
  margin: 0 0.5em;
}

.test_view select:nth-child(1) {
  min-width: 15em;
}

.test_view .radio {
  margin-right: 0;
  width: 10em;
}
.test_view.error {
  margin-top:-3em;
}

/*学習者の管理フォームレイアウト*/
.mng_stu_search {
  margin-top: 1em;
}
.mng_stu_search dt {
  min-width: initial !important;
}
.mng_stu_search dd {
  display: flex;
}
.mng_stu_search dd select {
  min-width: 20em;
  margin-right: 1em;
}
.mng_stu_search dd select option[value=""] {
  font-weight: bold;
}
.mng_stu_search dd input[type=text] {
  width: 20em !important;
  margin-right: 1em;
}

.bulk-operation {
  border: 1px solid #ccc;
  margin: 3em auto;
  display: flex;
  align-items: center;
  padding: 1em;
}
.bulk-operation dl {
  margin-right: 8em;
}
.bulk-operation dl dt {
  min-width: 8em;
}
.bulk-operation dl:last-child {
  margin-bottom: 0;
}

/*学習者を一括登録する*/
.add_regist {
  margin-top: 4em;
}
.add_regist dl dd {
  display: flex;
  align-items: center;
}
.add_regist dl dd button {
  margin-left: 4em;
}

/*pw-chanege*/
.pw-chanege {
  margin: 2em auto;
}
.pw-chanege input[type=text] {
  width: 16em;
}
.pw-chanege input[type=password] {
  width: 16em;
}

/**/
.ms-drop label {
  margin-bottom: 0.5em;
}

.ms-drop label span {
  display: flex;
  position: relative;
  align-items: center;
}

.ms-drop input[type=checkbox] {
  display: none;
}

.ms-drop input[type=checkbox] + span:before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background: #ccc;
  border-radius: 4px;
  margin-right: 5px;
}

.ms-drop input[type=checkbox]:checked + span:before {
  background: #ff8a14;
}

.ms-drop input[type=checkbox]:checked + span:after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 8px;
  border-left: 3px solid #fff;
  border-bottom: 3px solid #fff;
  transform: rotate(-45deg);
  position: absolute;
  left: 2px;
  top: 4px;
}

/*USER CONTENTS*/
/*user_status*/
.user_status {
  display: flex;
  align-items: center;
  width: 100%;
  border-bottom: 1px solid rgba(34, 117, 156, 0.2);
  padding: 2em 0;
}
.user_status dt {
  min-width: 12em;
  background: rgba(34, 117, 156, 0.6);
  color: #fff;
  padding: 0.5em 0.5em;
  margin-right: 2em;
  text-align: center;
}
.user_status dd {
  flex: 1;
}
.user_status .total_time {
  font-size: 2rem;
  font-weight: bold;
  white-space: nowrap;
}

dl.user_status:last-of-type {
  margin-bottom: 2em;
}

.user_status.align-top dt, .user_status.align-top dd {
  align-self: flex-start;
}

.user_status_search {
  display: flex;
  align-items: flex-start;
  margin-bottom: 2em;
}
.user_status_search select {
  margin: 0 1em;
}

.user_status_result {
  display: flex;
}
.user_status_result .total_time {
  margin-right: 2em;
  font-size: 2rem;
}

/*グラフサンプル用*/
.bar_graph_area img {
  max-width: 300px;
  height: auto;
}

.sub_header {
  background: #ffd373;
  padding: 10px;
  text-align: center;
  margin-top: 10px;
  font-size: 2rem;
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: center;
}
.sub_header div {
  font-size: 1.6rem;
  background: #fff;
  padding: 0.25em 0.5em;
  margin-left: 2em;
}

.sub_header.arc-type {
  background: #FFBD94;
}

#wrapper #contents .sub_header h1::before {
    content: none;
}

.steps {
  display: flex;
  background: #e1e7e8;
  list-style: none;
  align-content: center;
  align-items: center;
  justify-content: center;
  margin: 0;
}
.steps li {
  padding: 0.5em;
  min-width: 4em;
  border: 1px solid #fff;
  text-align: center;
}
.steps li.current {
  color: #fff;
  background: #ffac1c;
}

.steps.arc-type li.current {
  color: #fff;
  background: #FF7E1C;
}

/*TEST*/
.exam-area {
  max-width: 1000px;
  margin: 0 auto;
  font-size: 1.6rem;
}
.exam-area dl {
  display: flex;
  align-content: center;
  align-items: center;
}
.exam-area dl dt {
  font-weight: bold;
  margin-right: 1em;
  align-self: flex-start;
}
.exam-area dl input {
  width: 30em;
}
.exam-area dl textarea {
  min-height: 10em;
}
.exam-area p.msg {
  text-align: center;
  margin-bottom: 2em;
}
.exam-area .mgntop {
  margin-top: 2em;
}
.exam-area .question_txt {
  padding-left: 1em;
}
.exam-area form {
  padding-left: 2em;
}
.exam-area ol.sample {
  margin-top: 0.2em;
  list-style: none;
  text-indent: -1.3em;
}

ul.intro {
  list-style: none;
  padding-left: 0;
}
ul.intro li {
  margin-top: 1.25em;
}
ul.intro li span {
  color: red;
}

.exam-menu .exam-list {
  width: 50%;
  list-style: none;
  margin: 0 auto;
  padding: 0;
  /*
  input[type="radio"]:checked + label:after{
  	font-family: 'icomoon' !important;
  	content: "\e926";
  	position: absolute;
  	right:-1.5em;
  	width:1em;
  	font-size: 2rem;
  }*/
}
.exam-menu .exam-list label {
  font-size: 1.8rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5em 1em 0.5em 0.5em;
  border-radius: 6px;
  border: 3px solid #3F85A6;
}
.exam-menu .exam-list label span:nth-child(2) {
  flex: 1;
  margin-left: 1em;
}
.exam-menu .exam-list label img {
  width: 100px;
  border-radius: 5px;
}
.exam-menu .exam-list label:hover {
  cursor: pointer;
  opacity: 0.8;
}
.exam-menu .exam-list input[type=radio] {
  display: none;
}
.exam-menu .exam-list input[type=radio] + div {
  padding: 5px;
  border: 3px solid rgba(255, 255, 255, 0);
  border-radius: 10px;
  margin-bottom: 1em;
}
.exam-menu .exam-list input[type=radio] + div:nth-of-type(1) > label {
  background: #fff;
}
.exam-menu .exam-list input[type=radio] + div:nth-of-type(2) > label {
  background: #fff;
}
.exam-menu .exam-list input[type=radio] + div:nth-of-type(3) > label {
  background: #fff;
}
.exam-menu .exam-list input[type=radio]:checked + div:nth-of-type(1) {
  background: rgba(63, 133, 166, 0.3);
}
.exam-menu .exam-list input[type=radio]:checked + div:nth-of-type(2) {
  background: rgba(63, 133, 166, 0.3);
}
.exam-menu .exam-list input[type=radio]:checked + div:nth-of-type(3) {
  background: rgba(63, 133, 166, 0.3);
}
.exam-menu .exam-list.achv label {
  background: #ff7e1c;
  border: 3px solid #ff7e1c;
  color: #fff;
}
.exam-menu .exam-list.achv input[type=radio]:checked + label {
  background: #ffbd8a;
  border: 3px solid #f55e00;
  color: #f55e00;
}

/*audio_test*/
.audio_test {
  text-align: center;
}

.question_msg {
  margin: 0 auto 2em;
  padding: 0.25em 0.5em;
  background: #DFE4E8;
  word-break: keep-all;
  display: flex;
}
.question_msg span{
  display: block;
}

.question_txt {
  margin: 0 auto 2em;
  display: flex;
  word-break: keep-all;
}
.question_txt span:last-child {
  white-space: pre-wrap;
  word-break: break-word;
  margin-left: 4px;
}

#alert_msg {
  padding: 0.5em 1em;
  margin: 2em auto;
  width: 90%;
  text-align: center;
}

.alertcolor {
  background: #ffe0e3;
  color: #ff1f35;
}

.sub-dialog {
  padding: 1em;
  border: 1px solid #3F85A6;
  background: #fff;
  width: 20em;
  text-align: center;
  width: 400px;
}
.sub-dialog p {
  margin-bottom: 1em;
}
.sub-dialog button {
  margin: 0.5em;
}
.sub-dialog .btn-cancel {
  background: #eee;
}

/**/
.lisning-area {
  display: flex;
  align-items: flex-start;
  align-content: center;
}

.lisning-area div:first-child {
  margin-right: 2em;
}
.lisning-area div:last-child {
  flex: 1;
  margin: 0;
}
.lisning-area div:last-child p.question_txt {
  margin-bottom: 2em;
}
.lisning-area .btn-play {
  background-color: #ffac1c;
  border: none;
  background-repeat: no-repeat;
  background-position: center center;
  border-radius: 50%;
  min-width: initial;
  width: 50px !important;
  height: 50px !important;
  background-image: url(../img/horn.svg);
  background-size: 70%;
}
.lisning-area .btn-play.arc-type {
  background-color: #ff7e1c;
}
.lisning-area .nowplaying {
  background-color: #ff8a14 !important;
  background-image: url(../img/horn_on.svg);
  opacity: 1;
}
.lisning-area .playend {
  background-color: #ff8a14;
  background-image: url(../img/horn.svg);
  opacity: 1;
}
.lisning-area button#btn-limitedplay:disabled {
  background-color: #aaa;
}

.exam-area textarea {
  width: 40em;
  height: 5em;
}

.last_msg {
  text-align: center;
}
.last_msg button {
  margin-top: 4em;
}

.select_answer input[type=radio] {
  display: none;
}
.select_answer label:hover {
  cursor: pointer;
  opacity: 0.8;
}
.select_answer input[type=radio]:checked + label {
  background: #27A0E6;
  color: #fff;
}
.select_answer label {
  cursor: pointer;
  background: rgba(39, 160, 230, 0.2);
  padding: 0.5em 1em;
  min-width: 20em;
  display: block;
  border-radius: 6px;
  margin-bottom: 1em;
}

/* SUS 定義 */
.login .institution_name {
  color: #FFC000;
  font-size: 3.5rem;
  margin-bottom: 36px;
}