@charset "UTF-8";
/* =========================================================
   wi1292 / WEB招待状_綾重ね（ひし形文様）  SPファースト
   ---------------------------------------------------------
   単発デザイン（シリーズ展開なし）。
   Figma: G5KvuLRTH4W5B37EMwDxLY
     全体コンプ   2:123「招待状」 800x7000  ← 座標の基準はすべてこれ
     名入れ表紙   23:549「Frame 1」（※photo_top を 1300 に引き伸ばした版なので
                  座標は 2:123 側を採用。photo_top.png の原寸は 800x834）
     参考画像     2:130 / 開幕コマは ref_cover_step1.jpg・ref_cover_step2.jpg
     動きメモ     21:380 / 21:370 / 26:602 / 26:604 / 26:606 / 21:371

   基準キャンバス: 幅 800。縦位置もすべて 800 幅に対する比率で置く
     --cw = min(100vw, 800px) とし calc(var(--cw) * N / 800) で Figma 実測値を再現。
     SP実表示は 375px 前後なので design_common.css の px/rem 固定値では大きすぎる。

   配色: 金 #c8a05f（全SVG共通の実測色） / 本文 #333（Figma注記 8:283）
   地紙: base.jpg 800x1770 をページ背景として縦リピート
        （コンプでも base1-4 として4枚並べている）

   ---------------------------------------------------------
   開幕アニメーション（すべてCSS。Lottieは使わない）
     お客様写真そのものがズーム・移動するため、写真を含められない
     Lottie では表現できない。transform/opacity のみで組む。

     (1) 0.2-1.0s  写真（小ひし形・中央）+ 中央タイトル/アイコン フェードイン
     (2) 1.6-2.4s  写真ズームイン。中央タイトル/アイコンは下へ移動しつつフェードアウト
     (3) 2.4-3.2s  写真が左へ（ひし形中心 x400 -> x183）
     (4) 3.0-3.9s  文様 右->左フェードイン
     (5) 3.3-4.2s  タイトル 右->左フェードイン
     (6) 3.5-4.4s  アイコン 右->左フェードイン
     (7) 3.9-4.4s  家紋アイコン / 4.1-4.6s 新郎新婦名 / 4.3-4.8s 日付 下からフェードイン

   ひし形の実測（PNGを画素走査して採寸）
     photo_top.png 800x834   透明窓: 上頂点(183,59) 下頂点(183,823) 高さ765
                             -> ひし形中心 (183, 441)
     base_top.png  1350x1300 黒ひし形: 上頂点(674.5,59) 下頂点(674.5,823) 高さ765
                             最大幅 x18..1331 -> 幅1314 / 中心 (674.5, 441)
     つまり両者のひし形は同寸（1314x765）。base_top は x=-275 配置で
     中心が画面 x400（中央）に来る。photo_top は中心 x183。
     -> (3)の「写真 左へ」は 400-183 = 217px の平行移動だけで再現できる
        （拡大縮小を伴わない）。transform-origin をひし形中心に置けば
        (2)のズームも scale だけで済む。
     (1)の小ひし形は Figma 2:276「photo 4」664x387 -> 664/1314 = 0.505
   ========================================================= */

.c-invitationPage--wi1292 {
	--cw: min(100vw, 800px);
	--aya-gold: #c8a05f;
	/* ボタン文字用。#c8a05f は白地に対しコントラスト比 2.4:1 で
	   WCAG AA(大文字3:1)にも届かないため、ラベルだけ暗い金にする */
	--aya-gold-text: #8a6a35;
	--aya-ink: #333;
	--aya-ease: cubic-bezier(0.22, 1, 0.36, 1);
	/* 右->左 / 下->上 フェードインの移動量 */
	--aya-shift: calc(var(--cw) * 40 / 800);

	/* 開幕ゲートの opt-in。design_cover_ready.js がこの値を見て、表紙の画像
	   （ひし形のお客様写真・文様・タイトル）が揃うまで --cover-play を paused に
	   保つ。揃った時点で .is-coverReady が付いて running になる。
	   詳細は design_cover_ready.js の冒頭と、本ファイル内の「開幕ゲート」ブロック。 */
	--cover-gate: 1;
	--cover-play: paused;

	color: var(--aya-ink);
	/* 地紙。コンプは 800x1770 を縦に4枚並べているので縦リピートで再現 */
	background-color: #f6f5f3;
	background-image: url(base.jpg);
	background-repeat: repeat-y;
	background-position: top center;
	background-size: 100% auto;
}

