/* ===== MEKURUブログ デザインシステム(和紙白×オレンジ) ===== */
:root {
  --washi: #FDFAF4; --ink: #3A3026; --orange: #E97D1C;
  --orange-pale: #F7E0C4; --cream: #FFF7EC; --gray: #96826E;
}
* { box-sizing: border-box; }

/* アクセシビリティ: 本文へスキップ(フォーカス時のみ表示) */
.skip-link {
  position: absolute; left: 8px; top: -48px; z-index: 50;
  background: var(--orange); color: #fff; padding: 8px 14px;
  border-radius: 8px; text-decoration: none; font-size: 0.85rem;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 8px; }

/* パンくずリスト */
.breadcrumbs ol {
  list-style: none; display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px; padding: 0; margin: 18px 0 0; font-size: 0.78rem; color: var(--gray);
}
.breadcrumbs li { display: inline-flex; align-items: center; gap: 6px; }
.breadcrumbs a { color: var(--gray); text-decoration: none; }
.breadcrumbs a:hover { color: var(--orange); text-decoration: underline; }
.breadcrumbs .sep { color: #C9BBA7; }
body { margin: 0; background: var(--washi); color: var(--ink);
  font-family: "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
  line-height: 1.9; font-size: 16px; }
.wrap { max-width: 760px; margin: 0 auto; padding: 0 20px; }
a { color: var(--orange); }

/* ヘッダー(MEKURU TOPと同一: sticky・半透明追従・下線ボーダー) */
.site-header {
  position: sticky; top: 0; z-index: 30;
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid #E5E5E5; /* neutral-200 */
}
.header-inner {
  max-width: 1152px; margin: 0 auto; padding: 12px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.menu-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0; flex-shrink: 0;
  background: transparent; border: 1px solid #E5E5E5; border-radius: 10px; cursor: pointer;
  transition: background-color 0.15s ease;
}
.menu-toggle:hover { background: #F5F5F5; }
.menu-bars { display: inline-flex; flex-direction: column; justify-content: center; gap: 4px; width: 18px; }
.menu-bars span { display: block; height: 2px; background: var(--ink); border-radius: 2px; }
.brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; flex-shrink: 0; }
.brand-logo { height: 28px; width: auto; display: block; }
.brand-tag {
  color: var(--ink); font-weight: 700; font-size: 0.9rem; line-height: 1;
  padding-left: 8px; border-left: 1px solid #E5E5E5;
}
.header-actions { display: flex; align-items: center; gap: 12px; font-size: 0.875rem; flex-shrink: 0; }
.header-login {
  color: #404040; /* neutral-700 */ font-weight: 500; text-decoration: none;
  padding: 8px 12px; white-space: nowrap;
}
.header-login:hover { color: #171717; }
.header-cta {
  background: #F97316; /* orange-500 */ color: white; text-decoration: none;
  padding: 8px 20px; border-radius: 999px; font-size: 0.875rem; font-weight: 700;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); white-space: nowrap;
  transition: background-color 0.15s ease;
}
.header-cta:hover { background: #EA580C; /* orange-600 */ }
.cta-short { display: none; }
.cta-long { display: inline; }

/* ハンバーガーメニュー(ドロップダウン) */
.site-menu {
  display: none; position: absolute; left: 0; right: 0; top: 100%;
  background: white; border-bottom: 1px solid #E5E5E5;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.site-menu.is-open { display: block; }
.site-menu-inner { max-width: 1152px; margin: 0 auto; padding: 10px 24px 18px; }
.menu-link {
  display: block; padding: 10px 8px; color: var(--ink); text-decoration: none;
  border-radius: 8px; font-weight: 600; font-size: 0.95rem;
}
.menu-link:hover { background: var(--cream); color: var(--orange); }

/* 一覧ページのワイドレイアウト(本文 + 右サイドバー) */
.site-main-wide { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.listing { display: grid; grid-template-columns: minmax(0, 1fr) 264px; gap: 30px; align-items: start; margin: 30px 0; }
.listing-main { min-width: 0; }
.listing-aside { position: sticky; top: 78px; }

/* 記事一覧(カード: アイキャッチは元比率で表示) */
.post-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin: 24px 0; }
.post-card { display: flex; flex-direction: column; background: white; border: 1.5px solid #EDE5D8; border-radius: 14px; overflow: hidden; }
.post-thumb-link { display: block; }
.post-thumb { display: block; width: 100%; height: auto; } /* 元画像のアスペクト比を維持 */
.post-card-body { display: flex; flex-direction: column; flex: 1; padding: 16px 18px; }
.post-card a.title { color: var(--ink); text-decoration: none; font-weight: bold; font-size: 1.1rem; }
.post-card a.title:hover { color: var(--orange); }
.post-card .meta { font-size: 0.75rem; color: var(--gray); margin-bottom: 6px; }
.post-card .excerpt { font-size: 0.85rem; color: #6b5d4d; margin: 8px 0 0; margin-top: auto; padding-top: 8px; }
.cat-badge { display: inline-block; background: var(--orange); color: white; font-size: 0.7rem;
  border-radius: 999px; padding: 2px 10px; text-decoration: none; margin-right: 8px; }

/* ページ送り */
.pager { display: flex; align-items: center; justify-content: center; gap: 20px; margin: 28px 0 8px; font-size: 0.9rem; }
.pager a { text-decoration: none; font-weight: 700; color: var(--orange); }
.pager a:hover { color: #EA580C; }
.pager .page-num { color: var(--gray); font-size: 0.82rem; }

/* サイドバー */
.side-block { background: white; border: 1.5px solid #EDE5D8; border-radius: 14px; padding: 16px 18px; }
.side-title { font-size: 0.95rem; margin: 0 0 8px; padding-left: 10px; border-left: 4px solid var(--orange); }
.side-cats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.side-cats a { display: block; padding: 8px 10px; color: var(--ink); text-decoration: none; border-radius: 8px; font-size: 0.9rem; }
.side-cats a:hover, .side-cats a.is-current { background: var(--cream); color: var(--orange); }

/* 記事本文 */
article.post { background: white; border: 1.5px solid #EDE5D8; border-radius: 16px; padding: 34px; margin: 30px 0; }
article.post h1 { font-size: 1.6rem; line-height: 1.5; margin-top: 0; }
article.post h2 { font-size: 1.25rem; border-left: 5px solid var(--orange); padding-left: 12px; margin-top: 2.2em; }
article.post h3 { font-size: 1.05rem; margin-top: 1.8em; }
article.post img { max-width: 100%; height: auto; border-radius: 10px; }
.post-hero { display: block; margin: 14px 0 6px; }
article.post table { border-collapse: collapse; width: 100%; font-size: 0.83rem; display: block; overflow-x: auto; }
article.post th, article.post td { border: 1px solid #E5DCCB; padding: 8px 10px; }
article.post th { background: var(--cream); }
article.post blockquote { background: var(--cream); border-left: 4px solid var(--orange);
  margin: 1.5em 0; padding: 12px 18px; border-radius: 0 10px 10px 0; font-size: 0.92rem; }
article.post code { background: var(--cream); padding: 1px 6px; border-radius: 5px; font-size: 0.85em; }
.post-meta { font-size: 0.78rem; color: var(--gray); }

/* フッター(MEKURU TOPと同一: 明るいグレー・中央寄せ・リンク列) */
.site-footer { background: #FAFAFA; /* neutral-50 */ border-top: 1px solid #E5E5E5; margin-top: 50px; }
.footer-inner {
  max-width: 1024px; margin: 0 auto; padding: 40px 24px;
  font-size: 0.875rem; color: #525252; /* neutral-600 */ text-align: center;
}
.footer-logo { display: flex; justify-content: center; margin-bottom: 24px; }
.footer-logo img { height: 24px; width: auto; display: block; }
.footer-links {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 8px 24px;
}
.footer-links a { color: #525252; text-decoration: none; }
.footer-links a:hover { color: #EA580C; /* orange-600 */ }
.footer-owner { margin-top: 24px; font-size: 0.75rem; color: #737373; /* neutral-500 */ }
.footer-owner a { color: #737373; text-decoration: underline; }
.footer-owner a:hover { color: #EA580C; }
.footer-copy { margin-top: 8px; margin-bottom: 0; font-size: 0.75rem; color: #A3A3A3; /* neutral-400 */ }

/* タブレット以下: サイドバーを下に回す */
@media (max-width: 900px) {
  .listing { grid-template-columns: 1fr; gap: 8px; }
  .listing-aside { position: static; margin-top: 10px; }
}

@media (max-width: 600px) {
  article.post { padding: 22px 16px; }
  .post-list { grid-template-columns: 1fr; }
  .header-inner { padding: 12px 16px; }
  .brand-logo { height: 22px; }
  .header-login { display: none; }   /* 溢れ防止。ログインはメニューのTOP/本体サイトへ */
  .header-cta { padding: 8px 12px; }
  .cta-short { display: inline; }
  .cta-long { display: none; }
  .site-menu-inner { padding: 10px 16px 18px; }
}
/* =====================================================
   メクルン吹き出しコンポーネント
   記事内マークアップ（そのまま・ラッパー不要）:
   <div class="mekurun-bubble" data-pose="なるほど〜">テキスト</div>
   ポーズ画像: /blog/images/mekurun/ に配置
   ===================================================== */

.mekurun-bubble {
  --mekurun-bg: #FFF7EC;       /* クリーム */
  --mekurun-border: #F0A24B;   /* メクルンオレンジ(淡) */
  --mekurun-text: #4A3B2A;     /* 墨茶 */
  --mekurun-size: 96px;

  position: relative;
  margin: 2.2em 0;
  padding: 18px 20px 18px calc(var(--mekurun-size) + 34px);
  min-height: calc(var(--mekurun-size) + 8px);
  background: var(--mekurun-bg);
  border: 2px solid var(--mekurun-border);
  border-radius: 16px;
  color: var(--mekurun-text);
  font-size: 0.95rem;
  line-height: 1.9;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

/* キャラクター(コールアウト左内側・床に立つ) */
.mekurun-bubble::before {
  content: "";
  position: absolute;
  left: 14px;
  bottom: 10px;
  width: var(--mekurun-size);
  height: var(--mekurun-size);
  background-image: url("/blog/images/mekurun/mekurun-bikkuri.png"); /* デフォルト */
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: contain;
}

/* キャラ名ラベル(任意・小さく) */
.mekurun-bubble::after {
  content: "メクルン";
  position: absolute;
  left: 14px;
  bottom: -0.7em;
  width: var(--mekurun-size);
  text-align: center;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #E97D1C;
  background: #fff;
  border: 1.5px solid var(--mekurun-border);
  border-radius: 999px;
  padding: 1px 0;
  box-sizing: border-box;
}

/* ---- ポーズ切り替え(新キャラ8ポーズ対応) ---- */
.mekurun-bubble[data-pose="うれしい！"]::before,
.mekurun-bubble[data-pose="うれしい"]::before { background-image: url("/blog/images/mekurun/mekurun-02-ureshii.png"); }
.mekurun-bubble[data-pose="たのしい！"]::before,
.mekurun-bubble[data-pose="たのしい"]::before,
.mekurun-bubble[data-pose="お知らせ！"]::before,
.mekurun-bubble[data-pose="お知らせ"]::before { background-image: url("/blog/images/mekurun/mekurun-01-nikkori.png"); }
.mekurun-bubble[data-pose="なるほど〜"]::before,
.mekurun-bubble[data-pose="なるほど"]::before,
.mekurun-bubble[data-pose="おっ！"]::before,
.mekurun-bubble[data-pose="おっ"]::before { background-image: url("/blog/images/mekurun/mekurun-06-bikkuri.png"); }
.mekurun-bubble[data-pose="まかせて！"]::before,
.mekurun-bubble[data-pose="まかせて"]::before,
.mekurun-bubble[data-pose="おすすめ！"]::before,
.mekurun-bubble[data-pose="おすすめ"]::before { background-image: url("/blog/images/mekurun/mekurun-03-ganbaru.png"); }
.mekurun-bubble[data-pose="調べ中…"]::before,
.mekurun-bubble[data-pose="調べ中"]::before,
.mekurun-bubble[data-pose="作業中…"]::before,
.mekurun-bubble[data-pose="作業中"]::before { background-image: url("/blog/images/mekurun/mekurun-04-shuchu.png"); }
.mekurun-bubble[data-pose="ありがとう！"]::before,
.mekurun-bubble[data-pose="ありがとう"]::before { background-image: url("/blog/images/mekurun/mekurun-05-arigato.png"); }
.mekurun-bubble[data-pose="うーん？"]::before,
.mekurun-bubble[data-pose="うーん"]::before { background-image: url("/blog/images/mekurun/mekurun-07-uun.png"); }
.mekurun-bubble[data-pose="おやすみ〜"]::before,
.mekurun-bubble[data-pose="おやすみ"]::before { background-image: url("/blog/images/mekurun/mekurun-08-oyasumi.png"); }

.mekurun-bubble[data-pose="たのしい！"]::before,
.mekurun-bubble[data-pose="たのしい"]::before { background-image: url("/blog/images/mekurun/mekurun-09-tanoshii.png"); }
.mekurun-bubble[data-pose="泣き"]::before,
.mekurun-bubble[data-pose="しくしく"]::before { background-image: url("/blog/images/mekurun/mekurun-10-naki.png"); }

/* ---- モバイル ---- */
@media (max-width: 600px) {
  .mekurun-bubble {
    --mekurun-size: 70px;
    font-size: 0.9rem;
    padding: 14px 14px 14px calc(var(--mekurun-size) + 24px);
  }
  .mekurun-bubble::before { left: 10px; }
  .mekurun-bubble::after  { left: 10px; font-size: 0.62rem; }
}