@charset "UTF-8"; /* ========================================================= イマージュシリーズ 共通スタイル（wi1310 がシリーズの基準ファイル） SPファースト --------------------------------------------------------- ★ このファイルは展開 wi1311-wi1313 の design.css から @import url("/web_invitation/design_resource/wi1310/design.css"); で読み込まれる共有スタイル。品番固有の値をここに直接書かないこと。 シリーズ共通クラス: .c-invitationPage--imaju … 全品番の
に付与（スコープ） 対象品番 wi1310 / wi1311 / wi1312 / wi1313 旧称「タイポグラフ」。Figma のノード名は ■WEB招待状_wi1310-1313_イマージュ(旧：タイポグラフ)_招待状1〜4 Blade は品番ごとに実ファイル（invitation_page_file_name = 'invitation_wi1310' 等）。 共用名にすると invitation_common へフォールバックする。 デザイン基準キャンバス: 名入れ表紙 800 x 1210 / 全体ページ 800 x 7000 Figma: l9ojWhj9xf8nVSm535FG5R 完成形（表紙） 1:234 "Group 12" 800x1210 ← 表紙の座標はすべてここの実測 招待状 1:6 800x7000 ← ★実レイヤーを持つフレーム。本文の y もここから実測 動きメモ 1:521 / 1:523 / 1:525 / 1:526-1:529 参考画像 1:2(wi1310) 1:3(wi1311) 1:4(wi1312) 1:5(wi1313) 800x7077 表紙の重ね順（動きメモの凡例 1:533-1:535） z1 お客様写真 $image_path1（2:3 トリミング） z2 グレーの半透明 ★wi1310 のみ。実測 rgba(0,0,0,.10) の単色ベタだったので 画像ではなく CSS で敷く（--imaju-veil） z3 飾り枠 角丸の白い線。支給は PNG だが SVG で描き直している（下記） z4 ロゴタイプ mv_text1 を4行に分割した SVG z5 新郎新婦名・挙式日（Blade 変数） z6 引用文 mv_text2 ========================================================= */ .c-invitationPage--imaju { --cw: min(100vw, 800px); --imaju-ink: #333; --imaju-paper: #fff; --imaju-line: #d5d5d5; --imaju-ease: cubic-bezier(0.16, 1, 0.3, 1); /* ★ 表紙のインク色。飾り枠の線・ロゴタイプ・氏名・挙式日が**すべて**これを使う。 （引用文 mv_text2.svg だけは なので CSS では染められず、品番ごとに 色違いのファイルが支給されている＝Blade の design_code で自動的に切り替わる） wi1310 は白。展開品番は参考画像 1:3〜1:5 の実測どおり各自の色で上書きする。 Figma のテキスト仕様(1:210)には #000000 と書かれているが完成形と食い違うため、 完成形（1:234 の実測 text-white）を採用している。 */ --imaju-mv-text: #fff; /* ★ 表紙のグレー幕。**シリーズ4品番すべてに適用**（2026-09-15 指示）。 支給の mv_photo2_wi1310.png は 800x1210 全面が rgba(0,0,0,alpha114/127) の 単色ベタ（色の種類=1）だったので、画像を読まずに CSS で敷いている。 alpha 114/127 -> 不透明度 (127-114)/127 = 0.102 ≒ 10%。 当初は動きメモ 1:524 / 1:535 と支給素材が wi1310 ぶんしか無いことから wi1310 限定にしていたが、指示によりシリーズ共通へ変更。 品番ごとに濃さを変えたくなったら、その品番の design.css で --imaju-veil を上書きすればよい。 */ --imaju-veil: rgba(0, 0, 0, .1); /* 開幕ゲートの opt-in。design_cover_ready.js がこの値を見て、表紙の素材 （お客様写真・ロゴタイプ4行・引用文）が揃うまで --cover-play を paused に保つ。 揃った時点で .is-coverReady が付いて running になる＝「揃った瞬間が 0ms」。 */ --cover-gate: 1; --cover-play: paused; /* 表紙の氏名・挙式日が使う Callalily も待つ。design_common.css の @font-face は font-display を宣言していない（= block）ため、待たないとフェードインが 不可視のまま空振りする。本文書体 font1/2/3 は design_cover_ready.js 側で除外される。 */ --cover-gate-fonts: 1; color: var(--imaju-ink); background-color: var(--imaju-paper); } .c-invitationPage--imaju.is-coverReady { --cover-play: running; } /* ========================================================= 名入れ表紙 ========================================================= */ .c-invitationPage--imaju .c-invitationSec--title { padding-top: 0; background-color: var(--imaju-paper); } /* 高さの基準はキャンバス比。中の要素は全部 absolute なので aspect-ratio が無いと高さ 0 になる。 */ .c-invitationPage--imaju .c-invitationSec--title__img01Wrap { position: relative; max-width: 800px; margin: 0 auto; /* ★ 2026-09-15 修正: 800/1210 -> 2/3。 1210 は書き出されたコンプ画像の高さで、Figma の完成形フレームは 800x1200。 マスタの image1_ratio はお客様のトリミング枠そのものなので、 既存158デザインと同じ約分された比（2:3 が最多の51件）に揃える。 80:121 の採用は既存で0件だった。 ★ 中の要素の top はすべて「実測px / 1210」で持っているため、 枠を 1200 にすると縦だけ 1200/1210 = 0.9917 倍に一様縮小される。 ＝パーセント値は書き換え不要。ここ1行だけで比率が揃う。 */ aspect-ratio: 2 / 3; overflow: hidden; z-index: 0; } /* --- z1 お客様写真 ---------------------------------------- */ .c-invitationPage--imaju .c-invitationSec--title__photo { position: absolute; inset: 0; z-index: 1; opacity: 0; animation: imaju-fade 1s var(--imaju-ease) 0s both; } .c-invitationPage--imaju .c-invitationSec--title__photo img { display: block; width: 100%; height: 100%; object-fit: cover; } /* --- z2 グレーの半透明（wi1310 のみ） ---------------------- */ .c-invitationPage--imaju .c-invitationSec--title__veil { position: absolute; inset: 0; z-index: 2; background-color: var(--imaju-veil); opacity: 0; animation: imaju-fade 1s var(--imaju-ease) 0s both; } /* --------------------------------------------------------- z3 飾り枠 Figma 1:237 38,40 724x1130 支給は mv_parts1_wi1310.png（724x1130 / 7.8KB）だが、 **PNG のままでは「左上から右下へ」「右下から左上へ」描く演出ができない** （角丸があるので辺ごとに div を並べる方式は破綻し、clip-path でも弧を追えない）。 PNG を画素走査して幾何を採寸し、SVG のパス2本に置き換えている。 線色 #FFFFFF（左辺 x0 / 右辺 x723 / 下辺 y1129 がいずれも完全不透明の白） 線幅 1.25px（完全不透明1px＋25%が1px ＝ インク 1.25px ぶん） 角丸 r = 110（左辺の最下不透明 y1019 -> 1129-1019=110 / 右辺の最上不透明 y110 / 下辺の最左不透明 x110 の3辺が一致） 角の形状 右上と左下のみ角丸。左上と右下は直角（四隅の対角走査で確認） stroke はパスの中心に乗るので、外周が 0 に来るよう 0.625 内側にパスを引く。 A（左上->右下）= 上辺613.375 + 弧171.81 + 右辺1019.375 = 1804.56 B（右下->左上）= 下辺613.375 + 弧171.81 + 左辺1019.375 = 1804.56 2本が同じ長さなので、同じ duration で引けば同じ速さで描かれる（メモの「同時に動かす」）。 --------------------------------------------------------- */ .c-invitationPage--imaju .c-invitationSec--title__frame { position: absolute; left: 4.75%; top: 3.3058%; width: 90.5%; height: 93.3884%; z-index: 3; } .c-invitationPage--imaju .c-invitationSec--title__frame svg { display: block; width: 100%; height: 100%; overflow: visible; } .c-invitationPage--imaju .c-invitationSec--title__framePath { fill: none; stroke: var(--imaju-mv-text); stroke-width: 1.25; stroke-dasharray: 1805; stroke-dashoffset: 1805; animation: imaju-draw 1.2s ease-in-out .6s both; } /* --------------------------------------------------------- z4 ロゴタイプ Figma 1:238 88,229 624.01x402.25 ★ 2026-09-11: 「単語ごとに別々にフェードイン」「その場で 大->小」の指示により、 外部 SVG 4枚（行ごと）からインライン SVG の単語9グループへ変更した。 を重ねる方式だと拡大縮小の中心がキャンバス(624x402)の中心になり、 単語が自分の位置からずれてしまう。インラインにして各 に transform-box: fill-box を掛けると、単語が自分の中心で拡縮する。 単語の切り出し（Figma のグループ構成 ＋ 字間の実測） w1 LOOK / w2 at / w3 ALL / w4 the / w5 BEAUTY IN / w6 YOUR LIFE / w7 and / w8 be / w9 HAPPY 計 38 パス（原本と一致） 1行目のローマン体7字は最大字間 162.7px の位置で LOOK|ALL に割った。 --------------------------------------------------------- */ .c-invitationPage--imaju .c-invitationSec--title__logo { position: absolute; /* インライン SVG の各パスが fill: currentColor なので、ここの色がロゴタイプの色になる */ color: var(--imaju-mv-text); left: 11%; top: 18.9256%; width: 78.0013%; height: 33.2438%; z-index: 4; } .c-invitationPage--imaju .c-invitationSec--title__logoSvg { display: block; width: 100%; height: 100%; overflow: visible; } .c-invitationPage--imaju .c-invitationSec--title__word { /* fill-box を指定しないと、拡縮の中心が SVG 全体の中心になって単語が動く */ transform-box: fill-box; transform-origin: center; opacity: 0; animation: imaju-zoomIn .7s var(--imaju-ease) both; } /* ★ 出る順序は「上から順」ではなく、画面上で隣り合わない単語が続くように 意図的にばらけさせている（指示: ランダムに別々にフェードイン）。 CSS に乱数は無いので、見た目がランダムになる固定の順序を選んである。 BEAUTY IN -> be -> LOOK -> and -> the -> HAPPY -> at -> YOUR LIFE -> ALL */ .c-invitationPage--imaju .c-invitationSec--title__word--w5 { animation-delay: 1.55s; } .c-invitationPage--imaju .c-invitationSec--title__word--w8 { animation-delay: 1.67s; } .c-invitationPage--imaju .c-invitationSec--title__word--w1 { animation-delay: 1.79s; } .c-invitationPage--imaju .c-invitationSec--title__word--w7 { animation-delay: 1.91s; } .c-invitationPage--imaju .c-invitationSec--title__word--w4 { animation-delay: 2.03s; } .c-invitationPage--imaju .c-invitationSec--title__word--w9 { animation-delay: 2.15s; } .c-invitationPage--imaju .c-invitationSec--title__word--w2 { animation-delay: 2.27s; } .c-invitationPage--imaju .c-invitationSec--title__word--w6 { animation-delay: 2.39s; } .c-invitationPage--imaju .c-invitationSec--title__word--w3 { animation-delay: 2.51s; } /* --------------------------------------------------------- z5 新郎新婦名・挙式日 Figma 1:374 氏名 190,855 w420 / 1:373 挙式日 244,943 w312 どちらもボックス中心が x=400（= キャンバス中央）に揃っているので 190+420/2 = 400 / 244+312/2 = 400 left:50% + translateX(-50%) で置く。文字数が変わっても中央に留まる。 書体は Figma 仕様が Callalily_bold だが **bold の実ファイルが未受領**のため 通常ウェイトの Callalily を当てている（合成ボールドは字形が崩れるので使わない）。 --------------------------------------------------------- */ .c-invitationPage--imaju .c-invitationSec--title__name, .c-invitationPage--imaju .c-invitationSec--title__date { position: absolute; left: 50%; z-index: 5; width: 92%; color: var(--imaju-mv-text); font-family: "Callalily", "Cormorant Garamond", "Times New Roman", serif; /* ★ 2026-09-16 修正: Figma の指定は leading-[0px]（1:373 / 1:374）。 1.1 を当てていたため行の高さぶん文字が箱の中で下がり、 氏名は 33px / 挙式日は 38.5px 下にずれていた（＝引用文との間が詰まる）。 ただし line-height: 0 そのままだと、長い氏名で折り返したとき行が重なる。 そこで **line-height: 1（＝font-size と同値）にして、top を font-size の 半分だけ上へ繰り上げる**。1行目の位置は leading 0 と完全に一致し、 万一折り返しても行が重ならない。 top_new = Figma の y - font-size / 2 */ line-height: 1; text-align: center; /* 完成形は「DAISUKE & RINKA」「30 OCT 32」と大文字。挙式日の月は date_format 'M' が "Oct" を返すのでここで大文字化する。日本語入力は uppercase の影響を受けない。 */ text-transform: uppercase; opacity: 0; transform: translateX(-50%); } /* (2) その場で 大->小 ＋ フェードイン（1:527 / 2026-09-11 に動きを変更） */ .c-invitationPage--imaju .c-invitationSec--title__name { top: 68.1818%; /* (855 - 60/2) / 1210 ※Figma 1:374 の y=855 */ font-size: calc(var(--cw) * 60 / 800); animation: imaju-zoomInCentered .8s var(--imaju-ease) 3.3s both; } /* (3) その場で 大->小 ＋ フェードイン（1:528 / 同上） */ .c-invitationPage--imaju .c-invitationSec--title__date { top: 75.0413%; /* (943 - 70/2) / 1210 ※Figma 1:373 の y=943 */ font-size: calc(var(--cw) * 70 / 800); animation: imaju-zoomInCentered .8s var(--imaju-ease) 3.5s both; } /* --------------------------------------------------------- z6 引用文 Figma 1:291 96,1024 607.57x56.15 (4) その場で 大->小 ＋ フェードイン（1:529 / 同上） --------------------------------------------------------- */ .c-invitationPage--imaju .c-invitationSec--title__quote { position: absolute; left: 12%; top: 84.6281%; width: 75.9463%; height: 4.6405%; z-index: 5; opacity: 0; animation: imaju-zoomIn .8s var(--imaju-ease) 3.7s both; } .c-invitationPage--imaju .c-invitationSec--title__quote img { display: block; width: 100%; height: 100%; object-fit: contain; } /* --------------------------------------------------------- 表紙の @keyframes ★ 0ms = 開幕ゲート解放時刻（＝表紙素材が揃った瞬間）。 ページ読込からの実時間ではないので、読込待ちの秒数を delay に足さないこと。 タイムライン（動きメモの読解） (1) 写真＋グレー幕 0.00s / 1.0s フェードイン（1:523「写真をフェードイン」） (2) 飾り枠 A・B 0.60s / 1.2s 同時に描画 （1:521「左上から右下へ / 右下から左上へ この2つを同時に動かす」） (3) ロゴタイプ9単語 1.55s から 0.12s ずつ / 各 0.7s ★2026-09-11 変更: 1:526 は「上から順に」だったが、テキスト主体のデザインなので 単語ごとに別々・順序をばらけさせる指示に変わった (4) 新郎新婦名 3.30s / 0.8s（1:527） (5) 挙式日 3.50s / 0.8s（1:528） (6) 引用文 3.70s / 0.8s（1:529） ★ (3)-(6) は挿入方向を統一し、全部「その場で 大(1.15倍) -> 小(等倍)」＋フェード。 上下の移動はしない（2026-09-11 の指示）。 --------------------------------------------------------- */ @keyframes imaju-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes imaju-draw { from { stroke-dashoffset: 1805; } to { stroke-dashoffset: 0; } } /* 「上から下に」なので translateY を負から 0 へ。氏名・挙式日は translateX(-50%) で中央寄せしているのでキーフレーム側でも必ず書く （書かないと transform が上書きされて左にずれる）。 */ /* ★ 2026-09-11: 「上から下に下がらず、同じ位置で 大->小」の指示により translateY を使う dropIn 系を廃止し、その場で 1.15倍 -> 等倍に縮む zoomIn にした。 挿入方向はロゴタイプ・氏名・挙式日・引用文で統一している。 */ @keyframes imaju-zoomIn { from { opacity: 0; transform: scale(1.15); } to { opacity: 1; transform: scale(1); } } /* 氏名・挙式日は translateX(-50%) で中央寄せしているのでキーフレーム側でも必ず書く （書かないと transform が上書きされて幅の半分だけ左にずれる。実際に踏んだ） */ @keyframes imaju-zoomInCentered { from { opacity: 0; transform: translateX(-50%) scale(1.15); } to { opacity: 1; transform: translateX(-50%) scale(1); } } /* --------------------------------------------------------- ★ 開幕ゲート：表紙の演出は素材が揃うまで止めておく animation-play-state: paused は delay の消化も止めるので、素材が揃うまで 待たせてから running にすれば「揃った瞬間が 0ms」になる。 個々のルールに書き足すのではなくここでまとめて上書きしているのは、 上のルールが animation ショートハンドで書かれており、ショートハンドが animation-play-state を初期値 running に戻してしまうため。 展開品番（wi1311-wi1313）が animation を再宣言しても running に戻らない。 ★ セレクタの網羅は機械的に検算する: animation: を宣言しているのは __photo / __veil / __framePath / __logoLine / __name / __date / __quote の 7本。下のブロックも 7本で一致する。 --------------------------------------------------------- */ .c-invitationPage--imaju .c-invitationSec--title__photo, .c-invitationPage--imaju .c-invitationSec--title__veil, .c-invitationPage--imaju .c-invitationSec--title__framePath, .c-invitationPage--imaju .c-invitationSec--title__word, .c-invitationPage--imaju .c-invitationSec--title__name, .c-invitationPage--imaju .c-invitationSec--title__date, .c-invitationPage--imaju .c-invitationSec--title__quote { animation-play-state: var(--cover-play, paused); } @media (prefers-reduced-motion: reduce) { .c-invitationPage--imaju .c-invitationSec--title__photo, .c-invitationPage--imaju .c-invitationSec--title__veil, .c-invitationPage--imaju .c-invitationSec--title__framePath, .c-invitationPage--imaju .c-invitationSec--title__word, .c-invitationPage--imaju .c-invitationSec--title__name, .c-invitationPage--imaju .c-invitationSec--title__date, .c-invitationPage--imaju .c-invitationSec--title__quote { animation: none; opacity: 1; } .c-invitationPage--imaju .c-invitationSec--title__framePath { stroke-dashoffset: 0; } .c-invitationPage--imaju .c-invitationSec--title__word, .c-invitationPage--imaju .c-invitationSec--title__quote { transform: none; } .c-invitationPage--imaju .c-invitationSec--title__name, .c-invitationPage--imaju .c-invitationSec--title__date { transform: translateX(-50%); } } /* ========================================================= 本文セクション ★ 招待状 1:6 は実レイヤーを持つフレームなので、y はすべて実測値。 （表紙下端 1210 / title_message 1327 / photo 2330 800x535 / title_invitation 3020 / title_profile 3647 / groom_photo 3790 385x385 / bride_photo 4437 / line 6360 800x2 / button 6731） ========================================================= */ /* ---- 見出し（英字ロゴのみ。花アイコン等は無い） ---- title_message 372.49x66.20 / title_invitation 405.48x63.11 / title_profile 303.25x64.82 */ .c-invitationPage--imaju .c-invitationSec--invTxt, .c-invitationPage--imaju .c-invitationSec--scheTxt, .c-invitationPage--imaju .c-invitationSec--profile { text-align: center; } .c-invitationPage--imaju .c-invitationSec--invTxt__ttl img, .c-invitationPage--imaju .c-invitationSec--scheTxt__ttl img, .c-invitationPage--imaju .c-invitationSec--profile__ttl img { display: block; margin: 0 auto; width: auto; } /* 高さで揃える（幅は文字数で違うため） */ .c-invitationPage--imaju .c-invitationSec--invTxt__ttl img { height: calc(var(--cw) * 66.2 / 800); } .c-invitationPage--imaju .c-invitationSec--scheTxt__ttl img { height: calc(var(--cw) * 63.11 / 800); } .c-invitationPage--imaju .c-invitationSec--profile__ttl img { height: calc(var(--cw) * 64.82 / 800); } /* 表紙下端 1210 -> title_message 1327 = 117 */ .c-invitationPage--imaju .c-invitationSec--invTxt { padding-top: calc(var(--cw) * 117 / 800); } /* ---- 招待文面 / 日程文面 ---- --text-fit: 1 は design_text_fit.js の opt-in。CSS で入り切らない文面 （お客様の任意入力）を font-size の自動縮小で受ける。 */ .c-invitationPage--imaju { --text-fit: 1; } .c-invitationPage--imaju .c-invitationSec--invTxt__middle, .c-invitationPage--imaju .c-invitationSec--scheTxt__middle { margin: calc(var(--cw) * 70 / 800) 6% 0; font-size: calc(var(--cw) * 25 / 800); line-height: 2.1; letter-spacing: 0; text-align: center; word-break: normal; overflow-wrap: anywhere; } /* ★ 日程文面（INVITATION）だけ左寄せ（2026-09-16 指示。3シリーズ共通の扱い）。 日時・会場・住所が行ごとに並ぶので、中央寄せだと行頭がガタつく。 招待文面（MESSAGE）は中央寄せのまま。 共通の design_common.css:107-109 も scheTxt__middle を left にしているので、 これは共通の既定へ戻す指定でもある。 */ .c-invitationPage--imaju .c-invitationSec--scheTxt__middle { text-align: left; } /* ★ INVITATION の灰色ボックスを外す。 design_common.css:97-105 が .c-invitationSec--scheTxt に background-color:#eaeaea / padding:4rem 2rem / margin:0 2rem / color:#666 を 付けており、そのままだと日程だけ灰色の箱で囲まれて完成形と食い違う。 title_invitation 3020 は photo の下端 2865 から 155。 */ .c-invitationPage--imaju .c-invitationSec--scheTxt { margin: 0; padding: calc(var(--cw) * 155 / 800) 0 0; background-color: transparent; color: inherit; } /* ---- 写真 + COUNT DOWN ---- .c-countdownSection は design_common.css 側で position:absolute / inset:0 なので 位置基準をここで作る。photo は実測 800x535。 */ .c-invitationPage--imaju .c-invitationSec--img02 { position: relative; margin-top: calc(var(--cw) * 120 / 800); margin-bottom: 0; } .c-invitationPage--imaju .c-invitationSec--img__img02 { display: block; width: 100%; /* ★ マスタの image4_ratio は 3:2。支給サンプル photo.jpg の実寸 800x535 （=1.4953）をそのまま枠にしていたが、お客様写真はトリミング枠 3:2 で 入ってくるので枠側を 3:2 に合わせる（モノルス・デイマークと同じ）。 */ aspect-ratio: 3 / 2; object-fit: cover; } .c-invitationPage--imaju .c-countdownSection { background-color: rgba(0, 0, 0, .25); } .c-invitationPage--imaju .c-countdown { font-family: "Callalily", "Cormorant Garamond", serif; color: #fff; letter-spacing: .04em; } .c-invitationPage--imaju .c-countdown__textCD { font-size: calc(var(--cw) * 38 / 800); letter-spacing: .2em; text-indent: .2em; } .c-invitationPage--imaju .c-countdown__row1 { margin-top: calc(var(--cw) * 20 / 800); } .c-invitationPage--imaju .c-countdown__days, .c-invitationPage--imaju .c-countdown__textBD { font-size: calc(var(--cw) * 96 / 800); line-height: 1; white-space: nowrap; } .c-invitationPage--imaju .c-countdown__textL { margin-top: calc(var(--cw) * 12 / 800); font-size: calc(var(--cw) * 32 / 800); line-height: 1; letter-spacing: .2em; text-indent: .2em; font-variant-caps: small-caps; } /* u-justifySelfEnd / Center / Start は public/css 配下に定義が無く効かないため 3列を等幅にして各セルを中央寄せに明示する（無いと文字同士がぶつかる） */ .c-invitationPage--imaju .c-countdown__row2 { width: 96%; margin-top: calc(var(--cw) * 24 / 800); column-gap: calc(var(--cw) * 16 / 800); } .c-invitationPage--imaju .c-countdown__row2 > div { justify-self: center; min-width: 0; } .c-invitationPage--imaju .c-countdown__hours, .c-invitationPage--imaju .c-countdown__minutes, .c-invitationPage--imaju .c-countdown__seconds { font-size: calc(var(--cw) * 80 / 800); line-height: 1.1; white-space: nowrap; } .c-invitationPage--imaju .c-countdown__textS { margin-top: calc(var(--cw) * 8 / 800); font-size: calc(var(--cw) * 19 / 800); letter-spacing: .08em; text-indent: .08em; white-space: nowrap; } /* ---- プロフィール ---- 実測: title_profile 3647 / groom_photo 3790 x44 385x385 / groom ラベル 3969 x562 bride_photo 4437 x374 385x385 / bride ラベル 4610 x150 写真は 385/800 = 48.125%。新郎は写真左・名前右、新婦は左右反転。 */ .c-invitationPage--imaju .c-invitationSec--profile { padding-top: calc(var(--cw) * 155 / 800); } .c-invitationPage--imaju .c-invitationSec--profile__block { display: flex; align-items: center; gap: calc(var(--cw) * 36 / 800); margin: calc(var(--cw) * 78 / 800) calc(var(--cw) * 44 / 800) 0; } .c-invitationPage--imaju .c-invitationSec--profile__block--bride { flex-direction: row-reverse; } .c-invitationPage--imaju .c-invitationSec--profile__photo { flex: none; width: 53%; overflow: hidden; } .c-invitationPage--imaju .c-invitationSec--profile__photo img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; } .c-invitationPage--imaju .c-invitationSec--profile__meta { flex: 1 1 auto; min-width: 0; text-align: center; } .c-invitationPage--imaju .c-invitationSec--profile__name { font-size: calc(var(--cw) * 30 / 800); line-height: 1.4; letter-spacing: .08em; } .c-invitationPage--imaju .c-invitationSec--profile__role { margin-top: calc(var(--cw) * 16 / 800); } .c-invitationPage--imaju .c-invitationSec--profile__role img { display: block; margin: 0 auto; width: auto; height: calc(var(--cw) * 44.12 / 800); } .c-invitationPage--imaju .c-invitationSec--profile__comment { margin: calc(var(--cw) * 34 / 800) 6% 0; font-size: calc(var(--cw) * 22 / 800); line-height: 2; text-align: center; word-break: normal; overflow-wrap: anywhere; } /* ---- 返信案内 / 備考 ---- */ .c-invitationPage--imaju .c-invitationSec--toReply__txt, .c-invitationPage--imaju .c-invitationSec--caption__txt { margin: 0 6%; font-size: calc(var(--cw) * 22 / 800); line-height: 2.1; text-align: center; } /* 区切り罫は支給の line.png（800x2）を使う。実測 y6360。 */ .c-invitationPage--imaju .c-invitationSec--line { display: none; margin: calc(var(--cw) * 80 / 800) auto 0; } .c-invitationPage--imaju .c-invitationSec--line img { display: block; width: 100%; height: auto; } /* ---- 返信ボタン ---- ★ 共通パーツなので色と枠線だけを上書きする。 font-size / padding / line-height / width / max-width と __btnWrap の margin は design_common.css の既定に任せること （既存デザイン約150品番がこの流儀。寸法を起こすとシリーズ間でばらつく）。 完成形の button は 699x177 だが、共通既定に合わせて寸法は触らない。 */ .c-invitationPage--imaju .c-invitationSec--replyBtn__btnWrap .c-buttonL { color: var(--imaju-ink); border: 1px solid var(--imaju-ink); border-radius: 999px; background-color: transparent; transition: color .25s ease, background-color .25s ease; } .c-invitationPage--imaju .c-invitationSec--replyBtn__btnWrap .c-buttonL:hover, .c-invitationPage--imaju .c-invitationSec--replyBtn__btnWrap .c-buttonL:focus-visible { color: #fff; background-color: var(--imaju-ink); }