/* 学ぶ（作り手の手引き）の部品。共通の見た目は ../style.css。
   色は章の1色（--ac）と灰だけ。○×は 青×橙（開発の現場の「追い風／向かい風」と同じ約束）。形でも区別する（色弱対策） */

/* 折り返しは文節で（どの幅でも。語の途中で切らない） */
.ch{word-break:auto-phrase}
.txt{margin-top:12px;font-size:14px;line-height:1.85}
.gl{font-size:12px;color:var(--sub);font-weight:400}   /* 用語のひとこと説明 */
.hl{margin-top:12px;padding:10px 13px 11px;border-radius:10px;background:var(--ac-soft);font-size:13px;font-weight:600;line-height:1.7}
.hl::before{content:"ここが大事";display:block;margin-bottom:2px;font-size:10px;letter-spacing:.14em;font-weight:700;color:var(--ac)}
.note{margin-top:8px;font-size:12px;line-height:1.7;color:var(--sub)}
.note::before{content:"※ "}
.nw{white-space:nowrap}

/* ===== 一覧（learn.html） ===== */
.lessons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:20px}
.lesson{display:flex;flex-direction:column;background:var(--node);border:1px solid var(--line);border-radius:16px;padding:16px 18px;text-decoration:none;transition:border-color .15s}
.lesson:hover{border-color:var(--ac)}
.lesson .n{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--sub);font-weight:600}
.lesson b{margin-top:4px;font-size:17px;font-weight:600;line-height:1.45;color:var(--ac)}
.lesson .d{margin-top:6px;font-size:13px;line-height:1.75;color:var(--sub)}
.lesson .tags{display:flex;flex-wrap:wrap;gap:6px;margin:auto 0 0;padding:12px 0 0;list-style:none}
.lesson .tags li{background:var(--tonal);border-radius:7px;padding:2px 8px;font-size:11px;font-weight:500}
.soon-tag{display:inline-block;margin-left:10px;padding:2px 10px;border-radius:7px;background:var(--tonal);font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--sub);vertical-align:.3em}
.todo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px;margin:16px 0 0;padding:0;list-style:none}
.todo li{display:flex;align-items:baseline;gap:12px;padding:9px 2px;border-bottom:1px solid var(--line);font-size:14px;color:var(--sub)}
.todo .n{flex:none;font-family:var(--mono);font-size:11px;letter-spacing:.08em;font-weight:600}

/* ===== 授業ページ：前後の移動 ===== */
.lnav{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:stretch;margin-top:24px}
.lnav a{display:flex;flex-direction:column;justify-content:center;gap:2px;background:var(--card);border:1px solid color-mix(in srgb,var(--line) 55%,transparent);border-radius:16px;box-shadow:var(--shadow);padding:14px 18px;text-decoration:none;transition:border-color .15s}
.lnav a:hover{border-color:var(--ac)}
.lnav small{font-size:11px;letter-spacing:.08em;color:var(--sub)}
.lnav b{font-size:15px;font-weight:600;line-height:1.45}
.lnav .next{grid-column:2;text-align:right}
.lnav .prev{grid-column:1}
.lnav .list{grid-column:1 / -1;justify-self:center;background:none;border:0;box-shadow:none;padding:4px 12px;font-size:13px;font-weight:500;color:var(--sub);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line)}
.lnav .list:hover{color:var(--ink)}

