/* ============================================================
   MAROKE — blog.css
   ジャーナル（ブログ）専用。ブログ系のページでのみ読み込まれる。
   罫線ではなく影でカードを浮かせるデザイン。
   トークン（色・書体）は main.css の :root をそのまま使用する。
   ============================================================ */

:root{
  --mblog-sh:0 2px 5px rgba(11,13,18,.05), 0 18px 38px -20px rgba(11,13,18,.30);
  --mblog-sh-hover:0 4px 10px rgba(11,13,18,.07), 0 34px 60px -24px rgba(11,13,18,.42);
  --mblog-lift:-4px;
  --mblog-side:320px;
}

/* ---------- レイアウト ---------- */
.mblog-layout{
  max-width:var(--max);margin:0 auto;
  padding:clamp(48px,6vw,78px) var(--pad) 0;
  display:grid;grid-template-columns:minmax(0,1fr) var(--mblog-side);
  gap:clamp(28px,3.4vw,46px);align-items:start;
}
.mblog-layout--full{grid-template-columns:minmax(0,1fr)}
@media(max-width:1060px){.mblog-layout{grid-template-columns:minmax(0,1fr)}}
/* min-width:0 が無いと、広告の <ins> のように中身が実寸を持つ要素に
   グリッドの列が押し広げられ、スマホで右にはみ出す。 */
.mblog-main,.mblog-sidebar{min-width:0}

.mblog-panel{
  background:#fff;box-shadow:var(--mblog-sh);
  transition:box-shadow .45s cubic-bezier(.2,.8,.2,1),transform .45s cubic-bezier(.2,.8,.2,1);
}

/* ---------- 記事カード ---------- */
.mblog-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(24px,3vw,34px)}
/* 3列はサイドバーを出していないときだけ。サイドバーがあると1枚が小さくなりすぎる。 */
.mblog-layout--full .mblog-grid[data-cols="3"]{grid-template-columns:repeat(3,1fr)}
@media(max-width:980px){.mblog-layout--full .mblog-grid[data-cols="3"]{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.mblog-grid,.mblog-layout--full .mblog-grid[data-cols="3"]{grid-template-columns:1fr}}

.mblog-card{display:flex;flex-direction:column;overflow:hidden}
.mblog-card:hover{box-shadow:var(--mblog-sh-hover);transform:translateY(var(--mblog-lift))}
.mblog-card-link{display:flex;flex-direction:column;height:100%}
.mblog-thumb{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--navy)}
.mblog-thumb img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.8,.2,1)}
.mblog-card:hover .mblog-thumb img{transform:scale(1.05)}
.mblog-thumb-empty{width:100%;height:100%;display:grid;place-items:center;color:rgba(255,255,255,.28)}
.mblog-card-body{padding:20px 24px 26px;display:flex;flex-direction:column;gap:10px;flex:1}
.mblog-card-title{
  font-family:var(--font-ja);font-weight:600;font-size:16px;line-height:1.85;
  letter-spacing:.04em;transition:color .35s;
}
.mblog-card:hover .mblog-card-title{color:var(--gold)}
.mblog-card-excerpt{
  font-size:12.5px;color:var(--grey);line-height:1.95;
  display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.mblog-card-read{
  margin-top:auto;padding-top:4px;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink);
}
.mblog-card-read::after{content:" →";color:var(--gold)}
.mblog-feed-ad{grid-column:1/-1}
.mblog-empty{text-align:center;color:var(--grey);padding:60px 0 20px}

/* ---------- サイドバー ---------- */
.mblog-sidebar{display:flex;flex-direction:column;gap:24px;min-width:0}
@media(max-width:1060px){.mblog-sidebar{max-width:520px;margin:60px auto 0}}

/* 追従させるのは目次だけ。サイドバー全体を sticky にすると
   ウィジェットの合計が画面より高くなったときに下が見えなくなる。 */
@media(min-width:1061px){
  .mblog-sticky{position:sticky;top:calc(var(--header-h) + 24px)}
}
.mblog-w{background:#fff;box-shadow:var(--mblog-sh);padding:24px}
.mblog-w-head{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--gold);padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:18px;
}

