@charset "UTF-8";
/* =========================================================
   wi1306「リノ」（モノルス）
   ---------------------------------------------------------
   共通部分（本文セクション・開幕ゲート・@keyframes・フォント登録）は
   wi1298/design.css に集約してあるので @import する。
   このファイルには wi1306 固有の**表紙だけ**を書く。
   シリーズ展開ではないので、他品番の値をここに書かないこと。

   完成形の実測（最終状態 6002:247 ほか / キャンバス 800x1210 相対）
     K      244,-153  313x618   NewYork 507px 字送り116.61px(=.23em) 中心x=400.5
     E      274, 747  253x618   NewYork 507px                        中心x=400.5
     KOKI   317, 442  164x55    Trajan 46px 字送り11.04px(=.24em) 中央寄せ 中心x=399
     and    338, 520  123x66    and.png
     ERIKA  302, 631  194x55    Trajan 46px                      中央寄せ 中心x=399
     04     247, 719   77x72    Trajan 56px 字送り12.88px(=.23em) 中心x=285.5
     18     361, 719   77x72                                     中心x=399.5
     32     474, 719   77x72                                     中心x=512.5

   K は上へ、E は下へキャンバス外にはみ出す（マスクで切る）。

   動きメモ
     6001:67「イニシャル2つがそれぞれ真ん中からフェードインしながら上下へスライドして表示」
     6001:71「完成のところに到着のときには完全に表示」
     6001:72「新郎新婦の名前、日付を上から順にスライドダウンしながらフェードイン
              動き方：イージーイーズ」

   ★ 移動量は Figma の途中状態（6003:370 / 6003:371）から実測した:
     K は y=196 -> -153（349px 上へ） / E は y=406 -> 747（341px 下へ）
   ========================================================= */

@import url("/web_invitation/design_resource/wi1298/design.css");

/* --- イニシャルのマスク（キャンバス全面）。上下のはみ出しを切る --- */
.c-invitationPage--wi1306 .c-invitationSec--title__initialMask {
	position: absolute;
	inset: 0;
	overflow: hidden;
}
/* ★ 2026-09-16 修正: 中央寄せを translateX(-50%) から
   「左右いっぱいの箱 ＋ text-align: center」に変える。
   translateX(-50%) はボックス幅の半分ぶん動かすので、幅が奇数・小数だと
   **端数px の移動**になる。アニメーション中は合成レイヤー上で描かれ、
   終了してレイヤーが解除されるときに整数位置へ描き直されるため、
   最後に字が 1px 弱カクッと横に動いて見えていた。
   （text-indent を足してボックス幅が変わったことで端数が変化し、顕在化した）
   左右 0 の箱にすれば最終状態の transform は translateY(0) だけになり、
   横方向の端数が消える。中央の位置は変わらない。 */
.c-invitationPage--wi1306 .c-invitationSec--title__initial {
	left: 0;
	right: 0;                  /* 左右いっぱい ＋ text-align: center（共通側）で中央に置く */
	font-size: calc(var(--cw) * 507 / 800);
	opacity: 0;
	/* 「到着のときには完全に表示」＝移動の終了と opacity 1 を一致させるため、
	   同じ duration・同じ keyframe で opacity と translateY を動かす。 */
	animation: mono-slideInYPlain 1s ease-out .7s both;
	/* ★ 2026-09-16 修正: 字送りぶんの左ずれを text-indent で打ち消す。
	   letter-spacing は**最後の1文字の後ろにもアキを作る**ので、
	   shrink-to-fit のボックス幅 = 字面 + アキ になり、
	   translateX(-50%) で中心を取ると字面が「アキの半分」だけ左へずれる。
	   text-indent を letter-spacing と同値にすると、
	   ずれ = (text-indent - letter-spacing) / 2 = 0 になって中央に戻る。 */
	text-indent: .23em;        /* 共通の letter-spacing: .23em と同値 */
}
.c-invitationPage--wi1306 .c-invitationSec--title__initial--k {
	top: -12.6446%;            /* -153 / 1210 */
	--mono-from-y: calc(var(--cw) * 349 / 800);    /* 下から上へ */
}
.c-invitationPage--wi1306 .c-invitationSec--title__initial--e {
	top: 61.7355%;             /* 747 / 1210 */
	--mono-from-y: calc(var(--cw) * -341 / 800);   /* 上から下へ */
}

