/**
 * ------------------------------
 * tl-common.css
 * ------------------------------
 * @purpose
 * TL共通ページのcss
 *
 * @pages
 * ・(TL共通ページ／ログイン状態によるサイト共通ヘッダー)
 *
 * @note
 * ・まなびの記録フロートボタン [pc,sp]
 * ・学習空間ヘッダ [pc,sp]
 * ・学習サブヘッダ [pc,sp]
 * ・共通アカウントアイコン／メニュー [pc,sp]
 * ・学習ナビ [pc,sp]
 * ・レッスン一覧ボタン（Lesson / Quiz レッスンナビ表示）
 * ・設定画面ミニヘッダの戻る／閉じるボタン制御
 *
 * @version
 * 1.18.18
 */

/**
 * ----------------------------------------
 *  # 講座カードCTA共通仕様 [pc,sp]
 *    ・全講座ページ
 *    ・まなびの記録ページ
 *    ・登録済み／学習中／完了講座ページ
 * ----------------------------------------
 */
.wm-course-cta-container .list-item-button,
.wm-course-cta-container .wm-course-cta {
  width: 100% !important;
  max-width: none !important;
}

/* WaterMe内で再利用する本文テキストリンク（全講座のカリキュラムリンクを正本とする） */
a.wm-text-link {
  color: #087fbd !important;
  font-family: inherit;
  font-size: 15.8px;
  font-weight: 500;
  line-height: 1.6;
  text-decoration: none !important;
  transition: opacity 0.25s;
}

a.wm-text-link:hover,
a.wm-text-link:focus-visible {
  color: #087fbd !important;
  text-decoration: none !important;
  opacity: 0.8;
}

a.wm-text-link:focus-visible {
  outline: 2px solid rgba(8, 127, 189, 0.45);
  outline-offset: 2px;
}

/* リンク文字を右へ動かす必要がある画面だけで併用する修飾クラス。 */
a.wm-text-link--slide {
  transition:
    transform 0.25s,
    opacity 0.25s;
}

a.wm-text-link--slide:hover,
a.wm-text-link--slide:focus-visible {
  transform: translateX(0.4em);
}

@media (max-width: 575px) {
  a.wm-text-link {
    font-size: 14.5px;
    line-height: 1.58;
  }
}

/* ----------------------------------------
 * 受講生登録フォームの入力制約案内 [pc,sp]
 * ---------------------------------------- */
.wm-registration-guidance {
  position: absolute;
  right: auto;
  bottom: calc(100% + 8px);
  left: 12px;
  z-index: 2;
  display: block;
  width: max-content;
  max-width: min(360px, calc(100vw - 48px));
  padding: 10px 12px;
  border: 1px solid #4b5563;
  border-radius: 6px;
  background: #4b5563;
  color: #fff;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.16);
  font-size: 0.875rem;
  line-height: 1.55;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition:
    opacity 0.15s ease,
    transform 0.15s ease;
}

.wm-registration-username-field {
  position: relative;
}

.wm-registration-username-field.wm-registration-guidance-open
  .wm-registration-guidance {
  opacity: 1;
  transform: translateY(0);
}

.wm-registration-guidance::before {
  content: "";
  position: absolute;
  left: 18px;
  bottom: -6px;
  border-top: 6px solid #4b5563;
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
}