/* =========================================================
   名入れ表紙
   ========================================================= */
.c-invitationPage--wi1292 .c-invitationSec--title {
	position: relative;
	width: var(--cw);
	height: calc(var(--cw) * 1250 / 800);
	margin-inline: auto;
	padding: 0;
	overflow: hidden;
}

/* --- (1)(2)(3) 写真（ひし形） ------------------------------
   写真を clip-path でひし形に抜き、その箱ごと transform する。
   ひし形の周囲はページ背景 base.jpg がそのまま見えるので、
   拡大・縮小・移動しても紙の継ぎ目が出ない。 */
.c-invitationPage--wi1292 .c-ayaCover__mv {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: calc(var(--cw) * 834 / 800);
	/* ひし形の中心 (183, 441) を変形の軸にする */
	transform-origin: 22.875% 52.8777%;
	opacity: 0;
	animation: ayaMv 3s var(--aya-ease) 0.2s forwards;
	will-change: transform, opacity;
}
/* 写真。箱をひし形の外接矩形ぴったりに取り、clip-path でひし形に抜く。
     外接矩形（表紙座標）: x -474..840 / y 59..823 = 1314 x 764
     -> left -59.25% (-474/800) / top 7.0743% (59/834)
        width 164.25% (1314/800) / height 91.6067% (764/834)
   箱＝外接矩形なので clip-path は素直な菱形 polygon(50% 0, 100% 50%, 50% 100%, 0 50%)
   になり、photo_top.png の透明窓と頂点が一致する。

   ★ カバー画像 photo_top.png は重ねない。
     窓の外を隠す役目は clip-path が担うので不要になるうえ、
     (1)(2) で箱ごと拡大縮小・移動すると 800x834 の紙の矩形の縁が
     ページ背景（同じ base.jpg）との間に段差として見えてしまうため。
     ひし形の周囲の地紙はページ背景がそのまま担当する。

   箱 1314x764 = 1.72:1。支給の stage2 用素材 photo1.jpg が 1351x801(1.687)
   なのでこの比率が設計意図。近い定型比として 16:9 を採用する
   （wi_dtb_design.image1_ratio_x/y = 16/9）。 */
