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

   完成形の実測（最終状態 6002:181 ほか / キャンバス 800x1210 相対）
     縦線            527,123    4x962   line.png
     マスク           529,0    271x1210  この中でイニシャルを左から出す
     A               479,71   249x488   NewYork 400px 字送り92px(=.23em) 中心x=603.5
     &               507,504  194x255   Ade 250px     字送り57.5px(=.23em) 中心x=604
     R               487,672  234x488   NewYork 400px                      中心x=604
     PLEASE JOIN US   75,173  320x302   joinus.png
     02               68,800   88x89    NewYork 73px 字送り6.57px(=.09em)
     OCT              68,890  170x89
     32               68,987   85x72

   動きメモ
     6001:23 「縦の線が上から下に表示」
     6001:28 「線からテキストが右に向かって出てくる
               テキストはクリッピングマスクで左側を切れるようにする」
     6003:280「テキストと日付をフェードイン」（= PLEASE JOIN US と 02 OCT 32）
   ========================================================= */

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

/* --- 縦線。上から下へ伸ばすので transform-origin は top --- */
.c-invitationPage--wi1302 .c-invitationSec--title__vline {
	position: absolute;
	left: 65.875%;             /* 527 / 800 */
	top: 10.1653%;             /* 123 / 1210 */
	width: .5%;                /*   4 / 800 */
	height: 79.5041%;          /* 962 / 1210 */
	transform-origin: top center;
	transform: scaleY(0);
	animation: mono-growY .8s var(--mono-ease) .7s both;
}

/* --- イニシャルのマスク。左側を切るためのクリッピング --- */
.c-invitationPage--wi1302 .c-invitationSec--title__initialMask {
	position: absolute;
	left: 66.125%;             /* 529 / 800 */
	top: 0;
	width: 33.875%;            /* 271 / 800 */
	height: 100%;
	overflow: hidden;          /* 動きメモの「クリッピングマスクで左側を切る」 */
}
/* マスク内の座標はマスク（271x1210）基準。中心はいずれも x=75 前後 */
.c-invitationPage--wi1302 .c-invitationSec--title__initial--a,
.c-invitationPage--wi1302 .c-invitationSec--title__initial--r {
	font-size: calc(var(--cw) * 400 / 800);
	/* ★ 2026-09-16 修正: 字送りを 0 にする。
	   共通側は .23em を当てているが、イニシャルは**1文字**なので字送りは
	   字間ではなく**末尾のアキ**にしかならない（400px なら 92px）。
	   ボックスは 249+92=341px になり、translateX(-50%) で中心を合わせると
	   字そのものが 46px 左へずれる。この品番はマスクで左を切るので、
	   そのぶん余計に文字が隠れていた（実測 A の見え幅 152.7px / 完成形は 184px）。
	   0 にするとボックス幅が Figma のテキストノード幅（A=249 / R=234）と一致し、
	   left の % はそのままで完成形どおりの切れ方（左 50px ぶん）になる。 */
	letter-spacing: 0;
}
/* ★ 2026-09-16 指示: A / & / R の中心を **left: 25.583%** に揃える。
   マスク（左529 / 幅271）基準なので絶対座標では 529 + 271*0.25583 = 598.3。
   Figma 完成形 6002:223 の中心 603.5 の 5px 左にあたる。
   3文字とも同じ値で、字幅の差ぶんだけ切れ量が変わる。
   ※ 経緯: 当初 2.583%（＝縦線の右端 +5px）で実装したが深く切れすぎたため、
     指示によりこの値へ変更した。 */
