/* ========================================================================== レイアウト（アプリシェル・サイドバー・ドロワー・ログイン・レスポンシブ）座標について: プロトタイプは上部 44px を DEBUG バーが占有する前提で書かれているが、 DEBUG バーは本実装では作らないため、全ての固定座標から 44px を差し引いてある。 ========================================================================== */ /* -------------------------------------------------------------------------- シェル -------------------------------------------------------------------------- */ .lms-shell { min-height: 100vh; /* 画面横断の横溢れガード（fix-progress-row-mobile-overflow design.md D4 / app-shell「ヘッダー操作部品の可視領域内保持」）。どの画面か 1 つでも内容が横に溢れると、モバイルではレイアウトビューポートが溢れ幅まで拡張され、position: fixed の .lms-header がその拡張後の幅で描画される。右寄せの .lms-header__right（アバター・バーガー）は可視領域の外に出て押せなくなり、管理者が画面遷移の手段を失う（2026-07-29 実測: /admin/progress で scrollWidth 579px・バーガー left 538px・可視領域 375px）。ここで溢れを止めることで、その連鎖を遮断する。 hidden ではなく clip を使う。overflow: hidden は「スクロールコンテナ」を生成し、さらに overflow-y の計算値まで auto に格上げされるため、次の 2 つが壊れる。 1. .lms-sidebar の position: sticky（追従の基準となるスクロールポートがビューポートから .lms-shell に変わる） 2. アンカージャンプの scroll-margin-top: var(--scroll-offset) （.lms-cp-row ほかで使用。スクロールする要素が変わりオフセットが効かなくなる） overflow-x: clip はスクロールコンテナを生成せず、overflow-y: visible とも共存できるため sticky / scroll-margin の挙動を変えない。これは溢れを「隠す」多層防御であって根治ではない。個々の画面の横溢れは各画面側で解消すること（本 change では .lms-progress-row。components.css の進捗管理節を参照）。 */ overflow-x: clip; } .lms-body { display: flex; } .lms-main { flex: 1; min-width: 0; padding: var(--main-pad-y) var(--main-pad-x) var(--main-pad-bottom); } .lms-content { max-width: var(--content-max-w); margin: 0 auto; } /* 新規ユーザー発行のような縦長フォーム画面 */ .lms-content--narrow { max-width: var(--page-narrow-max-w); } /* -------------------------------------------------------------------------- ヘッダー（半透明グレー + blur。SHELL-R5） -------------------------------------------------------------------------- */ .lms-header { position: fixed; top: 0; left: 0; right: 0; height: var(--header-h); background: var(--c-header-bg); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--c-border); display: flex; align-items: center; justify-content: space-between; padding: 0 20px; z-index: var(--z-header); } /* ヘッダーは fixed なので、その分だけ中身を押し下げる */ .lms-shell { padding-top: var(--header-h); } /* -------------------------------------------------------------------------- 部分更新のローディングバー（受講者 #13 / ADR-0011） base.html のにより、boosted 遷移が飛んでいる間 htmx がこの要素へ .htmx-request を付ける（htmx v2 addRequestIndicatorClasses）。出るときだけ transition-delay 150ms を掛け、速い応答（ローカル実測 181ms・キャッシュヒットはそれ以下）でちらつかせない。消えるときは遅延なしで即座に戻す。 -------------------------------------------------------------------------- */ .lms-progress { position: fixed; top: var(--header-h); /* ヘッダーの直下。ヘッダーは fixed で高さ --header-h */ left: 0; right: 0; height: 3px; z-index: var(--z-progress); background: var(--c-primary); transform: scaleX(0); transform-origin: left center; opacity: 0; pointer-events: none; transition: opacity var(--dur-fade) linear; } .lms-progress.htmx-request { opacity: 1; transition-delay: 150ms; /* 出るときだけ遅らせる（消えるときは基底規則の遅延 0） */ animation: lmsProgress var(--dur-progress) cubic-bezier(0.2, 0.8, 0.3, 1) 150ms forwards; } .lms-logo { display: inline-flex; align-items: center; cursor: pointer; color: inherit; } .lms-logo:hover { text-decoration: none; } .lms-logo__img { width: 46px; height: 46px; border-radius: var(--r-7); object-fit: contain; } .lms-header__right { display: flex; align-items: center; gap: 10px; } /* -------------------------------------------------------------------------- アバター（ヘッダー右・ドロップダウンのトリガー。SHELL-R2）背景色はテンプレートが style="--avatar-bg: #xxxxxx" で注入する。線色は「白」と「既定の線色」の 2 択で、背景色とのコントラスト比が大きい方をサーバー側（AvatarColor.prefersWhiteIcon）が選ぶ。相対輝度を固定のしきい値と比べる二値判定ではない（fix-avatar-icon-contrast design.md D1）。 ★ 下の 2 つの color 値は Java の AvatarColor.DEFAULT_ICON_LINE_COLOR（#374151）/ WHITE_ICON_LINE_COLOR（#ffffff）と同値に保つこと。片方だけ変えると判定に使う色と実際に描画される色が食い違う（同 D2）。 -------------------------------------------------------------------------- */ .lms-avatar { width: 38px; height: 38px; border-radius: var(--r-full); border: 1px solid var(--c-border); background: var(--avatar-bg); /* テンプレート注入。未指定時は transparent */ color: var(--c-gray-700); /* 既定の線色（= AvatarColor.DEFAULT_ICON_LINE_COLOR） */ cursor: pointer; display: flex; align-items: center; justify-content: center; flex: none; padding: 0; } /* 白の方が背景とのコントラスト比が大きいときだけ線を白にする（= AvatarColor.WHITE_ICON_LINE_COLOR） */ .lms-avatar--on-dark { color: var(--c-white); } /* -------------------------------------------------------------------------- ドロップダウン（汎用・ui/dropdown.ts）トリガー直下にパネルを絶対配置し、opacity + translateY で開閉する。 -------------------------------------------------------------------------- */ .lms-dropdown { position: relative; display: inline-flex; } .lms-dropdown__panel { position: absolute; right: 0; top: calc(100% + 8px); width: 176px; background: var(--c-bg-surface); border-radius: var(--r-12); box-shadow: var(--shadow-modal); z-index: var(--z-modal); /* 開閉トランジション（AUTH-R5「開閉トランジションを持つ」） */ opacity: 1; transform: translateY(0); transition: opacity var(--dur-modal) ease, transform var(--dur-modal) ease; } /* hidden 属性のときは表示せず、閉じる直前のアニメーションのため opacity/transform も戻す */ .lms-dropdown__panel[hidden] { display: none; } /* -------------------------------------------------------------------------- バーガー（SP のみ・3 本 span・drawer.ts が is-open を同期。SHELL-R3） -------------------------------------------------------------------------- */ .lms-hamburger { display: none; /* PC 非表示。SP で flex（レスポンシブ節） */ flex-direction: column; justify-content: space-between; width: 22px; height: 18px; padding: 0; border: none; background: none; cursor: pointer; } .lms-hamburger__bar { display: block; width: 22px; height: 2px; background: var(--c-gray-700); border-radius: 2px; transition: transform 500ms ease, opacity 500ms ease; } /* ドロワー展開中: 上下線を回転して交差、中央線をフェードアウト（試作サイト準拠） */ .lms-hamburger.is-open .lms-hamburger__bar:nth-child(1) { transform: translateY(8px) rotate(-45deg); } .lms-hamburger.is-open .lms-hamburger__bar:nth-child(2) { opacity: 0; } .lms-hamburger.is-open .lms-hamburger__bar:nth-child(3) { transform: translateY(-8px) rotate(45deg); } /* -------------------------------------------------------------------------- サイドバー（幅トランジション + 横クリップ。SHELL-R4 / SHELL-R5） -------------------------------------------------------------------------- */ .lms-sidebar { width: var(--sidebar-w); flex: none; height: calc(100vh - var(--header-h)); position: sticky; top: var(--header-h); background: var(--c-shell-bg); overflow-x: hidden; /* 横は隠す（内側固定幅をクリップ） */ overflow-y: auto; /* 縦はスクロール（既存） */ transition: width var(--dur-sidebar) ease-in-out; /* 開閉アニメ（SHELL-R4） */ } /* 内側: 固定幅。aside が 0 に縮んでも中身はリフローせずクリップされる */ .lms-sidebar__inner { width: var(--sidebar-w); box-sizing: border-box; padding: 14px 10px; } /* 折りたたみ（PC）: 幅 0 */ .lms-sidebar--docked.is-collapsed { width: 0; } /* ドロワー内では固定幅を解除して全幅にする */ .lms-drawer .lms-sidebar__inner { width: 100%; } /* 左下固定の開閉ボタン（PC のみ・SHELL-R4） */ .lms-sidebar-toggle { position: fixed; bottom: 16px; left: 16px; width: 36px; height: 36px; border-radius: var(--r-full); border: 1px solid var(--c-border); background: var(--c-bg-surface); color: var(--c-gray-700); box-shadow: var(--shadow-toast); cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: var(--z-header); } /* ボタンのアイコン向き（‹ 展開中 / › 折りたたみ中）。chevron を回転で表現 */ .lms-sidebar-toggle .lms-sidebar-toggle__icon { /* span 内部を flex 文脈にして SVG のベースライン余白（descender 分・約 3〜4px）を消し、 span のボックスを SVG の 16px 正方と一致させる。これで transform-origin の既定値（ボックス中心）が chevron の視覚中心（viewBox 24 の中心 12,12 に対して対称なパス）と一致し、回転が軌道を描かなくなる。きっかけ: 2026-07-31 実機レビュー（change: unify-icon-vertical-centering / design D1）。 */ display: inline-flex; transition: transform var(--dur-sidebar) ease; transform: rotate(180deg); /* 既定（展開中）= ‹ 向き */ } .lms-sidebar-toggle.is-collapsed .lms-sidebar-toggle__icon { transform: rotate(0deg); /* 折りたたみ中 = › 向き */ } /* ドロワー内に置いたときは sticky を解除する */ .lms-drawer .lms-sidebar { position: static; height: 100%; width: 100%; } .lms-sb-divider { height: 1px; margin: 8px 4px; background: var(--c-border); } .lms-sb-divider--soft { background: var(--c-border-soft); } .lms-sb-admin { margin-bottom: 8px; } /* 共通の行スタイル */ .lms-sb-row { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: var(--r-7); cursor: pointer; font-size: var(--fs-13-5); user-select: none; width: 100%; border: none; background: transparent; text-align: left; color: inherit; font-family: inherit; } a.lms-sb-row:hover, button.lms-sb-row:hover { /* プロトタイプに hover 指定は無いが、素の HTML では操作対象が分からないため補う */ background: var(--c-gray-50); text-decoration: none; } .lms-sb-row__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lms-sb-chevron { display: flex; flex: none; color: var(--c-gray-400); transition: transform var(--dur-acc); } [data-open] > .lms-sb-row .lms-sb-chevron, [data-open] > * > .lms-sb-row .lms-sb-chevron { transform: rotate(90deg); } /* 階層ごとの見た目 */ .lms-sb-row--admin-head { font-weight: var(--fw-bold); /* 背景が --c-shell-bg（gray-100）の淡色地のため --c-red-700（部品 #1） */ color: var(--c-red-700); } .lms-sb-row--admin-item { padding-left: 30px; font-weight: var(--fw-normal); color: var(--c-gray-600); } .lms-sb-row--home { font-weight: var(--fw-semibold); color: var(--c-gray-900); } .lms-sb-row--chapter { font-weight: var(--fw-semibold); color: var(--c-gray-900); } /* 未解放章（chapter-unlock CU-R4）。クリック不可・グレー表示。 */ .lms-sb-row--locked { color: var(--c-nav-locked); cursor: default; } .lms-sb-row--locked .lms-sb-row__label { color: var(--c-nav-locked); } .lms-sb-locked-note { margin-left: auto; font-size: var(--fs-11); color: var(--c-nav-locked); } .lms-sb-row--sub { padding-left: 26px; font-weight: var(--fw-medium); color: var(--c-gray-700); } .lms-sb-row--section { /* インデント: 12px + 階層 * 16px（chapter 直下 = 1、サブチャプター配下 = 2） */ padding-left: calc(12px + var(--sb-depth, 1) * 16px); font-weight: var(--fw-normal); color: var(--c-gray-600); } /* 現在表示中のページ */ .lms-sb-row.is-active { background: var(--c-blue-50); color: var(--c-primary); font-weight: var(--fw-semibold); } /* 実施中レンジ（受講者本人のみ・サーバー側で算出して付与する） */ .lms-sb-row.is-doing { color: var(--c-in-progress); font-weight: var(--fw-semibold); } .lms-sb-label { padding: 4px 10px; font-size: var(--fs-11); font-weight: var(--fw-semibold); /* --c-text-faint を経由していないためトークン変更では直らない（統合レポート §4.5） */ color: var(--c-gray-600); } .lms-sb-dot { width: 5px; height: 5px; border-radius: var(--r-full); background: var(--c-gray-300); flex: none; } .is-doing .lms-sb-dot { background: var(--c-in-progress); } /* セクション行末尾のチェックポイント ID バッジ */ .lms-sb-cp { font-size: var(--fs-10); font-weight: var(--fw-bold); color: var(--c-primary); background: var(--c-blue-50); border-radius: var(--r-4); padding: 1px 5px; flex: none; margin-left: auto; } .lms-sb-children { animation: lmsAcc var(--dur-acc); } /* -------------------------------------------------------------------------- モバイルドロワー -------------------------------------------------------------------------- */ .lms-drawer-overlay { position: fixed; inset: var(--header-h) 0 0 0; background: var(--c-overlay-drawer); z-index: var(--z-drawer); animation: lmsFade var(--dur-fade); } /* トリガーであるバーガーがヘッダー右端にあるため、パネルも画面右端から出す */ .lms-drawer { position: absolute; top: 0; right: 0; bottom: 0; width: var(--sidebar-w); background: var(--c-shell-bg); overflow-y: auto; } /* -------------------------------------------------------------------------- ページ見出し（管理画面共通） -------------------------------------------------------------------------- */ .lms-page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 22px; flex-wrap: wrap; } .lms-page-head h1 { font-size: var(--fs-22); font-weight: var(--fw-bold); margin: 0; } .lms-page-head p { font-size: var(--fs-13); color: var(--c-text-muted); margin: 6px 0 0; } /* ホーム画面の h1 は 24px */ .lms-page-head--home h1 { font-size: var(--fs-24); } .lms-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; gap: 12px; flex-wrap: wrap; } /* -------------------------------------------------------------------------- ログイン画面（シェルを使わない） -------------------------------------------------------------------------- */ .lms-login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--c-gray-50); /* 試作サイト bg-gray-50 準拠 */ } .lms-login__wrap { width: 100%; max-width: 384px; /* 試作サイト max-w-sm */ } /* ロゴ画像（中央・カードの外）。試作サイト company_logo.png / h-40 w-40 相当 */ .lms-login__brand { text-align: center; margin-bottom: 12px; } .lms-login__logo-img { width: 160px; height: 160px; margin: 0 auto; border-radius: var(--r-6); object-fit: contain; } /* フォームを収めるパネル。試作サイトのカードは透明（背景・枠線・影なし） */ .lms-login__panel { padding: 24px; } .lms-login__form { display: flex; flex-direction: column; gap: 16px; /* 試作サイト gap-4 */ } /* 送信ボタンだけ間隔を少し広げる（試作サイト mt-2） */ .lms-login__submit { margin-top: 8px; } /* 無効時は薄い青（試作サイト disabled:bg-blue-300）。アプリ標準の opacity 0.45 は使わない。入力が揃うまで submit-guard.ts が aria-disabled="true" を付ける（JS が動かなければ活性のまま）。 disabled 属性は使わない（ログイン #4 / #10。Enter の implicit submission と Tab 到達性を殺すため）。 :disabled 側のセレクタは、将来サーバー側で disabled を出す場合に備えて残す。 */ .lms-login .lms-btn--primary:disabled, .lms-login .lms-btn--primary:disabled:hover, .lms-login .lms-btn--primary[aria-disabled="true"], .lms-login .lms-btn--primary[aria-disabled="true"]:hover { background: var(--c-blue-300); opacity: 1; cursor: not-allowed; } /* ログイン入力は角丸 6px・フォーカスリング blue-500 で試作サイトに合わせる（アプリ標準の入力スタイルは変えず、ログイン画面内だけ上書きする） */ .lms-login .lms-input { border-radius: var(--r-6); } .lms-login .lms-input:focus { border-color: var(--c-border-input); box-shadow: 0 0 0 2px var(--c-blue-500); } /* パスワード表示切替（目アイコン）。入力の右端に重ねる */ .lms-login__pw-wrap { position: relative; } .lms-login__pw-wrap .lms-input { padding-right: 40px; /* トグルボタンと文字が重ならないように（試作サイト pr-10） */ } .lms-login__pw-toggle { position: absolute; top: 21px; /* 入力の縦中央（.lms-input の高さ ≒ 42px の半分）。下に誤差

が付いてもズレない */ /* WCAG 2.2 の 2.5.8（24×24 CSS px）を満たす当たり判定。18px のアイコンは中央寄せで right 12〜30px の位置を維持する（UI/UX レビュー 2026-07-27 ログイン #1）。 */ right: 9px; width: 24px; height: 24px; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; padding: 0; border: none; background: none; /* opacity は付けない。#6b7280 に 0.7 を掛けると白地 2.76:1 で 1.4.11 に不適合になる（UI/UX レビュー 2026-07-27 ログイン #2）。指定なしで 4.83:1。 */ color: var(--c-text-muted); cursor: pointer; } /* 作成者スタイルの display:inline-flex が UA の [hidden]{display:none} に勝つため、明示的に打ち消す。password-toggle.ts が button.hidden を切り替える前提で必要（UI/UX レビュー 2026-07-27 ログイン #3。前例: components.css:717 .lms-overlay[hidden] / layout.css:137 .lms-dropdown__panel[hidden]）。 */ .lms-login__pw-toggle[hidden] { display: none; } /* 目アイコンを包む span。SVG のベースライン余白を消して span のボックスを SVG（18px 正方）に一致させ、ボタン枠（24×24・inline-flex + center）の上下中央にアイコンを置く。きっかけ: 2026-07-31 実機レビューの横展開点検（change: unify-icon-vertical-centering / design D1・D4）。 */ [data-lms-password-icon] { display: inline-flex; } /* 上の作成者スタイルが UA の [hidden]{display:none} に勝つため明示的に打ち消す。 password-toggle.ts が span.hidden を切り替える前提で必須（直上の .lms-login__pw-toggle[hidden] と同じ理由）。 */ [data-lms-password-icon][hidden] { display: none; } .lms-login__hint { margin-top: 14px; font-size: var(--fs-12); color: var(--c-text-faint); text-align: center; } /* -------------------------------------------------------------------------- パスワード設定画面（/account-setup/{token}）ログイン画面と同じ未認証レイアウト（.lms-login 系）を使い、見出しと案内だけを足す（introduce-password-setup-url 05_ui.md §2） -------------------------------------------------------------------------- */ .lms-setup__welcome { margin: 0 0 4px; font-size: var(--fs-18); font-weight: var(--fw-semibold); color: var(--c-text-strong); text-align: center; } .lms-setup__email { margin: 0 0 20px; font-size: var(--fs-13); color: var(--c-text-muted); text-align: center; /* 長いメールアドレスでも 384px 幅のパネルから溢れさせない */ overflow-wrap: anywhere; } .lms-setup__message { margin: 0; font-size: var(--fs-14); color: var(--c-text-body); text-align: center; line-height: var(--lh-relaxed); } /* -------------------------------------------------------------------------- レスポンシブ（プロトタイプ準拠の 1 段階のみ: 1023px 以下 = モバイル） -------------------------------------------------------------------------- */ @media (max-width: 1023px) { /* 常設サイドバーは隠し、ハンバーガー + ドロワーに切り替える */ .lms-sidebar--docked { display: none; } .lms-hamburger { display: flex; } .lms-sidebar-toggle { display: none; /* 開閉ボタンは PC 専用（SHELL-R4） */ } .lms-main { padding: var(--main-pad-y-sp) var(--main-pad-x-sp) var(--main-pad-bottom-sp); } } @media (min-width: 1024px) { /* デスクトップではドロワーを一切出さない */ .lms-drawer-overlay { display: none !important; } } /* -------------------------------------------------------------------------- 学習画面（curriculum-content）: 本文カラム + 目次カラム -------------------------------------------------------------------------- */ /* 3 カラム grid。本文カラムの左右の余白（左スペーサーと目次カラム）を、中央配置が成立するすべての幅で等しく保つ。経緯（CLC-BR-02 / fix-content-center-mid-width design.md D2）: 左スペーサーが minmax(0, 1fr)、目次カラムが minmax(var(--toc-w), 1fr) と非対称だったため、本文を最大幅で置いた残り幅が目次幅の 2 倍（440px）を下回る帯（コンテンツ領域の内幅 1252〜1472px。ビューポート約 1596〜1816px）で目次カラムだけが最小値 220px を確保し、不足分が左スペーサーからのみ差し引かれていた。結果として左の余白だけが極端に狭くなり本文が左へ偏った（実測 1650px: 左 54px / 本文 960px / 目次カラム 220px）。対策: 左スペーサーの最小値を目次カラムと同じ var(--toc-w) まで引き上げる。ただし無条件に引き上げると詰め配置帯でも本文が 220px 分痩せるため、「本文が var(--content-min-w) を下回らない範囲」を上限として clamp() で頭打ちにする。var(--content-min-w) はこの退行防止のための上限である。 clamp() の 100% は grid コンテナ（.lms-section）の content box 幅に解決される（gap は含まれないので 2 本分を式で明示的に引いている）。目次カラム（3 列目）の定義は変更しない（design.md D4）。 */ .lms-section { display: grid; grid-template-columns: minmax( clamp( 0px, 100% - 2 * var(--article-toc-gap) - var(--toc-w) - var(--content-min-w), var(--toc-w) ), 1fr ) /* 左スペーサー（min は目次カラムと対称。ただし本文の最小幅を優先） */ minmax(0, var(--content-max-w)) /* 本文カラム（上限 960px） */ minmax(var(--toc-w), 1fr); /* 目次カラム（右端寄せ。最小 220px。変更しない） */ column-gap: var(--article-toc-gap); } .lms-section__main { grid-column: 2; min-width: 0; } .lms-section__title { font-size: var(--fs-26); font-weight: var(--fw-bold); line-height: var(--lh-tight); margin: 10px 0 20px; } .lms-breadcrumb { font-size: var(--fs-12-5); color: var(--c-text-muted); display: flex; flex-wrap: wrap; align-items: center; gap: 4px; } .lms-breadcrumb__link { color: var(--c-text-muted); } .lms-breadcrumb__text.is-current { color: var(--c-text-body); } .lms-breadcrumb__sep { color: var(--c-text-faint); } .lms-section__updated { text-align: right; font-size: var(--fs-12-5); color: var(--c-text-muted); margin: 24px 0 0; } .lms-pager__divider { border: none; border-top: 1px solid var(--c-border); margin: 20px 0; } .lms-pager { display: flex; justify-content: space-between; } .lms-pager__link { display: flex; align-items: center; gap: 6px; color: var(--c-text-body); font-size: var(--fs-13-5); border: 1px solid var(--c-border); border-radius: var(--r-8); padding: 10px 16px; max-width: 45%; } .lms-pager__link:hover { background: var(--c-gray-50); text-decoration: none; } .lms-pager__link--next { margin-left: auto; } .lms-pager__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* -------------------------------------------------------------------------- 目次（ToC） -------------------------------------------------------------------------- */ .lms-toc { grid-column: 3; justify-self: end; width: var(--toc-w); position: sticky; top: var(--sticky-top); align-self: start; } .lms-toc__title { font-size: var(--fs-11); color: var(--c-text-faint); font-weight: var(--fw-semibold); letter-spacing: 0.04em; margin: 0 0 8px; } .lms-toc__list { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; max-height: calc(100vh - var(--sticky-top) - 44px); } .lms-toc__item { font-size: var(--fs-12-5); line-height: var(--lh-snug); padding: 4px 0 4px 8px; border-left: 2px solid transparent; text-decoration: none; color: var(--c-text-muted); } .lms-toc__item:hover { text-decoration: none; color: var(--c-text-body); } .lms-toc__item--l3 { padding-left: 20px; } .lms-toc__item--l4 { padding-left: 32px; } .lms-toc__item.is-active { color: var(--c-primary); font-weight: var(--fw-medium); border-left-color: var(--c-primary); } .lms-toc__top { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--c-border-soft); font-size: var(--fs-12-5); color: var(--c-text-muted); background: none; border-left: none; border-right: none; border-bottom: none; cursor: pointer; text-align: left; font-family: inherit; } @media (max-width: 1023px) { .lms-toc { display: none; } .lms-section { display: block; } .lms-pager { flex-direction: column; align-items: stretch; gap: 8px; } /* PC 用の max-width: 45% キャップを解除しつつ、コンテナ幅（100%）で頭打ちにする。 max-width: none だと、nowrap ラベル（.lms-pager__label）の min-content 幅がコンテナ幅を突き抜けてしまい、ellipsis の前提（親幅による強制縮小）が成立しない（VT-PGW-06 実測・2026-08-04。fix-pager-prev-width）。 */ .lms-pager__link { max-width: 100%; } /* 縦並び（column）では cross 軸が水平になる。cross 軸の auto マージンは align-items: stretch を打ち消すため、リンクはコンテンツ幅になり、余った幅を auto マージン側が吸収して寄せが決まる。「次へ」の margin-left: auto と鏡写しにすることで、「戻る」= コンテンツ幅・左寄せ /「次へ」= コンテンツ幅・右寄せの対称なレイアウトになる（fix-pager-prev-width design D1）。 */ .lms-pager__link--prev { margin-right: auto; } }