/* ===== ものづくりの基本 ===== */
/* 01 呼び方 */
.names{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:18px}
.names div{background:var(--tonal);border-radius:12px;padding:10px 14px}
.names b{display:block;font-size:14px;font-weight:600}
.names span{display:block;margin-top:2px;font-size:12px;color:var(--sub)}
/* 01 キーフレームの図：作画は毎コマ、3D はキーだけ（◆）で間は自動（点線の枠） */
.kf{margin-top:4px;background:var(--node);border:1px solid var(--line);border-radius:16px;padding:16px 18px 14px;display:grid;gap:12px}
.kf-row{display:grid;grid-template-columns:132px minmax(0,1fr) 148px;gap:14px;align-items:center}
.kf-k{font-size:13px;font-weight:600}
.kf-row.me .kf-k{color:var(--ac)}
.kf-cells{display:grid;grid-template-columns:repeat(13,minmax(0,1fr));gap:4px}
.kf-cells i{height:24px;border-radius:5px;display:flex;align-items:center;justify-content:center}
.kf-cells .draw{background:color-mix(in srgb,var(--sub) 42%,var(--node))}
.kf-cells .auto{border:1px dashed color-mix(in srgb,var(--sub) 60%,transparent)}
.kf-cells .key::before{content:"";width:12px;height:12px;border-radius:2px;background:var(--ac);transform:rotate(45deg)}
.kf-d{font-size:12px;line-height:1.55;color:var(--sub)}
.kf-lg{display:flex;flex-wrap:wrap;gap:6px 18px;padding-top:10px;border-top:1px solid var(--line);font-size:11px;color:var(--sub)}
.kf-lg span{display:inline-flex;align-items:center;gap:6px}
.kf-lg .k::before{content:"";width:9px;height:9px;border-radius:2px;background:var(--ac);transform:rotate(45deg)}
.kf-lg .a::before{content:"";width:12px;height:12px;border-radius:3px;border:1px dashed var(--sub)}
.kf-lg .d::before{content:"";width:12px;height:12px;border-radius:3px;background:color-mix(in srgb,var(--sub) 42%,var(--node))}

/* 02 工程：3段階。精度のメーターが1→3と上がる。下の U 字の矢印＝前の工程に戻る */
.stages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:24px}
.stg{position:relative;display:flex;flex-direction:column;background:var(--node);border:1px solid var(--line);border-radius:16px;padding:16px 18px}
.stg.key{border-color:var(--ac)}
.stg-h{display:flex;align-items:flex-start;gap:10px}
.stg-h .n{flex:none;display:flex;align-items:center;justify-content:center;width:26px;height:26px;margin-top:1px;border-radius:50%;background:var(--ink);color:var(--card);font-size:13px;font-weight:700}
.stg-h b{display:block;font-size:16px;font-weight:600;line-height:1.4}
.stg-h small{display:block;font-size:12px;font-weight:500;color:var(--sub)}
.stg-what{margin-top:10px;font-size:13px;font-weight:600}
.prec{display:flex;align-items:center;gap:4px;margin-top:8px}
.prec span{margin-right:4px;font-size:10px;letter-spacing:.1em;color:var(--sub)}
.prec i{width:22px;height:6px;border-radius:3px;background:var(--tonal)}
.prec i.on{background:var(--ac)}
.do{margin:12px 0 0;padding:0;list-style:none;font-size:13px;line-height:1.6}
.do li{position:relative;padding:3px 0 3px 14px}
.do li::before{content:"";position:absolute;left:1px;top:11px;width:5px;height:5px;border-radius:50%;background:var(--sub)}
.stg .hl{margin-top:auto}
.stg .do+.hl{margin-top:12px}
.badge{position:absolute;top:-11px;right:14px;padding:2px 10px;border-radius:980px;background:var(--ac);color:var(--card);font-size:11px;font-weight:700;letter-spacing:.02em}
.back{position:relative;height:22px;margin:4px calc(100% / 6) 0}
.back::before{content:"";position:absolute;left:0;right:0;top:0;height:18px;border:1.5px solid var(--sub);border-top:0;border-radius:0 0 12px 12px}
.back::after{content:"";position:absolute;left:-4.5px;top:-6px;border-bottom:8px solid var(--sub);border-left:5.25px solid transparent;border-right:5.25px solid transparent}
.back-t{margin-top:6px;text-align:center;font-size:12px;color:var(--sub)}

