@charset "UTF-8";
/* =========================================================
   ル・ラベルシリーズ 共通スタイル（wi1318 がシリーズの基準ファイル） SPファースト
   ---------------------------------------------------------
   ★ このファイルは展開 wi1319-wi1321 の design.css から
        @import url("/web_invitation/design_resource/wi1318/design.css");
      で読み込まれる共有スタイル。品番ごとの差分は展開側で変数だけ上書きする。
      シリーズ共通クラス:
        .c-invitationPage--lelabel … 全品番の <main> に付与（スコープ）
   ★ このファイルを触ると4品番すべてに反映される。

   対象品番（色展開）
     wi1318 ミッドナイトブラック  ← 基準。表紙の楕円写真（main_image）が出ない
     wi1319 サンセットアンバー
     wi1320 センチュリーブルー
     wi1321 オリーブベルベット
   品番間の差分は「表紙の色の膜 --lelabel-tint」と「楕円写真の有無」の2点だけ。
   楕円写真は wi1318 の Blade が要素を出さないことで消している（CSS では分岐しない）。

   Figma: CytcllZp9gA1fMDtRVjSfV
     画像レイヤー（表紙の座標基準）1:2      800x1300（フレームは 800x1455）
     動きメモ                    6:61
     完成デザイン                2008:129   各品番 800x7347 のフラット画像
   ※ 完成デザインはレイヤーを持たないので、本文の寸法はサンセットアンバー
     （2002:2）を原寸で書き出して画素走査した実測値（下に根拠を併記）。

   雛形はアトリエ（wi1263）。同じテンプレートから起こされたデザインで、
   表紙下部（氏名 y924 / 日付 y1046 / 英文 y1141）と COUNT DOWN 帯の座標が
   完全に一致する。アトリエで受けた指摘（日付の縦中央・カラム落ち・
   返信ボタンの寸法）の対処はそのまま引き継いでいる。

   スケール方針
     800px 幅キャンバス。--cw: min(100vw, 800px) を基準に
     calc(var(--cw) * N / 800) で比例させる。表紙の飾りは % 配置
     （親が 800x1300 の aspect-ratio 箱）。
   ========================================================= */

/* ---------------------------------------------------------
   フォント
   NEWYORK.OTF / CINZEL-REGULAR.TTF / TrajanPro-Regular.woff は public/font/ に
   実体があるが design_common.css には未登録なのでここで登録する。
   （design_common.css に既にある Lupine 等は絶対に再定義しないこと。
     後勝ちで全デザインの書体が壊れる）
   ファイル名の大文字小文字は Linux で厳密。実ファイルと綴りを合わせている。
   Trajan Pro は表紙のイニシャル（Figma 2005:13 / 2005:14）だけで使う。
   --------------------------------------------------------- */
@font-face {
	font-family: "NewYork";
	src: url("../../font/NEWYORK.OTF") format("opentype");
	font-display: swap;
}
@font-face {
	font-family: "Cinzel";
	src: url("../../font/CINZEL-REGULAR.TTF") format("truetype");
	font-display: swap;
}
@font-face {
	font-family: "Trajan Pro";
	src: url("../../font/TrajanPro-Regular.woff") format("woff");
	font-display: swap;
}

.c-invitationPage--lelabel {
	--cw: min(100vw, 800px);
	--lelabel-ink: #222;
	--lelabel-paper: #fff;
	--lelabel-ease: cubic-bezier(0.16, 1, 0.3, 1);

	/* ★ 表紙の色の膜。品番ごとの唯一の色差分。
	   支給の bg_cover.png（800x1300）は全画素が同一色だったので、画像を読まずに
	   CSS の色で持つ（1リクエスト減り、開幕ゲートの待ち対象も1枚減る）。
	   GD で四隅と中央を実測した値（GD のアルファは 7bit なので Figma の 0.3/0.6 に丸めた）:
	     wi1318 #5a443f α0.30 / wi1319 #9e3716 α0.60（Figma 2005:17 の rgba(158,55,22,.6) と一致）
	     wi1320 #10546b α0.60 / wi1321 #1b4f35 α0.60
	   展開品番（wi1319-wi1321）は自分の design.css でこの1行だけ上書きする。 */
	--lelabel-tint: rgba(90, 68, 63, .3);

	/* 開幕ゲートの opt-in。design_cover_ready.js が表紙の素材
	   （お客様写真 / label.png / text_1,2.png）が揃うまで --cover-play を paused に保つ。
	   揃った時点で .is-coverReady が付いて running になる＝「揃った瞬間が 0ms」。 */
	--cover-gate: 1;
	--cover-play: paused;

	/* 表紙のテキストの書体（Trajan Pro 138KB / NewYork / Cinzel / Lupine）も待つ。
	   待たないとイニシャル・氏名がフォールバック字形のまま現れ、design.js の
	   js-resize もフォールバック字幅で縮小率を確定してしまう。
	   本文書体 font1/2/3（3.6-9.3MB）は design_cover_ready.js 側で除外される。 */
	--cover-gate-fonts: 1;

	/* --cover-gate-timeout は宣言しない。表紙のデザイン素材は
	   label.png 19.6KB + text_1.png 5.0KB + text_2.png 7.8KB と軽く、
	   既定の FAILSAFE 8000ms を踏み抜く想定が無いため（重いのはお客様写真だけ）。 */

	color: var(--lelabel-ink);
	background-color: var(--lelabel-paper);
}
.c-invitationPage--lelabel.is-coverReady {
	--cover-play: running;
}

