/* ===== ブログ（記事一覧・個別記事・固定ページ）専用スタイル ===== */
body{
  font-family:var(--font-jp);
  color:var(--ink);
  background:var(--paper);
  line-height:1.9;
  font-feature-settings:"palt";
  -webkit-font-smoothing:antialiased;
}

/* header */
.b-header{
  position:sticky;top:0;z-index:10;
  display:flex;justify-content:space-between;align-items:center;
  padding:1.1rem clamp(1.4rem,4vw,3rem);
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.b-header .brand .name{font-family:var(--font-en);font-weight:700;font-size:1.45rem;color:var(--coral);line-height:1.1}
.b-header .brand .tag{font-family:var(--font-en);font-weight:600;font-size:.6rem;letter-spacing:.32em;color:var(--gray);text-transform:uppercase}
.hnav{display:flex;align-items:center;gap:clamp(1rem,3vw,1.8rem);font-family:var(--font-en);font-weight:600;font-size:.85rem;letter-spacing:.1em}
.hnav a{transition:color .3s}
.hnav a:hover{color:var(--coral)}
.hnav .cta{background:var(--coral);color:#fff;padding:.55rem 1.5rem;border-radius:999px;transition:background .3s}
.hnav .cta:hover{background:var(--coral-deep);color:#fff}

/* page head */
.page-head{
  background:var(--coral-mist);
  text-align:center;
  padding:clamp(3.2rem,7vw,5.5rem) 1.4rem;
}
.section-label{
  display:inline-flex;align-items:center;gap:.7rem;
  font-family:var(--font-en);font-weight:600;font-size:.76rem;
  letter-spacing:.32em;color:var(--coral);text-transform:uppercase;
}
.section-label::before,.section-label::after{content:"";width:26px;height:1.5px;background:var(--coral)}
.page-head h1{
  margin-top:.6rem;
  font-size:clamp(1.5rem,3vw,2rem);
  font-weight:700;color:var(--navy);letter-spacing:.12em;
}
.page-head p{margin-top:.8rem;font-size:.95rem}

/* breadcrumb */
.breadcrumb{
  max-width:1020px;margin:0 auto;
  padding:1rem clamp(1.4rem,4vw,2rem) 0;
  font-size:.78rem;color:var(--gray);
}
.breadcrumb a{color:var(--coral)}
.breadcrumb span{padding:0 .5em}

/* list */
.blog-list{
  max-width:1020px;margin:0 auto;
  padding:clamp(2rem,5vw,3.5rem) clamp(1.4rem,4vw,2rem) clamp(4rem,8vw,6rem);
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;
}
.blog-card{
  display:flex;flex-direction:column;gap:.9rem;
  background:#fff;border:1px solid var(--line);border-radius:20px;
  padding:1.8rem 1.6rem;
  transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out),border-color .3s;
}
.blog-card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 34px rgba(29,28,38,.08);
  border-color:rgba(232,93,69,.4);
}
.blog-card .b-meta{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.blog-card time{font-family:var(--font-en);font-weight:600;font-size:.8rem;letter-spacing:.12em;color:var(--coral)}
.blog-card .b-cat{font-size:.72rem;font-weight:700;color:var(--navy);background:var(--coral-mist);border:1px solid var(--line);padding:.2rem .8rem;border-radius:999px}
.blog-card h2{font-size:1.02rem;color:var(--navy);letter-spacing:.04em;line-height:1.6;font-weight:700}
.blog-card p{font-size:.88rem}
.blog-card .b-more{
  margin-top:auto;display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--font-en);font-weight:600;font-size:.8rem;letter-spacing:.14em;
  color:var(--coral);text-transform:uppercase;
}
.blog-card .b-more::after{content:"→";transition:transform .3s var(--ease-out)}
.blog-card:hover .b-more::after{transform:translateX(4px)}

/* pagination */
.blog-pagination{
  max-width:1020px;margin:0 auto;
  padding:0 clamp(1.4rem,4vw,2rem) clamp(4rem,8vw,6rem);
  display:flex;justify-content:center;gap:.6rem;flex-wrap:wrap;
}
.blog-pagination .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:2.6rem;height:2.6rem;padding:0 .8rem;
  border:1px solid var(--line);border-radius:999px;
  font-family:var(--font-en);font-weight:600;font-size:.9rem;color:var(--navy);
  transition:background .3s,color .3s,border-color .3s;
}
.blog-pagination a.page-numbers:hover{border-color:var(--coral);color:var(--coral)}
.blog-pagination .page-numbers.current{background:var(--coral);border-color:var(--coral);color:#fff}

/* article */
.post{
  max-width:760px;margin:0 auto;
  padding:clamp(1.6rem,4vw,2.6rem) clamp(1.4rem,4vw,2rem) clamp(4rem,8vw,6rem);
  line-height:2;
}
.post-meta{display:flex;align-items:center;gap:.9rem;margin-bottom:1rem;flex-wrap:wrap}
.post-meta time{font-family:var(--font-en);font-weight:600;font-size:.82rem;letter-spacing:.12em;color:var(--coral)}
.post-meta .b-cat{font-size:.74rem;font-weight:700;color:var(--navy);background:var(--coral-mist);border:1px solid var(--line);padding:.22rem .9rem;border-radius:999px}
.post h1{
  font-family:var(--font-serif);
  font-size:clamp(1.5rem,3.4vw,2.05rem);
  font-weight:700;color:var(--navy);
  line-height:1.6;letter-spacing:.06em;
  margin-bottom:1.2rem;
}
.post .lead{
  background:var(--coral-mist);
  border-radius:16px;
  padding:1.2rem 1.5rem;
  font-size:.95rem;
  margin-bottom:2.4rem;
}
.post-thumb{border-radius:16px;overflow:hidden;margin-bottom:2rem}
.post-thumb img{width:100%;height:auto;display:block}
.post-body h2{
  font-size:1.2rem;font-weight:700;color:var(--navy);letter-spacing:.06em;line-height:1.7;
  margin:2.6rem 0 1rem;
  padding-left:.9rem;
  border-left:4px solid var(--coral);
}
.post-body h3{font-size:1.02rem;font-weight:700;color:var(--navy);margin:1.8rem 0 .6rem}
.post-body p{margin-bottom:1.2rem;font-size:.95rem}
.post-body ul,.post-body ol{margin:0 0 1.2rem 1.4rem;font-size:.95rem}
.post-body li{margin-bottom:.4rem}
.post-body b,.post-body strong{color:var(--navy)}
.post-body img{border-radius:12px;margin:1.4rem auto}
.post-body a{color:var(--coral);text-decoration:underline;text-underline-offset:2px}
.post-body blockquote{
  border-left:4px solid var(--coral-soft);background:var(--coral-mist);
  border-radius:0 12px 12px 0;padding:.9rem 1.3rem;margin:0 0 1.2rem;color:var(--ink);
}
.note{
  font-size:.85rem;color:var(--gray);
  background:var(--coral-mist);border-radius:12px;
  padding:.9rem 1.2rem;margin-bottom:1.2rem;
}

/* cta */
.post-cta{
  margin-top:3rem;
  background:var(--coral-mist);
  border-radius:20px;
  text-align:center;
  padding:2.2rem 1.6rem;
}
.post-cta p{font-size:.95rem;margin-bottom:1.2rem}
.post-cta .btn{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--coral);color:#fff;font-weight:700;font-size:.98rem;letter-spacing:.04em;
  padding:.95rem 2.4rem;border-radius:999px;
  box-shadow:0 10px 26px rgba(232,93,69,.28);
  transition:transform .4s var(--ease-out),background .3s;
}
.post-cta .btn:hover{transform:translateY(-3px);background:var(--coral-deep)}