.wm-registration-guidance code {
  padding: 0 0.25em;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

.wm-registration-guidance__error {
  display: block;
  margin-top: 6px;
  color: #ffe1df;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.6;
}

.tutor-dashboard input[name="user_login"][aria-invalid="true"],
.tutor-frontend input[name="user_login"][aria-invalid="true"] {
  border-color: #b42318 !important;
}

@media (max-width: 575px) {
  .wm-registration-guidance {
    right: auto;
    left: 0;
    width: calc(100vw - 48px);
    max-width: none;
  }
}

/**
 * ----------------------------------------
 * # 進捗100%・未合格クイズありの案内 [pc,sp]
 * ----------------------------------------
 */
.tutor-learning-sidebar.wm-has-incomplete-quizzes .tutor-progress-bar,
.tutor-learning-sidebar.wm-has-incomplete-quizzes
  .tutor-learning-progress
  [role="progressbar"],
.tutor-learning-sidebar.wm-has-incomplete-quizzes .tutor-progress-filled {
  --tutor-color-primary: #f28c38;
}

.tutor-learning-sidebar.wm-has-incomplete-quizzes .tutor-progress-bar > *,
.tutor-learning-sidebar.wm-has-incomplete-quizzes .tutor-progress-filled,
.tutor-learning-sidebar.wm-has-incomplete-quizzes [role="progressbar"] > * {
  background-color: #f28c38 !important;
  background-image: linear-gradient(90deg, #e97932, #f6a64d) !important;
}

.wm-incomplete-quiz-progress-notice {
  margin: 10px 0 0;
  padding: 9px 11px;
  border: 1px solid #f5c38d;
  border-radius: 8px;
  background: #fff7ed;
  color: #9a4c10;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.55;
}

.wm-certificate-lock-has-incomplete-quizzes .tutor-progress-bar > *,
.wm-certificate-lock-has-incomplete-quizzes [role="progressbar"] > *,
.wm-certificate-lock-has-incomplete-quizzes .tutor-progress-filled {
  background-color: #f28c38 !important;
  background-image: linear-gradient(90deg, #e97932, #f6a64d) !important;
}

.wm-certificate-lock-quiz-notice {
  margin: 14px 0 20px;
  padding: 9px 13px;
  border: 1px solid #f5c38d;
  border-radius: 8px;
  background: #fff7ed;
  color: #9a4c10;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.55;
}

@media screen and (max-width: 768px) {
  .wm-incomplete-quiz-progress-notice {
    margin-top: 8px;
    padding: 8px 10px;
    font-size: 12px;
  }

  .wm-certificate-lock-quiz-notice {
    margin-top: 10px;
    margin-bottom: 16px;
    padding: 8px 11px;
    font-size: 12px;
  }
}

.wm-course-cta-container .wm-course-cta {
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 7px 12px !important;
  border: 0 !important;
  border-radius: 6px;
  box-sizing: border-box;
  box-shadow: none !important;
  font-family: inherit;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  transition:
    filter 0.2s ease,
    transform 0.2s ease;
}

.tutor-single-course-sidebar .wm-course-cta-container,
.wm-course-floating-cta.wm-course-cta-container {
  width: 100%;
}

/* フロートCTAはPC・SPとも左右の余白を均等にし、画面中央へ配置する。 */
.wm-course-floating-cta.wm-course-cta-container {
  position: fixed;
  right: 24px;
  bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  left: 24px;
  z-index: 9990;
  width: auto;
  box-sizing: border-box;
}

.wm-course-floating-cta__action,
.wm-course-floating-cta__action .tutor-btn,
.wm-course-floating-cta__action.tutor-btn,
.wm-course-floating-cta form {
  width: 100%;
  margin: 0 !important;
}

@media (max-width: 768px) {
  .wm-course-floating-cta.wm-course-cta-container {
    right: 14px;
    bottom: calc(82px + env(safe-area-inset-bottom, 0px));
    left: 14px;
  }
}

/* 講座詳細（通常／バンドル）のCTAは、Tutor LMSの状態別スタイルに左右されず中央揃えにする。 */
.single-courses .tutor-single-course-sidebar .wm-course-cta-container,
.single-course-bundle .tutor-single-course-sidebar .wm-course-cta-container {
  display: flex;
  justify-content: center;
}

.single-courses
  .tutor-single-course-sidebar
  .wm-course-cta-container
  .wm-course-cta,
.single-course-bundle
  .tutor-single-course-sidebar
  .wm-course-cta-container
  .wm-course-cta {
  margin-right: auto !important;
  margin-left: auto !important;
}

.wm-course-cta-container .wm-course-cta:hover {
  filter: brightness(0.96);
  transform: translateY(-1px);
}

.wm-course-cta-container .wm-course-cta:focus-visible {
  outline: 3px solid rgba(74, 103, 232, 0.3);
  outline-offset: 3px;
}

.wm-course-cta-container .wm-course-cta--certificate {
  gap: 6px;
  background: #56b6de !important;
  color: #fff !important;
}

.wm-course-cta--certificate > i {
  flex: 0 0 auto;
  font-size: 1em;
}

.wm-course-cta-container .wm-course-cta--learning {
  background: #4a67e8 !important;
  color: #fff !important;
}

/* ----------------------------------------
 * Course bundle LP: included courses and curriculum heading de-duplication
 * ---------------------------------------- */
.wm-course-bundle-lp .wm-course-bundle-curriculum-heading {
  display: none !important;
}

.wm-course-bundle-lp .wm-course-bundle-curriculum-title {
  margin-bottom: 20px !important;
}

.wm-course-bundle-included-courses {
  box-sizing: border-box;
  width: calc(100% - 56px);
  max-width: none;
  margin: 8px auto 42px;
  padding: 30px 48px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #f7f8fa;
  scroll-margin-top: 0;
}

.wm-course-bundle-curriculum-anchor {
  display: block;
  scroll-margin-top: 76px;
}

.wm-course-bundle-included-courses h2 {
  margin: 0 0 8px;
  color: #475569;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
}

.wm-course-bundle-included-courses .wm-bundle-course-list-guide {
  margin: 0 0 8px;
  color: #64748b;
  font-size: 14px;
  line-height: 1.6;
}

/* Prevent SWELL's standard H2 bar from being inherited by this card label. */
.wm-course-bundle-included-courses .wm-bundle-course-list-title {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.wm-course-bundle-included-courses .wm-bundle-course-list-title::before {
  display: none !important;
  content: none !important;
}

.wm-course-bundle-included-courses ul {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0 18px;
  list-style: none;
}

.wm-course-bundle-included-courses li {
  min-width: 0;
  margin: 0;
  padding-left: 2.2em;
  line-height: 1.55;
}

.wm-course-bundle-included-courses li::before {
  content: "▶";
  display: inline-block;
  width: 2.2em;
  margin-left: -2.2em;
  color: #64748b;
  font-size: 0.72em;
  vertical-align: 0.08em;
}

/* Reuse Tutor's source list as a compact text-only list inside the LP. */
.wm-course-bundle-included-courses .tutor-bundle-feature-image,
.wm-course-bundle-included-courses .tutor-bundle-course-list-counter,
.wm-course-bundle-included-courses .tutor-bundle-course-list-desc > p {
  display: none !important;
}

.wm-course-bundle-included-courses .tutor-bundle-course-list-wrapper {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

.wm-course-bundle-included-courses .tutor-bundle-course-list-desc,
.wm-course-bundle-included-courses .tutor-bundle-course-list-desc > a {
  display: block;
  min-width: 0;
}

.wm-course-bundle-included-courses .tutor-bundle-course-title {
  margin: 0 !important;
  color: #087fbd !important;
  font-family: inherit;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
}

.wm-course-bundle-included-courses
  .tutor-bundle-course-list-desc
  > a:hover
  .tutor-bundle-course-title,
.wm-course-bundle-included-courses
  .tutor-bundle-course-list-desc
  > a:focus-visible
  .tutor-bundle-course-title {
  opacity: 0.8;
}

.wm-course-bundle-included-courses:focus-visible {
  outline: 3px solid rgba(8, 127, 189, 0.3);
  outline-offset: 5px;
}

@media (max-width: 575px) {
  .wm-course-bundle-included-courses {
    width: calc(100% - 20px);
    margin: 10px auto 32px;
    padding: 22px 28px;
  }

  .wm-course-bundle-included-courses h2 {
    font-size: 14px;
  }
}

.wm-course-cta-container .wm-course-cta--purchase {
  border: 1px solid rgba(157, 166, 43, 0.18) !important;
  background: linear-gradient(
    180deg,
    #f5f887 0%,
    #eef276 55%,
    #e4e963 100%
  ) !important;
  color: #273451 !important;
  box-shadow:
    0 2px 0 rgba(151, 161, 38, 0.12),
    0 4px 10px rgba(91, 105, 30, 0.08) !important;
}

.wm-course-cta-container .wm-course-cta--purchase:hover {
  filter: brightness(1.01);
  box-shadow:
    0 3px 0 rgba(151, 161, 38, 0.14),
    0 6px 12px rgba(91, 105, 30, 0.1) !important;
}

.wm-course-cta-container .wm-course-cta--purchase:active {
  box-shadow:
    0 1px 0 rgba(151, 161, 38, 0.1),
    0 2px 5px rgba(91, 105, 30, 0.07) !important;
  transform: translateY(1px);
}

.tutor-course-card > .tutor-card-footer.wm-course-card-footer--purchase > div {
  display: flex !important;
  flex-direction: column;
  align-items: stretch !important;
  gap: 7px;
  width: 100%;
}

.tutor-course-card
  > .tutor-card-footer.wm-course-card-footer--purchase
  > div
  > .list-item-price {
  align-self: flex-start;
  margin: 0 !important;
  color: #475569;
  font-size: 13px;
  line-height: 1.4;
}

@media screen and (max-width: 768px) {
  .wm-course-cta-container .wm-course-cta {
    min-height: 38px;
    padding: 6px 10px !important;
    font-size: 13.5px !important;
  }
}

/** 全講座では、JSの役割判定前でもTutor LMS標準CTAの寸法を統一する。 */
body.wm-courses-all-page .tutor-course-card > .tutor-card-footer > div {
  flex-direction: column;
  align-items: stretch !important;
  gap: 7px;
  width: 100%;
}

body.wm-courses-all-page .tutor-course-card .list-item-button,
body.wm-courses-all-page .tutor-course-card .tutor-card-footer .tutor-btn {
  width: 100% !important;
  max-width: none !important;
}

body.wm-courses-all-page .tutor-course-card .tutor-card-footer .tutor-btn {
  min-height: 40px;
  font-size: 14px !important;
  font-weight: 600 !important;
}

/** Course BundleだけはTutor LMS既定のフッターが内容幅へ縮むため、カード全幅へ補正する。 */
.tutor-course-card.wm-course-card--bundle > .tutor-card-footer,
.tutor-course-card.wm-course-card--bundle > .tutor-card-footer > .tutor-d-flex,
.tutor-course-card.wm-course-card--bundle
  > .tutor-card-footer
  .list-item-button,
.tutor-course-card.wm-course-card--bundle
  > .tutor-card-footer
  .tutor-course-list-btn {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box;
}

.tutor-course-card.wm-course-card--bundle > .tutor-card-footer > .tutor-d-flex {
  flex: 1 1 100% !important;
  align-items: stretch !important;
}

.tutor-course-card.wm-course-card--bundle
  > .tutor-card-footer
  .list-item-button {
  display: block !important;
  align-self: stretch !important;
  flex: 1 1 100% !important;
}

.tutor-course-card.wm-course-card--bundle
  > .tutor-card-footer
  .tutor-course-list-btn {
  display: flex !important;
}

/**
 * ----------------------------------------
 *  # まなびの記録フロートボタン [pc,sp]
 *    ・表示対象：サイトTOP
 *    ・.wm_dashboard_btn_exist セレクタが存在するページに表示(js側で定義)
 * ----------------------------------------
 */
/* PC基準：少し横長で存在感を出す */
#wm-dashboard-btn {
  position: fixed;
  right: 28px;
  bottom: 32px;
  z-index: 9997;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 260px;
  padding: 16px 26px;
  border-radius: 999px;
  background: rgba(84, 116, 163, 0.94);
  backdrop-filter: blur(10px);
  color: #fff;
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.05em;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
  transition:
    transform 0.2s ease,
    opacity 0.2s ease,
    box-shadow 0.2s ease;
}

/**
 * ----------------------------------------
 *  # v1.14.19 レッスンナビ「すべてひらく／とじる」 [pc,sp]
 *    ・進捗バー直下の右側に置く低優先度のテキストリンク
 * ----------------------------------------
 */
.wm-curriculum-expand-all {
  display: block;
  width: fit-content;
  min-height: 32px;
  margin: 2px 0 0 auto;
  padding: 7px 0 3px 10px;
  border: 0;
  background: transparent;
  color: #8a929e;
  font-family: inherit;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  text-decoration: none;
  cursor: pointer;
}

/* 修了条件の案内があるときは、開閉操作をレッスン一覧の導線へ寄せる。 */
.tutor-learning-progress:has(.wm-incomplete-quiz-progress-notice)
  .wm-curriculum-expand-all {
  min-height: 30px;
  margin: 8px 0 -4px auto;
  padding: 6px 0 0 10px;
}

/* 「すべてひらく」の次にあるレッスン一覧の余白を詰め、操作対象との関係を明確にする。 */
.tutor-learning-progress:has(.wm-incomplete-quiz-progress-notice)
  + .tutor-learning-nav {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Tutor LMS標準のp-4（下16px）だけを縮め、一覧を開閉操作へ近づける。 */
.tutor-learning-progress:has(.wm-incomplete-quiz-progress-notice) {
  padding-bottom: 4px !important;
}

.wm-curriculum-expand-all:hover,
.wm-curriculum-expand-all:focus {
  background: transparent;
  color: #5f6875;
  text-decoration: underline;
}

.wm-curriculum-expand-all:focus-visible {
  outline: 2px solid rgba(65, 105, 216, 0.42);
  outline-offset: 2px;
}

/**
 * ----------------------------------------
 *  # レッスンナビ「もっと」：リサイズ式パネルをポップオーバー化 [pc,sp]
 *    ・講座サブページでTutor LMSが出力するexpandedパネル向け
 *    ・保存されたpagesHeightや残り表示領域に表示方式を左右させない
 * ----------------------------------------
 */
.tutor-learning-sidebar-pages.wm-curriculum-more-panel {
  position: relative !important;
  inset: auto !important;
  z-index: 20;
  flex: 0 0 auto;
  min-height: 48px;
  overflow: visible !important;
  background: rgba(255, 255, 255, 0.98);
}

.wm-curriculum-more-panel .tutor-sidebar-resizer {
  display: none !important;
}

.wm-curriculum-more-panel .tutor-sidebar-restore-dropdown {
  position: relative !important;
  inset: auto !important;
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  min-height: 48px;
  padding: 6px 12px;
}

.wm-curriculum-more-panel .wm-curriculum-more-trigger {
  position: static !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: auto !important;
  min-width: 96px;
  min-height: 36px;
  padding: 7px 12px !important;
  border: 1px solid rgba(84, 116, 163, 0.16) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.98) !important;
  color: #334155 !important;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  box-shadow: 0 3px 12px rgba(15, 23, 42, 0.08);
}

.wm-curriculum-more-panel .wm-curriculum-more-trigger svg {
  transform: rotate(180deg);
}

.wm-curriculum-more-panel.wm-curriculum-more-open
  .wm-curriculum-more-trigger
  svg {
  transform: none;
}

.tutor-learning-sidebar-pages.wm-curriculum-more-panel > .tutor-learning-pages {
  position: absolute !important;
  top: auto !important;
  right: auto !important;
  bottom: calc(100% + 8px) !important;
  left: 12px !important;
  z-index: 10030 !important;

  display: none !important;
  width: min(280px, calc(100vw - 32px)) !important;
  max-width: calc(100vw - 32px) !important;
  height: auto !important;
  max-height: calc(100vh - 176px) !important;
  max-height: calc(100dvh - 176px) !important;
  margin: 0 !important;
  padding: 8px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  box-sizing: border-box;

  border: 1px solid rgba(84, 116, 163, 0.12);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.99);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.tutor-learning-sidebar-pages.wm-curriculum-more-panel.wm-curriculum-more-open
  > .tutor-learning-pages {
  display: block !important;
}

.wm-curriculum-more-panel .tutor-learning-pages-nav {
  display: flex !important;
  flex-direction: column;
  gap: 2px;
}

.wm-curriculum-more-panel
  .tutor-learning-pages-item:not(.wm-curriculum-promoted-source) {
  display: flex !important;
  align-items: center;
  width: 100%;
  min-height: 42px;
  padding: 9px 10px !important;
  box-sizing: border-box;
  border-radius: 9px;
}
#wm-dashboard-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}
#wm-dashboard-btn,
#wm-dashboard-btn:visited {
  color: #fff;
  text-decoration: none;
}
#wm-dashboard-btn:active {
  opacity: 0.75;
}
.wm-dashboard-icon i {
  font-size: 17px;
  line-height: 1;
}
.wm-dashboard-label {
  white-space: nowrap;
}

/* SP：少し控えめに */
@media screen and (max-width: 768px) {
  #wm-dashboard-btn {
    right: 16px;
    bottom: 20px;
    min-width: auto;
    padding: 14px 20px;
    gap: 10px;
    font-size: 14px;
  }
  .wm-dashboard-icon i {
    font-size: 16px;
  }
}

/**
 * ----------------------------------------
 *  # 学習空間ヘッダ [pc,sp]
 *    ・表示対象：学習空間の全ページ（SWELLヘッダーが出力されていないTutorLMS関連ページに表示）
 *      ※WM学習空間ページでは、SWELLヘッダーがあってもWM簡易ヘッダーへ統一
 *    ・画面上部でサイトタイトル＋リンクのみ
 * ----------------------------------------
 */

/**
 * WM学習空間ページではSWELLヘッダーを非表示
 * 例：/dashboard/all-courses/
 */
body.wm-learning-space-header #header,
body.wm-learning-space-header #fix_header,
body.wm-learning-space-header .l-header,
body.wm-learning-space-header .l-fixHeader,
body.wm-learning-space-header #sp_menu {
  display: none !important;
}

/**
 * ----------------------------------------
 *  # ログイン状態確認中の表示 [pc,sp]
 *    ・古いキャッシュ内のユーザー情報・ログインリンクを先に表示しない
 *    ・状態不明時はロゴと再読み込み操作のみを表示する
 * ----------------------------------------
 */
html.wm-header-pending #header,
html.wm-header-pending #fix_header,
html.wm-header-pending #sp_menu,
html.wm-header-pending .tutor-dashboard-header,
html.wm-header-error #header,
html.wm-header-error #fix_header,
html.wm-header-error #sp_menu,
html.wm-header-error .tutor-dashboard-header {
  display: none !important;
}

