/**
 * ------------------------------
 * tl-common.css
 * ------------------------------
 * @purpose
 * TL共通ページのcss
 *
 * @pages
 * ・(TL共通ページ)
 *
 * @note
 * ・まなびの記録フロートボタン
 * ・TLメニュー
 * ・TL下部バー :sp
 * ・.wm-css：自作cssは区別のため、ラッパーコンテナにwm-cssクラスを付している
 *
 * @version
 * 1.0.1
 */

/**
 * ----------------------------------------
 * 共通
 * ----------------------------------------
 */

/***
 * [TLメニュー :pc,sp]
 */

/* ボタンデザインとホバー時の挙動  */
.tutor-dashboard-left-menu ul {
  list-style: none;
  padding: 0;
}
.tutor-dashboard-left-menu ul li {
  width: auto;
}
.tutor-dashboard-left-menu a {
  display: block;
  padding: 10px 15px;
  background: #f5f5f5;
  border-radius: 4px;
  text-decoration: none;
  color: #333;
}
.tutor-dashboard-left-menu a:hover {
  background: #5474a3;
  color: #fff;
}
/* "ダッシュボード"の文字を削除 */
.tutor-dashboard-title {
  display: none !important;
}

/***
 * [画面調整(TLメニューとコンテンツとの間) :pc]
 */
@media screen and (min-width: 769px) {
  .tutor-frontend-dashboard-maincontent {
    width: 1000px;
    display: flex;
  }
  .tutor-dashboard-left-menu {
    flex: 0 0 250px;
  }
  .tutor-dashboard-content {
    flex: 1;
    margin-left: 35px;
  }

  /***
   * [TLメニュートグルボタン :pc]
   */
  /* デフォルトボタンは非表示 */
  .tutor-dashboard-nav-toggle {
    display: none;
  }
}

/***
 * [TLメニュートグルボタン :sp]
 */

/* TLメニューをトグルボタンで開閉 */
@media (max-width: 768px) {
  .tutor-frontend-dashboard-maincontent {
    flex-direction: column; /* ナビとコンテンツを縦並び */
  }
  .tutor-dashboard-nav-toggle {
    display: block;
    background: #729bd7;
    color: #fff;
    padding: 10px 15px;
    text-align: center;
    cursor: pointer;
    border-radius: 4px;
    margin-bottom: 10px;
  }
  .tutor-dashboard-left-menu {
    display: none; /* ナビはデフォルト非表示 */
  }
  .tutor-dashboard-left-menu.active {
    /* activeクラスが付いたら表示 */
    display: block;
    margin-bottom: 20px;
  }
}

/***
 * [TL下部バー :sp]
 */

/* 初期状態では非表示 */
#tutor-dashboard-footer-mobile {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

/* JS差し替え後に表示 */
#tutor-dashboard-footer-mobile.wm-menu-ready {
  opacity: 1;
  pointer-events: auto;
}
#wm-under-menu,
#wm-under-submenu {
  display: none;
}
@media screen and (max-width: 768px) {
  #tutor-dashboard-footer-mobile,
  #wm-under-menu {
    display: block !important;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    height: 64px;
    background: #fff;
    border-top: 1px solid #e5e5e5;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
  }

  #tutor-dashboard-footer-mobile .tutor-container,
  #wm-under-menu .tutor-container,
  #tutor-dashboard-footer-mobile .tutor-row,
  #wm-under-menu .tutor-row {
    height: 100%;
  }
  #tutor-dashboard-footer-mobile .tutor-row,
  #wm-under-menu .tutor-row {
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  #tutor-dashboard-footer-mobile a,
  #wm-under-menu a {
    flex: 1;
    height: 100%;
    padding: 6px 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center;
    text-decoration: none;
    color: #6b7280;
    font-size: 11px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
  }
  #tutor-dashboard-footer-mobile i,
  #wm-under-menu i {
    display: block !important;
    margin-bottom: 3px !important;
    font-size: 20px !important;
    line-height: 1 !important;
  }
  #tutor-dashboard-footer-mobile span,
  #wm-under-menu span {
    display: block !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
    letter-spacing: 0.02em;
  }
  body:has(#tutor-dashboard-footer-mobile),
  body:has(#wm-under-menu) {
    padding-bottom: 72px;
  }

  /* ひらくメニュー本体 */
  #wm-under-submenu {
    display: none;
  }
  #wm-under-submenu.is-active {
    display: block;
    position: fixed;
    left: 14px;
    right: 14px;
    bottom: 76px;
    z-index: 9998;
    max-height: 70vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
    padding: 12px;
  }
  #wm-under-submenu a {
    display: block;
    padding: 12px 14px;
    margin-bottom: 6px;
    background: #f5f5f5;
    border-radius: 6px;
    color: #333;
    text-decoration: none;
    font-size: 14px;
  }
  #wm-under-submenu a:hover {
    background: #5474a3;
    color: #fff;
  }
}

