@charset "UTF-8";
.background {
  background: linear-gradient(to bottom, rgba(238, 238, 238, 0.7), rgba(250, 250, 250, 0.7));
}

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  font-size: 62.5%;
  font-family: "Noto Sans JP", sans-serif;
  font-family: "Roboto", "Noto Sans JP", sans-serif;
}
@media screen and (max-width: 56.25em) {
  html {
    font-size: 55%;
  }
}

body {
  box-sizing: border-box;
  font-weight: 300;
  color: #454545;
  max-width: 1300px;
  margin: 0 auto;
  min-height: 100vh;
}
@media screen and (max-width: 500px) {
  body {
    position: relative;
    padding-bottom: 5rem !important;
    box-sizing: border-box;
  }
}

h1 {
  font-size: 4rem;
  line-height: 0.8;
}
@media screen and (max-width: 37.5em) {
  h1 {
    font-size: 3rem;
  }
}

h2 {
  font-size: 3.5rem;
  line-height: 1.8;
}
@media screen and (max-width: 37.5em) {
  h2 {
    font-size: 2.5rem;
  }
}

h3 {
  font-size: 3rem;
  line-height: 1.8;
}
@media screen and (max-width: 37.5em) {
  h3 {
    font-size: 2rem;
  }
}

h4 {
  font-size: 2.5rem;
  line-height: 1.8;
}

h5 {
  font-size: 2rem;
  line-height: 1.8;
}
h5:not(:last-child) {
  margin-bottom: 1.5rem;
}
@media screen and (max-width: 37.5em) {
  h5 {
    font-size: 1.8rem;
  }
}

p {
  font-size: 1.6rem;
  line-height: 1.5;
  font-weight: 400;
}
p:not(:last-child) {
  margin-bottom: 1.5rem;
}

a {
  text-decoration: none;
  color: inherit;
  align-items: center;
  box-sizing: border-box;
  font-size: 1.6rem;
  width: 100%;
}

.actions-on-past-lectures p a {
  justify-content: center;
}

img {
  object-fit: cover;
  width: 100%;
}

li {
  font-size: 1.6rem;
  line-height: 1.7;
  font-weight: 400;
}

hr {
  max-width: 100rem;
}

form p {
  display: flex;
  flex-direction: column;
}

.ck-content ol, .ck-content ul, .overview-content ol, .overview-content ul, .each-dates ol, .each-dates ul {
  margin-left: 2.5rem;
  font-size: 1.6rem;
  line-height: 1.5;
}
.ck-content ol li span, .ck-content ul li span, .overview-content ol li span, .overview-content ul li span, .each-dates ol li span, .each-dates ul li span {
  font-size: 1.6rem;
  line-height: 1.5;
  font-weight: 400;
}
.ck-content blockquote, .overview-content blockquote, .each-dates blockquote {
  border-left: 5px solid #ccc;
  font-style: italic;
  margin-left: 0;
  margin-right: 0;
  overflow: hidden;
  padding-left: 1.5em;
  padding-right: 1.5em;
}

span {
  font-size: 1rem;
}

a {
  font-size: 1.6rem;
  line-height: 1.5;
  font-weight: 400;
}
a.inline {
  display: inline;
}

.each-dates a {
  border-bottom: #ccc 1px solid;
}

details {
  font-size: 1.6rem;
  line-height: 1.5;
  font-style: bold;
}

label {
  font-size: 1.4rem;
  line-height: 1.2;
  display: inline-block;
  margin-bottom: 0.5rem;
}

.error-message {
  color: #A91D3A;
}

.message {
  color: #41B06E;
}

.hide {
  display: none;
}

.section-padding {
  padding: 10rem 10rem;
}
@media screen and (max-width: 37.5em) {
  .section-padding {
    padding: 5.5rem 5rem;
  }
}

.w-100 {
  width: 100% !important;
}

.u-flex-row {
  display: flex;
}

.u-flex-row-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.u-font-normal {
  font-size: 1.6rem;
}

.u-no-list-style {
  list-style: none;
}

.u-round-border {
  border-radius: 10px;
}

.u-round-white-border {
  background-color: #FFFFFF;
  border-radius: 10px;
  margin-right: 3rem;
}

.u-text-center {
  text-align: center;
}

.u-text-right {
  text-align: right;
}

.u-text-left {
  text-align: left;
}

.u-text-underline {
  text-decoration: underline;
}

.u-margin-bottom-zero {
  margin-bottom: 0rem;
}

.u-margin-bottom-small {
  margin-bottom: 1rem;
}

.u-margin-bottom-medium {
  margin-bottom: 2.5rem;
}

.u-margin-bottom-large {
  margin-bottom: 4rem;
}

.u-margin-top-small {
  margin-top: 1rem;
}

.u-margin-top-medium {
  margin-top: 2.5rem;
}

.u-margin-top-large {
  margin-top: 4rem;
}

.u-margin-right-small {
  margin-right: 1rem;
}

.u-margin-right-medium {
  margin-right: 2.5rem;
}

.u-margin-right-large {
  margin-right: 4rem;
}

.u-margin-left-small {
  margin-left: 1rem;
}

.u-margin-left-medium {
  margin-left: 2.5rem;
}

.u-margin-left-large {
  margin-left: 4rem;
}

.u-line-height-zero {
  line-height: 0;
}

.u-padding-medium {
  padding: 2.5rem;
}

.u-padding-large {
  padding: 3rem;
}

.u-border-bottom {
  border-bottom: 1px solid #454545;
}

.u-font-bold {
  font-weight: 700;
}

.u-font-very-bold {
  font-weight: 900;
}

.u-under-line {
  text-decoration: underline;
}

.u-border-bottom {
  border-bottom: 1px solid #454545;
}

.u-border-bottom-white {
  border-bottom: 1px solid #FFFFFF;
}

.btn {
  background-color: #454545;
  color: #FFFFFF;
  border: none;
  border-radius: 5px;
  transition: all 0.2s;
  width: fit-content;
  font-weight: 700;
  box-sizing: border-box;
  cursor: pointer;
  outline: inherit;
  height: 4rem;
  white-space: nowrap;
  font-size: 1.6rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.btn a {
  font-weight: 700;
  border-bottom: none;
}
.btn--large {
  font-size: 2rem;
  padding: 2.5rem 2.5rem;
}
.btn--medium {
  font-size: 1.6rem;
  padding: 0.3rem 2rem;
}
.btn--small {
  font-size: 1.3rem;
  padding: 0.5rem 1rem;
}
.btn--hover {
  cursor: pointer;
}
.btn--hover:hover {
  transform: translateY(-1.3px);
  box-shadow: 0 0rem 1rem rgba(69, 69, 69, 0.2);
}
.btn--hover:active {
  transform: translateY(-1.3px);
  box-shadow: 0 0rem 1rem rgba(69, 69, 69, 0.2);
}
.btn--back {
  background-color: #FFFFFF;
  color: #454545;
  background-color: #FFFFFF;
  border-radius: 2px;
  padding: 1.5rem;
  box-shadow: 0 0rem 1rem rgba(69, 69, 69, 0.2);
  border-radius: 5px;
  font-size: 1.6rem;
  padding: 0.3rem 2rem;
}

select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: white;
}