/** [ 未ログイン時は、以前学習ヘッダーを使っていたページでもWMヘッダーを優先 ] */
body.wm-public-header #header {
  display: block !important;
}
html.wm-header-pending body.wm-public-header #header,
html.wm-header-error body.wm-public-header #header {
  display: none !important;
}

.wm-header-retry:focus-visible {
  outline: 2px solid #5474a3;
  outline-offset: 2px;
}
.wm-header-retry {
  display: block;
  margin: 0 auto;
  padding: 6px 12px;
  color: #475569;
  background: transparent;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
}
/***
 * SWELLヘッダーが存在しないTutorLMSページ用の補完ヘッダー
 */
#wm-site-header {
  position: sticky;
  top: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid rgba(84, 116, 163, 0.12);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  z-index: 9995;
}

.wm-site-header-inner {
  min-height: 56px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;

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

.wm-site-header-logo {
  font-family: "HonokaMaru", "游ゴシック", sans-serif;
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #333;
  text-decoration: none;
}

.wm-site-header-logo:visited {
  color: #333;
  text-decoration: none;
}

.wm-site-header-logo:hover {
  opacity: 0.75;
}

/* SP */
@media screen and (max-width: 768px) {
  #wm-site-header {
    top: 0;
  }

  .wm-site-header-inner {
    min-height: 48px;
    padding: 0 16px;
  }

  .wm-site-header-logo {
    font-size: 1.27rem;
    white-space: nowrap;
  }
}

/**
 * ----------------------------------------
 *  # 学習サブヘッダ [pc,sp]
 *    ・Tutor LMS標準ヘッダを共通パーツとして再利用
 *    ・メインヘッダ直下へ移動
 *    ・PCは1行、SPは2行
 *    ・アカウントアイコン／ポップオーバー機能はTutor LMS標準を維持
 * ----------------------------------------
 */
body.wm-learning-subheader-ready .tutor-dashboard-header {
  position: relative !important;
  height: auto;
  inset: auto !important;
  z-index: 9993;
  width: 100%;
  margin: 0;
  padding: 0;
  background: rgba(253, 253, 253, 0.98);
  border-bottom: 1px solid rgba(84, 116, 163, 0.1);
  box-shadow: none;
}

body.wm-learning-subheader-ready .tutor-dashboard-header-inner {
  width: 100%;
  max-width: 1200px;
  height: auto;
  min-height: 92px;
  margin: 0 auto;
  padding: 18px 24px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

body.wm-learning-subheader-ready .tutor-dashboard-header-left {
  min-width: 0;
  flex: 1 1 auto;
}

.wm-learning-subheader-copy {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 18px;
  min-width: 0;
}

.wm-learning-subheader-message {
  color: #6b7280;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.5;
}

.wm-learning-subheader-user {
  color: #111827;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}

body.wm-learning-subheader-ready .tutor-dashboard-header-right {
  flex: 0 0 auto;
  margin-left: auto;
}

body.wm-learning-subheader-ready .tutor-dashboard-header-user-avatar {
  width: 46px;
  height: 46px;
  min-width: 46px;
  border-radius: 999px;
}

body.wm-learning-subheader-ready .tutor-dashboard-header-user-popover {
  z-index: 10040;
}

@media screen and (max-width: 768px) {
  body.wm-learning-subheader-ready .tutor-dashboard-header-inner {
    min-height: 82px;
    padding: 10px 14px 11px;
    gap: 12px;
  }

  .wm-learning-subheader-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
  }

  .wm-learning-subheader-message {
    max-width: calc(100vw - 88px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12.5px;
    line-height: 1.35;
  }

  .wm-learning-subheader-user {
    max-width: calc(100vw - 88px);
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 13px;
    line-height: 1.4;
  }

  body.wm-learning-subheader-ready .tutor-dashboard-header-user-avatar {
    width: 38px;
    height: 38px;
    min-width: 38px;
  }
}

/**
 * ----------------------------------------
 *  # 学習ナビ [pc,sp]
 *    ・表示対象：TutorLMS関連ページ、または .sp_under_menu_exist が存在するページ
 *    ・PC/SPで同一のHTML・操作・アクティブ判定を使用
 *    ・PC/SPとも画面下部いっぱいに表示
 *    ・既存互換のためDOM id/classは wm-sp-under-menu を継続使用
 * ----------------------------------------
 */

/**
 * Tutor LMS標準ナビはPC/SPともに非表示
 */
.tutor-dashboard-sidebar,
.tutor-dashboard-nav-mobile {
  display: none !important;
}

body.wm-learning-nav-ready .tutor-dashboard-layout {
  display: block !important;
}

body.wm-learning-nav-ready .tutor-dashboard-main {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
}

/**
 * WaterMe 学習ナビ共通
 */
#wm-sp-under-menu {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9996;

  display: grid;
  grid-template-columns: 1fr 1.25fr 1fr 0.8fr;
  align-items: center;

  width: 100%;
  max-width: 100vw;
  min-height: 72px;
  padding: 7px 8px calc(7px + env(safe-area-inset-bottom));

  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(14px);
  border-top: 1px solid rgba(84, 116, 163, 0.12);
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  border-radius: 0;
  box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.08);

  box-sizing: border-box;
  transform: none;
}

body.wm-learning-nav-ready {
  padding-bottom: calc(86px + env(safe-area-inset-bottom));
}

.wm-sp-under-menu-item {
  height: 56px;
  min-width: 0;
  padding: 0 8px;
  border: 0;
  border-radius: 14px;

  background: transparent;
  color: #2f3a46;
  text-decoration: none;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;

  font-family: inherit;
  cursor: pointer;

  transition:
    background 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}

.wm-sp-under-menu-item:visited {
  color: #2f3a46;
  text-decoration: none;
}

.wm-sp-under-menu-item:hover {
  opacity: 1;
  background: rgba(84, 116, 163, 0.08);
}

.wm-sp-under-menu-item:active {
  transform: translateY(1px);
}

.wm-sp-under-menu-item:focus-visible {
  outline: 2px solid rgba(65, 105, 216, 0.42);
  outline-offset: -2px;
}

.wm-sp-under-menu-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 17px;
}

.wm-sp-under-menu-label {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  line-height: 1.1;
  letter-spacing: 0.01em;
}

.wm-sp-under-menu-item.is-active {
  color: #4169d8;
  background: rgba(65, 105, 216, 0.12);
  font-weight: 600;
}

/**
 * 中央導線：学習中 ☞
 */
.wm-sp-under-menu-room {
  color: #1f2a36;
  font-weight: 700;
}

.wm-sp-under-menu-room .wm-sp-under-menu-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.wm-sp-under-menu-room.is-active {
  color: #4169d8;
  background: rgba(65, 105, 216, 0.14);
  font-weight: 700;
}

/**
 * 「もっと」
 */
.wm-sp-under-menu-more-wrap {
  position: relative;
  min-width: 0;
}

.wm-sp-under-menu-more-btn {
  width: 100%;
}

.wm-sp-under-menu-popover {
  position: absolute;
  right: 4px;
  bottom: calc(100% + 10px);

  width: 190px;
  padding: 8px;

  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(84, 116, 163, 0.12);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
  backdrop-filter: blur(14px);

  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);

  transition:
    opacity 0.18s ease,
    visibility 0.18s ease,
    transform 0.18s ease;
}

.wm-sp-under-menu-popover.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.wm-sp-under-menu-popover-item {
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 12px;
  border-radius: 12px;

  color: #2f3a46;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
}

.wm-sp-under-menu-popover-item:visited {
  color: #2f3a46;
  text-decoration: none;
}

.wm-sp-under-menu-popover-item:hover {
  background: rgba(84, 116, 163, 0.08);
  opacity: 1;
}

.wm-sp-under-menu-popover-item.is-active {
  color: #4169d8;
  background: rgba(65, 105, 216, 0.12);
  font-weight: 600;
}

/* WaterMe登録特典：文言とギフトアイコンで用途を明示する常設メニュー */
.wm-sp-under-menu-popover-item.wm-sp-under-menu-benefits,
.wm-sp-under-menu-popover-item.wm-sp-under-menu-benefits:visited {
  border: 1px solid rgba(171, 152, 37, 0.24);
  background: linear-gradient(180deg, #fffbd0 0%, #f7ef7a 100%);
  color: #4e4a1c;
  font-weight: 700;
}

.wm-sp-under-menu-popover-item.wm-sp-under-menu-benefits:hover,
.wm-sp-under-menu-popover-item.wm-sp-under-menu-benefits:focus-visible {
  background: linear-gradient(180deg, #fffde0 0%, #f8f08a 100%);
  color: #373410;
}

/**
 * PC：縦方向の占有を抑えつつ、操作しやすさを維持
 */
@media screen and (min-width: 769px) {
  #wm-sp-under-menu {
    min-height: 62px;
    padding: 5px 14px;
  }

  body.wm-learning-nav-ready {
    padding-bottom: 68px;
  }

  .wm-sp-under-menu-item {
    height: 48px;
    padding: 0 10px;
    gap: 3px;
    border-radius: 12px;
  }

  .wm-sp-under-menu-icon {
    font-size: 16px;
  }

  .wm-sp-under-menu-label,
  .wm-sp-under-menu-room .wm-sp-under-menu-label {
    font-size: 10.5px;
  }
}

/**
 * SPでは従来どおり画面幅いっぱいに表示
 */
@media screen and (max-width: 768px) {
  #wm-sp-under-menu {
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100vw;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    transform: none;
  }

  body.wm-learning-nav-ready {
    padding-bottom: calc(78px + env(safe-area-inset-bottom));
  }

  .wm-sp-under-menu-item {
    padding: 0 4px;
  }
}

/**
 * ----------------------------------------
 *  # レッスン一覧ボタン [sp]
 *    ・表示対象ページ：レッスン,クイズ
 *    ・レッスンナビの開閉
 *    ・画面右上
 * ----------------------------------------
 */

/**
 * 講座名リンク＋SP用閉じるボタン
 */
.wm-curriculum-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(84, 116, 163, 0.12);
  background: rgba(255, 255, 255, 0.98);
}

.wm-curriculum-result-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  flex: 0 0 100%;
  width: 100%;
}

/**
 * Tutor LMS純正のコース修了／再受講UI。
 * DOMを複製せず、講座タイトル直下へ移動した要素だけを整える。
 */
.wm-curriculum-complete-control {
  display: flex !important;
  flex-direction: column;
  flex: 0 0 100%;
  width: 100%;
  margin: 0 !important;
  gap: 0 !important;
}

.wm-curriculum-complete-control .tutor-tooltip-wrap {
  display: block;
  width: 100%;
}

/** PCで修了条件未達時に表示する、Tutor LMS文言を再利用した案内。 */
.wm-course-complete-requirement-notice {
  position: fixed;
  z-index: 10050;
  display: none;
  max-width: 220px;
  padding: 10px 12px;
  box-sizing: border-box;
  border-radius: 4px;
  background: #1f2937;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  text-align: left;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.2);
}

