@charset "UTF-8";
/* ============================================================
   クムクムの組み立て方（buildup/）専用スタイル
   ページは tools/build-buildup.ps1 で生成する（HTML を直接直さない）
   色・文字はくむすた Web 教材（learn/course.css）に合わせている
   ============================================================ */
:root{
  --ink:#111;--mid:#5f5f5b;--pale:#999994;--line:#d9d9d4;--off:#f3f3f0;--paper:#fff;
  --accent:#ff8c1a;--accent-soft:#fff3e6;--ok:#2a9d5c;--ok-soft:#eaf6ef;--warn:#d42d2d;--warn-soft:#fdeeee;
  --serif:"Noto Serif JP","Yu Mincho",serif;--sans:"Noto Sans JP","Yu Gothic",sans-serif;--mono:"Roboto Mono",monospace;
  --max:1040px;--gut:clamp(16px,4vw,40px);
}
*,*:before,*:after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:var(--paper);color:var(--ink);font:15px/2 var(--sans);letter-spacing:.03em;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3{line-height:1.5;letter-spacing:.02em}

/* ヘッダー：2026-10-15 サイト共通のヘッダー（.hd、css/qumcum-base.css と js/site.js）に変更。
   .hd は画面の上に固定（高さ 64px）なので、その分だけ本文を下げる。
   このファイルは --max・--gut を組み立て方用に上書きしているので、ヘッダーの幅はほかのページ（共通 CSS の値）に戻す */
body{padding-top:64px}
.hd__in{max-width:1400px;padding-inline:clamp(24px,4.6vw,72px)}
/* 共通 CSS が ul の点を消しているので、組み立て方の箇条書き（よういするもの・目次の注意）は点を戻す */
.need ul,.toc__notes ul{list-style:disc}
.crumb{max-width:var(--max);margin:22px auto 0;padding:0 var(--gut);color:var(--pale);font-size:13px}
.crumb a{text-decoration:underline;text-underline-offset:.2em}

