.has-learning-nav{padding-bottom:calc(90px + env(safe-area-inset-bottom))!important}
.learning-nav{position:fixed;bottom:0;left:0;right:0;z-index:9997;display:flex;justify-content:center;background:rgba(255,255,255,.98);border-top:1px solid #d7e5ec;padding:8px 12px calc(8px + env(safe-area-inset-bottom));box-shadow:0 -4px 20px #102c4610}
.learning-nav a{width:150px;min-height:52px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px;border-radius:12px;color:#526477;text-decoration:none;font:700 12px/1.4 'Noto Sans JP',sans-serif}
.learning-nav a[aria-current]{background:#eaf8f5;color:#087f77}
.learning-nav a:hover{background:#eef7fb}.learning-nav a:focus-visible{outline:3px solid #2563eb;outline-offset:2px}
.learning-nav-icon{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.has-learning-nav .mnk-launch,.has-learning-nav .mnk-bar{bottom:calc(88px + env(safe-area-inset-bottom))!important}
.has-learning-nav .mnk-panel{bottom:calc(88px + env(safe-area-inset-bottom))!important;max-height:calc(100dvh - 110px)!important}
.learning-legend{display:flex;flex-wrap:wrap;gap:12px;font-size:13px;font-weight:800;margin:18px 0 4px}.learning-legend span{padding:7px 12px;border:1px solid #d7e5ec;border-radius:8px;background:#fff}.learning-legend .legend-done{background:#e9f8ef;color:#166534}.learning-legend .legend-current{border-color:#2563eb;color:#1d4ed8}
.learning-map-status{font-size:14px;color:#475569;margin:8px 0 16px}
.lesson-card.learning-done{background:#e9f8ef!important;border-color:#9dd8b4!important}
.lesson-card.learning-current{border:2px solid #2563eb!important;background:#f6faff!important}
.lesson-card.learning-resume{outline:3px solid #2563eb;outline-offset:3px;scroll-margin-top:180px}
.lesson-card .learning-card-state{display:flex!important;align-items:center;flex-wrap:wrap;gap:5px;margin-top:10px;font-size:12px;font-weight:800;color:#475569}
.learning-done .learning-card-state{color:#166534}.learning-current .learning-card-state{color:#1d4ed8}
.learning-resume-label{background:#2563eb;color:white;padding:4px 7px;border-radius:6px;font-size:11px}
.learning-completion{display:block;width:100%;margin:18px auto 0;text-align:center;grid-column:1/-1}
.learning-complete-button{background:#0f766e;color:#fff;border:0;border-radius:12px;padding:13px 20px;min-height:48px;font:800 15px/1.5 'Noto Sans JP',sans-serif;cursor:pointer}
.learning-complete-button:disabled{opacity:.6;cursor:wait}.learning-save-status{font-size:13px!important;line-height:1.7!important;margin:8px 0!important;color:#475569}
#toggleCoursesBtn{scroll-margin-top:100px}
@media(max-width:600px){.learning-nav{padding-left:4px;padding-right:4px}.learning-nav a{width:25%;font-size:11px}.learning-legend{gap:6px}.learning-legend span{padding:6px 8px}}
.lesson-card .learning-resume-label{color:#fff!important}

/* Compact Miraineko is part of the navigation; the floating cat stays unchanged. */
.has-learning-nav .learning-nav .mnk-bar{position:static!important;inset:auto!important;z-index:auto;width:150px;height:auto;min-height:52px;flex-direction:column;justify-content:center;align-items:center;gap:3px;padding:0;border:0;border-radius:12px;background:transparent;color:#526477;box-shadow:none;transform:none;animation:none;font:700 12px/1.4 'Noto Sans JP',sans-serif;cursor:pointer}
.has-learning-nav .learning-nav .mnk-bar img{width:24px;height:24px;object-fit:contain;background:transparent}
.has-learning-nav .learning-nav .mnk-bar .mnk-bar-txt{display:block}
.has-learning-nav .learning-nav .mnk-bar svg{display:none}
.has-learning-nav .learning-nav .mnk-bar:hover{background:#eef7fb;transform:none}
.has-learning-nav .learning-nav .mnk-bar:focus-visible{outline:3px solid #2563eb;outline-offset:2px}
@media(max-width:600px){.has-learning-nav .learning-nav>a,.has-learning-nav .learning-nav .mnk-bar{width:0;flex:1;min-width:0;font-size:11px}}
/* Let mobile users choose the compact navigation version too. */
.has-learning-nav .mnk-min{display:flex}

.learning-nav a[hidden]{display:none!important}
@media(max-width:600px){.learning-nav a{font-size:10px!important}.learning-nav a span{white-space:nowrap}}

/* 2026-10-09 スマホのカクつき対策（シャド「まだカクカクする」）。
   原因＝上のヘッダーの「ぼかし」（スクロールのたびに後ろを計算し直す）と、止まらないアニメ（猫の上下・光の帯・絵文字の揺れ・文字のグラデ移動）。
   スマホ幅ではぼかしを外し、無限アニメを止める。見た目は静止するだけで同じ。PCは今までどおり。 */
@media (max-width:760px){
  .site-header,.account-dropdown,.course-cover .course-meta span,.wlc-overlay{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  body::after,.hero-banner::after,.hero-cta::after,.course-emoji,.streak-flame,.consult-floating-arrow,.welcome-banner::before,
  .gradient-text,.btn-arrow,.hero-cat,.mnk-launch,.mnk-avatar,.mnk-bubble{animation:none!important}
}
@media (prefers-reduced-motion:reduce){
  body::after,.hero-banner::after,.hero-cta::after,.course-emoji,.streak-flame,.consult-floating-arrow,.gradient-text,.btn-arrow,.hero-cat{animation:none!important}
}
/* 下メニューでページを切り替える時、真っ白を挟まずに重ねて切り替える（対応ブラウザだけ。Safari 18.2以降・Chrome） */
@view-transition{navigation:auto}