@charset "utf-8";
.header-01 {
  background: linear-gradient(to right, #501ee0, #310292);
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  position: relative;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
}
.header-01-link-01 {
  display: none;
}
.header-01-title {
  width: 150px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: -3px 0 0;
}
.header-01-title-sub {
  display: none;
}
.header-01-link-02 {
  display: none;
}
.header-02 {
  display: flex;
  align-items: center;
  width: 100%;
  height: 65px;
  padding: 0 35px;
  position: absolute;
  top: 0;
  left: 0;
}
.header-02-logo {
  width: 176px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.header-03 {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 120px;
  background-color: #fff;
}
.header-03-inner {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  position: relative;
}
.header-03-logo {
  margin: 0 0 0 -5px;
  z-index: 2;
  position: relative;
}
.header-03-logo-link {
  display: block;
  width: 55px;
  height: 34px;
  background-image: url("../img/member/logo-icon.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.nav-01-header .header-03-logo-link {
  background-image: url("../img/member/logo-icon-blue.svg");
}
.header-03-logo-image {
  display: none;
}
.header-03-title {
  width: 150px;
  height: 19px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}
.header-03-title-sub {
  display: none;
}
.header-03-title-logo {
  display: none;
}
.header-03-title-link {
  display: block;
  width: 100%;
  height: 100%;
  background-image: url("../img/member/logo-color.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.nav-01-header .header-03-title-link {
  background-image: url("../img/member/logo-blue.svg");
}
.header-03-toggle {
  width: 25px;
  height: 25px;
  background-image: url("../img/site/common/icon-menu.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  cursor: pointer;
  z-index: 2;
  position: relative;
}
.nav-01-header .header-03-toggle {
  background-image: url("../img/site/common/icon-close.png");
}
.screen-01 {
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,0.8);
  cursor: pointer;
  z-index: 9;
  width: 100%;
  height: 100%;
  display: none;
}
.nav-01 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  background-color: #0312aa;
  display: none;
}
.nav-01-spacer {
  height: 50px;
  background-color: #0312aa;
}
.nav-01-menu {
  border-top: 1px #5c69e7 solid;
}
.nav-01-menu-item {
  border-bottom: 1px #5c69e7 solid;
}
.nav-01-menu-link {
  height: 50px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  position: relative;
  color: #fff;
  font-size: 15px;
  background-image: url("../icon/site/skyblue/arrow-right.png");
  background-position: right 20px center;
  background-repeat: no-repeat;
  background-size: 8px;
}
.nav-01-right {
  border-bottom: 1px #5c69e7 solid;
  display: flex;
  justify-content: center;
  padding: 20px;
}
.nav-01-right-acc {
  display: none;
}
.nav-01-button-01 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 140px;
  height: 30px;
  border-radius: 15px;
  font-size: 12px;
  color: #fff;
  font-weight: 700;
  background-color: #36b1ff;
  transition: background-color .4s;
}
.nav-01-button-01:hover {
  background-color: #501ee0;
}
.nav-01-sns {
  border-bottom: 1px #5c69e7 solid;
  padding: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.nav-01-sns-twitter {
  display: block;
  width: 21px;
  height: 17px;
  position: relative;
}
.nav-01-sns-twitter:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background-image: url("../icon/site/white/twitter.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: opacity .4s;
}
.nav-01-sns-instagram {
  display: block;
  width: 21px;
  height: 21px;
  position: relative;
}
.nav-01-sns-instagram:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background-image: url("../icon/site/white/instagram.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: opacity .4s;
}
.nav-01-sns-facebook {
  display: block;
  width: 11px;
  height: 22px;
  position: relative;
  margin: 0 auto;
}
.nav-01-sns-facebook:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background-image: url("../icon/site/white/facebook.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: opacity .4s;
}
.nav-01-sns-youtube {
  display: block;
  width: 21px;
  height: 15px;
  position: relative;
}
.nav-01-sns-youtube:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background-image: url("../icon/site/white/youtube.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: opacity .4s;
}
.nav-02 {
  height: 70px;
  background: linear-gradient(to left, #501ee0, #310292);
  padding: 0 20px;
  display: flex !important;
  justify-content: center;
  margin: 0 auto;
}
.nav-02-item {
  width: 25%;
  max-width: 100px;
}
.nav-02-link {
  display: block;
  height: 70px;
  color: #fff;
  font-size: 11px;
  text-align: center;
  padding: 45px 0 0;
  background-repeat: no-repeat;
  background-position: center top 10px;
  background-size: 28px;;
}
@media screen and (max-width: 374px){
  .nav-02-link {
    font-size: 10px;
  }
}
.nav-02-link[href="/member/top"] {
  background-image: url("../icon/member/grad/graph.svg");
}
.nav-02-link[href="/member/lecture"] {
  background-image: url("../icon/member/grad/movie.svg");
  background-position: center top 14px;
}
.nav-02-link[href="/member/news"] {
  background-image: url("../icon/member/grad/bell.svg");
}
.nav-02-link[href="/member/faq"] {
  background-image: url("../icon/member/grad/faq.svg");
}

.footer-01 {
  background-color: #f9f9f9;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer-01-copy {
  font-size: 10px;
  color: #0312aa;
}
.footer-02 {
  background-color: #fff;
  color: #0312aa;
}
.footer-02-copy {
  margin: 0 auto;
  max-width: 1020px;
  height: 35px;
  padding: 0 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.foter-02-copy-text {
  font-size: 10px;
}
.footer-02-sp-box {
  height: 110px;
  display: flex !important;
  justify-content: center;
}
.footer-02-sp-btn {
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 0 20px;
  width: 160px;
  height: 50px;
  border-radius: 25px;
  background-color: #fff;
  position: relative;
  transition: color .4s;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #0312aa;
}
.footer-02-sp-btn:after {
  content: "";
  position: absolute;
  top: 0;
  right: 20px;
  z-index: 2;
  width: 8px;
  height: 100%;
  background-image: url("../icon/site/blue/arrow-up-blue.png");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 8px;
  transition: opacity .4s;
}

.main-01 {
  margin: 50px 0 0;
  padding: 20px 0;
  min-height: calc(100vh - 85px);
}
.main-02 {
  background: linear-gradient(.25turn, #501ee0, #3d09a8);
  width: 100vw;
  height: 100vh;
}
.main-03 {
  margin: 120px 0 0;
  min-height: calc(100vh - 265px);
}

.nologin-01 {
  margin: 0 auto;
  padding: 0 30px;
  max-width: 480px;
}
.nologin-01-logo-image {
  width: 126px;
}
.nologin-01-title {
  font-size: 20px;
  font-weight: 600;
  color: #0312aa;
  margin: 10px 0 0;
  text-align: center;
}
.nologin-01-text {
  font-size: 13px;
  color: #0312aa;
  margin: 10px 0 0;
  text-align: center;
  display: none;
}
.nologin-01-link {
  margin: 40px 0 0;
  text-align: center;
  font-size: 13px;
  color: #0312aa;
}
.nologin-01-link + .nologin-01-link {
  margin: 20px 0 0;
}

.form-01 {
  margin: 20px 0 0;
}
.form-01-text {
  font-size: 13px;
  color: #0312aa;
  margin: 10px 0 0;
}
.form-01-text + .form-01-text {
  margin: 20px 0 0;
}
.form-01-error {
  color: #ff364d;
  font-size: 13px;
}
.form-01-item {
  margin: 20px 0 0;
}
.form-01-item:first-child {
  margin: 0;
}
.form-01-label {
  font-size: 15px;
  color: #0312aa;
  margin: 0 0 5px;
}
.form-01-input {
  font-size: 15px;
  line-height: 1;
  padding: 10px 15px;
  background-color: #f3f3f3;
  width: 100%;
  border-radius: 5px;
}
.form-01-checkbox {
  margin: 20px 0 0;
  display: inline-block;
}
.form-01-checkbox:first-child {
  margin: 0;
}
.form-01-checkbox-input {
  display: none;
}
.form-01-checkbox-text {
  padding: 0 0 0 30px;
  font-size: 13px;
  line-height: 18px;
  position: relative;
  color: #0312aa;
}
.form-01-checkbox-text:before {
  content: "";
  width: 16px;
  height: 16px;
  background-color: #f3f3f3;
  border: 1px #ccc solid;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  z-index: 1;
}
.form-01-checkbox-input:checked + .form-01-checkbox-text:after {
  content: "";
  width: 18px;
  height: 18px;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  z-index: 2;
  background-image: url("../icon/member/black/check.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 12px;
}
.form-01-btnbox {
  text-align: center;
  margin: 40px 0 0;
}
.button-01 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 60px;
  height: 60px;
  border-radius: 30px;
  font-size: 14px;
  color: #0312aa;
  font-weight: 700;
  background-color: #edf0fb;
  position: relative;
  transition: background .4s;
  width: 100%;
}
.button-01:before {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  z-index: 2;
  width: 17px;
  height: 17px;
  background-image: url("../icon/site/skyblue/arrow-sign-right.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: opacity .4s;
}
.button-01:after {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  z-index: 1;
  width: 17px;
  height: 17px;
  background-image: url("../icon/site/white/arrow-sign-right.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.button-02 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 60px;
  height: 50px;
  border-radius: 30px;
  font-size: 12px;
  color: #0312aa;
  font-weight: 700;
  background-color: #aab7ff;
  position: relative;
  transition: background .4s, color .4s;
  cursor: pointer;
  width: 240px;
}
.button-02:before {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  z-index: 2;
  width: 17px;
  height: 17px;
  background-image: url("../icon/site/white/arrow-sign-right.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: opacity .4s;
}
.button-02:after {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  z-index: 1;
  width: 17px;
  height: 17px;
  background-image: url("../icon/site/blue/arrow-sign-right.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: opacity .4s;
  opacity: 0;
}
.button-03 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 30px;
  height: 50px;
  border-radius: 40px;
  font-size: 13px;
  color: #0312aa;
  font-weight: 700;
  background-color: #aab7ff;
  position: relative;
  transition: background .4s, color .4s;
  cursor: pointer;
  width: 200px;
}
.button-03:before {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  z-index: 2;
  width: 15px;
  height: 15px;
  background-image: url("../icon/site/white/arrow-sign-right.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: opacity .4s;
}
.button-04 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 60px;
  height: 50px;
  border-radius: 30px;
  font-size: 12px;
  color: #0312aa;
  font-weight: 700;
  background-color: #aab7ff;
  position: relative;
  transition: background .4s, color .4s;
  cursor: pointer;
  width: 240px;
}
.button-04:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
  z-index: 2;
  width: 17px;
  height: 17px;
  background-image: url("../icon/site/white/arrow-sign-left.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: opacity .4s;
}
.button-04:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
  z-index: 1;
  width: 17px;
  height: 17px;
  background-image: url("../icon/site/blue/arrow-sign-left.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: opacity .4s;
  opacity: 0;
}


.link-01 {
  display: inline-block;
  line-height: 1.5;
  font-weight: 600;
  position: relative;
  color: #36b1ff;
}
.link-01:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  border-bottom: 1px #36b1ff solid;
  transition: opacity .4s;
}

.section-01 {
  padding: 40px 0 60px;
}
.section-inner-01 {
  margin: 0 auto;
  max-width: 1020px;
  padding: 0 30px;
}

.bg-gradation-01 {
  background: linear-gradient(to right, #3d09a8 0%,#501ee0 100%);
}
.bg-gradation-02 {
  background: linear-gradient(to left, #3d09a8 0%,#501ee0 100%);
}
.bg-blue-01 {
  background-color: #0312aa;
}
.bg-light-blue-01 {
  background-color: #edf0fb;
}
.bg-purple-01 {
  background-color: #501ee0;
}
.bg-white-01 {
  background-color: #fff;
}

.title-01 {
  font-size: 28px;
  line-height: 1.35;
  color: #0312aa;
  font-weight: 700;
  text-align: center;
  padding: 0 0 30px;
  position: relative;
}
.bg-purple-01 .title-01 {
  color: #fff;
}
.bg-blue-01 .title-01 {
  color: #fff;
}
.title-01:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  border-bottom: 1px #5955b0 solid;
}
.bg-purple-01 .title-01:after {
  border-bottom: 1px #83ccfa solid;
}
.bg-blue-01 .title-01:after {
  border-bottom: 1px #83ccfa solid;
}
.title-01-sub {
  font-size: 13px;
  font-weight: 400;
  color: #c6c9f7;
  margin: 0 0 20px;
  display: block;
  font-family: helvetica, sans-serif;
}
.title-01-small {
  font-size: 16px;
  margin: 0 0 0 10px;
}

.recognition-01 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 575px;
  height: 575px;
  border: 12px #36b1ff solid;
  border-radius: 100%;
  overflow: hidden;
}
.recognition-01-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 12px transparent solid;
  border-radius: 100%;
}
.recognition-01-camera {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #333;
  border-radius: 100%;
  z-index: 1;
}
.recognition-01-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  z-index: 1;
  opacity: 0;
}
.recognition-01-frame {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 327px;
  height: 327px;
  background-image: url("../img/admin/camera-frame.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.recognition-01-camera-sample {
  background-image: url("../_data/dummy/login.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.recognition-01-wait {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  color: #fff;
  font-size: 32px;
  display: none;
}
.recognition-01--progress {
  animation: recognitionProgress1 4s infinite linear;
}
.recognition-01--progress .recognition-01-wait {
  display: block;
  animation: recognitionProgress2 5s infinite linear;
}

@keyframes recognitionProgress1 {
  0% {
    border-color: #36b1ff;
  }
  50% {
    border-color: #501ee0;
  }
  100% {
    border-color: #36b1ff;
  }
}
@keyframes recognitionProgress2 {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.faq-01 {
  margin: 50px 0 0;
  color: #0312aa;
}
.faq-01 + .faq-01 {
  margin: 50px 0 0;
}
.faq-01-q {
  padding: 10px 0 0 65px;
  position: relative;
  font-size: 15px;
  line-height: 25px;
  font-weight: 600;
  min-height: 45px;
}
.faq-01-q-num {
  font-family: 'Ubuntu Condensed', sans-serif;
  color: #fff;
  background-color: #0312aa;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 45px;
  height: 45px;
  border-radius: 100%;
  font-size: 16px;
}
.faq-01-a {
  margin: 20px 0 0;
  padding: 25px 20px 25px 75px;
  background-color: #fff;
  font-size: 14px;
  line-height: 25px;
  min-height: 75px;
  position: relative;
}
.faq-01-a-num {
  font-family: 'Ubuntu Condensed', sans-serif;
  color: #fff;
  background-color: #c6c9f7;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 15px;
  left: 15px;
  width: 45px;
  height: 45px;
  border-radius: 100%;
  font-size: 16px;
  font-weight: 600;
}

.news-01 {
  margin: 50px auto 0;
  width: calc(100vw - 60px);
  max-width: 480px;
  border-top: 1px #cecece solid;
}
.news-01-item {
  border-bottom: 1px #cecece solid;
}
.news-01-item-nohit {
  text-align: center;
  padding: 15px 20px;
}
.news-01-link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 15px 20px 15px 0;
  background-image: url("../icon/site/skyblue/arrow-right.png");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 7px;
}
.news-01-date {
  order: 2;
  font-size: 11px;
  color: #0312aa;
}
.news-01-category {
  order: 1;
  width: 50px;
  height: 15px;
  border-radius: 3px;
  font-size: 10px;
  color: #fff;
  font-weight: 600;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 10px 0 0;
}
.news-01-category-news {
  background-color: #a6b6f2;
}
.news-01-category-media {
  background-color: #586ce7;
}
.news-01-category-event {
  background-color: #5ca7fc;
}
.news-01-text {
  order: 3;
  margin: 10px 0 0;
  width: 100%;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
  color: #0312aa;
}
.news-01-pager {
  margin: 40px 0 0 -8px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.news-01-pager-item {
  display: inline-block;
  width: 32px;
  height: 24px;
  line-height: 14px;
  font-size: 12px;
  padding: 5px 0;
  border-radius: 12px;
  background-color: #edf0fb;
  text-align: center;
  color: #6a6d7e;
  transition: background-color .4s, color .4s;
  cursor: pointer;
  margin: 0 0 0 8px;
  font-weight: 600;
}
.news-01-pager--active {
  background-color: #36b1ff;
  color: #fff;
  pointer-events: none;
}
.news-01-detail {
  margin: 50px auto 0;
  padding: 0 20px;
}
.news-01-detail-inner {
  background-color: #fff;
  padding: 25px;
}
.news-01-detail-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.news-01-detail-category {
  width: 55px;
  height: 15px;
  color: #fff;
  font-size: 11px;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 3px;
}
.news-01-detail-date {
  font-size: 13px;
  color: #c6c9f7;
}
.news-01-detail-title {
  color: #0312aa;
  font-size: 23px;
  font-weight: 600;
  margin: 20px 0 0;
}
.news-01-detail-wrap {
  margin: 30px 0 0;
  color: #0312aa;
}
.news-01-detail-wrap p {
  font-size: 14px;
  line-height: 1.6;
  margin: 20px 0 0;
}
.news-01-detail-wrap p:first-child {
  margin: 0;
}
.news-01-detail-wrap img {
  margin: 20px auto 0;
}
.news-01-detail-nav {
  margin: 30px 0 0;
  display: flex;
  justify-content: center;
}
.news-01-detail-nav-item {
  margin: 0 10px;
}
.news-01-detail-nav-link {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 30px;
  border-radius: 15px;
  background-color: #fff;
  color: #6a6d7e;
  font-size: 12px;
  font-weight: 600;
  padding: 0 0 1px;
}

.member-top {
  margin: 50px auto 0;
  max-width: 1020px;
  padding: 0 15px;
  display: flex;
  flex-wrap: wrap;
  align-content: stretch;
}
.member-top-inner {
  padding: 20px 20px;
  background-color: #fff;
}
.member-top-left {
  width: 100%;
}
.member-top-left .member-top-inner {
}
.member-top-right {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  margin: 20px 0 0;
}
.member-top-title-01 {
  background-color: #f9f9fd;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 35px;
  font-size: 15px;
  color: #0312aa;
  font-weight: 600;
}
.member-top-title-02 {
  font-size: 13px;
  color: #0312aa;
}
.member-top-icon {
  display: block;
  height: 100px;
  background-image: url("../icon/member/blue/driver-icon.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  flex-grow: 1;
  flex-shrink: 1;
}
.member-top-table {
  color: #0312aa;
  border-top: 1px #efefef solid;
  width: 100%;
  flex-shrink: 0;
  flex-flow: 0;
  margin: 20px 0 0;
}
.member-top-table-head {
  font-size: 11px;
  padding: 15px 20px 15px 10px;
  border-bottom: 1px #efefef solid;
  width: 90px;
}
.member-top-table-data {
  font-size: 12px;
  font-weight: 600;
  word-break: break-all;
  padding: 15px 10px 15px 0;
  border-bottom: 1px #efefef solid;
}
.member-top-graph {
  width: 100%;
}
.member-top-graph .member-top-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.member-top-graph-image {
  order: 1;
  width: 100%;
  margin: 20px 0 0;
}
.member-top-graph-image-wrap {
  width: 165px;
  height: 165px;
  border-radius: 100%;
  position: relative;
  overflow: hidden;
  margin: 0 auto;
}
.member-top-graph-image-item {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.member-top-graph-item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  order: 2;
  margin: 40px 0 0;
  width: 50%;
}
.member-top-graph-item:nth-child(3) {
  padding: 0 0 0 20px;
}
.member-top-graph-list {
  padding: 0 0 5px;
}
.member-top-graph-list-item {
  padding: 0 0 0 18px;
  position: relative;
  font-size: 13px;
  color: #0312aa;
  font-weight: 600;
  margin: 20px 0 0;
}
.member-top-graph-list-item:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border-radius: 100%;
}
.member-top-graph-list-item:nth-child(1):before {
  background-color: #0312aa;
}
.member-top-graph-list-item:nth-child(2):before {
  background-color: #36b1ff;
}
.member-top-graph-list-item:nth-child(3):before {
  background-color: #f2f2f2;
}
.member-top-graph-step {
  font-size: 80px;
  line-height: 1;
  font-weight: 700;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  color: #0312aa;
  font-family: 'Ubuntu Condensed', sans-serif;
}
.member-top-graph-step-sub {
  font-size: 14px;
  margin: 0 0 8px 15px;
  font-family: 'Noto Sans JP';
}
.member-top-right-item {
  width: 100%;
  margin: 20px 0 0;
}
.member-top-right-item .member-top-inner {
  display: flex;
}
.member-top-right-item-box {
  width: 50%;
  padding: 0 25px 0 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.member-top-right-item-box + .member-top-right-item-box {
  padding: 0 0 0 20px;
}
.member-top-fraction {
  position: relative;
  color: #0312aa;
  font-family: 'Ubuntu Condensed', sans-serif;
  font-size: 50px;
  font-weight: 700;
  line-height: 1;
  display: flex;
  justify-content: space-between;
  margin: 15px 0 0;
  padding: 0 25px 0 0;
}
.member-top-fraction:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%) rotate(-45deg);
  transform-origin: center;
  width: 80%;
  margin: 3px 0 0 -10px;
  border-bottom: 1px #0312aa solid;
}
@media screen and (max-width:374px){
  .member-top-fraction:before {
    margin: 3px 0 0 -5px;
  }
}

.member-top-fraction-top {
  width: 50px;
  text-align: center;
  flex-shrink: 0;
  flex-grow: 0;
}
.member-top-fraction-bottom {
  width: 50px;
  text-align: center;
  padding: 35px 0 0;
  flex-shrink: 0;
  flex-grow: 0;
}
.member-top-right-item-step {
  font-size: 60px;
  line-height: 1;
  font-weight: 700;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  color: #0312aa;
  font-family: 'Ubuntu Condensed', sans-serif;
  margin: 0 0 -2px;
}
.member-top-right-item-step-sub {
  font-size: 14px;
  margin: 0 0 8px 15px;
  font-family: 'Noto Sans JP';
}
.member-top-nav {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.member-top-nav-item {
  width: 100%;
  margin: 20px 0 0;
}
.member-top-nav-title {
  height: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  color: #fff;
  background-color: #0312aa;
}
.member-top-nav-link {
  display: block;
  transition: color .4s;
  color: #0312aa;
  font-size: 12px;
  line-height: 15px;
  text-align: center;
  padding: 100px 25px 25px;
  background-color: #fff;
  position: relative;
}
.member-top-nav-link:before {
  content: "";
  position: absolute;
  top: 25px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  width: 60px;
  height: 60px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 60px;
}
.member-top-nav-link:after {
  content: "";
  position: absolute;
  top: 25px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: 60px;
  height: 60px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 60px;
  transition: opacity .4s;
}
.member-top-nav-link:hover:after {
  opacity: 0;
}
.member-top-nav-link[href="/member/lecture"]:before {
  background-image: url("../icon/member/grad/movie.svg");
}
.member-top-nav-link[href="/member/news"]:before {
  background-image: url("../icon/member/grad/bell.svg");
}
.member-top-nav-link[href="/member/faq"]:before {
  background-image: url("../icon/member/grad/faq.svg");
}
.member-top-nav-link[href="/member/lecture"]:after {
  background-image: url("../icon/member/blue/movie.svg");
}
.member-top-nav-link[href="/member/news"]:after {
  background-image: url("../icon/member/blue/bell.svg");
}
.member-top-nav-link[href="/member/faq"]:after {
  background-image: url("../icon/member/blue/faq.svg");
}
.member-top-nav-link:hover {
  color: #4fd4ff;
}

.tab-01 {
  margin: 40px -10px 0;
}
.tab-01-header {
  display: flex;
  justify-content: center;
}
.tab-01-header-item {
  width: 50%;
  padding: 10px 0;
  text-align: center;
  border-bottom: 4px #d4d5da solid;
  cursor: pointer;
  transition: border-bottom .4s;
}
.tab-01-header-item-inner {
  padding: 0 0 0 20px;
  font-size: 15px;
  font-weight: 600;
  color: #8d91a5;
  transition: color .4s;
  position: relative;
}
.tab-01-header-item-inner:after {
  content: "";
  background-image: url("../icon/site/skyblue/triangle-down.png");
  background-position: left center;
  background-repeat: no-repeat;
  background-size: 10px;
  transition: opacity .4s;
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 100%;
  z-index: 1;
}
.tab-01-header-item-inner:before {
  content: "";
  background-image: url("../icon/site/lightblue/triangle-down.png");
  background-position: left center;
  background-repeat: no-repeat;
  background-size: 10px;
  transition: opacity .4s;
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 100%;
  z-index: 2;
}
.tab-01-header-item--active {
  pointer-events: none;
  border-bottom: 4px #0312aa solid;
}
.tab-01-header-item--active .tab-01-header-item-inner {
  color: #0312aa;
}
.tab-01-header-item--active .tab-01-header-item-inner:before {
  background-image: url("../icon/site/blue/triangle-down.png");
}
.tab-01-wrap {
  margin: 50px 0 0;
}
.tab-01-item {
  display: none;
}
.tab-01-item--active {
  display: block;
}


.lecture-list-01 {
  margin: 50px 0 0;
  color: #0312aa;
}
.lecture-list-01-heading {
}
.lecture-list-01-heading-title {
  font-size: 20px;
  line-height: 30px;
  font-weight: 600;
  padding: 5px 0 0 50px;
  background-image: url("../icon/member/blue/movie.svg");
  background-position: left bottom;
  background-repeat: no-repeat;
  background-size: 40px;
}
.lecture-list-01-heading-title-sub {
  font-size: 15px;
}
.lecture-list-01-heading-sub {
  font-size: 14px;
  margin: 20px 0 0;
}
.lecture-list-01-inner {
  margin: 30px -10px 0;
  display: flex;
  flex-wrap: wrap;
}
.lecture-list-01-item {
  padding: 20px 10px 0;
  width: 50%;
}
@media screen and (max-width:374px){
  .lecture-list-01-item {
    width: 100%;
  }
}
.lecture-list-01-link {
  display: block;
}
.lecture-list-01-image {
  position: relative;
}
.lecture-list-01-box {
  background-color: #fff;
  position: relative;
}
.lecture-list-01-box-heading {
  justify-content: space-between;
  background-color: #f9f9fd;
  padding: 5px 10px;
}
.lecture-list-01-title {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
}
.lecture-list-01-num {
  width: 16px;
  height: 16px;
  font-family: 'Ubuntu Condensed', sans-serif;
  font-weight: 400;
  font-size: 11px;
  border-radius: 5px;
  background-color: #0312aa;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 10px 0 0;
}
.lecture-list-01-contents {
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  height: 70px;
}
.lecture-list-01-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lecture-list-01-tag {
  padding: 5px 10px 10px;
  display: flex;
  align-items: center;
  background-color: #fff;
  position: relative;
}
.lecture-list-01-tag:after {
  content: "";
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 16px;
  height: 16px;
  background-color: #0312aa;
  border-radius: 100%;
  background-image: url("../icon/site/white/arrow-right.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 6px;
  transition: background .4s;
}
.lecture-list-01-link:hover .lecture-list-01-tag:after {
  background-color: #7085f0;
}
.lecture-list-01-tag > * + * {
  margin: 0 0 0 5px;
}
.lecture-list-01-tag-item-01 {
  width: 50px;
  height: 16px;
  background-color: #d392f4;
  color: #fff;
  font-size: 10px;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.lecture-list-01-tag-item-02 {
  width: 50px;
  height: 16px;
  border: 1px #d392f4 solid;
  color: #d392f4;
  font-size: 10px;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.lecture-list-01-tag-item-03 {
  width: 50px;
  height: 16px;
  background-color: #36b1ff;
  color: #fff;
  font-size: 10px;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.lecture-detail-01 {
  margin: 50px -10px 0;
  display: flex;
  flex-wrap: wrap;
}
.lecture-detail-01-left {
  width: 100%;
}
.lecture-detail-01-image {
  position: relative;
}
.lecture-detail-01-image:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 50px;
  height: 50px;
  background-image: url("../img/site/lecture/play-white.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.8;
}
.lecture-detail-01-image-item {
  width: 100%;
  position: relative;
  z-index: 1;
}
.lecture-detail-01-contact-box {
  margin: 20px 0 0;
  text-align: center;
  display: none;
}
.lecture-detail-01-contact-box--active .lecture-detail-01-contact-box {
  display: block;
}
.lecture-detail-01-contact-btn {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  background-color: #fff;
  height: 35px;
  padding: 0 10px;
  transition: background .4s, color .4s;
  border-radius: 8px;
  color: #0312aa;
}
.lecture-detail-01-contact-btn:hover {
  background-color: #36b1ff;
  color: #fff;
}
.lecture-detail-01-contact-text {
  padding: 0 0 0 20px;
  font-size: 12px;
  font-weight: 600;
  position: relative;
}
.lecture-detail-01-contact-text:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  margin: 1px 0 0;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  background-image: url("../icon/member/blue/contact.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 2;
  transition: opacity .4s;
}
.lecture-detail-01-right {
  margin: 50px 0 0;
  width: 100%;
}
.lecture-detail-01-title {
  display: flex;
  justify-content: space-between;
  border-bottom: 4px #ced4f3 solid;
  padding: 0 0 10px;
}
.lecture-detail-01-title-text {
  color: #0312aa;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  display: flex;
}
.lecture-detail-01-title-num {
  width: 24px;
  height: 24px;
  font-family: 'Ubuntu Condensed', sans-serif;
  font-weight: 600;
  font-size: 16px;
  border-radius: 5px;
  background-color: #0312aa;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 3px 10px 0 0;
  flex-shrink: 0;
  flex-grow: 0;
}
.lecture-detail-01-title-text-inner {
}
.lecture-detail-01-tag {
  display: flex;
  flex-shrink: 0;
  flex-grow: 0;
}
.lecture-detail-01-tag-item-01 {
  width: 60px;
  height: 20px;
  background-color: #d392f4;
  color: #fff;
  font-size: 12px;
  line-height: 1;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  vertical-align: middle;
  margin: 5px 0 0 5px;
}
.lecture-detail-01-tag-item-02 {
  width: 60px;
  height: 20px;
  border: 1px #d392f4 solid;
  color: #d392f4;
  font-size: 12px;
  line-height: 1;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  vertical-align: middle;
  margin: 5px 0 0 5px;
}
.lecture-detail-01-tag-item-03 {
  width: 60px;
  height: 20px;
  background-color: #36b1ff;
  color: #fff;
  font-size: 11px;
  line-height: 1;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  vertical-align: middle;
  margin: 5px 0 0 5px;
}
.lecture-detail-01-contents-title {
  font-size: 16px;
  font-weight: 600;
  color: #0312aa;
  margin: 20px 0 0;
}
.lecture-detail-01-contents-list {
  border-top: 1px #c6c6c6 solid;
  margin: 10px 0 0;
}
.lecture-detail-01-contents-item {
  font-size: 12px;
  color: #0312aa;
  border-bottom: 1px #c6c6c6 solid;
  padding: 5px 0;
}
.lecture-detail-01-info {
  margin: 0 -10px;
  display: flex;
  flex-wrap: wrap;
}
.lecture-detail-01-info-item {
  width: 50%;
  padding: 20px 10px 0;
  margin: 0;
  font-size: 12px;
  color: #0312aa;
}
.lecture-detail-01-info-title {
  font-weight: 600;
}
.lecture-detail-01-info-text {
  padding: 0;
  margin: 0;
}
.lecture-detail-01-play-box {
  margin: 30px 0 0;
  width: 100%;
  text-align: center;
}
.lecture-detail-01-play-load {
  animation: recognitionProgress2 5s infinite linear;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
}
.lecture-detail-01-play-error {
  font-weight: 600;
  margin: 0 0 20px;
  font-size: 14px;
}
@media screen and (max-width:374px){
  .lecture-detail-01-play-error {
    font-size: 12px;
  }
}

.movie-play {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.lecture-movie {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  display: none;
}
.lecture-movie-screen {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.9);
}
.lecture-movie-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  z-index: 2;
}
.lecture-movie-header {
  display: flex;
  justify-content: flex-end;
  padding: 10px;
  max-width: 500px;
  margin: 0 auto;
  align-items: flex-end;
}
.lecture-movie-title {
  color: #fff;
  font-size: 14px;
  line-height: 1;
  margin: 15px 0 0;
  text-align: center;
}
.lecture-movie-close {
  width: 20px;
  height: 20px;
  background-image: url("../img/site/common/icon-close.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  cursor: pointer;
  transition: opacity .4s;
}
.lecture-movie-close:hover {
  opacity: 0.6;
}
.lecture-movie-view {
  position: relative;
  max-width: 480px;
  margin: 0 auto;
}
.lecture-movie-view-screen {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.lecture-movie--error .lecture-movie-view-screen {
  pointer-events: none;
}
.lecture-movie-item {
  width: 100%;
  height: auto;
  position: relative;
  z-index: 1;
}
.lecture-movie-info {
  margin: 15px auto 0;
  padding: 0 10px;
  max-width: 480px;
  display: flex;
  align-items: center;
}
.lecture-movie-current {
  color: #fff;
  font-size: 13px;
  line-height: 1;
  flex-shrink: 0;
  flex-grow: 0;
  margin: 0 10px 0 0;
  width: 40px;
}
.lecture-movie-time {
  color: #fff;
  font-size: 13px;
  line-height: 1;
  flex-shrink: 0;
  flex-grow: 0;
  margin: 0 0 0 10px;
  width: 35px;
}
.lecture-movie-bar {
  width: 100%;
  height: 5px;
  background-color: #7b7b7b;
  display: flex;
}
.lecture-movie-bar > * {
  background-color: #36b1ff;
  display: inline-block;
  height: 5px;
}
.lecture-movie-bar-0p {  width: 0%; }
.lecture-movie-bar-1p {  width: 1%; }
.lecture-movie-bar-2p {  width: 2%; }
.lecture-movie-bar-3p {  width: 3%; }
.lecture-movie-bar-4p {  width: 4%; }
.lecture-movie-bar-5p {  width: 5%; }
.lecture-movie-bar-6p {  width: 6%; }
.lecture-movie-bar-7p {  width: 7%; }
.lecture-movie-bar-8p {  width: 8%; }
.lecture-movie-bar-9p {  width: 9%; }
.lecture-movie-bar-10p {  width: 10%; }
.lecture-movie-bar-11p {  width: 11%; }
.lecture-movie-bar-12p {  width: 12%; }
.lecture-movie-bar-13p {  width: 13%; }
.lecture-movie-bar-14p {  width: 14%; }
.lecture-movie-bar-15p {  width: 15%; }
.lecture-movie-bar-16p {  width: 16%; }
.lecture-movie-bar-17p {  width: 17%; }
.lecture-movie-bar-18p {  width: 18%; }
.lecture-movie-bar-19p {  width: 19%; }
.lecture-movie-bar-20p {  width: 20%; }
.lecture-movie-bar-21p {  width: 21%; }
.lecture-movie-bar-22p {  width: 22%; }
.lecture-movie-bar-23p {  width: 23%; }
.lecture-movie-bar-24p {  width: 24%; }
.lecture-movie-bar-25p {  width: 25%; }
.lecture-movie-bar-26p {  width: 26%; }
.lecture-movie-bar-27p {  width: 27%; }
.lecture-movie-bar-28p {  width: 28%; }
.lecture-movie-bar-29p {  width: 29%; }
.lecture-movie-bar-30p {  width: 30%; }
.lecture-movie-bar-31p {  width: 31%; }
.lecture-movie-bar-32p {  width: 32%; }
.lecture-movie-bar-33p {  width: 33%; }
.lecture-movie-bar-34p {  width: 34%; }
.lecture-movie-bar-35p {  width: 35%; }
.lecture-movie-bar-36p {  width: 36%; }
.lecture-movie-bar-37p {  width: 37%; }
.lecture-movie-bar-38p {  width: 38%; }
.lecture-movie-bar-39p {  width: 39%; }
.lecture-movie-bar-40p {  width: 40%; }
.lecture-movie-bar-41p {  width: 41%; }
.lecture-movie-bar-42p {  width: 42%; }
.lecture-movie-bar-43p {  width: 43%; }
.lecture-movie-bar-44p {  width: 44%; }
.lecture-movie-bar-45p {  width: 45%; }
.lecture-movie-bar-46p {  width: 46%; }
.lecture-movie-bar-47p {  width: 47%; }
.lecture-movie-bar-48p {  width: 48%; }
.lecture-movie-bar-49p {  width: 49%; }
.lecture-movie-bar-50p {  width: 50%; }
.lecture-movie-bar-51p {  width: 51%; }
.lecture-movie-bar-52p {  width: 52%; }
.lecture-movie-bar-53p {  width: 53%; }
.lecture-movie-bar-54p {  width: 54%; }
.lecture-movie-bar-55p {  width: 55%; }
.lecture-movie-bar-56p {  width: 56%; }
.lecture-movie-bar-57p {  width: 57%; }
.lecture-movie-bar-58p {  width: 58%; }
.lecture-movie-bar-59p {  width: 59%; }
.lecture-movie-bar-60p {  width: 60%; }
.lecture-movie-bar-61p {  width: 61%; }
.lecture-movie-bar-62p {  width: 62%; }
.lecture-movie-bar-63p {  width: 63%; }
.lecture-movie-bar-64p {  width: 64%; }
.lecture-movie-bar-65p {  width: 65%; }
.lecture-movie-bar-66p {  width: 66%; }
.lecture-movie-bar-67p {  width: 67%; }
.lecture-movie-bar-68p {  width: 68%; }
.lecture-movie-bar-69p {  width: 69%; }
.lecture-movie-bar-70p {  width: 70%; }
.lecture-movie-bar-71p {  width: 71%; }
.lecture-movie-bar-72p {  width: 72%; }
.lecture-movie-bar-73p {  width: 73%; }
.lecture-movie-bar-74p {  width: 74%; }
.lecture-movie-bar-75p {  width: 75%; }
.lecture-movie-bar-76p {  width: 76%; }
.lecture-movie-bar-77p {  width: 77%; }
.lecture-movie-bar-78p {  width: 78%; }
.lecture-movie-bar-79p {  width: 79%; }
.lecture-movie-bar-80p {  width: 80%; }
.lecture-movie-bar-81p {  width: 81%; }
.lecture-movie-bar-82p {  width: 82%; }
.lecture-movie-bar-83p {  width: 83%; }
.lecture-movie-bar-84p {  width: 84%; }
.lecture-movie-bar-85p {  width: 85%; }
.lecture-movie-bar-86p {  width: 86%; }
.lecture-movie-bar-87p {  width: 87%; }
.lecture-movie-bar-88p {  width: 88%; }
.lecture-movie-bar-89p {  width: 89%; }
.lecture-movie-bar-90p {  width: 90%; }
.lecture-movie-bar-91p {  width: 91%; }
.lecture-movie-bar-92p {  width: 92%; }
.lecture-movie-bar-93p {  width: 93%; }
.lecture-movie-bar-94p {  width: 94%; }
.lecture-movie-bar-95p {  width: 95%; }
.lecture-movie-bar-96p {  width: 96%; }
.lecture-movie-bar-97p {  width: 97%; }
.lecture-movie-bar-98p {  width: 98%; }
.lecture-movie-bar-99p {  width: 99%; }
.lecture-movie-bar-100p {  width: 100%; }
.lecture-movie-error {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  padding: 120px 20px 30px;
  width: 280px;
  background-color: #fff;
  border-radius: 10px;
  background-image: url("../img/member/movie-error.png");
  background-position: center top 30px;
  background-repeat: no-repeat;
  background-size: 80px;
  text-align: center;
  display: none;
}
.lecture-movie-error-title {
  margin: 25px 0 0;
  font-weight: 600;
  font-size: 18px;
  color: #0312aa;
}
.lecture-movie-error-text {
  font-size: 12px;
  margin: 20px 0;
  color: #0312aa;
  text-align: left;
}
.lecture-movie--error .lecture-movie-error-btn {
  pointer-events: none;
}
.lecture-movie-login {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  padding: 100px 20px 30px;
  width: 280px;
  background-color: #fff;
  border-radius: 10px;
  background-image: url("../img/site/top/img-top-06.png");
  background-position: center top 30px;
  background-repeat: no-repeat;
  background-size: 70px;
  text-align: center;
  display: none;
}
.lecture-movie-login-title {
  margin: 20px 0 0;
  font-weight: 600;
  font-size: 18px;
  color: #0312aa;
}
.lecture-movie-login-text {
  font-size: 12px;
  margin: 15px 0;
  color: #0312aa;
}
.lecture-movie-login .lecture-movie-login-input {
  font-size: 14px;
}
.lecture-movie-login-input + .lecture-movie-login-input {
  margin: 20px 0 0;
}
.lecture-movie-login-btn {
  margin: 30px 0 0;
  width: 200px;
  font-size: 12px;
  height: 50px;
  cursor: pointer;
}
.lecture-movie-camera {
  position: fixed;
  top: 20px;
  left: 20px;
  transform: translateX(-1000px);
  z-index: 100;
  z-index: 99;
  width: 70px;
  height: 70px;
  max-width: 20vw;
  max-height: 35vw;
  background-color: #333;
  opacity: 1;
}
.lecture-movie-camera-view {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 2;
}
.lecture-movie-camera-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 1;
}
.lecture-movie-camera-frame {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 75%;
  height: 75%;
  z-index: 2;
  background-image: url("../img/member/camera-frame.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.text-01 {
  margin: 50px 0 0;
  color: #0312aa;
  line-height: 2;
  font-size: 13px;
}
@media screen and (max-width:374px){
  .text-01 {
    font-size: 11px;
  }
}
.table-02 {
  margin: 40px 0 -10px;
  width: 100%;
  font-size: 12px;
  color: #0312aa;
}
.table-02-head {
  padding: 10px 0 0;
  font-weight: 600;
  display: inline-block;
  width: 100%;
}
.table-02-head-top-pt {
  padding: 10px 0 0; 
  vertical-align: top;
}
.table-02-head-top-npt {
  vertical-align: top;
}
.table-02-data {
  padding: 10px 0;
  display: inline-block;
  width: 100%;
}

.tag-01 {
  display: flex;
  align-items: center;
}
.tag-01-item {
  font-size: 10px;
  line-height: 1;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 16px;
  color: #fff;
  background-color: #36b1ff;
  margin: 0 0 0 10px;
  font-weight: 400;
  padding: 0 0 1px;
}

.input-fix-text-01 {
  width: 100%;
  padding: 10px;
  font-size: 13px;
  background-color: #fff;
  border-radius: 3px;
  color: #0312aa;
  font-weight: 600;
}
.input-text-01 {
  width: 100%;
  padding: 10px;
  font-size: 13px;
  background-color: #fff;
  border-radius: 3px;
}
.input-text-01::placeholder {
  color: #99a9b6;
}
.input-textarea-01 {
  width: 100%;
  height: 150px;
  padding: 10px;
  font-size: 13px;
  background-color: #fff;
  border-radius: 3px;
}

.button-box-01 {
  margin: 50px 0 0;
  display: flex;
  justify-content: center;
}
.button-box-02 {
  margin: 50px 0 0;
  display: flex;
  justify-content: center;
}
.button-box-03 {
  margin: 40px 0 0;
  display: flex;
  flex-wrap: wrap;
}
.button-box-03-item {
  text-align: center;
  width: 100%;
}