/* TANRENブログ固有の様式。共通の色・余白・角はtokens.cssを使う。 */
body{overflow-x:hidden}
.hd{position:sticky;top:0;z-index:40;height:60px;background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line-strong)}
.hd .vm-wrap{display:flex;align-items:center;width:100%;height:100%;gap:var(--s2)}
.hd .vm-brand{margin-right:var(--s3)}
.hd .vm-btn-secondary{padding:8px 18px;font-size:13px;white-space:nowrap;border-radius:0}
.hd .vm-btn-ghost{white-space:nowrap;border-radius:0}
.blog-intro{padding-top:var(--s7);padding-bottom:var(--s6)}
.blog-intro h1{font-size:clamp(30px,4vw,42px);line-height:1.25;letter-spacing:-.04em;margin:var(--s3) 0 var(--s3);text-wrap:balance}
.blog-intro .lead{max-width:760px;color:var(--text-2);font-size:15px;line-height:1.9;margin:0;text-wrap:pretty}
.blog-list-section{padding:0 0 var(--s8)}
.blog-filter{display:grid;grid-template-columns:minmax(200px,280px) minmax(0,1fr) auto;align-items:center;gap:var(--s4);border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong);padding:var(--s4) 0;margin-bottom:var(--s6)}
.blog-filter .vm-input{min-width:0;border-radius:0}
.category-filter{display:flex;flex-wrap:wrap;gap:var(--s2);min-width:0}
.category-filter .vm-chip-btn{background:transparent;border-color:transparent;border-bottom:2px solid transparent;border-radius:0;padding:3px 6px;color:var(--text-muted)}
.category-filter .vm-chip-btn:hover{background:var(--surface-2);border-color:var(--line-strong);color:var(--text)}
.category-filter .vm-chip-btn[aria-pressed="true"]{background:transparent;border-color:transparent;border-bottom-color:var(--brand);color:var(--brand);font-weight:700}
.blog-count{margin:0;white-space:nowrap;color:var(--text-muted);font-size:13px}
.blog-count .vm-num{color:var(--brand);font-weight:700}
.blog-grid{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1240px}
.post-card{display:flex;min-width:0;min-height:0;flex-direction:column;background:var(--surface);transition:background var(--dur) var(--ease)}
.post-card:hover{background:var(--surface-2)}
.post-card:focus-visible{position:relative;z-index:1}
.card-thumb{aspect-ratio:16/9;overflow:hidden;background:var(--surface-2);border-bottom:1px solid var(--line-strong)}
.card-thumb.is-missing{display:none}
.card-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.card-content{display:flex;min-width:0;flex:1;flex-direction:column;padding:var(--s5)}
.card-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s2);margin:0 0 var(--s3);color:var(--text-muted);font-family:var(--font-mono);font-size:11px;line-height:1.4}
.card-meta span:first-child{color:var(--brand);font-weight:800}
.card-meta span+span{border-left:1px solid var(--line-strong);padding-left:var(--s2)}
.post-card h3{display:-webkit-box;overflow:hidden;margin:0;color:var(--text);font-size:17px;line-height:1.55;font-weight:800;letter-spacing:-.015em;-webkit-box-orient:vertical;-webkit-line-clamp:3;text-wrap:pretty}
.card-excerpt{display:-webkit-box;overflow:hidden;margin:var(--s3) 0 0;color:var(--text-muted);font-size:13px;line-height:1.8;-webkit-box-orient:vertical;-webkit-line-clamp:2;text-wrap:pretty}
.vm-empty{margin:var(--s6) 0 0;padding:var(--s5);border:1px solid var(--line-strong);border-left:3px solid var(--brand);background:var(--surface-2);color:var(--text-2);font-size:14px}
.ft{border-top:1px solid var(--line-strong);padding:var(--s6) 0;color:var(--text-muted);font-size:12.5px}
.ft .vm-wrap{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4)}
.ft a{color:var(--text-muted)}
.ft a:hover{color:var(--text)}

