@charset "UTF-8";
/* =========================================================
   アトリエシリーズ 共通スタイル（wi1263 がシリーズの基準ファイル） SPファースト
   ---------------------------------------------------------
   ★ シリーズを展開するときは、展開側 design.css の先頭で
       @import url("/web_invitation/design_resource/wi1263/design.css");
     と読み込み、差分（MV画像・色変数）だけを上書きする。
     ・@import 内の url() は「宣言があるスタイルシート基準」で解決されるので、
       展開側ディレクトリの画像を使わせたいなら展開側で background-image を再宣言する
     ・展開側にも中身が @import 1行だけの design_pc.css を必ず置くこと
       （_header_blank.blade.php:25 が design_pc.css の存在で読込を判定しているため、
         無いと design.css ごと読まれず全部素の状態になる）
     ・Blade は品番ごとに実ファイルを作ること（共用名は解決できない）

   Figma: Yk1iZsoNkKF76RCUXORv4P
     名入れ表紙（座標基準）Frame 1 = 1:2   800x1300
     動きメモ              6:61
     元デザイン（全体像）  78:4            769x7063 = 800x7348 相当

   スケール方針
     デザインは 800px 幅キャンバス。--cw: min(100vw, 800px) を基準に
     calc(var(--cw) * N / 800) で比例させる（リポジトリ既存の wi1288 と同方式）。
     表紙内の飾りだけは % 配置（親が 800x1300 の aspect-ratio 箱）。

   表紙の重ね順（動きメモ 6:61 / Figma の子ノード順と一致）
     z1 __photo    お客様写真          … img_cover の抜き窓（実測 x72..727 / y65..887）
     z2 __imgCover img_cover.png       … 絵画を紺に沈めた表紙＋楕円の抜き窓（常時表示）
     z3 __stage    開幕演出。最後にまとめてフェードアウトし z1+z2 を見せる
          __art     bg_art.jpg         … 明るい絵画（初期状態）
          __cover   bg_cover.png       … 紺のベール #375A72 / α約0.8。下からフェードイン
          __label   label_art.png      … 楕円の絵画＋二重リング。その場でフェードイン
          __arc--1  text_1.png         … 上弧。→方向に回りながらフェードイン
          __arc--2  text_2.png         … 下弧。同上
          __journey / __to / __forever … この順にフェードイン
     z4 __name / __date / __msg        … 下からフェードイン。演出後も残る
   ※ 全体で 4.00秒（= __stage の delay 2.60s + duration 1.4s）。
     動きメモは「全部で3秒くらいで納めたい」だが、フェードが早過ぎるとの指摘を
     2度受けて duration だけを伸ばした（3.15秒 -> 3.55秒 -> 4.00秒）。
       2026-08-17  __journey / __to / __forever  .42s -> .68s
                   __name / __date / __msg       .48s -> .78s
                   __stage（＝お客様写真の露出） .55s -> .95s
       2026-08-18  __journey / __to / __forever  .68s -> 1.0s
                   __stage                       .95s -> 1.4s（詳細は L231 付近）
     出現の順序と間隔（delay）は動きメモどおりなので触っていない。

   ★ 0ms = 開幕ゲートの解放時刻。ページ読込時刻ではない。
     表紙の全アニメーションは animation-play-state: var(--cover-play, paused) で
     待機しており、design_cover_ready.js が表紙素材（と書体）のデコード完了を
     検知して <main> に .is-coverReady を付けた瞬間から delay を数え始める。
     2026-08-20 以前は「最初の描画」起点だったため、2.1-3.1MB ある表紙素材が
     届く前に軽い弧文字・Journey to Forever（各 1.5-8KB）だけが順に現れ、
     演出が終わってから絵が乗っていた。
     詳細は本ファイル末尾の「開幕ゲート」ブロックと design_cover_ready.js の冒頭。
   ========================================================= */

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