.c-invitationPage--wi1292 .c-ayaCover__photo {
	position: absolute;
	left: -59.25%;
	top: 7.0743%;
	width: 164.25%;
	height: 91.6067%;
	clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.c-invitationPage--wi1292 .c-ayaCover__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@keyframes ayaMv {
	/* (1) 小ひし形・中央（scale .505 / 中心を x400 へ = +217px） */
	0% {
		opacity: 0;
		transform: translateX(27.125%) scale(0.505);
		animation-timing-function: ease-out;
	}
	26.67% { /* 1.0s : フェードイン完了 */
		opacity: 1;
		transform: translateX(27.125%) scale(0.505);
		animation-timing-function: linear;
	}
	46.67% { /* 1.6s : ためを作ってからズーム開始 */
		opacity: 1;
		transform: translateX(27.125%) scale(0.505);
		animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	}
	/* (2) ズームイン完了（等倍・まだ中央） */
	73.33% { /* 2.4s */
		opacity: 1;
		transform: translateX(27.125%) scale(1);
		animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	}
	/* (3) 左へ 217px 移動して最終位置 */
	100% { /* 3.2s */
		opacity: 1;
		transform: translateX(0) scale(1);
	}
}

/* --- 開幕のみの中央タイトル（main_title1・中央寄せ版） -----
   Figma 動きメモ 2:250 / 2:272（フレーム基準 800x1300）。
   下へ移動しながらフェードアウトして、(5)以降の右上タイトルに主役を譲る。 */
.c-invitationPage--wi1292 .c-ayaCover__intro {
	position: absolute;
	inset: 0;
	pointer-events: none;
	--aya-intro-shift: calc(var(--cw) * 90 / 800);
	opacity: 0;
	animation: ayaIntro 2s var(--aya-ease) 0.4s forwards;
}
.c-invitationPage--wi1292 .c-ayaCover__introTtl {
	position: absolute;
	left: calc(var(--cw) * 250 / 800);
	top: calc(var(--cw) * 801 / 800);
	width: calc(var(--cw) * 300.06 / 800);
}
.c-invitationPage--wi1292 .c-ayaCover__introIcon {
	position: absolute;
	left: calc(var(--cw) * 335 / 800);
	top: calc(var(--cw) * 891 / 800);
	width: calc(var(--cw) * 129.38 / 800);
}
@keyframes ayaIntro {
	0%   { opacity: 0; transform: translateY(0); }
	40%  { opacity: 1; transform: translateY(0); }
	60%  { opacity: 1; transform: translateY(0); }
	100% { opacity: 0; transform: translateY(var(--aya-intro-shift)); }
}

/* --- (4) 文様 / (5) タイトル / (6) アイコン（右->左） ------ */
.c-invitationPage--wi1292 .c-ayaCover__parts {
	position: absolute;
	left: calc(var(--cw) * 238 / 800);
	top: calc(var(--cw) * 526 / 800);
	width: calc(var(--cw) * 562 / 800);
	height: calc(var(--cw) * 658 / 800);
	background: url(main_parts.png) no-repeat top left;
	background-size: 100% 100%;
	opacity: 0;
	animation: ayaFromRight 0.9s var(--aya-ease) 3s forwards;
}
.c-invitationPage--wi1292 .c-ayaCover__ttl {
	position: absolute;
	left: calc(var(--cw) * 431 / 800);
	top: calc(var(--cw) * 80 / 800);
	width: calc(var(--cw) * 300.06 / 800);
	opacity: 0;
	animation: ayaFromRight 0.9s var(--aya-ease) 3.3s forwards;
}
.c-invitationPage--wi1292 .c-ayaCover__icon {
	position: absolute;
	left: calc(var(--cw) * 604 / 800);
	top: calc(var(--cw) * 172 / 800);
	width: calc(var(--cw) * 129.38 / 800);
	opacity: 0;
	animation: ayaFromRight 0.9s var(--aya-ease) 3.5s forwards;
}

/* --- (7) 家紋・氏名・日付（下から。上のものから順に） ------ */
.c-invitationPage--wi1292 .c-ayaCover__crest {
	position: absolute;
	top: calc(var(--cw) * 919 / 800);
	width: calc(var(--cw) * 49.7 / 800);
	opacity: 0;
	animation: ayaFromBottom 0.5s var(--aya-ease) 3.9s forwards;
}
/* 縦書きなので右が新郎・左が新婦（Figma 2:145=梨華 x79 / 2:162=大佑 x168） */
.c-invitationPage--wi1292 .c-ayaCover__crest--bride { left: calc(var(--cw) * 72 / 800); }
.c-invitationPage--wi1292 .c-ayaCover__crest--groom { left: calc(var(--cw) * 161 / 800); }

.c-invitationPage--wi1292 .c-ayaCover__name {
	position: absolute;
	top: calc(var(--cw) * 996 / 800);
	margin: 0;
	writing-mode: vertical-rl;
	font-size: calc(var(--cw) * 36 / 800);
	line-height: 1;
	color: var(--aya-ink);
	white-space: nowrap;
	opacity: 0;
	animation: ayaFromBottom 0.5s var(--aya-ease) 4.1s forwards;
}
.c-invitationPage--wi1292 .c-ayaCover__name--bride { left: calc(var(--cw) * 79 / 800); }
.c-invitationPage--wi1292 .c-ayaCover__name--groom { left: calc(var(--cw) * 168 / 800); }

/* 一般用（$isBridal = false）は氏名の代わりに自由入力タイトルを横組みで置く */
.c-invitationPage--wi1292 .c-ayaCover__freeTitle {
	position: absolute;
	left: calc(var(--cw) * 72 / 800);
	top: calc(var(--cw) * 996 / 800);
	width: calc(var(--cw) * 400 / 800);
	margin: 0;
	font-size: calc(var(--cw) * 32 / 800);
	line-height: 1.5;
	text-align: left;
	color: var(--aya-ink);
	opacity: 0;
	animation: ayaFromBottom 0.5s var(--aya-ease) 4.1s forwards;
}

.c-invitationPage--wi1292 .c-ayaCover__date {
	position: absolute;
	left: 0;
	top: calc(var(--cw) * 1127 / 800);
	width: 100%;
	margin: 0;
	text-align: center;
	font-size: calc(var(--cw) * 25 / 800);
	line-height: 1;
	letter-spacing: calc(var(--cw) * 5 / 800);
	/* letter-spacing は最後の1字の後ろにも入るので、その分だけ右へ戻して中央を合わせる */
	text-indent: calc(var(--cw) * 5 / 800);
	color: var(--aya-ink);
	opacity: 0;
	animation: ayaFromBottom 0.5s var(--aya-ease) 4.3s forwards;
}

.c-invitationPage--wi1292 .c-ayaCover__intro img,
.c-invitationPage--wi1292 .c-ayaCover__ttl img,
.c-invitationPage--wi1292 .c-ayaCover__icon img,
.c-invitationPage--wi1292 .c-ayaCover__crest img {
	display: block;
	width: 100%;
	height: auto;
}

@keyframes ayaFromRight {
	from { opacity: 0; transform: translateX(var(--aya-shift)); }
	to   { opacity: 1; transform: translateX(0); }
}
@keyframes ayaFromBottom {
	from { opacity: 0; transform: translateY(var(--aya-shift)); }
	to   { opacity: 1; transform: translateY(0); }
}

/* =========================================================
   本文共通
   見出しはすべて支給SVG（金 #c8a05f）。幅は 800 キャンバス基準の実測値。
   ========================================================= */
.c-invitationPage--wi1292 .c-ayaTtl img,
.c-invitationPage--wi1292 .c-ayaSecIcon img {
	display: block;
	width: 100%;
	height: auto;
}
/* 見出しの上に載る扇アイコン title_icon.svg 129.38x75.07 */
.c-invitationPage--wi1292 .c-ayaSecIcon {
	width: calc(var(--cw) * 129.38 / 800);
	margin-inline: auto;
}

/* --- 招待文面 / MESSAGE ---
   Figma: title_icon 1 y1257 / title_message 1 y1367 278.05x23.8 */
.c-invitationPage--wi1292 .c-invitationSec--invTxt {
	max-width: none;
	margin: 0;
	/* 表紙の下端 1250 から title_icon の 1257 まで 7px */
	padding: calc(var(--cw) * 7 / 800) 0 calc(var(--cw) * 96 / 800);
}
.c-invitationPage--wi1292 .c-invitationSec--invTxt__ttl {
	width: calc(var(--cw) * 278.05 / 800);
	/* アイコン下端 1332 -> 見出し 1367 = 35 */
	margin: calc(var(--cw) * 35 / 800) auto 0;
}
/* 招待文面の版面。左右6%を除いた 704px。

   ★ 1行の文字数は「font-size + letter-spacing」で割ること。
     body に letter-spacing: 0.5px（public/css/commons/style.css:529-533）が
     入っていて本文へ継承されるので、26px 指定でも字送りは 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--wi1292 .c-invitationSec--invTxt__middle {
	margin: calc(var(--cw) * 72 / 800) 6% 0;
	font-size: calc(var(--cw) * 24 / 800);
	line-height: 2.1;
}

/* --- 写真2 + COUNT DOWN ---
   お客様写真の縦横比はまちまちなので帯を 3:2 に固定して切り抜き、
   カウントダウンの版面を確保する（wi_dtb_design.image2_ratio_x/y = 3/2）。 */
.c-invitationPage--wi1292 .c-invitationSec--img02 {
	/* .c-countdownSection(position:absolute; inset:0) の位置基準 */
	position: relative;
	margin: 0;
}
.c-invitationPage--wi1292 .c-invitationSec--img__img02,
.c-invitationPage--wi1292 .c-invitationSec--img__img03 {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}
.c-invitationPage--wi1292 .c-countdown {
	letter-spacing: 0.04em;
}
.c-invitationPage--wi1292 .c-countdown__textCD {
	font-size: calc(var(--cw) * 40 / 800);
	letter-spacing: 0.1em;
	text-indent: 0.1em;
}
.c-invitationPage--wi1292 .c-countdown__row1 {
	margin-top: calc(var(--cw) * 28 / 800);
}
.c-invitationPage--wi1292 .c-countdown__days,
.c-invitationPage--wi1292 .c-countdown__textBD {
	font-size: calc(var(--cw) * 96 / 800);
	line-height: 1;
	white-space: nowrap;
}
.c-invitationPage--wi1292 .c-countdown__textL {
	margin-top: calc(var(--cw) * 20 / 800);
	font-size: calc(var(--cw) * 40 / 800);
	line-height: 1;
	letter-spacing: 0.14em;
	text-indent: 0.14em;
	font-variant-caps: small-caps;
}
/* countdown.js が付ける u-justifySelf* は公開CSSに定義が無く効かないため、
   3列を等幅にしたうえで各セルを中央寄せに明示する（隣とぶつかるのを防ぐ） */
.c-invitationPage--wi1292 .c-countdown__row2 {
	width: 96%;
	margin-top: calc(var(--cw) * 32 / 800);
	column-gap: calc(var(--cw) * 16 / 800);
}
.c-invitationPage--wi1292 .c-countdown__row2 > div {
	justify-self: center;
	min-width: 0;
}
.c-invitationPage--wi1292 .c-countdown__hours,
.c-invitationPage--wi1292 .c-countdown__minutes,
.c-invitationPage--wi1292 .c-countdown__seconds {
	font-size: calc(var(--cw) * 88 / 800);
	line-height: 1.1;
	white-space: nowrap;
}
.c-invitationPage--wi1292 .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;
	white-space: nowrap;
}

