@charset "UTF-8"; /* ========================================================================= lesson.css — CCNA レッスンページ共通スタイルトーン：ccna.cssと同じ青系（読み物特化）配置：/ccna/lesson.css 依存：/styles.css, /ccna/ccna.css 想定：で適用される ========================================================================= */ /* ------------------------------ 1. レイアウト共通 ------------------------------ */ .ccna-lesson-body { background: var(--ccna-bg); } .lesson-narrow { max-width: 760px; margin-left: auto; margin-right: auto; } /* ------------------------------ 2. LESSON HEADER ------------------------------ */ .lesson-header { padding: 40px 0 0px; background: linear-gradient(180deg, var(--ccna-accent-bg-soft) 0%, var(--ccna-bg) 100%); border-bottom: 1px solid var(--ccna-border); } /* パンくず */ .lesson-breadcrumb { font-family: var(--ccna-font-mono); font-size: 0.78rem; letter-spacing: 0.08em; color: var(--ccna-ink-muted); margin-bottom: 28px; } .lesson-breadcrumb a { color: var(--ccna-primary); text-decoration: none; transition: color 0.2s ease; } .lesson-breadcrumb a:hover { color: var(--ccna-primary-strong); text-decoration: underline; } .lesson-bc-sep { margin: 0 8px; color: var(--ccna-ink-faint); } /* レッスン番号 + 章名 */ .lesson-meta { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; } .lesson-meta-toggle { margin-left: auto; } .lesson-num { font-family: var(--ccna-font-mono); font-size: 0.78rem; letter-spacing: 0.16em; color: #ffffff; background: var(--ccna-gradient-cta); padding: 6px 12px; border-radius: 999px; } .lesson-meta-sep { color: var(--ccna-ink-faint); font-size: 0.85rem; } .lesson-chapter { font-size: 0.9rem; color: var(--ccna-ink-soft); letter-spacing: 0.05em; } /* タイトル */ .lesson-title { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 700; line-height: 1.4; letter-spacing: 0.02em; color: var(--ccna-ink); margin: 0 0 36px; } /* このページで学ぶこと */ .lesson-overview { background: var(--ccna-bg-tint); border: 1px solid var(--ccna-border); border-left: 4px solid var(--ccna-primary-soft); border-radius: var(--ccna-radius-md); padding: 24px 28px; box-shadow: var(--ccna-shadow-sm); } .lesson-overview-label { font-family: var(--ccna-font-mono); font-size: 0.75rem; letter-spacing: 0.16em; color: var(--ccna-primary); margin-bottom: 12px; text-transform: uppercase; } .lesson-overview p { font-size: 0.95rem; line-height: 2; color: var(--ccna-ink-soft); margin: 0 0 1em; } .lesson-overview p:last-child { margin-bottom: 0; } .lesson-overview strong { color: var(--ccna-ink); font-weight: 700; background: linear-gradient(transparent 65%, var(--ccna-accent-bg) 65%); padding: 0 2px; } /* ------------------------------ 3. LESSON BODY — 本文 ------------------------------ */ .lesson-body { padding: 60px 0 80px; } .lesson-section { margin-bottom: 56px; scroll-margin-top: 80px; } .lesson-section:last-of-type { margin-bottom: 32px; } /* H2 — セクション見出し */ .lesson-h2 { font-size: clamp(1.3rem, 2.6vw, 1.7rem); font-weight: 700; line-height: 1.5; letter-spacing: 0.02em; color: var(--ccna-ink); margin: 0 0 24px; padding-bottom: 14px; border-bottom: 2px solid var(--ccna-accent); display: flex; align-items: baseline; gap: 12px; } .lesson-h2-num { font-family: var(--ccna-font-en); font-size: 1.5em; color: var(--ccna-primary-soft); font-weight: 400; line-height: 1; letter-spacing: 0.02em; } /* H3 — 中見出し */ .lesson-h3 { font-size: 1.1rem; font-weight: 700; line-height: 1.6; color: var(--ccna-ink); margin: 36px 0 16px; padding-left: 14px; border-left: 4px solid var(--ccna-primary-soft); } /* 本文段落 */ .lesson-body p { font-size: 1rem; line-height: 2; color: var(--ccna-ink-soft); margin: 0 0 1.4em; } .lesson-body p:last-child { margin-bottom: 0; } .lesson-body strong { color: var(--ccna-ink); font-weight: 700; background: linear-gradient(transparent 65%, var(--ccna-accent-bg) 65%); padding: 0 2px; } .lesson-body em { font-style: normal; color: var(--ccna-primary-strong); font-weight: 500; } .lesson-body a { color: var(--ccna-primary); text-decoration: none; border-bottom: 1px solid var(--ccna-accent); padding-bottom: 1px; transition: color 0.2s ease, border-color 0.2s ease; } .lesson-body a:hover { color: var(--ccna-primary-strong); border-bottom-color: var(--ccna-primary-strong); } /* リスト */ .lesson-list { list-style: none; margin: 0 0 1.4em; padding: 0; display: grid; gap: 8px; } .lesson-list li { position: relative; padding-left: 24px; font-size: 0.96rem; line-height: 1.9; color: var(--ccna-ink-soft); } .lesson-list li::before { content: ''; position: absolute; left: 6px; top: 0.75em; width: 8px; height: 8px; border-radius: 50%; background: var(--ccna-accent); box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.18); } .lesson-list li strong { color: var(--ccna-ink); background: none; padding: 0; } /* ------------------------------ 4. EXAMPLE / POINT / ANALOGY 囲みボックス ------------------------------ */ .lesson-box { margin: 28px 0; padding: 22px 26px; border-radius: var(--ccna-radius-md); box-shadow: var(--ccna-shadow-sm); } .lesson-box-label { font-family: var(--ccna-font-mono); font-size: 0.74rem; letter-spacing: 0.16em; margin-bottom: 12px; text-transform: uppercase; } .lesson-box p { margin: 0 0 0.8em; font-size: 0.94rem; line-height: 1.95; } .lesson-box p:last-child { margin-bottom: 0; } .lesson-box .lesson-list { margin: 0; } .lesson-box .lesson-list li { font-size: 0.92rem; } /* EXAMPLE 系 — 水色 */ .lesson-box-example { background: var(--ccna-accent-bg-soft); border: 1px solid rgba(56, 189, 248, 0.25); border-left: 4px solid var(--ccna-accent); } .lesson-box-example .lesson-box-label { color: var(--ccna-primary); } /* POINT 系 — 濃い青の左ボーダー */ .lesson-box-point { background: var(--ccna-bg-tint); border: 1px solid var(--ccna-border); border-left: 4px solid var(--ccna-primary); } .lesson-box-point .lesson-box-label { color: var(--ccna-primary-strong); } .lesson-box-point p strong { color: var(--ccna-primary-strong); } /* ANALOGY（たとえ話）系 — やわらかい黄系 */ .lesson-box-analogy { background: rgba(251, 191, 36, 0.08); border: 1px solid rgba(251, 191, 36, 0.3); border-left: 4px solid #fbbf24; } .lesson-box-analogy .lesson-box-label { color: #b45309; } .lesson-box-analogy p strong { color: #b45309; } [data-theme="dark"] .lesson-box-analogy { background: rgba(251, 191, 36, 0.1); border-color: rgba(251, 191, 36, 0.35); } [data-theme="dark"] .lesson-box-analogy .lesson-box-label, [data-theme="dark"] .lesson-box-analogy p strong { color: #fbbf24; } /* ------------------------------ 5. ゆみちゃん吹き出し ------------------------------ */ .lesson-yumi { display: grid; grid-template-columns: 1fr 92px; gap: 18px; align-items: start; margin: 32px 0; } .lesson-yumi-img { margin: 0; width: 92px; height: 92px; border-radius: 50%; background: var(--ccna-accent-bg); border: 2px solid var(--ccna-accent-light); overflow: hidden; flex-shrink: 0; grid-column: 2; grid-row: 1; } .lesson-yumi-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .lesson-yumi-bubble { position: relative; background: var(--ccna-accent-bg-soft); border: 1px solid rgba(56, 189, 248, 0.3); border-radius: 16px; padding: 18px 22px; margin-top: 10px; grid-column: 1; grid-row: 1; } /* 吹き出しの三角形（右側につけてゆみちゃんを指す） */ .lesson-yumi-bubble::before { content: ''; position: absolute; right: -10px; top: 22px; width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 10px solid rgba(56, 189, 248, 0.3); } .lesson-yumi-bubble::after { content: ''; position: absolute; right: -8px; top: 22px; width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 10px solid var(--ccna-accent-bg-soft); } .lesson-yumi-name { display: inline-block; font-family: var(--ccna-font-mono); font-size: 0.72rem; letter-spacing: 0.16em; color: var(--ccna-primary); margin-bottom: 6px; text-transform: uppercase; } .lesson-yumi-bubble p { margin: 0; font-size: 0.93rem; line-height: 1.9; color: var(--ccna-ink-soft); } /* ------------------------------ 6. レッスン内カード（4カラム以下） ------------------------------ */ .lesson-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 24px 0 28px; } .lesson-cards-tight { gap: 12px; } .lesson-card { background: var(--ccna-bg-tint); border: 1px solid var(--ccna-border); border-radius: var(--ccna-radius-md); padding: 22px 22px; transition: border-color 0.2s ease; } .lesson-card:hover { border-color: var(--ccna-accent); } .lesson-card-num { font-family: var(--ccna-font-en); font-size: 1.6rem; color: var(--ccna-accent); margin-bottom: 8px; letter-spacing: 0.04em; line-height: 1; } .lesson-card-title { font-size: 1rem; font-weight: 700; color: var(--ccna-ink); margin: 0 0 10px; line-height: 1.5; } .lesson-card-text { font-size: 0.9rem; line-height: 1.85; color: var(--ccna-ink-soft); margin: 0; } .lesson-card-text strong { color: var(--ccna-ink); background: none; padding: 0; } /* ------------------------------ 6-2. 機器イラスト / ネットワーク図 SVG ------------------------------ */ .lesson-figure { margin: 32px 0; padding: 28px 24px; background: var(--ccna-bg-tint); border: 1px solid var(--ccna-border); border-radius: var(--ccna-radius-md); text-align: center; /* SVG内で参照する配色（ダークモードはCSS変数が自動追従） */ --fig-stroke: var(--ccna-primary); --fig-fill: var(--ccna-accent-bg-soft); --fig-accent: var(--ccna-accent); --fig-ink: var(--ccna-ink); --fig-muted: var(--ccna-ink-muted); } .lesson-figure svg { display: block; max-width: 100%; height: auto; margin: 0 auto; } .lesson-figure-caption { margin-top: 16px; font-family: var(--ccna-font-mono); font-size: 0.78rem; letter-spacing: 0.1em; color: var(--ccna-ink-muted); } /* 機器イラストを横並びにする小さなギャラリー */ .lesson-device-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 28px 0; } .lesson-device { background: var(--ccna-bg-tint); border: 1px solid var(--ccna-border); border-radius: var(--ccna-radius-md); padding: 24px 20px; text-align: center; --fig-stroke: var(--ccna-primary); --fig-fill: var(--ccna-accent-bg-soft); --fig-accent: var(--ccna-accent); --fig-ink: var(--ccna-ink); --fig-muted: var(--ccna-ink-muted); } .lesson-device svg { display: block; width: 104px; height: 104px; margin: 0 auto 14px; } .lesson-device-name { font-size: 1rem; font-weight: 700; color: var(--ccna-ink); margin: 0 0 6px; } .lesson-device-role { font-size: 0.85rem; line-height: 1.7; color: var(--ccna-ink-soft); margin: 0; } /* プレースホルダ（パケットトレーサのキャプチャ差し替え予定枠） */ .lesson-placeholder { margin: 32px 0; padding: 48px 24px; background: var(--ccna-bg-tint); border: 2px dashed var(--ccna-border-strong); border-radius: var(--ccna-radius-md); text-align: center; color: var(--ccna-ink-muted); } .lesson-placeholder svg { width: 40px; height: 40px; margin: 0 auto 12px; color: var(--ccna-ink-faint); display: block; } .lesson-placeholder-label { font-family: var(--ccna-font-mono); font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 6px; } .lesson-placeholder-note { font-size: 0.85rem; line-height: 1.7; } /* ------------------------------ 7. 前後ナビゲーション ------------------------------ */ .lesson-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 60px 0 40px; } .lesson-nav a { display: flex; flex-direction: column; gap: 4px; padding: 18px 22px; border: 1px solid var(--ccna-border); border-radius: var(--ccna-radius-md); text-decoration: none; background: var(--ccna-bg-tint); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; position: relative; } .lesson-nav a:hover { transform: translateY(-2px); box-shadow: var(--ccna-shadow-md); border-color: var(--ccna-accent); } .lesson-nav-prev { text-align: left; } .lesson-nav-next { text-align: right; } .lesson-nav-label { font-family: var(--ccna-font-mono); font-size: 0.7rem; letter-spacing: 0.16em; color: var(--ccna-primary); text-transform: uppercase; } .lesson-nav-title { font-size: 0.95rem; font-weight: 500; color: var(--ccna-ink); line-height: 1.5; } /* 矢印アイコンの位置 */ .lesson-nav-prev svg { position: absolute; top: 50%; left: 16px; transform: translateY(-50%); color: var(--ccna-primary); opacity: 0.5; transition: opacity 0.2s ease, transform 0.25s ease; } .lesson-nav-next svg { position: absolute; top: 50%; right: 16px; transform: translateY(-50%); color: var(--ccna-primary); opacity: 0.5; transition: opacity 0.2s ease, transform 0.25s ease; } .lesson-nav-prev:hover svg { opacity: 1; transform: translateY(-50%) translateX(-3px); } .lesson-nav-next:hover svg { opacity: 1; transform: translateY(-50%) translateX(3px); } .lesson-nav-prev .lesson-nav-label, .lesson-nav-prev .lesson-nav-title { padding-left: 26px; } .lesson-nav-next .lesson-nav-label, .lesson-nav-next .lesson-nav-title { padding-right: 26px; } /* ------------------------------ 8. 目次（ページ末尾） ------------------------------ */ .lesson-toc { margin-top: 40px; padding: 24px 28px; background: var(--ccna-bg-tint); border: 1px solid var(--ccna-border); border-radius: var(--ccna-radius-md); } .lesson-toc-label { font-family: var(--ccna-font-mono); font-size: 0.74rem; letter-spacing: 0.16em; color: var(--ccna-primary); margin-bottom: 14px; text-transform: uppercase; } .lesson-toc-list { list-style: none; margin: 0; padding: 0; counter-reset: toc; } .lesson-toc-list li { counter-increment: toc; margin: 6px 0; } .lesson-toc-list li a { display: inline-flex; align-items: baseline; gap: 10px; font-size: 0.92rem; color: var(--ccna-ink-soft); text-decoration: none; border: none; padding: 4px 0; transition: color 0.2s ease; } .lesson-toc-list li a::before { content: counter(toc) "."; font-family: var(--ccna-font-mono); font-size: 0.85rem; color: var(--ccna-accent); font-weight: 500; } .lesson-toc-list li a:hover { color: var(--ccna-primary-strong); } /* ------------------------------ 9. レスポンシブ ------------------------------ */ @media (max-width: 720px) { .lesson-cards { grid-template-columns: 1fr; } .lesson-nav { grid-template-columns: 1fr; } .lesson-device-row { grid-template-columns: 1fr; } } @media (max-width: 640px) { .lesson-header { padding: 30px 0 40px; } .lesson-breadcrumb { font-size: 0.72rem; margin-bottom: 20px; } .lesson-title { margin-bottom: 28px; } .lesson-overview { padding: 20px 22px; } .lesson-overview p { font-size: 0.92rem; line-height: 1.95; } .lesson-body { padding: 50px 0 60px; } .lesson-section { margin-bottom: 44px; } .lesson-h2 { margin-bottom: 20px; padding-bottom: 12px; gap: 8px; } .lesson-h3 { margin: 28px 0 14px; font-size: 1.05rem; } .lesson-body p { font-size: 0.95rem; line-height: 1.95; } .lesson-list li { font-size: 0.92rem; } .lesson-box { margin: 24px 0; padding: 18px 20px; } /* ゆみちゃん吹き出し — スマホでも吹き出し左・ゆみ右 */ .lesson-yumi { grid-template-columns: 1fr 64px; gap: 12px; } .lesson-yumi-img { width: 64px; height: 64px; grid-column: 2; grid-row: 1; } .lesson-yumi-bubble { padding: 14px 18px; margin-top: 4px; grid-column: 1; grid-row: 1; } .lesson-yumi-bubble::before, .lesson-yumi-bubble::after { top: 16px; } .lesson-yumi-bubble p { font-size: 0.9rem; } .lesson-card { padding: 18px 20px; } .lesson-figure { padding: 20px 14px; } .lesson-nav a { padding: 16px 20px; } .lesson-nav-prev .lesson-nav-label, .lesson-nav-prev .lesson-nav-title { padding-left: 22px; } .lesson-nav-next .lesson-nav-label, .lesson-nav-next .lesson-nav-title { padding-right: 22px; } .lesson-toc { padding: 20px 22px; } } /* ============================================================ ダークモード — レッスンページ専用調整 ============================================================ */ [data-theme="dark"] .lesson-header { background: linear-gradient(180deg, var(--ccna-bg-tint) 0%, var(--ccna-bg) 100%); border-bottom-color: var(--ccna-border); } [data-theme="dark"] .lesson-overview { background: var(--ccna-bg-tint); } [data-theme="dark"] .lesson-card { background: var(--ccna-bg-tint); } [data-theme="dark"] .lesson-box-example { background: rgba(56, 189, 248, 0.06); border-color: rgba(56, 189, 248, 0.25); } [data-theme="dark"] .lesson-box-point { background: var(--ccna-bg-tint); } [data-theme="dark"] .lesson-figure, [data-theme="dark"] .lesson-device { background: var(--ccna-bg-tint); } [data-theme="dark"] .lesson-yumi-img { background: var(--ccna-bg-tint); border-color: rgba(56, 189, 248, 0.4); } [data-theme="dark"] .lesson-yumi-bubble { background: var(--ccna-bg-tint); border-color: rgba(56, 189, 248, 0.25); } [data-theme="dark"] .lesson-yumi-bubble::after { border-left-color: var(--ccna-bg-tint); } [data-theme="dark"] .lesson-yumi-bubble::before { border-left-color: rgba(56, 189, 248, 0.25); } [data-theme="dark"] .lesson-nav a { background: var(--ccna-bg-tint); } [data-theme="dark"] .lesson-toc { background: var(--ccna-bg-tint); } [data-theme="dark"] .lesson-body strong, [data-theme="dark"] .lesson-overview strong, [data-theme="dark"] .lesson-list li strong { background: linear-gradient(transparent 65%, rgba(56, 189, 248, 0.25) 65%); } /* ============================================================ 学習装置 — 「脳に残す」ための3パーツ（lesson.css の末尾に、この内容をそのまま貼り付けてください） ============================================================ */ /* --- (A) 問いかけブロック：説明の前に脳を起動させる --- */ .lesson-ask { margin: 0px 0 60px; padding: 24px 26px; background: var(--ccna-bg-tint); border: 1px dashed var(--ccna-border-strong); border-radius: var(--ccna-radius-md); } .lesson-ask-label { font-family: var(--ccna-font-mono); font-size: 0.74rem; letter-spacing: 0.16em; color: var(--ccna-primary); text-transform: uppercase; margin-bottom: 10px; } .lesson-ask-q { font-size: 1.05rem; font-weight: 700; line-height: 1.8; color: var(--ccna-ink); margin: 0; } .lesson-ask-hint { margin: 12px 0 0; font-size: 0.88rem; line-height: 1.8; color: var(--ccna-ink-muted); } /* --- (B) 想起クイズ：クリックで答えを開く（details/summary） --- */ .lesson-recall { margin: 32px 0; border: 1px solid var(--ccna-border); border-left: 4px solid var(--ccna-accent); border-radius: var(--ccna-radius-md); background: var(--ccna-accent-bg-soft); overflow: hidden; } .lesson-recall > summary { list-style: none; cursor: pointer; padding: 20px 24px; font-size: 0.98rem; font-weight: 700; color: var(--ccna-ink); display: flex; align-items: flex-start; gap: 12px; transition: background 0.2s ease; } .lesson-recall > summary::-webkit-details-marker { display: none; } .lesson-recall > summary:hover { background: rgba(56, 189, 248, 0.10); } .lesson-recall > summary::before { content: 'Q'; flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--ccna-gradient-cta); color: #fff; font-family: var(--ccna-font-mono); font-size: 0.85rem; display: grid; place-items: center; } .lesson-recall-toggle { margin-left: auto; font-family: var(--ccna-font-mono); font-size: 0.72rem; letter-spacing: 0.12em; color: var(--ccna-primary); align-self: center; white-space: nowrap; } .lesson-recall[open] .lesson-recall-toggle { visibility: hidden; } .lesson-recall-body { padding: 4px 24px 22px 62px; font-size: 0.95rem; line-height: 1.95; color: var(--ccna-ink-soft); } .lesson-recall-body p { margin: 0 0 0.8em; } .lesson-recall-body p:last-child { margin-bottom: 0; } .lesson-recall-body strong { color: var(--ccna-ink); font-weight: 700; } /* --- (C) このページの一番大事な1行（持ち帰り） --- */ .lesson-takeaway { margin: 40px 0; padding: 26px 28px; border-radius: var(--ccna-radius-md); background: var(--ccna-gradient-cta); color: #fff; text-align: center; box-shadow: var(--ccna-shadow-md); } .lesson-takeaway-label { font-family: var(--ccna-font-mono); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.9; margin-bottom: 10px; } .lesson-takeaway-text { font-size: 1.15rem; font-weight: 700; line-height: 1.75; margin: 0; } /* --- (D) 自分ごと化ボックス：読者の体験に接続 --- */ .lesson-yourturn { margin: 32px 0; padding: 22px 26px; background: var(--ccna-bg-tint); border: 1px solid var(--ccna-border); border-radius: var(--ccna-radius-md); } .lesson-yourturn-label { font-family: var(--ccna-font-mono); font-size: 0.74rem; letter-spacing: 0.14em; color: var(--ccna-primary); text-transform: uppercase; margin-bottom: 10px; } .lesson-yourturn p { margin: 0; font-size: 0.95rem; line-height: 1.95; color: var(--ccna-ink-soft); } @media (max-width: 640px) { .lesson-ask, .lesson-yourturn { padding: 18px 20px; } .lesson-recall > summary { padding: 16px 18px; font-size: 0.94rem; } .lesson-recall-body { padding: 4px 18px 18px 50px; } .lesson-takeaway { padding: 22px 20px; } .lesson-takeaway-text { font-size: 1.05rem; } } /* ダークモード調整 */ [data-theme="dark"] .lesson-ask, [data-theme="dark"] .lesson-yourturn { background: var(--ccna-bg-tint); } [data-theme="dark"] .lesson-recall { background: rgba(56, 189, 248, 0.06); } [data-theme="dark"] .lesson-recall > summary:hover { background: rgba(56, 189, 248, 0.12); } /* ============================================================ lesson-quiz — B案：薄い線で囲むだけのシンプルな開閉クイズ（色・背景なし。引き算デザイン用。末尾クイズの確定形） ============================================================ */ .lesson-quiz { margin: 40px 0; border: 1px solid var(--ccna-border); border-radius: var(--ccna-radius-md); padding: 22px 24px; } .lesson-quiz-label { font-family: var(--ccna-font-mono); font-size: 0.74rem; letter-spacing: 0.16em; color: var(--ccna-primary); text-transform: uppercase; margin-bottom: 10px; } .lesson-quiz-q { font-size: 1rem; font-weight: 700; color: var(--ccna-ink); line-height: 1.8; margin: 0 0 14px; } .lesson-quiz details { margin: 0; } .lesson-quiz summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; font-size: 0.9rem; font-weight: 500; color: var(--ccna-primary); transition: color 0.2s ease; } .lesson-quiz summary::-webkit-details-marker { display: none; } .lesson-quiz summary:hover { color: var(--ccna-primary-strong); } .lesson-quiz summary .qz-mk { width: 0; height: 0; border-left: 5px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform 0.2s ease; } .lesson-quiz details[open] summary .qz-mk { transform: rotate(90deg); } .lesson-quiz-a { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--ccna-border); font-size: 0.94rem; line-height: 1.95; color: var(--ccna-ink-soft); } .lesson-quiz-a p { margin: 0 0 0.8em; } .lesson-quiz-a p:last-child { margin-bottom: 0; } .lesson-quiz-a strong { color: var(--ccna-ink); font-weight: 700; } @media (max-width: 640px) { .lesson-quiz { padding: 18px 20px; } } /* ============================================================ STAGE インデックス — 章グループ＋記事リスト ============================================================ */ .stage-index { margin: 0 0 20px; } .stage-group { margin: 0 0 44px; } .stage-group-head { display: flex; align-items: baseline; gap: 12px; margin: 0 0 18px; padding-bottom: 12px; border-bottom: 2px solid var(--ccna-accent); } .stage-group-no { font-family: var(--ccna-font-mono); font-size: 0.82rem; letter-spacing: 0.12em; color: #fff; background: var(--ccna-gradient-cta); padding: 5px 12px; border-radius: 999px; white-space: nowrap; } .stage-group-title { font-size: 1.15rem; font-weight: 700; color: var(--ccna-ink); } .stage-list { display: grid; gap: 10px; } .stage-item { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border: 1px solid var(--ccna-border); border-radius: var(--ccna-radius-md); background: var(--ccna-bg-tint); text-decoration: none; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; } .stage-item-ready:hover { transform: translateY(-2px); box-shadow: var(--ccna-shadow-md); border-color: var(--ccna-accent); } .stage-item-num { font-family: var(--ccna-font-en); font-size: 1.2rem; color: var(--ccna-accent); min-width: 30px; text-align: center; } .stage-item-title { flex: 1; font-size: 0.98rem; font-weight: 500; color: var(--ccna-ink); line-height: 1.5; } .stage-item-arrow { color: var(--ccna-primary); opacity: 0.5; transition: opacity 0.18s ease, transform 0.18s ease; } .stage-item-ready:hover .stage-item-arrow { opacity: 1; transform: translateX(3px); } /* 準備中（クリック不可・グレー） */ .stage-item-soon { cursor: default; opacity: 0.55; background: transparent; border-style: dashed; } .stage-item-soon .stage-item-title { color: var(--ccna-ink-muted); font-weight: 400; } .stage-item-soon .stage-item-num { color: var(--ccna-ink-faint); } .stage-item-badge { font-family: var(--ccna-font-mono); font-size: 0.68rem; letter-spacing: 0.1em; color: var(--ccna-ink-muted); border: 1px solid var(--ccna-border-strong); padding: 3px 9px; border-radius: 999px; white-space: nowrap; } @media (max-width: 640px) { .stage-group { margin-bottom: 36px; } .stage-item { padding: 14px 16px; gap: 10px; } .stage-group-head { flex-wrap: wrap; gap: 8px; } } [data-theme="dark"] .stage-item { background: var(--ccna-bg-tint); } [data-theme="dark"] .stage-item-soon { background: transparent; } /* ============================================================ Markdown表（テーブル）— 引き算デザイン：下線のみ・枠/背景なし mac-address / ethernet-frame など、構造を整理して見せる表用 ============================================================ */ .lesson-body table { width: 100%; border-collapse: collapse; margin: 28px 0; font-size: 0.94rem; line-height: 1.8; } .lesson-body thead th { text-align: left; font-weight: 700; color: var(--ccna-ink); padding: 10px 14px; border-bottom: 2px solid var(--ccna-primary-soft); white-space: nowrap; } .lesson-body tbody td { padding: 12px 14px; color: var(--ccna-ink-soft); border-bottom: 1px solid var(--ccna-border); vertical-align: top; } .lesson-body tbody tr:last-child td { border-bottom: none; } .lesson-body table strong { color: var(--ccna-ink); font-weight: 700; background: none; } @media (max-width: 640px) { .lesson-body table { font-size: 0.88rem; } .lesson-body thead th { padding: 8px 10px; } .lesson-body tbody td { padding: 10px 10px; } } [data-theme="dark"] .lesson-body thead th { border-bottom-color: var(--ccna-primary); } [data-theme="dark"] .lesson-body tbody td { border-bottom-color: var(--ccna-border); } /* ============================================================ 用語メモ :::words — 文末で控えめに用語を補足 ============================================================ */ .lesson-words { margin: 40px 0 0; padding: 20px 24px; border-top: 1px solid var(--ccna-border); } .lesson-words-label { font-family: var(--ccna-font-mono); font-size: 0.74rem; letter-spacing: 0.14em; color: var(--ccna-ink-muted); text-transform: uppercase; margin-bottom: 12px; } .lesson-words-list { margin: 0; } .lesson-words-list dt { font-size: 0.92rem; font-weight: 700; color: var(--ccna-ink); margin-top: 12px; } .lesson-words-list dt:first-child { margin-top: 0; } .lesson-words-list dd { margin: 4px 0 0; font-size: 0.9rem; line-height: 1.85; color: var(--ccna-ink-soft); } /* ============================================================ コマンド演習 :::try — 手元のPCで確かめる体験 ============================================================ */ .lesson-try { margin: 36px 0; border: 1px solid var(--ccna-border); border-left: 4px solid var(--ccna-primary-soft); border-radius: var(--ccna-radius-md); padding: 22px 24px; } .lesson-try-label { font-family: var(--ccna-font-mono); font-size: 0.74rem; letter-spacing: 0.14em; color: var(--ccna-primary); text-transform: uppercase; margin-bottom: 12px; } .lesson-try-do p { margin: 0 0 0.7em; font-size: 0.95rem; line-height: 1.9; color: var(--ccna-ink-soft); } .lesson-try-do p:last-child { margin-bottom: 0; } .lesson-try-do code { font-family: var(--ccna-font-mono); font-size: 0.88rem; background: var(--ccna-bg-tint); border: 1px solid var(--ccna-border); border-radius: 4px; padding: 2px 7px; color: var(--ccna-primary-strong); } .lesson-try-see { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--ccna-border-strong); } .lesson-try-see-label { font-family: var(--ccna-font-mono); font-size: 0.72rem; letter-spacing: 0.12em; color: var(--ccna-ink-muted); text-transform: uppercase; margin-bottom: 8px; } .lesson-try-see p { margin: 0 0 0.6em; font-size: 0.92rem; line-height: 1.85; color: var(--ccna-ink-soft); } .lesson-try-see p:last-child { margin-bottom: 0; } /* :::frame の図はベースの .lesson-figure を継承（追加調整のみ） */ .lesson-frame-figure svg { max-width: 100%; height: auto; } @media (max-width: 640px) { .lesson-words { padding: 18px 18px 0; } .lesson-try { padding: 18px 20px; } } [data-theme="dark"] .lesson-try-do code { background: var(--ccna-bg-tint); border-color: var(--ccna-border); }