/* Laxuz v1.4 ｜ 最終更新 2026/07/04 */
/* ===== Laxuz 共通スタイル ===== */
html { scroll-behavior: smooth; }

/* reveal アニメーション
   .lx-js は common.js が先頭で付与する「JS動作中」の印。
   JS無効・スクリプト読込失敗時は .reveal が非表示にならず、全コンテンツが見える */
html.lx-js .reveal { opacity:0; transform:translateY(30px); transition:opacity 0.8s cubic-bezier(0.16,1,0.3,1),transform 0.8s cubic-bezier(0.16,1,0.3,1); will-change:opacity,transform; -webkit-backface-visibility:hidden; }
html.lx-js .reveal.active { opacity:1; transform:translateY(0); }
.delay-100 { transition-delay:100ms; }
.delay-200 { transition-delay:200ms; }
@media (prefers-reduced-motion:reduce) { html.lx-js .reveal { opacity:1; transform:none; transition:none; } }

/* 共通パーツ */
.soft-shadow { box-shadow:0 8px 32px -8px rgba(15,118,110,0.10); }
.step-line::before { content:''; position:absolute; left:22px; top:48px; bottom:-16px; width:2px; background:#CCFBF1; }

/* フローティングLINEボタン位置 */
.float-line-btn { bottom:1.25rem; right:1.25rem; }
@media(min-width:768px){ .float-line-btn { bottom:2.5rem; right:2.5rem; } }

/* FAQ smooth open */
details summary::-webkit-details-marker { display:none; }

/* メニューカード画像（共通） */
.card-img-wrap { height:160px; overflow:hidden; background:#e2e8f0; }
.card-img { width:100%; height:160px; object-fit:cover; display:block; }
.card-img-wrap-amber { height:160px; overflow:hidden; background:#fef3c7; }

/* =========================================================
   AIチャットボット（全ページ共通・common.jsが要素を生成）
   ========================================================= */
:root { --lx-teal:#0F766E; --lx-teal-d:#0b5b54; }

/* 起動フローティングボタン */
#lx-launcher {
  position:fixed; z-index:1000; right:1.25rem; bottom:1.25rem;
  width:60px; height:60px; border-radius:9999px; border:none; cursor:pointer;
  background:var(--lx-teal); color:#fff; box-shadow:0 10px 30px -6px rgba(15,118,110,.5);
  display:flex; align-items:center; justify-content:center;
  transition:transform .25s ease, background .2s ease;
}
#lx-launcher:hover { background:var(--lx-teal-d); transform:scale(1.07); }
#lx-launcher svg { width:30px; height:30px; }
#lx-launcher.lx-hidden { opacity:0; pointer-events:none; transform:scale(.6); }
@media(min-width:768px){ #lx-launcher { right:2.5rem; bottom:2.5rem; width:64px; height:64px; } }

/* 未読・誘導の小バッジ */
#lx-launcher .lx-badge {
  position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; padding:0 5px;
  background:#F59E0B; color:#fff; font-size:11px; font-weight:700; line-height:18px;
  border-radius:9999px; text-align:center;
}

/* チャットパネル */
#lx-chat {
  position:fixed; z-index:1001; right:1.25rem; bottom:1.25rem;
  width:min(380px, calc(100vw - 2rem)); height:min(560px, calc(100vh - 2rem));
  background:#fff; border-radius:20px; overflow:hidden;
  box-shadow:0 24px 60px -12px rgba(0,0,0,.35);
  display:flex; flex-direction:column;
  opacity:0; transform:translateY(16px) scale(.98); pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
  font-family:'M PLUS Rounded 1c','Zen Maru Gothic',sans-serif;
}
#lx-chat.lx-open { opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
@media(min-width:768px){ #lx-chat { right:2.5rem; bottom:2.5rem; } }
@media(max-width:480px){
  #lx-chat { right:0; bottom:0; width:100vw; height:100dvh; border-radius:0; }
}

.lx-head { background:var(--lx-teal); color:#fff; padding:14px 16px; display:flex; align-items:center; gap:10px; }
.lx-head .lx-dot { width:9px; height:9px; border-radius:9999px; background:#4ade80; box-shadow:0 0 0 3px rgba(74,222,128,.25); }
.lx-head .lx-ttl { font-weight:700; font-size:15px; line-height:1.2; }
.lx-head .lx-sub { font-size:11px; opacity:.85; }
.lx-head .lx-close { margin-left:auto; background:transparent; border:none; color:#fff; font-size:22px; line-height:1; cursor:pointer; opacity:.9; padding:4px; }
.lx-head .lx-close:hover { opacity:1; }

.lx-body { position:relative; flex:1; overflow-y:auto; padding:16px; background:#FFFAED; display:flex; flex-direction:column; gap:10px; }
.lx-msg { max-width:84%; padding:10px 13px; border-radius:16px; font-size:14px; line-height:1.55; white-space:pre-wrap; word-break:break-word; }
.lx-msg.bot { align-self:flex-start; background:#fff; color:#374151; border-bottom-left-radius:5px; box-shadow:0 2px 10px -4px rgba(0,0,0,.12); }
.lx-msg.user { align-self:flex-end; background:var(--lx-teal); color:#fff; border-bottom-right-radius:5px; }
.lx-msg a { color:var(--lx-teal); font-weight:700; text-decoration:underline; }
.lx-msg.user a { color:#fff; }

/* 候補チップ */
.lx-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:2px; }
.lx-chip { background:#fff; border:1.5px solid var(--lx-teal); color:var(--lx-teal); font-size:12px; font-weight:700; padding:6px 11px; border-radius:9999px; cursor:pointer; transition:.15s; }
.lx-chip:hover { background:var(--lx-teal); color:#fff; }

/* タイピング表示 */
.lx-typing { align-self:flex-start; background:#fff; border-radius:16px; border-bottom-left-radius:5px; padding:12px 14px; box-shadow:0 2px 10px -4px rgba(0,0,0,.12); display:flex; gap:4px; }
.lx-typing span { width:7px; height:7px; border-radius:9999px; background:#9ca3af; animation:lx-bounce 1.2s infinite; }
.lx-typing span:nth-child(2){ animation-delay:.2s; } .lx-typing span:nth-child(3){ animation-delay:.4s; }
@keyframes lx-bounce { 0%,60%,100%{ transform:translateY(0); opacity:.5; } 30%{ transform:translateY(-5px); opacity:1; } }

/* 入力欄（テキスト欄の下に横長の送信ボタン） */
.lx-input { display:flex; flex-direction:column; gap:8px; padding:10px; border-top:1px solid #eee; background:#fff; }
.lx-input textarea { width:100%; min-width:0; box-sizing:border-box; resize:none; border:1.5px solid #e5e7eb; border-radius:14px; padding:9px 12px; font-size:14px; font-family:inherit; max-height:96px; outline:none; }
.lx-input textarea:focus { border-color:var(--lx-teal); }
.lx-input button { width:100%; height:42px; border-radius:12px; border:none; background:var(--lx-teal); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:6px; font-size:14px; font-weight:700; font-family:inherit; transition:.2s; }
.lx-input button svg { width:18px; height:18px; }
.lx-input button:hover { background:var(--lx-teal-d); }
.lx-input button:disabled { opacity:.5; cursor:default; }
.lx-foot { font-size:10px; color:#9ca3af; text-align:center; padding:0 0 8px; background:#fff; }

/* =========================================================
   エリアマップ 拡大表示モーダル（index.htmlの「訪問エリア」用）
   ========================================================= */
html.lx-noscroll { overflow:hidden; }
#area-img-stage { touch-action:none; cursor:zoom-in; }
#area-img-stage.is-zoomed { cursor:grab; }
#area-img-stage.dragging { cursor:grabbing; }
#area-img-modal-img {
  max-width:none; max-height:none; width:min(90vw, 900px); height:auto;
  user-select:none; -webkit-user-drag:none; pointer-events:none;
  transition:transform .15s ease-out; will-change:transform;
}
#area-img-modal-img.no-transition { transition:none; }