@charset "UTF-8";

/* =========================================================
   wi1268「04 ひなげし」= トワル（Toile）シリーズ（基準 wi1265）の絵柄展開
   ---------------------------------------------------------
   レイアウト・アニメーション・本文セクションはシリーズ共通なので
   基準ファイルを @import し、品番固有の差分だけをここに書く。
   Blade は共用不可なので invitation_wi1268.blade.php /
   naire/_naire_wi1268.blade.php を実ファイルで持っている。

   Figma 全体コンプ: 14:3「WEB招待状_トワル_ひなげし 1_wi1268」
   ========================================================= */

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

/* ---------------------------------------------------------
   品番固有の絵柄
   @import 内の url() は「宣言があるスタイルシート」= wi1265/ 基準で
   解決されるため、自品番の画像を使わせるには再宣言が要る。
   washi.jpg（和紙パネル）と title.png / subtext.png は全品番同一なので再宣言しない。
   --------------------------------------------------------- */
.c-invitationPage--wi1268 {
    /* ページ背景。支給の bg.jpg は幅 800 = キャンバス幅ちょうどなので等倍で敷く */
    /* 2026-08-19 「MV と下部セクションの背景がつながらない」の修正（2度目・確定版）。
       ★ 支給の bg.jpg は「下端が MV(base.jpg 800x1085) の下端に接する」ように作られている。
         base.jpg の最終行に一番近い行を bg.jpg 全行から総当たりで探すと、9品番中7品番で
         bg.jpg の最終行が最良一致だった。つまり上下反転して敷いて初めてつながる素材。
         依頼文の「向き」は文字どおり上下の向きのこと。位相をずらすだけでは解決しない。
       ★ CSS は background-image を反転できないので、bg_mirror.jpg
         = [bg.jpg を上下反転][bg.jpg そのまま] を縦連結した 800x3874 を生成して敷く。
           行0      = bg 最終行 → MV の下端に接する（依頼の「下向きで始まる」）
           行1936/1937 = bg 先頭行 → 同じ行が隣接するのでタイル内部の継ぎ目はゼロ
           行3873   = bg 最終行 → 次タイルの行0 と同じなのでリピート継ぎ目もゼロ
         結果 上(MV)・下・上・下… となり、依頼の「上・下・上」になる。
       ★ background ショートハンドは background-position を初期値へ戻すので、
         位置の longhand は必ずショートハンドより後に書くこと。
       ★ 1085 = MV の高さ。base.jpg は全品番 800x1085 なので、この値は全品番共通。
         bg.jpg を差し替えたら bg_mirror.jpg を必ず作り直すこと（生成手順は
         .claude/skills/web-invitation-fix/references/case-2026-08-18-three-series-bg-rule-anim.md）。 */
    /* ★ 2026-08-20: 基準品番 wi1265 の「つなぎ目」ブロックと同じ2層構成で書く。
       background ショートハンドは background-image を1層に戻すので、
       ショートハンドで書くと基準側のグラデーション層（--toile-seam）が消える。
       自品番の bg_mirror.jpg を指すためここで再宣言する必要があるぶん、
       2層とも longhand で書き直すこと。仕組みは wi1265/design.css を参照。 */
    background-image:
        linear-gradient(to bottom, var(--toile-seam, transparent), transparent),
        url("bg_mirror.jpg");
    background-repeat: no-repeat, repeat;
    background-size:
        100% calc(var(--cw) * 240 / 800),
        100% auto;
    background-position:
        center calc(var(--cw) * 1085 / 800),
        center calc(var(--cw) * 1085 / 800);

    /* cover.png 最下行(400, h-1) の実測色。読込前とアスペクト端の下地 */
    --toile-base-bg: #947d4d;
    /* 返信ボタン塗り（全体コンプ実測） */
    --toile-btn: #b44f1b;
    /* 返信案内と備考の間の罫。
       2026-08-18 「備考上に他シリーズ同様線を入れる」の修正。
       全体コンプの実測は差し色そのもの（藤で #0789dd を 56% 被覆、
       R/G/B すべて α=0.56 で一致）だった。旧実装は紙色へ寄せて薄くしており
       和紙の上でほぼ見えなかったので、品番の差し色をそのまま使う。 */
    --toile-rule: var(--toile-btn);
}

/* カーテン（Lottie 読込待機1秒）の下地。自品番の base.jpg に差し替える */
.c-invitationPage--wi1268 .c-toileCover__inner::after {
    background-image: url("base.jpg");
}