.wm-course-complete-requirement-notice::before {
  position: absolute;
  top: -6px;
  left: 50%;
  width: 0;
  height: 0;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #1f2937;
  border-left: 6px solid transparent;
  content: "";
  transform: translateX(-50%);
}

.wm-course-complete-requirement-notice.is-visible {
  display: block;
}

/**
 * レッスンパネル上部へ移動したTutor LMS標準の修了導線を正本にする。
 * サブヘッダに残る同一導線は、PC/SPともレイアウト領域ごと非表示にする。
 */
.wm-curriculum-complete-control--secondary {
  display: none !important;
}

.wm-curriculum-complete-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 38px;
  margin: 0;
  padding: 7px 14px;
  box-sizing: border-box;
  border: 1px solid #d8dee8 !important;
  border-radius: 8px;
  background: #edf0f4 !important;
  color: #697586 !important;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  cursor: pointer;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

.wm-curriculum-complete-button:hover,
.wm-curriculum-complete-button:focus {
  border-color: #cbd2dd !important;
  background: #e3e7ed !important;
  color: #697586 !important;
}

.wm-course-complete-native-icon--hidden {
  display: none !important;
}

.wm-course-complete-lock-icon {
  flex: 0 0 auto;
}

.wm-curriculum-complete-control.is-ready .wm-curriculum-complete-button {
  border-color: #49bde8 !important;
  background: #49bde8 !important;
  color: #fff !important;
}

.wm-curriculum-complete-control.is-ready .wm-curriculum-complete-button:hover,
.wm-curriculum-complete-control.is-ready .wm-curriculum-complete-button:focus {
  border-color: #2da9d8 !important;
  background: #2da9d8 !important;
  color: #fff !important;
  transform: translateY(-1px);
}

/* Tutor LMS標準処理を維持する元リンクは、メニュー上からのみ隠す。 */
.wm-curriculum-promoted-source {
  display: none !important;
}

.wm-curriculum-result-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  min-height: 40px;
  padding: 8px 12px;
  box-sizing: border-box;
  border: 1px solid #4169d8;
  border-radius: 8px;
  background: #4169d8;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

.wm-curriculum-result-link:visited,
.wm-curriculum-result-link:hover,
.wm-curriculum-result-link:focus {
  color: #fff;
  text-decoration: none;
}

.wm-curriculum-result-link:hover {
  border-color: #3157c2;
  background: #3157c2;
  transform: translateY(-1px);
}

/* 修了後の修了証は「このコースを修了します」と同じ水色で強調する。 */
.wm-curriculum-result-link--certificate {
  border-color: #49bde8;
  background: #49bde8;
}

.wm-curriculum-result-link--certificate:hover,
.wm-curriculum-result-link--certificate:focus {
  border-color: #2da9d8;
  background: #2da9d8;
}

.wm-curriculum-result-link.is-locked {
  border-color: #d8dee8;
  background: #edf0f4;
  color: #697586;
}

.wm-curriculum-result-link.is-locked:visited,
.wm-curriculum-result-link.is-locked:hover,
.wm-curriculum-result-link.is-locked:focus {
  color: #697586;
}

.wm-curriculum-result-link.is-locked:hover {
  border-color: #cbd2dd;
  background: #e3e7ed;
}

.wm-curriculum-course-link {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  color: rgb(3, 140, 195);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  cursor: pointer;
  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
}

.wm-curriculum-course-link:visited {
  color: rgb(3, 140, 195);
  text-decoration: none;
}

.wm-curriculum-course-link:hover {
  opacity: 0.65;
}

.wm-curriculum-course-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wm-curriculum-course-external {
  flex: 0 0 auto;
  font-size: 12px;
  transform: translateY(-1px);
}

/**
 * TutorLMS標準のサイドバー上部タイトル行は独自ヘッダーへ統一
 */
.tutor-learning-sidebar
  > .tutor-hidden.tutor-lg-flex.tutor-items-center.tutor-px-4 {
  display: none !important;
}

/**
 * SP：右上トグルを「レッスン一覧」ボタンへ変更
 */
@media screen and (max-width: 768px) {
  .tutor-learning-header-toggle-mobile > .wm-curriculum-toggle {
    width: auto;
    min-width: 116px;
    height: 38px;
    padding: 0 13px;
    gap: 7px;
    border: 1px solid rgba(84, 116, 163, 0.16);
    border-radius: 999px;
    background: rgba(84, 116, 163, 0.08);
    color: #334155;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    transition:
      background 0.2s ease,
      color 0.2s ease,
      box-shadow 0.2s ease,
      transform 0.2s ease;
  }

  .tutor-learning-header-toggle-mobile > .wm-curriculum-toggle:hover {
    background: rgba(84, 116, 163, 0.14);
    opacity: 1;
  }

  body.wm-curriculum-open
    .tutor-learning-header-toggle-mobile
    > .wm-curriculum-toggle {
    background: rgba(84, 116, 163, 0.94);
    color: #fff;
    box-shadow: 0 4px 12px rgba(84, 116, 163, 0.2);
  }

  .wm-curriculum-toggle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
  }

  .wm-curriculum-toggle-label {
    white-space: nowrap;
  }

  .wm-curriculum-header {
    padding: 12px 16px;
  }

  .wm-curriculum-result-link {
    min-height: 38px;
    padding-inline: 8px;
    font-size: 12px;
  }

  .wm-curriculum-course-link {
    font-size: 13px;
  }
}

/**
 * Tutor LMS標準ヘッダー左側の表示を非表示
 * [SP] 講義へ進む ☞
 * [PC] ← B-01: HP制作講座
 */
.tutor-learning-header-back,
.tutor-learning-header-title {
  display: none !important;
}

/**
 * WaterMeのレッスン／クイズ画面では、Tutor LMS標準の学習ヘッダー内の
 * 操作をサイトヘッダーとレッスンパネルへ移設している。
 * 空になった標準ヘッダーとSWELL本文の上余白を除き、本文を直後から表示する。
 */
body.wm-site-header-added.wm-curriculum-drawer-mode .tutor-learning-header {
  display: none !important;
}

body.wm-site-header-added.wm-curriculum-drawer-mode #content.l-content {
  padding-top: 0 !important;
}

/**
 * #139 PCレッスン／クイズ概要：主コンテンツの中央配置と表示幅
 * Tutor LMS標準の常設サイドバー用grid列を、固定ドロワー運用では予約しない。
 */
@media screen and (min-width: 769px) {
  .tutor-learning-page .tutor-learning-area .tutor-learning-area-container {
    width: 100%;
    max-width: 1200px;
    margin-right: auto;
    margin-left: auto;
    padding-right: 24px;
    padding-left: 24px;
    box-sizing: border-box;
  }
}