.c-invitationPage--atelier {
	--cw: min(100vw, 800px);
	--atelier-navy: #0b2d41;
	--atelier-paper: #f6f4f0;
	--atelier-ink: #33302c;
	--atelier-line: #653e3e;
	--atelier-gold: #a07a45;
	/* 開幕演出のイージング */
	--atelier-ease: cubic-bezier(0.16, 1, 0.3, 1);

	/* 開幕ゲートの opt-in。design_cover_ready.js がこの値を見て、表紙の画像
	   （絵画 bg_art / ベール bg_cover / 楕円 label_art / 弧文字 text_1,2 /
	     journey・to・forever / カバー img_cover / お客様写真）が揃うまで
	   --cover-play を paused に保つ。揃った時点で .is-coverReady が付いて running。
	   詳細は design_cover_ready.js の冒頭と、本ファイル内の「開幕ゲート」ブロック。 */
	--cover-gate: 1;
	--cover-play: paused;

	/* 表紙のテキストが使う書体（NewYork / Cinzel / Lupine = 計 402KB）も待つ。
	   design_common.css の @font-face は font-display を宣言していない（= block）
	   ため、待たないと氏名・挙式日のフェードインが不可視のまま空振りし、
	   さらに design.js の js-resize がフォールバック字幅で縮小率を確定してしまう。
	   本文書体 font1/2/3（3.6-9.3MB）は design_cover_ready.js 側で除外される。 */
	--cover-gate-fonts: 1;

	/* FAILSAFE を 8000ms から 4500ms へ短縮する。
	   本シリーズは表紙素材が品番あたり 2.11-3.07MB あり（bg_art.jpg 0.75-1.23MB /
	   label_art.png 0.74-1.09MB / img_cover.png 0.16-0.74MB の3枚で 97-99%）、
	   低速回線では 8秒の保険を踏み抜いて「崩れは直らないうえ8秒待つ」になる。
	   ★ 素材の軽量化（表紙9枚を 0.6-0.9MB へ）が済んだら、この1行を削除するだけで
	     既定の 8000ms に戻る。上限は design_cover_ready.js の FAILSAFE_MS。 */
	--cover-gate-timeout: 4500;

	color: var(--atelier-ink);
	background-color: var(--atelier-paper);
	/* 和紙。支給の AdobeStock_534930008.jpeg (6013x4508 / 4.27MB) をそのまま
	   使うと公開ディレクトリから4MBを配信することになるうえ、素材のゆるい
	   明暗ムラ（#D9D8D3〜#F1F1E9）のせいでタイルの継ぎ目に段が出る。
	   低周波成分を差し引いて地色を #F6F4F0 に揃え、周囲64pxをラップ合成して
	   上下左右つながるようにした 800x600 / 44KB のタイルに作り替えてある。
	   background-size を --cw にすると、元デザイン（800pxキャンバス）と
	   同じ倍率の紙目になる。 */
	background-image: url("bg_paper.jpg");
	background-repeat: repeat;
	background-size: var(--cw) auto;
	background-position: top center;
}
.c-invitationPage--atelier.is-coverReady {
	--cover-play: running;
}

/* フォールバックを必ず添える。単独指定だと 404 時に無言で既定書体になる */
.c-invitationPage--atelier .c-invitationSec--title__name,
.c-invitationPage--atelier .c-countdown__days,
.c-invitationPage--atelier .c-countdown__textBD,
.c-invitationPage--atelier .c-countdown__hours,
.c-invitationPage--atelier .c-countdown__minutes,
.c-invitationPage--atelier .c-countdown__seconds {
	font-family: "NewYork", "Cambria", serif;
}
.c-invitationPage--atelier .c-invitationSec--title__msg,
.c-invitationPage--atelier .c-countdown__textCD,
.c-invitationPage--atelier .c-countdown__textL,
.c-invitationPage--atelier .c-countdown__textS {
	font-family: "Cinzel", "Cambria", serif;
}
.c-invitationPage--atelier .c-invitationSec--title__date {
	/* Lupine は design_common.css:549 で登録済み（オールドスタイル数字）。
	   Figma 1:17-1:21 の指定どおり。元デザインでも "32" の 3 が下に抜けている */
	font-family: "Lupine", serif;
}

/* =========================================================
   名入れ表紙
   ========================================================= */
.c-invitationPage--atelier .c-invitationSec--title {
	padding-top: 0;
	margin-bottom: 0;
}
.c-invitationPage--atelier .c-invitationSec--title__img01Wrap {
	margin: 0 auto;
	max-width: 800px;
}
.c-invitationPage--atelier .c-invitationSec--title__inner {
	position: relative;
	width: 100%;
	aspect-ratio: 800 / 1300;
	overflow: hidden;
	background-color: var(--atelier-navy);
}

/* --- z1 お客様写真 ---
   img_cover.png のアルファを画素走査した抜き窓 bbox
   x=72..727 (w656) / y=65..887 (h823) に 0.4% ずつ食い込ませて配置する。
   角は上に乗る img_cover が隠すので矩形で問題ない。 */
.c-invitationPage--atelier .c-invitationSec--title__photo {
	position: absolute;
	left: 8.6%;
	top: 4.6%;
	width: 82.8%;
	height: 64.1%;
	z-index: 1;
	overflow: hidden;
}
.c-invitationPage--atelier .c-invitationSec--title__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* --- z2 表紙カバー（抜き窓つき・常時表示） ---
   ★ img_cover.png は「地が完全不透明（alpha=255）」でなければならない。
     z1 の写真スロットは矩形なので、楕円からはみ出した角はこのカバーだけが隠している。
     地が半透明だとその角がそのまま透け、お客様写真の矩形が絵柄越しに見える。
     2026-08-18: 支給素材の地が Figma のグループ不透明度を焼き付けた状態で届いており
     wi1253 / wi1254 / wi1258 が 80.0%、wi1263 が 96.1% だった
     （同系の wi1259-1262 / wi1264 は 2026-08-12 に同じ補正を実施済み）。
     alpha' = round(alpha * 255 / alphaMax) の線形リマップで地を 255 へ引き上げて修正。
     抜き窓の alpha=0 と縁のアンチエイリアスは保存され、RGB は 1bit も変わらない。
     新しい絵柄を追加したら、登録前に必ず地のアルファを実測すること（0 以外なら要補正）:
       php -r '$i=imagecreatefrompng("img_cover.png"); $m=127;
         for($y=0;$y<imagesy($i);$y++) for($x=0;$x<imagesx($i);$x++)
           $m=min($m,(imagecolorat($i,$x,$y)>>24)&0x7F); echo $m;'  // GD は 0=不透明
     bg_cover.png（z3 のベール）は逆に半透明が正しい。混同しないこと。 */
.c-invitationPage--atelier .c-invitationSec--title__imgCover {
	position: absolute;
	inset: 0;
	z-index: 2;
	background: url("img_cover.png") no-repeat center / cover;
}

/* --- z3 開幕演出のステージ --- */
.c-invitationPage--atelier .c-invitationSec--title__stage {
	position: absolute;
	inset: 0;
	z-index: 3;
	animation: atelierStageOut 1.4s var(--atelier-ease) 2.60s both;
}
.c-invitationPage--atelier .c-invitationSec--title__art,
.c-invitationPage--atelier .c-invitationSec--title__cover {
	position: absolute;
	inset: 0;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}
.c-invitationPage--atelier .c-invitationSec--title__art {
	background-image: url("bg_art.jpg");
}
.c-invitationPage--atelier .c-invitationSec--title__cover {
	background-image: url("bg_cover.png");
	animation: atelierVeilUp .55s var(--atelier-ease) .15s both;
}

/* 飾りは Figma Frame 1 (800x1300) の座標を % 化したもの */
.c-invitationPage--atelier .c-invitationSec--title__label,
.c-invitationPage--atelier .c-invitationSec--title__arc,
.c-invitationPage--atelier .c-invitationSec--title__journey,
.c-invitationPage--atelier .c-invitationSec--title__to,
.c-invitationPage--atelier .c-invitationSec--title__forever {
	position: absolute;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;
}
/* label_art 666x833 @67,62 */
.c-invitationPage--atelier .c-invitationSec--title__label {
	left: 8.375%;
	top: 4.769%;
	width: 83.25%;
	height: 64.077%;
	background-image: url("label_art.png");
	animation: atelierFadeInPlace .40s ease-out .70s both;
}
/* text_1 462x494 @170,135 ／ text_2 504x493 @148,331 …→方向に回りながら現れる */
.c-invitationPage--atelier .c-invitationSec--title__arc--1 {
	left: 21.25%;
	top: 10.385%;
	width: 57.75%;
	height: 38%;
	background-image: url("text_1.png");
	animation: atelierSpinIn .80s var(--atelier-ease) 1.05s both;
}
.c-invitationPage--atelier .c-invitationSec--title__arc--2 {
	left: 18.5%;
	top: 25.462%;
	width: 63%;
	height: 37.923%;
	background-image: url("text_2.png");
	animation: atelierSpinIn .80s var(--atelier-ease) 1.05s both;
}
/* journey 421x105 @193,344 → to 107x81 @366,449 → forever 424x88 @190,516
   2026-08-17: 「文字のフェードインが早過ぎる」との指摘により .42s -> .68s。
   2026-08-18: 「まだ早い」との再指摘により .68s -> 1.0s。あわせて写真へ切り替わる
   atelierStageOut も .95s -> 1.4s。forever の出現完了(1.46+1.0=2.46s)より後に
   stage の退場開始(2.60s)が来る関係は保っているので、順序は崩れない。
   出現の間隔（delay 1.10 / 1.28 / 1.46s）は動きメモの順序なので変えていない。 */