/* 記事 */
.post-page{padding-top:var(--s7);padding-bottom:var(--s8)}
.post-page>h1{max-width:760px;margin:var(--s4) 0 var(--s3);font-size:clamp(28px,3.6vw,38px);line-height:1.4;font-weight:800;letter-spacing:-.02em;text-wrap:balance}
.post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);margin:var(--s2) 0 var(--s4);color:var(--text-muted);font-family:var(--font-mono);font-size:13px;line-height:1.7}
.post-eyecatch{aspect-ratio:16/9;margin:var(--s6) 0 var(--s7);overflow:hidden;border:1px solid var(--line-strong);background:var(--surface-2)}
.post-eyecatch img{display:block;width:100%;height:100%;object-fit:cover}
.post-body{min-width:0;color:var(--text);font-size:16.5px;line-height:2;text-wrap:pretty;line-break:strict;overflow-wrap:anywhere}
.post-body>*:first-child{margin-top:0}
.post-body>*:last-child{margin-bottom:0}
.post-body p{margin:0 0 1.4em}
.post-body h2{margin:var(--s8) 0 var(--s5);padding-bottom:var(--s2);border-bottom:2px solid var(--text);font-size:26px;line-height:1.5;font-weight:800;letter-spacing:-.015em;scroll-margin-top:84px}
.post-body h2::before{display:block;content:"";width:32px;height:3px;margin-bottom:var(--s2);background:var(--brand)}
.post-body h2:first-child{margin-top:0}
.post-body h3{margin:var(--s7) 0 var(--s4);padding:6px 14px;border-left:3px solid var(--brand);background:var(--surface-2);font-size:20px;line-height:1.5;font-weight:800;scroll-margin-top:84px}
.post-body h4{margin:var(--s6) 0 var(--s3);font-size:17px;line-height:1.7;font-weight:800}
.post-body h4::before{margin-right:6px;color:var(--brand);content:"◆";font-size:10px}
.post-body h5,.post-body h6{margin:var(--s5) 0 var(--s2);font-size:15px;line-height:1.7;font-weight:800}
.post-body blockquote{margin:var(--s6) 0;padding:var(--s4) var(--s5);border-left:3px solid var(--brand);background:var(--surface-2);color:var(--text-2);font-size:16px;line-height:1.95}
.post-body strong{color:inherit;font-weight:800}
.post-body a{color:var(--brand);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.post-body a:hover{text-decoration-thickness:2px}
.post-body ul{margin:0 0 var(--s4);padding-left:1.3em;list-style:none;line-height:1.9}
.post-body ul li{position:relative}
.post-body ul li::before{position:absolute;top:.55em;left:-1.3em;color:var(--brand);content:"◆";font-size:9px;line-height:1}
.post-body ol{margin:0 0 var(--s4);padding-left:1.9em;list-style:none;line-height:1.9;counter-reset:item}
.post-body ol>li{position:relative;counter-increment:item}
.post-body ol>li::before{position:absolute;left:-1.9em;color:var(--brand);content:counter(item,decimal-leading-zero) ".";font:800 13px/1.9 var(--font-mono)}
.post-body li+li{margin-top:var(--s2)}
.post-body img{display:block;max-width:100%;height:auto;margin:var(--s6) auto;border:0}
.post-body hr{margin:var(--s7) 0;border:0;border-top:1px solid var(--line-strong)}
.post-body code{border-radius:0}
.post-body pre{max-width:100%;margin:var(--s5) 0;padding:var(--s4);overflow-x:auto;overflow-y:hidden;border:1px solid var(--line-strong);border-radius:0;background:var(--surface-2);color:var(--text);font-size:13px;line-height:1.7;white-space:pre;overflow-wrap:normal}
.post-body pre code{border:0;border-radius:0;background:var(--surface-2);padding:0;white-space:inherit}
.post-body .vm-table-wrap{max-width:100%;margin:var(--s6) 0;overflow-x:auto;overscroll-behavior-x:contain;border:1px solid var(--line-strong)}
.post-body .vm-table{width:100%;min-width:520px;margin:0;border-collapse:collapse;font-size:14.5px;line-height:1.7}
.post-body .vm-table th,.post-body .vm-table td{padding:10px 12px;text-align:left;white-space:normal;border:1px solid var(--line)}
.post-body .vm-table th{background:var(--ink);color:var(--text-inv);font-weight:800}
.post-body .vm-table tbody tr:nth-child(even) td{background:var(--surface-2)}
.post-body .embed{aspect-ratio:16/9;max-width:100%;margin:var(--s6) 0;overflow:hidden;border:1px solid var(--line-strong);background:var(--surface-2)}
.post-body .embed iframe{display:block;width:100%;height:100%;border:0}
.post-body .post-toc{margin:var(--s6) 0;padding:0;border:1px solid var(--line-strong);border-radius:0;background:var(--surface)}
.post-body .post-toc summary{display:flex;align-items:center;padding:var(--s3) var(--s4);cursor:pointer;list-style:none}
.post-body .post-toc summary::-webkit-details-marker{display:none}
.post-body .post-toc summary::marker{content:""}
.post-body .post-toc summary::after{margin-left:0;color:var(--brand);content:"＋";font-family:var(--font-mono);font-size:16px;line-height:1}
.post-body .post-toc[open] summary::after{content:"−"}
.post-body .post-toc-label{color:var(--brand);font-family:var(--font-mono);font-size:11px;font-weight:800;letter-spacing:.18em}
.post-body .post-toc-count{margin-left:auto;padding-right:var(--s3);color:var(--text-muted);font-size:12px}
.post-body .post-toc ol{counter-reset:none;list-style:none}
.post-body .post-toc ol>li{counter-increment:none}
.post-body .post-toc ol>li::before{content:none}
.post-body .post-toc>ol{margin:0;padding:var(--s3) var(--s4) var(--s4);line-height:1.8}
.post-body .post-toc li{line-height:1.8}
.post-body .post-toc li+li{margin-top:var(--s2)}
.post-body .post-toc a{color:var(--text);text-decoration:none}
.post-body .post-toc a:hover{color:var(--brand)}
.post-body .post-toc .vm-num{margin-right:var(--s2);color:var(--brand);font-weight:800}
.post-body .post-toc li>ol{margin:0;padding:var(--s2) 0 var(--s2) 1.6em;font-size:14px}
.post-unavailable{padding:var(--s4);border-left:3px solid var(--brand);background:var(--surface-2);color:var(--text-2)}
.post-tags{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s7);padding-top:var(--s4);border-top:1px solid var(--line-strong)}
.post-tags .vm-chip{border-radius:0}
.post-source{margin:var(--s4) 0 0;color:var(--text-muted);font-size:12px;overflow-wrap:anywhere}
.post-dates{margin:var(--s6) 0 0;text-align:right;color:var(--text-muted);font:12px/1.8 var(--font-mono);white-space:pre-line}
.post-neighbors{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:var(--s7)}
.post-neighbors.is-single{grid-template-columns:minmax(0,1fr)}
.post-neighbor{display:flex;min-width:0;flex-direction:column;gap:var(--s2);padding:var(--s4);background:var(--surface);transition:background var(--dur) var(--ease)}
.post-neighbor:hover{background:var(--surface-2)}
.post-neighbor span{color:var(--brand);font-family:var(--font-mono);font-size:11px;font-weight:800}
.post-neighbor strong{display:block;overflow:hidden;font-size:14px;line-height:1.6;text-overflow:ellipsis;white-space:nowrap}
.post-back{margin:var(--s6) 0 0;text-align:center}
.post-back .vm-btn{border-radius:0}