/* --- 日程文面 / INVITATION ---
   Figma: title_icon 2 y2947 / title_invitation 1 y3056 387.26x24.14
   design_common.css:97 の背景 #eaeaea・左右 margin・色 #666 を解除して
   コンプ通り地紙の上に置く。 */
.c-invitationPage--wi1292 .c-invitationSec--scheTxt {
	margin: 0;
	padding: calc(var(--cw) * 96 / 800) 0;
	background-color: transparent;
	color: var(--aya-ink);
	font-size: calc(var(--cw) * 26 / 800);
	line-height: 2.1;
	text-align: center;
}
.c-invitationPage--wi1292 .c-invitationSec--scheTxt__ttl {
	width: calc(var(--cw) * 387.26 / 800);
	/* アイコン下端 3022 -> 見出し 3056 = 34 */
	margin: calc(var(--cw) * 34 / 800) auto 0;
	font-size: inherit;
	color: inherit;
}
.c-invitationPage--wi1292 .c-invitationSec--scheTxt__middle {
	margin: calc(var(--cw) * 72 / 800) 8% 0;
}

/* --- プロフィール ---
   Figma: title_profile y3685 / groom y3963 x543(右) / bride y4606 x129(左)
   共通の _profile と同じグリッド（新郎=写真左・新婦=写真右）が
   コンプの左右配置と一致するので、クラス構成は design_common.css:397-419 に乗る。
   見出し・GROOM/BRIDE・飾りだけ支給SVGに差し替える。
   プロフィール写真は 1:1（wi_dtb_design.image_profile_ratio_x/y = 1/1）。 */
