/* コラムQAチャット v2。色は記事テーマの変数を使い、無い記事でも崩れないよう既定値を持つ */
.lqa{
  --lqa-ink:var(--ink,#3A3A3A);
  --lqa-muted:#6E6E73;            /* 白で5.07:1・淡ピンクで4.6:1（テーマの--mutedは薄すぎるので固定） */
  --lqa-line:var(--line,#EFE3E8);
  --lqa-tint:var(--pink-tint,#FFF0F5);
  --lqa-accent:var(--pink,#DD6F9F);
  --lqa-primary:#D42F7A;          /* サイトのCTA色（TOP v15 --cta）。白文字4.68:1 */
  --lqa-primary-dk:#B32469;       /* hover（TOP v15 --cta-dk） */
  margin:40px 0; padding:20px; border:1px solid var(--lqa-line); border-radius:12px;
  background:#fff; color:var(--lqa-ink); font-size:15px; line-height:1.7;
}
.lqa *{box-sizing:border-box}
.lqa p{margin:0}
.lqa-nb{white-space:nowrap}
.lqa-head{display:flex; align-items:center; gap:10px; margin-bottom:14px}
.lqa-icon{flex:0 0 36px; width:36px; height:36px}
.lqa-icon svg{display:block; width:100%; height:100%}
.lqa-intro{font-weight:700; font-size:15px}

/* 質問ボタン＝面あり・角丸・44px以上・1行 */
.lqa-chips{display:flex; flex-wrap:wrap; gap:8px}
.lqa-chip{
  appearance:none; border:1px solid var(--lqa-accent); background:var(--lqa-tint); color:var(--lqa-ink);
  min-height:44px; padding:10px 16px; border-radius:12px; font:inherit; font-size:14px; font-weight:700;
  line-height:1.4; white-space:nowrap; cursor:pointer; text-align:left;
}
.lqa-chip:hover{background:#FDE3EE}
.lqa-chip:focus-visible,.lqa-btn:focus-visible,.lqa-link:focus-visible,.lqa-more a:focus-visible,.lqa-fab:focus-visible,.lqa-sheet-x:focus-visible{outline:3px solid #1A73E8; outline-offset:2px}
.lqa-bubble--bot:focus{outline:none}
.lqa-chip--ghost{border-color:transparent; background:transparent; color:var(--lqa-muted); font-weight:400; text-decoration:underline; padding-left:6px; padding-right:6px}
.lqa-chip--ghost:hover{background:transparent; color:var(--lqa-ink)}
/* 記事に無い質問の逃げ道＝LINE。回答内のLINEと同じSecondary（枠線）で揃える */
.lqa-more{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-top:20px; padding-top:16px; border-top:1px solid var(--lqa-line); font-size:13px; color:var(--lqa-muted)}
.lqa-more .lqa-btn{min-height:40px; padding:8px 16px; font-size:13px}

/* 会話 */
.lqa-log:empty{display:none}
.lqa-log{display:flex; flex-direction:column; gap:12px}
.lqa-row{display:flex; gap:10px; align-items:flex-start}
.lqa-row--me{justify-content:flex-end}
.lqa-bubble{max-width:100%; padding:12px 14px; border-radius:12px}
.lqa-bubble--me{background:var(--lqa-tint); font-weight:700; max-width:80%}
.lqa-bubble--bot{flex:1; min-width:0; border:1px solid var(--lqa-line); background:#fff}
.lqa-typing{border:1px solid var(--lqa-line); color:var(--lqa-muted); letter-spacing:.2em}
/* 「.lqa p{margin:0}」に負けないよう p を付けて書く（付けないと余白が0になり詰まる） */
.lqa p.lqa-a{margin-bottom:4px; text-wrap:pretty}
/* 記事内の節へ＝テキストリンク（ボタンにしない＝補助の優先度） */
/* inline-flexにすると改行防止の<span>が別々の列になって崩れるので、ふつうの文字として流す */
.lqa-link{display:inline-block; min-height:44px; padding:11px 0; margin-bottom:2px; color:var(--lqa-ink); font-size:14px; text-decoration:underline; text-wrap:pretty}
.lqa-acts{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.lqa-btn{display:inline-block; text-align:center; min-height:44px; padding:12px 18px;
  border-radius:12px; font-size:14px; font-weight:700; text-decoration:none; white-space:nowrap; line-height:1.4}
.lqa-btn--primary{background:var(--lqa-primary); color:#fff; border:1px solid var(--lqa-primary)}
.lqa-btn--primary:hover{background:var(--lqa-primary-dk); border-color:var(--lqa-primary-dk)}
.lqa-btn--secondary{background:#fff; color:var(--lqa-primary-dk); border:1px solid var(--lqa-primary-dk)}
.lqa-acts--close .lqa-btn{min-width:240px}
/* LINE＝LINEの緑。枠線のまま（相談より一段下）。文字は#06C755だと白地で2.2:1と読みにくいので濃い緑 */
.lqa-btn--line{background:#fff; color:#037A35; border:1.5px solid #06C755}
.lqa-btn--line:hover{background:#EAF9F0; border-color:#06C755}
.lqa-next{padding-left:46px}
.lqa p.lqa-next-label{font-size:12px; color:var(--lqa-muted); margin-bottom:6px}
.lqa-close{margin-left:46px; padding:16px; border-radius:12px; background:var(--lqa-tint)}
.lqa p.lqa-close-text{margin-bottom:16px; text-wrap:pretty}
.lqa-close .lqa-chip--ghost{margin-top:6px; color:var(--lqa-ink)}

/* 右下ランチャー（CTAではないので動かさない・控えめ） */
.lqa-fab{position:fixed; right:16px; bottom:16px; z-index:900; display:inline-flex; align-items:center; gap:8px;
  min-height:48px; padding:12px 18px; border-radius:999px; border:1px solid var(--line,#EFE3E8); background:#fff; color:var(--ink,#3A3A3A);
  font:inherit; font-size:14px; font-weight:700; box-shadow:0 4px 16px rgba(0,0,0,.12); cursor:pointer}
.lqa-fab svg{width:20px; height:20px; flex:0 0 20px}
.lqa-fab-short{display:none}
.lqa-fab[hidden],.lqa-sheet[hidden]{display:none}
.lqa-sheet{position:fixed; z-index:901; right:16px; bottom:16px; width:380px; max-height:min(640px,80vh);
  display:flex; flex-direction:column; background:#fff; border-radius:16px; box-shadow:0 8px 32px rgba(0,0,0,.18); overflow:hidden}
.lqa-sheet-head{display:flex; align-items:center; justify-content:space-between; padding:10px 12px 10px 18px; background:var(--pink-tint,#FFF0F5); border-bottom:1px solid var(--line,#EFE3E8)}
.lqa-sheet-title{margin:0; font-weight:700; font-size:14px}
/* 閉じる＝押せると分かる枠線ボタン。色はグレー（ピンクはLINE・相談の行き先だけに使う） */
.lqa-sheet-x{appearance:none; display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:0 14px; border:1px solid #D6CCD0; border-radius:999px;
  background:#fff; font:inherit; font-size:13px; font-weight:700; color:var(--ink,#3A3A3A); cursor:pointer}
.lqa-sheet-x:hover{background:#F6F2F4}
.lqa-sheet-x svg{width:14px; height:14px; flex:0 0 14px}
.lqa.lqa--sheet{margin:0; border:none; border-radius:0; overflow-y:auto; flex:1}
/* dock＝PCで記事の右余白に最初から開いて置く形。記事中ブロックと同じ質問が2か所に並ばないよう、記事中は隠す */
.lqa-docked .lqa:not(.lqa--sheet){display:none}
.lqa-sheet--dock{box-shadow:0 4px 20px rgba(0,0,0,.10)}
.lqa-sheet--dock .lqa-chip{white-space:normal}
/* dockは幅300〜380pxと狭いので、締めの枠とボタンはSPと同じ縦積み・全幅にする */
.lqa-sheet--dock .lqa-next{padding-left:0}
.lqa-sheet--dock .lqa-close{margin-left:0}
.lqa-sheet--dock .lqa-acts{flex-direction:column; align-items:stretch}
.lqa-sheet--dock .lqa-btn{width:100%; min-width:0; white-space:normal}
/* 表の多い記事ではdockが最小の約300pxになり、横のアイコン列で答えが1行10字前後に痩せる＋相談ボタンが2行に折れる
   → 狭いdockだけSPと同じ「アイコンを吹き出しの上」に（261104 全記事点検） */
.lqa-sheet--dock{container-type:inline-size}
@container (max-width:340px){
  .lqa-sheet--dock .lqa-row--bot{flex-direction:column; gap:4px}
  .lqa-sheet--dock .lqa-row--bot .lqa-icon{flex:0 0 28px; width:28px; height:28px}
  .lqa-sheet--dock .lqa-bubble--bot{width:100%}
}

@media (max-width:840px){
  .lqa{padding:16px; margin:32px 0}
  .lqa-chips{flex-direction:column; align-items:stretch}
  .lqa-sheet-x{min-height:44px}
  .lqa-more .lqa-btn{min-height:44px}
  .lqa-chip{white-space:normal}
  /* SPはアイコンを吹き出しの上に置き、文字幅を確保する（泣き別れ対策） */
  .lqa-row--bot{flex-direction:column; gap:4px}
  .lqa-row--bot .lqa-icon{flex:0 0 28px; width:28px; height:28px}
  .lqa-bubble--bot{width:100%}
  .lqa-next{padding-left:0}
  .lqa-close{margin-left:0}
  .lqa-acts{flex-direction:column; align-items:stretch}
  .lqa-btn,.lqa-acts--close .lqa-btn{width:100%; min-width:0; white-space:normal}
  /* SPのランチャー＝アイコンだけだと何のボタンか分からないので文言を付ける（表などが見えている間は隠す＝覆う面積は従来どおり抑える） */
  .lqa-fab{right:12px; bottom:12px; min-height:48px; padding:0 16px 0 14px; font-size:13px; gap:6px; background:var(--pink-tint,#FFF0F5)}
  .lqa-fab svg{width:20px; height:20px}
  /* SPは短く「質問」だけ（覆う面積を小さく） */
  .lqa-fab-text{display:none}
  .lqa-fab-short{display:inline}
  /* SPは下から最大70vhのシート。記事全体は覆わない */
  .lqa-sheet{left:0; right:0; bottom:0; width:auto; max-height:70vh; border-radius:16px 16px 0 0}
}
/* ★11/04 Taku「出方がスムーズじゃない」＝右の窓・右下ボタンが急に現れないよう、下からふわっと出す（出るたびに再生） */
@keyframes lqa-in{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none}}
.lqa-sheet:not([hidden]),.lqa-fab:not([hidden]){animation:lqa-in .32s cubic-bezier(.2,.7,.3,1) both}
@media (prefers-reduced-motion:reduce){ .lqa *{transition:none!important} .lqa-sheet,.lqa-fab{animation:none!important} }