@CHARSET "UTF-8";

* {
  margin: 0px;
  padding: 0px;
}

html, body, pre {
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
    'Hiragino Sans', 'Hiragino Kaku Gothic ProN', '游ゴシック  Medium',
    meiryo, sans-serif;
}

body {
  padding: 6em 1em 5em 1em;
}

a {
  text-decoration: none;
  color: #428bca;
}

a:HOVER {
  text-decoration: underline;
}

a:LINK {
  color: #428bca;
}

section.fixed {
  position: fixed;
}

h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
}

p, li, dt, dd, table {
  text-justify: inter-ideograph;
  line-break: strict;
}

img {
  border: 0px;
}

li {
  list-style-type: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0px;
}

table.list {
  border-collapse: separate;
  overflow: hidden;
  box-sizing: border-box;
  border-radius: 4px;
  border-style: solid;
  border-color: #ccc;
  width: 100%;
}

table.list tr {
  background-color: #fff;
}

table.list td {
  border-top-style: solid;
  border-top-color: #ccc;
}

table.list thead th, table.list thead td {
  border-bottom-style: solid;
  border-bottom-color: #ccc;
}

table.list tbody tr:FIRST-CHILD td, table.list tbody tr:FIRST-CHILD th {
  border-top: none;
}

table.list tfoot th, table.list tfoot td {
  border-top-style: solid;
  border-top-color: #ccc;
}

address, caption, cite, code, dfn, em, th, var {
  font-style: normal;
  font-weight: normal;
}

select option {
  padding: 0em 0.5em;
}

body {
  background-color: #FFF;
}

body>header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  color: white;
  z-index: 5;
  box-sizing: border-box;
  height: 4em;
  line-height: 4em;
}

body>header .portlate {
  cursor: pointer;
}

body>header>div.right {
  position: absolute;
  right: 0;
  line-height: 4em;
  height: 60px;
  white-space: nowrap;
}

body>header>div.left {
  position: absolute;
  left: 1em;
  line-height: 4em;
  max-width: 50%;
}

body>header>div img {
  height: 3em;
  margin-right: 1em;
  vertical-align: middle;
  object-fit: contain;
}

body>header>div.right img:NTH-CHILD(2) {
  margin-right: 0.5em;
}

body>header>div.right div {
  display: inline-block;
  vertical-align: middle;
}

body>header>div.right ul {
  white-space: nowrap;
}

body>header>div.right ul li {
  line-height: 1em;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

@media screen and (max-device-width: 736px){
  body>header>div.right ul li {
    max-width: 7em;
  }
}

body>header>div.right ul li:NTH-CHILD(n+2) {
  font-size: 0.5em;
  padding-top: 1em;
}

body>footer {
  text-align: center;
  margin-top: 2em;
  margin-bottom: 1em;
}

body>footer img {
  height: 2em;
  margin-bottom: 1em;
}

footer div {
  color: #ccc;
  font-size: 0.8em;
  font-weight: lighter;
}

img.portlate {
  height: 2.7em;
  width: 2.7em;
  object-fit: cover;
  border-radius: 0.2em;
}

#user_menu {
  position: fixed;
  display: none;
  z-index: 7;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

#user_menu ul {
  position: absolute;
  top: 4em;
  right: 0;
  margin: 0;
  border-left: 1px solid #999;
  border-bottom: 1px solid #999;
  background-color: #fff;
}

#user_menu li.version {
  text-align: right;
  color: #999;
  padding-right: 5px;
}

#user_menu ul a {
  color: #666;
  padding: 1em 2em;
  text-decoration: none;
  display: block;
}

#user_menu li.separate {
  border-top: 1px solid #f0ebdb;
}

#user_menu li.separate:FIRST-CHILD {
  border-top: none;
}

form {
  border-width: 1px;
  border-radius: 4px;
}

form>h1 {
  border-bottom-style: solid;
  border-bottom-width: 1px;
  padding: 0 1em 1em 1em;
}

form.rating_item_groups>h1 {
  border-bottom-style: solid;
  border-bottom-width: 0px;
  padding: 0 1em 0em 1em;
}

form>h1 img {
  margin-right: 1em;
  vertical-align: middle;
  width: 2em;
}

form small {
  font-size: 0.8em;
  margin-bottom: 1.5em;
  display: block;
  color: #999;
  word-break: break-all;
}

form small.description {
  font-size: 0.8em;
  margin-top: 1.5em;
  display: block;
  color: #999;
  word-break: break-all;
}

form div+small {
  margin-top: 0.5em;
}

form label {
  color: #999;
}

form h2 {
  color: #999;
  font-weight: normal;
}

form fieldset .task_thumbnail {
  position: relative;
  box-sizing: content-box;
  float: left;
}

form fieldset .task_thumbnail:BEFORE {
  content: "";
  display: block;
  padding-top: 100%;
}

form fieldset pre {
  overflow: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
  word-break: break-all;
}

form fieldset .task_thumbnail img {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  overflow: hidden;
}

fieldset {
  border: none;
  width: 100%;
  box-sizing: border-box;
  display: block;
  padding: 1em 1em 1em 1em;
}

h1+fieldset, dl+fieldset {
  margin-top: 1em;
}

fieldset.score, fieldset.score_always {
  padding: 0.3em 1em 0.2em 1em;
}

h1+fieldset.score, dl+fieldset.score, h1+fieldset.score_always, dl+fieldset.score_always
  {
  margin-top: 0em;
}

legend {
  padding: 0;
  color: #999;
  padding-top: 1em;
  line-height: 2em;
  vertical-align: bottom;
}

legend sup {
  position: relative;
  font-size: 1em;
  top: 0.35em;
  left: 0.1em;
}

input[type=text], input[type=password], input[type=date], input[type=email],
  input[type=tel], input[type=number], textarea {
  background-color: #ececec;
  font-size: 1em;
  color: #222;
  padding: 1em 1em 1em 1em;
  border: 1px solid #ccc;
  border-radius: 0.3em;
  box-sizing: border-box;
  width: 100%;
  resize: vertical;
}

input[type=text]:focus, input[type=password]:focus, input[type=date]:focus,
  input[type=email]:focus, input[type=tel]:focus, input[type=number]:focus,
  textarea:focus, select:focus, button:focus {
  outline: none;
  border-color: #06f;
}

input[readonly]:not(#link), textarea[readonly]:not(#link) {
  color: #fff;
  background-color: #ccc;
  border-color: #ccc;
}

input[readonly]#link, textarea[readonly]#link {
  background-color: #ececec;
  font-size: 1em;
  color: #222;
  padding: 0.75em;
  border: 1px solid #ccc;
  border-radius: 0.3em;
  box-sizing: border-box;
  width: 100%;
}

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

input[type=radio]+label, input[type=checkbox]+label {
  position: relative;
  display: inline-block;
  color: #222;
  cursor: pointer;
  padding-left: 2em;
  margin-right: 2em;
}

input[type=radio]+label:LAST-CHILD, input[type=checkbox]+label:LAST-CHILD
  {
  margin-right: 0;
}

input[type=radio]+label:BEFORE, input[type=radio]+label:AFTER {
  position: absolute;
  content: "";
  display: block;
  box-sizing: border-box;
  cursor: pointer;
  height: 1.6em;
  width: 1.6em;
  left: 0;
  top: 0;
}

input[type=checkbox]+label:BEFORE, input[type=checkbox]+label:AFTER {
  position: absolute;
  content: "";
  display: block;
  box-sizing: border-box;
  cursor: pointer;
  height: 1.4em;
  width: 1.4em;
  left: 0;
  top: 0;
}

input[type=radio]+label:BEFORE, input[type=checkbox]+label:BEFORE {
  border: 0.2em solid #e1e1e1;
}

input[type=radio]+label:BEFORE {
  border-radius: 1em;
}

input[type=radio]:CHECKED+label:AFTER {
  border-radius: 0.4em;
  height: 0.8em;
  width: 0.8em;
  margin: 0.4em;
}

input[type=checkbox]:CHECKED+label:AFTER {
  background-color: transparent;
}

input[type=checkbox]:CHECKED+label:AFTER {
  transform: rotate(45deg);
  border-style: solid;
  border-left: 0.2em;
  border-top: 0.2em;
  height: 0.7em;
  width: 0.6em;
  margin: 0.5em;
  left: -0.1em;
  top: -0.3em;
}