/* フォールバックを必ず添える。単独指定だと 404 時に無言で既定書体になる */
.c-invitationPage--lelabel .c-invitationSec--title__name,
.c-invitationPage--lelabel .c-countdown__days,
.c-invitationPage--lelabel .c-countdown__textBD,
.c-invitationPage--lelabel .c-countdown__hours,
.c-invitationPage--lelabel .c-countdown__minutes,
.c-invitationPage--lelabel .c-countdown__seconds {
	font-family: "NewYork", "Cambria", serif;
}
.c-invitationPage--lelabel .c-invitationSec--title__msg,
.c-invitationPage--lelabel .c-countdown__textCD,
.c-invitationPage--lelabel .c-countdown__textL,
.c-invitationPage--lelabel .c-countdown__textS {
	font-family: "Cinzel", "Cambria", serif;
}
.c-invitationPage--lelabel .c-invitationSec--title__initial {
	font-family: "Trajan Pro", "Cinzel", "Cambria", serif;
}
.c-invitationPage--lelabel .c-invitationSec--title__date {
	/* Lupine は design_common.css:549 で登録済み（オールドスタイル数字） */
	font-family: "Lupine", serif;
}

/* =========================================================
   名入れ表紙
   重ね順（Figma 1:2 の子ノード順 / 動きメモ 6:59 の凡例 ①②③ と一致）
     z1 __photo  お客様写真 $image_path1（全面）          … 初期状態から見えている
     z2 __tint   色の膜 --lelabel-tint                      … その場でフェードイン
     z3 __label  label.png（二重リング＋イニシャル間の罫線）
                 + イニシャル2文字（Trajan Pro・Blade 変数）… その場でフェードイン
     z4 __arc    text_1.png / text_2.png                   … 回りながらフェードイン
     z5 __name / __date / __msg                            … 上から順に下からフェードイン
     z6 __main   楕円に抜いたお客様写真 $image_path1       … 最後にその場でフェードイン
                 ★ wi1318（ミッドナイトブラック）は Blade に要素が無い
   ========================================================= */
.c-invitationPage--lelabel .c-invitationSec--title {
	padding-top: 0;
	margin-bottom: 0;
}
.c-invitationPage--lelabel .c-invitationSec--title__img01Wrap {
	margin: 0 auto;
	max-width: 800px;
}
.c-invitationPage--lelabel .c-invitationSec--title__inner {
	position: relative;
	width: 100%;
	aspect-ratio: 800 / 1300;
	overflow: hidden;
	background-color: #000;
}

/* --- z1 お客様写真（全面） --- */
.c-invitationPage--lelabel .c-invitationSec--title__photo {
	position: absolute;
	inset: 0;
	z-index: 1;
}
.c-invitationPage--lelabel .c-invitationSec--title__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* --- z2 色の膜 --- */
.c-invitationPage--lelabel .c-invitationSec--title__tint {
	position: absolute;
	inset: 0;
	z-index: 2;
	background-color: var(--lelabel-tint);
	/* 2026-09-29「下からではなくその場でフェードイン」の指示で VeilUp(translateY) → FadeIn */
	animation: lelabelFadeIn 1.2s ease-out .2s both;
}

