/*! world-pixel — /works/ and its title pages (アプリ開発). Loaded after works.css.
    8px grid on deep indigo, pixel type for display, hard shadows, no rounding.
    Body copy stays Zen Kaku so it reads; icons scale by whole numbers (2×, 3×). */
body[data-world="pixel"]{
  --ground:#14121F;--raise:#1B1930;
  --ink:#F4F7FC;--ink-mid:#B9B4CF;--ink-dim:#8A85A8;--ink-faint:#8682A6;
  --line:rgba(255,255,255,.12);--line-firm:rgba(255,255,255,.28);
  --acc:#FFD447;--acc-line:rgba(255,212,71,.55);--acc-glow:rgba(255,212,71,.16);--tint:#FFD447;
  background-color:#14121F;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:8px 8px;
}
body[data-world="pixel"] main{--grad:linear-gradient(96deg,#FFD447 0%,#FF8A3D 100%)}
body[data-world="pixel"] :is(.card,.prod,.prod-shot,.prod-cover,.prod-icon,.doc,.store,.faq details,.form-wrap,input,select,textarea,.btn,.btn-ghost,.submit,.chips li,.vq-form-msg,.vq-noscript,.p-icon,.p-intro-shot,.shot,.dl-card,.dl-note,.stack,.soon-shot){border-radius:0}
body[data-world="pixel"] :is(.btn,.submit){color:#14121F;background:#FFD447;box-shadow:5px 5px 0 #000}
body[data-world="pixel"] :is(.btn,.submit):hover{filter:none;transform:translate(-2px,-2px);box-shadow:7px 7px 0 #000}
body[data-world="pixel"] .btn-ghost{border-width:3px;border-color:rgba(255,255,255,.45);color:var(--ink);padding:12px 22px}
body[data-world="pixel"] .btn-ghost:hover{background:rgba(255,255,255,.06);border-color:var(--acc)}
body[data-world="pixel"] .chips li{font-family:'DotGothic16',sans-serif;font-size:13px;border:2px solid var(--line-firm);background:transparent;color:var(--ink-mid)}
body[data-world="pixel"] .chips li.is-genre{border-color:color-mix(in srgb,var(--tint) 70%,transparent)}
body[data-world="pixel"] :is(.card,.prod,.doc):hover{transform:none;box-shadow:8px 8px 0 #000}
body[data-world="pixel"] .sec-num{font-family:'Press Start 2P',monospace;font-size:clamp(16px,2.2vw,24px);-webkit-text-fill-color:var(--acc);color:var(--acc);background:none}
body[data-world="pixel"] .sec h2,body[data-world="pixel"] .p-name{font-family:'DotGothic16',sans-serif;font-weight:400;letter-spacing:0;text-shadow:3px 3px 0 #000}
body[data-world="pixel"] .p-name small{font-family:'Zen Kaku Gothic New',sans-serif;text-shadow:none}
body[data-world="pixel"] .p-hero::before{display:none}
body[data-world="pixel"] .p-icon{border:4px solid var(--tint);box-shadow:6px 6px 0 #000;background:#000}
/* ── Hero ── */
.w-hero--pixel{padding-bottom:0}
.w-hero--pixel .w-unit{font-family:'Press Start 2P',monospace;font-size:clamp(34px,4.6vw,64px);line-height:1.15;letter-spacing:.02em;color:var(--acc);text-shadow:6px 6px 0 #000;padding-right:0}
.w-shots{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:22px 20px;align-items:start}
.w-shot{margin:0}
.w-shot--wide{grid-column:1/-1}
.w-shot-frame{border:4px solid #3A3852;box-shadow:10px 10px 0 #000;background:#000}
.w-shot-frame img{width:100%;height:auto;display:block}
.w-shot figcaption{margin:14px 0 0;font-family:'DotGothic16',sans-serif;font-size:13px;line-height:1.5;color:var(--acc);text-shadow:2px 2px 0 #000}
.w-floor{position:relative;height:100px;margin:clamp(120px,14vh,150px) calc(-1 * var(--pad)) 0;background:repeating-linear-gradient(90deg,#1F1E2E 0 16px,#262540 16px 32px);border-top:4px solid #3A3852}
.w-tiles{position:absolute;left:var(--pad);top:-104px;display:flex;gap:24px;margin:0}
.w-tile{box-sizing:content-box;display:block;width:96px;height:96px;border:4px solid var(--tc,#FFD447);box-shadow:6px 6px 0 #000;background:#000;overflow:hidden}
.w-tile img{width:96px;height:96px;display:block}
.w-tile.t-piyo{--tc:#FFD447}.w-tile.t-tama{--tc:#FF8A3D}.w-tile.t-14{--tc:#F2E8C8}
.w-tile.t-piyo img,.w-tile.t-tama img{image-rendering:pixelated}
.w-tile-labels{position:absolute;left:var(--pad);top:16px;display:flex;gap:24px;font-family:'DotGothic16',sans-serif;font-size:12px;color:var(--ink-mid)}
.w-tile-labels span{width:104px}
@media (max-width:960px){.w-shots{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media (max-width:620px){
  .w-shots{grid-template-columns:minmax(0,11fr) minmax(0,9fr);gap:18px 12px}.w-shot figcaption{font-size:11.5px;margin-top:10px}
  .w-floor{height:84px;margin-top:100px}.w-tiles{top:-72px;gap:16px}.w-tile{width:64px;height:64px}.w-tile img{width:64px;height:64px}
  .w-tile-labels{gap:16px;font-size:11px;top:12px}.w-tile-labels span{width:72px}
}

/* ── 縦を詰める・PC は横に広く（2026-10-15 仕様46。/studio/ の仕様45と同じ考え方） ──────────
   /works/ の一覧だけに効かせる（このファイルは作品のページも読むので、ヒーロー .w-hero--pixel を持つページに絞る）。
   中身は最大 1400px、1440px の画面で左右 80px 前後。節の上下の余白は PC 64px ずつ。
   節の番号は残す：遊びの HUD（works-play.js）が番号を読んで STAGE 1-n を出すため。英字の見出しは外した。
   スマホは上 60px・下 24px：節の境目のレーン（works-play.css、節の上端から 56px まで）が見出しの番号に掛からない高さ。 */
body[data-world="pixel"]:has(.w-hero--pixel){--shell:1400px}
@media (min-width:1001px){body[data-world="pixel"]:has(.w-hero--pixel){--pad:clamp(56px,5.6vw,80px)}}
body[data-world="pixel"]:has(.w-hero--pixel) .sec{padding-top:clamp(60px,4.45vw,64px);padding-bottom:clamp(24px,4.45vw,64px)}
body[data-world="pixel"]:has(.w-hero--pixel) .sec-head{margin-bottom:10px}
body[data-world="pixel"]:has(.w-hero--pixel) .sec h2{margin:0 0 clamp(20px,1.7vw,24px);font-size:clamp(26px,3vw,42px)}
body[data-world="pixel"]:has(.w-hero--pixel) .sec-lede{margin:-8px 0 clamp(18px,1.7vw,24px);font-size:clamp(14px,1.2vw,15.5px);line-height:1.85}
.w-hero--pixel{padding-top:clamp(24px,3vw,40px)}
.w-hero--pixel .w-grid{align-items:center}
.w-hero--pixel .crumb{margin-bottom:14px}
.w-hero--pixel .w-lockup{margin-bottom:clamp(16px,2vh,24px)}
.w-hero--pixel .w-lede{margin-bottom:22px}
.w-hero--pixel .w-shots{gap:18px 20px}
.w-hero--pixel .w-shot figcaption{margin-top:10px}
.w-hero--pixel .w-floor{margin-top:clamp(116px,13vh,130px)}
/* 札：札の中を詰める。アプリ・共同プロジェクトの縦長の画面は PC で幅 260px に */
body[data-world="pixel"]:has(.w-hero--pixel) .card{padding:24px clamp(18px,1.7vw,24px) 22px}
body[data-world="pixel"]:has(.w-hero--pixel) .card .idx{margin-bottom:10px}
body[data-world="pixel"]:has(.w-hero--pixel) .card h3{margin-bottom:8px;font-size:clamp(17px,1.35vw,19px);line-height:1.42}
body[data-world="pixel"]:has(.w-hero--pixel) .card p{line-height:1.8}
@media (min-width:1001px){
  body[data-world="pixel"]:has(.w-hero--pixel) .soon{grid-template-columns:minmax(0,260px) minmax(0,1fr)}
  /* ゲームの札は 2 列のまま（中身が 1280px に広がると auto-fit が 3 列にし、横長の画面が狭まる） */
  body[data-world="pixel"]:has(.w-hero--pixel) #titles .g2{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* ゲームの節の頭の行き先の列（開発中のゲーム・アプリ・共同プロジェクト・受託開発へ飛ぶ）。名前だけの札 */
body[data-world="pixel"]:has(.w-hero--pixel) .w-jump{display:flex;flex-wrap:wrap;gap:8px 10px;margin:0 0 clamp(18px,1.7vw,24px)}
body[data-world="pixel"]:has(.w-hero--pixel) .w-jump a{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border:2px solid var(--line-firm);
  font-family:'DotGothic16',sans-serif;font-size:13px;line-height:1.4;color:var(--ink);text-decoration:none}
body[data-world="pixel"]:has(.w-hero--pixel) .w-jump a::after{content:"↓";color:var(--acc)}
body[data-world="pixel"]:has(.w-hero--pixel) .w-jump a:hover{border-color:var(--acc)}
body[data-world="pixel"]:has(.w-hero--pixel) #in-development{scroll-margin-top:112px}
body[data-world="pixel"]:has(.w-hero--pixel) :is(#apps,#partner,#domains){scroll-margin-top:40px}
/* サポート・規約の5つの文書は PC で 1 行に */
@media (min-width:1181px){body[data-world="pixel"]:has(.w-hero--pixel) .docs{grid-template-columns:repeat(5,minmax(0,1fr))}}
body[data-world="pixel"]:has(.w-hero--pixel) .note{margin-top:16px}
body[data-world="pixel"]:has(.w-hero--pixel) .beta{padding:clamp(22px,2.6vw,36px)}
/* よくある質問は PC で 2 列（開いた問いだけが伸びる） */
body[data-world="pixel"]:has(.w-hero--pixel) .faq{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:10px 14px}
body[data-world="pixel"]:has(.w-hero--pixel) .faq summary{padding:16px 22px}
/* お問い合わせの節は PC で横に：左に見出しと一言、右にフォーム（番号の行は上に通す） */
@media (min-width:1001px){
  body[data-world="pixel"]:has(.w-hero--pixel) #contact .shell{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);
    grid-template-rows:auto auto 1fr;column-gap:clamp(32px,3.4vw,56px);align-items:start}
  body[data-world="pixel"]:has(.w-hero--pixel) #contact .sec-head{grid-column:1/-1;grid-row:1}
  body[data-world="pixel"]:has(.w-hero--pixel) #contact h2{grid-column:1;grid-row:2}
  body[data-world="pixel"]:has(.w-hero--pixel) #contact .sec-lede{grid-column:1;grid-row:3;margin:0}
  body[data-world="pixel"]:has(.w-hero--pixel) #contact .form-wrap{grid-column:2;grid-row:2/span 2}
}
body[data-world="pixel"]:has(.w-hero--pixel) .form-wrap{padding:clamp(20px,2.4vw,32px)}
body[data-world="pixel"]:has(.w-hero--pixel) .fields{gap:14px}
body[data-world="pixel"]:has(.w-hero--pixel) .submit{margin-top:20px}
@media (max-width:760px){
  body[data-world="pixel"]:has(.w-hero--pixel) .faq{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:620px){
  .w-hero--pixel{padding-top:20px}
  body[data-world="pixel"]:has(.w-hero--pixel) .card{padding:20px 18px 18px}
  body[data-world="pixel"]:has(.w-hero--pixel) .faq summary{padding:14px 18px;gap:12px}
  body[data-world="pixel"]:has(.w-hero--pixel) .faq .a{padding:0 18px 18px 48px}
  body[data-world="pixel"]:has(.w-hero--pixel) .form-wrap{padding:18px}
  body[data-world="pixel"]:has(.w-hero--pixel) .fields{gap:12px}
}

/* ── 作品のページ（/works/<game>/）の縦を詰める（2026-10-16 仕様53） ──────────
   一覧の /works/ は上の :has(.w-hero--pixel) で直してある。作品のページはヒーローが .p-hero なので、それを持つページに絞る。
   節の上下の余白は売り場と同じ PC 64px・スマホ 40px ずつ。見出しの下と札の中も売り場にそろえる。 */
body[data-world="pixel"]:has(.p-hero) .sec{padding-top:clamp(40px,4.45vw,64px);padding-bottom:clamp(40px,4.45vw,64px)}
body[data-world="pixel"]:has(.p-hero) .sec-head{margin-bottom:10px}
body[data-world="pixel"]:has(.p-hero) .sec h2{margin:0 0 clamp(18px,1.7vw,24px)}
body[data-world="pixel"] .p-hero{padding-top:clamp(40px,6vh,80px)}
body[data-world="pixel"]:has(.p-hero) .card{padding:24px clamp(18px,1.7vw,24px) 22px}
body[data-world="pixel"]:has(.p-hero) .dl-card{padding:clamp(20px,1.7vw,24px)}
@media (max-width:620px){
  body[data-world="pixel"]:has(.p-hero) .card{padding:20px 18px 18px}
}