/* =========================================================
   Comtri Corporate — blog.css
   代表ブログ（投稿）一覧 /blog/ と記事詳細 single
   main.css のトークン／既存クラスを前提に上乗せ
   ========================================================= */

/* ---------- 一覧 ---------- */
.bl-grid{display:grid;gap:clamp(20px,2.6vw,30px);grid-template-columns:1fr}
@media(min-width:700px){.bl-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.bl-grid{grid-template-columns:repeat(3,1fr)}}

.bl-card{
  display:flex;flex-direction:column;gap:13px;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:16px 16px 22px;overflow:hidden;
  transition:transform .35s cubic-bezier(.2,.8,.3,1),box-shadow .35s,border-color .35s;
}
.bl-card:hover{transform:translateY(-6px);box-shadow:0 24px 48px -22px rgba(11,30,48,.24);border-color:rgba(30,115,190,.34)}
.bl-thumb{
  width:100%;aspect-ratio:16/9;object-fit:cover;display:block;
  border-radius:13px;border:1px solid var(--line);background:var(--ice);
}
.bl-thumb-ph{display:grid;place-items:center;color:var(--blue-deep);font-family:var(--latin);font-weight:800;letter-spacing:.2em;font-size:.72rem}
.bl-meta{display:flex;align-items:center;gap:10px;font-family:var(--latin);font-size:.74rem;font-weight:700;letter-spacing:.06em;color:var(--muted)}
.bl-meta .cat{color:var(--blue-deep);background:var(--ice-2);border-radius:999px;padding:2px 10px;letter-spacing:.04em}
.bl-card h3{margin:0;font-size:1.04rem;font-weight:800;line-height:1.65;color:var(--text)}
.bl-card p{margin:0;font-size:.86rem;line-height:1.9;color:var(--muted)}
.bl-card .more{
  margin-top:auto;padding-top:6px;display:inline-flex;align-items:center;gap:7px;
  font-size:.8rem;font-weight:800;color:var(--blue-deep);
}
.bl-card .more svg{transition:transform .3s cubic-bezier(.2,.8,.3,1)}
.bl-card:hover .more svg{transform:translateX(5px)}

/* ページ送り */
.bl-nav{margin-top:clamp(38px,5vw,56px);display:flex;justify-content:center}
.bl-nav .page-numbers{
  display:inline-grid;place-items:center;min-width:42px;height:42px;padding:0 12px;margin:0 4px;
  border:1px solid var(--line);border-radius:12px;background:var(--white);
  font-family:var(--latin);font-weight:700;font-size:.88rem;color:var(--text);
  transition:border-color .25s,color .25s,background .25s;
}
.bl-nav .page-numbers:hover{border-color:var(--blue);color:var(--blue-ink)}
.bl-nav .page-numbers.current{background:var(--navy);border-color:var(--navy);color:#fff}
.bl-nav .page-numbers.dots{border:0;background:transparent}

/* ---------- 記事詳細 ---------- */
.bl-hero .wrap{max-width:860px}
.bl-date{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  font-family:var(--latin);font-size:.8rem;font-weight:700;letter-spacing:.08em;color:var(--muted);
  margin-bottom:14px;
}
.bl-date .cat{color:var(--blue-deep);background:var(--ice-2);border-radius:999px;padding:3px 12px}
.bl-hero h1{
  margin:0;font-weight:800;letter-spacing:-.005em;line-height:1.5;color:var(--navy);
  font-size:clamp(1.6rem,3.6vw,2.5rem);
}
.bl-eyecatch{
  width:100%;aspect-ratio:16/9;object-fit:cover;display:block;
  border-radius:var(--r);border:1px solid var(--line);margin-top:clamp(26px,3.4vw,40px);
  box-shadow:0 30px 70px -34px rgba(11,30,48,.42);
}

/* 本文 */
.bl-body{max-width:760px;margin-inline:auto}
.bl-body > *:first-child{margin-top:0}
.bl-body h2{
  font-weight:800;font-size:clamp(1.24rem,2.4vw,1.5rem);color:var(--navy);
  margin:2.4em 0 .8em;line-height:1.55;padding-left:15px;border-left:4px solid var(--blue);
}
.bl-body h3{font-weight:800;font-size:1.12rem;color:var(--navy);margin:2em 0 .6em;line-height:1.6}
.bl-body h4{font-weight:800;font-size:1rem;color:var(--navy);margin:1.7em 0 .5em}
.bl-body p{color:var(--text);line-height:2.15;font-size:1rem;margin:0 0 1.5em}
.bl-body a{color:var(--blue-deep);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.bl-body a:hover{color:var(--blue-ink)}
.bl-body ul,.bl-body ol{margin:0 0 1.6em;padding-left:1.4em}
.bl-body li{color:var(--text);line-height:2.05;margin-bottom:.5em}
.bl-body li::marker{color:var(--blue-deep)}
.bl-body img{max-width:100%;height:auto;border-radius:14px;display:block;margin:1.8em auto}
.bl-body figure{margin:1.8em 0}
.bl-body figcaption{font-size:.82rem;color:var(--muted);text-align:center;margin-top:.7em;line-height:1.8}
.bl-body blockquote{
  margin:1.9em 0;padding:20px 24px;background:var(--ice);border-left:4px solid var(--blue);
  border-radius:0 12px 12px 0;
}
.bl-body blockquote p{margin:0;color:var(--muted);font-size:.95rem}
.bl-body strong{font-weight:800;color:var(--navy)}
.bl-body hr{border:0;border-top:1px solid var(--line);margin:2.6em 0}
.bl-body table{width:100%;border-collapse:collapse;margin:1.8em 0;font-size:.92rem;display:block;overflow-x:auto}
.bl-body th,.bl-body td{border:1px solid var(--line);padding:10px 13px;text-align:left}
.bl-body th{background:var(--ice);font-weight:800;color:var(--navy)}
.bl-body iframe{max-width:100%;border-radius:14px}

/* 前後の記事 */
.bl-pn{
  max-width:760px;margin:clamp(44px,6vw,68px) auto 0;
  display:grid;gap:14px;grid-template-columns:1fr;
}
@media(min-width:700px){.bl-pn{grid-template-columns:1fr 1fr}}
.bl-pn a{
  display:flex;flex-direction:column;gap:7px;
  border:1px solid var(--line);border-radius:14px;padding:16px 18px;background:var(--white);
  transition:border-color .3s,transform .3s;
}
.bl-pn a:hover{border-color:var(--blue);transform:translateY(-3px)}
.bl-pn .dir{font-family:var(--latin);font-size:.7rem;font-weight:800;letter-spacing:.16em;color:var(--blue-deep)}
.bl-pn .ttl{font-size:.9rem;font-weight:700;line-height:1.75;color:var(--text)}
.bl-pn .next{text-align:right}
.bl-pn .next .ttl,.bl-pn .next .dir{text-align:right}

/* 記事下の関連 */
.bl-rel-head{margin-bottom:clamp(24px,3vw,34px)}