/* =========================================================
   お役立ち情報・ブログ（投稿）スタイル
   site.css の変数を利用
   ========================================================= */

.blog-shell, .post-shell{
  padding: clamp(120px, 14vw, 180px) 0 clamp(80px, 10vw, 130px);
  background: var(--paper);
}

/* ---- 見出し ---- */
.blog-head{ max-width: 760px; margin: 0 auto clamp(36px, 5vw, 56px); text-align: center; }
.blog-head .crumb{
  display:flex; justify-content:center; align-items:center; gap:12px;
  font-family: var(--mono); font-size:10px; letter-spacing:0.24em; text-transform:uppercase;
  color: var(--muted); margin-bottom: 20px;
}
.blog-head .crumb a{ color: var(--muted); }
.blog-head .crumb .sep{ color: var(--rule-2); }
.blog-head .eyebrow-en{
  font-family: var(--display-en); font-style: italic; font-size: 13px;
  color: var(--navy); letter-spacing: 0.14em; margin-bottom: 14px;
}
.blog-head h1{
  font-family: var(--display-jp); font-weight: 500;
  font-size: clamp(28px, 4vw, 46px); line-height: 1.4; letter-spacing: 0.08em;
  color: var(--ink); margin: 0 0 16px;
}
.blog-head .blog-lead{
  font-family: var(--display-jp); font-size: 14.5px; line-height: 2;
  color: var(--ink-3); letter-spacing: 0.06em; margin: 0;
}

/* ---- カテゴリタブ ---- */
.blog-cats{
  display:flex; flex-wrap:wrap; justify-content:center; gap: 10px;
  margin: 0 0 clamp(36px, 4vw, 52px);
}
.blog-cats a{
  padding: 9px 18px; border: 1px solid var(--rule-2);
  font-family: var(--display-jp); font-size: 13px; letter-spacing: 0.06em;
  color: var(--ink-2); white-space: nowrap;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.blog-cats a:hover{ border-color: var(--navy); color: var(--navy); }
.blog-cats a.active{ background: var(--navy); color: var(--white); border-color: var(--navy); }

/* ---- 記事グリッド ---- */
.blog-list{
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 3vw, 44px) clamp(22px, 2.4vw, 32px);
  max-width: var(--maxw); margin: 0 auto;
}
.blog-card{ display:flex; flex-direction:column; gap:14px; min-width: 0; }
.blog-card .thumb{
  aspect-ratio: 16/10; overflow:hidden; background: var(--paper-2);
  background-image: repeating-linear-gradient(135deg, transparent 0 14px, rgba(0,0,0,.04) 14px 15px);
}
.blog-card .thumb img{ width:100%; height:100%; object-fit:cover; transition: transform .7s ease; }
.blog-card:hover .thumb img{ transform: scale(1.05); }
.blog-card .meta{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  font-family: var(--mono); font-size:10px; letter-spacing:0.14em; text-transform:uppercase;
  color: var(--muted);
}
.blog-card .meta .cat{ color: var(--ember); }
.blog-card h3{
  font-family: var(--display-jp); font-weight:500;
  font-size:17px; line-height:1.6; letter-spacing:0.04em; color: var(--ink); margin:0;
  line-break: strict; overflow-wrap: anywhere;
}
.blog-card .excerpt{
  font-family: var(--display-jp); font-size:13px; line-height:1.9;
  color: var(--muted); letter-spacing:0.04em; margin:0;
}

.blog-empty{ text-align:center; color: var(--ink-3); font-family: var(--display-jp); padding: 60px 0; }

/* ---- ページネーション ---- */
.blog-pagination{ margin-top: clamp(40px, 5vw, 64px); text-align:center; }
.blog-pagination ul.page-numbers{
  list-style:none; margin:0; padding:0;
  display:inline-flex; flex-wrap:wrap; align-items:center; justify-content:center;
}
.blog-pagination ul.page-numbers li{ list-style:none; margin:0; padding:0; }
.blog-pagination .page-numbers{
  display:inline-flex; align-items:center; justify-content:center;
  min-width: 40px; height: 40px; padding: 0 12px; margin: 0 3px;
  border: 1px solid var(--rule-2); font-family: var(--display-en); font-style: italic;
  font-size: 14px; color: var(--ink-2);
}
.blog-pagination .page-numbers.current{ background: var(--navy); color: var(--white); border-color: var(--navy); }
.blog-pagination .page-numbers:hover{ border-color: var(--navy); }

/* =========================================================
   個別記事（single）
   ========================================================= */