@media screen and (min-width: 992px) {
  .tutor-learning-page
    .tutor-learning-area.tutor-has-site-shell
    .tutor-learning-area-body {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .tutor-learning-page
    .tutor-learning-area.tutor-has-site-shell
    .tutor-learning-area-content {
    grid-column: 1 !important;
  }
}

/**
 * ----------------------------------------
 *  # レッスンナビ：右側ドロワーへ固定 [pc]
 *    ・Tutor LMS側の画面幅別レイアウトにかかわらず同じUIを維持
 *    ・SPの寸法は後続のmax-width: 768pxルールで調整
 * ----------------------------------------
 */
@media screen and (min-width: 769px) {
  /**
   * Tutor LMSは広幅PCで.tutor-learning-area-bodyへ
   * 常設サイドバー分のpadding-inline-start: 320pxを付ける。
   * レッスンナビはfixedドロワーとして使うため、この予約領域を解除する。
   */
  .tutor-learning-area .tutor-learning-area-body {
    padding-inline-start: 0 !important;
  }

  /**
   * DOMContentLoaded後に付くWMクラスを待たず、初回描画から閉じ位置へ置く。
   * これによりロード直後にTutor LMS標準サイドバーが一瞬見える現象を防ぐ。
   */
  .tutor-learning-area .tutor-learning-sidebar {
    position: fixed !important;
    top: 56px !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    z-index: 10010 !important;

    width: min(500px, 100vw) !important;
    max-width: 100vw !important;
    height: auto !important;
    max-height: none !important;
    box-sizing: border-box !important;

    display: flex !important;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    box-shadow: -8px 0 24px rgba(15, 23, 42, 0.08);

    transform: translate3d(100%, 0, 0) !important;
    transition: transform 0.28s ease !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .tutor-learning-area .tutor-learning-sidebar.is-open {
    transform: translate3d(0, 0, 0) !important;
  }

  .tutor-learning-area .wm-curriculum-header {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    width: 100%;
    box-sizing: border-box;
  }

  .tutor-learning-area .tutor-learning-sidebar-curriculum {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .tutor-learning-area .tutor-learning-sidebar-pages {
    position: relative !important;
    inset: auto !important;
    flex: 0 0 auto;
    z-index: 3;
    background: rgba(255, 255, 255, 0.98);
  }
}

@media screen and (max-width: 768px) {
  html,
  body,
  .tutor-learning-area,
  .tutor-learning-area-body,
  .tutor-learning-area-content {
    max-width: 100%;
    overflow-x: hidden !important;
  }

  /**
   * Tutor LMS標準ボタンそのものを固定配置する。
   * ボタンを複製しないため、標準のAlpine.js開閉処理は維持される。
   */
  .tutor-learning-header-toggle-mobile > .wm-curriculum-toggle {
    position: fixed !important;
    top: 58px;
    right: 12px;
    z-index: 10020;

    width: auto;
    min-width: 0;
    max-width: calc(100vw - 24px);
    height: 34px;
    padding: 0 11px;
    gap: 6px;

    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(84, 116, 163, 0.16);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.96);
    color: #334155;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);

    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    box-sizing: border-box;
    transform: none !important;
  }

  .tutor-learning-header-toggle-mobile > .wm-curriculum-toggle:hover {
    background: rgba(84, 116, 163, 0.1);
    opacity: 1;
  }

  body.wm-curriculum-open
    .tutor-learning-header-toggle-mobile
    > .wm-curriculum-toggle {
    background: rgba(84, 116, 163, 0.94);
    color: #fff;
    box-shadow: 0 4px 14px rgba(84, 116, 163, 0.24);
  }

  .wm-curriculum-toggle-icon {
    font-size: 12px;
  }

  /**
   * レッスン一覧ドロワーはWMヘッダー下から、
   * 固定学習ナビの上までに限定
   */
  .tutor-learning-sidebar {
    top: 48px !important;
    bottom: calc(72px + env(safe-area-inset-bottom)) !important;
    height: auto !important;
    max-height: none !important;
    width: min(100vw, 420px) !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;

    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .wm-curriculum-header {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    width: 100%;
    padding: 10px 14px;
    box-sizing: border-box;
  }

  /**
   * レッスン数が増えた場合は一覧部分のみ縦スクロール
   */
  .tutor-learning-sidebar-curriculum {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  /**
   * 「もっと」は下部に残し、常に操作可能にする
   */
  .tutor-learning-sidebar-pages {
    position: relative !important;
    inset: auto !important;
    flex: 0 0 auto;
    z-index: 3;
    background: rgba(255, 255, 255, 0.98);
  }

  /**
   * 学習ナビをビューポート幅に確実に収める
   */
  #wm-sp-under-menu {
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    transform: none !important;
  }

  #wm-sp-under-menu > * {
    min-width: 0;
  }

  .wm-sp-under-menu-label {
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/**
 * ----------------------------------------
 *  # レッスンナビ「もっと」調整 [sp]
 * ----------------------------------------
 */

@media screen and (max-width: 768px) {
  /**
   * 「・・・もっと」を下部メニューから離して配置
   */
  .tutor-learning-sidebar-pages {
    position: relative !important;
    inset: auto !important;
    z-index: 20;
    flex: 0 0 auto;
    margin-bottom: 14px;
    overflow: visible !important;
    background: rgba(255, 255, 255, 0.98);
  }

  .tutor-learning-sidebar-pages .tutor-learning-pages,
  .tutor-learning-sidebar-pages .tutor-learning-pages > div,
  .tutor-learning-sidebar-pages
    .tutor-learning-pages
    > div
    > [x-data*="tutorPopover"] {
    position: relative !important;
    overflow: visible !important;
  }

  /**
   * サブメニューを「もっと」ボタンの上側へ固定
   * Tutor LMSのインライン位置指定や残り表示領域に依存させない
   */
  .tutor-learning-sidebar-pages .tutor-popover {
    position: absolute !important;
    top: auto !important;
    right: auto !important;
    bottom: calc(100% + 8px) !important;
    left: 0 !important;

    width: min(260px, calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px) !important;
    max-height: calc(100vh - 176px) !important;
    max-height: calc(100dvh - 176px) !important;

    margin: 0 !important;
    overflow: hidden !important;
    transform: none !important;
    box-sizing: border-box;
    z-index: 10030 !important;
  }

  /**
   * 閉じている間は非表示
   */
  .tutor-learning-sidebar-pages:not(.wm-curriculum-more-open) .tutor-popover {
    display: none !important;
  }

  /**
   * 開いている間は表示
   */
  .tutor-learning-sidebar-pages.wm-curriculum-more-open .tutor-popover {
    display: block !important;
  }

  /**
   * 通常のメニュー項目は一度に一覧表示する。
   * ビューポート自体に収まらない場合だけ、画面外への欠落を防ぐ。
   */
  .tutor-learning-sidebar-pages .tutor-popover-body {
    max-height: calc(100vh - 176px) !important;
    max-height: calc(100dvh - 176px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }
}

/**
 * ----------------------------------------
 *  # レッスン一覧ボタン：視認性強化 [sp]
 *    ・学習中の基盤ナビとして、常時わかりやすく表示
 * ----------------------------------------
 */
@media screen and (max-width: 768px) {
  .tutor-learning-header-toggle-mobile > .wm-curriculum-toggle {
    min-width: 126px;
    width: 150px;
    height: 38px;
    padding: 0 14px;
    gap: 7px;

    border: 1px solid rgba(65, 105, 216, 0.72);
    background: rgba(65, 105, 216, 0.96);
    color: #fff;
    box-shadow:
      0 5px 16px rgba(65, 105, 216, 0.26),
      0 1px 3px rgba(0, 0, 0, 0.08);

    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.01em;
  }

  .tutor-learning-header-toggle-mobile
    > .wm-curriculum-toggle:focus:not(:focus-visible) {
    background: #4169d8 !important;
    color: #fff !important;
    border-color: #4169d8 !important;
    box-shadow: 0 6px 18px rgba(65, 105, 216, 0.28) !important;
    outline: none !important;
  }

  .tutor-learning-header-toggle-mobile > .wm-curriculum-toggle:hover {
    background: rgba(52, 86, 190, 0.98);
    color: #fff;
    box-shadow:
      0 7px 18px rgba(65, 105, 216, 0.3),
      0 1px 3px rgba(0, 0, 0, 0.08);
  }

  body.wm-curriculum-open
    .tutor-learning-header-toggle-mobile
    > .wm-curriculum-toggle {
    background: rgba(41, 67, 150, 0.98);
    color: #fff;
    border-color: rgba(41, 67, 150, 0.95);
    box-shadow:
      0 5px 16px rgba(41, 67, 150, 0.3),
      0 1px 3px rgba(0, 0, 0, 0.08);
  }

  .wm-curriculum-toggle-icon {
    font-size: 13px;
  }
}

/**
 * ----------------------------------------
 *  # v1.6.0 レッスン一覧：WMヘッダー内ナビ化 [sp]
 * ----------------------------------------
 */
.wm-site-header-inner {
  position: relative;
}

.wm-site-header-actions {
  position: absolute;
  top: 50%;
  right: 12px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  transform: translateY(-50%);
}

@media screen and (min-width: 769px) {
  .wm-site-header-actions {
    display: none;
  }
}

@media screen and (max-width: 768px) {
  .wm-site-header-inner {
    padding-left: 58px;
    padding-right: 58px;
  }

  .wm-site-header-actions {
    right: 8px;
  }

  #wm-site-header .wm-curriculum-toggle {
    position: static !important;
    inset: auto !important;
    z-index: auto !important;
    width: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 4px 3px 3px !important;
    gap: 1px !important;
    display: inline-flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(65, 105, 216, 0.58) !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.98) !important;
    color: #4169d8 !important;
    box-shadow: none !important;
    font-family: inherit !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    white-space: nowrap;
    box-sizing: border-box;
    transform: none !important;
  }

  #wm-site-header .wm-curriculum-toggle:hover {
    background: rgba(65, 105, 216, 0.07) !important;
    border-color: rgba(65, 105, 216, 0.72) !important;
    color: #4169d8 !important;
    box-shadow: none !important;
    opacity: 1;
  }

  #wm-site-header .wm-curriculum-toggle:focus:not(:focus-visible) {
    background: rgba(255, 255, 255, 0.98) !important;
    border-color: rgba(65, 105, 216, 0.58) !important;
    color: #4169d8 !important;
    box-shadow: none !important;
    outline: none !important;
  }

  #wm-site-header .wm-curriculum-toggle:focus-visible {
    outline: 2px solid rgba(65, 105, 216, 0.42) !important;
    outline-offset: 2px;
  }

  body.wm-curriculum-open #wm-site-header .wm-curriculum-toggle {
    background: #4169d8 !important;
    border-color: #4169d8 !important;
    color: #fff !important;
    box-shadow: none !important;
  }

  #wm-site-header .wm-curriculum-toggle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px !important;
    line-height: 1;
  }

  #wm-site-header .wm-curriculum-toggle-label {
    display: block;
    font-size: 7px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.075em;
  }
}

/**
 * ----------------------------------------
 *  # v1.6.1 レッスンナビ非表示時のLESSONボタン [pc,sp]
 * ----------------------------------------
 */

/**
 * レッスンナビが常時表示されている画面では、
 * ヘッダー右側のLESSONボタンを表示しない。
 */
.wm-site-header-actions {
  display: none;
}

body.wm-lesson-nav-toggle-needed .wm-site-header-actions {
  display: flex;
}

/**
 * PCでもレッスンナビが隠れる幅では、
 * SPと同じ静かなアイコンボタンとして表示する。
 */
body.wm-lesson-nav-toggle-needed #wm-site-header .wm-curriculum-toggle {
  position: static !important;
  inset: auto !important;
  z-index: auto !important;

  width: 46px !important;
  min-width: 46px !important;
  max-width: 46px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 4px 3px 3px !important;
  gap: 1px !important;

  display: inline-flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(65, 105, 216, 0.58) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.98) !important;
  color: #4169d8 !important;
  box-shadow: none !important;

  font-family: inherit !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  white-space: nowrap;
  box-sizing: border-box;
  transform: none !important;
}

body.wm-lesson-nav-toggle-needed #wm-site-header .wm-curriculum-toggle:hover {
  background: rgba(65, 105, 216, 0.07) !important;
  border-color: rgba(65, 105, 216, 0.72) !important;
  color: #4169d8 !important;
  box-shadow: none !important;
  opacity: 1;
}

body.wm-lesson-nav-toggle-needed.wm-curriculum-open
  #wm-site-header
  .wm-curriculum-toggle {
  background: #4169d8 !important;
  border-color: #4169d8 !important;
  color: #fff !important;
  box-shadow: none !important;
}

body.wm-lesson-nav-toggle-needed #wm-site-header .wm-curriculum-toggle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px !important;
  line-height: 1;
}

body.wm-lesson-nav-toggle-needed #wm-site-header .wm-curriculum-toggle-label {
  display: block;
  font-size: 7px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.075em;
}

/**
 * PC幅でLESSONボタンが出る場合も、
 * ロゴと重ならないようヘッダー左右に余白を確保する。
 */
@media screen and (min-width: 769px) {
  body.wm-lesson-nav-toggle-needed .wm-site-header-inner {
    padding-left: 70px;
    padding-right: 70px;
  }

  body.wm-lesson-nav-toggle-needed .wm-site-header-actions {
    right: 16px;
  }
}

/**
 * ----------------------------------------
 *  # v1.11.0 共通アカウントアイコン／メニュー [pc,sp]
 *    ・表示対象：学習サブヘッダがある全ページ
 *    ・PC/SPとも同じカードUX
 *    ・SPは画面幅に合わせてカード幅のみ調整
 *    ・閉じるボタン、外側クリック、Escに対応
 * ----------------------------------------
 */
body.wm-learning-subheader-ready .tutor-dashboard-header,
body.wm-learning-subheader-ready .tutor-dashboard-header-inner {
  overflow: visible !important;
}

body.wm-learning-subheader-ready .tutor-dashboard-header-right,
body.wm-learning-subheader-ready .tutor-dashboard-header-user {
  position: relative !important;
  overflow: visible !important;
}

body.wm-learning-subheader-ready [x-cloak] {
  display: none !important;
}

/**
 * アカウントアイコン
 */
body.wm-learning-subheader-ready .tutor-dashboard-header-user-avatar {
  width: 46px !important;
  min-width: 46px !important;
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 !important;

  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(84, 116, 163, 0.16) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.98) !important;
  color: #111827 !important;
  box-shadow: none !important;
  box-sizing: border-box;
  cursor: pointer;
}

body.wm-learning-subheader-ready
  .tutor-dashboard-header-user-avatar
  .tutor-avatar,
body.wm-learning-subheader-ready
  .tutor-dashboard-header-user-avatar
  .tutor-avatar-32 {
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;

  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(65, 105, 216, 0.07) !important;
  color: #111827 !important;
  box-shadow: none !important;
}

body.wm-learning-subheader-ready .tutor-dashboard-header-user-avatar > svg {
  display: none !important;
}

body.wm-learning-subheader-ready .tutor-dashboard-header-user-avatar.active {
  border: 2px solid rgba(65, 105, 216, 0.78) !important;
  box-shadow: 0 0 0 3px rgba(65, 105, 216, 0.1) !important;
}

