@charset "UTF-8"; /* ========================================================= トワル（Toile）シリーズ 共通スタイル（wi1265「01 睡蓮」がシリーズの基準ファイル） モバイル基準 --------------------------------------------------------- ★ このファイルは今後の絵柄展開（02, 03 …）の design.css から @import url("/web_invitation/design_resource/wi1265/design.css"); で読み込ませる想定の共有スタイル。品番固有の値をここに直接書かないこと。 展開側で上書きするのは次の2点だけ: --toile-base-bg … 読込前の下地色（cover.png 最下部の実測色） .c-toileCover__inner::after の background-image（カーテン用 base.jpg） ※ @import 内の url() は「宣言があるスタイルシート」= 常に wi1265/ 基準で解決されるため、展開側では必ず自品番の base.jpg で再宣言する 展開側にも中身が @import 1行だけの design_pc.css を必ず置くこと （_header_blank.blade.php:25 は design_pc.css の存在を読込トリガにしている） シリーズ共通クラス: .c-invitationPage--toile … 全品番の
に付与（本文セクションのスコープ） .c-toileCover / .c-toileTtl … 表紙・見出しコンポーネント Figma: Tze703h9ZUnK16ohz02AsR / section 1:2 完成形の静止デザイン = frame 1:3（800×1085、実レイヤーは 1:54-1:65） 最終形の実レイヤー群 = 1:37「Group 1」 動きメモ = 1:5-1:18（初期状態 1:29 → タイトル 1:31+1:35 → 明転 1:50+1:32 → 完成 1:37） キャンバス: 800 × 1085 フォント 氏名 = NewYork（public/font/NEWYORK.OTF） design_common.css に @font-face 登録が無い書体なので本ファイルで登録する （grep 済み: design_resource 配下で NewYork を宣言しているのは本ファイルのみ） 日付 = Lupine（design_common.css:549 で登録済み → 参照のみ） --------------------------------------------------------- レイヤー分担（動きメモ 1:6-1:9 の指示に対応） Lottie(data.json) … cover / base / title = 全カップル共通の装飾 blade + 本CSS … 顧客写真 / 氏名 / 日付 / 装飾テキスト 動きメモのレイヤー凡例（1:16-1:18, 1:25-1:27） ③ op.png -> base.jpg 暗い背景。最初だけ見えていて後にフェードアウト ② カバー.png -> cover.png 明るい背景。中央に透明な抜き窓（金の縁つき） ① 写真.jpg -> 顧客写真。cover.png の窓から覗く（HTML 側に置く） 素材の実測（純Python の PNG デコーダで画素走査） cover.png 801×1086 の完全透過領域（＝抜き窓） x 92..709（幅 618） / y 69..674（高 606） 中心 (400.5, 371.5) → 窓の外周は全面不透明なので、顧客写真は窓の外接矩形ぴったりに置けば はみ出しは cover.png が完全に隠す（clip-path 不要） 窓の縁の金色は cover.png に焼き込み済み rgb(160,129,70) cover.png はキャンバスより 1px 大きいので data.json 側でセンタリングして 0.5px ずつ振り分ける（p=[400,542.5] / a=[400.5,543]） タイムライン（★ 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.jpg はカーテンと Lottie frame0 で同じ絵なので継ぎ目が出ない） 200-1200ms title がその場でフェードイン（frame 6-36。動きメモ 1:7） 1200-2000ms title を保持 → 動きメモ「ここまで3秒」(1:10) を満たす 2000-3000ms title フェードアウトと同時に base がフェードアウトし、 背後の cover + 顧客写真が現れる（frame 60-90。動きメモ 1:8） 3000-5000ms ①氏名 → ②日付 → ③装飾テキスト の順にフェードイン （= var(--toile-phase2) 以降。動きメモ「テキスト表示2秒」1:11） ========================================================= */ /* NewYork は design_common.css に未登録（Cambria の事故と同じくファイル名の 大文字小文字は Linux で厳密。実体は public/font/NEWYORK.OTF）。 404 に気づけるようフォールバックを必ず併記する。 */ @font-face { font-family: "NewYork"; src: url("../../font/NEWYORK.OTF") format("opentype"); font-weight: normal; font-style: normal; font-display: swap; } :root { /* ★ 2026-08-17「開始時の背景や画像表示の挙動が乱れる」の修正で 時間の起点そのものを付け替えた。 旧: Lottie は design_lottie.js の setTimeout(1000) で再生開始。 CSS 側の delay もその 1 秒を織り込んだ「ページ描画からの実時間」 で書いていた。ところが CSS の時計は最初の描画から動くのに対し、 data.json の取得はモジュール実行後に始まるので別クロックになる。 実測（SP390 / キャッシュ無効）では カーテン消灯 = 1100ms 地点で既に finished Lottie の cover.png(391KB) の到着 = 1313ms と逆転し、カーテンが上がった後に Lottie が未描画。その一瞬だけ 装飾の無い顧客写真が露出し、後から暗い base が乗っていた。 新: design_lottie.js の lottiAnimationOnCoverReady() が 「SVG が組み上がって中の画像もデコード済み」になった瞬間に play() し、同時に
へ .is-coverReady を付ける。 表紙の CSS アニメーションは animation-play-state で待機しているので、 Lottie と CSS が同じ 0ms から走り出す。 よって「Lottie 読込待ち」の 1 秒は不要になり 0ms にした。 */ --toile-lottie-delay: 0ms; /* Lottie frame90(=再生開始から3000ms) で base のフェードアウトが完了する。 起点が実再生時刻になったので、素の 3000ms でよい（旧 4000ms = 1000+3000）。 */ --toile-phase2: 3000ms; --toile-ease: cubic-bezier(0.42, 0, 0.58, 1); /* ---- ここから下は絵柄展開で上書きする（既定 = wi1265「01 睡蓮」） ---- */ /* cover.png 最下行(400, h-1) の実測色。読込前とアスペクト端の下地 */ --toile-base-bg: #275d59; } /* --------------------------------------------------------- 開幕ゲートの opt-in --cover-gate: 1 を見て design_cover_ready.js / design_lottie.js が動く。 --cover-play は表紙の全アニメーションの animation-play-state に渡してあり、 素材が揃うまで paused、揃った時点で running に切り替わる。 paused は delay の消化も止めるので、これだけで「揃った瞬間を 0ms にする」が 成立する（詳細は design_cover_ready.js の冒頭コメント）。 --------------------------------------------------------- */ .c-invitationPage--toile { --cover-gate: 1; --cover-play: paused; } .c-invitationPage--toile.is-coverReady { --cover-play: running; } /* ========================================================= 名入れ表紙 ========================================================= */ .c-toileCover { padding: 0; margin: 0; } .c-toileCover__inner { position: relative; width: min(100vw, 800px); margin-inline: auto; aspect-ratio: 800 / 1085; overflow: hidden; container-type: inline-size; /* 子要素の cqw 基準 = カバー幅 */ background-color: var(--toile-base-bg); } /* ---- z1 顧客写真 ---- cover.png の抜き窓の外接矩形ぴったり（x92 y69 618×606）。 窓の外にはみ出した分は cover.png（全面不透明）が隠す。 窓は 618:606 ≒ 1:1 なので wi_dtb_design.image1_ratio_x/y も 1/1 にする。 */ .c-toileCover__photo { position: absolute; left: 11.5%; /* 92 / 800 */ top: 6.3594%; /* 69 / 1085 */ width: 77.25%; /* 618 / 800 */ height: 55.8525%; /* 606 / 1085 */ 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-toileCover__name, .c-toileCover__date, .c-toileCover__subtext { position: absolute; z-index: 3; color: #fff; pointer-events: none; } /* ① 氏名（Figma 1:58 / NewYork 66px / box 574×80 @ 114,709） "DAISUKE and RINKA" のように新郎・新婦を1行で組む。 長い氏名で枠を超えないよう design.js が js-resize の font-size を詰める。 */ .c-toileCover__name { left: 14.25%; /* 114 / 800 */ top: 65.3456%; /* 709 / 1085 */ width: 71.75%; /* 574 / 800 */ font-family: "NewYork", "Cormorant Garamond", "Times New Roman", serif; font-size: 8.25cqw; /* 66 / 800 */ line-height: 1.2121; /* 80 / 66 */ text-align: center; white-space: nowrap; opacity: 0; animation: toileFade .5s var(--toile-ease) var(--toile-phase2) both; } .c-toileCover__name .js-resize { display: inline-block; } /* ② 日付（Figma 1:59-1:64 / Lupine 63px / 区切り線 1×53px） 実測スパン 272→529px = 257px。数字3つ + 区切り線2本 + 余白4つ×23px。 数字ボックスは Figma のテキスト実測幅（月52.0 / 日57.0 / 年56.0）をそのまま使う。 52 +23+1+23+ 57 +23+1+23+ 56 = 259 ≒ 257 区切り線は左から 75px / 179px の位置に来る（Figma 実測 75 / 178 と一致） ★ white-space: nowrap 必須。Lupine の 2桁は 52-57px あり、 ボックス幅を実測より詰めると "09" が "0"/"9" の2行に割れる。 数字の字面高は 35px なので、区切り線(53px)の中央に揃える。 */ .c-toileCover__date { left: 0; width: 100%; top: 78.4793%; /* 851.5 / 1085 = 日付ブロックの垂直中心 */ transform: translateY(-50%); display: flex; align-items: center; justify-content: center; gap: 2.875cqw; /* 23 / 800 */ font-family: "Lupine", serif; font-size: 7.875cqw; /* 63 / 800 */ line-height: 1; } .c-toileCover__dateNum { flex: 0 0 auto; text-align: center; white-space: nowrap; opacity: 0; /* ★ 数字を罫線（.c-toileCover__dateBar 53px）の縦中央に合わせる。 align-items:center は「行ボックス」を中央に置くので、Lupine の オールドスタイル数字は字面が下にずれる。63px 時の実測: fontAscent 55 / fontDescent 8（合計ちょうど 1em） 数字 0-9 のインクは baseline-44 〜 baseline+16 → インク中心は baseline の 14px 上、baseline は箱中心 +23.5px なので インク中心が罫線中心より 9.5px 下がる（実測 delta +9.5px）。 9.5px 持ち上げて打ち消す。罫線側は Figma(1:63,1:64 / 表紙内 y825 h53)の 位置が正しいので動かさない。transform ではなく top で寄せるのは、 フェードの animation が transform を使い始めても壊れないようにするため。 2026-08-17: 「挙式日が罫線に対して下に寄っている」の修正。 */ position: relative; top: -1.1875cqw; /* -9.5 / 800 */ } .c-toileCover__dateNum--month { width: 6.5cqw; /* 52 / 800 */ animation: toileFade .4s var(--toile-ease) calc(var(--toile-phase2) + 650ms) both; } .c-toileCover__dateNum--day { width: 7.125cqw; /* 57 / 800 */ animation: toileFade .4s var(--toile-ease) calc(var(--toile-phase2) + 730ms) both; } .c-toileCover__dateNum--year { width: 7cqw; /* 56 / 800 */ animation: toileFade .4s var(--toile-ease) calc(var(--toile-phase2) + 810ms) both; } /* 区切り線（Figma 1:63,1:64 / 1×53px）。数字より先に出す */ .c-toileCover__dateBar { flex: 0 0 auto; width: 1px; height: 6.625cqw; /* 53 / 800 */ background-color: #fff; opacity: 0; animation: toileFade .3s linear calc(var(--toile-phase2) + 550ms) both; } /* ③ 装飾テキスト（Figma 1:65 / 支給画像 subtext.png 570×106 @ 116,920） */ .c-toileCover__subtext { left: 14.5%; /* 116 / 800 */ top: 84.7926%; /* 920 / 1085 */ width: 71.25%; /* 570 / 800 */ height: 9.7696%; /* 106 / 1085 */ opacity: 0; animation: toileFade .7s var(--toile-ease) calc(var(--toile-phase2) + 1300ms) both; } /* ---- z4 カーテン: Lottie読込待機(1秒)の間を base.jpg で覆い、開幕へ繋ぐ ---- ★ url() は「宣言があるスタイルシート」= 常に wi1265/design.css を基準に 解決される（@import 先でも基準は変わらない）。絵柄展開側では background-image を自ディレクトリの base.jpg で必ず上書きすること。 */ .c-toileCover__inner::after { content: ""; position: absolute; inset: 0; z-index: 4; background: url("base.jpg") center / cover no-repeat; animation: toileCurtain .01s linear calc(var(--toile-lottie-delay) + 100ms) forwards; } @keyframes toileFade { from { opacity: 0; } to { opacity: 1; } } @keyframes toileCurtain { to { opacity: 0; visibility: hidden; } } /* --------------------------------------------------------- ★ 開幕ゲート：表紙の演出は素材が揃うまで止めておく 上の各ルールは animation ショートハンドで書いてあり、ショートハンドは animation-play-state を初期値 running に戻してしまう。そのため ここでソース順を後にして play-state だけを上書きする。 （個々のルールに書き足す方式は、絵柄展開側が animation を再宣言したときに running へ戻ってしまうので採らない） --cover-play は .c-invitationPage--toile が持つ。継承するので ::after にも届く。値は素材が揃うまで paused、揃った時点で running。 2026-08-17: 「開始時の背景や画像表示の挙動が乱れる」の修正。 --------------------------------------------------------- */ .c-toileCover__name, .c-toileCover__dateNum, .c-toileCover__dateBar, .c-toileCover__subtext, .c-toileCover__inner::after { animation-play-state: var(--cover-play, paused); } /* ========================================================= 本文セクション（表紙より下） --------------------------------------------------------- 基準は全体コンプ Figma 10:30「■WEB招待状_トワル_招待状_睡蓮」 （600×5016 のフラット画像 ＝ 800×6688 相当。実測は 1200×10032 の 2x 書き出しに 対して行い、×2/3 して 800px キャンバスへ換算した）。 構成: 睡蓮の絵をページ背景に敷き、その上に和紙パネル(.c-toileSheet)を重ねる。 ページ背景 base.jpg を 150% 幅でリピート （コンプの左右帯は 1636px 周期で繰り返しており、 base.jpg 1085px × 1.5 = 1627.5px とほぼ一致する） 和紙パネル washi.jpg（AdobeStock_534930008.jpeg「Old paper texture」から 800×800 のシームレスタイルを生成。ミラー4象限なので継ぎ目が出ない） x 26..775（幅 749 / キャンバス 800）、下端に 40px の余白 見出し・欧文ラベルはトワル用の支給画像。いずれも 800px キャンバスに 原寸(1:1)で置く（実測とアセットの寸法が一致することを確認済み）。 invitation.png 469x52（実測 467x51）/ information.png 566x52（563x50） profile.png 312x52（309x51）/ groom.png 109x18（107x16）/ bride.png 82x18 ※ Flom(wi1279) にあった LINE.png（GROOM/BRIDE 下の罫）はコンプに無いので使わない。 本文の和文は font{{$font_id}}（お客様選択）を継承する。 実測した組版 本文・日程・返信案内・備考 字送り 24px / 行送り 50px（= 2.08） プロフィールのコメント 字送り 24px / 行送り 45.5px（= 1.9） プロフィール氏名 字面高 30 -> 34px ========================================================= */ .c-invitationPage--toile { --cw: min(100vw, 800px); /* 800px キャンバスの 1px */ --u: calc(var(--cw) / 800); --toile-ink: #2e2e2e; --toile-gold: #c2a04f; /* 見出し画像の実測色。罫や差し色を合わせる */ --toile-paper: #f6f6f4; /* washi.jpg の平均色。読込前の下地 */ /* 返信案内と備考の間の罫。 2026-08-18 「備考上に他シリーズ同様線を入れる」の修正。 全体コンプの実測は差し色そのもの（藤で #0789dd を 56% 被覆、 R/G/B すべて α=0.56 で一致）だった。旧実装は紙色へ寄せて薄くしており 和紙の上でほぼ見えなかったので、品番の差し色をそのまま使う。 */ --toile-rule: var(--toile-btn); --toile-btn: #387061; /* 返信ボタンの緑（実測） */ /* COUNT DOWN の数字用。表紙の Lupine はオールドスタイル数字で "2082" が "2o82" のように崩れるため、ライニング数字の Gerbera を使う */ --toile-display: "Gerbera", serif; color: var(--toile-ink); /* ページ背景 = 睡蓮。cover.png は抜き窓が透明なのでここでは使えない。 2026-08-18: 専用背景 bg.jpg（800x1635）が支給されたので、base.jpg を 150% に 拡大して流用していたのをやめ、他品番と同じ等倍タイルへ揃えた。 */ /* 2026-08-19 「MV と下部セクションの背景がつながらない」の修正（2度目・確定版）。 ★ 支給の bg.jpg は「下端が MV(base.jpg 800x1085) の下端に接する」ように作られている。 base.jpg の最終行に一番近い行を bg.jpg 全行から総当たりで探すと、9品番中7品番で bg.jpg の最終行が最良一致だった。つまり上下反転して敷いて初めてつながる素材。 依頼文の「向き」は文字どおり上下の向きのこと。位相をずらすだけでは解決しない。 （2026-08-18 に -817 で入れ、手元で -503 まで目視調整されていたが、 ずらし方式ではそもそも合わない。本方式で置き換えた） ★ CSS は background-image を反転できないので、bg_mirror.jpg = [bg.jpg を上下反転][bg.jpg そのまま] を縦連結した 800x3270 を生成して敷く。 行0 = bg 最終行 → MV の下端に接する（依頼の「下向きで始まる」） 行1634/1635 = bg 先頭行 → 同じ行が隣接するのでタイル内部の継ぎ目はゼロ 行3269 = bg 最終行 → 次タイルの行0 と同じなのでリピート継ぎ目もゼロ 結果 上(MV)・下・上・下… となり、依頼の「上・下・上」になる。 ★ background ショートハンドは background-position を初期値へ戻すので、 位置の longhand は必ずショートハンドより後に書くこと。 ★ 1085 = MV の高さ。base.jpg は全品番 800x1085 なので、この値は全品番共通。 bg.jpg を差し替えたら bg_mirror.jpg を必ず作り直すこと（生成手順は .claude/skills/web-invitation-fix/references/case-2026-08-18-three-series-bg-rule-anim.md）。 */ /* --------------------------------------------------------- 2026-08-20 「背景画像の上部につなぎ目の線が見えている」の修正（wi1270 指摘）。 ★ 原因は位相でも向きでもない。base.jpg と bg.jpg の露出が揃っていない。 MV 下端（base.jpg 最終行）と背景上端（bg 最終行）の色差を測ると wi1270 は 37.65（同一画像内の自然な行間変化 3.22 の 11.7 倍）あった。 bg_mirror.jpg の全 3140 行を総当たりしても最良一致は 35.09 で、 どの行を上端にしても段差は消えない（= 位相調整では直らない）。 ★ そこで MV 下端の実測色から背景へ渡すグラデーションを1層重ねて段差をならす。 上端は base.jpg 最終行の平均色そのものなので MV と連続し、 240px（800換算）で背景へ溶ける。1px あたり 0.16 階調なので自然変化に埋もれる。 ★ opt-in は --toile-seam。未宣言なら transparent で完全に無効なので、 段差が問題にならない品番（wi1266 は倍率 1.0）には影響しない。 ★ 実測した段差の倍率と base.jpg 最終行の色（有効化はこの1行を足すだけ）: wi1265 3.7倍 --toile-seam: #355451; wi1266 1.0倍 （不要） wi1267 5.6倍 --toile-seam: #596066; wi1268 4.6倍 --toile-seam: #62573a; wi1269 3.3倍 --toile-seam: #6c6940; wi1270 11.7倍 --toile-seam: #556f67; ← 適用済み wi1271 4.0倍 --toile-seam: #414858; wi1272 3.3倍 --toile-seam: #444a45; wi1273 5.9倍 --toile-seam: #7b838b; 根本解決は bg.jpg の露出を base.jpg に合わせて再支給してもらうこと。 ★ background ショートハンドは position/size を初期値へ戻すので、 2層構成では longhand で書く（ショートハンドに戻さないこと）。 --------------------------------------------------------- */ background-image: linear-gradient(to bottom, var(--toile-seam, transparent), transparent), url("bg_mirror.jpg"); background-repeat: no-repeat, repeat; background-size: 100% calc(var(--cw) * 240 / 800), 100% auto; background-position: center calc(var(--cw) * 1085 / 800), center calc(var(--cw) * 1085 / 800); } /* ---- 和紙パネル（表紙より下の本文をまとめて載せる） ---- */ .c-invitationPage--toile .c-toileSheet { width: calc(var(--u) * 749); /* 2026-08-18 「最下部に背景画像が見えるように余白を開ける」の修正。 40 -> 100（800px キャンバス換算 px）。SP 390px 幅で 19.5px -> 48.8px。 全体コンプの実測は約 42px なので、コンプより意図的に広く取っている。 */ margin: 0 auto calc(var(--u) * 100); background-color: var(--toile-paper); /* タイルはキャンバス幅の 50%（= 800px 換算で 400px）。 画面幅が変わっても紙目の粒がコンプと同じ比率で見えるようにする */ background-image: url("washi.jpg"); /* タイルはパネル幅ちょうど（= 800px 換算で 749px）。 washi.jpg はミラー4象限なので継ぎ目は出ないが、小さく敷くと 左右対称の模様が周期的に見えてしまう。1周期をパネル全幅に合わせると 模様が認識できなくなり、紙目の粒もコンプ実測（3-7px）に収まる。 */ background-size: 100% auto; background-repeat: repeat; } /* ---- 共通見出し（INVITATION / INFORMATION / PROFILE）= 支給画像 ---- */ .c-invitationPage--toile .c-toileTtl { margin: 0 auto; } .c-invitationPage--toile .c-toileTtl img { display: block; width: 100%; height: auto; } .c-invitationPage--toile .c-invitationSec--invTxt__ttl { width: calc(var(--u) * 469); } .c-invitationPage--toile .c-invitationSec--scheTxt__ttl { width: calc(var(--u) * 566); } .c-invitationPage--toile .c-invitationSec--profile__ttl { width: calc(var(--u) * 312); } /* ---- 招待文面 / INVITATION（コンプ y 1204-2054） ---- */ .c-invitationPage--toile .c-invitationSec--invTxt { max-width: none; margin: 0; padding: calc(var(--u) * 115) 0 calc(var(--u) * 117); } .c-invitationPage--toile .c-invitationSec--invTxt__ttl { margin-bottom: calc(var(--u) * 96); } /* 本文の版面。.c-toileSheet 749px の左右5%を除いた 674px。 ★ 1行の文字数は「font-size + letter-spacing」で割ること。 body に letter-spacing: 0.5px（public/css/commons/style.css:529-533）が 入っていて本文へ継承されるので、24px 指定でも字送りは 24.5px。 2026-08-18: letter-spacing を 0 に固定したうえで 24px -> 23px。 23px × 29字 = 667px < 674px。定型文の最長行はブライダル系で 24〜32字 （wi_dtb_invitation_text 実測）なので 28字ぶんの版面を確保する。 32字級の文面と一般用途の長文は design_text_fit.js が自動縮小で受ける。 */ .c-invitationPage--toile .c-invitationSec--invTxt__middle { margin: 0 5%; font-size: calc(var(--u) * 23); line-height: 2.08; } /* ---- 写真2 + COUNT DOWN（コンプ y 2171-2671 / 749×500 = 3:2 / パネル全幅） ---- */ .c-invitationPage--toile .c-invitationSec--img02 { /* .c-countdownSection(position:absolute; inset:0) の位置基準。 design_common.css 側に position 指定が無いため、ここで作る */ position: relative; margin: 0; } .c-invitationPage--toile .c-invitationSec--img__img02 { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; } /* コンプの写真は明るいスタジオ写真で白抜き文字がぎりぎり読める程度だが、 ここに入るのはお客様の任意の写真なので、コントラストを確保する薄いスクリムを敷く */ .c-invitationPage--toile .c-countdownSection { background-color: rgba(0, 0, 0, .28); } .c-invitationPage--toile .c-countdown { font-family: var(--toile-display); letter-spacing: 0.04em; } .c-invitationPage--toile .c-countdown__textCD { font-size: calc(var(--u) * 43); letter-spacing: 0.1em; text-indent: 0.1em; } .c-invitationPage--toile .c-countdown__row1 { margin-top: calc(var(--u) * 30); } .c-invitationPage--toile .c-countdown__days { font-size: calc(var(--u) * 100); line-height: 1; white-space: nowrap; } /* JS が "Days" と出力するため small-caps で D だけ大文字に見せる */ .c-invitationPage--toile .c-countdown__textL { margin-top: calc(var(--u) * 22); font-size: calc(var(--u) * 43); line-height: 1; letter-spacing: 0.14em; text-indent: 0.14em; font-variant-caps: small-caps; } /* 時 / 分 / 秒 countdown.js が付ける u-justifySelfEnd / Center / Start は public/css 配下に 定義が無く効いていないため、3列を等幅にしたうえで各セルを中央寄せに明示する。 これをしないと HOURS / MINUTES / SECONDS が隣とぶつかって重なる。 */ .c-invitationPage--toile .c-countdown__row2 { width: 96%; margin-top: calc(var(--u) * 34); column-gap: calc(var(--u) * 16); } .c-invitationPage--toile .c-countdown__row2 > div { justify-self: center; min-width: 0; } .c-invitationPage--toile .c-countdown__hours, .c-invitationPage--toile .c-countdown__minutes, .c-invitationPage--toile .c-countdown__seconds { font-size: calc(var(--u) * 92); line-height: 1.1; white-space: nowrap; } .c-invitationPage--toile .c-countdown__textS { margin-top: calc(var(--u) * 10); font-size: calc(var(--u) * 22); letter-spacing: 0.08em; text-indent: 0.08em; /* HOURS / MINUTES / SECONDS を3列に収めきる（折り返し防止） */ white-space: nowrap; } .c-invitationPage--toile .c-countdown__textBD { font-size: calc(var(--u) * 105); line-height: 1; letter-spacing: 0.08em; } /* ---- 日程文面 / INFORMATION（コンプ y 2829-3325） ---- design_common.css:96 の背景 #eaeaea・左右 margin・色 #666 を解除して和紙に載せる。 コンプは「日 時 / 受 付 …」の塊を左揃えのまま中央に置いている （最長行 429px の左端 186 = (800-429)/2 と一致）ので fit-content で中央寄せする。 */ .c-invitationPage--toile .c-invitationSec--scheTxt { margin: 0; padding: calc(var(--u) * 158) 0 0; background-color: transparent; color: var(--toile-ink); font-size: calc(var(--u) * 24); line-height: 2.08; } .c-invitationPage--toile .c-invitationSec--scheTxt__ttl { margin-bottom: calc(var(--u) * 94); } .c-invitationPage--toile .c-invitationSec--scheTxt__middle { width: fit-content; max-width: 90%; margin-inline: auto; text-align: left; } /* ---- プロフィール（コンプ y 3478-4755） ---- 実測: 写真 362×362（1:1）/ 新郎 x63 新婦 x376（= キャンバス両端から 63px） 氏名 + GROOM/BRIDE は写真の反対側の列の中央（新郎 cx600 / 新婦 cx200） wi_dtb_design.image_profile_ratio_x/y も 1/1 にする。 */ .c-invitationPage--toile .c-invitationSec--profile { padding: calc(var(--u) * 153) 0 0; text-align: center; } .c-invitationPage--toile .c-invitationSec--profile__ttl { margin-bottom: calc(var(--u) * 83); } .c-invitationPage--toile .c-invitationSec--profile__block { display: flex; align-items: center; } /* パネル左端(26)から写真左端(63)まで 37px */ .c-invitationPage--toile .c-invitationSec--profile__block--groom { padding-left: calc(var(--u) * 37); --role-w: 109; /* groom.png */ } .c-invitationPage--toile .c-invitationSec--profile__block--bride { flex-direction: row-reverse; padding-right: calc(var(--u) * 37); --role-w: 82; /* bride.png */ } .c-invitationPage--toile .c-invitationSec--profile__photo { flex: 0 0 calc(var(--u) * 362); } .c-invitationPage--toile .c-invitationSec--profile__photo img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; } .c-invitationPage--toile .c-invitationSec--profile__meta { flex: 1 1 auto; min-width: 0; text-align: center; } .c-invitationPage--toile .c-invitationSec--profile__name { margin: 0; font-size: calc(var(--u) * 34); line-height: 1.3; letter-spacing: 0.08em; } /* GROOM.png / BRIDE.png は金。幅は --role-w でブロックごとに切替 */ .c-invitationPage--toile .c-invitationSec--profile__role { width: calc(var(--u) * var(--role-w)); margin: calc(var(--u) * 20) auto 0; } .c-invitationPage--toile .c-invitationSec--profile__role img { display: block; width: 100%; height: auto; } /* コメントは写真の下に全幅・中央揃え。最長行 26文字 × 24px = 624px */ .c-invitationPage--toile .c-invitationSec--profile__comment { margin: calc(var(--u) * 40) 5% 0; font-size: calc(var(--u) * 24); line-height: 1.9; } /* 新郎コメント -> 新婦写真 の間（実測 81px。コメント側の 40px と合わせて 121px） */ .c-invitationPage--toile .c-invitationSec--profile__block--bride { margin-top: calc(var(--u) * 81); } /* ---- Googleマップ（コンプ y 4864-5470 = 606px 高 / パネル全幅） ---- _googlemap.blade.php は google_map_address がある場合 section で包まずに