*{box-sizing:border-box}
:root{
  --ground:#FFFFFF; --soft:#F5F5F5; --bar:#1A1A1A; --bar-ink:#FFFFFF;
  --ink:#1A1A1A; --muted:#6A6F78; --hair:#E8E8E8;
  --accent:#154BA3; --accent-2:#00ADEF; --deep:#081F53;
  --geo:"Jost","Futura","Century Gothic",system-ui,sans-serif;
  --sans:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,system-ui,sans-serif;
  --maxw:1180px; --measure:680px; color-scheme:light;
}
html,body{margin:0}
body{background:var(--ground);color:var(--ink);font-family:var(--sans);
  font-weight:300;font-size:var(--fs-m);line-height:1.95;font-feature-settings:"palt" 1;
  -webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;font-weight:400}
p{margin:0 0 1.15em}p:last-child{margin-bottom:0}
img{display:block;max-width:100%}
a{color:inherit}
figure{margin:0}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.narrow{max-width:820px;margin:0 auto;padding:0 24px}

/* ヘッダー（共通） */
.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:60;
  background:var(--bar);color:var(--bar-ink)}
.bar .wrap{display:flex;align-items:center;gap:26px;height:84px}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--geo);
  font-size:var(--fs-m);letter-spacing:.18em;font-weight:500;white-space:nowrap;text-decoration:none}
.mk{width:31px;height:28px;flex:none}
.bar nav{margin-left:auto}
.bar nav ul{display:flex;gap:2px;list-style:none;margin:0;padding:0}
.bar nav a{opacity:.6;font-size:var(--fs-s);font-weight:300;letter-spacing:.05em;
  padding:8px 12px;text-decoration:none;display:block;white-space:nowrap}
.bar nav a:hover{opacity:1}
.bar nav a[aria-current]{opacity:1;color:var(--accent-2)}

/* キャッチ（共通） */
.catch{font-size:clamp(20px,2.5vw,30px);font-weight:300;letter-spacing:.1em;
  line-height:1.7;margin-top:18px}
.catch.mid{margin:0 0 44px;text-align:center}
.catch span{display:block}

/* フッター（共通）。名乗り＋一言＋導線を左、目次を右の3列に置く */
.foot{background:var(--bar);color:var(--bar-ink);padding:88px 0 0;font-size:var(--fs-s);
  border-top:3px solid var(--accent)}
.foot .wrap{display:grid;grid-template-columns:minmax(260px,1fr) 1.5fr;gap:64px;
  align-items:start}
.foot .brand{font-size:var(--fs-m)}
.foot .fsay{margin:30px 0 0;font-size:clamp(22px,2.4vw,30px);line-height:1.5;
  color:var(--bar-ink);letter-spacing:.16em;font-weight:300}
.foot .fcta{display:inline-block;margin-top:28px;padding:13px 30px;
  border:1px solid var(--accent-2);color:var(--accent-2);text-decoration:none;
  font-size:var(--fs-s);letter-spacing:.1em;border-radius:999px;
  transition:background .25s,color .25s}