/* プロフィール */
.mblog-prof{text-align:center}
.mblog-prof-avatar{
  width:84px;height:84px;border-radius:50%;overflow:hidden;margin:0 auto 14px;
  background:var(--navy);box-shadow:0 12px 26px -14px rgba(11,13,18,.55);
}
.mblog-prof-avatar img{width:100%;height:100%;object-fit:cover}
.mblog-prof-name{font-family:var(--font-ja);font-weight:600;font-size:15px;letter-spacing:.06em}
.mblog-prof-role{font-family:var(--font-mono);font-size:9px;letter-spacing:.22em;color:var(--gold);margin-top:6px;text-transform:uppercase}
.mblog-prof-bio{font-size:12px;color:var(--grey);line-height:1.95;margin:14px 0 16px;text-align:left}
.mblog-reel{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--navy);margin-bottom:16px}
.mblog-reel video{width:100%;height:100%;object-fit:cover;display:block}
.mblog-reel-label{
  position:absolute;left:0;bottom:0;z-index:2;background:rgba(11,13,18,.78);color:var(--gold-soft);
  font-family:var(--font-mono);font-size:8px;letter-spacing:.26em;padding:5px 10px;text-transform:uppercase;
}
.mblog-yt{
  display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
  background:#FF0000;border:1px solid #FF0000;color:#fff;
  font-size:12px;font-weight:600;letter-spacing:.14em;padding:13px 18px;transition:background .3s,border-color .3s;
}
.mblog-yt:hover{background:#C40000;border-color:#C40000;color:#fff}
.mblog-yt svg{width:15px;height:15px;flex:0 0 auto}

/* 人気記事 */
.mblog-rank{display:flex;flex-direction:column;gap:15px}
.mblog-rank a{display:grid;grid-template-columns:24px 68px 1fr;gap:12px;align-items:center}
.mblog-rank-num{font-family:var(--font-en);font-size:19px;color:var(--gold);line-height:1}
.mblog-rank-th{display:block;aspect-ratio:1;overflow:hidden;background:var(--navy)}
.mblog-rank-th img{width:100%;height:100%;object-fit:cover;transition:transform .8s}
.mblog-rank a:hover .mblog-rank-th img{transform:scale(1.06)}
.mblog-rank-title{
  font-family:var(--font-ja);font-weight:600;font-size:12.5px;line-height:1.7;
  display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.mblog-rank a:hover .mblog-rank-title{color:var(--gold)}

/* 目次 */
.mblog-toc ol{list-style:none;counter-reset:mtoc;border-left:1px solid var(--line);margin:0;padding:0}
.mblog-toc li{counter-increment:mtoc;margin:0}
.mblog-toc li a{
  display:flex;gap:11px;align-items:baseline;padding:9px 0 9px 14px;
  font-size:12.5px;line-height:1.7;color:var(--grey);
  border-left:1px solid transparent;margin-left:-1px;transition:color .3s,border-color .3s;
}
.mblog-toc li a::before{
  content:counter(mtoc,decimal-leading-zero);
  font-family:var(--font-mono);font-size:9px;letter-spacing:.14em;color:var(--gold);flex:0 0 auto;
}
.mblog-toc li.is-h3 a{padding-left:28px;font-size:12px}
.mblog-toc li a:hover{color:var(--ink)}
.mblog-toc li a.is-current{color:var(--ink);border-left-color:var(--gold)}

/* ---------- 広告枠 ----------
   配信される広告の実寸はテーマ側から分からないため、白いカードの影を付けると
   広告の外に余白が生まれて浮いて見える。枠は付けず、ラベルだけを添える。

   読み込み前に高さを確保しておかないと、広告が入った瞬間に本文が下へずれる
   （CLSの悪化）。枠ごとに最低高さを持たせ、実際に配信される広告に合わせて
   下の変数で調整できるようにしている。 */
:root{
  --mblog-ad-h-sidebar:250px;   /* 300×250 レクタングル */
  --mblog-ad-h-inarticle:250px; /* 記事内（レスポンシブ） */
  --mblog-ad-h-infeed:200px;    /* 記事一覧のあいだ */
  --mblog-ad-h-belowpost:250px; /* 記事の下 */
}
.mblog-ad{background:transparent;box-shadow:none;padding:0;text-align:center;min-width:0}
.mblog-ad-label{
  display:block;font-family:var(--font-mono);font-size:8px;letter-spacing:.26em;
  color:var(--grey);text-transform:uppercase;margin-bottom:8px;
}
.mblog-ad-body{min-height:1px;overflow:hidden}
/* AdSense の <ins> はビューポート幅で描画されることがあるので、必ず枠内に収める */
.mblog-ad-body .adsbygoogle,
.mblog-ad-body ins,
.mblog-ad-body iframe{max-width:100%!important}
.mblog-ad--sidebar    .mblog-ad-body{min-height:var(--mblog-ad-h-sidebar)}
.mblog-ad--infeed     .mblog-ad-body{min-height:var(--mblog-ad-h-infeed)}
.mblog-ad--inarticle1 .mblog-ad-body,
.mblog-ad--inarticle2 .mblog-ad-body{min-height:var(--mblog-ad-h-inarticle)}
.mblog-ad--belowpost  .mblog-ad-body{min-height:var(--mblog-ad-h-belowpost)}
.mblog-ad--inarticle1,.mblog-ad--inarticle2,.mblog-ad--belowpost{margin:3em 0}
.mblog-ad--infeed{margin:6px 0}

/* ---------- 記事ページ ---------- */
/* ヒーローはプレビューに合わせて少し低く。投稿ページだけに適用する */
.single-post .single-hero{
  min-height:clamp(380px,58vh,560px);
  padding:calc(var(--header-h) + 70px) 0 clamp(38px,6vh,60px);
}
.single-post .single-title{margin-top:18px}

/* 記事ページでは本文の下に置く */
.mblog-article .mblog-breadcrumb{
  max-width:none;padding:26px 0 0;margin-top:2.6em;
  border-top:1px solid var(--line);
}
.mblog-breadcrumb{
  max-width:var(--max);margin:0 auto;padding:26px var(--pad) 0;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;color:var(--grey);
  display:flex;gap:8px;flex-wrap:wrap;align-items:center;
}
.mblog-breadcrumb a{color:var(--grey);transition:color .3s}
.mblog-breadcrumb a:hover{color:var(--gold)}
.mblog-breadcrumb .sep{color:var(--gold)}
.mblog-breadcrumb .current{color:var(--ink);max-width:44ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:620px){.mblog-breadcrumb .current{max-width:56vw}}

.mblog-article{max-width:820px}
/* main.css の .single-body をそのまま本文の書体として使い、幅と余白だけ上書きする */
.mblog-article .single-body{max-width:none;margin:0;padding:0}
/* キャプションは画面に出さず、HTML には残して検索エンジンに渡す */
.mblog-article.mblog-hide-captions figcaption,
.mblog-article.mblog-hide-captions .wp-caption-text{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

.mblog-promo{margin:3em 0 0}

/* シェア */
.mblog-share{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:2.8em}
.mblog-share-label{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--grey);margin-right:6px;
}
.mblog-share a{
  display:inline-flex;align-items:center;gap:8px;background:#fff;box-shadow:var(--mblog-sh);
  padding:10px 16px;font-size:11.5px;letter-spacing:.08em;transition:box-shadow .35s,transform .35s,color .35s;
}
.mblog-share a:hover{color:var(--gold);box-shadow:var(--mblog-sh-hover);transform:translateY(-2px)}
.mblog-share svg{width:14px;height:14px}

/* 著者 */
.mblog-author{
  padding:clamp(22px,3.4vw,32px);margin-top:3.2em;
  display:grid;grid-template-columns:78px 1fr;gap:24px;align-items:start;
}
.mblog-author--noavatar{grid-template-columns:1fr}
@media(max-width:560px){.mblog-author{grid-template-columns:1fr}}
.mblog-author-avatar{width:78px;height:78px;border-radius:50%;overflow:hidden;background:var(--navy)}
.mblog-author-avatar img{width:100%;height:100%;object-fit:cover}
.mblog-author-name{font-family:var(--font-ja);font-weight:600;font-size:16px;letter-spacing:.06em}
.mblog-author-role{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.24em;color:var(--gold);text-transform:uppercase;margin-top:6px}
.mblog-author-bio{font-size:13px;color:var(--grey);line-height:1.95;margin-top:12px}
.mblog-author-links{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.mblog-author-links .mblog-yt{width:auto}

/* 関連記事 */
.mblog-related{margin-top:3.4em}
.mblog-related-head{
  display:flex;align-items:baseline;gap:16px;
  padding-bottom:14px;border-bottom:1px solid var(--ink);margin-bottom:26px;
}
.mblog-related-head h2{font-family:var(--font-ja);font-weight:600;font-size:15px;letter-spacing:.12em}
.mblog-related-head .en{font-family:var(--font-mono);font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold)}
.mblog-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,26px)}
@media(max-width:760px){.mblog-related-grid{grid-template-columns:1fr}}
.mblog-rel{display:flex;flex-direction:column;overflow:hidden}
.mblog-rel:hover{box-shadow:var(--mblog-sh-hover);transform:translateY(var(--mblog-lift))}
.mblog-rel .mblog-thumb{aspect-ratio:16/10}
.mblog-rel-body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:12px;flex:1}
.mblog-rel-title{font-family:var(--font-ja);font-weight:600;font-size:14px;line-height:1.85;letter-spacing:.03em;transition:color .35s}
.mblog-rel:hover .mblog-rel-title{color:var(--gold)}
.mblog-rel-read{
  margin-top:auto;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.24em;
  color:var(--grey);text-transform:uppercase;
}
.mblog-rel-read::after{content:" →";color:var(--gold)}