input, .login > input, select {
  width: 25rem;
  height: 4rem;
  border-radius: 5px;
  border-color: transparent;
  border-width: 0.2rem;
  padding: 1rem;
  box-shadow: 0 0rem 1rem rgba(69, 69, 69, 0.2);
  transition: all 0.2s;
  font-size: 1.6rem;
  color: #454545;
}
input:focus, .login > input:focus, select:focus {
  outline: none;
  border-color: #454545;
  border-width: 0.25rem;
  transition: all 0.2s;
}
input[type=radio], .login > input[type=radio], select[type=radio] {
  appearance: none; /* デフォルトのスタイルを削除 */
  border-radius: 50%;
  border: 0.25rem solid #454545;
  vertical-align: -5px;
  outline: none;
  width: 3rem;
  height: 3rem;
}
input[type=radio]::before, .login > input[type=radio]::before, select[type=radio]::before { /* ラジオボタンの内側の● */
  display: block;
  content: "";
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: #454545;
  transform: translate(4px, 4px) scale(0);
  transform-origin: center;
  transition: all 0.3s;
}
input[type=radio]:checked::before, .login > input[type=radio]:checked::before, select[type=radio]:checked::before {
  transform: translate(-0.73rem, -0.75rem) scale(1);
}
input[type=checkbox], .login > input[type=checkbox], select[type=checkbox] {
  appearance: none; /* デフォルトのスタイルを削除 */
  vertical-align: -2px;
  border: 0.2rem solid #454545;
}
input[type=checkbox]::before, .login > input[type=checkbox]::before, select[type=checkbox]::before { /* チェックボックスの内側の✓ */
  display: block;
  content: "✓";
  line-height: 0;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 600;
  color: #454545;
  opacity: 0;
  transform: translate(-0.6rem, 0rem);
  transition: all 0.3s;
}
input[type=checkbox]:checked::before, .login > input[type=checkbox]:checked::before, select[type=checkbox]:checked::before {
  opacity: 1;
}
input[type=checkbox][id=id_remember], .login > input[type=checkbox][id=id_remember], select[type=checkbox][id=id_remember] {
  width: 1rem;
  height: 1rem;
  border: 0.05rem solid #454545;
}

textarea {
  width: 30rem;
  height: 12rem;
  border-radius: 5px;
  border-color: transparent;
  border-width: 0.2rem;
  padding: 1rem;
  box-shadow: 0 0rem 1rem rgba(69, 69, 69, 0.2);
  transition: all 0.2s;
  font-size: 1.6rem;
  color: #454545;
}

summary {
  position: relative;
  display: block;
  padding-left: 20px; /* アイコン分の余白 */
  cursor: pointer;
}

/* Chrome、Safari */
summary::-webkit-details-marker {
  display: none;
}

/* 疑似要素でアイコンを表示 */
summary:before,
summary:after {
  content: "";
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}

summary:before {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background-color: transparent;
}

summary:after {
  left: 6px;
  width: 5px;
  height: 5px;
  border: 4px solid transparent;
  border-left: 5px solid #454545;
  box-sizing: border-box;
  transition: 0.1s;
}

/* オープン時 */
details[open] summary:after {
  transform: rotate(90deg); /* 90度回転 */
  left: 4px;
  top: 5px;
}

/* オープン時にアニメーションを設定 */
details[open] .details-content {
  animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
  0% {
    opacity: 0; /* 透明 */
    transform: translateY(-10px); /* 上から表示 */
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
.draft {
  font-size: 1.6rem;
  padding: 0.3rem 0.8rem;
  color: #FFFFFF;
  background-color: #454545;
  border-radius: 3px;
  margin-right: 0.5rem;
}

.open {
  font-size: 1.6rem;
  padding: 0.3rem 0.8rem;
  color: #FFFFFF;
  background-color: #0E46A3;
  border-radius: 3px;
  margin-right: 0.5rem;
}

.close {
  font-size: 1.6rem;
  padding: 0.3rem 0.8rem;
  color: #FFFFFF;
  background-color: #454545;
  border-radius: 3px;
  margin-right: 0.5rem;
}

.live-lecture {
  font-size: 1.6rem;
  padding: 0.3rem 0.8rem;
  color: #FFFFFF;
  background-color: #41B06E;
  border-radius: 3px;
  margin-right: 0.5rem;
}

.on-demand-lecture {
  font-size: 1.6rem;
  padding: 0.3rem 0.8rem;
  color: #FFFFFF;
  background-color: #9B3922;
  border-radius: 3px;
  margin-right: 0.5rem;
}

.add_calendar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 2rem 2rem;
  gap: 1rem;
  justify-items: center;
}
.add_calendar p {
  grid-column: 1/span 2;
  grid-row: 1/span 1;
}
.add_calendar .calendar {
  grid-column: 1/span 1;
  grid-row: 2/span 1;
  display: flex;
  align-items: center;
}
.add_calendar .calendar img {
  width: 2.2rem;
  height: 2.2rem;
  margin-right: 0.5rem;
}
.add_calendar .google_calendar {
  grid-column: 2/span 1;
  grid-row: 2/span 1;
  display: flex;
  align-items: center;
}
.add_calendar .google_calendar img {
  width: 3rem;
  height: 3rem;
  margin-right: 0.5rem;
}

.add_calendar_in_success_page {
  display: grid;
  grid-template-columns: max-content 1fr;
  grid-template-rows: 3rem 3rem;
  gap: 2rem;
  justify-items: start;
}
.add_calendar_in_success_page a {
  display: flex;
  align-items: center;
}
.add_calendar_in_success_page p {
  grid-column: 1/span 2;
  grid-row: 1/span 1;
}
.add_calendar_in_success_page .calendar img {
  width: 2.2rem;
  height: 2.2rem;
  margin-right: 0.5rem;
}
.add_calendar_in_success_page .google_calendar img {
  width: 3rem;
  height: 3rem;
  margin-right: 0.5rem;
}

.container {
  display: grid;
  grid-template-columns: repeat(12, [col-start] 1fr);
  grid-auto-rows: min-content;
  padding: 0;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

.index-page-message {
  grid-column: 1/-1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 1.5rem;
}

.header {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  height: min-content;
  margin: 2rem 0;
  background-color: #FFFFFF;
  align-items: center;
  position: relative;
}
@media screen and (max-width: 43.75em) {
  .header {
    margin: 0;
  }
}
.header__logo {
  grid-column: 1/span 6;
  display: flex;
  justify-content: start;
  align-items: center;
  height: 5.5rem;
  padding: 1.5rem 0rem;
}
@media screen and (max-width: 43.75em) {
  .header__logo {
    height: 7rem;
  }
}
.header__logo h1 {
  margin-left: 2rem;
}
@media screen and (max-width: 43.75em) {
  .header__logo h1 {
    margin-left: 1rem;
  }
}
@media screen and (max-width: 43.75em) {
  .header__logo {
    grid-column: 1/span 12;
    justify-content: center;
  }
}
.header__nav {
  grid-column: 7/span 6;
  display: flex;
  flex-direction: row;
  justify-content: end;
  align-items: center;
}
@media screen and (max-width: 43.75em) {
  .header__nav {
    display: none;
  }
}
.header__nav__item {
  list-style: none;
  margin-right: 2rem;
  font-weight: bold;
}
.header__nav__item a {
  font-size: 1.5rem;
}
.header__smartphone {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  background-color: #EEEEEE;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: min-content;
  grid-gap: 3rem;
  justify-items: center;
  align-items: start;
  display: none;
}
.header__smartphone--close {
  grid-column: 1/span 1;
  justify-self: end;
  width: 5rem;
  padding: 2rem;
}
.header__smartphone__nav {
  grid-column: 1/span 1;
  width: 100%;
  border-radius: 10px;
  list-style: none;
  font-weight: bold;
  text-decoration: underline;
}
.header__smartphone__nav--item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: linear-gradient(to bottom, rgba(238, 238, 238, 0.7), rgba(250, 250, 250, 0.7));
  align-items: start;
  font-size: 2rem;
  padding: 3rem;
}

.banner {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: minmax(min-content, max-content);
  background-image: linear-gradient(to bottom, rgba(238, 238, 238, 0.5), rgba(250, 250, 250, 0.5)), url("./img/website_bannar_1.b926d29923da.png");
  background-size: cover;
  background-position: center;
}
.banner__hero {
  grid-column: 1/span 1;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: start;
  padding: 2rem;
}
@media screen and (max-width: 56.25em) {
  .banner__hero {
    grid-column: 1/span 2;
    align-items: center;
  }
}
.banner__hero--message h2 {
  background-color: #454545;
  color: #FFFFFF;
  margin-bottom: 1rem;
  padding: 0 1rem;
  width: fit-content;
  box-shadow: 0 1rem 1rem rgba(69, 69, 69, 0.1);
}
.banner__hero--suppliment--message {
  display: inline;
  min-width: 36rem;
  max-width: 60rem;
  margin: 3.5rem 0;
}
@media screen and (max-width: 56.25em) {
  .banner__hero--suppliment--message {
    text-align: center;
  }
}
@media screen and (max-width: 43.75em) {
  .banner__hero .second-message {
    display: none;
  }
}
.banner__img {
  grid-column: 2/span 1;
}
.banner__img img {
  display: none;
  align-self: center;
  border-radius: 10px;
  border-color: #FFFFFF;
}
@media screen and (max-width: 56.25em) {
  .banner__img {
    display: none;
  }
}
.banner .login-register-button {
  grid-column: 1/span 2;
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
}

.new-lecture-list {
  grid-column: 1/-1;
  overflow-x: scroll;
}

.feature {
  grid-column: 1/-1;
}
.feature__container {
  max-width: 81em;
  margin: 0 auto;
}
.feature__detail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(33rem, 1fr));
  justify-items: center;
  align-items: center;
  grid-column-gap: 4rem;
  grid-row-gap: 2rem;
  /* Define slideIn animation */
  /* Define slideOut animation */
}
.feature__detail img {
  border-radius: 10px;
  width: 70%;
  height: auto;
}
@media screen and (max-width: 49.44em) {
  .feature__detail img {
    order: -1;
  }
}
.feature__detail #carousel-1, .feature__detail #carousel-2 {
  position: relative;
  width: 100%;
  height: 300px; /* Adjust as needed */
  overflow: hidden;
}
@media screen and (max-width: 49.44em) {
  .feature__detail #carousel-1, .feature__detail #carousel-2 {
    order: -1;
  }
}
.feature__detail .slide {
  position: absolute;
  width: 100%;
  height: 100%;
  right: 0;
  animation: slideOut 1.5s forwards ease-in-out;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
.feature__detail .slide.active {
  animation: slideIn 1.5s forwards ease-in-out;
  text-align: center;
}
@keyframes slideIn {
  0% {
    right: 100%;
  }
  100% {
    right: 0;
  }
}
@keyframes slideOut {
  0% {
    right: 0;
  }
  100% {
    right: -100%;
  }
}
.feature__detail .description-point {
  width: 38rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, min-content);
  grid-gap: 1rem;
  justify-items: center;
  align-items: center;
}
.feature__detail .description-point .btn {
  grid-column: 1/span 1;
}
.feature__detail .description-point__headline {
  grid-column: 2/span 2;
  justify-self: start;
  margin-bottom: 0;
}
.feature__detail .description-point__detail-description {
  grid-column: 1/span 3;
  grid-row: 2/span 1;
  justify-self: start;
  line-height: 1.8;
}
.feature .img-reference {
  width: 100%;
  display: flex;
  justify-content: right;
}

