/* ============================================================ top.css … Paramanu のトップ（指示書 24・34） 上：ロゴ（動かさない）／真ん中：作品の帯（縦のスクロールで横に流れる）／下：QAi のパネル（オリジンのまま） パネルの見た目には一切触らない（Seat Joy と同じ姿）。ここで決めるのは、パネルの外側だけ 参考：docs/ref/darknova-top-ref.html（下の「QAi」バーは使わない） ============================================================ */ :root{ --bg:#020205; /* 漆黒の夜空 */ --ink:#ecebf4; /* 星の白 */ --mute:#8b8ba3; /* 暗い星の灰 */ --mincho:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif; --g:max(16px, env(safe-area-inset-left, 0px)); --gr:max(16px, env(safe-area-inset-right, 0px)); /* 閉じたパネル（72px）＋アピールで上がる分（46px）＝ 118px。その上に少し余白を取って、帯を置く（指示書 24 タスク1） */ --qai-room:calc(136px + env(safe-area-inset-bottom, 0px)); color-scheme:dark; } html,body{margin:0;background:var(--bg);color:var(--ink)} /* ページ全体（window）がスクロールする作り（指示書 26）。iPhone の Safari は、window がスクロールしたときだけ上下のバーを隠す。 html には overflow を付けず、横にはみ出させない指定は body にだけ（Seat Joy と同じ形）。 body の overflow は画面（viewport）に移るので、body は箱としてスクロールしない。sticky も壊れない */ body{overflow-x:hidden} body{font-family:var(--mincho);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} .vh{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* ---- 夜空（js/sky.js）。高さは 100lvh：iPhone でツールバーが出入りしても星が動かない ---- */ #sky{position:fixed;left:0;top:0;width:100%;height:100vh;height:100lvh;display:block;pointer-events:none;z-index:0} /* ---- ロゴ（assets/brand/paramanu-logo.svg。指示書 34・39）---- ページの上のロゴは、SVG を HTML に直接書き込み、塗り（currentColor）を CSS の color でつける。光らせない（影・ぼかし・filter を付けない）。 作品の絵（js/works.js）のロゴは、SVG を型抜き（mask）に使い、塗りを currentColor にする。形はファイルのまま */ :root{--logo:#ece8f6} .logo-svg{display:block;width:100%;height:auto;fill:currentColor} .brand{display:block;background:currentColor; -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat; -webkit-mask-position:center;mask-position:center; -webkit-mask-size:contain;mask-size:contain} .brand-logo{aspect-ratio:1724.8/365.45; -webkit-mask-image:url(../assets/brand/paramanu-logo.svg);mask-image:url(../assets/brand/paramanu-logo.svg)} /* ---- 上の帯とメニュー ---- 左上の小さなロゴ（.sym-link。押すとトップへ）は作品のページが出す。トップには出さない（トップは真ん中に大きく。指示書 34）。 メニューは、どの端末も右端に縦書き（下の .nav。指示書 34）。 重なり：オリジンのパネル（900）より下。パネルを開いたとき（55%）は、パネルがメニューの上にかぶる。閉じればまた見える */ .top{position:fixed;left:0;right:0;top:0;z-index:850;display:flex;justify-content:flex-end;align-items:center; padding:calc(18px + env(safe-area-inset-top,0px)) var(--gr) 0 var(--g);pointer-events:none} .top > *{pointer-events:auto} .sym-link{display:block;color:var(--logo);padding:8px 0} /* 押せる高さを 44px 近くに */ .sym-link .logo-svg{width:143px} /* 124px の 1.15 倍（指示書 40） */ /* ---- メニュー・作品のラベルと種類・「画像（仮）」・作品の数（指示書 27 のタスク1）---- サイトの文字はすべて Shippori Mincho（代わりの書体も var(--mincho) の同じ明朝の並び）。400。 小さい英字は明朝でも読みやすいよう、字間を .1em。大文字にはしない（書いたまま。QAi を QAI にしないため）。 大きさだけ場所ごとに変える。作品名だけ 600（.cap b） */ .nav,.vlabel,.cap span,.temp,.end{font-family:var(--mincho);font-weight:400;font-style:normal;letter-spacing:.1em; text-transform:none;font-synthesis:none} /* メニュー：どの端末も右端に縦書きで、上下の真ん中あたり（指示書 32 A2・34。docs/ref/paramanu-logo-ref.html の「右端縦書き」）。 文字の見た目はパソコンのまま（14px）。押せる範囲は、それぞれの文字のまわりに 44px 以上（padding で広げ、その分 gap を詰める）。 右端は safe-area-inset-right を足した余白（--gr）の内側：iPhone を横にしても端に隠れない。 押せる範囲（右端から --gr-1px 〜 その 44px 内側）は、オーブの触れる範囲（js/orb.js が重ならないように大きさを決める）と重ならない */ .nav{position:fixed;right:calc(var(--gr) - 1px);top:50%;transform:translateY(-50%);writing-mode:vertical-rl; display:flex;flex-direction:row;gap:10px;font-size:14px;letter-spacing:.14em} .nav a{display:block;box-sizing:border-box;min-width:44px;min-height:44px;padding:10px 15px;text-align:center; color:var(--mute);text-decoration:none;-webkit-tap-highlight-color:transparent} .nav a:hover,.nav a:focus-visible{color:var(--ink)} .nav a:focus-visible,.sym-link:focus-visible,.card:focus-visible{outline:1px solid var(--ink);outline-offset:4px} /* ---- パネルの取っ手：アピールのときだけ pψ（指示書 25 のタスク3・36・39。js/qai-site/grab-mark.js）---- パネルの姿には触らない。足した pψ と、アピール中の棒（Seat Joy の斜め二本線になるもの）の見え方だけ。 pψ は SVG を書き込んだもの。高さは取っ手の高さ（44px）の 45%、取っ手の真ん中（パネルの上から 22px）に。 位置の基準はパネル（取っ手ではない）なので、% ではなく px で書く。 色は白（--logo）。光らせない。持ち上がる 1.2秒に合わせて現れ、下がる 1.0秒に合わせて消える */ #qai-sheet-legacy .sp-grab-mark{position:absolute;left:50%;top:22px;height:calc(44px * .45);transform:translate(-50%,-50%); color:var(--logo);pointer-events:none;opacity:0;transition:opacity 1s ease-in-out} #qai-sheet-legacy .sp-grab-mark svg{display:block;height:100%;width:auto;fill:currentColor} .qai-peeking #qai-sheet-legacy .sp-grab-mark{opacity:.9;transition:opacity 1.2s ease-in-out} /* 棒はオリジンがインラインで動かすので !important で隠す。二本線へ変わり始める途中も見せないよう、すぐに消す。 アピールが終わってからも、1本に戻りきるまで隠し、そのあとオリジンの速さ（0.5秒）で戻る */ .qai-peek-after #qai-sheet-legacy .qai-grab-bar{opacity:0 !important;transition:none !important} /* 取っ手の棒を細く：48×5px → 34×2.5px（指示書 53。docs/ref/panel-balance-ref.html が正）。角は丸いまま、色は今のまま（白の .8）。 オリジンは棒の幅・高さ・角・位置（真ん中に置く translate を px で）をインラインで書くので !important。 位置は left・top 50% から自分の半分だけ戻す（% なので、大きさを変えても真ん中のまま）。 アピールのあいだオリジンは棒を二本線に変えるが、そのあいだ棒は隠している（上の 2 行）ので、形は変わらなくてよい。 押せる範囲は棒ではなく、取っ手の帯（パネルの幅いっぱい・高さ 44px）なので、今のまま */ html.page-top #qai-sheet-legacy .qai-grab-bar{width:34px !important;height:2.5px !important;border-radius:99px !important; transform:translate(-50%,-50%) !important} /* ---- 帯の舞台：画面に留まり、縦のスクロールで横に流れる（高さは参考の試作と同じ） ---- */ .stage{position:relative;z-index:1;height:420svh} .pin{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column} /* ---- トップのロゴ：真ん中に横1行。どの端末も1行（指示書 34・39。docs/ref/paramanu-newlogo-ref.html が正）---- 幅は画面の幅の 25%（768px より狭い画面は 45%。指示書 39・40）。上から画面の高さの 10%（768px より狭い画面は 11%）。 iPhone のダイナミックアイランドに重ならないよう、上の安全な余白（safe-area-inset-top）より下に置く。 js/orb.js は、この箱の下からオーブを置く */ .mast{position:fixed;left:50%;transform:translateX(-50%);z-index:3;margin:0;padding:0; width:25vw;top:10vh;top:max(10svh, calc(env(safe-area-inset-top,0px) + 12px)); color:var(--logo);line-height:0;pointer-events:none} @media (max-width:767.98px){ .mast{width:45vw;top:11vh;top:max(11svh, calc(env(safe-area-inset-top,0px) + 12px))} } /* ---- トップ：1画面。上にロゴ、真ん中に粒子のオーブ（QAi の体）、下にパネル（指示書 32 A1）---- トップのページだけスクロールしない（html の page-top。ほかのページには漏らさない。作品のページは指示書 26 のまま） */ html.page-top,.page-top body{height:100%;overflow:hidden} #orb{position:fixed;left:0;top:0;width:100%;height:100%;display:block;pointer-events:none;z-index:1} /* オーブの上だけ指の動きを受け取る（js/orb.js が場所と大きさを合わせる） */ .orb-hit{position:fixed;z-index:2;border-radius:50%;touch-action:none;cursor:grab;-webkit-tap-highlight-color:transparent; -webkit-user-select:none;user-select:none} .orb-hit:active{cursor:grabbing} /* パネルが閉じているあいだは画面いっぱい（なでると近くの粒子が逃げる。指示書 42） */ .orb-hit.world,.orb-hit.world:active{border-radius:0;cursor:auto} /* ---- オープニング（指示書 42。js/orb.js）---- html に op があるあいだ：ロゴ（js/orb.js が動かす）・メニュー・パネルを隠す。 op を外して op-in を付けたら、メニューはふっと、パネルは下から静かに出る。 パネルの位置はオリジンが transform で決めるので、ここでは別の translate を足して下へ逃がす（オリジンの動きはそのまま） */ .page-top .nav{transition:opacity 1.2s ease} html.op .mast{opacity:0} html.op .nav{opacity:0;pointer-events:none} html.op #qai-sheet-legacy{translate:0 130%} /* 出たあとは、下の「閉じたとき・アピールのときのパネルを少し低く」の位置（--sp-drop）に止まる。 動き終わったら CSS の値に任せる（fill は backwards。開いたときに translate を 0 に戻せるように） */ html.op-in #qai-sheet-legacy{animation:qai-sheet-in 1s cubic-bezier(.2,.7,.2,1) backwards} @keyframes qai-sheet-in{from{translate:0 130%}to{translate:0 var(--sp-drop)}} /* 帯は、閉じたパネルとアピールの上まで */ .strip{flex:1;position:relative;min-height:0;margin-bottom:var(--qai-room);container-type:size} .track{position:absolute;left:0;top:50%;display:flex;align-items:center; padding-left:var(--g);padding-right:var(--gr);will-change:transform;transform:translate3d(0,-50%,0)} /* ---- 作品のカード（data/works.json から js/works.js が作る） ---- */ .works{display:flex;gap:clamp(20px,3vw,44px);flex:none} .card{flex:none;display:flex;flex-direction:column;gap:14px;color:var(--ink);text-decoration:none} /* 絵の高さ：画面の高さ・幅と、帯の高さ（下の作品名の分を引く）の小さいほう。縦長 4:5 */ .art{position:relative;height:min(46svh,40vw,calc(100cqh - 64px));aspect-ratio:4/5;overflow:hidden; display:flex;align-items:center;justify-content:center} /* 絵は .art-in に包む（js/works.js）。?parallax=1 のときは、この入れ物だけが少し遅れて動く（枠は動かさない）。 そのときは、動いても枠の内側に隙間ができないよう、上下左右に 20px 大きめに置く */ .art-in{position:absolute;inset:0;display:flex;align-items:center;justify-content:center} @media (max-width:700px), (hover:none) and (pointer:coarse){ .parallax .art-in{inset:-20px;will-change:transform} } /* 縦の並びだけ（パソコンは指示書 28 から使わない） */ .art-in > *{transition:transform .8s cubic-bezier(.2,.7,.2,1)} /* マウスを乗せたときの拡大は、パソコン（マウスがあり、幅が 700px より広い）だけ */ @media (hover:hover) and (min-width:701px){ .card:hover .art-in > *{transform:scale(1.04)} } .art img{width:100%;height:100%;object-fit:cover;display:block} .vlabel{z-index:1} /* 縦書きのラベル：下から上へ読む。日本語も英字と同じ向きに寝かせる（sideways。そうしないと日本語だけ逆さになる） */ .vlabel{position:absolute;left:12px;bottom:14px;writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap; -webkit-text-orientation:sideways;text-orientation:sideways; font-size:11px;opacity:.75} .temp{font-size:12px;opacity:.7} .cap{display:flex;justify-content:space-between;align-items:baseline;gap:16px} .cap b{font-weight:600;font-size:clamp(17px,1.6vw,22px);letter-spacing:.02em} .cap span{font-size:12px;color:var(--mute)} .end{flex:none;width:24vw;padding-left:clamp(20px,3vw,44px);font-size:12px;color:var(--mute)} /* ぬるっと浮かび上がる（js/works.js。指示書 27 のタスク2）。画面に入るまで、透明で 48px 下に。 入ったら 1.4秒で浮かび上がる。最初はすっと、最後にゆっくり止まる。画像が先、作品名と種類は 0.15秒遅れて。 動くのは opacity と transform だけ */ .card.rise .art,.card.rise .cap{transition:opacity 1.4s cubic-bezier(.33,0,.2,1),transform 1.4s cubic-bezier(.16,1,.3,1)} .card.rise .cap{transition-delay:.15s} .card.rise-wait .art,.card.rise-wait .cap{opacity:0;transform:translate3d(0,48px,0)} /* ---- パネルを透明なガラスに（指示書 51。docs/ref/panel-glass-ref.html が正。Work のガラスと同じ考え方）---- トップ（page-top）のパネルだけ。シートジョイのパネル（ai_concierge_demo）は変えない。 オリジンはパネルの背景・ぼかし・枠・影を JS のインライン（style）で書き、話しているあいだ（.qai-speaking）は 自分の CSS で背景・枠・影を !important で上書きする。そのどちらにも勝つよう、!important と、 オリジンより強い指定（html.page-top を足す）で書く。オリジンのファイルは変えない。 - 背景は色なし。ぼかし（backdrop-filter）は使わない。うしろの粒子の世界がそのまま見える - 角丸は今のまま（オリジンの 18px）。枠の線は透明にして（幅 1px はそのまま。中の位置が動かないように）、ふちの光に置きかえる - ふちの光は ::after（上と左右の 1px。下はなし）。::before は、話しているあいだのオリジンの光る枠が使うので空けておく - 影は内側の光と影だけ。パネルの上に落ちていた暗い影は外す。話しているあいだのオリジンの青い光（外側）は残す - 閉じた（72px）・アピール（118px）・開いた（55%）のどれも同じ。大きさと動きはオリジンのまま */ html.page-top #qai-sheet-legacy, html.page-top #qai-sheet-legacy.qai-speaking{ background:transparent !important; -webkit-backdrop-filter:none !important;backdrop-filter:none !important; border-color:transparent !important; box-shadow:inset 0 1px 1px rgba(255,255,255,.14),inset 18px 22px 40px -28px rgba(255,255,255,.13), inset -20px -24px 44px -30px rgba(150,170,255,.28) !important} html.page-top #qai-sheet-legacy.qai-speaking{ box-shadow:inset 0 1px 1px rgba(255,255,255,.14),inset 18px 22px 40px -28px rgba(255,255,255,.13), inset -20px -24px 44px -30px rgba(150,170,255,.28), 0 0 24px rgba(120,200,255,.10),0 0 52px rgba(210,150,255,.08) !important} /* パネルが透明になったので、開いたとき（55%）にパネルの下に入る縦メニュー（About・Contact）が、答えの文のすぐ横に透けて見える。 前は、パネルの色がかぶって見えなかった。パネルとメニューが重なる幅（1100px まで。PC はパネルが 980px で重ならない）だけ、 開いているあいだはメニューを消す（消えるのはパネルが開く速さ 0.22秒。閉じたら、オープニングと同じ 1.2秒でふっと戻る） */ @media (max-width:1100px){ html.page-top.qai-open .nav{opacity:0;pointer-events:none;transition:opacity .22s ease} } html.page-top #qai-sheet-legacy::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px 1px 0;pointer-events:none; background:linear-gradient(170deg,rgba(255,255,255,.28),rgba(255,255,255,.06) 30%,rgba(255,255,255,0) 55%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)} /* ---- 閉じたとき・アピールのときのパネルを少し低く（指示書 52 タスク4。Nov「少し低くする」。js/qai-site/low-sheet.js）---- 下の段が 1 行になった分、閉じた 72px → 60px、アピール 118px → 106px（どちらも 12px 低く）。開いたとき（55%）は今のまま。 オリジンの位置（transform）はそのままで、開いていないあいだだけ translate で下げる。 iPhone の下の安全な余白（ホームのバー）に取っ手がかからない高さ（取っ手の下の端まで 26px＋安全な余白）より下げない。 開く・閉じるときの 0.22 秒の動きは low-sheet.js が足す */ @property --sp-drop{syntax:"";inherits:true;initial-value:0px} /* low-sheet.js が px で読めるように */ :root{--sp-drop:calc(72px - max(60px, calc(26px + env(safe-area-inset-bottom, 0px))))} html.page-top:not(.op) #qai-sheet-legacy{translate:0 var(--sp-drop)} html.page-top.qai-open #qai-sheet-legacy{translate:0 0} /* ---- 開いたパネルを低く：画面の 55% → 40%（指示書 53。docs/ref/panel-balance-ref.html が正）---- オリジンは開いた高さを JS のインラインで 55dvh と書く（作るときと、会話の記録（LOG）から戻るとき）。 高さそのものを上書きすると、LOG のとき（オリジンが height:auto にして、下の段だけに縮める）まで 40% になってしまう。 そのため、上限（max-height）のほうを 40% にする。55% は 40% に抑えられ、LOG の低いパネルはそのまま。 閉じた（60px）・アピール（106px）は、パネルの上のはしから見せる量なので変わらない。開く・閉じるの動きもオリジンのまま。 js/orb.js の CFG.PANEL_OPEN も 0.40 にそろえる（オーブの位置） */ html.page-top #qai-sheet-legacy{max-height:40vh !important;max-height:40dvh !important} /* ---- パネルの下：入力欄はアイコンに、その上の線は消す（指示書 31 B1。指示書 08 の 1-4・1-6 の一部を戻す）---- オリジンはインラインで書くので !important */ #qai-input-bar{border-top-color:transparent !important} /* 文字（鍵盤）のアイコン（js/qai-site/text-btn.js）。LOG・マイク・波形と同じ 25px・線の太さ 1.75・白、押せる範囲は 44px 以上 */ #sp-text-btn{flex:none;display:flex;align-items:center;justify-content:center;padding:8px 12px; border-radius:12px;border:1px solid transparent;background:transparent;color:#fff;cursor:pointer; opacity:.42;transition:opacity .2s ease;-webkit-tap-highlight-color:transparent} #sp-text-btn svg{display:block} #sp-text-btn[data-active="1"]{opacity:1} @media (hover:hover){#sp-text-btn:hover{opacity:.72}#sp-text-btn[data-active="1"]:hover{opacity:1}} #sp-text-btn:focus{outline:none} #sp-text-btn:focus-visible{outline:1px solid rgba(230,232,242,.4);outline-offset:-4px} #sp-text-btn,#qai-log-btn,#qai-mic-btn,#qai-voice-btn,#qai-chat-send{min-width:44px !important;min-height:44px !important} /* 文字の入力欄は、鍵盤のアイコンを押したときだけ出す */ .sp-text-icon:not(.sp-typing) #qai-chat-input{display:none !important} /* ---- パネルの下の段を 1 行に（指示書 52。docs/ref/qai-think-ref.html の「新しい形（1 段）」が正。js/qai-site/think-mark.js）---- 前は 2 段（文字・LOG ……… マイク・波形／その下の真ん中に QAi のロゴ）。今は 1 行：文字・LOG・QAi・マイク・波形。 html.sp-one-row は think-mark.js が付ける（トップだけ。シートジョイのパネルは変えない）。オリジンはインラインで書くので !important。 - 5 つを同じ間隔に：アイコンの幅（51px。押せる範囲 44px 以上はそのまま）の列と、同じ幅の空きの列を交互に並べる - オリジンのボタンの入れ物（#qai-btn-group）は箱をなくして、マイク・波形・送信を行に直接並べる - 送信（文字があるとき）は、マイクと波形が消えて、波形の場所に出る。QAi のロゴはいつも真ん中 - オリジンのロゴの段（#qai-brand-row）は消す。ロゴは think-mark.js が写して、真ん中（オリジンの #qai-status の中）に置く - オリジンの「…」（#qai-dots）は出さない（考え中はロゴが粒になって 3 つの点になる。二重に出さない） */ html.sp-one-row #qai-brand-row,html.sp-one-row #qai-dots{display:none !important} html.sp-one-row #qai-input-row{display:grid !important;grid-template-columns:51px 1fr 51px 1fr 51px 1fr 51px 1fr 51px; column-gap:0 !important;align-items:center;justify-items:center} html.sp-one-row #qai-btn-group{display:contents !important} html.sp-one-row #sp-text-btn{grid-area:1/1} html.sp-one-row #qai-log-btn{grid-area:1/3} html.sp-one-row #qai-status{grid-area:1/5;position:relative;height:44px !important;overflow:visible} html.sp-one-row #qai-mic-btn{grid-area:1/7} html.sp-one-row #qai-voice-btn,html.sp-one-row #qai-chat-send{grid-area:1/9} /* 音声が使えないときの短い文（オリジン）は、ロゴを押しのけないよう、行のすぐ上に出す */ html.sp-one-row #qai-status-text{position:absolute;left:50%;bottom:100%;transform:translateX(-50%);white-space:nowrap} /* 真ん中の QAi のロゴ（形・大きさ 32px・色 白の .45 はオリジンのロゴのまま）。押せない（前と同じ） */ .sp-q{position:relative;flex:none;width:44px;height:44px;display:grid;place-items:center;color:rgba(255,255,255,.45);pointer-events:none} .sp-q .sp-q-logo{transition:opacity .25s ease} .sp-q.sp-thinking .sp-q-logo{opacity:0} /* 動きを減らす設定：ロゴと止まった 3 つの点を、すっと切りかえるだけ */ @media (prefers-reduced-motion:reduce){.sp-q .sp-q-logo{transition:none}} /* 粒を描く小さな canvas（80×60）。ロゴの真ん中に重ねる */ .sp-q-grain{position:absolute;left:50%;top:50%;width:80px;height:60px;transform:translate(-50%,-50%);pointer-events:none} /* ---- パネルの中に呼び出した作品（js/qai-site/page-slot.js。指示書 30 B2）---- オリジンの答えの欄（スマホで見える高さ約 260px）の中、答えの文字の後ろ。絵は小さく左に、作品名・種類・入口を右に */ .sp-page[hidden]{display:none} .sp-work{display:flex;align-items:flex-end;gap:18px;width:min(900px,86vw);margin:2px auto 18px;padding:0 4px; font-family:var(--mincho);color:var(--ink)} /* オリジンはパネルの中のすべてに自分の書体を当てる（#qai-sheet-legacy *）。呼び出した作品だけ、サイトの作品と同じ明朝に （オリジンの答えの文字の書体は変えない） */ #qai-sheet-legacy .sp-work, #qai-sheet-legacy .sp-work *{font-family:var(--mincho)} /* 絵はロゴだけを浮かべる（指示書 44）。四角い板・縦書きは出さない。枠は Work のタイルと同じ 4:3（幅 120〜168px）で、 ロゴの幅はタイルと同じ割合（js/qai-site/page-slot.js）。ロゴは切らずに全体を収める */ .sp-work .sp-work-art{flex:none;position:relative;width:clamp(120px,28vw,168px);aspect-ratio:4/3; display:flex;align-items:center;justify-content:center} .sp-work .sp-logo{display:block;max-width:100%;max-height:100%;height:auto} .sp-work .sp-logo.brand{color:var(--logo)} .sp-work .brand-logo.sp-logo{width:86%} .sp-work .sp-mark{width:70%;height:60%} .sp-work .sp-photo{display:block;width:100%;height:100%;object-fit:contain} .sp-work-meta{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0;padding-bottom:4px} .sp-work-meta b{font-weight:600;font-size:18px;letter-spacing:.02em;line-height:1.4} .sp-work-meta span{font-size:12px;letter-spacing:.1em;color:var(--mute)} .sp-work-link{margin-top:6px;font-size:13px;letter-spacing:.1em;color:var(--ink);text-decoration:none; border-bottom:1px solid rgba(236,235,244,.45);padding:6px 0 2px} .sp-work-link::after{content:" →"} .sp-work-link:focus-visible{outline:1px solid var(--ink);outline-offset:4px} /* 答えの中のリンク（js/qai-site/links.js。指示書 44）。URL の文字は出さず、名前と小さな ↗ だけ。色は答えの文字のまま、細い下線 */ a.qai-link{white-space:nowrap;color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.28em; text-decoration-color:color-mix(in srgb,currentColor 45%,transparent);-webkit-tap-highlight-color:transparent;cursor:pointer} a.qai-link:hover{text-decoration-color:currentColor} a.qai-link:focus-visible{outline:1px solid currentColor;outline-offset:3px;border-radius:2px} a.qai-link .qai-link-arrow{display:inline-block;margin-left:.18em;font-size:.72em;vertical-align:.18em;text-decoration:none} /* 作品の絵（art）：QAi の色のオーブ／ロゴ */ .orb{width:62%;aspect-ratio:1;border-radius:50%;position:relative;filter:saturate(1.15)} .orb::before,.orb::after{content:"";position:absolute;inset:0;border-radius:50%} .orb::before{background: radial-gradient(circle at 34% 38%,#ff4e5b 0,transparent 46%), radial-gradient(circle at 66% 36%,#35c6f4 0,transparent 48%), radial-gradient(circle at 46% 70%,#6e7cff 0,transparent 50%), radial-gradient(circle at 64% 62%,#9b6bff 0,transparent 46%);filter:blur(10px);animation:drift 14s ease-in-out infinite alternate} .orb::after{background:radial-gradient(circle at 48% 44%,rgba(255,255,255,.55),transparent 42%);mix-blend-mode:screen} @keyframes drift{to{transform:rotate(40deg) scale(1.05)}} /* 作品のロゴ（art: mark）：もとの SVG の形のまま、色だけを板に合わせる（暗い板は白、明るい板は .art に付く暗い色）。 形の縦横の比はファイルごとに違うので、枠の中に収める（mask-size:contain） */ .art .mark{width:74%;height:44%} .art .brand-logo{width:70%;color:var(--logo)} /* ---- スマホ（幅 700px 以下）：作品を縦に1つずつ大きく（指示書 25 のタスク1）---- 帯を画面に留める仕掛け（sticky）も、横に動かす仕掛け（js/works.js）も使わない。ふつうのページのスクロールだけ。 ロゴもページと一緒に流れる。最後の作品名と作品の数が、閉じたパネル（アピールで上がったときも）に隠れないよう、下に余白 */ /* ---- 縦の並び：幅 700px 以下と、指で触る端末（iPad など。幅に関係なく）（指示書 25・29）---- ページ全体（window）がスクロールする作り（指示書 26）。マウス・トラックパッドの端末の幅 701px 以上だけが、横のスライダー（下） */ @media (max-width:700px), (hover:none) and (pointer:coarse){ .stage{height:auto} .pin{position:static;height:auto;overflow:visible;display:block} .strip{margin:0;container-type:normal} .track{position:static;display:block;transform:none;will-change:auto; padding:56px var(--gr) calc(var(--qai-room) + 24px) var(--g)} .works{flex-direction:column;gap:56px} .card{width:100%} .art{width:100%;height:auto} .end{width:auto;padding:48px 0 0} /* ---- 上：作品のページの上の帯の高さ（左上のロゴ）。指示書 34 からロゴは横1行だけ ---- */ :root{--head-pt:calc(18px + env(safe-area-inset-top,0px))} .track{padding-top:16px} } /* 縦の並びの iPad など（指で触る端末で幅 701px 以上）：カードが大きくなりすぎないよう、幅に合わせて列にする。 カードの幅は 320px 以上で、入るだけ並べる（iPad の縦 1024px で2列、横 1366px で3列） */ @media (min-width:701px) and (hover:none) and (pointer:coarse){ .works{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:64px 32px} .card{width:auto} } /* ---- パソコン（マウス・トラックパッドの端末で、幅 701px 以上）---- メニューは右端に縦書きで、上下の真ん中あたり（指示書 32 A2） */ .slider{display:none} @media (min-width:701px) and (hover:hover), (min-width:701px) and (pointer:fine){ /* 終わりのない作品の帯（js/slider.js。指示書 28・29）。今はどのページも使わない（コードは残す。使うときは html に page-slider）。 ページ自体は縦にスクロールしない。この指定はこの条件の中だけ */ html.page-slider,.page-slider body{height:100%;overflow:hidden} .page-slider .stage{height:auto} .page-slider .pin{position:static;height:auto;overflow:visible} .page-slider .strip{display:none} .page-slider .slider{display:block;position:fixed;left:0;right:0;z-index:1;overflow:visible;cursor:grab; -webkit-user-select:none;user-select:none;touch-action:pan-y;outline:none} .page-slider .slider.drag{cursor:grabbing} .page-slider .slider:focus-visible{outline:1px solid rgba(236,235,244,.35);outline-offset:-1px} .page-slider .slide{position:absolute;left:0;top:0;will-change:transform;transform-origin:50% 50%} .page-slider .slide .card{width:100%;gap:12px;-webkit-user-drag:none} .page-slider .slide .art{width:100%;height:auto} } /* ---- 作品のページ（work/）の上：左上に小さなロゴ（押すとトップへ）とメニュー。作品はその下に潜る（指示書 32 A4・34）---- */ .page-work .top{justify-content:space-between;padding-bottom:24px; background:linear-gradient(to bottom,var(--bg) calc(100% - 24px),rgba(2,2,5,0))} /* ---- 作品のページ・事例のページで、ガクつかせない（指示書 38）---- iPhone の Safari は、スクロールや一番下に着いたときに上下のバーが出入りして、見えている高さが変わる。 - 縦のメニューと夜空は、js/steady.js が px で決めた位置と高さ（--nav-y・--sky-h）に置く。高さだけの変化では動かない （js/steady.js が動く前と、動かないときは、今までどおり 50% と 100vh） - 一番下（と一番上）で画面が跳ねないようにする。跳ねると、留めてあるもの（メニュー・夜空・左上のロゴ）が一緒に揺れる。 上下のバーがスクロールで隠れる動きは、そのまま トップ（page-top）には当てない */ html.page-work{overscroll-behavior-y:none} .page-work .nav{top:var(--nav-y,50%)} .page-work #sky{height:var(--sky-h,100vh)} /* ---- 作品のページ（work/）。指示書 46・47（docs/ref/work-qai-ref.html が正）---- Work は「QAi の仕事」1 つを深く見せるページ。主語は QAi。Seat Joy Second は「導入先」として小さく出す。 上から：見出し「問いかけるほど、広がる。」と文（指示書 49） → QAi が何か（QAi のロゴと文、QAi が動いている画面の場所。指示書 50） → ロゴから、声まで。 → QAi があると何が変わるか（3 枚） → 話しかけてみる。 左は左上のロゴとそろえて --g。右は縦書きのメニューの分あける（押せる範囲 50px と、少しのすき間） */ .page-work{--wk-dim:#8c8aa6;--wk-line:#1f2340;--wk-r:clamp(22px,3.2vw,34px); --wk-rim:linear-gradient(150deg,rgba(255,255,255,.28),rgba(255,255,255,.06) 35%,rgba(255,255,255,0) 60%,rgba(160,180,255,.22) 100%)} .wk{position:relative;z-index:1;padding:calc(16px + env(safe-area-inset-top,0px) + 44px) 0 calc(96px + env(safe-area-inset-bottom,0px))} /* ページのいちばん上（指示書 49・50）：見出し → 文 3 行。どの画面でも真ん中ぞろえ。 見出しは折り返さない（iPhone でも 1 行。いちばん狭い 320px の画面だけ、入るように少し小さくする）。768px より狭い画面では少し大きく（指示書 50）。 文の 3 行は、いつも別の行。2 行目は句ごとに inline-block で、狭い画面では「答えから、」のあとでだけ折り返す */ .wk-intro{box-sizing:border-box;max-width:48em;margin:0 auto;padding:clamp(56px,10vh,120px) 40px 0;text-align:center} .wk-head{font-weight:400;font-size:clamp(1.25rem,4.2vw,2.6rem);letter-spacing:.16em;padding-left:.16em;margin:0 0 28px;white-space:nowrap} .wk-lead{color:var(--wk-dim);font-size:clamp(.86rem,1.6vw,1rem);line-height:2.1;margin:0} .wk-lead span{display:inline-block} .wk-lead .b{display:block} @media (max-width:639px){ .wk-intro{padding-left:28px;padding-right:28px} .wk-lead{font-size:.84rem;line-height:2} } /* 768px より狭い画面（iPhone など）だけ、見出しを少し大きく（指示書 50。試作の値）。PC・iPad は上の大きさのまま */ @media (max-width:767px){ .wk-head{font-size:clamp(1.3rem,5.6vw,1.6rem)} } @media (max-width:359px){ .wk-head{font-size:min(1.3rem,calc((100vw - 56px) / 14.6))} } /* 透明なガラス（指示書 46 と同じ）。色はつけない（うしろの夜空の星がそのまま透ける）。ぼかし（backdrop-filter）・ゆがみは使わない。 ふち（::before の 1px）がうっすら光る：上と左が少し明るく、下へいくほど消える。内側にかすかな光と影。中で動くものは入れない */ .wk-glass{position:relative;border-radius:var(--wk-r);background:transparent; box-shadow:inset 0 1px 1px rgba(255,255,255,.14),inset 0 -1px 1px rgba(255,255,255,.07), inset 18px 22px 40px -28px rgba(255,255,255,.13),inset -20px -24px 44px -30px rgba(150,170,255,.28), 0 24px 50px -28px rgba(0,0,0,.7)} .wk-glass::before,a.wk-glass::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;padding:1px;pointer-events:none; background:var(--wk-rim); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)} /* 押せるガラス（ボタン）：マウスをのせると、ふちの光が少しだけ明るくなる（指示書 46 のタイルと同じ。同じふちを薄く重ねる） */ a.wk-glass::after{opacity:0;transition:opacity .5s} a.wk-glass:hover::after,a.wk-glass:focus-visible::after{opacity:.6} .wk-case{max-width:980px;margin:clamp(72px,12vh,128px) auto 0;padding:0 calc(var(--gr) + 52px) 0 var(--g); display:grid;gap:clamp(40px,7vh,72px)} .wk-case h2{font-weight:400;font-size:clamp(1.3rem,2.6vw,1.8rem);letter-spacing:.12em;margin:0;text-wrap:balance} /* 見出しとボタンは句ごとにまとめて、狭い画面では句と句のあいだだけで折り返す（「サ／イト」のように切れない。↗ は「話しかける」と離れない） */ .wk-case h2 > span,.wk-btn > span{display:inline-block} .wk-eyebrow{font-size:11px;letter-spacing:.24em;color:var(--wk-dim);margin:0 0 14px} /* QAi が何か：左に文、右に QAi が動いている画面の場所（縦長 9:16）。767px までは縦に並ぶ */ .wk-hero{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(20px,3vw,36px);align-items:center} @media (max-width:767px){ .wk-hero{grid-template-columns:1fr} } .wk-hero > *{min-width:0} /* QAi のロゴ（白）は「声で応える案内役」のすぐ上（指示書 50）。幅は PC 96px・iPhone 64px。768px より狭い画面では真ん中（下の「そろえ方」） */ .wk-qai-logo{width:clamp(64px,9vw,96px);aspect-ratio:514.6/440.5;margin-bottom:18px;color:var(--logo); -webkit-mask-image:url(../assets/work/qai/qai-logo.svg);mask-image:url(../assets/work/qai/qai-logo.svg)} .wk-hero p{color:var(--wk-dim);line-height:2.1;font-size:.95rem;margin:16px 0 0} .wk-hp span{display:inline-block} .wk-hp .b{display:block} .wk-at{display:flex;align-items:center;gap:12px;margin-top:26px;font-size:12px;color:var(--wk-dim);letter-spacing:.08em} .wk-at .brand{height:16px;aspect-ratio:200.9/49.3;color:var(--logo);opacity:.85; -webkit-mask-image:url(../assets/work/seatjoy/seatjoy-logo.svg);mask-image:url(../assets/work/seatjoy/seatjoy-logo.svg)} /* 画面の場所。今は空（文字は出さない）。動画を入れたら、枠いっぱいに出す（ふちの光は動画の上） */ .wk-shot{aspect-ratio:9/16;max-height:560px;width:100%;max-width:320px;justify-self:center;overflow:hidden} .wk-shot video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block} /* ロゴから、声まで。（横長のガラス 1 枚）。3 段は PC で横に 3 つ、639px までは縦 */ .wk-chain{padding:clamp(24px,4vw,40px)} .wk-steps{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px} @media (max-width:639px){ .wk-steps{grid-template-columns:1fr} } .wk-steps li{min-width:0;display:grid;gap:8px;padding-top:18px;border-top:1px solid var(--wk-line)} .wk-steps li:last-child{border-top-color:rgba(236,232,246,.5)} .wk-steps b{font-weight:400;font-size:12px;letter-spacing:.2em;color:var(--wk-dim)} .wk-steps span{font-size:.95rem;line-height:1.9} /* 3 段の文は句ごとにまとめる（指示書 49。iPhone で「つくる」「置く」の 1 文字だけが次の行に残らないように） */ .wk-steps span span{display:inline-block} /* QAi があると何が変わるか（ガラス 3 枚）。PC は横に 3 つ、767px までは縦 */ .wk-points{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,22px)} @media (max-width:767px){ .wk-points{grid-template-columns:1fr} } .wk-pt{padding:clamp(22px,3vw,30px);min-width:0} .wk-pt h3{font-weight:400;font-size:1.05rem;letter-spacing:.08em;margin:0 0 12px} .wk-pt p{margin:0;color:var(--wk-dim);font-size:.88rem;line-height:2} /* そろえ方（指示書 49）。768px からは今のまま左ぞろえ（QAi の説明の文・ロゴから、声まで。・変わること 3 枚）。 それより狭い画面（iPhone など）だけ、QAi の説明（見出し・文・導入先）と、2 つのカードの中を真ん中ぞろえにする */ @media (max-width:767px){ .wk-hero > div:first-child{text-align:center;display:grid;justify-items:center} .wk-qai-logo{margin-left:auto;margin-right:auto} .wk-at{justify-content:center} .wk-chain{text-align:center} .wk-steps li{justify-items:center} .wk-pt{text-align:center} } /* 話しかけてみる */ .wk-try{text-align:center;display:grid;gap:14px;justify-items:center} .wk-btn{display:inline-block;text-align:center;line-height:1.7;color:var(--ink);text-decoration:none;font-size:1rem;letter-spacing:.08em; padding:16px 28px;border-radius:999px;-webkit-tap-highlight-color:transparent} .wk-btn small{font-size:.75em;opacity:.8;margin-left:.3em} .wk-btn:focus-visible{outline:2px solid #b9b2e0;outline-offset:4px} .wk-try p{margin:0;color:var(--wk-dim);font-size:.82rem} .wk-try a.wk-sub{color:var(--wk-dim);font-size:.85rem} .wk-try a.wk-sub:hover,.wk-try a.wk-sub:focus-visible{color:var(--ink)} /* 動きを減らす設定：帯はスクロールで動いてよい。ほかの動き（オーブの揺らぎ・乗せたときの拡大）は止める */ @media (prefers-reduced-motion:reduce){ .card.rise-wait .art,.card.rise-wait .cap{opacity:1;transform:none} a.wk-glass::after{transition:none} .orb::before{animation:none} .art-in > *{transition:none} .card:hover .art-in > *{transform:none} }