@charset "UTF-8"; /* ========================================================= Flom シリーズ 共通スタイル（wi1279 がシリーズの基準ファイル） モバイル基準 --------------------------------------------------------- ★ このファイルはカラー展開 wi1280-wi1283 の design.css から @import url("/web_invitation/design_resource/wi1279/design.css"); で読み込まれる共有スタイル。品番固有の値をここに直接書かないこと。 カラー展開側で上書きするのは次の3点だけ: --flom-accent … 氏名 / 日付 / 罫の色（title.png・and.png と同色） --flom-base-bg … カバー最下部の隙間を埋める下地色（base.png 下端の実測色） .c-flomCover__inner::after の background-image（カーテン用 base.png） シリーズ共通クラス: .c-invitationPage--flom … 全品番の
に付与（本文セクションのスコープ） .c-flomCover / .c-flomTtl … 表紙・見出しコンポーネント Figma: Q4hSlSc3LfPFIL8b9lFqW0 / section 2020:2「Flom」 全体コンプ wi1279 = 2041:32 / wi1280 = 2041:30 / wi1281 = 2041:31 wi1282 = 2041:35 / wi1283 = 2041:33 初期状態 = frame 2020:37（ベースのみ） / 最終形 = frame 2020:39 キャンバス: 800 × 1200 フォント: 氏名 = Gerbera_i2 / 日付 = Lupine いずれも design_common.css:525,549 で @font-face 定義済み（常時読込）→ 参照のみ レイヤー分担（動きメモ 2020:5-14 の指示に対応） Lottie(data.json) … cover / base / title = 全カップル共通の装飾。0〜2秒 blade + 本CSS … 顧客写真 / 新郎名 / and / 新婦名 / 日付 = 2〜3秒 アンド画像を Lottie ではなく CSS 側に置く理由: 動きメモでは「新郎名 → アンド → 新婦名」と顧客名の連鎖の中間に入るため、 顧客名(CSS)と同一タイムライン上に置いた方が同期が崩れない。 （wi1250 でも共通素材の img_cover.png を同じ理由で HTML 側に置いている） タイムライン（★ 0ms = 開幕ゲートの解放時刻。ページ読込時刻ではない） 2026-08-17 まではページ読込を 0ms とし、Lottie 読込待ちの 1 秒を delay に 織り込んでいたが、CSS の時計と Lottie の読込が別クロックで順序が保証されず 「開始時の挙動が乱れる」原因になっていた。現在は design_lottie.js の lottiAnimationOnCoverReady() が「SVG 組み上がり＋中の画像デコード完了」の 瞬間に Lottie を play() し、同時に
へ .is-coverReady を付ける。 表紙の CSS アニメーションは animation-play-state: var(--cover-play, paused) で待機しているので、Lottie と CSS が必ず同じ 0ms から動き出す。 0ms Lottie 再生開始（＝素材が揃った瞬間） 100ms カーテン(::after)消灯。Lottie の base 表示に引き継ぐ （base.png はカーテンと Lottie frame0 で同じ絵なので継ぎ目が出ない） 200-1200ms title がフェードイン＋上からスライド（frame 6-36） 1400-2000ms base がフェードアウト → 背後の cover + 顧客写真が出現（frame 42-60） ここまでで動きメモ「ここまで2秒」を満たす 2500-3540ms 新郎名 → アンド → 新婦名 → 日付の線 → 月/日/年 （= var(--flom-phase2) 以降。動きメモ「ここまで1秒」に対応） ========================================================= */ :root { /* ★ 2026-08-17「開始時の背景や画像表示の挙動が乱れる」の修正で 時間の起点そのものを付け替えた。 旧: Lottie は design_lottie.js の setTimeout(1000) で再生開始。 CSS 側の delay もその 1 秒を織り込んだ「ページ描画からの実時間」で 書いていたが、CSS の時計は最初の描画から動くのに対し data.json の 取得はモジュール実行後に始まるので別クロックになる。結果、 カーテン(::after)が上がった後に Lottie が未描画という順序が起き、 装飾の無い顧客写真が一瞬露出してから base が乗っていた。 新: design_lottie.js の lottiAnimationOnCoverReady() が 「SVG 組み上がり＋中の画像デコード完了」の瞬間に play() し、 同時に
へ .is-coverReady を付ける。表紙の CSS アニメーションは animation-play-state で待機しているので同じ 0ms から走り出す。 よって「Lottie 読込待ち」の 1 秒は不要になり 0ms にした。 */ --flom-lottie-delay: 0ms; /* Lottie frame60(=再生開始から2000ms) で base のフェードアウトが完了する。 写真が出てから名入れが動き出すまで 0.5s の余白を置いてほしいとの指示が あるので 2000 + 500 = 2500ms（旧 3500ms = 1000 + 2000 + 500）。 */ --flom-phase2: 2500ms; --flom-ease: cubic-bezier(0.42, 0, 0.58, 1); /* 動きメモ「イージーイーズ」 */ /* ---- ここから下はカラー展開で上書きする（既定 = wi1279 ダスティエメラルド） :root 宣言なので、各品番が .c-invitationPage--wi127X で再宣言すれば
の値が継承値に勝つ（要素上の宣言 > html からの継承） ---- */ --flom-accent: #e24500; /* title.png / and.png の実測色 */ --flom-base-bg: #a8c9bb; /* base.png (400, h-2) の実測色 */ } /* ---- カバー全体 ---- */ .c-flomCover { padding: 0; margin: 0; } .c-flomCover__inner { position: relative; width: min(100vw, 800px); margin-inline: auto; aspect-ratio: 800 / 1200; overflow: hidden; container-type: inline-size; /* 子要素の cqw 基準 = カバー幅 */ /* 下地。cover.png は最下1行が全幅透過かつ top:-2 配置のため、 キャンバス最下2pxがカバーで覆われない。base.png 下端(400,h-2)の 実測色を敷いて隙間を消す（読込前の下地も兼ねる） */ background-color: var(--flom-base-bg); } /* ---- z1 顧客写真（Figma 2020:40 / 472×764 @ 164,112） ---- */ .c-flomCover__photo { position: absolute; left: 20.5%; /* 164 / 800 */ top: 9.3333%; /* 112 / 1200 */ width: 59%; /* 472 / 800 */ height: 63.6667%; /* 764 / 1200 */ object-fit: cover; z-index: 1; } /* ---- z2 Lottie装飾（cover / base / title） ---- */ #lottie { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; } /* ---- z3 名入れ（装飾の base フェードアウト後に連鎖表示） ---- */ .c-flomCover__name, .c-flomCover__amp, .c-flomCover__date { position: absolute; z-index: 3; color: var(--flom-accent); pointer-events: none; } /* 新郎名 / 新婦名（Figma 2020:44,45 / Gerbera_i2 26px / box 544×30） */ .c-flomCover__name { left: 16%; /* 128 / 800 */ width: 68%; /* 544 / 800 */ font-family: "Gerbera_i2", serif; font-size: 3.25cqw; /* 26 / 800 */ line-height: 1; text-align: center; white-space: nowrap; opacity: 0; } .c-flomCover__name--groom { top: 75.25%; /* 903 / 1200 */ animation: flomSlideDown .3s var(--flom-ease) var(--flom-phase2) both; } .c-flomCover__name--bride { top: 84.1667%; /* 1010 / 1200 */ animation: flomSlideDown .3s var(--flom-ease) calc(var(--flom-phase2) + 360ms) both; } /* アンド画像（Figma 2020:43 / 150×47 @ 325,942） */ .c-flomCover__amp { left: 40.625%; /* 325 / 800 */ top: 78.5%; /* 942 / 1200 */ width: 18.75%; /* 150 / 800 */ height: 3.9167%; /* 47 / 1200 */ opacity: 0; animation: flomSlideDown .3s var(--flom-ease) calc(var(--flom-phase2) + 180ms) both; } /* 日付（Figma 2020:46-50 / Lupine 63px / 数字box 69px / 区切り線 36.5px） 実測スパン 253→544px = 291px を中央寄せの flex で再現 数字3つ 3×8.625cqw + 区切り線2本 + 余白4つ×2.5625cqw ≒ 36.375cqw(=291px) */ .c-flomCover__date { left: 0; width: 100%; top: 91.0417%; /* 1092.5 / 1200 = 数字の垂直中心 */ transform: translateY(-50%); display: flex; align-items: center; justify-content: center; gap: 2.5625cqw; font-family: "Lupine", serif; font-size: 7.875cqw; /* 63 / 800 */ line-height: 1; } .c-flomCover__dateNum { width: 8.625cqw; /* 69 / 800 */ text-align: center; opacity: 0; } .c-flomCover__dateNum--month { animation: flomSlideUp .3s var(--flom-ease) calc(var(--flom-phase2) + 660ms) both; } .c-flomCover__dateNum--day { animation: flomSlideDown .3s var(--flom-ease) calc(var(--flom-phase2) + 660ms) both; } .c-flomCover__dateNum--year { animation: flomSlideUp .3s var(--flom-ease) calc(var(--flom-phase2) + 740ms) both; } /* 区切り線（Figma 2020:49,50 / 1×36.5px）。数字より先にフェードイン */ .c-flomCover__dateBar { flex: 0 0 auto; width: 1px; height: 4.5625cqw; /* 36.5 / 800 */ background-color: var(--flom-accent); opacity: 0; animation: flomFade .2s linear calc(var(--flom-phase2) + 540ms) both; /* ★ 罫線を数字の字面の縦中央に合わせるため 9.5px 下げる。 Figma を測り直すと、ずれていたのは数字ではなく罫線の側だった。 数字 2020:46-48 y1067 h51 → baseline 1116 / インク中心 1102 罫線 2020:49,50 y1084.5 h36.5 → 中心 1102.75 Figma では罫線が数字の字面中央に来ており、数字の位置は現状の実装 （実測 baseline 1116）で既に Figma と一致している。 一方このファイルは日付ブロックを align-items:center で組むので、 罫線の中心が数字の「行ボックス」中心（1092.5）に揃ってしまい、 Lupine の字面が下寄りな分（実測 9.5px）だけ数字が下がって見えていた。 Lupine 63px の実測: fontAscent 55 / fontDescent 8 / 数字0-9のインクは baseline-44 〜 baseline+16 なので、インク中心は行ボックス中心 +9.5px。 よって数字は動かさず罫線を 9.5px 下げる。結果 罫線中心 1102 で Figma の 1102.75 とも 0.75px 差に収まる。 2026-08-17: 「挙式日が罫線に対して下に寄っている」の修正。 */ position: relative; top: 1.1875cqw; /* 9.5 / 800 */ } /* ---- z4 カーテン: Lottie読込待機(1秒)の間を base.png で覆い、開幕へ繋ぐ ---- ★ url() は「宣言があるスタイルシート」= 常に wi1279/design.css を基準に 解決される（@import 先でも基準は変わらない）。カラー展開側では background-image を自ディレクトリの base.png で必ず上書きすること。 */ .c-flomCover__inner::after { content: ""; position: absolute; inset: 0; z-index: 4; background: url("base.png") center / cover no-repeat; animation: flomCurtain .01s linear calc(var(--flom-lottie-delay) + 100ms) forwards; } @keyframes flomSlideDown { from { opacity: 0; transform: translateY(-2.5cqw); } to { opacity: 1; transform: translateY(0); } } @keyframes flomSlideUp { from { opacity: 0; transform: translateY(2.5cqw); } to { opacity: 1; transform: translateY(0); } } @keyframes flomFade { from { opacity: 0; } to { opacity: 1; } } @keyframes flomCurtain { to { opacity: 0; visibility: hidden; } } /* --------------------------------------------------------- ★ 開幕ゲート：表紙の演出は素材が揃うまで止めておく --cover-gate: 1 を見て design_lottie.js の lottiAnimationOnCoverReady() が 動き、素材が揃った時点で
に .is-coverReady が付く。 --cover-play は paused -> running に切り替わり、Lottie と CSS 演出が 同じ 0ms から走り出す。paused は delay の消化も止めるので、 これだけで「揃った瞬間を 0ms にする」が成立する。 個々のルールに書き足すのではなくここでまとめて上書きしているのは、 上のルールが animation ショートハンドで書かれており、ショートハンドが animation-play-state を初期値 running に戻してしまうため。 カラー展開側が animation を再宣言しても running に戻らないようにする狙いもある。 2026-08-17: 「開始時の背景や画像表示の挙動が乱れる」の修正。 --------------------------------------------------------- */ .c-flomCover__name, .c-flomCover__amp, .c-flomCover__dateNum, .c-flomCover__dateBar, .c-flomCover__inner::after { animation-play-state: var(--cover-play, paused); } /* ========================================================= 本文セクション（表紙より下） --------------------------------------------------------- 基準は全体コンプ 2026:27（454x4096 = 800x7217 相当）。 実測は 454px 上で採り、x1.7621 して 800px キャンバス換算した値を --cw（= min(100vw, 800px)）で比例させる。SPの実表示幅は 375px 前後 なので、design_common.css の px/rem 固定値では相対的に大きすぎる。 このため本文の見出し・カウントダウンは全て --cw 比例で上書きする。 見出し・欧文ラベルは支給画像を使う（wi1248 と同一ファイルの共通素材） MESSAGE.png 343x53 / INFORMATION.png 494x52 / PROFILE.png 285x52 GROOM.png 95x18 / BRIDE.png 66x18 / LINE.png 97x3 いずれもコンプ実測（INFORMATION 492px / GROOM 95px / 罫線 93px）と 一致するので、800px キャンバス基準の % 指定でそのまま置ける。 数字（COUNT DOWN）だけは画像化できないため Gerbera を当てる。 同梱書体を canvas で実測し、コンプの 字面高49 / 字幅492 = 0.0996 に 最も近いものを選定: Gerbera 0.0929 / Sunflower 0.0956 / CINZEL 0.0955。 Gerbera は design_common.css:350 でカウントダウンの既定書体かつ 表紙の氏名 Gerbera_i2 と同系。必須条件はライニング数字 （85 / 10 25 31 が同じ高さ）で、表紙と同じ Lupine は オールドスタイル数字のため "2082" が "2o82" のように崩れて使えない。 本文の日本語は font{{$font_id}}（お客様選択）を継承する。 ========================================================= */ .c-invitationPage--flom { --cw: min(100vw, 800px); --flom-ink: #2e2e2e; /* COUNT DOWN の数字用 */ --flom-display: "Gerbera", serif; /* 開幕ゲートの opt-in。design_lottie.js / design_cover_ready.js が --cover-gate を見て動き、素材が揃うまで --cover-play を paused に保つ （詳細はファイル末尾の「開幕ゲート」ブロックと design_cover_ready.js） */ --cover-gate: 1; --cover-play: paused; color: var(--flom-ink); background-color: #fff; } .c-invitationPage--flom.is-coverReady { --cover-play: running; } /* ---- 共通見出し（MESSAGE / INFORMATION / PROFILE）= 支給画像 ---- max-width に原寸を入れて 800px 到達後の拡大を止める */ .c-invitationPage--flom .c-flomTtl { margin: 0 auto; } .c-invitationPage--flom .c-flomTtl img { display: block; width: 100%; height: auto; } /* MESSAGE.png 343/800 */ .c-invitationPage--flom .c-invitationSec--invTxt__ttl { width: 42.875%; max-width: 343px; } /* INFORMATION.png 494/800 */ .c-invitationPage--flom .c-invitationSec--scheTxt__ttl { width: 61.75%; max-width: 494px; } /* PROFILE.png 285/800 */ .c-invitationPage--flom .c-invitationSec--profile__ttl { width: 35.625%; max-width: 285px; } /* ---- 招待文面 / MESSAGE ---- */ .c-invitationPage--flom .c-invitationSec--invTxt { max-width: none; margin-bottom: 0; padding: calc(var(--cw) * 96 / 800) 0 calc(var(--cw) * 88 / 800); } .c-invitationPage--flom .c-invitationSec--invTxt__ttl { margin-bottom: calc(var(--cw) * 72 / 800); } /* 招待文面の版面。左右6%を除いた 704px。 ★ 1行の文字数は「font-size + letter-spacing」で割ること。 body に letter-spacing: 0.5px（public/css/commons/style.css:529-533）が 入っていて本文へ継承されるため、28px 指定は字送り 28.5px で 24字 = 684px。左右8%(672px)の版面をあぶれて折り返していた（カラム落ち）。 26px / 左右6% に直したが、それでも字送り 26.5px で 27字が上限だった。 2026-08-18: letter-spacing を 0 に固定したうえで 26px -> 24px。 24px × 29字 = 696px < 704px。定型文の最長行はブライダル系で 24〜32字 （wi_dtb_invitation_text 実測）なので 28字ぶんの版面を確保する。 32字級の文面と一般用途の長文は design_text_fit.js が自動縮小で受ける。 */ .c-invitationPage--flom .c-invitationSec--invTxt__middle { margin: 0 6%; font-size: calc(var(--cw) * 24 / 800); line-height: 2.1; } /* ---- 写真2 + COUNT DOWN ---- ルーラー実測（mock y / 454基準 -> x1.7621 で800換算） 写真帯 1355-1662 307 -> 541 ≒ 3:2（素材の元比とも一致） COUNT DOWN 字面 1391-1410 19 -> 33 => font-size 46 日数 85 字面 1428-1471 44 -> 77 => font-size 105 Days 字面 1512-1531 19 -> 33 => font-size 44（小型英大文字） 10 25 31 字面 1556-1593 37 -> 65 => font-size 90 横幅 x105-355 250 -> 440（帯の約55%） HOURS 等 字面 1608-1620 12 -> 21 => font-size 28 お客様写真の縦横比はまちまちなので帯の高さを 3:2 に固定し object-fit: cover で切り抜いてカウントダウンの版面を確保する。 （wi_dtb_design.image2_ratio_x/y も 3/2 に合わせる） */ .c-invitationPage--flom .c-invitationSec--img02 { /* .c-countdownSection(position:absolute; inset:0) の位置基準。 design_common.css 側に position 指定が無いため、ここで作る */ position: relative; margin-bottom: 0; } .c-invitationPage--flom .c-invitationSec--img__img02 { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; } .c-invitationPage--flom .c-countdownSection { /* 白抜き文字のコントラストを確保するスクリム */ background-color: rgba(0, 0, 0, .3); } .c-invitationPage--flom .c-countdown { font-family: var(--flom-display); letter-spacing: 0.04em; } /* COUNT DOWN 見出し（字面高 33 / Gerbera CAP 0.76em => 43px、幅 326px 狙い） */ .c-invitationPage--flom .c-countdown__textCD { font-size: calc(var(--cw) * 43 / 800); letter-spacing: 0.1em; text-indent: 0.1em; } /* 残り日数 "85" / "Days" Days は JS が "Days" と出力するため、font-variant-caps: small-caps で D だけ大文字・ays を小型大文字にするとコンプと同じ見え方になる。 */ .c-invitationPage--flom .c-countdown__row1 { margin-top: calc(var(--cw) * 30 / 800); } .c-invitationPage--flom .c-countdown__days { /* 字面高 77 / Gerbera の数字は CAP と同じ 0.76em => 100px */ font-size: calc(var(--cw) * 100 / 800); line-height: 1; white-space: nowrap; } .c-invitationPage--flom .c-countdown__textL { margin-top: calc(var(--cw) * 22 / 800); font-size: calc(var(--cw) * 43 / 800); line-height: 1; letter-spacing: 0.14em; text-indent: 0.14em; font-variant-caps: small-caps; } /* 時 / 分 / 秒 countdown.js が付ける u-justifySelfEnd / Center / Start は public/css 配下に定義が無く（grep で該当なし）効いていないため、 3列を等幅にしたうえで各セルを中央寄せに明示する。 これをしないと HOURS / MINUTES / SECONDS が隣とぶつかって重なる。 */ .c-invitationPage--flom .c-countdown__row2 { /* Gerbera の大文字は約 1.1em 幅あり、"SECONDS" 7字 + letter-spacing で 約 114px(800換算 182px) になる。3列 + gap がこれを下回ると MINUTES と SECONDS がぶつかるため、1列 230px(800換算) を確保する。 結果の実測スパンは約 430px でコンプの 458px にほぼ一致する。 */ width: 96%; margin-top: calc(var(--cw) * 34 / 800); column-gap: calc(var(--cw) * 16 / 800); } .c-invitationPage--flom .c-countdown__row2 > div { justify-self: center; min-width: 0; } .c-invitationPage--flom .c-countdown__hours, .c-invitationPage--flom .c-countdown__minutes, .c-invitationPage--flom .c-countdown__seconds { /* 字面高 65 => 92px。"18" の字幅は約 0.98em で3列に収まる */ font-size: calc(var(--cw) * 92 / 800); line-height: 1.1; white-space: nowrap; } .c-invitationPage--flom .c-countdown__textS { margin-top: calc(var(--cw) * 10 / 800); font-size: calc(var(--cw) * 22 / 800); letter-spacing: 0.08em; text-indent: 0.08em; /* HOURS / MINUTES / SECONDS を3列に収めきる（折り返し防止） */ white-space: nowrap; } /* 挙式当日 */ .c-invitationPage--flom .c-countdown__textBD { font-size: calc(var(--cw) * 105 / 800); line-height: 1; letter-spacing: 0.08em; } /* ---- 日程文面 / INFORMATION ---- design_common.css:96 の背景 #eaeaea・左右 margin・色 #666 を解除して コンプ通り白地に置く。本文（日時・受付・挙式…）はお客様入力の $schedule_text をそのまま流すため、体裁は左寄せの塊で中央に置く。 */ .c-invitationPage--flom .c-invitationSec--scheTxt { margin: 0; /* padding: calc(var(--cw) * 40 / 800) 0 calc(var(--cw) * 96 / 800); */ background-color: transparent; color: var(--flom-ink); font-size: calc(var(--cw) * 28 / 800); line-height: 2.1; } .c-invitationPage--flom .c-invitationSec--scheTxt__ttl { margin-bottom: calc(var(--cw) * 72 / 800); } .c-invitationPage--flom .c-invitationSec--scheTxt__middle { margin: 0 8%; } /* ---- プロフィール ---- 全体コンプにルーラーを重ねた実測（454px基準 -> x1.7621 で800換算） 新郎写真 x25-247 222角 -> 391角 左マージン 25 -> 44 新婦写真 x212-425 213x222 -> 375x391 右マージン 29 -> 51 => 実測比 0.96。5:6(0.833) ではなく 1:1。素材 profile_groom.jpg / profile_bride.jpg も 1000x1000 の正方形なので 1:1 で確定。 これに合わせて wi_dtb_design.image_profile_ratio_x/y も 1/1 にする。 氏名 字面高 18.3 -> font-size 21 -> 37 GROOM/BRIDE 字面高 6.7 -> font-size 10 -> 18 幅 43 -> 76 罫線 x82-135 53 -> 93 コメント 行送り 30 -> 53（font 27 x 1.95） 文字送り範囲 x47-410 -> 左右マージン約 10% 写真とコメントの間 45 -> 79（字面基準。ハーフレディング分を引いて約64） 新郎は写真左 / 新婦は写真右の左右交互。 ------------------------------------------------------- */ .c-invitationPage--flom .c-invitationSec--profile { padding: calc(var(--cw) * 60 / 800) 0 calc(var(--cw) * 88 / 800); line-height: 2; text-align: center; } .c-invitationPage--flom .c-invitationSec--profile__ttl { margin-bottom: calc(var(--cw) * 82 / 800); } /* 写真 + テキストの行。新婦は左右反転 */ .c-invitationPage--flom .c-invitationSec--profile__block { display: flex; align-items: center; } .c-invitationPage--flom .c-invitationSec--profile__block--groom { padding-left: 5%; --role-w: 95; /* GROOM.png */ } .c-invitationPage--flom .c-invitationSec--profile__block--bride { flex-direction: row-reverse; padding-right: 5%; --role-w: 66; /* BRIDE.png */ } /* 387 / 800 = 48.375%、アスペクト 1:1 */ .c-invitationPage--flom .c-invitationSec--profile__photo { flex: 0 0 48.375%; } .c-invitationPage--flom .c-invitationSec--profile__photo img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; } /* テキスト列。氏名 -> GROOM/BRIDE -> 罫線 の順 */ .c-invitationPage--flom .c-invitationSec--profile__meta { flex: 1 1 auto; min-width: 0; text-align: center; } .c-invitationPage--flom .c-invitationSec--profile__name { margin: 0; font-size: calc(var(--cw) * 37 / 800); line-height: 1.3; letter-spacing: 0.08em; } /* GROOM.png 95x18 / BRIDE.png 66x18。幅は --role-w でブロックごとに切替 */ .c-invitationPage--flom .c-invitationSec--profile__role { width: calc(var(--cw) * var(--role-w) / 800); margin: calc(var(--cw) * 16 / 800) auto 0; } /* コンプの細い横罫 = LINE.png 97x3 */ .c-invitationPage--flom .c-invitationSec--profile__deco { width: calc(var(--cw) * 97 / 800); margin: calc(var(--cw) * 26 / 800) auto 0; } .c-invitationPage--flom .c-invitationSec--profile__role img, .c-invitationPage--flom .c-invitationSec--profile__deco img { display: block; width: 100%; height: auto; } /* コメントは写真の下に全幅・中央揃え */ .c-invitationPage--flom .c-invitationSec--profile__comment { /* コンプの字送り範囲 x47-410 = 688px(800換算)。26文字/行なので 1文字あたり 26.5px。全角前提で font-size 26px、 版面は 800-2x5% = 720px 取り 26x26=676px を1行に収める。 */ margin: calc(var(--cw) * 64 / 800) 5%; font-size: calc(var(--cw) * 26 / 800); line-height: 1.95; } .c-invitationPage--flom .c-invitationSec--profile__comment:last-child { margin-bottom: 0; } /* ---- 返信案内 / 備考 ---- */ .c-invitationPage--flom .c-invitationSec--toReply, .c-invitationPage--flom .c-invitationSec--caption { margin: 0; padding: calc(var(--cw) * 72 / 800) 6%; font-size: calc(var(--cw) * 26 / 800); line-height: 2.1; color: var(--flom-ink); } /* 返信案内と備考の間の区切り罫。 design_common.css:130 の #aaa は太く見えるので、コンプの薄い罫に寄せる。 コンプでは全幅（左右のパディングに関係なく端から端まで）なので 罫だけ ::before で全幅に描き、border-top 自体は消す。 */ .c-invitationPage--flom .c-invitationSec--caption { position: relative; border-top: 0; } .c-invitationPage--flom .c-invitationSec--caption::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background-color: #e3d9d7; } /* ---- 返信ボタン ---- ★ 寸法（幅・font-size・padding・line-height）は共通既定に従う。 design_common.css:135-145 の max-width:600px / __btnWrap margin:0 2rem / .c-buttonL padding:2rem 0 と component.css:1094 の font-size:2rem が正。 2026-08-20「回答するボタンの大きさがデザインによってまちまち」の修正で、 コンプ実測から起こしていた寸法上書きを撤去した。既存デザイン約150品番は いずれも色と枠線だけを上書きしており、寸法は触っていない（wi1245-1247 参照）。 ここに font-size / padding / width / max-width / line-height を書き足さないこと。 */ .c-invitationPage--flom .c-invitationSec--replyBtn .c-buttonL { background-color: #111; color: #fff; border: 0; box-shadow: 0 2px 10px rgba(0, 0, 0, .18); } /* reduce-motion 配慮: 連鎖アニメを抑制し、名入れを即表示 */ @media (prefers-reduced-motion: reduce) { .c-flomCover__name, .c-flomCover__amp, .c-flomCover__dateNum, .c-flomCover__dateBar { animation: none; opacity: 1; } .c-flomCover__inner::after { animation: none; opacity: 0; visibility: hidden; } } /* ========================================================= 本文の組版（招待文面 / 日程文面）— カラム落ち対策 2026-08-18: 「本文がカラム落ちしやすい」の指摘への対応。 --------------------------------------------------------- ★ letter-spacing: 0 を必ず明示する。 body に letter-spacing: 0.5px（public/css/commons/style.css:529-533）が 入っていて本文へ継承されるため、放っておくと字送りが font-size + 0.5px に なる。各シリーズの「font-size × 文字数 = 版面幅」という見積りが 全部 0.5px × 文字数ぶん外れており、最後の1〜2文字が落ちる原因になっていた。 ここを 0 に固定すると、上の font-size のコメントの計算がそのまま成立する。 ★ word-break: normal は design_common.css:112 の打ち消し。 同ファイルが .c-invitationSec--scheTxt__middle に word-break: break-all を 当てているので、放っておくと住所の番地や英数字が語中で割れる。 ★ overflow-wrap: anywhere は「1トークンが長すぎる」事故だけを受ける保険。 design_common.js:4-8 の js-textAutoLink は URL を に置換するが、 正規表現に日本語（\u3000-\u30FE / \u4E00-\u9FA0）が入っているため URL の後続日本語まで1本の に飲み込む。これが分割不能な長トークンになり、 この指定が無いと版面をあふれる。 ★ text-wrap: pretty は「折り返すときに末尾へ1〜2文字だけ残さない」ため。 定型文は wi_dtb_invitation_text の実測でブライダル系 24〜32文字、 一般用途系 35〜86文字（id32 は86文字）。長文は折り返すのが正しいので、 折り返し自体は止めず、見え方だけを整える。未対応ブラウザでは無効になるだけ。 ★ --text-fit: 1 は design_text_fit.js の opt-in。 CSS で入り切らない文面（32文字級・お客様の任意入力）を font-size の 自動縮小で受ける。開幕ゲートの --cover-gate と同じ方式で、 品番ごとに実ファイルがある Blade を触らずに対象を増減できる。 ========================================================= */ .c-invitationPage--flom { --text-fit: 1; } .c-invitationPage--flom .c-invitationSec--invTxt__middle, .c-invitationPage--flom .c-invitationSec--scheTxt__middle { letter-spacing: 0; word-break: normal; overflow-wrap: anywhere; } /* text-wrap: pretty は招待文面だけに当てる（2026-08-24 分離）。 pretty の目的は「折り返すときに末尾へ1〜2文字だけ残さない」ことで、 1文＝1行の散文（招待文面）には効くが、日程文面は全角スペースで ラベルと値を揃えた表組みなので、行長を均そうとして会場名の途中で折る。 お客様報告（和乃花）の「場　所　　ホテルサンライフガーデン」が 「…ホテルサン」／「ライフガーデン」に割れたのがこれ。 手元 Chrome 151 では pretty で17文字目・auto で18文字目と1文字差だが、 最適折り返しを実装した engine では大きく手前へ寄る。 */ .c-invitationPage--flom .c-invitationSec--invTxt__middle { text-wrap: pretty; }