/********************** - My Courses page - Course detail page ***********************/ /********************* ROOT **********************/ :root { --text-black: #121212; --text-gray: #9CA3AF; --text-gray-h: #E6E6E6; --bg-dark-light: #1A1A1A; --bg-dark: #000; --bg-gray: #FAFAFA; --border-gray: #EAEAEA; --border-gray-light: #F5F5F7; --normal: 400; --medium: 500; --bold: 700; --font-main-en: "futura-pt", sans-serif; --font-main-ja: "BIZ UDGothic", "Meiryo", "sans-serif"; --font-number: "brandon-grotesque", sans-serif; --font-content-ja: "Noto Sans JP", "BIZ UDGothic", sans-serif; --container: calc(1920px + (var(--container-side) * 2)); --container-side: 3.4722222222%; --container-side-sm: 20px; --container-l: 1280px; --container-m: 980px; --container-ms: 800px; --container-s: 600px; --container-ss: 480px; /*-- フォント標準スタイル --*/ /* h2 (En) */ --fs-h2-en: 7.6rem; --fs-h2-en-md: 5.8rem; --fs-h2-en-sm: 4.2rem; --fs-h2-en-sm-sm: 2.8rem; --lh-h2-en: 1; --ls-h2-en: -0.005em; /* h2 (Jp) */ --fs-h2-jp: 1.8rem; --fs-h2-jp-md: 1.4rem; --fs-h2-jp-sm: 1.2rem; --lh-h2-jp: 1.5; --ls-h2-jp: 0.24em; /* h3 (En) */ --fs-h3-en: 2rem; --lh-h3-en: 1.5; --ls-h3-en: 0.08em; /* h3 (Jp) */ --fs-h3-jp: 2.4rem; --lh-h3-jp: 1.5; --ls-h3-jp: 0.12em; /* p */ --fs-p: 1.6rem; --fs-p-sm: 1.4rem; --lh-p: 2; --ls-p: 0.12em; /* sub_en */ --fs-sub-en: 1.4rem; --lh-sub-en: 1.5; --ls-sub-en: 0.05em; /* sub_en_small */ --fs-sub-en-small: 1.2rem; /* h1 (En) */ --fs-page-h1-en: 7.2rem; --fs-page-h1-en-md: 5.6rem; --fs-page-h1-en-sm: 3.6rem; --lh-page-h1-en: 1; --ls-page-h1-en: 0.09em; } /********************* COMMON **********************/ *:focus-visible { outline: none!important; outline-offset: 0!important; box-shadow: none!important; } /********************* My Courses page **********************/ /* ローディング */ .ldt-cr-px-first-loading { justify-content: center; display: none; } /* 背景色 */ .ldt-cr-px-r :is(.ldt-cr-bg-\[var\(--ldt-cr-bg-color-hex\)\]) { background: var(--bg-gray); } .ldt-cr-page { min-height: calc(100vh - 7.7rem - 7rem); padding-bottom: 8rem!important; } @media (max-width: 990px) { .ldt-cr-page { min-height: calc(100vh - 5.7rem - 5.2rem); } } @media (max-width: 560px) { .ldt-cr-page { min-height: calc(100vh - 4.9rem - 5.2rem); } } /* セクション */ .ldt-cr-my-course-page { padding-block: 10rem!important; } .ldt-cr-my-course-page + .ldt-cr-text-center { display: none!important; } /* タブ上インフォメーションエリア */ .ldt-cr-member { display: none!important; } /* タブエリア */ .ldt-cr-categories { margin-bottom: 5rem!important; } .ldt-cr-categories button { padding: 0.6rem 2.5rem!important; font-size: 1.5rem!important; font-weight: var(--normal)!important; box-shadow: none!important; border: 0!important; background-color: #fff!important; transition: all 0.3s ease; } .ldt-cr-categories button.--is-active { background-color: var(--text-black)!important; color: #fff; pointer-events: none; } @media (hover: hover) { .ldt-cr-categories button:hover { opacity: .7; } } @media (max-width: 767px) { .ldt-cr-categories { display: flex!important; gap: 1rem 1.5rem!important; flex-wrap: wrap!important; justify-content: center!important; } } /* カートラッパー系 */ .ldt-cr-flex-wrap { width: fit-content; max-width: 118rem; width: 100%; margin: 0 auto; gap: 4.6rem; justify-content: flex-start!important; } /* カード */ @media (min-width: 640px) { .ldt-cr-flex-wrap { gap: 3.2rem; } .ldt-cr-course-list-my-course .ldt-cr-course-item { width: calc((100% - 3.2rem) / 2); } } @media (min-width: 960px) { .ldt-cr-flex-wrap { gap: 2.6rem; } .ldt-cr-course-list-my-course .ldt-cr-course-item { width: calc((100% - 2.6rem * 2) / 3); } } @media (min-width: 1080px) { } @media (min-width: 1280px) { .ldt-cr-course-list-my-course .ldt-cr-course-item { width: calc((100% - 4.6rem * 2) / 3); } } .ldt-cr-course-item-top { } .ldt-cr-course-item-hover-action { transition: all 0.3s ease; } @media (hover: hover) { .ldt-cr-course-item-top:hover .ldt-cr-course-item-hover-action { animation: fadeIn 0.3s forwards; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .ldt-cr-course-item-hover-action svg { display: none!important; } .ldt-cr-course-item-info { padding: 2rem 2rem 0; text-align: left; font-size: 1.8rem; letter-spacing: 0.12em; margin-top: 0!important; font-weight: var(--bold); } .ldt-cr-course-item-bottom { padding: 1.6rem 2rem 2.4rem!important; } /* 画像 */ .ldt-cr-course-item-top-media img { aspect-ratio: 349 / 180; height: 100%; object-fit: cover; } /* タイトル */ .ldt-cr-px-r :is(.md\:ldt-cr-text-xl) { font-size: 1.8rem; } /* 進捗バー */ .ldt-cr-px-r :is(.ldt-cr-bg-primary).ldt-cr-rounded-full { background: #A6C1EE; background: linear-gradient(111deg,rgba(166, 193, 238, 1) 0%, rgba(251, 194, 235, 1) 100%); } .ldt-cr-px-r :is(.ldt-cr-gap-1) { gap: 1.6rem; } .ldt-cr-course-progress .ldt-cr-bg-gray-200 { background-color: #f2f2f2!important; } /* ボタン */ .ldt-cr-course-actions { width: 100%; margin-top: 2rem; } .ldt-cr-course-actions a { width: 100%; font-size: 1.5rem; letter-spacing: 0.07em; font-weight: var(--normal); padding: 1.3rem 2.5rem!important; text-decoration: none!important; transition: all 0.3s ease; } .ldt-cr-course-actions a span { justify-content: center; } .ldt-cr-course-actions svg { display: none!important; } @media (hover: hover) { .ldt-cr-course-actions a:hover { background-color: var(--text-black); color: #fff; } } /* 登録日 */ .ldt-cr-course-enrollment-info, .ldt-cr-course-enrollment-date { display: none!important; } /********************* Course detail page **********************/ /* LDTのフォント */ #ldt-app-proxy-root { font-family: var(--font-content-ja); background: var(--bg-gray)!important; } .ldt-cr-button { font-family: var(--font-content-ja)!important; } .ldt-cr-button.ldt-cr-category { padding: 1rem 2.5rem!important; } .ldt-cr-course-main.ldt-cr-course-content { gap: 3.4rem!important; } .ldt-cr-course-page { padding-top: 5.6rem!important; padding-inline: 5.6rem!important; } @media screen and (max-width: 960px) { } @media screen and (max-width: 560px) { .ldt-cr-course-page { padding-top: 4rem!important; padding-inline: 15px!important; } } /* エディター用CSS */ .ldt-cr-card-title { font-size: 2.4rem; background: var(--bg-gray); line-height: 1.3; padding-top: 0!important; padding-bottom: 3.4rem!important; padding-right: 0!important; padding-left: 0!important; font-weight: 600!important; font-family: var(--font-content-ja)!important; } @media screen and (max-width: 960px) { } @media screen and (max-width: 560px) { .ldt-cr-card-title { font-size: 2rem; padding-top: 2.5rem!important; padding-bottom: 2.5rem!important; padding-right: 2rem!important; padding-left: 2rem!important; } } .ldt-cr-card-title span { font-weight: 600!important; } .ldt-cr-course-content-detail { background: transparent; } .ldt-cr-course-contents-wrapper { border-radius: 1.5rem; background-color: #fff; } .ldt-cr-lesson-contents { padding: 5rem!important; border: none!important; } @media screen and (max-width: 960px) { } @media screen and (max-width: 560px) { .ldt-cr-lesson-contents { padding: 3rem 2rem!important; } } .ldt-cr-lesson-content { padding: 0!important; } .ck-content h2, .ck-content h3, .ck-content h4, .ck-content h5 { font-weight: 600!important; font-family: var(--font-content-ja); } .ck-content p { font-family: var(--font-content-ja); line-height: 1.8; } .ck-content ul p { margin-top:0!important; } .ck-content ul p:first-child { margin-bottom:0!important; } .ck-content ul li + li { margin-top:0.5rem; } .ck-content ul p:last-child { margin-bottom: 2rem!important; } @media screen and (max-width: 960px) { } @media screen and (max-width: 560px) { .ck-content p { font-size: 1.4rem!important; } } .ck-content h2 { margin-top: 2.5em; } /* コードブロック */ .ck-content pre { border: none!important; background: var(--bg-gray)!important; border-radius: 1rem; padding: 2rem!important; color: #222; font-size: 1.6rem; line-height: 1.8; letter-spacing: 0.05em; word-break: break-all; } /* コピーボタン（JSで機能後付け） */ .ldt-cr-lesson-actions { padding: 0 2rem 6rem!important; border: none!important; } .ldt-cr-lesson-actions .ldt-cr-certificate-note { display: none!important; } @media screen and (max-width:560px) { .ldt-cr-card-title { font-size: 2rem; } } /* 報告フォーム */ .ldt-cr-comment-user { order: 1!important; margin-bottom: 0.5rem!important; } .ldt-cr-comment-content { order: 3!important; } .ldt-cr-lesson-comment { margin-top: 7rem!important; } .ldt-cr-comment-form textarea { padding: 3.5rem!important; border-color: var(--border-gray)!important; font-size: 1.6rem!important; letter-spacing: 0.05em; line-height: 1.8; } .ldt-cr-comment-form textarea::placeholder { color: var(--text-gray)!important; } .ldt-cr-comment-form button { width: 26rem!important; height: 4.7rem!important; display: flex; justify-content: center!important; align-items: center!important; text-align: center!important; background-color: #000!important; color: #fff!important; border: none!important; border-radius: 0!important; opacity: 1!important; margin-top: 2rem!important; font-size: 1.6rem!important; font-weight: var(--normal)!important; text-decoration: none!important; margin-left: 0!important; } .ldt-cr-comment-form button span { display: flex; justify-content: center!important; align-items: center!important; text-decoration: none!important; } .ldt-cr-comment-form button svg { display: none!important; } /* 報告フォームコメント */ .ldt-cr-comment-user > *:nth-child(1), .ldt-cr-comment-user > *:nth-child(2), .ldt-cr-comment-user > *:nth-child(3), /* .ldt-cr-comment-lesson, */ .ldt-cr-comment-action { display: none!important; } .ldt-cr-comment-lesson { order: 2!important; color: var(--text-gray)!important; margin-bottom: 1rem; } .ldt-cr-comment-lesson-title { font-weight: var(--normmal)!important; letter-spacing: 0.05em!important; font-style: normal!important; } .ldt-cr-comment-lesson span:nth-child(1) { display: none!important; } .ldt-cr-comment-list { margin-top: 3.2rem!important; } .ldt-cr-comment-list .ldt-cr-card { padding: 3rem 3.5rem!important; } .ldt-cr-comment-created-at { color: var(--text-gray); margin-bottom: 0.5rem; } .ldt-cr-comment-created-at, .ldt-cr-comment-content .ldt-cr-text-container { font-size: 1.6rem!important; letter-spacing: 0.05em; line-height: 1.8; font-weight: var(--normal)!important; font-family: var(--font-content-ja); } /* 「powered by LDT Team」の表記非表示 */ .ldt-cr-course-page + .ldt-cr-text-center { display: none!important; } /* 前後リンク */ .ldt-cr-button.ldt-cr-button-previous, .ldt-cr-button.ldt-cr-button-continue { min-width: 11.8rem; text-align: center !important; justify-content: center !important; align-items: center !important; margin: 0 1.4rem!important; text-decoration: none!important; padding: 1rem 0!important; } .ldt-cr-button.ldt-cr-button-previous span, .ldt-cr-button.ldt-cr-button-continue span { display: flex; text-align: center !important; justify-content: center !important; align-items: center !important; } .ldt-cr-button.ldt-cr-button-continue div { display: none !important; } .ldt-cr-button.ldt-cr-button-previous span svg, .ldt-cr-button.ldt-cr-button-continue span svg { display: none!important; } .ldt-cr-button-continue { background-color: #222!important; color: #fff!important; } /********************* サイドバー **********************/ .ldt-cr-course-content-nav-content { padding-bottom: 0!important; } @media screen and (max-width: 767px) { .ldt-cr-course-content-nav-content { width: 100%!important; max-width: 600px!important; } } @media screen and (max-width: 560px) { } .ldt-cr-course-sections-nav { font-family: var(--font-content-ja); } /* 講座一覧に戻るボタン */ .ldt-cr-course-nav-back { text-decoration: none!important; } .ldt-cr-course-nav-back .ldt-cr-w-full span { font-weight: var(--bold); } /* コースタイトルカード */ .ldt-cr-course-info-detail { padding: 2rem!important; } /* コース画像 */ .ldt-cr-course-featured-image img { width: 100%; height: 100%; object-fit: cover; } .ldt-cr-course-info .ldt-cr-course-featured-image img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 99 / 103; overflow: hidden; max-width: 99px!important; } /* 進捗リセットボタン */ .ldt-cr-reset-progress-action { display: none!important; } /* コースタイトル */ .ldt-cr-course-title { font-size: 1.7rem; font-weight: var(--medium)!important; font-family: var(--font-content-ja)!important; } /* コースセクション */ .ldt-cr-nav-section { border: none!important; } .ldt-cr-nav-section-main { padding: 2rem!important; } /* コース章タイトル */ .ldt-cr-nav-section-title { font-size: 1.6rem!important; letter-spacing: 0.05em; line-height: 1.5; font-weight: 600!important; } /* レッスン数 */ .ldt-cr-nav-section-count { display: none!important; } /* コースレッスン */ .ldt-cr-nav-lesson { padding: 2rem!important; } .ldt-cr-nav-lesson.--is-active { background-color: var(--bg-gray)!important; } /* コースレッスンタイトル */ .ldt-cr-nav-lesson-label { font-size: 1.5rem!important; letter-spacing: 0.05em; line-height: 1.5; font-weight: var(--medium)!important; color: var(--text-gray); } .ldt-cr-nav-lesson-label span { font-weight: var(--medium)!important; } .ldt-cr-nav-lesson.--is-active .ldt-cr-nav-lesson-label, .ldt-cr-nav-lesson.--is-completed .ldt-cr-nav-lesson-label { color: #222; } /* 未完了時のサークル */ .ldt-cr-nav-lesson-progress svg circle { } /* 完了ボタン */ .ldt-cr-button-complete { margin: 0 !important; background: #222222 !important; color: #fff !important; padding: 1rem 2rem 1rem 1.6rem!important; text-decoration: none!important; } .ldt-cr-button-complete .ldt-cr-flex, .ldt-cr-course-completed-btn.ldt-cr-button .ldt-cr-flex { gap: 1rem!important; } /* 動画枠線 */ .ldt-cr-video, .ldt-cr-content-video, .ldt-cr-iframe-wrapper, .ldt-cr-iframe-wrapper iframe { border: 0!important; --tw-border-opacity: 0!important; } .ldt-cr-lesson-content { border: 0!important; } .ldt-cr-course-item-footer-completed { flex-direction: column; align-items: flex-start!important; padding-bottom: 1.6rem; } .ldt-cr-course-completed-btn.ldt-cr-button { background: #222222 !important; color: #fff !important; padding: 0.5rem 4rem 0.7rem 3rem!important; text-decoration: none!important; margin-top: 1rem!important; } /* 途中視聴のポップアップボタン */ .ldt-cr-button-jump-to-last-time.ldt-cr-button { background: #222222; color: #fff; } .ldt-cr-button-certificate.ldt-cr-button { margin: 0 1.4rem; background: #222222; color: #fff; padding: 1rem 2rem 1rem 1.6rem!important; text-decoration: none!important; width: auto; display: block !important; margin: 7rem auto 0; } .ldt-cr-button-certificate .ldt-cr-flex { gap: 1rem!important; } /********************* 一覧カードをふわっと表示 **********************/ /* 1. 切り替わった瞬間に一瞬「透明」で待機させる */ .ldt-cr-course-list-my-course, .ldt-cr-flex-wrap { opacity: 0; /* 最初は完全に隠す */ animation: ldtSteadyFadeIn 0.2s ease-in-out forwards; animation-delay: 0s; } /* 2. アニメーションを「ゆっくり」開始させる */ @keyframes ldtSteadyFadeIn { 0% { opacity: 0; filter: blur(2px); /* タメの瞬間、少しぼかして境界を曖昧にする */ transform: translateY(15px); } 30% { opacity: 0; /* アニメーション開始直後もまだ透明を維持（タメを強調） */ } 100% { opacity: 1; filter: blur(0); transform: translateY(0); } } /* 3. タブボタンをクリックした時の反応を少し重厚にする（任意） */ .ldt-cr-categories button { transition: background-color 0.4s ease, color 0.4s ease !important; } .ldt-cr-hamberger-btn-sticky { position: static!important; } /********************* コードブロック用（コピペボタン） **********************/ /* コードブロックの親要素を相対位置に */ .ck-content pre { position: relative; padding-top: 2.5rem !important; /* ボタン用の余白 */ } /* コピーボタンのスタイル */ .ldt-copy-button { position: absolute; top: 5px; right: 5px; background: #222; color: #fff; border: none; border-radius: 4px; padding: 4px 12px; font-size: 1.2rem; cursor: pointer; opacity: 0.6; transition: opacity 0.2s, background 0.2s; font-family: sans-serif; z-index: 10; } .ldt-copy-button:hover { opacity: 1; background: #444; } .ldt-copy-button.is-copied { background: #28a745; /* コピー成功時の緑色 */ opacity: 1; } .ldt-cr-spinner-wrapper { margin-block: 0!important; padding-top: 8rem; } .ldt-cr-course-content a { transition: all .3s; } .ldt-cr-course-content a:hover { opacity: 0.7; } /********************* 外部リンクアイコン **********************/ .ldt-cr-course-content a[target="_blank"]::after { content: ""; display: inline-block; width: 1em; height: 1em; margin-left: 4px; vertical-align: inherit; -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; background-color: currentColor; top: 1px; position: relative; }