/* 質問チャット（CR-FAQ-CHAT v17）。tools/build_css.py の生成物。手で直さない。 */

/* ── staged/faq-chat.css ── */
/* 2026-10-10 CR-FAQ-CHAT：よくある質問から答えるチャット（プレビュー段階・本番未反映） */
.faq-chat { --fc-pink: #EE3B74; --fc-pink-pale: #FFF0F5; --fc-text: #3D3D3D; --fc-line: #06C755; }
/* 開くボタン：TOP ボタンと同じ高さの左側（固定の LINE ボタンの上） */
.fc-open { position: fixed; left: 14px; z-index: 302;
  bottom: calc(var(--floating-h, 60px) + env(safe-area-inset-bottom) + 26px + var(--cta-lift, 0px));
  display: inline-flex; align-items: center; gap: 5px; height: 42px; padding: 0 14px 0 12px; border: 0; border-radius: 999px;
  background: #fff; color: var(--fc-pink); font: 800 13px/1 'Noto Sans JP', sans-serif; box-shadow: 0 3px 12px rgba(0,0,0,.18); cursor: pointer; }
.fc-open svg { width: 18px; height: 18px; fill: var(--fc-pink); }
.faq-chat.is-open .fc-open { opacity: 0; pointer-events: none; }
/* パネル：画面下からのシート */
.fc-panel { position: fixed; left: 8px; right: 8px; bottom: calc(env(safe-area-inset-bottom) + 8px); z-index: 1000;
  max-width: 460px; margin: 0 auto; height: min(560px, 72dvh); display: flex; flex-direction: column;
  background: #fff; border-radius: 18px; box-shadow: 0 10px 40px rgba(0,0,0,.25); overflow: hidden; }
.fc-panel[hidden] { display: none; }
.fc-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; background: var(--fc-pink); color: #fff; }
.fc-title { margin: 0; font: 800 15px/1.3 'Noto Sans JP', sans-serif; }
.fc-close { width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(255,255,255,.2); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; }
.fc-log { flex: 1; overflow-y: auto; padding: 14px 12px 8px; background: #FAFAFB; display: flex; flex-direction: column; gap: 10px; }
.fc-msg { max-width: 86%; padding: 10px 12px; border-radius: 14px; font: 500 14px/1.7 'Noto Sans JP', sans-serif; color: var(--fc-text); }
.fc-msg p { margin: 0; }
.fc-msg .fc-q { margin: 0 0 4px; font-weight: 800; font-size: 12.5px; color: var(--fc-pink); }
.fc-msg--bot { align-self: flex-start; background: #fff; border: 1px solid #F1E4EA; border-top-left-radius: 4px; }
.fc-msg--user { align-self: flex-end; background: var(--fc-pink); color: #fff; border-top-right-radius: 4px; }
.fc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fc-chips__label { width: 100%; margin: 2px 0 0; font: 700 11.5px/1.4 'Noto Sans JP', sans-serif; color: #8F8F8F; }
.fc-chip { padding: 7px 11px; border: 1.5px solid var(--fc-pink); border-radius: 999px; background: #fff; color: var(--fc-pink);
  font: 700 12.5px/1.3 'Noto Sans JP', sans-serif; cursor: pointer; text-align: left; }
.fc-line { display: block; margin-top: 10px; padding: 10px 12px; border-radius: 999px; background: var(--fc-line); color: #fff;
  text-align: center; text-decoration: none; font: 800 14px/1.2 'Noto Sans JP', sans-serif; }
.fc-form { display: flex; gap: 6px; padding: 10px 10px 6px; border-top: 1px solid #F0E6EA; background: #fff; }
.fc-input { flex: 1; min-width: 0; height: 42px; padding: 0 12px; border: 1.5px solid #E7D6DD; border-radius: 999px; font: 500 16px/1 'Noto Sans JP', sans-serif; color: var(--fc-text); }
.fc-input:focus { outline: none; border-color: var(--fc-pink); }
.fc-send { height: 42px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--fc-pink); color: #fff; font: 800 14px/1 'Noto Sans JP', sans-serif; cursor: pointer; }
.fc-note { margin: 0; padding: 0 12px 10px; background: #fff; font: 500 11px/1.5 'Noto Sans JP', sans-serif; color: #8F8F8F; }
@media (min-width: 1024px) { .fc-open { left: auto; right: max(16px, calc((100vw - var(--main-left, 0px) - var(--col-w, 480px)) / 2 + 84px)); } }
@media (prefers-reduced-motion: no-preference) { .fc-msg, .fc-chips { animation: fcIn .22s ease both; } }
@keyframes fcIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* 今すぐLINEで相談するボタン（文字入力の上・常に表示）2026-10-14 試作
   参考：i-hab.co.jp のチャットの見出しの下にある「今すぐお問い合わせ！」 */
.fc-now { display: flex; align-items: center; gap: 8px; margin: 6px 14px 0; padding: 11px 12px 11px 14px; border-radius: 12px;
  background: linear-gradient(180deg, #19D266 0%, #06C755 100%); color: #fff; text-decoration: none;
  font: 800 14.5px/1.2 'Noto Sans JP', sans-serif; letter-spacing: .02em;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.25), 0 3px 8px rgba(6,199,85,.28); }
.fc-now span:first-of-type { flex: 1; }
.fc-now__ico { width: 22px; height: 22px; fill: #fff; flex: none; }
.fc-now__arrow { position: relative; width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.22); flex: none; }
.fc-now__arrow::after { content: ""; position: absolute; left: 7px; top: 7.5px; width: 6px; height: 6px; border-right: 2px solid #fff; border-top: 2px solid #fff; transform: rotate(45deg); }
.fc-now:active { transform: translateY(1px); box-shadow: inset 0 2px 0 rgba(255,255,255,.2), 0 1px 4px rgba(6,199,85,.25); }
.fc-now:focus-visible { outline: 3px solid #A8EFC6; outline-offset: 2px; }
.faq-chat:not(.fc-robot) .fc-now { margin: 10px 12px 0; }

/* 2026-10-14 小さく（ユーザー指示：大きすぎる）。幅いっぱい・高さ44px → 文字に合わせた幅・高さ約32px・中央 */
.faq-chat .fc-now { width: fit-content; margin: 6px auto 0; gap: 6px; padding: 6px 10px 6px 9px; border-radius: 999px; font-size: 12.5px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 2px 5px rgba(6,199,85,.25); }
.faq-chat .fc-now__ico { width: 17px; height: 17px; }
.faq-chat .fc-now__arrow { width: 16px; height: 16px; }
.faq-chat .fc-now__arrow::after { left: 4.5px; top: 5px; width: 5px; height: 5px; border-width: 1.6px; }

/* 2026-10-14 ボットの答えの上にキャラクターと名前（Lovense のチャットと同じ並び）*/
.faq-chat .fc-who { display: flex; align-items: center; gap: 6px; margin: 0 0 -6px 2px; font: 700 12px/1 'Noto Sans JP', sans-serif; color: #7A7A7A; }
.faq-chat .fc-ava { width: 26px; height: 32px; flex: none; background: center / contain no-repeat none; filter: drop-shadow(0 1px 2px rgba(70,150,210,.25)); }
/* 2026-10-14 質問ボタンを小さく（圧迫感を減らす） */
.faq-chat.fc-robot .fc-chips { gap: 6px; padding: 10px; }
.faq-chat.fc-robot .fc-chip { padding: 8px 28px 8px 11px; border-radius: 10px; font-size: 12.5px; line-height: 1.4; }
.faq-chat.fc-robot .fc-chip::after { right: 11px; width: 6px; height: 6px; margin-top: -3px; border-width: 1.6px; }
.faq-chat:not(.fc-robot) .fc-chip { padding: 5px 9px; font-size: 12px; }

/* 2026-10-14 質問ボタンをさらに軽く：幅を文字に合わせ、左にそろえる */
.faq-chat.fc-robot .fc-chips { align-items: flex-start; gap: 5px; padding: 9px 10px; }
.faq-chat.fc-robot .fc-chip { width: auto; max-width: 100%; padding: 6px 24px 6px 10px; font-size: 12.5px; }
.faq-chat.fc-robot .fc-chip::after { right: 9px; }
.faq-chat.fc-robot .fc-chips { width: fit-content; }
.faq-chat .fc-ava { width: 30px; height: 37px; }

/* 2026-10-14 文字を Lovense のチャットと同じ作りに（ja.lovense.com をスマホ表示で実測）
   書体：英数字は Open Sans、日本語は端末の標準ゴシック（iPhone はヒラギノ）／本文 14px・行間 22px・太さ 400・#333
   名前 12px 太字 #666／候補 13px・400／入力 16px／小見出し 12px・600 */
.faq-chat .fc-panel, .faq-chat .fc-panel button, .faq-chat .fc-panel input, .faq-chat .fc-now {
  font-family: 'Open Sans', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif; }
.faq-chat .fc-title { font-size: 16px; font-weight: 600; line-height: 1.3; color: #333; letter-spacing: 0; }
.faq-chat .fc-msg { font-size: 14px; font-weight: 400; line-height: 22px; color: #333; letter-spacing: 0; }
.faq-chat .fc-msg--user { color: #3A2A30; }
.faq-chat .fc-who { font-size: 12px; font-weight: 700; line-height: 15px; color: #666; }
.faq-chat .fc-chips__label { font-size: 12px; font-weight: 600; line-height: 1.4; color: #666; }
.faq-chat .fc-chip { font-size: 13px; font-weight: 400; line-height: 1.1; color: #333; letter-spacing: 0; }
.faq-chat.fc-robot .fc-chip { padding: 8px 24px 8px 10px; }
.faq-chat .fc-input { font-size: 16px; font-weight: 400; color: #333; }
.faq-chat .fc-now { font-size: 13px; font-weight: 600; letter-spacing: 0; }
.faq-chat .fc-line { font-weight: 600; }
.faq-chat .fc-note { font-size: 11px; color: #999; }

/* 2026-10-14 Lovense と同じ組み方：答え＋区切り線＋質問の候補を1枚の白いカードに／見出しは中央 */
.faq-chat .fc-head { position: relative; justify-content: center; padding: 16px 48px 12px; }
.faq-chat .fc-title { justify-content: center; text-align: center; }
.faq-chat .fc-close { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); }
.faq-chat .fc-msg--card { align-self: stretch; max-width: none; padding: 16px 16px 14px; border-radius: 4px 22px 22px 22px; }
.faq-chat .fc-msg--card .fc-chips { width: auto; max-width: none; margin: 14px 0 0; padding: 14px 0 0; border: 0; border-top: 1px solid #ECEEF2;
  border-radius: 0; background: none; box-shadow: none; align-items: stretch; gap: 8px; animation: none; }
.faq-chat .fc-msg--card .fc-chips__label { display: flex; align-items: center; gap: 7px; margin: 0 0 4px; font-size: 14px; font-weight: 600; line-height: 21px; color: #333; }
.faq-chat .fc-msg--card .fc-chips__label::before { content: ""; width: 16px; height: 16px; flex: none; border-radius: 50% 0 50% 50%; transform: rotate(-45deg);
  background: linear-gradient(135deg, #FF9CBD, #EE3B74); }
.faq-chat .fc-msg--card .fc-chip { width: 100%; max-width: none; padding: 13px 34px 13px 12px; border: 0; border-radius: 12px; background: #F5F7F9;
  font-size: 13px; font-weight: 400; line-height: 1.1; color: #333; text-align: left; }
.faq-chat .fc-msg--card .fc-chip::after { content: ""; position: absolute; right: 14px; top: 50%; width: 7px; height: 7px; margin-top: -4px;
  border: 0; border-right: 2px solid #333; border-top: 2px solid #333; transform: rotate(45deg); }
.faq-chat .fc-msg--card .fc-chip { position: relative; }
.faq-chat .fc-msg--card .fc-line { margin-top: 12px; }

/* 2026-10-14 ユーザー指示：見出しのピンクの雫を外す／LINEボタンは右寄せ */
.faq-chat .fc-msg--card .fc-chips__label::before { content: none; }
.faq-chat .fc-now { margin-left: auto; margin-right: 14px; }

/* 2026-10-14 ユーザー指示：質問のグレーの背景を同じ大きさに。
   長い質問が2行になっても、同じカードの中の候補はいちばん高いものにそろえる（見出しの行だけは除く） */
.faq-chat .fc-msg--card .fc-chips { display: grid; grid-template-columns: 100%; grid-template-rows: auto; grid-auto-rows: 1fr; }
.faq-chat .fc-msg--card .fc-chip { display: flex; align-items: center; min-height: 44px; }
/* どのカードでも同じ高さに（2行の質問も入る 54px にそろえる） */
.faq-chat .fc-msg--card .fc-chip { min-height: 54px; padding-top: 9px; padding-bottom: 9px; line-height: 1.3; }
/* 2026-10-14 ユーザー指示：「よく聞かれる質問」を中央に */
.faq-chat .fc-msg--card .fc-chips__label { justify-content: center; text-align: center; }

/* 文節のまとまり（faq-chat.js の ph）。言葉の途中で改行しない */
.faq-chat .fc-ph { display: inline-block; }

/* 2026-10-14 点検：候補の文字を1つのまとまりに入れる（文節の span が横に並んで改行しなくなるのを防ぐ）／幅 360px 未満では見出しを少し小さく1行に */
.faq-chat .fc-chip__t { display: block; }
@media (max-width: 359px) { .faq-chat .fc-head { padding-left: 40px; padding-right: 40px; } .faq-chat .fc-title { font-size: 14.5px; } }
@media (max-width: 359px) { .faq-chat .fc-head { padding-left: 34px; padding-right: 34px; } .faq-chat .fc-title { font-size: 14px; white-space: nowrap; } }
/* 分けたくない言葉と最後の数文字（faq-chat.js の soft） */
.faq-chat .fc-nb { white-space: nowrap; }

/* ── preview_src/faq-chat-robot.css ── */
/* 試作：ロボットの開くボタン（faq-chat.css の .fc-open を上書き）。本番未反映
   動き：スクロール中は半透明＋左へ半分隠れる（0.25s）／止まって 0.4 秒で戻る。吹き出しはスクロール中に消える（0.4s） */
.fcr-dock { position: fixed; left: 10px; z-index: 302;
  bottom: calc(var(--floating-h, 60px) + env(safe-area-inset-bottom) + 18px + var(--cta-lift, 0px));
  transition: transform .25s linear, opacity .25s linear; }
.fc-robot .fc-open.fcr-btn { position: relative; left: auto; bottom: auto; display: block; width: 52px; height: 66px; padding: 0;
  border: 0; border-radius: 0; background: none; box-shadow: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
/* 頭 */
.fcr-head { position: absolute; left: 3px; top: 6px; width: 46px; height: 40px; border-radius: 15px;
  background: linear-gradient(160deg, #FFFFFF 0%, #FFE3EE 100%); box-shadow: 0 4px 12px rgba(238,59,116,.28), inset 0 -2px 0 rgba(238,59,116,.12); }
.fcr-ant { position: absolute; left: 50%; top: -7px; width: 2px; height: 7px; margin-left: -1px; background: #F5A3BF; }
.fcr-ant::after { content: ""; position: absolute; left: -3px; top: -6px; width: 8px; height: 8px; border-radius: 50%; background: #EE3B74; }
.fcr-face { position: absolute; left: 6px; right: 6px; top: 8px; height: 22px; border-radius: 10px; background: #3B2A33;
  display: flex; align-items: center; justify-content: center; gap: 9px; }
.fcr-eye { width: 4px; height: 9px; border-radius: 4px; background: linear-gradient(#FCE7F2, #FFA5D5); transform-origin: center; animation: fcrBlink 3.2s infinite; }
@keyframes fcrBlink { 0%, 90%, 100% { transform: scaleY(1); } 94% { transform: scaleY(.15); } }
/* 下のピンクのラベル */
.fcr-pill { position: absolute; left: 50%; top: 40px; transform: translateX(-50%); padding: 4px 8px; border-radius: 12px;
  background: linear-gradient(90deg, #FF5582 0%, #FF2889 100%); color: #fff; font: 800 10px/1 'Noto Sans JP', sans-serif; letter-spacing: .04em; white-space: nowrap; }
/* 吹き出し（ロボットの右側） */
.fcr-tip { position: absolute; left: 58px; bottom: 22px; width: max-content; max-width: 190px; transition: opacity .4s linear; }
.fcr-tip__text { margin: 0; padding: 7px 26px 7px 11px; border-radius: 12px 12px 12px 4px; background: rgba(0,0,0,.6); color: #fff;
  font: 700 12px/1.4 'Noto Sans JP', sans-serif; }
.fcr-tip__close { position: absolute; right: 3px; top: 50%; width: 20px; height: 20px; margin-top: -10px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.35); color: #fff; font: 700 13px/20px sans-serif; cursor: pointer; }
.fcr-tip.is-closed { display: none; }
/* スクロール中：半透明＋左へ半分隠れる。吹き出しは消す */
.fc-robot.is-scrolling .fcr-dock { opacity: .5; transform: translateX(-36px); }
.fc-robot.is-scrolling .fcr-tip { opacity: 0; pointer-events: none; }
/* 開いている間はボタンを隠す */
.fc-robot.is-open .fcr-dock { opacity: 0; pointer-events: none; }
.fc-robot .fc-open:focus-visible .fcr-head { outline: 2px solid #EE3B74; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .fcr-dock, .fcr-tip { transition: none; } .fcr-eye { animation: none; } }

/* ── 開いたときの画面：Lovense のような淡い配色（2026-10-14 試作）
   実測：背景 #F7F8FA＋上部にピンク→ラベンダー→水色の淡いグラデーションが下へ消える／
   ボットの吹き出しは白・角丸 4 24 24 24／質問の候補は淡いグレーの角丸 12 の行＋右に矢印／
   入力欄は白い丸型・送信は紙飛行機のアイコンだけ／後ろは黒 50% で暗くする */
.fcr-mask { display: none; position: fixed; inset: 0; z-index: 999; background: rgba(0,0,0,.45); }
.fc-robot.is-open .fcr-mask { display: block; }
.fc-robot .fc-panel { left: 0; right: 0; bottom: 0; max-width: 480px; height: min(660px, 86dvh); border-radius: 18px 18px 0 0;
  box-shadow: 0 -6px 30px rgba(0,0,0,.12);
  background: linear-gradient(to bottom, rgba(247,248,250,0) 0, #F7F8FA 120px), linear-gradient(90deg, #FFEFF4 0%, #F8E4F6 50%, #ECEFFF 100%); background-color: #F7F8FA; }
.fc-robot .fc-head { background: none; color: #333; padding: 16px 16px 10px; }
.fc-robot .fc-title { display: flex; align-items: center; gap: 6px; font-size: 15px; color: #333; }
.fc-robot .fc-title::after { content: "Q&A"; padding: 3px 7px 3px 6px; border-radius: 6px 10px 10px 0; background: linear-gradient(90deg, #FF5582, #FF2889);
  color: #fff; font: 700 10px/1 'Open Sans', sans-serif; letter-spacing: .02em; }
.fc-robot .fc-close { width: 30px; height: 30px; background: none; color: #555; font-size: 24px; font-weight: 400; }
.fc-robot .fc-log { background: none; padding: 6px 14px 10px; gap: 12px; }
.fc-robot .fc-msg { font-size: 14px; line-height: 1.75; color: #333; }
.fc-robot .fc-msg--bot { background: #fff; border: 0; border-radius: 4px 22px 22px 22px; padding: 12px 15px; box-shadow: 0 1px 2px rgba(0,0,0,.03); }
.fc-robot .fc-msg .fc-q { color: #E2477A; }
.fc-robot .fc-msg--user { background: #FFE3EC; color: #3A2A30; border-radius: 22px 4px 22px 22px; padding: 10px 15px; }
.fc-robot .fc-chips { flex-direction: column; flex-wrap: nowrap; gap: 8px; background: #fff; border-radius: 4px 22px 22px 22px; padding: 12px; max-width: 92%; }
.fc-robot .fc-chips__label { margin: 0 0 2px 2px; color: #8A8A8A; }
.fc-robot .fc-chip { position: relative; display: block; width: 100%; padding: 12px 34px 12px 14px; border: 0; border-radius: 12px; background: #F5F7FA;
  color: #333; font: 500 13px/1.45 'Noto Sans JP', sans-serif; }
.fc-robot .fc-chip::after { content: ""; position: absolute; right: 14px; top: 50%; width: 7px; height: 7px; margin-top: -4px;
  border-right: 2px solid #FF4F8B; border-top: 2px solid #FF4F8B; transform: rotate(45deg); }
.fc-robot .fc-chip:active { background: #FFEFF4; }
.fc-robot .fc-form { border-top: 0; background: none; padding: 8px 14px 4px; gap: 0; position: relative; }
.fc-robot .fc-input { height: 48px; border: 0; border-radius: 999px; padding: 0 52px 0 18px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.05); font-size: 16px; }
.fc-robot .fc-input:focus { box-shadow: 0 0 0 2px #FFC2D6; }
.fc-robot .fc-send { position: absolute; right: 22px; top: 14px; width: 36px; height: 36px; padding: 0; border-radius: 50%; font-size: 0; color: transparent;
  background: center / 22px 22px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23FF4F8B' d='M3.4 20.4 21 12 3.4 3.6 3.4 10l12 2-12 2z'/%3E%3C/svg%3E"); }
.fc-robot .fc-note { background: none; text-align: center; padding: 4px 14px calc(10px + env(safe-area-inset-bottom)); color: #9A9A9A; }

/* ── preview_src/fc-now.css ── */
/* 今すぐLINEで相談するボタン（文字入力の上・常に表示）2026-10-14 試作
   参考：i-hab.co.jp のチャットの見出しの下にある「今すぐお問い合わせ！」 */
.fc-now { display: flex; align-items: center; gap: 8px; margin: 6px 14px 0; padding: 11px 12px 11px 14px; border-radius: 12px;
  background: linear-gradient(180deg, #19D266 0%, #06C755 100%); color: #fff; text-decoration: none;
  font: 800 14.5px/1.2 'Noto Sans JP', sans-serif; letter-spacing: .02em;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.25), 0 3px 8px rgba(6,199,85,.28); }
.fc-now span:first-of-type { flex: 1; }
.fc-now__ico { width: 22px; height: 22px; fill: #fff; flex: none; }
.fc-now__arrow { position: relative; width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.22); flex: none; }
.fc-now__arrow::after { content: ""; position: absolute; left: 7px; top: 7.5px; width: 6px; height: 6px; border-right: 2px solid #fff; border-top: 2px solid #fff; transform: rotate(45deg); }
.fc-now:active { transform: translateY(1px); box-shadow: inset 0 2px 0 rgba(255,255,255,.2), 0 1px 4px rgba(6,199,85,.25); }
.fc-now:focus-visible { outline: 3px solid #A8EFC6; outline-offset: 2px; }

/* 2026-10-14 小さく（ユーザー指示：大きすぎる）。幅いっぱい・高さ44px → 文字に合わせた幅・高さ約32px・中央 */
.faq-chat .fc-now { width: fit-content; margin: 6px auto 0; gap: 6px; padding: 6px 10px 6px 9px; border-radius: 999px; font-size: 12.5px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 2px 5px rgba(6,199,85,.25); }
.faq-chat .fc-now__ico { width: 17px; height: 17px; }
.faq-chat .fc-now__arrow { width: 16px; height: 16px; }
.faq-chat .fc-now__arrow::after { left: 4.5px; top: 5px; width: 5px; height: 5px; border-width: 1.6px; }

/* 2026-10-14 ボットの答えの上にキャラクターと名前（Lovense のチャットと同じ並び）*/
.faq-chat .fc-who { display: flex; align-items: center; gap: 6px; margin: 0 0 -6px 2px; font: 700 12px/1 'Noto Sans JP', sans-serif; color: #7A7A7A; }
.faq-chat .fc-ava { width: 26px; height: 32px; flex: none; background: center / contain no-repeat none; filter: drop-shadow(0 1px 2px rgba(70,150,210,.25)); }
/* 2026-10-14 質問ボタンを小さく（圧迫感を減らす） */
.faq-chat.fc-robot .fc-chips { gap: 6px; padding: 10px; }
.faq-chat.fc-robot .fc-chip { padding: 8px 28px 8px 11px; border-radius: 10px; font-size: 12.5px; line-height: 1.4; }
.faq-chat.fc-robot .fc-chip::after { right: 11px; width: 6px; height: 6px; margin-top: -3px; border-width: 1.6px; }
.faq-chat:not(.fc-robot) .fc-chip { padding: 5px 9px; font-size: 12px; }

/* 2026-10-14 質問ボタンをさらに軽く：幅を文字に合わせ、左にそろえる */
.faq-chat.fc-robot .fc-chips { align-items: flex-start; gap: 5px; padding: 9px 10px; }
.faq-chat.fc-robot .fc-chip { width: auto; max-width: 100%; padding: 6px 24px 6px 10px; font-size: 12.5px; }
.faq-chat.fc-robot .fc-chip::after { right: 9px; }
.faq-chat.fc-robot .fc-chips { width: fit-content; }
.faq-chat .fc-ava { width: 30px; height: 37px; }

/* 2026-10-14 文字を Lovense のチャットと同じ作りに（ja.lovense.com をスマホ表示で実測）
   書体：英数字は Open Sans、日本語は端末の標準ゴシック（iPhone はヒラギノ）／本文 14px・行間 22px・太さ 400・#333
   名前 12px 太字 #666／候補 13px・400／入力 16px／小見出し 12px・600 */
.faq-chat .fc-panel, .faq-chat .fc-panel button, .faq-chat .fc-panel input, .faq-chat .fc-now {
  font-family: 'Open Sans', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif; }
.faq-chat .fc-title { font-size: 16px; font-weight: 600; line-height: 1.3; color: #333; letter-spacing: 0; }
.faq-chat .fc-msg { font-size: 14px; font-weight: 400; line-height: 22px; color: #333; letter-spacing: 0; }
.faq-chat .fc-msg--user { color: #3A2A30; }
.faq-chat .fc-who { font-size: 12px; font-weight: 700; line-height: 15px; color: #666; }
.faq-chat .fc-chips__label { font-size: 12px; font-weight: 600; line-height: 1.4; color: #666; }
.faq-chat .fc-chip { font-size: 13px; font-weight: 400; line-height: 1.1; color: #333; letter-spacing: 0; }
.faq-chat.fc-robot .fc-chip { padding: 8px 24px 8px 10px; }
.faq-chat .fc-input { font-size: 16px; font-weight: 400; color: #333; }
.faq-chat .fc-now { font-size: 13px; font-weight: 600; letter-spacing: 0; }
.faq-chat .fc-line { font-weight: 600; }
.faq-chat .fc-note { font-size: 11px; color: #999; }

/* 2026-10-14 Lovense と同じ組み方：答え＋区切り線＋質問の候補を1枚の白いカードに／見出しは中央 */
.faq-chat .fc-head { position: relative; justify-content: center; padding: 16px 48px 12px; }
.faq-chat .fc-title { justify-content: center; text-align: center; }
.faq-chat .fc-close { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); }
.faq-chat .fc-msg--card { align-self: stretch; max-width: none; padding: 16px 16px 14px; border-radius: 4px 22px 22px 22px; }
.faq-chat .fc-msg--card .fc-chips { width: auto; max-width: none; margin: 14px 0 0; padding: 14px 0 0; border: 0; border-top: 1px solid #ECEEF2;
  border-radius: 0; background: none; box-shadow: none; align-items: stretch; gap: 8px; animation: none; }
.faq-chat .fc-msg--card .fc-chips__label { display: flex; align-items: center; gap: 7px; margin: 0 0 4px; font-size: 14px; font-weight: 600; line-height: 21px; color: #333; }
.faq-chat .fc-msg--card .fc-chips__label::before { content: ""; width: 16px; height: 16px; flex: none; border-radius: 50% 0 50% 50%; transform: rotate(-45deg);
  background: linear-gradient(135deg, #FF9CBD, #EE3B74); }
.faq-chat .fc-msg--card .fc-chip { width: 100%; max-width: none; padding: 13px 34px 13px 12px; border: 0; border-radius: 12px; background: #F5F7F9;
  font-size: 13px; font-weight: 400; line-height: 1.1; color: #333; text-align: left; }
.faq-chat .fc-msg--card .fc-chip::after { content: ""; position: absolute; right: 14px; top: 50%; width: 7px; height: 7px; margin-top: -4px;
  border: 0; border-right: 2px solid #333; border-top: 2px solid #333; transform: rotate(45deg); }
.faq-chat .fc-msg--card .fc-chip { position: relative; }
.faq-chat .fc-msg--card .fc-line { margin-top: 12px; }

/* 2026-10-14 ユーザー指示：見出しのピンクの雫を外す／LINEボタンは右寄せ */
.faq-chat .fc-msg--card .fc-chips__label::before { content: none; }
.faq-chat .fc-now { margin-left: auto; margin-right: 14px; }

/* 2026-10-14 ユーザー指示：質問のグレーの背景を同じ大きさに。
   長い質問が2行になっても、同じカードの中の候補はいちばん高いものにそろえる（見出しの行だけは除く） */
.faq-chat .fc-msg--card .fc-chips { display: grid; grid-template-columns: 100%; grid-template-rows: auto; grid-auto-rows: 1fr; }
.faq-chat .fc-msg--card .fc-chip { display: flex; align-items: center; min-height: 44px; }
/* どのカードでも同じ高さに（2行の質問も入る 54px にそろえる） */
.faq-chat .fc-msg--card .fc-chip { min-height: 54px; padding-top: 9px; padding-bottom: 9px; line-height: 1.3; }
/* 2026-10-14 ユーザー指示：「よく聞かれる質問」を中央に */
.faq-chat .fc-msg--card .fc-chips__label { justify-content: center; text-align: center; }

/* ── preview_src/chara_img.css ── */

/* 2026-10-14 いただいたキャラクター画像（背景を取り除いたもの）を使う
   チャットの名前の横のアイコン＝頭の部分／開くボタン K＝全身 */
.faq-chat .fc-ava { width: 30px; height: 37px; background: center / contain no-repeat url("../images/faq/chara-head.webp"); filter: drop-shadow(0 1px 2px rgba(70,150,210,.25)); }
.v-k .fcr-head, .v-k .fcr-chara { display: none; }
.v-k .fc-open.fcr-btn { width: 58px; height: 100px; }
.v-k .fc-open.fcr-btn::before { content: ""; position: absolute; left: 4px; top: 0; width: 50px; height: 89px;
  background: center / contain no-repeat url("../images/faq/chara-body.webp"); filter: drop-shadow(0 3px 6px rgba(70,150,210,.3)); animation: fcrBob 3s ease-in-out infinite; }
@keyframes fcrBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.v-k .fcr-pill { top: 80px; }
.v-k .fcr-tip { left: 62px; bottom: 40px; }
.v-k.is-scrolling .fcr-dock { transform: translateX(-38px); }
@media (prefers-reduced-motion: reduce) { .v-k .fc-open.fcr-btn::before { animation: none; } }

/* ── preview_src/dock_right.css ── */
/* 2026-10-14 ユーザー指示：キャラクターを TOP ボタンの下（右下）へ。
   キャラクターは固定の LINE ボタンのすぐ上・右端、TOP ボタンはキャラクターの上へ持ち上げる */
.fc-robot .fcr-dock { left: auto; right: 6px; bottom: calc(var(--floating-h, 60px) + env(safe-area-inset-bottom) + 10px + var(--cta-lift, 0px)); }
.fc-robot .fcr-dock .fcr-tip { left: auto !important; right: calc(100% + 4px); bottom: 42px; }
.fc-robot .fcr-tip__text { border-radius: 12px 12px 4px 12px; }
.fc-robot.is-scrolling .fcr-dock { transform: translateX(55%) !important; }
body:has(#faqChat.fc-robot) .floating-top { bottom: calc(var(--floating-h) + env(safe-area-inset-bottom) + 10px + 108px + var(--cta-lift)); }
@media (min-width: 1024px) {
  .fc-robot .fcr-dock { right: max(16px, calc((100vw - var(--main-left, 0px) - var(--col-w, 480px)) / 2 + 16px)); bottom: 24px; }
  body:has(#faqChat.fc-robot) .floating-top { bottom: 136px; }
}

/* ── preview_src/blink.css ── */

/* 2026-10-14 ユーザー指示：キャラクターをまばたきさせる。
   画像の目（chara_full.png で実測：左 186.5,619／右 446.5,619・92×99px）の上に白いまぶたを重ね、
   3.6 秒に1回だけ一瞬（約0.15秒）閉じた目を見せる。下の線が閉じた目 */
.fcr-lid { display: none; }
.v-k .fc-open.fcr-btn { animation: fcrBob 3s ease-in-out infinite; }
.v-k .fc-open.fcr-btn::before { animation: none; }
.v-k .fcr-lid { display: block; position: absolute; top: 44.3px; width: 8.9px; height: 9.0px; margin-left: -4.4px;
  background: #fff; border-bottom: 1.4px solid #2A2A35; border-radius: 0 0 50% 50% / 0 0 60% 60%; opacity: 0; animation: fcrLid 3.6s infinite; }
.v-k .fcr-lid--l { left: 18.7px; }
.v-k .fcr-lid--r { left: 39.2px; }
@keyframes fcrLid { 0%, 91%, 96%, 100% { opacity: 0; } 92%, 95% { opacity: 1; } }
/* 名前の横のアイコンも同じようにまばたき */
.faq-chat .fc-ava { position: relative; }
.faq-chat .fc-ava::before, .faq-chat .fc-ava::after { content: ""; position: absolute; top: 24.3px; width: 5.0px; height: 4.9px;
  margin-left: -2.5px; background: #fff; border-bottom: 1px solid #2A2A35; border-radius: 0 0 50% 50% / 0 0 60% 60%; opacity: 0; animation: fcrLid 4.2s infinite; }
.faq-chat .fc-ava::before { left: 9.4px; }
.faq-chat .fc-ava::after { left: 20.6px; }
@media (prefers-reduced-motion: reduce) { .v-k .fcr-lid, .faq-chat .fc-ava::before, .faq-chat .fc-ava::after, .v-k .fc-open.fcr-btn { animation: none; } }

/* 2026-10-14 点検：名前の横のアイコンを 30×37 → 38×47（Lovense の約38pxに合わせる）。まぶたの位置も計算し直し */
.faq-chat .fc-ava { width: 38px; height: 47px; }
.faq-chat .fc-ava::before, .faq-chat .fc-ava::after { top: 30.9px; width: 6.0px; height: 6.0px; margin-left: -3.0px; }
.faq-chat .fc-ava::before { left: 11.9px; }
.faq-chat .fc-ava::after { left: 26.1px; }
.faq-chat .fc-who { gap: 7px; margin-bottom: -4px; }
/* 文節のまとまり（faq-chat.js の ph）。言葉の途中で改行しない */
.faq-chat .fc-ph { display: inline-block; }

/* 2026-10-14 点検：候補の文字を1つのまとまりに入れる（文節の span が横に並んで改行しなくなるのを防ぐ）／幅 360px 未満では見出しを少し小さく1行に */
.faq-chat .fc-chip__t { display: block; }
@media (max-width: 359px) { .faq-chat .fc-head { padding-left: 40px; padding-right: 40px; } .faq-chat .fc-title { font-size: 14.5px; } }
@media (max-width: 359px) { .faq-chat .fc-head { padding-left: 34px; padding-right: 34px; } .faq-chat .fc-title { font-size: 14px; white-space: nowrap; } }

/* 分けたくない言葉と最後の数文字（faq-chat.js の soft） */
.faq-chat .fc-nb { white-space: nowrap; }

/* ══════ v17 追加（2026-10-14） ══════ */
/* 試作で使っていた案 A〜J の部品は出さない（案 K だけ） */
.faq-chat .fcr-head, .faq-chat .fcr-chara { display: none; }
/* 候補カード（F3：曖昧なときに選んでもらう）。答えのカードと同じ見た目 */
.faq-chat .fc-msg--card .fc-line { display: block; width: fit-content; margin: 14px auto 0; padding: 9px 16px; font-size: 13px; }
/* フォーカスの見え方（F7）：キーボード操作のときだけ枠を出す */
.faq-chat .fc-title:focus { outline: none; }
.faq-chat .fc-title:focus-visible, .faq-chat .fc-chip:focus-visible, .faq-chat .fc-close:focus-visible,
.faq-chat .fc-send:focus-visible, .faq-chat .fc-line:focus-visible, .faq-chat .fcr-tip__close:focus-visible { outline: 2px solid #EE3B74; outline-offset: 2px; }
.faq-chat .fc-input:focus-visible { outline: none; }
/* 開いている間は後ろのページを動かさない（F7） */
html.fc-lock, html.fc-lock body { overflow: hidden; }
/* ══════ 実機確認の修正（2026-10-14 ユーザー指示） ══════ */
/* ② 見出しの赤い枠：スマホで開くと見出しへフォーカスを移すため、端末によっては枠が出ていた。
      見出しの枠は、キーボードで操作しているとき（.fc-kbd）だけ出す（他の部品のフォーカス表示は変えない） */
.faq-chat .fc-title:focus-visible { outline: none; }
.faq-chat.fc-kbd .fc-title:focus-visible { outline: 2px solid #EE3B74; outline-offset: 2px; }
/* ③ 開くボタン：既存の TOP ボタン（#floatingTop の is-visible）と同じときだけ出す。FV では出さない */
.fc-robot.fc-dock-off .fcr-dock { opacity: 0; visibility: hidden; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) { .fc-robot .fcr-dock { transition: transform .25s linear, opacity .25s linear, visibility .25s linear; } }
/* ① 保存案内を出さないとき：案内が持っていた下の余白（iPhone の下端の安全域を含む）を入力欄に移す */
.fc-robot .fc-panel--nonote .fc-form { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
/* ═══════════════════════════════════════
   2026-10-21 CR-FAQ-DOCK-ALIGN
   PC（1024px以上）で、質問チャットのキャラクターだけが
   TOP ボタン・ハンバーガーの縦列より左にずれている問題。
   原因：PC 用の .fc-open の指定
     @media (min-width:1024px) { .fc-open { left:auto; right: max(16px, calc(… + 84px)) } }
   が残ったまま、ロボット版で position:relative にしたときに
   left と bottom は auto に戻したが **right を戻していなかった**。
   その結果、.fcr-dock の中で right:117.6px ぶん左へずれていた。
   .fcr-dock 自体は既にハンバーガー・TOP と同じ列（+16px）にあるので、
   中のボタンの right を auto に戻すだけで縦列が揃う。
═══════════════════════════════════════ */
@media (min-width: 1024px) {
  .fc-robot .fc-open.fcr-btn { right: auto; }
}