/* 前後の記事 */
.mblog-nav{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:2.4em}
@media(max-width:560px){.mblog-nav{grid-template-columns:1fr}}
.mblog-nav a{padding:20px 24px;display:flex;flex-direction:column;gap:9px}
.mblog-nav a:hover{box-shadow:var(--mblog-sh-hover);transform:translateY(var(--mblog-lift))}
.mblog-nav-label{font-family:var(--font-mono);font-size:9px;letter-spacing:.28em;color:var(--gold);text-transform:uppercase}
.mblog-nav-title{font-family:var(--font-ja);font-weight:600;font-size:13.5px;line-height:1.8}
.mblog-nav .is-next{text-align:right;align-items:flex-end}

.mblog-foot-space{padding-bottom:clamp(70px,9vw,110px)}

/* 動きを減らす設定を尊重する */
@media(prefers-reduced-motion:reduce){
  .mblog-card,.mblog-rel,.mblog-nav a,.mblog-share a,.mblog-thumb img{transition:none!important}
  .mblog-card:hover,.mblog-rel:hover,.mblog-nav a:hover,.mblog-share a:hover{transform:none}
}

/* 印刷 */
@media print{
  .mblog-sidebar,.mblog-ad,.mblog-share,.mblog-related,.mblog-nav,.mblog-promo{display:none!important}
  .mblog-layout{display:block;padding:0}
  .mblog-article{max-width:none}
  .mblog-article.mblog-hide-captions figcaption{position:static!important;width:auto;height:auto;clip:auto;clip-path:none;white-space:normal}
}

