@charset "UTF-8";
@keyframes quiz-result-appear {
  0% {
    height: 0;
  }
  100% {
    height: 60px;
  }
}
@-webkit-keyframes quiz-result-appear {
  0% {
    height: 0;
  }
  100% {
    height: 60px;
  }
}
@keyframes quiz-show-correct-button-appear {
  0% {
    top: 0;
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  100% {
    top: -70px;
    opacity: 1;
  }
}
@-webkit-keyframes quiz-show-correct-button-appear {
  0% {
    top: 0;
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  100% {
    top: -70px;
    opacity: 1;
  }
}
.structure-body:after, #site-header .header-main:after, #site-header .menu:after, .panel-header:after,
.panel-body:after, .sub-panel-header:after,
.sub-panel-body:after, .timeline-card:after, .comment-detail .comment-summary:after, .comment-detail .comment-comment .comment:after, .announce-list .announce:after, .timeline-card .function ul:after, .comment-detail .comment-summary .function ul:after, .comment-detail .comment-comment .comment .function ul:after, .announce-list .announce .function ul:after, .timeline-point .point-detail:after, .section-info .progress dd:after, .card-detail .card-detail-header:after, .card-detail .card-detail-header .functions > li .comment-list .comment-list-body .comment:after, .card-detail .card-detail-header .functions > li .comment-list .comment-list-body .comment .function ul:after, .card-detail .card-detail-header .functions > li .comment-list .comment-list-footer:after, .card-detail .card-detail-body .module-quiz .quiz-reorder .placeholders:after, .card-detail .card-detail-body .module-quiz .quiz-reorder .options:after, .library .panel-title:after, .course-summary-list:after, .last-course .progress:after, .share-panel .sub-panel-header:after, .share-panel .sub-panel-body:after, .badge-list:after, .continuous-status .summary:after, .like-list-frame .like-detail:after {
  content: "";
  clear: both;
  display: block;
}

#site-header .user-name:after, #site-header .help > a:after, #site-header .menu .start > a:after, #site-header .float-menu .link-list > li > a:after {
  font-family: FontAwesome;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#site-header .user-name:after, #site-header .help > a:after, #site-header .menu .start > a:after {
  content: "\f078";
  margin-left: 4px;
}

#site-header .user-icon {
  position: relative;
  overflow: hidden;
}
#site-header .user-icon img {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  max-width: 100%;
  height: auto;
}

.login-form input[type="text"],
.login-form input[type="email"],
.login-form input[type="password"] {
  display: block;
  box-sizing: content-box;
  width: 100%;
  padding: 3px 10px;
  border: 0 none;
  border-bottom: 1px solid #d8d8d8;
  background: transparent;
  color: #000;
  font-size: 100%;
  line-height: 1.5;
  -webkit-appearance: none;
}
.login-form input[type="text"]::-webkit-input-placeholder,
.login-form input[type="email"]::-webkit-input-placeholder,
.login-form input[type="password"]::-webkit-input-placeholder {
  color: #979797;
}
.login-form input[type="text"]::-moz-input-placeholder,
.login-form input[type="email"]::-moz-input-placeholder,
.login-form input[type="password"]::-moz-input-placeholder {
  color: #979797;
}
.login-form input[type="text"]:-ms-input-placeholder,
.login-form input[type="email"]:-ms-input-placeholder,
.login-form input[type="password"]:-ms-input-placeholder {
  color: #979797;
}
.login-form input[type="text"]::input-placeholder,
.login-form input[type="email"]::input-placeholder,
.login-form input[type="password"]::input-placeholder {
  color: #979797;
}
.login-form input[type="text"]:input-placeholder,
.login-form input[type="email"]:input-placeholder,
.login-form input[type="password"]:input-placeholder {
  color: #979797;
}

button,
input[type="submit"],
input[type="button"], .section-detail .button {
  display: block;
  box-sizing: content-box;
  width: 100%;
  margin: 0;
  padding: 10px;
  border: 0 none;
  border-radius: 1px;
  background: #bc0808;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.12) inset;
  text-align: center;
  font-size: 12px;
  line-height: 1.5;
  cursor: pointer;
  -webkit-appearance: none;
}
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover, .section-detail .button:hover {
  opacity: 0.6;
}

.card-detail .card-detail-body.correct:before, .card-detail .card-detail-body.incorrect:before, .card-detail .card-detail-body .module.report-submitted:before {
  display: block;
  height: 60px;
  overflow: hidden;
  color: #fff;
  margin: -20px -20px 20px;
  padding: 0 65px;
  font-size: 23px;
  line-height: 60px;
  -webkit-animation: quiz-result-appear 0.4s ease-in-out 0 1 normal;
  animation: quiz-result-appear 0.4s ease-in-out 0 1 normal;
}

@font-face {
  font-family: "Goocus3";
  src: local(Helvetica), local("Hiragino Kaku Gothic Pro"), local("Meiryo"), local("YuGothic"), local("Yu Gothic");
}
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #f0f0f0;
  color: #000;
  font-family: Goocus3, sans-serif;
}

header,
footer,
main,
article,
section,
nav,
figure,
figcaption,
fieldset {
  display: block;
  margin: 0;
  padding: 0;
  border: 0 none;
}

legend {
  display: none;
}

img {
  border: 0 none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
  font-size: 100%;
  font-weight: normal;
}

input,
label {
  cursor: pointer;
}

.structure {
  min-width: 980px;
}

#site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: #fff;
  color: #868686;
  font-size: 11px;
  z-index: 10;
}
#site-header a {
  color: inherit;
  text-decoration: none;
}
#site-header .header-main {
  border-bottom: 1px solid #d8d8d8;
}
#site-header .app-name {
  float: left;
  margin: 0 0 0 20px;
  height: 60px;
}
#site-header .app-name img {
  vertical-align: top;
  padding: 18px 0 16px;
  width: 112px;
}
#site-header .utility {
  display: none;
  float: right;
  margin: 0 20px 0 0;
  padding: 13px 0 0;
  line-height: 37px;
}
#site-header .notify,
#site-header .user,
#site-header .help {
  float: left;
  margin: 0 0 0 20px;
  padding: 0 0 0 20px;
  border-left: 2px solid #d8d8d8;
}
#site-header .notify {
  margin-left: 0;
  padding-left: 0;
  border-left: 0 none;
}
#site-header .notify > a {
  text-decoration: none;
  color: #979797;
  font-size: 24px;
}
#site-header .notify .count {
  display: inline-block;
  padding: 0 5px;
  border-radius: 7px;
  background: #d0021b;
  color: #fff;
  font-size: 10px;
  line-height: 14px;
  vertical-align: text-top;
}
#site-header .notify .count.empty {
  display: none;
}
#site-header .user-icon {
  display: inline-block;
  vertical-align: middle;
  border-radius: 50%;
  width: 37px;
  height: 37px;
}
#site-header .user-name {
  display: inline-block;
  margin: 0 0 0 15px;
  vertical-align: middle;
}
#site-header .menu {
  display: none;
  clear: both;
  padding: 0 20px;
  background: #3c3c3c;
  color: #fff;
  font-size: 20px;
  line-height: 58px;
}
#site-header .menu > ul {
  float: left;
  margin: 0;
  padding: 0;
  list-style-type: none;
}
#site-header .menu > ul a {
  display: block;
  padding: 0 10px;
  text-decoration: none;
  opacity: 0.6;
}
#site-header .menu > ul a:hover {
  background: #f0f0f0;
  color: #3c3c3c;
}
#site-header .menu > ul a.current {
  background: #f0f0f0;
  color: #3c3c3c;
  opacity: 1;
}
#site-header .menu > ul li {
  float: left;
}
#site-header .menu .start {
  float: right;
}
#site-header .menu .start > a {
  display: block;
  margin: 14px 0 0;
  padding: 0 8px 0 17px;
  border-radius: 1px;
  background: #d0021b;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.12) inset;
  font-size: 15px;
  line-height: 30px;
}
#site-header .menu .start > a:hover {
  opacity: 0.6;
}
#site-header .menu .start .float-menu-child {
  right: -4px;
  margin-top: 6px;
}
#site-header .float-menu {
  position: relative;
}
#site-header .float-menu.pseudo-opened {
  z-index: 1;
}
#site-header .float-menu.pseudo-opened .float-menu-child {
  display: block;
}
#site-header .float-menu .float-menu-child {
  display: none;
  position: absolute;
  right: -14px;
  top: 100%;
  width: 260px;
  border-radius: 6px;
  background: #fff;
  box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.24);
  font-size: 10px;
  line-height: 15px;
}
#site-header .float-menu .float-menu-child:after {
  content: "";
  position: absolute;
  right: 12px;
  top: -12px;
  width: 0;
  height: 0;
  border: 8px solid transparent;
  border-top: 0 none;
  border-bottom: 12px solid #f0f0f0;
}
#site-header .float-menu .float-menu-header {
  padding: 5px 15px;
  border-bottom: 1px solid #979797;
  border-radius: 6px 6px 0 0;
  background: #f0f0f0;
  color: #979797;
  font-size: 11px;
}
#site-header .float-menu .float-menu-body {
  padding: 0;
  overflow: hidden;
}
#site-header .float-menu .float-menu-footer {
  padding: 0 15px;
  text-align: right;
  min-height: 20px;
  font-size: 10px;
  line-height: 20px;
  border-top: 1px solid #d8d8d8;
}
#site-header .float-menu .announce-list > li {
  margin: 0;
  border-top: 1px solid #D8D8D8;
}
#site-header .float-menu .announce-list > li:first-child {
  border-top: 0 none;
}
#site-header .float-menu .announce-list .announce {
  margin: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
