/* styles.css */

@font-face {
  font-family: "Bourton Hand Stripes A";
  src: url("../fonts/Bourton-Hand-Stripes-A.otf") format("opentype");
}

.on_demand_body {
  font-family: "Noto Sans JP", sans-serif;
  margin: 0;
  padding: 0;
  line-height: normal;
  min-height: 100vh;
  display: flex;
  flex-flow: column;
  color: #4571A1;
}

.on_demand_body p {
  margin: 0;
  font-size: 14px;
}

.on_demand_body h1,
h2,
h3 {
  margin: 0;
}

.on_demand_body h1 {
  font-size: 32px;
  font-weight: bold;
  letter-spacing: normal;
}

.on_demand_body h2 {
  font-size: 24px;
  font-weight: bold;
  letter-spacing: normal;
}

.on_demand_body h3 {
  font-size: 16px;
  font-weight: bold;
  letter-spacing: normal;
}

.on_demand_header {
  position: sticky;
  top: 0;
  background-color: #fff;
  border-bottom: solid;
  display: block;
  max-width: none;
  z-index: 1;
  margin: 0;
}

.on_demand_header_pc {
  display: flex;
  align-items: center;
  padding-top: 25px;
  padding-bottom: 17px;
}

.on_demand_header_pc_logo {
  width: 26.05vw;
  margin-left: 1.82vw;
  margin-right: 1.56vw;
  display: flex;
  align-items: center;
}

.on_demand_header_pc_logo img {
  height: auto;
  max-width: 100%;
}

.on_demand_header_pc_text {
  margin-right: 1.56vw;
}

.on_demand_header_pc_text p {
  font-size: 10px;
}

.on_demand_header_pc_menu {
  margin-left: auto;
  display: flex;
  column-gap: 2.6vw;
}

.on_demand_header_pc_menu a {
  color: inherit;
  text-decoration: none;
}

.on_demand_header_account_icon .fa-user-circle {
  font-size: 28px;
  margin-left: 2.6vw;
  margin-right: 0px;
  display: block;
}

.on_demand_header_account_icon a {
  color: inherit;
  text-decoration: none;
}

.on_demand_header_pc_Instagram {
  margin-right: 4.69vw;
  margin-left: 2.6vw;
}

.on_demand_header_pc_Instagram img {
  display: block;
}

.menu-main-container {
  font-weight: bold;
}

.menu-main-container .menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.on_demand_header_sp {
  display: none;
}

.on_demand_hero_image_pc,
.on_demand_hero_image_sp {
  border-bottom: solid;
}

.on_demand_hero_image_sp {
  display: none;
}

.on_demand_main {
  display: flex;
  flex-direction: row-reverse;
  flex-grow: 1;
}

.on_demand_side_menu {
  display: flex;
  flex-flow: column;
  align-items: center;
  background-color: #f1f1f1;
  padding: 100px 35px 10px 35px;
  width: 18.75vw;
  box-sizing: content-box;
}

.on_demand_side_menu_sns {
  margin-top: 20px;
  margin-bottom: 80px;
  display: flex;
  justify-content: center;
  column-gap: 20px;
}

.on_demand_side_menu_sns img {
  display: block;
}

.on_demand_side_menu h2 {
 margin-bottom: 50px;
}

.on_demand_side_menu_course {
  padding-bottom: 50px;
}

.on_demand_side_menu_course h3 {
  text-align: start;
  margin-bottom: 25px;
}

.on_demand_side_menu img {
  display: block;
  max-width: 100%;
  height: auto;
}

.on_demand_video_list {
  flex: 1;
  padding: 100px 6.25vw;
}

.on_demand_video_list p {
  font-family: "Bourton Hand Stripes A", sans-serif;
  font-size: 80px;
  margin-bottom: 25px;
}

.on_demand_video_list h2 {
  margin-bottom: 50px;
}

.on_demand_video_list img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 5%;
  margin-bottom: 30px;
}

.on_demand_video_list_courses {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}

.on_demand_video_list_course a {
  color: inherit;
  text-decoration: none;
}

.on_demand_video_list_course h2 {
  font-size: 18px;
}

.on_demand_footer_wrapper {
  border-top: solid;
  box-sizing: border-box;
  padding: 0px 1.82vw;
}

.on_demand_footer_menu {
  display: flex;
  justify-content: center;
  padding-top: 55px;
  column-gap: 2.6vw;
}

.on_demand_footer_menu a {
  color: inherit;
  text-decoration: none;
}

.on_demand_footer_logo {
  display: flex;
  justify-content: center;
  padding: 20px 0px;
}

.on_demand_footer_logo img {
  display: block;
  max-width: 100%;
  height: auto;
}

.on_demand_footer_illust {
  display: flex;
  justify-content: space-between;
}

.on_demand_footer_illust img {
  display: block;
  max-width: 100%;
  height: auto;
  width: auto;
}