@media (max-width:1024px){
  .blog-filter{grid-template-columns:minmax(0,240px) minmax(0,1fr) auto}
  .blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:640px){
  .hd .vm-wrap{padding-left:var(--s3);padding-right:var(--s3);gap:var(--s1)}
  .hd .vm-brand{margin-right:0;gap:7px;font-size:11px;letter-spacing:.04em}
  .hd .vm-brandmark{width:28px;height:28px;font-size:10px}
  .hd .vm-btn-ghost{padding-left:var(--s2);padding-right:var(--s2);font-size:12px}
  .hd .vm-btn-secondary{padding-left:var(--s2);padding-right:var(--s2);font-size:12px}
  .blog-intro{padding-top:var(--s6);padding-bottom:var(--s5)}
  .blog-intro h1{font-size:clamp(26px,7vw,34px)}
  .blog-filter{display:flex;flex-direction:column;align-items:stretch;gap:var(--s3);padding:var(--s3) 0;margin-bottom:var(--s5)}
  .blog-filter .vm-input{width:100%;height:44px}
  .category-filter{width:100%;flex-wrap:nowrap;gap:var(--s1);overflow-x:auto;padding-bottom:var(--s1);border-bottom:1px solid var(--line);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .category-filter::-webkit-scrollbar{display:none}
  .category-filter .vm-chip-btn{flex:0 0 auto;min-height:40px;height:40px}
  .blog-count{align-self:flex-end;font-size:12px}
  .blog-grid{grid-template-columns:1fr}
  .card-content{padding:var(--s4)}
  .post-card h3{font-size:16px}
  .card-excerpt{font-size:13px;line-height:1.8;-webkit-line-clamp:2}
  .post-page{padding-top:var(--s6)}
  .post-page>h1{font-size:clamp(23px,6.4vw,30px)}
  .post-meta{font-size:13px}
  .post-eyecatch{margin-top:var(--s5);margin-bottom:var(--s6)}
  .post-body{font-size:16px;line-height:1.95}
  .post-body h2{font-size:22px}
  .post-body h3{font-size:18px}
  .post-body h4{font-size:16px}
  .post-body blockquote{padding:var(--s3) var(--s4)}
  .post-body img{margin-top:var(--s5);margin-bottom:var(--s5)}
  .post-body hr{margin-top:var(--s6);margin-bottom:var(--s6)}
  .post-body .vm-table{font-size:13.5px}
  .post-body .vm-table th,.post-body .vm-table td{padding:8px 10px}
  .post-body .post-toc summary{padding:var(--s3) var(--s3)}
  .post-body .post-toc>ol{padding:var(--s3) var(--s3) var(--s3)}
  .post-body .post-toc li>ol{padding-top:var(--s1);padding-bottom:var(--s1)}
  .post-neighbors{grid-template-columns:1fr}
  .post-neighbor strong{display:-webkit-box;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:2}
  .post-back .vm-btn{width:100%}
  .ft .vm-wrap{align-items:flex-start;flex-direction:column;gap:var(--s2)}
  .ft .vm-spacer{display:none}
}

@media (max-width:480px){
  .hd .vm-wrap{padding-left:var(--s3);padding-right:var(--s3)}
}

@media (pointer:coarse){
  .category-filter .vm-chip-btn,.hd .vm-btn-ghost,.hd .vm-btn-secondary,.post-back .vm-btn,.post-card,.post-neighbor{min-height:40px}
}

@media (prefers-reduced-motion:reduce){
  .post-card,.post-neighbor{transition:none}
}

/* ── グローバルナビ（他ページと同じ並び） ───────────────────────── */
.hd-nav{display:flex;align-items:center;gap:var(--s3);min-width:0}
.hd-nav a{font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--text-2);text-decoration:none;white-space:nowrap;padding:6px 2px;border-bottom:2px solid transparent}
.hd-nav a:hover{color:var(--text)}
.hd-nav a[aria-current="page"]{color:var(--brand);border-bottom-color:var(--brand)}

