/* 英字のフォントは、サイトの中から読み込む (Google から取らない)。ページを切り替えたときの、文字の大きさの変化を防ぐため (2026-10-26) */
@font-face{font-family:"Inter";font-style:normal;font-weight:200 600;font-display:swap;src:url(fonts/inter-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400 500;font-display:swap;src:url(fonts/jetbrains-mono-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* 読み込み前の代わりのフォントを、本来の大きさにそろえる */
@font-face{font-family:"Inter Fallback";src:local("Arial"),local("Helvetica Neue"),local("Helvetica");size-adjust:107.64%;ascent-override:90.2%;descent-override:22.48%;line-gap-override:0%}
@font-face{font-family:"JetBrains Mono Fallback";src:local("Courier New"),local("Menlo"),local("Courier");size-adjust:100%;ascent-override:102%;descent-override:30%;line-gap-override:0%}
/* aura, Inc. サイト共通 (v4 = 案D)
   絵に頼らず、黒い地・細い方眼・四隅のカギ括弧の枠・英字の大見出し・公式の黄で見た目を決める。
   画像は枠に入れる中身。入れ替えても見た目は崩れない。
   色: 地 #0B0C0E / 文字 #E9EAEC / 公式の黄 #FEC317 (ロゴの .ai の RGB 指定 R254 G195 B23) / 事業の目印 青=ゲーム 赤=VTuber 緑=スタジオ (控えめに) */
:root{
  --bg:#0B0C0E; --bg2:#121417; --bg3:#1A1D21; --rule:rgba(255,255,255,.10); --rule2:rgba(255,255,255,.22);
  --ink:#E9EAEC; --text:#B4B8BF; --dim:#80858E;
  --g:#4FB283; --r:#E2665E; --b:#5C9FE0; --hot:#FEC317; --hot-t:#FEC317; --gh-bg:rgba(11,12,14,.86); --tint:#1A1D22;
  --f-body:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",sans-serif;
  --f-en:"Outfit","Zen Kaku Gothic New",sans-serif;
  --f-mono:"JetBrains Mono","JetBrains Mono Fallback",ui-monospace,monospace;
  --gut:clamp(16px,4vw,48px);
  --hh:64px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:15.5px;line-height:1.9;letter-spacing:.02em;-webkit-font-smoothing:antialiased;
  background-image:linear-gradient(var(--rule) 1px,transparent 1px),linear-gradient(90deg,var(--rule) 1px,transparent 1px);background-size:80px 80px;background-position:-1px -1px;background-attachment:fixed}
body{word-break:keep-all;overflow-wrap:anywhere;line-break:strict}
p,li,dd,dt,span,b,a{text-wrap-style:pretty}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;line-height:1.4;text-wrap:balance;font-weight:700}
p{margin:0}
ul,ol,dl{margin:0;padding:0}
.pad{padding-inline:var(--gut)}
.inner{max-width:1280px;margin-inline:auto}
:focus-visible{outline:2px solid var(--hot);outline-offset:3px}
::selection{background:var(--hot);color:#111}
mark{background:none;color:var(--hot-t)}

/* 小さな英字の添え書き: 等幅・大文字・黄色の四角 */
.eyebrow,.en{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-mono);font-size:11.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);line-height:1.5}
.eyebrow::before{content:"";flex:none;width:7px;height:7px;background:var(--c,var(--hot))}
.note{font-size:12px;color:var(--dim);line-height:1.7}
.lead{font-size:clamp(15px,1.15vw,16.5px);color:var(--text);max-width:40em}
.lead + .lead{margin-top:0}
.stack{display:grid;gap:18px;align-content:start}
.stack > h2{font-size:clamp(26px,3vw,40px);line-height:1.35}
.jp{color:var(--text)}

/* 枠: 四隅のカギ括弧。箱ものはぜんぶこれ */
.fr,.svc article,.job,.mv > div,.price,.offices div,.recruit-band .card,.feat article,.wcard .im,.title .im,.gallery img,.studio-band .ph2,.logos div{position:relative}
.fr::before,.svc article::before,.job::before,.mv > div::before,.price::before,.offices div::before,.recruit-band .card::before{
  content:"";position:absolute;inset:-1px;pointer-events:none;
  background:
    linear-gradient(var(--hot),var(--hot)) top left/14px 2px,linear-gradient(var(--hot),var(--hot)) top left/2px 14px,
    linear-gradient(var(--hot),var(--hot)) top right/14px 2px,linear-gradient(var(--hot),var(--hot)) top right/2px 14px,
    linear-gradient(var(--hot),var(--hot)) bottom left/14px 2px,linear-gradient(var(--hot),var(--hot)) bottom left/2px 14px,
    linear-gradient(var(--hot),var(--hot)) bottom right/14px 2px,linear-gradient(var(--hot),var(--hot)) bottom right/2px 14px;
  background-repeat:no-repeat}

/* ボタン: 四角。主は黄、副は線 */
.cta{display:inline-flex;align-items:center;gap:14px;justify-self:start;font-family:var(--f-en);font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;background:var(--hot);color:#111;padding:15px 26px;white-space:nowrap;border:1px solid var(--hot);transition:background .2s,color .2s}
.cta::after{content:"→";transition:transform .2s}
.cta:hover::after{transform:translateX(3px)}
.cta:hover{background:#ffd457}
.cta.line{background:transparent;color:var(--ink);border-color:var(--rule2)}
.cta.line:hover{border-color:var(--ink)}
.more{display:inline-flex;align-items:center;gap:10px;justify-self:start;font-family:var(--f-en);font-weight:500;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--hot-t)}
.more::after{content:"→";transition:transform .2s}
.more:hover::after{transform:translateX(4px)}
/* 日本語の「詳しく見る」などは大文字にしない */
.more:lang(ja){letter-spacing:.06em}

/* ヘッダー */
.gh{position:fixed;inset:0 0 auto 0;z-index:50;height:var(--hh);display:flex;align-items:center;justify-content:space-between;gap:20px;background:var(--gh-bg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.gh .logo img{height:30px;width:auto}
.gh nav ul{display:flex;gap:clamp(16px,2.2vw,30px);list-style:none;font-family:var(--f-en);font-size:13px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;counter-reset:n}
.gh nav li a{position:relative;display:flex;align-items:baseline;gap:6px;padding-block:6px;color:var(--text);transition:color .2s}
.gh nav li a::before{counter-increment:n;content:"0" counter(n);font-family:var(--f-mono);font-size:10px;color:var(--dim);letter-spacing:.06em}
.gh nav li a:hover,.gh nav li a[aria-current]{color:var(--ink)}
.gh nav li a[aria-current]::before{color:var(--hot-t)}
.gh nav li a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--hot);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.gh nav li a:hover::after,.gh nav li a[aria-current]::after{transform:scaleX(1)}
.gh .right{display:flex;align-items:center;gap:16px}
.gh .lang{font-family:var(--f-mono);font-size:11.5px;color:var(--dim);letter-spacing:.1em}
.gh .lang a:hover{color:var(--ink)}
.gh .cta{padding:9px 16px;font-size:12px;background:transparent;color:var(--hot-t)}
.gh .cta:hover{background:var(--hot);color:#111}
.burger{display:none;background:none;border:0;color:var(--ink);padding:8px;cursor:pointer}
.burger i{display:block;width:22px;height:2px;background:currentColor;box-shadow:0 7px 0 currentColor,0 -7px 0 currentColor}
main{padding-top:var(--hh)}

/* 下層ページの見出し: 写真は使わず、大きな英字と方眼で組む */
.ph{position:relative;padding-top:clamp(64px,9vw,128px);padding-bottom:clamp(40px,5vw,64px);border-bottom:1px solid var(--rule)}
.ph .inner{display:grid;gap:14px}
.ph .crumb{font-family:var(--f-mono);font-size:11.5px;color:var(--dim);letter-spacing:.12em;text-transform:uppercase}
.ph .crumb a:hover{color:var(--ink)}
.ph .eyebrow{order:2;font-family:var(--f-en);font-weight:600;font-size:clamp(52px,9vw,136px);letter-spacing:-.01em;line-height:.92;color:var(--ink);gap:0}
.ph .eyebrow::before{display:none}
.hero4 .eyebrow::before{display:none}
.ph h1{order:3;font-size:clamp(15px,1.4vw,18px);font-weight:500;letter-spacing:.16em;color:var(--hot-t)}
.ph .crumb{order:1}
.ph::after{content:"";position:absolute;right:var(--gut);bottom:clamp(40px,5vw,64px);width:clamp(80px,14vw,200px);height:1px;background:var(--hot)}

/* セクション */
.sec{position:relative;padding-block:clamp(72px,10vw,128px);overflow-x:clip}
.sec.tint{background:var(--tint);border-block:1px solid var(--rule)}
.sec.tight{padding-top:0}
.ph + .sec{padding-top:clamp(56px,7vw,96px)}
.sh{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-bottom:clamp(32px,4vw,52px);padding-bottom:20px;border-bottom:1px solid var(--rule2)}
.sh > div{display:grid;gap:12px;max-width:52em}
.sh .eyebrow{color:var(--hot-t)}
.sh h2{font-size:clamp(26px,3.2vw,42px);letter-spacing:.04em;line-height:1.3}
.sh .sub{color:var(--text);font-size:15px}

/* トップ: 最初の画面 */
.hero4{display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:clamp(24px,4vw,56px);min-height:calc(100svh - var(--hh));padding-block:clamp(40px,5vw,72px)}
.hero4 .copy{display:grid;gap:26px;align-content:center}
.hero4 h1{font-family:var(--f-en);font-weight:600;font-size:clamp(46px,6.6vw,108px);line-height:.94;letter-spacing:-.01em;text-transform:uppercase}
.hero4 h1 em{font-style:normal;color:var(--hot-t)}

.hero4 .desc{font-size:14px;color:var(--text);max-width:34em;line-height:2}
.hero4 .btns{display:flex;flex-wrap:wrap;gap:12px}
.hud{position:relative;aspect-ratio:1;width:100%;max-width:640px;justify-self:center}
.hud canvas,.hud svg{position:absolute;inset:0;width:100%;height:100%}
.hud svg{overflow:visible}

@keyframes spin{to{transform:rotate(360deg)}}
.hud .lab{position:absolute;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;color:var(--dim);line-height:1.8;text-transform:uppercase}
.hud .lab b{color:var(--ink);font-weight:500}

/* 3つの事業 */

/* 実績カード (トップ) */
.titles{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(14px,2vw,24px)}
.title{position:relative;grid-column:span 2;display:grid;align-content:start;background:var(--bg2);border:1px solid var(--rule);transition:border-color .2s}
.title:hover{border-color:var(--hot)}
.title.wide{grid-column:span 3}
.title .im{aspect-ratio:16/9;overflow:hidden;background:var(--bg3)}
.title img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.title:hover img{transform:scale(1.035)}
.title .im.fit{background:#fff}
.title .im.fit img{object-fit:contain}
.title .tx{display:grid;gap:4px;padding:14px 16px 18px;border-top:1px solid var(--rule)}
.title b{font-size:15px;line-height:1.5}
.title span{font-size:12.5px;color:var(--dim)}

/* セルルック */
.style{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(24px,5vw,72px);align-items:center}

.style h2{font-size:clamp(28px,3.4vw,46px);line-height:1.3;letter-spacing:.04em}
.style p{color:var(--text);max-width:28em}

.vt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
.vt-grid img{width:100%;aspect-ratio:1;object-fit:contain;background:#fff}

/* VTuber */
.vt{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,5vw,72px);align-items:center}
.vt-grid img:first-child{grid-column:span 2;grid-row:span 2;height:100%}
.vt h2{font-size:clamp(26px,3.2vw,42px);line-height:1.3}

/* スタジオ */
.studio-band{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(24px,5vw,72px);align-items:center}
.studio-band .ph2{aspect-ratio:4/3;overflow:hidden;border:1px solid var(--rule)}
.studio-band .ph2 img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.85)}
.studio-band .info{display:grid;gap:20px;align-content:center}
.studio-band h2{font-size:clamp(26px,3.2vw,42px);line-height:1.3}
.specs{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);border:1px solid var(--rule)}
.specs div{display:grid;gap:4px;background:var(--bg);padding:16px 18px}
.specs b{font-family:var(--f-en);font-weight:500;font-size:clamp(24px,2.4vw,34px);letter-spacing:-.01em;line-height:1.1;white-space:nowrap}
.specs span{font-size:12.5px;color:var(--dim)}
.list-dash{display:grid;gap:6px;font-size:14.5px;color:var(--text)}
.list-dash li{list-style:none;padding-left:1.3em;position:relative}
.list-dash li::before{content:"";position:absolute;left:1px;top:calc(.8em - 2px);width:5px;height:5px;border-radius:50%;background:var(--c,var(--hot))}

/* 取引先: ロゴは色を保つため明るい板に載せる */
.logos{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
.logos div{height:110px;display:grid;place-items:center;padding:14px 22px;background:#E9EAEC}
.logos img{max-height:56px;max-width:80%;width:auto;object-fit:contain;mix-blend-mode:multiply}
.logos div:nth-child(6) img{transform:scale(1.4)}
.clients{display:grid;grid-template-columns:1.3fr 1fr .8fr;gap:clamp(20px,3vw,40px);margin-top:clamp(32px,4vw,48px)}
.cg{display:grid;gap:12px;align-content:start}
.cg h3{font-family:var(--f-mono);font-weight:500;font-size:12px;letter-spacing:.14em;display:flex;align-items:center;gap:10px}
.cg h3::before{content:"";width:7px;height:7px;background:var(--c)}
.cg h3 small{color:var(--dim);letter-spacing:.06em}
.cg ul{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:0 20px;list-style:none}
.cg li{font-size:14px;padding:9px 0;border-bottom:1px solid var(--rule);color:var(--text)}
.tools{display:flex;flex-wrap:wrap;gap:22px 40px;align-items:center;opacity:.6}
.tools img{height:28px;width:auto}

/* 会社概要 */
.two{display:grid;grid-template-columns:1fr 1.5fr;gap:clamp(28px,6vw,96px);align-items:start}
.outline{display:grid;grid-template-columns:10em minmax(0,1fr);font-size:15px;border-top:1px solid var(--rule2)}
.outline dt,.outline dd{margin:0;padding:16px 0;border-bottom:1px solid var(--rule)}
.outline dt{color:var(--dim);font-size:13px;letter-spacing:.06em}
.outline dd{font-variant-numeric:tabular-nums}
.outline dd small{display:block;color:var(--dim);font-size:13px}
.offices{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.offices div{background:var(--bg2)!important;border:1px solid var(--rule);padding:18px 20px;font-size:13.5px;color:var(--text);line-height:1.75}
.offices b{display:block;font-family:var(--f-mono);font-weight:500;letter-spacing:.14em;color:var(--hot-t);font-size:11.5px;margin-bottom:6px}
.offices .open{display:inline-block;margin-top:8px;font-size:12px;font-weight:700;color:#111;background:var(--hot);padding:2px 10px}
.history{display:grid;border-top:1px solid var(--rule2)}
.history div{display:grid;grid-template-columns:6.5em 1fr;gap:14px;font-size:14.5px;padding:13px 0;border-bottom:1px solid var(--rule)}
.history time{font-family:var(--f-mono);color:var(--hot-t);font-size:13px}
.mv{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,24px)}
.mv > div{background:var(--bg2);border:1px solid var(--rule);padding:clamp(28px,4vw,48px);display:grid;gap:16px;align-content:start}
.mv h3{font-size:clamp(20px,2vw,26px)}
.mv p{color:var(--text)}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.gallery img{width:100%;aspect-ratio:3/2;object-fit:cover;border:1px solid var(--rule)}

.gallery img.wide{grid-column:span 2;aspect-ratio:auto;height:100%}

/* サービス */
.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px)}
.svc article{display:grid;gap:12px;align-content:start;background:var(--bg2);border:1px solid var(--rule);padding:clamp(18px,2vw,26px)}

.svc h3{font-size:19px}
.svc p{font-size:14.5px;color:var(--text)}
.svc img{width:100%;aspect-ratio:16/10;object-fit:cover;margin-bottom:6px;border:1px solid var(--rule)}

/* 実績一覧 */
.filters{display:grid;gap:12px;margin-bottom:36px;padding:18px 20px;border:1px solid var(--rule);background:var(--bg2)}
.filters .row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.filters .row > span{font-family:var(--f-mono);font-size:11px;color:var(--dim);letter-spacing:.14em;width:6.5em;text-transform:uppercase}
.fbtn{font:inherit;font-size:13px;padding:6px 14px;border:1px solid var(--rule2);background:transparent;color:var(--text);cursor:pointer;transition:border-color .2s,color .2s}
.fbtn:hover{border-color:var(--ink);color:var(--ink)}
.fbtn[aria-pressed="true"]{background:var(--hot);border-color:var(--hot);color:#111}
.count{font-family:var(--f-mono);font-size:12px;color:var(--hot-t)}
.wgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:clamp(14px,1.6vw,20px)}
.wcard{display:grid;align-content:start;background:var(--bg2);border:1px solid var(--rule);transition:border-color .2s}
.wcard:hover{border-color:var(--hot)}
.wcard .im{aspect-ratio:1;overflow:hidden;background:#fff}
.wcard .im img{width:100%;height:100%;object-fit:contain;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.wcard:hover .im img{transform:scale(1.035)}
.wcard .tx{display:grid;gap:4px;padding:12px 14px 16px;border-top:1px solid var(--rule)}
.wcard .meta{display:flex;gap:8px;align-items:center;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;color:var(--dim)}
.wcard .meta i{font-style:normal;color:var(--c)}
.wcard b{font-size:14.5px;line-height:1.5}
.wcard .role{font-size:12.5px;color:var(--text);line-height:1.5}
.wcard .role:empty{display:none}
.wcard .lk{font-size:12px;color:var(--dim);text-decoration:underline;text-underline-offset:3px}
.wcard .lk:hover{color:var(--hot-t)}
.wcard[hidden]{display:none}
.wlist-h{font-size:20px;margin:72px 0 14px}
.wlist{list-style:none;border-top:1px solid var(--rule2)}
.wlist li{display:grid;grid-template-columns:4em 6em 1fr auto;gap:14px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--rule);font-size:14px}

.wlist i{font-style:normal;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;color:var(--c)}
.wlist b{font-weight:500;color:var(--text)}
.wlist .lk{font-size:12px;color:var(--dim);white-space:nowrap;text-decoration:underline;text-underline-offset:3px}
.wlist li[hidden]{display:none}

/* スタジオ設備 */
.feat{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,20px)}
.feat article{display:grid;gap:12px;align-content:start}
.feat article:first-child,.feat article:nth-child(2){grid-column:span 2;grid-row:span 2}
.feat article:first-child img,.feat article:nth-child(2) img{aspect-ratio:auto;height:100%;max-height:520px}
.feat img{width:100%;aspect-ratio:3/2;object-fit:cover;border:1px solid var(--rule)}
.feat .tx{display:grid;gap:6px}
.feat h3{font-size:clamp(15.5px,1.4vw,18px)}
.feat p{font-size:14px;color:var(--text)}
.price{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;background:var(--bg2);border:1px solid var(--rule);padding:clamp(28px,4vw,48px)}
.price h3{font-size:clamp(20px,2vw,26px);margin:10px 0 8px}
.dl{display:flex;flex-wrap:wrap;gap:10px}

/* 採用 */
.jobs{display:grid;gap:clamp(20px,3vw,32px)}
.job{display:grid;grid-template-columns:clamp(220px,26%,320px) minmax(0,1fr);gap:clamp(20px,4vw,56px);padding:clamp(24px,3vw,40px);background:var(--bg2);border:1px solid var(--rule)}
.job .head{display:grid;gap:10px;align-content:start;position:sticky;top:calc(var(--hh) + 20px)}
.job .head h3:not(.en){font-size:clamp(20px,2vw,24px)}
.job .head .kind{justify-self:start;font-size:12px;font-weight:700;padding:3px 12px;background:var(--c);color:#111}
.job .outline{background:var(--bg);border:1px solid var(--rule);padding:4px 22px;grid-template-columns:9em minmax(0,1fr)}
.job .outline dd:last-of-type,.job .outline dt:last-of-type{border-bottom:0}
.flow{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.flow span{border:1px solid var(--rule2);padding:4px 12px;font-size:13px}
.flow i{font-style:normal;color:var(--hot-t)}
.deadline{display:inline-block;font-size:13.5px;font-weight:700;color:#111;background:var(--hot);padding:5px 14px}

.catch{font-size:clamp(26px,3.2vw,44px);font-weight:900;white-space:nowrap}

/* フォーム */
.form{display:grid;gap:20px;max-width:720px}
.form label{display:grid;gap:8px;font-size:14px;font-weight:700}
.form label .req{color:var(--hot-t);font-family:var(--f-mono);font-size:10.5px;margin-left:8px}
.form input,.form select,.form textarea{font:inherit;font-size:15px;color:var(--ink);background:var(--bg2);border:1px solid var(--rule2);padding:13px 16px;width:100%;transition:border-color .2s}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--hot)}
.form textarea{min-height:200px;resize:vertical}
.form .agree{display:flex;gap:10px;align-items:center;font-weight:500}
.form .agree input{width:18px;height:18px;accent-color:var(--hot)}
.form .agree a{text-decoration:underline}
.form button{cursor:pointer;font-size:13px}
.sent{display:none;padding:16px 20px;border:1px solid var(--hot);background:var(--bg2)}

/* 本文 (プライバシーポリシー) */
.doc{max-width:820px;display:grid;gap:32px}
.doc h2{font-size:18px;margin-bottom:10px;padding-left:14px;border-left:2px solid var(--hot)}
.doc p,.doc li{color:var(--text);font-size:15px}

/* お知らせ・ブログ */

/* 採用の帯: 黄色の面 */
.recruit-band{padding-block:clamp(40px,6vw,80px)}
.recruit-band .card{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;background:var(--hot);color:#111;padding:clamp(32px,5vw,64px);
  background-image:linear-gradient(rgba(0,0,0,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.07) 1px,transparent 1px);background-size:40px 40px}
.recruit-band .card::before{display:none}
.recruit-band .eyebrow{color:#111;--c:#111}
.recruit-band h2{font-size:clamp(30px,4vw,52px);font-weight:900;margin-top:12px}
.recruit-band p{margin-top:10px;font-size:16px}
.recruit-band .cta{background:#111;color:var(--hot-t);border-color:#111}

/* フッター */
.gf{background:var(--bg);border-top:1px solid var(--rule);padding-block:clamp(48px,6vw,80px) 28px;margin-top:clamp(40px,5vw,64px);font-size:13.5px;color:var(--text)}
.gf .inner{display:grid;gap:40px}
.gf .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px}
.gf img{height:32px;width:auto;margin-bottom:18px}
.gf b{display:block;color:var(--hot-t);font-family:var(--f-mono);font-weight:500;letter-spacing:.14em;font-size:11.5px;margin-bottom:10px}
.gf ul{list-style:none;display:grid;gap:6px}
.gf a:hover{color:var(--ink)}
.gf .copy{font-family:var(--f-mono);font-size:11.5px;color:var(--dim);border-top:1px solid var(--rule);padding-top:22px}

@media (max-width:1000px){
  :root{--hh:60px}
  .gh nav{display:none}
  .gh nav.open{display:block;position:fixed;inset:var(--hh) 0 auto 0;background:var(--bg);border-bottom:1px solid var(--rule);padding:12px var(--gut) 28px}
  .gh nav.open ul{flex-direction:column;gap:6px;font-size:16px}
  .burger{display:block}
  .gh .lang{display:none}
  .gh .logo img{height:26px}
  .gh .cta{padding:8px 12px;font-size:11.5px}
  .gh .cta::after{content:none}
  .hero4{grid-template-columns:1fr;min-height:0;padding-block:40px 56px}
  .hud{max-width:460px}
  
  
  
  .style,.vt,.studio-band,.two,.mv,.price{grid-template-columns:1fr}
  .titles{grid-template-columns:1fr 1fr}
  .title,.title.wide{grid-column:span 1}
  .clients{grid-template-columns:1fr}
  .logos{grid-template-columns:repeat(2,1fr)}
  .svc{grid-template-columns:1fr 1fr}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .feat{grid-template-columns:1fr 1fr}
  .job{grid-template-columns:1fr}
  .job .head{position:static}
  .gf .cols{grid-template-columns:1fr 1fr}
  .recruit-band .card{grid-template-columns:1fr}
}
@media (max-width:600px){
  body{background-size:48px 48px}
  .gh{gap:10px}
  .gh .right{gap:8px}
  .burger{padding:6px}
  .ph .eyebrow{font-size:clamp(40px,13vw,64px)}
  .ph::after{display:none}
  .outline,.job .outline{grid-template-columns:1fr}
  .outline dt{padding-bottom:0;border-bottom:0}
  .outline dd{padding-top:4px}
  .titles,.svc{grid-template-columns:1fr}
  .wgrid{grid-template-columns:1fr 1fr;gap:10px}
  .wcard .tx{padding:10px 10px 12px}
  .gf .cols{grid-template-columns:1fr}
  .offices{grid-template-columns:1fr}
  .feat{grid-template-columns:1fr}
  .feat article:first-child,.feat article:nth-child(2){grid-column:auto;grid-row:auto}
  .wlist li{grid-template-columns:3.6em 1fr;gap:4px 10px}
  .wlist i{grid-column:2}
  .wlist b,.wlist .lk{grid-column:1 / -1}
  
  
  
  .specs b{font-size:22px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}html{scroll-behavior:auto}}
/* ヘッダーの文字は折り返さない。幅が足りなければ早めにメニューをたたむ */
.gh nav li a,.gh .cta,.gh .lang{white-space:nowrap}
@media (max-width:1180px) and (min-width:1001px){.gh nav li a::before{display:none}.gh nav ul{gap:16px}}
.gh .cta{flex-shrink:0}

/* v4.1: 線画と人形をやめ、実物 (映像・作品) を枠に入れる */
.hud{aspect-ratio:4/3.4;max-width:680px;border:1px solid var(--rule2);background:#000;overflow:hidden}
.hud::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(var(--hot),var(--hot)) top left/18px 2px,linear-gradient(var(--hot),var(--hot)) top left/2px 18px,
    linear-gradient(var(--hot),var(--hot)) top right/18px 2px,linear-gradient(var(--hot),var(--hot)) top right/2px 18px,
    linear-gradient(var(--hot),var(--hot)) bottom left/18px 2px,linear-gradient(var(--hot),var(--hot)) bottom left/2px 18px,
    linear-gradient(var(--hot),var(--hot)) bottom right/18px 2px,linear-gradient(var(--hot),var(--hot)) bottom right/2px 18px;background-repeat:no-repeat}
.hud::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.55),transparent 22%,transparent 75%,rgba(0,0,0,.65))}
.hud video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(.35) contrast(1.08) brightness(.8)}

.hud .lab{z-index:3;color:rgba(255,255,255,.7)}
.hud .lab.tl{left:18px;top:14px}
.hud .lab.br{right:18px;bottom:14px;text-align:right}

@keyframes blink{50%{opacity:.25}}

@media (max-width:1000px){.hud{max-width:none;width:100%}}

/* 下層ページの見出し (写真あり): 大きな写真を暗く敷いて英字を重ねる */
.ph-img{min-height:clamp(340px,46vw,560px);display:grid;align-items:end;overflow:hidden;isolation:isolate}
.ph-img .pic{position:absolute;inset:0;z-index:-1}
.ph-img .pic img{width:100%;height:100%;object-fit:cover;animation:kb 12s ease-out both;filter:saturate(.9)}
.ph-img .pic::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,12,14,.88),rgba(11,12,14,.35) 65%,rgba(11,12,14,.2)),linear-gradient(0deg,rgba(11,12,14,.9),transparent 45%)}
.ph-img .inner{width:100%}
@keyframes kb{from{transform:scale(1.06)}to{transform:scale(1)}}
@media (max-width:600px){.ph-img{min-height:300px}}