.how-to-join {
  grid-column: 1/-1;
}
.how-to-join__grid {
  max-width: 85rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
  grid-gap: 3rem;
  justify-items: start;
}
.how-to-join__grid--content {
  display: grid;
  grid-template-columns: min-content minmax(min-content, 100%);
  grid-template-rows: 7rem min-content;
  grid-column-gap: 2rem;
  align-items: center;
  justify-items: start;
}
.how-to-join__grid--content .btn {
  grid-column: 1/span 1;
  grid-row: 1/span 1;
  height: fit-content;
}
.how-to-join__grid--content .question-headline {
  grid-column: 2/span 1;
  grid-row: 1/span 1;
}
.how-to-join__grid--content .question-answer {
  grid-column: 2/span 1;
  grid-row: 2/span 1;
  line-height: 1.8;
}

.newsletter {
  grid-column: 1/-1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.newsletter__content {
  align-self: center;
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  grid-gap: 2rem;
}
.newsletter__content label {
  display: none;
}
.newsletter__content form {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.newsletter__content form > * {
  margin: 0.5rem 0;
}
.newsletter__content p {
  max-width: 40rem;
  text-align: center;
}

.contact-form {
  grid-column: 1/-1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.contact-form form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.contact-form form p {
  align-items: start;
}
.contact-form form p .message-area {
  width: 40rem;
  height: 25rem;
}

.footer {
  grid-column: 1/-1;
}
@media screen and (max-width: 43.75em) {
  .footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    margin-top: 5rem;
    padding: 2rem 5rem;
    background-color: #FFFFFF;
  }
}
.footer--content {
  margin: 0 auto;
  display: grid;
  grid-template-columns: 25rem 25rem 25rem;
  grid-gap: 4rem;
  justify-content: space-around;
}
@media screen and (max-width: 56.25em) {
  .footer--content {
    grid-template-columns: 25rem;
    grid-gap: 4rem;
  }
}
@media screen and (max-width: 43.75em) {
  .footer--content {
    display: none;
  }
}
.footer--content--smartphone {
  display: none;
}
@media screen and (max-width: 43.75em) {
  .footer--content--smartphone {
    height: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .footer--content--smartphone a {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .footer--content--smartphone img {
    width: 2rem;
    height: 2rem;
  }
}
.footer__logo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.footer__logo--img {
  display: flex;
  justify-content: center;
  align-items: center;
}
.footer__logo--img a {
  width: min-content;
}
.footer__logo--img img {
  width: 6rem;
  height: 3rem;
  object-fit: contain;
}
.footer__about, .footer__contact {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1rem;
  justify-items: center;
}

.sns {
  grid-column: 1/-1;
  display: none;
}
@media screen and (max-width: 37.5em) {
  .sns {
    display: block;
  }
}

.user-voice {
  grid-column: 1/-1;
}
.user-voice--container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min-content, 40rem));
  grid-gap: 2rem;
  justify-content: center;
}
.user-voice--container .user {
  display: grid;
  grid-template-columns: 15rem min-content;
  grid-template-rows: 1fr;
  align-items: start;
  grid-gap: 2rem;
}
@media screen and (max-width: 37.5em) {
  .user-voice--container .user {
    grid-template-columns: 1fr;
  }
}
.user-voice--container .user .user-area {
  margin-top: 1rem;
  text-align: end;
  margin-bottom: 0;
  font-weight: 700;
}
@media screen and (max-width: 37.5em) {
  .user-voice--container .user .user-area {
    text-align: start;
  }
}
.user-voice--container .voice-area {
  position: relative;
  display: inline-block;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  font-size: 16px;
  background: #FFFFFF;
  border-radius: 15px;
  width: 30rem;
  padding: 2rem;
}
.user-voice--container .voice-area:before {
  content: "";
  position: absolute;
  top: 50%;
  left: -25px;
  margin-top: -60px;
  border: 15px solid transparent;
  border-right: 15px solid #FFFFFF;
  z-index: 0;
}
@media screen and (max-width: 37.5em) {
  .user-voice--container .voice-area:before {
    top: -25px;
    left: 25%;
    margin-left: -15px;
    margin-top: 0;
    border: 15px solid transparent;
    border-bottom: 15px solid #FFFFFF;
  }
}
.user-voice--container .voice-area p {
  margin: 0;
  padding: 0;
  line-height: 1.8;
}

.floating-nav {
  position: fixed;
  top: 35vh;
  right: 0;
  width: 200px;
  background-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0rem 1rem rgba(69, 69, 69, 0.2);
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  z-index: 1000;
}
@media screen and (max-width: 56.25em) {
  .floating-nav {
    display: none;
  }
}

.floating-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.floating-nav ul li a {
  display: block;
  padding: 1.2rem;
  text-decoration: none;
  color: #454545;
}

.floating-nav ul li a.active {
  background-color: rgba(69, 69, 69, 0.85);
  color: #FFFFFF;
}

/* Add some space at the top of the page to prevent content from being hidden */
body {
  padding-top: 50px;
}

.about {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 2rem;
  justify-items: center;
}
.about .explanation {
  max-width: 62rem;
}
.about .explanation p {
  line-height: 2.5;
}
.about .founder-profile {
  max-width: 62rem;
}
.about .founder-profile--container {
  display: grid;
  grid-template-columns: 10rem 1fr;
  grid-gap: 2rem;
  justify-items: center;
}

.preview-section {
  grid-column: 1/-1;
  height: 4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #41B06E;
}
.preview-section p {
  color: #FFFFFF;
}
.preview-section--ondemand {
  background-color: #9B3922;
}

.draft-lecture {
  grid-column: 1/-1;
  height: 4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #41B06E;
}
.draft-lecture p {
  color: #FFFFFF;
}

.open-lecture {
  grid-column: 1/-1;
  height: 4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #0E46A3;
}
.open-lecture p {
  color: #FFFFFF;
}

.ongoing-lecture {
  grid-column: 1/-1;
  height: 4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #9B3922;
}
.ongoing-lecture p {
  color: #FFFFFF;
}

.closed-lecture {
  grid-column: 1/-1;
  height: 4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #454545;
}
.closed-lecture p {
  color: #FFFFFF;
}

.single-lecture__banner {
  grid-column: 1/-1;
  padding: 3rem;
  display: grid;
  grid-template-columns: 25rem 45rem;
  grid-template-rows: 43rem;
  grid-column-gap: 1rem;
  justify-content: center;
}
@media screen and (max-width: 43.75em) {
  .single-lecture__banner {
    grid-template-columns: minmax(30vw, 45vw);
    justify-items: center;
    grid-template-rows: 50rem min-content min-content;
  }
}
.single-lecture__banner .book-area {
  width: 25rem;
  height: 40rem;
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1rem;
}
.single-lecture__banner .book-area__image__url {
  height: 35rem;
  width: 100%;
}
.single-lecture__banner .book-area__image__url img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media screen and (max-width: 43.75em) {
  .single-lecture__banner .book-area {
    align-self: center;
  }
}
.single-lecture__banner .book-area .book-shop-url {
  width: 25rem;
  height: 6rem;
  display: flex;
}
.single-lecture__banner .book-area .book-shop-url a {
  text-align: center;
}
.single-lecture__banner .book-area .book-shop-url > * {
  line-height: 0;
  margin-bottom: 0rem;
  background-color: #FFFFFF;
  border-radius: 2px;
  padding: 1.5rem;
  box-shadow: 0 0rem 1rem rgba(69, 69, 69, 0.2);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-weight: 400;
  flex: 1;
  margin-right: 1rem;
}
.single-lecture__banner .book-area .book-shop-url > *:last-child {
  margin-right: 0rem;
}
.single-lecture__banner .lecture-info {
  min-width: 35rem;
  max-width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1rem;
}
.single-lecture__banner .lecture-info .lecture {
  width: 100%;
  height: 24rem;
  background-color: #FFFFFF;
  border-radius: 2px;
  padding: 1.5rem;
  box-shadow: 0 0rem 1rem rgba(69, 69, 69, 0.2);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
}
.single-lecture__banner .lecture-info .lecture h4 {
  text-align: center;
}
@media screen and (max-width: 43.75em) {
  .single-lecture__banner .lecture-info .lecture {
    height: min-content;
    padding: 3rem;
  }
}
.single-lecture__banner .lecture-info .lecture .lecture-duration, .single-lecture__banner .lecture-info .lecture .lecture-time {
  justify-self: start;
  display: flex;
  flex-wrap: wrap;
}
.single-lecture__banner .lecture-info .lecture .lecture-duration p, .single-lecture__banner .lecture-info .lecture .lecture-time p {
  margin-bottom: 0rem;
}
.single-lecture__banner .lecture-info .lecturer {
  width: inherit;
  height: 10rem;
  display: grid;
  grid-template-columns: 0.3fr 1fr;
  grid-gap: 1rem;
  grid-template-rows: 100%;
}
@media screen and (max-width: 43.75em) {
  .single-lecture__banner .lecture-info .lecturer {
    height: min-content;
    grid-template-columns: 0.5fr 1fr;
  }
}
.single-lecture__banner .lecture-info .lecturer--photo {
  height: 100%;
}
.single-lecture__banner .lecture-info .lecturer--info {
  width: 100%;
  background-color: #FFFFFF;
  border-radius: 2px;
  padding: 1.5rem;
  box-shadow: 0 0rem 1rem rgba(69, 69, 69, 0.2);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-items: start;
}
.single-lecture__banner .lecture-info .lecturer--info a {
  width: auto;
}
.single-lecture__banner .lecture-info .lecture-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1rem;
}
.single-lecture__banner .lecture-info .lecture-feature > * {
  background-color: #FFFFFF;
  border-radius: 2px;
  padding: 1.5rem;
  box-shadow: 0 0rem 1rem rgba(69, 69, 69, 0.2);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 6rem;
  line-height: 1;
  font-weight: 400;
}
.single-lecture__banner .price_and_min {
  grid-column: 1/-1;
  width: 100%;
  min-width: 35rem;
  max-width: 71rem;
}
@media screen and (max-width: 43.75em) {
  .single-lecture__banner .price_and_min {
    height: min-content;
    grid-template-columns: 0.5fr 1fr;
    max-width: 50rem;
  }
}
.single-lecture__banner .price_and_min div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1rem;
}
.single-lecture__banner .price_and_min div > * {
  width: 100%;
  background-color: #FFFFFF;
  border-radius: 2px;
  padding: 1.5rem;
  box-shadow: 0 0rem 1rem rgba(69, 69, 69, 0.2);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 6rem;
  line-height: 1;
  font-weight: 400;
}
.single-lecture__banner .price_and_min div p {
  margin-bottom: 0rem;
}
.single-lecture__banner .discord-duration {
  grid-column: 1/-1;
  width: 100%;
  min-width: 35rem;
  max-width: 71rem;
}
@media screen and (max-width: 43.75em) {
  .single-lecture__banner .discord-duration {
    height: min-content;
    grid-template-columns: 0.5fr 1fr;
    max-width: 50rem;
  }
}
.single-lecture__banner .discord-duration > * {
  margin-top: 1rem;
  background-color: #FFFFFF;
  border-radius: 2px;
  padding: 1.5rem;
  box-shadow: 0 0rem 1rem rgba(69, 69, 69, 0.2);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 6rem;
  line-height: 1;
  font-weight: 400;
}
.single-lecture__calendar {
  grid-column: 1/-1;
}
.single-lecture__lecture-overview {
  grid-column: 1/-1;
  padding: 5rem;
}
.single-lecture__lecture-overview--container {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1rem;
  justify-items: center;
}
.single-lecture__lecture-overview--container .title {
  align-self: start;
  margin-bottom: 1rem;
  text-decoration: underline;
}
.single-lecture__lecture-overview--container .overview-content {
  width: 100%;
  max-width: 62rem;
}
.single-lecture__lecture-overview--container .overview-content p {
  font-size: 1.7rem;
  line-height: 2.25;
}
.single-lecture__lecture-overview--container .overview-content span {
  font-size: 1.6rem;
  line-height: 1.5;
  font-weight: 400;
}
.single-lecture__lecture-overview--container .overview-content span:not(:last-child) {
  margin-bottom: 1.5rem;
}
.single-lecture__lecture-overview--container .overview-content .caution li {
  font-size: 1.7rem;
}
.single-lecture__lecture-overview--container .overview-content--index {
  background-color: rgba(255, 255, 255, 0.5);
  padding: 1rem;
  border-radius: 3px;
  margin-bottom: 2rem;
}
.single-lecture__lecture-overview--container .overview-content--index label {
  font-weight: 400;
  color: rgba(69, 69, 69, 0.7);
}
.single-lecture__lecture-overview--container .overview-content--index label:hover {
  color: #454545;
}
.single-lecture__lecture-overview--container .overview-content--index .toggle-checkbox {
  display: none;
}
.single-lecture__lecture-overview--container .overview-content--index .toggle-label {
  cursor: pointer;
}
.single-lecture__lecture-overview--container .overview-content--index .toggle-checkbox:not(:checked) ~ .overview-content--index--items {
  display: none;
}
.single-lecture__lecture-overview--container .overview-content--index .triangle {
  visibility: hidden;
}
.single-lecture__lecture-overview--container .overview-content--index .triangle::before {
  visibility: visible;
  content: "▹";
}
.single-lecture__lecture-overview--container .overview-content--index .toggle-checkbox:checked ~ .toggle-label .triangle::before {
  content: "▿";
  visibility: visible;
}
.single-lecture__lecture-overview--container .overview-content--index--items {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: start;
}
.single-lecture__lecture-overview--container .overview-content--index--items ul {
  list-style: none;
  padding: 0rem 2rem;
}
.single-lecture__lecture-overview--container .overview-content--index--items ul li a {
  font-size: 1.4rem;
  font-weight: 400;
  color: rgba(69, 69, 69, 0.7);
  border-width: 1.5px;
  border-color: rgba(69, 69, 69, 0.7);
}
.single-lecture__lecture-overview--container .overview-content--index--items ul li a:hover {
  color: #454545;
}
.single-lecture__lecture-overview--container .each-dates br {
  display: none;
}
.single-lecture__lecture-overview--container .each-dates .video-div {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1rem;
  grid-template-rows: min-content;
  justify-items: start;
}
.single-lecture__lecture-overview--container .each-dates .video-div iframe {
  height: 40rem;
  width: 100%;
}
@media screen and (max-width: 43.75em) {
  .single-lecture__lecture-overview--container .each-dates .video-div iframe {
    height: 30rem;
  }
}
.single-lecture__lecture-overview--container .each-dates .video-div a {
  margin: 0 auto;
}