/* --- 氏名・and・日付 --- */
.c-invitationPage--wi1306 .c-invitationSec--title__name {
	left: 0;
	right: 0;                  /* 上の注記参照。translateX(-50%) をやめる */
	font-size: calc(var(--cw) * 46 / 800);
	letter-spacing: .24em;
	text-indent: .24em;        /* ★ 字送りぶんの左ずれを打ち消す（上の注記参照） */
	text-align: center;
}
.c-invitationPage--wi1306 .c-invitationSec--title__name--groom { top: 36.5289%; } /* 442 / 1210 */
.c-invitationPage--wi1306 .c-invitationSec--title__name--bride { top: 52.1488%; } /* 631 / 1210 */
.c-invitationPage--wi1306 .c-invitationSec--title__and {
	position: absolute;
	left: 42.25%;              /* 338 / 800 */
	top: 42.9752%;             /* 520 / 1210 */
	width: 15.375%;            /* 123 / 800 */
	height: 5.4545%;           /*  66 / 1210 */
}
.c-invitationPage--wi1306 .c-invitationSec--title__date {
	top: 59.4215%;             /* 719 / 1210 */
	font-size: calc(var(--cw) * 56 / 800);
	letter-spacing: .23em;
	text-indent: .23em;        /* ★ 字送りぶんの左ずれを打ち消す（上の注記参照） */
	line-height: 1.2857;       /* 72 / 56 */
	transform: translateX(-50%);
	text-align: center;
}
.c-invitationPage--wi1306 .c-invitationSec--title__date--m { left: 35.6875%; }  /* 中心 285.5 / 800 */
.c-invitationPage--wi1306 .c-invitationSec--title__date--d { left: 49.9375%; }  /* 中心 399.5 / 800 */
.c-invitationPage--wi1306 .c-invitationSec--title__date--y { left: 64.0625%; }  /* 中心 512.5 / 800 */

/* 「上から順にスライドダウンしながらフェードイン 動き方：イージーイーズ」
   氏名 -> and -> 氏名 -> 日付 の順。
   ★ 2026-09-15 指示「ワンテンポ開けてからもっとゆっくり」。
     イニシャルの着地は 0.7s + 1.0s = 1.7s。そこから 0.6s 空けて 2.3s 開始。
     尺  0.8s -> 2.4s ／ 間隔 0.15s -> 0.3s。
     イージングは ease-in-out から --mono-ease-soft（ease-out-quad）へ。
     降りてくる距離も 22px -> --mono-drop-y(34px) に広げて浮遊感を出している。 */
/* 氏名は左右いっぱいの箱で中央に置くので translateX を持たない keyframe。
   日付は m / d / y を個別に translateX(-50%) で置いているので、
   translateX を含む keyframe のままにする（取り違えると横にずれる）。 */
.c-invitationPage--wi1306 .c-invitationSec--title__name {
	opacity: 0;
	animation: mono-dropInPlain 2.4s var(--mono-ease-soft) both;
}
.c-invitationPage--wi1306 .c-invitationSec--title__date {
	opacity: 0;
	animation: mono-dropIn 2.4s var(--mono-ease-soft) both;
}
.c-invitationPage--wi1306 .c-invitationSec--title__and {
	opacity: 0;
	animation: mono-dropInPlain 2.4s var(--mono-ease-soft) 2.6s both;
}
.c-invitationPage--wi1306 .c-invitationSec--title__name--groom { animation-delay: 2.3s; }
.c-invitationPage--wi1306 .c-invitationSec--title__name--bride { animation-delay: 2.9s; }
.c-invitationPage--wi1306 .c-invitationSec--title__date        { animation-delay: 3.2s; }

@media (prefers-reduced-motion: reduce) {
	.c-invitationPage--wi1306 .c-invitationSec--title__initial,
	.c-invitationPage--wi1306 .c-invitationSec--title__name {
		transform: none;
	}
	.c-invitationPage--wi1306 .c-invitationSec--title__date {
		transform: translateX(-50%);
	}
	.c-invitationPage--wi1306 .c-invitationSec--title__and {
		transform: none;
	}
}