#site-header .float-menu .announce-list .announce .posted-by {
  padding: 10px;
  width: 46px;
}
#site-header .float-menu .announce-list .announce .posted-by .icon {
  width: 44px;
  height: 44px;
}
#site-header .float-menu .announce-list .announce .content {
  padding: 10px 10px 10px 66px;
  font-size: 10px;
}
#site-header .float-menu .announce-list .announce .content p {
  font-size: 9px;
  overflow: hidden;
  text-overflow: ellipsis;
}
#site-header .float-menu .link-list {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
#site-header .float-menu .link-list > li {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #d8d8d8;
}
#site-header .float-menu .link-list > li:last-child {
  border-bottom: 0 none;
}
#site-header .float-menu .link-list > li > a {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-box;
  display: -o-box;
  display: box;
  -webkit-box-align: center;
  -moz-box-align: center;
  box-align: center;
  padding: 4px 45px 4px 15px;
  color: #bc0808;
  min-height: 30px;
}
#site-header .float-menu .link-list > li > a.shortcut {
  color: inherit;
}
#site-header .float-menu .link-list > li > a:after {
  content: "\f105";
  position: absolute;
  top: 50%;
  right: 15px;
  margin: -10px 0;
  font-size: 20px;
  line-height: 20px;
  color: #868686;
}

#contents {
  padding-top: 61px;
  min-height: calc(100% - 200px);
  overflow: auto;
}
#contents .structure-body {
  margin: 0 auto;
  padding: 20px 0 80px;
  width: 940px;
}
#contents .col-main {
  float: left;
  width: 620px;
}
#contents .col-subinfo {
  float: right;
  width: 300px;
}

.authored #site-header .utility,
.authored #site-header .menu {
  display: block;
}
.authored #contents {
  padding-top: 119px;
}

#site-footer {
  background: #3c3c3c;
  height: 200px;
  color: #fff;
  z-index: 10;
}
#site-footer .structure-body {
  padding: 20px;
}
#site-footer .copyright {
  margin: 0;
  padding: 0;
}

[data-site] {
  display: none !important;
}

[data-site="web"] {
  display: block !important;
}

.web_ares [data-site="web"] {
  display: none !important;
}
.web_ares [data-site="web_ares"] {
  display: block !important;
}
.web_ares #site-header {
  padding: 10px 40px 8px;
  border-bottom: 8px solid #21467a;
}
.web_ares #site-header .app-name {
  margin: 0;
  height: auto;
}
.web_ares #site-header .app-name img {
  padding: 0;
  width: 340px;
}
.web_ares #contents .page-card .col-main {
  float: right;
}
.web_ares #contents .page-card .col-subinfo {
  float: left;
}
.web_ares #contents .card-detail .card-detail-header .functions {
  display: none;
}
.web_ares #contents .section-complete {
  background-color: #a6a6a6;
}
.web_ares #contents .section-complete + .panel-body,
.web_ares #contents .section-complete + .panel-body + .panel-footer {
  display: none;
}
.web_ares #contents .last-course-placeholder {
  display: none;
}
.web_ares #site-footer {
  height: auto;
}
.web_ares #site-footer .structure-body {
  padding: 25px 40px 27px;
  background: #21467a;
  color: #fff;
  text-align: right;
}
.web_ares #site-footer .structure-body p {
  margin: 0;
  padding: 0;
}
.web_ares #site-footer .structure-body p img {
  display: block;
  margin: 0 0 0 auto;
}

@media (max-width: 980px) {
  .web_ares .structure {
    min-width: 0;
  }
  .web_ares #contents {
    padding-top: 90px;
  }
  .web_ares #contents .structure-body {
    margin-left: 10px;
    margin-right: 10px;
    width: auto;
  }
  .web_ares #contents .col-main,
  .web_ares #contents .col-subinfo,
  .web_ares #contents .page-card .col-main,
  .web_ares #contents .page-card .col-subinfo {
    float: none;
    width: auto;
    margin-left: auto;
    margin-right: auto;
    max-width: 620px;
  }
  .web_ares #contents .col-subinfo,
  .web_ares #contents .page-card .col-subinfo {
    margin-top: 40px;
  }
  .web_ares #contents .section-info .progress dd .number,
  .web_ares #contents .page-card .section-info .progress dd .number {
    float: none;
  }
  .web_ares #contents .section-info .progress dd .indicator,
  .web_ares #contents .page-card .section-info .progress dd .indicator {
    float: none;
    width: auto;
  }
}
* {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQIW2NkAAIAAAoAAggA9GkAAAAASUVORK5CYII=);
}

.loading {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  border-radius: 3px;
  width: 48px;
  height: 48px;
  background: #444;
  color: #fff;
  font-size: 32px;
  line-height: 48px;
  text-align: center;
  z-index: 1000;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);
  opacity: 0;
}

.login-form {
  margin: 0 auto;
  padding: 43px 80px 47px;
  width: 280px;
  border-radius: 3px;
  background: #fff;
  box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.5);
}
.login-form .app-name {
  text-align: center;
}
.login-form .fields {
  margin: 49px 0 0;
  padding: 0;
  font-size: 12px;
  line-height: 1.5;
}
.login-form .fields dt {
  display: none;
}
.login-form .fields dd {
  margin: 18px 0 0;
  padding: 0;
}
.login-form .fields .help {
  margin: 3px 10px 0;
  font-size: 9px;
}
.login-form .fields .help a {
  color: #bc0808;
  text-decoration: none;
}
.login-form .form-action {
  margin: 40px 0 0;
}

.panel {
  border: 1px solid #979797;
  background: #fafafa;
  background: rgba(255, 255, 255, 0.8);
}
.panel + .panel {
  margin-top: 20px;
}

.panel-header {
  padding: 14px 20px;
  font-size: 15px;
  line-height: 20px;
  border-bottom: 1px solid #979797;
  background: #d8d8d8;
  color: #4a4a4a;
}
.panel-header .back {
  color: inherit;
  text-decoration: none;
}

.panel-body {
  padding: 39px 34px;
}

.panel-title {
  margin: 0;
  padding: 0;
}

.panel-footer .button {
  display: block;
  box-sizing: content-box;
  margin: 0;
  padding: 9px;
  border: 0 none;
  background: #d0021b;
  color: #fff;
  text-align: center;
  text-decoration: none;
  font-size: 26px;
  line-height: 1.5;
  cursor: pointer;
  -webkit-appearance: none;
}
.panel-footer .button:hover {
  opacity: 0.6;
}

.sub-panel, .announce-list .announce {
  margin: 20px 0 0;
  border-radius: 3px;
  background: #f0f0f0;
  background: rgba(255, 255, 255, 0.8);
  color: #000;
  box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.24);
}
.sub-panel:first-child, .announce-list .announce:first-child {
  margin-top: 0;
}

.sub-panel-header {
  padding: 14px 20px;
  font-size: 15px;
  line-height: 20px;
  border-bottom: 1px solid #979797;
  background: #f0f0f0;
}
.sub-panel-header .sub-panel-title {
  float: left;
}
.sub-panel-header .sub-panel-function {
  float: right;
}
.sub-panel-header .sub-panel-function img {
  display: block;
}

.sub-panel-body + .sub-panel-body {
  border-top: 1px solid #D8D8D8;
}

.sub-panel-title {
  margin: 0;
  padding: 0;
}

.timeline-placeholder {
  margin-top: 20px;
}
.timeline-placeholder:first-child {
  margin-top: 0;
}