/* ── 記事ページの2カラム ─────────────────────────────────────── */
.post-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--s6);align-items:start}
.post-layout.is-single{display:block}
.post-layout .post-page{min-width:0;max-width:820px}
.post-aside{position:sticky;top:76px;align-self:start;display:flex;flex-direction:column;gap:var(--s5);padding-top:var(--s7);padding-right:var(--s2);min-width:0;max-height:calc(100vh - 88px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.aside-block{border-top:2px solid var(--text);padding-top:var(--s3);flex:0 0 auto}
.aside-title{margin:0 0 var(--s3);font-size:15px;font-weight:800;letter-spacing:.02em}
.aside-ranklist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.aside-ranklist li+li{border-top:1px solid var(--line)}
.aside-rank{display:grid;grid-template-columns:18px 84px minmax(0,1fr);align-items:center;gap:var(--s2);padding:var(--s2) 0;text-decoration:none;color:inherit}
.aside-rank__no{font-size:13px;font-weight:800;color:var(--brand);text-align:center}
.aside-rank__thumb{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--surface);border:1px solid var(--line)}
.aside-rank__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.aside-rank__title{font-size:12.5px;line-height:1.6;font-weight:600;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.aside-rank:hover .aside-rank__title{color:var(--brand)}
.aside-seminarlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s3)}
.aside-seminar{display:block;text-decoration:none;color:inherit;border:1px solid var(--line);background:var(--surface)}
.aside-seminar:hover{border-color:var(--line-strong)}
.aside-seminar__media{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--bg)}
.aside-seminar__media img{width:100%;height:100%;object-fit:cover;display:block}
.aside-seminar__body{display:block;padding:var(--s3)}
.aside-seminar__meta{display:block;font-size:11px;color:var(--text-muted);letter-spacing:.04em;margin-bottom:4px}
.aside-seminar__title{display:block;font-size:13px;line-height:1.6;font-weight:700}
.aside-seminar__guest{display:block;margin-top:6px;font-size:11.5px;color:var(--text-2)}
.aside-more{display:inline-block;flex:0 0 auto;margin-top:var(--s3);font-size:12.5px;font-weight:700;color:var(--brand);text-decoration:none}
.aside-more:hover{text-decoration:underline}