/* ---------- 公開日・更新日（小さく表示） ---------- */
.mblog-dateline{
  display:flex;gap:16px;flex-wrap:wrap;margin-bottom:2.2em;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;color:var(--grey);
}
.mblog-dateline time{white-space:nowrap}

/* ---------- スマホ用の目次（本文の先頭） ----------
   PCではサイドバーの追従目次を使うため非表示にする。 */
.mblog-toc-mobile{display:none}
@media(max-width:1060px){
  .mblog-toc-mobile{
    display:block;background:#fff;box-shadow:var(--mblog-sh);
    padding:4px 20px;margin:0 0 2.4em;
  }
  .mblog-toc-mobile>summary{
    cursor:pointer;list-style:none;padding:16px 0;
    font-family:var(--font-mono);font-size:10px;letter-spacing:.3em;
    text-transform:uppercase;color:var(--gold);display:flex;align-items:center;justify-content:space-between;
  }
  .mblog-toc-mobile>summary::-webkit-details-marker{display:none}
  .mblog-toc-mobile>summary::after{content:"＋";color:var(--grey);font-size:12px;letter-spacing:0}
  .mblog-toc-mobile[open]>summary::after{content:"−"}
  .mblog-toc-mobile ol{list-style:none;counter-reset:mtocm;margin:0;padding:0 0 14px;border-top:1px solid var(--line)}
  .mblog-toc-mobile li{counter-increment:mtocm}
  .mblog-toc-mobile li a{
    display:flex;gap:11px;align-items:baseline;padding:10px 0;
    font-size:13px;line-height:1.75;color:var(--ink);
  }
  .mblog-toc-mobile li a::before{
    content:counter(mtocm,decimal-leading-zero);
    font-family:var(--font-mono);font-size:9px;letter-spacing:.14em;color:var(--gold);flex:0 0 auto;
  }
  .mblog-toc-mobile li.is-h3 a{padding-left:20px;font-size:12.5px;color:var(--grey)}
}

/* ---------- スマホでの記事ページのサイドバー ----------
   記事の下に回ったサイドバーでは、本文を読み終えた読者に対して
   プロフィール（と自動再生の動画）や、いま読み終えた記事の目次を
   もう一度見せる意味が薄い。人気記事と広告だけを残す。 */
@media(max-width:1060px){
  .single-post .mblog-sidebar .mblog-prof,
  .single-post .mblog-sidebar .mblog-toc{display:none}
}

/* ---------- 追従サイドバー ----------
   サイドバーが画面より高い場合は、いったん最後まで一緒にスクロールし、
   下端まで見えたところで固定する。top の値は blog.js が実測して入れる。 */
@media(min-width:1061px){
  .mblog-sidebar{position:sticky;top:calc(var(--header-h) + 24px);align-self:start}
  /* 目次だけを別に追従させる必要はなくなった */
  .mblog-sticky{position:static}
}