/* ========================================================================== CodeLabo - メインスタイルシート カテゴリ追加・デザイン調整は基本的にこのファイルの変数(:root)を いじるだけで全ページに反映されます。 ========================================================================== */ :root { /* ベースカラー(明るく元気なポップトーン) */ --bg: #fbf8ff; --bg-soft: #ffffff; --bg-card: #ffffff; --bg-card-hover: #f6f2ff; --border: #e8e2ff; --text: #2a2352; --text-muted: #635d8a; --text-faint: #948fc0; /* アクセント(白背景でも読みやすい、やや濃いめの発色) */ --primary: #7c5cff; --primary-2: #ff6fd8; --accent-green: #0fb37d; --accent-yellow: #d98c00; --accent-blue: #1b8fe0; --accent-orange: #ff7a3d; --accent-red: #ef4360; --gradient-hero: linear-gradient(120deg, #7c5cff 0%, #ff6fd8 50%, #1b8fe0 100%); --gradient-btn: linear-gradient(120deg, #7c5cff, #ff6fd8); --radius-lg: 22px; --radius-md: 14px; --radius-sm: 8px; --shadow-card: 0 10px 28px rgba(124, 92, 255, 0.14); --shadow-pop: 0 16px 34px rgba(124, 92, 255, 0.32); --font-main: "M PLUS Rounded 1c", "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Yu Gothic", "Segoe UI", sans-serif; --font-code: "Fira Code", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; --header-h: 68px; } /* ダークモード(OSがダーク設定のときだけ自動的に切り替わります) */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0f1021; --bg-soft: #161831; --bg-card: #1c1e3f; --bg-card-hover: #232650; --border: #2e315c; --text: #eef0ff; --text-muted: #a3a6d1; --text-faint: #6d70a0; --accent-green: #33e6a0; --accent-yellow: #ffd23f; --accent-blue: #4dd0ff; --accent-orange: #ff9f5a; --accent-red: #ff5c7c; --shadow-card: 0 10px 30px rgba(6, 7, 20, 0.45); } } /* 手動テーマ切替(ヘッダーのボタン)で が付いたときも同じ配色を適用 */ :root[data-theme="dark"] { --bg: #0f1021; --bg-soft: #161831; --bg-card: #1c1e3f; --bg-card-hover: #232650; --border: #2e315c; --text: #eef0ff; --text-muted: #a3a6d1; --text-faint: #6d70a0; --accent-green: #33e6a0; --accent-yellow: #ffd23f; --accent-blue: #4dd0ff; --accent-orange: #ff9f5a; --accent-red: #ff5c7c; --shadow-card: 0 10px 30px rgba(6, 7, 20, 0.45); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-main); line-height: 1.7; min-height: 100vh; -webkit-font-smoothing: antialiased; } body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: radial-gradient(circle at 12% 8%, rgba(124, 92, 255, 0.14), transparent 40%), radial-gradient(circle at 88% 18%, rgba(255, 111, 216, 0.12), transparent 40%), radial-gradient(circle at 50% 90%, rgba(27, 143, 224, 0.10), transparent 45%); } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) body::before { background: radial-gradient(circle at 12% 8%, rgba(124, 92, 255, 0.20), transparent 40%), radial-gradient(circle at 88% 18%, rgba(255, 111, 216, 0.16), transparent 40%), radial-gradient(circle at 50% 90%, rgba(77, 208, 255, 0.14), transparent 45%); } } html[data-theme="dark"] body::before { background: radial-gradient(circle at 12% 8%, rgba(124, 92, 255, 0.20), transparent 40%), radial-gradient(circle at 88% 18%, rgba(255, 111, 216, 0.16), transparent 40%), radial-gradient(circle at 50% 90%, rgba(77, 208, 255, 0.14), transparent 45%); } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } button { font-family: inherit; } .wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; } /* ---------- ヘッダー ---------- */ .site-header { position: sticky; top: 0; z-index: 50; height: var(--header-h); display: flex; align-items: center; background: rgba(255, 255, 255, 0.82); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .site-header { background: rgba(15, 16, 33, 0.82); } } html[data-theme="dark"] .site-header { background: rgba(15, 16, 33, 0.82); } .site-header .wrap { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.28rem; letter-spacing: 0.02em; white-space: nowrap; } .brand .logo-badge { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--gradient-hero); font-size: 1.15rem; box-shadow: 0 6px 16px rgba(124, 92, 255, 0.45); } .brand small { display: block; font-size: 0.62rem; font-weight: 600; color: var(--text-faint); letter-spacing: 0.12em; } .main-nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .main-nav a { padding: 8px 14px; border-radius: 999px; font-size: 0.92rem; font-weight: 700; color: var(--text-muted); transition: background 0.18s ease, color 0.18s ease; } .main-nav a:hover, .main-nav a.active { background: var(--bg-card); color: var(--text); } .nav-toggle { display: none; background: var(--bg-card); border: 1px solid var(--border); color: var(--text); width: 40px; height: 40px; border-radius: 10px; font-size: 1.1rem; } .header-actions { display: flex; align-items: center; gap: 8px; } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; background: var(--bg-card); border: 1px solid var(--border); color: var(--text); width: 40px; height: 40px; border-radius: 10px; font-size: 1.05rem; cursor: pointer; transition: transform 0.15s ease, background 0.15s ease; } .theme-toggle:hover { background: var(--bg-card-hover); transform: translateY(-1px); } /* ---------- ヒーロー ---------- */ .hero { padding: 64px 0 40px; text-align: center; } .hero .eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; border-radius: 999px; background: #fff2d6; border: 1px solid #ffe0a3; color: #a8670a; font-weight: 700; font-size: 0.85rem; margin-bottom: 22px; } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .hero .eyebrow { background: var(--bg-card); border-color: var(--border); color: var(--accent-yellow); } } html[data-theme="dark"] .hero .eyebrow { background: var(--bg-card); border-color: var(--border); color: var(--accent-yellow); } .hero h1 { margin: 0 0 18px; font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 900; line-height: 1.25; } .hero h1 .rainbow { background: var(--gradient-hero); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero p.lead { max-width: 640px; margin: 0 auto 30px; color: var(--text-muted); font-size: 1.08rem; } .hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } .btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 26px; border-radius: 999px; font-weight: 800; font-size: 0.98rem; border: none; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease; } .btn:active { transform: translateY(1px) scale(0.98); } .btn-primary { background: var(--gradient-btn); color: #fff; box-shadow: var(--shadow-pop); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 20px 44px rgba(124, 92, 255, 0.45); } .btn-ghost { background: var(--bg-card); color: var(--text); border: 1px solid var(--border); } .btn-ghost:hover { background: var(--bg-card-hover); } .btn-run { background: var(--accent-green); color: #062018; box-shadow: 0 10px 24px rgba(51, 230, 160, 0.35); } .btn-run:hover { transform: translateY(-1px); } .btn-run:disabled { opacity: 0.6; cursor: progress; } .btn-sm { padding: 8px 16px; font-size: 0.85rem; border-radius: 999px; } .stats-row { display: flex; justify-content: center; gap: 40px; margin-top: 46px; flex-wrap: wrap; } .stats-row .stat b { display: block; font-size: 1.8rem; font-weight: 900; background: var(--gradient-hero); -webkit-background-clip: text; background-clip: text; color: transparent; } .stats-row .stat span { color: var(--text-faint); font-size: 0.82rem; font-weight: 700; } /* ---------- セクション共通 ---------- */ .section { padding: 46px 0; } .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 26px; flex-wrap: wrap; } .section-head h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin: 0 0 6px; font-weight: 900; } .section-head p { margin: 0; color: var(--text-muted); } /* ---------- カテゴリカード ---------- */ .cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 20px; } .cat-card { position: relative; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 26px 24px; overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .cat-card::after { content: ""; position: absolute; inset: 0; background: var(--cat-color, var(--gradient-hero)); opacity: 0; transition: opacity 0.2s ease; z-index: 0; } .cat-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card); border-color: transparent; } .cat-card:hover::after { opacity: 0.12; } .cat-card > * { position: relative; z-index: 1; } .cat-card .icon { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 16px; font-size: 1.7rem; background: var(--cat-color, var(--gradient-hero)); margin-bottom: 16px; box-shadow: 0 10px 22px rgba(0, 0, 0, 0.28); } .cat-card h3 { margin: 0 0 4px; font-size: 1.18rem; font-weight: 800; } .cat-card .cat-difficulty { font-size: 0.78rem; color: var(--accent-yellow); letter-spacing: 2px; margin: 0 0 8px; } .star-legend { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 16px; margin: 0 0 20px; font-size: 0.86rem; color: var(--text-muted); } .cat-card p { margin: 0 0 16px; color: var(--text-muted); font-size: 0.92rem; min-height: 46px; } .cat-card .meta { display: flex; align-items: center; justify-content: space-between; font-size: 0.8rem; color: var(--text-faint); font-weight: 700; } .badge { display: inline-block; padding: 3px 10px; border-radius: 999px; background: rgba(124, 92, 255, 0.08); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.03em; } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .badge { background: rgba(255, 255, 255, 0.06); } } html[data-theme="dark"] .badge { background: rgba(255, 255, 255, 0.06); } .badge.live { color: var(--accent-green); } .badge.cmd { color: var(--accent-blue); } /* ---------- 特徴カード(3列) ---------- */ .feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; } .feature-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 22px; } /* ---------- 言語紹介ボックス(カテゴリページ) ---------- */ .lang-intro { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px clamp(18px, 4vw, 28px); margin: 20px 0 28px; } .lang-intro h2 { margin: 0 0 10px; font-size: 1.2rem; font-weight: 800; } .lang-intro p { margin: 0 0 12px; color: var(--text-muted); font-size: 0.95rem; } .lang-intro p:last-of-type { margin-bottom: 14px; } .lang-intro .lang-uses-label { font-weight: 800; font-size: 0.88rem; margin-bottom: 8px; color: var(--text); } .lang-intro ul { margin: 0; padding-left: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; } .lang-intro li { background: rgba(124, 92, 255, 0.08); border: 1px solid var(--border); border-radius: 999px; padding: 6px 14px; font-size: 0.82rem; font-weight: 700; color: var(--text-muted); } .feature-card .emoji { font-size: 1.7rem; margin-bottom: 10px; } .feature-card h4 { margin: 0 0 6px; font-size: 1.02rem; } .feature-card p { margin: 0; color: var(--text-muted); font-size: 0.88rem; } /* ---------- レイアウト:サイドバー付き ---------- */ .layout-with-sidebar { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 26px; align-items: start; padding: 28px 0 60px; } .side-col { display: flex; flex-direction: column; gap: 18px; position: sticky; top: calc(var(--header-h) + 16px); } #main-col { display: flex; flex-direction: column; gap: 22px; } .lesson-nav { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; } .lesson-nav .cat-title { display: flex; align-items: center; gap: 10px; padding: 16px; border-bottom: 1px solid var(--border); font-weight: 800; } .lesson-nav .cat-title .icon-sm { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--cat-color, var(--gradient-hero)); font-size: 1rem; } .lesson-list { list-style: none; margin: 0; padding: 8px; display: flex; flex-direction: column; gap: 2px; } .lesson-list button { width: 100%; text-align: left; background: transparent; border: none; color: var(--text-muted); padding: 10px 12px; border-radius: var(--radius-sm); font-size: 0.88rem; font-weight: 600; cursor: pointer; display: flex; gap: 8px; transition: background 0.15s ease, color 0.15s ease; } .lesson-list button .num { color: var(--text-faint); font-family: var(--font-code); font-size: 0.78rem; } .lesson-list button:hover { background: var(--bg-card-hover); color: var(--text); } .lesson-list button.active { background: var(--gradient-btn); color: #fff; } .lesson-list button.active .num { color: rgba(255,255,255,0.8); } .cat-switcher { display: flex; flex-direction: column; gap: 6px; } .cat-switcher a { padding: 9px 12px; border-radius: var(--radius-sm); font-size: 0.84rem; font-weight: 700; color: var(--text-muted); background: var(--bg-card); border: 1px solid var(--border); } .cat-switcher a.active { color: var(--text); border-color: var(--primary); background: var(--bg-card-hover); } /* ---------- レッスン本体 ---------- */ .lesson-panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 30px clamp(18px, 4vw, 34px); } .lesson-panel .kicker { color: var(--accent-yellow); font-weight: 800; font-size: 0.8rem; letter-spacing: 0.06em; margin-bottom: 6px; } .lesson-panel h2 { margin: 0 0 14px; font-size: 1.6rem; } .lesson-explain { color: var(--text-muted); font-size: 0.98rem; } .lesson-explain p { margin: 0 0 12px; } .lesson-explain code { background: rgba(124, 92, 255, 0.12); color: #5b3df0; padding: 2px 7px; border-radius: 6px; font-family: var(--font-code); font-size: 0.88em; } .lesson-explain ul { padding-left: 20px; } .lesson-explain li { margin-bottom: 6px; } .lesson-explain a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .lesson-explain code { background: rgba(124, 92, 255, 0.16); color: #d9d1ff; } } html[data-theme="dark"] .lesson-explain code { background: rgba(124, 92, 255, 0.16); color: #d9d1ff; } /* ---------- コードエディタ / 実行 ---------- */ .editor-block { margin-top: 22px; } .editor-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--bg-soft); border: 1px solid var(--border); border-bottom: none; border-radius: var(--radius-md) var(--radius-md) 0 0; padding: 10px 14px; } .editor-toolbar .dots { display: flex; gap: 6px; } .editor-toolbar .dots span { width: 10px; height: 10px; border-radius: 50%; display: inline-block; } .editor-toolbar .dots span:nth-child(1) { background: #ff5f57; } .editor-toolbar .dots span:nth-child(2) { background: #febc2e; } .editor-toolbar .dots span:nth-child(3) { background: #28c840; } .editor-toolbar .lang-tag { font-family: var(--font-code); font-size: 0.76rem; color: var(--text-faint); font-weight: 700; } .editor-toolbar .toolbar-actions { display: flex; gap: 8px; margin-left: auto; } .code-input { width: 100%; min-height: 120px; resize: vertical; overflow-y: auto; background: #0c0d1e; color: #e9e7ff; border: 1px solid var(--border); border-top: none; padding: 16px; font-family: var(--font-code); font-size: 0.92rem; line-height: 1.6; tab-size: 2; outline: none; } .code-input:focus { box-shadow: inset 0 0 0 2px var(--primary); } .output-block { border: 1px solid var(--border); border-top: none; border-radius: 0 0 var(--radius-md) var(--radius-md); background: #08091a; overflow: hidden; } .output-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; background: rgba(255, 255, 255, 0.03); font-size: 0.76rem; font-weight: 800; color: var(--text-faint); letter-spacing: 0.05em; } .output-body { padding: 14px 16px; font-family: var(--font-code); font-size: 0.88rem; white-space: pre-wrap; word-break: break-word; color: #b9f5d0; min-height: 58px; max-height: 320px; overflow: auto; } .output-body.is-error { color: var(--accent-red); } .output-body .muted { color: var(--text-faint); } .output-body iframe { width: 100%; height: 260px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; } .lesson-footnote { margin-top: 16px; font-size: 0.82rem; color: var(--text-faint); } .lesson-pager { display: flex; justify-content: space-between; gap: 12px; margin-top: 28px; } /* ---------- 疑似ターミナル(コマンド系カテゴリ) ---------- */ .terminal { background: #08091a; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; } .terminal-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--bg-soft); border-bottom: 1px solid var(--border); } .terminal-bar span { width: 10px; height: 10px; border-radius: 50%; } .terminal-bar span:nth-child(1) { background: #ff5f57; } .terminal-bar span:nth-child(2) { background: #febc2e; } .terminal-bar span:nth-child(3) { background: #28c840; } .terminal-bar .title { margin-left: 8px; font-family: var(--font-code); font-size: 0.76rem; color: var(--text-faint); } .terminal-body { padding: 16px; font-family: var(--font-code); font-size: 0.9rem; min-height: 220px; max-height: 420px; overflow-y: auto; color: #cfe9ff; } .terminal-line { margin-bottom: 4px; white-space: pre-wrap; word-break: break-word; } .terminal-line .prompt { color: var(--accent-green); font-weight: 700; } .terminal-line .cmd-echo { color: #fff; } .terminal-output { color: var(--text-muted); margin: 2px 0 10px; white-space: pre-wrap; } .terminal-output.err { color: var(--accent-red); } .terminal-form { display: flex; align-items: center; gap: 8px; margin-top: 6px; } .terminal-form .prompt { color: var(--accent-green); font-weight: 700; } .terminal-form input { flex: 1; background: transparent; border: none; outline: none; color: #fff; font-family: var(--font-code); font-size: 0.9rem; } .cmd-ref-grid { display: grid; gap: 10px; margin-top: 18px; } .cmd-ref-item { background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; } .cmd-ref-item:hover { border-color: var(--primary); background: var(--bg-card-hover); } .cmd-ref-item code { color: var(--accent-yellow); font-family: var(--font-code); font-weight: 700; } .cmd-ref-item p { margin: 4px 0 0; color: var(--text-muted); font-size: 0.85rem; } /* ---------- テストページ ---------- */ .quiz-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 26px clamp(18px, 4vw, 32px); margin-bottom: 18px; transition: border-color 0.2s ease; } .quiz-card.is-pass { border-color: var(--accent-green); } .quiz-card.is-fail { border-color: var(--accent-red); } .quiz-card .q-index { color: var(--accent-yellow); font-weight: 800; font-size: 0.8rem; margin-bottom: 8px; } .quiz-card h3 { margin: 0 0 16px; font-size: 1.12rem; } .quiz-card pre { background: #0c0d1e; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px; overflow-x: auto; font-family: var(--font-code); font-size: 0.86rem; margin: 0 0 16px; } .quiz-options { display: grid; gap: 10px; } .quiz-option { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-soft); cursor: pointer; font-size: 0.92rem; transition: border-color 0.15s ease, background 0.15s ease; } .quiz-option:hover { border-color: var(--primary); } .quiz-option input { accent-color: var(--primary); } .quiz-option.correct { border-color: var(--accent-green); background: rgba(51, 230, 160, 0.1); } .quiz-option.wrong { border-color: var(--accent-red); background: rgba(255, 92, 124, 0.1); } .quiz-explain { margin-top: 14px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--bg-soft); font-size: 0.86rem; color: var(--text-muted); display: none; } .quiz-explain.show { display: block; } .quiz-result { text-align: center; padding: 40px 20px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); } .quiz-result .score { font-size: 3rem; font-weight: 900; background: var(--gradient-hero); -webkit-background-clip: text; background-clip: text; color: transparent; } .quiz-topic-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; } .quiz-topic-tabs button { padding: 9px 16px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-muted); font-weight: 700; font-size: 0.85rem; cursor: pointer; } .quiz-topic-tabs button.active { background: var(--gradient-btn); color: #fff; border-color: transparent; } /* ---------- 進捗バー(テストページ) ---------- */ .progress-wrap { display: flex; align-items: center; gap: 14px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px 20px; margin-bottom: 22px; flex-wrap: wrap; } .progress-wrap .score-label { font-weight: 800; font-size: 0.95rem; white-space: nowrap; } .progress-bar-outer { flex: 1; min-width: 140px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 999px; height: 14px; overflow: hidden; } .progress-bar-inner { height: 100%; background: var(--gradient-btn); transition: width 0.3s ease; border-radius: 999px; } .challenge-status { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 0.8rem; } .challenge-status.pass { color: var(--accent-green); } .challenge-status.fail { color: var(--accent-red); } .command-line-form { display: flex; align-items: center; gap: 8px; background: #08091a; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 14px; margin-top: 8px; } .command-line-form .prompt { color: var(--accent-green); font-weight: 700; font-family: var(--font-code); } .command-line-form input { flex: 1; background: transparent; border: none; outline: none; color: #fff; font-family: var(--font-code); font-size: 0.9rem; } /* ---------- 広告スロット ---------- */ .ad-slot { border: 1.5px dashed var(--border); border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.02); color: var(--text-faint); display: flex; align-items: center; justify-content: center; text-align: center; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.03em; padding: 14px; min-height: 90px; } .ad-slot.ad-banner { min-height: 100px; margin: 0 0 30px; } .ad-slot.ad-rect { min-height: 250px; } .ad-slot.ad-inline { min-height: 100px; margin: 30px 0; } .ad-slot.ad-lesson-bottom { min-height: 100px; margin: 26px 0 0; } /* 実際の広告(A8.net等)が差し込まれたら、プレースホルダーの枠を消す */ .ad-slot.ad-slot-filled { border: none; background: none; padding: 0; min-height: 0; } .ad-slot.ad-slot-filled img { max-width: 100%; height: auto; } .ad-slot .ad-a8-mobile { display: none; } @media (max-width: 680px) { .ad-slot .ad-a8-desktop { display: none; } .ad-slot .ad-a8-mobile { display: inline-block; } } /* ---------- フッター ---------- */ /* ---------- お問い合わせフォーム ---------- */ .contact-form { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(20px, 4vw, 34px); max-width: 640px; margin: 0 auto; } .form-field { margin-bottom: 18px; } .form-field label { display: block; font-weight: 700; font-size: 0.9rem; margin-bottom: 6px; color: var(--text); } .form-field .required { color: var(--accent-red); margin-left: 2px; } .form-field input[type="text"], .form-field input[type="email"], .form-field textarea { width: 100%; box-sizing: border-box; padding: 11px 14px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-soft); color: var(--text); font-family: inherit; font-size: 0.95rem; } .form-field input[type="text"]:focus, .form-field input[type="email"]:focus, .form-field textarea:focus { outline: none; border-color: var(--primary); } .form-field textarea { resize: vertical; min-height: 140px; } .form-honeypot { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; } .form-status { margin-top: 14px; font-size: 0.88rem; padding: 10px 14px; border-radius: var(--radius-sm); display: none; } .form-status.show { display: block; } .form-status.ok { background: rgba(15, 179, 125, 0.12); color: var(--accent-green); } .form-status.err { background: rgba(239, 67, 96, 0.12); color: var(--accent-red); } .site-footer { border-top: 1px solid var(--border); margin-top: 60px; padding: 44px 0 30px; color: var(--text-faint); } .footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 30px; margin-bottom: 30px; } .footer-grid h5 { color: var(--text); margin: 0 0 12px; font-size: 0.9rem; } .footer-grid ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .footer-grid a { font-size: 0.86rem; color: var(--text-faint); } .footer-grid a:hover { color: var(--text); } .footer-bottom { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 20px; border-top: 1px solid var(--border); font-size: 0.78rem; } .footer-bottom-row { display: flex; flex-direction: column-reverse; gap: 14px; } .footer-bottom-row .footer-bottom { border-top: none; padding-top: 0; } .footer-social { display: flex; gap: 10px; padding-top: 20px; border-top: 1px solid var(--border); } .social-icon { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--bg-card); border: 1px solid var(--border); font-size: 1rem; color: var(--text-faint); transition: color 0.15s, border-color 0.15s; } .social-icon:hover { color: var(--text); border-color: var(--primary); } /* ---------- レスポンシブ ---------- */ @media (max-width: 900px) { .layout-with-sidebar { grid-template-columns: 1fr; } .side-col { position: static; order: 2; } #main-col { order: 1; } .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 680px) { .main-nav { display: none; } .main-nav.open { display: flex; position: absolute; top: var(--header-h); left: 0; right: 0; background: var(--bg-soft); border-bottom: 1px solid var(--border); padding: 10px 20px 16px; flex-direction: column; } .nav-toggle { display: block; } .footer-grid { grid-template-columns: 1fr; } .hero { padding: 44px 0 30px; } .editor-toolbar { flex-wrap: wrap; row-gap: 8px; } .editor-toolbar .toolbar-actions { margin-left: 0; width: 100%; justify-content: flex-end; } .lesson-pager { flex-wrap: wrap; } .lesson-pager .btn { flex: 1 1 auto; text-align: center; justify-content: center; } } @media (max-width: 900px) { .code-input, .command-line-form input, .terminal-form input { font-size: 16px; } } /* ---------- ユーティリティ ---------- */ .skeleton { color: var(--text-faint); font-size: 0.9rem; padding: 20px; text-align: center; } .pill { display: inline-flex; align-items: center; gap: 6px; font-size: 0.75rem; font-weight: 800; padding: 4px 10px; border-radius: 999px; background: rgba(124, 92, 255, 0.08); color: var(--text); } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .pill { background: rgba(255, 255, 255, 0.06); } } html[data-theme="dark"] .pill { background: rgba(255, 255, 255, 0.06); } .fade-in { animation: fadeIn 0.35s ease; } @keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }