/* ============================================================ ROBOT CARNIVAL — AIフィルムコンテスト 外部LP カラーは **カーニバルイエロー単色に確定**（設計方針）。 青パターンと切り替えスイッチャーは撤去済み（html の data-pattern 属性も廃止）。 --ghost2 の青はタイトルのグリッチの色ズレ用、--cur の青はカスタムカーソル用に残している。 ============================================================ */ :root{ --ink:#070b11; --ink2:#0b1019; --surface:#101724; --line:#1e2b3b; --line2:#2c3e52; --text:#eef4fa; --muted:#a9bccd; --faint:#71879c; --acc:#ffc72c; --acc2:#ffe28a; --pop:#ffc72c; --pop-ink:#171100; --pop-pale:#fff1b8; --glow:rgba(255,199,44,.5); --tint:rgba(255,199,44,.07); /* グリッチ残像の色ズレ用（テーマ色に対して青を重ねる） */ --ghost2:#3fa9ff; /* カスタムカーソルの色（設計方針）。アクセントの黄 #ffc72c の対色＝青。 白地のロゴ帯・青系のティザースチル・黄色のCTAのどこに乗っても沈まない明度を選んでいる。 色を変えるときはこの1行だけ直せばドット・輪・キラキラの全部が追従する */ --cur:#2f86ff; --cur-glow:rgba(47,134,255,.62); /* --ttl-size は 2026-08-07 にタイトルをロゴ画像へ差し替えたため未使用（h1.title img の width で持つ） */ --sub-size:clamp(17px,2.7vw,31px); /* ロボットと、どう生きるか。 */ /* ヒーローCTAの文字サイズ。サブタイトルより2段階小さく、楕円の枠に余白を持たせる */ --cta-size:clamp(15px,2.1vw,25px); --serif:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif; --goth:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN",sans-serif; --cond:"Oswald","Avenir Next Condensed","Arial Narrow","Helvetica Neue",sans-serif; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--ink);color:var(--text);font-family:var(--goth); font-size:16px;line-height:2;letter-spacing:.02em; font-feature-settings:"palt";-webkit-font-smoothing:antialiased;overflow-x:hidden} a{color:inherit} img{max-width:100%;height:auto;display:block} .wrap{max-width:1160px;margin:0 auto;padding:0 28px} .narrow{max-width:880px;margin:0 auto;padding:0 28px} .en{font-family:var(--cond);letter-spacing:.28em;text-transform:uppercase;font-weight:500} /* ambient glow（じんわり灯る環境光。WFAIA参照＝ゆっくり呼吸するだけ） */ #ambient{position:fixed;inset:0;z-index:2;pointer-events:none; background:radial-gradient(720px 720px at 80% 16%, var(--glow), transparent 70%); opacity:.05;animation:breathe 11s ease-in-out infinite} @keyframes breathe{0%,100%{opacity:.04}50%{opacity:.10}} /* 告知バー */ .annobar{position:relative;z-index:60;display:flex;justify-content:center;gap:14px;align-items:center;background:var(--pop);color:var(--pop-ink);font-weight:800;font-size:14.5px;padding:9px 14px;letter-spacing:.08em} .annobar .en{font-size:14px;letter-spacing:.2em;opacity:.72} /* ヘッダー */ header{position:sticky;top:0;z-index:50;background:rgba(7,11,17,.78);backdrop-filter:blur(12px);border-bottom:1px solid rgba(30,43,59,.6)} .hd{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px;height:66px; padding:0 clamp(20px,3vw,48px)} .logo{font-weight:900;font-size:16px;letter-spacing:.16em;white-space:nowrap;text-decoration:none;justify-self:start;display:flex;align-items:center} .logo i{display:inline-block;width:8px;height:8px;background:var(--acc);margin:0 7px;transform:rotate(45deg)} /* 松丸さん制作の公式ロゴ（背景透過PNG）。高さで合わせる。文字ロゴに戻すときはこの1行を消す */ .logo img{height:34px;width:auto} /* 26px → 34px へ */ nav{display:flex;justify-content:center;gap:clamp(20px,2.7vw,40px);flex-wrap:wrap} .hdRight{display:flex;align-items:center;gap:clamp(10px,1.4vw,20px);justify-self:end} nav a{font-size:14px;letter-spacing:.18em;text-decoration:none;color:var(--muted);font-family:var(--cond);font-weight:500;text-transform:uppercase; position:relative;padding:7px 2px;transition:color .3s ease,text-shadow .3s ease} /* 下線は擬似要素で。ホバーは中央から伸び、現在地は出しっぱなしでゆっくり明滅する */ nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px; background:var(--acc);box-shadow:0 0 12px var(--glow);opacity:0;transform:scaleX(0); transition:transform .35s cubic-bezier(.16,1,.3,1),opacity .3s ease} nav a:hover,nav a:focus-visible{color:var(--acc2);text-shadow:0 0 18px var(--glow)} nav a:hover::after,nav a:focus-visible::after{opacity:1;transform:scaleX(1)} nav a[aria-current="true"]{color:var(--pop);text-shadow:0 0 20px var(--glow)} nav a[aria-current="true"]::after{opacity:1;transform:scaleX(1);animation:navPulse 2.8s ease-in-out infinite} @keyframes navPulse{0%,100%{box-shadow:0 0 9px var(--glow)}50%{box-shadow:0 0 24px var(--glow),0 0 5px var(--acc)}} .spCta{background:var(--pop);color:var(--pop-ink);font-weight:800;font-size:14.5px;letter-spacing:.06em;text-decoration:none;padding:10px 20px;border-radius:99px;white-space:nowrap} .spCta:hover{filter:brightness(1.12)} /* ⭐ 右下に追従する申込ボタン（りあ指示 2026-08-14）。 ヘッダーが無い状態でも常に申し込めるようにするためのもの。見た目はヘッダーの .spCta と同じ。 ⚠️ z-index は 70。告知バー(60)より上、**モーダル(.pmOv 1200)より下**にすること ＝登壇者のプロフィールを開いたときにボタンが浮いて残ると邪魔になる。 ⚠️ カスタムカーソル（.curDot / .curRing は 9998）はこのボタンの上に出るのが正しい。 ⚠️ 影は「押せるもの」の約束（.btn.primary と同じ var(--glow)）に揃えている */ .fixCta{position:fixed;right:clamp(14px,2.2vw,28px);bottom:clamp(14px,2.2vw,28px);z-index:70; background:var(--pop);color:var(--pop-ink);font-weight:800;font-size:15px;letter-spacing:.06em; text-decoration:none;padding:14px 26px;border-radius:99px;white-space:nowrap; box-shadow:0 0 34px var(--glow),0 10px 30px rgba(0,0,0,.45); transition:filter .3s ease,transform .3s ease,box-shadow .35s ease} .fixCta:hover{filter:brightness(1.12);transform:translateY(-2px)} .fixCta:focus-visible{outline:2px solid var(--acc2);outline-offset:3px} /* ⚠️ 既定は**隠す**。main.js がヒーローを抜けたところで .on を付ける。 常時表示にすると、ファーストビューで「開幕祭に申し込む」が3つ（ヘッダー右上／ヒーロー中央／右下） 並ぶうえ、**データバーの「VENUE 東京藝術大学（上野キャンパス）」に重なって隠してしまう** （.databar は .hero の中の position:absolute なのでヒーローの底に張り付いている）。 ⚠️ visibility も切ること。opacity:0 だけだと**見えないボタンがクリックを奪う**。 ⚠️ JS が動かない環境では main.js が .on を付けたまま（＝常に表示）にフォールバックする */ .fixCta{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(8px)} .fixCta.on{opacity:1;visibility:visible;pointer-events:auto;transform:none} .fixCta.on:hover{transform:translateY(-2px)} .btn:focus-visible,.spCta:focus-visible,nav a:focus-visible{outline:2px solid var(--acc2);outline-offset:3px} /* 言語切り替え */ .lang{display:flex;align-items:center;gap:6px;font-family:var(--cond);font-size:14px;letter-spacing:.1em;color:var(--faint)} .lang button{background:none;border:none;padding:4px 2px;cursor:pointer;font:inherit;color:var(--faint);letter-spacing:.1em} .lang button[aria-pressed="true"]{color:var(--acc2);border-bottom:1px solid var(--acc)} .lang button:hover{color:var(--text)} .lang button:focus-visible{outline:2px solid var(--acc2);outline-offset:2px} /* 中間幅（940〜1200px）はナビの間隔と字を詰めて1行に収める（広げた gap のまま入れると折り返してロゴに重なる） */ @media(max-width:1200px){nav{gap:15px}nav a{font-size:13px;letter-spacing:.1em}} @media(max-width:940px){nav{display:none}.hd{grid-template-columns:auto auto;justify-content:space-between}} /* ============ HERO ============ */ /* ⚠️ ヒーローの高さは「1画面 − 告知バー」（設計方針）。 最下部のデータバー（開幕祭までのカウントダウン／会場／コンテスト条件）を **最初の画面に収める** ための計算。100vh のままだと、上に積まれた告知バーのぶんだけ 帯が画面の下に押し出される。 --above は言語や画面幅で告知バーが折り返すと変わるので main.js が実測値を入れる （CSS 側の 40px はJSが走る前／失敗時のフォールバック）。 svh を使うのは、モバイルでURLバーが出ている状態でも溢れさせないため。 svh 非対応のブラウザは1行目の vh 版が生きる */ .hero{position:relative;min-height:calc(100vh - var(--above,40px));min-height:calc(100svh - var(--above,40px));display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;isolation:isolate} .hero video,.hero .vfallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3} .hero .vfallback{background:url(../img/poster.jpg) center/cover no-repeat} .hero::before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(ellipse at center,rgba(7,11,17,.18) 0%,rgba(7,11,17,.66) 78%,rgba(7,11,17,.94) 100%)} .hero::after{content:"";position:absolute;inset:auto 0 0 0;height:34vh;z-index:-1;background:linear-gradient(180deg,transparent,var(--ink))} /* ⚠️ ピルの位置を上げるとき（設計方針）は、padding-top を減らしたぶんだけ h1 の margin-top を増やす。`.hero` は flex で上下中央寄せなので、箱の高さを変えずに 中身の間隔だけ動かすと **タイトルは動かさずピルだけ上へ** 逃がせる */ /* ピル〜CTA の縦の間隔は **画面の高さ（svh）に追従** させる（設計方針）。 ヒーローが1画面ぶんより低くなったので、固定px のままだと中身が入りきらず データバーを下へ押し出してしまう。 ⚠️ 下余白は **必ずデータバーの高さ＋26px 以上** にする。データバーは絶対配置で ヒーローの底に貼りついているため、下回るとCTAのボタンに重なる （--dbh は main.js が実測値を入れる。帯の高さは幅と言語で 90〜195px と幅がある） */ .heroIn{padding:clamp(16px,3svh,40px) 24px max(clamp(112px,16svh,164px),calc(var(--dbh,90px) + 26px));max-width:1000px} .entryPill{display:inline-flex;align-items:center;gap:.5em;border:1px solid var(--acc);border-radius:99px;color:var(--acc2);font-size:var(--sub-size);font-weight:600;letter-spacing:.12em;padding:.35em .9em;background:rgba(7,11,17,.5);backdrop-filter:blur(6px);font-family:var(--cond);text-transform:uppercase;white-space:nowrap;max-width:100%} .entryPill::before{flex:0 0 auto} .entryPill::before{content:"";width:.28em;height:.28em;border-radius:50%;background:var(--acc);box-shadow:0 0 10px var(--glow);animation:blink 4.5s ease-in-out infinite} @keyframes blink{0%,100%{opacity:1}50%{opacity:.55}} /* タイトルは支給ロゴの画像（旧：Oswald の文字組み＋黄色の縁取り）。 ロゴ自体に「AI FILM CONTEST」が入っているので、上のピルからは同じ文字を外してある。 ⚠️ グリッチの残像は文字（attr(data-text)）ではなく **同じ画像を mask にしたシルエット** で出す。 画像を差し替えるときは style.css 内の url(../img/rc-title.png) も一緒に直すこと（3箇所） */ h1.title{margin:clamp(18px,3.6svh,50px) 0 clamp(12px,2.2svh,26px);line-height:0} h1.title img{display:block;width:clamp(260px,62vw,940px);height:auto;margin:0 auto} /* ---- タイトルのグリッチ出現（設計方針・強化版） ---- 6層の重ね合わせで、走査が乱れた映像が結像するように見せる。 1) h1 自体を glShake で細かく揺らす（画面ブレ） 2) .gl 本体 = clip-path のスライス＋横ジッター＋点滅（steps でデジタルに飛ばす） 3) .gl::before / ::after = 色ズレの残像（テーマ色 と --ghost2＝もう一方のブランド色） 4) .ln::before = 大きく横へ飛ぶ「引き裂き」コピー（塗りベタ・本体の背面） 5) .ln::after = 走査線のフラッシュ（左右フルブリード） 6) h1::after = 青と黄のブロックノイズ帯 タイミングは body.loaded を基点に タイトル(0.18s〜1.4s) → サブタイトル(1.2s〜) → CTA(1.75s〜)。 激しさを弱めるなら各キーフレームの translate3d と skewX を小さくする。 */ h1.title{position:relative} .loaded h1.title{animation:glShake 1.3s steps(1,end) .18s} h1 .ln{display:block;position:relative} h1 .ln .gl{display:inline-block;position:relative;opacity:0;will-change:transform,clip-path} .loaded h1 .ln .gl{animation:glIn 1.28s steps(1,end) .18s forwards} /* 色ズレの残像。ロゴ画像を mask にして、テーマ色ともう一方のブランド色のシルエットを重ねる */ h1 .ln .gl::before,h1 .ln .gl::after{content:"";position:absolute;left:0;top:0;width:100%;height:100%; opacity:0;pointer-events:none; -webkit-mask:url(../img/rc-title.png) center/100% 100% no-repeat; mask:url(../img/rc-title.png) center/100% 100% no-repeat} h1 .ln .gl::before{background:var(--acc)} h1 .ln .gl::after{background:var(--ghost2)} .loaded h1 .ln .gl::before{animation:glGhostA 1.15s steps(1,end) .18s forwards} .loaded h1 .ln .gl::after{animation:glGhostB 1.15s steps(1,end) .22s forwards} /* 引き裂きコピー（本体の背面で大きく横へ飛ぶ） */ /* ⚠️ 中央寄せに transform は使えない（glTear が transform をアニメーションするため上書きされる）。 left/right:0 + margin:auto で寄せる */ h1 .ln::before{content:"";position:absolute;left:0;right:0;top:0;margin:0 auto; width:clamp(260px,62vw,940px);height:100%; opacity:0;pointer-events:none;background:var(--pop-pale); -webkit-mask:url(../img/rc-title.png) center/100% 100% no-repeat; mask:url(../img/rc-title.png) center/100% 100% no-repeat} .loaded h1 .ln::before{animation:glTear 1.2s steps(1,end) .2s forwards} /* 走査線のフラッシュ（結像中だけ・左右フルブリード） */ h1 .ln::after{content:"";position:absolute;inset:-16% -50vw;pointer-events:none;opacity:0;mix-blend-mode:screen; background:repeating-linear-gradient(180deg,rgba(238,244,250,.22) 0 2px,transparent 2px 6px)} .loaded h1 .ln::after{animation:glScan 1.2s steps(1,end) .18s forwards} /* ブロックノイズ帯（青×黄） */ h1.title::after{content:"";position:absolute;top:-8%;height:116%;left:-50vw;right:-50vw;pointer-events:none;opacity:0; mix-blend-mode:screen; background:repeating-linear-gradient(180deg,rgba(63,169,255,.34) 0 3px,transparent 3px 10px,rgba(255,199,44,.26) 10px 14px,transparent 14px 26px)} .loaded h1.title::after{animation:glBlocks 1.1s steps(1,end) .18s forwards} @keyframes glShake{ 0%{transform:none} 3%{transform:translate3d(7px,-4px,0)} 7%{transform:translate3d(-6px,3px,0)} 11%{transform:translate3d(5px,2px,0)} 16%{transform:translate3d(-7px,-2px,0)} 21%{transform:translate3d(4px,3px,0)} 27%{transform:translate3d(-5px,-3px,0)} 33%{transform:translate3d(6px,1px,0)} 40%{transform:translate3d(-4px,2px,0)} 47%{transform:translate3d(3px,-2px,0)} 55%{transform:translate3d(-3px,1px,0)} 64%{transform:translate3d(2px,1px,0)} 74%{transform:translate3d(-2px,0,0)} 85%{transform:translate3d(1px,0,0)} 100%{transform:none} } @keyframes glIn{ 0% {opacity:0;clip-path:inset(44% 0 52% 0);transform:translate3d(-36px,0,0) skewX(-20deg)} 4% {opacity:1;clip-path:inset(44% 0 52% 0);transform:translate3d(-36px,0,0) skewX(-20deg)} 7% {opacity:1;clip-path:inset(4% 0 80% 0);transform:translate3d(30px,-3px,0) skewX(16deg) scaleX(1.07)} 10% {opacity:0} 13% {opacity:1;clip-path:inset(68% 0 8% 0);transform:translate3d(-28px,3px,0) skewX(-11deg)} 16% {opacity:1;clip-path:inset(18% 0 62% 0);transform:translate3d(32px,0,0) skewX(10deg)} 19% {opacity:.3;clip-path:none;transform:translate3d(-13px,0,0) scaleY(1.09)} 23% {opacity:1;clip-path:inset(52% 0 26% 0);transform:translate3d(24px,-3px,0) skewX(-13deg)} 27% {opacity:0} 30% {opacity:1;clip-path:inset(8% 0 66% 0);transform:translate3d(-26px,2px,0) skewX(8deg)} 34% {opacity:1;clip-path:inset(78% 0 2% 0);transform:translate3d(20px,0,0) scaleX(1.04)} 38% {opacity:1;clip-path:inset(28% 0 48% 0);transform:translate3d(-22px,0,0) skewX(-7deg)} 42% {opacity:.45;clip-path:none;transform:translate3d(11px,0,0)} 46% {opacity:1;clip-path:inset(60% 0 18% 0);transform:translate3d(-17px,2px,0)} 50% {opacity:0} 54% {opacity:1;clip-path:inset(12% 0 58% 0);transform:translate3d(15px,-2px,0) skewX(6deg)} 59% {opacity:1;clip-path:inset(40% 0 34% 0);transform:translate3d(-12px,0,0)} 64% {opacity:1;clip-path:none;transform:translate3d(9px,0,0)} 69% {opacity:1;clip-path:inset(72% 0 6% 0);transform:translate3d(-8px,0,0)} 74% {opacity:1;clip-path:none;transform:translate3d(6px,0,0) skewX(-3deg)} 79% {opacity:1;clip-path:inset(20% 0 56% 0);transform:translate3d(-5px,0,0)} 84% {opacity:1;clip-path:none;transform:translate3d(3px,0,0)} 90% {opacity:1;clip-path:inset(50% 0 42% 0);transform:translate3d(-2px,0,0)} 95% {opacity:1;clip-path:none;transform:translate3d(1px,0,0)} 100%{opacity:1;clip-path:none;transform:none} } @keyframes glGhostA{ 0% {opacity:0} 4% {opacity:1;transform:translate3d(-30px,-6px,0);clip-path:inset(8% 0 60% 0)} 10% {opacity:.85;transform:translate3d(26px,5px,0);clip-path:inset(52% 0 12% 0)} 16% {opacity:0} 22% {opacity:.9;transform:translate3d(-22px,4px,0);clip-path:inset(24% 0 40% 0)} 29% {opacity:.6;transform:translate3d(18px,-4px,0);clip-path:none} 36% {opacity:.85;transform:translate3d(-16px,3px,0);clip-path:inset(70% 0 6% 0)} 44% {opacity:0} 51% {opacity:.8;transform:translate3d(13px,-3px,0);clip-path:inset(14% 0 58% 0)} 59% {opacity:.55;transform:translate3d(-10px,2px,0);clip-path:none} 68% {opacity:.6;transform:translate3d(7px,0,0);clip-path:inset(44% 0 32% 0)} 78% {opacity:.35;transform:translate3d(-4px,0,0);clip-path:none} 88% {opacity:.18;transform:translate3d(2px,0,0)} 100%{opacity:0;transform:none;clip-path:none} } @keyframes glGhostB{ 0% {opacity:0} 5% {opacity:.95;transform:translate3d(32px,6px,0);clip-path:inset(30% 0 34% 0)} 11% {opacity:.8;transform:translate3d(-28px,-5px,0);clip-path:inset(4% 0 78% 0)} 18% {opacity:0} 24% {opacity:.85;transform:translate3d(24px,-4px,0);clip-path:inset(60% 0 10% 0)} 31% {opacity:.55;transform:translate3d(-19px,3px,0);clip-path:none} 39% {opacity:.8;transform:translate3d(15px,-2px,0);clip-path:inset(16% 0 56% 0)} 47% {opacity:0} 54% {opacity:.75;transform:translate3d(-12px,2px,0);clip-path:inset(66% 0 12% 0)} 62% {opacity:.5;transform:translate3d(9px,0,0);clip-path:none} 71% {opacity:.55;transform:translate3d(-6px,0,0);clip-path:inset(34% 0 44% 0)} 81% {opacity:.3;transform:translate3d(3px,0,0);clip-path:none} 90% {opacity:.15;transform:translate3d(-1px,0,0)} 100%{opacity:0;transform:none;clip-path:none} } @keyframes glTear{ 0%,3%{opacity:0} 6% {opacity:1;clip-path:inset(34% 0 56% 0);transform:translate3d(-58px,0,0)} 10% {opacity:0} 14% {opacity:1;clip-path:inset(58% 0 30% 0);transform:translate3d(52px,0,0)} 18% {opacity:0} 24% {opacity:1;clip-path:inset(12% 0 74% 0);transform:translate3d(-44px,0,0)} 29% {opacity:0} 36% {opacity:1;clip-path:inset(70% 0 16% 0);transform:translate3d(38px,0,0)} 41% {opacity:0} 49% {opacity:1;clip-path:inset(26% 0 60% 0);transform:translate3d(-30px,0,0)} 54% {opacity:0} 62% {opacity:1;clip-path:inset(46% 0 44% 0);transform:translate3d(22px,0,0)} 67% {opacity:0} 76% {opacity:1;clip-path:inset(62% 0 26% 0);transform:translate3d(-12px,0,0)} 81%,100%{opacity:0} } @keyframes glScan{ 0%,2%{opacity:0} 5% {opacity:.75;background-position:0 0} 9% {opacity:.2;background-position:0 -7px} 14% {opacity:.7;background-position:0 4px} 20% {opacity:.14;background-position:0 -3px} 27% {opacity:.62;background-position:0 9px} 35% {opacity:.16;background-position:0 -6px} 45% {opacity:.5;background-position:0 3px} 56% {opacity:.12;background-position:0 -2px} 67% {opacity:.34;background-position:0 5px} 80% {opacity:.1} 90%{opacity:.05} 100%{opacity:0} } @keyframes glBlocks{ 0%,3%{opacity:0} 6% {opacity:.9;background-position:0 0} 10% {opacity:0} 15% {opacity:.75;background-position:0 -13px} 20% {opacity:0} 27% {opacity:.8;background-position:0 8px} 33% {opacity:0} 42% {opacity:.6;background-position:0 -6px} 50% {opacity:0} 60% {opacity:.42;background-position:0 11px} 70% {opacity:0} 80% {opacity:.24;background-position:0 -4px} 88%,100%{opacity:0} } /* サブタイトル：グリッチが収まってから、下からふわっとゆっくり上がる（設計方針） */ .subline{font-family:"Zen Kaku Gothic New",var(--goth);font-weight:700;font-size:clamp(17px,2.7vw,31px);letter-spacing:.34em;text-indent:.34em;white-space:nowrap;color:var(--text);margin:0 0 clamp(16px,3svh,38px); opacity:0;transform:translateY(40px);filter:blur(4px); transition:opacity 1.4s ease 1.25s,transform 1.7s cubic-bezier(.16,1,.3,1) 1.25s,filter 1.4s ease 1.25s} .loaded .subline{opacity:1;transform:none;filter:none} @media(max-width:600px){.subline{letter-spacing:.16em;text-indent:.16em}} .heroFade{opacity:0;transform:translateY(14px);transition:opacity .8s ease .5s,transform .8s ease .5s} .loaded .heroFade{opacity:1;transform:none} .ctas{display:flex;justify-content:center;flex-wrap:wrap;gap:14px} /* ⚠️ text-align は必ず自分で持つこと（りあ指摘 2026-08-07）。 親から継承させていたため、text-align:center を持たない章（Chapter 04 の「コンテスト事前申込」・ Chapter 05 の「開幕祭に申し込む」）ではラベルが左寄せのままだった。 PCは中身の幅ぴったりなので露見せず、**モバイルで幅100%に伸ばしたときだけ** 文字が左に寄って見えていた（390px 実測で 35px / 42px のズレ） */ .btn{display:inline-block;text-align:center;font-weight:800;font-size:15.5px;letter-spacing:.08em;text-decoration:none;padding:17px 42px;border-radius:99px;border:1px solid transparent} /* ヒーローのCTAはタイトルと同サイズ（設計方針）。小さくしたいときは --ttl-size ではなく下記 font-size を変える */ .heroIn .ctas{gap:.7em;transition-delay:1.8s} /* サブタイトルが上がりきってから出す */ .heroIn .btn{font-size:var(--cta-size);font-weight:800;letter-spacing:.06em;padding:.78em 1.95em;white-space:nowrap;max-width:100%} .btn.primary{background:var(--pop);color:var(--pop-ink);box-shadow:0 0 34px var(--glow)} .btn.primary:hover{filter:brightness(1.12)} .btn.ghost{border-color:rgba(238,244,250,.4);color:var(--text);background:rgba(7,11,17,.35);backdrop-filter:blur(6px)} .btn.ghost:hover{border-color:var(--acc2);color:var(--acc2)} /* --- 背の低いノートPC（1366×768 など＝ブラウザの表示領域が660px前後）--- 間隔を svh で詰めるだけでは足りず、実測でデータバーが77pxはみ出していた。 この高さではロゴと文字も一段小さくして、データバーまでを1画面に収める。 ⚠️ 820px 以下はモバイル用の指定が別にあるので min-width で除外している。 ⚠️ h1 の引き裂きコピー（.ln::before）はロゴ画像と同じ幅にすること */ @media(min-width:821px) and (max-height:770px){ h1.title img,h1 .ln::before{width:clamp(260px,48vw,720px)} .entryPill{font-size:clamp(15px,2vw,23px)} .subline{font-size:clamp(15px,2vw,23px)} .heroIn .btn{font-size:clamp(14px,1.7vw,19px)} } /* ⚠️ 「Scroll」の誘導は 2026-08-07 に非表示化（データバーを1画面に収めた副作用）。 ヒーローが1画面ぶんに縮み、CTAとデータバーの間が実測68pxしか残らないため、 高さ80pxのこの誘導は必ずどちらかに重なる。データバー自体が画面の下端に帯として 出ているので「まだ下がある」ことは伝わる、と判断して畳んだ。 戻すときは下の display:none の1語を消せばよい（位置とアニメーションは残してある）。 モバイル（820px以下）と reduced-motion では元から非表示 */ .scrollcue{display:none;position:absolute;bottom:110px;left:50%;transform:translateX(-50%);font-size:14px;letter-spacing:.3em;color:var(--faint)} /* heroFade の transform に中央寄せを潰されないよう、専用に上書きする */ .scrollcue.heroFade{transform:translate(-50%,14px)} .loaded .scrollcue.heroFade{transform:translateX(-50%);transition-delay:2.1s} .scrollcue::after{content:"";display:block;width:1px;height:44px;margin:8px auto 0;background:linear-gradient(var(--acc),transparent);animation:cue 1.8s infinite} @keyframes cue{from{transform:scaleY(0);transform-origin:top}to{transform:scaleY(1);transform-origin:top}} /* データバー */ .databar{position:absolute;left:0;right:0;bottom:0;background:rgba(5,8,12,.72);backdrop-filter:blur(10px);border-top:1px solid rgba(44,62,82,.6)} /* 3区画（左＝開幕祭までのカウントダウン／中央＝開催場所／右＝コンテストの条件）を **縦の罫線**で分ける。見出し（OPENING DAY / CONTEST）は置かない（設計方針）。 文字サイズは「ラベル12px ／ 値16px ／ カウントダウンの数字32px」の3段だけに整理した */ /* 開催場所を「帯のど真ん中」に置くため、両側を 1fr の同じ幅の列にして中央列を auto にする。 flex の space-between だと、右の区画を畳んだ幅（1250px以下）で中央がずれる */ /* 罫線は「区画の縁」ではなく **区画と区画のちょうど真ん中** に置く（設計方針）。 中央の区画に border を持たせると、罫線が開催場所のすぐ脇に貼りついてカウントダウンから 遠く離れてしまう（実測で左は 75px、右は 68px ずれていた）。 そこで左右の区画を列いっぱいに広げ、罫線を独立した要素 .dsep として `margin-left:auto; margin-right:auto` で置く。flex は余りをこの2つの auto へ均等に配るので、 罫線は必ず「隣の区画との空白のど真ん中」に来る。grid の gap は 0 にして空白を全部この計算に渡す */ .databar .in{padding:12px clamp(20px,3vw,48px);display:grid; grid-template-columns:1fr auto 1fr;align-items:center;gap:0} .dgrp{display:flex;align-items:center;min-width:0} .dgrp.dgL,.dgrp.dgR{justify-self:stretch} .dgrp.dgC{justify-self:center} /* 区画の中身はこの箱でまとめる（.dgrp 直下は「中身＋罫線」の2つだけにする） */ .dgIn{display:flex;align-items:center;gap:clamp(14px,2vw,26px);min-width:0} .dgR .dgIn{gap:clamp(18px,2.4vw,34px)} .dsep{flex:0 0 auto;width:1px;height:40px;margin-left:auto;margin-right:auto; background:linear-gradient(rgba(90,112,138,0),rgba(90,112,138,.55) 22%,rgba(90,112,138,.55) 78%,rgba(90,112,138,0))} .cdLbl{font-size:12px;letter-spacing:.14em;color:var(--faint);line-height:1.6;white-space:nowrap} .cdNum{display:flex;gap:16px;font-variant-numeric:tabular-nums} /* 数字を光らせる（開幕祭セクションの .bigCd と同じ見せ方に揃える）。 ゆっくり明滅させて「時間が動いている」感じを出す */ .cdNum b{font-family:var(--cond);font-size:32px;font-weight:600;color:var(--acc2);line-height:1; text-shadow:0 0 26px var(--glow);animation:cdPulse 3.8s ease-in-out infinite} @keyframes cdPulse{ 0%,100%{text-shadow:0 0 16px var(--glow)} 50%{text-shadow:0 0 34px var(--glow),0 0 7px rgba(255,255,255,.28)} } .cdNum span{display:block;font-size:11.5px;letter-spacing:.1em;color:var(--faint);text-align:center;margin-top:3px} /* ⭐ 小見出し（Deadline / Categories …）と値は必ず中央で揃える（りあ指示 2026-08-13）。 以前は right 揃えだったので、小見出しと値の文字幅が違う分だけ値が右へ寄って見えていた （実測＝CATEGORIES 84px に対して「2部門」43px で、左に 41px の空きができていた）。 ⚠️ 開催場所の `.dcell.dvenue` にも同じ中央揃えが要るので、個別指定は置かずここで一括にしている */ .dcell{text-align:center;flex:0 0 auto} .dcell small{display:block;font-size:12px;letter-spacing:.16em;color:var(--faint);margin-bottom:3px} .dcell b{font-size:16px;font-weight:800;letter-spacing:.04em;white-space:nowrap} /* ⭐ 右の区画（Deadline / Categories）の値は、左のカウントダウンの数字と同じ書体にする（りあ指示 2026-08-13）。 帯の左右で数字の見え方が違っていたのを揃えるのが目的。 ⚠️ font-weight も 600 にすること。Oswald は 500/600 しか読み込んでいないので（index.html の Google Fonts）、 既定の 800 のままだと合成太字（faux bold）になってカウントダウンと太さが揃わない。 ⚠️ 開催場所（.dvenue）には当てない。日本語しか入らないので Oswald は出番がなく、 指定しても Noto Sans JP にフォールバックするだけで太さだけが変わってしまう */ .dgR .dcell b{font-family:var(--cond);font-weight:600} /* 開催場所を真ん中に置いたまま右のコンテスト条件まで並べるには 1250px 以上が要る。 それ以下ではコンテスト条件を畳み、開催場所を帯の中央へ寄せる（実測でこの幅） */ /* 開催場所を真ん中に置いたまま右のコンテスト条件まで並べるには 1250px 以上が要る。 それ以下では右の区画を畳む。列の定義（1fr auto 1fr）は残るので中央はずれない（実測） */ @media(max-width:1250px){ /* コンテストの条件を畳む。区画が2つになると「開催場所を帯のど真ん中」は意味を失い、 左の列がカウントダウンでちょうど埋まって罫線の逃げ場が無くなる（900px 実測で余白 0px）。 ここからは2区画を1組として帯の中央に置き、罫線は左右に同じ余白を取って中央に立てる */ .dgrp.dgR{display:none} .databar .in{grid-template-columns:auto auto;justify-content:center} .dgrp.dgL{justify-self:end} .dsep{margin-left:clamp(20px,3.4vw,48px);margin-right:clamp(20px,3.4vw,48px)} } @media(max-width:820px){ /* 横に並べきれないので縦積みにし、区画の区切りは縦罫ではなく横罫にする */ .databar .in{grid-template-columns:minmax(0,1fr);justify-content:stretch;row-gap:9px} .dsep{display:none} .dgrp.dgL{justify-self:stretch;justify-content:center} .dgrp.dgC{justify-self:stretch;justify-content:center; padding:9px 0 0;border-top:1px solid rgba(90,112,138,.42)} /* .dcell は既定で flex:0 0 auto なので、これを外さないと折り返せず横にはみ出す */ .dcell.dvenue{flex:1 1 auto;min-width:0} .dcell.dvenue b{white-space:normal;line-height:1.5} } /* マーキー */ .marquee{background:var(--pop);color:var(--pop-ink);overflow:hidden;white-space:nowrap;padding:13px 0;font-weight:600;font-size:14px;letter-spacing:.22em;font-family:var(--cond)} .marquee .track{display:inline-block;animation:mq 30s linear infinite} .marquee span{margin:0 30px} @keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* ============ 章見出し ============ */ section{padding:130px 0;position:relative} .chapter{text-align:center;margin-bottom:70px} .chapter .no{font-family:var(--cond);font-size:14px;letter-spacing:.32em;color:var(--acc);font-weight:500} .chapter .no::before,.chapter .no::after{content:"—";margin:0 14px;color:var(--line2)} .chapter .big{font-family:var(--cond);font-weight:600;font-size:clamp(42px,7vw,88px);letter-spacing:.06em;line-height:1.08;margin:12px 0 10px;text-transform:uppercase} .chapter .jp{font-size:16px;color:var(--muted);letter-spacing:.22em} /* ============ NEWS ============ */ .newsList{border-top:1px solid var(--line)} .newsRow{display:grid;grid-template-columns:130px 1fr 26px;gap:26px;align-items:center;padding:24px 8px;border-bottom:1px solid var(--line);text-decoration:none;transition:background .25s} .newsRow .date{font-family:var(--cond);letter-spacing:.16em;color:var(--acc2);font-size:16px;font-variant-numeric:tabular-nums;font-weight:500} .newsRow .t{font-size:17px;font-weight:700;line-height:1.7} .newsRow .t small{display:block;font-weight:400;color:var(--faint);font-size:14px;margin-top:3px} .newsRow .ar{color:var(--acc);font-weight:700} /* ============ CONCEPT（明朝の詩） ============ */ .poem{font-family:var(--serif);text-align:center;font-size:clamp(18px,2.7vw,28px);line-height:2.6;letter-spacing:.13em;font-weight:500} .poem .l{display:block;opacity:0;transform:translateY(16px);transition:opacity 1s ease,transform 1s ease} .poem.in .l{opacity:1;transform:none} .poem.in .l:nth-child(2){transition-delay:.35s} .poem.in .l:nth-child(3){transition-delay:.7s} .poem.in .l:nth-child(4){transition-delay:1.05s} .poem .l:nth-child(4){color:var(--acc2)} .poem .yr{font-family:var(--cond);letter-spacing:.18em;color:var(--acc);font-size:.82em;margin-right:.6em;font-weight:500} .principles{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;margin-top:90px} .pr{text-align:center} .pr .en{font-size:14px;color:var(--acc);letter-spacing:.2em} .pr h3{font-size:21px;font-weight:800;margin:14px 0 12px} .pr p{font-size:15px;color:var(--muted);margin:0;text-align:left;line-height:2.1} .pr::before{content:"";display:block;width:1px;height:44px;background:linear-gradient(transparent,var(--acc));margin:0 auto 20px} @media(max-width:860px){.principles{grid-template-columns:1fr;gap:40px}} /* ============ ORIGIN（1987年の原典紹介・左に画像／右に説明） ============ */ /* 狙い＝「左の画像と右のカードを同じ高さに見せる」（設計方針）。 ・2カラムを align-items:stretch にして行の高さを共有させ、ポスターは比率を保ったまま その高さいっぱいまで大きくなる（object-fit ではなく max-height/max-width で効かせている）。 ・高さがぴったり一致するのは「ポスターの幅が上限に当たる直前」＝画面が広いときだけ。 画面が狭くなると幅が先に当たってポスターが小さくなり、上下に余白が出る。 ただし **枠も背景も付けていないので余白は見えない**（ポスターとキャプションが縦中央に寄るだけ）。 これが「1400px未満でも崩れない」ための作り。 ⭐ 2026-08-13 に**ポスターを小さくした**（りあ指示）。原典の紹介を1文に絞った結果、 右のテキストは中身 374px（日本語・実測）まで減り、918px のポスターが相対的に大きすぎたため。 **918px → 520px（-43%）**。経緯は README「原典の紹介は1文まで」を参照。 ⚠️ この style.css は公開サイトへそのまま配信される。**やり取りの中身はここに書かないこと**。 ・効かせているのは `.originPoster` の **`max-height:520px`（絶対値）**。 ⚠️ `min(calc(100% - 56px),520px)` と書くと **行の高さが縮まない**。`calc(100% - 56px)` は 親の高さが未定のあいだ解決できず、grid が行の高さを決めるときは幅から出した元の高さ（623px）で 寄与するため、ポスターだけ小さくなって右の箱に 123px の空きが残る（実測）。**絶対値で書くこと。** ・幅も詰めた＝`--ow` を 1340px → **1160px**（.wrap と同じ）、列比を 1.112:1 → **0.72:1**。 ⚠️ **列比だけ変えると右のテキストが 822px まで広がって1行が長くなる**ので、`--ow` とセットで動かす。 これで右は 611px → 646px とほぼ据え置き。 ・行の高さは **561px**＝ポスター520 ＋ キャプション25 ＋ gap16 で決まり、テキストはその中で縦中央。 ポスターの大きさは**言語を切り替えても変わらない**（絶対値で頭打ちのため）。 ・食み出しは無くなったが、`--ow` の仕組みはそのまま残してある（また広げたくなったら値だけ戻せる）。 */ .originWrap{--ow:min(1160px,calc(100vw - 56px));width:var(--ow); margin-inline:calc((100% - var(--ow)) / 2)} .origin{display:grid;grid-template-columns:minmax(0,0.72fr) minmax(0,1fr);gap:clamp(28px,3.4vw,52px); align-items:stretch;margin:0 auto 92px} /* 左＝画像だけ。枠・背景・傾きは付けない */ .originArt{margin:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:16px} .originArt .originPoster{max-width:100%;max-height:520px;width:auto;height:auto; border:1px solid rgba(238,244,250,.14);box-shadow:0 26px 72px rgba(0,0,0,.72); transition:transform .9s cubic-bezier(.16,1,.3,1),box-shadow .9s ease} .originArt:hover .originPoster{transform:translateY(-6px);box-shadow:0 36px 92px rgba(0,0,0,.8)} .originArt figcaption{font-size:14px;color:var(--faint);letter-spacing:.1em;text-align:center;line-height:1.8} /* ⭐ 中身は縦中央に置く（2026-08-13）。この箱の高さは**左のポスター側**で決まる （行の高さ 561px＝ポスター520＋キャプション25＋gap16。上の .origin のコメント参照）ので、 中身が短いと既定の stretch では下だけに空きが出る。原典の紹介を1文に絞った結果、 中身が 374px（日本語）まで減って**下だけに空白**ができていた。 縦中央にしたので、いまは上下に 64px ずつ（英語は 50px ずつ）。 ⚠️ 空きを埋めるために原典の紹介を書き足さないこと（README「原典の紹介は1文まで」）。 */ .originTxt{background:linear-gradient(158deg,rgba(16,23,36,.92),rgba(11,16,25,.6)); border:1px solid var(--line);padding:clamp(26px,3.2vw,44px); display:flex;flex-direction:column;justify-content:center} .originTxt .en{font-size:14px;color:var(--acc);letter-spacing:.24em} .originTxt h3{font-family:var(--serif);font-size:clamp(18px,2vw,24px);font-weight:600;letter-spacing:.08em; line-height:1.9;margin:13px 0 20px;text-wrap:balance} .originTxt p{font-size:14.5px;color:var(--muted);line-height:1.95;margin:0 0 14px} .originTxt p em{font-style:normal;color:var(--acc2);font-weight:700} /* 商標と許諾の注記。 ⚠️ 罫（border-top）は以前この上にあった諸元表が持っていたもの。2026-08-13 に**表ごと外した**ので、 区切りの役目をここへ移してある。この位置に諸元を足し直さないこと （理由は README「原典の紹介は1文まで」を参照） */ .originTxt .originNote{font-size:14px;color:var(--faint);margin:22px 0 0;line-height:1.95; padding-top:20px;border-top:1px solid var(--line)} @media(max-width:860px){ .originWrap{--ow:100%;margin-inline:0} .origin{grid-template-columns:1fr;gap:30px} .originArt{display:block;max-width:380px;margin:0 auto} .originArt .originPoster{max-height:none;width:100%;margin-bottom:16px} } /* ============ TEASER ============ */ .teaserSec{background:var(--ink2);border-block:1px solid var(--line)} .player{position:relative;cursor:pointer;box-shadow:0 30px 90px rgba(0,0,0,.5);background:#000} .player img,.player video{width:100%;display:block} .player video{aspect-ratio:16/9} .player.playing{cursor:default} .player.playing .play,.player.playing .dur{opacity:0;pointer-events:none} .player .play,.player .dur{transition:opacity .35s ease} /* ポスターがタイトルカードのため、中央オーバーレイは使わない（ネイティブのコントロールに任せる）。 別のポスターに戻すときは index.html に .play / .dur を戻せば復活する */ .player .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(4,7,11,.18);transition:background .3s} .player:hover .play{background:rgba(4,7,11,0)} .player .play span{width:94px;height:94px;border-radius:50%;background:var(--pop);color:var(--pop-ink);display:flex;align-items:center;justify-content:center;font-size:27px;box-shadow:0 0 44px var(--glow);transition:transform .25s} .player:hover .play span{transform:scale(1.1)} .player .dur{position:absolute;left:20px;bottom:16px;font-size:14px;letter-spacing:.22em;color:#fff;font-family:var(--cond)} .credits{display:flex;flex-wrap:wrap;justify-content:center;gap:0 56px;margin-top:36px;text-align:center} .credits div{padding:8px 0} .credits .en{display:block;font-size:14px;color:var(--faint);letter-spacing:.16em;margin-bottom:5px} .credits b{font-size:16px;font-weight:700;letter-spacing:.06em} .credits .req{display:block;font-size:14px;color:var(--faint)} /* フィルムストリップ */ .filmstrip{overflow:hidden;margin-top:74px} .filmstrip .ft{display:flex;gap:14px;width:max-content;animation:mq 46s linear infinite} .filmstrip img{width:288px;height:162px;object-fit:cover;flex:0 0 auto;border:1px solid var(--line2)} .filmnote{text-align:center;font-size:14px;color:var(--faint);letter-spacing:.18em;margin-top:28px} /* ============ ENTRY ============ */ .req{max-width:840px;margin:0 auto} .reqRow{display:grid;grid-template-columns:200px 1fr;gap:24px;padding:22px 6px;border-bottom:1px solid var(--line);font-size:16px} .reqRow:first-child{border-top:1px solid var(--line)} .reqRow .k{font-size:14px;letter-spacing:.16em;color:var(--faint);font-weight:700;padding-top:4px} .reqRow .v{line-height:2} .reqRow .v b{font-weight:800} /* ============ 状態ラベル（押せないもの）============================================ 「Coming Soon」「予定」「Talk／運営／交流」は、押せるものではなく状態や区分を示すラベル。 丸い枠＋輪郭だと「開幕祭に申し込む」ボタンと同じ形に見えてしまう（設計方針）。 そこで **左上と右下の角を斜めに落とした札** を、このサイトでの「押せないもの」の専用形にする。 ・丸い（border-radius:99px）＝押せる … .btn / .spCta ・斜めに欠けた札 ＝押せない … .soon / .plan / .tag ボタンは角丸か長方形しか使わないので、斜めの欠けが出てきたら状態表示だと形だけで分かる。 ⚠️ ここを触るときは3つセットで直す。1つだけ形が変わると上の約束が崩れる ================================================================================ */ .soon,.plan,.tag{display:inline-block;border:none;border-radius:0;cursor:default; font-family:var(--cond);font-weight:500;text-transform:uppercase; clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)} .soon{font-size:13px;letter-spacing:.18em;padding:3px 12px;margin-left:14px;vertical-align:1px; background:rgba(255,199,44,.15);color:var(--acc2)} /* 「予定」＝8/29の開幕祭で正式発表する暫定項目。Coming Soon（未確定）とは色で区別する */ .plan{font-size:12.5px;letter-spacing:.18em;padding:3px 11px;margin-left:14px;vertical-align:1px; background:rgba(140,158,180,.13);color:var(--muted)} .note{font-size:14px;color:var(--faint);margin-top:20px;text-align:center;letter-spacing:.06em} @media(max-width:640px){.reqRow{grid-template-columns:1fr;gap:4px}} .ladder{position:relative;max-width:780px;margin:84px auto 0} .ladder::before{content:"";position:absolute;left:39px;top:10px;bottom:10px;width:1px;background:linear-gradient(var(--acc),var(--line))} .step{display:grid;grid-template-columns:80px 1fr;gap:28px;padding:28px 0;position:relative} .step .num{font-family:var(--cond);font-weight:600;font-size:46px;color:transparent;-webkit-text-stroke:1.5px var(--acc);line-height:1;background:var(--ink);position:relative;z-index:1;text-align:center;padding:5px 0} .step h3{margin:6px 0 8px;font-size:19.5px;font-weight:800} .step h3 .when{font-family:var(--cond);font-size:14px;letter-spacing:.2em;color:var(--acc2);margin-left:16px;font-weight:500} .step p{margin:0;font-size:15px;color:var(--muted);line-height:2} .step.hot .num{color:var(--pop);-webkit-text-stroke:0} /* Chapter 03 = スケジュール専用の章（旧 Chapter 05 Roadmap を集約したもの） */ .ladder.sched{margin-top:56px} .step h3 .plan{margin-left:12px;vertical-align:1px} .youLbl{text-align:center;font-family:var(--serif);font-size:19px;letter-spacing:.2em;margin-top:76px;color:var(--text);font-weight:600} .youChips{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:26px} .youChips .yc{border:1px solid var(--line2);border-radius:99px;padding:11px 24px;font-size:15px;color:var(--muted)} /* ============ RULES ============ */ /* 旧 Chapter 04「Rules」は Chapter 04「Entry」（応募要項）の行へ畳んだため .rules / .rule は撤去。 帯としての見せ方（1段暗い地＋上下の罫）だけ .reqSec として応募要項セクションに引き継ぐ（2026-08-06） */ .reqSec{background:var(--ink2);border-block:1px solid var(--line)} /* 旧 Chapter 05 ROADMAP の .tl / .ph は撤去（内容は Chapter 03 のスケジュールへ集約・2026-08-06） */ /* ============ SYMPOSIUM ============ */ .sympo{position:relative;overflow:hidden;background:var(--ink2);border-block:1px solid var(--line)} .sympo .bgcity{position:absolute;inset:0;background:url(../img/still-160.jpg) center/cover no-repeat;opacity:.12} .sympo .grad{position:absolute;inset:0;background:linear-gradient(180deg,var(--ink) 0%,transparent 24%,transparent 70%,var(--ink2) 100%)} .sympo .wrap{position:relative} /* 開幕祭を過ぎて「応募締切まで」のカウントに切り替わったときだけ出る見出し（既定は hidden） */ .bigCdLbl{text-align:center;font-size:14px;letter-spacing:.28em;color:var(--faint);margin:0 0 4px} .bigCd{display:flex;justify-content:center;gap:40px;margin:10px 0 52px;font-variant-numeric:tabular-nums} .bigCd .c b{font-family:var(--cond);display:block;font-size:clamp(56px,8vw,100px);font-weight:600;line-height:1;color:var(--acc2);text-shadow:0 0 44px var(--glow)} .bigCd .c span{display:block;text-align:center;font-size:14px;letter-spacing:.2em;color:var(--faint);margin-top:10px} .bigCd .sep{font-family:var(--cond);font-size:clamp(42px,6vw,72px);color:var(--line2);line-height:1.2} .evInfo{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 50px;margin-bottom:64px;text-align:center} .evInfo div{padding:6px 0} .evInfo small{display:block;font-size:14px;letter-spacing:.12em;color:var(--faint);font-family:var(--cond);text-transform:uppercase} .evInfo b{font-size:17px;font-weight:800} .tt{max-width:820px;margin:0 auto} .trow{display:grid;grid-template-columns:170px 1fr auto;gap:22px;padding:17px 8px;border-bottom:1px solid var(--line);align-items:center} .trow:first-child{border-top:1px solid var(--line)} .trow .time{font-family:var(--cond);letter-spacing:.1em;color:var(--acc2);font-weight:500;font-size:16px;font-variant-numeric:tabular-nums} .trow .what b{font-size:16px;font-weight:800} .trow .what small{display:block;color:var(--faint);font-size:14px;margin-top:2px} /* 形（斜めに欠けた札）と共通の指定は「状態ラベル」の節にまとめてある。ここは大きさと色だけ */ .tag{font-size:13.5px;letter-spacing:.2em;padding:5px 15px;background:rgba(140,158,180,.13);color:var(--muted)} .tag.talk{background:rgba(255,199,44,.15);color:var(--acc2)} .ttNote{font-size:14px;color:var(--faint);margin-top:18px;text-align:center;letter-spacing:.08em} @media(max-width:640px){.trow{grid-template-columns:110px 1fr}.tag{display:none}} /* ============ SPEAKERS ============ */ /* --- 登壇者／審査員（シャッフル演出を廃止し、2段の静止した並びへ） --- カードは横1列に流すのをやめ、**折り返して中央に寄る**ふつうの並びにした。 最後の行が半端な枚数でも中央に来るので、人数が増減しても見た目が崩れない */ .spGroup + .spGroup{margin-top:78px} .spHd{display:flex;align-items:center;justify-content:center;gap:18px;margin:0 0 34px} .spHd::before,.spHd::after{content:"";height:1px;width:clamp(28px,6vw,72px);background:var(--line2)} .spHd .en{font-size:12.5px;letter-spacing:.3em;color:var(--acc)} .spHd b{font-size:19px;font-weight:800;letter-spacing:.22em} /* ⭐ 3列で折り返す（りあ指示 2026-08-11）。人数が5名になり、4列だと最後の行が1枚だけになって 間延びするため。3列の幅 = 248×3 + gap24×2 = 792px を .spRow の上限にして折り返しを作る。 ⚠️ .wrap の内側は 1104px あるので、上限を外すと4列に戻る */ .spRow{display:flex;flex-wrap:wrap;justify-content:center;gap:24px;max-width:792px;margin-inline:auto} .spRow .sp{flex:0 0 248px;width:248px} /* ⭐ 登壇者だけ **4枚／3枚／4枚** で並べる（りあ指示 2026-08-14）。 自動の折り返しでは決められないので、`.spRow` を3つに分けて手で組んである （index.html の Chapter 06「登壇者」を参照）。 ・4枚の行 ＝ `.spRow.w4`（248×4 ＋ gap24×3 ＝ 1064px。.wrap の内側 1104px に収まる） ・3枚の行 ＝ `.spRow` のまま（792px）で、中央寄せなので4枚の行の内側に寄る ⚠️ 審査員（6枚）は1つの `.spRow` のままなので 3＋3 で折り返す。**w4 を付けないこと** （付けると 4＋2 になる）。 ⚠️ 人を足し引きしたら行の割り振りも手で直す。自動では戻らない */ .spRow.w4{max-width:1064px} .spRow + .spRow{margin-top:24px} /* 掲載順の注記（設計方針）。五十音順であることと、順位ではないことを小さく添える */ .deckNote{text-align:center;font-size:12.5px;color:var(--faint);letter-spacing:.08em;margin:44px 0 0;line-height:1.8} .sp{text-align:center;transition:filter .5s ease} /* 登壇者カードは押すとプロフィールが開く（設計方針） */ .sp.real[role=button]{cursor:pointer} .sp.real[role=button]:focus-visible{outline:2px solid var(--acc2);outline-offset:4px} .sp .bd{transition:opacity .45s ease} .sp .ph2{aspect-ratio:3/3.4;display:flex;align-items:center;justify-content:center;background:linear-gradient(170deg,var(--surface),var(--ink2));border:1px solid var(--line);position:relative;overflow:hidden} .sp .ph2 b{font-family:var(--serif);font-size:38px;font-weight:600;color:var(--acc2);letter-spacing:.1em} /* 登壇者の顔写真：白背景のポートレートを暗いページに馴染ませる */ .sp .ph2 img{width:100%;height:100%;object-fit:cover;object-position:center 18%; filter:grayscale(.34) brightness(.9) contrast(1.06);transition:filter .5s ease,transform .6s ease} .sp:hover .ph2 img{filter:grayscale(0) brightness(1) contrast(1);transform:scale(1.03)} .sp .ph2:has(img)::after{content:"";position:absolute;inset:auto 0 0 0;height:46%; background:linear-gradient(180deg,transparent,rgba(11,16,25,.92));pointer-events:none} /* ⚠️ 上の余白は詰めてある（りあ指示 2026-08-14）。肩書きを中央寄せにした分だけ 写真と肩書きのあいだが空くので、その埋め合わせ */ .sp .bd{padding:10px 6px 18px} /* 肩書きはプレスリリースの表記に合わせるので、人によって1行〜3行と長さが揃わない （三宅さんの「東京藝術大学 映像研究科…／東京大学生産技術研究所特任教授」で3行）。 3行分の高さを先に確保しておけば、行数が違っても名前の位置が揃う。 ⭐ 箱の中では **中央寄せ**（りあ指示 2026-08-14）。下寄せだと1行の人だけ 写真とのあいだが大きく空いて、横に並べたとき高さが揃って見えなかった */ .sp .role{display:flex;align-items:center;justify-content:center; font-size:13px;color:var(--acc);letter-spacing:.1em;line-height:1.7; font-weight:700;min-height:5.2em} .sp h3{margin:10px 0 8px;font-size:20px;font-weight:800} .sp p{margin:0;font-size:14.5px;color:var(--muted);text-align:left;line-height:1.9} /* ⭐ 一覧のカードには経歴を出さない（りあ指示 2026-08-11）。 カードは「写真＋肩書き＋氏名」までにして、経歴はカードを押して開くモーダルにだけ出す。 ⚠️ 消すのではなく **隠す** こと。main.js の open() は `card.querySelector('.bioFull') || card.querySelector('p')` の textContent を読むので、 この

は DOM に残っていないとモーダルの本文が空になる（.bioFull を持たない人がいる）。 display:none でも textContent は取れる */ .sp .bd > p{display:none} /* イラスト／アイコンを写真として使うカード（松丸さん）はグレースケールと下グラデを掛けない */ /* 肩書きを抱える箱。**箱の高さで氏名の位置をそろえる**（肩書きの行数は人によって違う）。 ⚠️ この style.css は awards の公開サイトへそのまま配信される。 ページに出していない要素の CSS を書き残すと、ソースを見れば分かってしまう。 入れ替えるときは「隠す」ではなく **消す** こと（README「肩書きの上の札」参照）。 ⚠️ min-height は **3言語のうち一番行数が多い肩書き**（英語の三宅さん＝4行）で決める。 13px × 1.7 × 4行 ＝ 88px ＝ 5.5em。日本語・中国語は最大3行（66px）なので余るが、 言語で値を変えることはできない（main.js は を書き換えないので :lang() が効かない）。 短くすると英語のときだけ氏名の高さが 20px ずれる */ .sp .roleWrap{display:flex;flex-direction:column;align-items:center;justify-content:center; gap:18px;min-height:5.5em} /* 高さの確保は .roleWrap が持つので、肩書き自体の min-height は外す */ .sp .roleWrap .role{min-height:0} /* ⭐「追加の登壇者・審査員」（.spGroup.more）は Coming Soon の1枚だけなので、 氏名の高さを揃える相手がいない。min-height をそのまま効かせると 写真と肩書きのあいだに空白が空いて間延びするため、この節だけ外す。 ⚠️ カードを2枚以上並べるようになったら、この打ち消しを消して揃えに戻すこと */ .spGroup.more .sp .roleWrap{min-height:0} @media(max-width:700px){ .sp .roleWrap{min-height:0;gap:14px} } .sp.ill .ph2 img{filter:none} .sp.ill .ph2:has(img)::after{display:none} .sp.tbd .ph2{border-style:dashed;border-color:var(--line2)} .sp.tbd .ph2 b{font-family:var(--cond);font-size:15px;letter-spacing:.24em;color:var(--faint);font-weight:500} .sp.tbd .ph2::after{content:"";position:absolute;width:80px;height:80px;border-radius:50%;background:radial-gradient(circle,var(--glow),transparent 70%);opacity:.5;animation:blink 8s ease-in-out infinite} /* ============ PARTNERS ============ */ /* ---- 流れるロゴ帯（白地・ヒーロー直下）。marquee と同じ mq キーフレームを共用する。 2つの .lgoSet を並べて translateX(-50%) でループさせるので、中身は必ず同じにする ---- */ .logoTicker{background:#fff;overflow:hidden;padding:16px 0;border-bottom:1px solid rgba(0,0,0,.08)} .logoLane{display:flex;width:max-content;animation:mq 46s linear infinite; /* 幅の広い帯をアニメーションさせ続けると、画面外へ出たときに Chrome が描画を捨てて、 戻ってきた瞬間にロゴが消えて見えることがある（実機で確認済み）。 ①レイヤーを明示して安定させる ②画面外では main.js が animation を止める */ will-change:transform;transform:translate3d(0,0,0);backface-visibility:hidden} /* ロゴ間の余白は「セルの幅」ではなく gap で決める（設計方針）。 固定幅のセルに中央寄せしていたため、ロゴごとの絵の余白の差がそのまま隙間の差に見えていた */ .lgoSet{display:flex;align-items:center;flex:0 0 auto;gap:clamp(40px,5.2vw,86px);padding-right:clamp(40px,5.2vw,86px)} .lgo{flex:0 0 auto;width:auto;padding:0;height:78px;display:grid;place-items:center} /* 白ヌキのロゴしか無い社を白い帯に載せるための逃げ道。暗い板を敷いてその上に載せる。 板は帯の高さ（78px）いっぱいにせず、ロゴを抱える大きさで止める（帯を黒い塊で分断しないように）。 同じ考え方の CSS が `.lgTile.onDark` にもある。 ⚠️ **2026-08-17 時点でどのロゴにも当たっていない。** TapNow のために 8/14 に作ったが、 同 17 日に濃色版（`partner-tapnow-dark.png`）を用意して白い板へ載せられるようになったため。 次に白ヌキしか無いロゴが来たときのために残してある */ .lgo.onDark{height:auto;align-self:center;padding:12px 20px;border-radius:8px; background:linear-gradient(160deg,#111827,#0b1019)} /* 横組みのワードマークと縦積みの校章が混在するので、光学的な大きさを揃えるため上限を分ける。 ⭐ 2026-08-14 に**全体を AiHUB の見た目の高さに合わせて縮めた**（りあ指示＝「elevenlabs・AiCOMMU の ロゴをもう少し小さく。AiHUB と同じくらいに。その他もなるべく全体的に AiHUB の高さに合うように」）。 ⚠️⚠️ 原因は **AiHUB の SVG だけ上下に余白を持っていること**。 実測＝`partner-aihub-dark.svg` は viewBox（250×77）に対してインクが **81.25%** しかなく、 上下に 9.4% ずつの余白がある。**他の9枚は全部 100%**（透明な余白を落としてある）。 そのため同じ 34px を当てると、AiHUB の文字だけ 34 × 0.8125 ＝ **27.6px** にしかならず、 隣の ElevenLabs・AiCOMMU（どちらも 34px 丸ごと文字）が 1.23 倍大きく見えていた。 ⭐ そこで **AiHUB のインク高 27.6px を基準**にして、他を 28px へ。旧 34px からの係数 0.812 を .tall / .sq / .mid にも掛けて、これまで実測で決めた光学的な釣り合いは保ったまま全体を縮めた。 ⚠️ **AiHUB の SVG 自体は加工しないこと。** 2026-08-07 に支給版 PNG へ差し替えて 「ロゴの組み方が違う」と差し戻された経緯がある（帯は従来の SVG が正）。 余白は CSS 側（.lgo.pad）で吸収する。 */ .lgo img{height:28px;max-height:28px;width:auto;max-width:none} /* 画像自体が上下に余白を持つもの（＝AiHUB の SVG だけ）。 ⚠️ 余白ぶん大きい値を当てて、**見た目の文字の高さ**を他と揃える。28 ÷ 0.8125 ＝ 34px。 新しいロゴを足すときは、まず上下の余白の有無を確かめること（余白があるならこのクラス） */ .lgo.pad img{height:34px;max-height:34px} .lgo.tall img{height:54px;max-height:54px} /* 正方形に近いマーク（WaytoAGI）。横組みと同じ高さだと 29〜32px 角にしかならず、 隣の ElevenLabs（216px幅）や AiCOMMU（179px幅）に対して極端に軽く見える */ .lgo.sq img{height:41px;max-height:41px} /* ⭐ 正方形に近いが、**マークの下に社名が入る縦組み**のもの（RobotMateHub / Onoma AI）。 ⚠️ `.sq`（41px）だと**社名だけが極端に小さくなる**。社名が絵全体に占める高さを実測すると RobotMateHub＝13.0%、Onoma AI＝8.7% しかなく、41px 表示では文字が 5.3px / 3.6px にしかならない （同じ 41px の WaytoAGI は 20.4% あって 8.3px、`.mid` の DoCK は 22.2% で 8.2px 読める）。 そのため**絵の大きさではなく社名の読みやすさ**で決め直し、帯の最大値である `.tall`（藝大）と 同じ 54px を当てた（りあ指示 2026-08-17「もう少し大きく」）。 ⚠️ Onoma AI は社名の比率が小さすぎて、54px でも文字は 4.7px にしかならない。 文字を他社と揃えるには 92px 必要で、帯（`.lgo` の高さ 78px）に収まらない。 これ以上を求めるなら**横組みのロゴを先方からもらう**のが筋 */ .lgo.stack img{height:54px;max-height:54px} /* 絵と文字が2段・横並びになっているロゴ（DoCK / D-Lab AI Channel / INVADERS）。 ⚠️ 横組みと同じ高さだと DoCK の「映像リサーチセンター」と D-Lab の「AI CHANNEL」が潰れて読めない。 藝大（.tall）との光学的な釣り合いもここで取っている （Chapter 07 の .duo で 藝大52px : DoCK34px＝0.654 が揃うと決めた比率を写像した値） */ .lgo.mid img{height:37px;max-height:37px} /* ---- 静止のロゴ（Chapter 07・暗い地なので淡色版のロゴを使う） ---- ⚠️ 2026-08-07 に **役割ごとのグループ組み** へ作り直した（設計方針）。 旧構成は「同じ大きさの四角いタイル × 3列」で、タイル1枚ごとに役割（主催／協力／…）を 書いていた。「協力」の字が何度も出て煩雑・四角い枠が幅を取りすぎる、という指摘を受けて、 役割を組の見出しへ1回だけ出し、下にロゴだけを並べる形にした。 ・見出し（.lgHd）は Chapter 06 の .spHd と同じ「細線 — 英語 — 日本語 — 細線」 ・タイル（.lgTile）は **高さだけ固定・幅はロゴなり**。四角い箱が並ぶ圧が消える ・社名の表記が要るのは藝大だけなので、タイルの **外側の下** にキャプション（.lgCap）で置く （タイルの中に入れるとその1枚だけ背が伸びて行の高さが揃わなくなる） */ .lgSets{max-width:1000px;margin:0 auto 58px} .lgSet + .lgSet{margin-top:clamp(38px,5vw,58px)} /* 主催と協力は **横並び**（2巡目）。1組1枚ずつなので縦に積むと間延びする。 ⚠️ 中の .lgSet は隣り合わせでも上マージンを持たないように打ち消す。 720px 以下では縦積みに戻し、そのときだけ間隔を戻す */ .lgPair{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start; gap:clamp(28px,5vw,64px)} .lgPair .lgSet + .lgSet{margin-top:0} .lgSets > .lgPair + .lgSet{margin-top:clamp(38px,5vw,58px)} /* 英語は見出しが長い（Organizer / In cooperation with）ぶん、日本語と同じ余白では 横に並びきらず 760px で縦に折れていた。見出し脇の細線と組の間隔を詰めて揃える */ @media(max-width:940px){ .lgPair{gap:clamp(20px,3vw,40px)} .lgPair .lgHd{gap:12px} .lgPair .lgHd::before,.lgPair .lgHd::after{width:16px} } @media(max-width:720px){ .lgPair{flex-direction:column;align-items:stretch;gap:clamp(34px,6vw,48px)} .lgPair .lgHd{gap:16px} .lgPair .lgHd::before,.lgPair .lgHd::after{width:clamp(22px,5vw,64px)} } .lgHd{display:flex;align-items:center;justify-content:center;gap:16px;margin:0 0 24px} .lgHd::before,.lgHd::after{content:"";height:1px;width:clamp(22px,5vw,64px);background:var(--line2)} .lgHd .en{font-size:11.5px;letter-spacing:.28em;color:var(--acc)} .lgHd b{font-size:15px;font-weight:800;letter-spacing:.22em} /* ⭐ 英語表示のときだけ英字の小見出しを隠す（2026-08-12）。 .spHd / .lgHd は「英字の小見出し（.en）＋ 言語で入れ替わる見出し（b）」の2段組みなので、 英語にすると "SPEAKERS Speakers" / "ORGANIZER Organizer" と同じ語が2回並んでいた。 ⚠️ 中国語は "SPONSORS 赞助" で重ならないので出したまま。日本語も同じ理由でそのまま。 ::before / ::after のヘアラインは残るので、線に挟まれた見出しの形は崩れない */ html[lang="en"] .spHd .en, html[lang="en"] .lgHd .en{display:none} .lgRow{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:18px} .lgItem{display:flex;flex-direction:column;align-items:center;gap:11px} /* ⚠️ タイルの寸法は全部そろえる（幅232 × 高さ96）。ロゴの絵なりに幅を伸ばすと 横組みのワードマーク（AiCOMMU）だけ極端に広くなり、縦長の校章（藝大）と並んだとき 幅がちぐはぐに見える。枠は固定して、中のロゴを上限つきで収める形にした。 ⚠️ 4枚並び（協賛募集中）が1行に入る幅 = 232×4 + gap18×3 = 982 ≦ .lgSets の 1000px */ /* ⚠️ タイルの中は **白** にする（設計方針）。ロゴは各社の濃色版（-dark）を使う。 暗い地に白1色でシルエット化するより、支給されたロゴの色をそのまま出せるのが理由。 白の板が暗いページから浮きすぎないよう、純白ではなく気持ち灰を落とした白にして、 縁は暗い側に細く1本だけ引いている */ .lgTile{display:grid;place-items:center;width:232px;height:96px;padding:0 20px; border:1px solid rgba(255,255,255,.14);background:#f4f6f8;border-radius:2px} .lgTile img{max-height:42px;max-width:100%;width:auto;height:auto} /* 藝大は「校章＋東京藝術大学」の縦組みシグネチャなので上限を分ける（横組みと光学的に揃える）。 ⚠️ 2026-08-07 に公式のシグネチャ（geidai_UI_sig_jp.jpg）へ差し替え。校章の下に大学名が入るぶん 縦に長いので、横組みのワードマークと同じ上限だと文字が読めない */ .lgTile.tall img{max-height:70px} /* 正方形に近いマーク（WaytoAGI）は、横組みのワードマークと同じ上限だと小さく見える */ .lgTile.sq img{max-height:62px} /* 絵（イラスト）と文字が横に並ぶロゴ（D-Lab AI Channel）。比は 2.67:1。 ⚠️ 横組みのワードマークと同じ 42px だと猫の絵と「AI CHANNEL」の小さい文字が潰れ、 縦組み用の 70px だと絵の面積が大きいぶん隣の AiCOMMU・WaytoAGI より重く見える（実測して中間に決めた）。 58px = 幅155px・上下の余白19px */ .lgTile.mid img{max-height:58px} /* 1枚のタイルに2つのロゴを入れる（協力＝東京藝術大学＋映像リサーチセンターDoCK）。 ⚠️ タイルの大きさは他と揃える（りあ指示 2026-08-11）ので、収めるためにロゴ側を小さくする。 使える幅 = 232 − padding18×2 = 196px。gap16 を引いた 180px を2つで分け合う計算： 藝大 52px高 ×（244/300）= 42px幅 ／ DoCK 34px高 ×（681/266）= 87px幅 → 計 129px（余裕51px） ⚠️ 藝大は校章の下に大学名が入る縦組みなので、DoCK と同じ高さにすると小さく見える。 高さをずらして光学的な重さを揃えている。 ⚠️ 2026-08-11（りあ指示）で 64/48 → 52/40 → 52/34 と二段落とした。 タイルの大きさは他と揃えたまま（232×96）ロゴ側で余白を作る。 ⭐ 下揃え＝「東京藝術大学」と「映像リサーチセンター」のディセンダラインを揃える（りあ指示 2026-08-11）。 ⚠️ これが成立するのは **両方の PNG が下端まで文字で、下の余白が 0px** だから（実測済み）。 余白のある画像に差し替えると下端がずれるので、差し替え時は必ず余白を測ること。 padding-bottom は 22px＝96−52−22 で藝大がタイルの上下中央に来る値。 ⭐ 2026-08-11 に合成済みの1枚（partner-geidai-dock.png）へ差し替えたので、この .duo は現在未使用。 2つのロゴを CSS で並べる必要が再び出たときのために残している。 */ .lgTile.duo{display:flex;align-items:flex-end;justify-content:center;gap:16px;padding:0 18px 22px} .lgTile.duo img:first-child{max-height:52px} .lgTile.duo img:last-child{max-height:34px} /* 余白まで作り込まれた合成ロゴを、タイル全面に敷く（協力＝東京藝術大学＋映像リサーチセンターDoCK）。 ⭐ 2026-08-11（りあ指示）に合成済みの1枚 partner-geidai-dock.png（888×368）へ差し替えた。 位置・大きさ・下揃えを CSS で作る必要がなくなっている。 ⚠️ この画像は **比 2.413:1 とタイル（232:96＝2.4167:1）がほぼ一致**し、内側に余白 （左119／右124／上93／下92px）を持っている。だから他のロゴのような max-height ではなく、 padding を 0 にして全面に敷くのが正しい。max-height を効かせると余白のぶんロゴが小さくなる。 ⭐ 角の処理（りあ指示 2026-08-11）。画像側に角丸が付いたので、タイル側の白地と枠線を消して **画像の角丸がそのままタイルの角**になるようにした。 ⚠️ contain のままだと画像がタイルより 1〜2px 小さく収まり、その外側にタイルの白地（#f4f6f8）が 四角く残る＝「角がはみ出て見える」原因になる。cover で全面を覆い、 overflow:hidden で万一の食み出しも刈る。比がほぼ同じなので cover でも欠けはほぼ生じない。 ⚠️ border は 0 にする。box-sizing:border-box なので外形 232×96 は変わらないが、 1px 残すと画像は border の内側（230×94）にしか置けず、外周に線が1本見えてしまう。 ⚠️ 比の違う画像に差し替えると cover で上下または左右が切れる。 その場合はタイル比（2.4167:1）に合わせて画像側を作り直すこと。 */ .lgTile.full{position:relative;padding:0;overflow:hidden;background:transparent;border:0} .lgTile.full img{position:absolute;inset:0;display:block;width:100%;height:100%;max-height:none;object-fit:cover} /* 藝大の名義。⚠️ 英語だけ1行目が長い（Graduate School of Film and New Media）ので一段落とす */ .lgCap{font-size:11.5px;line-height:1.75;letter-spacing:.04em;color:var(--muted);text-align:center;max-width:260px} html[lang="en"] .lgCap{font-size:10.5px;letter-spacing:.01em} /* 暗背景用のロゴしか無い社（白版を指定された社）のタイルだけ、地を暗いままにする。 白い板に白い文字のロゴを載せると文字が消えるため（指定＝WaytoAGI） */ .lgTile.onDark{background:linear-gradient(160deg,rgba(16,23,36,.92),rgba(11,16,25,.86)); border-color:rgba(255,255,255,.14)} /* 空き枠だけは白く塗らない（まだ誰も入っていないので、白い板にすると「入っている」ように見える） */ .lgTile.tbd{border:1px dashed var(--line2);background:transparent} .lgTile.tbd b{font-family:var(--cond);font-weight:600;font-size:13px;letter-spacing:.22em; color:var(--faint);text-transform:uppercase;text-align:center;line-height:1.7} .comingMq{border-block:1px solid var(--line);color:var(--faint);overflow:hidden;white-space:nowrap;padding:17px 0;font-family:var(--cond);letter-spacing:.32em;font-size:14px;margin-bottom:60px;text-transform:uppercase} .comingMq .track{display:inline-block;animation:mq 34s linear infinite} .comingMq span{margin:0 34px} .comingMq em{font-style:normal;color:var(--acc)} .recruit{text-align:center;max-width:680px;margin:0 auto} .recruit h3{font-family:var(--serif);font-size:clamp(26px,3.5vw,36px);font-weight:600;letter-spacing:.12em;margin:0 0 20px;line-height:1.9} .recruit p{font-size:15.5px;color:var(--muted);margin:0 0 34px;line-height:2.1} /* ============ FAQ ============ */ details{border-bottom:1px solid var(--line)} details:first-of-type{border-top:1px solid var(--line)} summary{cursor:pointer;padding:22px 8px;font-weight:800;font-size:17px;list-style:none;display:flex;gap:18px;align-items:center} summary::-webkit-details-marker{display:none} summary::before{content:"Q";font-family:var(--cond);color:var(--acc);font-weight:600;font-size:18px} summary::after{content:"＋";margin-left:auto;color:var(--faint);font-weight:400} details[open] summary::after{content:"－"} details .a{padding:0 8px 24px 46px;font-size:15px;color:var(--muted);line-height:2.1} summary:focus-visible{outline:2px solid var(--acc2);outline-offset:-2px} /* ============ 最終ステートメント ============ */ .finale{position:relative;min-height:76vh;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;border-block:1px solid var(--line)} .finale .bg{position:absolute;inset:0;background:url(../img/still-265.jpg) center/cover no-repeat;opacity:.24} .finale .grad{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 0%,var(--ink) 86%)} .finale .in{position:relative;padding:80px 24px} .finale .st{font-family:var(--serif);font-size:clamp(30px,5vw,54px);font-weight:600;letter-spacing:.14em;line-height:2;margin:0 0 16px} .finale .st em{font-style:normal;color:var(--acc2)} .finale .sub{font-size:14.5px;color:var(--muted);letter-spacing:.18em;margin-bottom:44px} /* ============ LEGACY FOOTER (プラットフォーム共通フッターへ置換済み) ============ */ /* ⭐ `.ftBlock` は awards 版の受け皿（2026-08-17）。あちらは 8/14 にプラットフォーム共通の ヘッダー／フッターへ寄せた（ikisuke さん `43c43bb2`）ので