/* =========================================================
   style.css（全文）
   - フッター（株式会社スズキモータース）を常にページ最下部へ
   - チャットのやり取り欄（chat-body）を広げる
   - 選択肢（ボタン）を1つずつ表示するアニメ付き
   - ✅ 上部ボタン（topic-cell）のホバーを送信ボタンと同じに統一
   - ✅ 表示文字：游ゴシック優先 / 黒→ダークグレー
   ========================================================= */

:root{
  --green: #4CAF50;
  --green-dark: #43A047;

  /* ✅ 黒→ダークグレー */
  --text: #333;
  --muted: #666;

  --bg: #ffffff;
  --bg-soft: #F5FFF5;
  --line: #DDE6DD;

  --shadow: 0 2px 10px rgba(0,0,0,.10);
  --radius: 12px;

  --frame-max: 980px;
}

*{ box-sizing:border-box; }
html, body{ height:100%; }

/* ✅ フッターを最下部にするためのレイアウト */
body{
  margin:0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;

  /* ✅ 游ゴシック優先 */
  font-family:
    "游ゴシック",
    "Yu Gothic",
    "Yu Gothic UI",
    "YuGothic",
    "Hiragino Kaku Gothic ProN",
    "Noto Sans JP",
    "Meiryo",
    system-ui,
    -apple-system,
    "Segoe UI",
    sans-serif;

  color: var(--text);
  background: var(--bg);
}

/* ✅ 入力欄・ボタンも游ゴシックへ統一 */
button, input, textarea, select{
  font: inherit;
  color: inherit;
}

/* mainを伸ばして、フッターを押し下げる */
main.container{
  flex: 1;
}

.container{
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
  padding: 24px 0 40px;
}

.page-title{
  text-align:center;
  font-size: clamp(18px, 2.4vw, 24px);
  font-weight: 900;
  margin: 8px 0 18px;
  padding-bottom: 14px;
  border-bottom: none; /* ✅ 下線は付けない */
}


/* =========================================================
   ✅ ブランド（上部タイトル）: Suzuki-Motors
   - Impact（太め）/ 1文字ずつフェード / グラデ＋シャイン＋グロー
   - クリックで https://www.dopnet.jp/ へ遷移
   - ✅ 下線（underline）は付けない
   ========================================================= */
.brand-link{
  display: inline-block;
  text-decoration: none;
  padding: 2px 10px 6px;
  border-radius: 999px;
  position: relative;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  animation: brandFloat 6s ease-in-out infinite;
  will-change: transform;
}

/* ✅ brand-link をボタン等に付けても見た目が崩れないようにリセット */
button.brand-link{
  border: 0;
  background: transparent;
  padding: 2px 10px 6px; /* brand-link と同じ */
}
.brand-link:active{ transform: scale(.98); }
.brand-link:focus-visible{
  box-shadow: 0 0 0 4px rgba(76,175,80,.22);
}

.brand-text{
  position: relative;
  display: inline-block;
  letter-spacing: .6px;
  line-height: 1.15;
  z-index: 0;
  isolation: isolate;

  /* ✅ Impact系（太め） */
  font-family:
    Impact,
    Haettenschweiler,
    "Arial Black",
    "Franklin Gothic Heavy",
    "Oswald",
    system-ui,
    sans-serif;
  font-weight: 900;
}

/* 1文字ずつ（フェード表示） */
.brand-letter{
  display: inline-block;
  opacity: 0;
  transform: translateY(6px);
  will-change: opacity, transform;

  /* fallback（clip非対応時） */
  color: var(--green);

  animation:
    brandLetterIn .65s cubic-bezier(.2,.8,.2,1) forwards,
    brandGradient 7s linear infinite;
  animation-delay: var(--d), 0s;
}

@supports (-webkit-background-clip: text){
  .brand-letter{
    background: linear-gradient(90deg,
      rgba(76,175,80,1) 0%,
      rgba(146,230,160,1) 45%,
      rgba(67,160,71,1) 70%,
      rgba(76,175,80,1) 100%);
    background-size: 240% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* グロー（背面のぼかし） */
.brand-text::before{
  content: attr(data-text);
  position: absolute;
  inset: 0;
  z-index: -1;
  color: rgba(76,175,80,.55);
  filter: blur(10px);
  opacity: .6;
  transform: translateZ(0);
  animation: brandPulse 2.8s ease-in-out infinite;
  pointer-events: none;
}

/* シャイン（光が流れる） */
.brand-text::after{
  content: "";
  position: absolute;
  inset: -6px -18px;
  background: linear-gradient(120deg,
    transparent 0%,
    rgba(255,255,255,.80) 45%,
    transparent 60%);
  transform: translateX(-120%) skewX(-20deg);
  mix-blend-mode: screen;
  opacity: .85;
  animation: brandShine 3.6s ease-in-out infinite;
  pointer-events: none;
}

/* hoverできる端末だけ（スマホで暴れない） */
@media (hover:hover) and (pointer:fine){
  .brand-link:hover{
    transform: translateY(-2px);
  }
  .brand-text{
    filter: drop-shadow(0 10px 24px rgba(76,175,80,.18));
  }
}

/* brand animations */
@keyframes brandLetterIn{
  from{ opacity: 0; transform: translateY(8px) scale(.98); }
  to  { opacity: 1; transform: translateY(0)   scale(1); }
}
@keyframes brandGradient{
  0%{ background-position: 0% 50%; }
  100%{ background-position: 100% 50%; }
}
@keyframes brandShine{
  0%{ transform: translateX(-120%) skewX(-20deg); opacity: .0; }
  15%{ opacity: .85; }
  55%{ opacity: .85; }
  100%{ transform: translateX(120%) skewX(-20deg); opacity: .0; }
}
@keyframes brandPulse{
  0%, 100%{ opacity: .55; filter: blur(10px); }
  50%{ opacity: .85; filter: blur(12px); }
}
@keyframes brandFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-3px); }
}



.notice-simple{
  width: 100%;
  max-width: var(--frame-max);
  margin: 0 auto 18px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.8;
}

/* =========================================================
   上部：お問い合わせの種類
   ========================================================= */
.topic-wrap{
  width: 100%;
  max-width: var(--frame-max);
  margin: 0 auto 16px;

  border: 2px solid var(--green);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
  padding: 12px;
}

.topic-bar{
  display:flex;
  width: 100%;
  border-radius: 10px;
  overflow:hidden;
  min-height: 54px;
}

/* ✅ ここが変更点：topic-cell自体に背景色を持たせる */
.topic-cell{
  flex: 1;
  display:flex;
  align-items:center;
  justify-content:center;
  color: #fff;
  font-weight: 800;
  padding: 14px 10px;
  text-align:center;
  border-right: 2px dashed rgba(255,255,255,.55);
  position: relative;
  overflow: hidden;

  cursor: pointer;
  user-select: none;

  /* 送信ボタンと同じ「色が変わるだけ」の動きにする */
  background: var(--green);
  transition: background .18s ease;
}
.topic-cell:last-child{ border-right: none; }