.lecture-register {
  grid-column: 1/-1;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 1.6rem;
}

.calendar-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: min-content;
}
@media screen and (max-width: 24.3em) {
  .calendar-container {
    display: none;
  }
}
.calendar-container thead.calendar-content--week {
  display: grid;
  grid-template-columns: minmax(40rem, 1fr);
}
.calendar-container .show {
  display: grid;
  grid-column: 1fr;
  grid-template-columns: minmax(30rem, 1fr);
  grid-template-rows: 3rem min-content;
  grid-gap: 1rem;
  justify-items: center;
}
.calendar-container .show .month-pagination {
  display: grid;
  grid-template-columns: minmax(40rem, 1fr);
  grid-auto-rows: min-content;
  grid-gap: 2px;
}
.calendar-container .show .month-pagination .calendar-month-view {
  text-align: end;
  overflow-x: visible;
  white-space: nowrap;
}
.calendar-container .show--week {
  display: grid;
  grid-template-columns: minmax(40rem, 1fr);
  grid-auto-rows: min-content;
  grid-gap: 2px;
}
.calendar-container .show--day {
  display: grid;
  grid-template-columns: minmax(40rem, 1fr);
  grid-auto-rows: min-content;
  grid-gap: 2px;
}
.calendar-container .show .last-month {
  grid-column: 2/3;
  cursor: pointer;
}
.calendar-container .show .this-month {
  grid-column: 4/5;
  cursor: pointer;
}
.calendar-container .show .next-month {
  grid-column: 6/7;
  cursor: pointer;
}
.calendar-container .show tr {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(7, minmax(12%, 12rem));
  justify-items: center;
  grid-column-gap: 6px;
}
.calendar-container .show tr td {
  width: 100%;
  min-width: 5rem;
  height: 8rem;
  background-color: #FFFFFF;
  margin: 2px;
  box-shadow: 0 1rem 3rem rgba(69, 69, 69, 0.1);
  border-radius: 5px;
  padding: 0.5rem;
}
.calendar-container .show tr td p {
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 0rem;
  width: 100%;
}
.calendar-container .show tr td.lecture-date {
  border: 3px outset rgba(69, 69, 69, 0.7);
}
.calendar-container .show tr td.lecture-date .lecture-time {
  font-size: 1.5rem;
}
.calendar-container .show tr td.lecture-off-week {
  color: rgba(255, 0, 0, 0.7);
}
.calendar-container .hide {
  display: none;
}
.calendar-container .last-month, .calendar-container .this-month, .calendar-container .next-month {
  font-size: bold;
}

