/* 明るい箱の壁の型（11/7）：ご依頼について（guide2.html）で作り、各サービスのページでも使う。
色はサービスと同じ青。ページごとに差し色を変えるときは :root の --blue を上書きする */
/* 見本（11/7 夜）：明るい地のまま、絵と動きを止めない。
① 頭の 4 つの立体は、スクロールで額縁から画面いっぱいへ広がる
② 区画の名前は大きな字が横に流れる（字を絵として使う）
③ 進め方は、帯と同じく 1 つずつ大きく切り替わる
④ 区画の間は、小さな箱が積み上がる */
:root{--blue:#3b49d8;--ink:#16214a;--ink2:#46527a;--ink3:#7a84a6;--paper:#f3f5fa}
body.light{background:var(--paper)}
.g2{background:transparent;color:var(--ink);overflow-x:clip;margin-top:0;padding-top:0}
/* 背景：真っ白にせず、3D の壁と同じ「箱の壁」をごく薄く敷く（地の模様は JS で描く） */
body.light{background-color:var(--paper);background-size:384px 384px}
/* 縦の動き：帯と進め方の間、小さな箱がスクロールに合わせて上から落ちてくる（上へ戻すと上がる） */
canvas.fall{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.htrack,.flow2 .inner{position:relative;z-index:1}
.g2 .pin{grid-template-rows:none}
.g2 .gtop{padding-bottom:56px;display:flex;flex-direction:column}
/* 頭：GUIDE は左、題・説明・目次は右へずらす（左上から右下へ流れる配置） */
.g2 .gtop .back{align-self:flex-start}
.g2 .gtop h1{align-self:flex-end;margin-top:6px}
.g2 .gtop .lead{align-self:flex-end;max-width:22em}
.g2 .gtop .toc{align-self:flex-end}
/* ① 頭：細長い帯（サービスのページと同じコマ）が、スクロールで横に流れる */
.hero2{position:relative;height:320vh;--hbw:min(58vw,980px)}
.hero2 .pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.htrack{display:flex;align-items:flex-start;gap:clamp(18px,2.4vw,36px);width:max-content;will-change:transform}
.hb{flex:0 0 var(--hbw);display:block;text-decoration:none;color:var(--ink);will-change:transform,opacity;transform-origin:50% 40%}
.hb img{width:100%;aspect-ratio:2400/760;object-fit:cover;box-shadow:0 24px 60px rgba(22,33,74,.25)}
.hb .im{display:block;overflow:hidden;box-shadow:0 24px 60px rgba(22,33,74,.25)}
.hb .im img{box-shadow:none;animation:kb 9s ease-in-out infinite alternate;animation-delay:var(--kd,0s)}
@keyframes kb{from{transform:scale(1.08) translateX(-2.5%)}to{transform:scale(1.08) translateX(2.5%)}}
.hb .lb{display:block;margin-top:16px;font:900 clamp(18px,1.8vw,24px)/1.3 "Noto Sans JP",sans-serif}
.hb:nth-child(even) .lb{text-align:right}
.hb small{display:block;margin-bottom:6px;font:700 11px/1 "Inter",sans-serif;letter-spacing:.2em;color:var(--blue)}
.hb .no{display:none}
.hb .dsc{display:block;margin-top:8px;font:500 13px/1.7 "Noto Sans JP",sans-serif;color:var(--ink3)}
/* ② 流れる大きな字 */
.mq{overflow:hidden;padding:clamp(40px,7vw,96px) 0 clamp(16px,2vw,28px);white-space:nowrap;user-select:none}
.mq div{display:inline-block;font:900 clamp(84px,15vw,230px)/.9 "Inter",sans-serif;letter-spacing:-.03em;color:var(--ink);will-change:transform}
.mq span{color:transparent;-webkit-text-stroke:2px var(--ink)}
.mq i{font-style:normal;color:var(--blue)}
.sec-h{max-width:1080px;margin:0 auto;padding:0 var(--pad) 28px;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px}
.sec-h h2{margin:0;font:900 clamp(24px,2.4vw,30px)/1.3 "Noto Sans JP",sans-serif}
.sec-h p{margin:0;font:500 15px/1.6 "Noto Sans JP",sans-serif;color:var(--ink3)}
.sec-h.r{justify-content:flex-end;text-align:right}
/* ③ 進め方：1 つずつ切り替わる */
.flow2{position:relative;height:calc(6 * 48vh + 100vh)}
.flow2 .pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.flow2 .inner{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:0 4vw;width:100%;max-width:1180px;margin:0 auto;padding:0 var(--pad)}
.flow2 .sw{grid-column:1;grid-row:1}
.flow2 .num{grid-column:2;grid-row:1}
/* 番号が切り替わる間、上と下を箱で組んだ小さな絵（画面・資料・カチンコ・ゲーム機）が横切る */
.cross{position:absolute;left:0;display:flex;align-items:flex-end;gap:clamp(48px,6vw,96px);width:max-content;will-change:transform;--cs:7px}
.cross.c1{top:96px}.cross.c2{bottom:40px}
.px{display:grid;grid-template-columns:repeat(var(--w),var(--cs));gap:1px;animation:hop 1.6s ease-in-out infinite;animation-delay:var(--dl)}
.px s{width:var(--cs);height:var(--cs)}
.px s.f{background:var(--c)}
@keyframes hop{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
/* 番号は右上に小さめに。主役は手順の名前と説明（11/7「01・02 がでかい」） */
.num{position:relative;width:clamp(150px,15vw,230px);height:clamp(110px,11vw,170px);overflow:hidden}
.num::before{content:"STEP";position:absolute;right:4px;top:0;font:700 12px/1 "Inter",sans-serif;letter-spacing:.24em;color:var(--ink3)}
.num b{position:absolute;right:0;bottom:0;font:900 clamp(100px,10vw,156px)/1 "Inter",sans-serif;letter-spacing:-.05em;color:var(--blue);transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .4s}
.num b.up{transform:translateY(-100%);opacity:0}.num b.dn{transform:translateY(100%);opacity:0}
.stepbox{position:relative;min-height:17em}
.stp{position:absolute;inset:0 0 auto;opacity:0;transform:translateY(24px);transition:opacity .45s,transform .45s}
.stp.on{opacity:1;transform:none}
.stp h3{margin:0;font:900 clamp(40px,5.2vw,76px)/1.2 "Noto Sans JP",sans-serif;letter-spacing:.02em;color:var(--ink)}
/* 説明は見出しより一段右から（左にそろえ切らない） */
.stp .tx{margin-left:clamp(0px,7vw,110px)}
.stp p{margin:20px 0 0;max-width:24em;font:500 clamp(17px,1.45vw,20px)/1.9 "Noto Sans JP",sans-serif;color:var(--ink2)}
.stp .keys{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 10px;margin:18px 0 0;padding:0;list-style:none}
.stp .keys li{padding:9px 13px;background:color-mix(in srgb,var(--blue) 9%,transparent);font:700 14px/1 "Noto Sans JP",sans-serif;color:var(--blue)}
.stp .keys li.kl{margin-right:4px;padding:0;background:none;font-size:12px;letter-spacing:.1em;color:var(--ink3)}
.names{display:flex;flex-wrap:wrap;gap:6px 16px;margin:26px 0 0;padding:0;list-style:none}
.names li{font:700 13px/1.6 "Noto Sans JP",sans-serif;color:#b3bad3;transition:color .3s}
.names li.on{color:var(--ink)}
/* ④ 箱が積み上がる */
.boxes{display:flex;align-items:flex-end;gap:3px;height:clamp(70px,9vw,120px);margin:clamp(40px,6vw,80px) 0 0;overflow:hidden}
.boxes i{flex:1 1 0;display:flex;flex-direction:column-reverse;gap:3px;height:100%}
.boxes i s{display:block;aspect-ratio:1;flex:0 0 auto;background:var(--c);transform:translateY(calc(100% + 140px));transition:transform .7s cubic-bezier(.2,.9,.25,1.15);transition-delay:var(--d)}
.boxes.in i s{transform:none}
.boxes.in i:nth-child(5n+2) s:last-child,.boxes.in i:nth-child(7n+4) s:last-child{animation:bob 2.2s ease-in-out infinite alternate;animation-delay:calc(var(--d) * 9)}
@keyframes bob{from{transform:translateY(0)}to{transform:translateY(-10px)}}
/* 背景の箱がところどころ明るくなる（止まっていても動く） */
canvas.glint{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
/* AI の使い方：大きな字で 2 つに分ける */
.ai2{max-width:1080px;margin:0 auto;padding:0 var(--pad);display:grid;grid-template-columns:1fr 1fr;gap:28px 6vw}
.ai2 h3{margin:0 0 14px;font:700 14px/1.4 "Noto Sans JP",sans-serif;letter-spacing:.06em;color:var(--ink3)}
.ai2 ul{margin:0;padding:0;list-style:none}
.ai2 li{font:900 clamp(26px,3.2vw,44px)/1.5 "Noto Sans JP",sans-serif}
.ai2 .use li{color:var(--blue)}
.ai2 .hum li{color:var(--ink)}
/* AI は左、人は右・少し下（向かい合わせ） */
.ai2 .hum{text-align:right;margin-top:clamp(60px,9vw,150px)}
/* よくある質問 */
.faq2{max-width:1080px;margin:0 auto;padding:0 var(--pad);display:grid;gap:clamp(30px,3.4vw,44px)}
.faq2>div{display:grid;grid-template-columns:72px minmax(0,1fr);gap:4px 12px}
.faq2 .q{grid-row:1/3;font:900 clamp(22px,2.4vw,30px)/1.3 "Inter",sans-serif;color:var(--blue)}
.faq2 dt{font:700 clamp(17px,1.5vw,20px)/1.6 "Noto Sans JP",sans-serif;color:var(--ink)}
.faq2 dd{margin:4px 0 0;font:500 16px/1.95 "Noto Sans JP",sans-serif;color:var(--ink2)}
/* よくある質問は相談のページへ（11/7）。ここには入口だけ */
.tofaq{max-width:1080px;margin:clamp(56px,7vw,96px) auto 0;padding:0 var(--pad);text-align:right}
.tofaq a{display:inline-flex;align-items:baseline;gap:14px;font:700 clamp(16px,1.4vw,19px)/1.7 "Noto Sans JP",sans-serif;color:var(--ink);text-underline-offset:6px}
.tofaq a>span{font:700 20px/1 "Inter",sans-serif;color:var(--blue);transition:transform .25s}
.tofaq a:hover>span{transform:translateX(6px)}
/* 出てくる動き（スクロールで下から） */
.rv{opacity:0;transform:translateY(28px);transition:opacity .7s,transform .7s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0s)}
.rv.in{opacity:1;transform:none}
.g2 .cta{margin-top:40px}
@media (max-width:820px){
.flow2{height:calc(6 * 42vh + 100vh)}
.flow2 .inner{grid-template-columns:minmax(0,1fr);gap:10px}
.cross{--cs:4px;gap:40px}.cross.c1{top:74px}.cross.c2{bottom:22px}
/* スマホ：帯は横に流れる。1 枚ずつ「上に絵・下に字」「上に字・下に絵」を交互にし、
前の帯の右端と次の帯の左端をそろえる。絵と字が市松に並び、縦の空きも使う（11/7） */
.hero2{height:320vh;--hbw:74vw}
.htrack{display:flex;gap:0;width:max-content;height:min(64vh,580px)}
.hb{flex:0 0 var(--hbw);width:var(--hbw);height:100%;display:flex;flex-direction:column;justify-content:flex-start}
.hb:nth-child(even){flex-direction:column-reverse}
.hb img{aspect-ratio:2.1/1}
.hb .im{box-shadow:0 16px 36px rgba(22,33,74,.28)}
/* 字は自分の絵にくっつけ、番号は絵の角に半分かかるように置く（どの番号がどの絵か一目で分かる。11/7） */
.hb .lb{display:flex;flex-direction:column;margin:0;padding:0 18px;font-size:19px;line-height:1.4;position:relative;z-index:2}
.hb:nth-child(odd) .lb{margin-top:-38px}
.hb:nth-child(even) .lb{text-align:right;margin-bottom:-38px}
.hb:nth-child(even) .lb .no{order:9;margin:10px 0 0}
.hb .no{display:block;margin-bottom:10px;font:900 76px/.9 "Inter",sans-serif;letter-spacing:-.04em;color:var(--blue);-webkit-text-stroke:3px var(--paper);paint-order:stroke fill}
.hb small{font-size:10px;margin-bottom:6px}
.hb .dsc{font-size:13px}
.flow2 .inner{grid-template-columns:minmax(0,1fr)}
.flow2 .num{grid-column:1;grid-row:1;justify-self:end;width:130px;height:96px}
.flow2 .sw{grid-row:2}
.num b{font-size:90px}
.stp h3{font-size:34px}
.stp .tx{margin-left:0}
.stp p{font-size:16px;margin-top:12px}
.stp .keys li{font-size:13px;padding:8px 11px}
.stepbox{min-height:16em}
.names{margin-top:6px}
.ai2{grid-template-columns:minmax(0,1fr)}
.ai2 .hum{margin-top:36px}
.g2 .gtop h1{font-size:22px}
.faq2>div{grid-template-columns:48px minmax(0,1fr)}
.faq2 dd{font-size:15px}
.mq span{-webkit-text-stroke-width:1.5px}
}
@media (prefers-reduced-motion:reduce){.rv,.stp,.num b,.boxes i s{transition:none}.px,.hb .im img,.boxes i s{animation:none!important}}
/* ---------------------------------------------------------------- 各サービスのページ（11/7） */
/* 帯は押すと大きく開く（ボタン） */
button.hb{padding:0;border:0;background:none;font:inherit;text-align:inherit;cursor:zoom-in}
.hb .lb .ln{display:block;text-wrap:balance}
/* できること：頼めるものを大きな字で、一つずつ右へずらして階段に */
.can{max-width:1080px;margin:0 auto;padding:0 var(--pad)}
.can ul{margin:0;padding:0;list-style:none}
.can li{font:900 clamp(30px,4.4vw,62px)/1.35 "Noto Sans JP",sans-serif;color:var(--blue);margin-left:calc(var(--k) * clamp(22px,5vw,90px))}
.can li:nth-child(even){color:var(--ink)}
.can .desc{max-width:30em;margin:clamp(28px,4vw,48px) 0 0 auto;font:500 clamp(16px,1.4vw,19px)/1.95 "Noto Sans JP",sans-serif;color:var(--ink2)}
.can .note{max-width:30em;margin:12px 0 0 auto;font:500 13px/1.8 "Noto Sans JP",sans-serif;color:var(--ink3)}
/* つくったもの：右へ寄せ、つくったものを一つずつ大きく */
.works{max-width:1080px;margin:0 auto;padding:0 var(--pad);text-align:right}
.works ul{margin:0;padding:0;list-style:none}
.works li{font:900 clamp(24px,3.2vw,44px)/1.45 "Noto Sans JP",sans-serif;color:var(--ink);margin-right:calc(var(--k) * clamp(18px,4vw,70px))}
.works .who{margin:0 0 14px;font:700 14px/1.4 "Noto Sans JP",sans-serif;letter-spacing:.06em;color:var(--ink3)}
.works .go{margin:clamp(22px,3vw,36px) 0 0;font:700 16px/1.6 "Noto Sans JP",sans-serif}
.works .go a{color:var(--ink);text-underline-offset:6px}
/* ほかのサービス */
.others2{max-width:1080px;margin:0 auto;padding:0 var(--pad);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.others2 a{display:block;text-decoration:none;color:var(--ink)}
.others2 img{width:100%;aspect-ratio:16/10;object-fit:cover;box-shadow:0 14px 30px rgba(22,33,74,.18);transition:transform .4s}
.others2 a:hover img{transform:translateY(-4px)}
.others2 span{display:block;margin-top:12px;font:700 15px/1.5 "Noto Sans JP",sans-serif}
.others2 small{display:block;margin-bottom:4px;font:700 10px/1 "Inter",sans-serif;letter-spacing:.16em;color:var(--blue)}
@media (max-width:820px){
.can .desc,.can .note{margin-left:0}
.works li{font-size:22px;margin-right:calc(var(--k) * 10px)}
.can li{margin-left:calc(var(--k) * 26px)}
.others2{grid-template-columns:minmax(0,1fr);gap:16px}
.others2 a{display:grid;grid-template-columns:44% minmax(0,1fr);gap:14px;align-items:center}
.others2 span{margin-top:0}
}
/* ---------------------------------------------------------------- ページごとの印（11/8）
型はそのまま。題の右上にそのサービスの絵を箱で組み上げ、落ちる箱の動きもページごとに変える */
.g2 .gtop{position:relative}
.gicon{position:absolute;left:var(--pad);bottom:56px;display:grid;grid-template-columns:repeat(var(--w),var(--gc,13px));gap:2px;pointer-events:none;animation:ghop 2.6s ease-in-out infinite}
.gicon s{width:var(--gc,13px);height:var(--gc,13px)}
.gicon s.f{background:var(--c);transform:translateY(-120px);opacity:0;transition:transform .7s cubic-bezier(.3,1.4,.5,1),opacity .3s;transition-delay:var(--d)}
.gicon.in s.f{transform:none;opacity:1}
@keyframes ghop{0%,100%{translate:0 0}50%{translate:0 -8px}}
/* パソコンは左下（題が右へ流れたあとの空き）、スマホは右上 */
@media (max-width:820px){.gicon{--gc:6px;gap:1px;top:66px;bottom:auto;left:auto;right:var(--pad)}}
@media (prefers-reduced-motion:reduce){.gicon{animation:none}.gicon s.f{transition:none}}
/* ゲームは英字が長い（INTERACTIVE）ので、スマホで画面からはみ出さないよう少し小さく */
@media (max-width:820px){body[data-svc="game"] .gtop .en{font-size:11.2vw}}
/* ---------------------------------------------------------------- サイト全体の仕上げ（11/8） */
/* ページごとの差し色：トップの区画の色に合わせる（明るい地で読めるよう少し濃く） */
body[data-tone="about"]{--blue:#de4f2c;--wall-h:16}
body[data-tone="contact"]{--blue:#c8621a;--wall-h:30}
/* 箱で組み上がる題字：ページの英字の題は、字の形に並んだ小さな箱が上から降りて組み上がり、
スクロールで画面の上へ抜けるときに崩れ落ちる（トップの 3D で SERVICES の字が崩れるのと同じ考え） */
.btitle{position:relative}
.btitle .tx{color:transparent!important;-webkit-text-stroke:0!important}
.btitle canvas{position:absolute;left:0;top:0;pointer-events:none;z-index:2}
/* 縦書きの小さな見出し（区画の横に添える） */
.vlab{writing-mode:vertical-rl;text-orientation:mixed;font:700 13px/1 "Noto Sans JP",sans-serif;letter-spacing:.32em;color:var(--ink3)}
.vlab b{font:700 11px/1 "Inter",sans-serif;letter-spacing:.2em;color:var(--blue);margin-bottom:14px}
/* 傾いた 2 本の帯の字（逆向きに流れて交差する） */
.xband{position:relative;height:clamp(150px,17vw,260px);margin:clamp(40px,7vw,100px) 0;overflow:hidden;pointer-events:none}
.xband .mq{position:absolute;left:-10%;right:-10%;padding:clamp(10px,1.2vw,18px) 0;top:50%}
.xband .mq div{font-size:clamp(34px,6vw,92px);line-height:1}
.xband .m1{background:var(--blue);transform:translateY(-62%) rotate(-4deg)}
.xband .m1 div,.xband .m1 i{color:#fff}.xband .m1 span{-webkit-text-stroke-color:#fff}
.xband .m2{background:var(--ink);transform:translateY(-38%) rotate(3deg)}
.xband .m2 div{color:#f3f5fa}.xband .m2 i{color:color-mix(in srgb,var(--blue) 55%,#fff)}.xband .m2 span{-webkit-text-stroke-color:#f3f5fa}
/* 題・見出しで使う、明朝の細い字と太いゴシックの組み合わせ */
.mix{font:900 clamp(40px,7vw,108px)/1.05 "Inter",sans-serif;letter-spacing:-.02em;color:var(--ink)}
.mix em{font:500 italic 1em/1 "Noto Serif JP",serif;letter-spacing:0;color:var(--blue)}
.vis{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){.xband .mq div{transform:none!important}}
/* ---------------------------------------------------------------- 各ページの部品（11/8） */
/* 題の横に添える縦書きの小さな見出し（パソコンは右端に縦に、スマホは出さない） */
.gtop .vlab.side{position:absolute;right:calc(var(--pad) - 34px);top:150px}
@media (max-width:1100px){.gtop .vlab.side{display:none}}
/* 一言の大きな字（明朝の斜体と太いゴシックを混ぜる）。左に字、右下に日本語を斜めにずらして添える */
.statement{max-width:1080px;margin:clamp(40px,6vw,90px) auto 0;padding:0 var(--pad);display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:20px 40px}
.statement .mix{margin:0}
.st-jp{margin:0 0 .6em;font:700 clamp(15px,1.4vw,19px)/1.9 "Noto Sans JP",sans-serif;color:var(--ink2);text-align:right}
/* 3D の映像（トップの区画と同じ場面）を、少し傾けた額で見せ、スクロールでまっすぐに戻す */
.reel{position:relative;max-width:1180px;margin:0 auto clamp(30px,5vw,70px);padding:0 var(--pad)}
.reel video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#0b1640;box-shadow:0 30px 70px rgba(22,33,74,.28);
transform:perspective(1400px) rotateX(var(--rx,10deg)) scale(var(--rs,.94));transform-origin:50% 100%;will-change:transform}
.reel.wide video{aspect-ratio:21/9}
.tate-catch{position:absolute;right:calc(var(--pad) + clamp(16px,3vw,48px));top:50%;translate:0 -50%;margin:0;writing-mode:vertical-rl;
font:600 clamp(26px,3.4vw,48px)/1.6 "Noto Serif JP",serif;letter-spacing:.14em;color:#fff;text-shadow:0 2px 24px rgba(10,20,60,.45)}
/* プロフィール：見出しは小さく左、中身は大きく。行ごとに少しずつ右へずらす */
.prof{max-width:1080px;margin:0 auto;padding:0 var(--pad);display:grid;gap:clamp(18px,2.4vw,30px)}
.prof>div{display:grid;grid-template-columns:120px minmax(0,1fr);align-items:baseline;gap:6px 24px}
.prof>div:nth-child(2n){margin-left:clamp(0px,6vw,90px)}
.prof dt{font:700 13px/1.4 "Noto Sans JP",sans-serif;letter-spacing:.12em;color:var(--ink3)}
.prof dd{margin:0;font:900 clamp(24px,3vw,40px)/1.3 "Noto Sans JP",sans-serif;color:var(--ink)}
.prof dd small{display:inline-block;margin-left:14px;font:700 14px/1 "Noto Sans JP",sans-serif;color:var(--ink3)}
.prof dd.links{display:flex;flex-wrap:wrap;gap:6px 22px}
.prof dd.links a{color:var(--blue);text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 3px no-repeat;transition:background-size .35s}
.prof dd.links a:hover{background-size:100% 3px}
/* メッセージ：縦書き（右から左へ読む）。左に縦の小見出し */
.msg{max-width:1080px;margin:0 auto;padding:0 var(--pad);display:flex;flex-direction:row-reverse;justify-content:center;gap:clamp(24px,5vw,80px)}
.msg .vlab{font-size:14px}
.tate{writing-mode:vertical-rl;height:min(30em,560px);font:500 clamp(17px,1.5vw,20px)/2.3 "Noto Serif JP",serif;letter-spacing:.08em;color:var(--ink)}
.tate p{margin:0 0 0 1.4em}
.tate p:first-child::first-line{font-weight:600}
/* 相談：申し込み欄（枠線は引かず、白い面と影で立てる） */
.form2{max-width:760px;margin:0 auto;padding:0 var(--pad)}
.form2>.note{margin:0 0 22px;font:500 14px/1.8 "Noto Sans JP",sans-serif;color:var(--ink2)}
.form2 form{display:grid;gap:22px}
.form2 label{display:grid;gap:8px}
.form2 label span{font:700 14px/1.4 "Noto Sans JP",sans-serif;letter-spacing:.06em;color:var(--ink)}
.form2 input,.form2 textarea{font:500 16px/1.7 "Noto Sans JP",sans-serif;color:var(--ink);background:#fff;border:0;border-radius:2px;padding:14px 16px;box-shadow:0 1px 0 rgba(22,33,74,.06),0 10px 24px rgba(22,33,74,.07);outline:none;transition:box-shadow .25s}
.form2 input:focus,.form2 textarea:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 35%,transparent),0 10px 24px rgba(22,33,74,.08)}
.form2 button{justify-self:start;display:inline-flex;gap:18px;align-items:center;padding:18px 28px;border:0;background:var(--ink);color:#f5f7fb;font:600 16px/1 "Noto Serif JP",serif;letter-spacing:.2em;opacity:.45;cursor:not-allowed}
.form2 form .note{margin:-6px 0 0;font:500 13px/1.8 "Noto Sans JP",sans-serif;color:var(--ink3)}
@media (max-width:820px){
.statement{grid-template-columns:minmax(0,1fr)}
.reel video{aspect-ratio:4/3}
.reel.wide video{aspect-ratio:4/5}
.tate-catch{font-size:26px;right:calc(var(--pad) + 14px)}
.prof>div{grid-template-columns:minmax(0,1fr);gap:4px}
.prof>div:nth-child(2n){margin-left:24px}
.prof dd{font-size:24px}
.msg{flex-direction:column;align-items:flex-end;gap:18px}
.msg .vlab{writing-mode:horizontal-tb;align-self:flex-start;letter-spacing:.2em}
.msg .vlab b{margin:0 12px 0 0}
.tate{height:440px;font-size:16px;line-height:2.15;max-width:100%;overflow-x:auto}
}
/* .paper p（16px の本文）に負けないよう、部品の字は強めに指定する */
.g2 p.mix{font:900 clamp(46px,8vw,120px)/1.02 "Inter",sans-serif;letter-spacing:-.02em;color:var(--ink)}
.g2 p.mix em{font:500 italic 1em/1 "Noto Serif JP",serif;color:var(--blue)}
.g2 p.st-jp{font:700 clamp(15px,1.4vw,19px)/1.9 "Noto Sans JP",sans-serif;color:var(--ink2)}
.g2 p.vlab{font:700 13px/1 "Noto Sans JP",sans-serif;letter-spacing:.32em;color:var(--ink3);margin:0}
.g2 .msg p.vlab{font-size:14px}
.g2 .tate p{font:inherit;color:inherit;letter-spacing:inherit}
.g2 p.tate-catch{font:600 clamp(26px,3.4vw,48px)/1.6 "Noto Serif JP",serif;letter-spacing:.14em;color:#fff}
@media (max-width:820px){.g2 p.mix{font-size:15vw}.g2 p.tate-catch{font-size:24px}}
.g2 p.tate-catch{white-space:nowrap}
@media (max-width:820px){.g2 p.mix{font-size:12.4vw}}
/* 日本語の改行：見出し・札・短い一文は文節で折る（「ご依頼につい／て」「制／作」のような切れを防ぐ） */
.g2 h1,.g2 h2,.g2 h3,.g2 .lead,.g2 .hb .lb,.g2 .tofaq a,.g2 .cta p,.g2 .st-jp,.g2 .sec-h p,.g2 .toc a,.g2 .faq2 summary,.g2 .others2 a,.g2 .works li,.g2 .can li{word-break:auto-phrase;text-wrap:balance}
.g2 p,.g2 dd,.g2 li{text-wrap:pretty}
.nw{white-space:nowrap}
.tofaq .tt{font:inherit}
/* 縦書き：文節で折り、行頭の「ー」「、」を避ける。英字 2 字は縦中横 */
.g2 .tate p,.g2 p.tate-catch{line-break:strict;word-break:auto-phrase}
.tcy{text-combine-upright:all}
/* 雲の白の上でも読めるよう、字のまわりだけ薄く暗くする */
.g2 p.tate-catch{text-shadow:0 0 2px rgba(12,24,48,.55),0 2px 14px rgba(12,24,48,.6),0 0 30px rgba(12,24,48,.35)}
.paper .tofaq + footer{margin-top:clamp(40px,6vw,72px)}
.btitle{word-spacing:.16em}
/* ほかのサービス：トップの 3D の場面（板の文字が切れないよう下を落とす）。字は少し大きく */
.others2 img{aspect-ratio:16/7;object-position:50% 26%;background:#1b2160}
.others2 small{font-size:11px}
.paper .boxes + .sec-h{margin-top:clamp(24px,3vw,40px)}
/* 今いるページの名前は、そのページの差し色で光らせる（トップの暗い型の黄緑を持ち込まない） */
body.light header nav a[aria-current],body.light header.lite nav a[aria-current]{color:var(--blue)}
.others2 img{object-position:50% 16%}
/* 明るいページの締め：見出しとボタンもほかの見出しと同じ太いゴシックに（明朝は暗い 3D の型の名残） */
.g2 .cta h2{font:900 clamp(30px,3.6vw,48px)/1.3 "Noto Sans JP",sans-serif;letter-spacing:.02em}
.g2 .cta a,.form2 button{font-family:"Noto Sans JP",sans-serif;font-weight:700;letter-spacing:.16em}
@media (max-width:820px){.g2 .cta h2{font-size:28px}}
/* 11/8 ユーザー「全部ゴシックに」：明るいページから明朝をなくす */
.g2 .tate{font-family:"Noto Sans JP",sans-serif;font-weight:500;letter-spacing:.1em}
.g2 p.tate-catch{font-family:"Noto Sans JP",sans-serif;font-weight:900;letter-spacing:.16em}
.g2 p.mix em,.mix em{font-family:"Inter","Noto Sans JP",sans-serif;font-weight:900;font-style:italic;letter-spacing:-.02em}
body.light #menu .cta{font-family:"Noto Sans JP",sans-serif;font-weight:700;letter-spacing:.16em}
/* 11/8 ONE or ALL などの交差する帯を太く */
.xband{height:clamp(230px,27vw,420px)}
.xband .mq{padding:clamp(16px,2vw,30px) 0}
.xband .mq div{font-size:clamp(58px,10.5vw,160px)}
@media (max-width:820px){.xband{height:clamp(190px,58vw,260px)}.xband .mq div{font-size:15vw}}
/* 11/8 AI の使い方（作り直し）：箱で組む大きな「AI」と「人」。AI の仕事は小さな箱でできた字（機械の下書き）、人の仕事は塗りの太い字（仕上げ） */
.ai3{max-width:1080px;margin:0 auto;padding:0 var(--pad);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 6vw;align-items:start}
.ai3 .side{min-width:0}
.ai3 .s-hum{margin-top:clamp(140px,17vw,280px);text-align:right}
.ai3 .big{margin:0;font:900 clamp(150px,19vw,270px)/.82 "Inter","Noto Sans JP",sans-serif;letter-spacing:-.04em;color:var(--ink)}
.ai3 .s-hum .big{display:inline-block}
.ai3 h3{margin:clamp(16px,2vw,26px) 0 clamp(18px,2.4vw,30px);font:700 14px/1.4 "Noto Sans JP",sans-serif;letter-spacing:.08em;color:var(--ink3)}
.ai3 ul{margin:0;padding:0;list-style:none}
.ai3 li{font:900 clamp(30px,3.8vw,54px)/1.34 "Noto Sans JP",sans-serif;white-space:nowrap}
.ai3 .s-ai li{margin-left:calc(var(--k) * clamp(12px,2vw,30px))}
.ai3 .s-ai li span{display:inline-block;color:transparent;
background:repeating-linear-gradient(90deg,var(--blue) 0 4px,transparent 0 5px);-webkit-background-clip:text;background-clip:text;
-webkit-mask:repeating-linear-gradient(180deg,#000 0 4px,transparent 0 5px);mask:repeating-linear-gradient(180deg,#000 0 4px,transparent 0 5px)}
.ai3 .s-hum li{font-size:clamp(34px,4.8vw,70px);line-height:1.25;color:var(--ink)}
.ai3 .s-hum li+li{margin-top:.12em}
@media (max-width:820px){
.ai3{grid-template-columns:minmax(0,1fr)}
.ai3 .s-hum{margin-top:56px}
.ai3 .big{font-size:44vw}
.ai3 li{font-size:8.6vw}
.ai3 .s-ai li span{background-size:auto;background-image:repeating-linear-gradient(90deg,var(--blue) 0 3px,transparent 0 4px);-webkit-mask:repeating-linear-gradient(180deg,#000 0 3px,transparent 0 4px);mask:repeating-linear-gradient(180deg,#000 0 3px,transparent 0 4px)}
.ai3 .s-hum li{font-size:10vw}
}
/* AI の仕事：1 文字ずつ箱に入れて並べる（箱の壁と同じ、上左が明るく下右が暗い箱）。入ると上から 1 つずつ落ちて並ぶ */
.ai3 .s-ai li{font-size:clamp(26px,3.2vw,46px);line-height:1;margin-top:.22em}
.ai3 .s-ai li span{color:var(--blue);background:none;-webkit-mask:none;mask:none;display:inline-flex;gap:.08em}
.ai3 .s-ai li span i{font-style:normal;display:inline-grid;place-items:center;width:1.2em;height:1.2em;
background:color-mix(in srgb,var(--blue) 9%,#fff);
box-shadow:inset .06em .06em 0 rgba(255,255,255,.9),inset -.07em -.07em 0 color-mix(in srgb,var(--blue) 22%,#fff),0 .12em .3em rgba(22,33,74,.10);
opacity:0;transform:translateY(-1.4em)}
.ai3 .s-ai li.in span i{animation:chipin .55s cubic-bezier(.2,.9,.25,1.25) forwards;animation-delay:calc(var(--d,0s) + var(--n) * 55ms)}
.ai3 .s-ai li.in span i:nth-child(3n+2){animation:chipin .55s cubic-bezier(.2,.9,.25,1.25) forwards,chipbob 2.6s ease-in-out 1.4s infinite alternate;animation-delay:calc(var(--d,0s) + var(--n) * 55ms),calc(1.2s + var(--n) * 330ms)}
@keyframes chipin{to{opacity:1;transform:none}}
@keyframes chipbob{0%,70%{translate:0 0}100%{translate:0 -.1em}}
@media (prefers-reduced-motion:reduce){.ai3 .s-ai li span i{opacity:1;transform:none;animation:none!important}}
@media (max-width:820px){.ai3 .s-ai li{font-size:7.4vw}.ai3 .s-ai li span{background:none;-webkit-mask:none;mask:none}}
/* 太くした 2 本が重なりすぎないよう、上下に離して真ん中で交差させる */
.xband{height:clamp(270px,33vw,500px)}
.xband .m1{transform:translateY(-92%) rotate(-4deg)}
.xband .m2{transform:translateY(-8%) rotate(3deg)}
@media (max-width:820px){.xband{height:clamp(200px,62vw,280px)}}
/* 11/8 About 専用の 3D：箱で組んだ「霞」の印（seal.js）。地の箱の壁の上にそのまま置く（額に入れない） */
.seal{position:relative;height:clamp(460px,58vw,820px);margin:clamp(10px,2vw,30px) 0 clamp(20px,4vw,60px);touch-action:pan-y}
.seal canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.seal-cap{position:absolute;right:calc(var(--pad) + 4px);bottom:clamp(18px,4vw,60px);margin:0;writing-mode:vertical-rl;display:flex;align-items:center;gap:14px;
font:700 12px/1 "Inter",sans-serif;letter-spacing:.32em;color:var(--ink3);pointer-events:none}
.seal-cap b{font:900 22px/1 "Noto Sans JP",sans-serif;letter-spacing:0;color:var(--blue)}
@media (max-width:820px){.seal{height:112vw;margin-top:0}.seal-cap{bottom:12px}}
/* メッセージ：左の空きをなくし、横いっぱいに広げる（列の高さは light.js が幅に合わせて決める） */
.g2 .msg{justify-content:space-between}
.g2 .tate{flex:0 0 auto;font-size:clamp(19px,1.75vw,25px);line-height:2.25;letter-spacing:.16em;overflow:visible;max-width:none}
@media (max-width:820px){.g2 .tate{font-size:17px;line-height:2.1;letter-spacing:.12em}}
/* 漢字を使わない（11/8）：「人」→ HUMAN。右の列に収まる大きさに */
.ai3 .s-hum .big{font-size:clamp(84px,9.6vw,140px)}
@media (max-width:820px){.ai3 .s-hum .big{font-size:23vw}.seal{height:78vw}}
@media (max-width:820px){.seal-cap{display:none}.seal{height:70vw}}
/* メッセージ：列の長さは前のまま（11/8 ユーザー）、字の大きさも前に戻す。行間は light.js が広げる */
.g2 .tate{height:min(30em,560px);font-size:clamp(17px,1.5vw,20px);letter-spacing:.1em}
@media (max-width:820px){.g2 .tate{height:440px;font-size:16px}}
/* メッセージ：句読点の所でだけ改行する（途中で折らない）。列の長さはいちばん長い一文に合わせる */
.g2 .tate{height:max-content}
.g2 .tate p{white-space:nowrap}
/* 11/8 Contact：導入 → フォーム → よくある質問（ChatGPT の評価 4）。パソコンは雲海の映像をフォームの右に縦長で添える */
.cwrap{max-width:1080px;margin:0 auto;padding:0 var(--pad);display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr);gap:clamp(28px,4.5vw,72px);align-items:start}
.cwrap .form2{max-width:none;margin:0;padding:0}
.reel.side{max-width:none;margin:0;padding:0;position:sticky;top:110px}
.reel.side video{aspect-ratio:4/5}
.g2 .gtop .toc a.pri{background:var(--ink);color:#f5f7fb;padding:12px 22px;font-size:15px}
.g2 .gtop .toc a.pri::after{content:" →";color:color-mix(in srgb,var(--blue) 60%,#fff)}
.g2 .gtop .toc a.pri:hover{color:#fff;background:color-mix(in srgb,var(--ink) 85%,var(--blue))}
.g2 .gtop .toc{align-items:center}
@media (max-width:820px){.cwrap{grid-template-columns:minmax(0,1fr)}.reel.side{position:static}.reel.side video{aspect-ratio:1/1}}
/* 11/8 流れる巨大英字・区切りの箱を減らしたので（ChatGPT の評価 8）、見出しの前の間は余白でとる */
.paper.g2 .sec-h{margin-top:clamp(64px,8vw,120px)}
.paper.g2 .gtop + .sec-h{margin-top:clamp(28px,4vw,56px)}
/* 11/8 題の並び（ChatGPT の評価 7）：パソコンは英字の題と、名前・説明の上端をそろえた 2 列。絵の帯を少し上へ寄せて、題の下の空きを詰める */
@media (min-width:821px){
.g2 .gtop{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,24em);column-gap:clamp(32px,5vw,80px);align-items:start}
.g2 .gtop .back{grid-column:1/-1;justify-self:start}
.g2 .gtop .en{grid-column:1;grid-row:2/span 3}
.g2 .gtop h1{grid-column:2;grid-row:2;justify-self:start;margin-top:4px}
.g2 .gtop .lead{grid-column:2;grid-row:3;justify-self:start;max-width:none}
.g2 .gtop .toc{grid-column:2;grid-row:4;justify-self:start}
.g2 .gtop .gicon{position:static;grid-column:1;grid-row:5;margin-top:22px}
.g2 .gtop + .hero2{margin-top:-14vh;pointer-events:none}
.g2 .gtop + .hero2 .hb{pointer-events:auto}
}
/* 11/8 スマホの「できること」も斜めの段違いに戻した（ユーザー「斜めがいい」） */
/* 2 列の題：英字が左の列に収まる大きさに（長い INTERACTIVE EXPERIENCE は小さめ）。題の段を絵の帯より手前に */
@media (min-width:821px){
.g2 .gtop{grid-template-columns:minmax(0,1fr) minmax(0,20em);position:relative;z-index:2}
.g2 .gtop .en{font-size:clamp(48px,6.2vw,90px)}
body[data-svc="game"] .g2 .gtop .en{font-size:clamp(40px,4.4vw,64px)}
.g2 .sec-h + .flow2{margin-top:-14vh}
.reel.side .tate-catch{font-size:clamp(20px,1.9vw,28px)}
}
@media (min-width:821px){.g2 .gtop + .hero2{margin-top:-20vh}}
/* 11/8 Contact の一言は映像の上に重ねない（ベタ付けに見える）。映像の右に、ページの字として縦書きで並べる */
.reel.side{display:flex;align-items:flex-start;gap:clamp(14px,1.6vw,24px)}
.reel.side video{flex:1 1 auto;min-width:0}
.g2 .reel.side p.tate-catch{position:static;translate:none;flex:0 0 auto;margin:0;color:var(--ink);text-shadow:none;font:900 clamp(22px,2vw,30px)/1.3 "Noto Sans JP",sans-serif;letter-spacing:.14em}
@media (max-width:820px){.g2 .reel.side p.tate-catch{font-size:20px}}
/* 11/8 つくったもの：目的・担当・工夫（ユーザーから聞いた事実）。列は右に寄せ、文は左そろえで読みやすく */
.works .wk{max-width:34em;margin:clamp(26px,3.4vw,44px) 0 0 auto;text-align:left;display:grid;gap:14px}
.works .wk>div{display:grid;grid-template-columns:3.4em minmax(0,1fr);gap:0 14px;align-items:baseline}
.works .wk dt{font:700 13px/1.6 "Noto Sans JP",sans-serif;letter-spacing:.08em;color:var(--blue)}
.works .wk dd{margin:0;font:500 15px/1.9 "Noto Sans JP",sans-serif;color:var(--ink2);text-wrap:pretty}
@media (max-width:820px){.works .wk>div{grid-template-columns:minmax(0,1fr);gap:2px}.works .wk dd{font-size:14.5px}}
.ai-note{max-width:1080px;margin:clamp(40px,5vw,72px) auto 0;padding:0 var(--pad);font:500 clamp(16px,1.35vw,18px)/2 "Noto Sans JP",sans-serif;color:var(--ink2)}
@media (min-width:821px){.ai-note{padding-right:calc(var(--pad) + 30%)}}
.prof dd.sm{font:700 clamp(17px,1.7vw,23px)/1.6 "Noto Sans JP",sans-serif}
/* 11/8 スマホのサービスの帯（評価 2 回目）：横に流さず、絵と説明を組にした普通の縦並び。左右へ振らない */
@media (max-width:820px){
.hero2{height:auto;margin-top:8px}
.hero2 .pin{position:static;height:auto;overflow:visible;display:block}
.hero2 .htrack{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;width:auto;height:auto;padding:0 var(--pad);transform:none!important}
.hero2 .hb,.hero2 .hb:nth-child(even){width:auto;height:auto;display:block;flex:none;transform:none!important;opacity:1!important}
.hero2 .hb .lb,.hero2 .hb:nth-child(odd) .lb,.hero2 .hb:nth-child(even) .lb{display:block;position:relative;margin:24px 0 0;padding:0;text-align:left;font-size:19px}
.hero2 .hb .no,.hero2 .hb:nth-child(even) .lb .no{position:absolute;left:-2px;top:-52px;margin:0;font-size:56px}
.hero2 .hb .dsc{font-size:14px;color:var(--ink2)}
}
.g2 .gtop .toc a.out::after{content:" →"}
/* 11/8 AI と人（評価 2 回目）：1 文字ずつ順に落とさず、ことば単位で短く（0.3 秒）組み上げる。止まってからの揺れもやめる */
.ai3 .s-ai li.in span i,.ai3 .s-ai li.in span i:nth-child(3n+2){animation:chipin .3s cubic-bezier(.2,.9,.25,1.2) forwards;animation-delay:var(--d,0s)}
.ai3 .s-ai li span i{transform:translateY(-.5em)}
/* 11/8 進め方の 6 工程（評価 2 回目）：画面に留めて 1 つずつ見せるのをやめ、見渡せる一覧に。番号 → 工程名 → 説明 → 決めること の順でそろえる */
.gsteps{max-width:1080px;margin:0 auto;padding:0 var(--pad);list-style:none;counter-reset:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(40px,4.4vw,64px) clamp(28px,3.2vw,52px)}
.gsteps>li{min-width:0}
.gsteps .sn{display:block;font:900 clamp(34px,3.2vw,46px)/1 "Inter",sans-serif;letter-spacing:-.03em;color:var(--blue)}
.gsteps h3{margin:12px 0 0;font:900 clamp(20px,1.7vw,24px)/1.4 "Noto Sans JP",sans-serif;color:var(--ink)}
.gsteps p{margin:8px 0 0;font:500 15px/1.85 "Noto Sans JP",sans-serif;color:var(--ink2)}
.gsteps .keys{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;margin:14px 0 0;padding:0;list-style:none}
.gsteps .keys li{padding:7px 11px;background:color-mix(in srgb,var(--blue) 9%,transparent);font:700 13px/1 "Noto Sans JP",sans-serif;color:var(--blue)}
.gsteps .keys li.kl{padding:0;background:none;font-size:12px;letter-spacing:.1em;color:var(--ink3)}
@media (max-width:1000px){.gsteps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.gsteps{grid-template-columns:minmax(0,1fr);gap:34px}.gsteps>li{display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:10px}.gsteps .sn{grid-row:1/span 3;font-size:34px}.gsteps h3{margin-top:2px}.gsteps .keys{grid-column:2}}
/* 11/8 サービスの帯は「そのサービスの特徴」だけに（できること・つくったものと重なる帯を外して 2 枚に） */
@media (min-width:821px){.hero2[data-n="2"]{height:210vh}}
/* 11/8 進め方（作り込み）：番号は箱で組み上げる。パソコンは列ごとに少しずつ下げて、階段を下りる順に読める */
.gsteps{row-gap:clamp(56px,6vw,96px)}
.gsteps .sn{margin:0;font:900 clamp(56px,5.2vw,76px)/.9 "Inter",sans-serif;letter-spacing:-.02em;color:var(--blue)}
.gsteps h3{margin-top:14px;font-size:clamp(22px,1.9vw,27px)}
.gsteps p:not(.sn){max-width:22em}
@media (min-width:1001px){.gsteps>li:nth-child(3n+2){margin-top:clamp(40px,4vw,64px)}.gsteps>li:nth-child(3n){margin-top:clamp(80px,8vw,128px)}}
@media (min-width:621px) and (max-width:1000px){.gsteps>li:nth-child(even){margin-top:clamp(40px,5vw,64px)}}
@media (max-width:620px){.gsteps>li{grid-template-columns:76px minmax(0,1fr);column-gap:12px}.gsteps .sn{font-size:46px;grid-row:1/span 3}.gsteps h3{margin-top:4px;font-size:22px}}
.gsteps .sn{font-size:clamp(72px,6.4vw,96px)}
@media (max-width:620px){.gsteps>li{grid-template-columns:92px minmax(0,1fr)}.gsteps .sn{font-size:58px}}
/* 11/8 About の合言葉：箱で組み上げる大きな字（1 行目は紺で左、activated. は青の斜体で右）。「合言葉」の字は置かない */
.motto{max-width:1080px;margin:clamp(70px,9vw,140px) auto 0;padding:0 var(--pad)}
.motto p{margin:0;font:900 clamp(42px,10.4vw,126px)/.95 "Inter",sans-serif;letter-spacing:-.02em;color:var(--ink)}
.motto .m2{font-style:italic;text-align:right;margin-top:.12em}
/* 11/8 各サービスのページの帯は番号を出さない（サービス一覧だけ番号あり） */
.hero2[data-n="2"] .hb .no{display:none!important}
@media (max-width:820px){.hero2[data-n="2"] .hb .lb{margin-top:16px}}
/* 11/8 進め方：「伺うこと」などの見出しと色の札をやめ、項目だけを静かな字で「／」区切りに。番号は青の箱（GUIDE の紺の題と分ける） */
.gsteps .keys{display:block;margin-top:12px}
.gsteps .keys li.kl{display:none}
.gsteps .keys li{display:inline;padding:0;background:none;font:600 14px/1.8 "Noto Sans JP",sans-serif;color:var(--blue)}
.gsteps .keys li:not(.kl)+li:not(.kl)::before{content:"／";margin:0 .35em;color:var(--ink3);font-weight:400}
/* 11/8 サービス一覧：頼めるものの下に、実際につくったもの（文字だけ） */
.hb .wk2{display:block;margin-top:10px;font:500 13px/1.7 "Noto Sans JP",sans-serif;color:var(--ink2)}
.hb .wk2 b{display:inline-block;margin-right:.8em;font:700 11px/1 "Noto Sans JP",sans-serif;letter-spacing:.1em;color:var(--blue)}
@media (max-width:820px){.hero2 .hb .wk2{font-size:14px}}
/* 11/8 合言葉（箱を使わない作り込み）：輪郭の字がスクロールで塗られ、activated. は 1 文字ずつ点く */
.motto .m1{color:transparent;-webkit-text-stroke:1.6px var(--ink);
background:linear-gradient(90deg,var(--ink) var(--p,0%),transparent var(--p,0%));-webkit-background-clip:text;background-clip:text}
.motto .m2{color:var(--blue)}
.motto .m2 span{display:inline-block;opacity:.08;filter:blur(6px);transform:translateY(.12em);transition:opacity .45s,filter .45s,transform .55s cubic-bezier(.2,.9,.25,1.2);transition-delay:calc(var(--i) * 70ms)}
.motto.on .m2 span{opacity:1;filter:none;transform:none}
@media (max-width:820px){.motto .m1{-webkit-text-stroke-width:1.1px}}
@media (prefers-reduced-motion:reduce){.motto .m2 span{transition:none}}
/* 進め方の番号（箱を使わない）：青の太い数字の後ろに、細い輪郭の同じ数字を少しずらして重ねる */
.gsteps .sn{position:relative;display:inline-block;color:var(--blue);font:900 clamp(64px,5.6vw,84px)/.9 "Inter",sans-serif;letter-spacing:-.03em}
.gsteps .sn::before{content:attr(data-n);position:absolute;left:.07em;top:.07em;z-index:-1;color:transparent;-webkit-text-stroke:1.2px var(--ink)}
@media (max-width:620px){.gsteps .sn{font-size:52px}}
.gsteps .sn{isolation:isolate}
/* 11/8 About のメッセージ：「速く納める」「質は今まで以上」を大きく太く。画面に入ると、紺から差し色へ順に点く */
.g2 .tate .hl{font-weight:900;font-size:1.55em;letter-spacing:.06em;color:var(--ink);transition:color .8s ease}
.g2 .tate .hl.on{color:var(--blue)}
.g2 .tate .hl.on+br+.hl{transition-delay:.5s}
@media (prefers-reduced-motion:reduce){.g2 .tate .hl{color:var(--blue);transition:none}}
.prof dd small.kj{display:block;margin:6px 0 0;font:700 14px/1.4 "Noto Sans JP",sans-serif;letter-spacing:.12em;color:var(--ink3)}
/* 11/8 Contact：雲海の上の立方体をつかんで動かす */
.reel.side .cubebox{flex:1 1 auto;min-width:0;position:relative;overflow:hidden;aspect-ratio:4/5;box-shadow:0 30px 70px rgba(22,33,74,.28)}
.reel.side .cubebox video{display:block;width:100%;height:100%;aspect-ratio:auto;box-shadow:none;transform:none}
.cb-cube{position:absolute;left:0;top:0;transform-origin:50% 50%;opacity:0;transition:opacity .35s ease;will-change:transform;pointer-events:none}
.cb-cube.on{opacity:1}
.cb-cube canvas{display:block;width:100%;height:100%}
.cb-cube .hit{position:absolute;cursor:grab;pointer-events:auto;touch-action:none}
.cb-cube .hit.grab{cursor:grabbing}
@media (max-width:820px){.reel.side .cubebox{aspect-ratio:1/1}}
/* 11/8 つくったもの：実物の画像と動画 */
.works .pj+.pj{margin-top:clamp(84px,11vw,150px)}
.shots{margin:clamp(24px,3vw,40px) 0 0;display:grid;gap:clamp(12px,1.6vw,22px);text-align:left}
.shots figure{margin:0;min-width:0}
.shots figcaption{margin-top:10px;font:500 13px/1.7 "Noto Sans JP",sans-serif;color:var(--ink2)}
.wimg{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;min-width:0}
.wimg img{display:block;width:100%;height:auto;box-shadow:0 14px 34px rgba(22,33,74,.16);transition:transform .35s ease}
.wimg:hover img{transform:translateY(-3px)}
.shots.site3{grid-template-columns:minmax(0,3fr) minmax(0,1fr) minmax(0,1fr);align-items:start}
.shots.site3 .top img{aspect-ratio:780/1688;object-fit:cover;object-position:50% 0}
.shots.dev{display:block;position:relative;margin-right:9%;margin-bottom:5%}
.shots.dev .ph{position:absolute;right:-9%;bottom:-7%;width:21%}
.shots.dev .ph img{box-shadow:0 22px 46px rgba(22,33,74,.32)}
.shots.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.shots.c4{grid-template-columns:repeat(4,minmax(0,1fr));align-items:start}
.shots.six{grid-template-columns:repeat(6,minmax(0,1fr));align-items:center}
.shots.pasta{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.6fr);align-items:end}
.shots.one{max-width:860px;margin-left:auto}
.shots.vids{grid-template-columns:minmax(0,1fr) minmax(0,3.05fr);align-items:start}
.shots.vids video{display:block;width:100%;height:auto;background:#0b1640;box-shadow:0 14px 34px rgba(22,33,74,.16)}
.shots.vids .tall video{aspect-ratio:9/16}
.shots.vids .wide video{aspect-ratio:16/9}
.pjnote{max-width:34em;margin:14px 0 0 auto;text-align:left;font:500 12.5px/1.8 "Noto Sans JP",sans-serif;color:var(--ink3);text-wrap:pretty}
@media (max-width:820px){
.shots.site3{grid-template-columns:repeat(2,minmax(0,1fr))}
.shots.site3>:first-child{grid-column:1/-1}
.shots.c4{grid-template-columns:repeat(2,minmax(0,1fr))}
.shots.six{grid-template-columns:repeat(3,minmax(0,1fr))}
.shots.c2{grid-template-columns:minmax(0,1fr)}
.shots.pasta{grid-template-columns:repeat(2,minmax(0,1fr))}
.shots.pasta .sp{grid-column:1/-1}
.shots.vids{grid-template-columns:minmax(0,1fr)}
.shots.vids .tall{max-width:62%}
}
.shots.c4 .wimg img{aspect-ratio:.47;object-fit:cover;object-position:50% 0}
/* 11/8 制作物：ページの中の独立した区画に（「ここから制作物」と分かるように）。壁の箱を紺に沈めた全幅の面 */
.pf{margin-top:clamp(72px,9vw,130px);padding:clamp(64px,8vw,120px) 0 clamp(76px,9vw,136px);background-color:#121c4a;background-blend-mode:multiply;color:#fff;scroll-margin-top:64px}
.pfh{max-width:1080px;margin:0 auto clamp(52px,7vw,96px);padding:0 var(--pad)}
.pfh .en{margin:0;font:900 clamp(46px,12.6vw,150px)/.95 "Inter",sans-serif;letter-spacing:-.035em;color:#fff}
.g2 .pfh h2{margin:clamp(14px,1.8vw,24px) 0 0;font:900 clamp(30px,3.6vw,48px)/1.3 "Noto Sans JP",sans-serif;color:#fff}
.pfh .pl{margin:8px 0 0;font:500 clamp(15px,1.2vw,17px)/1.7 "Noto Sans JP",sans-serif;color:#c4cce8}
.pf .works{text-align:left}
.pf .works .pj+.pj{margin-top:clamp(96px,12vw,170px)}
.pf .works .who{margin:0 0 10px;font:700 clamp(14px,1.15vw,16px)/1.5 "Noto Sans JP",sans-serif;color:#aeb8e4}
.pf .works li{margin-right:0;margin-left:calc(var(--k) * clamp(12px,3vw,52px));font:900 clamp(30px,4.8vw,62px)/1.3 "Noto Sans JP",sans-serif;color:#fff}
.pf .works .wk dt{color:#9aa6f4}
.pf .works .wk dd{color:#dbe1f5}
.pf .pjnote{color:#a6b0d2}
.pf .shots figcaption{color:#c4cce8}
.pf .wimg img,.pf .shots.vids video{box-shadow:0 18px 42px rgba(4,8,30,.5)}
.pf .shots.dev .ph img{box-shadow:0 24px 52px rgba(4,8,30,.62)}
@media (max-width:820px){.pf .works li{font-size:7.2vw}}
/* 11/8 制作物：ページの窓の奥に、トップの箱の部屋。スクロールで部屋を進む（ベタ塗りをやめた） */
.pf{position:relative;isolation:isolate;margin-top:clamp(84px,10vw,150px);padding:clamp(72px,9vw,130px) 0 clamp(90px,11vw,170px);background:none;background-blend-mode:normal}
.pf:not(.live){background:#0b1240}
.pfbg{position:sticky;top:0;z-index:-1;height:100vh;height:100svh;margin-bottom:-100vh;margin-bottom:-100svh;background:#0b1240;clip-path:inset(calc((1 - var(--o,1)) * 16%) calc((1 - var(--o,1)) * 14%))}
.pfbg canvas{display:block;width:100%;height:100%}
.pfbg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,13,50,.74),rgba(8,13,50,.6) 45%,rgba(8,13,50,.8))}
.pfh{max-width:none;margin:0 0 clamp(70px,9vw,140px);padding:0 var(--pad)}
.pfh .en{overflow:hidden;padding:.03em 0 .05em;font-size:calc((100vw - 2 * var(--pad)) / 5.7);line-height:.9;white-space:nowrap}
.pf.live .pfh .en span{display:inline-block;transform:translateY(112%);transition:transform 1s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i) * 45ms)}
.pf.live .pfh.in .en span{transform:none}
.pfh .en{text-shadow:0 8px 60px rgba(6,10,40,.45)}
.g2 .pfh h2{display:inline;margin:0;font-size:clamp(32px,4.4vw,68px);text-shadow:0 2px 30px rgba(6,10,40,.6)}
.pfh .pl{display:inline;margin:0 0 0 1em;color:#d5dcf4;text-shadow:0 1px 16px rgba(6,10,40,.8)}
.pf .works{max-width:1400px;padding:0 var(--pad)}
.pf .pj{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,8fr);gap:clamp(28px,4.5vw,80px);align-items:start}
.pf .pjt{position:sticky;top:112px}
.pf .works .pj+.pj{margin-top:clamp(120px,15vw,240px)}
.pf .works .who{color:#c6cfee;text-shadow:0 1px 14px rgba(6,10,40,.8)}
.pf .works li{margin-left:calc(var(--k) * clamp(10px,1.6vw,26px));font-size:clamp(28px,3.5vw,54px);line-height:1.28;text-shadow:0 2px 30px rgba(6,10,40,.6)}
.pf .shots:first-child{margin-top:0}
.pf .works .wk{max-width:none;margin:clamp(28px,3.4vw,46px) 0 0}
.pf .works .wk dd{color:#eef1fb;text-shadow:0 1px 12px rgba(6,10,40,.75)}
.pf .works .wk dt{color:#b4bdff;text-shadow:0 1px 12px rgba(6,10,40,.75)}
.pf .pjnote{max-width:none;margin:14px 0 0;color:#c2cae6;text-shadow:0 1px 12px rgba(6,10,40,.75)}
.pf .shots figcaption{color:#e2e7f7;text-shadow:0 1px 12px rgba(6,10,40,.8)}
.pf .shots.one{max-width:none;margin-left:0}
.pf .shots.six{grid-template-columns:repeat(3,minmax(0,1fr))}
.pf.live .shots>*{clip-path:inset(100% -90px -90px -90px);transition:clip-path 1.15s cubic-bezier(.16,1,.3,1)}
.pf.live .shots>* img,.pf.live .shots>* video{scale:1.12;transition:scale 1.5s cubic-bezier(.16,1,.3,1),transform .35s ease}
.pf.live .shots>.in{clip-path:inset(-90px)}
.pf.live .shots>.in img,.pf.live .shots>.in video{scale:1}
.shots.dev .ph{translate:0 var(--py,0)}
@media (max-width:820px){
.pf .pj{grid-template-columns:minmax(0,1fr);gap:22px}
.pf .pjt{position:static}
.pf .works li{font-size:7.2vw;margin-left:calc(var(--k) * 10px)}
.pfh .pl{display:block;margin:6px 0 0}
.g2 .pfh h2{display:block}
}
/* 11/8 「急に貼り付けたみたい」→ 枠の境目をなくす。本物の壁の上で、部屋の絵が少しずつ濃くなる。最後のお問い合わせまで部屋の中 */
.pf{margin-top:clamp(20px,3vw,40px);padding:82vh 0 0;padding-top:82svh}
.pf:not(.live){padding-top:96px}
.pfbg{opacity:var(--d,0);clip-path:none}
.pf.live .pfh>:not(.en){opacity:0;transition:opacity .7s ease}
.pf.live .pfh.in>:not(.en){opacity:1}
.paper.g2 .pf .sec-h h2{color:#fff;text-shadow:0 2px 24px rgba(6,10,40,.7)}
.pf .others2 a{color:#fff;text-shadow:0 1px 14px rgba(6,10,40,.8)}
.pf .others2 small{color:#b4bdff}
.pf .tofaq a{color:#fff;text-shadow:0 1px 14px rgba(6,10,40,.8)}
.pf .tofaq a>span{color:#b4bdff}
.paper .pf .cta h2{color:#fff;text-shadow:0 2px 24px rgba(6,10,40,.7)}
.paper .pf .cta p{color:#e2e7f7;text-shadow:0 1px 14px rgba(6,10,40,.8)}
.paper .pf .cta a{background:#f5f7fb;color:var(--ink)}
.paper .pf footer{color:#d5dcf4}
.paper .pf footer a:hover{color:#fff}
/* 背景は区画の一番上から留める（上の余白を区画に付けると、背景の開始がずれて境目が出る） */
.pf.live{padding-top:0}
.pf.live .pfh{padding-top:82vh;padding-top:82svh}
.pf.live .works{opacity:calc((var(--d,0) - .45) / .35)}
.pf.live .pfh:not(.in) .en{text-shadow:none}
/* 11/8 「できること」と PORTFOLIO の間を詰める：背景は画面に固定し、できることが流れている間に部屋へ変える */
.pfbg{position:fixed;inset:0;height:auto;margin:0;z-index:-1;opacity:var(--pfd,0)}
.pf.live .pfh{padding-top:30vh;padding-top:30svh}
.pf.live .works{opacity:calc((var(--pfd,0) - .45) / .35)}
.gtop .rv,.gtop .back,.can li,#can h2{transition:opacity .7s,transform .7s cubic-bezier(.2,.8,.2,1),color .35s}
html.pfd .can li,html.pfd .can li:nth-child(even),html.pfd #can h2,html.pfd .gtop h1,html.pfd .gtop .lead,html.pfd .gtop .back,html.pfd .gtop .toc a:not(.pri){color:#fff;text-shadow:0 2px 22px rgba(6,10,40,.6)}
@media (max-width:820px){.pf.live .pfh{padding-top:24vh;padding-top:24svh}}
.paper .pf footer a{color:#d5dcf4}
/* 11/8 掲載案の反映：区分の表示、YOKAI の 1 事例ページ */
.pjlink{display:inline-flex;gap:12px;margin-top:18px;font:700 clamp(15px,1.2vw,17px)/1.5 "Noto Sans JP",sans-serif;color:#fff;text-underline-offset:6px;text-shadow:0 1px 14px rgba(6,10,40,.8)}
.pjlink span{font-family:"Inter",sans-serif;color:#b4bdff;transition:transform .25s}.pjlink:hover span{transform:translateX(6px)}
.pf .shots+.shots{margin-top:clamp(28px,4vw,56px)}
.pf .shots.dev+.shots.dev{margin-top:clamp(56px,7vw,96px)}
.shots.print{grid-template-columns:minmax(0,.62fr) minmax(0,1.7fr);align-items:center}
.shots.five{grid-template-columns:repeat(5,minmax(0,1fr));align-items:center}
.shots.logos{grid-template-columns:minmax(0,2.4fr) minmax(0,2.4fr) minmax(0,1fr);align-items:center}
.shots.solo{max-width:400px}
.shots.onev video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#0b1240;box-shadow:0 18px 42px rgba(4,8,30,.5)}
.shots.onev figure{margin:0}
.pf .pjb:empty{display:none}
.pf.case .works .pj+.pj{margin-top:clamp(90px,10vw,150px)}
.pf.case .pfh .en{font-size:calc((100vw - 2 * var(--pad)) / 7.3)}
.others2.four{grid-template-columns:repeat(4,minmax(0,1fr))}
body[data-svc="case"] .g2 .gtop .en{font-size:clamp(40px,4.6vw,64px)}
@media (max-width:820px){.shots.print,.shots.logos{grid-template-columns:minmax(0,1fr)}.shots.print>:first-child{max-width:62%}.shots.logos>:last-child{max-width:42%}.shots.five{grid-template-columns:repeat(3,minmax(0,1fr))}.others2.four{grid-template-columns:minmax(0,1fr)}}
.pf.live .pfh .en span{white-space:pre}
.shots.c4.sq .wimg img{aspect-ratio:auto;object-fit:initial}
/* 11/8 仮掲載の形（補助の事例と名刺） */
.shots.keiba{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);align-items:center}
.shots.keiba .w{grid-column:1/-1}
.shots.gym{grid-template-columns:repeat(3,minmax(0,1fr));align-items:center}
.pf .shots.logoone{max-width:320px;margin-top:clamp(48px,6vw,84px)}
.tools{max-width:1080px;margin:0 auto;padding:0 var(--pad)}
.tools .sec-h{padding-left:0;padding-right:0}
.tools .tc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.8vw,24px)}
.tools .tc img{display:block;width:100%;height:auto;box-shadow:0 18px 40px rgba(22,33,74,.2)}
.tools .tn{margin:14px 0 0;font:500 13px/1.7 "Noto Sans JP",sans-serif;color:var(--ink3)}
@media (max-width:820px){.shots.gym{grid-template-columns:minmax(0,1fr)}.tools .tc{grid-template-columns:minmax(0,1fr)}}
/* 11/8 強調を控えめに（大きな字で言い切ると格好つけて見える） */
.g2 .tate .hl{font-size:1.1em;font-weight:900;letter-spacing:inherit}
/* 11/8 HUMAN：AI は同じ形の箱、人は手で書く（ペンの字と赤ペンの印） */
.ai3 .s-hum .big.hand{display:block;margin-left:auto;width:min(100%,540px);font-size:0;line-height:0}
.ai3 .s-hum .big.hand svg{display:block;width:100%;height:auto;overflow:visible}
.ai3 .s-hum .big.hand path{fill:none;stroke:var(--ink);stroke-width:10;stroke-linecap:round;stroke-linejoin:round}
.ai3 .s-hum li{position:relative}
.ai3 .s-hum li:nth-child(1){rotate:-.7deg}
.ai3 .s-hum li:nth-child(2){rotate:.5deg;margin-left:.3em}
.ai3 .s-hum li:nth-child(3){rotate:-.35deg;margin-left:-.1em}
.ai3 .s-hum li:nth-child(4){rotate:.4deg;margin-left:.2em}
.ai3 .s-hum li:nth-child(5){rotate:-.5deg;margin-left:-.15em}
.ai3 .s-hum li svg.pen{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
.ai3 .s-hum li svg.pen path{fill:none;stroke:#e0502a;stroke-width:clamp(3px,.32vw,5px);stroke-linecap:round;stroke-linejoin:round}
@media (max-width:820px){.ai3 .s-hum .big.hand{width:82%}.ai3 .s-hum li{white-space:nowrap}}
@media (max-width:820px){.ai3 .s-hum{text-align:left}.ai3 .s-hum li{font-size:8.4vw}.ai3 .s-hum .big.hand{margin-left:0}.ai3 .s-hum li:nth-child(n){margin-left:0}}
.pf .lineex{max-width:280px;margin-top:clamp(56px,7vw,96px)}
.pf .lineex figcaption{margin-top:10px;font:500 13px/1.7 "Noto Sans JP",sans-serif;color:#e2e7f7;text-shadow:0 1px 12px rgba(6,10,40,.8)}
.paper.g2 .pf a.pjlink{color:#fff}
/* 11/9 作品名と画像を最初から一緒に見せる（せり上がりをやめた） */
.pf.live .shots>*{clip-path:none;transition:none}
.pf.live .shots>* img,.pf.live .shots>* video{scale:1;transition:transform .35s ease}
/* 11/9 背景を作品より前に出さない：暗く、ぼかす。切り替えは短く、文字は切り替えが終わってから */
.pfbg canvas{filter:blur(9px) saturate(.8);transform:scale(1.06)}
.pfbg{overflow:hidden}
.pfbg::after{background:linear-gradient(180deg,rgba(8,13,50,.84),rgba(8,13,50,.76) 45%,rgba(8,13,50,.88))}
.pf.live .works{opacity:calc((var(--pfd,0) - .62) / .28)}
html.pfd .glint{opacity:0}
/* 11/9 YOKAI の冒頭に代表画像／ほかのサービスの名前を大きく */
.ghero{display:block;width:100%;height:auto;margin-top:clamp(20px,2.4vw,34px);box-shadow:0 22px 50px rgba(22,33,74,.28)}
@media (min-width:821px){.g2 .gtop .ghero{grid-column:1;grid-row:5}}
.others2 span{font:900 clamp(19px,1.75vw,25px)/1.4 "Noto Sans JP",sans-serif}
.others2 small{font-size:12px;margin-bottom:6px}
.g2 .gtop img.ghero{aspect-ratio:1440/814;object-fit:cover;max-height:none;height:auto;background:none;padding:0}
/* 11/9 AI の項目はすぐ読めるように */
.ai3 .s-ai li.rv{transition-duration:.2s,.2s;transition-delay:0s}
.ai3 .s-ai li.in span i,.ai3 .s-ai li.in span i:nth-child(3n+2){animation:chipin .2s cubic-bezier(.2,.9,.25,1.2) forwards;animation-delay:calc(var(--d,0s) * .6)}
/* 11/9 工程の名前を番号より目立たせる */
.gsteps .sn{font-size:clamp(46px,4.4vw,64px)}
.gsteps h3{font-size:clamp(28px,2.7vw,38px);line-height:1.3}
@media (max-width:620px){.gsteps .sn{font-size:40px}.gsteps h3{font-size:26px}}
/* 11/9 サービスの題字を大きく（ページの題なので） */
@media (min-width:821px){
.g2 .gtop{grid-template-columns:minmax(0,1fr) minmax(0,19em)}
body[data-svc] .g2 .gtop .en{font-size:clamp(72px,8.8vw,132px);line-height:1.02}
body[data-svc="game"] .g2 .gtop .en,body[data-svc="case"] .g2 .gtop .en{font-size:clamp(52px,6.1vw,92px)}
}
@media (max-width:820px){
body[data-svc] .gtop .en{font-size:15vw;line-height:1.05}
body[data-svc="game"] .gtop .en,body[data-svc="case"] .gtop .en{font-size:12.4vw}
}
/* 11/9 札は表と裏を並べ、チケットはその下に */
.shots.print{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
.shots.print>:last-child{grid-column:1/-1}
@media (max-width:820px){.shots.print{grid-template-columns:repeat(2,minmax(0,1fr))}.shots.print>:first-child{max-width:none}}
/* 11/9 できることの行間を広げて、PORTFOLIO までの間とつり合わせる */
.can li+li{margin-top:clamp(16px,2.3vw,36px)}
@media (max-width:820px){.can li+li{margin-top:14px}}
.g2 .gtop img.ghero{aspect-ratio:1440/900}
.shots.stick2{grid-template-columns:repeat(2,minmax(0,250px));align-items:center}
.shots.stick1{grid-template-columns:minmax(0,260px)}
a.wimg{cursor:pointer}
/* 11/10 実サイトへの文字リンク */
.paper.g2 .pf a.sitelink{display:inline-flex;gap:8px;margin-top:16px;font:700 clamp(15px,1.15vw,17px)/1.5 "Noto Sans JP",sans-serif;color:#fff;text-underline-offset:5px;text-shadow:0 1px 14px rgba(6,10,40,.8)}
.sitelink span{font-family:"Inter",sans-serif;color:#b4bdff}
.pf .sitelink+.shots.dev{margin-top:clamp(56px,7vw,96px)}
/* 11/10 PORTFOLIO の題字は切らずに全文をふわっと出す */
.pf.live .pfh .en span{transform:none!important;transition:none}
.pf.live .pfh .en{opacity:0;transform:none;transition:opacity .5s ease}
.pf.live .pfh.in .en{opacity:1}
/* 11/10 広い画面で左右を余らせない（中央に細く寄せない） */
@media (min-width:1200px){
:root{--wide:min(1680px,91vw)}
.gtop,.sec-h,.ai2,.faq2,.tofaq,.can,.works,.others2,.statement,.reel,.prof,.msg,.ai3,.cwrap,.ai-note,.gsteps,.motto,.flow2 .inner,.paper .cta,.paper footer,.paper .part,.tools,.pf .works{max-width:var(--wide)}
.g2 .gtop{max-width:var(--wide);grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}
.g2 .gtop .en,body[data-svc] .g2 .gtop .en{font-size:clamp(72px,8.8vw,176px)}
body[data-svc="game"] .g2 .gtop .en,body[data-svc="case"] .g2 .gtop .en{font-size:clamp(52px,6.1vw,122px)}
.g2 .gtop h1{font-size:clamp(26px,2.1vw,40px)}
.g2 .gtop .lead{font-size:clamp(16px,1.15vw,21px);max-width:27em}
.gtop .vlab.side{right:calc((100vw - var(--wide)) / 2 - 8px)}
.hero2{--hbw:min(58vw,1240px)}
}
/* 11/10 パソコンは文字を全体に大きく／サービス一覧の字幕は左にそろえる／プロフィールの間隔を広げる */
.prof{gap:clamp(30px,4.4vw,72px)}
@media (min-width:821px){.hb:nth-child(even) .lb{text-align:left}}
@media (min-width:1200px){
.hb .lb{font-size:clamp(24px,2.1vw,40px)}
.hb small{font-size:13px;margin-bottom:8px}
.hb .dsc,.hb .wk2{font-size:clamp(15px,1.1vw,20px)}
.hb .wk2 b{font-size:13px}
.sec-h h2{font-size:clamp(28px,2.5vw,46px)}
.can li{font-size:clamp(44px,4.6vw,88px)}
.g2 .toc a,.g2 .gtop .toc a.pri{font-size:clamp(15px,1.05vw,19px)}
.pf .works li{font-size:clamp(34px,3.7vw,66px)}
.pf .works .who{font-size:clamp(15px,1.1vw,20px)}
.pf .works .wk>div{grid-template-columns:4.4em minmax(0,1fr)}
.pf .works .wk dt{font-size:clamp(14px,.95vw,17px)}
.pf .works .wk dd{font-size:clamp(16px,1.15vw,21px)}
.pf .pjnote{font-size:clamp(13px,.92vw,16px)}
.pf .shots figcaption{font-size:clamp(14px,.98vw,17px)}
.paper.g2 .pf a.pjlink,.paper.g2 .pf a.sitelink{font-size:clamp(16px,1.2vw,21px)}
.pfh .pl{font-size:clamp(16px,1.2vw,21px)}
.others2 span{font-size:clamp(21px,1.95vw,34px)}
.others2 small{font-size:13px}
.tofaq a{font-size:clamp(17px,1.4vw,24px)}
.g2 .cta h2{font-size:clamp(36px,3.7vw,68px)}
.paper .cta p,.paper .pf .cta p{font-size:clamp(17px,1.25vw,23px)}
.g2 .cta a{font-size:clamp(17px,1.2vw,21px)}
.gsteps h3{font-size:clamp(30px,2.7vw,46px)}
.gsteps p:not(.sn){font-size:clamp(16px,1.15vw,21px);max-width:24em}
.gsteps .keys li{font-size:clamp(14px,1vw,18px)}
.ai3 h3{font-size:clamp(15px,1.05vw,19px)}
.ai3 .s-ai li{font-size:clamp(30px,3.4vw,60px)}
.ai-note{font-size:clamp(17px,1.3vw,23px)}
.faq2 dt{font-size:clamp(19px,1.55vw,28px)}
.faq2 dd{font-size:clamp(17px,1.15vw,21px)}
.form2 label span{font-size:clamp(15px,1vw,18px)}
.form2 input,.form2 textarea{font-size:clamp(16px,1.05vw,19px)}
.prof>div{grid-template-columns:170px minmax(0,1fr)}
.prof dt{font-size:clamp(14px,1vw,18px)}
.prof dd{font-size:clamp(30px,3vw,56px)}
.prof dd small.kj{font-size:clamp(15px,1.05vw,19px)}
.g2 .tate{font-size:clamp(19px,1.55vw,29px)}
}
@media (min-width:1200px){.g2 p.ai-note,p.ai-note{font-size:clamp(17px,1.3vw,23px)}.ai3 .s-hum li{font-size:clamp(46px,4.8vw,92px)}.ai3 .s-hum .big.hand{width:min(100%,680px)}}
/* 11/10 左右の余白をさらに詰める */
@media (min-width:1200px){
:root{--pad:clamp(32px,3.4vw,68px);--wide:100vw}
.gtop .vlab.side{right:12px}
}
/* 11/10 題字と説明を左右の端まで。「できること」の斜めの列も右端まで届かせる */
@media (min-width:1200px){
.g2 .gtop{grid-template-columns:minmax(0,1fr) minmax(0,28.4vw);column-gap:clamp(32px,4vw,80px)}
.g2 .gtop .en,body[data-svc] .g2 .gtop .en{font-size:clamp(72px,10.6vw,210px)}
body[data-svc="game"] .g2 .gtop .en,body[data-svc="case"] .g2 .gtop .en{font-size:clamp(52px,7.2vw,144px)}
.g2 .gtop .lead{font-size:clamp(16px,1.3vw,25px);max-width:none}
.can li{margin-left:calc(var(--k) * var(--step,clamp(22px,5vw,90px)))}
}
/* 11/10 サービス一覧の 4 枚：作品が立体で起き上がる */
.hb .im.s3{overflow:visible;box-shadow:none;perspective:calc(var(--hbw) * 1.7);perspective-origin:50% 30%;--u:calc(var(--hbw) / 1000)}
.st3{display:block;position:relative;aspect-ratio:2400/960;transform-style:preserve-3d;will-change:transform}
.it{position:absolute;display:block;transform-style:preserve-3d;--dp:calc(var(--t) * var(--u));transition:transform 1.05s cubic-bezier(.2,.82,.24,1.03) calc(var(--i) * .12s);will-change:transform}
.hb.now .it{transition:none}
.it::before{content:"";position:absolute;inset:0;transform:translateZ(calc(var(--dp) / -2 - 1px));box-shadow:0 calc(var(--u) * 26) calc(var(--u) * 56) rgba(22,33,74,.3)}
.hb .im .it img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:50% 0;box-shadow:none;animation:none;max-width:none}
.hb .im .it img.fr{transform:translateZ(calc(var(--dp) / 2));backface-visibility:hidden}
.it .e{position:absolute;display:block;background:var(--ec)}
.it .e.l,.it .e.r{top:0;bottom:0;width:var(--dp);left:calc(var(--dp) / -2)}
.it .e.r{left:calc(100% - var(--dp) / 2);transform:rotateY(90deg)}
.it .e.l{transform:rotateY(-90deg)}
.it .e.t,.it .e.b{left:0;right:0;height:var(--dp);top:calc(var(--dp) / -2)}
.it .e.b{top:calc(100% - var(--dp) / 2);transform:rotateX(-90deg)}
.it .e.t{transform:rotateX(90deg)}
.it .bk{position:absolute;inset:0;display:block;background:var(--ec);transform:rotateY(180deg) translateZ(calc(var(--dp) / 2));backface-visibility:hidden}
.hb .im .it .bk img{inset:27% 16%;width:68%;height:46%;object-fit:contain;object-position:50% 50%}
/* 寝ている形と、起き上がった形（同じ関数の並びにして、途中がなめらかにつながるように） */
.s3[data-k="web"] .it{transform:translateZ(calc(var(--hbw) * -.7)) rotateY(calc(var(--ry) * 6))}
.hb.up .s3[data-k="web"] .it{transform:translateZ(0px) rotateY(var(--ry))}
.s3[data-k="design"] .it,.s3[data-k="app"] .it{transform-origin:50% 100%;transform:rotateX(68deg) rotateY(0deg)}
.hb.up .s3[data-k="design"] .it,.hb.up .s3[data-k="app"] .it{transform:rotateX(0deg) rotateY(var(--ry))}
.s3[data-k="game"] .it{transform:rotateY(180deg)}
.hb.up .s3[data-k="game"] .it{transform:rotateY(0deg)}
@media (max-width:820px){
.hero2{overflow-x:clip}
.hb .im.s3{aspect-ratio:2.17/1}
.st3{position:absolute;width:115%;left:-7.5%;top:0}
}
/* 11/10 メニュー：カーソルを合わせると日本語に変わる */
.nv{display:inline-grid;overflow:hidden;vertical-align:bottom;justify-items:center;padding:.12em 0}
.nv>*{grid-area:1/1;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.nv>i{font:700 1em/1 "Noto Sans JP",sans-serif;letter-spacing:.06em;transform:translateY(140%)}
@media (hover:hover){nav a:has(.nv):hover{opacity:1}nav a:hover .nv>span,nav a:focus-visible .nv>span{transform:translateY(-140%)}nav a:hover .nv>i,nav a:focus-visible .nv>i{transform:none}}
/* 11/10 HUMAN の二重丸とチェックが画面の外へ出ないように */
@media (min-width:821px){.ai3 .s-hum li{padding-right:max(0px,calc(1.3em - var(--pad) + 20px))}}
/* 11/10 About：代表の漢字の名前は、項目名（種別など）と色と大きさを変える */
.prof dd small.kj{margin-top:10px;font:700 clamp(18px,1.5vw,28px)/1.4 "Noto Sans JP",sans-serif;letter-spacing:.14em;color:var(--ink)}
/* 11/10 ONE or ALL：横幅いっぱいの大きさで 1 行に */
@media (min-width:1200px){
.statement{grid-template-columns:minmax(0,1fr);gap:clamp(14px,1.4vw,28px)}
.g2 .statement p.mix{font-size:calc((100vw - 2 * var(--pad)) / 5.7);line-height:.98;white-space:nowrap}
.g2 .statement p.mix br{display:none}
.g2 p.st-jp{font-size:clamp(20px,1.9vw,36px);margin:0}
}
/* 11/10 代表の漢字の名前は、ページの色で項目名とはっきり分ける */
.prof dd small.kj{font-weight:900;color:var(--blue)}
/* 11/10 HUMAN の 3 行の右端をそろえる（1 行目だけ列の幅を超えて右へはみ出していた） */
@media (min-width:821px){.ai3 .s-hum ul{margin-left:-30vw}}
/* 11/10 YOKAI ATLAS の事例：運営を支える予約・受付システム */
.pf .works.ops{margin-top:clamp(140px,16vw,280px)}
.g2 .pf .ops-t{margin:0;font:900 clamp(30px,3.4vw,62px)/1.28 "Noto Sans JP",sans-serif;color:#fff;word-break:auto-phrase;text-shadow:0 2px 30px rgba(6,10,40,.6)}
.g2 .pf p.ops-l,.g2 .pf .ops-pts p{margin:clamp(16px,1.8vw,28px) 0 0;font:500 clamp(16px,1.15vw,21px)/1.95 "Noto Sans JP",sans-serif;color:#eef1fb;text-wrap:pretty;text-shadow:0 1px 12px rgba(6,10,40,.75)}
.ops-d{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,3.4vw,64px);align-items:start}
.ops-ph{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.4vw,24px)}
.ops-ph .wimg img{aspect-ratio:.6;object-fit:cover;object-position:50% 0}
.ops-pts{display:grid;gap:clamp(24px,2.6vw,40px)}
.g2 .pf .ops-pts h3{margin:0;font:900 clamp(20px,1.7vw,30px)/1.4 "Noto Sans JP",sans-serif;color:#fff;text-shadow:0 2px 20px rgba(6,10,40,.7)}
.g2 .pf .ops-pts div p{margin-top:6px}
.g2 .pf .ops-pts>p.ops-l{margin-top:0}
@media (max-width:820px){.ops-d{grid-template-columns:minmax(0,1fr)}.pf .works.ops{margin-top:110px}}
/* 11/10 運営の仕組み：大きな画像と短い説明の列 */
.shots.ops-s{display:grid;gap:clamp(56px,6vw,104px)}
.ops-s figure{margin:0}
.ops-s .two>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.4vw,24px)}
.ops-s .two .wimg img{aspect-ratio:.82;object-fit:cover;object-position:50% 0}
.pf .ops-s figcaption{margin-top:clamp(12px,1.2vw,20px);font:500 clamp(16px,1.15vw,21px)/1.9 "Noto Sans JP",sans-serif;color:#eef1fb;text-wrap:pretty}
.ops-s figcaption b{display:block;margin-bottom:4px;font:900 clamp(20px,1.7vw,30px)/1.4 "Noto Sans JP",sans-serif;color:#fff}
.ops-s>figure:not(.two) .wimg img{max-height:min(82vh,900px);object-fit:cover;object-position:50% 0}
/* 11/10 事例の冒頭のリンクで移動したとき、見出しがメニューに隠れないように */
#ops{scroll-margin-top:96px}
/* 11/10 点検：HTML に大きさを書いた画像が縦に伸びないように（どのルールより弱く） */
:where(img[width][height]){height:auto}
/* 11/10 点検：スマホで指が届きやすいよう、見た目を変えずに押せる範囲だけ広げる */
@media (max-width:820px){
.g2 .gtop .back,.g2 .gtop .toc a,.paper footer a,header .logo,header nav .ask{position:relative}
.g2 .gtop .back{top:0;left:0}
.g2 .gtop .back::before,.g2 .gtop .toc a::before,.paper footer a::before,header .logo::before,header nav .ask::before{content:"";position:absolute;inset:-12px -6px}
}
/* 11/10 スマホ：サービス一覧の画像を画面いっぱいに。ONE or ALL は 2 行のまま幅いっぱいに */
@media (max-width:820px){
.hb .im.s3{aspect-ratio:auto;margin:0 -8px}
.st3{position:relative;width:100%;left:0}
.g2 .statement p.mix{font-size:calc((100vw - 2 * var(--pad)) / 3.35);line-height:1}
.g2 p.st-jp{font-size:18px}
}
@media (min-width:821px) and (max-width:1199px){
.statement{grid-template-columns:minmax(0,1fr)}
.g2 .statement p.mix{font-size:calc((100vw - 2 * var(--pad)) / 5.7);line-height:.98;white-space:nowrap}
.g2 .statement p.mix br{display:none}
}
/* 11/10 相談フォーム：入力・確認・完了 */
.form2 form .st{display:grid;gap:22px}
.form2 form .st[hidden]{display:none}
.form2 .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form2 button{opacity:1;cursor:pointer;transition:background .2s}
.form2 button:hover{background:color-mix(in srgb,var(--ink) 85%,var(--blue))}
.form2 button:disabled{opacity:.55;cursor:wait}
.form2 button:focus-visible,.form2 input:focus-visible,.form2 a:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.form2 .err{display:block;font:500 14px/1.7 "Noto Sans JP",sans-serif;font-style:normal;color:#c43b22}
.form2 .err:empty{display:none}
.form2 .agree{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 12px;align-items:center}
.form2 .agree input{width:24px;height:24px;margin:0;padding:0;accent-color:var(--ink);box-shadow:none}
.form2 .agree label{display:block;font:500 clamp(15px,1vw,18px)/1.7 "Noto Sans JP",sans-serif;color:var(--ink)}
.form2 .agree a{color:var(--ink);text-underline-offset:4px}
.form2 .agree .err{grid-column:1/-1}
.form2 h3{margin:0;font:900 clamp(22px,1.9vw,34px)/1.4 "Noto Sans JP",sans-serif;color:var(--ink);outline:none}
.form2 .sum{margin:0;display:grid;gap:18px}
.form2 .sum dt{font:700 14px/1.5 "Noto Sans JP",sans-serif;letter-spacing:.06em;color:var(--ink3)}
.form2 .sum dd{margin:4px 0 0;font:500 clamp(16px,1.05vw,19px)/1.8 "Noto Sans JP",sans-serif;color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere}
.form2 .acts{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px}
.form2 button.redo{padding:14px 2px;background:none;color:var(--ink);font-size:15px;letter-spacing:.06em;text-decoration:underline;text-underline-offset:5px}
.form2 button.redo:hover{background:none;color:var(--blue)}
.form2 .done{margin:0;font:500 clamp(16px,1.15vw,20px)/1.9 "Noto Sans JP",sans-serif;color:var(--ink2)}
/* 個人情報の取り扱いのページ */
.pv{max-width:var(--wide,1080px);margin:clamp(24px,3vw,56px) auto 0;padding:0 var(--pad);display:grid;gap:clamp(30px,3.2vw,56px)}
.pv>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:8px clamp(24px,4vw,80px);align-items:baseline}
.paper.g2 .pv h2{margin:0;font:900 clamp(20px,1.7vw,32px)/1.4 "Noto Sans JP",sans-serif;color:var(--ink)}
.paper.g2 .pv p{margin:0;font:500 clamp(16px,1.15vw,21px)/1.95 "Noto Sans JP",sans-serif;color:var(--ink2)}
@media (max-width:820px){.pv>div{grid-template-columns:minmax(0,1fr)}}
/* 11/10 About：プロフィールの右に、ブロックにした人物像 */
.profw{max-width:var(--wide,1080px);margin:0 auto;padding:0 var(--pad);display:grid;grid-template-columns:minmax(0,1fr) clamp(240px,23vw,460px);gap:clamp(24px,3vw,56px);align-items:end}
.profw .prof{max-width:none;margin:0;padding:0}
.ppx{display:block;width:100%;height:auto}
@media (max-width:820px){.profw{grid-template-columns:minmax(0,1fr)}.ppx{width:68%;justify-self:end;margin-top:6px}}
/* 11/10 About の人物像：細かい点なので、スマホでも大きめに */
@media (max-width:820px){.ppx{width:88%}}
/* 11/11 スマホのサービス一覧：番号の下の端が、英字の小見出しに 8px 重なっていた */
@media (max-width:820px){.hero2 .hb .no,.hero2 .hb:nth-child(even) .lb .no{top:-61px}}
/* 11/11 FLOW の工程の説明：語の途中（「公／開」など）で折り返さない */
.g2 .gsteps p:not(.sn){word-break:auto-phrase}
/* 11/11 ONE or ALL：文字の中にこの見出し専用のサイバー調の絵（scripts/make_oneall.py）。ONE は青 1 色の光る格子、ALL. は A・L・L・. の 1 字ずつ違う色のグリッチ。
スクロールに合わせて、中の絵が字ごとに互い違いに上下へ動く。輪郭は紺の細い線で読みやすく */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
.g2 .statement p.mix.oa .w1,.g2 .statement p.mix.oa .w2>span{color:transparent;-webkit-background-clip:text;background-clip:text;background-repeat:no-repeat;filter:drop-shadow(1.5px 0 0 var(--ink)) drop-shadow(-1.5px 0 0 var(--ink)) drop-shadow(0 1.5px 0 var(--ink)) drop-shadow(0 -1.5px 0 var(--ink))}
.g2 .statement p.mix.oa .w1{background-image:url(works/oneall/cy_one.webp?v=1);background-size:118% auto;background-position:calc(50% + var(--p,0) * 46%) 52%}
.g2 .statement p.mix.oa .w2>span{background-size:100% auto;background-position:50% calc(50% + var(--p,0) * 55%)}
.g2 .statement p.mix.oa .w2>.c2,.g2 .statement p.mix.oa .w2>.c4{background-position:50% calc(50% - var(--p,0) * 55%)}
.g2 .statement p.mix.oa .c1{background-image:url(works/oneall/cy_a.webp?v=1)}
.g2 .statement p.mix.oa .c2{background-image:url(works/oneall/cy_l1.webp?v=1)}
.g2 .statement p.mix.oa .c3{background-image:url(works/oneall/cy_l2.webp?v=1)}
.g2 .statement p.mix.oa .c4{background-image:url(works/oneall/cy_dot.webp?v=1)}
}
/* 11/11 ご依頼の流れ「進め方」の図（flowfig.js）：点の輪 → 破線 → 線と補助線 → 斜線 → 半分 → 塗りつぶし。ぼんやりした相談が形になっていく */
.flowfig{max-width:1080px;margin:0 auto clamp(48px,6vw,96px);padding:0 var(--pad)}
.flowfig svg{display:block;width:100%;height:auto;overflow:visible}
.flowfig .ln{fill:none;stroke:var(--ink3);stroke-width:1.5;stroke-dasharray:1;stroke-dashoffset:1}
.flowfig .hd{fill:var(--blue);transition:opacity .2s}
.flowfig .hf{fill:var(--blue);opacity:.45}
.flowfig .st{opacity:0;transform:scale(.35);transform-box:fill-box;transform-origin:50% 50%;transition:opacity .35s ease,transform .6s cubic-bezier(.3,1.5,.5,1)}
.flowfig .st.on{opacity:1;transform:none}
.flowfig .ring{fill:var(--paper);stroke:var(--blue);stroke-width:2.5}
.flowfig .s1{stroke-width:4;stroke-dasharray:.1 11;stroke-linecap:round}
.flowfig .s2{stroke-dasharray:12 9}
.flowfig .gd{fill:none;stroke:var(--ink3);stroke-width:1;stroke-dasharray:4 5}
.flowfig .s4{fill:url(#ffh)}
.flowfig .s5{fill:color-mix(in srgb,var(--blue) 55%,var(--paper))}
.flowfig .s6{fill:var(--blue)}
.flowfig .halo{fill:none;stroke:var(--blue);stroke-width:1.2;opacity:.5}
.flowfig text{text-anchor:middle;dominant-baseline:central}
.flowfig .no{font:900 25px "Inter",sans-serif;letter-spacing:-.02em;fill:var(--ink)}
.flowfig .no.w{fill:#fff}
.flowfig .s4 + .no{paint-order:stroke;stroke:var(--paper);stroke-width:6px;stroke-linejoin:round}
.flowfig .nm{font:700 21px "Noto Sans JP",sans-serif;fill:var(--ink)}
.flowfig.calm .st{transition:none}
@media (min-width:1200px){.flowfig{max-width:var(--wide)}.flowfig svg{max-width:1500px;margin:0 auto}}
@media (max-width:620px){.flowfig{padding:0 10px;margin-bottom:40px}.flowfig .nm{display:none}.flowfig svg{margin-bottom:-20px}.flowfig .no{font-size:34px}}
/* 11/11 YOKAI ATLAS の予約・受付システム：3 つの立場の図。真ん中に仕組み、輪の上に使う人の丸。丸を押すと、その立場の説明へ移る */
.opsfig{position:relative;width:min(100%,680px);aspect-ratio:1/.78;margin:clamp(72px,9vw,140px) auto clamp(84px,10vw,150px)}
.opsfig .ring{position:absolute;left:50%;top:46.2%;width:56%;aspect-ratio:1;translate:-50% -50%;border:1px solid rgba(255,255,255,.4);border-radius:50%}
.g2 .pf .opsfig .core{position:absolute;left:50%;top:46.2%;translate:-50% -50%;margin:0;text-align:center;font:700 clamp(13px,1.2vw,17px)/1.55 "Noto Sans JP",sans-serif;letter-spacing:.08em;color:#c6cfee;white-space:nowrap}
.opsfig a{position:absolute;width:27%;aspect-ratio:1;translate:-50% -50%;display:grid;place-content:center;gap:6px;text-align:center;border-radius:50%;border:1px solid rgba(255,255,255,.55);background:rgba(16,26,88,.84);color:#fff;text-decoration:none;
transition:opacity .7s,transform .7s cubic-bezier(.3,1.4,.5,1),background .25s,border-color .25s;transition-delay:var(--d,0s),var(--d,0s),0s,0s}
.opsfig .p1{left:25.8%;top:28.2%}.opsfig .p2{left:74.2%;top:28.2%}.opsfig .p3{left:50%;top:82.1%}
.opsfig a b{font:900 clamp(13px,1.5vw,20px)/1.3 "Noto Sans JP",sans-serif;white-space:nowrap}
.opsfig a small{font:500 clamp(10px,.9vw,13px)/1.4 "Noto Sans JP",sans-serif;color:#c6cfee;white-space:nowrap}
.opsfig a.rv{transform:scale(.5)}.opsfig a.rv.in{transform:none}
@media (hover:hover){.opsfig a:hover{background:#3b49d8;border-color:#fff}.opsfig a:hover small{color:#fff}}
.opsfig a:focus-visible{outline:2px solid #fff;outline-offset:4px}
#ops-guests,#ops-staff,#ops-admin{scroll-margin-top:110px}
@media (max-width:620px){.opsfig{margin:64px auto 72px}.opsfig a{width:33%}.opsfig a small{display:none}.opsfig a b{font-size:12.5px}.g2 .pf .opsfig .core{font-size:12px}}
/* 11/12 上のメニュー（navpx.js の四角の点の字）：ページを開いた瞬間に、右に寄った前の並びが一瞬見えていた。
字を描く前から同じ並び・同じ大きさの場所を取っておく（幅は点の字の幅。navpx.js の C=2.6 で決まる） */
@media (min-width:880px){
header{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:clamp(48px,7vw,150px)}
header nav{display:flex;justify-content:space-between;align-items:center;gap:0 24px}
header nav>a:has(.nv){display:block;padding:10px 0;line-height:0;height:47px;box-sizing:border-box}
header nav>a:has(.nv):nth-of-type(1){width:125px}header nav>a:has(.nv):nth-of-type(2){width:62px}header nav>a:has(.nv):nth-of-type(3){width:109px}
header nav>a:has(.nv):nth-of-type(4){width:78px}header nav>a:has(.nv):nth-of-type(5){width:109px}
header nav a .nv{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
.logo img{aspect-ratio:1000/786} /* 11/12 ロゴの絵が読み込まれる前から幅を取っておく（メニューの並びが開いた直後にずれないように） */
@media (min-width:880px){header nav:not(:has(.ask))::after{content:"";flex:none;width:91.3px;height:1px}} /* 「相談する」は svc.js が足す。足す前から同じ並びになるよう、同じ幅の空きを置いておく */
/* 11/12「AI の方の字が HUMAN より小さい」→ AI の一覧も HUMAN の一覧と同じ大きさに */
.ai3 .s-ai li{font-size:clamp(34px,4.8vw,70px)}
@media (max-width:820px){.ai3 .s-ai li{font-size:8.4vw}}
@media (min-width:1200px){.ai3 .s-ai li{font-size:clamp(46px,4.8vw,92px)}}
/* 11/12 できることの一覧の最後に「など」（ここに挙げた物だけではないと伝える）。一覧より小さく、薄い色で */
.can li.etc{font-size:clamp(20px,2.6vw,38px);color:var(--ink3);margin-top:.2em}
@media (max-width:820px){.can li.etc{font-size:5vw}}
@media (min-width:1200px){.can li.etc{font-size:clamp(26px,2.7vw,50px)}}
/* 11/12 フィールドガイドは高台寺のページのスマホ 3 画面を 1 枚にした絵（works/yokai/guide-kodaiji.webp）。横幅いっぱいに */
.shots.kd{display:block}.shots.kd .wimg,.shots.kd img{display:block;width:100%;height:auto}
@media (max-width:620px){.gsteps .sn{align-self:start;justify-self:start}} /* 11/12 番号の後ろの輪が番号の真ん中に来るよう、番号の箱を字の大きさにする */
/* 11/12 進め方の作り直し 2（flowfig.js）：スクロールの間、画面が止まり、6 つの段階が 1 つずつ画面いっぱいの字で入れ替わる。
字の中身が段階ごとに形になっていく（01 線だけ → 02 点 → 03 細い斜線 → 04 濃い斜線 → 05 下半分 → 06 塗りつぶし）。その段階に来ると中身が埋まる動き（--g が 0 → 1） */
@property --g{syntax:"";inherits:true;initial-value:0}
.gpin{position:relative;height:calc(var(--n,6) * 34vh + 100vh);height:calc(var(--n,6) * 34svh + 100svh)} /* 11/12 1 段階あたりのスクロールを 62vh から 34vh に（スマホの指 1 回で進むくらい）。PC はホイール 1 回で 1 段階（flowfig.js） */
.gstage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.gsteps.live{position:absolute;inset:0;max-width:none;margin:0;padding:0;display:block}
.gsteps.live>li{position:absolute;inset:0;margin:0 !important;padding:clamp(96px,11vh,130px) var(--pad) clamp(90px,12vh,130px);
display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);grid-template-rows:auto 1fr auto;column-gap:clamp(32px,5vw,96px);align-content:center;
opacity:0;translate:0 40px;pointer-events:none;transition:opacity .45s ease,translate .7s cubic-bezier(.2,.9,.3,1);--g:0}
.gsteps.live>li.past{translate:0 -40px}
.gsteps.live>li.on{opacity:1;translate:0 0;pointer-events:auto;--g:1;transition:opacity .5s ease .08s,translate .8s cubic-bezier(.2,.9,.3,1) .08s,--g 1.3s cubic-bezier(.3,.1,.2,1) .25s}
.gsteps.live .sn{grid-column:1;grid-row:1;justify-self:start;margin:0;font:900 clamp(88px,15vw,250px)/.82 "Inter",sans-serif;letter-spacing:-.04em}
.gsteps.live h3{grid-column:1;grid-row:2;align-self:start;margin:clamp(6px,1vw,16px) 0 0;font:900 clamp(56px,8.6vw,168px)/1.06 "Noto Sans JP",sans-serif;letter-spacing:.01em;white-space:nowrap;word-break:keep-all}
.gsteps.live>li>p:not(.sn){grid-column:2;grid-row:1 / span 2;align-self:end;max-width:22em;margin:0 0 clamp(8px,1vw,18px);font:500 clamp(17px,1.35vw,24px)/1.95 "Noto Sans JP",sans-serif;color:var(--ink2)}
.gsteps.live .keys{grid-column:2;grid-row:3;align-self:start;margin:clamp(14px,1.6vw,24px) 0 0}
/* 字の中身（大きな番号と名前で共通）。--g で埋まっていく */
.gsteps.live .sn,.gsteps.live h3{color:transparent;-webkit-text-stroke:2px var(--blue);-webkit-background-clip:text;background-clip:text;background-repeat:repeat}
.gsteps.live .f1 .sn,.gsteps.live .f1 h3{background-image:none}
.gsteps.live .f2 .sn,.gsteps.live .f2 h3{background-image:radial-gradient(var(--blue) calc(var(--g) * 1.6px),transparent calc(var(--g) * 1.6px + .6px));background-size:7px 7px}
.gsteps.live .f3 .sn,.gsteps.live .f3 h3{background-image:repeating-linear-gradient(-45deg,var(--blue) 0 calc(var(--g) * 1.6px),transparent calc(var(--g) * 1.6px) 8px)}
.gsteps.live .f4 .sn,.gsteps.live .f4 h3{background-image:repeating-linear-gradient(-45deg,var(--blue) 0 calc(var(--g) * 3.4px),transparent calc(var(--g) * 3.4px) 6px)}
.gsteps.live .f5 .sn,.gsteps.live .f5 h3{background-image:linear-gradient(0deg,var(--blue) calc(var(--g) * 50%),transparent 0)}
.gsteps.live .f6 .sn,.gsteps.live .f6 h3{background-image:linear-gradient(0deg,var(--blue) calc(var(--g) * 100%),transparent 0)}
/* 今どこか：小さな番号の並び */
.gnav{position:absolute;left:var(--pad);bottom:clamp(26px,4vh,44px);display:flex;gap:clamp(14px,1.6vw,26px);z-index:2}
.gnav button{padding:6px 0;border:0;background:none;font:900 clamp(13px,1vw,16px)/1 "Inter",sans-serif;letter-spacing:.12em;color:var(--ink3);opacity:.6;cursor:pointer;transition:color .3s,opacity .3s}
.gnav button.on{color:var(--blue);opacity:1}
@media (hover:hover){.gnav button:hover{opacity:1}}
@media (max-width:820px){
.gsteps.live>li{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto auto;align-content:center;padding:96px 22px 110px}
.gsteps.live .sn{font-size:31vw}
.gsteps.live h3{font-size:min(15vw,17vh);white-space:normal}
.gsteps.live>li>p:not(.sn){grid-column:1;grid-row:3;align-self:start;margin:22px 0 0;font-size:16px}
.gsteps.live .keys{grid-column:1;grid-row:4;margin-top:12px}
.gnav{left:22px;bottom:30px;gap:14px}
}
.gsteps.live .sn::before{display:none}
/* 11/12 進め方の並びを直す：番号は右半分いっぱいの大きな字、名前と説明は左に縦に並べる（左右を余らせない） */
.gsteps.live>li{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-rows:auto auto auto;align-content:center}
.gsteps.live .sn{grid-column:2;grid-row:1 / span 3;justify-self:end;align-self:center;font-size:min(29vw,60vh);-webkit-text-stroke-width:2.5px}
.gsteps.live h3{grid-column:1;grid-row:1;margin:0;font-size:clamp(56px,7.2vw,150px)}
.gsteps.live>li>p:not(.sn){grid-column:1;grid-row:2;align-self:start;margin:clamp(20px,2.4vw,40px) 0 0;max-width:24em}
.gsteps.live .keys{grid-column:1;grid-row:3}
@media (max-width:820px){
.gsteps.live>li{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto auto;padding:90px 22px 100px}
.gsteps.live .sn{grid-column:1;grid-row:1;justify-self:start;font-size:min(36vw,26vh);-webkit-text-stroke-width:2px}
.gsteps.live h3{grid-column:1;grid-row:2;margin-top:10px;font-size:min(16vw,12vh)}
.gsteps.live>li>p:not(.sn){grid-column:1;grid-row:3;margin-top:20px}
.gsteps.live .keys{grid-column:1;grid-row:4}
}
@media (max-width:820px){.gsteps.live .sn{font-size:min(50vw,30vh)}.gsteps.live h3{font-size:min(17vw,12vh)}}
/* 11/12 進め方の大きな番号を立体に（flowfig.js が .sn.d3 > .n3d > .lay×n + .face を作る）。段階が進むほど厚い。
入ってくるときに少し回り、止まっている間はマウスに合わせてわずかに傾く */
.gsteps.live .sn.d3{color:transparent;-webkit-text-stroke:0;background:none;perspective:1400px;perspective-origin:30% 50%}
.gsteps.live .sn.d3 .n3d{position:relative;display:block;transform-style:preserve-3d;
transform:rotateY(calc(-24deg + var(--mx,0) * 16deg)) rotateX(calc(8deg - var(--my,0) * 10deg));transition:transform .2s linear}
.gsteps.live>li:not(.on) .sn.d3 .n3d{transform:rotateY(-62deg) rotateX(14deg) translateZ(-.2em)}
.gsteps.live>li.on .sn.d3 .n3d{transition:transform 1.1s cubic-bezier(.2,.9,.25,1.08) .05s}
.gsteps.live .sn.d3 .lay,.gsteps.live .sn.d3 .face{display:block;line-height:.82}
.gsteps.live .sn.d3 .lay{position:absolute;left:0;top:0;transform:translateZ(calc(var(--z) * -.012em));
color:color-mix(in srgb,var(--blue) calc(78% - var(--t) * 40%),#0b1240);-webkit-text-stroke:.012em color-mix(in srgb,var(--blue) calc(78% - var(--t) * 40%),#0b1240)}
.gsteps.live .f1 .sn.d3 .lay{color:transparent;-webkit-text-stroke:1.5px color-mix(in srgb,var(--blue) 55%,transparent)}
.gsteps.live .f2 .sn.d3 .lay{color:color-mix(in srgb,var(--blue) 30%,var(--paper));-webkit-text-stroke:1px color-mix(in srgb,var(--blue) 60%,transparent)}
.gsteps.live .sn.d3 .face{position:relative;transform:translateZ(0);color:transparent;-webkit-text-stroke:2.5px var(--blue);-webkit-background-clip:text;background-clip:text;background-repeat:repeat;background-color:var(--paper)}
.gsteps.live .f1 .sn.d3 .face{background-image:none;background-color:transparent}
.gsteps.live .f2 .sn.d3 .face{background-image:radial-gradient(var(--blue) calc(var(--g) * 1.6px),transparent calc(var(--g) * 1.6px + .6px));background-size:7px 7px}
.gsteps.live .f3 .sn.d3 .face{background-image:repeating-linear-gradient(-45deg,var(--blue) 0 calc(var(--g) * 1.6px),transparent calc(var(--g) * 1.6px) 8px)}
.gsteps.live .f4 .sn.d3 .face{background-image:repeating-linear-gradient(-45deg,var(--blue) 0 calc(var(--g) * 3.4px),transparent calc(var(--g) * 3.4px) 6px)}
.gsteps.live .f5 .sn.d3 .face{background-image:linear-gradient(0deg,var(--blue) calc(var(--g) * 50%),transparent 0)}
.gsteps.live .f6 .sn.d3 .face{background-image:linear-gradient(0deg,var(--blue) calc(var(--g) * 100%),transparent 0)}
/* 11/12「スクロールしたときの動きが変。右に倒れている。上から下でいい」→ 横からの回り込みをやめ、スクロールと同じ縦の動きに。
次の段階は下から起き上がって入り、前の段階は上へ倒れて抜ける。止まっているときは正面に近い向き（厚みは下と左に少し見える） */
.gsteps.live .sn.d3 .n3d{transform:rotateY(calc(-9deg + var(--mx,0) * 12deg)) rotateX(calc(12deg - var(--my,0) * 10deg))}
.gsteps.live>li:not(.on) .sn.d3 .n3d{transform:translateY(.45em) rotateX(-58deg) rotateY(-9deg)}
.gsteps.live>li.past .sn.d3 .n3d{transform:translateY(-.45em) rotateX(64deg) rotateY(-9deg)}
.gsteps.live>li.on .sn.d3 .n3d{transition:transform .9s cubic-bezier(.2,.85,.25,1.05) .04s}
.gsteps.live>li:not(.on) .sn.d3 .n3d{transition:transform .5s cubic-bezier(.4,0,.6,1)}
/* 抜けるほうは短く（0.3 秒）、入るほうは 0.7 秒。抜けるときの倒れ方は浅く */
.gsteps.live>li:not(.on){transition:opacity .28s ease,translate .35s ease}
.gsteps.live>li.past .sn.d3 .n3d{transform:translateY(-.3em) rotateX(34deg) rotateY(-9deg)}
.gsteps.live>li:not(.on) .sn.d3 .n3d{transition:transform .32s cubic-bezier(.4,0,.8,.6)}
.gsteps.live>li.on{transition:opacity .4s ease .1s,translate .7s cubic-bezier(.2,.9,.3,1) .1s,--g 1.2s cubic-bezier(.3,.1,.2,1) .3s}
.gsteps.live>li.on .sn.d3 .n3d{transition:transform .75s cubic-bezier(.2,.85,.25,1.04) .1s}
/* 倒れる・起き上がる動きは大きすぎた → スクロールと同じく、下から上へ流れて入れ替わる。傾きは少しだけ */
.gsteps.live>li:not(.on) .sn.d3 .n3d{transform:translateY(.55em) rotateX(-14deg) rotateY(-9deg)}
.gsteps.live>li.past .sn.d3 .n3d{transform:translateY(-.55em) rotateX(14deg) rotateY(-9deg)}
.gsteps.live>li:not(.on) .sn.d3 .n3d{transition:transform .35s cubic-bezier(.4,0,.8,.6)}
.gsteps.live>li.on .sn.d3 .n3d{transition:transform .7s cubic-bezier(.2,.8,.25,1) .08s}
/* 11/12 番号をブロックで組む（flowfig.js が .sn.blk に canvas を入れる）。立体の字（.d3）はやめた。
入れ替わりは段階ごと（名前・説明・番号）まとめて動かす（番号と名前がずれて見えていた） */
.gsteps.live .sn.blk{color:transparent;-webkit-text-stroke:0;background:none;line-height:0;font-size:min(27vw,52vh)}
.gsteps.live .sn.blk canvas{display:block;max-width:100%;height:auto}
.gsteps.live>li{transition:opacity .25s ease,translate .3s ease}
.gsteps.live>li.on{transition:opacity .45s ease .05s,translate .6s cubic-bezier(.2,.85,.25,1) .05s,--g 1.2s cubic-bezier(.3,.1,.2,1) .25s}
@media (max-width:820px){.gsteps.live .sn.blk{font-size:min(46vw,28vh)}}
/* 11/12 左の段階名は普通の塗りの字に（ユーザー「文字は普通にして」）。未完成→完成は右の番号のブロックだけで見せる */
.gsteps.live>li.in h3{color:var(--ink);-webkit-text-stroke:0;background:none}
/* 11/12 説明文が「方｜向性」のように言葉の途中で折れないように（対応するブラウザだけ。ほかは今までどおり） */
.gsteps.live>li>p:not(.sn){word-break:keep-all;overflow-wrap:anywhere}
/* 11/12 妖怪アトラスのゲーム画面を 5 枚に（実機の「札の読み取り」「カメラ越しのバトル」を足し、カメラなしのバトルは外した）。
PC は上に 3 枚・下に 2 枚（下の 2 枚は真ん中に寄せる。5 枚 1 段だと小さすぎた）、スマホは 2 枚ずつで最後の 1 枚は真ん中に */
.shots.c4.g5{grid-template-columns:repeat(6,minmax(0,1fr))}
.shots.c4.g5>*{grid-column:span 2}
.shots.c4.g5>:nth-child(4){grid-column:2 / span 2}
.shots.c4.g5 .wimg img{aspect-ratio:.52}
@media (max-width:820px){.shots.c4.g5{grid-template-columns:repeat(2,minmax(0,1fr))}.shots.c4.g5>*,.shots.c4.g5>:nth-child(4){grid-column:auto}.shots.c4.g5>:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc(50% - 6px)}}
/* 11/12 AI 妖怪ショートを外した。残った「歴史の場面」は、上の段の横長の映像（プロローグ）の真下にそろえる */
.shots.vids.solo2>.wide{grid-column:2}
@media (max-width:820px){.shots.vids.solo2>.wide{grid-column:auto}}
/* 映像のどこを押しても再生・停止（vidclick.js）。押せることが分かるように、指の形にする */
.shots.vids video{cursor:pointer}
/* 11/12 フッター（ユーザー「下の部分はいるんかいらんか」→ 付ける）。名前、各ページへのリンク、個人情報の取り扱い、©。
線や枠で区切らず、間と字の大きさで分ける。明るいページと暗い部屋（PORTFOLIO の後）の両方で、色は今までのフッターの色を受け継ぐ */
footer.ft{display:block;padding:clamp(56px,7vw,104px) var(--pad) 40px}
.ft .ft-top{display:flex;justify-content:space-between;align-items:flex-start;gap:32px 56px;flex-wrap:wrap}
.ft .ft-name{margin:0;font:900 clamp(18px,1.5vw,22px)/1.2 "Inter",sans-serif;letter-spacing:.14em;color:var(--ink)}
.ft .ft-name small{display:block;margin-top:12px;font:500 12px/1.6 "Noto Sans JP",sans-serif;letter-spacing:.06em;color:var(--ink3)}
.ft .ft-nav{display:flex;flex-wrap:wrap;gap:16px 36px;font:700 14px/1.4 "Noto Sans JP",sans-serif;letter-spacing:.08em}
.ft .ft-bot{display:flex;justify-content:space-between;align-items:center;gap:16px 28px;flex-wrap:wrap;margin-top:clamp(40px,5vw,64px);font:700 12px/1.4 "Inter","Noto Sans JP",sans-serif;letter-spacing:.1em}
.ft .ft-bot .l{display:flex;flex-wrap:wrap;gap:12px 28px}
.ft a{text-decoration:none}
.ft a:hover{text-decoration:underline;text-underline-offset:5px}
.paper .pf footer.ft .ft-name{color:#fff}
.paper .pf footer.ft .ft-name small{color:#aab5dc}
@media (max-width:820px){
.ft .ft-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px;width:100%}
.ft .ft-bot{flex-direction:column;align-items:flex-start}
}
/* 11/12 素材のクレジット（CC BY-SA の写真）は、制作物の欄から外して一番下に小さく（ユーザー「これはいらん」→ 使っている素材なので消さずに移す） */
.ft .ft-credit{margin:22px 0 0;font:500 11px/1.7 "Noto Sans JP",sans-serif;letter-spacing:.04em;opacity:.75}
.ft .ft-credit a{text-decoration:underline;text-underline-offset:3px}
/* 11/12 ABOUT の顔写真をいったん外した。プロフィールの一覧を 1 列で使う */
.profw.noimg{grid-template-columns:minmax(0,1fr)}
/* 11/12 「つくるもの」の最後に「など」（ユーザー「などや等を入れといて」）。リンクではないので色を落とし、小さく */
.prof dd.links .etc{align-self:flex-end;font-size:.55em;font-weight:700;color:var(--ink3);letter-spacing:.06em}
/* ============ 11/12 スマホの見直し（ユーザー「左に揃ってもないし真ん中でもない」「改行がおかしい」） ============ */
/* 1) 改行は言葉の切れ目だけ（phrase.js が を入れて .phr を付ける。スマホだけ） */
.phr.phr.phr{word-break:keep-all;overflow-wrap:anywhere;line-break:strict}
@media (max-width:820px){
/* 2) そろえ方：スマホは左に統一する（PC は右の列に置く作りで、スマホではそれが「右寄せ・左寄せ混じり」に見えていた） */
.g2 .gtop h1,.g2 .gtop .lead,.g2 .gtop .toc{align-self:flex-start;text-align:left}
.g2 .gtop .lead{max-width:none}
.g2 .gtop .toc{justify-content:flex-start}
.sec-h.r{justify-content:flex-start;text-align:left}
.tofaq{text-align:left}
.tofaq a{text-align:left}
.st-jp,.g2 p.st-jp{text-align:left}
.prof>div:nth-child(2n){margin-left:0}
/* 進め方の小さな札：1 つの札の中では折らない */
.gsteps .keys li{display:inline-block;white-space:nowrap}
/* 3) ABOUT のメッセージ：字を大きくし、横にスライドして読む（右端から始まり、左へ続く。ユーザー「左とか切れててもいいから、スクロールしたら出てくる感じに」） */
.g2 .msg{display:block}
.g2 .msg .tate{display:block;box-sizing:border-box;height:min(66vh,520px);height:min(66svh,520px);width:calc(100% + var(--pad) * 2);max-width:none;margin:14px calc(var(--pad) * -1) 0;padding:4px var(--pad);
font-size:min(20px,2.5vh);font-size:min(20px,2.5svh);line-height:2.25;letter-spacing:.14em;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:none}
.g2 .msg .tate::-webkit-scrollbar{display:none}
.g2 .msg .tate p{margin:0 0 0 2em}
.g2 .msg .tate p:last-child{margin-left:0}
/* 11/14 文の下のバー：横にスライドできると分かるように。つまみは右端から始まり、読み進めると左へ（tbar.js）。
押す・引く範囲は広め（22px）、見える線は 4px */
.g2 .msg .tbar{position:relative;height:22px;margin:4px 0 0;cursor:pointer;touch-action:none}
.g2 .msg .tbar::before{content:"";position:absolute;left:0;right:0;top:9px;height:4px;border-radius:2px;background:rgba(22,33,74,.12)}
.g2 .msg .tbar i{position:absolute;top:9px;right:0;height:4px;border-radius:2px;background:rgba(22,33,74,.6)}
}
.tbar[hidden]{display:none}
@media (max-width:820px){
/* 「〜にまとめています →」：スマホでは字の続きに矢印を置く（字は左、矢印だけ右端、に分かれていた） */
.tofaq a{display:inline}
.tofaq a>span[aria-hidden]{display:inline-block;margin-left:.6em}
}
/* 11/13 スマホのサービス一覧：ユーザー「全体的にギチギチ」「受付システム（ のあとすぐ改行されて変」。
・4 つの組の間を広げる（40→104px）。題名・説明・制作物の間も広げ、説明の行間を少し広く
・制作物は 1 件ずつ行を分ける。補足（画面は表示例 など）は、かっこを外して小さく 1 行下に置く。どの端末でも同じ所で改行される
・11/13 スクロールに合わせて起き上がる動きも一度入れたが、ユーザー「変な動きで見にくくなった。動作はいらん」→ 外した（控えは backup_1112_hero/before_svc_sp/hb3d_v9_scrub.js）。動きは足さない */
@media (max-width:820px){
.hero2 .htrack{gap:104px;padding-bottom:24px}
.hero2 .hb .lb,.hero2 .hb:nth-child(odd) .lb,.hero2 .hb:nth-child(even) .lb{font-size:clamp(19px,5.4vw,22px)}
.hero2 .hb small{margin-bottom:10px}
.hero2 .hb .dsc{margin-top:14px;font-size:14.5px;line-height:1.95}
.hero2 .hb .wk2{margin-top:22px;font-size:14.5px;line-height:1.75}
.hero2 .hb .wk2 b{display:block;margin:0 0 9px}
.hero2 .hb .wk2 .wi{display:block}
.hero2 .hb .wk2 .wi ~ .wi{margin-top:7px}
.hero2 .hb .wk2 .ws,.hero2 .hb .wk2 .pp{display:none}
.hero2 .hb .wk2 .wn{display:block;margin-top:1px;font-size:12.5px;line-height:1.6;color:var(--ink3)}
}
/* 11/13 スマホの HUMAN：右そろえに戻す（ユーザー「全部左にする必要はない。HUMAN は前まで右やったから右でもいい。左でも右でもいいから中途半端にしない」）。
AI は左、HUMAN は右で向かい合わせる（PC と同じ）。赤ペンの印が字の右に出るので、その分だけ右を空け、手書きの HUMAN の右端も字の右端にそろえる */
@media (max-width:820px){
.ai3 .s-hum{text-align:right}
.ai3 .s-hum li,.ai3 .s-hum li:nth-child(n){padding-right:1.25em;margin-left:0}
.ai3 .s-hum .big.hand{margin-left:auto;margin-right:10.5vw}
}
/* 11/13 スマホのそろえ方の配分（ユーザー「全体的に左揃えが多すぎる。いいところで右揃えとか、配分を見ながら」「左でも右でもいいから中途半端にしない」）。
決まり：長い文章（段落・説明・フォーム・Q&A）は左のまま。短い見出しの組だけを、交互に右へ振る。右へ振る組は、その中の字を全部右端にそろえる
・サービス一覧：02 と 04 の組を右（番号・英字・題名・説明・制作物まで全部）
・ご依頼の流れ：「AI の使い方」の見出しを右（PC と同じ。その下は AI が左、HUMAN が右）
・ABOUT のプロフィール：1 行おきに右（種別・拠点）
・YOKAI ATLAS の制作物：1 つおきに見出しを右（WEB・GAME・STICKERS・FILM。下は絵や映像だけの組）
・ページをつなぐリンク（〜にまとめています →）：右。矢印が右端に来る */
@media (max-width:820px){
.hero2 .hb:nth-child(even) .lb{text-align:right}
.hero2 .hb:nth-child(even) .lb .no{left:auto;right:-2px}
.hero2 .hb:nth-child(even) .wk2 b{margin-right:0}
.hero2 .hb:nth-child(even) .dsc .cm{letter-spacing:-.42em} /* 右そろえの行が「、」で終わると、読点の右の空きの分だけ引っ込んで見える。読点の幅を詰めて右端をそろえる */
.hero2 .hb:nth-child(even) small{margin-right:-.2em} /* 字間の分の空きを右端から引く */
.sec-h.r{justify-content:flex-end;text-align:right}
.prof>div:nth-child(2n){text-align:right}
.prof>div:nth-child(2n) dd.links{justify-content:flex-end}
.pf.case .works:not(.ops) .pj:nth-child(even) .pjt{text-align:right}
.tofaq,.tofaq a{text-align:right}
}
/* 11/13 外へ出るリンクの矢印（公開サイトを見る など）：字の「↗」は iPhone で絵文字になっていた（ユーザーの指摘）。字に頼らず絵で描く。色はリンクの矢印の色のまま */
.xar{display:inline-block;flex:none;align-self:center;width:.66em;height:.66em;vertical-align:.02em;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 13 13 3M5.5 3H13v7.5' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 13 13 3M5.5 3H13v7.5' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E") center/contain no-repeat}
/* 11/13 YOKAI ATLAS の題名：ユーザー「スマホでめっちゃちっちゃい。PC でも小さかった。2 行にしてもいい」。
YOKAI と ATLAS を 2 行に分け、ほかのページの題名より大きく（スマホ 40px→画面幅の 23%、PC 最大 92px→画面幅の 11%） */
.g2 .gtop .en.two .tx{display:block}
body[data-svc="case"] .g2 .gtop .en{font-size:clamp(96px,11vw,232px);line-height:.98}
@media (max-width:820px){body[data-svc="case"] .g2 .gtop .en{font-size:23vw;line-height:1}}
/* 11/13 「運営を支える予約・受付システム」：「予／約」で折れていた。言葉の切れ目（支える｜予約）だけで折る */
.g2 .pf .ops-t .nw{white-space:nowrap}
/* 11/13 ChatGPT の評価②「FAQ や個人情報の長い文の後ろで、箱の影や段差が目に入る」
→ 長い文の所だけ、壁と同じ色の薄い霧を重ねて箱を弱める。縁は霧のように消えるので、色の箱には見せない。見出しのまわりの壁は今のまま */
.faq2,.pv{position:relative;isolation:isolate}
.faq2::before,.pv::before{content:"";position:absolute;inset:-80px -90px;z-index:-1;pointer-events:none;
background:hsl(var(--wall-h,228) 38% 96.6% / .8);
-webkit-mask-image:linear-gradient(90deg,transparent,#000 120px,#000 calc(100% - 120px),transparent),linear-gradient(transparent,#000 110px,#000 calc(100% - 110px),transparent);
-webkit-mask-composite:source-in;
mask-image:linear-gradient(90deg,transparent,#000 120px,#000 calc(100% - 120px),transparent),linear-gradient(transparent,#000 110px,#000 calc(100% - 110px),transparent);
mask-composite:intersect}
@media (max-width:820px){
/* スマホは画面いっぱいに本文があるので、左右は端まで（ぼかさない）、上下だけ霧のように消す */
.faq2::before,.pv::before{inset:-60px 0;-webkit-mask-image:linear-gradient(transparent,#000 80px,#000 calc(100% - 80px),transparent);mask-image:linear-gradient(transparent,#000 80px,#000 calc(100% - 80px),transparent);-webkit-mask-composite:source-over;mask-composite:add}
}