/* ================================================================
   開発工房（/studio/）のプロダクトの見た目（2026-10-01）
   ----------------------------------------------------------------
   プロダクトのページ（/studio/<slug>/。殻は記事の雛形）と、開発工房のトップの一覧の両方で読む。
   色・字・角丸はサイトのトークン（--blue・--warm・--band-*・--r-*）だけを使う。
   作るのは admin/publish.php（build_product_page・ox_pd_showcase・ox_product_card）。
   動き（デモの起動・箱を回す・絞り込み）は studio.js。動きを減らす設定では止める。
   ================================================================ */

/* ---- 暗い面の上のヘッダー（記事の雛形の殻で、頭が暗いページ） ---- */
body.is-studio .site-header:not(.is-scrolled) .brand__name{color:#fff}
body.is-studio .site-header:not(.is-scrolled) .brand__sub{color:var(--warm)}
body.is-studio .site-header:not(.is-scrolled) .brand__name .x{background:linear-gradient(120deg,#7FBFE8 15%,var(--warm) 85%);-webkit-background-clip:text;background-clip:text;color:transparent}
body.is-studio .site-header:not(.is-scrolled) .nav__link{color:rgba(255,255,255,.82)}
body.is-studio .site-header:not(.is-scrolled) .nav__link:hover{color:#fff}
body.is-studio .site-header:not(.is-scrolled) .nav__search,
body.is-studio .site-header:not(.is-scrolled) .hamburger{color:#fff}
body.is-studio .site-header:not(.is-scrolled) .hamburger span{background:#fff}
body.is-studio .site-header:not(.is-scrolled) :focus-visible{outline-color:var(--warm)}

/* ================================================================
   プロダクトのページ
   ================================================================ */
.pd{--pd-dark:var(--band-1)}
.pd :focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* ---- 頭（暗い面。開発工房のトップと同じ空） ---- */
.pd-hero{
  position:relative;isolation:isolate;overflow:hidden;color:var(--ink-invert-2);
  padding:calc(var(--hdr-h,76px) + clamp(1.2rem,3.6vh,2.4rem)) 0 clamp(2.6rem,7vh,4.6rem);
  background:
    radial-gradient(115% 85% at 78% 4%,rgba(46,127,184,.32),transparent 58%),
    radial-gradient(85% 70% at 10% 98%,rgba(234,215,172,.13),transparent 62%),
    linear-gradient(158deg,var(--band-1) 0%,var(--band-2) 48%,var(--band-4) 100%)}
.pd-hero :focus-visible{outline-color:var(--warm)}
.pd-hero__sky{position:absolute;inset:0;z-index:-1;pointer-events:none}
.pd-hero__sky .cs__orbit,.pd-end .cs__orbit{
  position:absolute;left:74%;top:52%;translate:-50% -50%;border:1px solid rgba(255,255,255,.1);border-radius:50%;aspect-ratio:1;
  animation:pdSpin 46s linear infinite}
.pd-hero__sky .cs__orbit i{position:absolute;top:-5px;left:calc(50% - 5px);width:10px;height:10px;border-radius:50%;background:var(--warm);box-shadow:0 0 22px rgba(234,215,172,.85)}
.pd-hero__sky .cs__orbit--1{width:min(70vw,860px)}
.pd-hero__sky .cs__orbit--2{width:min(50vw,610px);animation-duration:31s;animation-direction:reverse;border-color:rgba(234,215,172,.16)}
.pd-hero__sky .cs__orbit--2 i{width:7px;height:7px;left:calc(50% - 3.5px);top:-3.5px;background:var(--ink-accent);box-shadow:0 0 18px rgba(143,205,240,.8)}
.pd-hero__sky .cs__orbit--3{width:min(31vw,380px);animation-duration:19s}
.pd-hero__sky .cs__orbit--3 i{width:5px;height:5px;left:calc(50% - 2.5px);top:-2.5px;opacity:.8}
@keyframes pdSpin{to{rotate:360deg}}

.pd-hero__in{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(1.6rem,4vw,3.6rem);align-items:center;
  min-height:min(74vh,660px)}
.pd-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;font-size:var(--fs-label);color:rgba(231,238,245,.62)}
.pd-crumb a{color:rgba(231,238,245,.8);transition:color var(--dur-fast)}
.pd-crumb a:hover{color:#fff}
.pd-crumb [aria-current]{color:rgba(231,238,245,.62);max-width:20em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pd-hero__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .8rem;margin-top:clamp(1rem,3vh,1.8rem)}
.pd-hero__type{font-size:var(--fs-label);letter-spacing:.08em;color:rgba(231,238,245,.7)}
.pd-hero__h1{margin-top:.7rem;font-family:var(--font-display);font-weight:700;font-size:clamp(2rem,4.6vw,3.3rem);line-height:1.18;letter-spacing:.03em;color:#fff;
  word-break:auto-phrase;text-wrap:balance}
.pd-hero__h1--long{font-size:clamp(1.75rem,3.3vw,2.45rem);line-height:1.3}
.pd-hero__tag{margin-top:.9rem;font-size:clamp(1.05rem,1.9vw,1.3rem);font-weight:600;line-height:1.6;letter-spacing:.04em;color:var(--warm);word-break:auto-phrase;text-wrap:pretty}
.pd-hero__lead{margin-top:.9rem;max-width:34em;font-size:var(--fs-body);line-height:2;color:rgba(231,238,245,.82);text-wrap:pretty}
.pd-hero__cta{display:flex;flex-wrap:wrap;gap:.8rem 1rem;margin-top:clamp(1.4rem,3.6vh,2.2rem)}
.pd-facts{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.3rem}
.pd-facts div{display:flex;align-items:baseline;gap:.5rem;max-width:100%;padding:.38rem .9rem;border-radius:var(--r-pill);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18)}
.pd-facts dt{flex:none;white-space:nowrap;font-size:var(--fs-label);letter-spacing:.1em;color:rgba(231,238,245,.6)}
.pd-facts dd{min-width:0;font-size:var(--fs-meta);line-height:1.6;color:#fff}
.pd-hero__stage{position:relative;display:grid;place-items:center;min-height:min(62vh,560px)}

/* 段階の札（開発中・ベータ版・提供中） */
.pd-stage{display:inline-flex;align-items:center;gap:.45rem;padding:.24rem .75rem .26rem .6rem;border-radius:var(--r-pill);
  font-size:var(--fs-label);font-weight:600;letter-spacing:.06em;color:var(--warm-ink-deep);background:var(--warm)}
.pd-stage::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.75}
.pd-stage--beta{color:#0C2B40;background:#8FCDF0}
.pd-stage--live{color:#0E3322;background:#8EDDB4}

/* ボタン */
.pd-btn{display:inline-flex;align-items:center;gap:.6rem;padding:.8rem 1.5rem;border-radius:var(--r-pill);font-size:var(--fs-sm);font-weight:600;letter-spacing:.03em;
  transition:transform var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),background var(--dur-fast)}
.pd-btn svg{width:16px;height:16px;flex:none}
.pd-btn--warm{color:var(--band-1);background:var(--warm);box-shadow:0 10px 30px rgba(234,215,172,.22)}
.pd-btn--warm:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(234,215,172,.32)}
.pd-btn--ghost{color:#fff;border:1px solid rgba(255,255,255,.42);background:rgba(255,255,255,.06)}
.pd-btn--ghost:hover{background:rgba(255,255,255,.14);transform:translateY(-2px)}
.pd-link{display:inline-flex;align-items:center;gap:.4rem;font-weight:600;color:var(--blue-deep);border-bottom:1px solid rgba(29,82,115,.35);padding-bottom:.1rem;transition:gap var(--dur-fast) var(--ease)}
.pd-link svg{width:15px;height:15px}
.pd-link:hover{gap:.7rem}
.pd-link--inv{color:rgba(231,238,245,.85);border-color:rgba(231,238,245,.35)}
.pd-link--inv:hover{color:#fff;border-color:var(--warm)}

/* ---- 端末の枠（スマホ・ブラウザ） ---- */
.dv{position:relative;flex:none}
.dv__screen{position:relative;overflow:hidden;background:#0B1520}
.dv__screen>img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}
.dv--phone{width:var(--dvw,clamp(210px,22vw,290px));aspect-ratio:390/844;padding:calc(var(--dvw,260px) * .04);border-radius:calc(var(--dvw,260px) * .16);
  background:linear-gradient(150deg,#33475B 0%,#15212D 38%,#0A121A 100%);
  box-shadow:0 34px 80px rgba(0,0,0,.48),0 0 0 1px rgba(255,255,255,.14) inset,0 0 0 calc(var(--dvw,260px) * .016) #05090E inset}
.dv--phone .dv__screen{height:100%;border-radius:calc(var(--dvw,260px) * .12)}
.dv__notch{position:absolute;z-index:3;top:calc(var(--dvw,260px) * .07);left:50%;translate:-50% 0;width:30%;height:calc(var(--dvw,260px) * .075);border-radius:var(--r-pill);background:#05090E}
.dv--browser{width:min(100%,var(--dvw,580px));border-radius:14px;overflow:hidden;background:#0D1620;
  box-shadow:0 34px 80px rgba(0,0,0,.42),0 0 0 1px rgba(255,255,255,.12)}
.dv__bar{display:flex;align-items:center;gap:6px;height:34px;padding:0 12px;background:linear-gradient(#1F2E3D,#152331)}
.dv__bar i{width:10px;height:10px;border-radius:50%;background:#FF5F57;flex:none}
.dv__bar i:nth-child(2){background:#FEBC2E}.dv__bar i:nth-child(3){background:#28C840}
.dv__url{flex:1;min-width:0;margin-left:10px;height:21px;padding:0 10px;border-radius:7px;display:flex;align-items:center;
  font:500 11px/1 var(--font-ui);letter-spacing:.02em;color:rgba(231,238,245,.62);background:rgba(255,255,255,.08);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dv--browser .dv__screen{aspect-ratio:16/10}

/* 2 台目（奥のスマホ） */
.pd-show{position:relative;display:grid;place-items:center;width:100%}
.pd-show--duo{padding-left:12%}
.pd-show--duo .dv--back{position:absolute;left:4%;top:50%;translate:0 -46%;rotate:-9deg;--dvw:clamp(170px,17vw,230px);filter:brightness(.72) saturate(.9);z-index:0}
.pd-show--duo .dv--hero{z-index:1;rotate:3deg}
.dv--hero{animation:pdFloat 9s var(--ease) infinite}
@keyframes pdFloat{0%,100%{translate:0 0}50%{translate:0 -10px}}

/* デモの起動 */
.dv__start{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:1rem;text-align:center;
  color:#fff;background:radial-gradient(75% 55% at 50% 48%,rgba(12,26,41,.55),rgba(12,26,41,.86));-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);transition:background var(--dur-base)}
.dv__start:hover{background:radial-gradient(75% 55% at 50% 48%,rgba(12,26,41,.45),rgba(12,26,41,.8))}
.dv__start:focus-visible{outline:3px solid var(--warm);outline-offset:-6px}
.dv__play{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--warm);color:var(--band-1);
  box-shadow:0 0 0 10px rgba(234,215,172,.18),0 14px 30px rgba(0,0,0,.35);transition:transform var(--dur-fast) var(--ease)}
.dv__start:hover .dv__play{transform:scale(1.08)}
.dv__play svg{width:26px;height:26px;fill:currentColor;margin-left:3px}
.dv__startt{font-weight:700;letter-spacing:.06em;margin-top:.3rem}
.dv__starts{font-size:var(--fs-label);color:rgba(231,238,245,.78)}
.dv__frame{position:absolute;inset:0;width:100%;height:100%;border:0;background:#fff}
.dv.is-live .dv__screen{background:#fff}

/* ---- パッケージの立体の箱 ---- */
.box3d{--W:clamp(190px,21vw,280px);--H:calc(var(--W) * var(--rh,1.3));--D:calc(var(--W) * var(--rd,.34));
  --rx:-22deg;--ry:-32deg;position:relative;width:var(--W);height:var(--H);perspective:1500px;margin:calc(var(--D) * .4) auto calc(var(--H) * .12)}
.box3d__obj{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform .5s var(--ease)}
.box3d--hero .box3d__obj{animation:pdSway 11s var(--ease) infinite}
.box3d.is-drag .box3d__obj,.box3d.is-moved .box3d__obj{animation:none;transition:none}
@keyframes pdSway{0%,100%{transform:rotateX(-22deg) rotateY(-32deg)}50%{transform:rotateX(-16deg) rotateY(-18deg)}}
.box3d__f{position:absolute;left:0;top:0;background-color:#D9CDB4;background-repeat:no-repeat;background-size:cover;background-position:center;backface-visibility:hidden}
.box3d__f::after{content:"";position:absolute;inset:0;pointer-events:none}
.box3d__f--front,.box3d__f--back{width:var(--W);height:var(--H)}
.box3d__f--front{transform:translateZ(calc(var(--D) / 2));box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.box3d__f--front::after{background:linear-gradient(115deg,rgba(255,255,255,.26) 0%,rgba(255,255,255,0) 38%,rgba(0,0,0,0) 70%,rgba(0,0,0,.08) 100%)}
.box3d__f--back{transform:rotateY(180deg) translateZ(calc(var(--D) / 2))}
.box3d__f--back::after{background:rgba(10,18,26,.45)}
.box3d__f--right,.box3d__f--left{width:var(--D);height:var(--H);left:calc((var(--W) - var(--D)) / 2)}
.box3d__f--right{transform:rotateY(90deg) translateZ(calc(var(--W) / 2))}
.box3d__f--right::after{background:linear-gradient(90deg,rgba(10,18,26,.28),rgba(10,18,26,.16))}
.box3d__f--left{transform:rotateY(-90deg) translateZ(calc(var(--W) / 2))}
.box3d__f--left::after{background:rgba(10,18,26,.32)}
.box3d__f--top,.box3d__f--bottom{width:var(--W);height:var(--D);top:calc((var(--H) - var(--D)) / 2)}
.box3d__f--top{transform:rotateX(90deg) translateZ(calc(var(--H) / 2))}
.box3d__f--top::after{background:linear-gradient(0deg,rgba(255,255,255,.12),rgba(255,255,255,.3))}
.box3d__f--bottom{transform:rotateX(-90deg) translateZ(calc(var(--H) / 2));background:#2A3542}
.box3d__shadow{position:absolute;left:50%;bottom:calc(var(--H) * -.17);width:calc(var(--W) * 1.55);height:calc(var(--W) * .3);translate:-50% 0;z-index:-1;
  background:radial-gradient(closest-side,rgba(0,0,0,.55),rgba(0,0,0,0));filter:blur(4px)}
.box3d--hero{cursor:grab;touch-action:pan-y}
.box3d--hero.is-drag{cursor:grabbing}
.box3d--hero:focus-visible{outline:2px solid var(--warm);outline-offset:18px;border-radius:12px}
.pd-show--box{padding-block:clamp(1rem,4vh,2rem)}

/* ---- 写真（商品の写真・講座の写真） ---- */
.pd-shot,.pd-photo{position:relative;margin:0;width:min(100%,560px)}
.pd-shot img,.pd-photo img{display:block;width:100%;height:auto;border-radius:var(--r-lg)}
.pd-photo img{aspect-ratio:4/3;object-fit:cover;box-shadow:0 34px 80px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.12)}
.pd-shot{padding-bottom:12%}
.pd-shot img{position:relative;z-index:1;max-height:min(56vh,520px);width:auto;max-width:100%;margin-inline:auto;object-fit:contain;filter:drop-shadow(0 30px 40px rgba(0,0,0,.45));border-radius:0}
.pd-shot::after{content:"";position:absolute;left:12%;right:12%;bottom:4%;height:16%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(234,215,172,.35),rgba(234,215,172,0))}
.pd-photo--s img{aspect-ratio:4/3;width:min(78vw,420px);box-shadow:var(--shadow-md)}

/* ---- 抽象アート（画像が無いとき） ---- */
.pd-art{--hue:205;position:relative;width:min(100%,460px);aspect-ratio:1;display:grid;place-items:center}
.pd-art__ring{position:absolute;inset:0;margin:auto;border-radius:50%;border:1px solid hsla(var(--hue),70%,80%,.22);aspect-ratio:1;animation:pdSpin 40s linear infinite}
.pd-art__ring i{position:absolute;top:-6px;left:calc(50% - 6px);width:12px;height:12px;border-radius:50%;background:var(--warm);box-shadow:0 0 24px rgba(234,215,172,.9)}
.pd-art__ring--1{width:100%}
.pd-art__ring--2{width:70%;animation-duration:27s;animation-direction:reverse;border-color:rgba(234,215,172,.3)}
.pd-art__ring--2 i{background:hsl(var(--hue),80%,78%);box-shadow:0 0 18px hsla(var(--hue),80%,78%,.9);width:8px;height:8px;top:-4px;left:calc(50% - 4px)}
.pd-art__ring--3{width:42%;animation-duration:17s}
.pd-art__ring--3 i{width:6px;height:6px;top:-3px;left:calc(50% - 3px)}
.pd-art__core{position:absolute;width:24%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff,hsl(var(--hue),70%,72%) 45%,hsl(var(--hue),60%,30%) 100%);
  box-shadow:0 0 60px hsla(var(--hue),80%,70%,.55),0 0 140px hsla(var(--hue),80%,60%,.35)}
.pd-art__mark{position:relative;font-family:var(--font-display);font-weight:700;font-size:clamp(1.4rem,3.6vw,2.4rem);color:var(--band-1)}
.pd-art--screen{width:100%;height:100%;aspect-ratio:auto;background:radial-gradient(120% 80% at 50% 20%,hsla(var(--hue),70%,40%,.6),#0B1520 70%)}
.pd-art--screen .pd-art__ring--1{width:120%}

/* ---- 下の節（明るい面） ---- */
.pd-sec{padding-block:clamp(3rem,7vw,5.2rem)}
.pd-sec--tint{background:linear-gradient(180deg,rgba(46,127,184,.06),rgba(234,215,172,.08))}
.pd-eyebrow{font-family:var(--font-display);font-weight:600;font-size:var(--fs-label);letter-spacing:.34em;text-transform:uppercase;color:var(--blue-deep);display:flex;align-items:center;gap:.9rem}
.pd-eyebrow::before{content:"";width:34px;height:1px;background:linear-gradient(90deg,var(--blue),rgba(46,127,184,0))}
.pd-eyebrow--warm{color:var(--warm)}
.pd-eyebrow--warm::before{background:linear-gradient(90deg,var(--warm),rgba(234,215,172,0))}
.pd-sec__h{margin-top:.7rem;font-family:var(--font-display);font-weight:700;font-size:clamp(1.5rem,2.8vw,2.1rem);letter-spacing:.04em;line-height:1.35;color:var(--ink)}

.pd-feats{list-style:none;padding:0;margin:clamp(1.6rem,3.4vw,2.4rem) 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:1.1rem}
.pd-feat{position:relative;padding:1.5rem 1.5rem 1.6rem;border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(var(--glass-strong),var(--glass-strong)) padding-box,linear-gradient(140deg,var(--glass-border),rgba(255,255,255,.3) 40%,var(--glass-edge)) border-box;
  border:1px solid transparent;box-shadow:var(--shadow-sm);transition:transform var(--dur-base) var(--ease),box-shadow var(--dur-base) var(--ease)}
.pd-feat:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.pd-feat::before{content:"";position:absolute;right:-30%;top:-40%;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(234,215,172,.35),rgba(234,215,172,0) 65%)}
.pd-feat__n{position:relative;display:block;font-family:var(--font-display);font-weight:300;font-size:2.2rem;line-height:1;letter-spacing:.02em;
  background:linear-gradient(120deg,var(--blue) 10%,var(--warm-deep) 90%);-webkit-background-clip:text;background-clip:text;color:transparent}
.pd-feat__t{position:relative;margin-top:.9rem;font-size:var(--fs-h3);font-weight:700;line-height:1.5;color:var(--ink);word-break:auto-phrase}
.pd-feat__d{position:relative;margin-top:.5rem;font-size:var(--fs-sm);line-height:1.9;color:var(--ink-2)}

/* 画面・写真の横の列（次の 1 枚が半分見える） */
.pd-gal{list-style:none;padding:20px 16px 28px;margin:clamp(1.2rem,3vw,2rem) -16px 0;display:grid;grid-auto-flow:column;gap:clamp(1rem,2.4vw,1.8rem);
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-inline:16px;scrollbar-width:thin;scrollbar-color:rgba(46,127,184,.35) transparent}
.pd-gal:focus-visible{outline:2px solid var(--blue);outline-offset:-2px;border-radius:12px}
.pd-gal__it{scroll-snap-align:start}
.pd-gal__it figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:.8rem}
.pd-gal__it figcaption{max-width:26em;font-size:var(--fs-label);line-height:1.7;color:var(--ink-2);text-align:center}
.pd-gal--app{grid-auto-columns:max-content}
.pd-gal--app .dv--phone{--dvw:clamp(180px,18vw,230px);box-shadow:0 20px 50px rgba(21,58,84,.28),0 0 0 1px rgba(255,255,255,.14) inset,0 0 0 3px #05090E inset}
.pd-gal--web{grid-auto-columns:min(86%,620px)}
.pd-gal--web .dv--browser{box-shadow:0 20px 50px rgba(21,58,84,.26)}
.pd-gal--goods,.pd-gal--service{grid-auto-columns:max-content}

/* 動くデモ */
.pd-demo{background:linear-gradient(180deg,var(--bg),rgba(46,127,184,.08))}
.pd-demo__in{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(1.6rem,4vw,3.6rem);align-items:center}
.pd-demo__in--browser{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
.pd-demo__stage{display:grid;place-items:center}
.pd-demo .dv--phone{--dvw:clamp(250px,26vw,330px)}
.pd-demo .dv--browser{--dvw:780px}
.pd-demo .dv--browser .dv__screen{aspect-ratio:16/10.5}
.pd-demo__text p{margin-top:.9rem;line-height:1.95;color:var(--ink-2)}
.pd-note{font-size:var(--fs-meta);padding:.8rem 1rem;border-radius:var(--r-ms);background:rgba(255,255,255,.6);border:1px solid rgba(46,127,184,.15)}

/* くわしく（本文） */
.pd-body__card{max-width:52rem;margin-top:clamp(1.2rem,3vw,2rem);padding:clamp(1.4rem,4vw,2.6rem);border-radius:var(--r-xl)}

/* くわしく：本文の最初の見出しの上に、記事の章の間隔を持ち込まない */
.pd-body__card .prose>:first-child{margin-top:0}
.pd-body__card .prose>:last-child{margin-bottom:0}
/* 仕様 */
.pd-specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:0 2rem;margin-top:clamp(1.2rem,3vw,2rem);padding:.6rem clamp(1.2rem,3vw,2rem);border-radius:var(--r-lg)}
.pd-specs div{display:grid;grid-template-columns:7.5em minmax(0,1fr);gap:1rem;padding:1rem 0;border-bottom:1px solid rgba(21,58,84,.08)}
.pd-specs dt{font-size:var(--fs-meta);font-weight:600;color:var(--ink-2)}
.pd-specs dd{font-size:var(--fs-sm);line-height:1.8;color:var(--ink)}

/* 締め（暗い帯） */
.pd-end{position:relative;isolation:isolate;overflow:hidden;padding-block:clamp(3.2rem,8vw,5.6rem);color:var(--ink-invert-2);
  background:radial-gradient(90% 90% at 90% 0%,rgba(46,127,184,.28),transparent 60%),linear-gradient(160deg,var(--band-1),var(--band-3) 60%,var(--band-4))}
.pd-end :focus-visible{outline-color:var(--warm)}
.pd-end__cta{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.4rem 2.4rem}
.pd-end__h{margin-top:.7rem;font-family:var(--font-display);font-weight:700;font-size:clamp(1.45rem,2.8vw,2rem);line-height:1.4;color:#fff;word-break:auto-phrase}
.pd-end__d{margin-top:.7rem;max-width:34em;line-height:1.95;color:rgba(231,238,245,.78)}
.pd-end__btns{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.2rem}
.pd-end__h2{margin-top:clamp(2.6rem,6vw,3.8rem);font-family:var(--font-display);font-weight:700;font-size:var(--fs-h3);letter-spacing:.06em;color:#fff}

/* ================================================================
   一覧のカード（開発工房のトップ・ほかのプロダクト。どちらも暗い面）
   ================================================================ */
.cs__in--open{max-width:var(--container)}
.sx{margin-top:clamp(1.6rem,4vh,2.6rem)}
.sx__tabs{display:none;flex-wrap:wrap;gap:.5rem;margin-bottom:1.2rem}
html.js .sx__tabs{display:flex}
.sx__tabs[hidden]{display:none}
.sx__tab{display:inline-flex;align-items:center;gap:.5rem;min-height:40px;padding:.36rem 1rem;border-radius:var(--r-pill);font-size:var(--fs-label);letter-spacing:.06em;
  color:rgba(231,238,245,.86);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.2);transition:background var(--dur-fast),color var(--dur-fast)}
.sx__tab span{font-family:var(--font-display);font-size:.75rem;opacity:.75}
.sx__tab:hover{background:rgba(255,255,255,.14)}
.sx__tab.is-on{color:var(--band-1);background:var(--warm);border-color:var(--warm)}
.sx__tab:focus-visible{outline:2px solid var(--warm);outline-offset:3px}
.sx__grid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr));gap:1.1rem}
.sx__grid--more{margin-top:1.1rem}
.sx__item[hidden]{display:none}
.sx-card{display:flex;flex-direction:column;height:100%;border-radius:var(--r-lg);overflow:hidden;color:var(--ink-invert-2);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  transition:transform var(--dur-base) var(--ease),background var(--dur-base),border-color var(--dur-base),box-shadow var(--dur-base)}
.sx-card:hover{transform:translateY(-5px);background:rgba(255,255,255,.1);border-color:rgba(234,215,172,.42);box-shadow:0 22px 50px rgba(0,0,0,.3)}
.sx-card:focus-visible{outline:2px solid var(--warm);outline-offset:3px}
.sx-card__vis{position:relative;aspect-ratio:16/10;display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(90% 90% at 75% 10%,rgba(46,127,184,.42),transparent 62%),radial-gradient(70% 70% at 15% 100%,rgba(234,215,172,.18),transparent 60%),rgba(8,16,24,.4)}
.sx-card__vis .pd-show{height:100%}
.sx-card__vis .dv--phone{--dvw:min(31%,128px);translate:0 14%;box-shadow:0 18px 40px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.14) inset,0 0 0 2px #05090E inset}
.sx-card__vis .dv--browser{--dvw:84%;translate:0 10%;border-radius:10px}
.sx-card__vis .dv--browser .dv__bar{height:22px;gap:4px;padding:0 8px}
.sx-card__vis .dv--browser .dv__bar i{width:7px;height:7px}
.sx-card__vis .dv__url{height:14px;font-size:8px;margin-left:6px}
/* カードの箱は、枠の幅（cqw）から決める。% だと面の幅が箱自身の幅の割合になって豆粒になる。縦長の箱は高さに収まるように縮める */
.sx-card__vis{container-type:inline-size}
.sx-card__vis .box3d{--W:min(27cqw,calc(40cqw / var(--rh,1.3)),118px);margin:0 auto;translate:0 4%}
.sx-card__vis .pd-shot{width:58%;padding:0}
.sx-card__vis .pd-shot img{max-height:min(34vw,150px)}
.sx-card__vis .pd-shot::after{display:none}
.sx-card__vis .pd-photo{width:100%;height:100%}
.sx-card__vis .pd-photo img{width:100%;height:100%;aspect-ratio:auto;border-radius:0;box-shadow:none}
.sx-card__vis .pd-art{width:62%}
.sx-card:hover .sx-card__vis img{transform:scale(1.03)}
.sx-card__vis img{transition:transform .7s var(--ease)}
.sx-card__body{display:flex;flex-direction:column;gap:.4rem;padding:1.05rem 1.2rem 1.3rem}
.sx-card__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .7rem}
.sx-card__type{font-size:var(--fs-label);letter-spacing:.06em;color:rgba(231,238,245,.65)}
.sx-card__t{margin-top:.2rem;font-size:var(--fs-h3);font-weight:700;line-height:1.5;color:#fff;word-break:auto-phrase}
.sx-card__tag{font-size:var(--fs-sm);line-height:1.7;color:rgba(231,238,245,.75)}

/* ---- 狭い画面 ---- */
@media(max-width:860px){
  .pd-hero__in{grid-template-columns:1fr;min-height:0}
  .pd-hero__stage{min-height:0;padding-top:1rem}
  .pd-hero__sky .cs__orbit{left:80%;top:68%}
  .pd-show--duo{padding-left:22%}
  .pd-demo__in,.pd-demo__in--browser{grid-template-columns:1fr}
  .pd-demo__text{order:-1}
  .pd-end__cta{align-items:flex-start}
}
@media(max-width:520px){
  .pd-hero__cta .pd-btn{width:100%;justify-content:space-between}
  .pd-specs div{grid-template-columns:1fr;gap:.2rem}
  .dv--phone{--dvw:min(64vw,250px)}
  .pd-show--duo .dv--back{--dvw:min(46vw,180px)}
}
@media(prefers-reduced-motion:reduce){
  .pd-hero__sky .cs__orbit,.pd-art__ring,.dv--hero,.box3d--hero .box3d__obj{animation:none}
  .pd-feat,.sx-card,.pd-btn,.box3d__obj{transition:none}
}
@media print{
  .pd-hero,.pd-end{background:none;color:#000}
  .pd-hero__sky,.dv__start,.pd-hero__cta,.pd-end__btns{display:none}
  .pd-hero__h1,.pd-end__h,.sx-card__t{color:#000}
}