/* ==========================================
   インバウンド相談ウィジェット（フローティングチャット風ヒアリングフォーム）
   widget.js が生成するDOM専用のスタイル。
   衝突防止のためクラス名・カスタムプロパティは全て sa- プレフィックスで統一。
========================================== */
:root{
  --sa-gold:var(--color-gold, #C9A24B);
  --sa-gold-dark:var(--color-gold-dark, #a9842e);
  --sa-navy:var(--color-navy, #1F2937);
  --sa-cream:#fbfaf7;
  --sa-line:#e6ddc4;
  --sa-white:#ffffff;
  --sa-radius:14px;
  --sa-shadow:0 18px 40px rgba(29,41,57,0.18);
}

/* ---- フローティングボタン ---- */
#sa-launcher{
  position:fixed;right:24px;bottom:24px;z-index:9999;
  width:64px;height:64px;border-radius:50%;
  background:linear-gradient(135deg,var(--sa-gold),var(--sa-gold-dark));
  border:none;cursor:pointer;
  box-shadow:var(--sa-shadow);
  display:flex;align-items:center;justify-content:center;
  transition:transform .25s ease;
  font-family:"Noto Sans JP","Hiragino Sans",sans-serif;
}
#sa-launcher:hover{transform:translateY(-3px) scale(1.03);}
#sa-launcher:focus-visible{outline:3px solid var(--sa-navy);outline-offset:3px;}
#sa-launcher svg{width:26px;height:26px;}
.sa-pulse{
  position:absolute;inset:-6px;border-radius:50%;
  border:2px solid var(--sa-gold);
  animation:sa-pulse 2.6s ease-out infinite;
}
@keyframes sa-pulse{
  0%{transform:scale(.9);opacity:.6;}
  100%{transform:scale(1.35);opacity:0;}
}
@media (prefers-reduced-motion:reduce){
  .sa-pulse{animation:none;display:none;}
  #sa-launcher:hover{transform:none;}
}

/* ---- パネル本体 ---- */
#sa-panel{
  position:fixed;right:24px;bottom:100px;z-index:9999;
  width:360px;max-width:calc(100vw - 32px);
  max-height:min(560px,calc(100vh - 140px));
  background:var(--sa-white);
  border-radius:18px;
  box-shadow:var(--sa-shadow);
  overflow:hidden;
  display:none;
  flex-direction:column;
  border:1px solid var(--sa-line);
  font-family:"Noto Sans JP","Hiragino Sans",sans-serif;
  color:#2b2b2b;
}
#sa-panel.open{display:flex;}

/* モバイル追従CTAバー（common.css .sticky-cta-bar、高さ60px）と重ならないよう引き上げる */
@media screen and (max-width: 767px){
  #sa-launcher{bottom:84px;}
  #sa-panel{bottom:160px;max-height:min(560px,calc(100vh - 200px));}
}

/* 低〜中ビューポート端末（iPhone SE〜iPhone 14等、高さ860px以下）向けの既存バグ対応：
   ヒーローのCTA・補足テキストと追従CTAバーの間隔が64pxのボタンを収めるには足りないため、
   タップ領域の下限である44pxまで縮小し、その隙間の中央付近に再配置する。
   OSのテキスト拡大設定や、ヒーロー内バナー文言の折り返し行数が増えた場合でも、
   補足テキストとの重なりが再発しないよう、844px（iPhone 12/13/14相当）も含めて適用する
   （max-height:932px相当の端末は元々余裕があるため対象外のまま）。
   全ページ共通コンポーネントのため、影響範囲はページ限定にしない。 */
@media screen and (max-width: 767px) and (max-height: 860px){
  #sa-launcher{width:44px;height:44px;bottom:60px;}
  #sa-launcher svg{width:20px;height:20px;}
  #sa-panel{bottom:112px;}
}

.sa-header{
  background:var(--sa-navy);
  color:var(--sa-white);
  padding:18px 18px 16px;
  display:flex;align-items:center;gap:12px;
}
.sa-mark{
  width:34px;height:34px;flex:none;
  display:flex;align-items:center;justify-content:center;
  border:1.5px solid var(--sa-gold);border-radius:50%;
}
.sa-mark svg{width:16px;height:16px;}
.sa-header-text{flex:1;min-width:0;}
.sa-header-text .name{
  font-family:"Zen Kaku Gothic New",sans-serif;
  font-weight:700;font-size:14.5px;letter-spacing:.02em;
}
.sa-header-text .role{font-size:11.5px;color:#c9d2de;margin-top:2px;}
.sa-close{
  background:none;border:none;color:#c9d2de;cursor:pointer;
  width:28px;height:28px;border-radius:8px;font-size:18px;line-height:1;
}
.sa-close:hover{background:rgba(255,255,255,0.08);color:var(--sa-white);}

.sa-progress{display:flex;gap:5px;padding:12px 18px 0;}
.sa-progress i{
  flex:1;height:3px;border-radius:2px;background:var(--sa-line);
  transition:background .2s ease;
}
.sa-progress i.done{background:var(--sa-gold);}

.sa-body{
  flex:1;overflow-y:auto;padding:16px 18px 6px;
}
.sa-bubble{
  background:var(--sa-cream);
  border:1px solid var(--sa-line);
  border-radius:12px 12px 12px 4px;
  padding:12px 14px;
  font-size:13.5px;line-height:1.8;
  margin-bottom:14px;
  max-width:88%;
}
.sa-question{
  font-family:"Zen Kaku Gothic New",sans-serif;
  font-weight:700;font-size:14px;margin:0 0 10px;color:var(--sa-navy);
}
.sa-options{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px;}
.sa-opt{
  border:1.4px solid var(--sa-line);
  background:var(--sa-white);
  padding:9px 13px;border-radius:999px;
  font-size:12.8px;cursor:pointer;color:#2b2b2b;
  transition:.15s ease;
}
.sa-opt:hover{border-color:var(--sa-gold);}
.sa-opt.selected{background:var(--sa-navy);border-color:var(--sa-navy);color:var(--sa-white);}
.sa-opt:focus-visible{outline:2.5px solid var(--sa-gold-dark);outline-offset:2px;}

.sa-footer{padding:12px 18px 18px;border-top:1px solid var(--sa-line);}
.sa-btn-row{display:flex;gap:8px;}
.sa-btn{
  flex:1;padding:11px 14px;border-radius:9px;border:none;
  font-size:13.5px;font-weight:700;cursor:pointer;
  font-family:"Zen Kaku Gothic New",sans-serif;
  transition:.15s ease;
}
.sa-btn-primary{background:var(--sa-gold);color:var(--sa-navy);}
/* hover: --sa-gold-dark×--sa-navy は4.21:1でWCAG AA（4.5:1）未達だったため、
   サイト既定のホバー挙動（ネイビー地×白文字＝約14.7:1）に揃える */
.sa-btn-primary:hover{background:var(--sa-navy);color:var(--sa-white);}
.sa-btn-primary:disabled{background:#e9e2cd;color:#a89f89;cursor:not-allowed;}
.sa-btn-ghost{background:none;color:#777;border:1.4px solid var(--sa-line);flex:none;width:80px;}
.sa-btn-ghost:hover{border-color:#bbb;}

.sa-done .sa-check{
  width:44px;height:44px;border-radius:50%;
  background:var(--sa-navy);color:var(--sa-gold);
  display:flex;align-items:center;justify-content:center;
  margin:6px auto 14px;font-size:20px;
}
.sa-done h3{
  font-family:"Zen Kaku Gothic New",sans-serif;
  text-align:center;font-size:15px;color:var(--sa-navy);margin:0 0 6px;
}
.sa-done p{text-align:center;font-size:12.8px;color:#666;line-height:1.8;margin:0 0 16px;}