@charset "UTF-8";
/* =========================================================
   デイマークシリーズ 共通スタイル（wi1323 がシリーズの基準ファイル） SPファースト
   ---------------------------------------------------------
   ★ このファイルは展開 wi1324-wi1326 の design.css から
        @import url("/web_invitation/design_resource/wi1323/design.css");
      で読み込まれる共有スタイル。品番固有の値をここに直接書かないこと。
      シリーズ共通クラス:
        .c-invitationPage--daymark … 全品番の <main> に付与（スコープ）

   対象品番  wi1323 / wi1324 / wi1325 / wi1326
   4品番でマークアップ・レイアウト・動きは完全に同一。差分は
   design_resource/<code>/text_top.png（表紙上部の英文リード）だけ。
   ※ 4本の md5 が全て異なることを確認済み（b39b39d8 / f9173f1c / 5e4da304 / bd4033b8）
     Blade は品番ごとに実ファイル（wi_dtb_design.invitation_page_file_name =
     'invitation_wi1323' 等）。共用名にすると invitation_common へフォールバックする。
   ★ このファイルを触ると4品番すべてに反映される。

   デザイン基準キャンバス: 名入れ表紙 800 x 1200
   Figma: HwAzcRrC9AlT8PCS8LrnBW
     完成形（表紙） 23:549 "Frame 1" 800x1200   ← 座標・書体はすべてここの実測
     動きメモ       2:275 / 4003:3 / 4003:22 / 4003:82 の4状態差分
     全体ページ     4003:124(wi1323) 800x7447 ※フラット画像のため本文の座標は
                    レイヤーから取れない。本文セクションの寸法は完成形画像からの
                    実測（下に根拠を併記）で、レビュー時に微調整する前提。

   表紙の重ね順（動きメモの凡例「背景 / お客様画像 / カバー」準拠）
     z1 お客様写真   $image_path1（2:3 トリミング）
     z2 カバー       cover_wi1323-1326.png 800x1200（写真の上に乗せる薄いベール）
     z3 花のライン画 flower01-04.png を7箇所に配置（Mask group で 800x1200 にクリップ）
        + text_top.png 470x117
     z4 日付・新郎新婦名（Blade変数。素材化しない）
   ========================================================= */

/* ---------------------------------------------------------
   フォント
   NEWYORK.OTF は public/font/ に実体があるが design_common.css には
   未登録なのでここで登録する（wi1263 / wi1265 と同じ方式）。
   （design_common.css に既にある Lupine 等は絶対に再定義しないこと。
     後勝ちで全デザインの書体が壊れる）
   ファイル名の大文字小文字は Linux で厳密。実ファイルは NEWYORK.OTF。
   --------------------------------------------------------- */
@font-face {
	font-family: "NewYork";
	src: url("../../font/NEWYORK.OTF") format("opentype");
	font-display: swap;
}