/* pager */
.post-pager{
  max-width:760px;margin:0 auto;
  padding:0 clamp(1.4rem,4vw,2rem) clamp(3rem,6vw,4rem);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
}
.post-pager a{
  display:inline-flex;align-items:center;gap:.5rem;
  font-weight:700;font-size:.9rem;color:var(--coral);
  border:2px solid var(--coral);
  padding:.7rem 2rem;border-radius:999px;
  transition:background .3s,color .3s;
}
.post-pager a:hover{background:var(--coral);color:#fff}
.post-pager .to-list{margin:0 auto}

/* footer */
.b-footer{
  background:var(--navy);color:#fff;
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;
  padding:2.2rem clamp(1.4rem,4vw,3rem);
}
.b-footer .name{font-family:var(--font-en);font-weight:700;font-size:1.3rem;color:var(--coral)}
.b-footer .tag{font-family:var(--font-en);font-weight:600;font-size:.58rem;letter-spacing:.32em;color:rgba(255,255,255,.5);text-transform:uppercase}
.b-footer nav{display:flex;gap:1.4rem;font-size:.82rem}
.b-footer nav a{color:rgba(255,255,255,.75);transition:color .3s}
.b-footer nav a:hover{color:#fff}
.b-footer .copy{width:100%;font-family:var(--font-en);font-size:.72rem;letter-spacing:.08em;color:rgba(255,255,255,.45)}

@media (max-width:900px){
  .blog-list{grid-template-columns:1fr}
}