.c-invitationPage--atelier .c-invitationSec--title__journey {
	left: 24.125%;
	top: 26.462%;
	width: 52.625%;
	height: 8.077%;
	background-image: url("journey.png");
	animation: atelierFadeInPlace 1.0s ease-out 1.10s both;
}
.c-invitationPage--atelier .c-invitationSec--title__to {
	left: 45.75%;
	top: 34.538%;
	width: 13.375%;
	height: 6.231%;
	background-image: url("to.png");
	animation: atelierFadeInPlace 1.0s ease-out 1.28s both;
}
.c-invitationPage--atelier .c-invitationSec--title__forever {
	left: 23.75%;
	top: 39.692%;
	width: 53%;
	height: 6.769%;
	background-image: url("forever.png");
	animation: atelierFadeInPlace 1.0s ease-out 1.46s both;
}

/* --- z4 名入れ（演出後も残る） --- */
.c-invitationPage--atelier .c-invitationSec--title__name,
.c-invitationPage--atelier .c-invitationSec--title__date,
.c-invitationPage--atelier .c-invitationSec--title__msg {
	position: absolute;
	left: 0;
	right: 0;
	z-index: 4;
	margin: 0;
	padding: 0;
	color: #fff;
	text-align: center;
}
/* Figma 1:15  y924 / NewYork 66px / 574px 幅 */
.c-invitationPage--atelier .c-invitationSec--title__name {
	top: 71.077%;
	padding-inline: 4%;
	font-size: calc(var(--cw) * 66 / 800);
	line-height: 1.21;
	letter-spacing: .01em;
	animation: atelierRiseIn .78s var(--atelier-ease) 1.85s both;
}
.c-invitationPage--atelier .c-invitationSec--title__name .js-resize {
	display: inline-block;
	white-space: nowrap;
}
/* Figma 1:26  y1046 / Lupine 63px / 各中心 x298・398.5・501 / 区切り線 x347・450 */
.c-invitationPage--atelier .c-invitationSec--title__date {
	top: 80.462%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: calc(var(--cw) * 63 / 800);
	animation: atelierRiseIn .78s var(--atelier-ease) 1.98s both;
}
.c-invitationPage--atelier .c-invitationSec--title__date > li {
	display: grid;
	place-items: center;
	width: calc(var(--cw) * 101.5 / 800);
	height: calc(var(--cw) * 53 / 800);
	line-height: 1;
}
/* ★ 挙式日を罫線（li + li の border-left）の縦中央に合わせる。
   Lupine のオールドスタイル数字は字面が baseline より上に寄っているので、
   place-items:center に任せるとインクが下にずれる。63px 時の実測:
     fontAscent 55 / fontDescent 8（合計ちょうど 1em）
     数字 0-9 のインクは baseline-44 〜 baseline+16
     → インク中心は baseline の 14px 上
   さらに行ボックス(1em=63px)が箱(53px)より高いため中央揃えが素直に効かず
   （baseline が箱上端 +55px に来る）、実測のずれは 9.5px ではなく 14.5px あった。

   ★ 持ち上げるのは「数字だけ」でなければならない。
     罫線は li の border-left なので li を動かすと罫線も一緒に動き、ずれが直らない。
     そのため Blade 側で数字を span.c-invitationSec--title__dateNum で包み（12品番すべて）、
     その span だけを 14.5px 持ち上げている。span を外すと再発する。
     li 側で寄せる案は実測で効かなかった:
       line-height 34px + padding-bottom 19px -> delta 14.5px（変化なし）
       line-height 34px 単独                  -> delta 24px（悪化）
     transform ではなく top を使うのは、親 __date の atelierRiseIn が
     transform を使っており衝突させないため。
   結果 baseline 1101 -> 1086.5、インク中心 = 罫線中心 1072.5（実測 delta 0px）。
   2026-08-17: 「挙式日が罫線に対して下に寄っている」の修正。 */
.c-invitationPage--atelier .c-invitationSec--title__dateNum {
	position: relative;
	top: calc(var(--cw) * -14.5 / 800);
}
.c-invitationPage--atelier .c-invitationSec--title__date > li + li {
	border-left: 1px solid rgba(255, 255, 255, .75);
}
/* Figma 1:16  y1141 / Cinzel 19.5px / line-height 35px */
.c-invitationPage--atelier .c-invitationSec--title__msg {
	top: 87.769%;
	font-size: calc(var(--cw) * 19.5 / 800);
	line-height: 1.795;
	letter-spacing: .06em;
	animation: atelierRiseIn .78s var(--atelier-ease) 2.11s both;
}

/* --- 開幕演出のキーフレーム --- */
@keyframes atelierVeilUp {
	from { opacity: 0; transform: translateY(18%); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes atelierFadeInPlace {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes atelierSpinIn {
	from { opacity: 0; transform: rotate(-16deg); }
	to   { opacity: 1; transform: rotate(0deg); }
}
@keyframes atelierRiseIn {
	from { opacity: 0; transform: translateY(calc(var(--cw) * 18 / 800)); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes atelierStageOut {
	from { opacity: 1; }
	to   { opacity: 0; }
}

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

   これまでは上の delay（cover .15s / label .70s / arc 1.05s / journey 1.10s /
   to 1.28s / forever 1.46s / name 1.85s / date 1.98s / msg 2.11s / stage 2.60s）が
   「最初の描画」から動き出していた。一方で表紙の絵はネットワーク次第で
   後から届く。本シリーズは表紙素材が品番あたり 2.11-3.07MB あり
   （bg_art.jpg 0.75-1.23MB / label_art.png 0.74-1.09MB / img_cover.png 0.16-0.74MB。
     残り6枚は合計 32KB）、軽い弧文字・Journey to Forever だけが先に届く。
   結果、絵の無い紺地の上に文字だけが順に現れ、演出が終わった後で絵画とカバーが
   突然乗る ＝「開始時にアニメーションが始まるが画像が追い付かず崩れて見える」。

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

   ★ セレクタ10本で animation 宣言11箇所を網羅している。
     __arc--1 / __arc--2 は Blade（_naire_wi1263.blade.php:48-49）が基底クラス
     __arc も併記しているので1本にまとまる。宣言を足したら必ずここも足すこと。
   ★ __art（bg_art.jpg）は animation を持たないので、ここには載せない。
     届いた瞬間に表示され、__stage は from { opacity: 1 } なので隠さない。
     待機中に見えるのは「紺地 → 静止した frame 0 の絵」で、真っ白にはならない。
   2026-08-20: 「開始時に画像が追い付かず崩れて見える」の修正（全新デザインへの展開）。
   --------------------------------------------------------- */
.c-invitationPage--atelier .c-invitationSec--title__stage,
.c-invitationPage--atelier .c-invitationSec--title__cover,
.c-invitationPage--atelier .c-invitationSec--title__label,
.c-invitationPage--atelier .c-invitationSec--title__arc,
.c-invitationPage--atelier .c-invitationSec--title__journey,
.c-invitationPage--atelier .c-invitationSec--title__to,
.c-invitationPage--atelier .c-invitationSec--title__forever,
.c-invitationPage--atelier .c-invitationSec--title__name,
.c-invitationPage--atelier .c-invitationSec--title__date,
.c-invitationPage--atelier .c-invitationSec--title__msg {
	animation-play-state: var(--cover-play, paused);
}

@media (prefers-reduced-motion: reduce) {
	.c-invitationPage--atelier .c-invitationSec--title__stage {
		animation: none;
		opacity: 0;
	}
	.c-invitationPage--atelier .c-invitationSec--title__cover,
	.c-invitationPage--atelier .c-invitationSec--title__label,
	.c-invitationPage--atelier .c-invitationSec--title__arc,
	.c-invitationPage--atelier .c-invitationSec--title__journey,
	.c-invitationPage--atelier .c-invitationSec--title__to,
	.c-invitationPage--atelier .c-invitationSec--title__forever,
	.c-invitationPage--atelier .c-invitationSec--title__name,
	.c-invitationPage--atelier .c-invitationSec--title__date,
	.c-invitationPage--atelier .c-invitationSec--title__msg {
		animation: none;
		opacity: 1;
		transform: none;
	}
}

/* =========================================================
   紙の枠（INVITATION / INFORMATION+PROFILE）
   元デザイン実測: 枠の縦線 x28・x771、INVITATION 枠 y1330..2589、
   INFORMATION+PROFILE 枠 y3249..5471
   → 枠線は画面幅いっぱいではなく、外側に左右 28px / 上下 30px の余白がある。

   ★ .c-atelierFrame は必ず <section class="c-invitationSec--…"> の
     「外側の div」に付けること。同じ要素に相乗りさせてはいけない。
     下の .c-invitationSec--invTxt / --scheTxt リセットは詳細度が同じ
     (0,2,0) でソース順が後なので margin:0 / padding:0 が後勝ちし、
     ここの padding（＝枠の外側余白）が消えて枠が画面幅まで広がる。
     2026-08-17: INVITATION 側が section 直付けになっていたのを
     INFORMATION と同じ div 入れ子に修正（12品番すべて）。
   ========================================================= */
.c-invitationPage--atelier .c-atelierFrame {
	max-width: 800px;
	margin: 0 auto;
	padding: calc(var(--cw) * 30 / 800) calc(var(--cw) * 28 / 800);
}
.c-invitationPage--atelier .c-atelierFrame__inner {
	border: 1px solid var(--atelier-line);
	/* 元デザインの枠線は上辺が金、側面が焦茶に見えるので金→茶のグラデーション */
	border-image: linear-gradient(135deg, var(--atelier-gold), var(--atelier-line) 55%, var(--atelier-gold)) 1;
	padding: calc(var(--cw) * 91 / 800) calc(var(--cw) * 55 / 800) calc(var(--cw) * 102 / 800);
}

/* =========================================================
   招待文面 / INVITATION ・ 日程文面 / INFORMATION
   ========================================================= */
.c-invitationPage--atelier .c-invitationSec--invTxt,
.c-invitationPage--atelier .c-invitationSec--scheTxt {
	max-width: none;
	margin: 0;
	padding: 0;
	background-color: transparent;
	color: inherit;
	font-size: inherit;
	line-height: inherit;
}
/* title_invitation.png 416x58 / title_information.png 514x58
   いずれもキャンバス 800 に対する比率で置く */
.c-invitationPage--atelier .c-invitationSec--invTxt__ttl,
.c-invitationPage--atelier .c-invitationSec--scheTxt__ttl {
	margin: 0 auto calc(var(--cw) * 95 / 800);
	color: inherit;
	font-size: inherit;
}
.c-invitationPage--atelier .c-invitationSec--invTxt__ttl {
	width: 52%;
	max-width: 416px;
}
.c-invitationPage--atelier .c-invitationSec--scheTxt__ttl {
	width: 64.25%;
	max-width: 514px;
}
.c-invitationPage--atelier .c-invitationSec--invTxt__ttl img,
.c-invitationPage--atelier .c-invitationSec--scheTxt__ttl img,
.c-invitationPage--atelier .c-invitationSec--profile__ttl img,
.c-invitationPage--atelier .c-invitationSec--profile__role img {
	display: block;
	width: 100%;
	height: auto;
}

/* 本文の版面。枠の内側は 800 - 28*2(frame) - 1*2(border) - 55*2(inner) = 632px。

   ★ 1行の文字数は「font-size + letter-spacing」で割ること。
     body に letter-spacing: 0.5px（public/css/commons/style.css:529-533）が
     入っていて本文へ継承されるため、26px 指定でも字送りは 26.5px だった。
     旧コメントは 24字 = 624px と見積っていたが実際は 636px で版面 632px を
     4px 超過し、最後の1文字が次行へ落ちていた（カラム落ち）。
   2026-08-18: letter-spacing を 0 に固定したうえで 26px -> 22px。
     22px × 28字 = 616px < 632px。定型文の最長行はブライダル系で 24〜32字
     （wi_dtb_invitation_text 実測）なので 28字ぶんの版面を確保する。
     32字級の文面と一般用途の長文は design_text_fit.js が自動縮小で受ける。 */
.c-invitationPage--atelier .c-invitationSec--invTxt__middle,
.c-invitationPage--atelier .c-invitationSec--scheTxt__middle {
	margin: 0;
	font-size: calc(var(--cw) * 22 / 800);
	line-height: 2.55;
	text-align: center;
	display: block;
	word-break: normal;
	overflow-wrap: anywhere;
}
/* 日程文面はラベルと値が空白で揃えられているので左寄せの塊を中央に置く */
.c-invitationPage--atelier .c-invitationSec--scheTxt__middle {
	display: inline-block;
	text-align: left;
}

/* =========================================================
   COUNT DOWN  … countdown.jpg 800x600 全面。元デザイン y2617..3218
   .c-countdownSection は design_common.css で position:absolute / inset:0 なので
   位置基準をここで作る
   ========================================================= */
.c-invitationPage--atelier .c-invitationSec--countdown {
	position: relative;
	max-width: 800px;
	margin: 0 auto;
	aspect-ratio: 800 / 600;
	background: url("countdown.jpg") no-repeat center / cover;
}
.c-invitationPage--atelier .c-countdownSection {
	/* design_common.css の rgba(0,0,0,.35) は元デザインに無い。
	   絵画が明るいので白文字が沈まない程度のごく薄いスクリムだけ残す */
	background-color: rgba(11, 45, 65, .14);
}
.c-invitationPage--atelier .c-countdown {
	/* design_common.css の margin-inline:auto だけだとグリッドアイテムが
	   max-content 幅に縮み、HOURS/MINUTES/SECONDS の間隔が元デザインより
	   詰まる。帯いっぱいに広げてから row2 の幅で間隔を決める */
	width: 100%;
	color: #fff;
	font-family: "Cinzel", "Cambria", serif;
	text-shadow: 0 0 calc(var(--cw) * 14 / 800) rgba(11, 45, 65, .45);
}
.c-invitationPage--atelier .c-countdown__textCD {
	font-size: calc(var(--cw) * 52 / 800);
	line-height: 1;
	letter-spacing: .14em;
	text-indent: .14em;
}
.c-invitationPage--atelier .c-countdown__row1 {
	margin-top: calc(var(--cw) * 30 / 800);
}
.c-invitationPage--atelier .c-countdown__days,
.c-invitationPage--atelier .c-countdown__textBD {
	font-size: calc(var(--cw) * 140 / 800);
	line-height: 1;
	white-space: nowrap;
}
.c-invitationPage--atelier .c-countdown__textL {
	margin-top: calc(var(--cw) * 10 / 800);
	font-size: calc(var(--cw) * 40 / 800);
	line-height: 1;
	letter-spacing: .16em;
	text-indent: .16em;
	/* countdown.js が出力するのは "Days"。元デザインは大文字 */
	text-transform: uppercase;
}
/* 元デザインの数字の中心は x203 / 390 / 583（間隔190px）。
   3等分するので group 幅 = 190*3 = 570 ≒ 74% */
.c-invitationPage--atelier .c-countdown__row2 {
	width: 74%;
	margin-top: calc(var(--cw) * 34 / 800);
	column-gap: calc(var(--cw) * 8 / 800);
	/* u-justifySelf* は public/css に定義が無く効かないので等幅3列を明示する */
	grid-template-columns: repeat(3, 1fr);
}
.c-invitationPage--atelier .c-countdown__hours,
.c-invitationPage--atelier .c-countdown__minutes,
.c-invitationPage--atelier .c-countdown__seconds {
	font-size: calc(var(--cw) * 78 / 800);
	line-height: 1.1;
}
/* MINUTES / SECONDS は 1列(=約256px)に収まらず折り返して "MINUTE / S" に
   割れるので、字送りを詰めて nowrap で1行に固定する */
.c-invitationPage--atelier .c-countdown__textS {
	font-size: calc(var(--cw) * 27 / 800);
	line-height: 1;
	letter-spacing: .06em;
	text-indent: .06em;
	white-space: nowrap;
}

/* =========================================================
   PROFILE
   元デザイン実測: タイトル 282x59 @y4098 / 写真 363x363
   新郎 写真 x64 左・名前 右 / 新婦 名前 左・写真 x373 右
   ========================================================= */
/* 元デザインでは写真が枠の内側 35px まで寄っていて、本文の版面（枠の内側
   55px）より外に出ている。枠側の padding を負マージンで 20px 戻す */
.c-invitationPage--atelier .c-invitationSec--profile {
	padding: calc(var(--cw) * 159 / 800) 0 0;
	margin-inline: calc(var(--cw) * -20 / 800);
	line-height: inherit;
}
.c-invitationPage--atelier .c-invitationSec--profile__ttl {
	width: 35.25%;
	max-width: 282px;
	margin: 0 auto calc(var(--cw) * 84 / 800);
}
/* 写真 363px / ブロック幅 672px = 54% */
.c-invitationPage--atelier .c-invitationSec--profile__block {
	display: grid;
	grid-template-columns: 54% 46%;
	align-items: center;
}
/* 新婦は写真が右・名前が左 */
.c-invitationPage--atelier .c-invitationSec--profile__block--bride {
	grid-template-columns: 46% 54%;
	margin-top: calc(var(--cw) * 75 / 800);
}
.c-invitationPage--atelier .c-invitationSec--profile__block--bride .c-invitationSec--profile__photo {
	grid-column: 2;
	grid-row: 1;
}
.c-invitationPage--atelier .c-invitationSec--profile__block--bride .c-invitationSec--profile__meta {
	grid-column: 1;
	grid-row: 1;
}
.c-invitationPage--atelier .c-invitationSec--profile__photo {
	aspect-ratio: 1 / 1;
	overflow: hidden;
}
.c-invitationPage--atelier .c-invitationSec--profile__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.c-invitationPage--atelier .c-invitationSec--profile__name {
	font-size: calc(var(--cw) * 46 / 800);
	line-height: 1.3;
}
.c-invitationPage--atelier .c-invitationSec--profile__role {
	width: calc(var(--cw) * 92 / 800);
	margin: calc(var(--cw) * 18 / 800) auto 0;
	font-family: inherit;
}
.c-invitationPage--atelier .c-invitationSec--profile__block--bride .c-invitationSec--profile__role {
	width: calc(var(--cw) * 65 / 800);
}
/* 自己紹介文は写真より内側（枠の内側 55px）に戻す。
   元デザインの最長行「今後とも私たちを温かく見守っていただけますと幸いです」
   26文字が x89..709 = 620px なので 1文字あたり 23.8px。24px だと版面ぎりぎりで
   最後の1文字が落ちるため 23px にして余裕を作る */
.c-invitationPage--atelier .c-invitationSec--profile__comment {
	margin-top: calc(var(--cw) * 57 / 800);
	padding-inline: calc(var(--cw) * 20 / 800);
	font-size: calc(var(--cw) * 23 / 800);
	line-height: 1.95;
	text-align: center;
	overflow-wrap: anywhere;
}

/* =========================================================
   Googleマップ / 返信案内 / 備考 / 返信ボタン
   ========================================================= */
.c-invitationPage--atelier .c-invitationSec--mapSec {
	max-width: 800px;
	margin: calc(var(--cw) * 40 / 800) auto 0;
}
.c-invitationPage--atelier .c-invitationSec--map,
.c-invitationPage--atelier .c-invitationSec--scheTxt__googleMap {
	margin: 0;
}
.c-invitationPage--atelier .c-invitationSec--toReply {
	max-width: 800px;
	margin: calc(var(--cw) * 66 / 800) auto 0;
	padding-inline: 5%;
	font-size: calc(var(--cw) * 26 / 800);
	line-height: 2.55;
}
/* 元デザイン y6665 の区切り線。design_common.css の #aaa 実線を金→茶に差し替える */
.c-invitationPage--atelier .c-invitationSec--caption {
	/* 罫線は元デザインで x42..760（左右5%）に入っているので、
	   padding ではなく箱そのものを 90% にして border-top を内側に収める */
	width: 90%;
	max-width: 720px;
	margin: calc(var(--cw) * 74 / 800) auto 0;
	padding: calc(var(--cw) * 73 / 800) 0 0;
	border-top: 1px solid var(--atelier-line);
	border-image: linear-gradient(90deg, var(--atelier-line), var(--atelier-gold) 50%, var(--atelier-line)) 1;
	font-size: calc(var(--cw) * 26 / 800);
	line-height: 2.55;
}
.c-invitationPage--atelier .c-invitationSec--replyBtn {
	margin: calc(var(--cw) * 120 / 800) auto 0;
	padding-bottom: calc(var(--cw) * 193 / 800);
}
/* ---- 返信ボタン ----
   ★ 寸法（幅・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--atelier .c-invitationSec--replyBtn .c-buttonL {
	border: 1px solid var(--atelier-line);
	border-radius: 999px;
	/* component.css の c-buttonL は影付き。元デザインは影の無い白い丸ボタン */
	box-shadow: none;
	background-color: #fff;
	color: var(--atelier-line);
	letter-spacing: .08em;
	transition: background-color .3s ease, color .3s ease;
}
.c-invitationPage--atelier .c-invitationSec--replyBtn .c-buttonL:hover,
.c-invitationPage--atelier .c-invitationSec--replyBtn .c-buttonL:focus-visible {
	background-color: var(--atelier-line);
	color: #fff;
}


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