/* --- z3 ラベル（リング＋罫線＋イニシャル） ---
   label.png 663x829 は Figma 2005:22「label」662x830 @70,78 の書き出し。
   アルファを画素走査すると 外リング y0-3 / 内リング y33-36 / 罫線 y411-413 で、
   イニシャル間の罫線（Figma 2005:15 y492）まで焼き込まれている。
   イニシャル自体はお客様の氏名から出すので素材化しない（下の __initial）。 */
.c-invitationPage--lelabel .c-invitationSec--title__label {
	position: absolute;
	left: 8.75%;
	top: 6%;
	width: 82.875%;
	height: 63.769%;
	z-index: 3;
	background: url("label.png") no-repeat center / 100% 100%;
	animation: lelabelFadeIn 1.1s ease-out 1.0s both;
}
/* イニシャル  Figma 2005:13 "M" / 2005:14 "A"  Trajan Pro 190px
   Figma のテキスト枠は右揃え＋字送り 55.1px 込みの寸法で、そのまま使うと
   中心がずれる。書き出した label（2008:34）を画素走査したインクの中心は
     M x309..498（中心 403.5）/ A x328..471（中心 399.5）
   とほぼキャンバス中央なので、字送りを付けずに中央揃えで置く。
   縦はインク上端 M y270 / A y559（ラベル内 192 / 481）。
   top は行ボックス上端の位置で、Trajan Pro 190px の行ボックスとインクの差は
   ブラウザで実測して合わせる（--lelabel-initial-shift）。 */
.c-invitationPage--lelabel .c-invitationSec--title__initial {
	position: absolute;
	left: 0;
	right: 0;
	margin: 0;
	color: #fff;
	font-size: calc(var(--cw) * 190 / 800);
	line-height: 1;
	letter-spacing: 0;
	text-align: center;
	white-space: nowrap;
}
.c-invitationPage--lelabel .c-invitationSec--title__initial--groom {
	top: calc(192 / 829 * 100% + var(--lelabel-initial-shift, 0%));
}
.c-invitationPage--lelabel .c-invitationSec--title__initial--bride {
	top: calc(481 / 829 * 100% + var(--lelabel-initial-shift, 0%));
}

/* --- z4 弧の英文 ---
   text_1 462x494 @167,146（Figma 2005:19）/ text_2 504x493 @145,342（2005:20）
   動きメモ「→方向に回るようにフェードイン」。回転の軸は各画像の中心ではなく
   楕円（label 662x830 @70,78）の中心 (401, 493) に置く。画像ごとの中心で回すと
   上弧と下弧が別々の円を描いてリングからはみ出して見える。
     text_1: ((401-167)/462, (493-146)/494) = (50.65%, 70.24%)
     text_2: ((401-145)/504, (493-342)/493) = (50.79%, 30.63%) */
.c-invitationPage--lelabel .c-invitationSec--title__arc {
	position: absolute;
	z-index: 4;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;
	animation: lelabelSpinIn 1.3s var(--lelabel-ease) 1.7s both;
}
.c-invitationPage--lelabel .c-invitationSec--title__arc--1 {
	left: 20.875%;
	top: 11.2308%;
	width: 57.75%;
	height: 38%;
	background-image: url("text_1.png");
	transform-origin: 50.65% 70.24%;
}
.c-invitationPage--lelabel .c-invitationSec--title__arc--2 {
	left: 18.125%;
	top: 26.3077%;
	width: 63%;
	height: 37.923%;
	background-image: url("text_2.png");
	transform-origin: 50.79% 30.63%;
}

/* --- z5 名入れ（演出後も残る） --- */
.c-invitationPage--lelabel .c-invitationSec--title__name,
.c-invitationPage--lelabel .c-invitationSec--title__date,
.c-invitationPage--lelabel .c-invitationSec--title__msg {
	position: absolute;
	left: 0;
	right: 0;
	z-index: 5;
	margin: 0;
	padding: 0;
	color: #fff;
	text-align: center;
}
/* Figma 1:15  y924 / NewYork 66px / 574px 幅 */
.c-invitationPage--lelabel .c-invitationSec--title__name {
	top: 71.077%;
	padding-inline: 4%;
	font-size: calc(var(--cw) * 66 / 800);
	line-height: 1.21;
	letter-spacing: .01em;
	animation: lelabelRiseIn 1.1s var(--lelabel-ease) 2.6s both;
}
/* js-resize の条件（design.js が outerWidth() で測る）:
   inline-block + nowrap で内容幅そのものを返させる。letter-spacing は
   親の em 指定を px で継承すると縮小に追従しないので、ここで持たせる。 */