input[readonly]:CHECKED+label:AFTER {
  background-color: #999;
}

input[readonly]:CHECKED+label:BEFORE, input[readonly]:CHECKED+label:AFTER
  {
  color: #666;
  border-color: #999;
}

input[type=file] {
  display: none;
}

button, input[type=file]+label {
  display: inline-block;
  font-size: 1em;
  border-radius: 0.3em;
  border: 2px solid;
  line-height: 3em;
}

button.titleBeside{
  min-width: 1em;
  line-height: 1.5em;
  padding: 0 0.3em;
  font-size: 0.8em;
  cursor: pointer;
}

button {
  white-space: nowrap;
}

button:LAST-CHILD {
  margin-right: 0;
}

button.submit {
  color: #fff;
}



button:disabled {
  color: #fff;
  background-color: #ccc;
  border-color: #ccc;
}

button:disabled:HOVER {
  border-color: #ccc;
}

button>img {
  height: 1.5em;
  vertical-align: middle;
  margin-left: -0.5em;
  margin-right: 0.5em;
}

button>img:LAST-CHILD {
  margin-left: 0em;
  margin-right: 0em;
}

button.type2 {
  min-width: 0;
  background-color: #618995;
  border-color: #618995;
  color: #fff;
  background-color: #618995;
}

button.type2 img {
  height: 1em;
  margin-right: 0.5em;
}

button.type2 img:LAST-CHILD {
  margin-right: 0;
}

button.type2 img {
  vertical-align: middle;
}

button.type2:BEFORE {
  display: none;
}

button.type2:HOVER {
  opacity: 0.7;
}

form {
  border-style: solid;
  border-color: #ccc;
  background-color: #fff;
  padding: 1em 0;
}

form[action="search"] {
  margin-top: 1em;
}

form h1 {
  font-weight: normal;
  color: #222;
  border-color: #ccc;
}

form h1 img {
  vertical-align: middle;
}

.file label {
  width: 8.5em;
  padding: 0.1em 0.5em 0.1em 0.5em;
  font-size: 0.8em;
  border-radius: 0.3em;
  background-color: #fff;
  border: 1px solid #CCC;
  color: #222;
  font-weight: normal;
  cursor: pointer;
  box-sizing: border-box;
  margin-top: 0.8em;
  text-align: center;
  display: block;
}

.file img {
  display: block;
  margin-top: 1.75em;
  height: 8em;
  width: 8em;
}

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

select {
  color: #222;
  background-color: #ececec;
  border: 1px solid #CCC;
  border-radius: 0.25em;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  line-height: 3em;
  font-size: 1em;
  padding: 0 3em 0 1em;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  background-image: url('/images/select.png');
  background-repeat: no-repeat;
  background-position: right;
  background-size: 2em;
  margin-bottom: 0.6em;
}

select::-ms-expand {
  display: none;
}

dl.errors {
  color: #c22;
  background-color: #fdd;
  display: none;
}

dl.errors dd {
  display: list-item;
  list-style-type: disc;
  margin-left: 15px;
}

.pg_notices table {
  table-layout: fixed;
}

.pg_notices table tr.read h1 {
  font-weight: normal;
}

.pg_notices table tr td {
  vertical-align: top;
  background-color: #ffe;
}

.pg_notices table tr.read td {
  background-color: #fff;
}

.pg_notices table tr.read {
  opacity: 0.7;
}

.pg_notices table tr.read.expand {
  opacity: 1.0;
}

.pg_notices table tr.expand .more {
  display: none;
}

.pg_notices table tr.expand button {
  display: inline-block;
}

.pg_notices table tr.expand.read button {
  display: none;
}

.pg_notices table td img {
  border-width: 1px;
  border-radius: 0.5em;
  border-style: solid;
  border-color: #ccc;
}

.pg_notices td>div:NTH-CHILD(2) {
  border-radius: 0.25em;
  border-width: 1px;
  width: 100%;
  margin-top: 1em;
  padding: 1em;
  box-sizing: border-box;
  border-style: solid;
  border-color: #ccc;
  background-color: #fff;
}

.pg_notices table tr pre {
  color: #333;
  width: 100%;
  white-space: pre;
  overflow: hidden;
  line-height: 1.5em;
  height: 3em;
}

.pg_notices table tr.expand pre {
  white-space: pre-wrap;
  height: auto;
}

.pg_notices table button {
  display: none;
  margin-top: 1em;
}

div.user {
  display: inline-block;
  width: 100%;
}

div.user img {
  vertical-align: top;
  float: left;
}

div.user div {
  margin-left: 0.4em;
}

div.user div h1 small {
  display: inline-block;
  font-weight: normal;
  line-height: 1em;
}

div.user div * {
  display: list-item;
  list-style: none;
  margin: 0;
  padding-left: 0.5em;
  white-space: nowrap;
  word-spacing: normal;
  overflow: hidden;
  text-overflow: ellipsis;
}

div.user div>*:FIRST-CHILD {
  font-size: 1em;
  line-height: 1em;
  padding-top: 0.25em;
}

div.user div>*:LAST-CHILD {
  font-size: 0.8em;
  padding-top: 0.3em;
}

section pre {
  overflow: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
}

section.body {
  margin: auto;
  max-width: 768px;
  min-height: 400px;
  box-sizing: content-box;
}

section.viewBody {
  margin: auto;
  max-width: 1080px !important;
  min-height: 400px;
  box-sizing: content-box;
}

section>h1 {
  font-size: 1.5em;
  line-height: 1.5em;
  margin-top: 1em;
  margin-bottom: 0.5em;
}

body>section>h1:FIRST-CHILD {
  margin-top: 0;
}

section>div>div>h1.modelVideo {
  font-size: 1.5em;
  line-height: 1.5em;
  margin-top: 2em;
  margin-bottom: 0.5em;
}

body>section>div>div>h1.modelVideo:FIRST-CHILD {
  margin-top: 0;
}

section.body p {
  padding-bottom: 40px;
}

section .message {
  border-radius: 4px;
  border-width: 1px;
  width: 100%;
  margin-top: 8px;
  padding: 20px;
  box-sizing: border-box;
  border-style: solid;
  border-color: #ccc;
  background-color: #fff;
}

#thumbnail small {
  display: none;
}

#thumbnail div {
  display: inline-block;
}

#thumbnail div div {
  position: relative;
  border-style: dashed;
  border-color: #ccc;
  overflow: hidden;
  box-sizing: border-box;
}

#thumbnail canvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#thumbnail a {
  position: absolute;
  display: none;
  top: 0vw;
  right: 0vw;
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  cursor: pointer;
}

form[action="search"]+section {
  margin-top: 2em;
}

section>.list.submissions, section>.list.tasks {
  margin-bottom: 2em;
}

.list.submissions div {
  color: #666;
}

.list.submissions h1 {
  word-break: break-all;
  margin: 0;
  font-size: 1em;
}

.list.submissions h2 small {
  font-weight: normal;
  font-size: 100%;
  margin-left: 0.5em;
}

.list.submissions .rate_score {
  float: right;
  min-width: 3em;
  max-width: 8em;
  line-height: 1.5em;
}

.list.submissions .rate_score strong {
  font-size: 1.8em;
  color: red;
}

.list.submissions .rate_score strong:BEFORE {
  content: "\A";
  white-space: pre;
}

.list.tasks tr.finished {
  color: #999;
}

.list.tasks td.limit {
  width: 5em;
  text-align: right;
  font-size: 0.8em;
}

.box {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 200;
  background-color: rgba(0, 0, 0, 0.5);
}

.box>div {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  border: 0px solid #ccc;
  border-radius: 0.2em;
  box-shadow: 0.05em 0.1em 0.1em 0.1em #999;
  -webkit-box-shadow: 0.05em 0.1em 0.1em 0.1em #999;
  -moz-box-shadow: 0.05em 0.1em 0.1em 0.1em #999;
  min-width: 30em;
}

.box p {
  padding: 1em 2em;
  margin: 2em 0 1em;
}

.box p+div {
  padding: 1em;
  text-align: right;
}

.box button {
  min-width: 8em;
}

