/*!
 * 楽水サポートチャット（rakumizu.jp）
 * Copyright (c) 2026 楽水ウォーターサーバー All rights reserved.
 *
 * 本プログラム、ならびにチャット内に掲載している質問・回答の文章、構成、画像の著作権は
 * 楽水ウォーターサーバー（運営：有限会社プラス1・コミュニケーションズ）に帰属します。
 * 無断での複製・転載・改変・二次利用（他のウェブサイトやサービスでの使用を含む）を固く禁じます。
 */
/* 楽水サポートチャット — すべて #rkm-chat の中に閉じる（サイトの見た目に影響させない） */
#rkm-chat{
  --rkm-accent:#0f6a9c; --rkm-accent-ink:#0b5077; --rkm-accent-wash:#e3eef5;
  --rkm-ink:#10232e; --rkm-ink2:#4a5f6b; --rkm-muted:#7d909b;
  --rkm-surface:#ffffff; --rkm-sunk:#eff4f7; --rkm-line:#dde5ea; --rkm-line2:#c3d2db;
  --rkm-warn:#b5501c; --rkm-warn-wash:#fbeee6; --rkm-warn-line:#e8b79b;
  --rkm-ok:#0d6b52; --rkm-ok-wash:#e2f1ec;
  position:fixed; right:16px; bottom:16px; z-index:99990;
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic","Meiryo",sans-serif;
  font-size:14px; line-height:1.75; color:var(--rkm-ink); text-align:left;
}
#rkm-chat *, #rkm-chat *::before, #rkm-chat *::after{ box-sizing:border-box; }
#rkm-chat button{ font-family:inherit; margin:0; }

/* 起動ボタン */
#rkm-chat .rkm-launch{
  display:flex; align-items:center; gap:8px; margin-left:auto;
  padding:12px 18px; border:0; border-radius:999px; cursor:pointer;
  background:var(--rkm-accent); color:#fff; font-size:14px; font-weight:700; line-height:1.3;
  box-shadow:0 4px 14px rgba(16,35,46,.28);
}
#rkm-chat .rkm-launch:hover{ background:var(--rkm-accent-ink); }
#rkm-chat .rkm-launch svg{ width:20px; height:20px; flex:none; }
#rkm-chat.rkm-open .rkm-launch{ display:none; }

/* パネル */
#rkm-chat .rkm-panel{
  display:none; flex-direction:column;
  width:380px; height:600px; max-height:calc(100vh - 32px);
  background:var(--rkm-surface); border:1px solid var(--rkm-line); border-radius:14px; overflow:hidden;
  box-shadow:0 1px 2px rgba(16,35,46,.06),0 14px 40px -12px rgba(16,35,46,.45);
}
#rkm-chat.rkm-open .rkm-panel{ display:flex; }
#rkm-chat .rkm-head{ display:flex; align-items:center; gap:10px; padding:12px 12px 12px 16px; background:var(--rkm-accent); color:#fff; flex:none; }
#rkm-chat .rkm-dot{ width:9px; height:9px; border-radius:50%; background:#7ee0b8; flex:none; }
#rkm-chat .rkm-title{ font-weight:700; font-size:15px; }
#rkm-chat .rkm-testtag{ font-size:11px; padding:1px 7px; border-radius:4px; background:#fff; color:var(--rkm-warn); font-weight:700; }
#rkm-chat .rkm-close{ margin-left:auto; width:32px; height:32px; border:0; border-radius:8px; background:transparent; color:#fff; font-size:24px; line-height:1; cursor:pointer; }
#rkm-chat .rkm-close:hover{ background:rgba(255,255,255,.18); }

#rkm-chat .rkm-log, #rkm-chat .rkm-opts{ overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
#rkm-chat .rkm-backdrop{ display:none; }
#rkm-chat .rkm-log{ position:relative; flex:1 1 0; min-height:20%; overflow-y:auto; padding:16px 14px 8px; display:flex; flex-direction:column; gap:10px; background:var(--rkm-surface); }
#rkm-chat .rkm-row{ display:flex; }
#rkm-chat .rkm-me{ justify-content:flex-end; }
#rkm-chat .rkm-bub{ max-width:88%; padding:10px 13px; border-radius:14px; white-space:pre-wrap; word-break:break-word; font-size:14px; line-height:1.75; }
#rkm-chat .rkm-bot .rkm-bub{ background:var(--rkm-sunk); border-top-left-radius:4px; }
#rkm-chat .rkm-me .rkm-bub{ background:var(--rkm-accent); color:#fff; border-top-right-radius:4px; font-weight:700; }
#rkm-chat .rkm-bub b{ font-weight:700; }
#rkm-chat .rkm-bub .hl{ color:var(--rkm-accent-ink); font-weight:700; }
#rkm-chat .rkm-bub a{ color:var(--rkm-accent-ink); text-decoration:underline; word-break:break-all; }
#rkm-chat .rkm-bot .rkm-warn{ background:var(--rkm-warn-wash); border:1px solid var(--rkm-warn-line); }
#rkm-chat .rkm-photo-bub{ padding:6px; }
#rkm-chat .rkm-photo{ display:block; width:100%; height:auto; border-radius:9px; }
#rkm-chat .rkm-photo-bub{ display:flex; flex-direction:column; gap:8px; white-space:normal; }
#rkm-chat .rkm-fig{ margin:0; }
#rkm-chat .rkm-pwrap{ position:relative; display:inline-block; max-width:100%; line-height:0; }
#rkm-chat .rkm-pwrap .rkm-photo{ width:auto; max-width:100%; max-height:300px; }
#rkm-chat .rkm-fig{ text-align:center; }
#rkm-chat .rkm-fig figcaption{ text-align:left; }
#rkm-chat .rkm-tall .rkm-pwrap .rkm-photo{ max-height:none; width:100%; }
#rkm-chat .rkm-pwrap .rkm-mark{ box-sizing:content-box; }
#rkm-chat .rkm-mark{ position:absolute; width:16%; padding-top:16%; height:0; transform:translate(-50%,-50%); border:3px solid #e8412c; border-radius:50%; box-shadow:0 0 0 2px rgba(255,255,255,.85); }
#rkm-chat .rkm-fig figcaption{ font-size:12px; color:var(--rkm-ink2); padding:5px 4px 1px; line-height:1.5; }
#rkm-chat .rkm-ph{ border:1.5px dashed var(--rkm-line2); border-radius:8px; background:#fff; padding:12px; text-align:center; font-size:12px; color:var(--rkm-muted); line-height:1.6; }
#rkm-chat .rkm-pn{ display:block; font-weight:700; color:var(--rkm-accent); margin-bottom:2px; }

#rkm-chat .rkm-end{ border-radius:10px; }
#rkm-chat .rkm-k{ display:block; font-size:11px; font-weight:700; letter-spacing:.08em; margin-bottom:4px; }
#rkm-chat .rkm-bot .rkm-end-solved{ background:var(--rkm-ok-wash); }
#rkm-chat .rkm-end-solved .rkm-k{ color:var(--rkm-ok); }
#rkm-chat .rkm-bot .rkm-end-send{ background:var(--rkm-accent-wash); }
#rkm-chat .rkm-end-send .rkm-k{ color:var(--rkm-accent-ink); }
#rkm-chat .rkm-bot .rkm-end-swap{ background:var(--rkm-warn-wash); border:1px solid var(--rkm-warn-line); }
#rkm-chat .rkm-end-swap .rkm-k{ color:var(--rkm-warn); }
#rkm-chat .rkm-end-form .rkm-k{ color:var(--rkm-muted); }