.on_demand_footer_copy {
  background-color: #4571A1;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.on_demand_footer_copy p {
  color: #fff;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
}

.pagination button,
.pagination .page-button {
  margin: 0 10px;
  border: none;
  background-color: #f1f1f1;
  cursor: pointer;
  text-decoration: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 24px;
  font-weight: bold;
  padding: 0px;
  display: inline;
}

.pagination button:hover {
  background-color: #f1f1f1;
  border: none;
}

.pagination button:focus {
  background-color: #f1f1f1;
  border: none;
}

.pagination button:disabled {
  cursor: not-allowed;
  display: none;
}

.pagination .page-button.active {
  background-color: #000;
  color: #fff;
}

.on_demand_header_pc_logo_wrapper {
  display: flex;
  align-items: center;
}

@media screen and (max-width: 1350px) {
  .on_demand_header_pc_menu h3,
  .on_demand_header_pc_menu .menu-main-container,
  .on_demand_footer_menu h3 {
    font-size: 12px;
  }
}

@media screen and (max-width: 1150px) {
  .on_demand_header_pc_logo_wrapper {
    display: block;
  }

  .on_demand_header_pc_text {
    margin-top: 10px;
    margin-left: 1.82vw;
  }
}

@media screen and (max-width: 600px) {
  .on_demand_header_pc {
    display: none;
  }

  .on_demand_header_sp {
    display: flex;
    justify-content: center;
    padding-top: 29px;
    padding-bottom: 28.6px;
  }

  .on_demand_header_sp_logo {
    width: 55.8vw;
    display: flex;
    align-items: center;
  }

  .on_demand_header_sp_logo img {
    height: auto;
    max-width: 100%;
  }

  .on_demand_hero_image_pc {
    display: none;
  }

  .on_demand_hero_image_sp {
    display: block;
  }

  .on_demand_main {
    display: block;
  }

  .on_demand_side_menu {
    width: auto;
    border-top: solid;
  }

  .on_demand_video_list {
    flex: 1;
    padding: 60px 8.14vw;
  }

  .on_demand_video_list p {
    font-size: 40px;
  }

  .on_demand_video_list h2 {
    font-size: 16px;
    margin-bottom: 40px;
  }

  .on_demand_video_list img {
    margin-bottom: 15px;
  }

  .on_demand_video_list_courses {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .on_demand_video_list_courses h2 {
    font-size: 14px;
  }

  .on_demand_footer_wrapper {
    display: flex;
    flex-flow: column;
    align-items: center;
    height: auto;
  }

  .on_demand_footer_menu {
    flex-flow: column;
    row-gap: 15px;
    padding-top: 40px;
  }

  .on_demand_footer_menu h3 {
    font-size: 14px;
    font-weight: normal;
  }

  .on_demand_footer_logo {
    width: 41.4vw;
    padding-top: 40px;
    padding-bottom: 20px;
  }

  .pagination button,
  .pagination .page-button {
    margin: 0 5px;
    width: 30px;
    height: 30px;
    font-size: 16px;
  }
}

/* ハンバーガーメニュー */
.on_demand_hamburger_menu_btn {
  position: fixed;
  top: 48px;
  right: 25px;
  display: flex;
  height: 25px;
  width: 25px;
  justify-content: center;
  align-items: center;
  z-index: 80;
}

.on_demand_hamburger_menu span,
.on_demand_hamburger_menu span:before,
.on_demand_hamburger_menu span:after {
  content: "";
  display: block;
  height: 2px;
  width: 25px;
  border-radius: 3px;
  background-color: #4571A1;
  position: absolute;
}

.on_demand_hamburger_menu_btn span:before {
  bottom: 10px;
}

.on_demand_hamburger_menu_btn span:after {
  top: 10px;
}

#on_demand_hamburger_menu_check {
  display: none;
}

.on_demand_hamburger_menu_close_wrapper {
  display: flex;
  justify-content: end;
  margin-top: 48px;
  margin-right: 25px;
}

.on_demand_hamburger_menu_close {
  display: flex;
  height: 25px;
  width: 25px;
  justify-content: center;
  align-items: center;
}

.on_demand_hamburger_menu_close span,
.on_demand_hamburger_menu_close span:before,
.on_demand_hamburger_menu_close span:after {
  width: 35px;
}

.on_demand_hamburger_menu_close span {
  background-color: #fff;
}

.on_demand_hamburger_menu_close span:before {
  transform: rotate(45deg);
}
.on_demand_hamburger_menu_close span:after {
  transform: rotate(-45deg);
}

.on_demand_hamburger_menu_content {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 100%; /*leftの値を変更してメニューを画面外へ*/
  z-index: 90;
  background-color: #ffffff;
  transition: all 0.5s; /*アニメーション設定*/
  text-align: center;
  overflow-y: scroll;
}