/* ── 本文上のスライドデッキ ───────────────────────────────────── */
.post-deck{margin:var(--s6) 0;border:1px solid var(--line-strong);background:var(--surface)}
.post-deck__head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:var(--s3) var(--s4);border-bottom:1px solid var(--line)}
.post-deck__label{font-size:12px;font-weight:800;letter-spacing:.08em;color:var(--brand)}
.post-deck__count{font-size:12px;color:var(--text-muted)}
.post-deck__sep{margin:0 4px}
.post-deck__stage{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:var(--s2);padding:var(--s3)}
.post-deck__frame{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--bg);border:1px solid var(--line)}
.post-deck__slide{position:absolute;inset:0;display:block;opacity:0;visibility:hidden;transition:opacity .18s ease}
.post-deck__slide.is-active{opacity:1;visibility:visible}
.post-deck__slide img{width:100%;height:100%;object-fit:contain;display:block}
.post-deck__nav{appearance:none;height:44px;border:1px solid var(--line-strong);background:var(--bg);color:var(--text);font-size:22px;line-height:1;cursor:pointer}
.post-deck__nav:hover{background:var(--surface);border-color:var(--text)}
.post-deck__caption{margin:0;padding:0 var(--s4) var(--s2);font-size:13.5px;font-weight:700;text-align:center}
.post-deck__dots{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;padding:0 var(--s4) var(--s3)}
.post-deck__dot{appearance:none;width:9px;height:9px;padding:0;border:1px solid var(--line-strong);background:transparent;border-radius:50%;cursor:pointer}
.post-deck__dot.is-active{background:var(--brand);border-color:var(--brand)}
.post-deck__hint{margin:0;padding:0 var(--s4) var(--s3);font-size:11.5px;color:var(--text-muted);text-align:center}