.timeline-card a, .comment-detail .comment-summary a, .comment-detail .comment-comment .comment a, .announce-list .announce a {
  text-decoration: none;
  color: inherit;
}
.timeline-card > a, .comment-detail .comment-summary > a, .comment-detail .comment-comment .comment > a, .announce-list .announce > a {
  display: block;
}
.timeline-card .posted-by, .comment-detail .comment-summary .posted-by, .comment-detail .comment-comment .comment .posted-by, .announce-list .announce .posted-by {
  float: left;
  padding: 30px;
  width: 90px;
  font-size: 10px;
  line-height: 1.5;
  text-align: center;
}
.timeline-card .posted-by .icon, .comment-detail .comment-summary .posted-by .icon, .comment-detail .comment-comment .comment .posted-by .icon, .announce-list .announce .posted-by .icon {
  position: relative;
  width: 88px;
  height: 88px;
  border: 1px solid #979797;
  border-radius: 50%;
  overflow: hidden;
}
.timeline-card .posted-by .icon img, .comment-detail .comment-summary .posted-by .icon img, .comment-detail .comment-comment .comment .posted-by .icon img, .announce-list .announce .posted-by .icon img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
}
.timeline-card .posted-by .author, .comment-detail .comment-summary .posted-by .author, .comment-detail .comment-comment .comment .posted-by .author, .announce-list .announce .posted-by .author {
  margin: 4px 0 0;
  padding: 0;
  font-size: 14px;
  line-height: 1.5;
  opacity: 0.5;
}
.timeline-card .posted-by .icon + .posted-at, .comment-detail .comment-summary .posted-by .icon + .posted-at, .comment-detail .comment-comment .comment .posted-by .icon + .posted-at, .announce-list .announce .posted-by .icon + .posted-at {
  margin-top: 4px;
}
.timeline-card .content, .comment-detail .comment-summary .content, .comment-detail .comment-comment .comment .content, .announce-list .announce .content {
  padding: 30px 30px 30px 146px;
  font-size: 18px;
  line-height: 1.5;
}
.timeline-card .content .posted-at, .comment-detail .comment-summary .content .posted-at, .comment-detail .comment-comment .comment .content .posted-at, .announce-list .announce .content .posted-at {
  display: block;
  margin: 0 0 4px;
  padding: 0;
  font-size: 14px;
  line-height: 1.5;
  opacity: 0.5;
}
.timeline-card .content p, .comment-detail .comment-summary .content p, .comment-detail .comment-comment .comment .content p, .announce-list .announce .content p {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.5;
  opacity: 0.6;
}
.timeline-card .function, .comment-detail .comment-summary .function, .comment-detail .comment-comment .comment .function, .announce-list .announce .function {
  padding: 0 30px 30px 146px;
}
.timeline-card .function ul, .comment-detail .comment-summary .function ul, .comment-detail .comment-comment .comment .function ul, .announce-list .announce .function ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.timeline-card .function ul li, .comment-detail .comment-summary .function ul li, .comment-detail .comment-comment .comment .function ul li, .announce-list .announce .function ul li {
  color: rgba(0, 0, 0, 0.47);
}
.timeline-card .function ul .like, .comment-detail .comment-summary .function ul .like, .comment-detail .comment-comment .comment .function ul .like, .announce-list .announce .function ul .like {
  float: left;
}
.timeline-card .function ul .like.done, .comment-detail .comment-summary .function ul .like.done, .comment-detail .comment-comment .comment .function ul .like.done, .announce-list .announce .function ul .like.done {
  color: #BC0808;
}
.timeline-card .function ul .comment, .comment-detail .comment-summary .function ul .comment, .comment-detail .comment-comment .comment .function ul .comment, .announce-list .announce .function ul .comment,
.timeline-card .function ul .link,
.comment-detail .comment-summary .function ul .link,
.comment-detail .comment-comment .comment .function ul .link,
.announce-list .announce .function ul .link {
  float: right;
}
.timeline-card .card-info, .comment-detail .comment-summary .card-info, .comment-detail .comment-comment .comment .card-info, .announce-list .announce .card-info {
  border-top: 1px solid #979797;
}
.timeline-card .card-info a, .comment-detail .comment-summary .card-info a, .comment-detail .comment-comment .comment .card-info a, .announce-list .announce .card-info a {
  display: block;
  position: relative;
  display: block;
  padding: 0 40px 0 122px;
  height: 140px;
  text-decoration: none;
  color: inherit;
}
.timeline-card .card-info .title, .comment-detail .comment-summary .card-info .title, .comment-detail .comment-comment .comment .card-info .title, .announce-list .announce .card-info .title {
  margin: 0;
  padding: 0;
  font-weight: normal;
  font-size: 125%;
  line-height: 1.5;
}
.timeline-card .card-info .description, .comment-detail .comment-summary .card-info .description, .comment-detail .comment-comment .comment .card-info .description, .announce-list .announce .card-info .description {
  margin: 0;
  padding: 0;
  font-size: 75%;
  line-height: 1.5;
  opacity: 0.6;
}
.timeline-card .card-info .image, .comment-detail .comment-summary .card-info .image, .comment-detail .comment-comment .comment .card-info .image, .announce-list .announce .card-info .image {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 102px;
  background: #4a4a4a;
}
.timeline-card .card-info .image .photo, .comment-detail .comment-summary .card-info .image .photo, .comment-detail .comment-comment .comment .card-info .image .photo, .announce-list .announce .card-info .image .photo {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  width: 102px;
}
.timeline-card .card-info .image .icon, .comment-detail .comment-summary .card-info .image .icon, .comment-detail .comment-comment .comment .card-info .image .icon, .announce-list .announce .card-info .image .icon {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

.timeline-recent .posted-by .icon {
  border: 0 none;
  border-radius: 0;
  width: 100px;
  height: 100px;
}
.timeline-recent .function {
  padding-bottom: 0;
}

.timeline-post, .timeline-card-comment {
  cursor: pointer;
}
.timeline-post .posted-by, .timeline-card-comment .posted-by {
  padding-bottom: 4px;
}
.timeline-post .content, .timeline-card-comment .content {
  padding-bottom: 26px;
}

.timeline-badge .posted-by {
  padding-bottom: 4px;
}
.timeline-badge .posted-by .icon {
  border-color: transparent;
}
.timeline-badge .content {
  padding-bottom: 26px;
}

.timeline-point {
  position: relative;
}
.timeline-point .point-status {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto 0;
  width: 150px;
  height: 105px;
  color: #F9AF47;
  font-size: 15px;
  line-height: 1.5;
  text-align: center;
}
.timeline-point .point-status .value {
  display: block;
  font-size: 63px;
  line-height: 75px;
}
.timeline-point .point-status .action {
  display: block;
  margin: 8px 0 0;
}
.timeline-point .point-detail {
  margin: 0 0 0;
  padding: 0;
}
.timeline-point .point-detail dt {
  clear: both;
  float: left;
  margin: 0;
  padding: 0;
}
.timeline-point .point-detail dd {
  float: right;
  margin: 0;
  padding: 0;
  color: #F9AF47;
}

.sub-panel.timeline-review, .announce-list .timeline-review.announce {
  display: none;
}

.section-info {
  position: relative;
  padding: 8px 20px 11px;
  background: #3c3c3c;
  color: #fff;
  box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.24);
}
.section-info .course-info {
  font-size: 19px;
  line-height: 27px;
}
.section-info .section-title {
  font-size: 9px;
  line-height: 17px;
}
.section-info .progress {
  margin: 0;
  padding: 0;
  font-size: 9px;
  line-height: 13px;
}
.section-info .progress dt {
  display: none;
}
.section-info .progress dd {
  margin: 2px 0 0;
  padding: 0;
}
.section-info .progress dd .number {
  float: left;
}
.section-info .progress dd .indicator {
  float: right;
  margin: 5px 0 0;
  width: 534px;
  height: 4px;
  border-radius: 4px;
  background: #fafafa;
}
.section-info .progress dd .indicator .bar {
  width: 0%;
  height: 4px;
  border-radius: 4px;
  background: #4a90e2;
}
.section-info.section-testset {
  background-color: #F02828;
}
.section-info.section-testset .remain {
  position: absolute;
  top: 15px;
  left: 250px;
  right: 250px;
  text-align: center;
  margin: 0;
  padding: 0;
  font-size: 13px;
  line-height: 20px;
}
.section-info.section-testset .step {
  position: absolute;
  top: 10px;
  right: 20px;
  margin: 0;
  padding: 0 10px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 27px;
  background: rgba(0, 0, 0, 0.3);
}

.card-button {
  position: relative;
  margin: 10px 10px 0;
  transition: margin 0.2s ease-in-out;
}
.card-button.disabled {
  visibility: hidden;
}
.card-button + .card-detail {
  margin-top: -30px;
  transition: margin 0.2s ease-in-out;
}
.card-button:hover {
  margin-left: 0;
  margin-right: 0;
}
.card-button:hover + .card-detail {
  margin-top: 10px;
}
.card-button .card-button-body {
  display: block;
  padding: 7px 20px 5px;
  background: #fff;
  color: #979797;
  border-radius: 8px;
  box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.24);
  text-decoration: none;
}
.card-button .card-button-body .label {
  font-size: 11px;
  line-height: 17px;
}
.card-button .card-button-body .previous-title,
.card-button .card-button-body .next-title {
  font-weight: bold;
  font-size: 18px;
  line-height: 28px;
}