/**
 * カード本体
 */
body.wm-learning-subheader-ready .tutor-dashboard-header-user-popover {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  bottom: auto !important;
  left: auto !important;

  z-index: 10040 !important;
  width: 286px !important;
  max-width: calc(100vw - 24px) !important;
  margin: 0 !important;
  padding: 10px !important;

  overflow: hidden !important;
  box-sizing: border-box;

  border: 1px solid rgba(84, 116, 163, 0.12) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.99) !important;
  box-shadow:
    0 10px 28px rgba(15, 23, 42, 0.1),
    0 2px 8px rgba(15, 23, 42, 0.05) !important;
  transform: none !important;
}

body.wm-learning-subheader-ready .tutor-dashboard-header-user-popover[hidden] {
  display: none !important;
}

/**
 * Tutor標準SP専用ヘッダは使わず、同じカードUXへ統一
 */
body.wm-learning-subheader-ready .tutor-profile-header-top {
  display: none !important;
}

/**
 * 明示的な閉じるボタン
 */
body.wm-learning-subheader-ready .wm-account-popover-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;

  width: 30px;
  min-width: 30px;
  height: 30px;
  padding: 0;

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

  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: #475569;
  font-family: inherit;
  font-size: 22px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
}

body.wm-learning-subheader-ready .wm-account-popover-close:hover {
  background: rgba(84, 116, 163, 0.09);
  color: #111827;
}

body.wm-learning-subheader-ready .wm-account-popover-close:focus-visible {
  outline: 2px solid rgba(65, 105, 216, 0.42);
  outline-offset: 2px;
}

/**
 * プロフィールカード
 */
body.wm-learning-subheader-ready .tutor-dashboard-header-user-popover-profile {
  margin: 0;
  padding: 0;
}

body.wm-learning-subheader-ready .tutor-user-profile-info {
  position: relative;
  margin: 0 0 8px !important;
  padding: 20px 14px 18px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;

  border-radius: 9px !important;
  background: rgba(65, 105, 216, 0.065) !important;
  box-sizing: border-box;
}

body.wm-learning-subheader-ready .tutor-user-profile-info > .tutor-avatar,
body.wm-learning-subheader-ready .tutor-user-profile-info .tutor-avatar-48 {
  width: 56px !important;
  min-width: 56px !important;
  height: 56px !important;
  min-height: 56px !important;

  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(65, 105, 216, 0.08) !important;
  border-radius: 999px !important;
  background: rgba(65, 105, 216, 0.08) !important;
  color: #111827 !important;
  box-shadow: none !important;
}

body.wm-learning-subheader-ready .tutor-user-profile-meta {
  display: flex !important;
  flex-direction: column;
  align-items: center !important;
  gap: 2px !important;
  min-width: 0;
  max-width: 100%;
  text-align: center !important;
}

body.wm-learning-subheader-ready .tutor-user-profile-meta .tutor-text-medium {
  color: #111827 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.35;
}