section.submission header {
  margin-bottom: 2em;
}

section.submission.modal>div:FIRST-CHILD>div {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  word-break: break-all;
}

section.modal>div:FIRST-CHILD>div.modal-header {
  color: #ffffff;
  border-radius: 5px;
  padding: 0.5em;
  margin: -0.7em -0.7em 0.5em -0.7em;
}

section.submission.modal>div:FIRST-CHILD>div>h1 {
  font-size: 1em;
  line-height: 1.3em;
  margin: 0;
}

section.submission.modal pre {
  margin-bottom: 1em;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.7);
  padding: 1em;
  font-size: 0.8em;
  line-height: 1.5em;
  max-height: 12em;
  white-space: pre-wrap;
  overflow: scroll;
}

section.submission.modal .grid {
  margin-top: 0.5em;
}

section.submission.modal .grid>div {
  font-size: 0.8em;
}

section.submission header .user:NTH-OF-TYPE(2) {
  margin-top: 2em;
  margin-bottom: 0.5em;
}

section.submission>.controls {
  margin-bottom: 1em;
}

section.submission>.controls select {
  vertical-align: top;
}

section.submission>.controls button {
  float: right;
}

canvas.video {
  width: 100%;
  background-color: #333;
  vertical-align: top;
  box-sizing: border-box;
}

canvas.video+nav {
  background-color: #618995;
}

canvas.video+nav a {
  display: inline-block;
  padding: 0.5em 0.5em;
  line-height: 1.5em;
  color: white;
  opacity: 0.8;
}

canvas.video+nav a:HOVER {
  background-color: #416975;
  cursor: pointer;
  text-decoration: none;
}

canvas.video+nav small {
  margin-left: 0;
  font-size: 0.8em;
}

canvas.video+nav span {
  margin: 0.2em;
  font-size: 0.8em;
}

canvas.video+nav img {
  padding: 0.5em 0.5em;
  height: 1.5em;
  float: right;
  vertical-align: top;
}

canvas.video+nav img:HOVER {
  background-color: #416975;
  cursor: pointer;
}

canvas.video+nav>img:FIRST-OF-TYPE {
  margin-left: 0;
  float: none;
}

section.submission .video video {
  width: 100%;
}

section.submission .rating>h1 {
  padding-left: 2em;
}

.rating .buttons {
  text-align: center;
  border-top: 1px solid #ccc;
}

.rating .buttons button {
  padding: 0 1em;
  margin: 0;
  min-width: 4em;
}

.rating .buttons button:NOT(:FIRST-CHILD) {
  margin: 0.5em 0 0 0.5em;
}

.rating .buttons div {
  margin-top: 0.5em;
}

.rating .score {
  position: relative;
}

.rating .score h1 {
  padding: 0;
  margin: 0;
  border: none;
  font-size: 1em;
  word-break: break-all;
}

.rating .score>div {
  padding: 0.5em 0;
}

.rating .score label {
  display: inline-block;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  height: 25px;
  width: 20%;
  background-image: url("/images/star-off.png");
  background-position: left;
  background-size: 25px;
  background-repeat: no-repeat;
}

.rating .score label.on {
  background-image: url("/images/star-on.png");
}

.rating .score label:BEFORE, .rating .score label:AFTER {
  display: none;
}

.rating .score span {
  float: right;
  font-size: 1.5em;
  font-weight: bold;
}

.rating .score_always {
  position: relative;
}

.rating .score_always h1 {
  padding: 0;
  margin: 0;
  border: none;
  font-size: 1em;
  word-break: break-all;
}

.rating .score_always>div {
  padding: 0.2em 0;
}

.rating .score_always label {
  display: inline-block;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  height: 25px;
  width: 20%;
  background-image: url("/images/star-off.png");
  background-position: left;
  background-size: 25px;
  background-repeat: no-repeat;
}

.rating .score_always label.on {
  background-image: url("/images/star-on.png");
}

.rating .score_always label:BEFORE, .rating .score label:AFTER {
  display: none;
}

.rating .score_always span {
  float: right;
  font-size: 1.5em;
  font-weight: bold;
}

.rating .score_always span.ratingRule {
  font-size: 1.0em;
  font-weight: normal;
}

.rating_item>div:NTH-CHILD(1) {
  background-image: url("/images/star-on.png");
  background-position: left top;
  background-repeat: no-repeat;
  word-break: break-all;
}

.rating_item>div:NTH-CHILD(2) {
  font-size: 0.8em;
  word-break: break-all;
}

ul.list {
  margin-bottom: 2em;
}

ul.list h1 {
  margin-top: 0.5em;
  background-color: #eee;
  line-height: 2em;
  padding-left: 0.5em;
  padding-right: 10em;
}

ul.list h1+span {
  float: right;
  margin-top: -2em;
  margin-right: 1em;
}

ul.list h1+span>span {
  padding: 0 0.3em;
}

ul.list .score {
  color: red;
  font-size: 150%;
  font-weight: bold;
}

ul.list ul.users {
  background-color: white;
  padding: 0 0.5em;
}

ul.list .users li {
  vertical-align: top;
  margin: 0.5em 0em;
  padding: 0.5em;
  border-radius: 0.3em;
  border: 1px solid #fff;
}

ul.list .users li:HOVER {
  cursor: pointer;
  border: 1px solid #96e5fd;
}

ul.list .users div:FIRST-OF-TYPE {
  font-size: 0.8em;
  display: block;
}

ul.list .users div:LAST-CHILD {
  color: red;
  font-size: 0.8em;
  font-weight: bold;
}

.videos {
  margin-bottom: 30px;
}

.videos h1 {
  text-overflow: ellipsis;
}

.videos article {
  display: inline-block;
  border-radius: 4px;
  border: 1px solid #ccc;
  background-color: #fff;
  width: 215px;
  padding: 10px;
  margin-bottom: 8px;
  margin-right: 8px;
}

.videos article:HOVER {
  background-color: #fafaff;
  cursor: pointer;
}

.videos article>section:NTH-CHILD(2) {
  position: relative;
  margin-top: 0.5em;
  overflow: hidden;
}

.videos article>section:NTH-CHILD(2):BEFORE {
  content: "";
  display: block;
  padding-top: 100%;
}

.videos article>section:NTH-CHILD(2) img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.videos article>section:NTH-CHILD(2) time {
  position: absolute;
  display: inline-block;
  right: 0;
  bottom: 0;
  width: 3.5em;
  line-height: 1.2em;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.7);
  text-align: center;
  color: #fff;
}

.videos article>section:NTH-CHILD(2) span.number {
  position: absolute;
  display: inline-block;
  left: 0;
  top: 0;
  padding: 0 0.5em;
  line-height: 1.2em;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.7);
  text-align: center;
  color: #fff;
}

.videos article>section:NTH-CHILD(3) {
  width: 100%;
}

.videos article>section:NTH-CHILD(3) h1 {
  word-spacing: normal;
  white-space: nowrap;
  overflow: hidden;
  font-size: 1em;
  line-height: 1.5em;
  padding: 0.2em 0;
  margin: 0;
  text-overflow: ellipsis;
}

time.icon {
  color: #999;
  font-size: 0.8em;
  background-image: url("/images/icon_limit.png");
  background-size: 1em 1em;
  background-repeat: no-repeat;
  background-position: 0px 2px;
  padding-left: 1.5em;
}

.videos article>section:NTH-CHILD(3) span {
  margin-left: 0;
}

.videos article>section:NTH-CHILD(3) time {
  color: #999;
  font-size: 0.8em;
  background-image: url("/images/icon_limit.png");
  background-size: 1em 1em;
  background-repeat: no-repeat;
  background-position: 0 0.1em;
  padding-left: 1.5em;
  padding-right: 1em;
}

.videos article>section:NTH-CHILD(4) {
  position: relative;
  height: 30px;
  width: 100%;
  font-size: 12px;
  border-top: 1px solid #ccc;
  padding-top: 10px;
}

.videos article>section.score span:NTH-CHILD(1) {
  position: absolute;
  top: 8px;
  left: 0px;
  color: #FF855B;
  font-size: 15px;
}

.videos article>section.score span:NTH-CHILD(2) {
  position: absolute;
  display: inline-block;
  top: 8px;
  right: 0px;
  font-size: 20px;
  font-weight: bold;
}