/* ✅ hoverできる端末だけに適用（スマホで暴れない） */
@media (hover: hover) and (pointer: fine){
  .topic-cell:hover{
    background: var(--green-dark); /* ✅ 送信ボタンと同じ */
  }
}

.topic-cell:focus{
  outline: 3px solid rgba(255,255,255,.55);
  outline-offset: -3px;
}

.topic-cell.is-selected{
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.35);
}

.topic-note{
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 2px dashed rgba(76,175,80,.35);
  text-align:center;
  color: var(--muted);
  font-size: 12px;
}

/* =========================================================
   ✅ スマホ：会話が始まったら上部（タイトル/注意/種類ボタン）を折りたたみ
   - チャット欄のスペースを確保し、誤タップも防止
   - JSで body に .chat-started を付与します
   ========================================================= */
@media (max-width: 820px){
  .page-title,
  .notice-simple,
  .topic-wrap{
    overflow: hidden;
    transition:
      max-height .28s ease,
      margin .28s ease,
      padding .28s ease,
      opacity .22s ease,
      transform .22s ease,
      border-width .28s ease;
    will-change: max-height, margin, padding, opacity, transform;
  }

  /* 展開時の目安（max-heightはアニメ用） */
  .page-title{ max-height: 90px; }
  .notice-simple{ max-height: 120px; }
  .topic-wrap{ max-height: 1000px; }

  body.chat-started .page-title{
    max-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
  }
  body.chat-started .notice-simple{
    max-height: 0;
    margin: 0 auto;
    padding: 0;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
  }
  body.chat-started .topic-wrap{
    max-height: 0;
    margin: 0 auto;
    padding: 0;
    border: 0;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
  }

  /* ✅ 折りたたみ中はチャット欄を広げる */
  body.chat-started .chat-body{
    height: clamp(520px, 78vh, 920px);
  }

  /* ✅ 上部メニューを再表示するためのトグル */
  .chat-toolbar{ display:none; }
  body.chat-started .chat-toolbar{
    display:flex;
    justify-content:flex-end;
    padding: 8px 10px;
    border-bottom: 2px dashed rgba(76,175,80,.35);
    background:#fff;
  }
  .btn-top-toggle{
    appearance:none;
    border: 1px solid rgba(76,175,80,.55);
    background:#fff;
    color: var(--green-dark);
    font-weight: 800;
    padding: 8px 12px;
    border-radius: 999px;
    cursor:pointer;
  }
  .btn-top-toggle:active{ transform: scale(.98); }
}

/* =========================================================
   チャット
   ========================================================= */
.chat-card{
  width: 100%;
  max-width: var(--frame-max);
  margin: 0 auto;

  border: 2px solid var(--green);
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow);
  background: #fff;

  display: flex;
  flex-direction: column;
}

/* ✅ やり取り欄を広げる（大きめ） */
.chat-body{
  height: clamp(420px, 60vh, 760px);

  overflow:auto;
  padding: 14px;
  background: var(--bg-soft);

  border-bottom: 2px dashed rgba(76,175,80,.35);
  outline: 2px dashed rgba(76,175,80,.28);
  outline-offset: -10px;
}

/* メッセージ */
.msg{ display:flex; margin-bottom: 10px; }
.msg--system{ justify-content:flex-start; }
.msg--user{ justify-content:flex-end; }

.msg--pop{
  animation: popIn .18s ease both;
}
@keyframes popIn{
  from{ opacity: 0; transform: translateY(6px); }
  to  { opacity: 1; transform: translateY(0); }
}

.msg__bubble{
  max-width: 80%;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.7;
  border: 1px solid var(--line);
  background: #fff;
  white-space: pre-wrap;
}

.msg--user .msg__bubble{
  border-color: rgba(76,175,80,.45);
  background: rgba(76,175,80,.12);
}

/* ✅ 納期目安の強調表示（約●日間） */
.leadtime-highlight{
  color: #d32f2f;
  font-weight: 800;
}