/* 03 よくあるミス：重症度は●の数（5段階） */
.mistakes{display:grid;gap:12px;margin-top:22px}
.mis{background:var(--node);border:1px solid var(--line);border-radius:16px;padding:16px 20px 18px}
.mis-h{display:flex;align-items:flex-start;justify-content:space-between;gap:8px 16px;flex-wrap:wrap}
.mis-h b{font-size:16px;font-weight:600;line-height:1.5}
.sev{display:flex;align-items:center;gap:4px;flex:none;margin-top:5px}
.sev-k{margin-right:4px;font-size:11px;letter-spacing:.06em;color:var(--sub)}
.sev i{width:10px;height:10px;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--sub) 70%,transparent)}
.sev i.on{background:var(--ac);border-color:var(--ac)}
.mis-b{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px 28px;margin-top:12px}
.lb{font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--sub)}
.sym{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0;padding:0;list-style:none}
.sym li{background:var(--tonal);border-radius:8px;padding:3px 10px;font-size:13px;line-height:1.6}
.why{margin-top:12px;font-size:13px;line-height:1.8}
.fix{margin:8px 0 0;padding:0;list-style:none;font-size:13px;line-height:1.6}
.fix li{position:relative;padding:4px 0 4px 22px}
.fix li::before{content:"";position:absolute;left:3px;top:9px;width:10px;height:5px;border-left:2px solid var(--ac);border-bottom:2px solid var(--ac);transform:rotate(-45deg)}

/* 04 スケジュール */
.def{margin-top:22px;background:var(--node);border:1px solid var(--line);border-radius:16px;padding:16px 20px 18px}
.def-t{font-size:14px;line-height:1.85}
.def-t b{color:var(--ac)}
.def-l{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:12px 0 0;padding:0;list-style:none}
.def-l li{background:var(--tonal);border-radius:12px;padding:10px 12px;font-size:12px;line-height:1.7;color:var(--sub)}
.def-l b{display:block;margin-bottom:2px;font-size:13px;color:var(--ink)}
.f3w{display:grid;grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr) 28px minmax(0,1fr);margin-top:22px}
.f3{background:var(--tonal);border-radius:16px;padding:14px 16px 16px}
.f3.good{background:var(--ac-soft)}
.f3-k{margin-bottom:10px;font-size:13px;font-weight:700}
.f3.good .f3-k{color:var(--ac)}
.f3 ul{margin:0;padding:0;list-style:none;font-size:13px;line-height:1.6}
.f3 ul li{position:relative;padding:3px 0 3px 13px}
.f3 ul li::before{content:"";position:absolute;left:0;top:11px;width:5px;height:5px;border-radius:50%;background:var(--sub)}
.f3-sum{margin-top:10px;font-size:13px;font-weight:600;line-height:1.6}
.f3-q{margin-top:10px;font-size:12px;line-height:1.6;color:var(--sub)}
.lp{margin:0;padding:0;list-style:none}
.lp li{position:relative;background:var(--card);border-radius:9px;padding:6px 10px;font-size:13px;font-weight:500;text-align:center}
.lp li+li{margin-top:20px}
.lp li+li::before{content:"";position:absolute;left:50%;top:-16px;height:10px;border-left:1.5px solid var(--sub)}
.lp li+li::after{content:"";position:absolute;left:50%;top:-7px;transform:translateX(-4.25px);border-top:6px solid var(--sub);border-left:4.25px solid transparent;border-right:4.25px solid transparent}
.lp-b{margin-top:8px;text-align:center;font-size:11px;color:var(--sub)}
.f3-arr{position:relative}
.f3-arr::before{content:"";position:absolute;left:5px;right:9px;top:50%;border-top:1.5px solid var(--sub)}
.f3-arr::after{content:"";position:absolute;right:4px;top:50%;transform:translateY(-4.5px);border-left:7px solid var(--sub);border-top:4.5px solid transparent;border-bottom:4.5px solid transparent}
.res{margin-top:16px;font-size:14px;line-height:1.85}