.videos article>section.count span {
  position: absolute;
  display: inline-block;
  top: 8px;
  right: 0px;
  font-size: 15px;
  font-weight: bold;
}

.model_videos article {
  display: inline-block;
  border-radius: 4px;
  border: 1px solid #ccc;
  background-color: #fff;
  width: 215px;
  padding: 10px;
  margin-bottom: 8px;
  margin-right: 8px;
}

.model_videos article:HOVER {
  background-color: #fafaff;
  cursor: pointer;
}

.model_videos section:NTH-CHILD(1) {
  position: relative;
  width: 100%;
}

.model_videos_external section:NTH-CHILD(1):BEFORE {
  padding-top: 56.25% !important;
}

.model_videos section:NTH-CHILD(1):BEFORE {
  content: "";
  display: block;
  padding-top: 100%;
}

.model_videos article section:NTH-CHILD(1) img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.model_videos article section:NTH-CHILD(1) time {
  position: absolute;
  display: inline-block;
  right: 0;
  bottom: 0;
  line-height: 1.2em;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.7);
  text-align: center;
  color: #fff;
  padding : 0 0.2em 0 0.2em;
}

.model_videos article section:NTH-CHILD(1) span.number {
  position: absolute;
  display: inline-block;
  left: 0;
  top: 0;
  padding: 0 0.5em;
  line-height: 1.2em;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.7);
  text-align: center;
  color: #fff;
}

.model_videos article section:NTH-CHILD(1) span.score {
  position: absolute;
  display: inline-block;
  right: 0;
  top: 0;
  padding: 0 0.5em;
  line-height: 1.2em;
  color: red;
  background-color: rgba(256, 256, 256, 0.7);
  text-align: center;
  font-size: 150%;
  font-weight: bold;
}

img.media-icon {
  height: 0.8em !important; 
  width: 1em !important;
  background-color: rgb(0, 0, 0, 0.7);
  top: 85% !important;
  padding: 0.2em 0.3em;
}

.model_videos article section:NTH-CHILD(2) {
  width: 100%;
}

.model_videos article section:NTH-CHILD(2) time {
  color: #999;
  font-size: 0.8em;
  background-image: url("/images/icon_limit.png");
  background-size: 1em 1em;
  background-repeat: no-repeat;
  background-position: 0 0.1em;
  padding-left: 1.5em;
}

.model_videos article section:NTH-CHILD(2) span {
  line-height: 1.5em;
  padding: 0 0 0 20px;
  float: right;
  font-size: 0.8em;
}

.model_videos article section:NTH-CHILD(2) span strong {
  font-size: 1.3em;
  padding-right: 0.2em;
}

.model_videos h1 {
  word-spacing: normal;
  white-space: nowrap;
  overflow: hidden;
  font-size: 1em;
  line-height: 1.5em;
  padding: 0.2em 0;
  margin: 0;
  text-overflow: ellipsis;
}

div.articleTitle {
  height: 2.9em;
  font-weight: bold;
  word-spacing: normal;
  white-space: normal;
  overflow: hidden;
  font-size: 1em;
  line-height: 1.5em;
  padding: 0.2em 0;
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.contents article {
  display: inline-block;
  border-radius: 4px;
  border: 1px solid #ccc;
  background-color: #fff;
  width: 215px;
  padding: 10px;
  margin-bottom: 8px;
  margin-right: 8px;
}

.contents article:HOVER {
  background-color: #fafaff;
  cursor: pointer;
}

.contents section:NTH-CHILD(1) {
  position: relative;
  width: 100%;
}

.contents section:NTH-CHILD(1):BEFORE {
  content: "";
  display: block;
  padding-top: 100%;
}

.contents article section:NTH-CHILD(1) img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.contents article section:NTH-CHILD(1) time {
  position: absolute;
  display: inline-block;
  right: 0;
  bottom: 0;
  width: 3.5em;
  line-height: 1.2em;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.7);
  text-align: center;
  color: #fff;
}

.contents article section:NTH-CHILD(1) span.number {
  position: absolute;
  display: inline-block;
  left: 0;
  top: 0;
  padding: 0 0.5em;
  line-height: 1.2em;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.7);
  text-align: center;
  color: #fff;
}

.contents article section:NTH-CHILD(1) span.score {
  position: absolute;
  display: inline-block;
  right: 0;
  top: 0;
  padding: 0 0.5em;
  line-height: 1.2em;
  color: red;
  background-color: rgba(256, 256, 256, 0.7);
  text-align: center;
  font-size: 150%;
  font-weight: bold;
}

.contents article section:NTH-CHILD(2) {
  width: 100%;
}

.model_videos article section:NTH-CHILD(2) time {
  color: #999;
  font-size: 0.8em;
  background-image: url("/images/icon_limit.png");
  background-size: 1em 1em;
  background-repeat: no-repeat;
  background-position: 0 0.1em;
  padding-left: 1.5em;
}

.contents article section:NTH-CHILD(2) span {
  line-height: 1.5em;
  padding: 0 0 0 20px;
  float: right;
  font-size: 0.8em;
}

.contents article section:NTH-CHILD(2) span strong {
  font-size: 1.3em;
  padding-right: 0.2em;
}

.contents h1 {
  word-spacing: normal;
  white-space: nowrap;
  overflow: hidden;
  font-size: 1em;
  line-height: 1.5em;
  padding: 0.2em 0;
  margin: 0;
  text-overflow: ellipsis;
}

.portlate_selector {
  position: relative;
}

.portlate_selector canvas {
  width: 7em;
  height: 7em;
  box-sizing: border-box;
  object-fit: cover;
  overflow: hidden;
  background-image: url("/images/loading.gif");
  background-repeat: no-repeat;
  background-position: auto auto;
  background-size: 100%;
}

.portlate_selector a {
  position: absolute;
  display: inline-block;
  top: 0em;
  left: 7.8em;
  height: 25%;
  opacity: 0.5;
  vertical-align: middle;
}

.portlate_selector img.portlate+a:HOVER {
  cursor: pointer;
  opacity: 1.0;
}

.portlate_selector input[type=file]+label {
  position: absolute;
  display: inline-block;
  height: 30%;
  bottom: 0em;
  left: 7.6em;
  padding: 0;
  opacity: 0.5;
  border: none;
  min-width: 0;
}

.portlate_selector input[type=file]+label:HOVER {
  cursor: pointer;
  opacity: 1.0;
}

.portlate_selector a img {
  height: 100%;
}

.portlate_selector input[type=file]+label img {
  height: 100%;
}

.portlate_selector>*:NTH-CHILD(5) {
  position: absolute;
  display: inline-block;
  left: 11em;
  right: 0;
  bottom: 0;
  text-align: right;
}

.portlate_selector>*:NTH-CHILD(5)>ul {
  margin-top: 0.5em;
  color: #999;
}

.portlate_selector>*:NTH-CHILD(5)>li {
  margin: 0.25em 0;
  text-align: right;
  color: #222;
}

.portlate_selector>*:NTH-CHILD(5)>li:NTH-CHILD(1) {
  font-weight: bold;
}

table.list {
  border-radius: 0.4em;
  border-width: 1px;
  margin-top: 8px;
}

table.list th, table.list td {
  padding: 1em 0 1em 1em;
}

table.list th, table.list td.head {
  overflow: hidden;
  text-overflow: ellipsis;
}

table.list th, table.list td.right {
  white-space: nowrap;
  margin-left: auto;
  margin-right: 0;
}

table.list td {
  border-top-width: 1px;
}

table.list td:LAST-CHILD {
  padding-right: 1em;
}

table.list thead th, table.list thead td {
  border-bottom-width: 1px;
}

table.list tbody tr:FIRST-CHILD td, table.list tbody tr:FIRST-CHILD th {
  border-top: none;
}

table.list tfoot th, table.list tfoot td {
  border-top-width: 1px;
}

.small {
  font-size: 0.8em;
}

table.list th.right, table.list td.right {
  padding-right: 1em;
  padding-left: 0.8em;
  text-align: right;
}

table.list .score {
  color: red;
  font-size: 150%;
  font-weight: bold;
}

table.list .group {
  display: block;
  font-size: 12px;
  color: #999;
}