.c-invitationPage--lelabel .c-invitationSec--title__name .js-resize {
	display: inline-block;
	white-space: nowrap;
	letter-spacing: .01em;
}
/* Figma 1:26  y1046 / Lupine 63px / 各中心 x298・398.5・501 / 区切り線 x347・450 */
.c-invitationPage--lelabel .c-invitationSec--title__date {
	top: 80.462%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: calc(var(--cw) * 63 / 800);
	list-style: none;
	animation: lelabelRiseIn 1.1s var(--lelabel-ease) 2.85s both;
}
.c-invitationPage--lelabel .c-invitationSec--title__date > li {
	display: grid;
	place-items: center;
	width: calc(var(--cw) * 101.5 / 800);
	height: calc(var(--cw) * 53 / 800);
	line-height: 1;
}
/* ★ 挙式日を罫線（li + li の border-left）の縦中央に合わせる。
   Lupine のオールドスタイル数字は字面が baseline より上に寄っているうえ、
   行ボックス(1em=63px)が罫線の箱(53px)より高いため、place-items:center だと
   インクが 14.5px 下にずれる（アトリエ wi1263 で実測。座標が同一）。
   罫線は li の border-left なので、動かすのは数字を包んだ span だけ。
   transform ではなく top を使うのは、親 __date の lelabelRiseIn が transform を使うため。 */
.c-invitationPage--lelabel .c-invitationSec--title__dateNum {
	position: relative;
	top: calc(var(--cw) * -14.5 / 800);
}
.c-invitationPage--lelabel .c-invitationSec--title__date > li + li {
	border-left: 1px solid rgba(255, 255, 255, .75);
}
/* Figma 1:16  y1141 / Cinzel 19.5px / line-height 35px */
.c-invitationPage--lelabel .c-invitationSec--title__msg {
	top: 87.769%;
	font-size: calc(var(--cw) * 19.5 / 800);
	line-height: 1.795;
	letter-spacing: .06em;
	animation: lelabelRiseIn 1.1s var(--lelabel-ease) 3.1s both;
}

/* --- z6 楕円のお客様写真 ---
   Figma 2006:2「main_image」662x830 @70,78 / 角丸 331px（= 幅の半分＝上下が半円の縦長楕円）。
   外リングの外形と同じ箱なので、出切るとリング・イニシャル・弧文字を覆い隠す
   （完成形もそうなっている）。border-radius は横 50% / 縦 331/830 = 39.88%。
   お客様写真は1枚（$image_path1）で、全面の z1 と同じ写真を cover で切り抜く。 */
.c-invitationPage--lelabel .c-invitationSec--title__main {
	position: absolute;
	left: 8.75%;
	top: 6%;
	width: 82.75%;
	height: 63.846%;
	z-index: 6;
	overflow: hidden;
	border-radius: 50% / 39.88%;
	animation: lelabelFadeIn 1.2s ease-out 3.8s both;
}
.c-invitationPage--lelabel .c-invitationSec--title__main img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* ---------------------------------------------------------
   表紙の @keyframes
   ★ 0ms = 開幕ゲート解放時刻（＝表紙素材が揃った瞬間）。
     ページ読込からの実時間ではないので、読込待ちの秒数を delay に足さないこと。

   タイムライン（動きメモ 6:61 の順序。「全部で3秒くらいで納めたい」）
     (1) __tint   .20s から 1.2s  その場でフェードイン         -> 1.40s
     (2) __label  1.00s から 1.1s  その場でフェードイン         -> 2.10s
     (3) __arc   1.70s から 1.3s  text_1 / text_2 を【同時】に
                                  回りながらフェードイン       -> 3.00s
     (4) __name  2.60s / __date 2.85s / __msg 3.10s
                                  上から順に 1.1s 下からフェードイン -> 4.20s
     (5) __main  3.80s から 1.2s  その場でフェードイン         -> 5.00s
                                  ★ wi1318 は (4) で終わる（4.20s）
   2026-09-29 修正（依頼「全体を5秒に。もう少しゆったり」「色の膜は下からではなく
   その場でフェードイン」）。初版は動きメモの「3秒くらい」に合わせて 3.60s だった。
     初版  tint .15/.8(下から) label .75/.7 arc 1.25/.9 name 2.0 date 2.15 msg 2.3 (.75)
           main 2.7/.9
   各 delay と duration を約1.4倍に伸ばし、終端を 5.00s に合わせた。順序の関係
   「前の要素が出始めてから次が始まる」「__main は __msg が出始めた後」は保っている。
   --------------------------------------------------------- */