.c-invitationPage--wi1302 .c-invitationSec--title__initial--a {
	left: 25.583%;             /* 中心 598.3 = 529 + 271*0.25583 */
	top: 5.8678%;              /*  71 / 1210 */
}
.c-invitationPage--wi1302 .c-invitationSec--title__initial--r {
	left: 25.583%;
	top: 55.5372%;             /* 672 / 1210 */
}
/* ★ 2026-09-16 修正: 「&」を画像に置き換え。
   Figma の指定は **Ade Display**（6002:205）で実ファイルが未受領のため
   NewYork で代用していたが、字形が大きく違う（NewYork の & は直立、
   Ade Display の & は筆記体風のスワッシュ付き）。
   お客様データではなく固定の1文字なので、Figma から SVG で書き出して貼る。
   amp_wi1302.svg = 190x201（インクの実寸）。
   座標は完成形 6002:223 を画素走査して採寸:
     インク左 499 / 上 514 / 190x201（キャンバス 800x1210 相対）
     -> マスク（左529 / 幅271）基準に換算して中心 (594-529)/271 = 23.9852% */
.c-invitationPage--wi1302 .c-invitationSec--title__initial--amp {
	left: 25.583%;             /* 中心 598.3（A / R と同じ） */
	top: 42.4793%;             /* 514 / 1210 */
	width: 70.1107%;           /* 190 / 271 */
	height: 16.6116%;          /* 201 / 1210 */
	font-size: 0;              /* テキストの & は使わないので行ボックスを潰す */
}
.c-invitationPage--wi1302 .c-invitationSec--title__initial--amp img {
	display: block;
	width: 100%;
	height: 100%;
}
.c-invitationPage--wi1302 .c-invitationSec--title__initial {
	transform: translateX(-50%);
	opacity: 0;
	/* 自分の幅の 115% ぶん左（＝マスクの外）から右へ入ってくる。
	   px ではなく % にしているのは、A/&/R で字幅が違っても
	   「必ずマスクの外から出てくる」ことを保証するため。 */
	animation: mono-slideInFromLine .8s var(--mono-ease) 1.4s both;
}

/* --- PLEASE JOIN US と日付 --- */
.c-invitationPage--wi1302 .c-invitationSec--title__joinus {
	position: absolute;
	left: 9.375%;              /*  75 / 800 */
	top: 14.2975%;             /* 173 / 1210 */
	width: 40%;                /* 320 / 800 */
	height: 24.9587%;          /* 302 / 1210 */
}
.c-invitationPage--wi1302 .c-invitationSec--title__date {
	left: 8.5%;                /* 68 / 800 */
	font-family: var(--mono-initial-font);   /* この品番だけ日付も NewYork */
	font-size: calc(var(--cw) * 73 / 800);
	letter-spacing: .09em;
}
.c-invitationPage--wi1302 .c-invitationSec--title__date--d { top: 66.1157%; }  /* 800 / 1210 */
.c-invitationPage--wi1302 .c-invitationSec--title__date--m { top: 73.5537%; }  /* 890 / 1210 */
.c-invitationPage--wi1302 .c-invitationSec--title__date--y { top: 81.5702%; }  /* 987 / 1210 */
.c-invitationPage--wi1302 .c-invitationSec--title__joinus,
.c-invitationPage--wi1302 .c-invitationSec--title__date {
	opacity: 0;
	/* ★ 2026-09-15 指示「ワンテンポ開けてからもっとゆっくりフワーっと」。
	   イニシャルの着地は 1.4s + 0.8s = 2.2s。そこから 0.6s 空けて 2.8s 開始。
	   尺 0.9s -> 2.4s、イージングは --mono-ease-soft、
	   さらに --mono-float-y ぶん下から浮き上がる（keyframe は wi1298 側で定義）。 */
	animation: mono-floatIn 2.4s var(--mono-ease-soft) 2.8s both;
}

/* 線から右へ出てくる動き。中央寄せ（translateX(-50%)）の上に重ねるので
   keyframe 側にも translateX(-50%) を書く（書かないと幅の半分ずれる）。 */
@keyframes mono-slideInFromLine {
	from { opacity: 0; transform: translateX(-50%) translateX(-115%); }
	to   { opacity: 1; transform: translateX(-50%) translateX(0); }
}

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