table.list a:HOVER {
  text-decoration: underline;
}

table.list tbody tr:NOT([disabled]):HOVER {
  background-color: #fafaff;
  cursor: pointer;
}

section.comments .message {
  box-sizing: border-box;
  border-radius: 0.3em;
  border: 1px solid #ccc;
  width: 100%;
  margin-top: 0.5em;
  padding: 1em;
  background-color: #fff;
}

section.comments form div {
  position: relative;
  margin-bottom: 0.5em;
  color: #666;
}

section.comments form fieldset {
  padding: 0 1em;
}

section.comments form button {
  position: absolute;
  line-height: 2.7em;
  right: 0;
}

section.comments .list td {
  padding: 1em;
}

section.comments .list a {
  display: inline;
  font-size: 0.8em;
  right: 0.5em;
}

section.comments .list a:HOVER {
  text-decoration: none;
}

section.comments .list pre {
  font-size: 12px;
  word-wrap: break-word;
  white-space: pre-wrap;
}

section.comments > ul {
  box-sizing: border-box;
  background-color: #fff;
  width: 100%;
  margin-top: 1em;
}

section.comments > ul > li {
  position: relative;
  border: 1px solid #ccc;
  padding: 1em;
  border: 1px solid #ccc;
  border-bottom-width: 0px;
}

