@charset "UTF-8"; /* ========================================================= ラ・グラフィ シリーズ 共通スタイル（wi1293 がシリーズの基準ファイル） モバイル基準 --------------------------------------------------------- ★ このファイルは MV 展開 wi1294-wi1297 の design.css から @import url("/web_invitation/design_resource/wi1293/design.css"); で読み込まれる共有スタイル。品番固有の値をここに直接書かないこと。 MV 展開側で上書きするのは「MV ジオメトリ」の5変数だけ: --lg-photo-x / --lg-photo-y / --lg-photo-w / --lg-photo-h … 顧客写真の矩形 --lg-frame-h … frame.png の高さ シリーズ共通クラス: .c-invitationPage--lagraphie … 全品番の
に付与（本シリーズのスコープ） 前身: wi1248（プロトタイプ品番）。構成・アニメーションはそのまま踏襲している。 Figma: Q4hSlSc3LfPFIL8b9lFqW0 / section 2026:29「ラ・グラフィ」 初期状態 = frame 1:2051 / 最終形 = frame 14:66 / 動きメモ 14:56-14:61, 29:27 サムネイル wi1293 = 2045:41 / wi1294 = 2045:38 / wi1295 = 2045:40 wi1296 = 2045:39 / wi1297 = 2045:37 ※ サムネイルは写真の白飛び部分が紙と同じ純白になるため、そこから MV の 抜き寸法を実測してはいけない（オービットで frame.png と横 0.77 倍ずれた）。 MV ジオメトリは frame.png / カバー素材そのものの透過領域を正とする。 キャンバス 800 × 1200 基準。1cqw = 8px（__inner の container-query 幅基準） px 指定は --lg-u（= 0.125cqw = 1px）を掛けて cqw に換算する。 開幕アニメーション（動きメモ準拠 / 総尺 5.0秒 = 150f @30fps） f 0- 10 白ベタ（上部帯・下部帯のみ） f 10- 70 タイトル "Invitation" を左→右へ手書き風リビール …… data.json のマスク f 70-100 名入れテキスト（氏名→リード文→日付）をフェードイン …… 本CSS f100-140 上部帯+タイトルが上へ -306px / 下部帯+名入れが下へ +386px イージーイーズで「パッカーン」 …… data.json + 本CSS f140-150 最終状態を保持 ★ 0ms = 開幕ゲートの解放時刻。ページ読込時刻ではない。 Lottie は design_lottie.js の lottiAnimationOnCoverReady() が 「SVG 組み上がり ＋ 中の画像デコード完了 ＋ 表紙の デコード完了」の 瞬間に goToAndPlay(0) で開始し、同時に
へ .is-coverReady を付ける。 本CSSの表紙アニメーションは animation-play-state: var(--cover-play, paused) で待機しているので、Lottie の frame と CSS の delay は同じ 0ms から動き出す。 よって delay は「フレーム / 30fps」の素の秒数で書く（1秒の下駄は不要）。 2026-08-20 までは旧 lottiAnimationWithSinglePattern() の setTimeout(1000) 分を 各 delay に織り込んでいた。詳細は本ファイル末尾の「開幕ゲート」ブロックと design_cover_ready.js の冒頭コメント。 ========================================================= */ /* ---- フォント ---- Callalily / Callalily_wd は他の花名書体と同じく public/font/ に置き、 design_common.css 側で @font-face 登録済み。ここでは font-family 名で参照するだけ。 ※ ここに @font-face を書くと design_common.css より後に読まれて上書きするので書かない。 */ .c-invitationPage--lagraphie { /* px -> cqw 換算の単位（800px キャンバス基準で 1px） */ --lg-u: 0.125cqw; /* 開幕ゲートの opt-in。 --cover-gate: 1 を見て design_lottie.js の lottiAnimationOnCoverReady() が 動き、素材が揃った時点で
に .is-coverReady が付く。 --cover-play は paused -> running に切り替わり、Lottie と CSS 演出が 同じ 0ms から走り出す（詳細は design_cover_ready.js の冒頭コメント）。 ※ #lottie があるページでは design_cover_ready.js は早期 return するので 二重管理にはならない。 */ --cover-gate: 1; --cover-play: paused; /* ---- MV ジオメトリ（品番ごとに上書きする5変数） ---- 既定値は wi1293「オービット」= Figma 写真 4 (594x655 @103,201) / 枠 4 (800x889) 値は 800x1200 キャンバス上の px。frame.png の透過領域に写真を中央合わせした寸法。 */ --lg-photo-x: 103; --lg-photo-y: 201; --lg-photo-w: 594; --lg-photo-h: 655; --lg-frame-h: 889; /* 開幕アニメーションのタイミング ★ 0ms = 開幕ゲートの解放時刻（= Lottie の実再生開始時刻）なので、 値は「フレーム / 30fps」の素の秒数でよい。 2026-08-20: 旧 lottiAnimationWithSinglePattern() の setTimeout(1000) を 前提に各 delay へ織り込んでいた1秒の下駄を撤去した（下の (旧 ...) が撤去前）。 data.json は fr:30 / op:150 なので --lg-open が frame 100 と厳密一致する。 */ --lg-names-in: 2.333s; /* 70f (旧 3.333s = 1s + 70f) */ --lg-lead-in: 2.6s; /* 78f (旧 3.6s = 1s + 78f) */ --lg-date-in: 2.867s; /* 86f (旧 3.867s = 1s + 86f) */ --lg-open: 3.333s; /* 100f (旧 4.333s = 1s + 100f) */ --lg-open-dur: 1.333s; /* 40f 尺なので不変 */ --lg-fade-dur: 0.8s; /* 24f 尺なので不変 */ --lg-ease: cubic-bezier(.333, 0, .667, 1); /* AE イージーイーズ相当 */ --lg-ink: #0d0d0d; --lg-ink-soft: #4a4a4a; --lg-hairline: #d8d4cd; --lg-paper: #fff; background-color: var(--lg-paper); color: var(--lg-ink); } .c-invitationPage--lagraphie.is-coverReady { --cover-play: running; } /* ========================================================= 名入れ表紙 ========================================================= */ .c-invitationPage--lagraphie .c-invitationSec--title { padding-top: 0; } .c-invitationPage--lagraphie .c-invitationSec--title__inner { position: relative; width: min(100vw, 800px); margin-inline: auto; aspect-ratio: 800 / 1200; overflow: hidden; background-color: var(--lg-paper); container-type: inline-size; /* 子要素の cqw 基準 */ } /* ---- z1 顧客写真 ---- 枠の抜きより大きく取り、object-fit: cover で抜きの形に切り抜かれる */ .c-invitationPage--lagraphie .c-invitationSec--title__photo { position: absolute; inset-inline-start: calc(var(--lg-photo-x) * var(--lg-u)); inset-block-start: calc(var(--lg-photo-y) * var(--lg-u)); width: calc(var(--lg-photo-w) * var(--lg-u)); height: calc(var(--lg-photo-h) * var(--lg-u)); object-fit: cover; z-index: 1; } /* ---- z2 枠（MV） 白地に有機的な穴が空いた透過PNG。写真をシェイプに切り抜く。 品番ごとに frame.png の絵柄と高さが変わる ---- */ .c-invitationPage--lagraphie .c-invitationSec--title__frame { position: absolute; inset-inline-start: 0; inset-block-start: 0; width: 100cqw; height: calc(var(--lg-frame-h) * var(--lg-u)); z-index: 2; pointer-events: none; } /* ---- z3 ホワイトアウト 帯と同じ白なので、帯が開き始める f100（= --lg-open 3.333s）で外す。 ★ 2026-08-20 以前は「Lottie の画像読込が完了するまで写真・枠が露出するのを 防ぐ」役目も担っていたが、外す時刻が 4.333s の固定値で実際の読込完了と 無関係だったため、実回線では幕が先に上がって未描画の Lottie と 未到着の顧客写真が露出していた（同系のトワル wi1265 の実測では カーテン消灯 1100ms に対し Lottie 素材の到着 1313ms で逆転していた）。 現在は開幕ゲート（lottiAnimationOnCoverReady + --cover-play）が 「素材が揃った瞬間」を 0ms にするので、幕は 「f0-f100 の白ベタ演出の一部」として残しているだけ。 8秒の FAILSAFE で強制解放された場合の保険としても効く。 ---- */ .c-invitationPage--lagraphie .c-invitationSec--title__inner::after { content: ""; position: absolute; inset: 0; z-index: 3; background-color: var(--lg-paper); animation: lgWhiteout .01s linear var(--lg-open) forwards; } /* ---- z4 Lottie（上部帯 / 下部帯 / タイトルテキスト） ---- */ .c-invitationPage--lagraphie #lottie { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; } /* ---- z5 名入れテキスト（Figma 名入れテキスト 5: 657×301 @ 73,888） 下部帯の上に乗るため Lottie より前面に置く。 下部帯と同じ +386px を同じイージングで移動させて同期させる。 シリーズ共通（MV が変わっても名入れの位置は動かない） ---- */ .c-invitationPage--lagraphie .c-invitationSec--title__meta { position: absolute; inset-inline-start: 9.125cqw; inset-block-start: 111cqw; width: 82.125cqw; height: 37.625cqw; z-index: 5; text-align: start; pointer-events: none; transform: translateY(-48.25cqw); /* 開幕位置 = top 502px */ animation: lgSlideDown var(--lg-open-dur) var(--lg-ease) var(--lg-open) forwards; } /* ---- 名入れブロック内の配置基準 ---- Figma の完成形フレーム 14:66 は名入れ部分を平坦化画像で持っており、 キャンバス上の生きたテキストノード(29:12-29:16)とは別リビジョンで 氏名・リード文の位置が 28〜48px 食い違っていた。 納品素材 wi1248/_ref/naire_text_ref.png (657x301) の実インク位置を正とする: 氏名 ink y 81-109 x 6-369 リード文 ink y 165-182 / 201-218 / 237-254（行送り 36px）x 4-453 日付 ink y 25-83 / 109-168 / 193-251（行送り 84px）右端 652 ※ Callalily 未受領のためフォールバック serif で描画される。インクが行ボックス内の どこに落ちるかは書体メトリクス依存なので、行ボックスを「行送り = カンプの行ピッチ」 にして中央に寄せる組み方にしてある（書体差が上下対称の微差で収まる）。 実フォント導入後に ±数px の追い込みが必要。 */ /* 氏名（Callalily wd 50px / #0d0d0d） 1行なので flex 中央寄せにして、書体が変わってもインク中心が y=95 に留まるようにする */ .c-invitationPage--lagraphie .c-invitationSec--title__name { position: absolute; inset-inline-start: 0.75cqw; /* カンプ ink left 6px */ inset-block-start: 8.125cqw; /* 65px。高さ60px と合わせて中心 95px */ /* ★ 2026-08-20 65cqw -> 59cqw。 実測（SP390）では日付カラムの左端が x=277.9px（800換算 570）で、 65cqw だと氏名ボックスの右端が 292px（800換算 599）まで伸びて 日付に 14px 食い込んでいた。「x>=532 に当たらない範囲」という 元コメントの前提が実装とズレていた。59cqw で右端が 800換算 550 に収まり 日付まで 20px（800換算）の逃げが残る。 */ width: 59cqw; height: 7.5cqw; display: flex; align-items: center; margin: 0; padding: 0; font-family: "Callalily_wd", "Callalily", "Cormorant Garamond", serif; font-size: 6.25cqw; line-height: 1; /* ★ letter-spacing は .js-resize 側で宣言する（下記）。 letter-spacing の計算値は「長さ」なので、親で .12em と書くと 24.375px から 2.925px に確定して子へ px のまま継承される。 design.js の縮小は font-size だけを下げる単一パスなので、 字送りが縮まないぶん幅が font-size に比例せず、縮小しても はみ出しが残る（19文字で 5px 超過を実測）。子で宣言すれば 子自身の font-size から再計算されるので幅が線形になり1パスで収まる。 2026-08-20 の修正。 */ color: var(--lg-ink); opacity: 0; animation: lgFadeIn var(--lg-fade-dur) ease-out var(--lg-names-in) forwards; } .c-invitationPage--lagraphie .c-invitationSec--title__name .js-resize { display: inline-block; white-space: nowrap; /* 親から移設。子で宣言することで縮小時に字送りも一緒に縮む（上のコメント参照） */ letter-spacing: .12em; /* ★ flex: none が必須。 親 __name は display:flex なので、既定の flex-shrink:1 だと本要素が 親幅まで縮められ、design.js の $target.outerWidth() が「親の幅」を返す。 その結果 nameWidth > nameMaxWidth が永久に成立せず縮小が一度も走らず、 nowrap のテキストだけが箱の外へあふれて右の日付に重なっていた。 flex: none にすると本要素が内容幅（真の字幅）を保つので、 outerWidth() が実測値になり縮小が正しく発火する。 2026-08-20「名前によっては右側の日付にかぶる」の修正。 */ flex: none; } /* リード文（23px / 行送り 36px の3行） 行ボックス 36px の中央にインクが来るため、box top 155.5px で ink 165 に一致する */ .c-invitationPage--lagraphie .c-invitationSec--title__lead { position: absolute; inset-inline-start: 0.5cqw; /* カンプ ink left 4px */ inset-block-start: 19.4375cqw; /* 155.5px */ width: 66cqw; /* 528px。最長行 453px + 余裕。日付と衝突しない */ margin: 0; font-size: 2.875cqw; line-height: 4.5cqw; /* カンプ実測の行ピッチ 36px */ letter-spacing: .01em; color: var(--lg-ink); opacity: 0; font-family: 'Cambria'; animation: lgFadeIn var(--lg-fade-dur) ease-out var(--lg-lead-in) forwards; } /* 挙式日（Callalily 95px / 右揃え3行 / 行送り 84px） font-size > line-height なのでインクは行ボックスから上下にはみ出す。 box top 14px で ink top 25 付近に落ちる */ .c-invitationPage--lagraphie .c-invitationSec--title__date { position: absolute; inset-inline-end: 0; inset-block-start: 1.75cqw; /* 14px */ width: 20cqw; margin: 0; padding: 0; display: block; list-style: none; font-family: "Callalily", "Cormorant Garamond", serif; font-size: 11.875cqw; line-height: 10.5cqw; /* カンプ実測の行ピッチ 84px */ letter-spacing: .02em; text-align: end; color: var(--lg-ink); opacity: 0; animation: lgFadeIn var(--lg-fade-dur) ease-out var(--lg-date-in) forwards; } .c-invitationPage--lagraphie .c-invitationSec--title__date > li { list-style: none; } @keyframes lgFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes lgSlideDown { from { transform: translateY(-48.25cqw); } to { transform: translateY(0); } } @keyframes lgWhiteout { to { opacity: 0; visibility: hidden; } } /* --------------------------------------------------------- ★ 開幕ゲート：表紙の演出は素材が揃うまで止めておく これまでは delay（names 2.333s / lead 2.6s / date 2.867s / open 3.333s）が 「最初の描画」から動き出していた。一方で Lottie の帯・タイトルと お客様写真はネットワーク次第で後から届くため、幕が先に上がって 未描画の SVG と未到着の写真が露出していた ＝「開始時にアニメーションが始まるが画像が追い付かず崩れて見える」。 animation-play-state: paused は delay の消化も止めるので、 素材が揃うまで待たせてから running にすれば「揃った瞬間が 0ms」になる。 個々のルールに書き足すのではなくここでまとめて上書きしているのは、 上のルールが animation ショートハンドで書かれており、ショートハンドが animation-play-state を初期値 running に戻してしまうため。 MV展開（wi1294-wi1297）が animation を再宣言しても running に戻らない。 --cover-play は .c-invitationPage--lagraphie が持つ。継承するので __inner::after にも届く。 2026-08-20: 「開始時に画像が追い付かず崩れて見える」の修正（全新デザインへの展開）。 --------------------------------------------------------- */ .c-invitationPage--lagraphie .c-invitationSec--title__inner::after, .c-invitationPage--lagraphie .c-invitationSec--title__meta, .c-invitationPage--lagraphie .c-invitationSec--title__name, .c-invitationPage--lagraphie .c-invitationSec--title__lead, .c-invitationPage--lagraphie .c-invitationSec--title__date { animation-play-state: var(--cover-play, paused); } /* 動きを減らす設定：開幕演出を省略して最終状態を即表示する */ @media (prefers-reduced-motion: reduce) { .c-invitationPage--lagraphie .c-invitationSec--title__meta { transform: translateY(0); animation: none; } .c-invitationPage--lagraphie .c-invitationSec--title__name, .c-invitationPage--lagraphie .c-invitationSec--title__lead, .c-invitationPage--lagraphie .c-invitationSec--title__date { opacity: 1; animation: none; } .c-invitationPage--lagraphie .c-invitationSec--title__inner::after { animation: none; opacity: 0; visibility: hidden; } } /* ========================================================= 全体ページ（招待文面以降） 表紙のトーン（白基調 / ヘアライン / 広いレタースペース）に合わせる ※ MV 展開でも本文セクションは一切変わらない（見出し素材も全品番同一ファイル） ========================================================= */ .c-invitationPage--lagraphie .c-invitationSec--invTxt, .c-invitationPage--lagraphie .c-invitationSec--scheTxt { max-width: 800px; margin-inline: auto; padding-block: 8rem 6rem; padding-inline: 0; background-color: transparent; color: var(--lg-ink); } /* セクション見出し（受領素材の画像。幅は 800px キャンバス基準の実寸比） invTxt_top.png = MESSAGE 343x53 / ttlInfo.png = INFORMATION 494x52 */ .c-invitationPage--lagraphie .c-invitationSec--invTxt__top, .c-invitationPage--lagraphie .c-invitationSec--scheTxt__ttl { margin-inline: auto; margin-block-end: 4rem; } .c-invitationPage--lagraphie .c-invitationSec--invTxt__top { width: min(42.875%, 34.3rem); } .c-invitationPage--lagraphie .c-invitationSec--scheTxt__ttl { width: min(61.75%, 49.4rem); } .c-invitationPage--lagraphie .c-invitationSec--invTxt__top img, .c-invitationPage--lagraphie .c-invitationSec--scheTxt__ttl img { width: 100%; height: auto; } /* 本文の版面。 1.3rem(=SP 13px) + margin-inline 3rem では最長行 「このたび　私たちは結婚式を挙げることになりました」24文字が 13px x 24 + letter-spacing = 324px となり、版面 375-60=315px を超えて カラム落ちしていた。800px キャンバス基準の比例指定に置き換え、 26px x 24 = 624px < 704px（左右6%）の余裕を作る。 */ .c-invitationPage--lagraphie .c-invitationSec--invTxt__middle, .c-invitationPage--lagraphie .c-invitationSec--scheTxt__middle, .c-invitationPage--lagraphie .c-invitationSec--toReply__txt, .c-invitationPage--lagraphie .c-invitationSec--caption__txt { --cw: min(100vw, 800px); margin-inline: 6%; font-size: calc(var(--cw) * 26 / 800); line-height: 2.2; letter-spacing: .04em; color: var(--lg-ink-soft); } /* ---- 写真2 + COUNT DOWN ---- 全体コンプの写真帯は全幅・3:2（800x533相当）で、その上にカウントダウンを重ねる。 表紙の写真枠とは別物なのでここでは帯として全幅に敷き、object-fit: cover で切り抜く。 .c-countdownSection は position:absolute / inset:0 なので位置基準を作る （design_common.css 側に position 指定は無い）。 */ .c-invitationPage--lagraphie .c-invitationSec--img02 { --cw: min(100vw, 800px); position: relative; max-width: 800px; margin-inline: auto; margin-block-end: 0; } .c-invitationPage--lagraphie .c-invitationSec--img__img02 { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; } .c-invitationPage--lagraphie .c-countdownSection { background-color: rgba(13, 13, 13, .3); /* --lg-ink ベースのスクリム */ } .c-invitationPage--lagraphie .c-countdown { /* Callalily は数字が不揃いなのでカウントダウンだけ Gerbera を使う （ライニング数字で 85 / 10 25 31 の高さが揃う） */ font-family: "Gerbera", serif; letter-spacing: .04em; } .c-invitationPage--lagraphie .c-countdown__textCD { font-size: calc(var(--cw) * 43 / 800); letter-spacing: .1em; text-indent: .1em; } .c-invitationPage--lagraphie .c-countdown__row1 { margin-top: calc(var(--cw) * 30 / 800); } .c-invitationPage--lagraphie .c-countdown__days, .c-invitationPage--lagraphie .c-countdown__textBD { font-size: calc(var(--cw) * 100 / 800); line-height: 1; white-space: nowrap; } .c-invitationPage--lagraphie .c-countdown__textL { margin-top: calc(var(--cw) * 22 / 800); font-size: calc(var(--cw) * 43 / 800); line-height: 1; letter-spacing: .14em; text-indent: .14em; font-variant-caps: small-caps; } /* u-justifySelfEnd / Center / Start は public/css 配下に定義が無く効かないため 3列を等幅にして各セルを中央寄せに明示する（無いと文字同士がぶつかる） */ .c-invitationPage--lagraphie .c-countdown__row2 { width: 96%; margin-top: calc(var(--cw) * 34 / 800); column-gap: calc(var(--cw) * 16 / 800); } .c-invitationPage--lagraphie .c-countdown__row2 > div { justify-self: center; min-width: 0; } .c-invitationPage--lagraphie .c-countdown__hours, .c-invitationPage--lagraphie .c-countdown__minutes, .c-invitationPage--lagraphie .c-countdown__seconds { font-size: calc(var(--cw) * 92 / 800); line-height: 1.1; white-space: nowrap; } .c-invitationPage--lagraphie .c-countdown__textS { margin-top: calc(var(--cw) * 10 / 800); font-size: calc(var(--cw) * 22 / 800); letter-spacing: .08em; text-indent: .08em; white-space: nowrap; } .c-invitationPage--lagraphie .c-invitationSec--toReply { margin-block: 6rem; margin-inline: 3rem; font-size: 1.3rem; line-height: 2.2; letter-spacing: .04em; color: var(--lg-ink-soft); } .c-invitationPage--lagraphie .c-invitationSec--caption { border-top-color: var(--lg-hairline); font-size: 1.3rem; line-height: 2.2; color: var(--lg-ink-soft); } /* 返信ボタン（コンプ通り黒の塗りピル + 白文字。hover で反転） */ .c-invitationPage--lagraphie .c-invitationSec--replyBtn__btnWrap .c-buttonL { color: var(--lg-paper); background-color: var(--lg-ink); border: 1px solid var(--lg-ink); letter-spacing: .14em; transition: color .3s ease, background-color .3s ease; } .c-invitationPage--lagraphie .c-invitationSec--replyBtn__btnWrap .c-buttonL:hover, .c-invitationPage--lagraphie .c-invitationSec--replyBtn__btnWrap .c-buttonL:focus-visible { color: var(--lg-ink); background-color: var(--lg-paper); } /* ========================================================= プロフィール（独自マークアップ） 受領素材: profile_ttl.png 285x52 / profile_deco.png 97x3 profile_groom.png 95x18 / profile_bride.png 66x18 全体コンプにルーラーを重ねた実測を 800px 換算した値: 新郎写真 222角 -> 387角（48.375%）外マージン 5% 新婦写真 右寄せ（左右交互） 氏名 字面高18.3 -> font-size 37 / ラベル GROOM 95・BRIDE 66 罫線 97 / コメント 26px・行送り1.95・左右5% 写真は正方形なので wi_dtb_design.image_profile_ratio も 1:1 にする。 氏名は和文なので font{{$font_id}}（お客様選択）を継承させる。 ========================================================= */ .c-invitationPage--lagraphie .c-invitationSec--profile { --cw: min(100vw, 800px); max-width: 800px; margin-inline: auto; padding: calc(var(--cw) * 60 / 800) 0 calc(var(--cw) * 88 / 800); line-height: 2; text-align: center; } .c-invitationPage--lagraphie .c-invitationSec--profile__ttl { width: 35.625%; max-width: 285px; margin: 0 auto calc(var(--cw) * 82 / 800); } .c-invitationPage--lagraphie .c-invitationSec--profile__ttl img { display: block; width: 100%; height: auto; } /* 写真 + テキストの行。新婦は左右反転 */ .c-invitationPage--lagraphie .c-invitationSec--profile__block { display: flex; align-items: center; } .c-invitationPage--lagraphie .c-invitationSec--profile__block--groom { padding-left: 5%; --role-w: 95; /* profile_groom.png */ } .c-invitationPage--lagraphie .c-invitationSec--profile__block--bride { flex-direction: row-reverse; padding-right: 5%; --role-w: 66; /* profile_bride.png */ } .c-invitationPage--lagraphie .c-invitationSec--profile__photo { flex: 0 0 48.375%; } .c-invitationPage--lagraphie .c-invitationSec--profile__photo img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; } /* テキスト列。氏名 -> GROOM/BRIDE -> 罫線 の順 */ .c-invitationPage--lagraphie .c-invitationSec--profile__meta { flex: 1 1 auto; min-width: 0; text-align: center; } .c-invitationPage--lagraphie .c-invitationSec--profile__name { margin: 0; font-size: calc(var(--cw) * 37 / 800); line-height: 1.3; letter-spacing: .08em; color: var(--lg-ink); } .c-invitationPage--lagraphie .c-invitationSec--profile__role { width: calc(var(--cw) * var(--role-w) / 800); margin: calc(var(--cw) * 16 / 800) auto 0; } .c-invitationPage--lagraphie .c-invitationSec--profile__deco { width: calc(var(--cw) * 97 / 800); margin: calc(var(--cw) * 26 / 800) auto 0; } .c-invitationPage--lagraphie .c-invitationSec--profile__role img, .c-invitationPage--lagraphie .c-invitationSec--profile__deco img { display: block; width: 100%; height: auto; } /* コメントは写真の下に全幅・中央揃え */ .c-invitationPage--lagraphie .c-invitationSec--profile__comment { margin: calc(var(--cw) * 64 / 800) 5%; font-size: calc(var(--cw) * 26 / 800); line-height: 1.95; letter-spacing: .04em; color: var(--lg-ink-soft); } .c-invitationPage--lagraphie .c-invitationSec--profile__comment:last-child { margin-bottom: 0; } /* ========================================================= 本文の組版（招待文面 / 日程文面）— カラム落ち対策 2026-08-24: 「日程文面の日時が変なところで改行される」の調査で、 本シリーズが 2026-08-18 に他5シリーズへ入れた組版パスを 受けていないことが判明したので、同じ手当てを入れる。 --------------------------------------------------------- ★ font-size 26px -> 24px と letter-spacing: 0 は「セット」で必要。 上の版面ブロック（:387-403）は最長行を 24文字と見積って 26px にしたが、 定型文の最長行は wi_dtb_invitation_text の実測でブライダル系 24〜32文字。 26px + letter-spacing .04em = 字送り 13.182px（390px 幅での実測値）だと 版面 343px に 26.0文字しか入らず、32文字の定型文（id12/13）が 27文字目で折れて残り5文字が次行に浮いていた（実測 brk=27）。 さらにこの状態では下の --text-fit も効かない： 必要な縮小率 = 343 / (32 × 13.182) = 0.813 design_text_fit.js:35 の MIN_SCALE = 0.88 を下回るので 「1行に収める設計ではない長文」と判断されて JS は何もしない。 letter-spacing: 0 + 24px にすると 343 / (32 × 11.7) = 0.916 となり、 MIN_SCALE を超えて自動縮小が働くようになる。 ※ 他5シリーズも 2026-08-18 に同じ理由で 26px から下げている （wi1263 は 22px / wi1265 は 23px / wi1279 は 24px / wi1288 は 25px 据置）。 ★ letter-spacing: 0 は body の 0.5px（public/css/commons/style.css:529-533） ではなく、上のブロック自身の .04em を打ち消すためのもの。 .04em は「計算値が長さ」なので子へ px で継承され、 font-size を下げても字送りが縮まない（design_text_fit.js は font-size しか触らないので、縮小が非線形になって予算を食い破る）。 ★ word-break: normal は design_common.css:112 の打ち消し。 同ファイルが .c-invitationSec--scheTxt__middle に word-break: break-all を 当てているので、放っておくと住所の番地や英数字が語中で割れる。 （招待文面側は design_common.css の対象外なので元から normal） ★ overflow-wrap: anywhere は「1トークンが長すぎる」事故だけを受ける保険。 design_common.js:4-8 の js-textAutoLink は URL を に置換するが、 正規表現に日本語レンジが入っているため URL の後続日本語まで 1本の に飲み込む。これが分割不能な長トークンになる。 2026-08-24 の実測で、この指定が折り返し位置を壊す原因ではないことは 確認済み（箱幅は max-content / available どおりに決まっていた）。 ★ text-wrap: pretty は招待文面だけに当てる。日程文面には当てない。 pretty の目的は「折り返すときに末尾へ1〜2文字だけ残さない」ことで、 1文＝1行の散文（招待文面）には効くが、 日程文面は全角スペースでラベルと値を揃えた表組みなので、 行長を均そうとして会場名の途中で折る挙動になる。 2026-08-24 のお客様報告（和乃花）で 「場　所　　ホテルサンライフガーデン」が 「…ホテルサン」／「ライフガーデン」に割れたのがこれ。 手元 Chrome 151 では pretty で17文字目・auto で18文字目と1文字差だが、 最適折り返しを実装した engine では大きく手前へ寄る。 ★ --text-fit: 1 は design_text_fit.js の opt-in。 CSS で入り切らない文面（32文字級・お客様の任意入力）を font-size の 自動縮小で受ける。開幕ゲートの --cover-gate と同じ方式で、 品番ごとに実ファイルがある Blade を触らずに対象を増減できる。 wi1294-1297 は本ファイルを @import しているので5品番すべてに伝播する。 ★ 版面のヘッドルームは端末側の「文字だけ拡大」を吸収しきれない。 font-size は vw 基準（calc(var(--cw) * N / 800)）なので、 ブラウザの文字サイズ設定で文字だけが拡大されると版面は広がらず、 許容文字数が倍率に反比例して減る。2026-08-24 の実測では 和乃花で 1.45 倍から最長行が折れ始めた（ヘッドルーム 1.44 倍）。 CSS 単体では解決できないので、最長行に余裕を持たせて緩和するしかない。 ========================================================= */ .c-invitationPage--lagraphie { --text-fit: 1; } .c-invitationPage--lagraphie .c-invitationSec--invTxt__middle, .c-invitationPage--lagraphie .c-invitationSec--scheTxt__middle { font-size: calc(var(--cw) * 24 / 800); letter-spacing: 0; word-break: normal; overflow-wrap: anywhere; } .c-invitationPage--lagraphie .c-invitationSec--invTxt__middle { text-wrap: pretty; }