/* トップページのブログ新着（タイトル帯はClaude Design 2026-10-25） */
.blog-strip { padding: 8px 0 0; }
/* ===== ここから帯（.blog-strip-head の中だけに効きます） ===== */
.blog-strip-head {
  --bsh-deep: #194d22;
  --bsh-green: #2f7b33;
  --bsh-pale: #e8f4df;
  --bsh-gold: #f4bd2a;
  --bsh-line: #d6dfcc;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px 24px;
  box-sizing: border-box;
  width: 100%;
  min-height: 72px;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--bsh-line);
  color: var(--bsh-deep);
  font-family: inherit;
}
.blog-strip-head *, .blog-strip-head *::before, .blog-strip-head *::after { box-sizing: border-box; }
.blog-strip-head::after {
  content: "";
  position: absolute; left: 0; bottom: -2px;
  width: 64px; height: 3px;
  background: var(--bsh-gold);
  border-radius: 2px;
}
.blog-strip-head .bsh-titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.blog-strip-head .bsh-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0;
  font-size: 15px; font-weight: 700; line-height: 1.4;
  letter-spacing: .08em;
  color: var(--bsh-green);
}
.blog-strip-head .bsh-eyebrow::before {
  content: "";
  width: 12px; height: 11px;
  clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%);
  background: var(--bsh-gold);
}
.blog-strip-head .bsh-title {
  margin: 0;
  font-size: 28px; font-weight: 700; line-height: 1.35;
  letter-spacing: .03em;
  color: var(--bsh-deep);
}
.blog-strip-head .bsh-more {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px;
  padding: 0 2px;
  font-size: 15px; font-weight: 700; line-height: 1.4;
  color: var(--bsh-deep);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.blog-strip-head .bsh-more::after {
  content: "";
  flex: 0 0 auto;
  width: 26px; height: 26px;
  border-radius: 50%;
  background:
    linear-gradient(var(--bsh-deep), var(--bsh-deep)) 50% 50% / 0 0 no-repeat,
    var(--bsh-pale);
  -webkit-mask: none;
  box-shadow: inset 0 0 0 1px #c6d9b6;
  transition: background-color .2s, box-shadow .2s;
}
.blog-strip-head .bsh-more > span { position: relative; }
.blog-strip-head .bsh-more > span::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: currentColor;
  opacity: .35;
  transition: opacity .2s;
}
.blog-strip-head .bsh-more::before {
  content: "";
  position: absolute; right: 12px; top: 50%;
  width: 6px; height: 6px;
  margin-top: -3px;
  border: solid var(--bsh-deep);
  border-width: 2px 2px 0 0;
  transform: rotate(45deg);
  z-index: 1;
}
.blog-strip-head .bsh-more { position: relative; }
.blog-strip-head .bsh-more:hover { color: var(--bsh-green); }
.blog-strip-head .bsh-more:hover > span::after { opacity: 1; }
.blog-strip-head .bsh-more:hover::after { box-shadow: inset 0 0 0 1px var(--bsh-green); }
.blog-strip-head .bsh-more:focus-visible { outline: 3px solid var(--bsh-gold); outline-offset: 3px; border-radius: 4px; }

@media (max-width: 600px) {
  .blog-strip-head { min-height: 0; padding-bottom: 10px; gap: 4px 16px; }
  .blog-strip-head .bsh-eyebrow { font-size: 14px; }
  .blog-strip-head .bsh-title { font-size: 22px; }
  .blog-strip-head .bsh-more { font-size: 14px; min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .blog-strip-head * { transition: none !important; } }
/* ===== 帯ここまで ===== */

/* 記事のトップ画像（文字が多いので切らずに全体を見せる） */
.blog-strip .bs-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 20px; }
.blog-strip .bs-post { display: block; overflow: hidden; border: 1px solid #d6dfcc; border-radius: 10px; background: #fff; transition: box-shadow .2s, transform .2s; }
.blog-strip .bs-post img { display: block; width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: contain; background: #f4f1e6; }
.blog-strip .bs-post:hover { box-shadow: 0 10px 24px -14px rgba(25, 77, 34, .5); transform: translateY(-2px); }
.blog-strip .bs-post:focus-visible { outline: 3px solid #f4bd2a; outline-offset: 3px; }
@media (max-width: 760px) {
  .blog-strip .bs-posts { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 14px; }
}
@media (prefers-reduced-motion: reduce) { .blog-strip .bs-post { transition: none; } }