section.comments > ul > li:FIRST-CHILD {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

section.comments > ul > li:LAST-CHILD {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  border-bottom-width: 1px;
}

section.comments > ul > li a {
  text-decoration: underline;
}

section.comments > ul > li .buttons {
  margin-top: 1em;
  margin-bottom: 0;
  text-align: right;
}

section.comments .control {
  position: absolute;
  font-size: 0.8em;
  top: 1em;
  right: 1em;
}

section.comments pre {
  border-top: 1px solid #eee;
  margin-top: 1em;
  padding: 1em;
  word-wrap: break-word;
  white-space: pre-wrap;
  box-sizing: border-box;
}

section.comments textarea {
  margin-top: 1em;
  height: 10em;
  font-size: 0.9em;
}

section.modal {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 100;
  background-color: rgba(0, 0, 0, 0.4);
  overflow: scroll;
}

section.modal>div {
  position: absolute;
  background-color: rgba(255, 255, 255, 1.0);
  border-radius: 5px;
  margin-top: 2em;
  margin-bottom: 2em;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  padding: 1em;
  box-sizing: content-box;
  overflow: scroll;
}

.like_count {
  padding: 0 0 0 5px !important;
}

.video_comment_count strong:FIRST-CHILD {
  font-size: 1.5em;
  padding-right: 0.2em;
}

.play_time {
  font-size: 1em;
  background-image: url('/images/icon_clock.png');
  background-repeat: no-repeat;
  background-position: left;
  background-size: 1em;
  padding: 1em;
}

ul.tasks {
  background-color: #fff;
  margin-top: 1em;
  border-radius: 0.3em;
  border: 1px solid #ccc;
}

ul.tasks>li {
  padding: 0.5em 1em;
}

ul.tasks>li>h1 {
  background-color: #eee;
  line-height: 2em;
  padding-left: 0.5em;
  padding-right: 10em;
}

ul.tasks>li>h1.overdue {
  background-color: #ffc0ca94;
  line-height: 2em;
  padding-left: 0.5em;
  padding-right: 10em;
}

ul.tasks>li>h1>span {
  font-weight: normal;
}

ul.tasks>li>h1 * {
  color: #333;
}

ul.tasks>li>.right {
  float: right;
  margin-top: -2em;
  margin-right: 1em;
}

ul.tasks>li>.rightUnrate {
  float: right;
  margin-top: -2em;
  margin-right: 8em;
}

button.editRatingDate {
	float: right;
	margin-left: 60.5em;
	margin-top: -3.8em;
	padding:0;
}

ul.tasks>li strong {
  font-size: 1.5em;
  color: red;
  font-weight: bold;
}

ul.tasks>li>div {
  text-align: right;
  font-size: 0.8em;
  margin-top: 1em;
}

ul.tasks ul.users {
  background-color: white;
  padding: 0 0.5em;
}

ul.tasks .users li {
  vertical-align: top;
  margin: 0.5em 0em;
  padding: 0.5em;
  border-radius: 0.3em;
  border: 1px solid #fff;
}

ul.tasks .users li div {
  font-size: 0.8em;
}

ul.list {
  background-color: #fff;
  margin-top: 1em;
  border-radius: 0.3em;
  border: 1px solid #ccc;
}

ul.list>li {
  padding: 0.5em 1em;
  border-bottom: 1px solid #eee;
}

ul.select>li:HOVER {
  background-color: #c5e2cc;
  cursor: pointer;
}

ul.list>li:LAST-CHILD {
  border-bottom: none;
}

ul.list li img {
  width: 4em;
  height: 4em;
  margin-right: 0.5em;
  object-fit: cover;
  display: inline-block;
  vertical-align: middle;
}

ul.list li ul {
  display: inline-block;
  vertical-align: middle;
}

body.login {
  text-align: center;
}

body.login>img {
  width: 100%;
  margin: auto;
  margin-bottom: 1.5em;
}

div.tag {
  padding: 0em 0em 0em 0.5em;
  display: inline-block;
  border: 1px solid #ccc;
  vertical-align: middle;
  box-sizing: content-box;
  line-height: 1.7em;
  border-radius: 0.3em;
  margin-right: 1em;
  margin-bottom: 0.5em;
}

div.tagSD {
  display: inline-flex;
  vertical-align: middle;
  box-sizing: content-box;
  margin-right: 1em;
  margin-bottom: 0.5em;
  border: 1px solid #ccc;
  border-radius: 2px;
}

div.tag label {
  padding: 0 0.4em;
  display: inline-block;
  margin-left: 0.5em;
  vertical-align: top;
  background-color: #eee;
  box-sizing: border-box;
  color: #aaa;
  font-weight: bold;
}

div.tagSD label {
  margin: 0;
  padding: 2px 12px;
  font-size: 12px;
  box-sizing: border-box;
}

div.tagSD label.sel {
  border-radius: 2px 0px 0px 2px;
}

div.tagSD label.del {
  background-color: #eee;
  color: #aaa;
  border-radius: 0px 2px 2px 0px;
}

section.text h2 {
  margin-top: 30px;
}

section.text p {
  padding-bottom: 4px;
}

section.text p {
  padding-top: 8px;
}

section.text div.revision ul {
  display: block;
  margin-bottom: 30px;
}

section.text ol li {
  display: list-item;
  list-style-type: decimal;
  margin-left: 18px;
  padding-left: 10px;
  padding-bottom: 4px;
}

section.text ol li:FIRST-CHILD {
  padding-top: 8px;
}

section.text ol.parentheses {
  counter-reset: item;
}

section.text ol.parentheses>li {
  list-style-type: none;
  text-indent: 0em;
  margin-left: 0em;
  padding-left: 2em;
}

section.text ol.parentheses>li:before {
  content: "(" counter(item) ")";
  counter-increment: item;
  display: inline-block;
  margin-left: -2em;
  width: 2em;
}

section.text ol.katakana li {
  list-style-type: katakana;
  text-indent: 0em;
}

div.statistics {
  display: block;
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin: 1em 0;
  background-color: #fff;
  box-sizing: border-box;
  color: #999;
}

div.statistics h1 {
  display: block;
  border-bottom: 1px solid #ccc;
  margin-bottom: 0;
  font-weight: normal;
  line-height: 3em;
  padding: 0 1em;
}

div.statistics h1 img {
  height: 1.5em;
  vertical-align: middle;
  margin-right: 1em;
}

div.statistics>div {
  padding: 1em 0;
}

div.statistics label {
  padding: 0 1em 0 0;
}

div.statistics table {
  width: 100%;
}

div.statistics table td {
  border-left: 1px solid #ccc;
  padding: 0.5em;
}

div.statistics table td:FIRST-CHILD {
  border-left: none;
}

div.statistics .value {
  display: inline-block;
  color: #8dc3d8;
  padding: 0.2em 0.2em;
}

div.statistics .bar {
  display: inline-block;
  padding: 0.3em 0;
  color: #666;
  text-align: right;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: visible;
}

div.statistics .bar span {
  padding-right: 0.5em;
}

.pg_contract section {
  background-color: #fff;
  padding: 1em 1em 3em 1em;
  border: 1px solid #ccc;
  border-radius: 0.25em;
}

.pg_contract h1 {
  margin-top: 1em;
  margin-bottom: 2em;
  padding-bottom: 0.3em;
  font-size: 1.2em;
  color: #999;
  border-bottom: 1px solid #999;
  color: #999;
}

.pg_contract table {
  width: 100%;
  text-align: center;
}

.pg_contract table td {
  border-top: 1px solid #999;
  border-left: 1px solid #999;
  padding: 0.5em;
}

.pg_contract table td:FIRST-CHILD {
  border-left: 2px solid #666;
}

.pg_contract table tr:FIRST-CHILD td {
  border-top-color: #666;
  border-top-width: 2px;
}

.pg_contract table tr:LAST-CHILD td {
  border-bottom: 2px solid #666;
}

.pg_contract table td:LAST-CHILD {
  border-right: 2px solid #666;
}

.pg_contract .fill {
  color: #fff;
}

.pg_contract .contract {
  border-radius: 50%;
  width: 10em;
  height: 10em;
  vertical-align: middle;
  display: table-cell;
  text-align: center;
  font-size: 1.2em;
  white-space: pre;
}

.pg_contract .renewal {
  display: inline-block;
  text-align: center;
  margin-top: 0.5em;
}

.pg_contract .renewal small {
  font-size: 0.9em;
  color: #999;
}

.pg_contract .block {
  border: 1px solid #666;
  margin-top: 1.5em;
  font-size: 1.1em;
}

.pg_contract .block:FIRST-CHILD {
  margin-top: 1em;
}

.pg_contract .block h2 {
  text-align: center;
  font-weight: normal;
  font-size: 1em;
  color: #fff;
  line-height: 180%;
  vertical-align: middle;
}

.pg_contract .block div {
  text-align: center;
  color: #999;
  line-height: 200%;
  vertical-align: middle;
}

.pg_contract .block div span {
  color: #666;
}

.list img.thumbnail {
  width: 4em;
  height: 4em;
  margin-right: 0.5em;
  object-fit: cover;
  display: inline-block;
  vertical-align: middle;
}

.model_tags {
  margin-top: 30px;
}

.model_tags>section {
  margin-bottom: 20px;
}

.categories {
  margin-top: 30px;
}

.categories>section {
  margin-bottom: 20px;
}

.slide .videos article, .slide .model_videos article, .slide .contents article
  {
  margin: 1px 1px;
  margin-bottom: 1px;
}

.slide {
  position: relative;
  overflow: hidden;
}

.carousel {
  position: absolute;
  overflow: hidden;
  left: 25px;
  right: 25px;
  height: 100%;
  width: 100%;
}

.slideNavi {
  height: 100%;
}

.slideNavi span {
  position: absolute;
  height: 100%;
  width: 25px;
}

.slideNavi .slideNaviPrev {
  left: 0;
  border-radius: 4px 0 0 4px;
  background-image: url(/images/navi_prev.png);
}

.slideNavi .slideNaviNext {
  right: 0;
  border-radius: 0 4px 4px 0;
  background-image: url(/images/navi_next.png);
}

.slideNavi .slideNaviPrev, .slideNavi .slideNaviNext {
  background-repeat: no-repeat;
  background-position: 8px;
}

.slideNavi .slideNaviPrev.on, .slideNavi .slideNaviNext.on {
  cursor: pointer;
}

.slideInner {
  position: relative;
  margin: 0;
  padding: 0;
}

.slideInner article {
  float: left;
}

.slideInner article:AFTER {
  content: "";
  display: block;
}

.title {
  position: relative;
  border-bottom: 1px solid #999;
  margin-bottom: 0.5em;
}

.title>* {
  display: inline-block;
}

.title>*:NTH-CHILD(1) {
  position: relative;
  margin: 0;
}

.title>*:NTH-CHILD(2) {
  position: absolute;
  font-size: 0.8em;
  padding-right: 0.2em;
  right: 0;
  bottom: 0;
}

.title>nav>*:NOT(:FIRST-CHILD) {
  margin-left: 1em;
}

.contentsTitle {
  position: relative;
  border-bottom: 1px solid #999;
  margin-bottom: 0.5em;
  padding-right: 2em;
}

.contentsTitle>* {
  display: inline;
}

.contentsTitle>*:NTH-CHILD(1) {
  position: relative;
  margin: 0;
  padding-right: 0.5em;
}

.contentsTitle>*:NTH-CHILD(2) {
  vertical-align: middle;
  font-size: 0.8em;
  padding-right: 0.2em;
  right: 0;
  bottom: 0;
  white-space: nowrap;
}

.contentsNum {
  position: absolute;
  font-size: 0.8em;
  padding-right: 0.2em;
  right: 0;
  bottom: 0;
}

.modelVideoTitle {
  position: relative;
  border-bottom: 1px solid #999;
  margin-bottom: 0.5em;
  padding-right: 2em;
}

.modelVideoTitle>* {
  display: inline;
}

.modelVideoTitle>*:NTH-CHILD(1) {
  position: relative;
  margin: 0;
  padding-right: 0.5em;
}

.modelVideoTitle>*:NTH-CHILD(2) {
  vertical-align: middle;
  font-size: 0.8em;
  padding-right: 0.2em;
  right: 0;
  bottom: 0;
  white-space: nowrap;
}

.modelVideoNum {
  position: absolute;
  font-size: 0.8em;
  padding-right: 0.2em;
  right: 0;
  bottom: 0;
}

.showAll:HOVER {
  cursor: pointer;
}

.allVideos {
  position: static;
  overflow: unset;
  margin-left: 25px;
}

.allVideosSlide {
  overflow: unset;
}

.allVideosSlideNavi {
  display: none;
}

.pieChart {
  position: static;
  overflow: unset;
}

div.date dl * {
  display: list-item;
  list-style: none;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  line-height: 1.3em;
}

div.date dl>dt {
  display: inline-block;
  font-size: 0.8em;
  padding-right: 0.5em;
  vertical-align: middle;
}

div.date dl>dd {
  display: inline-block;
  font-size: 1em;
  padding-right: 1em;
  vertical-align: middle;
}

div.icon {
  position: relative;
}

div.icon>a>sup {
  position: absolute;
  color: #fff;
  background-color: #333;
  height: 1.5em;
  padding: 0.2em 0.4em;
  right: 0.5em;
  bottom: 0.5em;
  line-height: 1.5em;
  text-align: center;
  min-width: 1em;
}

.list_count {
  font-size: 0.8em;
  padding-top: 0.5em;
  width: 100%;
  text-align: right;
}

fieldset.tags label {
  display: inline-block;
  border: 1px solid #999;
  padding: 2px 12px;
  border-radius: 2px;
  font-size: 12px;
  line-height: 15px;
  background-color: #fff;
  margin: 3px;
}

fieldset.tags input:CHECKED+label, fieldset.tagsSD input:CHECKED+label.sel
  {
  background-color: #669;
  color: #fff;
}

fieldset.tags label:FIRST-CHILD {
  margin-left: 0;
}

fieldset.tags label:HOVER {
  cursor: pointer;
  background-color: #eee;
}

fieldset.tagsSD label:HOVER {
  cursor: pointer;
}

fieldset.tags label:BEFORE, fieldset.tags label:AFTER, fieldset.tagsSD label:BEFORE,
  fieldset.tagsSD label:AFTER {
  display: none;
}

fieldset.tags span:FIRST-CHILD {
  margin-left: 0px;
}

.modal div.modalUsers {
  margin-top: 15px;
  border-radius: 5px;
  border: 1px solid #ccc;
  margin-bottom:15px;
}

.modal ul.users {
  display: block;
  height: 150px;
  padding-bottom: 15px;
  overflow: scroll;
}

.modal ul.groups {
  display: block;
  height: 230px;
  overflow: scroll;
}

.modal ul.groups li {
  margin: 1em;
}

fieldset>ul.groups li {
  position: relative;
  padding: 15px 5px 0px;
}

ul.users li {
  position: relative;
  display: inline-block;
  text-align: center;
  padding: 15px 5px 0px;
  width: 60px;
  vertical-align: top;
}

ul.users li label {
  text-align: center;
  padding: 0px;
}

ul.users li span {
  display: block;
  overflow: hidden;
  font-size: 12px;
  width: 73px;
}

ul.users li input[type=checkbox]+label:BEFORE {
  top: -6px;
  left: 50px;
  background-color: #fff;
}

ul.users li input[type=checkbox]+label:AFTER {
  top: -10px;
  left: 49px;
}

ul.users li ul.role li {
  color: #fff;
  width: 1.5em;
  height: 1.5em;
  overflow: hidden;
  border-radius: 1em;
  border-radius: 1em;
}

.model_videos.modal ul {
  display: block;
  border-radius: 5px;
  border: 1px solid #ccc;
  overflow: scroll;
}

.model_videos.modal li label {
  padding: 0px;
}

.model_videos.modal li label:BEFORE {
  background-color: #fff;
}

ul.model_videos li {
  display: inline;
  box-sizing: content-box;
}

ul.model_videos:AFTER {
  content: "";
  display: block;
  clear: both;
  visibility: hidden;
}

ul.model_videos img {
  object-fit: cover;
  vertical-align: bottom;
}

ul.contents span {
  display: block;
  box-sizing: border-box;
  background-color: #666;
  color: #fff;
  overflow: hidden;
}

.contents.modal ul {
  display: block;
  border-radius: 5px;
  border: 1px solid #ccc;
  overflow: scroll;
}

.contents.modal li label {
  padding: 0px;
}

.contents.modal li label:BEFORE {
  background-color: #fff;
}

ul.contents li {
  display: inline;
  box-sizing: content-box;
}

ul.contents:AFTER {
  content: "";
  display: block;
  clear: both;
  visibility: hidden;
}

ul.contents img {
  object-fit: cover;
  vertical-align: bottom;
}

ul.contents span {
  display: block;
  box-sizing: border-box;
  background-color: #666;
  color: #fff;
  overflow: hidden;
}

.selectcheckall {
  white-space: nowrap;
}

fieldset.operation {
  padding: 0 1em;
}

legend+.selectcheckall {
  display: inline-block;
  width: 100%;
  margin-bottom: 1em;
  text-align: right;
}

.thumbnail_box {
  position: relative;
  overflow: hidden;
}

.thumbnail_box .ribbon {
  position: absolute;
  display: inline-block;
  transform: rotate(320deg);
  width: 10em;
  top: 1.25em;
  left: -2.75em;
  color: #fff;
  font-size: 0.5em;
  text-align: center;
  z-index: 1;
  border: solid 1px white;
}

.image_box {
  overflow: hidden;
}

.image_box .ribbon {
  position: absolute;
  display: inline-block;
  transform: rotate(320deg);
  width: 9.5em;
  top: 1.2em;
  left: -2.0em;
  color: #fff;
  text-align: center;
  z-index: 1;
  border: solid 1px white;
}

.thumbnail_box .ribbon strong {
  font-size: 2em;
  margin-right: 0.2em;
}

.thumbnail_box img {
  width: 7.1em;
  height: 4em;
  object-fit: cover;
}

.list.submissions td.thumbnail_box {
  width: 4em;
  height: 4em;
}

ul.role li {
  list-style-type: none;
  display: inline;
}

ul.role li:NOT(:LAST-CHILD):AFTER {
  content: "・";
}

ul.role_simple>li {
  list-style-type: none;
  display: inline-block;
  height: 1.5em;
  width: 1.5em;
  margin: 0;
  padding: 0;
  border-radius: 0.7em;
  color: #fff;
}

ul.role_simple li:NOT(:FIRST-CHILD) {
  margin-left: 0.3em;
}

table.list ul.role li {
  color: #aaa;
}

input[type="checkbox"]+label+input[type="email"] {
  margin-top: 0.5em;
}

.notice_with_email label {
  vertical-align: top;
}

.notice_with_email address {
  display: inline-block;
  word-break: break-all;
  white-space: normal;
  width: 70%;
  color: #999;
}

.notice_mark {
  background-image: url("/images/exclamation.png");
  background-position: 90%;
  background-size: 1.5em;
  background-repeat: no-repeat;
}

table.list td.notice_mark {
  background-position: 90% 10%;
}

table.user_list tr.disabled {
  color: #aaa;
  background-color: #f6f6f6;
}

h1.disabled, h2.disabled {
  color: #aaa;
}

article.disabled div.user {
  color: #aaa;
}

table.user_list .lock {
  position: relative;
}

table.user_list .lock label {
  color: red;
}

table.user_list .lock span.lock {
  position: absolute;
  display: inline-block;
  background-image: url(/images/icon_lock.png);
  background-repeat: no-repeat;
  background-position: left;
  background-size: 1em;
  left: 2.5em;
  top: -0.5em;
  height: 1.2em;
  width: 1.2em;
}

.situation {
  border-style: solid;
  border-color: #ccc;
  border-width: 1px;
  border-radius: 4px;
  background-color: #fff;
  padding: 1em;
  margin-top: 1em;
}

.situation>h1 {
  border-bottom: 2px solid #8dc3d8;
  font-size: 1em;
  font-weight: normal;
  color: #aaa;
  margin: 0;
}

.situation dl {
  margin: 0.5em 0
}

.situation dl dt, .situation dl dd {
  display: inline;
  color: #999;
}

.situation dl dt:NOT(:FIRST-CHILD) {
  margin-left: 2em;
}

.situation dl dt:AFTER {
  content: "：";
}

.situation dl dd:AFTER {
  content: " ID";
}

.situation table.breakdown {
  border-collapse: separate;
  overflow: hidden;
  box-sizing: border-box;
  border: 1px solid #999;
  width: 100%;
}

.situation table.breakdown tr {
  line-height: 2em;
}

.situation table.breakdown tbody tr td {
  border-bottom: 1px solid #ccc;
  text-align: center;
}

.situation table.breakdown tbody tr:LAST-CHILD td {
  border-bottom: none;
}

.situation table.breakdown tbody tr td:NTH-CHILD(1) {
  color: white;
}

.form_box {
  padding: 0.5em;
}

.form_box>*:NOT(:LAST-CHILD) {
  border-bottom: 1px solid #ccc;
}

.form_box>*:NTH-LAST-CHILD(2) {
  border-bottom: none;
}

.form_box .form-title {
  color: #fff;
  border-radius: 5px;
  margin-bottom: 1em;
  padding: 0.5em;
}

.form_box .form-header *:FIRST-CHILD>h1 {
  font-weight: bold;
}

.form_box .form-content {
  padding: 0.5em;
}

.form_box .form-content>span+span {
  margin-left: 1em;
}

.form_box .form-content strong {
  font-size: 150%;
  font-weight: bold;
  color: red;
  margin: 0 0.2em;
}

.form_box .form-thumbnail {
  padding: 0.5em;
}

.form_box .form-thumbnail>div {
  margin: 1em;
}

video.undownloadable::-internal-media-controls-download-button {
  display: none;
}

video.undownloadable::-webkit-media-controls-enclosure {
  overflow: hidden;
}

video.undownloadable::-webkit-media-controls-panel {
  width: calc(100% + 30px); /* Adjust as needed */
}

div.list_more_view {
  text-align: right;
  margin: 1em;
}

div.list_more_view_memo {
  text-align: center;
  margin: 0 1em;
  margin-left: -10em;
}

div.list_close_view {
  text-align: center;
  margin: 0 1em;
  margin-left: -10em;
}

.with_button {
  margin-bottom: 0.5em;
}

.with_button>*:NOT(button) {
  width: 88%;
  vertical-align: top;
}

.with_button>button {
  min-width: 3.1em;
  height: 3.1em;
  background-image: url(/images/icon_search.png);
  background-repeat: no-repeat;
  background-size: 1em;
  background-position: center;
  border: 1px solid #CCC;
}

section.modal .fixed {
  display: block;
  height: 300px;
  border: 1px solid #ccc;
  border-radius: 5px;
  overflow: scroll;
}

section.modal .fixed>h1 {
  font-size: 1em;
  font-weight: normal;
  margin: 0;
  padding: 0.5em;
  text-align: center;
  border-bottom: 1px solid #ccc;
}

section.modal .fixed div.text {
  text-align: center;
}

section.modal .fixed ul li {
  padding: 1em;
  word-wrap: break-word;
}

section.modal .fixed ul li {
  border-bottom: 1px solid #ccc;
}

section.modal .fixed ul li:HOVER {
  background-color: #fafaff;
  cursor: pointer;
}

section.modal .fixed ul li.on, section.modal .fixed ul li.on:HOVER {
  background-color: #fdd;
}

.play_control {
  width: 100%;
  text-align: center;
  margin-top: 1em;
  margin-bottom: 1em;
}

.play_control button {
  width: 30%;
  font-size: 0.8em;
  margin: 2px;
  padding: 0;
  white-space: normal;
}

.play_control button.shared_video {
  width: 23%;
  font-size: 0.8em;
  margin: 2px;
  padding: 0;
  white-space: normal;
}

.play_control button.selected {
  color: white;
}

.play_control button.shared_video {
  width: 23%;
  font-size: 0.8em;
  margin: 2px;
  padding: 0;
  white-space: normal;
}

#taskFileThumb {
  max-width: 200px;
  max-height: 200px;
}