.card-detail {
  position: relative;
  z-index: 1;
  margin: 10px 0 0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.24);
}
.card-detail + .card-button {
  margin-top: -30px;
}
.card-detail + .card-button:hover {
  margin-top: 10px;
}
.card-detail .card-detail-header {
  padding: 5px 20px;
  border-bottom: 1px solid #d8d8d8;
}
.card-detail .card-detail-header .title {
  float: left;
  font-weight: bold;
  font-size: 18px;
  line-height: 28px;
}
.card-detail .card-detail-header .functions {
  float: right;
  margin: 0;
  padding: 2px 0 0;
  list-style-type: none;
}
.card-detail .card-detail-header .functions > li {
  float: left;
  position: relative;
  margin: 0 0 0 20px;
}
.card-detail .card-detail-header .functions > li a,
.card-detail .card-detail-header .functions > li img {
  display: block;
}
.card-detail .card-detail-header .functions > li > .comment {
  padding: 2px 0 0;
  background: url(../../img/common/icon_comment.png) 0 0 no-repeat;
}
.card-detail .card-detail-header .functions > li > .comment img {
  visibility: hidden;
}
.card-detail .card-detail-header .functions > li > .comment.active {
  background-image: url(../../img/common/icon_comment_a.png);
}
.card-detail .card-detail-header .functions > li > .comment.active + .comment-list {
  display: block;
}
.card-detail .card-detail-header .functions > li .comment-list {
  display: none;
  position: absolute;
  top: 0;
  right: -342px;
  width: 300px;
  background: #fff;
  border-radius: 3px;
  box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.24);
}
.card-detail .card-detail-header .functions > li .comment-list .comment-list-header {
  position: relative;
  padding: 10px;
  font-size: 12px;
  line-height: 18px;
  color: #979797;
}
.card-detail .card-detail-header .functions > li .comment-list .comment-list-header:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -10px;
  margin: auto;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-right: 10px solid #fff;
  border-bottom: 5px solid transparent;
}
.card-detail .card-detail-header .functions > li .comment-list .comment-list-body {
  overflow: auto;
  max-height: 300px;
}
.card-detail .card-detail-header .functions > li .comment-list .comment-list-body .comment {
  position: relative;
  padding: 13px;
  border-top: 1px solid #D8D8D8;
  font-size: 10px;
  line-height: 15px;
}
.card-detail .card-detail-header .functions > li .comment-list .comment-list-body .comment .pubdate {
  position: absolute;
  right: 13px;
  bottom: 13px;
  margin: 0;
  padding: 0;
  color: #979797;
}
.card-detail .card-detail-header .functions > li .comment-list .comment-list-body .comment .posted-by {
  float: left;
  width: 38px;
  font-size: 9px;
}
.card-detail .card-detail-header .functions > li .comment-list .comment-list-body .comment .posted-by .icon {
  position: relative;
  width: 38px;
  height: 38px;
  overflow: hidden;
  border-radius: 50%;
}
.card-detail .card-detail-header .functions > li .comment-list .comment-list-body .comment .posted-by .icon img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: auto;
}
.card-detail .card-detail-header .functions > li .comment-list .comment-list-body .comment .posted-by .author {
  margin: 5px 0 0;
  min-height: 0;
  text-align: center;
}
.card-detail .card-detail-header .functions > li .comment-list .comment-list-body .comment .content {
  margin-left: 50px;
  padding-bottom: 15px;
}
.card-detail .card-detail-header .functions > li .comment-list .comment-list-body .comment .content h1 {
  margin: 0;
  padding: 0;
}
.card-detail .card-detail-header .functions > li .comment-list .comment-list-body .comment .function {
  position: absolute;
  left: 63px;
  bottom: 13px;
  color: #979797;
}
.card-detail .card-detail-header .functions > li .comment-list .comment-list-body .comment .function ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.card-detail .card-detail-header .functions > li .comment-list .comment-list-body .comment .function ul > li {
  float: left;
  margin: 0 0 0 10px;
}
.card-detail .card-detail-header .functions > li .comment-list .comment-list-body .comment .function ul > li:first-child {
  margin-left: 0;
}
.card-detail .card-detail-header .functions > li .comment-list .comment-list-body .comment .function ul .like.done {
  color: #BC0808;
}
.card-detail .card-detail-header .functions > li .comment-list .comment-list-body .comment .function ul a {
  color: inherit;
  text-decoration: none;
}
.card-detail .card-detail-header .functions > li .comment-list .comment-list-body .read-more {
  border-top: 1px solid #D8D8D8;
  padding: 4px;
  text-align: center;
  color: #979797;
  font-size: 10px;
  cursor: pointer;
}
.card-detail .card-detail-header .functions > li .comment-list .comment-list-footer {
  position: relative;
  padding: 7px 13px;
  background: #F6F6F6;
}
.card-detail .card-detail-header .functions > li .comment-list .comment-list-footer .icon {
  float: left;
  position: relative;
  width: 38px;
  height: 38px;
  border: 1px solid #D8D8D8;
  border-radius: 50%;
  overflow: hidden;
}
.card-detail .card-detail-header .functions > li .comment-list .comment-list-footer .icon img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 38px;
}
.card-detail .card-detail-header .functions > li .comment-list .comment-list-footer input[type="text"] {
  float: right;
  margin: 5px 0 0;
  padding: 8px 30px 8px 8px;
  width: 228px;
  height: 28px;
  border: 1px solid #D8D8D8;
  box-sizing: border-box;
  background: #fff;
  font-size: 10px;
  line-height: 1.2;
}
.card-detail .card-detail-header .functions > li .comment-list .comment-list-footer input[type="submit"] {
  position: absolute;
  right: 13px;
  top: 0;
  bottom: 0;
  margin: auto;
  padding: 0 4px;
  width: auto;
  height: 17px;
  background: transparent;
  color: #D0021B;
  border: 0 none;
  border-left: 1px solid #D8D8D8;
  box-shadow: none;
}
.card-detail .card-detail-header .functions > li .clip {
  width: 25px;
  height: 25px;
  background: url(../../img/common/icon_star.png) 0 0 no-repeat;
}
.card-detail .card-detail-header .functions > li .clip img {
  visibility: hidden;
}
.card-detail .card-detail-header .functions > li .clip.done {
  background-image: url(../../img/common/icon_star_a.png);
}
.card-detail .card-detail-body {
  padding: 20px 20px;
  font-size: 18px;
  line-height: 28px;
}
.card-detail .card-detail-body.correct:before {
  content: "正解";
  background: #4A90E2 url(../../img/common/face-correct.png) 16px 50% no-repeat;
}
.card-detail .card-detail-body.incorrect:before {
  content: "不正解";
  background: #FF9797 url(../../img/common/face-incorrect.png) 16px 50% no-repeat;
}
.card-detail .card-detail-body > :first-child {
  margin-top: 0;
}
.card-detail .card-detail-body p {
  margin: 1em 0 0;
  padding: 0;
}
.card-detail .card-detail-body #text_module {
  margin: 20px 0 0;
  font-size: 15px;
}
.card-detail .card-detail-body #text_module > :first-child {
  margin-top: 0;
}
.card-detail .card-detail-body .enquete-header {
  margin: 0 -30px;
  padding: 5px 26px 8px 76px;
  background: #979797 url(../../img/common/icon_check.png) 26px 50% no-repeat;
  color: #fff;
}
.card-detail .card-detail-body .enquete-header:first-child {
  margin-top: -21px;
}
.card-detail .card-detail-body .enquete-header h2 {
  margin: 0;
  padding: 0;
  font-size: 20px;
  line-height: 24px;
}
.card-detail .card-detail-body .enquete-header p {
  margin: 0;
  padding: 0;
  font-size: 11px;
  line-height: 15px;
}
.card-detail .card-detail-body .module {
  position: relative;
}
.card-detail .card-detail-body .module.report-submitted:before {
  content: "採点中";
  background: #4A90E2 url(../../img/common/face-correct.png) 16px 50% no-repeat;
}
.card-detail .card-detail-body .module.quiz-results .button-show-correct {
  display: block;
  -webkit-animation: quiz-show-correct-button-appear 0.4s ease-in-out 0 1 normal;
  animation: quiz-show-correct-button-appear 0.4s ease-in-out 0 1 normal;
}
.card-detail .card-detail-body .module.quiz-results .button-show-correct.rendered {
  -webkit-animation: none;
  animation: none;
}
.card-detail .card-detail-body .module .button-show-correct,
.card-detail .card-detail-body .module .button-show-self {
  display: none;
  position: absolute;
  right: 0;
  top: -70px;
  border: 0 none;
  border-radius: 18px;
  width: auto;
  height: 16px;
  font-size: 15px;
  line-height: 1;
  background: rgba(0, 0, 0, 0.2);
  color: #fff;
  box-shadow: none;
}
.card-detail .card-detail-body .module:first-child #text_module {
  margin-top: 0;
}
.card-detail .card-detail-body .module-video {
  margin: 20px -30px;
  padding: 14px;
  background: #3c3c3c;
  color: #fff;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
}
.card-detail .card-detail-body .module-video:first-child {
  margin-top: -20px;
}
.card-detail .card-detail-body .module-video video,
.card-detail .card-detail-body .module-video audio,
.card-detail .card-detail-body .module-video object,
.card-detail .card-detail-body .module-video embed,
.card-detail .card-detail-body .module-video iframe {
  display: block;
  margin: 0 auto;
  max-width: 100%;
}
.card-detail .card-detail-body .module-audio {
  margin: 20px -30px;
  padding: 14px;
  background: #3c3c3c;
  color: #fff;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
}
.card-detail .card-detail-body .module-audio:first-child {
  margin-top: -20px;
}
.card-detail .card-detail-body .module-audio audio {
  width: 100%;
}
.card-detail .card-detail-body .module-audio audio,
.card-detail .card-detail-body .module-audio object,
.card-detail .card-detail-body .module-audio iframe {
  display: block;
  margin: 0 auto;
  max-width: 100%;
}
.card-detail .card-detail-body .module-fill-reorder input {
  margin: 0 4px;
  padding: 1px 10px;
  border: 1px solid #979797;
  border-radius: 10px;
  background: #f6f6f6;
  vertical-align: middle;
  font-size: 12px;
  line-height: 16px;
  height: 16px;
}
.card-detail .card-detail-body .module-fill-reorder input.target {
  background: #fff;
  box-shadow: 0px 0px 2px 0 rgba(0, 0, 0, 0.5);
}
.card-detail .card-detail-body .module-fill-reorder input.result-fill-correct {
  background-color: #4A90E2;
  color: #fff;
}
.card-detail .card-detail-body .module-fill-reorder input.result-fill-incorrect {
  background-color: #FF9797;
  color: #fff;
  text-decoration: line-through;
}
.card-detail .card-detail-body .module-fill {
  position: relative;
}
.card-detail .card-detail-body .module-fill input {
  margin: 0 4px;
  border: 1px solid #979797;
  background: #f6f6f6;
  color: #7ED321;
  vertical-align: middle;
  font-size: 12px;
  line-height: 16px;
  height: 16px;
  text-align: center;
}
.card-detail .card-detail-body .module-fill input.result-fill-correct {
  color: #4A90E2;
}
.card-detail .card-detail-body .module-fill input.result-fill-incorrect {
  color: #E5372D;
  text-decoration: line-through;
}
.card-detail .card-detail-body .module-quiz {
  margin: 52px -20px 0;
}
.card-detail .card-detail-body .module-quiz .quiz-selector {
  margin: 20px 0;
  padding: 0;
  border-top: 1px solid #979797;
  list-style-type: none;
}
.card-detail .card-detail-body .module-quiz .quiz-selector li {
  border-bottom: 1px solid #979797;
}
.card-detail .card-detail-body .module-quiz .quiz-selector li label {
  display: block;
  position: relative;
  padding: 10px 50px 10px 20px;
  cursor: pointer;
}
.card-detail .card-detail-body .module-quiz .quiz-selector li label input {
  position: absolute;
  left: -100000px;
}
.card-detail .card-detail-body .module-quiz .quiz-selector li label .mark {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 20px;
  margin: auto;
  height: 27px;
  width: 27px;
  background: url(../../img/common/icon_radio.png) 0 0 no-repeat;
  cursor: pointer;
}
.card-detail .card-detail-body .module-quiz .quiz-selector li label :checked + .mark {
  background-image: url(../../img/common/icon_radio_a.png);
}
.card-detail .card-detail-body .module-quiz .quiz-selector li label [type="checkbox"] + .mark {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 20px;
  margin: auto;
  height: 33px;
  width: 33px;
  background: url(../../img/common/icon_checkbox.png) 0 0 no-repeat;
  cursor: pointer;
}
.card-detail .card-detail-body .module-quiz .quiz-selector li label [type="checkbox"]:checked + .mark {
  background-image: url(../../img/common/icon_checkbox_a.png);
}
.card-detail .card-detail-body .module-quiz .quiz-selector li.result-option-correct {
  font-weight: bold;
  background-color: #D8D8D8;
}
.card-detail .card-detail-body .module-quiz .quiz-selector li.result-option-correct label {
  cursor: default;
}
.card-detail .card-detail-body .module-quiz .quiz-selector li.result-option-correct label .mark {
  background-image: url(../../img/common/icon_radio_correct.png);
  cursor: inherit;
}
.card-detail .card-detail-body .module-quiz .quiz-selector li.result-option-correct label [type="checkbox"] + .mark {
  background-image: url(../../img/common/icon_checkbox_correct.png);
}
.card-detail .card-detail-body .module-quiz .quiz-selector li.result-option-incorrect label {
  cursor: default;
}
.card-detail .card-detail-body .module-quiz .quiz-selector li.result-option-incorrect label .mark {
  background-image: url(../../img/common/icon_radio_incorrect.png);
  cursor: inherit;
}
.card-detail .card-detail-body .module-quiz .quiz-selector li.result-option-incorrect label [type="checkbox"] + .mark {
  background-image: url(../../img/common/icon_checkbox_incorrect.png);
}
.card-detail .card-detail-body .module-quiz .quiz-selector li.result-option-incorrect label [type="checkbox"]:checked + .mark {
  background-image: url(../../img/common/icon_checkbox_incorrect_a.png);
}
.card-detail .card-detail-body .module-quiz .quiz-reorder {
  margin: 0;
  font-size: 15px;
  line-height: 22px;
}
.card-detail .card-detail-body .module-quiz .quiz-reorder h1 {
  margin: 46px 0 0;
  padding: 7px 10px 0;
  border-top: 1px solid #979797;
}
.card-detail .card-detail-body .module-quiz .quiz-reorder .option-word {
  display: block;
  padding: 0 5px;
  white-space: nowrap;
  background: #f6f6f6;
  border-radius: 11px;
  box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, 0.5);
  cursor: pointer;
}
.card-detail .card-detail-body .module-quiz .quiz-reorder .option-word.selected {
  visibility: hidden;
}
.card-detail .card-detail-body .module-quiz .quiz-reorder .option-word.result-reorder-correct {
  background-color: #4A90E2;
  color: #fff;
}
.card-detail .card-detail-body .module-quiz .quiz-reorder .option-word.result-reorder-incorrect {
  background-color: #FF9797;
  color: #fff;
  text-decoration: line-through;
}
.card-detail .card-detail-body .module-quiz .quiz-reorder .placeholders {
  margin: -52px 20px 0;
  padding: 0;
  list-style-type: none;
}
.card-detail .card-detail-body .module-quiz .quiz-reorder .placeholders li {
  position: relative;
  float: left;
  margin: 10px 20px 0 0;
  padding: 0 4px;
  min-width: 5em;
  border: 1px solid #979797;
  white-space: nowrap;
  background: #f6f6f6;
  border-radius: 11px;
  line-height: 20px;
}
.card-detail .card-detail-body .module-quiz .quiz-reorder .placeholders li.target {
  background: #fff;
  box-shadow: 0px 0px 2px 0 rgba(0, 0, 0, 0.5);
}
.card-detail .card-detail-body .module-quiz .quiz-reorder .placeholders li .option-word {
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  padding-right: 31px;
  line-height: 22px;
}
.card-detail .card-detail-body .module-quiz .quiz-reorder .placeholders li .option-word.selected {
  visibility: visibile;
}
.card-detail .card-detail-body .module-quiz .quiz-reorder .placeholders li .option-word:after {
  content: "×";
  background: #979797;
  color: #fff;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 5px;
  margin: auto;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  font-size: 16px;
  line-height: 16px;
  text-align: center;
  overflow: hidden;
}
.card-detail .card-detail-body .module-quiz .quiz-reorder .options {
  margin: 0;
  padding: 0 10px;
  list-style-type: none;
}
.card-detail .card-detail-body .module-quiz .quiz-reorder .options li {
  float: left;
  margin: 10px 20px 0 0;
}
.card-detail .card-detail-body .module-quiz .quiz-reorder.quiz-results .option-word {
  cursor: default;
}
.card-detail .card-detail-body .module-quiz .quiz-reorder.quiz-results .placeholders li .option-word:after {
  content: none;
}
.card-detail .card-detail-body .module-quiz .report {
  margin: 52px 20px;
}
.card-detail .card-detail-body .module-quiz .report textarea {
  box-sizing: border-box;
  border: 1px solid #979797;
  width: 100%;
  background: #fff;
}
.card-detail .card-detail-body .module-quiz .report .remain {
  margin: 0;
  text-align: right;
  color: #979797;
  font-size: 15px;
  line-height: 18px;
}
.card-detail .card-detail-body .module-quiz .report .remain.fill {
  color: #4A90E2;
}
.card-detail .card-detail-body .module-quiz .report .remain.error {
  color: #D0021B;
}
.card-detail .card-detail-body .module-quiz .button {
  margin: 26px 0 0;
  box-sizing: border-box;
  font-size: 27px;
}
.card-detail .card-detail-body .module-quiz .button:disabled {
  background: #D8D8D8;
}
.card-detail .card-detail-body .module-quiz .button:disabled:hover {
  opacity: 1;
  cursor: default;
}

