/* catbot 共通デザインシステム — TOPデザイン(ふわふわ猫の道具箱)に全ページを統一 */
:root{
  --ink:#3a2417; --paper:#fff8ef; --card:#fffdf8; --line:#efe2d0;
  --muted:#776555; --dim:#9f8974; --coffee:#5a3522; --caramel:#c98543; --sage:#5f7f67;
}

/* ベース: 丸ゴシック + 暖色ベージュ背景（TOPと同じ世界観） */
body{
  font-family:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Yu Gothic UI",Meiryo,sans-serif !important;
  background:#f3e7d3 !important;
  color:var(--ink);
  font-weight:500;
  line-height:1.75;
}
a{color:var(--coffee)}

/* 中央カラム: ベージュ地に白いカード列（TOPの.wrapと同じ印象） */
.wrap,main,.container,.bar-inner{
  background:var(--paper);
}
.wrap,main,.container{
  max-width:600px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  box-shadow:0 0 50px -24px rgba(64,39,24,.25);
}
.bar,.sitebar,header.bar{background:rgba(255,248,239,.94) !important}
/* ヒーロー内側の.wrapは透過に。暗い画像ヒーローを淡背景で隠さず、明色文字を読めるようにする */
.hero .wrap{background:transparent !important;box-shadow:none !important}

/* 見出し: 太い丸ゴシック */
h1,h2,h3{font-weight:900 !important;letter-spacing:0}

/* ボタン: キャラメルのピル型（TOPと同じ） */
.button,.btn,a.button,button.button{
  border-radius:999px !important;
  font-weight:800 !important;
}
.button.primary,.btn-primary,.button.product,.button.search{
  background:var(--caramel) !important;
  color:#fff !important;
  border-color:var(--caramel) !important;
}
.button.light,.button.secondary,.btn-secondary{
  background:var(--card) !important;
  color:var(--coffee) !important;
  border:1.5px solid #e0cdb6 !important;
}

/* バッジ・ラベル・チップはピル */
.badge,.label,.eyebrow,.chip,.tags span,.tag{border-radius:999px !important}

/* カードは丸く、やわらかい影 */
.card,.panel,.product-card,.qz-card,.qz-prod,.home-menu-card,
.home-decision-card,.first-choice-card,.visual-menu-card,.step,.cat,
article.card,.route-card,.outcome-card,.metric{
  border-radius:16px !important;
  border-color:var(--line) !important;
}

/* 画像・サムネは丸み */
img{border-radius:12px}
.brand-mark,.hero-image,.hero-picture img{border-radius:12px}

/* 絵文字除去で空になった装飾要素の隙間を畳む（上品化） */
.rp-emoji:empty,.qz-emoji-big:empty,.home-howto-emoji:empty,.home-quiz-emoji:empty,
.qz-type-emoji:empty,.art-emoji:empty{display:none}

/* ===== 全ページ共通ヘッダ（TOPと同一のマガジンバー / catbot-header.js が注入） ===== */
/* 旧B型バー（header.bar）は撤去。div.bar のヘッダは JS 側で除去する */
header.bar{display:none !important}
/* 子ページは常に共通固定ヘッダを持つ（このCSSはTOPでは読まれない）。
   JS実行前にCSSで余白を確保し、初回表示のレイアウトシフト(CLS)を防ぐ */
body{padding-top:61px}
.header-wrap{position:fixed;top:0;left:50%;transform:translateX(-50%);width:100%;max-width:600px;z-index:40}
.header-wrap .topbar{display:flex;align-items:center;gap:9px;padding:11px 18px;background:rgba(255,248,239,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.header-wrap .brand-mark{width:38px;height:38px;border-radius:11px;background:url("top1a_09.webp") center/cover;box-shadow:0 0 0 1px rgba(90,53,34,.15);flex:0 0 auto;text-decoration:none}
.header-wrap .brand-copy{display:flex;flex-direction:column;line-height:1.15}
.header-wrap .brand-copy strong{font-size:15px;white-space:nowrap}
.header-wrap .brand-copy small{font-size:11px;color:var(--dim)}
.header-wrap .menu-btn{margin-left:auto;font-size:20px;color:#8a7460;background:none;border:0;cursor:pointer;line-height:1}
.header-wrap .menu-btn.open{color:var(--caramel)}
.header-wrap .drawer{display:none;flex-direction:column;background:#fffdf8;border-bottom:1px solid var(--line);box-shadow:0 14px 26px -14px rgba(64,39,24,.34)}
.header-wrap .drawer.open{display:flex;animation:drawerIn .18s ease}
@keyframes drawerIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.header-wrap .drawer a{display:flex;align-items:center;padding:13px 18px;border-bottom:1px solid #f1e6d6;font-size:15px;font-weight:700;color:var(--ink);text-decoration:none}
.header-wrap .drawer a:last-child{border-bottom:0}
.header-wrap .drawer a:hover,.header-wrap .drawer a:active{background:#fff2df}

/* ===== シーンバナー（その場所での猫の様子 / catbot-header.js が注入） ===== */
.scene-banner{max-width:600px;margin:14px auto 0;padding:0 18px;background:var(--paper)}
.scene-banner img{width:100%;height:150px;object-fit:cover;border-radius:16px;
  box-shadow:0 10px 22px -14px rgba(64,39,24,.45);display:block}
/* アイコン型（規約系・診断など）: 丸く小さく中央に */
.scene-banner.icon{text-align:center}
.scene-banner.icon img{width:96px;height:96px;border-radius:50%;margin:0 auto;
  box-shadow:0 6px 14px -8px rgba(64,39,24,.4)}

/* 商品カードの「この商品を使う猫」アイコン（見出しの横に浮かせる） */
img.prod-cat-icon{float:right;width:58px;height:58px;object-fit:cover;
  border-radius:14px;margin:0 0 8px 12px;background:#fdf6e7;
  box-shadow:0 4px 10px -6px rgba(64,39,24,.4)}
/* 小型（statパネル等、商品名の直書きの横） */
img.prod-cat-icon.sm{width:44px;height:44px;border-radius:12px;margin:0 0 6px 8px}