/* Local Dive デモ HP 注記 banner — 各業種のトンマナに合わせた「目立つ」赤系 * 既定: warm red pill。data-industry 属性で業種ごとに赤の系統を切替。 * 旅館 3 variant のみで左下 (chat-ryokan FAB が右下) に切替。 */ #ld-demo-banner{ position:fixed; right:18px; bottom:18px; z-index:9999; max-width:min(420px, calc(100vw - 36px)); /* 既定: warm red gradient (FAB と同系統) */ background: linear-gradient(135deg, #ec4d56 0%, #c8222d 60%, #8e1418 100%); color: #fff8eb; font-family:'Noto Sans JP','Hiragino Kaku Gothic ProN',sans-serif; font-size:13px; font-weight:600; line-height:1.55; letter-spacing:.02em; padding:13px 22px; border-radius:999px; border: 1px solid rgba(255,255,255,0.14); box-shadow: 0 14px 32px rgba(200,34,45,0.40), 0 4px 10px rgba(200,34,45,0.22), inset 0 1px 0 rgba(255,255,255,0.22); pointer-events:auto; user-select:none; animation: ld-banner-pulse 3.4s ease-in-out infinite; } @keyframes ld-banner-pulse{ 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } } /* 旅館 3 variant のみ左下に例外配置 */ body.ryokan-variant #ld-demo-banner{ right:auto; left:18px; } /* ============================================================ * 業種別トンマナ override (FAB と同じ赤系統で揃える) * ============================================================ */ /* 旅館: 漆器の朱 */ body[data-industry="ryokan"] #ld-demo-banner{ background: linear-gradient(135deg, #d6383b 0%, #b32023 55%, #8c1416 100%); box-shadow: 0 14px 32px rgba(180,32,35,0.42), 0 4px 10px rgba(180,32,35,0.24), inset 0 1px 0 rgba(255,255,255,0.22); } /* 酒造: 重厚な紅 + 金 inset */ body[data-industry="sake"] #ld-demo-banner{ background: linear-gradient(135deg, #c2362f 0%, #931f1c 55%, #5a0e0e 100%); border-color: rgba(217,174,92,0.30); box-shadow: 0 14px 32px rgba(146,30,28,0.45), 0 4px 10px rgba(146,30,28,0.26), inset 0 1px 0 rgba(217,174,92,0.30); } /* 茶舗: 茜赤+茶 (落ち着いた赤茶) */ body[data-industry="tea"] #ld-demo-banner{ background: linear-gradient(135deg, #b94d4a 0%, #8c2f30 55%, #5a1f20 100%); box-shadow: 0 14px 32px rgba(140,47,48,0.42), 0 4px 10px rgba(140,47,48,0.24), inset 0 1px 0 rgba(255,255,255,0.18); } /* 和菓子: 墨地に金（trust_a 配色 --c-ink #0a0a0a + --c-accent #c9a95a と整合） * 2026-05-24 森指示で「桜紅は和菓子トンマナと絶望的に合わない」ため、サイト全体の * 墨地+金アクセント+生成り紙 (#fdfbf5 / #f3eee2) に合わせて静謐な配色に変更。 */ body[data-industry="wagashi"] #ld-demo-banner{ background: linear-gradient(135deg, #2a2218 0%, #1a1611 60%, #0a0a0a 100%); color: #f3eee2; border: 1px solid rgba(201, 169, 90, 0.42); box-shadow: 0 14px 32px rgba(10,10,10,0.34), 0 4px 10px rgba(10,10,10,0.20), inset 0 1px 0 rgba(201,169,90,0.32); } /* 陶芸: 釉薬の赤茶 */ body[data-industry="tougei"] #ld-demo-banner{ background: linear-gradient(135deg, #d05933 0%, #a13a20 55%, #6e2613 100%); box-shadow: 0 14px 32px rgba(161,58,32,0.45), 0 4px 10px rgba(161,58,32,0.26), inset 0 1px 0 rgba(255,255,255,0.22); } /* 納豆: 大豆煮汁の暖赤 */ body[data-industry="nattou"] #ld-demo-banner{ background: linear-gradient(135deg, #c44a36 0%, #983222 55%, #6c1f10 100%); box-shadow: 0 14px 32px rgba(152,50,34,0.44), 0 4px 10px rgba(152,50,34,0.26), inset 0 1px 0 rgba(255,255,255,0.22); } /* 観光農園: 苺紅 */ body[data-industry="agritourism"] #ld-demo-banner{ background: linear-gradient(135deg, #ec3e4d 0%, #c8222d 60%, #8e1418 100%); box-shadow: 0 14px 32px rgba(200,34,45,0.45), 0 4px 10px rgba(200,34,45,0.26), inset 0 1px 0 rgba(255,255,255,0.30); } /* モバイル */ @media (max-width:760px){ #ld-demo-banner{ right:10px; bottom:10px; max-width:calc(100vw - 20px); font-size:11.5px; padding:10px 16px; line-height:1.45; border-radius:999px; } body.ryokan-variant #ld-demo-banner{ left:10px; right:auto; } } /* 印刷時は非表示 */ @media print{ #ld-demo-banner{display:none !important;} } /* ============================================================ * デモ画像差し替え箇所の placeholder スタイル * ============================================================ */ .ld-map-placeholder{ display:flex; align-items:center; justify-content:center; text-align:center; min-height: 240px; padding: 36px 28px; border-radius: 22px; background: linear-gradient(135deg, #ffd28a 0%, #ff9a6c 35%, #ff7a8e 70%, #c576ff 100%); color: #2a1f12; font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif; font-weight: 600; font-size: 15.5px; letter-spacing: 0.04em; line-height: 1.6; box-shadow: 0 12px 36px rgba(255, 122, 142, 0.22), 0 4px 12px rgba(255, 122, 142, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.4); position: relative; overflow: hidden; margin: 16px 0; } .ld-map-placeholder::before{ content: ""; position: absolute; inset: 0; background: radial-gradient( circle at 30% 20%, rgba(255, 255, 255, 0.4) 0%, transparent 50%); pointer-events: none; } .ld-image-placeholder{ display: flex; align-items: center; justify-content: center; text-align: center; aspect-ratio: 4 / 3; border-radius: 22px; background: linear-gradient(135deg, #ffe9c2 0%, #ffb591 35%, #ff8db4 70%, #b59afc 100%); color: #4a2f1c; font-family: 'Noto Sans JP', sans-serif; font-weight: 600; font-size: 14px; letter-spacing: 0.06em; box-shadow: 0 10px 28px rgba(255, 122, 142, 0.18); margin: 12px 0; } /* 和菓子 (2026-05-24): 桃紫の placeholder は和菓子サイトの墨/金/紙トンマナに浮くため * 生成り紙 (#f3eee2) ベースに金アクセント (#c9a95a) の細枠 + 墨色文字 (#2a2218) に置換。 * map / image / hero など全 placeholder に適用される。 */ body[data-industry="wagashi"] .ld-image-placeholder, body[data-industry="wagashi"] .ld-map-placeholder{ background: linear-gradient(135deg, #f3eee2 0%, #ebe5d3 100%); color: #2a2218; border: 1px solid rgba(201, 169, 90, 0.55); box-shadow: 0 8px 22px rgba(201,169,90,0.14), inset 0 1px 0 rgba(255,255,255,0.6); } body[data-industry="wagashi"] .ld-map-placeholder::before{ background: radial-gradient(circle at 30% 20%, rgba(201,169,90,0.18) 0%, transparent 50%); } body[data-industry="wagashi"] .ld-image-placeholder::before{ color: #6b6258; } .ld-image-placeholder::before{ content: "※ お客さまの写真に差し替えます"; } .ld-image-placeholder[lang="en"]::before, body.lang-en .ld-image-placeholder::before, html[lang="en"] .ld-image-placeholder::before{ content: "※ Will be replaced with your photo"; }