/* ============================================================
roblox-extra.css
Roblox プログラミング講座シリーズ 専用の追加スタイル
既存の style.css / app.css には含まれていない、
Roblox講座（既存15回・続編AIコース・はじめて講座）で
繰り返し必要になった部品のみを追加しています。
命名規則：既存クラスと衝突しないよう、全クラスに
接頭辞 "rb-"（Roblox の略）を付けています。
読み込み方法（内、style.cssの後に追加）：
============================================================ */
/* ------------------------------------------------------------
1. キーボードキー表示（Ctrl + S のような操作案内に使用）
既存システムに同等のクラスなし。
使用例：
Ctrl + S
------------------------------------------------------------ */
.learning-content .rb-kbd {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 34px;
padding: 4px 12px;
border-radius: 8px;
background: linear-gradient(180deg, #1e2a4a, #0a1128);
color: #fff;
font-weight: 900;
font-size: .88em;
box-shadow: 0 3px 0 #000811, inset 0 1px 0 rgba(255,255,255,.12);
margin: 0 2px;
line-height: 1.5;
font-family: "Courier New", monospace;
}
/* ------------------------------------------------------------
2. 注意（警告）ボックス ― 既存 .point（黄緑=推奨/覚えてほしい事）
とは意図が異なる「元に戻せない操作・データ消失の危険」等、
本当の警告を目立たせるための箱。
※ 実際のビジュアル定義は本ファイル後半（セクション9）の
チャンキー版で上書きされます（ここは基本構造のみ）。
使用例：
------------------------------------------------------------ */
.learning-content .rb-warning {
display: flex;
align-items: flex-start;
gap: 10px;
border-radius: 10px;
padding: 14px 18px;
margin: 20px 0;
font-weight: 700;
}
/* ------------------------------------------------------------
3. 達成確認ボックス（緑）
既存の .well-done は「レッスン最後」専用の大きな演出。
こちらは各STEP・各セクションの節目で軽く使う
「✅ ◯◯できましたか？」用の小型版。
使用例：
◯◯を作ることができましたか？
------------------------------------------------------------ */
.learning-content .rb-check-done {
display: flex;
align-items: center;
gap: 10px;
background: linear-gradient(135deg, #ecfdf5, #d1fae5);
border: 2px solid #34d399;
border-radius: 10px;
padding: 12px 18px;
margin: 20px 0;
font-weight: 700;
color: #065f46;
}
.learning-content .rb-check-done::before {
content: "✅";
font-size: 1.2em;
flex-shrink: 0;
}
/* ------------------------------------------------------------
4. AIコーナー（続編コース・AI追加案で使用）
既存の .point（黄緑）/ .contentbox-bg（グレー）どちらとも
異なる「AI活用コンテンツ」を視覚的に区別するための紫系ボックス。
使用例：
------------------------------------------------------------ */
.learning-content .rb-ai-corner {
border: 2px solid #6366f1;
border-left: 5px solid #7c3aed;
border-radius: 10px;
background: #faf5ff;
padding: 20px 22px;
margin: 20px 0;
}
.learning-content .rb-ai-corner-label {
display: inline-block;
background: #ede9fe;
color: #7c3aed;
font-weight: 700;
font-size: .78rem;
padding: 3px 12px;
border-radius: 20px;
margin-bottom: 10px;
}
.learning-content .rb-ai-corner-title {
font-weight: 700;
color: #4f46e5;
margin: 4px 0 10px;
font-size: 1rem;
}
/* ------------------------------------------------------------
5. ターミナル／出力画面 風表示
Roblox Studio の「出力」ウインドウや、コマンド実行結果を
見せる場面用。既存の pre/code（Prism）はソースコード表示用
なので、こちらは「実行結果・ログ表示」専用の黒画面。
使用例：
------------------------------------------------------------ */
.learning-content .rb-terminal {
margin: 16px 0;
border-radius: 8px;
overflow: hidden;
}
.learning-content .rb-terminal-label {
display: block;
background: #374151;
color: #e5e7eb;
font-size: .78rem;
padding: 5px 14px;
}
.learning-content .rb-terminal-body {
background: #000;
color: #e5e7eb;
padding: 14px 18px;
font-family: "Courier New", monospace;
font-size: .88rem;
line-height: 1.7;
white-space: pre-wrap;
}
/* ------------------------------------------------------------
6. ダウンロードボタン（Roblox素材ファイル用）
既存の a.button-external はティール色固定。
Roblox講座では .rbxl / .rbxm ファイルのダウンロードを
多用するため、アイコン付きの専用ボタンを用意。
既存の button-external と併用可（見た目だけ変えたい場合に使用）。
※ 実際のビジュアル定義は本ファイル後半（セクション9）の
チャンキー版で上書きされます（ここは基本構造のみ）。
使用例：
⬇ 「 ファイル名 」をダウンロード
------------------------------------------------------------ */
.learning-content a.rb-download-btn {
display: flex;
width: fit-content;
align-items: center;
gap: 8px;
text-decoration: none;
}
/* ------------------------------------------------------------
7. 依頼文プレビュー（AIコース：Assistantへの指示文サンプル表示）
コードではなく「AIに入力する日本語の文章」を見せる専用の
吹き出し風ボックス。language-lua 等のコードハイライトとは
別扱いにしたいため新設。
使用例：
GlitterPartが触れられている間、黄色のきらきらを作成して
------------------------------------------------------------ */
.learning-content .rb-prompt-example {
background: #eef2ff;
border: 1px dashed #818cf8;
border-radius: 8px;
padding: 12px 18px;
margin: 12px 0;
color: #3730a3;
font-weight: 700;
font-family: "Hiragino Kaku Gothic ProN", sans-serif;
}
.learning-content .rb-prompt-example::before {
content: "💬 ";
}
/* ------------------------------------------------------------
8. Lua簡易シンタックスハイライト用トークン色
roblox-extra.js（案B・暫定実装）と対で使用。
Prism公式のLuaコンポーネントが導入された場合（案A）は
この節は不要になります。
------------------------------------------------------------ */
.learning-content pre code.language-lua .rb-lua-comment {
color: #6a9955;
font-style: italic;
}
.learning-content pre code.language-lua .rb-lua-string {
color: #ce9178;
}
.learning-content pre code.language-lua .rb-lua-number {
color: #b5cea8;
}
.learning-content pre code.language-lua .rb-lua-keyword {
color: #569cd6;
font-weight: 700;
}
/* ------------------------------------------------------------
9. Roblox専用 大胆リデザイン部品（Ver.3）
「中学生がワクワクする」を目標に、Roblox公式ブランドの
ボクセル（ブロック）感・赤×青×金のゲームHUD的配色を
取り入れた本格リデザイン。UI/UXの原則（視覚的階層・
フィードバック・達成感の演出）を意識して設計しています。
------------------------------------------------------------ */
:root {
--rb-navy: #0a1128;
--rb-blue: #0069bb;
--rb-sky: #00d4ff;
--rb-red: #ff3d5a;
--rb-gold: #ffc93c;
--rb-green: #2ee6a8;
--rb-purple: #8b5cf6;
/* オリジナルSVGアイコン（線画・mask-image方式）
background-color と組み合わせることで色を自在に変更できる。
絵文字と違い、OS・端末による見た目のブレがない。 */
--rb-icon-idea: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3Cpath d='M12 2a7 7 0 0 0-4 12.7c.6.5 1 1.3 1 2.1v.2h6v-.2c0-.8.4-1.6 1-2.1A7 7 0 0 0 12 2Z'/%3E%3C/svg%3E");
--rb-icon-warning: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.6 1.9 18a2 2 0 0 0 1.7 3h16.8a2 2 0 0 0 1.7-3L13.7 3.6a2 2 0 0 0-3.4 0Z'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
--rb-icon-trophy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4h10v5a5 5 0 0 1-10 0V4Z'/%3E%3Cpath d='M7 5H4a1 1 0 0 0-1 1v1a4 4 0 0 0 4 4'/%3E%3Cpath d='M17 5h3a1 1 0 0 1 1 1v1a4 4 0 0 1-4 4'/%3E%3Cpath d='M12 14v3'/%3E%3Cpath d='M9 21h6'/%3E%3Cpath d='M10 21v-2.5c0-.6.4-1 1-1h2c.6 0 1 .4 1 1V21'/%3E%3C/svg%3E");
--rb-icon-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='8.5' cy='9.5' r='1.5'/%3E%3Cpath d='m21 15-5-5-9 9'/%3E%3Cpath d='m11 20-5.5-5.5L3 17'/%3E%3C/svg%3E");
--rb-icon-video: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='15' height='14' rx='2'/%3E%3Cpath d='m22 8-5 3.5L22 15V8Z'/%3E%3C/svg%3E");
}
/* 9-1. レッスン冒頭ヒーローバナー（ボクセル演出付き） */
.learning-content .rb-hero {
background: linear-gradient(135deg, var(--rb-navy) 0%, var(--rb-blue) 55%, var(--rb-sky) 100%);
border-radius: 24px;
padding: 40px 36px 34px;
margin-bottom: 30px;
position: relative;
overflow: hidden;
color: #fff;
box-shadow: 0 12px 32px rgba(0, 105, 187, .28);
}
.learning-content .rb-hero::before {
content: "";
position: absolute;
top: -40px; right: -40px;
width: 180px; height: 180px;
background: radial-gradient(circle, rgba(255,255,255,.12), transparent 70%);
border-radius: 50%;
}
/* ボクセル（ブロック）の浮遊装飾 */
.learning-content .rb-hero .rb-cube {
position: absolute;
border-radius: 6px;
opacity: .5;
animation: rb-float 4s ease-in-out infinite;
}
.learning-content .rb-hero .rb-cube:nth-child(1) {
width: 26px; height: 26px; top: 18px; right: 60px;
background: linear-gradient(135deg, var(--rb-gold), #ffe08a);
animation-delay: 0s;
}
.learning-content .rb-hero .rb-cube:nth-child(2) {
width: 16px; height: 16px; top: 70px; right: 130px;
background: linear-gradient(135deg, var(--rb-red), #ff8095);
animation-delay: .8s;
}
.learning-content .rb-hero .rb-cube:nth-child(3) {
width: 20px; height: 20px; bottom: 20px; right: 30px;
background: linear-gradient(135deg, var(--rb-green), #8ff5d8);
animation-delay: 1.6s;
}
@keyframes rb-float {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-10px) rotate(12deg); }
}
.learning-content .rb-hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(255,255,255,.2);
backdrop-filter: blur(4px);
color: #fff;
font-size: .8rem;
font-weight: 900;
padding: 6px 16px;
border-radius: 20px;
margin-bottom: 14px;
letter-spacing: .03em;
}
.learning-content .rb-hero h2 {
background: none;
color: #fff;
font-size: 2rem;
font-weight: 900;
padding: 0;
border-radius: 0;
margin: 0 0 10px;
text-shadow: 0 3px 12px rgba(0,0,0,.35);
letter-spacing: -.01em;
}
.learning-content .rb-hero p {
color: #d9ecfb;
font-size: 1rem;
margin: 0;
font-weight: 500;
}
/* 9-2. 統計・数字強調ボックス（カラーバリエーション + ホバー浮上） */
.learning-content .rb-stat-row {
display: flex;
gap: 16px;
margin: 24px 0;
flex-wrap: wrap;
}
.learning-content .rb-stat-box {
flex: 1;
min-width: 170px;
background: #fff;
border: none;
border-top: 5px solid var(--rb-blue);
border-radius: 16px;
padding: 22px 18px;
text-align: center;
box-shadow: 0 6px 20px rgba(15, 23, 42, .08);
transition: transform .18s ease, box-shadow .18s ease;
}
.learning-content .rb-stat-box:hover {
transform: translateY(-4px);
box-shadow: 0 10px 26px rgba(15, 23, 42, .14);
}
.learning-content .rb-stat-box:nth-child(2) { border-top-color: var(--rb-red); }
.learning-content .rb-stat-box:nth-child(3) { border-top-color: var(--rb-gold); }
.learning-content .rb-stat-box:nth-child(4) { border-top-color: var(--rb-purple); }
.learning-content .rb-stat-box .num {
font-size: 2.1rem;
font-weight: 900;
color: var(--rb-navy);
display: block;
line-height: 1.15;
}
.learning-content .rb-stat-box .label {
color: #64748b;
font-size: .85rem;
font-weight: 700;
margin-top: 6px;
display: block;
}
/* 9-3. 比較カード（ホバー浮上・アイコンバッジ） */
.learning-content .rb-compare-list {
display: flex;
flex-direction: column;
gap: 12px;
margin: 20px 0;
}
.learning-content .rb-compare-card {
background: #fff;
border: 1px solid #eef1f6;
border-radius: 14px;
padding: 18px 20px;
box-shadow: 0 3px 10px rgba(15,23,42,.05);
transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.learning-content .rb-compare-card:hover {
transform: translateX(4px);
box-shadow: 0 6px 18px rgba(15,23,42,.1);
border-color: #dbeafe;
}
.learning-content .rb-compare-card .rb-compare-title {
font-weight: 900;
color: var(--rb-navy);
margin-bottom: 8px;
font-size: 1.02rem;
}
.learning-content .rb-compare-card .rb-compare-conclusion {
background: linear-gradient(transparent 55%, #ffe58a 55%);
font-weight: 700;
}
.learning-content .rb-best-box {
background: linear-gradient(135deg, var(--rb-navy), #123a6b);
border: none;
border-radius: 20px;
padding: 26px 26px;
margin: 22px 0;
color: #fff;
position: relative;
overflow: hidden;
box-shadow: 0 14px 30px rgba(10, 17, 40, .3);
}
.learning-content .rb-best-box::before {
content: "";
position: absolute;
width: 130px;
height: 130px;
opacity: .12;
right: -14px;
bottom: -14px;
transform: rotate(-12deg);
background-color: #fff;
-webkit-mask-image: var(--rb-icon-trophy);
mask-image: var(--rb-icon-trophy);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
mask-size: contain;
}
.learning-content .rb-best-box .rb-best-title {
font-weight: 900;
color: #ffe58a;
font-size: 1.2rem;
margin-bottom: 14px;
}
.learning-content .rb-best-box ul {
margin: 0;
padding-left: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 8px;
position: relative;
z-index: 1;
}
.learning-content .rb-best-box ul li {
padding-left: 1.6em;
position: relative;
line-height: 1.6;
font-weight: 600;
color: #eaf3fd;
}
.learning-content .rb-best-box ul li::before {
content: "✔";
position: absolute;
left: 0;
color: var(--rb-green);
font-weight: 900;
}
/* 9-4. 操作系Tips
★構造の注意：display:flex は使わない。
中身が「ラベルspan＋本文テキスト」など複数要素になると、
flexの直接の子として横並びカラム化して崩れるため、
アイコンは position:absolute で置き、本文は左パディングで
よける方式に統一（要素数に関わらず安定する）。 */
.learning-content .rb-tip-box {
position: relative;
background: #fffaeb;
border: none;
border-left: 5px solid var(--rb-gold);
border-radius: 12px;
padding: 16px 20px 16px 56px;
margin: 18px 0;
color: #7c5a00;
}
.learning-content .rb-tip-box::before {
content: "";
position: absolute;
left: 20px;
top: 17px;
width: 24px;
height: 24px;
background-color: var(--rb-gold);
-webkit-mask-image: var(--rb-icon-idea);
mask-image: var(--rb-icon-idea);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
mask-size: contain;
}
.learning-content .rb-tip-box .rb-tip-label {
font-weight: 900;
display: block;
margin-bottom: 3px;
color: #b45309;
}
/* 9-4b. 警告ボックス（チャンキーな立体感）
★同じ理由でflexではなく絶対配置方式に統一。 */
.learning-content .rb-warning {
position: relative;
background: #fff1f2;
border: none;
border-radius: 12px;
padding: 16px 20px 16px 54px;
margin: 20px 0;
color: #9f1239;
font-weight: 700;
box-shadow: inset 0 0 0 2px #fecdd3;
}
.learning-content .rb-warning::before {
content: "";
position: absolute;
left: 20px;
top: 18px;
width: 22px;
height: 22px;
background-color: #e11d48;
-webkit-mask-image: var(--rb-icon-warning);
mask-image: var(--rb-icon-warning);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
mask-size: contain;
}
/* 9-5. チャンキーな立体ボタン（押し込み感のあるゲーム風） */
.learning-content a.rb-link-btn {
display: flex;
width: fit-content;
align-items: center;
gap: 10px;
background: linear-gradient(135deg, var(--rb-blue), var(--rb-sky));
color: #fff;
font-weight: 900;
font-size: 1.02rem;
padding: 15px 32px;
border-radius: 16px;
text-decoration: none;
box-shadow: 0 5px 0 #004d85, 0 8px 18px rgba(0,105,187,.3);
margin: 18px 0 22px;
transition: transform .12s ease, box-shadow .12s ease;
}
.learning-content a.rb-link-btn:hover {
transform: translateY(2px);
box-shadow: 0 3px 0 #004d85, 0 5px 12px rgba(0,105,187,.3);
}
.learning-content a.rb-download-btn {
display: flex;
width: fit-content;
align-items: center;
gap: 10px;
background: linear-gradient(135deg, var(--rb-green), #16b98a);
color: #fff;
font-weight: 900;
font-size: 1.02rem;
padding: 15px 32px;
border-radius: 16px;
text-decoration: none;
box-shadow: 0 5px 0 #0d8a68, 0 8px 18px rgba(22,185,138,.3);
margin: 18px 0 22px;
transition: transform .12s ease, box-shadow .12s ease;
}
.learning-content a.rb-download-btn:hover {
transform: translateY(2px);
box-shadow: 0 3px 0 #0d8a68, 0 5px 12px rgba(22,185,138,.3);
}
/* 9-6. スクリーンショット枠（実画像用）
★左寄せに統一：文章・ボタンと同じ配置基準に揃えることで、
ページ内で「左寄せ↔中央寄せ」が混在する見づらさを解消。
（大きな画像は横幅いっぱいに近い700pxなので、左寄せでも
見た目の圧迫感は出にくい） */
.learning-content .rb-shot {
text-align: left;
margin: 28px 0;
}
.learning-content .rb-shot img {
max-width: 700px;
width: 100%;
height: auto;
border-radius: 14px;
box-shadow: 0 8px 24px rgba(15,23,42,.14);
border: 4px solid #fff;
outline: 1px solid #e5e9f0;
display: block;
}
.learning-content .rb-shot.rb-shot-sm img { max-width: 400px; }
.learning-content .rb-shot-2col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin: 28px 0;
}
.learning-content .rb-shot-2col img {
width: 100%;
height: auto;
border-radius: 14px;
box-shadow: 0 8px 24px rgba(15,23,42,.14);
border: 4px solid #fff;
outline: 1px solid #e5e9f0;
}
/* 9-7. 短尺動画埋め込み枠（動画は視線誘導のため中央寄せのまま維持） */
.learning-content .rb-clip {
max-width: 560px;
margin: 28px auto;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 10px 26px rgba(15,23,42,.18);
border: 4px solid #fff;
outline: 1px solid #e5e9f0;
}
.learning-content .rb-clip video {
width: 100%;
display: block;
}
/* ------------------------------------------------------------
10. 【重要】画像・動画プレースホルダー
実際のキャプチャ・撮影が完了するまでの「差し込み予定地」を
はっきり視認できるようにする専用コンポーネント。
壊れた画像アイコンではなく、意図的にデザインされた
プレースホルダーボックスとして表示されます。
使用例（画像1枚）：
スクリーンショット挿入予定
Studioインストール完了画面
実画像が用意できたら、上記の …
を 
に置き換えるだけでよい
（.rb-shot の外枠クラスはそのまま使い続けられる）。
動画の場合：
動作確認クリップ挿入予定
テンプレートを開いてプレイするまでの流れ（20秒程度）
※ rb-ph-icon は中身が空のspanでよい（CSSでアイコンを描画する）
------------------------------------------------------------ */
.learning-content .rb-shot-placeholder,
.learning-content .rb-clip-placeholder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
aspect-ratio: 16 / 9;
max-width: 700px;
border-radius: 14px;
border: 3px dashed #93c5fd;
background:
repeating-linear-gradient(
45deg,
#eff6ff,
#eff6ff 12px,
#e0edfc 12px,
#e0edfc 24px
);
color: #2563a8;
padding: 20px;
text-align: center;
position: relative;
overflow: hidden;
}
/* 画像プレースホルダーは左寄せ（.rb-shot の左寄せ方針に合わせる） */
.learning-content .rb-shot-placeholder {
margin: 0;
}
/* 動画プレースホルダーは .rb-clip 同様に中央寄せのまま維持 */
.learning-content .rb-clip-placeholder {
margin: 28px auto;
}
.learning-content .rb-clip-placeholder {
border-color: #fbb6ce;
background:
repeating-linear-gradient(
45deg,
#fdf2f8,
#fdf2f8 12px,
#fce7f3 12px,
#fce7f3 24px
);
color: #be185d;
}
.learning-content .rb-shot-placeholder .rb-ph-icon,
.learning-content .rb-clip-placeholder .rb-ph-icon {
display: block;
width: 46px;
height: 46px;
background-color: currentColor;
-webkit-mask-image: var(--rb-icon-image);
mask-image: var(--rb-icon-image);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
filter: drop-shadow(0 2px 4px rgba(0,0,0,.08));
}
.learning-content .rb-clip-placeholder .rb-ph-icon,
.learning-content .rb-ph-icon.rb-ph-icon-video {
-webkit-mask-image: var(--rb-icon-video);
mask-image: var(--rb-icon-video);
}
.learning-content .rb-shot-placeholder .rb-ph-label,
.learning-content .rb-clip-placeholder .rb-ph-label {
font-weight: 900;
font-size: .95rem;
background: rgba(255,255,255,.75);
padding: 3px 14px;
border-radius: 20px;
}
.learning-content .rb-shot-placeholder .rb-ph-caption,
.learning-content .rb-clip-placeholder .rb-ph-caption {
font-size: .82rem;
font-weight: 600;
opacity: .85;
max-width: 80%;
}
.learning-content .rb-shot-placeholder.rb-ph-sm {
max-width: 400px;
}
/* ------------------------------------------------------------
11. アクセシビリティ配慮（見落としの是正）
------------------------------------------------------------ */
/* アニメーションを減らす設定のユーザーには、浮遊アニメーションを止める */
@media (prefers-reduced-motion: reduce) {
.learning-content .rb-hero .rb-cube {
animation: none;
}
.learning-content .rb-stat-box,
.learning-content .rb-compare-card,
.learning-content a.rb-link-btn,
.learning-content a.rb-download-btn {
transition: none;
}
}
/* コントラスト比の是正：
旧 .rb-best-box .rb-best-title の #ffe58a（金）は
紺背景 #0a1128 に対し比較的高コントラストのため許容範囲内だが、
本文側の li 文字色 #eaf3fd も含め、WCAG AA（4.5:1）を満たす
よう明度を再調整。 */
.learning-content .rb-best-box .rb-best-title {
color: #ffd75e; /* #ffe58a よりコントラスト比を確保 */
}
.learning-content .rb-best-box ul li {
color: #f3f8fd; /* #eaf3fd よりわずかに明るくし可読性を確保 */
}
/* ------------------------------------------------------------
12. 表（table-simple）のRobloxテーマ拡張スキン
既存の基本クラス table-simple はそのまま使いつつ、
.rb-table を併用するとRobloxパレットに統一できる。
使用例：
------------------------------------------------------------ */
.learning-content .rb-table .table-simple thead tr {
background: linear-gradient(135deg, var(--rb-navy), var(--rb-blue)) !important;
}
.learning-content .rb-table .table-simple thead th {
color: #fff !important;
}
.learning-content .rb-table .table-simple {
border-radius: 14px !important;
overflow: hidden;
box-shadow: 0 6px 18px rgba(15,23,42,.08);
}
/* ------------------------------------------------------------
13. スペーシング／タイポグラフィスケール（8pxグリッド基準）
今後の新規パーツ制作時は、このスケールに沿った余白・文字サイズを
使うことで、レッスン全体のリズムを統一できる。
------------------------------------------------------------ */
:root {
--rb-space-1: 4px;
--rb-space-2: 8px;
--rb-space-3: 16px;
--rb-space-4: 24px;
--rb-space-5: 32px;
--rb-space-6: 48px;
--rb-text-sm: .85rem;
--rb-text-base: 1rem;
--rb-text-lg: 1.15rem;
--rb-text-xl: 1.4rem;
--rb-text-2xl: 2rem;
}
/* ------------------------------------------------------------
15. リッチ度向上コンポーネント（実キャプチャなしでも視覚情報量を出す）
実際のスクリーンショットが用意できない段階でも、UIの見た目を
ある程度伝えられるよう、CSSだけでツールアイコン等を再現する。
15-1. ツールアイコングリッド（4ツールの見た目を模したカード）
使用例：
------------------------------------------------------------ */
.learning-content .rb-tool-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
margin: 24px 0;
}
@media not all and (min-width: 650px) {
.learning-content .rb-tool-grid { grid-template-columns: repeat(2, 1fr); }
}
.learning-content .rb-tool-card {
background: #1a2540;
border-radius: 14px;
padding: 18px 10px;
text-align: center;
box-shadow: 0 6px 16px rgba(10,17,40,.18);
}
.learning-content .rb-tool-icon {
width: 40px;
height: 40px;
margin: 0 auto 10px;
background-color: #fff;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
.learning-content .rb-tool-name {
color: #fff;
font-weight: 900;
font-size: .85rem;
display: block;
}
/* 4ツールそれぞれのアイコン（線画・オリジナル） */
.learning-content .rb-tool-icon-select {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 4 7.07 17 2.51-7.39L21 11.07Z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 4 7.07 17 2.51-7.39L21 11.07Z'/%3E%3C/svg%3E");
background-color: var(--rb-blue);
}
.learning-content .rb-tool-icon-move {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v20M2 12h20M5 9l-3 3 3 3M19 9l3 3-3 3M9 5l3-3 3 3M9 19l3 3 3-3'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v20M2 12h20M5 9l-3 3 3 3M19 9l3 3-3 3M9 5l3-3 3 3M9 19l3 3 3-3'/%3E%3C/svg%3E");
background-color: var(--rb-green);
}
.learning-content .rb-tool-icon-scale {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E");
background-color: var(--rb-gold);
}
.learning-content .rb-tool-icon-rotate {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-3-6.7'/%3E%3Cpath d='M21 3v6h-6'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-3-6.7'/%3E%3Cpath d='M21 3v6h-6'/%3E%3C/svg%3E");
background-color: var(--rb-red);
}
/* ------------------------------------------------------------
15-2. Before/After 比較プレースホルダー
使用例：
------------------------------------------------------------ */
.learning-content .rb-compare-shot {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin: 24px 0;
}
@media not all and (min-width: 650px) {
.learning-content .rb-compare-shot { grid-template-columns: 1fr; }
}
.learning-content .rb-compare-shot-item { position: relative; }
.learning-content .rb-compare-shot-tag {
position: absolute;
top: 10px; left: 10px;
z-index: 2;
font-weight: 900;
font-size: .75rem;
padding: 3px 12px;
border-radius: 20px;
color: #fff;
}
.learning-content .rb-tag-before { background: #64748b; }
.learning-content .rb-tag-after { background: var(--rb-green); }
.learning-content .rb-compare-shot-item .rb-shot-placeholder { margin: 0; max-width: none; }
/* ------------------------------------------------------------
15-3. カラーバリエーション付きセクション区切り帯
rb-hero は「レッスン冒頭」専用だったが、レッスン内の大きな
テーマの切り替わり（例：STEP後半に入る等）でも使える
ミニ版の色付き帯を追加。色は用途ごとに使い分け可能。
使用例：🎮 操作編
------------------------------------------------------------ */
.learning-content .rb-divider {
color: #fff;
font-weight: 900;
font-size: 1.05rem;
padding: 12px 20px;
border-radius: 12px;
margin: 30px 0 18px;
}
.learning-content .rb-divider-blue { background: linear-gradient(135deg, var(--rb-navy), var(--rb-blue)); }
.learning-content .rb-divider-red { background: linear-gradient(135deg, #8a0e24, var(--rb-red)); }
.learning-content .rb-divider-green { background: linear-gradient(135deg, #0d8a68, var(--rb-green)); }
.learning-content .rb-divider-purple { background: linear-gradient(135deg, #4c1d95, var(--rb-purple)); }