.lecture-basic-info {
  grid-column: 1/-1;
  min-height: 100vh;
  max-height: min-content;
}
.lecture-basic-info .select-lecture-style-container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: start;
  flex-wrap: wrap;
}
.lecture-basic-info .select-lecture-style-container .live-lecture-container, .lecture-basic-info .select-lecture-style-container .on-demand-lecture-container {
  background-color: #FFFFFF;
  border-radius: 2px;
  padding: 1.5rem;
  box-shadow: 0 0rem 1rem rgba(69, 69, 69, 0.2);
  border-radius: 10px;
  display: grid;
  grid-template-columns: 35rem;
  grid-template-rows: 5rem 33rem 5rem;
  justify-content: center;
  justify-items: center;
  margin: 2rem;
}
.lecture-basic-info .select-lecture-style-container .live-lecture-container div p, .lecture-basic-info .select-lecture-style-container .on-demand-lecture-container div p {
  text-align: start;
}
.lecture-basic-info .select-lecture-style-container .live-lecture-container h5, .lecture-basic-info .select-lecture-style-container .live-lecture-container form, .lecture-basic-info .select-lecture-style-container .on-demand-lecture-container h5, .lecture-basic-info .select-lecture-style-container .on-demand-lecture-container form {
  align-self: center;
  font-size: 2rem;
}
.lecture-basic-info .book-select, .lecture-basic-info .lecture-name {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1rem;
  justify-content: start;
}
.lecture-basic-info .book-select .search-bar, .lecture-basic-info .lecture-name .search-bar {
  display: flex;
}
.lecture-basic-info .circle-book {
  display: flex;
  flex-wrap: wrap;
  overflow-x: hidden;
  padding-top: 1rem;
}
.lecture-basic-info .circle-book > div {
  padding: 1rem;
  display: grid;
  grid-auto-rows: 5rem min-content;
  grid-row-gap: 1rem;
  grid-template-columns: 15rem;
  align-content: start;
  justify-content: start;
}
.lecture-basic-info .circle-book > div p {
  overflow: auto;
  word-wrap: break-word;
  margin-bottom: 0;
}
.lecture-basic-info .circle-book > div > img {
  width: 15rem;
  max-height: auto;
}
.lecture-basic-info #lecture_book {
  display: grid;
  grid-template-columns: repeat(auto-fit, 25rem);
  grid-gap: 1rem;
  justify-content: start;
}
@media screen and (min-width: 75em) {
  .lecture-basic-info #lecture_book {
    grid-template-columns: 1fr;
  }
}
.lecture-basic-info #lecture_book img {
  width: 15rem;
}
.lecture-basic-info #lecture_book div {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: min-content;
  grid-gap: 1rem;
  justify-content: start;
}
.lecture-basic-info #lecture_book div a {
  font-size: 1rem;
}
.lecture-basic-info #lecture_book .book-photo {
  grid-column: 1fr;
}
.lecture-basic-info #lecture_book .hide {
  display: none;
}
.lecture-basic-info .start-end-dates {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1rem;
  justify-content: start;
}
.lecture-basic-info .lecture-dates {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1rem;
  justify-content: start;
}
.lecture-basic-info .lecture-dates .each-date {
  display: flex;
  justify-content: start;
}
.lecture-basic-info .lecture-dates .each-date label {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-items: start;
  width: 13rem;
  margin-bottom: 0;
  margin-right: 1rem;
}
.lecture-basic-info .lecture-dates .each-date input {
  width: 2rem;
  height: 2rem;
}
.lecture-basic-info #lecture_dates_error, .lecture-basic-info #lecture_dates_choice_error, .lecture-basic-info #lecture_time_error, .lecture-basic-info #lecture_price_error, .lecture-basic-info #lecture_name_error {
  color: #A91D3A;
}
.lecture-basic-info .lecture-time {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1rem;
  justify-content: start;
}
.lecture-basic-info .lecture-time .each-time {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1rem;
  justify-items: start;
}
.lecture-basic-info .lecture-time .each-time div {
  display: grid;
  grid-template-columns: 5rem 1fr;
  align-items: center;
}
.lecture-basic-info .lecture-time .each-time label {
  align-items: start;
  width: auto;
  margin-bottom: 0;
  margin-right: 1rem;
}
.lecture-basic-info .lecture-time .each-time input {
  width: 2.9rem;
  height: 2.9rem;
  margin-left: 1rem;
}
.lecture-basic-info .each-time {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1rem;
  justify-items: start;
}
.lecture-basic-info .min-attendee-input {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-items: start;
}
.lecture-basic-info .lecture-price-field {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1rem;
  justify-content: start;
}
.lecture-basic-info .lecture_income_field span {
  font-size: 1.6rem;
}
.lecture-basic-info .past-attended-lecture-options {
  display: grid;
  grid-template-columns: 25rem 10rem;
  grid-template-rows: 5rem;
  align-items: center;
  grid-gap: 1rem;
  border-bottom: 1px solid #454545;
  width: 35rem;
}
.lecture-basic-info .past-attended-lecture-options input {
  width: 2rem;
  height: 2rem;
}

.test {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  background-color: red;
}

.lecture-detail-info {
  grid-column: 1/-1;
  min-height: 100vh;
  max-height: min-content;
}
.lecture-detail-info .detail-content {
  padding: 5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
@media screen and (max-width: 37.5em) {
  .lecture-detail-info .detail-content {
    padding: 2.5rem 5rem;
  }
}
.lecture-detail-info .detail-content > div {
  width: 100%;
  max-width: 80rem;
}
.lecture-detail-info .detail-content .syllabus-submit {
  width: 100%;
  display: flex;
  justify-content: center;
}

#each_lecturesForm p label, #overviewForm p label, #messageForm p label, #qandaForm p label {
  display: none;
}

.ck-word-count__words {
  display: none;
}

.detail-info-label {
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.5;
}

.lectures-list {
  display: grid;
  grid-gap: 1rem;
}
.lectures-list div {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
}
@media screen and (min-width: 75em) {
  .lectures-list div {
    justify-content: start;
  }
}
@media screen and (max-width: 37.5em) {
  .lectures-list div {
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}
.lectures-list .lecture-card {
  background-color: #FFFFFF;
  border-radius: 10px;
  margin-right: 2rem;
  display: grid;
  grid-template-columns: repeat(5, minmax(8rem, 10rem));
  grid-template-rows: repeat(3, 10rem);
  grid-row-gap: 2rem;
  grid-column-gap: 1rem;
  max-width: 50rem;
  margin-bottom: 2rem;
}
@media screen and (max-width: 37.5em) {
  .lectures-list .lecture-card {
    margin-right: 1rem;
  }
}
@media screen and (max-width: 37.5em) {
  .lectures-list .lecture-card {
    grid-template-columns: repeat(5, minmax(min-content, 8.5rem));
    grid-template-rows: repeat(3, minmax(min-content, 9rem));
  }
}
.lectures-list .lecture-card__img {
  width: 13.5rem;
  grid-column: 1/span 2;
  grid-row: 1/span 2;
  justify-self: center;
  align-self: center;
}
@media screen and (max-width: 37.5em) {
  .lectures-list .lecture-card__img {
    grid-column: 1/-1;
  }
}
.lectures-list .lecture-card__simple-discription {
  grid-column: 3/span 3;
  grid-row: 1/span 2;
  align-self: center;
  display: grid;
  grid-template-columns: 5rem 1fr;
  grid-template-rows: repeat(4, 5rem);
  align-items: center;
}
@media screen and (max-width: 37.5em) {
  .lectures-list .lecture-card__simple-discription {
    display: none;
  }
}
.lectures-list .lecture-card__simple-discription .book {
  grid-column: 1/span 1;
}
.lectures-list .lecture-card__simple-discription .book-content {
  grid-column: 2/span 1;
}
.lectures-list .lecture-card__simple-discription .author {
  grid-column: 1/span 1;
}
.lectures-list .lecture-card__simple-discription .author-content {
  grid-column: 2/span 1;
}
.lectures-list .lecture-card__simple-discription .lecturer {
  grid-column: 1/span 1;
}
.lectures-list .lecture-card__simple-discription .lecturer-content {
  grid-column: 2/span 1;
}
.lectures-list .lecture-card__simple-discription .expertise {
  grid-column: 1/span 1;
}
.lectures-list .lecture-card__simple-discription .expertise-content {
  grid-column: 2/span 1;
}
.lectures-list .lecture-card__simple-discription p, .lectures-list .lecture-card__simple-discription a {
  margin-bottom: 0;
  width: 100%;
}
.lectures-list .lecture-card__duration {
  grid-column: 1/span 5;
  grid-row: 3/span 1;
  padding-top: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-top: 2.5px dotted #454545;
}
.lectures-list .lecture-card__duration .only-in-smartphone {
  display: none;
}
@media screen and (max-width: 37.5em) {
  .lectures-list .lecture-card__duration .only-in-smartphone {
    display: block;
  }
}

.account {
  grid-column: 1/-1;
}
.account__container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
  grid-template-rows: min-content;
  grid-gap: 2rem;
  padding-bottom: 4rem;
}
.account__container .socialaccount_ballot {
  width: 100%;
  height: 100%;
}
.account__container .socialaccount_ballot .socialaccount_providers {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1rem;
  justify-items: center;
  align-items: center;
  width: 100%;
  padding-top: 1rem;
}
.account__container .socialaccount_ballot .socialaccount_providers li {
  list-style: none;
}
.account__container .socialaccount_ballot .socialaccount_providers li a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 25rem;
  height: 4rem;
  font-size: 1.6rem;
  padding: 0.5rem;
  font-weight: 400;
  background-color: #FFFFFF;
  border: none;
  border-radius: 5px;
  border: none;
}
.account__container .login {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1rem;
  justify-items: center;
  align-items: center;
}
.account__container .login form {
  display: grid;
  justify-items: center;
}
.account__container .login label {
  font-size: 1rem;
  font-weight: 300;
}
.account__container .login #id_remember {
  margin: auto;
  font-size: 1.6rem;
}
.account__container .login .helptext {
  margin-top: 0.5rem;
}
.account__container .signup ul {
  max-width: 25rem;
}
.account__container .email-verify {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: min-content;
  grid-gap: 1rem;
}
.account__container .email-verify form {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1rem;
}
.account__container .email-verify form p {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  flex-wrap: wrap;
  height: 7rem;
  gap: 1rem;
  margin-bottom: 0rem;
}
.account__container .email-verify form p label {
  margin-bottom: 0rem;
}
.account__container .email-verify .email-action {
  display: flex;
  flex-direction: row;
  justify-content: start;
}
.account__container .email-verify .email-action button {
  margin: 0rem 0.5rem;
}

.social-login, .logout, .verify-email {
  grid-column: 1/-1;
  height: 80vh;
}

.password-change {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1rem;
  justify-items: start;
}
.password-change p {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1rem;
  align-items: center;
}

.password-reset {
  grid-column: 1/-1;
}
.password-reset--form {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1rem;
  justify-items: start;
}
.password-reset--form p {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1rem;
  align-items: center;
}

.profile {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: min-content;
  justify-items: center;
  grid-gap: 1rem;
  align-content: start;
}
.profile--content {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: min-content;
  grid-gap: 1rem;
  justify-content: start;
  width: 25rem;
}
.profile--content--items {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
}
.profile--content--items span {
  word-break: break-all;
}
.profile--content--register-logout {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
  width: 100%;
}
.profile canvas {
  width: 100%;
  height: auto;
  object-fit: cover;
}
.profile .delete-account {
  margin-top: 2rem;
}

