*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
:root {
/* ── テーマカラー（案C：ネイビー主役・色に役割を持たせる）── */
/* ネイビー＝テーマ・見出し・構造（白抜き文字が映える／知的・本格的）*/
--navy-deep: #1e3a5f;
--navy: #2c5282;
--navy-py: #3776AB; /* Python公式ブルー */
--navy-light:#4a7fb5;
--accent: #2c5282; /* 主アクセント＝ネイビー */
--grad: linear-gradient(135deg,#1e3a5f 0%,#3776AB 100%);
/* グリーン＝成功・正解・実行（✓とGOだけに使う）*/
--green: #10B981;
--green-dk: #059669;
/* イエロー＝達成・ご褒美（星・XP・できた！のスポット）*/
--yellow: #FFD43B;
--gold: #F5B800;
/* 補助 */
--amber: #F59E0B;
--red: #EF4444;
--orange: #F97316;
--pink: #EC4899;
--indigo: #4f46e5;
/* ── ニュートラル（白基調で安心感）── */
--text: #1A2332;
--text2: #5A6678;
--muted: #5A6678;
--text3: #9AA3B2;
--border: rgba(30,58,95,.12);
--border2: rgba(30,58,95,.07);
--guide-bg: #F2F5F9; /* やわらかいネイビーみグレー */
--bg2: #E7ECF3;
--card: #FFFFFF;
/* ── エディタ（ネイビー寄りダークで全体トーン統一）── */
--dark: #16202e;
--editor-bg: #1a2332; /* ネイビー寄りダーク */
--editor-panel: #16202e;
--r: 16px;
--r-sm: 10px;
--font-px: 'Press Start 2P', monospace;
--font-bd: 'BIZ UDPGothic', 'Noto Sans JP', sans-serif;
--font-body:'BIZ UDPGothic', 'Noto Sans JP', sans-serif;
--font-head:'BIZ UDPGothic', 'Noto Sans JP', sans-serif;
--font-code:'JetBrains Mono','Consolas','Courier New',monospace;
/* STEPヘッダーの色（ネイビー基調で少しずつ変化。飽きさせない）*/
--c1: linear-gradient(135deg,#1e3a5f,#3776AB);
--c2: linear-gradient(135deg,#2c5282,#4a7fb5);
--c3: linear-gradient(135deg,#1e3a5f,#2c5282);
--c4: linear-gradient(135deg,#3776AB,#2c5282);
--c5: linear-gradient(135deg,#0e7490,#3776AB);
--c6: linear-gradient(135deg,#0d9488,#0e7490);
--cbonus: linear-gradient(135deg,#F5B800,#FF8C00);
}
body {
font-family: var(--font-bd);
background: var(--dark);
color: var(--text);
overflow: hidden;
height: 100vh;
font-size: 15px;
letter-spacing: .04em;
}
/* ══ トップバー（上品なダーク。開発者っぽさは保ちつつ毒々しさを排除）══ */
.topbar {
height: 50px;
background: linear-gradient(90deg,#16202e,#1a2332,#16202e);
border-bottom: 3px solid var(--navy-py);
display: flex; align-items: center; justify-content: space-between;
padding: 0 12px; z-index: 200; flex-shrink: 0;
}
.tb-left, .tb-right { display: flex; align-items: center; gap: 8px; }
.hamburger-btn {
background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15);
color: #cbd5e1; width: 34px; height: 32px; border-radius: 7px;
cursor: pointer; font-size: 15px; transition: background .2s, color .2s;
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.hamburger-btn:hover { background: rgba(55,118,171,.22); color: #fff; }
.tb-home {
background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15);
color: #cbd5e1; width: 34px; height: 32px; border-radius: 7px;
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
text-decoration: none; font-size: 14px; transition: background .2s, color .2s;
}
.tb-home:hover { background: rgba(55,118,171,.22); color: #fff; }
.tb-badge {
font-family: var(--font-px); font-size: 7px; color: #7FB3E0;
background: rgba(55,118,171,.18); padding: 4px 8px; border-radius: 4px;
border: 1px solid rgba(127,179,224,.35); white-space: nowrap; flex-shrink: 0;
}
.tb-title { font-weight: 700; font-size: 14px; color: #fff; white-space: nowrap; flex-shrink: 0; }
.tb-title span { color: #7FB3E0; }
@media(max-width:640px){ .tb-title { display: none; } }
.tb-stars { display: flex; gap: 3px; align-items: center; }
.star { font-size: 17px; color: #3a3a52; transition: color .3s, filter .3s, transform .15s; user-select: none; cursor: pointer; }
.star:hover { transform: scale(1.2); }
.star.lit { color: var(--yellow); filter: drop-shadow(0 0 5px rgba(245,158,11,.9)); }
@keyframes starPop { 0%{transform:scale(0) rotate(-40deg)} 60%{transform:scale(1.7) rotate(8deg)} 100%{transform:scale(1) rotate(0)} }
.star.popping { animation: starPop .45s ease forwards; }
.tb-timer {
font-family: var(--font-px); font-size: 11px; color: #7FB3E0;
background: rgba(0,0,0,.4); padding: 5px 10px; border-radius: 6px;
border: 1px solid rgba(127,179,224,.35); min-width: 76px; text-align: center;
transition: color .3s, border-color .3s; flex-shrink: 0;
}
.tb-timer.warn { color: #fbbf24; border-color: rgba(251,191,36,.3); }
.tb-timer.alert { color: #f87171; border-color: rgba(248,113,113,.3); animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .5; } }
/* ══ ハンバーガーメニュー（もくじ） ══ */
.hamburger-overlay {
position: fixed; inset: 0; z-index: 8000;
background: rgba(3,7,18,.6); backdrop-filter: blur(2px);
opacity: 0; pointer-events: none; transition: opacity .25s;
}
.hamburger-overlay.open { opacity: 1; pointer-events: auto; }
.hamburger-panel {
position: absolute; top: 0; right: 0; left: auto; height: 100%; width: 300px; max-width: 82vw;
background: linear-gradient(160deg,#0c1322,#0a1b14);
border-left: 2px solid var(--accent);
transform: translateX(100%); transition: transform .3s cubic-bezier(.4,0,.2,1);
display: flex; flex-direction: column; box-shadow: -6px 0 30px rgba(0,0,0,.5);
}
.hamburger-overlay.open .hamburger-panel { transform: translateX(0); }
.hamburger-header {
display: flex; align-items: center; justify-content: space-between;
padding: 16px 18px; border-bottom: 1px solid rgba(255,255,255,.08);
}
.hamburger-title { font-weight: 700; font-size: 16px; color: #fff; display: flex; align-items: center; gap: 9px; }
.hamburger-title i { color: var(--accent); }
.hamburger-close {
background: none; border: none; color: #94a3b8; font-size: 20px; cursor: pointer;
width: 32px; height: 32px; border-radius: 7px; transition: background .2s, color .2s;
}
.hamburger-close:hover { background: rgba(255,255,255,.1); color: #fff; }
.hamburger-list { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 7px; }
.ham-item {
display: flex; align-items: center; gap: 11px; padding: 12px 13px; border-radius: 11px;
background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
color: #cbd5e1; cursor: pointer; transition: all .18s; text-align: left; width: 100%;
font-family: var(--font-bd); font-size: 14px; font-weight: 700;
}
.ham-item:hover { background: rgba(55,118,171,.12); border-color: rgba(34,224,122,.4); color: #fff; transform: translateX(3px); }
.ham-item .ham-num {
width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
font-family: var(--font-px); font-size: 8px; background: rgba(34,224,122,.15); color: #86efac;
}
.ham-item.done .ham-num { background: var(--accent); color: #042810; }
.ham-item.done .ham-check { color: var(--accent); margin-left: auto; }
.ham-item .ham-check { display: none; }
.ham-item.done .ham-check { display: block; }
/* ══ 3カラムレイアウト ══ */
.layout {
display: flex;
height: calc(100vh - 50px);
position: relative;
}
/* ── 左：エディタ（可変） ── */
.col-editor {
flex: 1 1 38%;
display: flex; flex-direction: column;
background: var(--editor-bg);
min-width: 280px; overflow: hidden;
}
/* ── 中央：プレビュー（固定幅。中身は400px固定なので幅を変える意味がない） ── */
.col-game {
flex: 0 0 420px;
display: flex; flex-direction: column;
background: #0a0e1a;
min-width: 300px; overflow: hidden;
}
/* ── 右：ガイド（テキスト・1/3幅・640px基準。可変） ── */
.col-guide {
flex: 1 1 36%;
background: var(--guide-bg);
display: flex; flex-direction: column;
border-left: 3px solid var(--accent);
overflow: hidden; min-width: 320px;
position: relative;
}
/* リサイズハンドル（カラム間） */
.resizer-h {
width: 5px; flex-shrink: 0; cursor: col-resize;
background: #0d1117; position: relative;
transition: background .15s;
}
.resizer-h::after {
content: ''; position: absolute; top: 50%; left: 50%;
transform: translate(-50%,-50%); width: 2px; height: 28px;
background: rgba(55,118,171,.4); border-radius: 2px; transition: background .15s;
}
.resizer-h:hover { background: rgba(55,118,171,.12); }
.resizer-h:hover::after { background: var(--accent); }
/* ── エディタ ツールバー（操作の主役を明確に）── */
.ed-toolbar {
background: #0d1117; padding: 8px 10px;
display: flex; gap: 6px; align-items: center;
border-bottom: 2px solid rgba(55,118,171,.18); flex-shrink: 0;
min-height: 49px; box-sizing: border-box;
}
.ed-btn {
padding: 7px 12px; border: none; border-radius: 7px;
cursor: pointer; font-family: var(--font-bd); font-weight: 700; font-size: 12.5px;
transition: all .18s; display: flex; align-items: center; gap: 6px; white-space: nowrap;
}
/* じっこう＝主役。大きく緑で目立たせる */
.btn-run {
background: linear-gradient(135deg,#22c55e,#16a34a); color:#fff;
box-shadow: 0 3px 10px rgba(22,163,74,.45); padding: 7px 16px; font-size: 13px;
}
.btn-run:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(22,163,74,.6); }
.btn-run:active { transform: translateY(0); }
/* ていし＝控えめ（普段は使わない） */
.btn-stop { background: rgba(220,38,38,.12); color:#fca5a5; border:1px solid rgba(220,38,38,.28); }
.btn-stop:hover { background: rgba(220,38,38,.28); color:#fff; }
/* 区切り（主操作 と 補助操作 を視覚的に分ける） */
.ed-divider { width: 1px; height: 22px; background: rgba(255,255,255,.12); margin: 0 2px; flex-shrink: 0; }
/* アイコンのみの補助ボタン（保存・開く） */
.btn-icon {
background: rgba(255,255,255,.06); color: #94a3b8; border: 1px solid rgba(255,255,255,.1);
padding: 7px 9px;
}
.btn-icon:hover { background: rgba(255,255,255,.14); color: #fff; }
/* AIに聞く＝紫で区別。落ち着いた印象 */
.btn-help { background: rgba(55,118,171,.18); color:#9cc4e8; border:1px solid rgba(55,118,171,.4); }
.btn-help:hover { background: rgba(55,118,171,.35); color:#fff; transform: translateY(-1px); }
.btn-help:disabled { opacity:.55; cursor:wait; transform:none; }
/* AIヘルパー呼び出し（エディタ右下のフローティング●ボタン） */
.ai-help-fab {
position: absolute; right: 16px; bottom: 16px; z-index: 5;
width: 52px; height: 52px; border-radius: 50%; border: none; cursor: pointer;
background: linear-gradient(135deg,#3776AB,#2c5282); color: #fff;
font-size: 21px; display: flex; align-items: center; justify-content: center;
box-shadow: 0 4px 14px rgba(0,0,0,.35); transition: transform .15s, box-shadow .15s;
}
.ai-help-fab:hover {
transform: translateY(-2px) scale(1.05);
box-shadow: 0 7px 20px rgba(55,118,171,.5);
}
.ai-help-fab:disabled { opacity:.55; cursor:wait; transform:none; }
/* ふきだし風ラベル（ホバーで出る） */
.ai-help-fab::before {
content: 'こまったら聞いてね'; position: absolute; right: 60px; top: 50%;
transform: translateY(-50%); white-space: nowrap;
background: #1e293b; color: #fff; font-size: 12px; font-weight: 700;
padding: 6px 11px; border-radius: 8px; opacity: 0; pointer-events: none;
transition: opacity .15s; font-family: var(--font-body);
}
.ai-help-fab:hover::before { opacity: 1; }
.ed-status {
margin-left: auto; font-size: 11px; color: #7FB3E0; font-weight: 700;
padding: 5px 9px; background: rgba(0,0,0,.4); border-radius: 6px; white-space: nowrap;
display: flex; align-items: center; gap: 5px;
}
.ed-status.loading { color: #fbbf24; }
.ed-status.error { color: #f87171; }
/* 左パネルの各セクション（お手本 / AIヘルパー を排他表示） */
.left-pane-section { flex: 1; display: flex; flex-direction: column; min-height: 0; }
/* AIヘルパーのヘッダー色（お手本はオレンジ、AIは青で区別） */
.example-header.aihelp { background: #3776AB; }
.ai-help-body {
flex: 1; padding: 14px 16px; overflow-y: auto;
font-size: 14px; line-height: 1.9; color: #1e2a3d; background: #f4f7fb;
}
.ai-help-body .ai-sent {
font-size: 12px; color: #2c5282; background: #e3effb;
border-radius: 8px; padding: 7px 11px; margin-bottom: 11px;
}
.ai-help-body .ai-msg { color: #1e2a3d; }
.ai-help-body .ai-msg strong { color: #1d5da8; }
.ai-help-body .ai-fix {
display: block; margin-top: 10px; padding: 10px 12px; border-radius: 8px;
background: #272822; border: 1px solid rgba(55,118,171,.3);
font-family: var(--font-code); font-size: 13px; color: #a6e3a1; white-space: pre-wrap;
}
.ai-help-body .ai-note {
margin-top: 12px; font-size: 11px; color: #8595ad;
border-top: 1px dashed rgba(55,118,171,.2); padding-top: 8px;
}
.ai-typing { display: inline-flex; gap: 4px; }
.ai-typing i { width: 7px; height: 7px; border-radius: 50%; background: #7FB3E0; animation: aitype 1s infinite; }
.ai-typing i:nth-child(2){ animation-delay: .2s; } .ai-typing i:nth-child(3){ animation-delay: .4s; }
@keyframes aitype { 0%,60%,100%{opacity:.3;transform:translateY(0)} 30%{opacity:1;transform:translateY(-4px)} }
@media(prefers-reduced-motion:reduce){ .ai-typing i { animation: none; } }
/* CodeMirror */
.cm-wrap { flex: 1 1 auto; min-height: 140px; overflow: hidden; position: relative; }
.cm-wrap .CodeMirror { height: 100%; font-size: 14px; font-family: var(--font-code); line-height: 1.7; }
/* CodeMirrorのPythonモードは、正しく動くコードでもインデント（とくに空行のあとの下げ戻し）を
「エラー」と誤判定して、monokaiのピンク背景（.cm-error）をつけてしまうことがある。
実際のエラーではなく、子どもが「こわれた」と誤解するので、この背景を消す。 */
.cm-wrap .cm-s-monokai .cm-error,
.cm-wrap .CodeMirror .cm-error { background: transparent !important; color: inherit !important; }
/* 全角文字（英字・数字・スペース）に赤いアンダーラインを引いて、子どもが気づけるようにする。
全角スペースは文字が見えないので、背景色も付けて「ここに全角スペースがあるよ」と分かるようにする。 */
.cm-wrap .CodeMirror .cm-zenkaku {
border-bottom: 2px solid #ff5252;
background: rgba(255,82,82,.18);
border-radius: 2px;
}
.console-panel {
flex: 0 0 92px; height: 92px; display: flex; flex-direction: column;
background: #0a0e1a; border-top: 2px solid rgba(55,118,171,.13);
overflow: hidden;
}
.console-head {
font-family: var(--font-px); font-size: 7px; color: #475569;
padding: 5px 10px; display: flex; justify-content: space-between; align-items: center;
background: #0d1117; border-bottom: 1px solid rgba(255,255,255,.05);
}
.console-clr { background: none; border: none; color: #475569; cursor: pointer; font-size: 10px; }
.console-clr:hover { color: #94a3b8; }
.console-out {
flex: 1; padding: 5px 8px; overflow-y: auto;
font-family: 'Consolas', monospace; font-size: 11px; color: #94a3b8;
}
.console-out::-webkit-scrollbar { width: 4px; }
.console-out::-webkit-scrollbar-thumb { background: #1e293b; border-radius: 99px; }
.cl { margin: 1px 0; word-break: break-all; line-height: 1.5; }
.cl-err { color: #f87171; } .cl-info { color: #7FB3E0; } .cl-warn { color: #fbbf24; }
/* ── ゲームプレビュー（右下） ── */
.game-header {
background: #0d1117; padding: 7px 10px;
display: flex; align-items: center; gap: 8px;
border-bottom: 2px solid rgba(55,118,171,.18); flex-shrink: 0;
}
.game-header-title { font-family: var(--font-px); font-size: 7px; color: #7FB3E0; }
.btn-expand {
margin-left: auto; background: rgba(59,130,246,.15); color: #93c5fd;
border: 1px solid rgba(59,130,246,.25); padding: 4px 9px; border-radius: 5px;
font-family: var(--font-bd); font-size: 11px; font-weight: 700; cursor: pointer;
display: flex; align-items: center; gap: 4px;
}
.btn-expand:hover { background: rgba(59,130,246,.35); }
.game-header-tools { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.game-header-tools .btn-expand { margin-left: 0; }
.gh-btn {
background: rgba(148,163,184,.14); color: #cbd5e1;
border: 1px solid rgba(148,163,184,.28); padding: 4px 9px; border-radius: 5px;
font-family: var(--font-bd); font-size: 11px; font-weight: 700; cursor: pointer;
display: flex; align-items: center; gap: 4px;
}
.gh-btn:hover { background: rgba(148,163,184,.28); color: #fff; }
.rec-btn.recording {
background: rgba(239,68,68,.22); color: #fca5a5; border-color: rgba(239,68,68,.5);
animation: recPulse 1s ease-in-out infinite;
}
@keyframes recPulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
.rec-btn.counting { background: rgba(234,179,8,.2); color: #fde68a; border-color: rgba(234,179,8,.45); }
/* 録画カウントダウン（3・2・1）とバッジ（キャンバスの上にかぶせる） */
.rec-countdown {
position: absolute; inset: 0; z-index: 50; pointer-events: none;
display: flex; align-items: center; justify-content: center;
font-family: var(--font-bd); font-weight: 900; color: #fff; font-size: 90px;
text-shadow: 0 3px 18px rgba(0,0,0,.85);
}
.rec-countdown.pop { animation: cdPop .5s ease-out; }
@keyframes cdPop { 0% { transform: scale(1.7); opacity: .15; } 45% { opacity: 1; } 100% { transform: scale(1); opacity: .9; } }
.rec-countdown.go { font-size: 40px; color: #fca5a5; }
.rec-badge {
position: absolute; top: 10px; left: 10px; z-index: 60; pointer-events: none;
display: flex; align-items: center; gap: 7px;
background: rgba(0,0,0,.6); color: #fff; padding: 5px 11px; border-radius: 999px;
border: 1px solid rgba(239,68,68,.55);
font-family: var(--font-bd); font-weight: 800; font-size: 13px;
}
.rec-badge .rec-dot { width: 11px; height: 11px; border-radius: 50%; background: #ef4444; animation: recPulse 1s ease-in-out infinite; }
.rec-badge .rec-time { font-variant-numeric: tabular-nums; opacity: .92; }
.canvas-wrap {
flex: 1; display: flex; align-items: center; justify-content: center;
padding: 10px; min-height: 0; position: relative;
}
/* ── お手本カラム（左端からスライドイン。コードのみ表示） ── */
.col-example {
flex: 0 0 30%; min-width: 240px; display: flex; flex-direction: column;
background: #fffaf2; border-right: 2px solid rgba(245,158,11,.45);
overflow: hidden; animation: exampleSlideIn .22s ease;
}
@keyframes exampleSlideIn {
from { opacity: 0; transform: translateX(-12px); }
to { opacity: 1; transform: translateX(0); }
}
@media(prefers-reduced-motion:reduce){ .col-example { animation: none; } }
.example-header {
display: flex; align-items: center; justify-content: space-between;
padding: 8px 12px; background: #d97706; color: #fff; flex-shrink: 0;
min-height: 49px; box-sizing: border-box;
}
.example-header-title {
font-family: var(--font-bd), sans-serif; font-weight: 800; font-size: 13px;
display: flex; align-items: center; gap: 6px;
}
/* お手本ヘッダーのツール（折り返し・文字サイズ）。エディタにも連動する */
.example-tools { display: flex; align-items: center; gap: 5px; }
.ex-tool {
background: rgba(255,255,255,.18); border: none; color: #fff;
min-width: 28px; height: 28px; border-radius: 6px; cursor: pointer;
font-size: 13px; font-weight: 700; padding: 0 7px;
display: flex; align-items: center; justify-content: center;
}
.ex-tool:hover { background: rgba(255,255,255,.34); }
.ex-tool.active { background: #fff; color: #d97706; }
.ex-tool-mini { font-size: 10px; margin-left: 1px; }
.example-close {
background: rgba(255,255,255,.22); border: none; color: #fff;
width: 28px; height: 28px; border-radius: 6px; cursor: pointer;
font-size: 15px; display: flex; align-items: center; justify-content: center;
}
.example-close:hover { background: rgba(255,255,255,.4); }
/* お手本/AIモード時、プレビュー右端に重なる「テキストにもどる」タブ */
.guide-return-tab {
display: none;
position: absolute; right: 0; top: 50%; transform: translateY(-50%);
width: 40px; min-height: 92px; z-index: 20;
background: linear-gradient(135deg,#0f766e,#0b5d57); color: #fff; border: none; cursor: pointer;
border-radius: 12px 0 0 12px; font-weight: 800; font-family: var(--font-bd);
flex-direction: column; align-items: center; justify-content: center; gap: 5px;
box-shadow: -3px 0 12px rgba(15,118,110,.4);
transition: width .15s, filter .15s;
animation: returnTabPulse 1.8s ease-in-out infinite;
}
.guide-return-tab .rt-ico { font-size: 18px; }
.guide-return-tab .rt-label { writing-mode: vertical-rl; font-size: 12px; letter-spacing: 2px; }
.guide-return-tab:hover { width: 46px; filter: brightness(1.1); animation: none; }
@keyframes returnTabPulse {
0%,100% { box-shadow: -3px 0 12px rgba(15,118,110,.4), 0 0 0 0 rgba(20,184,166,.5); }
50% { box-shadow: -3px 0 16px rgba(15,118,110,.6), 0 0 0 10px rgba(20,184,166,0); }
}
@media(prefers-reduced-motion:reduce){ .guide-return-tab { animation: none; } }
.layout.example-mode .guide-return-tab { display: flex; }
.example-code-pre {
flex: 1; margin: 0; padding: 4px 8px 12px 0;
background: #272822; /* monokai背景（エディタと統一） */
color: #f8f8f2;
font-family: var(--font-code); font-size: 14px; line-height: 1.7;
white-space: pre; overflow: auto; tab-size: 4;
}
/* コードが終わっても下までスクロールできるように、末尾に余白ブロックを足す
（overflow:auto の下 padding はブラウザによってスクロール範囲に入らないため ::after で確実に作る）
高さは JS が「右のコンソール領域ぶん」に合わせるので、行がエディタとピタッと対応して止まる */
.example-code-pre::after { content: ""; display: block; height: var(--ex-spacer, 160px); }
/* 選択範囲をコピーするフローティングボタン（お手本コードを選ぶと出る） */
.sel-copy-fab {
position: fixed; z-index: 9999; display: none; align-items: center; gap: 6px;
background: #1e293b; color: #fff; border: 1px solid rgba(255,255,255,.35);
font-family: var(--font-bd), sans-serif; font-weight: 800; font-size: 12px;
padding: 6px 11px; border-radius: 999px; cursor: pointer;
box-shadow: 0 4px 14px rgba(0,0,0,.35);
}
.sel-copy-fab:hover { background: #334155; }
/* 各行はブロック（1行ずつ）。行の連結に改行文字を使わないので、折り返し時も余分な空行が出ない */
.example-code-pre .hl-row { display: block; }
/* 折り返しモード：各行をブロック化し、続き行を行番号ぶんインデント */
.example-code-pre.wrap {
white-space: pre-wrap; word-break: break-word; overflow-x: hidden;
}
.example-code-pre.wrap .hl-row {
display: block;
padding-left: 3.6em; text-indent: -3.6em; /* 続き行だけ下げる */
}
.example-code-pre.wrap .hl-ln { text-indent: 0; }
/* お手本ヘッダーのツール（日本語トグル＋閉じる） */
.example-header-tools { display: flex; align-items: center; gap: 8px; }
.example-ja-btn {
display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
background: rgba(255,255,255,.9); color: #c2710a; border: none;
font-family: var(--font-bd), sans-serif; font-weight: 800; font-size: 12.5px;
padding: 6px 12px; border-radius: 999px; transition: transform .12s, background .12s;
}
.example-ja-btn:hover { transform: translateY(-1px); background: #fff; }
/* お手本ヘッダー：全部コピー ボタン */
.example-copy-btn {
display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
background: rgba(255,255,255,.16); color: #fff; border: 1px solid rgba(255,255,255,.5);
font-family: var(--font-bd), sans-serif; font-weight: 800; font-size: 12.5px;
padding: 6px 12px; border-radius: 999px; transition: transform .12s, background .12s;
}
.example-copy-btn:hover { transform: translateY(-1px); background: rgba(255,255,255,.28); }
/* お手本コード：日本語モード表示 */
.example-code-pre.ja-mode { line-height: 1.7; } /* コード表示と同じ行高・折返し挙動にして左右の行を揃える */
.example-code-pre .ja-line { color: #e6edf3; }
.example-code-pre.ja-mode .hl-ln { color: #7d8590; }
.example-code-pre .hl-ln {
display: inline-block; width: 2.4em; margin-right: 12px;
text-align: right; color: #75715e; user-select: none;
border-right: 1px solid #3e3d32; padding-right: 6px;
}
.example-code-pre .hl-kw { color: #f92672; } /* キーワード＝ピンク */
.example-code-pre .hl-st { color: #e6db74; } /* 文字列＝黄 */
.example-code-pre .hl-nm { color: #ae81ff; } /* 数値＝紫 */
.example-code-pre .hl-cm { color: #75715e; font-style: italic; } /* コメント＝灰 */
/* お手本モード時：右端のテキストを退避（畳む） */
/* お手本モード時：テキストを退避し、お手本とエディタを等分（プレビュー420固定の残りを半々）に */
.layout.example-mode .col-guide {
flex: 0 0 0 !important; min-width: 0 !important; width: 0 !important;
padding: 0 !important; overflow: hidden; opacity: 0;
border: none !important;
}
.layout.example-mode .col-example,
.layout.example-mode .col-editor {
flex: 1 1 0 !important; /* お手本とエディタを同じ幅に等分 */
min-width: 0 !important;
}
.layout.example-mode #resizer-2 { display: none; }
.layout.example-mode #resizer-1 { display: none; }
#gameCanvas {
border: 2px solid rgba(55,118,171,.3); border-radius: 8px;
background: #000; max-width: 100%; max-height: 100%;
image-rendering: pixelated;
}
#gameCanvas.flash { animation: previewFlash .5s ease; }
@keyframes previewFlash {
0% { box-shadow: 0 0 0 0 rgba(16,185,129,.7); border-color: var(--navy-py); }
100% { box-shadow: 0 0 0 14px rgba(34,224,122,0); border-color: rgba(55,118,171,.3); }
}
@media(prefers-reduced-motion:reduce){ #gameCanvas.flash { animation: none; } }
/* ── 左：ガイドパネルの中身 ── */
/* プログレスbar */
.guide-sticky {
background: white; border-bottom: 2px solid var(--border);
padding: 8px 14px; flex-shrink: 0;
box-shadow: 0 2px 8px rgba(22,163,74,.08);
}
.prog-row {
display: flex; justify-content: space-between;
font-size: 14.5px; font-weight: 700; color: var(--text); margin-bottom: 7px;
}
.prog-row .pct { color: var(--accent); }
.progbar { height: 9px; background: #dde4f5; border-radius: 99px; overflow: hidden; }
.progfill {
height: 100%; border-radius: 99px; width: 0%;
background: linear-gradient(90deg,#3776AB,#2c5282,#10B981);
transition: width .6s cubic-bezier(.34,1.56,.64,1);
}
/* スクロールエリア */
.guide-scroll { overflow-y: auto; flex: 1; }
.guide-scroll::-webkit-scrollbar { width: 5px; }
.guide-scroll::-webkit-scrollbar-thumb { background: #bcc8e8; border-radius: 99px; }
.guide-content { padding: 18px 18px; max-width: 760px; margin: 0 auto; }
/* ── 狭い画面（タブレット縦など）：縦積みに ── */
@media (max-width: 900px) {
.layout { flex-direction: column; height: auto; min-height: calc(100vh - 50px); }
.col-editor { flex: none; min-width: 0; height: 44vh; }
.col-game { flex: none; min-width: 0; height: 34vh; border-top: 2px solid rgba(55,118,171,.2); }
.col-guide { flex: none; min-width: 0; border-left: none; border-top: 3px solid var(--accent); min-height: 60vh; }
.resizer-h { display: none; }
}
/* ── イントロ ── */
.intro-block {
background: var(--grad);
border-radius: var(--r); padding: 22px 18px; margin-bottom: 16px;
color: white; position: relative; overflow: hidden;
box-shadow: 0 8px 28px rgba(30,58,95,.3);
}
.intro-block::before {
content:''; position:absolute; top:-30px; right:-30px;
width:120px; height:120px; background:rgba(255,255,255,.08); border-radius:50%;
}
.intro-tag {
font-family: var(--font-head); font-size: 12px; font-weight: 800; letter-spacing: .05em;
background: rgba(255,255,255,.22);
border-radius: 999px; padding: 4px 13px; display: inline-block; margin-bottom: 11px; color: #fff;
}
.intro-h { font-size: 22px; font-weight: 900; margin-bottom: 10px; line-height: 1.35; }
.intro-p { font-size: 15px; line-height: 2.0; letter-spacing:.02em; color: #fff; font-family: var(--font-body); }
.intro-p strong { color: #FFE99A; }
/* ── クイズ ── */
.quiz-box {
background: #f0f6fc; border-radius: var(--r-sm); padding: 16px;
border: 1px solid var(--border); margin-top: 12px;
}
.quiz-q { font-weight: 800; font-size: 16px; margin-bottom: 13px; line-height: 1.7; color: var(--text); font-family: var(--font-body); }
.quiz-opts { display: flex; gap: 8px; flex-wrap: wrap; }
.quiz-btn {
background: #fff; border: 2px solid var(--navy-light);
border-radius: 9px; padding: 9px 16px; color: var(--navy);
font-family: var(--font-body); font-weight: 700; font-size: 15px; cursor: pointer;
transition: transform .15s, background .15s, color .15s;
}
.quiz-btn:hover { background: var(--navy); color: #fff; transform: scale(1.04); }
.quiz-btn:disabled { cursor: default; }
.quiz-btn.correct { background: var(--green); border-color: var(--green); color: #fff; }
.quiz-btn.wrong { background: #ef4444; border-color: #ef4444; color: #fff; }
.quiz-result { margin-top: 12px; font-weight: 700; font-size: 14.5px; line-height: 1.9; color: var(--text); font-family: var(--font-body); }
/* ── セクション枠 ── */
/* ── セクション枠（第1階層）：控えめに。強調はスクロール連動のis-currentで動的に行う ── */
.sec-wrap {
background: var(--card); border-radius: 14px; margin-bottom: 28px;
overflow: hidden; transition: box-shadow .3s;
border: 1px solid var(--border2);
box-shadow: 0 3px 16px rgba(26,29,46,.07), 0 1px 4px rgba(26,29,46,.04);
}
.sec-body { background: #fafbfd; padding: 4px 0; }
.sec-wrap.done { box-shadow: 0 4px 18px rgba(16,185,129,.14); }
.sec-wrap.locked { opacity: 1; } /* ロックなし：veilの暗幕だけで見た目を示す。ボタン等は常に操作可能 */
/* セクション見出し：Canva風グラデ＋白文字。スクロール中も貼り付く */
.sec-header {
display: flex; align-items: center; gap: 12px;
padding: 14px 18px; background: var(--c1); color: #fff;
position: sticky; top: 0; z-index: 4;
}
.sec-header.c2 { background: var(--c2); } .sec-header.c3 { background: var(--c3); }
.sec-header.c4 { background: var(--c4); } .sec-header.c5 { background: var(--c5); }
.sec-header.c6 { background: var(--c6); }
.sec-header.cbonus { background: var(--cbonus); }
.sec-ico {
width: 38px; height: 38px; border-radius: 50%;
background: rgba(255,255,255,.22);
display: flex; align-items: center; justify-content: center;
font-size: 16px; color: #fff; flex-shrink: 0;
}
.sec-txt { flex: 1; min-width: 0; }
.sec-lbl { font-family: var(--font-px); font-size: 8px; color: rgba(255,255,255,.85); margin-bottom: 4px; letter-spacing: 1px; }
.sec-lbl.ja { font-family: var(--font-head); font-size: 11px; font-weight: 800; letter-spacing: 2px; }
.sec-nm { font-weight: 900; font-size: 17px; line-height: 1.25; letter-spacing:.02em; color: #fff; font-family: var(--font-head); }
.sec-min { font-size: 12px; color: rgba(255,255,255,.85); font-weight:700; background: rgba(255,255,255,.18); padding: 4px 9px; border-radius: 999px; white-space: nowrap; }
.sec-badge {
width: 26px; height: 26px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
color: rgba(255,255,255,.35); font-size: 20px; transition: all .4s; flex-shrink: 0;
}
.sec-badge.ok { color: rgba(255,255,255,.95); filter: drop-shadow(0 0 6px rgba(255,255,255,.5)); }
@keyframes badgePop { 0%{transform:scale(0)} 60%{transform:scale(1.5)} 100%{transform:scale(1)} }
.sec-badge.popping { animation: badgePop .4s cubic-bezier(.34,1.56,.64,1) forwards; }
/* ── ステップカード ── */
.step-card { padding: 28px 22px 26px; border-top: 1px solid var(--border2); position: relative; transition: background .18s, box-shadow .25s; }
.step-card:first-of-type { border-top: none; }
.step-desc { font-size: 15px; color: var(--text); line-height: 2.15; letter-spacing:.03em; margin: 6px 0 20px; font-family: var(--font-body); }
.step-desc strong { color: var(--accent); font-weight: 700; }
/* サブステップ（番号付きリスト：Canva式）*/
.substeps {
border: 1px solid var(--border2); border-radius: var(--r-sm); overflow: hidden;
margin: 12px 0; background: var(--card);
}
.substep {
display: flex; align-items: flex-start; gap: 12px;
padding: 14px 16px; border-bottom: 1px solid var(--border2); transition: background .2s;
}
.substep:hover { background: rgba(55,118,171,.04); }
.substep:last-child { border-bottom: none; }
.ss-num {
width: 26px; height: 26px; border-radius: 50%; background: var(--grad);
color: white; font-weight: 900; font-size: 12px; font-family: var(--font-head);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0; margin-top: 2px;
}
.ss-body { flex: 1; min-width: 0; }
.ss-title { font-weight: 700; font-size: 15px; margin-bottom: 6px; color: var(--text); line-height: 1.6; font-family: var(--font-head); }
.ss-desc { font-size: 14px; color: var(--text2); line-height: 2.0; letter-spacing:.03em; font-family: var(--font-body); }
/* ── コンセプト図解ボックス ── */
.concept-box {
border: 2px solid var(--border); border-radius: 12px;
overflow: hidden; margin: 10px 0; background: white;
}
.concept-head {
background: linear-gradient(90deg,#3776AB,#0ea5e9);
padding: 10px 14px; font-family: var(--font-bd); font-size: 13px; font-weight:700;
color: #fff; display: flex; align-items: center; gap: 7px;
}
.concept-body { padding: 12px; }
/* 変数の箱図 */
.var-diagram {
display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 8px 0;
}
.var-box {
background: #f0fdf4; border: 2px solid var(--accent); border-radius: 8px;
text-align: center; padding: 8px 10px; min-width: 80px;
}
.var-box-label { font-family: var(--font-px); font-size: 7px; color: var(--accent); margin-bottom: 4px; }
.var-box-val { font-size: 20px; font-weight: 700; color: var(--text); }
.var-box-name { font-size: 11px; color: var(--muted); margin-top: 3px; }
.var-arrow { font-size: 18px; color: var(--muted); }
/* フローチャート */
.flowchart { margin: 8px 0; }
.fc-item {
display: flex; align-items: center; gap: 8px; margin-bottom: 4px;
}
.fc-box {
border-radius: 8px; padding: 6px 10px; font-size: 12px; font-weight: 700;
white-space: nowrap; flex-shrink: 0;
}
.fc-box.start { background: #dcfce7; color: #15803d; border: 2px solid #86efac; }
.fc-box.loop { background: #dbeafe; color: #1d4ed8; border: 2px solid #93c5fd; }
.fc-box.update { background: #fef3c7; color: #92400e; border: 2px solid #fcd34d; }
.fc-box.draw { background: #e8f0f9; color: #2c5282; border: 2px solid #9cc4e8; }
.fc-desc { font-size: 11px; color: var(--muted); line-height: 1.6; }
.fc-arrow { font-size: 14px; color: #94a3b8; margin-left: 10px; }
/* if文の分岐図 */
.if-diagram {
background: #f8faff; border-radius: 10px; padding: 10px; margin: 8px 0;
}
.if-cond {
background: #dbeafe; border: 2px solid #93c5fd; border-radius: 8px;
padding: 6px 10px; font-size: 12px; font-weight: 700; color: #1d4ed8;
text-align: center; margin-bottom: 8px;
}
.if-branches { display: flex; gap: 8px; }
.if-branch {
flex: 1; border-radius: 8px; padding: 7px 8px; text-align: center;
}
.if-yes { background: #dcfce7; border: 2px solid #86efac; }
.if-no { background: #fee2e2; border: 2px solid #fca5a5; }
.if-branch-label { font-family: var(--font-px); font-size: 7px; margin-bottom: 4px; }
.if-yes .if-branch-label { color: #15803d; }
.if-no .if-branch-label { color: #dc2626; }
.if-branch-action { font-size: 11px; font-weight: 700; color: var(--text); }
/* ── キャラ紹介（はじめに） ── */
.chara-intro { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.chara-row { display: flex; align-items: center; gap: 14px; }
.chara-face {
width: 72px; height: 72px; border-radius: 50%; flex-shrink: 0;
object-fit: cover; border: 3px solid #fff;
box-shadow: 0 3px 12px rgba(30,58,95,.18), 0 0 0 1px var(--border);
}
.chara-body { flex: 1; min-width: 0; }
.chara-name {
font-weight: 800; font-size: 16px; color: var(--text);
display: flex; align-items: center; gap: 8px; margin-bottom: 5px; font-family: var(--font-head);
}
.chara-tag { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; color: #fff; }
.chara-tag.ikuto { background: #5b8def; }
.chara-tag.ami { background: #ec6f9e; }
.chara-desc { font-size: 14px; line-height: 1.9; color: var(--text2); font-family: var(--font-body); }
/* ── 講座の目的 ── */
.goal-box {
background: linear-gradient(135deg, #f0f6fc, #eaf2fb);
border: 1px solid var(--border); border-radius: var(--r);
padding: 18px 18px 16px;
}
.goal-title {
font-weight: 800; font-size: 15.5px; color: var(--navy-deep);
display: flex; align-items: center; gap: 8px; margin-bottom: 11px; font-family: var(--font-head);
}
.goal-title i { color: var(--navy-py); }
.goal-p { font-size: 15px; line-height: 2.05; color: var(--text); margin-bottom: 11px; font-family: var(--font-body); }
.goal-p:last-child { margin-bottom: 0; }
.goal-p strong { color: var(--navy-py); font-weight: 700; }
/* ── にぎやかし用シーン挿絵（キャラのイラスト。楽しさ演出） ── */
.scene {
margin: 14px 0; text-align: center;
}
.scene img {
width: 100%; max-width: 340px; height: auto;
border-radius: 14px; display: inline-block;
border: 3px solid #fff;
box-shadow: 0 4px 18px rgba(30,58,95,.18), 0 0 0 1px var(--border);
}
.scene.wide img { max-width: 100%; } /* 横長イラスト用（はじめに等） */
.scene.sm img { max-width: 240px; } /* 小さめ（にぎやかし用） */
.scene-cap {
font-size: 12.5px; color: var(--text2); margin-top: 6px;
font-weight: 700; letter-spacing: .02em;
}
.scene-cap i { color: var(--gold); margin-right: 3px; }
/* ── 操作画像（Canva式：枠付き・ビフォーアフター） ── */
.step-img {
width: 100%; border-radius: var(--r-sm); display: block;
margin: 10px 0; border: 1px solid var(--border);
box-shadow: 0 2px 10px rgba(0,0,0,.07);
}
.img-center { display: flex; justify-content: center; margin: 10px 0; }
.img-center .step-img { margin: 0; }
.img-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0; }
.img-2col .step-img { margin: 0; }
/* ビフォー →（矢印）→ アフター */
.img-2col-arrow {
display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px;
align-items: center; margin: 10px 0;
}
.img-2col-arrow .step-img { margin: 0; }
.img-2col-arrow .img-arrow {
width: 28px; height: 28px; border-radius: 50%; background: var(--grad);
color: #fff; display: flex; align-items: center; justify-content: center;
font-size: 13px; flex-shrink: 0;
}
.img-caption { font-size: 12px; color: var(--text3); text-align: center; margin-top: 4px; }
/* ── コードブロック ── */
.code-block {
background: #1e2535; border-radius: 10px; margin: 14px 0;
overflow: hidden; box-shadow: 0 4px 10px rgba(0,0,0,.15);
}
.code-block-head {
display: flex; justify-content: space-between; align-items: center; gap: 10px;
padding: 11px 13px; background: #0d1117; border-bottom: 1px solid rgba(55,118,171,.18);
flex-wrap: wrap;
}
.code-block-title { font-family: var(--font-bd); font-size: 13px; font-weight:700; color: #7FB3E0; letter-spacing:.02em; }
.btn-copy {
background: linear-gradient(135deg,#3776AB,#0891b2); color: white;
border: none; padding: 8px 15px; border-radius: 7px;
font-family: var(--font-bd); font-weight: 800; font-size: 13px;
cursor: pointer; transition: all .2s;
}
.btn-copy:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(55,118,171,.3); }
.btn-replace { background: linear-gradient(135deg,#3776AB,#1e3a5f); }
.btn-replace:hover { box-shadow: 0 3px 8px rgba(55,118,171,.4); }
.code-block pre {
padding: 13px 15px; margin: 0; font-family: 'Consolas','Courier New',monospace;
font-size: 13.5px; color: #c8cdd6; white-space: pre; overflow-x: auto; line-height: 1.75; font-family: var(--font-code);
}
.kw{color:#f92672} .fn{color:#a6e22e} .st{color:#e6db74} .cm{color:#75715e;font-style:italic} .nm{color:#ae81ff}
/* ── スクロール連動スポットライト（Canva方式・Pythonテーマ色）──
ビューポート中央付近のstep-cardだけに「いまここ」の細い青ラインを動的に付ける。
線は細く、色はPython公式ブルーで、多色にせず控えめに。 */
.step-card.is-current {
background: rgba(55,118,171,.04);
box-shadow: inset 3px 0 0 0 var(--navy-py), inset -3px 0 0 0 var(--navy-py),
0 4px 16px rgba(55,118,171,.10);
}
/* 「いまここ」ピル（左上・細め・Python青）。長いカードではJSでY位置を追従させる */
.step-card.is-current::before {
content: "いまここ";
position: absolute; top: var(--here-y, 8px); left: 0; transform: translateX(-1px);
background: linear-gradient(135deg,#3776AB,#2c5282); color: #fff;
font-size: 10px; font-weight: 700; font-family: var(--font-bd), sans-serif;
letter-spacing: .04em; padding: 3px 9px 3px 8px;
border-radius: 0 999px 999px 0; box-shadow: 0 2px 7px rgba(55,118,171,.35);
z-index: 3; pointer-events: none;
animation: hereGlowPy 2.4s ease-in-out infinite;
transition: top .12s linear;
}
@keyframes hereGlowPy {
0%,100% { box-shadow: 0 2px 7px rgba(55,118,171,.35); }
50% { box-shadow: 0 2px 13px rgba(55,118,171,.6); }
}
@media(prefers-reduced-motion:reduce){ .step-card.is-current::before { animation: none; } }
/* 「いまここ」ピルぶん先頭要素を少し下げて重なり回避 */
.step-card.is-current > .op-frame:first-child,
.step-card.is-current > .step-desc:first-child,
.step-card.is-current > .talk:first-child { margin-top: 8px; }
/* 遠いカードはほんの少しだけ沈める（隠さない＝不安にさせない） */
.step-card.is-dimmed { opacity: .68; transition: opacity .25s; }
/* ── 操作フレーム（Canva方式：1操作を1枠で完全に囲む）── */
.op-frame {
border-radius: 14px; overflow: hidden; margin: 0 0 24px;
box-shadow: 0 3px 16px rgba(26,29,46,.09); border: 2px solid;
}
.op-frame.read { border-color: #3776AB; }
.op-frame.edit { border-color: #e08608; }
.op-frame.run { border-color: #16a34a; }
.op-head {
padding: 12px 16px; color: #fff; font-family: var(--font-bd); font-weight: 800;
font-size: 14.5px; display: flex; align-items: center; gap: 9px; letter-spacing: .02em;
}
.op-frame.read .op-head { background: linear-gradient(135deg,#3776AB,#2c5282); }
.op-frame.edit .op-head { background: linear-gradient(135deg,#e08608,#c2710a); }
.op-frame.run .op-head { background: linear-gradient(135deg,#22c55e,#16a34a); }
.op-head .op-head-ico { font-size: 15px; opacity: .95; }
.op-head-sub { font-weight: 700; font-size: 12.5px; opacity: .9; margin-left: 2px; }
.op-body { padding: 15px; background: #fff; }
.op-frame.edit .op-body { background: #fffaf3; }
.op-frame.run .op-body { background: #f2fcf6; }
/* 枠の中ではコードブロック・concept-boxの外側マージンを消す（枠が主役） */
.op-body > .code-block:first-child,
.op-body > .concept-box:first-child { margin-top: 0; }
.op-body > .code-block:last-child,
.op-body > .concept-box:last-child { margin-bottom: 0; }
.op-body > .concept-box { border: none; box-shadow: none; background: transparent; }
.op-body > .concept-box > .concept-head { display: none; } /* 見出しは枠ヘッダーに統合 */
/* ── 挿絵（キャラの立ち絵など。文字の壁を分断）── */
.scene-img {
display: block; margin: 4px auto 22px; max-width: 260px; width: 60%;
border-radius: 12px;
}
.scene-img.small { max-width: 150px; width: 40%; }
.op-badge {
display: inline-flex; align-items: center; gap: 6px;
font-family: var(--font-bd); font-weight: 800; font-size: 12.5px;
padding: 5px 13px; border-radius: 999px; color: #fff; margin-bottom: 12px;
letter-spacing: .03em;
}
.op-badge i { font-size: 12px; }
.op-badge.read { background: linear-gradient(135deg,#3776AB,#2c5282); } /* コードを見る＝青 */
.op-badge.edit { background: linear-gradient(135deg,#e08608,#c2710a); } /* コードを変える＝オレンジ */
.op-badge.run { background: linear-gradient(135deg,#22c55e,#16a34a); } /* 実行する＝緑 */
/* ── テキスト側の実行・停止ボタン（B-1：その場で押せる）── */
/* 操作ボタン行：中央寄せで、押すべきボタンを目立たせる */
.inline-run-row {
display: flex; gap: 12px; align-items: center; justify-content: center;
margin: 18px 0 6px; flex-wrap: wrap;
}
.inline-run-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 9px;
border: none; cursor: pointer;
font-family: var(--font-bd); font-weight: 800; font-size: 16px;
padding: 15px 32px; border-radius: 14px; color: #fff; min-width: 170px;
box-shadow: 0 5px 16px rgba(22,163,74,.4); transition: transform .15s, box-shadow .15s, filter .15s;
}
.inline-run-btn i { font-size: 17px; }
.inline-run-btn:hover { transform: translateY(-3px); filter: brightness(1.06); }
.inline-run-btn:active { transform: translateY(-1px); }
.inline-run-hint {
flex-basis: 100%; text-align: center; font-size: 13px; color: var(--text2);
margin-top: 2px;
}
.inline-run-btn.run { background: linear-gradient(135deg,#22c55e,#16a34a); }
.inline-run-btn.stop { background: linear-gradient(135deg,#ef4444,#dc2626); box-shadow: 0 3px 10px rgba(220,38,38,.3); }
.inline-run-btn.example { background: linear-gradient(135deg,#e08608,#c2710a); box-shadow: 0 3px 10px rgba(224,134,8,.3); }
.inline-run-btn.example:hover { box-shadow: 0 6px 16px rgba(224,134,8,.45); }
.inline-run-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(22,163,74,.5); }
.inline-run-btn.stop:hover { box-shadow: 0 6px 16px rgba(220,38,38,.45); }
/* ゆっくりパルス（B-1：押すべきボタンに気づかせる） */
@keyframes runPulse {
0%,100% { box-shadow: 0 3px 10px rgba(22,163,74,.35), 0 0 0 0 rgba(34,197,94,.5); }
50% { box-shadow: 0 3px 14px rgba(22,163,74,.5), 0 0 0 8px rgba(34,197,94,0); }
}
.inline-run-btn.run.pulse { animation: runPulse 2.2s ease-in-out infinite; }
@media(prefers-reduced-motion:reduce){ .inline-run-btn.run.pulse { animation: none; } }
/* コードブロックの「動かして遊ぶ」等もパルスで目立たせる（同化防止） */
@keyframes btnCopyPulse {
0%,100% { box-shadow: 0 0 0 0 rgba(55,118,171,.5); }
50% { box-shadow: 0 0 0 7px rgba(55,118,171,0); }
}
.btn-copy.pulse { animation: btnCopyPulse 2.4s ease-in-out infinite; }
@media(prefers-reduced-motion:reduce){ .btn-copy.pulse { animation: none; } }
.color-hint-row { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 11px; }
.color-chip {
display: inline-block; padding: 4px 11px; border-radius: 7px;
font-family: var(--font-code); font-size: 12.5px; font-weight: 700;
color: #fff; letter-spacing: .03em;
}
/* コードアノテーション（解説ゾーン）
─ コードブロックと地続きの1カード内で、下段を「明るい解説面」にする。
コード(濃いダーク上段) ／ 解説(薄い面の下段) を区切り線でつなぐ。 */
.code-annotation {
padding: 4px 0 6px;
background: #f4f7fb; /* ほんのり青みのある明るい面 */
border-top: 1px solid rgba(55,118,171,.18);
}
/* 解説の1項目＝タグ(上) + 中身(下) を縦に積む */
.ann-item {
display: block; /* 横並びをやめる */
padding: 13px 16px 12px;
border-bottom: 1px solid rgba(30,58,95,.08);
}
.ann-item:last-child { border-bottom: none; }
/* 見出しタグは「行の上」に独立配置（コードの行構造と混同させない） */
.ann-tag {
display: inline-block;
font-family: var(--font-bd), sans-serif; font-weight: 800; font-size: 12px;
padding: 4px 12px; border-radius: 8px; color: #fff;
white-space: nowrap; margin: 0 0 9px 0; letter-spacing:.02em;
}
/* タグ色＝濃い面に白文字で、はっきりコントラストをつける（役割別） */
.ann-tag.func { background: #2563eb; } /* すること＝青 */
.ann-tag.goal { background: #0a8458; } /* これでできること＝緑 */
.ann-tag.var { background: #b45309; } /* ポイント＝オレンジ */
.ann-tag.word { background: #64748b; } /* ことば＝グレー */
.ann-tag.if { background: #4f46e5; } /* 条件＝藍 */
.ann-tag.loop { background: #0a8458; } /* 繰り返し＝緑 */
/* 中身テキスト＝白基調の面に黒文字（読みやすさ最優先） */
.ann-text { font-size: 14.5px; color: #1e2a3d; line-height: 2.0; letter-spacing:.02em; font-family: var(--font-body); }
.ann-text strong { color: #0d2742; font-weight: 800; }
.ann-text code, .ann-row code, .ann-words code {
font-family: var(--font-code); font-size: 13px;
background: #e7ecf3; color: #1e3a5f; padding: 1px 6px; border-radius: 5px;
}
/* 「()の中の3つ」用：丸数字つきの縦リスト */
.ann-list { display: flex; flex-direction: column; gap: 10px; margin-top: 2px; }
.ann-row { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: #1e2a3d; line-height: 1.85; }
.ann-num {
flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
background: #2c5282; color: #fff; font-family: var(--font-bd); font-weight: 800;
font-size: 12.5px; display: flex; align-items: center; justify-content: center;
margin-top: 1px;
}
.ann-row strong { color: #0d2742; font-weight: 800; }
/* 「ことば」用：1語ずつ縦に並べる */
.ann-words { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }
.ann-words > div { font-size: 14px; color: #1e2a3d; line-height: 1.7; }
.ann-words strong { color: #0d2742; font-weight: 800; }
/* ── ノート・ヒント ── */
.note {
border-left: 4px solid #3b82f6; background: linear-gradient(135deg,#eff6ff,#eef2ff);
border-radius: 0 9px 9px 0; padding: 12px 15px;
font-size: 14.5px; color: #1e40af; line-height: 1.95; letter-spacing:.04em; margin: 10px 0; font-family: var(--font-body);
}
/* アイコンは行頭に回り込ませず、丸バッジにして本文の上に独立配置（上下に目線が流れる） */
.note > i:first-child {
display: flex; align-items: center; justify-content: center;
width: 24px; height: 24px; border-radius: 50%;
background: #3b82f6; color: #fff; font-size: 13px;
margin: 0 0 8px 0;
}
.tip {
border-left: 4px solid var(--yellow); background: linear-gradient(135deg,#fefce8,#fff7ed);
border-radius: 0 9px 9px 0; padding: 10px 13px;
font-size: 14.5px; color: #78350f; line-height: 1.95; letter-spacing:.04em; margin: 10px 0; font-family: var(--font-body);
}
.warn-box {
border-left: 4px solid var(--red); background: linear-gradient(135deg,#fef2f2,#fff1f2);
border-radius: 0 9px 9px 0; padding: 10px 13px;
font-size: 14.5px; color: #991b1b; line-height: 1.95; letter-spacing:.04em; margin: 10px 0; font-family: var(--font-body);
}
kbd {
background: #1e293b; color: #e2e8f0; border-radius: 4px; padding: 2px 5px;
font-size: 12.5px; font-family: monospace; border: 1px solid #475569; box-shadow: 0 2px 0 #0f172a;
}
ruby { ruby-align: center; margin: 0; padding: 0; word-spacing: normal; }
rt { font-size: .58em; letter-spacing: 0; color: inherit; opacity: .62; font-weight: 500; }
/* ── 完了ボタン ── */
/* 完了ボタン誘導「できたかな？」＋下向き指 */
.btn-wrap { padding: 8px 14px 18px; }
.done-prompt {
display: flex; align-items: center; justify-content: center; gap: 8px;
font-size: 14px; font-weight: 700; color: var(--accent);
margin-bottom: 9px; letter-spacing: .04em;
transition: opacity .3s;
}
.done-prompt .finger { animation: fingerBounce 1.1s ease infinite; font-size: 17px; }
@keyframes fingerBounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(5px)} }
.done-prompt.hidden { display: none; }
@keyframes btnAttention {
0%,100% { box-shadow: 0 6px 16px rgba(55,118,171,.3); }
50% { box-shadow: 0 6px 26px rgba(22,163,74,.8); }
}
.done-btn.attention { animation: btnAttention 1.6s ease-in-out infinite; }
@media(prefers-reduced-motion: reduce) {
.done-prompt .finger, .done-btn.attention { animation: none !important; }
}
.done-btn {
width: 100%; padding: 16px; border: none; border-radius: 14px;
background: linear-gradient(135deg,#22c55e,#15803d); color: white;
font-family: var(--font-bd); font-weight: 800; font-size: 17px; cursor: pointer;
display: flex; align-items: center; justify-content: center; gap: 9px;
transition: transform .15s, box-shadow .15s; box-shadow: 0 6px 16px rgba(22,163,74,.42);
letter-spacing: .03em;
}
.done-btn:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(22,163,74,.55); }
.done-btn:active { transform: translateY(0); }
.done-btn i { font-size: 18px; }
.done-btn.completed { background: linear-gradient(135deg,#86efac,#4ade80); color:#065f46; box-shadow: none; cursor: default; }
.done-btn.completed:hover { transform: none; }
.chal-btn { background: linear-gradient(135deg,#f59e0b,#d97706); box-shadow: 0 6px 16px rgba(245,158,11,.4); }
.chal-btn:hover { box-shadow: 0 10px 24px rgba(245,158,11,.5); }
/* ── 完了オーバーレイ ── */
#comp-overlay {
position: fixed; inset: 0; background: rgba(0,0,0,.8);
display: none; align-items: center; justify-content: center;
z-index: 9999; backdrop-filter: blur(6px);
}
#comp-overlay.show { display: flex; }
.comp-card {
background: white; border-radius: 24px; padding: 34px 34px 30px;
text-align: center; max-width: 480px; width: 92%;
max-height: 92vh; overflow-y: auto;
box-shadow: 0 24px 60px rgba(0,0,0,.4);
animation: popIn .45s cubic-bezier(.34,1.56,.64,1);
}
@keyframes popIn { from{transform:scale(.4) rotate(-5deg);opacity:0} to{transform:scale(1) rotate(0);opacity:1} }
.comp-emoji { font-size: 56px; margin-bottom: 8px; }
.comp-title { font-size: 22px; font-weight: 700; margin-bottom: 5px; color: var(--text); }
.comp-stars { font-size: 28px; letter-spacing: 4px; margin: 8px 0 10px; color: var(--yellow); }
.comp-msg { font-size: 13px; color: var(--muted); line-height: 1.9; margin-bottom: 18px; }
.comp-next {
display:inline-flex; align-items:center; gap:9px; text-decoration:none;
padding: 13px 30px; margin-top: 4px; background: linear-gradient(135deg,#16a34a,#15803d);
color: white; border: none; border-radius: 11px;
font-family: var(--font-bd); font-size: 15px; font-weight: 700; cursor: pointer;
box-shadow: 0 5px 14px rgba(55,118,171,.3); transition: transform .15s, box-shadow .15s;
}
.comp-next:hover { transform: translateY(-2px); box-shadow: 0 9px 20px rgba(22,163,74,.5); }
/* 拡大モーダル */
#game-modal {
display: none; position: fixed; z-index: 3000; inset: 0;
background: rgba(0,0,0,.92); align-items: center; justify-content: center;
}
#game-modal.show { display: flex; }
.modal-close {
position: absolute; top: 18px; right: 26px; color: #fff;
font-size: 32px; cursor: pointer; transition: color .2s; line-height: 1;
}
.modal-close:hover { color: #4ade80; }
.modal-toolbar {
position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
display: flex; gap: 8px; z-index: 3100;
background: rgba(13,17,23,.85); padding: 8px 10px; border-radius: 10px;
border: 1px solid rgba(148,163,184,.25);
}
.modal-toolbar .gh-btn { font-size: 13px; padding: 7px 13px; }
.modal-toolbar .modal-run { background: rgba(34,197,94,.18); color: #86efac; border-color: rgba(34,197,94,.4); }
.modal-toolbar .modal-run:hover { background: rgba(34,197,94,.34); color: #fff; }
#modalCanvas {
width: min(86vmin, 760px); height: min(86vmin, 760px); /* 400x400の絵を引き伸ばして大きく表示 */
image-rendering: auto; /* なめらか（ドット感を出すなら pixelated）*/
border: 3px solid rgba(22,163,74,.5); border-radius: 10px; box-shadow: 0 8px 32px rgba(0,0,0,.5);
}
/* ── 開閉式の答え（details）＝「押せるボタン」と分かる見た目 ── */
.answer-box {
border: none; border-radius: var(--r-sm);
background: transparent; margin: 12px 0; overflow: hidden;
}
.answer-box > summary {
cursor: pointer; padding: 11px 16px; font-weight: 800; font-size: 14.5px; font-family: var(--font-head);
color: #fff; background: linear-gradient(135deg,#5a7fb0,#42648f);
border-radius: 999px; list-style: none; display: inline-flex; align-items: center; gap: 9px;
user-select: none; box-shadow: 0 3px 9px rgba(30,58,95,.25); transition: transform .15s, box-shadow .15s;
}
.answer-box > summary:hover { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(30,58,95,.35); }
.answer-box > summary::-webkit-details-marker { display: none; }
.answer-box > summary::before {
content: '\f0eb'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
font-size: 13px; transition: transform .2s; color: #FFE99A;
}
.answer-box[open] > summary { border-radius: var(--r-sm) var(--r-sm) 0 0; }
.answer-box[open] > summary::before { content: '\f070'; }
.answer-box > div {
padding: 14px 16px; background: #f0f4fa; border: 1px solid var(--border);
border-top: none; border-radius: 0 0 var(--r-sm) var(--r-sm); margin-top: -2px;
}
/* ══ 会話パート（イクト & アミ） ══ */
.talk {
display: flex; align-items: flex-end; gap: 12px;
margin: 14px 0;
}
.talk.ami { flex-direction: row-reverse; } /* アミは右から */
.talk-ava {
width: 76px; height: 76px; border-radius: 50%;
flex-shrink: 0; object-fit: cover;
border: 3px solid; background: #eef2f8;
box-shadow: 0 3px 12px rgba(30,58,95,.22);
}
.talk.ikuto .talk-ava { border-color: #5b8def; } /* イクト=青 */
.talk.ami .talk-ava { border-color: #f3a8c0; } /* アミ=ピンク */
.talk-bubble {
position: relative; max-width: 76%;
padding: 12px 15px; border-radius: 15px;
font-size: 14.5px; line-height: 2.0; letter-spacing: .03em;
font-family: var(--font-body);
}
.talk.ikuto .talk-bubble {
background: #EEF4FF;
border: 1px solid rgba(91,141,239,.25); color: #1e3a5f;
border-bottom-left-radius: 4px;
}
.talk.ami .talk-bubble {
background: #FDEEF5;
border: 1px solid rgba(243,168,192,.35); color: #6b2645;
border-bottom-right-radius: 4px;
}
.talk-bubble strong { color: var(--accent); }
.talk.ikuto .talk-bubble strong { color: #2563eb; }
.talk.ami .talk-bubble strong { color: #db2777; }
.talk-name {
display: none; /* 名前は毎回表示しない（アバターと口調で誰か分かる）*/
font-size: 10.5px; font-weight: 700; opacity: .65;
margin-bottom: 3px; letter-spacing: .04em;
}
/* 名前ふりがな付きの小さい見出し */
.talk-name rt { opacity: .55; }
/* ══ 進捗ベール（未到達領域の暗幕） ══ */
#progress-veil {
position: fixed;
pointer-events: none; /* 下のコンテンツは操作できる */
z-index: 5;
background: rgba(20, 30, 24, 0.40);
opacity: 0;
transition: opacity .3s ease, top .25s ease;
}
#progress-veil.show { opacity: 1; }
/* ベール下端の「ここから先はまだ」のサイン */
.veil-edge {
position: fixed; z-index: 6; pointer-events: none;
height: 2px; opacity: 0;
background: linear-gradient(90deg, transparent, rgba(34,197,94,.7), transparent);
transition: opacity .3s ease, top .25s ease;
}
.veil-edge.show { opacity: 1; }
.veil-edge-label {
position: fixed; z-index: 6; pointer-events: none;
font-family: var(--font-code); font-size: 11px; font-weight: 700;
color: rgba(110,231,168,.85); opacity: 0;
transition: opacity .3s ease, top .25s ease;
text-shadow: 0 0 8px rgba(0,0,0,.6);
}
.veil-edge-label.show { opacity: 1; }
/* ── コード片の崩壊エフェクト（テキストプログラミング講座らしい突破演出）── */
.veil-crumb {
position: fixed; z-index: 6; pointer-events: none;
font-family: var(--font-code); font-weight: 700;
color: rgba(110,231,168,.9);
text-shadow: 0 0 6px rgba(34,197,94,.5);
white-space: nowrap; user-select: none;
animation: veilCrumble .9s cubic-bezier(.4,.1,.7,1) forwards;
}
@keyframes veilCrumble {
0% { opacity: 1; transform: translate(0,0) rotate(0deg) scale(1); }
18% { opacity: 1; transform: translate(calc(var(--dx)*.15), -10px) rotate(calc(var(--rot)*.2)) scale(1.1); }
100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(.5); }
}
@media(prefers-reduced-motion: reduce) {
.veil-crumb { animation-duration: .01s !important; }
}
/* ══ レーダーチャート ══ */
.radar-card {
background: linear-gradient(135deg,#1a2332,#16202e);
border:1px solid rgba(55,118,171,.3); border-radius:var(--r);
padding:18px; margin-top:14px; color:#fff;
box-shadow: 0 4px 18px rgba(30,58,95,.2);
}
.radar-card-title {
font-weight:800; font-size:16px; margin-bottom:4px;
display:flex; align-items:center; gap:7px; color:#fff;
}
.radar-card-sub { font-size:14px; font-family:var(--font-body); color:rgba(255,255,255,.7); line-height:1.8; margin-bottom:8px; }
.radar-svg-wrap { display:flex; justify-content:center; }
.radar-legend { display:flex; flex-direction:column; gap:6px; margin-top:10px; }
.radar-leg-item {
display:flex; align-items:center; gap:8px; font-size:14px; font-weight:700;
}
.radar-leg-dot { width:12px; height:12px; border-radius:3px; flex-shrink:0; }
.radar-leg-name { flex:1; color:rgba(255,255,255,.9); }
.radar-leg-pct { font-family:'JetBrains Mono',var(--font-px),monospace; font-weight:800; font-size:13px; }
.radar-poly { transition: all .7s cubic-bezier(.34,1.56,.64,1); }
/* ミニレーダー折りたたみバー */
.mini-radar-bar {
flex-shrink:0; background:#fff; border-top:2px solid var(--border);
}
.mini-radar-toggle {
width:100%; border:none; background:linear-gradient(90deg,#eef4fb,#e8eef7);
padding:11px 14px; cursor:pointer; display:flex; align-items:center; gap:9px;
font-family:var(--font-bd); font-weight:800; font-size:15px; color:var(--text);
transition:background .2s;
}
.mini-radar-toggle:hover { background:linear-gradient(90deg,#e0eaf5,#d8e3f0); }
.mini-radar-toggle .chev { margin-left:auto; transition:transform .3s; color:var(--accent); }
.mini-radar-bar.open .chev { transform:rotate(180deg); }
.mini-radar-body {
max-height:0; overflow:hidden; transition:max-height .35s ease;
background:linear-gradient(135deg,#1a2332,#16202e);
}
.mini-radar-bar.open .mini-radar-body { max-height:560px; }
.mini-radar-inner { padding:12px; cursor:pointer; }
.radar-ico { width:16px; height:16px; vertical-align:-3px; color:var(--accent); flex:0 0 auto; }
/* 現在の合計（各項目の% ＝ イントロの凡例と同じ見た目） */
.mini-radar-values { margin:10px auto 0; max-width:240px; }
.mini-radar-hint { margin-top:10px; text-align:center; font-family:var(--font-bd); font-size:11px; color:#8494a8; }
.mini-radar-hint i { margin-right:4px; }
/* スキル獲得トースト */
#skill-toast {
position:fixed; right:20px; bottom:20px; z-index:9000;
background:linear-gradient(135deg,#1a2332,#16202e);
border:2px solid rgba(55,118,171,.5); border-radius:16px;
padding:14px 16px; width:240px;
box-shadow:0 16px 48px rgba(0,0,0,.5),0 0 30px rgba(55,118,171,.2);
transform:translateX(320px); opacity:0;
transition:transform .45s cubic-bezier(.34,1.56,.64,1),opacity .3s;
color:#fff; pointer-events:none;
}
#skill-toast.show { transform:translateX(0); opacity:1; }
.toast-head { font-weight:700; font-size:14px; margin-bottom:2px; color:#86efac; display:flex; align-items:center; gap:6px; }
.toast-gains { font-size:12.5px; color:rgba(255,255,255,.7); margin-bottom:6px; line-height:1.6; }
/* ══════════════════════════════════════════════════════
試験用フィードバックパネル（test_feedback.php 用）
Canva講座のスタイルをPythonテーマ色に調整して移植
══════════════════════════════════════════════════════ */
.test-wrap { border: 2px dashed rgba(55,118,171,.35); }
.test-card { background: #fff; border-radius: 14px; padding: 16px; margin-bottom: 14px;
box-shadow: 0 2px 12px rgba(26,29,46,.06); }
.test-head { display: flex; align-items: center; gap: 8px;
font-family: var(--font-bd), sans-serif; font-weight: 800; font-size: 17px;
color: var(--navy-py); margin-bottom: 8px; }
.test-head i { color: #f5b400; }
.test-lead { font-size: 14px; line-height: 1.9; color: var(--text2); margin: 0 0 12px; }
/* 受講者用：質問＋顔ボタン */
.tq { margin: 16px 0; }
.tq-text { font-size: 15px; font-weight: 700; line-height: 1.8; margin-bottom: 9px; }
.faces { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.face { display: flex; flex-direction: column; align-items: center; gap: 5px;
padding: 14px 4px; font-size: 28px; cursor: pointer; color: #94a3b8;
background: #f6f9fc; border: 2px solid rgba(55,118,171,.15); border-radius: 12px;
transition: transform .12s, border-color .12s, background .12s, color .12s; }
.face span { font-size: 12px; font-weight: 700; color: var(--text2); }
.face:hover { transform: translateY(-2px); }
.face.is-sel { border-color: var(--navy-py); background: rgba(55,118,171,.1); color: var(--navy-py);
box-shadow: 0 2px 10px rgba(55,118,171,.2); }
.face.is-sel span { color: var(--navy-py); }
/* 本部用：観察フォーム */
.ta-sec { font-family: var(--font-bd), sans-serif; font-weight: 800; font-size: 13px;
color: var(--navy-py); margin: 16px 0 7px; padding-bottom: 5px;
border-bottom: 1.5px solid rgba(55,118,171,.18); }
.ta-row { display: flex; align-items: center; gap: 10px; margin: 8px 0; font-size: 13px; }
.ta-row.col { flex-direction: column; align-items: stretch; gap: 4px; }
.ta-row label { flex: 0 0 46%; color: var(--text2); font-weight: 600; line-height: 1.5; }
.ta-row.col label { flex: none; }
.ta-row input, .ta-row select, .ta-row textarea {
flex: 1 1 0%; min-width: 0; font: inherit; font-size: 13px;
padding: 8px 10px; border: 1px solid #D0D3DF; border-radius: 8px; background: #fff; }
.ta-row textarea {
resize: vertical; min-height: 60px; line-height: 1.6;
overflow: hidden; align-self: stretch; display: block; width: 100%;
}
/* 受講者コメント欄も同様に */
.ta-row.col textarea, .test-child textarea {
resize: vertical; min-height: 56px; line-height: 1.6; overflow: hidden;
width: 100%; box-sizing: border-box;
}
/* 送信 */
.test-submit-wrap { text-align: center; margin-top: 10px; }
.test-submit-btn { font-family: var(--font-bd), sans-serif; font-weight: 800; font-size: 15px;
color: #fff; background: linear-gradient(135deg,#3776AB,#2c5282);
border: none; border-radius: 999px; padding: 13px 30px; cursor: pointer;
display: inline-flex; align-items: center; gap: 9px;
box-shadow: 0 4px 16px rgba(55,118,171,.3); transition: transform .12s; }
.test-submit-btn:hover { transform: translateY(-2px); }
.test-submit-btn:disabled { opacity: .6; cursor: default; transform: none; }
.test-status { margin-top: 10px; font-size: 13px; font-weight: 700; min-height: 1.2em; }
.test-status.ok { color: #1a9c4e; }
.test-status.err { color: #d6334f; }
@media(max-width:640px) {
.ta-row { flex-direction: column; align-items: stretch; gap: 3px; }
.ta-row label { flex: none; }
.face { font-size: 24px; padding: 11px 2px; }
}
.req { font-size: 11px; font-weight: 700; color: #d6334f;
background: rgba(214,51,79,.1); border-radius: 6px; padding: 1px 7px; margin-left: 4px; }
.tname { margin-bottom: 16px; }
.tname label { font-size: 15px; font-weight: 700; }
.tname input { font-size: 15px; padding: 10px 12px; }
.test-head-adult { color: #2c5282; font-size: 15px; }
.test-adult-card { border-left: 4px solid var(--navy-py); }
/* タブ切替 */
.test-tabs { display: flex; gap: 6px; margin-bottom: 14px; }
.test-tab { flex: 1 1 0%; font-family: var(--font-bd), sans-serif; font-weight: 800; font-size: 14px;
padding: 12px 8px; cursor: pointer; border: 2px solid rgba(55,118,171,.18);
background: #f6f9fc; color: var(--text2); border-radius: 12px;
display: inline-flex; align-items: center; justify-content: center; gap: 7px;
transition: all .15s; }
.test-tab i { font-size: 15px; }
.test-tab.is-active { background: linear-gradient(135deg,#3776AB,#2c5282);
color: #fff; border-color: transparent; box-shadow: 0 3px 12px rgba(55,118,171,.25); }
.test-wrap .test-panel { display: none; }
.test-wrap .test-panel.is-active { display: block; }
.test-wrap:not(:has(.test-tabs)) .test-panel { display: block; }
/* Pyodide読み込み失敗時の再読み込みバー（画面上部固定・子ども向け） */
.reload-bar {
position: fixed; top: 0; left: 0; right: 0; z-index: 9999;
background: linear-gradient(135deg,#dc2626,#b91c1c); color: #fff;
display: flex; align-items: center; justify-content: center; gap: 16px;
padding: 12px 18px; font-family: var(--font-bd), sans-serif; font-weight: 700; font-size: 15px;
box-shadow: 0 3px 14px rgba(0,0,0,.3); flex-wrap: wrap;
animation: reloadBarIn .3s ease;
}
@keyframes reloadBarIn { from { transform: translateY(-100%); } to { transform: translateY(0); } }
.reload-bar button {
background: #fff; color: #b91c1c; border: none; cursor: pointer;
font-family: inherit; font-weight: 800; font-size: 15px;
padding: 9px 22px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,.2); transition: transform .12s;
}
.reload-bar button:hover { transform: translateY(-2px); }
/* ══════════════════════════════════════════════════════════
Pythonの使われ方（分野タブ切替）— 既存パレット準拠
────────────────────────────────────────────────────────── */
.pu-block { margin: 14px 0 6px; }
.pu-lead {
font-size: 14.5px; line-height: 1.95; color: var(--text);
background: #f0f6fc; border: 1px solid var(--border);
border-left: 4px solid var(--navy-py);
border-radius: 0 9px 9px 0; padding: 12px 15px; margin: 0 0 16px;
font-family: var(--font-body);
}
.pu-lead strong { color: var(--navy-py); font-weight: 700; }
.pu-tabs {
display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
gap: 9px; margin-bottom: 16px;
}
.pu-tab {
display: flex; flex-direction: column; align-items: center; gap: 6px;
font-family: var(--font-body); font-weight: 700; font-size: 13px;
color: var(--navy); background: #fff;
border: 2px solid var(--navy-light); border-radius: 11px;
padding: 11px 6px; cursor: pointer;
box-shadow: 0 2px 8px rgba(26,29,46,.06);
transition: transform .14s, background .14s, color .14s, box-shadow .14s;
-webkit-tap-highlight-color: transparent;
}
.pu-tab .pu-ico { font-size: 20px; line-height: 1; }
.pu-tab:hover { transform: translateY(-2px); box-shadow: 0 5px 14px rgba(55,118,171,.18); }
.pu-tab.active {
background: var(--grad); color: #fff; border-color: var(--navy-py);
box-shadow: 0 5px 16px rgba(55,118,171,.30);
}
.pu-panel {
position: relative; overflow: hidden; background: #fff;
border: 1px solid var(--border); border-radius: var(--r-sm);
box-shadow: 0 2px 12px rgba(26,29,46,.08);
padding: 18px; min-height: 140px; margin-bottom: 8px;
}
.pu-panel::before {
content: attr(data-badge);
position: absolute; top: 0; right: 0;
font-family: var(--font-body); font-weight: 700; font-size: 11.5px;
color: #fff; background: var(--navy-py);
padding: 4px 14px; border-bottom-left-radius: 10px; letter-spacing: .03em;
}
.pu-panel-img {
width: calc(100% + 36px); margin: -18px -18px 14px;
aspect-ratio: 16 / 9; overflow: hidden;
border-bottom: 1px solid var(--border); background: #eef4fb;
}
.pu-panel-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pu-panel-head {
font-family: var(--font-body); font-weight: 800; font-size: 17px;
color: var(--navy-py); margin: 0 0 9px;
}
.pu-panel-body { font-size: 14px; line-height: 1.9; color: var(--text); font-family: var(--font-body); }
.pu-panel-example {
margin-top: 12px; font-size: 13px; line-height: 1.8; color: #0d5c47;
background: #ecfdf5; border: 1px dashed var(--green);
border-radius: 9px; padding: 10px 13px; font-family: var(--font-body);
}
.pu-panel-example i { color: var(--green-dk); margin-right: 5px; }
.pu-today {
position: relative; margin: 22px 0 6px;
background: linear-gradient(135deg,#fffbeb,#fff7ed);
border: 1px solid #fcd34d; border-left: 4px solid var(--amber);
border-radius: var(--r-sm); padding: 20px 18px 16px;
box-shadow: 0 2px 12px rgba(245,158,11,.12);
}
.pu-today-tag {
position: absolute; top: -14px; left: 14px;
font-family: var(--font-body); font-weight: 800; font-size: 12.5px;
color: #fff; background: var(--amber);
border-radius: 20px; padding: 5px 15px;
box-shadow: 0 2px 8px rgba(245,158,11,.35);
}
.pu-today-tag i { margin-right: 5px; }
.pu-today-body { font-size: 14px; line-height: 1.95; color: #4a2a10; font-family: var(--font-body); }
.pu-today-body strong { color: #b8380a; font-weight: 700; }
/* ══════════════════════════════════════════════════════════
読みやすさ調整
・本文の文字を少し大きく ・行間と余白にゆとり ・「いまここ」を大きく
・数値はここでまとめて上書き（微調整・戻しがしやすいよう末尾に集約）
────────────────────────────────────────────────────────── */
/* --- ガイド本文 --- */
.step-desc { font-size: 16px; line-height: 2.25; margin: 8px 0 24px; }
.goal-p { font-size: 16px; line-height: 2.2; margin-bottom: 13px; }
.intro-p { font-size: 16px; line-height: 2.15; }
.note, .tip, .warn-box {
font-size: 15.5px; line-height: 2.05; padding: 15px 18px; margin: 16px 0;
}
.ss-title { font-size: 15.5px; }
.ss-desc { font-size: 15px; line-height: 2.1; }
.quiz-q { font-size: 16.5px; line-height: 1.85; }
.quiz-btn { font-size: 15.5px; padding: 11px 18px; }
.quiz-result { font-size: 15.5px; line-height: 2.0; }
/* --- ブロックの余白（ゆとり） --- */
.step-card { padding: 34px 24px 32px; }
.op-body { padding: 18px; }
.substep { margin-bottom: 12px; }
/* --- 「いまここ」を大きく・見やすく --- */
.step-card.is-current::before {
font-size: 13px; padding: 5px 14px 5px 12px; letter-spacing: .06em;
border-radius: 0 999px 999px 0; box-shadow: 0 2px 9px rgba(55,118,171,.4);
}
.step-card.is-current > .op-frame:first-child,
.step-card.is-current > .step-desc:first-child,
.step-card.is-current > .talk:first-child { margin-top: 15px; }
/* --- 使われ方コンテンツ：少し大きく --- */
.pu-lead { font-size: 15.5px; line-height: 2.0; }
.pu-tab { font-size: 14px; }
.pu-tab .pu-ico { font-size: 22px; }
.pu-panel-head { font-size: 18px; }
.pu-panel-body { font-size: 15px; line-height: 2.0; }
.pu-panel-example { font-size: 14px; line-height: 1.9; }
.pu-today-tag { font-size: 13px; }
.pu-today-body { font-size: 15px; line-height: 2.05; }
/* ══════════════════════════════════════════════════════════
デザイン整理
・左だけのライン(border-left)を廃止し、全周のうすい枠に統一
・お知らせ系(note/tip/warn)＝「色違いの同じ形」に集約
・見出しは塗り＋白抜きでメリハリ（op-frameヘッダーと共通言語）
・「いまここ」は縦ラインをやめ、やわらかい全体ハイライトに
・エディタ操作の枠(edit)は左向き◀パルスでエディタへ誘導
════════════════════════════════════════════════════════════ */
/* --- お知らせ系：左ライン廃止／白地＋色枠（アウトライン）で統一 --- */
/* ・パステル塗りの「吹き出し（育人=青・亜美=ピンク）」と混同しないよう、
お知らせ系は白地にして色は枠とアイコンだけで表す
・アイコンの丸チップは廃止（丸囲みアイコンの二重丸・色つぶれを回避） */
.note, .tip, .warn-box {
border: 1.5px solid; border-radius: var(--r-sm);
background-image: none; background-color: #fff;
box-shadow: 0 1px 6px rgba(26,29,46,.05);
}
.note { border-color: #93c5fd; color: #1e40af; }
.tip { border-color: #fcd34d; color: #78350f; }
.warn-box { border-color: #fca5a5; color: #991b1b; }
.note > i:first-child, .tip > i:first-child, .warn-box > i:first-child {
display: inline-block; width: auto; height: auto; background: none; border-radius: 0;
font-size: 20px; margin: 0 6px 0 0; vertical-align: -2px;
}
.note > i:first-child { color: #2563eb; }
.tip > i:first-child { color: #d97706; }
.warn-box > i:first-child { color: #dc2626; }
/* --- pu-lead / pu-today も左ライン廃止 → 全周の枠に --- */
.pu-lead { border: 1px solid var(--border); border-radius: var(--r-sm); background: #f0f6fc; }
.pu-today { border: 1px solid #fcd34d; border-radius: var(--r-sm); }
/* --- 「この講座でやること」：塗り＋白抜き見出しでメリハリ --- */
.goal-box { background: #fff; border: 1px solid var(--border); border-radius: var(--r); padding: 0; overflow: hidden; }
.goal-title {
margin: 0; padding: 12px 16px; color: #fff; border-radius: 0;
background: linear-gradient(135deg,#1e3a5f,#3776AB);
font-size: 15px; letter-spacing: .02em;
}
.goal-title i { color: #fff; }
.goal-box .goal-p { padding: 0 18px; }
.goal-box .goal-p:first-of-type { padding-top: 16px; }
.goal-box .goal-p:last-child { padding-bottom: 18px; }
/* --- 「いまここ」：左右の縦ラインをやめ、やわらかい全体ハイライトに --- */
.step-card.is-current {
background: rgba(55,118,171,.05);
border-radius: 12px;
box-shadow: 0 0 0 2px rgba(55,118,171,.22), 0 6px 22px rgba(55,118,171,.10);
}
/* --- エディタ操作の枠(edit)：左向き◀パルスで「左のエディタへ」を誘導 --- */
.op-frame.edit .op-head { position: relative; padding-left: 42px; }
.op-frame.edit .op-head::before {
content: "\25C0";
position: absolute; left: 11px; top: 50%; margin-top: -11px;
width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
background: rgba(255,255,255,.28); border-radius: 50%; color: #fff; font-size: 12px;
animation: nudgeLeft 1s ease-in-out infinite;
}
@keyframes nudgeLeft { 0%,100% { transform: translateX(0); } 50% { transform: translateX(-4px); } }
@media(prefers-reduced-motion:reduce){ .op-frame.edit .op-head::before { animation: none; } }
/* 編集枠の本文アタマに、左のエディタへ誘導する細い帯 */
.op-frame.edit .op-body::before {
content: "\25C0 左のエディタでコードを打ちかえてみよう";
display: block; margin: -15px -15px 14px; padding: 9px 14px;
background: #fff3e0; color: #c2710a; font-family: var(--font-bd); font-weight: 800; font-size: 13px;
border-bottom: 1px solid #f6dcb4; letter-spacing: .02em;
}
/* ══════════════════════════════════════════════════════════
AIヘルパー「ステラ」：プリセット＋自由入力UI・アバター
════════════════════════════════════════════════════════════ */
/* ステラのアバター（ヘッダー） */
.ai-ava { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; vertical-align: -7px; margin-right: 3px; background: #fff; }
/* FABのアバター（丸ボタンいっぱいに） */
.ai-help-fab .ai-fab-ava { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.ai-help-fab::before { content: 'ステラに聞いてね'; }
/* あいさつ吹き出し */
.ai-help-body .ai-greet {
font-size: 14px; line-height: 1.95; color: #1e2a3d;
background: #fff; border: 1.5px solid #cfe0f2; border-radius: 12px; padding: 12px 14px;
}
/* 入力エリア（本文の下に常設） */
.ai-ask { border-top: 1px solid #d6e2f0; background: #eaf2fb; padding: 10px 12px; }
.ai-ask-presets { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 9px; }
.ai-preset {
display: inline-flex; align-items: center; gap: 6px;
font-family: var(--font-bd); font-weight: 700; font-size: 12.5px; color: #2c5282;
background: #fff; border: 1.5px solid #9cc0e8; border-radius: 999px; padding: 7px 13px;
cursor: pointer; transition: transform .12s, background .12s, color .12s, border-color .12s;
}
.ai-preset i { font-size: 12px; }
.ai-preset:hover { background: var(--grad); color: #fff; border-color: var(--navy-py); transform: translateY(-1px); }
.ai-ask-row { display: flex; gap: 8px; }
.ai-ask-input {
flex: 1; min-width: 0; border: 1.5px solid #bcd3ec; border-radius: 10px;
padding: 9px 12px; font-family: var(--font-body); font-size: 14px; color: #1e2a3d; background: #fff;
}
.ai-ask-input:focus { outline: none; border-color: var(--navy-py); box-shadow: 0 0 0 3px rgba(55,118,171,.15); }
.ai-ask-send {
flex-shrink: 0; width: 44px; border: none; border-radius: 10px; cursor: pointer;
background: var(--grad); color: #fff; font-size: 16px;
transition: filter .12s, transform .12s;
}
.ai-ask-send:hover { filter: brightness(1.08); transform: translateY(-1px); }
/* ステラの表情アバター（AIパネル本文の上に表示・状態で切替） */
.ai-help-body .ai-face-top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.ai-help-body .ai-face { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; background: #fff; border: 1.5px solid #cfe0f2; }
.ai-help-body .ai-face-name { font-family: var(--font-bd); font-weight: 800; font-size: 13px; color: #2c5282; }
/* ── FABボタン：丸アイコン化をやめ、背景なしでステラ全身を出す ── */
.ai-help-fab {
background: none; box-shadow: none; border-radius: 0; width: 62px; height: 62px; padding: 0;
}
.ai-help-fab:hover { box-shadow: none; transform: translateY(-2px) scale(1.06); }
.ai-help-fab .ai-fab-ava {
width: 100%; height: 100%; object-fit: contain; border-radius: 0;
filter: drop-shadow(0 2px 5px rgba(0,0,0,.35));
}
/* ── ステラ会話ログ：1ターンごとに顔＋吹き出し ── */
.ai-turn { display: flex; gap: 8px; margin-bottom: 12px; align-items: flex-start; }
.ai-turn.stella .ai-face {
width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; object-fit: cover;
background: #fff; border: 1.5px solid #cfe0f2;
}
.ai-turn .ai-bubble {
background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; border-top-left-radius: 4px;
padding: 10px 13px; font-size: 14px; line-height: 1.9; color: #1e2a3d; max-width: 82%;
}
.ai-turn .ai-bubble strong { color: #1d5da8; }
.ai-turn.me { justify-content: flex-end; }
.ai-turn.me .ai-sent { margin: 0; max-width: 88%; }
.ai-turn .ai-note { display: block; margin-top: 8px; }
/* ── ステラFAB：ふわふわ浮遊アニメ（画像側に付与しホバーと非干渉） ── */
@keyframes stellaFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.ai-help-fab .ai-fab-ava { animation: stellaFloat 2.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .ai-help-fab .ai-fab-ava { animation: none; } }
/* ── ステラの会話吹き出し（先生役・ティール系。育人=青／亜美=ピンクと区別） ── */
.talk.stella .talk-ava { border-color: #14b8a6; background: #eafaf6; object-fit: contain; }
.talk.stella .talk-bubble {
background: #e7faf5; border: 1px solid rgba(20,184,166,.32); color: #0f5b4b;
border-bottom-left-radius: 4px;
}
.talk.stella .talk-bubble strong { color: #0d9488; }
/* ══════════════════════════════════════════════════════════
パネル開閉のアニメ（お手本/ステラが左から出た・テキストが右から戻った を直観的に）
════════════════════════════════════════════════════════════ */
/* テキスト列・エディタ列：畳む/戻すをなめらかに */
.col-guide { transition: flex-grow .28s ease, flex-basis .28s ease, min-width .28s ease, opacity .24s ease; }
.col-editor, .col-example { transition: flex-grow .28s ease, flex-basis .28s ease; }
/* 左パネル（お手本/ステラ）が左からスライドして出る（既存より少し強めに） */
.col-example { animation: exampleSlideIn .28s cubic-bezier(.22,.61,.36,1); }
@keyframes exampleSlideIn {
from { opacity: 0; transform: translateX(-26px); }
to { opacity: 1; transform: translateX(0); }
}
/* テキストが右からふわっと戻る合図 */
@keyframes guideBack {
from { opacity: 0; transform: translateX(20px); }
to { opacity: 1; transform: translateX(0); }
}
.guide-content.guide-back { animation: guideBack .34s cubic-bezier(.22,.61,.36,1); }
@media (prefers-reduced-motion: reduce) {
.col-guide, .col-editor, .col-example { transition: none; }
.col-example, .guide-content.guide-back { animation: none; }
}
/* ── もくじハンバーガーをガイドの進捗行へ移設（テキスト系の操作なので） ── */
.prog-row .prog-left { display: flex; align-items: center; gap: 9px; min-width: 0; }
.guide-menu-btn {
background: #eef4fb; border: 1px solid var(--border); color: var(--navy);
width: 32px; height: 30px; border-radius: 7px; cursor: pointer; font-size: 14px;
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
transition: background .15s, color .15s, border-color .15s;
}
.guide-menu-btn:hover { background: var(--navy-py); color: #fff; border-color: var(--navy-py); }
/* もくじボタンは進捗行の右へ（パネルが右から出るのと向きをそろえる） */
.prog-row .prog-right { display: flex; align-items: center; gap: 10px; }
/* ══ エディタ操作枠(edit)：見出しを左向き矢印の形にして視線を左へ強く誘導 ══ */
.op-frame.edit { background: #fffaf3; border: none; box-shadow: 0 3px 16px rgba(224,134,8,.22); } /* 四角い枠線を外し矢印シルエットを見せる */
.op-frame.edit .op-head {
clip-path: polygon(22px 0, 100% 0, 100% 100%, 22px 100%, 0 50%); /* 左がとがった矢印形 */
padding-left: 48px;
}
.op-frame.edit .op-head::before { /* 先端の◀を白地×オレンジで高コントラストに */
left: 16px; width: 24px; height: 24px; margin-top: -12px;
background: #fff; color: #d97706; font-size: 14px;
box-shadow: 0 2px 6px rgba(0,0,0,.28);
}
@keyframes nudgeLeft { 0%,100% { transform: translateX(0); } 50% { transform: translateX(-7px); } }
/* 本文アタマの誘導帯も少し強めに */
.op-frame.edit .op-body::before { font-size: 13.5px; padding: 10px 14px; margin: -18px -18px 14px; }
/* 仕上げ：矢印の見出しをカードの外へ突き出す＋◀は丸囲みなしの素の矢印に */
.op-frame.edit { overflow: visible; } /* 見出しが枠外へはみ出せるように */
.op-frame.edit .op-head { margin-left: -34px; padding-left: 52px; } /* 左へ突き出す */
.op-frame.edit .op-head::before { /* 丸囲みをやめて素の白い◀に */
background: none; box-shadow: none; width: auto; height: auto;
color: #fff; font-size: 17px; left: 14px; top: 50%; margin-top: -11px;
}
/* 仕上げ2：◀グリフを消し、突き出た先端だけが伸び縮みして動くように */
.op-frame.edit .op-head::before { display: none; }
.op-frame.edit .op-head { animation: tipPoke 1.4s ease-in-out infinite; }
@keyframes tipPoke { 0%,100% { margin-left: -33px; } 50% { margin-left: -40px; } }
@media (prefers-reduced-motion: reduce) { .op-frame.edit .op-head { animation: none; } }
/* ══ 仕上げ3：本番クリップ回避＋テキスト静止 ══
・見出し本体は動かさない（clip-path/margin/animation を解除）＝テキストは揺れない
・左に三角の先端を付け、その先端だけが伸び縮みして動く
・列左端の3px枠線に潜らないよう、はみ出し量は控えめ（列内に収める） */
.op-frame.edit .op-head {
clip-path: none; margin-left: 0; padding-left: 40px; animation: none; overflow: visible;
}
.op-frame.edit .op-head::before {
display: block; content: ""; color: transparent; box-shadow: none;
position: absolute; left: -24px; top: 0; bottom: 0; width: 26px; margin-top: 0;
background: #e5920b; /* 見出し左端の色に合わせる */
clip-path: polygon(0 50%, 100% 0, 100% 100%); /* 左向きの三角 */
animation: tipBob 1.4s ease-in-out infinite;
}
@keyframes tipBob { 0%,100% { transform: translateX(0); } 50% { transform: translateX(-7px); } }
@media (prefers-reduced-motion: reduce) { .op-frame.edit .op-head::before { animation: none; } }
/* ══ 仕上げ4：一体の矢印に戻す／角が隠れないよう控えめに／先端だけ動く ══
・見出しそのものをクリップパスで左向き矢印に（三角は分離させない＝一体）
・はみ出しは控えめ（列左端の3px枠線に潜らない）
・先端の頂点だけをクリップパスで伸び縮み（margin/transformは使わない＝テキスト静止） */
.op-frame.edit .op-head::before { display: none; } /* 分離三角は廃止 */
.op-frame.edit .op-head {
margin-left: -28px; padding-left: 40px;
clip-path: polygon(20px 0, 100% 0, 100% 100%, 20px 100%, 0 50%);
animation: tipBreathe 1.5s ease-in-out infinite;
}
@keyframes tipBreathe {
0%,100% { clip-path: polygon(20px 0, 100% 0, 100% 100%, 20px 100%, 0 50%); }
50% { clip-path: polygon(20px 0, 100% 0, 100% 100%, 20px 100%, 9px 50%); }
}
@media (prefers-reduced-motion: reduce) { .op-frame.edit .op-head { animation: none; } }
/* ══ 仕上げ5：外枠(.sec-wrap)のoverflow:hiddenで切れないよう、はみ出しは枠の左端までに収める＋ゆっくり ══ */
.op-frame.edit .op-head { margin-left: -22px; } /* セクション枠の左端あたりまで（切れない範囲） */
.op-frame.edit .op-head { animation-duration: 2.3s; } /* もう少しゆっくり */
/* ══════════════════════════════════════════════════════════
はじめに セクション：サブ見出し・左右分割・楽しいクイズ
════════════════════════════════════════════════════════════ */
/* サブ見出し（セクション内の小見出し。lv2でもう一段下げる） */
.sub-head {
display: flex; align-items: center; gap: 9px;
font-family: var(--font-head); font-weight: 800; font-size: 19px; color: var(--navy-deep);
margin: 2px 0 15px; padding-bottom: 9px; border-bottom: 2px solid var(--border2);
}
.sub-head i { color: var(--navy-py); font-size: 18px; }
.sub-head.lv2 { font-size: 16.5px; border-bottom: none; padding-bottom: 0; margin: 2px 0 12px; }
.sub-head.lv2 i { font-size: 15px; }
/* この講座について：ロゴ＋テキスト */
.about-row { display: flex; align-items: center; gap: 16px; }
.about-logo { width: 128px; max-width: 40%; flex-shrink: 0; }
@media (max-width: 520px) { .about-row { flex-direction: column; align-items: flex-start; } .about-logo { max-width: 60%; } }
/* この講座でやること：テキスト左＋挿絵右 */
.goal-split { display: grid; grid-template-columns: minmax(0,1fr) 170px; gap: 16px; align-items: center; }
.goal-split .goal-illust img { width: 100%; border-radius: 12px; border: 1px solid var(--border); box-shadow: 0 2px 10px rgba(0,0,0,.06); display: block; }
@media (max-width: 560px) { .goal-split { grid-template-columns: 1fr; } .goal-split .goal-illust { max-width: 260px; margin: 4px auto 0; } }
/* 楽しいクイズ（2×2のアイコン付きカード） */
.quiz-fun .quiz-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.quiz-fun .quiz-btn {
display: flex; align-items: center; gap: 10px; justify-content: flex-start;
font-size: 15px; padding: 14px 15px; border-radius: 12px; text-align: left; line-height: 1.4;
}
.quiz-fun .quiz-btn i { font-size: 20px; color: var(--navy-py); flex-shrink: 0; }
.quiz-fun .quiz-btn:hover i, .quiz-fun .quiz-btn.correct i, .quiz-fun .quiz-btn.wrong i { color: #fff; }
@media (max-width: 520px) { .quiz-fun .quiz-opts { grid-template-columns: 1fr; } }
/* ══════════════════════════════════════════════════════════
はじめに：階層を強調（セクション見出しを豪華に／サブ見出しを目立たせる）
════════════════════════════════════════════════════════════ */
/* セクション見出し「この講座へようこそ！」を一段グレードアップ */
.sec-header.intro {
background: linear-gradient(120deg,#12305a 0%,#2b6bb0 48%,#4f8fd0 100%);
padding: 18px 20px;
box-shadow: inset 0 -3px 0 rgba(0,0,0,.14), 0 4px 14px rgba(18,48,90,.25);
position: relative; overflow: hidden;
}
.sec-header.intro::after { /* さりげない光沢 */
content: ""; position: absolute; top: -40%; left: -10%; width: 55%; height: 180%;
background: linear-gradient(90deg, rgba(255,255,255,.16), rgba(255,255,255,0));
transform: rotate(8deg); pointer-events: none;
}
.sec-header.intro .sec-ico { width: 46px; height: 46px; font-size: 21px; background: rgba(255,255,255,.20); }
.sec-header.intro .sec-lbl.ja { font-size: 12px; letter-spacing: 3px; opacity: .9; }
.sec-header.intro .sec-nm { font-size: 22px; letter-spacing: .04em; }
/* サブ見出し：アイコンバッジ＋グラデ下線で見落とさない存在感に（左片線は使わない） */
.sub-head {
display: flex; align-items: center; gap: 11px;
font-family: var(--font-head); font-weight: 800; font-size: 18.5px; color: var(--navy-deep);
margin: 4px 0 16px; padding-bottom: 11px;
border-bottom: 2px solid transparent;
border-image: linear-gradient(90deg, var(--navy-py) 0%, rgba(55,118,171,.25) 55%, transparent 100%) 1;
}
.sub-head i {
width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
background: linear-gradient(135deg,#1e3a5f,#3776AB); color: #fff; font-size: 16px;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 3px 8px rgba(55,118,171,.30);
}
.sub-head.lv2 { font-size: 17px; }
.sub-head.lv2 i { width: 31px; height: 31px; font-size: 15px; }
/* ══════════════════════════════════════════════════════════
はじめに：大枠の中に「見出しごとの小カード」を並べる（ネストカード）
════════════════════════════════════════════════════════════ */
.intro-body { background: #eef2f7; padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.info-card {
background: #fff; border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
box-shadow: 0 2px 10px rgba(26,29,46,.06);
}
/* 小カードの見出し＝背景色＋白抜き＋角丸バー（章見出しと同系のグラデ） */
.info-card > .sub-head {
margin: 0; padding: 12px 16px; border: none !important; border-image: none !important; border-radius: 0;
background: linear-gradient(135deg,#1e3a5f,#3776AB); color: #fff; font-size: 17px;
}
.info-card > .sub-head i { background: rgba(255,255,255,.20); color: #fff; box-shadow: none; }
.info-card > .card-body { padding: 18px; }
/* この講座について：ステラ顔＋ロゴ（縦積み）＋テキスト */
.about-row { display: flex; align-items: center; gap: 18px; }
.about-brand { display: flex; flex-direction: column; align-items: center; gap: 8px; flex-shrink: 0; }
.about-ava { width: 84px; height: 84px; border-radius: 50%; object-fit: contain; background: #eef4fb; border: 2px solid #cfe0f2; }
.about-logo { width: 118px; max-width: 100%; display: block; }
@media (max-width: 520px) { .about-row { flex-direction: column; align-items: center; text-align: center; } }
/* 2人紹介の教室挿絵 */
.intro-scene img { width: 100%; border-radius: 12px; display: block; border: 1px solid var(--border); box-shadow: 0 2px 10px rgba(0,0,0,.06); margin-bottom: 14px; }
/* ── 「いまここ」を はじめに の小カード(.info-card)にも適用 ── */
#guideScroll .info-card { position: relative; overflow: visible; }
.info-card > .sub-head { border-radius: 14px 14px 0 0; } /* overflow解除ぶん、見出しバーの上角を丸める */
.info-card.is-current {
background: rgba(55,118,171,.05);
box-shadow: 0 0 0 2px rgba(55,118,171,.30), 0 6px 22px rgba(55,118,171,.12);
}
.info-card.is-dimmed { opacity: .72; transition: opacity .25s; }
.info-card.is-current::before {
content: "いまここ"; position: absolute; top: var(--here-y,10px); left: 0; transform: translateX(-1px);
background: linear-gradient(135deg,#3776AB,#2c5282); color: #fff;
font-size: 13px; font-weight: 700; font-family: var(--font-bd), sans-serif; letter-spacing: .06em;
padding: 5px 14px 5px 12px; border-radius: 0 999px 999px 0;
box-shadow: 0 2px 9px rgba(55,118,171,.4); z-index: 3; pointer-events: none;
animation: hereGlowPy 2.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .info-card.is-current::before { animation: none; } }
/* ── 修正：ステラ囲みなし・ロゴ小さめ・挿絵は右フロートで小さめ ── */
.intro-lead .about-ava { width: 84px; height: auto; border-radius: 0; background: none; border: none; object-fit: contain; }
.intro-lead .about-logo { width: 76px; }
/* この講座でやること：テキスト左・挿絵右（フロート）。テキストは下に回り込む */
.goal-flow::after { content: ""; display: block; clear: both; }
.goal-flow .goal-illust { float: right; width: 150px; margin: 2px 0 10px 16px; }
.goal-flow .goal-illust img { width: 100%; border-radius: 12px; border: 1px solid var(--border); box-shadow: 0 2px 10px rgba(0,0,0,.06); display: block; }
.goal-flow .goal-p { margin-bottom: 12px; }
@media (max-width: 500px) { .goal-flow .goal-illust { float: none; width: 100%; max-width: 220px; margin: 0 auto 12px; } }
/* ── はじめに調整2：ステラを右上に（gif・ヘッダーへはみ出し）／挿絵拡大／隙間を詰める ── */
.intro-lead { position: relative; padding: 14px 118px 8px 16px; }
.intro-lead .about-row { display: block; }
.intro-lead .about-row > p { margin: 0; }
.intro-lead .about-brand {
position: absolute; right: 10px; top: -56px; width: 104px; z-index: 6;
display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.intro-lead .about-ava { width: 100px; height: auto; border: none; background: none; border-radius: 0; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0,0,0,.28)); }
.intro-lead .about-logo { width: 82px; }
@media (max-width: 480px) {
.intro-lead { padding: 14px 16px 8px; }
.intro-lead .about-brand { position: static; width: auto; flex-direction: row; gap: 12px; margin-bottom: 10px; }
.intro-lead .about-ava { width: 72px; }
}
/* 挿絵を少し大きく */
.goal-flow .goal-illust { width: 200px; }
/* カードの隙間・外周を少し詰める */
.intro-body { padding: 12px; gap: 12px; }
/* STLEAR の由来文字を強調（全体は黒、STLEARの元文字だけ青） */
.stlear-src { color: #1a2332; font-weight: 400; }
.stlear-src b { color: var(--navy-py); font-weight: 800; }
/* 画面に見えるフラッシュメッセージ */
.flash-msg {
position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(18px);
background: #2c5282; color: #fff; padding: 12px 20px; border-radius: 12px;
font-family: var(--font-bd), sans-serif; font-weight: 800; font-size: 14px;
box-shadow: 0 8px 26px rgba(0,0,0,.35); opacity: 0; pointer-events: none; z-index: 9999;
transition: opacity .25s, transform .25s; max-width: 90vw; text-align: center;
}
.flash-msg.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.flash-msg.warn { background: #b45309; }
.flash-msg.info { background: #2c5282; }
/* 置き換え直後、実行ボタンを一瞬強調 */
@keyframes armFlash { 0%,100%{ box-shadow: 0 5px 16px rgba(22,163,74,.4); } 50%{ box-shadow: 0 0 0 6px rgba(34,197,94,.35), 0 5px 16px rgba(22,163,74,.6); } }
.inline-run-btn.just-armed { animation: armFlash .6s ease 3; }
/* ══════════════════════════════════════════════════════════
画面キャプチャ用レイアウト（Canva講座 IMG系を参考に採用）
════════════════════════════════════════════════════════════ */
/* 横幅いっぱいの1枚（IMG-02 img-full 相当） */
.img-full { margin: 12px 0; }
.img-full .step-img { width: 100%; margin: 0; }
/* before→後：せまい画面（ガイド列は細い）では確実に縦積み＋下向き矢印（IMG-05 force-col 相当） */
@media (max-width: 640px) {
.img-2col-arrow.force-col { grid-template-columns: 1fr; }
.img-2col-arrow.force-col .img-arrow { transform: rotate(90deg); justify-self: center; margin: 3px 0; }
}
/* キャプチャ見出しラベル（何の画面かを示す小バー） */
.shot { margin: 12px 0; }
.shot-cap { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-bd); font-weight: 800; font-size: 12.5px; color: var(--navy); margin-bottom: 6px; }
.shot-cap i { color: var(--navy-py); }
/* ボックス＋横に小画像（BOX-06 相当：本文左・画像右、せまい画面で縦） */
.box-side { display: grid; grid-template-columns: 1fr 150px; gap: 12px; align-items: center; }
.box-side .box-side-img img { width: 100%; border-radius: 8px; border: 1px solid var(--border); display: block; }
@media (max-width: 560px) { .box-side { grid-template-columns: 1fr; } .box-side .box-side-img { max-width: 220px; } }
/* 番号つきステップ（読み飛ばし防止・視認性UP。Canva STP系を参考） */
.op-step { display: flex; gap: 12px; margin: 16px 0; align-items: flex-start; }
.op-step-num {
flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
background: var(--grad); color: #fff; font-family: var(--font-bd); font-weight: 800; font-size: 15px;
display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(55,118,171,.3);
}
.op-step-body { flex: 1; min-width: 0; }
.op-step-body > :first-child { margin-top: 0; }
.op-step-body .step-desc { margin: 3px 0 8px; }
/* before→後の2枚を同じ高さにそろえる（スクショの縦ズレ防止） */
.img-2col-arrow { align-items: stretch; }
.img-2col-arrow .step-img { height: 100%; width: 100%; object-fit: contain; background: #0d1117; }
.img-2col-arrow .img-arrow { align-self: center; } /* 矢印は上下中央 */
@media (max-width: 640px) { .img-2col-arrow.force-col .step-img { height: auto; } }
/* この講座でやること：挿絵を左に置く版 */
.goal-flow-left .goal-illust { float: left; margin: 2px 16px 10px 0; }
@media (max-width: 500px) { .goal-flow-left .goal-illust { float: none; width: 100%; max-width: 220px; margin: 0 auto 12px; } }
/* 成功キャプチャ（プレビュー画面の見本。必ず「こうなったら成功」を画像で示す） */
/* 完成後の図形は緑の枠（ボックス）で囲んで「見本」だと分かるようにする */
.done-shot { max-width: 232px; margin: 12px auto 0; padding: 8px 8px 7px; background: #f0fdf4; border: 1.5px solid #86efac; border-radius: 12px; box-shadow: 0 2px 6px rgba(22,163,74,.12); }
.done-shot img { width: 100%; border-radius: 8px; border: 1px solid #cbd5e1; display: block; background: #0d1117; }
.done-shot-cap { text-align: center; font-family: var(--font-bd); font-weight: 800; font-size: 12px; color: #16a34a; margin-top: 6px; }
.done-shot-cap i { margin-right: 4px; }
/* 記号の打ち方（エディタ常設ポップアップ） */
.key-help { position: absolute; top: 8px; right: 8px; z-index: 30; width: min(380px, calc(100% - 16px)); max-height: calc(100% - 16px); overflow: auto; background: #fff; border: 1px solid #cbd5e1; border-radius: 12px; box-shadow: 0 10px 30px rgba(15,23,42,.28); }
.key-help-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; background: var(--grad); color: #fff; font-family: var(--font-bd); font-weight: 800; font-size: 13px; border-radius: 12px 12px 0 0; position: sticky; top: 0; }
.key-help-close { background: rgba(255,255,255,.22); border: none; color: #fff; width: 24px; height: 24px; border-radius: 6px; cursor: pointer; flex-shrink: 0; }
.key-help-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.key-help-tbl th, .key-help-tbl td { border-bottom: 1px solid #eef2f7; padding: 7px 10px; text-align: left; vertical-align: middle; }
.key-help-tbl th { background: #f8fafc; color: #475569; font-size: 11px; font-family: var(--font-bd); }
.key-help-tbl td:first-child { font-family: monospace; font-weight: 800; font-size: 16px; color: #3776AB; text-align: center; width: 34px; }
.key-help-tbl td:nth-child(2) { font-size: 11px; color: #475569; width: 68px; line-height: 1.3; }
.key-help kbd { display: inline-block; background: #f1f5f9; border: 1px solid #cbd5e1; border-bottom-width: 2px; border-radius: 5px; padding: 1px 6px; font-family: monospace; font-size: 12px; color: #1e293b; margin: 0 1px; }
.key-help-note { padding: 9px 12px; font-size: 11.5px; color: #1e40af; background: #eff6ff; border-radius: 0 0 12px 12px; line-height: 1.5; }
.key-help-note i { color: #f59e0b; margin-right: 4px; }
/* ステラの「こういうこと？」選択肢チップ */
.ai-opts { display: flex; flex-direction: column; gap: 7px; margin: 2px 0 10px 44px; }
.ai-opt-btn { text-align: left; background: #fff; border: 1.5px solid #93b4d8; color: #1e3a5f; font-family: var(--font-bd); font-weight: 700; font-size: 13px; padding: 9px 13px; border-radius: 12px; cursor: pointer; transition: background .15s, transform .1s, box-shadow .15s; box-shadow: 0 1px 3px rgba(55,118,171,.12); }
.ai-opt-btn:hover:not(:disabled) { background: #eff6ff; box-shadow: 0 3px 8px rgba(55,118,171,.22); transform: translateY(-1px); }
.ai-opt-btn:disabled { opacity: .5; cursor: default; }
.ai-opt-btn i { color: #3776AB; margin-right: 6px; }
/* ══ 見出しの階層づけ══
・見出しはすべてネイビー系に統一（差別化は幾何学パターン等の装飾で行う）
・「はじめに」の特大サイズをやめ、全ヘッダーを同じ大きさに統一
・「いまここ」ピルは本文と重なっても読めるよう半透明に */
:root { --c1: linear-gradient(135deg,#1e3a5f,#3776AB); }
.sec-header.intro { background: linear-gradient(120deg,#12305a 0%,#2b6bb0 48%,#4f8fd0 100%); }
.sec-header.intro .sec-nm { font-size: 17px; letter-spacing: .02em; }
.sec-header.intro .sec-ico { width: 38px; height: 38px; font-size: 16px; }
/* 「いまここ」ピル：半透明＋文字影で、本文に重なっても下の文字が見える */
.step-card.is-current::before,
.info-card.is-current::before {
background: linear-gradient(135deg, rgba(55,118,171,.72), rgba(44,82,130,.72));
text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
/* ══ 見出しの下層（.mini-head）：カード内をさらに区切る第3レベル見出し ══ */
.mini-head {
display: flex; align-items: center; gap: 8px;
font-family: var(--font-bd); font-weight: 800; font-size: 14.5px; color: var(--navy);
margin: 20px 0 10px; padding-bottom: 7px; border-bottom: 2px solid #e6edf5;
clear: both; /* 右の挿絵（float）に回り込まず、下に落とす */
}
.mini-head i { color: #12a566; font-size: 15px; }
.mini-head:first-child { margin-top: 2px; }
/* ══ 本文中のボタン表記（.btn-ref）：塗りつぶさず「枠線＋そのボタンの色の文字」でボタンっぽく ══
実際に押すボタンと混同しないよう、白地＋色枠＋色文字にする */
.btn-ref {
display: inline-flex; align-items: center; gap: 0;
padding: 0 8px; margin: 0 1px; border-radius: 7px;
border: 1.5px solid; background: #fff;
font-family: var(--font-bd); font-weight: 800; font-size: .9em; line-height: 1.65;
white-space: nowrap; vertical-align: baseline;
}
.btn-ref i { font-size: .88em; margin-right: 5px; } /* gap依存をやめ、確実にアイコンと文字を離す */
/* 「押せない表示」の区別は枠線でキープしつつ、中を実ボタン色の“薄塗り”にして分かりやすく */
.btn-ref.run { color:#15803d; border-color:#22c55e; background:#f0fdf4; } /* 実行・動かして遊ぶ */
.btn-ref.stop { color:#b91c1c; border-color:#ef4444; background:#fef2f2; } /* 停止 */
.btn-ref.example { color:#b45309; border-color:#f59e0b; background:#fffbeb; } /* お手本・日本語で見る・自動で追加 */
.btn-ref.replace { color:#245b96; border-color:#3776AB; background:#eff6fd; } /* コードを置き換える */
.btn-ref.copy { color:#0e7490; border-color:#0891b2; background:#ecfeff; } /* コピー＝実ボタンと同じ青緑（シアン） */
.btn-ref.ai { color:#2c5282; border-color:#9cc0e8; background:#eff6fd; } /* バグを見つけて（ステラ） */
/* ══ できたボタン：セクション見出しと同じ色・太く・押したくなるデザイン ══ */
.done-btn { padding: 20px 16px; font-size: 18.5px; border-radius: 16px; border-bottom: 4px solid rgba(0,0,0,.16); }
.done-btn i { font-size: 20px; }
.done-btn:active { transform: translateY(2px); border-bottom-width: 1px; }
.sw-c1 .done-btn { background: var(--c1); box-shadow: 0 8px 20px rgba(30,58,95,.42); }
.sw-c2 .done-btn { background: var(--c2); box-shadow: 0 8px 20px rgba(44,82,130,.42); }
.sw-c3 .done-btn { background: var(--c3); box-shadow: 0 8px 20px rgba(30,58,95,.42); }
.sw-c4 .done-btn { background: var(--c4); box-shadow: 0 8px 20px rgba(55,118,171,.42); }
.sw-c5 .done-btn { background: var(--c5); box-shadow: 0 8px 20px rgba(14,116,144,.42); }
.sw-c6 .done-btn { background: var(--c6); box-shadow: 0 8px 20px rgba(13,148,136,.42); }
/* ══ 追い込み修正 ══ */
/* 下層見出しを強める：うすいグリーンの帯にして「1段下の見出し」だと分かるように */
/* 第3レベル見出し(mini-head)：塗らず「ネイビー文字＋小アイコンチップ＋下線」。
L1 sec-header（塗り＋回路＋流れるコード）＞ L2 sub-head（塗り＋うっすらドット）＞ L3 mini-head（塗りなし）と装飾を段階的に減らす */
.mini-head {
border: none; border-bottom: 2px solid #d3ddea; border-radius: 0;
background: none; padding: 0 0 9px; margin: 26px 0 14px;
font-size: 16.5px; color: var(--navy-deep); gap: 10px;
}
.mini-head i {
color: #fff; background: linear-gradient(135deg,#3776AB,#2c5282);
width: 30px; height: 30px; border-radius: 9px; font-size: 15px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 2px 5px rgba(55,118,171,.28);
}
/* できたボタン：押したあと(completed)は同系色で埋もれないよう、はっきり別色（グレー＝完了済み）に */
.done-btn.completed { background: linear-gradient(135deg,#cbd5e1,#94a3b8); color: #334155; box-shadow: none; border-bottom-color: rgba(0,0,0,.10); }
/* はじめに冒頭：ステラの頭（耳/アンテナ）が上で切れないよう、少し下げる */
.intro-lead .about-brand { top: -30px; }
/* 成功カード：「…になったら成功！」カードの中にプレビュー画像を内包（下の重複キャプションは廃止） */
.note.done-note { border-color: #86efac; background: #f0fdf4; color: #14683f; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.done-note-img { max-width: 200px; width: 100%; border-radius: 10px; border: 2px solid #16a34a; background: #0d1117; display: block; }
/* ══ はじめに冒頭のステラ：アンテナが切れないよう「はじめに枠」だけ外枠クリップを解除 ══
（ヘッダーは角丸を自前で持たせて見た目維持）＋位置・大きさを微調整 */
.sec-wrap.intro { overflow: visible; }
.sec-header.intro { border-radius: 14px 14px 0 0; }
.intro-lead .about-brand { top: -40px; }
.intro-lead .about-ava { width: 84px; }
.intro-lead .about-logo { width: 74px; }
/* ══ 「かっこいい」演出（改）══
・見出し＝濃いめの幾何学パターン＋下ふちに“うっすらコードが流れる”
・きらり(シャイン)は「できたボタン」だけに（見出しでは頻繁でうるさいので廃止）
・prefers-reduced-motion（OSの「視差効果を減らす／アニメを減らす」設定）ONの人は自動で止める */
.sec-header { position: relative; overflow: hidden; }
.sec-header > * { position: relative; z-index: 1; }
/* 幾何学パターン（少し濃く・見えるように） */
.sec-header::before {
content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='48'%20height='48'%20viewBox='0%200%2048%2048'%3E%3Cg%20fill='none'%20stroke='%23ffffff'%20stroke-opacity='0.16'%20stroke-width='1.2'%3E%3Cpath%20d='M6%207%20H22%20V18%20H42'/%3E%3Cpath%20d='M6%2031%20H14%20V43'/%3E%3Cpath%20d='M30%205%20V20%20H44'/%3E%3Cpath%20d='M25%2048%20V34%20H37'/%3E%3C/g%3E%3Cg%20fill='%23ffffff'%20fill-opacity='0.22'%3E%3Ccircle%20cx='22'%20cy='18'%20r='2'/%3E%3Ccircle%20cx='30'%20cy='20'%20r='2'/%3E%3Ccircle%20cx='14'%20cy='31'%20r='1.8'/%3E%3Ccircle%20cx='37'%20cy='34'%20r='1.8'/%3E%3C/g%3E%3C/svg%3E");
background-size: 48px 48px; opacity: .9;
}
/* 見出しの下ふちに、うっすらプログラムっぽい文字が流れる */
.sec-header::after, .sec-header.intro::after {
content: "0 1 0 0 1 1 0 def draw() 1 0 1 {loop} 0 1 import 0 1 1 0 1 0 0 1 0 1 0 1 0 0 1 1 0 def draw() 1 0 1 {loop} 0 1 import 0 1 1 0 1 0 0 1 0 1 ";
position: absolute; left: 0; bottom: 2px; width: auto; height: auto; top: auto;
white-space: nowrap; font-family: 'DejaVu Sans Mono','Consolas',monospace;
font-size: 10px; letter-spacing: 2px; color: rgba(255,255,255,.17);
background: none; transform: none; pointer-events: none; z-index: 0;
animation: codeFlow 26s linear infinite;
}
@keyframes codeFlow { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* きらり（できたボタンだけ・ゆっくりめ） */
.done-btn { position: relative; overflow: hidden; }
.done-btn::after {
content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
transform: skewX(-20deg); pointer-events: none;
animation: btnShine 4.6s ease-in-out infinite;
}
@keyframes btnShine { 0%, 62%, 100% { left: -60%; } 82% { left: 135%; } }
@media (prefers-reduced-motion: reduce) {
.sec-header::after, .sec-header.intro::after, .done-btn::after { animation: none; }
.done-btn::after { opacity: 0; }
}
/* ══ 追い込み修正2 ══ */
/* op-step の境目を点線で明確に */
.op-step + .op-step { border-top: 1.5px dashed #c3cede; padding-top: 16px; }
/* sec-header に少し立体感（sub-head に寄せる）：上に光・下に影＋アイコンに影 */
.sec-header { box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -3px 7px rgba(0,0,0,.16); }
.sec-ico { box-shadow: 0 2px 6px rgba(0,0,0,.20); }
/* read枠（コードを見てみよう／お手本）も、edit と同じ「枠なし＋左へはみ出す◀＋誘導帯」で
エディタへ視線を誘導する（コードは左のエディタにある、と気づかせる） */
.op-frame.read { overflow: visible; border: none; box-shadow: 0 3px 16px rgba(55,118,171,.22); }
.op-frame.read .op-head {
margin-left: -22px; padding-left: 40px;
clip-path: polygon(20px 0, 100% 0, 100% 100%, 20px 100%, 0 50%);
animation: tipBreathe 2.3s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .op-frame.read .op-head { animation: none; } }
.op-frame.read .op-body::before {
content: "\25C0 左のエディタのコードを見てみよう";
display: block; margin: -18px -18px 14px; padding: 10px 14px;
background: #eef4fb; color: #245b96;
font-family: var(--font-bd); font-weight: 800; font-size: 13.5px;
border-bottom: 1px solid #cfe0f2; letter-spacing: .02em;
}
/* read枠の1行コードに、実際の行番号ガター */
.pre-ln {
display: inline-block; min-width: 1.9em; margin-right: 12px; padding-right: 9px;
text-align: right; color: #7d8aa0; border-right: 1px solid #30363d;
user-select: none; -webkit-user-select: none;
}
/* 解説コードなど「マウスを乗せるとエディタが光る」ブロックの合図 */
.hl-hover { cursor: help; transition: box-shadow .15s; }
.hl-hover:hover { box-shadow: 0 0 0 2px rgba(255,213,79,.55); border-radius: 8px; }
/* ══ 見出し装飾の階層（ネイビー統一・装飾で差別化）══
L2 sub-head（カード見出し）に、うっすらドットのテクスチャを重ねる（L1の回路より弱い） */
.info-card > .sub-head { position: relative; overflow: hidden; }
.info-card > .sub-head > * { position: relative; z-index: 1; }
.info-card > .sub-head::before {
content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .7;
background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1.5px);
background-size: 13px 13px;
}
/* ══ 操作枠まわりの調整 ══ */
/* 1) コードを変えてみよう(edit)＝「コード側で何かをする」意味を「実行」と揃えてグリーン系に
2) 操作枠の見出しにも装飾＝斜めストライプ（sec-header=回路／sub-head=ドット とは別系統） */
.op-frame.read .op-head {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='20'%20height='64'%20viewBox='0%200%2020%2064'%3E%3Cpath%20d='M15%205%20L5.5%2032%20L15%2059'%20fill='none'%20stroke='%23ffffff'%20stroke-opacity='0.12'%20stroke-width='3.2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E"), linear-gradient(135deg,#3776AB,#2c5282);
background-size: 20px 64px, auto;
background-repeat: repeat-x, no-repeat;
background-position: left center, 0 0;
}
.op-frame.edit .op-head {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='20'%20height='64'%20viewBox='0%200%2020%2064'%3E%3Cpath%20d='M15%205%20L5.5%2032%20L15%2059'%20fill='none'%20stroke='%23ffffff'%20stroke-opacity='0.12'%20stroke-width='3.2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E"), linear-gradient(135deg,#16a34a,#15803d);
background-size: 20px 64px, auto;
background-repeat: repeat-x, no-repeat;
background-position: left center, 0 0;
}
.op-frame.edit { box-shadow: 0 3px 16px rgba(22,163,74,.22); }
.op-frame.edit .op-body { background: #f4fcf7; }
.op-frame.edit .op-body::before { background: #e6f7ed; color: #15803d; border-bottom-color: #b7e6c8; }
/* 3) before→after 画像を「常に縦積み」にする版 */
.img-2col-arrow.always-col { grid-template-columns: 1fr; }
.img-2col-arrow.always-col .img-arrow { transform: rotate(90deg); justify-self: center; margin: 5px 0; }
.img-2col-arrow.always-col .step-img { height: auto; }
/* 4) 本文の右に「結果の小さいキャプチャ」を並べる（完成見本の半分くらいのサイズ） */
.body-with-shot { display: grid; grid-template-columns: 1fr 112px; gap: 14px; align-items: start; }
.bws-main > :first-child { margin-top: 0; }
.bws-shot { width: 100%; border-radius: 8px; border: 2px solid #16a34a; background: #0d1117; display: block; }
@media (max-width: 560px) { .body-with-shot { grid-template-columns: 1fr; } .bws-shot { max-width: 150px; } }
/* ══ 「いまここ」＝右側のステラ画像バッジ（ホバーで吹き出し）══ */
/* 旧・左側の文字ピルは廃止 */
.step-card.is-current::before,
.info-card.is-current::before { display: none !important; }
.step-card, .info-card { position: relative; }
.here-badge {
position: absolute; top: var(--here-y, 8px); right: 6px; z-index: 6;
width: 58px; transition: top .12s linear; cursor: help;
}
.here-badge img {
width: 100%; display: block;
filter: drop-shadow(0 3px 9px rgba(20,40,70,.30));
animation: hereFloat 2.4s ease-in-out infinite;
}
@keyframes hereFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
/* ホバーで左向きに出る吹き出し */
.here-badge .here-tip {
position: absolute; right: calc(100% + 10px); top: 50%;
transform: translateY(-50%) scale(.92); opacity: 0; pointer-events: none; white-space: nowrap;
background: linear-gradient(135deg,#3776AB,#2c5282); color: #fff;
font-family: var(--font-bd); font-weight: 800; font-size: 12.5px; letter-spacing: .03em;
padding: 8px 13px; border-radius: 12px; box-shadow: 0 4px 12px rgba(20,40,70,.28);
transition: opacity .16s ease, transform .16s ease;
}
.here-badge .here-tip::after {
content: ""; position: absolute; left: 100%; top: 50%; margin-top: -5px;
border: 5px solid transparent; border-left-color: #2c5282;
}
.here-badge:hover .here-tip { opacity: 1; transform: translateY(-50%) scale(1); }
@media (prefers-reduced-motion: reduce) { .here-badge img { animation: none; } }
/* サブステップの右に「そのステップの結果」の小さなキャプチャ */
.ss-shot {
width: 140px; flex-shrink: 0; align-self: center; display: block;
border-radius: 3px; border: 2px solid #3776AB; background: #0d1117;
}
@media (max-width: 480px) { .ss-shot { width: 78px; } }
/* テキストにもどるタブ：ラベルが長くなったぶん、字間を詰めて縦に伸びすぎないように */
.guide-return-tab .rt-label { letter-spacing: 1px; font-size: 11.5px; }
/* テキストにもどるタブ：上下に余白を足してゆったり＋ラベルの下に→ */
.guide-return-tab { padding: 16px 0; gap: 9px; }
.guide-return-tab .rt-arrow { font-size: 15px; opacity: .95; }
/* プレビュー：背景が黒いコードだと余白と同化するので、400x400の範囲がわかる枠線を出す */
#gameCanvas { outline: 2px solid #46566d; outline-offset: 0; border-radius: 6px; }
/* シェブロン「＜」を右へゆっくり流す（矢印の先端の呼吸アニメと同時に動かす） */
@keyframes chevFlow { from { background-position: 0 center, 0 0; } to { background-position: -20px center, 0 0; } }
.op-frame.read .op-head,
.op-frame.edit .op-head {
animation: tipBreathe 2.3s ease-in-out infinite, chevFlow 1.7s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
.op-frame.read .op-head, .op-frame.edit .op-head { animation: none; }
}
/* ══ できたボタン：見出しと完全に別物と分かる「サイバー調」形状に ══
・左上と右下を斜めに面取り（クリップパス）＝四角い見出しバーと形がまるで違う
・シアンの内側ラインと外側グローで「押すもの」だと一目で分かる */
.done-btn {
clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
border-radius: 0; border-bottom: none;
letter-spacing: .08em;
box-shadow: inset 0 0 0 2px rgba(103,232,249,.55), 0 6px 20px rgba(8,145,178,.32);
}
/* セクション色の指定より後に置いて、影はこちらを優先 */
.sw-c1 .done-btn, .sw-c2 .done-btn, .sw-c3 .done-btn,
.sw-c4 .done-btn, .sw-c5 .done-btn, .sw-c6 .done-btn {
box-shadow: inset 0 0 0 2px rgba(103,232,249,.55), 0 6px 20px rgba(8,145,178,.32);
}
@keyframes doneGlow {
0%,100% { box-shadow: inset 0 0 0 2px rgba(103,232,249,.45), 0 6px 20px rgba(8,145,178,.28); }
50% { box-shadow: inset 0 0 0 2px rgba(125,240,255,1), 0 10px 30px rgba(34,211,238,.62); }
}
.done-btn.attention { animation: doneGlow 1.9s ease-in-out infinite; }
.done-btn:hover { transform: translateY(-3px); filter: brightness(1.08); }
.done-btn:active { transform: translateY(2px); }
.done-btn.completed {
animation: none;
box-shadow: inset 0 0 0 2px rgba(148,163,184,.5);
}
@media (prefers-reduced-motion: reduce) { .done-btn.attention { animation: none; } }
/* ══ できたボタン：見出しと完全に別物にする最終形 ══
①幅を絞って中央寄せ（全幅バー＝見出し、という印象を断つ）
②全セクション共通のシアン（章のネイビー・実行のグリーンとも違う色＝「節の完了」専用色）
③面取り＋下の厚み＋発光で「押せる」質感 */
.done-btn,
.sw-c1 .done-btn, .sw-c2 .done-btn, .sw-c3 .done-btn,
.sw-c4 .done-btn, .sw-c5 .done-btn, .sw-c6 .done-btn {
width: 62%; min-width: 250px; max-width: 420px; margin: 0 auto;
background: linear-gradient(135deg,#22d3ee 0%,#0891b2 55%,#0e7490 100%);
color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.28);
box-shadow: inset 0 -5px 0 rgba(3,60,75,.45),
inset 0 0 0 2px rgba(186,250,255,.60),
0 8px 22px rgba(8,145,178,.40);
}
.done-btn:hover { transform: translateY(-3px); filter: brightness(1.07); }
.done-btn:active {
transform: translateY(3px);
box-shadow: inset 0 -2px 0 rgba(3,60,75,.45),
inset 0 0 0 2px rgba(186,250,255,.60),
0 4px 12px rgba(8,145,178,.40);
}
/* 発光は filter で（影は立体表現に使っているため） */
@keyframes doneGlow {
0%,100% { filter: drop-shadow(0 0 2px rgba(34,211,238,.25)); }
50% { filter: drop-shadow(0 0 13px rgba(34,211,238,.80)); }
}
.done-btn.attention { animation: doneGlow 1.9s ease-in-out infinite; }
.done-btn.completed {
background: linear-gradient(135deg,#cbd5e1,#94a3b8); color: #334155; text-shadow: none;
box-shadow: inset 0 -4px 0 rgba(71,85,105,.30), inset 0 0 0 2px rgba(255,255,255,.55);
animation: none;
}
@media (prefers-reduced-motion: reduce) { .done-btn.attention { animation: none; } }
/* できたボタンのアイコン：★は黄色く光らせる（押すとヘッダーの星が増える、という意味づけ） */
.done-btn .fa-star {
color: #ffd43b;
filter: drop-shadow(0 0 5px rgba(255,212,59,.75));
}
.done-btn.completed .fa-star { color: #e2e8f0; filter: none; }
/* セクション間の余白をひろげて、章の区切りをはっきりさせる */
.sec-wrap { margin-bottom: 60px; }
/* ══ 汎用：本文の横に置く挿絵（.illust）══
使い方：回り込ませたい段落の「直前」に置く
![]()
キャプション
…