@keyframes lelabelFadeIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes lelabelSpinIn {
	from { opacity: 0; transform: rotate(-16deg); }
	to   { opacity: 1; transform: rotate(0deg); }
}
@keyframes lelabelRiseIn {
	from { opacity: 0; transform: translateY(calc(var(--cw) * 18 / 800)); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ---------------------------------------------------------
   ★ 開幕ゲート：表紙の演出は素材が揃うまで止めておく
   上のルールは animation ショートハンドで書いてあり、ショートハンドは
   animation-play-state を初期値 running に戻すので、後置のこの1ブロックで
   まとめて上書きする（展開品番が animation を再宣言しても running に戻らない）。

   ★ セレクタの網羅を機械的に検算すること:
     animation: を宣言しているのは __tint / __label / __arc（基底クラス1本）/
     __name / __date / __msg / __main の 7本。下のブロックも 7本で一致する。
   --------------------------------------------------------- */
.c-invitationPage--lelabel .c-invitationSec--title__tint,
.c-invitationPage--lelabel .c-invitationSec--title__label,
.c-invitationPage--lelabel .c-invitationSec--title__arc,
.c-invitationPage--lelabel .c-invitationSec--title__name,
.c-invitationPage--lelabel .c-invitationSec--title__date,
.c-invitationPage--lelabel .c-invitationSec--title__msg,
.c-invitationPage--lelabel .c-invitationSec--title__main {
	animation-play-state: var(--cover-play, paused);
}

@media (prefers-reduced-motion: reduce) {
	.c-invitationPage--lelabel .c-invitationSec--title__tint,
	.c-invitationPage--lelabel .c-invitationSec--title__label,
	.c-invitationPage--lelabel .c-invitationSec--title__arc,
	.c-invitationPage--lelabel .c-invitationSec--title__name,
	.c-invitationPage--lelabel .c-invitationSec--title__date,
	.c-invitationPage--lelabel .c-invitationSec--title__msg,
	.c-invitationPage--lelabel .c-invitationSec--title__main {
		animation: none;
		opacity: 1;
		transform: none;
	}
}

/* =========================================================
   本文セクション
   ★ 完成デザインはフラット画像。以下の y はサンセットアンバー（2002:2）を
     原寸 800x7347 で書き出し、濃色画素の行を走査して得たインクの位置。
       表紙下端 1300
       INVITATION  見出しインク 1421-1477（png の上余白 11px → png 上端 1410）
                   本文 1行目インク 1593 / 行送り 66.7px / 最終行インク下端 2487
       COUNT DOWN  帯 2622-3220（800x600 ≒ 4:3）
       INFORMATION 見出しインク 3342-3398 / 1行目インク 3512 / 最終行下端 3938
       PROFILE     見出しインク 4099-4153 / 新郎写真 360x360 @65,4245
                   新婦写真 360x360 @376,4848 / 新婦コメント最終行 5390
       Googleマップ 5510-6365 / 返信案内 1行目インク 6433
       区切り罫     6665（x40..760）/ 備考 1行目インク 6740
       返信ボタン   7015-7155 / ページ下端 7347
     本文の和文はインク高 22-23px。行ボックスの上端は
     「インク上端 − (行送り − インク高) / 2」で逆算している。
   ========================================================= */

/* ---- 見出し ----
   title_invitation.png 423x90 / title_information.png 520x90 / title_profile.png 288x90
   いずれも上 11px・下 21px の余白込み。800 キャンバスに原寸で載る */
.c-invitationPage--lelabel .c-invitationSec--invTxt__ttl,
.c-invitationPage--lelabel .c-invitationSec--scheTxt__ttl,
.c-invitationPage--lelabel .c-invitationSec--profile__ttl {
	margin: 0 auto;
	color: inherit;
	font-size: inherit;
}
.c-invitationPage--lelabel .c-invitationSec--invTxt__ttl {
	width: calc(var(--cw) * 423 / 800);
}
.c-invitationPage--lelabel .c-invitationSec--scheTxt__ttl {
	width: calc(var(--cw) * 520 / 800);
}
.c-invitationPage--lelabel .c-invitationSec--profile__ttl {
	width: calc(var(--cw) * 288 / 800);
}
.c-invitationPage--lelabel .c-invitationSec--invTxt__ttl img,
.c-invitationPage--lelabel .c-invitationSec--scheTxt__ttl img,
.c-invitationPage--lelabel .c-invitationSec--profile__ttl img,
.c-invitationPage--lelabel .c-invitationSec--profile__role img {
	display: block;
	width: 100%;
	height: auto;
}

/* ---- 招待文面 / INVITATION ・ 日程文面 / INFORMATION ----
   design_common.css の既定（scheTxt の灰色ボックス #eaeaea / padding 4rem 2rem /
   margin 0 2rem / color #666、invTxt の margin-bottom 4rem）を打ち消す。 */
.c-invitationPage--lelabel .c-invitationSec--invTxt,
.c-invitationPage--lelabel .c-invitationSec--scheTxt {
	max-width: 800px;
	margin: 0 auto;
	padding: 0;
	background-color: transparent;
	color: inherit;
	font-size: inherit;
	line-height: inherit;
	text-align: center;
}
/* 表紙下端 1300 → png 上端 1410 */
.c-invitationPage--lelabel .c-invitationSec--invTxt {
	padding-top: calc(var(--cw) * 110 / 800);
}
/* COUNT DOWN 下端 3220 → png 上端 3331 */
.c-invitationPage--lelabel .c-invitationSec--scheTxt {
	padding-top: calc(var(--cw) * 111 / 800);
}

/* 本文  インク高 22px / 行送り 66.7px → 26px × line-height 2.565。
   版面は左右 5%（720px）。26px × 27字 = 702px < 720px。
   定型文の最長行（ブライダル系 24〜32字）のうち 28字以上は
   design_text_fit.js（--text-fit: 1）が自動縮小で受ける。
   1行目の行ボックス上端 = 1593 - (66.7-22)/2 = 1570.6 → 見出し png 下端 1500 から 70.6。 */
.c-invitationPage--lelabel .c-invitationSec--invTxt__middle,
.c-invitationPage--lelabel .c-invitationSec--scheTxt__middle {
	margin: calc(var(--cw) * 70 / 800) 5% 0;
	font-size: calc(var(--cw) * 26 / 800);
	line-height: 2.565;
	text-align: center;
}
/* 日程文面はラベルと値が空白で揃えてあるので、左寄せの塊を中央に置く
   （完成形のラベル列 x155 / 値の列 x318）。 */
.c-invitationPage--lelabel .c-invitationSec--scheTxt__middle {
	display: inline-block;
	margin-inline: 0;
	max-width: 90%;
	text-align: left;
}

/* ---- 写真 + COUNT DOWN ----
   帯 800x600（4:3）。写真はお客様の2枚目 $image_path2。
   .c-countdownSection は design_common.css で position:absolute / inset:0 なので
   位置基準をここで作る。文字の寸法はアトリエの帯（同一座標 2617..3218）を踏襲。
   最終行インク下端 2487 + 行の下半分 22 → 2509 から帯 2622 まで 113。 */
.c-invitationPage--lelabel .c-invitationSec--img02 {
	position: relative;
	max-width: 800px;
	margin: calc(var(--cw) * 113 / 800) auto 0;
}
.c-invitationPage--lelabel .c-invitationSec--img__img02 {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
.c-invitationPage--lelabel .c-countdownSection {
	/* design_common.css の rgba(0,0,0,.35) は完成形より暗い。
	   お客様写真は明暗が読めないので、白文字が沈まない程度のスクリムを残す */
	background-color: rgba(0, 0, 0, .18);
}
.c-invitationPage--lelabel .c-countdown {
	/* margin-inline:auto だけだとグリッドが max-content 幅に縮み、
	   HOURS/MINUTES/SECONDS の間隔が詰まる。帯いっぱいに広げてから row2 の幅で決める */
	width: 100%;
	color: #fff;
	font-family: "Cinzel", "Cambria", serif;
	text-shadow: 0 0 calc(var(--cw) * 14 / 800) rgba(0, 0, 0, .35);
}
.c-invitationPage--lelabel .c-countdown__textCD {
	font-size: calc(var(--cw) * 52 / 800);
	line-height: 1;
	letter-spacing: .14em;
	text-indent: .14em;
}
.c-invitationPage--lelabel .c-countdown__row1 {
	margin-top: calc(var(--cw) * 30 / 800);
}
.c-invitationPage--lelabel .c-countdown__days,
.c-invitationPage--lelabel .c-countdown__textBD {
	font-size: calc(var(--cw) * 140 / 800);
	line-height: 1;
	white-space: nowrap;
}
.c-invitationPage--lelabel .c-countdown__textL {
	margin-top: calc(var(--cw) * 10 / 800);
	font-size: calc(var(--cw) * 40 / 800);
	line-height: 1;
	letter-spacing: .16em;
	text-indent: .16em;
	/* countdown.js が出力するのは "Days"。完成形は大文字 */
	text-transform: uppercase;
}
/* u-justifySelf* は public/css に定義が無く効かないので等幅3列を明示する */
.c-invitationPage--lelabel .c-countdown__row2 {
	width: 74%;
	margin-top: calc(var(--cw) * 34 / 800);
	column-gap: calc(var(--cw) * 8 / 800);
	grid-template-columns: repeat(3, 1fr);
}
.c-invitationPage--lelabel .c-countdown__hours,
.c-invitationPage--lelabel .c-countdown__minutes,
.c-invitationPage--lelabel .c-countdown__seconds {
	font-size: calc(var(--cw) * 78 / 800);
	line-height: 1.1;
}
/* MINUTES / SECONDS が1列に収まらず "MINUTE / S" に割れるのを防ぐ */
.c-invitationPage--lelabel .c-countdown__textS {
	font-size: calc(var(--cw) * 27 / 800);
	line-height: 1;
	letter-spacing: .06em;
	text-indent: .06em;
	white-space: nowrap;
}

/* ---- PROFILE ----
   日程最終行の行ボックス下端 3938+22 = 3960 → 見出し png 上端 4088 = 128
   見出し png 下端 4178 → 新郎写真 4245 = 67
   新郎: 写真 360x360 @x65 / 氏名の中心 x597（写真右端 425 〜 右余白 30 の中央）
   新婦: 写真 360x360 @x376 / 氏名の中心 x200（左余白 30 〜 写真左端 376 の中央）
   title_groom.png 93x29 / title_bride.png 67x29 */
.c-invitationPage--lelabel .c-invitationSec--profile {
	max-width: 800px;
	margin: 0 auto;
	padding: calc(var(--cw) * 128 / 800) 0 0;
	line-height: inherit;
	text-align: center;
}
.c-invitationPage--lelabel .c-invitationSec--profile__ttl {
	margin-bottom: calc(var(--cw) * 67 / 800);
}
.c-invitationPage--lelabel .c-invitationSec--profile__block {
	display: grid;
	grid-template-columns: calc(var(--cw) * 360 / 800) 1fr;
	align-items: center;
	margin-inline: calc(var(--cw) * 65 / 800) calc(var(--cw) * 30 / 800);
}
.c-invitationPage--lelabel .c-invitationSec--profile__block--bride {
	grid-template-columns: 1fr calc(var(--cw) * 360 / 800);
	margin-inline: calc(var(--cw) * 30 / 800) calc(var(--cw) * 64 / 800);
	margin-top: calc(var(--cw) * 48 / 800);
}
.c-invitationPage--lelabel .c-invitationSec--profile__block--bride .c-invitationSec--profile__photo {
	grid-column: 2;
	grid-row: 1;
}
.c-invitationPage--lelabel .c-invitationSec--profile__block--bride .c-invitationSec--profile__meta {
	grid-column: 1;
	grid-row: 1;
}
.c-invitationPage--lelabel .c-invitationSec--profile__photo {
	aspect-ratio: 1 / 1;
	overflow: hidden;
}
.c-invitationPage--lelabel .c-invitationSec--profile__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.c-invitationPage--lelabel .c-invitationSec--profile__meta {
	min-width: 0;
}
.c-invitationPage--lelabel .c-invitationSec--profile__name {
	font-size: calc(var(--cw) * 30 / 800);
	line-height: 1.4;
	letter-spacing: .1em;
	overflow-wrap: anywhere;
}
.c-invitationPage--lelabel .c-invitationSec--profile__role {
	width: calc(var(--cw) * 93 / 800);
	margin: calc(var(--cw) * 20 / 800) auto 0;
}
.c-invitationPage--lelabel .c-invitationSec--profile__block--bride .c-invitationSec--profile__role {
	width: calc(var(--cw) * 67 / 800);
}
/* 自己紹介文  行送り 46-47px / インク x90..710。
   最長行「今後とも私たちを温かく見守っていただけますと幸いです」26字 = 620px
   → 23px（26字 598px）で版面 720px に収める。 */
.c-invitationPage--lelabel .c-invitationSec--profile__comment {
	margin: calc(var(--cw) * 43 / 800) 5% 0;
	font-size: calc(var(--cw) * 23 / 800);
	line-height: 2;
	text-align: center;
	overflow-wrap: anywhere;
}

/* ---- Googleマップ / 返信案内 / 備考 / 返信ボタン ---- */
/* 新婦コメント最終行 5390 → 地図 5510 */
.c-invitationPage--lelabel .c-invitationSec--mapSec {
	max-width: 800px;
	margin: calc(var(--cw) * 108 / 800) auto 0;
}
.c-invitationPage--lelabel .c-invitationSec--map,
.c-invitationPage--lelabel .c-invitationSec--scheTxt__googleMap {
	margin: 0;
}
/* 地図下端 6365 → 1行目の行ボックス上端 6433 - 22 = 6411 */
.c-invitationPage--lelabel .c-invitationSec--toReply {
	max-width: 800px;
	margin: calc(var(--cw) * 46 / 800) auto 0;
	padding-inline: 5%;
	font-size: calc(var(--cw) * 26 / 800);
	line-height: 2.565;
	text-align: center;
}
/* 区切り罫 y6665（x40..760 = 90%）は備考の border-top で引く。
   design_common.css の #aaa 実線を墨に差し替える。
   罫 6665 → 備考1行目の行ボックス上端 6740 - 22 = 6718 */
.c-invitationPage--lelabel .c-invitationSec--caption {
	width: 90%;
	max-width: 720px;
	margin: calc(var(--cw) * 52 / 800) auto 0;
	padding: calc(var(--cw) * 53 / 800) 0 0;
	border-top: 2px solid var(--lelabel-ink);
	font-size: calc(var(--cw) * 26 / 800);
	line-height: 2.565;
	text-align: center;
}
.c-invitationPage--lelabel .c-invitationSec--replyBtn {
	margin: calc(var(--cw) * 110 / 800) auto 0;
	padding-bottom: calc(var(--cw) * 192 / 800);
}
/* ---- 返信ボタン ----
   ★ 共通パーツなので色と枠線だけを上書きする。
     font-size / padding / line-height / width / max-width と
     __btnWrap の margin は design_common.css の既定に任せること
     （既存デザイン約150品番がこの流儀。寸法を起こすとシリーズ間でばらつく）。
     完成形は白地に墨の枠・うっすら影なので component.css の影は残す。 */
.c-invitationPage--lelabel .c-invitationSec--replyBtn .c-buttonL {
	border: 2px solid var(--lelabel-ink);
	border-radius: 999px;
	background-color: #fff;
	color: var(--lelabel-ink);
	letter-spacing: .08em;
	transition: background-color .3s ease, color .3s ease;
}
.c-invitationPage--lelabel .c-invitationSec--replyBtn .c-buttonL:hover,
.c-invitationPage--lelabel .c-invitationSec--replyBtn .c-buttonL:focus-visible {
	background-color: var(--lelabel-ink);
	color: #fff;
}

/* =========================================================
   本文の組版 — カラム落ち対策（アトリエ wi1263 の 2026-08-18 対応を踏襲）
   ★ letter-spacing: 0 を明示する。body の letter-spacing: 0.5px
     （public/css/commons/style.css:529-533）が継承されると
     「font-size × 文字数 = 版面幅」の見積りが 0.5px × 文字数ぶん外れる。
   ★ word-break: normal は design_common.css:112 の break-all の打ち消し
     （住所の番地や英数字が語中で割れる）。
   ★ overflow-wrap: anywhere は js-textAutoLink が URL の後続日本語まで
     1本の <a> に飲み込んだ長トークンの保険。
   ★ --text-fit: 1 は design_text_fit.js の opt-in（入り切らない文面を自動縮小）。
   ========================================================= */
.c-invitationPage--lelabel {
	--text-fit: 1;
}
.c-invitationPage--lelabel .c-invitationSec--invTxt__middle,
.c-invitationPage--lelabel .c-invitationSec--scheTxt__middle,
.c-invitationPage--lelabel .c-invitationSec--profile__comment,
.c-invitationPage--lelabel .c-invitationSec--toReply__txt,
.c-invitationPage--lelabel .c-invitationSec--caption__txt {
	letter-spacing: 0;
	word-break: normal;
	overflow-wrap: anywhere;
}
/* text-wrap: pretty は1文＝1行の招待文面だけ。日程文面は全角スペースで
   揃えた表組みなので、会場名の途中で折られる（和乃花で報告あり）。 */
.c-invitationPage--lelabel .c-invitationSec--invTxt__middle {
	text-wrap: pretty;
}