.list_lectures {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1rem;
  justify-content: start;
  grid-template-rows: min-content;
  grid-auto-rows: min-content;
}
.list_lectures .ongoing-lectures .empty, .list_lectures .future-lectures .empty, .list_lectures .past-lectures .empty {
  background-color: #FFFFFF;
  border-radius: 2px;
  padding: 1.5rem;
  box-shadow: 0 0rem 1rem rgba(69, 69, 69, 0.2);
  border-radius: 10px;
  max-width: 100rem;
}
.list_lectures .ongoing-lectures .circle-container, .list_lectures .future-lectures .circle-container, .list_lectures .past-lectures .circle-container {
  max-width: 100rem;
  display: grid;
  grid-template-columns: 45rem minmax(min-content, 50rem);
  grid-template-rows: 2rem min-content;
  grid-gap: 1rem;
  justify-content: center;
  margin-bottom: 2rem;
  background-color: #FFFFFF;
  border-radius: 2px;
  padding: 1.5rem;
  box-shadow: 0 0rem 1rem rgba(69, 69, 69, 0.2);
  border-radius: 10px;
  padding: 2.5rem;
}
@media screen and (max-width: 43.75em) {
  .list_lectures .ongoing-lectures .circle-container, .list_lectures .future-lectures .circle-container, .list_lectures .past-lectures .circle-container {
    display: block;
  }
}
.list_lectures .ongoing-lectures .circle-container .lecture-schedule, .list_lectures .future-lectures .circle-container .lecture-schedule, .list_lectures .past-lectures .circle-container .lecture-schedule {
  grid-column: 1/-1;
  grid-row: 1/span 1;
}
@media screen and (max-width: 43.75em) {
  .list_lectures .ongoing-lectures .circle-container .lecture-schedule, .list_lectures .future-lectures .circle-container .lecture-schedule, .list_lectures .past-lectures .circle-container .lecture-schedule {
    display: block;
  }
}
.list_lectures .ongoing-lectures .circle-container .lecture-schedule p span, .list_lectures .future-lectures .circle-container .lecture-schedule p span, .list_lectures .past-lectures .circle-container .lecture-schedule p span {
  font-size: 1.6rem;
}
.list_lectures .ongoing-lectures .circle-container .book-info, .list_lectures .future-lectures .circle-container .book-info, .list_lectures .past-lectures .circle-container .book-info {
  grid-column: 1/span 1;
  grid-row: 2/-1;
  display: grid;
  grid-template-columns: 15rem 30rem;
  grid-gap: 1rem;
}
.list_lectures .ongoing-lectures .circle-container .book-info--url, .list_lectures .future-lectures .circle-container .book-info--url, .list_lectures .past-lectures .circle-container .book-info--url {
  display: flex;
  justify-content: center;
  align-items: center;
}
@media screen and (max-width: 43.75em) {
  .list_lectures .ongoing-lectures .circle-container .book-info, .list_lectures .future-lectures .circle-container .book-info, .list_lectures .past-lectures .circle-container .book-info {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 2rem 0;
  }
  .list_lectures .ongoing-lectures .circle-container .book-info--img, .list_lectures .future-lectures .circle-container .book-info--img, .list_lectures .past-lectures .circle-container .book-info--img {
    width: 15rem;
    box-shadow: 0 0rem 1rem rgba(69, 69, 69, 0.2);
  }
}
.list_lectures .ongoing-lectures .circle-container .book-info--basic, .list_lectures .future-lectures .circle-container .book-info--basic, .list_lectures .past-lectures .circle-container .book-info--basic {
  display: grid;
  grid-template-columns: 30rem;
  overflow: hidden;
  grid-gap: 1rem;
  align-content: center;
  padding: 1rem;
}
.list_lectures .ongoing-lectures .circle-container .book-info--basic a, .list_lectures .future-lectures .circle-container .book-info--basic a, .list_lectures .past-lectures .circle-container .book-info--basic a {
  width: fit-content;
}
.list_lectures .ongoing-lectures .circle-container .book-info--basic p, .list_lectures .future-lectures .circle-container .book-info--basic p, .list_lectures .past-lectures .circle-container .book-info--basic p {
  margin-bottom: 0;
}
.list_lectures .ongoing-lectures .circle-container .book-info--basic .book-name, .list_lectures .future-lectures .circle-container .book-info--basic .book-name, .list_lectures .past-lectures .circle-container .book-info--basic .book-name {
  text-align: start;
}
@media screen and (max-width: 43.75em) {
  .list_lectures .ongoing-lectures .circle-container .book-info--basic .book-name, .list_lectures .future-lectures .circle-container .book-info--basic .book-name, .list_lectures .past-lectures .circle-container .book-info--basic .book-name {
    text-align: center;
  }
}
.list_lectures .ongoing-lectures .circle-container .lecture-info-area, .list_lectures .future-lectures .circle-container .lecture-info-area, .list_lectures .past-lectures .circle-container .lecture-info-area {
  grid-column: 2/-1;
  grid-row: 2/-1;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  justify-content: start;
  margin: auto 0;
}
@media screen and (max-width: 43.75em) {
  .list_lectures .ongoing-lectures .circle-container .lecture-info-area, .list_lectures .future-lectures .circle-container .lecture-info-area, .list_lectures .past-lectures .circle-container .lecture-info-area {
    grid-column: none;
    grid-row: none;
    justify-content: center;
  }
}
.list_lectures .ongoing-lectures .circle-container .lecture-info-area > *, .list_lectures .future-lectures .circle-container .lecture-info-area > *, .list_lectures .past-lectures .circle-container .lecture-info-area > * {
  margin-right: 1rem;
  margin-bottom: 1rem;
}
.list_lectures .ongoing-lectures .circle-container .lecture-info-area .btn, .list_lectures .future-lectures .circle-container .lecture-info-area .btn, .list_lectures .past-lectures .circle-container .lecture-info-area .btn {
  width: 9rem;
  text-align: center;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2rem;
}
.list_lectures .past-lectures {
  overflow-y: scroll;
}
.list_lectures .height-limit {
  max-height: 80rem;
  overflow-y: scroll;
}

.all-lectures {
  grid-column: 1/-1;
}
.all-lectures .future-lectures, .all-lectures .ongoing-lectures, .all-lectures .past-lectures {
  margin-bottom: 2rem;
}
.all-lectures .past-lectures {
  max-height: 45rem;
  overflow-y: scroll;
}
.all-lectures .actions-on-past-lecturers {
  display: flex;
  flex-direction: column;
  align-items: start;
}

.lecture-supplement-info {
  grid-column: 1/-1;
}
@media screen and (max-width: 56.25em) {
  .lecture-supplement-info {
    display: none;
  }
}
.lecture-supplement-info .file_detail {
  display: grid;
  grid-template-columns: 20rem 20rem min-content 10rem;
  grid-template-rows: min-content;
  grid-gap: 1rem;
}
.lecture-supplement-info .file_detail h5 {
  grid-column: 1/-1;
  margin-bottom: 0;
}
.lecture-supplement-info .file_detail .label-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 7rem;
  grid-auto-rows: 7rem;
  grid-gap: 1rem;
  align-items: center;
}
.lecture-supplement-info .file_detail .file-upload-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 7rem;
  grid-auto-rows: 7rem;
  grid-gap: 1rem;
  align-items: center;
}
.lecture-supplement-info .file_detail .file-upload-container label {
  display: none;
}
.lecture-supplement-info .file_detail .file-upload-container p {
  margin-bottom: 0;
}
.lecture-supplement-info .file_detail .file-upload-container p input {
  width: 100%;
  max-width: 60rem;
}
.lecture-supplement-info .file_detail .video-container {
  display: flex;
  align-items: center;
  justify-content: start;
  flex-wrap: wrap;
}
.lecture-supplement-info .file_detail .video-container > * {
  margin-bottom: 1rem;
}
.lecture-supplement-info .file_detail .video-container label {
  width: 25rem;
}
.lecture-supplement-info .file_detail .video-container input {
  width: 100%;
  max-width: 60rem;
}
.lecture-supplement-info .file_detail .current-lecture-documents {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 7rem;
  grid-auto-rows: 7rem;
  grid-gap: 1rem;
  align-items: center;
}
.lecture-supplement-info .file_detail .current-lecture-documents .each-documents {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
}
.lecture-supplement-info .file_detail .current-lecture-documents .each-documents a {
  line-height: 0;
}
.lecture-supplement-info .file_detail .current-lecture-documents .each-documents a img {
  width: auto;
  height: 3rem;
}
.lecture-supplement-info .file_detail .current-lecture-documents .each-documents span {
  margin-left: 0.5rem;
}

.lecture-supplement-info-video {
  grid-column: 1/-1;
}

