/* AIチャット — LPのトークン(白・藍・文字・罫線)だけを使う。影・グラデーションなし、全て左揃え。 */
@layer components{
.chat-fab{position:fixed;right:max(1rem,env(safe-area-inset-right));bottom:calc(1rem + env(safe-area-inset-bottom));z-index:40;display:inline-flex;align-items:center;gap:.5em;min-height:3.5rem;padding:0 1.25em;border:1px solid var(--c-bg);border-radius:1.75rem;background:var(--c-accent);color:var(--c-bg);font-weight:700;font-size:var(--fs-s);line-height:1;cursor:pointer;transition:opacity var(--dur)}
.chat-fab:hover{opacity:.85}
.chat-fab__svg{width:1.4rem;height:1.4rem;flex:none}
/* マスコットのトラ。白い丸に載せて、藍のボタン上でも縞が見えるようにする */
.chat-fab__face{width:2.25rem;height:2.25rem;flex:none;border-radius:50%;background:var(--c-bg);margin-left:-.45em}
.chat-fab[hidden]{display:none}
/* フォームの送信ボタンやCTAに重ならないよう、申込フォームが画面にある間は引っ込める */
.chat-fab.is-away{opacity:0;pointer-events:none}

.chat{position:fixed;z-index:50;margin:0;padding:0;border:1px solid var(--c-accent);border-radius:var(--r);background:var(--c-bg);color:var(--c-ink);font-size:var(--fs-s);line-height:1.8;text-align:left;overflow:hidden;
  inset:auto max(1rem,env(safe-area-inset-right)) calc(1rem + env(safe-area-inset-bottom)) auto;width:min(23.75rem,100vw - 2rem);height:min(70vh,40rem);max-width:none;max-height:none}
.chat[open]{display:flex;flex-direction:column}
.chat::backdrop{background:var(--c-bg)}
/* スマホ: 画面全体がチャットになる */
@media (max-width:59.99rem){
  .chat{inset:0;width:100vw;height:100dvh;border:0;border-radius:0}
}
.chat__head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-1);min-height:3.25rem;padding:env(safe-area-inset-top) var(--sp-2) 0;border-bottom:2px solid var(--c-accent);flex:none}
.chat__face{width:2rem;height:2rem;flex:none;margin-right:.5em}
.chat__title{font-size:var(--fs-m);font-weight:700;color:var(--c-accent);line-height:1.4;margin-right:auto}
.chat__back,.chat__close{background:none;border:0;min-width:2.75rem;min-height:2.75rem;padding:0;color:var(--c-accent);font-weight:700;cursor:pointer}
.chat__back{display:none;text-decoration:underline;text-underline-offset:.22em}
.chat__close{font-size:1.5rem;line-height:1}
@media (max-width:59.99rem){
  .chat__head{justify-content:flex-start}
  .chat__back{display:inline-block;order:-1;margin-right:var(--sp-1)}
  .chat__close{display:none}
}
.chat__log{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:var(--sp-2);display:flex;flex-direction:column;gap:var(--sp-2)}
.chat__log:focus-visible{outline-offset:-3px}
.msg{max-width:92%;padding:.7em .9em;border:1px solid var(--c-line);border-radius:var(--r);white-space:pre-wrap;overflow-wrap:anywhere}
.msg--user{align-self:flex-end;border-color:var(--c-accent)}
.msg__who{display:block;font-size:var(--fs-xs);font-weight:700;color:var(--c-accent);line-height:1.6}
.msg.is-typing .msg__body::after{content:"…";color:var(--c-accent)}
.chat__quick{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-1)}
.chat__quick button,.chat__toform{min-height:2.75rem;padding:.5em 1em;border:1px solid var(--c-accent);border-radius:var(--r);background:var(--c-bg);color:var(--c-accent);font-weight:700;text-align:left;line-height:1.5;cursor:pointer}
.chat__quick button:hover,.chat__toform:hover{opacity:.85}
.chat__foot{flex:none;border-top:1px solid var(--c-line);padding:var(--sp-1) var(--sp-2) calc(var(--sp-1) + env(safe-area-inset-bottom));display:grid;gap:var(--sp-1)}
.chat__toform{justify-self:start;background:var(--c-accent);color:var(--c-bg)}
.chat__form{display:grid;grid-template-columns:1fr auto;gap:var(--sp-1);align-items:end}
.chat__input{width:100%;min-height:2.75rem;max-height:8rem;padding:.55em .8em;border:1px solid var(--c-ink);border-radius:var(--r);background:var(--c-bg);font-size:1rem;line-height:1.6;resize:none}
.chat__send{min-height:2.75rem;padding:0 1.1em;border:1px solid var(--c-accent);border-radius:var(--r);background:var(--c-accent);color:var(--c-bg);font-weight:700;cursor:pointer}
.chat__send:disabled,.chat__input:disabled{opacity:.35;cursor:not-allowed}
.chat__note{font-size:.72rem;line-height:1.6}
.chat__count{font-variant-numeric:tabular-nums}
.chat__turnstile:empty{display:none}
}
@layer print{@media print{.chat-fab,.chat{display:none!important}}}