/* ============================================================ CMFグランプリ 募集ページ 専用スタイル 正: design-reference/ref_grandprix_comp.png（デザインカンプ） docs/CMF_GRAND_PRIX_LP_Implementation_Spec.md（実装指示書） 共通スタイル（style.css）には足さない。トップページの表示に 影響を出さずに直せるようにするため。 【置き場所を変えないこと】 public/ の直下にある前提。style.css と同じ階層に置くことで url() の解決先が揃う。grandprix/ の中に移すと背景画像が切れる。 【変更したらバージョンを上げること】 参照側を grandprix.css?v=4、?v=5 … と上げる。 CSS はサーバー側で7日間キャッシュされるため。 【SPはPCの縮小版にしない】（指示書 §2） ・募集要項 … カード（SP 2列 / PC 3列） ・応募の流れ … SP 縦STEP / PC 横STEP ・日程 … SP 縦タイムライン / PC 横タイムライン ・注意事項 … 全幅でアコーディオン ============================================================ */ /* ------------------------------------------------------------ 公開前の注意帯（本公開時に HTML 側ごと削除する） ------------------------------------------------------------ */ .gp-draft{background:var(--yellow);color:var(--ink); padding:.8rem 1.25rem;font-size:13px;font-weight:900;line-height:1.5; text-align:center;position:relative;z-index:50} /* ------------------------------------------------------------ パンくず 検索やSNSから直接来る人がトップへ戻れるようにする ------------------------------------------------------------ */ .gp-crumb{background:var(--warm);border-bottom:1px solid var(--hair)} .gp-crumb ol{display:flex;align-items:center;flex-wrap:wrap;gap:.3rem .5rem; padding:.5rem 0;margin:0;list-style:none; font-size:12px;font-weight:700;color:var(--muted)} .gp-crumb a,.gp-crumb [aria-current="page"]{display:inline-flex;align-items:center; min-height:44px} .gp-crumb a{color:var(--muted);text-decoration:none} .gp-crumb a:hover{color:var(--red);text-decoration:underline} .gp-crumb li+li::before{content:"／";margin-right:.5rem;color:var(--hair)} .gp-crumb [aria-current="page"]{color:var(--ink)} /* ============================================================ FV（ファーストビュー） トロフィー画像を全面に敷き、その上にコピーを置く ============================================================ */ .gp-fv{position:relative;overflow:hidden;background:#3A0710;color:#fff; isolation:isolate} .gp-fv-img{position:absolute;inset:0;width:100%;height:100%; object-fit:cover;object-position:60% 42%;z-index:-2;display:block} /* 文字の可読性を確保するスクリム。 SP は文字がトロフィーに重なるので中央まで暗くし、 PC は左のコピー側だけを暗くしてトロフィーを見せる */ .gp-fv::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background:linear-gradient(180deg,rgba(32,4,9,.78) 0%,rgba(32,4,9,.42) 45%,rgba(32,4,9,.80) 100%)} .gp-fv-in{position:relative;max-width:var(--wrap);margin:0 auto; padding:var(--sp-5) 1.25rem var(--sp-6)} .gp-fv .eyebrow{font-family:var(--en);font-size:clamp(11px,3vw,13px); letter-spacing:.22em;line-height:1;color:#fff;opacity:.9} /* 英字タイトル。既存LPのコンデンス系（Fjalla One）に寄せる */ .gp-fv .title{margin-top:.6rem;font-family:var(--en);font-weight:400; line-height:.98;letter-spacing:.01em} .gp-fv .title .l1{display:block;font-size:clamp(44px,13vw,86px)} .gp-fv .title .l2{display:block;font-size:clamp(30px,9vw,60px); color:var(--yellow)} .gp-fv .catch{margin-top:var(--sp-3);font-size:clamp(19px,5.2vw,30px); font-weight:900;line-height:1.5} .gp-fv .sub{margin-top:var(--sp-2);font-size:clamp(13px,3.6vw,15px); line-height:1.8;font-weight:500;color:rgba(255,255,255,.88)} .gp-fv .btn{margin-top:var(--sp-4);width:100%;max-width:420px} /* 右側（PC）／下側（SP）のメタ情報 */ .gp-fv-meta{margin-top:var(--sp-5)} .gp-fv-meta .slogan{font-size:clamp(15px,4.2vw,20px);font-weight:900; line-height:1.6} .gp-fv-meta .en{margin-top:.5rem;font-family:var(--en);font-size:11px; letter-spacing:.16em;line-height:1.7;color:rgba(255,255,255,.72)} .gp-fv-meta .when{margin-top:var(--sp-3);font-family:var(--en); font-size:clamp(22px,6vw,30px);line-height:1} .gp-fv-meta .when .dow{font-size:.55em;margin-left:.4em;letter-spacing:.08em} .gp-fv-meta .where{margin-top:.45rem;font-size:clamp(12px,3.4vw,14px); font-weight:900} /* ============================================================ 本文の共通 ============================================================ */ .gp-body{background:var(--warm)} .gp-sec{padding:var(--sp-6) 0} /* 未使用。面の白/ウォームの交互配置をやめたため （白は 01 の WHAT WE JUDGE だけに絞っている） */ /* 見出し（赤い連番 ＋ 太い日本語） */ .gp-h{display:flex;align-items:baseline;gap:.7rem} .gp-h .no{flex:0 0 auto;font-family:var(--en);color:var(--red); font-size:clamp(26px,7vw,38px);line-height:1} .gp-h h2{font-size:clamp(19px,5.2vw,26px);line-height:1.4;font-weight:900; color:var(--ink)} .gp-sec > .wrap > .gp-h{margin-bottom:var(--sp-3)} /* ============================================================ 01 CMFグランプリとは（ステートメント） 方針（2026-09-21 の指示）: ・全部を同じ寸法・太さで並べず、4ブロックとして視覚的に整理する ・本文は 500（Medium）。強調だけ 900 ・赤を使いすぎない。装飾よりタイポグラフィと余白で格を出す ・本文の1行が長くなりすぎないよう measure を絞る 使える色の制約（実測）: ・ゴールド #FFD52A はウォームホワイト地で 1.3:1。文字に使えない ・赤 #E52B3F は 4.0:1。小さな本文には足りないのでラベルに限る ・インク #101923 は 15.9:1、ミュート #5E6670 は 5.2:1 → 本文はインク、補助はミュート、赤はラベルのみ ============================================================ */ /* PC だけで効かせる改行。SP では自然に折り返させる （レスポンシブで改行位置を固定しすぎないため） */ .br-pc{display:none} @media (min-width:768px){ .br-pc{display:inline} } /* 強調（インライン）。太さは 900 しか無いので寸法は変えず太さだけ */ .gp-sec .em{font-weight:900} /* ---- 導入コピー ---- */ .gp-lead{margin-top:var(--sp-2);max-width:24em; font-size:clamp(19px,5.4vw,28px);font-weight:900;line-height:1.6; color:var(--ink)} /* ---- ブロックの縦リズム ---- */ .gp-st{margin-top:var(--sp-5)} .gp-st-b+.gp-st-b{margin-top:var(--sp-5)} /* 本文。measure は 34em（およそ42文字）に収める */ .gp-st-b p,.gp-judge p{max-width:34em; font-size:clamp(14px,3.9vw,16px);font-weight:500;line-height:1.85; color:var(--ink)} .gp-st-b p+p{margin-top:1.1rem} /* ---- 中見出し ---- */ .gp-sub{margin-bottom:var(--sp-2);max-width:22em; font-size:clamp(20px,5.6vw,28px);font-weight:900;line-height:1.55; color:var(--ink)} /* ---- 重要メッセージ（2002年の創刊以来…） ---- 太字にせず、寸法をひとつ上げて左に罫線を引くことで「少し強調」にする */ /* セレクタは .gp-st-b p.gp-msg にする。 .gp-st-b p（クラス1＋要素1）より詳細度を上げないと寸法が効かない （!important は使わない） */ .gp-st-b p.gp-msg{margin-top:var(--sp-3);padding-left:1rem; border-left:2px solid var(--ink); font-size:clamp(15px,4.3vw,19px);line-height:1.9} .gp-st-b p.gp-born{margin-top:var(--sp-2); font-size:clamp(15px,4.3vw,19px);font-weight:900} /* ============================================================ 01 内の WHAT WE JUDGE 他の本文から独立させる。ネイビー地の面はCTAとフッターに集約する 規約があるため、白地＋上下の罫線で分ける ============================================================ */ .gp-judge{margin-top:var(--sp-6);padding:var(--sp-5) 0; border-top:2px solid var(--rule);border-bottom:1px solid var(--hair); background:var(--white); /* wrap の内側なので、白面を左右の余白いっぱいまで広げる */ margin-left:-1.25rem;margin-right:-1.25rem; padding-left:1.25rem;padding-right:1.25rem} /* .gp-judge p（クラス1＋要素1）に負けるので、詳細度を上げる */ .gp-judge p.gp-judge-label{max-width:none;font-family:var(--en); font-size:clamp(11px,3vw,13px);font-weight:500; letter-spacing:.26em;line-height:1;color:var(--red)} .gp-judge-head{margin-top:var(--sp-2);margin-bottom:var(--sp-3);max-width:24em; font-size:clamp(20px,5.6vw,30px);font-weight:900;line-height:1.55; color:var(--ink)} .gp-judge p+p{margin-top:1.1rem} .gp-judge p.gp-judge-after{margin-top:var(--sp-3)} /* 評価軸。PC は横並び、SP は 2×2。罫線だけで見せて赤を足さない */ .gp-axis{display:grid;grid-template-columns:repeat(2,1fr);gap:1px; margin:var(--sp-4) 0 0;padding:0;list-style:none; background:var(--hair)} .gp-axis li{background:var(--white);padding:.9rem .6rem 1rem;text-align:center} /* 日本語を主役にする。英字は「読ませる」ものではなく、 審査項目のカテゴリラベルとして世界観を補強する役目 */ .gp-axis .ja{display:block;font-size:clamp(13px,3.7vw,16px);font-weight:900; line-height:1.45;color:var(--ink)} .gp-axis .en{display:block;margin-top:.3rem;font-family:var(--en); font-size:clamp(9.5px,2.6vw,11px);letter-spacing:.2em;line-height:1.2; color:var(--muted)} /* ---- 締めのメッセージ ---- */ .gp-ending{margin-top:var(--sp-6);padding-top:var(--sp-5); border-top:1px solid var(--hair)} .gp-ending .l1{display:block;font-size:clamp(16px,4.4vw,22px);font-weight:500; line-height:1.7;color:var(--ink)} .gp-ending .l2{display:block;margin-top:.35rem; font-size:clamp(26px,7.4vw,40px);font-weight:900;line-height:1.35; color:var(--ink)} .gp-ending{max-width:26em} /* ============================================================ 02 募集要項 6項目を同格にしない（2026-09-21 の指示）。 上段 大会参加の核心 … 3枚・大きめ 中段 募集期間 … 横長1枚 下段 補足情報 … 2枚 注記はカードの外へ逃がす。 ★ 罫線は var(--hair)（インク14%）を使う。 var(--rule)（インク100%）だと線が全部強く出て、 募集要項ではなく管理画面のスペック表に見える。 ★ 影は付けない（既存LPの方針）。面の差は地色と細い罫線だけで出す。 ============================================================ */ /* ---- 3段で共通のカード ---- */ .gp-spec-main,.gp-spec-sub{display:grid;gap:10px;margin:0;padding:0;list-style:none} /* セクション地はウォームホワイトで通すので、カードは白にして浮かせる （面の白/ウォームの交互配置をやめた。2026-09-21） */ .gp-spec-main li,.gp-spec-sub li,.gp-spec-period{ background:var(--white);border:1px solid var(--hair);border-radius:var(--r-lg)} .gp-spec-main li,.gp-spec-sub li{ padding:1.15rem .7rem 1.25rem;text-align:center; display:flex;flex-direction:column;align-items:center} /* 赤は数値だけに集約する。アイコンをインクに落とすと 視線が数字へ向く（2026-09-21 の方針） */ .gp-spec-main .ico,.gp-spec-sub .ico,.gp-spec-period .ico{color:var(--ink)} .gp-spec-main .ico svg,.gp-spec-sub .ico svg{display:block;width:38px;height:38px} /* 画像アイコン（シートから切り出した黒主体版）。 ★ 素材ごとに縦横比が違う（例: マス目 128x92 / 時計 128x127）。 width だけ指定すると画像の高さがカードごとに変わり、 その下の項目名・数値の垂直位置がずれる（実際に12pxずれていた）。 枠の高さを固定して中に収めることで、3カードの垂直位置が揃う。 */ .ico--img{display:flex;align-items:center;justify-content:center} .ico--img img{display:block;width:auto;height:auto; max-width:100%;max-height:100%} .gp-spec-main .ico--img,.gp-spec-sub .ico--img{width:44px;height:44px} .gp-spec-period .ico--img{flex:0 0 auto;width:36px;height:36px} .gp-flow .ico--img{width:44px;height:44px} .gp-spec-main dt,.gp-spec-sub dt{margin-top:.6rem; font-size:clamp(11px,3vw,13px);font-weight:900;color:var(--ink); letter-spacing:.04em} /* 数値。単位や「最大」は小さく添えて、数字を主役にする */ .gp-spec-main dd,.gp-spec-sub dd{margin:.3rem 0 0; font-weight:900;line-height:1.15;color:var(--red); display:flex;align-items:baseline;justify-content:center; flex-wrap:wrap;gap:0 .1em} /* ★ 上段は SP で1枚105px（使える幅はおよそ92px）。 一番長い「1〜15名」が1行に収まる寸法から逆算している。 6.6vw = 375px のとき24.8px。これ以上大きくすると3行に折れる。 PCでは46pxまで伸ばす（カード幅が約400pxあるため） */ .gp-spec-main dd b{font-size:clamp(22px,6.6vw,46px);font-weight:900; letter-spacing:-.01em} .gp-spec-main dd .u{font-size:clamp(12px,3.4vw,21px)} /* 「最大」は独立した行にせず、数字と同じ行に流す。 3カードとも「数値＋単位が1行」で組みを揃えるため（2026-09-21 の指示）。 width:100% にしていたときは募集組数だけ2行になり、 アイコン→項目名→数値 の垂直位置が他の2枚とずれていた */ .gp-spec-main dd .pre{font-size:clamp(10.5px,2.9vw,15px);color:var(--ink)} /* 数値の行は折り返さない。単位だけが次行に落ちるのを防ぐ */ .gp-spec-main dd,.gp-spec-sub dd{flex-wrap:nowrap;white-space:nowrap} .gp-spec-sub dd{font-size:clamp(24px,6.8vw,38px)} /* 注記へつなぐ ※ 印。カード下の注釈がどのカードのものか示す役目。 ★ 赤にしない。値と同じ赤だと記号が値の一部に見え、 「無料※」が何かの警告のように読める（一度そうなって外した経緯あり）。 色を --muted に落として脚注の記号として置く（白いカード地に 5.2:1）。 ★ 寸法は値の .44em。上付きにして数字の並びを崩さない。 .38em だと目印として弱く、注釈への導線にならなかった。 */ .gp-spec-sub dd .mk{font-size:.44em;font-weight:700;color:var(--muted); align-self:flex-start;margin-left:.15em;line-height:1.6} /* ---- 中段：募集期間 ---- */ .gp-spec-period{margin-top:10px;padding:1.2rem 1rem 1.3rem;text-align:center} .gp-spec-period .ico svg{display:block;width:34px;height:34px} /* アイコンは見出しの左。上に積まないので縦に伸びない */ .gp-spec-period .ttl{display:flex;align-items:center;justify-content:center; gap:.6rem; font-size:clamp(12px,3.4vw,14px);font-weight:900;color:var(--ink); letter-spacing:.04em} .gp-spec-period .ttl .tx{text-align:left} .gp-spec-period .ttl .en{display:block;margin-top:.2rem; font-family:var(--en);font-size:clamp(9.5px,2.6vw,11px);font-weight:400; letter-spacing:.22em;color:var(--muted)} .gp-spec-period .range{margin-top:.6rem; display:flex;align-items:baseline;justify-content:center; flex-wrap:wrap;gap:0 .5rem; font-weight:900;line-height:1.15;color:var(--red)} .gp-spec-period .range .d{display:inline-flex;align-items:baseline} /* 「9.25（金） — 10.25（日）」が SP で1行に収まる寸法。 7vw = 375px のとき26.3px */ .gp-spec-period .range time{font-size:clamp(23px,7vw,46px); letter-spacing:-.01em} .gp-spec-period .range .dow{font-size:clamp(11px,3vw,18px)} .gp-spec-period .range .bar{font-size:clamp(18px,5vw,26px);color:var(--ink)} /* 02 の段組み。上段3列・下段2列は幅を問わず維持する （SPで縦積みにすると縦に伸びるため） */ .gp-spec-main{grid-template-columns:repeat(3,1fr)} .gp-spec-sub{grid-template-columns:repeat(2,1fr);margin-top:10px} /* 1000px 以上では募集期間を横並び（アイコン＋見出し＋日付）にする */ @media (min-width:1000px){ .gp-spec-period{display:flex;align-items:center;justify-content:center; gap:var(--sp-4);text-align:left;padding:1.4rem 1.6rem} .gp-spec-period .ttl{margin-top:0} .gp-spec-period .range{margin-top:0} } /* ---- カード外の注記 ---- */ .gp-spec-notes{margin:var(--sp-2) 0 0;padding:0;list-style:none} /* 注釈。メイン情報よりはっきり弱くする。 ★ 弱めるのは寸法で行い、色は --muted（地に対して 5.2:1）より下げない。 #7A828C まで落とすと 3.5:1 で小さい文字の基準 4.5:1 を切る。 保護者の同意やチケットが必要という告知なので、読めなくしてはいけない。 本文のインクは 15.9:1 なので、--muted でも十分に「弱い」 */ .gp-spec-notes li{font-size:clamp(11px,3vw,12.5px);line-height:1.75; color:var(--muted)} .gp-spec-notes li+li{margin-top:.2rem} /* ============================================================ 03 ステージ（2026-09-27 追加） 数値カードは 02 の .gp-spec-main / .gp-spec-sub をそのまま使う （同じ「数字を主役にするカード」なので組みを揃える）。 ここにはステージ固有の差分と、形の図だけを書く。 ============================================================ */ .gp-stage-lead{font-size:clamp(17px,4.8vw,24px);font-weight:900;line-height:1.55; color:var(--ink)} .gp-stage-venue{margin-top:.6rem;margin-bottom:var(--sp-3); font-size:clamp(12px,3.4vw,14px);line-height:1.7;color:var(--muted)} /* 02 のカードはアイコン前提で dt に上余白がある。アイコンが無いので詰める */ .gp-stage-main dt,.gp-stage-sub dt{margin-top:0} .gp-stage-sub dd .u{font-size:.5em;margin-left:.1em} /* ---- 形の図 ---- 白いカードに置き、線はインク、面はウォームで塗る。 赤は「間口 最大」のラベルだけ（数値カードと同じく赤は寸法に集約）。 ★ 文字の寸法は viewBox 基準。375px で表示幅が約335px（縮尺 .335）に なるため、34 で約11.4px。これより小さくしない */ .gp-stage-fig{margin:10px 0 0;background:var(--white); border:1px solid var(--hair);border-radius:var(--r-lg); padding:1.1rem .9rem .9rem} .gp-stage-fig svg{display:block;width:100%;height:auto;max-width:760px;margin:0 auto} .gp-stage-fig .s-floor{fill:var(--warm);stroke:var(--ink);stroke-width:3;stroke-linejoin:round} .gp-stage-fig .s-area{font-size:34px;font-weight:900;fill:var(--ink);text-anchor:middle} .gp-stage-fig .s-area-n{font-size:30px;font-weight:500;fill:var(--muted);text-anchor:middle} .gp-stage-fig .s-dim,.gp-stage-fig .s-tick{stroke:var(--red);stroke-width:2.5} .gp-stage-fig .s-lbl{font-size:34px;font-weight:900;fill:var(--ink);text-anchor:middle} .gp-stage-fig .s-lbl--em{fill:var(--red)} /* CSS の text-anchor は SVG 属性より優先されるので、左揃えはクラスで指定する */ .gp-stage-fig .s-lbl--start{text-anchor:start} .gp-stage-fig .s-aud{fill:none;stroke:var(--muted);stroke-width:3;stroke-linecap:round;stroke-linejoin:round} .gp-stage-fig .s-aud-t{font-size:34px;font-weight:900;fill:var(--muted);text-anchor:middle;letter-spacing:.3em} .gp-stage-fig .s-scale{stroke:var(--ink);stroke-width:2.5} .gp-stage-fig .s-scale-t{font-family:var(--en);font-size:30px;fill:var(--ink);text-anchor:middle} .gp-stage-fig figcaption{margin-top:.6rem;text-align:center; font-size:clamp(11px,3vw,12.5px);line-height:1.6;color:var(--muted)} /* 問い合わせ窓口の案内（会場ではなく運営へ）。 注記（--muted の小さい文字）より一段強く、白地＋細罫線で区切る。 赤ベタにはしない（警告に見えるため） */ .gp-stage-ask{margin-top:var(--sp-3);padding:1rem 1.1rem; background:var(--white);border:1px solid var(--hair);border-left:3px solid var(--ink); border-radius:var(--r-sm); font-size:clamp(12.5px,3.5vw,14px);font-weight:900;line-height:1.75;color:var(--ink)} /* フォームへのリンク。44px のタップ領域を確保する */ .gp-stage-ask .mail{margin-top:.3rem} .gp-stage-ask .mail a{display:inline-flex;align-items:center;min-height:44px; font-size:clamp(15px,4.2vw,17px);font-weight:900; color:var(--red);text-decoration:underline;text-underline-offset:4px} .gp-stage-ask .mail a:hover{color:var(--ink)} .gp-stage-ask .mail a:focus-visible{outline:2px solid var(--red);outline-offset:2px} .gp-stage-ask .mail .ar{margin-left:.4em;text-decoration:none;transition:transform .2s} .gp-stage-ask .mail a:hover .ar{transform:translateX(3px)} /* 会場への注意は、案内本体より一段弱くする */ .gp-stage-ask .sub{margin-top:.4rem;font-size:clamp(11.5px,3.2vw,12.5px); font-weight:500;line-height:1.75;color:var(--muted)} /* ============================================================ 04 応募の流れ（SP 縦STEP / PC 横STEP） ============================================================ */ .gp-flow{display:grid;gap:var(--sp-2);margin:0;padding:0;list-style:none} .gp-flow li{background:var(--white);border:1px solid var(--rule); border-radius:var(--r-sm);padding:1.1rem 1.15rem 1.2rem; display:flex;flex-direction:column} .gp-flow .step{font-family:var(--en);font-size:11px;letter-spacing:.14em; color:var(--red);line-height:1} .gp-flow .ico{color:var(--ink);margin:.7rem 0 .55rem} .gp-flow .ico svg{display:block;width:30px;height:30px} .gp-flow h3{font-size:clamp(15px,4.4vw,19px);line-height:1.45;font-weight:900} .gp-flow p{margin-top:.45rem;font-size:13.5px;line-height:1.7;color:var(--muted)} /* 選考結果の連絡予定。 ★ 赤ベタだと STEP より強く出てしまい、「応募の流れ」より 連絡日が主役に見える。白地＋赤の細罫線に落として従にする */ .gp-flow-note{margin-top:var(--sp-3);background:var(--white);color:var(--ink); border:1px solid var(--hair);border-left:3px solid var(--red); border-radius:var(--r-sm);padding:1rem 1.1rem} /* ★ 中身は 。block にしないとインラインのまま1行に流れ、 margin-top も効かない（

の中なので

は置けない） */ .gp-flow-note .d,.gp-flow-note .t,.gp-flow-note .s{display:block} .gp-flow-note .d{font-family:var(--en);font-size:clamp(18px,5vw,23px); line-height:1.1;color:var(--red)} .gp-flow-note .d .dow{display:inline;font-size:.6em;margin:0 .15em} .gp-flow-note .t{margin-top:.4rem;font-size:14px;font-weight:900;line-height:1.6} .gp-flow-note .s{margin-top:.5rem;font-size:11.5px;line-height:1.6; color:var(--muted)} /* ============================================================ 05 日程（SP 縦タイムライン / PC 横タイムライン） ============================================================ */ .gp-sched{margin:0;padding:0;list-style:none;position:relative} /* SP：左に縦線を1本通し、各項目に丸を置く */ .gp-sched::before{content:"";position:absolute;left:5px;top:10px;bottom:10px; width:2px;background:var(--hair)} .gp-sched li{position:relative;padding:.7rem 0 .7rem 1.7rem} .gp-sched li::before{content:"";position:absolute;left:0;top:1.15rem; width:12px;height:12px;border-radius:50%;background:var(--red)} .gp-sched time{display:inline-block;font-family:var(--en); font-size:clamp(15px,4.2vw,17px);color:var(--red);line-height:1.2; min-width:6.5rem} .gp-sched time .dow{font-size:.72em;margin-left:.15em} .gp-sched .what{display:block;margin-top:.2rem;font-size:14px;font-weight:900; line-height:1.6;color:var(--ink)} .gp-sched .what small{display:block;font-size:11.5px;font-weight:500; color:var(--muted);margin-top:.15rem} /* ============================================================ 06 賞・特典（濃紺のカード） ★ 2026-09-21: 「コンテストとしての格を優先する」方針で作り直した。 視認性の問題は色ではなく寸法だった（説明文 #AEB6C0 と地 #101923 の コントラストは 8.6:1 で足りていたが、11.5px では小さすぎた）。 ・アイコン 24px → 30px、色を薄く敷いた丸バッジに載せる ・見出し 13〜15px → 15〜17px ・説明文 11.5px → 13px、色を #C9D1DA へ（11.5:1） ・カードに白の細い枠を足して地から持ち上げる ・PC は6枚を1行に並べる（カンプ準拠） ============================================================ */ .gp-awards{display:grid;grid-template-columns:repeat(2,1fr);gap:10px; margin:0;padding:0;list-style:none} /* ★ 副賞を入れ子の