/* 選択肢 */
#rkm-chat .rkm-opts{ flex:0 1 auto; min-height:0; overflow-y:auto; padding:8px 14px 10px; display:flex; flex-direction:column; gap:7px; border-top:1px solid var(--rkm-line); background:var(--rkm-surface); }
#rkm-chat .rkm-opt{
  display:block; width:100%; text-align:left; padding:10px 13px; border-radius:10px;
  border:1.5px solid var(--rkm-line2); background:var(--rkm-surface); color:var(--rkm-ink);
  font-size:14px; line-height:1.5; cursor:pointer; text-decoration:none;
}
#rkm-chat .rkm-opt:hover{ background:var(--rkm-accent-wash); border-color:var(--rkm-accent); }
#rkm-chat .rkm-opt:focus-visible{ outline:2px solid var(--rkm-accent); outline-offset:2px; }
#rkm-chat .rkm-emg{ border-color:var(--rkm-warn); background:var(--rkm-warn-wash); color:var(--rkm-warn); font-weight:700; }
#rkm-chat .rkm-emg:hover{ background:var(--rkm-warn); border-color:var(--rkm-warn); color:#fff; }
#rkm-chat .rkm-sm{ display:block; font-size:12px; font-weight:400; color:var(--rkm-muted); margin-top:2px; }
#rkm-chat .rkm-emg .rkm-sm{ color:inherit; opacity:.85; }
#rkm-chat .rkm-act{ text-align:center; font-weight:700; }
#rkm-chat .rkm-primary{ background:var(--rkm-accent); border-color:var(--rkm-accent); color:#fff; }
#rkm-chat .rkm-primary:hover{ background:var(--rkm-accent-ink); border-color:var(--rkm-accent-ink); color:#fff; }
#rkm-chat .rkm-endnote{ font-size:12px; color:var(--rkm-muted); text-align:center; padding-top:2px; }

#rkm-chat .rkm-copy{ flex:none; padding:0 14px 8px; font-size:10px; line-height:1.4; color:var(--rkm-muted); text-align:center; background:var(--rkm-surface); }
#rkm-chat .rkm-bar{ display:flex; gap:8px; padding:0 14px 6px; flex:none; background:var(--rkm-surface); }
#rkm-chat .rkm-bar button{ flex:1; padding:8px; border-radius:9px; border:1px solid var(--rkm-line2); background:var(--rkm-sunk); color:var(--rkm-ink2); font-size:13px; cursor:pointer; }
#rkm-chat .rkm-bar button:hover{ background:var(--rkm-accent-wash); color:var(--rkm-accent-ink); }
#rkm-chat .rkm-bar button:disabled{ opacity:.4; cursor:default; }

/* スマートフォン：画面下からの全幅表示 */
@media (max-width:600px){
  #rkm-chat{ right:12px; bottom:12px; }
  #rkm-chat.rkm-open{ left:0; right:0; bottom:0; }
  #rkm-chat .rkm-launch{ padding:11px 16px; font-size:13px; }
  #rkm-chat.rkm-open .rkm-backdrop{ display:block; position:fixed; left:0; top:0; right:0; bottom:0; background:rgba(16,35,46,.45); touch-action:none; }
  #rkm-chat .rkm-panel{ position:relative; width:100%; height:88vh; height:88dvh; max-height:none; border-radius:14px 14px 0 0; border-bottom:0; }
}

/* ページ内の「チャットで確認する」（サポートページ用） */
.rkm-inline{ margin:0 0 28px; padding:20px 22px; border-radius:12px; background:#e3eef5; border:1px solid #c3d2db; text-align:center; }
.rkm-inline p{ margin:0; }
.rkm-inline .rkm-inline-lead{ font-size:17px; font-weight:bold; color:#0b5077; line-height:1.6; }
.rkm-inline .rkm-inline-sub{ margin-top:6px; font-size:13px; color:#4a5f6b; line-height:1.7; }
.rkm-inline .rkm-inline-btn{ margin-top:14px; padding:12px 34px; border:0; border-radius:999px; background:#0f6a9c; color:#fff; font-size:15px; font-weight:bold; cursor:pointer; box-shadow:0 3px 10px rgba(16,35,46,.2); }
.rkm-inline .rkm-inline-btn:hover{ background:#0b5077; }
.rkm-inline .rkm-sp-br{ display:none; }
@media (max-width:600px){ .rkm-inline{ padding:16px 14px; } .rkm-inline .rkm-inline-lead{ font-size:15px; } .rkm-inline .rkm-sp-br{ display:inline; } }

/* フォームに書き写したときのお知らせ（フォームのページ側） */
.rkm-filled{ margin:0 0 14px; padding:10px 14px; border-radius:8px; background:#e3eef5; color:#0b5077; font-size:14px; line-height:1.7; font-weight:700; }