.section-detail .section-detail-section h1 {
  margin: 1.5em 0 0;
  padding: 0;
  font-weight: bold;
  font-size: 24px;
  line-height: 1.5;
}
.section-detail .section-detail-section p {
  margin: 0.5em 0 0;
  padding: 0;
}
.section-detail .section-detail-section:first-child h1 {
  margin-top: 0;
}
.section-detail .button {
  margin: 40px -20px 0;
  width: auto;
  box-sizing: border-box;
  font-size: 27px;
}
.section-detail .button.disabled {
  background: #D8D8D8;
}
.section-detail .button.disabled:hover {
  opacity: 1;
  cursor: default;
}

.library .panel-title {
  margin: -14px -20px;
}
.library .panel-title .category {
  float: left;
  position: relative;
  margin: 0 -20px 0 0;
  padding: 20px 26px 20px 20px;
  font-weight: normal;
  font-size: 80%;
  line-height: 1.5;
  background: url(../../img/common/category.png) 100% 50% no-repeat;
  color: inherit;
  text-decoration: none;
  z-index: 4;
}
.library .panel-title .category:last-child {
  background-color: #4a4a4a;
  background-image: url(../../img/common/category_current.png);
  color: #fff;
}
.library .panel-title .category + .category {
  padding-left: 26px;
  z-index: 3;
}
.library .panel-title .category + .category + .category {
  z-index: 2;
}
.library .panel-title .category + .category + .category + .category {
  z-index: 1;
}
.library .panel-title .category + .category + .category + .category + .category {
  z-index: 0;
}

.course-search {
  margin: -39px -34px 0;
  padding: 10px 20px;
  background: #f0f0f0;
  border-bottom: 1px solid #979797;
}
.course-search fieldset {
  margin: 0;
  padding: 0;
  border: 0 none;
}
.course-search legend {
  display: none;
}
.course-search input[type="search"] {
  box-sizing: border-box;
  width: 180px;
  height: 28px;
  border: 1px solid #979797;
  background: #fff;
  border-radius: 14px;
  font-size: 13px;
  line-height: 28px;
}