.post-shell .container{ max-width: 820px; }
.post-head{ margin-bottom: clamp(28px, 4vw, 44px); }
.post-head .crumb{
  display:flex; align-items:center; gap:12px;
  font-family: var(--mono); font-size:10px; letter-spacing:0.24em; text-transform:uppercase;
  color: var(--muted); margin-bottom: 22px;
}
.post-head .crumb a{ color: var(--muted); }
.post-head .crumb .sep{ color: var(--rule-2); }
.post-head .meta{
  display:flex; align-items:center; gap:12px;
  font-family: var(--mono); font-size:11px; letter-spacing:0.14em; text-transform:uppercase;
  color: var(--muted); margin-bottom: 16px;
}
.post-head .meta .cat{ color: var(--ember); }
.post-head h1{
  font-family: var(--display-jp); font-weight:500;
  font-size: clamp(26px, 3.6vw, 42px); line-height:1.5; letter-spacing:0.06em;
  color: var(--ink); margin:0;
}
.post-thumb{ margin: clamp(24px,3vw,40px) 0; }
.post-thumb img{ width:100%; height:auto; display:block; }
.post-foot{
  margin-top: clamp(40px, 5vw, 64px); padding-top: 28px;
  border-top: 1px solid var(--rule);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; align-items:center;
}
.post-foot .back{
  font-family: var(--display-en); font-style: italic; font-size: 13px;
  color: var(--navy); letter-spacing: 0.06em;
}

/* ---- ブログ本文は読みやすさ優先でゴシック系に統一 ---- */
.blog-shell,
.post-shell,
.blog-head h1,
.blog-head .blog-lead,
.blog-cats a,
.blog-card h3,
.blog-card .excerpt,
.blog-empty,
.post-head h1,
.post-body,
.post-body :where(p, li, dt, dd, figcaption, blockquote, table, th, td),
.post-body :where(h2, h3, h4, h5, h6),
.post-body .wp-block-button__link{
  font-family: var(--sans-jp), "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
}

.post-head h1,
.post-body :where(h2, h3, h4, h5, h6){
  font-weight: 700;
  letter-spacing: 0.02em;
}

.post-body{
  font-size: 16px;
  line-height: 2;
  letter-spacing: 0.02em;
}

.page-content.post-body,
.page-content.post-body :where(p, li, dt, dd, figcaption, blockquote, table, th, td),
.page-content.post-body :where(h2, h3, h4, h5, h6),
.page-content.post-body .wp-block-button__link{
  font-family: var(--sans-jp), "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
}

.page-content.post-body :where(h2, h3, h4, h5, h6){
  font-weight: 700;
  letter-spacing: 0.02em;
}

.post-body :where(p, li){
  line-height: 2;
}

.post-body :where(h2){
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.55;
}

.post-body :where(h3){
  font-size: clamp(18px, 2vw, 23px);
  line-height: 1.6;
}

/* ---- ブログ一覧カードもゴシック系を明示 ---- */
.blog-shell .blog-card h3,
.blog-shell .blog-card .excerpt,
.blog-shell .blog-head h1,
.blog-shell .blog-head .blog-lead,
.blog-shell .blog-cats a,
.blog-shell .blog-empty{
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "Meiryo", sans-serif;
}

.blog-shell .blog-card h3{
  font-weight: 700;
  letter-spacing: 0.02em;
}

.blog-shell .blog-card .excerpt{
  font-weight: 400;
  letter-spacing: 0.02em;
}

@media (max-width: 960px){
  .blog-list{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .blog-shell{
    overflow-x: clip;
  }

  .blog-shell .container{
    width: 100%;
    min-width: 0;
    overflow: hidden;
    padding-left: 20px;
    padding-right: 20px;
  }

  .blog-head,
  .blog-head .blog-lead,
  .blog-list,
  .blog-card,
  .blog-card .thumb,
  .blog-card h3,
  .blog-card .excerpt{
    max-width: 100%;
  }

  .blog-head .blog-lead{
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .blog-head h1,
  .blog-head .blog-lead,
  .blog-card h3,
  .blog-card .excerpt{
    word-break: normal;
    line-break: auto;
    overflow-wrap: anywhere;
    text-wrap: auto;
  }

  .blog-cats{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    max-width: 100%;
  }

  .blog-cats a{
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: normal;
    text-align: center;
    padding: 8px 14px;
    min-width: 0;
  }

  .blog-list{
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }

  .blog-card .thumb img{
    min-width: 0;
  }

  .blog-card h3{
    font-size: 16px;
  }
}