.c-invitationPage--wi1292 .c-invitationSec--profile {
	padding: calc(var(--cw) * 60 / 800) 0 calc(var(--cw) * 96 / 800);
	line-height: 2;
}
.c-invitationPage--wi1292 .c-invitationSec--profile__ttl {
	width: calc(var(--cw) * 258.57 / 800);
	margin: 0 auto;
}
.c-invitationPage--wi1292 .c-invitationSec--profile__content {
	width: min(90%, 700px);
	margin-block-start: calc(var(--cw) * 72 / 800);
	align-items: center;
}
.c-invitationPage--wi1292 .c-invitationSec--profile__imageWrap img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}
.c-invitationPage--wi1292 .c-invitationSec--profile__name {
	font-size: calc(var(--cw) * 36 / 800);
	line-height: 1.3;
	letter-spacing: 0.08em;
}
/* GROOM 138.42x15.4 / BRIDE 114.95x14.74 */
.c-invitationPage--wi1292 .c-invitationSec--profile__role {
	width: calc(var(--cw) * var(--aya-role-w) / 800);
	margin: calc(var(--cw) * 22 / 800) auto 0;
}
.c-invitationPage--wi1292 .c-invitationSec--profile__content--groom { --aya-role-w: 138.42; }
.c-invitationPage--wi1292 .c-invitationSec--profile__content--bride { --aya-role-w: 114.95; }
/* icon.svg 66.26x38.16 */
.c-invitationPage--wi1292 .c-invitationSec--profile__deco {
	width: calc(var(--cw) * 66.26 / 800);
	margin: calc(var(--cw) * 24 / 800) auto 0;
}
.c-invitationPage--wi1292 .c-invitationSec--profile__role img,
.c-invitationPage--wi1292 .c-invitationSec--profile__deco img {
	display: block;
	width: 100%;
	height: auto;
}
.c-invitationPage--wi1292 .c-invitationSec--profile__commentWrap {
	margin-block-start: calc(var(--cw) * 56 / 800);
	font-size: calc(var(--cw) * 26 / 800);
	line-height: 1.95;
}

