/* ブログ（一覧・記事）の共通の組み。色や書体はサイト側から継承し、面は半透明で暗い地にも明るい地にも馴染ませる。
   ボタンはサイトの .btn に任せる。 */
.skb { padding-block: clamp(6rem, 8vw, 9rem) clamp(4rem, 6vw, 7rem); }
.skb__wrap { width: min(100% - 2.5rem, 72rem); margin-inline: auto; }
.skb__wrap--narrow { width: min(100% - 2.5rem, 46rem); }
.skb__eyebrow { font-size: 0.72em; letter-spacing: 0.32em; text-transform: uppercase; opacity: 0.7; margin: 0 0 0.6rem; }
.skb__title { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.8rem); line-height: 1.3; margin: 0 0 1rem; }
.skb__lead { opacity: 0.8; max-width: 40em; margin: 0 0 2.4rem; }
.skb__empty { padding: 2.4rem 0; opacity: 0.75; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; }

/* 一覧 */
.skb__list { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); margin-top: 1.6rem; }
.skb-card { border: 1px solid rgba(128, 128, 128, 0.35); border-radius: 6px; overflow: hidden; background: rgba(128, 128, 128, 0.07); transition: transform 300ms ease, box-shadow 300ms ease; }
.skb-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.6); }
.skb-card__link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.skb-card__thumb { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: rgba(128, 128, 128, 0.15); }
.skb-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.skb-card__body { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.1rem 1.2rem 1.3rem; }
.skb-card__meta { display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; align-items: baseline; font-size: 0.78em; letter-spacing: 0.1em; opacity: 0.75; font-variant-numeric: tabular-nums; }
.skb-card__store { border: 1px solid currentColor; border-radius: 999px; padding: 0.05em 0.6em; font-size: 0.9em; }
.skb-card__title { font-size: 1.05em; line-height: 1.5; font-weight: 600; }
.skb-card__excerpt { font-size: 0.9em; line-height: 1.8; opacity: 0.8; }

/* 記事 */
.skb__event { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 1rem; margin: 0 0 1.4rem; padding: 0.8rem 1rem; border: 1px solid rgba(128, 128, 128, 0.35); border-left: 3px solid currentColor; border-radius: 4px; background: rgba(128, 128, 128, 0.08) }
.skb__event-label { font-size: 0.72em; letter-spacing: 0.24em; opacity: 0.75 }
.skb__event-when { font-size: 1.02em; letter-spacing: 0.06em; font-variant-numeric: tabular-nums }
.skb__action { margin-top: 2.2rem }
.skb__crumb { display: flex; gap: 0.7rem; font-size: 0.78em; letter-spacing: 0.12em; opacity: 0.75; margin-bottom: 1.6rem; }
.skb__crumb a { color: inherit; text-decoration: none; }
.skb__meta { display: flex; gap: 1rem; align-items: baseline; font-size: 0.82em; letter-spacing: 0.12em; opacity: 0.75; margin: 0 0 0.6rem; font-variant-numeric: tabular-nums; }
.skb__cat { border: 1px solid currentColor; border-radius: 999px; padding: 0.05em 0.7em; }
.skb__hero { margin: 1.6rem 0 2rem; border-radius: 6px; overflow: hidden; }
.skb__hero img { width: 100%; height: auto; display: block; }
.skb__content { line-height: 2; font-size: 1.02em; }
.skb__content > * + * { margin-top: 1.2em; }
.skb__content h2 { font-size: 1.35em; margin-top: 2.2em; padding-left: 0.7em; border-left: 3px solid currentColor; line-height: 1.4; }
.skb__content h3 { font-size: 1.15em; margin-top: 1.8em; line-height: 1.4; }
.skb__content img { max-width: 100%; height: auto; border-radius: 4px; }
.skb__content figure { margin: 1.6em 0; }
.skb__content figcaption { font-size: 0.82em; opacity: 0.7; margin-top: 0.4em; }
.skb__content ul, .skb__content ol { padding-left: 1.4em; }
.skb__content ul { list-style: disc; } .skb__content ol { list-style: decimal; }
.skb__content blockquote { margin: 1.6em 0; padding: 0.6em 1.2em; border-left: 3px solid currentColor; opacity: 0.85; }
.skb__content a { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; }
.skb__content .wp-block-embed iframe, .skb__content iframe { max-width: 100%; }
.skb__pager { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: center; margin-top: 2.6rem; }
.skb__pager > :last-child { justify-self: end; }
.skb__pos, .skb__back { font-size: 0.85em; letter-spacing: 0.12em; opacity: 0.75; color: inherit; text-decoration: none; font-variant-numeric: tabular-nums; }
.skb__pager--entry { border-top: 1px solid rgba(128, 128, 128, 0.35); padding-top: 1.6rem; margin-top: 3rem; }
.skb__pager--entry .btn { max-width: 100%; }
.skb__pager--entry .btn span:not(.btn__arrow) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 14em; }

/* トップの「最新のブログ」欄。区画の余白はサイトの .section に任せ、見出しの大きさだけ整える */
.skb-front__title { margin-bottom: 1.4rem; }
.skb__list--front { grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.skb-front__more { margin-top: 2rem; }

/* 店舗サイトの入場演出（扉・起動・点呼・水面）はブログでは出さない */
.shopkit-blog .gate, .shopkit-blog .boot, .shopkit-blog .muster, .shopkit-blog .thaw, .shopkit-blog .door, .shopkit-blog .scanlines { display: none !important; }

@media (max-width: 40rem) {
  .skb__pager { grid-template-columns: 1fr; }
  .skb__pager > * { justify-self: stretch !important; text-align: center; }
  .skb__pager--entry .btn span:not(.btn__arrow) { max-width: none; }
}