@charset "UTF-8";
/* =========================================================
   和乃花シリーズ 共通スタイル（wi1288 がシリーズの基準ファイル） SPファースト
   ---------------------------------------------------------
   ★ このファイルはMV展開 wi1289-wi1291 の design.css から
        @import url("/web_invitation/design_resource/wi1288/design.css");
      で読み込まれる共有スタイル。品番固有の値をここに直接書かないこと。
      展開側で上書きするのは表紙の画像3点だけ（レイアウト・動きは完全共通）:
        .c-invitationSec--title__baseArt   … main_base_<id>.png   金アーチ枠
        .c-invitationSec--title__middle    … main_middle_<id>.png 2枚目
        .c-invitationSec--title__coverArt  … main_top_1288-1291.png 白カバー
      シリーズ共通クラス:
        .c-invitationPage--wanoka … 全品番の <main> に付与（スコープ）

   対象品番（MV展開）  ※wi1288 は wi1249 と同一デザイン
     wi1288 = 1288 / wi1289 = 1289 / wi1290 = 1290 / wi1291 = 1291
   4品番でマークアップは完全に同一。差分は design_resource/<code>/ の
   main_base_<id>.png と main_middle_<id>.png（＝MV画像）だけなので、
   ページ・表紙とも Blade 1ファイルを共用する。
     CSS  : wi1289-wi1291/design.css が本ファイルを @import
            （リポジトリ既存の色展開102件・Flomシリーズと同じ方式）
     Blade: 4品番とも wi_dtb_design.invitation_page_file_name = 'invitation_wanoka'
   ★ このファイルを触ると4品番すべてに反映される。1品番だけ調整したい場合は
     design_resource/<code>/design.css 側で上書きすること。

   デザイン基準キャンバス: 名入れ表紙 800 x 1300
   Figma: UkKGxntLHsNPJVopm8ewnk / 完成形 2:123 (800x7447) ・表紙 2001:1677
     ただし Figma にあるのは 1288（= wi1288 / wi1249）のみ。
     1289-1291 のMV素材は支給ファイルで、幾何は 1288 と一致することを確認済み
       main_middle_*  … 支給は 800x1301 キャンバスだが不透明域は 1288 と同じ左端 625px
       main_base_*    … 不透明域は全品番とも左端 675px
     いずれも background-size:contain / no-repeat top left で 1288 と同じ絵になる。

   基調色: #ac854f  新郎新婦名: DFHSMinchoR Pro-5 / 日付: Lupine
   SP ファースト。PC (>=640px) は design_pc.css で調整。

   表紙の重ね順（動きメモ準拠 / Figma 2001:1355 / 2001:1511 / 2001:1517）
     ①背景   0s   : main_base_1288-1291.jpg（高さ基準）
                    + お客様写真×2（ブロブ窓）
                    + main_base_<id>.png（金アーチ枠・窓が透明）
     ②2枚目  0.2s : main_middle_<id>.png  625x1300  左からスイング
     ③カバー  1.4s : お客様写真（アーチ窓）
                    + main_top_1288-1291.png 576x1300（白カバー・窓が透明）
                    左からスイング
   ========================================================= */