/* ステップの並び（全ページ共通） */
.stepper{max-width:var(--max);margin:18px auto 0;padding:0 var(--gut)}
.stepper ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.stepper a{display:block;min-width:40px;padding:3px 10px;border:1px solid var(--line);color:var(--mid);font:500 13px/1.8 var(--mono);text-align:center;transition:border-color .2s}
.stepper a:hover{border-color:#111;color:#111}
.stepper a.is-past{border-color:#111;color:#111}
.stepper a[aria-current]{background:#111;border-color:#111;color:#fff}

/* 見出し */
.bu{max-width:var(--max);margin:auto;padding:0 var(--gut) 20px}
.hero{margin-top:28px}
.hero__kicker{margin:0 0 6px;color:var(--pale);font:500 13px var(--mono);letter-spacing:.14em}
.hero h1{margin:0;font:700 clamp(22px,3.6vw,34px)/1.45 var(--serif)}
.hero__lead{margin:12px 0 0;color:var(--mid)}
.badge{display:inline-block;margin-left:10px;padding:0 10px;background:var(--accent);color:#fff;font:700 12px/1.9 var(--sans);letter-spacing:.06em;vertical-align:middle;white-space:nowrap}
.hero__model{margin:14px 0 0;padding:10px 14px;border-left:4px solid var(--accent);background:var(--accent-soft);font-size:14px}

/* よういするもの */
.need{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;margin-top:26px;border:1px solid var(--accent);background:var(--accent-soft)}
.need__body{padding:18px 20px}
.need__label{margin:0 0 6px;font:700 13px var(--mono);letter-spacing:.14em;color:var(--accent)}
.need ul{margin:0;padding-left:1.3em}
.need li{margin:.15em 0}
.need__img{display:block;background:#fff}
.need__img img{display:block;width:100%}

/* 手順 */
.ops{list-style:none;margin:34px 0 0;padding:0}
.ops__h{margin:44px 0 0;padding:0 0 .4em;border-bottom:2px solid #111;font-size:20px;font-weight:700}
.ops__h + .op{border-top:0}
.op{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);grid-template-areas:"pic txt";gap:16px 26px;align-items:start;padding:22px 0;border-top:1px solid var(--line)}
.op__txt{grid-area:txt;display:flex;gap:14px;align-items:flex-start}
.op__pic{grid-area:pic;display:grid;gap:8px}
.op--multi{grid-template-columns:1fr;grid-template-areas:"txt" "pic"}
.op--multi .op__pic{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.op__no{flex:none;width:34px;height:34px;border-radius:50%;background:#111;color:#fff;font:700 15px/34px var(--mono);text-align:center}
.op__no--sub{background:transparent;border:1px solid var(--line);color:var(--pale);line-height:32px}
.op__no--sub:before{content:"＋";font-size:13px}
.op__body p{margin:2px 0 0;font-size:16px;line-height:1.9}
.op__body .note{margin-top:8px;color:var(--mid);font-size:13px;line-height:1.8}
.op--warn .op__body{padding:10px 14px;border-left:4px solid var(--warn);background:var(--warn-soft)}
.op--warn .op__body:before{content:"注意";display:block;color:var(--warn);font:700 12px var(--sans);letter-spacing:.14em}
.op--warn .op__body .note{color:var(--warn)}
.zoom{display:block;position:relative;border:1px solid var(--line);background:#fff;cursor:zoom-in;overflow:hidden}
.zoom img{display:block;width:100%;transition:transform .3s}
.zoom:hover img{transform:scale(1.02)}

/* できあがり */
.done{margin-top:30px;border:1px solid var(--ok);background:var(--ok-soft)}
.done__img{display:block;border-bottom:1px solid var(--ok)}
.done__img img{display:block;width:100%}
.done__body{padding:16px 20px}
.done__label{margin:0;color:var(--ok);font:700 13px var(--mono);letter-spacing:.14em}
.done__body p{margin:4px 0 0;font-size:17px;font-weight:700}

/* 完成のあと */
.after{margin-top:40px}
.after h2{margin:0 0 6px;font-size:20px}
.after__lead{margin:0 0 14px;color:var(--mid);font-size:14px}
.after__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:12px}
.after__grid a{display:block;padding:16px 18px;border:1px solid var(--line);transition:border-color .2s}
.after__grid a:hover{border-color:#111}
.after__grid b{display:block;font-size:15px}
.after__grid span{display:block;margin-top:4px;color:var(--mid);font-size:13px;line-height:1.7}

/* 前後ナビ */
.pn{max-width:var(--max);margin:36px auto 0;padding:0 var(--gut);display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pn a{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border:1px solid var(--line);transition:border-color .2s}
.pn a:hover{border-color:#111}
.pn a span{color:var(--pale);font:500 12px var(--mono);letter-spacing:.1em}
.pn a b{font-size:14px;font-weight:500;line-height:1.5}
.pn__next{text-align:right;align-items:flex-end}

/* 目次 */
.toc__intro{margin-top:28px;display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:26px;align-items:center}
.toc__intro h1{margin:0;font:700 clamp(24px,4vw,38px)/1.4 var(--serif)}
.toc__intro p{margin:14px 0 0;color:var(--mid)}
.toc__intro img{display:block;width:100%;border:1px solid var(--line)}
/* 2026-10-15 目次の右は完成写真をやめて組み立て動画（techspec.html の製品ページと同じ動画） */
.toc__video{margin:0}
.toc__video video{display:block;width:100%;aspect-ratio:16/9;border:1px solid var(--line);background:#000}
.toc__video figcaption{margin-top:6px;color:var(--pale);font:500 12px var(--mono);letter-spacing:.1em}
/* 動画には通信機が映っているが、今の製品には付かない（10/14 に組み立て方・スタートガイドから通信機を外した）ことの注意 */
.toc__intro .toc__video-note{margin:4px 0 0;color:var(--warn);font-size:13px;font-weight:700;line-height:1.7}
.toc__start{display:inline-block;margin-top:18px;padding:12px 24px;background:#111;color:#fff;font-weight:500;letter-spacing:.08em}
.toc__start:hover{opacity:.8}
.toc__notes{margin:28px 0 0;padding:14px 18px;border:1px solid var(--line);background:var(--off);font-size:14px;line-height:1.9}
.toc__notes ul{margin:0;padding-left:1.3em}
.toc{list-style:none;margin:34px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:14px}
.toc a{display:block;height:100%;border:1px solid var(--line);transition:border-color .2s}
.toc a:hover{border-color:#111}
.toc img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border-bottom:1px solid var(--line)}
.toc__body{display:block;padding:10px 14px 14px}
.toc__no{display:block;color:var(--pale);font:500 12px var(--mono);letter-spacing:.12em}
.toc__ttl{display:block;margin-top:2px;font-weight:700;line-height:1.6}
.toc .badge{margin:6px 0 0}

/* 写真の拡大表示 */
.lb{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(0,0,0,.86);cursor:zoom-out}
.lb.is-open{display:flex}
.lb img{max-width:100%;max-height:100%;width:auto;height:auto;background:#fff}
.lb__close{position:absolute;top:10px;right:14px;color:#fff;font-size:30px;line-height:1}

.cf{max-width:var(--max);margin:50px auto 0;padding:24px var(--gut) 40px;border-top:1px solid var(--line);color:var(--pale);font-size:12px;line-height:2}
.cf a{text-decoration:underline;text-underline-offset:.2em}

@media(max-width:760px){
  .op{grid-template-columns:1fr;grid-template-areas:"txt" "pic"}
  .need{grid-template-columns:1fr}
  .toc__intro{grid-template-columns:1fr}
}
@media(max-width:560px){
  .pn{grid-template-columns:1fr}
}