/*
  お祝い版で足した部品だけのスタイル（/lp2/celebrate.css）。
  現行LPの変数（--paper --ink --line --coral など）・線の太さ・角の丸み・影をそのまま使い、新しい色や装飾は足さない。
  足した部品：約束のバッジ、テンプレート8種の一覧、トーク画面の作例、セール表示、カレンダー区画の切り替え
*/

/* ---- 約束のバッジ（ファーストビューと料金） ---- */
.lp .promise{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0 0;padding:0;list-style:none}
.lp .promise li{border:1px solid var(--line-2);border-radius:8px;padding:5px 10px;font-size:12.5px;font-weight:500;line-height:1.4;color:var(--ink);white-space:nowrap}
.lp .promise li:first-child{border-color:var(--ink)}
.jp-lp .promise li{letter-spacing:.04em}
.lp .price + .promise{margin-top:12px}
@media (min-width:900px){.lp .hero .promise{margin-top:20px}.lp .promise li{font-size:13px}}

/* ---- テンプレート8種の一覧（作品ギャラリーと同じ見た目で、4列） ---- */
.lp .gallery.tpl-list figure{flex:0 0 44%}
@media (min-width:900px){.lp .gallery.tpl-list{grid-template-columns:repeat(4,1fr)}}
.lp .tpl-list figcaption b{font-family:var(--sans);letter-spacing:.06em;font-size:12.5px}

/* ---- 1.1 の新機能の事実カード（5つ）と、カレンダーの区画 ---- */
@media (min-width:900px){.lp .facts.facts-5{grid-template-columns:repeat(5,1fr)}}
html:not([data-calendar="on"]) .lp .cal-only{display:none}
.lp .cal-only{margin-top:14px}

/* ---- トーク画面の作例（動画の枠と同じ外形） ---- */
.lp .chat{display:flex;flex-direction:column;background:var(--cream)}
.lp .chat-bar{display:flex;align-items:center;gap:10px;height:52px;padding:0 14px;border-bottom:1px solid var(--line);font-size:14px;font-weight:600;flex:none}
.lp .chat-bar svg{width:16px;height:16px;flex:none}
.lp .chat-av{width:28px;height:28px;border-radius:50%;background:var(--paper-2);display:grid;place-items:center;font-size:12px;font-weight:600}
.lp .chat-body{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;padding:14px 12px;overflow:hidden}
.lp .msg{display:flex;align-items:flex-end;gap:6px;max-width:100%}
.lp .msg.me{flex-direction:row-reverse;align-self:flex-end}
.lp .msg .b{padding:8px 12px;font-size:13px;line-height:1.45;border-radius:16px;max-width:78%}
.lp .msg.me .b{background:var(--ink);color:var(--paper);border-bottom-right-radius:4px}
.lp .msg.you .b{background:#fff;border:1px solid var(--line);border-bottom-left-radius:4px}
.lp .msg.me .pic{width:62%;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.lp .msg .pic img{width:100%;aspect-ratio:4/5;object-fit:cover}
.lp .msg time{font-size:10px;color:var(--ink-3);white-space:nowrap}
.lp .chat-input{margin:0 12px 14px;height:36px;border:1px solid var(--line-2);border-radius:999px;display:flex;align-items:center;padding:0 14px;font-size:12px;color:var(--ink-3);flex:none}
.jp-lp .chat .b{letter-spacing:.03em}

/* ---- セール表示（<html data-sale-on> のときだけ。lp-static.js が日付で付ける） ---- */
html:not([data-sale-on]) .lp .sale-only{display:none}
html[data-sale-on] .lp .reg-only{display:none}
.lp .sale-flag{letter-spacing:.14em;text-transform:uppercase;color:var(--coral);margin-top:22px;font-size:11px;font-weight:500}
.lp .sale-flag + .price{margin-top:10px}
.jp-lp .sale-flag{letter-spacing:.08em;text-transform:none;font-size:11.5px}
.lp .price .was{text-decoration:line-through}

/* トーク画面：吹き出しの中は句読点だけ改行されないよう通常の折り返しに。日付の見出しで上の余白を自然に */
.lp .chat .b{word-break:normal;line-break:strict;max-width:84%}
.lp .chat-day{align-self:center;margin-bottom:auto;padding-top:4px;font-size:11px;color:var(--ink-3)}
.lp .msg.me .pic{width:70%}
/* 料金の下のバッジは強調しない（強調はファーストビューの「3作品まで無料」だけ） */
.lp .price + .promise li:first-child{border-color:var(--line-2)}