:root {
	--wanoka-gold: #ac854f;
	--wanoka-ink: #3a332b;
	--wanoka-paper: #fbfaf7;
	--wanoka-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

.c-invitationPage--wanoka {
	/* 開幕ゲートの opt-in。design_cover_ready.js がこの値を見て、表紙の画像
	   （背景・金アーチ枠・2枚目・白カバー・お客様写真）が揃うまで --cover-play を
	   paused に保つ。揃った時点で .is-coverReady が付いて running になる。
	   詳細は design_cover_ready.js の冒頭と、本ファイル内の「開幕ゲート」ブロック。 */
	--cover-gate: 1;
	--cover-play: paused;
	color: var(--wanoka-ink);
	background: var(--wanoka-paper);
}
.c-invitationPage--wanoka.is-coverReady {
	--cover-play: running;
}

/* ---------------------------------------------------------
   名入れ表紙
   --------------------------------------------------------- */
.c-invitationPage--wanoka .c-invitationSec--title {
	background-color: #fff;
	padding-top: 0;
}
.c-invitationPage--wanoka .c-invitationSec--title__img01Wrap {
	position: relative;
	margin: 0 auto;
	z-index: 0;
	overflow: hidden;
}

/* 各ステージ共通 */
.c-invitationPage--wanoka .c-invitationSec--title__base,
.c-invitationPage--wanoka .c-invitationSec--title__middle,
.c-invitationPage--wanoka .c-invitationSec--title__cover {
	transform-origin: left top;
}
.c-invitationPage--wanoka .c-invitationSec--title__middle,
.c-invitationPage--wanoka .c-invitationSec--title__cover {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* --- ①背景 : 0s フェードイン ------------------------------ */
.c-invitationPage--wanoka .c-invitationSec--title__base {
	position: relative;
	z-index: 1;
	opacity: 0;
	animation: wanoka-base-in 1.6s var(--wanoka-ease-out) 0s forwards;
}
/* 高さの基準になるベース画像。ここだけ通常フローの <img> */
.c-invitationPage--wanoka .c-invitationSec--title__baseImg {
	display: block;
	width: 100%;
	height: auto;
}
/* お客様写真（ブロブの形は baseArt の透明窓が作るので角丸は不要）
   Figma: photo1 x157 y289 401x390 / photo2 x0 y681 434x486 */
.c-invitationPage--wanoka .c-invitationSec--title__basePhoto1,
.c-invitationPage--wanoka .c-invitationSec--title__basePhoto2 {
	position: absolute;
	z-index: 1;
	overflow: hidden;
}
.c-invitationPage--wanoka .c-invitationSec--title__basePhoto1 {
	top: 22.231%;
	left: 19.625%;
	width: 50.125%;
	height: 30%;
}
.c-invitationPage--wanoka .c-invitationSec--title__basePhoto2 {
	top: 52.385%;
	left: 0;
	width: 54.25%;
	height: 37.385%;
}
.c-invitationPage--wanoka .c-invitationSec--title__basePhoto1 img,
.c-invitationPage--wanoka .c-invitationSec--title__basePhoto2 img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* 金アーチ枠。写真の上に乗って窓の形を作る */
.c-invitationPage--wanoka .c-invitationSec--title__baseArt {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	background: url(main_base_1288.png) no-repeat top left;
	background-size: contain;
}

/* --- ②2枚目 : 0.2s 左からスイング ------------------------- */
.c-invitationPage--wanoka .c-invitationSec--title__middle {
	z-index: 2;
	background: url(main_middle_1288.png) no-repeat top left;
	background-size: contain;
	opacity: 0;
	transform: rotate(95deg);
	animation: wanoka-swing-in 2s var(--wanoka-ease-out) 0.2s forwards;
}

/* --- ③カバー : 1.4s 左からスイング -------------------------
   最後の一枚（coverArt）の入りが遅いとの指摘により 2s -> 1.4s。
   swing-in は 40% まで opacity 0 なので体感の出現は 1.4+0.8=2.2s。
   これに合わせて下の名入れテキスト群の delay も一律 0.6s 前倒しする。 */
.c-invitationPage--wanoka .c-invitationSec--title__cover {
	z-index: 3;
	opacity: 0;
	transform: rotate(95deg);
	animation: wanoka-swing-in 2s var(--wanoka-ease-out) 1.4s forwards;
}
/* アーチ窓に見えるメイン写真（576/800 = 72%）

   main_top_1288-1291.png の透明部は「写真窓」と「アーチ外側の楔形」の2つで、
   右端側の細い通路で連結している（実測: y=450 は 窓(128,560)/楔(564,575) に
   分離、y=480 で (96,575) に合流）。そのため白カバーだけに任せると写真が
   右上の楔形にも露出する。cover_photo_mask.png はそれを防ぐ 543x668 のマスク。

   ★ マスクの作り方（2026-08-18 / 543x669 / 4品番とも同一ファイル・md5一致）
     main_top_1288-1291.png のアルファから**写真窓の形をそのまま起こす**。

     1. 行ごとに透明ランを取り、**最初の窓ラン（開始 x<500）だけ**を使う。
        2本目以降は「アーチ外側の楔形」か、y880 以降に出る
        **素材右端 x=575 の 1px の薄い透け**（素材自身の縁のアンチエイリアス）なので
        取り込まない。取り込むと下部の右端に 1px の筋が出る。
     2. しきい値は用途で分ける。
        ・縁の位置   … 緩め（alpha>=8）。アンチエイリアスの縁まで含める
        ・楔形の判定 … 厳しめ（alpha>=124）。緩いと y450 付近で窓と楔形が
                       地続きに見えてしまい、楔形に写真が漏れる
     3. 隙間が出ないよう **3px 太らせる**（横→縦の順に膨張）。
        はみ出した分は上に乗る白カバーが隠すので露出しない。
     4. 太らせたあと、楔形がある行は「窓の右端と楔形の左端の中間」で再クランプする。
        中間は白カバーが不透明な領域なので、そこまで塗っても露出しない。

     ★ やってはいけない2つ
       (a) 「窓の右端でぴったり切る」… 2026-08-17 にこれで作ったところ、窓の縁の
           アンチエイリアス4px分に写真が届かず、下の②2枚目レイヤーが透けて
           **上側の浅い弧に沿って茶色い破線状の隙間**が出た。
           実測 y=330: 窓は厳密 339..409 だが緩めでは 413 まで伸びており、
           x410 に下層の色がほぼ素で出ていた。
       (b) 「白カバーが形を作るのだからマスクは楔形を塞ぐ矩形でよい」… 描画結果は
           正しくなるが、マスク単体が窓の形をしておらず**ファイルを開いた人が
           壊れていると判断する**（実際に指摘を受けた）。窓の形で作れば
           描画も見た目も一致するので、必ず形を起こす。

     ★ マスクは CSS から url() で参照するので Blade の filemtime による
       キャッシュバスターが効かない。**作り直したら ?YYYYMMDDnn を必ず付け替える**
       （付けないとブラウザが古いマスクを使い回し、直したのに直って見えない）。
   （①背景の写真2枚は main_base_1288.png の透明窓が正しく形を作るのでマスク不要） */
.c-invitationPage--wanoka .c-invitationSec--title__coverPhoto {
	position: absolute;
	/* 窓の外接矩形にぴったり合わせる（実測 x33-575 / y325-993 = 543x669）。
	   ★ 上端は y326 ではなく y325。アルファを緩い判定で見ると窓は y325 から
	     始まっており（y325 の窓は 368..385）、y326 起点だと頂点に 1px の
	     隙間が残って下層が透ける。2026-08-18 に 1px 広げた。
	   カバー全面 576x1300 にすると object-fit:cover で写真が 1.9 倍に拡大される。

	   ★ 2026-08-17: 幅を 529 -> 543 に修正（「アップされる画像とフレームの端が
	     ずれている」の修正）。旧値 529（= x33-561）は窓の右端を測り損なっていた。
	     main_top_1288-1291.png のアルファを行ごとに走査すると窓の透明域は
	       y330-450 / y900-990 … 右端 409〜560（アーチの曲線に沿う）
	       y480-870          … 右端 575（＝カバー素材の右端まで開いている）
	     で、中央の帯（y480-870）では窓が x575 まで開いている。
	     旧実装は箱もマスクも x561 で止まっていたため、その 14px は窓が開いた
	     ままになり、下の ②2枚目レイヤーの和柄が透けて見えていた
	     （実測 y=600: 写真は x545-561 で切れ、x566 以降に和柄 172,133,79 が出ていた）。
	     Figma 完成形の同じ行では写真が x575 まで続き、x576 から和柄になる。
	   ※ 窓の右側が y465 以降で縦一直線に閉じるのは仕様。白カバー素材が
	     800px キャンバスに対して 576px 幅しかなく、窓が素材の右端(x575)で
	     切れているため。Figma 完成形も同じで、2026-08-18 にデザイナー確認済み
	     （「窓の右側はデザインの通り直線で閉じてOK」）。素材の作り直しは不要。
	   ※ 窓は 543:669 = 0.812。wi_dtb_design.image1_ratio は 4:5 = 0.800 なので
	     object-fit:cover で上下が計 1.5% 切られる。厳密に合わせるなら
	     image1_ratio を 543:669 相当にする（未対応）。 */
	top: 25%;
	left: 4.125%;
	width: 67.875%;
	height: 51.4615%;
	z-index: 1;
	overflow: hidden;
	-webkit-mask-image: url(cover_photo_mask.png?2026081802);
	        mask-image: url(cover_photo_mask.png?2026081802);
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
	-webkit-mask-position: top left;
	        mask-position: top left;
	-webkit-mask-size: 100% 100%;
	        mask-size: 100% 100%;
}
.c-invitationPage--wanoka .c-invitationSec--title__coverPhoto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* 白カバー。アーチ窓が透明で写真を抜く */
.c-invitationPage--wanoka .c-invitationSec--title__coverArt {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	background: url(main_top_1288-1291.png) no-repeat top left;
	background-size: contain;
}

@keyframes wanoka-base-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}
/* 「左から」= transform-origin left top を軸に開くように現れる */
@keyframes wanoka-swing-in {
	0%   { opacity: 0; transform: rotate(95deg); }
	40%  { opacity: 0; }
	100% { opacity: 1; transform: rotate(0deg); }
}

/* ---------------------------------------------------------
   飾り文字 / 日付 / 新郎新婦名
   すべて表紙キャンバス 800x1300 に対する比率で配置
   --------------------------------------------------------- */
.c-invitationPage--wanoka .c-invitationSec--title__deco {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 4;
	pointer-events: none;
}
.c-invitationPage--wanoka .c-invitationSec--title__deco img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* ① main_text1 KOTOBUKI 縦組み  x49 y147 37.91x495.63 */
.c-invitationPage--wanoka .c-invitationSec--title__deco--text1 {
	position: absolute;
	top: 11.308%;
	left: 6.125%;
	width: 4.739%;
	height: 38.126%;
}
/* ② main_text2 縦組み英文       x132 y144 50.71x358.34 */
.c-invitationPage--wanoka .c-invitationSec--title__deco--text2 {
	position: absolute;
	top: 11.077%;
	left: 16.5%;
	width: 6.339%;
	height: 27.565%;
}
/* ③ main_text3 YOU ARE INVITED  x529 y103 195.34x381.6 */
.c-invitationPage--wanoka .c-invitationSec--title__deco--text3 {
	position: absolute;
	top: 7.923%;
	left: 66.125%;
	width: 24.418%;
	height: 29.354%;
}
/* ⑤ main_text4 縦組み英文       x704 y899 44.58x302.84 */
.c-invitationPage--wanoka .c-invitationSec--title__deco--text4 {
	position: absolute;
	top: 69.154%;
	left: 88%;
	width: 5.573%;
	height: 23.295%;
}

/* ④ 日付 11 | 28 | 32
   Figma: 数字 x743（中心92.875%）Lupine 75px、各中心 y612/722/832.5
          line_date x703 y668 55x105（区切り線2本が1枚に入っている） */
.c-invitationPage--wanoka .c-invitationSec--title__dateLine {
	position: absolute;
	top: 51.385%;
	left: 87.875%;
	width: 6.875%;
	height: 8.077%;
}
.c-invitationPage--wanoka .c-invitationSec--title__date {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--wanoka-gold);
	/* Lupine は design_common.css:549 で登録済み (../font/Lupine.woff) */
	font-family: "Lupine", serif;
	font-size: min(9.375vw, 75px);
	line-height: 1;
}
.c-invitationPage--wanoka .c-invitationSec--title__date > li {
	position: absolute;
	left: 92.875%;
	transform: translate(-50%, -50%);
	writing-mode: vertical-rl;
	white-space: nowrap;
}
.c-invitationPage--wanoka .c-invitationSec--title__month { top: 47.077%; }
.c-invitationPage--wanoka .c-invitationSec--title__day   { top: 55.538%; }
.c-invitationPage--wanoka .c-invitationSec--title__year  { top: 64.038%; }

/* ⑥ 新郎新婦名（縦書き・右に新郎／左に新婦）
   Figma: 大佑 x312 中心41.6875% / 梨華 x220 中心30.1875%
          y1072 h100 中心86.308%  43px DFHSMinchoR Pro-5 line-height 50px */
.c-invitationPage--wanoka .c-invitationSec--title__name {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	color: var(--wanoka-gold);
	/* ＤＦ平成明朝体Ｒ Pro-5 は design_common.css で "font1" として登録済み
	   (../font/DFHSMinchoRPro5-W3.woff)。氏名はお客様のフォント選択に依らず
	   デザイン指定の書体で出すため font1 を直接指定する。 */
	font-family: "font1", "Hiragino Mincho ProN", serif;
	font-size: min(5.375vw, 43px);
	line-height: 1.163;
	letter-spacing: 0;
}
.c-invitationPage--wanoka .c-invitationSec--title__name > * {
	position: absolute;
	top: 86.308%;
	transform: translate(-50%, -50%);
	writing-mode: vertical-rl;
	text-orientation: upright;
	white-space: nowrap;
	margin: 0;
}
.c-invitationPage--wanoka .c-invitationSec--title__name__groom { left: 41.6875%; }
.c-invitationPage--wanoka .c-invitationSec--title__name__bride { left: 30.1875%; }
.c-invitationPage--wanoka .c-invitationSec--title__general--font {
	left: 35.9375%;
	font-family: "font1";
}

/* --- モーション --------------------------------------------
   カバーが出そろう 3.4s 以降に飾りを順次。
   （カバーの delay を 2s -> 1.4s に前倒したのに合わせ、
     以下の delay も一律 0.6s 早めて間延びを防いでいる）
   ①③「描かれてく」= clip-path のワイプ（読み順に現れる）
     ① KOTOBUKI は縦組みなので上→下
     ③ YOU ARE INVITED はアーチ沿いなので左→右
   ②④⑤⑥「ふわっと現れる」= opacity
   ----------------------------------------------------------- */
.c-invitationPage--wanoka .c-invitationSec--title__deco--text1 {
	clip-path: inset(0 0 100% 0);
	animation: wanoka-draw-y 1.8s var(--wanoka-ease-out) 3.4s forwards;
}
.c-invitationPage--wanoka .c-invitationSec--title__deco--text3 {
	clip-path: inset(0 100% 0 0);
	animation: wanoka-draw-x 1.6s var(--wanoka-ease-out) 4.2s forwards;
}
@keyframes wanoka-draw-y {
	from { clip-path: inset(0 0 100% 0); }
	to   { clip-path: inset(0 0 0 0); }
}
@keyframes wanoka-draw-x {
	from { clip-path: inset(0 100% 0 0); }
	to   { clip-path: inset(0 0 0 0); }
}

.c-invitationPage--wanoka .c-invitationSec--title__deco--text2,
.c-invitationPage--wanoka .c-invitationSec--title__deco--text4,
.c-invitationPage--wanoka .c-invitationSec--title__dateLine,
.c-invitationPage--wanoka .c-invitationSec--title__date > li,
.c-invitationPage--wanoka .c-invitationSec--title__name > * {
	opacity: 0;
	animation: wanoka-soft-in 1.4s var(--wanoka-ease-out) forwards;
}
.c-invitationPage--wanoka .c-invitationSec--title__deco--text2 { animation-delay: 3.8s; }
.c-invitationPage--wanoka .c-invitationSec--title__dateLine    { animation-delay: 4.8s; }
.c-invitationPage--wanoka .c-invitationSec--title__date > li   { animation-delay: 4.8s; }
.c-invitationPage--wanoka .c-invitationSec--title__deco--text4 { animation-delay: 5.2s; }
.c-invitationPage--wanoka .c-invitationSec--title__name > *    { animation-delay: 5.6s; }

@keyframes wanoka-soft-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

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

   これまでは上の delay（base 0s / middle 0.2s / cover 1.4s / 飾り 3.4-5.6s）が
   「最初の描画」から動き出していた。一方で表紙の絵はネットワーク次第で
   後から届くため、演出だけが先に進み、絵が途中から突然現れていた。
   実測（wi1288 / SP390 / キャッシュ無効）では first paint 376ms に対して
   wanoka-base-in の再生開始が 362ms、カバー PNG 3枚（127/300/316KB）の到着が
   274-284ms とほぼ同時刻に並んでいて、順序の保証がまったく無かった。

   animation-play-state: paused は delay の消化も止めるので、
   素材が揃うまで待たせてから running にすれば「揃った瞬間が 0ms」になる。
   個々のルールに書き足すのではなくここでまとめて上書きしているのは、
   上のルールが animation ショートハンドで書かれており、ショートハンドが
   animation-play-state を初期値 running に戻してしまうため。
   MV展開（wi1289-wi1291）が animation を再宣言しても running に戻らない。
   2026-08-17: 「開始時の背景や画像表示の挙動が乱れる」の修正。
   --------------------------------------------------------- */
.c-invitationPage--wanoka .c-invitationSec--title__base,
.c-invitationPage--wanoka .c-invitationSec--title__middle,
.c-invitationPage--wanoka .c-invitationSec--title__cover,
.c-invitationPage--wanoka .c-invitationSec--title__deco--text1,
.c-invitationPage--wanoka .c-invitationSec--title__deco--text2,
.c-invitationPage--wanoka .c-invitationSec--title__deco--text3,
.c-invitationPage--wanoka .c-invitationSec--title__deco--text4,
.c-invitationPage--wanoka .c-invitationSec--title__dateLine,
.c-invitationPage--wanoka .c-invitationSec--title__date > li,
.c-invitationPage--wanoka .c-invitationSec--title__name > * {
	animation-play-state: var(--cover-play, paused);
}

@media (prefers-reduced-motion: reduce) {
	.c-invitationPage--wanoka .c-invitationSec--title__base,
	.c-invitationPage--wanoka .c-invitationSec--title__middle,
	.c-invitationPage--wanoka .c-invitationSec--title__cover,
	.c-invitationPage--wanoka .c-invitationSec--title__deco--text1,
	.c-invitationPage--wanoka .c-invitationSec--title__deco--text2,
	.c-invitationPage--wanoka .c-invitationSec--title__deco--text3,
	.c-invitationPage--wanoka .c-invitationSec--title__deco--text4,
	.c-invitationPage--wanoka .c-invitationSec--title__dateLine,
	.c-invitationPage--wanoka .c-invitationSec--title__date > li,
	.c-invitationPage--wanoka .c-invitationSec--title__name > * {
		animation: none;
		opacity: 1;
		clip-path: none;
	}
	.c-invitationPage--wanoka .c-invitationSec--title__middle,
	.c-invitationPage--wanoka .c-invitationSec--title__cover {
		transform: none;
	}
	.c-invitationPage--wanoka .c-invitationSec--title__date > li,
	.c-invitationPage--wanoka .c-invitationSec--title__name > * {
		transform: translate(-50%, -50%);
	}
}

/* ---------------------------------------------------------
   招待文面 / 日程文面
   --------------------------------------------------------- */
.c-invitationPage--wanoka .c-invitationSec--invTxt {
	padding: 4rem 0 6rem;
	position: relative;
	margin-bottom: 0;
	z-index: 0;
}
.c-invitationPage--wanoka .c-invitationSec--scheTxt {
	background-color: transparent;
	padding: 4rem 0 6rem;
}

/* 花アイコン title_icon.svg 147.64x126.13 */
.c-invitationPage--wanoka .c-invitationSec--invTxt__icon,
.c-invitationPage--wanoka .c-invitationSec--scheTxt__icon {
	width: 18.455%;
	max-width: 148px;
	margin: 0 auto 1.2rem;
}
/* MESSAGE 288.92x31.85 / INVITATION 379.21x31.85 */
.c-invitationPage--wanoka .c-invitationSec--invTxt__ttl,
.c-invitationPage--wanoka .c-invitationSec--scheTxt__ttl {
	margin: 0 auto 2.5rem;
}
.c-invitationPage--wanoka .c-invitationSec--invTxt__ttl {
	width: 36.115%;
	max-width: 289px;
}
.c-invitationPage--wanoka .c-invitationSec--scheTxt__ttl {
	width: 47.401%;
	max-width: 379px;
}
.c-invitationPage--wanoka .c-invitationSec--invTxt__icon img,
.c-invitationPage--wanoka .c-invitationSec--scheTxt__icon img,
.c-invitationPage--wanoka .c-invitationSec--invTxt__ttl img,
.c-invitationPage--wanoka .c-invitationSec--scheTxt__ttl img {
	display: block;
	width: 100%;
	height: auto;
}

/* 本文の版面。
   design_common.css の 1.2rem(=SP 12px) + margin 2rem では
   最長行「つきましては ささやかながら披露の小宴を催したく存じます」28文字が
   12px x 28 = 336px となり、版面 375-40=335px を1文字ぶん超えて
   カラム落ちしていた。800px キャンバス基準の比例指定に置き換えて
   25px x 28 = 700px < 720px（左右5%）の余裕を作る。
   日程文面も同じ版面なので、
   「住　所　　　東京都渋谷区神宮前1-2-3 〇〇ビル5F」級の
   26文字（650px）まで1行で収まる。

   ★ ただし上の見積りは2点を外していた（2026-08-18 修正）。
     (1) body の letter-spacing: 0.5px（public/css/commons/style.css:529-533）が
         本文へ継承されるので、字送りは 25px ではなく 25.5px。
         28字 = 714px で 720px にほぼ余裕が無かった。→ letter-spacing: 0 を明示。
     (2) design_pc.css が max-width: 560px で版面を絞っていたため、
         PC の実効は 21字しかなく 28字に7字ぶん足りなかった。
         この上限は本ファイルの見積り(720px)と矛盾し、
         wi1292/design_pc.css:15-20 でも「不可」と明記されている手当てなので撤去した。
     結果 720px / 字送り25px = 28.8字。font-size は 25px のまま据え置き。 */
.c-invitationPage--wanoka .c-invitationSec--invTxt__middle,
.c-invitationPage--wanoka .c-invitationSec--scheTxt__middle {
	--cw: min(100vw, 800px);
	margin: 0 5%;
	z-index: 2;
	font-size: calc(var(--cw) * 25 / 800);
	line-height: 2.1;
}

/* ---- 写真 + COUNT DOWN ----
   .c-countdownSection は position:absolute / inset:0 なので
   位置基準をここで作る（design_common.css 側に position 指定は無い）。
   帯は素材 pixta_79289247_L.jpg の 4000x2668 = 3:2 に合わせる。 */
.c-invitationPage--wanoka .c-invitationSec--img02 {
	--cw: min(100vw, 800px);
	position: relative;
	margin-bottom: 0;
}
.c-invitationPage--wanoka .c-invitationSec--img__img03 {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}
.c-invitationPage--wanoka .c-countdownSection {
	background-color: rgba(58, 51, 43, .32);   /* --wanoka-ink ベースのスクリム */
}
.c-invitationPage--wanoka .c-countdown {
	/* Lupine はオールドスタイル数字で桁が不揃いになるため Gerbera を使う */
	font-family: "Gerbera", serif;
	letter-spacing: .04em;
}
.c-invitationPage--wanoka .c-countdown__textCD {
	font-size: calc(var(--cw) * 43 / 800);
	letter-spacing: .1em;
	text-indent: .1em;
}
.c-invitationPage--wanoka .c-countdown__row1 {
	margin-top: calc(var(--cw) * 30 / 800);
}
.c-invitationPage--wanoka .c-countdown__days,
.c-invitationPage--wanoka .c-countdown__textBD {
	font-size: calc(var(--cw) * 100 / 800);
	line-height: 1;
	white-space: nowrap;
}
.c-invitationPage--wanoka .c-countdown__textL {
	margin-top: calc(var(--cw) * 22 / 800);
	font-size: calc(var(--cw) * 43 / 800);
	line-height: 1;
	letter-spacing: .14em;
	text-indent: .14em;
	font-variant-caps: small-caps;
}
/* u-justifySelfEnd / Center / Start は public/css 配下に定義が無く効かないため
   3列を等幅にして各セルを中央寄せに明示する（無いと文字同士がぶつかる） */
.c-invitationPage--wanoka .c-countdown__row2 {
	width: 96%;
	margin-top: calc(var(--cw) * 34 / 800);
	column-gap: calc(var(--cw) * 16 / 800);
}
.c-invitationPage--wanoka .c-countdown__row2 > div {
	justify-self: center;
	min-width: 0;
}
.c-invitationPage--wanoka .c-countdown__hours,
.c-invitationPage--wanoka .c-countdown__minutes,
.c-invitationPage--wanoka .c-countdown__seconds {
	font-size: calc(var(--cw) * 92 / 800);
	line-height: 1.1;
	white-space: nowrap;
}
.c-invitationPage--wanoka .c-countdown__textS {
	margin-top: calc(var(--cw) * 10 / 800);
	font-size: calc(var(--cw) * 22 / 800);
	letter-spacing: .08em;
	text-indent: .08em;
	white-space: nowrap;
}

/* ---------------------------------------------------------
   プロフィール
   Figma 実測（全体コンプ 800x7447 の y4020-5350 を計測）
     PROFILE 見出し   x275-530 (256x32) 中央
     新郎写真         x40-426  y4134-4519  387x386 ≒ 1:1  左端 40px
     新郎テキスト列   写真の右。氏名 y4241-4277 (38px, 中心 x613)
                      GROOM  y4307-4323 (111x15)
                      アイコン y4343-4392 (57x49)
     新郎コメント     y4578-4699  全幅中央  28px / 行送り 49px
     新婦写真         x373-759 y4778-5162  387x385  右端 41px
     新婦テキスト列   写真の左。中心 x186.5

   写真は「正方形」で、新郎は左・新婦は右に置く左右交互のレイアウト。
   縦の間隔・文字サイズは 800px キャンバス基準を --cw で比例させる。
   --------------------------------------------------------- */
.c-invitationPage--wanoka .c-invitationSec--profile {
	--cw: min(100vw, 800px);
	padding: calc(var(--cw) * 60 / 800) 0 calc(var(--cw) * 80 / 800);
}

/* PROFILE 見出し 256x32 */
.c-invitationPage--wanoka .c-invitationSec--profile__ttl {
	width: 32%;
	max-width: 256px;
	margin: 0 auto calc(var(--cw) * 82 / 800);
}
.c-invitationPage--wanoka .c-invitationSec--profile__ttl img {
	display: block;
	width: 100%;
	height: auto;
}

/* 写真 + テキストの行。新婦は左右反転 */
.c-invitationPage--wanoka .c-invitationSec--profile__block {
	display: flex;
	align-items: center;
}
.c-invitationPage--wanoka .c-invitationSec--profile__block--groom {
	padding-left: 5%;
	--role-w: 111;
}
.c-invitationPage--wanoka .c-invitationSec--profile__block--bride {
	flex-direction: row-reverse;
	padding-right: 5%;
	--role-w: 88;
}

/* 387/800 = 48.375%、アスペクト 1:1（角丸なし） */
.c-invitationPage--wanoka .c-invitationSec--profile__photo {
	flex: 0 0 48.375%;
}
.c-invitationPage--wanoka .c-invitationSec--profile__photo img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* テキスト列。氏名 -> ラベル -> アイコン の順 */
.c-invitationPage--wanoka .c-invitationSec--profile__meta {
	flex: 1 1 auto;
	min-width: 0;
	text-align: center;
}
.c-invitationPage--wanoka .c-invitationSec--profile__name {
	margin: 0;
	color: var(--wanoka-ink);
	font-size: calc(var(--cw) * 38 / 800);
	line-height: 1.2;
	letter-spacing: 0.08em;
	white-space: nowrap;
}
.c-invitationPage--wanoka .c-invitationSec--profile__role {
	width: calc(var(--cw) * var(--role-w) / 800);
	margin: calc(var(--cw) * 30 / 800) auto 0;
}
.c-invitationPage--wanoka .c-invitationSec--profile__deco {
	width: calc(var(--cw) * 57 / 800);
	margin: calc(var(--cw) * 20 / 800) auto 0;
}
.c-invitationPage--wanoka .c-invitationSec--profile__role img,
.c-invitationPage--wanoka .c-invitationSec--profile__deco img {
	display: block;
	width: 100%;
	height: auto;
}

/* コメントは写真の下に全幅・中央揃え */
/* コメントの字サイズは本文（25px）に合わせて 28px から下げる */
.c-invitationPage--wanoka .c-invitationSec--profile__comment {
	margin: calc(var(--cw) * 59 / 800) 5% calc(var(--cw) * 79 / 800);
	text-align: center;
	font-size: calc(var(--cw) * 25 / 800);
	line-height: 1.85;
}
.c-invitationPage--wanoka .c-invitationSec--profile__comment:last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------------------
   返信案内 / 返信ボタン
   --------------------------------------------------------- */
.c-invitationPage--wanoka .c-invitationSec--line {
	width: 100%;
	margin: 0;
}
.c-invitationPage--wanoka .c-invitationSec--line img {
	display: block;
	width: 100%;
	height: 2px;
}
/* 備考の上の罫。2026-08-18 「線が二本出ているため一本削除」の修正。
   このシリーズは Blade 側に <div class="c-invitationSec--line"> の画像罫（line.png / 2px）を
   持っているのに、design_common.css:130 の
     .c-invitationSec--caption { border-top: 1px solid #aaa }
   も効いていて、画像罫のすぐ下にもう1本 #aaa の線が出ていた。
   ★ 残すのは Figma にある画像罫のほう。共通CSSの border-top を消す。
     border-top を足す方向で直さないこと（画像罫と二重になるのが今回の不具合）。
   padding-top / margin-top は共通CSSのまま（線を消しても間隔は変えない）。 */
.c-invitationPage--wanoka .c-invitationSec--caption {
	border-top: 0;
}
.c-invitationPage--wanoka .c-invitationSec--toReply {
	margin: 4rem 2rem;
	line-height: 2.1;
}
.c-invitationPage--wanoka .c-invitationSec--replyBtn {
	padding-bottom: 8rem;
}
.c-invitationPage--wanoka .c-invitationSec--replyBtn__btnWrap .c-buttonL {
	color: var(--wanoka-gold);
	border: 1px solid var(--wanoka-gold);
	/* font-size は共通既定（component.css:1094 の 2rem）に従う。
	   2026-08-20: 1.6em（= 20.8px）を撤去。em は親の font-size 依存で
	   他シリーズと揃わない。寸法上書きを足さないこと。 */
	transition: color 0.3s var(--wanoka-ease-out), background-color 0.3s var(--wanoka-ease-out);
}
.c-invitationPage--wanoka .c-invitationSec--replyBtn__btnWrap .c-buttonL:hover,
.c-invitationPage--wanoka .c-invitationSec--replyBtn__btnWrap .c-buttonL:focus-visible {
	color: #fff;
	background-color: var(--wanoka-gold);
}

/* ---------------------------------------------------------
   返信ページ（parts/title_common.blade.php が reply_title.png を使う）
   --------------------------------------------------------- */
.c-invitationPage--wanoka.c-invitationPage--reply {
	background: #fff;
}
.c-invitationPage--wanoka .c-invitationSec--repTitle__ttl {
	width: 100%;
	overflow: hidden;
	position: relative;
}
.c-invitationPage--wanoka .c-invitationSec--repTitle__ttl img {
	display: block;
	width: 100%;
	height: auto;
}
.c-invitationPage--wanoka .c-invitationSec--repTitle__ttl__upImg {
	width: 100%;
	height: 100%;
	object-fit: cover;
}


/* =========================================================
   本文の組版（招待文面 / 日程文面）— カラム落ち対策
   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--wanoka {
	--text-fit: 1;
}
.c-invitationPage--wanoka .c-invitationSec--invTxt__middle,
.c-invitationPage--wanoka .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--wanoka .c-invitationSec--invTxt__middle {
	text-wrap: pretty;
}