@media (max-width:1080px){
  .post-layout{grid-template-columns:minmax(0,1fr)}
  .post-aside{position:static;padding-top:var(--s5);padding-right:0;border-top:1px solid var(--line-strong);max-height:none;overflow:visible}
}
@media (max-width:900px){
  .hd-nav__wide{display:none}
  .hd-nav{gap:var(--s2)}
  .hd-nav a{font-size:12px}
}
@media (max-width:720px){
  .hd-nav{display:none}
  .hd-theme{display:none}
}
@media (max-width:640px){
  .post-deck__stage{grid-template-columns:36px minmax(0,1fr) 36px;padding:var(--s2)}
  .post-deck__nav{height:36px;font-size:18px}
  .post-deck__hint{display:none}
}

/* ── デッキの字幕バーと音声 ─────────────────────────────────── */
.post-deck__head{flex-wrap:wrap}
.post-deck__play{appearance:none;display:inline-flex;align-items:center;gap:8px;margin-left:auto;margin-right:var(--s3);padding:5px 12px;border:1px solid var(--brand);background:transparent;color:var(--brand);font-size:12px;font-weight:800;letter-spacing:.04em;cursor:pointer}
.post-deck__play:hover{background:var(--brand);color:#fff}
.post-deck__play-icon{width:0;height:0;border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent currentColor}
.post-deck__play.is-playing .post-deck__play-icon{width:8px;height:10px;border:0;background:currentColor;box-shadow:inset 2px 0 0 var(--surface),inset -2px 0 0 var(--surface)}
.post-deck__subtitle{margin:0;padding:var(--s3) var(--s4);min-height:3.4em;display:flex;align-items:center;justify-content:center;text-align:center;background:var(--text);color:var(--bg);font-size:14px;line-height:1.7;font-weight:600;text-wrap:pretty}
.post-deck__subtitle:empty{display:none}
@media (max-width:640px){
  .post-deck__play{margin-right:var(--s2);padding:4px 9px;font-size:11px}
  .post-deck__subtitle{font-size:12.5px;padding:var(--s2) var(--s3);min-height:4em}
}

/* サイドバーは本文と別に、単独でスクロールする */
.post-aside::-webkit-scrollbar{width:6px}
.post-aside::-webkit-scrollbar-track{background:var(--line)}
.post-aside::-webkit-scrollbar-thumb{background:var(--line-strong)}
.post-aside:hover::-webkit-scrollbar-thumb{background:var(--text-muted)}

/* hiddenはカードのdisplay:flexより優先し、絞り込み対象をレイアウトから外す。 */
.post-card[hidden],#blog-empty[hidden]{display:none!important}
.blog-filter{grid-template-columns:minmax(0,1fr) auto}
.blog-search-panel{grid-column:1/-1;min-width:0}
.blog-search-panel label{display:block;font-size:20px;font-weight:700;margin-bottom:var(--s3)}
.blog-search-panel .vm-input{width:100%;min-height:48px;font-size:16px}
.blog-search-panel p{font-size:14px;color:var(--text-2);margin:var(--s2) 0 var(--s3)}
.blog-search-examples{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);font-size:14px;color:var(--text-2)}
.blog-search-examples button{font:inherit;color:var(--text);background:var(--surface);border:1px solid var(--line-strong);padding:8px 12px;min-height:44px;cursor:pointer}
.blog-search-examples button:hover{background:var(--surface-2);border-color:var(--brand)}
.blog-search-examples button:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
@media(max-width:640px){.blog-count{white-space:normal}.blog-search-panel label{font-size:18px}}