.c-invitationPage--daymark {
	--cw: min(100vw, 800px);
	--daymark-ink: #3c3a37;
	--daymark-paper: #fff;
	--daymark-line: #d8d3cc;

	/* ★ 表紙のアクセント色。シリーズ4品番の唯一の差分。
	   支給の text_top.png の完全不透明画素の最頻色を実測した値で、
	   展開品番（wi1324-wi1326）は自分の design.css でこの1行だけ上書きする。
	     wi1323 #FFFFFF / wi1324 #E2C447 / wi1325 #E5769A / wi1326 #91D5E5
	   （4本とも不透明画素は 948px で完全に一致＝字形は同一、色だけが違う）
	   完成形 4003:125(wi1324) で挙式日も金色なのを確認済みなので、
	   text_top と同じ色を挙式日・新郎新婦名にも当てている。 */
	--daymark-accent: #fff;
	--daymark-ease: cubic-bezier(0.16, 1, 0.3, 1);

	/* 開幕ゲートの opt-in。design_cover_ready.js がこの値を見て、表紙の素材
	   （お客様写真・カバー・花7枚・text_top）が揃うまで --cover-play を paused に
	   保つ。揃った時点で .is-coverReady が付いて running になる＝「揃った瞬間が 0ms」。
	   詳細は design_cover_ready.js の冒頭と、本ファイル内の「開幕ゲート」ブロック。 */
	--cover-gate: 1;
	--cover-play: paused;

	/* 表紙の日付・氏名が使う NewYork(106KB) も待つ。@font-face の font-display が
	   swap でも、待たずに始めると日付のスライドダウンがフォールバック字幅で走って
	   着地後に字送りだけ変わる。本文書体 font1/2/3(3.6-9.3MB) は
	   design_cover_ready.js 側で除外されるので巻き込まない。 */
	--cover-gate-fonts: 1;

	/* --cover-gate-timeout は宣言しない。表紙のデザイン素材は
	   cover 1.0KB + flower01-04 60.9KB + text_top 3.6KB + NewYork 106.5KB = 約172KB と
	   軽く、既定の FAILSAFE 8000ms を踏み抜く想定が無いため。 */

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

/* =========================================================
   名入れ表紙
   ========================================================= */
.c-invitationPage--daymark .c-invitationSec--title {
	padding-top: 0;
	background-color: var(--daymark-paper);
}

/* 高さの基準はカバー画像（800x1200 の固定素材）。お客様写真は比率が
   トリミング枠に依存するので基準に使わない。 */
.c-invitationPage--daymark .c-invitationSec--title__img01Wrap {
	position: relative;
	max-width: 800px;
	margin: 0 auto;
	overflow: hidden;
	z-index: 0;
}

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

/* --- z2 カバー（高さの基準。通常フローの <img>） ------------ */
.c-invitationPage--daymark .c-invitationSec--title__cover {
	position: relative;
	z-index: 2;
}
.c-invitationPage--daymark .c-invitationSec--title__cover img {
	display: block;
	width: 100%;
	height: auto;
}

/* --- z3/z4 装飾・名入れ ------------------------------------ */
.c-invitationPage--daymark .c-invitationSec--title__deco {
	position: absolute;
	inset: 0;
	z-index: 3;
}

/* ---------------------------------------------------------
   花のライン画 7点
   Figma 23:549 / Mask group 4003:46 の実測。
   数値は「外枠 = 回転後の軸並行バウンディングボックス」と
   「内枠 = 素材の実寸（回転前）」の2段。回転は内枠側に掛ける。
     外枠 left/top/width/height … キャンバス 800x1200 に対する %
     内枠 width/height          … 外枠に対する %
   素材の実寸は支給ファイルと一致することを確認済み
     flower01.png 411x393 / flower02.png 332x249
     flower03.png 189x176 / flower04.png 287x236
   DOM順 = 重ね順（後ろの要素が上に乗る）。Figma の Mask group の順序に合わせている。
   --------------------------------------------------------- */
.c-invitationPage--daymark .c-invitationSec--title__flower {
	position: absolute;
	opacity: 0;
	animation: daymark-bloom 1.2s var(--daymark-ease) both;
}
/* 揺れ（なびき）は内側に分ける。外側はフェード(opacity+scale)を持っているので
   同じ要素で transform を2本のアニメーションに使うと後勝ちで潰れる。

   ★ 揺れ幅は花ごとに大小を織り交ぜている（動きメモ「花を個々でなびいてる感じに揺らす」）。
     大きく動く組 … f1 / f3 / f4（画面上で小さい花・端の花）
     控えめな組   … f2 / f5 / f6 / f7（前面の大きい花。ここまで大きく振ると画面全体が
                    たわんで見えるので、意図的に現状のままにしている）
   周期 6.1 / 6.7 / 7.1 / 7.9 / 8.6 / 9.5 / 11.3 秒は互いに整数比にならない値を選んである。
   揃った瞬間があると「一斉に揺れる」ように見えるため、再同期しないようにするのが目的。
   開始も 2.00-2.65s でずらしている（(1)のフェードは最遅 1.92s に終わるので必ずその後）。 */
.c-invitationPage--daymark .c-invitationSec--title__flowerSway {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	animation: daymark-sway var(--sway-d, 8s) ease-in-out var(--sway-delay, 2s) infinite;
}
.c-invitationPage--daymark .c-invitationSec--title__flower img {
	display: block;
	flex: none;
	max-width: none;
	transform: rotate(var(--rot, 0deg));
}

/* (1) flower03  外枠 -17,555 181.315x193.939 / 内枠 189x176 / 88.37deg */
.c-invitationPage--daymark .c-invitationSec--title__flower--f1 {
	left: -2.125%;
	top: 46.25%;
	width: 22.6644%;
	height: 16.1616%;
	animation-delay: 0s;
}
.c-invitationPage--daymark .c-invitationSec--title__flower--f1 img {
	width: 104.2385%;
	height: 90.7501%;
	--rot: 88.37deg;
}
.c-invitationPage--daymark .c-invitationSec--title__flower--f1 .c-invitationSec--title__flowerSway {
	/* 大 / ★この花だけ「茎の根元を軸に左へ弧を描く」動きにしている。
	   他の6枚のような中心まわりの回転＋平行移動だと、茎が生えていない側から
	   浮いて動くので不自然に見えるという指摘への対応。

	   軸の求め方（素材 flower03.png 189x176 を 88.37deg 回転して配置している）
	     素材のアルファ最下行から茎の先端 = (153.5, 174)
	     素材中心 (94.5, 88) からの差 (59.0, 86.0) を 88.37deg 回して (-84.29, 61.42)
	     外枠 181.315x193.939 の中心 (90.66, 96.97) に足して (6.37, 158.39)
	     -> 外枠比で 3.51% / 81.67%
	   平行移動は 0 にして、弧は回転だけで作る（軸が端にあるので回転だけで
	   花の頭が 12.7px ぶん左上へ動く）。負の角度 = 反時計回り = 頭が左へ振れる。 */
	transform-origin: 3.51% 81.67%;
	--sway-a: -7deg;
	--sway-y: 0;
	--sway-x: 0;
	--sway-d: 6.7s;
	--sway-delay: 2s;
}

/* (2) flower04-a  外枠 -112,738 287x236 / 回転なし */
.c-invitationPage--daymark .c-invitationSec--title__flower--f2 {
	left: -14%;
	top: 61.5%;
	width: 35.875%;
	height: 19.6667%;
	animation-delay: .12s;
}
.c-invitationPage--daymark .c-invitationSec--title__flower--f2 img {
	width: 100%;
	height: 100%;
}
.c-invitationPage--daymark .c-invitationSec--title__flower--f2 .c-invitationSec--title__flowerSway {
	/* 控えめ */
	--sway-a: 1.1deg;
	--sway-y: -4;
	--sway-x: 0;
	--sway-d: 9.5s;
	--sway-delay: 2.35s;
}

/* (3) flower04-b  外枠 366,968 347.066x366.165 / 内枠 287x236 / -60.36deg */
.c-invitationPage--daymark .c-invitationSec--title__flower--f3 {
	left: 45.75%;
	top: 80.6667%;
	width: 43.3833%;
	height: 30.5138%;
	animation-delay: .24s;
}
.c-invitationPage--daymark .c-invitationSec--title__flower--f3 img {
	width: 82.6928%;
	height: 64.4517%;
	--rot: -60.36deg;
}
.c-invitationPage--daymark .c-invitationSec--title__flower--f3 .c-invitationSec--title__flowerSway {
	/* 大 */
	--sway-a: 3.4deg;
	--sway-y: -12;
	--sway-x: -6;
	--sway-d: 7.9s;
	--sway-delay: 2.1s;
}

/* (4) flower04-c  外枠 655,620 220.416x184.466 / 内枠 212.477x174.719 / 177.32deg */
.c-invitationPage--daymark .c-invitationSec--title__flower--f4 {
	left: 81.875%;
	top: 51.6667%;
	width: 27.552%;
	height: 15.3722%;
	animation-delay: .36s;
}
.c-invitationPage--daymark .c-invitationSec--title__flower--f4 img {
	width: 96.3982%;
	height: 94.7161%;
	--rot: 177.32deg;
}
.c-invitationPage--daymark .c-invitationSec--title__flower--f4 .c-invitationSec--title__flowerSway {
	/* 大 */
	--sway-a: 5deg;
	--sway-y: -13;
	--sway-x: 6;
	--sway-d: 6.1s;
	--sway-delay: 2.55s;
}

/* (5) flower01-b  外枠 475,713 511.24x517.617 / 内枠 385.889x368.989 / -60.47deg */
.c-invitationPage--daymark .c-invitationSec--title__flower--f5 {
	left: 59.375%;
	top: 59.4167%;
	width: 63.905%;
	height: 43.1348%;
	animation-delay: .48s;
}
.c-invitationPage--daymark .c-invitationSec--title__flower--f5 img {
	width: 75.4809%;
	height: 71.2865%;
	--rot: -60.47deg;
}
.c-invitationPage--daymark .c-invitationSec--title__flower--f5 .c-invitationSec--title__flowerSway {
	/* 控えめ */
	--sway-a: 1deg;
	--sway-y: -4;
	--sway-x: 0;
	--sway-d: 11.3s;
	--sway-delay: 2.2s;
}

/* (6) flower02  外枠 166,988 332x249 / 回転なし */
.c-invitationPage--daymark .c-invitationSec--title__flower--f6 {
	left: 20.75%;
	top: 82.3333%;
	width: 41.5%;
	height: 20.75%;
	animation-delay: .6s;
}
.c-invitationPage--daymark .c-invitationSec--title__flower--f6 img {
	width: 100%;
	height: 100%;
}
.c-invitationPage--daymark .c-invitationSec--title__flower--f6 .c-invitationSec--title__flowerSway {
	/* 控えめ */
	--sway-a: 1.5deg;
	--sway-y: -5;
	--sway-x: 0;
	--sway-d: 7.1s;
	--sway-delay: 2.65s;
}

/* (7) flower01-a  外枠 -7,919 411x393 / 回転なし */
.c-invitationPage--daymark .c-invitationSec--title__flower--f7 {
	left: -.875%;
	top: 76.5833%;
	width: 51.375%;
	height: 32.75%;
	animation-delay: .72s;
}
.c-invitationPage--daymark .c-invitationSec--title__flower--f7 img {
	width: 100%;
	height: 100%;
}
.c-invitationPage--daymark .c-invitationSec--title__flower--f7 .c-invitationSec--title__flowerSway {
	/* 控えめ */
	--sway-a: 1.2deg;
	--sway-y: -4;
	--sway-x: 0;
	--sway-d: 8.6s;
	--sway-delay: 2.05s;
}

/* ---------------------------------------------------------
   表紙上部の英文リード  Figma 4003:55  182,143 470x117
   品番ごとに別ファイル（text_top.png）。パスは Blade が $design_code で組む。
   --------------------------------------------------------- */
.c-invitationPage--daymark .c-invitationSec--title__textTop {
	position: absolute;
	left: 22.75%;
	top: 11.9167%;
	width: 58.75%;
	height: 9.75%;
	opacity: 0;
	animation: daymark-bloom 1s var(--daymark-ease) 1.92s both;
}
.c-invitationPage--daymark .c-invitationSec--title__textTop img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* ---------------------------------------------------------
   挙式日  Figma 4003:56 / 4003:58 / 4003:57
     日 "24"  x292 y311 216x219  NewYork 180px  字送り 19.8px
     月 "Jan" x314 y477 172x138  NewYork 113px  字送り 11.3px
     年 "32"  x294 y586 211x219  NewYork 180px  字送り 18px
   3つとも「ボックス中心」が x=400（= キャンバス中央）に揃っている
     24  292+216/2 = 400 / Jan 314+172/2 = 400 / 32 294+211/2 = 399.5
   ので left:50% + translateX(-50%) で置く。桁数が変わっても中央に留まり、
   字送りの末尾アキも Figma と同じ扱いになる（text-indent で戻さないこと）。
   --------------------------------------------------------- */
/* ★ ul 自体をキャンバス全面に広げること。
   .c-invitationSec--title__date は共通CSS側で position:relative が付いており、
   子の li を absolute にすると ul の高さが 0 になる。すると li の top:% が
   「高さ0に対する%」= 0px に潰れて、日付3つが表紙の最上部に重なって出る。
   inset:0 で ul を表紙と同じ 800x1200 にしてから % を効かせる。 */
.c-invitationPage--daymark .c-invitationSec--title__date {
	position: absolute;
	inset: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}
.c-invitationPage--daymark .c-invitationSec--title__date > li {
	position: absolute;
	left: 50%;
	color: var(--daymark-accent);
	font-family: "NewYork", "Cormorant Garamond", "Times New Roman", serif;
	line-height: normal;
	white-space: nowrap;
	opacity: 0;
	transform: translateX(-50%);
	/* ★ ここは animation ショートハンドで書かないこと。
	   このルールは `... __date > li`（詳細度 0,2,1）で、下の __day / __month / __year は
	   クラス2つ（0,2,0）。ショートハンドは animation-delay を初期値 0s に戻すため、
	   詳細度で勝つこちらが下の animation-delay を打ち消して「日付が最初から出ている」
	   状態になる（実測で delay=0s・1.5秒時点で opacity=1 になっていた）。
	   delay 以外をロングハンドで書けば、下の3つの delay がそのまま生きる。 */
	animation-name: daymark-dateIn;
	animation-duration: 1s;
	animation-timing-function: ease-out;
	animation-fill-mode: both;
}
.c-invitationPage--daymark .c-invitationSec--title__day {
	top: 25.9167%;
	font-size: calc(var(--cw) * 180 / 800);
	letter-spacing: calc(var(--cw) * 19.8 / 800);
	animation-delay: 3.05s;
}
.c-invitationPage--daymark .c-invitationSec--title__month {
	top: 39.75%;
	font-size: calc(var(--cw) * 113 / 800);
	letter-spacing: calc(var(--cw) * 11.3 / 800);
	animation-delay: 3.2s;
}
.c-invitationPage--daymark .c-invitationSec--title__year {
	top: 48.8333%;
	font-size: calc(var(--cw) * 180 / 800);
	letter-spacing: calc(var(--cw) * 18 / 800);
	animation-delay: 3.35s;
}

/* ---------------------------------------------------------
   新郎新婦名  Figma 4003:59  中心 x400 / y796 / NewYork 30px / 字送り 3.9px
   お客様の任意入力なので nowrap にはしない。極端に長い氏名は折り返して
   受ける（下の flower02 は y988 から始まるので2行までは当たらない）。
   --------------------------------------------------------- */
.c-invitationPage--daymark .c-invitationSec--title__name {
	position: absolute;
	left: 50%;
	top: 66.3333%;
	width: 88%;
	color: var(--daymark-accent);
	font-family: "NewYork", "Cormorant Garamond", "Times New Roman", serif;
	font-size: calc(var(--cw) * 30 / 800);
	letter-spacing: calc(var(--cw) * 3.9 / 800);
	line-height: 1.35;
	text-align: center;
	opacity: 0;
	transform: translateX(-50%);
	animation: daymark-nameIn 1s var(--daymark-ease) 1.92s both;
}

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

   タイムライン（動きメモ 4状態の読解）
     (1) 花7枚     0.00s から 0.12s ずつずらして 1.2s フェードイン（その場で咲く）
                   -> 最後の1枚が 0.72+1.2 = 1.92s に出切る
     (2) 花の揺れ   2.00-2.65s からループ。振り幅は花ごとに大小を織り交ぜ、
                   周期も非調和（6.1-11.3s）にして一斉に揺れないようにしている
                   ★f1 だけ茎の根元を軸に左へ弧を描く（下の f1 のコメント参照）
     (3) text_top と新郎新婦名  1.92s に【同時】1.0s フェードイン
                   （花が出切ったタイミングに合わせている）
     (4) 挙式日     3.05 / 3.20 / 3.35s に上から順、1.0s で【裏からフェードイン】
                   （奥から手前へ = scale .86->1 + blur 10px->0 + opacity）
   --------------------------------------------------------- */
@keyframes daymark-bloom {
	from { opacity: 0; transform: scale(.92); }
	to   { opacity: 1; transform: none; }
}
/* 揺れは 0% と 100% を無変形にして、(1)のフェード終了姿勢から
   跳ねずに入り、ループの継ぎ目も出ないようにする。 */
@keyframes daymark-sway {
	0%   { transform: none; }
	28%  { transform: rotate(var(--sway-a, 1.2deg))
	                 translate(calc(var(--cw) * var(--sway-x, 0) / 800), calc(var(--cw) * var(--sway-y, -4) / 800)); }
	62%  { transform: rotate(calc(var(--sway-a, 1.2deg) * -.55))
	                 translate(calc(var(--cw) * var(--sway-x, 0) * -.4 / 800), calc(var(--cw) * var(--sway-y, -4) * -.5 / 800)); }
	100% { transform: none; }
}
/* 表紙上部の英文リードと同時に出す新郎新婦名。translateX(-50%) が中央寄せなので
   キーフレーム側でも必ず書く（書かないと scale だけになって左にずれる）。 */
@keyframes daymark-nameIn {
	from { opacity: 0; transform: translateX(-50%) scale(.92); }
	to   { opacity: 1; transform: translateX(-50%) scale(1); }
}
/* 挙式日の「裏からフェードイン」。奥から手前に寄ってくる見え方にするため
   scale を小さめから戻しつつ blur を抜く。translateX(-50%) は上と同じ理由で必須。 */
@keyframes daymark-dateIn {
	from { opacity: 0; filter: blur(10px); transform: translateX(-50%) scale(.86); }
	to   { opacity: 1; filter: blur(0);    transform: translateX(-50%) scale(1); }
}

/* ---------------------------------------------------------
   ★ 開幕ゲート：表紙の演出は素材が揃うまで止めておく

   animation-play-state: paused は delay の消化も止めるので、素材が揃うまで
   待たせてから running にすれば「揃った瞬間が 0ms」になる。
   個々のルールに書き足すのではなくここでまとめて上書きしているのは、
   上のルールが animation ショートハンドで書かれており、ショートハンドが
   animation-play-state を初期値 running に戻してしまうため。
   展開品番（wi1324-wi1326）が animation を再宣言しても running に戻らない。

   ★ セレクタの網羅は機械的に検算する:
     animation: を宣言しているのは __flower（基底クラス1本）/ __flowerSway /
     __textTop / __date > li / __name の 5本。下のブロックも 5本で一致する。
   --------------------------------------------------------- */
.c-invitationPage--daymark .c-invitationSec--title__flower,
.c-invitationPage--daymark .c-invitationSec--title__flowerSway,
.c-invitationPage--daymark .c-invitationSec--title__textTop,
.c-invitationPage--daymark .c-invitationSec--title__date > li,
.c-invitationPage--daymark .c-invitationSec--title__name {
	animation-play-state: var(--cover-play, paused);
}

@media (prefers-reduced-motion: reduce) {
	.c-invitationPage--daymark .c-invitationSec--title__flower,
	.c-invitationPage--daymark .c-invitationSec--title__flowerSway,
	.c-invitationPage--daymark .c-invitationSec--title__textTop,
	.c-invitationPage--daymark .c-invitationSec--title__date > li,
	.c-invitationPage--daymark .c-invitationSec--title__name {
		animation: none;
		opacity: 1;
		filter: none;
	}
	/* 花の揺れだけ止める。img 側の rotate は「回転して配置されている」という
	   静的な姿勢なので絶対に消さないこと（消すと花の向きが崩れる）。 */
	.c-invitationPage--daymark .c-invitationSec--title__flower,
	.c-invitationPage--daymark .c-invitationSec--title__flowerSway {
		transform: none;
	}
	.c-invitationPage--daymark .c-invitationSec--title__date > li,
	.c-invitationPage--daymark .c-invitationSec--title__name {
		transform: translateX(-50%);
	}
}

/* =========================================================
   本文セクション
   ★ 全体ページの完成形（Figma 4003:124）はフラット画像でレイヤーを持たない。
     以下の座標は完成形画像 800x7447 からの実測値で、±10px 程度の誤差がある。
     レビュー時に詰める前提の値。
   ========================================================= */

/* ---- 見出し（花アイコン + 英字ロゴ） ----
   icon.png 138x130 / message.png 206x52 / invitation.png 220x52 / profile.png 156x52 */
/* セクションの縦リズム。完成形 800x7447 の見出しアイコン y から起こした値
     表紙下端 1200 -> MESSAGE アイコン 1274        = 74
     COUNT DOWN 帯下端 2861 -> INVITATION アイコン 2998 = 137
     INVITATION 本文下 -> PROFILE 見出し             = 137 相当
   design_common.css の既定（invTxt margin-bottom:4rem / scheTxt padding:4rem 2rem）は
   上書きしているので、ここで明示しないと隙間が 0 になる。 */
.c-invitationPage--daymark .c-invitationSec--invTxt,
.c-invitationPage--daymark .c-invitationSec--scheTxt,
.c-invitationPage--daymark .c-invitationSec--profile {
	text-align: center;
}
.c-invitationPage--daymark .c-invitationSec--invTxt {
	padding-top: calc(var(--cw) * 74 / 800);
}
.c-invitationPage--daymark .c-invitationSec--profile {
	padding-top: calc(var(--cw) * 137 / 800);
}
.c-invitationPage--daymark .c-invitationSec--invTxt__icon,
.c-invitationPage--daymark .c-invitationSec--scheTxt__icon,
.c-invitationPage--daymark .c-invitationSec--profile__icon {
	margin: 0 auto;
	width: calc(var(--cw) * 138 / 800);
}
.c-invitationPage--daymark .c-invitationSec--invTxt__icon img,
.c-invitationPage--daymark .c-invitationSec--scheTxt__icon img,
.c-invitationPage--daymark .c-invitationSec--profile__icon img {
	display: block;
	width: 100%;
	height: auto;
}
.c-invitationPage--daymark .c-invitationSec--invTxt__ttl,
.c-invitationPage--daymark .c-invitationSec--scheTxt__ttl,
.c-invitationPage--daymark .c-invitationSec--profile__ttl {
	margin: calc(var(--cw) * 18 / 800) auto 0;
}
.c-invitationPage--daymark .c-invitationSec--invTxt__ttl img,
.c-invitationPage--daymark .c-invitationSec--scheTxt__ttl img,
.c-invitationPage--daymark .c-invitationSec--profile__ttl img {
	display: block;
	margin: 0 auto;
	width: auto;
	height: calc(var(--cw) * 52 / 800);
}

/* ★ INVITATION の灰色ボックスを外す。
   design_common.css:97-105 が .c-invitationSec--scheTxt に
   background-color:#eaeaea / padding:4rem 2rem / margin:0 2rem / color:#666 を
   付けており、そのままだと日程だけ灰色の箱で囲まれて完成形と食い違う。
   wi1288 も同じ箇所を transparent にしている（あちらは color:#666 を残している）。 */
.c-invitationPage--daymark .c-invitationSec--scheTxt {
	margin: 0;
	padding: calc(var(--cw) * 137 / 800) 0 0;
	background-color: transparent;
	color: inherit;
}

/* ---- 招待文面 / 日程文面 ----
   本文は中央揃え。--text-fit: 1 は design_text_fit.js の opt-in で、
   CSS で入り切らない文面（お客様の任意入力）を font-size の自動縮小で受ける。
   対象セレクタは design_text_fit.js 側に固定で持っている
   （.c-invitationSec--invTxt__middle, .c-invitationSec--scheTxt__middle）。 */
.c-invitationPage--daymark {
	--text-fit: 1;
}
.c-invitationPage--daymark .c-invitationSec--invTxt__middle,
.c-invitationPage--daymark .c-invitationSec--scheTxt__middle {
	margin: calc(var(--cw) * 56 / 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--daymark .c-invitationSec--scheTxt__middle {
	text-align: left;
}

/* ---- 写真 + COUNT DOWN ----
   .c-countdownSection は design_common.css 側で position:absolute / inset:0 なので
   位置基準をここで作る。帯は完成形実測 800x509 ≒ 3:2。 */
.c-invitationPage--daymark .c-invitationSec--img02 {
	position: relative;
	margin-top: calc(var(--cw) * 110 / 800);
	margin-bottom: 0;
}
.c-invitationPage--daymark .c-invitationSec--img__img02 {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}
.c-invitationPage--daymark .c-countdownSection {
	background-color: rgba(60, 58, 55, .28);
}
.c-invitationPage--daymark .c-countdown {
	font-family: "NewYork", "Cormorant Garamond", serif;
	color: #fff;
	letter-spacing: .04em;
}
.c-invitationPage--daymark .c-countdown__textCD {
	font-size: calc(var(--cw) * 40 / 800);
	letter-spacing: .18em;
	text-indent: .18em;
}
.c-invitationPage--daymark .c-countdown__row1 {
	margin-top: calc(var(--cw) * 24 / 800);
}
.c-invitationPage--daymark .c-countdown__days,
.c-invitationPage--daymark .c-countdown__textBD {
	font-size: calc(var(--cw) * 104 / 800);
	line-height: 1;
	white-space: nowrap;
}
.c-invitationPage--daymark .c-countdown__textL {
	margin-top: calc(var(--cw) * 14 / 800);
	font-size: calc(var(--cw) * 34 / 800);
	line-height: 1;
	letter-spacing: .2em;
	text-indent: .2em;
	font-variant-caps: small-caps;
}
/* u-justifySelfEnd / Center / Start は public/css 配下に定義が無く効かないため
   3列を等幅にして各セルを中央寄せに明示する（無いと文字同士がぶつかる） */
.c-invitationPage--daymark .c-countdown__row2 {
	width: 96%;
	margin-top: calc(var(--cw) * 28 / 800);
	column-gap: calc(var(--cw) * 16 / 800);
}
.c-invitationPage--daymark .c-countdown__row2 > div {
	justify-self: center;
	min-width: 0;
}
.c-invitationPage--daymark .c-countdown__hours,
.c-invitationPage--daymark .c-countdown__minutes,
.c-invitationPage--daymark .c-countdown__seconds {
	font-size: calc(var(--cw) * 84 / 800);
	line-height: 1.1;
	white-space: nowrap;
}
.c-invitationPage--daymark .c-countdown__textS {
	margin-top: calc(var(--cw) * 8 / 800);
	font-size: calc(var(--cw) * 20 / 800);
	letter-spacing: .08em;
	text-indent: .08em;
	white-space: nowrap;
}

/* ---- プロフィール ----
   完成形実測: 新郎写真 約 340x313（≒1:1）左端 31px / 新婦は左右反転
   groom.png 91x29 / bride.png 70x28 */
.c-invitationPage--daymark .c-invitationSec--profile__block {
	display: flex;
	align-items: center;
	gap: calc(var(--cw) * 32 / 800);
	margin: calc(var(--cw) * 60 / 800) 4% 0;
}
.c-invitationPage--daymark .c-invitationSec--profile__block--bride {
	flex-direction: row-reverse;
}
.c-invitationPage--daymark .c-invitationSec--profile__photo {
	flex: none;
	width: 44%;
	overflow: hidden;
}
.c-invitationPage--daymark .c-invitationSec--profile__photo img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}
.c-invitationPage--daymark .c-invitationSec--profile__meta {
	flex: 1 1 auto;
	min-width: 0;
	text-align: center;
}
.c-invitationPage--daymark .c-invitationSec--profile__name {
	font-size: calc(var(--cw) * 30 / 800);
	line-height: 1.4;
	letter-spacing: .08em;
}
.c-invitationPage--daymark .c-invitationSec--profile__role {
	margin-top: calc(var(--cw) * 14 / 800);
}
.c-invitationPage--daymark .c-invitationSec--profile__role img {
	display: block;
	margin: 0 auto;
	width: auto;
	height: calc(var(--cw) * 29 / 800);
}
/* 氏名 + GROOM/BRIDE の下に置く小さな花のマーク。見出しと同じ icon.png を
   縮小して使う（完成形で見出しのアイコンと同じ絵柄）。 */
.c-invitationPage--daymark .c-invitationSec--profile__deco {
	margin-top: calc(var(--cw) * 16 / 800);
}
.c-invitationPage--daymark .c-invitationSec--profile__deco img {
	display: block;
	margin: 0 auto;
	width: calc(var(--cw) * 52 / 800);
	height: auto;
}
.c-invitationPage--daymark .c-invitationSec--profile__comment {
	margin: calc(var(--cw) * 30 / 800) 6% 0;
	font-size: calc(var(--cw) * 22 / 800);
	line-height: 2;
	text-align: center;
	word-break: normal;
	overflow-wrap: anywhere;
}

/* ---- 返信案内 / 備考 ---- */
.c-invitationPage--daymark .c-invitationSec--toReply__txt,
.c-invitationPage--daymark .c-invitationSec--caption__txt {
	margin: 0 6%;
	font-size: calc(var(--cw) * 22 / 800);
	line-height: 2.1;
	text-align: center;
}
/* 備考の上の区切り罫。素材支給が無いので CSS の 1px で引く。 */
.c-invitationPage--daymark .c-invitationSec--line {
	display: none;
	width: 88%;
	height: 1px;
	margin: calc(var(--cw) * 70 / 800) auto 0;
	background-color: var(--daymark-line);
}

/* ---- 返信ボタン ----
   ★ 共通パーツなので色と枠線だけを上書きする。
     font-size / padding / line-height / width / max-width と
     __btnWrap の margin は design_common.css の既定に任せること
     （既存デザイン約150品番がこの流儀。寸法を起こすとシリーズ間でばらつく）。 */
.c-invitationPage--daymark .c-invitationSec--replyBtn__btnWrap .c-buttonL {
	color: var(--daymark-ink);
	border: 1px solid var(--daymark-ink);
	border-radius: 999px;
	background-color: transparent;
	transition: color .25s ease, background-color .25s ease;
}
.c-invitationPage--daymark .c-invitationSec--replyBtn__btnWrap .c-buttonL:hover,
.c-invitationPage--daymark .c-invitationSec--replyBtn__btnWrap .c-buttonL:focus-visible {
	color: #fff;
	background-color: var(--daymark-ink);
}