.category-list {
  margin: 0 -34px -39px;
}
.category-list .category,
.category-list .toggle,
.category-list .body {
  margin: 0;
  padding: 0;
}
.category-list > :first-child .category {
  border-top: 0 none;
}
.category-list .category {
  border-top: 1px solid #979797;
}
.category-list .category .toggle a {
  display: block;
  text-decoration: none;
  color: inherit;
}
.category-list .category .toggle .name {
  display: block;
  cursor: pointer;
  padding: 26px 43px;
  font-size: 18px;
  line-height: 28px;
  background: url(../../img/common/icon_link_01.png) 595px 32px no-repeat;
}
.category-list .category .body {
  overflow: hidden;
  height: 0;
}
.category-list .category.has-child > .toggle .name {
  background: url(../../img/common/icon_toggle_01.png) 16px 32px no-repeat;
}
.category-list > div > .category > .toggle .name {
  background-color: #fafafa;
}
.category-list > div > .category.opened > .toggle .name {
  background-image: url(../../img/common/icon_toggle_02_a.png);
  background-color: #bc0808;
  color: #fff;
}
.category-list .body .category.opened > .toggle .name {
  background-image: url(../../img/common/icon_toggle_01_a.png);
}
.category-list .body .category > .toggle .name {
  padding-left: 63px;
  background-color: #d8d8d8;
}
.category-list .body .category.has-child > .toggle .name {
  background-position: 36px 32px;
}
.category-list .body .category.has-child > .body .category > .toggle .name {
  padding-left: 83px;
  background-color: #b4b4b4;
}
.category-list .body .category.has-child > .body .category.has-child > .toggle .name {
  background-position: 56px 32px;
}

.course-summary-list {
  margin: 0 0 0 -37px;
  padding: 0;
  list-style-type: none;
}
.course-summary-list > li {
  float: left;
  margin: 48px 0 0 48px;
}