/* v4.2: 最初の画面はスタジオの映像を全面に敷く */
.hero-wrap{position:relative;overflow:hidden;isolation:isolate;border-bottom:1px solid var(--rule)}
.hero-wrap .hero4{grid-template-columns:1fr;min-height:calc(100svh - var(--hh) - 110px)}
.hero-wrap .copy{max-width:760px}
.hero-wrap .hud{position:absolute;inset:0;z-index:-1;max-width:none;width:auto;aspect-ratio:auto;border:0}
.hero-wrap .hud video{filter:grayscale(.3) contrast(1.1) brightness(.42)}
.hero-wrap .hud::after{background:linear-gradient(90deg,rgba(11,12,14,.92),rgba(11,12,14,.55) 50%,rgba(11,12,14,.15)),linear-gradient(0deg,rgba(11,12,14,.85),transparent 35%)}
.hero-wrap .hud::before{inset:16px}

.hero-wrap .hud .lab.tl{left:auto;right:34px;top:30px;text-align:right}

.hero-wrap .hud .lab.br{display:none}
@media (max-width:1000px){
  .hero-wrap .hero4{min-height:0;padding-block:72px 64px}
  
  .hero-wrap .hud::after{background:linear-gradient(0deg,rgba(11,12,14,.92),rgba(11,12,14,.6) 70%,rgba(11,12,14,.4))}
}

