/* * フロントページ各セクション（News帯・入口・HEADLINERS・DIVISIONS・SCHEDULE+TICKETS・ * VISIT・SPONSORS）のレイアウト。夜バンド内は透過で .night の地＋光跡を透かす。 * SCHEDULE 以降は白情報面（フライヤーの昼の顔）へ着地する（演出#7）。 */ /* FB0715ラウンド3 キュー11（mos「Zインデックス的に手前にあるせいでいくつかの要素の上に 被ってしまっている。ヨーヨーもパーティクルも、背景の手前・すべての要素の後ろであるように」）: .trajectory-webgl-stage / .trajectory-sparks / .trajectory-fx（いずれもz-index:1、 hero.css参照）より本文を確実に手前へ出す。 実装1回目の反省: 最初は
タグそのもの（.schedule/.sponsors等）を丸ごとz:2にする 一括ルールを試したが、.schedule（白背景）・.sponsors（暗背景）のように**セクション自身が 不透明な背景を持つ**場合、その背景ごとz:2に上がってしまい、軌跡がセクションの全高にわたって 完全に見えなくなる副作用が実機検証で発覚した（FB0715ラウンド3で「白背景でも軌跡が続いて 見える」ようにした対応と正面衝突する）。正しい修正は「本文（テキスト・カード）だけを z:2で手前に出し、セクション自身の背景は無印（z:auto）のまま軌跡が透けるようにする」こと。 .night .shell（hero.css）・.schedule__inner・.visit .shell・.sponsors .shell（いずれも 本ファイル内）がこの方式。 FB0715ラウンド3 キュー19（mos「News/Divisionsでヨーヨーが手前に来てる」再指摘）: 個別に 足していた .division__card 独自のz:2ルール（本コミット以前はここにあった）は撤去した。 News/Divisionsが直らなかった真因は孫要素の抜けではなく、親の .night が isolation:isolate で独立スタッキングコンテキストを作っており、内側の「.night .shell z:2」 ルール自体が .trajectory-webgl-stage と絶対に競合できない構造だったこと（hero.css の .night 側コメント参照）。isolation を撤去したことで .night .shell の既存ルールがそのまま News/Contest Info/Divisions全体に効くようになったため、.division__card 個別の重ねがけは 不要になった（モグラ叩きの解消・根治は親側の1箇所）。 */ /* スクロールリビール共通（JS 有効時のみ初期を隠す。無効/reduced は即表示） */ @keyframes wyyc-reveal-fallback { to { opacity: 1; transform: translateY(0); } } .wyyc-js [data-reveal] { opacity: 0; transform: translateY(22px); /* D-2保険: の極小インラインscriptで .wyyc-js は必ず早期に付くが、その後の deferred app.js（IntersectionObserverでの is-visible 付与）が読み込み失敗等で 動かなかった場合に情報が隠れたままにならないよう、時限式の自動開示で最終防御する。 app.js が正常に動く通常時は is-visible の transition が先に効くため見た目は変わらない。 */ animation: wyyc-reveal-fallback 0.8s var(--ease-out-expo) 1.6s forwards; } .wyyc-js [data-reveal].is-visible { opacity: 1; transform: translateY(0); transition: opacity 800ms var(--ease-out-expo), transform 800ms var(--ease-out-expo); } @media (prefers-reduced-motion: reduce) { .wyyc-js [data-reveal], .wyyc-js [data-reveal].is-visible { opacity: 1; transform: none; transition: none; animation: none; } } /* FB0718 item1（team-lead: ヒーロー最下部のスポンサー帯が見切れる）で判明したバグ修正: .hero も `.night` の直下
なので、この汎用ルールが .hero にも当たっていた。 詳細度（class1+要素1）が hero.css 側の `.hero { padding: ... }`（class1のみ）を上回り、 後続読み込みのsections.cssが勝つため、hero.css で丁寧に調整した padding-top/bottom （masthead高さ・svh起点で計算・docs参照）が無視され、狭いビューポート高（幅1440×高800等） で padding-block: 7rem（=112px）に張り替わってスポンサー帯を画面外へ押し出していた。 News/Contest Info/Divisions向けの汎用余白なので、独自の余白を持つ .hero は対象から外す。 */ .night > section:not(.hero) { padding-block: clamp(3.5rem, 8vw, 7rem); } /* 夜セクション共通の見出し帯 */ .news__head, .contest-info__head, .divisions__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-bottom: clamp(1.75rem, 4vw, 3rem); } /* ================= 2. News帯 ================= */ .news__list { border-top: 1px solid var(--hairline); } .news__item { border-bottom: 1px solid var(--hairline); } .news__link { display: grid; /* C-1: 一律「お知らせ」バッジ列（news__label）を撤去したため3カラムへ */ grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(0.75rem, 2vw, 1.75rem); padding: 1.1rem 0.5rem; transition: background var(--duration-normal) var(--ease-out-expo); } .news__link:hover { background: color-mix(in srgb, var(--color-ai-flyer-deep) 40%, transparent); } /* hover のインデントは全幅背景を動かさず文字セルだけ translateX で寄せる（compositor 純度維持） */ .news__date, .news__title { transition: transform var(--duration-normal) var(--ease-out-expo); } .news__link:hover .news__date, .news__link:hover .news__title { transform: translateX(0.7rem); } .news__date { font-family: var(--font-display); font-size: 0.85rem; letter-spacing: 0.08em; color: var(--color-gold-light); } .news__title { font-size: 0.98rem; color: var(--color-kinari); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .news__arrow { color: var(--color-gold); opacity: 0; transform: translateX(-6px); transition: opacity var(--duration-normal), transform var(--duration-normal) var(--ease-out-expo); } .news__link:hover .news__arrow { opacity: 1; transform: translateX(0); } /* ================= 3. 入口インデックス ＋ 2分岐 ================= */ .gateway__branches { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2.5vw, 1.75rem); } .branch { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-areas: 'num en' 'num ja' 'num desc' 'num go'; align-items: center; column-gap: clamp(1rem, 2.5vw, 2rem); padding: clamp(1.5rem, 3.5vw, 2.75rem); border: 1px solid var(--hairline); border-radius: 4px; background: linear-gradient(135deg, color-mix(in srgb, var(--color-ai-flyer-deep) 55%, transparent), color-mix(in srgb, var(--night-2) 70%, transparent)); overflow: hidden; transition: border-color var(--duration-normal) var(--ease-out-expo), transform var(--duration-normal) var(--ease-out-expo); } .branch::before { /* 抽象アート背景（写真が使えない間の代替）: 金のボケ光＋藍のステージ光条を暗部に品よく */ content: ''; position: absolute; inset: 0; background: radial-gradient(58% 80% at 86% 10%, rgb(216 177 96 / 0.18), transparent 62%), radial-gradient(46% 66% at 74% 112%, rgb(43 103 204 / 0.16), transparent 60%), radial-gradient(22% 30% at 60% 40%, rgb(240 216 160 / 0.08), transparent 70%); pointer-events: none; } .branch > * { position: relative; z-index: 1; } /* CTA写真背景（01=ステージ光→出場する / 02=群衆→観にいく）。 * 写真 img（z0）＋その上に暗いスクリム span（z0・DOM順で後＝上に描画）を重ね、 * 文字（z1）のコントラスト（WCAG AA）を担保する。fold 外なので loading=lazy＋fetchpriority=low。 * 既定は非表示で、コンテナに .wyyc-cta-bg が付いたときだけ表示＝クラス1つで一括 ON/OFF（可逆）。 */ .branch > .branch__bg, .branch > .branch__scrim { display: none; } .gateway__branches.wyyc-cta-bg .branch > .branch__bg, .gateway__branches.wyyc-cta-bg .branch > .branch__scrim { display: block; position: absolute; inset: 0; z-index: 0; } .gateway__branches.wyyc-cta-bg .branch__bg { width: 100%; height: 100%; object-fit: cover; object-position: center 70%; transition: transform var(--duration-normal) var(--ease-out-expo); } /* 暗スクリム: 文字が乗る左〜中を強く沈め（右は写真を見せる）、AA を満たす濃度にする。 */ .gateway__branches.wyyc-cta-bg .branch__scrim { background: linear-gradient(107deg, rgb(6 11 22 / 0.9) 0%, rgb(7 13 24 / 0.74) 44%, rgb(10 19 34 / 0.52) 100%); } .gateway__branches.wyyc-cta-bg .branch:hover .branch__bg, .gateway__branches.wyyc-cta-bg .branch:focus-visible .branch__bg { transform: scale(1.04); } .branch::after { /* hover で金の光跡テクスチャがふわりと差す。 background-image は :hover 側にだけ置く＝ロード時に先読みされず、 初回ホバーで初めて取得される（クリティカルパスから外して FCP を締める）。 */ content: ''; position: absolute; inset: 0; z-index: 1; background-size: cover; mix-blend-mode: soft-light; opacity: 0; transition: opacity var(--duration-normal) var(--ease-out-expo); pointer-events: none; } .branch:hover { border-color: var(--color-gold); transform: translateY(-3px); } .branch:hover::after { background-image: url(../images/texture_gold_foil.webp); opacity: 0.5; } .branch__num { grid-area: num; align-self: start; font-family: var(--font-display); font-size: var(--text-index); font-weight: 600; color: color-mix(in srgb, var(--color-gold-light) 85%, transparent); line-height: 1; } .branch__en { grid-area: en; font-family: var(--font-display); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: color-mix(in srgb, var(--color-kinari) 75%, transparent); } .branch__ja { grid-area: ja; font-family: var(--font-jp); font-weight: 700; font-size: clamp(1.5rem, 1rem + 2.2vw, 2.4rem); color: var(--color-kinari); margin-block: 0.15em 0.35em; } .branch__desc { grid-area: desc; font-size: 0.85rem; color: color-mix(in srgb, var(--color-kinari) 70%, transparent); } .branch__go { grid-area: go; margin-top: 1rem; color: var(--color-gold-light); width: 64px; } .branch__go svg { width: 100%; height: auto; } /* hover: 光跡が伸びて矢印へ収束（演出#4）。dash を JS 非依存で hover 描画 */ .branch__go-trail { stroke-dasharray: 60; stroke-dashoffset: 30; transition: stroke-dashoffset var(--duration-normal) var(--ease-out-expo); } .branch:hover .branch__go-trail { stroke-dashoffset: 0; } .gateway__minor { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(0.75rem, 2vw, 1.25rem); margin-top: clamp(1rem, 2.5vw, 1.75rem); } .gate-min { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.4rem; border: 1px solid var(--hairline); border-radius: 4px; transition: border-color var(--duration-normal), background var(--duration-normal); } .gate-min:hover { border-color: var(--hairline-strong); background: color-mix(in srgb, var(--color-ai-flyer-deep) 30%, transparent); } .gate-min__num { font-family: var(--font-display); font-size: 1.1rem; color: var(--color-gold-light); } .gate-min__body { display: flex; flex-direction: column; margin-right: auto; } .gate-min__ja { font-weight: 700; color: var(--color-kinari); } .gate-min__en { font-family: var(--font-display); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: color-mix(in srgb, var(--color-kinari) 74%, transparent); } .gate-min__arrow { color: var(--color-gold); transition: transform var(--duration-normal) var(--ease-out-expo); } .gate-min:hover .gate-min__arrow { transform: translateX(4px); } /* ================= 2.5 CONTEST INFO（大会概要・MTG 2026-07-10 §D で新設） ================= * NEWS の下、夜バンド内。定義リスト（ラベル｜値）で大会の基礎情報を組む。 * 本文は現行サイト verbatim（front-page.php 側でエスケープ出力）。 * F3（2026-07-11）: 左寄せ前提のデザインを中央寄せの洗練された表示へ。見出し・カード・行を * すべて中央軸に整列させ、上下対称のリズム・金の細罫・ホバーの浮きで階層を出す（design-quality 4項目以上）。 */ /* 2026-07-17 そらくん追加要望⑥: 左＝フライヤー画像・右＝既存の情報の2カラム （mock-flyer-contest-info.png準拠）。SP（〜768px）は縦積み（画像→情報）。 */ .contest-info__layout { display: grid; /* 2026-07-18 mosFB⑨「フライヤーのPC版をもっと大きく。shellの縦をフルで使ってほしい」 対応: 列幅の上限を300→460pxに拡げた（トリミングはしない＝object-fit:containで全体を見せる）。 */ grid-template-columns: minmax(0, 460px) minmax(0, 1fr); align-items: stretch; gap: clamp(1.75rem, 5vw, 3.5rem); } .contest-info__flyer { /* 2026-07-18 mosFB⑨ R3-9「フライヤーが見出し＋カードの合計より大きすぎる。高さを揃えたい」: align-items:stretchだけだと、グリッドの行トラック自体がフライヤーの内在アスペクト比 （固定460px幅×画像比率）でも計算されてしまい、右カラム（見出し+カード）より背が高く なって両カラムがその高い方に揃ってしまっていた（フライヤーの内在サイズが行の高さを 決めてしまう＝本末転倒）。対策として、この要素（グリッドアイテム本体）はposition:relative のまま普通にgrid stretchの対象にしつつ、中のだけをposition:absoluteで子として out-of-flow化した。in-flowの子を持たないグリッドアイテムは行サイズ計算への寄与が ほぼ0になるため、行の高さは右カラム（.contest-info__body）だけで決まるようになり、 その決まった高さぶんだけこの要素がstretchで伸び、中のがinset:0＋object-fit:contain でその箱いっぱいに（トリミング無しで）収まる。 */ position: relative; display: block; border-radius: 10px; overflow: hidden; border: 1px solid var(--hairline); box-shadow: 0 18px 40px -22px rgb(0 0 0 / 0.7); /* * FB0718-R4-g（依頼主「フライヤー画像の左右の隙間が気になる」）: このボックスは * grid-template-columns の minmax(0, 460px) トラックにalign-items:stretchで縦だけ * 右カラムの高さへ揃えていたが、幅は常にトラック幅いっぱい（最大460px）にstretchされて * いたため、img（object-fit:contain）の高さ基準の実表示幅がボックス幅より狭い場合に * 左右の余白として見えていた。aspect-ratio（フライヤー原本の縦横比）を指定した上で * justify-self:startにして幅方向のstretchを止め、「高さ(=右カラム基準)×アスペクト比」で * 幅を自動計算させることで、ボックスの実際の見た目の幅と画像の表示幅を一致させる * （高さ揃えのstretch自体はR3-9の設計のまま維持）。 */ aspect-ratio: 1200 / 1683; justify-self: start; } .contest-info__flyer img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; } @media (max-width: 768px) { .contest-info__layout { grid-template-columns: 1fr; align-items: start; /* SPは縦積みなので行の高さ追従は不要（旧仕様のまま） */ } .contest-info__flyer { /* SPは元の「画像は自然な縦横比で浮く」表示に戻す（PC限定のinset塗りを解除）。 FB0718-R4-g用のjustify-self:startはPC限定（margin:0 autoでの中央寄せをSPで 効かせるためstretchへ戻す）。 */ height: auto; max-width: 320px; margin: 0 auto; justify-self: stretch; } .contest-info__flyer img { position: static; inset: auto; width: 100%; height: auto; } } /* 見出し・カードは2カラム化に伴い左寄せへ（画像と並ぶ狭いカラムでは中央寄せだと窮屈なため）。 */ .contest-info__head { justify-content: flex-start; text-align: left; } .contest-info__card { position: relative; /* F3: 左罫でなく上下の金罫で挟む。2カラム化（2026-07-17）で中央寄せは撤去し、 ボディカラム幅いっぱいに広げる。 */ margin-inline: 0; padding: clamp(1.75rem, 4vw, 2.9rem) clamp(1.4rem, 4vw, 3rem); text-align: left; border: 1px solid var(--hairline); border-top: 2px solid var(--color-gold); border-radius: 10px; background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--color-gold) 6%, transparent), transparent 60%), linear-gradient(180deg, color-mix(in srgb, var(--night-2) 72%, transparent), color-mix(in srgb, var(--night-1) 30%, transparent)); box-shadow: 0 18px 40px -26px rgb(0 0 0 / 0.7); transition: transform 220ms var(--ease-out-expo), box-shadow 220ms var(--ease-out-expo), border-color 220ms var(--ease-out-expo); } .contest-info__card:hover { transform: translateY(-3px); border-top-color: var(--color-gold-light); box-shadow: 0 26px 54px -26px rgb(0 0 0 / 0.78); } .contest-info__title { position: relative; font-family: var(--font-jp); font-weight: 700; font-size: clamp(1.2rem, 0.9rem + 1.2vw, 1.7rem); line-height: 1.4; color: var(--color-kinari); margin-bottom: clamp(1.4rem, 3vw, 2rem); padding-bottom: clamp(1.1rem, 2.4vw, 1.5rem); } /* 金の短い罫（区切りの装飾＝リズムの起点）。2026-07-17: 2カラム化で左寄せに変更。 */ .contest-info__title::after { content: ''; position: absolute; left: 0; bottom: 0; width: 48px; height: 2px; background: linear-gradient(90deg, var(--color-gold), transparent); } .contest-info__list { display: flex; flex-direction: column; gap: 0.85rem; list-style: none; margin: 0; padding: 0; max-width: 34rem; } .contest-info__row { padding-bottom: 0.85rem; border-bottom: 1px solid var(--hairline); font-family: var(--font-jp); font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.1rem); line-height: 1.6; color: color-mix(in srgb, var(--color-kinari) 90%, transparent); /* 値先頭の全角スペース（現行サイト verbatim）は残す。2026-07-17: 2カラム化で左寄せに変更。 キーと値は同一行のインライン連続なので textContent は現行1行と厳密一致する。 */ white-space: pre-wrap; text-align: left; } .contest-info__row:last-child { padding-bottom: 0; border-bottom: 0; } /* キーは1段上に小さく置いて値を主役にする（中央寄せの階層）。 */ .contest-info__key { display: block; margin-bottom: 0.15rem; font-family: var(--font-display); font-weight: 600; font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: color-mix(in srgb, var(--color-gold-light) 90%, transparent); } /* ================= 5. DIVISIONS ================= */ .divisions__intro { display: flex; flex-direction: column; align-items: flex-start; gap: 0.85rem; } .divisions__rules { color: var(--color-gold-light); } /* MTG 2026-07-10 §D: アイコン不採用のシンプルなカード。略称（1A 等）を主役に説明文を添える。 説明文が文章量を持つため 3 列（→2→1）の読みやすいグリッドにする。 */ .divisions__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.7rem, 1.6vw, 1.1rem); list-style: none; margin: 0; padding: 0; } /* リビール用 transform は li（.division）が担い、ホバー/フォーカスの持ち上げは中の * .division__card（アンカー）に載せる（.is-visible の 800ms transition にホバーを支配させない）。 */ .division { display: flex; } .division__card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 0.7rem; width: 100%; padding: clamp(1.3rem, 2.6vw, 1.9rem) clamp(1.15rem, 2.2vw, 1.6rem) clamp(1.1rem, 2vw, 1.5rem); border: 1px solid var(--hairline); border-radius: 5px; background: linear-gradient(180deg, color-mix(in srgb, var(--night-2) 70%, transparent), transparent); color: inherit; text-decoration: none; transition: border-color 170ms var(--ease-out-expo), transform 170ms var(--ease-out-expo), background 170ms var(--ease-out-expo), box-shadow 170ms var(--ease-out-expo); } .division__card:hover, .division__card:focus-visible { border-color: var(--color-gold); transform: translateY(-5px); background: linear-gradient(180deg, color-mix(in srgb, var(--color-ai-flyer-deep) 55%, transparent), transparent); box-shadow: 0 12px 30px rgb(0 0 0 / 0.28); } .division__card:focus-visible { outline: 2px solid var(--color-gold-light); outline-offset: 3px; } .division__code { font-family: var(--font-display); font-weight: 700; font-size: var(--text-division-num); line-height: 1; letter-spacing: 0.02em; color: var(--color-gold-light); } .division__name { font-family: var(--font-jp); font-size: 0.92rem; line-height: 1.55; letter-spacing: 0.01em; color: color-mix(in srgb, var(--color-kinari) 86%, transparent); } /* エキシビションカードのタグ（部門コードに相当する位置）。金地の小さなピル。 */ .division__tag { align-self: flex-start; font-family: var(--font-display); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-sumi); background: var(--color-gold); padding: 0.3em 0.72em; border-radius: 999px; } /* エキシビションは説明文でなく競技名そのものが主役なので、名前を大きく見せる。 FB0715: uppercase変換は撤去（mos）。公式verbatim表記「Women’s Freestyle」等（FB0712 C3）を 下層ページと同じ大文字小文字のまま見せる。 */ .division__name--exh { font-family: var(--font-display); font-weight: 600; font-size: clamp(1rem, 0.85rem + 0.6vw, 1.3rem); letter-spacing: 0.02em; line-height: 1.15; color: var(--color-kinari); } /* 遷移先の明示（日程で見る →）。カード下端に置き、タッチでも常時見える。 */ .division__cta { margin-top: auto; padding-top: 0.35rem; display: inline-flex; align-items: center; gap: 0.32rem; font-family: var(--font-display); font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase; color: color-mix(in srgb, var(--color-gold-light) 76%, transparent); opacity: 0.72; transition: opacity 170ms var(--ease-out-expo), color 170ms var(--ease-out-expo); } .division__card:hover .division__cta, .division__card:focus-visible .division__cta { opacity: 1; color: var(--color-gold-light); } /* FB0715: YouTube風の再生アイコン（角丸矩形＋三角）。フォントサイズ追従・currentColorで CTAの金色とホバー変化をそのまま継承する。 */ .division__cta-icon { display: inline-flex; align-items: center; } .division__cta-icon svg { width: 1.7em; height: 1.7em; } .division__cta-arrow { /* FB0716: 文字グリフ↗からwyyc_icon('arrow-outward')へ置換。ラベルの0.58remに対して 視認できるサイズへ（1.5em）。 */ width: 1.5em; height: 1.5em; flex: none; transition: transform 170ms var(--ease-out-expo); } .division__card:hover .division__cta-arrow, .division__card:focus-visible .division__cta-arrow { transform: translateX(3px); } /* エキシビション（Non-Championship）4種。MTG 2026-07-10 §D: 1A〜AP に負けない存在感へ格上げ＝ 小さいピルではなく、部門カードと同格のカード（.division__card）で見せる。 */ .exhibitions { margin-top: clamp(2rem, 4.5vw, 3rem); padding-top: clamp(1.5rem, 3vw, 2.25rem); border-top: 1px solid var(--hairline); } .exhibitions__label { font-family: var(--font-display); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-gold-light); margin-bottom: clamp(1rem, 2.2vw, 1.5rem); } .exhibitions__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(0.7rem, 1.6vw, 1.1rem); list-style: none; margin: 0; padding: 0; } .exhibition { display: flex; } /* News帯: 実投稿0件のときの中立表示 */ .news__item--empty { border-bottom: 1px solid var(--hairline); } .news__empty { display: block; padding: 1.1rem 0.5rem; font-family: var(--font-jp-serif); font-size: 0.95rem; color: color-mix(in srgb, var(--color-kinari) 74%, transparent); } /* ================= 6. SCHEDULE ＋ TICKETS（白情報面） ================= FB 2026-07-16（mos「最後なぜか明るくなってるので、黒背景の色にしてほしい」）でR4時点は 一旦 --night-1（暗）へ反転したが、その後mos「スケジュールセクションの黒背景は意図した ものではなかった」との訂正を受け、白情報面（var(--color-paper)）へ差し戻した。R4で 明色反転していたテキスト色（.sched-row系・.schedule__note・.section-kicker--dark等）も このロールバックに合わせて元の navy 系へ戻している（下の各ルール参照）。VISIT（同じ仕組み で暗背景化していた）はmosの指摘対象外のため意図的にそのまま維持する（現状維持）。 */ .schedule { position: relative; background: var(--color-paper); color: var(--color-ai-flyer-deep); padding-block: clamp(3.5rem, 8vw, 7rem); overflow: clip; /* 墨の軌跡がセクション外へはみ出さない */ } /* ================= G3追記: 白背景の墨筆致の軌跡（2026-07-11b） ================= * 白面（schedule/visit）では金の光の線が浮く/消えるため、軌跡の材質を「墨汁の筆致」に切り替える。 * にじみ（bleed=広く淡くぼかした墨）＋本体（かすれ＝dashで途切れる墨筆）で水墨風の抽象ストロークにし、 * 境界（seam）から連続する。静的描画（毎フレーム再描画なし＝カクつきの心配なし）。和風トンマナに調和。 * * FB0715ラウンド3 追加FB（mos「白背景の墨汁の演出は、もともとヨーヨーの軌跡そのものを表現 * したいつもりだった。今の墨汁の質感が、下に降りていくヨーヨーの軌跡になるように」）: * この静的SVGは「本物のヨーヨーの位置」とは無関係な固定デコレーションだったため、 * trajectory-webgl.js側でWebGLの軌跡チューブ自体をこの区間だけ墨色に切り替える方式へ * 一本化した（TUBE_FRAGのuInkColor/uWhiteStart参照）。同じ1本の軌跡が金→墨と質感を変える * だけになったので、この静的な墨汁デコレーションは役目を終え非表示にした（マークアップは * 将来の墨汁演出調整に備えて残す＝S1「削除より非表示」の方針）。 */ .ink-trail { display: none; position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; } .ink-trail__bleed, .ink-trail__stroke, .ink-trail__stroke-thick { fill: none; stroke-linecap: round; stroke-linejoin: round; } /* にじみ: 広く淡い墨の帯（filter:blur は使わない）。スクロール中に blur フィルタ付きの大面積要素を 置くと再ラスタライズが暴発してカクつく（実測で long task 6秒級を確認）ため、ぼかしは使わず 「広幅×極低不透明のストローク」で柔らかいにじみを代替する（filter ゼロ＝再描画コストなし）。 M3（FB0711c）: 連続一様な帯だと均質すぎるため、疎密のある dash で「にじみの不均質」を出す。 */ .ink-trail__bleed { stroke: #241f1b; stroke-width: 13; opacity: 0.045; vector-effect: non-scaling-stroke; stroke-dasharray: 130 22 95 30 150 18 70 26; } /* M3: 押さえ跡（筆圧が乗る「太い」区間）。かすれ本体より太く、疎な dash で数カ所だけ配置し、 「入り・抜き」の太細を作る。filter は一切使わない＝静的描画。 */ .ink-trail__stroke-thick { stroke: #1d1712; stroke-width: 7.4; opacity: 0.22; vector-effect: non-scaling-stroke; stroke-dasharray: 42 260 34 900; } /* 本体: かすれの墨筆。非スケーリングで線幅を一定に保ち、太めの本体を irregular な dash で断続させて 乾いた筆（かすれ）にする。輪郭は feTurbulence + feDisplacementMap（SVG defs 側で静的に1回焼き込み・ スクロール中は再評価されない）で毛先が乱れた不揃いな幅に揺らす。白面の可読性を邪魔しない淡さ。 */ .ink-trail__stroke { stroke: #241f1b; stroke-width: 3.6; opacity: 0.36; vector-effect: non-scaling-stroke; stroke-dasharray: 34 3 9 2 21 5 13 3 27 4 6 2 17 4 24 3 4 2 31 5 11 3 19 4; } .ink-trail--visit .ink-trail__stroke { opacity: 0.32; /* 生成り地はやや明るいので更に淡く */ } .ink-trail--visit .ink-trail__stroke-thick { opacity: 0.19; } /* M3: 墨だまり（筆を置いた最初の一点・折れ返しの一点に墨が溜まる）。静的な同心楕円を重ねただけで ソフトな溜まりを表現する（filter:blur不使用）。 */ .ink-trail__pool ellipse { fill: #201a15; } .ink-trail--visit .ink-trail__pool ellipse { fill: #2a231c; } /* 本文はインク軌跡より前面に。 */ .schedule__inner, .visit .shell { position: relative; z-index: 1; } /* FB0715ラウンド3（mos「フッターまでヨーヨーが続いてほしい」）: WebGL版トラジェクトリ ステージを .night の外（
）まで拡張したことで、SPONSORS帯 （z-trajectory=1のcanvasが背景の上に乗る）にもトラジェクトリが重なるようになった。 SPONSORSの本文（.shell）だけ他の白/暗セクションと違いこれまでz-indexを持っていなかった （.night .shellのz:2ルールは.night内限定・.schedule__inner/.visit .shellのz:1は DOM順のtie-breakで結果的に読めていた）ため、同じ「本文はトラジェクトリより前面に」の 作法を明示的に揃える。 */ .sponsors .shell { position: relative; z-index: 2; } @media (prefers-reduced-motion: reduce) { /* 静的なので特段の変化はないが、方針統一のため明示（アニメーションを持たない）。 */ .ink-trail__stroke { transition: none; } } /* 夜→白の着地の縫い目: 上辺を横断する金のヘアライン（seam draw の静的ベースライン） */ .schedule::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--color-gold-flyer) 20%, var(--color-gold) 50%, var(--color-gold-flyer) 80%, transparent); opacity: 0.4; } /* 演出#7: 夜→白の境界を横断して白面へ潜り込む金の光跡。 境界の上（暗）から入り、seam を越えて下（白）へ着地する短い draw。 R4で一時非表示にしたが、SCHEDULEを白背景へ差し戻したことで「夜→白の境界」自体が 復活したため、表示に戻す。 */ .schedule__seam { position: absolute; top: -40px; left: 0; right: 0; height: 86px; z-index: 2; pointer-events: none; } .schedule__seam-svg { display: block; width: 100%; height: 100%; overflow: visible; } .schedule__seam-path { stroke-width: 2.6; stroke-dasharray: 1; stroke-dashoffset: 0; /* 既定（JS無効）は全描画で見せる */ filter: drop-shadow(0 0 4px rgb(240 216 160 / 0.8)) drop-shadow(0 0 10px color-mix(in srgb, var(--color-gold) 45%, transparent)); } /* JS有効時のみ隠しておき、ビューポート進入で1回だけ引く */ .wyyc-js .schedule__seam-path { stroke-dashoffset: 1; } .wyyc-js .schedule__seam.is-visible .schedule__seam-path { transition: stroke-dashoffset 1.15s var(--ease-out-expo); stroke-dashoffset: 0; } /* reduced-motion: JS有効でも常時全描画（静止） */ @media (prefers-reduced-motion: reduce) { .wyyc-js .schedule__seam-path { stroke-dashoffset: 0; transition: none; } } .schedule__inner { display: grid; grid-template-columns: 1.7fr 1fr; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: start; } .schedule__head { margin-bottom: 1.75rem; } .schedule__note { margin-top: 0.75rem; font-family: var(--font-jp-serif); font-size: 0.9rem; color: color-mix(in srgb, var(--color-ai-flyer-deep) 72%, transparent); } .schedule__list { border-top: 2px solid var(--color-ai-flyer); } .sched-row { display: grid; grid-template-columns: 6.5em 1fr; align-items: baseline; gap: 1.25rem; padding: 1rem 0.25rem; border-bottom: 1px solid var(--paper-line); } .sched-row__daybox { display: flex; flex-direction: column; gap: 0.1rem; } .sched-row__day { font-family: var(--font-display); font-weight: 700; font-size: 0.92rem; letter-spacing: 0.1em; color: var(--color-ai-flyer); } .sched-row__date { font-family: var(--font-display); font-size: 0.72rem; letter-spacing: 0.04em; color: color-mix(in srgb, var(--color-ai-flyer) 72%, transparent); font-variant-numeric: tabular-nums; } .sched-row__program { font-weight: 600; line-height: 1.55; color: var(--color-ai-flyer-deep); } .schedule__main .text-link { margin-top: 1.5rem; } /* FB 2026-07-16: VISITはmosの指摘対象外のため暗背景のまま維持。白地用の「--dark」修飾 （マークアップ側はそのまま・front-page.php未変更）をVISIT内だけ明色へ上書きする。 --dark自体はschedule/pageなど他の白地テンプレートでも使われる共通コンポーネントなので、 ここでは.visitにスコープしたセレクタで局所的に反転する（コンポーネント本体は変更しない）。 SCHEDULEは白背景へ差し戻したため、この上書きの対象から外し--darkの既定色（白地用）へ戻す。 */ .visit .section-kicker--dark .section-kicker__en { color: var(--color-gold-light); } .visit .section-kicker--dark .section-kicker__ja { color: color-mix(in srgb, var(--color-kinari) 66%, transparent); } .visit .text-link--dark { color: var(--color-gold-light); } /* TICKETS 併設 */ .tickets { padding: clamp(1.5rem, 3vw, 2.25rem); background: linear-gradient(160deg, var(--color-ai-flyer-deep), var(--color-ai-flyer)); color: var(--color-kinari); border-radius: 5px; border: 1px solid var(--color-gold-flyer); /* FB 2026-07-16（team-lead「申込・受付パネルが背景と同化しないよう確認」）: SCHEDULEの地色が --paper（白）から--night-1（暗）へ変わり、パネル自身も暗色ゆえ境界が沈みやすくなったため、 外側にドロップシャドウを足して地との間に浮き上がりを作る（パネル内部の配色は変更しない）。 */ box-shadow: 0 22px 48px rgb(0 0 0 / 0.45); position: relative; overflow: hidden; } .tickets::after { content: ''; position: absolute; right: -30px; bottom: -30px; width: 140px; height: 140px; border: 1px solid rgb(226 187 104 / 0.3); border-radius: 50%; } .tickets__title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-gold-light); } .tickets__note { margin: 0.35rem 0 1.25rem; font-family: var(--font-jp-serif); font-size: 0.9rem; color: color-mix(in srgb, var(--color-kinari) 85%, transparent); } .tickets__links { display: flex; flex-direction: column; gap: 0.25rem; margin-top: 1.5rem; border-top: 1px solid rgb(226 187 104 / 0.25); padding-top: 1.25rem; position: relative; } .tickets__links a { display: flex; align-items: center; gap: 0.85rem; padding: 0.6rem 0.25rem; font-size: 0.85rem; color: color-mix(in srgb, var(--color-kinari) 88%, transparent); transition: color var(--duration-fast), transform var(--duration-normal) var(--ease-out-expo); } .tickets__links a:hover { color: var(--color-gold-light); transform: translateX(0.6rem); } .tickets__ico { color: var(--color-gold-light); } .visit-icon { width: 22px; height: 22px; } /* 受付・締切スケジュール（本番トップ「受付スケジュール」の復元） */ .deadlines { margin-top: 1.5rem; border-top: 1px solid rgb(226 187 104 / 0.25); padding-top: 1.25rem; } .deadlines__title { font-family: var(--font-display); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-gold-light); margin-bottom: 0.85rem; } .deadlines__list { display: flex; flex-direction: column; } .deadline-row { display: grid; grid-template-columns: 5.5em 1fr; gap: 0.75rem; align-items: baseline; padding: 0.5rem 0; border-bottom: 1px solid rgb(226 187 104 / 0.14); } .deadline-row__date { font-family: var(--font-display); font-size: 0.76rem; letter-spacing: 0.03em; color: var(--color-gold-light); font-variant-numeric: tabular-nums; white-space: nowrap; } .deadline-row__desc { font-size: 0.82rem; line-height: 1.5; color: color-mix(in srgb, var(--color-kinari) 84%, transparent); } .deadlines__note { margin-top: 0.85rem; font-size: 0.7rem; letter-spacing: 0.04em; color: color-mix(in srgb, var(--color-kinari) 70%, transparent); } .tickets__contestants { margin-top: 1.5rem; color: var(--color-gold-light); } /* ================= 7. VISIT HIMEJI ================= FB 2026-07-16（mos「黒背景の色にしてほしい」）: 旧クリーム帯（var(--paper-tint)）を night 帯と 同系の --night-1 へ統一。visit-card自体（白カード）は「暗背景に浮かぶ明るいカード」として 意図的にそのまま維持し、カード内部の配色は一切変更していない。 */ .visit { position: relative; background: var(--night-1); color: var(--color-kinari); padding-block: clamp(3.5rem, 8vw, 7rem); overflow: clip; /* 墨の軌跡がセクション外へはみ出さない */ } .visit__head { margin-bottom: clamp(2rem, 4vw, 3rem); max-width: 60ch; } .visit__grid { display: grid; /* 宿泊撤去で会場/アクセスの2枚。カードが間延びしないよう幅を抑えて左寄せ（見出しと揃える）。 */ grid-template-columns: repeat(2, minmax(0, 22rem)); justify-content: start; gap: clamp(1rem, 2.5vw, 1.75rem); } .visit-card { position: relative; padding: clamp(1.5rem, 3vw, 2.25rem); background: var(--color-paper); border: 1px solid var(--paper-line); border-radius: 5px; border-top: 3px solid var(--color-ai-flyer); transition: transform 180ms var(--ease-out-expo), box-shadow 180ms var(--ease-out-expo); } /* リビール（.is-visible・詳細度 0,3,0）が transform を 800ms で支配してしまうため、ホバーの 持ち上げは transform では出さず、箱影＋上辺の金罫で「浮き上がり」を表現する。リビールの opacity/transform（800ms）は保ったまま、box-shadow/border-color の遷移だけを 180ms で足す。 */ .wyyc-js .visit-card.is-visible { transition: opacity 800ms var(--ease-out-expo), transform 800ms var(--ease-out-expo), box-shadow 180ms var(--ease-out-expo), border-color 180ms var(--ease-out-expo); } /* mos FB #P6-4: リンクを持つカードだけがホバー反応し、カード全面がクリック範囲になる。 宿泊（リンク無し）は反応させない＝「押せない」ことを正しく伝える（ホバー範囲＝クリック範囲）。 */ .visit-card--link { cursor: pointer; } .visit-card--link:hover, .visit-card--link:focus-within { border-top-color: var(--color-gold-flyer); box-shadow: 0 16px 36px rgb(18 53 112 / 0.16); } /* 可視ラベルのアンカーを ::after でカード全面へ拡張＝面のどこを押してもリンクに飛ぶ。 */ .visit-card--link .visit-card__link::after { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: 1; } /* キーボード焦点の環はカード全体に一致させる（クリック範囲＝焦点範囲）。 :has() 非対応ブラウザで環が消えないよう、カード全面に広がる ::after 側へ outline を出す （アンカー自身の outline は消すため、:has() が無い環境でも無輪郭にならない）。 */ .visit-card--link .visit-card__link:focus-visible { outline: none; } .visit-card--link .visit-card__link:focus-visible::after { outline: 2px solid var(--color-gold-flyer); outline-offset: 3px; } .visit-card__ico { color: var(--color-ai-flyer); margin-bottom: 1rem; } .visit-card__ico .visit-icon { width: 32px; height: 32px; } .visit-card__title { font-weight: 700; font-size: 1.15rem; color: var(--color-ai-flyer-deep); margin-bottom: 0.5rem; } .visit-card__desc { font-size: 0.88rem; line-height: 1.7; color: color-mix(in srgb, var(--color-ai-flyer-deep) 78%, transparent); } .visit-card__link { display: inline-flex; align-items: center; margin-top: 1rem; font-family: var(--font-display); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-ai-flyer); border-bottom: 1px solid color-mix(in srgb, var(--color-ai-flyer) 35%, transparent); padding-bottom: 2px; transition: color var(--duration-fast), border-color var(--duration-fast); } .visit-card__link:hover, .visit-card__link:focus-visible { color: var(--color-gold-flyer); border-color: var(--color-gold-flyer); } /* F8（2026-07-11）: MOMENTS（過去大会カルーセル）は撤去。関連 CSS（.moments/.carousel*）を死載せしないよう削除した。 */ /* ================= 8. SPONSORS ================= */ .sponsors { background: var(--night-1); padding-block: clamp(3rem, 7vw, 6rem); border-top: 1px solid var(--hairline); } .sponsors__head { margin-bottom: clamp(1.75rem, 4vw, 2.75rem); } /* 要約帯（MTG 2026-07-10 §D）: スポンサー詳細は独立ページ /sponsors/ へ移設。 F9（2026-07-11）: トップは具体ロゴを一切出さず、一覧ページへの導線帯だけにする。 ロゴ枠プレースホルダのグリッドは撤去し、誘導文＋CTA の1カラム帯へ簡素化した。 */ .sponsors__band { padding: clamp(1.6rem, 4vw, 2.75rem) clamp(1.5rem, 4vw, 3rem); border: 1px solid var(--hairline); border-left: 3px solid var(--color-gold); border-radius: 8px; background: linear-gradient(180deg, color-mix(in srgb, var(--night-2) 45%, transparent), transparent); } .sponsors__band-body { max-width: 52rem; } .sponsors__lead { font-family: var(--font-jp); font-weight: 700; font-size: clamp(1.15rem, 0.95rem + 1vw, 1.6rem); color: var(--color-kinari); margin-bottom: 0.7rem; } .sponsors__sub { font-size: 0.9rem; line-height: 1.75; color: color-mix(in srgb, var(--color-kinari) 72%, transparent); margin-bottom: 1.4rem; } .tickets__entry { margin-top: 0.6rem; } /* ボランティア募集（現行トップの募集ブロック。協賛募集は /sponsors/ へ移設したためトップは1枚のみ）。 */ .get-involved { margin-top: clamp(2.5rem, 5vw, 3.5rem); display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2.5vw, 1.75rem); } .get-involved--single { grid-template-columns: 1fr; max-width: 42rem; } .get-involved__card { padding: clamp(1.5rem, 3vw, 2.25rem); background: color-mix(in srgb, var(--color-kinari) 4%, transparent); border: 1px solid var(--hairline); border-left: 3px solid var(--color-gold); border-radius: 5px; } .get-involved__title { font-weight: 700; font-size: 1.1rem; color: var(--color-kinari); margin-bottom: 0.7rem; } .get-involved__desc { font-size: 0.86rem; line-height: 1.75; color: color-mix(in srgb, var(--color-kinari) 72%, transparent); margin-bottom: 1.35rem; } /* ================= レスポンシブ ================= */ @media (max-width: 1024px) { .exhibitions__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .schedule__inner { grid-template-columns: 1fr; } .visit__grid { grid-template-columns: 1fr; } .divisions__grid { grid-template-columns: repeat(2, 1fr); } .get-involved { grid-template-columns: 1fr; } .news__link { /* C-1でバッジ列（news__label）を撤去した副作用の是正: 2行がまえ('date label'/'title title')が ラベル無しの空セルを残していたため、date+titleの1行構成に簡素化する。 */ grid-template-columns: auto 1fr; grid-template-areas: 'date title'; } .news__date { grid-area: date; } .news__title { grid-area: title; white-space: normal; } .news__arrow { display: none; } } @media (max-width: 620px) { .gateway__branches, .gateway__minor { grid-template-columns: 1fr; } .divisions__grid { grid-template-columns: 1fr; } .exhibitions__grid { grid-template-columns: 1fr; } } /* ================= 超横長（ultrawide, >1920px） ================= * 容れ物（--shell-max）は tokens.css 側で 1520px まで滑らかに拡幅している。 * その拡幅につられて、横幅制約を持たない流れる本文（各セクションの補足文・リード）の * 行長が伸びすぎないよう、ここで読み物系だけ max-width を効かせる。 * この帯は 1920px 以下では一切発火しないので既存合格レイアウトへの回帰はない。 */ @media (min-width: 1921px) { .schedule__note { max-width: var(--read-measure); } }