.course-summary a {
  display: block;
  position: relative;
  width: 240px;
  height: 240px;
  overflow: hidden;
  color: inherit;
  box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.24);
  font-size: 12px;
  line-height: 1.5;
  cursor: pointer;
}
.course-summary header {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px 13px;
  background: #fff;
  background: rgba(255, 255, 255, 0.8);
  z-index: 1;
}
.course-summary header .title {
  margin: 0;
  padding: 0;
}
.course-summary figure {
  display: block;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
.course-summary figure .empty {
  display: block;
  width: 100%;
  height: 100%;
  background: #999;
}
.course-summary figure img {
  display: block;
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
.course-summary .progress {
  margin: 10px -3px 0 0;
  padding: 4px 27px 4px 0;
  background: url(../../img/common/icon_progress.png) 100% 50% no-repeat;
}
.course-summary .progress .indicator {
  border-radius: 2px;
  width: 196px;
  height: 4px;
  background: #fff;
}
.course-summary .progress .indicator .bar {
  border-radius: 2px;
  width: 50%;
  height: 4px;
  background: #4a90e2;
}
.course-summary.done .progress {
  background-image: url(../../img/common/icon_done.png);
}
.course-summary.done .progress .indicator .bar {
  width: 100% !important;
  background: #7ed321;
}

.last-course {
  margin: -39px -34px;
}
.last-course a {
  display: block;
  position: relative;
  height: 301px;
  overflow: hidden;
  color: inherit;
  font-size: 17px;
  line-height: 1.5;
  cursor: pointer;
}
.last-course header {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 14px 9px;
  background: #fff;
  background: rgba(255, 255, 255, 0.8);
  z-index: 1;
}
.last-course header .title {
  margin: 0;
  padding: 0;
  text-align: center;
}
.last-course figure {
  display: block;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
.last-course figure .empty {
  display: block;
  width: 100%;
  height: 100%;
  background: #999;
}
.last-course figure img {
  display: block;
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
.last-course .progress {
  margin: 17px -3px 0 0;
}
.last-course .progress .indicator {
  float: left;
  margin: 4px 0 0;
  border-radius: 2px;
  width: 251px;
  height: 5px;
  background: #fff;
}
.last-course .progress .indicator .bar {
  border-radius: 2px;
  width: 50%;
  height: 100%;
  background: #4a90e2;
}
.last-course .progress .count {
  float: right;
  font-size: 10px;
  line-height: 1.5;
  color: #4A90E2;
}
.last-course.done .progress .indicator .bar {
  width: 100% !important;
  background: #7ed321;
}
.last-course .button {
  position: absolute;
  top: 98px;
  left: 42px;
  right: 42px;
  padding: 10px;
  border-radius: 2px;
  text-align: center;
  background: #D0021B;
  background: rgba(208, 2, 27, 0.8);
  color: #fff;
  font-size: 14px;
  line-height: 1.5;
}

.dialog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.53);
  overflow: auto;
  padding: 56px 0;
}
.dialog .dialog-body {
  position: relative;
  margin: 0 auto;
  width: 500px;
}

.badge-info {
  margin: 0 -50px;
  background: #F6F6F6;
  border-radius: 3px;
}

.badge-overview {
  padding: 48px 0 10px;
  text-align: center;
}
.badge-overview .back {
  margin: -28px 20px 0;
  font-size: 18px;
  line-height: 1.5;
  text-align: left;
}
.badge-overview .back a {
  color: #4A4A4A;
  text-decoration: none;
}
.badge-overview .image img {
  display: block;
  margin: 0 auto;
}
.badge-overview .title {
  margin: 10px 0 0;
  font-weight: normal;
  font-size: 16px;
  line-height: 1.5;
}
.badge-overview .description {
  margin: 7px 0 0;
  padding: 0;
  font-size: 24px;
  line-height: 1.5;
  color: #BC0808;
}

.badge-detail {
  padding: 40px 57px;
  border-top: 1px solid #D8D8D8;
}
.badge-detail .detail {
  margin: 0;
  padding: 0;
  font-size: 18px;
  line-height: 1.25;
}
.badge-detail .detail dt {
  margin: 20px 0 0;
  padding: 0 0 0 4px;
  border-left: 2px solid #BC0808;
}
.badge-detail .detail dt:first-child {
  margin-top: 0;
}
.badge-detail .detail dd {
  margin: 0;
  padding: 4px 0 0 4px;
  border-left: 2px solid #BC0808;
  color: #979797;
}

.course-overview {
  padding: 29px;
  background: #f1fbe7;
}
.course-overview .back {
  margin: -19px -15px 0;
  font-size: 131.25%;
  line-height: 1.52380952381;
}
.course-overview .back a {
  color: #979797;
  text-decoration: none;
}
.course-overview .title {
  font-weight: normal;
  font-size: 212.5%;
  line-height: 1.5;
}
.course-overview .description {
  margin: 7px 0 0;
  padding: 0;
  font-size: 131.25%;
  line-height: 1.52380952381;
}
.course-overview .description dt {
  margin: 0;
  padding: 0;
  font-weight: bold;
}
.course-overview .description dd {
  margin: 0;
  padding: 0;
}

.chapter-list {
  margin: 21px 0 0;
  padding: 0;
  list-style-type: none;
  background: #d8d8d8;
  border-radius: 4px;
  box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.5);
}
.chapter-list > li {
  margin: 0;
  padding: 0;
}
.chapter-list > li > .chapter > .chapter-overview {
  position: relative;
  padding: 0 40px 0 141px;
  height: 112px;
  background: #8fafff url(../../img/common/icon_info.png) 468px 50% no-repeat;
  color: #fff;
}
.chapter-list > li > .chapter > .chapter-overview .image {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 114px;
  overflow: hidden;
  background: #fff;
}
.chapter-list > li > .chapter > .chapter-overview .image img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
.chapter-list > li > .chapter > .chapter-overview .image .empty {
  display: block;
  width: 100%;
  height: 100%;
  background: #999;
}
.chapter-list > li > .chapter > .chapter-overview .title {
  font-weight: normal;
  font-size: 131.25%;
  line-height: 1.52380952381;
}
.chapter-list > li > .chapter > .chapter-overview .description {
  display: none;
  font-size: 75%;
  line-height: 1.5;
}
.chapter-list > li > .chapter > .chapter-overview:hover .description {
  display: block;
  position: absolute;
  right: -230px;
  top: 10px;
  bottom: 10px;
  margin: 0;
  padding: 10px;
  width: 180px;
  background: #fff;
  color: #000;
  border-radius: 4px;
}
.chapter-list > li > .chapter > .chapter-overview:hover .description:before {
  content: "";
  position: absolute;
  left: -20px;
  top: 50%;
  margin: -10px 0;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-right: 20px solid #fff;
  border-bottom: 10px solid transparent;
}

.section-list {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.section-list .section > .section-overview {
  padding: 8px;
}
.section-list .section > .section-overview .title {
  margin: 0;
  padding: 0;
  font-size: 75%;
  line-height: 1.5;
}

.chapter-nav {
  position: relative;
  margin: 0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.24);
}
.chapter-nav .course-info {
  display: none;
  padding: 5px 20px;
  border-bottom: 1px solid #d8d8d8;
}
.chapter-nav .course-info .title {
  font-weight: bold;
}
.chapter-nav .chapters {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.chapter-nav .chapters .chapter-info .title {
  padding: 5px 20px;
  font-weight: bold;
}
.chapter-nav .sections {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.chapter-nav .sections > li {
  border-top: 1px solid #d8d8d8;
}
.chapter-nav .sections .section-info {
  padding: 5px 50px 5px 30px;
  background: transparent;
  color: inherit;
  text-decoration: none;
  box-shadow: none;
}
.chapter-nav .sections .section-info .title {
  font-weight: bold;
}
.chapter-nav .cards {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.chapter-nav .cards li {
  border-top: 1px solid #d8d8d8;
}
.chapter-nav .cards .card {
  position: relative;
}
.chapter-nav .cards .card a {
  display: block;
  text-decoration: none;
  color: inherit;
}
.chapter-nav .cards .card .card-info {
  padding: 5px 50px 5px 40px;
}
.chapter-nav .cards .card:after {
  content: "";
  position: absolute;
  right: 10px;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 29px;
  height: 29px;
}
.chapter-nav .cards .card.done:after {
  background-image: url(../../img/common/icon_card_done.png);
}
.chapter-nav .cards .card.study:after {
  background-image: url(../../img/common/icon_card_study.png);
}

.card-list {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.card-list > li {
  border-bottom: 1px solid #979797;
}
.card-list > li .card {
  position: relative;
  background: #fff url(../../img/common/icon_link_01.png) 475px 50% no-repeat;
}
.card-list > li .card:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: -39px;
  margin: auto 0;
  width: 29px;
  height: 29px;
}
.card-list > li .card.incomplete:after {
  background-image: url(../../img/common/icon_card_done.png);
}
.card-list > li .card.done:after {
  background-image: url(../../img/common/icon_card_done.png);
}
.card-list > li .card.study:after {
  background-image: url(../../img/common/icon_card_study.png);
}
.card-list > li .card.locked {
  background: #d8d8d8;
}
.card-list > li .card.locked:after {
  background-image: url(../../img/common/icon_card_locked.png);
}
.card-list > li .card.locked a {
  cursor: default;
}
.card-list > li .card a {
  position: relative;
  display: block;
  padding: 0 40px 0 122px;
  height: 140px;
  text-decoration: none;
  color: inherit;
}
.card-list > li .card a .title {
  margin: 0;
  padding: 0;
  font-weight: normal;
  font-size: 125%;
  line-height: 1.5;
}
.card-list > li .card a .description {
  margin: 0;
  padding: 0;
  font-size: 75%;
  line-height: 1.5;
}
.card-list > li .card a .image {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 102px;
  background: #4a4a4a;
}
.card-list > li .card a .image .photo {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  width: 102px;
}
.card-list > li .card a .image .icon {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

.chapter-list li:last-child .section-list li:last-child .card-list li:last-child {
  border-bottom: 0 none;
}

.section-complete {
  margin: -1px -1px 0;
  padding: 6px 0;
  height: 230px;
  background: #7ED321 url(../../img/common/icon_section_end.png) 50% 86px no-repeat;
  color: #fff;
  text-align: center;
  font-size: 23px;
  line-height: 35px;
}
.section-complete h1 {
  margin: 0;
  padding: 0;
}
.section-complete.section-testset {
  background-image: none;
}
.section-complete.section-testset .score {
  margin: 30px 0 0;
  padding: 0;
  font-size: 40px;
  line-height: 118px;
  text-align: center;
}
.section-complete.section-testset .score .value {
  font-size: 100px;
}

.share-panel {
  margin-left: -24px;
  margin-right: -24px;
}
.share-panel .sub-panel-header .sub-panel-title {
  float: left;
  color: #979797;
}
.share-panel .sub-panel-header .share-function {
  float: right;
  text-decoration: none;
  color: #d0021b;
}
.share-panel .sub-panel-body {
  position: relative;
  padding: 18px 60px 21px 117px;
}
.share-panel .sub-panel-body .user-icon {
  position: absolute;
  left: 18px;
  top: 18px;
  width: 82px;
  height: 82px;
  border: 1px solid #979797;
  border-radius: 50%;
  overflow: hidden;
}
.share-panel .sub-panel-body .user-icon img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: auto;
}
.share-panel .sub-panel-body .share-message {
  display: block;
  width: 100%;
  height: 82px;
  border: 0 none;
  font-size: 100%;
  background: transparent;
  color: inherit;
  resize: none;
}
.share-panel .sub-panel-body .share-edit {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 0 51px 0 0;
  text-decoration: none;
}
.share-panel .sub-panel-body .share-edit span {
  position: relative;
  display: block;
  padding: 8px;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.71);
  color: #fff;
  font-size: 14px;
  line-height: 1.5;
  box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.5);
}
.share-panel .sub-panel-body .share-edit span:after {
  content: "";
  position: absolute;
  top: 0;
  right: -8px;
  bottom: 0;
  margin: auto;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 8px solid rgba(0, 0, 0, 0.71);
}
.share-panel .sub-panel-body .share-edit:after {
  content: "";
  position: absolute;
  right: -7px;
  bottom: -7px;
  display: block;
  width: 51px;
  height: 51px;
  background: url(../../img/common/icon_edit.png) 0 0 no-repeat;
}
.share-panel .sub-panel-body .share-edit.edit span {
  display: none;
}
.share-panel .sub-panel-body .share-edit.edit:after {
  background-image: url(../../img/common/icon_edit_done.png);
}

.point-status {
  position: relative;
}
.point-status canvas {
  display: block;
  margin: 27px 0;
  width: 100%;
  height: 280px;
}
.point-status .point-list {
  display: none;
}
.point-status .total {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  color: #FBC03A;
  font-size: 33px;
  line-height: 116px;
  margin: auto;
  width: 100%;
  height: 116px;
  text-align: center;
}
.point-status .total .value {
  font-size: 96px;
}

.clip-list {
  margin: -24px;
  padding: 0;
  list-style-type: none;
}
.clip-list > li {
  margin: 20px 0 0;
}
.clip-list > li:first-child {
  margin-top: 0;
}
.clip-list > li .card {
  position: relative;
  background: #fff;
  box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.24);
}
.clip-list > li .card a {
  position: relative;
  display: block;
  padding: 4px 8px 4px 71px;
  height: 80px;
  text-decoration: none;
  color: inherit;
}
.clip-list > li .card a .title {
  margin: 0;
  padding: 0;
  font-weight: normal;
  font-size: 14px;
  line-height: 1.5;
}
.clip-list > li .card a .description {
  margin: 0;
  padding: 0;
  font-size: 9px;
  line-height: 14px;
}
.clip-list > li .card a .image {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 63px;
  background: #d8d8d8;
}
.clip-list > li .card a .image img {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

.badge-list {
  margin: -21px -34px -20px;
  padding: 0;
  list-style-type: none;
}
.badge-list li {
  float: left;
  margin: 8px 0 0;
  padding: 0;
  width: 33%;
  text-align: center;
}
.badge-list li .badge {
  font-size: 10px;
  line-height: 1.5;
}
.badge-list li .badge img {
  display: block;
  margin: 0 auto;
}
.badge-list li .badge .name {
  display: block;
  margin: 4px 0 0;
}
.badge-list li:nth-child(3n+1) {
  clear: both;
}

.continuous-status {
  margin: 30px 0 0;
}
.continuous-status .summary {
  margin: 0 110px;
}
.continuous-status .icon {
  float: left;
  position: relative;
  border: 5px solid #B8E986;
  border-radius: 50%;
  width: 124px;
  height: 124px;
  overflow: hidden;
}
.continuous-status .icon img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 124px;
}
.continuous-status .days {
  float: right;
  font-size: 31px;
  line-height: 36px;
  color: #37474F;
  text-align: center;
}
.continuous-status .days .count {
  display: block;
  font-size: 33px;
  line-height: 96px;
  height: 96px;
  color: #FBC03A;
}
.continuous-status .days .count .value {
  font-size: 96px;
  line-height: 96px;
}
.continuous-status .days .status {
  display: block;
}
.continuous-status .calendar {
  margin: 30px 0 0;
  padding: 0 0 14px;
  list-style-type: none;
  font-size: 20px;
  line-height: 24px;
  color: #D8D8D8;
  text-align: center;
}
.continuous-status .calendar .calendar-date {
  display: inline-block;
  position: relative;
  background: #d8d8d8;
  margin: 0 9px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.continuous-status .calendar .calendar-date.continuous {
  background: #F5A623;
}

.comment-detail {
  margin: -39px -34px;
  overflow: hidden;
}
.comment-detail .comment-summary {
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);
}
.comment-detail .comment-summary .comment .pubdate {
  display: none;
}
.comment-detail .comment-summary .comment .posted-by {
  padding: 29px 30px 9px 54px;
}
.comment-detail .comment-summary .comment .content {
  padding: 49px 85px 9px 177px;
}
.comment-detail .comment-summary .comment .function {
  padding-bottom: 9px;
}
.comment-detail .comment-summary .comment .function li:before {
  content: "・";
}
.comment-detail .comment-summary .comment .function li:first-child:before {
  content: "";
}
.comment-detail .comment-summary .comment .function li.like-list {
  float: left;
}
.comment-detail .comment-comment .comment-list {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.comment-detail .comment-comment .comment-list > li {
  border-top: 1px solid #979797;
}
.comment-detail .comment-comment .comment-list > li:first-child {
  border-top: 0 none;
}
.comment-detail .comment-comment .comment-list > li.ellipsis {
  border-top: 0 none;
}
.comment-detail .comment-comment .comment-list > li.ellipsis .comment-list > li:first-child {
  border-top: 1px solid #979797;
}
.comment-detail .comment-comment .comment-list > li.ellipsis .read-more {
  position: relative;
  margin: 0 0 -1px;
  padding: 17px;
  background: #FAFAFA;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.5);
  text-align: center;
  font-size: 15px;
  line-height: 1.5;
  color: #929292;
  cursor: pointer;
}
.comment-detail .comment-comment .comment .pubdate {
  margin: 0;
  padding: 19px 30px 0;
  text-align: right;
  font-size: 12px;
  line-height: 1.5;
  color: #979797;
}
.comment-detail .comment-comment .comment .posted-by {
  padding: 11px 35px 9px 26px;
}
.comment-detail .comment-comment .comment .posted-by .icon {
  width: 78px;
  height: 78px;
}
.comment-detail .comment-comment .comment .content {
  padding: 15px 44px 9px 140px;
}
.comment-detail .comment-comment .comment .function {
  padding-bottom: 9px;
}
.comment-detail .comment-comment .comment .function li:before {
  content: "・";
}
.comment-detail .comment-comment .comment .function li:first-child:before {
  content: "";
}
.comment-detail .comment-comment .comment .function li.like-list {
  float: left;
}
.comment-detail .comment-comment .post-comment {
  margin: 13px 10px;
  font-size: 18px;
  line-height: 1.5;
}
.comment-detail .comment-comment .post-comment [name="text"] {
  display: block;
  padding: 10px;
  border: 1px solid #979797;
  border-radius: 2px;
  width: 100%;
  box-sizing: border-box;
  font-size: 100%;
  line-height: inherit;
}
.comment-detail .comment-comment .post-comment [type="submit"] {
  margin: 10px 0 0 auto;
  padding-left: 20px;
  padding-right: 20px;
  width: auto;
  font-size: 100%;
  line-height: inherit;
}

.like-list-frame {
  margin: 0 -50px;
  border-radius: 3px;
  background: #F6F6F6;
  box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
.like-list-frame .like-list-header {
  padding: 15px 21px;
  border-bottom: 1px solid #979797;
  background: #fff;
  color: #979797;
  font-size: 18px;
  line-height: 1.5;
}
.like-list-frame .like-list-header .back {
  float: left;
}
.like-list-frame .like-list-header .back a {
  color: #4A4A4A;
  text-decoration: none;
}
.like-list-frame .like-list-header h1 {
  margin: 0;
  padding: 0 50px;
  text-align: center;
}
.like-list-frame .like-list {
  margin: 0;
  padding: 0 0 0 25px;
  list-style-type: none;
}
.like-list-frame .like-list > li {
  padding: 20px 0;
  border-top: 1px solid #D8D8D8;
}
.like-list-frame .like-list > li:first-child {
  border-top: 0 none;
}
.like-list-frame .like-detail {
  font-size: 18px;
  line-height: 1.5;
}
.like-list-frame .like-detail .user-icon {
  float: left;
  position: relative;
  width: 74px;
  height: 74px;
  border: 1px solid #979797;
  border-radius: 50%;
  overflow: hidden;
}
.like-list-frame .like-detail .user-icon img {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
}
.like-list-frame .like-detail .name {
  margin: 0;
  padding: 20px 0 20px 96px;
}

.quiz-list-menu {
  background: #fff;
  box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.5);
}
.quiz-list-menu > header h1 {
  position: relative;
  margin: 0;
  padding: 10px;
  text-align: center;
  font-size: 18px;
  line-height: 1.5;
  background: #D8D8D8;
  border: 1px solid #979797;
}
.quiz-list-menu > header h1:after {
  content: "";
  position: absolute;
  top: 0;
  left: -10px;
  bottom: 0;
  margin: auto;
  height: 0;
  border-right: 10px solid #d8d8d8;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}
.quiz-list-menu > header h1:before {
  content: "";
  position: absolute;
  top: 0;
  left: -11px;
  bottom: 0;
  margin: auto;
  height: 0;
  border-right: 11px solid #979797;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}
.quiz-list-menu .quiz-list {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.quiz-list-menu .quiz-list li {
  border-bottom: 1px solid #979797;
}
.quiz-list-menu .quiz-list li .quiz-list-part {
  position: relative;
  padding: 16px;
}
.quiz-list-menu .quiz-list li .quiz-list-part h1 {
  margin: 0;
  padding: 0 4em 0 0;
  font-size: 18px;
  line-height: 1.5;
}
.quiz-list-menu .quiz-list li .quiz-list-part p {
  position: absolute;
  margin: auto;
  padding: 0;
  top: 0;
  bottom: 0;
  right: 16px;
  height: 1.5em;
}
.quiz-list-menu .quiz-list li[data-state="unlearned"] .quiz-list-part p:after {
  content: "未回答";
  color: #A8A8A8;
}
.quiz-list-menu .quiz-list li[data-state="current"] .quiz-list-part {
  background: #BC0808;
  color: #fff;
}
.quiz-list-menu .quiz-list li[data-state="current"] .quiz-list-part p:after {
  content: "回答中";
}
.quiz-list-menu .quiz-list li[data-state="learned"] .quiz-list-part p:after {
  content: "回答済み";
  color: #7ED321;
}

.announce-list {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.announce-list > li {
  margin-top: 20px;
}
.announce-list > li:first-child {
  margin-top: 0;
}
.announce-list .announce .important {
  display: inline-block;
  margin: 0 0 0 5px;
  padding: 0 0.5em;
  border-radius: 0.75em;
  background: #E30000;
  color: #fff;
  font-size: 66.666667%;
  line-height: 1.5em;
  vertical-align: middle;
}

.config-frame {
  width: 600px;
  background: #F6F6F6;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
  border-radius: 3px;
  overflow: hidden;
}
.config-frame .config-header {
  padding: 15px 21px;
  border-bottom: 1px solid #979797;
  background: #fff;
  color: #979797;
  font-size: 18px;
  line-height: 1.5;
}
.config-frame .config-header .back {
  float: left;
}
.config-frame .config-header .back a {
  color: #4A4A4A;
  text-decoration: none;
}
.config-frame .config-header h1 {
  margin: 0;
  padding: 0 50px;
  text-align: center;
}
.config-frame .config-body .user {
  margin: 22px 0;
  text-align: center;
}
.config-frame .config-body .user .icon {
  display: inline-block;
  position: relative;
  border: 1px solid #979797;
  border-radius: 50%;
  width: 153px;
  height: 153px;
  overflow: hidden;
}
.config-frame .config-body .user .icon img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
}
.config-frame .config-body .user .icon label {
  display: block;
  width: 100%;
  height: 100%;
}
.config-frame .config-body .user .icon label:after {
  content: "";
  position: absolute;
  bottom: 5px;
  left: 0;
  right: 0;
  margin: auto;
  width: 25px;
  height: 21px;
  background: url(../../img/common/icon_photo.png) 0 0 no-repeat;
  z-index: 1;
}
.config-frame .config-body .user .icon input {
  opacity: 0;
}
.config-frame .config-body .user .name {
  position: relative;
  margin: 0 100px;
  padding: 0;
  font-weight: bold;
  font-size: 18px;
  line-height: 1.5;
}
.config-frame .config-body .user .name input {
  margin: 0;
  padding: 0;
  width: 100%;
  border: none;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  font-size: 100%;
  line-height: inherit;
  text-align: inherit;
  opacity: 0.6;
}
.config-frame .config-body .user .name input[readonly] {
  cursor: text;
}
.config-frame .config-body .user .name .button {
  position: absolute;
  top: 0;
  right: -85px;
  white-space: nowrap;
  color: #d0021b;
  font-weight: normal;
}
.config-frame .config-body .user .name .button:before {
  content: "編集";
}
.config-frame .config-body .user .name .edit input {
  margin-bottom: -1px;
  border-bottom: 1px solid #d0021b;
}
.config-frame .config-body .user .name .edit .button:before {
  content: "確定";
}
.config-frame .config-body .notify-list {
  margin: 0;
  padding: 0;
}
.config-frame .config-body .notify-list h1 {
  margin: 0 0 5px;
  padding: 0 15px;
  font-weight: bold;
  font-size: 13px;
  line-height: 1.5;
  opacity: 0.6;
}
.config-frame .config-body .notify-list ul {
  margin: 0 0 15px;
  padding: 0;
  list-style-type: none;
  border-top: 1px solid #979797;
  background: #fff;
  font-size: 14px;
  line-height: 1.5;
}
.config-frame .config-body .notify-list ul li {
  border-bottom: 1px solid #979797;
}
.config-frame .config-body .notify-list ul li label {
  display: block;
  padding: 10px 15px;
  position: relative;
}
.config-frame .config-body .notify-list ul li label select {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 15px;
  margin: auto;
}
.config-frame .config-body .notify-list ul li label [type="checkbox"] {
  opacity: 0;
}
.config-frame .config-body .notify-list ul li label [type="checkbox"] + span {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 15px;
  margin: auto;
  width: 32px;
  height: 32px;
  background: url(../../img/common/icon_notify.png) 0 0 no-repeat;
}
.config-frame .config-body .notify-list ul li label [type="checkbox"]:checked + span {
  background-image: url(../../img/common/icon_notify_a.png);
}
video::-webkit-media-controls {
    overflow: hidden !important
}
video::-webkit-media-controls-enclosure {
    width: calc(100% + 32px);
    margin-left: auto;
}

/*# sourceMappingURL=common.css.map */