@charset "utf-8";
/* sanitize.stylus v2.0.0 | CC0 1.0 Public Domain | github.com/sotayamashita/sanitize.stylus */
:root {
  -ms-overflow-style: -ms-autohiding-scrollbar;
  overflow-y: scroll;
  -webkit-text-size-adjust: 100%;
}
audio:not([controls]) {
  display: none;
}
button {
  overflow: visible;
}
details {
  display: block;
}
input[type="number"] {
  width: auto;
}
input[type="search"] {
  -webkit-appearance: textfield;
}
input::-webkit-search-cancel-button,
input::-webkit-search-decoration {
  -webkit-appearance: none;
}
main {
  display: block;
}
summary {
  display: block;
}
pre {
  overflow: auto;
}
progress {
  display: inline-block;
}
small {
  font-size: 75%;
}
template {
  display: none;
}
textarea {
  overflow: auto;
}
[hidden] {
  display: none;
}
*,
::before,
::after {
  box-sizing: inherit;
}
* {
  font-size: inherit;
  line-height: inherit;
}
::before,
::after {
  text-decoration: inherit;
  vertical-align: inherit;
}
*,
::before,
::after {
  border-style: solid;
  border-width: 0;
}
* {
  margin: 0;
  padding: 0;
}
:root {
  box-sizing: border-box;
  cursor: default;
  font: 100%/1.5 sans-serif;
  text-rendering: optimizeLegibility;
}
html {
  background-color: #fff;
  color: #333;
}
a {
  text-decoration: none;
}
audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}
button,
input,
select,
textarea {
  background-color: transparent;
}
button,
input,
select,
textarea {
  color: inherit;
  font-family: inherit;
  font-style: inherit;
  font-weight: inherit;
}
button,
[type="button"],
[type="date"],
[type="datetime"],
[type="datetime-local"],
[type="email"],
[type="month"],
[type="number"],
[type="password"],
[type="reset"],
[type="search"],
[type="submit"],
[type="tel"],
[type="text"],
[type="time"],
[type="url"],
[type="week"],
select,
textarea {
  min-height: 1.5;
}
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
}
nav ol,
nav ul {
  list-style: none;
}
select {
  -moz-appearance: none;
  -webkit-appearance: none;
}
select::-ms-expand {
  display: none;
}
select::-ms-value {
  color: currentColor;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
textarea {
  resize: vertical;
}
::selection {
  background-color: #b3d4fc;
  color: #4c2b03;
  text-shadow: none;
}
[aria-busy="true"] {
  cursor: progress;
}
[aria-controls] {
  cursor: pointer;
}
[aria-disabled] {
  cursor: default;
}
[hidden][aria-hidden="false"] {
  clip: rect(0 0 0 0);
  display: inherit;
  position: absolute;
}
[hidden][aria-hidden="false"]:focus {
  clip: auto;
}
@charset "utf-8";
@font-face {
  font-family: 'Noto Sans Japanese';
  font-style: normal;
  font-weight: 400;
  src: url("../font/NotoSansCJKjp-Regular.woff") format('woff'), url("../font/NotoSansCJKjp-Regular.otf?2") format('opentype');
}
@font-face {
  font-family: 'Noto Sans Japanese';
  font-style: normal;
  font-weight: 600;
  src: url("../font/NotoSansCJKjp-Bold.woff") format('woff'), url("../font/NotoSansCJKjp-Bold.otf?2") format('opentype');
}
@font-face {
  font-family: 'FontAwesome';
  src: url("../fonts/fontawesome-webfont.woff") format('woff');
  font-style: normal;
}
html {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100%;
}
@media screen and (max-width: 1000px) {
  html {
    height: auto;
  }
}
body {
  font-family: 'Helvetica Neue', Arial, Verdana, 'Noto Sans Japanese', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
  font-weight: 400;
  font-size: 100%;
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
@media screen and (max-width: 1000px) {
  body {
    height: auto;
    overflow: hidden;
  }
}
.wrapper {
  margin: 0;
  position: relative;
  background-color: #fff;
  font-size: 1rem;
  height: auto;
  min-height: 100%;
  padding-bottom: 340px;
}
a {
  color: #0c79cb;
  display: inline;
  cursor: pointer;
  transition: color 0.1s;
}
@media screen and (max-width: 768px) {
  a {
    display: block;
  }
}
a:hover {
  color: dark-blue;
  transition-property: color;
}
a img {
  opacity: 1;
  transition: opacity 0.2s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
a img:hover {
  transition-property: opacity;
  opacity: 0.6;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
small {
  font-size: 80%;
}
button {
  cursor: pointer;
}
li {
  list-style: none;
}
h1,
h2,
h3,
h4,
h5,
h6,
ul {
  margin: 0;
  font-family: 'Helvetica Neue', Arial, Verdana, 'Noto Sans Japanese', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
  font-weight: 400;
}
h1 {
  font-size: 1.25rem;
  line-height: 1.5;
}
h2 {
  font-size: 1.25rem;
  line-height: 1.5;
}
h3 {
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 600;
}
.clearfix {
  content: ".";
  display: block;
  height: 0;
  font-size: 0;
  clear: both;
  visibility: hidden;
}
.radius-4-button,
main .main-wrap .course-section .course-link-wrap .course-link-btn-001,
main .main-wrap .course-section .course-link-wrap .course-link-btn-001.disabled,
main .course-wrap .see-first-lesson,
main .course-wrap .course-lessons-container .lesson-wrap .complete-button,
main .course-wrap .course-lessons-container .lesson-wrap .lesson-login-button,
.video-screen .login-btn-block .login-btn-wrapper,
.video-screen .login-block .login-btn-only-service-user .login-btn-wide,
.video-screen .login-block .login-btn {
  border-radius: 4px;
  padding: 10px 28px;
}
@media screen and (max-width: 768px) {
  .radius-4-button,
  main .main-wrap .course-section .course-link-wrap .course-link-btn-001,
  main .main-wrap .course-section .course-link-wrap .course-link-btn-001.disabled,
  main .course-wrap .see-first-lesson,
  main .course-wrap .course-lessons-container .lesson-wrap .complete-button,
  main .course-wrap .course-lessons-container .lesson-wrap .lesson-login-button,
  .video-screen .login-btn-block .login-btn-wrapper,
  .video-screen .login-block .login-btn-only-service-user .login-btn-wide,
  .video-screen .login-block .login-btn {
    padding: 10px 15px;
  }
}
.radius-8-button,
.course-section .detail-course-btn,
.lesson-wrap-with-practice-sp .lesson-main .lesson-information-area .lesson-title-area .complete-button-area .lesson-login-button,
.lesson-wrap-with-practice-sp .lesson-main .lesson-information-area .lesson-title-area .complete-button-area .complete-button,
.lesson-wrap .lesson-main .lesson-title-area .complete-button-area .complete-button {
  border-radius: 8px;
  padding: 18px 28px;
}
@media screen and (max-width: 768px) {
  .radius-8-button,
  .course-section .detail-course-btn,
  .lesson-wrap-with-practice-sp .lesson-main .lesson-information-area .lesson-title-area .complete-button-area .lesson-login-button,
  .lesson-wrap-with-practice-sp .lesson-main .lesson-information-area .lesson-title-area .complete-button-area .complete-button,
  .lesson-wrap .lesson-main .lesson-title-area .complete-button-area .complete-button {
    padding: 12px 18px;
  }
}
.radius-8-button-small,
.lesson-wrap .lesson-main .lesson-title-area .complete-button-area .lesson-login-button {
  border-radius: 8px;
  padding: 10px 28px;
}
@media screen and (max-width: 768px) {
  .radius-8-button-small,
  .lesson-wrap .lesson-main .lesson-title-area .complete-button-area .lesson-login-button {
    padding: 12px 18px;
  }
}
main {
  position: relative;
  margin-bottom: 48px;
}
@media screen and (max-width: 414px) {
  main {
    margin-top: 62px;
  }
}
main.main-landing {
  background: #fff;
  margin-bottom: 0;
}
main.main-landing:not(.main-landing-about) {
  margin-top: 0;
}
main.main-index {
  margin-top: 0;
}
@media screen and (max-width: 414px) {
  main.main-index {
    margin-top: 62px;
  }
}
main.main-no-margin {
  margin-bottom: 0;
}
@media screen and (max-width: 414px) {
  main {
    width: 100%;
    overflow-x: hidden;
  }
}
._wrap-inner,
.inner-wrap,
._tab-menu-list,
.breadcrumbs,
.lesson-wrap-with-practice-sp .lesson-sp-tab-menu .lesson-sp-tab-menu-list,
.global-header .tmp-premium-user-label-block .tmp-premium-user-label-block-inner,
.global-header .global-header-row,
.global-footer .global-footer-row,
.global-footer .global-footer-copyright p,
.sp-global-footer .global-footer-row,
.sp-global-footer .global-footer-copyright p,
.course-category-wrap-inner,
.index-carousel .index-carousel-handle-container,
.index-tab-menu .index-tab-menu-list,
.premium-hero .premium-hero-inner,
.lesson-wrap,
.footer-lesson-text .footer-lesson-text-inner,
.mypage-row {
  width: 100%;
  height: 100%;
  max-width: 1000px;
  margin: 0 auto;
}
@media screen and (max-width: 1000px) {
  ._wrap-inner,
  .inner-wrap,
  ._tab-menu-list,
  .breadcrumbs,
  .lesson-wrap-with-practice-sp .lesson-sp-tab-menu .lesson-sp-tab-menu-list,
  .global-header .tmp-premium-user-label-block .tmp-premium-user-label-block-inner,
  .global-header .global-header-row,
  .global-footer .global-footer-row,
  .global-footer .global-footer-copyright p,
  .sp-global-footer .global-footer-row,
  .sp-global-footer .global-footer-copyright p,
  .course-category-wrap-inner,
  .index-carousel .index-carousel-handle-container,
  .index-tab-menu .index-tab-menu-list,
  .premium-hero .premium-hero-inner,
  .lesson-wrap,
  .footer-lesson-text .footer-lesson-text-inner,
  .mypage-row {
    width: 750px;
  }
}
@media screen and (max-width: 768px) {
  ._wrap-inner,
  .inner-wrap,
  ._tab-menu-list,
  .breadcrumbs,
  .lesson-wrap-with-practice-sp .lesson-sp-tab-menu .lesson-sp-tab-menu-list,
  .global-header .tmp-premium-user-label-block .tmp-premium-user-label-block-inner,
  .global-header .global-header-row,
  .global-footer .global-footer-row,
  .global-footer .global-footer-copyright p,
  .sp-global-footer .global-footer-row,
  .sp-global-footer .global-footer-copyright p,
  .course-category-wrap-inner,
  .index-carousel .index-carousel-handle-container,
  .index-tab-menu .index-tab-menu-list,
  .premium-hero .premium-hero-inner,
  .lesson-wrap,
  .footer-lesson-text .footer-lesson-text-inner,
  .mypage-row {
    padding: 0 10px;
    width: 100%;
  }
}
@media screen and (max-width: 414px) {
  ._wrap-inner,
  .inner-wrap,
  ._tab-menu-list,
  .breadcrumbs,
  .lesson-wrap-with-practice-sp .lesson-sp-tab-menu .lesson-sp-tab-menu-list,
  .global-header .tmp-premium-user-label-block .tmp-premium-user-label-block-inner,
  .global-header .global-header-row,
  .global-footer .global-footer-row,
  .global-footer .global-footer-copyright p,
  .sp-global-footer .global-footer-row,
  .sp-global-footer .global-footer-copyright p,
  .course-category-wrap-inner,
  .index-carousel .index-carousel-handle-container,
  .index-tab-menu .index-tab-menu-list,
  .premium-hero .premium-hero-inner,
  .lesson-wrap,
  .footer-lesson-text .footer-lesson-text-inner,
  .mypage-row {
    min-width: initial;
  }
}
.inner-wrap {
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  flex-wrap: wrap;
}
._section-white,
.course-list-section .course-list-section-item,
.modal-container .modal-body-container,
.lesson-wrap-with-practice-sp .lesson-main .premium-label-block,
.lesson-wrap-with-practice-sp .lesson-main .lesson-information-area .lesson-title-area,
.lesson-wrap-with-practice-sp .lesson-main .lesson-text-area,
.lesson-wrap-with-practice-sp .lesson-main .lesson-other-lessons .lesson-other-lessons-similar-lesson,
.lesson-wrap-with-practice-sp .lesson-main .lesson-other-lessons .lesson-other-lessons-recommended-course,
.lesson-wrap-with-practice-sp .lesson-main .lesson-other-lessons-similar-lesson,
.lesson-wrap-with-practice-sp .lesson-main .lesson-other-lessons-subscribe-button-container .lesson-other-lessons-subscribe-buttons,
.lesson-wrap-with-practice-pc .lesson-main .lesson-practice-area,
.lesson-wrap-with-practice-pc .lesson-main .lesson-practice-area .lesson-practice-area-sketch,
.lesson-wrap-with-practice-pc .lesson-main .lesson-practice-area .lesson-practice-area-sketch .lesson-practice-area-sketch-description .lesson-practice-area-sketch-link-draw .lesson-practice-area-sketch-link-draw-modal,
.lesson-wrap-with-practice-pc .lesson-main .lesson-other-lessons-similar-lesson,
.lesson-with-practice-lesson-text,
.lesson-video-overlay.before-play .lesson-video-locked-lesson-block,
.course-category-wrap-inner .course-category-description,
.lesson-wrap .lesson-main .premium-label-block,
.lesson-wrap .lesson-main .lesson-title-area,
.lesson-wrap .lesson-main .lesson-text-area,
.lesson-wrap .brush-download,
.lesson-wrap .lesson-other-lessons .lesson-other-lessons-similar-lesson,
.lesson-wrap .lesson-other-lessons .lesson-other-lessons-recommended-course,
.lesson-wrap .lesson-other-lessons .lesson-other-lessons-subscribe-buttons,
.course-description,
.course-lesson-list-container,
.mypage-row .mypage-course-history .mypage-course-history-item,
.mypage-row .mypage-sidebar .mypage-sidebar-my-status,
.making-description,
.making-introduce {
  width: 100%;
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
}
._section-white-header,
.lesson-wrap-with-practice-sp .lesson-main .lesson-other-lessons .lesson-other-lessons-similar-lesson .lesson-other-lessons-similar-lesson-title,
.lesson-wrap-with-practice-sp .lesson-main .lesson-other-lessons .lesson-other-lessons-recommended-course h1,
.lesson-wrap-with-practice-sp .lesson-main .lesson-other-lessons-similar-lesson .lesson-other-lessons-similar-lesson-title,
.lesson-wrap-with-practice-pc .lesson-main .lesson-other-lessons-similar-lesson .lesson-other-lessons-similar-lesson-title,
.lesson-wrap .brush-download .brush-download-head,
.lesson-wrap .lesson-other-lessons .lesson-other-lessons-similar-lesson .lesson-other-lessons-similar-lesson-title,
.lesson-wrap .lesson-other-lessons .lesson-other-lessons-recommended-course h1,
.making-introduce > h1 {
  border-bottom: 2px solid #fbf7ed;
  padding: 20px;
  font-size: 1rem;
  font-weight: 600;
}
._point-description-item,
._course-lesson-list-item .course-lesson-list-item-detail .lesson-point-description li,
.course-list-section .course-list-section-item .course-list-section-item-main .course-list-section-item-point-description li,
.lesson-wrap-with-practice-sp .lesson-main .lesson-information-area .lesson-practice-area .lesson-practice-area-description .lesson-practice-area-point-description ul li,
.lesson-wrap-with-practice-sp .lesson-main .lesson-other-lessons .lesson-other-lessons-similar-lesson .lesson-other-lessons-similar-lesson-list .lesson-other-lessons-similar-lesson-list-item .lesson-other-lessons-similar-lesson-list-item-inner .lesson-other-lessons-similar-lesson-list-item-point-description li,
.lesson-wrap-with-practice-sp .lesson-main .lesson-other-lessons-similar-lesson .lesson-other-lessons-similar-lesson-list .course-lesson-list-item .course-lesson-list-item-detail .lesson-point-description li,
.lesson-wrap-with-practice-pc .lesson-main .lesson-practice-area .lesson-practice-area-description .lesson-practice-area-point-description ul li,
.lesson-wrap-with-practice-pc .lesson-main .lesson-other-lessons-similar-lesson .lesson-other-lessons-similar-lesson-list .course-lesson-list-item .course-lesson-list-item-detail .lesson-point-description li,
.lesson-wrap .lesson-other-lessons .lesson-other-lessons-similar-lesson .lesson-other-lessons-similar-lesson-list .lesson-other-lessons-similar-lesson-list-item .lesson-other-lessons-similar-lesson-list-item-inner .lesson-other-lessons-similar-lesson-list-item-point-description li,
.lesson-wrap .lesson-other-lessons .lesson-other-lessons-recommended-course .lesson-other-lessons-recommended-course-main .lesson-other-lessons-recommended-course-point-description li,
.course-lesson-list-container .course-lesson-list-item .course-lesson-list-item-detail .lesson-point-description li {
  font-size: 0.8rem;
  list-style-image: url("../images/icons/icon-dot.svg");
  list-style-position: inside;
  line-height: 2;
}
._progress-container,
.course-list-section .course-list-section-item .course-list-section-item-count,
.course-description .course-description-main .course-description-progress .course-description-progress-count,
.mypage-row .mypage-course-history .mypage-course-history-item .mypage-course-history-item-header .mypage-course-history-item-progress-count {
  display: box;
  display: -webkit-box;
  display: flexbox;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
}
._progress-bar,
.course-list-section .course-list-section-item .course-list-section-item-count .course-list-section-item-count-bar,
.course-description .course-description-main .course-description-progress .course-description-progress-count .course-description-progress-count-bar,
.mypage-row .mypage-course-history .mypage-course-history-item .mypage-course-history-item-header .mypage-course-history-item-progress-count .mypage-course-history-item-progress-count-bar {
  box-flex: 3;
  -webkit-box-flex: 3;
  -webkit-flex: 3;
  -ms-flex: 3;
  flex: 3;
  height: 26px;
  border-radius: 100px;
  background: #fafafa;
  box-shadow: 0 1px 3px #ddd inset;
  vertical-align: middle;
  overflow: hidden;
}
._progress-bar-complete,
.course-list-section .course-list-section-item .course-list-section-item-count .course-list-section-item-count-bar .course-list-section-item-count-bar-complete,
.course-description .course-description-main .course-description-progress .course-description-progress-count .course-description-progress-count-bar .course-description-progress-count-bar-complete,
.mypage-row .mypage-course-history .mypage-course-history-item .mypage-course-history-item-header .mypage-course-history-item-progress-count .mypage-course-history-item-progress-count-bar .mypage-course-history-item-progress-count-bar-complete {
  padding: 4px 0 0 0;
  width: 100%;
  letter-spacing: 5px;
  font-weight: 600;
  font-size: 0.8rem;
  color: #fff;
  text-align: center;
  background-image: url("../images/bar-complete.png?20160823");
  background-repeat: repeat-x;
  box-shadow: 0 -1px 0 #d53b58 inset, 0 1px 0 #f07189 inset;
}
._progress-bar-scale,
.course-list-section .course-list-section-item .course-list-section-item-count .course-list-section-item-count-bar .course-list-section-item-count-bar-scale,
.course-description .course-description-main .course-description-progress .course-description-progress-count .course-description-progress-count-bar .course-description-progress-count-bar-scale,
.mypage-row .mypage-course-history .mypage-course-history-item .mypage-course-history-item-header .mypage-course-history-item-progress-count .mypage-course-history-item-progress-count-bar .mypage-course-history-item-progress-count-bar-scale {
  display: box;
  display: -webkit-box;
  display: flexbox;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  width: 100%;
  height: 26px;
}
._progress-bar-scale-division,
.course-list-section .course-list-section-item .course-list-section-item-count .course-list-section-item-count-bar .course-list-section-item-count-bar-scale-division,
.course-description .course-description-main .course-description-progress .course-description-progress-count .course-description-progress-count-bar .course-description-progress-count-bar-scale-division,
.mypage-row .mypage-course-history .mypage-course-history-item .mypage-course-history-item-header .mypage-course-history-item-progress-count .mypage-course-history-item-progress-count-bar .mypage-course-history-item-progress-count-bar-scale-division {
  box-flex: 1;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  height: 100%;
}
._progress-bar-scale-division:not(:first-child),
.course-list-section .course-list-section-item .course-list-section-item-count .course-list-section-item-count-bar .course-list-section-item-count-bar-scale-division:not(:first-child),
.course-description .course-description-main .course-description-progress .course-description-progress-count .course-description-progress-count-bar .course-description-progress-count-bar-scale-division:not(:first-child),
.mypage-row .mypage-course-history .mypage-course-history-item .mypage-course-history-item-header .mypage-course-history-item-progress-count .mypage-course-history-item-progress-count-bar .mypage-course-history-item-progress-count-bar-scale-division:not(:first-child) {
  border-left: 1px solid #ddd;
}
._progress-bar-scale-division.lesson-done,
.course-list-section .course-list-section-item .course-list-section-item-count .course-list-section-item-count-bar .course-list-section-item-count-bar-scale-division.lesson-done,
.course-description .course-description-main .course-description-progress .course-description-progress-count .course-description-progress-count-bar .course-description-progress-count-bar-scale-division.lesson-done,
.mypage-row .mypage-course-history .mypage-course-history-item .mypage-course-history-item-header .mypage-course-history-item-progress-count .mypage-course-history-item-progress-count-bar .mypage-course-history-item-progress-count-bar-scale-division.lesson-done {
  background-image: url("../images/bar.png?20160823");
  background-repeat: repeat-x;
  background-size: auto 26px;
  box-shadow: -1px 0 0 #0b78b8 inset, 0 1px 0 #13a7ff inset, 0 -1px 0 #0b78b8 inset;
  border-left: 1px solid rgba(255,255,255,0.5);
}
._progress-bar-scale-division.lesson-done:first-child,
.course-list-section .course-list-section-item .course-list-section-item-count .course-list-section-item-count-bar .course-list-section-item-count-bar-scale-division.lesson-done:first-child,
.course-description .course-description-main .course-description-progress .course-description-progress-count .course-description-progress-count-bar .course-description-progress-count-bar-scale-division.lesson-done:first-child,
.mypage-row .mypage-course-history .mypage-course-history-item .mypage-course-history-item-header .mypage-course-history-item-progress-count .mypage-course-history-item-progress-count-bar .mypage-course-history-item-progress-count-bar-scale-division.lesson-done:first-child {
  border-left: 1px solid transparent;
  border-top-left-radius: 100px;
  border-bottom-left-radius: 100px;
}
._progress-bar-scale-division.lesson-done:last-child,
.course-list-section .course-list-section-item .course-list-section-item-count .course-list-section-item-count-bar .course-list-section-item-count-bar-scale-division.lesson-done:last-child,
.course-description .course-description-main .course-description-progress .course-description-progress-count .course-description-progress-count-bar .course-description-progress-count-bar-scale-division.lesson-done:last-child,
.mypage-row .mypage-course-history .mypage-course-history-item .mypage-course-history-item-header .mypage-course-history-item-progress-count .mypage-course-history-item-progress-count-bar .mypage-course-history-item-progress-count-bar-scale-division.lesson-done:last-child {
  border-top-right-radius: 100px;
  border-bottom-right-radius: 100px;
}
._progress-count-number,
.course-list-section .course-list-section-item .course-list-section-item-count .course-list-section-item-count-number,
.course-description .course-description-main .course-description-progress .course-description-progress-count .course-description-progress-count-number,
.mypage-row .mypage-course-history .mypage-course-history-item .mypage-course-history-item-header .mypage-course-history-item-progress-count .mypage-course-history-item-progress-count-number {
  width: 80px;
  color: #999;
  font-size: 0.7rem;
  text-align: right;
  line-height: 1;
}
._progress-count-number strong,
.course-list-section .course-list-section-item .course-list-section-item-count .course-list-section-item-count-number strong,
.course-description .course-description-main .course-description-progress .course-description-progress-count .course-description-progress-count-number strong,
.mypage-row .mypage-course-history .mypage-course-history-item .mypage-course-history-item-header .mypage-course-history-item-progress-count .mypage-course-history-item-progress-count-number strong {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 4px;
  color: #333;
}
._progress-count-number-remained,
.course-list-section .course-list-section-item .course-list-section-item-count .course-list-section-item-count-number .course-list-section-item-count-number-remained,
.course-description .course-description-main .course-description-progress .course-description-progress-count .course-description-progress-count-number .course-description-progress-count-number-remained,
.mypage-row .mypage-course-history .mypage-course-history-item .mypage-course-history-item-header .mypage-course-history-item-progress-count .mypage-course-history-item-progress-count-number .mypage-course-history-item-progress-count-number-remained {
  color: #13a7ff;
}
._course-lesson-list-item,
.lesson-wrap-with-practice-sp .lesson-main .lesson-other-lessons-similar-lesson .lesson-other-lessons-similar-lesson-list .course-lesson-list-item,
.lesson-wrap-with-practice-pc .lesson-main .lesson-other-lessons-similar-lesson .lesson-other-lessons-similar-lesson-list .course-lesson-list-item,
.course-lesson-list-container .course-lesson-list-item {
  display: box;
  display: -webkit-box;
  display: flexbox;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  border-bottom: 1px dashed #ddd;
  padding: 20px 0;
}
._course-lesson-list-item:last-of-type,
.lesson-wrap-with-practice-sp .lesson-main .lesson-other-lessons-similar-lesson .lesson-other-lessons-similar-lesson-list .course-lesson-list-item:last-of-type,
.lesson-wrap-with-practice-pc .lesson-main .lesson-other-lessons-similar-lesson .lesson-other-lessons-similar-lesson-list .course-lesson-list-item:last-of-type,
.course-lesson-list-container .course-lesson-list-item:last-of-type {
  border-bottom: 0;
}
@media screen and (max-width: 768px) {
  ._course-lesson-list-item,
  .lesson-wrap-with-practice-sp .lesson-main .lesson-other-lessons-similar-lesson .lesson-other-lessons-similar-lesson-list .course-lesson-list-item,
  .lesson-wrap-with-practice-pc .lesson-main .lesson-other-lessons-similar-lesson .lesson-other-lessons-similar-lesson-list .course-lesson-list-item,
  .course-lesson-list-container .course-lesson-list-item {
    display: block;
    padding: 0;
  }
}
._course-lesson-list-item .course-lesson-list-item-number,
.lesson-wrap-with-practice-sp .lesson-main .lesson-other-lessons-similar-lesson .lesson-other-lessons-similar-lesson-list .course-lesson-list-item .course-lesson-list-item-number,
.lesson-wrap-with-practice-pc .lesson-main .lesson-other-lessons-similar-lesson .lesson-other-lessons-similar-lesson-list .course-lesson-list-item .course-lesson-list-item-number,
.course-lesson-list-container .course-lesson-list-item .course-lesson-list-item-number {
  width: 3rem;
  text-align: center;
  color: #999;
  font-weight: bold;
  font-size: 2rem;
}
@media screen and (max-width: 768px) {
  ._course-lesson-list-item .course-lesson-list-item-number,
  .lesson-wrap-with-practice-sp .lesson-main .lesson-other-lessons-similar-lesson .lesson-other-lessons-similar-lesson-list .course-lesson-list-item .course-lesson-list-item-number,
  .lesson-wrap-with-practice-pc .lesson-main .lesson-other-lessons-similar-lesson .lesson-other-lessons-similar-lesson-list .course-lesson-list-item .course-lesson-list-item-number,
  .course-lesson-list-container .course-lesson-list-item .course-lesson-list-item-number {
    width: 100%;
    text-align: left;
  }
}
._course-lesson-list-item .course-lesson-list-item-thumbnail,
.lesson-wrap-with-practice-sp .lesson-main .lesson-other-lessons-similar-lesson .lesson-other-lessons-similar-lesson-list .course-lesson-list-item .course-lesson-list-item-thumbnail,
.lesson-wrap-with-practice-pc .lesson-main .lesson-other-lessons-similar-lesson .lesson-other-lessons-similar-lesson-list .course-lesson-list-item .course-lesson-list-item-thumbnail,
.course-lesson-list-container .course-lesson-list-item .course-lesson-list-item-thumbnail {
  box-flex: 3;
  -webkit-box-flex: 3;
  -webkit-flex: 3;
  -ms-flex: 3;
  flex: 3;
  -webkit-box-align-self: flex-start;
  -webkit-align-self: flex-start;
  align-self: flex-start;
  border-radius: 8px;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  ._course-lesson-list-item .course-lesson-list-item-thumbnail,
  .lesson-wrap-with-practice-sp .lesson-main .lesson-other-lessons-similar-lesson .lesson-other-lessons-similar-lesson-list .course-lesson-list-item .course-lesson-list-item-thumbnail,
  .lesson-wrap-with-practice-pc .lesson-main .lesson-other-lessons-similar-lesson .lesson-other-lessons-similar-lesson-list .course-lesson-list-item .course-lesson-list-item-thumbnail,
  .course-lesson-list-container .course-lesson-list-item .course-lesson-list-item-thumbnail {
    width: 100%;
  }
}
._course-lesson-list-item .course-lesson-list-item-thumbnail a,
.lesson-wrap-with-practice-sp .lesson-main .lesson-other-lessons-similar-lesson .lesson-other-lessons-similar-lesson-list .course-lesson-list-item .course-lesson-list-item-thumbnail a,
.lesson-wrap-with-practice-pc .lesson-main .lesson-other-lessons-similar-lesson .lesson-other-lessons-similar-lesson-list .course-lesson-list-item .course-lesson-list-item-thumbnail a,
.course-lesson-list-container .course-lesson-list-item .course-lesson-list-item-thumbnail a {
  position: relative;
}
._course-lesson-list-item .course-lesson-list-item-thumbnail a > img,
.lesson-wrap-with-practice-sp .lesson-main .lesson-other-lessons-similar-lesson .lesson-other-lessons-similar-lesson-list .course-lesson-list-item .course-lesson-list-item-thumbnail a > img,
.lesson-wrap-with-practice-pc .lesson-main .lesson-other-lessons-similar-lesson .lesson-other-lessons-similar-lesson-list .course-lesson-list-item .course-lesson-list-item-thumbnail a > img,
.course-lesson-list-container .course-lesson-list-item .course-lesson-list-item-thumbnail a > img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}
._course-lesson-list-item .course-lesson-list-item-thumbnail a .course-lesson-list-item-thumbnail-overlay,
.lesson-wrap-with-practice-sp .lesson-main .lesson-other-lessons-similar-lesson .lesson-other-lessons-similar-lesson-list .course-lesson-list-item .course-lesson-list-item-thumbnail a .course-lesson-list-item-thumbnail-overlay,
.lesson-wrap-with-practice-pc .lesson-main .lesson-other-lessons-similar-lesson .lesson-other-lessons-similar-lesson-list .course-lesson-list-item .course-lesson-list-item-thumbnail a .course-lesson-list-item-thumbnail-overlay,
.course-lesson-list-container .course-lesson-list-item .course-lesson-list-item-thumbnail a .course-lesson-list-item-thumbnail-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
._course-lesson-list-item .course-lesson-list-item-thumbnail a .course-lesson-list-item-thumbnail-overlay .course-lesson-list-item-thumbnail-play-button,
.lesson-wrap-with-practice-sp .lesson-main .lesson-other-lessons-similar-lesson .lesson-other-lessons-similar-lesson-list .course-lesson-list-item .course-lesson-list-item-thumbnail a .course-lesson-list-item-thumbnail-overlay .course-lesson-list-item-thumbnail-play-button,
.lesson-wrap-with-practice-pc .lesson-main .lesson-other-lessons-similar-lesson .lesson-other-lessons-similar-lesson-list .course-lesson-list-item .course-lesson-list-item-thumbnail a .course-lesson-list-item-thumbnail-overlay .course-lesson-list-item-thumbnail-play-button,
.course-lesson-list-container .course-lesson-list-item .course-lesson-list-item-thumbnail a .course-lesson-list-item-thumbnail-overlay .course-lesson-list-item-thumbnail-play-button {
  position: absolute;
  width: 54px;
  height: 54px;
  left: 50%;
  top: 50%;
  margin: -27px 0 0 -27px;
}
._course-lesson-list-item .course-lesson-list-item-thumbnail a .course-lesson-list-item-thumbnail-overlay .course-lesson-list-item-thumbnail-play-button>img,
.lesson-wrap-with-practice-sp .lesson-main .lesson-other-lessons-similar-lesson .lesson-other-lessons-similar-lesson-list .course-lesson-list-item .course-lesson-list-item-thumbnail a .course-lesson-list-item-thumbnail-overlay .course-lesson-list-item-thumbnail-play-button>img,
.lesson-wrap-with-practice-pc .lesson-main .lesson-other-lessons-similar-lesson .lesson-other-lessons-similar-lesson-list .course-lesson-list-item .course-lesson-list-item-thumbnail a .course-lesson-list-item-thumbnail-overlay .course-lesson-list-item-thumbnail-play-button>img,
.course-lesson-list-container .course-lesson-list-item .course-lesson-list-item-thumbnail a .course-lesson-list-item-thumbnail-overlay .course-lesson-list-item-thumbnail-play-button>img {
  width: 100%;
  height: 100%;
}
._course-lesson-list-item .course-lesson-list-item-detail,
.lesson-wrap-with-practice-sp .lesson-main .lesson-other-lessons-similar-lesson .lesson-other-lessons-similar-lesson-list .course-lesson-list-item .course-lesson-list-item-detail,
.lesson-wrap-with-practice-pc .lesson-main .lesson-other-lessons-similar-lesson .lesson-other-lessons-similar-lesson-list .course-lesson-list-item .course-lesson-list-item-detail,
.course-lesson-list-container .course-lesson-list-item .course-lesson-list-item-detail {
  box-flex: 5;
  -webkit-box-flex: 5;
  -webkit-flex: 5;
  -ms-flex: 5;
  flex: 5;
  padding: 0 20px;
  position: relative;
}
@media screen and (max-width: 768px) {
  ._course-lesson-list-item .course-lesson-list-item-detail,
  .lesson-wrap-with-practice-sp .lesson-main .lesson-other-lessons-similar-lesson .lesson-other-lessons-similar-lesson-list .course-lesson-list-item .course-lesson-list-item-detail,
  .lesson-wrap-with-practice-pc .lesson-main .lesson-other-lessons-similar-lesson .lesson-other-lessons-similar-lesson-list .course-lesson-list-item .course-lesson-list-item-detail,
  .course-lesson-list-container .course-lesson-list-item .course-lesson-list-item-detail {
    padding: 0;
    margin-top: 20px;
  }
}
._course-lesson-list-item .course-lesson-list-item-detail .course-lesson-list-item-title,
.lesson-wrap-with-practice-sp .lesson-main .lesson-other-lessons-similar-lesson .lesson-other-lessons-similar-lesson-list .course-lesson-list-item .course-lesson-list-item-detail .course-lesson-list-item-title,
.lesson-wrap-with-practice-pc .lesson-main .lesson-other-lessons-similar-lesson .lesson-other-lessons-similar-lesson-list .course-lesson-list-item .course-lesson-list-item-detail .course-lesson-list-item-title,
.course-lesson-list-container .course-lesson-list-item .course-lesson-list-item-detail .course-lesson-list-item-title {
  margin-bottom: 10px;
  font-size: 1.25rem;
}
._course-lesson-list-item .course-lesson-list-item-detail .course-lesson-list-item-title .title-link,
.lesson-wrap-with-practice-sp .lesson-main .lesson-other-lessons-similar-lesson .lesson-other-lessons-similar-lesson-list .course-lesson-list-item .course-lesson-list-item-detail .course-lesson-list-item-title .title-link,
.lesson-wrap-with-practice-pc .lesson-main .lesson-other-lessons-similar-lesson .lesson-other-lessons-similar-lesson-list .course-lesson-list-item .course-lesson-list-item-detail .course-lesson-list-item-title .title-link,
.course-lesson-list-container .course-lesson-list-item .course-lesson-list-item-detail .course-lesson-list-item-title .title-link {
  text-decoration: underline;
}
._course-lesson-list-item .course-lesson-list-item-detail .course-lesson-list-item-see-lesson,
.lesson-wrap-with-practice-sp .lesson-main .lesson-other-lessons-similar-lesson .lesson-other-lessons-similar-lesson-list .course-lesson-list-item .course-lesson-list-item-detail .course-lesson-list-item-see-lesson,
.lesson-wrap-with-practice-pc .lesson-main .lesson-other-lessons-similar-lesson .lesson-other-lessons-similar-lesson-list .course-lesson-list-item .course-lesson-list-item-detail .course-lesson-list-item-see-lesson,
.course-lesson-list-container .course-lesson-list-item .course-lesson-list-item-detail .course-lesson-list-item-see-lesson {
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: rgba(19,167,255,0.2);
  color: #13a7ff;
  font-weight: 600;
  padding: 7px 20px;
  border-radius: 4px;
}
@media screen and (max-width: 768px) {
  ._course-lesson-list-item .course-lesson-list-item-detail .course-lesson-list-item-see-lesson,
  .lesson-wrap-with-practice-sp .lesson-main .lesson-other-lessons-similar-lesson .lesson-other-lessons-similar-lesson-list .course-lesson-list-item .course-lesson-list-item-detail .course-lesson-list-item-see-lesson,
  .lesson-wrap-with-practice-pc .lesson-main .lesson-other-lessons-similar-lesson .lesson-other-lessons-similar-lesson-list .course-lesson-list-item .course-lesson-list-item-detail .course-lesson-list-item-see-lesson,
  .course-lesson-list-container .course-lesson-list-item .course-lesson-list-item-detail .course-lesson-list-item-see-lesson {
    position: static;
    width: 100%;
    text-align: center;
    margin: 20px 0;
  }
}
._course-lesson-list-item .course-lesson-list-item-detail .course-lesson-list-item-complete-info,
.lesson-wrap-with-practice-sp .lesson-main .lesson-other-lessons-similar-lesson .lesson-other-lessons-similar-lesson-list .course-lesson-list-item .course-lesson-list-item-detail .course-lesson-list-item-complete-info,
.lesson-wrap-with-practice-pc .lesson-main .lesson-other-lessons-similar-lesson .lesson-other-lessons-similar-lesson-list .course-lesson-list-item .course-lesson-list-item-detail .course-lesson-list-item-complete-info,
.course-lesson-list-container .course-lesson-list-item .course-lesson-list-item-detail .course-lesson-list-item-complete-info {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 0.8rem;
}
._course-lesson-list-item .course-lesson-list-item-detail .course-lesson-list-item-complete-info > .fa,
.lesson-wrap-with-practice-sp .lesson-main .lesson-other-lessons-similar-lesson .lesson-other-lessons-similar-lesson-list .course-lesson-list-item .course-lesson-list-item-detail .course-lesson-list-item-complete-info > .fa,
.lesson-wrap-with-practice-pc .lesson-main .lesson-other-lessons-similar-lesson .lesson-other-lessons-similar-lesson-list .course-lesson-list-item .course-lesson-list-item-detail .course-lesson-list-item-complete-info > .fa,
.course-lesson-list-container .course-lesson-list-item .course-lesson-list-item-detail .course-lesson-list-item-complete-info > .fa {
  color: #77d91c;
}
._course-lesson-list-item .course-lesson-list-item-detail .see-lesson-arrow,
.lesson-wrap-with-practice-sp .lesson-main .lesson-other-lessons-similar-lesson .lesson-other-lessons-similar-lesson-list .course-lesson-list-item .course-lesson-list-item-detail .see-lesson-arrow,
.lesson-wrap-with-practice-pc .lesson-main .lesson-other-lessons-similar-lesson .lesson-other-lessons-similar-lesson-list .course-lesson-list-item .course-lesson-list-item-detail .see-lesson-arrow,
.course-lesson-list-container .course-lesson-list-item .course-lesson-list-item-detail .see-lesson-arrow {
  width: 14px;
  height: 14px;
  padding-bottom: 4px;
}
._tab-menu-list,
.lesson-wrap-with-practice-sp .lesson-sp-tab-menu .lesson-sp-tab-menu-list,
.index-tab-menu .index-tab-menu-list {
  display: box;
  display: -webkit-box;
  display: flexbox;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
}
._tab-menu-list .tab-menu-list-item,
.lesson-wrap-with-practice-sp .lesson-sp-tab-menu .lesson-sp-tab-menu-list .tab-menu-list-item,
.index-tab-menu .index-tab-menu-list .tab-menu-list-item {
  box-flex: 1;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: box;
  display: -webkit-box;
  display: flexbox;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  -webkit-box-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
  position: relative;
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;
  background: #13a7ff;
  color: #fff;
  text-align: center;
  padding: 10px;
  border-top: 1px solid rgba(153,153,153,0.5);
  border-right: 1px solid rgba(153,153,153,0.5);
  border-left: 1px solid rgba(153,153,153,0.5);
  margin: 0 10px;
}
@media screen and (max-width: 768px) {
  ._tab-menu-list .tab-menu-list-item,
  .lesson-wrap-with-practice-sp .lesson-sp-tab-menu .lesson-sp-tab-menu-list .tab-menu-list-item,
  .index-tab-menu .index-tab-menu-list .tab-menu-list-item {
    margin: 0 5px;
  }
}
._tab-menu-list .tab-menu-list-item:first-of-type,
.lesson-wrap-with-practice-sp .lesson-sp-tab-menu .lesson-sp-tab-menu-list .tab-menu-list-item:first-of-type,
.index-tab-menu .index-tab-menu-list .tab-menu-list-item:first-of-type {
  margin-left: 0;
}
._tab-menu-list .tab-menu-list-item:last-of-type,
.lesson-wrap-with-practice-sp .lesson-sp-tab-menu .lesson-sp-tab-menu-list .tab-menu-list-item:last-of-type,
.index-tab-menu .index-tab-menu-list .tab-menu-list-item:last-of-type {
  margin-right: 0;
}
._tab-menu-list .tab-menu-list-item:not(.tab-menu-list-item-active),
.lesson-wrap-with-practice-sp .lesson-sp-tab-menu .lesson-sp-tab-menu-list .tab-menu-list-item:not(.tab-menu-list-item-active),
.index-tab-menu .index-tab-menu-list .tab-menu-list-item:not(.tab-menu-list-item-active) {
  cursor: pointer;
}
._tab-menu-list .tab-menu-list-item:not(.tab-menu-list-item-active):hover,
.lesson-wrap-with-practice-sp .lesson-sp-tab-menu .lesson-sp-tab-menu-list .tab-menu-list-item:not(.tab-menu-list-item-active):hover,
.index-tab-menu .index-tab-menu-list .tab-menu-list-item:not(.tab-menu-list-item-active):hover {
  background: #0b78b8;
}
._tab-menu-list .tab-menu-list-item.tab-menu-list-item-active,
.lesson-wrap-with-practice-sp .lesson-sp-tab-menu .lesson-sp-tab-menu-list .tab-menu-list-item.tab-menu-list-item-active,
.index-tab-menu .index-tab-menu-list .tab-menu-list-item.tab-menu-list-item-active {
  color: #797873;
}
._tab-menu-list .tab-menu-list-item.tab-menu-list-item-active .tab-menu-list-item-caption,
.lesson-wrap-with-practice-sp .lesson-sp-tab-menu .lesson-sp-tab-menu-list .tab-menu-list-item.tab-menu-list-item-active .tab-menu-list-item-caption,
.index-tab-menu .index-tab-menu-list .tab-menu-list-item.tab-menu-list-item-active .tab-menu-list-item-caption {
  color: #13a7ff;
}
._tab-menu-list .tab-menu-list-item .tab-menu-list-item-title,
.lesson-wrap-with-practice-sp .lesson-sp-tab-menu .lesson-sp-tab-menu-list .tab-menu-list-item .tab-menu-list-item-title,
.index-tab-menu .index-tab-menu-list .tab-menu-list-item .tab-menu-list-item-title {
  margin: auto;
  font-size: 1.6rem;
  font-weight: 600;
}
@media screen and (max-width: 1000px) {
  ._tab-menu-list .tab-menu-list-item .tab-menu-list-item-title,
  .lesson-wrap-with-practice-sp .lesson-sp-tab-menu .lesson-sp-tab-menu-list .tab-menu-list-item .tab-menu-list-item-title,
  .index-tab-menu .index-tab-menu-list .tab-menu-list-item .tab-menu-list-item-title {
    padding: 4px 0;
    font-size: 1rem;
    line-height: 1.25rem;
  }
}
@media screen and (max-width: 414px) {
  ._tab-menu-list .tab-menu-list-item .tab-menu-list-item-title,
  .lesson-wrap-with-practice-sp .lesson-sp-tab-menu .lesson-sp-tab-menu-list .tab-menu-list-item .tab-menu-list-item-title,
  .index-tab-menu .index-tab-menu-list .tab-menu-list-item .tab-menu-list-item-title {
    padding: 0;
    font-size: 0.7rem;
  }
}
._tab-menu-list .tab-menu-list-item .tab-menu-list-item-caption,
.lesson-wrap-with-practice-sp .lesson-sp-tab-menu .lesson-sp-tab-menu-list .tab-menu-list-item .tab-menu-list-item-caption,
.index-tab-menu .index-tab-menu-list .tab-menu-list-item .tab-menu-list-item-caption {
  font-size: 0.8rem;
}
@media screen and (max-width: 414px) {
  ._tab-menu-list .tab-menu-list-item .tab-menu-list-item-caption,
  .lesson-wrap-with-practice-sp .lesson-sp-tab-menu .lesson-sp-tab-menu-list .tab-menu-list-item .tab-menu-list-item-caption,
  .index-tab-menu .index-tab-menu-list .tab-menu-list-item .tab-menu-list-item-caption {
    display: none;
  }
}
._tab-menu-list .tab-menu-list-item .tab-menu-list-item-is-new,
.lesson-wrap-with-practice-sp .lesson-sp-tab-menu .lesson-sp-tab-menu-list .tab-menu-list-item .tab-menu-list-item-is-new,
.index-tab-menu .index-tab-menu-list .tab-menu-list-item .tab-menu-list-item-is-new {
  position: absolute;
  width: 2.5rem;
  height: 2.5rem;
  background-color: #ff4a6d;
  border-radius: 50%;
  top: -1rem;
  right: -0.5rem;
  line-height: 2;
  box-shadow: 0 2px 2px rgba(51,51,51,0.2);
}
@media screen and (max-width: 414px) {
  ._tab-menu-list .tab-menu-list-item .tab-menu-list-item-is-new,
  .lesson-wrap-with-practice-sp .lesson-sp-tab-menu .lesson-sp-tab-menu-list .tab-menu-list-item .tab-menu-list-item-is-new,
  .index-tab-menu .index-tab-menu-list .tab-menu-list-item .tab-menu-list-item-is-new {
    width: 2.2rem;
    height: 2.2rem;
    top: -1.5rem;
    right: -0.5rem;
  }
}
._tab-menu-list .tab-menu-list-item .tab-menu-list-item-is-new:before,
.lesson-wrap-with-practice-sp .lesson-sp-tab-menu .lesson-sp-tab-menu-list .tab-menu-list-item .tab-menu-list-item-is-new:before,
.index-tab-menu .index-tab-menu-list .tab-menu-list-item .tab-menu-list-item-is-new:before {
  content: 'NEW';
  color: #fff;
  font-weight: 600;
  font-size: 0.8rem;
  line-height: 2.5rem;
  vertical-align: middle;
}
@media screen and (max-width: 414px) {
  ._tab-menu-list .tab-menu-list-item .tab-menu-list-item-is-new:before,
  .lesson-wrap-with-practice-sp .lesson-sp-tab-menu .lesson-sp-tab-menu-list .tab-menu-list-item .tab-menu-list-item-is-new:before,
  .index-tab-menu .index-tab-menu-list .tab-menu-list-item .tab-menu-list-item-is-new:before {
    font-size: 0.7rem;
    line-height: 0.7rem;
  }
}
.btn-yellow {
  -webkit-transition: background-color 0.2s ease 0s;
  transition: background-color 0.2s ease 0s;
  display: inline-block;
  background-color: #ffed78;
  color: #333;
  text-decoration: none;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
  border: 2px solid transparent;
  box-shadow: 0 2px 0 0 #e7d76e;
}
.btn-yellow:hover {
  color: #333;
  text-decoration: none;
}
.btn-yellow[disabled] {
  background: #ccc;
  box-shadow: 0 2px 0 0 #999;
  cursor: not-allowed;
}
.btn-yellow:not([disabled]):hover {
  background-color: #e7d76e;
}
@media screen and (max-width: 414px) {
  .btn-yellow:hover {
    background-color: #ffed78;
  }
}
.btn-blue,
.video-screen .login-block .login-btn-only-service-user .login-btn-wide,
.video-screen .login-block .login-btn,
.course-section .detail-course-btn,
.lesson-wrap-with-practice-sp .lesson-main .lesson-information-area .lesson-title-area .complete-button-area .complete-button.sls-reset,
.lesson-wrap .lesson-main .lesson-title-area .complete-button-area .complete-button.sls-reset {
  -webkit-transition: background-color 0.2s ease 0s;
  transition: background-color 0.2s ease 0s;
  display: inline-block;
  background-color: #13a7ff;
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
  border: 2px solid transparent;
  box-shadow: 0 2px 0 0 #0b78b8;
}
.btn-blue:hover,
.video-screen .login-block .login-btn-only-service-user .login-btn-wide:hover,
.video-screen .login-block .login-btn:hover,
.course-section .detail-course-btn:hover,
.lesson-wrap-with-practice-sp .lesson-main .lesson-information-area .lesson-title-area .complete-button-area .complete-button.sls-reset:hover,
.lesson-wrap .lesson-main .lesson-title-area .complete-button-area .complete-button.sls-reset:hover {
  color: #fff;
  text-decoration: none;
}
.btn-blue[disabled],
.video-screen .login-block .login-btn-only-service-user .login-btn-wide[disabled],
.video-screen .login-block .login-btn[disabled],
.course-section .detail-course-btn[disabled],
.lesson-wrap-with-practice-sp .lesson-main .lesson-information-area .lesson-title-area .complete-button-area .complete-button.sls-reset[disabled],
.lesson-wrap .lesson-main .lesson-title-area .complete-button-area .complete-button.sls-reset[disabled] {
  background: #ccc;
  box-shadow: 0 2px 0 0 #999;
  cursor: not-allowed;
}
.btn-blue:not([disabled]):hover,
.video-screen .login-block .login-btn-only-service-user .login-btn-wide:not([disabled]):hover,
.video-screen .login-block .login-btn:not([disabled]):hover,
.course-section .detail-course-btn:not([disabled]):hover,
.lesson-wrap-with-practice-sp .lesson-main .lesson-information-area .lesson-title-area .complete-button-area .complete-button.sls-reset:not([disabled]):hover,
.lesson-wrap .lesson-main .lesson-title-area .complete-button-area .complete-button.sls-reset:not([disabled]):hover {
  background-color: #0b78b8;
}
@media screen and (max-width: 414px) {
  .btn-blue:hover,
  .video-screen .login-block .login-btn-only-service-user .login-btn-wide:hover,
  .video-screen .login-block .login-btn:hover,
  .course-section .detail-course-btn:hover,
  .lesson-wrap-with-practice-sp .lesson-main .lesson-information-area .lesson-title-area .complete-button-area .complete-button.sls-reset:hover,
  .lesson-wrap .lesson-main .lesson-title-area .complete-button-area .complete-button.sls-reset:hover {
    background-color: #13a7ff;
  }
}
.btn-green,
.lesson-wrap-with-practice-sp .lesson-main .lesson-information-area .lesson-title-area .complete-button-area .lesson-login-button,
.lesson-wrap .lesson-main .lesson-title-area .complete-button-area .lesson-login-button {
  -webkit-transition: background-color 0.2s ease 0s;
  transition: background-color 0.2s ease 0s;
  display: inline-block;
  background-color: #77d91c;
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
  border: 2px solid transparent;
  box-shadow: 0 2px 0 0 #55b100;
}
.btn-green:hover,
.lesson-wrap-with-practice-sp .lesson-main .lesson-information-area .lesson-title-area .complete-button-area .lesson-login-button:hover,
.lesson-wrap .lesson-main .lesson-title-area .complete-button-area .lesson-login-button:hover {
  color: #fff;
  text-decoration: none;
}
.btn-green[disabled],
.lesson-wrap-with-practice-sp .lesson-main .lesson-information-area .lesson-title-area .complete-button-area .lesson-login-button[disabled],
.lesson-wrap .lesson-main .lesson-title-area .complete-button-area .lesson-login-button[disabled] {
  background: #ccc;
  box-shadow: 0 2px 0 0 #999;
  cursor: not-allowed;
}
.btn-green:not([disabled]):hover,
.lesson-wrap-with-practice-sp .lesson-main .lesson-information-area .lesson-title-area .complete-button-area .lesson-login-button:not([disabled]):hover,
.lesson-wrap .lesson-main .lesson-title-area .complete-button-area .lesson-login-button:not([disabled]):hover {
  background-color: #55b100;
}
@media screen and (max-width: 414px) {
  .btn-green:hover,
  .lesson-wrap-with-practice-sp .lesson-main .lesson-information-area .lesson-title-area .complete-button-area .lesson-login-button:hover,
  .lesson-wrap .lesson-main .lesson-title-area .complete-button-area .lesson-login-button:hover {
    background-color: #77d91c;
  }
}
.btn-orange {
  -webkit-transition: background-color 0.2s ease 0s;
  transition: background-color 0.2s ease 0s;
  display: inline-block;
  background-color: #ff962b;
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
  border: 2px solid transparent;
  box-shadow: 0 2px 0 0 #cb7823;
}
.btn-orange:hover {
  color: #fff;
  text-decoration: none;
}
.btn-orange[disabled] {
  background: #ccc;
  box-shadow: 0 2px 0 0 #999;
  cursor: not-allowed;
}
.btn-orange:not([disabled]):hover {
  background-color: #cb7823;
}
@media screen and (max-width: 414px) {
  .btn-orange:hover {
    background-color: #ff962b;
  }
}
.btn-cream {
  -webkit-transition: background-color 0.2s ease 0s;
  transition: background-color 0.2s ease 0s;
  display: inline-block;
  background-color: #fff5af;
  color: #333;
  text-decoration: none;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
  border: 2px solid transparent;
  box-shadow: 0 2px 0 0 #e7d76e;
}
.btn-cream:hover {
  color: #333;
  text-decoration: none;
}
.btn-cream[disabled] {
  background: #ccc;
  box-shadow: 0 2px 0 0 #999;
  cursor: not-allowed;
}
.btn-cream:not([disabled]):hover {
  background-color: #e7d76e;
}
@media screen and (max-width: 414px) {
  .btn-cream:hover {
    background-color: #fff5af;
  }
}
.btn-white,
.lesson-wrap-with-practice-sp .lesson-main .lesson-information-area .lesson-title-area .complete-button-area .complete-button.sls-complete,
.lesson-wrap .lesson-main .lesson-title-area .complete-button-area .complete-button.sls-complete {
  -webkit-transition: background-color 0.2s ease 0s;
  transition: background-color 0.2s ease 0s;
  display: inline-block;
  background-color: #fff;
  color: #333;
  text-decoration: none;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
  box-sizing: border-box;
  border: 2px solid #ddd;
  box-shadow: 0 2px 0 0 #ddd;
}
.btn-white:hover,
.lesson-wrap-with-practice-sp .lesson-main .lesson-information-area .lesson-title-area .complete-button-area .complete-button.sls-complete:hover,
.lesson-wrap .lesson-main .lesson-title-area .complete-button-area .complete-button.sls-complete:hover {
  color: #333;
  text-decoration: none;
}
.btn-white[disabled],
.lesson-wrap-with-practice-sp .lesson-main .lesson-information-area .lesson-title-area .complete-button-area .complete-button.sls-complete[disabled],
.lesson-wrap .lesson-main .lesson-title-area .complete-button-area .complete-button.sls-complete[disabled] {
  background: #ccc;
  box-shadow: 0 2px 0 0 #999;
  cursor: not-allowed;
}
.btn-white:not([disabled]):hover,
.lesson-wrap-with-practice-sp .lesson-main .lesson-information-area .lesson-title-area .complete-button-area .complete-button.sls-complete:not([disabled]):hover,
.lesson-wrap .lesson-main .lesson-title-area .complete-button-area .complete-button.sls-complete:not([disabled]):hover {
  background-color: #ddd;
}
.share-button,
.course-share-button {
  display: box;
  display: -webkit-box;
  display: flexbox;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
}
.breadcrumbs {
  height: auto;
  padding: 16px 0;
}
@media screen and (max-width: 768px) {
  .breadcrumbs {
    display: none;
  }
}
.breadcrumbs li {
  vertical-align: middle;
  display: inline-block;
  font-size: 0.8rem;
  line-height: 1.2rem;
  margin-right: 4px;
}
.breadcrumbs li .breadcrumbs-icon-home {
  width: 1.2rem;
  height: 1.2rem;
}
.breadcrumbs li > img {
  width: 10px;
  height: 10px;
}
.breadcrumbs li a {
  font-weight: 600;
}
.breadcrumbs .breadcrumb-page-name {
  padding-top: 3px;
}
._tooltip-container,
.global-header .global-header-action-tooltip,
.global-header .global-header-hamburger-tooltip,
.index-learning-guide-link-container .index-learning-guide-tooltip {
  z-index: 0;
  position: absolute;
  text-align: center;
  display: none;
}
._tooltip-container .tooltip,
.global-header .global-header-action-tooltip .tooltip,
.global-header .global-header-hamburger-tooltip .tooltip,
.index-learning-guide-link-container .index-learning-guide-tooltip .tooltip {
  display: box;
  display: -webkit-box;
  display: flexbox;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  background-color: #333;
  border-radius: 4px;
  color: #fff;
  margin: 0 auto;
}
._tooltip-container .tooltip .tooltip-message,
.global-header .global-header-action-tooltip .tooltip .tooltip-message,
.global-header .global-header-hamburger-tooltip .tooltip .tooltip-message,
.index-learning-guide-link-container .index-learning-guide-tooltip .tooltip .tooltip-message {
  display: block;
  padding: 5px 5px 5px 10px;
  font-size: 0.8rem;
  font-weight: 600;
  text-align: center;
  line-height: 2;
}
._tooltip-container .tooltip .tooltip-close-button,
.global-header .global-header-action-tooltip .tooltip .tooltip-close-button,
.global-header .global-header-hamburger-tooltip .tooltip .tooltip-close-button,
.index-learning-guide-link-container .index-learning-guide-tooltip .tooltip .tooltip-close-button {
  display: block;
  padding: 3px 8px;
  cursor: pointer;
}
._tooltip-container .tooltip .tooltip-close-button > img,
.global-header .global-header-action-tooltip .tooltip .tooltip-close-button > img,
.global-header .global-header-hamburger-tooltip .tooltip .tooltip-close-button > img,
.index-learning-guide-link-container .index-learning-guide-tooltip .tooltip .tooltip-close-button > img {
  width: 12px;
  height: 12px;
}
.course-list-section {
  display: box;
  display: -webkit-box;
  display: flexbox;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  flex-wrap: wrap;
}
.course-list-section .course-list-section-item {
  position: relative;
  box-sizing: border-box;
  margin-bottom: 20px;
  box-shadow: 0 1px 2px #ccc8b7;
  width: 320px;
}
.course-list-section .course-list-section-item:not(:nth-of-type(3n)) {
  margin-right: 20px;
}
@media screen and (max-width: 1000px) {
  .course-list-section .course-list-section-item {
    width: 370px;
  }
  .course-list-section .course-list-section-item:not(:nth-of-type(3n)) {
    margin-right: 0;
  }
  .course-list-section .course-list-section-item:not(:nth-of-type(2n)) {
    margin-right: 10px;
  }
}
@media screen and (max-width: 768px) {
  .course-list-section .course-list-section-item {
    width: 100%;
  }
  .course-list-section .course-list-section-item:not(:nth-of-type(2n)) {
    margin-right: 0;
  }
}
.course-list-section .course-list-section-item .course-list-section-item-thumbnail {
  width: 100%;
  height: auto;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.course-list-section .course-list-section-item .course-list-section-item-main {
  height: 9rem;
}
.course-list-section .course-list-section-item .course-list-section-item-main h2 {
  padding: 12px;
}
.course-list-section .course-list-section-item .course-list-section-item-main h2 .course-list-section-item-badge.basic {
  color: #fff;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 600;
  display: inline;
  vertical-align: middle;
  padding: 4px 8px;
  margin-right: 6px;
  background-color: #77d91c;
}
.course-list-section .course-list-section-item .course-list-section-item-main h2 .course-list-section-item-badge.advance {
  color: #fff;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 600;
  display: inline;
  vertical-align: middle;
  padding: 4px 8px;
  margin-right: 6px;
  background-color: #ffa500;
}
.course-list-section .course-list-section-item .course-list-section-item-main h2 .course-list-section-item-badge.is-new {
  color: #fff;
  border-radius: 8px;
  font-size: 0.7rem;
  font-weight: 600;
  display: inline;
  vertical-align: middle;
  padding: 2px 10px;
  margin-left: 6px;
  background-color: #ff4a6d;
}
.course-list-section .course-list-section-item .course-list-section-item-main h2 a {
  display: inline;
  font-weight: 600;
  text-decoration: underline;
}
.course-list-section .course-list-section-item .course-list-section-item-main .course-list-section-item-point-description {
  margin: 0 12px;
}
.course-list-section .course-list-section-item .course-list-section-item-is-coming-soon {
  padding: 5px 0;
  margin: 12px;
  border: 1px dashed #797873;
  text-align: center;
  font-weight: 600;
}
.course-list-section .course-list-section-item .course-list-section-item-count {
  margin: 12px;
}
.premium-label-block {
  display: box;
  display: -webkit-box;
  display: flexbox;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align-items: center;
  -webkit-align-items: center;
  align-items: center;
  width: 100%;
  padding: 15px;
  background-color: #fff;
  border: 2px dotted #ddd;
  border-radius: 8px;
  margin-bottom: 15px;
}
@media screen and (max-width: 768px) {
  .premium-label-block {
    margin-top: 30px;
  }
}
.premium-label-block .premium-label-block-image {
  box-flex: 1;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-width: 96px;
  margin-right: 10px;
  text-align: center;
}
.premium-label-block .premium-label-block-description {
  box-flex: 4;
  -webkit-box-flex: 4;
  -webkit-flex: 4;
  -ms-flex: 4;
  flex: 4;
  font-size: 1rem;
  font-weight: 400;
  -webkit-box-align-items: center;
  -webkit-align-items: center;
  align-items: center;
}
.premium-label-block .premium-label-block-description h3 {
  color: #ffa500;
  font-weight: 600;
  line-height: 1.5;
}
.premium-label-block .premium-label-block-description p {
  color: #797873;
  font-size: 0.8rem;
}
.premium-label-block .premium-label-block-button {
  width: 200px;
  text-align: right;
  margin-left: 10px;
  vertical-align: middle;
  -webkit-box-align-items: center;
  -webkit-align-items: center;
  align-items: center;
}
.premium-label-block .premium-label-block-button > a {
  display: block;
  background-color: rgba(19,167,255,0.2);
  color: #0b78b8;
  font-weight: 600;
  text-align: center;
  padding: 7px 20px;
  border-radius: 4px;
}
@media screen and (max-width: 1000px) {
  .premium-label-block .premium-label-block-button > a {
    width: 100%;
  }
}
@media screen and (max-width: 1000px) {
  .premium-label-block .premium-label-block-button {
    margin-top: 15px;
    margin-left: 0;
    width: 100%;
  }
}
.alert-message {
  display: box;
  display: -webkit-box;
  display: flexbox;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align-items: center;
  -webkit-align-items: center;
  align-items: center;
  width: 100%;
  padding: 15px;
  margin-bottom: 15px;
  background-color: #fff;
  border: 2px dotted #ddd;
  border-radius: 8px;
}
@media screen and (max-width: 768px) {
  .alert-message {
    margin-top: 30px;
  }
}
.alert-message .alert-message-image {
  box-flex: 1;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-width: 96px;
  margin-right: 10px;
  text-align: center;
}
.alert-message .alert-message-description {
  box-flex: 5;
  -webkit-box-flex: 5;
  -webkit-flex: 5;
  -ms-flex: 5;
  flex: 5;
  -webkit-box-align-items: center;
  -webkit-align-items: center;
  align-items: center;
  font-size: 1rem;
  font-weight: 400;
}
.alert-message .alert-message-description h3 {
  line-height: 1.5;
  color: #ffa500;
  font-weight: 600;
}
.alert-message .alert-message-description p {
  color: #797873;
  font-size: 0.8rem;
}
.article-wrapper {
  padding: 30px 0;
}
.article-wrapper h1 {
  padding-bottom: 10px;
  font-size: 1.6rem;
}
.article-wrapper h2 {
  padding: 20px 0;
}
.article-wrapper p {
  padding-bottom: 15px;
  line-height: 1.8;
}
.article-wrapper ul,
.article-wrapper ol {
  padding: 15px 0;
}
.article-wrapper li {
  line-height: 1.8;
}
.article-wrapper a {
  display: inline;
}
.general-lesson-wrap,
main .course-wrap .course-lessons-container .lesson-wrap {
  position: relative;
  margin-bottom: 10px;
}
.general-lesson-wrap.basic .course-label,
main .course-wrap .course-lessons-container .lesson-wrap.basic .course-label {
  color: #77d91c;
}
.general-lesson-wrap.advance .course-label,
main .course-wrap .course-lessons-container .lesson-wrap.advance .course-label {
  color: #ff962b;
}
.general-lesson-wrap .lesson-thumbnail,
main .course-wrap .course-lessons-container .lesson-wrap .lesson-thumbnail {
  border: none;
  padding: 0;
  transition: opacity 0.1s;
}
.general-lesson-wrap .lesson-thumbnail:hover,
main .course-wrap .course-lessons-container .lesson-wrap .lesson-thumbnail:hover {
  opacity: 0.7;
}
.general-lesson-wrap .lesson-thumbnail .thumbnail-overlay,
main .course-wrap .course-lessons-container .lesson-wrap .lesson-thumbnail .thumbnail-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  vertical-align: middle;
}
.general-lesson-wrap .lesson-thumbnail .thumbnail-overlay .thumbnail-overlay-inner,
main .course-wrap .course-lessons-container .lesson-wrap .lesson-thumbnail .thumbnail-overlay .thumbnail-overlay-inner {
  width: 100%;
  height: 100%;
  display: table;
}
.general-lesson-wrap .lesson-thumbnail .thumbnail-overlay .thumbnail-overlay-inner .play-button-wrapper,
main .course-wrap .course-lessons-container .lesson-wrap .lesson-thumbnail .thumbnail-overlay .thumbnail-overlay-inner .play-button-wrapper {
  height: 100%;
  width: 100%;
  display: table-cell;
  vertical-align: middle;
}
.general-lesson-wrap .lesson-thumbnail .thumbnail-overlay .thumbnail-overlay-inner .play-button-wrapper img.play-button,
main .course-wrap .course-lessons-container .lesson-wrap .lesson-thumbnail .thumbnail-overlay .thumbnail-overlay-inner .play-button-wrapper img.play-button {
  display: inline;
}
.general-lesson-wrap .lesson-thumbnail .thumbnail-overlay .thumbnail-overlay-inner .play-button-wrapper img.play-button:hover,
main .course-wrap .course-lessons-container .lesson-wrap .lesson-thumbnail .thumbnail-overlay .thumbnail-overlay-inner .play-button-wrapper img.play-button:hover {
  opacity: 1;
}
.general-lesson-wrap .lesson-detail,
main .course-wrap .course-lessons-container .lesson-wrap .lesson-detail {
  text-align: left;
}
.general-lesson-wrap .lesson-detail .course-label,
main .course-wrap .course-lessons-container .lesson-wrap .lesson-detail .course-label {
  padding: 0;
  margin-bottom: 5px;
}
@media screen and (max-width: 414px) {
  .general-lesson-wrap .lesson-detail .course-label,
  main .course-wrap .course-lessons-container .lesson-wrap .lesson-detail .course-label {
    font-size: 0.9rem;
    margin-bottom: 0;
  }
}
.general-lesson-wrap .lesson-detail h2,
main .course-wrap .course-lessons-container .lesson-wrap .lesson-detail h2 {
  font-size: 1.2rem;
  margin-bottom: 5px;
}
.general-lesson-wrap .lesson-detail h3,
main .course-wrap .course-lessons-container .lesson-wrap .lesson-detail h3 {
  margin-bottom: 5px;
  font-size: 1.3rem;
}
@media screen and (max-width: 1000px) {
  .general-lesson-wrap .lesson-detail h3,
  main .course-wrap .course-lessons-container .lesson-wrap .lesson-detail h3 {
    font-size: 1.1rem;
    line-height: 25px;
    height: auto;
  }
}
.general-lesson-wrap .lesson-detail p,
main .course-wrap .course-lessons-container .lesson-wrap .lesson-detail p {
  font-size: 0.9rem;
}
@media screen and (max-width: 768px) {
  .general-lesson-wrap .lesson-detail p,
  main .course-wrap .course-lessons-container .lesson-wrap .lesson-detail p {
    font-size: 0.8rem;
  }
}
@charset "utf-8";
main .main-wrap .inner-wrap {
  width: 100%;
  max-width: 1000px;
}
@media screen and (max-width: 1000px) {
  main .main-wrap .inner-wrap {
    width: 750px;
  }
}
@media screen and (max-width: 768px) {
  main .main-wrap .inner-wrap {
    width: 100%;
  }
}
@media screen and (max-width: 414px) {
  main .main-wrap .inner-wrap {
    min-width: auto;
  }
}
main .main-wrap .course-section {
  display: flex;
  width: 100%;
  max-width: 1000px;
}
@media screen and (max-width: 768px) {
  main .main-wrap .course-section {
    display: block;
  }
}
main .main-wrap .course-section .course-wrap {
  flex-direction: row;
  box-sizing: border-box;
  margin-right: 30px;
  width: 33%;
  display: inline-block;
  vertical-align: text-top;
}
main .main-wrap .course-section .course-wrap:last-child {
  margin-right: 0px;
}
@media screen and (max-width: 768px) {
  main .main-wrap .course-section .course-wrap {
    display: block;
    width: 100%;
    padding-right: 0px;
  }
}
@media screen and (max-width: 414px) {
  main .main-wrap .course-section .left {
    margin-bottom: 30px;
  }
}
main .main-wrap .course-section .course-container {
  border-radius: 0 0 5px 5px;
  box-shadow: 0 2px 0 #eee;
  background-color: #fff;
}
@media screen and (max-width: 768px) {
  main .main-wrap .course-section .course-container {
    margin-bottom: 30px;
  }
}
main .main-wrap .course-section .course-container .lesson-wrap {
  display: block;
  padding: 20px 25px;
  min-height: 150px;
  border-bottom: dashed 1px #eee;
  height: 340px;
}
@media screen and (max-width: 1000px) {
  main .main-wrap .course-section .course-container .lesson-wrap {
    height: 300px;
  }
}
@media screen and (max-width: 768px) {
  main .main-wrap .course-section .course-container .lesson-wrap {
    height: 370px;
  }
}
@media screen and (max-width: 414px) {
  main .main-wrap .course-section .course-container .lesson-wrap {
    height: auto;
    padding: 20px 20px 30px;
  }
}
main .main-wrap .course-section .course-container .lesson-wrap .lesson-thumbnail {
  z-index: 100;
  display: block;
  position: relative;
  margin-bottom: 5px;
  padding: 4px;
  border: none;
}
main .main-wrap .course-section .course-container .lesson-wrap .lesson-thumbnail ._img-wrap {
  position: relative;
}
main .main-wrap .course-section .course-container .lesson-wrap .lesson-thumbnail img {
  width: 100%;
}
@media screen and (max-width: 414px) {
  main .main-wrap .course-section .course-container .lesson-wrap .lesson-thumbnail img {
    width: 100%;
  }
}
main .main-wrap .course-section .course-container .lesson-wrap ._label-status {
  font-weight: 600;
  position: absolute;
  color: #fff;
  background-color: #77d91c;
  border-radius: 4px;
  border: 2px solid #fff;
  font-size: 0.85rem;
  padding: 3px 10px;
  top: -5px;
  left: -5px;
}
main .main-wrap .course-section .course-container .lesson-wrap ._label-status.premium {
  background-color: #ff962b;
}
main .main-wrap .course-section .course-container .lesson-wrap .lesson-detail {
  position: relative;
  padding-left: 0;
}
@media screen and (max-width: 1000px) {
  main .main-wrap .course-section .course-container .lesson-wrap .lesson-detail a {
    color: #13a7ff !important;
    font-weight: 600;
  }
}
main .main-wrap .course-section .course-container .lesson-wrap .lesson-detail .lesson-title {
  font-weight: 600;
  color: #333;
}
@media screen and (max-width: 1000px) {
  main .main-wrap .course-section .course-container .lesson-wrap .lesson-detail .lesson-title {
    color: #13a7ff !important;
    font-weight: 600;
  }
}
main .main-wrap .course-section .course-container .lesson-wrap .lesson-detail .lesson-point-description {
  margin: 10px 0;
}
@media screen and (max-width: 1000px) {
  main .main-wrap .course-section .course-container .lesson-wrap .lesson-detail .lesson-point-description {
    font-size: 14px;
  }
}
main .main-wrap .course-section .course-link-wrap {
  padding: 30px 20px;
  text-align: center;
  width: 100%;
}
@media screen and (max-width: 1000px) {
  main .main-wrap .course-section .course-link-wrap {
    font-size: 0.9rem;
    padding: 30px 10px;
  }
}
@media screen and (max-width: 768px) {
  main .main-wrap .course-section .course-link-wrap {
    font-size: 1rem;
    padding: 30px 20px;
  }
}
main .main-wrap .course-section .course-link-wrap .course-link-btn-001 {
  margin-top: 10px;
  width: 100%;
}
main .main-wrap .course-section .course-link-wrap .course-link-btn-001.disabled {
  margin-top: 10px;
  width: 100%;
  box-shadow: none;
}
main .main-wrap .course-section .course-link-wrap .course-link-btn-002 {
  padding: 12px 5px;
  color: sky-blue !important;
  border-radius: 100px;
  border: 1px solid sky-blue;
}
@media screen and (max-width: 1000px) {
  main .main-wrap .course-section .course-link-wrap .course-link-btn-002 {
    font-size: 14px;
  }
}
@media screen and (max-width: 768px) {
  main .main-wrap .course-section .course-link-wrap .course-link-btn-002 {
    font-size: 16px;
  }
}
main .course-wrap,
main .course-related-courses {
  max-width: 1000px;
  margin: 15px auto 0px;
  width: 100%;
  max-width: 1000px;
}
@media screen and (max-width: 1000px) {
  main .course-wrap,
  main .course-related-courses {
    width: 750px;
  }
}
@media screen and (max-width: 768px) {
  main .course-wrap,
  main .course-related-courses {
    width: 100%;
  }
}
main .course-wrap .title-container {
  position: relative;
  min-height: 265px;
  text-align: left;
  color: #333;
  margin-top: 30px;
  padding: 0 30px;
}
@media screen and (max-width: 768px) {
  main .course-wrap .title-container {
    width: 100%;
  }
}
main .course-wrap .title-container .course-details-wrapper {
  display: inline-block;
  width: 49%;
}
@media screen and (max-width: 768px) {
  main .course-wrap .title-container .course-details-wrapper {
    display: block;
    width: 100%;
    margin: 0;
    padding-top: 20px;
  }
}
main .course-wrap .title-container .course-thumbnail-wrapper {
  position: absolute;
  right: 30px;
  top: 0;
  width: 450px;
  max-width: 49%;
  padding-left: 30px;
  text-align: right;
}
@media screen and (max-width: 768px) {
  main .course-wrap .title-container .course-thumbnail-wrapper {
    right: 0;
    position: relative;
    display: block;
    max-width: 100%;
    width: 100%;
    text-align: center;
    padding-left: 0;
  }
}
main .course-wrap .title-container .course-thumbnail-wrapper img {
  top: 0;
  right: 0;
  width: 100%;
}
@media screen and (max-width: 768px) {
  main .course-wrap .title-container .course-thumbnail-wrapper img {
    position: relative;
  }
}
main .course-wrap .title-container .course-title {
  font-size: 1.25rem;
  position: relative;
  left: 10px;
  top: 3px;
  display: inline-block;
}
@media screen and (max-width: 768px) {
  main .course-wrap .title-container .course-title {
    top: 0;
    line-height: 28px;
  }
}
main .course-wrap .title-container .course-label-advance,
main .course-wrap .title-container .course-label-basic {
  padding: 4px 18px;
  font-size: 0.9rem;
  text-shadow: none;
  display: inline-block;
  margin-bottom: 5px;
  color: #fff;
  border-radius: 4px;
}
main .course-wrap .title-container .course-label-basic {
  background-color: #77d91c;
}
main .course-wrap .title-container .course-label-advance {
  background-color: #ff962b;
}
main .course-wrap .title-container .course-description {
  margin: 10px 0 0;
  font-weight: 400;
  font-size: 0.85rem;
}
main .course-wrap .title-container .course-point-description {
  margin: 20px 0 30px 0;
  font-size: 0.9rem;
}
main .course-wrap .title-container .share-buttons li {
  padding-right: 7px;
  display: inline-block;
  vertical-align: bottom;
}
main .course-wrap .progress-wrap {
  width: 100%;
  padding: 20px 300px;
  margin: 20px 0 30px;
  background-color: #fafafa;
  text-align: center;
}
@media screen and (max-width: 1000px) {
  main .course-wrap .progress-wrap {
    padding: 20px 90px;
  }
}
@media screen and (max-width: 768px) {
  main .course-wrap .progress-wrap {
    padding: 20px;
  }
}
main .course-wrap .progress-wrap .course-progress {
  margin: 0;
}
main .course-wrap .progress-wrap .course-progress .course-progress-bar {
  width: 100%;
}
main .course-wrap .progress-wrap .number-complete-status {
  padding-top: 5px;
  font-size: 0.85rem;
}
main .course-wrap .see-first-lesson {
  position: relative;
  padding: 15px 0;
  width: 100%;
  color: #fff;
}
main .course-wrap .see-first-lesson i {
  position: absolute;
  top: 19px;
  right: 20px;
}
main .course-wrap .course-lessons-container {
  margin: 0 0 30px 0;
  padding: 0 30px;
  background-color: #fff;
}
main .course-wrap .course-lessons-container h2 {
  font-weight: 400;
  font-size: 1.3rem;
}
main .course-wrap .course-lessons-container .course-copy {
  text-align: center;
}
main .course-wrap .course-lessons-container .lesson-wrap {
  position: relative;
  display: block;
  margin: 20px 0;
  padding-left: 326px;
  background-color: #fff;
  border-bottom: 1px dashed #ddd;
}
main .course-wrap .course-lessons-container .lesson-wrap:last-child {
  border-bottom: none;
}
@media screen and (max-width: 768px) {
  main .course-wrap .course-lessons-container .lesson-wrap {
    margin: 0;
    padding-bottom: 45px;
    padding-left: 0;
    padding-right: 0;
  }
  main .course-wrap .course-lessons-container .lesson-wrap:last-child {
    padding-bottom: 0;
  }
}
@media screen and (max-width: 414px) {
  main .course-wrap .course-lessons-container .lesson-wrap {
    padding-bottom: 55px;
  }
}
main .course-wrap .course-lessons-container .lesson-wrap .lesson-number {
  position: absolute;
  top: 0;
  left: 8px;
  color: #ccc;
  font-size: 1.8rem;
  font-weight: 600;
  font-family: 'Helvetica Neue', Arial, Verdana, 'Noto Sans Japanese', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
}
@media screen and (max-width: 768px) {
  main .course-wrap .course-lessons-container .lesson-wrap .lesson-number {
    position: relative;
  }
}
main .course-wrap .course-lessons-container .lesson-wrap .lesson-thumbnail {
  display: inline-block;
  position: absolute;
  left: 56px;
  z-index: 100;
  padding: 0;
  border: none;
}
@media screen and (max-width: 768px) {
  main .course-wrap .course-lessons-container .lesson-wrap .lesson-thumbnail {
    display: block;
    position: static;
    padding: 5px;
    width: 100%;
  }
}
@media screen and (max-width: 414px) {
  main .course-wrap .course-lessons-container .lesson-wrap .lesson-thumbnail {
    padding: 0;
  }
}
main .course-wrap .course-lessons-container .lesson-wrap .lesson-thumbnail img {
  width: 250px;
}
@media screen and (max-width: 768px) {
  main .course-wrap .course-lessons-container .lesson-wrap .lesson-thumbnail img {
    width: 100%;
    height: auto;
  }
}
main .course-wrap .course-lessons-container .lesson-wrap .lesson-thumbnail .play-button {
  width: 54px;
}
main .course-wrap .course-lessons-container .lesson-wrap .lesson-detail {
  min-height: 160px;
}
@media screen and (max-width: 768px) {
  main .course-wrap .course-lessons-container .lesson-wrap .lesson-detail {
    display: block;
    padding: 10px 0;
    margin: 0;
    min-height: 0;
  }
}
@media screen and (max-width: 414px) {
  main .course-wrap .course-lessons-container .lesson-wrap .lesson-detail {
    padding: 0;
  }
}
main .course-wrap .course-lessons-container .lesson-wrap .lesson-detail a {
  display: inline-block;
  color: #13a7ff;
  text-decoration: underline;
}
main .course-wrap .course-lessons-container .lesson-wrap .lesson-detail a:hover {
  color: #0b78b8;
}
main .course-wrap .course-lessons-container .lesson-wrap .lesson-detail .lesson-title {
  display: block;
  font-weight: 600;
  font-size: 1.4rem;
  margin-bottom: 0;
}
main .course-wrap .course-lessons-container .lesson-wrap .lesson-detail .video-length {
  display: inline-block;
  color: #ccc;
  font-weight: 400;
}
main .course-wrap .course-lessons-container .lesson-wrap .lesson-detail .lesson-point-description {
  margin: 10px 0;
  font-size: 0.9rem;
}
@media screen and (max-width: 768px) {
  main .course-wrap .course-lessons-container .lesson-wrap .lesson-detail .lesson-point-description {
    font-size: 0.75rem;
  }
}
main .course-wrap .course-lessons-container .lesson-wrap .lesson-detail ._see-lesson {
  position: absolute;
  right: 0;
  display: inline-block;
  text-align: right;
  font-size: 0.85rem;
  border-radius: 5px;
  background-color: #e9fbff;
}
main .course-wrap .course-lessons-container .lesson-wrap .lesson-detail ._see-lesson > a {
  text-decoration: none;
  padding: 10px 20px;
}
main .course-wrap .course-lessons-container .lesson-wrap .complete-info {
  position: absolute;
  right: 0;
  top: 10px;
  font-size: 0.75rem;
  color: #797873;
}
main .course-wrap .course-lessons-container .lesson-wrap .complete-info i {
  color: #77d91c;
}
main .course-wrap .course-lessons-container .lesson-wrap .complete-button-area {
  position: absolute;
  right: 0;
  top: 0;
}
@media screen and (max-width: 768px) {
  main .course-wrap .course-lessons-container .lesson-wrap .complete-button-area {
    position: relative;
  }
}
main .course-wrap .course-lessons-container .lesson-wrap .complete-button {
  width: 140px;
  color: #444;
  font-weight: 400;
  line-height: 42px;
  height: 42px;
  font-size: 0.9rem;
  padding: 0;
}
@media screen and (max-width: 768px) {
  main .course-wrap .course-lessons-container .lesson-wrap .complete-button {
    width: 100%;
  }
}
main .course-wrap .course-lessons-container .lesson-wrap .lesson-login-button {
  color: #444;
  line-height: 42px;
  height: 42px;
  font-size: 0.9rem;
  font-weight: 400;
  padding: 0 10px;
}
@media screen and (max-width: 768px) {
  main .course-wrap .course-lessons-container .lesson-wrap .lesson-login-button {
    width: 100%;
  }
}
main .course-wrap .course-lessons-container .lesson-wrap .lesson-login-button i {
  margin-left: 5px;
}
main .course-wrap .course-lessons-container .lesson-wrap .lesson-login-button.hover-action:hover {
  background-color: #27a267;
}
main .course-wrap .course-lessons-container .lesson-wrap #reset {
  background-color: sky-blue;
  color: #fff;
  background-image: none;
  border: 1px solid #fff;
}
main .course-wrap .course-lessons-container .lesson-wrap #reset .reset-button-inner {
  width: 100%;
  height: 100%;
}
main .course-wrap .course-lessons-container .lesson-wrap #reset.hover-action:hover {
  background-color: #3485a3;
  color: #ccc;
  background-image: none;
  border: 1px solid #fff;
}
main .course-related-courses .related-courses-label {
  font-weight: 400;
  font-size: 1.3rem;
  margin-bottom: 20px;
}
@media screen and (max-width: 768px) {
  main .course-related-courses .related-courses-label {
    margin-left: 20px;
  }
}
main .course-container {
  font-weight: 400;
}
main .courses-wrap .course-introduction-header {
  margin: 20px 0;
}
main .courses-wrap .course-list-section-item {
  margin: 0;
}
main .course-introduction-header {
  position: relative;
  margin: 30px 0;
  text-align: left;
  padding-left: 120px;
  min-height: 100px;
}
@media screen and (max-width: 1000px) {
  main .course-introduction-header {
    padding-left: 105px;
    min-height: 80px;
  }
}
@media screen and (max-width: 414px) {
  main .course-introduction-header {
    padding-left: 90px;
    margin: 10px 0;
  }
}
main .course-introduction-header.basic .eyecatch-badge {
  background-color: #77d91c;
  color: #fff;
}
main .course-introduction-header.advance .eyecatch-badge {
  background-color: #ff962b;
  color: #fff;
}
@media screen and (max-width: 768px) {
  main .course-introduction-header.advance p br {
    display: none;
  }
}
main .course-introduction-header .eyecatch-badge-wrapper {
  position: absolute;
  left: 0;
}
@media screen and (max-width: 414px) {
  main .course-introduction-header .eyecatch-badge-wrapper {
    top: 0;
  }
}
main .course-introduction-header .eyecatch-badge-wrapper .eyecatch-badge {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  font-weight: 600;
  font-size: 1.1rem;
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
@media screen and (max-width: 1000px) {
  main .course-introduction-header .eyecatch-badge-wrapper .eyecatch-badge {
    width: 80px;
    height: 80px;
    font-size: 0.85rem;
  }
}
main .course-introduction-header h2 {
  padding-bottom: 10px;
  font-size: 1.5rem;
  font-weight: 400;
}
@media screen and (max-width: 1000px) {
  main .course-introduction-header h2 {
    font-size: 1.4rem;
    padding-bottom: 10px;
  }
}
@media screen and (max-width: 414px) {
  main .course-introduction-header h2 {
    font-size: 1.2rem;
    padding-bottom: 0;
  }
}
main .course-introduction-header p {
  color: landing-basic-color;
}
@media screen and (max-width: 1000px) {
  main .course-introduction-header p {
    font-size: 0.9rem;
  }
}
@media screen and (max-width: 414px) {
  main .course-introduction-header p {
    font-size: 0.8rem;
  }
}
main .course-main-title {
  padding: 14px 0 12px;
  font-weight: 200;
  font-size: 1.25rem;
  position: relative;
  line-height: normal;
}
@media screen and (max-width: 414px) {
  main .course-main-title {
    margin: 0 10px;
  }
}
main .course-title {
  margin-bottom: 10px;
  font-size: 1.25rem;
  font-weight: 600;
}
@media screen and (max-width: 414px) {
  main .course-title {
    margin-bottom: 0px;
  }
}
main .course-title.course-is-coming-soon {
  font-weight: 400;
}
main .course-title a {
  display: inline;
  color: #3598c1;
  text-decoration: underline;
}
@media screen and (max-width: 414px) {
  main .course-title a {
    font-size: 1rem;
  }
}
@media screen and (max-width: 320px) {
  main .course-title a {
    font-size: 0.85rem;
  }
}
main .course-title a:hover {
  color: #0b78b8;
}
main .course-title br {
  display: none;
}
main .course-badge {
  display: inline;
  padding: 3px 18px 5px;
  font-size: 14px;
  color: #fff;
  border-radius: 4px;
  vertical-align: middle;
  margin-right: 15px;
  font-weight: 500;
}
@media screen and (max-width: 768px) {
  main .course-badge {
    margin-right: 10px;
  }
}
@media screen and (max-width: 414px) {
  main .course-badge {
    font-size: 12px;
  }
}
main .course-badge.basic {
  background: #32ca81;
}
main .course-badge.advance {
  background: #f79533;
}
main .course-is-new {
  background: #ef5361;
  color: #fff;
  vertical-align: middle;
  font-size: 0.5em;
  font-weight: 400;
  padding: 0px 8px 2px;
  margin-left: 5px;
  display: inline;
}
main .course-caption {
  display: inline;
}
main .course-caption a {
  text-decoration: underline;
}
main .view-all-courses {
  text-align: right;
  margin-bottom: 40px;
}
main .view-all-courses a {
  display: inline;
  text-decoration: underline;
}
main .course-main {
  font-weight: 400;
  margin: 20px 0;
  height: 110px;
}
@media screen and (max-width: 1000px) {
  main .course-main {
    height: auto;
    margin: 5px 0;
  }
}
@media screen and (max-width: 768px) {
  main .course-main {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
  }
}
main .course-main .course-thumbnail {
  display: inline-block;
  float: left;
  width: 45%;
  position: relative;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  main .course-main .course-thumbnail {
    display: block;
    width: 50%;
    float: none;
  }
}
main .course-main .course-thumbnail img {
  width: 100%;
}
main .course-main .course-thumbnail .course-thumbnail-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #333;
  opacity: 0.4;
}
main .course-main .course-description {
  display: inline-block;
  float: left;
  width: 55%;
  padding-left: 15px;
  font-size: 0.85rem;
}
@media screen and (max-width: 768px) {
  main .course-main .course-description {
    display: block;
    width: 50%;
    float: none;
    padding: 0 0 0 20px;
  }
}
@media screen and (max-width: 414px) {
  main .course-main .course-description {
    padding: 0 0 0 10px;
  }
}
main .course-main .course-description ul {
  padding-left: 18px;
}
main .course-main .course-description li {
  margin: 0 0 5px 0;
  list-style: url("../images/triangle.png");
}
@media screen and (max-width: 414px) {
  main .course-main .course-description li {
    font-size: 0.75rem;
  }
}
.error-page {
  width: 810px;
  margin: 40px auto;
  text-align: center;
}
@media screen and (max-width: 1000px) {
  .error-page {
    width: 760px;
  }
}
@media screen and (max-width: 768px) {
  .error-page {
    width: 100%;
  }
}
.error-page h1 {
  color: #13a7ff;
  letter-spacing: 0.4rem;
  font-size: 1.6rem;
  font-weight: 400;
  margin-bottom: 30px;
}
.error-page img {
  width: 360px;
  margin: auto;
}
@media screen and (max-width: 414px) {
  .error-page img {
    width: 250px;
  }
}
.error-page > p {
  padding-top: 30px;
}
.error-page .error-message {
  padding-bottom: 30px;
}
.error-page .error-message + img {
  width: 280px;
}
@media screen and (max-width: 414px) {
  .error-page .error-message + img {
    width: 200px;
  }
}
.error-page a {
  color: #13a7ff;
  margin-top: 30px;
}
@charset "utf-8";
.blue-button-for-sp-header {
  -webkit-transition: background-color 0.2s ease 0s;
  transition: background-color 0.2s ease 0s;
  display: inline-block;
  background-color: #13a7ff;
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
  font-size: 0.625rem;
  border-radius: 4px;
  padding: 6px 10px;
}
.blue-button-for-sp-header:hover {
  color: #fff;
  text-decoration: none;
}
.blue-button-for-sp-header[disabled] {
  background: #ccc;
  box-shadow: 0 2px 0 0 #999;
  cursor: not-allowed;
}
.start-button {
  text-align: center;
}
.start-button > a {
  -webkit-transition: background-color 0.2s ease 0s;
  transition: background-color 0.2s ease 0s;
  display: inline-block;
  background-color: #13a7ff;
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
  max-width: 100%;
  padding: 12px 60px;
  border-radius: 200px;
  box-shadow: 0 2px 4px rgba(162,162,152,0.5);
}
.start-button > a:hover {
  color: #fff;
  text-decoration: none;
}
.start-button > a[disabled] {
  background: #ccc;
  box-shadow: 0 2px 0 0 #999;
  cursor: not-allowed;
}
body {
  position: relative;
}
.global-header .global-header-login-container {
  width: 154px;
}
@media screen and (max-width: 414px) {
  .landing-sp-wrapper {
    margin-top: 54px;
  }
}
.landing-sp-wrapper .hero-image img {
  width: 100%;
  height: 33.8vw;
  position: relative;
  background: #634335;
}
@media screen and (max-width: 414px) {
  .landing-sp-wrapper .hero-image img {
    min-height: 33.8vw;
    height: auto;
  }
}
.landing-sp-wrapper .landing-content > h2 {
  color: #333;
  text-align: center;
  font-weight: bold;
  font-size: 1.125rem;
  margin: 24px 0;
}
.landing-sp-wrapper .landing-content .category-introduction-wrapper {
  width: 100%;
  background-repeat: repeat-x;
  background-position: center bottom 60px;
  background-size: auto 230px;
  background-image: url("../images/landing/sp/background.png?20170328");
}
@media screen and (max-width: 414px) {
  .landing-sp-wrapper .landing-content .category-introduction-wrapper {
    background-size: auto 180px;
  }
}
.landing-sp-wrapper .landing-content .category-introduction-wrapper .category-introduction {
  width: 450px;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 0 40px 0;
}
@media screen and (max-width: 414px) {
  .landing-sp-wrapper .landing-content .category-introduction-wrapper .category-introduction {
    width: 342px;
  }
}
@media screen and (max-width: 320px) {
  .landing-sp-wrapper .landing-content .category-introduction-wrapper .category-introduction {
    padding: 0 10px 40px 10px;
    width: 320px;
  }
}
.landing-sp-wrapper .landing-content .category-introduction-wrapper .thumbnail-container {
  display: box;
  display: -webkit-box;
  display: flexbox;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  -webkit-box-align-items: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  -webkit-flex-wrap: nowrap;
  -moz-flex-wrap: nowrap;
  flex-wrap: nowrap;
}
.landing-sp-wrapper .landing-content .category-introduction-wrapper .thumbnail-container .thumbnail {
  box-flex: 1;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  text-align: right;
}
.landing-sp-wrapper .landing-content .category-introduction-wrapper .thumbnail-container .thumbnail > a > img {
  width: 100%;
  box-shadow: 0 1px 2px rgba(182,181,170,0.65);
  background-color: #ccc;
  border-radius: 8px;
}
@media screen and (max-width: 768px) {
  .landing-sp-wrapper .landing-content .category-introduction-wrapper .thumbnail-container .thumbnail > a > img {
    width: 184px;
    height: 103.5px;
  }
}
@media screen and (max-width: 414px) {
  .landing-sp-wrapper .landing-content .category-introduction-wrapper .thumbnail-container .thumbnail > a > img {
    width: 163px;
    height: 91.6875px;
  }
}
@media screen and (max-width: 320px) {
  .landing-sp-wrapper .landing-content .category-introduction-wrapper .thumbnail-container .thumbnail > a > img {
    width: 132px;
    height: 74.25px;
  }
}
.landing-sp-wrapper .landing-content .category-introduction-wrapper .thumbnail-container .thumbnail + .thumbnail {
  margin-left: 16px;
  text-align: left;
}
.landing-sp-wrapper .landing-content .category-introduction-wrapper h2 {
  margin: 12px 0;
  text-align: center;
}
.landing-sp-wrapper .landing-content .category-introduction-wrapper h2 > img {
  height: 30px;
  max-width: 100%;
}
.landing-sp-wrapper .landing-content .category-introduction-wrapper .introduction-description {
  font-size: 0.875rem;
  margin-bottom: 20px;
  min-height: 3em;
  text-align: center;
}
.landing-sp-wrapper .sensei-seito {
  text-align: center;
}
.landing-sp-wrapper .sensei-seito > img {
  width: 140px;
  height: auto;
}
.cover-movie-wrap {
  height: 540px;
  width: 100%;
}
@media screen and (max-width: 768px) {
  .cover-movie-wrap {
    height: 450px;
  }
}
@media screen and (max-width: 414px) {
  .cover-movie-wrap {
    height: 300px;
  }
}
.cover-movie-wrap .cover-movie {
  position: relative;
  width: 100%;
  height: 540px;
  display: block;
  text-align: center;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .cover-movie-wrap .cover-movie {
    height: 450px;
  }
}
@media screen and (max-width: 414px) {
  .cover-movie-wrap .cover-movie {
    height: 300px;
  }
}
.cover-movie-wrap .key-visual,
.cover-movie-wrap .sp-key-visual {
  position: absolute;
  top: 0;
  width: 100%;
}
.cover-movie-wrap .sp-key-visual {
  height: 540px;
  overflow: hidden;
  z-index: 110;
}
@media screen and (max-width: 768px) {
  .cover-movie-wrap .sp-key-visual {
    height: 450px;
  }
}
@media screen and (max-width: 414px) {
  .cover-movie-wrap .sp-key-visual {
    height: 300px;
  }
}
.cover-movie-wrap .sp-key-visual img {
  display: block;
  min-width: 100%;
  min-height: 100%;
}
@media screen and (max-width: 414px) {
  .cover-movie-wrap .sp-key-visual img {
    height: 300px;
  }
}
.cover-movie-wrap .key-visual {
  display: block;
  z-index: 100;
}
.cover-movie-wrap video {
  display: block;
  position: absolute;
  min-width: 100%;
  z-index: 111;
  overflow: hidden;
}
.cover-movie-wrap.not-service-user-wrap {
  height: 540px;
}
@media screen and (max-width: 768px) {
  .cover-movie-wrap.not-service-user-wrap {
    height: 450px;
  }
}
@media screen and (max-width: 414px) {
  .cover-movie-wrap.not-service-user-wrap {
    height: 300px;
  }
}
.cover-movie-wrap.not-service-user-wrap .cover-movie {
  height: 540px;
}
@media screen and (max-width: 768px) {
  .cover-movie-wrap.not-service-user-wrap .cover-movie {
    height: 450px;
  }
}
@media screen and (max-width: 414px) {
  .cover-movie-wrap.not-service-user-wrap .cover-movie {
    height: 300px;
  }
}
.cover-movie-wrap.about-video-header-wrap {
  height: 300px;
}
@media screen and (max-width: 768px) {
  .cover-movie-wrap.about-video-header-wrap {
    height: 450px;
  }
}
@media screen and (max-width: 414px) {
  .cover-movie-wrap.about-video-header-wrap {
    height: 240px;
  }
}
.cover-movie-wrap.about-video-header-wrap .cover-movie {
  height: 300px;
}
@media screen and (max-width: 768px) {
  .cover-movie-wrap.about-video-header-wrap .cover-movie {
    height: 450px;
  }
}
@media screen and (max-width: 414px) {
  .cover-movie-wrap.about-video-header-wrap .cover-movie {
    height: 240px;
  }
}
.cover-movie-wrap.about-video-header-wrap .sp-key-visual {
  height: 300px;
}
@media screen and (max-width: 768px) {
  .cover-movie-wrap.about-video-header-wrap .sp-key-visual {
    height: 450px;
  }
}
@media screen and (max-width: 414px) {
  .cover-movie-wrap.about-video-header-wrap .sp-key-visual {
    height: 240px;
  }
}
@media screen and (max-width: 768px) {
  .cover-movie-wrap.about-video-header-wrap .sp-key-visual img {
    height: 450px;
  }
}
@media screen and (max-width: 414px) {
  .cover-movie-wrap.about-video-header-wrap .sp-key-visual img {
    height: 240px;
  }
}
.lp-header {
  position: relative;
  height: 60px;
  background-color: #fff;
}
.lp-header img {
  position: absolute;
  top: 13px;
  left: 10px;
  width: 180px;
}
.video-screen {
  display: block;
  position: absolute;
  bottom: 0;
  z-index: 150;
  width: 100%;
  height: 540px;
  background-color: rgba(121,120,115,0.35);
  background-image: url("../images/landing/video/video-screen.gif");
  background-repeat: repeat;
}
@media screen and (max-width: 768px) {
  .video-screen {
    height: 450px;
  }
}
@media screen and (max-width: 414px) {
  .video-screen {
    height: 300px;
  }
}
.video-screen .video-inner {
  width: 1000px;
  margin: auto;
  position: relative;
}
@media screen and (max-width: 1000px) {
  .video-screen .video-inner {
    width: 90%;
  }
}
.video-screen .login-btn-block {
  width: 354px;
  position: absolute;
  padding-top: 90px;
  right: 0;
  top: 0;
  margin: auto;
}
@media screen and (max-width: 768px) {
  .video-screen .login-btn-block {
    width: 80%;
    position: relative;
    padding-top: 10px;
  }
}
@media screen and (max-width: 414px) {
  .video-screen .login-btn-block span {
    display: none;
  }
}
.video-screen .login-btn-block .login-btn-wrapper {
  background-color: #13a7ff;
  color: #fff !important;
  box-shadow: 0 1px 0 0 #2b7fa2;
  height: 62px;
  line-height: 62px;
  width: 100%;
  margin-bottom: 25px;
  font-size: 1.2rem;
  font-weight: 400;
  padding: 0;
}
.video-screen .login-btn-block .login-btn-wrapper:hover {
  background-color: #2b7fa2;
  color: #ccc !important;
}
@media screen and (max-width: 414px) {
  .video-screen .login-btn-block {
    margin-bottom: 15px;
  }
}
.video-screen .login-btn-block-single {
  padding-top: 135px;
}
@media screen and (max-width: 768px) {
  .video-screen .login-btn-block-single {
    padding-top: 28px;
  }
}
@media screen and (max-width: 414px) {
  .video-screen .login-btn-block-single {
    padding-top: 38px;
  }
}
.video-screen .logo-block {
  width: 500px;
  margin: 90px auto 0;
  max-width: none;
  text-align: center;
  z-index: 3;
}
@media screen and (max-width: 768px) {
  .video-screen .logo-block {
    width: 100%;
    text-align: center;
  }
}
@media screen and (max-width: 414px) {
  .video-screen .logo-block {
    margin: 50px auto 0;
  }
}
.video-screen .logo-block .pc-img img {
  width: 474px;
}
@media screen and (max-width: 768px) {
  .video-screen .logo-block .pc-img img {
    width: 340px;
  }
}
@media screen and (max-width: 414px) {
  .video-screen .logo-block .pc-img img {
    width: 220px;
  }
}
.video-screen .logo-block .sp-img img {
  width: 500px;
}
@media screen and (max-width: 768px) {
  .video-screen .logo-block .sp-img img {
    margin: auto;
    width: 400px;
  }
}
@media screen and (max-width: 414px) {
  .video-screen .logo-block .sp-img img {
    margin: auto;
    width: 290px;
  }
}
.video-screen .logo-block h1 {
  color: #fff;
  margin-bottom: 10px;
  font-size: 1.7rem;
  letter-spacing: 0.2rem;
  font-weight: 600;
  text-shadow: rgba(51,51,51,0.33) 0 2px 2px;
}
@media screen and (max-width: 768px) {
  .video-screen .logo-block h1 {
    font-size: 1.1rem;
  }
}
@media screen and (max-width: 414px) {
  .video-screen .logo-block h1 {
    line-height: 1rem;
    margin-top: 0;
    letter-spacing: 0.1rem;
  }
}
.video-screen .logo-block p {
  color: #fff;
  text-shadow: rgba(51,51,51,0.33) 0 2px 2px;
  font-size: 1.1rem;
  margin-top: 30px;
}
@media screen and (max-width: 768px) {
  .video-screen .logo-block p {
    margin-top: 20px;
    font-size: 1rem;
  }
}
@media screen and (max-width: 414px) {
  .video-screen .logo-block p {
    margin-top: 20px;
    font-size: 0.9rem;
  }
}
.video-screen .scroll-area {
  width: 100%;
  height: 40px;
  bottom: 50px;
  margin-top: 25px;
}
.video-screen .scroll-area ul li {
  padding: 0 2px;
  display: inline-block;
  vertical-align: text-bottom;
}
@media screen and (max-width: 768px) {
  .video-screen .scroll-area {
    margin-top: 15px;
  }
}
@media screen and (max-width: 414px) {
  .video-screen .scroll-area {
    bottom: 2px;
  }
}
.video-screen.not-service-user-wrap {
  height: 540px;
}
@media screen and (max-width: 768px) {
  .video-screen.not-service-user-wrap {
    height: 450px;
  }
}
@media screen and (max-width: 414px) {
  .video-screen.not-service-user-wrap {
    height: 300px;
  }
}
.video-screen.not-service-user-wrap .logo-block {
  width: 500px;
  margin: 90px auto 0;
  max-width: none;
  text-align: center;
  z-index: 3;
}
@media screen and (max-width: 768px) {
  .video-screen.not-service-user-wrap .logo-block {
    margin: 100px auto 0;
    width: 100%;
    text-align: center;
  }
}
@media screen and (max-width: 414px) {
  .video-screen.not-service-user-wrap .logo-block {
    margin: 40px auto 0;
  }
}
.video-screen.about-video-header-wrap {
  height: 300px;
}
@media screen and (max-width: 768px) {
  .video-screen.about-video-header-wrap {
    height: 450px;
  }
}
@media screen and (max-width: 414px) {
  .video-screen.about-video-header-wrap {
    height: 240px;
  }
}
.video-screen.about-video-header-wrap .logo-block {
  width: 500px;
  margin: 90px auto 0;
  max-width: none;
  text-align: center;
  z-index: 3;
}
@media screen and (max-width: 768px) {
  .video-screen.about-video-header-wrap .logo-block {
    margin: 100px auto 0;
    width: 100%;
    text-align: center;
  }
}
@media screen and (max-width: 414px) {
  .video-screen.about-video-header-wrap .logo-block {
    margin: 80px auto 0;
  }
}
.video-screen .login-block {
  width: 690px;
  margin: 30px auto 0;
}
@media screen and (max-width: 768px) {
  .video-screen .login-block {
    width: 390px;
  }
}
@media screen and (max-width: 414px) {
  .video-screen .login-block {
    width: 320px;
    margin: 30px auto 0;
  }
}
@media screen and (max-width: 320px) {
  .video-screen .login-block {
    width: 285px;
  }
}
.video-screen .login-block .login-label {
  padding: 10px 0;
  border-radius: 5px 5px 0 0;
  background-color: #111;
  color: #fff;
  font-size: 1.25rem;
}
@media screen and (max-width: 414px) {
  .video-screen .login-block .login-label {
    font-size: 1rem;
  }
}
.video-screen .login-block .login-label span {
  color: #ffed78;
}
@media screen and (max-width: 768px) {
  .video-screen .login-block .login-label span {
    display: inline;
  }
}
.video-screen .login-block .login-btn-cell {
  display: inline-block;
  margin: 0 10px;
  color: #fff;
}
@media screen and (max-width: 768px) {
  .video-screen .login-block .login-btn-cell {
    margin: 0 5px;
  }
}
@media screen and (max-width: 414px) {
  .video-screen .login-block .login-btn-cell {
    margin: 0 3px;
  }
}
.video-screen .login-block .login-btn-cell ._label {
  color: #fff;
  margin: 7px 0;
}
@media screen and (max-width: 768px) {
  .video-screen .login-block .login-btn-cell ._label {
    font-size: 0.85rem;
  }
}
@media screen and (max-width: 414px) {
  .video-screen .login-block .login-btn-cell ._label {
    font-size: 0.75rem;
  }
}
.video-screen .login-block .login-btn-wrapper {
  padding: 15px;
  border-radius: 5px;
  background-color: rgba(51,51,51,0.5);
}
@media screen and (max-width: 768px) {
  .video-screen .login-block .login-btn-wrapper {
    padding: 0;
  }
}
.video-screen .login-block .login-btn-only-service-user {
  padding: 30px 0;
}
@media screen and (max-width: 414px) {
  .video-screen .login-block .login-btn-only-service-user {
    padding: 0;
  }
}
.video-screen .login-block .login-btn-only-service-user .login-btn-wide {
  -webkit-transition: all 0.1s linear 0s;
  transition: all 0.1s linear 0s;
  display: block;
  height: 60px;
  width: 300px;
  margin-bottom: 25px;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 50px;
  padding: 0;
}
@media screen and (max-width: 768px) {
  .video-screen .login-block .login-btn-only-service-user .login-btn-wide {
    width: 260px;
    font-size: 1rem;
  }
}
@media screen and (max-width: 414px) {
  .video-screen .login-block .login-btn-only-service-user .login-btn-wide {
    width: 200px;
    height: 48px;
    line-height: 48px;
    font-size: 0.85rem;
    margin-bottom: 15px;
  }
}
.video-screen .login-block .login-btn-only {
  padding: 20px 0;
  border-radius: 5px;
  background-color: rgba(51,51,51,0.5);
}
@media screen and (max-width: 768px) {
  .video-screen .login-block .login-btn-only {
    padding: 15px 0;
  }
}
.video-screen .login-block .login-btn-only .login-btn {
  width: auto;
  padding: 0 15px;
  margin: 0;
}
.video-screen .login-block .login-btn-only .login-btn-right {
  margin: 0;
}
@media screen and (max-width: 768px) {
  .video-screen .login-block .login-btn-only .login-btn-cell {
    display: block;
  }
}
@media screen and (max-width: 768px) {
  .video-screen .login-block .login-btn-right {
    margin-top: 10px;
  }
}
.video-screen .login-block .login-btn {
  display: block;
  height: 55px;
  width: 270px;
  margin-bottom: 25px;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 52px;
  padding: 0;
  transition-property: all;
  transition: 0.1s linear;
}
@media screen and (max-width: 768px) {
  .video-screen .login-block .login-btn {
    width: 170px;
    font-size: 1rem;
  }
}
@media screen and (max-width: 414px) {
  .video-screen .login-block .login-btn {
    width: 140px;
    height: 48px;
    line-height: 48px;
    font-size: 0.85rem;
    margin-bottom: 15px;
  }
}
@media screen and (max-width: 320px) {
  .video-screen .login-block .login-btn {
    width: 125px;
  }
}
.video-screen .login-block a.signup-btn {
  right: 0;
  display: block;
  margin-bottom: 15px;
  width: 270px;
  height: 55px;
  padding: 0 30px 0 30px;
  border: 2px solid #fff;
  border-radius: 5px;
  color: #fff;
  background-color: rgba(255,255,255,0);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 49px;
  transition-property: all;
  transition: 0.1s linear;
}
@media screen and (max-width: 768px) {
  .video-screen .login-block a.signup-btn {
    width: 170px;
    font-size: 1rem;
  }
}
@media screen and (max-width: 414px) {
  .video-screen .login-block a.signup-btn {
    width: 140px;
    height: 48px;
    font-size: 0.85rem;
    line-height: 44px;
  }
}
@media screen and (max-width: 320px) {
  .video-screen .login-block a.signup-btn {
    width: 125px;
  }
}
.video-screen .login-block a.signup-btn:hover {
  text-decoration: none;
  background-color: rgba(255,255,255,0.25);
  transition-property: all;
  transition: 0.1s linear;
}
.not-service-user-block {
  width: 410px;
  margin: 30px auto 0;
}
@media screen and (max-width: 768px) {
  .not-service-user-block {
    width: 420px;
  }
}
@media screen and (max-width: 414px) {
  .not-service-user-block {
    width: 285px;
    margin: 10px auto 0;
  }
}
.start-btn {
  width: 280px;
  margin: 40px auto;
  text-align: center;
  padding: 12px 50px;
  border-radius: 100px;
  border: 2px solid #fff;
  background: rgba(255,255,255,0.2);
  font-size: 1.25rem;
  color: #fff !important;
  font-weight: 600 !important;
  letter-spacing: 0.15rem;
}
.start-btn:hover {
  background: rgba(255,255,255,0.3);
  text-decoration: none;
}
@media screen and (max-width: 414px) {
  .start-btn {
    width: 180px;
    padding: 10px 40px;
    font-size: 1rem;
  }
}
.lp-content {
  font-family: 'ヒラギノ丸ゴ Pro W4', 'ヒラギノ丸ゴ Pro', 'Hiragino Maru Gothic Pro', 'Noto Sans Japanese', 'Hiragino Kaku Gothic ProN', 'HG丸ｺﾞｼｯｸM-PRO';
  background-color: #fff;
}
@media screen and (max-width: 768px) {
  .lp-content {
    padding: 2px 10px 30px 10px;
  }
}
.lp-root {
  padding: 40px 0;
}
.section-title {
  text-align: center;
  padding: 0 20px;
}
.section-title h2 {
  font-size: 2rem;
  font-weight: 400;
}
@media screen and (max-width: 414px) {
  .section-title h2 span {
    display: block;
  }
}
.section-title p {
  font-size: 1.125rem;
  padding-top: 20px;
}
@media screen and (max-width: 414px) {
  .section-title p span {
    display: block;
  }
}
section.about-wrap {
  background-color: #fff;
}
.lp-row {
  width: 960px;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .lp-row {
    width: 100%;
    padding: 0 10px;
  }
}
@media screen and (max-width: 414px) {
  .lp-row {
    width: 400px;
    padding: 0 10px;
  }
}
@media middle-smartphone {
  .lp-row {
    width: 360px;
  }
}
@media screen and (max-width: 320px) {
  .lp-row {
    width: 320px;
  }
}
.section-text ._text {
  margin-bottom: 40px;
}
.section-text .sp-br {
  display: none;
}
@media screen and (max-width: 768px) {
  .section-text .sp-br {
    display: block;
  }
}
.worry-section {
  padding-bottom: 180px;
}
.worry-section span {
  display: block;
}
@media screen and (max-width: 1000px) {
  .worry-section {
    padding-bottom: 100px;
  }
}
@media screen and (max-width: 414px) {
  .worry-section {
    padding-bottom: 150px;
  }
}
.worry-section .worry-images {
  position: relative;
  height: 250px;
}
.worry-section .worry-balloon-pc {
  position: absolute;
  top: -50px;
  z-index: 155;
}
@media screen and (max-width: 768px) {
  .worry-section .worry-balloon-pc {
    top: -40px;
  }
}
.worry-section .worry-balloon-pc img {
  width: 549px;
}
@media screen and (max-width: 768px) {
  .worry-section .worry-balloon-pc img {
    width: 380px;
  }
}
@media screen and (max-width: 414px) {
  .worry-section .worry-balloon-pc img {
    display: none;
  }
}
.worry-section .worry-balloon-sp {
  display: none;
}
@media screen and (max-width: 414px) {
  .worry-section .worry-balloon-sp {
    display: block;
    position: absolute;
    top: -50px;
    z-index: 155;
    top: -20px;
  }
}
.worry-section .worry-balloon-sp img {
  width: 100%;
}
.worry-section .worry-girl {
  position: absolute;
  top: 80px;
  right: 75px;
}
@media screen and (max-width: 768px) {
  .worry-section .worry-girl {
    top: 20px;
    right: 10px;
  }
}
@media screen and (max-width: 414px) {
  .worry-section .worry-girl {
    top: 200px;
  }
}
.worry-section .worry-girl img {
  width: 400px;
}
@media screen and (max-width: 1000px) {
  .worry-section .worry-girl img {
    width: 350px;
  }
}
@media screen and (max-width: 768px) {
  .worry-section .worry-girl img {
    width: 320px;
  }
}
@media screen and (max-width: 414px) {
  .worry-section .worry-girl img {
    width: 140px;
  }
}
@media screen and (max-width: 320px) {
  .worry-section .worry-girl img {
    width: 120px;
  }
}
.worry-section .section-text {
  position: relative;
  top: 90px;
}
@media screen and (max-width: 1000px) {
  .worry-section .section-text {
    top: 65px;
    left: 5px;
  }
}
@media screen and (max-width: 768px) {
  .worry-section .section-text {
    top: -30px;
  }
}
@media screen and (max-width: 414px) {
  .worry-section .section-text {
    top: 100px;
  }
}
.worry-section .section-text ._title {
  margin-bottom: 40px;
}
@media screen and (max-width: 768px) {
  .worry-section .section-text ._title {
    margin-bottom: 30px;
  }
}
.worry-section .section-text ._title img {
  width: 368px;
}
@media screen and (max-width: 768px) {
  .worry-section .section-text ._title img {
    width: 280px;
  }
}
@media screen and (max-width: 414px) {
  .worry-section .section-text ._title img {
    width: 220px;
  }
}
@media screen and (max-width: 768px) {
  .worry-section .section-text ._description {
    width: 100%;
  }
}
@media screen and (max-width: 414px) {
  .worry-section .section-text ._description {
    font-size: 0.75rem;
  }
}
.explain-section {
  padding-bottom: 100px;
}
@media screen and (max-width: 414px) {
  .explain-section {
    padding-bottom: 30px;
  }
}
.explain-section span {
  display: inline;
}
.explain-section .about-inner {
  background: url("../images/landing/oval-1.png") no-repeat;
  background-size: 830px auto;
  background-position: center center;
}
@media screen and (max-width: 768px) {
  .explain-section .about-inner {
    background-size: 600px 500px;
  }
}
@media screen and (max-width: 414px) {
  .explain-section .about-inner {
    background-size: 830px 810px;
    background-position: top center;
  }
}
@media screen and (max-width: 320px) {
  .explain-section .about-inner {
    background-size: 830px 780px;
  }
}
.explain-section .explain-block-upper {
  position: relative;
}
.explain-section .section-text {
  display: inline-block;
  position: absolute;
  top: 100px;
  right: 0;
}
@media screen and (max-width: 768px) {
  .explain-section .section-text {
    top: 0;
    width: 45%;
  }
}
@media screen and (max-width: 414px) {
  .explain-section .section-text {
    top: 0;
    left: 0;
    text-align: center;
  }
}
.explain-section .section-text ._title {
  margin-bottom: 40px;
}
@media screen and (max-width: 768px) {
  .explain-section .section-text ._title {
    margin-bottom: 20px;
  }
}
@media screen and (max-width: 414px) {
  .explain-section .section-text ._title {
    padding-left: 10px;
  }
}
.explain-section .section-text ._title img {
  width: 440px;
}
@media screen and (max-width: 768px) {
  .explain-section .section-text ._title img {
    width: 300px;
  }
}
@media screen and (max-width: 414px) {
  .explain-section .section-text ._title img {
    width: 280px;
  }
}
.explain-section .section-text ._description {
  width: 480px;
  font-size: 1rem;
}
@media screen and (max-width: 768px) {
  .explain-section .section-text ._description {
    width: 100%;
  }
}
@media screen and (max-width: 414px) {
  .explain-section .section-text ._description {
    width: 370px;
    font-size: 0.75rem;
  }
}
@media screen and (max-width: 320px) {
  .explain-section .section-text ._description {
    width: 300px;
    font-size: 0.6rem;
  }
}
.explain-section .section-text ._description span {
  color: #ef5361;
}
.explain-section .figure-left {
  display: inline-block;
}
@media screen and (max-width: 414px) {
  .explain-section .figure-left {
    display: block;
    width: 100%;
    margin: 0 auto;
    padding-top: 100px;
    text-align: center;
  }
}
@media screen and (max-width: 320px) {
  .explain-section .figure-left {
    width: 280px;
  }
}
.explain-section .figure-left img {
  width: 456px;
}
@media screen and (max-width: 768px) {
  .explain-section .figure-left img {
    width: 50%;
  }
}
@media screen and (max-width: 414px) {
  .explain-section .figure-left img {
    width: 75%;
  }
}
.explain-section .sensei-point {
  padding-top: 70px;
}
@media screen and (max-width: 414px) {
  .explain-section .sensei-point {
    padding-top: 30px;
  }
}
.explain-section .sensei-point ul li.point-block {
  display: inline-block;
  width: 230px;
  padding: 0 10px;
  margin-bottom: 20px;
  box-sizing: border-box;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .explain-section .sensei-point ul li.point-block {
    width: 24%;
    min-width: 155px;
  }
}
@media screen and (max-width: 414px) {
  .explain-section .sensei-point ul li.point-block {
    width: 49%;
    margin-bottom: 20px;
  }
}
@media screen and (max-width: 320px) {
  .explain-section .sensei-point ul li.point-block {
    padding: 0 5px;
    min-width: 145px;
  }
}
.explain-section .sensei-point ul li.point-block img {
  width: 130px;
}
@media screen and (max-width: 768px) {
  .explain-section .sensei-point ul li.point-block img {
    width: 90px;
  }
}
@media screen and (max-width: 414px) {
  .explain-section .sensei-point ul li.point-block img {
    width: 70px;
  }
}
.explain-section .sensei-point ul li.point-block ._title {
  margin: 20px 0;
  color: #13a7ff;
  font-size: 1.4rem;
  font-weight: bold;
  font-family: 'ヒラギノ丸ゴ Pro W4', 'ヒラギノ丸ゴ Pro', 'Hiragino Maru Gothic Pro', 'Noto Sans Japanese', 'Hiragino Kaku Gothic ProN', 'HG丸ｺﾞｼｯｸM-PRO';
  letter-spacing: 0.08rem;
}
@media screen and (max-width: 768px) {
  .explain-section .sensei-point ul li.point-block ._title {
    margin: 10px 0;
    font-size: 0.85rem;
  }
}
@media screen and (max-width: 414px) {
  .explain-section .sensei-point ul li.point-block ._title {
    margin: 5px 0;
  }
}
@media screen and (max-width: 768px) {
  .explain-section .sensei-point ul li.point-block ._description {
    font-size: 0.75rem;
  }
}
.pc-profile {
  display: block;
}
@media screen and (max-width: 414px) {
  .pc-profile {
    display: none;
  }
}
.sp-profile {
  display: none;
}
@media screen and (max-width: 414px) {
  .sp-profile {
    display: block;
  }
}
.creator-section {
  padding-bottom: 80px;
}
@media screen and (max-width: 414px) {
  .creator-section {
    padding-bottom: 40px;
  }
}
.creator-section a {
  color: #333;
  font-family: 'ヒラギノ丸ゴ Pro W4', 'ヒラギノ丸ゴ Pro', 'Hiragino Maru Gothic Pro', 'Noto Sans Japanese', 'Hiragino Kaku Gothic ProN', 'HG丸ｺﾞｼｯｸM-PRO';
}
.creator-section .about-inner {
  text-align: left !important;
  background: url("../images/landing/oval-2.png") no-repeat;
  background-size: 100% 800px;
  background-position: top center;
}
@media screen and (max-width: 768px) {
  .creator-section .about-inner {
    background-size: 710px 1300px;
  }
}
@media screen and (max-width: 414px) {
  .creator-section .about-inner {
    background-size: 770px 870px;
    background-position: top center;
    text-align: center;
  }
}
@media screen and (max-width: 320px) {
  .creator-section .about-inner {
    background-size: 550px 820px;
  }
}
.creator-section .about-inner ._title {
  text-align: left;
}
.creator-section .about-inner ._title img {
  width: 544px;
}
@media screen and (max-width: 768px) {
  .creator-section .about-inner ._title img {
    width: 320px;
  }
}
@media screen and (max-width: 414px) {
  .creator-section .about-inner ._title {
    font-size: 1rem;
  }
}
@media screen and (max-width: 320px) {
  .creator-section .about-inner ._title img {
    width: 260px;
  }
}
.creator-section .about-inner ._description {
  text-align: left;
  font-family: 'ヒラギノ丸ゴ Pro W4', 'ヒラギノ丸ゴ Pro', 'Hiragino Maru Gothic Pro', 'Noto Sans Japanese', 'Hiragino Kaku Gothic ProN', 'HG丸ｺﾞｼｯｸM-PRO';
}
@media screen and (max-width: 414px) {
  .creator-section .about-inner ._description {
    width: 360px;
    font-size: 0.75rem;
  }
}
@media screen and (max-width: 320px) {
  .creator-section .about-inner ._description {
    width: 260px;
    font-size: 0.6rem;
  }
}
.creator-section .profile-wrap {
  width: 300px;
}
@media screen and (max-width: 414px) {
  .creator-section .profile-wrap {
    width: 170px;
  }
}
@media screen and (max-width: 320px) {
  .creator-section .profile-wrap {
    width: 150px;
  }
}
.creator-section .profile-wrap ._description {
  width: 480px;
  font-size: 1rem;
}
@media screen and (max-width: 768px) {
  .creator-section .profile-wrap ._description {
    width: 100%;
  }
}
@media screen and (max-width: 414px) {
  .creator-section .profile-wrap ._description {
    width: 360px;
    font-size: 0.85rem;
  }
}
@media screen and (max-width: 320px) {
  .creator-section .profile-wrap ._description {
    width: 280px;
  }
}
.creator-section .profile-wrap ._description span {
  color: #ef5361;
}
.creator-section .profile-inner ._profile {
  width: 150px;
  padding: 20px 10px 20px 0;
  display: inline-block;
  vertical-align: middle;
  text-align: right;
}
@media screen and (max-width: 414px) {
  .creator-section .profile-inner ._profile {
    width: 120px;
    padding: 10px 10px 10px 0;
  }
}
@media screen and (max-width: 320px) {
  .creator-section .profile-inner ._profile {
    width: 100px;
  }
}
.creator-section .profile-inner ._profile ._name {
  font-size: 1.4rem;
}
@media screen and (max-width: 414px) {
  .creator-section .profile-inner ._profile ._name {
    font-size: 0.85rem;
  }
}
.creator-section .profile-inner ._profile ._work {
  font-size: 0.75rem;
}
@media screen and (max-width: 414px) {
  .creator-section .profile-inner ._profile ._work {
    font-size: 0.55rem;
  }
}
.creator-section .profile-inner ._icon {
  display: inline-block;
}
.creator-section .profile-inner ._icon img {
  width: 100px;
}
@media screen and (max-width: 414px) {
  .creator-section .profile-inner ._icon img {
    width: 35px;
  }
}
.creator-section ._profile-description {
  width: 290px;
  height: 230px;
  padding-top: 68px;
  background: url("../images/landing/profile-balloon.png") no-repeat;
  background-size: 100%;
}
@media screen and (max-width: 414px) {
  .creator-section ._profile-description {
    width: 170px;
    height: 150px;
    padding-top: 20px;
    background-image: none;
    background-color: #fff;
    border-radius: 100px;
  }
}
@media screen and (max-width: 320px) {
  .creator-section ._profile-description {
    width: 145px;
    height: 140px;
    background-image: none;
    background-color: #fff;
    border-radius: 100px;
    padding-top: 30px;
  }
}
.creator-section ._profile-description p {
  text-align: center;
  padding: 0 30px;
  font-size: 0.75rem;
}
@media screen and (max-width: 414px) {
  .creator-section ._profile-description p {
    font-size: 0.55rem;
  }
}
@media screen and (max-width: 320px) {
  .creator-section ._profile-description p {
    padding: 0 10px;
    font-size: 9px;
  }
}
.creator-section ._profile-description-large {
  width: 290px;
  height: 300px;
  padding-top: 70px;
  background: url("../images/landing/profile-balloon-large.png") no-repeat;
  background-size: 100%;
}
@media screen and (max-width: 414px) {
  .creator-section ._profile-description-large {
    padding-top: 50px;
    width: 185px;
    height: 160px;
    background-image: none;
    background-color: #fff;
    border-radius: 100px;
    padding-top: 30px;
  }
}
@media screen and (max-width: 320px) {
  .creator-section ._profile-description-large {
    width: 145px;
    height: 200px;
    background-image: none;
    background-color: #fff;
    border-radius: 100px;
    padding-top: 30px;
  }
}
.creator-section ._profile-description-large p {
  text-align: center;
  padding: 0 30px;
  font-size: 0.75rem;
}
@media screen and (max-width: 414px) {
  .creator-section ._profile-description-large p {
    padding: 0 10px;
    font-size: 0.55rem;
  }
}
@media screen and (max-width: 768px) {
  .creator-section .profile-block {
    padding-left: 6%;
  }
}
@media screen and (max-width: 414px) {
  .creator-section .profile-block {
    padding-left: 0;
  }
}
.creator-section .left-block {
  float: left;
  margin-top: 90px;
}
@media screen and (max-width: 414px) {
  .creator-section .left-block {
    margin-top: 0;
  }
  .creator-section .left-block li:first-child {
    position: relative;
    top: 10px;
    left: 10px;
  }
  .creator-section .left-block li:last-child {
    position: relative;
    top: 20px;
  }
}
@media middle-smartphone {
  .creator-section .left-block {
    position: relative;
    left: -10px;
  }
}
@media screen and (max-width: 320px) {
  .creator-section .left-block li:first-child {
    position: relative;
    top: 10px;
    left: 10px;
  }
  .creator-section .left-block li:last-child {
    position: relative;
    top: 30px;
  }
}
.creator-section .middle-block {
  float: left;
}
.creator-section .middle-block margin-top 10px li:last-child {
  position: relative;
  left: 30px;
}
@media screen and (max-width: 414px) {
  .creator-section .middle-block {
    margin-top: 100px;
  }
  .creator-section .middle-block li:first-child {
    position: relative;
    top: -20px;
    left: 20px;
  }
  .creator-section .middle-block li:last-child {
    position: relative;
    top: -10px;
    left: 8px;
  }
}
@media middle-smartphone {
  .creator-section .middle-block {
    position: relative;
    left: -10px;
  }
}
@media screen and (max-width: 320px) {
  .creator-section .middle-block {
    margin-top: 100px;
  }
  .creator-section .middle-block li:first-child {
    position: relative;
    top: -30px;
    left: 0px;
  }
  .creator-section .middle-block li:last-child {
    position: relative;
    top: -20px;
  }
}
.creator-section .right-block {
  float: left;
  margin-top: -120px;
}
@media screen and (max-width: 768px) {
  .creator-section .right-block {
    float: none;
  }
  .creator-section .right-block li {
    display: table-cell;
  }
  .creator-section .right-block li:last-child {
    position: relative;
    top: -40px;
    left: 20px;
  }
}
@media screen and (max-width: 414px) {
  .creator-section .right-block {
    margin-top: 0;
  }
}
@media screen and (max-width: 768px) and (max-width: 414px) {
  .creator-section .right-block li:first-child {
    position: relative;
    top: -80px;
  }
}
@media screen and (max-width: 768px) and (max-width: 320px) {
  .creator-section .right-block li:first-child {
    top: -50px;
  }
}
@media screen and (max-width: 768px) and (max-width: 414px) {
  .creator-section .right-block li:last-child {
    top: 20px;
    left: -20px;
  }
}
@media screen and (max-width: 768px) and (max-width: 320px) {
  .creator-section .right-block li:last-child {
    top: 20px;
  }
}
.course-section {
  padding-bottom: 100px;
}
@media screen and (max-width: 414px) {
  .course-section {
    padding-bottom: 60px;
  }
}
.course-section span {
  display: inline;
}
.course-section ._title img {
  width: 415px;
}
@media screen and (max-width: 768px) {
  .course-section ._title img {
    width: 400px;
  }
}
@media screen and (max-width: 414px) {
  .course-section ._title img {
    width: 300px;
  }
}
@media screen and (max-width: 320px) {
  .course-section ._title img {
    width: 270px;
  }
}
.course-section .section-title {
  text-align: center;
  margin-bottom: 40px;
}
@media screen and (max-width: 414px) {
  .course-section .section-title {
    margin-bottom: 30px;
  }
}
.course-section ._level-title {
  margin: 20px 0 30px;
  font-family: 'ヒラギノ丸ゴ Pro W4', 'ヒラギノ丸ゴ Pro', 'Hiragino Maru Gothic Pro', 'Noto Sans Japanese', 'Hiragino Kaku Gothic ProN', 'HG丸ｺﾞｼｯｸM-PRO';
  text-align: center;
  font-size: 1.125rem;
  font-weight: 400;
  letter-spacing: 0.2rem;
}
@media screen and (max-width: 414px) {
  .course-section ._level-title {
    margin: 20px 0 10px;
  }
}
.course-section ._level-title p {
  padding: 10px 0 0 0;
  letter-spacing: 0;
  font-size: 0.85rem;
}
@media screen and (max-width: 414px) {
  .course-section ._level-title p {
    font-size: 0.7rem;
  }
}
.course-section .course-list-section {
  width: 720px;
  margin: 0 auto;
}
.course-section .course-list-section .course-list-section-item {
  margin: 0 15px;
}
@media screen and (max-width: 1000px) {
  .course-section .course-list-section {
    width: 790px;
  }
}
@media screen and (max-width: 768px) {
  .course-section .course-list-section {
    width: 100%;
  }
  .course-section .course-list-section .course-list-section-item:first-child {
    margin-bottom: 30px;
  }
}
.course-section .course-item-wrap {
  margin-bottom: 40px;
}
@media screen and (max-width: 414px) {
  .course-section .course-item-wrap {
    margin-bottom: 20px;
  }
}
@media screen and (max-width: 1140px) {
  .course-section .lp-course-item-wrap {
    min-height: auto;
  }
  .course-section .lp-course-item-wrap .course-main {
    height: 120px;
  }
}
.course-section .btn-wrap {
  width: 350px;
  margin: 0 auto;
}
@media screen and (max-width: 320px) {
  .course-section .btn-wrap {
    width: 260px;
  }
}
.course-section .detail-course-btn {
  width: 350px;
  margin: 30px auto 10px;
  padding: 15px 0;
  font-size: 1.25rem;
  font-weight: 600;
}
@media screen and (max-width: 414px) {
  .course-section .detail-course-btn {
    font-size: 1rem;
    margin: 0;
    width: 100%;
    line-height: 45px;
  }
}
.twitter-section {
  text-align: center;
  padding-bottom: 50px;
}
.twitter-section h2 {
  margin-bottom: 40px;
}
.twitter-section h2 img {
  width: 492px;
}
@media screen and (max-width: 768px) {
  .twitter-section h2 img {
    width: 300px;
  }
}
@media screen and (max-width: 414px) {
  .twitter-section h2 img {
    width: 280px;
  }
}
.twitter-section .twitter-block {
  width: 440px;
  margin: 20px auto 10px auto;
  padding: 10px;
  border: 2px solid #f1f1f1;
  border-radius: 10px;
}
@media screen and (max-width: 768px) {
  .twitter-section .twitter-block {
    width: 320px;
  }
}
@media screen and (max-width: 320px) {
  .twitter-section .twitter-block {
    width: 300px;
  }
}
.share-section {
  padding-bottom: 60px;
  background-color: #fff;
}
@media screen and (max-width: 768px) {
  .share-section {
    margin-bottom: 0;
  }
}
.share-section .inner-wrap {
  width: 165px;
  margin: auto;
}
.share-section .inner-wrap li {
  padding: 0 5px;
  box-sizing: border-box;
  display: inline-block;
}
.share-section .inner-wrap li:last-child {
  position: relative;
  top: 1px;
}
@media screen and (max-width: 768px) {
  .share-section .inner-wrap li {
    padding: 0;
  }
}
.about-mock-head {
  height: 1667px;
  background: url("../images/about/about-mock-head.png") no-repeat;
  background-position: center top;
}
.about-bg {
  height: 380px;
  background: url("../images/about/about-bg.png") no-repeat;
  background-position: center;
  background-size: 100% auto;
}
@media screen and (max-width: 768px) {
  .about-bg {
    background-size: auto 100%;
    background-position: -30px 0;
  }
}
@media screen and (max-width: 414px) {
  .about-bg {
    background-position: -270px 0;
  }
}
.about-bg .inner-wrap {
  position: relative;
  width: 1140px;
}
@media screen and (max-width: 1140px) {
  .about-bg .inner-wrap {
    width: 100%;
  }
}
.about-bg .inner-wrap h1 {
  color: #fff;
  top: 160px;
  text-align: center;
  position: absolute;
  width: 100%;
  font-size: 2.4rem;
  letter-spacing: 0.25rem;
}
@charset "utf-8";
body.is-modal-opened {
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
}
.modal-container {
  display: none;
  position: fixed;
  overflow-y: scroll;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(51,51,51,0.4);
  z-index: 200;
  text-align: center;
}
.modal-container.sst-target-is-shown {
  display: block;
}
.modal-container a {
  color: #13a7ff;
  font-weight: 600;
}
.modal-container a.btn-blue {
  color: #fff;
}
.modal-container .br-sp {
  display: none;
}
@media screen and (max-width: 768px) {
  .modal-container .br-sp {
    display: block;
  }
}
@media screen and (max-width: 768px) {
  .modal-container .br-pc {
    display: none;
  }
}
.modal-container .modal-body-container {
  position: absolute;
  overflow: visible;
  top: 100px;
  left: 50%;
  width: 600px;
  margin-left: -300px;
  margin-bottom: 50px;
  padding: 30px 20px 40px 20px;
  border-radius: 20px;
}
@media screen and (max-width: 768px) {
  .modal-container .modal-body-container {
    width: 400px;
    margin-left: -200px;
  }
}
@media screen and (max-width: 414px) {
  .modal-container .modal-body-container {
    width: 300px;
    margin-left: -150px;
  }
}
.modal-container .modal-body-container h1 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #13a7ff;
  margin-bottom: 20px;
}
.modal-container .modal-body-container h1.premium-appeal {
  color: #ff962b;
}
@media screen and (max-width: 414px) {
  .modal-container .modal-body-container h1 {
    font-size: 1rem;
    line-height: 1.5;
  }
}
.modal-container .modal-body-container .description {
  padding: 20px;
}
.modal-container .modal-body-container .description p {
  padding: 20px 0 0 0;
}
.modal-container .modal-body-container .description .description-notice {
  font-size: 0.8rem;
  color: #797873;
}
.modal-container .modal-body-container .attention {
  color: #797873;
  margin: 20px 0;
}
.modal-container .modal-body-container img {
  display: block;
  margin: auto;
  max-width: 100%;
}
.modal-container .modal-body-container img.modal-image-large {
  margin-bottom: 20px;
}
@media screen and (max-width: 414px) {
  .modal-container .modal-body-container img.modal-image-large {
    max-height: 200px;
  }
}
.modal-container .modal-body-container .start-description {
  font-size: 1.2rem;
}
.modal-container .modal-body-container .start-button,
.modal-container .modal-body-container .show-after-button,
.modal-container .modal-body-container .premium-button {
  min-width: 360px;
  padding: 14px 28px;
}
@media screen and (max-width: 768px) {
  .modal-container .modal-body-container .start-button,
  .modal-container .modal-body-container .show-after-button,
  .modal-container .modal-body-container .premium-button {
    min-width: initial;
    width: 100%;
  }
}
@media screen and (max-width: 414px) {
  .modal-container .modal-body-container .start-button,
  .modal-container .modal-body-container .show-after-button,
  .modal-container .modal-body-container .premium-button {
    padding: 5px 20px;
  }
}
.modal-container .modal-body-container .registration-area {
  margin-bottom: 20px;
}
.modal-container .modal-body-container .registration-area .show-details {
  margin-top: 14px;
  font-weight: 200;
  color: #13a7ff;
  text-decoration: underline;
}
@media screen and (max-width: 1000px) {
  .modal-container .modal-body-container .registration-area .show-details {
    position: relative;
  }
}
.modal-container .modal-body-container .registration-area a {
  color: #fff;
}
.modal-container .modal-body-container .registration-area small {
  color: #999;
}
.modal-container .modal-body-container .start-button {
  margin-top: 20px;
  line-height: 24px;
  font-weight: 600;
}
@media screen and (max-width: 414px) {
  .modal-container .modal-body-container .start-button {
    font-size: 1rem;
    margin-top: 10px;
  }
}
.modal-container .modal-body-container .start-button .label {
  display: inline-block;
  font-weight: 600;
}
@media screen and (max-width: 414px) {
  .modal-container .modal-body-container .start-button .label {
    line-height: 24px;
    padding: 5px 0;
  }
}
.modal-container .modal-body-container .start-button .loading {
  display: none;
}
.modal-container .modal-body-container .premium-button {
  font-weight: 600;
}
@media screen and (max-width: 414px) {
  .modal-container .modal-body-container .premium-button {
    line-height: 2rem;
  }
}
.modal-container .modal-body-container .show-after-button {
  border: 1px solid #797873;
  color: #797873;
}
.modal-container .modal-body-container .login-link {
  margin: 10px 0;
}
.modal-container .modal-body-container .login-link a {
  display: inline;
  font-weight: 200;
}
.modal-container .modal-body-container .show-after-area {
  border-top: #eee 1px solid;
  padding: 30px 0 10px;
}
.modal-container .modal-body-container .close-button {
  position: absolute;
  display: block;
  box-sizing: border-box;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: 4px solid #fff;
  background: #333;
  top: -0.5rem;
  right: -0.5rem;
  padding: 0.5rem;
  cursor: pointer;
}
.modal-container .modal-body-container .close-button > a {
  color: #fff;
  vertical-align: middle;
}
.modal-container .modal-body-container .close-button img {
  width: 1.4rem;
  height: 1.4rem;
  margin-top: 1px;
}
.modal-container .modal-body-container .close-button .fa-close {
  padding: 8px 0 0 1px;
  font-size: 1.6rem;
}
.modal-container .compare-images ul {
  display: box;
  display: -webkit-box;
  display: flexbox;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
}
@media screen and (max-width: 414px) {
  .modal-container .compare-images ul {
    -webkit-box-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
  }
}
.modal-container .compare-images ul li {
  box-flex: 1;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin: 10px;
}
.modal-container .compare-images ul img {
  width: 100%;
}
.modal-container .modal-body-container-small {
  width: 400px;
  margin-left: -200px;
}
@media screen and (max-width: 414px) {
  .modal-container .modal-body-container-small {
    width: 80%;
    margin-left: -40%;
  }
}
.modal-container .modal-body-container-small h2 {
  margin-top: 20px;
  font-weight: 600;
}
.modal-container .modal-body-container-small ul {
  margin: 10px 0;
}
.modal-container .modal-body-container-small .staff-block {
  height: 400px;
  padding: 20px;
  overflow-y: scroll;
}
.modal-container .modal-body-container-small .staff-block h2 {
  margin: 0 0 20px 0;
  color: sky-blue;
  font-size: 1.25rem;
}
.modal-container .modal-body-container-small .staff-block h3 {
  font-weight: 400;
}
.modal-container .modal-body-container-small .staff-block span {
  position: relative;
  top: 40px;
}
.modal-container .practice-modal-body .description {
  padding: 0 10px 20px;
}
@media screen and (max-width: 768px) {
  .modal-container .practice-modal-body .description {
    font-size: 0.8rem;
  }
}
.modal-container .practice-tutorial-body > span {
  font-size: 0.7rem;
}
.modal-container .practice-tutorial-body > h1 {
  color: #333;
}
@media screen and (max-width: 414px) {
  .modal-container .practice-tutorial-body > h1 {
    font-size: 1.25rem;
  }
}
.modal-container .practice-tutorial-body > img {
  width: 225px;
  padding: 0 0 20px 0;
}
.modal-container .post-sp-modal-body .post-sp-description {
  display: inline-block;
}
.modal-container .post-sp-modal-body .post-sp-description > img {
  display: inline;
  margin: 0 4px 0 0;
}
.modal-container .post-sp-modal-body .url-area input {
  width: 100%;
  padding: 4px;
  border: 1px solid #999;
  box-shadow: 0 1px 1px #ddd inset;
  border-radius: 4px;
  background-color: #eee;
  text-align: center;
}
.modal-container .post-sp-modal-body .tutorial-image {
  margin: 0 0 20px 0;
}
.modal-container .post-sp-modal-body .tutorial-image > img {
  width: 400px;
}
.modal-container .post-sp-modal-body .description-notice {
  padding: 20px;
  font-size: 0.8rem;
  text-align: left;
}
.modal-container .sketch-modal-body-container {
  padding: 30px 0 40px;
}
.modal-container .sketch-modal-body-container span {
  font-size: 0.8rem;
}
.modal-container .sketch-modal-body-container h1 {
  font-size: 1.25rem;
}
.modal-container .sketch-modal-body-container .sketch-image-container {
  padding-top: 30px;
  margin-bottom: 30px;
  background-color: #2e97d8;
}
.modal-container .sketch-modal-body-container .sketch-image-container > h2 {
  margin: 0 10px 10px 10px;
  color: #fff;
}
.modal-container .sketch-modal-body-container .sketch-image-container > img {
  width: 410px;
}
.modal-container .sketch-modal-body-container .sketch-image-container .description {
  font-size: 0.8rem;
}
.modal-container .image-modal-body-container {
  width: 90%;
  left: 5%;
  margin-left: 0;
  padding: 0;
  border-radius: 4px;
}
.modal-container .image-modal-body-container img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  -webkit-transition: -webkit-transform 0.2s ease 0s;
  transition: transform 0.2s ease 0s;
}
.modal-container .image-modal-body-container img.image-flipped {
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}
.modal-container .making-image-modal-body-container {
  width: 90%;
  left: 5%;
  margin-left: 0;
  padding: 0;
  border-radius: 8px;
}
.modal-container .making-image-modal-body-container .making-image-modal-image {
  padding: 48px 16px;
}
.modal-container .making-image-modal-body-container .making-image-modal-image > img {
  width: 100%;
  height: auto;
}
.modal-container .making-notice-detail {
  padding: 0 40px;
}
@media screen and (max-width: 768px) {
  .modal-container .making-notice-detail {
    padding: 0 20px;
  }
}
@media screen and (max-width: 414px) {
  .modal-container .making-notice-detail {
    padding: 0 10px;
  }
}
.modal-container .making-notice-detail > ol {
  text-align: left;
}
.modal-container .making-notice-detail > ol > li {
  list-style-type: decimal;
  margin: 15px 0;
}
.modal-container .making-notice-detail .making-modal-checkbox {
  margin-bottom: 20px;
}
.about-restrictions-main {
  background-color: #fff;
  border-radius: 10px;
  padding: 30px;
  text-align: center;
  margin-bottom: 60px;
}
@media screen and (max-width: 768px) {
  .about-restrictions-main {
    padding: 10px;
  }
}
.about-restrictions-main h1 {
  font-size: 1.5rem;
  font-weight: 400;
}
.about-restrictions-main h2 {
  font-size: 1.2rem;
}
.about-restrictions-main h2.before {
  color: #797873;
}
.about-restrictions-main h2.after {
  color: #ffed78;
}
.about-restrictions-main p {
  margin: 20px 0 40px;
  line-height: 1.6;
  color: #555;
  font-size: 0.9rem;
  padding: 0 20px;
  text-align: left;
}
.about-restrictions-main table {
  margin: 30px auto;
  width: 585px;
  border: 1px solid #ccc;
}
@media screen and (max-width: 1000px) {
  .about-restrictions-main table {
    width: 90%;
  }
}
@media screen and (max-width: 414px) {
  .about-restrictions-main table {
    width: 100%;
  }
}
.about-restrictions-main table td {
  border: 1px solid #ccc;
  padding: 12px;
}
.about-restrictions-main table td.label-column {
  width: 28%;
}
.about-restrictions-main table td.premium-column,
.about-restrictions-main table td.general-column {
  width: 36%;
}
.about-restrictions-main table td.basic-course-row {
  color: #77d91c;
}
.about-restrictions-main table td.advanced-course-row {
  color: #ff962b;
}
.about-restrictions-main table td small {
  color: #555;
}
.about-restrictions-main .arrow-down {
  color: #797873;
  font-size: 1.2rem;
  margin-bottom: 20px;
}
@charset "utf-8";
.sketch-practice-area-section .sketch-correction-label {
  background-color: #fff6e2;
  padding: 15px 20px;
  width: 100%;
  border-radius: 5px;
  margin-bottom: 20px;
}
.sketch-practice-area-section .sketch-correction-label .sketch-correction-block {
  display: box;
  display: -webkit-box;
  display: flexbox;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
}
@media screen and (max-width: 414px) {
  .sketch-practice-area-section .sketch-correction-label .sketch-correction-block div {
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    flex-wrap: wrap;
  }
}
.sketch-practice-area-section .sketch-correction-label .sketch-correction-block ._description {
  box-flex: 4;
  -webkit-box-flex: 4;
  -webkit-flex: 4;
  -ms-flex: 4;
  flex: 4;
  padding-right: 10px;
  color: #ffa500;
}
.sketch-practice-area-section .sketch-correction-label .sketch-correction-block .sketch-correction-button {
  box-flex: 2;
  -webkit-box-flex: 2;
  -webkit-flex: 2;
  -ms-flex: 2;
  flex: 2;
  vertical-align: middle;
}
.sketch-practice-area-section .sketch-practice-section .sketch-practice-heading {
  font-weight: 400;
  background: #f6f6f6;
  padding: 10px 35px;
  border-radius: 5px;
  font-size: 1.25rem;
  vertical-align: middle;
}
.sketch-practice-area-section .sketch-practice-section .sketch-practice-list-section {
  display: box;
  display: -webkit-box;
  display: flexbox;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 20px auto 0 auto;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
}
.sketch-practice-area-section .sketch-practice-section .sketch-practice-list-section .sketch-practice-item-wrap {
  position: relative;
  width: 32%;
  height: 196px;
  overflow: hidden;
  border-radius: 8px;
  margin-bottom: 20px;
  box-sizing: border-box;
}
.sketch-practice-area-section .sketch-practice-section .sketch-practice-list-section .sketch-practice-item-wrap:not(:nth-of-type(3n)) {
  margin-right: 2%;
}
@media screen and (max-width: 414px) {
  .sketch-practice-area-section .sketch-practice-section .sketch-practice-list-section .sketch-practice-item-wrap {
    width: 48%;
    height: 150px;
  }
  .sketch-practice-area-section .sketch-practice-section .sketch-practice-list-section .sketch-practice-item-wrap:not(:nth-of-type(3n)) {
    margin-right: 0;
  }
  .sketch-practice-area-section .sketch-practice-section .sketch-practice-list-section .sketch-practice-item-wrap:not(:nth-of-type(2n)) {
    margin-right: 3%;
  }
}
.sketch-practice-area-section .sketch-practice-section .sketch-practice-list-section .sketch-practice-item-wrap .sketch-practice-item-thumbnail {
  width: 100%;
  height: 100%;
  display: block;
  border: 1px solid #fbf7ed;
  border-radius: 8px;
  cursor: pointer;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}
.sketch-practice-area-section .sketch-practice-section .sketch-practice-list-section .sketch-practice-item-wrap .sketch-practice-item-thumbnail:hover {
  opacity: 0.5;
}
.sketch-practice-area-section .sketch-practice-section .sketch-practice-list-section .sketch-practice-item-wrap .sketch-practice-item-feedback-count {
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: rgba(255,255,255,0.65);
  border-top-right-radius: 8px;
  padding: 4px 10px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #ff4a6d;
}
.sketch-practice-area-section .sketch-practice-section .sketch-practice-see-more-button {
  margin-top: 20px;
}
.sketch-practice-area-section ._button {
  background: sky-blue;
  border-bottom: 1px solid #13a7ff;
  color: #fff;
  padding: 10px 30px;
  border-radius: 5px;
  text-align: center;
  font-weight: 400;
}
.sketch-practice-area-section ._button:hover {
  background: #13a7ff;
}
.sketch-practice-area-section .sketch-practice-loading-spinner {
  font-size: 2rem;
  text-align: center;
}
.sketch-preview-modal {
  position: fixed;
  overflow-y: auto;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(51,51,51,0.4);
  z-index: 200;
  text-align: center;
}
.sketch-preview-modal a {
  color: #13a7ff;
  font-weight: 600;
}
.sketch-preview-modal img {
  width: 100%;
}
.sketch-preview-modal .sketch-preview-modal-body-container {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin: 60px auto 40px;
  width: 810px;
  border-radius: 8px;
  box-shadow: 0 2px 4px 1px rgba(51,51,51,0.4);
  background-color: #fff;
  font-weight: 200;
}
@media screen and (max-width: 1000px) {
  .sketch-preview-modal .sketch-preview-modal-body-container {
    width: 750px;
  }
}
@media screen and (max-width: 768px) {
  .sketch-preview-modal .sketch-preview-modal-body-container {
    width: 100%;
  }
}
@media screen and (max-width: 414px) {
  .sketch-preview-modal .sketch-preview-modal-body-container {
    width: 90%;
    margin: 20px auto;
  }
}
.sketch-preview-modal .sketch-preview-modal-body-container .sketch-preview-modal-body .sketch-preview-modal-body-thumbnail > img {
  border-radius: 8px;
}
.sketch-preview-modal .sketch-preview-modal-body-container .close-button {
  position: absolute;
  box-sizing: border-box;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: 4px solid #fff;
  background: #333;
  top: -0.5rem;
  right: -0.5rem;
  padding: 0.5rem 0;
  cursor: pointer;
}
.sketch-preview-modal .sketch-preview-modal-body-container .close-button .fa-close {
  color: #fff;
  font-size: 1.6rem;
}
@charset "utf-8";
.lesson-wrap-with-practice-sp .lesson-sp-tab-menu {
  width: 100%;
  padding-top: 20px;
}
.lesson-wrap-with-practice-sp .lesson-sp-tab-menu .lesson-sp-tab-menu-list .tab-menu-list-item {
  border: 0;
}
.lesson-wrap-with-practice-sp .lesson-sp-tab-menu .lesson-sp-tab-menu-list .tab-menu-list-item.tab-menu-list-item-active {
  background-color: #fff;
  color: #13a7ff;
}
.lesson-wrap-with-practice-sp .lesson-sp-content {
  margin: 0;
  background-color: #fff;
}
@media screen and (max-width: 768px) {
  .lesson-wrap-with-practice-sp .lesson-main {
    width: 100%;
    margin-bottom: 20px;
  }
}
.lesson-wrap-with-practice-sp .lesson-main .premium-label-block {
  margin-bottom: 20px;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  flex-wrap: wrap;
}
.lesson-wrap-with-practice-sp .lesson-main .premium-label-block strong {
  color: #ff962b;
}
.lesson-wrap-with-practice-sp .lesson-main .premium-label-block .premium-label-block-link {
  font-size: 0.8rem;
  font-weight: 600;
}
@media screen and (max-width: 768px) {
  .lesson-wrap-with-practice-sp .lesson-main .premium-label-block .premium-label-block-link {
    width: 100%;
    margin-top: 10px;
  }
}
.lesson-wrap-with-practice-sp .lesson-main .premium-label-block .premium-label-block-link a {
  color: #ff962b;
}
@media screen and (max-width: 768px) {
  .lesson-wrap-with-practice-sp .lesson-main .premium-label-block .premium-label-block-link a {
    width: 100%;
    text-align: center;
  }
}
.lesson-wrap-with-practice-sp .lesson-main .lesson-information-area .lesson-title-area {
  display: box;
  display: -webkit-box;
  display: flexbox;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  margin-bottom: 20px;
  padding: 20px 10px;
}
.lesson-wrap-with-practice-sp .lesson-main .lesson-information-area .lesson-title-area.lesson-sp-content-area {
  margin: 0;
}
@media screen and (max-width: 1000px) {
  .lesson-wrap-with-practice-sp .lesson-main .lesson-information-area .lesson-title-area {
    display: block;
  }
}
.lesson-wrap-with-practice-sp .lesson-main .lesson-information-area .lesson-title-area .lesson-course-title {
  box-flex: 3;
  -webkit-box-flex: 3;
  -webkit-flex: 3;
  -ms-flex: 3;
  flex: 3;
}
@media screen and (max-width: 1000px) {
  .lesson-wrap-with-practice-sp .lesson-main .lesson-information-area .lesson-title-area .lesson-course-title {
    margin-bottom: 15px;
  }
}
.lesson-wrap-with-practice-sp .lesson-main .lesson-information-area .lesson-title-area .lesson-course-title .lesson-course-title-text .lesson-course-title-text-level a {
  display: inline;
}
.lesson-wrap-with-practice-sp .lesson-main .lesson-information-area .lesson-title-area .lesson-course-title .share-button {
  margin: 20px 0;
}
.lesson-wrap-with-practice-sp .lesson-main .lesson-information-area .lesson-title-area .complete-button-area {
  min-width: 160px;
}
.lesson-wrap-with-practice-sp .lesson-main .lesson-information-area .lesson-title-area .complete-button-area .lesson-login-button {
  width: 100%;
}
@media screen and (max-width: 414px) {
  .lesson-wrap-with-practice-sp .lesson-main .lesson-information-area .lesson-title-area .complete-button-area .lesson-login-button {
    font-size: 0.8rem;
  }
}
.lesson-wrap-with-practice-sp .lesson-main .lesson-information-area .lesson-title-area .complete-button-area .complete-button {
  width: 100%;
  padding: 10px 0;
}
.lesson-wrap-with-practice-sp .lesson-main .lesson-information-area .lesson-title-area .complete-button-area .complete-button.sls-complete>.fa {
  color: #77d91c;
}
.lesson-wrap-with-practice-sp .lesson-main .lesson-information-area .lesson-practice-area {
  width: 100%;
}
.lesson-wrap-with-practice-sp .lesson-main .lesson-information-area .lesson-practice-area .lesson-practice-area-header {
  display: box;
  display: -webkit-box;
  display: flexbox;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  -webkit-box-align-items: center;
  -webkit-align-items: center;
  align-items: center;
  width: 100%;
  background: #ffed78;
  font-weight: bold;
  padding: 10px;
  margin-bottom: 20px;
}
.lesson-wrap-with-practice-sp .lesson-main .lesson-information-area .lesson-practice-area .lesson-practice-area-header .lesson-practice-area-header-icon {
  width: 48px;
}
.lesson-wrap-with-practice-sp .lesson-main .lesson-information-area .lesson-practice-area .lesson-practice-area-header .lesson-practice-area-header-text {
  padding-left: 10px;
  color: #13a7ff;
  font-size: 0.8rem;
}
.lesson-wrap-with-practice-sp .lesson-main .lesson-information-area .lesson-practice-area .lesson-practice-area-header .lesson-practice-area-header-text strong {
  display: block;
  font-size: 1.25rem;
}
.lesson-wrap-with-practice-sp .lesson-main .lesson-information-area .lesson-practice-area .lesson-practice-area-description {
  margin-bottom: 20px;
}
.lesson-wrap-with-practice-sp .lesson-main .lesson-information-area .lesson-practice-area .lesson-practice-area-description .lesson-practice-area-description-header {
  margin-bottom: 10px;
}
.lesson-wrap-with-practice-sp .lesson-main .lesson-information-area .lesson-practice-area .lesson-practice-area-description .lesson-practice-area-description-header .lesson-practice-area-description-badge {
  display: inline-block;
  font-weight: 600;
  font-size: 1rem;
  background-color: rgba(19,167,255,0.2);
  color: #0c79cb;
  padding: 10px 15px;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  margin-right: 10px;
}
.lesson-wrap-with-practice-sp .lesson-main .lesson-information-area .lesson-practice-area .lesson-practice-area-description .lesson-practice-area-reference-image-container {
  position: relative;
  padding: 0 10px;
  margin-bottom: 10px;
}
.lesson-wrap-with-practice-sp .lesson-main .lesson-information-area .lesson-practice-area .lesson-practice-area-description .lesson-practice-area-reference-image-container .lesson-practice-area-reference-image {
  width: 100%;
  height: auto;
  -webkit-transition: -webkit-transform 0.2s ease 0s;
  transition: transform 0.2s ease 0s;
}
.lesson-wrap-with-practice-sp .lesson-main .lesson-information-area .lesson-practice-area .lesson-practice-area-description .lesson-practice-area-reference-image-container .lesson-practice-area-reference-image.reference-image-flipped {
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}
.lesson-wrap-with-practice-sp .lesson-main .lesson-information-area .lesson-practice-area .lesson-practice-area-description .lesson-practice-area-reference-image-container .lesson-practice-area-reference-image-button-container {
  display: box;
  display: -webkit-box;
  display: flexbox;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  position: absolute;
  right: 20px;
  bottom: 10px;
  width: 36px;
}
.lesson-wrap-with-practice-sp .lesson-main .lesson-information-area .lesson-practice-area .lesson-practice-area-description .lesson-practice-area-reference-image-container .lesson-practice-area-reference-image-button-container > a {
  display: block;
  box-sizing: content-box;
  width: 36px;
  height: 36px;
  background-color: #fff;
  padding: 4px;
  border-radius: 8px;
  box-shadow: 0 4px 4px rgba(51,51,51,0.4);
}
.lesson-wrap-with-practice-sp .lesson-main .lesson-information-area .lesson-practice-area .lesson-practice-area-description .lesson-practice-area-point-description ul {
  padding: 0 10px;
}
.lesson-wrap-with-practice-sp .lesson-main .lesson-information-area .lesson-practice-area .lesson-practice-area-sketch {
  padding-bottom: 20px;
}
.lesson-wrap-with-practice-sp .lesson-main .lesson-information-area .lesson-practice-area .lesson-practice-area-sketch .lesson-practice-area-sketch-description-lets-draw {
  font-size: 0.8rem;
  margin-bottom: 20px;
  width: 100%;
  background: #ffed78;
  padding: 10px;
}
.lesson-wrap-with-practice-sp .lesson-main .lesson-information-area .lesson-practice-area .lesson-practice-area-sketch .lesson-practice-area-sketch-description-lets-draw > strong {
  font-size: 1.25rem;
  font-weight: 600;
}
.lesson-wrap-with-practice-sp .lesson-main .lesson-information-area .lesson-practice-area .lesson-practice-area-sketch .lesson-practice-area-sketch-link-draw {
  padding: 0 10px;
}
.lesson-wrap-with-practice-sp .lesson-main .lesson-information-area .lesson-practice-area .lesson-practice-area-sketch .lesson-practice-area-sketch-link-draw > a {
  width: 100%;
}
.lesson-wrap-with-practice-sp .lesson-main .lesson-information-area .lesson-practice-area .lesson-practice-area-sketch .sketch-about-modal-link {
  display: block;
  margin-top: 10px;
  margin-bottom: 20px;
  padding: 0 10px;
  text-align: right;
  font-weight: 600;
  text-decoration: underline;
}
.lesson-wrap-with-practice-sp .lesson-main .lesson-information-area .lesson-practice-area .lesson-practice-area-sketch .sketch-about-modal-link > img {
  width: 16px;
  height: 16px;
  vertical-align: middle;
}
.lesson-wrap-with-practice-sp .lesson-main .lesson-information-area .lesson-practice-area .lesson-practice-area-practice-items {
  display: none;
  padding: 0 10px;
}
.lesson-wrap-with-practice-sp .lesson-main .lesson-information-area .lesson-practice-area .lesson-practice-area-practice-items h2 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 20px;
  width: 100%;
  background-color: #2e97d8;
  color: #fff;
  padding: 10px;
  border-radius: 4px;
}
.lesson-wrap-with-practice-sp .lesson-main .lesson-information-area .lesson-practice-area .lesson-practice-area-practice-items .lesson-practice-area-practice-items-list {
  margin-bottom: 20px;
}
.lesson-wrap-with-practice-sp .lesson-main .lesson-information-area .lesson-practice-area .lesson-practice-area-practice-items .lesson-practice-area-practice-items-see-more > a {
  width: 100%;
  background-color: #2e97d8;
}
.lesson-wrap-with-practice-sp .lesson-main .lesson-text-area .lesson-text-title {
  font-weight: 600;
  border-bottom: 1px solid #fbf7ed;
  padding: 20px;
}
.lesson-wrap-with-practice-sp .lesson-main .lesson-text-area .lesson-text-title>small {
  font-size: 0.8rem;
  font-weight: 400;
  vertical-align: middle;
}
.lesson-wrap-with-practice-sp .lesson-main .lesson-text-area .lesson-text-area-main {
  padding: 0 20px;
}
.lesson-wrap-with-practice-sp .lesson-main .lesson-text-area .lesson-text-area-toggle-full-text-container {
  padding: 30px 20px 30px 20px;
  text-align: center;
}
.lesson-wrap-with-practice-sp .lesson-main .lesson-text-area .lesson-text-area-toggle-full-text-container .lesson-text-btn {
  min-width: 320px;
  max-width: 100%;
  padding: 14px 28px;
}
@media screen and (max-width: 768px) {
  .lesson-wrap-with-practice-sp .lesson-main .lesson-text-area .lesson-text-area-toggle-full-text-container .lesson-text-btn {
    min-width: initial;
  }
}
.lesson-wrap-with-practice-sp .lesson-main .lesson-text-area .lesson-fresh-limit-date {
  background: #fff5af;
  padding: 20px 20px 40px 20px;
  text-align: center;
}
.lesson-wrap-with-practice-sp .lesson-main .lesson-other-lessons {
  width: 100%;
  min-width: 280px;
  margin-left: 0;
}
.lesson-wrap-with-practice-sp .lesson-main .lesson-other-lessons .lesson-other-lessons-similar-lesson {
  margin-top: 0;
  margin-bottom: 20px;
}
.lesson-wrap-with-practice-sp .lesson-main .lesson-other-lessons .lesson-other-lessons-similar-lesson .lesson-other-lessons-similar-lesson-title {
  border-bottom: 2px solid #fbf7ed;
  font-size: 1.25rem;
  font-weight: 400;
}
.lesson-wrap-with-practice-sp .lesson-main .lesson-other-lessons .lesson-other-lessons-similar-lesson .lesson-other-lessons-similar-lesson-title a {
  color: #333;
}
.lesson-wrap-with-practice-sp .lesson-main .lesson-other-lessons .lesson-other-lessons-similar-lesson .lesson-other-lessons-similar-lesson-list {
  padding: 0 20px;
}
.lesson-wrap-with-practice-sp .lesson-main .lesson-other-lessons .lesson-other-lessons-similar-lesson .lesson-other-lessons-similar-lesson-list .lesson-other-lessons-similar-lesson-list-item {
  padding: 15px 0;
}
.lesson-wrap-with-practice-sp .lesson-main .lesson-other-lessons .lesson-other-lessons-similar-lesson .lesson-other-lessons-similar-lesson-list .lesson-other-lessons-similar-lesson-list-item:not(:last-of-type) {
  border-bottom: 1px dashed #ddd;
}
.lesson-wrap-with-practice-sp .lesson-main .lesson-other-lessons .lesson-other-lessons-similar-lesson .lesson-other-lessons-similar-lesson-list .lesson-other-lessons-similar-lesson-list-item .lesson-other-lessons-similar-lesson-list-item-inner {
  display: box;
  display: -webkit-box;
  display: flexbox;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  flex-wrap: wrap;
}
@media screen and (max-width: 1000px) {
  .lesson-wrap-with-practice-sp .lesson-main .lesson-other-lessons .lesson-other-lessons-similar-lesson .lesson-other-lessons-similar-lesson-list .lesson-other-lessons-similar-lesson-list-item .lesson-other-lessons-similar-lesson-list-item-inner {
    display: block;
  }
}
.lesson-wrap-with-practice-sp .lesson-main .lesson-other-lessons .lesson-other-lessons-similar-lesson .lesson-other-lessons-similar-lesson-list .lesson-other-lessons-similar-lesson-list-item .lesson-other-lessons-similar-lesson-list-item-inner .lesson-other-lessons-similar-lesson-list-item-thumbnail {
  width: 53%;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
@media screen and (max-width: 1000px) {
  .lesson-wrap-with-practice-sp .lesson-main .lesson-other-lessons .lesson-other-lessons-similar-lesson .lesson-other-lessons-similar-lesson-list .lesson-other-lessons-similar-lesson-list-item .lesson-other-lessons-similar-lesson-list-item-inner .lesson-other-lessons-similar-lesson-list-item-thumbnail {
    width: 100%;
  }
}
.lesson-wrap-with-practice-sp .lesson-main .lesson-other-lessons .lesson-other-lessons-similar-lesson .lesson-other-lessons-similar-lesson-list .lesson-other-lessons-similar-lesson-list-item .lesson-other-lessons-similar-lesson-list-item-inner .lesson-other-lessons-similar-lesson-list-item-thumbnail>img {
  width: 100%;
  height: auto;
}
.lesson-wrap-with-practice-sp .lesson-main .lesson-other-lessons .lesson-other-lessons-similar-lesson .lesson-other-lessons-similar-lesson-list .lesson-other-lessons-similar-lesson-list-item .lesson-other-lessons-similar-lesson-list-item-inner .lesson-other-lessons-similar-lesson-list-item-thumbnail .lesson-other-lessons-similar-lesson-list-item-thumbnail-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(51,51,51,0.5);
}
.lesson-wrap-with-practice-sp .lesson-main .lesson-other-lessons .lesson-other-lessons-similar-lesson .lesson-other-lessons-similar-lesson-list .lesson-other-lessons-similar-lesson-list-item .lesson-other-lessons-similar-lesson-list-item-inner .lesson-other-lessons-similar-lesson-list-item-thumbnail .lesson-other-lessons-similar-lesson-list-item-thumbnail-overlay > p {
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -0.5em 0 0 -1.5em;
}
.lesson-wrap-with-practice-sp .lesson-main .lesson-other-lessons .lesson-other-lessons-similar-lesson .lesson-other-lessons-similar-lesson-list .lesson-other-lessons-similar-lesson-list-item .lesson-other-lessons-similar-lesson-list-item-inner .lesson-other-lessons-similar-lesson-list-item-text {
  box-flex: 1;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin-left: 10px;
}
@media screen and (max-width: 1000px) {
  .lesson-wrap-with-practice-sp .lesson-main .lesson-other-lessons .lesson-other-lessons-similar-lesson .lesson-other-lessons-similar-lesson-list .lesson-other-lessons-similar-lesson-list-item .lesson-other-lessons-similar-lesson-list-item-inner .lesson-other-lessons-similar-lesson-list-item-text {
    margin-left: 0;
    margin-top: 10px;
  }
}
.lesson-wrap-with-practice-sp .lesson-main .lesson-other-lessons .lesson-other-lessons-similar-lesson .lesson-other-lessons-similar-lesson-list .lesson-other-lessons-similar-lesson-list-item .lesson-other-lessons-similar-lesson-list-item-inner .lesson-other-lessons-similar-lesson-list-item-text .lesson-other-lessons-similar-lesson-list-item-title {
  font-size: 1rem;
  font-weight: 600;
}
.lesson-wrap-with-practice-sp .lesson-main .lesson-other-lessons .lesson-other-lessons-recommended-course {
  margin-bottom: 20px;
}
.lesson-wrap-with-practice-sp .lesson-main .lesson-other-lessons .lesson-other-lessons-recommended-course h1 {
  font-weight: 400;
}
.lesson-wrap-with-practice-sp .lesson-main .lesson-other-lessons .lesson-other-lessons-recommended-course .lesson-other-lessons-recommended-course-main {
  padding: 20px;
}
.lesson-wrap-with-practice-sp .lesson-main .lesson-other-lessons .lesson-other-lessons-recommended-course .lesson-other-lessons-recommended-course-main .lesson-other-lessons-recommended-course-thumbnail {
  display: block;
}
.lesson-wrap-with-practice-sp .lesson-main .lesson-other-lessons .lesson-other-lessons-recommended-course .lesson-other-lessons-recommended-course-main .lesson-other-lessons-recommended-course-thumbnail > img {
  width: 100%;
  height: auto;
}
.lesson-wrap-with-practice-sp .lesson-main .lesson-other-lessons .lesson-other-lessons-recommended-course .lesson-other-lessons-recommended-course-main .lesson-other-lessons-recommended-course-name {
  display: block;
  margin-top: 10px;
  font-weight: 600;
  text-decoration: underline;
}
.lesson-wrap-with-practice-sp .lesson-main .lesson-other-lessons-similar-lesson {
  margin-top: 20px;
}
.lesson-wrap-with-practice-sp .lesson-main .lesson-other-lessons-similar-lesson .lesson-other-lessons-similar-lesson-title {
  padding: 15px 20px;
  text-align: center;
}
.lesson-wrap-with-practice-sp .lesson-main .lesson-other-lessons-similar-lesson .lesson-other-lessons-similar-lesson-title > p {
  font-size: 0.8rem;
  font-weight: 400;
}
.lesson-wrap-with-practice-sp .lesson-main .lesson-other-lessons-similar-lesson .lesson-other-lessons-similar-lesson-title > p > img {
  padding: 0 3px 3px;
}
.lesson-wrap-with-practice-sp .lesson-main .lesson-other-lessons-similar-lesson .lesson-other-lessons-similar-lesson-title > h1 {
  font-weight: 600;
  font-size: 1.6rem;
}
.lesson-wrap-with-practice-sp .lesson-main .lesson-other-lessons-similar-lesson .lesson-other-lessons-similar-lesson-list .course-lesson-list-item {
  padding: 20px;
}
.lesson-wrap-with-practice-sp .lesson-main .lesson-other-lessons-subscribe-button-container {
  padding: 0 10px;
}
.lesson-wrap-with-practice-sp .lesson-main .lesson-other-lessons-subscribe-button-container .lesson-other-lessons-subscribe-buttons {
  margin-top: 20px;
}
.lesson-wrap-with-practice-sp .lesson-main .lesson-other-lessons-subscribe-button-container .lesson-other-lessons-subscribe-buttons h1 {
  padding: 20px;
  text-align: center;
  font-size: 0.8rem;
}
.lesson-wrap-with-practice-sp .lesson-main .lesson-other-lessons-subscribe-button-container .lesson-other-lessons-subscribe-buttons .lesson-other-lessons-subscribe-buttons-main {
  padding: 0 20px 60px 20px;
  width: 100%;
  min-width: 240px;
  text-align: center;
  background-image: url("../images/premium/seito_right.png");
  background-repeat: no-repeat;
  background-position: center bottom -25px;
  background-size: 80px;
}
#sketch-embed-upload-frame {
  width: 100%;
  height: 100%;
}
@charset "utf-8";
.lesson-wrap-with-practice-pc .lesson-main {
  width: 100%;
}
.lesson-wrap-with-practice-pc .lesson-main .lesson-practice-area {
  width: 100%;
  overflow: visible;
  margin-top: 30px;
}
.lesson-wrap-with-practice-pc .lesson-main .lesson-practice-area .lesson-practice-area-header {
  display: box;
  display: -webkit-box;
  display: flexbox;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  -webkit-box-align-items: center;
  -webkit-align-items: center;
  align-items: center;
  position: relative;
  width: 100%;
  background: #ffed78;
  font-weight: bold;
  padding: 10px;
  margin-bottom: 20px;
  border-radius: 8px 8px 0 0;
}
.lesson-wrap-with-practice-pc .lesson-main .lesson-practice-area .lesson-practice-area-header .lesson-practice-area-header-icon {
  width: 48px;
}
.lesson-wrap-with-practice-pc .lesson-main .lesson-practice-area .lesson-practice-area-header .lesson-practice-area-header-text {
  padding-left: 10px;
  color: #13a7ff;
}
.lesson-wrap-with-practice-pc .lesson-main .lesson-practice-area .lesson-practice-area-header .lesson-practice-area-header-text strong {
  display: block;
  font-size: 1.6rem;
}
.lesson-wrap-with-practice-pc .lesson-main .lesson-practice-area .lesson-practice-area-header .lesson-practice-title-character {
  position: absolute;
  bottom: 0;
  right: 10px;
  width: 203px;
}
@media screen and (max-width: 1000px) {
  .lesson-wrap-with-practice-pc .lesson-main .lesson-practice-area .lesson-practice-area-header .lesson-practice-title-character {
    width: 100px;
  }
}
@media screen and (max-width: 768px) {
  .lesson-wrap-with-practice-pc .lesson-main .lesson-practice-area .lesson-practice-area-header .lesson-practice-title-character {
    width: 203px;
  }
}
@media screen and (max-width: 414px) {
  .lesson-wrap-with-practice-pc .lesson-main .lesson-practice-area .lesson-practice-area-header .lesson-practice-title-character {
    display: none;
  }
}
.lesson-wrap-with-practice-pc .lesson-main .lesson-practice-area .lesson-practice-area-description .lesson-practice-area-description-header {
  margin-bottom: 10px;
}
.lesson-wrap-with-practice-pc .lesson-main .lesson-practice-area .lesson-practice-area-description .lesson-practice-area-description-header .lesson-practice-area-description-badge {
  display: inline-block;
  font-weight: 600;
  font-size: 1rem;
  background-color: rgba(19,167,255,0.2);
  color: #0c79cb;
  padding: 10px 20px;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  margin-right: 10px;
}
.lesson-wrap-with-practice-pc .lesson-main .lesson-practice-area .lesson-practice-area-description .lesson-practice-area-reference-image-container {
  position: relative;
  margin: 0 30px;
  margin-bottom: 10px;
  text-align: center;
}
.lesson-wrap-with-practice-pc .lesson-main .lesson-practice-area .lesson-practice-area-description .lesson-practice-area-reference-image-container .lesson-practice-area-reference-image {
  width: 100%;
}
.lesson-wrap-with-practice-pc .lesson-main .lesson-practice-area .lesson-practice-area-description .lesson-practice-area-point-description ul {
  padding: 0 30px;
}
.lesson-wrap-with-practice-pc .lesson-main .lesson-practice-area .lesson-practice-area-description .lesson-practice-area-point-description ul li {
  font-size: 1rem;
}
.lesson-wrap-with-practice-pc .lesson-main .lesson-practice-area .lesson-practice-area-sketch {
  padding: 0 30px 30px 30px;
}
.lesson-wrap-with-practice-pc .lesson-main .lesson-practice-area .lesson-practice-area-sketch .lesson-practice-area-sketch-description {
  margin: 20px 0;
}
.lesson-wrap-with-practice-pc .lesson-main .lesson-practice-area .lesson-practice-area-sketch .lesson-practice-area-sketch-description .lesson-practice-area-sketch-description-lets-draw {
  display: box;
  display: -webkit-box;
  display: flexbox;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  -webkit-box-align-items: center;
  -webkit-align-items: center;
  align-items: center;
  font-size: 0.8rem;
  width: 100%;
  background-color: #2e97d8;
  color: #fff;
  padding: 15px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
@media screen and (max-width: 1000px) {
  .lesson-wrap-with-practice-pc .lesson-main .lesson-practice-area .lesson-practice-area-sketch .lesson-practice-area-sketch-description .lesson-practice-area-sketch-description-lets-draw {
    display: block;
  }
}
.lesson-wrap-with-practice-pc .lesson-main .lesson-practice-area .lesson-practice-area-sketch .lesson-practice-area-sketch-description .lesson-practice-area-sketch-description-lets-draw > p {
  box-flex: 1;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.lesson-wrap-with-practice-pc .lesson-main .lesson-practice-area .lesson-practice-area-sketch .lesson-practice-area-sketch-description .lesson-practice-area-sketch-description-lets-draw > p > strong {
  font-size: 1.25rem;
  font-weight: 600;
}
@media screen and (max-width: 1000px) {
  .lesson-wrap-with-practice-pc .lesson-main .lesson-practice-area .lesson-practice-area-sketch .lesson-practice-area-sketch-description .lesson-practice-area-sketch-description-lets-draw > p > strong {
    font-size: 1.25rem;
  }
}
.lesson-wrap-with-practice-pc .lesson-main .lesson-practice-area .lesson-practice-area-sketch .lesson-practice-area-sketch-description .lesson-practice-area-sketch-description-lets-draw > a {
  margin-top: 15px;
}
.lesson-wrap-with-practice-pc .lesson-main .lesson-practice-area .lesson-practice-area-sketch .lesson-practice-area-sketch-description .lesson-practice-area-sketch-description-lets-draw .sketch-modal-link {
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: underline;
}
.lesson-wrap-with-practice-pc .lesson-main .lesson-practice-area .lesson-practice-area-sketch .lesson-practice-area-sketch-description .lesson-practice-area-sketch-description-lets-draw .sketch-modal-link > img {
  width: 20px;
  height: 20px;
  padding: 0 4px 3px 0;
}
.lesson-wrap-with-practice-pc .lesson-main .lesson-practice-area .lesson-practice-area-sketch .lesson-practice-area-sketch-description .lesson-practice-area-sketch-link-draw {
  position: relative;
  padding: 0 20px;
  width: 100%;
  height: 423px;
  background-image: url("../images/sketch-screen.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}
.lesson-wrap-with-practice-pc .lesson-main .lesson-practice-area .lesson-practice-area-sketch .lesson-practice-area-sketch-description .lesson-practice-area-sketch-link-draw .lesson-practice-area-sketch-link-draw-modal {
  position: absolute;
  width: 200px;
  height: 190px;
  text-align: center;
  padding: 20px;
  box-shadow: 0 0 8px rgba(121,120,115,0.5);
  top: 50%;
  left: 50%;
  margin: -95px 0 0 -100px;
}
.lesson-wrap-with-practice-pc .lesson-main .lesson-practice-area .lesson-practice-area-sketch .lesson-practice-area-sketch-description .lesson-practice-area-sketch-link-draw .lesson-practice-area-sketch-link-draw-modal > p {
  margin: 10px 0;
}
.lesson-wrap-with-practice-pc .lesson-main .lesson-practice-area .lesson-practice-area-sketch .lesson-practice-area-sketch-description .lesson-practice-area-sketch-link-draw .lesson-practice-area-sketch-link-draw-modal .sketch-draw-btn {
  width: 160px;
  font-size: 1.25rem;
}
.lesson-wrap-with-practice-pc .lesson-main .lesson-practice-area .lesson-practice-area-sketch .sketch-paper-modal-link {
  display: block;
  margin-top: 10px;
  margin-bottom: 20px;
  text-align: right;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: underline;
}
.lesson-wrap-with-practice-pc .lesson-main .lesson-practice-area .lesson-practice-area-sketch .sketch-paper-modal-link > img {
  width: 20px;
  height: 20px;
  padding: 0 4px 4px 0;
  vertical-align: middle;
}
.lesson-wrap-with-practice-pc .lesson-main .lesson-practice-area .lesson-practice-area-practice-items {
  display: none;
}
.lesson-wrap-with-practice-pc .lesson-main .lesson-practice-area .lesson-practice-area-practice-items h2 {
  font-size: 1rem;
  margin-bottom: 20px;
  width: 100%;
  background-color: #2e97d8;
  color: #fff;
  padding: 10px 15px;
  border-radius: 4px;
}
.lesson-wrap-with-practice-pc .lesson-main .lesson-practice-area .lesson-practice-area-practice-items h2 > strong {
  font-size: 1.6rem;
  font-weight: 600;
}
.lesson-wrap-with-practice-pc .lesson-main .lesson-practice-area .lesson-practice-area-practice-items .lesson-practice-area-practice-items-see-more {
  text-align: center;
}
.lesson-wrap-with-practice-pc .lesson-main .lesson-practice-area .lesson-practice-area-practice-items .lesson-practice-area-practice-items-see-more > a {
  width: 300px;
  background-color: #2e97d8;
}
.lesson-wrap-with-practice-pc .lesson-main .lesson-other-lessons-similar-lesson {
  margin-top: 20px;
}
.lesson-wrap-with-practice-pc .lesson-main .lesson-other-lessons-similar-lesson .lesson-other-lessons-similar-lesson-title {
  padding: 15px 20px;
  text-align: center;
}
.lesson-wrap-with-practice-pc .lesson-main .lesson-other-lessons-similar-lesson .lesson-other-lessons-similar-lesson-title > p {
  font-size: 0.8rem;
  font-weight: 400;
}
.lesson-wrap-with-practice-pc .lesson-main .lesson-other-lessons-similar-lesson .lesson-other-lessons-similar-lesson-title > p > img {
  padding: 0 3px 3px;
}
.lesson-wrap-with-practice-pc .lesson-main .lesson-other-lessons-similar-lesson .lesson-other-lessons-similar-lesson-title > h1 {
  font-weight: 600;
  font-size: 1.6rem;
}
.lesson-wrap-with-practice-pc .lesson-main .lesson-other-lessons-similar-lesson .lesson-other-lessons-similar-lesson-list .course-lesson-list-item {
  padding: 20px;
}
.lesson-with-practice-lesson-text {
  width: 680px;
  margin: 20px auto;
  padding: 10px 30px 30px;
}
@media screen and (max-width: 768px) {
  .lesson-with-practice-lesson-text {
    width: 100%;
  }
}
.lesson-with-practice-lesson-text img {
  width: 100%;
  margin: 20px 0;
}
.lesson-with-practice-lesson-text h2 {
  margin: 20px 0;
  font-weight: 600;
}
.lesson-video-overlay {
  background-color: rgba(51,51,51,0.75);
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 2;
}
.lesson-video-overlay.loading {
  display: none;
}
.lesson-video-overlay.loading .lesson-video-overlay-loading-spinner {
  font-size: 2rem;
  width: 2rem;
  height: 2rem;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -1rem 0 0 -1rem;
  color: #fff;
}
.lesson-video-overlay.before-play {
  display: box;
  display: -webkit-box;
  display: flexbox;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  height: 100%;
}
.lesson-video-overlay.before-play .lesson-video-locked-lesson-block {
  padding: 20px;
  width: 70%;
  margin: auto;
  text-align: center;
}
.lesson-video-overlay.before-play .lesson-video-locked-lesson-block.lesson-video-locked-lesson-block-for-premium {
  border: 4px solid #ffed78;
  padding: 10px;
}
@media screen and (max-width: 414px) {
  .lesson-video-overlay.before-play .lesson-video-locked-lesson-block.lesson-video-locked-lesson-block-for-premium {
    padding: 5px;
  }
}
@media screen and (max-width: 1000px) {
  .lesson-video-overlay.before-play .lesson-video-locked-lesson-block {
    width: 90%;
  }
}
@media screen and (max-width: 768px) {
  .lesson-video-overlay.before-play .lesson-video-locked-lesson-block {
    width: 80%;
    padding: 10px;
  }
}
@media screen and (max-width: 414px) {
  .lesson-video-overlay.before-play .lesson-video-locked-lesson-block {
    width: 99%;
    padding: 10px;
  }
}
.lesson-video-overlay.before-play .lesson-video-locked-lesson-block h1 {
  font-weight: 600;
  font-size: 1.25rem;
  margin-bottom: 10px;
}
@media screen and (max-width: 768px) {
  .lesson-video-overlay.before-play .lesson-video-locked-lesson-block h1 {
    margin-bottom: 0;
  }
}
@media screen and (max-width: 414px) {
  .lesson-video-overlay.before-play .lesson-video-locked-lesson-block h1 {
    font-size: 1rem;
  }
}
.lesson-video-overlay.before-play .lesson-video-locked-lesson-block h1.lesson-video-locked-lesson-block-for-premium-heading {
  color: #ff962b;
}
.lesson-video-overlay.before-play .lesson-video-locked-lesson-block h1.lesson-video-locked-lesson-block-for-service-user-heading {
  color: #13a7ff;
}
.lesson-video-overlay.before-play .lesson-video-locked-lesson-block .lesson-video-locked-lesson-description {
  font-size: 0.8rem;
  margin-bottom: 10px;
}
@media screen and (max-width: 414px) {
  .lesson-video-overlay.before-play .lesson-video-locked-lesson-block .lesson-video-locked-lesson-description {
    font-size: 0.7rem;
    margin-bottom: 0;
  }
}
.lesson-video-overlay.before-play .lesson-video-locked-lesson-block .registration-area a,
.lesson-video-overlay.before-play .lesson-video-locked-lesson-block .registration-area button {
  font-weight: 600;
  margin-bottom: 10px;
}
@media screen and (max-width: 414px) {
  .lesson-video-overlay.before-play .lesson-video-locked-lesson-block .registration-area a,
  .lesson-video-overlay.before-play .lesson-video-locked-lesson-block .registration-area button {
    margin-bottom: 0;
  }
}
.lesson-video-overlay.before-play .lesson-video-locked-lesson-block .registration-area p {
  font-weight: 600;
}
.lesson-video-overlay.before-play-waiting {
  position: absolute;
  background-image: url("../images/before-play-image-pc.png?20161101");
  background-position: center center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.lesson-video-overlay.before-play-waiting.before-play-making-waiting {
  background-image: none;
}
.lesson-video-overlay.before-play-waiting .lesson-video-overlay-loading-spinner {
  position: absolute;
  width: 48px;
  height: 48px;
  top: 50%;
  left: 50%;
  margin: -24px 0 0 -24px;
}
.lesson-video-overlay.before-play-waiting .lesson-video-overlay-loading-spinner > i {
  color: #fff;
  font-size: 48px;
}
.lesson-video-overlay.before-play-waiting .lesson-video-overlay-loading-play-button {
  display: none;
  position: absolute;
  width: 72px;
  height: 72px;
  top: 50%;
  left: 50%;
  margin: -36px 0 0 -36px;
  cursor: pointer;
  -webkit-transition: -webkit-transform 0.2s ease 0s;
  transition: transform 0.2s ease 0s;
}
.lesson-video-overlay.before-play-waiting .lesson-video-overlay-loading-play-button:hover {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
.lesson-video-overlay.before-play-waiting .lesson-video-overlay-loading-play-button > img {
  width: 100%;
  height: 100%;
}
.sp-video-before-play {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}
.sp-video-before-play > img {
  width: 100%;
}
.lesson-video-overlay.after-play {
  display: none;
}
.lesson-video-overlay.after-play .video-overlay-inner {
  display: box;
  display: -webkit-box;
  display: flexbox;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  height: 100%;
}
.lesson-video-overlay.after-play .video-overlay-inner .close-button {
  position: absolute;
  top: 20px;
  right: 20px;
  color: #fff;
}
.lesson-video-overlay.after-play .video-overlay-inner .after-play-message {
  width: 100%;
  padding-bottom: 10px;
  margin: auto;
}
.lesson-video-overlay.after-play .video-overlay-inner .after-play-message .after-play-message-header {
  text-align: center;
  color: #fff;
  margin-bottom: 25px;
}
@media screen and (max-width: 1000px) {
  .lesson-video-overlay.after-play .video-overlay-inner .after-play-message .after-play-message-header {
    margin-bottom: 15px;
  }
}
@media screen and (max-width: 768px) {
  .lesson-video-overlay.after-play .video-overlay-inner .after-play-message .after-play-message-header {
    margin-bottom: 10px;
  }
}
@media screen and (max-width: 414px) {
  .lesson-video-overlay.after-play .video-overlay-inner .after-play-message .after-play-message-header {
    margin-bottom: 0;
  }
}
.lesson-video-overlay.after-play .video-overlay-inner .after-play-message .after-play-message-header h1 {
  font-size: 1.6rem;
}
@media screen and (max-width: 414px) {
  .lesson-video-overlay.after-play .video-overlay-inner .after-play-message .after-play-message-header h1 {
    font-size: 1.25rem;
  }
}
.lesson-video-overlay.after-play .video-overlay-inner .after-play-message .after-play-message-header p {
  font-size: 0.8rem;
}
@media screen and (max-width: 414px) {
  .lesson-video-overlay.after-play .video-overlay-inner .after-play-message .after-play-message-header p {
    display: none;
  }
}
.lesson-video-overlay.after-play .video-overlay-inner .after-play-message .similar-videos {
  margin: 0 auto;
  display: box;
  display: -webkit-box;
  display: flexbox;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: center;
  justify-content: center;
  max-width: 90%;
}
.lesson-video-overlay.after-play .video-overlay-inner .after-play-message .similar-videos .similar-video {
  width: 50%;
}
.lesson-video-overlay.after-play .video-overlay-inner .after-play-message .similar-videos .similar-video:first-of-type {
  margin-right: 10px;
}
.lesson-video-overlay.after-play .video-overlay-inner .after-play-message .similar-videos .similar-video > img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}
.lesson-video-overlay.after-play .video-overlay-inner .after-play-message .similar-videos .similar-video .similar-video-label {
  width: 100%;
  color: #fff;
  margin-top: 5px;
  text-align: center;
}
@media screen and (max-width: 1000px) {
  .lesson-video-overlay.after-play .video-overlay-inner .after-play-message .similar-videos .similar-video .similar-video-label {
    font-size: 0.8rem;
  }
}
.lesson-video-overlay.after-play .video-overlay-inner .after-play-message .staff-credit {
  position: absolute;
  bottom: 10px;
  right: 10px;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}
.after-play-smartphone {
  display: none;
}
.after-play-smartphone .sp-after-play-window {
  display: box;
  display: -webkit-box;
  display: flexbox;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  -webkit-box-align-items: center;
  -webkit-align-items: center;
  align-items: center;
  position: fixed;
  bottom: 15px;
  left: 15px;
  right: 15px;
  z-index: 100;
  background-color: rgba(51,51,51,0.9);
  padding: 15px;
  border-radius: 8px;
}
.after-play-smartphone .sp-after-play-window .after-play-window-scroll-icon {
  width: 24px;
  height: 24px;
  margin-right: 10px;
}
.after-play-smartphone .sp-after-play-window .after-play-window-description {
  color: #fff;
  font-size: 0.8rem;
}
.after-play-smartphone .sp-after-play-window .after-play-window-description > strong {
  display: block;
  font-size: 1rem;
  font-weight: 600;
}
@media screen and (max-width: 320px) {
  .after-play-smartphone .sp-after-play-window .after-play-window-description > strong {
    font-size: 0.8rem;
  }
}
.lesson-wrap-with-practice-pc .lesson-video-overlay.after-play .after-play-message .practice-image {
  margin: 0 auto;
  display: box;
  display: -webkit-box;
  display: flexbox;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: center;
  justify-content: center;
  max-width: 90%;
}
.lesson-wrap-with-practice-pc .lesson-video-overlay.after-play .after-play-message .practice-image .practice-image-scroll-link {
  width: 50%;
  position: relative;
  border: 2px solid #ff4a6d;
  border-radius: 4px;
}
.lesson-wrap-with-practice-pc .lesson-video-overlay.after-play .after-play-message .practice-image .practice-image-scroll-link:first-of-type {
  margin-right: 10px;
}
.lesson-wrap-with-practice-pc .lesson-video-overlay.after-play .after-play-message .practice-image .practice-image-scroll-link > img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}
.lesson-wrap-with-practice-pc .lesson-video-overlay.after-play .after-play-message .practice-image .practice-image-scroll-link .practice-image-scroll-link-description {
  position: absolute;
  width: 100%;
  height: auto;
  padding: 5px;
  bottom: 0;
  left: 0;
  background-color: rgba(51,51,51,0.7);
  color: #fff;
  text-align: center;
}
.lesson-wrap-with-practice-pc .lesson-video-overlay.after-play .after-play-message .show-again {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: rgba(51,51,51,0.5);
  border-radius: 4px;
  padding: 5px 10px;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}
.lesson-wrap-with-practice-pc .lesson-video-overlay.after-play .after-play-message .staff-credit {
  position: absolute;
  background: rgba(51,51,51,0.5);
  border-radius: 4px;
  padding: 5px 10px;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}
.lesson-video-switch {
  display: none;
}
.lesson-video-switch .lesson-video-switch-toggle {
  position: absolute;
  color: #fff;
  cursor: pointer;
  top: 10px;
  right: 10px;
  border-radius: 4px;
  padding: 5px 10px;
  background: rgba(51,51,51,0.9);
  box-shadow: 0 2px 4px rgba(51,51,51,0.5);
  font-weight: 600;
  text-align: center;
  opacity: 0.8;
}
.lesson-video-switch .lesson-video-switch-toggle:hover {
  text-decoration: none;
  opacity: 1;
}
.lesson-video-switch .lesson-video-switch-toggle > img {
  position: relative;
  bottom: 2px;
}
.lesson-video-switch .lesson-video-switch-panel {
  display: none;
  position: absolute;
  color: #fff;
  top: 50px;
  right: 10px;
  border-radius: 4px;
  padding: 10px;
  background: rgba(51,51,51,0.9);
  box-shadow: 0 2px 4px rgba(51,51,51,0.5);
  font-weight: 600;
  opacity: 0.8;
}
.lesson-video-switch .lesson-video-switch-panel h2 {
  font-weight: 600;
  font-size: 1rem;
  min-width: 80px;
  text-align: left;
}
.lesson-video-switch .lesson-video-switch-panel .lesson-video-switch-autoplay-container {
  display: box;
  display: -webkit-box;
  display: flexbox;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
}
.lesson-video-switch .lesson-video-switch-panel .lesson-video-switch-autoplay-container .lesson-video-switch-autoplay-toggle {
  width: 100%;
  text-align: right;
}
.lesson-video-switch .lesson-video-switch-panel .lesson-video-switch-autoplay-container .lesson-video-switch-autoplay-toggle > button {
  position: relative;
  width: 45px;
  height: 16px;
  background: #999;
  border-radius: 16px;
  vertical-align: middle;
  margin-bottom: 10px;
}
.lesson-video-switch .lesson-video-switch-panel .lesson-video-switch-autoplay-container .lesson-video-switch-autoplay-toggle > button::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  left: -2px;
  top: -2px;
  -webkit-transition: left 0.2s ease 0s;
  transition: left 0.2s ease 0s;
}
.lesson-video-switch .lesson-video-switch-panel .lesson-video-switch-autoplay-container .lesson-video-switch-autoplay-toggle.lesson-video-switch-autoplay-true > button {
  background: #13a7ff;
}
.lesson-video-switch .lesson-video-switch-panel .lesson-video-switch-autoplay-container .lesson-video-switch-autoplay-toggle.lesson-video-switch-autoplay-true > button::before {
  left: 27px;
}
.lesson-video-switch .lesson-video-switch-panel .lesson-video-switch-resolution-container {
  display: box;
  display: -webkit-box;
  display: flexbox;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
}
.lesson-video-switch .lesson-video-switch-panel .lesson-video-switch-resolution-container .lesson-video-switch-resolution-select {
  text-align: right;
}
.lesson-video-switch .lesson-video-switch-panel .lesson-video-switch-resolution-container .lesson-video-switch-resolution-select > a {
  display: block;
  margin-bottom: 5px;
  font-weight: 600;
  font-size: 1rem;
  color: #fff;
  text-decoration: underline;
}
.lesson-video-switch .lesson-video-switch-panel .lesson-video-switch-resolution-container .lesson-video-switch-resolution-select > a.lesson-video-switch-resolution-selected {
  font-weight: 400;
  text-decoration: none;
}
.lesson-video-switch .lesson-video-switch-panel .lesson-video-switch-resolution-container .lesson-video-switch-resolution-select > a.lesson-video-switch-resolution-selected::before {
  content: '';
  display: inline-block;
  margin-right: 5px;
  width: 16px;
  height: 16px;
  background-image: url("../images/icons/icon-check-white.svg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.video-js .vjs-audio-button,.video-js .vjs-big-play-button,.video-js .vjs-captions-button,.video-js .vjs-chapters-button,.video-js .vjs-control.vjs-close-button,.video-js .vjs-descriptions-button,.video-js .vjs-fullscreen-control,.video-js .vjs-mouse-display,.video-js .vjs-mute-control,.video-js .vjs-mute-control.vjs-vol-0,.video-js .vjs-mute-control.vjs-vol-1,.video-js .vjs-mute-control.vjs-vol-2,.video-js .vjs-play-control,.video-js .vjs-play-control.vjs-playing,.video-js .vjs-play-progress,.video-js .vjs-subtitles-button,.video-js .vjs-volume-level,.video-js .vjs-volume-menu-button,.video-js .vjs-volume-menu-button.vjs-vol-0,.video-js .vjs-volume-menu-button.vjs-vol-1,.video-js .vjs-volume-menu-button.vjs-vol-2,.video-js.vjs-fullscreen .vjs-fullscreen-control,.vjs-icon-audio,.vjs-icon-audio-description,.vjs-icon-cancel,.vjs-icon-captions,.vjs-icon-chapters,.vjs-icon-circle,.vjs-icon-circle-inner-circle,.vjs-icon-circle-outline,.vjs-icon-cog,.vjs-icon-facebook,.vjs-icon-fullscreen-enter,.vjs-icon-fullscreen-exit,.vjs-icon-gplus,.vjs-icon-hd,.vjs-icon-linkedin,.vjs-icon-pause,.vjs-icon-pinterest,.vjs-icon-play,.vjs-icon-play-circle,.vjs-icon-replay,.vjs-icon-spinner,.vjs-icon-square,.vjs-icon-subtitles,.vjs-icon-tumblr,.vjs-icon-twitter,.vjs-icon-volume-high,.vjs-icon-volume-low,.vjs-icon-volume-mid,.vjs-icon-volume-mute{font-family:VideoJS;font-weight:400;font-style:normal}.video-js,.vjs-no-js{color:#fff;background-color:#000}.video-js .vjs-big-play-button:before,.video-js .vjs-control,.video-js .vjs-control:before,.vjs-menu li,.vjs-no-js{text-align:center}.video-js .vjs-big-play-button:before,.video-js .vjs-control:before,.video-js .vjs-modal-dialog,.vjs-modal-dialog .vjs-modal-dialog-content{position:absolute;top:0;left:0;width:100%;height:100%}@font-face{font-family:VideoJS;src:url(font/VideoJS.eot?#iefix) format("eot")}@font-face{font-family:VideoJS;src:url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAA54AAoAAAAAFmgAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAAA9AAAAD4AAABWUZFeBWNtYXAAAAE0AAAAOgAAAUriMBC2Z2x5ZgAAAXAAAAouAAAPUFvx6AdoZWFkAAALoAAAACsAAAA2DIPpX2hoZWEAAAvMAAAAGAAAACQOogcgaG10eAAAC+QAAAAPAAAAfNkAAABsb2NhAAAL9AAAAEAAAABAMMg06m1heHAAAAw0AAAAHwAAACABMAB5bmFtZQAADFQAAAElAAACCtXH9aBwb3N0AAANfAAAAPwAAAGBZkSN43icY2BkZ2CcwMDKwMFSyPKMgYHhF4RmjmEIZzzHwMDEwMrMgBUEpLmmMDh8ZPwoxw7iLmSHCDOCCADvEAo+AAB4nGNgYGBmgGAZBkYGEHAB8hjBfBYGDSDNBqQZGZgYGD7K/f8PUvCREUTzM0DVAwEjG8OIBwCPdwbVAAB4nI1Xe1CU1xX/zv1eLItLln0JwrIfC7sJGET2hRJ2N1GUoBJE8AESQEEhmBHjaB7UuBMTO4GMaSu7aY3RNlOdRPNqO2pqRmuTaSZtR6JJILUZk00a/4imjpmiecB303O/XUgMJOPufvd+99xzzz33nN855y4HHH7EfrGfIxwHRiANvF/sH71I9BzHszmpW+rGOQOXxXE6YhI4PoMT8zkT4cDFuf1cwMrZJI5cglM0HKVv0MaUFDgIFfg9mJJCG+kbKn1JkqBOVaFOkuhLpARq8fu0Nnc9/zdvfY9PxXW4PdH0C6N+PCejhorxFjAqRjgFRXSINEARbBGsoxcFK7IJmr4OycFJnInL59zIXwxui80fkGRbEHyosMWaATJKUfCskmwJQsAWANkmnIGOhlf514h7U8HNIv3owoHB0WMt0Eb3sx0guLi5pq/8Ny1q6969fKR9X9GBV6dPv6dp04K99SOwtmyPl47ApRa6n4ZpP1yjr5fn7MmYP/vXLUJs715UguklHBaHOZHZmG1N9FAIW2mf0MqWCIdo/8RZ1yGfxKUldDcGIbFA7ICO+vqOMSPTh/ZrSqgHi/bB/O8E8Mnzp+M+acxfpsTShBwej26TiGxBn7m4eEIO+Rueu6Hj+IFBnh88cAEUEQ//nVLx5C7kf+yIR47QEe+eMlhz9SqsGbe3hh2R03NGzoY6O42Kz8l7fB6fAk6LYnTyFo/FYyT6GGyNx2Jx2sdH4rA1Fo/HyCXaFyOp8dhYBCfJb2NIn1ImE6CYNGmgSTb52DawJR6jfXEmDU4xyTEmpgHHOIStoxfjSGdkbsK2w2jbdMQG4sgAstEONgURYCwGHhEhhscioQaAhhCf7McifEQc0l6+mxj9nI+gmSdiQ0Zbm7gZnIO7GSMEXG6UDAVocxAV8GcEXCKg1a02RcTtwANWRGIAyElor6n/+ZU2yOB3+T77Hb1MLqhn4KHVnQBjJnqe9QZSon6Kc5DxAD2vMdPL/BXSmQGwspa67z9wLUjdi9TN7QC7lyyBr9rpt7uXVC1CMpyjKRoXnGPHTuiaPLsNdc2dbAFQLAooPkXEh33FodHl4XpC6sPCIa0ftUIhHSYXVSu5iME+DIXsbZJ51BeidCgajcai43jU9nVzoSn2dPqcFvSoxSzJzgRKAx47WMRxOrIj3Wf0+hndxhJTiOkSEqxar3b3RKM9hY64oxBA64ieURLvCfpkDb8siBdUJ1bgT+urJ5PGfewQrmm5R5+0HmfyIPySD7OYkT0WxRePah8oEiyjlxIP74thVoRTURpmL6QhGuWS+QDjdANXjIM8SQa/1w128ODx0Qp4aLMNg9+JL3joUn8AMxW+aLNiuKjarn4uyyTdXjOzZTsh21uwldUvJoYza+zELALfu3p1L8/3krtyZ0Ag058J3hxHghvbGZn0dHZy6Mim/7Blre4lpHd1c28yVqRViO153F2oIWoXCIKbL4Z0cM1iaQn9mI5KuV2SzEvWXJDMNtkANpMdQoDDhIdD4A/YrP6Aye9ysxyE+uOEAcTDorgvVZJjcua043PnZ/PmdDqcbibZlXOOT8uSo7Kof0YUn9GL+Jo17ficymxiTofC6znUso0DhAxs1Fo+kF+d36vLmgZ8mk5cdGv2mwYj5k3Dm9m3LhJ1aVRNm6HrTbLgYAoWXDhDd/u4PGy5CT+xGMdiaBovewUCF/1BiWNljI9MLn7jeScpg+WyH6mfU62eVDql7hsrmvx1ezp/YldE2LhjbkiDnAn8tGy/MW3IXRMYJduvq9HpmIcKuFt+JCtgdGEGKAcF6UacVwIYbVPGfw/+YuNBS4cx/CUHcnyfc+wRDMtTr72mMSBjT/yn/GKSdeDWQUCH6Xoqq5R10RE60gV6erUL0iCti16d0hZjxut4QI/rEpgSh6WjnJXdBXRg1GKCucGJPtFqM27aD1tOqqKonsQ2KsFSSmEpmvRlsR+TcD9OFwrqXxIclL4sJTnGMSuG8KpkZvKdeVIOKDyWSyPLV16/p1QMPbP8NihwUzr47bdnXtwtjdCvqqpO0H+pOvIl3Pzv46e5CT/tQjklXCXXym1AaWY7bzHLkuDMc7ldKCvgxzLn8wYkJLBhEDyK7MT8bTbwbkxbfp+3mKAGsmTBpabSIEECzMIcQlzOPAMKsxMs7uhsnxPLuofPDTc1hkuq6MX9j16YU7CqegcYHbmWYuvAP6tCS97tgWf7dlQvnl25YPavXLVZvrzQPeHCpZmzzEUVq/xzu5sChnSTPTW7oOYmh69z4zL/gk3b+O6hoa733uviP82vnFcbqWlc9tDmZa23LVzaV1yXURi+JX+28NeBuj3+O8IrQ080Vm1eWB4OKjPmrJu7c1udWynvKF6/vs479lSW9+5gZkn+dKfellNGDPllzeULustz+A0bPvhgw7lkvEUwn/N4Ty7U7nhGsEpFkOfy+kutbOh1JQxhVDJumoW11hnkPThznh6FFlhfT+ra1x9sF56kx5YuDzVY9PQYAYA7iblw4frQ4TPCk2MK/xGU3rlmze62trHz6lsko+v+So/do74PT8KVkpJfOErKcv8znrMGsHTNxoEkWy1mYgDB6XBbPaWsuiS6CryGaL6zCjaXBgvtkuyXBua1wOKnh+k7L9AvPnYWffxK18FcJbuosGf3/Jo7amY+CE1vppzY+UTrva0FXc1i55pKQ/YjVL187N5fCn1kW5uot/1hi+DiZ+5atnJR9E+prvydJ9ZZ5mwOpU5gM4KYysMBQ71UzPuMTl9QQOyUo5nwioeYCPjFklrbK6s6X+ypUZ6rum9+CZYzWRiBJfSP0xzzSmrg7f86g0DKVj/wwFzieD9rRfPGFbeKMl05pn5j9/rsQJJ2iEgRrpohlyBo3f4QK7Kl+EcAYZgAoNVmZWXK704YAa3FwBxgSGUOs5htvGRz4Sgj3yFkSJFBuv/sxu5yk998T8WDJzvv/2RX19HtTUW1S+wpKRKRjJ6zzz/1/OPdFdWGlAKbvzS4PHOtURikg9AGz0LbIB85S/cPOpoXvuue8/iV2H1vPTy3ddvOeZ37HGmO3OmSzVzR+NS53+84dHlFhXPLqtzSO+5ruHM2vXtBdxP87LOzKAD359j/INYIbyPabIi3Cq6Wa+SaGe78diIzu7qcblcAa6/fJRvNopXFJnO+U9KKM5bqH5LM0iQSVmpPCPDu7ZT4Aoubz3709EBTyrTDjyx8MQXgUH1nqm7TWng4TzE4i4AsKskBITXfSyC4Fkl5MxnJDiKSIDSJAsGvd1y+/eNDp2e+A+5d8HeiiunrTkT6TqWLIs+/QRoWr98s0qj8uuzLuS22Ytufg3rdTaHn1m46sfgGKHXt0MGnLaRHdnwN37tvHcWKo2V6lnPxL4UvUQcRdOzmZSQs8X5CH5OxXMXpkATuDz8Et0SH4uyCRR+TjmBDP1GvsVrWEGVzEj33YVQ9jAtIKpqsl/s/0xrocwAAeJxjYGRgYADig3cEzsTz23xl4GZnAIHLRucNkWl2BrA4BwMTiAIAF4IITwB4nGNgZGBgZwCChWASxGZkQAXyABOUANh4nGNnYGBgHyAMADa8ANoAAAAAAAAOAFAAZgCyAMYA5gEeAUgBdAGcAfICLgKOAroDCgOOA7AD6gQ4BHwEuAToBQwFogXoBjYGbAbaB3IHqHicY2BkYGCQZ8hlYGcAASYg5gJCBob/YD4DABbVAaoAeJxdkE1qg0AYhl8Tk9AIoVDaVSmzahcF87PMARLIMoFAl0ZHY1BHdBJIT9AT9AQ9RQ9Qeqy+yteNMzDzfM+88w0K4BY/cNAMB6N2bUaPPBLukybCLvleeAAPj8JD+hfhMV7hC3u4wxs7OO4NzQSZcI/8Ltwnfwi75E/hAR7wJTyk/xYeY49fYQ/PztM+jbTZ7LY6OWdBJdX/pqs6NYWa+zMxa13oKrA6Uoerqi/JwtpYxZXJ1coUVmeZUWVlTjq0/tHacjmdxuL90OR8O0UEDYMNdtiSEpz5XQGqzlm30kzUdAYFFOb8R7NOZk0q2lwAyz1i7oAr1xoXvrOgtYhZx8wY5KRV269JZ5yGpmzPTjQhvY9je6vEElPOuJP3mWKnP5M3V+YAAAB4nG2P2XLCMAxFfYFspGUp3Te+IB9lHJF4cOzUS2n/voaEGR6qB+lKo+WITdhga/a/bRnDBFPMkCBFhhwF5ihxg1sssMQKa9xhg3s84BFPeMYLXvGGd3zgE9tZr/hveXKVkFYoSnoeHJXfRoWOqi54mo9ameNFdrK+dLSyaVf7oJQTlkhXpD3Z5XXhR/rUfQVuKXO91Jps4cLOS6/I5YL3XhodRRsVWZe4NnZOhWnSAWgxhMoEr6SmzZieF43Mk7ZOBdeCVGrp9Eu+54J2xhySplfB5XHwQLXUmT9KH6+kPnQ7ZYuIEzNyfs1DLU1VU4SWZ6LkXGHsD1ZKbMw=) format("woff"),url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMlGRXgUAAAEoAAAAVmNtYXDiMBC2AAAB/AAAAUpnbHlmW/HoBwAAA4gAAA9QaGVhZAyD6V8AAADQAAAANmhoZWEOogcgAAAArAAAACRobXR42QAAAAAAAYAAAAB8bG9jYTDINOoAAANIAAAAQG1heHABMAB5AAABCAAAACBuYW1l1cf1oAAAEtgAAAIKcG9zdGZEjeMAABTkAAABgQABAAAHAAAAAKEHAAAAAAAHAAABAAAAAAAAAAAAAAAAAAAAHwABAAAAAQAAwdxheF8PPPUACwcAAAAAANMyzzEAAAAA0zLPMQAAAAAHAAcAAAAACAACAAAAAAAAAAEAAAAfAG0ABwAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQcAAZAABQAIBHEE5gAAAPoEcQTmAAADXABXAc4AAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA8QHxHgcAAAAAoQcAAAAAAAABAAAAAAAABwAAAAcAAAAHAAAABwAAAAcAAAAHAAAABwAAAAcAAAAHAAAABwAAAAcAAAAHAAAABwAAAAcAAAAHAAAABwAAAAcAAAAHAAAABwAAAAcAAAAHAAAABwAAAAcAAAAHAAAABwAAAAcAAAAHAAAABwAAAAcAAAAHAAAABwAAAAAAAAMAAAADAAAAHAABAAAAAABEAAMAAQAAABwABAAoAAAABgAEAAEAAgAA8R7//wAAAADxAf//AAAPAAABAAAAAAAAAAABBgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOAFAAZgCyAMYA5gEeAUgBdAGcAfICLgKOAroDCgOOA7AD6gQ4BHwEuAToBQwFogXoBjYGbAbaB3IHqAABAAAAAAWLBYsAAgAAAREBAlUDNgWL++oCCwAAAwAAAAAGawZrAAIADgAaAAAJAhMEAAMSAAUkABMCAAEmACc2ADcWABcGAALrAcD+QJX+w/5aCAgBpgE9AT0BpggI/lr+w/3+rgYGAVL9/QFSBgb+rgIwAVABUAGbCP5a/sP+w/5aCAgBpgE9AT0BpvrIBgFS/f0BUgYG/q79/f6uAAAAAgAAAAAFQAWLAAMABwAAASERKQERIREBwAEr/tUCVQErAXUEFvvqBBYAAAAEAAAAAAYgBiAABgATACQAJwAAAS4BJxUXNjcGBxc+ATUmACcVFhIBBwEhESEBEQEGBxU+ATcXNwEHFwTQAWVVuAO7AidxJSgF/t/lpc77t18BYf6fASsBdQE+TF1OijuZX/1gnJwDgGSeK6W4GBhqW3FGnFT0AWM4mjT+9AHrX/6f/kD+iwH2/sI7HZoSRDGYXwSWnJwAAAEAAAAABKsF1gAFAAABESEBEQECCwEqAXb+igRg/kD+iwSq/osAAAACAAAAAAVmBdYABgAMAAABLgEnET4BAREhAREBBWUBZVRUZfwRASsBdf6LA4Bkniv9piueAUT+QP6LBKr+iwAAAwAAAAAGIAYPAAUADAAaAAATESEBEQEFLgEnET4BAxUWEhcGAgcVNgA3JgDgASsBdf6LAsUBZVVVZbqlzgMDzqXlASEFBf7fBGD+QP6LBKr+i+Bkniv9piueAvOaNP70tbX+9DSaOAFi9fUBYgAAAAQAAAAABYsFiwAFAAsAEQAXAAABIxEhNSMDMzUzNSEBIxUhESMDFTMVMxECC5YBduCWluD+igOA4AF2luDglgLr/oqWAgrglvyAlgF2AqCW4AF2AAQAAAAABYsFiwAFAAsAEQAXAAABMxUzESETIxUhESMBMzUzNSETNSMRITUBdeCW/org4AF2lgHAluD+ipaWAXYCVeABdgHAlgF2++rglgHA4P6KlgAAAAACAAAAAAXWBdYADwATAAABIQ4BBxEeARchPgE3ES4BAyERIQVA/IA/VQEBVT8DgD9VAQFVP/yAA4AF1QFVP/yAP1UBAVU/A4A/VfvsA4AAAAYAAAAABmsGawAHAAwAEwAbACAAKAAACQEmJw4BBwElLgEnAQUhATYSNyYFAQYCBxYXIQUeARcBMwEWFz4BNwECvgFkTlSH8GEBEgOONemh/u4C5f3QAXpcaAEB/BP+3VxoAQEOAjD95DXpoQESeP7dTlSH8GH+7gPwAmgSAQFYUP4nd6X2Pv4nS/1zZAEBk01NAfhk/v+TTUhLpfY+Adn+CBIBAVhQAdkAAAAFAAAAAAZrBdYADwATABcAGwAfAAABIQ4BBxEeARchPgE3ES4BASEVIQEhNSEFITUhNSE1IQXV+1ZAVAICVEAEqkBUAgJU+xYBKv7WAur9FgLqAcD+1gEq/RYC6gXVAVU//IA/VQEBVT8DgD9V/ayV/tWVlZWWlQADAAAAAAYgBdYADwAnAD8AAAEhDgEHER4BFyE+ATcRLgEBIzUjFTM1MxUUBgcjLgEnET4BNzMeARUFIzUjFTM1MxUOAQcjLgE1ETQ2NzMeARcFi/vqP1QCAlQ/BBY/VAICVP1rcJWVcCog4CAqAQEqIOAgKgILcJWVcAEqIOAgKiog4CAqAQXVAVU//IA/VQEBVT8DgD9V/fcl4CVKICoBASogASogKgEBKiBKJeAlSiAqAQEqIAEqICoBASogAAAGAAAAAAYgBPYAAwAHAAsADwATABcAABMzNSMRMzUjETM1IwEhNSERITUhERUhNeCVlZWVlZUBKwQV++sEFfvrBBUDNZb+QJUBwJX+QJb+QJUCVZWVAAAAAQAAAAAGIAZsAC4AAAEiBgcBNjQnAR4BMz4BNy4BJw4BBxQXAS4BIw4BBx4BFzI2NwEGBx4BFz4BNy4BBUArSh797AcHAg8eTixffwICf19ffwIH/fEeTixffwICf18sTh4CFAUBA3tcXHsDA3sCTx8bATcZNhkBNB0gAn9fX38CAn9fGxn+zRwgAn9fX38CIBz+yhcaXHsCAntcXXsAAAIAAAAABlkGawBDAE8AAAE2NCc3PgEnAy4BDwEmLwEuASchDgEPAQYHJyYGBwMGFh8BBhQXBw4BFxMeAT8BFh8BHgEXIT4BPwE2NxcWNjcTNiYnBS4BJz4BNx4BFw4BBasFBZ4KBgeWBxkNujpEHAMUD/7WDxQCHEU5ug0aB5UHBQudBQWdCwUHlQcaDbo5RRwCFA8BKg8UAhxFOboNGgeVBwUL/ThvlAIClG9vlAIClAM3JEokewkaDQEDDAkFSy0cxg4RAQERDsYcLUsFCQz+/QwbCXskSiR7CRoN/v0MCQVLLRzGDhEBAREOxhwtSwUJDAEDDBsJQQKUb2+UAgKUb2+UAAAAAAEAAAAABmsGawALAAATEgAFJAATAgAlBACVCAGmAT0BPQGmCAj+Wv7D/sP+WgOA/sP+WggIAaYBPQE9AaYICP5aAAAAAgAAAAAGawZrAAsAFwAAAQQAAxIABSQAEwIAASYAJzYANxYAFwYAA4D+w/5aCAgBpgE9AT0BpggI/lr+w/3+rgYGAVL9/QFSBgb+rgZrCP5a/sP+w/5aCAgBpgE9AT0BpvrIBgFS/f0BUgYG/q79/f6uAAADAAAAAAZrBmsACwAXACMAAAEEAAMSAAUkABMCAAEmACc2ADcWABcGAAMOAQcuASc+ATceAQOA/sP+WggIAaYBPQE9AaYICP5a/sP9/q4GBgFS/f0BUgYG/q4dAn9fX38CAn9fX38Gawj+Wv7D/sP+WggIAaYBPQE9Aab6yAYBUv39AVIGBv6u/f3+rgJPX38CAn9fX38CAn8AAAAEAAAAAAYgBiAADwAbACUAKQAAASEOAQcRHgEXIT4BNxEuAQEjNSMVIxEzFTM1OwEhHgEXEQ4BByE3MzUjBYv76j9UAgJUPwQWP1QCAlT9a3CVcHCVcJYBKiAqAQEqIP7WcJWVBiACVD/76j9UAgJUPwQWP1T8gpWVAcC7uwEqIP7WICoBcOAAAgAAAAAGawZrAAsAFwAAAQQAAxIABSQAEwIAEwcJAScJATcJARcBA4D+w/5aCAgBpgE9AT0BpggI/lo4af70/vRpAQv+9WkBDAEMaf71BmsI/lr+w/7D/loICAGmAT0BPQGm/BFpAQv+9WkBDAEMaf71AQtp/vQAAQAAAAAF1ga2ABYAAAERCQERHgEXDgEHLgEnIxYAFzYANyYAA4D+iwF1vv0FBf2+vv0FlQYBUf7+AVEGBv6vBYsBKv6L/osBKgT9v779BQX9vv7+rwYGAVH+/gFRAAAAAQAAAAAFPwcAABQAAAERIyIGHQEhAyMRIREjETM1NDYzMgU/nVY8ASUn/v7O///QrZMG9P74SEi9/tj9CQL3ASjaus0AAAAABAAAAAAGjgcAADAARQBgAGwAAAEUHgMVFAcGBCMiJicmNTQ2NzYlLgE1NDcGIyImNTQ2Nz4BMyEHIx4BFRQOAycyNjc2NTQuAiMiBgcGFRQeAxMyPgI1NC4BLwEmLwImIyIOAxUUHgIBMxUjFSM1IzUzNTMDH0BbWkAwSP7qn4TlOSVZSoMBESAfFS4WlMtIP03TcAGiioNKTDFFRjGSJlAaNSI/akAqURkvFCs9WTY6a1s3Dg8THgocJU4QIDVob1M2RnF9A2vV1WnU1GkD5CRFQ1CATlpTenNTYDxHUYouUhIqQCkkMQTBlFKaNkJAWD+MWkhzRztAPiEbOWY6hn1SJyE7ZS5nZ1I0/JcaNF4+GTAkGCMLFx04Ag4kOF07Rms7HQNsbNvbbNkAAwAAAAAGgAZsAAMADgAqAAABESERARYGKwEiJjQ2MhYBESERNCYjIgYHBhURIRIQLwEhFSM+AzMyFgHd/rYBXwFnVAJSZGemZASP/rdRVj9VFQv+twIBAQFJAhQqR2c/q9AEj/whA98BMkliYpNhYfzd/cgCEml3RTMeM/3XAY8B8DAwkCAwOB/jAAABAAAAAAaUBgAAMQAAAQYHFhUUAg4BBCMgJxYzMjcuAScWMzI3LgE9ARYXLgE1NDcWBBcmNTQ2MzIXNjcGBzYGlENfAUyb1v7SrP7x4SMr4bBpph8hHCsqcJNETkJOLHkBW8YIvYaMYG1gJWldBWhiRQ4cgv797rdtkQSKAn1hBQsXsXUEJgMsjlNYS5WzCiYkhr1mFTlzPwoAAAABAAAAAAWABwAAIgAAARcOAQcGLgM1ESM1PgQ3PgE7AREhFSERFB4CNzYFMFAXsFlorXBOIahIckQwFAUBBwT0AU3+sg0gQzBOAc/tIz4BAjhceHg6AiDXGlddb1ctBQf+WPz9+h40NR4BAgABAAAAAAaABoAASgAAARQCBCMiJzY/AR4BMzI+ATU0LgEjIg4DFRQWFxY/ATY3NicmNTQ2MzIWFRQGIyImNz4CNTQmIyIGFRQXAwYXJgI1NBIkIAQSBoDO/p/Rb2s7EzYUaj15vmh34o5ptn9bK1BNHggIBgIGETPRqZepiWs9Sg4IJRc2Mj5WGWMRBM7+zgFhAaIBYc4DgNH+n84gXUfTJzmJ8JZyyH46YH2GQ2ieIAwgHxgGFxQ9WpfZpIOq7lc9I3VZHzJCclVJMf5eRmtbAXzp0QFhzs7+nwAABwAAAAAHAATPAA4AFwAqAD0AUABaAF0AAAERNh4CBw4BBwYmIycmNxY2NzYmBxEUBRY2Nz4BNy4BJyMGHwEeARcOARcWNjc+ATcuAScjBh8BHgEXFAYXFjY3PgE3LgEnIwYfAR4BFw4BBTM/ARUzESMGAyUVJwMchM2UWwgNq4JHrQgBAapUaAoJcWMBfiIhDiMrAQJLMB0BBAokNAIBPmMiIQ4iLAECSzAeAQUKJDQBP2MiIQ4iLAECSzAeAQUKJDQBAT75g+5B4arNLNIBJ44ByQL9BQ9mvYCKwA8FBQMDwwJVTGdzBf6VB8IHNR08lld9uT4LCRA/qGNxvUwHNR08lld9uT4LCRA/qGNxvUwHNR08lld9uT4LCRA/qGNxvVJkAWUDDEf+tYP5AQAAAAEAAAAABiAGtgAbAAABBAADER4BFzMRITU2ADcWABcVIREzPgE3EQIAA4D+4v6FBwJ/X+D+1QYBJ97eAScG/tXgX38CB/6FBrUH/oX+4v32X38CAlWV3gEnBgb+2d6V/asCf18CCgEeAXsAAAAAEADGAAEAAAAAAAEABwAAAAEAAAAAAAIABwAHAAEAAAAAAAMABwAOAAEAAAAAAAQABwAVAAEAAAAAAAUACwAcAAEAAAAAAAYABwAnAAEAAAAAAAoAKwAuAAEAAAAAAAsAEwBZAAMAAQQJAAEADgBsAAMAAQQJAAIADgB6AAMAAQQJAAMADgCIAAMAAQQJAAQADgCWAAMAAQQJAAUAFgCkAAMAAQQJAAYADgC6AAMAAQQJAAoAVgDIAAMAAQQJAAsAJgEeVmlkZW9KU1JlZ3VsYXJWaWRlb0pTVmlkZW9KU1ZlcnNpb24gMS4wVmlkZW9KU0dlbmVyYXRlZCBieSBzdmcydHRmIGZyb20gRm9udGVsbG8gcHJvamVjdC5odHRwOi8vZm9udGVsbG8uY29tAFYAaQBkAGUAbwBKAFMAUgBlAGcAdQBsAGEAcgBWAGkAZABlAG8ASgBTAFYAaQBkAGUAbwBKAFMAVgBlAHIAcwBpAG8AbgAgADEALgAwAFYAaQBkAGUAbwBKAFMARwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABzAHYAZwAyAHQAdABmACAAZgByAG8AbQAgAEYAbwBuAHQAZQBsAGwAbwAgAHAAcgBvAGoAZQBjAHQALgBoAHQAdABwADoALwAvAGYAbwBuAHQAZQBsAGwAbwAuAGMAbwBtAAAAAgAAAAAAAAARAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAfAAABAgEDAQQBBQEGAQcBCAEJAQoBCwEMAQ0BDgEPARABEQESARMBFAEVARYBFwEYARkBGgEbARwBHQEeAR8EcGxheQtwbGF5LWNpcmNsZQVwYXVzZQt2b2x1bWUtbXV0ZQp2b2x1bWUtbG93CnZvbHVtZS1taWQLdm9sdW1lLWhpZ2gQZnVsbHNjcmVlbi1lbnRlcg9mdWxsc2NyZWVuLWV4aXQGc3F1YXJlB3NwaW5uZXIJc3VidGl0bGVzCGNhcHRpb25zCGNoYXB0ZXJzBXNoYXJlA2NvZwZjaXJjbGUOY2lyY2xlLW91dGxpbmUTY2lyY2xlLWlubmVyLWNpcmNsZQJoZAZjYW5jZWwGcmVwbGF5CGZhY2Vib29rBWdwbHVzCGxpbmtlZGluB3R3aXR0ZXIGdHVtYmxyCXBpbnRlcmVzdBFhdWRpby1kZXNjcmlwdGlvbgVhdWRpbwAAAAAA) format("truetype");font-weight:400;font-style:normal}.video-js .vjs-big-play-button:before,.video-js .vjs-play-control:before,.vjs-icon-play:before{content:"\f101"}.vjs-icon-play-circle:before{content:"\f102"}.video-js .vjs-play-control.vjs-playing:before,.vjs-icon-pause:before{content:"\f103"}.video-js .vjs-mute-control.vjs-vol-0:before,.video-js .vjs-volume-menu-button.vjs-vol-0:before,.vjs-icon-volume-mute:before{content:"\f104"}.video-js .vjs-mute-control.vjs-vol-1:before,.video-js .vjs-volume-menu-button.vjs-vol-1:before,.vjs-icon-volume-low:before{content:"\f105"}.video-js .vjs-mute-control.vjs-vol-2:before,.video-js .vjs-volume-menu-button.vjs-vol-2:before,.vjs-icon-volume-mid:before{content:"\f106"}.video-js .vjs-mute-control:before,.video-js .vjs-volume-menu-button:before,.vjs-icon-volume-high:before{content:"\f107"}.video-js .vjs-fullscreen-control:before,.vjs-icon-fullscreen-enter:before{content:"\f108"}.video-js.vjs-fullscreen .vjs-fullscreen-control:before,.vjs-icon-fullscreen-exit:before{content:"\f109"}.vjs-icon-square:before{content:"\f10a"}.vjs-icon-spinner:before{content:"\f10b"}.video-js .vjs-subtitles-button:before,.vjs-icon-subtitles:before{content:"\f10c"}.video-js .vjs-captions-button:before,.vjs-icon-captions:before{content:"\f10d"}.video-js .vjs-chapters-button:before,.vjs-icon-chapters:before{content:"\f10e"}.vjs-icon-share{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-share:before{content:"\f10f"}.vjs-icon-cog:before{content:"\f110"}.video-js .vjs-mouse-display:before,.video-js .vjs-play-progress:before,.video-js .vjs-volume-level:before,.vjs-icon-circle:before{content:"\f111"}.vjs-icon-circle-outline:before{content:"\f112"}.vjs-icon-circle-inner-circle:before{content:"\f113"}.vjs-icon-hd:before{content:"\f114"}.video-js .vjs-control.vjs-close-button:before,.vjs-icon-cancel:before{content:"\f115"}.vjs-icon-replay:before{content:"\f116"}.vjs-icon-facebook:before{content:"\f117"}.vjs-icon-gplus:before{content:"\f118"}.vjs-icon-linkedin:before{content:"\f119"}.vjs-icon-twitter:before{content:"\f11a"}.vjs-icon-tumblr:before{content:"\f11b"}.vjs-icon-pinterest:before{content:"\f11c"}.video-js .vjs-descriptions-button:before,.vjs-icon-audio-description:before{content:"\f11d"}.video-js .vjs-audio-button:before,.vjs-icon-audio:before{content:"\f11e"}.video-js{display:block;vertical-align:top;box-sizing:border-box;position:relative;padding:0;font-size:10px;line-height:1;font-weight:400;font-style:normal;font-family:Arial,Helvetica,sans-serif;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.video-js:-moz-full-screen{position:absolute}.video-js:-webkit-full-screen{width:100%!important;height:100%!important}.video-js .vjs-tech,.video-js.vjs-fill{width:100%;height:100%}.video-js *,.video-js :after,.video-js :before{box-sizing:inherit}.video-js ul{font-family:inherit;font-size:inherit;line-height:inherit;list-style-position:outside;margin:0}.vjs-error .vjs-error-display:before,.vjs-menu .vjs-menu-content,.vjs-no-js{font-family:Arial,Helvetica,sans-serif}.video-js.vjs-16-9,.video-js.vjs-4-3,.video-js.vjs-fluid{width:100%;max-width:100%;height:0}.video-js.vjs-16-9{padding-top:56.25%}.video-js.vjs-4-3{padding-top:75%}.video-js .vjs-tech{position:absolute;top:0;left:0}body.vjs-full-window{padding:0;margin:0;height:100%;overflow-y:auto}.vjs-full-window .video-js.vjs-fullscreen{position:fixed;overflow:hidden;z-index:1000;left:0;top:0;bottom:0;right:0}.video-js.vjs-fullscreen{width:100%!important;height:100%!important;padding-top:0!important}.video-js.vjs-fullscreen.vjs-user-inactive{cursor:none}.vjs-hidden{display:none!important}.vjs-disabled{opacity:.5;cursor:default}.video-js .vjs-offscreen{height:1px;left:-9999px;position:absolute;top:0;width:1px}.vjs-lock-showing{display:block!important;opacity:1;visibility:visible}.vjs-no-js{padding:20px;font-size:18px;width:300px;height:150px;margin:0 auto}.vjs-no-js a,.vjs-no-js a:visited{color:#66A8CC}.video-js .vjs-big-play-button{font-size:3em;line-height:1.5em;height:1.5em;width:3em;display:block;position:absolute;top:10px;left:10px;padding:0;cursor:pointer;opacity:1;border:.06666em solid #fff;background-color:#2B333F;background-color:rgba(43,51,63,.7);-webkit-border-radius:.3em;-moz-border-radius:.3em;border-radius:.3em;-webkit-transition:all .4s;-moz-transition:all .4s;-o-transition:all .4s;transition:all .4s}.vjs-big-play-centered .vjs-big-play-button{top:50%;left:50%;margin-top:-.75em;margin-left:-1.5em}.video-js .vjs-big-play-button:focus,.video-js:hover .vjs-big-play-button{outline:0;border-color:#fff;background-color:#73859f;background-color:rgba(115,133,159,.5);-webkit-transition:all 0s;-moz-transition:all 0s;-o-transition:all 0s;transition:all 0s}.vjs-controls-disabled .vjs-big-play-button,.vjs-error .vjs-big-play-button,.vjs-has-started .vjs-big-play-button,.vjs-using-native-controls .vjs-big-play-button{display:none}.video-js button{background:0 0;border:none;color:inherit;display:inline-block;overflow:visible;font-size:inherit;line-height:inherit;text-transform:none;text-decoration:none;transition:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.video-js .vjs-control.vjs-close-button{cursor:pointer;height:3em;position:absolute;right:0;top:.5em;z-index:2}.vjs-menu-button{cursor:pointer}.vjs-menu-button.vjs-disabled{cursor:default}.vjs-workinghover .vjs-menu-button.vjs-disabled:hover .vjs-menu{display:none}.vjs-menu .vjs-menu-content{display:block;padding:0;margin:0;overflow:auto}.vjs-scrubbing .vjs-menu-button:hover .vjs-menu{display:none}.vjs-menu li{list-style:none;margin:0;padding:.2em 0;line-height:1.4em;font-size:1.2em;text-transform:lowercase}.vjs-menu li.vjs-menu-item:focus,.vjs-menu li.vjs-menu-item:hover{outline:0;background-color:#73859f;background-color:rgba(115,133,159,.5)}.vjs-menu li.vjs-selected,.vjs-menu li.vjs-selected:focus,.vjs-menu li.vjs-selected:hover{background-color:#fff;color:#2B333F}.vjs-menu li.vjs-menu-title{text-align:center;text-transform:uppercase;font-size:1em;line-height:2em;padding:0;margin:0 0 .3em;font-weight:700;cursor:default}.vjs-menu-button-popup .vjs-menu{display:none;position:absolute;bottom:0;width:10em;left:-3em;height:0;margin-bottom:1.5em;border-top-color:rgba(43,51,63,.7)}.vjs-menu-button-popup .vjs-menu .vjs-menu-content{background-color:#2B333F;background-color:rgba(43,51,63,.7);position:absolute;width:100%;bottom:1.5em;max-height:15em}.vjs-menu-button-popup .vjs-menu.vjs-lock-showing,.vjs-workinghover .vjs-menu-button-popup:hover .vjs-menu{display:block}.video-js .vjs-menu-button-inline{-webkit-transition:all .4s;-moz-transition:all .4s;-o-transition:all .4s;transition:all .4s;overflow:hidden}.video-js .vjs-menu-button-inline:before{width:2.222222222em}.video-js .vjs-menu-button-inline.vjs-slider-active,.video-js .vjs-menu-button-inline:focus,.video-js .vjs-menu-button-inline:hover,.video-js.vjs-no-flex .vjs-menu-button-inline{width:12em}.video-js .vjs-menu-button-inline.vjs-slider-active{-webkit-transition:none;-moz-transition:none;-o-transition:none;transition:none}.vjs-menu-button-inline .vjs-menu{opacity:0;height:100%;width:auto;position:absolute;left:4em;top:0;padding:0;margin:0;-webkit-transition:all .4s;-moz-transition:all .4s;-o-transition:all .4s;transition:all .4s}.vjs-menu-button-inline.vjs-slider-active .vjs-menu,.vjs-menu-button-inline:focus .vjs-menu,.vjs-menu-button-inline:hover .vjs-menu{display:block;opacity:1}.vjs-no-flex .vjs-menu-button-inline .vjs-menu{display:block;opacity:1;position:relative;width:auto}.vjs-no-flex .vjs-menu-button-inline.vjs-slider-active .vjs-menu,.vjs-no-flex .vjs-menu-button-inline:focus .vjs-menu,.vjs-no-flex .vjs-menu-button-inline:hover .vjs-menu{width:auto}.vjs-menu-button-inline .vjs-menu-content{width:auto;height:100%;margin:0;overflow:hidden}.video-js .vjs-control-bar{display:none;width:100%;position:absolute;bottom:0;left:0;right:0;height:3em;background-color:#2B333F;background-color:rgba(43,51,63,.7)}.vjs-has-started .vjs-control-bar{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;visibility:visible;opacity:1;-webkit-transition:visibility .1s,opacity .1s;-moz-transition:visibility .1s,opacity .1s;-o-transition:visibility .1s,opacity .1s;transition:visibility .1s,opacity .1s}.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar{visibility:visible;opacity:0;-webkit-transition:visibility 1s,opacity 1s;-moz-transition:visibility 1s,opacity 1s;-o-transition:visibility 1s,opacity 1s;transition:visibility 1s,opacity 1s}.vjs-controls-disabled .vjs-control-bar,.vjs-error .vjs-control-bar,.vjs-using-native-controls .vjs-control-bar{display:none!important}.vjs-audio.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar{opacity:1;visibility:visible}.vjs-has-started.vjs-no-flex .vjs-control-bar{display:table}.video-js .vjs-control{outline:0;position:relative;margin:0;padding:0;height:100%;width:4em;-webkit-box-flex:none;-moz-box-flex:none;-webkit-flex:none;-ms-flex:none;flex:none}.video-js .vjs-control:before{font-size:1.8em;line-height:1.67}.video-js .vjs-control:focus,.video-js .vjs-control:focus:before,.video-js .vjs-control:hover:before{text-shadow:0 0 1em #fff}.video-js .vjs-control-text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.vjs-no-flex .vjs-control{display:table-cell;vertical-align:middle}.video-js .vjs-custom-control-spacer{display:none}.video-js .vjs-progress-control{-webkit-box-flex:auto;-moz-box-flex:auto;-webkit-flex:auto;-ms-flex:auto;flex:auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;min-width:4em}.vjs-live .vjs-progress-control{display:none}.video-js .vjs-progress-holder{-webkit-box-flex:auto;-moz-box-flex:auto;-webkit-flex:auto;-ms-flex:auto;flex:auto;-webkit-transition:all .2s;-moz-transition:all .2s;-o-transition:all .2s;transition:all .2s;height:.3em}.video-js .vjs-progress-control:hover .vjs-progress-holder{font-size:1.666666666666666666em}.video-js .vjs-progress-control:hover .vjs-mouse-display:after,.video-js .vjs-progress-control:hover .vjs-play-progress:after,.video-js .vjs-progress-control:hover .vjs-time-tooltip{font-family:Arial,Helvetica,sans-serif;visibility:visible;font-size:.6em}.video-js .vjs-progress-holder .vjs-load-progress,.video-js .vjs-progress-holder .vjs-load-progress div,.video-js .vjs-progress-holder .vjs-play-progress,.video-js .vjs-progress-holder .vjs-tooltip-progress-bar{position:absolute;display:block;height:.3em;margin:0;padding:0;width:0;left:0;top:0}.video-js .vjs-mouse-display:before,.video-js .vjs-progress-control .vjs-keep-tooltips-inside:after{display:none}.video-js .vjs-play-progress{background-color:#fff}.video-js .vjs-play-progress:before{position:absolute;top:-.333333333333333em;right:-.5em;font-size:.9em}.video-js .vjs-mouse-display:after,.video-js .vjs-play-progress:after,.video-js .vjs-time-tooltip{visibility:hidden;pointer-events:none;position:absolute;top:-3.4em;right:-1.9em;font-size:.9em;color:#000;content:attr(data-current-time);padding:6px 8px 8px;background-color:#fff;background-color:rgba(255,255,255,.8);-webkit-border-radius:.3em;-moz-border-radius:.3em;border-radius:.3em}.video-js .vjs-play-progress:after,.video-js .vjs-play-progress:before,.video-js .vjs-time-tooltip{z-index:1}.video-js .vjs-load-progress{background:#bfc7d3;background:rgba(115,133,159,.5)}.video-js .vjs-load-progress div{background:#fff;background:rgba(115,133,159,.75)}.video-js.vjs-no-flex .vjs-progress-control{width:auto}.video-js .vjs-time-tooltip{display:inline-block;height:2.4em;position:relative;float:right;right:-1.9em}.vjs-tooltip-progress-bar{visibility:hidden}.video-js .vjs-progress-control .vjs-mouse-display{display:none;position:absolute;width:1px;height:100%;background-color:#000;z-index:1}.vjs-no-flex .vjs-progress-control .vjs-mouse-display{z-index:0}.video-js .vjs-progress-control:hover .vjs-mouse-display{display:block}.video-js.vjs-user-inactive .vjs-progress-control .vjs-mouse-display,.video-js.vjs-user-inactive .vjs-progress-control .vjs-mouse-display:after{visibility:hidden;opacity:0;-webkit-transition:visibility 1s,opacity 1s;-moz-transition:visibility 1s,opacity 1s;-o-transition:visibility 1s,opacity 1s;transition:visibility 1s,opacity 1s}.video-js.vjs-user-inactive.vjs-no-flex .vjs-progress-control .vjs-mouse-display,.video-js.vjs-user-inactive.vjs-no-flex .vjs-progress-control .vjs-mouse-display:after{display:none}.video-js .vjs-progress-control .vjs-mouse-display:after,.vjs-mouse-display .vjs-time-tooltip{color:#fff;background-color:#000;background-color:rgba(0,0,0,.8)}.video-js .vjs-slider{outline:0;position:relative;cursor:pointer;padding:0;margin:0 .45em;background-color:#73859f;background-color:rgba(115,133,159,.5)}.video-js .vjs-slider:focus{text-shadow:0 0 1em #fff;-webkit-box-shadow:0 0 1em #fff;-moz-box-shadow:0 0 1em #fff;box-shadow:0 0 1em #fff}.video-js .vjs-mute-control,.video-js .vjs-volume-menu-button{cursor:pointer;-webkit-box-flex:none;-moz-box-flex:none;-webkit-flex:none;-ms-flex:none;flex:none}.video-js .vjs-volume-control{width:5em;-webkit-box-flex:none;-moz-box-flex:none;-webkit-flex:none;-ms-flex:none;flex:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.video-js .vjs-volume-bar{margin:1.35em .45em}.vjs-volume-bar.vjs-slider-horizontal{width:5em;height:.3em}.vjs-volume-bar.vjs-slider-vertical{width:.3em;height:5em;margin:1.35em auto}.video-js .vjs-volume-level{position:absolute;bottom:0;left:0;background-color:#fff}.video-js .vjs-volume-level:before{position:absolute;font-size:.9em}.vjs-slider-vertical .vjs-volume-level{width:.3em}.vjs-slider-vertical .vjs-volume-level:before{top:-.5em;left:-.3em}.vjs-slider-horizontal .vjs-volume-level{height:.3em}.vjs-slider-horizontal .vjs-volume-level:before{top:-.3em;right:-.5em}.vjs-volume-bar.vjs-slider-vertical .vjs-volume-level{height:100%}.vjs-volume-bar.vjs-slider-horizontal .vjs-volume-level{width:100%}.vjs-menu-button-popup.vjs-volume-menu-button .vjs-menu{display:block;width:0;height:0;border-top-color:transparent}.vjs-menu-button-popup.vjs-volume-menu-button-vertical .vjs-menu{left:.5em;height:8em}.vjs-menu-button-popup.vjs-volume-menu-button-horizontal .vjs-menu{left:-2em}.vjs-menu-button-popup.vjs-volume-menu-button .vjs-menu-content{height:0;width:0;overflow-x:hidden;overflow-y:hidden}.vjs-volume-menu-button-vertical .vjs-lock-showing .vjs-menu-content,.vjs-volume-menu-button-vertical.vjs-slider-active .vjs-menu-content,.vjs-volume-menu-button-vertical:focus .vjs-menu-content,.vjs-volume-menu-button-vertical:hover .vjs-menu-content{height:8em;width:2.9em}.vjs-volume-menu-button-horizontal .vjs-lock-showing .vjs-menu-content,.vjs-volume-menu-button-horizontal .vjs-slider-active .vjs-menu-content,.vjs-volume-menu-button-horizontal:focus .vjs-menu-content,.vjs-volume-menu-button-horizontal:hover .vjs-menu-content{height:2.9em;width:8em}.vjs-volume-menu-button.vjs-menu-button-inline .vjs-menu-content{background-color:transparent!important}.vjs-poster{display:inline-block;vertical-align:middle;background-repeat:no-repeat;background-position:50% 50%;background-size:contain;background-color:#000;cursor:pointer;margin:0;padding:0;position:absolute;top:0;right:0;bottom:0;left:0;height:100%}.vjs-poster img{display:block;vertical-align:middle;margin:0 auto;max-height:100%;padding:0;width:100%}.vjs-has-started .vjs-poster{display:none}.vjs-audio.vjs-has-started .vjs-poster{display:block}.vjs-controls-disabled .vjs-poster,.vjs-using-native-controls .vjs-poster{display:none}.video-js .vjs-live-control{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:flex-start;-webkit-align-items:flex-start;-ms-flex-align:flex-start;align-items:flex-start;-webkit-box-flex:auto;-moz-box-flex:auto;-webkit-flex:auto;-ms-flex:auto;flex:auto;font-size:1em;line-height:3em}.vjs-no-flex .vjs-live-control{display:table-cell;width:auto;text-align:left}.video-js .vjs-current-time,.video-js .vjs-duration,.vjs-live .vjs-time-control,.vjs-live .vjs-time-divider,.vjs-no-flex .vjs-current-time,.vjs-no-flex .vjs-duration{display:none}.video-js .vjs-time-control{-webkit-box-flex:none;-moz-box-flex:none;-webkit-flex:none;-ms-flex:none;flex:none;font-size:1em;line-height:3em;min-width:2em;width:auto;padding-left:1em;padding-right:1em}.vjs-time-divider{display:none;line-height:3em}.video-js .vjs-play-control{cursor:pointer;-webkit-box-flex:none;-moz-box-flex:none;-webkit-flex:none;-ms-flex:none;flex:none}.vjs-text-track-display{position:absolute;bottom:3em;left:0;right:0;top:0;pointer-events:none}.video-js.vjs-user-inactive.vjs-playing .vjs-text-track-display{bottom:1em}.video-js .vjs-text-track{font-size:1.4em;text-align:center;margin-bottom:.1em;background-color:#000;background-color:rgba(0,0,0,.5)}.vjs-subtitles{color:#fff}.vjs-captions{color:#fc6}.vjs-tt-cue{display:block}video::-webkit-media-text-track-display{-moz-transform:translateY(-3em);-ms-transform:translateY(-3em);-o-transform:translateY(-3em);-webkit-transform:translateY(-3em);transform:translateY(-3em)}.video-js.vjs-user-inactive.vjs-playing video::-webkit-media-text-track-display{-moz-transform:translateY(-1.5em);-ms-transform:translateY(-1.5em);-o-transform:translateY(-1.5em);-webkit-transform:translateY(-1.5em);transform:translateY(-1.5em)}.video-js .vjs-fullscreen-control{cursor:pointer;-webkit-box-flex:none;-moz-box-flex:none;-webkit-flex:none;-ms-flex:none;flex:none}.vjs-playback-rate .vjs-playback-rate-value{font-size:1.5em;line-height:2;position:absolute;top:0;left:0;width:100%;height:100%;text-align:center}.vjs-playback-rate .vjs-menu{width:4em;left:0}.vjs-error .vjs-error-display .vjs-modal-dialog-content{font-size:1.4em;text-align:center}.vjs-error .vjs-error-display:before{color:#fff;content:'X';font-size:4em;left:0;line-height:1;margin-top:-.5em;position:absolute;text-shadow:.05em .05em .1em #000;text-align:center;top:50%;vertical-align:middle;width:100%}.vjs-loading-spinner{display:none;position:absolute;top:50%;left:50%;margin:-25px 0 0 -25px;opacity:.85;text-align:left;border:6px solid rgba(43,51,63,.7);box-sizing:border-box;background-clip:padding-box;width:50px;height:50px;border-radius:25px}.vjs-seeking .vjs-loading-spinner,.vjs-waiting .vjs-loading-spinner{display:block}.vjs-loading-spinner:after,.vjs-loading-spinner:before{content:"";position:absolute;margin:-6px;box-sizing:inherit;width:inherit;height:inherit;border-radius:inherit;opacity:1;border:inherit;border-color:#fff transparent transparent}.vjs-seeking .vjs-loading-spinner:after,.vjs-seeking .vjs-loading-spinner:before,.vjs-waiting .vjs-loading-spinner:after,.vjs-waiting .vjs-loading-spinner:before{-webkit-animation:vjs-spinner-spin 1.1s cubic-bezier(.6,.2,0,.8) infinite,vjs-spinner-fade 1.1s linear infinite;animation:vjs-spinner-spin 1.1s cubic-bezier(.6,.2,0,.8) infinite,vjs-spinner-fade 1.1s linear infinite}.vjs-seeking .vjs-loading-spinner:before,.vjs-waiting .vjs-loading-spinner:before{border-top-color:#fff}.vjs-seeking .vjs-loading-spinner:after,.vjs-waiting .vjs-loading-spinner:after{border-top-color:#fff;-webkit-animation-delay:.44s;animation-delay:.44s}@keyframes vjs-spinner-spin{100%{transform:rotate(360deg)}}@-webkit-keyframes vjs-spinner-spin{100%{-webkit-transform:rotate(360deg)}}@keyframes vjs-spinner-fade{0%,100%,20%,60%{border-top-color:#73859f}35%{border-top-color:#fff}}@-webkit-keyframes vjs-spinner-fade{0%,100%,20%,60%{border-top-color:#73859f}35%{border-top-color:#fff}}.vjs-chapters-button .vjs-menu ul{width:24em}.video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-custom-control-spacer{-webkit-box-flex:auto;-moz-box-flex:auto;-webkit-flex:auto;-ms-flex:auto;flex:auto}.video-js.vjs-layout-tiny:not(.vjs-fullscreen).vjs-no-flex .vjs-custom-control-spacer{width:auto}.video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-captions-button,.video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-chapters-button,.video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-current-time,.video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-descriptions-button,.video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-duration,.video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-mute-control,.video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-playback-rate,.video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-remaining-time,.video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-subtitles-button .vjs-audio-button,.video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-time-divider,.video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-volume-control,.video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-audio-button,.video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-captions-button,.video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-chapters-button,.video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-current-time,.video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-descriptions-button,.video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-duration,.video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-mute-control,.video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-playback-rate,.video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-progress-control,.video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-remaining-time,.video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-subtitles-button,.video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-time-divider,.video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-volume-control,.video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-volume-menu-button,.video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-audio-button,.video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-captions-button,.video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-chapters-button,.video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-current-time,.video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-descriptions-button,.video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-duration,.video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-mute-control,.video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-playback-rate,.video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-remaining-time,.video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-subtitles-button,.video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-time-divider,.video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-volume-control,.video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-volume-menu-button{display:none}.vjs-caption-settings{position:relative;top:1em;background-color:#2B333F;background-color:rgba(43,51,63,.75);color:#fff;margin:0 auto;padding:.5em;height:16em;font-size:12px;width:40em}.vjs-caption-settings .vjs-tracksettings{top:0;bottom:1em;left:0;right:0;position:absolute;overflow:auto}.vjs-caption-settings .vjs-tracksettings-colors,.vjs-caption-settings .vjs-tracksettings-font{float:left}.vjs-caption-settings .vjs-tracksettings-colors:after,.vjs-caption-settings .vjs-tracksettings-controls:after,.vjs-caption-settings .vjs-tracksettings-font:after{clear:both}.vjs-caption-settings .vjs-tracksettings-controls{position:absolute;bottom:1em;right:1em}.vjs-caption-settings .vjs-tracksetting{margin:5px;padding:3px;min-height:40px;border:none}.vjs-caption-settings .vjs-tracksetting label,.vjs-caption-settings .vjs-tracksetting legend{display:block;width:100px;margin-bottom:5px}.vjs-caption-settings .vjs-tracksetting span{display:inline;margin-left:5px;vertical-align:top;float:right}.vjs-caption-settings .vjs-tracksetting>div{margin-bottom:5px;min-height:20px}.vjs-caption-settings .vjs-tracksetting>div:last-child{margin-bottom:0;padding-bottom:0;min-height:0}.vjs-caption-settings label>input{margin-right:10px}.vjs-caption-settings fieldset{margin-top:1em;margin-left:.5em}.vjs-caption-settings fieldset .vjs-label{position:absolute;clip:rect(1px 1px 1px 1px);clip:rect(1px,1px,1px,1px);padding:0;border:0;height:1px;width:1px;overflow:hidden}.vjs-caption-settings input[type=button]{width:40px;height:40px}.video-js .vjs-modal-dialog{background:rgba(0,0,0,.8);background:-webkit-linear-gradient(-90deg,rgba(0,0,0,.8),rgba(255,255,255,0));background:linear-gradient(180deg,rgba(0,0,0,.8),rgba(255,255,255,0))}.vjs-modal-dialog .vjs-modal-dialog-content{font-size:1.2em;line-height:1.5;padding:20px 24px;z-index:1}@media print{.video-js>:not(.vjs-tech):not(.vjs-poster){visibility:hidden}}@media \0screen{.vjs-user-inactive.vjs-playing .vjs-control-bar :before{content:""}.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar{visibility:hidden}}
.lesson-video {
  position: relative;
}
.lesson-video-poster {
  width: 100%;
}
.lesson-wrapper:not([data-is-smart-phone]) .video-js .vjs-big-play-button {
  display: none;
}
.video-js .vjs-big-play-button {
  background-color: transparent;
  border: 0;
  border-radius: 0;
  background: transparent;
  position: absolute;
  background-size: contain;
  background-image: url("../images/video-player/play-button.svg");
  width: 54px;
  height: 54px;
  left: 50%;
  top: 50%;
  margin: -27px 0 0 -27px;
}
.video-js .vjs-big-play-button::before {
  content: '';
}
.video-js .vjs-loading-spinner {
  display: none !important;
}
.video-player {
  width: 100%;
  position: relative;
  overflow: hidden;
  height: 393.75px;
}
@media screen and (max-width: 1000px) {
  .video-player {
    height: 253.125px;
  }
}
@media screen and (max-width: 768px) {
  .video-player {
    height: calc((100vw - 20px) * 9 / 16);
  }
}
.video-player.video-player-no-responsive {
  height: auto;
}
.video-player video {
  width: 100%;
  background-color: #333;
}
.video-player video::-webkit-media-controls-panel-container {
  display: none !important;
}
.video-description-wrapper-fold,
.see-more {
  display: block;
}
.hide-more {
  display: none;
}
.see-more,
.hide-more {
  border-top: 1px solid #eee;
  padding: 20px 0 0;
  text-align: center;
  font-weight: 600;
  font-size: 0.85rem;
  color: #13a7ff;
}
.lesson-text-area-main {
  text-align: left;
  color: #333;
  transition: 0.5s visibility linear, 0.5s opacity linear;
}
.lesson-text-area-main.slt-body {
  padding-bottom: 40px;
}
.lesson-text-area-main.hidden {
  visibility: hidden;
  opacity: 0;
  height: 0;
  transition: none;
}
.lesson-text-area-main.slt-sample-body.hidden {
  margin-bottom: -20px;
}
.lesson-text-area-main h2 {
  color: #333;
  margin: 20px 0;
  font-size: 1.5rem;
  font-weight: 400;
}
.lesson-text-area-main p {
  font-size: 1rem;
}
.lesson-text-area-main img {
  display: block;
  margin: 20px auto;
  width: 100%;
  border-radius: 10px;
}
.lesson-text-area-main b {
  font-size: 1.5rem;
  font-weight: 200;
}
.lesson-text-image {
  display: block;
  position: relative;
}
.lesson-text-image > img {
  display: block;
  margin: 20px auto;
  width: 100%;
  border-radius: 10px;
  -webkit-transition: -webkit-transform 0.2s ease 0s;
  transition: transform 0.2s ease 0s;
}
.lesson-text-image > img.image-flipped {
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}
.lesson-text-image .lesson-text-image-button {
  display: box;
  display: -webkit-box;
  display: flexbox;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
  position: absolute;
  right: 10px;
  top: 10px;
  width: 71px;
}
.lesson-text-image .lesson-text-image-button > span {
  display: block;
  cursor: pointer;
  box-sizing: content-box;
  width: 24px;
  height: 24px;
  background-color: #fff;
  padding: 4px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(51,51,51,0.4);
}
.lesson-text-image .lesson-text-image-button > span > img {
  margin: 0;
}
.lesson-text-image .lesson-text-image-button > span + span {
  margin-left: 10px;
}
.learning-guide-root {
  width: 100%;
}
.learning-guide-root .learning-guide-header {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin-bottom: 24px;
  background-size: cover;
  background-repeat: repeat-x;
  background-color: #ffed78;
}
@media screen and (max-width: 768px) {
  .learning-guide-root .learning-guide-header {
    margin-bottom: 0;
  }
}
.learning-guide-root .learning-guide-header .learing-guide-inner {
  padding: 0;
}
.learning-guide-root .learning-guide-header .learning-guide-header-main {
  position: relative;
  padding: 32px 0;
}
@media screen and (max-width: 768px) {
  .learning-guide-root .learning-guide-header .learning-guide-header-main {
    padding: 16px;
    border-radius: 16px;
  }
}
.learning-guide-root .learning-guide-header .learning-guide-header-main > h1 {
  color: #333;
  font-weight: bold;
  font-size: 1.8125rem;
}
@media screen and (max-width: 768px) {
  .learning-guide-root .learning-guide-header .learning-guide-header-main > h1 {
    font-size: 1.125rem;
  }
}
.learning-guide-root .learning-guide-header .learning-guide-header-main > h1 .newbie-icon {
  display: inline-block;
  line-height: 24px;
  margin-right: 8px;
  -webkit-transform: translateY(-1px);
  transform: translateY(-1px);
}
@media screen and (max-width: 768px) {
  .learning-guide-root .learning-guide-header .learning-guide-header-main > h1 .newbie-icon {
    line-height: 16px;
  }
}
.learning-guide-root .learning-guide-header .learning-guide-header-main > h1 .newbie-icon > img {
  width: 24px;
}
@media screen and (max-width: 768px) {
  .learning-guide-root .learning-guide-header .learning-guide-header-main > h1 .newbie-icon > img {
    width: 16px;
  }
}
.learning-guide-root .learning-guide-header .learning-guide-header-main .learning-guide-description {
  margin-top: 8px;
  padding-left: 32px;
  line-height: 1.8rem;
}
.learning-guide-root .learning-guide-header .learning-guide-header-main .learning-guide-description .learning-guide-description-additional {
  margin: 0;
}
@media screen and (max-width: 414px) {
  .learning-guide-root .learning-guide-header .learning-guide-header-main .learning-guide-description .learning-guide-description-additional {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .learning-guide-root .learning-guide-header .learning-guide-header-main .learning-guide-description {
    padding: 0;
    font-size: 0.875rem;
    line-height: 1.375rem;
  }
}
.learning-guide-root .learning-guide-hero {
  margin-bottom: 16px;
}
.learning-guide-root .learning-guide-hero .learing-guide-inner {
  position: relative;
  padding: 0;
}
.learning-guide-root .learning-guide-hero .learing-guide-inner .learning-guide-hero-main-image {
  position: relative;
  width: 100%;
}
.learning-guide-root .learning-guide-hero .learing-guide-inner .learning-guide-hero-main-image img {
  width: 100%;
  height: 100%;
}
.learning-guide-root .learning-guide-hero .learing-guide-inner .learning-guide-hero-information {
  position: absolute;
  top: 192px;
  left: 70px;
  width: 370px;
  color: #333;
}
@media screen and (max-width: 1000px) {
  .learning-guide-root .learning-guide-hero .learing-guide-inner .learning-guide-hero-information {
    top: 136px;
    left: 10px;
  }
}
@media screen and (max-width: 768px) {
  .learning-guide-root .learning-guide-hero .learing-guide-inner .learning-guide-hero-information {
    position: static;
    top: 0;
    left: 0;
    width: 100%;
    padding: 16px;
    background-color: #cef;
  }
}
.learning-guide-root .learning-guide-hero .learing-guide-inner .learning-guide-hero-information .learning-guide-hero-description {
  text-align: center;
  line-height: 1.8rem;
}
@media screen and (max-width: 1000px) {
  .learning-guide-root .learning-guide-hero .learing-guide-inner .learning-guide-hero-information .learning-guide-hero-description {
    margin-top: 8px;
    font-size: 0.875rem;
    line-height: 1.375rem;
  }
}
@media screen and (max-width: 768px) {
  .learning-guide-root .learning-guide-hero .learing-guide-inner .learning-guide-hero-information .learning-guide-hero-description {
    padding: 0;
    margin: 0;
    line-height: 1.5rem;
  }
}
.learning-guide-root .learning-guide-hero .learing-guide-inner .learning-guide-hero-information .learning-guide-required-minutes {
  display: box;
  display: -webkit-box;
  display: flexbox;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align-items: center;
  -webkit-align-items: center;
  align-items: center;
  margin-top: 16px;
}
@media screen and (max-width: 768px) {
  .learning-guide-root .learning-guide-hero .learing-guide-inner .learning-guide-hero-information .learning-guide-required-minutes {
    margin-top: 8px;
  }
}
.learning-guide-root .learning-guide-hero .learing-guide-inner .learning-guide-hero-information .learning-guide-required-minutes > dt {
  margin-right: 4px;
  line-height: 1.125rem;
}
.learning-guide-root .learning-guide-hero .learing-guide-inner .learning-guide-hero-information .learning-guide-required-minutes > dt > img {
  height: 1.125rem;
}
.learning-guide-root .learning-guide-hero .learing-guide-inner .learning-guide-hero-information .learning-guide-required-minutes > dt:not(:first-of-type) {
  margin-left: 8px;
  padding-left: 8px;
  border-left: 1px dashed #333;
}
.learning-guide-root .learning-guide-hero .learing-guide-inner .learning-guide-hero-information .learning-guide-required-minutes > dd {
  line-height: 1rem;
  font-size: 1rem;
}
@media screen and (max-width: 768px) {
  .learning-guide-root .learning-guide-hero .learing-guide-inner .learning-guide-hero-information .learning-guide-required-minutes > dd {
    font-size: 0.875rem;
  }
}
.learning-guide-root .learning-guide-share {
  margin-bottom: 16px;
}
.learning-guide-root .learning-guide-share .share-button {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
}
.learning-guide-root .learning-guide-course-list-to-next {
  display: block;
  margin: 16px auto;
  height: 16px;
  line-height: 16px;
}
.learning-guide-root .learning-guide-course-list-to-next > img {
  width: 100%;
}
.learning-guide-root .learning-guide-course-complete {
  width: 100%;
  margin: 0 auto 90px;
}
.learning-guide-root .learning-guide-course-complete .learning-guide-course-complete-template {
  position: relative;
  margin: 30px auto 0;
  height: 360px;
  text-align: center;
  background-image: url("../images/learning_guide/complete_template.svg");
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}
.learning-guide-root .learning-guide-course-complete .learning-guide-course-complete-template .learning-guide-course-complete-inner > img {
  height: 325px;
  margin-top: -30px;
}
.learning-guide-root .learning-guide-course-complete .learning-guide-course-complete-template .learning-guide-course-complete-ribbon {
  position: absolute;
  bottom: 10px;
  left: 0;
  width: 100%;
  text-align: center;
}
.learning-guide-root .learning-guide-course-complete .learning-guide-course-complete-template .learning-guide-course-complete-ribbon > img {
  width: 300px;
}
.learning-guide-root .learning-guide-course-complete .learning-guide-course-complete-message {
  text-align: center;
  margin-top: 24px;
}
.learning-guide-root .learning-guide-course-complete .learning-guide-course-complete-message > img {
  width: 100%;
  max-width: 300px;
}
.course-list-section .course-list-section-item.course-list-section-item-learning-guide {
  display: box;
  display: -webkit-box;
  display: flexbox;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  width: 100%;
  max-width: 100%;
  margin-right: 0;
  margin-bottom: 0;
}
.course-list-section .course-list-section-item.course-list-section-item-learning-guide .course-list-section-item-head {
  position: relative;
  width: 250px;
  margin: 16px 0 16px 16px;
}
.course-list-section .course-list-section-item.course-list-section-item-learning-guide .course-list-section-item-head .course-thumbnail {
  display: block;
}
.course-list-section .course-list-section-item.course-list-section-item-learning-guide .course-list-section-item-head .course-thumbnail .course-list-section-item-thumbnail {
  border-radius: 8px;
}
@media screen and (max-width: 768px) {
  .course-list-section .course-list-section-item.course-list-section-item-learning-guide .course-list-section-item-head .course-thumbnail .course-list-section-item-thumbnail {
    border-radius: 8px 8px 0 0;
  }
}
.course-list-section .course-list-section-item.course-list-section-item-learning-guide .course-list-section-item-body {
  flex: 1;
}
.course-list-section .course-list-section-item.course-list-section-item-learning-guide .course-list-section-item-body .course-list-section-item-main {
  position: relative;
  height: auto;
  padding: 0;
}
.course-list-section .course-list-section-item.course-list-section-item-learning-guide .course-list-section-item-body .course-list-section-item-main > h2 {
  padding: 16px;
}
.course-list-section .course-list-section-item.course-list-section-item-learning-guide .course-list-section-item-body .course-list-section-item-main > h2 > a {
  display: inline-block;
  margin-right: 16px;
}
.course-list-section .course-list-section-item.course-list-section-item-learning-guide .course-list-section-item-body .course-list-section-item-main .course-list-section-item-required-minutes {
  display: inline-block;
  vertical-align: middle;
  font-size: 0.75rem;
  line-height: 0.75rem;
  color: #787873;
}
.course-list-section .course-list-section-item.course-list-section-item-learning-guide .course-list-section-item-body .course-list-section-item-main .course-list-section-item-required-minutes > img {
  height: 0.875rem;
}
@media screen and (max-width: 768px) {
  .course-list-section .course-list-section-item.course-list-section-item-learning-guide .course-list-section-item-body .course-list-section-item-main .course-list-section-item-required-minutes {
    position: absolute;
    top: 16px;
    right: 16px;
  }
}
.course-list-section .course-list-section-item.course-list-section-item-learning-guide .course-list-section-item-count {
  margin-right: 215px;
}
.course-list-section .course-list-section-item.course-list-section-item-learning-guide .course-list-section-item-start-container {
  position: absolute;
  width: 210px;
  bottom: 16px;
  right: 16px;
}
@media screen and (max-width: 768px) {
  .course-list-section .course-list-section-item.course-list-section-item-learning-guide .course-list-section-item-start-container {
    position: static;
    bottom: 0;
    right: 0;
    margin: 16px 0 0 0;
    width: 100%;
  }
}
.course-list-section .course-list-section-item.course-list-section-item-learning-guide .course-list-section-item-start-container .course-list-section-item-start {
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: rgba(19,167,255,0.2);
  color: #13a7ff;
  text-align: center;
  font-weight: bold;
  padding: 8px 24px;
  border-radius: 4px;
}
@media screen and (max-width: 768px) {
  .course-list-section .course-list-section-item.course-list-section-item-learning-guide .course-list-section-item-start-container .course-list-section-item-start {
    position: static;
    padding: 8px 0;
    border-radius: 0 0 4px 4px;
  }
}
.course-list-section .course-list-section-item.course-list-section-item-learning-guide .course-list-section-item-start-container .course-list-section-item-start .arrow {
  width: 14px;
  height: 14px;
  vertical-align: -1px;
}
@media screen and (max-width: 768px) {
  .course-list-section .course-list-section-item.course-list-section-item-learning-guide {
    -webkit-box-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    padding: 0;
  }
  .course-list-section .course-list-section-item.course-list-section-item-learning-guide .course-list-section-item-head {
    width: 100%;
    margin: 0;
  }
  .course-list-section .course-list-section-item.course-list-section-item-learning-guide .course-list-section-item-head .course-list-section-item-thumbnail {
    border-radius: 8px 8px 0 0;
  }
  .course-list-section .course-list-section-item.course-list-section-item-learning-guide .course-list-section-item-body .course-list-section-item-main {
    height: auto;
    padding: 0;
  }
  .course-list-section .course-list-section-item.course-list-section-item-learning-guide .course-list-section-item-body .course-list-section-item-main > h2 {
    padding: 12px;
  }
  .course-list-section .course-list-section-item.course-list-section-item-learning-guide .course-list-section-item-body .course-list-section-item-main > h2 > a {
    display: block;
  }
  .course-list-section .course-list-section-item.course-list-section-item-learning-guide .course-list-section-item-body .course-list-section-item-count {
    margin-right: 12px;
  }
}
/* Slider */
.slick-slider
{
    position: relative;

    display: block;
    box-sizing: border-box;

    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;

    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;

    display: block;
    overflow: hidden;

    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;

    display: block;
}
.slick-track:before,
.slick-track:after
{
    display: table;

    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;

    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;

    height: auto;

    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}

.wrapper {
  background-color: #fbf7ed;
  position: relative;
}
.global-header {
  position: relative;
  z-index: 199;
  background-color: #fff;
}
@media screen and (max-width: 414px) {
  .global-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    box-shadow: 0 2px 2px rgba(51,51,51,0.1);
    -webkit-transition: left 0.2s ease 0s;
    transition: left 0.2s ease 0s;
  }
  .global-header.sp-lp-header {
    position: static;
  }
}
.global-header .tmp-premium-user-label-block {
  width: 100%;
  padding: 5px 0;
  background: rgba(66,185,255,0.2);
  color: #13a7ff;
  font-size: 0.8rem;
}
@media screen and (max-width: 768px) {
  .global-header .tmp-premium-user-label-block {
    display: none;
  }
}
.global-header .tmp-premium-user-label-block .tmp-premium-user-label-block-inner {
  display: box;
  display: -webkit-box;
  display: flexbox;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
@media screen and (max-width: 1000px) {
  .global-header .tmp-premium-user-label-block .tmp-premium-user-label-block-inner {
    -webkit-box-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    text-align: center;
  }
}
.global-header .tmp-premium-user-label-block .tmp-premium-user-label-block-inner strong {
  font-weight: bold;
}
.global-header .tmp-premium-user-label-block .tmp-premium-user-label-block-inner a {
  color: #ff962b;
  font-weight: bold;
  text-decoration: underline;
  text-align: right;
}
.global-header .global-header-row {
  display: box;
  display: -webkit-box;
  display: flexbox;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  -webkit-box-align-items: center;
  -webkit-align-items: center;
  align-items: center;
  padding-top: 16px;
  padding-bottom: 16px;
}
@media screen and (max-width: 768px) {
  .global-header .global-header-row {
    padding: 12px 0 12px 15px;
  }
}
.global-header .global-header-row .global-header-logo {
  box-flex: 3;
  -webkit-box-flex: 3;
  -webkit-flex: 3;
  -ms-flex: 3;
  flex: 3;
  padding-right: 10px;
}
.global-header .global-header-row .global-header-logo img {
  width: 100%;
  height: auto;
  max-width: 220px;
}
@media screen and (max-width: 768px) {
  .global-header .global-header-row .global-header-logo img {
    max-width: 180px;
  }
}
@media screen and (max-width: 768px) {
  .global-header .global-header-row .global-header-logo .pc-logo-image {
    display: none;
  }
}
.global-header .global-header-row .global-header-logo .sp-logo-image {
  display: none;
}
@media screen and (max-width: 768px) {
  .global-header .global-header-row .global-header-logo .sp-logo-image {
    display: block;
  }
}
.global-header .global-header-row .with-anniversary-logo {
  position: relative;
  padding-right: 25px;
}
.global-header .global-header-row .with-anniversary-logo img {
  width: 100%;
  height: auto;
  max-width: 220px;
}
@media screen and (max-width: 1000px) {
  .global-header .global-header-row .with-anniversary-logo img:not(.with-anniversary-logo) {
    max-width: 170px;
  }
}
@media screen and (max-width: 1000px) {
  .global-header .global-header-row .with-anniversary-logo .pc-logo-image {
    display: none;
  }
}
.global-header .global-header-row .with-anniversary-logo .sp-logo-image {
  display: none;
}
@media screen and (max-width: 1000px) {
  .global-header .global-header-row .with-anniversary-logo .sp-logo-image {
    display: block;
    padding-top: 5px;
  }
}
.global-header .global-header-row .with-anniversary-logo .pixiv-anniversary-logo {
  display: block;
  position: absolute;
  left: 225px;
  top: 6px;
  width: 40px;
  height: 40px;
}
@media screen and (max-width: 1000px) {
  .global-header .global-header-row .with-anniversary-logo .pixiv-anniversary-logo {
    top: 4px;
    left: 178px;
    width: 36px;
    height: 36px;
  }
}
.global-header .global-header-row .global-header-category {
  display: box;
  display: -webkit-box;
  display: flexbox;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  box-flex: 5;
  -webkit-box-flex: 5;
  -webkit-flex: 5;
  -ms-flex: 5;
  flex: 5;
  font-size: 0.8rem;
  border-left: 1px dashed #ddd;
}
@media screen and (max-width: 768px) {
  .global-header .global-header-row .global-header-category {
    display: none;
  }
}
.global-header .global-header-row .global-header-category .global-header-category-item {
  box-flex: 1;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  text-align: center;
  font-weight: 600;
  color: #797873;
  border-right: 1px dashed #ddd;
}
.global-header .global-header-row .global-header-category .global-header-category-item .global-header-category-item-label {
  padding-top: 5px;
  color: #797873;
}
.global-header .global-header-row .global-header-category .global-header-category-item:hover {
  opacity: 0.6;
  color: #0c79cb;
}
.global-header .global-header-row .global-header-action {
  display: box;
  display: -webkit-box;
  display: flexbox;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  -webkit-box-align-items: center;
  -webkit-align-items: center;
  align-items: center;
  box-flex: 3;
  -webkit-box-flex: 3;
  -webkit-flex: 3;
  -ms-flex: 3;
  flex: 3;
  position: relative;
}
@media screen and (max-width: 768px) {
  .global-header .global-header-row .global-header-action {
    display: none;
  }
}
.global-header .global-header-row .global-header-action .global-header-action-progress {
  box-flex: 2;
  -webkit-box-flex: 2;
  -webkit-flex: 2;
  -ms-flex: 2;
  flex: 2;
  text-align: right;
  padding-right: 15px;
}
@media screen and (max-width: 1000px) {
  .global-header .global-header-row .global-header-action .global-header-action-progress .btn-yellow {
    padding: 10px 15px;
  }
}
.global-header .global-header-row .global-header-action .global-header-action-user {
  box-flex: 1;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  cursor: pointer;
}
.global-header .global-header-row .global-header-action .global-header-action-user .global-header-action-user-menu {
  display: box;
  display: -webkit-box;
  display: flexbox;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  -webkit-box-align-items: center;
  -webkit-align-items: center;
  align-items: center;
}
.global-header .global-header-row .global-header-action .global-header-action-user .global-header-action-user-menu .global-header-action-profile-image {
  width: 48px;
  min-width: 48px;
  height: 48px;
  border: 1px solid #999;
  border-radius: 50%;
  margin-right: 5px;
}
.global-header .global-header-row .global-header-action .global-header-action-user .global-header-action-user-menu .global-header-action-profile-image:hover {
  opacity: 0.6;
}
.global-header .global-header-row .global-header-action .global-header-action-user .global-header-action-user-menu .fa-chevron-down {
  color: #999;
}
.global-header .global-header-row .global-header-action .global-header-action-dropdown {
  display: none;
  position: absolute;
  z-index: 3;
  box-sizing: border-box;
  right: 0;
  top: 60px;
  padding: 10px 30px;
  background-color: #fff;
  border: 1px solid #eee;
  box-shadow: 1px 2px 1px #ccc;
  text-align: center;
}
.global-header .global-header-row .global-header-action .global-header-action-login-via-pixiv {
  margin: 0 0 0 auto;
}
.global-header .global-header-row .global-header-action .global-header-action-login-via-pixiv > .btn-blue {
  font-size: 0.8rem;
}
@media screen and (max-width: 1000px) {
  .global-header .global-header-row .global-header-action .global-header-action-login-via-pixiv > .btn-blue {
    padding: 10px;
  }
}
.global-header .global-header-row .global-header-action .global-header-action-login {
  text-align: right;
  padding: 5px 25px 0 70px;
}
@media screen and (max-width: 1000px) {
  .global-header .global-header-row .global-header-action .global-header-action-login {
    padding: 5px 10px 0 30px;
  }
}
.global-header .global-header-row .global-header-action .global-header-action-login a {
  display: inline;
  color: #797873;
}
.global-header .global-header-row .global-header-action .global-header-action-login a:hover {
  color: #0c79cb;
}
.global-header .global-header-row .global-header-action .global-header-action-signup {
  box-flex: 1;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.global-header .global-header-row .global-header-action .global-header-action-signup a {
  padding: 10px 15px;
  word-break: keep-all;
}
.global-header .global-header-row .global-header-hamburger {
  width: 48px;
  height: 38px;
  overflow: hidden;
  display: none;
  padding: 10px 20px 0 2px;
}
@media screen and (max-width: 768px) {
  .global-header .global-header-row .global-header-hamburger {
    display: block;
    padding: 2px 0 0 0;
  }
}
.global-header .global-header-row .global-header-hamburger .global-header-hamburger-button {
  cursor: pointer;
}
.global-header .global-header-row .global-header-hamburger .global-header-hamburger-button > img {
  width: 32px;
  height: 32px;
}
.global-header .global-header-action-tooltip {
  right: 65px;
  bottom: -40px;
}
@media screen and (max-width: 1000px) {
  .global-header .global-header-action-tooltip {
    right: 38px;
  }
}
@media screen and (max-width: 768px) {
  .global-header .global-header-action-tooltip {
    display: none;
    margin-right: 0;
  }
}
.global-header .global-header-action-tooltip > .tooltip {
  position: relative;
  overflow: visible;
  width: 215px;
}
.global-header .global-header-action-tooltip > .tooltip::after {
  content: '';
  position: absolute;
  background-color: transparent;
  width: 0;
  height: 0;
  left: 50%;
  margin-left: -6px;
  border: 6px solid transparent;
  border-bottom: 6px solid #333;
  top: -12px;
}
.global-header .global-header-hamburger-tooltip {
  right: 10px;
  bottom: -30px;
}
.global-header .global-header-hamburger-tooltip > .tooltip {
  position: relative;
  overflow: visible;
  width: 215px;
}
.global-header .global-header-hamburger-tooltip > .tooltip::after {
  content: '';
  position: absolute;
  background-color: transparent;
  width: 0;
  height: 0;
  left: 50%;
  margin-left: -6px;
  border: 6px solid transparent;
  border-bottom: 6px solid #333;
  top: -12px;
}
.global-header .global-header-hamburger-tooltip > .tooltip::after {
  left: auto;
  right: 16px;
}
.wrapper {
  right: 0;
  -webkit-transition: right 0.2s ease 0s;
  transition: right 0.2s ease 0s;
}
.wrapper.is-sidebar-opened {
  position: fixed;
  width: 100vw;
  right: 220px;
}
@media screen and (max-width: 414px) {
  .wrapper.is-sidebar-opened .global-header {
    left: -220px;
  }
}
.wrapper.is-sidebar-opened .global-navigation-overlay {
  visibility: visible;
}
.wrapper.is-sidebar-opened .global-navigation-overlay .global-navigation {
  right: 0;
}
.global-navigation-overlay {
  z-index: 200;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(51,51,51,0.7);
  overflow: scroll;
  visibility: hidden;
  -webkit-transition: visibility 0.2s ease 0s;
  transition: visibility 0.2s ease 0s;
}
.global-navigation-overlay::-webkit-scrollbar {
  display: none;
}
.global-navigation-overlay .global-navigation {
  position: absolute;
  width: 220px;
  height: 100%;
  min-height: 700px;
  top: 0;
  right: -220px;
  -webkit-transition: right 0.2s ease 0s;
  transition: right 0.2s ease 0s;
  background-color: #13a7ff;
}
.global-navigation-overlay .global-navigation .global-navigation-scroll-container {
  height: 100%;
}
.global-navigation-overlay .global-navigation .global-navigation-scroll-container::-webkit-scrollbar {
  display: none;
}
.global-navigation-overlay .global-navigation .global-navigation-main .global-navigation-profile {
  display: box;
  display: -webkit-box;
  display: flexbox;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  -webkit-box-align-items: center;
  -webkit-align-items: center;
  align-items: center;
  padding: 20px;
  padding-bottom: 0;
  margin-bottom: 10px;
}
.global-navigation-overlay .global-navigation .global-navigation-main .global-navigation-profile .global-navigation-profile-image {
  width: 48px;
}
.global-navigation-overlay .global-navigation .global-navigation-main .global-navigation-profile .global-navigation-profile-image img {
  width: 48px;
  height: 48px;
  border: 1px solid #ddd;
  border-radius: 50%;
}
.global-navigation-overlay .global-navigation .global-navigation-main .global-navigation-profile .global-navigation-profile-name {
  font-weight: 600;
  color: #fff;
  margin-left: 10px;
}
.global-navigation-overlay .global-navigation .global-navigation-main .global-navigation-progress {
  padding: 0 20px;
  margin-bottom: 15px;
}
.global-navigation-overlay .global-navigation .global-navigation-main .global-navigation-progress .btn-yellow {
  width: 100%;
}
.global-navigation-overlay .global-navigation .global-navigation-main .global-navigation-tmp-premium {
  padding: 20px;
  padding-top: 0;
  color: #fff;
  font-size: 0.8rem;
}
.global-navigation-overlay .global-navigation .global-navigation-main .global-navigation-premium {
  padding: 20px;
  padding-top: 0;
  text-align: right;
}
.global-navigation-overlay .global-navigation .global-navigation-main .global-navigation-premium a {
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: underline;
  outline: none;
}
.global-navigation-overlay .global-navigation .global-navigation-action-start a {
  display: block;
  width: 100%;
  outline: none;
}
.global-navigation-overlay .global-navigation .global-navigation-action-start a .global-navigation-action-start-button {
  padding: 25px 20px;
  color: #fff;
  text-decoration: underline;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 600;
  border-bottom: 2px solid rgba(66,185,255,0.5);
}
.global-navigation-overlay .global-navigation .global-navigation-action-list a {
  display: block;
  width: 100%;
  outline: none;
}
.global-navigation-overlay .global-navigation .global-navigation-action-list a .global-navigation-action-list-item {
  padding: 15px 20px;
  color: #fff;
  font-weight: 600;
  border-bottom: 2px solid rgba(66,185,255,0.5);
}
.global-navigation-overlay .global-navigation .global-navigation-category h3 {
  background-color: rgba(66,185,255,0.5);
  padding: 15px 20px;
  line-height: 1;
  font-weight: 400;
  font-size: 1rem;
}
.global-navigation-overlay .global-navigation .global-navigation-category a {
  display: block;
  width: 100%;
  outline: none;
}
.global-navigation-overlay .global-navigation .global-navigation-category a .global-navigation-category-list-item {
  padding: 15px 20px;
  color: #fff;
  font-weight: 600;
  border-bottom: 2px solid rgba(66,185,255,0.5);
}
.global-navigation-overlay .global-navigation .global-navigation-category a .global-navigation-category-list-item>img {
  margin-right: 5px;
}
.global-navigation-overlay .global-navigation .global-navigation-logout-button {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 15px 20px;
  text-align: center;
  color: #fff;
  background-color: #13a7ff;
  font-weight: 600;
  border-top: 2px solid rgba(66,185,255,0.5);
  border-bottom: 2px solid rgba(66,185,255,0.5);
}
.global-footer {
  width: 100%;
  background-color: #fff;
  position: absolute;
  bottom: 0;
  padding-top: 10px;
}
@media screen and (max-width: 768px) {
  .global-footer {
    display: none;
  }
}
.global-footer .global-footer-row {
  display: box;
  display: -webkit-box;
  display: flexbox;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  min-height: 300px;
  padding-top: 20px;
  padding-bottom: 20px;
  background-image: url("../images/sensei-stand.png?20160808");
  background-position: bottom right;
  background-position: bottom 20px right;
  background-repeat: no-repeat;
  background-size: 103px 100px;
}
@media screen and (max-width: 768px) {
  .global-footer .global-footer-row {
    display: block;
    background-image: none;
  }
}
.global-footer .global-footer-row .global-footer-main {
  width: 25%;
  padding-right: 5%;
  margin-bottom: 20px;
}
@media screen and (max-width: 768px) {
  .global-footer .global-footer-row .global-footer-main {
    width: 100%;
    padding-right: 0;
  }
}
.global-footer .global-footer-row .global-footer-main .global-footer-main-logo {
  margin-bottom: 20px;
}
.global-footer .global-footer-row .global-footer-main .global-footer-main-description {
  font-size: 0.8rem;
  margin-bottom: 20px;
}
.global-footer .global-footer-row .global-footer-about {
  width: 25%;
  margin-bottom: 20px;
}
@media screen and (max-width: 768px) {
  .global-footer .global-footer-row .global-footer-about {
    width: 100%;
  }
}
.global-footer .global-footer-row .global-footer-about h2 {
  font-weight: 400;
}
.global-footer .global-footer-row .global-footer-about ul {
  margin: 15px 0;
  line-height: 2;
  font-size: 0.8rem;
}
@media screen and (max-width: 768px) {
  .global-footer .global-footer-row .global-footer-about li {
    display: inline-block;
    padding-right: 10px;
    word-break: keep-all;
  }
  .global-footer .global-footer-row .global-footer-about li a {
    display: inline;
  }
}
.global-footer .global-footer-row .global-footer-categories {
  width: 25%;
  margin-bottom: 20px;
}
@media screen and (max-width: 768px) {
  .global-footer .global-footer-row .global-footer-categories {
    display: none;
  }
}
.global-footer .global-footer-row .global-footer-categories h2 {
  font-weight: 400;
}
.global-footer .global-footer-row .global-footer-categories ul {
  margin: 15px 0;
  line-height: 2;
  font-size: 0.8rem;
}
.global-footer .global-footer-row .global-footer-accounts {
  width: 20%;
  margin-bottom: 20px;
}
@media screen and (max-width: 768px) {
  .global-footer .global-footer-row .global-footer-accounts {
    width: 100%;
  }
}
.global-footer .global-footer-row .global-footer-accounts li {
  font-weight: 600;
  padding: 15px 0;
  border-bottom: 1px dashed #ddd;
}
.global-footer .global-footer-copyright {
  background-color: #ffed78;
}
.global-footer .global-footer-copyright p {
  text-align: center;
  font-size: 0.8rem;
  padding: 5px 0;
}
.sp-global-footer {
  display: none;
}
@media screen and (max-width: 768px) {
  .sp-global-footer {
    display: block;
    width: 100%;
    background-color: #fff;
    position: absolute;
    bottom: 0;
    border-top: 1px solid #fbf7ed;
  }
  .sp-global-footer .global-footer-accounts {
    width: 100px;
    margin: 0 auto;
  }
  .sp-global-footer .global-footer-accounts ul {
    display: box;
    display: -webkit-box;
    display: flexbox;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
  }
  .sp-global-footer .global-footer-accounts li {
    padding: 20px 10px 10px;
  }
  .sp-global-footer .global-footer-about {
    width: 100%;
    text-align: center;
  }
  .sp-global-footer .global-footer-about ul {
    margin: 0;
    line-height: 2;
  }
  .sp-global-footer .global-footer-about li {
    display: inline-block;
    padding-right: 10px;
    word-break: keep-all;
    font-size: 0.7rem;
    border-right: 1px solid #eee;
  }
  .sp-global-footer .global-footer-about li a {
    display: inline;
    padding: 0;
  }
  .sp-global-footer .global-footer-about li:last-child {
    border-right: none;
    padding: 0;
  }
  .sp-global-footer .global-footer-main {
    width: 100%;
    padding-right: 0;
  }
  .sp-global-footer .global-footer-main > h2 {
    padding: 13px 0 0;
    text-align: center;
  }
  .sp-global-footer .global-footer-main .global-footer-main-description {
    margin: 20px 0;
    font-size: 0.7rem;
    text-align: center;
  }
  .sp-global-footer .global-footer-main > .share-button {
    width: 165px;
    margin: 20px auto;
  }
}
.sp-global-footer .global-footer-copyright {
  background-color: #ffed78;
}
.sp-global-footer .global-footer-copyright p {
  text-align: center;
  font-size: 0.7rem;
  padding: 5px 0;
}
@media screen and (max-width: 768px) {
  .course-category-wrap-inner {
    padding: 0;
  }
}
.course-category-wrap-inner .course-category-description {
  position: relative;
  display: box;
  display: -webkit-box;
  display: flexbox;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  -webkit-box-flex-direction: row;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
@media screen and (max-width: 768px) {
  .course-category-wrap-inner .course-category-description {
    -webkit-box-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    border-radius: 0;
  }
}
.course-category-wrap-inner .course-category-description .course-category-description-image {
  width: 500px;
  height: 262.5px;
}
@media screen and (max-width: 1000px) {
  .course-category-wrap-inner .course-category-description .course-category-description-image {
    width: 50%;
    height: 50%;
  }
}
@media screen and (max-width: 768px) {
  .course-category-wrap-inner .course-category-description .course-category-description-image {
    width: 100%;
    height: auto;
  }
}
.course-category-wrap-inner .course-category-description .course-category-description-main {
  width: 50%;
  padding: 24px;
}
@media screen and (max-width: 1000px) {
  .course-category-wrap-inner .course-category-description .course-category-description-main {
    max-height: 196.875px;
  }
}
@media screen and (max-width: 768px) {
  .course-category-wrap-inner .course-category-description .course-category-description-main {
    width: 100%;
    max-height: 100%;
  }
}
.course-category-wrap-inner .course-category-description .course-category-description-main .course-category-description-main-icon {
  background-color: transparent;
  width: 0;
  height: 0;
  border-top: 32px solid #13a7ff;
  border-left: 32px solid #13a7ff;
  border-right: 32px solid transparent;
  border-bottom: 32px solid transparent;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 8px 0 0;
}
@media screen and (max-width: 768px) {
  .course-category-wrap-inner .course-category-description .course-category-description-main .course-category-description-main-icon {
    border-radius: 0;
  }
}
.course-category-wrap-inner .course-category-description .course-category-description-main .course-category-description-main-icon > img {
  width: 20px;
  height: 20px;
  position: absolute;
  top: -24px;
  left: -24px;
}
.course-category-wrap-inner .course-category-description .course-category-description-main .course-category-description-main-header {
  border-bottom: 1px dashed #ddd;
  margin-bottom: 1rem;
}
.course-category-wrap-inner .course-category-description .course-category-description-main .course-category-description-main-header > h1 {
  font-size: 1.6rem;
  font-weight: 600;
  padding-bottom: 5px;
}
.course-category-wrap-inner .course-category-description .course-category-description-main .course-category-description-main-header .course-category-description-main-header-count {
  font-size: 0.8rem;
  display: inline;
  margin-left: 10px;
  color: #797873;
}
.course-category-wrap-inner .course-category-description .course-category-description-main .course-category-description-main-text {
  min-height: 3em;
  font-size: 1rem;
}
@media screen and (max-width: 768px) {
  .course-category-wrap-inner .course-list-section {
    padding: 0 10px;
  }
}
.course-list-section-item-practice-mark {
  position: absolute;
  background-color: rgba(255,255,255,0.8);
  padding: 3px 10px;
  top: 10px;
  right: 10px;
  border-radius: 4px;
  color: #13a7ff;
  font-size: 0.8rem;
  font-weight: 600;
}
@media screen and (max-width: 414px) {
  .course-list-section-item-practice-mark {
    font-size: 1rem;
  }
}
.course-list-section-item-practice-mark > img {
  width: 16px;
  padding-bottom: 3px;
}
@media screen and (max-width: 414px) {
  .course-list-section-item-practice-mark > img {
    width: 18px;
  }
}
.index-carousel {
  width: 100%;
  height: 384px;
  padding-top: 30px;
  overflow: hidden;
  background: #ffed78;
  box-shadow: 0 2px 2px rgba(231,215,110,0.5) inset;
}
@media screen and (max-width: 768px) {
  .index-carousel {
    height: 220px;
  }
}
@media screen and (max-width: 414px) {
  .index-carousel {
    height: 205px;
    box-shadow: none;
  }
}
.index-carousel .index-carousel-container-fixed {
  padding: 0;
}
.index-carousel .index-carousel-container-fixed .index-carousel-list {
  display: none;
}
.index-carousel .index-carousel-container-fixed .index-carousel-list .index-carousel-list-item {
  width: 618px;
  height: 324px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 2px #e7d76e;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .index-carousel .index-carousel-container-fixed .index-carousel-list .index-carousel-list-item {
    width: 320px;
    height: 160px;
  }
}
@media screen and (max-width: 414px) {
  .index-carousel .index-carousel-container-fixed .index-carousel-list .index-carousel-list-item {
    width: 276px;
    height: 145px;
  }
}
.index-carousel .index-carousel-container-fixed .index-carousel-list .index-carousel-list-item a {
  display: inline;
}
.index-carousel .index-carousel-container-fixed .index-carousel-list .index-carousel-list-item img {
  height: 100%;
  border-radius: 8px;
}
.index-carousel .index-carousel-handle-container {
  position: relative;
  top: -240px;
  height: 240px;
  pointer-events: none;
}
@media screen and (max-width: 768px) {
  .index-carousel .index-carousel-handle-container {
    top: -160px;
    height: 160px;
  }
}
@media screen and (max-width: 414px) {
  .index-carousel .index-carousel-handle-container {
    top: -145px;
    height: 145px;
  }
}
.index-carousel .index-carousel-handle-container > p {
  position: absolute;
  background: #333;
  width: 45px;
  height: 45px;
  color: #fff;
  border-radius: 50%;
  top: 33%;
  margin-top: -20px;
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 2px 4px rgba(51,51,51,0.2);
  line-height: 36px;
  vertical-align: middle;
  text-align: center;
  pointer-events: all;
}
@media screen and (max-width: 768px) {
  .index-carousel .index-carousel-handle-container > p {
    top: 50%;
  }
}
.index-carousel .index-carousel-handle-container > p:hover {
  opacity: 0.8;
}
.index-carousel .index-carousel-handle-container > p.index-carousel-handle-left {
  left: 135px;
}
@media screen and (max-width: 1000px) {
  .index-carousel .index-carousel-handle-container > p.index-carousel-handle-left {
    left: 90px;
  }
}
@media screen and (max-width: 768px) {
  .index-carousel .index-carousel-handle-container > p.index-carousel-handle-left {
    left: 0;
  }
}
@media screen and (max-width: 414px) {
  .index-carousel .index-carousel-handle-container > p.index-carousel-handle-left {
    margin-left: 10px;
  }
}
.index-carousel .index-carousel-handle-container > p.index-carousel-handle-left > img {
  width: 20px;
  height: 20px;
  padding-right: 2px;
}
.index-carousel .index-carousel-handle-container > p.index-carousel-handle-right {
  right: 135px;
}
@media screen and (max-width: 1000px) {
  .index-carousel .index-carousel-handle-container > p.index-carousel-handle-right {
    right: 90px;
  }
}
@media screen and (max-width: 768px) {
  .index-carousel .index-carousel-handle-container > p.index-carousel-handle-right {
    right: 0;
  }
}
@media screen and (max-width: 414px) {
  .index-carousel .index-carousel-handle-container > p.index-carousel-handle-right {
    margin-right: 10px;
  }
}
.index-carousel .index-carousel-handle-container > p.index-carousel-handle-right > img {
  width: 20px;
  height: 20px;
  padding-left: 2px;
}
.index-tab-menu {
  width: 100%;
  background: #ffed78;
}
.index-tab-menu .index-tab-menu-list .tab-menu-list-item-active {
  background-color: #fbf7ed;
}
.index-learning-guide-link-container {
  display: block;
  position: relative;
  margin-top: 25px;
}
.index-learning-guide-link-container > .index-learning-guide-link {
  display: block;
  padding: 12px 0;
  font-weight: bold;
  text-decoration: underline;
  text-align: center;
  border-radius: 100px;
  color: #13a7ff;
  background-color: #fff;
}
.index-learning-guide-link-container > .index-learning-guide-link .newbie-icon {
  width: 16px;
  margin-right: 5px;
  vertical-align: middle;
}
.index-learning-guide-link-container .index-learning-guide-tooltip {
  width: 100%;
  top: -24px;
  margin-right: 0;
}
.index-learning-guide-link-container .index-learning-guide-tooltip > .tooltip {
  position: relative;
  overflow: visible;
  width: 150px;
}
.index-learning-guide-link-container .index-learning-guide-tooltip > .tooltip::after {
  content: '';
  position: absolute;
  background-color: transparent;
  width: 0;
  height: 0;
  left: 50%;
  margin-left: -6px;
  border: 6px solid transparent;
  border-top: 6px solid #333;
  bottom: -12px;
}
.index-course-list {
  padding-top: 25px;
}
.index-course-list .index-course-list-item {
  position: relative;
}
.inner-wrap .campaign-banner {
  width: 100%;
  height: auto;
  max-width: 998px;
  display: block;
  margin: 0 auto;
}
.inner-wrap .campaign-banner.campaign-banner-sp {
  max-width: 355px;
}
.premium-hero {
  width: 100%;
  height: 400px;
  background-image: url("../images/premium/premium_hero.jpg");
  background-repeat: repeat-x;
  background-position: center center;
  background-size: cover;
  overflow: hidden;
}
.premium-hero .premium-hero-inner {
  padding: 0;
}
.premium-hero .premium-hero-inner .premium-hero-oval {
  width: 100%;
  height: 400px;
  background-image: url("../images/premium/premium_hero_oval.png");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 600px;
  margin: 0 auto;
  position: relative;
}
.premium-hero .premium-hero-inner .premium-hero-oval .premium-hero-star-left {
  text-align: left;
  width: auto;
  height: 85%;
  position: absolute;
  bottom: 5px;
  left: 120px;
}
@media screen and (max-width: 1000px) {
  .premium-hero .premium-hero-inner .premium-hero-oval .premium-hero-star-left {
    left: 40px;
  }
}
@media screen and (max-width: 768px) {
  .premium-hero .premium-hero-inner .premium-hero-oval .premium-hero-star-left {
    left: 1%;
    bottom: 15%;
    height: 70%;
  }
}
@media screen and (max-width: 414px) {
  .premium-hero .premium-hero-inner .premium-hero-oval .premium-hero-star-left {
    display: none;
  }
}
.premium-hero .premium-hero-inner .premium-hero-oval .premium-hero-star-left img {
  width: auto;
  height: 100%;
}
.premium-hero .premium-hero-inner .premium-hero-oval .premium-hero-star-right {
  text-align: right;
  width: auto;
  height: 85%;
  position: absolute;
  bottom: 10px;
  right: 80px;
}
@media screen and (max-width: 1000px) {
  .premium-hero .premium-hero-inner .premium-hero-oval .premium-hero-star-right {
    right: 30px;
  }
}
@media screen and (max-width: 768px) {
  .premium-hero .premium-hero-inner .premium-hero-oval .premium-hero-star-right {
    right: -30px;
    bottom: 15%;
    height: 70%;
  }
}
@media screen and (max-width: 414px) {
  .premium-hero .premium-hero-inner .premium-hero-oval .premium-hero-star-right {
    display: none;
  }
}
.premium-hero .premium-hero-inner .premium-hero-oval .premium-hero-star-right img {
  width: auto;
  height: 100%;
}
.premium-hero .premium-hero-inner .premium-hero-oval .premium-hero-section {
  padding-top: 120px;
  text-align: center;
  position: relative;
}
@media screen and (max-width: 414px) {
  .premium-hero .premium-hero-inner .premium-hero-oval .premium-hero-section {
    padding-top: 135px;
  }
}
.premium-hero .premium-hero-inner .premium-hero-oval .premium-hero-section .premium-hero-section-heading {
  color: #ff962b;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 10px;
}
@media screen and (max-width: 414px) {
  .premium-hero .premium-hero-inner .premium-hero-oval .premium-hero-section .premium-hero-section-heading {
    font-size: 1.25rem;
  }
}
.premium-hero .premium-hero-inner .premium-hero-oval .premium-hero-section .premium-hero-section-heading small {
  font-size: 1rem;
}
.premium-hero .premium-hero-inner .premium-hero-oval .premium-hero-section .premium-hero-section-caption {
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 30px;
}
.premium-hero .premium-hero-inner .premium-hero-oval .premium-hero-section .premium-hero-section-button {
  margin-bottom: 10px;
}
.premium-hero .premium-hero-inner .premium-hero-oval .premium-hero-section .premium-hero-section-note {
  color: #999;
  font-size: 0.7rem;
}
.premium-hero .premium-hero-inner .premium-hero-oval .premium-hero-character-sensei {
  position: absolute;
  right: 210px;
  bottom: 10px;
  pointer-events: none;
}
@media screen and (max-width: 1000px) {
  .premium-hero .premium-hero-inner .premium-hero-oval .premium-hero-character-sensei {
    right: 80px;
  }
}
@media screen and (max-width: 768px) {
  .premium-hero .premium-hero-inner .premium-hero-oval .premium-hero-character-sensei {
    right: -1%;
    bottom: -50px;
  }
}
.premium-hero .premium-hero-inner .premium-hero-oval .premium-hero-character-sensei img {
  width: 140px;
  height: auto;
}
@media screen and (max-width: 414px) {
  .premium-hero .premium-hero-inner .premium-hero-oval .premium-hero-character-sensei img {
    width: 100px;
  }
}
.premium-hero .premium-hero-inner .premium-hero-oval .premium-hero-character-seito {
  position: absolute;
  left: 230px;
  bottom: 10px;
  pointer-events: none;
}
@media screen and (max-width: 1000px) {
  .premium-hero .premium-hero-inner .premium-hero-oval .premium-hero-character-seito {
    left: 100px;
  }
}
@media screen and (max-width: 768px) {
  .premium-hero .premium-hero-inner .premium-hero-oval .premium-hero-character-seito {
    left: 1%;
    bottom: -30px;
  }
}
.premium-hero .premium-hero-inner .premium-hero-oval .premium-hero-character-seito img {
  width: 105px;
  height: auto;
}
@media screen and (max-width: 414px) {
  .premium-hero .premium-hero-inner .premium-hero-oval .premium-hero-character-seito img {
    width: 80px;
  }
}
.premium-descriptions {
  padding: 40px 0;
}
.premium-descriptions .premium-description-section {
  display: box;
  display: -webkit-box;
  display: flexbox;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
}
.premium-descriptions .premium-description-section:nth-of-type(2n) {
  -webkit-box-flex-direction: row-reverse;
  -webkit-flex-direction: row-reverse;
  flex-direction: row-reverse;
}
@media screen and (max-width: 414px) {
  .premium-descriptions .premium-description-section {
    display: block;
  }
}
.premium-descriptions .premium-description-section .premium-description-figure {
  box-flex: 1;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.premium-descriptions .premium-description-section .premium-description-figure img {
  width: 100%;
  height: auto;
}
.premium-descriptions .premium-description-section .premium-description-text {
  box-flex: 1;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  padding-left: 30px;
  padding-top: 20px;
}
@media screen and (max-width: 414px) {
  .premium-descriptions .premium-description-section .premium-description-text {
    padding: 20px;
  }
}
.premium-descriptions .premium-description-section .premium-description-text h2 {
  font-weight: 600;
  margin-bottom: 20px;
}
.premium-descriptions .premium-description-section .premium-description-text h2::after {
  content: ' ';
  display: block;
  background-color: #ffed78;
  width: 20px;
  height: 5px;
  border-radius: 5px;
  margin-top: 15px;
}
.premium-descriptions .premium-description-section .premium-description-text .premium-description-text-note {
  margin-top: 20px;
  color: #999;
  font-size: 0.7rem;
}
.premium-merit {
  width: 100%;
  padding: 30px 0;
  background: #ffed78;
  text-align: center;
}
.premium-merit h2 {
  font-weight: 600;
  margin-bottom: 5px;
}
.premium-merit .premium-merit-table {
  padding: 25px 0;
}
.premium-merit .premium-merit-table img {
  width: 100%;
  max-width: 748px;
}
.premium-lets-start {
  width: 100%;
  padding: 30px 0 130px 0;
  text-align: center;
  background-image: url("../images/premium/seito_right.png");
  background-position: bottom -55px center;
  background-repeat: no-repeat;
  background-size: 120px;
}
.premium-lets-start h2 {
  font-weight: 600;
  margin-bottom: 5px;
}
.premium-lets-start .premium-lets-start-button {
  margin-top: 10px;
}
.lesson-wrap {
  display: box;
  display: -webkit-box;
  display: flexbox;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
}
@media screen and (max-width: 768px) {
  .lesson-wrap {
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    flex-wrap: wrap;
    padding-top: 30px;
  }
}
.lesson-wrap .lesson-main {
  width: 700px;
}
@media screen and (max-width: 1000px) {
  .lesson-wrap .lesson-main {
    width: 450px;
  }
}
@media screen and (max-width: 768px) {
  .lesson-wrap .lesson-main {
    width: 100%;
    margin-bottom: 20px;
  }
}
.lesson-wrap .lesson-main .premium-label-block {
  margin-bottom: 20px;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  flex-wrap: wrap;
}
.lesson-wrap .lesson-main .premium-label-block strong {
  color: #ff962b;
}
.lesson-wrap .lesson-main .premium-label-block .premium-label-block-link {
  font-size: 0.8rem;
  font-weight: 600;
}
@media screen and (max-width: 768px) {
  .lesson-wrap .lesson-main .premium-label-block .premium-label-block-link {
    width: 100%;
    margin-top: 10px;
  }
}
.lesson-wrap .lesson-main .premium-label-block .premium-label-block-link a {
  color: #ff962b;
}
@media screen and (max-width: 768px) {
  .lesson-wrap .lesson-main .premium-label-block .premium-label-block-link a {
    width: 100%;
    text-align: center;
  }
}
.lesson-wrap .lesson-main .lesson-title-area {
  margin-top: 20px;
  margin-bottom: 20px;
  padding: 20px 20px 0;
  display: box;
  display: -webkit-box;
  display: flexbox;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
}
@media screen and (max-width: 1000px) {
  .lesson-wrap .lesson-main .lesson-title-area {
    padding: 20px;
    display: block;
  }
}
.lesson-wrap .lesson-main .lesson-title-area .lesson-course-title {
  box-flex: 3;
  -webkit-box-flex: 3;
  -webkit-flex: 3;
  -ms-flex: 3;
  flex: 3;
}
@media screen and (max-width: 1000px) {
  .lesson-wrap .lesson-main .lesson-title-area .lesson-course-title {
    margin-bottom: 15px;
  }
}
.lesson-wrap .lesson-main .lesson-title-area .lesson-course-title .lesson-course-title-text .lesson-course-title-text-level a {
  display: inline;
}
.lesson-wrap .lesson-main .lesson-title-area .lesson-course-title .share-button {
  margin: 20px 0;
}
.lesson-wrap .lesson-main .lesson-title-area .complete-button-area {
  min-width: 160px;
}
.lesson-wrap .lesson-main .lesson-title-area .complete-button-area .lesson-login-button {
  width: 100%;
}
@media screen and (max-width: 414px) {
  .lesson-wrap .lesson-main .lesson-title-area .complete-button-area .lesson-login-button {
    font-size: 0.8rem;
  }
}
.lesson-wrap .lesson-main .lesson-title-area .complete-button-area .complete-button {
  width: 100%;
  padding: 10px 0;
}
.lesson-wrap .lesson-main .lesson-title-area .complete-button-area .complete-button.sls-complete>.fa {
  color: #77d91c;
}
.lesson-wrap .lesson-main .lesson-text-area .lesson-text-title {
  font-weight: 600;
  border-bottom: 1px solid #fbf7ed;
  padding: 20px;
}
.lesson-wrap .lesson-main .lesson-text-area .lesson-text-title>small {
  font-size: 0.8rem;
  font-weight: 400;
  vertical-align: middle;
}
.lesson-wrap .lesson-main .lesson-text-area .lesson-text-area-main {
  padding: 20px 20px 0 20px;
}
.lesson-wrap .lesson-main .lesson-text-area .lesson-text-area-toggle-full-text-container {
  padding: 30px 20px 30px 20px;
  text-align: center;
}
.lesson-wrap .lesson-main .lesson-text-area .lesson-text-area-toggle-full-text-container .lesson-text-btn {
  min-width: 360px;
  max-width: 100%;
  padding: 14px 28px;
}
@media screen and (max-width: 768px) {
  .lesson-wrap .lesson-main .lesson-text-area .lesson-text-area-toggle-full-text-container .lesson-text-btn {
    min-width: 0;
  }
}
.lesson-wrap .lesson-main .lesson-text-area .lesson-fresh-limit-date {
  background: #fff5af;
  padding: 20px 20px 40px 20px;
  text-align: center;
}
.lesson-wrap .brush-download {
  margin-bottom: 24px;
}
.lesson-wrap .brush-download .brush-download-body {
  padding: 24px;
  font-size: 0.875rem;
}
.lesson-wrap .brush-download .brush-download-body-description {
  margin-bottom: 16px;
}
.lesson-wrap .brush-download .brush-download-link-button {
  width: 100%;
  padding: 8px 24px;
  text-align: center;
  vertical-align: middle;
}
.lesson-wrap .brush-download .brush-download-link-button > .fa {
  margin-right: 8px;
}
.lesson-wrap .lesson-other-lessons {
  width: 280px;
  min-width: 280px;
  margin-left: 20px;
}
@media screen and (max-width: 768px) {
  .lesson-wrap .lesson-other-lessons {
    width: 100%;
    margin-left: 0;
  }
}
.lesson-wrap .lesson-other-lessons .lesson-other-lessons-similar-lesson {
  margin-bottom: 20px;
}
.lesson-wrap .lesson-other-lessons .lesson-other-lessons-similar-lesson .lesson-other-lessons-similar-lesson-title a {
  color: #333;
}
.lesson-wrap .lesson-other-lessons .lesson-other-lessons-similar-lesson .lesson-other-lessons-similar-lesson-list {
  padding: 0 20px;
}
.lesson-wrap .lesson-other-lessons .lesson-other-lessons-similar-lesson .lesson-other-lessons-similar-lesson-list .lesson-other-lessons-similar-lesson-list-item {
  padding: 15px 0;
}
.lesson-wrap .lesson-other-lessons .lesson-other-lessons-similar-lesson .lesson-other-lessons-similar-lesson-list .lesson-other-lessons-similar-lesson-list-item:not(:last-of-type) {
  border-bottom: 1px dashed #ddd;
}
.lesson-wrap .lesson-other-lessons .lesson-other-lessons-similar-lesson .lesson-other-lessons-similar-lesson-list .lesson-other-lessons-similar-lesson-list-item .lesson-other-lessons-similar-lesson-list-item-inner {
  display: box;
  display: -webkit-box;
  display: flexbox;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  flex-wrap: wrap;
}
@media screen and (max-width: 1000px) {
  .lesson-wrap .lesson-other-lessons .lesson-other-lessons-similar-lesson .lesson-other-lessons-similar-lesson-list .lesson-other-lessons-similar-lesson-list-item .lesson-other-lessons-similar-lesson-list-item-inner {
    display: block;
  }
}
.lesson-wrap .lesson-other-lessons .lesson-other-lessons-similar-lesson .lesson-other-lessons-similar-lesson-list .lesson-other-lessons-similar-lesson-list-item .lesson-other-lessons-similar-lesson-list-item-inner > a {
  display: box;
  display: -webkit-box;
  display: flexbox;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
}
@media screen and (max-width: 1000px) {
  .lesson-wrap .lesson-other-lessons .lesson-other-lessons-similar-lesson .lesson-other-lessons-similar-lesson-list .lesson-other-lessons-similar-lesson-list-item .lesson-other-lessons-similar-lesson-list-item-inner > a {
    display: block;
  }
}
.lesson-wrap .lesson-other-lessons .lesson-other-lessons-similar-lesson .lesson-other-lessons-similar-lesson-list .lesson-other-lessons-similar-lesson-list-item .lesson-other-lessons-similar-lesson-list-item-inner .lesson-other-lessons-similar-lesson-list-item-thumbnail {
  width: 53%;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  -webkit-box-align-self: flex-start;
  -webkit-align-self: flex-start;
  align-self: flex-start;
}
@media screen and (max-width: 1000px) {
  .lesson-wrap .lesson-other-lessons .lesson-other-lessons-similar-lesson .lesson-other-lessons-similar-lesson-list .lesson-other-lessons-similar-lesson-list-item .lesson-other-lessons-similar-lesson-list-item-inner .lesson-other-lessons-similar-lesson-list-item-thumbnail {
    width: 100%;
  }
}
.lesson-wrap .lesson-other-lessons .lesson-other-lessons-similar-lesson .lesson-other-lessons-similar-lesson-list .lesson-other-lessons-similar-lesson-list-item .lesson-other-lessons-similar-lesson-list-item-inner .lesson-other-lessons-similar-lesson-list-item-thumbnail>img {
  width: 100%;
  height: auto;
}
.lesson-wrap .lesson-other-lessons .lesson-other-lessons-similar-lesson .lesson-other-lessons-similar-lesson-list .lesson-other-lessons-similar-lesson-list-item .lesson-other-lessons-similar-lesson-list-item-inner .lesson-other-lessons-similar-lesson-list-item-thumbnail .lesson-other-lessons-similar-lesson-list-item-thumbnail-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(51,51,51,0.65);
}
.lesson-wrap .lesson-other-lessons .lesson-other-lessons-similar-lesson .lesson-other-lessons-similar-lesson-list .lesson-other-lessons-similar-lesson-list-item .lesson-other-lessons-similar-lesson-list-item-inner .lesson-other-lessons-similar-lesson-list-item-thumbnail .lesson-other-lessons-similar-lesson-list-item-thumbnail-overlay > p {
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -0.5em 0 0 -1.5em;
  font-weight: 600;
}
.lesson-wrap .lesson-other-lessons .lesson-other-lessons-similar-lesson .lesson-other-lessons-similar-lesson-list .lesson-other-lessons-similar-lesson-list-item .lesson-other-lessons-similar-lesson-list-item-inner .lesson-other-lessons-similar-lesson-list-item-text {
  box-flex: 1;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin-left: 10px;
}
@media screen and (max-width: 1000px) {
  .lesson-wrap .lesson-other-lessons .lesson-other-lessons-similar-lesson .lesson-other-lessons-similar-lesson-list .lesson-other-lessons-similar-lesson-list-item .lesson-other-lessons-similar-lesson-list-item-inner .lesson-other-lessons-similar-lesson-list-item-text {
    margin-left: 0;
    margin-top: 10px;
  }
}
.lesson-wrap .lesson-other-lessons .lesson-other-lessons-similar-lesson .lesson-other-lessons-similar-lesson-list .lesson-other-lessons-similar-lesson-list-item .lesson-other-lessons-similar-lesson-list-item-inner .lesson-other-lessons-similar-lesson-list-item-text .lesson-other-lessons-similar-lesson-list-item-title {
  font-size: 1rem;
  font-weight: 600;
}
.lesson-wrap .lesson-other-lessons .lesson-other-lessons-similar-lesson .lesson-other-lessons-similar-lesson-list .lesson-other-lessons-similar-lesson-list-item .lesson-other-lessons-similar-lesson-list-item-inner .lesson-other-lessons-similar-lesson-list-item-point-description {
  width: 100%;
  margin-top: 10px;
}
.lesson-wrap .lesson-other-lessons .lesson-other-lessons-recommended-course {
  margin-bottom: 20px;
}
.lesson-wrap .lesson-other-lessons .lesson-other-lessons-recommended-course h1 {
  font-weight: 400;
}
.lesson-wrap .lesson-other-lessons .lesson-other-lessons-recommended-course .lesson-other-lessons-recommended-course-main {
  padding: 20px;
}
.lesson-wrap .lesson-other-lessons .lesson-other-lessons-recommended-course .lesson-other-lessons-recommended-course-main .lesson-other-lessons-recommended-course-thumbnail {
  display: block;
}
.lesson-wrap .lesson-other-lessons .lesson-other-lessons-recommended-course .lesson-other-lessons-recommended-course-main .lesson-other-lessons-recommended-course-thumbnail > img {
  width: 100%;
  height: auto;
}
.lesson-wrap .lesson-other-lessons .lesson-other-lessons-recommended-course .lesson-other-lessons-recommended-course-main .lesson-other-lessons-recommended-course-name {
  display: block;
  margin-top: 10px;
  font-weight: 600;
  text-decoration: underline;
}
.lesson-wrap .lesson-other-lessons .lesson-other-lessons-recommended-course .lesson-other-lessons-recommended-course-main .lesson-other-lessons-recommended-course-point-description {
  margin-top: 10px;
}
.lesson-wrap .lesson-other-lessons .lesson-other-lessons-subscribe-buttons h1 {
  padding: 20px;
  text-align: center;
  font-size: 0.8rem;
}
.lesson-wrap .lesson-other-lessons .lesson-other-lessons-subscribe-buttons .lesson-other-lessons-subscribe-buttons-main {
  padding: 0 20px 60px 20px;
  width: 100%;
  min-width: 240px;
  text-align: center;
  background-image: url("../images/premium/seito_right.png");
  background-repeat: no-repeat;
  background-position: center bottom -25px;
  background-size: 80px;
}
.footer-lesson-text {
  position: fixed;
  border-bottom: 8px solid #ffed78;
  width: 100%;
  bottom: 0;
  left: 0;
  z-index: 100;
  pointer-events: none;
}
.footer-lesson-text .footer-lesson-text-inner {
  position: relative;
}
.footer-lesson-text .footer-lesson-text-inner > a {
  color: #333;
  font-weight: 600;
  pointer-events: all;
}
.footer-lesson-text .footer-lesson-text-btn {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 12px 23px 12px 20px;
  background-color: #ffed78;
  border-radius: 8px 8px 0 0;
  box-shadow: 0 -1px 1px #ffec64;
}
@media screen and (max-width: 768px) {
  .footer-lesson-text .footer-lesson-text-btn {
    right: 10px;
  }
}
.footer-lesson-text .footer-lesson-text-btn > img {
  width: 20px;
  height: 20px;
  margin: 0 3px 2px 0;
}
.course-description {
  display: box;
  display: -webkit-box;
  display: flexbox;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  flex-wrap: wrap;
}
@media screen and (max-width: 768px) {
  .course-description {
    margin-top: 30px;
  }
}
.course-description .course-description-main {
  box-flex: 2;
  -webkit-box-flex: 2;
  -webkit-flex: 2;
  -ms-flex: 2;
  flex: 2;
  padding: 20px;
  position: relative;
}
.course-description .course-description-main .course-description-course-type-badge.basic {
  color: #fff;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 600;
  display: inline;
  vertical-align: middle;
  padding: 4px 8px;
  margin-right: 6px;
  background-color: #77d91c;
}
.course-description .course-description-main .course-description-course-type-badge.advance {
  color: #fff;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 600;
  display: inline;
  vertical-align: middle;
  padding: 4px 8px;
  margin-right: 6px;
  background-color: #ffa500;
}
.course-description .course-description-main .course-description-main-text {
  margin-top: 20px;
  margin-bottom: 70px;
  word-break: break-all;
}
@media screen and (max-width: 768px) {
  .course-description .course-description-main .course-description-main-text {
    font-size: 0.8rem;
  }
}
.course-description .course-description-main .course-description-progress {
  text-align: center;
  position: absolute;
  width: 100%;
  padding-right: 40px;
  bottom: 20px;
}
.course-description .course-description-main .course-description-progress .course-start-btn {
  width: 300px;
  max-width: 100%;
  padding: 17px 0;
}
@media screen and (max-width: 1000px) {
  .course-description .course-description-main .course-description-progress .course-start-btn {
    width: 240px;
  }
}
@media screen and (max-width: 768px) {
  .course-description .course-description-main .course-description-progress .course-start-btn {
    width: 300px;
  }
}
.course-description .course-description-image {
  width: 600px;
  height: auto;
  margin: auto 0;
}
@media screen and (max-width: 1000px) {
  .course-description .course-description-image {
    width: 450px;
    padding-left: 20px;
  }
}
@media screen and (max-width: 768px) {
  .course-description .course-description-image {
    width: 100%;
    padding-left: 0;
  }
}
.course-description .course-description-image img {
  width: 100%;
  height: auto;
}
.course-share-button ul {
  margin: 20px 0;
  margin-left: auto;
}
.course-lesson-list-container {
  position: relative;
  overflow: visible;
  padding: 20px 40px;
  margin-bottom: 30px;
}
.course-lesson-list-container::after {
  content: '';
  position: absolute;
  background-color: transparent;
  width: 0;
  height: 0;
  left: 50%;
  margin-left: -40px;
  border: 40px solid transparent;
  border-bottom: 40px solid #fff;
  top: -80px;
}
@media screen and (max-width: 768px) {
  .course-lesson-list-container {
    padding: 10px;
  }
  .course-lesson-list-container::after {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .mypage-wrap {
    padding-top: 30px;
  }
}
.mypage-wrap > h1 {
  margin-bottom: 15px;
}
.mypage-row {
  display: box;
  display: -webkit-box;
  display: flexbox;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  -webkit-box-flex-direction: row-reverse;
  -webkit-flex-direction: row-reverse;
  flex-direction: row-reverse;
}
@media screen and (max-width: 1000px) {
  .mypage-row {
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    flex-wrap: wrap;
    display: block;
  }
}
.mypage-row .mypage-course-history {
  box-flex: 2;
  -webkit-box-flex: 2;
  -webkit-flex: 2;
  -ms-flex: 2;
  flex: 2;
}
.mypage-row .mypage-course-history .mypage-course-history-item {
  box-shadow: 0 1px 2px #ccc8b7;
  margin-bottom: 20px;
}
.mypage-row .mypage-course-history .mypage-course-history-item.mypage-course-history-item-is-completed {
  background-image: url("../images/complete-medal.png");
  background-repeat: no-repeat;
  background-size: 110px;
  background-position: left 20px top 0;
}
@media screen and (max-width: 768px) {
  .mypage-row .mypage-course-history .mypage-course-history-item.mypage-course-history-item-is-completed {
    background-image: none;
  }
}
.mypage-row .mypage-course-history .mypage-course-history-item .mypage-course-history-item-header {
  text-align: center;
  padding: 20px;
}
.mypage-row .mypage-course-history .mypage-course-history-item .mypage-course-history-item-header h2 {
  color: #333;
  font-weight: bold;
  margin-bottom: 12px;
}
.mypage-row .mypage-course-history .mypage-course-history-item .mypage-course-history-item-header .mypage-course-history-item-progress-count {
  display: block;
  margin: 0 auto;
  max-width: 320px;
}
.mypage-row .mypage-course-history .mypage-course-history-item .mypage-course-history-item-header .mypage-course-history-item-progress-count .mypage-course-history-item-progress-count-bar {
  margin-bottom: 10px;
}
.mypage-row .mypage-course-history .mypage-course-history-item .mypage-course-history-item-header .mypage-course-history-item-progress-count .mypage-course-history-item-progress-count-number {
  width: 100%;
  text-align: center;
}
.mypage-row .mypage-course-history .mypage-course-history-item .mypage-course-history-item-lessons {
  padding: 0 20px;
  margin-bottom: 20px;
  border-top: 2px solid #fbf7ed;
  border-bottom: 2px solid #fbf7ed;
}
.mypage-row .mypage-course-history .mypage-course-history-item .mypage-course-history-item-lessons .mypage-course-history-item-lessons-item {
  display: box;
  display: -webkit-box;
  display: flexbox;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  -webkit-box-align-items: center;
  -webkit-align-items: center;
  align-items: center;
}
.mypage-row .mypage-course-history .mypage-course-history-item .mypage-course-history-item-lessons .mypage-course-history-item-lessons-item:last-of-type .mypage-course-history-item-lessons-item-main {
  border-bottom: 0;
}
.mypage-row .mypage-course-history .mypage-course-history-item .mypage-course-history-item-lessons .mypage-course-history-item-lessons-item .mypage-course-history-item-lessons-item-status-icon {
  margin-right: 10px;
  font-size: 1.6rem;
}
.mypage-row .mypage-course-history .mypage-course-history-item .mypage-course-history-item-lessons .mypage-course-history-item-lessons-item .mypage-course-history-item-lessons-item-status-icon > img {
  width: 20px;
  height: 20px;
}
.mypage-row .mypage-course-history .mypage-course-history-item .mypage-course-history-item-lessons .mypage-course-history-item-lessons-item .mypage-course-history-item-lessons-item-main {
  display: box;
  display: -webkit-box;
  display: flexbox;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  -webkit-box-align-items: center;
  -webkit-align-items: center;
  align-items: center;
  width: 100%;
  padding: 20px 0;
  border-bottom: 1px dashed #ddd;
}
.mypage-row .mypage-course-history .mypage-course-history-item .mypage-course-history-item-lessons .mypage-course-history-item-lessons-item .mypage-course-history-item-lessons-item-main > a {
  width: 100%;
  display: block;
  font-weight: 600;
  text-decoration: underline;
}
.mypage-row .mypage-course-history .mypage-course-history-item .mypage-course-history-item-lessons .mypage-course-history-item-lessons-item .mypage-course-history-item-lessons-item-main .mypage-course-history-item-lessons-item-is-completed {
  width: 6em;
  text-align: right;
  color: #ccc;
}
.mypage-row .mypage-course-history .mypage-course-history-item .mypage-course-history-item-lessons .mypage-course-history-item-lessons-item .mypage-course-history-item-lessons-item-main .mypage-course-history-item-lessons-item-is-completed > strong {
  color: #333;
}
@media screen and (max-width: 768px) {
  .mypage-row .mypage-course-history .mypage-course-history-item .mypage-course-history-item-lessons .mypage-course-history-item-lessons-item .mypage-course-history-item-lessons-item-main .mypage-course-history-item-lessons-item-is-completed {
    display: none;
  }
}
.mypage-row .mypage-course-history .mypage-course-history-item .mypage-course-history-item-lessons-item-details-link {
  text-align: right;
  padding: 0 20px 20px 20px;
}
.mypage-row .mypage-course-history .mypage-course-history-item .mypage-course-history-item-lessons-item-details-link > a {
  font-weight: bold;
  text-decoration: underline;
}
.mypage-row .mypage-course-history .mypage-course-history-no-course {
  width: 100%;
  background-color: #fff;
  padding: 20px;
  border: 2px dotted #ddd;
  text-align: center;
  border-radius: 8px;
}
.mypage-row .mypage-sidebar {
  width: 280px;
  min-width: 280px;
  margin-left: 20px;
}
@media screen and (max-width: 1000px) {
  .mypage-row .mypage-sidebar {
    width: 100%;
    margin-left: 0;
    margin-bottom: 20px;
  }
}
.mypage-row .mypage-sidebar .mypage-sidebar-my-status {
  padding: 20px;
}
.mypage-row .mypage-sidebar .mypage-sidebar-my-status .mypage-sidebar-my-status-profile {
  display: box;
  display: -webkit-box;
  display: flexbox;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  -webkit-box-align-items: center;
  -webkit-align-items: center;
  align-items: center;
  border-bottom: 1px dashed #ddd;
  padding-bottom: 20px;
}
.mypage-row .mypage-sidebar .mypage-sidebar-my-status .mypage-sidebar-my-status-profile .mypage-sidebar-my-status-profile-image {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  box-shadow: 0 2px 2px rgba(221,221,221,0.4);
  background-repeat: no-repeat;
  background-size: cover;
}
.mypage-row .mypage-sidebar .mypage-sidebar-my-status .mypage-sidebar-my-status-profile .mypage-sidebar-my-status-profile-name {
  font-weight: bold;
  margin-left: 10px;
}
.mypage-row .mypage-sidebar .mypage-sidebar-my-status .mypage-sidebar-my-status-progress-count {
  padding-top: 20px;
}
.mypage-row .mypage-sidebar .mypage-sidebar-my-status .mypage-sidebar-my-status-progress-count > dt {
  font-size: 0.8rem;
}
.mypage-row .mypage-sidebar .mypage-sidebar-my-status .mypage-sidebar-my-status-progress-count > dd {
  text-align: right;
  font-weight: 600;
  line-height: 1.6rem;
}
.mypage-row .mypage-sidebar .mypage-sidebar-my-status .mypage-sidebar-my-status-progress-count > dd:not(:last-of-type) {
  margin-bottom: 10px;
}
.mypage-row .mypage-sidebar .mypage-sidebar-my-status .mypage-sidebar-my-status-progress-count > dd .mypage-sidebar-my-status-progress-count-complete-course {
  display: inline;
  font-size: 1.6rem;
  color: #77d91c;
  vertical-align: bottom;
}
.mypage-row .mypage-sidebar .mypage-sidebar-my-status .mypage-sidebar-my-status-progress-count > dd .mypage-sidebar-my-status-progress-count-complete-lesson {
  display: inline;
  font-size: 1.6rem;
  color: #77d91c;
  vertical-align: bottom;
}
@media screen and (max-width: 768px) {
  .making-description {
    margin-top: 30px;
  }
}
.making-description .making-description-image {
  position: relative;
  height: 320px;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
}
@media screen and (max-width: 414px) {
  .making-description .making-description-image {
    height: 140px;
  }
}
.making-description .making-description-image .making-description-image-button-container {
  display: box;
  display: -webkit-box;
  display: flexbox;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  position: absolute;
  right: 10px;
  top: 10px;
  width: 32px;
}
.making-description .making-description-image .making-description-image-button-container > a {
  display: block;
  position: relative;
  box-sizing: content-box;
  width: 24px;
  height: 24px;
  background-color: #fff;
  padding: 4px;
  border-radius: 8px;
  box-shadow: 0 4px 4px rgba(51,51,51,0.4);
}
.making-description .making-description-image .making-description-image-button-container > a > img {
  position: absolute;
  top: 4px;
  left: 4px;
}
.making-description .making-description-title {
  width: 100%;
  padding: 5px 30px;
  background-color: #ffed78;
}
@media screen and (max-width: 414px) {
  .making-description .making-description-title {
    padding: 5px 10px;
  }
}
.making-description .making-description-title > h1 {
  font-size: 1.6rem;
  font-weight: 600;
}
@media screen and (max-width: 414px) {
  .making-description .making-description-title > h1 {
    font-size: 1.25rem;
  }
}
.making-description .making-description-detail {
  display: box;
  display: -webkit-box;
  display: flexbox;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  width: 100%;
}
@media screen and (max-width: 768px) {
  .making-description .making-description-detail {
    -webkit-box-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
  }
}
.making-description .making-description-detail .making-description-profile {
  display: box;
  display: -webkit-box;
  display: flexbox;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  width: 50%;
}
@media screen and (max-width: 768px) {
  .making-description .making-description-detail .making-description-profile {
    width: 100%;
  }
}
.making-description .making-description-detail .making-description-profile .making-description-profile-image {
  margin: 30px;
  width: 84px;
  height: 84px;
}
@media screen and (max-width: 414px) {
  .making-description .making-description-detail .making-description-profile .making-description-profile-image {
    margin: 10px;
    width: 24px;
    height: 24px;
  }
}
.making-description .making-description-detail .making-description-profile .making-description-profile-image > img {
  width: 100%;
  border-radius: 50%;
}
.making-description .making-description-detail .making-description-profile .making-description-profile-content {
  box-flex: 1;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin: 30px 0;
  padding-right: 30px;
  border-right: 1px dashed rgba(153,153,153,0.5);
}
@media screen and (max-width: 768px) {
  .making-description .making-description-detail .making-description-profile .making-description-profile-content {
    border-right: 0px;
  }
}
@media screen and (max-width: 414px) {
  .making-description .making-description-detail .making-description-profile .making-description-profile-content {
    margin: 10px 0;
    padding-right: 10px;
  }
}
.making-description .making-description-detail .making-description-profile .making-description-profile-content .making-description-profile-block {
  display: box;
  display: -webkit-box;
  display: flexbox;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
}
.making-description .making-description-detail .making-description-profile .making-description-profile-content .making-description-profile-block .making-description-profile-name {
  line-height: 28px;
  font-size: 1rem;
  font-weight: 600;
}
.making-description .making-description-detail .making-description-profile .making-description-profile-content .making-description-profile-block .making-description-profile-sns {
  display: box;
  display: -webkit-box;
  display: flexbox;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
}
.making-description .making-description-detail .making-description-profile .making-description-profile-content .making-description-profile-block .making-description-profile-sns > a {
  margin-left: 5px;
}
.making-description .making-description-detail .making-description-profile .making-description-profile-content > p {
  padding-top: 20px;
  font-size: 0.8rem;
}
@media screen and (max-width: 768px) {
  .making-description .making-description-detail .making-description-profile .making-description-profile-content > p {
    padding-top: 10px;
  }
}
.making-description .making-description-detail .making-description-download {
  width: 50%;
  padding: 30px;
  text-align: center;
  font-weight: 600;
}
@media screen and (max-width: 768px) {
  .making-description .making-description-detail .making-description-download {
    width: auto;
    margin: 0 20px;
    padding: 15px 0;
    border-top: 1px dashed rgba(153,153,153,0.5);
  }
}
@media screen and (max-width: 768px) {
  .making-description .making-description-detail .making-description-download .br-pc {
    display: none;
  }
}
.making-description .making-description-detail .making-description-download .br-sp {
  display: none;
}
@media screen and (max-width: 414px) {
  .making-description .making-description-detail .making-description-download .br-sp {
    display: block;
  }
}
.making-description .making-description-detail .making-description-download h2 {
  font-size: 1rem;
  font-weight: 600;
}
.making-description .making-description-detail .making-description-download h2 > strong {
  color: #ff962b;
  display: inline;
}
.making-description .making-description-detail .making-description-download .making-description-download-links a {
  display: inline-block;
  margin: 10px;
  text-decoration: underline;
}
.making-description .making-description-detail .making-description-download .making-description-download-note {
  font-size: 0.8rem;
  font-weight: 400;
  color: #333;
}
.making-description .making-description-detail .making-description-download .download-btn {
  margin-top: 15px;
}
@media screen and (max-width: 414px) {
  .making-description .making-description-detail .making-description-download .download-btn {
    font-size: 0.8rem;
  }
}
.making-introduce {
  margin-bottom: 20px;
  padding-bottom: 20px;
}
.making-introduce > h1 {
  font-weight: 600;
}
.making-introduce > p {
  padding: 0 20px;
  font-size: 0.8rem;
}
.making-introduce .making-introduce-profile {
  display: box;
  display: -webkit-box;
  display: flexbox;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
}
.making-introduce .making-introduce-profile .making-introduce-profile-image {
  padding: 20px;
}
@media screen and (max-width: 414px) {
  .making-introduce .making-introduce-profile .making-introduce-profile-image {
    padding: 10px;
  }
}
.making-introduce .making-introduce-profile .making-introduce-profile-image > img {
  width: 84px;
  height: 84px;
  border-radius: 50%;
}
.making-introduce .making-introduce-profile .making-introduce-profile-content {
  margin: 30px 0;
}
@media screen and (max-width: 768px) {
  .making-introduce .making-introduce-profile .making-introduce-profile-content {
    border-right: 0px;
  }
}
@media screen and (max-width: 414px) {
  .making-introduce .making-introduce-profile .making-introduce-profile-content {
    margin: 10px 0;
    padding-right: 10px;
  }
}
.making-introduce .making-introduce-profile .making-introduce-profile-content .making-description-profile-block {
  font-weight: 600;
}
.making-introduce .making-introduce-profile .making-introduce-profile-content .making-description-profile-block .making-introduce-profile-sns {
  display: box;
  display: -webkit-box;
  display: flexbox;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  margin-top: 10px;
}
.making-introduce .making-introduce-profile .making-introduce-profile-content .making-description-profile-block .making-introduce-profile-sns > a {
  margin-right: 5px;
}
.making-introduce .making-introduce-workspace {
  margin: 0 20px;
  padding-top: 20px;
  border-top: 1px dashed rgba(153,153,153,0.5);
}
.making-introduce .making-introduce-workspace > h2 {
  margin-bottom: 10px;
  font-size: 1rem;
  color: #999;
}
.making-introduce .making-introduce-workspace .making-introduce-workspace-detail {
  font-size: 0.8rem;
}
.making-introduce .making-introduce-workspace .making-introduce-workspace-detail > dt {
  float: left;
  width: 40%;
  margin-top: 10px;
  font-weight: 600;
}
.making-introduce .making-introduce-workspace .making-introduce-workspace-detail > dd {
  float: left;
  width: 60%;
  margin-top: 10px;
}
.making-introduce .making-introduce-workspace .making-introduce-workspace-detail > dd:before {
  content: ':';
}