/* タイピング中：カーソル点滅 */
.msg__bubble.typing::after{
  content: "▍";
  display: inline-block;
  margin-left: 2px;
  color: rgba(67,160,71,.95);
  animation: blinkCursor 1s step-end infinite;
}
@keyframes blinkCursor{
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* =========================================================
   ✅ 待機中：グラデーションスピナー + 「・・・」(順番に薄くなる)
   ========================================================= */
.msg__bubble.waiting{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* 左：回転リング（グラデーション） */
.wait-orb{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  flex: 0 0 auto;
  will-change: transform;

  /* フォールバック（conic-gradient非対応ブラウザ向け） */
  border: 2px solid rgba(76,175,80,.22);
  border-top-color: rgba(67,160,71,.95);

  animation: waitSpin .9s linear infinite;
}

/* conic-gradient 対応ブラウザは“グラデーションリング”に進化 */
@supports (background: conic-gradient(from 0deg, #000, #fff)){
  .wait-orb{
    border: none;
    background: conic-gradient(
      from 0deg,
      rgba(67,160,71,1) 0deg,
      rgba(76,175,80,.75) 55deg,
      rgba(76,175,80,.28) 140deg,
      rgba(67,160,71,0) 235deg,
      rgba(67,160,71,1) 360deg
    );

    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.6px), #000 calc(100% - 2.6px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 2.6px), #000 calc(100% - 2.6px));

    filter: drop-shadow(0 0 10px rgba(76,175,80,.22));
  }
}

@keyframes waitSpin{
  to{ transform: rotate(360deg); }
}

/* 右：テキスト + サブ */
.wait-stack{
  display: inline-flex;
  flex-direction: column;
  min-width: 0;
}
.wait-text{
  font-weight: 800;
}
.wait-sub{
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

/* 「・・・」＝1つずつ薄く→戻る（順番に） */
.wait-ellipsis{
  display: inline-flex;
  margin-left: 6px;
}

.wait-ellipsis span{
  display: inline-block;
  font-weight: 900;
  line-height: 1;

  /* フォールバック */
  color: rgba(67,160,71,.95);

  /* JSフォールバック時も滑らかに */
  transition: opacity .18s ease;

  animation: waitEllip 1.2s ease-in-out infinite;
}
.wait-ellipsis span:nth-child(2){ animation-delay: .2s; }
.wait-ellipsis span:nth-child(3){ animation-delay: .4s; }

/* 文字にも“薄いグラデーション”を入れる（対応ブラウザ向け） */
@supports (-webkit-background-clip: text){
  .wait-ellipsis span{
    background: linear-gradient(180deg, rgba(67,160,71,1), rgba(76,175,80,.35));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

@keyframes waitEllip{
  0%, 100% { opacity: 1; }
  50%      { opacity: .18; }
}

/* 選択肢用のバブルは余白を少し広げる */
.bubble-choices{
  padding: 12px;
}

/* ✅ 選択肢ブロックの説明文 */
.choice-text{
  margin: 0 0 10px;
  font-weight: 800;
}

/* =========================================================
   ✅ チャット内：選択肢（1つずつ表示）
   ========================================================= */
.quick-replies{
  display: grid;
  gap: 10px;
}

.quick-reply{
  font: inherit;
  width: 100%;
  text-align: center;
  cursor: pointer;

  border: 2px solid var(--green);
  background: #fff;
  color: var(--text);
  border-radius: 10px;
  padding: 12px 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,.10);

  opacity: 0;
  transform: translateY(10px);
  will-change: transform, opacity;
}

.quick-reply.is-in{
  opacity: 1;
  transform: translateY(0);
  transition: opacity .25s ease, transform .25s ease, background .18s ease, color .18s ease;
}

.quick-reply:hover{
  background: rgba(76,175,80,.10);
}

.quick-reply.is-selected{
  background: var(--green);
  color: #fff;
  box-shadow: 0 10px 22px rgba(76,175,80,.20);
}

/* 入力エリア（白枠を見せる） */
.chat-form{
  display:flex;
  gap: 10px;
  padding: 12px;
  align-items:center;
  background: var(--bg-soft);
}

.chat-input{
  flex: 1;
  height: 44px;
  border: 2px solid #fff;
  background: #fff;
  border-radius: 8px;
  padding: 0 10px;
  outline:none;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}

.chat-input:focus{
  border-color: #fff;
  box-shadow:
    0 0 0 4px rgba(76,175,80,.22),
    0 2px 10px rgba(0,0,0,.12);
}

.btn-send{
  height: 44px;
  padding: 0 18px;
  border: none;
  border-radius: 8px;
  background: var(--green);
  color:#fff;
  font-weight: 800;
  cursor:pointer;
  box-shadow: var(--shadow);
  transition: background .18s ease; /* ←ここに合わせた */
}
.btn-send:hover{ background: var(--green-dark); }

/* =========================================================
   ✅ メイン入力欄ロック中（フォーム表示中の誤操作防止）
   - JS側で .chat-form.is-disabled を付与します
   ========================================================= */
.chat-form.is-disabled{
  opacity: .55;
  pointer-events: none; /* ✅ 誤タップ防止 */
}
.chat-input:disabled{
  cursor: not-allowed;
  background: #f3f3f3;
}
.chat-form .btn-send:disabled{
  cursor: not-allowed;
  filter: saturate(.75);
}


/* =========================================================
   ✅ フッター：常に最下部
   ========================================================= */
.footer{
  margin-top: auto;
  background: #333;
  padding: 0;
}

.footer-link{
  display:block;
  width: 100%;
  text-align:center;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  padding: 18px 12px;
  font-size: 12px;
  line-height: 1.7;
}
.footer-link:hover{
  background: #2b2b2b;
  text-decoration: underline;
}

/* スクリーンリーダー用 */
.sr-only{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}

/* 表示アニメ（控えめ） */
.reveal{
  opacity:0;
  transform: translateY(10px);
  transition: opacity .5s ease, transform .5s ease;
}
.reveal.is-visible{
  opacity:1;
  transform: translateY(0);
}

/* スマホ：チャット欄も広めに（ただし画面が小さいので抑える） */
@media (max-width: 640px){
  .topic-bar{ flex-direction: column; }
  .topic-cell{
    border-right: none;
    border-bottom: 2px dashed rgba(255,255,255,.55);
  }
  .topic-cell:last-child{ border-bottom: none; }

  .chat-body{
    height: clamp(300px, 50vh, 520px);
  }
}

/* 動きが苦手な人向け（CSS側のアニメ停止） */
@media (prefers-reduced-motion: reduce){
  .reveal{ transition: none; }

  /* ✅ ブランドの動きも停止 */
  .brand-link{ animation: none; }
  .brand-letter{
    animation: none;
    opacity: 1;
    transform: none;
  }
  .brand-text::before{ animation: none; }
  .brand-text::after{ animation: none; opacity: 0; }

  .msg--pop{ animation: none; }
  .msg__bubble.typing::after{ animation: none; }

  .quick-reply{
    opacity: 1;
    transform: none;
    transition: none;
  }

  .topic-cell{
    transition: none;
  }

  .btn-send{
    transition: none;
  }
}
/* =========================================================
   ✅ 在庫・納期確認フォーム（チャット内）
   ========================================================= */
.bubble-stock-form{
  padding: 8px;
}

.stock-form{
  display: grid;
  gap: 8px;
}

.stock-row{
  display: grid;
  gap: 4px;
}

.stock-label{
  font-weight: 800;
  font-size: 13px;
}

.stock-input{
  width: 100%;
  height: 44px;
  border: 2px solid #fff;
  background: #fff;
  border-radius: 8px;
  padding: 0 10px;
  outline: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}

/* ✅ 品番欄：確認中…（右端） */
.stock-input-wrap{
  position: relative;
  width: 100%;
}

.stock-input-wrap > .stock-input{
  padding-right: 110px; /* 「確認中・・・」分 */
}

.stock-checking{
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;

  font-size: 12px;
  font-weight: 800;
  color: var(--muted);

  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
}

.stock-checking.is-on{ opacity: 1; }

/* wait-ellipsis はチャットのAPI待機表示と同じアニメーションを流用 */
.stock-checking .wait-ellipsis{ margin-left: 4px; }


.stock-input:focus{
  border-color: #fff;
  outline: 2px solid rgba(76,175,80,.35);
  outline-offset: 2px;
}

.stock-actions{
  display: grid;
  gap: 10px;
  margin-top: 8px;
}

.stock-send{
  width: 100%;
  min-width: 0;
}

.stock-note{
  margin-top: 2px;
  font-size: 12px;
  font-weight: 700;
  color: #b71c1c;
  min-height: 1.2em;
}

.stock-done{
  font-weight: 900;
  line-height: 1.6;
}


/* =========================================================
   ✅ 決済方法変更フォーム（ラジオボタン）
   ========================================================= */
.pay-method-box{
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #fff;
  border: 2px solid rgba(0,0,0,.12);
  box-shadow: 0 2px 8px rgba(0,0,0,.08);

  opacity: 0;
  transform: translateY(6px);
  transition: opacity .20s ease, transform .20s ease;
}
.pay-method-box.is-in{
  opacity: 1;
  transform: translateY(0);
}

.pay-method-note{
  font-weight: 900;
  font-size: 13px;
  margin: 0 0 10px;
  color: #b71c1c;
}

.pay-radios{
  display: grid;
  gap: 8px;
}

.pay-radio{
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 900;
}

.pay-radio input{
  width: 18px;
  height: 18px;
  accent-color: var(--green);
}



/* =========================================================
   ✅ 取付説明書：品番選択フォーム
   ========================================================= */
.manual-box{
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #fff;
  border: 2px solid rgba(0,0,0,.12);
  box-shadow: 0 2px 8px rgba(0,0,0,.08);

  opacity: 0;
  transform: translateY(6px);
  transition: opacity .20s ease, transform .20s ease;
}
.manual-box.is-in{
  opacity: 1;
  transform: translateY(0);
}

.manual-part-list{
  display: grid;
  gap: 10px;
  margin: 6px 0 10px;
}

.manual-part-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 2px solid rgba(0,0,0,.12);
  background: #fff;
  cursor: pointer;
}
.manual-part-row.is-checked{
  border-color: rgba(46, 125, 50, .6);
  box-shadow: 0 2px 10px rgba(46,125,50,.12);
}

.manual-part-no{
  font-weight: 900;
  font-size: 13px;
  line-height: 1.25;
  word-break: break-all;
}

.manual-part-row input[type="checkbox"]{
  width: 18px;
  height: 18px;
  accent-color: var(--green);
  flex: 0 0 auto;
}

/* 動きが苦手な人向け */
@media (prefers-reduced-motion: reduce){
  .pay-method-box,
  .manual-box{
    transition: none;
    transform: none;
    opacity: 1;
  }
}

/* =========================================================
   ✅ 在庫・納期確認フォーム：送信ボタン調整
   - 横幅を揃えない（自動幅）
   - 文字を中央に
   ========================================================= */
.stock-actions{
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}
.stock-send{
  width: auto;
  min-width: 120px;
}

/* ボタン内の文字を縦横中央に（通常の送信ボタンも含む） */
.btn-send{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
/* =========================================================
   ✅ ボタン文字を中央に（全体）
   ========================================================= */
.btn-send{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* =========================================================
   ✅ 在庫・納期確認フォーム：送信ボタン（幅は揃えない）
   ========================================================= */
.stock-actions{
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}
.stock-send{
  width: auto;
  min-width: 120px;
}
/* ✅ メーカー選択（プルダウン） */
.stock-select{
  -webkit-appearance: auto;
  appearance: auto;
}


/* ✅ 商品ID（変更不可） */
.stock-input[readonly]{background:#f6f6f6;}
/* =========================================================
   ✅ 追加: 品番欄まわりの余白が大きくならないように調整
   - スピナー(span)が折り返して空行を作るケースを防止
   ========================================================= */
.stock-row{
  gap: 6px !important;
}
.stock-label{
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.4;
}
.stock-input-wrap{
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}
.stock-input{
  display: block !important;
  margin: 0 !important;
}
.stock-checking{
  position: absolute !important;
}



/* =========================================================
   ✅ 同一商品IDで複数品番がある場合：右側ふきだし（タイプ選択）
   ========================================================= */
.stock-layout{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

/* 右側は必要な時だけ表示 */
.stock-layout-right{ display: none; }
.stock-layout.has-multi{
  grid-template-columns: minmax(0, 1fr) 280px;
}
.stock-layout.has-multi .stock-layout-right{ display: block; }

@media (max-width: 860px){
  .stock-layout.has-multi{
    grid-template-columns: 1fr;
  }
  .stock-layout-right{
    display: block;
  }
}

/* ふきだし本体 */
.stock-multi-bubble{
  position: relative;
  padding: 10px 12px;
  border-radius: 12px;
  background: #fff;
  border: 2px solid rgba(0,0,0,.78);
  box-shadow: 0 8px 18px rgba(0,0,0,.08);

  opacity: 0;
  transform: translateY(6px) scale(.985);
  transition: opacity .18s ease, transform .18s ease;
  transform-origin: left top;
}

.stock-multi-bubble.is-in{
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* 左向きの矢印（吹き出し） */
.stock-multi-bubble::before{
  content: "";
  position: absolute;
  left: -10px;
  top: 28px;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid rgba(0,0,0,.78);
}
.stock-multi-bubble::after{
  content: "";
  position: absolute;
  left: -8px;
  top: 29px;
  width: 0;
  height: 0;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-right: 9px solid #fff;
}

/* スマホでは矢印を消す（レイアウトが縦になるため） */
@media (max-width: 860px){
  .stock-multi-bubble::before,
  .stock-multi-bubble::after{
    display: none;
  }
}

.stock-multi-title{
  font-weight: 900;
  font-size: 13px;
  margin: 0 0 8px;
}

.stock-multi-list{
  display: grid;
  gap: 8px;
}

.stock-multi-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  opacity: 0;
  transform: translateY(6px);
  transition: opacity .20s ease, transform .20s ease;
}

.stock-multi-row.is-in{
  opacity: 1;
  transform: translateY(0);
}

.stock-multi-partno{
  font-weight: 800;
  font-size: 13px;
  line-height: 1.2;
  word-break: break-all;
}

.stock-multi-btn{
  border: 2px solid var(--green);
  background: #fff;
  color: var(--text);
  border-radius: 999px;
  padding: 6px 10px;
  font-weight: 900;
  cursor: pointer;
  flex: 0 0 auto;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}

@media (hover: hover) and (pointer: fine){
  .stock-multi-btn:hover{
    background: rgba(76,175,80,.10);
  }
}

.stock-multi-btn:active{
  transform: scale(.98);
}

.stock-multi-btn.is-selected{
  background: var(--green);
  color: #fff;
}

/* 動きが苦手な人向け */
@media (prefers-reduced-motion: reduce){
  .stock-multi-bubble,
  .stock-multi-row,
  .stock-multi-btn{
    transition: none;
  }
}



/* =========================================================
   ✅ 追加修正：品番欄まわりの不自然な余白を解消
   - grid/flex環境によっては空白テキストノードが「行」として扱われるため
   - stock-form/row を通常のブロックフローに固定する
   ========================================================= */
.bubble-stock-form .stock-form{
  display: block !important;
}
.bubble-stock-form .stock-row{
  display: block !important;
  margin: 0 0 8px !important;
}
.bubble-stock-form .stock-row:last-child{
  margin-bottom: 0 !important;
}
.bubble-stock-form .stock-label{
  display: block !important;
  margin: 0 0 3px !important;
}
.bubble-stock-form .stock-input-wrap{
  display: block !important;
}


/* =========================================================
   ✅ 在庫・納期フォーム：コンパクト調整（タイトル以外を詰める）
   ========================================================= */
.bubble-stock-form .stock-input{
  height: 42px;
}


/* =========================================================
   ✅ 在庫・納期フォーム：不自然な余白（改行/インデント）を防ぐ
   - .msg__bubble は pre-wrap なのでフォーム内の改行が空白として出ることがある
   - フォームだけ normal に戻す
   ========================================================= */
.msg__bubble.bubble-stock-form{
  white-space: normal;
  line-height: 1.45;
}
.msg__bubble.bubble-stock-form *{
  white-space: normal;
}

/* =========================================================
   ✅ 「確認中」：枠と同じ緑で、優しく点滅
   ========================================================= */
.stock-checking-text{
  color: var(--green);
  animation: stockCheckingPulse 1.6s ease-in-out infinite;
}
@keyframes stockCheckingPulse{
  0%,100%{ opacity: .55; }
  50%{ opacity: 1; }
}

/* =========================================================
   ✅ 確認中 / ふきだし表示中：送信ボタンを押せない（見た目も分かるように）
   ========================================================= */
.stock-send:disabled,
.stock-send.is-disabled{
  opacity: .55;
  cursor: not-allowed;
  filter: saturate(.75);
}

/* =========================================================
   ✅ スマホで「少しだけ上下にスクロールできてしまう」問題の対策
   - 画面全体は固定（ページ自体はスクロールしない）
   - スクロールはチャット欄（.chat-body）だけに限定
   - 100vhの誤差対策として 100svh / 100dvh を併用
   ========================================================= */
@media (max-width: 820px){
  html, body{
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
  }

  body{
    min-height: 0;
    height: 100vh;   /* fallback */
    height: 100svh;  /* small viewport */
    height: 100dvh;  /* dynamic viewport */
  }

  /* main（.container）を縦Flex化して、チャット枠が残り高さにフィット */
  main.container{
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;

    /* ✅ 画面は固定でも、指の縦スワイプは許可（JSでチャット欄スクロールに転送） */
    touch-action: pan-y;

    /* 既定の padding: 24px 0 40px; が溢れやすいので少し詰める */
    padding: 14px 0 14px;
  }

  /* ✅ 上部（タイトル/注意/メニュー）はスクロール領域として扱う
     - 「メニューを表示」後に上部が見切れても、ここをスライドして最後まで見られる */
  .top-scroll-area{
    flex: 0 1 auto;
    min-height: 0;

    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;

    /* 触ってスクロールできるように */
    touch-action: pan-y;
  }

  /* ✅ 折りたたみ中は操作を受けない（誤タップ防止） */
  body.chat-started .top-scroll-area{
    overflow: hidden;
    pointer-events: none;
  }

  /* チャット枠は伸縮OKに */
  .chat-card{
    flex: 1 1 auto;
    min-height: 0;
  }

  /* チャット本文だけスクロール（ページは動かさない） */
  .chat-body{
    flex: 1 1 auto;
    min-height: 0;

    height: auto !important;
    max-height: none !important;

    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* 折りたたみ時の vh 指定も無効化（溢れの原因になるため） */
  body.chat-started .chat-body{
    height: auto !important;
  }
}


/* =========================================================
   HP型 初期お問い合わせ画面
   - 添付 Q_A.html のカラー・余白・カードデザインに合わせる
   - チャット機能本体には触れず、初期画面だけを整える
   ========================================================= */
:root{
  --home-green-950:#06351f;
  --home-green-900:#0b5d3b;
  --home-green-800:#0f6f49;
  --home-green-700:#128754;
  --home-green-600:#16a34a;
  --home-green-100:#dcfce7;
  --home-green-50:#f0fdf4;
  --home-white:#ffffff;
  --home-text:#1f2937;
  --home-border:#b8e6c8;
  --home-shadow:0 16px 34px rgba(11, 93, 59, 0.16);
}

body{
  background:linear-gradient(180deg, #e9f8ee 0%, #f7fff9 44%, #ffffff 100%);
  color:var(--home-text);
}

body.chat-active .home-menu{
  display:none !important;
}

body:not(.chat-active) .chat-card{
  display:none !important;
}

body:not(.chat-active) main.container{
  width:100%;
  max-width:920px;
  margin:0 auto;
  padding:22px 14px 48px;
}

.brand-header.page-title{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin:0 0 16px;
  padding:18px 20px;
  border:1px solid #a7e7bf;
  border-radius:24px;
  background:linear-gradient(135deg, #ffffff 0%, #f0fdf4 52%, #dcfce7 100%);
  box-shadow:var(--home-shadow);
  color:var(--home-green-950);
  text-align:left;
  font-size:initial;
  animation:none;
}

.brand-mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:56px;
  height:56px;
  border-radius:18px;
  background:#ffffff;
  border:1px solid #a7e7bf;
  box-shadow:0 10px 22px rgba(18, 135, 84, 0.18);
  flex:0 0 auto;
  overflow:hidden;
}

.brand-logo-img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.brand-copy{
  display:grid;
  gap:2px;
  min-width:0;
}

.brand-kicker{
  color:var(--home-green-800);
  font-size:12px;
  font-weight:900;
  letter-spacing:0.12em;
  text-transform:uppercase;
}

.brand-copy h1{
  margin:0;
  color:var(--home-green-950);
  font-size:27px;
  font-weight:900;
  line-height:1.25;
  letter-spacing:0.04em;
}

.home-menu{
  width:100%;
}

.top-info{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
  margin:18px 0;
}

.info-card{
  padding:16px;
  border:1px solid var(--home-border);
  border-radius:18px;
  background:#ffffff;
  box-shadow:0 10px 24px rgba(11, 93, 59, 0.08);
}

.info-card h2{
  margin:0 0 8px;
  color:var(--home-green-900);
  font-size:17px;
  font-weight:900;
  line-height:1.4;
}

.info-card p{
  margin:0;
  color:#374151;
  font-size:14px;
  font-weight:800;
}

.info-link-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding:7px 14px;
  border-radius:999px;
  background:linear-gradient(135deg, var(--home-green-700), var(--home-green-600));
  color:#ffffff !important;
  font-size:14px;
  font-weight:900;
  line-height:1.4;
  text-decoration:none;
  box-shadow:0 6px 14px rgba(18, 135, 84, 0.20);
}

.info-link-button:hover{
  background:linear-gradient(135deg, var(--home-green-800), var(--home-green-700));
}

.section{
  overflow:hidden;
  margin:18px 0 0;
  padding:0;
  border:1px solid var(--home-border);
  border-radius:22px;
  background:#ffffff;
  box-shadow:0 12px 30px rgba(11, 93, 59, 0.08);
}

.section-title{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  margin:0;
  padding:14px 54px 14px 16px;
  border-radius:20px;
  background:linear-gradient(135deg, var(--home-green-800), var(--home-green-600));
  color:#ffffff;
  font-size:20px;
  font-weight:900;
  line-height:1.4;
  cursor:pointer;
  list-style:none;
  user-select:none;
}

.section-title::-webkit-details-marker{
  display:none;
}

.section-title::before{
  content:"";
  display:inline-block;
  width:9px;
  height:26px;
  border-radius:999px;
  background:#ffffff;
  opacity:0.9;
  flex:0 0 auto;
}

.section-title::after{
  content:"＋";
  position:absolute;
  right:16px;
  top:50%;
  width:30px;
  height:30px;
  line-height:28px;
  transform:translateY(-50%);
  border-radius:50%;
  background:#ffffff;
  color:var(--home-green-800);
  text-align:center;
  font-size:21px;
  font-weight:900;
  box-shadow:0 4px 10px rgba(0,0,0,.12);
}

.section[open] .section-title{
  border-radius:20px 20px 0 0;
}

.section[open] .section-title::after{
  content:"－";
}

.section-body{
  padding:14px 16px 16px;
  background:#ffffff;
}

.link-grid{
  display:grid;
  gap:10px;
}

.link-card{
  display:grid;
  width:100%;
  padding:14px 16px;
  border:1px solid #aee5c2;
  border-radius:15px;
  background:#dff8e8;
  color:var(--home-green-950) !important;
  text-decoration:none;
  box-shadow:0 8px 18px rgba(11, 93, 59, 0.08);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.link-card:hover{
  background:#ccf2db;
  transform:translateY(-2px);
  box-shadow:0 12px 24px rgba(11, 93, 59, 0.14);
}

.link-card:active{
  transform:translateY(0);
  box-shadow:0 6px 14px rgba(11, 93, 59, 0.12);
}

.link-card--main{
  background:linear-gradient(135deg, var(--home-green-700), var(--home-green-600));
  color:#ffffff !important;
  box-shadow:0 12px 26px rgba(18, 135, 84, 0.28);
}

.link-card--main:hover{
  background:linear-gradient(135deg, var(--home-green-800), var(--home-green-700));
  box-shadow:0 16px 34px rgba(18, 135, 84, 0.36);
}

.link-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.link-title{
  min-width:0;
  font-size:17px;
  font-weight:900;
  line-height:1.45;
  word-break:break-word;
}

.link-badge{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:26px;
  padding:3px 10px;
  border-radius:999px;
  background:#ffffff;
  color:var(--home-green-900);
  font-size:12px;
  font-weight:900;
  white-space:nowrap;
}

.link-badge--sub{
  background:var(--home-green-700);
  color:#ffffff;
}

.link-card--main .link-badge{
  background:#ffffff;
  color:var(--home-green-900);
}

.chat-card{
  width:100%;
  max-width:920px;
  margin:18px auto 0;
  border:1px solid var(--home-border);
  border-radius:22px;
  background:#ffffff;
  box-shadow:0 12px 30px rgba(11, 93, 59, 0.08);
  overflow:hidden;
}

.chat-body{
  min-height:360px;
}

.footer-contact{
  margin-top:22px;
  padding:22px 18px;
  border-radius:22px;
  background:linear-gradient(135deg, var(--home-green-900), var(--home-green-700));
  color:var(--home-white);
  text-align:center;
  box-shadow:var(--home-shadow);
}

.footer-contact p{
  margin:0 0 12px;
  color:rgba(255,255,255,0.92);
  font-weight:800;
  line-height:1.7;
}

.footer-contact-title{
  margin:0 0 12px;
  color:#ffffff;
  font-size:20px;
  font-weight:900;
  line-height:1.4;
}

.footer-contact .chat-form{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  max-width:640px;
  margin:0 auto;
  padding:8px;
  border-radius:999px;
  background:#ffffff;
  box-shadow:0 10px 24px rgba(0,0,0,.15);
  opacity:1;
  pointer-events:auto;
}

.footer-contact .chat-input{
  flex:1 1 auto;
  min-width:0;
  height:44px;
  border:0;
  outline:none;
  padding:0 14px;
  border-radius:999px;
  background:#f7fff9;
  color:#1f2937;
  font-size:16px;
  font-weight:800;
  box-shadow:none;
}

.footer-contact .chat-input:focus{
  box-shadow:0 0 0 4px rgba(255,255,255,.24), 0 0 0 7px rgba(22,163,74,.22);
}

.footer-contact .btn-send{
  flex:0 0 auto;
  min-height:44px;
  height:44px;
  padding:0 20px;
  border:0;
  border-radius:999px;
  background:linear-gradient(135deg, var(--home-green-700), var(--home-green-600));
  color:#ffffff;
  font-size:15px;
  font-weight:900;
  cursor:pointer;
}

.footer-contact .btn-send:hover{
  background:linear-gradient(135deg, var(--home-green-800), var(--home-green-700));
}

.footer.home-company-footer{
  margin-top:auto;
  background:transparent;
  padding:18px 0 0;
  text-align:center;
}

.home-company-footer .footer-link{
  display:block;
  width:100%;
  padding:18px 12px;
  color:var(--home-green-900);
  font-weight:900;
  text-decoration:none;
  background:transparent;
}

.home-company-footer .footer-link:hover{
  background:transparent;
  text-decoration:underline;
}

/* チャット開始後も、下部入力欄はページ下部で使えるように残す */
body.chat-active .footer-contact{
  display:block;
}

body.chat-active main.container{
  max-width:980px;
}

/* router.js 側のフォールバック初期メニューにも同じ見た目を適用 */
.bubble-init-dashboard{
  max-width:100%;
  width:100%;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
}

.init-dashboard{
  width:100%;
}

.init-section{
  overflow:hidden;
  margin:18px 0 0;
  padding:0;
  border:1px solid var(--home-border);
  border-radius:22px;
  background:#ffffff;
  box-shadow:0 12px 30px rgba(11, 93, 59, 0.08);
}

.init-section-title{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  margin:0;
  padding:14px 54px 14px 16px;
  border-radius:20px;
  background:linear-gradient(135deg, var(--home-green-800), var(--home-green-600));
  color:#ffffff;
  font-size:20px;
  font-weight:900;
  line-height:1.4;
  cursor:pointer;
  list-style:none;
  user-select:none;
}

.init-section-title::-webkit-details-marker{
  display:none;
}

.init-section-title::before{
  content:"";
  display:inline-block;
  width:9px;
  height:26px;
  border-radius:999px;
  background:#ffffff;
  opacity:0.9;
  flex:0 0 auto;
}

.init-section-title::after{
  content:"＋";
  position:absolute;
  right:16px;
  top:50%;
  width:30px;
  height:30px;
  line-height:28px;
  transform:translateY(-50%);
  border-radius:50%;
  background:#ffffff;
  color:var(--home-green-800);
  text-align:center;
  font-size:21px;
  font-weight:900;
  box-shadow:0 4px 10px rgba(0,0,0,.12);
}

.init-section[open] .init-section-title{
  border-radius:20px 20px 0 0;
}

.init-section[open] .init-section-title::after{
  content:"－";
}

.init-section-body{
  padding:14px 16px 16px;
  background:#ffffff;
}

.init-link-grid{
  display:grid;
  gap:10px;
}

.init-link-card{
  display:grid;
  width:100%;
  padding:14px 16px;
  border:1px solid #aee5c2;
  border-radius:15px;
  background:#dff8e8;
  color:var(--home-green-950) !important;
  text-align:left;
  text-decoration:none;
  box-shadow:0 8px 18px rgba(11, 93, 59, 0.08);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
  cursor:pointer;
}

.init-link-card:hover{
  background:#ccf2db;
  transform:translateY(-2px);
  box-shadow:0 12px 24px rgba(11, 93, 59, 0.14);
}

.init-link-card--main{
  background:linear-gradient(135deg, var(--home-green-700), var(--home-green-600));
  color:#ffffff !important;
  box-shadow:0 12px 26px rgba(18, 135, 84, 0.28);
}

.init-link-card--main:hover{
  background:linear-gradient(135deg, var(--home-green-800), var(--home-green-700));
  box-shadow:0 16px 34px rgba(18, 135, 84, 0.36);
}

.init-link-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.init-link-title{
  min-width:0;
  font-size:17px;
  font-weight:900;
  line-height:1.45;
  word-break:break-word;
}

.init-link-badge{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:26px;
  padding:3px 10px;
  border-radius:999px;
  background:#ffffff;
  color:var(--home-green-900);
  font-size:12px;
  font-weight:900;
  white-space:nowrap;
}

.init-link-badge--sub{
  background:var(--home-green-700);
  color:#ffffff;
}

.init-contact{
  margin-top:22px;
  padding:22px 18px;
  border-radius:22px;
  background:linear-gradient(135deg, var(--home-green-900), var(--home-green-700));
  color:var(--home-white);
  text-align:center;
  box-shadow:var(--home-shadow);
}

.init-contact p{
  margin:0 0 12px;
  color:rgba(255,255,255,0.92);
  font-weight:800;
  line-height:1.7;
}

.init-contact-heading{
  margin:0 0 12px;
  color:#ffffff;
  font-size:20px;
  font-weight:900;
  line-height:1.4;
}

.init-contact-form-slot .chat-form{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  max-width:640px;
  margin:0 auto;
  padding:8px;
  border-radius:999px;
  background:#ffffff;
  box-shadow:0 10px 24px rgba(0,0,0,.15);
  opacity:1;
  pointer-events:auto;
}

.init-contact-form-slot .chat-input{
  flex:1 1 auto;
  min-width:0;
  height:44px;
  border:0;
  outline:none;
  padding:0 14px;
  border-radius:999px;
  background:#f7fff9;
  color:#1f2937;
  font-size:16px;
  font-weight:800;
  box-shadow:none;
}

.init-contact-form-slot .btn-send{
  flex:0 0 auto;
  min-height:44px;
  height:44px;
  padding:0 20px;
  border:0;
  border-radius:999px;
  background:linear-gradient(135deg, var(--home-green-700), var(--home-green-600));
  color:#ffffff;
  font-size:15px;
  font-weight:900;
  cursor:pointer;
}

@media screen and (max-width:700px){
  html:not(.chat-active),
  body:not(.chat-active){
    height:auto;
    min-height:100vh;
    overflow:auto;
    overscroll-behavior:auto;
  }

  body:not(.chat-active) main.container{
    display:block;
    width:100%;
    max-width:920px;
    min-height:0;
    overflow:visible;
    padding:14px 10px 34px;
  }

  .brand-header.page-title{
    justify-content:flex-start;
    gap:10px;
    margin:0 0 14px;
    padding:15px 14px;
    border-radius:20px;
  }

  .brand-mark{
    width:44px;
    height:44px;
    border-radius:15px;
  }

  .brand-copy h1{
    font-size:21px;
  }

  .brand-kicker{
    font-size:11px;
  }

  .top-info{
    grid-template-columns:1fr;
  }

  .section-title,
  .init-section-title{
    padding:13px 50px 13px 14px;
    font-size:18px;
    border-radius:18px;
  }

  .section,
  .init-section{
    border-radius:20px;
  }

  .section-body,
  .init-section-body{
    padding:12px;
  }

  .link-title,
  .init-link-title{
    font-size:16px;
  }

  .link-badge,
  .init-link-badge{
    font-size:11px;
    padding:3px 8px;
  }

  .footer-contact .chat-form,
  .init-contact-form-slot .chat-form{
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
    border-radius:18px;
    padding:10px;
  }

  .footer-contact .chat-input,
  .init-contact-form-slot .chat-input{
    width:100%;
    height:50px;
    font-size:17px;
  }

  .footer-contact .btn-send,
  .init-contact-form-slot .btn-send{
    width:100%;
    min-height:48px;
  }

  .chat-body{
    min-height:320px;
  }
}

/* =========================================================
   スマホのページ全体スクロール復旧
   - 以前の overflow:hidden 固定を上書き
   - チャット欄自体のスクロールは維持
   ========================================================= */
@media (max-width: 820px){
  html,
  body{
    height:auto !important;
    min-height:100% !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    overscroll-behavior:auto !important;
  }

  body{
    height:auto !important;
    min-height:100vh !important;
  }

  main.container{
    display:block !important;
    height:auto !important;
    min-height:0 !important;
    overflow:visible !important;
    touch-action:auto !important;
  }

  .top-scroll-area{
    height:auto !important;
    max-height:none !important;
    overflow:visible !important;
    touch-action:auto !important;
    -webkit-overflow-scrolling:auto !important;
  }

  .chat-card{
    flex:none !important;
    min-height:0 !important;
  }

  .chat-body{
    height:clamp(300px, 50vh, 640px) !important;
    max-height:none !important;
    overflow:auto !important;
    overscroll-behavior:contain !important;
    -webkit-overflow-scrolling:touch !important;
  }
}


/* =========================================================
   Information.php 修正: ヘッダーリンク下線なし / モバイル項目表示安定化
   ========================================================= */
.brand-header-link,
.brand-header-link:link,
.brand-header-link:visited,
.brand-header-link:hover,
.brand-header-link:active,
.brand-header-link:focus,
.brand-header-link *,
.brand-header-link *:hover,
.brand-header-link *:active,
.brand-header-link *:focus{
  color:inherit !important;
  text-decoration:none !important;
}

.brand-header-link{
  display:block;
  cursor:pointer;
}

body.chat-active .chat-card{
  display:flex !important;
  visibility:visible !important;
  opacity:1 !important;
}

body.chat-active [data-chat-body]{
  display:block !important;
  visibility:visible !important;
}

@media (max-width:820px){
  [data-home-preset],
  .link-card{
    pointer-events:auto !important;
    touch-action:manipulation !important;
  }

  body.chat-active .chat-card{
    display:flex !important;
  }
}


/* =========================================================
   ✅ Information.php：スマホでも項目ボタンの下にチャット欄を表示
   - 以前のスマホ折りたたみ指定で、項目ボタンやチャット欄が隠れないようにする
   ========================================================= */
body.chat-active .home-menu,
body.chat-started .home-menu{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
}

body.chat-active .chat-card,
body.chat-started .chat-card{
  display:flex !important;
  visibility:visible !important;
  opacity:1 !important;
  width:100% !important;
  max-width:920px !important;
  margin:18px auto 0 !important;
}

body.chat-active [data-chat-body],
body.chat-started [data-chat-body]{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
}

@media (max-width:820px){
  body.chat-active .page-title,
  body.chat-started .page-title,
  body.chat-active .home-menu,
  body.chat-started .home-menu{
    max-height:none !important;
    height:auto !important;
    opacity:1 !important;
    overflow:visible !important;
    transform:none !important;
    pointer-events:auto !important;
  }

  body.chat-active .page-title,
  body.chat-started .page-title{
    margin:0 0 14px !important;
  }

  body.chat-active .chat-toolbar,
  body.chat-started .chat-toolbar{
    display:none !important;
  }

  body.chat-active .chat-body,
  body.chat-started .chat-body{
    height:auto !important;
    min-height:320px !important;
    max-height:none !important;
    overflow:auto !important;
  }
}


/* =========================================================
   ✅ Information.php: スマホで押した項目リンク直下にチャット欄を表示
   ========================================================= */
.brand-header-link,
.brand-header-link:link,
.brand-header-link:visited,
.brand-header-link:hover,
.brand-header-link:active,
.brand-header-link:focus,
.brand-header-link *,
.brand-header-link *:hover{
  color:inherit !important;
  text-decoration:none !important;
}

.brand-header-link{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  width:100%;
}

.brand-heading{
  display:block;
  margin:0;
  color:var(--home-green-950, #06351f);
  font-size:27px;
  font-weight:900;
  line-height:1.25;
  letter-spacing:0.04em;
}

body.chat-active .home-menu,
body.chat-started .home-menu{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
}

body.chat-active .chat-card,
body.chat-started .chat-card,
.chat-card.chat-card--inline-home{
  display:flex !important;
  visibility:visible !important;
  opacity:1 !important;
}

/* PC/スマホ共通：押した項目リンクの直下へ差し込むチャット欄 */
.link-grid > .chat-card.chat-card--inline-home{
  grid-column:1 / -1;
  width:100% !important;
  max-width:100% !important;
  margin:10px 0 12px !important;
  border:1px solid var(--home-border, #b8e6c8) !important;
  border-radius:18px !important;
  box-shadow:0 12px 30px rgba(11, 93, 59, 0.08) !important;
}

.link-grid > .chat-card.chat-card--inline-home .chat-body{
  width:100%;
  height:clamp(360px, 58vh, 620px) !important;
  min-height:0 !important;
  max-height:620px !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  -webkit-overflow-scrolling:touch !important;
  overscroll-behavior:contain !important;
  touch-action:pan-y !important;
}

@media (max-width:820px){
  html, body{
    height:auto !important;
    min-height:100% !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    overscroll-behavior:auto !important;
  }

  body{
    min-height:100vh !important;
  }

  main.container{
    display:block !important;
    height:auto !important;
    min-height:0 !important;
    overflow:visible !important;
    touch-action:auto !important;
  }

  .chat-toolbar{
    display:none !important;
  }

  .page-title,
  .home-menu{
    max-height:none !important;
    height:auto !important;
    opacity:1 !important;
    overflow:visible !important;
    transform:none !important;
    pointer-events:auto !important;
  }

  .link-grid > .chat-card.chat-card--inline-home .chat-body{
    height:clamp(320px, 62vh, 560px) !important;
    height:clamp(320px, 62dvh, 560px) !important;
    min-height:0 !important;
    max-height:560px !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior:contain !important;
    touch-action:pan-y !important;
  }

  .link-grid > .chat-card.chat-card--inline-home{
    max-height:none !important;
    overflow:hidden !important;
  }

  .brand-header-link{
    justify-content:flex-start;
    gap:10px;
  }

  .brand-heading{
    font-size:21px;
  }
}


/* =========================================================
   ✅ Information.php：スマホでチャット欄を指でスライドしやすくする
   - 押した項目リンク直下に移動した .chat-card 内の .chat-body に固定高さを持たせます
   - ページ全体ではなく、チャット欄の中だけをスクロールできます
   ========================================================= */
.chat-card.chat-card--inline-home [data-chat-body],
.chat-card.chat-card--inline-mobile [data-chat-body]{
  height:clamp(360px, 58vh, 620px) !important;
  min-height:0 !important;
  max-height:620px !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  -webkit-overflow-scrolling:touch !important;
  overscroll-behavior:contain !important;
  touch-action:pan-y !important;
}

@media (max-width:820px){
  .chat-card.chat-card--inline-home [data-chat-body],
  .chat-card.chat-card--inline-mobile [data-chat-body]{
    height:clamp(320px, 62vh, 560px) !important;
    height:clamp(320px, 62dvh, 560px) !important;
    min-height:0 !important;
    max-height:560px !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior:contain !important;
    touch-action:pan-y !important;
  }
}


/* =========================================================
   ✅ Information.php：チャット欄の端までスクロールしたらページ側へスクロールを渡す
   - チャット欄内は通常どおりスライド
   - 一番上/一番下に到達した時だけ、同じ方向へページ全体が動けるようにする
   ========================================================= */
.chat-card.chat-card--inline-home [data-chat-body],
.chat-card.chat-card--inline-mobile [data-chat-body],
.link-grid > .chat-card.chat-card--inline-home .chat-body{
  overscroll-behavior:auto !important;
  overscroll-behavior-y:auto !important;
  touch-action:pan-y !important;
}

@media (max-width:820px){
  .chat-card.chat-card--inline-home [data-chat-body],
  .chat-card.chat-card--inline-mobile [data-chat-body],
  .link-grid > .chat-card.chat-card--inline-home .chat-body{
    overscroll-behavior:auto !important;
    overscroll-behavior-y:auto !important;
    touch-action:pan-y !important;
  }
}