:root{
  /* 緑ベース（変数名は互換のため --red を維持） */
  --red:#1B8A3E; --red-l:#27AE52; --red-ll:#6BD08A; --red-d:#136B2F;
  --ink:#1c2a22; --gray:#5f6e63; --line:#e2ece5; --bg:#f2f8f4; --dark:#22332a; --dark2:#1a2820;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:"Noto Sans JP","Zen Kaku Gothic New",sans-serif;color:var(--ink);font-size:15px;line-height:1.8;background:#fff;-webkit-text-size-adjust:100%}
h1,h2,h3,h4,h5,.logo b,.sec-head h2,.art-title,.bc-title{font-family:"Zen Kaku Gothic New","Noto Sans JP",sans-serif}
input,select,textarea,button{font-family:"Noto Sans JP","Zen Kaku Gothic New",sans-serif}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:1160px;margin:0 auto;padding:0 20px}
.btn-red{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--red);color:#fff;font-weight:700;border:none;border-radius:50px;padding:15px 38px;cursor:pointer;transition:.18s;font-family:inherit;font-size:15px;box-shadow:0 4px 0 var(--red-d)}
.btn-red:hover{background:var(--red-l);transform:translateY(1px);box-shadow:0 3px 0 var(--red-d)}
.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:#fff;color:var(--red);font-weight:700;border:2px solid var(--red);border-radius:50px;padding:13px 34px;cursor:pointer;transition:.18s;font-family:inherit;font-size:15px}
.btn-ghost:hover{background:#fff3f3}

/* ヘッダー */
.topbar{background:var(--ink);color:#fff;font-size:12px}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:32px}
.topbar .tb-right{display:flex;gap:16px;opacity:.85}
header.site{background:#fff;position:sticky;top:0;z-index:200;box-shadow:0 1px 8px rgba(0,0,0,.06)}
header.site .wrap{display:flex;align-items:center;gap:18px;height:72px}
.logo{display:flex;align-items:center;gap:10px;white-space:nowrap;text-decoration:none}
.logo .bear{font-size:30px}
.logo .logo-mascot{height:48px;width:auto;display:block}
.logo .logo-full{height:56px;width:auto;display:block}
@media(max-width:560px){.logo .logo-mascot{height:40px}.logo .logo-full{height:44px}}
.logo b{font-weight:900;font-size:22px;color:var(--red)}
.logo small{display:block;font-size:10px;color:var(--gray);font-weight:500;letter-spacing:1px}
.gnav{margin-left:auto;display:flex;gap:18px;font-weight:700;font-size:14px}
.gnav a{padding:6px 0;border-bottom:2px solid transparent;transition:.15s;white-space:nowrap}
.gnav a:hover,.gnav a.active{color:var(--red);border-color:var(--red)}
.head-side{display:flex;align-items:center;gap:14px}
.head-info{text-align:right;line-height:1.25}
.head-info .small{font-size:10px;background:var(--red);color:#fff;border-radius:3px;padding:1px 7px;font-weight:700}
.head-info .num{font-size:21px;font-weight:900;letter-spacing:.5px}
.head-info .num span{font-size:11px;color:var(--gray);font-weight:500}
.menu-toggle{display:none;font-size:26px;background:none;border:none;cursor:pointer}

/* パンくず */
.crumb{background:var(--bg);padding:12px 0;font-size:12px;color:var(--gray)}
.crumb a:hover{color:var(--red)}
.crumb span{margin:0 6px}

/* ページタイトル */
.page-hero{background:linear-gradient(110deg,var(--red),var(--red-l));color:#fff;padding:46px 0;text-align:center}
.page-hero h1{font-size:32px;font-weight:900;letter-spacing:1px}
.page-hero .en{display:block;font-size:13px;font-weight:900;letter-spacing:3px;opacity:.9;margin-top:6px}

/* セクション */
section.block{padding:56px 0}
section.block.alt{background:var(--bg)}
.sec-head{text-align:center;margin-bottom:40px}
.sec-head h2{font-size:28px;font-weight:900;letter-spacing:1px}
.sec-head .en{display:block;color:var(--red);font-weight:900;font-size:13px;letter-spacing:2px;margin-top:6px}
.sec-head p{color:var(--gray);margin-top:14px;font-size:14px;max-width:760px;margin-left:auto;margin-right:auto}

/* カテゴリ */
.cat-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.cat-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 8px;text-align:center;transition:.18s;cursor:pointer;display:block;text-decoration:none;color:inherit}
.cat-card:hover{border-color:var(--red);box-shadow:0 10px 24px rgba(218,0,13,.12);transform:translateY(-4px)}
.cat-card{padding:0 0 16px;overflow:hidden}
.cat-ico{width:100%;aspect-ratio:1/1;margin:0 0 12px;display:flex;align-items:center;justify-content:center;background:#fff;overflow:hidden}
.cat-ico img{width:100%;height:100%;object-fit:cover}
.cat-ico svg{width:62px;height:62px}
.cat-card .nm{font-weight:700;font-size:12px;line-height:1.35;padding:0 4px;word-break:keep-all;overflow-wrap:normal}
.cat-card .stk{font-size:11px;color:var(--red);font-weight:700;margin-top:5px}
.cat-card .stk b{font-size:14px}

/* 商品 */
.prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.prod-card{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;transition:.18s;display:flex;flex-direction:column}
.prod-card:hover{box-shadow:0 12px 30px rgba(0,0,0,.1);transform:translateY(-4px)}
.prod-img{aspect-ratio:4/3;background:#f4f4f6;overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center}
.prod-img img{width:100%;height:100%;object-fit:cover}
.prod-badge{position:absolute;top:10px;left:10px;background:var(--red);color:#fff;font-size:11px;font-weight:700;padding:3px 11px;border-radius:50px}
.prod-body{padding:15px;display:flex;flex-direction:column;gap:6px;flex:1}
.prod-brand{font-size:11px;color:var(--gray);font-weight:700;letter-spacing:.5px}
.prod-name{font-size:15px;font-weight:700;line-height:1.45}
.prod-spec{font-size:12px;color:var(--gray);flex:1;line-height:1.6}
.prod-foot{display:flex;align-items:flex-end;justify-content:space-between;margin-top:8px;border-top:1px solid var(--line);padding-top:10px}
.prod-price{color:var(--red);font-weight:900;font-size:22px;line-height:1}
.prod-price small{font-size:11px;color:var(--gray);font-weight:500}
.prod-stock{font-size:11px;font-weight:700;padding:3px 9px;border-radius:50px}
.prod-stock.ok{color:#0a7d33;background:#e7f7ec}.prod-stock.few{color:#b45309;background:#fef3e2}.prod-stock.no{color:#888;background:#eee}

/* 流れ */
.flow-steps{display:flex;gap:0;justify-content:center;flex-wrap:wrap}
.flow-step{flex:1;min-width:180px;text-align:center;padding:0 14px;position:relative}
.flow-step:not(:last-child)::after{content:"";position:absolute;right:-7px;top:38px;width:14px;height:14px;border-top:3px solid var(--red-l);border-right:3px solid var(--red-l);transform:rotate(45deg)}
.flow .flow-step:not(:last-child)::after{border-color:var(--red-l)}
.flow-step .no{display:inline-flex;align-items:center;justify-content:center;width:80px;height:80px;border-radius:50%;border:3px solid var(--red-l);font-size:13px;font-weight:900;flex-direction:column;margin-bottom:14px}
.flow-step .no b{font-size:30px;line-height:1;color:var(--red)}
.flow .flow-step .no b{color:var(--red-ll)}
.flow-step h3{font-size:16px;margin-bottom:8px}
.flow-step p{font-size:13px;color:var(--gray);line-height:1.7}
.flow{background:var(--dark);color:#fff;padding:56px 0}
.flow .sec-head h2,.flow h3{color:#fff}
.flow .flow-step p{color:#cbc2c8}

/* 比較表 */
.cmp-wrap{overflow-x:auto;max-width:980px;margin:0 auto}
.cmp-table{width:100%;border-collapse:separate;border-spacing:0;font-size:14px;min-width:680px}
.cmp-table th,.cmp-table td{padding:16px 14px;text-align:center;border-bottom:1px solid var(--line)}
.cmp-table thead th{font-weight:700;color:var(--gray);font-size:13px;background:var(--bg)}
.cmp-table thead th.us{background:var(--red);color:#fff;font-size:16px;border-radius:10px 10px 0 0}
.cmp-table td.us{background:#fff5f5;font-weight:900;color:var(--red);font-size:15px}
.cmp-table td.label{text-align:left;font-weight:700;background:#fafafa;white-space:nowrap}
.cmp-table tbody tr:last-child td{border-bottom:none}
.cmp-note{font-size:11px;color:var(--gray);max-width:980px;margin:12px auto 0;line-height:1.7}

/* 事例 */
.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.case-card{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;transition:.18s}
.case-card:hover{box-shadow:0 10px 26px rgba(0,0,0,.1);transform:translateY(-3px)}
.case-card .ci{aspect-ratio:16/10;overflow:hidden;background:#eee}
.case-card .ci img{width:100%;height:100%;object-fit:cover}
.case-card .cb{padding:18px}
.case-card .tags{display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap}
.case-card .tag{background:#fbeaea;color:var(--red);font-size:11px;padding:3px 10px;border-radius:50px;font-weight:700}
.case-card h3{font-size:15px;line-height:1.55}
.case-card p{font-size:13px;color:var(--gray);margin-top:8px}

/* FAQ */
.faq-tabs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:24px}
.faq-tab{padding:9px 20px;border:1px solid var(--line);border-radius:50px;font-size:13px;font-weight:700;cursor:pointer;background:#fff;transition:.15s}
.faq-tab.active{background:var(--red);color:#fff;border-color:var(--red)}
.faq-list{max-width:840px;margin:0 auto}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:10px;margin-bottom:10px;overflow:hidden}
.faq-q{padding:17px 22px;font-weight:700;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-size:15px;gap:14px}
.faq-q .qmark{color:var(--red);font-weight:900;font-size:18px;flex-shrink:0}
.faq-q .arrow{color:var(--red);font-size:14px;transition:.2s;flex-shrink:0}
.faq-item.open .faq-q .arrow{transform:rotate(180deg)}
.faq-a{max-height:0;overflow:hidden;transition:.28s;color:var(--gray);font-size:14px;padding:0 22px 0 52px}
.faq-item.open .faq-a{max-height:400px;padding:0 22px 18px 52px}

/* 会社概要テーブル */
.info-table{width:100%;border-collapse:collapse;max-width:780px;margin:0 auto;font-size:14px}
.info-table th,.info-table td{border-bottom:1px solid var(--line);padding:16px;text-align:left;vertical-align:top}
.info-table th{width:200px;font-weight:700;background:#fafafa;white-space:nowrap}

/* 汎用 */
.lead{text-align:center;max-width:820px;margin:0 auto 40px;color:var(--gray);font-size:15px;line-height:2}
.gsec{margin-bottom:46px}
.gsec h2{font-size:22px;font-weight:900;border-left:5px solid var(--red);padding-left:14px;margin-bottom:20px}

/* CTA */
.cta-band{background:var(--dark);color:#fff;padding:50px 0;text-align:center}
.cta-band h2{font-size:26px;margin-bottom:8px;font-weight:900}
.cta-band p{color:#cbc2c8;margin-bottom:24px}
.cta-band .row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;align-items:center}
.cta-tel{font-size:30px;font-weight:900;letter-spacing:1px}
.cta-tel span{font-size:12px;display:block;color:#cbc2c8;font-weight:500}

/* フッター */
footer.site{background:var(--dark2);color:#cbc2c8;padding:48px 0 0;font-size:13px}
.foot-cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:30px;padding-bottom:36px}
.foot-cols h4{color:#fff;font-size:14px;margin-bottom:14px;font-weight:700}
.foot-cols a{display:block;color:#b3a9b0;padding:5px 0}
.foot-cols a:hover{color:#fff}
.foot-logo{display:inline-flex;align-items:center;background:#fff;border-radius:10px;padding:10px 14px;margin-bottom:14px}
.foot-logo img{height:46px;width:auto;display:block}
.foot-logo b{font-weight:900;font-size:20px;color:#fff}
.foot-bottom{border-top:1px solid #4a3f47;text-align:center;padding:18px 0;color:#9a8f96;font-size:12px}

@media(max-width:1180px){
  header.site .wrap{gap:12px}
  .gnav{gap:13px;font-size:13px}
  .head-info .num{font-size:18px}
}
@media(max-width:980px){
  .cat-grid{grid-template-columns:repeat(4,1fr)}
  .prod-grid{grid-template-columns:repeat(2,1fr)}
  .case-grid{grid-template-columns:1fr}
  .gnav{display:none}.menu-toggle{display:block;margin-left:auto}
  .foot-cols{grid-template-columns:1fr 1fr}
  .flow-step:not(:last-child)::after{display:none}
  .info-table th{width:130px}
}
@media(max-width:560px){
  .cat-grid{grid-template-columns:repeat(3,1fr)}
  .prod-grid{grid-template-columns:1fr}
  .head-info{display:none}
}

/* ===== 商品一覧ページ（カテゴリ別） ===== */
.lp-intro{color:var(--gray);line-height:1.9;margin-bottom:8px}
.lp-links{margin:10px 0 4px}
.lp-links a{color:var(--red);font-weight:700;margin-right:18px;text-decoration:none}
.lp-layout{display:grid;grid-template-columns:230px 1fr;gap:30px;align-items:start}
.side-nav{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.side-head{background:var(--dark);color:#fff;font-weight:700;padding:13px 16px;font-size:15px}
.side-nav a{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;color:var(--ink);text-decoration:none;border-top:1px solid var(--line);font-size:14px;transition:.15s}
.side-nav a:hover{background:var(--bg);color:var(--red)}
.side-nav a.active{background:var(--red);color:#fff;font-weight:700}
.side-nav a span{color:#bbb}
.side-nav a.active span{color:#fff}
.lp-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.lp-card{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;transition:.2s}
.lp-card:hover{box-shadow:0 12px 30px rgba(0,0,0,.1);transform:translateY(-3px)}
.lp-img{position:relative;height:160px;background:#f4f6f8;display:flex;align-items:center;justify-content:center;overflow:hidden}
.lp-img img{width:100%;height:100%;object-fit:contain;padding:10px}
.lp-body{padding:16px;display:flex;flex-direction:column;gap:9px;flex:1}
.lp-name{font-weight:900;font-size:15.5px;line-height:1.45}
.lp-tags{display:flex;gap:6px;flex-wrap:wrap}
.lp-tags span{background:var(--bg);border:1px solid var(--line);color:var(--gray);font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px}
.lp-spec{font-size:12.5px;color:var(--gray);line-height:1.6}
.lp-price{width:100%;border-collapse:collapse;font-size:13px;margin-top:2px}
.lp-price th{background:var(--bg);color:var(--gray);font-weight:700;padding:6px 8px;border:1px solid var(--line);font-size:12px}
.lp-price td{padding:6px 8px;border:1px solid var(--line);text-align:center}
.lp-price td:last-child{font-weight:900;color:var(--red)}
.lp-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:6px}
.lp-foot .btn-red{padding:9px 14px;font-size:13px}
@media(max-width:880px){
  .lp-layout{grid-template-columns:1fr}
  .side-nav{display:flex;flex-wrap:wrap}
  .side-head{width:100%}
  .side-nav a{flex:1 1 33%;justify-content:center;border:1px solid var(--line)}
}
@media(max-width:560px){.lp-grid{grid-template-columns:1fr}}

/* ===== 追従CTA（全ページ） ===== */
.float-cta{position:fixed;right:18px;bottom:18px;z-index:500;display:flex;flex-direction:column;gap:10px}
.float-cta .fc-btn{display:flex;align-items:center;gap:10px;background:#fff;border-radius:50px;padding:10px 18px 10px 12px;box-shadow:0 6px 20px rgba(0,0,0,.18);text-decoration:none;transition:.18s;border:2px solid transparent}
.float-cta .fc-btn:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.24)}
.float-cta .fc-btn .ic{font-size:22px;line-height:1}
.float-cta .fc-btn .tx{display:flex;flex-direction:column;line-height:1.2}
.float-cta .fc-btn .tx b{font-size:14px;font-weight:900}
.float-cta .fc-btn .tx small{font-size:10px;color:var(--gray)}
.float-cta .fc-tel{border-color:var(--red)}
.float-cta .fc-tel b{color:var(--red)}
.float-cta .fc-quote{background:var(--red)}
.float-cta .fc-quote .tx b,.float-cta .fc-quote .tx small{color:#fff}
@media(max-width:560px){
  .float-cta{right:0;left:0;bottom:0;flex-direction:row;gap:0;border-radius:0}
  .float-cta .fc-btn{flex:1;border-radius:0;justify-content:center;padding:12px 6px;box-shadow:0 -2px 12px rgba(0,0,0,.15);border:0}
  .float-cta .fc-btn .tx small{display:none}
}

/* ===== 信頼バナー・実績数値 ===== */
.trust-band{background:var(--bg);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trust-band .wrap{display:flex;flex-wrap:wrap;gap:18px;justify-content:center;align-items:center;padding:18px 20px}
.trust-band .ti{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px;color:var(--ink)}
.trust-band .ti .b{color:var(--red);font-weight:900}
.achieve{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;text-align:center}
.achieve .ac{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px 12px}
.achieve .ac .num{font-size:34px;font-weight:900;color:var(--red);line-height:1}
.achieve .ac .num small{font-size:16px}
.achieve .ac .lb{font-size:13px;color:var(--gray);margin-top:8px;font-weight:700}
@media(max-width:680px){.achieve{grid-template-columns:repeat(2,1fr)}}

/* ===== お客様の声 ===== */
.voices{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.voice{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px}
.voice .stars{color:#f5a623;font-size:15px;letter-spacing:2px}
.voice .vq{font-weight:700;font-size:15px;margin:8px 0 10px;line-height:1.6}
.voice .va{font-size:13px;color:var(--gray);line-height:1.8}
.voice .vn{font-size:12px;color:var(--ink);font-weight:700;margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
@media(max-width:780px){.voices{grid-template-columns:1fr}}

/* スクロール余白（追従CTAと被らないよう） */
@media(max-width:560px){body{padding-bottom:64px}}

/* ===== ブログ（お役立ちコラム） ===== */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.blog-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;text-decoration:none;color:inherit;transition:.2s}
.blog-card:hover{box-shadow:0 12px 30px rgba(0,0,0,.1);transform:translateY(-3px)}
.blog-card .bc-img{height:170px;background:#f4f6f8;overflow:hidden}
.blog-card .bc-img img{width:100%;height:100%;object-fit:cover}
.blog-card .bc-body{padding:18px;display:flex;flex-direction:column;gap:7px}
.bc-cat{display:inline-block;background:var(--red);color:#fff;font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px;align-self:flex-start}
.bc-date{font-size:12px;color:var(--gray)}
.bc-title{font-size:16.5px;font-weight:900;line-height:1.5}
.bc-ex{font-size:13px;color:var(--gray);line-height:1.7}
@media(max-width:880px){.blog-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.blog-grid{grid-template-columns:1fr}}
/* 記事ページ */
.article{max-width:760px;margin:0 auto}
.art-meta{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.art-title{font-size:30px;font-weight:900;line-height:1.5;margin-bottom:20px}
.art-hero{border-radius:14px;overflow:hidden;margin-bottom:26px}
.art-hero img{width:100%;display:block}
.art-body h2{font-size:21px;font-weight:900;margin:30px 0 12px;padding-left:14px;border-left:5px solid var(--red);line-height:1.5}
.art-body p{font-size:15.5px;line-height:2;color:var(--ink);margin-bottom:14px}
.art-cta{background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:28px;text-align:center;margin-top:40px}
.art-cta h3{font-size:19px;font-weight:900;margin-bottom:8px}
.art-cta p{font-size:14px;color:var(--gray);margin-bottom:18px}
.art-cta .row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ===== キャンペーンバナー ===== */
.camp-bar{background:linear-gradient(90deg,var(--red),var(--red-l));color:#fff}
.camp-bar .wrap{display:flex;align-items:center;justify-content:center;gap:12px;padding:9px 44px 9px 16px;position:relative}
.camp-txt{font-size:13.5px;font-weight:700;text-align:center;line-height:1.5}
.camp-emoji{margin-right:6px}
.camp-link{display:inline-block;margin-left:12px;background:#fff;color:var(--red);font-weight:900;font-size:12.5px;padding:4px 14px;border-radius:20px;text-decoration:none;white-space:nowrap;transition:.15s}
.camp-link:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.2)}
.camp-close{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:transparent;border:0;color:#fff;font-size:22px;line-height:1;cursor:pointer;opacity:.8;padding:0 4px}
.camp-close:hover{opacity:1}
@media(max-width:640px){
  .camp-bar .wrap{padding:8px 36px 8px 12px}
  .camp-txt{font-size:12px}
  .camp-link{display:block;margin:6px auto 0}
}

/* ===== チャットボット ===== */
.chat-launch{position:fixed;right:18px;bottom:160px;z-index:520;display:flex;align-items:center;gap:8px;background:var(--dark);color:#fff;border-radius:50px;padding:11px 18px;box-shadow:0 6px 20px rgba(0,0,0,.25);cursor:pointer;transition:.18s}
.chat-launch:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.3)}
.chat-launch .cl-ic{font-size:20px}
.chat-launch .cl-tx{font-size:14px;font-weight:900}
.chat-panel{position:fixed;right:18px;bottom:18px;width:340px;max-width:calc(100vw - 24px);height:520px;max-height:calc(100vh - 36px);background:#fff;border-radius:16px;box-shadow:0 12px 40px rgba(0,0,0,.3);z-index:530;display:none;flex-direction:column;overflow:hidden}
.chat-panel.open{display:flex}
.chat-head{background:var(--dark);color:#fff;padding:14px 16px;display:flex;justify-content:space-between;align-items:center}
.chat-head b{font-size:15px;font-weight:900}
.chat-head small{display:block;font-size:11px;opacity:.85;margin-top:2px}
.chat-x{background:transparent;border:0;color:#fff;font-size:22px;cursor:pointer;line-height:1}
.chat-body{flex:1;overflow-y:auto;padding:16px;background:var(--bg);display:flex;flex-direction:column;gap:10px}
.cmsg{max-width:85%;padding:10px 13px;border-radius:14px;font-size:13.5px;line-height:1.6}
.cmsg.bot{background:#fff;border:1px solid var(--line);align-self:flex-start;border-bottom-left-radius:4px}
.cmsg.user{background:var(--red);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.cmsg-cta{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.cmsg-cta a{display:block;text-align:center;font-size:12.5px;font-weight:900;padding:8px;border-radius:8px;text-decoration:none;border:1px solid var(--red);color:var(--red)}
.cmsg-cta a:first-child{background:var(--red);color:#fff}
.chat-quick{display:flex;flex-wrap:wrap;gap:6px;padding:10px 12px;background:#fff;border-top:1px solid var(--line)}
.chat-quick button{background:var(--bg);border:1px solid var(--line);border-radius:20px;padding:6px 12px;font-size:12px;font-weight:700;color:var(--ink);cursor:pointer;transition:.15s}
.chat-quick button:hover{border-color:var(--red);color:var(--red)}
.chat-input{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line);background:#fff}
.chat-input input{flex:1;border:1px solid var(--line);border-radius:8px;padding:9px 12px;font:inherit;font-size:13.5px}
.chat-input button{background:var(--red);color:#fff;border:0;border-radius:8px;padding:0 16px;font-weight:900;cursor:pointer}
@media(max-width:560px){
  .chat-launch{bottom:70px;right:12px;padding:9px 14px}
  .chat-launch .cl-tx{display:none}
  .chat-panel{right:6px;left:6px;bottom:6px;width:auto;height:75vh}
}

/* ===== 商品検索・絞り込み ===== */
.prod-filter{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;margin-bottom:24px}
.pf-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.pf-row #pf-kw{flex:2;min-width:220px;padding:11px 14px;border:1px solid var(--line);border-radius:8px;font:inherit;font-size:14px}
.pf-row select{flex:1;min-width:150px;padding:11px;border:1px solid var(--line);border-radius:8px;font:inherit;font-size:14px;background:#fff}
.pf-stock{display:flex;align-items:center;gap:6px;font-size:13.5px;font-weight:700;white-space:nowrap;cursor:pointer}
.pf-stock input{width:auto}
.pf-meta{margin-top:12px;font-size:13px;color:var(--gray);font-weight:700}
.pf-meta #pf-count{color:var(--red);font-size:16px;font-weight:900}
@media(max-width:680px){.pf-row #pf-kw,.pf-row select{flex:1 1 100%}}