/* v4.3: 最初の画面は作品の壁 (案B) を全面に敷く */
.hero-wrap .hud{background:var(--bg)}
.hero-wrap .wall{position:absolute;inset:-4% -2%;display:grid;grid-template-columns:repeat(7,1fr);gap:6px;transform:rotate(-4deg) scale(1.08)}
.hero-wrap .wall .col{display:grid;gap:6px;align-content:start;animation:wall-up 90s linear infinite}
.hero-wrap .wall .col:nth-child(even){animation-name:wall-dn;animation-duration:110s}
.hero-wrap .wall img{width:100%;aspect-ratio:1;object-fit:cover;background:#fff;filter:saturate(.85)}
@keyframes wall-up{from{transform:translateY(0)}to{transform:translateY(calc(-50% - 3px))}}
@keyframes wall-dn{from{transform:translateY(calc(-50% - 3px))}to{transform:translateY(0)}}
.hero-wrap .hud::after{background:linear-gradient(90deg,rgba(11,12,14,.95),rgba(11,12,14,.78) 45%,rgba(11,12,14,.35)),linear-gradient(0deg,rgba(11,12,14,.9),transparent 40%)}
@media (max-width:1000px){
  .hero-wrap .wall{grid-template-columns:repeat(4,1fr)}
  .hero-wrap .wall .col:nth-child(n+5){display:none}
  .hero-wrap .hud::after{background:linear-gradient(0deg,rgba(11,12,14,.95),rgba(11,12,14,.72) 75%,rgba(11,12,14,.5))}
}
.hero-wrap .hud{justify-self:stretch;align-self:stretch}
@media (max-width:1000px){.hero-wrap .hud .lab{display:none}}

/* v4.4: 暗すぎないように。作品の壁は色をそのまま見せ、文字の後ろだけ暗くする。地も少し明るく */
:root{--bg:#14161A;--bg2:#1C1F24;--bg3:#262A31;--rule:rgba(255,255,255,.11);--text:#C3C7CE;--dim:#8F949D}
.hero-wrap .wall img{filter:none}
.hero-wrap .wall{gap:8px}
.hero-wrap .hud::after{background:
  linear-gradient(90deg,rgba(20,22,26,.93) 0,rgba(20,22,26,.8) 30%,rgba(20,22,26,.25) 58%,rgba(20,22,26,0) 75%),
  linear-gradient(0deg,rgba(20,22,26,.85),transparent 22%)}
.hero-wrap .hud::before{display:none}
.hero4 h1{text-shadow:0 2px 24px rgba(0,0,0,.35)}
.sec.tint{background:var(--tint)}
/* 黄色の面を少し増やす: 数字の帯 */

@media (max-width:1000px){
  .hero-wrap .hud::after{background:linear-gradient(0deg,rgba(20,22,26,.95) 0,rgba(20,22,26,.8) 55%,rgba(20,22,26,.35) 100%)}
}
.hero-wrap .copy{max-width:600px}
.hero-wrap .hud::after{background:
  linear-gradient(90deg,rgba(20,22,26,.95) 0,rgba(20,22,26,.88) 34%,rgba(20,22,26,.3) 55%,rgba(20,22,26,0) 72%),
  linear-gradient(0deg,rgba(20,22,26,.85),transparent 22%)}
@media (max-width:1000px){
  .hero-wrap .hud::after{background:linear-gradient(0deg,rgba(20,22,26,.96) 0,rgba(20,22,26,.86) 50%,rgba(20,22,26,.2) 100%)}
}
.hero-wrap .desc{max-width:28em}
.motto{display:grid;gap:14px;padding:clamp(28px,4vw,48px) 0;border-block:1px solid var(--rule2);border-top:0}
.motto b{font-size:clamp(26px,3.4vw,46px);font-weight:900;letter-spacing:.04em;color:var(--hot-t)}
.motto span{font-size:clamp(15px,1.4vw,19px);letter-spacing:.12em}

/* v4.5: 下層ページの見出しは低くして、すぐ本文に入れるように */
.ph-img{min-height:0;height:clamp(200px,22vw,280px);padding-top:0;padding-bottom:clamp(22px,2.6vw,32px)}
.ph{padding-top:clamp(36px,4vw,56px);padding-bottom:clamp(22px,2.6vw,32px)}
.ph .eyebrow{font-size:clamp(40px,5.6vw,80px)}
.ph .inner{gap:8px}
.ph::after{bottom:clamp(22px,2.6vw,32px)}
.ph + .sec,.ph-img + .sec{padding-top:clamp(40px,5vw,64px)}
@media (max-width:600px){.ph-img{height:180px}.ph .eyebrow{font-size:40px}}

/* v4.6: 方眼の背景をやめる。無地に、ごく弱い光のにじみと細かい粒子 */
body{background-color:var(--bg);background-size:auto;background-position:0 0;
  background-image:
    radial-gradient(1200px 700px at 85% -10%,rgba(254,195,23,.07),transparent 60%),
    radial-gradient(900px 600px at -10% 40%,rgba(92,159,224,.06),transparent 60%),
    radial-gradient(1000px 700px at 110% 90%,rgba(226,102,94,.05),transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@media (max-width:600px){body{background-size:auto}}
.recruit-band .card{background-image:none}
.motto{margin-top:clamp(32px,4vw,56px)}
.motto .eyebrow{color:var(--hot-t)}
.motto b{font-size:clamp(30px,4.4vw,60px)}
/* 見出しの帯: 作品を並べたもの (写真の解像度が足りないページ用) */
.ph-img .pic.tiles{display:grid;grid-template-columns:repeat(12,1fr);gap:6px;align-content:center;transform:rotate(-3deg) scale(1.15)}
.ph-img .pic.tiles img{width:100%;aspect-ratio:1;object-fit:cover;background:#fff;animation:none}

@media (max-width:600px){.ph-img .pic.tiles{grid-template-columns:repeat(6,1fr)}}
/* 余白を切った作品画像を上寄せで切り抜く (顔が切れないように) */
.hero-wrap .wall img,.ph-img .pic.tiles img{object-fit:cover;object-position:50% 12%}
.hero-wrap .wall img{aspect-ratio:3/4}
.ph-img .pic.tiles{grid-template-columns:repeat(12,1fr);transform:none;inset:0;align-content:stretch;gap:4px}
.ph-img .pic.tiles img{aspect-ratio:auto;height:100%}
@media (max-width:600px){.ph-img .pic.tiles{grid-template-columns:repeat(5,1fr)}.ph-img .pic.tiles img:nth-child(n+6){display:none}}

/* v4.7: 数字の帯をやめ、取引先のロゴを流す帯にする */

@keyframes marq{to{transform:translateX(-50%)}}

/* ゲームページ */
.cta.off{background:transparent;color:var(--dim);border-color:var(--rule2);cursor:default}.cta.off::after{content:none}
.game{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(24px,4vw,56px);align-items:start}
.game .key{position:relative;border:1px solid var(--rule2);background:#000;overflow:hidden}
.game .key img{width:100%;display:block}
.game .key .logo{position:absolute;left:50%;bottom:6%;width:min(56%,420px);transform:translateX(-50%);mix-blend-mode:screen;image-rendering:pixelated}
.game .key img:first-child{aspect-ratio:1024/616;object-fit:cover;filter:brightness(.85)}
.game .info{display:grid;gap:14px;align-content:start}
.game h2{font-family:var(--f-en);font-size:clamp(34px,4vw,56px);font-weight:600;line-height:1}
.game .sub{font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;color:var(--hot-t);text-transform:uppercase}
.game .catch{font-size:clamp(15px,1.3vw,17px);line-height:2;margin:8px 0}
.game .outline{grid-template-columns:7.5em minmax(0,1fr);font-size:14px}
.game .outline dt,.game .outline dd{padding:9px 0}
.game .btns{margin-top:10px}

.gsteps{display:grid;gap:14px;counter-reset:s;list-style:none}
.gsteps li{position:relative;padding-left:3em;color:var(--text)}
.gsteps li::before{counter-increment:s;content:"0" counter(s);position:absolute;left:0;top:.1em;font-family:var(--f-mono);color:var(--hot-t)}
.gsteps a{color:var(--hot-t);text-decoration:underline;text-underline-offset:3px}
.lead a{color:var(--hot-t);text-decoration:underline;text-underline-offset:3px}
.gnexts{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.gnext{aspect-ratio:4/3;display:grid;align-content:space-between;padding:18px;background:var(--bg2);border:1px dashed var(--rule2)}
.gnext .no{font-family:var(--f-mono);font-size:11px;color:var(--dim);letter-spacing:.14em}
.gnext b{font-family:var(--f-en);font-size:clamp(32px,3vw,44px);color:var(--rule2)}
@media (max-width:1000px){.game{grid-template-columns:1fr}.gnexts{grid-template-columns:1fr 1fr}}

.studio-band .ph2 img{filter:brightness(1.08) contrast(1.06) saturate(1.05)}
.game .key img:first-child{aspect-ratio:5/3;object-fit:contain;filter:none;image-rendering:pixelated}

/* Playdate 本体 (CSS で描く)。画面の中でゲームのアートを切り替える */
.game{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center}
.pd{position:relative;width:min(100%,560px);justify-self:center;padding-right:7%}
.pd-body{position:relative;aspect-ratio:74/76;background:linear-gradient(160deg,#FFD23F,#F6BE25 55%,#E5A912);border-radius:7%/7%;padding:8% 7.5% 0;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.55),inset 0 -6px 14px rgba(140,90,0,.25),0 30px 60px -20px rgba(0,0,0,.7),0 0 0 1px rgba(0,0,0,.15)}
.pd-bezel{background:#1d1c19;border-radius:3.5%;padding:5.5% 5%;box-shadow:inset 0 0 0 2px rgba(255,255,255,.05)}
.pd-screen{position:relative;aspect-ratio:5/3;background:#B1AEA7;overflow:hidden}
.pd-screen img{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;opacity:0;transition:opacity .35s steps(3)}
.pd-screen img.on{opacity:1}
.pd-screen::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.10),transparent 40%);pointer-events:none}
.pd-ctrl{position:relative;height:40%}
.pd-dpad{position:absolute;left:4%;top:24%;width:28%;aspect-ratio:1}
.pd-dpad::before,.pd-dpad::after{content:"";position:absolute;background:#2a2824;border-radius:6px;box-shadow:0 3px 0 rgba(0,0,0,.25)}
.pd-dpad::before{left:34%;top:0;width:32%;height:100%}.pd-dpad::after{top:34%;left:0;height:32%;width:100%}
.pd-a,.pd-b{position:absolute;width:15%;aspect-ratio:1;border-radius:50%;background:#2a2824;color:#F6BE25;font:600 11px/1 var(--f-en);display:grid;place-items:center;box-shadow:0 3px 0 rgba(0,0,0,.3)}
.pd-a{right:4%;top:24%}.pd-b{right:24%;top:40%}
.pd-a,.pd-b{color:transparent}

.pd-grill{position:absolute;right:10%;bottom:7%;width:16%;height:4%;background:radial-gradient(circle,#b98a10 30%,transparent 32%) 0 0/12% 100%}
.pd-crank{position:absolute;right:0;top:46%;width:8%;height:24%}
.pd-crank i{position:absolute;left:0;top:30%;width:60%;height:40%;background:linear-gradient(#e9e9e6,#bdbdb8);border-radius:0 4px 4px 0}
.pd-crank b{position:absolute;left:35%;top:0;width:65%;height:100%;background:linear-gradient(90deg,#f2f2ee,#c9c9c3);border-radius:999px;box-shadow:0 4px 10px rgba(0,0,0,.4);transform-origin:50% 50%;animation:crank 6s ease-in-out infinite}
@keyframes crank{0%,70%{transform:rotate(0)}85%{transform:rotate(25deg)}100%{transform:rotate(0)}}
.pd-thumbs{display:grid;grid-template-columns:repeat(7,1fr);gap:10px}
.pd-thumbs button{padding:0;border:1px solid var(--rule);background:#1d1c19;cursor:pointer;transition:border-color .2s,transform .2s}
.pd-thumbs button:hover{border-color:var(--ink)}
.pd-thumbs button.on{border-color:var(--hot);transform:translateY(-3px)}
.pd-thumbs img{width:100%;aspect-ratio:5/3;image-rendering:pixelated;display:block}
@media (max-width:1000px){.pd-thumbs{grid-template-columns:repeat(5,1fr)}}
@media (max-width:600px){.pd-thumbs{grid-template-columns:repeat(4,1fr);gap:6px}}
.pdwrap{display:grid;gap:16px;justify-items:center}
.pd-nav{display:flex;align-items:center;gap:18px;font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;color:var(--dim)}
.pd-nav button{background:none;border:1px solid var(--rule2);color:var(--ink);width:34px;height:34px;cursor:pointer;font-size:11px;transition:border-color .2s,color .2s}
.pd-nav button:hover{border-color:var(--hot);color:var(--hot-t)}
@media (max-width:1000px){.game{grid-template-columns:1fr}.pd{width:min(100%,420px)}}

/* Playdate 本体 v2: 平らな黄色、細い縁、切り替えは液晶らしく一瞬で */
.pd{padding-right:9%}
.pd-body{background:#FFC425;border-radius:10%/10%;padding:7% 6.5% 0;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08),inset 0 3px 0 rgba(255,255,255,.35),inset 0 -4px 0 rgba(0,0,0,.08),0 40px 70px -30px rgba(0,0,0,.8)}
.pd-bezel{background:#24231f;border-radius:3%/5%;padding:4.2% 4.2% 4.6%}
.pd-screen{background:#B1AEA7;box-shadow:inset 0 0 0 1px rgba(0,0,0,.35)}
.pd-screen img{transition:none}
.pd-screen img.on{animation:lcd .18s steps(2)}
@keyframes lcd{0%{opacity:.2}100%{opacity:1}}
.pd-screen::after{background:linear-gradient(160deg,rgba(255,255,255,.08),transparent 35%)}

.pd-ctrl{height:42%}
.pd-dpad{left:5%;top:26%;width:27%}
.pd-dpad::before,.pd-dpad::after{background:#2b2a26;border-radius:4px;box-shadow:0 2px 0 rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.08)}
.pd-a,.pd-b{width:14%;background:#2b2a26;box-shadow:0 2px 0 rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.08)}
.pd-a{right:5%;top:22%}.pd-b{right:23%;top:36%}
.pd-grill{right:7%;bottom:9%;width:18%;height:3.2%;background:radial-gradient(circle,rgba(120,80,0,.55) 32%,transparent 36%) 0 0/11% 100%}
/* クランク: 側面の軸 + 細い腕 + つまみ */
.pd-crank{right:0;top:44%;width:10%;height:30%}
.pd-crank i{left:0;top:6%;width:42%;height:22%;background:linear-gradient(#f4f3ef,#cfcdc6 60%,#b8b5ad);border-radius:0 6px 6px 0;box-shadow:0 2px 4px rgba(0,0,0,.35)}
.pd-crank b{left:14%;top:12%;width:16%;height:76%;background:linear-gradient(90deg,#d9d7d0,#f6f5f1 50%,#c4c1b9);border-radius:3px;box-shadow:0 3px 6px rgba(0,0,0,.35);transform-origin:50% 8%;animation:crank 7s ease-in-out infinite}
.pd-crank b::after{content:"";position:absolute;left:50%;bottom:-6%;width:260%;aspect-ratio:1/1.6;transform:translateX(-50%);background:linear-gradient(90deg,#cfcdc6,#fbfaf7 45%,#bdbab2);border-radius:40%;box-shadow:0 3px 6px rgba(0,0,0,.4)}
@keyframes crank{0%,60%{transform:rotate(0)}75%{transform:rotate(-35deg)}90%{transform:rotate(10deg)}100%{transform:rotate(0)}}

/* Playdate 本体 v3: 実機 (play.date の写真) に寄せる。濃い黄・大きな黒い画面・右の列 (鍵・メニュー・スピーカー)・金属のクランク・四隅のねじ */
.pd{padding-right:7%;width:min(100%,600px)}
.pd-body{aspect-ratio:100/96;background:linear-gradient(135deg,#FFC93A,#FDBA24 60%,#F2AC17);border-radius:4.5%;padding:2% 14.5% 0 2%;
  box-shadow:inset 3px 3px 0 rgba(255,236,170,.55),inset -3px -4px 0 rgba(190,120,0,.35),0 1px 0 #d99a12,0 40px 70px -30px rgba(0,0,0,.8)}
.pd-body::before{content:"";position:absolute;right:13%;top:-1.2%;width:10%;height:1.3%;background:linear-gradient(#9a9a96,#5d5d5a);border-radius:3px 3px 0 0}
.pd-bezel{background:#0c0c0c;border-radius:4.5%/7%;padding:3.6% 4.4% 4.4%;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.pd-bezel::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.16),rgba(255,255,255,.04) 30%,transparent 31%);pointer-events:none}
.pd-screen{background:#B1AEA7;box-shadow:none}
.pd-screen::after{display:none}
.pd-ctrl{height:46%}
/* 四隅 (下) のねじ */
.pd-ctrl::before,.pd-ctrl::after{content:"";position:absolute;bottom:6%;width:5.4%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,#222 0 22%,#7c7c78 26%,#bdbdb8 48%,#8a8a85 62%,#4b4b48 70%,rgba(0,0,0,0) 72%)}
.pd-ctrl::before{left:2.5%}.pd-ctrl::after{right:-14%}
/* 十字キー: 本体と同じ黄の立体の十字 */
.pd-dpad{left:9%;top:20%;width:30%;filter:drop-shadow(0 3px 0 #D99A12) drop-shadow(0 6px 6px rgba(120,70,0,.35))}
.pd-dpad::before,.pd-dpad::after{background:linear-gradient(160deg,#FFD24E,#FDBB26);border-radius:22%/14%;box-shadow:none}
.pd-dpad::before{left:33%;width:34%}.pd-dpad::after{top:33%;height:34%;border-radius:14%/22%}
/* A / B: 黄の丸いボタン、淡い灰の円と字 */
.pd-a,.pd-b{width:14.5%;color:#f4f2ec;font:600 clamp(15px,3.6vw,26px)/1 var(--f-en);text-shadow:0 1px 0 rgba(0,0,0,.08);
  background:radial-gradient(circle,#e6e3dc 0 30%,#d2cec6 31% 33%,#FFC93A 35%,#FDBA24 70%);box-shadow:0 3px 0 #D99A12,0 6px 8px rgba(120,70,0,.35)}
.pd-a{right:12%;top:18%}.pd-b{right:36%;top:18%}
.pd-a,.pd-b{color:#fbfaf6}
/* 右の列: 鍵 (金属の輪)・メニュー (黄に白)・スピーカー */
.pd-side{position:absolute;right:2.4%;top:3%;width:9.6%;display:flex;flex-direction:column;align-items:center;gap:6%;font-size:0}
.pd-side span{display:block;width:100%;aspect-ratio:1;border-radius:50%}
.pd-lock{background:radial-gradient(circle,#2a2a28 0 22%,#7a7a76 26%,#c9c9c4 45%,#8d8d88 60%,#5a5a56 70%,rgba(0,0,0,0) 72%)}
.pd-menu2{background:radial-gradient(circle,#ecebe6 0 27%,#FDBA24 31%,#FFC93A 58%,#D99A12 66%,rgba(0,0,0,0) 69%);filter:drop-shadow(0 2px 2px rgba(120,70,0,.4))}
.pd-grill{display:block;right:4.5%;left:auto;top:24%;bottom:auto;width:5.4%;height:17%;border-radius:999px;
  background:radial-gradient(circle,#555 30%,transparent 38%) 0 0/50% 7% #1b1b1b;box-shadow:inset 0 0 0 2px #333,0 0 0 1px rgba(0,0,0,.25)}
/* クランク: 側面にたたんだ金属の腕 */
.pd-crank{right:0;left:auto;top:47%;width:7.5%;height:33%}
.pd-crank i{left:0;top:0;width:55%;height:12%;background:linear-gradient(#8e8e8a,#4e4e4b);border-radius:0 4px 4px 0;box-shadow:none;transform:none}
.pd-crank b{left:12%;top:4%;width:60%;height:92%;aspect-ratio:auto;transform:none;font-size:inherit;border:0;border-radius:4px 10px 6px 4px;
  background:linear-gradient(90deg,#4a4a47,#8c8c88 35%,#a9a9a4 55%,#6a6a66);box-shadow:-2px 3px 6px rgba(0,0,0,.4);animation:none}
.pd-crank b::after{display:block;content:"";position:absolute;left:58%;top:6%;width:22%;height:auto;aspect-ratio:1;border-radius:50%;background:#FDBA24;transform:none;box-shadow:none}
.pd-crank::after{display:none}

/* Playdate 本体 v3 調整: 色を濃く、ボタン・スピーカー・クランクを実機の形に */
.pd-body{background:linear-gradient(135deg,#FFC814,#FFBA00 55%,#F5AC00);
  box-shadow:inset 3px 3px 0 rgba(255,228,120,.6),inset -3px -4px 0 rgba(180,110,0,.4),0 1px 0 #cf8f00,0 40px 70px -30px rgba(0,0,0,.8)}
.pd-dpad{filter:drop-shadow(0 3px 0 #D49300) drop-shadow(0 6px 6px rgba(110,60,0,.4))}
.pd-dpad::before,.pd-dpad::after{background:linear-gradient(160deg,#FFD02A,#FFBA00)}
/* A / B: 黄の丸いボタン。真ん中にクリーム色の円、字は黄で抜く */
.pd-a,.pd-b{color:#F7B300;font:800 clamp(10px,2.2vw,16px)/1 var(--f-en);text-shadow:none;
  background:radial-gradient(circle,#F4EBD3 0 34%,#E3D7B6 35% 36.5%,#FFC40A 38%,#FFBA00 66%,#F0A800 72%);
  box-shadow:0 3px 0 #D49300,0 6px 8px rgba(110,60,0,.4),inset 0 2px 0 rgba(255,236,150,.7)}
/* メニュー: 黄のボタンに小さな白い円 */
.pd-menu2{background:radial-gradient(circle,#fbfaf6 0 22%,#e2dccb 23% 25%,#FFC40A 27%,#FFBA00 52%,#D49300 58% 63%,rgba(0,0,0,0) 65%);filter:drop-shadow(0 2px 2px rgba(110,60,0,.45))}
/* 鍵: 金属の輪と黒い穴 */
.pd-lock{background:radial-gradient(circle,#111 0 18%,#555 21%,#d7d7d2 34%,#a3a39e 50%,#6c6c68 62%,#3c3c3a 68%,rgba(0,0,0,0) 70%)}
/* スピーカー: 細い縦長の銀の枠 + 黒い網 (細かい穴) */
.pd-grill{right:5.9%;top:24.5%;width:2.8%;height:15%;border-radius:999px;
  background:radial-gradient(circle,#6a6a66 32%,transparent 42%) 50% 0/50% 4.2% #151515;
  box-shadow:0 0 0 2px #c9c9c4,0 0 0 3px #7b7b77,inset 0 2px 3px rgba(0,0,0,.6)}
/* クランク: 側面にたたんだ銀の平たい腕。上に軸の丸、下の端は少し外へ出る */
.pd-crank{right:0;top:46%;width:7%;height:30%}
.pd-crank i{left:0;top:2%;width:70%;height:9%;background:linear-gradient(#bfbfba,#7d7d79);border-radius:0 3px 3px 0}
.pd-crank b{left:22%;top:0;width:50%;height:100%;border-radius:3px 3px 2px 2px;
  background:linear-gradient(90deg,#8f8f8a,#e4e4df 30%,#f4f4f0 48%,#c2c2bd 70%,#8a8a85);box-shadow:-2px 3px 6px rgba(0,0,0,.35)}
.pd-crank b::after{left:50%;top:4%;width:34%;transform:translateX(-50%);background:#FFBA00;box-shadow:0 0 0 1.5px #7d7d79}
.pd-crank::after{display:block;content:"";position:absolute;left:22%;bottom:0;top:auto;width:72%;height:9%;transform:none;font-size:inherit;
  background:linear-gradient(90deg,#9d9d98,#e8e8e3 45%,#a8a8a3);border-radius:2px 4px 4px 2px;box-shadow:0 3px 5px rgba(0,0,0,.35)}

/* Playdate 本体 v3 調整2: 実機の写真から部品の位置と大きさを測って合わせる (本体の幅・高さに対する %) */
.pd-ctrl{position:static}
.pd-side{position:static}
.pd-dpad{left:12.5%;top:65%;width:25%}
.pd-a,.pd-b{width:11%;top:67.3%;right:auto;color:#efe9da;font:700 clamp(11px,2.6vw,19px)/1 var(--f-en);
  background:radial-gradient(circle,transparent 0 34%,#efe9da 35.5% 39%,transparent 40.5%),radial-gradient(circle,#FFCB2E 0 58%,#FFBC05 66%,#EBA400 71%)}
.pd-b{left:54.5%}.pd-a{left:73.5%}
.pd-ctrl::before,.pd-ctrl::after{width:6.7%;bottom:auto;top:90.5%;right:auto;
  background:radial-gradient(circle,#1a1a1a 0 20%,#5c5c59 24%,#b4b4af 38%,#d2d2cd 46%,#8b8b87 58%,#4a4a47 66%,rgba(0,0,0,0) 69%)}
.pd-ctrl::before{left:5.6%}.pd-ctrl::after{left:87.7%}
.pd-lock,.pd-menu2{position:absolute;width:7.8%!important}
.pd-lock{left:90.4%;top:1.8%;background:radial-gradient(circle,#0e0e0e 0 19%,#4d4d4a 23%,#a9a9a4 36%,#cfcfca 46%,#8e8e8a 58%,#4b4b48 66%,rgba(0,0,0,0) 68%)}
.pd-menu2{left:90.4%;top:11.8%}
.pd-grill{left:92.3%;right:auto;top:24%;width:3.8%;height:16.5%;
  background:radial-gradient(circle,#8f8f8b 30%,transparent 42%) 50% 0/33.3% 5.2% #1c1c1c;box-shadow:0 0 0 2px #a7a7a2,0 0 0 3px #555,inset 0 2px 3px rgba(0,0,0,.6)}
/* クランク: 本体の右の側面に沿う、濃い金属の太い腕。上に軸の台、黄の点 */
.pd-crank{right:0;top:46%;width:7.6%;height:35%}
.pd-crank i{left:0;top:0;width:100%;height:14%;background:linear-gradient(#a2a29e,#5c5c59);border-radius:2px 6px 6px 2px}
.pd-crank b{left:6%;top:8%;width:94%;height:92%;border-radius:2px 4px 7px 2px;
  background:linear-gradient(90deg,#6c6c69,#a8a8a4 25%,#c3c3be 45%,#8b8b87 80%,#62625f);box-shadow:-2px 3px 6px rgba(0,0,0,.35)}
.pd-crank b::after{left:62%;top:6%;width:22%;transform:translateX(-50%);background:#FFBA00;box-shadow:0 0 0 1.5px #4d4d4a}
.pd-crank::after{display:none}

/* お問い合わせフォーム v2 */
.form .field{display:grid;gap:8px}
.form .field > label:not(.agree){font-size:14px;font-weight:700;display:flex;align-items:center}
.form .hint{margin:0;font-size:12.5px;color:var(--text);line-height:1.7}
.form .hint span{display:block;padding:8px 12px;border-left:2px solid var(--hot);background:rgba(254,195,23,.06)}
.form .err{margin:0;font-size:12.5px;color:#ff8a7a;min-height:0}
.form .err:empty{display:none}
.form [aria-invalid]{border-color:#ff8a7a!important}
.form .count-s{margin:0;justify-self:end;font-family:var(--f-mono);font-size:11px;color:var(--dim)}
.form .count-s.near{color:var(--hot-t)}
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form button[disabled]{opacity:.6;cursor:wait}
.form .sent{display:block;margin:0;padding:0;border:0;background:none;font-size:14px;line-height:1.8}
.form .sent:empty{display:none}
.form .sent.ok{padding:16px 20px;border:1px solid var(--g);background:rgba(79,178,131,.08)}
.form .sent.ng{padding:16px 20px;border:1px solid #ff8a7a;background:rgba(255,138,122,.08)}
.form input::placeholder,.form textarea::placeholder{color:#6d727b}
.form .hint span[hidden]{display:none}
/* 連絡先の事務所: 住所が途中で折れないよう、狭い列では1列に */
.stack .offices{grid-template-columns:1fr}
/* 見出しの帯は1段12枚。ページごとに別の作品になる (Company 0〜 / Recruit 12〜 / Service 24〜 / Works 36〜) */
.ph-img .pic.tiles{grid-template-rows:100%;grid-auto-flow:column}
@media (max-width:600px){.ph-img .pic.tiles{grid-template-columns:repeat(6,1fr)}.ph-img .pic.tiles img:nth-child(n+7){display:none}}
/* スタジオの写真は白い壁が飛びやすいので、黒い地に合わせて少し落とす */
img[src*="img/studio/"]{filter:brightness(.84) contrast(1.06)}

/* スタジオ設備: 1枚目は横長の1段 (写真+説明)、残り6枚は3列×2段でそろえる */
.feat{grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,32px)}
.feat article,.feat article:first-child,.feat article:nth-child(2){grid-column:auto;grid-row:auto;display:grid;gap:12px;align-content:start}
.feat article:first-child,.feat article:nth-child(2){grid-column:1 / -1;grid-template-columns:2fr 1fr;align-items:center;gap:clamp(20px,3vw,40px)}
.feat article img,.feat article:first-child img,.feat article:nth-child(2) img{width:100%;aspect-ratio:3/2;height:auto;max-height:none;object-fit:cover}
.feat article:first-child img,.feat article:nth-child(2) img{aspect-ratio:21/9}
@media (max-width:1180px){.feat{grid-template-columns:1fr 1fr}.feat article:first-child,.feat article:nth-child(2){grid-template-columns:1fr}}
@media (max-width:760px){.feat{grid-template-columns:1fr}}
/* 1段目も下の3列と同じ列を使う (写真は1〜2列目、説明は3列目) ので、端がそろう */
.feat article:first-child,/* 1段目も下の3列と同じ列を使う (写真は1〜2列目、説明は3列目) ので、端がそろう */
.feat article:nth-child(2){grid-template-columns:subgrid;column-gap:inherit}
.feat article:first-child img,.feat article:nth-child(2) img{grid-column:1 / 3}
.feat article:first-child .tx,.feat article:nth-child(2) .tx{grid-column:3}
@media (max-width:1180px){.feat article:first-child,.feat article:nth-child(2){grid-template-columns:1fr}.feat article:first-child img,.feat article:first-child .tx,.feat article:nth-child(2) img,.feat article:nth-child(2) .tx{grid-column:auto}}

/* 余白の詰め: 節の上下を少し小さく。地の色が同じ節が続くときは、間の余白を1つ分にする */
.sec{padding-block:clamp(56px,7vw,96px)}
.sec:not(.tint) + .sec:not(.tint){padding-top:0}
.sec.tint + .sec.tint{padding-top:0}
/* 見出しの写真3枚 */

/* 1枚絵の見出し: 少し高くし、左を暗く右は絵を見せる */
.ph-img:has(.pic > img:only-child){height:clamp(340px,44vw,560px)}
.ph-img .pic > img:only-child{filter:saturate(1.05) contrast(1.05)}
.ph-img .pic:has(> img:only-child)::after{background:linear-gradient(90deg,rgba(20,22,26,.92),rgba(20,22,26,.55) 35%,rgba(20,22,26,.05) 70%),linear-gradient(0deg,rgba(20,22,26,.8),transparent 40%)}
/* 作品の画像は切り抜かず全身を見せる (首や頭が切れる使い方をしない) */
.svc img[src*="img/works/"]{object-fit:contain;background:#fff}

/* 白い枠をやめる: 作品の画像は余白を切った版を、暗い地の上に全身が入るように置く */
.wcard .im,.title .im.fit,.vt-grid img,.svc img[src*="img/trim/"]{background:var(--bg3)}
.wcard .im img,.title .im.fit img,.vt-grid img,.svc img[src*="img/trim/"]{object-fit:contain}
.vt-grid{background:var(--rule)}

/* 横長の枠に立ち絵を入れるときは、上(頭)から切り抜く。首は切らず、腰〜太ももで切れる */
.svc img[src*="img/trim/"],.title .im.fit img[src*="img/trim/"]{object-fit:cover;object-position:50% 6%}

/* 横にはみ出して画面がずれるのを防ぐ (Safari では回した画像が横幅を広げることがある) */
html,body{overflow-x:clip}
.hero-wrap{overflow:clip;contain:paint}
.hero-wrap .hud{overflow:clip;contain:paint}
/* 狭い画面では文字の後ろ全体を暗くする (上の方の小見出しが明るい絵に乗らないように) */
@media (max-width:1000px){
  .hero-wrap .hud::after{background:linear-gradient(0deg,rgba(20,22,26,.96),rgba(20,22,26,.84) 60%,rgba(20,22,26,.78))}
}
/* YouTube の埋め込み */
.yts{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,24px)}
.yt{margin:0;display:grid;gap:10px}
.yt .frame{position:relative;aspect-ratio:16/9;border:1px solid var(--rule);background:#000}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt figcaption{font-size:14px;color:var(--text)}
@media (max-width:700px){.yts{grid-template-columns:1fr}}
.yt .frame{display:block;width:100%;padding:0;cursor:pointer;background:#000 center/cover no-repeat}
.yt .play{position:absolute;left:50%;top:50%;width:68px;height:48px;margin:-24px 0 0 -34px;background:rgba(20,22,26,.85);border:1px solid var(--hot);transition:background .2s}
.yt .play::after{content:"";position:absolute;left:28px;top:14px;border-style:solid;border-width:10px 0 10px 16px;border-color:transparent transparent transparent var(--hot)}
.yt .frame:hover .play{background:var(--hot)}.yt .frame:hover .play::after{border-left-color:#111}

/* 作品は枠付きのカードにしない: 画像を枠いっぱいに並べ、文字はその下に置くだけ */
.wcard,.title{background:none;border:0}
.wcard:hover,.title:hover{border:0}
.wcard .im,.title .im{border:0;background:var(--bg3)}
.wcard .im img,.title .im.fit img{object-fit:cover;object-position:50% 8%}
.wcard .tx,.title .tx{padding:10px 0 0;border-top:0}
.wcard:hover .im img,.title:hover .im img{transform:scale(1.04)}
/* 実績の一覧は元の画像をそのまま (正方形の画像を正方形の枠に、切り抜かず全部見せる) */
.wcard .im img{object-fit:contain;object-position:50% 50%;background:#fff}

/* 2026-10-15: 作品の画像は元のまま全部見せる (切り抜かない・コピーライトを消さない) */
.wcard .im img,.title .im.fit img,.svc img[src*="img/works/"],.vt-grid img{object-fit:contain;object-position:50% 50%;background:#fff}
.wcard .im,.title .im.fit{background:#fff}
.hero-wrap .wall img{aspect-ratio:1;object-fit:contain;object-position:50% 50%;background:#fff}
.ph-img .pic.tiles img{object-fit:contain;background:#fff}

/* 写真は元のまま (明るさ・色をいじらない) 2026-10-15 */
.studio-band .ph2 img,img[src*="img/studio/"],img[src*="img/company/"]{filter:none}

/* まだ明るい → トップの作品の壁を暗めに (絵はいじらず、上にかぶせる幕を濃く) 2026-10-15 */
.hero-wrap .hud::after{background:
  linear-gradient(90deg,rgba(20,22,26,.95) 0,rgba(20,22,26,.9) 34%,rgba(20,22,26,.6) 55%,rgba(20,22,26,.45) 100%),
  linear-gradient(0deg,rgba(20,22,26,.9),transparent 30%)}
@media (max-width:720px){.hero-wrap .hud::after{background:linear-gradient(0deg,rgba(20,22,26,.96),rgba(20,22,26,.86) 60%,rgba(20,22,26,.8))}}
/* 縦横比が合わない絵の余白を白→暗い灰に (絵そのものは元のまま) */
.hero-wrap .wall img,.ph-img .pic.tiles img,.wcard .im,.wcard .im img,.title .im.fit,.title .im.fit img,.svc img[src*="img/works/"],.vt-grid img{background:var(--bg3)}

/* 見出しの作品の壁: 正方形の絵を2段で隙間なく並べる (帯に分かれないように) 2026-10-15 */
.ph-img:has(.pic.tiles){--t:calc((clamp(200px,22vw,280px) - 4px) / 2)}
@media (max-width:600px){.ph-img:has(.pic.tiles){--t:88px}}
.ph-img .pic.tiles{display:grid;grid-template-columns:none;grid-template-rows:repeat(2,var(--t));grid-auto-flow:column;grid-auto-columns:var(--t);gap:4px;align-content:start;justify-content:start;transform:none;inset:0}
.ph-img .pic.tiles img,.ph-img .pic.tiles img:nth-child(n){display:block;width:var(--t);height:var(--t);aspect-ratio:1;object-fit:contain;background:var(--bg3)}

/* スタジオの帯: 写真の高さを右の文に合わせる (2列のとき) / 1列のときは横長で小さめ 2026-10-15 */
.studio-band{align-items:stretch}
.studio-band .ph2{aspect-ratio:auto;min-height:360px;height:100%}
@media (max-width:1000px){.studio-band .ph2{aspect-ratio:16/9;min-height:0;height:auto;max-height:420px}}

/* トップの大見出し「& MOTION CAPTURE」を1行に 2026-10-15 */
.hero-wrap h1{max-width:none;font-size:min(clamp(46px,6.6vw,108px),calc((100vw - 2 * var(--gut)) / 11.4))}
.hero-wrap h1 em{white-space:nowrap}

/* はみ出し防止 (2026-10-15): 並びの中の箱は中身より狭くなれるようにし、長い見出しは文節で折り返す */
.inner > *,.vt > *,.studio-band > *,.style > *,.two > *,.hero4 > *,.game > *,.svc > *,.feat > *,.job > *,.stack > *,.sh > *{min-width:0}
h1,h2,h3{overflow-wrap:anywhere}
.price > *,.gnexts > *,.pdwrap,.pd,.offices > *,.yts > *,.titles > *,.mv > *,.clients > *,.cols > *{min-width:0}
@media (max-width:600px){.gnexts{gap:10px}.gnext{padding:12px}.gnext b{font-size:26px}.price .cta{white-space:normal}}
@media (max-width:600px){.cta{white-space:normal;max-width:100%}}
.game .info,.stack{grid-template-columns:minmax(0,1fr)}
.ph-img .pic img[src*="_1bit"]{image-rendering:pixelated}
/* ゲームの見出し (町と岩のドット絵): 左を暗くしすぎると町が見えないので、下だけ暗くする */
.ph-img:has(img[src*="_1bit"]) .pic::after{background:linear-gradient(0deg,rgba(20,22,26,.88),rgba(20,22,26,.35) 45%,rgba(20,22,26,.1))}
.ph-img:has(img[src*="_1bit"]) .inner{text-shadow:0 2px 12px rgba(0,0,0,.6)}
/* ゲームの見出しの右上に Soul of Abyss のロゴ (見出しの絵と同じ点の大きさ = 幅の 340/768) */
.ph-logo{position:absolute;right:var(--gut);top:clamp(16px,3vw,40px);width:44%;display:grid;gap:6px;justify-items:end;pointer-events:none}
.ph-logo img{image-rendering:pixelated;height:auto}
.ph-logo img:first-child{width:100%}
.ph-logo img:last-child{width:71%;margin-right:7%}
@media (max-width:600px){.ph-logo{width:62%}}
.ph-logo{background:#312F28;padding:1.4% 2% 1.6%;box-shadow:0 0 0 2px #312F28,0 0 0 4px #E8E5DC;width:44%}
.ph-logo img:last-child{margin-right:6%}

/* games の見出しのタイトルロゴ: 主役は見出しの「GAMES」。ロゴは添え物の大きさに。
   画像は Playdate の 2倍 (680px) なので、半分の 340px = 実機の1点を画面の1px で表示して点を崩さない 2026-10-15 */
.ph-logo{width:auto;padding:10px 12px 11px;gap:5px;top:clamp(16px,2.4vw,32px)}
.ph-logo img:first-child{width:340px}
.ph-logo img:last-child{width:242px;margin-right:24px}
@media (max-width:767px){.ph-logo{display:none}}
/* まだ大きい → さらに半分。170px = 実機の1点が Retina (2倍の画面) の1点に当たるので、Mac・スマホでは点が崩れない 2026-10-15 */
.ph-logo{padding:6px 8px 7px;gap:3px;box-shadow:0 0 0 1px #312F28,0 0 0 2px #E8E5DC}
.ph-logo img:first-child{width:170px}
.ph-logo img:last-child{width:121px;margin-right:12px}

/* 使いやすさの直し (2026-10-15 デザイン点検)
   - スマホのメニューボタン: 見た目は同じ、押せる広さを 44×44px に (指で押せる最小の大きさ)
   - 小さすぎる文字: 11〜11.5px の英字ラベル・パンくず・ヘッダーのお問い合わせを 12.5〜13px に
   - 押しにくいリンク: 「詳しく見る」「公式サイト ↗」などを高さ 44px まで押せるように (見た目の位置は変えない) */
.burger{width:44px;height:44px;padding:0;display:none;place-items:center;margin-right:-11px}
@media (max-width:1000px){.burger{display:grid}}
.eyebrow,.en{font-size:12.5px}
.ph .crumb{font-size:12.5px}
.ph .crumb a{display:inline-block;padding-block:10px;margin-block:-10px}
.gh .cta{font-size:13px}
@media (max-width:1000px){.gh .cta{font-size:12.5px;min-height:40px}}
.more{font-size:13px;min-height:44px}
.wcard .lk,.wlist .lk{font-size:13px;display:inline-block;padding-block:12px;margin-block:-12px}
/* お知らせ: 古いものは「過去のお知らせ」にたたむ */

/* スマホの取引先一覧: 1社1行の表だと 1300px 以上になるので、詰めて流す */
@media (max-width:600px){
  .cg ul{display:flex;flex-wrap:wrap;gap:6px 0}
  .cg li{border:0;padding:0;font-size:13.5px;line-height:1.7}
  .cg li:not(:last-child)::after{content:"／";color:var(--dim);margin:0 .4em}
}

/* 実績ページ: 主な実績＋まとまりごとの一覧 (2026-10-15 長すぎたので作り替え) */

.wgroup{margin-top:clamp(28px,3.4vw,44px)}
.wgroup[hidden]{display:none}
.wg-h{display:flex;align-items:baseline;gap:12px;font-size:16px;font-weight:700;color:var(--ink);padding-bottom:12px;margin-bottom:16px;border-bottom:1px solid var(--rule2)}
.wg-h small{font-family:var(--f-mono);font-size:12.5px;font-weight:500;color:var(--dim)}

.wgroup:has(.wg-h.big) + .wgroup{margin-top:16px}
.wgrid.sm{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px 12px}
.wcard.sm .tx{gap:2px;padding-top:8px}
.wcard.sm .tx b{font-size:13.5px;line-height:1.45}
.wcard.sm .tx .meta,.wcard.sm .tx .role{font-size:12.5px;color:var(--dim)}
@media (max-width:600px){.wgrid.sm{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 8px}.wcard.sm .tx b{font-size:12.5px}}
.wmore{margin-top:clamp(28px,3.4vw,44px);border-top:1px solid var(--rule2)}
.wmore[hidden]{display:none}
.wmore summary{list-style:none;cursor:pointer;min-height:48px;display:flex;align-items:center;gap:10px;font-size:15px;font-weight:700;color:var(--ink)}
.wmore summary::-webkit-details-marker{display:none}
.wmore summary::after{content:"＋";color:var(--hot-t);margin-left:auto}
.wmore[open] summary::after{content:"－"}
.wmore .wlist{border-top:1px solid var(--rule)}

/* 書体: Apple の書体に (2026-10-16 ユーザー「Apple とかで使ってるやつ」「見出しはスタイリッシュな細いやつ」)
   Mac・iPhone では SF Pro (英字) とヒラギノ角ゴ (日本語) をそのまま使う (端末に入っているので読み込みなし)。
   Windows・Android では よく似た Inter と Noto Sans JP を Google Fonts から読む */
:root{
  --f-body:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Inter","Inter Fallback","Noto Sans JP","Yu Gothic",sans-serif;
  --f-en:-apple-system,BlinkMacSystemFont,"Inter","Inter Fallback","Hiragino Sans","Noto Sans JP",sans-serif;
  --f-mono:ui-monospace,"SF Mono","JetBrains Mono","JetBrains Mono Fallback",monospace;
}
body{letter-spacing:.01em}
/* 英字の大見出し (CONTACT・WORKS など) は細く、字間を少し詰める */
.ph .eyebrow{font-weight:200;letter-spacing:-.02em}
.hero4 h1{font-weight:200;letter-spacing:-.02em}
.hero4 h1 em{font-weight:300}
.game h2,.gnext b{font-weight:200;letter-spacing:-.01em}

/* 日本語の見出しはヒラギノの W6 相当 (太すぎない) */
h1,h2,h3,h4{font-weight:600}
.catch,.recruit-band h2,.motto b{font-weight:700}
/* 細い書体は幅が狭いので、スマホでも大見出しを大きめに (Windows の Inter でも収まる余裕を残す) */
.hero-wrap h1{font-size:min(clamp(46px,6.6vw,108px),calc((100vw - 2 * var(--gut)) / 9.4))}

/* ロゴの縦横比は絶対に変えない (2026-10-16 ユーザー指示)。
   ヘッダーが窮屈なとき、ロゴの幅だけ縮んで横に潰れていた → ロゴは縮ませず、狭い画面では高さごと小さくする */
.gh .logo{flex:none}
.gh .logo img{max-width:none;width:auto;flex:none}
img[src*="img/logo"]{object-fit:contain;max-width:none}
@media (max-width:400px){.gh .logo img{height:22px}}
@media (max-width:340px){.gh .logo img{height:19px}}
/* 日本語の見出しも細めに (2026-10-16「細いのって言ったやん」)。ヒラギノ W3〜W5 */
h1,h2,h3,h4{font-weight:500}
.catch,.recruit-band h2,.motto b{font-weight:300;letter-spacing:.06em}
.sh h2,.stack h2{font-weight:400}

/* ===== 文字組み (2026-10-16 カーニング・トラッキングの見直し) =====
   考え方: 大きい字ほど字間を詰め、小さい字ほど開ける。細字の英字は詰める。日本語の見出しは palt (文字ごとの詰め) をかけてから少し開ける。
   英字の大文字のラベルは開けすぎない (SF は字間が整っているので .08em 程度)。 */
body{font-kerning:normal;text-rendering:optimizeLegibility;letter-spacing:.04em;line-height:1.9}
html[lang="en"] body{letter-spacing:0;line-height:1.7}

/* 1. 英字の大見出し (細字 200)。大きいほど詰める */
.ph .eyebrow,.hero4 h1,.game h2,.gnext b{font-feature-settings:"kern" 1;letter-spacing:-.03em}
.hero4 h1{line-height:.96}
.ph .eyebrow{line-height:.95}
/* 大きい数字も同じ細字で、数字の幅をそろえすぎない (見出し用のプロポーショナル) */
.specs b{font-weight:200;letter-spacing:-.02em;font-variant-numeric:proportional-nums lining-nums}

/* 2. 日本語の見出し: palt で約物・かなを詰め、細字に合わせて少し開ける */
h1,h2,h3,h4,.catch,.motto b,.recruit-band h2,.wg-h{font-feature-settings:"palt" 1}
h2{letter-spacing:.05em;line-height:1.35}
h3{letter-spacing:.04em;line-height:1.5}
.motto b,.catch,.recruit-band h2{letter-spacing:.08em;line-height:1.35}

html[lang="en"] h2,html[lang="en"] h3{font-feature-settings:normal;letter-spacing:-.005em;line-height:1.25}

/* 3. 本文: 日本語は少し開けて行間を広めに、短い説明は少し詰める */
.lead{letter-spacing:.05em;line-height:1.95}
.note,small{letter-spacing:.03em}
html[lang="en"] .lead{letter-spacing:0;line-height:1.7}

/* 4. 英字の大文字のラベル (メニュー・ボタン・もっと見る) */
.gh nav ul,.cta,.more{letter-spacing:.08em}
.cta{font-weight:500}

/* 5. 等幅のラベル・日付: 大文字は開ける、数字は桁をそろえる */
.eyebrow,.en,.ph .crumb,.cg h3{letter-spacing:.12em}
time,.meta{font-variant-numeric:tabular-nums;letter-spacing:.04em}

/* 下層の見出し (2026-10-16「ダサい」への直し)
   - 細い字が明るい作品の壁に負けていた → 壁をしっかり沈め、字の下は特に暗く
   - 200 の極細は 80px 以上でだけ映える。小さい画面では 300 に
   - 日本語の副題・パンくずは主張させない (小さく・字間ひかえめ) */
/* 作品の絵そのものは変えず (明るさ・色をいじらない)、上にかぶせる幕で沈める */
.ph-img .pic::after{background:
  linear-gradient(90deg,rgba(11,12,14,.82) 0,rgba(11,12,14,.72) 40%,rgba(11,12,14,.50) 75%,rgba(11,12,14,.43)),
  linear-gradient(0deg,rgba(11,12,14,.72),transparent 60%)!important}
@media (max-width:900px){.ph .eyebrow{font-weight:300;letter-spacing:-.02em}}
.ph h1{font-size:clamp(13px,1.1vw,15px);letter-spacing:.2em;font-weight:500;font-feature-settings:"palt" 1;margin-top:10px}
.ph .crumb{font-size:11.5px;letter-spacing:.1em;opacity:.75}
.ph .crumb a{opacity:1}
/* 実績カードの名前: 太すぎない */
.wcard .tx b{font-weight:500;letter-spacing:.03em;line-height:1.5}

/* 字間はあけ気味に戻す (2026-10-16 ユーザー「あけ気味が良かった」) */
body{letter-spacing:.05em}
.gh nav ul,.cta,.more{letter-spacing:.14em}
.eyebrow,.en,.ph .crumb,.cg h3{letter-spacing:.16em}
.ph h1{letter-spacing:.24em}
.ph .crumb{letter-spacing:.14em}
h2{letter-spacing:.08em}
h3{letter-spacing:.06em}
.motto b,.catch,.recruit-band h2{letter-spacing:.12em}

.lead{letter-spacing:.06em}
.wcard .tx b{letter-spacing:.05em}
.ph .eyebrow,.hero4 h1,.game h2,.gnext b{letter-spacing:-.01em}
.specs b{letter-spacing:0}

/* 下層の見出しの高さを全ページでそろえる (2026-10-16 ユーザー「高さが違う。今風な方に合わせて」)
   ゆったりした写真の見出し (Service など) の高さに統一。作品の壁・写真なし (Contact・Privacy) も同じ高さ、文字の位置も同じ */
.ph,.ph-img,.ph-img:has(.pic > img:only-child){--phh:clamp(340px,44vw,560px);height:var(--phh);min-height:0;box-sizing:border-box;display:grid;align-items:end;padding-top:0;padding-bottom:clamp(22px,2.6vw,32px)}
@media (max-width:600px){.ph,.ph-img,.ph-img:has(.pic > img:only-child){--phh:340px}}
.ph-img:has(.pic.tiles){--t:calc((var(--phh) - 4px) / 2)}
/* 次のゲームは3本 (No.04 は 11月予定) なので3列、スマホは1列 (2026-10-17) */
.gnexts{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:600px){.gnexts{grid-template-columns:1fr}}
.gnext b{font-size:clamp(22px,2.4vw,34px);color:var(--ink);letter-spacing:.06em;font-feature-settings:"palt" 1}
@media (max-width:600px){.gnext{aspect-ratio:auto;min-height:120px}}

/* 次のゲーム: 絵のある2本は大きく2列、名前未定の4本目は下に細長く (2026-10-17)
   絵は Playdate のカード (350×155 の白黒)。点が崩れないよう 350px (1倍) で出し、入らない幅では 175px (Retina でちょうど1点=1画素) */
.gnexts{grid-template-columns:repeat(2,minmax(0,1fr))}
.gnext.art{aspect-ratio:auto;gap:14px;align-content:start}
.gnext .gart{display:grid;place-items:center;background:#000;border:1px solid var(--rule);padding:clamp(14px,2vw,28px) 10px}
.gnext .gart img{width:350px;height:auto;max-width:none;image-rendering:pixelated}
.gnext:not(.art){grid-column:1 / -1;aspect-ratio:auto;min-height:0;grid-template-columns:auto 1fr auto;align-items:center;gap:18px}
@media (max-width:860px){.gnexts{grid-template-columns:1fr}}
@media (max-width:440px){.gnext .gart img{width:175px}}
/* 次のゲームは2本 (CrankFighter と 11月の4本目) なので、横に並べて高さをそろえる (2026-10-19) */
.gnext:not(.art){grid-column:auto;grid-template-columns:1fr;align-content:space-between;min-height:200px}

/* Playdate 本体 v4 (2026-10-19 実機の写真 IMG_0171 と見比べて直す)
   - A/B: 黄の丸いボタンの真ん中に白い円、字は本体と同じ黄。縁はうすいオレンジの線
   - クランク: 円柱ではなく平たい角の金属の腕 (つや消しの銀)。上に黄の点、先に黄の四角い持ち手が右へ出る
   - 十字キー: 影は硬い段差でなく、うすく柔らかく */
.pd{padding-right:20%}
.pd-a,.pd-b{color:#FFBE1A;font:500 clamp(10px,2.3vw,17px)/1 var(--f-en);letter-spacing:0;text-shadow:none;
  background:radial-gradient(circle,#FFF9EE 0 25%,#FFF3DC 26%,transparent 27%),
             radial-gradient(circle at 50% 42%,#FFD84A 0 30%,#FFC51C 55%,#FFBE14 64%,#F2A50C 67%,#E59A08 69%,rgba(0,0,0,0) 70.5%);
  box-shadow:none;filter:drop-shadow(0 2px 2px rgba(130,75,0,.28))}
.pd-dpad{filter:drop-shadow(0 1px 0 rgba(214,148,0,.55)) drop-shadow(0 3px 4px rgba(120,70,0,.22))}
.pd-dpad::before,.pd-dpad::after{background:linear-gradient(160deg,#FFD23A,#FFC21A 60%,#FFBA0C);box-shadow:none}
/* クランク: 本体の右に沿う平たい腕 (本体の幅に対して 幅 8%・高さ 34%)、先の持ち手は右へ 16% 出る */
.pd-crank{left:100%;right:auto;top:51%;width:8%;height:34%;overflow:visible}
.pd-crank b{left:0;top:0;width:100%;height:100%;border-radius:999px 999px 8px 8px/40px 40px 8px 8px;animation:none;transform:none;
  background:linear-gradient(90deg,#8f8e8a,#b9b8b3 30%,#c6c5c0 55%,#a3a29d 85%,#86857f);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.18),2px 3px 6px rgba(0,0,0,.35)}
.pd-crank b::after{display:block;content:"";position:absolute;left:50%;top:7%;width:38%;height:auto;aspect-ratio:1;transform:translateX(-50%);
  border-radius:50%;background:#FFC21A;box-shadow:inset 0 0 0 1px rgba(150,95,0,.35)}
.pd-crank i{left:92%;top:68%;width:205%;height:30%;border-radius:6px;transform:none;
  background:linear-gradient(180deg,#FFE04C,#FFCB1E 55%,#F2B30E);box-shadow:inset 0 0 0 1px rgba(170,110,0,.25),2px 3px 6px rgba(0,0,0,.35)}
.pd-crank::after,.pd-crank::before{display:none}
/* ねじ3つ: 実機は筐体の端にもっと寄っている (写真で測った中心: 左下 6.8%/96%、右下 94.4%/96%、右上 94.4%/6%) */
.pd-ctrl::before,.pd-ctrl::after,.pd-lock{width:6.7%!important;aspect-ratio:1}
.pd-ctrl::before{left:3.45%;top:92.6%}
.pd-ctrl::after{left:91.05%;top:92.6%}
.pd-lock{left:91.05%;top:2.6%}
/* クランクの位置: 本体のすぐ右 (.pd の幅の 80% = 本体の右端)。幅は本体の 8% = .pd の 6.4% */
.pd-crank{left:80%;width:6.4%}
/* 本体の色: もう少しオレンジ寄りの黄 (2026-10-19 ユーザー) */
.pd-body{background:linear-gradient(135deg,#FFBC1C,#FCAE08 55%,#F19F00)}
.pd-dpad::before,.pd-dpad::after{background:linear-gradient(160deg,#FFC530,#FDB30C 60%,#F6A800)}
.pd-dpad{filter:drop-shadow(0 1px 0 rgba(205,130,0,.55)) drop-shadow(0 3px 4px rgba(120,65,0,.22))}
.pd-a,.pd-b{color:#FCAE08;
  background:radial-gradient(circle,#FFF9EE 0 25%,#FFF3DC 26%,transparent 27%),
             radial-gradient(circle at 50% 42%,#FFCB3C 0 30%,#FDB710 55%,#FCAE08 64%,#EA9500 67%,#DC8A00 69%,rgba(0,0,0,0) 70.5%)}
.pd-crank b::after{background:#FCAE08}
.pd-crank i{background:linear-gradient(180deg,#FFCC3A,#FDB50E 55%,#EEA000)}
.pd-menu2{background:radial-gradient(circle,#fbfaf6 0 22%,#e9dfc8 23% 25%,#FDB710 27%,#FCAE08 52%,#DC8A00 58% 63%,rgba(0,0,0,0) 65%)}
/* padding の % は親の幅が基準でずれるので、本体の幅を .pd の 80% に決めて、右の 20% をクランクの場所にする */
.pd{padding-right:0}
.pd-body{width:80%;box-sizing:border-box}
/* 画面 (黒い枠) を実機の大きさに: 枠は本体の幅の 0.8%〜87% まで、上は 2.6%。padding の % は .pd の幅 (= 本体の 1.25 倍) が基準なので 0.8 倍した値 */
.pd-body{padding:2.1% 10.3% 0 .7%}
/* 十字キーと A/B を画面に近づける (2026-10-19 ユーザー)。写真で測った位置: 十字キー上端 66%・A/B 中心 73% (本体の高さに対して) */
.pd-dpad{top:63%}
.pd-a,.pd-b{top:64.5%}
/* 十字キーをスリムに (腕の太さ 34% → 29%) 2026-10-19 */
.pd-dpad::before{left:35.5%;width:29%}
.pd-dpad::after{top:35.5%;height:29%}
/* 画面: 実機の液晶はぱっと切り替わる (フェードしない)。止まった時に薄いまま残らないよう動きをなくす */
.pd-screen img.on{animation:none;opacity:1}
/* クランク: 円柱に見えない平たい角柱に。面はつや消しの一色、角だけ細い明暗の線 (2026-10-19 ユーザー「円柱でなく角柱」) */
.pd-crank b{border-radius:50% 50% 3px 3px/12% 12% 3px 3px;background:#ABAAA5;
  box-shadow:inset 1px 0 0 #D4D3CE,inset -2px 0 0 #8A8984,inset 0 -2px 0 #85847F,2px 3px 6px rgba(0,0,0,.35)}
.pd-crank i{border-radius:3px;background:#FDB30E;
  box-shadow:inset 0 1px 0 #FFD45A,inset 0 -3px 0 #D88E00,inset -2px 0 0 #E59A00,2px 3px 6px rgba(0,0,0,.35)}
/* スピーカー: 黒ではなく銀の網 (細かい穴) */
.pd-grill{background:radial-gradient(circle,#55544f 32%,transparent 40%) 50% 0/33.3% 5.2% #C9C8C3;
  box-shadow:0 0 0 2px #B9B8B3,0 0 0 3px #8d8c87,inset 0 1px 2px rgba(0,0,0,.35)}
/* A/B の白い円を実機の大きさに (ボタンの直径の約 52%)。closest-side で ボタンの半径 = 100% */
.pd-a,.pd-b{font-size:clamp(11px,2.7vw,20px);
  background:radial-gradient(circle closest-side,#FFF9EE 0 51%,#FFF0D4 52.5%,transparent 54%),
             radial-gradient(circle closest-side at 50% 46%,#FFCB3C 0 45%,#FDB710 72%,#FCAE08 86%,#EA9500 93%,#DC8A00 97%,rgba(0,0,0,0) 100%)}
/* クランクの腕を少し太く (本体の幅の約 9%) */
.pd-crank{width:7.2%}
.pd-crank i{width:182%}
/* ねじ3つ: 写真で中心を測り直した (本体に対して 左 5.7%・右 94.9%・上 4.9%・下 94.8%) 2026-10-19 */
.pd-ctrl::before{left:2.35%;top:91.3%}
.pd-ctrl::after{left:91.55%;top:91.3%}
.pd-lock{left:91.55%;top:1.4%}
/* 十字キーはホームボタン (右上の丸いボタン) と同じ色と影にそろえる */
.pd-dpad::before,.pd-dpad::after{background:linear-gradient(160deg,#FFCB3C,#FDB710 45%,#FCAE08 75%,#EFA000)}
.pd-dpad{filter:drop-shadow(0 2px 2px rgba(110,60,0,.45))}
.pd-menu2{filter:drop-shadow(0 2px 2px rgba(110,60,0,.45))}
/* 下のねじの top は基準の高さが本体より少し大きいので、測って中心が本体の 94.8% に来る値に */
.pd-ctrl::before,.pd-ctrl::after{top:89%}
.pd-ctrl::before,.pd-ctrl::after{top:91.4%}
/* A/B: 白丸と縁を同じ中心に (ふくらみの光の中心をずらしていたので白丸がずれて見えた) 2026-10-19 */
.pd-a,.pd-b{line-height:1;
  background:radial-gradient(circle closest-side at 50% 50%,#FFF9EE 0 51%,#FFF0D4 52.5%,transparent 54%),
             radial-gradient(circle closest-side at 50% 50%,#FFCB3C 0 45%,#FDB710 72%,#FCAE08 86%,#EA9500 93%,#DC8A00 97%,rgba(0,0,0,0) 100%)}
/* 十字キー: 4つの先端は半円 (腕を両端が丸い棒にして重ねる) 2026-10-19 */
.pd-dpad::before,.pd-dpad::after{border-radius:999px}

/* ねじ3つを本体そのものの背景に描く (2026-10-19)。
   部品の箱に入れると、包含ブロックや高さの基準の違いで画面幅によってずれて見えたため、本体の箱に対する % で中心を固定する。
   実機の写真で測った中心: 各辺から 本体の幅の 5.6% (縦は 5.8%)。大きさは本体の幅の 6.7% (= .pd の 5.36%) */
.pd{container-type:inline-size}
.pd-ctrl::before,.pd-ctrl::after{display:none}
.pd-lock{visibility:hidden}
.pd-body{--sc:#141414 0 .54cqw,#5c5c59 .64cqw,#b4b4af 1.02cqw,#d2d2cd 1.23cqw,#8b8b87 1.55cqw,#4a4a47 1.77cqw,rgba(0,0,0,0) 1.85cqw;
  background:radial-gradient(circle 2.68cqw at 5.6% 94.2%,var(--sc)),
             radial-gradient(circle 2.68cqw at 94.4% 94.2%,var(--sc)),
             radial-gradient(circle 2.68cqw at 94.4% 5.8%,var(--sc)),
             linear-gradient(135deg,#FFBC1C,#FCAE08 55%,#F19F00)}
/* 十字キー: さらに細く (腕 29% → 25%)。2本の腕の色の段差で重なりの線が見えていたので、色は一色にそろえる */
.pd-dpad::before{left:37.5%;width:25%}
.pd-dpad::after{top:37.5%;height:25%}
.pd-dpad::before,.pd-dpad::after{background:#FDB410}
/* ねじの見える大きさを実機に (金属の部分の直径 = 本体の幅の約 6.8%) */
.pd-body{--sc:#141414 0 .78cqw,#5c5c59 .93cqw,#b4b4af 1.48cqw,#d2d2cd 1.78cqw,#8b8b87 2.25cqw,#4a4a47 2.57cqw,rgba(0,0,0,0) 2.72cqw}
/* 右の列 (ねじ・ホームボタン・スピーカー) を実機の写真で測った位置に (2026-10-19)。どれも中心は本体の幅の 95.1% の縦一列
   ねじ 上 5.0% / ホームボタン 中心 14.9%・直径 7.8% / スピーカー 上端 23.5%〜下端 39.5%・幅 5.3% */
.pd-menu2{position:absolute;left:91.2%;top:11%;width:7.8%!important;aspect-ratio:1}
.pd-grill{left:92.45%;right:auto;top:23.5%;bottom:auto;width:5.3%;height:16%}
.pd-body{background:radial-gradient(circle 2.68cqw at 5.6% 94.2%,var(--sc)),
             radial-gradient(circle 2.68cqw at 94.4% 94.2%,var(--sc)),
             radial-gradient(circle 2.68cqw at 95.1% 5%,var(--sc)),
             linear-gradient(135deg,#FFBC1C,#FCAE08 55%,#F19F00)}
/* ホームボタンの見える大きさを箱いっぱいに (実機は直径が本体の幅の約 7.9%、ねじより少し大きい)。真ん中の白丸は直径の約 38% */
.pd-menu2{background:radial-gradient(circle closest-side,#fbfaf6 0 36%,#e9dfc8 38% 40%,#FDB710 43%,#FCAE08 78%,#E59500 88%,#DC8A00 95%,rgba(0,0,0,0) 100%)}
/* 右下のねじも右の列 (本体の幅の 95.1%) にそろえる (2026-10-19 ユーザー「縦も揃えて」) */
.pd-body{background:radial-gradient(circle 2.68cqw at 5.6% 94.2%,var(--sc)),
             radial-gradient(circle 2.68cqw at 95.1% 94.2%,var(--sc)),
             radial-gradient(circle 2.68cqw at 95.1% 5%,var(--sc)),
             linear-gradient(135deg,#FFBC1C,#FCAE08 55%,#F19F00)}
/* クランクの腕を細く (本体の幅の約 6.9% = 実機の写真の銀の面の幅)。持ち手は本体の 16% のまま */
.pd-crank{width:5.5%}
.pd-crank i{width:238%}
/* ねじ3つの端からの距離をそろえる: 左右は本体の幅の 4.9%、上下は本体の高さの 5% (左下だけ内側に寄っていた) */
.pd-body{background:radial-gradient(circle 2.68cqw at 4.9% 95%,var(--sc)),
             radial-gradient(circle 2.68cqw at 95.1% 95%,var(--sc)),
             radial-gradient(circle 2.68cqw at 95.1% 5%,var(--sc)),
             linear-gradient(135deg,#FFBC1C,#FCAE08 55%,#F19F00)}

/* 本体の縦横比を実機 (幅76×高さ74mm) に固定 (2026-10-19 ユーザー「画面の縦横比が変わったので本体まで変わった」)
   画面 (400×240 = 5:3) とその黒い枠は本体の中に収まる大きさにする。写真で測った値:
   黒い枠 = 本体の幅の 86.3%、枠の太さ 上 2.3%・左右 3%・下 3.2% (本体の幅に対して)。
   padding の % は本体の中身の幅 (本体の 86.25%) が基準なので割り戻した値 */
.pd-body{aspect-ratio:76/74;height:auto;min-height:0;overflow:visible}
.pd-bezel{padding:2.67% 3.48% 3.71%}
.pd-screen{aspect-ratio:5/3}

/* スピーカー (2026-10-19 実機の写真で作り直し): 細長い角の丸い穴 (幅 本体の 3.9%・高さ 16.5%) に、銀の網。
   網の穴は大きめの丸で、段ごとに半分ずつずらした (蜂の巣状)。外の明るい縁はなく、穴のふちは本体の色の細いくぼみ */
.pd-grill{left:93.15%;width:3.9%;top:23.4%;height:16.5%;border-radius:999px;overflow:hidden;
  background:
    radial-gradient(circle closest-side,#3b3a36 0 62%,#5d5c57 72%,transparent 80%) 0 0/33.34% 12.5%,
    radial-gradient(circle closest-side,#3b3a36 0 62%,#5d5c57 72%,transparent 80%) 16.67% 6.25%/33.34% 12.5%,
    linear-gradient(90deg,#9f9e99,#d4d3ce 45%,#bdbcb7 70%,#9a9994);
  box-shadow:inset 0 0 0 1.5px rgba(70,60,30,.55),0 0 0 1px rgba(170,105,0,.45),inset 0 2px 3px rgba(0,0,0,.35)}
/* スピーカーの穴は黒ではなく暗い灰 (網の銀が見えるように) */
.pd-grill{background:
    radial-gradient(circle closest-side,#5f5e59 0 55%,#7d7c77 68%,transparent 78%) 0 0/33.34% 12.5%,
    radial-gradient(circle closest-side,#5f5e59 0 55%,#7d7c77 68%,transparent 78%) 16.67% 6.25%/33.34% 12.5%,
    linear-gradient(90deg,#a9a8a3,#dcdbd6 45%,#c6c5c0 70%,#a3a29d)}

/* ゲームのアート (2026-10-19): 絵は切り抜かない・色も変えない。同じ段の絵は高さをそろえ、幅は縦横比に合わせて分ける */

/* ゲームのアート: ゲームの中の絵 (灰色2色) を 1倍で並べる。点が崩れないよう拡大縮小しない。入らない狭い画面だけ幅に合わせて縮める (2026-10-19) */

/* 仲間と魔物は 3つずつ2段 (6つ横には入らず、5＋1 で余りが出ていた) */

/* 会社案内のオフィス写真は6枚なので3列×2段 (2026-10-19) */
.gallery.g3{grid-template-columns:repeat(3,1fr)}
@media (max-width:600px){.gallery.g3{grid-template-columns:repeat(2,1fr)}}

/* 事業カードは works の画像を使っても枠いっぱいに表示する (重複画像の統合, 2026-10-19) */

/* 事業カード: 見出しを大きく、上に黄色の英語を添える (2026-10-20) */

/* 事業カードの見出し: カードの幅に合わせて大きさを決め、「モーションキャプチャー」が1行に入るようにする */

/* スタジオ予約のボタン2つは、枠の大きさをそろえる (2026-10-20) */
.res-btns{display:grid;gap:10px;justify-self:start;width:max-content;max-width:100%}
.res-btns .cta{box-sizing:border-box;justify-content:space-between;gap:14px;width:100%;min-height:56px}
/* 主なお取引先: 区分(GAME/VTUBER/OTHER)をやめて、1つの一覧にする (2026-10-21) */
.clients.one{display:block}
.clients.one .cg ul{grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr))}
/* 画像がない実績: ロゴを少し小さく・不透明度40%で中央に置く。動きは付けない (2026-10-21) */
.wcard.noimg .im{display:grid;place-items:center}
.wcard.noimg .im img{width:78%;height:78%;opacity:.4;transition:none}
.wcard.noimg:hover .im img{transform:none}
.wcard.noimg:hover{border-color:var(--rule)}
/* 事業カードの説明文: 文節の切れ目で改行する (2026-10-21) */

/* トップの実績: 上段 Game(横長)2枚、下段 VTuber(正方形)4枚 (2026-10-21) */
.titles.latest{grid-template-columns:repeat(4,1fr)}
.titles.latest .title.wide{grid-column:span 2}
.titles.latest .title.sq{grid-column:span 1}
.titles.latest .title.sq .im{aspect-ratio:1}
.titles.latest .title.sq .im img{object-fit:cover;object-position:50% 12%}
.titles.latest .tx span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:860px){.titles.latest{grid-template-columns:repeat(2,1fr)}.titles.latest .title.wide{grid-column:span 2}}
/* トップ: VTuber紹介とスタジオ紹介で、画像の幅と形(正方形)をそろえる (2026-10-21) */
@media (min-width:1001px){
  .studio-band{grid-template-columns:1.1fr 1fr;align-items:center}
  .studio-band .ph2{aspect-ratio:1/1;height:auto;min-height:0;max-height:none}
}
/* 実績カードのリンク: 公式サイト・動画を、丸いアイコンボタンにする (2026-10-21) */
.wcard .tx:has(.links){grid-template-columns:minmax(0,1fr) auto;column-gap:10px;align-items:start}
.wcard .tx:has(.links) .meta{grid-column:1/-1}
.wcard .tx:has(.links) b,.wcard .tx:has(.links) .role{grid-column:1}
.wcard .links{grid-column:2;grid-row:2 / span 2;align-self:center;display:flex;gap:6px}
.wcard .links .lk{width:32px;height:32px;padding:0;margin:0;display:inline-grid;place-items:center;border:1px solid var(--rule2);border-radius:50%;text-decoration:none;transition:border-color .2s}
.wcard .links .lk::before{content:"";width:16px;height:16px;background:var(--hot);-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
.wcard .links .lk.site{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5L20.5 20.5'/%3E%3C/svg%3E")}
.wcard .links .lk.video{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 5.5v13l10-6.5z'/%3E%3C/svg%3E")}
.wcard .links .lk:hover{border-color:var(--hot)}
.wcard .links .lk:focus-visible{outline:2px solid var(--hot);outline-offset:2px}
@media (max-width:600px){.wcard .links .lk{width:28px;height:28px}.wcard .links .lk::before{width:14px;height:14px}}
/* 実績カードのアイコンは「VTUBER 2026」の行の右端に置く。タイトルと内容は全幅 (2026-10-22) */
.wcard .tx:has(.links){grid-template-columns:minmax(0,1fr) auto;column-gap:8px}
.wcard .tx:has(.links) .meta{grid-column:1;grid-row:1}
.wcard .tx:has(.links) .links{grid-column:2;grid-row:1;align-self:center;margin-block:-4px}
.wcard .tx:has(.links) b,.wcard .tx:has(.links) .role{grid-column:1 / -1;grid-row:auto}
.wcard .links .lk{width:26px;height:26px}
.wcard .links .lk::before{width:14px;height:14px}
@media (max-width:600px){.wcard .links .lk{width:24px;height:24px}.wcard .links .lk::before{width:13px;height:13px}}
/* アイコンと画像の間をあける。リンクの有無でタイトルの位置がずれないよう、1行目の高さをそろえる (2026-10-22) */
.wcard .tx{padding-top:14px}
.wcard .meta{min-height:26px}
.wcard .tx:has(.links) .links{margin-block:0}
/* 事業カードの英語は、カテゴリ名と同じく頭文字だけ大文字にする (2026-10-22) */

/* トップの「実績」のカードは、実績ページのカードと同じ見せ方にする (カテゴリ・年は画像の下、■なし) (2026-10-22) */
.title .meta{display:flex;gap:8px;align-items:center;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;color:var(--dim)}
.title .meta i{font-style:normal;color:var(--c)}
.title .role{font-size:12.5px;color:var(--text);line-height:1.5}
.titles.latest .tx .meta{display:flex;overflow:visible}
/* トップの実績: 横長の画像は四角い枠でも切らずに全体を出す (2026-10-22) */
.titles.latest .title.sq.land .im img{object-fit:contain;object-position:50% 50%}
/* サービスの「使用ツール」: 左の文を、指定の位置で改行した幅に合わせ、右のロゴ欄を狭くする。ロゴの大きさは変えない (2026-10-22) */
@media (min-width:861px){.two.skills{grid-template-columns:max-content minmax(0,1fr)}}
/* 実績ページ: 画像の拡大表示 (2026-10-22) */
.wcard.witem:not(.noimg) .im{cursor:zoom-in}
.wcard.witem:not(.noimg) .im:focus-visible{outline:2px solid var(--hot);outline-offset:-2px}
body.lb-open{overflow:hidden}
.lb{position:fixed;inset:0;z-index:200;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(8px,2vw,24px);padding:clamp(48px,6vw,72px) clamp(10px,3vw,40px) clamp(16px,3vw,32px);background:rgba(8,9,11,.92);cursor:zoom-out}
.lb[hidden]{display:none}
.lb-fig{margin:0;display:grid;gap:12px;justify-items:center;min-width:0;cursor:default}
.lb-fig img{max-width:100%;max-height:calc(100vh - 170px);max-height:calc(100dvh - 170px);width:auto;height:auto;object-fit:contain;background:var(--bg3)}
.lb-fig figcaption{display:grid;gap:2px;text-align:center;color:var(--ink);font-size:14px;line-height:1.5}
.lb-fig figcaption span{color:var(--dim);font-size:12.5px}
.lb button{cursor:pointer;background:rgba(20,22,26,.8);border:1px solid var(--rule2);color:var(--ink);width:44px;height:44px;border-radius:50%;display:grid;place-items:center;transition:border-color .2s}
.lb button:hover{border-color:var(--hot)}
.lb button:focus-visible{outline:2px solid var(--hot);outline-offset:2px}
.lb button::before{content:"";width:16px;height:16px;background:var(--hot);-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
.lb-x{position:absolute;top:12px;right:12px;--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 5l14 14M19 5L5 19'/%3E%3C/svg%3E")}
.lb-prev{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E")}
.lb-next{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E")}
.lb-n[hidden]{display:none}
@media (max-width:600px){.lb{grid-template-columns:1fr;grid-template-rows:1fr auto;padding:56px 10px 16px}.lb-fig{grid-row:1}.lb-n{position:absolute;bottom:14px;width:40px;height:40px}.lb-prev{left:14px}.lb-next{right:14px}.lb-fig figcaption{padding-inline:56px}}
/* 会社案内: 会社概要の左に、会社の入り口の写真を置く (2026-10-22) */
.co-photo{border:1px solid var(--rule);overflow:hidden;background:var(--bg3)}
.co-photo img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
/* 日本語の文の中の英字 (VTuber など) を、大文字にしない (2026-10-22) */
.keep-case{text-transform:none}
/* トップの「VTuber 3Dモデルのお仕立て」: 左は横長の画像4枚 (2列×2段) (2026-10-22) */
.vt-grid.land{grid-template-columns:repeat(2,1fr);gap:12px;background:none;border:0;align-self:center}
.vt-grid.land img,.vt-grid.land img:first-child{grid-column:auto;grid-row:auto;height:auto;aspect-ratio:16/9;object-fit:cover;background:var(--bg3);border:1px solid var(--rule)}
.vt-grid.land .vt-ph{aspect-ratio:16/9;display:grid;place-items:center;padding:8px;text-align:center;background:var(--bg3);border:1px solid var(--rule);color:var(--dim);font-size:12px;line-height:1.5}
/* 画像のないページの見出し (お問い合わせ・プライバシーポリシー) も、他のページと同じく左端にそろえる (2026-10-22) */
.ph:not(.ph-img) .inner{width:100%}
/* お問い合わせ (案B): 連絡先を上に3つ並べ、フォームは読みやすい幅で中央に置く (2026-10-22 仮) */
.contact-b{display:grid;gap:clamp(36px,5vw,64px)}
.contact-b > .stack:last-child{width:100%;max-width:720px;margin-inline:auto}
.cinfo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.ccard{display:grid;gap:8px;align-content:start;padding:20px 22px;background:var(--bg2);border:1px solid var(--rule);font-size:14.5px;line-height:1.8;color:var(--text)}
.ccard b{font-size:13px;font-weight:500;letter-spacing:.1em;color:var(--hot-t)}
.ccard span{display:block}
@media (max-width:860px){.cinfo{grid-template-columns:1fr}}
/* お問い合わせの見出し (連絡先・お問い合わせフォーム) は、同じ小さめの大きさにそろえる (2026-10-22) */
.contact-b h2{font-size:clamp(22px,2.4vw,30px)}
.ccard .nb{display:inline;white-space:nowrap}
/* トップのモーションキャプチャースタジオの画像は、映像の比率(16:9)にする (2026-10-22) */
.studio-band .ph2{aspect-ratio:16/9;height:auto;min-height:0;max-height:none}
/* 大見出しの先頭の字の左の余白を打ち消して、上の「aura, Inc.」や下の文章と左端をそろえる */
.hero4 h1{margin-left:-.07em}
.hero4 h1 em{margin-left:.015em}
.hero4 .eyebrow{text-transform:none;letter-spacing:.06em;font-size:13px}
.stack > p.gl{font:inherit;color:var(--text)}
.stack.gw{padding:clamp(20px,3vw,36px);background:var(--bg2);border:1px dashed var(--rule2)}
/* 画面が狭いときは、スタジオ設備の説明文の指定改行を使わず、自動で折り返す */
@media (max-width:1439px){.feat br.pc{display:none}}
/* 会社概要の写真の下の、会社の紹介文 */
.co-text{display:grid;gap:.6em;margin-top:6px}
.co-text p{color:var(--text);line-height:1.7}
/* 会社案内: 沿革を枠で囲む / 理念の言葉を目立たせる */
.inner.hist{padding:clamp(20px,3vw,36px);background:var(--bg2);border:1px dashed var(--rule2)}
.co-text .hl{color:var(--hot-t);font-weight:500}
/* 会社案内: アクセス (地図) */
.maps{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,28px)}
.maps .fr{display:grid;gap:8px;padding:clamp(16px,2vw,24px);background:var(--bg2);border:1px dashed var(--rule2)}
.maps b{font-weight:500;font-size:16px;color:var(--ink)}
.maps small{color:var(--dim);font-size:13px;line-height:1.6}
.maps iframe{width:100%;aspect-ratio:16/10;border:0;display:block;margin-top:6px}
.maps a{justify-self:start;color:var(--hot-t);font-size:13px;text-decoration:underline;text-underline-offset:3px}
@media (max-width:760px){.maps{grid-template-columns:1fr}}
/* スタジオ設備の説明文: 字間を少し詰めて、長めの1行が、カードの幅に入るようにする */
.feat p{letter-spacing:.01em}
/* トップの背景の画像: 入れ替えの間は隠して、そっと表示する (2026-10-28) */
.wall{transition:opacity .6s}
.wall.wait{opacity:0}
/* 実績ページの上の画像: 中央の列を画面の真ん中に合わせる (2026-10-28) */
.ph-img .pic.tiles{justify-content:center}
.vt-grid.land{width:100%}
.vt-grid.land img:only-child{grid-column:1/-1}

/* ===== ライト (data-theme="light") ===== 2026-10-28
   ダーク / ライトは assets/theme.js が <html data-theme> に付ける (最初は端末の設定、ボタンで切り替えると覚える)。
   色は変数で切り替える。写真の上の文字 (トップ・各ページの上の画像・動画・拡大表示) は、ライトでも暗い幕の上なので白いまま。 */
:root[data-theme="light"]{
  --bg:#FFFFFF; --bg2:#F5F5F4; --bg3:#EBEBEA; --rule:rgba(20,22,26,.12); --rule2:rgba(20,22,26,.24);
  --ink:#15171B; --text:#41454C; --dim:#666B74;
  --g:#2A8559; --r:#C4453D; --b:#2D74BF; --hot-t:#8A6200; --gh-bg:rgba(255,255,255,.92); --tint:#F6F6F5;
  color-scheme:light;
}
:root[data-theme="light"] .hero-wrap,:root[data-theme="light"] .ph-img,:root[data-theme="light"] .lb,:root[data-theme="light"] .yt .frame{
  --ink:#E9EAEC; --text:#B4B8BF; --dim:#9AA0A8; --rule:rgba(255,255,255,.10); --rule2:rgba(255,255,255,.22); --hot-t:#FEC317; color:var(--ink)}
:root[data-theme="light"] .gh .logo img,:root[data-theme="light"] .gf img[src*="logo-h"]{filter:brightness(0) opacity(.88)}
:root[data-theme="light"] .form .err{color:#C2362A}
:root[data-theme="light"] .form [aria-invalid]{border-color:#C2362A!important}
:root[data-theme="light"] .form .sent.ng{border-color:#C2362A;background:rgba(194,54,42,.07);color:#C2362A}
/* ボタン (ヘッダーの太陽・月) */
.gh .theme{display:inline-grid;place-items:center;width:32px;height:32px;padding:0;margin-right:2px;background:transparent;border:1px solid var(--rule2);color:var(--text);cursor:pointer;transition:color .2s,border-color .2s}
.gh .theme:hover{color:var(--ink);border-color:var(--hot)}
@media (max-width:360px){.gh{gap:8px}.gh .right{gap:6px}.gh .theme{width:28px;height:28px;margin-right:0}.gh .cta{padding:8px 10px;letter-spacing:.04em}}
:root[data-theme="light"] body{background-image:none}
/* ライト: ロゴの板と、横長・縦長の画像の余白 (埋めている部分) は白。トップの背景の壁とページ上の画像の中は、そのまま */
:root[data-theme="light"] .logos div{background:#fff}
:root[data-theme="light"] .wcard .im,:root[data-theme="light"] .wcard .im img,:root[data-theme="light"] .title .im,:root[data-theme="light"] .title .im img,:root[data-theme="light"] .vt-grid img,:root[data-theme="light"] .vt-grid.land img,:root[data-theme="light"] .svc img[src*="img/works/"],:root[data-theme="light"] .svc img[src*="img/trim/"]{background:#fff}
:root[data-theme="light"] .wcard .im,:root[data-theme="light"] .title .im{box-shadow:0 0 0 1px var(--rule);transition:box-shadow .25s,transform .3s ease}
/* ライト: 触れると影が出て、浮いて見える */
:root[data-theme="light"] .wcard:not(.noimg) .im:hover,:root[data-theme="light"] .title .im:hover{box-shadow:0 0 0 1px var(--rule),0 10px 22px -8px rgba(20,22,26,.28)}
/* ライト: 採用の「新卒」「中途」の札は白い字、「詳細はこちら」は黒ではなく白 */
:root[data-theme="light"] .job .head .kind{color:#fff}
:root[data-theme="light"] .recruit-band .cta{background:#fff;color:#111;border-color:#fff}
:root[data-theme="light"] .recruit-band .cta:hover{background:#111;color:#fff;border-color:#111}
/* ライト: Playdate 本体の下の影は、暗い背景用の濃い黒をやめて、淡い影にする */
:root[data-theme="light"] .pd-body{box-shadow:inset 3px 3px 0 rgba(255,228,120,.6),inset -3px -4px 0 rgba(180,110,0,.4),0 1px 0 #cf8f00,0 26px 36px -26px rgba(90,60,0,.28)}
/* 触れたとき: 画像の中身だけ拡大して枠で切れるのをやめ、画像の枠ごと少し大きくする。反応するのは画像の上だけ (文字の上では動かない) (2026-10-28) */
.wcard:not(.noimg):hover .im img,.title:hover .im img{transform:none!important}
.wcard .im,.title .im{transition:transform .3s ease,box-shadow .25s}
.wcard:not(.noimg) .im:hover,.title .im:hover{transform:scale(1.05);z-index:2}
/* ライト: 画像のない実績の枠のロゴは、白では見えないのでグレーにする */
:root[data-theme="light"] .wcard.noimg .im img{background:transparent;filter:brightness(0);opacity:.2}
/* 画像のあるヘッダーは同じ大きさ (幅の44%)。画像のないヘッダー (お問い合わせ・プライバシー) は、余白だけが大きくならないよう元の高さ */
.ph:not(.ph-img){--phh:clamp(240px,28vw,380px)}
@media (max-width:600px){.ph:not(.ph-img){--phh:240px}}
/* 採用ページのヘッダー: 広い画面でも2人が入るよう、写真は幅 1480px までにして、両側は同じ写真をぼかして敷く */
.ph-img .pic.fit{overflow:hidden}
.ph-img .pic.fit img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(26px) saturate(.9);transform:scale(1.15);animation:none}
.ph-img .pic.fit img.fg{position:relative;display:block;width:min(100%,var(--fgw,1480px));height:100%;margin-inline:auto;object-fit:cover;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}