/* ============================================================ 2026-08-21 クライアント修正指示（支給素材/0821/0821キャンペーンサイト修正依頼.pptx） fix_20260819.css と同じ方針：special.css は minify 済みのため触らず、別ファイルで上書きする。読み込みは fix_20260819.css の直後。【重要】ブレークポイントは **800px**（48em=768px ではない）。 SP専用の指定は max-width 側に閉じ込め、「素で書いてPCで打ち消す」書き方はしない。数値はすべて 2026-08-21 に prod で実測した値にもとづく。 ============================================================ */ /* =========================== PC・SP 共通 =========================== */ /* --- スライド2：動画の右端に黒いラインが見える（SPのみ発生） ------------------- 原因＝`.video-container` に黒背景（#000000e0）が敷いてあり、video に幅指定が無いため動画本体が枠より約6%狭く描画され、右側に枠の黒が出ていた。実測（修正前）: 375px幅で枠353px / 動画331px ＝右に21pxの黒帯。 360〜799pxで20〜45px発生、800px以上は0px（＝先方指摘の「SPのみ」と一致）。 ⚠️ `class="video-js" data-setup="{}"` は残っているが video.js は読み込まれておらず（window.videojs=false）幅指定が効いていない。共通CSSの `video{max-width:100%}` も他ルールに負けているため、 **ID指定**で確実に当てる。PCは元から0pxのため共通で書いて問題ない（実測）。 */ #prize-video { display: block; width: 100%; height: auto; } /* --- スライド3：メールアドレス欄の注釈が小さすぎる ----------------------------- 実測（修正前）: 注釈 7.8px 固定／赤字の注釈(.-error) は SP 10.0px・PC 14.72px。先方指示「赤字の注釈サイズ程度に」＝ .-error と同じ指定に揃える。（.-error は SP `font-size:2.6667vw` / PC `font-size:92%`） */ .mail-note { font-size: 2.6667vw; margin-top: 6px; color: var(--fgcolor); } @media (min-width: 800px) { .mail-note { font-size: 92%; } } /* --- 応募受付前（先行公開 8/28正午〜9/1 10:00）の「抽選に参加」ボタン ------------ 越野さん確定 2026-08-22：**ボタンを押せなくして「9月1日（火）10:00スタート」と出す** （隠さない／押せてお知らせだけ、でもない）。押せてしまうと、45秒の動画を最後まで見せたあとに 403「応募受付期間外です」で断ることになるため（`lottery.py` の期間チェックはサーバー側にしか無い）。判定は `/api/config` の `apply_open`。JSが false のときに .-before-open を付ける。 ⚠️ `apply_open` は `EnforceApplyWindow` 連動なので、公開設定を 1 にするまでは常に true＝この見た目は出ない。先に入れておいても先方確認の邪魔にならない。 */ .-before-open .apply-link { pointer-events: none; /* クリック・タップを受け付けない */ cursor: default; filter: grayscale(0.85) opacity(0.55); } .apply-notice { color: var(--fgcolor); text-align: center; font-weight: 900; margin-block-start: .9em; line-height: 1.5; } .apply-notice .apply-notice_date { color: var(--theme-brown-light); } /* 受付前は「抽選ボタンを押すと動画の再生が始まります…」を出さない。押せないボタンの下に押し方の説明が残ると案内が矛盾するため。 */ .-before-open .apply-caption { display: none; } /* =========================== SP（800px 未満） =========================== */ @media (max-width: 799.98px) { /* --- スライド1：Step見出しの1行目と2行目の余白を詰める ----------------------- 実測（修正前）: Step2「抽選結果を／みる！」の上端間隔 69px / 文字高 35px ＝行間の空白が文字高の 0.97倍。先方イメージの目標は比約1.03〜1.3。 `line-height:1.2` で上端間隔 47px / 空白は文字高の 0.34倍となり一致することを実測で確認。 ⚠️ .text-container 側にも当てないと効かない（見出しの実テキストは span 側にあるため）。 */ .step-heading, .step-heading > .text-container { line-height: 1.2; } }