/* --- 返信案内 / 区切り線 / 備考 ---
   Figma: line 1 y6362 800x2 */
.c-invitationPage--wi1292 .c-invitationSec--toReply {
	margin: 0;
	padding: calc(var(--cw) * 72 / 800) 6%;
	font-size: calc(var(--cw) * 26 / 800);
	line-height: 2.1;
}
.c-invitationPage--wi1292 .c-invitationSec--line {
	width: 100%;
	margin: 0;
}
.c-invitationPage--wi1292 .c-invitationSec--line img {
	display: block;
	width: 100%;
	height: 2px;
}
/* 区切り線は line.png で描くので、design_common.css:130 の border-top は消す */
.c-invitationPage--wi1292 .c-invitationSec--caption {
	margin: 0;
	padding: calc(var(--cw) * 72 / 800) 6%;
	border-top: 0;
	font-size: calc(var(--cw) * 26 / 800);
	line-height: 2.1;
	color: var(--aya-ink);
}

/* ---- 返信ボタン ----
   ★ 寸法（幅・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--wi1292 .c-invitationSec--replyBtn {
	margin: 0 auto;
	padding: calc(var(--cw) * 60 / 800) 0 calc(var(--cw) * 120 / 800);
}
.c-invitationPage--wi1292 .c-invitationSec--replyBtn .c-buttonL {
	background-color: #fff;
	border: 1px solid var(--aya-gold);
	border-radius: 999px;
	color: var(--aya-gold-text);
	transition: color 0.3s var(--aya-ease), background-color 0.3s var(--aya-ease);
}
.c-invitationPage--wi1292 .c-invitationSec--replyBtn .c-buttonL:hover,
.c-invitationPage--wi1292 .c-invitationSec--replyBtn .c-buttonL:focus-visible {
	background-color: var(--aya-gold);
	color: #fff;
}

/* =========================================================
   返信フォーム / 支払い / 完了ページ
   見出しは front/parts/title_wi1292.blade.php
   Figma 2:167「フォーム」(800x1210): main_title1 250,127 / main_icon 335,217
   ========================================================= */