/***
 * ----------------------------------------
 *  # 各種ボタン・フロートボタン
 * ----------------------------------------
 */
/***
 * ["まなびの記録"フロートボタン :sp]
 *  ・TOPページ
 */
#wm-dashboard-btn {
  display: none;
}
@media screen and (max-width: 768px) {
  #wm-dashboard-btn {
    position: fixed;
    right: 16px;
    bottom: 20px;
    z-index: 9997;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 22px;
    border-radius: 999px;
    background: rgba(84, 116, 163, 0.92);
    backdrop-filter: blur(10px);
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.04em;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.15);
    transition:
      transform 0.2s ease,
      opacity 0.2s ease;
  }
  #wm-dashboard-btn i {
    font-size: 16px;
    line-height: 1;
  }
  #wm-dashboard-btn:hover {
    transform: translateY(-2px);
  }
  #wm-dashboard-btn,
  #wm-dashboard-btn:visited {
    color: #fff;
    text-decoration: none;
  }
  #wm-dashboard-btn:active {
    opacity: 0.7;
  }
}

/***
 * ["continue"フロートボタン (=学習を開始する・コースを続ける) :pc,sp]
 *   ・講座ページ
 */
#wm-floating-course-btn {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 82px;
  z-index: 9997;
}
#wm-floating-course-btn .tutor-btn {
  width: 100%;
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}
/* ボタンサイズ調整 :pc */
@media screen and (min-width: 769px) {
  #wm-floating-course-btn {
    left: auto;
    right: 32px;
    bottom: 32px;
    width: 320px;
  }
}

/***
 * ["講座TOP"フロートボタン :pc,sp]
 *  ・レッスンページ・QNページ
 */
/***
 * [講座TOPフロートボタン]
 */

/* 共通 */
#wm-course-top-btn {
  position: fixed;

  right: 20px;
  bottom: 90px;

  width: 60px;
  height: 60px;

  border-radius: 999px;

  background: #729bd7;
  color: #fff;

  display: flex;
  align-items: center;
  justify-content: center;

  text-decoration: none;

  z-index: 9998;

  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);

  transition:
    width 0.2s ease,
    padding 0.2s ease,
    background 0.2s ease;
}

/* アイコン */
.wm-course-top-icon i {
  font-size: 24px;
}

/* ラベルはデフォルト非表示 */
.wm-course-top-label {
  display: none;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 600;
}

/* ホバー */
#wm-course-top-btn:hover {
  background: #5474a3;
}

/* PCのみラベル表示 */
@media screen and (min-width: 769px) {
  #wm-course-top-btn:hover {
    width: auto;
    padding: 0 18px;
    gap: 8px;
  }

  #wm-course-top-btn:hover .wm-course-top-label {
    display: inline;
  }
}

/* SP */
@media screen and (max-width: 768px) {
  #wm-course-top-btn {
    width: auto;
    padding: 0 16px;
    gap: 8px;
  }

  .wm-course-top-label {
    display: inline;
  }
}

/**
 * ----------------------------------------
 * 不明
 * ----------------------------------------
 */
/* TODO -  何を示すのか不明・要確認  */
/***
 * [講座カード]
 */

div.tutor-meta.tutor-mt-auto {
  display: none !important;
}