.on_demand_hamburger_menu_content a {
  color: inherit;
  text-decoration: none;
}

#on_demand_hamburger_menu_check:checked ~ .on_demand_hamburger_menu_content {
  left: 0; /*メニューを画面内へ*/
}

.on_demand_hamburger_menu_list {
  margin-top: 77px;
  margin-bottom: 110px;
  display: flex;
  flex-flow: column;
  row-gap: 30px;
}

.on_demand_hamburger_menu_list .menu-main-container {
  font-size: 24px;
}

.on_demand_hamburger_menu_sns {
  display: flex;
  justify-content: center;
  column-gap: 20px;
  margin-top: 20px;
}

.on_demand_hamburger_menu_separator {
  margin: 60px 30px;
  border: 0;
  border-top: 2px solid;
}

.on_demand_hamburger_menu_logo {
  width: 69.77vw;
  margin-left: auto;
  margin-right: auto;
}

.on_demand_hamburger_menu_text {
  margin-top: 30px;
  margin-bottom: 70px;
}

/* コース・レッスン */
.learn_dash_main {
  flex-grow: 1;
  padding: 35px;
}

.video_container {
  padding: 30px;
}

.video_content {
  width: 70vw;
}

.video_player {
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-bottom: 50px;
}
.video_player iframe {
  width: 100%;
  height: 100%;
}

.lessons_description {
  margin-top: 30px;
}

.lessons_description p {
  font-size: 16px;
}

.teacher_name {
  display: flex;
  align-items: center;
  margin-top: 120px;
}

.teacher_intro_wrapper {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 30px;
}

.banner_wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.banner_wrapper img {
  width: 100%;
  object-fit: contain;
  background-color: #f1f1f1;
}

.lessons__separator {
  margin: 60px 0px;
  border: 0;
  border-top: 2px solid;
}

.section_wrapper {
  background-color: #fafafa;
  padding: 35px;
  margin-bottom: 60px;
}

.section_wrapper h1 {
  font-weight: 600;
}

.section_wrapper .time {
  cursor: pointer;
}

.section_title,
.video_chapter {
  display: flex;
  align-items: center;
}

.section_title {
  margin-bottom: 40px;
}

.video_chapter_wrapper {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 20px;
}

.video_chapter {
  padding-bottom: 30px;
  border-bottom: 1px solid;
}

.video_chapter img {
  width: 128px;
  height: 128px;
  object-fit: contain;
  margin-right: 50px;
}

.video_chapter_time {
  margin-left: auto;
}

.fa-arrow-circle-right {
  font-size: 30px;
  margin-right: 15px;
}

.fa-play-circle {
  font-size: 24px;
  margin-right: 15px;
}

.fa-user-circle {
  font-size: 80px;
  margin-right: 24px;
}

@media screen and (max-width: 600px) {
  .learn_dash_main {
    padding: 35px;
  }

  .video_container {
    padding: 30px 0;
  }

  .video_content {
    width: 100%;
  }

  .video_content h1 {
    font-size: 24px;
  }

  .video_content h2 {
    font-size: 16px;
  }

  .video_chapter img {
    width: 64px;
    height: 64px;
    margin-right: 20px;
  }

  .banner_wrapper {
    grid-template-columns: repeat(1, 1fr);
  }

  .fa-play-circle {
    font-size: 16px;
  }

  .fa-user-circle {
    font-size: 60px;
  }
}

/* マイアカウント */
.myaccount_main {
  padding: 100px 10vw;
  flex-grow: 1;
}

/* アカウント登録 */
.register_main {
  padding: 100px 10vw;
  flex-grow: 1;
}

/* パスワードリセット */
.reset_main {
  padding: 100px 10vw;
  flex-grow: 1;
}

/* LearnDash 共通 */
.learndash-wrapper input[type="text"],
.learndash-wrapper input[type="password"] {
  height: 30px;
}

.learndash-wrapper input[type="submit"] {
  cursor: pointer;
}

.on_demand_archive {
  flex-grow: 1;
  padding-top: 50px;
  padding-left: 50px
}

/* Learn Dashデフォルトスタイルの修正 */
.ld-course-status-enrolled {
  display: none !important;
}

.ld-breadcrumbs {
  background: #ffffff !important;
  padding: 0 !important;
}

.ld-breadcrumbs span a {
  font-size: 14px !important;
  font-weight: normal !important;
}

.ld-status-complete,
.ld-status-progress,
.ld-status-icon {
  display: none !important;
}

.ld-tabs {
  margin: 0 !important;
}

.learndash_mark_complete_button {
  display: none !important;
}

.ld-course-step-back {
  font-size: 14px !important;
}

.ld-expand-button {
  display: none !important;
}

.ld-item-details {
  display: none !important;
}

.ld-course-status-seg-status {
  display: none;
}