@charset "UTF-8";

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

   Figma 全体コンプ: 14:9「WEB招待状_トワル_アイリス 1_wi1269」
   ========================================================= */

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

/* ---------------------------------------------------------
   品番固有の絵柄
   @import 内の url() は「宣言があるスタイルシート」= wi1265/ 基準で
   解決されるため、自品番の画像を使わせるには再宣言が要る。
   washi.jpg（和紙パネル）と title.png / subtext.png は全品番同一なので再宣言しない。
   --------------------------------------------------------- */
.c-invitationPage--wi1269 {
    /* ページ背景。支給の 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 そのまま] を縦連結した 800x2180 を生成して敷く。
           行0      = bg 最終行 → MV の下端に接する（依頼の「下向きで始まる」）
           行1089/1090 = bg 先頭行 → 同じ行が隣接するのでタイル内部の継ぎ目はゼロ
           行2179   = 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: #5f6840;
    /* 返信ボタン塗り（全体コンプ実測） */
    --toile-btn: #c6a20e;
    /* 返信案内と備考の間の罫。
       2026-08-18 「備考上に他シリーズ同様線を入れる」の修正。
       全体コンプの実測は差し色そのもの（藤で #0789dd を 56% 被覆、
       R/G/B すべて α=0.56 で一致）だった。旧実装は紙色へ寄せて薄くしており
       和紙の上でほぼ見えなかったので、品番の差し色をそのまま使う。 */
    --toile-rule: var(--toile-btn);
}

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

/* ---------------------------------------------------------
   返信ボタンのラベル色
   地色 #c6a20e に白文字だとコントラスト比 2.45 で WCAG AA(4.5) に届かない。
   ボタン文字は font-size: calc(var(--u) * 42) なので 320px 幅では 16.8px となり
   大文字の緩和(3.0)も適用できない。シリーズの本文色 --toile-ink(#2e2e2e) に
   置き換えると 5.55 まで上がる。地色はコンプ実測のまま変えていない。
   --------------------------------------------------------- */
.c-invitationPage--wi1269 .c-invitationSec--replyBtn .c-buttonL {
    /* 2026-08-20 デザイナー指示により #fff へ変更。
       ★ 地色 #c6a20e に白文字はコントラスト比 2.45 で WCAG AA(4.5) を満たさない。
         上の経緯コメントのとおり以前は --toile-ink で 5.5-6.1 を確保していたが、
         見た目優先の判断で白に戻した。地色を変えるまでこの品番は AA 非準拠。 */
    color: #fff;
}