.c-invitationPage--wi1292.c-invitationPage--reply {
	background-image: url(base.jpg);
}
.c-invitationPage--wi1292 .c-ayaRepTitle {
	padding: calc(var(--cw) * 127 / 800) 0 calc(var(--cw) * 60 / 800);
}
.c-invitationPage--wi1292 .c-ayaRepTitle__ttl {
	width: calc(var(--cw) * 300.06 / 800);
	margin-inline: auto;
}
/* タイトル下端 181.8 -> アイコン 217 = 35 */
.c-invitationPage--wi1292 .c-ayaRepTitle__icon {
	width: calc(var(--cw) * 129.38 / 800);
	margin: calc(var(--cw) * 35 / 800) auto 0;
}
.c-invitationPage--wi1292 .c-ayaRepTitle__ttl img,
.c-invitationPage--wi1292 .c-ayaRepTitle__icon img {
	display: block;
	width: 100%;
	height: auto;
}

/* =========================================================
   モーション配慮：開幕の連鎖を止めて最終状態を即表示する
   ========================================================= */
/* ---------------------------------------------------------
   ★ 開幕ゲート：表紙の演出は素材が揃うまで止めておく

   これまでは delay（mv 0.2s / intro 0.4s / 文様 3s / タイトル 3.3s …）が
   「最初の描画」から動き出していた。一方でひし形のお客様写真や文様 PNG は
   ネットワーク次第で後から届くため、ズームや移動だけが先に進み、絵が
   途中から突然現れていた（＝「開始時、画像表示の挙動が乱れる」）。
   とくに ayaMv は 3s かけて拡大→移動する長い演出なので、写真の到着が遅いと
   演出の後半だけが見える形になり、乱れが目立つ。

   animation-play-state: paused は delay の消化も止めるので、素材が揃うまで
   待たせてから running にすれば「揃った瞬間が 0ms」になる。
   個々のルールに書き足すのではなくここでまとめて上書きしているのは、
   上のルールが animation ショートハンドで書かれており、ショートハンドが
   animation-play-state を初期値 running に戻してしまうため。
   2026-08-17: 「開始時、画像表示の挙動が乱れる」の修正。
   --------------------------------------------------------- */
.c-invitationPage--wi1292 .c-ayaCover__mv,
.c-invitationPage--wi1292 .c-ayaCover__intro,
.c-invitationPage--wi1292 .c-ayaCover__parts,
.c-invitationPage--wi1292 .c-ayaCover__ttl,
.c-invitationPage--wi1292 .c-ayaCover__icon,
.c-invitationPage--wi1292 .c-ayaCover__crest,
.c-invitationPage--wi1292 .c-ayaCover__name,
.c-invitationPage--wi1292 .c-ayaCover__freeTitle,
.c-invitationPage--wi1292 .c-ayaCover__date {
	animation-play-state: var(--cover-play, paused);
}
.c-invitationPage--wi1292.is-coverReady {
	--cover-play: running;
}

@media (prefers-reduced-motion: reduce) {
	.c-invitationPage--wi1292 .c-ayaCover__mv,
	.c-invitationPage--wi1292 .c-ayaCover__parts,
	.c-invitationPage--wi1292 .c-ayaCover__ttl,
	.c-invitationPage--wi1292 .c-ayaCover__icon,
	.c-invitationPage--wi1292 .c-ayaCover__crest,
	.c-invitationPage--wi1292 .c-ayaCover__name,
	.c-invitationPage--wi1292 .c-ayaCover__freeTitle,
	.c-invitationPage--wi1292 .c-ayaCover__date {
		animation: none;
		opacity: 1;
		transform: none;
	}
	/* 開幕専用の中央タイトルは最終状態では存在しないので消す */
	.c-invitationPage--wi1292 .c-ayaCover__intro {
		animation: none;
		opacity: 0;
	}
}


/* =========================================================
   本文の組版（招待文面 / 日程文面）— カラム落ち対策
   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 を <a> に置換するが、
     正規表現に日本語（\u3000-\u30FE / \u4E00-\u9FA0）が入っているため
     URL の後続日本語まで1本の <a> に飲み込む。これが分割不能な長トークンになり、
     この指定が無いと版面をあふれる。

   ★ 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--wi1292 {
	--text-fit: 1;
}
.c-invitationPage--wi1292 .c-invitationSec--invTxt__middle,
.c-invitationPage--wi1292 .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--wi1292 .c-invitationSec--invTxt__middle {
	text-wrap: pretty;
}