/* ===== ゲームの素材はどうつくる？ ===== */
.ex{margin-top:16px}
.flow3{display:grid;grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr) 28px minmax(0,1fr);margin-top:4px}
.fl{background:var(--node);border:1px solid var(--line);border-radius:14px;padding:12px 14px 13px}
.fl.me{border-color:var(--ac);background:var(--ac-soft)}
.fl .who{display:block;font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--sub)}
.fl b{display:block;margin-top:4px;font-size:15px;font-weight:600}
.fl small{display:block;margin-top:4px;font-size:12px;line-height:1.6;color:var(--sub)}
.more-p{margin-top:12px;font-size:13px;line-height:1.8}
.techs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:12px 0 0}
.techs div{background:var(--tonal);border-radius:12px;padding:10px 14px}
.techs dt{font-size:13px;font-weight:600}
.techs dd{margin:3px 0 0;font-size:12px;line-height:1.7;color:var(--sub)}
/* 02 Root：親（Root）と子（骨）の2段 */
.rt{max-width:680px;margin-top:20px}
.rt-row{display:grid;grid-template-columns:72px minmax(0,1fr);gap:4px 14px;align-items:center;background:var(--node);border:1px solid var(--line);border-radius:14px;padding:12px 16px}
.rt-row.root{border-color:var(--ac);background:var(--ac-soft)}
.rt-row>b{grid-row:1 / span 2;font-size:16px;font-weight:700}
.rt-row.root>b{color:var(--ac)}
.rt-row>span{font-size:14px;font-weight:600}
.rt-row>small{font-size:12px;line-height:1.65;color:var(--sub)}
.rt-row>.chips li{font-family:var(--mono);font-size:12px}
.rt-link{display:flex;align-items:center;gap:10px;height:26px;margin-left:51px;padding-left:14px;border-left:1.5px solid var(--sub);font-size:11px;color:var(--sub)}
/* Root モーション：左右で見比べる */
.rm{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:4px}
.rm-p{margin:0;background:var(--node);border:1px solid var(--line);border-radius:16px;padding:14px 16px 16px}
.rm-p.me{border-color:var(--ac)}
.rm-p figcaption{font-size:14px;font-weight:600}
.rm-p.me figcaption{color:var(--ac)}
.rm-p svg{display:block;width:100%;height:auto;margin-top:8px}
.rm-p p{margin-top:8px;font-size:12px;line-height:1.75;color:var(--sub)}
.rm-p p b{color:var(--ink);font-weight:600}
.rm svg .gd{stroke:var(--line);stroke-width:2}
.rm svg .fg *{fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.rm svg .fg.ghost *{stroke:var(--sub);stroke-dasharray:3 3}
.rm svg .mv{fill:none;stroke:var(--sub);stroke-width:1.5;stroke-dasharray:4 3}
.rm svg .mvh{fill:none;stroke:var(--sub);stroke-width:1.5}
.rm svg .mk *{fill:none;stroke:var(--ac);stroke-width:2.2}
.rm svg .mk.old *{stroke-dasharray:2.5 2.5;opacity:.55}
.rm svg .rmv,.rm svg .rmvh{fill:none;stroke:var(--ac);stroke-width:2}
.rm svg .st{fill:var(--ac)}
.rm svg text{font-family:inherit;font-size:11px;font-weight:600;fill:var(--ac)}
.rm svg text.s{font-weight:500;fill:var(--sub)}
.cases{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin-top:14px}
.cases-k{font-size:12px;font-weight:600;color:var(--sub)}

/* ===== 作品集制作のポイント ===== */
.asks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0 0;padding:0;list-style:none}
.asks li{background:var(--tonal);border-radius:10px;padding:8px 12px;font-size:13px}
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:4px}
.trio div{background:var(--node);border:1px solid var(--line);border-radius:14px;padding:16px 12px 14px;text-align:center}
.trio .ti{display:block;width:30px;height:30px;margin:0 auto 8px;color:var(--ac);stroke-width:1.5}
.trio b{display:block;font-size:20px;font-weight:700;color:var(--ac)}
.trio span{display:block;margin-top:4px;font-size:13px;color:var(--sub)}
.ev-h{display:flex;align-items:center;gap:8px;margin-top:22px;font-size:13px;font-weight:700}
/* ○と×：同じ 18px の箱・同じ線の太さ（形と色の両方で見分ける） */
.okng{flex:none;width:18px;height:18px;fill:none;stroke-width:2.2;stroke-linecap:round}
.okng-o{stroke:var(--c-blue)}.okng-x{stroke:var(--c-coral)}
.eval{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:10px;background:var(--node);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.ev-col{padding:14px 18px 16px;min-width:0}
.ev-col+.ev-col{border-left:1px solid var(--line)}
.ev-col h3{margin:0 0 8px;font-size:14px;font-weight:600}
.ev-col ul{margin:0;padding:0;list-style:none;font-size:13px;line-height:1.6}
.ev-col li{position:relative;padding:3px 0 3px 15px}
.ev-col li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:50%;border:1.5px solid var(--c-blue)}
.ev-col li small{display:block;font-size:12px;color:var(--sub);line-height:1.5}
.ng{margin-top:10px;background:var(--node);border:1px solid var(--line);border-radius:16px;padding:14px 18px 16px}
.ng .chips li{font-weight:500}
.ng-n{margin-top:10px;font-size:13px;font-weight:600}
.ideas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:22px}
.idea{display:flex;flex-direction:column;background:var(--node);border:1px solid var(--line);border-radius:16px;padding:14px 16px 16px}
.idea-h{display:flex;align-items:center;gap:10px}
.idea-h .ico{width:30px;height:30px;border-radius:9px}
.idea-h .ico .ic{width:17px;height:17px}
.idea .n{font-family:var(--mono);font-size:11px;letter-spacing:.1em;font-weight:600;color:var(--sub)}
.idea b{display:block;margin-top:10px;font-size:15px;font-weight:600;line-height:1.5}
.idea ul{margin:8px 0 0;padding:0;list-style:none;font-size:13px;line-height:1.6}
.idea li{position:relative;padding:3px 0 3px 13px}
.idea li::before{content:"";position:absolute;left:0;top:11px;width:5px;height:5px;border-radius:50%;background:var(--sub)}
.idea .hl{margin-top:auto}
.idea ul+.hl{margin-top:12px}
.idea.key{border-color:var(--ac)}