.video_detail {
  display: none;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: min-content;
  grid-gap: 2rem;
}
.video_detail h5 {
  grid-column: 1/-1;
  margin-bottom: 0;
}
.video_detail .label-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 3rem;
  grid-auto-rows: 3rem;
  grid-gap: 1rem;
  align-items: center;
}
.video_detail .url-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 3rem;
  grid-auto-rows: 3rem;
  grid-gap: 1rem;
  align-items: center;
}
.video_detail .url-container label {
  display: none;
}
.video_detail .url-container p {
  margin-bottom: 0;
}
.video_detail .url-container p input {
  width: 100%;
  max-width: 60rem;
}
.video_detail .video-container {
  display: flex;
  align-items: center;
  justify-content: start;
  flex-wrap: wrap;
}
.video_detail .video-container > * {
  margin-bottom: 1rem;
}
.video_detail .video-container label {
  width: 25rem;
}
.video_detail .video-container input {
  width: 100%;
  max-width: 60rem;
}

.lecture-supplement-info-mobile {
  grid-column: 1/-1;
  display: none;
}
@media screen and (max-width: 56.25em) {
  .lecture-supplement-info-mobile {
    display: block;
  }
}
.lecture-supplement-info-mobile .file_detail {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: min-content;
  grid-gap: 3rem;
}
.lecture-supplement-info-mobile .current-lecture-documents {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: min-content;
  grid-gap: 1rem;
  align-items: center;
}
.lecture-supplement-info-mobile .current-lecture-documents .each-documents {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
}
.lecture-supplement-info-mobile .current-lecture-documents .each-documents a {
  line-height: 0;
}
.lecture-supplement-info-mobile .current-lecture-documents .each-documents a img {
  width: auto;
  height: 3rem;
  margin: 0 1rem;
}
.lecture-supplement-info-mobile .current-lecture-documents .each-documents span {
  margin-left: 0.5rem;
}
.lecture-supplement-info-mobile .current-lecture-documents .each-documents p {
  margin-bottom: 0rem;
}
.lecture-supplement-info-mobile .upload-delete {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1rem;
}
.lecture-supplement-info-mobile .upload-delete .file-upload-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: min-content;
  grid-auto-rows: 8rem;
  grid-gap: 1rem;
  align-items: center;
}
.lecture-supplement-info-mobile .upload-delete .file-upload-container input {
  min-width: 15rem;
  max-width: 25rem;
}
.lecture-supplement-info-mobile .upload-delete .file-upload-container label {
  display: none;
}
.lecture-supplement-info-mobile .upload-delete .file-upload-container p {
  margin-bottom: 0;
}
.lecture-supplement-info-mobile .upload-delete .file-upload-container p input {
  width: 100%;
  max-width: 60rem;
}

.lecture_videos {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 2rem;
  justify-items: center;
}

.lecture-documents {
  height: min-content;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  overflow-x: scroll;
  justify-content: start;
}
.lecture-documents .each-documents {
  width: 12rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
}
.lecture-documents .each-documents a {
  width: 4rem;
  margin-bottom: 1rem;
}
.lecture-documents .each-documents span {
  word-break: break-all;
  text-align: center;
}

.lecturer_profile {
  grid-column: 1/-1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  justify-items: center;
}
.lecturer_profile--content {
  max-width: 45rem;
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 2rem;
  justify-items: center;
}
.lecturer_profile--content img {
  width: 50%;
}
.lecturer_profile--content .btn {
  justify-self: center;
}
.lecturer_profile--content--items {
  width: 25rem;
}
.lecturer_profile--content span {
  max-width: 25rem;
}
.lecturer_profile .bank-type {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.lecturer_profile .bank-type > * {
  margin-right: 0.5rem;
}

#new-player.embed #player-toolbar {
  background-color: rgba(69, 69, 69, 0.7) !important;
}

.lecturer-info-request {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 2rem;
  justify-items: start;
}
.lecturer-info-request--container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  flex-wrap: wrap;
  width: 100%;
  overflow: hidden;
}
.lecturer-info-request--container .tfb-overview {
  width: 65rem;
  height: 45rem;
  margin-bottom: 10rem;
  margin-right: 2rem;
}
@media screen and (max-width: 24.3em) {
  .lecturer-info-request--container .tfb-overview {
    width: 100%;
    height: 25rem;
  }
}
.lecturer-info-request--container .tfb-overview iframe {
  width: 100%;
  height: 100%;
}
.lecturer-info-request--container .info-request .lecturer-info-request-form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.lecturer-info-request--container .info-request .lecturer-info-request-form form {
  height: 45rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.message-page {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1rem;
  justify-items: start;
  grid-template-rows: 5rem 5rem 5rem;
}
.message-page a {
  align-self: baseline;
}

.progress-container {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 2rem;
  justify-content: start;
  padding-top: 3rem;
  padding-left: 5rem;
  padding-right: 5rem;
  background-color: #f3f3f3;
}
.progress-container .progress-num {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: 1rem;
  justify-items: center;
  background-color: rgba(69, 69, 69, 0.3);
  border-radius: 3px;
}
.progress-container .progress-num .progress-indicator {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: -1rem;
  background-color: #FFFFFF;
}
.progress-container .progress-num .progress-indicator.active {
  background-color: #454545;
  color: #FFFFFF;
}
.progress-container .progress-content {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: min-content;
  justify-items: center;
}
.progress-container .progress-num-for-ondemand {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: 1rem;
  justify-items: center;
  background-color: rgba(69, 69, 69, 0.3);
  border-radius: 3px;
}
.progress-container .progress-num-for-ondemand .progress-indicator {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: -1rem;
  background-color: #FFFFFF;
}
.progress-container .progress-num-for-ondemand .progress-indicator.active {
  background-color: #454545;
  color: #FFFFFF;
}
.progress-container .progress-content-for-ondemand {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: min-content;
  justify-items: center;
}

.closed-non-owner-lectures {
  display: grid;
  grid-template-columns: repeat(auto-fill, 15rem);
  grid-template-rows: min-content;
  grid-gap: 1rem;
  justify-content: center;
  padding: 0.5rem;
  align-items: center;
}
.closed-non-owner-lectures .lecturer-select {
  width: 100%;
}
.closed-non-owner-lectures .lecturer-select > * {
  width: 100%;
}
.closed-non-owner-lectures .lecture-container {
  width: 15rem;
  display: grid;
  grid-template-columns: 15rem;
  grid-template-rows: 15rem 6rem 5rem;
  grid-gap: 1rem;
  justify-items: center;
}
.closed-non-owner-lectures .lecture-container .info-area {
  width: 100%;
}
.closed-non-owner-lectures .lecture-container .info-area p {
  margin-bottom: 1rem;
  overflow-x: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}
.closed-non-owner-lectures .lecture-container a {
  display: flex;
  justify-content: center;
}
.closed-non-owner-lectures .lecture-container img {
  width: auto;
  height: 100%;
  object-fit: cover;
  box-shadow: 0 0rem 1rem rgba(69, 69, 69, 0.2);
  transition: all, 0.3s;
  cursor: pointer;
}
.closed-non-owner-lectures .lecture-container img:hover {
  transform: translateY(-3px);
}
.closed-non-owner-lectures .lecture-container .input-area {
  display: flex;
  justify-content: center;
  align-items: center;
}
.closed-non-owner-lectures .lecture-container .input-area label {
  margin-bottom: 0rem;
  font-size: 1.6rem;
}
.closed-non-owner-lectures .lecture-container input {
  width: 3rem;
  height: 3rem;
  margin-left: 0.5rem;
}
.closed-non-owner-lectures .lecture-container input::before { /* チェックボックスの内側の✓ */
  display: block;
  content: "✓";
  line-height: 0;
  text-align: center;
  font-size: 2rem;
  font-weight: 400;
  color: #454545;
  opacity: 0;
  transform: translate(-0.55rem, 0.2rem);
  transition: all 0.3s;
}
.closed-non-owner-lectures .lecture-container input:checked::before {
  opacity: 1;
}

/*# sourceMappingURL=styles.css.44a9d8c41603.map */