#taskFileThumbnail img {
  max-width: 200px;
  max-height: 200px;
}

.playerContainer {
  position: relative;
  width: 100%;
}

.playerContainer:before {
  content: "";
  display: block;
  padding-top: 46%;
}

@media screen and (min-width: 600px){
  .mmhmm.playerContainer:before {
    padding-top: 71.1%;
  }
}

@media screen and (max-width: 600px){
  .mmhmm.playerContainer:before {
    padding-top: 83.8%;
  }
}

@media (max-width: 768px){
  #msticky {
    padding-top: 30px;
  }
  .fullscreen_control {
    display: none;
  }
}

.playerContainer.vertical:before {
  content: "";
  display: block;
  padding-top: 120%;
}

.model_tags_view {
  position: relative;
  width: 100%;
}

#ytp {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit:contain;
}

.model_videos article.view {
  float: none;
}

span.more {
  color: #0645ad;
  cursor: pointer;
}

div .score_item_submission {
  font-size: 1.2em;
  margin-top: 23px;
  margin-bottom: 10px;
  background-color:#eae8e6;
  color:#504e47;
  font-weight:bold; 
}

div .score_item_submission > span {
	margin-left:10px;
	margin-right: 10px;
	line-height:2em;
}

div .memo_warning_score {
  text-align:right;
}