.foot .fcta:hover{background:var(--accent-2);color:#0B0E11}

.foot .fcols{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 28px}
.foot .fcol{min-width:0}
.foot .fh{font-size:var(--fs-s);letter-spacing:.24em;color:#79838E;
  padding-bottom:12px;margin-bottom:6px;border-bottom:1px solid #2A2F35}
.foot .fcol a{display:block;padding:9px 0;text-decoration:none;font-size:var(--fs-s);
  color:#D2D8DE;letter-spacing:.03em;transition:color .2s}
.foot .fcol a:hover{color:var(--accent-2)}

.foot .fbot{display:flex;flex-wrap:wrap;gap:16px 32px;align-items:baseline;
  margin-top:76px;padding:24px 24px 34px;border-top:1px solid #2A2F35}
.foot .co{font-size:var(--fs-s);letter-spacing:.04em;color:#79838E}
.foot .grp{margin-left:auto;font-size:var(--fs-s);letter-spacing:.1em;color:#79838E}
.foot .grp a{color:#AEB7C0;text-decoration:none;border-bottom:1px solid #3A4048}
.foot .grp a:hover{color:var(--accent-2)}

@media(max-width:860px){
  .foot{padding-top:64px}
  .foot .wrap{grid-template-columns:1fr;gap:48px}
  .foot .fcols{grid-template-columns:1fr 1fr;gap:34px 24px}
  .foot .fbot{margin-top:56px}
  .foot .grp{margin-left:0}
}
@media(max-width:480px){ .foot .fcols{grid-template-columns:1fr} }

@media(max-width:1080px){ .bar nav a{font-size:var(--fs-s);padding:8px 9px} }
/* ── 引き出し（900px 以下） ────────────────────────────
   横並びが入らない幅では、バーを隠して引き出しに替える。
   隠すだけにすると、スマホからサイト内を移動する手段が無くなる。 */
.menu{display:none}
.menu summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;
  padding:10px 4px 10px 14px;color:var(--bar-ink);font-size:var(--fs-s);letter-spacing:.08em}
.menu summary::-webkit-details-marker{display:none}
.menu summary:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}
.menu .bars{position:relative;width:22px;height:2px;background:currentColor;
  display:block;transition:background .2s}
.menu .bars::before,.menu .bars::after{content:"";position:absolute;left:0;width:22px;height:2px;
  background:currentColor;transition:transform .2s}
.menu .bars::before{top:-7px}
.menu .bars::after{top:7px}
.menu[open] .bars{background:transparent}
.menu[open] .bars::before{transform:translateY(7px) rotate(45deg)}
.menu[open] .bars::after{transform:translateY(-7px) rotate(-45deg)}
.menu .drop{position:absolute;left:0;right:0;top:100%;background:var(--bar);
  border-top:1px solid #2A2F35;padding:8px 0 18px;
  max-height:calc(100vh - 70px);overflow-y:auto;-webkit-overflow-scrolling:touch}
.menu .drop ul{list-style:none;margin:0;padding:0}
.menu .drop a{display:block;padding:15px 24px;color:var(--bar-ink);text-decoration:none;
  font-size:var(--fs-m);letter-spacing:.04em;border-bottom:1px solid #22272D}
.menu .drop a[aria-current]{color:var(--accent-2)}
.menu .drop li:last-child a{border-bottom:0}

@media(max-width:900px){
  .bar nav{display:none}
  .bar .wrap{height:70px;position:relative}
  .menu{display:block;margin-left:auto}
}
@media(prefers-reduced-motion:reduce){
  .menu .bars,.menu .bars::before,.menu .bars::after{transition:none}
}

/* ヒーロー */
.hero{min-height:78vh;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;padding:76px 0 90px;background:var(--soft)}
.hero h1{line-height:1.1}
.hero h1 .en{display:block;font-family:var(--geo);font-weight:500;
  font-size:clamp(44px,9.4vw,118px);letter-spacing:.075em;text-indent:.075em}
.hero h1 .ja{display:block;font-weight:400;
  font-size:clamp(26px,4.6vw,54px);letter-spacing:.14em;text-indent:.14em}
.hero h1 .ja.above{margin-bottom:.34em}
.hero h1 .ja.below{margin-top:.30em}
.hero .rule{width:52px;height:2px;background:var(--accent);margin:34px auto 0}
.hero .shot{max-width:880px;width:100%;margin:56px auto 0;padding:0 24px}

/* セクション */
.sec{padding:120px 0;border-top:1px solid var(--hair)}
.sec:first-of-type{border-top:0}
.sec.soft{background:var(--soft)}
.sec.dark{background:var(--bar);color:var(--bar-ink);border-top:0}
.sec-title{font-family:var(--geo);font-weight:300;font-size:clamp(27px,3.6vw,44px);
  letter-spacing:.005em;line-height:1.25;margin-bottom:14px}
.sec-title.ja{font-family:var(--sans);font-weight:300;letter-spacing:.06em}
.sec-jp{font-size:var(--fs-s);letter-spacing:.2em;color:var(--muted);margin-bottom:52px;max-width:58em;word-break:auto-phrase}
.sec-jp b{color:var(--accent);font-weight:400}
.sec.dark .sec-jp{color:#9AA3AD}
.sec-lead{font-size:clamp(17px,1.8vw,20px);font-weight:200;line-height:2.15;
  max-width:27em;margin:0 0 56px;word-break:auto-phrase;text-wrap:pretty}
.center{text-align:center}
.center .sec-lead{margin-left:auto;margin-right:auto}

/* 数値 */
.figures{display:grid;grid-template-columns:1fr 1fr;gap:64px 56px;margin-top:8px}
.fig{text-align:center}
.fig-v{font-family:var(--geo);font-weight:200;font-size:clamp(42px,6.2vw,76px);
  line-height:1;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.fig-v.sm{font-size:clamp(28px,3.8vw,46px)}
.fig-v small{font-size:max(var(--fs-s),.42em);font-weight:300;margin-left:.12em;letter-spacing:.02em}
/* 単位は数字への比で決めない。狭い画面ほど小さくなり、16px を割る */
.fig-k{margin-top:16px;font-size:var(--fs-s);letter-spacing:.18em}
.fig-n{margin-top:10px;font-size:var(--fs-s);line-height:1.9;color:var(--muted);
  word-break:auto-phrase;max-width:26em;margin-left:auto;margin-right:auto}
.fig-id{display:inline-block;margin-top:10px;font-family:var(--geo);font-size:var(--fs-s);letter-spacing:.12em;color:var(--accent);text-decoration:none;border-bottom:1px solid transparent}
.fig-id:hover{border-bottom-color:var(--accent)}
/* 「仕様値」は台帳の行を持たない。ID リンクと同じ見た目にすると、
   押せると思わせてしまう（2026-09-21 指摘）。色も下線も外す */
.fig-spec{display:inline-block;margin-top:10px;font-size:var(--fs-s);
  letter-spacing:.06em;color:var(--muted)}
/* 本文中の台帳リンク。暗い節の note の中でも読めるようにしておく */
.nlink{font-family:var(--geo);letter-spacing:.10em;color:var(--accent);
  text-decoration:none;border-bottom:1px solid rgba(255,255,255,.28)}
.nlink:hover{border-bottom-color:var(--accent)}

/* 手順 */
.steps{display:grid;grid-template-columns:1fr 1fr;gap:52px 56px}
.step{border-top:1px solid var(--hair);padding-top:22px}
.step .n{font-family:var(--geo);font-size:var(--fs-s);letter-spacing:.24em;color:var(--accent)}
.step h3{margin:14px 0 8px;font-size:var(--fs-m);font-weight:400;letter-spacing:.04em}
.step p{font-size:var(--fs-s);line-height:1.95;color:var(--muted);margin:0;word-break:auto-phrase}

/* 行リスト */
.rows{border-top:1px solid var(--hair)}
.row{display:flex;align-items:baseline;gap:20px;padding:26px 0;border-bottom:1px solid var(--hair)}
.row .t{flex:1 1 auto;min-width:0}
.row .t b{display:block;font-weight:400;font-size:var(--fs-m);letter-spacing:.03em}
.row .t span{display:block;margin-top:7px;font-size:var(--fs-s);color:var(--muted);line-height:1.85;word-break:auto-phrase;max-width:46em}
.row .k{flex:none;font-family:var(--geo);font-size:var(--fs-s);letter-spacing:.14em;color:var(--muted)}
.row .k.on{color:var(--accent)}

/* POC 表 */
.poc-g{padding-top:36px}
.poc-h{font-size:var(--fs-s);letter-spacing:.24em;color:var(--muted);
  margin:64px 0 18px;padding-bottom:10px;border-bottom:1px solid var(--hair)}
.poc-h:first-child{margin-top:36px}
.pcg{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--hair);
  border:1px solid var(--hair)}
/* 枠線は隙間の色で描く。セル側に罫線を引くと、最終行の
   埋まっていないところにだけ線が残って、空箱があるように見える */
.poc-r{display:flex;align-items:center;gap:20px;padding:22px 0;border-bottom:1px solid var(--hair)}
.poc-r .t{flex:1 1 auto;min-width:0}
.poc-r .t b{display:block;font-weight:400;font-size:var(--fs-m);letter-spacing:.03em}
.poc-r .t span{display:block;margin-top:6px;font-size:var(--fs-s);color:var(--muted)}
.tag{flex:none;font-size:var(--fs-s);letter-spacing:.12em;padding:7px 16px;border-radius:999px;
  border:1px solid var(--hair);color:var(--muted);white-space:nowrap}
.tag.open{border-color:var(--accent);color:var(--accent)}
.tag.run{border-color:var(--ink);color:var(--ink)}
.tag.done{border-color:var(--ink);color:var(--ink);background:var(--ink);color:#fff}

/* 保留中 */
.held{border-left:2px solid var(--accent);padding:4px 0 4px 26px;max-width:var(--measure)}
.held+.held{margin-top:46px}
.held h3{font-size:var(--fs-m);font-weight:400;letter-spacing:.04em;margin-bottom:12px}
.held p{font-size:var(--fs-s);line-height:2;color:var(--muted);word-break:auto-phrase}
.held .q{margin-top:18px;font-family:var(--geo);font-size:var(--fs-s);letter-spacing:.14em;color:var(--accent)}

/* 写真 */
.band{margin:104px 0 0;background:var(--soft);overflow:hidden}
.band img{width:100%;height:auto}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:32px}
/* 写真は枠を揃える。
   縦位置と横位置が混ざると、右側だけ早く終わって大きな空きができ、
   説明文の行も揃わない。写真そのものの比率は撮った人の都合で、
   並べたときの見え方とは関係がない。枠を固定して、はみ出しは切る。 */
.ph{overflow:hidden;margin:0}
.ph img{width:100%;aspect-ratio:4/3;height:auto;object-fit:cover;
  display:block;background:var(--soft)}
/* 1枚だけ大きく見せるものは、切らずに元の比率のまま置く */
.ph.free img{aspect-ratio:auto;object-fit:contain}
/* 枠を揃えたら、説明文の位置も揃える。
   1行のものと2行のものが混ざると、下の段の頭がずれる */
.duo,.roots{align-items:start}
.ph figcaption{min-height:3.8em}
.shot figcaption,.ph figcaption{margin-top:14px;font-size:var(--fs-s);color:var(--muted);
  letter-spacing:.04em;line-height:1.9;word-break:auto-phrase;max-width:42em}

/* 動画タイル */
.vids{display:grid;grid-template-columns:repeat(4,1fr);gap:28px 24px}
.vids.three{grid-template-columns:repeat(3,1fr);gap:34px 26px}
.vids.four{grid-template-columns:repeat(4,1fr);gap:34px 24px}
.vids.six{grid-template-columns:repeat(6,1fr);gap:20px 16px}
.vid .box{position:relative}
.vid{display:block}
.vid-l{display:block;text-decoration:none;color:inherit}
/* 一枚目は 4:3 で届く。上下の黒帯を切って 16:9 に収める */
.vid .box img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .4s,opacity .3s}
.vid-l:hover .box img{transform:scale(1.03);opacity:.8}
/* 再生マークは画の上に乗る。線だけだと明るい画に負ける。丸を敷く */
.vid .play{position:relative;z-index:1;width:58px;height:58px;border:0;
  border-radius:50%;background:rgba(10,14,18,.55);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
  display:flex;align-items:center;justify-content:center;margin:0;
  transition:background .25s,transform .25s}
.vid .play::after{content:"";width:0;height:0;border-left:18px solid #fff;
  border-top:12px solid transparent;border-bottom:12px solid transparent;
  margin-left:4px}
.vid-l:hover .play{background:var(--accent-2);transform:scale(1.06)}
@media(prefers-reduced-motion:reduce){.vid .play{transition:none}}

.vid .len{z-index:1}
@media(prefers-reduced-motion:reduce){.vid .box img{transition:none}}
.vid .box{aspect-ratio:16/9;position:relative;background:#101418;border:1px solid #232A31;
  display:flex;align-items:center;justify-content:center;transition:border-color .3s}
.vid-l:hover .box{border-color:var(--accent-2)}

.vid b{display:block;margin-top:14px;font-size:var(--fs-s);font-weight:400;letter-spacing:.03em;line-height:1.7}
.vid span{display:block;margin-top:6px;font-size:var(--fs-s);letter-spacing:.16em;color:#9AA3AD}

/* CTA */
.pill{display:inline-block;border:1px solid var(--accent);color:var(--accent);
  border-radius:999px;padding:17px 44px;font-size:var(--fs-s);letter-spacing:.14em;
  text-decoration:none;transition:background .25s,color .25s}
.pill:hover{background:var(--accent);color:#fff}
/* 本文の一行の長さを抑える。日本語は全角 35〜45 字を超えると急に読みにくい */
.note{margin-top:34px;font-size:var(--fs-s);color:var(--muted);line-height:2;
  word-break:auto-phrase;max-width:44em}
.center .note{margin-left:auto;margin-right:auto}

/* POC カタログ */
.pc{background:var(--ground);padding:20px 18px 18px;
  border-right:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.pc b{display:block;font-weight:400;font-size:var(--fs-s);letter-spacing:.03em}
.pc i{display:inline-block;margin-top:11px;font-style:normal;font-size:var(--fs-s);
  letter-spacing:.1em;padding:4px 11px;border-radius:999px;border:1px solid var(--hair);color:var(--muted)}
.pc span{display:block;margin-top:9px;font-family:var(--geo);font-size:var(--fs-s);
  letter-spacing:.08em;color:var(--muted);word-break:auto-phrase}
.pc span a{color:var(--accent);text-decoration:none;margin-right:6px}
.pc span a:hover{text-decoration:underline}
/* 目を引く順は 募集中 > 実施中 > 終了。
   以前は「終了」が黒の塗りつぶしで一番目立っていた。
   探しているのは募集している作目のほうなので、逆だった */
.pc.open i,.pc.re_open i{background:var(--accent);border-color:var(--accent);color:#fff}
.pc.maker i{border-color:var(--accent);color:var(--accent)}
.pc.running i{border-color:var(--ink);color:var(--ink)}
.pc.done i{border-color:var(--hair);color:var(--muted);background:none}
.pc.germ i{border-color:#B9C3CF;color:#6C7783}
.pc.noeffect i,.pc.unclear i{border-color:var(--hair);color:var(--muted)}

/* 未配置の写真枠 */
.slot{width:100%;max-width:100%;overflow:hidden}
.slot-in{width:100%;height:100%;border:1px dashed var(--accent);background:#F7F9FC;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
  text-align:center;padding:20px}
.slot-t{font-size:var(--fs-s);letter-spacing:.2em;color:var(--accent)}
.slot-f{font-size:var(--fs-s);color:var(--muted);word-break:break-all;max-width:92%}
.slot figcaption{margin-top:14px;font-size:var(--fs-s);color:var(--muted);line-height:1.9}

/* 根の並び */
.roots{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 28px}
.ph.wide{max-width:none;margin-top:64px}
.ph.wide img{width:100%;height:auto}
.ph figcaption .p-row{display:inline-block;margin-left:12px;font-family:var(--geo);
  font-size:var(--fs-s);letter-spacing:.1em;color:var(--accent);text-decoration:none;
  border-bottom:1px solid transparent}
.ph figcaption .p-row:hover{border-bottom-color:var(--accent)}
.ph figcaption .p-ref{display:inline-block;margin-left:12px;font-size:var(--fs-s);color:var(--muted)}
.roots>*,.duo>*,.vids>*,.pcg>*,.figures>*,.steps>*{min-width:0}

/* 動画の下段 */
.sub-h{margin:76px 0 24px;font-size:var(--fs-s);letter-spacing:.24em;color:#9AA3AD;
  padding-bottom:10px;border-bottom:1px solid #2A2F35}
.vid .len{position:absolute;right:8px;bottom:8px;font-family:var(--geo);font-size:var(--fs-s);
  letter-spacing:.06em;color:#CBD3DB;background:rgba(0,0,0,.6);padding:2px 7px;border-radius:3px}
.vids-ids{display:block;margin-top:8px}
.vids-ids a{font-family:var(--geo);font-size:var(--fs-s);letter-spacing:.1em;color:var(--accent-2);
  text-decoration:none;margin-right:9px}
.vids-ids a:hover{text-decoration:underline}
.vid.sm b{font-size:var(--fs-s)}
.vid .cap{display:block;margin-top:8px;font-size:var(--fs-s);color:#8C949C;line-height:1.9}
.pending{border:1px dashed #39424C;padding:18px 20px;color:#9AA3AD;font-size:var(--fs-s);line-height:2}
.pill.on-dark{border-color:var(--accent-2);color:var(--accent-2)}
.pill.on-dark:hover{background:var(--accent-2);color:#0B0E11}

/* コア写真 → 数値のスライド */
.slide{display:grid;margin-top:8px;overflow:hidden}
.slide>*{grid-area:1/1;min-width:0}
.slide-core{display:flex;justify-content:center;align-items:center;padding:8px 0 24px}
.slide-core img{max-width:520px;width:100%;height:auto}
/* コア写真。数値の下に置いて動かさない */
.core-shot figcaption{margin-top:18px;font-size:var(--fs-s);line-height:2;color:var(--muted);
  word-break:auto-phrase;max-width:36em;margin-left:auto;margin-right:auto;text-align:left}
.core-shot{margin:72px auto 0;max-width:560px;padding:0 8px}
.core-shot img{width:100%;height:auto}

/* 動き（molecule-code.com と同一） */
.js .rv{opacity:0;transform:translateY(14px);transition:opacity .9s,transform .9s}
.js .rv.in{opacity:1;transform:none}
@keyframes slowzoom{0%{transform:scale(1)}100%{transform:scale(1.06)}}
.zoom img{animation:slowzoom 11s ease-in-out infinite alternate;transform-origin:50% 50%;will-change:transform}
.zoom.d2 img{animation-delay:-3.7s}
.zoom.d3 img{animation-delay:-7.4s}
@media(prefers-reduced-motion:reduce){
  .js .rv{opacity:1;transform:none;transition:none}
  .zoom img{animation:none}
}

@media(max-width:1000px){ .vids{grid-template-columns:repeat(3,1fr)}
  .vids.six{grid-template-columns:repeat(3,1fr)} .vids.three{grid-template-columns:repeat(2,1fr)}
  .vids.four{grid-template-columns:repeat(2,1fr)} .pcg{grid-template-columns:repeat(3,1fr)} }
@media(max-width:900px){
  .roots{grid-template-columns:1fr 1fr}
  .figures{gap:52px 32px}
  .steps{gap:44px 32px}
  .bar nav{display:none}
  .sec{padding:84px 0}
  .band{margin-top:64px}
}
@media(max-width:560px){
  .duo{grid-template-columns:1fr}
  .roots{grid-template-columns:1fr}
  .figures{grid-template-columns:1fr;gap:46px}
  .steps{grid-template-columns:1fr;gap:38px}
  .vids{grid-template-columns:1fr 1fr}
  .vids.six{grid-template-columns:1fr 1fr}
  .vids.four{grid-template-columns:1fr 1fr}
  .vids.three{grid-template-columns:1fr}
  .pcg{grid-template-columns:1fr 1fr}
  .bar .wrap{height:70px}
  .row,.poc-r{flex-direction:column;align-items:flex-start;gap:12px}
  .hero .shot{padding:0}
  .hero .shot figcaption{padding:0 20px}
}