body.wm-learning-subheader-ready .tutor-user-profile-meta .tutor-text-tiny {
  max-width: 100%;
  overflow: hidden;
  color: #334155 !important;
  font-size: 12px !important;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.wm-learning-subheader-ready .tutor-user-profile-info > a {
  position: absolute !important;
  right: 10px !important;
  bottom: 10px !important;

  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  padding: 0 !important;

  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  color: #64748b !important;
  border-radius: 999px;
}

body.wm-learning-subheader-ready .tutor-user-profile-info > a svg {
  width: 20px !important;
  height: 20px !important;
}

/**
 * メニュー
 */
body.wm-learning-subheader-ready
  .tutor-dashboard-header-user-popover-menu-wrapper {
  margin: 0;
  padding: 0;
}

body.wm-learning-subheader-ready .tutor-dashboard-header-user-popover-menu {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

body.wm-learning-subheader-ready
  .tutor-dashboard-header-user-popover-menu
  > li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

body.wm-learning-subheader-ready
  .tutor-dashboard-header-user-popover-menu
  > li
  > a {
  min-height: 46px;
  padding: 10px !important;

  display: flex !important;
  align-items: center;
  gap: 11px;

  box-sizing: border-box;
  border-radius: 8px;

  color: #1f2937 !important;
  text-decoration: none !important;
  font-size: 14px !important;
  font-weight: 500;
  line-height: 1.4;

  transition:
    background 0.18s ease,
    color 0.18s ease;
}

body.wm-learning-subheader-ready
  .tutor-dashboard-header-user-popover-menu
  > li
  > a:hover {
  background: rgba(84, 116, 163, 0.08);
  color: #111827 !important;
  opacity: 1;
}

body.wm-learning-subheader-ready .tutor-dashboard-header-user-popover-menu svg {
  flex: 0 0 auto;
  width: 20px !important;
  height: 20px !important;
}

body.wm-learning-subheader-ready
  .tutor-dashboard-header-user-popover-menu
  > li:last-child {
  margin-top: 3px !important;
  padding-top: 3px !important;
  border-top: 1px solid rgba(84, 116, 163, 0.12);
}

/**
 * PC/SPとも同じログアウト項目を使う
 */
body.wm-learning-subheader-ready .tutor-mobile-logout-wrapper {
  display: none !important;
}

/**
 * SP：カードUXを維持したまま画面幅へ合わせる
 */
@media screen and (max-width: 768px) {
  body.wm-learning-subheader-ready .tutor-dashboard-header-user-avatar {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
  }

  body.wm-learning-subheader-ready
    .tutor-dashboard-header-user-avatar
    .tutor-avatar,
  body.wm-learning-subheader-ready
    .tutor-dashboard-header-user-avatar
    .tutor-avatar-32 {
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
  }

  body.wm-learning-subheader-ready .tutor-dashboard-header-user-popover {
    position: fixed !important;
    top: 136px !important;
    right: 12px !important;
    bottom: auto !important;
    left: 12px !important;

    width: auto !important;
    max-width: none !important;
    max-height: calc(100dvh - 152px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  body.wm-learning-subheader-ready .tutor-user-profile-info {
    padding: 18px 14px !important;
  }

  body.wm-learning-subheader-ready
    .tutor-dashboard-header-user-popover-menu
    > li
    > a {
    min-height: 44px;
    padding: 9px 10px !important;
  }
}

/**
 * ----------------------------------------
 *  # v1.11.1 アカウントUX微調整 [pc,sp]
 *    ・自作ページを含め、文字アバターの太さを共通化
 *    ・SPのTutor LMS由来ページでカードが縦に伸びる状態を抑制
 * ----------------------------------------
 */

/**
 * 文字アバターの見え方をページ由来CSSに左右されないよう統一
 */
body.wm-learning-subheader-ready
  .tutor-dashboard-header-user-avatar
  .tutor-avatar-initials,
body.wm-learning-subheader-ready
  .tutor-user-profile-info
  .tutor-avatar-initials {
  font-weight: 600 !important;
  line-height: 1 !important;
}

/**
 * SP：カードの高さは内容量に追従させる
 */
@media screen and (max-width: 768px) {
  body.wm-learning-subheader-ready .tutor-dashboard-header-user-popover {
    bottom: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 152px) !important;
  }

  body.wm-learning-subheader-ready .tutor-dashboard-header-user-popover-profile,
  body.wm-learning-subheader-ready
    .tutor-dashboard-header-user-popover-menu-wrapper,
  body.wm-learning-subheader-ready .tutor-dashboard-header-user-popover-menu {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  body.wm-learning-subheader-ready
    .tutor-dashboard-header-user-popover-menu-wrapper {
    flex: 0 0 auto !important;
  }

  body.wm-learning-subheader-ready .tutor-dashboard-header-user-popover-menu {
    display: block !important;
  }

  /**
   * Tutor LMSはSPで通常メニュー末尾のログアウト項目を隠し、
   * SP専用ログアウトへ切り替える。
   * WaterMeではPC/SP共通カードを使うため、通常側を再表示する。
   */
  body.wm-learning-subheader-ready
    .tutor-dashboard-header-user-popover-menu
    > li:last-child {
    display: block !important;
  }
}

/**
 * ----------------------------------------
 *  # v1.11.2 アカウントメニューの境界線統一 [pc,sp]
 *    ・Tutor LMS由来ページでのみ付与されるa要素の枠線を除去
 *    ・自作ページと同じフラットなメニュー表示へ統一
 * ----------------------------------------
 */
body.wm-learning-subheader-ready
  .tutor-dashboard-header-user-popover-menu
  > li
  > a {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

body.wm-learning-subheader-ready
  .tutor-dashboard-header-user-popover-menu
  > li
  > a:hover,
body.wm-learning-subheader-ready
  .tutor-dashboard-header-user-popover-menu
  > li
  > a:focus,
body.wm-learning-subheader-ready
  .tutor-dashboard-header-user-popover-menu
  > li
  > a:active {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

body.wm-learning-subheader-ready
  .tutor-dashboard-header-user-popover-menu
  > li
  > a:hover {
  background: rgba(84, 116, 163, 0.08) !important;
}

/**
 * ----------------------------------------
 *  # v1.11.3 プロフィールカード幅の統一 [pc,sp]
 *    ・Tutor LMS由来ページでプロフィール背景が内側へ縮む状態を補正
 *    ・編集ボタンがメールアドレスへ重ならないよう右側余白を確保
 * ----------------------------------------
 */
body.wm-learning-subheader-ready .tutor-dashboard-header-user-popover-profile,
body.wm-learning-subheader-ready .tutor-user-profile-info {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

body.wm-learning-subheader-ready .tutor-user-profile-info {
  padding-right: 44px !important;
}

body.wm-learning-subheader-ready .tutor-user-profile-meta {
  width: 100% !important;
  max-width: 100% !important;
}

body.wm-learning-subheader-ready .tutor-user-profile-meta .tutor-text-medium,
body.wm-learning-subheader-ready .tutor-user-profile-meta .tutor-text-tiny {
  max-width: calc(100% - 8px) !important;
}

body.wm-learning-subheader-ready .tutor-user-profile-info > a {
  right: 12px !important;
  bottom: 12px !important;
}

/**
 * ----------------------------------------
 *  # v1.11.4 サブヘッダのユーザーアイコン
 *    ・Tutor LMS標準の手の絵文字をFont Awesomeへ置換
 * ----------------------------------------
 */
.wm-learning-subheader-user {
  display: inline-flex;
  align-items: center;
  gap: 0.42em;
}

.wm-learning-subheader-user-icon {
  width: 1.5em;
  width: 3em;
  height: 1.5em;
  height: 3em;

  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  border: 3px solid rgba(154, 170, 194, 0.844);
  border-radius: 0.34em;
  border-radius: 50%;
  background: rgba(84, 116, 163, 0.035);
  background: rgba(166, 169, 177, 0.386);

  color: rgba(84, 116, 163, 0.72);
  font-size: 0.65em;
  line-height: 1;
  opacity: 1;

  transform: none;
  vertical-align: middle;
}

.wm-learning-subheader-user-icon::before {
  display: block;
  line-height: 1;
  transform: translateY(0.01em);
}

/**
 * ----------------------------------------
 *  # v1.11.5 TL由来ページのサブヘッダ下余白調整 [pc,sp]
 *    ・Tutor LMSが直接出力するサブヘッダのみ対象
 *    ・自作ページでfetch挿入したサブヘッダの余白感は維持
 * ----------------------------------------
 */
@media screen and (min-width: 769px) {
  body.wm-learning-subheader-ready
    .tutor-dashboard-header:not([data-wm-fetched="1"])
    .tutor-dashboard-header-inner {
    min-height: 104px !important;
    padding-top: 18px !important;
    padding-right: 24px !important;
    padding-bottom: 28px !important;
    padding-left: 24px !important;
  }
}

@media screen and (max-width: 768px) {
  body.wm-learning-subheader-ready
    .tutor-dashboard-header:not([data-wm-fetched="1"])
    .tutor-dashboard-header-inner {
    min-height: 92px !important;
    padding-top: 10px !important;
    padding-right: 14px !important;
    padding-bottom: 19px !important;
    padding-left: 14px !important;
  }
}

/**
 * ----------------------------------------
 *  # アカウント関連
 * ----------------------------------------
 */
/***
  * [アカウントヘッダを非表示]
  */
.tutor-account-header {
  display: none;
}

/**
 * ----------------------------------------
 *  # v1.12.0 設定画面ミニヘッダ制御 [pc,sp]
 *    ・戻る矢印は設定HOME／各詳細画面のすべてで非表示
 *    ・閉じるボタンは設定HOMEでは非表示
 *    ・閉じるボタンは各詳細画面でのみ表示
 * ----------------------------------------
 */

/**
 * 戻る矢印は、設定画面内では常に非表示
 */
body.wm-settings-page .tutor-profile-header-left > a[aria-label="戻る"] {
  display: none !important;
}

/**
 * 設定HOMEでは閉じるボタンを非表示
 * 詳細画面ではTutor LMS標準のレスポンシブ表示を維持
 */
body.wm-settings-page:not(.wm-settings-detail-active)
  .tutor-profile-header-close {
  display: none !important;
}

/**
 * ----------------------------------------
 *  # レッスンナビ「もっと」トリガー共通UI [pc,sp]
 *    ・popover式／リサイズ式とも中央寄せのピル型ボタンへ統一
 * ----------------------------------------
 */
.tutor-learning-sidebar-pages.wm-curriculum-more-popover,
.tutor-learning-sidebar-pages.wm-curriculum-more-panel {
  margin-bottom: 0 !important;
}

.wm-curriculum-more-popover .tutor-learning-pages,
.wm-curriculum-more-panel .tutor-sidebar-restore-dropdown {
  min-height: 76px;
  padding: 14px 12px !important;
  box-sizing: border-box;
}

.wm-curriculum-more-panel .tutor-sidebar-restore-dropdown {
  justify-content: center !important;
}

.wm-curriculum-more-popover .wm-curriculum-more-trigger,
.wm-curriculum-more-panel .wm-curriculum-more-trigger {
  position: relative !important;
  inset: auto !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;

  width: 120px !important;
  min-width: 120px !important;
  min-height: 44px;
  margin: 0 auto !important;
  padding: 9px 14px !important;
  box-sizing: border-box;

  border: 1px solid rgba(84, 116, 163, 0.2) !important;
  border-radius: 11px !important;
  background: rgba(255, 255, 255, 0.99) !important;
  color: #334155 !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;

  font-family: inherit;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1;
  text-decoration: none !important;
  cursor: pointer;
}

.wm-curriculum-more-popover .wm-curriculum-more-trigger:hover,
.wm-curriculum-more-panel .wm-curriculum-more-trigger:hover {
  border-color: rgba(65, 105, 216, 0.34) !important;
  background: rgba(65, 105, 216, 0.06) !important;
  opacity: 1;
}

.wm-curriculum-more-popover .wm-curriculum-more-trigger:focus-visible,
.wm-curriculum-more-panel .wm-curriculum-more-trigger:focus-visible {
  outline: 2px solid rgba(65, 105, 216, 0.42);
  outline-offset: 2px;
}

.wm-curriculum-more-caret {
  display: inline-block;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  transform: translateY(2px);
  transition: transform 0.18s ease;
}

.wm-curriculum-more-open .wm-curriculum-more-caret {
  transform: translateY(-1px) rotate(180deg);
}

.wm-curriculum-more-label {
  line-height: 1;
  white-space: nowrap;
}

/**
 * ----------------------------------------
 *  # レッスンナビ「＋メニュー」 [pc,sp]
 *    ・旧「もっと」エリアを廃止して見出し右上へ配置
 *    ・既存メニューDOMと開閉処理はそのまま利用
 * ----------------------------------------
 */
.wm-curriculum-header--with-menu .wm-curriculum-course-link {
  flex: 1 1 auto;
}

.wm-curriculum-header--with-menu > .wm-curriculum-more-trigger {
  position: static !important;
  inset: auto !important;
  flex: 0 0 auto;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  min-width: 0 !important;
  min-height: 28px;
  margin: 0 0 0 auto !important;
  padding: 3px 0 3px 10px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #7b8491 !important;
  box-shadow: none !important;
  font-family: inherit;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.4;
  text-decoration: none !important;
  white-space: nowrap;
  cursor: pointer;
}

/**
 * ----------------------------------------
 *  # 受講特典への直接導線 [pc,sp]
 *    ・WaterMe登録特典と同系統の黄色グラデーションで識別性を確保
 * ----------------------------------------
 */
.wm-curriculum-header--with-menu > .wm-curriculum-resources-link {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 28px;
  margin: 0 7px 0 auto;
  padding: 4px 10px;
  border: 1px solid rgba(171, 152, 37, 0.42);
  border-radius: 6px;
  background: linear-gradient(135deg, #fffde0 0%, #fff8bd 54%, #f7ef7a 100%);
  color: #4e4a1c;
  box-shadow: 0 1px 2px rgba(131, 113, 22, 0.08);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
}

.wm-curriculum-header--with-menu > .wm-curriculum-resources-link:hover {
  border-color: rgba(171, 152, 37, 0.58);
  background: linear-gradient(135deg, #fffef0 0%, #fff9ca 54%, #f8f08a 100%);
  color: #373410;
  text-decoration: none;
}

.wm-curriculum-header--with-menu > .wm-curriculum-resources-link:focus-visible {
  outline: 2px solid #74651c;
  outline-offset: 2px;
}

.wm-curriculum-header--with-menu
  > .wm-curriculum-resources-link
  + .wm-curriculum-more-trigger {
  margin-left: 0 !important;
}

.wm-curriculum-resources-icon {
  flex: 0 0 auto;
}

.wm-curriculum-resources-label-short {
  display: none;
}

/**
 * ----------------------------------------
 *  # 受講特典ページ [pc,sp]
 *    ・Tutor LMS のファイルカードとダウンロードリンクをそのまま利用
 * ----------------------------------------
 */
.wm-course-resources-page .wm-course-resources-area {
  position: relative;
  margin-top: 20px;
  padding: 24px 22px 22px;
  border: 1px solid rgba(222, 185, 42, 0.86);
  border-radius: 12px;
  background: linear-gradient(135deg, #fffef1 0%, #fff9d9 52%, #fff4b8 100%);
  color: #162b4d;
  box-shadow: 0 2px 8px rgba(131, 113, 22, 0.04);
}

.wm-course-resources-page .wm-course-resources-area::before {
  position: absolute;
  top: -1px;
  right: 14px;
  left: 14px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(90deg, #f6e15e 0%, #e7bf35 100%);
  content: "";
}

.wm-course-resources-intro {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: min(760px, 100%);
  margin: 4px auto 22px;
  color: #162b4d;
}

.wm-course-resources-gift {
  display: grid;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid #e9c74a;
  border-radius: 10px;
  background: #fffdf2;
  color: #8b6811;
}

.wm-course-resources-title {
  margin: 0;
  color: #162b4d;
  font-family: "HonokaMaru", "游ゴシック", sans-serif;
  font-size: clamp(19px, 3vw, 25px);
  font-weight: 700;
  line-height: 1.4;
}

.wm-course-resources-welcome {
  margin: 5px 0 0;
  color: #40516b;
  font-size: 14px;
  line-height: 1.7;
}

.wm-course-resources-original-heading {
  display: none;
}

.wm-course-resources-list {
  display: grid;
  gap: 11px;
}

.wm-course-resource-card {
  display: flex !important;
  align-items: center;
  gap: 10px;
  min-height: 66px;
  padding: 13px 14px !important;
  border: 1px solid #dce5f0;
  border-radius: 9px;
  background: #fff;
  color: #162b4d !important;
  box-shadow: none !important;
}

.wm-course-resource-card:hover {
  border-color: #b7c9df;
  background: #f8fbff;
}

.wm-course-resource-download {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  min-height: 34px;
  padding: 5px 8px !important;
  border: 1px solid #c6d5e9 !important;
  border-radius: 6px;
  color: #315d9b !important;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none !important;
}

.wm-course-resource-download:hover {
  border-color: #93aed0 !important;
  background: #eef5ff !important;
}

.wm-course-resource-download:focus-visible {
  outline: 2px solid #315d9b;
  outline-offset: 2px;
}

.wm-course-resource-action {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  white-space: nowrap;
}

.wm-course-resource-action-icon {
  font-size: 17px;
  line-height: 1;
}

@media screen and (max-width: 480px) {
  .wm-course-resources-page .wm-course-resources-area {
    margin-top: 14px;
    padding: 18px 14px 16px;
  }

  .wm-course-resources-intro {
    gap: 9px;
    margin: 2px 0 17px;
  }

  .wm-course-resources-gift {
    flex-basis: 36px;
    width: 36px;
    height: 36px;
  }

  .wm-course-resources-welcome {
    font-size: 13px;
  }

  .wm-course-resource-card {
    gap: 8px;
    min-height: 62px;
    padding: 12px 10px !important;
  }

  .wm-course-resource-download {
    min-height: 32px;
    padding: 5px 7px !important;
    font-size: 12px;
  }

  .wm-course-resource-action {
    font-size: 12px;
  }
}

@media screen and (max-width: 420px) {
  .wm-curriculum-header--with-menu > .wm-curriculum-resources-link {
    gap: 3px;
    padding-right: 7px;
    padding-left: 7px;
  }

  .wm-curriculum-resources-label {
    display: none;
  }

  .wm-curriculum-resources-label-short {
    display: inline;
  }
}

.wm-curriculum-header--with-menu > .wm-curriculum-more-trigger:hover,
.wm-curriculum-header--with-menu > .wm-curriculum-more-trigger:focus {
  background: transparent !important;
  color: #4f5968 !important;
  text-decoration: underline !important;
  opacity: 1;
}

.wm-curriculum-header--with-menu > .wm-curriculum-more-trigger:focus-visible {
  outline: 2px solid rgba(65, 105, 216, 0.42);
  outline-offset: 2px;
}

.wm-curriculum-header--with-menu
  > .tutor-learning-sidebar-pages.wm-curriculum-more-popover,
.wm-curriculum-header--with-menu
  > .tutor-learning-sidebar-pages.wm-curriculum-more-panel {
  position: absolute !important;
  inset: 100% 12px auto auto !important;
  z-index: 10030 !important;
  flex: 0 0 0 !important;
  width: 0 !important;
  min-width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
}

.wm-curriculum-header--with-menu
  > .wm-curriculum-more-popover
  > .tutor-learning-pages,
.wm-curriculum-header--with-menu
  > .wm-curriculum-more-panel
  > .tutor-learning-pages {
  position: absolute !important;
  inset: 8px 0 auto auto !important;
  width: min(300px, calc(100vw - 32px)) !important;
  min-width: min(260px, calc(100vw - 32px)) !important;
  max-width: calc(100vw - 32px) !important;
  height: auto !important;
  max-height: calc(100vh - 150px) !important;
  max-height: calc(100dvh - 150px) !important;
  margin: 0 !important;
  padding: 8px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  box-sizing: border-box;
  border: 1px solid rgba(84, 116, 163, 0.12) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.99) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14) !important;
  overscroll-behavior: contain;
}

.wm-curriculum-header--with-menu
  > .wm-curriculum-more-popover:not(.wm-curriculum-more-open)
  > .tutor-learning-pages,
.wm-curriculum-header--with-menu
  > .wm-curriculum-more-panel:not(.wm-curriculum-more-open)
  > .tutor-learning-pages {
  display: none !important;
}

.wm-curriculum-header--with-menu
  > .wm-curriculum-more-popover.wm-curriculum-more-open
  > .tutor-learning-pages,
.wm-curriculum-header--with-menu
  > .wm-curriculum-more-panel.wm-curriculum-more-open
  > .tutor-learning-pages {
  display: block !important;
}

.wm-curriculum-header--with-menu .tutor-popover {
  position: static !important;
  inset: auto !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  transform: none !important;
}

@media screen and (max-width: 768px) {
  .wm-curriculum-header--with-menu
    > .tutor-learning-sidebar-pages.wm-curriculum-more-popover,
  .wm-curriculum-header--with-menu
    > .tutor-learning-sidebar-pages.wm-curriculum-more-panel {
    right: 8px !important;
  }
}

/**
 * ----------------------------------------
 *  # 通知UIは「まなびの記録」のみ表示 [pc,sp]
 *    ・親ごと隠してアイコン・バッジ・専用余白を取り除く
 *    ・bodyへ移動する通知モーダルと、独立した新着ポップアップも対象
 *    ・遅延描画・インラインのdisplay指定にも適用し、内部状態は維持する
 * ----------------------------------------
 */
html:not(.wm-notification-home) .tutor-dashboard-notification,
html:not(.wm-notification-home)
  .tutor-dashboard-header-right
  > div:has(> .tutor-dashboard-notification),
html:not(.wm-notification-home)
  .tutor-modal:has(.tutor-dashboard-notification-modal),
html:not(.wm-notification-home) .tutor-dashboard-notification-offcanvas,
html:not(.wm-notification-home) .tutor-pn-drawer-stack {
  display: none !important;
}

/**
 * ----------------------------------------
 *  # SP通知一覧の閉じるボタン [sp]
 *    ・標準ヘッダーの戻る操作を右上の×として表示する
 *    ・通知設定リンクは左側に残し、一覧だけをスクロールする
 * ----------------------------------------
 */
@media (max-width: 575px) {
  /*
   * 通知ドロワーは学習サブヘッダの子要素であるため、
   * 親の重なり順もWM学習ヘッダより前面へ上げる。
   */
  body.wm-learning-subheader-ready
    .tutor-dashboard-header.wm-notification-drawer-open {
    z-index: 10060 !important;
  }

  /* Tutor LMS標準の通知設定リンクは、SPでは通知一覧の操作対象にしない。 */
  .wm-notification-home
    .tutor-dashboard-notification-offcanvas-header-slot:not(
      .wm-notification-close-slot
    ) {
    visibility: hidden;
    pointer-events: none;
  }

  .wm-notification-home .tutor-dashboard-notification-offcanvas-header {
    flex: 0 0 auto;
    padding-top: max(12px, env(safe-area-inset-top, 0px));
    padding-left: max(4px, env(safe-area-inset-left, 0px));
    padding-right: max(4px, env(safe-area-inset-right, 0px));
  }

  .wm-notification-home .tutor-dashboard-notification-offcanvas-header-slot {
    order: 0;
  }

  .wm-notification-home .tutor-dashboard-notification-offcanvas-title {
    order: 1;
  }

  .wm-notification-home .wm-notification-close-slot {
    order: 2;
    text-align: right;
  }

  .wm-notification-home button.wm-notification-close {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent !important;
    color: #5f6875 !important;
    opacity: 1 !important;
    box-shadow: none;
    cursor: pointer;
  }

  .wm-notification-home button.wm-notification-close svg {
    display: none;
  }

  .wm-notification-home button.wm-notification-close::before,
  .wm-notification-home button.wm-notification-close::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 1.5px;
    border-radius: 1px;
    background: currentColor !important;
    transform: rotate(45deg);
  }

  .wm-notification-home button.wm-notification-close::after {
    transform: rotate(-45deg);
  }

  .wm-notification-home button.wm-notification-close:hover,
  .wm-notification-home button.wm-notification-close:active {
    color: #354052 !important;
    background: transparent !important;
  }

  .wm-notification-home button.wm-notification-close:focus-visible {
    color: #354052 !important;
    outline: 2px solid #5474a3;
    outline-offset: 1px;
  }
}

/**
 * ----------------------------------------
 *  # レッスンパネル上部の見切れ防止 [pc,sp]
 *    ・固定サイドバーを、LESSONボタンのあるサイトヘッダー直下から開く
 *    ・小さいPCでもパネル内のレッスン一覧に十分な高さを確保する
 * ----------------------------------------
 */
@media screen and (min-width: 769px) {
  .tutor-learning-area .tutor-learning-sidebar {
    top: 56px !important;
  }
}

@media screen and (max-width: 768px) {
  .tutor-learning-sidebar {
    top: 48px !important;
    z-index: 10010 !important;
  }
}

/**
 * #138 レッスンパネル：学習ヘッダー直下の操作可能なレイヤーと、
 * カリキュラム表示領域を優先したコンパクトな上部領域を維持する。
 */
#wm-site-header {
  z-index: 10010;
}

/*
 * The fixed curriculum panel lives inside #body_wrap. That element creates a
 * stacking context, so increasing only the panel's z-index cannot move it
 * above the learning subheader or footer. Raise the parent only while open.
 * The site header (10010) remains above this layer.
 */
body.wm-curriculum-open #body_wrap {
  position: relative;
  z-index: 10000;
}

body.wm-curriculum-open .tutor-learning-page {
  z-index: auto;
}

body.wm-curriculum-open
  #body_wrap
  .tutor-learning-area
  .tutor-learning-sidebar {
  z-index: 10000 !important;
}

.tutor-learning-sidebar {
  padding: 0 !important;
}

#wm-sp-under-menu {
  z-index: 9990;
}

.wm-curriculum-header {
  gap: 8px;
  padding: 10px 12px;
}

.tutor-learning-sidebar .tutor-learning-progress {
  padding: 8px 12px 0 !important;
}

.tutor-learning-sidebar .wm-incomplete-quiz-progress-notice {
  margin-top: 6px;
  padding: 6px 8px;
  font-size: 12px;
  line-height: 1.45;
}

.tutor-learning-sidebar .wm-curriculum-expand-all,
.tutor-learning-progress:has(.wm-incomplete-quiz-progress-notice)
  .wm-curriculum-expand-all {
  min-height: 26px;
  margin: 2px 0 0 auto;
  padding: 4px 0 0 8px;
}

@media screen and (max-width: 768px) {
  .wm-curriculum-header {
    padding: 8px 12px;
  }
}

/**
 * ----------------------------------------
 *  #140 レッスンパネルの進捗表示を2段へ集約 [pc,sp]
 *    ・Tutor LMSの進捗率／リセット操作／修了条件判定は変更しない
 *    ・既存の未合格クイズ案内を、進捗率と同じ情報行へ配置する
 * ----------------------------------------
 */
.tutor-learning-sidebar .tutor-learning-progress {
  display: grid !important;
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  grid-template-areas:
    "summary notice reset"
    "bar bar bar"
    "expand expand expand";
  align-items: center;
  column-gap: 10px;
  row-gap: 5px;
  padding: 8px 12px 4px !important;
}

/* Tutor LMSの進捗率とリセット操作を、それぞれグリッド要素として扱う。 */
.tutor-learning-sidebar .tutor-learning-progress-content {
  display: contents;
}

.tutor-learning-sidebar .tutor-learning-progress-text {
  grid-area: summary;
  padding-block: 0 !important;
  white-space: nowrap;
}

.tutor-learning-sidebar .tutor-learning-progress-content > .tutor-flex {
  grid-area: reset;
  justify-self: end;
}

.tutor-learning-sidebar .tutor-learning-progress > .tutor-progress-bar,
.tutor-learning-sidebar .tutor-learning-progress > [role="progressbar"] {
  grid-area: bar;
  margin: 0 !important;
  min-width: 0;
}

.tutor-learning-sidebar .wm-incomplete-quiz-progress-notice {
  grid-area: notice;
  justify-self: start;
  min-width: 0;
  max-width: 100%;
  margin: 0 !important;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}

.tutor-learning-sidebar .wm-curriculum-expand-all,
.tutor-learning-progress:has(.wm-incomplete-quiz-progress-notice)
  .wm-curriculum-expand-all {
  grid-area: expand;
  min-height: 22px;
  margin: 0 0 0 auto;
  padding: 1px 0 0 8px;
}

@media screen and (max-width: 768px) {
  .tutor-learning-sidebar .tutor-learning-progress {
    grid-template-columns: minmax(0, 1fr) max-content;
    grid-template-areas:
      "summary reset"
      "notice notice"
      "bar bar"
      "expand expand";
    row-gap: 4px;
  }

  /* 未合格クイズ案内がない状態では、その行自体を作らない。 */
  .tutor-learning-sidebar
    .tutor-learning-progress:not(:has(.wm-incomplete-quiz-progress-notice)) {
    grid-template-areas:
      "summary reset"
      "bar bar"
      "expand expand";
  }

  .tutor-learning-sidebar .wm-incomplete-quiz-progress-notice {
    justify-self: start;
    max-width: 100%;
  }
}

/**
 * ----------------------------------------
 *  #141 SP学習ヘッダーを画面上部へ固定 [lesson, quiz]
 *    ・LESSONボタンを含む既存 #wm-site-header をそのまま利用する
 *    ・固定化で失われるレイアウト上の高さだけ本文側へ確保する
 * ----------------------------------------
 */
@media screen and (max-width: 768px) {
  body.wm-site-header-added.wm-learning-space-header {
    padding-top: 48px;
  }

  body.wm-site-header-added.wm-learning-space-header #wm-site-header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 10020;
  }
}