:root{
  --ink:#26345c;
  --ink-2:#1f2a49;
  --bg:#ffffff;
  --muted:#6b7280;
  --line:#cfd6e5;
  --pill:#d7eef1;
  --quote:#eaf3ff;
  --card-bg:#ffffff;
  --shadow:0 0 0 0 rgba(0,0,0,0);
  --radius:18px;
}

/* --- Tags / Taxonomy --- */
.taglist{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start;margin-top:8px;}
.taglist .pill{display:inline-flex;align-items:center;gap:8px;}
.pill__count{display:inline-flex;align-items:center;justify-content:center;min-width:1.6em;height:1.6em;padding:0 6px;border-radius:999px;background:#d9d9d9;color:#111;font-size:12px;line-height:1;}

.taxo-head{display:flex;flex-direction:column;gap:8px;margin-bottom:14px;}
.taxo-kicker{letter-spacing:0.12em;color:var(--accent);}
.taxo-title{margin:0;font-size:34px;}

@media (max-width: 860px){
  .taxo-title{font-size:28px;}
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:#111827;
  font-family:"Noto Sans JP", "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height:1.8;
}
img{max-width:100%; height:auto; display:block;}
a{color:var(--ink); text-decoration:underline; text-underline-offset:3px;}
a:hover{opacity:.85;}

/* Typography */
.h-font, header, footer, .sidebar, .topnav{
  font-family:"Yusei Magic", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* 最大幅は1100px（指定） */
.container{width:min(1100px, calc(100% - 32px)); margin:0 auto;}

/* Top header */
.topbar{padding:20px 0 10px;}
.topnav{display:flex; align-items:center; justify-content:space-between; gap:16px;}
.site-title{display:flex; align-items:center; gap:10px; font-size:22px; font-weight:700; letter-spacing:.02em; text-decoration:none;}
.site-title{color:#111827; text-decoration:none;}
.site-logo{height:28px; width:auto; display:block;}
.nav-links{display:flex; align-items:center; gap:18px; flex-wrap:wrap;}
.nav-links a{display:flex; align-items:center; gap:6px; text-decoration:none; color:#111827; font-size:14px;}
.nav-links .icon{font-size:16px; color:#111827;}

/* Hero */
.hero{margin:6px auto 26px; overflow:hidden;}
.hero{display:flex; justify-content:center;}
.hero img{width:100%; max-width:100%; border-radius:0; margin:0 auto;}

/* Layout */
.main-grid{
  display:grid;
  grid-template-columns: 1fr 320px;
  gap:28px;
  align-items:start;
}

/* Cards (home/tag list) */
.cards{display:grid; grid-template-columns:1fr 1fr; gap:22px;}
.card{
  border:1px solid var(--ink);
  border-radius:22px;
  overflow:hidden;
  background:var(--card-bg);
  display:flex;
  flex-direction:column;
  min-height:420px;
}
.card-media{flex:1; padding:0;}
.card-media .frame{
  background:#8fbfd0;
  position:relative;
  overflow:hidden;
  height:100%;
  /* 画像が上半分いっぱい：カードの上側を覆う */
  border-bottom:1px solid var(--ink);
}
.card-media img{width:100%; height:100%; object-fit:cover;}
/* 旧リボン帯（不要になったため非表示） */
.card-media .vlabel{display:none;}

.card-body{flex:1; padding:16px 18px 14px; display:flex; flex-direction:column; justify-content:flex-start;}
.card-title{margin:0 0 10px; font-size:22px; line-height:1.2; color:var(--ink);}
.card-meta{display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:12px; color:#111827;}
.meta-line{display:flex; align-items:center; gap:6px;}
.meta-line .icon{font-size:14px;}
.pills{display:flex; gap:6px; flex-wrap:wrap;}
.pill{display:inline-block; padding:2px 10px; background:var(--pill); border-radius:999px; font-size:11px; text-decoration:none; color:#111827;}

/* Pagination */
.pager{display:flex; justify-content:center; gap:10px; margin:18px 0 0;}
.pager a, .pager span{
  width:26px; height:26px; border-radius:6px;
  border:2px solid var(--ink);
  display:grid; place-items:center;
  text-decoration:none; font-size:12px;
}
.pager .active{background:var(--ink); color:#fff;}

/* Sidebar */
.sidebar{padding-top:6px;}
.section-title{
  display:flex; align-items:center; gap:10px;
  margin:24px 0 10px;
  color:#111827;
}
.section-title .bar{width:8px; height:26px; background:var(--ink); border-radius:2px;}
.section-title h3{margin:0; font-size:22px; letter-spacing:.06em;}
.sidebar p{margin:0 0 10px; font-size:14px;}
.new-list{display:grid; gap:10px;}
.new-item{
  border:2px solid #111827;
  border-radius:18px;
  padding:10px 12px;
  display:flex; align-items:flex-end; justify-content:space-between; gap:12px;
  text-decoration:none;
  color:#111827;
}
.new-item .t{font-size:13px; line-height:1.3;}
.new-item .d{font-size:12px; color:#111827; white-space:nowrap;}
.more-link{display:block; margin:14px 0 0; text-align:right; font-size:14px;}

.archive-pills{display:flex; flex-wrap:wrap; gap:8px;}

/* Single */
.article-wrap{width:min(700px, calc(100% - 32px)); margin:0 auto;}
.article-hero{
  background:var(--ink);
  padding:16px;
  border-radius:0;
  margin:10px auto 14px;
}
.article-hero .frame{background:#8fbfd0; border-radius:18px; overflow:hidden; border:4px solid var(--ink);}
.article-hero img{width:100%; object-fit:cover;}

.article-title{font-size:34px; line-height:1.2; color:var(--ink); margin:10px 0 8px;}
.article-meta{display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;

  /* 本文に入る前の余白（約4行分） */
  margin-bottom: 64px;}

.content{font-size:15px;}
.content h2{color:var(--ink); margin:28px 0 10px; font-size:22px;}
.content h3{color:var(--ink); margin:22px 0 8px; font-size:18px;}
.content h4{color:var(--ink); margin:18px 0 6px; font-size:16px;}
.content ul{padding-left:1.2em;}
.content blockquote{
  margin:22px 0;
  padding:16px 18px;
  background:var(--quote);
  border-radius:12px;
  color:#111827;
}
.content hr{border:0; border-top:2px solid var(--line); margin:28px 0;}

.figure-note{font-size:12px; color:#111827; margin:10px 0 6px;}

/* Link card shortcode */
.linkcard{border:2px solid #111827; border-radius:14px; overflow:hidden; display:flex; text-decoration:none; color:#111827; margin:18px 0;}
.linkcard__thumb{width:160px; min-width:160px; background:#6b7280; display:grid; place-items:center;}
.linkcard__thumb img{width:100%; height:100%; object-fit:cover;}
.linkcard__placeholder{width:100%; height:100%; display:grid; place-items:center; color:#163a70; font-size:22px; font-weight:700;}
.linkcard__meta{padding:12px 14px; flex:1;}
.linkcard__title{font-size:14px; font-weight:700; margin:0 0 6px;}
.linkcard__desc{font-size:12px; color:#111827; margin:0 0 6px;}
.linkcard__url{font-size:12px; color:#111827; word-break:break-all;}

/* Prev/Next */
.post-nav{display:flex; justify-content:space-between; align-items:center; gap:16px; margin:26px 0 18px;}
.post-nav a{display:flex; align-items:center; gap:8px; text-decoration:none; font-size:13px;}
.post-nav .arrow{font-size:18px;}

/* Footer */
.footer{margin-top:28px; background:var(--ink); color:#fff; padding:18px 0;}
.footer .container{display:flex; justify-content:center;}
.footer small{opacity:.95;}

/* Responsive */
@media (max-width: 1024px){
  .main-grid{grid-template-columns:1fr;}
  .sidebar{width:min(700px, calc(100% - 32px)); margin:0 auto;}
}
@media (max-width: 820px){
  .cards{grid-template-columns:1fr;}
  .topbar{padding:16px 0 8px;}
  .site-title{font-size:20px;}
  .nav-links{gap:12px;}
}

/* ★スマホは 375px 以下に変更（元: 480px） */
@media (max-width: 375px){
  .container{width:calc(100% - 24px);}
  .article-title{font-size:28px;}
  .card-title{font-size:20px;}
  .linkcard{flex-direction:row;}
  .linkcard .thumb{width:140px; min-width:140px;}
}

/* --- PaperMod-ish tags (only /tags/ list) --- */
.pagehead{padding:10px 0 0;}
.pagehead__kicker{letter-spacing:.14em;color:var(--ink);font-size:12px;}
/* ★タイトル下に余白を入れて、チップと重ならないようにする */
.pagehead__title{margin:0 0 14px 0;font-size:40px;line-height:1.05;color:#111827;}

/* ★タグチップの並びを安定させる */
.pm-taglist{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px;}
.pm-tag{
  background:#f3f4f6;
  border:1px solid #e5e7eb;
  padding:8px 12px;
  border-radius:999px;
  text-decoration:none;
  color:#111827;
}
.pm-tag:hover{background:#eef2ff;}
.pm-tag__name{font-size:14px;}
.pm-tag__count{
  background:#e5e7eb;
  color:#111827;
  font-weight:700;
}

/* ★スマホは 375px 以下に変更（元: 480px） */
@media (max-width: 375px){
  .pagehead__title{font-size:32px;}
  .pm-tag{padding:7px 11px;}
}
/* Single page: 本文末尾の区切り線 */
.article-wrap .content hr{
  border:0;
  border-top:1px solid var(--line);

  /* 本文 → hr の余白（約4行分） */
  margin-top: 72px;

  /* hr → PREV/NEXT の余白 */
  margin-bottom: 24px;
}