.tanrenScoreDescription {
    font-size: 0.8em;
    margin-bottom: 1.5em;
    display: block;
    color: #999;
    word-break: break-all;
}

.term_select_button {
	line-height: inherit;
	cursor: pointer;
}

.term_select_button.selected {
    color: white;
    cursor: normal;
}

a.tanren_score_term:HOVER {
	text-decoration: none;
}

table.list th.avg {
  	text-align: right;
    padding-right: 1em;
}

body.content-print#rubricPrintPage {
  	padding: 1em 1em 1em 1em;
}

div.commentTabs {
	  width:20%;
    display: inline-block;
    padding: 0.5em; 
    border: 1px solid #ccc;
    border-radius: 4px 4px 0 0;
    background-color: white;
    text-align: center;
}

div.descTabs {
    width:10%;
    display: inline-block;
    padding: 0.5em; 
    border: 1px solid #ccc;
    border-radius: 4px 4px 0 0;
    background-color: white;
    text-align: center;
}

div.descTabs#pinwordAndComments {
    white-space: nowrap;
    width: 30%;
}

div.invisibleTabs {
    width:20%;
    display: inline-block;
    border-bottom: 1px solid #ccc;
}

.item_groups li#rubricArea:HOVER {
  background-color: transparent;
}

.linkText {
  margin-left:0.5em
  }

body.content-print#rubricPrintPage {
      padding: 1em 1em 1em 1em;
}

div.commentTabs {
      width:20%;
    display: inline-block;
    padding: 0.5em; 
    border: 1px solid #ccc;
    border-radius: 4px 4px 0 0;
    background-color: white;
    text-align: center;
}

div.descTabs {
    width:10%;
    display: inline-block;
    padding: 0.5em; 
    border: 1px solid #ccc;
    border-radius: 4px 4px 0 0;
    background-color: white;
    text-align: center;
}

div.descTabs#pinwordAndComments {
    white-space: nowrap;
    width: 30%;
}

div.invisibleTabs {
    width:20%;
    display: inline-block;
    border-bottom: 1px solid #ccc;
}

div.keyword  {
    margin-bottom: 5px;
    border: 1px solid #999;
    border-radius: 15px;
    padding: 0.3em 1em 0.3em 1em;
    display: inline-block;
    color: #222;
    cursor: default;
}

table tbody tr.videoLi {
    border-bottom:1px solid #ccc;
    border-right:1px solid #ccc;
    border-left:1px solid #ccc;
}

.bar.progress {
  overflow: hidden;
  max-width: 100%;
}

.bar.progress > * {
  box-sizing: border-box;
  float: left;
  height: 1em;
}

.bar.progress > .processed {
  background: #fccb90;
  border-radius: 9px 0 0 9px;
}

.bar.progress > .unprocessed {
  background: lightgray;
  border-left: 1px solid #fff;
  border-radius: 0 9px 9px 0;
}

.bar.progress > *:only-child {
  border-radius: 9px;
}
     
div.keyword.selected  {
	background-color:#fbdfbd;
}

#border {
  margin:0 0.5em 0 0.5em;;
  border-left: solid 1px #ccc;
  display: inline;
}

#likeButtonArea {
  display: inline;
  padding:0.5em 0.5em 0.5em 0.5em;
  border:1px solid transparent;
}

#likeButtonArea:hover {
  padding:0.5em 0.5em 0.5em 0.5em;
  border:1px solid #7CBB92;
  border-radius: 4px;
  cursor: default;
}

.fa-chevron-left.inactive, .fa-chevron-right.inactive,
.fa-search-minus.inactive, .fa-search-plus.inactive, .fa-undo-alt.inactive {
  color: #666;
}

#inquiry_button {
  width: 15em;
  font-size: 0.9em;
  border-radius: 2em;
  margin-left: 2em;
  margin-bottom: 2em;
  position: fixed;
  box-shadow: 6px 7px 10px 0px #a3a3a3;
  left: 0.3em;
  bottom: 0;
  cursor: pointer;
  background-color: #409f61;
  color: #fff;
  text-align: center;
  opacity: 0.7;
}
#inquiry_button:hover {
  opacity: 1.0;
}

.markdown * {
  padding: 0 !important;
  margin: 0 !important;
  white-space: pre-line !important;
}

.markdown p {
  padding-bottom: 0 !important;
  overflow-wrap: anywhere;
}
.markdown h1,.markdown h2,.markdown h3,.markdown h4,.markdown h5 {
  font-size: revert;
  margin: 0.5em 0 !important;
}
.markdown pre {
  padding: 1.5em 0.5rem !important;
  background-color: #364549;
  color: #e3e3e3;
  border-radius: 10px;
  white-space: pre-wrap;
}
.markdown pre > code {
  font-family: "Courier New",monospace;
}
.markdown > p > code {
  background-color: #ececec;
  border-radius: 5px;
}
.markdown em {
  font-style: oblique;
}
.markdown blockquote {
  border-left: 4px solid #d6dde3;
}
.markdown table {
  border-collapse: collapse;
}
.markdown table th {
  font-size: 0.9em;
  font-weight: bold;
}
.markdown table td, .markdown table tr, .markdown table th {
  border: 2px solid #d6dde3;
  padding: 0.5em !important;
}
.markdown ul, .markdown ol {
  white-space: normal !important;
  padding: 0 0 0 2em !important;
  margin-block: auto;
}
.markdown ul > li, .markdown ol > li {
  white-space: normal !important;
  margin: 0.5em 0 !important;
}
.markdown ul > li {
  list-style-type: disc;
}
.markdown ol > li {
  list-style-type: decimal;
}
.loader {
  border: 0.75em solid #f3f3f3;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  border-top: 0.75em solid #ccc;
  aspect-ratio: 1;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }}