/* しずぬり ブログ受け皿 — 本番 /assets/css/style.css のトークンを使う */
.wrap{width:min(var(--container,1160px),100% - 40px);margin-inline:auto}
.wrap-narrow{width:min(760px,100% - 40px);margin-inline:auto}

.blog-hero{background:var(--navy);color:#fff;padding:132px 0 60px}
.blog-hero .h-rule{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.blog-hero .h-rule span{flex:1;height:1px;background:rgba(255,255,255,.28)}
.blog-hero .h-rule em{font-style:normal;font-family:var(--sans);font-size:.72rem;
  letter-spacing:.22em;color:var(--gold)}
.blog-hero .kicker{display:block;font-size:.72rem;letter-spacing:.22em;
  color:var(--gold);margin-bottom:14px}
.blog-hero h1{font-family:var(--serif);font-size:clamp(1.55rem,4.2vw,2.5rem);
  line-height:1.5;color:#fff;word-break:auto-phrase;overflow-wrap:anywhere}
.blog-hero h1 em{font-style:normal;color:var(--gold)}
.blog-hero .lead{margin-top:18px;color:#dbe3ef;font-size:.98rem;line-height:2;
  word-break:auto-phrase;overflow-wrap:anywhere}
.blog-hero .count{display:inline-block;margin-top:22px;font-size:.72rem;
  letter-spacing:.18em;color:#aebbcd}

.filter-bar{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
  padding:34px 20px 0;margin:0 auto 36px;max-width:1000px}
.filter-bar button{min-height:40px;padding:9px 18px;border:1px solid var(--line-2);
  background:var(--surface);color:var(--muted);border-radius:999px;font-size:.84rem;
  cursor:pointer;transition:.2s var(--ease,ease)}
.filter-bar button[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}

.blog-body{background:var(--paper);padding:10px 0 84px}
.post-grid{display:grid;gap:24px;grid-template-columns:repeat(auto-fill,minmax(304px,1fr))}
.post-card{display:block;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius,14px);padding:26px 24px 22px;box-shadow:var(--shadow-sm);
  transition:.24s var(--ease,ease)}
.post-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--line-2)}
.post-card.is-hidden{display:none}
.post-card .cat{display:inline-block;font-size:.72rem;letter-spacing:.08em;
  color:var(--accent-ink);background:var(--accent-soft);border-radius:999px;padding:4px 12px}
.post-card h2{font-family:var(--serif);font-size:1.06rem;line-height:1.65;margin:14px 0 10px;
  color:var(--ink);word-break:auto-phrase;overflow-wrap:anywhere}
.post-card p{color:var(--muted);font-size:.9rem;line-height:1.95;
  word-break:auto-phrase;overflow-wrap:anywhere}
.post-card .foot{display:flex;justify-content:space-between;align-items:center;
  margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.post-card .date{font-size:.78rem;color:var(--muted)}
.post-card .more{font-size:.78rem;letter-spacing:.06em;color:var(--accent-ink)}
.no-hit{grid-column:1/-1;text-align:center;color:var(--muted);padding:40px 0}

.post-hero{background:var(--navy);color:#fff;padding:126px 0 54px}
.post-hero .crumb{font-size:.78rem;color:#b9c6d8;margin-bottom:18px}
.post-hero .crumb a{display:inline-flex;align-items:center;min-height:40px;color:#b9c6d8;text-decoration:underline}
.post-hero .cat{display:inline-block;font-size:.72rem;letter-spacing:.08em;color:var(--navy);
  background:var(--gold);border-radius:999px;padding:5px 13px}
.post-hero h1{font-family:var(--serif);font-size:clamp(1.4rem,4vw,2.15rem);line-height:1.55;
  color:#fff;margin:16px 0 0;word-break:auto-phrase;overflow-wrap:anywhere}
.post-hero .meta{display:flex;gap:18px;flex-wrap:wrap;margin-top:18px;
  font-size:.8rem;color:#aebbcd}

.post-body{background:var(--surface);padding:56px 0 20px}
.post-article{font-size:1rem;line-height:2.05;color:var(--ink);
  word-break:auto-phrase;overflow-wrap:anywhere}
.post-article h2{font-family:var(--serif);font-size:1.28rem;line-height:1.6;
  margin:46px 0 18px;padding-left:14px;border-left:4px solid var(--accent)}
.post-article h3{font-family:var(--serif);font-size:1.08rem;margin:32px 0 12px;color:var(--navy)}
.post-article p{margin:0 0 20px}
.post-article ul,.post-article ol{margin:0 0 22px;padding-left:1.3em;list-style:disc}
.post-article ol{list-style:decimal}
.post-article li{margin-bottom:9px}
.post-article a{color:var(--accent-ink);text-decoration:underline}
.post-article img{border-radius:var(--radius-sm,10px);margin:14px 0}
.post-article table{width:100%;border-collapse:collapse;font-size:.92rem}
.post-article .table-scroll,.post-article figure.table{overflow-x:auto}
.post-article th,.post-article td{border:1px solid var(--line);padding:10px 12px;text-align:left}
.post-article th{background:var(--paper-2)}
.post-article blockquote{margin:0 0 22px;padding:14px 18px;background:var(--paper);
  border-left:3px solid var(--line-2);color:var(--muted)}

.post-tags{display:flex;flex-wrap:wrap;gap:8px;margin:30px 0 0}
.post-tags span{font-size:.76rem;color:var(--muted);background:var(--paper-2);
  border-radius:999px;padding:5px 12px}

.post-cta{margin:44px 0 0;background:var(--navy-900);color:#fff;border-radius:var(--radius-lg,22px);
  padding:38px 30px;text-align:center}
.post-cta .eyebrow{font-size:.72rem;letter-spacing:.2em;color:var(--gold);margin:0 0 12px}
.post-cta h2{font-family:var(--serif);font-size:1.2rem;line-height:1.6;color:#fff;
  word-break:auto-phrase;overflow-wrap:anywhere}
.post-cta .lead{margin:14px 0 22px;color:#d5deea;font-size:.93rem;line-height:2;
  word-break:auto-phrase;overflow-wrap:anywhere}
.post-cta .note{margin-top:14px;font-size:.78rem;color:#9daabd}
.post-cta .btn{min-height:52px}

.post-nav{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:40px 0 0}
.post-nav:has(> a:only-child){grid-template-columns:1fr;max-width:420px}
.post-nav a{display:block;min-height:64px;border:1px solid var(--line);border-radius:var(--radius,14px);
  padding:16px 18px;background:var(--surface);transition:.2s var(--ease,ease)}
.post-nav a:hover{border-color:var(--accent);transform:translateY(-2px)}
.post-nav .lbl{display:block;font-size:.7rem;letter-spacing:.18em;color:var(--accent-ink)}
.post-nav .ttl{display:block;margin-top:7px;font-size:.88rem;line-height:1.65;color:var(--ink);
  word-break:auto-phrase;overflow-wrap:anywhere}
.post-nav .next,.post-nav .next .ttl{text-align:right}

.related{background:var(--paper);padding:64px 0}
.related .head{margin-bottom:26px;text-align:center}
.related .h-rule{display:flex;align-items:center;gap:14px;justify-content:center;margin-bottom:12px}
.related .h-rule span{width:36px;height:1px;background:var(--line-2)}
.related .h-rule em{font-style:normal;font-size:.72rem;letter-spacing:.2em;color:var(--accent-ink)}
.related .jp-h{font-family:var(--serif);font-size:1.24rem;color:var(--ink)}

.post-back{text-align:center;padding:34px 20px 76px;background:var(--paper)}
.post-back a{display:inline-flex;align-items:center;min-height:44px;padding:10px 22px;
  border:1px solid var(--line-2);border-radius:999px;background:var(--surface);
  font-size:.88rem;color:var(--ink)}

@media (max-width:760px){
  .blog-hero{padding:106px 0 44px}
  .post-hero{padding:104px 0 40px}
  .post-grid{grid-template-columns:1fr}
  .post-nav{grid-template-columns:1fr}
  .post-nav .next,.post-nav .next .ttl{text-align:left}
  .post-cta{padding:30px 20px}
  .related{padding:48px 0}
}