/* ===== スマホ ===== */
@media (max-width:720px){
  .lessons{grid-template-columns:1fr}
  .todo{grid-template-columns:1fr}
  .lnav{margin:20px 20px 0;gap:10px}
  .lnav a{padding:12px 14px}
  .lnav b{font-size:14px}
  .names{grid-template-columns:1fr;gap:6px}
  .names div{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
  .names span{margin:0}
  .kf{padding:14px}
  .kf-row{grid-template-columns:1fr;gap:6px}
  .kf-d br{display:none}
  .stages{grid-template-columns:1fr;gap:18px}
  .back{display:none}
  .back-t{margin-top:12px;text-align:left}
  .back-t::before{content:"↺ "}
  .mis{padding:14px 16px 16px}
  .mis-b{grid-template-columns:1fr}
  .def{padding:14px 16px 16px}
  .def-l{grid-template-columns:1fr}
  .f3w,.flow3{grid-template-columns:1fr}
  .f3-arr{height:28px}
  .f3-arr::before{left:50%;right:auto;top:5px;bottom:10px;border-top:0;border-left:1.5px solid var(--sub)}
  .f3-arr::after{right:auto;left:50%;top:auto;bottom:3px;transform:translateX(-4.5px);border-left:4.5px solid transparent;border-right:4.5px solid transparent;border-top:7px solid var(--sub);border-bottom:0}
  .techs{grid-template-columns:1fr}
  .rt-row{grid-template-columns:56px minmax(0,1fr);padding:12px 14px}
  .rt-link{margin-left:42px}
  .rm{grid-template-columns:1fr;gap:10px}
  .rm-p{padding:12px 14px 14px}
  .asks{grid-template-columns:1fr}
  .trio{gap:6px}
  .trio div{padding:12px 6px}
  .trio b{font-size:17px}
  .trio span{font-size:12px}
  .eval{grid-template-columns:1fr}
  .ev-col+.ev-col{border-left:0;border-top:1px solid var(--line)}
  .ideas{grid-template-columns:1fr}
}